/* ============================================
   Naum Kitchen Designer — Stylesheet
   ============================================ */

/* Desktop-only affordances. Hidden on touch devices and on viewports
   narrow enough to be a phone/tablet — matches the existing breakpoints
   used elsewhere in this file (900 px / coarse pointer for tablets,
   480 px for phones). Used by e.g. the "Contact us" toolbar button:
   the contact modal makes sense for power users on a real keyboard,
   not for a client tapping at the design on a tablet. */
@media (max-width: 900px), (pointer: coarse) {
    .desktop-only { display: none !important; }
}

/* The "more tools" chevron is the inverse: shown ONLY on touch / narrow
   viewports where the toolbar's overflow buttons are collapsed. On
   desktop every toolbar button fits, so the chevron would just be
   visual noise. */
@media (min-width: 901px) and (pointer: fine) {
    #btn-toolbar-more { display: none !important; }
}

/* "Contact us" toolbar button — high-visibility blue, present on every
   form factor. On desktop it's icon + "Contact us" label so the
   affordance is unmissable; on touch / narrow viewports the label
   hides and the button collapses to a square blue tile in the toolbar
   row. Either way it stays the only blue button in the toolbar so it
   reads as a distinct "talk to me" CTA against the muted greys.
   Hover/active states deepen the blue for tactile feedback. */
/* ===== Cookie consent banner =====
   Bottom-fixed dark card matching the app's surface palette. Wide
   enough to show the disclosure clearly, but narrow enough not to
   block the canvas. Auto-stacks vertically on phones. */
#cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    background: #1a1a24;
    border: 1px solid #2d2d3d;
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: #e8e6f0;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 880px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.5;
}
.cookie-banner-text { flex: 1; min-width: 0; }
.cookie-banner-text strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    color: #ffffff;
}
.cookie-banner-text p {
    margin: 0;
    color: #a8a6b8;
    font-size: 12px;
}
.cookie-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.cookie-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background 120ms ease;
    white-space: nowrap;
}
.cookie-btn-primary {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}
.cookie-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.cookie-btn-secondary {
    background: transparent;
    color: #c0bedb;
    border-color: #3a3a52;
}
.cookie-btn-secondary:hover { background: #2a2a3d; color: #ffffff; }

/* Phone: stack text and buttons vertically so the buttons aren't crushed. */
@media (max-width: 600px) {
    #cookie-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .cookie-banner-actions {
        justify-content: flex-end;
    }
}

.contact-us-btn {
    /* Desktop: inline pill in toolbar-left, just after the connection
       icon. Sits in the natural empty space between the left and
       right toolbar groups. Mobile media query below switches it to
       a bottom-right FAB so it doesn't crowd the phone toolbar. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border: 1px solid #2563eb;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    padding: 0 12px;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    margin-left: 8px;
}
.contact-us-btn:hover,
.contact-us-btn:focus-visible {
    background: #1d4ed8;       /* blue-700 */
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.55);
}
.contact-us-btn:active {
    background: #1e40af;       /* blue-800 */
    border-color: #1e40af;
    transform: translateY(1px);
}
.contact-us-btn .contact-us-label {
    font-size: 12px;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
}

/* Touch / narrow-viewport variant: drop the text label and let the
   button match the square dimensions of every other tool-btn so it
   sits cleanly in the row. The blue background, white icon, and
   shadow stay so it remains the most noticeable button on screen.
   Same breakpoints used elsewhere in this file (900 px / coarse
   pointer for tablets, deeper rules below for phones). */
@media (max-width: 900px), (pointer: coarse) {
    /* Tablet / mobile: keep the button INLINE in the toolbar (don't
       float a FAB — the floating button covered scene content and got
       in the way of zoom/pan gestures on touch devices). Drop the
       text label so it shrinks to a square icon, matching the rest of
       the tool buttons in the row. The blue background and shadow
       stay so it still reads as the primary "talk to us" CTA. */
    .contact-us-btn .contact-us-label { display: none; }
    .contact-us-btn {
        padding: 0;
        gap: 0;
        width: 28px;
        height: 28px;
    }
}

:root {
    /* Color System */
    --bg-primary: #0f0f14;
    --bg-secondary: #16161e;
    --bg-tertiary: #1e1e2a;
    --bg-elevated: #252534;
    --bg-hover: #2a2a3d;
    --bg-active: #32324a;

    --text-primary: #e8e6f0;
    --text-secondary: #9896a8;
    --text-muted: #68667a;

    --accent: #6366f1;
    --accent-hover: #7c7ff7;
    --accent-glow: rgba(99, 102, 241, 0.25);
    --accent-subtle: rgba(99, 102, 241, 0.08);

    --danger: #ef4444;
    --danger-hover: #f87171;
    --success: #22c55e;
    --warning: #f59e0b;

    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px var(--accent-glow);

    --panel-width: 280px;
    --toolbar-height: 52px;

    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---- Loading Screen ---- */
#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    text-align: center;
}

.loader-icon {
    margin-bottom: 20px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
}

.loader-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #6366f1, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.loader-bar {
    width: 200px;
    height: 3px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    margin: 0 auto 12px;
    overflow: hidden;
}

.loader-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    border-radius: 10px;
    animation: loadFill 1.5s ease-out forwards;
}

@keyframes loadFill {
    0% { width: 0%; }
    60% { width: 80%; }
    100% { width: 100%; }
}

.loader-content p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ---- Toolbar ---- */
#toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--toolbar-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 100;
    backdrop-filter: blur(12px);
}

.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;        /* anchor for the connections popover */
}

/* Live-connections button. Sits next to the EN/RU language toggle on
   desktop; hidden on touch (CSS rule near the top of the file). The icon
   inside swaps between desktop / tablet / phone based on the host's own
   device class so the user can see at a glance which device they're on. */
.conn-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 8px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.conn-btn:hover { background: rgba(99, 102, 241, 0.10); }
.conn-btn.has-others { border-color: #6366f1; color: #818cf8; }
#conn-count { font-variant-numeric: tabular-nums; }

#connections-popover {
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 5000;
    min-width: 220px;
    max-width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(26, 26, 36, 0.96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 8px;
}
#connections-popover .conn-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 4px;
}
#connections-popover .conn-row + .conn-row { margin-top: 2px; }
#connections-popover .conn-row.you { background: rgba(99, 102, 241, 0.12); color: #c7d2fe; }
#connections-popover .conn-device {
    display: inline-flex;
    align-items: center;
    width: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}
#connections-popover .conn-meta { color: var(--text-muted); font-size: 11px; margin-left: auto; }
#connections-popover .conn-empty { color: var(--text-muted); padding: 8px; font-size: 12px; text-align: center; }
#connections-popover h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 6px;
    padding: 4px 8px 0;
}

