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

:root {
  --bg:           oklch(11.5% 0.008 62deg);
  --bg-raised:    oklch(15%   0.010 62deg);
  --bg-card:      oklch(17.5% 0.011 64deg);
  --bg-hover:     oklch(21%   0.013 64deg);
  --bg-active:    oklch(24%   0.018 48deg);

  --accent:       oklch(67%   0.148 38deg);
  --accent-dim:   oklch(56%   0.12  38deg);
  --accent-mid:   oklch(38%   0.08  42deg);
  --accent-low:   oklch(20%   0.04  46deg);

  --sage:         oklch(64%   0.10  152deg);
  --sage-low:     oklch(18%   0.035 155deg);

  --sky:          oklch(68%   0.09  228deg);
  --sky-low:      oklch(17%   0.028 228deg);

  --caution:      oklch(72%   0.12  65deg);
  --caution-low:  oklch(18%   0.03  65deg);
  --danger:       oklch(62%   0.14  25deg);
  --danger-low:   oklch(16%   0.04  25deg);
  --danger-mid:   oklch(26%   0.07  25deg);

  --t1: oklch(93%  0.006 75deg);
  --t2: oklch(60%  0.010 70deg);
  --t3: oklch(38%  0.008 65deg);

  --border:       oklch(22%  0.010 65deg);
  --border-hi:    oklch(30%  0.013 65deg);

  --on-accent:    oklch(12%  0.008 62deg);

  --sidebar-w:      218px;
  --topbar-h:       62px;
  --settings-nav-w: 200px;
  --gap:            14px;

  --f:      'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-head: var(--f);

  /* Type scale */
  --text-2xs:  9.5px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  28px;

  /* Weight scale */
  --w-normal:   400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 13px;
  --r-xl: 18px;
  --r-2xl: 24px;
}

html { font-size: 100%; } /* respect user system font-size preference */
body {
  font-family: var(--f);
  background: var(--bg);
  color: var(--t1);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Layout ─────────────────────────────────────── */
.shell { min-height: 100vh; }

/* ─── Sidebar ─────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 100;
  overflow: hidden;
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--border);
}

.logomark {
  width: 28px; height: 28px;
  background: var(--accent);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--on-accent);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.logoword {
  font-size: 13px; font-weight: 650;
  letter-spacing: 0.07em;
  color: var(--t1);
}

.ai-pill {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-low);
  padding: 2px 6px; border-radius: 100px;
}

.nav {
  flex: 1; overflow-y: auto;
  padding: 12px 10px;
}

.nav::-webkit-scrollbar { width: 3px; }
.nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.nav-group { margin-bottom: 6px; }

.nav-group-label {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--t3);
  padding: 8px 8px 5px;
}

.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7.5px 8px;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 450;
  color: var(--t2);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  margin-bottom: 1px;
  text-decoration: none;
}

.nav-item:hover { background: var(--bg-hover); color: var(--t1); }

.nav-item.active {
  background: var(--accent-low);
  color: var(--accent);
  font-weight: 520;
}

.nav-ico {
  width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  opacity: 0.85;
}

.nav-badge {
  margin-left: auto;
  font-size: 10px; font-weight: 600;
  color: var(--t3);
  background: var(--bg-hover);
  padding: 1px 6px; border-radius: 100px;
  transition: background 140ms, color 140ms;
}

.nav-item.active .nav-badge {
  background: var(--accent-mid);
  color: var(--accent);
}

.nav-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 8px 6px;
}

.sidebar-foot {
  padding: 12px 10px;
  border-top: 1px solid var(--border);
}

.user-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 140ms;
}

.user-row:hover { background: var(--bg-hover); }

.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, oklch(55% 0.12 42deg), oklch(44% 0.09 64deg));
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
  color: oklch(94% 0.006 75deg);
  flex-shrink: 0;
}

.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 12.5px; font-weight: 530; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-plan { font-size: 11px; color: var(--t3); }
.user-caret { font-size: 12px; color: var(--t3); }

/* ─── Main column ─────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column;
  min-height: 100vh;
}

/* ─── Topbar ──────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 26px; gap: 14px;
}

.greet-block { flex: 1; }

h1.greet-name, .greet-name {
  font-size: 14.5px; font-weight: 620;
  color: var(--t1); line-height: 1.25;
  letter-spacing: -0.01em;
}

h2.outfit-title, .outfit-title {
  font-size: 19px; font-weight: 680;
  letter-spacing: -0.025em;
  color: var(--t1); line-height: 1.2;
  margin-bottom: 4px;
}

h2.sec-title, .sec-title { font-size: 13px; font-weight: 620; color: var(--t1); letter-spacing: -0.01em; }

.greet-sub { font-size: 11.5px; color: var(--t3); }

.weather-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 12px;
  font-size: 12.5px; font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}

.weather-chip:hover { border-color: var(--border-hi); background: var(--bg-hover); }
.weather-chip strong { font-weight: 620; color: var(--t1); }

.searchbar {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 11px;
  width: 210px;
  transition: border-color 140ms;
}

.searchbar:focus-within { border-color: var(--border-hi); }
.searchbar-ico { font-size: 14px; color: var(--t3); flex-shrink: 0; }

.searchbar input {
  background: none; border: none; outline: none;
  font-family: var(--f); font-size: 12.5px;
  color: var(--t1); flex: 1; width: 100%;
}

.searchbar input::placeholder { color: var(--t3); }

.kbd {
  font-size: 10px; font-weight: 500;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--t3);
  letter-spacing: 0.02em;
}

.topbar-actions { display: flex; align-items: center; gap: 7px; }

.icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--t2);
  font-size: 16px;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
  position: relative;
}

.icon-btn:hover { background: var(--bg-hover); color: var(--t1); border-color: var(--border-hi); }

.notif-pip {
  position: absolute; top: 7px; right: 7px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--bg);
}

/* ─── Page body ───────────────────────────────────── */
.body {
  padding: 22px 26px 36px;
  flex: 1;
}

/* ─── Hero ────────────────────────────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 292px;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.outfit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
}

.outfit-card::after {
  content: '';
  position: absolute;
  top: -30px; right: -20px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, oklch(22% 0.04 46deg) 0%, transparent 68%);
  pointer-events: none;
}

.outfit-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative; z-index: 1;
}

.ai-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 640; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-low);
  padding: 3px 9px 3px 7px;
  border-radius: 100px;
  margin-bottom: 9px;
}

.ai-dot {
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  animation: breathe 2.2s ease-in-out infinite;
}

.outfit-sub { font-size: 12px; color: var(--t2); }

.match-ring { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.match-ring svg { width: 50px; height: 50px; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--bg-active); stroke-width: 4; }
.ring-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 125.7;
  stroke-dashoffset: 17.6;
  animation: arcIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes arcIn {
  from { stroke-dashoffset: 125.7; }
  to   { stroke-dashoffset: 17.6; }
}

.match-val { font-size: 10px; font-weight: 700; color: var(--accent); margin-top: 3px; }
.match-lbl { font-size: 9px; font-weight: 520; color: var(--t3); letter-spacing: 0.03em; }

.outfit-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-bottom: 18px;
  position: relative; z-index: 1;
}

.item-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 11px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, transform 130ms cubic-bezier(0.22, 1, 0.36, 1);
}

.item-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-hi);
  transform: translateY(-1.5px);
}

.item-card.hero-item { border-color: var(--accent-mid); background: oklch(19% 0.022 50deg); }

.item-ico {
  width: 38px; height: 38px;
  background: var(--bg-card);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: 9px;
}

.item-name { font-size: 11.5px; font-weight: 600; color: var(--t1); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-meta { font-size: 10.5px; color: var(--t3); display: flex; align-items: center; gap: 4px; }

.swatch {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; flex-shrink: 0;
}

.outfit-actions { display: flex; gap: 8px; position: relative; z-index: 1; }

.btn-fill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--f); font-size: 12.5px; font-weight: 640;
  padding: 8px 16px; border-radius: var(--r-md);
  border: none; cursor: pointer;
  transition: background 140ms, transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
  letter-spacing: 0.01em;
}

.btn-fill:hover { background: var(--accent-dim); transform: translateY(-0.5px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-raised); color: var(--t2);
  font-family: var(--f); font-size: 12.5px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border); cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}

.btn-ghost:hover { background: var(--bg-hover); color: var(--t1); border-color: var(--border-hi); }

/* ─── Side panel ──────────────────────────────────── */
.side-col { display: flex; flex-direction: column; gap: var(--gap); }

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 18px 20px;
}

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}

.panel-label {
  font-size: 10px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t3);
}

.panel-link { font-size: 11.5px; font-weight: 520; color: var(--accent); cursor: pointer; }

/* Score dial */
.score-row { display: flex; align-items: center; gap: 14px; }
.score-dial { position: relative; flex-shrink: 0; }
.score-dial svg { width: 70px; height: 70px; transform: rotate(-90deg); }
.dial-track { fill: none; stroke: var(--bg-active); stroke-width: 5; }
.dial-arc {
  fill: none; stroke: var(--accent);
  stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 185.35;
  stroke-dashoffset: 24.1;
  animation: dialIn 1.3s cubic-bezier(0.16, 1, 0.3, 1) both 0.1s;
}

@keyframes dialIn {
  from { stroke-dashoffset: 185.35; }
  to   { stroke-dashoffset: 24.1; }
}

.dial-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.dial-num { font-size: 17px; font-weight: 720; color: var(--t1); line-height: 1; letter-spacing: -0.04em; }
.dial-denom { font-size: 9px; color: var(--t3); font-weight: 520; }
.score-info { flex: 1; }
.score-tier { font-size: 14px; font-weight: 660; color: var(--t1); margin-bottom: 3px; letter-spacing: -0.01em; }
.score-desc { font-size: 11.5px; color: var(--t2); line-height: 1.4; margin-bottom: 9px; }

.streak-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  color: var(--sage); background: var(--sage-low);
  padding: 3px 9px; border-radius: 100px;
}

/* Weather */
.wx-main {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}

.wx-icon { font-size: 30px; line-height: 1; }
.wx-right { text-align: right; }
.wx-temp { font-size: 24px; font-weight: 720; color: var(--t1); letter-spacing: -0.04em; line-height: 1; }
.wx-cond { font-size: 11px; color: var(--t2); }
.wx-note {
  font-size: 11.5px; color: var(--t2); line-height: 1.45;
  background: var(--sky-low);
  border-radius: var(--r-md);
  padding: 9px 12px;
}

/* ─── Stats strip ─────────────────────────────────── */
.stats-strip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--gap);
  overflow: hidden;
}

.stat {
  padding: 18px 20px;
  position: relative;
  transition: background 140ms;
  cursor: default;
}

.stat:hover { background: var(--bg-hover); }
.stat + .stat { border-left: 1px solid var(--border); }
.stat-ico { font-size: 16px; margin-bottom: 10px; display: block; line-height: 1; }
.stat-num { font-size: 20px; font-weight: 720; color: var(--t1); letter-spacing: -0.04em; line-height: 1; margin-bottom: 2px; }
.stat-lbl { font-size: 11px; color: var(--t3); font-weight: 500; margin-bottom: 7px; }

.stat-footnote {
  font-size: 10.5px; font-weight: 600;
  display: flex; align-items: center; gap: 3px;
}

.stat-footnote.up   { color: var(--sage); }
.stat-footnote.warn { color: var(--caution); }
.stat-footnote.dim  { color: var(--t3); }

.stat-bar { height: 2.5px; background: var(--bg-active); border-radius: 2px; overflow: hidden; margin-top: 7px; }
.stat-bar-fill { height: 100%; border-radius: 2px; background: var(--accent); }

/* ─── Bottom grid ─────────────────────────────────── */
.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 278px;
  gap: var(--gap);
}

.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 11px;
}

.sec-link { font-size: 12px; font-weight: 520; color: var(--accent); cursor: pointer; }

/* ─── Category tiles ──────────────────────────────── */
.cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: var(--gap);
}

.cat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms, border-color 140ms, transform 130ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cat:hover { background: var(--bg-hover); border-color: var(--border-hi); transform: translateY(-1px); }

.cat.wide {
  grid-column: span 2;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-color: var(--accent-mid);
  background: oklch(17% 0.022 50deg);
}

