/* ============================================================
   RESET & TOKENS
   ------------------------------------------------------------
   The Paint Creator's design system: same tokens, components and
   breakpoints, so both sites read as one app.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
    /* ---- shell metrics ---- */
    --shell-max: 1320px;
    --shell-pad: 28px;

    /* ---- surfaces ---- */
    --bg-deep: #0e0e10;          /* inputs and wells */
    --bg-dark: #101012;          /* page background */
    --bg-panel: #18181b;         /* panels and cards */
    --bg-menu: #1c1c20;          /* popovers, dropdowns, raised controls */
    --bg-modal: #1a1a1e;         /* modal panels */
    --bg-item: #26262c;          /* chips, kbd */
    --bg-hover: #2a2a30;         /* hover surfaces */
    --bg-item-active: #35353c;   /* selected surfaces */
    --bg-active-hover: #45454f;  /* hover on a selected surface */
    --bg-active-violet: #2a2140; /* the paint shown in the preview, the picked badge */
    --border-soft: #26262c;      /* card / panel outlines */
    --border: #2f2f36;           /* raised controls */
    --border-well: #2a2a30;      /* sunken wells, inputs, swatches */
    --border-strong: #33333a;    /* menus, slider tracks */

    /* ---- type scale ---- */
    --fs-3xs: 0.55rem;
    --fs-2xs: 0.625rem;
    --fs-xs:  0.7rem;
    --fs-sm:  0.8rem;
    --fs-md:  0.9rem;
    --fs-lg:  1rem;
    --fs-xl:  1.2rem;
    --fs-2xl: 1.375rem;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* ---- typefaces ----
       --font-paint matches the font stack 7TV renders usernames in. */
    --font-sans: 'Plus Jakarta Sans', Inter, Roobert, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;
    --font-paint: Inter, Roobert, 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* ---- text colors ---- */
    --ink-hi: #f5f5f6;
    --ink:    #d4d4d8;
    --ink-2:  #a1a1aa;
    --ink-3:  #8b8b95;
    --ink-4:  #84848c;   /* placeholders and hints; 4.5:1 contrast on every surface */
    --ink-5:  #5a5a63;

    /* ---- spacing + radius ---- */
    --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;
    --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    --radius-pill: 999px;

    --shadow-pop: 0 12px 30px rgba(0, 0, 0, 0.5);

    /* Transparency checkerboard (color picker). */
    --checker: repeating-conic-gradient(#3a3a42 0% 25%, #232328 0% 50%) 50% / 8px 8px;

    /* ---- accent ----
       --accent for borders, rings and icons; --accent-fill behind white text
       (white on --accent is below 4.5:1 contrast). */
    --accent: #8b5cf6;
    --accent-hover: #7c4ef4;
    --accent-fill: #7c3aed;
    --accent-fill-hover: #6d28d9;
    --accent-ink: #a78bfa;
    --accent-ink-hi: #c4b5fd;
    --disabled-opacity: 0.42;

    /* ---- buttons ---- */
    --btn-radius: var(--radius-lg);
    --btn-radius-sm: var(--radius-md);
    --btn-tr: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
    --btn-face: #1f1f24;
    --btn-face-hover: #26262c;
    --btn-face-press: #191920;
    --btn-raise: #28282f;
    --btn-raise-hover: #33333c;
    --btn-raise-press: #222229;
    --btn-line: #2f2f36;
    --btn-raise-line: #3a3a44;
    --btn-line-hover: #45454f;
    --btn-ink: var(--ink);
    --btn-ink-hi: #fafafa;
    --btn-ink-quiet: var(--ink-3);
    --btn-accent-press: #5b21b6;
    --btn-danger-face: #3a2126;
    --btn-danger-line: #5c2b31;
    --btn-danger-ink: #f2696e;
    --btn-danger-solid: #d13c41;
    --btn-danger-press: #b02f34;
    --btn-focus: 0 0 0 2px var(--bg-dark), 0 0 0 4px rgba(139, 92, 246, 0.6);

    scrollbar-width: thin;
    scrollbar-color: #3a3a42 transparent;
    -webkit-touch-callout: none;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3a42; border-radius: 6px; }

html { overflow-y: scroll; overflow-x: hidden; }

