/* 🔴 EVERY `max-height: NNvh` BELOW IS PAIRED WITH AN `NNdvh` TWIN.
   `vh` is the viewport height with the phone browser's URL bar COLLAPSED, so
   while the bar is showing a panel sized in vh is taller than the visible area
   and its bottom edge — where the action buttons live — sits underneath the
   browser chrome. It reads as a missing button, not as a clipped panel.
   The vh declaration stays first as the fallback (Safari < 15.4); the dvh twin
   wins wherever it is understood. Added 2026-08-24 after the same fault was
   found in the website report builder's import modal. */
/* ═══════════════════════════════════════════════════════════
   reportai.au — HeroUI Design System (Dark)
   ═══════════════════════════════════════════════════════════ */

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

/* ── HeroUI Design Tokens ── */
:root {
    /* Backgrounds */
    --bg:            #000000;
    --bg-card:       #18181b;
    --bg-elevated:   #27272a;
    --bg-hover:      #3f3f46;
    --bg-active:     #52525b;

    /* Borders */
    --border:        rgba(255,255,255,0.08);
    --border-md:     rgba(255,255,255,0.14);
    --border-strong: rgba(255,255,255,0.24);

    /* Text */
    --text:          #f4f4f5;
    --text-dim:      #a1a1aa;
    --text-muted:    #71717a;

    /* Brand colours (HeroUI palette) */
    --primary:       #006FEE;
    --primary-dark:  #0561d4;
    --primary-light: rgba(0,111,238,0.15);
    --success:       #17c964;
    --success-light: rgba(23,201,100,0.12);
    --warning:       #f5a524;
    --warning-light: rgba(245,165,36,0.12);
    --danger:        #f31260;
    --danger-light:  rgba(243,18,96,0.12);
    --secondary:     #9353d3;
    --secondary-light: rgba(147,83,211,0.12);

    /* Radius */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-xl:   18px;
    --r-2xl:  24px;
    --r-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-lg:  0 10px 40px rgba(0,0,0,0.7);
    --shadow-xl:  0 20px 60px rgba(0,0,0,0.8);

    /* Transition */
    --tr:      all 0.15s ease;
    --tr-fast: all 0.1s ease;
}

/* ── Base ── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100dvh;
    overflow: hidden;
}

/* ── App shell (full-viewport, no page scroll) ── */
.app-container {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
    max-width: 1800px;
    margin: 0 auto;
}

/* ── Scrollbar ── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--bg-hover); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover  { background: var(--bg-active); }

/* ════════════════════════════════════════════════════════════
   BRAND HEADER
   ════════════════════════════════════════════════════════════ */

.brand-header {
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    z-index: 50;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.logo-area h1 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    background: linear-gradient(135deg, #ffffff 0%, #93c5fd 45%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.badge-pro {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 8px;
    background: rgba(0,111,238,0.14);
    border: 1px solid rgba(0,111,238,0.28);
    color: #60a5fa;
    border-radius: var(--r-full);
}

.logo-area > span:last-child {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ── Mode Tabs ── */
.mode-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 4px;
}

.mode-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 7px 15px;
    border-radius: var(--r-lg);
    font-size: 0.76rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--tr);
    white-space: nowrap;
    box-shadow: none;
}

.mode-tab:hover:not(.active) {
    color: var(--text-dim);
    background: rgba(255,255,255,0.05);
    transform: none;
}

.mode-tab.active {
    background: var(--bg-elevated);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* ── Inspection Meta ── */
.inspection-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-left: auto;
}

.inspection-meta input,
.inspection-meta textarea {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 6px 11px;
    border-radius: var(--r-lg);
    font-size: 0.78rem;
    color: var(--text);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

.inspection-meta input    { width: 145px; }
.inspection-meta textarea { width: 190px; resize: none; }

.inspection-meta input:focus,
.inspection-meta textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0,111,238,0.2);
}

/* ════════════════════════════════════════════════════════════
   ACTION BAR
   ════════════════════════════════════════════════════════════ */

.action-bar {
    background: rgba(24,24,27,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 9px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    flex-shrink: 0;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}

/* ── Universal Button & File Label ── */
button,
.file-label-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--r-lg);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--tr);
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-dim);
    box-shadow: none;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

button:hover:not(:disabled),
.file-label-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--border-md);
    transform: none;
}

button:active:not(:disabled)  { transform: scale(0.97); opacity: 0.9; }
button:disabled                { opacity: 0.38; cursor: not-allowed; }
.file-label-btn:active         { transform: scale(0.97); }

/* Variant: primary (solid blue) */
.btn-blue {
    background: var(--primary);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.btn-blue:hover:not(:disabled) {
    background: var(--primary-dark);
    border-color: transparent;
    color: #fff;
}

/* Variant: danger (red subtle) */
.btn-red {
    background: rgba(243,18,96,0.14);
    border-color: rgba(243,18,96,0.28);
    color: #fb7185;
}
.btn-red:hover:not(:disabled) { background: rgba(243,18,96,0.24); }

/* Variant: success (green subtle) */
.btn-green {
    background: rgba(23,201,100,0.12);
    border-color: rgba(23,201,100,0.24);
    color: #4ade80;
}
.btn-green:hover:not(:disabled) { background: rgba(23,201,100,0.22); }

/* Variant: danger outlined */
.btn-danger {
    background: rgba(243,18,96,0.08);
    border-color: rgba(243,18,96,0.22);
    color: #fb7185;
}
.btn-danger:hover:not(:disabled) { background: rgba(243,18,96,0.18); }

/* Upload layout button — override inline style */
.file-label-btn[style*="background:#1e3a8a"],
.file-label-btn[style*="background: #1e3a8a"] {
    background: var(--primary) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* ── Inspect / Survey action groups ── */
#inspectActions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#surveyActions  { display: none; align-items: center; gap: 7px; }
#layoutEditorActions { display: none; }

/* ── Mode toggle (Place / Move) ── */
.mode-toggle {
    display: flex;
    gap: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: 3px;
}

.mode-btn {
    border: none;
    background: transparent;
    border-radius: var(--r-full);
    padding: 5px 12px;
    font-size: 0.73rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--tr);
    box-shadow: none;
}

.mode-btn.active {
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.mode-btn:hover:not(.active) { color: var(--text-dim); transform: none; background: rgba(255,255,255,0.04); }

/* ── Status chip ── */
.status-chip {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 5px 12px;
    border-radius: var(--r-full);
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
    transition: var(--tr);
}

/* ── Recording badge ── */
.rec-badge {
    /* 🔴 THE SLOT IS ALWAYS THERE; ONLY THE DOT COMES AND GOES.
       Two separate things moved this bar. The word "Recording…" made the badge
       a wide pill — that is gone. But `display:none` → `display:flex` was the
       other half: the badge appeared out of nothing, so every control beside it
       still jumped ~32px the instant recording started, under the user's thumb.
       Reserving the space permanently and toggling VISIBILITY means the bar is
       laid out once and never changes width again. It costs 26px of bar at all
       times, which is the price of nothing moving mid-tap. */
    display: flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    padding: 0;
    background: rgba(243,18,96,0.1);
    border: 1px solid rgba(243,18,96,0.24);
    border-radius: var(--r-full);
    font-size: 0.7rem;
    font-weight: 600;
    color: #fb7185;
}
.rec-badge.active { visibility: visible; }

.rec-dot {
    width: 7px;
    height: 7px;
    background: var(--danger);
    border-radius: 50%;
    animation: blink 1.2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════
   MAIN GRID
   ════════════════════════════════════════════════════════════ */

.inspector-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Canvas panel — fills all remaining space ── */
.canvas-panel {
    background: #080808;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    flex: 1;
}

.canvas-wrapper {
    position: relative;
    overflow: hidden;
    background: #0c0c0e;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border: none;
    box-shadow: none;
    min-height: 0;
}

#layoutCanvas {
    display: block;
    /* width/height set by fitCanvasToWrapper() in canvas.js */
}

#layoutCanvas.dragging { cursor: grabbing !important; }

/* Hint floats over the canvas — takes zero layout space */
#canvasHint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    padding: 7px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
}

#canvasHint b { color: var(--text-dim); font-weight: 600; }

#canvasHint kbd {
    display: inline-block;
    padding: 1px 5px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-md);
    border-radius: 4px;
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.66rem;
}

/* ── Info panel (sidebar) ── */
.info-panel {
    background: var(--bg);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#inspectInfoContent,
#surveyInfoContent,
#layoutEditorInfoContent {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Cards ── */
.card {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
}

.card:last-child { border-bottom: none; }

.card h3 {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ════════════════════════════════════════════════════════════
   MARKER LIST
   ════════════════════════════════════════════════════════════ */

.marker-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 260px;
    overflow-y: auto;
}

.marker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: var(--tr-fast);
    border: 1px solid transparent;
}

.marker-item:hover    { background: rgba(255,255,255,0.04); border-color: var(--border); }
.marker-item.selected {
    background: rgba(0,111,238,0.1);
    border-color: rgba(0,111,238,0.28);
}

.marker-item-body { flex: 1; min-width: 0; }

.marker-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sev-critical { color: #fb7185; }
.sev-major    { color: #fbbf24; }
.sev-minor    { color: #60a5fa; }
.sev-note     { color: #4ade80; }

.angle-badge {
    font-size: 0.64rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 1px 5px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.del-marker-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 4px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0.5;
    transition: var(--tr-fast);
    flex-shrink: 0;
    box-shadow: none;
}
.del-marker-btn:hover { opacity: 1; background: rgba(243,18,96,0.12); transform: none; }
.marker-item:hover .del-marker-btn { opacity: 0.7; }

/* ════════════════════════════════════════════════════════════
   ACTIVE MARKER FORM
   ════════════════════════════════════════════════════════════ */

#selectedMarkerPanel { display: none; }

.label-input {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 8px 11px;
    border-radius: var(--r-lg);
    font-size: 0.8rem;
    color: var(--text);
    outline: none;
    margin-bottom: 12px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.label-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0,111,238,0.18);
}

#severitySelect {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 7px 10px;
    border-radius: var(--r-lg);
    font-size: 0.78rem;
    color: var(--text);
    outline: none;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
#severitySelect:focus { border-color: var(--primary); }

/* Range / slider */
input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
    cursor: pointer;
    height: 4px;
    margin: 4px 0;
}

/* ════════════════════════════════════════════════════════════
   PHOTO GRID
   ════════════════════════════════════════════════════════════ */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 8px;
}

.photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}
.photo-thumb:hover img { transform: scale(1.05); }

.photo-num {
    position: absolute;
    top: 4px; left: 4px;
    background: rgba(0,0,0,0.72);
    color: white;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    pointer-events: none;
}

.photo-del {
    position: absolute;
    top: 4px; right: 4px;
    background: rgba(243,18,96,0.88);
    border: none;
    color: white;
    width: 20px; height: 20px;
    border-radius: 50%;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
    box-shadow: none;
}
.photo-thumb:hover .photo-del { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   AUDIO
   ════════════════════════════════════════════════════════════ */

.audio-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

.audio-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.audio-item audio {
    width: 100%;
    height: 30px;
    accent-color: var(--primary);
}

.audio-item .transcript {
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.5;
    padding: 6px 8px;
    background: rgba(0,0,0,0.25);
    border-radius: var(--r-sm);
}

/* ════════════════════════════════════════════════════════════
   RECORDING PANEL
   ════════════════════════════════════════════════════════════ */

.recording-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
    background: rgba(243,18,96,0.06);
    border: 1px solid rgba(243,18,96,0.2);
    border-radius: var(--r-xl);
    padding: 14px;
    margin: 8px 0;
}

