/* =========================================================
   MIRAI EXECUTIVE OVERVIEW
   ========================================================= */

.mirai-overview {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.overview-executive-header {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(128, 103, 255, 0.18),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            rgba(19, 27, 47, 0.96),
            rgba(7, 12, 24, 0.98)
        );
}

.overview-executive-header::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -150px;
    bottom: -210px;
    border-radius: 50%;
    background: rgba(73, 181, 255, 0.10);
    filter: blur(4px);
}

.overview-executive-header h1 {
    margin: 7px 0 8px;
    font-size: clamp(28px, 3vw, 43px);
    line-height: 1.05;
}

.overview-executive-header h1 span {
    opacity: 0.62;
    font-weight: 500;
}

.overview-executive-header p {
    max-width: 720px;
    margin: 0;
    line-height: 1.6;
    opacity: 0.68;
}

.overview-live-badge {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border: 1px solid rgba(79, 221, 153, 0.28);
    border-radius: 999px;
    background: rgba(79, 221, 153, 0.08);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.overview-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #55e69d;
    box-shadow: 0 0 12px rgba(85, 230, 157, 0.85);
    animation: overviewPulse 1.8s infinite;
}

@keyframes overviewPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.78);
    }
}


.overview-kpi-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.overview-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 20px;
    text-align: left;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(20, 29, 48, 0.94),
            rgba(9, 14, 27, 0.96)
        );
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.overview-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(128, 103, 255, 0.5);
    box-shadow:
        0 13px 30px rgba(0, 0, 0, 0.19);
}

.overview-kpi-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -50px;
    bottom: -58px;
    border-radius: 50%;
    background: rgba(128, 103, 255, 0.09);
}

.overview-kpi-success::after {
    background: rgba(73, 205, 143, 0.11);
}

.overview-kpi-danger::after {
    background: rgba(255, 94, 112, 0.12);
}

.overview-kpi-warning::after {
    background: rgba(255, 187, 79, 0.11);
}

.overview-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.overview-kpi-label {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.035em;
    opacity: 0.72;
}

.overview-kpi-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.055);
    font-size: 13px;
}

.overview-kpi-value {
    margin-top: 17px;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 800;
    line-height: 1;
}

.overview-kpi-detail {
    margin-top: 8px;
    font-size: 11px;
    opacity: 0.52;
}


.overview-family-panel,
.overview-panel {
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(17, 25, 43, 0.94),
            rgba(8, 13, 25, 0.96)
        );
}

.overview-family-panel {
    overflow: hidden;
    padding: 18px 20px 14px;
}

.overview-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.overview-section-heading h2 {
    margin: 0;
    font-size: 17px;
}

.overview-section-heading p {
    margin: 5px 0 0;
    font-size: 11px;
    opacity: 0.52;
}

.overview-panel-kicker {
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    opacity: 0.46;
}

.overview-text-action {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.58;
}

.overview-text-action:hover {
    opacity: 1;
}


.overview-family-marquee {
    overflow: hidden;
    position: relative;
    margin-top: 16px;
    mask-image:
        linear-gradient(
            to right,
            transparent,
            black 5%,
            black 95%,
            transparent
        );
}

.overview-family-track {
    display: flex;
    width: max-content;
    gap: 9px;
    animation:
        overviewFamilies 38s linear infinite;
}

.overview-family-marquee:hover
.overview-family-track {
    animation-play-state: paused;
}

.overview-family-chip {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid rgba(128, 103, 255, 0.19);
    border-radius: 999px;
    background: rgba(128, 103, 255, 0.075);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

@keyframes overviewFamilies {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


.overview-main-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.overview-panel {
    min-height: 275px;
    padding: 20px;
}

.overview-clickable-panel {
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.overview-clickable-panel:hover {
    transform: translateY(-2px);
    border-color: rgba(128, 103, 255, 0.43);
}

.overview-panel-number {
    font-size: 26px;
    font-weight: 800;
    opacity: 0.9;
}

.overview-panel-footer {
    margin-top: 17px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    font-size: 10px;
    font-weight: 700;
    opacity: 0.48;
}


.overview-yarn-list {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.overview-yarn-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.overview-yarn-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.overview-yarn-status {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    opacity: 0.68;
}

.overview-yarn-status.ok {
    color: #64dda5;
}

.overview-yarn-status.bad {
    color: #ff7887;
}


.overview-alert-groups {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.overview-alert-group {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.overview-alert-group-name {
    font-size: 11px;
    opacity: 0.73;
}

.overview-alert-group-count {
    min-width: 32px;
    padding: 4px 8px;
    text-align: center;
    border-radius: 999px;
    background: rgba(128, 103, 255, 0.11);
    font-size: 10px;
    font-weight: 800;
}


.overview-dummy-grid {
    margin-top: 18px;
}

.overview-dummy-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
    padding: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
}

.overview-dummy-empty strong {
    font-size: 12px;
}

.overview-dummy-empty span {
    max-width: 440px;
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.6;
    opacity: 0.5;
}


.overview-loading {
    padding: 20px 0;
    font-size: 11px;
    opacity: 0.45;
}

.overview-alert-stream {
    max-height: 205px;
    margin-top: 15px;
    overflow-y: auto;
}


.overview-quick-strip {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 14px;
    background: rgba(10, 16, 29, 0.72);
}

.overview-quick-label {
    margin-right: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    opacity: 0.45;
}

.overview-quick-strip button {
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    color: inherit;
    cursor: pointer;
    font-size: 10px;
    font-weight: 650;
}

.overview-quick-strip button:hover {
    border-color: rgba(128, 103, 255, 0.44);
    background: rgba(128, 103, 255, 0.07);
}


@media (max-width: 1100px) {
    .overview-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .overview-executive-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .overview-kpi-grid,
    .overview-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .overview-family-track,
    .overview-live-dot {
        animation: none;
    }
}


/* =========================================================
   CONSUMER VISUALIZATION V2
   ========================================================= */

.overview-consumer-visual {
    padding: 20px 24px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(17,25,43,.96),
            rgba(8,13,25,.97)
        );
}

.overview-consumer-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.overview-consumer-summary h2 {
    margin: 0;
    font-size: 18px;
}

.overview-consumer-summary p {
    margin: 5px 0 0;
    font-size: 11px;
    opacity: .5;
}

.overview-consumer-viz-body {
    display: grid;
    grid-template-columns: 330px minmax(0,1fr);
    gap: 28px;
    align-items: center;
    margin-top: 22px;
}

.overview-donut-area {
    display: flex;
    align-items: center;
    gap: 24px;
}

.overview-consumer-donut {
    --running: 0deg;
    --down: 0deg;
    --inactive: 0deg;

    position: relative;
    flex: 0 0 auto;
    width: 148px;
    height: 148px;
    border-radius: 50%;

    background:
        conic-gradient(
            #45d18a 0deg var(--running),
            #ff6175 var(--running) var(--down),
            #7784ff var(--down) var(--inactive),
            #e9a84e var(--inactive) 360deg
        );

    box-shadow:
        0 0 36px rgba(60,110,255,.08);
}

.overview-consumer-donut::after {
    content: "";
    position: absolute;
    inset: 17px;
    border-radius: 50%;
    background: #0c1423;
    box-shadow: inset 0 0 20px rgba(0,0,0,.24);
}

.overview-donut-center {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.overview-donut-center strong {
    font-size: 32px;
    line-height: 1;
}

.overview-donut-center span {
    margin-top: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    opacity: .45;
}

.overview-consumer-legend {
    display: grid;
    gap: 9px;
    min-width: 130px;
}

.overview-consumer-legend > div {
    display: grid;
    grid-template-columns: 9px 1fr auto;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    opacity: .73;
}

.overview-consumer-legend strong {
    font-size: 11px;
    opacity: 1;
}

.overview-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.overview-dot.running {
    background: #45d18a;
}

.overview-dot.down {
    background: #ff6175;
}

.overview-dot.inactive {
    background: #7784ff;
}

.overview-dot.maintenance {
    background: #e9a84e;
}


.overview-family-area {
    min-width: 0;
}

.overview-family-title {
    margin-bottom: 13px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    opacity: .48;
    text-transform: uppercase;
}

.overview-family-bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.overview-family-bubble {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(126,107,255,.20);
    border-radius: 999px;
    background: rgba(126,107,255,.07);
    color: inherit;
    cursor: pointer;
    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.overview-family-bubble:hover {
    transform: translateY(-2px) scale(1.025);
    border-color: rgba(126,107,255,.55);
    background: rgba(126,107,255,.14);
}

.overview-family-bubble-name {
    font-size: 10px;
    font-weight: 700;
}

.overview-family-bubble-count {
    min-width: 25px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    font-size: 9px;
    font-weight: 800;
    text-align: center;
}

.overview-family-tooltip {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    display: none;
    min-width: 150px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px;
    background: #121b2c;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
    font-size: 9px;
    line-height: 1.5;
    white-space: nowrap;
}

.overview-family-bubble:hover
.overview-family-tooltip {
    display: block;
}

@media (max-width: 900px) {
    .overview-consumer-viz-body {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PREVIOUS HOUR DUMMY HEATMAP
   ========================================================= */

.overview-dummy-heatmap {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(105px, 1fr)
        );
    gap: 9px;
    margin-top: 18px;
}

.overview-dummy-tile {
    position: relative;
    overflow: hidden;
    min-height: 92px;
    padding: 12px;
    border: 1px solid
        rgba(255,255,255,.075);
    border-radius: 12px;
    background:
        rgba(
            69,
            209,
            138,
            calc(
                var(--dummy-intensity)
                * .15
            )
        );
}

.overview-dummy-tile.active {
    border-color:
        rgba(69,209,138,.20);
}

.overview-dummy-tile.zero {
    background:
        rgba(255,97,117,.08);
    border-color:
        rgba(255,97,117,.20);
}

.overview-dummy-dc {
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .58;
}

.overview-dummy-tile strong {
    display: block;
    font-size: 23px;
    line-height: 1;
}

.overview-dummy-state {
    display: block;
    margin-top: 7px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: .42;
}


/* =========================================================
   COMPACT ONE-PAGE OVERVIEW V3
   ========================================================= */

.overview-main-grid {
    align-items: stretch;
}

.overview-panel {
    min-height: 0;
    padding: 16px 18px;
}

.overview-section-heading h2 {
    font-size: 15px;
}

.overview-section-heading p {
    margin-top: 2px;
    font-size: 9px;
}


/* ---------- DUMMY GRAPH ---------- */

.overview-dummy-grid {
    margin-top: 10px;
}

.dummy-chart-summary {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 9px;
}

.dummy-chart-summary > div {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.dummy-chart-summary strong {
    font-size: 16px;
}

.dummy-chart-summary span {
    font-size: 8px;
    font-weight: 750;
    opacity: .48;
}

.dummy-summary-good strong {
    color: #50d69a;
}

.dummy-summary-bad strong {
    color: #ff6678;
}


.dummy-chart {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 3px;
}

.dummy-chart-row {
    display: grid;
    grid-template-columns:
        92px minmax(70px, 1fr) 26px;
    gap: 7px;
    align-items: center;

    min-height: 18px;
}

.dummy-chart-name {
    overflow: hidden;
    font-size: 8px;
    font-weight: 700;
    opacity: .7;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dummy-chart-track {
    position: relative;
    height: 5px;
    overflow: visible;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
}

.dummy-chart-bar {
    height: 100%;
    border-radius: 999px;
    background: #4fd397;
    transition: width .25s ease;
}

.dummy-chart-row.threshold
.dummy-chart-bar {
    background: #e9b04c;
}

.dummy-chart-row.critical
.dummy-chart-bar {
    background: #ff6275;
}

.dummy-threshold-line {
    position: absolute;
    z-index: 2;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background: rgba(255,255,255,.52);
}

.dummy-chart-value {
    font-size: 9px;
    text-align: right;
}

.dummy-chart-row.critical
.dummy-chart-value {
    color: #ff7282;
}

.dummy-chart-row.threshold
.dummy-chart-value {
    color: #efb752;
}


/* Remove old giant tile behavior */

.overview-dummy-heatmap {
    display: none;
}


/* ---------- COMPACT YARN ---------- */

.overview-yarn-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 5px 12px;
    margin-top: 10px;
}

.overview-yarn-row {
    min-height: 24px;
    padding: 5px 8px;
    border-radius: 7px;
}

.overview-yarn-name {
    font-size: 9px;
}

.overview-yarn-status {
    font-size: 8px;
}

.overview-panel-footer {
    margin-top: 9px;
    padding-top: 7px;
}


/* ---------- KEEP OVERVIEW WITHIN VIEWPORT ---------- */

#page-overview .overview-executive-header {
    padding: 16px 20px;
}

#page-overview
.overview-executive-header h1 {
    margin: 3px 0 5px;
    font-size: 28px;
}

#page-overview
.overview-executive-header p {
    font-size: 11px;
}

#page-overview
.overview-consumer-visual {
    padding: 14px 18px;
}

#page-overview
.overview-consumer-viz-body {
    margin-top: 11px;
}

#page-overview
.overview-main-grid {
    gap: 12px;
}

#page-overview
.overview-quick-strip {
    padding: 7px 10px;
}

@media (max-width: 1100px) {

    .dummy-chart {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   COMPACT YARN UTILIZATION GRAPH
   ========================================================= */

.overview-yarn-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 5px;
    margin-top: 12px;
}


.overview-yarn-compact-row {
    display: grid;
    grid-template-columns:
        72px minmax(70px, 1fr) 42px;
    gap: 7px;
    align-items: center;
    min-height: 20px;
}


.overview-yarn-compact-name {
    overflow: hidden;
    font-size: 8px;
    font-weight: 750;
    opacity: .72;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.overview-yarn-compact-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background:
        rgba(255,255,255,.055);
}


.overview-yarn-compact-bar {
    height: 100%;
    border-radius: 999px;
    background: #4fd397;
}


.overview-yarn-compact-row.warning
.overview-yarn-compact-bar {
    background: #eab14e;
}


.overview-yarn-compact-row.critical
.overview-yarn-compact-bar {
    background: #ff6377;
}


.overview-yarn-compact-row.offline
.overview-yarn-compact-bar,
.overview-yarn-compact-row.unknown
.overview-yarn-compact-bar {
    background: #697386;
}


.overview-yarn-compact-value {
    font-size: 8px;
    text-align: right;
}


.overview-yarn-compact-row.ok
.overview-yarn-compact-value {
    color: #59d7a0;
}


.overview-yarn-compact-row.warning
.overview-yarn-compact-value {
    color: #eab14e;
}


.overview-yarn-compact-row.critical
.overview-yarn-compact-value {
    color: #ff7182;
}


.overview-yarn-compact-row.offline
.overview-yarn-compact-value {
    color: #ff7182;
}


/* =========================================================
   ONE-PAGE HEIGHT REDUCTION
   ========================================================= */

#page-overview .mirai-overview {
    gap: 10px;
}


#page-overview
.overview-executive-header {
    padding: 12px 18px;
}


#page-overview
.overview-executive-header h1 {
    font-size: 24px;
}


#page-overview
.overview-executive-header p {
    line-height: 1.35;
}


#page-overview
.overview-consumer-visual {
    padding: 12px 16px;
}


#page-overview
.overview-consumer-donut {
    width: 112px;
    height: 112px;
}


#page-overview
.overview-consumer-donut::after {
    inset: 13px;
}


#page-overview
.overview-donut-center strong {
    font-size: 25px;
}


#page-overview
.overview-consumer-viz-body {
    grid-template-columns:
        285px minmax(0, 1fr);
    gap: 18px;
    margin-top: 8px;
}


#page-overview
.overview-family-bubble {
    padding: 6px 9px;
}


#page-overview
.overview-main-grid {
    gap: 10px;
}


#page-overview
.overview-panel {
    padding: 13px 16px;
}


#page-overview
.overview-panel-number {
    font-size: 20px;
}


#page-overview
.overview-panel-footer {
    margin-top: 6px;
    padding-top: 5px;
}


#page-overview
.dummy-chart {
    max-height: 185px;
    overflow: hidden;
}


#page-overview
.overview-alert-groups {
    gap: 4px;
    margin-top: 9px;
}


#page-overview
.overview-alert-stream {
    max-height: 135px;
    margin-top: 8px;
}


#page-overview
.overview-quick-strip {
    padding: 5px 9px;
}


@media (max-width: 1150px) {

    .overview-yarn-list {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   DUMMY MULTI-SERIES HISTORY GRAPH
   ========================================================= */

#page-overview .overview-dummy-grid {
    margin-top: 6px;
}


.dummy-graph-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 4px;
}


.dummy-chart-summary {
    margin: 0;
}


.dummy-hours-control {
    display: flex;
    align-items: center;
    gap: 6px;
}


.dummy-hours-control span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    opacity: .45;
    text-transform: uppercase;
}


.dummy-hours-control select {
    height: 27px;
    padding: 0 25px 0 9px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 7px;
    background: #121c2c;
    color: inherit;
    font-size: 9px;
    font-weight: 700;
}


.dummy-svg-wrap {
    width: 100%;
    height: 210px;
    overflow: hidden;
}


.dummy-history-svg {
    display: block;
    width: 100%;
    height: 100%;
}


.dummy-svg-grid {
    stroke: rgba(255,255,255,.06);
    stroke-width: 1;
}


.dummy-svg-threshold {
    stroke: rgba(239,181,74,.78);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}


.dummy-svg-x-grid {
    stroke: rgba(255,255,255,.035);
    stroke-width: 1;
}


.dummy-svg-y-label,
.dummy-svg-x-label {
    fill: rgba(205,214,230,.48);
    font-size: 8px;
    font-family: inherit;
}


.dummy-series-path {
    vector-effect:
        non-scaling-stroke;
    transition:
        stroke-opacity .12s ease,
        stroke-width .12s ease;
}


.dummy-series-path:hover {
    stroke-opacity: 1;
    stroke-width: 2.2;
}


.dummy-problem-point {
    fill: #ff6377;
    stroke: #ff9daa;
    stroke-width: .7;
    vector-effect:
        non-scaling-stroke;
}


.dummy-graph-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    padding-top: 4px;
    font-size: 8px;
    font-weight: 700;
    opacity: .62;
}


.dummy-graph-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}


.dummy-graph-legend i {
    display: inline-block;
}


.dummy-legend-line {
    width: 15px;
    height: 2px;
    background: #62a9e8;
}


.dummy-legend-threshold {
    width: 15px;
    border-top:
        1px dashed #eeb54d;
}


.dummy-legend-problem {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6377;
}


.dummy-latest-source {
    margin-left: auto;
    opacity: .6;
}


/*
 * Kill old bar/heatmap layouts.
 */
#page-overview .dummy-chart,
#page-overview .overview-dummy-heatmap {
    display: none;
}


/*
 * Keep this whole panel compact.
 */
#page-overview
.overview-main-grid
.overview-panel {
    min-height: 0;
}


/* =========================================================
   DUMMY COMPLETED-HOUR SNAPSHOT
   ========================================================= */

#page-overview
.dummy-graph-toolbar,

#page-overview
.dummy-svg-wrap,

#page-overview
.dummy-graph-legend,

#page-overview
.dummy-chart,

#page-overview
.overview-dummy-heatmap {
    display: none;
}


.dummy-snapshot-summary {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin: 8px 0 10px;
}


.dummy-snapshot-summary > div {
    display: flex;
    align-items: baseline;
    gap: 5px;
}


.dummy-snapshot-summary strong {
    font-size: 19px;
}


.dummy-snapshot-summary span {
    font-size: 8px;
    font-weight: 800;
    opacity: .48;
}


.dummy-snapshot-summary .good strong {
    color: #50d89b;
}


.dummy-snapshot-summary
.threshold strong {
    color: #efb64c;
}


.dummy-snapshot-summary .bad strong {
    color: #ff6679;
}


.dummy-snapshot-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(82px, 1fr)
        );
    gap: 4px;
    max-height: 255px;
    overflow-y: auto;
    padding-right: 3px;
}


.dummy-snapshot-cell {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;

    min-height: 25px;
    padding: 4px 7px;

    border: 1px solid
        rgba(255,255,255,.06);

    border-radius: 6px;

    background:
        rgba(77,210,151,.055);
}


.dummy-snapshot-cell.threshold {
    background:
        rgba(239,182,76,.08);

    border-color:
        rgba(239,182,76,.17);
}


.dummy-snapshot-cell.bad {
    background:
        rgba(255,102,121,.10);

    border-color:
        rgba(255,102,121,.24);
}


.dummy-snapshot-name {
    overflow: hidden;
    font-size: 7px;
    font-weight: 750;
    opacity: .68;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.dummy-snapshot-cell strong {
    font-size: 9px;
}


.dummy-snapshot-cell.good strong {
    color: #50d89b;
}


.dummy-snapshot-cell.threshold strong {
    color: #efb64c;
}


.dummy-snapshot-cell.bad strong {
    color: #ff6679;
}


/* =========================================================
   SLACK 3-DAY CATEGORY VIEW
   ========================================================= */

.overview-slack-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}


.overview-alert-date-select {
    height: 30px;
    max-width: 190px;
    padding: 0 28px 0 9px;

    border:
        1px solid rgba(
            255,
            255,
            255,
            .10
        );

    border-radius: 8px;

    background: #121c2d;

    color: inherit;

    font-size: 9px;
    font-weight: 750;

    cursor: pointer;
}


.overview-alert-meta {
    margin-top: 8px;

    font-size: 8px;
    font-weight: 700;

    opacity: .42;
}


.overview-alert-groups {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    column-gap: 18px;
    row-gap: 4px;

    margin-top: 9px;
}


.overview-alert-category {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    min-height: 22px;

    padding: 3px 7px;

    border-radius: 7px;

    background:
        rgba(
            255,
            255,
            255,
            .022
        );
}


.overview-alert-category-name {
    overflow: hidden;

    font-size: 8px;
    font-weight: 700;

    opacity: .68;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.overview-alert-category-count {
    min-width: 24px;

    padding: 3px 6px;

    border-radius: 999px;

    background:
        rgba(
            126,
            107,
            255,
            .12
        );

    font-size: 8px;
    text-align: center;
}


.overview-alert-more {
    grid-column:
        1 / -1;

    margin-top: 2px;

    font-size: 8px;
    font-weight: 700;

    opacity: .42;
}


@media (max-width: 900px) {

    .overview-alert-groups {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   SLACK CATEGORY DETAIL MODAL
   ========================================================= */

.overview-alert-category {
    width: 100%;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.overview-alert-category:hover {
    background:
        rgba(126,107,255,.10);

    transform:
        translateY(-1px);
}


.overview-alert-modal[hidden] {
    display: none;
}


.overview-alert-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 30px;
}


.overview-alert-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(2,6,15,.72);

    backdrop-filter:
        blur(4px);
}


.overview-alert-modal-card {
    position: relative;
    z-index: 1;

    width:
        min(900px, 92vw);

    max-height:
        78vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(
            126,
            107,
            255,
            .35
        );

    border-radius: 18px;

    background:
        #0c1525;

    box-shadow:
        0 28px 80px
        rgba(0,0,0,.50);
}


.overview-alert-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 22px;

    border-bottom:
        1px solid
        rgba(255,255,255,.065);
}


.overview-alert-modal-header h2 {
    margin: 2px 0 0;

    font-size: 18px;
}


.overview-alert-modal-header p {
    margin: 5px 0 0;

    font-size: 10px;
    opacity: .52;
}


.overview-alert-modal-close {
    width: 32px;
    height: 32px;

    border:
        1px solid rgba(
            255,
            255,
            255,
            .10
        );

    border-radius: 8px;

    background:
        rgba(255,255,255,.035);

    color: inherit;

    cursor: pointer;

    font-size: 21px;
}


.overview-alert-modal-list {
    overflow-y: auto;

    padding: 8px 18px 18px;
}


.overview-alert-detail-row {
    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr)
        36px;

    gap: 12px;

    padding: 11px 7px;

    border-bottom:
        1px solid
        rgba(255,255,255,.05);
}


.overview-alert-detail-time {
    padding-top: 2px;

    font-size: 9px;
    font-weight: 750;

    opacity: .45;
}


.overview-alert-detail-content {
    min-width: 0;
}


.overview-alert-detail-content strong {
    display: block;

    font-size: 11px;

    line-height: 1.45;
}


.overview-alert-detail-content p {
    margin: 5px 0 0;

    overflow: hidden;

    color: inherit;

    font-size: 9px;
    line-height: 1.5;

    opacity: .55;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


.overview-alert-detail-count {
    align-self: start;

    color: #9d8cff;

    font-size: 10px;
    font-weight: 800;

    text-align: right;
}


/* ============================================================
   MIRAI PASSWORD VISIBILITY
   ============================================================ */

.mirai-password-field {
    position: relative;
    width: 100%;
}

.mirai-password-field input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 58px !important;
}

.mirai-password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);

    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    background: transparent !important;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;
    opacity: .65;
}

