/* ============================================================
   PROSPIRA ADMIN — SIGNAL DESIGN SYSTEM
   Editorial-telemetry hybrid: Fraunces serif x JetBrains Mono
   Warm paper palette + amber primary / azure blue / moss / crimson
   ============================================================ */

/* Focus highlight — applied to a card after deep-link navigation from the
   /dashboard atlas. Three soft pulses then a smooth fade-out (no abrupt
   snap-off at the end). `forwards` keeps the end state (transparent) until
   JS removes the class. Used on .session-card and .license-card. */
.focus-highlight {
    position: relative;
    z-index: 5;
    animation: focus-flash 3.6s ease-out forwards;
}
@keyframes focus-flash {
    0% {
        box-shadow: 0 0 0 0 transparent, 0 0 0 transparent;
    }
    6% {
        box-shadow: 0 0 0 2px var(--amber),
                    0 0 56px color-mix(in srgb, var(--amber) 70%, transparent);
    }
    20%, 50%, 80% {
        box-shadow: 0 0 0 1px var(--amber),
                    0 0 24px color-mix(in srgb, var(--amber) 35%, transparent);
    }
    35%, 65% {
        box-shadow: 0 0 0 2px var(--amber),
                    0 0 48px color-mix(in srgb, var(--amber) 60%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 transparent, 0 0 0 transparent;
    }
}

iconify-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    color: inherit;
    flex-shrink: 0;
}

:root {
    /* paper / ink */
    --paper:        #0b0b0d;
    --paper-2:      #131216;
    --paper-3:      #1a1920;
    --paper-4:      #22202a;
    --ink:          #e9e4d8;
    --ink-dim:      #8a8578;
    --ink-faint:    #4a4638;
    --ink-white:    #ffffff;

    /* accents */
    --amber:        #ffb86b;
    --amber-dim:    #b8834a;
    --amber-soft:   rgba(255, 184, 107, 0.08);
    --azure:        #7aa2f7;
    --azure-dim:    #5b7fc7;
    --azure-soft:   rgba(122, 162, 247, 0.1);
    --moss:         #a3c585;
    --moss-dim:     #6a8a4e;
    --crimson:      #ff6b5c;
    --crimson-dim:  #b04a3e;
    --violet:       #c097d9;

    /* rules */
    --rule:         rgba(233, 228, 216, 0.08);
    --rule-bold:    rgba(233, 228, 216, 0.18);
    --rule-azure:   rgba(122, 162, 247, 0.22);

    /* layout */
    --container:    1620px;
    --radius-sm:    2px;
    --radius-md:    4px;
    --radius-lg:    6px;

    /* fonts */
    --font-serif:   'Fraunces', 'Times New Roman', serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* motion easings */
    --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-snap:  cubic-bezier(0.5, 0, 0, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: var(--paper);
    color-scheme: dark;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 14px;
    font-feature-settings: "ss01", "ss02", "cv06", "zero";
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

/* scanlines overlay — very subtle CRT flavor */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 184, 107, 0.012) 0px,
        rgba(255, 184, 107, 0.012) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
}

/* noise grain — ultra subtle paper texture */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle at 20% 10%, rgba(122, 162, 247, 0.06) 0%, transparent 45%),
                      radial-gradient(circle at 80% 90%, rgba(255, 184, 107, 0.04) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--amber); color: var(--paper); }

/* scrollbars */
/* Scrollbar styling — split by engine so Firefox doesn't warn about
   ::-webkit-* selectors it can't parse. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--rule-bold) transparent;
}
/* Webkit-only scrollbar pseudo-elements. Browsers that don't support them
   ignore these rules per CSS error recovery — no @supports wrapper needed,
   and the wrapper itself was emitting a "selector ignored" warning in Firefox
   because `selector(::-webkit-scrollbar)` is a non-standard probe. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-bold); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--amber-dim); }

/* ========================================================
   LAYOUT
   ======================================================== */

.container {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 1.5rem 2.5rem 4rem;
}

.bg-gradient { display: none; }

/* ========================================================
   HEADER — stacked: strip on top, wordmark + nav below
   ======================================================== */

header {
    margin-bottom: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    display: block;
}

.sig-topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.55rem 1.25rem;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 1.25rem;
}
.sig-topbar b { color: var(--amber); font-weight: 500; letter-spacing: 0.1em; }
.sig-topbar .az { color: var(--azure); }
.sig-topbar .spacer { flex: 1; }

.sig-topbar .live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--moss);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--moss);
    animation: live-pulse 1.6s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 0.55rem;
    position: relative;
    top: -2px;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.65); }
}

.sig-topbar .cursor::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 12px;
    background: var(--amber);
    box-shadow: 0 0 6px color-mix(in srgb, var(--amber) 60%, transparent);
    margin-left: 0.45rem;
    vertical-align: middle;
    position: relative;
    top: -1px;
    animation: cursor-blink 1.05s steps(2, end) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* masthead row */
.sig-masthead {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 1.1rem 1.25rem;
    background: var(--paper-2);
    border: 1px solid var(--rule-bold);
    border-top: 1px solid var(--amber-dim);
    position: relative;
}

.sig-masthead::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 60px; height: 1px;
    background: var(--amber);
    box-shadow: 0 0 8px var(--amber);
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: inherit;
    text-decoration: none;
}

.logo {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--amber), var(--amber-dim));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 3px;
    box-shadow: 0 0 0 1px var(--rule-bold), 0 0 20px rgba(255, 184, 107, 0.15);
}
.logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 2px; }

.logo-text {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.55rem;
    letter-spacing: -0.025em;
    color: var(--ink);
    font-variation-settings: "opsz" 144, "SOFT" 50;
    line-height: 1;
}
.logo-text::after {
    content: ' · Admin';
    color: var(--amber);
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

/* nav */
.nav-links {
    display: flex;
    gap: 0;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.nav-link {
    padding: 0.55rem 0.95rem;
    color: var(--ink-dim);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.25s;
    position: relative;
}
.nav-link :is(i, iconify-icon) { font-size: 0.9rem; opacity: 0.65; }
.nav-link:hover { color: var(--ink); }
.nav-link:hover :is(i, iconify-icon) { opacity: 1; color: var(--amber); }

.nav-link.active {
    color: var(--amber);
    border-bottom-color: var(--amber);
}
.nav-link.active :is(i, iconify-icon) { opacity: 1; color: var(--amber); }
.nav-link.active::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px; height: 3px;
    background: var(--amber);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--amber);
}

/* header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}
.search-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule-bold);
    padding: 0.45rem 0.5rem 0.45rem 1.75rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    width: 180px;
    transition: border-color 0.25s, color 0.25s;
    letter-spacing: 0.02em;
}
.search-input::placeholder { color: var(--ink-faint); font-style: italic; }
.search-input:focus {
    outline: none;
    border-bottom-color: var(--azure);
    color: var(--azure);
}
.search-icon {
    position: absolute;
    left: 0.25rem;
    color: var(--ink-faint);
    font-size: 0.95rem;
    pointer-events: none;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid var(--moss-dim);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--moss);
    font-weight: 500;
    white-space: nowrap;
}
.status-dot {
    width: 6px; height: 6px;
    background: var(--moss);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--moss);
    animation: live-pulse 2s infinite;
}

/* ========================================================
   HERO / PAGE HEADER
   ======================================================== */

.sig-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: end;
    padding: 1.75rem 0 2.25rem;
    border-bottom: 1px solid var(--rule-bold);
    margin-bottom: 2.25rem;
}

.sig-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.sig-eyebrow.az { color: var(--azure); }
.sig-eyebrow::before {
    content: '';
    width: 32px;
    height: 1px;
    background: currentColor;
}

.sig-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.5rem, 5.5vw, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--ink);
    font-variation-settings: "opsz" 144, "SOFT" 50;
}
.sig-title em {
    font-style: italic;
    font-weight: 500;
    color: var(--amber);
    font-variation-settings: "opsz" 144, "SOFT" 100;
}
.sig-title em.az { color: var(--azure); }

.sig-deck {
    margin-top: 1.1rem;
    font-size: 0.85rem;
    color: var(--ink-dim);
    max-width: 48ch;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* KPI rail */
.sig-kpis {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(110px, 1fr);
    gap: 0;
    border-left: 1px solid var(--rule-bold);
}

.sig-kpi {
    padding: 0.9rem 1.1rem;
    border-right: 1px solid var(--rule-bold);
    border-top: 1px solid var(--rule-bold);
    border-bottom: 1px solid var(--rule-bold);
    min-width: 110px;
}

.sig-kpi-label {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 0.4rem;
}

.sig-kpi-value {
    font-family: var(--font-serif);
    font-size: 2.05rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variation-settings: "opsz" 144;
    font-variant-numeric: tabular-nums;
}
.sig-kpi-value.ok  { color: var(--moss); }
.sig-kpi-value.err { color: var(--crimson); }
.sig-kpi-value.amb { color: var(--amber); }
.sig-kpi-value.az  { color: var(--azure); }

/* simpler version — stat cards used sometimes (fallback grid) */
.stats-grid,
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    margin-bottom: 2rem;
    border-left: 1px solid var(--rule-bold);
}
.stat-card {
    padding: 1rem 1.2rem;
    border-right: 1px solid var(--rule-bold);
    border-top: 1px solid var(--rule-bold);
    border-bottom: 1px solid var(--rule-bold);
    background: var(--paper-2);
}
.stat-value {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variation-settings: "opsz" 144;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.45rem;
}
.stat-value.blue, .stat-value.az { color: var(--azure); }
.stat-value.green, .stat-value.ok { color: var(--moss); }
.stat-value.red, .stat-value.err { color: var(--crimson); }
.stat-value.yellow, .stat-value.amb { color: var(--amber); }
.stat-label {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

/* ========================================================
   CONTROL RACK — filters, underline inputs
   ======================================================== */

/* Active-filter chip — visible on /logs when arrived via Bridge focus CTA
   `/logs?machine=<name>`. Sits above the .sig-rack filter row to telegraph
   "you're filtering by a specific machine; click × to clear". */
.logs-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.7rem 0.4rem 0.85rem;
    margin: 1rem 0 0.4rem;
    border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--rule-bold));
    border-radius: 999px;
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--amber);
    box-shadow: 0 0 14px -4px color-mix(in srgb, var(--amber) 35%, transparent);
}
.logs-active-filter[hidden] { display: none; }
.logs-active-filter .lbl {
    color: var(--ink-faint);
    font-weight: 400;
}
.logs-active-filter .machine-name {
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
}
.logs-active-filter .clear {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--ink-faint);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.25rem;
    transition: color 160ms ease, transform 160ms ease;
    margin-left: 0.1rem;
}
.logs-active-filter .clear:hover {
    color: var(--crimson);
    transform: scale(1.15);
}

.sig-rack {
    display: grid;
    gap: 2rem;
    padding: 1.25rem 0 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--rule);
    align-items: end;
}

.sig-field {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
}
.sig-field:last-child { margin-bottom: 0; }
.sig-field label {
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.sig-field input,
.sig-field select,
.sig-field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule-bold);
    padding: 0.5rem 0 0.5rem 0;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    transition: border-color 0.25s, color 0.25s;
    width: 100%;
}
.sig-field textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.55;
}
.sig-field input:focus,
.sig-field select:focus,
.sig-field textarea:focus {
    outline: none;
    border-bottom-color: var(--azure);
    color: var(--azure);
}
.sig-field input::placeholder,
.sig-field textarea::placeholder {
    color: var(--ink-faint);
    font-style: italic;
}

/* ========================================================
   SELECT — unified pretty dropdown for ALL <select>
   ======================================================== */
