/* Sketch: colour tokens (light, then dark), the gallery, the drawing screen (bars floating over the canvas, as
   Procreate has them), panels, sheets on phones, Brush Studio, the reference window and the replay. */

:root {
    --bg: #ffffff;
    --bg-2: #f4f4f2;
    --ink: #2b2a27;
    --ink-2: #6f6e69;
    --ink-3: #a5a49f;
    --line: #e4e3df;
    --hover: rgba(0, 0, 0, 0.05);
    --accent: #2a8cff;
    --danger: #e03e3e;
    --bar: rgba(250, 250, 248, 0.92);
    --track: #e6e5e1;
    --backdrop: #c9c9cd;
    --paper: #ffffff;
    --shadow: 0 10px 32px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #232325;
        --bg-2: #1b1b1d;
        --ink: #ededeb;
        --ink-2: #a9a8a4;
        --ink-3: #75746f;
        --line: #38383b;
        --hover: rgba(255, 255, 255, 0.07);
        --bar: rgba(30, 30, 32, 0.92);
        --track: #3a3a3e;
        --backdrop: #3b3b3f;
        --paper: #ffffff;
        --shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #232325;
    --bg-2: #1b1b1d;
    --ink: #ededeb;
    --ink-2: #a9a8a4;
    --ink-3: #75746f;
    --line: #38383b;
    --hover: rgba(255, 255, 255, 0.07);
    --bar: rgba(30, 30, 32, 0.92);
    --track: #3a3a3e;
    --backdrop: #3b3b3f;
    --paper: #ffffff;
    --shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg-2);
    color: var(--ink);
    font: 14px/1.4 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
}

button, input, select { font: inherit; color: inherit; }

button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

input[type="text"], input[type="number"], select {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 8px;
    -webkit-user-select: text;
    user-select: text;
}

/* native dropdowns stay readable in Windows dark mode */
select option, select optgroup {
    background: var(--bg);
    color: var(--ink);
}

input[type="range"] { accent-color: var(--accent); }

.muted { color: var(--ink-2); }
.small { font-size: 12px; }
.grow { flex: 1; }
.ic { display: block; flex-shrink: 0; }
[hidden] { display: none !important; }

.screen { position: fixed; inset: 0; }

/* ---------- Gallery ---------- */

#gallery {
    overflow-y: auto;
    padding: 0 0 40px;
}

/* the header stays at the top (a line under it once the drawings scroll) */
.g-head {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(14px + env(safe-area-inset-top)) 24px 14px;
    background: var(--bg-2);
    transition: box-shadow 0.15s;
}

.g-head.scrolled { box-shadow: 0 1px 0 var(--line); }

.g-head h1 { margin: 0; font-size: 22px; flex: 1; }
.g-home { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; font-size: 13px; }
.g-logo { display: block; width: 22px; height: 22px; border-radius: 5px; flex: none; }
.g-actions { display: flex; gap: 8px; }

.g-btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
}

.g-new { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.g-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 22px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 6px 24px;
}

.g-card { cursor: pointer; min-width: 0; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

.g-thumb {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    background: var(--bg);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.g-thumb img { max-width: 100%; max-height: 100%; display: block; }
.g-card:hover .g-thumb { outline: 2px solid var(--accent); }
/* name and ⋯ on the first line, when / size / tags under the name */
.g-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; padding: 8px 0 0 2px; }
.g-name { grid-column: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-info { grid-column: 1; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-more { grid-column: 2; grid-row: 1 / 3; width: 36px; height: 36px; margin-right: -6px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--ink-2); }
.g-more:hover, .g-more:active { background: var(--hover); }
.g-empty { text-align: center; color: var(--ink-2); margin: 14vh auto 0; padding: 0 24px; max-width: 360px; }
.g-empty-art { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 24px; background: var(--bg); box-shadow: var(--shadow); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.g-empty-art svg { width: 40px; height: 40px; }
.g-empty h2 { margin: 0 0 6px; font-size: 19px; color: var(--ink); }
.g-empty p { margin: 0 0 18px; }
.g-empty-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 639px) {
    .g-head { padding: calc(10px + env(safe-area-inset-top)) 16px 10px; gap: 6px; }
    .g-head h1 { font-size: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .g-home { font-size: 18px; padding: 4px 2px; }
    .g-home-t { display: none; }
    .g-actions { gap: 6px; }
    .g-btn { padding: 0 11px; white-space: nowrap; }
    .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 4px 16px; }
    .g-thumb { border-radius: 12px; }
    .g-meta { padding-top: 6px; }
    .g-name { font-size: 14px; }
}

/* narrow phones: Import moves into the ⋯ menu, so the title fits */
@media (max-width: 379px) {
    #g-import { display: none; }
}

/* phones on their side: smaller cards, so more than one row fits on the short screen */
@media (min-width: 640px) and (max-height: 500px) {
    .g-head { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px; }
    .g-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px 14px; }
}

/* ---------- The drawing screen ---------- */

#studio { background: var(--backdrop); overflow: hidden; }

#view {
    position: absolute;
    top: 0;
    bottom: 0;
    /* the side panels and a sidebar kept beside the drawing take their room from it */
    left: var(--view-l, 0px);
    width: calc(100% - var(--view-l, 0px) - var(--view-r, 0px) - var(--dock-w, 0px));
    height: 100%;
    touch-action: none;
    display: block;
}

#topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: calc(4px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left));
    background: var(--bar);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    z-index: 10;
}

.bar-group { display: flex; align-items: center; gap: 2px; }

#topbar button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}

