/* ==========================================================================
   Sundolphin: design tokens
   ========================================================================== */
:root {
  color-scheme: light;
  --paper: #f4f4f1;
  --surface: #ffffff;
  --surface-2: #ebebe6;
  --ink: #15181f;
  --ink-2: #4e525c;
  --ink-3: #767b86;
  --line: #e1e1db;
  --line-strong: #c9c9c2;
  --cobalt: #2a3bd1;
  --cobalt-hover: #2231b8;
  --cobalt-soft: #e7e9fb;
  --sticker: #ffd54a;
  --sticker-ink: #1b1400;
  --success: #1e7a50;
  --success-soft: #e3f3ea;
  --danger: #b42318;
  --danger-soft: #fbe9e7;
  --star: #e39b12;
  --heart: #d6336c;
  --shadow-lg: 0 24px 60px rgba(21, 24, 31, 0.22);
  --shadow-sm: 0 1px 2px rgba(21, 24, 31, 0.08);
  --radius-art: 14px;
  --radius-card: 18px;
  --radius-ctl: 10px;
  --font: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --gutter: 20px;
  --topbar-h: 64px;
  --tabbar-h: 62px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111318;
  --surface: #191c23;
  --surface-2: #232733;
  --ink: #edeff3;
  --ink-2: #b4b9c5;
  --ink-3: #848a97;
  --line: #2a2f3a;
  --line-strong: #3d4351;
  --cobalt: #4a5bea;
  --cobalt-hover: #5b6bf1;
  --cobalt-soft: #212650;
  --success: #4ade80;
  --success-soft: #16311f;
  --danger: #f0655a;
  --danger-soft: #3a1c19;
  --star: #f2b02c;
  --heart: #ff5c8a;
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.has-layer { overflow: hidden; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; }
input, select, textarea { font: inherit; color: inherit; }
kbd { font-family: inherit; }
[inert] { pointer-events: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.search__input:focus-visible { outline: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -80px; left: 16px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--cobalt); color: #fff; font-weight: 700; }
.skip-link:focus { top: 12px; }
.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.main { min-height: 62vh; }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 1.25em; height: 1.25em; flex: none; color: inherit; }
.muted { color: var(--ink-3); }

/* ==========================================================================
   Buttons and controls
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn .icon { width: 18px; height: 18px; }
.btn--primary { background: var(--cobalt); color: #fff; }
.btn--primary:hover { background: var(--cobalt-hover); }
.btn--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { filter: brightness(0.94); }
.btn--sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.btn--lg { height: 48px; padding: 0 22px; font-size: 16px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.55; }
.btn[aria-pressed="true"] .icon { fill: currentColor; }
.btn--wish[aria-pressed="true"] { color: var(--heart); border-color: var(--heart); }

.btn--add { height: 32px; padding: 0 12px; gap: 5px; background: var(--cobalt-soft); color: var(--cobalt); font-size: 13.5px; }
.btn--add:hover { background: var(--cobalt); color: #fff; }
.btn--add[data-in-cart="true"] { background: var(--success-soft); color: var(--success); }
.btn--add[data-in-cart="true"]:hover { background: var(--success); color: #fff; }
.btn--add .icon { width: 15px; height: 15px; }

.iconbtn { position: relative; width: 40px; height: 40px; border-radius: 999px; display: inline-grid; place-items: center; color: var(--ink-2); flex: none; transition: background-color 0.15s, color 0.15s; }
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.iconbtn .icon { width: 22px; height: 22px; }
.iconbtn--sm { width: 34px; height: 34px; }
.iconbtn--sm .icon { width: 18px; height: 18px; }
.iconbtn--danger:hover { background: var(--danger-soft); color: var(--danger); }
.iconbtn--outline { border: 1px solid var(--line); background: var(--surface); }
.iconbtn:disabled { opacity: 0.35; cursor: default; }
.iconbtn:disabled:hover { background: var(--surface); color: var(--ink-2); }

.badge { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cobalt); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.badge[hidden] { display: none; }
.badge.is-bumping { animation: bump 0.35s ease-out; }
@keyframes bump { 40% { transform: scale(1.35); } }

.select { position: relative; display: inline-flex; align-items: center; }
.select__input { appearance: none; -webkit-appearance: none; height: 38px; padding: 0 38px 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; }
.select .icon { position: absolute; right: 12px; pointer-events: none; width: 18px; height: 18px; color: var(--ink-3); }

.segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.segment__btn { padding: 6px 14px; border-radius: 999px; font-weight: 600; color: var(--ink-2); font-size: 13.5px; white-space: nowrap; }
.segment__btn[aria-pressed="true"], .segment__btn[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.switch__track { width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; transition: background-color 0.15s; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; transition: transform 0.15s; }
.switch[aria-checked="true"] .switch__track { background: var(--success); }
.switch[aria-checked="true"] .switch__track::after { transform: translateX(16px); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill .icon { width: 13px; height: 13px; }
.pill--ok { background: var(--success-soft); color: var(--success); }
.pill--warn { background: var(--danger-soft); color: var(--danger); }
.pill--muted { background: var(--surface-2); color: var(--ink-2); }
.pill--info { background: var(--cobalt-soft); color: var(--cobalt); }

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
html[data-listing-workspace] { --topbar-h: 0px; }
html[data-listing-workspace] .topbar,
html[data-listing-workspace] .tabbar,
html[data-listing-workspace] .footer { display: none; }
.topbar__inner { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 22px; height: var(--topbar-h); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; letter-spacing: -0.03em; }
.brand__mark { width: 30px; height: 30px; }

.views { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.views__link { padding: 7px 15px; border-radius: 999px; font-weight: 600; color: var(--ink-2); transition: color 0.15s; }
.views__link:hover { color: var(--ink); }
.views__link[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* Search is a button, sized by its own label, never by the space around it. One shape per breakpoint. */
.search { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.search__trigger { display: inline-flex; align-items: center; gap: 8px; height: 40px; max-width: 240px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.search__trigger:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink); }
.search__trigger:focus-visible { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft); }
.search__icon { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.search__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__kbd { flex: none; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--ink-3); font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.search.has-value .search__trigger { border-color: var(--cobalt); color: var(--cobalt); background: var(--cobalt-soft); }
.search.has-value .search__icon { color: var(--cobalt); }
.search.has-value .search__kbd { display: none; }
.search__clear[hidden] { display: none; }

.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 46; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); max-height: min(440px, 62vh); overflow: auto; }
.suggest[hidden] { display: none; }
.suggest__opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.suggest__opt[aria-selected="true"] { background: var(--surface-2); }
.suggest__opt .art { width: 46px; height: 34px; border-radius: 6px; }
.suggest__ico { width: 46px; height: 34px; border-radius: 6px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-2); }
.suggest__ico .icon { width: 18px; height: 18px; }
.suggest__label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__sub { color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__kind { color: var(--ink-3); font-size: 12px; white-space: nowrap; }

.topbar__actions { display: flex; align-items: center; gap: 4px; justify-self: end; min-width: 0; }
.account { position: relative; }
.account { margin-left: 6px; }
.avatar { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: hsl(230 60% 42%); color: #fff; font-weight: 700; font-size: 12px; border: 2px solid var(--surface); }

.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; z-index: 45; }
.menu[hidden] { display: none; }
.menu__head { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu__name { font-weight: 700; }
.menu__sub { color: var(--ink-3); font-size: 13px; }
.menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-weight: 500; width: 100%; }
.menu__item:hover, .menu__item:focus-visible { background: var(--surface-2); outline: none; }
.menu__item .icon { width: 18px; height: 18px; color: var(--ink-3); }

.notif { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); width: 100%; }
.notif:last-child { border-bottom: 0; }
.notif:hover, .notif:focus-visible { background: var(--surface-2); outline: none; }
.notif__icon { width: 34px; height: 34px; border-radius: 999px; background: var(--cobalt-soft); color: var(--cobalt); display: grid; place-items: center; }
.notif__icon .icon { width: 17px; height: 17px; }
.notif__text { font-size: 14px; line-height: 1.4; }
.notif__when { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.notif__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--cobalt); margin-top: 7px; }
.notif.is-read .notif__dot { visibility: hidden; }
.notif.is-read .notif__text { color: var(--ink-2); }

/* ==========================================================================
   Category rail, hero, shelves, cards
   ========================================================================== */
