* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Palette ported from Recordly's dark theme (src/index.css, the `.dark` block).
   Their tokens are bare HSL triples consumed via hsl(); reproduced literally here so the
   values stay comparable to the source. */
:root {
    /* Recordly editor surfaces */
    --editor-bg: #0d0d0f;   /* deepened from hsl(240 6% 7%) so the #161618 panels contrast */
    --editor-header: hsl(240 5% 8.5%);
    --editor-panel: #161618;
    --editor-surface: hsl(240 4% 10%);
    --editor-surface-alt: hsl(240 5% 11%);
    --editor-row: hsl(240 4% 10%);
    --editor-subrow: hsl(240 7% 15%);

    /* Recordly base tokens */
    --foreground: hsl(60 9.1% 97.8%);
    --muted-foreground: hsl(24 5.4% 63.9%);
    --brand-accent: #2563eb;

    /* Keycap rail: face gradient, side edge and top sheen */
    --key-face-top: #242429;
    --key-face-bottom: #1a1a1e;
    --key-edge: #0b0b0d;
    --key-sheen: rgba(255, 255, 255, 0.08);
    --key-add-edge: #9c9c9a;
    --key-add-sheen: rgba(255, 255, 255, 0.6);
    --well-bg: #0e0e10;
    --well-shadow: rgba(0, 0, 0, 0.5);
    --thumb-face-top: #2b2b31;
    --thumb-face-bottom: #1f1f24;
    --thumb-sheen: rgba(255, 255, 255, 0.12);
    --thumb-shadow: rgba(0, 0, 0, 0.5);

    /* Mapped onto this app's existing variable names */
    --bg-primary: var(--editor-bg);
    --bg-secondary: var(--editor-panel);
    --bg-tertiary: var(--editor-surface-alt);
    --border-color: hsl(12 6.5% 15.1%);
    --text-primary: var(--foreground);
    --text-secondary: var(--muted-foreground);
    --accent: var(--brand-accent);
    --accent-hover: #3b82f6;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --accent-subtle: rgba(37, 99, 235, 0.1);
    --accent-subtle-strong: rgba(37, 99, 235, 0.16);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-primary: #f5f5f7;
        --bg-secondary: #ffffff;
        --bg-tertiary: #e8e8ed;
        --border-color: #d2d2d7;
        --text-primary: #1d1d1f;
        --text-secondary: #6e6e73;
        --accent: #007aff;
        --accent-hover: #0056b3;
        --shadow-color: rgba(0, 0, 0, 0.08);
        --shadow-heavy: rgba(0, 0, 0, 0.15);
        --overlay-bg: rgba(0, 0, 0, 0.4);
        --accent-subtle: rgba(0, 122, 255, 0.06);
        --accent-subtle-strong: rgba(0, 122, 255, 0.1);
        --key-face-top: #ffffff;
        --key-face-bottom: #f0f0f3;
        --key-edge: #c4c4ca;
        --key-sheen: rgba(255, 255, 255, 0.9);
        --key-add-edge: #0a0a0c;
        --key-add-sheen: rgba(255, 255, 255, 0.25);
        --well-bg: #e6e6eb;
        --well-shadow: rgba(0, 0, 0, 0.12);
        --thumb-face-top: #ffffff;
        --thumb-face-bottom: #f4f4f6;
        --thumb-sheen: rgba(255, 255, 255, 0.9);
        --thumb-shadow: rgba(0, 0, 0, 0.16);
    }
    .tip-box img { filter: none; }
    .settings-btn img { filter: invert(0.4); }
    .settings-btn:hover img { filter: invert(0); }
}

/* Manual theme overrides */
html[data-theme="light"] {
    --foreground: #1d1d1f;
    --bg-primary: #f5f5f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8e8ed;
    --border-color: #d2d2d7;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --accent: #007aff;
    --accent-hover: #0056b3;
    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-heavy: rgba(0, 0, 0, 0.15);
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --accent-subtle: rgba(0, 122, 255, 0.06);
    --accent-subtle-strong: rgba(0, 122, 255, 0.1);
    --key-face-top: #ffffff;
    --key-face-bottom: #f0f0f3;
    --key-edge: #c4c4ca;
    --key-sheen: rgba(255, 255, 255, 0.9);
    --key-add-edge: #0a0a0c;
    --key-add-sheen: rgba(255, 255, 255, 0.25);
    --well-bg: #e6e6eb;
    --well-shadow: rgba(0, 0, 0, 0.12);
    --thumb-face-top: #ffffff;
    --thumb-face-bottom: #f4f4f6;
    --thumb-sheen: rgba(255, 255, 255, 0.9);
    --thumb-shadow: rgba(0, 0, 0, 0.16);
}

/* The slider chrome is drawn in white tints for the dark palette; flip to black
   tints so the fill and divider stay visible on light surfaces. */
html[data-theme="light"] .control-group.is-slider::after { background: rgba(29, 29, 31, 0.75); box-shadow: none; }
html[data-theme="light"] .tip-box img { filter: none; }
html[data-theme="light"] .settings-btn img { filter: invert(0.4); }
html[data-theme="light"] .settings-btn:hover img { filter: invert(0); }

/* Dark is the default and carries Recordly's palette; :root already defines it, so this
   block only needs to win back over the prefers-color-scheme: light media query. */
html[data-theme="dark"] {
    --bg-primary: var(--editor-bg);
    --bg-secondary: var(--editor-panel);
    --bg-tertiary: var(--editor-surface-alt);
    --border-color: hsl(12 6.5% 15.1%);
    --key-face-top: #242429;
    --key-face-bottom: #1a1a1e;
    --key-edge: #0b0b0d;
    --key-sheen: rgba(255, 255, 255, 0.08);
    --key-add-edge: #9c9c9a;
    --key-add-sheen: rgba(255, 255, 255, 0.6);
    --well-bg: #0e0e10;
    --well-shadow: rgba(0, 0, 0, 0.5);
    --thumb-face-top: #2b2b31;
    --thumb-face-bottom: #1f1f24;
    --thumb-sheen: rgba(255, 255, 255, 0.12);
    --thumb-shadow: rgba(0, 0, 0, 0.5);
    --text-primary: var(--foreground);
    --text-secondary: var(--muted-foreground);
    --accent: var(--brand-accent);
    --accent-hover: #3b82f6;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --accent-subtle: rgba(37, 99, 235, 0.1);
    --accent-subtle-strong: rgba(37, 99, 235, 0.16);
}

html, body {
    /* Prevent browser back/forward gesture from horizontal swipe */
    overscroll-behavior-x: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
}

/* ===== Shell: top bar over [icon rail | inspector | canvas] ===== */
.app-container {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100vh;
    max-height: 100vh;
}

.topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 20px 16px 10px 10px;
    background: #0c0c0d;
}
html[data-theme="light"] .topbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.topbar-left { justify-self: start; min-width: 0; }
.topbar-center { justify-self: center; }
.topbar-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.workspace {
    display: grid;
    grid-template-columns: 76px 340px minmax(0, 1fr);
    /* Second row exists only for the Layers dock under the inspector column */
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
}

.workspace > .icon-rail { grid-row: 1 / 3; }
.workspace > .inspector { grid-row: 1; grid-column: 2; }
.workspace > .canvas-area { grid-row: 1 / 3; grid-column: 3; }

/* Fixed spot, same height as the filmstrip row on the right: the two bottom
   sections share one top divider line. */
#layers-dock {
    grid-row: 2;
    grid-column: 2;
    height: var(--bottom-row-h);
    box-sizing: border-box;
    padding: 10px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    min-height: 0;
}

#layers-dock .layers-panel { height: 100%; max-height: none; }

/* Icon rail */
.icon-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 10px 0;
    margin: 10px 10px 10px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 2px 8px var(--shadow-color);
}

/* Keycap rail: every button is a key with a face, a visible side and a top
   sheen. The active key sits physically pressed down. */
.rail-btn {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--key-edge);
    border-bottom-width: 4px;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--key-face-top), var(--key-face-bottom));
    box-shadow: inset 0 1px 0 var(--key-sheen);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, transform 0.12s, border-bottom-width 0.12s, filter 0.15s;
}

.rail-btn:hover { filter: brightness(1.15); color: var(--text-primary); }
html[data-theme="light"] .rail-btn:hover { filter: brightness(0.97); }
.rail-btn:active,
.rail-btn.active {
    transform: translateY(2px);
    border-bottom-width: 2px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .rail-btn:active,
html[data-theme="light"] .rail-btn.active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.14); }
.rail-btn.active { color: var(--accent); }

/* The add button is always filled: creation is the rail's one standing action.
   The fill is the foreground token: white on dark, ink on light. */
#rail-add-btn {
    background: color-mix(in srgb, var(--foreground) 84%, var(--bg-primary));
    border-color: var(--key-add-edge);
    box-shadow: inset 0 1px 0 var(--key-add-sheen);
    color: var(--bg-primary);
}
#rail-add-btn:hover { background: color-mix(in srgb, var(--foreground) 95%, var(--bg-primary)); color: var(--bg-primary); filter: none; }

/* Utility cluster pinned at the rail's bottom: Settings, Preview, Share. */
.rail-spacer { flex: 1 1 auto; }
.rail-btn.rail-util { width: 36px; height: 36px; }

/* Inspector: the former right sidebar */
.inspector {
    overflow-y: auto;
    padding: 18px 16px 28px;
    margin-top: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    min-height: 0;
}

/* Filmstrip: the screenshot list, now horizontal under the canvas */
:root { --bottom-row-h: 237px; }   /* filmstrip tiles (196) + padding + border */

.filmstrip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    height: var(--bottom-row-h);
    box-sizing: border-box;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    overflow-x: auto;
    overflow-y: hidden;
}

.filmstrip .screenshot-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0;
    overflow: visible;
}

.filmstrip .sidebar-add-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0;
    border: none;
}

.filmstrip .add-btn { white-space: nowrap; }

/* Sidebar styles */
.sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

.sidebar-add-buttons {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
}

.add-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(59, 130, 246, 0.05);
}

.sidebar-footer {
    flex-shrink: 0;
    padding: 16px 20px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.sidebar-right {
    border-right: none;
    border-left: 1px solid var(--border-color);
    transition: opacity 0.3s ease;
}

.sidebar-right.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.sidebar-right .sidebar-header {
    flex-shrink: 0;
}

.sidebar-right .sidebar-header .tab {
    flex: 1 1 0;
    width: 0;
    border-radius: 0;
    padding: 12px 8px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.sidebar-right .sidebar-header .tab.active {
    background: transparent;
    border-bottom-color: var(--accent);
}

.sidebar h2 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.sidebar h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Screenshot list */
.screenshot-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.screenshot-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.screenshot-item:hover {
    background: var(--bg-primary);
}

/* Canvas members hover as one group: solo hover is inert, the JS-set class highlights
   every member of the fused canvas together */
.screenshot-item.pano-member:hover { background: transparent; }
.screenshot-item.pano-member.pano-hover { background: var(--bg-primary); }

.screenshot-item.selected {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.screenshot-thumb {
    width: 24px;
    height: 42px;
    object-fit: cover;
    border-radius: 3px;
    background: var(--bg-primary);
}

.blank-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    border: 1px dashed var(--border-color);
}

/* Screenshot item menu */
.screenshot-menu-wrapper {
    position: relative;
}

.screenshot-menu-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

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

/* Positioned by positionScreenshotMenu() when opened: the filmstrip scrolls and
   therefore clips overflow, so this is moved to <body> and placed with fixed
   coordinates, flipping above the button when there is no room below. */
.screenshot-menu {
    display: none;
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    min-width: 200px;
    z-index: 100;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.screenshot-menu.open {
    display: block;
}

.screenshot-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    transition: background 0.15s;
}

.screenshot-menu-item:hover {
    background: var(--bg-hover);
}

.screenshot-menu-item.danger:hover {
    background: #ff453a20;
    color: #ff453a;
}

.screenshot-menu-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Transfer mode styles */
.transfer-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--accent-subtle-strong);
    border: 1px solid var(--accent);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--accent);
}