#topbar button:hover { background: var(--hover); }
#topbar button.on, #topbar button.open { color: var(--accent); background: var(--hover); }
#topbar .tb-text { width: auto; padding: 0 10px; font-weight: 600; }

#color-btn .swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 1.5px var(--ink-3);
    touch-action: none;
}

#color-btn { touch-action: none; }

.phone-only { display: none !important; }
.short-only { display: none !important; }

/* phones on their side: undo and redo move to the top bar, so the sliders keep their height */
@media (max-height: 520px) {
    .short-only { display: inline-flex !important; }
    #sidebar [data-act] { display: none; }
}

#topbar button.off { opacity: 0.35; }

#topbar .tb-i { display: none; }

/* phones: buttons as big as the width allows (44 px from 412 px wide); under 360 px Gallery is an icon */
@media (max-width: 639px) {
    .wide-only { display: none !important; }
    .phone-only { display: inline-flex !important; }
    #topbar button { width: clamp(36px, calc((100vw - 100px) / 7), 44px); height: 44px; }
    #topbar .tb-text { padding: 0 8px; }
}

@media (max-width: 359px) {
    #topbar button { width: clamp(34px, calc((100vw - 36px) / 8), 44px); }
    #topbar .tb-text { width: clamp(34px, calc((100vw - 36px) / 8), 44px); padding: 0; }
    #topbar .tb-t { display: none; }
    #topbar .tb-i { display: inline-flex; }
}

/* the sidebar: size, the colour picker, opacity, undo, redo */
#sidebar {
    position: absolute;
    left: max(8px, env(safe-area-inset-left));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 44px;
    padding: 12px 0;
    border-radius: 22px;
    background: var(--bar);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    z-index: 10;
}

body.left-handed #sidebar { left: auto; right: max(8px, env(safe-area-inset-right)); }

#sidebar button {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}

#sidebar button:hover { background: var(--hover); }
#sidebar button.off { opacity: 0.35; }
#sidebar button.on { color: #fff; background: var(--accent); }

#pick-btn { border: 1.5px solid var(--ink-3) !important; }

.slider-v {
    position: relative;
    width: 26px;
    height: 150px;
    border-radius: 13px;
    background: var(--track);
    overflow: visible;
    touch-action: none;
    cursor: ns-resize;
}

.slider-v .fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 13px;
    background: var(--ink-3);
    min-height: 6px;
}

.slider-v .readout {
    position: absolute;
    left: 38px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--bg);
    box-shadow: var(--shadow);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    display: none;
}

body.left-handed .slider-v .readout { left: auto; right: 38px; }
.slider-v.dragging .readout, .slider-v:hover .readout { display: block; }
.slider-v.dragging .fill { background: var(--accent); }

/* phones: bigger for fingers */
@media (max-width: 639px), (max-height: 520px) {
    .slider-v { width: 32px; height: 112px; border-radius: 16px; }
    .slider-v .fill { border-radius: 16px; }
    .slider-v .readout { left: 44px; }
    body.left-handed .slider-v .readout { right: 44px; }
    #sidebar { gap: 6px; padding: 8px 0; width: 48px; border-radius: 24px; }
    #sidebar button { width: 40px; height: 40px; border-radius: 10px; }
}

/* the value, always shown, small at the top of each slider */
.slider-v .val {
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    opacity: 0.7;
    pointer-events: none;
}

.slider-v .val.long { font-size: 8.5px; letter-spacing: -0.3px; }
.slider-v.dragging .val { display: none; }

/* phones: a bar along the bottom pushes the sidebar up under the top bar */
@media (max-width: 639px) {
    body.with-bottombar #sidebar { top: calc(64px + env(safe-area-inset-top)); transform: none; }
}

/* phones on their side: the sidebar fits between the top bar and the bottom */
@media (max-height: 520px) {
    #sidebar { top: calc(50% + 24px); }
    .slider-v { height: clamp(44px, calc((100vh - 144px) / 2), 112px); height: clamp(44px, calc((100dvh - 144px) / 2), 112px); }
    body.with-anim #studio > #sidebar { top: calc(50% - 14px); }
    body.with-anim .slider-v { height: clamp(44px, calc((100vh - 220px) / 2), 112px); height: clamp(44px, calc((100dvh - 220px) / 2), 112px); }
}

/* the bottom bar beside the sidebar, in rows as on phones (below); the same shape as ui.js' isShortWide */
@media (max-height: 520px) and (min-aspect-ratio: 13/10) {
    body.with-bottombar #bottombar { left: calc(68px + env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); }
    body.left-handed.with-bottombar #bottombar { left: max(8px, env(safe-area-inset-left)); right: calc(68px + env(safe-area-inset-right)); }
}

/* bars hidden: four-finger tap or Tab */
body.ui-hidden #topbar, body.ui-hidden #sidebar, body.ui-hidden #bottombar, body.ui-hidden #shape-pill, body.ui-hidden #fill-pill { display: none !important; }

/* ---------- The bottom bar ---------- */

#bottombar {
    position: absolute;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    padding: 6px;
    border-radius: 14px;
    background: var(--bar);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    z-index: 11;
    overflow-x: auto;
    scrollbar-width: none;
}

#bottombar button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 36px;
    border-radius: 9px;
    white-space: nowrap;
    color: var(--ink);
}

#bottombar button:hover { background: var(--hover); }
#bottombar button.on { background: var(--accent); color: #fff; }
#bottombar button.primary { background: var(--accent); color: #fff; font-weight: 600; }
#bottombar .seg { display: flex; gap: 2px; padding: 2px; border-radius: 11px; background: var(--hover); }
#bottombar .bb-group { display: flex; gap: 2px; }
#bottombar .bb-label { color: var(--ink-2); padding: 0 6px; white-space: nowrap; font-size: 13px; }
#bottombar .bb-range { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#bottombar .bb-range input { width: 140px; }