.cat.wide:hover { background: oklch(20% 0.026 50deg); border-color: oklch(42% 0.09 42deg); }

.cat-emo { font-size: 22px; line-height: 1; display: block; margin-bottom: 7px; }
.cat.wide .cat-emo { font-size: 34px; margin-bottom: 0; flex-shrink: 0; }
.cat-body { flex: 1; min-width: 0; }
.cat-name { font-size: 13px; font-weight: 600; color: var(--t1); margin-bottom: 2px; }
.cat-count { font-size: 11px; color: var(--t3); }

.cat-signal {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 640; margin-top: 5px;
}

.cat-signal.hot  { color: var(--accent); }
.cat-signal.cool { color: var(--t3); }

.cat-bar { margin-top: 8px; height: 2.5px; background: var(--bg-active); border-radius: 2px; overflow: hidden; }
.cat-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }

.cat.add-tile {
  background: none;
  border: 1.5px dashed var(--border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px; min-height: 82px;
}

.cat.add-tile:hover { border-color: var(--accent-mid); background: var(--accent-low); transform: none; }
.add-ico { font-size: 17px; color: var(--t3); }
.add-lbl { font-size: 11px; color: var(--t3); font-weight: 520; }

/* ─── Recent outfits ──────────────────────────────── */
.recents-row {
  display: flex; gap: 9px;
  overflow-x: auto; padding-bottom: 3px;
}

.recents-row::-webkit-scrollbar { height: 3px; }
.recents-row::-webkit-scrollbar-track { background: var(--bg-raised); border-radius: 2px; }
.recents-row::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

.recent-card {
  flex-shrink: 0; width: 116px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 13px 12px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
}

.recent-card:hover { background: var(--bg-hover); border-color: var(--border-hi); }

.recent-icons { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 9px; }

.mini-ico {
  width: 25px; height: 25px;
  background: var(--bg-raised);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}

.recent-name { font-size: 11px; font-weight: 620; color: var(--t1); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-date { font-size: 10px; color: var(--t3); margin-bottom: 7px; }

.stars { display: flex; gap: 2px; }
.star { font-size: 10px; }
.star.on  { color: var(--accent); }
.star.off { color: var(--bg-active); }

/* ─── AI panel ────────────────────────────────────── */
.ai-col { display: flex; flex-direction: column; gap: var(--gap); }

.sugg-item {
  display: flex; gap: 11px; align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity 140ms;
}

.sugg-item:last-child { border-bottom: none; padding-bottom: 2px; }
.sugg-item:first-child { padding-top: 2px; }
.sugg-item:hover { opacity: 0.9; background: var(--bg-hover); border-radius: var(--r-sm); }

.sugg-thumb {
  width: 42px; height: 42px;
  background: var(--bg-raised);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0;
}

.sugg-info { flex: 1; min-width: 0; }
.sugg-name { font-size: 12.5px; font-weight: 620; color: var(--t1); margin-bottom: 4px; }

.tags { display: flex; flex-wrap: wrap; gap: 4px; }

.tag {
  font-size: 10px; font-weight: 540; padding: 2px 7px;
  border-radius: 100px;
  color: var(--t2); background: var(--bg-active);
}

.tag.accent { color: var(--accent); background: var(--accent-low); }
.tag.sage   { color: var(--sage);   background: var(--sage-low);   }
.tag.sky    { color: var(--sky);    background: var(--sky-low);    }

.sugg-pct { font-size: 11.5px; font-weight: 720; color: var(--accent); flex-shrink: 0; }

.insight {
  background: var(--accent-low);
  border: 1px solid var(--accent-mid);
  border-radius: var(--r-lg);
  padding: 13px 15px;
}

.insight-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }

.insight-ico {
  width: 19px; height: 19px;
  background: var(--accent);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--on-accent);
}

.insight-lbl { font-size: 10px; font-weight: 660; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.insight-text { font-size: 12px; color: var(--t2); line-height: 1.45; }

.event-item {
  display: flex; gap: 11px; align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity 140ms;
}

.event-item:last-child { border-bottom: none; padding-bottom: 2px; }
.event-item:first-child { padding-top: 2px; }
.event-item:hover { opacity: 0.82; }

.event-ico {
  width: 38px; height: 38px;
  background: var(--bg-raised);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}

.event-info { flex: 1; min-width: 0; }
.event-name { font-size: 12.5px; font-weight: 620; color: var(--t1); margin-bottom: 3px; }
.event-plan { font-size: 12px; font-weight: 560; color: var(--accent); flex-shrink: 0; cursor: pointer; }

/* ─── Login page ──────────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.auth-card {
  width: 100%; max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 36px 32px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}

.auth-logomark {
  width: 44px; height: 44px;
  background: var(--accent);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
  color: var(--on-accent);
  letter-spacing: -0.02em;
  margin: 0 auto 12px;
}

.auth-title {
  font-size: 17px; font-weight: 680;
  color: var(--t1); letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.auth-sub {
  font-size: 12.5px; color: var(--t3);
}

.auth-field { margin-bottom: 14px; }

.auth-label {
  display: block;
  font-size: 11.5px; font-weight: 540;
  color: var(--t2);
  margin-bottom: 6px;
}

.auth-input {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-family: var(--f);
  font-size: 13px;
  color: var(--t1);
  outline: none;
  transition: border-color 140ms;
}

.auth-input:focus { border-color: var(--accent); }
.auth-input::placeholder { color: var(--t3); }

.auth-btn {
  width: 100%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--f);
  font-size: 13px; font-weight: 660;
  padding: 10px;
  border: none; border-radius: var(--r-md);
  cursor: pointer;
  transition: background 140ms, transform 120ms;
  margin-top: 6px;
}

.auth-btn:hover { background: var(--accent-dim); }
.auth-btn:active { transform: scale(0.98); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-error {
  font-size: 12px; color: oklch(68% 0.15 22deg);
  background: oklch(18% 0.04 22deg);
  border: 1px solid oklch(28% 0.07 22deg);
  border-radius: var(--r-md);
  padding: 9px 12px;
  margin-bottom: 14px;
}

.auth-footer {
  font-size: 12px; color: var(--t3);
  text-align: center;
  margin-top: 20px;
}

.auth-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 540;
}

.auth-footer a:hover { text-decoration: underline; }

/* ─── Focus ring ──────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ─── Active press states ─────────────────────────── */
.btn-fill:active   { transform: scale(0.97); }
.btn-ghost:active  { transform: scale(0.97); }
.item-card:active  { transform: scale(0.98); }
.cat:active        { transform: scale(0.98); }
.nav-item:active   { opacity: 0.75; }
.icon-btn:active   { transform: scale(0.93); }

/* ═══════════════════════════════════════════════════════
   ANIMATION SYSTEM
   ═══════════════════════════════════════════════════════ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes authCardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes barGrowX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Auth: card slides up on page load */
.auth-card { animation: authCardIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Modal: backdrop fades in (modal content already has modalIn) */
.modal-backdrop { animation: backdropIn 180ms ease both; }

/* Wardrobe grid: items entrance with stagger, capped at 8 */
.witem { animation: fadeUp 240ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.witem:nth-child(1)  { animation-delay:   0ms; }
.witem:nth-child(2)  { animation-delay:  25ms; }
.witem:nth-child(3)  { animation-delay:  50ms; }
.witem:nth-child(4)  { animation-delay:  75ms; }
.witem:nth-child(5)  { animation-delay: 100ms; }
.witem:nth-child(6)  { animation-delay: 125ms; }
.witem:nth-child(7)  { animation-delay: 148ms; }
.witem:nth-child(8)  { animation-delay: 168ms; }
.witem:nth-child(n+9) { animation-delay: 168ms; }

/* Analytics: KPI strip stagger */
.kpi { animation: fadeUp 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.kpi:nth-child(1) { animation-delay:   0ms; }
.kpi:nth-child(2) { animation-delay:  40ms; }
.kpi:nth-child(3) { animation-delay:  80ms; }
.kpi:nth-child(4) { animation-delay: 120ms; }
.kpi:nth-child(5) { animation-delay: 160ms; }

/* Analytics: chart cards stagger after KPIs settle */
.chart-card { animation: fadeUp 220ms cubic-bezier(0.22, 1, 0.36, 1) both 100ms; }
.chart-card:nth-child(2) { animation-delay: 140ms; }

/* Home: outfit item cards stagger */
.outfit-items .item-card { animation: fadeUp 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.outfit-items .item-card:nth-child(1) { animation-delay:  20ms; }
.outfit-items .item-card:nth-child(2) { animation-delay:  45ms; }
.outfit-items .item-card:nth-child(3) { animation-delay:  70ms; }
.outfit-items .item-card:nth-child(4) { animation-delay:  95ms; }

/* Cost-per-wear bars grow from left */
.cpw-bar-fill { transform-origin: left center; animation: barGrowX 0.55s cubic-bezier(0.16, 1, 0.3, 1) both 0.1s; }

/* Upload zone: icon scales on drag-over */
.upload-zone-icon { transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1); }
.upload-zone.drag-over .upload-zone-icon { transform: scale(1.1); }

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

/* ─── Responsive: tablet ──────────────────────────── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 180px; }
  .hero-grid { grid-template-columns: 1fr; }
  .side-col  { display: grid; grid-template-columns: 1fr 1fr; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stat + .stat:nth-child(3) { border-left: none; border-top: 1px solid var(--border); }
  .bottom-grid { grid-template-columns: 1fr; }
}

/* ─── Responsive: mobile ──────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; --topbar-h: 56px; }
  html { font-size: 100%; }
  .sidebar { transform: translateX(-100%); transition: transform 200ms ease-out; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .topbar { padding: 0 16px; }
  .greet-block .greet-sub { display: none; }
  .searchbar { display: none; }
  .body { padding: 16px; }
  .hero-grid { grid-template-columns: 1fr; }
  .side-col  { grid-template-columns: 1fr; }
  .outfit-items { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stat + .stat:nth-child(3) { border-left: none; border-top: 1px solid var(--border); }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .cat.wide { grid-column: span 2; }
  .bottom-grid { grid-template-columns: 1fr; }
}

/* ─── Scrollbar ───────────────────────────────────── */
:root { --scrollbar-hover: oklch(36% 0.012 65deg); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* ─── Skip link ───────────────────────────────────── */
.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--accent); color: var(--on-accent);
  font-size: 13px; font-weight: 640;
  padding: 8px 14px; border-radius: var(--r-md);
  z-index: 999; text-decoration: none;
  transition: top 140ms;
}
.skip-link:focus { top: 8px; }

/* ─── Wardrobe page ───────────────────────────────── */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 16px;
}
.page-head-left { display: flex; align-items: baseline; gap: 10px; }
h2.page-title { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--t1); }
.page-count { font-size: 13px; color: var(--t3); font-weight: 500; }
.page-head-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.stat-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 100px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 12px; color: var(--t2);
}
.stat-chip strong { font-weight: 650; color: var(--t1); }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Filter bar */
.filter-bar {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px; margin-bottom: 20px;
}
.cat-pills {
  display: flex; gap: 5px; flex: 1;
  overflow-x: auto; padding-bottom: 2px;
}
.cat-pills::-webkit-scrollbar { height: 0; }

.cpill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 100px;
  font-size: 12.5px; font-weight: 500; color: var(--t2);
  background: none; border: 1px solid var(--border);
  cursor: pointer; white-space: nowrap;
  transition: background 140ms, color 140ms, border-color 140ms;
  font-family: var(--f);
}
.cpill:hover { background: var(--bg-hover); color: var(--t1); border-color: var(--border-hi); }
.cpill.active { background: var(--accent-low); color: var(--accent); border-color: var(--accent-mid); font-weight: 570; }
.cpill .cnt { font-size: 10.5px; font-weight: 600; color: var(--t3); transition: color 140ms; }
.cpill.active .cnt { color: var(--accent-dim); }

.filter-controls { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

.sort-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--r-md);
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 500; color: var(--t2);
  cursor: pointer; transition: background 140ms, border-color 140ms;
  font-family: var(--f); white-space: nowrap;
}
.sort-btn:hover { background: var(--bg-hover); border-color: var(--border-hi); color: var(--t1); }