.transfer-cancel {
    padding: 4px 10px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.2s;
}

.transfer-cancel:hover {
    background: var(--bg-secondary);
}

.screenshot-item.transfer-target {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.screenshot-item.transfer-source-option {
    cursor: pointer;
    border-color: transparent;
}

.screenshot-item.transfer-source-option:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* Drag handle */
.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    color: var(--text-secondary);
    opacity: 0.4;
    cursor: grab;
    flex-shrink: 0;
}

.drag-handle:hover {
    opacity: 0.8;
}

.screenshot-item:active .drag-handle {
    cursor: grabbing;
}

/* Drag and drop states */
.screenshot-item.dragging {
    opacity: 0.5;
    background: var(--bg-primary);
}

.screenshot-item.drag-insert-after::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

.screenshot-item.drag-insert-before::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

/* Controls */
.control-group {
    margin-bottom: 20px;
}

.control-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.control-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.control-row input[type="range"] {
    flex: 1;
}

.control-row .range-value {
    min-width: 45px;
    text-align: right;
}

.slider-reset-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-row:hover .slider-reset-btn {
    opacity: 0.5;
}

.slider-reset-btn:hover {
    opacity: 1 !important;
    color: var(--accent);
}

input[type="text"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--well-bg);
    border: 1px solid transparent;
    box-shadow: inset 0 2px 4px var(--well-shadow);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: inset 0 2px 4px var(--well-shadow), 0 0 0 3px var(--accent-subtle-strong);
}

input[type="color"] {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--key-edge);
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 7px;
    box-shadow: inset 0 5px 7px -3px rgba(255, 255, 255, 0.16), inset 0 -8px 12px rgba(0, 0, 0, 0.18);
}

input[type="range"] {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-tertiary);
    appearance: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

.range-value {
    min-width: 40px;
    text-align: right;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Button group */
.btn-group {
    display: flex;
    gap: 0;
    background: var(--well-bg);
    box-shadow: inset 0 2px 5px var(--well-shadow);
    padding: 3px;
    border-radius: 10px;
}

.btn-group button {
    flex: 1 1 0;
    width: 0;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-group button.active {
    background: linear-gradient(180deg, var(--thumb-face-top), var(--thumb-face-bottom));
    color: var(--text-primary);
    box-shadow: 0 2px 6px var(--thumb-shadow), inset 0 1px 0 var(--thumb-sheen);
}

.btn-group button:hover:not(.active) {
    color: var(--text-primary);
}

/* Text style bar - compact row with all text formatting options */
.text-style-bar {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 8px;
}

.text-style-bar input[type="number"] {
    width: 52px;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.text-style-bar input[type="number"]::-webkit-outer-spin-button,
.text-style-bar input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.text-style-bar input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 2px;
    background: var(--bg-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.text-style-bar input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.text-style-bar input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.text-style-bar select {
    flex: 1;
    min-width: 70px;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 11px;
    cursor: pointer;
}

.text-style-bar input[type="range"] {
    width: 50px;
    height: 32px;
    margin: 0;
    padding: 0 4px;
    background: var(--bg-primary);
    border-radius: 6px;
    cursor: pointer;
    accent-color: var(--accent);
}

.text-style-bar button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.text-style-bar button:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.text-style-bar button.active {
    background: var(--accent);
    color: white;
}

.text-style-bar button svg {
    width: 14px;
    height: 14px;
}

/* Gradient editor */
.gradient-stops {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gradient-stop {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--well-bg);
    box-shadow: inset 0 2px 4px var(--well-shadow);
    padding: 8px;
    border-radius: 10px;
}

.gradient-stop input[type="color"] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
}

.gradient-stop input[type="number"] {
    flex: 1;
    width: auto;
    background: transparent;
    box-shadow: none;
}
.gradient-stop input[type="number"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle-strong);
}

.gradient-stop span {
    color: var(--text-secondary);
    font-size: 13px;
}

.add-stop-btn {
    padding: 10px;
    background: linear-gradient(180deg, var(--key-face-top), var(--key-face-bottom));
    border: 1px solid var(--key-edge);
    border-bottom-width: 3px;
    box-shadow: inset 0 1px 0 var(--key-sheen);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s, transform 0.12s, border-bottom-width 0.12s, filter 0.15s;
    margin-top: 4px;
}
.add-stop-btn:active {
    transform: translateY(1px);
    border-bottom-width: 1px;
}

.add-stop-btn:hover {
    filter: brightness(1.15);
    color: var(--text-primary);
}
html[data-theme="light"] .add-stop-btn:hover { filter: brightness(0.97); }

/* Canvas area */
.canvas-area {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    background: var(--bg-primary);
    overflow: hidden;
    position: relative;
    min-height: 0;
}

/* The stage row centres whatever mode is active */
.canvas-area > .preview-strip,
.canvas-area > .master-workspace {
    align-self: center;
    justify-self: center;
}

.canvas-area > .preview-strip { padding: 32px; }

.preview-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    transition: transform 0.3s ease-out;
}

.canvas-wrapper {
    position: relative;
    box-shadow: 0 25px 80px var(--shadow-heavy);
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s ease-out, opacity 0.3s;
}

#preview-canvas {
    display: block;
}

/* Fill row — colour, hex, opacity and a visibility toggle on one line, as a design tool
   presents a fill. */
.fill-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* Font + colour side by side at the top of the Text pane */
.font-color-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.font-color-row .font-picker { flex: 1 1 auto; min-width: 0; }
.font-color-row input[type="color"] {
    flex: 0 0 auto;
    width: 42px;
    height: auto;
    padding: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}



/* Multi-select align/distribute row at the top of the properties panel */
.align-row {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.align-row button {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.align-row button:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* Alignment and colour share one row. The generic .btn-group button is fluid
   (flex:1 1 0; width:0), which collapses to nothing in a shrink-to-fit group, so the
   three alignment buttons get fixed even widths with centred icons. */
.text-style-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.text-style-row .btn-group { flex: 0 0 auto; margin-bottom: 0; }
.text-style-row .btn-group button {
    flex: 0 0 auto;
    width: 38px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text-style-row .fill-row { flex: 1 1 auto; min-width: 0; }

.gradient-toggle {
    flex: 0 0 auto;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.gradient-toggle:hover { color: var(--accent); border-color: var(--accent); }
.gradient-toggle.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* input.gradient-angle, not .gradient-angle: the generic input[type="number"] rule is
   (0,1,1) and sets width:100%, so a bare class selector loses the cascade. */
input.gradient-angle {
    flex: 0 0 auto;
    width: 56px;
    padding: 8px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 12px;
    text-align: center;
}
.gradient-angle-unit { align-self: center; color: var(--text-secondary); font-size: 12px; }

.fill-row input[type="color"] {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    flex: 0 0 auto;
}

.fill-row input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    outline: none;
}

.fill-row input[type="number"] {
    width: 44px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 12px;
    text-align: right;
    outline: none;
    -moz-appearance: textfield;
}

.fill-row input[type="number"]::-webkit-inner-spin-button { display: none; }

/* Collapsible inspector sections. The base rule uses space-between, which would strand
   the label mid-row now that a chevron sits before it. */
/* Sections are always open — no fold, no chevron (2026-08-11) */
.section-head { justify-content: flex-start; gap: 2px; }
.section-head .section-reset { margin-left: auto; }
/* A toggle-row that duplicated its section title is hidden; its switch lives in the
   header now (buildInspectorSections hoists it) */
.toggle-row.toggle-row-hoisted { display: none !important; }
.section-head .toggle { margin-left: auto; flex: 0 0 auto; }
.section-head .toggle ~ .section-reset { margin-left: 12px; }
/* A first control label that restates its section title is hidden by
   buildInspectorSections() — the header already says it. */
.control-label.label-redundant { display: none; }

/* Gesture crib in the Master Device pane — the on-canvas hint bar is gone */
.pane-gesture-note {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-primary);
    font-size: 10.5px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ===== Layers panel ===== */
/* Lives at the left of the bottom row in both modes; one node, relocated on switch. */

.layers-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.layers-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
}

.layers-head { cursor: default; }

/* Lock + eye sit on the RIGHT of the row; the name gets the remaining width */
.layers-row .layers-name { flex: 1 1 auto; min-width: 0; }
.layers-row .layers-lock,
.layers-row .layers-eye { flex: 0 0 auto; }
.layers-row .layers-lock {
    background: none;
    border: none;
    padding: 2px;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s;
}
.layers-row:hover .layers-lock,
.layers-row.is-locked .layers-lock { opacity: 1; }
.layers-row.is-locked .layers-lock { color: var(--accent); }
.layers-row.is-locked .layers-name { color: var(--text-secondary); }

.layers-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 4px 6px;
}

.layers-empty {
    padding: 8px 6px;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.7;
}

.layers-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
}

.layers-row:hover { background: var(--bg-tertiary); }
.layers-row.selected { background: var(--accent-subtle-strong); }
.layers-row.is-hidden .layers-name,
.layers-row.is-hidden .layers-thumb { opacity: 0.38; }

/* Drop indicator while restacking */
.layers-row.drop-above::before,
.layers-row.drop-below::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}
.layers-row.drop-above::before { top: -1px; }
.layers-row.drop-below::after { bottom: -1px; }

.layers-eye {
    flex: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    opacity: 0;
    cursor: pointer;
}

.layers-row:hover .layers-eye,
.layers-row.is-hidden .layers-eye { opacity: 1; }

.layers-thumb {
    flex: 0 0 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    color: var(--text-secondary);
}

.layers-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.layers-emoji { font-size: 14px; }

.layers-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layers-row-context { cursor: pointer; }
.layers-row-context .layers-name { color: var(--text-secondary); }
.layers-row-context:hover .layers-name { color: var(--text-primary); }

/* Inline text editor: sits over the canvas exactly where the text is drawn, transparent
   so the artwork stays visible behind the caret. */
.inline-text-editor {
    position: absolute;
    z-index: 3;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    border: 1px solid var(--accent);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.25);
    outline: none;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    caret-color: var(--accent);
}

/* Selection frame layer. Sits exactly over the preview and never takes the pointer, so
   every existing canvas interaction — drag, double-click, scroll-resize — is unaffected. */
#selection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
}

#preview-canvas-left,
#preview-canvas-right {
    display: block;
}

#threejs-container {
    width: 400px;
    height: 700px;
    display: block;
}

#threejs-container canvas {
    display: block;
}

