@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');
/* =========================================================================
   Handy Closet Design System — "Paper & Ink"
   Shared tokens + component classes. Single source of styles.

   Theme contract (from the brief):
   - Grayscale UI: cool blue-gray paper whites + ink blacks. Color belongs to
     the garment PHOTOS (content), never to chrome. Semantic colors (error
     etc.) are muted and used only for meaning.
   - FLAT: no drop shadows anywhere (--elev-* are all `none`). Depth comes
     from the tone ladder (paper -> surface -> sunken) and from glass blur.
   - Nearly borderless: separation by tone + whitespace; hairlines only
     where a boundary is semantically required (dividers, table rules).
   - Liquid glass (iOS): translucent blurred materials for bars, docks,
     menus and sheets (--glass* tokens + .glass helpers).
   - Handwritten display face (Caveat) for titles/annotations — the
     magazine-margin voice; body text stays a quiet system sans.
   - Signature element: the hand-drawn photo frame (.frame-hand), echoing
     fashion-magazine marker frames around garment shots.

   Every fill ships a paired --on-* foreground; all pairs are WCAG-checked
   by math (see README.md). Components reference tokens only.
   ========================================================================= */
:root{
  /* ---- Ink & paper (cool-tinted grayscale — never pure gray) ---- */
  --primary:#1B1D21;        --on-primary:#FFFFFF;     /* ink — the one action color */
  --primary-strong:#000000;                           /* pressed ink */
  --secondary:#ECEEF2;      --on-secondary:#1B1D21;   /* quiet gray fill */

  --bg:#F7F8FA;             --on-bg:#1B1D21;          /* paper */
  --surface:#FFFFFF;        --on-surface:#1B1D21;
  --surface-sunken:#EFF1F4;                           /* recessed fields / wells */
  --muted-surface:#ECEEF2;  --on-muted-surface:#565B64;

  --muted:#565B64;          /* secondary ink   6.8:1 on surface */
  --subtle:#82878F;         /* tertiary ink    3.6:1 — large text/labels/icons only */
  --disabled-ink:#B0B4BC;   /* disabled ink — decorative, not for reading */
  --border:#E1E4E9;         /* the rare visible border */
  --border-faint:#EFF1F4;
  --hairline:rgb(27 29 33 / .10);                     /* 1px separators */

  /* ---- Semantic (muted; each fill paired with its --on-*) ---- */
  --error:#A93B2A;    --on-error:#FFFFFF;   --error-light:#F7E7E3;   --error-dark:#7C2A1D;
  --success:#396548;  --on-success:#FFFFFF; --success-light:#E7EFE8; --success-dark:#27492F;
  --warning:#E3A82A;  --on-warning:#3A2B05; --warning-light:#F6ECD8; --warning-dark:#6B4E06;
  --info:#3E5A72;     --on-info:#FFFFFF;    --info-light:#E7EDF2;    --info-dark:#2C4356;
  --link:var(--primary);                              /* monochrome links = underline */
  --scrim:rgb(27 29 33 / .35);

  /* ---- On-dark washes (over ink fills / scrim) & the link underline ---- */
  --on-primary-faint:rgb(255 255 255 / .25);          /* separators on ink */
  --on-primary-wash:rgb(255 255 255 / .14);           /* pills/washes on ink */
  --on-scrim-faint:rgb(255 255 255 / .35);            /* spinner track on scrim */
  --underline:rgb(27 29 33 / .35);                    /* resting link underline */

  /* ---- Liquid glass materials (iOS) — blur instead of shadow ---- */
  --glass:rgb(255 255 255 / .60);
  --glass-strong:rgb(255 255 255 / .82);              /* text-bearing bars/sheets */
  --glass-blur:saturate(1.8) blur(22px);
  --glass-edge:inset 0 1px 0 rgb(255 255 255 / .60), inset 0 0 0 1px rgb(255 255 255 / .28);

  /* ---- Spacing (8px grid) ---- */
  --sp-2:2px; --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px;
  --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-48:48px; --sp-64:64px;
  --opt-1:1px; --opt-3:3px;   /* optical-nudge steps, off the grid */

  /* ---- Radius (continuous, iOS-leaning) ---- */
  --r-none:0; --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* ---- Control metrics (touch targets & shared control sizes) ---- */
  --target-min:44px; --control-sm:36px; --control-md:48px; --control-lg:56px;
  --row-h:52px; --glyph:22px;

  /* ---- Elevation — FLAT BY CONTRACT. All levels are `none`.
     Depth = tone ladder + glass blur. Do not add shadows per-component. ---- */
  --elev-0:none; --elev-1:none; --elev-2:none; --elev-3:none;

  /* ---- Interaction state layers (ink at low alpha) ---- */
  --action-hover:rgb(27 29 33 / .045);
  --action-selected:rgb(27 29 33 / .08);
  --action-pressed:rgb(27 29 33 / .12);
  --action-disabled-opacity:.42;

  /* ---- Craft ---- */
  --ring:rgb(27 29 33 / .45);
  --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px var(--ring);

  /* ---- Signature: hand-drawn photo frame (magazine marker frame) ---- */
  --frame-w:2px;
  --frame-radius:255px 18px 240px 20px / 20px 245px 16px 250px;
  --frame-radius-sm:120px 10px 110px 12px / 12px 115px 10px 118px;

  /* ---- Type: handwritten display + quiet system sans ---- */
  --font-display:'Caveat','Bradley Hand','Noteworthy','Segoe Print',cursive;
  --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue','PingFang SC',sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;

  /* ---- Motion ---- */
  --dur-fast:120ms; --dur-base:220ms; --dur-slow:320ms;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);

  /* ---- Icons (thin, rounded — SF-like) ---- */
  --icon-size:24px; --icon-stroke:1.6;

  /* ---- Z-index ladder ---- */
  --z-appbar:1100; --z-drawer:1200; --z-modal:1300; --z-snackbar:1400; --z-tooltip:1500;

  /* ---- Breakpoints (documented; CSS vars can't drive @media — mirror in code) ---- */
  --bp-sm:600px; --bp-md:905px; --bp-lg:1240px;
}

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