.view-toggle { display: flex; overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--border); }
.vbtn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--t3); cursor: pointer;
  background: var(--bg-card); border: none;
  transition: background 140ms, color 140ms;
  font-family: var(--f);
}
.vbtn + .vbtn { border-left: 1px solid var(--border); }
.vbtn:hover { background: var(--bg-hover); color: var(--t2); }
.vbtn.active { background: var(--bg-active); color: var(--t1); }

/* Recently worn strip */
.recent-strip { margin-bottom: 22px; }
.strip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.strip-title { font-size: 11px; font-weight: 640; letter-spacing: 0.07em; text-transform: uppercase; color: var(--t3); }
.strip-link { font-size: 11.5px; color: var(--accent); font-weight: 520; cursor: pointer; }

.recent-row { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 3px; }
.recent-row::-webkit-scrollbar { height: 3px; }
.recent-row::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

.recent-thumb { flex-shrink: 0; width: 80px; cursor: pointer; transition: opacity 140ms; }
.recent-thumb:hover { opacity: 0.82; }

.rt-visual {
  width: 80px; height: 80px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 6px;
}
.rt-visual.today-ring { box-shadow: 0 0 0 2px var(--accent); }
.rt-name { font-size: 11px; font-weight: 570; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-date { font-size: 10px; color: var(--t3); }

/* Wardrobe grid */
.wardrobe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 11px;
}

/* Item card */
.witem {
  --clr: oklch(50% 0.05 65deg);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 130ms cubic-bezier(0.22, 1, 0.36, 1);
}
.witem:hover { transform: translateY(-2px); }
.witem:active { transform: scale(0.98) translateY(0); }

.witem.ai-pick  { box-shadow: 0 0 0 2px var(--accent-mid); }
.witem.most-worn { box-shadow: 0 0 0 2px oklch(38% 0.07 152deg); }
.witem.dormant .witem-visual { filter: saturate(0.55); }

.witem-visual {
  height: 152px;
  background: var(--clr);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.witem-visual::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, oklch(10% 0.006 62deg / 0.42) 0%, transparent 35%, transparent 52%, oklch(10% 0.006 62deg / 0.72) 100%);
  pointer-events: none;
}
.witem-emo { font-size: 44px; line-height: 1; position: relative; z-index: 1; pointer-events: none; }

.witem-badges {
  position: absolute; top: 8px; left: 8px; right: 8px;
  display: flex; justify-content: space-between; align-items: flex-start;
  z-index: 2;
}

.badge {
  font-size: 9.5px; font-weight: 660; letter-spacing: 0.03em;
  padding: 2.5px 7px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 4px;
}
.badge-ai   { background: oklch(12% 0.006 62deg / 0.88); color: var(--accent); }
.badge-worn { background: oklch(12% 0.006 62deg / 0.80); color: var(--sage); }
.badge-slp  { background: oklch(12% 0.006 62deg / 0.88); color: var(--caution); }
.badge-num  { background: oklch(12% 0.006 62deg / 0.78); color: var(--t2); }

.witem-overlay {
  position: absolute; inset: 0;
  background: oklch(9% 0.007 62deg / 0.90);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 7px; padding: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 20;
}
.witem:hover .witem-overlay { opacity: 1; pointer-events: auto; }

.ov-btn {
  width: 100%; padding: 8px 10px;
  border-radius: var(--r-md);
  font-size: 12px; font-weight: 620;
  cursor: pointer; font-family: var(--f);
  transition: background 120ms, transform 100ms;
  letter-spacing: 0.01em;
}
.ov-btn:active { transform: scale(0.97); }
.ov-btn.primary { background: var(--accent); color: var(--on-accent); border: none; }
.ov-btn.primary:hover { background: var(--accent-dim); }
.ov-btn.ghost { background: oklch(22% 0.010 64deg); color: var(--t1); border: 1px solid var(--border-hi); }
.ov-btn.ghost:hover { background: oklch(26% 0.012 64deg); }

.witem-info { background: var(--bg-card); border-top: 1px solid var(--border); padding: 10px 12px 9px; }
.witem-name { font-size: 12.5px; font-weight: 620; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.witem-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--t3); margin-bottom: 7px; }

.wear-row { display: flex; align-items: center; gap: 3px; }
.wd { width: 5px; height: 5px; border-radius: 50%; background: var(--border-hi); transition: background 200ms; }
.wd.a  { background: var(--accent); }
.wd.hi { background: var(--sage); }

.witem-add {
  border-radius: var(--r-lg);
  border: 1.5px dashed var(--border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; cursor: pointer;
  min-height: 220px;
  transition: border-color 140ms, background 140ms;
  color: var(--t3);
}
.witem-add:hover { border-color: var(--accent-mid); background: var(--accent-low); color: var(--accent); }
.witem-add .add-ico { font-size: 22px; }
.witem-add .add-lbl { font-size: 12px; font-weight: 570; }

/* AI insight bar */
.ai-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--accent-low); border: 1px solid var(--accent-mid);
  border-radius: var(--r-lg); padding: 10px 14px;
  margin-bottom: 18px; font-size: 12.5px; color: var(--t2);
}
.ai-bar-icon {
  width: 22px; height: 22px; background: var(--accent);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--on-accent); flex-shrink: 0;
}
.ai-bar-text { flex: 1; line-height: 1.4; }
.ai-bar-text strong { color: var(--accent); font-weight: 640; }
.ai-bar-action { font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap; flex-shrink: 0; }

.wardrobe-grid--list    { grid-template-columns: 1fr; }
.wardrobe-grid--compact { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

@media (max-width: 1024px) {
  .wardrobe-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 768px) {
  .page-head { flex-wrap: wrap; }
  .wardrobe-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 9px; }
  .stat-chip { display: none; }
}

/* ═══════════════════════════════════════════════════════
   AI STYLIST PAGE
   ═══════════════════════════════════════════════════════ */

:root {
  --lavender:  oklch(68%   0.10  290deg);
  --lav-low:   oklch(17%   0.028 290deg);
  --panel-w:   320px;
}

/* AI status chip in topbar */
.ai-status {
  display: flex; align-items: center; gap: 8px;
  background: var(--accent-low); border: 1px solid var(--accent-mid);
  border-radius: 100px; padding: 5px 12px;
  font-size: 12px; font-weight: 560; color: var(--accent);
  flex-shrink: 0;
}
.ai-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: breathe 2s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

/* 3-pane row below topbar */
.pane-row {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Chat pane (centre) */
.chat-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.chat-body::-webkit-scrollbar { width: 4px; }
.chat-body::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

/* Welcome state */
.chat-welcome {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; padding: 32px;
  text-align: center;
}
.welcome-icon {
  width: 52px; height: 52px; background: var(--accent);
  border-radius: 16px; display: flex; align-items: center;
  justify-content: center; font-size: 24px;
  color: var(--on-accent); margin-bottom: 6px;
  animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 oklch(67% 0.148 38deg / 0); }
  50%       { box-shadow: 0 0 0 8px oklch(67% 0.148 38deg / 0.15); }
}
.welcome-title { font-size: 17px; font-weight: 680; color: var(--t1); letter-spacing: -0.025em; margin-bottom: 4px; }
.welcome-sub   { font-size: 13px; color: var(--t2); max-width: 360px; line-height: 1.5; margin-bottom: 22px; }

/* Quick-start prompts */
.prompts-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  width: 100%; max-width: 500px;
}
.prompt-chip {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 11px 14px;
  cursor: pointer; text-align: left;
  transition: background 140ms, border-color 140ms, transform 120ms;
}
.prompt-chip:hover { background: var(--bg-hover); border-color: var(--border-hi); transform: translateY(-1px); }
.prompt-chip:active { transform: scale(0.98); }
.pc-ico  { font-size: 18px; margin-bottom: 5px; display: block; }
.pc-text { font-size: 12px; font-weight: 560; color: var(--t1); line-height: 1.35; }
.pc-sub  { font-size: 11px; color: var(--t3); margin-top: 2px; }

/* Chat messages */
.msg-row {
  display: flex; gap: 12px;
  animation: msgIn 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-row.user { justify-content: flex-end; }
.msg-avatar-ai {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px;
  background: var(--accent); color: var(--on-accent);
}
.msg-avatar-user {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0; margin-top: 2px;
  background: linear-gradient(135deg, oklch(55% 0.12 42deg), oklch(44% 0.09 64deg));
  color: oklch(94% 0.006 75deg);
}
.msg-content { max-width: 72%; display: flex; flex-direction: column; gap: 4px; }
.msg-row.user .msg-content { align-items: flex-end; }
.msg-sender { font-size: 10.5px; font-weight: 600; color: var(--t3); }
.msg-bubble {
  padding: 11px 14px; border-radius: var(--r-lg);
  font-size: 13px; color: var(--t1); line-height: 1.55;
}
.msg-bubble.ai { background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: var(--r-xs); }
.msg-bubble.user-msg { background: var(--accent-mid); color: var(--t1); border-bottom-right-radius: var(--r-xs); }
.msg-time { font-size: 10px; color: var(--t3); }

/* Outfit suggestion card embedded in AI message */
.ai-outfit-suggestion {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; margin-top: 6px;
  cursor: pointer; transition: border-color 140ms, transform 120ms; max-width: 360px;
}
.ai-outfit-suggestion:hover { border-color: var(--accent-mid); transform: translateY(-1px); }
.aos-visual { display: grid; grid-template-columns: repeat(4, 1fr); height: 80px; }
.aos-slot { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.aos-slot + .aos-slot { border-left: 1px solid oklch(9% 0.007 62deg / 0.5); }
.aos-slot:nth-child(1) { background: oklch(24% 0.022 46deg); }
.aos-slot:nth-child(2) { background: oklch(14% 0.008 62deg); }
.aos-slot:nth-child(3) { background: oklch(22% 0.016 52deg); }
.aos-slot:nth-child(4) { background: oklch(19% 0.012 65deg); }
.aos-info { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; }
.aos-name { font-size: 12.5px; font-weight: 640; color: var(--t1); }
.aos-meta { font-size: 11px; color: var(--t3); margin-top: 1px; }
.aos-actions { display: flex; gap: 7px; flex-shrink: 0; }
.aos-btn {
  font-size: 11.5px; font-weight: 600; padding: 5px 11px;
  border-radius: var(--r-sm); cursor: pointer;
  transition: background 120ms, transform 100ms; border: none; font-family: var(--f);
}
.aos-btn.primary { background: var(--accent); color: var(--on-accent); }
.aos-btn.primary:hover { background: var(--accent-dim); }
.aos-btn.ghost { background: var(--bg-hover); color: var(--t2); border: 1px solid var(--border); }
.aos-btn.ghost:hover { background: var(--bg-card); color: var(--t1); }

/* Item grid inside AI message */
.ai-items-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 8px; max-width: 360px; }
.ai-item-card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px; cursor: pointer;
  transition: background 140ms, border-color 140ms; text-align: center;
}
.ai-item-card:hover { background: var(--bg-hover); border-color: var(--border-hi); }
.aic-ico   { font-size: 22px; display: block; margin-bottom: 4px; }
.aic-name  { font-size: 10.5px; font-weight: 580; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aic-brand { font-size: 9.5px; color: var(--t3); }

/* Typing indicator */
.typing-indicator {
  display: flex; align-items: center; gap: 4px; padding: 11px 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); border-bottom-left-radius: var(--r-xs); width: fit-content;
}
.typing-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--t3);
  animation: typeBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typeBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* Chat input bar */
.chat-input-bar { padding: 14px 24px 18px; border-top: 1px solid var(--border); flex-shrink: 0; }
.chat-input-wrap {
  display: flex; align-items: flex-end; gap: 9px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 10px 12px;
  transition: border-color 140ms;
}
.chat-input-wrap:focus-within { border-color: var(--accent-mid); }
.chat-attach {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--bg-raised); color: var(--t2); font-size: 16px;
  cursor: pointer; flex-shrink: 0;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.chat-attach:hover { background: var(--bg-hover); color: var(--t1); border-color: var(--border-hi); }