.sig-field select,
.sig-select,
.modal-select,
select.filter-select,
.filter-select,
.sig-rack select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--paper-3);
    background-image:
        linear-gradient(180deg, transparent 0%, rgba(122,162,247,0.04) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237aa2f7' stroke-width='2.5' stroke-linecap='square' stroke-linejoin='miter'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 0.85rem center;
    background-size: 100% 100%, 12px 12px;
    border: 1px solid var(--rule-bold);
    border-radius: 0;
    padding: 0.6rem 2.2rem 0.6rem 0.9rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    cursor: pointer;
    transition: border-color 0.18s, background-color 0.18s, color 0.18s, box-shadow 0.18s;
    width: 100%;
    line-height: 1.3;
}
.sig-field select { border-bottom: 1px solid var(--rule-bold); }

.sig-field select:hover,
.sig-select:hover,
.modal-select:hover,
.filter-select:hover,
.sig-rack select:hover {
    border-color: var(--azure);
    color: var(--azure);
    background-color: color-mix(in srgb, var(--azure) 6%, var(--paper-3));
}
.sig-field select:focus,
.sig-select:focus,
.modal-select:focus,
.filter-select:focus,
.sig-rack select:focus {
    outline: none;
    border-color: var(--azure);
    color: var(--azure);
    box-shadow: 0 0 0 1px var(--azure), 0 6px 18px rgba(122,162,247,0.18);
    background-image:
        linear-gradient(180deg, transparent 0%, rgba(122,162,247,0.08) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237aa2f7' stroke-width='2.5' stroke-linecap='square' stroke-linejoin='miter'><polyline points='18 15 12 9 6 15'/></svg>");
}

.sig-field select option,
.sig-select option,
.modal-select option,
.filter-select option,
.sig-rack select option {
    background-color: var(--paper-2);
    color: var(--ink);
    padding: 0.5rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
}
.sig-field select option:checked,
.sig-select option:checked,
.modal-select option:checked,
.filter-select option:checked,
.sig-rack select option:checked {
    background: linear-gradient(0deg, var(--azure), var(--azure));
    color: var(--paper);
    font-weight: 600;
}
.sig-field select option:disabled,
.sig-select option:disabled,
.modal-select option:disabled,
.filter-select option:disabled,
.sig-rack select option:disabled {
    color: var(--ink-faint);
    font-style: italic;
}

/* ========================================================
   BUTTONS
   ======================================================== */

.sig-btn,
.btn {
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink);
    padding: 0.6rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    border-radius: 0;
    line-height: 1;
}
.sig-btn:hover,
.btn:hover {
    border-color: var(--ink);
    color: var(--ink-white);
}

.sig-btn-primary,
.btn-primary {
    background: transparent;
    border-color: var(--amber);
    color: var(--amber);
}
.sig-btn-primary:hover,
.btn-primary:hover {
    background: var(--amber);
    color: var(--paper);
    border-color: var(--amber);
    letter-spacing: 0.25em;
}
.sig-btn-primary::before,
.btn-primary::before { content: '→ '; }

.sig-btn-azure,
.btn-reply {
    border-color: var(--azure);
    color: var(--azure);
}
.sig-btn-azure:hover,
.btn-reply:hover {
    background: var(--azure);
    color: var(--paper);
    border-color: var(--azure);
}

.sig-btn-success {
    border-color: var(--moss);
    color: var(--moss);
}
.sig-btn-success:hover {
    background: var(--moss);
    color: var(--paper);
}

.sig-btn-danger,
.btn-danger {
    border-color: var(--crimson);
    color: var(--crimson);
}
.sig-btn-danger:hover,
.btn-danger:hover {
    background: var(--crimson);
    color: var(--paper);
}

.sig-btn-ghost,
.btn-secondary {
    background: transparent;
    border-color: var(--rule-bold);
    color: var(--ink-dim);
}
.sig-btn-ghost:hover,
.btn-secondary:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* `-err` / `-ok` semantic aliases used throughout templates (delete + force
   cleanup modals, approve modal, error pages). Aliased to crimson/moss so
   destructive vs constructive actions keep their visual color cue. The
   variants are honored even when disabled so the "type to confirm" gate
   still reads as crimson while disabled. */
.sig-btn-err {
    border-color: var(--crimson);
    color: var(--crimson);
}
.sig-btn-err:not(:disabled):hover {
    background: var(--crimson);
    color: var(--paper);
}
.sig-btn-err:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.sig-btn-ok {
    border-color: var(--moss);
    color: var(--moss);
}
.sig-btn-ok:hover {
    background: var(--moss);
    color: var(--paper);
}

.sig-term-err {
    border-color: color-mix(in srgb, var(--crimson) 35%, var(--rule-bold));
}
.sig-term-ok {
    border-color: color-mix(in srgb, var(--moss) 35%, var(--rule-bold));
}

/* icon-only button */
.sig-icon-btn,
.icon-btn {
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink-dim);
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0;
}
.sig-icon-btn:hover,
.icon-btn:hover {
    border-color: var(--amber);
    color: var(--amber);
}

/* compact ghost action button used across ledgers */
.sig-view,
.action-btn {
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink-dim);
    padding: 0.4rem 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0;
    text-decoration: none;
}
.sig-view:hover,
.action-btn:hover {
    color: var(--amber);
    border-color: var(--amber);
}
.action-btn.delete,
.action-btn.btn-delete,
.action-btn.danger { border-color: var(--crimson); color: var(--crimson); }
.action-btn.delete:hover,
.action-btn.btn-delete:hover,
.action-btn.danger:hover { background: var(--crimson); color: var(--paper); }
.action-btn.approve,
.action-btn.activate,
.action-btn.reactivate { border-color: var(--moss); color: var(--moss); }
.action-btn.approve:hover,
.action-btn.activate:hover,
.action-btn.reactivate:hover { background: var(--moss); color: var(--paper); }
.action-btn.warn,
.action-btn.warning { border-color: var(--amber); color: var(--amber); }
.action-btn.warn:hover,
.action-btn.warning:hover { background: var(--amber); color: var(--paper); }

/* filter tab pills */
.filter-btn,
.filter-tab {
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink-dim);
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 0;
    margin-right: -1px;
}
.filter-btn:hover,
.filter-tab:hover {
    color: var(--ink);
    border-color: var(--ink-dim);
    z-index: 2;
}
.filter-btn.active,
.filter-tab.active {
    background: var(--amber);
    color: var(--paper);
    border-color: var(--amber);
    z-index: 3;
}

.filter-tabs {
    display: inline-flex;
    flex-wrap: wrap;
}

.controls-bar,
.controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}
.controls-left,
.controls-right {
    display: flex;
    gap: 0;
    align-items: center;
    flex-wrap: wrap;
}

/* ========================================================
   DATA TABLE — LEDGER
   ======================================================== */

.sig-ledger-head,
.sig-section-eyebrow,
.logs-table-container > div.sig-ledger-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;                          /* was 0.75rem — breath under the new stripe */
    padding-bottom: 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}
.sig-ledger-head .lbl,
.sig-section-eyebrow .lbl { color: var(--ink-dim); }
.sig-ledger-head b { color: var(--amber); font-weight: 500; }
/* On narrow viewports the secondary label (e.g. "newest first" / "three
   categories") gets pushed to a new line by the wrap above. Tighten its
   tracking + drop letter-spacing slightly so it doesn't over-extend. */
@media (max-width: 540px) {
    .sig-ledger-head,
    .sig-section-eyebrow {
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        gap: 0.3rem 0.6rem;
    }
    /* Make the right-aligned secondary label start at the left when wrapped
       so it reads as a continuation, not as a label still trying to be
       right-aligned at half-width. */
    .sig-ledger-head > :last-child,
    .sig-section-eyebrow > :last-child {
        text-align: left;
        margin-left: 0;
    }
}

/* Section eyebrow framing the PKG cluster + the version ledger.
   The pilcrow (¶) on the left signals "narrative break" — same
   typographic mark used by the wiki's outline / map labels for
   visual continuity across the dashboard. */
.sig-section-eyebrow {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}
.sig-section-eyebrow .lbl:first-child {
    color: var(--amber);
    font-weight: 500;
}
/* Live count pill (count of packages or versions) — small mono badge
   on the right side of the eyebrow row. */
.pkg-eyebrow-count,
.ledger-eyebrow-count {
    font-family: var(--font-mono);
    color: var(--ink-faint) !important;
    letter-spacing: 0.18em;
}

.logs-table-container {
    background: transparent;
    padding: 0;
    border: none;
}

.table-wrapper {
    overflow-x: auto;
    /* Edge-fade ONLY for actual horizontal overflow. Both layers paper-color
       (no hue), so when the table fits there's nothing to see. The `local`
       background-attachment makes the paper layers travel WITH the row content
       — they cover the row's last/first ~28px when scrolled, hiding cell edges
       behind a clean paper fade with no color tint.
       Earlier this had two extra `scroll` layers tinted ink-faint + amber that
       were always visible (even with no overflow), bleeding hue stripes into
       every row's edge — operator reported as "ugly side gradients". */
    background:
        linear-gradient(to right, var(--paper-2), transparent 28px) 0 0 / 28px 100% no-repeat local,
        linear-gradient(to left,  var(--paper-2), transparent 28px) 100% 0 / 28px 100% no-repeat local;
    -webkit-overflow-scrolling: touch;
}
.table-wrapper::-webkit-scrollbar { height: 6px; }
.table-wrapper::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--amber) 40%, transparent);
}

.sig-ledger,
.logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.sig-ledger thead th,
.logs-table thead th {
    text-align: left;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
    font-weight: 500;
    padding: 0.75rem 1rem 0.75rem 0;
    border-top: 1px solid var(--rule-bold);
    border-bottom: 1px solid var(--rule-bold);
    background: var(--paper-2);
}
.sig-ledger thead th:first-child,
.logs-table thead th:first-child { padding-left: 1.25rem; }

.sig-ledger tbody td,
.logs-table tbody td {
    padding: 0.75rem 1rem 0.75rem 0;          /* tightened from 0.9rem — denser ledger feel */
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
    color: var(--ink);
}
.sig-ledger tbody td:first-child,
.logs-table tbody td:first-child { padding-left: 1.25rem; }

.sig-ledger tbody tr,
.logs-table tbody tr {
    transition: background 0.18s;
}
/* Even-row stripe — quiet ledger-book rhythm. paper-3 at 35% mix is just
   visible enough to differentiate adjacent rows without competing with
   the hover state. */
.sig-ledger tbody tr:nth-child(even),
.logs-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--paper-3) 35%, transparent);
}
.sig-ledger tbody tr:hover,
.logs-table tbody tr:hover {
    /* Strong enough to win over the even-row stripe */
    background: color-mix(in srgb, var(--amber) 8%, transparent);
}
.sig-ledger tbody tr:hover td:first-child,
.logs-table tbody tr:hover td:first-child {
    box-shadow: inset 2px 0 0 var(--amber);
}

/* Failed-row crimson left rail — JS adds .is-failed when status=='failed' or
   error_count > 0. 3px inset rail on the leftmost cell so the row jumps out
   even from a quarter-zoom thumbnail. */
.sig-ledger tbody tr.is-failed td:first-child,
.logs-table tbody tr.is-failed td:first-child {
    box-shadow: inset 3px 0 0 var(--crimson);
}
/* Failed-row hover — override the generic amber hover with a crimson tint
   so the failure semantic stays dominant. Earlier the amber hover bg
   layered with a localized crimson inner-glow on first-cell only, creating
   an ugly gradient seam between cells. Now: clean uniform crimson 6%
   across the whole row + retain the rail. */
.sig-ledger tbody tr.is-failed:hover,
.logs-table tbody tr.is-failed:hover {
    background: color-mix(in srgb, var(--crimson) 7%, transparent);
}
.sig-ledger tbody tr.is-failed:hover td:first-child,
.logs-table tbody tr.is-failed:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--crimson);  /* keep rail, no extra glow */
}