/* ============================================================
   TYPEFACES - the Paint Creator's own files (vendor/fonts/)
   ------------------------------------------------------------
   Latin first, then latin-ext, which only downloads if a name needs it.
   Variable faces: one file covers every weight. Inter (the paint font) is
   handled by fonts.js.
   ============================================================ */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('vendor/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('vendor/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('vendor/fonts/jetbrains-mono-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('vendor/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
    background-color: var(--bg-dark);
    color: var(--ink);
    text-align: center;
    font-size: var(--fs-lg);
    font-weight: var(--fw-normal);
    padding: 0 0 80px 0;
    margin: 0;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* Form controls use a heavier weight than body text. Text fields keep the
   browser's own font, as in the Paint Creator. */
button, input, select, textarea, label, .pv-label { font-weight: var(--fw-semi); }

/* ============================================================
   BUTTONS
   ============================================================ */
button {
    font-family: inherit;
    color: var(--btn-ink);
    background: var(--btn-face);
    border: none;
    padding: 8px 13px;
    cursor: pointer;
    border-radius: var(--btn-radius);
    font-weight: var(--fw-semi);
    font-size: 12.5px;
    line-height: 1.2;
    transition: var(--btn-tr);
}
button:hover { background: var(--btn-face-hover); color: var(--btn-ink-hi); }
button:disabled,
button[disabled] { opacity: var(--disabled-opacity); cursor: not-allowed; }
button:disabled:hover,
button[disabled]:hover { background: inherit; color: inherit; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Primary action */
.blue-button,
.toast-action {
    background: var(--accent-fill);
    color: var(--btn-ink-hi);
    border: 1px solid transparent;
}
.blue-button:hover,
.toast-action:hover { background: var(--accent-fill-hover); color: var(--btn-ink-hi); }
.blue-button:active,
.toast-action:active { background: var(--btn-accent-press); }

/* Secondary action */
.purple-button {
    background: var(--btn-raise);
    color: var(--btn-ink);
    border: 1px solid var(--btn-raise-line);
}
.purple-button:hover { background: var(--btn-raise-hover); color: var(--btn-ink-hi); }
.purple-button:active { background: var(--btn-raise-press); }

.neutral-button {
    background: var(--btn-face);
    color: var(--btn-ink);
    border: 1px solid var(--btn-line);
}
.neutral-button:hover { background: var(--btn-face-hover); color: var(--btn-ink-hi); border-color: var(--btn-line-hover); }
.neutral-button:active { background: var(--btn-face-press); }

/* Destructive action: turns solid red on hover */
.red-button {
    background: var(--btn-danger-face);
    color: var(--btn-danger-ink);
    border: 1px solid var(--btn-danger-line);
}
.red-button:hover { background: var(--btn-danger-solid); color: #fff; border-color: var(--btn-danger-solid); }
.red-button:active { background: var(--btn-danger-press); border-color: var(--btn-danger-press); }

/* Small utility button (Retry, Show them) */
.small-btn {
    padding: 8px 4px;
    font-size: 11px;
    background: var(--btn-face);
    color: var(--btn-ink);
    border: 1px solid var(--btn-line);
    border-radius: 9px;
    white-space: nowrap;
}
.small-btn:hover { background: var(--btn-face-hover); color: var(--btn-ink-hi); border-color: var(--btn-line-hover); }
.small-btn:active { background: var(--btn-face-press); }
/* A labelled small button outside a grid needs its own side padding. */
.empty-state .small-btn,
.placeholder-text .small-btn { padding-left: 10px; padding-right: 10px; }

/* Toolbar button (list menus, card size) */
.fav-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: 7px 12px;
    background: var(--btn-face);
    border: 1px solid var(--btn-line);
    color: var(--btn-ink);
    border-radius: var(--btn-radius);
    font-size: 12px;
    font-weight: var(--fw-semi);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--btn-tr);
}
.fav-filter-btn:hover { background: var(--btn-face-hover); color: var(--btn-ink-hi); border-color: var(--btn-line-hover); }
/* Fixed-size icon box, so swapping icons never shifts the label. */
.fav-filter-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1em;
    line-height: 1;
    text-align: center;
}

.tb-sep {
    width: 1px;
    align-self: stretch;
    min-height: 24px;
    margin: 0;
    background: var(--border-well);
    flex-shrink: 0;
}

/* ============================================================
   ACCESSIBILITY HELPERS
   ============================================================ */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 2000;
    background: var(--accent-fill);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    font-size: 13px;
    font-weight: var(--fw-bold);
    text-decoration: none;
    box-shadow: var(--shadow-pop);
    transition: transform .12s ease, background-color .12s ease;
}
.skip-link:hover { background: var(--accent-fill-hover); }
.skip-link:focus,
.skip-link:focus-visible {
    transform: translate(-50%, 0);
    outline: 2px solid #fff;
    outline-offset: -4px;
}
/* Paint cards, badge tiles and preview badges are role="button" divs. */
[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   APP SHELL - one column, as wide as the preview card above it
   ============================================================ */
.app-shell {
    /* The padding is added, so the content lines up with the preview card. */
    max-width: calc(var(--shell-max) + 2 * var(--shell-pad));
    margin: 0 auto;
    padding: var(--sp-8) var(--shell-pad) 60px;
    text-align: left;   /* body is centered for the preview */
}
.shell-content { min-width: 0; }
.space:focus { outline: none; }
.space[hidden] { display: none; }

.space-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    min-height: 37px;
}
.space-title {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    color: var(--ink-hi);
}
/* Optical alignment against the larger title. */
.space-head .seg-toggle { margin-top: 3px; }

/* ============================================================
   VISUALIZER
   ============================================================ */
#visualizer {
    /* Covers the top half only, hiding content that scrolls behind the
       card's rounded top corners. */
    background: linear-gradient(to bottom, var(--bg-dark) 50%, transparent 50%);
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--shell-pad) var(--shell-pad) 0;
}
.visualizer-inner {
    max-width: var(--shell-max);
    width: 100%;
    margin: 0 auto;
    background: var(--bg-panel);
    border: 1px solid #29292f;
    border-radius: var(--radius-3xl);
    padding: 24px 40px 20px;
    /* The scaled-up shadows may spread into the padding, but stop at the
       card's rounded edge. */
    overflow: clip;
}
/* Above the preview text: its drop-shadow filter makes it a stacking layer. */
.visualizer-inner > .pv-toggle,
.visualizer-inner > .chat-preview,
.visualizer-inner > .preview-bar-wrap { position: relative; z-index: 1; }
/* The preview background (Dark/White/Custom) is applied to the stage only. */
.visualizer-stage {
    border-radius: var(--radius-2xl);
    display: flex;
    /* Centered with auto margins on #userName instead, so a long name that
       overflows can still be scrolled to its start. */
    justify-content: flex-start;
    align-items: center;
    /* --stage-floor: the row's height at the maximum size, badges included
       (set by script.js), so the card keeps one height. */
    min-height: max(90px, var(--stage-floor, 0px));
    flex-shrink: 0;
    /* Visible, so the scaled-up shadows are not cut off; only text wider
       than the stage turns it into a scroll box (.pv-scroll). */
    overflow: visible;
    scrollbar-width: thin;
}
.visualizer-stage.pv-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

