@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/assets/font/Red_Hat_Display/Red_Hat_Display_regular_variable_v20.woff2') format('woff2');
}

@font-face {
    font-family: 'Red Hat Mono';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/font/Red_Hat_Mono/Red_Hat_Mono_regular_variable_v15.woff2') format('woff2');
}

@property --status-mid {
    syntax: '<color>';
    inherits: true;
    initial-value: #2d3330;
}

@property --status-end {
    syntax: '<color>';
    inherits: true;
    initial-value: #4b5651;
}

@property --bar {
    syntax: '<color>';
    inherits: true;
    initial-value: #b4b4b4;
}

:root {
    color-scheme: dark;

    --color: #fff;
    --bg-color: #000;
    --surface-color: #1A1A1A;
    --surface-color-2: #000;
    --surface-color-3: #2d2d2d;

    --text-color: #fff;
    --text-muted-color: #b4b4b4;

    --green-color: #84ffbd;
    --blue-color: #7ce3ff;
    --red-color: #ff8585;
    --yellow-color: #fff691;


    --font-family-sans: 'Red Hat Display', sans-serif;
    --font-family-mono: 'Red Hat Mono', monospace;


    --font-size-base: 1rem;


    --padding-base: .5rem;
    --space-base: .5rem;
    --radius-base: .5rem;


    --padding: var(--padding-base);
    --padding-2: calc(var(--padding-base) * 2);
    --padding-3: calc(var(--padding-base) * 3);

    --space: var(--space-base);
    --space-2: calc(var(--space-base) * 2);
    --space-3: calc(var(--space-base) * 3);

    --radius: 0;

    --edge-offset-x: 2rem;
    --header-height: 7rem;
}

/* Base */
*, *::before, *::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
    scrollbar-width: thin;
    scrollbar-color: #757575 transparent;
}

@media (prefers-reduced-motion: no-preference) {
    .window-wrapper {
        scroll-behavior: smooth;
    }
}