/* =========================================================================
   TYPOGRAPHY SCALE (MUI names) — modular ~1.25: 12/13/15/17/21/26/33/44.
   h1–h2 carry the handwritten personality; h3+ are quiet sans.
   ========================================================================= */
.t-h1      {font:700 44px/1.04 var(--font-display);letter-spacing:0;color:var(--on-surface)}
.t-h2      {font:700 33px/1.1  var(--font-display);letter-spacing:.005em;color:var(--on-surface)}
.t-h3      {font:700 26px/1.2  var(--font-body);letter-spacing:-.02em;color:var(--on-surface)}
.t-h4      {font:700 21px/1.25 var(--font-body);letter-spacing:-.015em;color:var(--on-surface)}
.t-h5      {font:600 17px/1.35 var(--font-body);letter-spacing:-.01em;color:var(--on-surface)}
.t-h6      {font:600 15px/1.4  var(--font-body);letter-spacing:0;color:var(--on-surface)}
.t-sub1    {font:600 15px/1.5  var(--font-body);color:var(--on-surface)}
.t-sub2    {font:600 13px/1.45 var(--font-body);color:var(--on-surface)}
.t-body1   {font:400 15px/1.6  var(--font-body);color:var(--on-surface)}
.t-body2   {font:400 13px/1.55 var(--font-body);color:var(--on-surface)}
.t-btn     {font:600 15px/1    var(--font-body);letter-spacing:.01em}
.t-caption {font:400 12px/1.5  var(--font-body);color:var(--muted)}
.t-overline{font:600 11px/1.4  var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
/* handwritten annotation voice (margins, notes, numbers) */
.t-hand    {font:600 19px/1.3  var(--font-display);color:var(--muted)}
.t-hand--ink{color:var(--on-surface)}

/* =========================================================================
   MATERIALS
   ========================================================================= */
.glass{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge)}
.glass--strong{background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge)}

