/* ============================================================
   ROHLAN PC Floor Plan Creator — main.css
   All UI styles: variables, toolbar, sidebar, modals, etc.
   ============================================================ */

:root { 
    --bg-app: #f4f2ee;
    --glass-bg: rgba(255, 255, 255, 0.97);
    --glass-border: rgba(220, 212, 200, 0.8);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    --text-dark: #1d1d1f;
    --text-soft: #86868b;
    --accent: #A68A64;
    --accent-glow: rgba(166, 138, 100, 0.2);
    --danger: #ff3b30;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --radius-pill: 50px;
    --toolbar-size: 64px;   /* height when top/bottom, width when left/right */
    --btn-h: 30px;          /* compact button height */
}

* { margin: 0; padding: 0; box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }

/* Default checkbox tick colour app-wide — was browser-default blue.
   More specific rules (e.g. .mag-ctrl) still win where a custom accent is wanted. */
input[type="checkbox"] { accent-color: var(--text-dark); }

body { 
    height: 100vh;  /* fallback for older browsers that don't support dvh */
    height: 100dvh; /* real, currently-visible viewport height on tablets/phones.
                        100vh alone equals the browser's tallest possible viewport
                        (as if the address bar were hidden), so anything anchored
                        to "bottom" (like the bottom-position toolbar) landed
                        below the actually visible screen whenever the address
                        bar was showing. 100dvh tracks the real visible area. */
    width: 100vw; 
    background: var(--bg-app); 
    color: var(--text-dark); 
    font-family: 'Montserrat', sans-serif; 
    overflow: hidden; 
    position: fixed; 
}
/* NOTE: touch-action:none intentionally NOT set here anymore. It was
   blocking touch-scroll inside the property panel, modals, settings,
   and project grid (the "sidebar bottom cut off, can't scroll" bug).
   position:fixed + overflow:hidden above already stop the whole page
   from bouncing/scrolling on touch. The drawing canvas and 3D viewer
   each carry their own explicit touch-action:none (see .canvas-container,
   #canvas, #viewer3d-canvas below) so pinch/pan there is still fully
   custom-controlled and unaffected by this change. */

/* SVG Icons Setup */
svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.btn svg { margin-right: 5px; }
/* Icon-only: no gap between icon and nothing */
.btn.btn-compact svg,
.btn-icon-only svg { margin-right: 0; }
.btn-icon-only svg { margin-right: 0; }

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.workspace { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.canvas-container { width: 100%; height: 100%; background: var(--bg-app); cursor: crosshair; touch-action: none; }
#canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#viewer3d-canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }

/* ---- ROTATE TO LANDSCAPE OVERLAY ----
   Hidden by default. Shown only when BOTH conditions are true:
   1. pointer:coarse   -> a touch device (tablet/phone), never a mouse/desktop
   2. orientation:portrait -> currently held upright
   It's a brief NUDGE, not a permanent block: fully visible for ~2.5s,
   then fades out over ~1.5s and stays out of the way (pointer-events:none)
   so the person can keep working in portrait if they want to. Rotating to
   landscape and back to portrait shows it again — a gentle reminder each
   time, never a wall. */
#rotate-landscape-overlay { display: none; }
@media (pointer: coarse) and (orientation: portrait) {
    #rotate-landscape-overlay {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 18px; position: fixed; inset: 0; z-index: 99999;
        background: #0A0A0A; color: #F6F4F0; text-align: center; padding: 40px;
        animation: rotateOverlayDismiss 4s ease forwards;
    }
    #rotate-landscape-overlay svg { animation: rotateHint 1.8s ease-in-out infinite; opacity: 0.9; }
    .rotate-landscape-text { font-size: 15px; font-weight: 500; line-height: 1.6; max-width: 260px; }
}
@keyframes rotateOverlayDismiss {
    0%, 62% { opacity: 1; pointer-events: auto; }
    100% { opacity: 0; pointer-events: none; visibility: hidden; }
}
@keyframes rotateHint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-90deg); }
}
   Auto-detected via CSS media query — no toggle, no JS needed here.
   Mouse/trackpad users see zero change. */
@media (pointer: coarse) {
    :root { --btn-h: 40px; }
    .btn { font-size: 11px; padding: 0 14px; }
    .btn-icon-only { width: 40px; height: 40px; }
    .layer-vis, .btn-flyout-trigger { min-width: 40px; min-height: 40px; }
    .toolbar { gap: 9px; }
    .tool-group { gap: 8px; }
}

/* ---- TOOLBAR ---- */
.toolbar {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: 98%; max-width: 1350px; height: var(--toolbar-size); z-index: 100;
    display: flex; align-items: center; padding: 0 10px; gap: 6px;
    border-radius: var(--radius-pill); overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    transition: height 0.15s ease, width 0.15s ease;
}
.toolbar::-webkit-scrollbar { display: none; }

/* ---- TOOLBAR POSITION SYSTEM ----
   Controlled from Settings → Header / Toolbar.
   - body.toolbar-pos-top    (default): horizontal, pinned to top, fixed height
   - body.toolbar-pos-bottom          : horizontal, pinned to bottom, fixed height
   - body.toolbar-pos-left            : vertical, pinned to left, WIDTH is user-resizable via --toolbar-size
   - body.toolbar-pos-right           : vertical, pinned to right, WIDTH is user-resizable via --toolbar-size
   Left/Right behave differently from Top/Bottom on purpose: top/bottom keep a fixed
   compact height, while left/right let the user drag/slide --toolbar-size to control
   the toolbar's own width independently. */
body.toolbar-pos-top .toolbar,
body.toolbar-pos-bottom .toolbar {
    width: 98%; max-width: 1350px; height: var(--toolbar-size);
    left: 50%; right: auto; transform: translateX(-50%);
    flex-direction: row;
}
body.toolbar-pos-top .toolbar { top: 14px; bottom: auto; }
body.toolbar-pos-bottom .toolbar { top: auto; bottom: 14px; }

body.toolbar-pos-left .toolbar,
body.toolbar-pos-right .toolbar {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    top: 14px; bottom: 14px; height: auto;
    width: var(--toolbar-size); max-width: none;
    transform: none; padding: 10px 6px; gap: 8px;
    overflow-x: hidden; overflow-y: auto;
    border-radius: var(--radius-md);
}
body.toolbar-pos-left .toolbar { left: 14px; right: auto; }
body.toolbar-pos-right .toolbar { right: 14px; left: auto; }
body.toolbar-pos-left .toolbar .tool-group,
body.toolbar-pos-right .toolbar .tool-group {
    flex-direction: column; height: auto; width: 100%;
    border-right: none; border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 0 0 8px 0;
}
body.toolbar-pos-left .btn-label,
body.toolbar-pos-right .btn-label { display: none !important; }
body.toolbar-pos-left .toolbar .btn,
body.toolbar-pos-right .toolbar .btn { padding: 0 9px; justify-content: center; width: 100%; }
body.toolbar-pos-left .toolbar .btn svg,
body.toolbar-pos-right .toolbar .btn svg { margin-right: 0; }
/* Icon-only flyout trigger: show a tiny ▾ indicator via ::after so user
   knows it's a flyout even without the text arrow span */
body.toolbar-pos-left .toolbar .btn-flyout-trigger::after,
body.toolbar-pos-right .toolbar .btn-flyout-trigger::after,
.toolbar .btn-flyout-trigger.compact-flyout::after {
    content: '▾';
    font-size: 7px;
    position: absolute;
    bottom: 2px;
    right: 3px;
    opacity: 0.45;
    line-height: 1;
}
.toolbar .btn-flyout-trigger { position: relative; }
body.toolbar-pos-left .toolbar .brand,
body.toolbar-pos-right .toolbar .brand { display: none; }

.brand { 
    color: var(--text-dark); font-family: 'Cormorant Garamond', serif; 
    font-weight: 600; font-size: 1.5rem; font-style: italic; margin: 0 15px; 
    flex-shrink: 0; text-decoration: none; letter-spacing: 1px;
}

.tool-group { display: flex; align-items: center; gap: 5px; padding: 0 8px; border-right: 1px solid rgba(0,0,0,0.05); flex-shrink: 0; height: var(--btn-h); }
.tool-group:last-child { border-right: none; }