.no-screenshot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-secondary);
    pointer-events: none;
    z-index: 10;
}

.no-screenshot svg {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    color: var(--text-primary);
    opacity: 0.3;
}

.no-screenshot p {
    font-size: 16px;
    color: var(--text-primary);
    opacity: 0.6;
}

/* Export and Output Size Section */
.export-output-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.export-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.output-size-dropdown {
    flex: 1;
    position: relative;
}

.output-size-trigger {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--thumb-face-top), var(--thumb-face-bottom));
    border: none;
    box-shadow: 0 2px 5px var(--thumb-shadow), inset 0 1px 0 var(--thumb-sheen);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.output-size-trigger:hover {
    filter: brightness(1.1);
}
html[data-theme="light"] .output-size-trigger:hover { filter: brightness(0.97); }

.output-size-dropdown.open .output-size-trigger {
    background: var(--well-bg);
    box-shadow: inset 0 2px 4px var(--well-shadow);
    filter: none;
}

.output-size-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.output-size-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.output-size-dims {
    font-size: 10px;
    color: var(--text-secondary);
}

.dropdown-arrow {
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.output-size-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* Opens downward: this used to sit at the bottom of the left sidebar, where opening
   upward was right. In the top bar that put it off the top of the window. */
.output-size-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    min-width: 225px;   /* two options, name and dimensions on one line each */
    max-height: min(60vh, 520px);
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--key-edge);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 40px var(--shadow-heavy);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.99);
    transition: all 0.18s ease-out;
    z-index: 100;
}

.output-size-dropdown.open .output-size-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.output-size-menu .device-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    background: transparent;
}

.output-size-menu .device-option:hover {
    background: var(--bg-tertiary);
}

.output-size-menu .device-option.selected {
    background: var(--accent-subtle-strong);
}

.device-option { display: flex; align-items: center; gap: 9px; }
.device-option .device-option-name { white-space: nowrap; }
.device-option .device-option-size { white-space: nowrap; }
.device-option-icon { flex: 0 0 auto; color: var(--text-secondary); }
.device-option.selected .device-option-icon { color: var(--text-primary); }
.device-option .device-option-name { margin-right: auto; }
.output-size-menu .device-option-name {
    font-size: 12px;
    font-weight: 500;
}

.output-size-menu .device-option-size {
    font-size: 10px;
    color: var(--text-secondary);
}

.output-size-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 6px;
}

.custom-size-inputs {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
}

.custom-size-inputs.visible {
    display: flex;
}

.custom-size-inputs input {
    flex: 1;
    width: 60px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    text-align: center;
}

.custom-size-inputs input:focus {
    outline: none;
    border-color: var(--accent);
}

.custom-size-x {
    color: var(--text-secondary);
    font-size: 12px;
}

.export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: linear-gradient(180deg, var(--thumb-face-top), var(--thumb-face-bottom));
    border: none;
    box-shadow: 0 2px 5px var(--thumb-shadow), inset 0 1px 0 var(--thumb-sheen);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.export-btn:hover {
    filter: brightness(1.1);
}
html[data-theme="light"] .export-btn:hover { filter: brightness(0.97); }
.export-btn:active {
    background: var(--well-bg);
    box-shadow: inset 0 2px 4px var(--well-shadow);
    filter: none;
}

.export-btn.secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 10px;
}

.export-btn.secondary:hover {
    background: var(--border-color);
}

.export-btn svg {
    flex-shrink: 0;
}

.export-all-btn {
    width: 100%;
}

/* Modal styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.modal-overlay.visible .modal {
    transform: scale(1);
}

.modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: #ff453a20;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-icon svg {
    width: 28px;
    height: 28px;
    color: #ff453a;
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.modal-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 24px;
}

.modal-buttons {
    display: flex;
    gap: 12px;
}

.modal-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-btn-cancel:hover {
    background: var(--border-color);
}

.modal-btn-confirm {
    background: #ff453a;
    color: white;
}

.modal-btn-confirm:hover {
    background: #ff6961;
}

.modal-btn-primary {
    background: var(--accent);
    color: white;
}

.modal-btn-primary:hover {
    background: #409cff;
}

.modal-icon-info {
    background: var(--accent-subtle-strong);
}

.modal-icon-info svg {
    color: var(--accent);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Settings Modal */
.settings-modal {
    max-width: 480px;
    text-align: left;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.modal-header .modal-title {
    margin-bottom: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.device-option {
    padding: 12px;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.device-option:hover {
    background: var(--bg-primary);
}

.device-option.selected {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.device-option-name {
    font-size: 12px;
    font-weight: 500;
}

.device-option-size {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
} */

/* Preset backgrounds */
.preset-dropdown {
    position: relative;
}

.preset-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--well-bg);
    border: 1px solid transparent;
    box-shadow: inset 0 2px 4px var(--well-shadow);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.preset-dropdown-trigger:hover {
    border-color: var(--accent);
}

.preset-dropdown-trigger svg {
    transition: transform 0.2s;
}

.preset-dropdown.open .preset-dropdown-trigger svg {
    transform: rotate(180deg);
}

.preset-dropdown-content {
    display: none;
    padding-top: 8px;
}

.preset-dropdown.open .preset-dropdown-content {
    display: block;
    animation: dropdown-in 0.16s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .preset-dropdown.open .preset-dropdown-content { animation: none; }
}

.preset-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    background: var(--well-bg);
    box-shadow: inset 0 2px 5px var(--well-shadow);
    border-radius: 12px;
    padding: 6px;
}

.preset-swatch {
    aspect-ratio: 1;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px var(--thumb-shadow);
    transition: all 0.2s;
    position: relative;
}

.preset-swatch:hover {
    transform: scale(1.04);
}

.preset-swatch.selected {
    border-color: #fff;
    box-shadow: 0 0 0 1px var(--accent);
}

/* Frame color swatches */
.frame-color-swatches {
    display: flex;
    gap: 6px;
}

.frame-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s;
}

.frame-color-swatch:hover {
    transform: scale(1.1);
}

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

/* Tabs */
.tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 8px;
}

.tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.tab svg {
    opacity: 0.7;
    transition: opacity 0.2s;
}

.tab:hover svg {
    opacity: 1;
}

.tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.tab.active svg {
    opacity: 1;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Toggle switch */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.toggle-row.collapsible {
    cursor: pointer;
    user-select: none;
}

.toggle-row.collapsible:hover .toggle-label {
    color: var(--text-primary);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    transition: color 0.15s;
}

.toggle-label .chevron {
    width: 12px;
    height: 12px;
    opacity: 0.5;
    transition: transform 0.2s;
}

.toggle-row.collapsed .chevron {
    transform: rotate(-90deg);
}

.toggle {
    width: 44px;
    height: 24px;
    background: var(--well-bg);
    box-shadow: inset 0 2px 5px var(--well-shadow);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #000), var(--accent));
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #ffffff, #e8e8e6);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.2s;
}

.toggle.active::after {
    left: 22px;
}

/* Divider */
.divider {
    height: 1px;
    background: var(--border-color);
    margin: 20px 0;
}

/* Font picker */
.font-picker {
    position: relative;
}

.font-picker-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--well-bg);
    border: 1px solid transparent;
    box-shadow: inset 0 2px 4px var(--well-shadow);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.font-picker-trigger svg { transition: transform 0.2s; }
.font-picker:has(.font-picker-dropdown.open) .font-picker-trigger svg { transform: rotate(180deg); }

.font-picker-trigger:hover {
    border-color: var(--accent);
}

.font-picker-trigger:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle-strong);
}

.font-picker-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.font-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--key-edge);
    border-radius: 12px;
    box-shadow: 0 16px 40px var(--shadow-heavy);
    z-index: 1000;
    display: none;
    max-height: 400px;
    overflow: hidden;
    flex-direction: column;
}

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

.font-picker-dropdown.open {
    display: flex;
    animation: dropdown-in 0.16s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .font-picker-dropdown.open { animation: none; }
}

.font-picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 8px 8px 0;
    background: var(--well-bg);
    box-shadow: inset 0 2px 4px var(--well-shadow);
    border-radius: 8px;
}

.font-picker-search svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.font-picker-search input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

.font-picker-search input::placeholder {
    color: var(--text-secondary);
}

.font-picker-categories {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

.font-category {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.font-category:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.font-category.active {
    background: linear-gradient(180deg, var(--thumb-face-top), var(--thumb-face-bottom));
    border-color: transparent;
    box-shadow: 0 2px 5px var(--thumb-shadow), inset 0 1px 0 var(--thumb-sheen);
    color: var(--text-primary);
}

.font-picker-list {
    overflow-y: auto;
    max-height: 300px;
    padding: 4px 0;
}

.font-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    cursor: pointer;
    transition: background 0.15s;
}

.font-option:hover {
    background: var(--bg-tertiary);
}

.font-option.selected {
    background: var(--accent-subtle-strong);
}

.font-option-name {
    font-size: 14px;
    line-height: 40px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.font-option-category {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.font-option-loading {
    font-size: 11px;
    color: var(--accent);
}

.font-picker-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Position presets */
.preset-positions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: var(--well-bg);
    box-shadow: inset 0 2px 5px var(--well-shadow);
    border-radius: 12px;
    padding: 6px;
}

.position-preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    background: linear-gradient(180deg, var(--thumb-face-top), var(--thumb-face-bottom));
    border: none;
    box-shadow: 0 2px 5px var(--thumb-shadow), inset 0 1px 0 var(--thumb-sheen);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
}

.position-preset:hover {
    filter: brightness(1.1);
    color: var(--text-primary);
}
html[data-theme="light"] .position-preset:hover { filter: brightness(0.97); }

.position-preset.active {
    box-shadow: 0 2px 5px var(--thumb-shadow), inset 0 1px 0 var(--thumb-sheen), 0 0 0 2px var(--accent);
    color: var(--text-primary);
}

.position-preset svg {
    width: 32px;
    height: 48px;
}

.position-preset span {
    font-size: 9px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.color-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-input-wrapper input[type="text"] {
    flex: 1;
    font-family: monospace;
}

.tip-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    margin-top: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
}

.tip-box img {
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.5;
    filter: invert(1);
}

.tip-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 1.4;
}

.tip-content strong {
    color: var(--text-primary);
    font-weight: 500;
}

.tip-content span {
    opacity: 0.8;
}

/* Project controls */
.project-controls {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.project-dropdown {
    flex: 1;
    position: relative;
}

.project-trigger {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--thumb-face-top), var(--thumb-face-bottom));
    border: none;
    box-shadow: 0 2px 5px var(--thumb-shadow), inset 0 1px 0 var(--thumb-sheen);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.project-trigger:hover {
    filter: brightness(1.1);
}
html[data-theme="light"] .project-trigger:hover { filter: brightness(0.97); }

.project-dropdown.open .project-trigger {
    background: var(--well-bg);
    box-shadow: inset 0 2px 4px var(--well-shadow);
    filter: none;
}
.project-dropdown .dropdown-arrow, .output-size-dropdown .dropdown-arrow { transition: transform 0.2s; }
.project-dropdown.open .dropdown-arrow, .output-size-dropdown.open .dropdown-arrow { transform: rotate(180deg); }