.chat-textarea {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--f); font-size: 13px; color: var(--t1);
  resize: none; line-height: 1.5; min-height: 20px; max-height: 120px;
}
.chat-textarea::placeholder { color: var(--t3); }
.chat-send {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); background: var(--accent);
  border: none; color: var(--on-accent); font-size: 16px;
  cursor: pointer; flex-shrink: 0;
  transition: background 140ms, transform 120ms;
}
.chat-send:hover { background: var(--accent-dim); }
.chat-send:active { transform: scale(0.92); }
.chat-hints { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.hint-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 10px;
  font-size: 11.5px; font-weight: 500; color: var(--t2);
  cursor: pointer; transition: background 140ms, color 140ms, border-color 140ms;
}
.hint-pill:hover { background: var(--bg-hover); color: var(--t1); border-color: var(--border-hi); }

/* Context panel (right) */
.context-panel {
  width: var(--panel-w);
  display: flex; flex-direction: column;
  overflow: hidden; flex-shrink: 0;
}
.ctx-head {
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.ctx-title { font-size: 11px; font-weight: 660; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); }
.ctx-link  { font-size: 11.5px; font-weight: 520; color: var(--accent); cursor: pointer; }
.ctx-body  { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 18px; }
.ctx-body::-webkit-scrollbar { width: 3px; }
.ctx-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.ctx-section-label {
  font-size: 9.5px; font-weight: 660; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--t3); margin-bottom: 9px;
}
.occasion-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.occ-chip {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 520; padding: 5px 10px; border-radius: 100px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--t2); cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.occ-chip:hover  { background: var(--bg-hover); color: var(--t1); border-color: var(--border-hi); }
.occ-chip.active { background: var(--accent-low); color: var(--accent); border-color: var(--accent-mid); font-weight: 570; }
.mood-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mood-swatch {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  cursor: pointer; transition: transform 120ms; position: relative;
  /* expand hit area to 44px without changing visual */
  padding: 8px; margin: -8px; box-sizing: content-box;
  background: none; border: none; display: inline-block; flex-shrink: 0;
}
.mood-swatch:hover { transform: scale(1.12); }
.mood-swatch.active::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: oklch(94% 0.006 75deg);
  background: oklch(9% 0.007 62deg / 0.5); border-radius: var(--r-sm);
}
.ctx-item-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: opacity 140ms;
}
.ctx-item-row:last-of-type { border-bottom: none; }
.ctx-item-row:hover { opacity: 0.9; background: var(--bg-hover); border-radius: var(--r-sm); }
.ctx-item-ico {
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.ctx-item-info { flex: 1; min-width: 0; }
.ctx-item-name { font-size: 12px; font-weight: 580; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-item-sub  { font-size: 10.5px; color: var(--t3); }
.ctx-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px; border-radius: var(--r-md);
  background: none; border: 1px dashed var(--border);
  font-size: 12px; font-weight: 520; color: var(--t3);
  cursor: pointer; font-family: var(--f);
  transition: border-color 140ms, background 140ms, color 140ms;
}
.ctx-add-btn:hover { border-color: var(--accent-mid); background: var(--accent-low); color: var(--accent); }

/* AI Stylist page — full-height layout override */
.ai-stylist-shell { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.ai-stylist-shell .main { overflow: hidden; }

@media (max-width: 1200px) { :root { --panel-w: 268px; } }
@media (max-width: 1024px) {
  :root { --panel-w: 0px; }
  .context-panel { display: none; }
}
@media (max-width: 768px) {
  .chat-body { padding: 16px 16px 12px; }
  .chat-input-bar { padding: 10px 14px 14px; }
  .msg-content { max-width: 88%; }
}

/* ═══════════════════════════════════════════════════════
   ANALYTICS PAGE
   ═══════════════════════════════════════════════════════ */

/* Date range selector */
.date-seg {
  display: flex; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--border);
}
.dseg {
  padding: 7px 14px;
  font-size: 12.5px; font-weight: 500; color: var(--t2);
  background: var(--bg-card); border: none; cursor: pointer;
  font-family: var(--f); transition: background 140ms, color 140ms;
}
.dseg + .dseg { border-left: 1px solid var(--border); }
.dseg:hover { background: var(--bg-hover); color: var(--t1); }
.dseg.active { background: var(--bg-active); color: var(--t1); font-weight: 570; }

/* KPI strip */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 11px;
  margin-bottom: 20px;
}
.kpi {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 18px 18px 16px;
  cursor: default; transition: background 140ms; position: relative; overflow: hidden;
}
.kpi:hover { background: var(--bg-hover); }
.kpi-ico  { font-size: 15px; margin-bottom: 9px; display: block; line-height: 1; }
.kpi-num  { font-size: 22px; font-weight: 720; color: var(--t1); letter-spacing: -0.04em; line-height: 1; margin-bottom: 2px; }
.kpi-unit { font-size: 13px; font-weight: 500; color: var(--t2); letter-spacing: 0; }
.kpi-lbl  { font-size: 11px; color: var(--t3); font-weight: 500; margin-bottom: 8px; }
.kpi-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 100px;
}
.kpi-delta.up   { background: var(--sage-low);    color: var(--sage); }
.kpi-delta.down { background: var(--caution-low); color: var(--caution); }
.kpi-delta.neu  { background: var(--bg-hover);    color: var(--t3); }

/* Chart grid */
.chart-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 13px; margin-bottom: 20px;
}
.chart-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 20px 22px 22px;
}
.chart-head {
  display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px;
}
.chart-title { font-size: 13px; font-weight: 650; color: var(--t1); letter-spacing: -0.01em; margin-bottom: 2px; }
.chart-sub   { font-size: 11px; color: var(--t3); }
.chart-link  { font-size: 11.5px; font-weight: 520; color: var(--accent); cursor: pointer; flex-shrink: 0; }

/* Bar chart */
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.bar-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 4px; height: 100%; justify-content: flex-end;
}
.bar-fill {
  width: 100%; border-radius: 4px 4px 0 0;
  background: var(--accent-mid); min-height: 4px;
  animation: barGrow 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: bottom;
}
@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.bar-col:hover .bar-fill { background: var(--accent); }
.bar-col.current .bar-fill { background: var(--accent); }
.bar-lbl { font-size: 9.5px; color: var(--t3); }
.bar-val { font-size: 9.5px; color: var(--t3); margin-bottom: 2px; }

/* Category donut */
.donut-wrap { display: flex; align-items: center; gap: 22px; }
.donut-svg-wrap { flex-shrink: 0; position: relative; width: 110px; height: 110px; }
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.legend-row { display: flex; align-items: center; gap: 7px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.legend-label { font-size: 11.5px; color: var(--t2); flex: 1; }
.legend-pct   { font-size: 11.5px; font-weight: 600; color: var(--t1); }
.legend-bar   { height: 3px; border-radius: 2px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.donut-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); text-align: center;
}
.dc-num { font-size: 18px; font-weight: 720; color: var(--t1); line-height: 1; letter-spacing: -0.04em; }
.dc-lbl { font-size: 9.5px; color: var(--t3); }