.btn {
    padding: 0 12px; height: var(--btn-h); border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.6);
    color: var(--text-dark); font-size: 10px; font-weight: 600; text-transform: uppercase;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; white-space: nowrap; transition: all 0.2s;
}
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn.active { background: var(--text-dark); color: white; border-color: var(--text-dark); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

.btn-lock { color: var(--text-dark); border-color: rgba(0,0,0,0.1); }
.btn-lock.is-locked { background: #fff1f0; color: var(--danger); border-color: rgba(255, 59, 48, 0.2); }
.btn-lock.is-locked svg { stroke: var(--danger); }

.btn-send-admin { background: #27ae60; color: white; border: 1px solid #2ecc71; }
.btn-send-admin:hover { background: #2ecc71; box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3); }

.btn-icon-only { padding: 0; width: var(--btn-h); height: var(--btn-h); color: var(--text-soft); }
.btn-icon-only:hover { color: var(--danger); background: #fff; }

/* Labels hidden by default (before JS applies state) so there's no flash of
   visible text that then disappears. JS wrapToolbarLabels() shows them back
   only when the user has "Show button names" turned on for top/bottom toolbar. */
.btn-label { display: none; white-space: nowrap; }
.btn.btn-compact { padding: 0 9px; }
.btn.btn-compact svg { margin-right: 0; }

/* AUTH BUTTONS */
.auth-btn { background: #333; color: #fff; border: none; }
.auth-btn:hover { background: #000; }
#user-display { font-size: 11px; font-weight: bold; color: var(--accent); margin-right: 10px; display: none; }

#projects-btn { background: var(--accent-glow); color: #8c7048; border-color: rgba(166, 138, 100, 0.3); }

.mag-ctrl, .zoom-controls { display: flex; align-items: center; background: rgba(255,255,255,0.5); padding: 4px; border-radius: var(--radius-pill); height: 36px; }
.mag-ctrl { padding: 0 12px; gap: 6px; font-size: 14px; cursor: pointer; }
.mag-ctrl #mag-icon { color: #A68A64; transition: color 0.2s, opacity 0.2s; }
.mag-ctrl:has(#mag-on:not(:checked)) #mag-icon { color: #bbb; opacity: 0.5; }
.mag-label { font-size: 11px; font-weight: 600; color: #7a6a58; cursor: pointer; user-select: none; letter-spacing: 0.02em; }
.mag-ctrl:has(#mag-on:not(:checked)) .mag-label { color: #bbb; }
.mag-ctrl input[type="checkbox"] { accent-color: #A68A64; width: 15px; height: 15px; cursor: pointer; margin: 0; }
.zoom-btn { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 500; font-size: 16px; }
.scale-display { font-size: 11px; font-weight: 600; min-width: 45px; text-align: center; color: var(--text-soft); }
body.toolbar-pos-left .scale-display,
body.toolbar-pos-right .scale-display { display: none; }

/* ---- SIDEBAR ---- */
.sidebar { 
    position: absolute; top: 100px; right: 20px; width: 300px; max-height: calc(100vh - 120px);
    border-radius: var(--radius-lg); display: flex; flex-direction: column; z-index: 90;
    transform-origin: top right; transition: transform 0.25s ease, opacity 0.25s ease, right 0.15s ease; overflow: hidden;
}
/* When right toolbar is active, push sidebar left so they don't overlap */
body.toolbar-pos-right .sidebar {
    right: calc(var(--toolbar-size) + 28px);
}
.sidebar.sidebar-hidden {
    transform: translateX(calc(100% + 28px));
    opacity: 0;
    pointer-events: none;
}
.tabs { display: flex; background: rgba(255,255,255,0.5); padding: 4px; margin: 10px; border-radius: var(--radius-md); gap: 4px; }
.tab { flex: 1; padding: 8px 0; text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-soft); cursor: pointer; border-radius: var(--radius-sm); }
.tab.active { color: var(--text-dark); background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.panel-content { flex: 1; overflow-y: auto; padding: 10px 20px 20px 20px; }

.input-group { margin-bottom: 24px; }
.input-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-soft); margin-bottom: 8px; display: block; }
.input-row { display: flex; gap: 10px; margin-bottom: 8px; align-items: center; }
.input-row label { font-size: 11px; font-weight: 600; color: var(--text-dark); min-width: 45px; }
input[type="number"], input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select, textarea { width: 100%; padding: 8px 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 12px; background: rgba(255,255,255,0.8); }

.btn-primary { width: 100%; padding: 12px; margin-top: 5px; background: var(--text-dark); color: white; border: none; border-radius: 12px; font-size: 12px; text-transform: uppercase; font-weight: 700; cursor: pointer; }
.btn-danger { width: 100%; padding: 10px; margin-top: 15px; background: rgba(255, 59, 48, 0.1); color: var(--danger); border: 1px solid rgba(255, 59, 48, 0.2); border-radius: 12px; font-size: 11px; text-transform: uppercase; font-weight: 700; cursor: pointer; }

.nudge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 15px 0; }
.nudge-btn { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.measurement-box { background: linear-gradient(135deg, #fdfbf7, #fff); border: 1px solid rgba(166, 138, 100, 0.2); border-radius: 12px; padding: 15px; margin-bottom: 20px; }
.measurement-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; color: var(--text-soft); }
.measurement-value { font-weight: 700; color: var(--text-dark); }

/* ---- PROPERTIES PANEL — compacted a little (scoped to #props-tab only,
   so nothing outside the object-properties sidebar is affected). Sizes are
   trimmed modestly, not stripped down, so every field stays fully legible. ---- */
#props-tab.panel-content { padding: 8px 16px 16px 16px; }
#props-tab .input-group { margin-bottom: 16px; }
#props-tab .input-label { font-size: 0.68rem; margin-bottom: 6px; }
#props-tab .input-row { gap: 8px; margin-bottom: 6px; }
#props-tab .input-row label { font-size: 10.5px; min-width: 40px; }
#props-tab input[type="number"],
#props-tab input[type="text"],
#props-tab input[type="tel"],
#props-tab input[type="email"],
#props-tab input[type="password"],
#props-tab select,
#props-tab textarea { padding: 6px 9px; font-size: 11px; border-radius: 7px; }
#props-tab .measurement-box { padding: 11px; margin-bottom: 14px; border-radius: 10px; }
#props-tab .measurement-row { font-size: 11px; margin-bottom: 5px; }
#props-tab .btn-primary { padding: 10px; }
#props-tab .btn-danger { padding: 8px; margin-top: 10px; }
#props-tab .nudge-grid { margin: 10px 0; }
#props-tab .nudge-btn { padding: 8px; }
#props-tab .tex-prop-row { padding: 6px 9px; margin-bottom: 6px; }
#props-tab .tex-prop-swatch { width: 34px; height: 34px; }

/* ---- SETTINGS MODAL (v2 — search + categorized pages, Windows-Settings style) ----
   REDESIGN: old settings panel was one long 340-line scroll with inline
   styles that drifted from the rest of the app's design language (loose
   spacing, ad-hoc colors) and had no way to jump straight to a setting.
   New structure: a main page (search bar + category cards) and one
   sub-page per category. All sub-pages share .settings-page and are
   toggled via .active — see js/ui/settingsPanel.js for the controller. */
#settings-modal .modal-box.settings-modal-box {
    width: 460px; max-width: 96%; padding: 0; text-align: left;
    height: 620px; max-height: 86vh;
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--radius-lg);
}
.settings-page { display: none; flex-direction: column; height: 100%; min-height: 0; }
.settings-page.active { display: flex; }

.settings-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px 14px; flex-shrink: 0;
}
.settings-header h3 { margin: 0; font-size: 1.05rem; }
.settings-close-btn {
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.05); color: var(--text-soft);
    font-size: 16px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.settings-close-btn:hover { background: rgba(0,0,0,0.09); color: var(--text-dark); }

.settings-search-wrap { position: relative; margin: 0 24px 16px; flex-shrink: 0; }
.settings-search-wrap svg {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--text-soft); pointer-events: none;
}
#settings-search-input {
    width: 100%; padding: 10px 14px 10px 36px; border-radius: var(--radius-pill);
    border: 1px solid rgba(0,0,0,0.08); background: var(--bg-app);
    font-size: 12.5px; color: var(--text-dark);
}
#settings-search-input:focus { outline: none; border-color: var(--accent); background: #fff; }

.settings-category-list, .settings-page-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 0 20px 20px; display: flex; flex-direction: column; gap: 6px;
}
.settings-cat-card {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 12px; border-radius: var(--radius-md);
    cursor: pointer; transition: background 0.15s; border: 1px solid transparent;
}
.settings-cat-card:hover { background: rgba(166, 138, 100, 0.08); border-color: rgba(166,138,100,0.15); }
.settings-cat-icon {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: var(--bg-app); display: flex; align-items: center; justify-content: center;
    color: var(--accent);
}
.settings-cat-icon svg { width: 18px; height: 18px; }
.settings-cat-text { flex: 1; min-width: 0; }
.settings-cat-title { font-size: 13px; font-weight: 700; color: var(--text-dark); }
.settings-cat-desc { font-size: 11px; color: var(--text-soft); margin-top: 2px; }
.settings-cat-chevron { color: var(--text-soft); flex-shrink: 0; }
.settings-cat-chevron svg { width: 14px; height: 14px; }

.settings-page-header {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 20px 14px; flex-shrink: 0;
    border-bottom: 1px solid var(--glass-border);
}
.settings-back-btn {
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.05); color: var(--text-dark); cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background 0.15s;
}
.settings-back-btn:hover { background: rgba(0,0,0,0.09); }
.settings-back-btn svg { width: 15px; height: 15px; }
.settings-page-header h3 { margin: 0; font-size: 1rem; }
.settings-page-body { padding-top: 16px; }

.settings-item { padding: 12px 14px; border-radius: var(--radius-sm); transition: background 0.4s; }
.settings-item + .settings-item { margin-top: 2px; }
.settings-item.settings-flash { background: var(--accent-glow); }
.settings-item-title { font-size: 11.5px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.settings-item-desc { color: var(--text-soft); font-size: 10.5px; margin-bottom: 8px; line-height: 1.5; }

.settings-search-results { display: none; padding: 0 20px 20px; overflow-y: auto; flex: 1; }
.settings-result-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 12px; border-radius: var(--radius-sm); cursor: pointer;
    transition: background 0.15s;
}
.settings-result-row:hover { background: rgba(166, 138, 100, 0.08); }
.settings-result-label { font-size: 12px; color: var(--text-dark); font-weight: 600; }
.settings-result-cat { font-size: 10px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.settings-no-results { padding: 30px 10px; text-align: center; color: var(--text-soft); font-size: 12px; }

.setting-slider-container { margin: 14px 0; text-align: left; }
.setting-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; margin-bottom: 8px; color: var(--text-dark); }
input[type="range"] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: var(--text-dark); margin-top: -6px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: #ddd; border-radius: 2px; }


.nav-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 160px; margin: 20px auto; }
.nav-btn { background: #f5f5f5; border: 1px solid #ddd; border-radius: 8px; height: 40px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.1s; }
.nav-btn:active { background: var(--text-dark); color: white; transform: scale(0.95); }

/* ---- OTHER UI ELEMENTS ---- */
.element-schedule {
    position: absolute; bottom: 24px; left: 24px;
    border-radius: 12px; padding: 10px 12px;
    max-height: 220px; z-index: 50;
    font-size: 12px; pointer-events: none;
    min-width: 0; width: auto; max-width: 480px;
    transition: max-height 0.25s ease, opacity 0.2s, left 0.15s ease;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
/* BUG FIX: when the toolbar is docked on the left, it sits at left:14px
   with its own width (--toolbar-size), overlapping the Element Schedule
   panel which was always pinned at a fixed left:24px. Push the panel over
   so it starts just past the toolbar instead — mirrors the existing
   `body.toolbar-pos-right .sidebar` push rule used for the same reason. */
body.toolbar-pos-left .element-schedule {
    left: calc(var(--toolbar-size) + 28px);
}
.element-schedule .sch-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 0; pointer-events: auto;
}
.element-schedule h4 {
    margin: 0; font-weight: 700; font-size: 11px;
    text-transform: uppercase; color: var(--accent);
    letter-spacing: 0.5px; white-space: nowrap;
}
.sch-toggle-btn {
    background: rgba(0,0,0,0.06); border: none; border-radius: 5px;
    cursor: pointer; padding: 1px 7px; font-size: 11px;
    color: #555; line-height: 1.7; pointer-events: auto;
    white-space: nowrap; flex-shrink: 0;
}
.sch-toggle-btn:hover { background: rgba(0,0,0,0.12); }
#schedule-table-wrap {
    margin-top: 8px; overflow-y: auto; max-height: 160px;
}
.sch-table { width: 100%; border-collapse: separate; border-spacing: 0 3px; pointer-events: auto; }
.sch-table th { text-align: left; color: #555; padding: 3px 8px; font-weight: 700; font-size: 10px; text-transform: uppercase; }
.sch-table td { padding: 5px 8px; background: rgba(255,255,255,0.7); color: #1a1a1a; vertical-align: middle; border-radius: 4px; font-size: 12px; white-space: nowrap; }
.sch-table td:last-child { white-space: normal; }
.tag-badge { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--text-dark); color: white; text-align: center; line-height: 22px; font-size: 10px; font-weight: bold; }

.ctx-menu { display: none; position: fixed; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 10px 40px rgba(0,0,0,0.15); border-radius: 12px; z-index: 3000; width: 180px; flex-direction: column; overflow: hidden; padding: 5px; }
.ctx-item { padding: 8px 12px; font-size: 12px; cursor: pointer; color: var(--text-dark); display: flex; justify-content: space-between; border-radius: 6px; }
.ctx-item:hover { background: rgba(0,0,0,0.05); }
.ctx-divider { height: 1px; background: rgba(0,0,0,0.05); margin: 4px 0; }

.modal:not(.furn-overlay) { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44, 44, 44, 0.4); backdrop-filter: blur(4px); z-index: 2000; justify-content: center; align-items: center; }
.modal-box { background: #fff; padding: 40px; border-radius: 24px; width: 400px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; border: 1px solid rgba(255,255,255,1); }
.modal-input { width: 100%; padding: 14px; margin-bottom: 15px; border: 1px solid #eee; border-radius: 12px; background: #f9f9f9; }
.modal-input:focus { border-color: var(--accent); background: #fff; }
.auth-link { color: var(--accent); cursor: pointer; font-size: 0.8rem; text-decoration: none; font-weight: 600; margin-top: 15px; display: block; }

/* ---- Shared close-X button, reused by every popup (settings / projects / export / save) ---- */
.modal-close-x {
    width: 30px; height: 30px; border-radius: 50%; border: none; flex-shrink: 0;
    background: rgba(0,0,0,0.05); color: var(--text-soft);
    font-size: 16px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.modal-close-x:hover { background: rgba(0,0,0,0.09); color: var(--text-dark); }

/* ---- Simple utility modals (Export / Save) — brought up to the same
   polish level as the auth / settings / projects modals instead of a
   bare centered <h3> + plain buttons. ---- */
.modal-box-simple { width: 380px; padding: 26px 28px 30px; text-align: left; }
.modal-simple-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-simple-title { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--text-dark); letter-spacing: -0.2px; }
.modal-hint-text { font-size: 11px; color: var(--text-soft); margin: -8px 2px 16px; }

.notification { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(29, 29, 31, 0.9); backdrop-filter: blur(10px); color: #fff; padding: 12px 24px; border-radius: 30px; font-size: 13px; font-weight: 500; opacity: 0; transition: all 0.4s; pointer-events: none; z-index: 999; }
.notification.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Lift notification above bottom toolbar */
body.toolbar-pos-bottom .notification { bottom: calc(var(--toolbar-size) + 24px); }

/* ---- Export / Import progress overlay ----
   BUG FIX: PDF export (and JSON import/export) used to run with zero visual
   feedback, so a multi-floor PDF that genuinely takes a few seconds to
   rasterize just looked frozen/broken. This overlay is driven by real
   progress from the export/import code (see modals.js) — it is shown right
   before work starts and hidden in a `finally`/callback once that work has
   actually finished, never on a fixed timer. */
.io-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(29, 29, 31, 0.35); backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
    z-index: 100000;
}
.io-overlay.show { display: flex; }
.io-card {
    width: 260px; padding: 28px 26px 24px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); box-shadow: var(--glass-shadow);
    text-align: center;
}
.io-ring {
    width: 46px; height: 46px; margin: 0 auto 16px;
    border-radius: 50%;
    border: 3.5px solid var(--accent-glow);
    border-top-color: var(--accent);
    animation: io-spin 0.85s linear infinite;
}
@keyframes io-spin { to { transform: rotate(360deg); } }
.io-label { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 14px; }
.io-track {
    width: 100%; height: 6px; border-radius: var(--radius-pill);
    background: rgba(166, 138, 100, 0.15); overflow: hidden;
}
.io-fill {
    height: 100%; width: 0%; border-radius: var(--radius-pill);
    background: var(--accent);
    transition: width 0.25s ease;
}
/* Indeterminate mode: used when we start real work but don't yet know a
   %-complete for it (e.g. before the first floor has rendered). */
.io-track.indeterminate .io-fill {
    width: 40% !important; transition: none;
    animation: io-indeterminate 1.1s ease-in-out infinite;
}
@keyframes io-indeterminate {
    0%   { transform: translateX(-60%); }
    100% { transform: translateX(220%); }
}
#dynamic-input { position: absolute; display: none; background: var(--text-dark); color: white; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; pointer-events: none; z-index: 150; transform: translate(15px, -15px); }
#snap-dot { position: absolute; width: 12px; height: 12px; background: transparent; border: 2px solid var(--accent); border-radius: 50%; display: none; pointer-events: none; z-index: 100; transform: translate(-50%, -50%); }

/* Projects */
/* ── Floating Save + Projects (bottom-right corner, independent of header) ──
   Moved out of the toolbar entirely so it can never be clipped/overflowed
   by the header, no matter how many tool buttons are active. */
.floating-save-proj {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 500;
    height: 44px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    border-radius: var(--radius-pill);
}
.floating-save-proj .btn { height: 44px; }
@media (max-width: 900px) {
    .floating-save-proj { bottom: 90px; right: 16px; }
}

/* ── Save + Projects split group ─────────────────────────────────────── */
.save-proj-group { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.btn-save-main {
    background: var(--text-dark) !important; color: white !important;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
    border-right: 1px solid rgba(255,255,255,0.15) !important;
    padding: 0 16px; font-weight: 700;
}
.btn-save-main:hover { background: #333 !important; }
.btn-proj-trigger {
    background: var(--text-dark) !important; color: white !important;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
    padding: 0 12px !important; opacity: 0.85;
    border-left: 1px solid rgba(255,255,255,0.15) !important;
}
.btn-proj-trigger:hover { opacity: 1; background: #333 !important; }

/* ── Advanced Project Manager ──────────────────────────────────────── */
.proj-modal-box { width: min(660px, 95vw) !important; max-height: 88vh; display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; box-sizing: border-box; position: relative; }
.proj-modal-header { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid #f0ebe2; }
.proj-modal-header h3 { flex: 1; }
.proj-new-btn { font-size: 11px; padding: 6px 12px; display: flex; align-items: center; gap: 5px; border-radius: 20px; background: var(--accent); color: #fff; border-color: var(--accent); }
.proj-new-btn:hover { background: var(--accent-dark, #8c6a3e); }
.proj-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid #f0ebe2; box-sizing: border-box; width: 100%; }
.proj-search-wrap { flex: 1 1 0; min-width: 0; position: relative; }
.proj-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #bbb; }
.proj-search-input { width: 100%; padding: 7px 10px 7px 30px; border: 1px solid #e8e0d4; border-radius: 20px; font-size: 12px; outline: none; background: #faf8f5; color: #4a3f32; box-sizing: border-box; transition: border-color 0.15s, background 0.15s; }
.proj-search-input:focus { border-color: var(--accent); background: #fff; }
.proj-sort-select { font-size: 11px; padding: 7px 10px; border: 1px solid #e8e0d4; border-radius: 20px; background: #faf8f5; color: #7a6a56; cursor: pointer; outline: none; flex-shrink: 0; max-width: 130px; box-sizing: border-box; transition: border-color 0.15s; }
.proj-sort-select:focus { border-color: var(--accent); }

/* ── My Projects modal — tablet/mobile fit ─────────────────────────────
   The header row (title + New Drawing + Export All + Import All + close)
   was a single unwrapped flex row sized for a wide desktop viewport —
   on tablet/mobile the same row has no room, so buttons got clipped or
   crushed. Below 900px (same breakpoint the rest of the app already uses
   for tablet/mobile), the three action buttons drop their text label and
   become icon-only (title attribute still gives a tooltip/long-press
   hint), and everything gets noticeably smaller so the whole header
   comfortably fits width even on a narrow tablet in portrait. */
@media (max-width: 900px) {
    .proj-modal-box { width: 96vw !important; max-height: 92vh; }
    .proj-modal-header { padding: 12px 12px 10px; gap: 6px; flex-wrap: nowrap; }
    .proj-modal-header h3 { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .proj-modal-header .btn-label { display: none; }
    .proj-modal-header .btn {
        padding: 0; width: 32px; height: 32px; min-width: 32px;
        border-radius: 50%; justify-content: center; flex-shrink: 0;
        background: rgba(0,0,0,0.05); border-color: transparent;
    }
    .proj-modal-header .btn:hover { background: rgba(0,0,0,0.09); }
    .proj-new-btn { width: 32px; height: 32px; padding: 0 !important; }
    .proj-modal-header .modal-close-x { margin-left: 2px; }
    .proj-toolbar { padding: 8px 12px; flex-wrap: wrap; }
    .proj-sort-select { max-width: 105px; font-size: 10.5px; }
}

/* ---- Column-type picker popup buttons — was static/flat with no hover feedback ---- */
.col-picker-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 1.5px solid #e8e0d4; border-radius: 9px;
    background: #faf8f4; cursor: pointer; font-family: Montserrat, sans-serif;
    transition: background 0.14s, border-color 0.14s, transform 0.1s;
}
.col-picker-btn:hover { background: #f0e9dc; border-color: var(--accent); }
.col-picker-btn:active { transform: scale(0.98); }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 14px 18px; overflow-y: auto; max-height: 420px; }

/* Cards */
.proj-card { border: 1px solid #e8e0d4; border-radius: 10px; overflow: hidden; background: #fff; transition: box-shadow 0.15s, border-color 0.15s; cursor: default; }
.proj-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); border-color: #c8bfb0; }
.proj-card-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(166,138,100,0.18); }
.proj-card-draft { border: 1.5px dashed #c8a35a; background: #fffbf3; }
.proj-card-draft .proj-thumb { cursor: default; }
.proj-card-draft .proj-thumb:hover::after { content: none; }

/* Thumbnail */
.proj-thumb { width: 100%; height: 100px; background: #faf8f5; position: relative; cursor: pointer; overflow: hidden; }
.proj-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.proj-thumb:hover::after { content: 'Open'; position: absolute; inset: 0; background: rgba(0,0,0,0.28); color: #fff; display: block; text-align: center; line-height: 100px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
.proj-active-badge { position: absolute; top: 6px; right: 6px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; letter-spacing: 0.5px; text-transform: uppercase; }

/* Card body */
.proj-card-body { padding: 9px 10px 8px; }
.proj-card-name { font-weight: 700; font-size: 14px; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.proj-card-meta { font-size: 10px; color: #b0a090; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.proj-meta-dot { color: #d0c8bc; }
.proj-card-actions { display: flex; gap: 5px; }
.proj-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 16px; border: 1px solid #e0d8ce; background: #faf8f5; color: var(--text-dark); cursor: pointer; transition: background 0.12s; }
.proj-btn:hover { background: #f0ebe2; }
.proj-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); flex: 1; justify-content: center; }
.proj-btn-primary:hover { background: var(--accent-dark, #8c6a3e); }
.proj-btn-del:hover { background: #fff1f0; color: var(--danger); border-color: #ffd5d2; }

/* Furniture */
.furn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; text-align: left; }
.furn-item { padding: 15px; border: 1px solid #f0f0f0; border-radius: 12px; cursor: pointer; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: all 0.2s; background: #fff; }
.furn-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.furn-icon { width: 40px; height: 40px; border-radius: 8px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid #eee; }

.fi-bed { width:20px; height:14px; border:2px solid #555; border-radius:2px; position:relative; }
.fi-bed::before { content:''; position:absolute; top:2px; left:2px; width:6px; height:4px; background:#999; }
.fi-bed::after { content:''; position:absolute; top:2px; right:2px; width:6px; height:4px; background:#999; }

/* Layers panel */
.layer-group-header { display:flex; justify-content:space-between; padding:8px 5px; font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-soft); cursor:pointer; border-bottom:1px solid rgba(0,0,0,0.05); }
.layer-item { display:flex; justify-content:space-between; padding:8px 5px; font-size:12px; cursor:pointer; border-radius:6px; }
.layer-item:hover { background:rgba(0,0,0,0.03); }
.layer-vis { opacity:0.4; cursor:pointer; }
.layer-vis:hover { opacity:1; }
.layer-vis.hidden { opacity:0.15; }

@media (max-width: 900px) {
    .toolbar { top: auto; bottom: 20px; width: 90%; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-radius: 20px; padding: 0 15px; background: rgba(255,255,255,0.95); }
    /* z-index bumped above .toolbar (100) — both sit at the bottom on mobile,
       so without this the toolbar was drawn on top and clipped/hid the
       property panel whenever it was shown. */
    .sidebar { width: 100%; height: 60vh; height: 60dvh; position: absolute; bottom: 0; left: 0; top: auto; right: auto; transform: translateY(110%); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,0.15); z-index: 110; }
    .sidebar.show { display: flex; transform: translateY(0); }
    .btn-export, .brand { display: none; }
    .element-schedule { top: 70px; bottom: auto; left: 10px; max-height: 150px; width: 220px; background: rgba(255,255,255,0.95); }
    .modal-box { width: 90%; padding: 25px; }

    /* ── Floating tool panels ──────────────────────────────────────────
       Component Library and Wall Straightness panels are built with a
       hardcoded inline width (360px / 330px) and `right:18px`, which
       overflows off-screen on phone/tablet widths. These IDs are set in
       componentLibraryPanel.js / wallStraightness.js; overriding here
       keeps that JS untouched. */
    #component-library-panel,
    #wallcheck-modal {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        top: 74px !important;
        max-height: 70vh !important;
    }
}

/* ---- Layer items v4 ---- */
.layer-item { transition: background 0.15s; }
.layer-item:hover { background: rgba(0,0,0,0.04) !important; }
.layer-item[draggable="true"] { user-select: none; }
.layer-item[draggable="true"]:active { opacity: 0.7; }

/* ---- Sec-* property sections ---- */
#sec-wall, #sec-room, #sec-rect, #sec-poly,
#sec-door, #sec-text, #sec-stairs,
#sec-style, #sec-fill, #sec-thickness { display: none; }

/* ---- Rotation label ---- */
#rot-val { font-weight: 700; min-width: 36px; text-align: right; }

/* ---- Custom thickness input ---- */
#wall-thick-custom { width: 70px !important; }

/* ---- Poly section ---- */
#sec-poly .measurement-box { background: rgba(200,220,255,0.15); border-color: rgba(41,128,185,0.2); }

/* ---- Stair type select ---- */
#stair-type-sel { width: 100%; }

/* ---- Active layer item ---- */
.layer-item-active { background: rgba(166,138,100,0.15) !important; }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM FURNITURE MODAL
═══════════════════════════════════════════════════════════════ */
.furn-cat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.furn-cat-label:first-of-type { margin-top: 4px; }

.furn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.furn-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.16s ease;
    font-size: 10.5px;
    color: var(--text-soft);
    text-align: center;
    user-select: none;
}
.furn-card:hover {
    background: rgba(var(--accent-rgb, 99,102,241), 0.18);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.furn-card:active { transform: scale(0.96); }

.furn-emoji {
    font-size: 22px;
    line-height: 1;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   TILE / TEXTURE PICKER POPUP — PREMIUM
═══════════════════════════════════════════════════════════════ */
.tile-picker-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    z-index: 20000;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.18s ease;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.tile-picker-panel {
    background: #1a1d24;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 24px;
    width: 540px;
    max-width: 96vw;
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6);
    animation: slideUp 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideUp { from { transform: translateY(28px); opacity:0; } to { transform: none; opacity:1; } }

.tile-picker-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.tile-picker-title {
    font-size: 16px; font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: 10px;
}
.tile-picker-close {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: none;
    color: #aaa; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.tile-picker-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

.tile-cat-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: #666;
    margin: 14px 0 8px;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.tile-swatch {
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.16s;
    position: relative;
}
.tile-swatch:hover { border-color: var(--accent); transform: scale(1.04); }
.tile-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.tile-swatch-preview {
    width: 100%; height: 64px;
    border-radius: 8px 8px 0 0;
}
.tile-swatch-label {
    background: rgba(0,0,0,0.55);
    color: #e0e0e0; font-size: 10px;
    padding: 4px 6px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Night toggle premium button */
.night-toggle-btn {
    position: absolute;
    bottom: 70px; right: 16px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a2040, #2a3060);
    border: 1px solid rgba(100,120,255,0.3);
    color: #8090ff;
    font-size: 20px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,60,0.4);
    transition: all 0.2s;
    z-index: 1000;
}
.night-toggle-btn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,0,120,0.5); }
.night-toggle-btn.day { background: linear-gradient(135deg, #f0c040, #e87020); border-color: rgba(255,180,40,0.4); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   FURNITURE PANEL — PREMIUM DARK, NO GLASSMORPHISM
═══════════════════════════════════════════════════════════ */
.furn-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.62);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.furn-overlay[style*="flex"],
.furn-overlay.open { display: flex; }

.furn-panel {
    width: 520px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    background: #111318;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
}

.furn-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    background: #13161e;
}
.furn-panel-title {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #e8eaf0;
    text-transform: uppercase;
}
.furn-panel-close {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.14s;
}
.furn-panel-close:hover { background: rgba(255,60,60,0.2); color: #ff6060; border-color: rgba(255,60,60,0.3); }

.furn-panel-body {
    overflow-y: auto;
    padding: 16px 20px 20px;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.furn-panel-body::-webkit-scrollbar { width: 4px; }
.furn-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.furn-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4a5068;
    margin: 18px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.furn-section-title:first-child { margin-top: 4px; }

.furn-grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 7px;
}

.furn-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px 9px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.07);
    background: #1a1d26;
    cursor: pointer;
    transition: all 0.14s ease;
    user-select: none;
    color: #7a8099;
}
.furn-item-card:hover {
    background: #1f2435;
    border-color: rgba(99,102,241,0.5);
    color: #c8cce8;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.furn-item-card:active { transform: scale(0.95); }

.furn-item-card span {
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    color: inherit;
}

.furn-item-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
}
.furn-item-icon svg {
    width: 100%; height: 100%;
    color: inherit;
}

/* ── Beautiful Auth Modal ─────────────────────────────────────────────── */
.auth-modal-box {
    width: 420px !important; max-width: 95vw;
    padding: 0 !important; overflow: hidden;
    border-radius: 20px !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(166,138,100,0.12) !important;
    margin: auto;
    max-height: 92vh;
    overflow-y: auto;
    background: #ffffff !important;
}
.auth-header {
    background: #ffffff;
    border-bottom: 1px solid #f0ebe3;
    padding: 32px 32px 24px; text-align: center;
}
.auth-logo {
    width: 60px; height: 60px; border-radius: 16px;
    background: #fff;
    border: 1.5px solid rgba(166,138,100,0.3);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 4px 16px rgba(166,138,100,0.12);
}
.auth-title { font-size: 20px; font-weight: 800; color: #1a1510; margin: 0 0 6px; letter-spacing: -0.3px; }
.auth-subtitle { font-size: 12px; color: #9a8870; margin: 0; line-height: 1.4; }
.auth-tabs { display: flex; border-bottom: 1.5px solid #f0ebe3; background: #ffffff; }
.auth-tab {
    flex: 1; padding: 13px; border: none; background: none;
    font-size: 13px; font-weight: 600; color: #9a8870; cursor: pointer;
    border-bottom: 2px solid transparent; transition: all 0.18s;
    font-family: 'Montserrat', sans-serif; letter-spacing: 0.02em;
}
.auth-tab.active { color: #A68A64; border-bottom-color: #A68A64; background: #fff; }
.auth-form { padding: 24px 32px 28px; background: #ffffff; }
.auth-field { margin-bottom: 16px; }
.auth-label {
    display: block; font-size: 11px; font-weight: 700; color: #6a5c48;
    margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em;
}
.auth-input-wrap { position: relative; display: block; }
.auth-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #b0a090; pointer-events: none; z-index: 2; width: 14px; height: 14px; }
.auth-input {
    width: 100%; padding: 11px 44px 11px 40px !important;
    border: 1.5px solid #e8e0d4; border-radius: 10px;
    font-size: 13px; color: #2a2018; background: #ffffff;
    font-family: 'Montserrat', sans-serif;
    transition: border-color 0.15s, box-shadow 0.15s; outline: none; box-sizing: border-box;
    display: block;
}
.auth-input:focus { border-color: #A68A64; box-shadow: 0 0 0 3px rgba(166,138,100,0.12); background: #ffffff; }
.auth-input::placeholder { color: #c8bfb0; }
.auth-eye {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none;
    color: #b0a090; cursor: pointer; padding: 4px; border-radius: 5px;
    display: flex; align-items: center; transition: color 0.14s;
}
.auth-eye:hover { color: #A68A64; }
.auth-error { font-size: 11px; color: #e05050; margin: -8px 0 12px; min-height: 16px; font-weight: 500; }
.auth-submit {
    width: 100%; padding: 13px;
    background: linear-gradient(180deg, #A68A64 0%, #8a6e4c 100%);
    border: none; border-bottom: 3px solid #6e5436;
    border-radius: 12px; color: #fff;
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'Montserrat', sans-serif; letter-spacing: 0.04em;
    transition: all 0.12s; position: relative; top: 0;
    box-shadow: 0 4px 16px rgba(166,138,100,0.3); margin-bottom: 10px;
}
.auth-submit:hover { background: linear-gradient(180deg,#b89a74 0%,#A68A64 100%); top: -1px; }
.auth-submit:active { top: 2px; border-bottom-width: 1px; }
.auth-submit.loading { opacity: 0.75; cursor: wait; }
.auth-cancel {
    width: 100%; padding: 9px; background: none; border: none;
    color: #9a8870; font-size: 12px; cursor: pointer;
    font-family: 'Montserrat', sans-serif; border-radius: 8px; transition: color 0.14s;
}
.auth-cancel:hover { color: #2a2018; }

.preset-btn { padding:4px 8px; border:1.5px solid #e8e0d4; border-radius:6px; font-size:10px; font-weight:600; background:#f5f2ee; cursor:pointer; font-family:Montserrat,sans-serif; color:#5a4a38; transition:background .15s; }
.preset-btn:hover { background:#e8ddd0; border-color:#c8a878; }


/* Floor transition overlay (blur + label) */
#floor-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 7999;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}
#floor-transition-overlay.active { opacity: 1; }
#floor-transition-label {
    background: #fff;
    border: 1.5px solid #e8e0d4;
    border-radius: 14px;
    padding: 14px 28px;
    color: #1a1a2e;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ghost floor below (previous floor shown blurred) */
/* Floor bar is floating pill — no canvas push needed */
/* #container bottom stays default */

/* 3D Floor view selector */
.v3d-floor-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}
.v3d-floor-view-btn {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    color: #333;
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 11px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    transition: all 0.15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}
.v3d-floor-view-btn:hover { background: #f0f0f0; border-color: #bbb; }
.v3d-floor-view-btn.active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }

/* 3D floor selector tab bar */
.v3d-floor-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 3px;
}
.v3d-floor-tab {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    color: #888;
    border: none;
    background: transparent;
    transition: all 0.15s;
    white-space: nowrap;
}
.v3d-floor-tab.active {
    background: #1a1a2e;
    color: #fff;
}
.v3d-floor-tab:hover:not(.active) { background: #f0f0f0; color: #333; }

/* ── Floor+ toolbar button ──────────────────────────────── */
#btn-add-floor-toolbar {
    transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
}
#btn-add-floor-toolbar:hover {
    background: linear-gradient(135deg,rgba(166,138,100,0.22),rgba(26,26,46,0.12)) !important;
    border-color: #A68A64 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(166,138,100,0.2);
}

/* ── Floor manager bar refinement ──────────────────────── */
/* ── Slab banner smooth entry ───────────────────────────── */
#slab-banner button:hover {
    background: rgba(255,255,255,0.25) !important;
}

/* ── v3d sep divider ────────────────────────────────────── */
.v3d-sep {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.12);
    margin: 0 4px;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════
   FLOOR TABS — in toolbar (pill style)
   ════════════════════════════════════════════════ */
#floor-tabs-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 300px;
    flex-shrink: 1;
}
#floor-tabs-wrap::-webkit-scrollbar { display: none; }

.floor-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: rgba(0,0,0,0.04);
    color: #888;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}
.floor-tab:hover {
    background: rgba(0,0,0,0.08);
    color: #444;
}
.floor-tab.active {
    background: #1a1a2e;
    color: #fff;
    border-color: rgba(166,138,100,0.3);
}
.floor-tab .floor-tab-icon { font-size: 12px; line-height: 1; }
.floor-tab .floor-tab-delete {
    display: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.8);
    font-size: 11px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    margin-left: 2px;
}
.floor-tab.active .floor-tab-delete { display: flex; }
.floor-tab .floor-tab-delete:hover { background: rgba(255,60,60,0.6); }

/* Floor transition overlay */
#floor-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 7999;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}
#floor-transition-overlay.active { opacity: 1; }
#floor-transition-label {
    background: #fff;
    border: 1.5px solid #e8e0d4;
    border-radius: 14px;
    padding: 14px 28px;
    color: #1a1a2e;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ghost canvas */
/* Ghost ctrl inline in toolbar */
#ghost-ctrl {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(0,0,0,0.04);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
}

/* Floor+ toolbar button */
#btn-add-floor-toolbar {
    transition: all 0.18s !important;
}
#btn-add-floor-toolbar:hover {
    background: linear-gradient(135deg,rgba(166,138,100,0.2),rgba(26,26,46,0.08)) !important;
    border-color: #A68A64 !important;
    transform: translateY(-1px);
}


/* ── Ghost canvas: scoped to canvas area only ──────────────────
   MUST be absolute+inset:0 within #container, not fixed full screen
   so it never overlaps sidebar/toolbar */
#floor-ghost-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s;
    user-select: none;
}

/* ═══════════════════════════════════════════════════
   FLOOR MANAGER BUTTON & POPUP
   ═══════════════════════════════════════════════════ */
.btn-floors {
    display: flex !important;
    align-items: center;
    gap: 5px;
    padding: 0 12px !important;
    font-weight: 600 !important;
    border: 1.5px solid #ddd !important;
    background: #fff !important;
    color: #111 !important;
    transition: all 0.18s !important;
    max-width: 180px;
}
.btn-floors:hover {
    background: #f4f4f4 !important;
    border-color: #111 !important;
    transform: translateY(-1px);
}
.floor-current-label {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

/* Floor popup rows hover — black & white theme */
.fp-floor-row:hover {
    background: #f2f2f2 !important;
}
.fp-delete-btn:hover {
    color: #fff !important;
    background: #111 !important;
}
.fp-slab-view-btn:hover {
    border-color: #111 !important;
    color: #111 !important;
}
.fp-slab-create-btn:hover {
    background: #333 !important;
}

/* Floor transition overlay — black & white theme */
#floor-transition-overlay {
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(8px);
}
#floor-transition-label {
    background: #fff !important;
    color: #111 !important;
    border: 1.5px solid #e2e2e2 !important;
    border-radius: 14px !important;
    padding: 14px 28px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}

/* Ghost canvas — absolute inside container */
#floor-ghost-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    user-select: none !important;
}

/* Slab modal overlay */
#slab-modal {
    animation: fadeInOverlay 0.2s ease;
}
@keyframes fadeInOverlay { from{opacity:0} to{opacity:1} }

/* ── Line Sub-tool Flyout & Shape Picker Flyout ─────────────── */
.line-flyout-wrap, .shape-flyout-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.line-flyout, .shape-flyout {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    padding: 10px;
    z-index: 99999;
    display: none !important;
    min-width: 200px;
}
.line-flyout.open {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
}
.shape-flyout.open {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
}

.line-flyout-header, .shape-flyout-header {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #86868b;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.line-sub-row {
    display: flex;
    gap: 5px;
}

.line-sub-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
    min-width: 50px;
    transition: background 0.12s;
}
.line-sub-btn:hover { background: #f5f3ef; }
.line-sub-btn.active { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }
.line-sub-btn.active svg { stroke: #fff; }
.line-sub-btn svg { width: 22px; height: 22px; }

.shape-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
.shape-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 4px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 600;
    color: #1d1d1f;
    transition: background 0.12s;
}
.shape-btn:hover { background: #f5f3ef; }
.shape-btn.active { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }
.shape-btn.active svg { stroke: #fff; }
.shape-btn svg { width: 22px; height: 22px; }

.shape-img-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #fafafa;
    border: 1px dashed rgba(0,0,0,0.13);
    border-radius: 9px;
    cursor: pointer;
    margin-top: 2px;
    transition: background 0.12s;
}
.shape-img-upload-row:hover { background: #f0ede8; }
.shape-img-upload-row span { font-size: 10px; font-weight: 600; color: #86868b; }

.btn-flyout-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #1d1d1f;
    height: 36px;
    white-space: nowrap;
    transition: background 0.12s;
    flex-shrink: 0;
}
.btn-flyout-trigger:hover { background: #f5f3ef; }
.btn-flyout-trigger.active { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }
.btn-flyout-trigger.active svg { stroke: #fff; }
.btn-flyout-trigger svg { width: 18px; height: 18px; }
.flyout-arrow { font-size: 8px; opacity: 0.4; margin-left: 1px; }

#sec-shape-image { margin-top: 4px; }
.shape-img-thumb {
    width: 100%; height: 60px; object-fit: cover;
    border-radius: 8px; border: 1px solid #eee;
    display: none; margin-top: 6px;
}

/* ── Component Editor workspace mode ────────────────────────────────────────
   Active while the standalone "Create/Edit Component" canvas (js/tools/
   componentEditor.js) is open — same canvas, snapping, renderer and tool
   FUNCTIONS as the main app (zero duplicated logic). Only the visible
   toolbar changes: the full project toolbar is swapped for a minimal
   black & white one with just Select/Pan/Line/Shapes/Guides/Undo/Redo,
   since project-level tools (New, Trace, Plot, Wall, Door, Window, Column,
   Stair, Split, Furniture, Wall Check, Save, etc.) don't apply here. */
/* Component Editor mode: hide both toolbars — tools are now in the top banner */
.component-editor-mode .toolbar { display: none !important; }
.comp-toolbar { display: none !important; }
/* Push canvas down so it isn't covered by the 54px banner */
.component-editor-mode .workspace { top: 42px !important; height: calc(100% - 42px) !important; }

/* Black & white aesthetic — intentionally no beige/accent colors here,
   to visually separate "editing a component" from the main floor-plan app. */
.comp-toolbar {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 32px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.06);
}
.comp-toolbar-label {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-weight: 600; font-size: 1rem; color: #1d1d1f;
    margin: 0 14px; flex-shrink: 0; letter-spacing: 0.5px;
    border-right: 1px solid rgba(0,0,0,0.12); padding-right: 14px;
}
.comp-toolbar .tool-group { border-right: 1px solid rgba(0,0,0,0.1); }
.comp-toolbar .btn {
    background: #fff; border: 1px solid #1d1d1f; color: #1d1d1f;
}
.comp-toolbar .btn:hover { background: #1d1d1f; color: #fff; }
.comp-toolbar .btn:hover svg { stroke: #fff; }
.comp-toolbar .btn.active { background: #1d1d1f; color: #fff; border-color: #1d1d1f; box-shadow: none; }
.comp-toolbar .btn-flyout-trigger {
    background: #fff; border: 1px solid #1d1d1f; color: #1d1d1f;
}
.comp-toolbar .btn-flyout-trigger:hover { background: #1d1d1f; color: #fff; }
.comp-toolbar .btn-flyout-trigger:hover svg { stroke: #fff; }
.comp-toolbar .btn-flyout-trigger.active { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }

/* ── ✏️ ANNOTATION / FREEHAND DRAW TOOL ──────────────────────────────────────
   Flyout panel, brush buttons, colour swatches, sliders
────────────────────────────────────────────────────────────────────────────── */

/* Flyout wrap — same pattern as .line-flyout-wrap */
.annot-flyout-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* Flyout panel itself — reuses .line-flyout for positioning/animation */
.annot-flyout {
    padding: 12px 14px 10px;
}

/* Brush Type Row */
.annot-brush-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.annot-brush-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px 5px;
    border: 1.5px solid #e8e4dc;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 9px;
    font-weight: 600;
    color: #555;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    letter-spacing: 0.02em;
    line-height: 1;
}
.annot-brush-btn svg { stroke: #555; transition: stroke 0.12s; }
.annot-brush-btn:hover {
    border-color: #1d1d1f;
    background: #f5f3ef;
    color: #1d1d1f;
}
.annot-brush-btn:hover svg { stroke: #1d1d1f; }
.annot-brush-btn.active {
    border-color: #1d1d1f;
    background: #1d1d1f;
    color: #fff;
}
.annot-brush-btn.active svg { stroke: #fff; }

/* Color Palette Grid */
.annot-color-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
}

.annot-color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    border: 1.5px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, border-color 0.1s;
    outline: none;
}
.annot-color-swatch:hover {
    transform: scale(1.18);
    border-color: #1d1d1f;
}
.annot-color-swatch.active {
    border-color: #1d1d1f;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #1d1d1f;
    transform: scale(1.1);
}

/* Slider track style */
#annot-size-slider,
#annot-opacity-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: #e0dbd4;
    outline: none;
    cursor: pointer;
}
#annot-size-slider::-webkit-slider-thumb,
#annot-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1d1d1f;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
#annot-size-slider::-moz-range-thumb,
#annot-opacity-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1d1d1f;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* ── Texture picker grid ── */
.texture-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px 4px;
    border: 1.5px solid #e0e0e0;
    border-radius: 7px;
    background: #fafafa;
    cursor: pointer;
    font-size: 9px;
    font-weight: 600;
    color: #555;
    font-family: Montserrat, sans-serif;
    transition: border-color .15s, background .15s;
    text-align: center;
    line-height: 1.2;
    min-height: 44px;
}
.texture-btn:hover { background: var(--accent-glow); border-color: rgba(166,138,100,0.4); color: #333; }
.texture-btn.active { border-color: var(--accent); background: var(--accent-glow); color: var(--accent); }
.texture-btn svg { display: block; }

/* ── Texture property panel row ── */
.tex-prop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    margin-bottom: 8px;
}
.tex-prop-row:hover { border-color: #333; background: #f5f5f5; }
.tex-prop-row.has-texture { border-color: #222; background: #f8f8f8; }
.tex-prop-swatch {
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #f0f0f0;
    flex-shrink: 0;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.tex-prop-info { flex: 1; min-width: 0; }
.tex-prop-label { display: block; font-size: 11px; font-weight: 700; color: #222; font-family: Montserrat, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tex-prop-hint  { display: block; font-size: 9.5px; color: #aaa; margin-top: 2px; }
.tex-prop-arrow { flex-shrink: 0; }

/* Tint color row */
.tex-color-row { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.tex-color-label { font-size: 9.5px; color: #888; font-weight: 500; flex-shrink: 0; }
.tex-color-swatches { display: flex; gap: 4px; flex: 1; }
.tex-color-swatch {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid transparent;
    cursor: pointer; flex-shrink: 0;
    transition: transform .12s, border-color .12s;
}
.tex-color-swatch:hover { transform: scale(1.18); }
.tex-color-swatch.active { border-color: #222; transform: scale(1.18); }
.tex-color-input {
    width: 24px; height: 24px;
    border-radius: 50%; border: 1.5px solid #ddd;
    padding: 1px; cursor: pointer; flex-shrink: 0;
}

/* ── Texture Modal ── */
#texture-picker-modal .tex-modal-inner {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(740px, 97vw);
    max-height: 91vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    display: flex; flex-direction: column; overflow: hidden;
}
/* Modal header */
.tex-modal-hdr {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px 0;
    flex-shrink: 0;
}
.tex-modal-title { font-size: 15px; font-weight: 800; color: #111; font-family: Montserrat, sans-serif; flex: 1; }
.tex-modal-close {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid #e8e8e8; background: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: #666; transition: background .12s;
}
.tex-modal-close:hover { background: #f0f0f0; }
/* Search bar */
.tex-search-wrap {
    padding: 12px 20px 0;
    flex-shrink: 0;
    position: relative;
}
.tex-search-wrap-inner {
    position: relative;
    display: flex;
    align-items: center;
}
.tex-search-icon-wrap {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    z-index: 1;
}
.tex-search {
    width: 100%; box-sizing: border-box;
    padding: 9px 36px 9px 14px;
    border: 1.5px solid #e2e2e2; border-radius: 10px;
    font-size: 11.5px; font-family: Montserrat, sans-serif;
    color: #222; background: #f6f6f6;
    outline: none; transition: border-color .15s, background .15s;
    height: 38px;
}
.tex-search::placeholder { color: #b0b0b0; }
.tex-search:focus { border-color: #aaa; background: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
.tex-search-clear {
    position: absolute;
    right: 10px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px;
    border-radius: 50%; border: none;
    background: #ddd; color: #666;
    font-size: 11px; line-height: 1;
    cursor: pointer; display: none;
    align-items: center; justify-content: center;
    padding: 0; font-family: sans-serif;
}
.tex-search-clear.visible { display: flex; }
.tex-search-clear:hover { background: #ccc; color: #333; }
/* Category tabs */
.tex-cat-bar {
    display: flex; gap: 0; border-bottom: 1.5px solid #f0f0f0;
    flex-shrink: 0; overflow-x: auto; padding: 0 16px;
    margin-top: 10px;
    scrollbar-width: none;
}
.tex-cat-bar::-webkit-scrollbar { display: none; }
.tex-cat-tab {
    padding: 9px 14px; border: none; border-bottom: 2.5px solid transparent;
    background: none; cursor: pointer;
    font-size: 11px; font-weight: 700; color: #aaa;
    font-family: Montserrat, sans-serif; white-space: nowrap;
    transition: color .14s, border-color .14s;
    margin-bottom: -1.5px;
}
.tex-cat-tab:hover { color: #555; }
.tex-cat-tab.active { color: #111; border-bottom-color: #111; }
/* Grid area */
.tex-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    padding: 16px 18px;
    overflow-y: auto; flex: 1;
}
/* Each texture card */
.tex-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 10px 6px 8px;
    border: 1.5px solid #ebebeb; border-radius: 10px;
    background: #fafafa; cursor: pointer;
    font-size: 10px; font-weight: 700; color: #444;
    font-family: Montserrat, sans-serif; text-align: center;
    transition: border-color .13s, background .13s, transform .1s;
    user-select: none;
}
.tex-card:hover { border-color: #bbb; background: #f3f3f3; transform: translateY(-1px); }
.tex-card.selected { border-color: #111; background: #f0f0f0; color: #111; transform: none; }
.tex-card .tex-thumb {
    width: 64px; height: 48px;
    border-radius: 6px; overflow: hidden;
    border: 1px solid #e8e8e8;
    display: flex; align-items: center; justify-content: center;
    background: #f5f5f5;
    flex-shrink: 0;
}
.tex-card .tex-thumb svg { display: block; }
.tex-card .tex-name { line-height: 1.25; max-width: 86px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Modal footer */
.tex-modal-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-top: 1.5px solid #f0f0f0;
    flex-shrink: 0; gap: 12px;
}
.tex-footer-left { display: flex; align-items: center; gap: 10px; }
.tex-footer-swatch { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #e0e0e0; background: #f0f0f0; overflow: hidden; }
.tex-footer-info .tex-footer-name { font-size: 11.5px; font-weight: 800; color: #111; font-family: Montserrat, sans-serif; }
.tex-footer-info .tex-footer-cat  { font-size: 9.5px; color: #aaa; margin-top: 1px; }
.tex-footer-right { display: flex; align-items: center; gap: 8px; }
.tex-color-group { display: flex; align-items: center; gap: 7px; padding: 6px 10px; background: #f5f5f5; border-radius: 9px; }
.tex-color-group label { font-size: 9.5px; color: #888; font-weight: 600; }
.tex-modal-color-inp { width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid #ddd; padding: 1px; cursor: pointer; }
.tex-btn-remove {
    padding: 8px 14px; border-radius: 9px;
    border: 1.5px solid #e0e0e0; background: #fff;
    color: #666; font-size: 11px; font-weight: 700;
    cursor: pointer; font-family: Montserrat, sans-serif;
    transition: border-color .13s, color .13s;
}
.tex-btn-remove:hover { border-color: #999; color: #333; }
.tex-btn-done {
    padding: 8px 22px; border-radius: 9px;
    border: none; background: #111;
    color: #fff; font-size: 11px; font-weight: 700;
    cursor: pointer; font-family: Montserrat, sans-serif;
    transition: background .13s;
}
.tex-btn-done:hover { background: #333; }

/* ── 🪣 Texture Bucket panel ──────────────────────────────────────────
   Deliberately NOT a modal: no backdrop, no inset:0, no blur. It floats
   over the top-left of the canvas so the rest of the drawing stays fully
   visible and clickable — that's the whole point of a paint-bucket
   workflow (pick once, click many shapes). Same monochrome black/white/
   grey palette as the property-panel texture modal above — intentionally
   no dark-mode variant, keeps it one consistent look everywhere. */
.tex-bucket-panel {
    position: fixed;
    top: 76px; left: 16px;
    width: 300px; max-height: calc(100vh - 100px);
    background: #fff;
    border: 1.5px solid #e5e5e5;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 850; /* above canvas, below true modals (9999) */
    display: flex; flex-direction: column; overflow: hidden;
}
.tex-bucket-panel .tex-modal-hdr { padding: 14px 16px 0; }
.tex-bucket-panel .tex-search-wrap { padding: 10px 16px 0; }
.tex-bucket-panel .tex-cat-bar { padding: 0 12px; }
.tex-bucket-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    padding: 12px 14px;
    max-height: 320px;
}
.tex-bucket-grid .tex-thumb { width: 52px; height: 40px; }
.tex-bucket-panel .tex-modal-footer { padding: 10px 16px; }
.tex-bucket-panel .tex-footer-info .tex-footer-cat { max-width: 150px; line-height: 1.3; }

/* Wall / Floor target toggle */
.tex-bucket-target {
    display: flex; gap: 6px;
    padding: 10px 16px 0;
}
.tex-bucket-target-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 0;
    border: 1.5px solid #e5e5e5; border-radius: 9px;
    background: #fafafa; color: #888;
    font-size: 11px; font-weight: 700; font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: border-color .13s, background .13s, color .13s;
}
.tex-bucket-target-btn:hover { border-color: #bbb; color: #444; }
.tex-bucket-target-btn.active { border-color: #111; background: #111; color: #fff; }

/* Texture vs Color mode toggle — same visual language as the Wall/Floor
   target toggle above so the two rows read as one cohesive control group,
   but a lighter accent tint (instead of solid black) so the two toggles
   remain visually distinct from each other at a glance. */
.tex-bucket-mode {
    display: flex; gap: 6px;
    padding: 12px 16px 0;
}
.tex-bucket-mode-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 0;
    border: 1.5px solid #e5e5e5; border-radius: 9px;
    background: #fafafa; color: #888;
    font-size: 11px; font-weight: 700; font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: border-color .13s, background .13s, color .13s;
}
.tex-bucket-mode-btn:hover { border-color: #c8b088; color: #444; }
.tex-bucket-mode-btn.active { border-color: var(--accent, #A68A64); background: var(--accent, #A68A64); color: #fff; }

/* Plain color palette (Color mode) — replaces the texture grid, same
   click-to-paint footprint so the panel doesn't jump in size. */
.tex-bucket-color-panel { padding: 14px 16px 6px; }
.tex-bucket-color-swatches {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
    margin-bottom: 14px;
}
.tex-bucket-color-swatches .tex-color-swatch { width: 100%; height: 32px; border-radius: 8px; }
.tex-bucket-custom-color-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; background: #f5f5f5; border-radius: 9px;
}
.tex-bucket-custom-color-row label { font-size: 11px; font-weight: 600; color: #666; flex: 1; }

@media (max-width: 720px) {
    .tex-bucket-panel { left: 8px; right: 8px; width: auto; top: 66px; max-height: calc(100vh - 84px); }
}