#userName {
    width: auto;
    display: flex;
    justify-content: center;
    /* Twitch places badges against the name's text baseline. */
    align-items: baseline;
    margin: 0 auto;
    gap: 0;
}

#editText {
    border: none;
    color: white;
    caret-color: white;
    font-weight: bold;
    margin: 0;
    width: auto;           /* set inline to the measured text width */
    max-width: none;
    flex-shrink: 0;
    resize: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: visible;
    white-space: nowrap;
    text-align: center;
    font-size: 72px;       /* set inline by script.js */
    font-family: var(--font-paint);
    padding: 0;
    transform: translate3d(0, 0, 0);
}
/* Before a paint is picked; a painted preview keeps the browser's own. */
#editText:not(.text-effect)::placeholder { color: rgba(255, 255, 255, 0.35); -webkit-text-fill-color: rgba(255, 255, 255, 0.35); }
#editText:focus { outline: none; box-shadow: none; }
/* No paint picked yet: dark text on a light background. */
#visualizer.preview-light #editText:not(.text-effect),
#visualizer.preview-light #editText:not(.text-effect)::placeholder {
    color: #111;
    -webkit-text-fill-color: #111;
}
#visualizer.preview-light #editText { caret-color: var(--bg-deep); }

/* Painted text: the paint's background clipped to the glyphs. */
.text-effect {
    font-family: var(--font-paint);
    background-clip: text !important;
    background-size: 100% 100%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    color: transparent;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
}
#editText.text-effect {
    caret-color: white;
    -webkit-font-smoothing: none;
    font-smooth: never;
    filter: contrast(1.01);
}
#visualizer.preview-light #editText.text-effect { caret-color: var(--bg-deep); }

/* ---- badges in the preview ----
   A Twitch chat line scaled up: an 18px badge at 14px text, margin 0 3px
   1.5px 0, vertical-align middle. The sizes come from script.js in the same
   proportions. */
#badgeContainer {
    display: block;
    white-space: nowrap;
    font-family: var(--font-paint);
    font-weight: bold;
    font-size: var(--pv-size, 72px);
    line-height: normal;
    flex-shrink: 0;
}
/* An invisible badge, always there: picking or clearing a badge never moves
   the name or resizes the card. */
#badgeContainer::before {
    content: '';
    display: inline-block;
    width: 0;
    height: var(--badge-size, 96px);
    margin-bottom: var(--badge-drop, 8px);
    vertical-align: middle;
}
.badge-vis {
    display: inline-block;
    vertical-align: middle;
    margin: 0 var(--badge-gap, 16px) var(--badge-drop, 8px) 0;
}
.badge-vis img {
    height: var(--badge-size, 96px);
    width: var(--badge-size, 96px);
    object-fit: contain;
    display: block;
}

/* ---- chat preview ----
   Twitch's own chat line: Inter 14px, bold name, 22px lines with 4px 16px
   padding, 18px badges 3px apart. Fixed colors: these are Twitch's themes. */
.chat-preview {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}
.chat-preview[hidden] { display: none; }
.chat-pv-col {
    flex: 0 1 380px;
    min-width: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid #29292f;
}
.chat-pv-dark  { --chat-bg: #18181b; --chat-bg-hover: #3d3d40; --chat-ink: #efeff1; }
.chat-pv-light { --chat-bg: #ffffff; --chat-bg-hover: #f2f2f2; --chat-ink: #0e0e10; border-color: #ffffff; }
.chat-pv-line {
    display: block;
    padding: 4px 16px;
    background: var(--chat-bg);
    color: var(--chat-ink);
    font-family: var(--font-paint);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-pv-line.chat-pv-hover { background: var(--chat-bg-hover); }
.chat-pv-badge {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 3px 1.5px 0;
    vertical-align: middle;
    object-fit: contain;
}
/* The painted box is the text's own height, as in the big preview. */
.chat-pv-name { display: inline-block; font-weight: 700; line-height: normal; }

/* ============================================================
   PREVIEW OPTIONS BAR
   ============================================================ */
.preview-bar-wrap {
    max-width: none;
    margin: var(--sp-8) 0 0;
    padding: 22px 0 0;
    border-top: 1px solid #262629;
}
.preview-bar {
    /* --pv-gap between controls inside a group, --pv-sep from a divider to
       its neighbours on both sides. */
    --pv-gap: 8px;
    --pv-sep: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--pv-sep);
    padding: 0;
    width: 100%;
}
.pv-group {
    display: flex;
    align-items: center;
    gap: var(--pv-gap);
    min-width: 0;
    flex-shrink: 0;
}
/* Vertical hairlines between the groups. */
.pv-group + .pv-group::before {
    content: '';
    width: 1px;
    align-self: stretch;
    background: #262629;
    margin-right: calc(var(--pv-sep) - var(--pv-gap));
}
.pv-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}
.pv-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    height: 30px;
    padding: 0 10px;
    background: var(--bg-menu);
    border: 1px solid var(--border);
    color: var(--ink);
    border-radius: var(--radius-md);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--btn-tr);
}
/* The Dark/White pills are 30px tall. */
.preview-bar .seg-toggle { padding: 2px; }
.preview-bar .seg-btn { height: 30px; padding-top: 0; padding-bottom: 0; }
.pv-btn:hover { background: var(--bg-hover); color: var(--btn-ink-hi); border-color: var(--btn-line-hover); }
.pv-btn:active { background: var(--btn-face-press); }
.pv-btn.active { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); }