.toolbar-center {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 6px;
}

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

.logo span {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
}

.logo em {
    font-style: normal;
    font-weight: 400;
    color: var(--accent);
}

.tool-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.tool-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.tool-btn.active {
    background: var(--accent-subtle);
    color: var(--accent);
}

.tool-btn:active {
    transform: scale(0.92);
}

/* Placing Mode button — purple background so it stands out from the
   rest of the toolbar. The mode is a distinct workflow (top-down plan
   view), so the user asked for a visual cue that this isn't a regular
   one-shot action like Save or Rotate. Darker shade on hover and on
   :active. When the mode is currently engaged (.active), the button
   stays purple but slightly brighter so it reads as "on right now". */
#btn-placing-mode {
    background: #7c3aed;
    color: #ffffff;
}
#btn-placing-mode:hover {
    background: #6d28d9;
    color: #ffffff;
}
#btn-placing-mode.active {
    background: #a855f7;
    color: #ffffff;
}

/* ---- Cabinet family inline configurator ----------------------------------
   Family items in the catalog show a small ⚙ badge in their tile, and
   tapping the tile expands an inline panel with sliders / chip groups.
   The panel sits inside the .catalog-item so it scrolls with the catalog
   and doesn't need its own positioning. */
.catalog-item .item-family-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid #6366f1;
    border-radius: 4px;
    padding: 1px 4px;
    pointer-events: none;
    line-height: 1;
}
.catalog-item .cabinet-configurator {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding: 8px 8px 10px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
/* When the configurator is open, expand the host tile across both columns
   of the .catalog-grid so the number inputs have room to show 3-digit
   values (e.g. "120") instead of getting clipped. The cfg-open class is
   added/removed by _toggleCatalogConfigurator. */
.catalog-grid .catalog-item.cfg-open {
    grid-column: 1 / -1;
}
.cabinet-configurator .cfg-row {
    /* The catalog grid is 2 columns of ~130 px tiles. The original
       60 / 1fr / 24 grid left only ~2 px for the numbox once padding +
       gaps were subtracted — i.e. the controls had no room to render.
       New layout: label sits ABOVE the numbox+unit pair so the numbox
       always gets the full configurator width. */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label label"
        "numbox unit";
    align-items: center;
    gap: 2px 6px;
    font-size: 11px;
}
.cabinet-configurator .cfg-label {
    grid-area: label;
    color: var(--text-muted);
    font-weight: 500;
}
.cabinet-configurator .cfg-numbox { grid-area: numbox; }
.cabinet-configurator .cfg-unit   { grid-area: unit; }
.cabinet-configurator .cfg-numbox {
    display: flex;
    align-items: stretch;
    gap: 0;
    /* Hardcoded colours instead of theme vars: --border is nearly transparent
       and --surface (undefined) used to render the box invisible against the
       catalog tile's background. Contrast must beat the tile bg (#1e1e2a). */
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: 4px;
    background: #0f0f14;
    overflow: hidden;
    min-height: 26px;
}
.cabinet-configurator .cfg-step {
    background: transparent;
    color: #e8e6f0;
    -webkit-text-fill-color: #e8e6f0;
    border: none;
    /* flex-shrink:0 stops the buttons from collapsing to zero width in a
       cramped grid cell — without it both buttons could vanish, leaving the
       middle column looking empty. */
    flex: 0 0 24px;
    min-width: 24px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    user-select: none;
}
.cabinet-configurator .cfg-step:hover {
    background: rgba(99, 102, 241, 0.18);
}
.cabinet-configurator .cfg-step:active {
    background: rgba(99, 102, 241, 0.32);
}
.cabinet-configurator .cfg-num {
    flex: 1 1 0;
    background: transparent;
    border: none;
    /* Hardcoded for the same reason as .cfg-step — must be visible regardless
       of theme-var availability and stay legible against the dark numbox bg. */
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 4px 2px;
    font-variant-numeric: tabular-nums;
    /* Guarantee at least four digits' worth of room ("1234") so values like
       120/280 never get clipped on the right inside the overflow:hidden
       numbox. */
    min-width: 56px;
    width: auto;
    -moz-appearance: textfield;
    /* The parent .catalog-item sets user-select: none, which on iOS Safari
       can also block selection inside form fields. Re-enable it here so the
       user can tap, select, and edit the value. */
    user-select: text;
    -webkit-user-select: text;
    pointer-events: auto;
}
.cabinet-configurator .cfg-num::-webkit-inner-spin-button,
.cabinet-configurator .cfg-num::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cabinet-configurator .cfg-num:focus {
    outline: 1px solid #6366f1;
    outline-offset: -1px;
}
.cabinet-configurator .cfg-unit {
    color: var(--text-muted);
    font-size: 11px;
    text-align: left;
}
.cabinet-configurator .cfg-chips {
    display: flex;
    gap: 4px;
}
.cabinet-configurator .cfg-chip {
    flex: 1;
    background: var(--surface, #1f1f2e);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 0;
    font-size: 11px;
    cursor: pointer;
}
.cabinet-configurator .cfg-chip.active {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}
/* Catalog item needs to be position:relative so the badge can absolute-position. */
.catalog-item {
    position: relative;
}

/* While the user is in "wall-picker armed" mode (Wall View button on, but
   no wall picked yet) show a crosshair so the next click feels intentional. */
body.wall-picker-armed #viewport-container,
body.wall-picker-armed #viewport {
    cursor: crosshair !important;
}

/* ---- App Layout ---- */
#app-layout {
    position: fixed;
    top: var(--toolbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

/* ---- Panels ---- */
#catalog-panel, #properties-panel {
    width: var(--panel-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease;
    z-index: 50;
}

#properties-panel {
    border-right: none;
    border-left: 1px solid var(--border);
}

#catalog-panel.collapsed, #properties-panel.collapsed {
    width: 0;
    min-width: 0;
    border: none;
    overflow: hidden;
}

/* ----- Phone / small-screen layout -----
   Touch devices narrower than 900px (phones in landscape, or tablets held in
   the rotated portrait form factor after CSS rotation) need panels that float
   OVER the viewport instead of shrinking it. The toolbar is ruthlessly
   pruned to the six buttons a mobile user actually reaches for; everything
   else is still in the DOM (so JS refs don't break) but hidden via CSS. */