.recording-panel.active { display: flex; }

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

.rec-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fb7185;
}

#recTimer {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

#waveformCanvas {
    border-radius: var(--r-md);
    background: rgba(0,0,0,0.35);
    width: 100%;
    height: 52px;
    display: block;
}

.live-transcript-box {
    background: rgba(0,0,0,0.3);
    border-radius: var(--r-md);
    padding: 8px 10px;
    font-size: 0.7rem;
    color: var(--text-dim);
    min-height: 38px;
    line-height: 1.55;
}

.transcript-placeholder { color: var(--text-muted); font-style: italic; }

/* Notes */
.notes-area {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 8px 11px;
    font-size: 0.78rem;
    color: var(--text);
    resize: vertical;
    min-height: 72px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.notes-area:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0,111,238,0.18);
}

/* ════════════════════════════════════════════════════════════
   SURVEY MODE
   ════════════════════════════════════════════════════════════ */

#surveyInfoContent .card p {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.65;
}

/* Elevation input popover */
.elev-popover {
    position: fixed;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border-md);
    border-radius: var(--r-xl);
    padding: 16px;
    box-shadow: var(--shadow-lg);
    min-width: 240px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    animation: popIn 0.12s ease;
}

.elev-popover-title {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.elev-popover input[type="number"] {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 9px 11px;
    border-radius: var(--r-lg);
    font-size: 1rem;
    color: var(--text);
    outline: none;
    margin-bottom: 10px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s;
}
.elev-popover input[type="number"]:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,111,238,0.18); }

.elev-popover .elev-actions { display: flex; gap: 7px; }
.elev-popover .elev-actions button { flex: 1; justify-content: center; }

/* ════════════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════════════ */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    place-items: center;
    place-content: center;
}

.modal-overlay.active { display: grid; }

.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-md);
    border-radius: var(--r-2xl);
    padding: 22px;
    box-shadow: var(--shadow-xl);
    max-width: 400px;
    width: calc(100% - 32px);
    animation: popIn 0.15s ease;
}

.modal-box h2 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 14px;
}

#cameraPreview {
    width: 100%;
    border-radius: var(--r-xl);
    background: #000;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

.modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.modal-actions button { flex: 1; justify-content: center; }

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0,0,0,0.96);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.lightbox.active { display: flex; }

.lightbox-close {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border-md);
    color: var(--text);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    transition: var(--tr);
}
.lightbox-close:hover { background: rgba(255,255,255,0.14); }

#lightboxImg {
    max-width: min(90vw, 860px);
    max-height: 78vh; max-height: 78dvh;
    border-radius: var(--r-xl);
    object-fit: contain;
    box-shadow: var(--shadow-xl);
}

#lightboxLabel {
    font-size: 0.78rem;
    color: var(--text-dim);
    text-align: center;
}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */

footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 10px 20px;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: center;
    flex-shrink: 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* ════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════ */

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   LAYOUT EDITOR — HeroUI control panel
   ════════════════════════════════════════════════════════════ */

/* Action bar pills */
.le-action-bar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

.le-ab-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: var(--r-lg);
    font-size: 0.74rem; font-weight: 600; font-family: inherit;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    cursor: pointer; transition: var(--tr);
    white-space: nowrap; box-shadow: none;
}
.le-ab-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.08);
    color: var(--text);
    border-color: var(--border-md);
    transform: none;
}
.le-ab-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.le-ab-sync { color: #4ade80; border-color: rgba(23,201,100,0.24); background: rgba(23,201,100,0.07); }
.le-ab-sync:hover:not(:disabled) { background: rgba(23,201,100,0.14); border-color: rgba(23,201,100,0.42); }
.le-ab-del  { color: #fb7185; border-color: rgba(243,18,96,0.24); background: rgba(243,18,96,0.07); }
.le-ab-del:hover:not(:disabled) { background: rgba(243,18,96,0.15); border-color: rgba(243,18,96,0.42); }
.le-ab-clr  { color: #fbbf24; border-color: rgba(245,165,36,0.24); background: rgba(245,165,36,0.07); }
.le-ab-clr:hover:not(:disabled) { background: rgba(245,165,36,0.15); border-color: rgba(245,165,36,0.42); }
.le-ab-dl   { color: #60a5fa; border-color: rgba(0,111,238,0.24); background: rgba(0,111,238,0.07); }
.le-ab-dl:hover:not(:disabled) { background: rgba(0,111,238,0.15); border-color: rgba(0,111,238,0.42); }
.le-ab-sep  { width: 1px; height: 20px; background: var(--border); margin: 0 2px; flex-shrink: 0; }

/* Sidebar layout */
#layoutEditorInfoContent {
    border-top: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.le-section {
    padding: 13px 15px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.le-section-last { border-bottom: none; }

.le-section-hd {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.9px;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 11px;
}

.le-section-icon {
    width: 20px; height: 20px;
    background: rgba(0,111,238,0.12);
    border: 1px solid rgba(0,111,238,0.22);
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; color: #60a5fa; flex-shrink: 0;
}

/* Sync banner */
.le-sync-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 15px;
    background: linear-gradient(135deg, rgba(23,201,100,0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(23,201,100,0.15);
    flex-shrink: 0;
}
.le-sync-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.le-sync-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(23,201,100,0.12);
    border: 1px solid rgba(23,201,100,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; color: #4ade80; flex-shrink: 0;
}
.le-sync-title { font-size: 0.78rem; font-weight: 600; color: #4ade80; }
.le-sync-sub   { font-size: 0.68rem; color: rgba(74,222,128,0.5); margin-top: 1px; }
.le-sync-btn {
    padding: 5px 11px; border-radius: var(--r-lg);
    font-size: 0.71rem; font-weight: 700; font-family: inherit;
    background: rgba(23,201,100,0.14); border: 1px solid rgba(23,201,100,0.35);
    color: #4ade80; cursor: pointer; transition: var(--tr);
    white-space: nowrap; box-shadow: none; flex-shrink: 0;
}
.le-sync-btn:hover { background: rgba(23,201,100,0.26); border-color: rgba(23,201,100,0.55); transform: none; }

/* Snapshot badge */
.le-snap-badge {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 15px;
    background: linear-gradient(135deg, rgba(147,83,211,0.1) 0%, transparent 100%);
    border-bottom: 1px solid rgba(147,83,211,0.2);
    flex-shrink: 0;
}
.le-snap-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(147,83,211,0.14); border: 1px solid rgba(147,83,211,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; flex-shrink: 0;
}
.le-snap-info { flex: 1; min-width: 0; }
.le-snap-title { font-size: 0.78rem; font-weight: 600; color: #c4b5fd; }
.le-snap-sub   { font-size: 0.68rem; color: rgba(196,181,253,0.52); margin-top: 1px; }
.le-snap-clear {
    padding: 4px 9px; border-radius: var(--r-md);
    font-size: 0.68rem; font-weight: 700; font-family: inherit;
    background: rgba(147,83,211,0.12); border: 1px solid rgba(147,83,211,0.3);
    color: #c4b5fd; cursor: pointer; transition: var(--tr);
    white-space: nowrap; flex-shrink: 0; box-shadow: none;
}
.le-snap-clear:hover { background: rgba(147,83,211,0.24); border-color: rgba(147,83,211,0.55); transform: none; }

/* iOS toggle switches */
.le-layers { display: flex; flex-direction: column; }
.le-tog {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: var(--tr-fast);
    -webkit-tap-highlight-color: transparent;
}
.le-tog:last-child { border-bottom: none; }
.le-tog:hover .le-tog-label { color: var(--text); }
.le-tog-label { font-size: 0.8rem; color: var(--text-dim); transition: color 0.12s; user-select: none; }
.le-tog-wrap { position: relative; flex-shrink: 0; }
.le-tog-wrap input { display: none; }
.le-knob {
    display: block; width: 34px; height: 19px;
    background: var(--bg-hover); border-radius: 10px; position: relative;
    transition: background 0.2s; border: 1px solid rgba(255,255,255,0.07);
}
.le-knob::after {
    content: ''; position: absolute;
    width: 13px; height: 13px; top: 2px; left: 2px;
    background: rgba(255,255,255,0.5); border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.le-tog-wrap input:checked ~ .le-knob { background: var(--primary); border-color: transparent; }
.le-tog-wrap input:checked ~ .le-knob::after { transform: translateX(15px); background: white; }

/* Draw tool grid */
.le-tool-tip {
    font-size: 0.7rem; color: var(--text-muted); line-height: 1.5;
    background: rgba(0,111,238,0.06); border: 1px solid rgba(0,111,238,0.12);
    border-radius: var(--r-md); padding: 7px 9px; margin-bottom: 10px;
}
.le-tool-tip b { color: #60a5fa; }

.le-tb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }

.le-tb {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 4px 7px; border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.025);
    color: var(--text-muted); cursor: pointer;
    transition: var(--tr); box-shadow: none; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.le-tb:hover { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--border-md); transform: none; }
.le-tb.active {
    background: rgba(0,111,238,0.14);
    border-color: rgba(0,111,238,0.44);
    color: #60a5fa;
    box-shadow: 0 0 0 1px rgba(0,111,238,0.14);
}
.le-tb-ico { font-size: 1.1rem; line-height: 1; display: block; font-style: normal; font-weight: 400; }
.le-tb-lbl { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2px; text-align: center; }

/* CSS-drawn icons */
.le-ico-line { display: block; width: 18px; height: 18px; position: relative; }
.le-ico-line::before {
    content: ''; position: absolute;
    width: 22px; height: 2px; top: 8px; left: -2px;
    background: currentColor; transform: rotate(-40deg); border-radius: 2px;
}
.le-ico-rect  { display: block; width: 18px; height: 13px; border: 2px solid currentColor; border-radius: 2px; }
.le-ico-circ  { display: block; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; }
.le-ico-text  { font-size: 1.05rem; font-weight: 900; line-height: 1; font-family: Georgia, serif; }
.le-ico-north {
    width: 18px; height: 18px;
    background: linear-gradient(to bottom, currentColor 50%, transparent 50%);
    border-radius: 50%; font-size: 0.5rem; font-weight: 900;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 2px; color: #60a5fa; border: 1.5px solid currentColor;
}

/* Tool options */
.le-opts { display: flex; flex-direction: column; gap: 10px; }
.le-opt-row { display: flex; align-items: center; gap: 10px; }
.le-opt-col { display: flex; flex-direction: column; gap: 4px; }
.le-opt-lbl { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; min-width: 60px; }
.le-opt-val { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }

.le-color-inp {
    width: 38px; height: 27px; border-radius: var(--r-md);
    border: 1px solid var(--border); background: transparent;
    cursor: pointer; padding: 2px;
}
.le-range { flex: 1; accent-color: var(--primary); cursor: pointer; }
.le-text-inp {
    width: 100%; padding: 7px 10px; border-radius: var(--r-md);
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--text); font-size: 0.78rem; outline: none;
    transition: border-color 0.15s; font-family: inherit;
}
.le-text-inp:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,111,238,0.18); }
.le-num-inp {
    width: 56px; padding: 5px 7px; border-radius: var(--r-md);
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--text); font-size: 0.78rem; outline: none; font-family: inherit;
}
.le-num-inp:focus { border-color: var(--primary); }

/* Selection panel */
.le-sel-panel {
    margin: 8px 13px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    transition: var(--tr);
    flex-shrink: 0;
}
.le-sel-panel.le-sel-active {
    background: rgba(0,111,238,0.08);
    border-color: rgba(0,111,238,0.26);
}
.le-sel-body { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.le-sel-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bg-hover); flex-shrink: 0; transition: background 0.2s;
}
.le-sel-panel.le-sel-active .le-sel-dot { background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,0.45); }
.le-sel-text { min-width: 0; }
.le-sel-type { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
.le-sel-panel.le-sel-active .le-sel-type { color: #60a5fa; }
.le-sel-hint { font-size: 0.64rem; color: rgba(161,161,170,0.5); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.le-del-btn {
    padding: 4px 9px; border-radius: var(--r-md); font-size: 0.7rem; font-weight: 600;
    background: rgba(243,18,96,0.1); border: 1px solid rgba(243,18,96,0.22);
    color: #fb7185; cursor: pointer; transition: var(--tr); white-space: nowrap;
    flex-shrink: 0; box-shadow: none; font-family: inherit;
}
.le-del-btn:hover:not(:disabled) { background: rgba(243,18,96,0.2); border-color: rgba(243,18,96,0.42); transform: none; }
.le-del-btn:disabled { opacity: 0.28; cursor: not-allowed; }

/* Export */
.le-export-note { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.45; }
.le-export-row  { display: flex; gap: 7px; }
.le-export-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 12px 8px; border-radius: var(--r-xl);
    border: 1px solid rgba(0,111,238,0.2);
    background: rgba(0,111,238,0.07);
    cursor: pointer; transition: var(--tr); box-shadow: none; font-family: inherit;
}
.le-export-btn:hover {
    background: rgba(0,111,238,0.16);
    border-color: rgba(0,111,238,0.44);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,111,238,0.14);
}
.le-export-jpeg { border-color: rgba(23,201,100,0.2); background: rgba(23,201,100,0.06); }
.le-export-jpeg:hover {
    background: rgba(23,201,100,0.16); border-color: rgba(23,201,100,0.44);
    box-shadow: 0 4px 16px rgba(23,201,100,0.12);
}
.le-export-fmt { font-size: 0.84rem; font-weight: 800; color: #60a5fa; letter-spacing: 1px; }
.le-export-jpeg .le-export-fmt { color: #4ade80; }
.le-export-sub { font-size: 0.6rem; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE / TABLET
   ════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .inspection-meta { display: none; }
    .inspector-grid  { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

    .canvas-panel {
        padding: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    #layoutCanvas { min-height: 180px; }

    .info-panel {
        border-left: none;
        border-top: 1px solid var(--border);
        max-height: 42vh; max-height: 42dvh;
        min-height: 220px;
    }

    .status-chip { display: none; }
}

@media (max-width: 480px) {
    .brand-header  { padding: 10px 14px; }
    .action-bar    { padding: 8px 14px; }
    .mode-tab      { padding: 6px 10px; font-size: 0.72rem; }
    .logo-area h1  { font-size: 1.1rem; }
    .badge-pro     { display: none; }
    .logo-area > span:last-child { display: none; }

    /* max-height removed — canvas wrapper fills all available space */

    .info-panel    { max-height: 44vh; max-height: 44dvh; }
    #canvasHint    { display: none; }
}

/* Safe area insets (iPhone notch / Dynamic Island) */
@supports (padding: env(safe-area-inset-left)) {
    .brand-header {
        padding-left:  max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    .action-bar {
        padding-left:  max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    footer {
        padding-left:   max(20px, env(safe-area-inset-left));
        padding-right:  max(20px, env(safe-area-inset-right));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    .canvas-panel {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ════════════════════════════════════════════════════════════
   BOOTSTRAP INTEGRATION — NEW LAYOUT & MOBILE CLASSES
   ════════════════════════════════════════════════════════════ */

/* ── App Navbar (Bootstrap nav override) ── */
.app-navbar {
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    z-index: 50;
}

.navbar-brand-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.app-logo {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff 0%, #93c5fd 45%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.app-logo-img {
    height: 32px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
    filter: brightness(1);
}

/* ── App Action Bar ── */
.app-action-bar {
    background: rgba(20,20,22,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 7px max(16px, env(safe-area-inset-right)) 7px max(16px, env(safe-area-inset-left));
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── App Body (main two-panel container) ── */
.app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    flex-direction: row;
}

/* ── App Footer ── */
.app-footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 8px max(20px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: center;
    flex-shrink: 0;
}

/* ── Info Cards (Bootstrap-aware variant of .card) ── */
.info-card {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: transparent;
}
.info-card:last-child { border-bottom: none; }

.info-card-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    margin-top: 8px;
    margin-bottom: 6px;
}

/* Scrollable content inside info panel */
.panel-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* ── Bottom Navigation (mobile only) ── */
.bottom-nav {
    display: flex;
    background: rgba(14,14,16,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    z-index: 100;
}

.bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    border-radius: 0;
    outline: none;
    min-height: 52px;
}
.bn-item:hover  { color: var(--text-dim); background: rgba(255,255,255,0.04); }
.bn-item.active { color: var(--primary); }

.bn-icon  { font-size: 1.3rem; line-height: 1; display: block; }
.bn-label { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }

/* ── Sheet Handle ── */
.sheet-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 16px 6px;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.sheet-bar {
    width: 38px;
    height: 4px;
    background: var(--bg-active);
    border-radius: var(--r-full);
    transition: background 0.15s;
}
.sheet-handle:hover .sheet-bar { background: var(--primary); }

.sheet-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.4px;
}

/* ── Mobile: Info Panel as Sliding Bottom Sheet ── */
@media (max-width: 991.98px) {
    .app-body { flex-direction: column; }

    .canvas-panel {
        flex: 1;
        overflow: hidden;
        min-height: 0;
    }

    .info-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 80px !important; /* bottom-nav pill height */
        width: 100% !important;
        max-height: 75vh; max-height: 75dvh;
        background: #111113;
        border: 1px solid var(--border);
        border-bottom: none;
        border-left: none !important;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 48px rgba(0,0,0,0.65);
        z-index: 90;
        transform: translateY(calc(100% - 50px));
        transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow-y: auto;
        overflow-x: hidden;
        display: flex !important;
        flex-direction: column;
    }

    .info-panel.expanded {
        transform: translateY(0);
    }

    /* #layoutCanvas max-height removed — canvas wrapper owns the space */

    .app-action-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .status-chip { display: none; }
}

/* ── Desktop: Info Panel as Fixed Sidebar ── */
@media (min-width: 992px) {
    .info-panel {
        width: 340px !important;
        flex-shrink: 0;
        border-left: 1px solid var(--border) !important;
        border-top: none;
        border-radius: 0;
        transform: none !important;
        position: static !important;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex !important;
        flex-direction: column;
    }

    .sheet-handle { display: none !important; }
}

/* ── Bootstrap .card override for elev-popover ── */
.elev-popover.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-md) !important;
    border-radius: var(--r-xl) !important;
    color: var(--text) !important;
}

/* ── Bootstrap modal content dark theme fix ── */
.modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-md) !important;
    border-radius: var(--r-2xl) !important;
    color: var(--text) !important;
}
.modal-header {
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 18px !important;
}
.modal-footer {
    border-top: 1px solid var(--border) !important;
    padding: 12px 18px !important;
}

/* ════════════════════════════════════════════════════════════
   REDESIGN v2 — Menu Drawer, Action Bar, Info Panel Polish
   ════════════════════════════════════════════════════════════ */

/* ── Menu overlay (full-screen backdrop) ── */
.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.menu-overlay.active { display: block; }

/* ── Menu drawer (slides in from right) ── */
.menu-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 92vw);
    background: #111113;
    border-left: 1px solid var(--border-md);
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 48px rgba(0,0,0,0.7);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}
.menu-overlay.active .menu-drawer { transform: translateX(0); }

/* ── Menu header ── */
.menu-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    padding-top: max(16px, env(safe-area-inset-top));
}
.menu-hd-brand { display: flex; align-items: center; gap: 10px; }
.menu-logo { height: 28px; width: auto; object-fit: contain; }
.menu-hd-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    background: linear-gradient(135deg, #ffffff 0%, #93c5fd 45%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.menu-close-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-md);
    background: rgba(255,255,255,0.06);
    color: var(--text-dim);
    font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--tr);
    padding: 0; box-shadow: none; flex-shrink: 0;
}
.menu-close-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); transform: none; }