.mirai-password-toggle:hover {
    opacity: 1;
    background: transparent !important;
}


/* ============================================================
   MIRAI PASSWORD EYE - INSIDE INPUT
   ============================================================ */

.login-card .mirai-password-field {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.login-card .mirai-password-field input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 60px !important;
    margin: 0 !important;
}


/*
 * Override generic .login-card button rules.
 * Eye stays inside the password input.
 */
.login-card .mirai-password-field .mirai-password-toggle {
    position: absolute !important;

    top: 50% !important;
    right: 16px !important;
    left: auto !important;

    transform: translateY(-50%) !important;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #8b95a9 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 19px !important;
    line-height: 1 !important;

    cursor: pointer !important;
    z-index: 5 !important;

    opacity: .75 !important;
}

.login-card .mirai-password-field .mirai-password-toggle:hover,
.login-card .mirai-password-field .mirai-password-toggle:focus,
.login-card .mirai-password-field .mirai-password-toggle:active {
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}


/* ============================================================
   MIRAI USER MANAGEMENT
   ============================================================ */

.mirai-admin-navigation.hidden,
.mirai-current-user.hidden,
.mirai-users-message.hidden {
    display: none !important;
}


.mirai-current-user {
    margin: 24px 14px 12px;
    padding: 14px;

    display: flex;
    align-items: center;
    gap: 12px;

    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;

    background: rgba(15, 23, 42, .55);
}


.mirai-current-user-avatar,
.mirai-user-avatar {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #7457ff,
        #5b3df5
    );

    color: #fff;
    font-weight: 800;
}


.mirai-current-user-details {
    min-width: 0;
}


.mirai-current-user-name {
    color: #f8fafc;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.mirai-current-user-email {
    margin-top: 2px;

    color: #94a3b8;
    font-size: 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.mirai-current-user-role {
    margin-top: 4px;

    color: #a78bfa;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}


.mirai-users-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    margin-bottom: 24px;
}


.mirai-users-header h1 {
    margin: 0;
}


.mirai-users-header p,
.mirai-users-section-title p {
    color: #94a3b8;
}


.mirai-users-refresh {
    width: auto !important;
    padding: 10px 18px !important;
}


.mirai-users-message {
    margin-bottom: 18px;
    padding: 12px 16px;

    border-radius: 10px;

    font-weight: 600;
}


.mirai-users-message.success {
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .35);
    color: #86efac;
}


.mirai-users-message.error {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .35);
    color: #fca5a5;
}


.mirai-users-summary {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 30px;
}


.mirai-user-stat {
    padding: 18px;

    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 14px;

    background: rgba(15, 23, 42, .55);
}


.mirai-user-stat span {
    display: block;

    color: #94a3b8;
    font-size: 13px;
}


.mirai-user-stat strong {
    display: block;

    margin-top: 8px;

    color: #f8fafc;
    font-size: 28px;
}


.mirai-users-section {
    margin-top: 30px;
}


.mirai-users-section-title {
    margin-bottom: 14px;
}


.mirai-users-section-title h2 {
    margin-bottom: 4px;
}


.mirai-user-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px, 1fr)
        );

    gap: 16px;
}


.mirai-user-card {
    padding: 18px;

    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 14px;

    background: rgba(15, 23, 42, .62);
}


.mirai-user-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}


.mirai-user-primary {
    flex: 1;
    min-width: 0;
}


.mirai-user-display-name {
    color: #f8fafc;
    font-weight: 750;
}


.mirai-user-email {
    margin-top: 3px;

    color: #94a3b8;
    font-size: 13px;

    overflow: hidden;
    text-overflow: ellipsis;
}


.mirai-user-status {
    padding: 5px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}


.mirai-user-status.status-pending {
    color: #fde68a;
    background: rgba(234, 179, 8, .13);
}


.mirai-user-status.status-active {
    color: #86efac;
    background: rgba(34, 197, 94, .13);
}


.mirai-user-status.status-disabled {
    color: #fca5a5;
    background: rgba(239, 68, 68, .13);
}


.mirai-user-status.status-rejected {
    color: #fca5a5;
    background: rgba(239, 68, 68, .13);
}


.mirai-user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 14px;
}


.mirai-user-meta span {
    padding: 4px 8px;

    border-radius: 6px;

    background: rgba(148, 163, 184, .08);

    color: #94a3b8;
    font-size: 11px;
}


.mirai-user-permissions {
    margin-top: 18px;
    padding-top: 16px;

    border-top: 1px solid rgba(148, 163, 184, .12);
}


.mirai-user-permissions-title {
    margin-bottom: 10px;

    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .06em;
}


.mirai-permission-option {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 9px 0;

    color: #cbd5e1;
    font-size: 13px;

    cursor: pointer;
}


.mirai-permission-option input {
    width: 16px;
    height: 16px;
}


.mirai-save-permissions {
    width: auto !important;

    margin-top: 12px !important;
    padding: 8px 13px !important;

    font-size: 12px !important;
}


.mirai-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 18px;
}


.mirai-user-action {
    width: auto !important;

    margin: 0 !important;
    padding: 8px 13px !important;

    font-size: 12px !important;
}


.mirai-user-action.approve {
    background: #16a34a !important;
}


.mirai-user-action.reject {
    background: #dc2626 !important;
}


.mirai-user-action.secondary {
    background: rgba(
        148,
        163,
        184,
        .16
    ) !important;
}


.mirai-rejection-reason {
    margin-top: 14px;
    padding: 10px;

    border-radius: 8px;

    color: #fca5a5;
    background: rgba(239, 68, 68, .08);

    font-size: 12px;
}


.mirai-users-empty {
    padding: 24px;

    border: 1px dashed rgba(148, 163, 184, .2);
    border-radius: 12px;

    color: #64748b;

    text-align: center;
}


@media (max-width: 800px) {

    .mirai-users-summary {
        grid-template-columns: 1fr;
    }

    .mirai-user-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   MIRAI ADMIN + ACCOUNT NAVIGATION
   ============================================================ */

.mirai-admin-navigation {
    display: block;
}

.mirai-admin-navigation.hidden {
    display: none !important;
}

.mirai-account-navigation {
    margin-top: 18px;
}

.mirai-logout-nav {
    cursor: pointer;
}

.mirai-logout-nav:hover {
    color: #fca5a5 !important;
}

.mirai-logout-nav.disabled {
    opacity: .5;
    pointer-events: none;
}


/* ============================================================
   MIRAI SIDEBAR ADMIN VISIBILITY
   ============================================================ */

.sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.mirai-admin-navigation {
    display: block;
    flex-shrink: 0;
    margin-top: 18px;
}

.mirai-admin-navigation.hidden {
    display: none !important;
}

.mirai-current-user {
    flex-shrink: 0;
}

.mirai-current-user.hidden {
    display: none !important;
}

.sidebar-footer {
    flex-shrink: 0;
}


/* ============================================================
   MIRAI TOPBAR ACCOUNT
   ============================================================ */

.topbar {
    position: relative;
}

.mirai-current-user {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    z-index: 100;
    background: transparent !important;
    border: 0 !important;
}

.mirai-current-user.hidden {
    display: none !important;
}

.mirai-user-menu-button {
    min-width: 170px;
    height: 44px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 11px;
    background: rgba(15, 23, 42, .72);
    color: #f8fafc;
    cursor: pointer;
}

.mirai-user-menu-button:hover {
    background: rgba(30, 41, 59, .9);
}

.mirai-current-user-avatar {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 9px !important;
    font-size: 13px;
}

.mirai-topbar-user-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mirai-topbar-user-text strong {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.mirai-topbar-user-text > span {
    margin-top: 1px;
    color: #a78bfa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.mirai-user-chevron {
    color: #94a3b8;
    font-size: 16px;
}

.mirai-user-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    width: 280px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 12px;
    background: #0f172a;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    z-index: 500;
}

.mirai-user-dropdown.hidden {
    display: none !important;
}

.mirai-user-dropdown-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .15);
}

.mirai-user-dropdown-header strong {
    color: #f8fafc;
    font-size: 14px;
}

.mirai-user-dropdown-header span {
    color: #94a3b8;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.mirai-user-dropdown-meta {
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #94a3b8;
    font-size: 12px;
}

.mirai-user-dropdown-meta strong {
    color: #a78bfa;
    font-size: 11px;
    letter-spacing: .06em;
}

.mirai-dropdown-logout {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(248, 113, 113, .25);
    border-radius: 8px;
    background: rgba(127, 29, 29, .15);
    color: #fca5a5;
    cursor: pointer;
}

.mirai-dropdown-logout:hover {
    background: rgba(127, 29, 29, .3);
}


/* Sidebar is navigation/status only now. */

.sidebar-footer .logout-button {
    display: none !important;
}


/* ============================================================
   MIRAI USER MANAGEMENT COMPACT LAYOUT
   ============================================================ */

#page-user-management {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

#page-user-management.active {
    display: block;
}

#page-user-management .mirai-users-header {
    margin: 0 0 18px;
    padding: 0;
    align-items: center;
}

#page-user-management .mirai-users-header h1 {
    margin: 0 0 5px;
    font-size: 26px;
    line-height: 1.2;
}

#page-user-management .mirai-users-header p {
    margin: 0;
}

#page-user-management .mirai-users-summary {
    margin: 0 0 22px;
    gap: 12px;
}

#page-user-management .mirai-user-stat {
    min-height: 86px;
    padding: 16px 18px;
}

#page-user-management .mirai-user-stat strong {
    font-size: 26px;
}

#page-user-management .mirai-users-section {
    margin: 0 0 22px;
}

#page-user-management .mirai-users-section-title {
    margin-bottom: 10px;
}

#page-user-management .mirai-users-section-title h2 {
    margin: 0 0 3px;
    font-size: 17px;
}

#page-user-management .mirai-users-section-title p {
    margin: 0;
    font-size: 12px;
}

#page-user-management .mirai-user-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(360px, 1fr));
    gap: 12px;
}

#page-user-management .mirai-user-card {
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 16px;
}

#page-user-management .mirai-users-empty {
    min-height: 70px;
    padding: 20px;
}


/* Remove excessive page whitespace. */

.content {
    align-content: start;
}

#page-user-management {
    align-self: start;
}