@media (max-width: 900px) and (pointer: coarse) {
    :root { --panel-width: 240px; }

    #toolbar {
        padding: 4px 6px;
        justify-content: center;       /* centre what remains */
        flex-wrap: wrap;               /* spill over to a second row when needed */
        row-gap: 4px;
        height: auto;                  /* grow to fit wrapped rows */
        min-height: 52px;
    }
    .toolbar-left, .toolbar-center, .toolbar-right {
        flex-shrink: 0;
        gap: 2px;
        flex-wrap: wrap;               /* let icons inside each section wrap too */
    }
    .toolbar-divider { display: none; }
    .tool-btn { width: 36px; height: 36px; }
    /* #btn-lang stays visible on touch — phone/tablet users still need
       to swap EN/RU. Logo and connections-popover are still hidden. */
    .logo, #btn-connections, #connections-popover { display: none !important; }

    /* Dissolve every toolbar group on mobile so all buttons become direct
       flex children of #toolbar and wrap as a single flow. Without this,
       each group is a separate flex item that claims its own row when
       the buttons inside don't fit — the user sees orphaned rows like a
       lone "Contact us" pill on row 1 and the rest of the toolbar
       crammed onto row 2. With `display: contents` the wrappers
       contribute no box, only their children, so the icons read as one
       continuous toolbar row that wraps cleanly. */
    .toolbar-left,
    .toolbar-center,
    .toolbar-right { display: contents; }
    #btn-lang {
        order: 99;
        margin: 0;
        align-self: center;
        width: 36px;
        height: 36px;
        padding: 0;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
    }

    /* Hide everything that isn't essential on a phone. The full set stays
       available on tablets/desktop. Tweak this list to taste. */
    /* Bottom-left "selected item dims" overlay — redundant on touch where
       the Properties drawer shows the same info, and it eats precious
       screen real estate. Hidden on any coarse-pointer device. */
    #dims-overlay { display: none !important; }

    /* #btn-duplicate stays visible on touch — phone/tablet users
       still need a copy-paste affordance for cabinets, and tapping
       a button is easier than holding Ctrl+D on a software keyboard. */
    #btn-save,
    #btn-save-as,
    #btn-snap,
    #btn-grid-toggle,
    #btn-cm-toggle,
    #btn-measure,
    #btn-create-marble,
    #btn-history,
    #btn-ceiling-toggle { display: none; }
    /* Smart Snap is useful on tablets where the user can comfortably
       tap precise source / destination points, so it STAYS visible at
       the tablet breakpoint. Phones are too cramped for the two-tap
       workflow + the confirmation panel that floats at the bottom, so
       it hides phone-only via the rule below. */
    body.is-phone #btn-smart-snap { display: none; }
    /* Screenshot stays visible on tablets — the floating photo button it
       used to fall back to is now phone-only, so hiding it here would
       leave tablet users with no in-toolbar way to grab a screenshot. */
    body.is-phone #btn-screenshot { display: none; }

    /* ---- Expandable mobile toolbar -----------------------------------
       Phones don't have horizontal real estate for every toolbar icon
       even after pruning. We keep the editing essentials on a single
       always-visible row (lang toggle, undo/redo, duplicate, delete,
       photoreal, contact-us) and hide the rest behind a chevron-down
       toggle. Tapping the chevron flips .expanded on #toolbar; CSS
       reveals the rest. On desktop the chevron is hidden and every
       button is always shown — no expand/collapse behaviour at all. */
    /* Load + save buttons stay in the always-visible row even when
       the toolbar is collapsed — losing them behind the chevron meant
       a tap-and-a-tap to save, which is a frequent operation. Only
       genuinely secondary actions get hidden on collapse: New, local
       file Open (server load is the common path on phone), Door
       list (its own modal entry point), Fullscreen, View-lock. */
    #toolbar:not(.expanded) #btn-new,
    #toolbar:not(.expanded) #btn-door-list,
    #toolbar:not(.expanded) #btn-fullscreen,
    #toolbar:not(.expanded) #btn-view-lock { display: none !important; }
    /* Chevron sits at the trailing edge after the contact-us button
       so it's the last thing in the row and reads as "tap to expand". */
    #btn-toolbar-more {
        order: 100;
        margin: 0;
        align-self: center;
    }
    /* Rotate the chevron 180° when the toolbar is expanded so it
       reads as "tap again to collapse". */
    #toolbar.expanded #toolbar-more-chevron { transform: rotate(180deg); }

    /* Door List button stays on mobile — it's the entry point to the
       plate-cutting interface ("Calculate Plates" inside the door-list
       modal). Hiding it left mobile users with no way to reach the
       cutting plan. */
    #btn-door-list { display: inline-flex; }

    /* Trash / delete button stays in the toolbar on mobile (the wrapped
       second row has room) — replaces the floating trash circle which
       crowded the right-edge floater stack. */
    #btn-delete { display: inline-flex; }
    #btn-trash-float { display: none !important; }

    /* Camera-preset bar (perspective / top / front / left / right) is
       redundant on phones — swipe-to-orbit on the canvas covers the same
       ground and the presets eat bottom-of-viewport space that's tight on
       a phone. The 2D angle views are useful on tablets, so the row stays
       visible there — only PHONES (≤600px) drop it. */

    /* What STAYS:
       - #btn-open-server   : load a design from the PC
       - #btn-undo / #btn-redo : mistakes happen
       - #btn-dims-live     : on-screen measurements
       - #btn-sketch        : pencil / sketch mode
       - #btn-view-lock     : spectator lock — camera only
       - #btn-fullscreen    : hide the browser chrome
       The Catalog and Properties drawers handle everything else. */

    /* Camera zoom control pad — bottom-right of viewport. Two big tap
       targets for when pinch-zoom is awkward (e.g. one-handed phone use). */
    #camera-zoom-pad {
        display: grid;
        position: absolute;
        right: 8px;
        bottom: 16px;   /* hug the bottom so short viewports don't push the pad up into the top-right floaters */
        z-index: 45;
    }

    #catalog-panel, #properties-panel {
        position: absolute;
        top: 0;
        bottom: 0;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }
    #catalog-panel { left: 0; }
    #properties-panel { right: 0; }

    /* Chunkier tap targets for small interactive controls. */
    .cat-tab { padding: 8px 10px; font-size: 12px; }
    .swatch { width: 28px; height: 28px; }
    .cam-btn { width: 36px; height: 36px; }
    .action-btn { min-height: 34px; }
}

/* Walk-Inside (first-person) mode requires WASD + mouselook, which are
   awkward-to-impossible on touch. Hide the toolbar entry point on any
   coarse-pointer device — that covers phones AND tablets (even iPads in
   landscape, which exceed the 900-px small-screen breakpoint above). */
@media (pointer: coarse) {
    #btn-walk { display: none; }
}

/* Floating reopen tabs — hugs the viewport edge when a panel is collapsed.
   Hidden by default; shown only when the sibling panel has .collapsed. */
.panel-reopen {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 64px;
    /* Solid blue (same family as the guide / contact-us toolbar pills)
       so a hidden sidebar's reopen tab is unmissable against the dark
       3D viewport. The previous near-black panel blended in and users
       didn't realise their catalog / properties were just one click
       away. */
    background: #2563eb;
    color: #ffffff;
    border: 1px solid #2563eb;
    cursor: pointer;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}