/* ── Menu body ── */
.menu-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 max(20px, env(safe-area-inset-bottom));
}

/* ── Menu sections ── */
.menu-section {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.menu-section:last-child { border-bottom: none; }
.menu-section-danger { padding-top: 8px; }

.menu-section-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* ── Menu form fields ── */
.menu-field {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 10px 13px;
    font-size: 0.85rem;
    color: var(--text);
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
.menu-field:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0,111,238,0.2);
}
input[type="date"].menu-field { color-scheme: dark; }

/* ── Menu action buttons ── */
.menu-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border-radius: var(--r-lg);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--tr);
    text-align: left;
    box-shadow: none;
}
.menu-action-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.09);
    color: var(--text);
    border-color: var(--border-md);
    transform: none;
}
.menu-action-ico { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.menu-action-danger {
    color: #fb7185;
    border-color: rgba(243,18,96,0.2);
    background: rgba(243,18,96,0.06);
}
.menu-action-danger:hover:not(:disabled) {
    background: rgba(243,18,96,0.14);
    border-color: rgba(243,18,96,0.38);
    color: #fb7185;
}

/* ── Hamburger menu trigger in navbar ── */
.navbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.nav-menu-btn {
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px; cursor: pointer; padding: 0;
    transition: var(--tr); box-shadow: none;
    flex-shrink: 0;
}
.nav-menu-btn:hover { background: rgba(255,255,255,0.09); border-color: var(--border-md); transform: none; }
.nav-menu-btn:active { transform: scale(0.95); }

.hamburger-line {
    display: block;
    width: 18px; height: 1.5px;
    background: var(--text-dim);
    border-radius: 2px;
    transition: background 0.15s;
}
.nav-menu-btn:hover .hamburger-line { background: var(--text); }

/* Override status chip in navbar right (hide on mobile) */
.navbar-right .status-chip {
    display: none;
}
@media (min-width: 1200px) {
    .navbar-right .status-chip { display: flex; }
}

/* ── Action bar buttons (new naming) ── */
.btn-ab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: var(--r-lg);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-dim);
    white-space: nowrap;
    transition: var(--tr);
    box-shadow: none; outline: none;
    -webkit-tap-highlight-color: transparent;
}
.btn-ab:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); border-color: var(--border-md); transform: none; }
.btn-ab:active:not(:disabled) { transform: scale(0.97); }

.btn-ab-primary {
    background: var(--primary); border-color: transparent;
    color: #fff; font-weight: 600;
}
.btn-ab-primary:hover:not(:disabled) { background: var(--primary-dark); color: #fff; border-color: transparent; }

.btn-ab-green {
    background: rgba(23,201,100,0.12); border-color: rgba(23,201,100,0.24);
    color: #4ade80;
}
.btn-ab-green:hover:not(:disabled) { background: rgba(23,201,100,0.22); }

.btn-ab-red {
    background: rgba(243,18,96,0.08); border-color: rgba(243,18,96,0.22);
    color: #fb7185;
}
.btn-ab-red:hover:not(:disabled) { background: rgba(243,18,96,0.18); }

/* ── Mode pill (Place / Move) ── */
.mode-pill {
    display: flex;
    gap: 3px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: 3px;
}
.mode-pill-btn {
    border: none;
    background: transparent;
    border-radius: var(--r-full);
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--tr);
    white-space: nowrap;
    box-shadow: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 34px;
}
.mode-pill-btn.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,111,238,0.35);
}
.mode-pill-btn:hover:not(.active) { color: var(--text-dim); background: rgba(255,255,255,0.06); transform: none; }