/* Keep topbar status clear of account menu. */

.topbar-center {
    padding-right: 210px;
}


@media (max-width: 1000px) {
    .mirai-topbar-user-text {
        display: none;
    }

    .mirai-user-menu-button {
        min-width: 46px;
        width: 46px;
    }

    .topbar-center {
        padding-right: 70px;
    }

    #page-user-management .mirai-user-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   MIRAI FINAL TOPBAR ACCOUNT POSITION
   ============================================================ */

.topbar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 64px;
    overflow: visible !important;
}

.topbar-center {
    flex: 1;
    padding-right: 220px !important;
}

.topbar .mirai-current-user {
    position: absolute !important;
    top: 50% !important;
    right: 22px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    z-index: 1000 !important;
}

.topbar .mirai-current-user:not(.hidden) {
    display: block !important;
}

.topbar .mirai-user-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 2000 !important;
}


/* ============================================================
   MIRAI USER MANAGEMENT FINAL LAYOUT
   ============================================================ */

#page-user-management {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 24px !important;
    margin: 0 !important;
}

#page-user-management .mirai-users-header {
    margin: 0 0 18px !important;
}

#page-user-management .mirai-users-summary {
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

#page-user-management .mirai-user-stat {
    min-height: 0 !important;
    padding: 14px 16px !important;
}

#page-user-management .mirai-users-section {
    margin: 24px 0 0 !important;
}

#page-user-management .mirai-user-grid {
    display: grid !important;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(380px, 1fr)
        ) !important;
    align-items: start !important;
    gap: 14px !important;
}

#page-user-management .mirai-user-card {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

#page-user-management .mirai-user-card-header {
    align-items: center !important;
}

#page-user-management .mirai-user-meta {
    margin-top: 10px !important;
}

#page-user-management .mirai-user-permissions {
    margin-top: 14px !important;
    padding-top: 12px !important;
}

#page-user-management .mirai-permission-option {
    margin: 7px 0 !important;
}

#page-user-management .mirai-user-actions {
    margin-top: 14px !important;
}

#page-user-management .mirai-users-empty {
    min-height: 0 !important;
    padding: 18px !important;
}


/* ============================================================
   MIRAI CHANGE AUDIT
   ============================================================ */

#page-change-audit {
    padding: 24px;
}

.mirai-audit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.mirai-audit-header h1 {
    margin: 0 0 6px;
}

.mirai-audit-header p {
    margin: 0;
    opacity: 0.72;
}

.mirai-audit-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(140px, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.mirai-audit-stat {
    padding: 16px;
    border: 1px solid
        rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background:
        rgba(255, 255, 255, 0.025);
}

.mirai-audit-stat span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    opacity: 0.68;
}

.mirai-audit-stat strong {
    font-size: 24px;
}

.mirai-audit-toolbar {
    display: flex;
    gap: 10px;
    margin: 18px 0;
}

.mirai-audit-toolbar input {
    flex: 1;
    min-width: 220px;
}

.mirai-audit-toolbar input,
.mirai-audit-toolbar select,
.mirai-audit-toolbar button,
.mirai-audit-footer button,
.mirai-audit-details-button {
    padding: 9px 12px;
    border-radius: 7px;
}

.mirai-audit-table-wrap {
    overflow-x: auto;
    border: 1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.mirai-audit-table {
    width: 100%;
    border-collapse: collapse;
}

.mirai-audit-table th,
.mirai-audit-table td {
    padding: 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid
        rgba(255, 255, 255, 0.07);
}

.mirai-audit-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.mirai-audit-table td small {
    display: block;
    margin-top: 4px;
    opacity: 0.6;
}

.mirai-audit-jira a {
    font-weight: 600;
}

.mirai-audit-config {
    white-space: nowrap;
    font-family: monospace;
    font-size: 12px;
}

.mirai-audit-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.mirai-audit-status-success {
    background: rgba(40, 180, 100, 0.16);
}

.mirai-audit-status-failed {
    background: rgba(220, 70, 70, 0.18);
}

.mirai-audit-status-rolled-back {
    background: rgba(220, 150, 40, 0.18);
}

.mirai-audit-status-requested {
    background: rgba(70, 130, 220, 0.18);
}

.mirai-audit-detail-row td {
    background:
        rgba(255, 255, 255, 0.018);
}

.mirai-audit-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(140px, 1fr));
    gap: 12px;
    padding: 8px;
}

.mirai-audit-detail-grid span,
.mirai-audit-detail-text span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    opacity: 0.6;
}

.mirai-audit-detail-grid strong {
    word-break: break-word;
}

.mirai-audit-detail-text {
    margin: 10px 8px;
}

.mirai-audit-detail-text pre {
    margin: 0;
    padding: 10px;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 7px;
    background:
        rgba(255, 255, 255, 0.025);
    font-family: inherit;
}

.mirai-audit-detail-text.error pre {
    background: rgba(220, 70, 70, 0.08);
}

.mirai-audit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}

.mirai-audit-empty {
    padding: 30px !important;
    text-align: center !important;
    opacity: 0.65;
}

@media (max-width: 1100px) {
    .mirai-audit-summary {
        grid-template-columns:
            repeat(2, minmax(140px, 1fr));
    }

    .mirai-audit-detail-grid {
        grid-template-columns:
            repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 700px) {
    .mirai-audit-toolbar {
        flex-direction: column;
    }

    .mirai-audit-summary,
    .mirai-audit-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------------------------------
   MIRAI AI - Consumer tuning preview
   --------------------------------------------------------- */

.mirai-tuning-card {
    width: min(720px, 100%);
    box-sizing: border-box;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
}

.mirai-tuning-header {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px;
}

.mirai-tuning-identity {
    margin-bottom: 16px;
}

.mirai-tuning-consumer {
    font-weight: 650;
    overflow-wrap: anywhere;
}

.mirai-tuning-location,
.mirai-tuning-expiry,
.mirai-tuning-plan-ref {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.72;
}

.mirai-tuning-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.mirai-tuning-state {
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
}

.mirai-tuning-state.requested {
    border-width: 2px;
}

.mirai-tuning-state-label {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 7px;
}

.mirai-tuning-state-value {
    font-size: 13px;
    line-height: 1.55;
}

.mirai-tuning-warning {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    font-weight: 650;
}

.mirai-tuning-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.mirai-tuning-actions button {
    padding: 9px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.mirai-tuning-confirm:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.mirai-tuning-plan-ref {
    margin-top: 12px;
    overflow-wrap: anywhere;
}

.mirai-tuning-card.cancelled {
    opacity: 0.72;
}

@media (max-width: 720px) {
    .mirai-tuning-grid {
        grid-template-columns: 1fr;
    }
}


/* MIRAI Voice v1 */

.mirai-voice-button {
    min-width: 42px;
    height: 42px;
    margin-right: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.mirai-voice-button:hover:not(:disabled) {
    background: rgba(255,255,255,.10);
}

.mirai-voice-button.listening {
    transform: scale(1.06);
}

.mirai-voice-button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* =========================================================
   MIRAI Voice v1
   ========================================================= */

.mirai-voice-button {
    min-width: 42px;
    height: 42px;
    margin-right: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.mirai-voice-button:hover:not(:disabled) {
    background: rgba(255,255,255,.10);
}

.mirai-voice-button.listening {
    transform: scale(1.06);
}

.mirai-voice-button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* =========================================================
   MIRA voice assistant
   ========================================================= */

.mira-toggle {
    min-width: 82px;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.75);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.mira-toggle.active {
    border-color: rgba(34, 197, 94, 0.65);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12);
}

.mira-toggle:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* =========================================================
   MIRA — GLOBAL VOICE ASSISTANT
   ========================================================= */

#mira-toggle.mira-toggle {
    position: fixed !important;
    top: 18px !important;
    right: 24px !important;
    z-index: 10000 !important;

    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 142px;
    height: 46px;
    padding: 0 16px;

    border-radius: 999px;

    border:
        1px solid rgba(148, 163, 184, 0.28);

    background:
        linear-gradient(
            135deg,
            rgba(15, 23, 42, 0.96),
            rgba(30, 41, 59, 0.94)
        );

    color: #e2e8f0;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.30);

    backdrop-filter: blur(16px);

    cursor: pointer;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


#mira-toggle:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.38);
}


#mira-toggle .mira-orb {
    position: relative;

    width: 14px;
    height: 14px;

    flex: 0 0 14px;

    border-radius: 50%;

    background: #64748b;

    box-shadow:
        0 0 0 4px rgba(100, 116, 139, 0.12);

    transition:
        background 180ms ease,
        box-shadow 180ms ease;
}


#mira-toggle .mira-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
}


#mira-toggle .mira-state {
    margin-left: auto;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;

    opacity: 0.72;
}


/* ON / waiting */

#mira-toggle.active {
    border-color:
        rgba(34, 197, 94, 0.45);
}


#mira-toggle.active .mira-orb {
    background: #22c55e;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.12),
        0 0 18px rgba(34, 197, 94, 0.55);

    animation:
        miraOrbPulse 1.8s ease-in-out infinite;
}


/* Actively hearing command */

#mira-toggle.listening .mira-orb {
    animation:
        miraListening 0.75s ease-in-out infinite;
}


/* MIRAI request running */

#mira-toggle.thinking .mira-orb {
    animation:
        miraThinking 0.9s linear infinite;
}


/* MIRA speaking */

#mira-toggle.speaking .mira-orb {
    animation:
        miraSpeaking 0.55s ease-in-out infinite alternate;
}


@keyframes miraOrbPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}


@keyframes miraListening {
    0%,
    100% {
        transform: scale(0.90);
    }

    50% {
        transform: scale(1.35);
    }
}


@keyframes miraThinking {
    from {
        transform: rotate(0deg) scale(0.90);
    }

    50% {
        transform: rotate(180deg) scale(1.25);
    }

    to {
        transform: rotate(360deg) scale(0.90);
    }
}


@keyframes miraSpeaking {
    from {
        transform: scaleX(0.75) scaleY(1.25);
    }

    to {
        transform: scaleX(1.30) scaleY(0.80);
    }
}


@media (max-width: 760px) {
    #mira-toggle.mira-toggle {
        top: 12px !important;
        right: 12px !important;

        min-width: 120px;
        height: 42px;

        padding: 0 13px;
    }
}


/* =========================================================
   MIRA GLOBAL POSITION OVERRIDE
   Keep clear of the top-right user/profile control.
   ========================================================= */

#mira-toggle.mira-toggle {
    top: auto !important;
    right: 28px !important;
    bottom: 28px !important;
    left: auto !important;

    z-index: 10000 !important;

    min-width: 150px;

    box-shadow:
        0 16px 45px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(139, 92, 246, 0.08);
}


/*
 * Give MIRA a subtle assistant-style glow while enabled.
 */

#mira-toggle.mira-toggle.active {
    box-shadow:
        0 16px 45px rgba(0, 0, 0, 0.42),
        0 0 28px rgba(34, 197, 94, 0.13);
}


/*
 * On smaller displays keep it away from screen edges.
 */

@media (max-width: 760px) {
    #mira-toggle.mira-toggle {
        top: auto !important;
        right: 16px !important;
        bottom: 16px !important;
        left: auto !important;
    }
}


/* =========================================================
   MIRA GLASS RESPONSE PANEL
   ========================================================= */

#mira-response-panel {
    position: fixed;

    right: 28px;
    bottom: 88px;

    z-index: 9999;

    width: min(390px, calc(100vw - 40px));
    max-height: min(480px, calc(100vh - 150px));

    display: flex;
    flex-direction: column;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(12px)
        scale(0.97);

    border:
        1px solid rgba(148, 163, 184, 0.20);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, 0.82),
            rgba(17, 24, 39, 0.70)
        );

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    backdrop-filter:
        blur(22px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(145%);

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 180ms ease;
}


#mira-response-panel.visible {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


.mira-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 52px;

    padding: 0 16px;

    border-bottom:
        1px solid rgba(148, 163, 184, 0.12);
}


.mira-panel-brand {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
}


.mira-panel-orb {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 14px rgba(34, 197, 94, 0.65);
}


.mira-panel-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}


.mira-panel-actions button {
    width: 28px;
    height: 28px;

    padding: 0;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: rgba(226, 232, 240, 0.68);

    font-size: 18px;

    cursor: pointer;
}


.mira-panel-actions button:hover {
    background:
        rgba(148, 163, 184, 0.10);

    color: #f8fafc;
}


.mira-panel-body {
    overflow-y: auto;

    padding: 15px 16px 16px;
}


.mira-panel-section + .mira-panel-section {
    margin-top: 16px;
}


.mira-panel-caption {
    margin-bottom: 6px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.14em;

    color: rgba(148, 163, 184, 0.70);
}


.mira-panel-question {
    font-size: 13px;
    line-height: 1.5;

    color: rgba(203, 213, 225, 0.86);
}


.mira-panel-answer {
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    font-size: 13px;
    line-height: 1.58;

    color: #f1f5f9;
}


.mira-panel-footer {
    display: flex;
    align-items: center;
    gap: 7px;

    min-height: 38px;

    padding: 0 16px;

    border-top:
        1px solid rgba(148, 163, 184, 0.10);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;

    color: rgba(148, 163, 184, 0.72);
}


.mira-panel-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 9px rgba(34, 197, 94, 0.55);
}


/*
 * Collapse keeps a tiny glass strip visible.
 */

#mira-response-panel.collapsed
.mira-panel-body {
    display: none;
}


#mira-response-panel.collapsed
.mira-panel-footer {
    display: none;
}


@media (max-width: 760px) {
    #mira-response-panel {
        right: 16px;
        bottom: 72px;

        width:
            calc(100vw - 32px);

        max-height:
            calc(100vh - 130px);
    }
}


/* =========================================================
   MIRA ULTRA-GLASS OVERRIDE
   ========================================================= */

#mira-response-panel {
    background:
        linear-gradient(
            145deg,
            rgba(10, 18, 32, 0.34),
            rgba(15, 23, 42, 0.20)
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.13) !important;

    box-shadow:
        0 14px 45px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;

    backdrop-filter:
        blur(8px)
        saturate(125%) !important;

    -webkit-backdrop-filter:
        blur(8px)
        saturate(125%) !important;
}


#mira-response-panel .mira-panel-header,
#mira-response-panel .mira-panel-footer {
    background:
        rgba(15, 23, 42, 0.12) !important;
}


#mira-response-panel .mira-panel-body {
    background: transparent !important;
}


#mira-response-panel .mira-panel-answer {
    color:
        rgba(248, 250, 252, 0.96) !important;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.65);
}


#mira-response-panel .mira-panel-question {
    color:
        rgba(226, 232, 240, 0.88) !important;
}

/* =========================================================
   MIRAI GLOBAL COMMAND HEADER v1
   User left / operational state center / MIRA top-right
   ========================================================= */

/*
 * Existing authenticated identity remains unchanged.
 * We only reposition it visually.
 */

.topbar {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 64px;
    padding-left: 18px;
    padding-right: 22px;
}

/* User identity -> left side of topbar */

.topbar > #mirai-current-user {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 80;
}

/* Keep connection state centered */

.topbar > .topbar-center {
    margin-left: auto;
    margin-right: auto;
}

/*
 * User dropdown must still open beneath the relocated
 * identity control.
 */

#mirai-current-user .mirai-user-dropdown {
    left: 0;
    right: auto;
}


/* =========================================================
   MIRA GLOBAL CONTROL
   ========================================================= */

#mira-global-control {
    position: fixed !important;

    top: 14px !important;
    right: 24px !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 10020 !important;

    margin: 0 !important;
}


/*
 * Modern compact floating MIRA capsule.
 */

#mira-global-control .mira-toggle,
#mira-global-control #mira-toggle {
    position: relative;

    min-width: 126px;
    height: 42px;

    padding:
        0
        17px
        0
        42px;

    border:
        1px solid
        rgba(148, 163, 184, 0.22);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(17, 24, 39, 0.58),
            rgba(15, 23, 42, 0.28)
        );

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255,255,255,.07);

    backdrop-filter:
        blur(14px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(145%);

    color:
        rgba(226, 232, 240, 0.92);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;

    cursor: pointer;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease,
        background 180ms ease;
}


/*
 * MIRA orb.
 */

#mira-global-control .mira-toggle::before,
#mira-global-control #mira-toggle::before {
    content: "";

    position: absolute;

    left: 14px;
    top: 50%;

    width: 17px;
    height: 17px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #94a3b8,
            #475569 58%,
            #1e293b 100%
        );

    box-shadow:
        0 0 0 5px rgba(100,116,139,.08);

    transition:
        background 180ms ease,
        box-shadow 180ms ease;
}


#mira-global-control .mira-toggle.active::before,
#mira-global-control #mira-toggle.active::before {
    background:
        radial-gradient(
            circle at 35% 30%,
            #86efac,
            #22c55e 50%,
            #059669 100%
        );

    box-shadow:
        0 0 0 5px rgba(34,197,94,.10),
        0 0 22px rgba(34,197,94,.48);
}


#mira-global-control .mira-toggle.active,
#mira-global-control #mira-toggle.active {
    border-color:
        rgba(34,197,94,.40);

    background:
        linear-gradient(
            135deg,
            rgba(6,78,59,.30),
            rgba(15,23,42,.24)
        );

    box-shadow:
        0 8px 30px rgba(0,0,0,.18),
        0 0 24px rgba(34,197,94,.07),
        inset 0 1px 0 rgba(255,255,255,.08);
}


#mira-global-control .mira-toggle:hover,
#mira-global-control #mira-toggle:hover {
    transform:
        translateY(-1px);
}