/* Signature: hand-drawn marker frame for garment photos */
.frame-hand{border:var(--frame-w) solid var(--primary);border-radius:var(--frame-radius);
  background:var(--surface);padding:var(--sp-8);display:block}
.frame-hand--sm{border-radius:var(--frame-radius-sm);padding:var(--sp-4)}
.frame-hand--tilt{transform:rotate(-.6deg)}
.photo{background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden}

/* =========================================================================
   ICON — <svg class="ico"><use href="#i-hanger"/></svg>
   ========================================================================= */
.ico{width:var(--icon-size);height:var(--icon-size);display:inline-block;vertical-align:middle;flex:none;
  fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.ico--sm{--icon-size:18px}
.ico--lg{--icon-size:28px}
.ico--filled{fill:currentColor;stroke:none}

/* =========================================================================
   INPUTS
   ========================================================================= */
/* Button — variants: contained / outlined / text; color modifier: danger */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  border-radius:var(--r-full);cursor:pointer;font:600 15px/1 var(--font-body);letter-spacing:.01em;
  min-height:var(--control-md);padding:0 var(--sp-24);border:none;background:none;color:var(--on-surface);
  transition:background var(--dur-fast) var(--ease);user-select:none;text-decoration:none}
.btn-contained{background:var(--primary);color:var(--on-primary)}
.btn-contained:hover{background:var(--primary-strong)}
.btn-contained.btn-danger{background:var(--error);color:var(--on-error)}
.btn-outlined{border:1px solid var(--muted);color:var(--on-surface)}
.btn-outlined:hover{background:var(--action-hover)}
.btn-outlined.btn-danger{border-color:var(--error);color:var(--error)}
.btn-text{color:var(--on-surface)}
.btn-text:hover{background:var(--action-hover)}
.btn-text.btn-danger{color:var(--error)}
.btn--tonal{background:var(--muted-surface);color:var(--on-secondary)}
.btn--tonal:hover{background:var(--border)}
.btn--sm{min-height:var(--control-sm);padding:0 var(--sp-16);font-size:13px}
.btn--lg{min-height:var(--control-lg);padding:0 var(--sp-32);font-size:17px}
.btn.disabled,.btn:disabled{opacity:var(--action-disabled-opacity);cursor:not-allowed;pointer-events:none}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn--block{display:flex;width:100%}

/* Button group — joined capsule, hairline separators */
.btngroup{display:inline-flex;border-radius:var(--r-full);overflow:hidden}
.btngroup .btn{border-radius:0;min-height:var(--target-min)}
.btngroup--outlined{border:1px solid var(--muted)}
.btngroup--outlined .btn+.btn{border-left:1px solid var(--muted)}
.btngroup--contained .btn{background:var(--primary);color:var(--on-primary)}
.btngroup--contained .btn+.btn{border-left:1px solid var(--on-primary-faint)}

/* Icon button — plain / tonal / filled / glass; min target 44 */
.iconbtn{width:var(--target-min);height:var(--target-min);border-radius:var(--r-full);border:none;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--on-surface);
  transition:background var(--dur-fast) var(--ease)}
.iconbtn:hover{background:var(--action-hover)}
.iconbtn--tonal{background:var(--muted-surface)}
.iconbtn--filled{background:var(--primary);color:var(--on-primary)}
.iconbtn--filled:hover{background:var(--primary-strong)}
.iconbtn--glass{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge)}
.iconbtn.selected{background:var(--action-selected)}
.iconbtn.disabled{opacity:var(--action-disabled-opacity);cursor:not-allowed;pointer-events:none}
.iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* FAB — ink pill; glass variant for floating over photos */
.fab{width:var(--control-lg);height:var(--control-lg);border-radius:var(--r-lg);border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  background:var(--primary);color:var(--on-primary);transition:background var(--dur-fast) var(--ease)}
.fab:hover{background:var(--primary-strong)}
.fab--sm{width:var(--target-min);height:var(--target-min);border-radius:var(--r-md)}
.fab--extended{width:auto;padding:0 var(--sp-20);font:600 15px var(--font-body)}
.fab--glass{background:var(--glass-strong);color:var(--on-surface);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge)}
.fab:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Checkbox */
.checkbox{display:inline-flex;align-items:center;gap:var(--sp-12);cursor:pointer;min-height:var(--target-min);font:400 15px var(--font-body);color:var(--on-surface)}
.checkbox .box{width:var(--glyph);height:var(--glyph);border-radius:var(--r-xs);border:1.5px solid var(--muted);flex:none;position:relative;transition:background var(--dur-fast) var(--ease)}
.checkbox.checked .box{background:var(--primary);border-color:var(--primary)}
.checkbox.checked .box::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--on-primary);border-width:0 2px 2px 0;transform:rotate(45deg)}
.checkbox.indeterminate .box{background:var(--primary);border-color:var(--primary)}
.checkbox.indeterminate .box::after{content:'';position:absolute;left:5px;top:9px;width:9px;height:2px;background:var(--on-primary)}
.checkbox.disabled{opacity:var(--action-disabled-opacity);cursor:not-allowed}