/* ── Sheet toggle btn ── */
.btn-sheet-toggle {
    padding: 7px 13px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-dim);
    font-size: 0.78rem;
    cursor: pointer;
    transition: var(--tr);
    box-shadow: none; outline: none;
    white-space: nowrap;
}
.btn-sheet-toggle:hover { background: var(--bg-hover); color: var(--text); transform: none; }

/* ════════════════════════════════════════════════════════════
   INFO PANEL — POLISHED CARDS & FORM CONTROLS
   ════════════════════════════════════════════════════════════ */

/* Improved info card */
.info-card {
    padding: 18px 18px;
}

/* Empty state */
.panel-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 8px 0;
    line-height: 1.5;
}

/* Panel body text */
.panel-body-text {
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.65;
}

/* Panel form inputs */
.panel-input {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 10px 13px;
    font-size: 0.85rem;
    color: var(--text);
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: block;
    -webkit-appearance: none;
    appearance: none;
}
.panel-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0,111,238,0.2);
}
textarea.panel-input { resize: vertical; min-height: 80px; }

/* Panel row (label + control inline) */
.panel-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.panel-val {
    font-size: 0.82rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

/* Panel select */
.panel-select {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 9px 12px;
    border-radius: var(--r-lg);
    font-size: 0.85rem;
    color: var(--text);
    outline: none;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s;
    min-height: 40px;
}
.panel-select:focus { border-color: var(--primary); }

/* Panel button row */
.panel-btn-row {
    display: flex;
    gap: 8px;
}

/* Panel buttons */
.panel-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--r-lg);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-dim);
    transition: var(--tr);
    box-shadow: none; outline: none;
    white-space: nowrap;
    min-height: 42px;
    -webkit-tap-highlight-color: transparent;
}
.panel-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); transform: none; }
.panel-btn:active:not(:disabled) { transform: scale(0.97); }

.panel-btn-primary {
    background: var(--primary); border-color: transparent;
    color: #fff; font-weight: 600;
}
.panel-btn-primary:hover:not(:disabled) { background: var(--primary-dark); color: #fff; border-color: transparent; }

.panel-btn-danger {
    background: rgba(243,18,96,0.1); border-color: rgba(243,18,96,0.24);
    color: #fb7185;
}
.panel-btn-danger:hover:not(:disabled) { background: rgba(243,18,96,0.2); }

.panel-btn-outline {
    background: transparent;
    border-color: var(--primary);
    color: #60a5fa;
}
.panel-btn-outline:hover:not(:disabled) { background: rgba(0,111,238,0.1); }

/* Improved marker list items */
.marker-item {
    min-height: 52px;
    padding: 10px 12px;
}

/* Section label */
.section-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES
   ════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    /* Give canvas max space */
    .canvas-panel { padding: 0; }

    /* Action bar - horizontal scroll, no wrap */
    .app-action-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 7px 14px;
        gap: 7px;
    }
    .app-action-bar::-webkit-scrollbar { display: none; }

    /* Bigger touch targets on mobile */
    .btn-ab, .mode-pill-btn { min-height: 40px; }
    .le-ab-btn { min-height: 38px; }

    /* Info panel as improved bottom sheet */
    .info-panel {
        max-height: 78vh; max-height: 78dvh;
    }

    /* Better sheet padding */
    .info-card { padding: 16px 16px; }
}

@media (max-width: 480px) {
    /* Slightly smaller navbar on very small screens */
    .app-navbar { padding: 8px 14px; }
    .app-logo-img { height: 26px; }
    .mode-tabs { display: none !important; }
}

/* Mode action groups — column direction inside sidebar */
.app-navbar #inspectActions,
.app-navbar #surveyActions,
.app-navbar #layoutEditorActions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100%;
}

/* ── App logo base sizing (ceramic navbar overrides height/bg below) ── */
.app-logo-img {
    height: 36px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

/* Menu drawer logo on dark background — keep white pill.
   Even padding since 2026-08-08: this now carries the square R mark, not the
   wide lockup, and 6px of side padding on a square badge reads as lopsided. */
.menu-logo {
    background: rgba(255, 255, 255, 0.90);
    border-radius: 7px;
    padding: 3px;
}

/* ── Override old ID-selector styles for redesigned panel controls ── */
#severitySelect {
    padding: 9px 12px;
    font-size: 0.85rem;
    min-height: 40px;
    border-radius: var(--r-lg);
}

/* Ensure modePlace/modeDrag active state works with new pill styling */
#modePlace.active, #modeDrag.active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0,111,238,0.35) !important;
}

/* ════════════════════════════════════════════════════════════
   LEFT SIDEBAR — compact vertical strip (replaces top bar)
   ════════════════════════════════════════════════════════════ */

/* Row wrapper: sidebar + rest of app side-by-side */
.app-layout-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Sidebar */
.app-navbar {
    background: #EBEBEB !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: 1px solid rgba(0,0,0,0.10) !important;
    border-bottom: none !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.14);
    /* Vertical */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 68px !important;
    min-width: 68px !important;
    flex-shrink: 0;
    padding: 8px 6px !important;
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    position: relative !important;
    min-height: 0;
}
.app-navbar::-webkit-scrollbar { display: none; }

/* Logo — small square that fits the sidebar */
.app-logo-img {
    width: 52px !important;
    height: 52px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: var(--r-md) !important;
    flex-shrink: 0;
    display: block;
    align-self: center !important;
}

/* Brand area centred in sidebar */
.navbar-brand-area {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: auto;
    width: 100%;
    flex-shrink: 0;
}

/* Text fallback (small) */
#appLogoText.app-logo {
    background: none !important;
    -webkit-text-fill-color: #1A1A1A !important;
    color: #1A1A1A !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    font-size: 0.65rem !important;
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

/* Sidebar action strip — vertical column */
.app-navbar .navbar-actions {
    flex: 1;
    align-self: auto;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: 0;
    min-width: 0;
}
.app-navbar .navbar-actions::-webkit-scrollbar { display: none; }

/* All action buttons in sidebar — square icon style, centred */
.app-navbar .btn-ab,
.app-navbar .nav-upload-btn,
.app-navbar .mode-pill-btn,
.app-navbar .le-ab-btn {
    width: 52px !important;
    min-height: 46px !important;
    max-width: 52px !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 2px !important;
    font-size: 0.56rem !important;
    gap: 2px !important;
    border-radius: var(--r-md) !important;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    flex-shrink: 0;
    /* Light sidebar colours */
    background: rgba(0,0,0,0.06) !important;
    border-color: rgba(0,0,0,0.14) !important;
    color: rgba(0,0,0,0.78) !important;
    margin: 0 auto !important;  /* centre within sidebar */
}
.app-navbar .btn-ab:hover:not(:disabled),
.app-navbar .le-ab-btn:hover:not(:disabled),
.app-navbar .mode-pill-btn:hover:not(.active) {
    background: rgba(0,0,0,0.12) !important;
    color: rgba(0,0,0,0.92) !important;
    transform: none !important;
}
.app-navbar .btn-ab-primary,
.app-navbar .mode-pill-btn.active,
.app-navbar #modePlace.active {
    background: var(--primary) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.app-navbar .le-ab-del { color: #fb7185 !important; border-color: rgba(243,18,96,0.3) !important; background: rgba(243,18,96,0.12) !important; }
.app-navbar .le-ab-clr { color: #fbbf24 !important; border-color: rgba(245,165,36,0.3) !important; background: rgba(245,165,36,0.1) !important; }
.app-navbar .le-ab-dl  { color: #60a5fa !important; border-color: rgba(0,111,238,0.3) !important; background: rgba(0,111,238,0.12) !important; }
.app-navbar .btn-ab-green { color: #4ade80 !important; border-color: rgba(23,201,100,0.3) !important; background: rgba(23,201,100,0.12) !important; }
.app-navbar .btn-ab-red   { color: #fb7185 !important; border-color: rgba(243,18,96,0.3) !important; background: rgba(243,18,96,0.12) !important; }

/* Separator */
.app-navbar .le-ab-sep {
    width: 70%;
    height: 1px;
    background: rgba(0,0,0,0.15);
    margin: 2px auto;
    flex-shrink: 0;
}

/* Mode tabs: not used in sidebar */
.mode-tabs { display: none !important; }

/* Right/bottom section of sidebar */
.navbar-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
}

/* Status chip: hide (too narrow) */
.navbar-right .status-chip { display: none !important; }

/* Hamburger — dark lines on light sidebar */
.hamburger-line { background: rgba(0,0,0,0.65) !important; }
.nav-menu-btn {
    border-color: rgba(0,0,0,0.18) !important;
    background: rgba(0,0,0,0.06) !important;
    flex-shrink: 0;
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto !important;
}
.nav-menu-btn:hover { background: rgba(0,0,0,0.12) !important; transform: none; }

/* Install button */
.nav-install-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-radius: var(--r-md);
    background: var(--primary);
    border: none;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: var(--tr);
    width: 44px;
    flex-shrink: 0;
    box-shadow: none;
    margin: 0 auto;
}
.nav-install-btn:hover { background: var(--primary-dark); transform: none; }

/* ── Bottom nav — black background, white text ── */
.bottom-nav {
    background: #000000 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.bn-item {
    color: rgba(255,255,255,0.55) !important;
}
.bn-item:hover  { color: rgba(255,255,255,0.85) !important; background: rgba(255,255,255,0.06) !important; }
.bn-item.active { color: #ffffff !important; }

/* Bottom nav — always visible, full width */
.bottom-nav {
    display: flex !important;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   CANVAS LONG-PRESS STEERING WHEEL OVERLAY
   ════════════════════════════════════════════════════════════ */

/* The overlay is positioned fixed at the long-press clientX/clientY */
.canvas-sw-overlay {
    position: fixed;
    z-index: 600;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 6px 24px rgba(0,111,238,0.5));
}
.canvas-sw-overlay.active { display: flex; }

.canvas-sw-ring {
    width: 130px;
    height: 130px;
    transition: transform 0.04s linear;
}

.canvas-sw-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.canvas-sw-hint {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: var(--r-full);
    border: 1px solid rgba(0,111,238,0.35);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* Pulsing outer ring animation */
.csw-pulse {
    animation: cswPulse 1.4s ease-in-out infinite;
}

@keyframes cswPulse {
    0%, 100% { opacity: 0.18; r: 60; }
    50%       { opacity: 0.5;  r: 63; }
}

/* Canvas wrapper: allow CSS transform for zoom */
.canvas-wrapper {
    transform-origin: 0 0;
    will-change: transform;
}

/* Canvas panel: clip zoomed canvas but allow overflow scroll for pan */
.canvas-panel {
    overflow: hidden;
    position: relative;
}

/* ════════════════════════════════════════════════════════════
   STEERING WHEEL + NUDGE PAD
   ════════════════════════════════════════════════════════════ */

.marker-ctrl-wrap {
    display: flex;
    gap: 12px;
    padding: 14px 0 10px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 10px 0 14px;
    justify-content: space-around;
    align-items: flex-start;
}

.ctrl-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.ctrl-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.ctrl-val-display {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ── Steering wheel ── */
.steering-wheel {
    width: 110px;
    height: 110px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: filter 0.15s;
    border-radius: 50%;
}
.steering-wheel:active { cursor: grabbing; filter: brightness(1.15); }

.sw-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,111,238,0.25));
    transition: transform 0.05s linear;
}

/* ── Nudge pad ── */
.nudge-pad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.nudge-mid-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nudge-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.1s, color 0.1s;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.nudge-btn:active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: none;
}

.nudge-center {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1rem;
    opacity: 0.5;
}

/* ════════════════════════════════════════════════════════════
   HALF-OPEN PANEL STATE
   ════════════════════════════════════════════════════════════ */

/* ── Navbar right — vertically centred ── */
.navbar-right {
    align-self: center;
}

/* ── Navbar actions area (scrollable tool strip) ── */
.navbar-actions {
    flex: 1;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 4px;
}
.navbar-actions::-webkit-scrollbar { display: none; }

/* Hide old action bar (content now lives in navbar) */
.app-action-bar { display: none !important; }

/* Bottom sheet — three states: hidden / half / full */
@media (max-width: 991.98px) {
    .info-panel {
        bottom: 80px !important;
        left: 68px !important;      /* clear the sidebar */
        right: 0 !important;
        width: auto !important;
        transform: translateY(100%) !important;
        max-height: 82vh; max-height: 82dvh;
        transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1),
                    max-height 0.3s cubic-bezier(0.25,0.8,0.25,1) !important;
    }
    .info-panel.half-open {
        transform: translateY(0) !important;
        max-height: 50vh; max-height: 50dvh;
    }
    .info-panel.expanded {
        transform: translateY(0) !important;
        max-height: 82vh; max-height: 82dvh;
    }
    /* Canvas fills the space right of sidebar — no explicit max-height needed */
}

/* ════════════════════════════════════════════════════════════
   PROJECT LAUNCH SCREEN
   ════════════════════════════════════════════════════════════ */

.project-launch-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: #000;
    align-items: center;
    justify-content: center;
}
.project-launch-overlay.active { display: flex; }