/* =========================================================
   MIRA FLOATING RESPONSE GLASS
   ========================================================= */

#mira-response-panel {
    position: fixed !important;

    top: 66px !important;
    right: 24px !important;

    bottom: auto !important;
    left: auto !important;

    width:
        min(390px, calc(100vw - 48px)) !important;

    max-height:
        min(440px, calc(100vh - 100px)) !important;

    z-index: 10010 !important;

    overflow: hidden;

    /*
     * Deliberately VERY transparent.
     * Dashboard remains visible behind MIRA.
     */

    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, 0.18),
            rgba(2, 6, 23, 0.08)
        ) !important;

    border:
        1px solid
        rgba(203, 213, 225, 0.18) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.13),
        inset 0 1px 0 rgba(255,255,255,.08)
        !important;

    backdrop-filter:
        blur(7px)
        saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(7px)
        saturate(115%) !important;
}


/*
 * No opaque header/footer layers.
 */

#mira-response-panel
.mira-panel-header,

#mira-response-panel
.mira-panel-footer,

#mira-response-panel
.mira-panel-body {
    background:
        transparent !important;
}


/*
 * Slight separation without dark blocks.
 */

#mira-response-panel
.mira-panel-header {
    min-height: 46px;

    border-bottom:
        1px solid
        rgba(203,213,225,.10);
}


#mira-response-panel
.mira-panel-footer {
    border-top:
        1px solid
        rgba(203,213,225,.09);
}


/*
 * Text needs contrast even though glass is transparent.
 */

#mira-response-panel
.mira-panel-answer {
    color:
        rgba(248,250,252,.97) !important;

    text-shadow:
        0 1px 4px
        rgba(0,0,0,.72);
}


#mira-response-panel
.mira-panel-question {
    color:
        rgba(226,232,240,.90) !important;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.62);
}


#mira-response-panel
.mira-panel-caption {
    color:
        rgba(203,213,225,.72);
}


/*
 * MIRA orb remains visible through glass.
 */

#mira-response-panel
.mira-panel-orb {
    background:
        #22c55e;

    box-shadow:
        0 0 15px
        rgba(34,197,94,.68);
}


/*
 * Collapsed MIRA response becomes a tiny glass header.
 */

#mira-response-panel.collapsed {
    width:
        190px !important;

    max-height:
        48px !important;
}


/* =========================================================
   RESPONSIVE HEADER
   ========================================================= */

@media (max-width: 1000px) {

    .topbar > #mirai-current-user {
        left: 12px;
    }

    .mirai-topbar-user-text {
        display: none;
    }

    #mira-global-control {
        right: 12px !important;
    }

    #mira-response-panel {
        right: 12px !important;

        width:
            min(
                360px,
                calc(100vw - 24px)
            ) !important;
    }
}



/* =========================================================
   MIRA POSITION FIX
   #mira-toggle is directly under document.body.
   ========================================================= */

body > #mira-toggle {
    position: fixed !important;

    top: 17px !important;
    right: 22px !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 10020 !important;

    margin: 0 !important;
}


/*
 * MIRA response floats immediately beneath the control.
 */

body > #mira-response-panel {
    position: fixed !important;

    top: 68px !important;
    right: 22px !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 10010 !important;

    width: min(
        390px,
        calc(100vw - 44px)
    ) !important;

    /*
     * Much clearer glass.
     */

    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, 0.12),
            rgba(2, 6, 23, 0.045)
        ) !important;

    border:
        1px solid
        rgba(226, 232, 240, 0.16)
        !important;

    box-shadow:
        0 14px 45px
        rgba(0, 0, 0, 0.10),
        inset 0 1px 0
        rgba(255, 255, 255, 0.08)
        !important;

    backdrop-filter:
        blur(5px)
        saturate(110%)
        !important;

    -webkit-backdrop-filter:
        blur(5px)
        saturate(110%)
        !important;
}


/* =========================================================
   SIDEBAR USER IDENTITY
   ========================================================= */

#mirai-current-user.mirai-sidebar-user {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    display: block;

    width: calc(100% - 28px);

    margin:
        4px 14px
        18px !important;

    z-index: 100;
}


#mirai-current-user.mirai-sidebar-user
.mirai-user-menu-button {
    width: 100%;

    min-height: 48px;

    justify-content: flex-start;

    padding:
        7px 10px;

    border:
        1px solid
        rgba(148, 163, 184, 0.12);

    border-radius: 12px;

    background:
        rgba(15, 23, 42, 0.18);

    box-shadow: none;
}


#mirai-current-user.mirai-sidebar-user
.mirai-current-user-avatar {
    flex: 0 0 auto;
}


#mirai-current-user.mirai-sidebar-user
.mirai-topbar-user-text {
    min-width: 0;
    flex: 1;

    text-align: left;
}


#mirai-current-user.mirai-sidebar-user
#mirai-current-user-name {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


#mirai-current-user.mirai-sidebar-user
.mirai-user-dropdown {
    position: absolute;

    top: calc(100% + 6px);
    left: 0 !important;
    right: auto !important;

    width: 100%;
    min-width: 220px;

    z-index: 10100;
}


/* =========================================================
   MIRAI USER BRAND HEADER
   ========================================================= */

.sidebar .brand {
    display: block !important;

    padding:
        20px 16px
        18px !important;

    margin: 0 !important;
}


/*
 * Existing authenticated user becomes the brand header.
 */

.sidebar .brand
#mirai-current-user.mirai-brand-user {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    width: 100% !important;

    margin: 0 !important;

    display: block !important;
}


/*
 * Remove card appearance.
 */

.sidebar .brand
#mirai-current-user
.mirai-user-menu-button {
    position: relative;

    width: 100% !important;
    min-height: 54px !important;

    display: flex !important;
    align-items: flex-end !important;

    padding:
        21px 24px
        3px 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    text-align: left;
}


/*
 * MIRAI label above username.
 */

.sidebar .brand
#mirai-current-user
.mirai-user-menu-button::before {
    content: "MIRAI";

    position: absolute;

    top: 0;
    left: 0;

    font-size: 16px;
    line-height: 18px;

    font-weight: 800;

    letter-spacing:
        0.08em;

    color: #f8fafc;
}


/*
 * Hide purple V avatar.
 */

.sidebar .brand
#mirai-current-user
.mirai-current-user-avatar {
    display: none !important;
}


/*
 * Username.
 */

.sidebar .brand
#mirai-current-user
.mirai-topbar-user-text {
    display: block !important;

    width: 100%;

    min-width: 0;

    text-align: left !important;
}


.sidebar .brand
#mirai-current-user
#mirai-current-user-name {
    display: block !important;

    max-width:
        calc(100% - 22px);

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
    line-height: 18px;

    font-weight: 600;

    color:
        rgba(203, 213, 225, 0.88);
}


/*
 * User requested no VIEWER tag.
 * Keep the element in DOM for application state.
 */

.sidebar .brand
#mirai-current-user
#mirai-current-user-role {
    display: none !important;
}


/*
 * Keep dropdown chevron on right.
 */

.sidebar .brand
#mirai-current-user
.mirai-user-chevron {
    position: absolute;

    right: 0;
    bottom: 5px;

    opacity: 0.60;
}


/*
 * Dropdown opens below the identity header.
 */

.sidebar .brand
#mirai-current-user
.mirai-user-dropdown {
    position: absolute !important;

    top:
        calc(100% + 8px) !important;

    left: 0 !important;
    right: auto !important;

    width: 220px;

    z-index: 10100;
}


/* =========================================================
   MIRAI BRAND + LIQUID USER IDENTITY
   ========================================================= */

/*
 * Brand is its own visual identity.
 */

.sidebar .brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    padding:
        22px 20px
        13px !important;

    margin: 0 !important;
}


/* Small distinctive MIRAI mark */

.mirai-brand-symbol {
    position: relative;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #7c5cff,
            #6545ee
        );

    box-shadow:
        0 8px 24px
        rgba(103, 72, 238, .20),
        inset 0 1px 0
        rgba(255,255,255,.22);
}


.mirai-brand-symbol::after {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.13),
            transparent 50%
        );

    pointer-events: none;
}


.mirai-brand-core {
    position: relative;
    z-index: 1;

    color: #fff;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: -.02em;
}


.mirai-brand-copy {
    min-width: 0;
}


.mirai-brand-title {
    color: #f8fafc;

    font-size: 17px;
    line-height: 20px;

    font-weight: 800;

    letter-spacing: .055em;
}


.mirai-brand-subtitle {
    margin-top: 3px;

    color:
        rgba(148,163,184,.68);

    font-size: 8px;
    line-height: 10px;

    font-weight: 700;

    letter-spacing: .18em;
}


/* ---------------------------------------------------------
   User identity is separate from branding.
   --------------------------------------------------------- */

.sidebar
#mirai-current-user.mirai-liquid-user {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    display: block !important;

    width:
        calc(100% - 32px) !important;

    margin:
        0 16px 18px !important;

    z-index: 500;
}


/*
 * Seamless identity row — deliberately NOT a card.
 */

.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-menu-button {
    position: relative;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 34px !important;

    padding:
        5px 4px !important;

    border:
        1px solid transparent !important;

    border-radius:
        10px !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    cursor: pointer;

    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}


.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-menu-button:hover {
    background:
        rgba(148,163,184,.055)
        !important;

    border-color:
        rgba(148,163,184,.08)
        !important;
}


/*
 * No avatar.
 */

.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-current-user-avatar {
    display: none !important;
}


/*
 * Username only.
 */

.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-topbar-user-text {
    display: block !important;

    flex: 1;

    min-width: 0;

    text-align: left !important;
}


.sidebar
#mirai-current-user.mirai-liquid-user
#mirai-current-user-name {
    display: block !important;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        rgba(226,232,240,.88);

    font-size: 12px;
    line-height: 18px;

    font-weight: 600;
}


/* No VIEWER tag */

.sidebar
#mirai-current-user.mirai-liquid-user
#mirai-current-user-role {
    display: none !important;
}


/*
 * Chevron floats quietly on right.
 */

.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-chevron {
    margin-left: auto;

    color:
        rgba(148,163,184,.60);

    transition:
        transform 180ms ease,
        color 180ms ease;
}


.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-menu-button:hover
.mirai-user-chevron {
    color:
        rgba(226,232,240,.85);
}


/* =========================================================
   LIQUID GLASS USER DROPDOWN
   ========================================================= */

.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-dropdown {
    position: absolute !important;

    top:
        calc(100% + 8px) !important;

    left: -4px !important;
    right: auto !important;

    width:
        calc(100% + 8px) !important;

    min-width:
        220px !important;

    padding:
        7px !important;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.13)
        !important;

    border-radius:
        16px !important;

    background:
        linear-gradient(
            145deg,
            rgba(30,41,59,.48),
            rgba(15,23,42,.24)
        ) !important;

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.26),
        inset 0 1px 0
        rgba(255,255,255,.10)
        !important;

    backdrop-filter:
        blur(20px)
        saturate(150%)
        !important;

    -webkit-backdrop-filter:
        blur(20px)
        saturate(150%)
        !important;

    z-index:
        11000 !important;
}


/*
 * Soft light travelling across the glass.
 */

.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-dropdown::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -70px;
    left: -30px;

    border-radius: 50%;

    background:
        rgba(124,92,255,.11);

    filter:
        blur(28px);

    pointer-events: none;
}


/*
 * Dropdown controls remain individually subtle.
 */

.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-dropdown button,

.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-dropdown a {
    position: relative;
    z-index: 1;

    border-radius:
        10px !important;

    transition:
        background 150ms ease,
        transform 150ms ease;
}


.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-dropdown button:hover,

.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-dropdown a:hover {
    background:
        rgba(255,255,255,.065)
        !important;
}


/* Disable previous experimental brand injection */

.sidebar .brand
#mirai-current-user
.mirai-user-menu-button::before {
    content: none !important;
}


/* =========================================================
   MIRAI SHELL FINAL OVERRIDES
   ========================================================= */


/* ---------------------------------------------------------
   1. COMPACT BRAND
   --------------------------------------------------------- */

.sidebar .brand {
    height: 68px !important;
    min-height: 68px !important;

    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    padding:
        12px 16px !important;

    margin: 0 !important;
}


.sidebar .brand .mirai-brand-symbol {
    width: 34px !important;
    height: 34px !important;

    flex:
        0 0 34px !important;

    border-radius:
        10px !important;
}


.sidebar .brand .mirai-brand-core {
    font-size:
        14px !important;
}


.sidebar .brand .mirai-brand-title {
    font-size:
        15px !important;

    line-height:
        17px !important;
}


.sidebar .brand .mirai-brand-subtitle {
    margin-top:
        2px !important;

    font-size:
        7px !important;

    line-height:
        9px !important;

    letter-spacing:
        .14em !important;
}


/* ---------------------------------------------------------
   2. COMPACT USER ROW
   --------------------------------------------------------- */

.sidebar
#mirai-current-user.mirai-liquid-user {
    position: relative !important;

    width:
        calc(100% - 28px) !important;

    margin:
        2px 14px
        10px !important;

    z-index:
        12000 !important;
}


.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-menu-button {
    min-height:
        36px !important;

    padding:
        6px 9px !important;

    border:
        1px solid
        rgba(148,163,184,.10)
        !important;

    border-radius:
        10px !important;

    background:
        rgba(15,23,42,.14)
        !important;
}


.sidebar
#mirai-current-user.mirai-liquid-user
#mirai-current-user-name {
    font-size:
        11px !important;

    line-height:
        16px !important;

    font-weight:
        600 !important;
}


/* ---------------------------------------------------------
   3. USER DROPDOWN MUST FLOAT.
   Never consume sidebar/nav space.
   --------------------------------------------------------- */

.sidebar
#mirai-current-user.mirai-liquid-user
.mirai-user-dropdown {
    position:
        absolute !important;

    top:
        calc(100% + 6px) !important;

    left:
        0 !important;

    right:
        auto !important;

    bottom:
        auto !important;

    width:
        230px !important;

    min-width:
        230px !important;

    max-width:
        230px !important;

    margin:
        0 !important;

    z-index:
        50000 !important;

    /*
     * Liquid glass, but readable.
     */

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.76),
            rgba(30,41,59,.54)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.14)
        !important;

    border-radius:
        15px !important;

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.32),
        inset 0 1px 0
        rgba(255,255,255,.08)
        !important;

    backdrop-filter:
        blur(22px)
        saturate(150%)
        !important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(150%)
        !important;
}


/*
 * Most important part:
 * sidebar must allow the floating menu to escape.
 */

.sidebar {
    overflow-x:
        visible !important;
}


/*
 * Don't allow dropdown to affect navigation positioning.
 */

.sidebar .navigation,
.sidebar .sidebar-label {
    position:
        relative;

    z-index:
        1;
}


/* ---------------------------------------------------------
   4. FORCE MIRA TOP-RIGHT
   Actual element is body > #mira-toggle.
   --------------------------------------------------------- */

html body #mira-toggle.mira-toggle {
    position:
        fixed !important;

    top:
        18px !important;

    right:
        24px !important;

    bottom:
        auto !important;

    left:
        auto !important;

    margin:
        0 !important;

    transform:
        none !important;

    z-index:
        60000 !important;
}


/*
 * Preserve tiny hover movement without changing location.
 */

html body #mira-toggle.mira-toggle:hover {
    transform:
        translateY(-1px)
        !important;
}


/* ---------------------------------------------------------
   5. RESPONSE GLASS DIRECTLY BELOW MIRA
   --------------------------------------------------------- */

html body #mira-response-panel {
    position:
        fixed !important;

    top:
        70px !important;

    right:
        24px !important;

    bottom:
        auto !important;

    left:
        auto !important;

    margin:
        0 !important;

    z-index:
        59990 !important;

    width:
        min(
            370px,
            calc(100vw - 48px)
        ) !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    html body #mira-toggle.mira-toggle {
        top:
            12px !important;

        right:
            12px !important;
    }

    html body #mira-response-panel {
        top:
            62px !important;

        right:
            12px !important;

        width:
            calc(100vw - 24px)
            !important;
    }
}

/* ==========================================================
   MIRA VOICE ASSISTANT — ANIMATED STATE ORB
   OFF / WAITING / LISTENING / THINKING / SPEAKING
   ========================================================== */

#mira-toggle.mira-toggle {
    position: fixed !important;
    top: 18px !important;
    right: 82px !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 12000 !important;

    min-width: 112px;
    height: 42px;
    padding: 0 13px 0 9px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;

    border-radius: 999px;

    border: 1px solid rgba(148, 163, 184, .18);

    background:
        linear-gradient(
            135deg,
            rgba(15, 23, 42, .50),
            rgba(30, 41, 59, .22)
        );

    -webkit-backdrop-filter:
        blur(18px) saturate(150%);
    backdrop-filter:
        blur(18px) saturate(150%);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .08);

    color: #e5e7eb;

    cursor: pointer;

    overflow: visible;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

#mira-toggle:hover {
    transform: translateY(-1px) scale(1.02);
}


/* ----------------------------------------------------------
   ORB
   ---------------------------------------------------------- */

#mira-toggle .mira-orb {
    position: relative;

    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.95) 0 5%,
            rgba(125,211,252,.95) 12%,
            rgba(59,130,246,.90) 38%,
            rgba(99,102,241,.78) 63%,
            rgba(15,23,42,.95) 100%
        );

    box-shadow:
        0 0 0 1px rgba(125,211,252,.20),
        0 0 9px rgba(59,130,246,.45),
        inset 0 0 7px rgba(255,255,255,.20);

    transition:
        opacity .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


/* outer energy ring */