/* Radio */
.radio{display:inline-flex;align-items:center;gap:var(--sp-12);cursor:pointer;min-height:var(--target-min);font:400 15px var(--font-body);color:var(--on-surface)}
.radio .dot{width:var(--glyph);height:var(--glyph);border-radius:var(--r-full);border:1.5px solid var(--muted);flex:none;transition:border var(--dur-fast) var(--ease)}
.radio.checked .dot{border:7px solid var(--primary)}
.radio.disabled{opacity:var(--action-disabled-opacity);cursor:not-allowed}

/* Switch — iOS proportions */
.switch{position:relative;display:inline-block;width:51px;height:31px;border-radius:var(--r-full);
  background:var(--border);cursor:pointer;transition:background var(--dur-base) var(--ease);flex:none}
.switch .thumb{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--hairline);transition:transform var(--dur-base) var(--ease-spring)}
.switch.on{background:var(--primary)}
.switch.on .thumb{transform:translateX(var(--sp-20))} /* travel = 51 track − 27 thumb − 2×2 edge */
.switch.disabled{opacity:var(--action-disabled-opacity);cursor:not-allowed}

/* Text field — filled (default) / outlined / standard */
.field{display:flex;flex-direction:column;gap:var(--sp-4);min-width:220px;font-family:var(--font-body)}
.field .label{font:600 12px/1.4 var(--font-body);color:var(--muted)}
.field .control{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--control-md);padding:0 var(--sp-16);
  border-radius:var(--r-md);background:var(--surface-sunken);color:var(--on-surface);
  transition:box-shadow var(--dur-fast) var(--ease)}
.field .control input,.field .control textarea{border:none;background:none;outline:none;flex:1;min-width:0;
  font:400 15px/1.5 var(--font-body);color:var(--on-surface)}