/* Shown on small screens only. */
.pv-toggle { display: none; }

/* ============================================================
   SEGMENTED CONTROL
   ============================================================ */
.seg-toggle {
    display: inline-flex;
    background: var(--bg-deep);
    border: 1px solid var(--border-well);
    border-radius: var(--radius-lg);
    padding: 3px;
    gap: 2px;
}
.seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: var(--fw-semi);
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--btn-tr);
}
.seg-btn:hover { background: var(--bg-hover); color: var(--ink-hi); }
.seg-btn:active { background: var(--btn-face-press); }
.seg-btn.active { background: var(--accent-fill); color: #fff; }
.seg-btn.active:hover { background: var(--accent-fill-hover); }
.seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 4px rgba(139, 92, 246, 0.6); }

/* ============================================================
   FIELDS: text box, number field, range slider
   ============================================================ */
.text-box, .num-input {
    background: var(--bg-deep);
    border: 1px solid var(--border-well);
    color: #eee;
    padding: 9px 10px;
    border-radius: var(--radius-lg);
    font-size: 12px;
    width: 100%;
}
.text-box:focus, .num-input:focus { border-color: var(--accent); outline: none; }
.num-input { width: 44px; padding: 6px 5px; font-size: var(--fs-md); text-align: right; }

/* Drag up or down on a number field to change it. touch-action keeps a
   touch drag from scrolling the page. */
.num-input { cursor: ns-resize; appearance: textfield; -moz-appearance: textfield; touch-action: none; }
.num-input:focus { cursor: text; }
.num-input::-webkit-outer-spin-button,
.num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.num-scrubbing,
body.num-scrubbing * { cursor: ns-resize !important; user-select: none; }

.num-wrap {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
}
.num-wrap .num-input {
    font-family: var(--font-sans);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.num-steppers {
    display: flex;
    flex-direction: column;
    width: 16px;
    flex-shrink: 0;
    border: 1px solid var(--border-well);
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    overflow: hidden;
    background: var(--bg-deep);
}
.num-step {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--ink-4);
    font-size: var(--fs-3xs);
    cursor: pointer;
}
.num-step:hover { background: var(--bg-item-active); color: #fff; }
.num-step:active { background: var(--accent); color: #fff; }
/* Focus outlines the whole control, field and steppers. */
.num-wrap:focus-within .num-input,
.num-wrap:focus-within .num-steppers { border-color: var(--accent); }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #35353c;
    border-radius: 2px;
}
input[type="range"]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: #35353c;
    border-radius: 2px;
}

/* ============================================================
   TOOLBAR CARD: your name, then the list controls
   ============================================================ */
.space-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--sp-5);
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-2xl);
    padding: 10px 12px;
    margin-bottom: 20px;
}
.section-actions {
    display: inline-flex;
    gap: var(--sp-3);
    row-gap: var(--sp-3);
    flex-wrap: wrap;
    cursor: default;
}
.space-toolbar .section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: center;
    margin: 0;
    width: 100%;
}

/* ---- your name and save state (first in the toolbar) ---- */
.user-bar {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-5);
    min-width: 0;
    margin-right: var(--sp-3);
}
.user-chip { max-width: 260px; min-width: 0; }
.user-chip[hidden] { display: none; }
.user-chip-avatar {
    width: 20px;
    height: 20px;
    margin: -3px 0;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.user-chip-avatar[hidden],
.user-chip i[hidden] { display: none; }
.user-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink-hi);
}
.fav-filter-btn .user-chip-edit { font-size: 10px; opacity: 0.6; }
.user-chip:hover .user-chip-edit { opacity: 1; }
.save-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: 12px;
    font-weight: var(--fw-semi);
    color: var(--ink-3);
    white-space: nowrap;
}
.save-status:empty { display: none; }
.save-status[data-state="saved"] i { color: #22c55e; }
.save-status[data-state="error"] { color: var(--btn-danger-ink); }
.save-status .small-btn { padding: 4px 10px; margin-left: 2px; }

/* ---- Show: your name / paint names ---- */
.text-mode-ctl {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    min-width: 0;
}
.text-mode-ctl .seg-toggle { padding: 2px; min-width: 0; }
.text-mode-ctl .seg-btn { padding-top: 5px; padding-bottom: 5px; min-width: 0; }
.text-mode-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Your badges inside the Badges > On button. */
.badge-mode-imgs { display: inline-flex; align-items: center; gap: 3px; }
.badge-mode-imgs:empty { display: none; }
.badge-mode-imgs img { width: 16px; height: 16px; object-fit: contain; }
.badge-mode-imgs i { font-size: 11px; }

/* ---- list controls ---- */
.list-ctl-wrap { position: relative; display: inline-flex; }
.list-ctl-btn > i:first-child { font-size: var(--fs-md); width: 1.05em; }
/* Highlighted while the list is filtered */
.list-ctl-btn.active {
    background: var(--accent-fill);
    border-color: var(--accent-fill);
    color: var(--btn-ink-hi);
}
.list-ctl-btn.active:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.list-ctl-btn:active { background: var(--btn-face-press); }
.list-ctl-badge {
    font-size: var(--fs-xs);
    font-weight: 700;
    opacity: 0.85;
    margin-left: -3px;
}
.list-ctl-badge:empty { display: none; }

/* ---- card size [-] [100 %] [+] [reset] [background], pushed right ---- */
.card-size-ctl {
    display: inline-flex;
    align-items: stretch;
    gap: var(--sp-2);
    margin-left: auto;
}
/* .fav-filter-btn's padding applies here too, as in the Paint Creator. */
.card-size-btn { width: 30px; flex-shrink: 0; }
.card-theme-btn { width: 30px; flex-shrink: 0; margin-left: var(--sp-2); }
.card-size-btn[data-card-zoom-btn="minus"],
.card-size-btn[data-card-zoom-btn="plus"] {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}
.card-size-field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    background: var(--bg-deep);
    border: 1px solid var(--border-well);
    border-radius: var(--btn-radius);
    padding: 0 6px;
    cursor: text;
    transition: var(--btn-tr);
}
.card-size-field:focus-within { border-color: var(--accent); }
.card-size-num:focus,
.card-size-num:focus-visible { outline: none; }
.card-size-num {
    width: 3ch;
    min-width: 1ch;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    color: #eee;
    font: inherit;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}