/* Heatmap */
.chart-full { margin-bottom: 20px; }
.hm-months { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.hm-months::-webkit-scrollbar { height: 0; }
.hm-month { flex-shrink: 0; }
.hm-month-lbl { font-size: 9.5px; color: var(--t3); margin-bottom: 5px; font-weight: 600; letter-spacing: 0.04em; }
.hm-grid { display: grid; grid-template-columns: repeat(7, 10px); grid-auto-rows: 10px; gap: 2px; }
.hm-cell { width: 10px; height: 10px; border-radius: 2px; background: var(--border); transition: background 140ms, transform 100ms; cursor: default; }
.hm-cell:hover { transform: scale(1.15); }
.hm-cell.w1 { background: oklch(28% 0.06 42deg); }
.hm-cell.w2 { background: oklch(40% 0.09 40deg); }
.hm-cell.w3 { background: oklch(52% 0.11 38deg); }
.hm-cell.w4 { background: var(--accent); }
.hm-day-labels { display: grid; grid-template-columns: repeat(7, 10px); gap: 2px; margin-bottom: 6px; }
.hm-dl { font-size: 8px; color: var(--t3); text-align: center; }
.hm-legend { display: flex; align-items: center; gap: 5px; margin-top: 10px; }
.hm-legend-lbl { font-size: 10px; color: var(--t3); }
.hm-legend-cells { display: flex; gap: 2px; }
.hm-lc { width: 10px; height: 10px; border-radius: 2px; }

/* Cost-per-wear rows */
.cpw-row {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.cpw-row:last-child { border-bottom: none; }
.cpw-ico {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.cpw-info { flex: 1; min-width: 0; }
.cpw-name { font-size: 12px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpw-sub  { font-size: 10.5px; color: var(--t3); }
.cpw-bar-wrap { width: 80px; flex-shrink: 0; }
.cpw-bar-track { height: 4px; background: var(--border); border-radius: 2px; }
.cpw-bar-fill  { height: 4px; border-radius: 2px; background: var(--accent); }
.cpw-val { font-size: 12px; font-weight: 660; color: var(--t1); flex-shrink: 0; text-align: right; min-width: 36px; }
.cpw-val small { font-size: 9.5px; color: var(--t3); font-weight: 500; }

/* Most/least worn tables */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 20px; }
.it-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.it-row:last-child { border-bottom: none; }
.it-rank { font-size: 11px; font-weight: 700; color: var(--t3); width: 16px; flex-shrink: 0; text-align: center; }
.it-rank.gold   { color: var(--caution); }
.it-rank.silver { color: var(--t2); }
.it-rank.bronze { color: oklch(56% 0.07 52deg); }
.it-ico {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.it-info { flex: 1; min-width: 0; }
.it-name { font-size: 12px; font-weight: 580; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-sub  { font-size: 10.5px; color: var(--t3); }
.it-count { font-size: 11.5px; font-weight: 660; color: var(--t1); flex-shrink: 0; text-align: right; min-width: 28px; }
.wd.sl { background: var(--border); }

/* AI insight block */
.insight-block {
  background: var(--accent-low); border: 1px solid var(--accent-mid);
  border-radius: var(--r-xl); padding: 16px 18px;
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px;
}
.insight-ico {
  width: 28px; height: 28px; background: var(--accent);
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: 13px; color: var(--on-accent); flex-shrink: 0;
}
.insight-body  { flex: 1; }
.insight-title { font-size: 12.5px; font-weight: 640; color: var(--t1); margin-bottom: 4px; }
.insight-text  { font-size: 12px; color: var(--t2); line-height: 1.55; }
.insight-text strong { color: var(--accent); font-weight: 640; }

@media (max-width: 1200px) { .kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) {
  .chart-grid { grid-template-columns: 1fr; }
  .two-col    { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
  .two-col    { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   OUTFITS PAGE
   ═══════════════════════════════════════════════════════ */

/* AI build banner */
.ai-banner {
  display: flex; align-items: center; gap: 14px;
  background: var(--accent-low); border: 1px solid var(--accent-mid);
  border-radius: var(--r-xl); padding: 14px 18px; margin-bottom: 20px;
}
.ai-banner-icon {
  width: 36px; height: 36px; background: var(--accent);
  border-radius: var(--r-md); display: flex; align-items: center;
  justify-content: center; font-size: 16px; color: var(--on-accent);
  flex-shrink: 0; animation: pulseGlow 3s ease-in-out infinite;
}
.ai-banner-text    { flex: 1; }
.ai-banner-title   { font-size: 13px; font-weight: 640; color: var(--t1); margin-bottom: 2px; letter-spacing: -0.01em; }
.ai-banner-sub     { font-size: 11.5px; color: var(--t2); line-height: 1.4; }
.ai-banner-sub strong { color: var(--accent); font-weight: 600; }
.ai-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Tab pills (filter bar) */
.tab-pills { display: flex; gap: 2px; flex: 1; }
.tpill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 500; color: var(--t2);
  background: none; border: none; cursor: pointer; white-space: nowrap;
  transition: background 140ms, color 140ms; font-family: var(--f);
}
.tpill:hover { background: var(--bg-hover); color: var(--t1); }
.tpill.active { background: var(--bg-card); color: var(--t1); font-weight: 570; }
.tpill .cnt { font-size: 10.5px; font-weight: 600; color: var(--t3); }
.tpill.active .cnt { color: var(--accent); }

/* Section heads */
.section-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px;
}
.section-title { font-size: 10.5px; font-weight: 660; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); }
.section-link  { font-size: 11.5px; font-weight: 520; color: var(--accent); cursor: pointer; }

/* Pinned row */
.pinned-row { margin-bottom: 28px; }
.pinned-scroll { display: flex; gap: 13px; overflow-x: auto; padding-bottom: 4px; }
.pinned-scroll::-webkit-scrollbar { height: 3px; }
.pinned-scroll::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }
.pin-card {
  flex-shrink: 0; width: 220px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden; cursor: pointer;
  transition: transform 130ms cubic-bezier(0.22, 1, 0.36, 1), border-color 140ms;
}
.pin-card.active-outfit { border-color: var(--accent-mid); box-shadow: 0 0 0 1px var(--accent-mid) inset; }
.pin-card:hover { transform: translateY(-2px); border-color: var(--border-hi); }
.pin-visual {
  height: 90px; display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative; overflow: hidden;
}
.pin-slot { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.pin-slot + .pin-slot { border-left: 1px solid oklch(9% 0.007 62deg / 0.5); }
.active-ring {
  position: absolute; inset: 0; box-shadow: 0 0 0 2px var(--accent) inset;
  pointer-events: none;
}
.pin-info { padding: 9px 12px 10px; }
.pin-name { font-size: 12.5px; font-weight: 640; color: var(--t1); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-meta { font-size: 10.5px; color: var(--t3); }

/* Outfit grid */
.ocard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 13px;
}

/* Outfit card */
.ocard {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden; cursor: pointer;
  transition: transform 130ms cubic-bezier(0.22, 1, 0.36, 1), border-color 140ms, box-shadow 140ms;
  position: relative;
}
.ocard:hover {
  transform: translateY(-2px); border-color: var(--border-hi);
  box-shadow: 0 8px 24px oklch(9% 0.006 62deg / 0.50);
}
.ocard:active { transform: scale(0.99) translateY(0); }
.ocard.pinned  { border-left: 3px solid var(--accent); }
.ocard.ai-gen  { border-color: var(--accent-mid); }

/* Card visual strip */
.ocard-visual {
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: 118px; position: relative; overflow: hidden;
}
.ocard-slot {
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.ocard-slot + .ocard-slot { border-left: 1px solid oklch(9% 0.007 62deg / 0.6); }
.ocard-slot:nth-child(1) { background: oklch(19% 0.013 64deg); }
.ocard-slot:nth-child(2) { background: oklch(21% 0.015 60deg); }
.ocard-slot:nth-child(3) { background: oklch(18% 0.012 68deg); }
.ocard-slot:nth-child(4) { background: oklch(22% 0.014 56deg); }

/* Badges row on visual */
.ocard-badges {
  position: absolute; top: 8px; left: 10px; right: 10px;
  display: flex; justify-content: space-between; align-items: center; z-index: 5;
}
.obadge {
  font-size: 9.5px; font-weight: 660; letter-spacing: 0.03em;
  padding: 2.5px 8px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 4px;
}
.obadge-ai     { background: oklch(12% 0.006 62deg / 0.88); color: var(--accent); }
.obadge-pin    { background: oklch(12% 0.006 62deg / 0.88); color: var(--caution); }
.obadge-season { background: oklch(12% 0.006 62deg / 0.82); color: var(--t2); }
.match-score {
  font-size: 10px; font-weight: 700; letter-spacing: -0.01em;
  background: oklch(12% 0.006 62deg / 0.85); color: var(--accent);
  padding: 2.5px 7px; border-radius: 100px;
}
.match-score.sage { color: var(--sage); }

/* Hover overlay */
.ocard-overlay {
  position: absolute; inset: 0; background: oklch(9% 0.007 62deg / 0.88);
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 8px; opacity: 0; pointer-events: none;
  transition: opacity 150ms ease; z-index: 10; padding: 12px;
}
.ocard:hover .ocard-overlay { opacity: 1; pointer-events: auto; }
.ocard-action {
  flex: 1; padding: 8px 10px; border-radius: var(--r-md);
  font-size: 12px; font-weight: 620; cursor: pointer; font-family: var(--f);
  transition: background 120ms, transform 100ms; text-align: center;
  letter-spacing: 0.01em; border: none;
}
.ocard-action:active { transform: scale(0.97); }
.ocard-action.primary  { background: var(--accent); color: var(--on-accent); }
.ocard-action.primary:hover  { background: var(--accent-dim); }
.ocard-action.secondary { background: oklch(22% 0.010 64deg); color: var(--t1); border: 1px solid var(--border-hi); }
.ocard-action.secondary:hover { background: oklch(26% 0.012 64deg); }

/* Card info */
.ocard-info      { padding: 12px 14px 13px; }
.ocard-name      { font-size: 13.5px; font-weight: 650; color: var(--t1); letter-spacing: -0.01em; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocard-stat-row  { display: flex; align-items: center; justify-content: space-between; }
.wear-stat       { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t3); }
.ocard-date      { font-size: 10.5px; color: var(--t3); }

/* Add-outfit card */
.ocard-add {
  border-radius: var(--r-xl); border: 1.5px dashed var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; min-height: 210px;
  transition: border-color 140ms, background 140ms; color: var(--t3);
}
.ocard-add:hover { border-color: var(--accent-mid); background: var(--accent-low); color: var(--accent); }
.ocard-add .add-ico { font-size: 24px; }
.ocard-add .add-lbl { font-size: 12.5px; font-weight: 570; color: inherit; }
.ocard-add .add-sub { font-size: 11px; color: var(--t3); }
.ocard-add:hover .add-sub { color: var(--accent-dim); }

@media (max-width: 1024px) {
  .ocard-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 768px) {
  .ocard-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ai-banner { flex-wrap: wrap; }
  .ai-banner-actions { width: 100%; }
}

/* ═══════════════════════════════════════════════════════
   Settings page
   ══════════════════════════════════════════════════════ */

/* Layout */
.settings-body { display: flex; flex: 1; }

/* Settings local nav */
.settings-nav {
  width: var(--settings-nav-w); border-right: 1px solid var(--border);
  padding: 24px 12px; flex-shrink: 0;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
}
.settings-nav::-webkit-scrollbar { width: 3px; }
.settings-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.snav-group { margin-bottom: 18px; }
.snav-group-label {
  font-size: 9.5px; font-weight: 660; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--t3); padding: 0 8px 6px;
}
.snav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 460; color: var(--t2);
  cursor: pointer; transition: background 140ms, color 140ms; margin-bottom: 1px;
}
.snav-item:hover { background: var(--bg-hover); color: var(--t1); }
.snav-item.active { background: var(--accent-low); color: var(--accent); font-weight: 530; }
.snav-item.danger { color: var(--danger); }
.snav-item.danger:hover { background: var(--danger-low); }
.snav-ico { font-size: 13px; flex-shrink: 0; opacity: 0.8; }

/* Settings content area */
.settings-content { flex: 1; padding: 28px 32px 48px; max-width: 680px; }

/* Section blocks */
.settings-section { margin-bottom: 36px; }
.s-section-head { margin-bottom: 18px; }
h2.s-section-title {
  font-size: 16px; font-weight: 680; color: var(--t1);
  letter-spacing: -0.02em; margin-bottom: 3px;
}
.s-section-title.danger-title { color: var(--danger); }
.s-section-desc { font-size: 12.5px; color: var(--t2); line-height: 1.5; }
.s-section-divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; }

/* Card */
.s-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
}

/* Row */
.s-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  min-height: 56px; transition: background 140ms;
}
.s-row:last-child { border-bottom: none; }
.s-row:hover { background: var(--bg-hover); }
.s-row.no-hover:hover { background: none; }

.s-row-ico {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.s-row-content { flex: 1; min-width: 0; }
.s-row-label { font-size: 13px; font-weight: 560; color: var(--t1); }
.s-row-sub   { font-size: 11.5px; color: var(--t3); margin-top: 1px; }
.s-row-control { flex-shrink: 0; }
.s-arrow { font-size: 14px; color: var(--t3); }

/* Field (label + input grid) */
.s-field {
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center;
}
.s-field:last-child { border-bottom: none; }
.s-field-label { font-size: 12.5px; font-weight: 560; color: var(--t1); }
.s-field-sub   { font-size: 11px; color: var(--t3); margin-top: 2px; }

/* Toggle switch */
.toggle {
  position: relative; width: 38px; height: 22px;
  cursor: pointer; flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--bg-active); border-radius: 100px;
  transition: background 200ms;
}
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: oklch(90% 0.006 75deg); border-radius: 50%;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.toggle input:checked ~ .toggle-thumb { transform: translateX(16px); }

/* Inputs / select */
.s-select {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--t1);
  font-family: var(--f); font-size: 12.5px; font-weight: 500;
  padding: 6px 28px 6px 10px; cursor: pointer;
  transition: border-color 140ms; appearance: none; min-width: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.s-select:focus { outline: 2px solid var(--accent); border-color: var(--accent-mid); }
.s-select:hover { border-color: var(--border-hi); }
.s-select option { background: oklch(17.5% 0.011 64deg); color: var(--t1); }

.s-input {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--t1);
  font-family: var(--f); font-size: 12.5px;
  padding: 7px 12px; width: 100%; transition: border-color 140ms;
}
.s-input:focus { outline: 2px solid var(--accent); border-color: var(--accent-mid); outline-offset: 0; }
.s-input:hover { border-color: var(--border-hi); }
.s-input::placeholder { color: var(--t3); }

/* Badge */
.s-badge {
  font-size: 10.5px; font-weight: 620; padding: 2.5px 8px;
  border-radius: 100px; display: inline-flex; align-items: center; gap: 4px;
}
.s-badge.pro    { background: var(--accent-low); color: var(--accent); }
.s-badge.free   { background: var(--bg-hover);   color: var(--t3); }
.s-badge.active { background: var(--sage-low);   color: var(--sage); }
.s-badge.beta   { background: var(--sky-low);    color: var(--sky); }

/* Danger button */
.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--danger-low); color: var(--danger);
  font-family: var(--f); font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--danger-mid);
  cursor: pointer; transition: background 140ms, border-color 140ms;
}
.btn-danger:hover { background: oklch(20% 0.05 25deg); border-color: oklch(32% 0.08 25deg); }
.btn-danger:active { transform: scale(0.97); }

/* Avatar upload */
.avatar-upload {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 18px; border-bottom: 1px solid var(--border);
}
.avatar-lg {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, oklch(55% 0.12 42deg), oklch(44% 0.09 64deg));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600; color: oklch(94% 0.006 75deg); flex-shrink: 0;
  position: relative; cursor: pointer;
}
.avatar-lg::after {
  content: '✎'; position: absolute; bottom: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--bg-raised);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--t2);
}
.avatar-info { flex: 1; }
.avatar-name  { font-size: 14px; font-weight: 660; color: var(--t1); margin-bottom: 2px; }
.avatar-email-row { font-size: 12px; color: var(--t3); margin-bottom: 8px; }
.avatar-actions { display: flex; gap: 8px; }

/* Style chip grid */
.style-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 16px 18px;
}
.style-chip {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 8px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--bg-raised);
  cursor: pointer; transition: background 140ms, border-color 140ms; text-align: center;
}
.style-chip:hover { background: var(--bg-hover); border-color: var(--border-hi); }
.style-chip.active { background: var(--accent-low); border-color: var(--accent-mid); }
.style-chip-ico { font-size: 20px; }
.style-chip-lbl { font-size: 11px; font-weight: 560; color: var(--t2); }
.style-chip.active .style-chip-lbl { color: var(--accent); }

/* Plan card */
.plan-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
}
.plan-current {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.plan-icon {
  width: 40px; height: 40px; background: var(--accent);
  border-radius: var(--r-md); display: flex; align-items: center;
  justify-content: center; font-size: 18px; color: var(--on-accent); flex-shrink: 0;
}
.plan-info { flex: 1; }
.plan-name  { font-size: 14px; font-weight: 660; color: var(--t1); margin-bottom: 2px; }
.plan-price { font-size: 12px; color: var(--t2); }
.plan-features {
  padding: 16px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.pf-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--t2); }
