/* -- Creation Studio Styles -- */

/* ============================================================
   Voxel Editor (AAA overhaul)
   Cyan/teal studio identity layered on the shared --gf-* tokens.
   ============================================================ */

:root {
    /* The studio is a staff surface, so cyan is legal here - but it has to be
       THE Grid cyan. This was var(--gf-grid-cyan), 6.6 dE off #66E0FF: a near-miss that
       reads as the Grid without being it, which is exactly what
       VISUAL_IDENTITY.md forbids ("if it glows cyan, it IS the Grid"). The
       staff-chrome note further down this file already names this very value
       as "a near-miss var(--gf-grid-cyan) pretending to be the Grid" - it was caught in the
       role colors and missed here, in the studio's own accent. */
    --vox-accent: var(--gf-grid-cyan);
    --vox-accent-soft: rgba(var(--gf-grid-cyan-rgb), 0.16);
    --vox-accent-glow: rgba(var(--gf-grid-cyan-rgb), 0.40);
    --vox-teal: #4aa090;
    --vox-panel: rgba(22, 25, 32, 0.96);
    --vox-panel-2: rgba(28, 32, 42, 0.92);
    --vox-line: rgba(120, 200, 255, 0.12);
    --vox-line-soft: rgba(216,203,182,0.06);
    --vox-ink: #d6dbe6;
    --vox-ink-dim: #8a93a6;
    --vox-ink-faint: #6f7a90;
}

.voxel-editor-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
    background: linear-gradient(160deg, #181b22 0%, #14161b 100%);
    color: var(--vox-ink);
    font-family: var(--gf-font-ui);
    font-size: 12px;
}

.gf-icon { display: block; flex: 0 0 auto; }

/* -- App bar -- */
.vox-appbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    flex-shrink: 0;
    background: var(--vox-panel);
    border-bottom: 1px solid var(--vox-line);
    box-shadow: 0 1px 0 rgba(120, 200, 255, 0.05);
}
.vox-appbar-identity { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.vox-appbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.vox-state-dot {
    width: 9px; height: 9px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--vox-teal);
    box-shadow: 0 0 6px rgba(74, 160, 144, 0.6);
    transition: background 0.2s, box-shadow 0.2s;
}
.vox-state-dot.vox-dirty {
    background: #e0b84a;
    box-shadow: 0 0 7px rgba(224, 184, 74, 0.7);
}

.vox-name-input {
    flex: 1; min-width: 80px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--vox-line);
    clip-path: var(--gf-cut-sm);
    color: #e6f2f6; font-size: 13px; font-weight: 600;
}
.vox-sub-input {
    width: 108px; flex-shrink: 0;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--vox-line);
    clip-path: var(--gf-cut-sm);
    color: var(--vox-ink); font-size: 12px;
}
.vox-name-input:focus, .vox-sub-input:focus, .vox-select:focus, .vox-dim-input:focus {
    outline: none; border-color: var(--vox-accent); box-shadow: 0 0 0 1px var(--vox-accent-soft);
}

.vox-select {
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--vox-line);
    clip-path: var(--gf-cut-sm);
    color: var(--vox-ink); font-size: 12px;
    cursor: pointer;
}

.vox-dims-badge {
    flex-shrink: 0;
    font-family: var(--gf-mono, var(--gf-font-mono));
    font-size: 11px; color: var(--vox-accent);
    background: var(--vox-accent-soft);
    border: 1px solid var(--vox-line);
    clip-path: var(--gf-cut);
    padding: 2px 9px;
}