.sig-id, .row-num {
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}
.sig-comp {
    color: var(--ink);
    font-weight: 500;
}
.sig-user {
    color: var(--ink-dim);
    font-size: 0.78rem;
}
.sig-win {
    color: var(--ink-dim);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
/* Build cell — split name/id treatment. The name carries OS+version
   (e.g. "Windows 11 26H1") in dim ink for context; the build number gets
   a tabular-num azure pill — operators scan it constantly to identify
   exact build, so it earns a chip-style emphasis. */
.build-name {
    color: var(--ink-dim);
    font-size: 0.78rem;
    margin-right: 0.5rem;
}
.build-id {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    color: var(--azure);
    padding: 0.08rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--azure) 30%, transparent);
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
    vertical-align: 0.05em;
    background: color-mix(in srgb, var(--azure) 4%, transparent);
}
.sig-ts, .ts {
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    color: var(--ink-faint);                     /* was --ink-dim, fainter so time pops */
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.sig-ts b, .ts b {
    color: var(--amber);
    font-weight: 600;                            /* was 500 */
    margin-left: 0.5em;
    font-variant-numeric: tabular-nums;
}

/* error cell — uniform weight across hot/zero so digits don't bounce.
   Earlier `.hot` had `font-weight: 700` while `.zero` had inherited regular
   weight; bold mono digits sit on a slightly higher baseline than regular
   ones in JetBrains Mono, which made the red `01` visibly higher than the
   gray `00` in adjacent rows. Color alone is enough signal — color =
   crimson reads instantly without typographic weight. Tabular-nums on
   the base class keeps every digit fixed-width. */
.sig-err {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-weight: 500;
}
.sig-err.hot  { color: var(--crimson); }
.sig-err.zero { color: var(--ink-faint); }

/* ========================================================
   STATUS INDICATORS
   ======================================================== */

.sig-stat,
.status-badge {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    border: none;
    padding: 0;
    background: transparent;
}
.sig-stat::before,
.status-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sig-stat.success, .status-badge.status-success, .sig-stat.active, .status-badge.status-active, .sig-stat.approved, .status-badge.status-approved, .sig-stat.completed, .status-badge.status-completed, .sig-stat.closed, .status-badge.status-closed { color: var(--moss); }
.sig-stat.success::before, .status-badge.status-success::before, .sig-stat.active::before, .status-badge.status-active::before, .sig-stat.approved::before, .status-badge.status-approved::before, .sig-stat.completed::before, .status-badge.status-completed::before, .sig-stat.closed::before, .status-badge.status-closed::before { background: var(--moss); box-shadow: 0 0 8px var(--moss); }

.sig-stat.failed, .status-badge.status-failed, .sig-stat.revoked, .status-badge.status-revoked, .sig-stat.blocked, .status-badge.status-blocked, .sig-stat.open, .status-badge.status-open { color: var(--crimson); }
.sig-stat.failed::before, .status-badge.status-failed::before, .sig-stat.revoked::before, .status-badge.status-revoked::before, .sig-stat.blocked::before, .status-badge.status-blocked::before, .sig-stat.open::before, .status-badge.status-open::before { background: var(--crimson); box-shadow: 0 0 8px var(--crimson); }

.sig-stat.pending, .status-badge.status-pending, .sig-stat.draft, .status-badge.status-draft, .sig-stat.in_progress, .status-badge.status-in_progress, .sig-stat.warning, .status-badge.status-warning { color: var(--amber); }
.sig-stat.pending::before, .status-badge.status-pending::before, .sig-stat.draft::before, .status-badge.status-draft::before, .sig-stat.in_progress::before, .status-badge.status-in_progress::before, .sig-stat.warning::before, .status-badge.status-warning::before { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

.sig-stat.info, .status-badge.status-info, .sig-stat.unblocked, .status-badge.status-unblocked { color: var(--azure); }
.sig-stat.info::before, .status-badge.status-info::before, .sig-stat.unblocked::before, .status-badge.status-unblocked::before { background: var(--azure); box-shadow: 0 0 8px var(--azure); }

/* Runner: Layer 1 resume-approval states.
   awaiting_resume = amber-pulsing (operator action required, like pending).
   resume_approved = moss (green-lit, runner allowed to continue).
   canceled = dim ink (terminal, no longer relevant).
   force_cleanup = crimson (panic-button state, see Layer 3). */
.sig-stat.awaiting_resume, .status-badge.status-awaiting_resume { color: var(--amber); animation: chip-pulse 1.6s ease-in-out infinite; }
.sig-stat.awaiting_resume::before, .status-badge.status-awaiting_resume::before { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.sig-stat.resume_approved, .status-badge.status-resume_approved { color: var(--moss); }
.sig-stat.resume_approved::before, .status-badge.status-resume_approved::before { background: var(--moss); box-shadow: 0 0 8px var(--moss); }
.sig-stat.canceled, .status-badge.status-canceled { color: var(--ink-dim); }
.sig-stat.canceled::before, .status-badge.status-canceled::before { background: var(--ink-dim); }
.sig-stat.force_cleanup, .status-badge.status-force_cleanup { color: var(--crimson); }
.sig-stat.force_cleanup::before, .status-badge.status-force_cleanup::before { background: var(--crimson); box-shadow: 0 0 10px var(--crimson); }
@keyframes chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Base for small inline metadata badges on a session card's top row.
   Variants below add color + size + border. */
.session-pill {
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    margin-left: 0.4rem;
    user-select: none;
}

/* ↻ auto-resume marker — operator pre-approved post-reboot resume. */
.session-auto-resume {
    justify-content: center;
    font-size: 0.85rem;
    color: var(--amber);
    cursor: help;
}

/* Last-seen heartbeat indicator — fresh = moss, stale (offline-ish) = dim
   ink. Title-attribute heuristic picks up minute/hour/offline labels. */
.session-last-seen {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--moss);
    padding: 0.1rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--moss) 30%, var(--rule));
    border-radius: 2px;
    background: color-mix(in srgb, var(--moss) 8%, transparent);
}
.session-last-seen[title*="m ago"],
.session-last-seen[title*="h ago"],
.session-last-seen[title*="offline"] {
    color: var(--ink-dim);
    border-color: var(--rule);
    background: transparent;
}

/* generic badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid var(--rule-bold);
    color: var(--ink-dim);
    border-radius: 0;
}
.badge-primary { border-color: var(--azure); color: var(--azure); }
.badge-success { border-color: var(--moss); color: var(--moss); }
.badge-error, .badge-danger { border-color: var(--crimson); color: var(--crimson); }
.badge-warning { border-color: var(--amber); color: var(--amber); }
.badge-open { border-color: var(--crimson); color: var(--crimson); }
.badge-in_progress { border-color: var(--amber); color: var(--amber); }
.badge-closed { border-color: var(--moss); color: var(--moss); }
.badge-replied { border-color: var(--azure); color: var(--azure); }
.badge-cli { border-color: var(--violet); color: var(--violet); }
.badge-desktop { border-color: var(--azure); color: var(--azure); }

/* ========================================================
   PAGINATION
   ======================================================== */

.sig-page,
.pagination {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    flex-wrap: wrap;
}
.sig-page button,
.pagination button,
.page-btn {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    padding: 0.5rem 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 36px;
    font-variant-numeric: tabular-nums;
    border-radius: 0;
}
.sig-page button:hover,
.pagination button:hover,
.page-btn:hover {
    border-color: var(--amber);
    color: var(--amber);
}
.sig-page button.active,
.pagination button.active,
.page-btn.active {
    background: var(--amber);
    color: var(--paper);
    border-color: var(--amber);
    font-weight: 700;
}
.sig-page .ell { color: var(--ink-faint); padding: 0 0.25rem; }

/* ========================================================
   LOADING / EMPTY
   ======================================================== */

.loading,
.sig-loading,
.empty-state,
.sig-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--ink-dim);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}
.empty-state :is(i, iconify-icon),
.sig-empty :is(i, iconify-icon),
.sig-loading :is(i, iconify-icon) {
    font-size: 2rem;
    color: var(--ink-faint);
    margin-bottom: 0.5rem;
    display: block;
}
.empty-state p { margin: 0; }

.sig-loading::after {
    content: '...';
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: dots 1.4s steps(4) infinite;
}
@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

.spinner {
    width: 22px;
    height: 22px;
    border: 1px solid var(--rule-bold);
    border-top-color: var(--amber);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 0.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================================
   CARDS / SECTIONS
   ======================================================== */

.sig-card,
.computer-card,
.license-card,
.update-card,
.session-card,
.ticket-card {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    padding: 1.4rem 1.5rem;
    margin-bottom: 0.75rem;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
    border-radius: 0;
}
.sig-card:hover,
.computer-card:hover,
.license-card:hover,
.update-card:hover,
.session-card:hover,
.ticket-card:hover {
    border-color: var(--rule-bold);
    background: var(--paper-3);
}

/* left-edge accent */
.sig-card::before,
.computer-card::before,
.license-card::before,
.update-card::before,
.session-card::before,
.ticket-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: transparent;
    transition: background 0.2s;
}
.sig-card:hover::before,
.computer-card:hover::before,
.license-card:hover::before,
.update-card:hover::before,
.session-card:hover::before,
.ticket-card:hover::before {
    background: var(--amber);
}

.session-card.pending-highlight::before {
    background: var(--amber);
    box-shadow: 0 0 12px var(--amber);
}

/* section header */
.section-header,
.panel-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
}
.section-title,
.panel-section-title {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variation-settings: "opsz" 144, "SOFT" 50;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.section-title :is(i, iconify-icon),
.panel-section-title :is(i, iconify-icon) {
    color: var(--amber);
    font-size: 1.3rem;
}
.panel-section-subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.panel-section,
.computers-section,
.installer-section {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    /* Default category color — overridden per-section by .pkg-msi /
       .pkg-resources / .pkg-tools below for color-coded identification. */
    --pkg-color: var(--amber);
    border-left: 3px solid var(--pkg-color);
    position: relative;
    transition: border-left-color 200ms ease;
}
/* Per-package category accents — each PKG section gets a distinct
   color so the cluster reads as three related-but-different shipments
   rather than three identical cards. .sig-id badge + left-edge strip
   pick up the same hue. */
.installer-section.pkg-msi       { --pkg-color: var(--azure); }
.installer-section.pkg-resources { --pkg-color: var(--moss); }
.installer-section.pkg-tools     { --pkg-color: var(--violet); }
.installer-section.pkg-msi       .sig-id { color: var(--azure); }
.installer-section.pkg-resources .sig-id { color: var(--moss); }
.installer-section.pkg-tools     .sig-id { color: var(--violet); }

/* detail grid inside cards */
.license-details,
.update-details,
.session-details,
.installer-info,
.computer-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem 1.25rem;
    margin-bottom: 0.9rem;
    padding: 0.85rem 0 0.25rem;
    border-top: 1px solid var(--rule);
}

.detail-item,
.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.detail-label,
.info-label {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.detail-label :is(i, iconify-icon),
.info-label :is(i, iconify-icon) { opacity: 0.7; font-size: 0.85rem; }
.detail-value,
.info-value {
    color: var(--ink);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    word-break: break-word;
}

/* card header row */
.license-header,
.update-header,
.session-header,
.ticket-header,
.computer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.license-code,
.update-version,
.session-id,
.ticket-id,
.computer-name {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: var(--ink);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.update-version,
.license-code {
    color: var(--amber);
    letter-spacing: 0.12em;
    font-weight: 700;
}
.ticket-id { color: var(--azure); }

/* action strip inside card */
.license-actions,
.update-actions,
.session-actions,
.ticket-actions {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    padding-top: 0.9rem;
    margin-top: 0.9rem;
    border-top: 1px solid var(--rule);
}

/* runner session action buttons — distinct variants, clear separation */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--paper-3);
    color: var(--ink);
    border: 1px solid var(--rule-bold);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    position: relative;
}
.btn-action :is(i, iconify-icon) { font-size: 0.95rem; }
.btn-action:hover {
    background: var(--paper-2);
    border-color: var(--ink-dim);
    color: var(--ink);
    transform: translateY(-1px);
}
.btn-action:active { transform: translateY(0); }