/* a row of the bar on phones; on wide screens its parts sit in the one line */
#bottombar .bb-row { display: contents; }
#bottombar .bb-end { order: 2; }

/* cut-off edges of a row that scrolls sideways fade out */
#bottombar.fade-r, #bottombar .fade-r, #panel .fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
#bottombar.fade-l, #bottombar .fade-l, #panel .fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
#bottombar.fade-l.fade-r, #bottombar .fade-l.fade-r, #panel .fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

@media (max-width: 639px), (max-height: 520px) {
    #bottombar { left: 8px; right: 8px; transform: none; max-width: none; flex-wrap: wrap; justify-content: center; row-gap: 6px; }
    #bottombar > * { max-width: 100%; }
    #bottombar .seg, #bottombar .bb-group, #bottombar .bb-row { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    #bottombar .seg::-webkit-scrollbar, #bottombar .bb-group::-webkit-scrollbar, #bottombar .bb-row::-webkit-scrollbar { display: none; }
    #bottombar .bb-row { display: flex; align-items: center; gap: 6px; width: 100%; }
    #bottombar .bb-row > * { flex: none; }
    #bottombar .bb-keep { overflow: visible; }
    #bottombar .bb-keep > .seg { flex: 0 1 auto; min-width: 0; }
    #bottombar .bb-keep > .bb-end { margin-left: auto; order: 0; }
    #bottombar .bb-end button:not(.primary) span { display: none; }
    #bottombar .bb-label { white-space: normal; text-align: center; }
    #bottombar button span { font-size: 12px; }
    #bottombar button { padding: 0 8px; flex: none; }
}

#shape-pill, #fill-pill {
    position: absolute;
    top: calc(64px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
}

#shape-pill button, #fill-pill button {
    padding: 8px 16px;
    border-radius: 18px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--shadow);
}

/* ---------- Panels ---------- */

#panel {
    position: fixed;
    z-index: 30;
    width: 340px;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

#panel.panel-brushes { width: 440px; }
#panel.panel-color { width: 300px; }
#panel.panel-more { width: 300px; }

#panel.sheet {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: 100% !important;
    max-height: 78vh;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
}

#panel.sheet.half { max-height: 50vh; max-height: 50dvh; }

/* phones on their side: down the side away from the sidebar, under the top bar, as tall as the screen allows */
#panel.side {
    top: calc(56px + env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right));
    left: auto !important;
    width: min(380px, max(280px, 46vw)) !important;
    max-height: calc(100vh - 64px - env(safe-area-inset-top));
    max-height: calc(100dvh - 64px - env(safe-area-inset-top));
}

body.left-handed #panel.side { right: auto; left: max(8px, env(safe-area-inset-left)) !important; }
#panel.side .brush-lib .sets, #panel.side .brush-lib .brushes, #panel.side .layers, #panel.side .el-grid { max-height: calc(100dvh - 150px); }
#panel.sheet { transition: max-height 0.2s ease; }

.sheet-grip { display: none; }

#panel.sheet .sheet-grip {
    display: block;
    flex: none;
    position: relative;
    height: 16px;
    touch-action: none;
    cursor: grab;
}

#panel.sheet .sheet-grip::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 6px;
    width: 36px;
    height: 5px;
    margin-left: -18px;
    border-radius: 3px;
    background: var(--ink-3);
    opacity: 0.6;
}

#panel.sheet .p-head { padding-top: 4px; touch-action: none; }

#sheet-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); z-index: 25; }
#sheet-back.clear { background: transparent; }
#sheet-back.for-dialog { background: rgba(0, 0, 0, 0.45); z-index: 40; }

.p-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 8px;
    font-size: 15px;
}

.p-head b { flex: 1; }

.p-mini {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.p-mini:hover { background: var(--hover); }

.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Side panels (1280 px and wider): Brushes, Colour, Layers pinned open on the right ---------- */

body.docked { --dock-w: 320px; }

#dock {
    position: absolute;
    top: 49px;
    right: 0;
    bottom: 0;
    width: var(--dock-w);
    z-index: 9;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-left: 1px solid var(--line);
}

body.ui-hidden #dock { display: none; }
#dock .dock-part { display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--line); }
#dock .dock-part:last-child { border-bottom: 0; }
#dock .panel-brushes { flex: 1.4 1 0; min-height: 200px; }
#dock .panel-color { flex: none; }
#dock .panel-layers { flex: 1 1 0; min-height: 180px; }
#dock .panel-layers .p-head .muted { display: none; }
#dock .panel-brushes .brush-lib .sets, #dock .panel-brushes .brush-lib .brushes { max-height: none; }
#dock .panel-brushes .brush-lib { grid-template-columns: 112px 1fr; }
#dock .panel-layers .layers { flex: 1; min-height: 0; max-height: none; }
#dock .dock-part.flash { animation: dock-flash 0.7s ease; }
@keyframes dock-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: inset 0 0 0 2px var(--accent); } }
.pin-btn.on { color: var(--accent); }

body.docked #bottombar { left: calc(50% - var(--dock-w) / 2); }
body.docked #anim-bar { right: var(--dock-w); }
body.docked #live-bar { right: calc(var(--dock-w) + 12px); }
body.docked #reference { right: calc(var(--dock-w) + 70px); }
body.docked.left-handed #sidebar { right: calc(var(--dock-w) + 8px); }
body.docked #toast { left: calc(50% - var(--dock-w) / 2); }