.launch-modal {
    width: min(460px, 96vw);
    max-height: 92dvh;
    background: #111113;
    border: 1px solid var(--border-md);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.launch-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 24px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.launch-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #fff 0%, #93c5fd 50%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.launch-subtitle { font-size: 0.8rem; color: var(--text-muted); }

.launch-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#launchSetupView { display: none; flex-direction: column; gap: 12px; }

.launch-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: -4px;
}

.launch-input {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 10px 13px;
    font-size: 0.88rem;
    color: var(--text);
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.launch-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,111,238,0.2); }
input[type="date"].launch-input { color-scheme: dark; }

.launch-btn-primary {
    width: 100%;
    padding: 13px;
    background: var(--primary);
    border: none;
    border-radius: var(--r-lg);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: var(--tr);
    box-shadow: none;
}
.launch-btn-primary:hover { background: var(--primary-dark); transform: none; }

.launch-btn-secondary {
    width: 100%;
    padding: 11px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--text-dim);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: var(--tr);
    box-shadow: none;
}
.launch-btn-secondary:hover { background: rgba(255,255,255,0.08); color: var(--text); transform: none; }

.launch-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.72rem;
}
.launch-divider::before,
.launch-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.launch-empty { font-size: 0.8rem; color: var(--text-muted); text-align: center; padding: 8px 0; }