:focus-visible {
    outline: 2px solid var(--green-color);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body {
    margin: 0;
    color: var(--color);
    background: var(--bg-color);
    min-height: 100dvh;
    font-family: var(--font-family-sans);
    font-weight: 500;
    overflow: clip;

    >header {
        position: fixed;
        z-index: 10;
        inset: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: calc(var(--padding-2) + env(safe-area-inset-top, 0px));
        padding-bottom: var(--padding-2);
        padding-left: max(var(--edge-offset-x),
                calc(env(titlebar-area-x, 0px) + var(--padding)));
        padding-right: max(var(--edge-offset-x),
                calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + var(--padding)));
        background: linear-gradient(var(--bg-color), transparent);
        -webkit-app-region: drag;
        app-region: drag;

        >*,
        a,
        button {
            -webkit-app-region: no-drag;
            app-region: no-drag;
        }


        .logo {
            display: block;
            height: 2rem;
            flex-shrink: 0;
            fill: currentColor;
        }

        .nav-group {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .links-wrapper {
            display: flex;
            align-items: center;
            gap: var(--space);
        }
    }

    .window-wrapper {
        width: 100vw;
        contain: paint;
        height: 100dvh;
        max-height: 100%;
        max-width: 100%;
        overflow-x: auto;
        display: flex;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;

        .window {
            overflow-y: auto;
            width: 100%;
            flex-shrink: 0;
            scroll-snap-align: center;
        }

        .layout {
            display: grid;
            gap: var(--space-2);
            padding-top: var(--header-height);
            padding-bottom: calc(var(--edge-offset-x) + env(safe-area-inset-bottom, 0px));
            padding-inline: var(--edge-offset-x);
            grid-template-columns: repeat(12, 1fr);
            min-height: 100%;

            @media (width >=1500px) {
                height: 100%;
                grid-template-rows: minmax(0, 1.36fr) minmax(0, 1fr);
            }


            .card {
                display: flex;
                flex-direction: column;
                gap: var(--space-2);
                padding: var(--padding-3);
                background-color: var(--surface-color);
                min-width: 0;
                min-height: 0;

                .header {
                    display: flex;
                    justify-content: space-between;

                    .heading {
                        font-size: clamp(1.75rem, 2vw, 4.5rem);
                        margin: 0;
                        font-weight: 500;
                        text-box: trim-start cap alphabetic;
                    }

                    .other-text {
                        color: var(--text-muted-color);
                        text-box: trim-start cap alphabetic;
                        font-weight: 600;
                    }
                }

                &.card-1 {
                    grid-column: span 12;
                    min-height: 18rem;

                    @media (width >=800px) {
                        grid-column: span 5;
                    }

                    @media (width >=1500px) {
                        grid-column: span 3;
                    }
                }

                &.card-2 {
                    grid-column: span 12;
                    min-height: 18rem;


                    @media (width >=800px) {
                        grid-column: span 7;
                    }

                    @media (width >=1500px) {
                        grid-column: span 4;
                    }
                }

                &.card-3 {
                    grid-column: span 12;
                    min-height: 24rem;
                    order: 5;


                    @media (width >=1500px) {
                        order: unset;
                        grid-column: span 5;
                        grid-row: span 2;
                    }
                }

                &.card-4 {
                    grid-column: span 12;

                    @media (width >=1500px) {
                        grid-column: span 7;
                    }
                }

                &.card-wide {
                    grid-column: span 12;
                    align-self: start;
                }

                &.card-col-7 {
                    grid-column: span 12;

                    @media (width >=800px) {
                        grid-column: span 7;
                    }
                }

                &.card-col-5 {
                    grid-column: span 12;

                    @media (width >=800px) {
                        grid-column: span 5;
                    }
                }

                &.card-col-6 {
                    grid-column: span 12;

                    @media (width >=800px) {
                        grid-column: span 6;
                    }
                }
            }
        }

    }

}

/* Buttons */
.btn {
    font: inherit;
    border: 0;
    text-decoration: unset;
    text-align: center;
    color: inherit;
    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 2.5);
    background-color: var(--surface-color);
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s ease,
                opacity 0.2s ease;

    &:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgb(0 0 0 / 0.45);
    }

    &:active:not(:disabled) {
        transform: translateY(0) scale(0.98);
    }

    &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    &.active,
    &.primary {
        color: var(--bg-color);
        background-color: var(--color);
    }

    &.lg {
        padding: calc(var(--padding) * 2) calc(var(--padding) * 3.5);
    }

    &[hidden] {
        display: none;
    }
}

.link.btn:not(.active) {
    color: var(--text-muted-color);
    transition: color 0.2s ease, transform 0.2s ease;

    &:hover {
        color: var(--text-color);
    }
}

.hint {
    margin: 0;
    color: var(--text-muted-color);
    font-size: .9375rem;
    line-height: 1.5;
    max-width: 60ch;
}

/* Segmented control */
.seg {
    display: flex;
    align-self: flex-start;
    max-width: 100%;
    gap: var(--space);
    padding: var(--padding);
    background: var(--surface-color-2);
    overflow-x: auto;

    button {
        font: inherit;
        font-weight: 600;
        font-size: .9375rem;
        white-space: nowrap;
        border: 0;
        padding: calc(var(--padding) * 1.25) calc(var(--padding) * 2);
        color: var(--text-muted-color);
        background: var(--surface-color-3);
        cursor: pointer;
        transition: background-color 0.2s ease,
                    color 0.2s ease,
                    transform 0.15s ease,
                    box-shadow 0.2s ease;

        &:hover:not([aria-pressed="true"]) {
            color: var(--text-color);
            background: rgb(255 255 255 / 0.15);
            transform: translateY(-1px);
        }

        &[aria-pressed="true"] {
            color: var(--bg-color);
            background: var(--color);
            box-shadow: 0 2px 8px rgb(255 255 255 / 0.25);
        }
    }
}