.pf-check { font-size: 12px; color: var(--sage); flex-shrink: 0; }
.pf-check.locked { color: var(--t3); }
.plan-actions {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.plan-renews { font-size: 11.5px; color: var(--t3); }

/* Integration service row */
.service-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.service-row:last-child { border-bottom: none; }
.service-ico {
  width: 34px; height: 34px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.service-info { flex: 1; }
.service-name { font-size: 12.5px; font-weight: 580; color: var(--t1); }
.service-desc { font-size: 11px; color: var(--t3); }
.service-status { font-size: 11px; font-weight: 600; padding: 2.5px 8px; border-radius: 100px; }
.service-status.on  { background: var(--sage-low); color: var(--sage); }
.service-status.off { background: var(--bg-hover); color: var(--t3); }

/* Danger zone */
.danger-card {
  background: var(--danger-low); border: 1px solid var(--danger-mid);
  border-radius: var(--r-xl); overflow: hidden;
}
.danger-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--danger-mid);
}
.danger-row:last-child { border-bottom: none; }
.danger-row-ico   { font-size: 16px; flex-shrink: 0; }
.danger-row-info  { flex: 1; }
.danger-row-label { font-size: 13px; font-weight: 560; color: var(--danger); }
.danger-row-sub   { font-size: 11.5px; color: oklch(48% 0.06 25deg); margin-top: 1px; }

/* Save bar */
.save-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border-hi);
  border-radius: var(--r-xl); padding: 10px 16px;
  box-shadow: 0 8px 32px oklch(9% 0.006 62deg / 0.6);
  animation: saveBarIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  z-index: 200;
}
@keyframes saveBarIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.save-bar-msg { font-size: 12.5px; color: var(--t2); }
.save-bar-msg strong { color: var(--t1); font-weight: 620; }

@media (max-width: 1024px) {
  :root { --settings-nav-w: 170px; }
}
@media (max-width: 768px) {
  .settings-nav { display: none; }
  .settings-content { padding: 20px 16px 48px; max-width: 100%; }
  .s-field { grid-template-columns: 1fr; }
  .plan-features { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   UI/UX improvements
   ══════════════════════════════════════════════════════ */

/* SVG icon sizing in nav */
.nav-ico { display: flex; align-items: center; justify-content: center; }
.nav-ico svg { display: block; flex-shrink: 0; }


/* Mobile hamburger — hidden on desktop, shown on mobile */
.hamburger-btn { display: none !important; }
@media (max-width: 768px) {
  .hamburger-btn { display: flex !important; }
}

/* Sidebar mobile overlay */
.sidebar-overlay {
  position: fixed; inset: 0;
  background: oklch(6% 0.005 62deg / 0.55);
  z-index: 99; cursor: pointer;
}

/* Logout button reset — nav-item is a div style, needs button reset */
.nav-logout {
  background: none; border: none; width: 100%;
  text-align: left; cursor: pointer; font-family: var(--f); color: var(--t2);
}
.nav-logout:hover { background: var(--bg-hover); color: var(--t1); }

/* Touch & keyboard accessible card overlays */
.witem:focus-within .witem-overlay { opacity: 1; pointer-events: auto; }
.ocard:focus-within .ocard-overlay  { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .witem-overlay,
  .ocard-overlay {
    opacity: 1;
    pointer-events: auto;
    background: oklch(9% 0.007 62deg / 0.75);
  }
}

/* 375px small-phone breakpoint */
@media (max-width: 375px) {
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar-actions .avatar { display: none; }
  .searchbar { display: none; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .cats { grid-template-columns: 1fr; }
  .cat.wide { grid-column: span 1; }
  .hero-grid { gap: 12px; }
}

/* ═══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */

.modal-backdrop {
  position: fixed; inset: 0;
  background: oklch(6% 0.005 62deg / 0.72);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.modal {
  background: var(--bg-card); border: 1px solid var(--border-hi);
  border-radius: var(--r-2xl);
  width: 100%; max-width: 440px;
  box-shadow: 0 24px 64px oklch(5% 0.005 62deg / 0.7);
  animation: modalIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 15px; font-weight: 650; color: var(--t1);
  letter-spacing: -0.015em; margin: 0;
}

.modal-body { padding: 20px; }

/* ─── Upload zone ───────────────────────────────────── */
.upload-zone {
  border: 1.5px dashed var(--border-hi);
  border-radius: var(--r-xl);
  padding: 32px 20px;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  text-align: center;
  transition: border-color 140ms, background 140ms;
}

.upload-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-low);
}

.upload-zone-icon {
  width: 48px; height: 48px;
  background: var(--bg-raised);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--t2); margin-bottom: 4px;
}

.upload-zone-text {
  font-size: 13.5px; font-weight: 580; color: var(--t1);
}

.upload-zone-sub { font-size: 12px; color: var(--t3); }

.upload-zone-hint {
  font-size: 11px; color: var(--t3);
  margin-top: 4px;
}

.upload-input {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ─── Upload progress ───────────────────────────────── */
.upload-progress {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  padding: 16px 0; text-align: center;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.upload-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--accent-low);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.upload-progress-text { font-size: 14px; font-weight: 620; color: var(--t1); }
.upload-progress-sub  { font-size: 12.5px; color: var(--t2); line-height: 1.5; max-width: 300px; }

/* ─── Wardrobe placeholder / season chips ───────────── */
.witem-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; padding: 20px; color: var(--t3);
  width: 100%; height: 100%;
}

.placeholder-label { font-size: 11px; font-weight: 500; }

.witem-seasons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }

.season-chip {
  font-size: 10px; font-weight: 540; padding: 2px 7px;
  border-radius: 100px; color: var(--sky); background: var(--sky-low);
}

/* ─── Unprocessed chip action button ────────────────── */
.chip-action {
  background: none; border: none; color: inherit; font-size: inherit;
  font-family: var(--f); font-weight: 650; cursor: pointer;
  padding: 0 0 0 6px; text-decoration: underline;
}
.chip-action:disabled { opacity: 0.6; cursor: not-allowed; }

/* ─── Password toggle ───────────────────────────────── */
.auth-input-wrap { position: relative; }

.auth-pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--t3); cursor: pointer;
  padding: 12px 10px; display: flex; align-items: center;
  transition: color 140ms;
}
.auth-pw-toggle:hover { color: var(--t2); }

/* ─── Button element resets for semantic replacements ── */
.snav-item {
  background: none; border: none; width: 100%;
  text-align: left; font-family: var(--f);
}

.style-chip {
  background: var(--bg-raised); font-family: var(--f);
}

.ctx-link {
  background: none; border: none; font-family: var(--f); cursor: pointer;
}

.panel-link, .sec-link, .strip-link, .chart-link {
  background: none; border: none; font-family: var(--f); cursor: pointer; padding: 0;
}

/* ─── Settings mobile nav ───────────────────────────── */
.settings-nav-mobile {
  display: none;
  overflow-x: auto; padding: 12px 16px;
  gap: 6px; border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.settings-nav-mobile::-webkit-scrollbar { height: 0; }

.snav-mobile-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 100px; white-space: nowrap;
  font-size: 12.5px; font-weight: 500; color: var(--t2);
  background: none; border: 1px solid var(--border);
  cursor: pointer; font-family: var(--f);
  transition: background 140ms, color 140ms, border-color 140ms;
  flex-shrink: 0;
}
.snav-mobile-pill:hover { background: var(--bg-hover); color: var(--t1); border-color: var(--border-hi); }
.snav-mobile-pill.active { background: var(--accent-low); color: var(--accent); border-color: var(--accent-mid); }

@media (max-width: 768px) {
  .settings-nav-mobile { display: flex; }
}

/* ─── Save-bar safe-area aware ──────────────────────── */
.save-bar {
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
}

/* ─── Inputs: prevent iOS auto-zoom (16px on mobile only) ── */
@media (max-width: 768px) {
  .auth-input, .s-input, .s-select, .chat-textarea, .searchbar input { font-size: 16px; }
}

/* ─── Wear dots — fix missing class ────────────────── */
.wear-dots { display: flex; align-items: center; gap: 3px; }

/* ═══════════════════════════════════════════════════════
   ADAPT — mobile search, analytics mobile, AI context drawer
   ═══════════════════════════════════════════════════════ */

/* ─── Mobile search row (Wardrobe / Home) ───────────── */
.search-btn-mobile { display: none !important; }
.mobile-search-row { display: none; }

@media (max-width: 768px) {
  .search-btn-mobile { display: flex !important; }

  .mobile-search-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky; top: var(--topbar-h); z-index: 40;
  }

  .mobile-search-icon { color: var(--t3); flex-shrink: 0; }

  .mobile-search-input {
    flex: 1; background: var(--bg-raised);
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 9px 12px; font-family: var(--f);
    font-size: 16px; color: var(--t1); outline: none;
    transition: border-color 140ms;
  }
  .mobile-search-input:focus { border-color: var(--accent); }
  .mobile-search-input::placeholder { color: var(--t3); }

  .mobile-search-cancel {
    background: none; border: none; font-family: var(--f);
    font-size: 13px; font-weight: 500; color: var(--accent);
    cursor: pointer; white-space: nowrap; padding: 4px 0; flex-shrink: 0;
  }
}