.card-size-num::-webkit-outer-spin-button,
.card-size-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.card-size-unit { font-size: 12px; color: var(--ink-3); padding-left: 1px; }

/* ============================================================
   DROPDOWN MENUS
   ============================================================ */
.export-caret { font-size: var(--fs-xs); opacity: 0.8; }
.export-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    min-width: 210px;
    padding: 6px;
    text-align: left;
    max-height: min(70vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.export-menu[hidden] { display: none !important; }
.export-menu.anchor-left { right: auto; left: 0; }
.list-ctl-menu { min-width: 232px; }
.list-ctl-menu .export-jfmt-hint { max-width: 232px; }
.export-menu button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-4);
    background: transparent;
    color: var(--ink);
    font-weight: var(--fw-normal);
    padding: 9px 10px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    white-space: nowrap;
}
.export-menu button:hover { background: var(--btn-face-hover); color: var(--btn-ink-hi); }
.export-menu button:active { background: var(--btn-face-press); }
.export-menu button i { width: 16px; text-align: center; opacity: 0.9; }
.export-menu button:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.export-menu button:disabled:hover { background: transparent; color: var(--btn-ink); }
.export-menu-count {
    margin-left: auto;
    padding-left: 12px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.export-menu-heading {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    padding: 8px 10px 4px;
}
.export-menu-sep { height: 1px; background: var(--border-soft); margin: 6px 4px; }
/* Explainer text inside a menu */
.export-jfmt-hint {
    margin: 0;
    padding: 2px 10px 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    line-height: 1.4;
    color: var(--ink-4);
    white-space: normal;
    max-width: 260px;
}
.list-ctl-item {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}
.list-ctl-item .list-ctl-label { flex: 1; text-align: left; }
.list-ctl-item .list-ctl-label em {
    font-style: normal;
    opacity: 0.5;
    font-size: 0.75em;
    margin-left: 5px;
}
/* The chosen item's text is in the accent color, also while hovered; its
   icon and note stay light. */
.export-menu .list-ctl-item.selected { color: var(--accent); }
.export-menu .list-ctl-item.selected > i,
.export-menu .list-ctl-item.selected .list-ctl-label em { color: var(--btn-ink-hi); }
.list-ctl-item.selected .list-ctl-label { font-weight: 600; }
/* Checkbox rows: box, then the row's own glyph, then the label. */
.export-menu .list-ctl-check-item .list-ctl-box { color: var(--btn-ink); opacity: 1; }
.export-menu .list-ctl-check-item.selected .list-ctl-box { color: var(--btn-ink-hi); }
.export-menu .list-ctl-check-item .list-ctl-type-icon { opacity: 0.55; font-size: var(--fs-sm); }
.export-menu .list-ctl-check-item.selected .list-ctl-type-icon { opacity: 0.9; }

/* Count badge (Favorites menu, month titles) */
.count-pill {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--bg-item);
    color: var(--ink-3);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
    /* Snaps the pill to whole pixels so its digit stays centered. */
    will-change: transform;
}
.count-pill:empty { display: none; }
.list-ctl-label .count-pill { margin: -1px 0 -1px 8px; vertical-align: 1px; }
.list-ctl-item.selected .count-pill { background: var(--bg-item-active); color: var(--ink-hi); }

/* ============================================================
   POPOVER SHELL - one surface for everything that floats
   ============================================================ */
.copy-format-menu,
.adjust-popover,
.export-menu {
    background: var(--bg-menu);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-pop);
}

/* ============================================================
   PAINT LISTS
   ============================================================ */
#paintsSection { padding: 0 20px; }
.allCosmetics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 40px;
    padding: 10px 0;
    overflow: visible;
}
/* Card size: `zoom`, not transform, so the cards reflow instead of
   overlapping. The gaps scale with it. */