.toolbar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Input row */
.field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--padding-2);
    background: var(--surface-color-2);

    &:focus-within {
        outline: 2px solid var(--green-color);
        outline-offset: 2px;
    }

    input {
        flex: 1;
        min-width: 0;
        font-family: var(--font-family-mono);
        font-size: 1rem;
        color: var(--text-color);
        background: transparent;
        border: 0;
        outline: 0;
    }
}

/* Status card */
.card-1 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(#1c1e1d, var(--status-mid, #2d3330) 55%, var(--status-end, #4b5651));
    transition: --status-mid 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                --status-end 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.6s ease,
                border-color 0.6s ease;

    &[data-state="installing"] {
        --status-mid: #252b28;
        --status-end: #3b4641;
        box-shadow: 0 0 35px rgb(75 86 81 / 0.15) inset;
    }

    &[data-state="ready"] {
        --status-mid: #1d402e;
        --status-end: #286345;
        box-shadow: 0 0 50px rgb(55 128 90 / 0.28) inset;
    }

    &[data-state="staged"] {
        --status-mid: #3d3319;
        --status-end: #6e5518;
        box-shadow: 0 0 50px rgb(138 106 31 / 0.28) inset;
    }

    &[data-state="offline"] {
        --status-mid: #402323;
        --status-end: #853e3e;
        box-shadow: 0 0 50px rgb(168 79 79 / 0.28) inset;
    }

    .header .other-text {
        color: rgb(255 255 255 / .85);
        transition: color 0.4s ease;
    }
}

.gauge {
    position: absolute;
    inset: auto 0 0;
    padding-inline: var(--padding-3);

    svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    path {
        fill: none;
        stroke-width: 7;
        stroke-linecap: butt;
    }

    .gauge-track {
        stroke: rgb(255 255 255 / .3);
        transition: stroke 0.5s ease;
    }

    .gauge-fill {
        stroke: #fff;
        stroke-dasharray: var(--gauge, 0) 100;
        transition: stroke-dasharray 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    stroke 0.6s ease,
                    filter 0.6s ease;
    }

    .gauge-readout {
        position: absolute;
        inset: auto 0 var(--padding-2);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        pointer-events: none;
        transition: transform 0.4s ease;
    }

    .gauge-value {
        font-size: clamp(2.25rem, 2.6vw, 3.5rem);
        font-weight: 300;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        transition: color 0.4s ease;
    }

    .gauge-label {
        font-size: .9375rem;
        margin-top: .25rem;
        transition: color 0.4s ease;
    }

    .gauge-state {
        font-size: .875rem;
        margin-top: .25rem;
        color: rgb(255 255 255 / .85);
        transition: color 0.4s ease, opacity 0.4s ease;
    }

    .gauge-state button {
        font: inherit;
        font-weight: 700;
        color: inherit;
        background: transparent;
        border: 0;
        padding: 0;
        margin-left: .5rem;
        text-decoration: underline;
        cursor: pointer;
        transition: opacity 0.2s ease, transform 0.2s ease;

        &:hover {
            opacity: 0.8;
            transform: scale(1.05);
        }
    }
}

.card-1[data-state="ready"] .gauge-fill {
    stroke: var(--green-color);
    filter: drop-shadow(0 0 8px rgb(132 255 189 / 0.55));
}
.card-1[data-state="staged"] .gauge-fill {
    stroke: var(--yellow-color);
    filter: drop-shadow(0 0 8px rgb(255 246 145 / 0.55));
}
.card-1[data-state="offline"] .gauge-fill {
    stroke: var(--red-color);
    filter: drop-shadow(0 0 8px rgb(255 133 133 / 0.55));
}

/* Connection indicator */
.conn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: color 0.3s ease;

    &::before {
        content: "";
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: var(--green-color);
        box-shadow: 0 0 8px rgb(132 255 189 / 0.7);
        transition: background-color 0.45s ease, box-shadow 0.45s ease, transform 0.3s ease;
    }

    &[data-online="false"]::before {
        background: var(--red-color);
        box-shadow: 0 0 8px rgb(255 133 133 / 0.7);
    }
}