/* -- Buttons (icon + optional label) -- */
.vox-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 5px 9px;
    background: linear-gradient(180deg, #353c48 0%, #2b313c 100%);
    border: 1px solid #444c5c;
    clip-path: var(--gf-cut-sm);
    color: var(--vox-ink);
    cursor: pointer;
    font-size: 11px; font-family: inherit;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, color 0.12s;
}
.vox-btn:hover { background: #434b5b; border-color: #5a647a; color: #fff; }
.vox-btn:active { transform: translateY(0.5px); }
.vox-btn:disabled { opacity: 0.5; cursor: default; }
.vox-btn .gf-icon { width: 16px; height: 16px; }
.vox-btn-label { white-space: nowrap; }
.vox-btn-sm { padding: 4px 6px; font-size: 10px; gap: 3px; }
.vox-btn-sm .gf-icon { width: 15px; height: 15px; }

.vox-btn.active, .vox-toggle.active {
    background: linear-gradient(180deg, #4f9fd6 0%, #3a78c0 100%);
    border-color: var(--vox-accent); color: #fff;
    box-shadow: 0 0 8px var(--vox-accent-glow);
}

.vox-btn-primary {
    background: linear-gradient(180deg, #2f7d63 0%, #245c4c 100%);
    border-color: #4aa090; color: #d8fff4; font-weight: 600;
}
.vox-btn-primary:hover { background: linear-gradient(180deg, #38967a 0%, #2c6f5c 100%); color: #fff; }
.vox-btn-primary.vox-save-ok { background: #2f8d4f; border-color: #46c06a; }
.vox-btn-primary.vox-save-fail { background: #8d3030; border-color: #c04a4a; }

.vox-btn-preview {
    background: linear-gradient(180deg, #2c5a52 0%, #224640 100%);
    border-color: #4aa090; color: #cdfdf2;
    text-shadow: 0 0 8px rgba(120, 240, 220, 0.4);
}
.vox-btn-preview:hover { background: #357066; }
.vox-btn-submit {
    background: linear-gradient(180deg, #4a3f6a 0%, #392f55 100%);
    border-color: #7a68b0; color: #e6dcff;
}
.vox-btn-submit:hover { background: #5a4d80; }

/* -- Body: tool rail | canvas | props -- */
.vox-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

.vox-toolrail {
    display: flex; flex-direction: column; gap: 10px;
    padding: 8px 6px;
    flex-shrink: 0;
    background: var(--vox-panel-2);
    border-right: 1px solid var(--vox-line);
    overflow-y: auto;
}
.vox-toolrail-group {
    display: flex; flex-direction: column; gap: 4px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--vox-line-soft);
}
.vox-toolrail-group:last-child { border-bottom: none; padding-bottom: 0; }

.vox-tool {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #353c48 0%, #2b313c 100%);
    border: 1px solid #444c5c;
    clip-path: var(--gf-cut);
    color: var(--vox-ink);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, color 0.12s;
}
.vox-tool:hover { background: #434b5b; border-color: #5a647a; color: #fff; }
.vox-tool .gf-icon { width: 20px; height: 20px; }
.vox-tool.active {
    background: linear-gradient(180deg, #4f9fd6 0%, #3a78c0 100%);
    border-color: var(--vox-accent); color: #fff;
    box-shadow: 0 0 10px var(--vox-accent-glow), inset 0 0 0 1px rgba(var(--gf-bone-rgb), 0.08);
}

.voxel-editor-canvas-wrapper {
    flex: 1;
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
    background: #20232b;
}

.voxel-editor-canvas-wrapper .voxel-editor-canvas {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: block;
    cursor: crosshair;
    background: transparent;
    width: 100%;
    height: 100%;
}

.voxel-editor-canvas-wrapper.move-mode .voxel-editor-canvas {
    cursor: move;
}

.voxel-editor-canvas-wrapper.orbit-mode .voxel-editor-canvas {
    cursor: grab;
}

.voxel-editor-canvas-wrapper.orbiting .voxel-editor-canvas {
    cursor: grabbing;
}

.voxel-editor-canvas-wrapper.pan-mode .voxel-editor-canvas {
    cursor: all-scroll;
}

/* On-screen Camera Cluster */
.vox-camera-cluster {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(26, 29, 36, 0.75);
    border: 1px solid var(--vox-line-soft);
    clip-path: var(--gf-cut);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.vox-camera-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    clip-path: var(--gf-cut-sm);
    color: var(--vox-ink-dim);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.vox-camera-btn:hover {
    background: rgba(var(--gf-bone-rgb), 0.08);
    color: #fff;
}

.vox-camera-btn.active {
    background: linear-gradient(180deg, #4f9fd6 0%, #3a78c0 100%);
    border-color: var(--vox-accent);
    color: #fff;
    box-shadow: 0 0 8px var(--vox-accent-glow);
}

.vox-camera-btn .gf-icon {
    width: 16px;
    height: 16px;
}

/* Contextual Hint Bar */
.vox-hint-bar {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    background: rgba(26, 29, 36, 0.85);
    border: 1px solid var(--vox-line-soft);
    clip-path: var(--gf-cut);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    color: var(--vox-ink);
    font-size: 11px;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    text-align: center;
    border-left: 3px solid var(--vox-accent);
}

/* -- Properties panel -- */
.vox-props {
    width: 214px; flex-shrink: 0;
    padding: 6px 8px 14px;
    background: var(--vox-panel-2);
    border-left: 1px solid var(--vox-line);
    overflow-y: auto;
}
.vox-prop-section { margin-bottom: 12px; }
.vox-prop-header {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--vox-ink-faint);
    padding: 6px 0 5px;
    margin-bottom: 7px;
    border-bottom: 1px solid var(--vox-line-soft);
}
.vox-prop-body { display: flex; flex-direction: column; gap: 6px; }

.vox-btn-row { display: flex; gap: 5px; flex-wrap: wrap; }
.vox-btn-row .vox-btn { flex: 1; }
.vox-wide { width: 100%; }

.vox-field { display: flex; align-items: center; gap: 6px; }
.vox-field-label { font-size: 11px; color: var(--vox-ink-dim); width: 42px; flex-shrink: 0; }
.vox-field .vox-select, .vox-field .vox-dim-input { flex: 1; }

/* Palette grid + recent colors */
.voxel-palette-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.voxel-swatch {
    width: 100%; aspect-ratio: 1 / 1; min-height: 22px;
    clip-path: var(--gf-cut-sm); cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.1s, transform 0.06s;
}
.voxel-swatch:hover { border-color: #8890a0; transform: scale(1.06); }
.voxel-swatch.selected { border-color: #ffcc33; }
.voxel-swatch.glowing { box-shadow: 0 0 7px 1px var(--vox-accent-glow); border-color: var(--vox-accent); }

.vox-recent-row { display: flex; gap: 3px; flex-wrap: wrap; }
.vox-recent-swatch {
    width: 18px; height: 18px; clip-path: var(--gf-cut-sm); cursor: pointer;
    border: 1px solid rgba(var(--gf-bone-rgb), 0.18);
}
.vox-recent-swatch:hover { border-color: #aab; }
.vox-recent-swatch.selected { border-color: #ffcc33; }

.voxel-label { color: var(--vox-ink-dim); font-size: 11px; white-space: nowrap; }
.vox-anchor-label { font-family: var(--gf-mono, var(--gf-font-mono)); font-size: 11px; color: var(--vox-accent); }

/* Picker row (color input + add / replace) */
.voxel-picker-row { display: flex; gap: 5px; align-items: center; }
.voxel-picker-row input[type="color"] {
    width: 38px; height: 28px; flex-shrink: 0;
    border: 1px solid var(--vox-line); background: none; clip-path: var(--gf-cut-sm); cursor: pointer; padding: 0;
}
.voxel-picker-row .vox-btn { flex: 1; }

/* Lighting sliders */
.vox-prop-body input[type="range"] { accent-color: var(--vox-accent); }

/* Dimensions / resize */
.vox-resize-row { display: flex; align-items: flex-end; gap: 5px; flex-wrap: wrap; }
.vox-resize-row .vox-field { flex-direction: column; align-items: stretch; gap: 2px; width: 42px; }
.vox-resize-row .vox-field-label { width: auto; font-size: 10px; text-align: center; }
.vox-dim-input {
    width: 100%; padding: 3px 4px; text-align: center;
    background: rgba(0, 0, 0, 0.35); border: 1px solid var(--vox-line);
    clip-path: var(--gf-cut-sm); color: var(--vox-ink); font-size: 12px;
}
.vox-resize-row .vox-btn { flex: 1; align-self: stretch; }

/* Rig editor */
.vox-rig-hint { font-size: 10.5px; color: var(--vox-ink-faint); font-style: italic; line-height: 1.4; }
.vox-rig-list { font-size: 12px; }
.vox-rig-editor { display: flex; flex-direction: column; gap: 6px; }
.vox-rig-empty { font-size: 11px; color: var(--vox-ink-faint); font-style: italic; padding: 2px 0; }
.vox-rig-readout { font-family: var(--gf-mono, var(--gf-font-mono)); font-size: 10.5px; color: var(--vox-accent); }
.vox-rig-check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--vox-ink-dim); cursor: pointer; }
.vox-rig-check input { accent-color: var(--vox-accent); }
.vox-rig-name { font-size: 12px; }
.vox-rig-lint { font-size: 10.5px; line-height: 1.4; padding: 4px 0; }
.vox-rig-lint.ok { color: #7bc96f; }
.vox-rig-lint.warn { color: #e0b23c; }
.vox-rig-lint ul { margin: 3px 0 0; padding-left: 15px; color: var(--vox-ink-dim); }
.vox-rig-lint li { margin: 1px 0; }
.vox-rig-preview-ctl { display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
    padding-top: 8px; border-top: 1px solid var(--vox-line, rgba(var(--gf-bone-rgb), 0.08)); }
.vox-rig-stress-note { color: var(--vox-accent); font-size: 10.5px; line-height: 1.4;
    padding: 5px 6px; border: 1px solid color-mix(in srgb, var(--vox-accent) 35%, transparent);
    clip-path: var(--gf-cut-sm); background: color-mix(in srgb, var(--vox-accent) 8%, transparent); }

/* -- Status bar -- */
.vox-statusbar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 5px 9px;
    flex-shrink: 0;
    background: var(--vox-panel);
    border-top: 1px solid var(--vox-line);
}
.vox-status-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vox-status-sep { width: 1px; height: 18px; background: var(--vox-line); margin: 0 3px; }
.vox-status-spacer { flex: 1; min-width: 8px; }


/* Keyboard-shortcut overlay */
.voxel-shortcuts {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    max-width: 460px;
    padding: 12px 16px;
    background: rgba(16, 18, 26, 0.96);
    border: 1px solid rgba(var(--gf-grid-cyan-rgb), 0.27);
    clip-path: var(--gf-cut);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(var(--gf-grid-cyan-rgb), 0.12);
    color: #cdd6e6;
    font-size: 12px;
    line-height: 1.7;
    cursor: pointer;
}
.voxel-shortcuts b { color: #8fe0ff; }

/* Inline editor toast */
.voxel-toast {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 31;
    padding: 6px 14px;
    background: rgba(16, 18, 26, 0.95);
    border: 1px solid rgba(var(--gf-grid-cyan-rgb), 0.33);
    clip-path: var(--gf-cut);
    color: #cdeaf5;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}

/* ── Staff Ribbon ──────────────────────────────────────────────────────────
   Top-center launcher pill that expands into a horizontal toolbar of tiles.
   Each tile opens a dropdown flyout. The color-mix lines each follow a plain
   fallback so engines without color-mix keep the base.

   Two variables, and the split is the point (VISUAL_IDENTITY.md, staff chrome):
     --ribbon-accent  Grid cyan, the SAME at every tier. It carries one meaning -
                      players cannot see this - so it must not vary by rank.
     --ribbon-role    the viewer's role color, and ONLY ever a 2px stripe or a
                      glyph tint. It used to drive the borders and glows, which
                      made an Administrator's staff UI read as red-for-danger and
                      an Owner's as a near-miss var(--gf-grid-cyan) pretending to be the Grid.
   Both are set from JS (staff_dashboard._applyAccent). */
:root {
    /* Staff chrome's two colors, with CSS fallbacks so the body-appended
       flyouts render correctly before staff_dashboard._applyAccent() runs.
       They used to live on `.staff-ribbon-root`, the fixed layer that held the
       launcher pill - which is gone: the panel's own MINIMIZED window is the
       pill now, so there is one surface, one position and one saved layout. */
    --ribbon-accent: var(--gf-grid-cyan, #66E0FF);
    --ribbon-role: var(--gf-grid-cyan, #66E0FF);
}

/* ── Staff panel ─ ONE window, three states ─────────────────────────
   MINIMIZED (the resting pill-bar) / OPEN (tiles) / HIDDEN. Tiles render in
   either a Sections or a flat Bar layout, optionally icons-only; a Customize
   mode shows/hides and reorders them. Reuses .staff-ribbon-tile + flyouts. */
.staff-panel-window {
    --ribbon-accent: var(--gf-grid-cyan, var(--gf-grid-cyan));
    --ribbon-role: var(--gf-grid-cyan, var(--gf-grid-cyan));
    background: var(--gf-staff-bg, rgba(12,26,32,0.90));
}
/* The role stripe - the ONE place rank is colored, mirroring the shape
   .staff-welcome-card already uses for exactly this. */
.staff-panel-content {
    display: flex; flex-direction: column;
    border-top: 2px solid var(--ribbon-role);
}
.staff-panel-body { padding: 6px 8px 12px; }

.staff-panel-toolbar {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 2px 2px 6px;
}
.staff-panel-custom-btn {
    padding: 4px 10px;
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.05));
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-2, var(--gf-text-2));
    cursor: pointer; font-size: 11px; font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.staff-panel-custom-btn:hover {
    background: var(--gf-slot-bg-hover, rgba(var(--gf-bone-rgb), 0.10));
    border-color: color-mix(in srgb, var(--ribbon-accent) 50%, transparent);
    color: var(--gf-text-1, var(--gf-text-1));
}
.staff-panel-custom-btn.on {
    background: color-mix(in srgb, var(--ribbon-accent) 20%, transparent);
    border-color: var(--ribbon-accent);
    color: var(--gf-text-1, var(--gf-text-1));
}
.staff-panel-hint {
    padding: 2px 4px 8px;
    font-size: 11px; line-height: 1.4; font-style: italic;
    color: var(--gf-text-3, var(--gf-text-3));
}

/* Titlebar gear (Customize toggle) - compact, right-grouped with the close × */
.staff-panel-window .game-window-title { flex: 1 1 auto; }
.game-window-titlebar-btn {
    background: none; border: none; cursor: pointer;
    color: var(--gf-text-3, var(--gf-text-3));
    font-size: 13px; line-height: 1; padding: 0 4px;
    transition: color 0.12s, transform 0.12s;
}
.game-window-titlebar-btn:hover {
    color: var(--gf-text-1, var(--gf-text-1)); transform: scale(1.12);
}
.staff-panel-gear.on {
    color: var(--ribbon-accent, var(--gf-accent, var(--gf-ember)));
}

/* ── Staff Gates management window ── */
.gates-panel { display: flex; flex-direction: column; height: 100%; font-size: 12px; }
.gates-panel-toolbar {
    display: flex; flex-direction: column; gap: 6px;
    padding: 6px 8px; flex-shrink: 0;
    border-bottom: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
}
.gates-panel-toolbar .gates-scope,
.gates-panel-toolbar .gates-filters,
.gates-panel-toolbar .gates-actions {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.gates-filters .gates-search { flex: 1 1 120px; min-width: 90px; }
.gates-panel input, .gates-panel select {
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.05));
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.10));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-1, var(--gf-text-1));
    padding: 3px 6px; font: inherit; font-size: 11px;
}
.gates-btn {
    padding: 3px 8px;
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.05));
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.10));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-2, var(--gf-text-2));
    cursor: pointer; font: inherit; font-size: 11px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.gates-btn:hover {
    background: var(--gf-slot-bg-hover, rgba(var(--gf-bone-rgb), 0.10));
    border-color: color-mix(in srgb, var(--ribbon-accent, var(--gf-ember)) 50%, transparent);
    color: var(--gf-text-1, var(--gf-text-1));
}
.gates-btn.on {
    background: color-mix(in srgb, var(--ribbon-accent, var(--gf-ember)) 20%, transparent);
    border-color: var(--ribbon-accent, var(--gf-ember));
    color: var(--gf-text-1, var(--gf-text-1));
}
.gates-btn.gates-danger:hover { border-color: var(--gf-danger, #c0503a); color: var(--gf-danger, #c0503a); }
.gates-btn.link-target { border-color: var(--gf-accent, var(--gf-ember)); color: var(--gf-accent, var(--gf-ember)); }
.gates-count { margin-left: auto; color: var(--gf-text-3, var(--gf-text-3)); font-size: 11px; }

.gates-linkbar {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; flex-shrink: 0;
    background: color-mix(in srgb, var(--gf-accent, var(--gf-ember)) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--gf-accent, var(--gf-ember)) 30%, transparent);
    color: var(--gf-text-1, var(--gf-text-1)); font-size: 11px;
}
.gates-linkbar span { flex: 1 1 auto; }

.gates-list { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 4px 6px; }
.gates-empty { padding: 16px; text-align: center; color: var(--gf-text-3, var(--gf-text-3)); font-style: italic; }

.gate-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 5px 6px; clip-path: var(--gf-cut-sm);
    border: 1px solid transparent;
}
.gate-row:hover { background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.04)); }
.gate-row.link-src { border-color: var(--gf-accent, var(--gf-ember)); background: color-mix(in srgb, var(--gf-accent, var(--gf-ember)) 8%, transparent); }
.gate-row.off { opacity: 0.55; }
.gate-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.gate-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--gf-accent, var(--gf-ember)); margin-right: 5px; vertical-align: middle;
}
.gate-row.off .gate-dot { background: var(--gf-text-3, var(--gf-text-3)); }
.gate-name { color: var(--gf-text-1, var(--gf-text-1)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-meta { color: var(--gf-text-3, var(--gf-text-3)); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-row-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.gate-row-actions .gates-btn { padding: 2px 6px; }
.gate-row-clickable { cursor: pointer; }
/* Only the NAME ellipses. The chips keep their width, or a long gate name
   would hide the "⚠ broken" badge the row exists to surface. */
.gate-row-head { display: flex; align-items: center; min-width: 0; }
.gate-row-head .gate-name { flex: 0 1 auto; min-width: 0; }
.gate-row-head .gate-chip { flex: 0 0 auto; }
.gates-btn.gates-primary { border-color: var(--gf-accent, var(--gf-trim)); color: var(--gf-accent, var(--gf-trim)); }
.gates-lead { display: flex; align-items: center; gap: 6px; }

/* Status chips shared by every gate surface - the list rows, the editor's
   destination rows, and the pair readout. */
.gate-chip {
    display: inline-block; margin-left: 5px; padding: 0 5px;
    clip-path: var(--gf-cut); font-size: 9px; font-weight: 700; line-height: 15px;
    vertical-align: middle; white-space: nowrap;
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.06));
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.12));
    color: var(--gf-text-3, var(--gf-text-3));
}
.gate-chip-link { color: #b78ce0; border-color: rgba(176,96,255,0.45); }
.gate-chip-bad {
    color: var(--gf-danger, var(--gf-danger));
    border-color: color-mix(in srgb, var(--gf-danger, var(--gf-danger)) 55%, transparent);
    background: color-mix(in srgb, var(--gf-danger, var(--gf-danger)) 12%, transparent);
}

/* ── Gridgate editor ── */
/* No `overflow` anywhere in here: .game-window-content is already the single
   scroll region, and a nested scroller is the double-scrollbar bug. */
.gate-ed { gap: 6px; }
.gate-ed .bm-form { gap: 5px; }
.gate-ed-row, .gate-ed-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--gf-text-2, var(--gf-text-2));
}
.gate-ed-row > input, .gate-ed-row > select, .gate-ed-color {
    /* min-width:0 on every shrinkable flex child. A <select> whose widest
       option is long has a min-content width to match, and `min-width:auto`
       refuses to shrink past it - which is exactly how the old panel's "Link
       gridgate" button got pushed off the right edge of the screen. */
    flex: 1 1 auto; min-width: 0;
}
.gate-ed-check { gap: 6px; }
.gate-ed-check input { flex: 0 0 auto; }
.gate-ed-color { display: flex; align-items: center; gap: 5px; }
.gate-ed-color input[type="color"] {
    flex: 0 0 auto; width: 26px; height: 20px; padding: 0;
    background: none; border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.14));
    clip-path: var(--gf-cut-sm); cursor: pointer;
}
.gate-ed-color input[type="color"].is-unset { opacity: 0.4; }
.gate-ed-where, .gate-ed-dest, .gate-ed-pair {
    font-size: 11px; color: var(--gf-text-2, var(--gf-text-2));
    padding: 4px 6px; clip-path: var(--gf-cut-sm);
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.04));
}
.gate-ed-muted { color: var(--gf-text-3, var(--gf-text-3)); font-style: italic; }
.gate-ed-btnrow { display: flex; gap: 5px; flex-wrap: wrap; }
.gate-ed-btnrow .bm-btn { flex: 1 1 auto; min-width: 0; }
.gate-ed-foot {
    display: flex; gap: 6px; margin-top: 6px; padding-top: 8px;
    border-top: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
}
.gate-ed-foot .bm-btn { flex: 1 1 auto; min-width: 0; }
.gate-ed .bm-btn.primary {
    border-color: var(--gf-accent, var(--gf-trim));
    color: var(--gf-accent-hot, var(--gf-trim-bright));
    background: color-mix(in srgb, var(--gf-accent, var(--gf-trim)) 16%, transparent);
}
.gate-ed-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; clip-path: var(--gf-cut-sm); font-size: 11px;
    background: color-mix(in srgb, var(--gf-accent, var(--gf-trim)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gf-accent, var(--gf-trim)) 35%, transparent);
    color: var(--gf-text-1, var(--gf-text-1));
}
.gate-ed-banner span { flex: 1 1 auto; min-width: 0; }

