/* ==========================================================================
   RVT DIALOG — A2Z Expert Sheets interactive mockup
   ========================================================================== */

/* ── Wrapper ── */
.hero__visual {
    width: 100%;
    max-width: none;
    margin-top: var(--space-8);
    align-self: center;
}

/* ── Dialog shell — fixed height so all tabs are identical size ── */
.rvt-dialog {
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: column;
    background: #1b2632;
    border: 2px solid rgba(11, 95, 132, 0.50);
    border-radius: var(--radius-xl);
    overflow: hidden;
    /* resting state — all glow layers present but invisible so CSS can interpolate */
    box-shadow:
        -25px 0  55px rgba(11, 95, 132, 0),
         25px 0  55px rgba(11, 95, 132, 0),
           0  0  45px rgba(11, 95, 132, 0),
           0  0 110px rgba(11,  95, 132, 0),
           0  0 180px rgba(11,  95, 132, 0),
           0 30px 80px rgba(0,    0,  0, 0.55),
        inset 0 0 40px rgba(11, 95, 132, 0);
    transition: box-shadow 2.5s cubic-bezier(0.25, 0, 0.4, 1), border-color 2.5s ease;
    font-size: 0.75rem;
    color: #f8fafc;
    font-family: var(--font-body);
    user-select: none;
}

/* Scroll-triggered glow — JS adds this class via IntersectionObserver */
.rvt-dialog--glow {
    border-color: rgba(11, 95, 132, 0.55);
    box-shadow:
        /* sides: bright halo fading outward */
        -25px 0 55px rgba(11, 95, 132, 0.22),
         25px 0 55px rgba(11, 95, 132, 0.22),
        /* all-around mid bloom */
        0 0 45px rgba(11, 95, 132, 0.11),
        /* deep outer ambient */
        0 0 110px rgba(11, 95, 132, 0.14),
        0 0 180px rgba(11, 95, 132, 0.06),
        /* base drop shadow */
        0 30px 80px rgba(0, 0, 0, 0.55),
        inset 0 0 40px rgba(11, 95, 132, 0.02);
}

/* ── Title bar ── */
.rvt-titlebar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #141b24;
    border-bottom: 1px solid rgba(11, 95, 132, 0.15);
}
.rvt-titlebar__title {
    font-weight: 600;
    font-size: 0.82rem;
    color: #f8fafc;
    letter-spacing: 0.01em;
}
.rvt-titlebar__close {
    background: none;
    border: none;
    color: rgba(248,250,252,0.45);
    width: 22px; height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.18s, background 0.18s;
    padding: 0;
    font-family: var(--font-body);
    line-height: 1;
}
.rvt-titlebar__close:hover {
    color: #f8fafc;
    background: rgba(255,255,255,0.08);
}

/* ── Tabs ── */
.rvt-tabs {
    flex-shrink: 0;
    display: flex;
    border-bottom: 1px solid rgba(11, 95, 132, 0.25);
    background: rgba(0,0,0,0.2);
    padding: 0 10px;
    gap: 2px;
}
.rvt-tab {
    font-family: var(--font-body);
    font-size: 0.73rem;
    font-weight: 500;
    color: rgba(248,250,252,0.5);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 7px 12px 6px;
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s;
    white-space: nowrap;
    margin-bottom: -1px;
}
.rvt-tab:hover { color: #1ab4e8; }
.rvt-tab--active { color: #1ab4e8; border-bottom-color: #1ab4e8; font-weight: 600; }

/* ── Panels — flex:1 fills remaining dialog height ── */
.rvt-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.rvt-panel--active { display: flex; }

/* ═══════════════════════════════════════════
   SELECTION PANEL
═══════════════════════════════════════════ */

/* Toolbar */
.rvt-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(11, 95, 132, 0.18);
    background: rgba(0,0,0,0.12);
}

/* Table wrapper fills remaining space between toolbar and footer */
.rvt-table-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.rvt-table-wrap--sm {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    max-height: 100px;
}

/* Footer pinned to bottom */
.rvt-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-top: 1px solid rgba(11, 95, 132, 0.15);
    background: rgba(0,0,0,0.18);
}
.rvt-tip     { color: rgba(26,180,232,0.7); font-size: 0.66rem; }
.rvt-version { color: rgba(248,250,252,0.28); font-size: 0.64rem; }