#paintsSection .allCosmetics {
    gap: calc(10px * var(--card-zoom, 1));
    padding: calc(10px * var(--card-zoom, 1)) 0;
}
.allCosmetics > .paintContainer { zoom: var(--card-zoom, 1); }

/* Line above the list during search and favorites: says what it holds. */
.list-caption {
    color: var(--ink-4);
    font-size: 13px;
    font-weight: var(--fw-normal);
    margin: 6px 0 0;
    padding: 0 20px;
}
.list-caption:empty { display: none; }
.list-caption b { color: var(--ink-2); font-weight: var(--fw-semi); }

/* A pill: the border separates one card from the next. */
.paintContainer {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-well);
    border-radius: 19px;
    height: 38px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.12s, border-color 0.12s;
    position: relative;
    overflow: visible;   /* the favorite star sits outside the card */
    max-width: min(100%, 340px);
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    touch-action: pan-y;
}
.paintContainer:hover { transform: scale(1.05); z-index: 10; border-color: var(--border-strong); }
/* The paint shown in the preview */
.paintContainer.active {
    background-color: var(--bg-active-violet);
    border-color: var(--accent);
}
/* Light card background (the sun/moon button): Twitch's light chat. */
html.cards-light .allCosmetics > .paintContainer {
    background-color: #ffffff;
    border-color: #e4e4e7;
}
html.cards-light .allCosmetics > .paintContainer:hover { border-color: #a1a1aa; }
html.cards-light .allCosmetics > .paintContainer.active {
    background-color: #ede9fe;
    border-color: var(--accent);
}
.paint {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: var(--fw-bold);
    /* normal, as the preview and chat lines use, so the paint lands on the
       letters the same way. Not 1 (the span's overflow:hidden cut off
       g/j/p/y and squashed the paint) and not a number like 1.21: below the
       font's rounded height, Chrome moves the text up a whole pixel. */
    line-height: normal;
    overflow: visible;
    height: auto;
    padding: 0;
    width: auto;
    max-width: 100%;
}
/* Truncated rather than allowed to widen the card; the full name is in the
   span's title. */
.paint > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Centres the name's capitals in the card: Chrome's whole-pixel rounding of
   the font and the card leaves them up to 1px off. _syncCardTextNudge() in
   script.js measures the amount. */
.allCosmetics > .paintContainer .paint > span {
    position: relative;
    top: var(--card-text-nudge, 0px);
}
/* Card names without will-change: transform (from .text-effect). Chrome keeps
   such a layer at the largest scale it has drawn it at, so after the 1.05
   hover zoom the name stayed slightly blurred until the page was reloaded.
   Without the hint it is redrawn sharp at 1.0 when the hover ends. */
.paintContainer .text-effect { will-change: auto; }
.paint span.text-effect {
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- favorite star ----
   Shown over the card's right half (see _initPaintListEvents), starred or
   not. Hidden with opacity, not visibility, so it stays focusable. */
.fav-paint-btn {
    position: absolute;
    top: -7px;
    right: -7px;
    background: #f59e0b;
    color: #1a1a1e;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: var(--fs-2xs);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
    z-index: 11;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: var(--btn-tr), transform .12s ease, opacity .12s ease;
}
.fav-paint-btn:focus-visible,
.paintContainer:focus-visible .fav-paint-btn,
.paintContainer.hover-right .fav-paint-btn { opacity: 1; pointer-events: auto; transform: scale(1); }
.fav-paint-btn:hover,
.paintContainer .fav-paint-btn:hover,
.paintContainer.hover-right .fav-paint-btn:hover { background: #fbbf24; transform: scale(1.1); }

/* The "ACTIVE" chip on the badges the looked-up user shows right now */
.active-paint-chip {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    color: #111;
    font-size: var(--fs-3xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.active-paint-chip i { margin-right: 3px; }

.empty-state {
    color: var(--ink-4);
    width: 100%;
    padding: 40px 20px;
    margin: 0;
    text-align: center;
    font-size: 14px;
}
.empty-state b { color: var(--ink); }
.fav-ink { color: #f59e0b; }
.empty-state .small-btn { margin-left: 6px; vertical-align: middle; }
.placeholder-text {
    color: var(--ink-4);
    font-weight: normal;
    font-size: 14px;
}

/* ============================================================
   PAINT MENU (right-click / press and hold)
   ============================================================ */
.copy-format-menu {
    position: fixed;
    z-index: 3000;
    min-width: 178px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.copy-format-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-4);
    background: transparent;
    color: var(--btn-ink);
    border: none;
    padding: 9px 10px;
    border-radius: var(--btn-radius-sm);
    font-size: 12.5px;
    font-weight: var(--fw-normal);
    white-space: nowrap;
    cursor: pointer;
    text-align: left;
}
.copy-format-menu button:hover,
.copy-format-menu button:focus-visible { background: var(--btn-face-hover); color: var(--btn-ink-hi); outline: none; }
.copy-format-menu button i { width: 16px; text-align: center; opacity: 0.9; }
.copy-format-menu .export-menu-sep { margin: 3px 4px; }
.paint-ctx-menu { min-width: 190px; }
.paint-ctx-menu .ctx-fav i { color: #f5c518; width: 1.1em; text-align: center; }
.paint-ctx-menu .ctx-fav:hover,
.paint-ctx-menu .ctx-fav:focus-visible { background: rgba(245, 197, 24, 0.14); color: var(--btn-ink-hi); }

/* ============================================================
   TOAST
   ============================================================ */
#appToast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: #232328;
    color: #fff;
    border: 1px solid #3a3a42;
    border-radius: var(--radius-xl);
    padding: 11px 18px;
    font-size: 13px;
    box-shadow: var(--shadow-pop);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 1000;
    max-width: min(90vw, 480px);
    width: max-content;
}
#appToast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
#appToast.show.has-action { pointer-events: auto; }
#appToast i { color: var(--accent); margin-right: 6px; }
#appToast.has-action {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    max-width: min(92vw, 620px);
}
#appToast.has-action i { color: #f5a524; margin-right: 0; flex-shrink: 0; }
#appToast.has-action .toast-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
#appToast .toast-msg { min-width: 0; }
#appToast .toast-action {
    flex-shrink: 0;
    border: none;
    border-radius: var(--btn-radius-sm);
    padding: 6px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
   MODAL (keyboard shortcuts)
   ============================================================ */
.app-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.app-modal {
    background: var(--bg-modal);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    width: min(480px, 100%);
    max-height: min(70vh, 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.app-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 20px 16px 12px;
    font-size: 16px;
    font-weight: var(--fw-black);
    color: #fff;
    border-bottom: 1px solid var(--border-soft);
}
.app-modal-head i { color: #f5a524; margin-right: 6px; }
.app-modal-close i { margin-right: 0; color: inherit; }
.app-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    color: var(--btn-ink-quiet);
    border: none;
    border-radius: var(--btn-radius-sm);
    cursor: pointer;
    font-size: 18px;
}
.app-modal-close:hover { background: var(--btn-face-hover); color: var(--btn-ink-hi); }
.app-modal-list {
    overflow-y: auto;
    padding: 4px 16px 8px;
    flex: 1 1 auto;
}
.app-modal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-4);
    padding: 10px 16px 14px;
    border-top: 1px solid var(--border);
}
.app-modal-overlay[hidden],
.app-modal [hidden] { display: none; }

/* ---- the Twitch name dialog ---- */
.name-modal { width: min(420px, 100%); margin: 0; }
.name-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: 16px 16px 18px;
}
.name-modal-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
}
.name-modal-body { overflow-y: auto; }
.name-field { position: relative; display: block; width: 100%; }
.name-field > i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-4);
    font-size: var(--fs-sm);
    pointer-events: none;
}
.name-field .text-box {
    height: 40px;
    padding: 0 12px 0 34px;
    font-size: var(--fs-md);
    font-weight: var(--fw-normal);
}
.name-field .text-box::placeholder { color: var(--ink-4); }
.name-modal-error { margin: 0; line-height: 1.4; }