.project-trigger-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.project-trigger-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.project-trigger-meta {
    font-size: 10px;
    color: var(--text-secondary);
}

.project-dropdown .dropdown-arrow {
    color: var(--text-secondary);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.project-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.project-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: calc(320px - 40px); /* Full sidebar width minus padding */
    background: var(--bg-secondary);
    border: 1px solid var(--key-edge);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 40px var(--shadow-heavy);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.99);
    transition: all 0.18s ease-out;
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
}

.project-dropdown.open .project-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.project-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

/* Project images: square icon in the trigger and each row */
.project-trigger-icon,
.project-option-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: cover;
    flex: 0 0 auto;
}
.project-option-icon.placeholder {
    display: inline-block;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}
.project-option .project-option-name { flex: 1 1 auto; min-width: 0; }

.project-option:hover {
    background: var(--bg-tertiary);
}

.project-option.selected {
    background: var(--accent-subtle-strong);
}

.project-option-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-option-meta {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.project-buttons {
    display: flex;
    gap: 4px;
}

.project-btn {
    padding: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

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

.project-btn.danger:hover {
    border-color: #ff453a;
    color: #ff453a;
}

/* Sidebar header with settings */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sidebar-header h2 {
    margin-bottom: 0;
}

.settings-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

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

.sidebar-header-buttons {
    display: flex;
    gap: 4px;
}

.settings-btn img {
    filter: invert(0.6);
    transition: filter 0.2s;
}

.settings-btn:hover img {
    filter: invert(1);
}

@keyframes tooltipPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Textarea with button inside */
.textarea-with-button {
    position: relative;
}

.textarea-with-button textarea {
    padding-right: 36px;
}

/* Export Progress Modal */
.export-progress-modal {
    text-align: center;
}

.export-progress-modal h2 {
    margin-bottom: 8px;
}

.export-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin: 20px 0 12px;
}

.export-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    width: 0%;
    transition: width 0.2s ease-out;
}

#export-progress-status {
    color: var(--text-primary);
    font-size: 14px;
    margin: 0;
}

#export-progress-detail {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0;
}

/* Duplicate Screenshot Modal */
.duplicate-screenshot-modal {
    max-width: 420px;
}

.duplicate-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 24px 0;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 12px;
}

.duplicate-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.duplicate-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.duplicate-thumb {
    width: 80px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.duplicate-name {
    font-size: 11px;
    color: var(--text-secondary);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duplicate-arrow {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.duplicate-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.duplicate-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.duplicate-option:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.duplicate-option svg {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.duplicate-option:hover svg {
    color: var(--accent);
}

.duplicate-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.duplicate-option-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.duplicate-option-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ===== Elements Tab ===== */

.element-add-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    background: var(--well-bg);
    box-shadow: inset 0 2px 5px var(--well-shadow);
    border-radius: 12px;
    padding: 6px;
}

/* The Text pane reuses the same classes for its single Add Text button: full-width row,
   not a square card. */
#text-pane-body .element-add-buttons { grid-template-columns: 1fr; }
#text-pane-body .add-element-btn {
    flex-direction: row;
    aspect-ratio: auto;
    padding: 8px 12px;
    font-size: 12px;
}

/* Four square cards: Image, Emoji, Icon, Callout — icon above the label */
.add-element-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    aspect-ratio: 1 / 1;
    padding: 0;
    background: linear-gradient(180deg, var(--thumb-face-top), var(--thumb-face-bottom));
    border: none;
    box-shadow: 0 2px 5px var(--thumb-shadow), inset 0 1px 0 var(--thumb-sheen);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.add-element-btn:hover:not(:disabled) {
    filter: brightness(1.1);
    color: var(--text-primary);
}
html[data-theme="light"] .add-element-btn:hover:not(:disabled) { filter: brightness(0.97); }
.add-element-btn:active:not(:disabled) {
    background: var(--well-bg);
    box-shadow: inset 0 2px 4px var(--well-shadow);
    filter: none;
}

.add-element-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.elements-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}


.element-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.element-item:hover {
    border-color: var(--border-color);
}

.element-item.selected {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.element-item-thumb {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.element-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.element-item-thumb svg {
    color: var(--text-secondary);
}

.element-item-info {
    flex: 1;
    min-width: 0;
}

.element-item-name {
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.element-item-layer {
    font-size: 10px;
    color: var(--text-secondary);
}

.element-item-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.element-item:hover .element-item-actions {
    opacity: 1;
}

.element-item-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
}

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

.element-item-btn.danger:hover {
    color: #ff453a;
}

.element-properties {
    margin-top: 4px;
}

.element-properties-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

#element-text-properties .text-style-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== Popouts Tab ===== */
.popouts-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}


.popout-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.popout-item:hover {
    border-color: var(--border-color);
}

.popout-item.selected {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.popout-item-thumb {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.popout-item-thumb canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popout-item-info {
    flex: 1;
    min-width: 0;
}

.popout-item-name {
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popout-item-crop {
    font-size: 10px;
    color: var(--text-secondary);
}

.popout-item-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.popout-item:hover .popout-item-actions {
    opacity: 1;
}

.popout-properties {
    margin-top: 4px;
}

.popout-crop-preview {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    cursor: default;
}

/* Canvas drag cursor for elements */
.canvas-wrapper.element-hover {
    cursor: grab;
}

.canvas-wrapper.element-dragging {
    cursor: grabbing;
}

/* ===== Inline Emoji & Icon Pickers ===== */

.inline-picker {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.inline-picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}

.inline-picker-search svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.inline-picker-search input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
}

.inline-picker-search input::placeholder {
    color: var(--text-tertiary);
}

.inline-picker-categories {
    display: flex;
    gap: 2px;
    padding: 6px 6px 0;
    overflow-x: auto;
    flex-wrap: wrap;
}

.picker-cat {
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.picker-cat:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.picker-cat.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.inline-picker-grid {
    overflow-y: auto;
    max-height: 200px;
    padding: 6px;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
}

.picker-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.12s;
}

.picker-grid-item:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
}

.emoji-grid-item {
    font-size: 20px;
    line-height: 1;
}

.icon-grid-item {
    padding: 6px;
}

.icon-grid-item img,
.icon-grid-item svg {
    width: 20px;
    height: 20px;
}

.icon-grid-item .icon-placeholder {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: var(--bg-tertiary);
}

/* Emoji thumbnail in elements list */
.element-item-thumb .emoji-thumb {
    font-size: 18px;
    line-height: 1;
}

/* Panels mode hides the master workspace; master mode hides the panel carousel.
   Only the center column and the sidebar tab set change — the shell stays put. */
.master-workspace {
    display: none;
}

/* One section: the strip stays; the artboard opens inside it. The old master
   workspace is only the stage's parking spot while no canvas is open. */
.master-workspace { display: none; }

/* The live single-screenshot wrapper hides while its screenshot is a member of the
   open canvas — the inline stage takes the group's place. */
.preview-strip > .canvas-wrapper.strip-hidden { display: none; }

.preview-strip .master-stage-wrap {
    align-self: center;
    flex: 0 0 auto;
}

body.master-mode .canvas-area {
    justify-content: flex-start;
    padding: 24px 32px 28px;
}

body.master-mode .master-workspace {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.master-stage-wrap {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border-radius: 10px;
    overflow: hidden;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.02) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.02) 75%);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

#master-stage {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* The guides toggle lives in the topbar and only applies to the artboard. */

#master-guides-toggle.is-off {
    opacity: 0.55;
}

/* The Master tab replaces the panel tabs rather than joining them — five icons plus a
   sixth do not fit the 340px sidebar. */
body:not(.master-mode) .tab-master-only {
    display: none;
}

/* Master mode keeps Background, Text and Elements alongside Master: the artboard has its
   own background, and both tabs edit artboard-space elements. The Artboard tab itself is
   visible in BOTH modes — in Screenshots its panel buttons convert the selected
   screenshot into a canvas. */
body.master-mode .icon-rail .tab:not(.tab-master-only):not([data-tab="elements"]):not([data-tab="background"]):not([data-tab="text"]):not([data-tab="master"]) {
    display: none;
}

/* Outside an open canvas the Artboard pane is just the panel selector: view/delete/
   export need an open artboard, and the Output section head goes with them. */
body:not(.master-mode) #tab-master .master-open-only,
body:not(.master-mode) #tab-master .section-head[data-title="Output"] { display: none !important; }
body.master-mode #tab-master .screenshots-panels-note { display: none; }

/* Settings: "Dim unselected screenshots" off — every strip tile at full opacity */
body.no-dim .preview-strip .strip-tile,
body.no-dim .preview-strip .strip-tile:hover,
body.no-dim .preview-strip .strip-tile.strip-pano,
body.no-dim .preview-strip .strip-tile.strip-pano:hover,
body.no-dim .preview-strip .strip-tile.strip-pano.strip-pano-hover { opacity: 1; }

/* A SELECTED canvas always wears the accent frame — its members compose it from
   per-edge shadows, matching the outline a selected single screenshot gets. */
.preview-strip .strip-tile.strip-pano.strip-pano-selected,
.preview-strip > .canvas-wrapper.strip-pano.strip-pano-selected {
    box-shadow: 0 -2px 0 var(--accent), 0 2px 0 var(--accent);
}
.preview-strip .strip-tile.strip-pano.strip-pano-selected.strip-pano-first,
.preview-strip > .canvas-wrapper.strip-pano.strip-pano-selected.strip-pano-first {
    box-shadow: 0 -2px 0 var(--accent), 0 2px 0 var(--accent), -2px 0 0 var(--accent);
}
.preview-strip .strip-tile.strip-pano.strip-pano-selected.strip-pano-last,
.preview-strip > .canvas-wrapper.strip-pano.strip-pano-selected.strip-pano-last {
    box-shadow: 0 -2px 0 var(--accent), 0 2px 0 var(--accent), 2px 0 0 var(--accent);
}
.preview-strip .strip-tile.strip-pano.strip-pano-selected.strip-pano-first.strip-pano-last,
.preview-strip > .canvas-wrapper.strip-pano.strip-pano-selected.strip-pano-first.strip-pano-last {
    box-shadow: 0 -2px 0 var(--accent), 0 2px 0 var(--accent), -2px 0 0 var(--accent), 2px 0 0 var(--accent);
}

/* Phone-pose preset cards in the master Device pane: the shared position-preset card
   with a landscape artboard glyph instead of a portrait phone glyph */
.pose-card svg {
    width: 52px;
    height: 38px;
}
body.master-no-device .pose-presets { display: none; }

/* Callouts crop a screenshot's own screen image; the artboard has none, so Master shows
   three cards and no callout machinery. */
body.master-mode #add-popout-btn,
body.master-mode .popouts-list,
body.master-mode #popout-properties { display: none !important; }
body.master-mode .element-add-buttons { grid-template-columns: repeat(3, 1fr); }

/* The Text pane is the one home for words in both modes. The text-element block is
   always visible. */

/* No device: the artboard is background and elements only, so everything that poses a
   phone goes away — including the injected section heads. */
body.master-no-device #tab-master-device > :not(.master-device-type) {
    display: none;
}

.master-screen-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.master-screen-upload:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.master-screen-thumb {
    width: 34px;
    height: 60px;
    flex: 0 0 auto;
    border-radius: 5px;
    background: var(--bg-tertiary) center/cover no-repeat;
    border: 1px solid var(--border-color);
}