/* ─── Analytics mobile breakpoints ─────────────────── */
@media (max-width: 1024px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
  .date-seg { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dseg { flex-shrink: 0; padding: 6px 10px; font-size: 11.5px; }
  .page-head-right { overflow-x: auto; }
  .hint-pill { padding: 10px 14px; }
  .occ-chip  { padding: 10px 14px; }
}

/* ─── AI Stylist: context panel as mobile drawer ─────── */
.ctx-toggle-btn { display: none; }

@media (max-width: 1024px) {
  .ctx-toggle-btn { display: flex; }

  .context-panel.mobile-open {
    display: flex;
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: min(320px, 90vw);
    z-index: 200;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    flex-direction: column;
    box-shadow: -8px 0 32px oklch(6% 0.005 62deg / 0.5);
    animation: slideFromRight 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes slideFromRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.ctx-mobile-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 199;
  background: oklch(6% 0.005 62deg / 0.55);
  cursor: pointer;
  animation: fadeIn 180ms ease both;
}

@media (max-width: 1024px) {
  .ctx-mobile-backdrop { display: block; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
   LIGHT MODE  (html.theme-light class — set by ThemeService)

   Physical scene: a fashion-conscious person on a bright
   iPad at a sun-washed dressing table — warm parchment,
   wood surfaces, afternoon light. The terracotta accent
   is unchanged; it belongs equally to both scenes.

   Class applied by js/theme.js from localStorage value
   "sn-theme": "light" | "dark" | "system".
   ═══════════════════════════════════════════════════════ */

/* ── Heatmap legend class colours (replace inline styles) */
.hm-lc             { background: var(--border); }
.hm-lc-1           { background: oklch(28% 0.06 42deg); }
.hm-lc-2           { background: oklch(40% 0.09 40deg); }
.hm-lc-3           { background: oklch(52% 0.11 38deg); }
.hm-lc-4           { background: var(--accent); }

/* ── Design tokens ─────────────────────────────────────── */
html.theme-light {
  /* Surfaces */
  --bg:           oklch(96.5% 0.007 75deg);  /* warm parchment */
  --bg-raised:    oklch(91%   0.010 72deg);  /* warm stone — sidebar, panels */
  --bg-card:      oklch(99%   0.003 78deg);  /* near-white card */
  --bg-hover:     oklch(89%   0.012 70deg);  /* hover */
  --bg-active:    oklch(87%   0.016 68deg);  /* pressed / selected */

  /* Accent tones (--accent and --accent-dim are unchanged) */
  --accent-mid:   oklch(88%   0.040 42deg);
  --accent-low:   oklch(95%   0.022 52deg);

  /* Semantic — darkened ~18–20L for contrast on light surfaces */
  --sage:         oklch(44%   0.10  152deg);
  --sage-low:     oklch(92%   0.035 155deg);

  --sky:          oklch(46%   0.09  228deg);
  --sky-low:      oklch(92%   0.028 228deg);

  --caution:      oklch(48%   0.12  65deg);
  --caution-low:  oklch(94%   0.030 65deg);

  --danger:       oklch(46%   0.14  25deg);
  --danger-low:   oklch(96%   0.030 25deg);
  --danger-mid:   oklch(84%   0.055 25deg);

  /* Typography */
  --t1: oklch(18%  0.008 68deg);
  --t2: oklch(40%  0.012 65deg);
  --t3: oklch(55%  0.008 65deg);

  /* Borders */
  --border:    oklch(86%  0.010 72deg);
  --border-hi: oklch(78%  0.014 70deg);

  /* On-accent inverts to near-white */
  --on-accent: oklch(99%  0.003 78deg);

  /* Scrollbar hover (token-driven to bypass CSS scoping limit) */
  --scrollbar-hover: oklch(70% 0.013 70deg);

  /* AI Stylist extras */
  --lavender: oklch(48%   0.10  290deg);
  --lav-low:  oklch(93%   0.025 290deg);
}

/* ── Toggle thumb — bright white on light bg ─────────── */
html.theme-light .toggle-thumb { background: oklch(99% 0.003 78deg); }

/* ── Select option bg (browser-rendered dropdown) ─────── */
html.theme-light .s-select option {
  background: oklch(99% 0.003 78deg);
  color: oklch(18% 0.008 68deg);
}

/* ── Outfit card ambient glow ────────────────────────── */
html.theme-light .outfit-card::after {
  background: radial-gradient(circle, oklch(90% 0.032 52deg) 0%, transparent 68%);
}

/* ── Hero outfit — featured item highlight ───────────── */
html.theme-light .item-card.hero-item {
  background: oklch(93% 0.028 52deg);
  border-color: oklch(78% 0.08 44deg);
}

/* ── Category tiles — featured wide tile ────────────── */
html.theme-light .cat.wide {
  background: oklch(93% 0.024 54deg);
  border-color: oklch(80% 0.07 46deg);
}
html.theme-light .cat.wide:hover {
  background: oklch(90% 0.028 52deg);
  border-color: oklch(74% 0.09 42deg);
}

/* ── Wardrobe item visual — gradient depth overlay ───── */
html.theme-light .witem-visual::before {
  background: linear-gradient(
    to bottom,
    oklch(12% 0.008 60deg / 0.08) 0%,
    transparent 30%,
    transparent 60%,
    oklch(12% 0.008 60deg / 0.18) 100%
  );
}

/* ── Item badges (wardrobe cards) — light frosted ────── */
html.theme-light .badge-ai   { background: oklch(97% 0.004 78deg / 0.92); color: var(--accent);  }
html.theme-light .badge-worn { background: oklch(97% 0.004 78deg / 0.92); color: var(--sage);    }
html.theme-light .badge-slp  { background: oklch(97% 0.004 78deg / 0.92); color: var(--caution); }
html.theme-light .badge-num  { background: oklch(97% 0.004 78deg / 0.92); color: var(--t2);      }

/* ── Outfit card badges ──────────────────────────────── */
html.theme-light .obadge-ai     { background: oklch(97% 0.004 78deg / 0.92); color: var(--accent);  }
html.theme-light .obadge-pin    { background: oklch(97% 0.004 78deg / 0.92); color: var(--caution); }
html.theme-light .obadge-season { background: oklch(97% 0.004 78deg / 0.92); color: var(--t2);      }
html.theme-light .match-score   { background: oklch(97% 0.004 78deg / 0.92); color: var(--accent);  }
html.theme-light .match-score.sage { color: var(--sage); }

/* ── Card hover overlays — dark for button legibility ── */
html.theme-light .witem-overlay,
html.theme-light .ocard-overlay { background: oklch(15% 0.010 60deg / 0.82); }

/* ── Overlay ghost buttons ───────────────────────────── */
html.theme-light .ov-btn.ghost {
  background: oklch(93% 0.008 72deg);
  color: var(--t1);
  border-color: var(--border-hi);
}
html.theme-light .ov-btn.ghost:hover { background: oklch(89% 0.010 70deg); }

html.theme-light .ocard-action.secondary {
  background: oklch(93% 0.008 72deg);
  color: var(--t1);
  border-color: var(--border-hi);
}
html.theme-light .ocard-action.secondary:hover { background: oklch(89% 0.010 70deg); }

/* ── Outfit card slot backgrounds ───────────────────── */
html.theme-light .ocard-slot:nth-child(1) { background: oklch(93% 0.012 70deg); }
html.theme-light .ocard-slot:nth-child(2) { background: oklch(91% 0.010 74deg); }
html.theme-light .ocard-slot:nth-child(3) { background: oklch(95% 0.008 68deg); }
html.theme-light .ocard-slot:nth-child(4) { background: oklch(90% 0.013 72deg); }
html.theme-light .ocard-slot + .ocard-slot { border-left-color: oklch(80% 0.010 72deg / 0.6); }

/* ── AI suggestion slots ─────────────────────────────── */
html.theme-light .aos-slot:nth-child(1) { background: oklch(91% 0.015 68deg); }
html.theme-light .aos-slot:nth-child(2) { background: oklch(94% 0.008 75deg); }
html.theme-light .aos-slot:nth-child(3) { background: oklch(92% 0.012 72deg); }
html.theme-light .aos-slot:nth-child(4) { background: oklch(89% 0.014 68deg); }
html.theme-light .aos-slot + .aos-slot { border-left-color: oklch(80% 0.010 72deg / 0.5); }

/* ── Pinned outfit slots ─────────────────────────────── */
html.theme-light .pin-slot + .pin-slot { border-left-color: oklch(80% 0.010 72deg / 0.5); }

/* ── Heatmap cells ───────────────────────────────────── */
html.theme-light .hm-cell.w1 { background: oklch(88% 0.06 44deg); }
html.theme-light .hm-cell.w2 { background: oklch(78% 0.09 41deg); }
html.theme-light .hm-cell.w3 { background: oklch(68% 0.11 39deg); }

/* ── Heatmap legend cells ─────────────────────────────  */
html.theme-light .hm-lc-1 { background: oklch(88% 0.06 44deg); }
html.theme-light .hm-lc-2 { background: oklch(78% 0.09 41deg); }
html.theme-light .hm-lc-3 { background: oklch(68% 0.11 39deg); }

/* ── Backdrop overlays ───────────────────────────────── */
html.theme-light .modal-backdrop           { background: oklch(15% 0.010 60deg / 0.60); }
html.theme-light .sidebar-overlay,
html.theme-light .ctx-mobile-backdrop      { background: oklch(15% 0.010 60deg / 0.55); }

/* ── Shadows ─────────────────────────────────────────── */
html.theme-light .modal            { box-shadow: 0 24px 64px oklch(18% 0.008 68deg / 0.20); }
html.theme-light .save-bar         { box-shadow: 0 8px 32px  oklch(18% 0.008 68deg / 0.16); }
html.theme-light .ocard:hover      { box-shadow: 0 8px 24px  oklch(18% 0.008 68deg / 0.10); }
html.theme-light .context-panel.mobile-open {
  box-shadow: -8px 0 32px oklch(18% 0.008 68deg / 0.16);
}

/* ── Mood swatch active checkmark ────────────────────── */
html.theme-light .mood-swatch.active::after {
  background: oklch(15% 0.010 60deg / 0.42);
  color: oklch(97% 0.003 78deg);
}

/* ── Auth error ──────────────────────────────────────── */
html.theme-light .auth-error {
  color: oklch(40% 0.14 22deg);
  background: oklch(97% 0.030 22deg);
  border-color: oklch(80% 0.07 22deg);
}

/* ── Danger zone ─────────────────────────────────────── */
html.theme-light .danger-row-sub { color: oklch(50% 0.08 25deg); }
html.theme-light .btn-danger:hover {
  background: oklch(93% 0.042 25deg);
  border-color: oklch(76% 0.08 25deg);
}

/* ── Touch / no-hover: always-visible overlay ────────── */
@media (hover: none) {
  html.theme-light .witem-overlay,
  html.theme-light .ocard-overlay { background: oklch(15% 0.010 60deg / 0.72); }
}

/* ─── AI Outfit Suggestion Cards ─────────────────────── */
.outfit-suggestion {
  margin-top: 8px;
  max-width: 100%;
}

.os-items {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.os-items::-webkit-scrollbar { display: none; }

.os-card {
  flex: 0 0 auto;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  min-width: 96px;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s, background 0.15s;
}
.os-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-hi);
}

.os-icon { color: var(--accent); line-height: 1; }

.os-img {
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 2px;
}
.os-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.os-type {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--t1);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.os-color {
  font-size: 10.5px;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.os-footer {
  margin-top: 9px;
  display: flex;
  justify-content: flex-end;
}

.os-save-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--t3);
  font-size: 11px;
  font-weight: var(--w-medium);
  padding: 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.os-save-btn:hover {
  border-color: var(--accent-mid);
  color: var(--accent);
  background: var(--accent-low);
}
.os-save-btn.saved {
  border-color: var(--sage);
  color: var(--sage);
  background: var(--sage-low);
  pointer-events: none;
}

/* light theme overrides */
html.theme-light .os-card {
  background: oklch(97% 0.004 75deg);
  border-color: oklch(88% 0.008 68deg);
}
html.theme-light .os-card:hover {
  background: oklch(94% 0.006 75deg);
  border-color: oklch(80% 0.010 68deg);
}


/* ─── Upload toasts ─────────────────────────────────── */
.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px oklch(8% 0.01 60deg / 0.45);
  animation: toastIn 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.toast-summary { background: oklch(20% 0.012 64deg); }

.toast-icon {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  margin-top: 1px;
}
.toast-ok    .toast-icon { background: oklch(64% 0.10 152deg / 0.16); color: var(--sage); }
.toast-error .toast-icon { background: oklch(62% 0.14 25deg / 0.16);  color: var(--danger); }
.toast-busy  .toast-icon { background: oklch(67% 0.148 38deg / 0.14); color: var(--accent); }

.toast-spinner {
  width: 13px; height: 13px;
  border: 2px solid oklch(67% 0.148 38deg / 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.toast-body { flex: 1; min-width: 0; }

.toast-title {
  font-size: 12.5px; font-weight: 600; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.toast-sub { font-size: 11.5px; color: var(--t2); margin-top: 3px; }
.toast-sub--error { color: var(--danger); white-space: normal; line-height: 1.45; }

.toast-bar {
  height: 4px;
  background: oklch(30% 0.010 65deg);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 7px;
}

.toast-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 200ms ease;
}

/* Server-side work has no measurable percentage, so sweep instead of filling. */
.toast-bar--indeterminate .toast-bar-fill {
  width: 40%;
  animation: toastSweep 1.1s ease-in-out infinite;
}

@keyframes toastSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.toast-actions { display: flex; gap: 7px; margin-top: 9px; }

.toast-btn {
  font-family: var(--f);
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: none; cursor: pointer;
  background: var(--accent); color: oklch(16% 0.02 40deg);
}
.toast-btn.ghost {
  background: transparent; color: var(--t2);
  border: 1px solid var(--border);
}

.toast-close {
  flex: none;
  background: none; border: none; cursor: pointer;
  color: var(--t3); padding: 2px;
  border-radius: 4px;
}
.toast-close:hover { color: var(--t1); }

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast-spinner { animation-duration: 1.6s; }
  .toast-bar--indeterminate .toast-bar-fill { animation: none; width: 100%; opacity: 0.5; }
  .toast-bar-fill { transition: none; }
}

@media (max-width: 640px) {
  .toast-stack { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

html.theme-light .toast {
  box-shadow: 0 12px 32px oklch(18% 0.008 68deg / 0.16);
}
html.theme-light .toast-summary { background: oklch(96% 0.004 78deg); }
html.theme-light .toast-bar     { background: oklch(88% 0.006 72deg); }

/* ─── Upload zone extras ────────────────────────────── */
.upload-zone-error {
  margin-top: 12px;
  font-size: 12px;
  color: var(--danger);
  line-height: 1.45;
}

.upload-zone-note {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--t3);
  text-align: center;
  line-height: 1.5;
}

/* ─── Item detail modal ─────────────────────────────── */
.modal--detail { max-width: 700px; width: calc(100vw - 32px); }

.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.detail-visual {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 14px;
  background: oklch(21% 0.010 64deg);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

/* contain, not cover: the grid card crops square, this shows the whole garment */
.detail-visual img {
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
  display: block;
}

.detail-facts { display: flex; flex-direction: column; min-width: 0; }

.detail-warning {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 11px;
  margin-bottom: 14px;
  background: oklch(72% 0.12 65deg / 0.12);
  border: 1px solid oklch(72% 0.12 65deg / 0.25);
  border-radius: var(--r-sm);
  color: var(--caution);
  font-size: 11.5px;
  line-height: 1.5;
}
.detail-warning strong { display: block; color: var(--t1); font-size: 12px; }

.detail-list { margin: 0; display: flex; flex-direction: column; gap: 1px; }
.detail-list > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.detail-list dt { font-size: 11.5px; color: var(--t3); }
.detail-list dd { margin: 0; font-size: 12.5px; color: var(--t1); word-break: break-word; }
.detail-empty { color: var(--t3); }
.detail-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.detail-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: auto; padding-top: 16px;
}

@media (max-width: 640px) {
  .detail-body { grid-template-columns: minmax(0, 1fr); }
  .detail-visual { min-height: 200px; }
  .detail-visual img { max-height: 240px; }
}

html.theme-light .detail-visual { background: oklch(96% 0.004 78deg); }

/* ─── Tagging failure surfacing ─────────────────────── */
.badge-untagged {
  background: oklch(12% 0.006 62deg / 0.88);
  color: var(--danger);
}

/* A failed cut-out still leaves a usable photo; a failed tag leaves the item
   invisible to filters and the stylist, so it reads as the more severe state. */
.detail-warning--danger {
  background: oklch(62% 0.14 25deg / 0.12);
  border-color: oklch(62% 0.14 25deg / 0.28);
  color: var(--danger);
}

.detail-warning + .detail-warning { margin-top: -6px; }

html.theme-light .badge-untagged {
  background: oklch(97% 0.004 78deg / 0.92);
  color: var(--danger);
}

/* ─── Dashboard: real-data panels ───────────────────── */
.hero-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 28px 16px 8px; text-align: center;
}
.hero-empty-ico {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-low); color: var(--accent);
}
.hero-empty-text {
  font-size: 12.5px; color: var(--t2); line-height: 1.55; max-width: 420px;
}

.health-rows { display: flex; flex-direction: column; gap: 1px; }
.health-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.health-row:last-child { border-bottom: none; }
.health-lbl { font-size: 12px; color: var(--t2); }
.health-val { font-size: 13px; font-weight: 620; color: var(--t1); }
.health-val.warn { color: var(--caution); }
.health-ok {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: 11.5px; color: var(--sage);
}

.panel-empty { font-size: 12px; color: var(--t3); padding: 10px 0; line-height: 1.5; }

.breakdown-row {
  display: grid; grid-template-columns: 84px 1fr 28px;
  align-items: center; gap: 10px;
  padding: 7px 0; text-decoration: none;
}
.breakdown-row:hover .breakdown-name { color: var(--t1); }
.breakdown-name {
  font-size: 12px; color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 120ms;
}
.breakdown-name.dim { color: var(--t3); }
.breakdown-track {
  height: 6px; border-radius: 999px;
  background: oklch(30% 0.010 65deg); overflow: hidden;
}
.breakdown-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent); transition: width 220ms ease;
}
.breakdown-fill.dim { background: var(--t3); }
.breakdown-val {
  font-size: 12px; font-weight: 620; color: var(--t1); text-align: right;
}

html.theme-light .breakdown-track { background: oklch(88% 0.006 72deg); }

/* ─── Recently worn ─────────────────────────────────── */
.recent-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: 220px; min-height: 120px;
  border-style: dashed; cursor: pointer;
  background: none; color: var(--t3);
  font-family: var(--f); font-size: 11.5px;
}
.recent-empty:hover { color: var(--t1); border-color: var(--accent); }