/* Suggestions: the field and its list read as one control. */
.name-combo { display: flex; flex-direction: column; }
.name-suggest {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    background: var(--bg-menu);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    text-align: left;
}
.name-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 5px 8px;
    border-radius: var(--radius-md);
    color: var(--ink);
    font-size: 13px;
    font-weight: var(--fw-semi);
    cursor: pointer;
}
.name-suggest-item.active { background: var(--bg-hover); color: var(--ink-hi); }
.name-suggest-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-suggest-login {
    margin-left: auto;
    font-size: 11px;
    font-weight: var(--fw-normal);
    color: var(--ink-4);
}
.name-suggest-avatar,
.name-profile-avatar {
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-item);
}
.name-suggest-avatar { width: 28px; height: 28px; }
.name-suggest-avatar.is-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ink-4);
}

/* "Yes, that's me": the profile of the name in the field. */
.name-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-active-violet);
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: var(--radius-lg);
    text-align: left;
}
.name-profile-avatar { width: 44px; height: 44px; }
.name-profile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.name-profile-name {
    font-size: 15px;
    font-weight: var(--fw-black);
    color: var(--ink-hi);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.name-profile-sub { font-size: 12px; color: var(--ink-3); }
.name-profile-check { margin-left: auto; font-size: 18px; color: #22c55e; }
.name-modal .app-modal-foot .blue-button { min-width: 96px; justify-content: center; }

.app-modal .shortcut-table { text-align: left; }
.shortcut-table { display: flex; flex-direction: column; gap: var(--sp-1); }
.app-modal .shortcut-group {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: var(--sp-5) 0 var(--sp-2);
    text-align: left;
}
.shortcut-group:first-child { margin-top: 0; }
.shortcut-row {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: 9px 0;
    font-size: 13px;
    border-bottom: 1px solid #262629;
    text-align: left;
}
.shortcut-row:last-child { border-bottom: none; }
.app-modal .shortcut-keys {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    line-height: 1.6;
}
.shortcut-what { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); line-height: 1.4; padding-right: var(--sp-5); }
.shortcut-keys kbd {
    display: inline-block;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    padding: 2px 7px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    line-height: 1.6;
    color: var(--accent-ink-hi);
}
.shortcut-combo { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; color: var(--ink-3); font-size: var(--fs-xs); }
.shortcut-or { color: var(--ink-4); font-size: var(--fs-xs); }

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-menu);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-strong);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    color: var(--btn-ink);
    font-size: var(--fs-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, color 0.15s ease;
}
#scrollTopBtn.visible { opacity: 1; pointer-events: auto; }
#scrollTopBtn:hover { color: white; border-color: var(--ink-5); }

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   1024px: tighter padding. 768px: preview options fold away and
   dropdowns become bottom sheets. 480px: phones. Same breakpoints as the
   Paint Creator.
   ============================================================ */