.launch-proj-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 10px 12px;
    cursor: pointer;
    transition: var(--tr-fast);
}
.launch-proj-item:hover { background: rgba(0,111,238,0.08); border-color: rgba(0,111,238,0.3); }
.lpi-thumb {
    width: 46px; height: 46px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.lpi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lpi-body { flex: 1; min-width: 0; }
.lpi-name { font-size: 0.88rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpi-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpi-actions { display: flex; gap: 4px; flex-shrink: 0; }
.lpi-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center;
}
.lpi-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); }
.lpi-btn.lpi-del:hover { color: #fb7185; border-color: rgba(243,18,96,0.4); }

/* Project cover picker (setup form) */
.launch-thumb-row { display: flex; align-items: center; gap: 8px; }
.launch-thumb-preview {
    width: 52px; height: 52px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; flex-shrink: 0; overflow: hidden;
}
.launch-thumb-preview img { width: 100%; height: 100%; object-fit: cover; }
.launch-thumb-btn { flex: 1; margin: 0 !important; padding: 8px !important; font-size: 0.78rem !important; }
.launch-icon-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.launch-icon-opt {
    width: 48px; height: 48px;
    border-radius: 9px;
    background: rgba(255,255,255,0.05);
    border: 2px solid var(--border);
    padding: 0; cursor: pointer; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.launch-icon-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.launch-icon-opt:hover { border-color: rgba(0,111,238,0.5); }
.launch-icon-opt.sel { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,111,238,0.35); }

/* ════════════════════════════════════════════════════════════
   PHOTO ANNOTATION EDITOR
   ════════════════════════════════════════════════════════════ */

/* ── In-app HTML report preview ── */
.report-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 6000;
    background: #1e293b;
    flex-direction: column;
}
.report-overlay.active { display: flex; }
.report-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* 🔴 The overlay is fullscreen, so this bar sits UNDER the status bar and
       the camera cut-out on a phone. Print/PDF and New tab were physically
       untappable there — the notch swallows the touch. The safe-area inset is
       what keeps them below the hardware; the 10px floor keeps the bar looking
       right on a device that reports no inset at all. */
    padding: calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px))
             10px calc(14px + env(safe-area-inset-left, 0px));
    background: #0f172a;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
}
.report-bar-title { color: #fff; font-weight: 600; font-size: 0.95rem; }
.report-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.report-frame {
    flex: 1;
    width: 100%;
    border: none;
    background: #fff;
    min-height: 0;
}

/* ── Sub-project (level) selector in the top bar ── */
.subproj-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.subproj-select {
    max-width: 150px;
    height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    background: var(--bg-card, #14161f);
    color: var(--text, #e6e9f2);
    border: 1px solid var(--border-md, rgba(255,255,255,0.14));
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    max-height: 34px;
}
/* Sub-project manage rows */
.subproj-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-dark, #0f1119);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 10px;
    padding: 6px 8px;
}
.subproj-row.active { border-color: var(--primary, #006FEE); }
.subproj-row input.subproj-name {
    flex: 1; min-width: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 4px 2px;
}
.subproj-row input.subproj-name:focus { outline: 1px solid var(--primary, #006FEE); border-radius: 6px; }
.subproj-row .sp-btn {
    background: transparent;
    border: none;
    color: var(--text-dim, #94a3b8);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 6px;
    border-radius: 6px;
}
.subproj-row .sp-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.subproj-row .sp-btn.sp-del:hover { color: #ef4444; }
.subproj-row .sp-badge {
    font-size: 0.66rem;
    color: var(--primary, #4da3ff);
    font-weight: 700;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   LUCIDE ICONS — consistent sizing/stroke; inherit currentColor
   ════════════════════════════════════════════════════════════ */
[data-lucide] { display: inline-flex; }
svg.lucide {
    width: 20px; height: 20px;
    stroke-width: 2;
    vertical-align: middle;
    flex-shrink: 0;
    pointer-events: none;   /* clicks pass through to the button */
}
.pa-tool svg.lucide       { width: 19px; height: 19px; }
.pa-btn svg.lucide        { width: 16px; height: 16px; }
.bn-icon svg.lucide,
.bottom-nav svg.lucide    { width: 22px; height: 22px; }
.bn-item[data-mode="details"] .bn-icon svg.lucide { width: 44px; height: 44px; }

/* Non-destructive date stamp — a render-time overlay, never baked into pixels.
   Shown only when the global toggle adds .date-stamps-on to <body>. */
.photo-date, .lightbox-date { display: none; }
body.date-stamps-on .photo-date {
    display: block; position: absolute; bottom: 3px; right: 3px;
    background: rgba(0,0,0,0.7); color: #fff; font-size: 9px; line-height: 1;
    padding: 2px 4px; border-radius: 3px; pointer-events: none; font-weight: 600;
}
body.date-stamps-on .lightbox-date {
    display: block; position: absolute; bottom: 16px; right: 16px;
    background: rgba(0,0,0,0.72); color: #fff; font-size: clamp(12px, 2.4vw, 18px);
    padding: 4px 10px; border-radius: 6px; pointer-events: none; font-weight: 600;
}
.menu-action-ico svg.lucide,
.le-section-icon svg.lucide,
.info-card-title svg.lucide { width: 18px; height: 18px; }
.section-label svg.lucide,
.audio-item svg.lucide,
.le-tb-ico svg.lucide,
.sk-details-tool svg.lucide { width: 16px; height: 16px; }
.photo-num svg.lucide,
.marker-item-counts svg.lucide { width: 12px; height: 12px; }
.lpi-thumb svg.lucide     { width: 28px; height: 28px; opacity: 0.8; }
.le-sync-icon svg.lucide,
.le-snap-icon svg.lucide  { width: 18px; height: 18px; }
.sev-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0; vertical-align: middle;
}
.sev-dot.sev-critical { background: #ef4444; }
.sev-dot.sev-major    { background: #f97316; }
.sev-dot.sev-minor    { background: #3b82f6; }
.sev-dot.sev-note     { background: #10b981; }

.pa-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: #000;
    flex-direction: column;
}
.pa-overlay.active { display: flex; }

.pa-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    /* ⚠️ The top padding clears the status bar and camera cutout. The page sets
       viewport-fit=cover and .pa-overlay is inset:0, so on a phone this toolbar
       starts at the physical top of the screen — the first row of tools sat
       under the cutout and simply would not take a tap. Nothing looked broken;
       the buttons were drawn, they were just not reachable. env() is 0 in a
       desktop browser, so this changes nothing there. */
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
    background: #111113;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
/* Every tool visible at once, on any width. A fixed 6-column grid pushed the
   17th tool off the end, and a scrolling row hides tools behind a gesture
   nobody discovers — an inspector on a ladder should see the whole set. */
/* PREMIUM badge on the Export & Share sheet's AI row. The shared treatment
   pins the badge to the top-right corner, which on a toggle row lands on top
   of the switch itself — so it moves to the left of the switch here. */
/* PREMIUM badge on the Export & Share sheet's AI row.
   The shared treatment positions the badge ABSOLUTELY in the corner, which on
   a toggle row either lands on the switch or on the end of the label text.
   Here it joins the flex flow instead and sits immediately left of the switch:
   flex items cannot overlap, so no wording or badge length can ever bring the
   clash back, and `margin-left:auto` keeps the row exactly as wide as it was. */
#shareAIRow[data-rai-tag]::after {
    position: static; transform: none;
    margin-left: auto; margin-right: 10px;
    align-self: center; order: 1;
}
#shareAIRow .le-tog-wrap { order: 2; }

.pa-tools {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 4px; max-width: 100%; width: 100%;
}
/* Each group owns its own row(s): drawing tools wrap within the drawing
   group, so a measurement tool can never end up sitting between two drawing
   tools. The group NAMES were dropped on the operator's instruction — the
   separator carries the grouping and the full row width goes to the tools,
   which is what matters on a phone. */
.pa-group { display: block; }
.pa-group + .pa-group { border-top: 1px solid var(--border); padding-top: 4px; }
.pa-group-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pa-tools .pa-tool { flex: 0 0 auto; }
.pa-opts  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Adjust row toggle only exists on small screens */
#paAdjustToggle { display: none; }

/* Options bar: scrollable controls on the left, Delete/Apply/Cancel pinned
   permanently on the right — they can never scroll out of view. */
.pa-optsbar {
    display: flex; align-items: center; gap: 6px;
    width: 100%; min-width: 0;
}
.pa-optsbar .pa-opts { flex: 1 1 auto; min-width: 0; }
#paActionsPin {
    display: flex; gap: 6px; align-items: center;
    flex-shrink: 0; margin-left: auto;
    padding-left: 8px;
    border-left: 1px solid var(--border);
}
@media (max-width: 900px) {
    /* Compact editor toolbar: all tools VISIBLE across a few wrapped rows
       (no horizontal scrolling) so editing is fast. Image adjustments still
       collapse behind the sliders toggle. */
    .pa-tools .pa-tool { width: 34px; height: 34px; }
    /* Wrap, never scroll. This row used to be overflow-x:auto with the
       scrollbar hidden, so the controls past the right edge were invisible
       AND had no affordance — you had to already know to swipe. */
    .pa-opts { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }
    .pa-opts > * { flex-shrink: 0; }
    .pa-opts .pa-range { width: 60px; }

    #paAdjustToggle { display: inline-flex; }
    #paAdjustRow { display: none; width: 100%; }
    #paAdjustRow.open { display: flex; }
}
.pa-actions { display: flex; gap: 6px; margin-left: auto; }

.pa-tool {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--tr); padding: 0; box-shadow: none;
}
.pa-tool.active { background: var(--primary); border-color: transparent; color: #fff; }
.pa-tool:hover:not(.active) { background: rgba(255,255,255,0.12); color: var(--text); transform: none; }

.pa-color-inp { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--border); cursor: pointer; padding: 2px; background: transparent; }
.pa-select { height: 32px; border-radius: var(--r-sm); border: 1px solid var(--border); background: rgba(255,255,255,0.06); color: var(--text); font-size: 0.72rem; padding: 0 6px; cursor: pointer; }
.pa-range     { width: 80px; accent-color: var(--primary); cursor: pointer; }
.pa-val       { font-size: 0.72rem; color: var(--text-muted); min-width: 18px; }

.pa-btn {
    padding: 6px 12px;
    border-radius: var(--r-lg);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.75rem; font-weight: 500; font-family: inherit;
    cursor: pointer; transition: var(--tr); box-shadow: none; white-space: nowrap;
}
.pa-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); transform: none; }
.pa-btn-primary { background: var(--primary); border-color: transparent; color: #fff; font-weight: 600; }
.pa-btn-primary:hover { background: var(--primary-dark); color: #fff; }
.pa-btn-danger  { background: rgba(243,18,96,0.1); border-color: rgba(243,18,96,0.25); color: #fb7185; }
.pa-btn-danger:hover { background: rgba(243,18,96,0.2); }

.pa-canvas-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0a0a0a;
    padding: 12px;
    min-height: 0;
}
/* Fabric wraps the canvas in .canvas-container; size is driven by Fabric
   (CSS-only dimensions) so pointer mapping stays correct on mobile. */
.pa-canvas-wrap .canvas-container {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    touch-action: none;
}
.pa-canvas-wrap .canvas-container canvas { touch-action: none; }

/* ════════════════════════════════════════════════════════════
   SKETCH OVERLAY
   ════════════════════════════════════════════════════════════ */

.sketch-overlay {
    position: fixed;
    left: 68px;       /* clear left sidebar */
    top: 0;
    right: 0;
    bottom: 80px;     /* clear bottom nav pill */
    z-index: 200;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
}

.sk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #1e293b;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.sk-tools  { display: flex; gap: 4px; }
.sk-opts   { display: flex; align-items: center; gap: 6px; }
.sk-actions { display: flex; gap: 6px; margin-left: auto; }

.sk-tool {
    width: 34px; height: 34px;
    border-radius: var(--r-md);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--tr); padding: 0; box-shadow: none;
}
.sk-tool.active { background: var(--primary); border-color: transparent; color: #fff; }
.sk-tool:hover:not(.active) { background: rgba(255,255,255,0.14); color: #fff; transform: none; }

.sketch-canvas-wrap {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px;
    background: #e2e8f0;
}
#sketchCanvas {
    display: block;
    cursor: crosshair;
    touch-action: none;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

/* ════════════════════════════════════════════════════════════
   AI REPORT OVERLAY
   ════════════════════════════════════════════════════════════ */

.ai-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 6000;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ai-overlay.active { display: flex; }

.ai-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-md);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
    width: min(760px, 96vw);
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.ai-hd-title { font-size: 1rem; font-weight: 700; color: var(--text); }

.ai-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.75;
}
.ai-content h2 { font-size: 1.05rem; color: #60a5fa; margin: 20px 0 8px; }
.ai-content h3 { font-size: 0.95rem; color: #93c5fd; margin: 16px 0 6px; }
.ai-content li { margin-left: 18px; margin-bottom: 4px; }
.ai-content strong { color: var(--text); }

/* AI report photo table */
.ai-photo-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.78rem; }
.ai-photo-table th {
    background: var(--bg-elevated); color: var(--text-dim); padding: 7px 10px;
    text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1px solid var(--border-md);
}
.ai-photo-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ai-photo-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

/* ════════════════════════════════════════════════════════════
   STITCH DESIGN SYSTEM — June 2026
   Glassmorphism + Material Design overhaul
   ════════════════════════════════════════════════════════════ */

/* ── Material Symbols base ── */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
    vertical-align: middle;
}

/* ── Glassmorphism utilities ── */
.glass-panel {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 24px;
}
.glass-popover {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

/* ── Sidebar — Dark Glassmorphic override ── */
.app-navbar {
    background: rgba(8,10,18,0.92) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-right: 1px solid rgba(255,255,255,0.09) !important;
    box-shadow: 2px 0 24px rgba(0,0,0,0.6) !important;
}

.app-navbar .btn-ab,
.app-navbar .nav-upload-btn,
.app-navbar .mode-pill-btn,
.app-navbar .le-ab-btn {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.70) !important;
}

.app-navbar .btn-ab:hover:not(:disabled),
.app-navbar .le-ab-btn:hover:not(:disabled),
.app-navbar .mode-pill-btn:hover:not(.active) {
    background: rgba(255,255,255,0.14) !important;
    color: rgba(255,255,255,0.95) !important;
}

.app-navbar .btn-ab-primary,
.app-navbar .mode-pill-btn.active,
.app-navbar #modePlace.active,
.app-navbar #modeFlag.active {
    background: rgba(0,111,238,0.85) !important;
    border-color: rgba(0,111,238,0.45) !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(0,111,238,0.45) !important;
}

.app-navbar .le-ab-sep {
    background: rgba(255,255,255,0.12) !important;
}

.app-navbar .le-ab-del { color: #fb7185 !important; border-color: rgba(243,18,96,0.3) !important; background: rgba(243,18,96,0.12) !important; }
.app-navbar .le-ab-clr { color: #fbbf24 !important; border-color: rgba(245,165,36,0.3) !important; background: rgba(245,165,36,0.1) !important; }
.app-navbar .le-ab-dl  { color: #60a5fa !important; border-color: rgba(0,111,238,0.3) !important; background: rgba(0,111,238,0.12) !important; }
.app-navbar .btn-ab-green { color: #4ade80 !important; border-color: rgba(23,201,100,0.3) !important; background: rgba(23,201,100,0.12) !important; }
.app-navbar .btn-ab-red   { color: #fb7185 !important; border-color: rgba(243,18,96,0.3) !important; background: rgba(243,18,96,0.12) !important; }

.hamburger-line { background: rgba(255,255,255,0.75) !important; }
.nav-menu-btn {
    border-color: rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.06) !important;
}
.nav-menu-btn:hover { background: rgba(255,255,255,0.12) !important; }

#appLogoText.app-logo {
    background: linear-gradient(135deg, #ffffff 0%, #93c5fd 50%, #a78bfa 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    writing-mode: vertical-lr !important;
    font-size: 0.6rem !important;
}

.app-navbar .rec-badge {
    background: rgba(243,18,96,0.12) !important;
    border-color: rgba(243,18,96,0.3) !important;
    color: #fb7185 !important;
}

/* ── Bottom Nav — Glassmorphic Pill ── */
.bottom-nav {
    background: transparent !important;
    border-top: none !important;
    justify-content: center !important;
    padding: 8px 16px max(14px, env(safe-area-inset-bottom)) 16px !important;
    gap: 0 !important;
    min-height: 76px;
}

.bn-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 9999px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.bn-item {
    flex: none !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 9999px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.55) !important;
    padding: 0 !important;
    min-height: unset !important;
    flex-direction: column !important;
    gap: 2px !important;
    transition: background 0.2s ease, color 0.2s ease, width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: none !important;
}

.bn-item:hover {
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.90) !important;
}

.bn-item.active {
    width: 60px !important;
    height: 60px !important;
    background: rgba(0,111,238,0.90) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(0,111,238,0.55) !important;
}

.bn-ms-icon {
    font-size: 22px !important;
    font-variation-settings: 'FILL' 0, 'wght' 300;
    transition: font-variation-settings 0.12s;
    display: block;
    line-height: 1;
}
/* Details tab: larger + icon */
.bn-item[data-mode="details"] .bn-ms-icon {
    font-size: 44px !important;
}
.bn-item.active .bn-ms-icon {
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

.bn-label {
    font-size: 0.50rem !important;
    letter-spacing: 0.2px !important;
    font-weight: 600 !important;
    color: inherit !important;
    line-height: 1;
}

/* ── Sketch Overlay — Dark Grid ── */
.sketch-overlay {
    background: #070808 !important;
}

.sk-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* Floating pill toolbar */
.sk-toolbar {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex !important;
    align-items: center;
    gap: 4px;
    padding: 6px 10px !important;
    background: rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    border-bottom: 1px solid rgba(255,255,255,0.14) !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    white-space: nowrap;
}

.sk-sep {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.18);
    flex-shrink: 0;
    margin: 0 2px;
}

.sk-tools { display: flex; gap: 3px; align-items: center; }
.sk-opts  { display: flex; align-items: center; gap: 5px; }
.sk-actions { display: flex; gap: 4px; margin-left: 0 !important; }

.sk-tool {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9999px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.65) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0 !important;
    font-size: 0 !important; /* hide old emoji text */
}
.sk-tool .material-symbols-outlined {
    font-size: 19px;
    pointer-events: none;
    font-variation-settings: 'FILL' 0;
}
.sk-tool:hover:not(.active) {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    transform: none !important;
}
.sk-tool.active {
    background: rgba(0,111,238,0.88) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(0,111,238,0.4) !important;
}
.sk-tool.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.sk-opts .pa-color-inp { width: 26px !important; height: 26px !important; border-radius: 50% !important; padding: 1px !important; }
.sk-opts .pa-range { width: 56px; }
.sk-opts .pa-val   { font-size: 0.68rem; color: rgba(255,255,255,0.50); min-width: 14px; }

.sk-actions .pa-btn {
    padding: 5px 10px !important;
    border-radius: 9999px !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.7rem !important;
    display: flex;
    align-items: center;
    gap: 3px;
}
.sk-actions .pa-btn .material-symbols-outlined { font-size: 15px; vertical-align: middle; }
.sk-actions .pa-btn:hover { background: rgba(255,255,255,0.14) !important; color: #fff !important; transform: none !important; }
.sk-actions .pa-btn-primary {
    background: rgba(0,111,238,0.80) !important;
    border-color: rgba(0,111,238,0.45) !important;
    color: #fff !important;
}
.sk-actions .pa-btn-danger {
    background: rgba(243,18,96,0.10) !important;
    border-color: rgba(243,18,96,0.25) !important;
    color: #fb7185 !important;
}

.sketch-canvas-wrap {
    background: rgba(5,6,10,0.85) !important;
    padding: 80px 24px 24px !important;
    position: relative;
    z-index: 1;
}

#sketchCanvas {
    box-shadow: 0 8px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
}

/* ── AI Report Overlay — Glassmorphic ── */
.ai-overlay {
    background: rgba(0,0,0,0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.ai-modal {
    background: rgba(255,255,255,0.09) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.65) !important;
    border-radius: 24px !important;
}

.ai-hd {
    background: transparent !important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.ai-hd-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ai-hd-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(0,111,238,0.18);
    border: 1px solid rgba(174,198,255,0.3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ai-hd-icon .material-symbols-outlined {
    font-size: 20px;
    color: #aec6ff;
    font-variation-settings: 'FILL' 1;
}
.ai-hd-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0;
}
.ai-hd-right {
    display: flex;
    gap: 6px;
}
.ai-icon-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.50);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    box-shadow: none;
}
.ai-icon-btn:hover { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.90); transform: none; }
.ai-icon-btn .material-symbols-outlined { font-size: 19px; }

.ai-content {
    padding: 24px !important;
    font-size: 0.88rem !important;
    color: rgba(255,255,255,0.70) !important;
    overflow-y: auto;
}

/* AI content section blocks */
.ai-section { margin-bottom: 28px; }
.ai-section:last-child { margin-bottom: 0; }

.ai-section-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    border-left: 3px solid #006fee;
    margin-bottom: 14px;
}
.ai-section-hd h2 {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #aec6ff !important;
    margin: 0 !important;
}

.ai-summary-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 16px;
    font-size: 0.85rem;
    line-height: 1.72;
    color: rgba(255,255,255,0.65);
}
.ai-summary-card h3 {
    font-size: 0.82rem !important;
    color: #93c5fd !important;
    margin: 14px 0 5px !important;
    font-weight: 600;
}
.ai-summary-card p { margin: 4px 0; }

/* Evidence log */
.ai-evidence-wrap {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
}
.ai-evidence-hdr {
    display: grid;
    grid-template-columns: 2fr 3fr 2fr 1.5fr;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: rgba(255,255,255,0.40);
}
.ai-evidence-row {
    display: grid;
    grid-template-columns: 2fr 3fr 2fr 1.5fr;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    align-items: center;
    transition: background 0.1s;
}
.ai-evidence-row:last-child { border-bottom: none; }
.ai-evidence-row:hover { background: rgba(255,255,255,0.04); }

.ai-ev-id {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    font-size: 0.78rem;
}
.ai-ev-obs {
    color: rgba(255,255,255,0.60);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}
.ai-sev-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.ai-sev-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.ai-sev-critical { background: rgba(147,0,10,0.22); border: 1px solid rgba(255,180,171,0.3); color: #ffb4ab; }
.ai-sev-major    { background: rgba(199,77,0,0.22);  border: 1px solid rgba(255,181,150,0.3); color: #ffb596; }
.ai-sev-minor    { background: rgba(0,111,238,0.20); border: 1px solid rgba(174,198,255,0.3); color: #aec6ff; }
.ai-sev-note     { background: rgba(23,201,100,0.14);border: 1px solid rgba(23,201,100,0.32); color: #4ade80; }

.ai-ev-thumb {
    width: 48px; height: 48px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.ai-ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-ev-no-thumb {
    width: 48px; height: 48px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.22);
    font-size: 0.6rem;
}

/* AI Footer */
.ai-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    flex-shrink: 0;
    border-radius: 0 0 24px 24px;
}
.ai-footer-secondary {
    padding: 10px 20px;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.65);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: none;
}
.ai-footer-secondary:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.90);
    transform: none;
}
.ai-footer-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 9999px;
    background: rgba(0,111,238,0.88);
    border: none;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 0 20px rgba(0,111,238,0.32);
}
.ai-footer-primary:hover {
    filter: brightness(1.14);
    transform: none;
}
.ai-footer-primary .material-symbols-outlined { font-size: 16px; line-height: 1; }

/* ── Canvas Empty State ── */
.canvas-empty-state {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.canvas-empty-state.hidden { display: none; }

.ces-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 24px;
    padding: 32px 28px;
    text-align: center;
    max-width: 320px;
    width: calc(100% - 48px);
    pointer-events: auto;
    box-shadow: 0 4px 32px rgba(0,0,0,0.5);
}

.ces-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
.ces-icon .material-symbols-outlined {
    font-size: 34px;
    color: rgba(255,255,255,0.32);
    font-variation-settings: 'FILL' 0;
}
.ces-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #aec6ff;
    margin-bottom: 8px;
}
.ces-desc {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.50);
    line-height: 1.6;
    margin-bottom: 24px;
}
.ces-new-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    border-radius: 9999px;
    background: rgba(0,111,238,0.85);
    border: none;
    color: #fff;
    font-size: 0.90rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 0 20px rgba(0,111,238,0.22);
    min-height: 50px;
}
.ces-new-btn:hover { filter: brightness(1.14); transform: none; }
.ces-new-btn .material-symbols-outlined { font-size: 20px; line-height: 1; }

/* ── Logo white circle ── */
.app-logo-circle {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    padding: 7px;
    overflow: hidden;
}
/* !important, reluctantly, to beat `.app-logo-img { width:52px !important }`
   in the sidebar block above: 52px of image inside a 42px circle with
   overflow:hidden was clipping the art. That went unnoticed while the source
   was the padded lockup — the ink was small enough to sit inside the crop —
   and became obvious the moment the tightly-cropped R mark went in and lost
   its stem and its leg to the circle. */
.app-logo-circle .app-logo-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    display: block !important;
}