.master-screen-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.master-screen-name {
    font-size: 12px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-screen-hint {
    font-size: 10.5px;
    color: var(--text-secondary);
}

.master-screen-clear {
    display: none;
    flex: 0 0 auto;
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 5px;
}

.master-screen-clear:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

body.master-has-screen .master-screen-clear {
    display: block;
}

body.master-has-screen .master-screen-hint {
    display: none;
}

/* Row-scoped state for reuses of this pattern outside Master (e.g. the background
   image row), where a body class would be wrong. */
.master-screen-upload.has-image .master-screen-clear { display: block; }
.master-screen-upload.has-image .master-screen-hint { display: none; }

.master-export-btn {
    width: 100%;
    justify-content: center;
}

/* Double-click affordance for the starter phone */
.canvas-wrapper { cursor: default; }
body:not(.master-mode) .canvas-wrapper::after {
    content: 'Drop an image on the phone to add your screenshot';
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 7px;
    background: rgba(10, 10, 11, 0.7);
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.45s ease;
}
body.has-user-screenshot .canvas-wrapper::after { opacity: 0; }

/* ===== Refactored shell: overrides for relocated blocks ===== */

/* Topbar clusters keep their controls compact */
.topbar .project-controls { margin: 0; padding: 0; border: none; display: flex; gap: 10px; align-items: center; width: 406px; }
.topbar .project-dropdown { flex: 0 0 216px; min-width: 0; height: 52px; }
.topbar .sidebar-header-buttons { display: flex; gap: 6px; }
.topbar .sidebar-footer { padding: 0; border: none; background: transparent; }
.topbar .export-output-section { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.topbar .export-row { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.topbar .output-size-dropdown { flex: 0 0 52px; min-width: 0; height: 52px; }
/* The whole store card is a two-faced tile: the WRAPPER rotates (buttons
   flatten preserve-3d in Chrome, so the button itself cannot). The Apple face
   is the button; the Google face is an opaque back layer that covers the
   button's mirror image at 180deg and lets clicks pass through to it. */
.topbar .project-controls { perspective: 600px; }
.topbar .output-size-dropdown {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.topbar .output-size-dropdown:has(.output-size-trigger[data-store="google"]) { transform: rotateY(180deg); }
.output-size-trigger { justify-content: center; padding: 0; }
.output-size-trigger .output-size-info,
.output-size-trigger .dropdown-arrow { display: none; }
.output-size-icon { display: flex; align-items: center; justify-content: center; }
.output-size-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--thumb-face-top), var(--thumb-face-bottom));
    box-shadow: 0 2px 5px var(--thumb-shadow), inset 0 1px 0 var(--thumb-sheen);
    border-radius: 8px;
    color: var(--text-primary);
    transform: rotateY(180deg);
    backface-visibility: hidden;
    pointer-events: none;
}
.topbar .output-size-dropdown:has(.output-size-trigger[data-store="google"]):hover .output-size-back { filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) {
    .topbar .output-size-dropdown { transition: none; }
}

/* Export lives in the left cluster: the accent action closing the row */
.topbar .export-menu-wrap { flex: 1 1 auto; position: relative; }
.topbar .export-all-btn {
    width: 100%;
    height: 52px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}
.topbar .export-all-btn:hover { background: var(--accent-hover); filter: none; }
.topbar .export-all-btn:active { background: var(--accent-hover); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }
.topbar .export-all-btn { white-space: nowrap; }

/* Master mode uses the whole canvas row; the filmstrip stays available */
body.master-mode .canvas-area { padding: 0; }
body.master-mode .master-workspace { padding: 20px 24px 8px; }

/* The inspector scrolls on its own, so tab panes must not fight it */
.inspector .tab-content { display: none; }
.inspector .tab-content.active { display: block; }

.filmstrip.drop-active {
    background: var(--accent-subtle);
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Dropping an image on the canvas or the artboard sets the screen image */
#preview-canvas.drop-active,
#master-stage.drop-active {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.rail-add-wrap { position: relative; }

/* Specificity beats the later .export-menu base so the menu hangs off the
   key itself rather than dropping below the wrap. */
.rail-add-wrap .rail-add-menu {
    top: 0;
    left: calc(100% + 6px);
    right: auto;
}

/* Folded into the project dropdown; the display:flex rule otherwise beats [hidden] */
.project-buttons[hidden] { display: none !important; }

/* The add button stays filled even while its menu is open */
.rail-artboard.active {
    background: color-mix(in srgb, var(--foreground) 78%, var(--bg-primary));
    color: var(--bg-primary);
}

.rail-divider {
    height: 1px;
    margin: 6px 10px;
    background: var(--border-color);
}

/* ===== Panorama linkage ===== */
/* Members of a panorama render fused: no gap between them, one accent frame around the
   run, and a P<n> label on the first member that opens the shared artboard. */
/* Filmstrip members are ALWAYS separated slice tiles — the fused look lives in the
   top preview strip only. Down here the user reads exactly how the canvas cuts into
   deliverable screenshots: slim 2px gutters, each slice its own rounded card, the
   whole group ringed by the shared accent. */
.screenshot-item.pano-member {
    position: relative;
    border-radius: 8px;
    border: 2px solid var(--accent-subtle-strong);
    margin-right: 0 !important;
}
.screenshot-item.pano-member:not(.pano-last) { margin-right: -8px !important; }   /* strip gap 10px − 8 = 2px cut */

/* cover fills the fixed-width tile edge to edge — contain letterboxed light side bars
   into the card (every member shares the aspect, so the crop is identical). */
.screenshot-item.pano-member .screenshot-thumb { object-fit: cover; }

.screenshot-item.pano-active {
    border-color: var(--accent);
}

/* While its artboard is open, the panorama's members grow into a proper slice preview —
   the old master-slices row rebuilt out of the real screenshots: bigger, chrome hidden,
   just the slices under the canvas. */
body.master-mode .screenshot-item.pano-active {
    /* Separated slices with a slim gutter — the artboard is unified up top; down here
       you see exactly how it cuts. Undoes the fused-group styling. */
    margin-right: -8px !important;   /* strip gap 10px − 8 = 2px between slices */
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

body.master-mode .screenshot-item.pano-active.pano-first,
body.master-mode .screenshot-item.pano-active.pano-last {
    border: 1px solid var(--border-color);
    border-radius: 8px;
}


body.master-mode .screenshot-item.pano-active .screenshot-menu-wrapper {
    display: none;   /* a slice preview is not an editing target */
}



/* The Layers panel is the element list; the pane copies were redundant. The nodes
   stay in the DOM because updateElementsList() still writes them. */
#elements-list,
#master-text-list { display: none; }

/* Recent images picker — opened by the Image add-card */
.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px;
}
.recent-image-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    cursor: grab;
    transition: border-color 0.12s, transform 0.12s;
}
.recent-image-thumb:hover { border-color: var(--accent); transform: scale(1.04); }
.image-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 20px);
    margin: 10px 10px 0;
    padding: 9px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}
.image-upload-row:hover { border-color: var(--accent); color: var(--text-primary); }

/* Set-template cards: a vertical stack of full-set strips, AppLaunchpad style —
   each card is the whole set rendered live through the export pipeline. Lives at the
   bottom of the Elements pane, visible in BOTH modes — applying a set first exits an
   open canvas, since the append mutates the active panorama. */
.template-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tpl-set-card {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-primary);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

/* Hover actions: small corner pills, no backdrop — the strip below must stay
   scrollable, so only the buttons themselves take pointer events. */
.tpl-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 2;
}
.tpl-set-card:hover .tpl-actions { opacity: 1; }
.tpl-actions .tpl-btn { pointer-events: auto; }
.tpl-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.tpl-btn.tpl-add { background: var(--accent); color: #fff; }
.tpl-btn.tpl-add:hover { background: var(--accent-hover); }
.tpl-btn.tpl-replace { background: rgba(28, 28, 30, 0.85); color: #fff; }
.tpl-btn.tpl-replace:hover { background: rgba(28, 28, 30, 1); }
.tpl-set-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--shadow-color);
}

/* Fixed-height strips that scroll sideways inside the card: fit-to-width squeezed a
   7-tile set to ~42px per screenshot — unreadable. Height rules, width follows. */
.tpl-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    background: var(--bg-tertiary);
}
.tpl-scroll::-webkit-scrollbar { height: 6px; }
.tpl-scroll::-webkit-scrollbar-thumb { background: rgba(127, 127, 127, 0.35); border-radius: 3px; }
.tpl-strip {
    display: block;
    height: 165px;
    width: auto;
}

.tpl-set-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
}
.tpl-set-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.tpl-set-count { font-size: 11px; color: var(--text-secondary); }

.project-menu-action.danger { color: #ff6b6b; }
.project-menu-action.danger:hover { background: rgba(255, 107, 107, 0.12); }

/* One Export button; its menu fans out to the three export paths */
.export-menu-wrap { position: relative; }

.export-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    padding: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--key-edge);
    border-radius: 12px;
    box-shadow: 0 16px 40px var(--shadow-heavy);
    z-index: 300;
}

.export-menu.visible { display: block; animation: dropdown-in 0.16s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .export-menu.visible { animation: none; }
}

.export-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--text-primary);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.export-menu button:hover { background: var(--bg-tertiary); }
.export-menu button span { font-size: 11px; color: var(--text-secondary); }

/* The + menu: every option shows its panel layout as a mini tray diagram.
   It pops out of the + key: scale grows from the key's edge, not a generic
   slide-down. */
.rail-add-menu { min-width: 236px; transform-origin: -8px 24px; }
.rail-add-menu.visible { animation: pop-from-key 0.2s cubic-bezier(0.25, 1, 0.4, 1.15); }
@keyframes pop-from-key {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rail-add-menu.visible { animation: none; }
}
.rail-add-head {
    padding: 6px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.rail-add-menu button { justify-content: flex-start; gap: 11px; padding: 8px 10px; }
.add-diagram {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    width: 38px;
    height: 28px;
    padding: 3px;
    background: var(--well-bg);
    box-shadow: inset 0 1px 3px var(--well-shadow);
    border-radius: 6px;
}
.add-diagram i {
    flex: 1;
    background: linear-gradient(180deg, var(--thumb-face-top), var(--thumb-face-bottom));
    border-radius: 2px;
    box-shadow: 0 1px 2px var(--thumb-shadow);
    transition: background 0.15s;
}
.rail-add-menu button:hover .add-diagram i { background: var(--accent); }
.export-menu button .add-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 13px;
    color: var(--text-primary);
}
.export-menu button .add-copy span { font-size: 11px; color: var(--text-secondary); }

/* ===== Multi-size export ===== */

.export-sizes-modal { max-width: 460px; }