/* Gate info & history (read-only record at the top of the editor). */
.gate-hist-head { display: flex; align-items: center; justify-content: space-between; }
.gate-hist-line { font-size: 11px; color: var(--gf-text-2, var(--gf-text-2)); min-width: 0; overflow-wrap: anywhere; }
.gate-hist-line code { font-size: 10px; }
.gate-hist-ok { color: var(--gf-text-1, var(--gf-text-1)); }
.gate-hist-bad { color: var(--gf-danger, #e06a5a); font-weight: 600; }
.gate-hist-list {
    display: flex; flex-direction: column; gap: 2px; margin-top: 2px;
    padding: 4px 6px; clip-path: var(--gf-cut-sm);
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.04));
}
.gate-hist-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; min-width: 0; }
.gate-hist-when { flex: 0 0 52px; color: var(--gf-text-3, var(--gf-text-3)); }
.gate-hist-what { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Menu-gate destination rows. Order is the order the player sees, so the grip
   is a real affordance rather than decoration. */
.gate-dest-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 5px; clip-path: var(--gf-cut-sm);
    border: 1px solid transparent;
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.04));
    margin-bottom: 3px;
}
.gate-dest-row.dragging { opacity: 0.45; }
.gate-dest-row.drop-into { border-color: var(--gf-accent, var(--gf-trim)); }
.gate-dest-row.broken { border-color: color-mix(in srgb, var(--gf-danger, var(--gf-danger)) 45%, transparent); }
.gate-dest-grip { cursor: grab; color: var(--gf-text-3, var(--gf-text-3)); flex: 0 0 auto; }
.gate-dest-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.gate-dest-label {
    background: transparent; border: 1px solid transparent; clip-path: var(--gf-cut-sm);
    color: var(--gf-text-1, var(--gf-text-1)); font: inherit; font-size: 11px;
    font-weight: 600; padding: 1px 3px; min-width: 0; width: 100%;
}
.gate-dest-label:hover, .gate-dest-label:focus {
    border-color: var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.14));
    background: rgba(0,0,0,0.25); outline: none;
}
.gate-dest-meta {
    font-size: 10px; color: var(--gf-text-3, var(--gf-text-3));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gate-dest-rm { flex: 0 0 auto; }

/* ── Gate picker (modal over the shared list) ── */
.gate-picker-overlay { align-items: center; justify-content: center; }
.gate-picker-panel {
    display: flex; flex-direction: column;
    width: min(94vw, 560px); height: min(78vh, 560px);
    background: var(--gf-panel-bg-strong, rgba(14,14,20,0.94));
    border: 1px solid var(--gf-border-accent, rgba(var(--gf-trim-rgb), 0.40));
    clip-path: var(--gf-cut);
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    color: var(--gf-text-2, var(--gf-text-2)); font-size: 12px;
}
.gate-picker-head {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border-bottom: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
}
.gate-picker-head .gf-choice-title { flex: 1 1 auto; min-width: 0; }
.gate-picker-panel .gates-panel { flex: 1 1 auto; min-height: 0; }
.gate-picker-foot {
    display: flex; padding: 7px 10px;
    border-top: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
}
.gate-picker-foot .gates-btn { flex: 1 1 auto; }


/* ── Player-facing menu-gate picker ── */
.gate-menu-panel { padding: 10px 12px; color: var(--gf-text-2, var(--gf-bone)); font-size: 12px; }
.gate-menu-lead { font-size: 11px; color: var(--gf-text-3, var(--gf-text-3)); margin-bottom: 8px; }
.gate-menu-empty { color: var(--gf-text-3, var(--gf-text-3)); font-style: italic; }
.gate-menu-group {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: color-mix(in srgb, var(--gf-accent, var(--gf-trim)) 70%, var(--gf-text-2, var(--gf-text-2)));
    margin: 8px 0 3px;
}
.gate-menu-row {
    display: flex; align-items: center; gap: 9px; width: 100%;
    box-sizing: border-box; text-align: left; margin: 4px 0; padding: 7px 9px;
    background: rgba(var(--gf-trim-rgb), 0.12); color: var(--gf-text-1, #e6dcc4);
    border: 1px solid var(--gf-border-accent, rgba(var(--gf-trim-rgb), 0.55));
    clip-path: var(--gf-cut); cursor: pointer; font: inherit;
    transition: background 0.12s, border-color 0.12s;
}
.gate-menu-row:hover:not(:disabled) {
    background: rgba(var(--gf-trim-rgb), 0.24);
    border-color: var(--gf-accent, var(--gf-trim));
}
.gate-menu-row.broken { opacity: 0.5; cursor: default; border-style: dashed; }
.gate-menu-key {
    flex: 0 0 auto; width: 17px; height: 17px; line-height: 17px; text-align: center;
    clip-path: var(--gf-cut-sm); font-size: 10px; font-weight: 700;
    background: rgba(0,0,0,0.35); color: var(--gf-text-3, var(--gf-text-3));
}
.gate-menu-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gate-menu-label { font-weight: 600; }
.gate-menu-where {
    font-size: 10px; color: var(--gf-text-3, var(--gf-text-3));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.staff-panel-section { margin-bottom: 4px; }
.staff-panel-sec-hdr {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 6px;
    cursor: pointer; user-select: none;
    clip-path: var(--gf-cut-sm);
    transition: background 0.12s;
}
.staff-panel-sec-hdr:hover { background: rgba(var(--gf-bone-rgb), 0.04); }
.staff-panel-caret {
    color: var(--gf-text-3, var(--gf-text-3)); font-size: 10px;
    transition: transform 0.16s ease;
}
.staff-panel-section.collapsed .staff-panel-caret { transform: rotate(-90deg); }
.staff-panel-sec-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: color-mix(in srgb, var(--ribbon-accent) 65%, var(--gf-text-2, var(--gf-text-2)));
}
.staff-panel-tiles {
    display: flex; flex-wrap: wrap; gap: 5px;
    padding: 4px 2px 6px;
}
.staff-panel-section.collapsed .staff-panel-tiles { display: none; }

/* Customize mode: every tile shows (hidden ones dimmed); a click toggles the
   hidden flag instead of firing the action. */
.staff-ribbon-tile.customizing { border-style: dashed; }
.staff-ribbon-tile.tile-hidden { opacity: 0.34; filter: grayscale(0.7); }
.staff-ribbon-tile.customizing.tile-hidden::after {
    content: '＋'; position: absolute; top: 1px; right: 3px; font-size: 10px; opacity: 0.7;
}
.staff-ribbon-tile.customizing:not(.tile-hidden)::after {
    content: '✓'; position: absolute; top: 1px; right: 3px; font-size: 9px;
    color: #57c97a; opacity: 0.85;
}
.staff-ribbon-tile.customizing { position: relative; }

/* Drag-to-reorder (customize mode): tiles show a grab cursor; touch-action:none
   lets a touch-drag reorder rather than scroll the panel. The tile in hand lifts
   and goes click-through (pointer-events:none) so elementFromPoint resolves the
   sibling beneath the cursor. */
.staff-ribbon-tile.customizing { cursor: grab; touch-action: none; }
.staff-ribbon-tile.tile-dragging {
    cursor: grabbing;
    opacity: 0.55;
    pointer-events: none;
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    z-index: 3;
}

/* Expanding clip box - width animates 0→content, revealing the inner panel */
.staff-ribbon {
    position: absolute;
    top: 44px; left: 50%;
    transform: translateX(-50%);
    height: 60px; width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: width 0.30s cubic-bezier(0.2, 0.85, 0.25, 1), opacity 0.2s ease;
}
.staff-ribbon.open { opacity: 1; pointer-events: auto; }
.staff-ribbon-inner {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: stretch; gap: 5px;
    height: 100%;
    padding: 5px 8px;
    box-sizing: border-box;
    background: var(--gf-panel-bg, rgba(18,18,26,0.82));
    border: 1px solid var(--gf-border, rgba(var(--gf-bone-rgb), 0.12));
    border-color: color-mix(in srgb, var(--ribbon-accent) 30%, rgba(var(--gf-bone-rgb), 0.12));
    border-top: none;
    clip-path: var(--gf-cut);
    box-shadow: var(--gf-shadow, 0 6px 22px rgba(0,0,0,0.55)),
                0 0 24px color-mix(in srgb, var(--ribbon-accent) 16%, transparent);
}

/* Tiles */
.staff-ribbon-tile {
    flex: 0 0 auto;
    width: 58px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 4px 2px;
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.045));
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-2, var(--gf-text-2));
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease, color 0.12s ease;
}
.staff-ribbon-tile:hover {
    background: var(--gf-slot-bg-hover, rgba(var(--gf-bone-rgb), 0.10));
    border-color: color-mix(in srgb, var(--ribbon-accent) 50%, transparent);
    color: var(--gf-text-1, var(--gf-text-1));
    transform: translateY(-1px);
}
.staff-ribbon-tile.active {
    background: color-mix(in srgb, var(--ribbon-accent) 16%, transparent);
    border-color: var(--ribbon-accent);
    color: var(--gf-text-1, var(--gf-text-1));
    box-shadow: 0 0 10px color-mix(in srgb, var(--ribbon-accent) 35%, transparent);
}
.staff-ribbon-tile-icon { font-size: 18px; line-height: 1; }
.staff-ribbon-tile-label {
    font-size: 9px; letter-spacing: 0.3px; text-transform: uppercase;
    white-space: nowrap; opacity: 0.85;
}
.staff-ribbon-sep { flex: 0 0 auto; width: 1px; margin: 5px 3px; background: var(--gf-border, rgba(var(--gf-bone-rgb), 0.12)); }

/* Dropdown flyouts */
.staff-ribbon-flyout {
    position: fixed;
    z-index: 8001;
    min-width: 200px;
    max-width: min(460px, 94vw);
    max-height: 72vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--gf-panel-bg-strong, rgba(14,14,20,0.94));
    border: 1px solid var(--gf-border, rgba(var(--gf-bone-rgb), 0.12));
    border-color: color-mix(in srgb, var(--ribbon-accent) 40%, rgba(var(--gf-bone-rgb), 0.12));
    clip-path: var(--gf-cut);
    box-shadow: var(--gf-shadow-strong, 0 10px 38px rgba(0,0,0,0.7)),
                0 0 22px color-mix(in srgb, var(--ribbon-accent) 14%, transparent);
    color: var(--gf-text-1, var(--gf-text-1));
    font-family: var(--gf-font-ui);
    font-size: 12px;
    animation: staff-flyout-in 0.14s ease;
}
@keyframes staff-flyout-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.staff-ribbon-flyout.pinned {
    border-color: var(--ribbon-accent);
    box-shadow: var(--gf-shadow-strong, 0 10px 38px rgba(0,0,0,0.7)),
                0 0 0 1px color-mix(in srgb, var(--ribbon-accent) 50%, transparent),
                0 0 22px color-mix(in srgb, var(--ribbon-accent) 22%, transparent);
}
.staff-ribbon-flyout-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.staff-ribbon-flyout-title {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--gf-text-2, var(--gf-text-2));
    color: color-mix(in srgb, var(--ribbon-accent) 70%, var(--gf-text-2, var(--gf-text-2)));
    border-bottom: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    background: rgba(var(--gf-bone-rgb), 0.02);
}
.staff-ribbon-refresh, .staff-ribbon-pin {
    background: none; border: none; cursor: pointer;
    color: var(--gf-text-3, var(--gf-text-3)); font-size: 13px; padding: 0 2px; line-height: 1;
    transition: color 0.12s, transform 0.12s, opacity 0.12s, filter 0.12s;
}
.staff-ribbon-refresh:hover { color: var(--ribbon-accent); }
.staff-ribbon-pin { font-size: 12px; opacity: 0.55; filter: grayscale(1); }
.staff-ribbon-pin:hover { opacity: 0.9; }
.staff-ribbon-pin.pinned { opacity: 1; filter: none; transform: rotate(-20deg); }

.staff-ribbon-btnrow { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.staff-ribbon-btn {
    flex: 1 0 auto;
    padding: 6px 11px;
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.05));
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-1, var(--gf-text-1));
    cursor: pointer; font-size: 12px; font-family: inherit; white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}
.staff-ribbon-btn:hover {
    background: var(--gf-slot-bg-hover, rgba(var(--gf-bone-rgb), 0.10));
    border-color: color-mix(in srgb, var(--ribbon-accent) 55%, transparent);
}
.staff-ribbon-muted { padding: 10px 12px; color: var(--gf-text-3, var(--gf-text-3)); font-size: 11px; font-style: italic; }

/* Command-category flyouts: re-theme the shared sepia .cmd-* rows to gold-glass.
   (The standalone /commands window keeps its own .cmd-* look, untouched.) */