/* Settings › sidebar beside the drawing (wide screens) */
@media (min-width: 640px) {
    body.side-fixed:not(.left-handed) { --view-l: 60px; }
    body.side-fixed.left-handed { --view-r: 60px; }
}

#dock .list, #panel .list { display: flex; flex-direction: column; padding: 4px 8px 10px; overflow-y: auto; }

#panel .list > button, #panel .list > a.as-button, #dock .list > button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 9px 10px;
    border-radius: 9px;
    text-align: left;
    color: var(--ink);
    text-decoration: none;
}

#panel .list > button:hover, #panel .list > a.as-button:hover, #dock .list > button:hover { background: var(--hover); }
#panel .list small, #dock .list small { color: var(--ink-2); font-size: 12px; }

.tabs {
    display: flex;
    gap: 2px;
    margin: 0 12px 8px;
    padding: 2px;
    border-radius: 10px;
    background: var(--hover);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}

.tabs button { flex: 1; padding: 6px 8px; border-radius: 8px; white-space: nowrap; font-size: 13px; }
.tabs button.on { background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); font-weight: 600; }
.tabs.small button { font-size: 12px; }

.cs-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    font-size: 13px;
}

.cs-row output { min-width: 44px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cs-row select, .cs-row input[type="text"] { grid-column: 2 / 4; }
.cs-row canvas { grid-column: 2 / 4; width: 150px; height: 150px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); touch-action: none; }

.check { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 13px; }

.p-buttons { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 14px 14px; flex-wrap: wrap; }
.p-buttons.small { padding-top: 0; justify-content: flex-start; }

.p-buttons button, .pl-foot button, .dlg-buttons button {
    padding: 7px 14px;
    border-radius: 9px;
    background: var(--hover);
}

.p-buttons button.primary, .dlg-buttons button.primary { background: var(--accent); color: #fff; font-weight: 600; }

.switch { position: relative; width: 40px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 12px; background: var(--track); transition: background 0.15s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }

.grid-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 12px 14px; }
.grid-buttons button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: 10px; background: var(--hover); }
.grid-buttons button.on { color: var(--accent); }