.field .control ::placeholder{color:var(--subtle)}
.field .control .ico{color:var(--subtle)}
.field.focused .control{box-shadow:inset 0 0 0 2px var(--primary)}
.field .helper{font:400 12px/1.4 var(--font-body);color:var(--subtle)}
.field.error .control{box-shadow:inset 0 0 0 2px var(--error)}
.field.error .label,.field.error .helper{color:var(--error)}
.field.disabled{opacity:var(--action-disabled-opacity);pointer-events:none}
.field--outlined .control{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.field--outlined.focused .control{box-shadow:inset 0 0 0 2px var(--primary)}
.field--standard .control{background:none;border-radius:0;border-bottom:1px solid var(--border);padding:0 var(--sp-2)}
.field--standard.focused .control{box-shadow:none;border-bottom:2px solid var(--primary)}
.field--multiline .control{min-height:96px;align-items:flex-start;padding:var(--sp-12) var(--sp-16)}

/* Select — filled field + chevron (pairs with .menu for the open list) */
.select .control{cursor:pointer}
.select .value{flex:1;font:400 15px var(--font-body);color:var(--on-surface)}
.select .value.placeholder{color:var(--subtle)}

/* Autocomplete — chips live inside the control */
.autocomplete .control{flex-wrap:wrap;padding:var(--sp-8) var(--sp-12);min-height:var(--control-md);gap:var(--sp-4)}

/* Slider — continuous / discrete / range */
.slider{position:relative;height:var(--target-min);display:flex;align-items:center;min-width:220px}
.slider .track{position:relative;width:100%;height:4px;border-radius:var(--r-full);background:var(--border)}
.slider .fill{position:absolute;left:0;top:0;height:100%;border-radius:var(--r-full);background:var(--primary)}
.slider .thumb{position:absolute;top:50%;width:var(--glyph);height:var(--glyph);border-radius:var(--r-full);
  background:var(--surface);border:2px solid var(--primary);transform:translate(-50%,-50%);cursor:grab}
.slider .tick{position:absolute;top:50%;width:3px;height:3px;border-radius:var(--r-full);background:var(--subtle);transform:translate(-50%,-50%)}
.slider.disabled{opacity:var(--action-disabled-opacity)}

/* Toggle buttons — segmented capsule (single & multi select) */
.togglebtn{display:inline-flex;background:var(--surface-sunken);border-radius:var(--r-full);padding:var(--sp-2)}
.togglebtn .seg{display:inline-flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-16);min-height:38px;
  border-radius:var(--r-full);border:none;background:none;cursor:pointer;
  font:600 13px var(--font-body);color:var(--muted);transition:background var(--dur-fast) var(--ease)}
.togglebtn .seg.sel{background:var(--surface);color:var(--on-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.togglebtn .seg.disabled{opacity:var(--action-disabled-opacity);cursor:not-allowed}

/* Rating — favorite level, ink stars */
.rating{display:inline-flex;gap:var(--sp-2);color:var(--on-surface)}
.rating .ico{cursor:pointer}
.rating .off{color:var(--subtle)}
.rating.readonly .ico{cursor:default}

/* =========================================================================
   DATA DISPLAY
   ========================================================================= */
/* Avatar */
.avatar{width:40px;height:40px;border-radius:var(--r-full);background:var(--muted-surface);color:var(--on-muted-surface);
  display:inline-flex;align-items:center;justify-content:center;font:600 14px var(--font-body);flex:none;overflow:hidden}
.avatar--sm{width:28px;height:28px;font-size:11px}
.avatar--lg{width:56px;height:56px;font-size:18px}
.avatar--ink{background:var(--primary);color:var(--on-primary)}
.avatar-group{display:inline-flex}
.avatar-group .avatar{border:2px solid var(--surface)}
.avatar-group .avatar+.avatar{margin-left:calc(-1*var(--sp-8) - var(--sp-2))}

/* Badge — dot & count, anchored to a child */
.badge{position:relative;display:inline-flex}
.badge .b-dot{position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:var(--r-full);
  background:var(--error);border:2px solid var(--surface)}
.badge .b-num{position:absolute;top:0;right:0;min-width:14px;height:18px;border-radius:var(--r-full);
  background:var(--primary);color:var(--on-primary);font:600 11px/18px var(--font-body);text-align:center;
  padding:0 var(--sp-2);border:2px solid var(--surface);box-sizing:content-box}

/* Chip — filter / input / assist */
.chip{display:inline-flex;align-items:center;gap:var(--sp-4);height:32px;padding:0 var(--sp-12);
  border-radius:var(--r-full);border:none;cursor:pointer;font:600 13px var(--font-body);
  background:var(--muted-surface);color:var(--on-secondary);transition:background var(--dur-fast) var(--ease)}
.chip:hover{background:var(--border)}
.chip.selected{background:var(--primary);color:var(--on-primary)}
.chip--outline{background:none;box-shadow:inset 0 0 0 1px var(--border);color:var(--on-surface)}
.chip--sm{height:24px;padding:0 var(--sp-8);font-size:12px}
.chip .x{display:inline-flex;margin-right:calc(-1*var(--sp-4));opacity:.7}
.chip.disabled{opacity:var(--action-disabled-opacity);cursor:not-allowed}

/* Divider */
.divider{border:none;height:1px;background:var(--hairline)}
.divider--inset{margin-left:var(--sp-48)}
.divider--label{display:flex;align-items:center;gap:var(--sp-12);background:none;height:auto}
.divider--label::before,.divider--label::after{content:'';flex:1;height:1px;background:var(--hairline)}
.divider--label span{font:600 11px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}

/* List — inset-grouped surface, hairline separated rows */
.list{background:var(--surface);border-radius:var(--r-lg);overflow:hidden}
.list-head{padding:var(--sp-16) var(--sp-16) var(--sp-8);font:600 11px var(--font-body);
  letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
.li{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--row-h);padding:var(--sp-8) var(--sp-16);cursor:pointer}
.li:hover{background:var(--action-hover)}
.li+.li{border-top:1px solid var(--hairline)}
.li .lead{color:var(--muted);flex:none}
.li .li-body{flex:1;min-width:0}
.li .li-body .p{font:400 15px/1.4 var(--font-body);color:var(--on-surface)}
.li .li-body .s{font:400 13px/1.4 var(--font-body);color:var(--muted)}
.li .li-body .s2{font:400 12px/1.4 var(--font-body);color:var(--subtle)}
.li .trail{color:var(--subtle);flex:none;display:flex;align-items:center;gap:var(--sp-8);font:400 15px var(--font-body)}
.li.selected{background:var(--action-selected)}

/* Table */
.table{width:100%;border-collapse:collapse;font:400 13px/1.5 var(--font-body);color:var(--on-surface)}
.table th{font:600 11px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);
  text-align:left;padding:var(--sp-8) var(--sp-12);border-bottom:1px solid var(--border)}
.table td{padding:var(--sp-12);border-bottom:1px solid var(--hairline)}
.table tr:hover td{background:var(--action-hover)}
.table .num{text-align:right;font-family:var(--font-mono);font-size:12px}

/* Tooltip */
.tooltip{display:inline-block;background:var(--primary);color:var(--on-primary);
  font:400 12px/1.4 var(--font-body);padding:var(--sp-4) var(--sp-8);border-radius:var(--r-xs);max-width:220px}

/* =========================================================================
   FEEDBACK
   ========================================================================= */
/* Alert */
.alert{display:flex;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);border-radius:var(--r-md);
  font:400 13px/1.5 var(--font-body);align-items:flex-start}