.recent-thumbs {
  display: flex; gap: 4px; align-items: center;
  padding: 10px 10px 0;
}
.recent-thumbs img,
.recent-thumb-blank {
  width: 40px; height: 48px; border-radius: 6px;
  object-fit: cover; background: var(--bg-hover);
  display: grid; place-items: center; color: var(--t3);
  flex: none;
}
.recent-more { font-size: 11px; color: var(--t3); }

.recent-meta { padding: 8px 10px 10px; }
.recent-name {
  font-size: 12px; font-weight: 600; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-date { font-size: 11px; color: var(--t3); margin-top: 2px; }

/* ─── Wear picker ───────────────────────────────────── */
.modal--picker { max-width: 620px; width: calc(100vw - 32px); }

.picker-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.picker-count { font-size: 11.5px; color: var(--t2); }

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  max-height: 320px; overflow-y: auto;
  padding: 2px;
}

.picker-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 5px; cursor: pointer;
  background: var(--bg-card);
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--f);
  transition: border-color 120ms, background 120ms;
}
.picker-item:hover { border-color: var(--t3); }
.picker-item.on { border-color: var(--accent); background: var(--accent-low); }

.picker-thumb {
  width: 100%; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 5px; background: var(--bg-hover);
  overflow: hidden; color: var(--t3);
}
.picker-thumb img { width: 100%; height: 100%; object-fit: cover; }

.picker-name {
  font-size: 10.5px; color: var(--t2);
  width: 100%; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.picker-item.on .picker-name { color: var(--t1); }

.picker-save {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.picker-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--t2); cursor: pointer;
}
.picker-error { margin-top: 10px; font-size: 12px; color: var(--danger); }

/* ─── Daily pick ────────────────────────────────────── */
.item-thumb {
  width: 100%; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 7px; margin-bottom: 8px;
  background: var(--bg-hover); color: var(--t3);
  overflow: hidden;
}
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.outfit-rationale {
  margin: 14px 0 0;
  font-size: 12.5px; line-height: 1.6; color: var(--t2);
  padding: 12px 14px;
  background: var(--bg-hover);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--accent);
}

.outfit-missing {
  margin: 10px 0 0;
  font-size: 11.5px; color: var(--caution);
}

/* Where the weather reading came from — a fallback city must not read as the user's own. */
.wx-source {
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--t3);
}

/* Shown when the API is unreachable, so zeroes are not mistaken for real data. */
.offline-banner {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; margin-bottom: 18px;
  background: oklch(62% 0.14 25deg / 0.10);
  border: 1px solid oklch(62% 0.14 25deg / 0.25);
  border-radius: var(--r-md);
  color: var(--danger);
  font-size: 12px; line-height: 1.5;
}
.offline-banner strong { display: block; color: var(--t1); font-size: 12.5px; }
.offline-banner > div { flex: 1; }

/* ─── Outfits page: real item thumbnails ────────────── */
.ocard-slot img,
.pin-slot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ocard-slot, .pin-slot { overflow: hidden; display: grid; place-items: center; }

.ocard-missing {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--caution);
}

.picker-occasions { display: flex; flex-wrap: wrap; gap: 6px; }

.occasion-pill {
  font-family: var(--f);
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--t2);
  border: 1px solid var(--border);
  transition: border-color 120ms, color 120ms, background 120ms;
}
.occasion-pill:hover { color: var(--t1); }
.occasion-pill.on {
  background: var(--accent-low);
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── Analytics: owned vs worn ──────────────────────── */
.balance-list { display: flex; flex-direction: column; gap: 14px; }
.balance-row { display: flex; flex-direction: column; gap: 5px; }

.balance-head { display: flex; justify-content: space-between; align-items: baseline; }
.balance-name { font-size: 12.5px; font-weight: 600; color: var(--t1); }
.balance-delta { font-size: 12px; font-weight: 620; }
.balance-delta .pct { font-size: 10px; font-weight: 500; }
.balance-delta.pos { color: var(--sage); }
.balance-delta.neg { color: var(--caution); }
.balance-delta.neu { color: var(--t3); }

/* Two stacked bars rather than one: the comparison is the whole point. */
.balance-bars { display: flex; flex-direction: column; gap: 3px; }
.balance-bar { height: 6px; border-radius: 999px; min-width: 2px; transition: width 240ms ease; }
.balance-bar.owned { background: oklch(45% 0.04 250deg); }
.balance-bar.worn  { background: var(--accent); }

.balance-meta { font-size: 10.5px; color: var(--t3); }

.balance-legend {
  display: flex; gap: 14px; margin-top: 14px;
  font-size: 10.5px; color: var(--t3);
}
.balance-legend .swatch {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 5px;
}
.balance-legend .swatch.owned { background: oklch(45% 0.04 250deg); }
.balance-legend .swatch.worn  { background: var(--accent); }

/* ─── Analytics: heat strip ─────────────────────────── */
.heat-strip {
  display: flex; flex-wrap: wrap; gap: 3px;
  padding: 6px 0;
}
.heat-cell {
  width: 11px; height: 11px; border-radius: 2px;
  background: oklch(26% 0.008 65deg);
}
.heat-1 { background: oklch(67% 0.148 38deg / 0.35); }
.heat-2 { background: oklch(67% 0.148 38deg / 0.65); }
.heat-3 { background: var(--accent); }

/* ─── Analytics: item usage lists ───────────────────── */
.usage-list { display: flex; flex-direction: column; }
.usage-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.usage-row:last-child { border-bottom: none; }

.usage-thumb {
  width: 34px; height: 40px; flex: none;
  border-radius: 5px; overflow: hidden;
  background: var(--bg-hover); color: var(--t3);
  display: grid; place-items: center;
}
.usage-thumb img { width: 100%; height: 100%; object-fit: cover; }

.usage-info { flex: 1; min-width: 0; }
.usage-name {
  font-size: 12.5px; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usage-meta { font-size: 10.5px; color: var(--t3); }
.usage-count { font-size: 12.5px; font-weight: 620; color: var(--accent); }
.usage-count.dim { color: var(--t3); font-weight: 500; }

html.theme-light .heat-cell { background: oklch(90% 0.005 72deg); }
html.theme-light .balance-bar.owned { background: oklch(72% 0.03 250deg); }
html.theme-light .balance-legend .swatch.owned { background: oklch(72% 0.03 250deg); }

/* Confirmation after a successful settings save. */
.save-bar.saved {
  border-color: oklch(64% 0.10 152deg / 0.35);
  background: oklch(64% 0.10 152deg / 0.12);
}
.save-bar.saved .save-bar-msg {
  display: flex; align-items: center; gap: 7px; color: var(--sage);
}

/* ─── Settings: read-only fields and location ───────── */
.s-readonly { font-size: 12.5px; color: var(--t2); }

.s-location { display: flex; flex-direction: column; gap: 7px; }
.s-location-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.s-location-status { font-size: 10.5px; color: var(--t3); flex: 1; min-width: 140px; }

/* Rows for features that do not exist yet: visible, clearly inert. */
.s-row.soon { opacity: 0.55; }
.s-row.soon .s-row-label { display: flex; align-items: center; gap: 7px; }

/* Shared by the sign-in and sign-up forms. */
.auth-validation {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: oklch(68% 0.15 22deg);
}
.auth-hint {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--t3);
}

/* ─── Getting started checklist ─────────────────────── */
.onboard-card {
  padding: 16px 18px;
  margin-bottom: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.onboard-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.onboard-title { font-size: 13px; font-weight: 640; color: var(--t1); }
.onboard-sub { font-size: 11px; color: var(--t3); margin-top: 2px; }

.onboard-progress {
  flex: 1; max-width: 160px; height: 5px;
  background: oklch(30% 0.010 65deg); border-radius: 999px; overflow: hidden;
}
.onboard-progress-fill {
  height: 100%; background: var(--accent);
  border-radius: 999px; transition: width 260ms ease;
}

.onboard-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.onboard-step {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.onboard-step:last-child { border-bottom: none; }

.onboard-check {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--border); color: var(--bg);
}
.onboard-step.done .onboard-check {
  background: var(--sage); border-color: var(--sage);
}

.onboard-step-body { flex: 1; min-width: 0; }
.onboard-step-title { font-size: 12.5px; color: var(--t1); }
.onboard-step.done .onboard-step-title { color: var(--t3); text-decoration: line-through; }
.onboard-step-sub { font-size: 11px; color: var(--t3); margin-top: 2px; line-height: 1.45; }

.onboard-action {
  flex: none; font-family: var(--f);
  font-size: 11.5px; font-weight: 600;
  padding: 5px 12px; border-radius: var(--r-sm);
  background: var(--accent-low); color: var(--accent);
  border: none; cursor: pointer; text-decoration: none;
}
.onboard-action:hover { background: var(--accent); color: oklch(16% 0.02 40deg); }

html.theme-light .onboard-progress { background: oklch(88% 0.006 72deg); }