.rail { position: sticky; top: var(--topbar-h); z-index: 30; background: var(--paper); padding: 12px 0 8px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 14px 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 600; white-space: nowrap; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip .icon { width: 18px; height: 18px; }
.chip__count { color: var(--ink-3); font-weight: 500; }
.chip[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-current] .chip__count { color: inherit; opacity: 0.7; }

.hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.hero__main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; padding: 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.hero__art { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-art); overflow: hidden; width: 100%; background: var(--surface-2); }
.hero__art .art { width: 100%; height: 100%; }
.hero__body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 8px 8px 8px 0; min-width: 0; }
.hero__label { display: inline-flex; align-items: center; gap: 6px; color: var(--cobalt); font-weight: 700; font-size: 14px; }
.hero__label .icon { width: 16px; height: 16px; }
.hero__title { font-size: clamp(24px, 2.6vw, 34px); }
.hero__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero__blurb { color: var(--ink-2); max-width: 44ch; }
.hero__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--ink-2); font-size: 14px; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 20px; border-radius: var(--radius-card); min-height: 160px; }
.tile--sell { background: var(--cobalt); color: #fff; }
.tile--sell:hover { background: var(--cobalt-hover); }
.tile--collection { background: var(--surface); border: 1px solid var(--line); }
.tile--collection:hover { border-color: var(--line-strong); }
.tile__icon { width: 30px; height: 30px; }
.tile__title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.tile__sub { margin-top: 4px; opacity: 0.86; font-size: 14px; }
.tile--collection .tile__sub { color: var(--ink-2); opacity: 1; }
.tile__thumbs { display: flex; }
.tile__thumbs .art { width: 60px; height: 44px; border-radius: 9px; border: 2px solid var(--surface); margin-left: -14px; }
.tile__thumbs .art:first-child { margin-left: 0; }
.tile__arrow { position: absolute; right: 18px; bottom: 18px; width: 22px; height: 22px; }

.home { padding-bottom: 8px; }
.shelf { margin-top: 38px; }
.shelf__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.shelf__title { font-size: 22px; }
.shelf__sub { color: var(--ink-3); margin-top: 2px; }
.shelf__tools { display: flex; align-items: center; gap: 12px; }
.shelf__link { font-weight: 700; color: var(--cobalt); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.shelf__link .icon { width: 16px; height: 16px; }
.shelf__arrows { display: none; gap: 6px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 24px 16px; }
/* Bleeds to the viewport edge with the gutter as padding; scroll-padding keeps snap points aligned with the page's left edge, so a shelf never loads scrolled by the gutter. */
.scroller { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); padding: 3px var(--gutter) 14px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: thin; }
.scroller > li { flex: 0 0 236px; scroll-snap-align: start; }

.card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card__art { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-art); overflow: hidden; background: var(--surface-2); }

/* Covers: the image is the control. A button opens a quick look; inside the quick look, a link opens the page.
   The veil names the action while the card is hovered or the cover has keyboard focus. */