#mira-toggle .mira-orb::before {
    content: "";

    position: absolute;
    inset: -5px;

    border-radius: inherit;

    border: 1px solid rgba(96,165,250,.32);

    opacity: 0;

    pointer-events: none;
}


/* inner state indicator */

#mira-toggle .mira-orb::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    background: rgba(255,255,255,.95);

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 5px rgba(255,255,255,.8);

    opacity: .35;
}


/* ----------------------------------------------------------
   TEXT
   ---------------------------------------------------------- */

#mira-toggle .mira-label {
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .10em;
}

#mira-toggle .mira-state {
    min-width: 44px;

    font-size: 9px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: .08em;

    opacity: .58;

    text-align: left;
}


/* ==========================================================
   OFF
   ========================================================== */

#mira-toggle[data-state="off"] .mira-orb {
    filter: grayscale(.75);
    opacity: .45;

    box-shadow:
        0 0 0 1px rgba(148,163,184,.16);
}

#mira-toggle[data-state="off"] .mira-state {
    opacity: .40;
}


/* ==========================================================
   WAITING — slow breathing AI heartbeat
   ========================================================== */

#mira-toggle[data-state="waiting"] .mira-orb {
    animation:
        miraBreath 2.4s ease-in-out infinite;
}

#mira-toggle[data-state="waiting"] .mira-orb::before {
    opacity: .45;

    animation:
        miraWaitingRing 2.4s ease-out infinite;
}

#mira-toggle[data-state="waiting"] .mira-state {
    opacity: .78;
}


/* ==========================================================
   LISTENING — radar / microphone energy
   ========================================================== */

#mira-toggle.listening .mira-orb {
    animation:
        miraListenPulse .72s ease-in-out infinite alternate;

    box-shadow:
        0 0 8px rgba(34,211,238,.75),
        0 0 18px rgba(59,130,246,.55),
        inset 0 0 8px rgba(255,255,255,.28);
}

#mira-toggle.listening .mira-orb::before {
    opacity: 1;

    animation:
        miraRadar 1.05s ease-out infinite;
}

#mira-toggle.listening .mira-orb::after {
    animation:
        miraCorePulse .55s ease-in-out infinite alternate;
}

#mira-toggle.listening .mira-state {
    opacity: 1;
}


/* ==========================================================
   THINKING — rotating neural orbit
   ========================================================== */

#mira-toggle.thinking .mira-orb {
    animation:
        miraThinkingCore 1.2s ease-in-out infinite;
}

#mira-toggle.thinking .mira-orb::before {
    opacity: 1;

    border-top-color: rgba(255,255,255,.95);
    border-right-color: rgba(167,139,250,.85);
    border-bottom-color: rgba(59,130,246,.18);
    border-left-color: rgba(59,130,246,.18);

    animation:
        miraOrbit .75s linear infinite;
}

#mira-toggle.thinking .mira-orb::after {
    width: 4px;
    height: 4px;

    animation:
        miraThought .7s ease-in-out infinite alternate;
}

#mira-toggle.thinking .mira-state {
    opacity: 1;
}


/* ==========================================================
   SPEAKING — fast voice energy
   ========================================================== */

#mira-toggle.speaking .mira-orb {
    animation:
        miraSpeak .38s ease-in-out infinite alternate;

    box-shadow:
        0 0 8px rgba(45,212,191,.75),
        0 0 20px rgba(56,189,248,.55),
        0 0 30px rgba(99,102,241,.25);
}

#mira-toggle.speaking .mira-orb::before {
    opacity: .85;

    animation:
        miraVoiceRing .65s ease-out infinite;
}

#mira-toggle.speaking .mira-state {
    opacity: 1;
}


/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes miraBreath {
    0%, 100% {
        transform: scale(.94);
        filter: brightness(.82);
    }

    50% {
        transform: scale(1.08);
        filter: brightness(1.18);
    }
}

@keyframes miraWaitingRing {
    0% {
        transform: scale(.72);
        opacity: .55;
    }

    75%, 100% {
        transform: scale(1.38);
        opacity: 0;
    }
}

@keyframes miraListenPulse {
    from {
        transform: scale(.94);
    }

    to {
        transform: scale(1.12);
    }
}

@keyframes miraRadar {
    0% {
        transform: scale(.65);
        opacity: .85;
    }

    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

@keyframes miraCorePulse {
    from {
        transform:
            translate(-50%, -50%)
            scale(.7);
    }

    to {
        transform:
            translate(-50%, -50%)
            scale(1.5);
    }
}

@keyframes miraOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes miraThinkingCore {
    0%, 100% {
        transform: scale(.96);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes miraThought {
    from {
        opacity: .35;
    }

    to {
        opacity: 1;
    }
}

@keyframes miraSpeak {
    from {
        transform:
            scaleX(.90)
            scaleY(1.10);
    }

    to {
        transform:
            scaleX(1.10)
            scaleY(.90);
    }
}

@keyframes miraVoiceRing {
    0% {
        transform: scale(.75);
        opacity: .8;
    }

    100% {
        transform: scale(1.48);
        opacity: 0;
    }
}


/* ==========================================================
   LIGHT THEME
   ========================================================== */

html[data-mirai-theme="light"]
#mira-toggle.mira-toggle {
    color: #172033;

    border-color:
        rgba(100,116,139,.22);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.62),
            rgba(241,245,249,.38)
        );

    box-shadow:
        0 9px 28px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.90);
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    #mira-toggle .mira-orb,
    #mira-toggle .mira-orb::before,
    #mira-toggle .mira-orb::after {
        animation: none !important;
    }
}



/* ==========================================================
   MIRAI PROFILE GLASS v1
   Canonical sidebar identity presentation
   ========================================================== */

.sidebar #mirai-current-user.mirai-liquid-user,
.sidebar #mirai-current-user.mirai-sidebar-user {
    position: relative !important;

    width: auto !important;
    max-width: none !important;

    margin:
        8px 14px 18px !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;
}


/*
 * Identity becomes a lightweight row rather than a card.
 */

.sidebar #mirai-current-user
.mirai-user-menu-button {
    position: relative !important;

    width: 100% !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    padding:
        5px 7px !important;

    margin:
        0 !important;

    border:
        0 !important;

    border-radius:
        12px !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        inherit !important;

    text-align:
        left !important;

    cursor:
        pointer !important;

    transition:
        background .22s ease,
        transform .22s ease !important;
}


.sidebar #mirai-current-user
.mirai-user-menu-button:hover {
    background:
        rgba(124,92,255,.075)
        !important;

    transform:
        translateX(2px);
}


/*
 * User avatar — subtle orbital identity.
 */

.sidebar #mirai-current-user
.mirai-current-user-avatar {
    position: relative !important;

    width: 31px !important;
    height: 31px !important;

    min-width: 31px !important;

    display: grid !important;
    place-items: center !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            145deg,
            rgba(139,92,246,.96),
            rgba(79,70,229,.78)
        ) !important;

    border:
        1px solid
        rgba(196,181,253,.28)
        !important;

    box-shadow:
        0 5px 18px
        rgba(99,102,241,.20)
        !important;

    color:
        white !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .04em !important;
}


/* little online indicator */

.sidebar #mirai-current-user
.mirai-current-user-avatar::after {
    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    right: -2px;
    bottom: -1px;

    border-radius:
        50%;

    background:
        #34d399;

    border:
        2px solid #080f1e;

    box-shadow:
        0 0 7px
        rgba(52,211,153,.55);
}


/*
 * Username.
 */

.sidebar #mirai-current-user
.mirai-topbar-user-text {
    min-width: 0 !important;

    flex:
        1 !important;

    display:
        block !important;
}


.sidebar #mirai-current-user
#mirai-current-user-name {
    display:
        block !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;

    font-size:
        11px !important;

    line-height:
        16px !important;

    font-weight:
        650 !important;

    letter-spacing:
        -.01em !important;
}


/*
 * Don't show VIEWER beside username.
 */

.sidebar #mirai-current-user
#mirai-current-user-role {
    display:
        none !important;
}


/*
 * Replace old chevron visually with a minimal menu indicator.
 */

.sidebar #mirai-current-user
.mirai-user-chevron {
    width:
        22px !important;

    height:
        22px !important;

    display:
        grid !important;

    place-items:
        center !important;

    font-size:
        0 !important;

    opacity:
        .52 !important;

    border-radius:
        7px !important;
}


.sidebar #mirai-current-user
.mirai-user-chevron::after {
    content:
        "•••";

    font-size:
        9px;

    letter-spacing:
        1px;
}


/* ==========================================================
   DETACHED PROFILE GLASS
   ========================================================== */

.sidebar #mirai-current-user
.mirai-user-dropdown {
    position:
        absolute !important;

    top:
        2px !important;

    left:
        calc(100% + 20px) !important;

    right:
        auto !important;

    bottom:
        auto !important;

    width:
        255px !important;

    min-width:
        255px !important;

    margin:
        0 !important;

    padding:
        14px !important;

    z-index:
        65000 !important;

    border:
        1px solid
        rgba(148,163,184,.17)
        !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,18,34,.80),
            rgba(18,28,48,.66)
        ) !important;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.38),
        inset 0 1px 0
        rgba(255,255,255,.08)
        !important;

    -webkit-backdrop-filter:
        blur(28px)
        saturate(160%) !important;

    backdrop-filter:
        blur(28px)
        saturate(160%) !important;

    transform-origin:
        left top;

    animation:
        miraiProfileAppear
        .20s cubic-bezier(.2,.8,.2,1);
}


.sidebar #mirai-current-user
.mirai-user-dropdown.hidden {
    display:
        none !important;
}


@keyframes miraiProfileAppear {
    from {
        opacity: 0;

        transform:
            translateX(-7px)
            scale(.97);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}


/*
 * Remove old visual separator clutter.
 */

.sidebar #mirai-current-user
.mirai-user-dropdown-header {
    padding:
        2px 2px 12px !important;

    border:
        0 !important;
}


.sidebar #mirai-current-user
.mirai-user-dropdown-header strong {
    display:
        block;

    font-size:
        13px !important;

    font-weight:
        700 !important;
}


.sidebar #mirai-current-user
.mirai-user-dropdown-header span {
    display:
        block;

    margin-top:
        4px;

    font-size:
        10px !important;

    opacity:
        .55 !important;
}


/*
 * Role becomes small metadata, not a huge row.
 */

.sidebar #mirai-current-user
.mirai-user-dropdown-meta {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    padding:
        10px 2px !important;

    margin:
        0 !important;

    border-top:
        1px solid
        rgba(148,163,184,.10)
        !important;

    border-bottom:
        1px solid
        rgba(148,163,184,.10)
        !important;

    font-size:
        10px !important;
}


.sidebar #mirai-current-user
.mirai-user-dropdown-meta strong {
    padding:
        3px 7px !important;

    border-radius:
        999px !important;

    background:
        rgba(124,92,255,.12)
        !important;

    color:
        #c4b5fd !important;

    font-size:
        8px !important;

    letter-spacing:
        .08em !important;
}


/*
 * Logout becomes a normal account action.
 */

.sidebar #mirai-current-user
.mirai-dropdown-logout {
    width:
        100% !important;

    height:
        36px !important;

    margin:
        10px 0 0 !important;

    padding:
        0 10px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    background:
        transparent !important;

    color:
        #fca5a5 !important;

    font-size:
        10px !important;

    font-weight:
        650 !important;

    text-align:
        left !important;

    cursor:
        pointer !important;
}


.sidebar #mirai-current-user
.mirai-dropdown-logout::after {
    content:
        "→";

    font-size:
        14px;

    opacity:
        .65;
}


.sidebar #mirai-current-user
.mirai-dropdown-logout:hover {
    background:
        rgba(248,113,113,.08)
        !important;
}


/* ==========================================================
   LIGHT PROFILE
   ========================================================== */

html[data-mirai-theme="light"]
.sidebar #mirai-current-user
.mirai-current-user-avatar::after {
    border-color:
        #f8fafc;
}


html[data-mirai-theme="light"]
.sidebar #mirai-current-user
.mirai-user-menu-button:hover {
    background:
        rgba(99,102,241,.07)
        !important;
}


html[data-mirai-theme="light"]
.sidebar #mirai-current-user
.mirai-user-dropdown {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(248,250,252,.74)
        ) !important;

    border-color:
        rgba(71,85,105,.13)
        !important;

    color:
        #172033 !important;

    box-shadow:
        0 24px 70px
        rgba(15,23,42,.14),
        inset 0 1px 0
        rgba(255,255,255,.95)
        !important;
}



/* ==========================================================
   MIRAI GLOBAL CONTROLS — FINAL POSITION
   ========================================================== */

html body #mirai-theme-toggle {
    position:
        fixed !important;

    top:
        22px !important;

    right:
        178px !important;

    bottom:
        auto !important;

    left:
        auto !important;

    z-index:
        65010 !important;
}


html body #mira-toggle.mira-toggle {
    position:
        fixed !important;

    top:
        18px !important;

    right:
        24px !important;

    bottom:
        auto !important;

    left:
        auto !important;

    z-index:
        65000 !important;
}



/* ==========================================================
   MIRAI SHELL v2 — AUTHORITATIVE THEME + PROFILE
   ========================================================== */


/* ----------------------------------------------------------
   DETACHED PROFILE
   ---------------------------------------------------------- */

body > #mirai-user-dropdown.mirai-detached-profile {
    position: fixed !important;

    right: auto !important;
    bottom: auto !important;

    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;

    margin: 0 !important;
    padding: 16px !important;

    z-index: 99990 !important;

    border:
        1px solid
        rgba(148,163,184,.18)
        !important;

    border-radius:
        18px !important;

    background:
        rgba(11,19,35,.88)
        !important;

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.46),
        inset 0 1px 0
        rgba(255,255,255,.07)
        !important;

    backdrop-filter:
        blur(26px)
        saturate(160%) !important;

    -webkit-backdrop-filter:
        blur(26px)
        saturate(160%) !important;
}


body > #mirai-user-dropdown.mirai-detached-profile.hidden {
    display: none !important;
}


/* ==========================================================
   THEME CONTROL
   ========================================================== */

html body #mirai-theme-toggle {
    position: fixed !important;

    top: 19px !important;
    right: 181px !important;

    width: 86px !important;
    height: 40px !important;

    min-width: 86px !important;

    display: flex !important;
    align-items: center !important;

    gap: 7px !important;

    padding:
        4px 8px 4px 5px !important;

    margin: 0 !important;

    border:
        1px solid
        rgba(148,163,184,.18)
        !important;

    border-radius:
        999px !important;

    background:
        rgba(15,23,42,.66)
        !important;

    box-shadow:
        0 8px 28px
        rgba(0,0,0,.15),
        inset 0 1px 0
        rgba(255,255,255,.08)
        !important;

    backdrop-filter:
        blur(18px) !important;

    -webkit-backdrop-filter:
        blur(18px) !important;

    overflow: visible !important;

    opacity: 1 !important;

    visibility: visible !important;

    cursor: pointer !important;

    z-index: 99999 !important;
}


#mirai-theme-toggle
.mirai-theme-stage {
    position: relative !important;

    display: block !important;

    width: 38px !important;
    height: 26px !important;

    min-width: 38px !important;

    border-radius:
        999px !important;

    overflow:
        hidden !important;

    background:
        linear-gradient(
            135deg,
            #101a33,
            #29345c
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.09)
        !important;

    transition:
        background .45s ease !important;
}


#mirai-theme-toggle
.mirai-theme-slider {
    position: absolute !important;

    display: block !important;

    width: 18px !important;
    height: 18px !important;

    left: 4px !important;
    top: 4px !important;

    border-radius:
        50% !important;

    background:
        linear-gradient(
            145deg,
            #dbeafe,
            #94a3b8
        ) !important;

    box-shadow:
        0 3px 8px
        rgba(0,0,0,.35)
        !important;

    transform:
        translateX(0) !important;

    transition:
        transform .45s
        cubic-bezier(.2,.85,.2,1),
        background .35s ease,
        box-shadow .35s ease
        !important;

    z-index: 4 !important;
}


#mirai-theme-toggle.is-light
.mirai-theme-stage {
    background:
        linear-gradient(
            135deg,
            #8bd5ff,
            #dbeafe
        ) !important;
}


#mirai-theme-toggle.is-light
.mirai-theme-slider {
    transform:
        translateX(12px) !important;

    background:
        #fbbf24 !important;

    box-shadow:
        0 0 11px
        rgba(251,191,36,.65)
        !important;
}


/* Moon */

#mirai-theme-toggle
.mirai-theme-night {
    position: absolute !important;

    display: block !important;

    width: 8px !important;
    height: 8px !important;

    right: 5px !important;
    top: 5px !important;

    border-radius:
        50% !important;

    background:
        rgba(255,255,255,.72)
        !important;

    opacity:
        .75 !important;

    transition:
        opacity .3s ease !important;
}


/* Sun */

#mirai-theme-toggle
.mirai-theme-day {
    position: absolute !important;

    display: block !important;

    width: 8px !important;
    height: 8px !important;

    left: 5px !important;
    bottom: 5px !important;

    border-radius:
        50% !important;

    background:
        #fbbf24 !important;

    box-shadow:
        0 0 7px
        rgba(251,191,36,.55)
        !important;

    opacity:
        0 !important;

    transition:
        opacity .3s ease !important;
}


#mirai-theme-toggle.is-light
.mirai-theme-night {
    opacity:
        0 !important;
}


#mirai-theme-toggle.is-light
.mirai-theme-day {
    opacity:
        1 !important;
}


