:root { --tint: 138 121 171; --ink-rgb: 61 60 79; --shade-rgb: 47 36 82; --soft-rgb: 250 249 252; --line: #efecf4; --soft: #f8f6fb;
  --chart-1: #6f5ba8; --chart-2: #e0a03a; --chart-3: #2f9a7a; --chart-4: #4a7fd0; --chart-5: #b5476f; --chart-6: #9a96a8; --chart-rest: #e2dee9; --ramp-from: #2f2452; --ramp-to: #c6b9e2; }
/* Admin view. Glass floats (top bar, brand menu, toast); pages, tables and forms are solid. */
/* Floating glass bar, same family as the creator page header. Content scrolls beneath it. */
body { background:
  radial-gradient(1200px 500px at 85% -10%, rgb(230 165 184 / 0.16), transparent 60%),
  radial-gradient(900px 500px at -10% 0%, rgb(var(--tint) / 0.14), transparent 60%),
  var(--background); background-attachment: fixed; }
.topbar { position: sticky; top: 12px; z-index: 20; width: min(1180px, 100% - 24px); margin: 12px auto 0; height: 56px;
  padding: 0 8px 0 20px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 12px; }
.wordmark { font: 600 var(--t-base)/1 var(--font-sans); letter-spacing: -0.01em; text-decoration: none; padding-right: 14px; border-right: 1px solid rgb(var(--ink-rgb) / 0.12); }
.spacer { flex: 1; }

/* Brand menu */
.brand-menu { position: relative; }
.brand-btn { all: unset; box-sizing: border-box; cursor: var(--cursor-hand, pointer); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border-radius: var(--r-md); font-weight: 600; font-size: var(--t-base); }
.brand-btn:hover, .brand-btn[aria-expanded="true"] { background: rgb(var(--tint) / 0.12); }
.brand-btn:focus-visible { outline: 2px solid var(--ring); }
.brand-btn svg { color: var(--muted-foreground); }
.mono-avatar { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0;
  font: 600 var(--t-xs)/1 var(--font-sans); color: #fff; background: var(--primary-strong); }
.menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; padding: 6px; border-radius: var(--r-lg); z-index: 30;
  display: flex; flex-direction: column; gap: 2px; transform-origin: top left; animation: menu-in .18s var(--ease); }
.menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: scale(0.97) translateY(-4px); } }
.menu [role="menuitemradio"], .menu [role="menuitem"] { all: unset; box-sizing: border-box; cursor: var(--cursor-hand, pointer); display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 10px; border-radius: var(--r-md); font-size: var(--t-base); }
.menu [role="menuitemradio"]:hover, .menu [role="menuitem"]:hover, .menu :focus-visible { background: rgb(var(--tint) / 0.14); outline: none; }
.menu [aria-checked="true"] { font-weight: 600; }
.menu [aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--primary-strong); font-weight: 600; }
.menu .sep { height: 1px; margin: 4px 8px; background: rgb(var(--ink-rgb) / 0.1); }
.menu .src { font-size: var(--t-xs); color: var(--muted-foreground); }

/* Page */
.page { width: min(1180px, 100% - 32px); margin: 0 auto; padding: 40px 0 96px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; min-height: 40px; }
.crumbs { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; }
.crumbs a { text-decoration: none; color: var(--muted-foreground); }
.crumbs a:hover { color: var(--foreground); }
.crumbs .sep { color: #b9b2c9; font-weight: 400; }
.page-sub { margin-top: 6px; color: var(--muted-foreground); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.panel.pad { padding: 24px; }
.panel h2 { font-size: var(--t-md); }
.panel .sub { color: var(--muted-foreground); font-size: var(--t-sm); margin: 4px 0 20px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 14px 20px; vertical-align: middle; }
th { font-size: var(--t-sm); font-weight: 500; color: var(--muted-foreground); border-bottom: 1px solid var(--input); white-space: nowrap; }
tbody tr + tr td { border-top: 1px solid var(--input); }
tbody tr.link { cursor: var(--cursor-hand, pointer); transition: background .12s var(--ease); }
tbody tr.link:hover { background: rgb(var(--tint) / 0.05); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.name-cell strong { display: block; font-weight: 600; }
.name-cell small { display: block; color: var(--muted-foreground); font-size: var(--t-sm); margin-top: 2px; }
td.actions-cell { text-align: right; width: 1%; white-space: nowrap; }
.items { margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); display: flex; flex-direction: column; gap: 8px; line-height: 1.4; }

/* Lookbook setup */
.tabs { display: flex; gap: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--sidebar-border); }
.tabs a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-bottom: -1px; font-weight: 600; font-size: var(--t-sm); color: var(--muted-foreground); border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--foreground); }
.tabs a[aria-current="page"] { color: var(--foreground); border-bottom-color: var(--foreground); }
.tabs .count { font-variant-numeric: tabular-nums; font-weight: 500; }
.layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .side { position: sticky; top: 92px; } }
.form-grid { display: grid; gap: 18px 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--input); flex-wrap: wrap; }
textarea.mono { font: 400 var(--t-sm)/1.6 var(--font-mono); min-height: 200px; }
.side { display: flex; flex-direction: column; gap: 20px; }
.side h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; font-size: var(--t-sm); margin: 0 0 18px; }
.kv dt { color: var(--muted-foreground); }
.kv dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { font: 400 var(--t-xs)/1.4 var(--font-mono); color: var(--muted-foreground); background: var(--background); }
.note-box { font-size: var(--t-sm); padding: 12px 14px; border-radius: var(--r-md); background: var(--sidebar); color: var(--muted-foreground); margin-top: 14px; }
.note-box.warn { background: #f8e1e1; color: #8a3030; }
.progress { height: 6px; border-radius: var(--r-pill); background: var(--input); overflow: hidden; margin-bottom: 12px; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--primary-strong); transition: width .4s var(--ease); }
.file-drop { display: flex; flex-direction: column; gap: 6px; }
.full-btn { width: 100%; }

.empty { text-align: center; padding: 72px 24px; }
.empty h2 { font: 600 var(--t-lg)/1.2 var(--font-sans); letter-spacing: -0.015em; margin-bottom: 8px; }
.empty p { color: var(--muted-foreground); margin: 0 auto 24px; max-width: 28rem; }

.login { width: min(400px, 100% - 32px); margin: 16vh auto 0; padding: 32px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--sidebar-border); box-shadow: var(--shadow-md); }
.login h1 { font: 600 var(--t-lg)/1.2 var(--font-sans); letter-spacing: -0.02em; margin-bottom: 6px; }
.login .btn { width: 100%; margin-top: 20px; }

/* (i) help next to a brand name, opening a small panel (native popover, light dismiss) */
.info-btn { all: unset; box-sizing: border-box; cursor: var(--cursor-hand, pointer); width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor;
  display: inline-grid; place-items: center; font: 600 12px/1 var(--font-serif); font-style: italic; color: var(--muted-foreground); vertical-align: middle; }
.info-btn:hover { color: var(--foreground); }
.info-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.help-pop { width: min(460px, 100% - 32px); padding: 24px; border: 1px solid var(--sidebar-border); border-radius: var(--r-lg); background: var(--card);
  color: var(--foreground); box-shadow: 0 20px 50px -20px rgb(var(--ink-rgb) / 0.4); font: 400 var(--t-base)/1.55 var(--font-sans); letter-spacing: 0; text-align: left; }