.staff-ribbon-flyout-cmds .cmd-list { padding: 4px 0 8px 0; }
.staff-ribbon-flyout-cmds .cmd-row:hover {
    background: color-mix(in srgb, var(--ribbon-accent) 10%, transparent);
    border-left-color: var(--ribbon-accent);
}
.staff-ribbon-flyout-cmds .cmd-label { color: var(--gf-text-1, var(--gf-text-1)); }
.staff-ribbon-flyout-cmds .cmd-slash { font-family: var(--gf-mono, var(--gf-font-mono)); }
.staff-ribbon-flyout-cmds .cmd-arg-input:focus { border-color: var(--ribbon-accent); }
.staff-ribbon-flyout-cmds .cmd-run-btn {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ribbon-accent) 30%, transparent),
        color-mix(in srgb, var(--ribbon-accent) 14%, transparent));
    border-color: color-mix(in srgb, var(--ribbon-accent) 50%, transparent);
    color: var(--gf-text-1, var(--gf-text-1));
}
.staff-ribbon-flyout-cmds .cmd-run-btn:hover {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ribbon-accent) 44%, transparent),
        color-mix(in srgb, var(--ribbon-accent) 20%, transparent));
}
.staff-ribbon-flyout-cmds .cmd-run-btn.confirm {
    background: linear-gradient(180deg, rgba(224,82,74,0.5), rgba(224,82,74,0.25));
    border-color: var(--gf-danger, var(--gf-danger));
    color: #ffe2de;
}

/* Staff chat flyout (pinnable + draggable by its header) */
.staff-ribbon-flyout-chat .staff-chat-draghandle { cursor: move; user-select: none; }
.staff-ribbon-flyout-chat.dragging { animation: none; cursor: move; }
.staff-ribbon-chat { width: 300px; max-width: 90vw; }
.staff-ribbon-chat .staff-dash-chatlog { margin: 8px 10px 0; height: 150px; }
.staff-ribbon-chat .staff-dash-input {
    display: block; box-sizing: border-box; width: calc(100% - 20px); margin: 8px 10px 10px;
}