.btn-action.approve {
    background: color-mix(in srgb, var(--moss) 12%, transparent);
    border-color: color-mix(in srgb, var(--moss) 55%, var(--rule-bold));
    color: var(--moss);
}
.btn-action.approve:hover {
    background: color-mix(in srgb, var(--moss) 22%, transparent);
    border-color: var(--moss);
}

.btn-action.danger {
    background: color-mix(in srgb, var(--crimson) 10%, transparent);
    border-color: color-mix(in srgb, var(--crimson) 50%, var(--rule-bold));
    color: var(--crimson);
}
.btn-action.danger:hover {
    background: color-mix(in srgb, var(--crimson) 22%, transparent);
    border-color: var(--crimson);
}

.btn-action.warn {
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border-color: color-mix(in srgb, var(--amber) 55%, var(--rule-bold));
    color: var(--amber);
}
.btn-action.warn:hover {
    background: color-mix(in srgb, var(--amber) 22%, transparent);
    border-color: var(--amber);
}

.btn-action.azure {
    background: color-mix(in srgb, var(--azure) 12%, transparent);
    border-color: color-mix(in srgb, var(--azure) 55%, var(--rule-bold));
    color: var(--azure);
}
.btn-action.azure:hover {
    background: color-mix(in srgb, var(--azure) 22%, transparent);
    border-color: var(--azure);
}

/* ========================================================
   MODAL / TERMINAL PANE
   ======================================================== */

.modal:not(.sig-term),
.sig-modal,
.modal-overlay,
.delete-confirm-overlay,
.preview-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 10, 0.85);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
}
.modal.active,
.modal.show,
.sig-modal.active,
.modal-overlay.active,
.delete-confirm-overlay.active,
.preview-modal.show,
.delete-modal.show {
    display: flex;
    animation: fade 0.2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-content,
.sig-term,
.modal > .modal,
.modal-overlay > .modal,
.delete-confirm-modal,
.reactivate-confirm-modal,
.delete-modal-content,
.preview-content {
    width: 100%;
    max-width: 820px;
    max-height: 88vh;
    background: var(--paper-2);
    border: 1px solid var(--rule-bold);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,184,107,0.08);
    animation: slide 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
    overflow: hidden;
}
.modal-overlay > .modal.wide { max-width: 1100px; }
.preview-content { max-width: 1100px; }
.delete-modal-content { max-width: 520px; }
.delete-confirm-modal,
.reactivate-confirm-modal { max-width: 480px; margin-inline: auto; }

@keyframes slide { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* terminal-style top bar */
.modal-header,
.sig-term-bar,
.preview-header,
.delete-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule-bold);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.modal-header::before,
.sig-term-bar::before,
.preview-header::before {
    content: '● ● ●';
    letter-spacing: 0.3em;
    color: var(--rule-bold);
    margin-right: 0.5rem;
}
.sig-term-bar .dots {
    display: flex; gap: 0.4rem;
    margin-right: 0.25rem;
}
.sig-term-bar .dots span {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--rule-bold);
}
.sig-term-bar .dots span:first-child { background: var(--crimson); }
.sig-term-bar .dots span:nth-child(2) { background: var(--amber); }
.sig-term-bar .dots span:nth-child(3) { background: var(--moss); }
.sig-term-bar::before { display: none; }

.modal-title,
.preview-title,
.sig-term-bar .path,
.delete-modal-title {
    color: var(--ink-dim);
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.modal-title b,
.preview-title b,
.sig-term-bar .path b { color: var(--amber); font-weight: 500; }
.delete-modal-title { color: var(--crimson); }
.modal-title :is(i, iconify-icon) { color: var(--amber); }

.close-btn,
.preview-close,
.sig-term-bar .x {
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink-dim);
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s;
    border-radius: 0;
}
.close-btn:hover,
.preview-close:hover,
.sig-term-bar .x:hover {
    color: var(--crimson);
    border-color: var(--crimson);
}

/* modal body */
.modal-body,
.sig-term-body,
.preview-body,
.delete-modal-body {
    padding: 1.5rem;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--ink);
    flex: 1;
}

/* modal that's wrapped in modal-overlay (legacy pattern) */
.modal-overlay > .modal,
.delete-confirm-modal,
.reactivate-confirm-modal {
    padding: 0;
}
.modal-overlay > .modal > .modal-title,
.delete-confirm-modal > .modal-title,
.reactivate-confirm-modal > .modal-title {
    padding: 0.9rem 1.25rem;
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule-bold);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--amber);
}
.modal-overlay > .modal > .modal-field,
.modal-overlay > .modal > p,
.modal-overlay > .modal > .modal-actions,
.modal-overlay > .modal > input[type=hidden] ~ p,
.delete-confirm-modal > *:not(.modal-title),
.reactivate-confirm-modal > *:not(.modal-title) {
    padding: 0 1.25rem;
}
.modal-overlay > .modal > .modal-field:first-of-type { padding-top: 1.25rem; }
.modal-overlay > .modal > .modal-actions { padding: 1rem 1.25rem 1.25rem; }
.delete-confirm-modal > .modal-title { margin: 0; }
.delete-confirm-modal > *:first-child,
.reactivate-confirm-modal > *:first-child { padding: 0.9rem 1.25rem; }
.delete-confirm-modal > *:last-child,
.reactivate-confirm-modal > *:last-child { padding-bottom: 1.25rem; }

/* modal fields */
.modal-field {
    margin-bottom: 1rem;
}
.modal-label {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 0.5rem;
}
.modal-input,
.modal-textarea,
.form-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule-bold);
    padding: 0.55rem 0;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.88rem;
    transition: border-color 0.25s, color 0.25s;
    border-radius: 0;
}
.modal-textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.55;
}
.modal-input:focus,
.modal-textarea:focus,
.form-input:focus {
    outline: none;
    border-bottom-color: var(--azure);
    color: var(--azure);
}
.modal-input::placeholder,
.modal-textarea::placeholder,
.form-input::placeholder { color: var(--ink-faint); font-style: italic; }

/* modal actions / footer */
.modal-actions,
.modal-footer,
.confirm-actions,
.delete-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    flex-wrap: wrap;
}

.btn-modal {
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink);
    padding: 0.55rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0;
}
.btn-modal:hover { border-color: var(--ink); color: var(--ink-white); }
.btn-modal.primary { border-color: var(--amber); color: var(--amber); }
.btn-modal.primary:hover { background: var(--amber); color: var(--paper); }
.btn-modal.danger { border-color: var(--crimson); color: var(--crimson); }
.btn-modal.danger:hover { background: var(--crimson); color: var(--paper); }
.btn-modal.cancel { color: var(--ink-dim); }
.btn-modal.cancel:hover { color: var(--ink); }

/* log-content style (modal + log_detail page) */
.log-content,
.sig-term-body .log-content {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    tab-size: 2;
    -moz-tab-size: 2;
}
.sig-term-prompt {
    color: var(--amber);
    margin: 0 0 1.25rem;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.85rem;
}
.sig-term-prompt::before { content: '$ '; color: var(--moss); }

/* Selects inside themed terminal modals inherit the modal's accent color
   for focus / hover instead of the global azure. Otherwise a moss-themed
   "approve" modal lit up bright blue when the select was focused, which
   read as out-of-theme alarm. */
.sig-term-ok .sig-select:hover,
.sig-term-ok .sig-select:focus {
    border-color: var(--moss);
    color: var(--moss);
    background-color: color-mix(in srgb, var(--moss) 6%, var(--paper-3));
    box-shadow: 0 0 0 1px var(--moss),
                0 6px 18px color-mix(in srgb, var(--moss) 18%, transparent);
}
.sig-term-err .sig-select:hover,
.sig-term-err .sig-select:focus {
    border-color: var(--crimson);
    color: var(--crimson);
    background-color: color-mix(in srgb, var(--crimson) 6%, var(--paper-3));
    box-shadow: 0 0 0 1px var(--crimson),
                0 6px 18px color-mix(in srgb, var(--crimson) 18%, transparent);
}

/* Single-source checkbox row: input top-aligned with a multi-line label so
   long hint text wraps without dragging the checkbox off-axis. Used by the
   runner approve modal and any future opt-in flag with explanatory text. */
.sig-check {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.65rem;
    align-items: start;
    cursor: pointer;
    margin: 1.1rem 0 0.25rem;
    padding: 0.35rem 0;
    color: var(--ink);
    user-select: none;
}
.sig-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0.18rem 0 0;     /* nudges to the title baseline */
    cursor: pointer;
    accent-color: var(--moss);
}
.sig-check-text {
    display: block;
    line-height: 1.5;
}
.sig-check-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
}
.sig-check-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--ink-dim);
    max-width: 56ch;
}

/* H3 inside terminal-style modals — was browser-default before, which
   produced inconsistent line-height + margins. Match the editorial serif
   styling used by .installer-title for visual continuity. */
.modal-title-text {
    margin: 0 0 1.25rem;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.25;
    font-variation-settings: "opsz" 144, "SOFT" 50;
}

/* Tools modals — the shell prompt at the top of the body sits a touch
   lower than the default to give the title-bar dots/path room to breathe.
   Scoped via #IDs so other modals (uploadModal, deleteConfirmModal,
   deactivateConfirmModal) keep their existing rhythm. */
#toolsUploadModal .sig-term-prompt,
#toolDeleteConfirmModal .sig-term-prompt {
    margin-top: 0.6rem;
}
/* Subtler letter-spacing on the prompt itself so the long-form
   "tools rm --key" command reads as a coherent phrase, not a row of
   evenly-tracked chars. */
#toolsUploadModal .sig-term-prompt,
#toolDeleteConfirmModal .sig-term-prompt {
    letter-spacing: 0.02em;
    font-size: 0.82rem;
}

.sig-term-body .lvl,
.log-content .lvl {
    font-weight: 700;
    letter-spacing: 0.05em;
}
.lvl-s { color: var(--moss); }
.lvl-i { color: var(--azure); }
.lvl-w { color: var(--amber); }
.lvl-e { color: var(--crimson); }

/* ========================================================
   DELETE / CONFIRM MODAL SPECIFICS
   ======================================================== */

.delete-modal-icon {
    width: 44px; height: 44px;
    border: 1px solid var(--crimson);
    color: var(--crimson);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-right: 0.5rem;
}
.delete-modal-subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-top: 0.25rem;
}
.delete-modal-body { padding: 1.5rem 1.25rem; }

.delete-warning {
    border: 1px solid var(--crimson);
    background: rgba(255, 107, 92, 0.04);
    padding: 1rem;
    margin-bottom: 1rem;
}
.delete-warning-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--crimson);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.delete-warning-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.delete-warning-list li {
    display: flex;
    align-items: start;
    gap: 0.5rem;
    color: var(--ink-dim);
    font-size: 0.82rem;
    line-height: 1.5;
}
.delete-warning-list li :is(i, iconify-icon) { color: var(--crimson); margin-top: 0.15rem; flex-shrink: 0; }

.delete-stats {
    text-align: center;
    padding: 1rem;
    border: 1px solid var(--rule-bold);
    background: var(--paper-3);
    margin-bottom: 1rem;
}
.delete-stats-title,
.delete-stats-label {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.delete-stats-value {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.1;
    color: var(--crimson);
    font-variation-settings: "opsz" 144;
    font-variant-numeric: tabular-nums;
}
.btn-cancel,
.btn-delete-confirm {
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink);
    padding: 0.6rem 1.2rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.2s;
    border-radius: 0;
}
.btn-cancel:hover { color: var(--ink-white); border-color: var(--ink); }
.btn-delete-confirm { border-color: var(--crimson); color: var(--crimson); }
.btn-delete-confirm:hover { background: var(--crimson); color: var(--paper); }
.btn-delete-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