#mirai-theme-toggle
.mirai-theme-caption {
    display: block !important;

    width: 31px !important;

    color:
        #94a3b8 !important;

    font-size:
        7px !important;

    line-height:
        1 !important;

    font-weight:
        800 !important;

    letter-spacing:
        .09em !important;

    text-align:
        center !important;
}


/* ==========================================================
   REAL LIGHT MODE
   ========================================================== */

html[data-mirai-theme="light"] {
    color-scheme: light;

    --bg: #f3f6fb;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --border: #dce4ef;
    --text: #172033;
    --muted: #64748b;
}


html[data-mirai-theme="light"],
html[data-mirai-theme="light"] body {
    background:
        #f3f6fb !important;

    color:
        #172033 !important;
}


/*
 * Main structural surfaces.
 */

html[data-mirai-theme="light"] .app,
html[data-mirai-theme="light"] .app-shell,
html[data-mirai-theme="light"] .main,
html[data-mirai-theme="light"] main,
html[data-mirai-theme="light"] .content,
html[data-mirai-theme="light"] .page-panel {
    background:
        #f3f6fb !important;

    color:
        #172033 !important;
}


html[data-mirai-theme="light"] .sidebar {
    background:
        rgba(248,250,252,.97)
        !important;

    border-color:
        #dce4ef !important;

    color:
        #172033 !important;
}


html[data-mirai-theme="light"] .topbar {
    background:
        rgba(255,255,255,.90)
        !important;

    border-color:
        #dce4ef !important;

    color:
        #172033 !important;
}


/*
 * Dashboard cards / panels.
 *
 * These selectors intentionally cover the MIRAI dashboard's
 * custom surface families.
 */

html[data-mirai-theme="light"]
:is(
    .overview-executive-header,
    .overview-consumer-visual,
    .overview-consumer-summary,
    .overview-capacity-card,
    .overview-alert-card,
    .consumer-card,
    .queue-card,
    .record-card,
    .tuning-card,
    .config-card,
    .runbook-card,
    .terminal-card,
    .ai-card,
    .panel,
    .card,
    .modal-content
) {
    background:
        rgba(255,255,255,.92)
        !important;

    border-color:
        #dce4ef !important;

    color:
        #172033 !important;

    box-shadow:
        0 10px 30px
        rgba(15,23,42,.055)
        !important;
}


/*
 * Inputs / selects / textareas.
 */

html[data-mirai-theme="light"]
:is(
    input,
    select,
    textarea
) {
    background:
        #ffffff !important;

    color:
        #172033 !important;

    border-color:
        #cbd5e1 !important;
}


html[data-mirai-theme="light"]
:is(
    input,
    textarea
)::placeholder {
    color:
        #94a3b8 !important;
}


/*
 * Typography.
 */

html[data-mirai-theme="light"]
:is(
    h1,h2,h3,h4,h5,h6,
    .brand-name,
    .overview-executive-header h1,
    .overview-consumer-summary strong
) {
    color:
        #172033 !important;
}


html[data-mirai-theme="light"]
:is(
    p,
    .brand-subtitle,
    .sidebar-label,
    .hero-kicker
) {
    color:
        #64748b;
}


/*
 * Sidebar navigation.
 */

html[data-mirai-theme="light"]
.nav-item {
    color:
        #526177 !important;
}


html[data-mirai-theme="light"]
.nav-item:hover {
    background:
        rgba(99,102,241,.07)
        !important;

    color:
        #172033 !important;
}


html[data-mirai-theme="light"]
.nav-item.active {
    background:
        rgba(99,102,241,.10)
        !important;

    color:
        #4338ca !important;
}


/*
 * Consumer family pills and other dark chips.
 */

html[data-mirai-theme="light"]
:is(
    .consumer-family-pill,
    .consumer-family-chip,
    .badge,
    .chip
) {
    background:
        #f1f5f9 !important;

    border-color:
        #d8e0eb !important;

    color:
        #334155 !important;
}


/*
 * Detached profile light mode.
 */

html[data-mirai-theme="light"]
body > #mirai-user-dropdown.mirai-detached-profile {
    background:
        rgba(255,255,255,.94)
        !important;

    border-color:
        rgba(100,116,139,.18)
        !important;

    color:
        #172033 !important;

    box-shadow:
        0 25px 70px
        rgba(15,23,42,.15),
        inset 0 1px 0
        rgba(255,255,255,.95)
        !important;
}


/*
 * Theme control itself in light mode.
 */

html[data-mirai-theme="light"]
#mirai-theme-toggle {
    background:
        rgba(255,255,255,.88)
        !important;

    border-color:
        rgba(100,116,139,.20)
        !important;

    box-shadow:
        0 8px 25px
        rgba(15,23,42,.10)
        !important;
}


html[data-mirai-theme="light"]
#mirai-theme-toggle
.mirai-theme-caption {
    color:
        #475569 !important;
}


/*
 * MIRA light mode.
 */

html[data-mirai-theme="light"]
#mira-toggle.mira-toggle {
    background:
        rgba(255,255,255,.88)
        !important;

    border-color:
        rgba(100,116,139,.20)
        !important;

    color:
        #172033 !important;

    box-shadow:
        0 8px 25px
        rgba(15,23,42,.10)
        !important;
}


/* Smooth theme transition */

body,
.sidebar,
.topbar,
.content,
.page-panel,
.overview-executive-header,
.overview-consumer-visual,
.panel,
.card {
    transition:
        background-color .34s ease,
        background .34s ease,
        border-color .34s ease,
        color .25s ease,
        box-shadow .34s ease;
}



/* ==========================================================
   MIRAI macOS LIGHT SYSTEM v1
   Authoritative global light-mode normalization.
   Operational semantic colors remain intact.
   ========================================================== */

html[data-mirai-theme="light"] {

    /* Canvas */
    --mirai-l-canvas: #f5f5f7;
    --mirai-l-sidebar: #fbfbfd;
    --mirai-l-topbar: rgba(255,255,255,.82);

    /* Surfaces */
    --mirai-l-surface: #ffffff;
    --mirai-l-surface-2: #f7f7f9;
    --mirai-l-surface-3: #f1f2f5;
    --mirai-l-hover: #f0f1f5;

    /* Borders */
    --mirai-l-border: #dedee3;
    --mirai-l-border-soft: #e8e8ed;
    --mirai-l-divider: rgba(60,60,67,.14);

    /* Typography */
    --mirai-l-text: #1d1d1f;
    --mirai-l-text-2: #424245;
    --mirai-l-muted: #6e6e73;
    --mirai-l-faint: #8e8e93;

    /* Accent */
    --mirai-l-accent: #5e5ce6;
    --mirai-l-accent-soft: rgba(94,92,230,.10);

    color-scheme: light;
}


/* ==========================================================
   ROOT CANVAS
   ========================================================== */

html[data-mirai-theme="light"],
html[data-mirai-theme="light"] body {
    background:
        var(--mirai-l-canvas)
        !important;

    color:
        var(--mirai-l-text)
        !important;
}


html[data-mirai-theme="light"]
:is(
    #app,
    .app,
    .app-shell,
    .dashboard,
    .dashboard-shell,
    main,
    .main,
    .main-content,
    .content,
    .page,
    .page-content,
    .page-panel
) {
    background:
        var(--mirai-l-canvas)
        !important;

    color:
        var(--mirai-l-text)
        !important;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

html[data-mirai-theme="light"]
.sidebar {
    background:
        rgba(251,251,253,.96)
        !important;

    color:
        var(--mirai-l-text)
        !important;

    border-color:
        var(--mirai-l-border)
        !important;
}


html[data-mirai-theme="light"]
.sidebar-label {
    color:
        #667085 !important;
}


html[data-mirai-theme="light"]
.nav-item {
    color:
        #475569 !important;
}


html[data-mirai-theme="light"]
.nav-item:hover {
    background:
        rgba(94,92,230,.065)
        !important;

    color:
        #242426 !important;
}


html[data-mirai-theme="light"]
.nav-item.active {
    background:
        linear-gradient(
            90deg,
            rgba(94,92,230,.11),
            rgba(94,92,230,.055)
        ) !important;

    border-color:
        rgba(94,92,230,.25)
        !important;

    color:
        #4f46e5 !important;
}


/* User row */

html[data-mirai-theme="light"]
.sidebar #mirai-current-user
.mirai-user-menu-button {
    color:
        var(--mirai-l-text)
        !important;
}


html[data-mirai-theme="light"]
.sidebar #mirai-current-user
.mirai-user-menu-button:hover {
    background:
        rgba(94,92,230,.055)
        !important;
}


/* ==========================================================
   TOP BAR
   ========================================================== */

html[data-mirai-theme="light"]
.topbar {
    background:
        rgba(255,255,255,.84)
        !important;

    border-color:
        var(--mirai-l-border)
        !important;

    color:
        var(--mirai-l-text)
        !important;

    backdrop-filter:
        blur(24px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(170%);
}


/* ==========================================================
   GENERAL SURFACES
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    .panel,
    .card,
    .widget,
    .section-card,
    .dashboard-card,
    .content-card,

    .overview-executive-header,
    .overview-consumer-visual,
    .overview-consumer-summary,
    .overview-capacity-card,
    .overview-alert-card,

    .consumer-card,
    .queue-card,
    .record-card,
    .tuning-card,
    .config-card,
    .runbook-card,
    .terminal-card,
    .ai-card,

    .consumer-panel,
    .queue-panel,
    .records-panel,
    .tuning-panel,
    .config-panel,
    .runbook-panel,

    .modal,
    .modal-content
) {
    background:
        var(--mirai-l-surface)
        !important;

    border-color:
        var(--mirai-l-border)
        !important;

    color:
        var(--mirai-l-text)
        !important;

    box-shadow:
        0 1px 2px rgba(0,0,0,.025),
        0 8px 28px rgba(0,0,0,.035)
        !important;
}


/* ==========================================================
   OVERVIEW HERO
   ========================================================== */

html[data-mirai-theme="light"]
.overview-executive-header {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fafaff 55%,
            #eef5ff 100%
        ) !important;

    border-color:
        #dde4ef !important;
}


html[data-mirai-theme="light"]
.overview-executive-header::before,
html[data-mirai-theme="light"]
.overview-executive-header::after {
    opacity:
        .18 !important;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    h1,h2,h3,h4,h5,h6,
    .title,
    .heading,
    .card-title,
    .section-title,
    .overview-title
) {
    color:
        var(--mirai-l-text)
        !important;
}


html[data-mirai-theme="light"]
:is(
    p,
    .subtitle,
    .description,
    .card-subtitle,
    .section-subtitle
) {
    color:
        var(--mirai-l-muted);
}


/* ==========================================================
   TABLES — THIS FIXES CONSUMER TUNING
   ========================================================== */

html[data-mirai-theme="light"]
table {
    background:
        var(--mirai-l-surface)
        !important;

    color:
        var(--mirai-l-text)
        !important;

    border-color:
        var(--mirai-l-border)
        !important;
}


html[data-mirai-theme="light"]
thead,

html[data-mirai-theme="light"]
thead tr,

html[data-mirai-theme="light"]
th {
    background:
        #f0f2f6 !important;

    color:
        #27272a !important;

    border-color:
        #d7dce5 !important;
}


html[data-mirai-theme="light"]
tbody,

html[data-mirai-theme="light"]
tbody tr,

html[data-mirai-theme="light"]
td {
    background:
        #ffffff !important;

    color:
        #27272a !important;

    border-color:
        #e1e5ec !important;
}


html[data-mirai-theme="light"]
tbody tr:nth-child(even) td {
    background:
        #f8f9fb !important;
}


html[data-mirai-theme="light"]
tbody tr:hover td {
    background:
        #f0f3f8 !important;
}


/*
 * Common custom table wrappers.
 */

html[data-mirai-theme="light"]
:is(
    .table-container,
    .table-wrapper,
    .data-table,
    .consumer-table,
    .tuning-table,
    .records-table
) {
    background:
        #ffffff !important;

    border-color:
        var(--mirai-l-border)
        !important;

    color:
        var(--mirai-l-text)
        !important;
}


/* ==========================================================
   FORM CONTROLS
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    input,
    select,
    textarea
) {
    background:
        #ffffff !important;

    color:
        #1d1d1f !important;

    border-color:
        #cfd4dc !important;

    box-shadow:
        inset 0 1px 1px
        rgba(0,0,0,.025)
        !important;
}


html[data-mirai-theme="light"]
:is(
    input,
    textarea
)::placeholder {
    color:
        #8e9aab !important;
}


html[data-mirai-theme="light"]
:is(
    input,
    select,
    textarea
):focus {
    border-color:
        rgba(94,92,230,.55)
        !important;

    box-shadow:
        0 0 0 3px
        rgba(94,92,230,.10)
        !important;

    outline:
        none !important;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

html[data-mirai-theme="light"]
button:not(
    #mira-toggle
):not(
    #mirai-theme-toggle
) {
    border-color:
        #d5d9e0;
}


/* ==========================================================
   CHIPS / BADGES / PILLS
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    .consumer-family-pill,
    .consumer-family-chip,
    .chip,
    .pill
) {
    background:
        #f5f3ff !important;

    border-color:
        #ddd6fe !important;

    color:
        #312e81 !important;
}


/* ==========================================================
   OVERVIEW LOWER CARDS
   YARN + ALERT INTELLIGENCE
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    .overview-capacity-card,
    .overview-alert-card
) {
    background:
        #ffffff !important;

    color:
        var(--mirai-l-text)
        !important;

    border-color:
        var(--mirai-l-border)
        !important;
}


html[data-mirai-theme="light"]
:is(
    .overview-capacity-card,
    .overview-alert-card
)
:is(
    h1,h2,h3,h4,strong
) {
    color:
        #1d1d1f !important;
}


/*
 * Nested rows inside operational cards.
 */

html[data-mirai-theme="light"]
.overview-alert-card
:is(
    .alert-row,
    .alert-category,
    .alert-item
) {
    background:
        #f7f8fa !important;

    border-color:
        #e8e9ed !important;

    color:
        #3a3a3c !important;
}


/* ==========================================================
   TOOLBARS / SUMMARY BARS
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    .toolbar,
    .page-toolbar,
    .consumer-toolbar,
    .queue-toolbar,
    .tuning-toolbar,
    .summary-bar,
    .stats-bar
) {
    background:
        #ffffff !important;

    color:
        var(--mirai-l-text)
        !important;

    border-color:
        var(--mirai-l-border)
        !important;
}


/* ==========================================================
   PROGRESS TRACKS
   Preserve the colored progress VALUE itself.
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    .progress,
    .progress-track,
    .capacity-track,
    .queue-track
) {
    background:
        #e5e7eb !important;
}


/* ==========================================================
   CODE / TERMINAL-LIKE CONTENT
   Terminal itself can remain dark intentionally.
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    code,
    pre
) {
    border-color:
        #d8dce4;
}


/* ==========================================================
   PROFILE POPOVER
   ========================================================== */

html[data-mirai-theme="light"]
body > #mirai-user-dropdown.mirai-detached-profile {
    background:
        rgba(255,255,255,.92)
        !important;

    color:
        #1d1d1f !important;

    border:
        1px solid
        rgba(60,60,67,.16)
        !important;

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.14),
        inset 0 1px 0
        rgba(255,255,255,.9)
        !important;

    backdrop-filter:
        blur(30px)
        saturate(180%) !important;

    -webkit-backdrop-filter:
        blur(30px)
        saturate(180%) !important;
}


html[data-mirai-theme="light"]
body > #mirai-user-dropdown
.mirai-user-dropdown-header strong {
    color:
        #1d1d1f !important;
}


html[data-mirai-theme="light"]
body > #mirai-user-dropdown
.mirai-user-dropdown-header span {
    color:
        #6e6e73 !important;
}


html[data-mirai-theme="light"]
body > #mirai-user-dropdown
.mirai-user-dropdown-meta {
    color:
        #6e6e73 !important;

    border-color:
        rgba(60,60,67,.12)
        !important;
}


/* Logout: subtle destructive action */

html[data-mirai-theme="light"]
body > #mirai-user-dropdown
.mirai-dropdown-logout {
    background:
        transparent !important;

    border:
        0 !important;

    color:
        #ff3b30 !important;
}


html[data-mirai-theme="light"]
body > #mirai-user-dropdown
.mirai-dropdown-logout:hover {
    background:
        rgba(255,59,48,.07)
        !important;
}


/* ==========================================================
   MIRA + THEME GLASS
   ========================================================== */

html[data-mirai-theme="light"]
#mira-toggle.mira-toggle,

html[data-mirai-theme="light"]
#mirai-theme-toggle {
    background:
        rgba(255,255,255,.78)
        !important;

    border-color:
        rgba(60,60,67,.15)
        !important;

    color:
        #1d1d1f !important;

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.075),
        inset 0 1px 0
        rgba(255,255,255,.95)
        !important;

    backdrop-filter:
        blur(24px)
        saturate(180%) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(180%) !important;
}


/* ==========================================================
   LINKS / MUTED TEXT
   ========================================================== */

html[data-mirai-theme="light"]
a {
    color:
        #4f46e5;
}


html[data-mirai-theme="light"]
:is(
    .muted,
    .text-muted,
    .secondary-text,
    small
) {
    color:
        var(--mirai-l-muted)
        !important;
}


/* ==========================================================
   SCROLLBARS
   ========================================================== */

html[data-mirai-theme="light"] * {
    scrollbar-color:
        #c7c7cc
        transparent;
}


html[data-mirai-theme="light"]
*::-webkit-scrollbar-thumb {
    background:
        #c7c7cc !important;

    border-radius:
        999px;
}