/* ── Reused staff sub-styles (chat log, presence, picker rows) ── */
.staff-dash-presence {
    display: flex; flex-direction: column; gap: 3px;
    padding: 8px 12px;
    max-height: 160px; overflow-y: auto; color: var(--gf-text-2, #aab3c4); font-size: 11px;
}
.staff-dash-presence-row { display: flex; align-items: center; gap: 6px; }
.staff-dash-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.staff-dash-chatlog {
    overflow-y: auto;
    background: rgba(0,0,0,0.35); border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    clip-path: var(--gf-cut-sm);
    padding: 5px 7px; font-size: 11px; line-height: 1.5;
}
.staff-dash-chatline { color: #ffd479; }
.staff-dash-chatline b { color: #ffb938; }
.staff-dash-input {
    padding: 6px 9px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    clip-path: var(--gf-cut-sm); color: var(--gf-text-1, var(--gf-text-1)); font-size: 12px;
    font-family: var(--gf-font-ui);
}
.staff-dash-input:focus { outline: none; border-color: var(--ribbon-accent, var(--gf-grid-cyan)); }
.staff-dash-pick-row {
    padding: 5px 8px; border-bottom: 1px solid rgba(var(--gf-bone-rgb), 0.06); cursor: pointer;
    color: var(--gf-text-1, #cdd6e6); font-size: 12px;
}
.staff-dash-pick-row:hover { background: rgba(var(--gf-bone-rgb), 0.08); }

/* Bottom bar (legacy classes; superseded by the .vox-* app bar) */
.voxel-editor-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: #2a2a30;
    border-top: 1px solid var(--gf-plate-raised);
    flex-shrink: 0;
}

.voxel-name-input {
    flex: 1;
    padding: 3px 6px;
    background: #1a1a1e;
    color: var(--gf-text-1);
    border: 1px solid var(--gf-text-4);
    clip-path: var(--gf-cut-sm);
    font-size: 12px;
}

.voxel-cat-select {
    padding: 3px 6px;
    background: #1a1a1e;
    color: var(--gf-text-1);
    border: 1px solid var(--gf-text-4);
    clip-path: var(--gf-cut-sm);
    font-size: 12px;
}

.voxel-save-btn {
    padding: 4px 16px;
    background: #408040;
    color: #fff;
    border: 1px solid #509050;
    clip-path: var(--gf-cut-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}
.voxel-save-btn:hover { background: #509050; }

/* ── Studio Preview Widget ── */
.studio-preview-container {
    display: inline-block;
    clip-path: var(--gf-cut-sm);
    overflow: hidden;
    border: 1px solid var(--gf-plate-raised);
    background: #2a2a2e;
}

/* ── Studio Manager Toolbar ── */
.studio-toolbar {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: rgba(30, 30, 35, 0.9);
    clip-path: var(--gf-cut);
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    border: 1px solid var(--gf-plate-raised);
}

.studio-toolbar-btn {
    padding: 6px 14px;
    background: #3a3a45;
    color: var(--gf-text-1);
    border: 1px solid var(--gf-text-4);
    clip-path: var(--gf-cut-sm);
    cursor: pointer;
    font-size: 12px;
    font-family: var(--gf-font-ui);
}
.studio-toolbar-btn:hover { background: #4a4a58; }
.studio-toolbar-btn.active {
    background: #5080c0;
    border-color: #6090d0;
    color: #fff;
}

/* ── Renown HUD chip (unified Studio + Build Mode progression) ── */
.studio-renown {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(40, 90, 110, 0.5), rgba(50, 60, 100, 0.42));
    border: 1px solid var(--vox-line, rgba(120, 200, 255, 0.18));
    clip-path: var(--gf-cut);
    cursor: pointer;
    font-family: var(--gf-font-ui);
    color: #d6e6ec;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.studio-renown:hover {
    border-color: var(--vox-accent, var(--gf-grid-cyan));
    box-shadow: 0 0 10px rgba(var(--gf-grid-cyan-rgb), 0.25);
}
.studio-renown-rank {
    font-weight: 700;
    font-size: 12.5px;
    color: #ffe6a8;
    letter-spacing: 0.3px;
}
.studio-renown-xp { font-size: 11px; color: #9fd6ff; }
.studio-renown-bar {
    position: relative;
    width: 80px; height: 6px;
    background: rgba(0, 0, 0, 0.4);
    clip-path: var(--gf-cut-sm);
    overflow: hidden;
}
.studio-renown-bar i {
    position: absolute; left: 0; top: 0; bottom: 0;
    display: block;
    background: linear-gradient(90deg, var(--gf-grid-cyan), #ffd27a);
    clip-path: var(--gf-cut-sm);
    transition: width 0.4s ease;
}
.studio-renown-next { font-size: 10px; color: var(--vox-ink-dim, #8a93a6); }
.studio-renown-gold {
    font-size: 11px;
    color: #ffd27a;
    font-weight: 700;
    padding-left: 8px;
    border-left: 1px solid var(--vox-line, rgba(120, 200, 255, 0.18));
}

/* ── Leaderboard panel ── */
.studio-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 8px 0;
    max-height: 50vh;
    overflow-y: auto;
}
.studio-leaderboard-row {
    display: grid;
    grid-template-columns: 38px 1fr auto 70px auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    clip-path: var(--gf-cut-sm);
    background: rgba(var(--gf-bone-rgb), 0.025);
    font-size: 12px;
}
.studio-leaderboard-row:nth-child(odd) { background: rgba(var(--gf-bone-rgb), 0.05); }
.studio-leaderboard-row.me {
    background: rgba(var(--gf-grid-cyan-rgb), 0.14);
    box-shadow: inset 0 0 0 1px rgba(var(--gf-grid-cyan-rgb), 0.3);
}
.studio-lb-rank { color: var(--vox-ink-dim, #8a93a6); font-weight: 700; }
.studio-lb-name { color: #e6f2f6; font-weight: 600; }
.studio-lb-title { color: #ffe6a8; font-size: 11px; }
.studio-lb-xp { color: #9fd6ff; font-weight: 700; text-align: right; }
.studio-lb-detail { color: var(--vox-ink-dim, #8a93a6); font-size: 11px; white-space: nowrap; }

/* ── Worklist (needs badge + panel) ── */
.studio-needs-btn.has-needs {
    border-color: #e0b84a;
    color: #ffe6a8;
}
.studio-needs-count {
    display: inline-block;
    min-width: 16px;
    padding: 0 4px;
    margin-left: 2px;
    background: #e0b84a;
    color: #1a1a20;
    clip-path: var(--gf-cut);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}
.studio-worklist-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0;
    max-height: 52vh;
    overflow-y: auto;
}
.studio-worklist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    clip-path: var(--gf-cut);
    background: rgba(var(--gf-bone-rgb), 0.03);
    border-left: 3px solid var(--vox-line, rgba(120, 200, 255, 0.18));
}
/* Severity accents - actionable/yours first, gaps cooler. */
.studio-worklist-row.sev-rejected_rework { border-left-color: #e0734a; }
.studio-worklist-row.sev-commission      { border-left-color: #e0b84a; }
.studio-worklist-row.sev-pending_review  { border-left-color: #b06cff; }
.studio-worklist-row.sev-mob_no_model,
.studio-worklist-row.sev-placeholder_def { border-left-color: var(--gf-grid-cyan); }
.studio-wl-main { flex: 1; min-width: 0; }
.studio-wl-label { color: #e6f2f6; font-weight: 600; font-size: 12.5px; }
.studio-wl-detail {
    color: var(--vox-ink-dim, #8a93a6);
    font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.studio-wl-reward { color: #ffe6a8; font-size: 11px; margin-top: 2px; }
.studio-wl-tag {
    font-size: 10px;
    color: #9fd6ff;
    background: rgba(var(--gf-grid-cyan-rgb), 0.12);
    clip-path: var(--gf-cut);
    padding: 2px 8px;
    text-transform: capitalize;
    flex-shrink: 0;
}
.studio-wl-static { color: #7ee0a0; font-size: 11px; font-weight: 700; flex-shrink: 0; }

/* ── Cosmetics drawer ── */
.studio-cosmetics-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0;
    max-height: 52vh;
    overflow-y: auto;
}
.studio-cosmetic-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    clip-path: var(--gf-cut);
    background: rgba(var(--gf-bone-rgb), 0.03);
}
.studio-cosmetic-row.locked { opacity: 0.55; }
.studio-cosmetic-info { flex: 1; min-width: 0; }
.studio-cosmetic-label { color: #ffe6a8; font-weight: 700; font-size: 12.5px; }
.studio-cosmetic-meta { color: var(--vox-ink-dim, #8a93a6); font-size: 11px; text-transform: capitalize; }
.studio-cosmetic-lock { color: var(--vox-ink-faint, #6f7a90); }

/* ── Item Editor ── */
.item-editor-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #1e1e22;
    color: var(--gf-text-2);
    font-family: var(--gf-font-ui);
    font-size: 12px;
}

.item-editor-tabs {
    display: flex;
    background: #2a2a30;
    border-bottom: 1px solid var(--gf-plate-raised);
}

.item-editor-tab {
    padding: 6px 14px;
    cursor: pointer;
    color: var(--gf-text-3);
    border-bottom: 2px solid transparent;
    font-size: 11px;
    text-transform: uppercase;
}
.item-editor-tab:hover { color: var(--gf-text-2); }
.item-editor-tab.active {
    color: #fff;
    border-bottom-color: #5080c0;
}

.item-editor-panel {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.item-editor-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.item-editor-row label {
    width: 100px;
    text-align: right;
    color: var(--gf-text-3);
    font-size: 11px;
    flex-shrink: 0;
}

.item-editor-row input,
.item-editor-row select,
.item-editor-row textarea {
    flex: 1;
    padding: 3px 6px;
    background: #1a1a1e;
    color: var(--gf-text-1);
    border: 1px solid var(--gf-text-4);
    clip-path: var(--gf-cut-sm);
    font-size: 12px;
}

/* Effect cards */
.effect-card {
    background: #252530;
    border: 1px solid var(--gf-plate-raised);
    clip-path: var(--gf-cut-sm);
    padding: 8px;
    margin-bottom: 6px;
}

.effect-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.effect-card-title {
    font-weight: bold;
    color: var(--gf-text-1);
    font-size: 12px;
}

.effect-card-remove {
    background: #803030;
    color: #fff;
    border: none;
    clip-path: var(--gf-cut-sm);
    padding: 2px 8px;
    cursor: pointer;
    font-size: 10px;
}

.effect-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
}

.effect-card-body label {
    color: var(--gf-text-3);
    font-size: 10px;
    text-align: right;
    padding-top: 3px;
}

.effect-card-body input,
.effect-card-body select {
    padding: 2px 4px;
    background: #1a1a1e;
    color: var(--gf-text-1);
    border: 1px solid var(--gf-text-4);
    clip-path: var(--gf-cut-sm);
    font-size: 11px;
}

/* Rarity colors */
.rarity-junk { color: #808080; }
.rarity-common { color: #ffffff; }
.rarity-uncommon { color: #40c040; }
.rarity-rare { color: #4080ff; }
.rarity-epic { color: #a040d0; }
.rarity-legendary { color: #ff8020; }
.rarity-artifact { color: #ff2020; }

.rarity-badge {
    display: inline-block;
    padding: 2px 8px;
    clip-path: var(--gf-cut-sm);
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
}
.rarity-badge.junk { background: #404040; color: #808080; }
.rarity-badge.common { background: var(--gf-plate-raised); color: #fff; }
.rarity-badge.uncommon { background: #204020; color: #40c040; }
.rarity-badge.rare { background: #203060; color: #4080ff; }
.rarity-badge.epic { background: #302040; color: #a040d0; }
.rarity-badge.legendary { background: #403020; color: #ff8020; }
.rarity-badge.artifact { background: #401010; color: #ff2020; }

/* ── Studio Dialog System ── */
.studio-dialog-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.studio-dialog {
    background: #2a2a30;
    border: 1px solid var(--gf-text-4);
    clip-path: var(--gf-cut);
    padding: 16px;
    color: var(--gf-text-2);
    font-family: var(--gf-font-ui);
    font-size: 12px;
    min-width: 320px;
}

.studio-dialog-title {
    font-size: 14px;
    font-weight: bold;
    color: #eee;
    margin-bottom: 8px;
}

.studio-dialog-info {
    font-size: 11px;
    color: var(--gf-text-3);
    margin-bottom: 12px;
}

.studio-dialog-group {
    margin-bottom: 12px;
    padding: 8px;
    background: #222228;
    clip-path: var(--gf-cut-sm);
}

.studio-dialog-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    cursor: pointer;
    color: var(--gf-text-2);
    font-size: 12px;
}

.studio-dialog-radio input[type="radio"] {
    accent-color: #5080c0;
}

.studio-dialog-size-inputs {
    margin-left: 8px;
    color: var(--gf-text-3);
    font-size: 11px;
}

.studio-size-input {
    width: 48px !important;
    text-align: center;
}

.studio-dialog-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.studio-dialog-field label {
    width: 90px;
    text-align: right;
    color: var(--gf-text-3);
    font-size: 11px;
    flex-shrink: 0;
}

.studio-dialog-input {
    padding: 3px 6px;
    background: #1a1a1e;
    color: var(--gf-text-1);
    border: 1px solid var(--gf-text-4);
    clip-path: var(--gf-cut-sm);
    font-size: 12px;
}

.studio-dialog-select {
    padding: 3px 6px;
    background: #1a1a1e;
    color: var(--gf-text-1);
    border: 1px solid var(--gf-text-4);
    clip-path: var(--gf-cut-sm);
    font-size: 12px;
}

.studio-dialog-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.studio-dialog-btn {
    padding: 5px 16px;
    background: #3a3a42;
    color: var(--gf-text-2);
    border: 1px solid var(--gf-text-4);
    clip-path: var(--gf-cut-sm);
    cursor: pointer;
    font-size: 12px;
}
.studio-dialog-btn:hover { background: #4a4a55; }
.studio-dialog-btn:disabled { opacity: 0.5; cursor: default; }
.studio-dialog-btn.primary {
    background: #406080;
    color: #fff;
    border-color: #5080a0;
}
.studio-dialog-btn.primary:hover { background: #507090; }

/* ── The Forge (creation launcher) ── */
.studio-forge-dialog {
    width: 560px;
    max-width: 90vw;
    background: linear-gradient(180deg, #25272e 0%, #1d1f25 100%);
    border-color: #3a5566;
    box-shadow: 0 0 32px rgba(80, 190, 230, 0.12), inset 0 0 40px rgba(40, 90, 110, 0.08);
}
.studio-forge-header {
    border-bottom: 1px solid #33414a;
    padding-bottom: 10px;
    margin-bottom: 12px;
    position: relative;
}
.studio-forge-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #cdeaf5;
    text-shadow: 0 0 10px rgba(120, 210, 240, 0.45);
}
.studio-forge-sub {
    font-size: 11px;
    color: #8aa3ad;
    font-style: italic;
    margin-top: 2px;
}
.studio-forge-chip {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10.5px;
    color: #8fd6ff;
    background: rgba(40, 90, 110, 0.35);
    border: 1px solid #335;
    clip-path: var(--gf-cut);
    padding: 3px 9px;
}
.studio-forge-body { min-height: 180px; }
.studio-forge-prompt {
    font-size: 13px;
    color: #d6e6ec;
    margin-bottom: 10px;
}
.studio-forge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.studio-forge-tile {
    flex: 1 1 150px;
    min-width: 140px;
    background: #20222a;
    border: 1px solid #3a3f4a;
    clip-path: var(--gf-cut);
    padding: 12px 10px;
    color: #cdd;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.studio-forge-tile:hover {
    border-color: #59b6d6;
    box-shadow: 0 0 14px rgba(90, 182, 214, 0.25);
    transform: translateY(-1px);
}
.studio-forge-tile.selected {
    border-color: #6fd0ee;
    box-shadow: 0 0 16px rgba(111, 208, 238, 0.4);
    background: #243038;
}
.studio-forge-tile-icon { font-size: 26px; line-height: 1.2; }
.studio-forge-tile-label { font-size: 13px; font-weight: 600; color: #e6f2f6; margin-top: 4px; }
.studio-forge-tile-hint { font-size: 10px; color: #8298a1; margin-top: 3px; }
.studio-forge-tile-payout { font-size: 10px; color: #ffd27a; margin-top: 5px; letter-spacing: 1px; }
.studio-forge-tile-suggest {
    font-size: 10px;
    font-weight: 700;
    color: #1a1a20;
    background: #e0b84a;
    clip-path: var(--gf-cut);
    padding: 1px 6px;
    margin-top: 5px;
    display: inline-block;
}
.studio-forge-tile.suggested {
    border-color: #e0b84a;
    box-shadow: 0 0 12px rgba(224, 184, 74, 0.25);
}
.studio-forge-template { flex: 0 1 120px; min-width: 100px; padding: 14px 8px; }
.studio-forge-namerow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.studio-forge-namerow label { color: #8aa3ad; font-size: 11px; }
.studio-forge-namerow .studio-dialog-input { flex: 1; }

/* "Bring into the Grid" preview button in the voxel editor */
.voxel-preview-btn {
    margin-left: 8px;
    background: #2c5a52 !important;
    border-color: #4aa090 !important;
    color: #cdfdf2 !important;
    text-shadow: 0 0 8px rgba(120, 240, 220, 0.4);
}
.voxel-preview-btn:hover { background: #357066 !important; }

/* "Submit for Approval" button in the voxel editor */
.voxel-submit-btn {
    margin-left: 8px;
    background: #4a3f6a !important;
    border-color: #7a68b0 !important;
    color: #e6dcff !important;
}
.voxel-submit-btn:hover { background: #5a4d80 !important; }

/* ── Submissions / Review Queue ── */
.studio-subs-dialog { width: 600px; max-width: 92vw; }
.studio-subs-list {
    max-height: 56vh;
    overflow-y: auto;
    margin: 8px 0;
    border: 1px solid #3a3f4a;
    clip-path: var(--gf-cut);
}
.studio-sub-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #2c2f38;
}
.studio-sub-row:last-child { border-bottom: none; }
.studio-sub-info { flex: 1; min-width: 0; }
.studio-sub-name { font-size: 13px; color: #e6f2f6; font-weight: 600; }
.studio-sub-meta { font-size: 10.5px; color: #8298a1; margin-top: 2px; }
.studio-sub-note { font-size: 10.5px; color: #e0a060; margin-top: 3px; font-style: italic; }
.studio-sub-actions { display: flex; gap: 5px; flex-shrink: 0; }
.studio-sub-badge {
    flex-shrink: 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    clip-path: var(--gf-cut);
    border: 1px solid var(--gf-plate-raised);
    color: var(--gf-text-2);
    background: #2a2a30;
    min-width: 64px;
    text-align: center;
}
.studio-sub-badge.draft     { color: #aab; border-color: #556; }
.studio-sub-badge.submitted { color: #8fd6ff; border-color: #3a6678; background: rgba(40,90,110,0.3); }
.studio-sub-badge.approved  { color: #8fe6a0; border-color: #3a7850; background: rgba(40,90,60,0.3); }
.studio-sub-badge.rejected  { color: #f09090; border-color: #784040; background: rgba(90,40,40,0.3); }

/* Transient status toast */
.studio-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: rgba(30, 34, 42, 0.95);
    border: 1px solid #4aa090;
    color: #cdfdf2;
    font-family: var(--gf-font-ui);
    font-size: 13px;
    padding: 8px 16px;
    clip-path: var(--gf-cut);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10002;
}
.studio-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Batch Import ── */
.studio-batch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--gf-plate-raised);
}

.studio-batch-dim {
    color: var(--gf-text-4);
    font-size: 11px;
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

.studio-batch-progress {
    margin-top: 8px;
    color: #8cb8e0;
    font-size: 11px;
}

/* ── Model Library ── */
.studio-library-dialog {
    min-width: 600px;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.studio-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.studio-library-search {
    margin-bottom: 8px;
}

.studio-library-content {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 1px;
    border: 1px solid var(--gf-plate-raised);
    clip-path: var(--gf-cut-sm);
    overflow: hidden;
}

.studio-library-sidebar {
    width: 180px;
    flex-shrink: 0;
    background: #222228;
    overflow-y: auto;
    padding: 4px 0;
}

.studio-library-cat {
    padding: 5px 8px;
    cursor: pointer;
    color: var(--gf-text-2);
    font-size: 12px;
    user-select: none;
}
.studio-library-cat:hover { background: #2e2e36; }
.studio-library-cat.selected { background: #3a3a48; color: #fff; }

.studio-library-arrow {
    display: inline-block;
    width: 12px;
    text-align: center;
    font-size: 9px;
    color: var(--gf-text-4);
}

.studio-library-subcats {
    padding-left: 20px;
}

.studio-library-subcat {
    padding: 3px 8px;
    cursor: pointer;
    color: var(--gf-text-3);
    font-size: 11px;
}
.studio-library-subcat:hover { background: #2e2e36; color: var(--gf-text-2); }
.studio-library-subcat.selected { background: #3a3a48; color: #fff; }

.studio-library-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
    min-height: 300px;
}

.studio-library-model-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--gf-plate-raised);
    cursor: pointer;
    clip-path: var(--gf-cut-sm);
}
.studio-library-model-row:hover { background: var(--gf-plate-raised); }

.studio-library-model-name {
    color: var(--gf-text-1);
    font-size: 12px;
}

.studio-library-model-meta {
    color: var(--gf-text-4);
    font-size: 11px;
}

.studio-library-empty {
    padding: 20px;
    text-align: center;
    color: var(--gf-text-4);
    font-size: 12px;
}

/* ── Staff quick-toggle tiles (Creative / God / Vanish ON state) ── */
/* Distinct green "on" look so an active toggle reads apart from the blue
   accent .active state used for an open flyout. */
.staff-ribbon-tile.on {
    background: color-mix(in srgb, #57c97a 20%, transparent);
    border-color: #57c97a;
    color: #eafff0;
    box-shadow: 0 0 10px color-mix(in srgb, #57c97a 38%, transparent);
}
.staff-ribbon-tile.on .staff-ribbon-tile-label { opacity: 1; }

/* Tools-flyout player dropdown */
.staff-ribbon-select {
    margin: 8px 12px 2px;
    padding: 5px 8px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-1, var(--gf-text-1));
    font-size: 12px; font-family: var(--gf-font-ui);
}
.staff-ribbon-select:focus { outline: none; border-color: var(--ribbon-accent, var(--gf-grid-cyan)); }

/* ── Staff Speed widget (presets + slider) ── */
.staff-speed-presets .staff-ribbon-btn.on {
    background: color-mix(in srgb, var(--ribbon-accent, var(--gf-grid-cyan)) 26%, transparent);
    border-color: var(--ribbon-accent, var(--gf-grid-cyan));
    color: #eafff7;
}
.staff-speed-sliderrow {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 12px 10px;
}
.staff-speed-slider { flex: 1; accent-color: var(--ribbon-accent, var(--gf-grid-cyan)); cursor: pointer; }
.staff-speed-val {
    min-width: 34px; text-align: right;
    font-size: 12px; color: var(--gf-text-1, var(--gf-text-1));
    font-variant-numeric: tabular-nums;
}

/* ── Staff Character Editor / Inspector window ── */
.staff-insp {
    position: fixed;
    z-index: 8050;
    width: 440px; max-width: 94vw;
    max-height: 82vh;
    display: none; flex-direction: column;
    background: var(--gf-panel-bg-strong, rgba(14,14,20,0.95));
    border: 1px solid color-mix(in srgb, var(--ribbon-accent, var(--gf-grid-cyan)) 42%, rgba(var(--gf-bone-rgb), 0.12));
    clip-path: var(--gf-cut);
    box-shadow: var(--gf-shadow-strong, 0 10px 38px rgba(0,0,0,0.7)),
                0 0 22px color-mix(in srgb, var(--ribbon-accent, var(--gf-grid-cyan)) 14%, transparent);
    color: var(--gf-text-1, var(--gf-text-1));
    font-family: var(--gf-font-ui); font-size: 12px;
}
.staff-insp-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    background: rgba(var(--gf-bone-rgb), 0.02);
    cursor: move; user-select: none;
}
.staff-insp-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    color: color-mix(in srgb, var(--ribbon-accent, var(--gf-grid-cyan)) 70%, var(--gf-text-1, var(--gf-text-1)));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.staff-insp-x {
    background: none; border: none; color: var(--gf-text-3, var(--gf-text-3));
    cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px;
}
.staff-insp-x:hover { color: var(--gf-danger, var(--gf-danger)); }

.staff-insp-target { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; }
.staff-insp-select {
    flex: 1 1 auto; min-width: 0;
    padding: 5px 8px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-1, var(--gf-text-1)); font-size: 12px; font-family: inherit;
}
.staff-insp-select:focus { outline: none; border-color: var(--ribbon-accent, var(--gf-grid-cyan)); }
.staff-insp-iconbtn { flex: 0 0 auto; min-width: 30px; }

.staff-insp-tabs { display: flex; gap: 4px; padding: 4px 12px 0; }
.staff-insp-tab {
    padding: 5px 14px; cursor: pointer; font-size: 11px; font-family: inherit;
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.045));
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    border-bottom: none; clip-path: var(--gf-cut-top);
    color: var(--gf-text-2, var(--gf-text-2));
}
.staff-insp-tab.active {
    background: color-mix(in srgb, var(--ribbon-accent, var(--gf-grid-cyan)) 16%, transparent);
    border-color: color-mix(in srgb, var(--ribbon-accent, var(--gf-grid-cyan)) 45%, transparent);
    color: var(--gf-text-1, var(--gf-text-1));
}
.staff-insp-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 8px 12px 12px;
    border-top: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
}

.staff-insp-section { margin-bottom: 12px; }
.staff-insp-sectitle {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--gf-text-3, var(--gf-text-3)); margin: 4px 0 6px;
}
.staff-insp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.staff-insp-rlabel { flex: 0 0 96px; font-size: 12px; color: var(--gf-text-1, var(--gf-text-1)); }
.staff-insp-skname {
    flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.staff-insp-num {
    flex: 0 0 64px; width: 64px;
    padding: 3px 6px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-1, var(--gf-text-1)); font-size: 12px; font-family: inherit;
}
.staff-insp-num:focus { outline: none; border-color: var(--ribbon-accent, var(--gf-grid-cyan)); }
.staff-insp-toggle {
    flex: 0 0 26px; width: 26px; height: 24px; cursor: pointer;
    background: rgba(var(--gf-bone-rgb), 0.05); border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut-sm); font-size: 11px; line-height: 1;
}
.staff-insp-tg-up { color: #57c97a; }
.staff-insp-tg-down { color: #e0a23a; }
.staff-insp-tg-locked { color: #8a93a4; }

.staff-insp-pools { font-size: 12px; color: var(--gf-text-2, var(--gf-text-2)); margin-bottom: 6px; }
.staff-insp-btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.staff-insp-btn {
    padding: 5px 11px; cursor: pointer; font-size: 12px; font-family: inherit; white-space: nowrap;
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.05));
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut-sm); color: var(--gf-text-1, var(--gf-text-1));
    transition: background 0.12s, border-color 0.12s;
}
.staff-insp-btn:hover {
    background: var(--gf-slot-bg-hover, rgba(var(--gf-bone-rgb), 0.10));
    border-color: color-mix(in srgb, var(--ribbon-accent, var(--gf-grid-cyan)) 55%, transparent);
}
.staff-insp-filter {
    box-sizing: border-box; width: 100%; margin: 4px 0 8px;
    padding: 5px 8px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut-sm); color: var(--gf-text-1, var(--gf-text-1));
    font-size: 12px; font-family: inherit;
}
.staff-insp-filter:focus { outline: none; border-color: var(--ribbon-accent, var(--gf-grid-cyan)); }
.staff-insp-skills { display: flex; flex-direction: column; }
.staff-insp-muted { color: var(--gf-text-3, var(--gf-text-3)); font-size: 11px; font-style: italic; padding: 4px 0; }

/* Inventory grids (reuse the .inv-slot visual language from main.css) */
.staff-insp-grid { display: grid; gap: 3px; }
.staff-insp-equip { grid-template-columns: repeat(5, 1fr); }
.staff-insp-bag { grid-template-columns: repeat(8, 1fr); }
.staff-insp-hotbar { grid-template-columns: repeat(10, 1fr); }

/* The Take / Edit / Delete menu for a target's item slot used to be a second
   context-menu implementation living right here - its own DOM, its own viewport
   clamp, its own dismissal. That is precisely why it was the one staff surface
   the shared cyan chrome could not reach. It goes through ContextMenu now and is
   styled by .ctx-menu-staff in main.css; these rules are deliberately gone. */

/* Per-instance item editor. This is a full floating dialog, not an enlarged
   context menu: it uses the same gold window chrome and surface tokens as the
   rest of the GridForge HUD. */
.staff-insp-itemedit {
    position: fixed; z-index: 8060;
    display: flex; flex-direction: column;
    box-sizing: border-box;
    width: min(500px, calc(100vw - 24px)); min-width: 0;
    max-height: min(760px, calc(100vh - 24px));
    overflow: hidden;
    color: var(--gf-text-1, var(--gf-text-1));
    background:
        radial-gradient(circle at 82% -10%, rgba(var(--gf-trim-rgb), 0.08), transparent 34%),
        var(--gf-panel-bg-strong, rgba(14,14,20,0.96));
    border: 1px solid var(--gf-border-accent, rgba(var(--gf-trim-rgb), 0.40));
    clip-path: var(--gf-cut);
    box-shadow: var(--gf-shadow-strong, 0 10px 38px rgba(0,0,0,0.7)),
                0 0 0 1px rgba(0,0,0,0.65),
                0 0 24px rgba(var(--gf-trim-rgb), 0.08);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 12px; line-height: 1.35;
}
.staff-insp-itemedit *, .staff-insp-itemedit *::before, .staff-insp-itemedit *::after {
    box-sizing: border-box;
}
.staff-insp-itemedit-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    min-height: 58px; padding: 8px 10px 8px 12px;
    background: linear-gradient(180deg, rgba(84,66,30,0.62), rgba(40,32,18,0.66));
    border-bottom: 1px solid var(--gf-border-accent, rgba(var(--gf-trim-rgb), 0.40));
    cursor: grab; user-select: none;
}
.staff-insp-itemedit-head:active { cursor: grabbing; }
.staff-insp-itemedit-heading { min-width: 0; flex: 1 1 auto; }
.staff-insp-itemedit-eyebrow {
    margin-bottom: 1px;
    color: var(--gf-accent, var(--gf-trim));
    font-family: var(--gf-mono, ui-monospace, monospace);
    font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase;
}
.staff-insp-itemedit-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--gf-text-1, var(--gf-text-1));
    font-size: 14px; font-weight: 650;
    text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}
.staff-insp-itemedit-id {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-top: 1px; max-width: 330px;
    color: var(--gf-text-3, var(--gf-text-3));
    font-family: var(--gf-mono, ui-monospace, monospace); font-size: 9px;
}
.staff-insp-itemedit-head-actions {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
}
.staff-insp-item-budget {
    padding: 3px 7px;
    color: var(--gf-text-2, var(--gf-text-2));
    background: rgba(0,0,0,0.24);
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut-sm);
    font-family: var(--gf-mono, ui-monospace, monospace); font-size: 9px;
    white-space: nowrap;
}
.staff-insp-item-budget.over {
    color: #ffbd7a; border-color: rgba(224,128,64,0.62);
    background: rgba(224,128,64,0.13);
}
.staff-insp-itemedit-x {
    width: 26px; height: 26px; padding: 0;
    background: transparent; border: 0; clip-path: var(--gf-cut-sm);
    color: var(--gf-text-3, var(--gf-text-3));
    font: 18px/1 var(--gf-font-ui); cursor: pointer;
    transition: color 0.12s, background 0.12s, transform 0.12s;
}
.staff-insp-itemedit-x:hover {
    color: #fff; background: rgba(224,82,74,0.24); transform: scale(1.06);
}
.staff-insp-itemedit-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 10px;
    scrollbar-gutter: stable;
}
.staff-insp-itemedit-footer {
    flex: 0 0 auto; display: flex; justify-content: flex-end;
    padding: 7px 10px;
    background: rgba(0,0,0,0.18);
    border-top: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
}
.staff-insp-itemedit .staff-insp-btn {
    min-height: 27px; padding: 4px 9px;
    color: var(--gf-text-2, var(--gf-text-2));
    background: linear-gradient(180deg, rgba(var(--gf-bone-rgb), 0.065), rgba(var(--gf-bone-rgb), 0.025));
    border: 1px solid var(--gf-border, rgba(var(--gf-bone-rgb), 0.12));
    clip-path: var(--gf-cut-sm);
    font: 11px/1.2 'Segoe UI', system-ui, sans-serif;
    text-align: center; cursor: pointer;
}
.staff-insp-itemedit .staff-insp-btn:hover {
    color: var(--gf-text-1, var(--gf-text-1));
    background: rgba(var(--gf-trim-rgb), 0.10);
    border-color: var(--gf-border-accent, rgba(var(--gf-trim-rgb), 0.40));
}
.staff-insp-itemedit .staff-insp-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
}
.staff-insp-itemedit .staff-insp-item-primary {
    display: block; margin: 9px 0 0 auto;
    color: #19140b;
    background: linear-gradient(180deg, var(--gf-accent-hot, var(--gf-trim-bright)), var(--gf-accent, var(--gf-trim)));
    border-color: var(--gf-accent-hot, var(--gf-trim-bright));
    font-weight: 700;
}
.staff-insp-itemedit .staff-insp-item-primary:hover {
    color: #100c06; background: var(--gf-accent-hot, var(--gf-trim-bright));
}
.staff-insp-item-secondary { min-width: 70px; }
.staff-insp-itemedit .staff-insp-muted {
    padding: 4px 0; color: var(--gf-text-3, var(--gf-text-3));
    font-size: 11px; font-style: normal;
}
.staff-insp-item-loading {
    padding: 42px 14px; color: var(--gf-text-3, var(--gf-text-3));
    text-align: center; font-size: 11px;
}
.staff-insp-item-error {
    margin: 0 0 10px; padding: 8px 9px;
    border: 1px solid rgba(224,82,74,0.55);
    clip-path: var(--gf-cut-sm);
    background: rgba(224,82,74,0.12); color: #ffd8d3;
    font-size: 11px; line-height: 1.4;
}
.staff-insp-item-section {
    margin: 0 0 10px; padding: 10px;
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut);
    background: linear-gradient(145deg, rgba(var(--gf-bone-rgb), 0.035), rgba(0,0,0,0.14));
    box-shadow: inset 0 1px 0 rgba(var(--gf-bone-rgb), 0.025);
}
.staff-insp-item-section:last-child { margin-bottom: 0; }
.staff-insp-item-section-title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px;
    color: var(--gf-accent, var(--gf-trim));
    font-family: var(--gf-mono, ui-monospace, monospace);
    font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase;
}
.staff-insp-item-section-title::after {
    content: ''; height: 1px; flex: 1 1 auto;
    background: linear-gradient(90deg, var(--gf-border-accent, rgba(var(--gf-trim-rgb), 0.40)), transparent);
    opacity: 0.55;
}
.staff-insp-item-combo { width: 100%; margin-bottom: 7px; }
.staff-insp-itemedit .gf-input,
.staff-insp-item-field input,
.staff-insp-item-field select {
    box-sizing: border-box; min-width: 0; width: 100%; min-height: 29px;
    padding: 5px 7px; color: var(--gf-text-1, var(--gf-text-1));
    background: rgba(5,5,9,0.48);
    border: 1px solid var(--gf-border, rgba(var(--gf-bone-rgb), 0.12));
    clip-path: var(--gf-cut-sm);
    font: 11px/1.2 'Segoe UI', system-ui, sans-serif;
}
.staff-insp-itemedit .gf-input:hover,
.staff-insp-item-field input:hover,
.staff-insp-item-field select:hover { border-color: rgba(var(--gf-trim-rgb), 0.28); }
.staff-insp-itemedit .gf-input:focus,
.staff-insp-item-field input:focus,
.staff-insp-item-field select:focus {
    outline: none; border-color: var(--gf-accent, var(--gf-trim));
    box-shadow: 0 0 0 1px rgba(var(--gf-trim-rgb), 0.12);
}
.staff-insp-item-field {
    display: grid;
    grid-template-columns: minmax(92px, 0.8fr) minmax(110px, 1.3fr) auto auto;
    align-items: center; gap: 6px; margin-top: 7px;
    font-size: 11px;
}
.staff-insp-item-field > label {
    min-width: 0; color: var(--gf-text-2, var(--gf-text-2));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.staff-insp-item-field > .gf-combo { min-width: 110px; }
.staff-insp-item-help {
    margin-top: 5px; color: var(--gf-text-3, var(--gf-text-3));
    font-size: 10px; line-height: 1.4;
}
.staff-insp-item-fixed {
    min-width: 0; min-height: 29px; padding: 6px 7px;
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    clip-path: var(--gf-cut-sm);
    background: rgba(var(--gf-bone-rgb), 0.025); color: var(--gf-text-3, var(--gf-text-3));
    font-family: var(--gf-mono, ui-monospace, monospace); font-size: 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.staff-insp-item-summary {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px; margin: 7px 0 2px;
}
.staff-insp-item-summary-cell {
    min-width: 0; padding: 5px 6px;
    background: rgba(0,0,0,0.18);
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    clip-path: var(--gf-cut-sm);
}
.staff-insp-item-summary-cell.effective {
    background: rgba(var(--gf-trim-rgb), 0.07);
    border-color: rgba(var(--gf-trim-rgb), 0.20);
}
.staff-insp-item-summary-label,
.staff-insp-item-summary-value { display: block; min-width: 0; }
.staff-insp-item-summary-label {
    margin-bottom: 2px; color: var(--gf-text-4, var(--gf-text-4));
    font-size: 8px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}
.staff-insp-item-summary-value {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--gf-text-2, var(--gf-text-2));
    font-family: var(--gf-mono, ui-monospace, monospace); font-size: 10px;
}
.staff-insp-item-summary-cell.effective .staff-insp-item-summary-value {
    color: var(--gf-accent-hot, var(--gf-trim-bright));
}
.staff-insp-item-subtitle {
    margin: 10px 0 4px; padding-top: 7px;
    border-top: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    color: var(--gf-text-4, var(--gf-text-4));
    font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.staff-insp-item-existing {
    display: flex; align-items: center; gap: 7px;
    min-height: 29px; padding: 3px 0;
    color: var(--gf-text-2, var(--gf-text-2)); font-size: 10px;
}
.staff-insp-item-existing > span:first-child {
    flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--gf-mono, ui-monospace, monospace);
}
.staff-insp-item-lock,
.staff-insp-item-source {
    flex: 0 0 auto; padding: 2px 5px;
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-4, var(--gf-text-4));
    font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em;
}
.staff-insp-item-source.instance {
    color: var(--gf-accent, var(--gf-trim)); border-color: rgba(var(--gf-trim-rgb), 0.24);
}
.staff-insp-effrow {
    display: flex; align-items: center; gap: 7px;
    min-height: 36px; padding: 5px 6px;
    border-bottom: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    color: var(--gf-text-1, var(--gf-text-1));
}
.staff-insp-effrow:last-child { border-bottom: 0; }
.staff-insp-efftext { flex: 1 1 auto; min-width: 0; }
.staff-insp-effname {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11px; font-weight: 600;
}
.staff-insp-effdetail {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--gf-text-3, var(--gf-text-3));
    font-family: var(--gf-mono, ui-monospace, monospace); font-size: 9px;
}
.staff-insp-itemedit .staff-insp-item-iconbtn {
    flex: 0 0 auto; width: 24px; min-width: 24px; min-height: 24px; padding: 0;
    color: var(--gf-text-3, var(--gf-text-3)); font-size: 15px;
}

@media (max-width: 460px) {
    .staff-insp-itemedit-head { gap: 8px; }
    .staff-insp-itemedit-id { max-width: 210px; }
    .staff-insp-item-budget { padding-inline: 5px; }
    .staff-insp-item-field { grid-template-columns: minmax(0, 1fr) auto auto; }
    .staff-insp-item-field > label { grid-column: 1 / -1; }
    .staff-insp-item-field > .gf-combo,
    .staff-insp-item-field > input,
    .staff-insp-item-field > select,
    .staff-insp-item-field > .staff-insp-item-fixed { grid-column: 1 / 2; }
}

/* ── Studio dialog/toast kit (studio_dialogs.js - the alert()/prompt() replacement) ── */
.studio-global-toast {
    position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(8px);
    z-index: 8500; max-width: min(520px, 80vw);
    padding: 9px 16px; clip-path: var(--gf-cut-sm);
    background: var(--gf-panel-bg-strong, rgba(14,14,20,0.94));
    border: 1px solid color-mix(in srgb, var(--gf-gold, var(--gf-trim)) 45%, rgba(var(--gf-bone-rgb), 0.12));
    color: var(--gf-text-1, var(--gf-text-1)); font-size: 13px; text-align: center;
    box-shadow: var(--gf-shadow-strong, 0 10px 38px rgba(0,0,0,0.7));
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.studio-global-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.studio-global-toast.error { border-color: rgba(224,82,74,0.75); color: #ffd9d4; }
.studio-global-toast.ok { border-color: rgba(110,200,120,0.7); }

.studio-kit-dialog { max-width: 420px; }
.studio-dialog-btn.danger {
    border-color: rgba(224,82,74,0.6); color: #ffd9d4;
}
.studio-dialog-btn.danger:hover { background: rgba(224,82,74,0.25); }

/* Read-only banner shown in the editor when the model isn't yours to save */
.vox-readonly-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px; font-size: 12px;
    color: #ffe9b0;
    background: linear-gradient(180deg, rgba(var(--gf-trim-rgb), 0.22), rgba(var(--gf-trim-rgb), 0.10));
    border-bottom: 1px solid rgba(var(--gf-trim-rgb), 0.45);
}
.vox-readonly-banner .vox-readonly-icon { opacity: 0.9; }

/* Library ownership/status chips (Pass 0: text badges on rows) */
.studio-library-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    clip-path: var(--gf-cut); font-size: 10px; vertical-align: middle;
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.12));
    color: var(--gf-text-2, var(--gf-text-2));
}
.studio-library-badge.mine { border-color: rgba(110,200,120,0.55); color: #bfe9c5; }
.studio-library-badge.readonly { border-color: rgba(var(--gf-bone-rgb), 0.18); }
.studio-library-badge.status-draft { border-color: rgba(var(--gf-grid-cyan-rgb), 0.45); color: #bfeaff; }
.studio-library-badge.status-submitted { border-color: rgba(var(--gf-trim-rgb), 0.6); color: #ffe9b0; }
.studio-library-badge.status-approved { border-color: rgba(110,200,120,0.6); color: #bfe9c5; }
.studio-library-badge.status-rejected { border-color: rgba(224,82,74,0.6); color: #ffd9d4; }

/* Library error state (server unreachable ≠ empty catalog) */
.studio-library-error {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 28px 12px; color: var(--gf-text-2, var(--gf-text-2)); font-size: 13px;
}


/* ── Redesigned Card Grid & Library Cards (Pass 3) ── */
.studio-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 16px;
    flex: 1;
    overflow-y: auto;
    background: rgba(18, 18, 24, 0.4);
    min-height: 400px;
}

.studio-library-card {
    background: rgba(30, 30, 38, 0.7);
    border: 1px solid rgba(var(--gf-bone-rgb), 0.08);
    clip-path: var(--gf-cut);
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    user-select: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.studio-library-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.35); /* Subtle gold highlight */
    background: rgba(36, 36, 46, 0.85);
}

.studio-library-card-thumb {
    height: 120px;
    background: rgba(10, 10, 14, 0.6);
    clip-path: var(--gf-cut);
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.studio-library-card-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.studio-library-card-fallback-icon {
    font-size: 40px;
    opacity: 0.75;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.studio-library-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #eee;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-library-card-meta {
    font-size: 11px;
    color: #8a8a9c;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-library-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
    min-height: 18px;
}

.studio-library-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}

.studio-library-card-actions button {
    padding: 3px 6px;
    font-size: 10px !important;
    flex: 1;
    min-width: 48px;
    text-align: center;
    white-space: nowrap;
}

.studio-forge-template-preview {
    width: 140px;
    height: 110px;
    margin: 8px auto 0 auto;
    clip-path: var(--gf-cut-sm);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.15);
}

.studio-forge-template-fallback {
    font-size: 48px;
    margin: 20px 0;
    text-align: center;
    opacity: 0.8;
}

.studio-library-sidebar-label {
    padding: 8px 10px 4px 10px;
    font-size: 9px;
    font-weight: 700;
    color: #66667f;
    letter-spacing: 1px;
}

.studio-forge-namerow select.studio-dialog-input {
    background: #1b1b22;
    border: 1px solid var(--gf-plate-raised);
    color: #eee;
    clip-path: var(--gf-cut-sm);
    padding: 6px;
    width: 100%;
}

/* ============================================================
   Pass 7 - first-run coach-mark tour + Help cheatsheet
   ============================================================ */

.studio-help-btn {
    font-weight: 700;
    min-width: 30px;
    text-align: center;
}

.studio-help-dialog { max-width: min(560px, 92vw); text-align: left; }
.studio-help-body { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 14px; }
.studio-help-section { display: flex; flex-direction: column; gap: 4px; }
.studio-help-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vox-accent, var(--gf-grid-cyan));
    font-weight: 700;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--vox-line, rgba(120,200,255,0.12));
}
.studio-help-row { display: grid; grid-template-columns: 128px 1fr; gap: 10px; font-size: 12.5px; }
.studio-help-key { color: var(--vox-ink, #d6dbe6); font-weight: 600; }
.studio-help-val { color: var(--vox-ink-dim, #8a93a6); }

/* The tour overlay sits above the toolbar (z 9000). The spotlight box dims the
   whole screen through its huge box-shadow, leaving a lit "hole" over the target;
   the transparent mask beneath captures a click-to-advance. */
.studio-tour { position: fixed; inset: 0; z-index: 10001; }
.studio-tour-mask { position: absolute; inset: 0; cursor: pointer; }
.studio-tour-spot {
    position: absolute;
    clip-path: var(--gf-cut);
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(8, 12, 18, 0.74),
                0 0 0 2px var(--vox-accent, var(--gf-grid-cyan)),
                0 0 26px 5px var(--vox-accent-glow, rgba(var(--gf-grid-cyan-rgb), 0.4));
    transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.studio-tour-card {
    position: absolute;
    width: 320px;
    max-width: 92vw;
    background: var(--vox-panel, rgba(22,25,32,0.98));
    border: 1px solid var(--vox-accent, var(--gf-grid-cyan));
    clip-path: var(--gf-cut);
    padding: 16px 18px;
    color: var(--vox-ink, #d6dbe6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--gf-grid-cyan-rgb), 0.15);
    pointer-events: auto;
}
.studio-tour-step {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vox-ink-faint, #6f7a90);
    margin-bottom: 6px;
}
.studio-tour-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--vox-accent, var(--gf-grid-cyan));
    margin-bottom: 6px;
}
.studio-tour-body { font-size: 13px; line-height: 1.5; color: var(--vox-ink-dim, #b7c0d0); }
.studio-tour-body b { color: var(--vox-ink, #d6dbe6); font-weight: 600; }
.studio-tour-dots { display: flex; gap: 6px; margin: 14px 0 12px; }
.studio-tour-dots i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--vox-line, rgba(120,200,255,0.2));
    transition: background 0.2s ease, transform 0.2s ease;
}
.studio-tour-dots i.on { background: var(--vox-accent, var(--gf-grid-cyan)); transform: scale(1.25); }
.studio-tour-nav { display: flex; align-items: center; gap: 8px; }
.studio-tour-spacer { flex: 1; }
.studio-tour-btn {
    background: rgba(var(--gf-bone-rgb), 0.06);
    border: 1px solid var(--vox-line, rgba(120,200,255,0.18));
    color: var(--vox-ink, #d6dbe6);
    clip-path: var(--gf-cut-sm);
    padding: 6px 14px;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.studio-tour-btn:hover { background: rgba(var(--gf-bone-rgb), 0.12); }
.studio-tour-btn.primary {
    background: var(--vox-accent, var(--gf-grid-cyan));
    border-color: var(--vox-accent, var(--gf-grid-cyan));
    color: #0c1116;
    font-weight: 700;
}
.studio-tour-btn.primary:hover { filter: brightness(1.08); }
.studio-tour-btn.skip { color: var(--vox-ink-faint, #6f7a90); border-color: transparent; padding-left: 4px; }
.studio-tour-btn.skip:hover { color: var(--vox-ink, #d6dbe6); background: transparent; }

/* ============================================================
   Map Studio Grand Features: Cinematic Director & Quest Graph
   ============================================================ */

.cinematic-director-bar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(18, 22, 30, 0.92);
    border: 1px solid var(--vox-accent, var(--gf-grid-cyan));
    clip-path: var(--gf-cut);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(var(--gf-grid-cyan-rgb), 0.2);
    z-index: 100;
}

.cinematic-director-preset-select {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(var(--gf-grid-cyan-rgb), 0.3);
    clip-path: var(--gf-cut-sm);
    color: var(--gf-grid-cyan);
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
}

/* Record affordance in ember, not stoplight red - VISUAL_IDENTITY.md keeps the
   palette to void/ember/ash-gold/bone with Grid cyan the one cool accent. */
.cinematic-record-btn {
    background: linear-gradient(180deg, var(--gf-ember) 0%, #8d3612 100%);
    border: 1px solid #f0854e;
    clip-path: var(--gf-cut);
    color: #ffe9d8;
    font-weight: 700;
    padding: 3px 11px;
    font-size: 11px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(226, 98, 42, 0.45);
}

.cinematic-record-btn:hover {
    filter: brightness(1.15);
}

.slice-plane-slider-wrapper {
    position: absolute;
    top: 70px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    background: rgba(22, 26, 36, 0.88);
    border: 1px solid rgba(var(--gf-bone-rgb), 0.12);
    clip-path: var(--gf-cut);
    z-index: 90;
}

.ghost-playtest-hud {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 6px 12px;
    background: rgba(46, 125, 50, 0.9);
    border: 1px solid #4caf50;
    clip-path: var(--gf-cut-sm);
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 100;
}


/* ══ Staff panel: minimized bar, chrome, layouts ═══════════════════════════ */

/* The MINIMIZED state is the launcher. Shrink-wrap it so a bar carrying a cube,
   a word and a number is exactly that wide - the window's saved pixel width
   belongs to the OPEN state and must not stretch the pill. `!important` beats
   the inline width/height GameWindow writes for the open geometry. */
.game-window.gf-window-minimized {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    resize: none;
}
.game-window.gf-window-minimized > .game-window-content,
.game-window.gf-window-minimized > .game-window-resize { display: none !important; }
.game-window.gf-window-minimized > .game-window-titlebar { border-bottom: none; }
/* Open, the title takes the slack so the chrome right-groups. Minimized, it must
   NOT, or the bar stretches to whatever width the flex context offers. */
.game-window.gf-window-minimized .game-window-title { flex: 0 0 auto; }
.staff-panel-window.gf-window-minimized {
    clip-path: var(--gf-cut-sm);
    /* The role stripe lives on .staff-panel-content, which is hidden while
       collapsed - so the collapsed bar carries rank on its own top border. */
    border-top: 2px solid var(--ribbon-role, var(--gf-grid-cyan, var(--gf-grid-cyan)));
}
.staff-panel-window.gf-window-minimized > .game-window-titlebar {
    padding-left: 10px; padding-right: 6px;
    cursor: grab;
}
.staff-panel-window.gf-window-minimized > .game-window-titlebar:active { cursor: grabbing; }

/* The cube mark. Its glow is the one place the ROLE color shows on the bar,
   since a 999px border cannot carry a stripe. */
.staff-panel-mark {
    display: inline-flex; align-items: center;
    color: var(--ribbon-accent); font-size: 13px; margin-right: 5px;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ribbon-role) 70%, transparent));
}
.staff-panel-mark .gf-ic { color: var(--ribbon-accent); }

/* Population chip - live in BOTH the minimized bar and the open titlebar. */
.staff-pop-chip {
    display: inline-flex; align-items: center; gap: 3px;
    margin: 0 4px; padding: 1px 8px;
    border: 1px solid color-mix(in srgb, var(--ribbon-accent) 40%, transparent);
    clip-path: var(--gf-cut-sm);
    background: color-mix(in srgb, var(--ribbon-accent) 10%, transparent);
    color: var(--gf-text-1, var(--gf-text-1));
    font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px; white-space: nowrap; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.staff-pop-chip:hover {
    background: color-mix(in srgb, var(--ribbon-accent) 22%, transparent);
    border-color: var(--ribbon-accent);
}
.staff-pop-chip.loading { opacity: 0.55; }
/* A count that cannot be trusted is never a number. `unknown` = the heartbeat
   is unreachable and the total would be this process alone; `partial` = a
   registered process went silent, so the number is real but low. */
.staff-pop-chip.unknown {
    border-color: color-mix(in srgb, var(--gf-danger, var(--gf-danger)) 55%, transparent);
    background: color-mix(in srgb, var(--gf-danger, var(--gf-danger)) 12%, transparent);
    color: #ffd9d5;
}
.staff-pop-chip.partial {
    border-color: color-mix(in srgb, var(--gf-gold-bright, var(--gf-trim-bright)) 55%, transparent);
    background: color-mix(in srgb, var(--gf-gold-bright, var(--gf-trim-bright)) 12%, transparent);
    color: #ffeccb;
}

/* Support pages chip - pages this rank could claim; visible collapsed too.
   Amber / red once the oldest waiting page passes support.age_warn_s /
   support.age_alarm_s. */
.staff-pages-chip {
    display: inline-flex; align-items: center; gap: 3px;
    margin: 0 4px 0 0; padding: 1px 8px;
    border: 1px solid color-mix(in srgb, var(--ribbon-accent) 30%, transparent);
    clip-path: var(--gf-cut-sm);
    background: transparent;
    color: var(--gf-text-3, var(--gf-text-3));
    font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
    white-space: nowrap; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.staff-pages-chip:hover { border-color: var(--ribbon-accent); color: var(--gf-text-1, var(--gf-text-1)); }
.staff-pages-chip.waiting {
    border-color: var(--ribbon-accent);
    background: color-mix(in srgb, var(--ribbon-accent) 18%, transparent);
    color: var(--gf-text-1, var(--gf-text-1));
}
.staff-pages-chip.warn {
    border-color: color-mix(in srgb, var(--gf-gold-bright, var(--gf-trim-bright)) 70%, transparent);
    background: color-mix(in srgb, var(--gf-gold-bright, var(--gf-trim-bright)) 18%, transparent);
}
.staff-pages-chip.alarm {
    border-color: color-mix(in srgb, var(--gf-danger, var(--gf-danger)) 75%, transparent);
    background: color-mix(in srgb, var(--gf-danger, var(--gf-danger)) 22%, transparent);
    animation: staff-pages-pulse 1.6s ease-in-out infinite;
}
@keyframes staff-pages-pulse { 50% { opacity: 0.6; } }
.staff-ribbon-tile.staff-tile-alert { box-shadow: inset 0 0 0 1px var(--ribbon-accent); }

.staff-panel-layout.on { color: var(--ribbon-accent, var(--gf-accent, var(--gf-ember))); }

/* `.game-window`'s 150x100 floor is right for a document panel and wrong for a
   toolbar: an icons-only row is ~44px tall, so the floor left a band of dead
   glass under every bar layout. GameWindow's own minWidth/minHeight opts are
   the only floor here. */
.staff-panel-window { min-width: 0; min-height: 0; }
/* Wrapping is what makes a narrow VERTICAL strip reachable: below about two
   icon columns the chrome stacks instead of forcing the window wide. */
.staff-panel-window .game-window-titlebar { flex-wrap: wrap; row-gap: 2px; }

/* Bar layout: one flat flow, no section headers. Wrapping is what makes the
   same markup a long horizontal bar when the window is wide and a vertical
   strip when it is narrow - the window's own resize is the layout control. */
.staff-panel-body.layout-bar { padding: 5px; }
.staff-panel-body .bar-grid {
    display: flex; flex-wrap: wrap; gap: 5px; padding: 0;
    align-content: flex-start;
}

/* Icons-only. The label is dropped, not merely hidden at a smaller size: every
   tile carries a title tooltip (staff_dashboard._tile), which is what names the
   action here. */
.staff-panel-body.compact .staff-ribbon-tile-label { display: none; }
.staff-panel-body.compact .staff-ribbon-tile {
    width: 34px; height: 34px; padding: 0;
}
.staff-panel-body.compact .staff-ribbon-tile-icon { font-size: 17px; }
.staff-panel-body.compact .staff-ribbon-tile.on::after {
    content: ''; position: absolute; left: 50%; bottom: 2px;
    width: 12px; height: 2px; margin-left: -6px; clip-path: var(--gf-cut-sm);
    background: var(--ribbon-accent);
}
.staff-panel-body.compact .staff-ribbon-tile { position: relative; }

/* ══ Staff Online Players panel ════════════════════════════════════════════ */
/* Without this the titlebar's `space-between` strands the - button halfway
   across the bar instead of grouping it with the x. */
.staff-online-window .game-window-title { flex: 1 1 auto; }

.staff-online-panel {
    display: flex; flex-direction: column; height: 100%;
    font-size: 12px; min-height: 0;
}
.staff-online-toolbar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; flex-shrink: 0;
    border-bottom: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
}
.staff-online-search {
    flex: 1 1 auto; min-width: 0;
    padding: 5px 8px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.07));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-1, var(--gf-text-1)); font-size: 12px; font-family: inherit;
}
.staff-online-search:focus { outline: none; border-color: var(--ribbon-accent); }
.staff-online-scope {
    flex: 0 0 auto; padding: 5px 10px;
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.05));
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-2, var(--gf-text-2));
    cursor: pointer; font-size: 11px; font-family: inherit; font-weight: 600;
}
.staff-online-scope.on {
    background: color-mix(in srgb, var(--ribbon-accent) 20%, transparent);
    border-color: var(--ribbon-accent);
    color: var(--gf-text-1, var(--gf-text-1));
}
.staff-online-refresh { flex: 0 0 auto; font-size: 14px; }

/* One grid template shared by the header and every row, so the columns cannot
   drift apart - two templates is how a header stops naming its own column. */
.staff-online-head,
.staff-online-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.6fr) minmax(80px, 1fr)
                           minmax(78px, 0.8fr) minmax(58px, 0.5fr) auto;
    align-items: center;
    gap: 6px;
}
.staff-online-head {
    padding: 5px 10px; flex-shrink: 0;
    border-bottom: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
}
.staff-online-col {
    background: none; border: none; padding: 0; text-align: left;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--gf-text-3, var(--gf-text-3)); font-family: inherit;
}
button.staff-online-col { cursor: pointer; }
button.staff-online-col:hover { color: var(--gf-text-1, var(--gf-text-1)); }
.staff-online-col.sorted { color: color-mix(in srgb, var(--ribbon-accent) 75%, var(--gf-text-2, var(--gf-text-2))); }
.staff-online-col.sorted[data-dir="asc"]::after { content: ' \2191'; }
.staff-online-col.sorted[data-dir="desc"]::after { content: ' \2193'; }

.staff-online-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 2px 0; }
.staff-online-row {
    padding: 4px 10px;
    border-bottom: 1px solid rgba(var(--gf-bone-rgb), 0.04);
    color: var(--gf-text-2, var(--gf-text-2));
}
.staff-online-row:hover { background: rgba(var(--gf-bone-rgb), 0.05); }
.staff-online-row.is-self {
    background: color-mix(in srgb, var(--ribbon-accent) 8%, transparent);
}
.staff-online-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-online-cell.col-name { display: flex; align-items: center; gap: 5px; }
.staff-online-name { color: var(--gf-text-1, var(--gf-text-1)); font-weight: 600; }
/* The LABEL ("Warden"), never the raw id ("gm") - the id is an opaque key. */
.staff-online-role {
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
}
.staff-online-flag { font-size: 10px; opacity: 0.8; }
.staff-dash-dot.is-player {
    border: 1px solid var(--gf-border, rgba(var(--gf-bone-rgb), 0.22));
    box-sizing: border-box;
}
.staff-online-cell.col-pos,
.staff-online-cell.col-hp {
    font-family: var(--gf-mono, var(--gf-font-mono));
    font-size: 11px; font-variant-numeric: tabular-nums;
}
.staff-online-cell.col-hp.low { color: var(--gf-danger, var(--gf-danger)); }
.staff-online-cell.col-actions { display: flex; gap: 4px; justify-content: flex-end; }
.staff-online-act {
    padding: 3px 8px;
    background: var(--gf-slot-bg, rgba(var(--gf-bone-rgb), 0.05));
    border: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    clip-path: var(--gf-cut-sm);
    color: var(--gf-text-1, var(--gf-text-1));
    cursor: pointer; font-size: 11px; font-family: inherit; white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}
.staff-online-act:hover {
    background: var(--gf-slot-bg-hover, rgba(var(--gf-bone-rgb), 0.10));
    border-color: color-mix(in srgb, var(--ribbon-accent) 55%, transparent);
}

.staff-online-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 5px 10px; flex-shrink: 0;
    border-top: 1px solid var(--gf-border-soft, rgba(var(--gf-bone-rgb), 0.08));
    font-size: 10px; letter-spacing: 0.4px;
    color: var(--gf-text-3, var(--gf-text-3));
}
/* An under-reporting roster SAYS SO. A shorter list that looks complete is the
   failure this whole panel replaced. */
.staff-online-warn { color: var(--gf-gold-bright, var(--gf-trim-bright)); font-weight: 600; }
.staff-online-src { opacity: 0.7; }