.cover { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border-radius: inherit; isolation: isolate; color: inherit; }
.card__art > .cover, .hero__art > .cover, .qv__art > .cover, .item__art > .cover { height: 100%; }
.cover > .art { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cover__veil { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; background: linear-gradient(to top, rgba(21, 24, 31, 0.6), rgba(21, 24, 31, 0.08)); opacity: 0; transition: opacity 0.18s; }
.cover__cta { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: #15181f; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.cover__cta .icon { width: 16px; height: 16px; }
.cover:hover .cover__veil, .cover:focus-visible .cover__veil, .card:hover .cover__veil { opacity: 1; }
.cover:focus-visible { outline-offset: -3px; }
/* The cover's own outline sits under its positioned art in Chromium; the veil is the top layer, so it carries the ring too. */
.cover:focus-visible .cover__veil { outline: 3px solid var(--cobalt); outline-offset: -3px; }
.cover--compact .cover__veil { background: rgba(21, 24, 31, 0.42); }
.cover--compact .cover__cta { width: 28px; height: 28px; padding: 0; gap: 0; justify-content: center; }
.cover--compact .cover__cta .icon { width: 15px; height: 15px; }
.cover--compact .cover__label { display: none; }
.cover--plain > .art { transition: none; }
.cover--plain:focus-visible::after { content: ''; position: absolute; inset: 0; border-radius: inherit; outline: 3px solid var(--cobalt); outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .cover:not(.cover--plain):hover > .art, .cover:not(.cover--plain):focus-visible > .art, .card:hover .cover:not(.cover--plain) > .art { transform: scale(1.04); }
}
@media (hover: none) {
  .cover__veil { opacity: 1; background: none; align-items: start; justify-items: end; }
  .card__art > .cover .cover__veil { padding-top: 46px; }
  .cover__cta { width: 30px; height: 30px; padding: 0; gap: 0; justify-content: center; }
  .cover__label { display: none; }
  .cover--compact .cover__veil, .qv__art > .cover .cover__veil { display: none; }
}
.card__tag { position: absolute; top: 8px; left: 8px; pointer-events: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #15181f; font-size: 12px; font-weight: 700; }
.card__tag .icon { width: 14px; height: 14px; }
.card__actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.card__iconbtn { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: #15181f; }
.card__iconbtn .icon { width: 17px; height: 17px; }
.card__iconbtn[aria-pressed="true"] { color: var(--heart); }
.card__iconbtn[aria-pressed="true"] .icon { fill: currentColor; }
.card__body { display: flex; flex-direction: column; gap: 5px; }
.card__title { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.card__titlelink { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; border-radius: 4px; }
.card__titlelink:hover { text-decoration: underline; text-underline-offset: 3px; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.card__type { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.card__type .icon { width: 15px; height: 15px; }

.creator { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; border-radius: 999px; max-width: 100%; }
.creator:hover { color: var(--ink); }
.creator--md { font-size: 15px; font-weight: 600; color: var(--ink); }
.creator__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-mini { border-radius: 999px; display: inline-grid; place-items: center; flex: none; color: #fff; font-weight: 700; line-height: 1; }

.rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.rating .icon { width: 14px; height: 14px; color: var(--star); }
.rating__count { color: var(--ink-3); }
.rating--new { color: var(--success); font-weight: 700; }
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars .icon { width: 16px; height: 16px; }
.stars .is-empty { color: var(--line-strong); }

.sticker { position: absolute; left: 10px; bottom: 10px; pointer-events: none; padding: 5px 10px; border-radius: 9px; background: var(--sticker); color: var(--sticker-ink); font-weight: 800; font-size: 14px; letter-spacing: -0.01em; line-height: 1.2; transform: rotate(-3deg); transform-origin: left bottom; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0, 0, 0, 0.22); }
.sticker small { font-size: 0.78em; font-weight: 700; opacity: 0.75; }
.sticker--lg { left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 12px; font-size: 20px; }
.art { width: 100%; height: 100%; }
.art--photo { display: block; object-fit: cover; object-position: center; background: var(--surface-2); }

.cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1099px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat { display: flex; flex-direction: column; justify-content: space-between; gap: 26px; padding: 18px; border-radius: var(--radius-card); min-height: 140px; color: #fff; transition: filter 0.15s; }
.cat:hover { filter: brightness(1.08); }
.cat .icon { width: 26px; height: 26px; }
.cat__label { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.cat__count { opacity: 0.82; font-size: 13px; }

/* Results */
.results { padding-bottom: 8px; }
.results__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 22px 0 16px; }
.results__title { font-size: 28px; overflow-wrap: anywhere; }
.results__count { color: var(--ink-3); margin-top: 4px; }
.results__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.filter { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; flex: none; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.filter:hover { border-color: var(--line-strong); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--cobalt-soft); border-color: var(--cobalt); color: var(--cobalt); }
.filter--clear { display: inline-flex; align-items: center; gap: 4px; border-color: transparent; background: transparent; color: var(--cobalt); }
.filter--clear .icon { width: 14px; height: 14px; }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 64px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius-card); }
.empty .icon { width: 40px; height: 40px; color: var(--ink-3); }
.empty__title { font-size: 20px; }
.empty__sub { color: var(--ink-2); max-width: 44ch; }
.empty .btn { margin-top: 8px; }

/* ==========================================================================
   Page headers, tabs
   ========================================================================== */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 28px 0 22px; }
.page-title { font-size: 30px; }
.page-sub { color: var(--ink-3); margin-top: 4px; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tabs { margin-bottom: 20px; display: flex; }
.crumbs { display: flex; align-items: center; gap: 4px; margin: 20px 0 12px; color: var(--ink-3); font-size: 14px; font-weight: 600; flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); }
.crumbs .icon { width: 16px; height: 16px; }
.rail .crumbs { margin: 2px 0 10px; }
.rail--static { position: static; }
.section { display: grid; gap: 12px; }
.section__title { font-size: 20px; }
.prose { color: var(--ink-2); max-width: 66ch; }
.checks { display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .icon { width: 18px; height: 18px; color: var(--success); margin-top: 2px; }

/* Creator storefront header */
.creator-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 28px 0 22px; }
.creator-head__bio { color: var(--ink-2); margin-top: 4px; max-width: 60ch; }
.creator-head__stats { display: flex; gap: 18px; flex-wrap: wrap; color: var(--ink-2); font-size: 14px; margin-top: 8px; }
.creator-head__stats strong { color: var(--ink); }

/* ==========================================================================
   Listing page
   ========================================================================== */
.item { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "owner owner" "head head" "media buy" "content buy"; gap: 0 32px; align-items: start; }
.item__head { grid-area: head; margin-bottom: 18px; }
.item__type { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.item__type .icon { width: 16px; height: 16px; }
.item__title { font-size: clamp(26px, 3vw, 38px); max-width: 24ch; }
.item__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; color: var(--ink-2); font-size: 14px; }
.item__media { grid-area: media; }
.item__art { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; }
.item__buy { grid-area: buy; position: sticky; top: calc(var(--topbar-h) + 16px); display: grid; gap: 14px; }
.item__content { grid-area: content; display: grid; gap: 36px; margin-top: 32px; }
.buybox { padding: 20px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; }
.buybox__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.buybox__amount { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.buybox__billing { color: var(--ink-3); }
.buybox__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.buybox__fine { display: grid; gap: 6px; color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }
.buybox__fine li { display: flex; gap: 8px; align-items: flex-start; }
.buybox__fine .icon { width: 16px; height: 16px; color: var(--success); margin-top: 2px; }
.creator-card { padding: 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.creator-card__name { font-weight: 700; }
.creator-card__sub { color: var(--ink-3); font-size: 13px; }
.creator-card__actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.details { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.details div { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.details dt { color: var(--ink-3); font-size: 13px; }
.details dd { margin-top: 2px; font-weight: 600; }
.reviews__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 18px 20px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.reviews__score { display: grid; justify-items: center; gap: 4px; }
.reviews__avg { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.reviews__count { color: var(--ink-3); font-size: 13px; }
.bars { display: grid; gap: 6px; }
.bar { display: grid; grid-template-columns: 14px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
.bar__track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar__fill { height: 100%; background: var(--star); border-radius: 999px; }
.reviews__list { display: grid; }
.review { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.review:last-child { border-bottom: 0; }
.review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review__author { font-weight: 700; }
.review__date { color: var(--ink-3); font-size: 13px; margin-left: auto; }
.review__text { color: var(--ink-2); max-width: 70ch; }
.reviews__foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.star-input { display: inline-flex; gap: 2px; }
.star-input button { width: 38px; height: 38px; display: grid; place-items: center; color: var(--line-strong); border-radius: 8px; }
.star-input button .icon { width: 28px; height: 28px; }
.star-input button.is-on { color: var(--star); }
.star-input:hover button { color: var(--line-strong); }
.star-input button:hover, .star-input button:has(~ button:hover) { color: var(--star); }

/* ==========================================================================
   Library
   ========================================================================== */
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.libitem { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.libitem__art { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; align-self: start; }
.libitem__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.libitem__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.libitem__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.libitem__status { color: var(--ink-2); font-size: 13.5px; }
/* Purchases: the whole card is the way in (pointer everywhere, the title underlines on card hover), like a video row. */
.card--owned { cursor: pointer; }
.card--owned:hover .card__titlelink { text-decoration: underline; text-underline-offset: 3px; }
.card--owned .cover { cursor: pointer; }
.card--owned .cover__veil { display: none; }   /* the cover opens the purchase, not a preview */
.card--owned .cover:hover > .art, .card--owned:hover .cover > .art { transform: none; }
.card__owned { display: grid; gap: 6px; margin-top: 2px; }
.card__status { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.card__status--muted { color: var(--ink-3); }
.card__owned .progress { min-width: 0; }
.card__status--notice { display: flex; gap: 6px; align-items: flex-start; color: var(--ink-2); }
.card__status--notice .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.card__status .pill { margin-right: 4px; vertical-align: middle; }
.card__manage { display: flex; gap: 8px; }
.libitem__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; flex: 1; min-width: 80px; }
.progress__bar { display: block; height: 100%; background: var(--cobalt); border-radius: 999px; }
.member { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.member__art { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; align-self: start; }
.member__title { font-size: 17px; }
.member__lines { display: grid; gap: 4px; color: var(--ink-2); font-size: 14px; margin: 8px 0 12px; }
.member__lines .icon { width: 15px; height: 15px; color: var(--ink-3); }
.member__lines li { display: flex; align-items: center; gap: 8px; }
.member__foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.orow { display: grid; grid-template-columns: 130px minmax(0, 1fr) 110px 100px auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.orow:last-child { border-bottom: 0; }
.orow__id { font-weight: 700; }
.orow__date { color: var(--ink-3); font-size: 13px; }
.orow__items { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Sell view
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 18px 18px 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.stat__label { color: var(--ink-2); font-size: 14px; }
.stat__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; }
.stat__value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.stat__delta { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.stat__delta.up { color: var(--success); }
.stat__delta.down { color: var(--danger); }
.spark { width: 120px; height: 40px; color: var(--cobalt); }

.band { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.chart-card { padding: 18px 18px 12px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; }
.chart-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chart-card__title { font-size: 16px; font-weight: 700; }
.chart-card__sub { color: var(--ink-3); font-size: 13px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart__bar { fill: var(--cobalt); }
.chart__bar:hover, .chart__bar:focus { fill: var(--cobalt-hover); outline: none; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__label { fill: var(--ink-3); font-size: 11px; font-family: inherit; }
.payout { padding: 20px; border-radius: var(--radius-card); background: var(--cobalt); color: #fff; display: grid; gap: 10px; align-content: start; }
.payout__label { display: flex; align-items: center; gap: 8px; font-weight: 600; opacity: 0.9; }
.payout__label .icon { width: 18px; height: 18px; }
.payout__amount { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.payout__lines { display: grid; gap: 4px; font-size: 14px; opacity: 0.92; }
.payout .btn { justify-self: start; background: #fff; color: var(--cobalt); margin-top: 6px; }
.payout .btn:hover { background: var(--sticker); color: var(--sticker-ink); }

.rows { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.rows__head { display: grid; align-items: center; gap: 14px; padding: 12px 18px; color: var(--ink-2); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
.rows__empty { padding: 36px 20px; text-align: center; color: var(--ink-2); }
.cols-listings { grid-template-columns: minmax(0, 2.2fr) 1.1fr 0.8fr 0.8fr 0.9fr auto; }
.cols-orders { grid-template-columns: 90px minmax(0, 1.2fr) minmax(0, 1.8fr) 90px 110px 100px 84px; }
.cols-coupons { grid-template-columns: minmax(0, 1.3fr) 90px 120px 130px 1fr auto; }
.row { display: grid; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row__art { width: 64px; height: 48px; border-radius: 8px; flex: none; }
.row__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.row__type { color: var(--ink-3); font-size: 13px; }
.row__cell { font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row__cell::before { content: attr(data-label); display: none; color: var(--ink-3); font-size: 12px; margin-right: 8px; }
.row__actions { display: flex; gap: 2px; justify-content: flex-end; }
.row__buyer { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; }
.code { font-weight: 800; letter-spacing: 0.05em; }

/* ==========================================================================
   Checkout, order
   ========================================================================== */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.panel { padding: 22px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 14px; }
.panel__title { font-size: 18px; }
.choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; font-weight: 600; }
.choice:has(input:checked) { border-color: var(--cobalt); background: var(--cobalt-soft); }
.choice input { accent-color: var(--cobalt); margin: 0; }
.choice__sub { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.choice .icon { width: 20px; height: 20px; color: var(--ink-2); }
.mount { padding: 22px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--ink-2); font-size: 14px; text-align: center; }
.summary { position: sticky; top: calc(var(--topbar-h) + 16px); }
.summary__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.summary__item .art { aspect-ratio: 4 / 3; border-radius: 6px; }
.summary__name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary__sub { color: var(--ink-3); font-size: 13px; }
.summary__lines { display: grid; gap: 6px; padding-top: 4px; }
.summary__line { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.summary__line--total { color: var(--ink); font-weight: 800; font-size: 18px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }
.summary__line--discount { color: var(--success); }
.coupon { display: flex; gap: 8px; align-items: center; }
.coupon .input { flex: 1; text-transform: uppercase; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--success-soft); color: var(--success); font-weight: 600; font-size: 14px; }
.coupon-applied .iconbtn { color: inherit; }
.order { max-width: 760px; margin: 28px auto 0; display: grid; gap: 18px; }
.order__hero { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 10px 0 4px; }
.order__hero p { color: var(--ink-2); max-width: 46ch; }
.order__check { width: 64px; height: 64px; border-radius: 999px; background: var(--success-soft); color: var(--success); display: grid; place-items: center; margin-bottom: 6px; }
.order__check .icon { width: 32px; height: 32px; }
.order__meta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; color: var(--ink-3); font-size: 14px; }

/* ==========================================================================
   Layers: overlay, drawer, modal, forms
   ========================================================================== */
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(21, 24, 31, 0.5); opacity: 0; transition: opacity 0.22s; }
.overlay.is-open { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); outline: none; }
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer__title { font-size: 20px; }
.drawer__body { flex: 1; overflow: auto; padding: 4px 20px; }
.drawer__foot { display: grid; gap: 10px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.drawer__foot:empty { display: none; }
.drawer__note { color: var(--ink-2); font-size: 13.5px; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 18px; }
.cartitem { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cartitem:last-child { border-bottom: 0; }
.cartitem__art { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; align-self: start; }
.cartitem__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cartitem__title { font-weight: 700; line-height: 1.3; border-radius: 4px; }
.cartitem__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.cartitem__sub { color: var(--ink-3); font-size: 13px; }
.cartitem__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.cartitem__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.cartitem__tools { display: flex; align-items: center; gap: 6px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; }
.qty__btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; color: var(--ink-2); }
.qty__btn:hover { background: var(--surface-2); color: var(--ink); }
.qty__btn .icon { width: 15px; height: 15px; }
.qty__val { min-width: 26px; text-align: center; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 56px 12px; }
.cart-empty .icon { width: 40px; height: 40px; color: var(--ink-3); }
.cart-empty__title { font-size: 18px; }
.cart-empty p { color: var(--ink-2); }

.modal { position: fixed; inset: 0; z-index: 61; display: grid; place-items: center; padding: 20px; overflow: auto; outline: none; }
.modal__panel { position: relative; width: min(900px, 100%); max-height: calc(100dvh - 40px); overflow: auto; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); transform: translateY(10px) scale(0.98); opacity: 0; transition: transform 0.22s, opacity 0.22s; }
.modal.is-open .modal__panel { transform: none; opacity: 1; }
.modal__panel--sm { width: min(440px, 100%); }
.modal__panel--md { width: min(620px, 100%); }
.modal__panel--lg { width: min(1060px, 100%); }
.modal__panel--xl { width: min(1400px, 100%); }
.modal__close { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--surface); }

.qv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qv__media { padding: 20px; }
.qv__art { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.qv__body { display: flex; flex-direction: column; gap: 14px; padding: 30px 30px 30px 10px; min-width: 0; }
.qv__type { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.qv__type .icon { width: 16px; height: 16px; }
.qv__title { font-size: 26px; padding-right: 32px; }
.qv__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.qv__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qv__blurb { color: var(--ink-2); }
.qv__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.qv__amount { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.qv__billing { color: var(--ink-3); }
.qv__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.qv__fine { color: var(--ink-3); font-size: 13px; }

.dialog { padding: 28px; display: grid; gap: 10px; }
.dialog__title { font-size: 20px; padding-right: 32px; }
.dialog p { color: var(--ink-2); }
.dialog__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

.form { padding: 28px; display: grid; gap: 16px; }
.form__title { font-size: 22px; padding-right: 32px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; align-content: start; }
.field__label { font-weight: 600; font-size: 14px; }
.field__hint { color: var(--ink-3); font-size: 13px; }
.field__error { color: var(--danger); font-size: 13px; }
.field__error:empty { display: none; }
.input { width: 100%; height: 42px; padding: 0 12px; line-height: 1.2; border-radius: var(--radius-ctl); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; }
.input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); }
textarea.input { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 36px; }
.field--select { position: relative; }
.field--select .icon { position: absolute; right: 12px; bottom: 12px; width: 18px; height: 18px; pointer-events: none; color: var(--ink-3); }
.money { position: relative; }
.money .input { padding-left: 26px; }
.money__symbol { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-weight: 600; }
.radios { display: flex; gap: 8px; flex-wrap: wrap; }
.radio { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); cursor: pointer; font-weight: 600; }
.radio:has(input:checked) { border-color: var(--cobalt); background: var(--cobalt-soft); color: var(--cobalt); }
.radio input { margin: 0; accent-color: var(--cobalt); }
.form__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.formgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.preview { padding: 28px 28px 28px 0; position: sticky; top: 0; align-self: start; }
.preview__label { color: var(--ink-3); font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.preview .card { max-width: 272px; }
.swatches, .patterns { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 10px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.pattern { width: 54px; height: 40px; border-radius: 9px; overflow: hidden; border: 2px solid transparent; }
.pattern[aria-pressed="true"] { border-color: var(--ink); }
.pattern .art { width: 100%; height: 100%; }

/* ==========================================================================
   Messages
   ========================================================================== */
.tabs + .shelf { margin-top: 10px; }
.inbox { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.threads { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.thread { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: start; }
li:last-child > .thread { border-bottom: 0; }
.thread:hover { background: var(--surface-2); }
.thread[aria-current="page"] { background: var(--cobalt-soft); }
.thread__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.thread__name { font-weight: 700; }
.thread__when { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.thread__subject, .thread__preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread__subject { font-size: 13px; color: var(--ink-2); }
.thread__preview { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.thread.is-unread .thread__preview { color: var(--ink); font-weight: 600; }
.convo { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); min-height: 60vh; }
.convo__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.convo__title { font-size: 16px; }
.convo__sub { color: var(--ink-3); font-size: 13px; }
.convo__sub a:hover { color: var(--ink); text-decoration: underline; }
.convo__back { display: none; }
.convo__body { flex: 1; padding: 18px; display: grid; gap: 12px; align-content: start; overflow: auto; max-height: 56vh; }
.msg { max-width: 72%; padding: 10px 14px; border-radius: 16px; background: var(--surface-2); justify-self: start; border-bottom-left-radius: 6px; }
.msg--me { background: var(--cobalt); color: #fff; justify-self: end; border-bottom-left-radius: 16px; border-bottom-right-radius: 6px; }
.msg--system { justify-self: center; background: transparent; color: var(--ink-3); font-size: 13px; text-align: center; max-width: 90%; border-radius: 0; padding: 0; }
.msg__meta { font-size: 12px; opacity: 0.72; margin-top: 4px; }
.composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); align-items: end; }
.composer textarea.input { min-height: 44px; max-height: 160px; }

/* Creator seal next to a name */
.seal { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 5px; color: var(--cobalt); vertical-align: -3px; flex: none; }
.seal .icon { width: 18px; height: 18px; }
.seal--sm { width: 15px; height: 15px; margin-left: 4px; vertical-align: -2px; }
.seal--sm .icon { width: 15px; height: 15px; }
.seal--lg { width: 24px; height: 24px; margin-left: 8px; vertical-align: -2px; }
.seal--lg .icon { width: 24px; height: 24px; }

/* Messages drawer: the inbox, then one conversation with its composer pinned to the foot */
.msgdrawer .drawer__head { gap: 10px; }
.msgdrawer .drawer__body { padding: 0; display: flex; flex-direction: column; }
.msgdrawer__tools, .drawer__tools { display: grid; gap: 10px; padding: 14px 20px 10px; }
.msgdrawer__tools .filters, .drawer__tools .filters { margin-bottom: 0; }
.drawer__headtools { display: flex; align-items: center; gap: 8px; }
.drawer__count { margin-left: 8px; color: var(--ink-3); font-size: 15px; font-weight: 600; }

/* Cart drawer: express checkout, confirming, confirmed */
.drawer__links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--cobalt); font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover { color: var(--ink); }
.xc { display: grid; gap: 16px; padding: 8px 0 12px; }
.xc__items .summary__item:last-child { border-bottom: 0; }
.summary__art { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.summary__art .art { width: 100%; height: 100%; }
.mount--compact { padding: 16px; font-size: 13px; }
.xc__extras { display: grid; gap: 10px; justify-items: start; }
.xc__extras .linkbtn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.xc__extras .linkbtn:hover { text-decoration: underline; }
.xc__extras .linkbtn .icon { width: 16px; height: 16px; }
.gift { display: grid; gap: 10px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.gift__title { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.gift__title .icon { width: 18px; height: 18px; color: var(--cobalt); }
.xc-wait { display: grid; place-items: center; gap: 14px; padding: 72px 0; color: var(--ink-2); font-weight: 600; }
.spinner { width: 28px; height: 28px; border-radius: 999px; border: 3px solid var(--line-strong); border-top-color: var(--cobalt); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.done__hero { display: grid; justify-items: center; gap: 6px; padding: 22px 0 6px; text-align: center; }
.done__title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.done__label { margin: 16px 0 6px; color: var(--ink-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.done__list { display: grid; gap: 8px; }
.done__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.done__art { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.done__art .art { width: 100%; height: 100%; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.order__check.is-fresh { animation: pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } to { transform: scale(1); } }
.confetti { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.keep { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.keep__title { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.keep__title .icon { width: 18px; height: 18px; color: var(--cobalt); }
.keep__done { display: flex; align-items: center; gap: 8px; color: var(--success); font-weight: 700; }
.order .keep { margin-top: 0; border: 0; padding: 0; background: none; }

/* Support packages: agreements, pending changes, the plans editor and the impact step */
.agreement { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.agreement__name { font-weight: 800; }
.checks--tight { gap: 4px; font-size: 13.5px; }
.checks--tight .icon { width: 16px; height: 16px; }
.pending { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--danger); border-radius: 12px; background: var(--danger-soft); }
.pending.is-accepted { border-color: var(--line); background: var(--surface-2); }
.pending__title { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.pending__title .icon { width: 18px; height: 18px; flex: none; }
.choice--stack { align-items: flex-start; }
.choice__body { display: grid; gap: 4px; min-width: 0; }
.choice__head { display: flex; align-items: center; gap: 8px; }
.choice__head .num { margin-left: auto; font-weight: 700; }
.appterms__plans { display: grid; gap: 8px; margin-top: 10px; }
/* The creator's plans editor (Studio sell form): one full-width card per plan, add below */
.planlist { display: grid; gap: 12px; }
.planrow { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.planrow__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.planrow__label { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; color: var(--ink-2); }
.planrow__label .pill { font-weight: 600; }
.planlist, .form--plan { container-type: inline-size; }
.planrow__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) 150px minmax(0, 1.6fr); gap: 12px; align-items: start; }
/* Narrow columns (the Studio's form beside its preview, a dialog): the reply field takes a row of its own, then everything stacks */
@container (max-width: 700px) { .planrow__grid { grid-template-columns: minmax(0, 1fr) 150px; } .planrow__grid > .field:nth-child(3) { grid-column: 1 / -1; } }
@container (max-width: 420px) { .planrow__grid { grid-template-columns: 1fr; } }
.field__custom { display: grid; gap: 6px; margin-top: 8px; }
.planrow__grid .input, .planrow .input { width: 100%; }
.planlist__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.planlist__empty { padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--ink-2); font-size: 14px; }
.planlist__retired { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-3); }
.impact { display: grid; gap: 8px; margin: 4px 0 8px; }
.impact__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; }

/* Editing your own listing */
.ownerbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 4px 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); grid-area: owner; }
.ownerbar__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.ownerbar__status .icon { width: 18px; height: 18px; color: var(--cobalt); }
.changes { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.changes__title { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.changes__title .icon { width: 18px; height: 18px; color: var(--cobalt); }
.notifdrawer .drawer__body { padding: 0; }
.rows--flush { border: 0; border-radius: 0; background: transparent; }
.rows--flush .notif { padding: 12px 20px; }
.saveddrawer .cart-empty .btn { margin-top: 8px; }
.msgdrawer__who { flex: 1; min-width: 0; }
.msgdrawer .convo__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgdrawer .threads { border: 0; border-radius: 0; background: transparent; }
.msgdrawer .thread { padding: 14px 20px; }
.msgdrawer .convo__body { flex: 1; max-height: none; padding: 16px 20px; }
.msgdrawer .composer { border: 0; padding: 0; }
.thread--btn { width: 100%; text-align: left; }
.thread--btn:focus-visible { outline-offset: -3px; }
.search-mini { position: relative; }
.search-mini .icon { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search-mini .input { padding-left: 38px; }
.filter__count { margin-left: 5px; color: var(--ink-3); font-weight: 600; }
.filter[aria-pressed="true"] .filter__count { color: inherit; opacity: 0.8; }

/* ==========================================================================
   Course player, files
   ========================================================================== */
.learn { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.player { position: relative; border-radius: 20px; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; display: grid; place-items: center; }
.player .art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }
.player__play { position: relative; width: 76px; height: 76px; border-radius: 999px; background: #fff; color: #15181f; display: grid; place-items: center; box-shadow: var(--shadow-lg); }
.player__play .icon { width: 34px; height: 34px; }
.player__caption { position: absolute; left: 16px; bottom: 14px; color: #fff; font-weight: 700; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
/* The title block keeps at least 360px and wraps inside it; the actions stay on one line and move below only when the
   column is too narrow, which depends on the window, not on how long a lesson's label is. */
.lesson-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-top: 18px; }
.lesson-head > div:first-child { flex: 1 1 360px; min-width: 0; }
.lesson-title { font-size: 24px; margin-top: 2px; }
.lesson-actions { flex: 0 1 auto; max-width: 100%; display: flex; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 480px) { .lesson-actions { flex: 1 1 100%; flex-wrap: wrap; white-space: normal; } }
.syllabus { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; padding-bottom: 8px; }
.syllabus__head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.module__title { padding: 14px 16px 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.lesson { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 16px; width: 100%; font-size: 14px; text-align: left; }
.lesson:hover { background: var(--surface-2); }
.lesson[aria-current="true"] { background: var(--cobalt-soft); color: var(--cobalt); font-weight: 600; }
.lesson__mark { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; }
.lesson.is-done .lesson__mark { background: var(--success); border-color: var(--success); color: #fff; }
.lesson__mark .icon { width: 12px; height: 12px; }
.lesson__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson__len { color: var(--ink-3); font-size: 12.5px; }
.files { display: grid; gap: 8px; margin-top: 6px; }
.file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.file__icon { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-2); }
.file__icon .icon { width: 18px; height: 18px; }
.file__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file__meta { color: var(--ink-3); font-size: 13px; }

/* ==========================================================================
   Cart extras, customers, order drawer
   ========================================================================== */
.cart-saved { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
.cart-saved__title { font-size: 15px; }
.cols-customers { grid-template-columns: minmax(0, 1.5fr) 80px 100px 120px minmax(0, 1.6fr) auto; }
.kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; align-items: center; }
.kv dt { color: var(--ink-3); }
.kv dd { font-weight: 600; }
.timeline { display: grid; }
.tl { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; position: relative; }
.tl::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl__dot { width: 22px; height: 22px; border-radius: 999px; background: var(--success-soft); color: var(--success); display: grid; place-items: center; }
.tl__dot .icon { width: 12px; height: 12px; }
.tl--muted .tl__dot { background: var(--surface-2); color: var(--ink-3); }
.tl__label { font-weight: 600; }
.tl__when { color: var(--ink-3); font-size: 13px; }

/* ==========================================================================
   Community, license, jump back in, seller reviews
   ========================================================================== */
.chead { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: center; margin: 4px 0 22px; }
.chead__art { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.chead__body { display: grid; gap: 8px; justify-items: start; }
.community { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.feed { display: grid; gap: 12px; }
.composer-card { padding: 14px 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; }
.composer-card textarea.input { min-height: 48px; }
.composer-card__actions { grid-column: 2; display: flex; justify-content: flex-end; gap: 10px; }
.post { padding: 16px 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; }
.post__head { display: flex; align-items: center; gap: 10px; }
.post__author { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post__when { color: var(--ink-3); font-size: 13px; }
.post__text { max-width: 70ch; }
.post__foot { display: flex; gap: 14px; align-items: center; color: var(--ink-3); font-size: 13.5px; }
.post__like { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; color: var(--ink-2); }
.post__like:hover { border-color: var(--line-strong); color: var(--ink); }
.post__like[aria-pressed="true"] { color: var(--heart); border-color: var(--heart); }
.post__like[aria-pressed="true"] .icon { fill: currentColor; }
.post__like .icon, .post__meta .icon { width: 16px; height: 16px; }
.post__meta { display: inline-flex; align-items: center; gap: 6px; }
.side { display: grid; gap: 12px; position: sticky; top: calc(var(--topbar-h) + 16px); }
.side .panel { gap: 12px; padding: 18px; }
.event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.event__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--cobalt-soft); color: var(--cobalt); display: grid; place-items: center; }
.event__icon .icon { width: 18px; height: 18px; }
.event__title { font-weight: 700; }
.event__when { color: var(--ink-3); font-size: 13px; }
.members { display: flex; align-items: center; gap: 12px; }
.members__stack { display: flex; }
.members__stack .avatar-mini { border: 2px solid var(--surface); margin-left: -9px; }
.members__stack .avatar-mini:first-child { margin-left: 0; }
.rules { display: grid; gap: 6px; color: var(--ink-2); font-size: 14px; }
.rules li { display: flex; gap: 8px; }
.rules .icon { width: 16px; height: 16px; color: var(--ink-3); margin-top: 3px; }
.license { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); margin: 4px 0 10px; }
.license__key { font-weight: 800; letter-spacing: 0.08em; font-size: 16px; font-family: inherit; }
.shelf--tight { margin-top: 26px; }
.resume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.resume__tile { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.resume__art { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; display: block; }
.resume__body { display: grid; gap: 4px; min-width: 0; }
.resume__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume__sub { color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats--2 { grid-template-columns: 1fr 1fr; }
.stats--2 .stat__value { font-size: 22px; }
.srow { padding: 16px 18px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.srow:last-child { border-bottom: 0; }
.srow__top { display: flex; align-items: center; gap: 12px; }
.srow .review__author { display: inline-flex; align-items: center; gap: 8px; }
.reply { padding: 12px 14px; border-left: 3px solid var(--cobalt); background: var(--cobalt-soft); border-radius: 0 12px 12px 0; display: grid; gap: 6px; font-size: 14px; max-width: 70ch; }
.reply__label { font-weight: 700; font-size: 13px; color: var(--cobalt); }
.reply .btn { justify-self: start; margin-top: 4px; }
.reply-form { display: grid; gap: 8px; max-width: 70ch; }
.reply-form__actions { display: flex; gap: 8px; }

/* ==========================================================================
   Account, pairs, checklist
   ========================================================================== */
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.account-grid .panel .kv { grid-template-columns: 110px minmax(0, 1fr); }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; padding-bottom: 0; }
.setting__label { font-weight: 600; }
.pair { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.pair__art { width: 92px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; display: block; flex: none; }
.pair__plus { width: 26px; height: 26px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; flex: none; }
.pair__plus .icon { width: 14px; height: 14px; }
.pair__arts { display: flex; align-items: center; gap: 10px; }
.pair__body { min-width: 0; }
.pair__title { font-weight: 700; }
.pair__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pair__action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pair__total { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.checklist { display: grid; gap: 4px; margin-top: 10px; }
.check-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.check-item:last-child { border-bottom: 0; }
.check-item.is-done .check-item__label { color: var(--ink-3); text-decoration: line-through; }
.check-item.is-done .lesson__mark { background: var(--success); border-color: var(--success); color: #fff; }

/* ==========================================================================
   Sales, plans, notifications page
   ========================================================================== */
.sticker__was { margin-left: 6px; font-size: 0.72em; font-weight: 600; opacity: 0.68; }
.buybox__pricing { display: grid; gap: 10px; }
.buybox__was { color: var(--ink-3); font-weight: 600; }
/* The buy box's billing picker (monthly / yearly): two equal cards */
.billing-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plan { display: grid; gap: 2px; align-content: start; width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; text-align: left; background: var(--surface); }
.plan:hover { border-color: var(--ink-3); }
.plan[aria-pressed="true"] { border-color: var(--cobalt); background: var(--cobalt-soft); box-shadow: inset 0 0 0 1px var(--cobalt); }
.plan__name { font-weight: 700; font-size: 13.5px; }
.plan__price { font-size: 13px; color: var(--ink-2); }
.plan__save { font-size: 12px; color: var(--success); font-weight: 700; }

/* ==========================================================================
   Onboarding, spotlight, coupon scope
   ========================================================================== */
.onboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; padding: 24px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); margin-top: 4px; }
.onboard__intro { display: grid; gap: 10px; align-content: start; color: var(--ink-2); }
.onboard__intro .tile__icon { color: var(--cobalt); }
.onboard__title { font-size: 24px; color: var(--ink); }
.onboard__steps { display: grid; gap: 10px; list-style: none; }
.onboard__step { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.onboard__num { width: 34px; height: 34px; border-radius: 999px; background: var(--cobalt-soft); color: var(--cobalt); display: grid; place-items: center; font-weight: 800; }
.onboard__num .icon { width: 16px; height: 16px; }
.onboard__step.is-done .onboard__num { background: var(--success-soft); color: var(--success); }
.onboard__step-title { font-weight: 700; }
.spotlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; padding: 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); margin-bottom: 24px; }
.iconbtn.is-on { color: var(--star); }
.iconbtn.is-on .icon { fill: currentColor; }
.scope { display: grid; gap: 8px; max-height: 220px; overflow: auto; padding: 2px; }

/* ==========================================================================
   Studio: apps, starters, workspace, preview mock, plans
   ========================================================================== */
.appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 16px; }
.appcard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.appcard__art { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; display: block; align-self: start; }
.appcard__body { display: grid; gap: 8px; min-width: 0; align-content: start; }
.appcard__title { font-size: 16px; }
.appcard__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.studio-tile { min-height: 0; margin-top: 4px; }
.starter__tier { position: absolute; top: 44px; left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--cobalt); color: #fff; font-size: 11.5px; font-weight: 700; pointer-events: none; }
.ws-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ws-mark { width: 48px; height: 48px; border-radius: 14px; flex: none; }
.ws-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ws-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.ws-card:hover { border-color: var(--line-strong); }
.ws-card__title { font-weight: 700; }
.ws-card > .icon { width: 18px; height: 18px; color: var(--ink-3); }
.cols-pages { grid-template-columns: minmax(0, 2fr) 90px 130px auto; }
.cols-fields { grid-template-columns: minmax(0, 1.5fr) 170px 110px minmax(0, 1.2fr) auto; }
.input--inline { height: 38px; font-weight: 600; line-height: 1.2; }
.stored { font-size: 13px; color: var(--ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ws-design, .ws-publish { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.ws-design .form, .ws-publish .form { display: grid; gap: 16px; }
.ws-preview-side { position: sticky; top: calc(var(--topbar-h) + 16px); }
.assistant { border-color: var(--cobalt); }
.assistant .panel__title { display: flex; align-items: center; gap: 6px; }
.assistant .panel__title .icon { width: 18px; height: 18px; color: var(--cobalt); }
.proposal { padding: 12px 14px; border-radius: 12px; background: var(--cobalt-soft); display: grid; gap: 8px; font-size: 14px; }
.proposal__row { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.preview-frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.preview-frame--small { font-size: 11px; }
.appterms { display: grid; gap: 10px; }
.appterms .choice { font-size: 14px; }
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.plancard { padding: 22px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.plancard.is-current { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); }
.plancard__name { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.plancard__price { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.plancard__price small { font-size: 14px; color: var(--ink-3); font-weight: 600; }
.plancard--creator { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 24px; align-items: center; }
.mock { --m1: #2a3bd1; --m2: #06b6d4; background: #fff; color: #15181f; font-family: var(--font); font-size: 12px; line-height: 1.4; }
.mock--classic-serif .mock__page { font-family: Georgia, "Times New Roman", serif; }
.mock--rounded .mock__page { font-family: "Avenir Next", Avenir, "Trebuchet MS", system-ui, sans-serif; }
.mock--mono .mock__page { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mock__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #ebebe6; color: #767b86; font-size: 11px; }
.mock__dots { display: inline-flex; gap: 4px; }
.mock__dots i { width: 8px; height: 8px; border-radius: 999px; background: #c9c9c2; display: block; }
.mock__url { flex: 1; padding: 3px 10px; border-radius: 6px; background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #ebebe6; }
.mock__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; white-space: nowrap; }
.mock__mark { width: 22px; height: 22px; border-radius: 7px; background: var(--m1); color: #fff; font-size: 9px; display: grid; place-items: center; font-weight: 800; }
.mock__links { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.mock__links button { font: inherit; font-size: 11px; font-weight: 600; color: #4e525c; padding: 4px 8px; border-radius: 999px; }
.mock__links button.is-on { background: var(--m1); color: #fff; }
.mock__hero { padding: 26px 20px; background: linear-gradient(135deg, var(--m1), var(--m2)); color: #fff; display: grid; gap: 6px; justify-items: start; }
.mock__h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.mock__sub { opacity: 0.9; max-width: 44ch; }
.mock__btn { display: inline-block; margin-top: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--m1); font-weight: 700; font-size: 11.5px; }
.mock__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 20px; }
.mock__card { display: grid; gap: 5px; }
.mock__thumb { aspect-ratio: 4 / 3; border-radius: 8px; background: linear-gradient(135deg, var(--m1), var(--m2)); }
.mock__card-title { font-weight: 700; }
.mock__card-sub { color: #767b86; font-size: 11px; }
.mock__form { display: grid; gap: 8px; padding: 16px 20px; max-width: 320px; }
.mock__field { display: grid; gap: 3px; font-size: 11px; color: #4e525c; }
.mock__input { display: block; height: 26px; border-radius: 6px; border: 1px solid #c9c9c2; background: #fff; }
.mock__form .mock__btn { background: var(--m1); color: #fff; justify-self: start; }
.mock__text { padding: 16px 20px 0; display: grid; gap: 8px; }
.mock__text .mock__grid { padding: 8px 0 0; }
.mock__line { display: block; height: 8px; border-radius: 4px; background: #ebebe6; }
.mock__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 20px 4px; color: #767b86; font-size: 11px; border-top: 1px solid #ebebe6; margin-top: 12px; }
.mock__ribbon { padding: 3px 8px; border-radius: 999px; background: var(--sticker); color: var(--sticker-ink); font-weight: 700; }
.mock--phone { max-width: 380px; margin: 0 auto; }
.mock--phone .mock__grid { grid-template-columns: 1fr 1fr; padding: 12px; }
.mock--phone .mock__links button { padding: 3px 6px; }

/* ==========================================================================
   Records, uploads, clients
   ========================================================================== */
.chips--tools { align-items: center; margin-bottom: 14px; }
.records .rows__head { display: grid; }
.records .row__title { font-weight: 700; }
.upload { display: grid; gap: 12px; padding: 22px; margin-top: 28px; border-radius: var(--radius-card); background: var(--surface); border: 1px dashed var(--line-strong); }
.updates { display: grid; gap: 10px; margin-top: 12px; }
.update { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.update__when { color: var(--ink-3); font-size: 12.5px; margin-bottom: 2px; }

/* ==========================================================================
   Sections, settings, richer mock
   ========================================================================== */
.cols-sections { grid-template-columns: minmax(0, 1fr) auto; }
.share-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.share-card__art { aspect-ratio: 1.91 / 1; border-radius: 8px; overflow: hidden; }
.mock__section { padding: 14px 20px; display: grid; gap: 8px; }
.mock__section .mock__grid { padding: 4px 0 0; }
.mock__h2 { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.mock__p { color: #4e525c; }
.mock__note { color: #767b86; font-style: italic; }
.mock__grid--2 { grid-template-columns: 1fr 1fr; }
.mock__quote { padding: 12px; border-radius: 10px; background: #f4f4f1; display: grid; gap: 6px; }
.mock__price { padding: 12px; border-radius: 10px; border: 1px solid #e1e1db; display: grid; gap: 6px; justify-items: start; }
.mock__price.is-on { border-color: var(--m1); box-shadow: inset 0 0 0 1px var(--m1); }
.mock__price .mock__btn { background: var(--m1); color: #fff; margin-top: 2px; }
.mock__price-amount { font-weight: 800; font-size: 18px; }
.mock__faq { padding: 8px 0; border-bottom: 1px solid #ebebe6; }
.mock__cta { margin: 8px 20px; padding: 18px 20px; border-radius: 12px; background: linear-gradient(135deg, var(--m1), var(--m2)); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mock__cta .mock__h2 { color: #fff; }
.mock__contact { display: grid; gap: 2px; color: #4e525c; }
.mock__section .mock__form { padding: 0; }
.mock--phone .mock__grid--2 { grid-template-columns: 1fr; }

/* ==========================================================================
   Auth, owner console
   ========================================================================== */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; margin-top: 36px; }
.auth__side { display: grid; gap: 14px; }
.auth__panel { padding: 0; }
.auth__panel .form { padding: 26px; }
.auth-samples { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px; }
.console-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.console-intro .onboard { grid-template-columns: 1fr; gap: 14px; }
.console-intro .onboard__intro { gap: 6px; }
#signinBtn { margin-left: 4px; }
@media (max-width: 900px) { .auth, .console-intro { grid-template-columns: 1fr; } .auth { margin-top: 20px; } }

/* ==========================================================================
   Listing wizard, media, profile photo
   ========================================================================== */
.avatar-mini--photo { overflow: hidden; position: relative; }
.avatar-mini__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform-origin: center; user-select: none; -webkit-user-drag: none; }
.avatar { overflow: hidden; position: relative; }
.drop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border: 2px dashed var(--line-strong); border-radius: 14px; background: var(--surface); transition: border-color 0.15s, background-color 0.15s; }
.drop--compact { padding: 10px 12px; }
.drop.is-over { border-color: var(--cobalt); background: var(--cobalt-soft); }
.drop__icon { width: 22px; height: 22px; color: var(--ink-3); }
.drop__label { font-weight: 700; }
.photo-editor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.photo-editor__frame { display: grid; gap: 8px; justify-items: center; }
.photo-editor__zoom { display: flex; align-items: center; gap: 8px; width: 140px; }
.photo-editor__zoom .icon { width: 16px; height: 16px; color: var(--ink-3); }
.zoom { width: 100%; accent-color: var(--cobalt); }
.photo-preview--edit { width: 140px; height: 140px; overflow: hidden; position: relative; cursor: grab; touch-action: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line-strong); }
.photo-preview--edit.is-dragging { cursor: grabbing; }
.photo-preview--edit .avatar-mini__img { pointer-events: none; }
.gallery-wrap { margin-top: 12px; }
.gallery-wrap__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.gallery-wrap__arrows { display: flex; gap: 6px; }
.gallery { margin-top: 0; scroll-behavior: smooth; }
.lightbox .qv__row { padding-right: 44px; }
.photo-editor .drop { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 8px; padding: 16px 14px; }
.photo-editor .drop__icon { display: none; }
.lightbox__body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.lightbox__nav[hidden] { display: none; }
.lightbox__stage { grid-column: 2; min-width: 0; }
@media (max-width: 720px) { .photo-editor { grid-template-columns: minmax(0, 1fr); justify-items: center; } .lightbox__body { grid-template-columns: minmax(0, 1fr); } .lightbox__stage { grid-column: 1; } .lightbox__nav { justify-self: center; } }
.chooser { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.chooser__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.chooser__card:hover { border-color: var(--line-strong); }
.chooser__card > .icon { width: 18px; height: 18px; color: var(--ink-3); }
.chooser__title { font-weight: 800; font-size: 17px; }
.stepper { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; list-style: none; }
.stepper__btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.stepper__num { width: 24px; height: 24px; border-radius: 999px; background: var(--surface-2); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.stepper__num .icon { width: 13px; height: 13px; }
.is-current .stepper__btn { border-color: var(--cobalt); color: var(--cobalt); background: var(--cobalt-soft); }
.is-current .stepper__num { background: var(--cobalt); color: #fff; }
.is-done .stepper__num { background: var(--success-soft); color: var(--success); }
.wizard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.wizard__panel { padding: 24px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 16px; }
.media__grid { display: grid; gap: 10px; }
.media { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.media__body { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.media__thumb { display: block; width: 120px; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--surface-2) center / cover no-repeat; object-fit: cover; }
.media__thumb--link { display: grid; place-items: center; gap: 4px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.media__notes { display: grid; gap: 4px; }
.gallery { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.gallery__item { position: relative; flex: none; width: 132px; border-radius: 10px; overflow: hidden; }
.gallery__item .media__thumb { width: 132px; }
.gallery__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, 0.25); }
.gallery__play .icon { width: 28px; height: 28px; }
/* The lightbox stage: as wide as the panel allows, capped by the viewport height so nothing scrolls.
   Photos sit inside at their own size, never enlarged past it; the vector cover fills the stage. */
.media__large { display: flex; align-items: center; justify-content: center; width: auto; max-width: 100%; max-height: calc(100dvh - 164px); margin: 0 auto; aspect-ratio: 16 / 10; border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.media__large > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.media__large--cover > .art { width: 100%; height: 100%; }
.media__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.media.is-cover { border-color: var(--cobalt); }
.gallery__cover { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: #15181f; font-size: 11px; font-weight: 700; }
.gallery__item.is-current { outline: 3px solid var(--cobalt); outline-offset: -3px; }
.gallery__item:not(.is-current):hover .media__thumb { opacity: 0.85; }
.media__thumb--art .art { display: block; width: 100%; height: 100%; }
/* The listing stage: arrows change the picture, the counter says where you are, the stage itself enlarges */
.stage__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; box-shadow: var(--shadow-sm); }
.stage__nav--prev { left: 12px; }
.stage__nav--next { right: 12px; }
.stage__count { position: absolute; right: 12px; bottom: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(21, 24, 31, 0.65); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.stage__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; pointer-events: none; }
.stage__play .icon { width: 56px; height: 56px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); }
.art--panel { display: grid; place-items: center; align-content: center; gap: 6px; background: var(--surface-2); color: var(--ink-2); font-weight: 600; }
.art--panel .icon { width: 28px; height: 28px; }
.media__video { width: 100%; border-radius: 14px; background: #000; }
.photo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.photo-preview { width: 84px; height: 84px; border-radius: 999px; background: var(--surface-2) center / cover no-repeat; display: grid; place-items: center; font-weight: 800; color: var(--ink-2); font-size: 22px; flex: none; }
@media (max-width: 900px) { .wizard { grid-template-columns: 1fr; } .media { grid-template-columns: 96px minmax(0, 1fr) auto; } .media__thumb { width: 96px; } }

/* ==========================================================================
   Course builder, course page, player
   ========================================================================== */
.modules { display: grid; gap: 12px; }
.module { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); display: grid; gap: 10px; }
.module__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.module__title { font-weight: 700; }
.lessons { display: grid; gap: 6px; }
.lesson-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "num title actions" "meta meta meta"; gap: 6px 8px; align-items: center; padding: 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.lesson-row__num { grid-area: num; }
.lesson-row > .input { grid-area: title; }
.lesson-row > .row__actions { grid-area: actions; }
.lesson-row__meta { grid-area: meta; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-left: 30px; }
.lesson-row .field__error { grid-column: 1 / -1; }
.lesson-row__num { color: var(--ink-3); font-size: 12.5px; text-align: center; }
.lesson-row__min { display: flex; align-items: center; gap: 6px; }
.lesson-row__min .input { width: 60px; }
.lesson-row .filter { padding: 6px 10px; display: inline-flex; align-items: center; gap: 5px; }
.lesson-row .filter .icon { width: 14px; height: 14px; }
.lesson-row .filter.is-on { background: var(--cobalt-soft); border-color: var(--cobalt); color: var(--cobalt); }
.checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.curriculum { display: grid; gap: 8px; }
.curriculum__module { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.curriculum__summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-weight: 700; cursor: pointer; list-style: none; }
.curriculum__summary::-webkit-details-marker { display: none; }
.curriculum__lesson { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.curriculum__lesson .icon { width: 16px; height: 16px; color: var(--ink-3); }
.curriculum__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-body { border-radius: 20px; overflow: hidden; }
.lesson-body .media__video { border-radius: 20px; }
.reading { padding: 24px 28px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; max-width: 70ch; font-size: 16px; line-height: 1.6; }
.lesson.is-locked { color: var(--ink-3); }
.lesson.is-locked .lesson__mark { border-style: dashed; }
@media (max-width: 900px) { .lesson-row__meta { padding-left: 0; } .checks--2 { grid-template-columns: 1fr; } .curriculum__lesson { grid-template-columns: 18px minmax(0, 1fr) auto; } .curriculum__lesson > .muted { display: none; } }

/* ==========================================================================
   Auctions
   ========================================================================== */
.countdown { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.countdown .icon { width: 15px; height: 15px; color: var(--ink-3); }
.countdown.is-soon { color: var(--danger); }
.countdown.is-soon .icon { color: var(--danger); }
.card__auction { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.card__auction .countdown { font-size: 13px; }
.bidbox { display: grid; gap: 12px; }
.bidbox__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bidbox__label { font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.bidbox__amount { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.bidbox__facts { display: grid; gap: 4px; justify-items: end; font-size: 13.5px; color: var(--ink-2); }
.bidbox__time { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.bidform { display: grid; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.bidform__chips { flex-wrap: wrap; }
.auction-state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.auction-state .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--ink-3); }
.auction-state--won { background: var(--success-soft); color: var(--success); }
.auction-state--won .icon { color: var(--success); }
.auction-state--out { background: var(--danger-soft); color: var(--danger); }
.auction-state--out .icon { color: var(--danger); }
.seller-auction { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.bids { display: grid; gap: 6px; }
.bid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; }
.bid.is-top { border-color: var(--success); }
.bid__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bid__amount { font-weight: 800; font-variant-numeric: tabular-nums; }
.bid__when { font-size: 12.5px; }
@media (max-width: 720px) { .bid { grid-template-columns: auto minmax(0, 1fr) auto; } .bid__when { grid-column: 2 / -1; } .bidbox__amount { font-size: 28px; } }

/* ==========================================================================
   Toasts, tab bar, footer
   ========================================================================== */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(420px, 100% - 32px); }
.toast { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lg); animation: toast-in 0.2s ease-out; transition: opacity 0.2s, transform 0.2s; }
.toast.is-leaving { opacity: 0; transform: translateY(6px); }
.toast__action { font-weight: 700; color: var(--sticker); white-space: nowrap; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 1px solid var(--line); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
.tabbar__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0 3px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.tabbar__btn .icon { width: 24px; height: 24px; }
.tabbar__btn[aria-current="page"] { color: var(--cobalt); }
.tabbar__btn .badge { top: 0; right: calc(50% - 22px); }

.footer { margin-top: 64px; border-top: 1px solid var(--line); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 26px 0 40px; color: var(--ink-3); font-size: 13.5px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer__links a:hover { color: var(--ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (hover: hover) and (min-width: 720px) {
  .shelf__arrows { display: inline-flex; }
}

/* Tablets in portrait: the bar keeps every control by dropping the store name and tightening gaps. */
@media (max-width: 1000px) and (min-width: 720px) { .topbar__inner { gap: 14px; } .brand__name { display: none; } .brand { gap: 0; } }
@media (max-width: 1000px) { .search__kbd { display: none; } }
@media (max-width: 1000px) {
  .ws-grid { grid-template-columns: 1fr 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
  .plancard--creator { grid-template-columns: 1fr; }
  .resume { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .hero__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: 1fr 1fr; }
  .band { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .ws-design, .ws-publish { grid-template-columns: 1fr; }
  .ws-preview-side { position: static; }
  .onboard { grid-template-columns: 1fr; }
  .account-grid { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .pair__arts { justify-content: flex-start; }
  .pair__action { justify-content: space-between; flex-direction: row; align-items: center; }
  .community { grid-template-columns: 1fr; }
  .side { position: static; }
  .chead { grid-template-columns: 1fr; }
  .chead__art { max-width: 320px; }
  .inbox { grid-template-columns: 1fr; }
  .inbox.has-thread .threads { display: none; }
  .inbox:not(.has-thread) .convo { display: none; }
  .convo__back { display: inline-grid; }
  .msg { max-width: 86%; }
  .learn { grid-template-columns: 1fr; }
  .syllabus { position: static; max-height: none; }
  .item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "owner" "head" "media" "buy" "content"; }
  .item__media { min-width: 0; }
  .item__buy { position: static; margin-top: 16px; }
  .item__content { margin-top: 28px; }
  .checkout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .formgrid { grid-template-columns: 1fr; }
  .preview { position: static; padding: 24px 28px 0; }
  .preview .card { max-width: 236px; }
}

@media (max-width: 760px) {
  .rows__head { display: none; }
  .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding: 14px 16px; }
  .row > * { grid-column: 1 / -1; }
  .row__status { grid-column: 1; }
  .row__actions { grid-column: 2; grid-row: 2; }
  .row__cell::before { display: inline; }
  .row__cell--hide { display: none; }
  .appcard { grid-template-columns: 96px minmax(0, 1fr); }
  .ws-grid { grid-template-columns: 1fr; }
  .orow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .orow__items { grid-column: 1 / -1; white-space: normal; }
  .qv { grid-template-columns: 1fr; }
  .qv__body { padding: 0 20px 24px; }
  .qv__media { padding: 16px; }
  .modal { padding: 0; align-items: end; }
  .modal__panel { border-radius: 22px 22px 0 0; max-height: 94dvh; transform: translateY(24px); }
  .modal__panel--sm, .modal__panel--md, .modal__panel--lg, .modal__panel--xl { width: 100%; }
  .form__row { grid-template-columns: 1fr; }
  .creator-head { grid-template-columns: auto minmax(0, 1fr); }
  .creator-head__action { grid-column: 1 / -1; }
  .reviews__head { grid-template-columns: 1fr; gap: 16px; }
  .reviews__score { justify-items: start; }
  .member { grid-template-columns: 90px minmax(0, 1fr); }
}

@media (max-width: 719px) {
  :root { --gutter: 16px; }
  .tabs { overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .segment { flex: none; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .topbar__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .brand { min-width: 0; }
  .brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .views { display: none; }
  .search { margin-right: 2px; }
  .search__trigger { width: 42px; padding: 0; justify-content: center; max-width: none; }
  .search__text { display: none; }
  .search__icon { color: var(--ink); }
  .search.has-value .search__trigger { box-shadow: inset 0 0 0 1px var(--cobalt); }
  .rail { position: static; padding-top: 6px; }
  .hero__main, .spotlight { grid-template-columns: 1fr; gap: 14px; }
  .hero__body { padding: 0 4px 6px; }
  .hero__side { grid-template-columns: 1fr; }
  .tile { min-height: 132px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .scroller > li { flex-basis: 200px; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat { min-height: 116px; gap: 18px; padding: 16px; }
  .results__title, .page-title { font-size: 24px; }
  .shelf { margin-top: 30px; }
  .shelf__head { flex-wrap: wrap; align-items: flex-start; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: 4px; }
  .tabbar { display: grid; }
  .toasts { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); }
  .lib { grid-template-columns: 1fr; }
  .libitem { grid-template-columns: 92px minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px; }
  .stat__value { font-size: 22px; }
  .stat__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .spark { width: 100%; max-width: 120px; height: 30px; }
  .buybox__row { grid-template-columns: 1fr; }
  .item__art { aspect-ratio: 4 / 3; border-radius: 16px; }
}

@media (max-width: 479px) {
  .topbar__optional { display: none; }
  .brand__name { display: none; }
  .brand { gap: 0; }
}

@media (hover: none) {
  .search__kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .topbar, .tabbar, .toasts, .rail, .footer, .page-actions, #layers { display: none !important; }
  .order { margin-top: 0; }
  body { background: #fff; }
}

/* ---------- Support packages: notices, offers, history, the Support tab ---------- */
.notice { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--cobalt-soft); font-size: 14px; }
.notice--warn { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.notice__title { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.notice__title .icon { width: 18px; height: 18px; flex: none; }
.offer { display: grid; gap: 8px; padding: 14px; border: 1px dashed var(--cobalt); border-radius: 12px; background: var(--cobalt-soft); }
/* Before/after list for a change to support terms */
.diff { display: grid; gap: 6px; margin: 2px 0; padding: 10px 12px; list-style: none; border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, transparent); font-size: 13.5px; }
.diff__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.diff__label { min-width: 56px; font-weight: 700; color: var(--ink-2); }
.diff__from { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent); }
.diff__from--gone { text-decoration: line-through; }
.diff__arrow { color: var(--ink-3); }
.diff__to { font-weight: 700; }
.diff__row--adds .diff__to::before { content: "+ "; color: var(--success); }
.diff__row--drops .diff__label { color: var(--danger); }
.pending__terms { display: grid; gap: 6px; }
.pending__outcome { font-size: 13.5px; font-weight: 600; }
.stat__sub { color: var(--ink-3); font-size: 12.5px; margin-top: -2px; }
.offer__note { font-style: italic; color: var(--ink-2); }
.aghist-wrap { display: grid; gap: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
.aghist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.aghist__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.aghist__when { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.aghist__row--creator .aghist__when::before, .aghist__row--buyer .aghist__when::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-right: 6px; background: var(--cobalt); vertical-align: middle; }
.aghist__row--buyer .aghist__when::before { background: var(--success); }
.cols-support { grid-template-columns: minmax(0, 1.6fr) 130px 150px 120px minmax(0, 1.4fr) auto; }
.row__status { display: grid; gap: 2px; min-width: 0; }
.stats--support { margin-bottom: 18px; }
.input--sm { padding: 6px 10px; font-size: 13.5px; }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section__head .section__title { margin: 0; }
.section__edit { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--cobalt); padding: 4px 8px; border-radius: 999px; }
.section__edit:hover { background: var(--cobalt-soft); text-decoration: none; }
.section__edit .icon { width: 14px; height: 14px; }
.member__notice { color: var(--ink-2); align-items: flex-start !important; }
.member__notice .icon { margin-top: 3px; }
.member__notice .icon { color: var(--cobalt); }
[data-theme="dark"] .notice { border-color: var(--line-strong); }
@media (max-width: 900px) { .cols-support { grid-template-columns: minmax(0, 1fr) auto; } .cols-support .row__cell, .cols-support .row__status { grid-column: 1 / -1; } .cols-support .row__actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; } .aghist__row { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Search dialog ---------- */
.modal__panel--search { width: min(720px, 100%); align-self: start; margin-top: clamp(12px, 8vh, 96px); max-height: min(78dvh, 720px); display: flex; flex-direction: column; overflow: hidden; }
.modal__panel--search .modal__close { display: none; }
.palette { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.palette__head { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 18px; border-bottom: 1px solid var(--line); }
.palette__glass { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.palette__input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; outline: none; }
.palette__input::placeholder { color: var(--ink-3); }
.palette__esc { flex: none; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--ink-3); font-size: 12px; font-weight: 600; }
.palette__scopes { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px 4px; }
.chip--sm { padding: 5px 11px 5px 9px; font-size: 13px; gap: 6px; }
.chip--sm .icon { width: 15px; height: 15px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"] .chip__count { color: inherit; opacity: 0.7; }
.palette__status { padding: 4px 18px 0; color: var(--ink-3); font-size: 12.5px; min-height: 18px; }
.palette__list { flex: 1; min-height: 120px; overflow-y: auto; padding: 6px 8px 10px; }
.palette__group { padding: 4px 0 6px; }
.palette__group-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 4px; color: var(--ink-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.palette__more { border: 0; background: none; color: var(--cobalt); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; padding: 2px 6px; border-radius: 6px; }
.palette__more:hover { background: var(--cobalt-soft); }
.palette__opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.palette__opt[aria-selected="true"] { background: var(--surface-2); }
.palette__opt[aria-selected="true"] .palette__kind { color: var(--ink); }
.palette__art .art { width: 50px; height: 36px; border-radius: 7px; }
.palette__ico { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-2); }
.palette__ico .icon { width: 17px; height: 17px; }
.palette__text { display: grid; gap: 2px; min-width: 0; }
.palette__label { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.palette__label > .pill { flex: none; }
.palette__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__label, .palette__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__sub { color: var(--ink-3); font-size: 13px; }
.palette__kind { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.palette__kind .icon { width: 14px; height: 14px; opacity: 0; transition: opacity 0.12s; }
.palette__opt[aria-selected="true"] .palette__kind .icon { opacity: 1; }
.palette mark { background: color-mix(in srgb, var(--cobalt) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.palette__empty { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; color: var(--ink-3); text-align: center; }
.palette__empty .icon { width: 28px; height: 28px; }
.palette__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 50%, transparent); font-size: 12.5px; color: var(--ink-3); }
.palette__hint kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-strong); font-size: 11.5px; font-weight: 600; margin: 0 2px; }
@media (max-width: 760px) {
  .modal:has(.modal__panel--search) { padding: 0; }
  .modal__panel--search { margin-top: 0; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .palette__kind { display: none; }
  .palette__foot .btn { width: 100%; }
}