/* ==========================================================
   GLOBAL MOTION
   ========================================================== */

html[data-mirai-theme="light"] body,
html[data-mirai-theme="light"] .sidebar,
html[data-mirai-theme="light"] .topbar,
html[data-mirai-theme="light"] main,
html[data-mirai-theme="light"] .content,
html[data-mirai-theme="light"] .panel,
html[data-mirai-theme="light"] .card,
html[data-mirai-theme="light"] table,
html[data-mirai-theme="light"] th,
html[data-mirai-theme="light"] td {
    transition:
        background-color .32s ease,
        background .32s ease,
        color .24s ease,
        border-color .32s ease,
        box-shadow .32s ease;
}


/* Preserve accessibility */

@media (prefers-reduced-motion: reduce) {
    html[data-mirai-theme="light"] * {
        transition-duration:
            .01ms !important;
    }
}



/* ==========================================================
   MIRAI LIGHT CONTRAST FIX v1
   Authoritative foreground/text normalization
   ========================================================== */


/* ----------------------------------------------------------
   DEFAULT LIGHT FOREGROUND
   ---------------------------------------------------------- */

html[data-mirai-theme="light"] body {
    color: #1d1d1f !important;
}


/*
 * Normal dashboard content inherits dark readable text.
 * Do NOT apply this to semantic status badges.
 */

html[data-mirai-theme="light"]
:is(
    main,
    .main,
    .content,
    .page,
    .page-content,
    .page-panel,
    .panel,
    .card,
    .widget,
    .section-card,
    .dashboard-card,
    .content-card
) {
    color: #1d1d1f !important;
}


/* ----------------------------------------------------------
   HEADINGS
   ---------------------------------------------------------- */

html[data-mirai-theme="light"]
:is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .title,
    .heading,
    .card-title,
    .section-title
) {
    color: #1d1d1f !important;
}


/* ----------------------------------------------------------
   SECONDARY COPY
   ---------------------------------------------------------- */

html[data-mirai-theme="light"]
:is(
    .subtitle,
    .description,
    .card-subtitle,
    .section-subtitle,
    .muted,
    .text-muted,
    .secondary-text
) {
    color: #6e6e73 !important;
}


/* ==========================================================
   CONSUMER TUNING TABLE
   ========================================================== */

html[data-mirai-theme="light"]
table tbody td {
    color: #1d1d1f !important;
}


/*
 * Force normal text descendants in table cells readable.
 * Buttons/badges/inputs are excluded because they have their
 * own semantic styling.
 */

html[data-mirai-theme="light"]
table tbody td
:is(
    div,
    span,
    strong,
    b,
    small,
    label
):not(
    [class*="status"]
):not(
    [class*="badge"]
):not(
    [class*="pill"]
) {
    color: inherit;
}


html[data-mirai-theme="light"]
table tbody td strong {
    color: #1d1d1f !important;
}


/*
 * Consumer names / primary table labels.
 */

html[data-mirai-theme="light"]
tbody td:first-child {
    color: #273142 !important;
}


html[data-mirai-theme="light"]
tbody td:first-child
:is(
    span,
    div,
    strong,
    a
) {
    color: #273142 !important;
}


/*
 * Cluster text.
 */

html[data-mirai-theme="light"]
tbody td:nth-child(2) {
    color: #475569 !important;
}


/*
 * Tuning configuration text.
 */

html[data-mirai-theme="light"]
tbody td:nth-child(5) {
    color: #1d1d1f !important;
}


html[data-mirai-theme="light"]
tbody td:nth-child(5) strong {
    color: #1d1d1f !important;
}


html[data-mirai-theme="light"]
tbody td:nth-child(5)
:is(
    small,
    span,
    div
) {
    color: #596579;
}


/*
 * Balancing / N/A.
 */

html[data-mirai-theme="light"]
tbody td:nth-child(6) {
    color: #64748b !important;
}


/* ==========================================================
   TABLE HEADER
   Keep deliberate dark header but make text crisp white.
   ========================================================== */

html[data-mirai-theme="light"]
table thead th {
    background: #202b3d !important;

    color: #ffffff !important;

    border-color: #3b485c !important;
}


html[data-mirai-theme="light"]
table thead th
:is(
    span,
    div,
    strong,
    label
) {
    color: #ffffff !important;
}


/*
 * Filter row can remain dark for visual separation.
 */

html[data-mirai-theme="light"]
table thead tr:last-child th {
    background: #111c2d !important;
}


/*
 * Inputs inside the dark filter row remain white.
 */

html[data-mirai-theme="light"]
table thead
:is(
    input,
    select
) {
    background: #ffffff !important;

    color: #1d1d1f !important;

    border-color: #cbd5e1 !important;
}


/* ==========================================================
   OVERVIEW CARDS
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    .overview-capacity-card,
    .overview-alert-card
) {
    background: #ffffff !important;

    color: #1d1d1f !important;

    border-color: #dedee3 !important;
}


html[data-mirai-theme="light"]
:is(
    .overview-capacity-card,
    .overview-alert-card
)
:is(
    h1,
    h2,
    h3,
    h4,
    h5,
    strong
) {
    color: #1d1d1f !important;
}


html[data-mirai-theme="light"]
:is(
    .overview-capacity-card,
    .overview-alert-card
)
:is(
    p,
    small,
    .subtitle,
    .description
) {
    color: #6e6e73 !important;
}


/* ==========================================================
   ALERT INTELLIGENCE ROWS
   ========================================================== */

html[data-mirai-theme="light"]
.overview-alert-card
:is(
    .alert-row,
    .alert-category,
    .alert-item
) {
    background: #f5f5f7 !important;

    border-color: #e5e5ea !important;

    color: #3a3a3c !important;
}


html[data-mirai-theme="light"]
.overview-alert-card
:is(
    .alert-row,
    .alert-category,
    .alert-item
)
:is(
    span,
    div,
    strong
) {
    color: #3a3a3c;
}


/* ==========================================================
   YARN / CAPACITY CARD
   ========================================================== */

html[data-mirai-theme="light"]
.overview-capacity-card
:is(
    .cluster-name,
    .capacity-name,
    .queue-name,
    .cluster-label
) {
    color: #475569 !important;
}


/*
 * Progress tracks become macOS light gray.
 * Colored progress fills are intentionally untouched.
 */

html[data-mirai-theme="light"]
.overview-capacity-card
:is(
    .progress,
    .progress-track,
    .capacity-track,
    .queue-track
) {
    background: #e5e7eb !important;
}


/* ==========================================================
   COMPLETED HOUR / DATA COMPLETENESS
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    .completed-hour,
    .completed-hour-card,
    .data-completeness,
    .data-completeness-card
) {
    background: #ffffff !important;

    border-color: #dedee3 !important;

    color: #1d1d1f !important;
}


html[data-mirai-theme="light"]
:is(
    .completed-hour,
    .completed-hour-card,
    .data-completeness,
    .data-completeness-card
)
:is(
    h1,h2,h3,h4,strong
) {
    color: #1d1d1f !important;
}


/* ==========================================================
   MIRAI ACTIVITY
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    .mirai-activity,
    .activity-card,
    .live-activity
) {
    background: #ffffff !important;

    border-color: #dedee3 !important;

    color: #1d1d1f !important;
}


/*
 * Actual log/message/code payload may remain a subtly
 * tinted surface, but no longer near-black.
 */

html[data-mirai-theme="light"]
:is(
    .mirai-activity,
    .activity-card,
    .live-activity
)
:is(
    .activity-entry,
    .activity-message,
    .activity-content
) {
    background: #f7f7f9 !important;

    border-color: #e1e1e6 !important;

    color: #34343a !important;
}


/* ==========================================================
   QUICK ACTIONS
   ========================================================== */

html[data-mirai-theme="light"]
:is(
    .quick-actions,
    .quick-actions-bar,
    .overview-quick-actions
) {
    background: rgba(255,255,255,.88) !important;

    border-color: #dedee3 !important;

    color: #1d1d1f !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,.045)
        !important;
}


html[data-mirai-theme="light"]
:is(
    .quick-actions,
    .quick-actions-bar,
    .overview-quick-actions
)
button {
    background: #ffffff !important;

    border-color: #cfd2d8 !important;

    color: #34343a !important;

    box-shadow:
        0 1px 2px rgba(0,0,0,.035)
        !important;
}


html[data-mirai-theme="light"]
:is(
    .quick-actions,
    .quick-actions-bar,
    .overview-quick-actions
)
button:hover {
    background: #f5f5f7 !important;

    border-color: #b9bbc2 !important;
}


/* ==========================================================
   GENERIC WHITE SURFACE TEXT SAFETY NET
   ========================================================== */

/*
 * Several older MIRAI components have hard-coded
 * color:#e... values. This covers ordinary text in the
 * common light surfaces without touching semantic badges.
 */

html[data-mirai-theme="light"]
:is(
    .overview-consumer-visual,
    .overview-consumer-summary,
    .overview-capacity-card,
    .overview-alert-card,
    .consumer-card,
    .queue-card,
    .record-card,
    .tuning-card,
    .config-card,
    .runbook-card
)
:is(
    .label,
    .name,
    .value,
    .title
) {
    color: #34343a !important;
}


/* ==========================================================
   STATUS SEMANTICS
   Keep these recognizable in both themes.
   ========================================================== */

html[data-mirai-theme="light"]
[class*="running"]:not(
    [class*="not-running"]
) {
    /* existing green styling remains authoritative */
}


html[data-mirai-theme="light"]
[class*="maintenance"] {
    /* existing blue/orange styling remains authoritative */
}


/* ==========================================================
   DETACHED PROFILE CONTRAST
   ========================================================== */

html[data-mirai-theme="light"]
body > #mirai-user-dropdown {
    color: #1d1d1f !important;
}


html[data-mirai-theme="light"]
body > #mirai-user-dropdown strong {
    color: #1d1d1f !important;
}


html[data-mirai-theme="light"]
body > #mirai-user-dropdown
:not(
    .mirai-dropdown-logout
) {
    border-color: rgba(60,60,67,.12);
}


/* ==========================================================
   LIGHT MODE SELECTION
   ========================================================== */

html[data-mirai-theme="light"]
::selection {
    background: rgba(94,92,230,.20);

    color: #1d1d1f;
}



/* ============================================================
   MIRAI LIGHT THEME — CANONICAL COMPONENT OVERRIDE v2
   Real dashboard selectors. Light mode only.
   ============================================================ */

html[data-mirai-theme="light"] {
    --lt-bg: #f5f5f7;
    --lt-sidebar: rgba(250,250,252,.96);
    --lt-surface: #ffffff;
    --lt-surface-2: #f7f7f9;
    --lt-surface-3: #eef0f5;

    --lt-text: #1d1d1f;
    --lt-text-2: #48484a;
    --lt-muted: #86868b;

    --lt-border: rgba(60,60,67,.16);
    --lt-border-soft: rgba(60,60,67,.10);

    --lt-purple: #5e5ce6;
    --lt-purple-soft: rgba(94,92,230,.09);
}


/* ============================================================
   GLOBAL SHELL
   ============================================================ */

html[data-mirai-theme="light"],
html[data-mirai-theme="light"] body {
    background: var(--lt-bg) !important;
    color: var(--lt-text) !important;
}

html[data-mirai-theme="light"] .sidebar {
    background:
        rgba(250,250,252,.94) !important;

    border-color:
        var(--lt-border) !important;

    color:
        var(--lt-text) !important;

    backdrop-filter:
        blur(30px) saturate(180%);

    -webkit-backdrop-filter:
        blur(30px) saturate(180%);
}

html[data-mirai-theme="light"] .topbar {
    background:
        rgba(255,255,255,.78) !important;

    border-color:
        var(--lt-border-soft) !important;

    backdrop-filter:
        blur(30px) saturate(180%);

    -webkit-backdrop-filter:
        blur(30px) saturate(180%);
}

html[data-mirai-theme="light"] main,
html[data-mirai-theme="light"] .content,
html[data-mirai-theme="light"] .page-panel {
    background:
        var(--lt-bg) !important;

    color:
        var(--lt-text) !important;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

html[data-mirai-theme="light"]
.sidebar .nav-item {
    color:
        #42526a !important;
}

html[data-mirai-theme="light"]
.sidebar .nav-item span {
    color:
        inherit !important;
}

html[data-mirai-theme="light"]
.sidebar .nav-item:hover {
    background:
        rgba(94,92,230,.06) !important;

    color:
        #3432c7 !important;
}

html[data-mirai-theme="light"]
.sidebar .nav-item.active {
    background:
        linear-gradient(
            135deg,
            rgba(94,92,230,.11),
            rgba(120,119,198,.06)
        ) !important;

    border-color:
        rgba(94,92,230,.25) !important;

    color:
        #4338ca !important;
}

html[data-mirai-theme="light"]
.sidebar-label,
html[data-mirai-theme="light"]
.section-label {
    color:
        #667085 !important;
}


/* ============================================================
   PAGE HEADINGS
   ============================================================ */

html[data-mirai-theme="light"]
.page-heading h1,
html[data-mirai-theme="light"]
.page-heading h2 {
    color:
        #172033 !important;
}

html[data-mirai-theme="light"]
.page-heading p {
    color:
        #6e6e73 !important;
}

html[data-mirai-theme="light"]
.hero-kicker {
    color:
        #596579 !important;
}


/* ============================================================
   OVERVIEW
   ACTUAL CLASS = .overview-panel
   ============================================================ */

html[data-mirai-theme="light"]
#page-overview .overview-panel {
    background:
        rgba(255,255,255,.94) !important;

    color:
        var(--lt-text) !important;

    border-color:
        var(--lt-border) !important;

    box-shadow:
        0 12px 34px rgba(0,0,0,.045),
        inset 0 1px 0 rgba(255,255,255,.9)
        !important;
}

html[data-mirai-theme="light"]
#page-overview .overview-panel h2 {
    color:
        #172033 !important;
}

html[data-mirai-theme="light"]
#page-overview .overview-panel p {
    color:
        #7b7b80 !important;
}

html[data-mirai-theme="light"]
#page-overview .overview-panel-kicker {
    color:
        #737987 !important;
}

html[data-mirai-theme="light"]
#page-overview .overview-panel-number {
    color:
        #34343a !important;
}

html[data-mirai-theme="light"]
#page-overview .overview-panel-footer,
html[data-mirai-theme="light"]
#page-overview .overview-text-action {
    color:
        #62626a !important;
}


/* YARN */

html[data-mirai-theme="light"]
.overview-yarn-compact-name {
    color:
        #4b5565 !important;
}

html[data-mirai-theme="light"]
.overview-yarn-compact-track {
    background:
        #e7e9ee !important;
}

html[data-mirai-theme="light"]
.overview-yarn-compact-value {
    font-weight:
        700;
}


/* ALERT INTELLIGENCE */

html[data-mirai-theme="light"]
.overview-alert-category {
    background:
        #f5f5f7 !important;

    border-color:
        #e5e5ea !important;

    color:
        #3a3a3c !important;
}

html[data-mirai-theme="light"]
.overview-alert-category-name {
    color:
        #3a3a3c !important;
}

html[data-mirai-theme="light"]
.overview-alert-category-count {
    color:
        #4b5563 !important;

    background:
        #e7e7ed !important;
}


/* ALERT / ACTIVITY STREAM */

html[data-mirai-theme="light"]
#overview-alert-stream,
html[data-mirai-theme="light"]
.overview-alert-stream {
    background:
        #f7f7f9 !important;

    border-color:
        #e1e1e6 !important;

    color:
        #34343a !important;
}

html[data-mirai-theme="light"]
#overview-alert-stream *,
html[data-mirai-theme="light"]
.overview-alert-stream * {
    color:
        #3a3a3c;
}


/* DATA COMPLETENESS */

html[data-mirai-theme="light"]
#overview-dummy-grid {
    color:
        #34343a !important;
}

html[data-mirai-theme="light"]
.overview-dummy-empty {
    background:
        #f7f7f9 !important;

    color:
        #6e6e73 !important;

    border-color:
        #d9d9df !important;
}


/* QUICK ACTIONS — ACTUAL CLASS */

html[data-mirai-theme="light"]
.overview-quick-strip {
    background:
        rgba(255,255,255,.88) !important;

    color:
        #34343a !important;

    border:
        1px solid var(--lt-border) !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.04)
        !important;
}

html[data-mirai-theme="light"]
.overview-quick-label {
    color:
        #6e6e73 !important;
}

html[data-mirai-theme="light"]
.overview-quick-strip button {
    background:
        #ffffff !important;

    color:
        #34343a !important;

    border-color:
        #cfd2d8 !important;
}

html[data-mirai-theme="light"]
.overview-quick-strip button:hover {
    background:
        #f2f2f7 !important;

    border-color:
        #b8bac1 !important;
}


/* ============================================================
   CONSUMER TUNING
   ACTUAL CLASS = .consumer-table
   ============================================================ */

html[data-mirai-theme="light"]
.consumer-table-wrap {
    background:
        #ffffff !important;

    border-color:
        var(--lt-border) !important;
}

html[data-mirai-theme="light"]
.consumer-table {
    background:
        #ffffff !important;

    color:
        var(--lt-text) !important;
}

html[data-mirai-theme="light"]
.consumer-table tbody tr {
    background:
        #ffffff !important;
}

html[data-mirai-theme="light"]
.consumer-table tbody tr:nth-child(even) {
    background:
        #f7f7f9 !important;
}

html[data-mirai-theme="light"]
.consumer-table tbody td {
    background:
        transparent !important;

    color:
        #273142 !important;

    border-color:
        #d9dee7 !important;
}