.export-sizes-presets {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.export-sizes-preset {
    flex: 1;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.export-sizes-preset:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

/* Fixed height so the dialog does not resize as sizes are added to the menu */
.export-sizes-list {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 20px;
    text-align: left;
}

.export-size-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.export-size-row:hover { background: var(--bg-tertiary); }

.export-size-row input { accent-color: var(--accent); }

.export-size-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
}

.export-size-dims {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ===== Shell fixes ===== */

/* Rail buttons must not inherit the old full-width tab-strip sizing */
.icon-rail .tab {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 0;
    gap: 0;
    border: 1px solid var(--key-edge);
    border-bottom-width: 4px;
    background: linear-gradient(180deg, var(--key-face-top), var(--key-face-bottom));
}
.icon-rail .tab svg { width: 18px; height: 18px; }
.icon-rail .tab.active {
    border: 1px solid var(--key-edge);
    border-bottom-width: 2px;
    background: var(--key-face-bottom);
    color: var(--accent);
}

/* The stage row owns its own scroll-free box; the filmstrip is a real second row */
.canvas-area > .preview-strip {
    width: 100%;
    max-height: 100%;
    padding: 24px;
    overflow: visible;
}

.filmstrip .screenshot-item {
    width: 84px;
}

/* ===== Filmstrip items =====
   A tile is: thumbnail, name, menu. Heights are fixed rather than flexible because a
   tall screenshot otherwise eats the whole tile and squeezes the name to nothing.

   Budget, with a 176px strip: 176 - 24 (strip padding) = 152 tile
                               152 - 16 (tile padding) - 4 (border) = 132 content
                               132 = 66 thumb + 4 + 30 info + 4 + 28 menu

   Note .screenshot-thumb is an <img> for a real screenshot but a <div> for a blank one,
   so it must be styled to work as both. */
.filmstrip {
    align-items: center;
    height: var(--bottom-row-h);
    max-height: var(--bottom-row-h);
}

.filmstrip .screenshot-list { align-items: center; }

/* Every tile is the big image-first card — the slice-preview look, always. The only
   chrome is the ⋮ menu overlaid on the image; names live in its menu-less tooltip. */
.filmstrip .screenshot-item {
    position: relative;
    flex: 0 0 auto;
    width: 104px;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 4px;
    margin: 0;
}

.filmstrip .drag-handle { display: none; }

.filmstrip .screenshot-thumb {
    flex: 0 0 auto;
    width: 100%;
    height: 196px;
    border-radius: 6px;
    object-fit: contain;
    overflow: hidden;
}

.filmstrip .screenshot-menu-wrapper {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
}

.filmstrip .screenshot-menu-btn {
    background: rgba(10, 10, 11, 0.55);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
}

.filmstrip .screenshot-menu-btn:hover { background: rgba(10, 10, 11, 0.8); }

/* The blank-screen placeholder variant is a div wrapping an svg */
.filmstrip div.screenshot-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
}

.filmstrip .screenshot-menu-wrapper {
    flex: 0 0 auto;
    height: 28px;
    align-self: flex-end;
}

.filmstrip .sidebar-add-buttons { align-items: center; }

/* ===== Recordly-style inspector chrome ===== */

/* Section headers: small-caps, letter-spaced, with a per-section Reset */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0 12px;
    padding-bottom: 2px;
}

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

.section-head > span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.section-reset {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.85;
}

.section-reset:hover { opacity: 1; text-decoration: underline; }

/* Filled slider rows, matching Recordly's SliderControl exactly:

     root    h-10 rounded-xl bg-editor-bg/80 px-1.5 overflow-hidden
     fill    inset-y-[3px] left-[3px] rounded-[10px] bg-foreground/[0.08]
             shadow-[0_4px_10px_0_rgba(0,0,0,0.18)]
             width: calc(var(--slider-pct) * (100% - 6px))
     divider top/bottom 18%, w-2px, bg-foreground/95,
             shadow-[0_0_10px_rgba(37,99,235,0.28)]
             left: calc(var(--slider-pct) * (100% - 6px) - 6px)
     label   flex-1 pl-3 text-[12px] font-medium text-muted-foreground
     value   pr-3 text-[12px] font-medium tabular-nums text-foreground

   The fill is white at 8%, NOT an accent tint -- the only blue is the divider's glow.
   We keep a real <input type="range"> underneath (transparent, full-bleed) instead of
   Recordly's hand-rolled pointer handling, so keyboard support comes for free. */
.control-group.is-slider {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: 8px;
    padding: 0 6px;
    background: var(--well-bg);
    box-shadow: inset 0 2px 5px var(--well-shadow);
    border-radius: 12px;
    overflow: hidden;
    user-select: none;
}

/* Filled portion: the raised thumb surface sliding in the groove */
.control-group.is-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(var(--slider-pct, 0) * (100% - 6px));
    border-radius: 10px;
    background: linear-gradient(180deg, var(--thumb-face-top), var(--thumb-face-bottom));
    box-shadow: 0 2px 5px var(--thumb-shadow), inset 0 1px 0 var(--thumb-sheen);
    pointer-events: none;
}

/* Ridge line at the fill edge, with the blue glow */
.control-group.is-slider::after {
    content: '';
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: calc(var(--slider-pct, 0) * (100% - 6px) - 6px);
    width: 2px;
    border-radius: 999px;
    background: rgba(250, 250, 249, 0.95);
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.28);
    pointer-events: none;
    z-index: 2;
}

.control-group.is-slider > .control-label {
    position: relative;
    z-index: 3;
    flex: 1;
    margin: 0;
    padding-left: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.control-group.is-slider .control-row { display: contents; }

.control-group.is-slider input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 1;
}

.control-group.is-slider .range-value {
    position: relative;
    z-index: 3;
    padding-right: 12px;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
    pointer-events: auto;
    cursor: text;
}
.control-group.is-slider .range-value:hover { text-decoration: underline; text-underline-offset: 3px; }
.range-value-editor {
    width: 52px;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--foreground);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.control-group.is-slider .slider-reset-btn {
    position: relative;
    z-index: 4;
    margin-right: 6px;
}

/* ===== Master Layout: artboard fills the column, slices own the bottom row =====
   In master mode the screenshot filmstrip is replaced by the sliced panels, and the
   workspace spans both canvas rows so the artboard gets everything that is left. */

/* The filmstrip is the bottom row in BOTH modes — the fused member tiles are the
   live slice preview, so Master no longer has its own slices row. */

body.master-mode .canvas-area {
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
}

body.master-mode .master-workspace {
    grid-row: 1 / -1;
    align-self: stretch;
    justify-self: stretch;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Flush against the inspector: no inset, no rounding, no side gutters */
body.master-mode .master-stage-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
}

/* The sliced panels take over the bottom row, taller than the filmstrip was */

body.master-mode .canvas-area {
    grid-template-rows: minmax(0, 1fr);
}

/* Startup self-check panel — visible failure beats a blank canvas */
.app-error-panel {
    display: none;
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    max-width: min(560px, calc(100% - 32px));
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #7f1d1d;
    background: rgba(69, 10, 10, 0.92);
    color: #fecaca;
    font-size: 12px;
    line-height: 1.5;
}