.warning-text,
.info-text {
    color: var(--ink-dim);
    font-size: 0.82rem;
    line-height: 1.6;
    padding: 0.75rem 0 1rem !important;
}
.info-text { color: var(--azure); }

.license-code-preview,
.version-preview,
.wp-preview,
.tool-preview {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    color: var(--amber);
    text-align: center;
    padding: 0.85rem !important;
    border: 1px dashed var(--amber-dim);
    background: var(--amber-soft);
    margin: 1.25rem 1.25rem 1rem !important;
    word-break: break-all;
}
.wp-preview { color: var(--azure); border-color: var(--azure-dim); background: var(--azure-soft); }
/* Tool delete: crimson tint signals the destructive context — visually pairs
   with the crimson title + warning-text in the toolDeleteConfirmModal.
   Slightly larger vertical padding + subtle inner glow gives the preview
   more weight as the focal element of the destructive prompt. Margin
   override tightens the gap to the warning-text below (the inherited 1rem
   plus warning's 0.75rem padding-top added up to a noticeable ~1.75rem
   void; 0.5rem keeps a clean break without feeling disconnected). */
.tool-preview {
    color: var(--crimson);
    border-color: var(--crimson-dim);
    background: color-mix(in srgb, var(--crimson) 6%, transparent);
    padding: 1.15rem 0.85rem !important;
    margin: 1.1rem 1.25rem 0.5rem !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--crimson) 8%, transparent),
        0 6px 24px -8px color-mix(in srgb, var(--crimson) 22%, transparent);
    letter-spacing: 0.12em;
    position: relative;
}
/* Skull-and-bones corner marks — same vocabulary as .codex-graph-pane corner
   marks but in crimson, framing the destructive target visually. */
.tool-preview::before,
.tool-preview::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid var(--crimson);
    pointer-events: none;
    opacity: 0.6;
}
.tool-preview::before { top: 5px;    left: 5px;    border-right: 0; border-bottom: 0; }
.tool-preview::after  { bottom: 5px; right: 5px;   border-left: 0;  border-top: 0; }
/* Inline <code> chips in the warning-text below the preview — for API path
   fragments like /api/tools/download/<key> or 404 status callouts. */
.modal-body .warning-text code {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 8%, transparent);
    padding: 0.05rem 0.4rem;
    letter-spacing: 0.04em;
    border: 1px solid color-mix(in srgb, var(--amber) 22%, transparent);
}

.confirm-modal-content {
    max-width: 440px;
    padding: 0 !important;
}
.confirm-title {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--crimson);
    padding: 0.9rem 1.25rem;
    background: var(--paper-3);
    border-bottom: 1px solid var(--rule-bold);
    margin: 0;
}
.confirm-message {
    padding: 1.25rem 1.25rem 0;
    color: var(--ink-dim);
    font-size: 0.85rem;
    line-height: 1.6;
}
.confirm-actions { padding: 1rem 1.25rem 1.25rem; }

/* ========================================================
   UPLOAD / DROP ZONES
   ======================================================== */

.upload-section {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
}

.upload-area,
.upload-form { display: flex; flex-direction: column; gap: 1rem; }

.upload-area,
.drop-zone,
.wp-drop-zone,
.installer-drop-zone,
.file-input-wrapper {
    border: 1px dashed var(--rule-bold);
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    background: var(--paper-3);
    position: relative;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
}
.upload-area:hover,
.drop-zone:hover,
.wp-drop-zone:hover,
.installer-drop-zone:hover,
.file-input-wrapper:hover {
    border-color: var(--azure);
    background: var(--azure-soft);
}
.upload-area.drag-over,
.drop-zone.dragover,
.wp-drop-zone.dragover,
.installer-drop-zone.dragover,
.file-input-wrapper.dragover {
    border-color: var(--amber);
    background: var(--amber-soft);
}

.upload-icon :is(i, iconify-icon),
.drop-zone :is(i, iconify-icon),
.wp-drop-zone :is(i, iconify-icon),
.installer-drop-zone :is(i, iconify-icon),
.file-input-icon {
    font-size: 2rem;
    color: var(--azure);
    display: block;
    margin-bottom: 0.5rem;
}
.upload-text,
.file-input-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--ink);
}
.file-input-text.file-selected { color: var(--amber); }
.upload-hint,
.file-input-hint,
.drop-zone p,
.wp-drop-zone p,
.installer-drop-zone p {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
    font-family: var(--font-mono);
}
.file-name {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--amber);
}

.file-input-wrapper { position: relative; }
.file-input-wrapper input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.form-group { margin-bottom: 0.9rem; }
.form-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 0.4rem;
}

.change-name-btn {
    background: transparent;
    border: none;
    color: var(--ink-dim);
    cursor: pointer;
    padding: 0.2rem;
    transition: color 0.2s;
}
.change-name-btn:hover { color: var(--amber); }

/* progress */
.progress-bar-wrap,
.installer-progress {
    margin-top: 0.75rem;
    display: none;
}
.progress-bar-wrap.active,
.installer-progress.active { display: block; }

.progress-bar-bg {
    width: 100%;
    height: 3px;
    background: var(--rule);
    border: none;
    position: relative;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--azure), var(--amber));
    transition: width 0.2s ease;
    width: 0%;
}
.progress-text {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-dim);
    margin-top: 0.4rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ========================================================
   FILES PAGE
   ======================================================== */

.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.file-card {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.2s;
    position: relative;
}
.file-card:hover { border-color: var(--rule-bold); background: var(--paper-3); }
.file-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: transparent;
    transition: background 0.2s;
}
.file-card:hover::before { background: var(--azure); }

.file-icon-wrapper {
    font-size: 2rem;
    color: var(--azure);
    width: fit-content;
}
.file-name {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--ink);
    font-weight: 500;
    word-break: break-all;
    line-height: 1.35;
}
.file-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--ink-dim);
}
.file-meta span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.file-meta :is(i, iconify-icon) { font-size: 0.8rem; opacity: 0.7; }
.file-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.preview-body img,
.preview-body video,
.preview-body embed {
    max-width: 100%;
    max-height: 72vh;
    display: block;
    margin: 0 auto;
}
.preview-body embed { height: 72vh; width: 100%; }
.preview-text,
.preview-unsupported {
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--ink);
    padding: 0.5rem;
}
.preview-unsupported {
    text-align: center;
    color: var(--ink-dim);
    padding: 3rem;
}
.preview-unsupported :is(i, iconify-icon) { font-size: 2.5rem; color: var(--crimson); display: block; margin-bottom: 0.5rem; }

/* ========================================================
   WALLPAPERS GRID
   ======================================================== */

.wp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.wp-tile {
    background: var(--paper-3);
    border: 1px solid var(--rule);
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wp-tile:hover { border-color: var(--azure); }
.wp-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--paper-4);
}
.wp-thumb {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.wp-tile:hover .wp-thumb { transform: scale(1.04); }

.wp-drag-handle,
.wp-delete-btn {
    position: absolute;
    top: 0.45rem;
    width: 28px; height: 28px;
    background: rgba(11, 11, 13, 0.85);
    border: 1px solid var(--rule-bold);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.wp-drag-handle { left: 0.45rem; cursor: grab; }
.wp-delete-btn { right: 0.45rem; }
.wp-delete-btn:hover { border-color: var(--crimson); color: var(--crimson); }
.wp-drag-handle:hover { border-color: var(--amber); color: var(--amber); }

.wp-tile-body {
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.wp-name-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 0.25rem 0;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    width: 100%;
    transition: border-color 0.25s;
}
.wp-name-input:hover { border-bottom-color: var(--rule-bold); }
.wp-name-input:focus {
    outline: none;
    border-bottom-color: var(--amber);
    color: var(--amber);
}
.wp-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    color: var(--ink-dim);
    font-variant-numeric: tabular-nums;
}
.wp-filename {
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sortable-ghost { opacity: 0.3; }
.sortable-drag { cursor: grabbing; }

.wp-upload-list {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1rem;
}
.wp-upload-list.active { display: flex; }
.wp-upload-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--paper-3);
    border: 1px solid var(--rule);
    font-size: 0.78rem;
}
.wp-upload-name {
    font-family: var(--font-mono);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wp-upload-pct {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--azure);
    font-variant-numeric: tabular-nums;
    min-width: 45px;
    text-align: right;
}
.wp-upload-pct.ok { color: var(--moss); }
.wp-upload-pct.error { color: var(--crimson); }
.wp-upload-progress {
    width: 120px;
    height: 2px;
    background: var(--rule);
    position: relative;
    overflow: hidden;
}
.wp-upload-progress-fill {
    height: 100%;
    background: var(--azure);
    width: 0%;
    transition: width 0.2s;
}

/* ========================================================
   RUNNER PAGE SPECIFICS
   ======================================================== */

.session-top-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.session-color-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}
.session-computer {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-dim);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.session-computer :is(i, iconify-icon) { color: var(--azure); }
.session-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.session-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border: 1px solid var(--rule-bold);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--ink-dim);
    border-radius: 0;
    margin-right: 0.25rem;
}
.badge-script { border-color: var(--azure); color: var(--azure); }
.badge-os { border-color: var(--rule-bold); color: var(--ink-dim); }
.badge-exit-ok { border-color: var(--moss); color: var(--moss); }
.badge-exit-fail { border-color: var(--crimson); color: var(--crimson); }

.session-notes,
.output-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--rule);
}
.notes-toggle,
.output-toggle {
    background: transparent;
    border: none;
    color: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0;
    transition: color 0.2s;
}
.notes-toggle:hover,
.output-toggle:hover { color: var(--amber); }
.notes-toggle::before,
.output-toggle::before { content: '[+]'; color: var(--ink-faint); margin-right: 0.3rem; }
.notes-edit,
.output-content {
    display: none;
    margin-top: 0.75rem;
}
.notes-edit.active,
.output-content.active { display: block; }
.notes-textarea {
    width: 100%;
    background: var(--paper-3);
    border: 1px solid var(--rule-bold);
    color: var(--ink);
    padding: 0.65rem 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    resize: vertical;
    min-height: 70px;
    border-radius: 0;
    transition: border-color 0.2s;
}
.notes-textarea:focus {
    outline: none;
    border-color: var(--amber);
}
.notes-save-row {
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
}
.notes-save-btn {
    background: transparent;
    border: 1px solid var(--moss);
    color: var(--moss);
    padding: 0.4rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.2s;
}
.notes-save-btn:hover { background: var(--moss); color: var(--paper); }

.output-pre {
    background: var(--paper-3);
    border: 1px solid var(--rule);
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: anywhere;
    max-height: 400px;
    overflow: auto;
    line-height: 1.6;
    -webkit-overflow-scrolling: touch;
}
.log-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--paper-3);
    border: 1px solid var(--rule);
}
.log-summary-bar {
    height: 3px;
    background: var(--rule);
    overflow: hidden;
}
.log-summary-fill { height: 100%; }
.log-summary-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.log-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}
.log-stat:hover { border-color: var(--rule-bold); }
.log-stat.log-filter-active { border-color: var(--amber); color: var(--amber); }
.log-stat-success { color: var(--moss); }
.log-stat-failed  { color: var(--crimson); }
.log-stat-warn    { color: var(--amber); }
.log-stat-info    { color: var(--azure); }
.log-stat-total   { color: var(--ink-dim); margin-left: auto; }