/* Strategy bars */
.bars {
    flex: 1;
    min-height: 9rem;
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    padding-top: var(--padding-3);

    .bar {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space);
        cursor: pointer;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);

        &:hover {
            transform: translateY(-4px);
        }

        --bar: var(--text-muted-color);

        &[data-kind="cache"] {
            --bar: var(--green-color);
        }

        &[data-kind="network"] {
            --bar: var(--blue-color);
        }

        &[data-kind="fail"] {
            --bar: var(--red-color);
        }

        &[data-kind="idle"] .bar-fill {
            opacity: .18;
        }
    }

    .bar-track {
        position: relative;
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .bar-fill {
        position: absolute;
        bottom: 0;
        width: min(100%, 4rem);
        height: var(--h, 10%);
        background: linear-gradient(var(--bar), rgb(255 255 255 / 0.85));
        transition: height 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                    --bar 0.45s ease,
                    opacity 0.45s ease,
                    box-shadow 0.45s ease,
                    filter 0.45s ease;
        border-radius: 2px 2px 0 0;
    }

    .bar[data-kind="cache"] .bar-fill {
        box-shadow: 0 0 16px rgb(132 255 189 / 0.4);
    }

    .bar[data-kind="network"] .bar-fill {
        box-shadow: 0 0 16px rgb(124 227 255 / 0.4);
    }

    .bar[data-kind="fail"] .bar-fill {
        box-shadow: 0 0 16px rgb(255 133 133 / 0.4);
    }

    .bar-value {
        position: absolute;
        bottom: calc(var(--h, 10%) + .4rem);
        font-family: var(--font-family-mono);
        font-size: .8125rem;
        font-weight: 600;
        white-space: nowrap;
        transition: bottom 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                    color 0.4s ease,
                    opacity 0.3s ease;
    }

    .bar-name {
        font-size: .8125rem;
        color: var(--text-muted-color);
        text-align: center;
        line-height: 1.2;
        transition: color 0.25s ease;
    }

    .bar:hover .bar-name {
        color: var(--text-color);
    }
}

/* Console */
.viewport {
    flex: 1;
    min-height: 12rem;
    overflow: auto;
    padding: var(--padding-2);
    background: var(--surface-color-2);
    font-family: var(--font-family-mono);
    font-size: .8125rem;
    line-height: 1.7;

    .empty {
        color: var(--text-muted-color);
    }

    .row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: var(--space-2);
    }

    .row .time,
    .row .meta {
        color: var(--text-muted-color);
    }

    .row .path {
        overflow-wrap: anywhere;
    }

    .group {
        margin: var(--space) 0 0;
        color: var(--text-muted-color);
        font-weight: 600;
    }

    pre {
        margin: 0;
        white-space: pre-wrap;
        font: inherit;
    }

    .is-cache {
        color: var(--green-color);
    }

    .is-network {
        color: var(--blue-color);
    }

    .is-fail {
        color: var(--red-color);
    }
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space);
    margin-block: var(--space);
}

.stat-box {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: var(--padding-2);
    background: var(--surface-color-2);
    border: 1px solid rgb(255 255 255 / 0.04);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.25s ease,
                border-color 0.25s ease;

    &:hover {
        background: rgb(255 255 255 / 0.04);
        border-color: rgb(255 255 255 / 0.12);
        transform: translateY(-2px);
    }
}

.stat-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted-color);
}

.stat-value {
    font-size: clamp(1.15rem, 1.4vw, 1.75rem);
    font-weight: 600;
    font-family: var(--font-family-mono);
    color: var(--text-color);
    line-height: 1.2;
    transition: color 0.3s ease;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #000;
    background: var(--green-color);
    border-radius: 2px;
    transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.35s ease,
                box-shadow 0.35s ease;
}

.badge.is-checking,
.badge.is-staging {
    background: var(--yellow-color);
    color: #000;
    box-shadow: 0 0 10px rgb(255 246 145 / 0.35);
}

.badge.is-ready {
    background: var(--blue-color);
    color: #000;
    box-shadow: 0 0 10px rgb(124 227 255 / 0.35);
}