/* brushes */
.brush-lib { display: grid; grid-template-columns: 130px 1fr; min-height: 0; flex: 1; border-top: 1px solid var(--line); }
.brush-lib .sets { display: flex; flex-direction: column; padding: 6px; border-right: 1px solid var(--line); max-height: 60vh; }
.brush-lib .sets button { text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.brush-lib .sets button.on { background: var(--hover); font-weight: 600; color: var(--accent); }
.brush-lib .brushes { padding: 6px; max-height: 60vh; }

.brush-row {
    position: relative;
    padding: 6px 8px;
    border-radius: 9px;
    cursor: pointer;
}

.brush-row:hover { background: var(--hover); }
.brush-row.on { background: var(--hover); box-shadow: inset 0 0 0 1.5px var(--accent); }
.brush-row img { display: block; width: 100%; max-width: 200px; height: 44px; }
.b-name { font-size: 13px; font-weight: 600; }
.b-name i { font-weight: 400; color: var(--ink-2); font-size: 11px; }
.b-more { position: absolute; right: 4px; top: 4px; padding: 4px; border-radius: 6px; color: var(--ink-2); }
.b-more:hover { background: var(--hover); }

@media (max-width: 639px) {
    .brush-lib { grid-template-columns: 1fr; }
    .brush-lib .sets { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .brush-lib .sets button { white-space: nowrap; }
}

/* layers */
.layers { padding: 4px 8px 10px; max-height: 64vh; }

.layer-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 50px;
    padding: 4px 6px;
    border-radius: 10px;
    cursor: pointer;
    background: var(--bg);
}

.layer-row:hover { background: var(--hover); }
.layer-row.on { background: rgba(42, 140, 255, 0.16); }
.layer-row.hid .l-thumb, .layer-row.hid .l-name { opacity: 0.45; }
.layer-row.dragging { position: relative; z-index: 2; box-shadow: var(--shadow); }
.layer-row.clip { padding-left: 18px; }
.l-clip { color: var(--ink-2); margin-left: -12px; }
.l-grip { color: var(--ink-3); cursor: grab; touch-action: none; padding: 6px 0; }
.l-thumb { width: 48px; height: 36px; object-fit: contain; border-radius: 4px; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 10px 10px; border: 1px solid var(--line); }
.l-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.l-flags span { display: inline-flex; margin-left: 5px; color: var(--accent); font-size: 11px; font-weight: 700; vertical-align: middle; }
.l-blend { min-width: 28px; height: 28px; border-radius: 7px; font-weight: 700; font-size: 12px; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.l-blend small { font-weight: 400; font-size: 10px; }
.l-blend:hover, .l-more:hover { background: var(--hover); }
.l-vis input { width: 18px; height: 18px; accent-color: var(--accent); }
.l-more { padding: 4px; border-radius: 6px; color: var(--ink-2); }
.blend-box { cursor: default; min-height: 40px; gap: 8px; padding: 2px 10px 8px 34px; }
.blend-box input { flex: 1; }
.blend-box select { max-width: 120px; }
.bg-row { cursor: default; border-top: 1px solid var(--line); border-radius: 0; margin-top: 6px; padding-top: 10px; }
.bg-swatch { width: 48px; height: 32px; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; margin-left: 20px; }

/* colour */
.cur-swatches .sw-new { display: inline-block; width: 44px; height: 24px; border-radius: 6px; border: 1px solid var(--line); vertical-align: middle; }
.color-body { padding: 0 0 6px; display: flex; flex-direction: column; align-items: stretch; }
.color-body canvas.wheel { align-self: center; touch-action: none; margin: 4px 0 6px; }
.recent { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 14px; border-top: 1px solid var(--line); }
.sw { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(128, 128, 128, 0.35); }
.palettes { max-height: 46vh; padding: 0 10px; }
.palette { padding: 6px 4px 10px; border-bottom: 1px solid var(--line); }
.pl-head { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.pl-head span { flex: 1; }
.pl-colors { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.pl-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 4px; }
.pp { min-width: min(320px, 80vw); }
.pp-swatches { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.pp-swatches .sw { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); }
.pp-video { display: block; width: min(480px, 80vw); max-height: 60vh; border-radius: 8px; background: #000; }

/* adjustments */
canvas.curve { width: 260px; height: 260px; align-self: center; margin: 4px auto; display: block; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); touch-action: none; }
#dock p.muted, #panel p.muted { padding: 0 14px; margin: 4px 0; }

/* actions */
.act-tabs button { flex: none; padding: 6px 7px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 10px; margin: 0; font-size: 13px; }
.keys dt { font-weight: 600; white-space: nowrap; }
.keys dd { margin: 0; color: var(--ink-2); }
.prefs { padding-bottom: 10px; }
.prefs h4 { margin: 14px 0 4px; font-size: 13px; font-weight: 600; }

/* ---------- Menus, dialogs, toasts ---------- */

.menu {
    position: fixed;
    z-index: 60;
    min-width: 190px;
    padding: 5px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; }
.menu button:hover { background: var(--hover); }
.menu button.danger { color: var(--danger); }
.menu button.off { opacity: 0.4; pointer-events: none; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

#dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    width: min(460px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow-y: auto;
    padding: 18px;
    border-radius: 16px;
    background: var(--bg);
    box-shadow: var(--shadow);
}

#dialog h3 { margin: 0 0 12px; font-size: 17px; }
#dialog h4 { margin: 14px 0 6px; font-size: 13px; color: var(--ink-2); }
.dlg-label { display: flex; flex-direction: column; gap: 8px; }
.dlg-input { width: 100%; }
.dlg-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.presets button { display: flex; flex-direction: column; align-items: flex-start; padding: 9px 10px; border-radius: 10px; background: var(--hover); text-align: left; }
.presets small { color: var(--ink-2); font-size: 11px; }
.presets button:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.size-row { display: flex; gap: 10px; }
.size-row label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.size-row input { width: 100%; }
.anchor-wrap { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.anchor { display: grid; grid-template-columns: repeat(3, 22px); gap: 4px; }
.anchor button { width: 22px; height: 22px; border-radius: 5px; background: var(--hover); border: 1px solid var(--line); }
.anchor button.on { background: var(--accent); }
.info { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.info dt { color: var(--ink-2); }
.info dd { margin: 0; }

#toast {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    max-width: calc(100% - 32px);
    padding: 8px 16px;
    border-radius: 18px;
    background: rgba(20, 20, 22, 0.88);
    color: #fff;
    font-size: 13px;
    text-align: center;
    pointer-events: none;
}

.drop-dot {
    position: fixed;
    z-index: 80;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: var(--shadow);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ---------- Brush Studio ---------- */

#brush-studio {
    position: fixed;
    inset: 3vh 3vw;
    z-index: 45;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.bs-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bs-head button { padding: 7px 14px; border-radius: 9px; background: var(--hover); }
.bs-head button.primary { background: var(--accent); color: #fff; font-weight: 600; }
.bs-name { font-weight: 600; width: 200px; }
.bs-main > * { min-width: 0; }
.bs-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 160px minmax(260px, 1fr) minmax(280px, 1.3fr); }
.bs-nav { display: flex; flex-direction: column; padding: 8px; border-right: 1px solid var(--line); overflow-y: auto; }
.bs-nav button { text-align: left; padding: 9px 10px; border-radius: 8px; }
.bs-nav button.on { background: var(--hover); color: var(--accent); font-weight: 600; }
.bs-settings { padding: 8px 0; border-right: 1px solid var(--line); }
.bs-pad { display: flex; flex-direction: column; padding: 10px; min-height: 0; background: var(--bg-2); }
.bs-pad canvas { flex: 1; width: 100%; border-radius: 10px; touch-action: none; box-shadow: inset 0 0 0 1px var(--line); }
.bs-pad-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; height: 36px; }
.bs-pad-bar button { padding: 5px 12px; border-radius: 8px; background: var(--hover); }
.tip-grid { display: grid; grid-template-columns: repeat(auto-fill, 52px); gap: 6px; padding: 6px 14px; }
.tip-grid button { width: 52px; height: 52px; border-radius: 8px; border: 1px solid var(--line); overflow: hidden; background: #fff; }
.tip-grid button.on { box-shadow: 0 0 0 2px var(--accent); }
.tip-grid img { width: 100%; height: 100%; display: block; }

@media (max-width: 760px) {
    #brush-studio { inset: 0; border-radius: 0; padding-top: env(safe-area-inset-top); }
    .bs-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) 220px; }
    .bs-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .bs-nav button { white-space: nowrap; }
    .bs-settings { border-right: 0; }
    .bs-name { width: 130px; }
}

/* ---------- Reference window ---------- */

#reference {
    position: fixed;
    right: 70px;
    top: 70px;
    width: 260px;
    height: 230px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.ref-head { display: flex; align-items: center; gap: 4px; padding: 4px 6px; cursor: move; touch-action: none; font-size: 12px; border-bottom: 1px solid var(--line); }
.ref-head span { flex: 1; font-weight: 600; }
.ref-head button { padding: 3px 7px; border-radius: 6px; font-size: 12px; }
.ref-head button.on { background: var(--hover); color: var(--accent); }
.ref-canvas { flex: 1; width: 100%; min-height: 0; background: var(--bg-2); }
.ref-resize { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, var(--ink-3) 50%); }

/* ---------- Replay ---------- */

#replay { position: fixed; inset: 0; z-index: 55; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#replay canvas { max-width: 100%; max-height: calc(100% - 56px); }
.rp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 16px calc(env(safe-area-inset-bottom)); color: #fff; }
.rp-bar input { flex: 1; }
.rp-bar button { color: #fff; padding: 6px; }

/* ---------- Live paint ---------- */

#live-bar {
    position: absolute;
    top: calc(56px + env(safe-area-inset-top));
    right: 12px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 12px;
    border-radius: 18px;
    background: var(--bar);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    font-size: 13px;
}

#live-bar label { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
#live-bar input { width: 90px; }
#live-bar button { padding: 6px 14px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 600; }
.lb-dot { width: 10px; height: 10px; border-radius: 50%; background: #3b8ee8; }
.lb-dot.oil { background: #c9772c; }
.live-tag { font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: var(--accent); color: #fff; margin-left: 4px; }
body.ui-hidden #live-bar { display: none !important; }

@media (max-width: 639px) {
    #live-bar { left: 8px; right: 8px; justify-content: space-between; }
    #live-bar .lb-layer { display: none; }
}

/* ---------- Groups, masks, picking ---------- */

.layer-row.in-group { }
.group-row { background: var(--hover); margin-top: 4px; }
.group-row .g-fold { width: 22px; height: 28px; color: var(--ink-2); font-size: 13px; }
.group-row .g-icon { color: var(--ink-2); width: 48px; display: flex; justify-content: center; }
.mask-row { min-height: 40px; padding-left: 26px; }
.mask-row .l-thumb { background: #000; }
.layer-row.picked { box-shadow: inset 0 0 0 1.5px var(--accent); }
.l-pick { width: 18px; text-align: center; color: var(--accent); font-size: 16px; }
.p-mini.on { color: var(--accent); background: var(--hover); }
.pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 12px 8px; }
.pick-bar span { flex: 1; color: var(--ink-2); }
.pick-bar button { padding: 5px 9px; border-radius: 8px; background: var(--hover); font-size: 13px; }
.pick-bar button.danger { color: var(--danger); }

/* ---------- Gallery stacks ---------- */

.g-crumb { display: flex; align-items: center; gap: 12px; max-width: 1400px; margin: 0 auto; padding: 0 24px 10px; }
.g-crumb button { padding: 6px 12px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.g-stack-thumb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--hover); }
.g-stack-thumb img, .g-stack-thumb span { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 6px; background: var(--bg); display: block; }
.g-card.lifted { opacity: 0.35; }
.g-card.drop .g-thumb { outline: 3px solid var(--accent); }
.g-ghost { position: fixed; z-index: 90; pointer-events: none; opacity: 0.9; transform: rotate(-3deg) scale(1.04); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25)); }

@media (max-width: 639px) {
    .g-crumb { padding: 0 16px 10px; }
}
.g-thumb img { -webkit-user-drag: none; user-select: none; }

/* ---------- Animation Assist ---------- */

#anim-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: var(--bar);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
}

.ab-tools { display: flex; gap: 2px; }
.ab-tools button { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.ab-tools button:hover { background: var(--hover); }
.ab-frames { flex: 1; display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: thin; touch-action: pan-x; }
.ab-frame { position: relative; flex: none; border-radius: 6px; border: 2px solid transparent; cursor: pointer; touch-action: none; }
.ab-frame canvas { display: block; height: 48px; width: auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.ab-frame span { position: absolute; left: 3px; bottom: 2px; font-size: 10px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: #fff; }
.ab-frame.on { border-color: var(--accent); }
.ab-frame.playing { border-color: #34c759; }
.ab-frame.bg canvas, .ab-frame.fg canvas { opacity: 0.6; }
.ab-frame.bg::after, .ab-frame.fg::after { content: 'BG'; position: absolute; right: 3px; top: 2px; font-size: 9px; color: var(--ink-2); }
.ab-frame.fg::after { content: 'FG'; }
.ab-frame.dragging { z-index: 2; opacity: 0.85; }
body.with-anim #bottombar { bottom: calc(76px + env(safe-area-inset-bottom)); }
body.with-anim #sidebar { top: calc(50% - 30px); }
body.ui-hidden #anim-bar { display: none !important; }

/* ---------- Text, gradients, harmony, QuickMenu ---------- */

.text-edit { padding: 0 14px 6px; }
.text-edit textarea { width: 100%; font: inherit; font-size: 15px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); resize: vertical; -webkit-user-select: text; user-select: text; }
.sw-inline { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; border: 1px solid var(--line); }
.p-buttons button.on { background: var(--accent); color: #fff; }
.grad-bar { width: 180px; height: 26px; touch-action: none; cursor: pointer; }
.harmony-wheel { display: flex; justify-content: center; }
.harmony-row { display: flex; justify-content: center; gap: 8px; padding: 4px 14px 8px; }
.sw.big { width: 44px; height: 36px; border-radius: 8px; }
.sw.big.on { box-shadow: 0 0 0 2px var(--accent); }
#quickmenu { position: fixed; z-index: 85; width: 0; height: 0; }
#quickmenu button { position: absolute; transform: translate(-50%, -50%); width: 92px; min-height: 44px; padding: 6px; border-radius: 22px; background: var(--bg); color: var(--ink); box-shadow: var(--shadow); font-size: 12px; line-height: 1.2; }
#quickmenu button:hover { background: var(--accent); color: #fff; }
#quickmenu .qm-centre { position: absolute; transform: translate(-50%, -50%); width: 80px; text-align: center; font-size: 10px; color: var(--ink-2); background: var(--bg); padding: 4px; border-radius: 8px; opacity: 0.9; }

/* ---------- Backups ---------- */

.g-icon { padding: 0 8px; }
.g-backup { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; box-sizing: border-box; width: calc(100% - 48px); max-width: 1352px; margin: 0 auto 14px; padding: 10px 14px; border-radius: 12px; background: var(--hover); }
.g-backup[hidden] { display: none; }
.g-backup span { flex: 1; min-width: 200px; }

@media (max-width: 639px) {
    .g-backup { width: calc(100% - 32px); margin-bottom: 12px; }
}

/* ---------- Touch shortcut (workflow.js) ---------- */

#touch-shortcut {
    position: fixed;
    z-index: 12;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: var(--bar);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#touch-shortcut.on { background: var(--accent); color: #fff; border-color: var(--accent); }
body.ui-hidden #touch-shortcut { display: none !important; }

/* ---------- Gallery: search, sort, picking (workflow.js) ---------- */

.g-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 1400px; margin: 0 auto; padding: 0 24px 12px; }
.g-tools:empty { display: none; }
.g-searchbox { flex: 1 1 180px; min-width: 0; max-width: 320px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink-2); cursor: text; }
.g-searchbox:focus-within { border-color: var(--accent); }
.g-search { flex: 1; min-width: 0; height: 34px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.g-chips { display: contents; }
.g-selbtn { order: 5; }
.g-pickbar { display: contents; }
.g-pickbar .g-btn { gap: 6px; }
.g-tag.on { border-color: var(--accent); color: var(--accent); }
.g-sort { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px; }
.g-tools .g-btn[disabled] { opacity: 0.45; pointer-events: none; }
.g-tools .g-btn.danger { color: var(--danger); }
.g-picked { font-size: 14px; }
.g-tools .grow { flex: 1; }
.g-card { position: relative; }
.g-check { position: absolute; top: 8px; left: 8px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.25); color: transparent; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.g-card.picked .g-check { background: var(--accent); color: #fff; }
.g-card.picked .g-thumb { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (max-width: 639px) {
    .g-tools { padding: 0 16px 12px; gap: 8px; }
    /* search and Select on one line; the filters on a line of their own that scrolls sideways */
    .g-searchbox { flex: 1 1 0; max-width: none; border-radius: 10px; }
    /* 16px so iPhones don't zoom in on the box */
    .g-search { font-size: 16px; }
    .g-search { height: 38px; }
    .g-selbtn { order: 0; min-height: 40px; }
    .g-chips { display: flex; flex: 1 1 100%; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
    .g-chips::-webkit-scrollbar { display: none; }
    .g-chips > * { flex: none; }
    .g-chips .g-btn, .g-chips select { min-height: 34px; border-radius: 17px; padding-top: 0; padding-bottom: 0; }
    .g-chips select { padding-left: 12px; max-width: 160px; }
    /* picking: the count, All and Done at the top, the actions in a bar along the bottom */
    .g-pickbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: flex;
        justify-content: space-around;
        padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        background: var(--bar);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--line);
    }
    .g-pickbar .g-btn { flex: 1; flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 0 4px; border: 0; border-radius: 12px; background: none; font-size: 12px; }
    .g-pickbar .g-btn:active { background: var(--hover); }
    .g-picked { font-size: 16px; }
    #gallery.picking { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* Phase 2: adjustment layers, layer styles, colour tags, layer search */
.p-sub { padding: 6px 18px 2px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.panel-adjust .list.adj-layers { padding-top: 0; }
.adj-thumb { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); background: var(--hover) !important; }
.layer-row.tagged { box-shadow: inset 3px 0 0 var(--tag); }
.layer-row.tagged.picked { box-shadow: inset 3px 0 0 var(--tag), inset 0 0 0 1.5px var(--accent); }
.l-find { display: flex; align-items: center; gap: 6px; padding: 0 12px 8px; }
.l-find input { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-size: 13px; }
.l-tagchip { width: 18px; height: 18px; border-radius: 50%; background: var(--tag); flex: none; opacity: 0.55; }
.l-tagchip.on { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--tag); }
.l-none { padding: 10px 16px; margin: 0; }
.menu .tag-item::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.menu .tag-red::before { background: #e5484d; }
.menu .tag-orange::before { background: #f76b15; }
.menu .tag-yellow::before { background: #f5c400; }
.menu .tag-green::before { background: #30a46c; }
.menu .tag-blue::before { background: #0090ff; }
.menu .tag-purple::before { background: #8e4ec6; }
.menu .tag-grey::before { background: #8b8d98; }
.st-part { padding: 6px 0 4px; border-top: 1px solid var(--line); }
.st-part:first-of-type { border-top: 0; }
.st-on { display: flex; align-items: center; gap: 6px; padding: 4px 14px; font-size: 14px; }
.st-colour { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; }
.st-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); flex: none; }
.st-colour button { padding: 5px 10px; border-radius: 8px; background: var(--hover); font-size: 12px; }
#panel.panel-adjust, #panel.panel-layer-style { overflow-y: auto; }
#panel.panel-adjust .list { overflow: visible; flex: none; }
#panel.panel-adjust .list > button { padding: 7px 10px; }

/* Phase 4: Motion, sound */
.p-note { margin: 0; padding: 2px 14px 8px; }
#panel.panel-motion, #panel.panel-anim { overflow-y: auto; }
.mo-time { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 4px 14px 16px; }
.mo-time input { width: 100%; }
.mo-time output { min-width: 52px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 13px; }
.mo-keys { position: absolute; left: 22px; right: 82px; bottom: 4px; height: 12px; pointer-events: none; }
.mo-keys button { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 2px; transform: rotate(45deg); background: var(--bg); border: 1.5px solid var(--accent); pointer-events: auto; padding: 0; }
.mo-keys button.on { background: var(--accent); }
.mo-presets { flex-wrap: wrap; }

/* My elements (elements.js) */
.el-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px 12px 14px; max-height: 52vh; overflow: auto; }
.el-item { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.el-item > button[data-el="place"] { aspect-ratio: 1; border-radius: 10px; background: var(--hover) repeating-conic-gradient(rgba(128, 128, 128, 0.18) 0 25%, transparent 0 50%) 0 0 / 14px 14px; padding: 6px; display: flex; align-items: center; justify-content: center; }
.el-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.el-item > span { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
.el-more { position: absolute; right: 0; bottom: -3px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); border-radius: 6px; }
.ab-motion { display: flex; flex-direction: column; gap: 4px; padding: 0 6px; justify-content: center; flex: none; max-width: 140px; }
.ab-motion button { font-size: 11px; padding: 3px 8px; border-radius: 7px; background: var(--hover); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-motion button.on { background: var(--accent); color: #fff; }

/* Phase 5: action search, pins, gallery stars and tags, colours of the drawing */
#cmdk { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.28); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.cmdk-box { width: min(560px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.cmdk-in { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.cmdk-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; height: 30px; }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.cmdk-row.on, .cmdk-row:hover { background: var(--hover); }
.cmdk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-pin { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3, #999); flex: none; }
.cmdk-pin.on { color: var(--accent); background: rgba(42, 140, 255, 0.12); }
.cmdk-none { padding: 12px; margin: 0; }
.cmdk-foot { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); }
#pinbar { gap: 2px; }
#pinbar .pin-text { font-size: 12px; padding: 0 8px; width: auto; }
@media (max-width: 639px) { #pinbar { display: none; } }
.g-star { position: absolute; top: 8px; right: 8px; z-index: 1; color: #f5b400; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); line-height: 0; }
.g-star svg { fill: currentColor; }
.g-starbtn { display: inline-flex; align-items: center; gap: 5px; }
.g-starbtn.on { background: #f5b400; color: #222; }
.g-starbtn.on svg { fill: currentColor; }
.g-tag { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px; max-width: 140px; }
.rc-label { flex-basis: 100%; font-size: 11px; color: var(--ink-2); margin-bottom: -2px; }

/* ---------- Desktop round (2026-10-19): brush chip, brush search, tooltips, wider panels ---------- */

/* the brush in use, in the top bar (wide screens) */
#topbar .brush-chip {
    display: none;
    width: auto;
    max-width: 230px;
    gap: 8px;
    padding: 0 10px 0 8px;
    margin-right: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink);
}

@media (min-width: 1000px) {
    #topbar .brush-chip { display: inline-flex; }
}

.brush-chip img { width: 60px; height: 22px; object-fit: cover; object-position: left center; flex: none; }
.brush-chip .bc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.brush-chip .bc-tool { color: var(--ink-2); white-space: nowrap; }

/* brush search, in the library's head */
.b-search {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--hover);
    color: var(--ink-2);
    flex: 0 1 170px;
    min-width: 0;
}

.b-search input { border: 0; outline: 0; background: none; width: 100%; min-width: 0; font-size: 13px; color: var(--ink); -webkit-user-select: text; user-select: text; }
.b-search input::-webkit-search-cancel-button { display: none; }
.b-set { font-weight: 400; font-size: 11px; color: var(--ink-2); margin-left: 4px; }
.brush-lib .sets.dim { opacity: 0.45; }

/* wide screens: a bigger library with brushes in two columns */
@media (min-width: 1000px) {
    #panel.panel-brushes { width: 620px; }
    #panel.panel-brushes .brush-lib { grid-template-columns: 150px 1fr; }
    #panel.panel-brushes .brush-lib .brushes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; align-content: start; }
    #panel.panel-brushes .brush-lib .sets, #panel.panel-brushes .brush-lib .brushes { max-height: min(70vh, 640px); }
    #panel.panel-brushes .brush-row img { max-width: none; height: 48px; }
}

@media (max-width: 639px) {
    .b-search { flex-basis: 120px; }
    .b-search input { font-size: 16px; }
}

/* the colour's hex, beside its swatch */
.hex-in {
    width: 78px;
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
    -webkit-user-select: text;
    user-select: text;
}

@media (max-width: 639px) {
    .hex-in { font-size: 16px; width: 92px; }
}

/* Actions: room for all its tabs on wide screens */
@media (min-width: 640px) {
    #panel.panel-actions { width: 430px; }
    #panel .tabs { flex-wrap: wrap; }
}

/* quick tooltips on the bars */
#tip {
    position: fixed;
    z-index: 80;
    max-width: 280px;
    padding: 5px 9px;
    border-radius: 7px;
    background: var(--ink);
    color: var(--bg);
    font-size: 12px;
    line-height: 1.35;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}