.log-entries {
    background: var(--paper-3);
    border: 1px solid var(--rule);
    padding: 0.75rem 1rem;
    max-height: 480px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.7;
}
.log-entries[data-active-filter="success"] .log-entry:not([data-level="success"]),
.log-entries[data-active-filter="error"]   .log-entry:not([data-level="error"]),
.log-entries[data-active-filter="warning"] .log-entry:not([data-level="warning"]),
.log-entries[data-active-filter="info"]    .log-entry:not([data-level="info"]) {
    display: none;
}
.log-entry {
    display: flex;
    align-items: start;
    gap: 0.5rem;
    padding: 0.15rem 0;
    overflow-wrap: anywhere;
    word-break: normal;
}
.log-icon { flex-shrink: 0; margin-top: 0.2rem; }
.log-success { color: var(--moss); }
.log-success .log-icon { color: var(--moss); }
.log-error   { color: var(--crimson); }
.log-error .log-icon { color: var(--crimson); }
.log-warning { color: var(--amber); }
.log-warning .log-icon { color: var(--amber); }
.log-info    { color: var(--azure); }
.log-info .log-icon { color: var(--azure); }
.log-plain   { color: var(--ink-dim); }
.log-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin: 0.5rem 0 0.25rem;
    color: var(--amber);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule);
}

/* runner library */
.script-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 420px;
    overflow: auto;
    margin: 1rem 1.25rem;
}
.script-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--paper-3);
    border: 1px solid var(--rule);
    gap: 1rem;
}
.script-item:hover { border-color: var(--rule-bold); }
.script-item-info { flex: 1; min-width: 0; }
.script-item-name {
    font-family: var(--font-mono);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 500;
}
.script-item-meta {
    font-size: 0.7rem;
    color: var(--ink-dim);
    margin-top: 0.2rem;
    letter-spacing: 0.05em;
}
.script-item-btn {
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink-dim);
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0;
}
.script-item-btn.delete:hover { border-color: var(--crimson); color: var(--crimson); }

.btn-upload,
.btn-library,
.btn-generate {
    background: transparent;
    border: 1px solid var(--amber);
    color: var(--amber);
    padding: 0.55rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 0;
}
.btn-upload:hover,
.btn-library:hover,
.btn-generate:hover {
    background: var(--amber);
    color: var(--paper);
}
.btn-library { border-color: var(--azure); color: var(--azure); }
.btn-library:hover { background: var(--azure); color: var(--paper); }

/* generated license code display */
.generated-code {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--amber);
    text-align: center;
    padding: 1rem;
    background: var(--amber-soft);
    border: 1px dashed var(--amber);
    margin: 0.5rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
}
.generated-code:hover {
    background: var(--amber);
    color: var(--paper);
}
.copy-hint {
    text-align: center;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 0 1.25rem 0.5rem !important;
}

/* note inline editor for licenses */
.note-value {
    color: var(--ink);
    transition: color 0.2s;
}
.note-value:hover { color: var(--amber); }
.note-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--amber);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 0.25rem 0;
}
.note-input:focus { outline: none; border-bottom-color: var(--amber); color: var(--amber); }
.btn-note-save,
.btn-note-cancel {
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink-dim);
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: 0;
    transition: all 0.2s;
}
.btn-note-save:hover { border-color: var(--moss); color: var(--moss); }
.btn-note-cancel:hover { border-color: var(--crimson); color: var(--crimson); }

.status-blocked-badge {
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.15rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber);
    border: 1px solid var(--amber);
}
.license-status,
.update-status,
.session-status {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.license-status::before,
.update-status::before,
.session-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
}
.license-status.status-active,
.update-status.status-active,
.session-status.status-approved,
.session-status.status-completed,
.session-status.status-unblocked { color: var(--moss); }
.license-status.status-active::before,
.update-status.status-active::before,
.session-status.status-approved::before,
.session-status.status-completed::before,
.session-status.status-unblocked::before { background: var(--moss); box-shadow: 0 0 8px var(--moss); }

.license-status.status-pending,
.update-status.status-draft,
.session-status.status-pending { color: var(--amber); }
.license-status.status-pending::before,
.update-status.status-draft::before,
.session-status.status-pending::before { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

.license-status.status-revoked,
.session-status.status-revoked,
.session-status.status-blocked { color: var(--crimson); }
.license-status.status-revoked::before,
.session-status.status-revoked::before,
.session-status.status-blocked::before { background: var(--crimson); box-shadow: 0 0 8px var(--crimson); }

.changelog-text {
    font-size: 0.85rem;
    color: var(--ink-dim);
    line-height: 1.65;
    padding: 0.75rem 0;
    white-space: pre-wrap;
    border-top: 1px dashed var(--rule);
    margin-top: 0.75rem;
}
.installer-empty {
    font-size: 0.82rem;
    color: var(--ink-dim);
    font-style: italic;
}

/* --- PKG·03 Tools section visuals ---
   Tools differs from installer/resources because it holds many keyed
   entries instead of one replaceable ZIP. The empty state mirrors a
   drop-zone's visual weight so the card doesn't collapse when no tools
   are uploaded; tool cards are a list of self-contained mini-cards each
   with header (key + delete) and detail grid below. */

.tools-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.2rem 1.5rem;
    border: 1px dashed color-mix(in srgb, var(--rule-bold) 70%, transparent);
    background: color-mix(in srgb, var(--paper) 60%, transparent);
    text-align: center;
}
.tools-empty iconify-icon {
    font-size: 2.4rem;
    color: var(--azure);
    opacity: 0.55;
}
.tools-empty-headline {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.tools-empty-deck {
    font-size: 0.78rem;
    color: var(--ink-faint);
    max-width: 36rem;
    line-height: 1.5;
}
.tools-empty-deck code {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 6%, transparent);
    padding: 0.05rem 0.35rem;
    letter-spacing: 0.04em;
}

.tools-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.4rem;
}
.tool-card {
    background: color-mix(in srgb, var(--paper) 55%, transparent);
    border: 1px solid var(--rule);
    /* Generous horizontal padding so the DELETE button on the right and the
       URL value (last column of the detail grid) don't touch the card edge.
       Vertical: tight top, comfortable bottom for the grid. */
    padding: 1.05rem 1.6rem 0.95rem;
    transition: border-color 160ms ease, background 160ms ease;
}
.tool-card:hover {
    border-color: color-mix(in srgb, var(--amber) 45%, var(--rule));
    background: color-mix(in srgb, var(--amber) 2%, var(--paper-3));
}
.tool-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    /* Subtle separator between header row (key + delete) and detail grid. */
    padding-bottom: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}
.tool-card-key {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.98rem;
    color: var(--ink);
    letter-spacing: 0.02em;
    word-break: break-all;
}
.tool-card-key iconify-icon {
    color: var(--azure);
    font-size: 1.1rem;
    opacity: 0.85;
}
.tool-card-delete {
    flex-shrink: 0;
    margin-right: -0.25rem;  /* visually lift toward header right edge while
                                still respecting card right padding */
}
.tool-card-delete:hover {
    color: var(--crimson);
    border-color: color-mix(in srgb, var(--crimson) 50%, transparent);
}
/* Detail grid inside a tool card — slightly tighter than the page-level
   .installer-info but with comfortable column width so URLs don't crush. */
.tool-card .installer-info {
    margin-bottom: 0;
    margin-top: 0;
    padding: 0.85rem 0 0.15rem;
    border-top: none;  /* the .tool-card-head's border-bottom replaces it */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.7rem 1.4rem;
}

/* --- field hint inside .sig-term modals ---
   Sub-label explanatory text under sig-field inputs (constraints, examples).
   Subtle, monospace, dimmed. */
.sig-field-hint {
    display: block;
    margin-top: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    line-height: 1.55;
}

/* Tool card entrance — gentle slide-up + fade as new entries appear in the
   PKG·03 list. Honors prefers-reduced-motion at the bottom of the file. */
@keyframes tool-card-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tool-card {
    animation: tool-card-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.tool-card:nth-child(2) { animation-delay: 40ms; }
.tool-card:nth-child(3) { animation-delay: 80ms; }
.tool-card:nth-child(4) { animation-delay: 120ms; }
.tool-card:nth-child(n+5) { animation-delay: 160ms; }

/* Modal-scoped progress bar styling. The progress bar moved INSIDE the
   .sig-term-body so it's visible during upload (the section-level one was
   hidden behind the modal overlay). Larger track + amber-azure gradient
   + subtle shimmer to give visible feedback on small fast uploads. */
.tools-modal-progress {
    margin-top: 0.4rem;
    margin-bottom: 0.9rem;
    padding: 0.85rem 0.95rem;
    background: color-mix(in srgb, var(--paper) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}
.tools-modal-progress .progress-bar-bg {
    height: 5px;
    background: color-mix(in srgb, var(--ink-faint) 30%, transparent);
}
.tools-modal-progress .progress-bar-fill {
    background: linear-gradient(90deg, var(--azure) 0%, var(--amber) 100%);
    box-shadow: 0 0 10px -2px color-mix(in srgb, var(--amber) 80%, transparent);
    position: relative;
    overflow: hidden;
}
/* Shimmer pass — slides a soft highlight across the fill while uploading
   so the bar reads as alive even when transfer is brief. */
.tools-modal-progress .progress-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--ink-white) 35%, transparent) 50%,
        transparent 100%);
    animation: tool-progress-shimmer 1.4s linear infinite;
}
@keyframes tool-progress-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
.tools-modal-progress .progress-text {
    margin-top: 0.55rem;
    color: var(--amber);
}

/* Reduce motion: kill the entrance + shimmer animations. */
@media (prefers-reduced-motion: reduce) {
    .tool-card { animation: none; }
    .tools-modal-progress .progress-bar-fill::after { display: none; }
}
.installer-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variation-settings: "opsz" 144, "SOFT" 50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.installer-title :is(i, iconify-icon) { color: var(--azure); font-size: 1rem; }
.installer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* ========================================================
   TICKETS PAGE SPECIFICS
   ======================================================== */

.tickets-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ticket-meta {
    font-size: 0.72rem;
    color: var(--ink-dim);
    margin-left: auto;
    letter-spacing: 0.05em;
}
.ticket-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--ink);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0.25rem 0 0.4rem;
    font-variation-settings: "opsz" 144, "SOFT" 50;
}
.ticket-message-preview {
    color: var(--ink-dim);
    font-size: 0.85rem;
    line-height: 1.55;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.detail-section { margin-bottom: 1.1rem; }
.hw-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--paper-3);
    border: 1px solid var(--rule);
    font-size: 0.82rem;
    color: var(--ink-dim);
}
.existing-reply-box {
    background: var(--azure-soft);
    border: 1px solid var(--azure-dim);
    padding: 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--azure);
    white-space: pre-wrap;
    margin-bottom: 0.5rem;
}
.reply-textarea {
    width: 100%;
    min-height: 120px;
    background: var(--paper-3);
    border: 1px solid var(--rule-bold);
    color: var(--ink);
    padding: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    resize: vertical;
    border-radius: 0;
}
.reply-textarea:focus { outline: none; border-color: var(--azure); }
.reply-char-count {
    font-size: 0.7rem;
    color: var(--ink-dim);
    text-align: right;
    margin-top: 0.25rem;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}
.status-select {
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink);
    padding: 0.4rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
}
.status-select:focus { outline: none; border-color: var(--amber); }

/* ========================================================
   INDEX / COMPUTERS (home page)
   ======================================================== */

.stat-icon {
    font-size: 1.2rem;
    color: var(--amber);
    margin-bottom: 0.4rem;
}