/* ── Projects back button ── */
.nav-projects-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9999px;
    color: rgba(255,255,255,0.75);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    padding: 6px 12px 6px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.nav-projects-btn:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
}
.nav-projects-btn .material-symbols-outlined { font-size: 16px; }

/* ── Modern compass dial (steering wheel replacement) ── */
.steering-wheel {
    width: 96px; height: 96px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 50%;
    transition: filter 0.15s;
}
.steering-wheel:active { cursor: grabbing; filter: brightness(1.15); }
.sw-svg { width: 100%; height: 100%; overflow: visible; }

/* ── Contour toggle button ── */
.btn-ab-toggle {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.65);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; gap: 5px;
}
.btn-ab-toggle.active {
    background: rgba(0,111,238,0.75);
    border-color: rgba(0,111,238,0.8);
    color: #fff;
    box-shadow: 0 0 12px rgba(0,111,238,0.4);
}

/* ── Sketch fullscreen (no toolbar) ── */
.sketch-overlay {
    position: fixed !important;
    inset: 0 0 82px 0 !important;
    background: #070808 !important;
    z-index: 200 !important;
    display: none;
    flex-direction: column !important;
}
.sketch-canvas-wrap {
    flex: 1 !important;
    position: relative !important;
    overflow: auto !important;          /* scroll in BOTH directions (infinite canvas) */
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    min-height: 0 !important;
    display: block !important;
}
.sketch-canvas-wrap canvas {
    display: block;
    touch-action: none;                 /* width/height set inline by JS (grows 2D) */
}
.sketch-canvas-wrap.pan-mode canvas {
    touch-action: pan-y;
}