.alert .ico{flex:none;margin-top:var(--opt-1)}
.alert .a-title{font-weight:700;margin-bottom:var(--sp-2)}
.alert--error{background:var(--error-light);color:var(--error-dark)}
.alert--success{background:var(--success-light);color:var(--success-dark)}
.alert--warning{background:var(--warning-light);color:var(--warning-dark)}
.alert--info{background:var(--info-light);color:var(--info-dark)}

/* Dialog (shown over a scrim; glass variant for iOS feel) */
.dialog{background:var(--surface);border-radius:var(--r-xl);padding:var(--sp-24);width:300px;max-width:100%}
.dialog--glass{background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge)}
.dialog .d-title{font:700 21px/1.25 var(--font-body);letter-spacing:-.015em;color:var(--on-surface)}
.dialog .d-body{font:400 13px/1.55 var(--font-body);color:var(--muted);margin-top:var(--sp-8)}
.dialog .d-actions{display:flex;justify-content:flex-end;gap:var(--sp-4);margin-top:var(--sp-20)}
.scrim-demo{background:var(--scrim);display:flex;align-items:center;justify-content:center;
  padding:var(--sp-32);border-radius:var(--r-lg)}

/* Snackbar */
.snackbar{display:inline-flex;align-items:center;gap:var(--sp-16);min-height:48px;
  padding:var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-20);border-radius:var(--r-full);
  background:var(--primary);color:var(--on-primary);font:400 13px/1.4 var(--font-body)}
.snackbar .s-act{font:700 13px var(--font-body);color:var(--on-primary);background:var(--on-primary-wash);
  border:none;border-radius:var(--r-full);padding:var(--sp-8) var(--sp-12);cursor:pointer}