.computer-name {
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    font-weight: 500;
}
.computer-icon {
    width: 32px; height: 32px;
    border: 1px solid var(--azure-dim);
    color: var(--azure);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-right: 0.5rem;
    background: var(--azure-soft);
}
.badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.log-list {
    display: none;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--rule);
    flex-direction: column;
    gap: 0.35rem;
}
.log-list.active { display: flex; }
.log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: var(--paper-3);
    border: 1px solid var(--rule);
    font-size: 0.8rem;
}
.log-item-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-dim);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.log-item-info :is(i, iconify-icon) { color: var(--azure); flex-shrink: 0; }
.log-item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

footer {
    text-align: center;
    padding: 3rem 1rem 1rem;
    color: var(--ink-faint);
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}
footer::before {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: var(--amber-dim);
    margin: 0 auto 1rem;
}

/* ========================================================
   TOASTS
   ======================================================== */

.toast,
.toast-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.85rem 1.25rem;
    background: var(--paper-2);
    border: 1px solid var(--rule-bold);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    z-index: 10000;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    animation: toastSlideIn 0.3s ease;
    max-width: 420px;
    border-radius: 0;
}
.toast.show { display: flex; }
.toast.success,
.toast-notification.success { border-color: var(--moss); color: var(--moss); }
.toast.error,
.toast-notification.error { border-color: var(--crimson); color: var(--crimson); }
.toast.info,
.toast-notification.info { border-color: var(--azure); color: var(--azure); }

.toast-icon { font-size: 1rem; }

@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes toastFadeOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ========================================================
   LOG DETAIL PAGE
   ======================================================== */

.log-header {
    padding: 1.75rem 0 1.5rem;
    border-bottom: 1px solid var(--rule-bold);
    margin-bottom: 2rem;
}
.log-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: -0.025em;
    color: var(--ink);
    font-variation-settings: "opsz" 144, "SOFT" 50;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.log-title > :is(i, iconify-icon) { color: var(--amber); font-size: 1.5rem; }
.log-title .status-badge { margin-left: 0.5rem; font-size: 0.72rem; }

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    border-left: 1px solid var(--rule-bold);
}
.info-item {
    padding: 0.9rem 1.1rem;
    border-right: 1px solid var(--rule-bold);
    border-top: 1px solid var(--rule-bold);
    border-bottom: 1px solid var(--rule-bold);
    background: var(--paper-2);
}

.actions-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.system-specs {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}
.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    border-left: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
    margin-top: 1rem;
}
.spec-card {
    padding: 1rem 1.15rem;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.spec-icon {
    color: var(--azure);
    font-size: 1rem;
    margin-bottom: 0.4rem;
}
.spec-label {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 0.3rem;
}
.spec-value {
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.4;
    word-break: break-word;
}

.log-content-section {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    margin-bottom: 2rem;
}
.sig-term.log-content-section,
.sig-term.sig-term-wide:not(.modal-overlay .sig-term) {
    max-width: none;
    width: 100%;
    max-height: none;
}
.log-content-section .sig-term-body {
    padding: 1.5rem 1.75rem 1.75rem;
}
.log-content-section .log-content {
    background: var(--paper-3);
    border: 1px solid var(--rule);
    padding: 1.25rem;
    max-height: 680px;
    overflow: auto;
    margin-top: 1rem;
}

/* log viewer toolbar (wrap toggle + zoom) */
.log-viewer-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--rule);
}
.log-viewer-toolbar .lv-btn,
.log-viewer-toolbar button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--rule-bold);
    color: var(--ink-dim);
    padding: 0.5rem 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 0;
    line-height: 1;
    min-height: 36px;
}
.log-viewer-toolbar button:hover {
    color: var(--ink);
    border-color: var(--ink-dim);
}
.log-viewer-toolbar .zoom-btn {
    width: 36px;
    min-width: 36px;
    padding: 0;
    font-size: 1rem;
}
.log-viewer-toolbar .zoom-btn :is(iconify-icon) { font-size: 1rem; }

/* Wrap toggle — state is VERY visible */
.log-viewer-toolbar .wrap-btn {
    gap: 0.5rem;
    padding-right: 0.7rem;
}
.log-viewer-toolbar .wrap-btn .wrap-state {
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 0.2rem 0.45rem;
    border: 1px solid currentColor;
    font-size: 0.6rem;
}
.log-viewer-toolbar .wrap-btn[data-wrap="off"] {
    color: var(--ink-dim);
    border-color: var(--rule-bold);
}
.log-viewer-toolbar .wrap-btn[data-wrap="off"] .wrap-state {
    color: var(--crimson);
    border-color: var(--crimson);
}
.log-viewer-toolbar .wrap-btn[data-wrap="on"] {
    color: var(--paper) !important;
    background: var(--amber) !important;
    background-color: var(--amber) !important;
    border-color: var(--amber);
}
.log-viewer-toolbar .wrap-btn[data-wrap="on"] .wrap-state {
    color: var(--paper);
    border-color: var(--paper);
    background: rgba(11,11,13,0.12);
}

.log-viewer-toolbar .zoom-val {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--amber);
    padding: 0 0.25rem;
    min-width: 3em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.log-viewer-toolbar .tb-divider {
    width: 1px;
    align-self: stretch;
    background: var(--rule-bold);
    margin: 0 0.2rem;
}
.log-viewer-toolbar .tb-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 0 0.2rem;
}

.log-content.wrap-on {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    overflow-x: hidden !important;
}

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

/* ========================================================
   FOOTER
   ======================================================== */
.sig-footer {
    margin-top: 4rem;
    padding-top: 1.5rem;
    color: var(--ink-faint);
}
.sig-rule {
    border: none;
    border-top: 1px solid var(--rule);
    margin-bottom: 1rem;
}
.sig-footer-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-bottom: 0.75rem;
}
.sig-footer-row b { color: var(--amber); font-weight: 500; letter-spacing: 0.12em; }
.sig-footer-row .spacer { flex: 1; }

/* nav toggle — hidden by default, revealed on mobile */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--rule-bold);
    color: var(--ink);
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    transition: border-color 0.2s, color 0.2s;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font: inherit;
    flex-shrink: 0;
    justify-self: end;
    align-self: center;
}
.nav-toggle:hover { border-color: var(--amber); color: var(--amber); }
.nav-toggle :is(iconify-icon) { font-size: 1.25rem; line-height: 1; }
.nav-toggle .nav-toggle-open  { display: inline-flex !important; }
.nav-toggle .nav-toggle-close { display: none !important; }
.sig-masthead.nav-open .nav-toggle .nav-toggle-open  { display: none !important; }
.sig-masthead.nav-open .nav-toggle .nav-toggle-close { display: inline-flex !important; }
.sig-masthead.nav-open .nav-toggle { color: var(--amber); border-color: var(--amber); }

body.nav-locked { overflow: hidden; }

/* ========================================================
   RESPONSIVE — tablet / laptop
   ======================================================== */
@media (max-width: 1200px) {
    .container { padding: 1.25rem 2rem 3rem; }
    .sig-hero { gap: 2rem; }
    .sig-kpis { grid-auto-columns: minmax(90px, 1fr); }
}

@media (max-width: 1100px) {
    .sig-hero { grid-template-columns: 1fr; }
    .sig-kpis { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); border-left: 0; }
    .sig-kpi { border-left: 1px solid var(--rule-bold); }
    .upload-section { grid-template-columns: 1fr; }
}

/* ========================================================
   RESPONSIVE — collapse nav (≤900px)
   ======================================================== */