.badge.is-failed {
    background: var(--red-color);
    color: #fff;
    box-shadow: 0 0 10px rgb(255 133 133 / 0.35);
}

.badge.is-muted {
    background: var(--surface-color-3);
    color: var(--text-muted-color);
    box-shadow: none;
}

/* Progress bars */
.progress-container {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-block: var(--space);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted-color);
}

.progress-track {
    height: 6px;
    background: var(--surface-color-3);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-color), var(--blue-color));
    transition: width .3s ease;
}

/* Action row */
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space);
    align-items: center;
    margin-top: auto;
}

/* Status message */
.status-msg {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--green-color);
    min-height: 1.25rem;
}

.status-msg.is-error {
    color: var(--red-color);
}

/* Partitions Grid */
.partitions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-2);
}

.partition-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: var(--padding-2);
    background: var(--surface-color-2);
    border-left: 3px solid var(--green-color);
}

.partition-card.is-runtime {
    border-left-color: var(--blue-color);
}

.partition-card.is-staging {
    border-left-color: var(--yellow-color);
}

.partition-card.is-fallback {
    border-left-color: var(--text-muted-color);
}

.partition-title {
    font-weight: 600;
    font-family: var(--font-family-mono);
    font-size: .875rem;
    color: var(--text-color);
}

.partition-meta {
    font-size: .8125rem;
    color: var(--text-muted-color);
}

/* Utility */
.text-mono {
    font-family: var(--font-family-mono);
}

.text-sm {
    font-size: .9375rem;
}

.manifest-viewport {
    min-height: 14rem;
}

/* Badge Plugin Mockup */
.badge-mockup-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space);
}

.badge-app-icon {
    position: relative;
    width: 60px;
    height: 60px;
    background: var(--surface-color-2);
    border: 2px solid var(--surface-color-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-app-icon svg {
    width: 34px;
    height: 34px;
    fill: var(--text-color);
}

.badge-bubble {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    background: var(--red-color);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    font-family: var(--font-family-mono);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    box-shadow: 0 2px 4px rgb(0 0 0 / .6);
    border: 2px solid var(--surface-color);
}

.badge-bubble.is-dot {
    min-width: 12px;
    width: 12px;
    height: 12px;
    padding: 0;
    top: -4px;
    right: -4px;
}

.badge-bubble[hidden] {
    display: none;
}

.badge-info {
    font-size: .875rem;
    color: var(--text-muted-color);
    line-height: 1.5;
}

/* Floating Bottom Tabs (Default hidden on desktop >= 800px) */
.floating-tabs {
    display: none;
}

.btn.install.is-installed {
    opacity: .75;
    cursor: default;
    background: var(--surface-color-3);
    color: var(--text-muted-color);

    @media (width >= 800px) {
        display: none;
    }
}

/* When width < 800px: hide header tabs, keep install button, show floating icon tab switcher */
@media (width < 800px) {
    .links-wrapper {
        display: none !important;
    }

    .install {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: calc(var(--padding) * 1.25) calc(var(--padding) * 2);
        font-size: .875rem;
    }

    body>header {
        justify-content: space-between;
        gap: var(--space-2);
        padding-inline: var(--padding-2);
    }

    .floating-tabs {
        position: fixed;
        z-index: 50;
        bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: var(--space);
        padding: calc(var(--padding) * 1.1) var(--padding-2);
        background: rgb(26 26 26 / .88);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgb(255 255 255 / .12);
        box-shadow: 0 8px 32px rgb(0 0 0 / .6);
    }

    .floating-tabs .tab-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: var(--text-muted-color);
        background: transparent;
        text-decoration: none;
        transition: color .2s ease, background-color .2s ease;

        svg {
            width: 22px;
            height: 22px;
            stroke-width: 2;
        }

        &:hover {
            color: var(--text-color);
            background: var(--surface-color-3);
        }

        &.active {
            color: var(--bg-color);
            background: var(--color);
        }
    }

    body .window-wrapper .layout {
        padding-inline: var(--padding-2);
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }
}