/*
 * Important:
 * dynamic table rendering has nested elements with old
 * hard-coded dark-mode foreground colors.
 */

html[data-mirai-theme="light"]
.consumer-table tbody td
div:not([class*="status"]):not([class*="badge"]),
html[data-mirai-theme="light"]
.consumer-table tbody td
span:not([class*="status"]):not([class*="badge"]),
html[data-mirai-theme="light"]
.consumer-table tbody td strong,
html[data-mirai-theme="light"]
.consumer-table tbody td small {
    color:
        #273142 !important;
}


/* Consumer name */

html[data-mirai-theme="light"]
.consumer-table tbody td:first-child,
html[data-mirai-theme="light"]
.consumer-table tbody td:first-child * {
    color:
        #273142 !important;
}


/* Cluster / DC */

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(2),
html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(2) *,
html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(3),
html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(3) * {
    color:
        #526174 !important;
}


/* Tuning configuration */

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(6),
html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(6) * {
    color:
        #273142 !important;
}


/* Balancing */

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(7),
html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(7) * {
    color:
        #667085 !important;
}


/* Table header */

html[data-mirai-theme="light"]
.consumer-table thead tr:first-child th {
    background:
        #202b3d !important;

    color:
        #ffffff !important;

    border-color:
        #3b485c !important;
}


/* Filters */

html[data-mirai-theme="light"]
.consumer-table .consumer-filter-row th {
    background:
        #111c2d !important;

    border-color:
        #3b485c !important;
}

html[data-mirai-theme="light"]
.consumer-table .consumer-filter-row input,
html[data-mirai-theme="light"]
.consumer-table .consumer-filter-row select {
    background:
        #ffffff !important;

    color:
        #1d1d1f !important;

    border-color:
        #cbd5e1 !important;
}


/* ============================================================
   AI INTELLIGENCE / MIRAI CHAT
   ============================================================ */

html[data-mirai-theme="light"]
#page-assistant {
    background:
        var(--lt-bg) !important;
}

html[data-mirai-theme="light"]
#page-assistant .chat-workspace {
    background:
        rgba(255,255,255,.92) !important;

    border:
        1px solid var(--lt-border) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.055)
        !important;
}

html[data-mirai-theme="light"]
#page-assistant .chat-messages {
    background:
        #ffffff !important;

    color:
        var(--lt-text) !important;
}


/* MIRAI messages */

html[data-mirai-theme="light"]
#page-assistant .chat-row.assistant .chat-message {
    background:
        #f2f3f7 !important;

    color:
        #24252a !important;

    border-color:
        #dedfe5 !important;
}

html[data-mirai-theme="light"]
#page-assistant .chat-row.assistant .chat-message * {
    color:
        #24252a !important;
}


/* User messages */

html[data-mirai-theme="light"]
#page-assistant .chat-row.user .chat-message {
    background:
        linear-gradient(
            135deg,
            rgba(94,92,230,.14),
            rgba(124,58,237,.10)
        ) !important;

    color:
        #312e81 !important;

    border-color:
        rgba(94,92,230,.28) !important;
}

html[data-mirai-theme="light"]
#page-assistant .chat-row.user .chat-message * {
    color:
        #312e81 !important;
}


/* Dynamic tuning-plan/card content inside chat */

html[data-mirai-theme="light"]
#page-assistant .chat-message
:is(
    .tuning-plan,
    .tuning-card,
    .plan-card,
    .preview-card
) {
    background:
        #ffffff !important;

    color:
        #1d1d1f !important;

    border-color:
        #d9d9df !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.045)
        !important;
}

html[data-mirai-theme="light"]
#page-assistant .chat-message
:is(
    .tuning-plan,
    .tuning-card,
    .plan-card,
    .preview-card
) * {
    color:
        #34343a;
}


/* Composer */

html[data-mirai-theme="light"]
#page-assistant .chat-composer {
    background:
        rgba(247,247,249,.96) !important;

    border-color:
        #dedee3 !important;
}

html[data-mirai-theme="light"]
#page-assistant #chat-input {
    background:
        #ffffff !important;

    color:
        #1d1d1f !important;

    border-color:
        #d1d1d6 !important;
}

html[data-mirai-theme="light"]
#page-assistant #chat-input::placeholder {
    color:
        #8e8e93 !important;
}


/* ============================================================
   FORM CONTROLS
   ============================================================ */

html[data-mirai-theme="light"]
:is(input, textarea, select) {
    color-scheme:
        light;
}


/* ============================================================
   SMOOTH MAC-LIKE SWITCH
   ============================================================ */

body,
.sidebar,
.topbar,
.page-panel,
.overview-panel,
.consumer-table-wrap,
.consumer-table tbody tr,
.chat-workspace,
.chat-messages,
.chat-message,
.chat-composer {
    transition:
        background-color .32s ease,
        background .32s ease,
        color .24s ease,
        border-color .28s ease,
        box-shadow .32s ease
        !important;
}



/* ============================================================
   MIRAI CONSUMER TUNING — LIGHT MODE FINAL FIX v1
   Fix cell-painted zebra rows + exact 7-column mapping.
   Dark mode untouched.
   ============================================================ */


/* ---------- TABLE BODY ---------- */

html[data-mirai-theme="light"]
.consumer-table tbody tr,
html[data-mirai-theme="light"]
.consumer-table tbody tr:nth-child(odd),
html[data-mirai-theme="light"]
.consumer-table tbody tr:nth-child(even) {
    background: transparent !important;
}


/*
 * The CELLS paint the visible row background.
 * Do not rely on <tr> background.
 */

html[data-mirai-theme="light"]
.consumer-table tbody tr:nth-child(odd) > td {
    background: #ffffff !important;
}

html[data-mirai-theme="light"]
.consumer-table tbody tr:nth-child(even) > td {
    background: #f7f8fa !important;
}


/* Subtle hover */

html[data-mirai-theme="light"]
.consumer-table tbody tr:hover > td {
    background: #f0f2f6 !important;
}


/* Cell borders */

html[data-mirai-theme="light"]
.consumer-table tbody td {
    border-color: #d8dde6 !important;
}


/* ============================================================
   EXACT COLUMN MAP
   1 Consumer
   2 Cluster
   3 DC
   4 Status
   5 Lag
   6 Tuning
   7 Balancing
   ============================================================ */


/* 1 — Consumer */

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(1),
html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(1) * {
    color: #172033 !important;
}


/* 2 — Cluster */

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(2),
html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(2) * {
    color: #475569 !important;
}


/* 3 — DC */

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(3) {
    color: #475569 !important;
}


/* 4 — Status
   Preserve semantic status badge colors.
 */

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(4) {
    color: #334155 !important;
}


/* 5 — Consumer Lag */

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(5) {
    color: #475569 !important;
}


/* 6 — Tuning */

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(6) {
    color: #172033 !important;
}

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(6)
:is(div, strong, b) {
    color: #172033 !important;
}

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(6)
:is(span, small, label) {
    color: #5f6b7a !important;
}


/* 7 — Balancing */

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(7),
html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(7)
:is(div, span, small) {
    color: #667085 !important;
}


/* ============================================================
   STATUS BADGES
   Restore their intended semantic colors after generic text
   rules above.
   ============================================================ */

html[data-mirai-theme="light"]
.consumer-table .consumer-status-badge.status-running {
    color: #12a150 !important;
    background: rgba(34,197,94,.11) !important;
    border-color: rgba(34,197,94,.65) !important;
}

html[data-mirai-theme="light"]
.consumer-table .consumer-status-badge.status-maintenance {
    color: #2878e8 !important;
    background: rgba(59,130,246,.10) !important;
    border-color: rgba(59,130,246,.65) !important;
}

html[data-mirai-theme="light"]
.consumer-table .consumer-status-badge.status-not-running {
    color: #dc3545 !important;
    background: rgba(239,68,68,.10) !important;
    border-color: rgba(239,68,68,.55) !important;
}

html[data-mirai-theme="light"]
.consumer-table .consumer-status-badge.status-not-enabled {
    color: #6366f1 !important;
    background: rgba(99,102,241,.10) !important;
    border-color: rgba(99,102,241,.50) !important;
}


/* ============================================================
   LAG / N-A PILLS
   ============================================================ */

html[data-mirai-theme="light"]
.consumer-table tbody td:nth-child(5)
:is(.consumer-lag-cell, [class*="lag"]) {
    color: #475569 !important;
}


/* ============================================================
   SELECTS INSIDE DYNAMIC ROWS
   ============================================================ */

html[data-mirai-theme="light"]
.consumer-table tbody td select {
    background: #ffffff !important;
    color: #1d1d1f !important;
    border: 1px solid #cbd2dc !important;
    color-scheme: light;
}


/* ============================================================
   EMPTY / LOADING ROWS
   ============================================================ */

html[data-mirai-theme="light"]
.consumer-table tbody td.consumer-empty {
    background: #ffffff !important;
    color: #6e6e73 !important;
}


/* ============================================================
   SMOOTH ROW TRANSITION
   ============================================================ */

html[data-mirai-theme="light"]
.consumer-table tbody td {
    transition:
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease
        !important;
}



/* ============================================================
   MIRAI LIGHT MODE — FOREGROUND CONTRAST FIX v1
   Consumer names + overview count + user identity
   ============================================================ */


/* ------------------------------------------------------------
   1. CONSUMER TUNING
   First column is generated as plain TD text.
   ------------------------------------------------------------ */

html[data-mirai-theme="light"]
#consumerTuningBody > tr > td:first-child {
    color: #182235 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #182235 !important;
}

html[data-mirai-theme="light"]
#consumerTuningBody > tr > td:first-child * {
    color: #182235 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #182235 !important;
}


/* Cluster/DC also currently too faint */

html[data-mirai-theme="light"]
#consumerTuningBody > tr > td:nth-child(2),
html[data-mirai-theme="light"]
#consumerTuningBody > tr > td:nth-child(3) {
    color: #526174 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #526174 !important;
}


/* ------------------------------------------------------------
   2. OVERVIEW CONSUMER DONUT
   Catch both text nodes/classes and SVG text.
   ------------------------------------------------------------ */

html[data-mirai-theme="light"]
#page-overview .overview-consumer-count,
html[data-mirai-theme="light"]
#page-overview .consumer-count,
html[data-mirai-theme="light"]
#page-overview [class*="consumer-count"],
html[data-mirai-theme="light"]
#page-overview [class*="donut"] strong,
html[data-mirai-theme="light"]
#page-overview [class*="donut"] .value {
    color: #172033 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #172033 !important;
}

html[data-mirai-theme="light"]
#page-overview [class*="donut"] svg text {
    fill: #172033 !important;
    opacity: 1 !important;
}


/* Donut center itself remains intentionally dark.
   Therefore its center number needs WHITE contrast. */

html[data-mirai-theme="light"]
#page-overview [class*="donut"]
[class*="center"] strong,
html[data-mirai-theme="light"]
#page-overview [class*="donut"]
[class*="center"] .value,
html[data-mirai-theme="light"]
#page-overview [class*="donut"]
[class*="center"] [class*="count"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}


/* ------------------------------------------------------------
   3. SIDEBAR USER IDENTITY
   ------------------------------------------------------------ */

html[data-mirai-theme="light"]
#mirai-current-user,
html[data-mirai-theme="light"]
#mirai-current-user * {
    color: #253047 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #253047 !important;
}

html[data-mirai-theme="light"]
#mirai-current-user {
    background:
        rgba(235,237,242,.94) !important;

    border-color:
        rgba(60,60,67,.12) !important;
}


/* Keep secondary account information secondary */

html[data-mirai-theme="light"]
#mirai-current-user
:is(
    .email,
    [class*="email"],
    [class*="subtitle"],
    [class*="meta"]
) {
    color: #737b8c !important;
    -webkit-text-fill-color: #737b8c !important;
}


/* ------------------------------------------------------------
   4. MIRAI BRAND
   ------------------------------------------------------------ */

html[data-mirai-theme="light"]
.sidebar .mirai-brand-title,
html[data-mirai-theme="light"]
.sidebar .brand-name {
    color: #172033 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #172033 !important;
}

html[data-mirai-theme="light"]
.sidebar .mirai-brand-subtitle,
html[data-mirai-theme="light"]
.sidebar .brand-subtitle {
    color: #788397 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #788397 !important;
}


/* =========================================================
   MIRAI TSH SESSION STATUS
   ========================================================= */

.tsh-status {
    transition:
        color 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease;
}

.tsh-status .pulse-dot {
    background: #64748b;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.12);
}

.tsh-status.tsh-connected {
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.25);
}

.tsh-status.tsh-connected .pulse-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.13);
}

.tsh-status.tsh-warning {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.30);
}

.tsh-status.tsh-warning .pulse-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.13);
}

.tsh-status.tsh-expired,
.tsh-status.tsh-offline,
.tsh-status.tsh-unavailable,
.tsh-status.tsh-unknown {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.30);
}

.tsh-status.tsh-expired .pulse-dot,
.tsh-status.tsh-offline .pulse-dot,
.tsh-status.tsh-unavailable .pulse-dot,
.tsh-status.tsh-unknown .pulse-dot {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.13);
}



/* =========================================================
   MIRAI P1/P2 INCIDENTS
   ========================================================= */

.p1p2-page {
    min-width: 0;
}

.p1p2-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.p1p2-stat-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 110px;
    justify-content: center;
}

.p1p2-stat-card span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.p1p2-stat-card strong {
    font-size: 30px;
    line-height: 1;
}

.p1p2-table-card {
    min-width: 0;
}

.p1p2-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.p1p2-table-heading h2 {
    margin: 4px 0 0;
}

.p1p2-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.p1p2-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
}

.p1p2-table th,
.p1p2-table td {
    padding: 13px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom:
        1px solid rgba(148, 163, 184, 0.14);
}

.p1p2-table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.65;
}

.p1p2-table td {
    font-size: 13px;
}

.p1p2-name {
    min-width: 260px;
    max-width: 380px;
}

.p1p2-summary {
    min-width: 300px;
    max-width: 500px;
    line-height: 1.5;
}

.p1p2-reported {
    white-space: nowrap;
}

.p1p2-priority,
.p1p2-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.p1p2-priority-p1,
.p1p2-status-red {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.28);
}

.p1p2-priority-p2,
.p1p2-status-yellow {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.28);
}

.p1p2-status-green {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.13);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.p1p2-empty {
    padding: 32px !important;
    text-align: center !important;
    opacity: 0.65;
}

@media (max-width: 1100px) {
    .p1p2-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .p1p2-stat-grid {
        grid-template-columns: 1fr;
    }
}


/* P1/P2 light-theme contrast */

html[data-mirai-theme="light"]
.p1p2-priority-p1,
html[data-mirai-theme="light"]
.p1p2-status-red {
    color: #b91c1c;
}

html[data-mirai-theme="light"]
.p1p2-priority-p2,
html[data-mirai-theme="light"]
.p1p2-status-yellow {
    color: #a16207;
}

html[data-mirai-theme="light"]
.p1p2-status-green {
    color: #15803d;
}


/* =========================================================
   MIRAI P1/P2 OVERVIEW
   ========================================================= */

.overview-p1p2-days {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.overview-p1p2-row {
    display: grid;
    grid-template-columns:
        minmax(125px, 1fr)
        58px
        58px
        70px;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    border:
        1px solid rgba(148, 163, 184, 0.12);
    background:
        rgba(15, 23, 42, 0.18);
}

.overview-p1p2-date {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.overview-p1p2-date strong {
    font-size: 13px;
}

.overview-p1p2-date span {
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.58;
}

.overview-p1p2-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.overview-p1p2-metric span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
}

.overview-p1p2-metric strong {
    font-size: 16px;
}

html[data-mirai-theme="light"]
.overview-p1p2-row {
    background:
        rgba(248, 250, 252, 0.72);
    border-color:
        rgba(100, 116, 139, 0.16);
}

@media (max-width: 640px) {
    .overview-p1p2-row {
        grid-template-columns:
            minmax(100px, 1fr)
            45px
            45px
            55px;
    }
}


/* =========================================================
   MIRAI P1/P2 FILTERS + OVERVIEW DRILL-DOWN
   ========================================================= */

.p1p2-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.16);
}

.p1p2-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.p1p2-filter > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.65;
}

.p1p2-filter select,
.p1p2-filter input {
    min-width: 170px;
    height: 38px;
    padding: 0 11px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.7);
    color: inherit;
    font: inherit;
}

.p1p2-filter-clear {
    height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.p1p2-filter-clear:hover {
    background: rgba(148, 163, 184, 0.1);
}

.p1p2-filter-result {
    margin-left: auto;
    padding-bottom: 9px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.65;
}

.overview-p1p2-clickable {
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.overview-p1p2-clickable:hover {
    border-color: rgba(139, 92, 246, 0.38);
    background: rgba(139, 92, 246, 0.08);
}

.overview-p1p2-filter-link {
    appearance: none;
    border: 0;
    padding: 4px;
    margin: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: 7px;
}

.overview-p1p2-filter-link:hover {
    background: rgba(139, 92, 246, 0.14);
}

.overview-p1p2-clickable:focus-visible,
.overview-p1p2-filter-link:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.7);
    outline-offset: 2px;
}

html[data-mirai-theme="light"]
.p1p2-filter select,
html[data-mirai-theme="light"]
.p1p2-filter input {
    background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 760px) {

    .p1p2-filter {
        width: 100%;
    }

    .p1p2-filter select,
    .p1p2-filter input {
        width: 100%;
    }

    .p1p2-filter-result {
        width: 100%;
        margin-left: 0;
    }
}