/* ── Sketch "Add page" strip at bottom (revealed by scrolling down) ── */
.sk-add-page-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 26px 0;
    background: rgba(0,111,238,0.16);
    border: none;
    border-top: 2px dashed rgba(0,111,238,0.55);
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s;
}
.sk-add-page-strip:hover,
.sk-add-page-strip:active { background: rgba(0,111,238,0.30); color: #fff; }

/* ── Sketch floating action buttons ── */
.sketch-fabs {
    position: absolute;
    top: 16px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 20;
    pointer-events: none;
}
.sketch-fabs > * { pointer-events: auto; }
.sk-fab {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(30,30,50,0.82);
    border: 1px solid rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.80);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background 0.18s, color 0.12s, box-shadow 0.18s;
    flex-shrink: 0;
}
.sk-fab:hover { background: rgba(60,60,90,0.90); color: #fff; }
.sk-fab.active {
    background: rgba(0,111,238,0.85);
    border-color: rgba(0,111,238,0.9);
    color: #fff;
    box-shadow: 0 0 18px rgba(0,111,238,0.5);
}
.sk-fab-primary {
    background: rgba(0,111,238,0.88) !important;
    border-color: rgba(0,111,238,0.95) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(0,111,238,0.5) !important;
}
.sk-fab-primary:hover { background: rgba(0,111,238,1) !important; }
.sk-fab .material-symbols-outlined { font-size: 22px; line-height: 1; }

/* ── Sketch tools inside Details panel ── */
.sk-details-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.sk-details-tool {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    color: rgba(255,255,255,0.65);
}
.sk-details-tool .material-symbols-outlined { font-size: 20px; }
.sk-details-tool.active {
    background: rgba(0,111,238,0.7);
    border-color: rgba(0,111,238,0.9);
    color: #fff;
    box-shadow: 0 0 12px rgba(0,111,238,0.4);
}
.sk-details-tool:hover:not(.active) {
    background: rgba(255,255,255,0.13);
    color: #fff;
}
.sk-details-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.sk-details-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.sk-details-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.sk-details-btn {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.75);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: all 0.15s ease;
}
.sk-details-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sk-details-btn.danger { border-color: rgba(239,68,68,0.35); color: rgba(239,68,68,0.8); }
.sk-details-btn.danger:hover { background: rgba(239,68,68,0.15); color: #ef4444; }
.sk-details-btn.primary {
    background: rgba(0,111,238,0.7);
    border-color: rgba(0,111,238,0.9);
    color: #fff;
}
.sk-details-btn.primary:hover { filter: brightness(1.12); }
.sk-details-btn .material-symbols-outlined { font-size: 16px; }

/* ── AI report footer extra buttons ── */
.ai-footer-secondary-word {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.80);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ai-footer-secondary-word:hover { background: rgba(255,255,255,0.13); color: #fff; }

/* ── Layout edit FAB ── */
.canvas-edit-fab {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(0,111,238,0.85);
    border: none;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,111,238,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
    transition: background 0.18s, transform 0.12s;
}
.canvas-edit-fab:hover { background: rgba(0,111,238,1); transform: scale(1.08); }
.canvas-edit-fab .material-symbols-outlined { font-size: 20px; line-height: 1; }

/* ── Launch screen logo white circle ── */
/* ── Projects-page brand plate ─────────────────────────────────────────────
   Replaced the 144px circle on 2026-08-08. The lockup art occupied only the
   middle 55% x 36% of its own 4000px canvas, so a 136px image drew about 40px
   of actual logo; assets/logo-lockup.png is cropped to the ink, and the plate
   is a rounded rectangle because a circle wastes the corners of a 1.47:1
   lockup. The height cap is what binds on a wide screen — dropping it makes
   the header taller than the project list underneath it. */
.launch-logo-plate {
    width: 100%;
    background: #fff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.22);
}
.launch-logo-full {
    width: 100%;
    height: auto;
    /* A cap in px fought the plate: it clamped the box height while the box
       stayed full width, so object-fit letterboxed the logo inside its own
       white plate — smaller than asked for, with dead space either side. In
       dvh the width is what binds on every ordinary screen, and the cap only
       takes over in landscape, where a tall header would eat the whole modal. */
    max-height: 26dvh;
    object-fit: contain;
    display: block;
}

/* ── Contour toggle button active state (sidebar context) ── */
.app-navbar #contourToggleBtn.active {
    background: var(--primary) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* ── Sketch overlay: sidebar visible above canvas, panel on top when open ── */
.app-navbar { z-index: 210 !important; }
.info-panel.half-open,
.info-panel.expanded { z-index: 250 !important; }

/* ── Sketch canvas wrap: remove old padding ── */
.sketch-canvas-wrap {
    padding: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   SUB-PROJECT PILL (top-centre, glass like the bottom bar)
   ════════════════════════════════════════════════════════════ */
.subproj-topbar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 14px;
    background: rgba(18,20,28,0.72);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 9999px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.45);
    max-width: calc(100% - 24px);
}
.subproj-topbar-ico { font-size: 18px; color: rgba(255,255,255,0.65); flex-shrink: 0; }
.subproj-topbar .subproj-select {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.86rem;
    max-width: 200px;
    height: auto;
    max-height: none;
    padding: 4px 2px;
    cursor: pointer;
}
.subproj-topbar .subproj-select option { color: #111; }   /* readable dropdown list */
.subproj-manage {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s;
}
.subproj-manage:hover { background: rgba(0,111,238,0.85); border-color: transparent; }
.subproj-manage .material-symbols-outlined { font-size: 18px; }

/* ════════════════════════════════════════════════════════════
   LEFT SIDEBAR — dark glass styling to match the bottom bar
   ════════════════════════════════════════════════════════════ */
.app-navbar {
    background: rgba(16,18,26,0.92) !important;
    border-right: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 2px 0 16px rgba(0,0,0,0.40) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}
.app-navbar .btn-ab,
.app-navbar .nav-upload-btn,
.app-navbar .mode-pill-btn,
.app-navbar .le-ab-btn {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: rgba(255,255,255,0.85) !important;
    border-radius: 14px !important;
}
.app-navbar .btn-ab:hover:not(:disabled),
.app-navbar .le-ab-btn:hover:not(:disabled),
.app-navbar .mode-pill-btn:hover:not(.active) {
    background: rgba(255,255,255,0.16) !important;
    color: #fff !important;
}
.app-navbar .btn-ab-primary,
.app-navbar .mode-pill-btn.active,
.app-navbar #modePlace.active {
    background: rgba(0,111,238,0.92) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(0,111,238,0.5) !important;
}
.app-navbar .btn-ab-green { color: #4ade80 !important; border-color: rgba(23,201,100,0.35) !important; background: rgba(23,201,100,0.14) !important; }
.app-navbar .btn-ab-red   { color: #fb7185 !important; border-color: rgba(243,18,96,0.35) !important; background: rgba(243,18,96,0.14) !important; }
.app-navbar .le-ab-del { color: #fb7185 !important; }
.app-navbar .le-ab-clr { color: #fbbf24 !important; }
.app-navbar .le-ab-dl  { color: #60a5fa !important; }
.app-navbar .le-ab-sep { background: rgba(255,255,255,0.18) !important; }
.app-navbar .hamburger-line { background: rgba(255,255,255,0.85) !important; }
.app-navbar .nav-menu-btn {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 14px !important;
}

/* Report Limitations bullet list */
.limitations-list { margin: 8px 0 20px 20px; padding: 0; }
.limitations-list li { margin: 4px 0; line-height: 1.5; font-size: 13px; color: #334155; }

/* ── Account sign-in (menu) ─────────────────────────────── */
.auth-input {
    display: block; width: 100%; margin: 0 0 8px;
    padding: 10px 12px; font-size: 0.85rem;
    background: rgba(255,255,255,0.06); color: var(--text, #e2e8f0);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
    outline: none;
}
.auth-input:focus { border-color: #38bdf8; }

/* ════════════════════════════════════════════════════════════
   BOTTOM-NAV CLEARANCE — one measured number, not three guesses
   ────────────────────────────────────────────────────────────
   The sketch overlay reserved 82px for the nav and the mobile details
   sheet reserved 80px. Both numbers are only right on a handset with no
   gesture bar: the nav's own padding is max(14px, env(safe-area-inset-
   bottom)), so on most phones the nav is TALLER than the gap left for it
   — the sketch canvas ran underneath it, and the details sheet (z-index
   250) covered it outright. --rai-nav-h is measured off the live element
   by main.js; the fallback below is the nav's own arithmetic
   (8px top + 60px active pill + its bottom padding).
   ════════════════════════════════════════════════════════════ */
:root {
    --rai-nav-h: calc(68px + max(14px, env(safe-area-inset-bottom)));
}

.sketch-overlay {
    inset: 0 0 var(--rai-nav-h) 0 !important;
}

@media (max-width: 991.98px) {
    .info-panel { bottom: var(--rai-nav-h) !important; }
}

/* ════════════════════════════════════════════════════════════
   SURVEY POPOVERS — compact, and always clear of the keyboard
   ────────────────────────────────────────────────────────────
   These opened at the tap point. Tap a level low on the plan and the
   popover lands in the bottom third — precisely where the on-screen
   keyboard then appears, so the field you are meant to type into is
   covered by the keys you type it with. survey.js now pins them to the
   top band (horizontal position still follows the finger) and they are
   roughly half their old width, so a plan stays readable behind them.
   ════════════════════════════════════════════════════════════ */
.elev-popover {
    min-width: 168px !important;
    max-width: 212px !important;
    padding: 0 !important;                 /* the inner .card-body owns it now */
}
.elev-popover .card-body { padding: 10px !important; }
.elev-popover .elev-popover-title {
    font-size: 0.68rem;
    margin-bottom: 6px !important;
    display: flex; align-items: center; gap: 5px;
}
.elev-popover .elev-popover-title svg { width: 13px; height: 13px; }
.elev-popover .btn-sm { padding: 7px 4px; }
.elev-popover .btn-sm svg { width: 15px; height: 15px; margin: 0; }
.elev-popover .form-control-sm { font-size: 0.9rem; }

/* Pinned to the top band — see _placeSurveyPopover() in survey.js. */
.elev-popover.elev-popover-top {
    top: calc(10px + env(safe-area-inset-top)) !important;
}

/* ════════════════════════════════════════════════════════════
   AI PROGRESS BAR
   ────────────────────────────────────────────────────────────
   Generation takes 20-60 seconds behind a button that used to do
   nothing visible but change its own label, so the honest reading
   from the field was "it has hung". No text and no percentage: a
   single AI call reports nothing until it returns, so any number
   would be invented. What it does show is real — each floor/section
   that lands advances the bar, and between them it creeps toward
   (but never reaches) the next boundary, so motion means working
   and arrival means progress.
   ════════════════════════════════════════════════════════════ */
.ai-progress {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    height: 4px;
    z-index: 4000;                 /* above the AI overlay and every modal */
    background: rgba(255,255,255,0.06);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.ai-progress.active { opacity: 1; }

.ai-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, #006fee 0%, #4da3ff 55%, #a78bfa 100%);
    box-shadow: 0 0 12px rgba(0,111,238,0.65);
    position: relative;
    overflow: hidden;
}

/* A sweep travelling along the filled part. This is the part that says
   "working" during the long silence inside one section. */
.ai-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.55) 50%,
        rgba(255,255,255,0) 100%);
    animation: raiAiSweep 1.15s linear infinite;
}

@keyframes raiAiSweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* Someone who has asked for less motion still needs to know it is alive —
   keep the bar and its advances, drop the sweep. */
@media (prefers-reduced-motion: reduce) {
    .ai-progress-fill::after { animation: none; }
}

/* ═══ FIRST-RUN ONBOARDING ═══════════════════════════════════
   Sits above the project launch screen (z 9000). Premium locks must still
   out-rank this — see the note in entitlements.js. */
.ob-overlay {
    position: fixed;
    inset: 0;
    z-index: 9600;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
body.ob-open { overflow: hidden; }

.ob-card {
    width: min(440px, 100%);
    max-height: 92dvh;
    background: #111113;
    border: 1px solid var(--border-md);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ob-body {
    padding: 28px 24px 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.ob-body h2 {
    font-size: 1.28rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text);
}
.ob-body p {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-dim);
    margin: 0 0 12px;
}
.ob-body .ob-note {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.ob-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--primary-light);
    color: #4da3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.ob-icon svg { width: 26px; height: 26px; }

.ob-list { margin: 0; padding-left: 18px; }
.ob-list li {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.ob-list strong { color: var(--text); font-weight: 600; }

.ob-perms { list-style: none; margin: 4px 0 0; padding: 0; }
.ob-perms li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 0;
    border-top: 1px solid var(--border);
}
.ob-perms li svg { width: 19px; height: 19px; color: #4da3ff; flex: 0 0 auto; margin-top: 1px; }
.ob-perms strong { display: block; font-size: 0.85rem; color: var(--text); font-weight: 600; }
.ob-perms span { display: block; font-size: 0.79rem; line-height: 1.5; color: var(--text-dim); margin-top: 2px; }

.ob-form { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ob-form input {
    width: 100%;
    padding: 12px 14px;
    font-size: 0.9rem;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border-md);
    border-radius: var(--r-lg);
}
.ob-form input:focus { outline: none; border-color: var(--primary); }
.ob-msg { font-size: 0.79rem; line-height: 1.45; color: var(--text-dim); min-height: 1.2em; }

.ob-dots { display: flex; gap: 6px; justify-content: center; padding: 14px 0 2px; }
.ob-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: background .18s, width .18s;
}
.ob-dot.on { background: var(--primary); width: 18px; border-radius: 3px; }

.ob-foot { padding: 12px 24px 22px; display: flex; flex-direction: column; gap: 4px; }
.ob-primary {
    width: 100%;
    padding: 13px;
    font-size: 0.94rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: var(--r-lg);
    cursor: pointer;
}
.ob-primary:active { background: var(--primary-dark); }
.ob-primary:disabled { opacity: .55; }
.ob-link {
    width: 100%;
    padding: 10px;
    font-size: 0.84rem;
    color: var(--text-dim);
    background: none;
    border: none;
    cursor: pointer;
}
.ob-link:active { color: var(--text); }
.ob-quiet { font-size: 0.79rem; color: var(--text-muted); }

/* Welcome card: the full lockup on a white plate. The art is dark ink, so it
   needs the plate — on the near-black card it would otherwise disappear. */
.ob-logo-plate {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 12px 16px;
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 78%;
}
.ob-logo-plate img { display: block; width: 100%; height: auto; max-height: 54px; object-fit: contain; }

/* Workflow screenshot in the first-run tour. The frame is sized to the
   screenshot's own aspect (760x1564) so nothing is cropped — `contain`, never
   `cover`, which is the mistake that hid half of every screen on the website. */
.ob-shot {
    width: 100%;
    max-height: 46dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #0a0a0b;
    border: 1px solid var(--border);
}
.ob-shot img { display: block; max-width: 100%; max-height: 46dvh; object-fit: contain; }

.ob-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-height: 18px; }
.ob-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: .12em; color: var(--text-muted);
}
.ob-badge {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; font-weight: 600; letter-spacing: .12em;
    padding: 2px 7px; border-radius: 4px;
    color: #F5C97B; border: 1px solid rgba(245,201,123,0.5); background: rgba(245,201,123,0.10);
}
.ob-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ob-foot-row .ob-link { width: auto; padding: 8px 4px; }


/* ── Assign chips and the party filter (assign.js) ──────────────────────
   Plain buttons on purpose: they inherit the panel's look and introduce no new
   colour tokens. Blue = assigned to this finding; amber = filtering the plan. */
.assign-chips{display:flex;flex-wrap:wrap;gap:6px}
.assign-chips .a-chip{font-size:.74rem;padding:4px 10px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:var(--text-dim)}
.assign-chips .a-chip.on{background:#2563eb;border-color:#2563eb;color:#fff;font-weight:600}
.party-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.party-filter-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-right:2px}
.party-chip{font-size:.74rem;padding:4px 10px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:var(--text-dim)}
.party-chip.on{background:#f59e0b;border-color:#f59e0b;color:#111;font-weight:600}
.party-chip.clear{background:transparent;border-style:dashed}
.assign-chips .a-chip.locked{opacity:.55}
.a-chip-pro{font-size:.64rem;font-weight:700;letter-spacing:.08em;padding:3px 8px;border-radius:999px;
  background:linear-gradient(135deg,#f59e0b,#d97706);color:#111;align-self:center}