.app-error-panel.visible { display: block; }
.app-error-row + .app-error-row { margin-top: 8px; }
.app-error-row strong { display: block; color: #fee2e2; font-weight: 600; }
.app-error-row span { display: block; opacity: 0.85; font-family: ui-monospace, monospace; font-size: 11px; }

/* The carousel starts at the left of the canvas column instead of being centred, so a
   short screenshot set does not leave the left half empty. */
.canvas-area > .preview-strip {
    justify-content: flex-start;
    padding-left: 32px;
}

/* Gradient presets are always visible rather than behind a disclosure */
.preset-open {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 2px 2px;
}

/* "New Project" action at the foot of the project dropdown */
.project-menu-divider {
    height: 1px;
    margin: 6px 0;
    background: var(--border-color);
}

.project-menu-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.project-menu-action:hover { background: var(--bg-tertiary); }
.project-menu-action svg { flex: 0 0 auto; opacity: 0.75; }

/* Transient readout for scroll-to-resize */
.scroll-resize-badge {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 40;
    padding: 6px 11px;
    border-radius: 7px;
    background: rgba(10, 10, 11, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.scroll-resize-badge.visible { opacity: 1; }
.scroll-resize-badge b { color: #fff; font-weight: 600; margin-right: 4px; }

/* ===== Horizontal screenshot strip =====
   Replaces the 5-slot carousel: every screenshot is a tile in document order, the
   selected one being .canvas-wrapper. Nothing is absolutely positioned, so selecting
   moves only the outline. */
.canvas-area > .preview-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    max-height: 100%;
    padding: 24px 32px;
    overflow-x: auto;
    overflow-y: hidden;
}

.preview-strip .strip-tile {
    flex: 0 0 auto;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.55;
    box-shadow: 0 20px 60px var(--shadow-heavy);
    transition: opacity 0.18s;
}

.preview-strip .strip-tile:hover { opacity: 0.85; }

/* Canvas members in the TOP strip fuse into one continuous image: the 12px strip gap is
   cancelled between them, inner corners squared, and members share full opacity so the
   artboard reads as a whole rather than dimmed neighbours. */
/* -13 = the 12px strip gap plus 1px of true OVERLAP: the next tile paints over the
   sibling's last column, so its antialiased edge blends with opaque neighbouring
   content instead of letting the dark strip background bleed through as a seam at
   fractional device positions. */
.preview-strip .strip-pano:not(.strip-pano-last) { margin-right: -13px; }
/* Unselected, a canvas dims exactly like any other tile — as one unit */
.preview-strip .strip-tile.strip-pano { box-shadow: none; }
/* Hover treats the fused group as ONE: individual member hover is inert, the JS-set
   group class lifts every member together */
.preview-strip .strip-tile.strip-pano:hover { opacity: 0.55; }
.preview-strip .strip-tile.strip-pano.strip-pano-hover { opacity: 0.85; }
.preview-strip .strip-tile.strip-pano.strip-pano-selected { opacity: 1; }
.preview-strip .strip-pano:not(.strip-pano-first) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.preview-strip .strip-pano:not(.strip-pano-last) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* A canvas has no per-member selection: the unit is the whole group, so a selected
   member shows NO blue focus stroke — in the top strip or the filmstrip. */
.preview-strip > .canvas-wrapper.strip-pano {
    outline: none;
    border-radius: 0;
    /* its drop shadow otherwise paints a dark band onto the adjacent slice */
    box-shadow: none;
}

.filmstrip .screenshot-item.pano-member.selected {
    border-color: var(--accent-subtle-strong);
    background: transparent;
    box-shadow: none;
}
.preview-strip .strip-tile canvas { display: block; }

/* The selected tile is the live canvas; outline it so the selection is obvious.
   The OPEN canvas stage sits inline in the strip the same way, so it wears the same
   stroke: without it a selected canvas was the one thing with no selection cue. */
.preview-strip > .canvas-wrapper,
.preview-strip .master-stage-wrap {
    flex: 0 0 auto;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Visible scrollbar on the preview strip: with several screenshots the only cue that
   more exist off-screen was the clipping itself. */
.canvas-area > .preview-strip::-webkit-scrollbar { height: 16px; }
.canvas-area > .preview-strip::-webkit-scrollbar-track {
    background: rgba(250, 250, 249, 0.04);
    border-radius: 999px;
}
.canvas-area > .preview-strip::-webkit-scrollbar-thumb {
    background: rgba(250, 250, 249, 0.26);
    border-radius: 999px;
    border: 4px solid transparent;
    background-clip: content-box;
}
.canvas-area > .preview-strip::-webkit-scrollbar-thumb:hover {
    background: rgba(250, 250, 249, 0.42);
    background-clip: content-box;
}

/* Keep two-finger horizontal swipes inside these strips rather than triggering the
   browser's back/forward navigation. This replaces a preventDefault that was also
   cancelling the scroll itself. */
.canvas-area > .preview-strip,
.filmstrip {
    overscroll-behavior-x: contain;
}

/* Deliberately no `scrollbar-width` / `scrollbar-color`: when the standard properties are
   present they take precedence over the ::-webkit-scrollbar rules below, which leaves the
   macOS overlay scrollbar in place -- it takes no layout space and fades out, so the
   custom sizing never appears. */

/* The bottom filmstrip gets the same visible scrollbar */
.filmstrip::-webkit-scrollbar { height: 12px; }
.filmstrip::-webkit-scrollbar-track { background: transparent; }
.filmstrip::-webkit-scrollbar-thumb {
    background: rgba(250, 250, 249, 0.22);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}
.filmstrip::-webkit-scrollbar-thumb:hover {
    background: rgba(250, 250, 249, 0.36);
    background-clip: content-box;
}

/* ===== Filmstrip reordering =====
   Drop indicators are vertical bars between tiles; the base rules draw horizontal ones
   for the old vertical sidebar list. */
.filmstrip .screenshot-item.drag-insert-after::after {
    top: 4px;
    bottom: 4px;
    left: auto;
    right: -7px;
    width: 3px;
    height: auto;
    border-radius: 2px;
}

.filmstrip .screenshot-item.drag-insert-before::before {
    top: 4px;
    bottom: 4px;
    left: -7px;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 2px;
}

.filmstrip .screenshot-item.dragging {
    opacity: 0.4;
}

/* The whole tile is the drag handle now that the grip dots are hidden */
.filmstrip .screenshot-item { cursor: grab; }
.filmstrip .screenshot-item:active { cursor: grabbing; }

/* Headline block panel rules removed 2026-08-11; text is elements now. */

/* Alignment bar: same chrome as the style bar, three equal buttons */
.text-align-bar { justify-content: flex-start; }
.text-align-bar button { flex: 1; }

/* A dragged element hovering another screenshot's tile: where it will land */
.element-drop-target {
    outline: 2px dashed var(--accent) !important;
    outline-offset: -2px;
}


/* The guides eye only means something on the open artboard; Screenshots-mode centre
   guides are drag-only with no toggle. */
body:not(.master-mode) .master-only-btn { display: none; }

/* Warning banners pinned into the topbar centre */
#readonly-banner, #save-error-banner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    z-index: 50;
    pointer-events: none;
    white-space: nowrap;
}
#readonly-banner { background: rgba(234, 179, 8, 0.15); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.4); }
#save-error-banner { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.45); }
.topbar { position: relative; z-index: 50; }

/* ===== App Store preview (full page, three surfaces) ===== */
.modal-overlay.sp-fullpage {
    align-items: stretch;
    justify-content: stretch;
    background: #f5f5f7;   /* the App Store's own light canvas */
    backdrop-filter: none;
    overflow-y: auto;
}
.sp-inner { width: 100%; margin: 0 auto; padding: 28px 44px 80px; }
.sp-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 22px; margin-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sp-head-title { font-size: 20px; font-weight: 700; color: #1d1d1f; }
.sp-head-hint { font-size: 12.5px; color: #6e6e73; margin-top: 3px; }
.sp-close-btn {
    background: rgba(0, 0, 0, 0.06); color: #1d1d1f;
    border: none; border-radius: 8px; padding: 8px 16px;
    font-size: 13px; cursor: pointer;
}
.sp-close-btn:hover { background: rgba(0, 0, 0, 0.12); }
.sp-top {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 44px;
    align-items: stretch;   /* both panels end on the same line */
    margin-bottom: 52px;
}
.sp-top .sp-section { display: flex; flex-direction: column; }
.sp-top .sp-panel { flex: 1; }
@media (max-width: 1100px) { .sp-top { grid-template-columns: 1fr; } }

/* flat store panels — no bezels, the content takes the room */
.sp-panel {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    color: #111;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.10);
    border: 1px solid #e8e8ed;
    padding-top: 8px;
}
.sp-section h3 {
    font-size: 13px; font-weight: 700; letter-spacing: 0.4px;
    color: #1d1d1f; margin-bottom: 14px;
}
.sp-section h3 span { display: block; font-weight: 500; font-size: 11.5px; color: #6e6e73; margin-top: 2px; }
.sp-section-wide { flex-basis: 100%; }

/* --- phone frames --- */


/* search surface */
.sp-searchrow { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; border-bottom: 1px solid #ececec; }
.sp-searchbar {
    flex: 1; background: #eeeef0; border-radius: 10px;
    padding: 8px 12px; font-size: 15px; color: #333;
    display: flex; align-items: center; gap: 4px;
}
.sp-searchbar .sp-clear { margin-left: auto; color: #8e8e93; }
.sp-cancel { color: #0a84ff; font-size: 15px; }
.sp-result { display: flex; gap: 12px; padding: 16px 16px 12px; align-items: center; }
.sp-icon { width: 104px; height: 104px; border-radius: 24px; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,0.12); flex: 0 0 auto; }
.sp-icon-sm { width: 72px; height: 72px; border-radius: 16px; }
.sp-icon-blank { background: linear-gradient(135deg, #dfe3ea, #b9c0cc); }
.sp-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sp-name { font-size: 18px; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-sub { font-size: 13px; color: #86868b; margin-top: 2px; }
.sp-stars { color: #f7b500; font-size: 12px; margin-top: 4px; }
.sp-stars i { color: #86868b; font-style: normal; }
.sp-getcol { text-align: center; flex: 0 0 auto; }
.sp-getcol small { display: block; color: #86868b; font-size: 9px; margin-top: 4px; line-height: 1.3; }
.sp-get { background: #eeeef0; color: #0a84ff; font-weight: 700; font-size: 14px; padding: 5px 22px; border-radius: 999px; display: inline-block; }
.sp-triple { display: flex; gap: 8px; padding: 4px 16px 20px; }
.sp-triple-shot { flex: 1; min-width: 0; border-radius: 10px; border: 1px solid #e5e5ea; }

/* product page surface */
.sp-header { display: flex; gap: 14px; padding: 10px 20px 4px; }
.sp-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.sp-header .sp-get { background: #0a84ff; color: #fff; }
.sp-share { color: #0a84ff; font-size: 18px; }
.sp-meta { display: flex; padding: 14px 20px 6px; border-bottom: 1px solid #ececec; margin-bottom: 14px; }
.sp-meta > div { flex: 1; text-align: center; color: #86868b; font-size: 11px; display: flex; flex-direction: column; gap: 2px; }
.sp-meta b { font-size: 15px; color: #55555a; }
.sp-carousel { display: flex; gap: 12px; padding: 8px 24px 20px 32px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 32px; }
.sp-carousel-shot { flex: 0 0 auto; height: min(56vh, 620px); border-radius: 16px; border: 1px solid #e5e5ea; scroll-snap-align: start; }
.sp-desc { padding: 4px 20px 40px; }
.sp-desc i { display: block; height: 10px; border-radius: 5px; background: #ececf0; margin-bottom: 8px; }

/* desktop surface */
.sp-mac {
    background: #fff;
    border: 1px solid #e8e8ed;
    border-radius: 18px;
    overflow: hidden;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.10);
}
.sp-mac-hero {
    display: flex; gap: 30px; align-items: center;
    padding: 44px 48px;
    background: linear-gradient(120deg, #f4f4f6, #ebebef 60%);
}
.sp-mac-icon { width: 150px; height: 150px; border-radius: 34px; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,0.4); flex: 0 0 auto; }
.sp-mac-title h2 { font-size: 30px; font-weight: 700; margin: 0 0 4px; }
.sp-mac-sub { font-size: 15px; color: #55555a; }
.sp-mac-free { font-size: 13px; color: #86868b; margin-top: 6px; }
.sp-mac-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.sp-mac-btn { background: #0a84ff; color: #fff; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 999px; }
.sp-mac-share { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.08); display: inline-flex; align-items: center; justify-content: center; }
.sp-mac-info {
    display: flex; padding: 20px 48px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sp-mac-info > div { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.sp-mac-info span { font-size: 10.5px; color: #86868b; letter-spacing: 0.6px; }
.sp-mac-info b { font-size: 19px; font-weight: 600; color: #48484d; }
.sp-mac-shots {
    display: flex; gap: 22px; padding: 34px 48px 44px;
    overflow-x: auto;
}
.sp-mac-shot {
    flex: 0 0 auto;
    width: calc((100vw - 88px - 96px - 66px) / 4.3);   /* page padding + panel padding + gaps */
    max-width: 460px;
    height: auto;
    border-radius: 22px;
}

/* --- preview v3: frames, editing, rivals, squint, lightbox, tools --- */

.sp-head-actions { display: flex; gap: 10px; align-items: center; }
.sp-tool-btn {
    background: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
    border: none; border-radius: 8px;
    padding: 8px 14px; font-size: 12.5px; cursor: pointer;
}
.sp-tool-btn:hover { background: rgba(0, 0, 0, 0.12); }
.sp-tool-btn.active { background: var(--accent); color: #fff; }


.sp-edit { border-bottom: 1px dashed transparent; cursor: text; outline: none; border-radius: 3px; }
.sp-edit:hover { border-bottom-color: rgba(10, 132, 255, 0.55); }
.sp-edit:focus { background: rgba(10, 132, 255, 0.08); border-bottom-color: #0a84ff; }

.sp-rival { opacity: 0.55; }
.sp-rival .sp-triple { padding-bottom: 14px; }
.sp-bar { height: 12px; border-radius: 6px; background: #dcdce1; margin: 3px 0; }
.sp-bar-thin { height: 8px; background: #e7e7ec; }
.sp-rival-shot { flex: 1; aspect-ratio: 1320 / 2868; border-radius: 10px; }
.sp-result-mine { position: relative; }

.sp-panel, .sp-mac { transition: filter 0.25s ease; }

.sp-zoomable { cursor: zoom-in; }

#sp-lightbox {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.88);
    display: flex; align-items: center; justify-content: center;
    gap: 22px;
    z-index: 2000;
    cursor: zoom-out;
}
#sp-lightbox .sp-lb-stage canvas {
    max-height: 92vh; width: auto;
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    cursor: default;
}
.sp-lb-arrow {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); color: #fff;
    border: none; font-size: 24px; cursor: pointer;
    flex: 0 0 auto;
}
.sp-lb-arrow:hover { background: rgba(255, 255, 255, 0.22); }


/* ===== preview dark store theme (#sp-theme toggle) ===== */
.sp-fullpage.sp-dark { background: #0b0b0d; }
.sp-fullpage.sp-dark .sp-head { border-bottom-color: rgba(255, 255, 255, 0.1); }
.sp-fullpage.sp-dark .sp-head-title,
.sp-fullpage.sp-dark .sp-section h3 { color: #f5f5f7; }
.sp-fullpage.sp-dark .sp-tool-btn,
.sp-fullpage.sp-dark .sp-close-btn { background: rgba(255, 255, 255, 0.1); color: #f5f5f7; }
.sp-fullpage.sp-dark .sp-tool-btn:hover,
.sp-fullpage.sp-dark .sp-close-btn:hover { background: rgba(255, 255, 255, 0.18); }
.sp-fullpage.sp-dark .sp-panel,
.sp-fullpage.sp-dark .sp-mac {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.09);
    color: #f5f5f7;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.5);
}
.sp-fullpage.sp-dark .sp-searchbar { background: #2c2c2e; color: #e5e5ea; }
.sp-fullpage.sp-dark .sp-sub,
.sp-fullpage.sp-dark .sp-getcol small,
.sp-fullpage.sp-dark .sp-stars i { color: #98989e; }
.sp-fullpage.sp-dark .sp-get { background: #2c2c2e; }
.sp-fullpage.sp-dark .sp-header .sp-get { background: #0a84ff; }
.sp-fullpage.sp-dark .sp-meta { border-bottom-color: rgba(255, 255, 255, 0.1); }
.sp-fullpage.sp-dark .sp-meta b { color: #d5d5da; }
.sp-fullpage.sp-dark .sp-searchrow { border-bottom-color: rgba(255, 255, 255, 0.1); }
.sp-fullpage.sp-dark .sp-triple-shot,
.sp-fullpage.sp-dark .sp-carousel-shot { border-color: rgba(255, 255, 255, 0.12); }
.sp-fullpage.sp-dark .sp-desc i { background: #2c2c2e; }
.sp-fullpage.sp-dark .sp-bar { background: #3a3a3c; }
.sp-fullpage.sp-dark .sp-bar-thin { background: #303032; }
.sp-fullpage.sp-dark .sp-rival-shot { background: #2c2c2e !important; }
.sp-fullpage.sp-dark .sp-rival .sp-icon-sm { background: linear-gradient(135deg, #3a3a3c, #2c2c2e) !important; }
.sp-fullpage.sp-dark .sp-mac-hero { background: linear-gradient(120deg, #242426, #1a1a1c 60%); }
.sp-fullpage.sp-dark .sp-mac-sub { color: #d5d5da; }
.sp-fullpage.sp-dark .sp-mac-share { background: rgba(255, 255, 255, 0.12); }
.sp-fullpage.sp-dark .sp-mac-info { border-color: rgba(255, 255, 255, 0.1); }
.sp-fullpage.sp-dark .sp-mac-info b { color: #d5d5da; }


.sp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    padding: 8px 0;
}
.sp-icon-btn svg { display: block; }


.sp-head-brand { display: flex; align-items: center; gap: 12px; }
.sp-head-logo { width: 34px; height: 34px; border-radius: 8px; }


/* Soft scrollbars inside the preview — the default dark bars read as black slabs on
   the white store panels. */
.sp-fullpage .sp-carousel,
.sp-fullpage .sp-mac-shots,
.sp-fullpage { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.18) transparent; }
.sp-fullpage ::-webkit-scrollbar { height: 8px; width: 8px; }
.sp-fullpage ::-webkit-scrollbar-track { background: transparent; }
.sp-fullpage ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.14);
    border-radius: 4px;
}
.sp-fullpage ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.24); }
.sp-fullpage.sp-dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }
.sp-fullpage.sp-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
.sp-fullpage.sp-dark .sp-carousel,
.sp-fullpage.sp-dark .sp-mac-shots { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }


.sp-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: transparent; border: none; border-radius: 8px;
    color: #1d1d1f; cursor: pointer;
}
.sp-back:hover { background: rgba(0, 0, 0, 0.06); }
.sp-fullpage.sp-dark .sp-back { color: #f5f5f7; }
.sp-fullpage.sp-dark .sp-back:hover { background: rgba(255, 255, 255, 0.1); }

/* checkpoints modal */


/* the export progress modal must sit above the full-page preview */
#export-progress-modal { z-index: 3000; }

/* preview reorder drop markers */
.sp-carousel-shot.sp-drop-before { box-shadow: -4px 0 0 0 #0a84ff; }
.sp-carousel-shot.sp-drop-after { box-shadow: 4px 0 0 0 #0a84ff; }


/* Preview/Share are SECONDARY controls — the same quiet fill as the settings wheel
   and the size card, so Export's blue stays the one primary action in the topbar. */
.preview-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.preview-btn:hover { background: var(--bg-primary); color: var(--text-primary); }
/* Light surfaces wash the muted grey out — near-black text keeps the pills legible
   while the quiet fill still reads as secondary. */
html[data-theme="light"] .preview-btn { color: #1d1d1f; }

/* ===== Social preview ===== */
.sp-social .sp-inner { display: flex; flex-direction: column; min-height: 100vh; }
.sp-social-head { border-bottom-color: rgba(0, 0, 0, 0.08); }
.social-strip {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* flex-start + auto margins (same trick as the rows' horizontal centring):
       centres vertically when the grid fits, stays scrollable to the top row
       when it doesn't. */
    justify-content: flex-start;
    gap: var(--social-gap, 16px);
    padding: 30px 24px 60px;
    overflow: auto;
}
.social-row:first-child { margin-top: auto; }
.social-row:last-child { margin-bottom: auto; }
.social-row {
    display: flex;
    align-items: center;
    /* flex-start + auto margins: centres when the row fits, and STAYS scrollable to
       the first shot when it overflows — plain center pushes the left edge out of
       the scrollport and the first screenshot becomes unreachable. */
    justify-content: flex-start;
    gap: var(--social-gap, 16px);
}
.social-row > :first-child { margin-left: auto; }
.social-row > :last-child { margin-right: auto; }
.social-shot-wrap { position: relative; flex: 0 0 auto; display: flex; }
.social-hide-btn {
    position: absolute; top: 8px; right: 8px;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(20, 20, 22, 0.55); color: #fff;
    cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.social-shot-wrap:hover .social-hide-btn { opacity: 1; }
.social-hide-btn:hover { background: rgba(20, 20, 22, 0.8); }
.social-hidden-tray {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 24px 22px; flex-wrap: wrap;
}
.social-hidden-tray:empty { display: none; }
.social-tray-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: rgba(0, 0, 0, 0.4); margin-right: 4px;
}
.social-hidden-thumb {
    height: 52px; border-radius: 6px; cursor: pointer;
    opacity: 0.45; transition: opacity 0.15s;
}
.social-hidden-thumb:hover { opacity: 1; }
.social-shot {
    flex: 0 0 auto;
    height: min(64vh, 720px);
    border-radius: 26px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
}
.social-strip[data-rows="2"] .social-shot { height: min(30vh, 340px); border-radius: 18px; }
.social-strip[data-rows="3"] .social-shot { height: min(19vh, 215px); border-radius: 13px; }
.social-gap-ctl {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
    color: #6e6e73;
    margin-right: 4px;
}
.social-gap-ctl span { font-size: 12px; font-weight: 500; white-space: nowrap; }
/* input[type=range] outranks a bare class — the global rule would stretch it 100% */
input[type="range"].social-gap-slider {
    width: 92px;
    flex: 0 0 auto;
    accent-color: #0a84ff;
    cursor: ew-resize;
}
.social-rows-picker {
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden;
    margin-right: 6px;
}
.social-rows-btn {
    width: 28px; height: 24px;
    border: none; background: transparent; cursor: pointer;
    font-size: 12px; font-weight: 500; color: #6e6e73;
    line-height: 1; padding: 0;
}
.social-rows-btn + .social-rows-btn { border-left: 1px solid rgba(0, 0, 0, 0.12); }
.social-rows-btn.active { background: rgba(0, 0, 0, 0.08); color: #1d1d1f; }
.social-swatches { display: flex; gap: 8px; align-items: center; margin-right: 4px; }
.social-swatch {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.15);
    cursor: pointer; padding: 0;
}
.social-swatch.active { border-color: #0a84ff; }
.sp-social.sp-social-dark .sp-head-title { color: #f5f5f7; }
.sp-social.sp-social-dark .sp-back { color: #f5f5f7; }
.sp-social.sp-social-dark .sp-head { border-bottom-color: rgba(255, 255, 255, 0.12); }
.sp-social.sp-social-dark .sp-tool-btn,
.sp-social.sp-social-dark .sp-close-btn { background: rgba(255, 255, 255, 0.12); color: #f5f5f7; }
.sp-social.sp-social-dark .social-swatch { border-color: rgba(255, 255, 255, 0.3); }
.sp-social.sp-social-dark .social-swatch.active { border-color: #0a84ff; }
.sp-social.sp-social-dark .social-rows-picker { border-color: rgba(255, 255, 255, 0.25); }
.sp-social.sp-social-dark .social-rows-btn { color: #a1a1a6; }
.sp-social.sp-social-dark .social-rows-btn + .social-rows-btn { border-left-color: rgba(255, 255, 255, 0.18); }
.sp-social.sp-social-dark .social-rows-btn.active { background: rgba(255, 255, 255, 0.16); color: #f5f5f7; }
.sp-social.sp-social-dark .social-tray-label { color: rgba(255, 255, 255, 0.45); }
.sp-social.sp-social-dark .social-gap-ctl { background: rgba(255, 255, 255, 0.1); color: #a1a1a6; }




/* Filmstrip creation tiles: as tall as the screenshot tiles beside them */
.sidebar-add-buttons { display: flex; align-items: stretch; gap: 10px; }
.add-btn.add-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 118px;
    height: 208px;
    border: 1.5px dashed var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    padding: 0 10px;
}
.add-btn.add-tile:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    background: rgba(37, 99, 235, 0.06);
}
.add-tile-wrap { position: relative; }
.canvas-count-menu {
    top: auto;
    bottom: calc(100% + 8px);   /* the filmstrip hugs the screen bottom: open upward */
    left: 0;
    right: auto;
    min-width: 170px;
}

/* Device Type none: the Position and Style sections mean nothing without a
   device, so the pane collapses to the type choice. The position sliders are
   three sibling groups with only the first carrying the section marker. */
body.screenshot-no-device #tab-screenshot .section-head[data-title="Position"],
body.screenshot-no-device #tab-screenshot .section-head[data-title="Style"],
body.screenshot-no-device #tab-screenshot .control-group[data-section="Position"],
body.screenshot-no-device #tab-screenshot .control-group:has(#screenshot-y),
body.screenshot-no-device #tab-screenshot .control-group:has(#screenshot-x),
body.screenshot-no-device #shot-screen-section { display: none !important; }

/* Logo picker thumbnails: Simple Icons ship black; invert them on dark chrome. */
.logo-grid-item img {
    width: 20px;
    height: 20px;
    filter: invert(0.88);
}
html[data-theme="light"] .logo-grid-item img { filter: none; }

/* Automate modal: the CLI/MCP funnel inside the editor */
.automate-modal { max-width: 440px; text-align: left; }
.automate-modal .modal-icon, .automate-modal .modal-title, .automate-modal .modal-message { text-align: center; }
.automate-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 0;
    padding: 10px 12px;
    background: var(--well-bg);
    box-shadow: inset 0 2px 4px var(--well-shadow);
    border-radius: 10px;
}
.automate-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.automate-block code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--text-primary);
    user-select: all;
}
.automate-note { font-size: 12px; color: var(--text-secondary); text-align: center; margin: 10px 0 0; }
.automate-docs-link { text-decoration: none; display: flex; align-items: center; justify-content: center; }