/* Progress — linear + circular, determinate/indeterminate */
.progress{width:100%;height:3px;border-radius:var(--r-full);background:var(--border-faint);overflow:hidden}
.progress .p-fill{height:100%;border-radius:var(--r-full);background:var(--primary);transition:width var(--dur-slow) var(--ease)}
.progress.indeterminate .p-fill{width:36%;animation:p-slide 1.4s var(--ease) infinite}
@keyframes p-slide{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}
.spinner{width:22px;height:22px;border-radius:var(--r-full);flex:none;
  border:2.5px solid var(--border);border-top-color:var(--primary);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ringchart{transform:rotate(-90deg)}
.ringchart .bgc{fill:none;stroke:var(--border-faint);stroke-width:3}
.ringchart .fgc{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round}

/* Skeleton */
.skeleton{background:var(--muted-surface);border-radius:var(--r-xs);animation:pulse 1.6s var(--ease) infinite}
.skeleton--text{height:12px}
.skeleton--circle{border-radius:var(--r-full)}
.skeleton--rect{border-radius:var(--r-md)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* Backdrop */
.backdrop-demo{position:relative;border-radius:var(--r-lg);overflow:hidden}
.backdrop{position:absolute;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center}
.backdrop .spinner{border-color:var(--on-scrim-faint);border-top-color:var(--surface);width:28px;height:28px}

/* =========================================================================
   SURFACES
   ========================================================================= */
/* App bar — liquid glass; standard + large (handwritten) title */
.appbar{min-height:52px;display:flex;align-items:center;padding:0 var(--sp-8);
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge);color:var(--on-surface)}
.appbar .ttl{flex:1;font:600 15px var(--font-body);text-align:center;color:var(--on-surface)}
.appbar--large{flex-direction:column;align-items:stretch;padding-bottom:var(--sp-8)}
.appbar--large .row{display:flex;align-items:center;min-height:44px}
.appbar--large .big{font:700 33px/1.1 var(--font-display);padding:0 var(--sp-16) var(--sp-4);color:var(--on-surface)}
.appbar--plain{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}

/* Card — tone-separated, borderless by default */
.card{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-16)}
.card--outlined{box-shadow:inset 0 0 0 1px var(--border)}
.card--media{padding:0;overflow:hidden}
.card--media .body{padding:var(--sp-12) var(--sp-16) var(--sp-16)}
.card--sunken{background:var(--surface-sunken)}

/* Paper — the tone ladder */
.paper{border-radius:var(--r-lg);padding:var(--sp-16)}
.paper--bg{background:var(--bg)}
.paper--surface{background:var(--surface)}
.paper--sunken{background:var(--surface-sunken)}

/* Accordion */
.accordion{background:var(--surface);border-radius:var(--r-lg);overflow:hidden}
.acc-item+.acc-item{border-top:1px solid var(--hairline)}
.acc-head{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--row-h);padding:var(--sp-8) var(--sp-16);
  cursor:pointer;font:600 15px var(--font-body);color:var(--on-surface)}
.acc-head:hover{background:var(--action-hover)}
.acc-head .ico{margin-left:auto;color:var(--subtle);transition:transform var(--dur-base) var(--ease)}
.acc-item.open .acc-head .ico{transform:rotate(180deg)}
.acc-body{padding:0 var(--sp-16) var(--sp-16);font:400 13px/1.55 var(--font-body);color:var(--muted)}

/* =========================================================================
   NAVIGATION
   ========================================================================= */
/* Bottom navigation — floating liquid-glass dock */
.bottomnav{display:flex;align-items:center;height:64px;border-radius:var(--r-full);
  background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge);padding:0 var(--sp-8)}
.bottomnav .ni{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--control-md);cursor:pointer;color:var(--subtle);border-radius:var(--r-full)}
.bottomnav .ni .nl{font:600 10px var(--font-body);letter-spacing:.02em}
.bottomnav .ni.sel{color:var(--on-surface)}