@media (max-width: 1024px) {
    .app-shell { padding: var(--sp-7) var(--sp-7) 60px; }
    #visualizer { padding: var(--sp-7) var(--sp-7) 0; }
}

@media (max-width: 768px) {
    .app-shell { padding: var(--sp-6) var(--sp-5) 60px; }

    .preview-bar-wrap { padding-top: var(--sp-6); }
    .preview-bar { flex-wrap: wrap; row-gap: var(--sp-6); gap: var(--sp-6) var(--sp-4); }
    .pv-group { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; justify-content: center; }
    .pv-group + .pv-group::before { content: none; }
}

/* Narrow or short screens: compact preview, options behind a toggle. */
@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) {
    .visualizer-inner { padding: 12px 14px 10px; }
    .visualizer-stage { min-height: max(72px, var(--stage-floor, 0px)); }
    #visualizer { padding: var(--sp-5) var(--sp-5) 0; }

    .pv-toggle {
        display: flex;
        width: max-content;
        max-width: 100%;
        align-items: center;
        justify-content: center;
        gap: var(--sp-3);
        margin: 8px auto 0;
        min-height: 32px;
        padding: 0 14px;
        background: var(--bg-menu);
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        color: var(--ink-2);
        font-size: 12px;
        font-weight: var(--fw-semi);
        white-space: nowrap;
        cursor: pointer;
        transition: var(--btn-tr);
    }
    .pv-toggle:hover { background: var(--bg-hover); color: var(--ink-hi); border-color: var(--btn-line-hover); }
    .pv-toggle:focus-visible { outline: none; box-shadow: var(--btn-focus); }
    .pv-toggle-caret { font-size: var(--fs-xs); opacity: 0.8; }
    #visualizer.pv-open .pv-toggle { color: var(--ink-hi); border-color: var(--btn-line-hover); }

    #visualizer .preview-bar-wrap { display: none; }
    #visualizer.pv-open .preview-bar-wrap {
        display: block;
        margin: 10px 0 0;
        padding-top: 12px;
    }
    /* The chat lines fold away with the bar. */
    #visualizer .chat-preview { display: none; }
    #visualizer.pv-open .chat-preview:not([hidden]) { display: flex; margin-top: 10px; gap: 8px; }
    .chat-pv-line { padding: 4px 10px; }
    .preview-bar { row-gap: 12px; gap: 12px var(--sp-4); }
}

/* Landscape phones */
@media (max-width: 1024px) and (max-height: 500px) {
    .visualizer-inner { padding: 8px 12px 6px; }
    .visualizer-stage { min-height: max(56px, var(--stage-floor, 0px)); }
    #visualizer { padding-top: var(--sp-3); }
    .pv-toggle { margin-top: 4px; min-height: 28px; }
}

@media (max-width: 768px) {
    #scrollTopBtn {
        width: 38px;
        height: 38px;
        right: 12px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .app-modal-overlay { padding: 12px; }
    .app-modal { max-height: min(82vh, 640px); }

    /* The toolbar buttons fill each row they wrap onto. */
    .section-actions > * { flex: 1 1 auto; min-width: 0; }
    .section-actions .list-ctl-wrap > .fav-filter-btn { width: 100%; }
    /* The size group keeps its natural width. */
    .section-actions > .card-size-ctl { flex: 0 0 auto; margin-left: 0; }
    /* Your name on its own row, the save state at its end. */
    .section-actions > .user-bar { flex: 1 1 100%; justify-content: space-between; margin-right: 0; }

    /* Dropdowns become sheets pinned to the bottom of the screen. */
    .list-ctl-wrap > .export-menu {
        position: fixed;
        top: auto;
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: min(72vh, 640px);
        overflow-y: auto;
        z-index: 3500;
        transform: none !important;
    }
    .list-ctl-wrap > .export-menu .export-jfmt-hint { max-width: none; }
}

@media (max-width: 480px) {
    body { padding-bottom: 100px; }
    .preview-bar-wrap { padding-left: 10px; padding-right: 10px; }
    .seg-toggle { flex-wrap: wrap; }
    .preview-bar .pv-label { flex-basis: 100%; }
    #appToast { max-width: 94vw; padding: 9px 14px; line-height: 1.3; }
    #appToast.has-action { gap: var(--sp-3); max-width: 94vw; }
    #appToast .toast-action { padding: 5px 10px; font-size: 12px; }
}

/* ============================================================
   TOUCH
   ============================================================ */
@media (hover: none) {
    /* No hover scaling: a tapped card would stay enlarged. */
    .paintContainer:hover { transform: none; }
    /* Favorites are toggled with a double tap or from the paint menu. */
    .paintContainer .fav-paint-btn { display: none; }
    button, .paintContainer { touch-action: manipulation; }
}
@media (pointer: coarse) {
    .card-size-btn, .card-theme-btn { min-width: 34px; }
    .pv-toggle { min-height: 36px; }
    .num-steppers { width: 24px; }
    .num-input, .text-box { min-height: 34px; }
    input[type="range"] { min-height: 34px; }
    .seg-btn, .pv-btn, .fav-filter-btn { min-height: 34px; }
    .small-btn { min-height: 36px; }
    .fav-paint-btn::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   ERROR TEXT - last, so it recolors .empty-state / .placeholder-text
   ============================================================ */
.is-error {
    color: var(--btn-danger-ink);
    font-size: 13px;
}
.is-error::before {
    content: "\f071";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 6px;
}