.panel-reopen:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.6);
}
.panel-reopen-left {
    left: 0;
    border-left: none;
    border-radius: 0 8px 8px 0;
}
.panel-reopen-right {
    right: 0;
    border-right: none;
    border-radius: 8px 0 0 8px;
}
/* Use :has() so the tab auto-appears the moment the panel collapses,
   no extra JS bookkeeping required. */
#app-layout:has(#catalog-panel.collapsed) #btn-reopen-catalog,
#app-layout:has(#properties-panel.collapsed) #btn-reopen-props {
    display: flex;
}

.panel-header {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.panel-header h2 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.panel-toggle {
    width: 28px;
    height: 28px;
    /* Same blue family as the reopen tabs, so the open ⇄ collapse
       affordance is consistent: blue chevron when sidebar is open
       (collapse), blue tab when sidebar is hidden (reopen). The
       previous transparent / muted style made the close arrow easy
       to miss against the panel header. */
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35);
}

.panel-toggle:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

/* ---- Search ---- */
.panel-search {
    padding: 8px 12px;
    position: relative;
    flex-shrink: 0;
}

.panel-search input {
    width: 100%;
    height: 34px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 12px 0 34px;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition);
}

.panel-search input::placeholder { color: var(--text-muted); }

.panel-search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.panel-search svg {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* ---- Catalog Tabs ---- */
.catalog-tabs {
    display: flex;
    padding: 8px 14px;
    flex-shrink: 0;
}

.cat-select {
    flex: 1;
    height: 38px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.cat-select:hover { border-color: var(--accent); background-color: var(--bg-hover); }
.cat-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.cat-select option { background: var(--bg-secondary); color: var(--text-primary); }

.cat-tab:hover {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.cat-tab.active {
    color: var(--accent);
    background: var(--accent-subtle);
}

/* ---- Catalog Grid ---- */
.catalog-grid {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-content: start;
}

.catalog-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 8px;
    text-align: center;
    cursor: grab;
    transition: all var(--transition);
    user-select: none;
}

.catalog-item:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}

.catalog-item:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.catalog-item .item-icon {
    width: 100%;
    height: 80px;                /* fixed slot — image fits to natural aspect */
    margin: 0 auto 6px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    overflow: hidden;
    padding: 4px;
    box-sizing: border-box;
}
.catalog-item .item-icon svg,
.catalog-item .item-icon img {
    /* Fit-to-slot WITHOUT forcing square. Without max-* the PNG's intrinsic
       size (up to 256 px) blows out the column to that width and the grid
       collapses from 2 columns to 1. */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}

.catalog-item .item-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.25;
}

.catalog-item .item-price {
    font-size: 0.65rem;
    color: var(--success);
    font-weight: 500;
    margin-top: 2px;
}

/* ---- Viewport ---- */
#viewport-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

#viewport {
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
}

/* "Add Wall" floating button — visible only when body.placing-mode is set
   (toggled by applyPlacingMode). Sits below the camera-presets bar so it
   never overlaps. Triggers a struct-partition placement. */
.placing-add-wall {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    display: none;                  /* hidden unless placing mode */
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(99, 102, 241, 0.95);
    backdrop-filter: blur(8px);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.placing-add-wall:hover { background: rgba(79, 70, 229, 1.0); }
body.placing-mode .placing-add-wall { display: inline-flex; }
/* Camera preset buttons make no sense in plan view — the camera is locked to
   top-down. Hide them so the user can't get out of the orientation.
   EXCEPTION: when placing mode was engaged automatically by the top-view
   button (body.top-view-active), the user needs the bar to switch BACK to
   3D / front / left / right. Override the hide so the bar stays visible. */
body.placing-mode #camera-presets { display: none !important; }
body.placing-mode.top-view-active #camera-presets { display: flex !important; }

/* Camera Presets */
#camera-presets {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    background: rgba(22, 22, 30, 0.85);
    backdrop-filter: blur(12px);
    padding: 5px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.cam-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.cam-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.cam-btn.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 0 12px var(--accent-glow);
}

/* Info Bar */
#info-bar {
    display: none !important;
}
#info-bar-hidden {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    background: rgba(22, 22, 30, 0.85);
    backdrop-filter: blur(12px);
    padding: 8px 20px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

#info-bar span {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ---- Properties Panel ---- */
.prop-section {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
}

/* Top-level grouping: every category (Room Dimensions, Materials, Lighting,
   Backsplash, etc.) lives in its own bordered card so the panel reads as
   discrete sections instead of one long flowing list. Sub-groups inside
   Materials (Floor / Walls / Countertop / Plinth) keep their own .prop-group
   borders, nested inside the parent card. */
.prop-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}
.prop-card:last-child { margin-bottom: 0; }

.section-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 14px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.section-title:first-child {
    margin-top: 0;
}

/* Section title at the top of a prop-card: kill the leading margin so the
   card padding does the spacing, and tighten the bottom rule so it reads as
   a header for the card. */
.prop-card > .section-title:first-child {
    margin-top: 0;
}

.prop-row {
    margin-bottom: 10px;
}

/* ---- Collapsible property groups ---- */
.prop-group {
    margin-top: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.prop-group > summary {
    list-style: none;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background var(--transition);
}
.prop-group > summary::-webkit-details-marker { display: none; }
.prop-group > summary::after {
    content: '+';
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    transition: transform var(--transition);
}
.prop-group[open] > summary::after {
    content: '−';
}
.prop-group > summary:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--text);
}
.prop-group > .prop-group-body {
    padding: 10px;
    border-top: 1px solid var(--border);
}

/* Tight rows inside groups don't need extra bottom margin */
.prop-group .prop-row {
    margin-bottom: 8px;
}
.prop-group .prop-row:last-child {
    margin-bottom: 0;
}

/* ---- Category accent colours ----
   Every prop-group is tagged with one cat-* class identifying which broad
   category its controls belong to (dimensions, door, carcass, handles, etc.).
   Each category gets a 4 px left bar in its accent colour plus a very faint
   background wash so the eye can scan-and-match. The same colour always
   means the same category — clicking a brown bar means "carcass / cabinet
   body" whether you're on a base cabinet, wall cabinet, or the room panel.

   Summary text picks up the accent colour so the section title also reads
   as "this is a carcass section" without having to expand it. */