/* ═══════════════════════════════════════════
   FORMAT & CREATE PANELS — scrollable, compact
═══════════════════════════════════════════ */

#rvt-panel-format,
#rvt-panel-format-t {
    overflow-y: auto;
    font-size: 0.71rem;
}

#rvt-panel-create,
#rvt-panel-create-t {
    overflow: hidden;
    font-size: 0.71rem;
}

.rvt-panel-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Inputs */
.rvt-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(11, 95, 132, 0.3);
    border-radius: 4px;
    color: #f8fafc;
    font-family: var(--font-body);
    font-size: 0.71rem;
    padding: 4px 7px;
    outline: none;
    transition: border-color 0.18s;
}
.rvt-input:focus { border-color: #0b5f84; }
.rvt-input--grow { flex: 1; min-width: 60px; }
.rvt-input--sm   { width: 48px; flex-shrink: 0; }
.rvt-input::placeholder { color: rgba(248,250,252,0.3); }

/* Selects */
.rvt-select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(11, 95, 132, 0.3);
    border-radius: 4px;
    color: #f8fafc;
    font-family: var(--font-body);
    font-size: 0.71rem;
    padding: 4px 20px 4px 7px;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%230b5f84'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    transition: border-color 0.18s;
}
.rvt-select:focus { border-color: #0b5f84; }
.rvt-select--grow { flex: 1; }
.rvt-select option { background: #1b2632; color: #f8fafc; }

/* Checkboxes */
.rvt-check {
    appearance: none;
    width: 12px; height: 12px;
    border: 1px solid rgba(11, 95, 132, 0.5);
    border-radius: 2px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all 0.18s;
    vertical-align: middle;
    margin-right: 3px;
}
.rvt-check:checked {
    background: linear-gradient(135deg, #0b5f84, #1ab4e8);
    border-color: #0b5f84;
}
.rvt-check:checked::after {
    content: '';
    position: absolute;
    left: 2px; top: 0;
    width: 4px; height: 7px;
    border: 1.5px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(40deg);
}

/* Radios */
.rvt-radio {
    appearance: none;
    width: 12px; height: 12px;
    border: 1px solid rgba(11, 95, 132, 0.5);
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all 0.18s;
    vertical-align: middle;
    margin-right: 3px;
}
.rvt-radio:checked { border-color: #0b5f84; }
.rvt-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b5f84, #1ab4e8);
}

.rvt-check-label, .rvt-radio-label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(248,250,252,0.85);
    cursor: pointer;
    font-size: 0.71rem;
    white-space: nowrap;
    overflow: visible;
}

/* Icon buttons */
.rvt-icon-btn {
    width: 22px; height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(26,180,232,0.3);
    cursor: pointer;
    font-size: 0.65rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.18s;
    padding: 0;
}
.rvt-icon-btn--ok    { background: rgba(16,185,129,0.15); color: #34d399; border-color: rgba(52,211,153,0.3); }
.rvt-icon-btn--ok:hover    { background: rgba(16,185,129,0.3); }
.rvt-icon-btn--clear { background: rgba(239,68,68,0.12); color: #f87171; border-color: rgba(248,113,113,0.3); }
.rvt-icon-btn--clear:hover { background: rgba(239,68,68,0.25); }

/* Table */
.rvt-table { width: 100%; border-collapse: collapse; font-size: 0.71rem; }
.rvt-table thead {
    position: sticky; top: 0;
    background: linear-gradient(90deg, #1b2632, #2c3b4d);
    z-index: 1;
}
.rvt-table th {
    padding: 6px 8px;
    text-align: center;
    font-weight: 600;
    color: #1ab4e8;
    border-bottom: 1px solid rgba(26,180,232,0.25);
    white-space: nowrap;
}
.rvt-table td {
    padding: 5px 8px;
    text-align: center;
    color: rgba(248,250,252,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rvt-table tbody tr:hover td { background: rgba(26,180,232,0.06); }
.rvt-table tbody tr.rvt-row--selected td {
    background: rgba(11, 95, 132, 0.14);
    color: #f8fafc;
}
.rvt-empty-row td {
    text-align: center;
    color: rgba(248,250,252,0.3);
    font-style: italic;
    padding: 14px;
}

/* Sections */
.rvt-section { padding: 7px 12px 4px; }
.rvt-section--bordered {
    border: 1px solid rgba(11, 95, 132, 0.2);
    border-radius: 6px;
    margin: 3px 10px;
    padding: 7px 10px;
}
.rvt-section--mt { margin-top: 3px; }
.rvt-section__title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: left;
    color: rgba(26, 180, 232, 0.85);
    margin-bottom: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(26, 180, 232, 0.15);
}

.rvt-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(26,180,232,0.1);
    border-bottom: 1px solid rgba(26,180,232,0.1);
}
.rvt-cols .rvt-section + .rvt-section {
    border-left: 1px solid rgba(11, 95, 132, 0.1);
}

.rvt-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.rvt-row       { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rvt-row--gap  { gap: 12px; }
.rvt-row--mt   { margin-top: 5px; }

.rvt-label { color: rgba(248,250,252,0.6); white-space: nowrap; font-size: 0.69rem; }
.rvt-muted { color: rgba(26,180,232,0.5); font-size: 0.66rem; font-style: italic; }

/* Outline button */
.rvt-btn-outline {
    font-family: var(--font-body);
    font-size: 0.69rem;
    font-weight: 500;
    color: #1ab4e8;
    background: rgba(11,95,132,0.12);
    border: 1px solid rgba(26,180,232,0.40);
    border-radius: 4px;
    padding: 4px 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s;
}
.rvt-btn-outline:hover { background: rgba(11,95,132,0.28); border-color: #1ab4e8; color: #fff; }

/* Primary button */
.rvt-btn-primary {
    font-family: var(--font-body);
    font-size: 0.73rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0b5f84, #1ab4e8);
    border: none;
    border-radius: 4px;
    padding: 6px 18px;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(26,180,232,0.25);
    transition: all 0.18s;
}
.rvt-btn-primary:hover { box-shadow: 0 0 24px rgba(26,180,232,0.4); transform: translateY(-1px); }

.rvt-footer--create { flex-shrink: 0; margin-top: 0; }

/* Create panel layout */
.rvt-create-top { flex-shrink: 0; }
.rvt-create-sheets {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-top: 1px solid rgba(11, 95, 132, 0.15);
}
.rvt-create-sheets__header {
    flex-shrink: 0;
    padding: 6px 12px 5px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(26, 180, 232, 0.85);
    border-bottom: 1px solid rgba(11, 95, 132, 0.20);
}
.rvt-create-sheets .rvt-table-wrap { flex: 1; max-height: none; }

/* Action bar (Create) */
.rvt-action-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid rgba(26,180,232,0.18);
    background: rgba(0,0,0,0.15);
}

.rvt-progress-bar {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.07);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(26,180,232,0.15);
}
.rvt-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0b5f84, #1ab4e8);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ==========================================================================
   SHEET GENERATOR DIALOG — sgen-specific overrides
   ========================================================================== */

/* Slightly shorter than Expert Sheets (600px) */
.sgen-dialog { height: 500px; }

/* Views panel hint */
.sgen-hint {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 0.67rem;
    color: rgba(26,180,232,0.6);
    background: rgba(11,95,132,0.08);
    border-bottom: 1px solid rgba(11,95,132,0.15);
}

/* Disabled row dimming */
.rvt-table tbody tr:not(.sgen-row--active):not(.sgen-subrow) td { opacity: 0.45; }

/* Sub-rows — one per view instance when count > 1 */
.sgen-subrow td { padding: 3px 8px; background: rgba(11,95,132,0.06); border-bottom: 1px solid rgba(11,95,132,0.08); }
.sgen-subrow__label { color: rgba(26,180,232,0.6); font-size: 0.66rem; font-style: italic; white-space: nowrap; }

/* Sheet size buttons */
.sgen-size-group { display: flex; gap: 4px; flex-wrap: wrap; }
.sgen-size-btn {
    font-family: var(--font-body);
    font-size: 0.67rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid rgba(26,180,232,0.30);
    background: rgba(11,95,132,0.10);
    color: rgba(248,250,252,0.55);
    cursor: pointer;
    transition: all 0.15s;
}
.sgen-size-btn:hover { border-color: #1ab4e8; color: #1ab4e8; }
.sgen-size-btn--active { background: rgba(11,95,132,0.30); border-color: #1ab4e8; color: #1ab4e8; }

/* View Scale column — read-only, greyed */
.sgen-scale-cell {
    color: rgba(248,250,252,0.28);
    font-size: 0.67rem;
    font-style: italic;
    pointer-events: none;
    user-select: none;
}

/* Layout panel structure */
.sgen-layout-top { flex-shrink: 0; }

.sgen-canvas-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 6px 12px 4px;
    min-height: 0;
}
.sgen-canvas-label {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(26,180,232,0.7);
    margin-bottom: 4px;
}

/* Dimension wrapper */
.sgen-dim-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.sgen-dim-top {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 28px 3px 28px; /* indent to align with canvas (dim-left width) */
    flex-shrink: 0;
}
.sgen-dim-row { flex: 1; display: flex; gap: 4px; min-height: 0; }

.sgen-dim-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
    width: 28px;
}

/* The tick lines either side of the measurement text */
.sgen-dim-line { flex: 1; width: 1px; background: rgba(26,180,232,0.35); min-height: 4px; min-width: 1px; }
.sgen-dim-top .sgen-dim-line { height: 1px; width: auto; flex: 1; min-height: 1px; }

.sgen-dim-text {
    font-size: 0.58rem;
    color: rgba(26,180,232,0.65);
    white-space: nowrap;
    letter-spacing: 0.04em;
    transition: color 0.3s;
}
.sgen-dim-left .sgen-dim-text { writing-mode: vertical-rl; transform: rotate(180deg); }

/* Sheet area: canvas left, palette right */
.sgen-sheet-area { flex: 1; display: flex; gap: 5px; min-height: 0; min-width: 0; align-items: flex-start; overflow: hidden; }

/* Palette sidebar */
.sgen-palette {
    width: 90px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(26,180,232,0.18);
    border-radius: 4px;
    padding: 4px;
}
.sgen-palette__label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(26,180,232,0.55);
    text-align: center;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(26,180,232,0.15);
    flex-shrink: 0;
}
.sgen-palette__hint {
    font-size: 0.56rem;
    color: rgba(248,250,252,0.3);
    text-align: center;
    line-height: 1.4;
    margin: 6px 4px 0;
    font-style: italic;
}

.sgen-palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 3px;
    background: rgba(11,95,132,0.18);
    border: 1px solid rgba(26,180,232,0.35);
    border-radius: 3px;
    cursor: grab;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}
.sgen-palette-item:hover { border-color: #1ab4e8; background: rgba(11,95,132,0.30); }

/* View box inner text — name + scale */
.sgen-vbox-name {
    font-size: 0.60rem;
    font-weight: 600;
    color: rgba(26,180,232,0.90);
    line-height: 1.2;
    text-align: center;
}
.sgen-vbox-scale {
    font-size: 0.55rem;
    color: rgba(26,180,232,0.50);
    font-style: italic;
    line-height: 1;
}

/* Ghost element while dragging from palette */
.sgen-ghost {
    position: fixed;
    width: 80px;
    height: 55px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.85;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Sheet canvas — A-series landscape aspect ratio with grid */
.sgen-canvas {
    flex: none;
    height: 100%;
    aspect-ratio: 1.414 / 1;
    max-width: calc(100% - 97px); /* palette 90px + gap 5px + border 2px */
    position: relative;
    background-color: rgba(20, 27, 38, 0.9);
    background-image:
        linear-gradient(rgba(26,180,232,0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,180,232,0.09) 1px, transparent 1px);
    background-size: 5% 6.25%;      /* 20 cols × 16 rows grid */
    border: 1px solid rgba(26,180,232,0.28);
    border-radius: 3px;
    overflow: hidden;
    cursor: default;
}

/* Draggable view boxes */
.sgen-view-box {
    position: absolute;
    background: rgba(11,95,132,0.20);
    border: 1px solid rgba(26,180,232,0.50);
    border-radius: 3px;
    cursor: grab;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px;
    user-select: none;
    text-align: center;
}
.sgen-view-box:hover { border-color: #1ab4e8; background: rgba(11,95,132,0.30); }
.sgen-view-box.sgen-dragging { cursor: grabbing; border-color: #1ab4e8; background: rgba(11,95,132,0.40); z-index: 10; }

/* Title block strip — mimics real sheet title block at bottom */
.sgen-title-block {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 18%;
    background: rgba(11,95,132,0.07);
    border-top: 1.5px solid rgba(26,180,232,0.35);
    display: flex;
    pointer-events: none;
    font-size: 0.52rem;
    color: rgba(26,180,232,0.40);
    letter-spacing: 0.04em;
}
.sgen-tb-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-right: 1px solid rgba(26,180,232,0.20);
}
.sgen-tb-cell {
    border-right: 1px solid rgba(26,180,232,0.15);
    padding: 3px 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
}
.sgen-tb-cell:last-child { border-right: none; }
.sgen-tb-label { font-size: 0.44rem; color: rgba(26,180,232,0.28); text-transform: uppercase; letter-spacing: 0.07em; }
.sgen-tb-value { font-size: 0.54rem; color: rgba(26,180,232,0.55); }
.sgen-tb-side {
    width: 22%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(26,180,232,0.20);
    gap: 3px;
    padding: 4px;
}
.sgen-tb-logo {
    font-size: 0.70rem;
    font-weight: 800;
    color: rgba(26,180,232,0.65);
    letter-spacing: 0.06em;
}
.sgen-tb-size {
    font-size: 0.46rem;
    color: rgba(26,180,232,0.35);
    letter-spacing: 0.05em;
}

/* Create panel naming row */
.sgen-create-top { flex: 1; overflow-y: auto; min-height: 0; }
.sgen-naming-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.sgen-naming-seg { display: flex; flex-direction: column; gap: 3px; }
.sgen-naming-seg--grow { flex: 1; }
.sgen-naming-lbl { font-size: 0.60rem; color: rgba(248,250,252,0.4); }
.sgen-naming-dash { font-size: 0.85rem; color: rgba(26,180,232,0.5); padding-bottom: 4px; }

/* Create panel — sheet count stepper */
.sgen-count-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sgen-count-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sgen-count-btn {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(26, 180, 232, 0.35);
    border-radius: 4px;
    background: rgba(11, 95, 132, 0.15);
    color: #1ab4e8;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.sgen-count-btn:hover { background: rgba(11, 95, 132, 0.30); }
.sgen-count-input {
    width: 42px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.sgen-count-input::-webkit-inner-spin-button,
.sgen-count-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Create panel — two-column naming format */
.sgen-naming-cols { display: flex; gap: 8px; }
.sgen-naming-half { flex: 1; min-width: 0; }

/* Create panel — summary */
.sgen-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.sgen-sheet-count-badge {
    background: linear-gradient(135deg, #0b5f84, #1ab4e8);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.sgen-summary-list {
    max-height: 100px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sgen-summary-sheet__name {
    font-size: 0.67rem;
    font-weight: 600;
    color: rgba(26, 180, 232, 0.9);
}
.sgen-summary-sheet__views {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 0 0 8px;
}
.sgen-summary-view {
    font-size: 0.60rem;
    color: rgba(248, 250, 252, 0.5);
}
.sgen-summary-view em {
    color: rgba(26, 180, 232, 0.5);
    font-style: normal;
    margin-left: 3px;
}

/* Scrollbar */
.rvt-table-wrap::-webkit-scrollbar,
#rvt-panel-format::-webkit-scrollbar,
#rvt-panel-format-t::-webkit-scrollbar,
#rvt-panel-create::-webkit-scrollbar,
#rvt-panel-create-t::-webkit-scrollbar { width: 4px; }
.rvt-table-wrap::-webkit-scrollbar-track,
#rvt-panel-format::-webkit-scrollbar-track,
#rvt-panel-format-t::-webkit-scrollbar-track,
#rvt-panel-create::-webkit-scrollbar-track,
#rvt-panel-create-t::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
.rvt-table-wrap::-webkit-scrollbar-thumb,
#rvt-panel-format::-webkit-scrollbar-thumb,
#rvt-panel-format-t::-webkit-scrollbar-thumb,
#rvt-panel-create::-webkit-scrollbar-thumb,
#rvt-panel-create-t::-webkit-scrollbar-thumb { background: rgba(26,180,232,0.3); border-radius: 4px; }

/* ==========================================================================
   MANAGE PACKAGES DIALOG
   ========================================================================== */

.pkg-dialog {
    height: 420px;
}

/* ── Toolbar ── */
.pkg-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(11, 95, 132, 0.18);
}
.pkg-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pkg-search-icon {
    position: absolute;
    left: 7px;
    color: rgba(248, 250, 252, 0.35);
    pointer-events: none;
    line-height: 0;
}
.pkg-search {
    height: 26px;
    width: 150px;
    padding: 0 8px 0 26px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    color: #f8fafc;
    font-size: 0.71rem;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.18s;
}
.pkg-search:focus { border-color: rgba(26, 180, 232, 0.45); }
.pkg-filter-btn { font-size: 0.70rem; padding: 4px 10px; height: 26px; }
.pkg-toolbar__spacer { flex: 1; }

/* ── Body ── */
.pkg-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Table area ── */
.pkg-table-scroll {
    flex: 1;
    overflow: auto;
    min-width: 0;
}
.pkg-table-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.pkg-table-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
.pkg-table-scroll::-webkit-scrollbar-thumb { background: rgba(26,180,232,0.3); border-radius: 4px; }

.pkg-table {
    border-collapse: collapse;
    min-width: 100%;
    font-size: 0.69rem;
    white-space: nowrap;
}
.pkg-table thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(90deg, #1b2632, #2c3b4d);
    color: rgba(248, 250, 252, 0.60);
    font-weight: 600;
    font-size: 0.64rem;
    padding: 5px 8px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1;
    letter-spacing: 0.02em;
}
.pkg-th--left { text-align: left !important; min-width: 88px; }
.pkg-table thead th:nth-child(2) { min-width: 110px; }

.pkg-table tbody td {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    text-align: center;
    color: rgba(248, 250, 252, 0.55);
    height: 28px;
}
.pkg-table tbody tr:hover td { background: rgba(11, 95, 132, 0.09); }

.pkg-td--num  { color: #1ab4e8 !important; font-weight: 600; text-align: left !important; }
.pkg-td--name { text-align: left !important; color: rgba(248,250,252,0.75) !important; }
.pkg-td--count { color: #1ab4e8 !important; font-weight: 600; }

/* Revision mark — folded-corner flag shape */
.pkg-rev-mark {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.70rem;
    font-weight: 700;
    color: #1ab4e8;
    line-height: 1;
    font-family: var(--font-body);
}
.pkg-rev-mark::after {
    content: 'R';
}

/* Empty revision cells — faint dot */
.pkg-table tbody td:not(.pkg-td--num):not(.pkg-td--name):not(.pkg-td--count):empty::after {
    content: '·';
    color: rgba(255, 255, 255, 0.13);
}

/* ── Sidebar ── */
.pkg-sidebar {
    width: 185px;
    flex-shrink: 0;
    border-left: 1px solid rgba(11, 95, 132, 0.20);
    padding: 12px 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(0, 0, 0, 0.12);
    font-size: 0.70rem;
}
.pkg-sidebar::-webkit-scrollbar { width: 3px; }
.pkg-sidebar::-webkit-scrollbar-thumb { background: rgba(26,180,232,0.25); border-radius: 3px; }

.pkg-sidebar-title {
    font-size: 0.70rem;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.80);
    margin-bottom: 7px;
}
.pkg-notes-list {
    list-style: disc;
    padding-left: 13px;
}
.pkg-notes-list li {
    font-size: 0.62rem;
    color: rgba(248, 250, 252, 0.42);
    line-height: 1.55;
}
.pkg-legend-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pkg-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.63rem;
    color: rgba(248, 250, 252, 0.58);
}

/* ── Legend icons ── */
.pkg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.pkg-icon--created    { border: 1.5px solid #f4a244; border-radius: 2px; }
.pkg-icon--issued-ref { border: 1.5px solid rgba(248,250,252,0.45); border-radius: 2px; }
.pkg-icon--issued {
    width: 9px;
    height: 9px;
    background: rgba(248, 250, 252, 0.65);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.pkg-icon--updated {
    border: 1.5px solid rgba(248,250,252,0.55);
    border-top: none;
    border-radius: 0 0 3px 3px;
}
.pkg-icon--merged {
    border: 1.5px solid rgba(248,250,252,0.55);
    border-bottom: none;
    border-radius: 2px 2px 0 0;
}
.pkg-icon--deleted {
    color: #ef4444;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.pkg-icon--revised {
    font-size: 0.70rem;
    font-weight: 700;
    color: #1ab4e8;
    font-family: var(--font-body);
    background: none;
    clip-path: none;
}
.pkg-icon--revised::after { content: 'R'; }
.pkg-icon--revised-ro {
    font-size: 0.70rem;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.30);
    font-family: var(--font-body);
    background: none;
    clip-path: none;
}
.pkg-icon--revised-ro::after { content: 'R'; }