@media (max-width: 900px) {
    .container { padding: 1rem 1.25rem 3rem; }

    /* Masthead collapses to logo + hamburger row, nav and actions slide down */
    .sig-masthead {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo toggle"
            "nav  nav"
            "act  act";
        gap: 0.85rem;
        padding: 0.9rem 1rem;
    }
    .sig-masthead > .logo-section { grid-area: logo; justify-self: start; min-width: 0; }
    .sig-masthead > .nav-toggle   { grid-area: toggle; display: inline-flex !important; width: 40px; min-width: 40px; max-width: 40px; }
    .sig-masthead > .nav-links    { grid-area: nav; min-width: 0; }
    .sig-masthead > .header-actions { grid-area: act; min-width: 0; }

    .nav-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 0.5rem;
        border-top: 1px solid var(--rule);
    }
    .sig-masthead.nav-open .nav-links { display: flex; }

    .nav-link {
        padding: 0.85rem 0.75rem;
        border-bottom: 1px solid var(--rule);
        font-size: 0.75rem;
        letter-spacing: 0.18em;
        justify-content: flex-start;
    }
    .nav-link :is(i, iconify-icon) { font-size: 1rem; }
    .nav-link.active { background: var(--paper-3); }
    .nav-link.active::after { display: none; }

    .header-actions {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .sig-masthead.nav-open .header-actions { display: flex; }
    .search-box { width: 100%; }
    .search-input { width: 100%; }
    .status-indicator { justify-content: center; }

    /* topbar */
    .sig-topbar {
        flex-wrap: wrap;
        gap: 0.6rem 1rem;
        font-size: 0.62rem;
        padding: 0.5rem 0.9rem;
    }
    .sig-topbar .spacer { display: none; }
    .sig-topbar .cursor { display: none; }

    /* hero */
    .sig-hero { padding: 1.25rem 0 1.75rem; margin-bottom: 1.5rem; gap: 1.5rem; }
    .sig-title { font-size: clamp(2rem, 7vw, 3rem); }
    .sig-deck { font-size: 0.82rem; }
    .sig-kpis { grid-template-columns: repeat(2, 1fr); }

    .stats-grid, .stats-row { grid-template-columns: repeat(2, 1fr); }

    /* rack / filters */
    .sig-rack { gap: 1rem; padding: 1rem 0 1.25rem; }

    /* cards */
    .sig-card, .computer-card, .license-card, .update-card, .session-card, .ticket-card {
        padding: 1.1rem 1.15rem;
    }
    .panel-section, .computers-section, .installer-section { padding: 1.25rem 1.15rem; }

    /* detail + info grids stack */
    .license-details, .update-details, .session-details, .installer-info, .computer-info,
    .specs-grid, .hw-info-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    /* card header wraps nicely */
    .license-header, .update-header, .session-header, .ticket-header, .computer-header,
    .section-header, .panel-section-header, .installer-header {
        gap: 0.6rem 0.85rem;
    }

    /* action strips become full width */
    .license-actions, .update-actions, .session-actions, .ticket-actions,
    .actions-bar {
        width: 100%;
    }
    .btn-action { flex: 1 1 auto; justify-content: center; }

    /* tables — enable horizontal scroll context on mobile */
    .sig-ledger, .logs-table { font-size: 0.72rem; }
    .sig-ledger thead th, .logs-table thead th { padding: 0.5rem 0.5rem 0.5rem 0; }
    .sig-ledger tbody td, .logs-table tbody td { padding: 0.7rem 0.5rem 0.7rem 0; }
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* filter tabs — scroll horizontally when too many.
       `min-width: 0` is the flexbox-overflow fix: without it, child default
       `min-width: auto` = content size, which prevents overflow-x from
       activating and the row spills past the viewport edge. */
    .controls-bar, .controls-row { gap: 0.75rem; flex-direction: column; align-items: stretch; }
    .controls-left, .controls-right { justify-content: flex-start; flex-wrap: wrap; }
    .filter-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem 0.5rem;
        scrollbar-width: thin;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .filter-btn, .filter-tab { flex-shrink: 0; padding: 0.55rem 0.85rem; white-space: nowrap; }

    /* runner session header left stacks */
    .session-header-left { width: 100%; }
    .session-top-row { gap: 0.45rem 0.75rem; }

    /* runner script list fits container */
    .script-list { margin: 1rem 0.95rem; max-height: 60vh; }

    /* terminal-style modal action buttons stack */
    .sig-term-actions { flex-wrap: wrap; }
    .sig-term-actions .sig-btn { flex: 1 1 auto; justify-content: center; }

    /* modal on mobile */
    .modal:not(.sig-term), .sig-modal, .modal-overlay,
    .delete-confirm-overlay, .preview-modal { padding: 0.75rem; }
    .modal-content, .sig-term, .modal-overlay > .modal,
    .delete-confirm-modal, .reactivate-confirm-modal,
    .delete-modal-content, .preview-content {
        max-height: 94vh;
    }

    /* file / wallpaper grids */
    .files-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .wp-grid    { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

    /* footer */
    .sig-footer-row { flex-wrap: wrap; gap: 0.75rem 1.25rem; font-size: 0.58rem; }
    .sig-footer-row .spacer { display: none; flex: 0; }

    /* log content — preserve formatting, horizontal scroll for ASCII art */
    .log-content-section .sig-term-body { padding: 0.85rem 0.85rem 1rem; }
    .log-content-section .log-content {
        padding: 0.85rem 0.9rem;
        max-height: none;
        font-size: 0.72rem;
        line-height: 1.55;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        white-space: pre;
        word-break: normal;
        overflow-wrap: normal;
    }
    .sig-term-prompt {
        font-size: 0.7rem;
        margin-bottom: 0.6rem;
        padding-bottom: 0.5rem;
        overflow-wrap: anywhere;
        word-break: break-all;
    }
    .log-viewer-toolbar { gap: 0.3rem; padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
    .log-viewer-toolbar button { padding: 0.4rem 0.65rem; font-size: 0.6rem; letter-spacing: 0.12em; }
    .log-viewer-toolbar .zoom-val { font-size: 0.62rem; min-width: 2.5em; }

    /* runner execution output — collapsible section + summary + entries */
    .output-section { padding-top: 0.7rem; margin-top: 0.7rem; }
    .output-toggle,
    .notes-toggle {
        font-size: 0.65rem;
        padding: 0.5rem 0;
        min-height: 36px;
    }
    .output-content { margin-top: 0.6rem; }

    /* runner log summary — progress bar + stat chips */
    .log-summary {
        padding: 0.65rem 0.7rem;
        gap: 0.45rem;
        margin-bottom: 0.6rem;
    }
    .log-summary-bar { height: 4px; }
    .log-summary-stats {
        gap: 0.4rem 0.55rem;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }
    .log-stat {
        padding: 0.35rem 0.5rem;
        min-height: 32px;
        gap: 0.3rem;
    }
    .log-stat-total { margin-left: 0; }

    /* runner log entries list — preserve ASCII indentation, h-scroll */
    .log-entries {
        padding: 0.65rem 0.75rem;
        max-height: 60vh;
        font-size: 0.72rem;
        line-height: 1.6;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .log-entry {
        gap: 0.4rem;
        padding: 0.18rem 0;
        overflow-wrap: anywhere;
        word-break: normal;
    }
    .log-icon { margin-top: 0.15rem; }
    .log-section-header {
        font-size: 0.66rem;
        letter-spacing: 0.15em;
        padding: 0.4rem 0;
        margin: 0.4rem 0 0.2rem;
    }

    /* runner raw output fallback — same treatment as log-content */
    .output-pre {
        padding: 0.75rem 0.85rem;
        font-size: 0.7rem;
        line-height: 1.55;
        max-height: 60vh;
        white-space: pre;
        word-break: normal;
        overflow-wrap: normal;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========================================================
   RESPONSIVE — phone (≤640px)
   ======================================================== */
@media (max-width: 640px) {
    :root { --container: 100%; }
    .container { padding: 0.75rem 0.9rem 3rem; }

    /* topbar — only show essentials */
    .sig-topbar {
        gap: 0.4rem 0.85rem;
        font-size: 0.58rem;
        letter-spacing: 0.18em;
    }

    .sig-masthead { padding: 0.8rem 0.85rem; }
    .logo { width: 32px; height: 32px; }
    .logo-text { font-size: 1.35rem; }
    .logo-text::after { font-size: 0.75rem; }

    /* hero */
    .sig-hero { padding: 0.75rem 0 1.25rem; margin-bottom: 1rem; }
    .sig-eyebrow { font-size: 0.6rem; letter-spacing: 0.28em; margin-bottom: 0.6rem; }
    .sig-title { font-size: clamp(1.7rem, 9vw, 2.4rem); }
    .sig-deck { font-size: 0.78rem; margin-top: 0.75rem; }

    /* KPI rail → 1 column */
    .sig-kpis { grid-template-columns: repeat(1, 1fr); }
    .sig-kpi { padding: 0.8rem 1rem; }
    .sig-kpi-value { font-size: 1.45rem; }

    /* stat cards */
    .stats-grid, .stats-row { grid-template-columns: 1fr; }
    .stat-card { padding: 0.9rem 1rem; }
    .stat-value { font-size: 1.5rem; }

    /* detail + info grids fully stack */
    .license-details, .update-details, .session-details, .installer-info, .computer-info,
    .specs-grid, .hw-info-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    /* cards tighter */
    .sig-card, .computer-card, .license-card, .update-card, .session-card, .ticket-card {
        padding: 0.95rem 0.95rem;
    }
    .panel-section, .computers-section, .installer-section { padding: 1rem 0.95rem; }

    /* section titles */
    .section-title, .panel-section-title, .installer-title,
    .ticket-title { font-size: 1.05rem; }
    .ticket-meta { margin-left: 0; width: 100%; }

    /* card headers stack */
    .license-header, .update-header, .session-header, .ticket-header, .computer-header,
    .section-header, .panel-section-header, .installer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* buttons */
    .sig-btn, .btn { padding: 0.55rem 0.9rem; font-size: 0.62rem; letter-spacing: 0.18em; }
    .btn-action { padding: 0.55rem 0.7rem; font-size: 0.66rem; letter-spacing: 0.1em; }

    /* form fields */
    .sig-field input, .sig-field select, .sig-field textarea { font-size: 0.85rem; }
    .modal-input, .modal-textarea, .modal-select, .form-input { font-size: 0.88rem; }

    /* tables → wrap rows in scroll container */
    .table-wrapper, .logs-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sig-ledger, .logs-table { min-width: 640px; font-size: 0.7rem; }
    .sig-ledger thead th:first-child, .logs-table thead th:first-child,
    .sig-ledger tbody td:first-child, .logs-table tbody td:first-child { padding-left: 0.65rem; }

    /* upload zones */
    .upload-area, .drop-zone, .wp-drop-zone, .installer-drop-zone, .file-input-wrapper {
        padding: 1.5rem 1rem;
        min-height: 130px;
    }
    .upload-icon :is(i, iconify-icon),
    .drop-zone :is(i, iconify-icon),
    .wp-drop-zone :is(i, iconify-icon),
    .installer-drop-zone :is(i, iconify-icon),
    .file-input-icon { font-size: 1.5rem; }
    .upload-section { padding: 1rem; gap: 1rem; }

    /* modals */
    .modal-header, .sig-term-bar, .preview-header, .delete-modal-header {
        padding: 0.6rem 0.9rem;
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        flex-wrap: wrap;
    }
    .modal-body, .sig-term-body, .preview-body, .delete-modal-body {
        padding: 1rem 0.95rem;
        font-size: 0.82rem;
    }
    .modal-overlay > .modal > .modal-field,
    .modal-overlay > .modal > p,
    .modal-overlay > .modal > .modal-actions,
    .delete-confirm-modal > *:not(.modal-title),
    .reactivate-confirm-modal > *:not(.modal-title) {
        padding: 0 0.95rem;
    }
    .modal-overlay > .modal > .modal-actions { padding: 0.85rem 0.95rem 0.95rem; }

    /* grids — photos, files, wallpapers */
    .files-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .wp-grid    { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

    /* actions on runner etc. wrap to two columns */
    .license-actions, .update-actions, .session-actions, .ticket-actions,
    .actions-bar {
        flex-wrap: wrap;
    }
    .btn-action { flex: 1 1 calc(50% - 0.4rem); }

    /* pagination */
    .sig-page, .pagination { padding: 1rem 0; gap: 0.15rem; }
    .sig-page button, .pagination button, .page-btn {
        padding: 0.4rem 0.65rem;
        font-size: 0.7rem;
        min-width: 30px;
    }

    /* empty state */
    .empty-state, .sig-empty, .loading, .sig-loading { padding: 2.5rem 1rem; }

    /* toast — span to edges on narrow screens */
    .toast, .toast-notification {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        max-width: none;
        justify-content: center;
    }

    /* wallpaper upload item — progress bar shrinks, name ellipsizes */
    .wp-upload-item {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name pct"
            "bar  bar";
        gap: 0.35rem 0.75rem;
    }
    .wp-upload-name { grid-area: name; }
    .wp-upload-pct  { grid-area: pct; }
    .wp-upload-progress { grid-area: bar; width: 100%; }

    /* log-item (index.html) stacks info + action */
    .log-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.65rem 0.75rem; }
    .log-item-info { width: 100%; white-space: normal; }
    .log-item-text { white-space: normal; overflow: visible; }

    /* computer-name row wraps instead of overflowing */
    .computer-name { flex-wrap: wrap; font-size: 0.9rem; }
    .computer-icon { width: 26px; height: 26px; font-size: 0.85rem; margin-right: 0.3rem; }

    /* search icon alignment within full-width input */
    .search-input { padding-left: 2rem; }

    /* delete modal icon smaller */
    .delete-modal-icon { width: 36px; height: 36px; font-size: 1.1rem; }

    /* runner execution output — phone */
    .output-section { padding-top: 0.6rem; margin-top: 0.6rem; }
    .output-toggle { font-size: 0.6rem; letter-spacing: 0.15em; }
    .log-summary { padding: 0.55rem 0.6rem; }
    .log-summary-stats {
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
    }
    .log-stat {
        justify-content: flex-start;
        padding: 0.45rem 0.55rem;
        font-size: 0.62rem;
        min-height: 36px;
        border-color: var(--rule);
    }
    .log-stat-total {
        margin-left: 0;
        border-top: 1px dashed var(--rule);
        padding-top: 0.55rem;
        margin-top: 0.2rem;
    }
    .log-entries {
        padding: 0.55rem 0.65rem;
        font-size: 0.68rem;
        line-height: 1.55;
        max-height: 55vh;
    }
    .log-entry { padding: 0.15rem 0; gap: 0.35rem; }
    .log-section-header {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
        padding: 0.35rem 0;
    }
    .output-pre {
        padding: 0.65rem 0.7rem;
        font-size: 0.66rem;
        max-height: 55vh;
    }
}

/* ========================================================
   RESPONSIVE — small phone (≤420px)
   ======================================================== */
@media (max-width: 420px) {
    body { font-size: 13px; }
    .container { padding: 0.65rem 0.75rem 2.5rem; }

    .sig-topbar { justify-content: center; }
    .logo-text::after { content: ''; }

    .sig-title { font-size: clamp(1.5rem, 10vw, 2rem); letter-spacing: -0.025em; }

    .files-grid, .wp-grid { grid-template-columns: 1fr; }

    .btn-action { flex: 1 1 100%; }

    .nav-link { font-size: 0.7rem; padding: 0.75rem 0.6rem; }

    /* keep tables readable via horizontal scroll */
    .sig-ledger, .logs-table { min-width: 520px; }
}

/* ========================================================
   RESPONSIVE — touch-friendly affordances
   ======================================================== */
@media (hover: none) and (pointer: coarse) {
    /* enlarge hit areas */
    .nav-link { min-height: 44px; }
    .sig-btn, .btn, .btn-action, .page-btn { min-height: 40px; }
    .close-btn, .preview-close, .sig-term-bar .x { width: 36px; height: 36px; }
    .wp-drag-handle, .wp-delete-btn { width: 32px; height: 32px; }
    .log-stat, .output-toggle, .notes-toggle, .lv-btn { min-height: 36px; }
    .log-viewer-toolbar .lv-btn { min-width: 36px; }
}