/* Drawer */
.drawer{width:270px;background:var(--surface);border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:var(--sp-24) var(--sp-12);display:flex;flex-direction:column;gap:var(--sp-4)}
.drawer .d-brand{font:700 33px/1 var(--font-display);padding:0 var(--sp-12) var(--sp-16);color:var(--on-surface)}
.drawer .d-item{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--control-md);padding:0 var(--sp-12);
  border-radius:var(--r-md);cursor:pointer;font:600 14px var(--font-body);color:var(--muted)}
.drawer .d-item:hover{background:var(--action-hover)}
.drawer .d-item.sel{background:var(--action-selected);color:var(--on-surface)}

/* Tabs — underline indicator; scrollable variant */
.tabs{display:flex;gap:var(--sp-20);border-bottom:1px solid var(--hairline)}
.tabs .tabitem{padding:var(--sp-12) var(--sp-2);font:600 13px var(--font-body);color:var(--muted);
  cursor:pointer;border:none;background:none;position:relative}
.tabs .tabitem.sel{color:var(--on-surface);box-shadow:inset 0 -2px 0 var(--primary)}
.tabs--scroll{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}
.tabs--scroll::-webkit-scrollbar{height:0}

/* Menu — floating panel; glass variant (iOS context menu) */
.menu{display:inline-block;min-width:210px;background:var(--surface);border-radius:var(--r-md);
  padding:var(--sp-4);box-shadow:inset 0 0 0 1px var(--hairline)}
.menu--glass{background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge)}
.menu .mi{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--target-min);padding:0 var(--sp-12);
  border-radius:var(--r-sm);cursor:pointer;font:400 15px var(--font-body);color:var(--on-surface)}
.menu .mi:hover{background:var(--action-hover)}
.menu .mi .ico{color:var(--muted)}
.menu .mi--danger,.menu .mi--danger .ico{color:var(--error)}
.menu .mi.selected{background:var(--action-selected)}
.menu .m-div{height:1px;background:var(--hairline);margin:var(--sp-4) 0}

/* Link */
.linktext{color:var(--link);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--underline);cursor:pointer;font:inherit;background:none;border:none}
.linktext:hover{text-decoration-color:var(--link)}

/* Stepper */
.stepper{display:flex;align-items:center;gap:var(--sp-8);width:100%}
.stepper .step{display:flex;align-items:center;gap:var(--sp-8);flex:none}
.stepper .s-dot{width:26px;height:26px;border-radius:var(--r-full);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;font:600 12px var(--font-body);color:var(--subtle)}
.stepper .step.active .s-dot{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.stepper .step.done .s-dot{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.stepper .s-lbl{font:600 12px var(--font-body);color:var(--muted)}
.stepper .step.active .s-lbl{color:var(--on-surface)}
.stepper .conn{flex:1;height:1px;background:var(--hairline)}

/* Speed dial — static open state */
.speeddial{display:inline-flex;flex-direction:column;align-items:flex-end;gap:var(--sp-12)}
.speeddial .sd-row{display:flex;align-items:center;gap:var(--sp-12)}
.speeddial .sd-lbl{font:600 12px var(--font-body);color:var(--muted);background:var(--surface);
  border-radius:var(--r-xs);padding:var(--sp-4) var(--sp-8);box-shadow:inset 0 0 0 1px var(--hairline)}
.speeddial .sd-mini{width:var(--target-min);height:var(--target-min);border-radius:var(--r-full);border:none;cursor:pointer;
  background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge);color:var(--on-surface);display:inline-flex;align-items:center;justify-content:center}

/* =========================================================================
   LAYOUT PRIMITIVES (utilities, not components)
   ========================================================================= */
.u-box{display:block;padding:var(--sp-16)}
.u-stack{display:flex;flex-direction:column;gap:var(--sp-12)}
.u-row{display:flex;align-items:center;gap:var(--sp-12)}
.u-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
.u-container{max-width:600px;margin:0 auto;padding:0 var(--sp-16)}

/* horizontal scroll row (keeps breathing room at the bottom) */
.scrollrow{display:flex;gap:var(--sp-12);overflow-x:auto;overflow-y:hidden;padding-bottom:var(--sp-8)}
.scrollrow::-webkit-scrollbar{height:0}