.prop-group.cat-dim       { border-left: 4px solid #6366f1; background: rgba(99, 102, 241, 0.04); }
.prop-group.cat-pos       { border-left: 4px solid #64748b; background: rgba(100, 116, 139, 0.04); }
.prop-group.cat-carcass   { border-left: 4px solid #92400e; background: rgba(146, 64, 14, 0.05); }
.prop-group.cat-door      { border-left: 4px solid #ea580c; background: rgba(234, 88, 12, 0.05); }
.prop-group.cat-handles   { border-left: 4px solid #8b5cf6; background: rgba(139, 92, 246, 0.05); }
.prop-group.cat-plinth    { border-left: 4px solid #71717a; background: rgba(113, 113, 122, 0.05); }
.prop-group.cat-counter   { border-left: 4px solid #d97706; background: rgba(217, 119, 6, 0.05); }
.prop-group.cat-interior  { border-left: 4px solid #16a34a; background: rgba(22, 163, 74, 0.05); }
.prop-group.cat-special   { border-left: 4px solid #dc2626; background: rgba(220, 38, 38, 0.05); }
.prop-group.cat-floor     { border-left: 4px solid #0d9488; background: rgba(13, 148, 136, 0.05); }
.prop-group.cat-walls     { border-left: 4px solid #0284c7; background: rgba(2, 132, 199, 0.05); }
.prop-group.cat-lighting  { border-left: 4px solid #ca8a04; background: rgba(202, 138, 4, 0.06); }
.prop-group.cat-info      { border-left: 4px solid #475569; background: rgba(71, 85, 105, 0.04); }

/* Tint the summary title in the accent colour. Lighter shade so it still
   reads against the dark surface but clearly identifies the category. */
.prop-group.cat-dim      > summary { color: #a5b4fc; }
.prop-group.cat-pos      > summary { color: #cbd5e1; }
.prop-group.cat-carcass  > summary { color: #fb923c; }   /* brown reads weak on dark; use a warm tone */
.prop-group.cat-door     > summary { color: #fdba74; }
.prop-group.cat-handles  > summary { color: #c4b5fd; }
.prop-group.cat-plinth   > summary { color: #d4d4d8; }
.prop-group.cat-counter  > summary { color: #fcd34d; }
.prop-group.cat-interior > summary { color: #86efac; }
.prop-group.cat-special  > summary { color: #fca5a5; }
.prop-group.cat-floor    > summary { color: #5eead4; }
.prop-group.cat-walls    > summary { color: #7dd3fc; }
.prop-group.cat-lighting > summary { color: #fde047; }
.prop-group.cat-info     > summary { color: #cbd5e1; }

.prop-row label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-weight: 500;
}

.prop-row input[type="number"],
.prop-row select {
    width: 100%;
    height: 34px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition);
}

.prop-row input[type="number"]:focus,
.prop-row select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.prop-row select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2368667a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

/* History panel entry hover */
.history-entry:hover {
    background: rgba(99, 102, 241, 0.12);
    border-left-color: #6366f1 !important;
}

/* Dropdown option list — force readable colors so the native picker isn't gray-on-gray */
select option {
    background: #ffffff;
    color: #111111;
}
select option:checked,
select option:hover {
    background: #e5ecff;
    color: #111111;
}

/* Range Slider */
.prop-row input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-tertiary);
    border-radius: 10px;
    outline: none;
    margin-top: 4px;
}

.prop-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 8px var(--accent-glow);
    transition: transform 0.15s ease;
}

.prop-row input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Color Swatches */
.color-swatches {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.swatch {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.swatch:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-sm);
}

.swatch.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Forced-landscape rotation on phones/tablets is DISABLED. The app now
   renders in the device's natural orientation regardless of portrait vs
   landscape. The JS-side `isAppRotated()` returns false in lockstep, so
   pointer coordinates are read straight from the canvas without remap.
   Original rotation rules preserved below behind a never-matching media
   query in case we want to re-enable them later. */
@media (orientation: portrait) and (pointer: coarse) and (min-width: 999999px) {
    html, body {
        width: 100vh;
        height: 100vw;
        overflow: hidden;
    }
    body {
        position: fixed;
        top: 0;
        left: 0;
        transform-origin: 0 0;
        transform: rotate(-90deg) translate(-100vh, 0);
    }
    html.pc-share-mode, body.pc-share-mode {
        width: 100vw !important;
        height: 100vh !important;
    }
    body.pc-share-mode {
        position: static !important;
        transform: none !important;
    }
}

/* Mobile orbit thumbstick — hidden on desktop (no need; mouse drag orbits fine),
   surfaced on coarse-pointer devices where one-finger-swipe doesn't feel
   precise. Styled to look like a horizontal slider with a big handle. */
#cam-orbit-strip {
    position: absolute;
    left: 50%;
    bottom: 14px;
    /* Slight leftward nudge so the slider doesn't sit under the camera pad
       shadow on wider phones. */
    transform: translateX(calc(-50% - 40px));
    width: min(70%, 420px);
    padding: 8px 14px;
    background: rgba(26, 26, 36, 0.82);
    border: 1px solid var(--border);
    border-radius: 24px;
    z-index: 45;
    display: none;
    backdrop-filter: blur(6px);
}
#cam-orbit-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #334155;
    border-radius: 4px;
    outline: none;
}
#cam-orbit-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid #1a1a24;
    cursor: grab;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
#cam-orbit-slider::-moz-range-thumb {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid #1a1a24;
    cursor: grab;
}
#cam-orbit-slider:active { cursor: grabbing; }

/* Camera pad layout — 3-col grid producing a D-pad (↑↓←→) with a +/− dolly
   tucked beneath. Hidden by default; surfaced on touch devices and in
   camera-mode. */
#camera-zoom-pad {
    display: none;
    grid-template-columns: 44px 44px 44px;
    gap: 4px;
}
#camera-zoom-pad .pad-cell {
    width: 44px;
    height: 44px;
    background: rgba(26, 26, 36, 0.92);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}
#camera-zoom-pad .pad-cell:active { background: rgba(40, 40, 55, 0.98); }
/* Empty grid cells only hold layout space — no paint, no blur, no pointer.
   Anything rendered behind them (the orbit slider, the 3D scene) shows
   through cleanly. Without killing backdrop-filter here, these cells leave
   a subtle blurred rectangle over whatever sits below, which reads like a
   "censor bar" across the slider. */
#camera-zoom-pad .pad-empty {
    background: transparent;
    border: none;
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
#camera-zoom-pad .pad-zoom  { font-size: 22px; }

/* "Enter camera mode" + auxiliary floating tools (pencil sketch). Same shape,
   stacked vertically in the top-right corner. */
#btn-camera-mode-float,
#btn-sketch-float,
#btn-dims-live-float,
#btn-photo-float,
#btn-trash-float {
    position: absolute;
    right: 8px;
    width: 40px;
    height: 40px;
    background: rgba(26, 26, 36, 0.92);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    z-index: 46;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(6px);
}
#btn-camera-mode-float { top: 8px;   }
#btn-sketch-float      { top: 56px;  }
#btn-dims-live-float   { top: 104px; }
#btn-photo-float       { top: 152px; }
/* On phones the sketch + dims-live floaters are hidden (see show
   rules below), so the photo button shifts up to sit directly under
   camera-mode — otherwise it'd float in mid-air at top:152 with two
   empty slots above it. Camera-mode override re-positions photo into
   the camera-zoom-pad's empty corner anyway, so this rule only
   matters out of camera-mode. */
body.is-phone:not(.camera-mode) #btn-photo-float { top: 56px; }
#btn-trash-float       { top: 200px; background: rgba(220, 38, 38, 0.85); border-color: #ef4444; color: #fff; }
#btn-trash-float:active { background: #b91c1c; }
@media (pointer: coarse) {
    /* Trash floater is always visible on touch (phones + tablets) so the
       user can find it before selecting anything; click is a no-op when
       nothing is selected. Dimmed when no selection so it reads as
       inactive — body.has-selection (set by selectItem/deselectItem)
       restores full opacity. */
    #btn-trash-float { display: flex; opacity: 0.45; }
    body.has-selection #btn-trash-float { opacity: 1; }
}
/* Camera-mode / sketch / dims / photo floaters are PHONE-ONLY now —
   tablets have toolbar room for these buttons, and the floating stack
   was clutter on the top-right of the viewport. The .is-phone body
   class is set in app.js when min(viewport-w, viewport-h) < 500 on a
   touch device (phones, including landscape), so it correctly excludes
   iPads in either orientation.
   On phones, sketch + live-dims are intentionally NOT in the float
   stack — the user works on a phone and asked for only the camera-
   mode + screenshot buttons up there. Sketch and live-dims stay
   reachable via the toolbar menu. */
body.is-phone #btn-camera-mode-float,
body.is-phone #btn-photo-float { display: flex; }
/* Toolbar camera-mode button is the tablet/desktop counterpart of the
   float — hide it on phones so the two don't double up. */
body.is-phone #btn-camera-mode { display: none !important; }
#btn-camera-mode-float:active,
#btn-camera-mode-float.active,
#btn-sketch-float:active,
#btn-sketch-float.active,
#btn-dims-live-float:active,
#btn-dims-live-float.active,
#btn-photo-float:active { background: #f59e0b; color: #1a1a24; border-color: #f59e0b; }

/* HD cell inside the camera pad — inherits the base .pad-cell styling; this
   rule just handles its "active" orange highlight. */
#btn-hires-float.active { background: #f59e0b; color: #1a1a24; border-color: #f59e0b; }

/* ----- Camera mode -----
   Toggled by body.camera-mode. Every overlay except the camera pad and the
   exit button is hidden, giving a clean spectator view of the scene. Pairs
   well with viewLocked (we auto-enable it together). */
body.camera-mode #toolbar,
body.camera-mode .panel-reopen,
body.camera-mode #info-bar,
body.camera-mode #camera-presets,
body.camera-mode #smart-snap-panel,
body.camera-mode #dims-overlay,
body.camera-mode #sketch-panel,
body.camera-mode #history-panel,
body.camera-mode #walk-hint,
body.camera-mode #marble-dims-bar,
body.camera-mode #catalog-panel,
body.camera-mode #properties-panel { display: none !important; }

body.camera-mode #app-layout {
    top: 0; /* toolbar is gone */
}
body.camera-mode #camera-zoom-pad     { display: grid !important; }
/* Orbit slider is phone + camera-mode only. Outside camera mode the user
   has the full toolbar / panels and can swipe directly on the canvas to
   rotate (pointer-driven OrbitControls rotation is enabled below), so the
   slider would only steal viewport space. Tablets never see it — they have
   enough screen room to swipe-rotate without a thumbstick. */
body.is-phone.camera-mode #cam-orbit-strip { display: block !important; }
body.camera-mode #btn-camera-mode-float,
body.camera-mode #btn-photo-float     { display: flex !important; }
/* Sketch + live-dims floaters are tablet-only inside camera mode. On
   phones we deliberately keep the top-right stack to just camera-mode
   and photo (matches the out-of-camera-mode rule above). */
body.camera-mode:not(.is-phone) #btn-sketch-float,
body.camera-mode:not(.is-phone) #btn-dims-live-float { display: flex !important; }
body.camera-mode #btn-camera-mode-float {
    background: #f59e0b;
    color: #1a1a24;
    border-color: #f59e0b;
}
/* Inside camera-mode the photo button slots into the camera-zoom-pad's
   empty top-left cell so it doesn't stack into the other right-side
   floaters (where it overlapped the pad's "+" zoom cell). The pad is a
   3×3 grid of 44 px cells with 4 px gaps anchored at right:8/bottom:16,
   so the empty corner sits at right:104 / bottom:112. Outside camera-
   mode it stays in its original top-right stack position. */
body.camera-mode #btn-photo-float {
    top: auto;
    right: 104px;
    bottom: 112px;
    width: 44px;
    height: 44px;
}

.snap-chip:hover { background: #334155 !important; }
.snap-chip.active {
    background: #f59e0b !important;
    color: #1a1a24 !important;
    border-color: #f59e0b !important;
    font-weight: 600;
}

/* Action Buttons */
.actions-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.action-btn {
    flex: 1;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.action-btn.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.3);
}

/* ---- Modal ---- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    max-width: 500px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}

.modal-content h2 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #6366f1, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shortcuts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.shortcut {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.shortcut kbd {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    font-family: inherit;
    font-size: 0.7rem;
    color: var(--text-secondary);
    min-width: 50px;
    text-align: center;
    white-space: nowrap;
}

.shortcut span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.modal-close {
    margin-top: 20px;
    width: 100%;
    height: 40px;
    border: none;
    background: var(--accent);
    color: white;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.modal-close:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-glow);
}

/* "← Back to list" button only visible when the page was opened via a
   shared plate-cutting link — gives mobile recipients a clear way to
   step back to the editable row list (group letters, dimensions, etc.)
   without hunting for the smaller "Paste sizes…" button. */
.pc-share-only { display: none; }
body.pc-share-mode .pc-share-only { display: inline-flex; }

/* Per-row layout for the paste-sizes review list. Five columns:
   line number, dimensions (flex), qty, group dropdown, include
   checkbox. The mobile breakpoint drops the row number and tightens
   each column so the whole grid still fits on a 320 px viewport. */
.pc-paste-grid {
    display: grid;
    grid-template-columns: 24px 1fr 48px 56px 36px;
    gap: 6px;
}
/* Phones only — hide the camera-presets bar to free bottom-of-viewport
   space (the 2D angle view buttons stay visible on tablets, see top of
   file). The wall-view-active override re-shows it because in wall view
   the angle switcher (front/left/right/top) is the main control the
   user reaches for. */
@media (max-width: 600px) {
    #camera-presets { display: none !important; }
    body.wall-view-active #camera-presets { display: flex !important; }
}

@media (max-width: 480px) {
    .pc-paste-grid {
        grid-template-columns: 22px 1fr 38px 52px 32px;
        gap: 4px;
    }
    /* Paste modal eats the whole screen on mobile so the row list has
       room to breathe — the regular .modal-content max-width caps at
       500 px which is too narrow once we've stacked text + 4 controls. */
    #plate-calc-paste-modal .modal-content {
        padding: 14px;
        width: 96%;
        max-width: 96vw;
        max-height: 96vh;
    }
}

/* Compact action buttons used in the plate-cutting modal + the door-list
   header. Auto-width (no flex stretching), tighter padding so labels don't
   look like full-width banners. */
.pc-btn-sm {
    background: var(--accent, #6366f1);
    color: #fff;
    border: 1px solid var(--accent, #6366f1);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1.4;
    white-space: nowrap;
}
.pc-btn-sm:hover {
    background: var(--accent-hover, #4f46e5);
}
.pc-btn-sm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Plate card: per-plate stepper + side-by-side plate / piece views. */
.pc-plate-card {
    background: #0a0a14;
    border: 1px solid #2a2a3e;
    border-radius: 8px;
    padding: 10px 12px;
}
.pc-card-header {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}
.pc-step-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    background: #161624;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 8px;
}
.pc-step-bar .pc-step-label {
    font-weight: 600;
    min-width: 80px;
}
.pc-step-bar .pc-step-desc {
    flex: 1;
    color: #94a3b8;
    font-family: monospace;
    font-size: 11px;
}
.pc-step-bar button {
    background: #1e1e2e;
    color: #e2e8f0;
    border: 1px solid #3a3a4e;
    padding: 3px 10px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    min-width: 32px;
}
.pc-step-bar button:hover:not(:disabled) {
    background: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
}
.pc-step-bar button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.pc-views {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.pc-main {
    flex: 1;
    min-width: 0;
}
.pc-piece {
    width: 200px;
    flex-shrink: 0;
    background: #161624;
    border: 1px solid #2a2a3e;
    border-radius: 6px;
    padding: 8px;
    font-size: 11px;
}
.pc-piece-title {
    font-weight: 600;
    color: #fbbf24;
    margin-bottom: 6px;
    font-family: monospace;
}
.pc-piece-meta {
    color: #94a3b8;
    font-family: monospace;
    line-height: 1.6;
}
@media (max-width: 700px) {
    .pc-views { flex-direction: column; }
    .pc-piece { width: 100%; }
}

/* ---- Selection Highlight ---- */
.selected-highlight {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
}

/* ---- Ghost Drag Preview ---- */
.drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 500;
    opacity: 0.8;
    background: var(--bg-tertiary);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 0.75rem;
    color: var(--accent);
    box-shadow: var(--shadow-glow);
    transform: translate(-50%, -50%);
}

/* ---- Toast Messages ---- */
.toast {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 20px;
    font-size: 0.8rem;
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    z-index: 300;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }

/* Lighting preset buttons — compact, square-ish chips */
.light-preset-btn {
    padding: 6px 4px;
    font-size: 10.5px;
    font-weight: 500;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    line-height: 1.2;
}
.light-preset-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.light-preset-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
/* Photorealistic chip — same neutral base as the other chips when
   inactive; the heavy purple gradient ONLY when it's active. The old
   always-on gradient made the chip look selected even after the user
   had switched to Bright Day / Showroom. */
.light-preset-photoreal {
    /* inherit base .light-preset-btn styles */
    border-color: rgba(139, 92, 246, 0.45);   /* subtle purple hint so it reads as a special chip */
}
.light-preset-photoreal:hover {
    background: rgba(139, 92, 246, 0.18);
    color: var(--text);
    border-color: rgba(139, 92, 246, 0.65);
}
.light-preset-photoreal.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.35);
}
.light-preset-photoreal.active:hover { filter: brightness(1.10); }

/* AI photoreal render modal — removed (security incident).
   .modal-overlay and the duplicate .modal-content rule below it were
   used ONLY by the photoreal modal, so they're gone too. The keyboard-
   shortcuts modal and the guide modal each declare their own scoped
   styles and don't depend on these rules. */

/* ---- Paged user-guide modal ---- */
/* Wider than the keyboard-shortcuts modal because each page may pair
   text with an SVG diagram. Capped at 760 so it stays readable on
   wide monitors.
   Explicit `background` here because a duplicate `.modal-content`
   rule lower in the file overrides the first one's bg with
   `var(--bg)` — and --bg is never defined — which resolved to
   transparent and let the kitchen scene bleed through the panel.
   The shadow comes back so the modal sits visually above the
   scene. */
.guide-modal-content {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    max-width: 760px;
    width: 92%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 12px 24px;
    border-bottom: 1px solid var(--border);
}
.guide-header h2 {
    margin: 0;
    font-size: 1.15rem;
}
.guide-header-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
/* Device badge — sits under the H2 in the header. Coloured pill that
   tells the user "this guide is showing the desktop / tablet / phone
   variant" so they can verify the content matches what they're using.
   Background colour rotates per device for at-a-glance recognition. */
.guide-device-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #2563eb;
    align-self: flex-start;
    white-space: nowrap;
    line-height: 1.4;
}
.guide-device-badge.is-desktop { background: #2563eb; }
.guide-device-badge.is-tablet  { background: #0891b2; }
.guide-device-badge.is-phone   { background: #16a34a; }
.guide-close-x {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 8px;
    border-radius: 6px;
}
.guide-close-x:hover { background: var(--surface); color: var(--text); }
/* Header actions row — keeps the language switcher and close button
   on the same line at the right edge of the modal header, with a
   small gap between them. flex-shrink:0 so they don't collapse when
   the title is long (Hebrew "מדריך משתמש" + a phone-variant badge
   would otherwise push them off-screen on narrow viewports). */
.guide-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
/* Three-button language pill group — same blue as the contact-us /
   guide pill in the toolbar so it reads as the same family. The
   active language gets a solid blue fill; inactive sit transparent
   with a thin border. */
.guide-lang-switch {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface);
}
.guide-lang-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
    transition: background 120ms ease, color 120ms ease;
}
.guide-lang-btn:hover { background: var(--surface-2); color: var(--text); }
.guide-lang-btn.is-active {
    background: #2563eb;
    color: #fff;
}
.guide-lang-btn.is-active:hover { background: #1d4ed8; }
/* Phone — collapse the language buttons to short codes so the header
   doesn't wrap. The button text is replaced via CSS content trick on
   the language attribute. */
@media (max-width: 600px) {
    .guide-lang-btn { padding: 4px 7px; font-size: 10px; }
}
.guide-progress {
    display: flex;
    gap: 4px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
}
.guide-dot {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--surface-2);
    cursor: pointer;
    transition: background 120ms ease;
}
.guide-dot:hover { background: var(--border); }
.guide-dot.active { background: #2563eb; }
.guide-dot.visited { background: #64748b; }
.guide-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 26px 18px 26px;
    line-height: 1.6;
}
.guide-body h3 {
    margin: 0 0 12px 0;
    font-size: 1.05rem;
    color: var(--text);
    background: linear-gradient(135deg, #6366f1, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.guide-body p {
    margin: 0 0 12px 0;
    color: var(--text);
    font-size: 13px;
}
.guide-body ul {
    margin: 0 0 14px 0;
    padding-inline-start: 22px;
    color: var(--text);
    font-size: 13px;
}
.guide-body li { margin-bottom: 4px; }
.guide-body code {
    font-family: monospace;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
}
.guide-body kbd {
    font-family: monospace;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: 0 1px 0 var(--border);
}
.guide-callout {
    margin: 10px 0 14px 0;
    padding: 10px 14px;
    border-radius: 8px;
    border-inline-start: 3px solid #2563eb;
    background: rgba(37, 99, 235, 0.08);
    font-size: 12.5px;
    color: var(--text);
}
.guide-callout-warn {
    border-inline-start-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}
/* Snap-dot legend swatches — coloured circles that match the actual
   dot colours rendered in the 3D scene so the user can tie the guide
   text back to what they see on screen. */
.guide-dotlegend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}
.guide-dotlegend-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text);
}
.guide-dotswatch {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-top: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
/* Cabinet-type gallery on the catalog-tour page. Two columns on wide
   viewports, one column on narrow. Each tile is a thumbnail (the
   catalog's own SVG icon, when we can build one) plus a label. */
.guide-cabgallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 8px 0 12px 0;
}
.guide-cabtile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
}
.guide-cabtile-icon {
    font-size: 24px;
    line-height: 1;
    margin: 4px 0;
}
.guide-cabtile-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
}
.guide-cabtile-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
/* Toolbar-icons legend page — visual icon grid grouped by section.
   Each row: 36 px icon cell + name/description column. The icon cell
   inherits the toolbar's currentColor so the SVGs render in the
   guide-body text color, which matches what the user sees in the live
   toolbar (modulo highlight states). Locked rows get the same yellow-
   tint treatment as the toolbar reference page. */
.guide-icon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 6px 0 14px 0;
    /* Force LTR grid flow even in RTL documents so the icon order
       stays consistent across all languages (Hebrew users were
       reading the toolbar tour right-to-left, which inverted the
       intended sequence). The text inside each row reverts to RTL
       below so Hebrew paragraphs still read naturally. */
    direction: ltr;
}
.guide-icon-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    /* Inherit LTR from the grid above so icon stays on the left in
       every language (consistent visual scan pattern). */
    direction: ltr;
}
/* Hebrew text inside the row info column: revert direction so the
   labels and descriptions read right-to-left as Hebrew expects. */
html[dir="rtl"] .guide-icon-info {
    direction: rtl;
    text-align: right;
}
.guide-icon-row.guide-locked-row {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.3);
}
.guide-icon-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    flex-shrink: 0;
}
.guide-icon-row.guide-locked-row .guide-icon-cell {
    color: var(--text-muted);
}
.guide-icon-info {
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.4;
}
.guide-icon-info b {
    color: var(--text);
    font-size: 13px;
    display: block;
    margin-bottom: 2px;
}
.guide-icon-info div {
    color: var(--text-muted);
    font-size: 12px;
}
.guide-icon-row.guide-locked-row .guide-icon-info b {
    color: #f59e0b;
}
/* Two columns on wider modal widths so the icon list isn't a long
   single-column strip on desktop. */
@media (min-width: 640px) {
    .guide-icon-grid { grid-template-columns: 1fr 1fr; }
}

/* Toolbar-reference page — sub-section headers + dense bullet list.
   Each section header gets a subtle blue underline to scan-divide the
   long list. Locked / unavailable items get a yellow tint so the user
   spots them at a glance. */
.guide-body h4.guide-section-h {
    margin: 16px 0 6px 0;
    font-size: 0.92rem;
    color: var(--text);
    padding-bottom: 4px;
    border-bottom: 1px solid #2563eb;
    font-weight: 600;
}
.guide-body h4.guide-section-h:first-child { margin-top: 0; }
.guide-toolbar-list {
    margin: 0 0 4px 0;
    padding-inline-start: 18px;
    font-size: 12.5px;
}
.guide-toolbar-list li { margin-bottom: 4px; }
.guide-toolbar-list li.guide-locked {
    color: var(--text-muted);
    background: rgba(245, 158, 11, 0.06);
    border-inline-start: 2px solid #f59e0b;
    padding: 3px 8px;
    margin-inline-start: -10px;
    border-radius: 4px;
}
.guide-toolbar-list li.guide-locked i {
    color: #f59e0b;
    font-style: italic;
}

/* Example-design tile — clickable variant of .guide-cabtile that
   shows a small Load action button at the bottom. The whole tile is
   the button, so :hover/:active lift the panel instead of the inner
   action so the user sees a clear affordance. */
button.guide-example-tile {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    font: inherit;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
button.guide-example-tile:hover {
    background: var(--surface-2);
    border-color: #2563eb;
    transform: translateY(-1px);
}
button.guide-example-tile:active { transform: translateY(0); }
.guide-example-btn {
    margin-top: 4px;
    padding: 4px 12px;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.guide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    gap: 12px;
}
.guide-nav-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}
.guide-nav-btn:hover { background: var(--surface-2); }
.guide-nav-btn:active { transform: translateY(1px); }
.guide-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.guide-nav-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.guide-nav-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.guide-page-indicator {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
/* RTL pages — the guide content uses ‹ for prev and › for next which
   already look right in RTL. We flip the flex direction on the
   footer + progress dots so prev sits on the right and next on the
   left for HE users — that's where their reading flow expects them. */
html[dir="rtl"] .guide-footer { flex-direction: row-reverse; }
html[dir="rtl"] .guide-progress { flex-direction: row-reverse; }
/* Phone: collapse padding + indicators so the modal fits a 360 px
   viewport without horizontal scroll. */
@media (max-width: 600px) {
    .guide-modal-content { width: 98%; max-height: 92vh; }
    .guide-header { padding: 12px 16px 10px 16px; }
    .guide-body { padding: 16px 18px; }
    .guide-footer { padding: 10px 16px; gap: 8px; }
    .guide-nav-btn { padding: 7px 12px; font-size: 12px; }
}