.help-pop::backdrop { background: rgb(var(--ink-rgb) / 0.18); }
.help-pop h3 { font-size: var(--t-md); margin-bottom: 10px; }
.help-pop p { margin-bottom: 10px; }
.help-pop ul { margin: 0 0 18px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #55526a; font-size: var(--t-sm); }
.help-pop code { font: 400 0.85em var(--font-mono); background: var(--sidebar); padding: 1px 5px; border-radius: 4px; }

/* Brand page: lookbooks as cover cards, current then past */
.lb-section { margin-bottom: 40px; }
.lb-section > h2 { font-size: var(--t-md); margin-bottom: 14px; }
.lb-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lb-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--sidebar-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.lb-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.lb-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.lb-cover { aspect-ratio: 16 / 10; background: var(--sidebar); overflow: hidden; }
.lb-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lb-info { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.lb-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lb-top strong { font: 500 1.25rem/1.2 var(--font-serif); }
.lb-meta { font-size: var(--t-sm); color: var(--muted-foreground); }
.lb-stats { display: flex; gap: 16px; font-size: var(--t-sm); color: var(--muted-foreground); margin-top: 6px; }
.lb-stats b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Overview */
.btn-sm { min-height: 34px; padding: 0 14px; font-size: var(--t-sm); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 4px 0 36px; }
.kpi { position: relative; overflow: hidden; padding: 18px 20px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 6px; }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--kpi, var(--primary)); }
.kpi span { font-size: var(--t-sm); color: var(--muted-foreground); }
.kpi b { font: 500 2rem/1 var(--font-serif); font-variant-numeric: tabular-nums; }
.kpi-live { --kpi: var(--chart-3); } .kpi-req { --kpi: var(--accent); } .kpi-brands { --kpi: var(--chart-5, #a0bbe3); }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.section-head h2 { font: 500 1.375rem/1.2 var(--font-serif); }
.section-head h2 a { text-decoration: none; }
.section-head h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.empty-line { padding: 4px 0 8px; }

/* Lookbook cards: cover photo with status on it, then stats */
.lb-card { border-color: var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.lb-cover { position: relative; display: block; }
.lb-cover-empty { display: grid; place-items: center; height: 100%; font-size: var(--t-sm); color: var(--muted-foreground); }
.lb-status { position: absolute; left: 12px; top: 12px; }
.lb-status .badge { box-shadow: 0 2px 8px rgb(var(--ink-rgb) / 0.12); }
.lb-info strong { font: 500 1.25rem/1.2 var(--font-serif); }
.stat { padding: 3px 10px; border-radius: var(--r-pill); background: var(--sidebar); white-space: nowrap; }

/* Status colours from the theme palette */
.badge-live { background: #e0f2ea; color: #276149; }
.badge-draft { background: #fdf1dc; color: #7d5212; }
.badge-closed { background: #ebe8f0; color: #5c5970; }
.badge-run { background: #e3ecf9; color: #34588c; }

/* Lookbook editor */
.form-section { display: flex; flex-direction: column; gap: 18px; padding: 22px 0; border-top: 1px solid var(--input); }
.form-section:first-of-type { border-top: 0; padding-top: 4px; }
.limits-row { flex-direction: row; flex-wrap: wrap; gap: 24px 40px; }
.lbl { display: block; font-size: var(--t-sm); font-weight: 600; }
.help { font-size: var(--t-sm); color: var(--muted-foreground); margin-top: 6px; }
.seg { display: inline-flex; width: fit-content; padding: 4px; border-radius: var(--r-pill); background: #f1eff5; gap: 2px; box-shadow: inset 0 1px 2px rgb(var(--ink-rgb) / 0.06); }
.seg button { all: unset; cursor: var(--cursor-hand, pointer); height: 36px; padding: 0 18px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; color: var(--muted-foreground); display: inline-flex; align-items: center; }
.seg button[aria-checked="true"] { background: #fff; color: var(--foreground); box-shadow: 0 1px 3px rgb(var(--ink-rgb) / 0.16), 0 0 0 1px rgb(var(--ink-rgb) / 0.04); }
.seg button:focus-visible { outline: 2px solid var(--ring); }
.num-input { width: 96px; }
.affix { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); overflow: hidden; max-width: 560px; }
.affix:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px rgb(var(--tint) / 0.22); }
.affix-pre { display: flex; align-items: center; padding: 0 0 0 12px; color: var(--muted-foreground); font-size: var(--t-sm); white-space: nowrap; }
.affix input { border: 0; box-shadow: none !important; padding-left: 2px; min-width: 0; }
.affix.narrow { max-width: 180px; }
.affix-pre + input { padding-left: 4px; }

/* Labels: one clear step above the input text */
.panel .field label, .lbl { font-size: var(--t-base); font-weight: 600; margin-bottom: 8px; }
.panel .field .hint { font-size: var(--t-sm); }
.settings-row { flex-direction: row; flex-wrap: wrap; gap: 20px 32px; align-items: flex-start; }
.settings-row .field { min-width: 0; }
#l-products { min-height: 220px; }

/* Dropdown: native select (keyboard and screen-reader friendly), dressed as a pill with a status dot */
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap::before { content: ""; position: absolute; left: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--muted-foreground)); pointer-events: none; }
.select-wrap select { width: auto; min-width: 150px; padding-left: 32px; border-radius: var(--r-pill); font-weight: 600; background-color: var(--card);
  box-shadow: 0 1px 2px rgb(var(--ink-rgb) / 0.06); cursor: var(--cursor-hand, pointer); }
.status-draft { --dot: #d9a441; } .status-live { --dot: #3f9a74; } .status-closed { --dot: #9a96a8; }
.select-wrap.compact select { min-width: 128px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: var(--t-sm); }
.order-new { --dot: #8a79ab; } .order-ordered { --dot: #d9a441; } .order-shipped { --dot: #5b86c4; } .order-delivered { --dot: #3f9a74; }

/* Requests */
.req-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter { all: unset; cursor: var(--cursor-hand, pointer); display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line); font-size: var(--t-sm); font-weight: 600; color: var(--muted-foreground); box-shadow: 0 1px 2px rgb(var(--ink-rgb) / 0.04); }
.filter span { font-variant-numeric: tabular-nums; color: var(--muted-foreground); font-weight: 500; }
.filter[aria-pressed="true"] { background: var(--foreground); border-color: var(--foreground); color: #fff; }
.filter[aria-pressed="true"] span { color: rgb(255 255 255 / 0.75); }
.filter:focus-visible { outline: 2px solid var(--ring); }
.toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search { width: 220px; min-height: 40px; border-radius: var(--r-pill); padding-left: 16px; }
.cols-pop { width: 260px; }
.check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: var(--t-sm); font-weight: 500; cursor: var(--cursor-hand, pointer); }
.check input { width: 16px; height: 16px; min-height: 0; accent-color: var(--primary-strong); }
.link-btn { all: unset; cursor: var(--cursor-hand, pointer); color: var(--primary-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.req-table td { padding: 10px 14px; }
.req-table th { padding: 12px 14px; }
.nowrap { white-space: nowrap; }
.addr { font-size: var(--t-sm); color: var(--muted-foreground); }
.cell-input { min-height: 36px; padding: 6px 10px; font-size: var(--t-sm); width: 140px; border-color: transparent; background: var(--background); transition: background .2s, border-color .2s; }
.cell-input:hover { border-color: var(--border); }
.cell-input.saved { background: #e0f2ea; }
.cell-affix { max-width: 120px; border-color: transparent; background: var(--background); }
.cell-affix .cell-input { width: 90px; background: transparent; }
.req-table td:has(.items) { min-width: 260px; }
.req-table .items li { white-space: normal; }
.req-table td:has(.addr) { min-width: 200px; }
.req-table thead th { position: sticky; top: 0; background: var(--card); }

/* Admin controls: squarer, tool-like (the creator site keeps its softer shapes) */
.page .btn, .topbar .btn { border-radius: var(--r-sm); }
.page input, .page textarea { border-radius: var(--r-sm); }

/* Requests: summary strip */
.req-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 20px; gap: 12px; }
@media (max-width: 1100px) { .req-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.req-kpis .kpi { padding: 14px 16px; border-radius: var(--r-md); }
.req-kpis .kpi::before { display: none; }
.req-kpis .kpi span { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.req-kpis .kpi b { font: 600 1.625rem/1.1 var(--font-sans); letter-spacing: -0.02em; }
.req-kpis .kpi small { font-size: var(--t-xs); color: var(--muted-foreground); }
.kpi-total { background: linear-gradient(180deg, #fff, var(--soft)); }

/* Requests: one card holding toolbar + table */
.table-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.req-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px; margin: 0; border-bottom: 1px solid var(--line); background: var(--soft); }
.toolbar-gap { flex: 1; }
.shown { font-size: var(--t-sm); margin-right: 4px; font-variant-numeric: tabular-nums; }
.search-box { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; width: 300px; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; color: var(--muted-foreground); }
.search-box:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px rgb(var(--tint) / 0.22); }
.search-box input { all: unset; flex: 1; font-size: var(--t-sm); color: var(--foreground); min-width: 0; }
.req-toolbar .btn-sm { min-height: 34px; }
.menu-wrap { position: relative; }
.export-pop { width: 300px; padding: 6px; }
.menu-item { all: unset; box-sizing: border-box; cursor: var(--cursor-hand, pointer); display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; border-radius: var(--r-sm); }
.menu-item:hover, .menu-item:focus-visible { background: rgb(var(--tint) / 0.12); }
.menu-item b { font-size: var(--t-sm); }
.menu-item small { font-size: var(--t-xs); color: var(--muted-foreground); }
.steps { margin: 0 0 14px; padding-left: 20px; font-size: var(--t-sm); display: flex; flex-direction: column; gap: 6px; }

/* Requests: table */
.req-table { border: 0; border-radius: 0; box-shadow: none; }
.req-table thead th { position: sticky; top: 0; z-index: 1; background: var(--soft); color: var(--foreground); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.03em;
  padding: 11px 14px; border-bottom: 1px solid var(--line); }
.req-table thead th.num, .req-table td.num { text-align: right; }
.req-table tbody td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.req-table tbody tr:hover td { background: var(--soft); }
.req-table tfoot td { padding: 12px 14px; border-top: 1px solid var(--line); background: var(--soft); font-size: var(--t-sm); color: var(--muted-foreground); }
.total-cell { color: var(--foreground) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.empty-row { text-align: center; padding: 40px !important; color: var(--muted-foreground); }
.muted-cell { color: var(--muted-foreground); font-size: var(--t-sm); }
.handle { font-weight: 600; font-size: var(--t-sm); display: block; }
.platform { font-size: var(--t-xs); color: var(--muted-foreground); }
.picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 240px; max-width: 300px; }
.picks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: center; }
.pk-img { width: 28px; height: 35px; border-radius: 4px; overflow: hidden; background: #efedf2; }
.pk-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pk-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pk-name { font-size: var(--t-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-var { font-size: var(--t-xs); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.money-in { display: inline-flex; align-items: center; gap: 2px; color: var(--muted-foreground); font-size: var(--t-sm); }
.money-in .cell-input { width: 84px; text-align: right; }
.req-table .cell-input { border-radius: 6px; }

/* Insights */
.stat-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
@media (max-width: 1100px) { .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat-tile { padding: 12px 14px; border-radius: var(--r-md); display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(var(--soft-rgb) / 0.95)); border: 1px solid #ebe7f1;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(var(--ink-rgb) / 0.04), 0 8px 20px -14px rgb(var(--ink-rgb) / 0.25); }
.stat-tile span { font-size: var(--t-xs); color: var(--muted-foreground); font-weight: 500; }
.stat-tile b { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-tile b i { font-style: normal; font-size: var(--t-sm); color: var(--muted-foreground); font-weight: 500; }
.stat-tile small { font-size: var(--t-xs); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-head { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.card-head h2 { font-size: var(--t-md); }
.card-head .muted { font-size: var(--t-sm); }
.ins-table table { min-width: 960px; }
.ins-table thead th { background: var(--soft); color: var(--foreground); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.03em; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ins-table tbody td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.ins-table tbody tr:hover td { background: var(--soft); }
.ins-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; }
.item-cell { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; max-width: 320px; }
.share { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.share-track { width: 64px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.share-track span { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; border-radius: 6px; background: var(--soft); font-size: var(--t-xs); white-space: nowrap; }
.mini-chip b { background: #fff; border-radius: 4px; padding: 0 5px; font-variant-numeric: tabular-nums; }
.mini-more { font-size: var(--t-xs); color: var(--muted-foreground); align-self: center; }
.ins-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; margin-top: 20px; }
@media (max-width: 1000px) { .ins-grid { grid-template-columns: 1fr; } }
.ins-grid .panel h2 { font-size: var(--t-md); }
.ins-grid .sub { margin-bottom: 16px; }
.curves { display: flex; flex-direction: column; gap: 22px; }
.curve h3 { font-size: var(--t-sm); margin-bottom: 8px; }
.cols { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-bottom: 20px; position: relative; border-bottom: 1px solid var(--line); }
.col { flex: 1; min-width: 22px; max-width: 44px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.col-bar { width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--primary), rgb(var(--tint))); transition: filter .15s; }
.col:hover .col-bar { filter: brightness(0.92); }
.col-n { font-size: var(--t-xs); font-weight: 600; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.col-k { position: absolute; bottom: -20px; font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plain-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; font-size: var(--t-sm); }
.stack-bar { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; margin: 6px 0 14px; background: var(--line); }
.stack-bar span { display: block; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--t-sm); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend b { font-variant-numeric: tabular-nums; margin-left: 2px; }
.legend.col { flex-direction: column; gap: 6px; }
.legend.col li { justify-content: space-between; max-width: 180px; }
.mix { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mix h3 { font-size: var(--t-sm); color: var(--muted-foreground); font-weight: 500; margin-bottom: 8px; }

/* Depth and motion across admin: content rises in once, cards lift slightly on hover */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.reveal, .page > .panel, .page > .table-card, .page > .kpis, .lb-section, .layout > * { animation: rise .45s var(--ease) both; }
.page > :nth-child(3) { animation-delay: 40ms; } .page > :nth-child(4) { animation-delay: 80ms; } .page > :nth-child(5) { animation-delay: 120ms; } .page > :nth-child(6) { animation-delay: 160ms; }
.lb-card, .stat-tile, .kpi { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.lb-card:hover, .stat-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(var(--ink-rgb) / 0.04), 0 18px 36px -18px rgb(var(--ink-rgb) / 0.32); }
.panel, .table-card { box-shadow: 0 1px 1px rgb(var(--ink-rgb) / 0.03), 0 4px 10px -4px rgb(var(--ink-rgb) / 0.06), 0 22px 44px -28px rgb(var(--ink-rgb) / 0.22); }
.with-dot { display: inline-flex; align-items: center; gap: 6px; }
.overview-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; margin-bottom: 32px; }
.badge-scheduled { background: #e3ecf9; color: #34588c; }
.help.center { text-align: center; }

/* Insights: popularity + heatmap */
.ins-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 820px; }
.ins-table th.rank, .ins-table td.rank { width: 36px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; text-align: center; }
.item-row { cursor: var(--cursor-hand, pointer); }
.item-row.zero { cursor: default; }
.item-row.zero .pk-name, .item-row.zero .pop b { color: var(--muted-foreground); }
.item-row[aria-expanded="true"] td { background: var(--soft); }
.item-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.chev { width: 28px; color: var(--muted-foreground); }
.item-row[aria-expanded="true"] .chev svg { transform: rotate(180deg); }
.pop { display: inline-flex; align-items: center; gap: 10px; min-width: 150px; }
.pop-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; min-width: 90px; }
.pop-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgb(var(--tint)), var(--primary-strong)); }
.pop b { font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
.who-row td { background: var(--soft); border-top: 0 !important; padding-top: 0 !important; }
.who { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.who li { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); flex-wrap: wrap; }
.heat-card { margin-top: 20px; }
.heat-card h2 { font-size: var(--t-md); margin-bottom: 14px; }
.heat { display: flex; flex-direction: column; gap: 10px; }
.heat-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; }
.heat-fit { font-size: var(--t-sm); font-weight: 600; }
.heat-cells { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.heat-cell { flex: 0 0 auto; min-width: 58px; height: 52px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: color-mix(in srgb, var(--primary-strong) calc(var(--v) * 85% + 8%), #fff); color: var(--foreground); }
.heat-cell b { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.heat-cell small { font-size: 11px; opacity: 0.8; white-space: nowrap; }
.heat-cell[style*="--v:0.6"], .heat-cell[style*="--v:0.7"], .heat-cell[style*="--v:0.8"], .heat-cell[style*="--v:0.9"], .heat-cell[style*="--v:1.0"] { color: #fff; }
.heat-note { font-size: var(--t-sm); margin-top: 12px; }

/* Sizes by category: 100% stacked bars */
.mix-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.mix-head h2 { margin: 0 !important; }
.mix-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-xs); color: var(--muted-foreground); }
.mix-key span { display: inline-flex; align-items: center; gap: 6px; }
.mix-key i { width: 12px; height: 12px; border-radius: 3px; }
.mix-rows { display: flex; flex-direction: column; gap: 14px; }
.mix-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; }
.mix-cat { font-size: var(--t-sm); font-weight: 600; display: flex; flex-direction: column; line-height: 1.3; padding-top: 4px; }
.mix-cat small { font-weight: 500; color: var(--muted-foreground); font-size: var(--t-xs); }
.seg-bar { display: flex; gap: 2px; height: 30px; border-radius: 8px; overflow: hidden; background: var(--soft); }
.seg-part { display: flex; align-items: center; justify-content: center; font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4px; transition: filter .15s; cursor: default; }
.seg-part:hover { filter: brightness(0.94); }
.mix-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: var(--t-xs); color: var(--muted-foreground); }
.mix-legend b { color: var(--foreground); font-weight: 600; }

.settings-row + .settings-row { border-top: 0; padding-top: 0; }
.settings-row .field { flex: 0 0 auto; }
.ins-search { margin-left: auto; width: 240px; }
.card-head { align-items: center; flex-wrap: wrap; }

/* Donuts */
.donuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.donut-card { margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px;
  border-radius: var(--r-lg); background: linear-gradient(160deg, #ffffff 0%, var(--soft) 100%); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(var(--ink-rgb) / 0.04), 0 10px 24px -18px rgb(var(--tint) / 0.45); }
.donut-card svg { width: 112px; height: 112px; overflow: visible; }
.donut-card circle { transition: stroke-width .15s var(--ease); cursor: default; }
.donut-card circle:hover { stroke-width: 24; }
.donut-n { font: 700 20px var(--font-sans); fill: var(--foreground); }
.donut-u { font: 500 10px var(--font-sans); fill: var(--muted-foreground); }
.donut-card figcaption b { display: block; font-size: var(--t-sm); margin-bottom: 8px; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.donut-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--t-xs); color: var(--muted-foreground); }
.donut-legend i { width: 10px; height: 10px; border-radius: 3px; }
.donut-legend span { color: var(--foreground); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Instant tooltip */
.tip { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; padding: 7px 10px; border-radius: 8px; max-width: 280px;
  background: rgb(42 40 54 / 0.94); color: #fff; font: 600 12px/1.35 var(--font-sans); box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.35);
  opacity: 0; transition: opacity .12s; }
.tip.show { opacity: 1; }

/* ---------- Depth pass ---------- */
body { background: radial-gradient(1100px 600px at 50% -10%, rgb(var(--tint) / 0.16), transparent 65%), var(--soft); background-attachment: fixed; }
.topbar { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 12px 32px -14px rgb(var(--ink-rgb) / 0.28), 0 2px 6px rgb(var(--ink-rgb) / 0.05); }

/* Floating surfaces */
.panel, .table-card, .lb-card, .stat-tile, .login, .kpi {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(var(--soft-rgb) / 0.96));
  border: 1px solid rgb(255 255 255 / 0.9); outline: 1px solid rgb(var(--ink-rgb) / 0.06); outline-offset: -1px;
  box-shadow: var(--float); }
.lb-card:hover, .stat-tile:hover, .donut-card:hover { transform: translateY(-3px); box-shadow: var(--float-hover); }
.table-card { overflow: hidden; }

/* Colour only where it means something: status dots, request status, chart categories.
   Everything else is ink on white, with plum as the one brand colour. */
.tabs a[aria-current="page"] { border-bottom-color: var(--plum); }
.pop-bar span { background: var(--plum); }
.share-track span { background: var(--plum); }
.lb-cover { background: var(--line); }
.brand-btn { white-space: nowrap; }

/* LookBooks wordmark */
.logo { display: inline-flex; align-items: baseline; font: 700 19px/1 var(--font-sans); letter-spacing: -0.045em; color: var(--foreground); white-space: nowrap; }
.logo b { font-weight: inherit; }
.logo .lenses { width: 1.14em; height: 0.545em; margin: 0 0.02em 0 0.03em; align-self: baseline; transform: translateY(0.01em); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.wordmark:hover .lenses { transform: translateY(0.01em) scale(1.08) rotate(-4deg); }
.logo-lg { font-size: 34px; }
.wordmark { display: inline-flex; align-items: center; color: inherit; }
@media (prefers-reduced-motion: reduce) { .logo .lenses { transition: none; } }
.brand-menu { min-width: 0; }
.brand-btn { max-width: 100%; }
.brand-btn .muted, .brand-btn { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .topbar { padding-left: 16px; gap: 6px; }
  .wordmark { padding-right: 8px; }
  .brand-btn { padding: 0 8px; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* (i) icons: small and quiet, with a larger invisible hit area */
.info-btn { width: 15px; height: 15px; border-width: 1.25px; font-size: 9.5px; position: relative; opacity: .75; }
.info-btn::before { content: ""; position: absolute; inset: -8px; }
.info-btn:hover { opacity: 1; }

/* Lookbook setup: plum cover with the name and note, then floating tiles */
.editor { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cover-card { position: relative; overflow: hidden; border-radius: 20px; padding: 28px 30px 22px; color: #fff; min-height: 240px; display: flex; flex-direction: column;
  background: radial-gradient(120% 140% at 0% 0%, #4c3b7d 0%, var(--plum) 45%, var(--plum-deep) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 2px 4px rgb(var(--shade-rgb) / 0.12), 0 30px 60px -30px rgb(var(--shade-rgb) / 0.7); }
.cover-img { position: absolute; right: 0; top: 0; height: 100%; width: 42%; object-fit: cover; object-position: top;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); opacity: .9; }
.cover-fields { position: relative; display: flex; flex-direction: column; max-width: 62%; }
.cover-card:not(.has-img) .cover-fields { max-width: 720px; }
.cover-lbl { font-size: var(--t-xs); font-weight: 500; color: rgb(255 255 255 / 0.6); margin-bottom: 2px; }
.cover-name, .cover-note { all: unset; box-sizing: border-box; width: 100%; color: #fff; border-radius: 8px; transition: background .15s; }
.cover-name { font: 500 34px/1.2 var(--font-serif); letter-spacing: -0.01em; padding: 2px 8px; margin: 0 -8px 14px; }
.cover-note { font: 400 var(--t-sm)/1.55 var(--font-sans); color: rgb(255 255 255 / 0.86); padding: 6px 8px; margin: 0 -8px; resize: vertical; min-height: 64px; white-space: pre-wrap; }
.cover-name::placeholder, .cover-note::placeholder { color: rgb(255 255 255 / 0.38); }
.cover-name:hover, .cover-note:hover { background: rgb(255 255 255 / 0.06); }
.cover-name:focus, .cover-note:focus { background: rgb(255 255 255 / 0.1); outline: 2px solid rgb(255 255 255 / 0.35); }
.cover-card .error { color: #ffc2d1; margin: -10px 0 8px; }
.cover-meta { position: relative; margin: auto 0 0; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--t-xs); color: rgb(255 255 255 / 0.72); }
.cover-meta .badge { background: rgb(255 255 255 / 0.14); color: #fff; }
.tile { background: #fff; border-radius: 16px; padding: 18px 20px 20px; box-shadow: var(--float); outline: 1px solid rgb(var(--ink-rgb) / 0.06); outline-offset: -1px; min-width: 0; }
.tile .field { margin: 0; min-width: 0; }
.tile input[type="datetime-local"], .tile .num-input, .tile .affix { width: 100%; }
.tile textarea.mono { min-height: 150px; width: 100%; }
.editor .form-foot { margin-top: 0; border-top: 0; padding-top: 4px; }
@media (max-width: 640px) {
  .cover-card { padding: 22px 20px 18px; }
  .cover-img { width: 100%; opacity: .22; -webkit-mask-image: none; mask-image: none; }
  .cover-fields { max-width: none; }
  .cover-name { font-size: 26px; }
}
.ins-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ins-tools .ins-search { margin-left: 0; }
.chip-toggle { all: unset; cursor: var(--cursor-hand, pointer); height: 34px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 500; color: var(--muted-foreground);
  border: 1px solid var(--border); background: #fff; white-space: nowrap; }
.chip-toggle:hover { color: var(--foreground); border-color: var(--ring); }
.chip-toggle[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: #fff; }
.chip-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Brand theme picker: each swatch is a mini creator page (page colour, button colour) */
.theme-pick { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.theme-pick legend { font-size: var(--t-sm); font-weight: 600; margin-bottom: 10px; padding: 0; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: var(--cursor-hand, pointer); }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.sw-chip { width: 100%; height: 56px; border-radius: 12px; background: var(--sw-page); border: 1px solid rgb(var(--ink-rgb) / 0.1); display: grid; place-items: end center; padding-bottom: 9px; box-sizing: border-box;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.sw-chip i { width: 60%; height: 12px; border-radius: 6px; background: var(--sw-ink); box-shadow: 0 -16px 0 -2px var(--sw-tint); }
.sw-name { font-size: var(--t-xs); color: var(--muted-foreground); }
.swatch:hover .sw-chip { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgb(var(--ink-rgb) / 0.4); }
.swatch input:checked + .sw-chip { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sw-ink); }
.swatch input:checked ~ .sw-name { color: var(--foreground); font-weight: 600; }
.swatch input:focus-visible + .sw-chip { outline: 2px solid var(--ring); outline-offset: 4px; }

/* Setup settings: one grid, so every field lines up by column */
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.settings-grid .field { margin: 0; min-width: 0; }
.settings-grid .dd, .settings-grid .dt, .settings-grid .dd-btn, .settings-grid .num-input, .settings-grid .affix { width: 100%; display: flex; }
.tile .field textarea.mono { min-height: 160px; width: 100%; }
@media (max-width: 760px) { .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-grid .field:first-child { grid-column: 1 / -1; } }

/* Disabled actions explain themselves on hover only */
.tip-wrap { display: inline-block; cursor: not-allowed; border-radius: var(--r-sm); }
.tip-wrap .btn:disabled { pointer-events: none; opacity: .45; }
.tip-wrap:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Date + time picker */
.dt-btn { width: 100%; gap: 10px; font-weight: 500; }
.dt-btn svg:first-child { color: var(--muted-foreground); flex: none; }
.dt-empty { color: var(--muted-foreground); }
.dt-pop { position: fixed; z-index: 55; width: 296px; padding: 14px; background: #fff; border-radius: 16px; border: 1px solid rgb(var(--ink-rgb) / 0.08);
  box-shadow: 0 2px 6px rgb(var(--ink-rgb) / 0.06), 0 24px 48px -18px rgb(var(--shade-rgb) / 0.45); animation: dd-in .14s var(--ease); }
.dt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dt-head b { font-size: var(--t-sm); font-weight: 600; }
.dt-nav { all: unset; cursor: var(--cursor-hand, pointer); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--muted-foreground); }
.dt-nav:hover { background: var(--sidebar); color: var(--foreground); }
.dt-nav:focus-visible, .dt-day:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dt-dow { font-size: 11px; color: var(--muted-foreground); text-align: center; padding: 4px 0 6px; }
.dt-day { all: unset; cursor: var(--cursor-hand, pointer); height: 34px; display: grid; place-items: center; border-radius: 9px; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.dt-day:hover { background: rgb(var(--tint) / 0.14); }
.dt-day.today { font-weight: 700; color: var(--plum); box-shadow: inset 0 0 0 1px rgb(var(--shade-rgb) / 0.25); }
.dt-day.on { background: var(--plum); color: #fff; font-weight: 600; box-shadow: none; }
.dt-time { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--input); font-size: var(--t-sm); font-weight: 600; }
.dt-time .dd-btn { min-width: 120px; }
.dt-foot { display: flex; justify-content: space-between; margin-top: 12px; }
.settings-grid .dd-btn, .settings-grid .dt-btn { width: 100%; min-height: 44px; }

/* Sign-in: a frosted card floating over soft colour */
.login-scene { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; position: relative; overflow: hidden; }
.login-scene::before, .login-scene::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.login-scene::before { width: 420px; height: 420px; left: calc(50% - 360px); top: calc(50% - 300px); background: rgb(var(--tint) / 0.45); }
.login-scene::after { width: 360px; height: 360px; left: calc(50% + 20px); top: calc(50% - 40px); background: rgb(230 165 184 / 0.4); }
.login.glass { position: relative; z-index: 1; width: min(400px, 100%); margin: 0; padding: 36px 32px 32px; border-radius: 24px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.62)); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgb(255 255 255 / 0.85); outline: 0;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgb(var(--ink-rgb) / 0.06), 0 30px 70px -30px rgb(var(--shade-rgb) / 0.5); }
.login-brand { display: flex; justify-content: center; margin-bottom: 18px; }
.login-title { text-align: center; font: 500 var(--t-base)/1.3 var(--font-sans) !important; color: var(--muted-foreground); letter-spacing: 0; margin: 0 0 24px !important; }
.login .field + .field { margin-top: 14px; }
.login .field input { background: rgb(255 255 255 / 0.85); }
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 48px; }
.pw-toggle { all: unset; box-sizing: border-box; cursor: var(--cursor-hand, pointer); position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--muted-foreground); }
.pw-toggle:hover { color: var(--foreground); background: rgb(var(--ink-rgb) / 0.05); }
.pw-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.login .error:empty { display: none; }
.login .btn { width: 100%; margin-top: 22px; }
@media (prefers-reduced-transparency: reduce) { .login.glass { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }


/* Requests table: spreadsheet cells. One field per column; cells read as text until
   hovered (tint) or edited (white with a ring). */
.req-table table { width: 100%; min-width: 0; table-layout: auto; }
.req-table tbody td { padding: 10px 12px; vertical-align: middle; }
.req-table thead th { padding: 10px 12px; white-space: nowrap; }
.req-table .name-cell { min-width: 160px; max-width: 210px; }
.req-table .name-cell small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req-table .picks { min-width: 220px; max-width: 280px; }
.req-table td.edit-cell { padding: 4px 6px; }
.req-table .w-order { width: 130px; } .req-table .w-total { width: 96px; } .req-table .w-date { width: 140px; }
.req-table .w-track { width: 160px; } .req-table .w-notes { min-width: 180px; }
.req-table .cell-input { display: block; width: 100%; min-width: 0; box-sizing: border-box; min-height: 36px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; font-size: var(--t-sm); color: var(--foreground); box-shadow: none; transition: background .15s, border-color .15s; }
.req-table .cell-input::placeholder { color: #c6c1d1; }
.req-table tr:hover .cell-input { background: rgb(var(--tint) / 0.06); }
.req-table .cell-input:hover { background: rgb(var(--tint) / 0.1); }
.req-table .cell-input:focus { background: #fff; border-color: var(--ring); box-shadow: 0 0 0 3px rgb(var(--tint) / 0.18); outline: none; }
.req-table .money { display: flex; align-items: center; }
.req-table .money .cur { color: var(--muted-foreground); font-size: var(--t-sm); padding-left: 6px; }
.req-table .money:has(.cell-input:placeholder-shown) .cur { visibility: hidden; }
.req-table .w-total .cell-input { text-align: right; font-variant-numeric: tabular-nums; }
.req-table .cell-link { color: inherit; text-decoration: none; font-size: var(--t-sm); }
.req-table .cell-link:hover { text-decoration: underline; }
.req-table td.cell-error .cell-input { border-color: var(--danger-text); }


/* Order column: a two-line summary that opens the order fields under the row */
.req-table .order-cell { width: 220px; padding: 6px 8px; }
.order-btn { all: unset; box-sizing: border-box; cursor: var(--cursor-hand, pointer); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center;
  width: 100%; min-height: 40px; padding: 6px 10px; border-radius: 10px; transition: background .15s; }
.order-btn:hover { background: rgb(var(--tint) / 0.08); }
.order-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.order-btn .o1, .order-btn .o2 { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-btn .o1 { font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.order-btn .o2 { font-size: var(--t-xs); color: var(--muted-foreground); margin-top: 2px; }
.order-btn .o-add { grid-column: 1; font-size: var(--t-sm); color: var(--muted-foreground); }
.order-btn:hover .o-add { color: var(--plum); }
.order-btn .o-chev { grid-column: 2; grid-row: 1 / span 2; color: var(--muted-foreground); transition: transform .2s var(--ease); }
.order-btn[aria-expanded="true"] { background: rgb(var(--tint) / 0.1); }
.order-btn[aria-expanded="true"] .o-chev { transform: rotate(180deg); }
.req-table tr.is-open td { background: var(--soft); border-bottom: 0; }
.req-table tr.order-row td { padding: 2px 12px 12px; background: var(--soft); border-top: 0; }
.order-panel { display: grid; grid-template-columns: minmax(0, 1fr) 120px 170px minmax(0, 1.2fr) auto; gap: 14px; align-items: end; padding: 4px 6px 2px; }
.o-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.o-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted-foreground); padding: 0 2px; white-space: nowrap; }
.order-panel .cell-input, .order-panel .o-date .dt-btn { width: 100%; box-sizing: border-box; min-height: 36px; padding: 6px 10px; border: 1px solid transparent; border-radius: 9px;
  background: rgb(var(--tint) / 0.08); font: 500 var(--t-sm)/1.2 var(--font-sans); color: var(--foreground); box-shadow: none; }
.order-panel .cell-input:hover, .order-panel .o-date .dt-btn:hover { background: rgb(var(--tint) / 0.13); }
.order-panel .cell-input:focus, .order-panel .o-date .dt-btn:focus-visible, .order-panel .o-date.open .dt-btn { background: #fff; border-color: var(--ring); box-shadow: 0 0 0 3px rgb(var(--tint) / 0.18); outline: none; }
.order-panel .o-date .dt-btn { gap: 8px; }
.order-panel .o-date .dt-empty { color: #b7b1c4; }
.order-panel .money { display: flex; align-items: center; gap: 4px; }
.order-panel .money .cur { color: var(--muted-foreground); font-size: var(--t-sm); }
.o-actions { display: flex; align-items: center; gap: 4px; }
.o-icon-btn { all: unset; cursor: var(--cursor-hand, pointer); display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 9px; color: var(--muted-foreground); font-size: var(--t-sm); font-weight: 500; }
.o-icon-btn:hover { background: rgb(var(--tint) / 0.1); color: var(--foreground); }
.o-icon-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.o-done { width: 36px; padding: 0; justify-content: center; }
.order-panel .o-field:has(:focus) .o-lbl, .order-panel .o-field:has(.o-date.open) .o-lbl { color: var(--plum); }
@media (max-width: 980px) { .order-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Creator message: a small card that appears only when asked for */
.msg-pop { position: fixed; inset: auto; margin: 0; width: 340px; padding: 14px; border: 1px solid rgb(var(--ink-rgb) / 0.08); border-radius: 14px; background: #fff;
  box-shadow: 0 2px 6px rgb(var(--ink-rgb) / 0.06), 0 24px 48px -18px rgb(var(--shade-rgb) / 0.45); }
.msg-pop:popover-open { animation: dd-in .14s var(--ease); }
.msg-text { margin: 0 0 12px; font-size: var(--t-sm); line-height: 1.55; color: var(--foreground); user-select: text; }
.msg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.msg-hint { font-size: var(--t-xs); color: var(--muted-foreground); }
.msg-copy.is-copied { background: #2f7a5b; border-color: #2f7a5b; }

/* Creator: avatar with platform badge, name, then @handle · date */
.req-table .name-cell { min-width: 190px; max-width: 240px; }
.creator-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--line); color: var(--plum); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.avatar .plat { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; box-shadow: 0 0 0 2px #fff; }
.plat-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.plat-tiktok { background: #111; }
.who-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.who-txt strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-sub { display: flex; align-items: center; gap: 5px; font-size: var(--t-xs); color: var(--muted-foreground); min-width: 0; white-space: nowrap; }
.who-sub .dot { opacity: .6; }
.handle-link { color: var(--plum); text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.handle-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.handle-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
.who-sub time { flex: none; }



/* Save mark in the edited box: spinner while saving, then a soft check that holds and fades */
.has-check { position: relative; }
.cf-ok { position: absolute; transform: translateY(-50%); width: 14px; height: 14px; display: grid; place-items: center; pointer-events: none; }
.cf-ok > * { grid-area: 1 / 1; opacity: 0; transition: opacity .15s, transform .2s var(--ease); }
.cf-spin { width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid rgb(var(--tint) / 0.28); border-top-color: var(--plum); box-sizing: border-box; animation: cf-spin .7s linear infinite; }
.cf-ok svg { color: #6fa98c; transform: scale(.6); }
.cf-ok.is-loading .cf-spin { opacity: 1; }
.cf-ok.is-done svg { opacity: .95; transform: scale(1); }
.cf-ok.is-out svg { opacity: 0; transition: opacity .4s ease-out; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cf-spin { animation: none; } .cf-ok > * { transition: none; } }

/* Panel actions: one small pill, two icon buttons with a hairline between */
.o-pill { display: inline-flex; align-items: center; height: 36px; padding: 2px; border-radius: 10px; background: rgb(var(--tint) / 0.08); }
.o-pill .o-icon-btn { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 8px; }
.o-pill .o-icon-btn + .o-icon-btn { position: relative; margin-left: 1px; }
.o-pill .o-icon-btn + .o-icon-btn::before { content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 1px; background: rgb(var(--ink-rgb) / 0.14); }
.o-pill .o-icon-btn:hover { background: #fff; color: var(--plum); box-shadow: 0 1px 2px rgb(var(--ink-rgb) / 0.1); }
.o-pill .o-msg-btn[aria-expanded="true"] { background: #fff; color: var(--plum); }

/* Order panel, less boxy: values read as text; a box appears only on hover (tint) and
   while editing (white + ring). Empty values sit on a hairline so the field is findable. */
.order-panel { gap: 6px 22px; padding: 2px 4px 0; }
.order-panel .cell-input, .order-panel .o-date .dt-btn {
  background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px);
  font-weight: 500; transition: background .15s, border-color .15s, box-shadow .15s; }
.order-panel .cell-input:placeholder-shown { background-image: linear-gradient(rgb(var(--ink-rgb) / 0.14), rgb(var(--ink-rgb) / 0.14)); background-size: calc(100% - 16px) 1px;
  background-position: 8px calc(100% - 6px); background-repeat: no-repeat; }
.order-panel .o-date .dt-btn:has(.dt-empty) { background-image: linear-gradient(rgb(var(--ink-rgb) / 0.14), rgb(var(--ink-rgb) / 0.14)); background-size: calc(100% - 16px) 1px;
  background-position: 8px calc(100% - 6px); background-repeat: no-repeat; }
.order-panel .cell-input:hover, .order-panel .o-date .dt-btn:hover { background-color: rgb(var(--tint) / 0.09); }
.order-panel .cell-input:focus, .order-panel .o-date .dt-btn:focus-visible, .order-panel .o-date.open .dt-btn {
  background: #fff; border-color: var(--ring); box-shadow: 0 0 0 3px rgb(var(--tint) / 0.16); }
.order-panel .o-date .dt-btn svg:first-child { opacity: .55; }
/* Paid: the $ sits inside the box, where the other fields' text starts, so every label,
   value and hairline lines up. Empty, it reads like the others (no $). */
.order-panel .money { position: relative; display: block; }
.order-panel .money .cur { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none; font: 500 var(--t-sm)/1 var(--font-sans); }
.order-panel .money .cell-input { padding-left: 20px; }
.order-panel .money .cell-input:placeholder-shown { padding-left: 8px; }
.order-panel .o-lbl { padding: 0; }
.o-pill { background: transparent; }
.o-pill .o-icon-btn + .o-icon-btn::before { background: rgb(var(--ink-rgb) / 0.1); }
.cf-ok.no-anim > * { transition: none; }

/* Most picked: donut with the piece shown in its centre, ranked list beside it */
.pie-card { margin-bottom: 20px; }
.pie-head h2 { font-size: var(--t-md); margin: 0 0 6px; }
.pie-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: center; }
.pie { position: relative; width: 300px; height: 300px; }
.pie svg { width: 100%; height: 100%; overflow: visible; }
.pie-slice { stroke: #fff; stroke-width: 2; cursor: var(--cursor-hand, pointer); transition: transform .25s var(--ease), opacity .2s; outline: none; }
.pie-card.has-active .pie-slice { opacity: .38; }
.pie-card.has-active .pie-slice.on { opacity: 1; transform: translate(var(--dx), var(--dy)); filter: drop-shadow(0 6px 10px rgb(var(--shade-rgb) / 0.28)); }
.pie-slice:focus-visible { opacity: 1; stroke: var(--ring); stroke-width: 3; }
.pie-center { position: absolute; inset: 0; margin: auto; width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; padding: 10px; box-sizing: border-box; }
.pc-num { font: 600 34px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--foreground); font-variant-numeric: tabular-nums; }
.pc-sub { font-size: var(--t-xs); color: var(--muted-foreground); margin-top: 6px; }
.pc-sub2 { font-size: 11px; color: var(--muted-foreground); opacity: .8; margin-top: 2px; }
.pie-center.is-item { animation: pc-in .2s var(--ease); }
@keyframes pc-in { from { opacity: 0; transform: scale(.94); } }
.pc-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px rgb(var(--shade-rgb) / 0.5); margin-bottom: 6px; }
.pc-name { font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-stat { font-size: 11px; color: var(--muted-foreground); margin-top: 3px; }
.pc-stat b { color: var(--plum); font-weight: 700; }
.pc-top { font-size: 10.5px; color: var(--muted-foreground); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.pie-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pie-row { display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 36px 120px; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; cursor: var(--cursor-hand, pointer);
  transition: background .15s, opacity .2s; outline: none; }
.pie-row .pk-img { width: 28px; height: 35px; }
.pr-rank { font-size: var(--t-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; text-align: right; }
.pr-dot { width: 12px; height: 12px; border-radius: 4px; justify-self: center; }
.pr-name { font-size: var(--t-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-n { font-size: var(--t-sm); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pr-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pr-bar span { display: block; height: 100%; border-radius: 3px; }
.pie-row:hover, .pie-row.on, .pie-row:focus-visible { background: rgb(var(--tint) / 0.09); }
.pie-row:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); }
.pie-card.has-active .pie-row:not(.on) { opacity: .5; }

/* Row highlight after jumping from the chart */
@keyframes row-flash { 0%, 30% { background: rgb(var(--tint) / 0.16); } 100% { background: transparent; } }
.item-row.row-flash td { animation: row-flash 1.8s ease-out; }

@media (max-width: 900px) {
  .pie-wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; }
  .pie { width: 260px; height: 260px; }
  .pie-list { width: 100%; }
  .pie-row { grid-template-columns: 18px 28px minmax(0, 1fr) 30px 70px; }
}
@media (prefers-reduced-motion: reduce) { .pie-slice, .pie-center.is-item { transition: none; animation: none; } }

/* Who picked it: creator cards in a responsive grid */
.who-row td { padding: 4px 14px 16px !important; }
.who-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.who-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgb(var(--ink-rgb) / 0.06); }
.who-card .avatar { grid-row: 1 / span 2; }
.who-card .who-txt { min-width: 0; }
.who-variant { grid-column: 2; font-size: var(--t-xs); color: var(--muted-foreground); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .pie-row { grid-template-columns: 18px 28px minmax(0, 1fr) 24px; } .pie-row .pr-bar { display: none; } }
@media (max-width: 600px) { .pie-row .pr-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } }

/* Most picked: selection stays popped; dimming only while hovering; creators below */
.pie-card .pie-slice.on { transform: translate(var(--dx), var(--dy)); filter: drop-shadow(0 6px 10px rgb(var(--shade-rgb) / 0.28)); }
.pie-card.has-active .pie-slice { opacity: 1; }
.pie-card.is-hovering .pie-slice:not(.on) { opacity: .38; }
.pie-card.has-active .pie-row:not(.on) { opacity: 1; }
.pie-card.is-hovering .pie-row:not(.on):not(.sel) { opacity: .5; }
.pie-row.sel { background: rgb(var(--tint) / 0.12); box-shadow: inset 3px 0 0 var(--plum); }
.pie-row.sel .pr-name { font-weight: 600; }
.picked-by { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pb-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; min-width: 0; }
.pb-head b { font-size: var(--t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-head span { font-size: var(--t-xs); color: var(--muted-foreground); white-space: nowrap; }
.picked-by .who-card { background: var(--soft); box-shadow: none; outline: 1px solid var(--line); outline-offset: -1px; }
.pie-list { max-height: 360px; overflow-y: auto; position: relative; }

/* Donut centre stays inside the hole: fixed width that fits the circle, one line each */
.pie-center { width: 168px; height: 168px; padding: 14px 18px; }
.pie-center .pc-name, .pie-center .pc-stat, .pie-center .pc-top { max-width: 124px; }
.pie-center .pc-top { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pie-center .pc-name { -webkit-line-clamp: 2; }
.pc-img { width: 56px; height: 56px; }
@media (max-width: 900px) { .pie-center { width: 146px; height: 146px; padding: 10px 14px; } .pie-center .pc-name, .pie-center .pc-stat, .pie-center .pc-top { max-width: 110px; } .pc-img { width: 46px; height: 46px; } }

/* Sizes by category: one sunburst + a key with each category's takeaway */
.sun-card h2 { font-size: var(--t-md); margin: 0 0 6px; }
.sun-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: center; }
.sun { position: relative; width: 300px; height: 300px; }
.sun svg { width: 100%; height: 100%; overflow: visible; }
.sun-seg { stroke: #fff; stroke-width: 1.5; transition: opacity .2s, transform .2s var(--ease); transform-origin: 130px 130px; cursor: default; }
.sun-card.is-hovering .sun-seg:not(.on) { opacity: .28; }
.sun-card.is-hovering .sun-seg.on { transform: scale(1.025); }
.sun-center { position: absolute; inset: 0; margin: auto; width: 110px; height: 110px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.sun-center b { font: 600 30px/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sun-center span { font-size: var(--t-xs); color: var(--muted-foreground); margin-top: 4px; }
.sun-key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sun-row { display: grid; grid-template-columns: 12px minmax(70px, 110px) 32px minmax(0, 1fr) minmax(90px, 160px); gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; transition: background .15s, opacity .2s; }
.sun-row i { width: 12px; height: 12px; border-radius: 4px; }
.sr-cat { font-size: var(--t-sm); font-weight: 600; }
.sr-n { font-size: var(--t-sm); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sr-top { font-size: var(--t-xs); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-bands { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.sr-bands span { min-width: 4px; }
.sun-row.on { background: rgb(var(--tint) / 0.09); }
.sun-card.is-hovering .sun-row:not(.on) { opacity: .45; }
@media (max-width: 900px) {
  .sun-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; }
  .sun { width: 260px; height: 260px; }
  .sun-key { width: 100%; }
  .sun-row { grid-template-columns: 12px minmax(0, 1fr) 28px; row-gap: 4px; }
  .sun-row .sr-top { grid-column: 2 / -1; }
  .sun-row .sr-bands { grid-column: 2 / -1; }
}
@media (prefers-reduced-motion: reduce) { .sun-seg { transition: none; } }

/* Calmer chart motion: no growing, gentler dimming, quicker fades */
.sun-seg { transition: opacity .12s ease-out; transform: none !important; }
.sun-card.is-hovering .sun-seg:not(.on) { opacity: .55; }
.sun-card.is-hovering .sun-row:not(.on) { opacity: .7; }
.sun-row { transition: background .12s; }
.pie-slice { transition: transform .15s ease-out, opacity .12s ease-out; }
.pie-card.is-hovering .pie-slice:not(.on) { opacity: .6; }
.pie-card.is-hovering .pie-row:not(.on):not(.sel) { opacity: .7; }
.pie-card .pie-slice.on { filter: none; }
.pie-center.is-item { animation: none; }

/* Hover adds detail, never takes focus away: an outline on the hovered mark, a light wash on
   its row, nothing else dims or moves. Selection (click) is the only bigger state. */
.sun-seg.hov { stroke: var(--foreground); stroke-width: 2; paint-order: stroke; }
.sun-row.hov { background: rgb(var(--tint) / 0.08); }
.pie-slice.hov { stroke: var(--foreground); stroke-width: 2; }
.pie-row.hov:not(.sel) { background: rgb(var(--tint) / 0.06); }
.sun-card .sun-seg, .pie-card .pie-slice, .sun-row, .pie-row { opacity: 1 !important; }
.sr-top { white-space: normal; line-height: 1.5; }
.sr-top b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.sr-sep { margin: 0 6px; opacity: .5; }

/* Insights summary: one strip of three statements, not separate boxes */
.ins-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 22px 6px !important; margin-bottom: 20px; }
.sum-item { padding: 0 26px; min-width: 0; }
.sum-item + .sum-item { border-left: 1px solid var(--line); }
.sum-line { margin: 0 0 12px; font-size: var(--t-base); color: var(--muted-foreground); line-height: 1.35; }
.sum-line b { color: var(--foreground); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sum-meter { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sum-meter span { display: block; height: 100%; border-radius: 3px; background: var(--plum); }
.sum-note { margin: 8px 0 0; font-size: var(--t-xs); color: var(--muted-foreground); }
@media (max-width: 900px) {
  .ins-summary { grid-template-columns: minmax(0, 1fr); padding: 6px 4px !important; }
  .sum-item { padding: 16px 18px; }
  .sum-item + .sum-item { border-left: 0; border-top: 1px solid var(--line); }
}

/* Summary as three visuals: pips, ring, paid-vs-retail bars */
.ins-summary { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 0; padding: 22px 6px !important; margin-bottom: 20px; }
.kpi { padding: 0 26px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.kpi + .kpi { border-left: 1px solid var(--line); }
.kpi-row { flex-direction: row; align-items: center; gap: 16px; }
.kpi-num { display: flex; flex-direction: column; gap: 2px; }
.kpi-num b { font: 600 28px/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--foreground); }
.kpi-num b small { font-size: 16px; font-weight: 500; color: var(--muted-foreground); margin-left: 1px; }
.kpi-num > span { font-size: var(--t-xs); color: var(--muted-foreground); }
.kpi-cap { font-size: 11px; color: var(--muted-foreground); opacity: .85; }
.kpi-pips { display: flex; gap: 5px; }
.kpi-pips i { position: relative; flex: 1; max-width: 26px; height: 10px; border-radius: 3px; background: var(--line); overflow: hidden; }
.kpi-pips i::after { content: ""; position: absolute; inset: 0; width: calc(var(--f) * 100%); background: var(--plum); }
.kpi-ringwrap { position: relative; width: 64px; height: 64px; flex: none; }
.kpi-ring { width: 64px; height: 64px; }
.kr-track { fill: none; stroke: var(--line); stroke-width: 8; }
.kr-fill { fill: none; stroke: var(--plum); stroke-width: 8; stroke-linecap: round; }
.kpi-ringwrap span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--plum); }
.kpi-bars { display: flex; flex-direction: column; gap: 8px; }
.kb { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.kb-l { font-size: var(--t-xs); color: var(--muted-foreground); }
.kb-track { height: 10px; border-radius: 5px; overflow: hidden; }
.kb-track span { display: block; height: 100%; border-radius: 5px; }
.kb-retail { background: var(--line); }
.kb-paid { background: var(--plum); }
.kb b { font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; }
.kpi-foot { display: flex; align-items: center; gap: 10px; }
.kpi-tag { font-size: 11px; font-weight: 700; color: #2f7a5b; background: #e8f5ee; padding: 3px 8px; border-radius: 999px; }
@media (max-width: 900px) {
  .ins-summary { grid-template-columns: minmax(0, 1fr); padding: 4px !important; }
  .kpi { padding: 16px 18px; }
  .kpi + .kpi { border-left: 0; border-top: 1px solid var(--line); }
}
/* The summary cells are plain sections inside one card, not cards themselves */
.ins-summary .kpi { background: none; border: 0; outline: 0; box-shadow: none; border-radius: 0; transform: none; }
.ins-summary .kpi + .kpi { border-left: 1px solid var(--line); }
@media (max-width: 900px) { .ins-summary .kpi + .kpi { border-left: 0; border-top: 1px solid var(--line); } }
.ins-summary .kpi::before { display: none; }
.ins-summary .kpi-num > span { font-size: var(--t-xs); }
.ins-summary .kpi-cap { font-size: 11px; }
.ins-summary .kb-l { font-size: var(--t-xs); }
.ins-summary .kpi-ringwrap span { font-size: 12px; color: var(--plum); }
.ins-summary .kpi-tag { font-size: 11px; color: #2f7a5b; }
.ins-summary .kpi-num b { font: 600 28px/1 var(--font-sans); }
.ins-summary .kb b { font: 600 var(--t-sm)/1.2 var(--font-sans); }

/* ---------- Upload a lookbook ---------- */
.upload-view { display: grid; gap: 16px; max-width: 920px; }
.up-pick h2, .up-progress h2 { margin-bottom: 4px; }
.up-drop { display: grid; place-items: center; gap: 4px; padding: 40px 16px; margin: 16px 0; border: 2px dashed var(--border); border-radius: var(--r-lg);
  text-align: center; cursor: var(--cursor-hand, pointer); transition: border-color .15s var(--ease), background .15s var(--ease); }
.up-drop:hover, .up-drop.over { border-color: var(--primary); background: rgb(var(--tint) / 0.08); }
.up-mode { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.up-mode legend { font-weight: 600; font-size: var(--t-sm); margin-bottom: 4px; }
.up-save { display: grid; gap: 10px; justify-items: start; margin-top: 16px; }
.up-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.up-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px; }
.up-crop { width: 120px; height: 150px; object-fit: contain; background: var(--muted); border-radius: var(--r-md); }
.up-body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.up-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.up-page, .up-label { font-size: var(--t-xs); }
.up-label { display: block; }
.up-step, .up-why { margin: 0; font-size: var(--t-sm); }
.up-site { display: flex; gap: 10px; align-items: center; }
.up-site img { width: 52px; height: 64px; object-fit: cover; border-radius: var(--r-sm); background: var(--muted); }
.up-site a { font-weight: 600; overflow-wrap: anywhere; }
.up-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.up-colors input { position: absolute; opacity: 0; pointer-events: none; }
.up-colors .chip-toggle.on { background: var(--accent); color: var(--accent-foreground); }
.up-alts { display: flex; flex-wrap: wrap; gap: 8px; }
.up-alts .up-label { flex-basis: 100%; }
.up-alt { all: unset; box-sizing: border-box; cursor: var(--cursor-hand, pointer); display: grid; gap: 4px; width: 110px; padding: 6px; border-radius: var(--r-md);
  border: 1px solid var(--border); font-size: var(--t-xs); line-height: 1.3; }
.up-alt:hover, .up-alt:focus-visible { border-color: var(--primary); }
.up-alt img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--r-sm); background: var(--muted); }
.up-search { display: flex; gap: 8px; max-width: 420px; }
.up-search input { flex: 1; min-width: 0; }
.up-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .up-item { grid-template-columns: 1fr; }
  .up-crop { width: 100%; height: 220px; }
}
.up-nophoto { display: grid; place-items: center; font-size: var(--t-xs); color: var(--muted-foreground); }

/* ---------- Lookbook setup: items, upload, creator agreements ---------- */
.tile-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 14px; }
.tile-head .tile-title, .tile-head .tile-meta, .tile-link { white-space: nowrap; }
.tile-title { margin: 0; font: 600 var(--t-md)/1.25 var(--font-sans); }
.tile-meta { font-size: var(--t-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.tile > .hint, .b-agree > .hint { font-size: var(--t-sm); color: var(--muted-foreground); margin: -6px 0 14px; line-height: 1.5; }

/* The lookbook's pieces as photos: one row, "+N" opens them all with their names */
.piece-strip { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.piece-strip li { min-width: 0; }
.piece-strip .piece.extra { display: none; }
.piece-strip.all .piece.extra { display: block; }
.piece a { display: block; color: inherit; text-decoration: none; }
.piece img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 10px; background: var(--muted); }
.piece-name { margin-top: 6px; font-size: var(--t-xs); line-height: 1.3; color: var(--muted-foreground); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.piece-strip:not(.all) .piece-name { display: none; }
.piece a:hover .piece-name { color: var(--foreground); }
.piece-strip.all { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 10px; }
.piece-strip .more button { all: unset; box-sizing: border-box; cursor: var(--cursor-hand, pointer); width: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center;
  border-radius: 10px; background: var(--muted); font-size: var(--t-sm); font-weight: 600; color: var(--muted-foreground); transition: background .15s var(--ease), color .15s var(--ease); }
.piece-strip .more button:hover { background: rgb(var(--tint) / 0.14); color: var(--foreground); }
.piece-strip .more button:focus-visible { outline: 2px solid var(--primary-strong); outline-offset: 2px; }
.piece-strip.all .more button { aspect-ratio: auto; height: 36px; }
@media (max-width: 560px) { .piece-strip:not(.all) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .piece-strip:not(.all) .piece:nth-child(n+5) { display: none; } }

/* The upload box: one clear target, its options under it */
.up-drop-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed var(--border); border-radius: 14px;
  cursor: var(--cursor-hand, pointer); transition: border-color .15s var(--ease), background .15s var(--ease); }
.up-drop-row:hover, .up-drop-row.over, .up-drop-row:focus-within { border-color: var(--primary-strong); background: rgb(var(--tint) / 0.06); }
.up-icon { width: 36px; height: 36px; padding: 8px; flex: none; border-radius: 10px; background: var(--primary); color: var(--primary-foreground, #1d1d1b); box-sizing: border-box; }
.up-text { display: grid; gap: 2px; min-width: 0; }
.up-text b { font-weight: 600; }
.up-text span { font-size: var(--t-sm); color: var(--muted-foreground); }
/* Under the file: the colours menu and Start, side by side at the same height */
.up-go { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; }
.up-go .field { flex: 1 1 260px; max-width: 360px; margin: 0; }
.up-go .dd, .up-go .dd-btn { width: 100%; }
.up-go .dd-btn, .up-go .btn { min-height: 44px; }
.up-go .btn { padding: 0 22px; }
.up-drop-row.chosen { border-style: solid; border-color: var(--primary); background: rgb(var(--tint) / 0.05); }
.up-zone .error { margin: 8px 0 0; }
@media (max-width: 560px) { .up-go .field { max-width: none; } .up-go .btn { width: 100%; } }
.up-zone .error:empty { display: none; }

/* An upload in progress, or one that needs the person */
.up-run { padding: 16px 18px; border-radius: 14px; background: rgb(var(--tint) / 0.07); }
.up-run-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.up-run .progress { margin-bottom: 8px; }
.up-run .hint { margin: 0; font-size: var(--t-sm); color: var(--muted-foreground); }
.progress.busy span { width: 35% !important; animation: up-busy 1.4s ease-in-out infinite; }
@keyframes up-busy { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .progress.busy span { animation: none; width: 100% !important; opacity: .5; } }
.up-done { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.up-done > div { display: grid; gap: 2px; }

/* Item numbers, folded away */
.fold > summary { list-style: none; cursor: var(--cursor-hand, pointer); display: flex; align-items: center; gap: 10px; border-radius: 8px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.fold[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.fold > summary:focus-visible { outline: 2px solid var(--primary-strong); outline-offset: 3px; }
.items-tile .fold { margin-top: 14px; }
.items-tile .fold > summary { display: inline-flex; font-size: var(--t-sm); font-weight: 500; color: var(--muted-foreground); }
.items-tile .fold .field { margin-top: 12px; }

/* Creator agreements: one row each; a row opens to its text */
.agree-list { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.agree-item + .agree-item { border-top: 1px solid var(--line); }
.agree-item > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: var(--cursor-hand, pointer); font-size: var(--t-sm); }
.agree-item > summary::-webkit-details-marker { display: none; }
.agree-item > summary:hover { background: rgb(var(--tint) / 0.05); }
.agree-item > summary:focus-visible { outline: 2px solid var(--primary-strong); outline-offset: -2px; }
.ai-title { font-weight: 600; }
.ai-state { color: #2f7a5b; }
.ai-state::before { content: "✓ "; }
.ai-act { margin-left: auto; font-weight: 500; color: var(--muted-foreground); }
.agree-item > summary:hover .ai-act { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.agree-item[open] > summary { padding-bottom: 8px; }
/* The editor: a quiet formatting bar over a page-like box that grows with the text */
.rte { margin: 0 16px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fdfcf9; overflow: hidden; }
.rte:focus-within { border-color: var(--ring); background: #fff; box-shadow: 0 0 0 3px rgb(var(--tint) / 0.12); }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.rte-group { display: inline-flex; gap: 2px; }
.rte-group + .rte-group { padding-left: 6px; border-left: 1px solid var(--line); }
.rte-btn { all: unset; box-sizing: border-box; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; cursor: var(--cursor-hand, pointer);
  color: var(--muted-foreground); font: 600 14px/1 var(--font-sans); }
.rte-btn:hover { background: rgb(var(--tint) / 0.1); color: var(--foreground); }
.rte-btn[aria-pressed="true"] { background: rgb(var(--tint) / 0.16); color: var(--foreground); }
.rte-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.rte-area { min-height: 150px; max-height: 440px; overflow-y: auto; padding: 12px 16px; font: 400 var(--t-sm)/1.65 var(--font-sans); color: var(--foreground); outline: none; overflow-wrap: anywhere; }
.rte-area { position: relative; }
.rte-area.is-empty::before { content: attr(data-placeholder); position: absolute; left: 16px; top: 12px; color: var(--muted-foreground); pointer-events: none; }
.rte-area p { margin: 0 0 10px; }
.rte-area ul, .rte-area ol { margin: 0 0 10px; padding-left: 22px; }
.rte-area li { margin: 2px 0; }
#l-agree .check { margin: 0 0 12px; }
#l-agree [data-own-agree][hidden] { display: none; }
.tile-link { margin-left: auto; font-size: var(--t-sm); font-weight: 500; color: var(--muted-foreground); text-decoration: none; }
.tile-link:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.b-agree { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Team notes: a small note card that wraps and grows with what's written */
.req-table .note-input { display: block; width: 100%; min-width: 180px; max-width: 280px; min-height: 36px; resize: none; overflow: hidden;
  padding: 8px 10px; font: 400 var(--t-sm)/1.45 var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere;
  border: 1px solid transparent; border-radius: 8px; background: #fff6d6; color: var(--foreground); }
.req-table .note-input:placeholder-shown { background: transparent; }
.req-table .note-input:hover { border-color: var(--border); }
.req-table .note-input:focus { outline: none; border-color: #e6cf7a; background: #fffaf0; box-shadow: 0 0 0 3px rgb(230 207 122 / 0.25); }
.req-table .note-input.saved { background: #e0f2ea; }
/* A menu entry that isn't available yet */
.menu-item.is-soon { cursor: default; opacity: .55; pointer-events: none; }
.req-table tr .note-input:not(:placeholder-shown) { background: #fff6d6; }
.req-table tr .note-input:focus { background: #fffaf0; }
/* While typing the $ shows from the start, so the text doesn't jump. */
.order-panel .money .cell-input:focus { padding-left: 20px; }
.req-table .order-panel .money:has(.cell-input:focus) .cur { visibility: visible; }