/* ============================================================
   Raccoon — personal life dashboard
   Dark, minimal theme · green accent headings
   ============================================================ */

:root {
  /* cool-neutral dark surfaces */
  --bg:        oklch(0.165 0.006 165);
  --surface:   oklch(0.205 0.007 165);
  --surface-2: oklch(0.245 0.008 165);
  --surface-3: oklch(0.285 0.009 165);
  --border:    oklch(0.30 0.008 165);
  --border-soft: oklch(0.255 0.008 165);

  --text:   oklch(0.95 0.004 165);
  --muted:  oklch(0.70 0.010 165);
  --faint:  oklch(0.55 0.010 165);

  /* accent (tweakable) — forest green */
  --accent:      oklch(0.66 0.115 150);
  --accent-dim:  oklch(0.60 0.10 150);
  --accent-ink:  oklch(0.96 0.02 150);
  --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
  --accent-line: color-mix(in oklch, var(--accent) 28%, transparent);

  /* calendar day categories */
  --cal-off:    oklch(0.70 0.115 150);
  --cal-work:   oklch(0.70 0.085 215);
  --cal-office: oklch(0.64 0.155 30);
  --cal-ill:    oklch(0.72 0.16 55);
  --cal-bank:   oklch(0.50 0.10 155);
  --cal-half:   oklch(0.70 0.10 185);

  --sidebar-w: 256px;
  --radius:   16px;
  --radius-sm: 11px;
  --gap: 20px;

  --shadow: 0 1px 0 oklch(1 0 0 / 0.03) inset, 0 8px 24px -16px oklch(0 0 0 / 0.7);

  --ui: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: dark;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-soft); }

/* thin custom scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   App shell
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
/* collapse swaps the grid column instantly (animating the track stalls the
   grid layout on Chromium); content fades via .sidebar__nav below */
.app:has(.sidebar.is-collapsed) { --sidebar-w: 72px; }
.app:has(.sidebar.is-hidden) { --sidebar-w: 0px; }

/* ---------- Cover banner (full-width, above sidebar + content) ---------- */
.page-banner {
  position: relative;
  width: 100%;
  height: 190px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  z-index: 1;
}
.page-banner image-slot { display: block; width: 100%; height: 100%; }
.page-banner__avatar {
  position: absolute;
  left: calc(var(--sidebar-w) + 32px);
  bottom: -26px;
  width: 60px; height: 60px;
  border-radius: 17px;
  display: grid; place-items: center;
  font-size: 32px; line-height: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px -10px oklch(0 0 0 / 0.75);
  z-index: 5;
}
.app.has-cover .content { padding-top: 50px; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--border-soft);
  overflow: visible;
}
/* ---- edge handle: click the sidebar's right edge to collapse / expand ---- */
.sidebar__edge {
  position: absolute; top: 0; right: 0; z-index: 6;
  width: 12px; height: 100%;
  border: 0; margin: 0; padding: 0; background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sidebar__edge-grip {
  position: absolute;
  width: 3px; height: 34px; border-radius: 3px; background: transparent;
  transition: background 0.15s;
}
.sidebar__edge:hover .sidebar__edge-grip { background: var(--border); }
.sidebar__edge:active .sidebar__edge-grip { background: var(--accent); }
/* visible round chevron so the collapse control is discoverable */
.sidebar__edge-btn {
  position: absolute; top: 50%; right: -13px; z-index: 7;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); box-shadow: var(--shadow);
  transform: translateY(-50%);
  transition: color 0.14s, background 0.14s, border-color 0.14s;
  pointer-events: auto;
}
.sidebar__edge:hover .sidebar__edge-btn { background: var(--surface-3); color: var(--text); border-color: var(--accent); }
/* fully-hidden state: hide all nav content, keep only the re-open handle
   which floats just past the (zero-width) left edge of the screen */
.sidebar.is-hidden { border-right-color: transparent; }
.sidebar.is-hidden > .sidebar__nav,
.sidebar.is-hidden > .sidebar__foot { opacity: 0; pointer-events: none; visibility: hidden; }
.sidebar.is-hidden .sidebar__edge { width: 30px; right: -30px; }
.sidebar.is-hidden .sidebar__edge-btn { right: 2px; }
/* ---- collapse-to-icons setting toggle (only while adjusting layout) ---- */
.rail-mode-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; margin-bottom: 4px;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--ui); font-size: 12.5px; color: var(--muted);
  border-radius: var(--radius-sm);
}
.rail-mode-toggle:hover { background: var(--surface); color: var(--text); }
.rail-mode-toggle__txt { flex: 1; text-align: left; }
.rail-mode-toggle__sw {
  flex: none; width: 32px; height: 18px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border);
  position: relative; transition: background 0.16s, border-color 0.16s;
}
.rail-mode-toggle__knob {
  position: absolute; top: 1px; left: 1px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--faint); transition: transform 0.16s, background 0.16s;
}
.rail-mode-toggle.is-on .rail-mode-toggle__sw { background: color-mix(in oklch, var(--accent) 32%, transparent); border-color: var(--accent); }
.rail-mode-toggle.is-on .rail-mode-toggle__knob { transform: translateX(14px); background: var(--accent); }
/* collapse is driven by the .app grid column (via --sidebar-w + :has), not a
   width transition on the sidebar itself — see .app rule above */
.sidebar.is-collapsed .sidebar__nav { padding-left: 0; padding-right: 0; }
.sidebar.is-collapsed .nav-item { justify-content: center; gap: 0; padding: 8px 0; }
.sidebar.is-collapsed .nav-item__label,
.sidebar.is-collapsed .nav-item__badge,
.sidebar.is-collapsed .nav-group__dot,
.sidebar.is-collapsed .lock-btn span:not(.li),
.sidebar.is-collapsed .nav-group__label span { display: none; }
.sidebar.is-collapsed .nav-group__label {
  justify-content: center; padding: 4px 0 4px; pointer-events: none;
}
.sidebar.is-collapsed .nav-group__chev { display: none; }
/* thin divider between sections in place of the hidden section label */
.sidebar.is-collapsed .nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.sidebar.is-collapsed .nav-group:first-child { border-top: 0; margin-top: 4px; padding-top: 0; }
.sidebar.is-collapsed .nav-group__label { min-height: 4px; }
.sidebar.is-collapsed .sidebar__foot { padding-left: 10px; padding-right: 10px; }
.sidebar.is-collapsed .lock-btn { justify-content: center; padding: 10px 0; }
.sidebar.is-collapsed .nav-group__items { grid-template-rows: 1fr !important; }
.sidebar.is-collapsed .nav-add-section { display: none; }
.sidebar__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
}
.brand-avatar {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 13px;
  display: grid; place-items: center;
  font-size: 22px;
  line-height: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.brand-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.brand-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 20px 12px 16px;
}
.sidebar__close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 34px; height: 34px;
}
.nav-group { margin-top: 16px; }
.nav-group:first-child { margin-top: 4px; }
.nav-group__label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 4px 12px 8px;
  transition: color 0.12s;
}
.nav-group__label:hover { color: var(--muted); }
.nav-group__chev { display: grid; place-items: center; color: currentColor; transition: transform 0.2s ease; margin-left: -3px; }
.nav-group.is-collapsed .nav-group__chev { transform: rotate(-90deg); }
.nav-group__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-left: auto; }
/* ---- editable sidebar (layout unlocked) ---- */
.nav-item.is-editing { cursor: grab; }
.nav-item.is-editing:active { cursor: grabbing; }
.nav-item.is-dragging { opacity: 0.4; }
/* while a drag is in progress, freeze hover recolouring + transitions so pages
   don't flash colour as the cursor sweeps over them */
.sidebar__nav.is-dnd .nav-item { transition: none; }
.sidebar__nav.is-dnd .nav-item:not(.is-active):hover { background: transparent; color: var(--muted); }
.sidebar__nav.is-dnd .nav-item:not(.is-active):hover .nav-item__icon { color: currentColor; }
.nav-item__grip { flex: none; display: grid; place-items: center; width: 13px; color: var(--faint); margin-left: -6px; margin-right: -3px; cursor: grab; }
.nav-item.is-editing:hover .nav-item__grip { color: var(--muted); }
.nav-group.is-dragging { opacity: 0.5; }
.nav-group__label--edit { display: flex; align-items: center; gap: 5px; width: 100%; padding: 2px 8px 6px; cursor: grab; }
.nav-group__label--edit:active { cursor: grabbing; }
.nav-group__grip { flex: none; display: grid; place-items: center; color: var(--faint); cursor: grab; }
.nav-group__title-input {
  flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 3px 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.nav-group__title-input:hover { border-color: var(--border-soft); }
.nav-group__title-input:focus { outline: none; border-color: var(--accent); background: var(--surface); color: var(--text); }
.nav-tool {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; height: 22px; padding: 0 7px;
  border-radius: 6px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--muted); cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.nav-tool:hover { color: var(--text); background: var(--surface-3); border-color: var(--border); }
.nav-tool--del { padding: 0 6px; }
.nav-tool--del:hover { color: oklch(0.68 0.16 25); border-color: color-mix(in oklch, oklch(0.68 0.16 25) 45%, transparent); }
.nav-tool:disabled { opacity: 0.4; cursor: default; }
.nav-group__empty {
  pointer-events: none; font-size: 11px; color: var(--faint); text-align: center;
  padding: 9px 10px; margin: 2px 8px; border: 1px dashed var(--border-soft); border-radius: 8px;
}
.nav-add-section {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 16px);
  margin: 16px 8px 4px; padding: 9px; border-radius: 9px; border: 1px dashed var(--border-soft);
  background: transparent; color: var(--muted); font-family: var(--ui); font-size: 12.5px; cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.nav-add-section:hover { color: var(--text); background: var(--surface); border-color: var(--border); }
/* while editing, always show items even if a section was collapsed when locked */
.sidebar__nav.is-editing .nav-group__items { grid-template-rows: 1fr; }
.nav-group__items {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s ease;
}
.nav-group__items > * { min-height: 0; }
.nav-group.is-collapsed .nav-group__items {
  grid-template-rows: 0fr;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) { .nav-group__items { transition: none; } }
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 0.14s ease, color 0.14s ease;
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item__icon { flex: none; width: 17px; height: 17px; display: grid; place-items: center; color: currentColor; opacity: 0.9; }
.nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item__badge {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 1px 6px;
}
.nav-item.is-active {
  background: var(--surface-2);
  color: var(--text);
}
.nav-item.is-active .nav-item__icon { color: var(--accent); opacity: 1; }
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.sidebar__foot {
  padding: 12px;
  border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.settings-item { padding-left: 12px; }
.foot-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.foot-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--accent); flex: none; box-shadow: 0 0 0 4px var(--accent-soft); }
.foot-text { font-size: 12px; color: var(--muted); line-height: 1.3; }
.foot-text b { color: var(--text); font-weight: 600; }

.lock-btn {
  margin-top: 10px;
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.lock-btn:hover { color: var(--text); background: var(--surface-2); }
.lock-btn .li { display: flex; color: var(--faint); }
.lock-btn.unlocked { color: var(--text); border-color: var(--accent-line); background: var(--surface-2); }
.lock-btn.unlocked .li { color: var(--accent); }
.lock-btn__hint {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.lock-btn.unlocked .lock-btn__hint { color: var(--accent); }

/* ---------- Main ---------- */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* topbar (mobile menu lives here) */
.topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
}
.topbar .brand-avatar { width: 38px; height: 38px; font-size: 20px; }

.content {
  padding: 28px 32px 56px;
  max-width: 1340px;
  width: 100%;
  margin: 0 auto;
  zoom: var(--text-scale, 1);
}

/* greeting row */
.greeting {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 18px;
  padding: 12px 0;
  background: var(--bg);
  flex-wrap: wrap;
}
.greeting h1 {
  margin: 0;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.greeting h1 em { font-style: normal; color: var(--accent); }
.greeting p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}
.date-pill {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 99px;
  padding: 9px 17px;
  white-space: nowrap;
}

/* hero banner */
.hero {
  position: relative;
  margin-bottom: 24px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.hero image-slot { display: block; width: 100%; height: 230px; }
.hero__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(to top, oklch(0.12 0.01 165 / 0.78), transparent);
  pointer-events: none;
}
.hero__overlay h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.hero__overlay p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.hero__tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in oklch, var(--bg) 55%, transparent);
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  padding: 5px 11px;
}

/* ============================================================
   Notifications bar
   ============================================================ */
.notif { margin-bottom: 24px; }
.notif--inline { margin-bottom: 0; }
.notif__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 13px;
}
.notif__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.currently-box {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.currently-box__head {
  padding: 13px 17px;
  border-bottom: 1px solid var(--border-soft);
}
.currently-box__items {
  display: flex;
  flex: 1 1 auto;
}
.currently-box .alert--bare {
  flex: 1 1 0; min-width: 0;
  background: transparent; border: 0; border-radius: 0;
  box-shadow: none; overflow: visible;
}
.currently-box .alert--bare::before { display: none; }
.currently-slot.is-clickable { cursor: pointer; border-radius: 10px; transition: background 0.14s; }
.currently-slot.is-clickable:hover { background: var(--surface-2); }
.currently-slot.is-clickable:hover .alert__title { color: var(--accent); }
.currently-slot.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.currently-box .alert--bare + .alert--bare { border-left: 1px solid var(--border-soft); }
.currently-slot__main { overflow: hidden; }
.currently-slot__count { font-family: var(--mono); font-size: 9.5px; color: var(--faint); margin-left: 6px; letter-spacing: 0; }
.currently-slot__empty { color: var(--faint); font-weight: 500; }
.currently-slot__rot { animation: currentlyRotate 1s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes currentlyRotate {
  from { opacity: 0; transform: translateY(-9px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .currently-slot__rot { animation: none; } }
.alert {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 13px;
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.alert.is-clickable { cursor: pointer; transition: border-color 0.14s, box-shadow 0.14s; }
.alert.is-clickable:hover { border-color: var(--ac, var(--accent)); box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
.alert.is-clickable:hover .alert__title { color: var(--ac, var(--accent)); }
.alert.is-clickable:focus-visible { outline: 2px solid var(--ac, var(--accent)); outline-offset: -2px; }
.alert__count { font-family: var(--mono); font-size: calc(8.5px * var(--asc, 1)); color: var(--faint); margin-left: 6px; letter-spacing: 0; }
.alert__pin { display: inline-flex; margin-left: 6px; color: var(--ac, var(--accent)); vertical-align: middle; }
.alert__cfg { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding: 2px 2px 2px 8px; border: 1px solid var(--accent-line); border-radius: 99px; background: var(--surface-2); }
.alert__cfg-btn { width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 12px; line-height: 1; display: grid; place-items: center; }
.alert__cfg-btn:hover:not(:disabled) { color: var(--text); background: var(--surface-3); }
.alert__cfg-btn:disabled { opacity: 0.35; cursor: default; }
.alert__cfg-n { font-family: var(--mono); font-size: 10.5px; color: var(--muted); min-width: 14px; text-align: center; }
.alert__pin svg { width: calc(11px * var(--asc, 1)); height: calc(11px * var(--asc, 1)); }
.alert__title--quiet { color: var(--faint); font-weight: 500; }
.alert::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ac, var(--accent));
  opacity: 0.85;
}
.alert__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alert--row { flex-direction: row; align-items: center; }
.alert__icon {
  width: calc(38px * var(--asc, 1)); height: calc(38px * var(--asc, 1)); flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  color: var(--ac, var(--accent));
  background: color-mix(in oklch, var(--ac, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--ac, var(--accent)) 26%, transparent);
}
.alert__icon svg { width: calc(18px * var(--asc, 1)); height: calc(18px * var(--asc, 1)); }
.alert__main { min-width: 0; }
.alert__type {
  font-family: var(--mono);
  font-size: calc(9.5px * var(--asc, 1));
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ac, var(--accent));
  margin-bottom: 3px;
}
.alert__title {
  font-size: calc(14px * var(--asc, 1)); font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alert__sub { font-size: calc(12px * var(--asc, 1)); color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert__when {
  flex: none;
  font-family: var(--mono);
  font-size: calc(10.5px * var(--asc, 1));
  color: var(--ac, var(--accent));
  background: color-mix(in oklch, var(--ac, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--ac, var(--accent)) 24%, transparent);
  border-radius: 99px;
  padding: 4px 9px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .notif__grid { grid-template-columns: repeat(2, 1fr); }
  .currently-box__items { flex-wrap: wrap; }
  .currently-box .alert--bare { flex: 1 1 40%; }
  .currently-box .alert--bare:nth-child(3) { border-left: 0; }
  .currently-box .alert--bare:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
}
@media (max-width: 560px) {
  .notif__grid { grid-template-columns: 1fr; }
  .currently-box__items { flex-direction: column; }
  .currently-box .alert--bare { flex: 1 1 auto; }
  .currently-box .alert--bare + .alert--bare { border-left: 0; border-top: 1px solid var(--border-soft); }
}

/* ============================================================
   Dashboard grid (flex rows with resizable dividers)
   ============================================================ */
.grid {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap, var(--gap));
}
.layout-tools {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 7px 7px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  width: fit-content;
}
.layout-tools__label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted);
}
.layout-tools__val {
  font-family: var(--mono); font-size: 11px; color: var(--text);
  min-width: 40px; text-align: center;
}
.layout-tools .lt-glyph { font-size: 16px; line-height: 1; }
.layout-tools__reset {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  background: transparent; border: 0; cursor: pointer;
  padding: 4px 8px; margin-left: 2px;
}
.layout-tools__reset:hover { color: var(--text); }
.layout-tools__sep { width: 1px; height: 18px; background: var(--border); margin: 0 6px; flex: none; }
.drow { display: flex; flex-direction: column; min-width: 0; }
.drow-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.drow-arrow {
  width: 28px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.drow-arrow:hover:not(:disabled) { color: var(--text); background: var(--surface-3); border-color: var(--accent-line); }
.drow-arrow:disabled { opacity: 0.3; cursor: default; }
.drow-hint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.grid-row {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.row-wrap { position: relative; display: flex; flex-direction: column; }
.row-wrap > .grid-row { flex: 1 1 auto; }
.row-wrap--sized { min-height: 0; }
.row-wrap--sized > .grid-row,
.row-wrap--sized .rcard,
.row-wrap--sized .rcard > .card {
  min-height: 0;
}
.row-wrap--sized .card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.row-wrap--sized [data-screen-label="To-do"] .card__body {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.row-wrap--sized [data-screen-label="To-do"] .card__body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.row-wrap--sized [data-screen-label="Calendar"] .card__body {
  display: flex;
  flex-direction: column;
}
.row-wrap--sized [data-screen-label="Calendar"] .cal-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.row-wrap--sized [data-screen-label="Calendar"] .cal-main {
  overflow: hidden;
}
.row-wrap--sized [data-screen-label="Calendar"] .cal-side {
  min-height: 0;
  max-height: 100% !important;
  overflow: hidden;
}
.row-wrap--sized [data-screen-label="Calendar"] .cal-events {
  overflow-y: auto;
}
.row-wrap.bar-spaced { margin-bottom: 24px; }
.row-wrap > .hr-inner { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.hr-inner > .notif { flex: 1 1 auto; display: flex; flex-direction: column; margin-bottom: 0; }
.hr-inner > .notif > .notif__grid { flex: 1 1 auto; grid-auto-rows: 1fr; }
.hr-inner > .notif > .currently-box { flex: 1 1 auto; }
.row-handle-h {
  position: absolute;
  left: 0; right: 0;
  bottom: -3px;
  height: 11px;
  cursor: row-resize;
  z-index: 3;
  touch-action: none;
}
.row-handle-h::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 3px;
  transform: translateX(-50%);
  width: 70px; height: 4px;
  border-radius: 99px;
  background: var(--border);
  transition: background 0.14s ease, width 0.14s ease;
}
.row-handle-h:hover::before { background: var(--accent); width: 120px; }
body.resizing-v { cursor: row-resize; user-select: none; }
body.resizing-v .row-handle-h::before { background: var(--accent); }
.rcard { display: flex; flex-direction: column; min-width: 0; }
.ccard-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.rcard > .card { flex: 1 1 auto; width: 100%; }

.row-gap { flex: none; width: var(--col-gap, var(--gap)); }
.row-gap.is-handle {
  position: relative;
  cursor: col-resize;
  touch-action: none;
}
.row-gap.is-handle::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 44px;
  border-radius: 99px;
  background: var(--border);
  transition: background 0.14s ease, height 0.14s ease;
}
.row-gap.is-handle:hover::before { background: var(--accent); height: 72px; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .row-gap.is-handle::before { background: var(--accent); }
.grid.editing .rcard > .card { box-shadow: var(--shadow), inset 0 0 0 1px var(--accent-line); }

/* draggable divider for resizing right-hand side panes (Dining, Boardgames) */
.pane-handle {
  position: relative; align-self: stretch; cursor: col-resize; touch-action: none;
  min-height: 60px;
}
.pane-handle::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 4px; height: 64px; border-radius: 99px;
  background: var(--border); transition: background 0.14s ease, height 0.14s ease;
}
.pane-handle:hover::before { background: var(--accent); height: 96px; }
body.resizing .pane-handle::before { background: var(--accent); }

/* legacy span helpers (no longer used by layout, kept harmless) */
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-8 { grid-column: span 8; }

/* card base */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 0;
}
.card__title {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.card__title .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); }
.card__title--link { cursor: pointer; }
.card__title--link:hover { color: var(--text); }
.card__action {
  font-size: 12px;
  color: var(--faint);
  background: none; border: none; cursor: pointer;
  font-family: var(--ui);
  padding: 4px 6px; border-radius: 7px;
  transition: color 0.14s, background 0.14s;
}
.card__action:hover { color: var(--text); background: var(--surface-2); }
.card__body { padding: 14px 18px 18px; }

/* ---------- Calendar ---------- */
.cal-top {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 6px 0 14px;
}
.cal-month { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.cal-month span { color: var(--faint); font-weight: 500; margin-left: 6px; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.cal-nav button:hover { color: var(--text); background: var(--surface-3); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--faint);
  padding-bottom: 6px;
}
.cal-dow.wkend { color: color-mix(in oklch, var(--cal-off) 70%, var(--faint)); }
.cal-cell {
  height: 42px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 13px;
  font-family: inherit;
  color: var(--muted);
  position: relative;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  width: 100%;
  padding: 0;
}
.cal-cell.empty { visibility: hidden; pointer-events: none; }
.cal-cell:not(.empty):hover { background: var(--surface-2); }
.cal-cell.has-event { color: var(--text); }
.cal-cell .evt-dot { width: 5px; height: 5px; border-radius: 99px; background: var(--accent); }
.cal-cell .evt-gift { display: inline-flex; color: oklch(0.74 0.12 350); }
/* day categories: weekends/off = green, weekdays = blue, last Wed (office) = red */
.cal-cell.work { color: var(--cal-work); }
.cal-cell.wknd { color: var(--cal-off); }
.cal-cell.half { color: var(--cal-half); }
.cal-cell.office { color: var(--cal-office); }
.cal-cell.ill { color: var(--cal-ill); }
.cal-cell.bank { color: var(--cal-bank); }
.cal-cell.work .evt-dot { background: var(--cal-work); }
.cal-cell.wknd .evt-dot { background: var(--cal-off); }
.cal-cell.half .evt-dot { background: var(--cal-half); }
.cal-cell.office .evt-dot { background: var(--cal-office); }
.cal-cell.ill .evt-dot { background: var(--cal-ill); }
.cal-cell.bank .evt-dot { background: var(--cal-bank); }
.cal-cell.office { font-weight: 600; }
.cal-legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.cal-legend span {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal-legend .lg { width: 8px; height: 8px; border-radius: 99px; }
.cal-legend .lg.off { background: var(--cal-off); }
.cal-legend .lg.half { background: var(--cal-half); }
.cal-legend .lg.work { background: var(--cal-work); }
.cal-legend .lg.office { background: var(--cal-office); }
.cal-legend .lg.ill { background: var(--cal-ill); }
.cal-legend .lg.bank { background: var(--cal-bank); }
.cal-pop {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.cal-pop:hover { background: var(--surface-2); border-color: var(--accent); }
.cal-pop .lg { width: 8px; height: 8px; border-radius: 99px; }
.cal-pop .lg.off { background: var(--cal-off); }
.cal-pop .lg.half { background: var(--cal-half); }
.cal-pop .lg.work { background: var(--cal-work); }
.cal-pop .lg.office { background: var(--cal-office); }
.cal-pop .lg.ill { background: var(--cal-ill); }
.cal-pop .lg.bank { background: var(--cal-bank); }
.cal-cell.today {
  background: var(--surface-3);
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.cal-cell.today .evt-dot { background: var(--accent); }
.cal-cell.selected {
  background: var(--surface-3);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--border);
}

.cal-layout {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 22px;
}
.cal-main { min-width: 0; }
.cal-side {
  position: relative;
  border-left: 1px solid var(--border);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cal-divider {
  position: absolute;
  left: -11px; top: 0; bottom: 0;
  width: 12px;
  cursor: col-resize;
  z-index: 4;
  touch-action: none;
}
.cal-divider::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 44px;
  border-radius: 99px;
  background: var(--border);
  transition: background 0.14s ease, height 0.14s ease;
}
.cal-divider:hover::before { background: var(--accent); height: 80px; }
body.resizing .cal-divider::before { background: var(--accent); }
.cal-side__head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 6px 0 12px;
  min-height: 22px;
}
.cal-side__clear {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.14s, background 0.14s;
}
.cal-side__clear:hover { color: var(--text); background: var(--surface-3); }
.cal-empty { color: var(--faint); font-size: 12.5px; padding: 8px; }

.cal-events {
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  flex: 1 1 auto; min-height: 0;
}
.cal-events--scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cal-events--scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.evt {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px;
  border-radius: 10px;
  transition: background 0.14s;
}
.evt:hover { background: var(--surface-2); }
.evt--clickable { cursor: pointer; }
.evt--clickable:hover .evt__title { color: var(--accent); }
.evt--clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.evt__dates {
  width: 46px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
}
.evt__date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  width: 100%;
  text-align: center;
  line-height: 1.15;
}
.evt__date b { display: block; font-size: 15px; color: var(--text); font-weight: 600; }
.evt__date--end { color: var(--muted); }
.evt__date--end b { color: var(--text); }
.evt__slash { width: 12px; height: 1.5px; border-radius: 2px; background: var(--faint); margin: 2px 0; }
.evt__bar { width: 2px; align-self: stretch; border-radius: 2px; background: var(--accent-line); flex: none; }
.evt__main { min-width: 0; }
.evt__title { font-size: 13.5px; color: var(--text); font-weight: 500; }
.evt__time { font-size: 12px; color: var(--faint); margin-top: 1px; }

/* ---------- To-do (tappable task tiles) ---------- */
.task-list { display: flex; flex-direction: column; gap: 8px; }
/* past ~7 items: keep the card height, scroll the overflow, fade edges that have
   more content beyond them (top fade once scrolled down, bottom fade until end) */
.task-list--scroll {
  max-height: 374px;
  overflow-y: auto;
  padding-bottom: 6px;
  --ft: 0px;
  --fb: 30px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.task-list--scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex: none;
  text-align: left;
  padding: 13px 15px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: opacity 0.26s ease, transform 0.26s ease, background 0.14s ease, border-color 0.14s ease;
}
.task:hover { background: var(--surface-3); border-color: var(--accent-line); }
.task:active { transform: scale(0.992); }
.task.is-overdue::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tc);
}
.task__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task__habit {
  margin-left: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent-ink); vertical-align: middle;
  padding: 1px 6px; border-radius: 99px; background: color-mix(in oklch, var(--accent) 14%, transparent);
}
.task__right {
  position: relative;
  flex: none;
  height: 15px;
  min-width: 86px;
  display: flex; align-items: center; justify-content: flex-end;
}
.task__meta, .task__done {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: opacity 0.14s ease;
}
.task__meta { color: var(--tc); opacity: 1; }
.task__done {
  display: inline-flex; align-items: center; gap: 5px;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0;
}
.task:hover .task__meta { opacity: 0; }
.task:hover .task__done { opacity: 1; }
.task.removing {
  opacity: 0;
  transform: translateX(16px) scale(0.97);
  pointer-events: none;
}
.task-empty {
  padding: 28px 4px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
}

/* ---------- Big Goals ---------- */
.goal-list { display: flex; flex-direction: column; }
.goal-list--scroll {
  max-height: 372px;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.goal-list--scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.goal {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px;
  width: 100%; flex: none;
  text-align: left; background: transparent; border: none;
  color: inherit; font-family: var(--ui); cursor: pointer;
  border-radius: 8px;
  transition: background 0.14s;
}
.goal:hover { background: var(--surface-2); }
.goal:hover .goal__title { color: var(--gc, var(--accent)); }
.goal:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.goal + .goal { border-top: 1px solid var(--border-soft); }
.moon {
  --m: 36px;
  width: var(--m); height: var(--m); flex: none;
  border-radius: 99px;
  background: var(--surface-3);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.moon::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--gc, var(--accent));
  border-radius: 99px;
}
/* phase via clip on the lit disc */
.moon.new::before { clip-path: inset(0 100% 0 0); }
.moon.first::before { clip-path: inset(0 0 0 50%); }
.moon.waxing::before { clip-path: inset(0 0 0 22%); border-radius: 99px; }
.moon.full::before { clip-path: inset(0 0 0 0); }
.goal__main { flex: 1; min-width: 0; }
.goal__title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.goal__meta { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 8px; }
.goal__phase { font-family: var(--mono); font-size: 10.5px; color: var(--gc, var(--accent)); }
.goal__track { height: 4px; border-radius: 99px; background: var(--surface-3); margin-top: 9px; overflow: hidden; }
.goal__fill { height: 100%; border-radius: 99px; background: var(--gc, var(--accent)); }
.goal__pct { font-family: var(--mono); font-size: 12px; color: var(--gc, var(--muted)); flex: none; width: 38px; text-align: right; }

/* ---------- Notes ---------- */
.note-card .card__body { display: flex; flex-direction: column; gap: 14px; min-height: 0; flex: 1; }
.note-list { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow: hidden; position: relative; }
.note {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--accent);
  border-radius: 4px var(--radius-sm) var(--radius-sm) 4px;
  padding: 13px 15px;
  flex-basis: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.note:hover { background: var(--surface-3); border-color: var(--border); border-left-color: var(--accent); }
.note:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-line); }
.note__inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.note__time { font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: 0.03em; margin-bottom: 6px; flex: none; }
.note__text {
  font-size: 13.5px; line-height: 1.5; color: var(--text);
  flex: 1; min-height: 0;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.note__text em { color: var(--accent-dim); font-style: italic; }
/* the hidden mirror measures natural height — never clamped, never visible */
.note-meas { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; pointer-events: none; z-index: -1; }
.note-meas__item { flex-basis: auto !important; }
.note__text--full { display: block; -webkit-line-clamp: none; overflow: visible; flex: none; }
.note-add {
  display: flex; align-items: center; gap: 10px; flex: none;
  color: var(--faint); font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px; cursor: text;
  transition: border-color 0.14s, color 0.14s;
}
.note-add:hover { border-color: var(--accent-line); color: var(--muted); }
.note-add:focus-within { border-color: var(--accent); color: var(--muted); }
.note-add__in {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--ui); font-size: 13px; color: var(--text);
}
.note-add__in::placeholder { color: var(--faint); }
/* note popup */
.note-modal.cp-modal__card { max-width: 719px; }
.note-modal__time { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.03em; margin-bottom: 10px; }
.note-modal__ta.cp-textarea { min-height: calc(13 * 1.6em); line-height: 1.6; resize: vertical; }

/* ---------- Meal Plan ---------- */
.meal {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 6px;
  border-radius: 10px;
}
.meal + .meal { border-top: 1px solid var(--border-soft); }
.meal.is-today { background: var(--surface-2); margin: 0 -6px; padding: 11px 12px; border-radius: 10px; box-shadow: inset 2px 0 0 var(--accent); }
.meal.is-today + .meal { border-top: none; }
.meal__day {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  width: 40px; flex: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.meal.is-today .meal__day { color: var(--accent); }
.meal__main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 32px; }
.meal__dish { font-size: 13.5px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meal__tag { font-size: 11.5px; color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meal__kcal { font-family: var(--mono); font-size: 11px; color: var(--faint); flex: none; }
.meal__dish.is-empty, .meal__tag.is-empty { color: var(--faint); font-style: italic; opacity: 0.7; font-weight: 400; }

/* whole row is a click-to-pick button */
.meal--btn {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; transition: background 0.12s;
}
.meal--btn:hover { background: var(--surface-2); }
.meal--btn.is-today:hover { background: var(--surface-3); }
.meal--btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-line); }

/* picker card */
.cp-modal__card.mw-pick { max-width: 400px; overflow: visible; }
.mw-pick__sub { font-weight: 400; color: var(--faint); font-size: 12px; font-family: var(--mono); }
.mw-slot { margin-bottom: 16px; }
.mw-slot:last-child { margin-bottom: 0; }
.mw-slot__h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.mw-slot__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.mw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 5px 5px 11px; border-radius: 99px;
  border: 1px solid var(--accent-line);
  background: color-mix(in oklch, var(--accent) 12%, var(--surface));
  color: var(--text); font-size: 12.5px; font-weight: 500;
}
.mw-chip__x {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 0; background: none; color: var(--faint); cursor: pointer; transition: color 0.12s, background 0.12s;
}
.mw-chip__x:hover { color: var(--text); background: color-mix(in oklch, var(--accent) 22%, transparent); }

.mw-combo { position: relative; }
.mw-combo__field {
  display: flex; align-items: center; gap: 8px; padding: 0 11px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px;
  color: var(--faint); transition: border-color 0.14s, background 0.14s;
}
.mw-combo__field:focus-within { border-color: var(--accent); background: var(--surface); }
.mw-combo__in {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--ui); font-size: 13.5px; color: var(--text); padding: 9px 0;
}
.mw-combo__in::placeholder { color: var(--faint); }
.mw-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: 0 14px 34px -16px oklch(0 0 0 / 0.7); padding: 5px; max-height: 252px; overflow-y: auto;
}
.mw-menu__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--text); text-align: left; font-family: var(--ui); font-size: 13px; transition: background 0.1s;
}
.mw-menu__opt:hover { background: var(--surface-2); }
.mw-menu__opt svg { color: var(--accent); flex: none; }
.mw-menu__add { color: var(--accent); font-weight: 500; justify-content: flex-start; }
.mw-menu__none { padding: 11px 10px; color: var(--faint); font-size: 12.5px; }

/* ============================================================
   Mobile drawer + bottom nav
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: oklch(0.1 0.01 165 / 0.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.scrim.show { opacity: 1; pointer-events: auto; }

.bottom-nav { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(8, 1fr); }
  .span-7 { grid-column: span 8; }
  .span-5 { grid-column: span 8; }
  .span-4 { grid-column: span 4; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .topbar { display: flex; }
  .sidebar {
    position: fixed; z-index: 50;
    top: 0; left: 0; bottom: 0;
    width: 276px; height: 100dvh;
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 60px oklch(0 0 0 / 0.5);
    border-right: 1px solid var(--border);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar.is-collapsed { width: 276px; }
  .sidebar.is-collapsed .nav-item { justify-content: flex-start; gap: 11px; padding: 8px 12px; }
  .sidebar.is-collapsed .nav-item__label { display: block; }
  .sidebar__edge { display: none; }
  .content { padding: 18px 18px 96px; }
  .app.has-cover .content { padding-top: 18px; }
  .page-banner { height: 132px; }
  .page-banner__avatar { display: none; }
  .cal-layout { grid-template-columns: 1fr !important; gap: 0; }
  .cal-divider { display: none; }
  .cal-side {
    border-left: none;
    padding-left: 0;
    border-top: 1px dashed var(--border);
    margin-top: 16px;
    padding-top: 12px;
  }
  .grid-row { flex-direction: column; gap: var(--gap); }
  .grid-row > .rcard { flex: 0 0 auto !important; width: 100%; }
  .row-gap { display: none; }
  .ccard-bar { display: none; }
  .row-wrap { min-height: 0 !important; }
  .row-handle-h { display: none; }
  .lock-btn { display: none; }
  .grid { grid-template-columns: 1fr; }
  .span-7, .span-5, .span-4, .span-8 { grid-column: span 1; }
  .greeting h1 { font-size: 23px; }

  /* notes: no frozen height on mobile — let each note take its natural size */
  .note-card .card__body, .note-list { flex: none; min-height: 0; overflow: visible; }
  .note { flex-basis: auto; flex-grow: 0 !important; overflow: visible; }

  /* bottom nav for top-level sections */
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; z-index: 45;
    left: 0; right: 0; bottom: 0;
    background: color-mix(in oklch, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .bn-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    color: var(--faint);
    font-family: var(--ui); font-size: 10px; font-weight: 500;
    padding: 4px 2px; border-radius: 10px;
  }
  .bn-item svg { width: 20px; height: 20px; }
  .bn-item.is-active { color: var(--accent); }
}

@media (max-width: 460px) {
  .hero image-slot { height: 168px; }
  .content { padding: 16px 14px 96px; }
  .card__body { padding: 12px 14px 16px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   Calendar page
   ============================================================ */
.cp { max-width: 1340px; }
.cp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px; position: relative;
}
.cp-nav--center {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
}
.cp-head__title h1 {
  margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -0.02em;
}
/* heading toggles the filter / order-by bar */
.din .cp-head__title h1, .pt .cp-head__title h1, .rc .cp-head__title h1,
.pd .cp-head__title h1, .bg-page .cp-head__title h1 { cursor: pointer; }
.jr:has(.ntab-filterbar) .cp-head__title h1 { cursor: pointer; }
[data-screen-label].filters-collapsed :is(.an-filters, .pd-filterbar, .bg-filterbar, .ntab-filterbar) { display: none; }
.cp-head__sub {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--muted);
}
.cp-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-nav {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 99px; padding: 3px;
}
.cp-nav button {
  width: 30px; height: 30px; border-radius: 99px;
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.14s, color 0.14s;
}
.cp-nav button:hover { color: var(--text); background: var(--surface-3); }
.cp-nav button.cp-nav__month {
  font-size: 13.5px; font-weight: 600; padding: 0 10px; min-width: 116px; text-align: center; width: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap;
  background: transparent; border: 0; height: 30px; border-radius: 8px; cursor: pointer; color: var(--text);
}
.cp-nav__month:hover { background: var(--surface-3); }
.cp-nav__month svg { color: var(--faint); }
.cp-nav__month b { color: var(--faint); font-weight: 500; margin-left: 2px; }

/* month/year picker */
.cp-mpick { position: relative; }
.cp-mpick__pop {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 40; width: 272px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.28);
}
.cp-mpick__yr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cp-mpick__yr span { font-size: 14px; font-weight: 600; }
.cp-mpick__yr button {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
}
.cp-mpick__yr button:hover { background: var(--surface-3); color: var(--text); }
.cp-mpick__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.cp-nav button.cp-mpick__m {
  width: 100%; height: 34px; border-radius: 9px; border: 1px solid transparent; place-items: center;
  background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer;
}
.cp-nav button.cp-mpick__m:hover { background: var(--surface-3); }
.cp-nav button.cp-mpick__m.is-today { border-color: var(--border); }
.cp-nav button.cp-mpick__m.is-sel { background: var(--accent); color: #fff; }
.cp-nav button.cp-nav__today { width: auto; height: 30px; padding: 0 12px; margin-left: 2px; border-left: 1px solid var(--border-soft); border-radius: 0 99px 99px 0; font-size: 13px; color: var(--muted); }
.cp-nav button.cp-nav__today:hover { color: var(--text); }

.cp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  border-radius: 10px; padding: 8px 13px; cursor: pointer;
  border: 1px solid var(--border-soft); background: var(--surface); color: var(--text);
  transition: background 0.14s, border-color 0.14s, color 0.14s, opacity 0.14s;
}
.cp-btn--ghost { background: var(--surface); color: var(--muted); }
.cp-btn--ghost:hover { color: var(--text); background: var(--surface-2); }
.cp-btn--soft {
  background: var(--surface-2); color: var(--muted); padding: 6px 11px; font-size: 12px; border-radius: 8px;
}
.cp-btn--soft:hover { color: var(--text); background: var(--surface-3); }
.cp-btn--primary {
  background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 600;
}
.cp-btn--primary:hover { background: var(--accent-dim); }
.cp-btn--primary:disabled { opacity: 0.45; cursor: default; }
.cp-head__actions .cp-btn { white-space: nowrap; }
.cp-btn--danger {
  background: transparent; border-color: color-mix(in oklch, var(--cal-office) 40%, transparent);
  color: var(--cal-office);
}
.cp-btn--danger:hover { background: color-mix(in oklch, var(--cal-office) 14%, transparent); }

/* filters */
.cp-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.cp-main .cp-filters { margin-bottom: 0; }
.cp-filters__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--faint); margin-right: 2px;
}
.cp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 99px; padding: 6px 12px;
  transition: background 0.14s, color 0.14s, border-color 0.14s, opacity 0.14s;
}
.cp-chip__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--cc, var(--accent)); opacity: 0.45; transition: opacity 0.14s; }
.cp-chip.is-on { color: var(--text); border-color: var(--cc, var(--accent)); background: color-mix(in oklch, var(--cc, var(--accent)) 12%, var(--surface)); }
.cp-chip.is-on .cp-chip__dot { opacity: 1; }
.cp-chip:hover { color: var(--text); }
.cp-filters__all {
  margin-left: auto; background: transparent; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); padding: 6px 8px;
}
.cp-filters__all:hover { color: var(--text); }

/* body layout */
.cp-body { display: grid; grid-template-columns: 1fr 340px; gap: var(--gap); align-items: start; }
.cp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cp-calhead { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.cp-calhead .cp-nav { background: transparent; border: 0; padding: 0; }
.cp-cal { padding: 16px 18px 18px; }

.cp-dow {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px;
}
.cp-dow span {
  text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
}
.cp-dow span.is-wkend { color: color-mix(in oklch, var(--cal-off) 65%, var(--faint)); }

.cp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cp-cell {
  min-width: 0;
  min-height: 104px; border-radius: 11px; padding: 7px 7px 8px;
  background: var(--surface-2); border: 1px solid transparent;
  display: flex; flex-direction: column; gap: 5px; cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
  user-select: none;
}
.cp-cell:hover { background: var(--surface-3); }
.cp-cell.is-empty { background: transparent; cursor: default; pointer-events: none; }
.cp-cell.is-wkend { background: color-mix(in oklch, var(--cal-off) 6%, var(--surface-2)); }
/* day-category colour coding — mirrors home calendar */
.cp-cell:not(.is-today).cp-day--work .cp-cell__num  { color: var(--cal-work); }
.cp-cell:not(.is-today).cp-day--wknd .cp-cell__num  { color: var(--cal-off); }
.cp-cell:not(.is-today).cp-day--half .cp-cell__num { color: var(--cal-half); }
.cp-cell:not(.is-today).cp-day--office .cp-cell__num { color: var(--cal-office); font-weight: 700; }
.cp-cell:not(.is-today).cp-day--ill .cp-cell__num { color: var(--cal-ill); }
.cp-cell:not(.is-today).cp-day--bank .cp-cell__num { color: var(--cal-bank); font-weight: 700; }
/* legend inside cp-cal */
.cp-cal-legend { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); align-items: center; }
.cp-legend-toggle {
  margin-left: auto;
  background: transparent; border: 1px solid var(--border-soft); cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding: 5px 11px; border-radius: 99px;
  transition: color 0.14s, background 0.14s, border-color 0.14s;
}
.cp-legend-toggle:hover { color: var(--text); background: var(--surface-2); border-color: var(--accent-line); }

/* annual-leave tracker */
.cp-leave { margin-top: 16px; padding: 18px 20px; }
.cp-leave__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cp-leave__title { font-size: 15px; font-weight: 600; color: var(--text); }
.cp-leave__year { color: var(--faint); font-family: var(--mono); font-size: 12px; margin-left: 4px; }
.cp-leave__set { display: flex; align-items: center; gap: 8px; }
.cp-leave__set > span { font-size: 12px; color: var(--muted); }
.cp-leave__input { width: 72px; padding: 7px 10px; font-size: 13.5px; text-align: right; -moz-appearance: textfield; }
.cp-leave__input::-webkit-outer-spin-button, .cp-leave__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp-leave__unit { font-size: 12px; color: var(--faint); }
.cp-leave__stats { display: flex; gap: 28px; margin-top: 16px; }
.cp-leave__stat { display: flex; flex-direction: column; gap: 2px; }
.cp-leave__stat b { font-size: 24px; font-weight: 600; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.cp-leave__stat span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.cp-leave__stat--left b { color: var(--cal-off); }
.cp-leave__stat--left.is-over b { color: var(--cal-office); }
.cp-leave__bar { height: 7px; border-radius: 99px; background: var(--surface-3); margin-top: 16px; overflow: hidden; }
.cp-leave__bar i { display: block; height: 100%; border-radius: 99px; background: var(--cal-off); transition: width 0.3s ease; }
.cp-leave__bar i.is-over { background: var(--cal-office); }
.cp-leave__empty { margin-top: 14px; font-size: 13px; color: var(--muted); }
.cp-leave__note { margin-top: 14px; font-size: 11.5px; color: var(--faint); line-height: 1.5; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cp-leave__note .lg { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
.cp-leave__note .lg.off { background: var(--cal-off); }
.cp-leave__note .lg.half { background: var(--cal-half); }
.cp-leave__note .lg.bank { background: var(--cal-bank); }
.cp-cell.is-sel { border-color: var(--accent); }
.cp-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.cp-cell__top { display: flex; align-items: center; justify-content: space-between; }
.cp-cell__num { font-size: 13px; font-weight: 600; color: var(--text); }
.cp-cell.is-today .cp-cell__num {
  background: var(--accent); color: var(--accent-ink);
  width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; font-size: 12px;
}
.cp-cell__add {
  width: 20px; height: 20px; border-radius: 6px; border: 0; background: transparent;
  color: var(--faint); cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity 0.14s, background 0.14s, color 0.14s;
}
.cp-cell:hover .cp-cell__add { opacity: 1; }
.cp-cell__add:hover { background: var(--surface); color: var(--accent); }
.cp-cell__events { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.cp-chipline {
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; overflow: hidden;
  text-align: left; border: 0; cursor: pointer;
  background: color-mix(in oklch, var(--cc, var(--accent)) 16%, transparent);
  border-radius: 6px; padding: 3px 7px;
  transition: background 0.14s;
}
.cp-chipline:hover { background: color-mix(in oklch, var(--cc, var(--accent)) 28%, transparent); }
.cp-chipline__dot { width: 6px; height: 6px; border-radius: 99px; background: var(--cc, var(--accent)); flex: none; }
.cp-chipline__t {
  font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-more { font-family: var(--mono); font-size: 9.5px; color: var(--faint); padding-left: 7px; }

/* side panel */
.cp-side { padding: 16px 16px 18px; position: sticky; top: 14px; }
.cp-side__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cp-side__eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint);
}
.cp-side__date { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; }
.cp-list { display: flex; flex-direction: column; gap: 4px; }
.cp-evt {
  display: flex; align-items: stretch; gap: 11px; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer; border-radius: 9px; padding: 9px 9px;
  transition: background 0.14s;
}
.cp-evt:hover { background: var(--surface-2); }
.cp-evt__bar { width: 3px; border-radius: 99px; background: var(--cc, var(--accent)); flex: none; }
.cp-evt__date {
  font-family: var(--mono); font-size: 10px; color: var(--faint); text-align: center; line-height: 1.15; flex: none; align-self: center;
}
.cp-evt__date b { display: block; font-size: 15px; color: var(--text); font-weight: 600; }
.cp-evt__main { min-width: 0; align-self: center; flex: 1 1 auto; }
.cp-evt__title { font-size: 13.5px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-evt__meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
/* end-date badge mirrored on the right of a multi-day entry */
.cp-evt__date--end { min-width: 30px; align-self: center; }
.cp-evt__cat { color: var(--cc, var(--accent)); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.cp-empty { color: var(--faint); font-size: 12.5px; padding: 8px 9px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cp-empty__add { background: transparent; border: 0; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 0; }
.cp-empty__add:hover { text-decoration: underline; }
.cp-side__upnext { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.cp-side__upnext .cp-side__eyebrow { margin-bottom: 8px; }
.cp-evt--row .cp-evt__date { min-width: 30px; }

/* modal */
.cp-modal {
  position: fixed; inset: 0; z-index: 100;
  background: oklch(0.12 0.006 165 / 0.6); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 24px;
  animation: cp-fade 0.16s ease;
}
@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
.cp-modal__card {
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 24px 60px -24px oklch(0 0 0 / 0.8);
  padding: 20px 22px 22px;
  animation: cp-pop 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes cp-pop { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.cp-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cp-modal__head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cp-modal__x {
  width: 30px; height: 30px; border-radius: 8px; border: 0; background: var(--surface-2);
  color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background 0.14s, color 0.14s;
}
.cp-modal__x:hover { background: var(--surface-3); color: var(--text); }
.cp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.cp-field > span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.cp-field > span em { color: var(--faint); font-style: normal; text-transform: none; letter-spacing: 0; }
.cp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-field-row--3 { grid-template-columns: 1fr 124px; }
.cp-clear-end {
  background: transparent; border: 0; cursor: pointer; color: var(--faint);
  font-family: var(--ui); font-size: 11.5px; padding: 0; margin: -4px 0 13px;
}
.cp-clear-end:hover { color: var(--accent); text-decoration: underline; }
.cp-pinrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin: 2px 0 4px; padding: 11px 13px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px;
  cursor: pointer; color: var(--muted); font-family: var(--ui); font-size: 13.5px;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
}
.cp-pinrow:hover { border-color: var(--border); color: var(--text); }
.cp-pinrow__l { display: inline-flex; align-items: center; gap: 9px; }
.cp-pinrow__l svg { color: var(--faint); transition: color 0.14s; }
.cp-pinrow__state {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--border-soft); border-radius: 99px; padding: 3px 9px;
}
.cp-pinrow.is-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.cp-pinrow.is-on .cp-pinrow__l svg { color: var(--accent); }
.cp-pinrow.is-on .cp-pinrow__state { color: var(--accent-ink); border-color: var(--accent-line); background: color-mix(in oklch, var(--accent) 22%, transparent); }
.cp-input {
  font-family: var(--ui); font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px;
  padding: 9px 11px; width: 100%; transition: border-color 0.14s, background 0.14s;
}
.cp-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.cp-input::placeholder { color: var(--faint); }
.cp-textarea { resize: vertical; min-height: 44px; font-size: 13px; }
.cp-catpick { display: flex; flex-wrap: wrap; gap: 6px; }

/* people picker (event modal) */
.cp-ppick__av { width: 22px; height: 22px; font-size: 9px; }

/* selected-people chips + searchable add */
.cp-ppl-field { position: relative; }
.cp-ppl-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cp-ppl-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 7px 4px 4px; border-radius: 99px;
  border: 1px solid color-mix(in oklch, var(--av) 55%, transparent);
  background: color-mix(in oklch, var(--av) 12%, var(--surface));
  color: var(--text); font-size: 12.5px; font-weight: 500;
}
.cp-ppl-tag__x {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  color: var(--faint); cursor: pointer; transition: color .12s, background .12s;
}
.cp-ppl-tag__x:hover { color: var(--text); background: color-mix(in oklch, var(--av) 22%, transparent); }
.cp-ppl-add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 99px;
  border: 1px dashed var(--border); background: var(--surface);
  color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.cp-ppl-add:hover { color: var(--text); border-color: var(--accent-line); }
.cp-ppl-pop {
  margin-top: 8px; width: 100%;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.cp-ppl-pop__search {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); color: var(--faint);
}
.cp-ppl-search {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--text); font-family: var(--ui); font-size: 13px;
}
.cp-ppl-search::placeholder { color: var(--faint); }
.cp-ppl-list { max-height: 210px; overflow-y: auto; padding: 5px; }
.cp-ppl-none { padding: 14px 12px; color: var(--faint); font-size: 12.5px; text-align: center; }
.cp-ppl-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border-radius: 9px; cursor: pointer;
  color: var(--text); text-align: left; transition: background .12s;
}
.cp-ppl-opt:hover { background: var(--surface-3); }
.cp-ppl-opt.is-on { color: var(--accent); }
.cp-ppl-opt.is-on .cp-ppl-opt__name { color: var(--text); }
.cp-ppl-opt__av { width: 30px; height: 30px; font-size: 11px; }
.cp-ppl-opt__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-ppl-opt__name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-ppl-opt__rel { font-size: 11px; color: var(--faint); }

/* assigned-people avatar stack (event lists + table) */
.cp-ppl { display: inline-flex; align-items: center; margin-top: 5px; }
.cp-td--title .cp-ppl { margin-top: 4px; }
.cp-td--people { white-space: nowrap; }
.cp-td--people .cp-ppl { margin-top: 0; }
.cp-td__dash { color: var(--faint); }
/* table People column: avatar + full name, fading off names that overflow */
.cp-tppl {
  display: flex; align-items: center; gap: 12px; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.cp-tppl__p { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cp-tppl__av { width: 22px; height: 22px; font-size: 8px; }
.cp-tppl__n { font-size: 12.5px; color: var(--text); white-space: nowrap; }
.cp-ppl__av {
  width: 20px; height: 20px; font-size: 8px;
  margin-left: -5px; box-shadow: 0 0 0 2px var(--surface);
}
.cp-ppl__av:first-child { margin-left: 0; }
.cp-ppl__more { margin-left: 6px; font-size: 11px; color: var(--faint); font-weight: 600; }
.cp-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.cp-modal__foot-r { display: flex; gap: 8px; }

/* calendar page responsive */
@media (max-width: 960px) {
  .cp-body { grid-template-columns: 1fr; }
  .cp-side { position: static; }
}
@media (max-width: 560px) {
  .cp-cell { min-height: 78px; }
  .cp-chipline__t { font-size: 11px; }
  .cp-head__actions { width: 100%; }
  .cp-btn--primary { margin-left: auto; }
}
/* date/time input icon visibility in dark mode */
.cp-input[type="date"]::-webkit-calendar-picker-indicator,
.cp-input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

/* segmented Month/Table toggle */
.cp-seg {
  display: inline-flex; background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 99px; padding: 3px;
}
.cp-seg button {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font-family: var(--ui); font-size: 12.5px; font-weight: 500;
  padding: 6px 15px; border-radius: 99px; transition: background 0.14s, color 0.14s;
}
.cp-seg button.is-on { background: var(--surface-3); color: var(--text); }
.cp-seg button:not(.is-on):hover { color: var(--text); }

/* ghost "Categories" chip in filter bar */
.cp-chip--ghost { gap: 5px; color: var(--faint); border-style: dashed; }
.cp-chip--ghost:hover { color: var(--text); border-color: var(--accent-line); }

/* multi-day chip in month grid */
.cp-chipline.is-multi {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--cc, var(--accent)) 26%, transparent),
    color-mix(in oklch, var(--cc, var(--accent)) 12%, transparent));
}

/* table view */
.cp-table-wrap { padding: 6px 6px; overflow-x: auto; overflow-y: hidden; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cp-table--resizable { table-layout: fixed; }
.cp-table thead th {
  text-align: left; padding: 12px 14px; position: relative;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); font-weight: 500; border-bottom: 1px solid var(--border);
}
.cp-th__label { display: inline-block; }
/* column resize handle on the right edge of each header cell */
.cp-col-resize {
  position: absolute; top: 0; right: -5px; width: 10px; height: 100%;
  cursor: col-resize; z-index: 2; touch-action: none;
}
.cp-col-resize::after {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 4px; width: 2px;
  border-radius: 2px; background: transparent; transition: background 0.12s;
}
.cp-col-resize:hover::after { background: var(--accent-line); }
body.cp-col-resizing, body.cp-col-resizing * { cursor: col-resize !important; user-select: none !important; }
body.cp-col-resizing .cp-table tbody tr:hover { background: transparent; }
.cp-th--act { width: 48px; }
.cp-th--spacer, .cp-td--spacer { padding: 0 !important; }
.cp-col-spacer { width: auto; }
.cp-sort { display: inline-flex; align-items: center; gap: 3px; background: transparent; border: 0; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; }
.cp-sort svg { transition: transform 0.12s; }
.cp-sort.is-on { color: var(--accent); }
.cp-sort:hover { color: var(--text); }
.cp-table tbody tr { cursor: pointer; transition: background 0.12s; border-bottom: 1px solid var(--border-soft); }
.cp-table tbody tr:last-child { border-bottom: 0; }
.cp-table tbody tr:hover { background: var(--surface-2); }
.cp-table tbody tr.is-past { opacity: 0.5; }
.cp-table td { padding: 11px 14px; vertical-align: middle; }
.cp-td--date { white-space: nowrap; }
.cp-td__d { font-weight: 600; color: var(--text); font-family: var(--mono); font-size: 12.5px; }
.cp-td__end { color: var(--faint); font-family: var(--mono); font-size: 11px; margin-left: 6px; }
.cp-td--time { color: var(--muted); white-space: nowrap; font-size: 12.5px; }
.cp-td--title { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-td__note { display: block; color: var(--faint); font-weight: 400; font-size: 12px; margin-top: 2px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-td--cat .cp-tag, .cp-table td .cp-tag { max-width: 100%; }
.cp-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text);
  background: color-mix(in oklch, var(--cc, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--cc, var(--accent)) 30%, transparent);
  border-radius: 99px; padding: 3px 10px; white-space: nowrap;
}
.cp-tag i { width: 7px; height: 7px; border-radius: 99px; background: var(--cc, var(--accent)); }
.cp-td--act { width: 40px; text-align: right; }
.cp-rowx {
  width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent;
  color: var(--faint); cursor: pointer; display: inline-grid; place-items: center;
  opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.cp-table tbody tr:hover .cp-rowx { opacity: 1; }
.cp-rowx:hover { background: color-mix(in oklch, var(--cal-office) 16%, transparent); color: var(--cal-office); }

/* category manager */
.cp-catlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 320px; overflow-y: auto; }
.cp-catrow { display: flex; align-items: center; gap: 10px; }
.cp-catrow__name { flex: 1; min-width: 0; }
.cp-catrow__count {
  font-family: var(--mono); font-size: 11px; color: var(--faint); min-width: 20px; text-align: center;
}
.cp-catrow__del {
  width: 30px; height: 30px; border-radius: 8px; border: 0; background: var(--surface-2);
  color: var(--faint); cursor: pointer; display: grid; place-items: center; flex: none;
  transition: background 0.14s, color 0.14s;
}
.cp-catrow__del:hover:not(:disabled) { background: color-mix(in oklch, var(--cal-office) 16%, transparent); color: var(--cal-office); }
.cp-catrow__del:disabled { opacity: 0.3; cursor: default; }
.cp-catadd { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--border); }
.cp-catnote { font-size: 11.5px; color: var(--faint); margin-top: 10px; }

/* swatch picker */
.cp-sw-wrap { position: relative; flex: none; }
.cp-sw {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--surface);
}
.cp-sw--none { background: var(--surface-3); border-style: dashed; cursor: default; box-shadow: none; flex: none; }
.cp-input:disabled { opacity: 0.65; cursor: default; }
.cp-sw-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px; box-shadow: 0 18px 40px -18px oklch(0 0 0 / 0.8); width: 196px;
}
.cp-sw--opt { width: 28px; height: 28px; box-shadow: none; }
.cp-sw--opt.is-on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3px var(--text); }

.cp-field__catlabel { display: flex; align-items: center; justify-content: space-between; }
.cp-field__manage {
  background: transparent; border: 0; cursor: pointer; color: var(--accent);
  font-family: var(--ui); font-size: 11px; text-transform: none; letter-spacing: 0; padding: 0;
}
.cp-field__manage:hover { text-decoration: underline; }

/* ============================================================
   Habit Tracker page
   ============================================================ */
.ht { max-width: 1340px; }

/* day navigator — mirrors Journal's .jr-daynav (full-width card, centered label) */
.ht-daynav { margin-bottom: 18px; }

/* month calendar popover */
.ht-cal {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 40;
  width: 274px; padding: 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 22px 50px -20px oklch(0 0 0 / 0.7);
}
.ht-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ht-cal__title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.ht-cal__nav {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--border-soft); border-radius: 7px; background: var(--surface);
  color: var(--text); cursor: pointer;
}
.ht-cal__nav:hover { background: var(--surface-2); }
.ht-cal__dow, .ht-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ht-cal__dow { margin-bottom: 4px; }
.ht-cal__dow span {
  text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--faint); padding: 2px 0;
}
.ht-cal__day {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  color: var(--text); font-size: 12.5px; cursor: pointer;
  transition: background .1s, border-color .1s;
}
.ht-cal__day:hover { background: var(--surface-2); }
.ht-cal__day.is-out { color: var(--faint); }
.ht-cal__day.is-today { font-weight: 700; color: var(--accent); }
.ht-cal__day.is-sel { background: var(--accent); color: var(--accent-contrast, #fff); border-color: var(--accent); }
.ht-cal__day.is-sel:hover { background: var(--accent); }
.ht-cal__day.is-future { opacity: .3; cursor: default; }
.ht-cal__day.is-future:hover { background: transparent; }
.ht-cal__foot { display: flex; justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.ht-cal__foot .cp-btn { width: 100%; justify-content: center; }

/* summary stat strip */
.ht-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  margin-bottom: 22px;
}
.ht-stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.ht-stat__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
.ht-stat__value { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin-top: 2px; }
.ht-stat__sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-stat.is-accent { border-color: var(--accent-line); }
.ht-stat.is-accent .ht-stat__value { color: var(--accent); }

/* sections */
.ht-section { margin-bottom: 24px; }
.ht-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 2px 11px;
}
.ht-section__head h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.ht-section__count {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--faint);
}
.ht-list { padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
.ht-alldone {
  padding: 22px; text-align: center; color: var(--muted); font-size: 13.5px;
}
.cp-btn--ghost.is-on { color: var(--accent); border-color: var(--accent-line); background: color-mix(in oklch, var(--accent) 10%, var(--surface)); }

/* habit row */
.ht-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px; border-radius: 12px; cursor: pointer;
  transition: background 0.14s;
}
.ht-row:hover { background: var(--surface-2); }
.ht-row.is-complete .ht-row__name { color: var(--muted); }

/* tap target */
.ht-check {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface-2);
  cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: background 0.16s, border-color 0.16s, transform 0.1s;
}
.ht-check:hover { border-color: var(--accent); }
.ht-check:active { transform: scale(0.92); }
.ht-check__inner {
  width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent-ink);
  background: transparent;
}
/* count ring: outer is conic gradient (inline), inner disc masks the centre */
.ht-check.is-partial { border-color: transparent; background: var(--surface-3); }
.ht-check.is-partial .ht-check__inner { background: var(--surface); margin: 3px; width: auto; height: auto; inset: 3px; }
.ht-check__count { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--text); }
.ht-check__count i { font-style: normal; color: var(--faint); font-size: 11px; }
.ht-check.is-done { border-color: transparent; background: var(--accent); }
.ht-check.is-done:hover { background: var(--accent-dim); }
/* weekly target met on other days, but this day is still open: filled, not ticked */
.ht-check.is-filled { border-color: color-mix(in oklch, var(--accent) 45%, transparent); background: color-mix(in oklch, var(--accent) 18%, var(--surface-2)); }
.ht-check.is-filled:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 26%, var(--surface-2)); }
.ht-check__dot { width: 12px; height: 12px; border-radius: 50%; background: color-mix(in oklch, var(--accent) 70%, var(--surface)); }

/* row body */
.ht-row__body { flex: 1; min-width: 0; }
.ht-row__name {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 500; color: var(--text);
}
.ht-row__ico { display: inline-flex; color: var(--muted); flex: none; }
.ht-row__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px;
  font-size: 11.5px; color: var(--faint);
}
.ht-freq {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.ht-sub { position: relative; padding-left: 13px; white-space: nowrap; }
.ht-sub::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--border); transform: translateY(-50%); }

/* hero metric (right side) */
.ht-hero { flex: none; min-width: 76px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ht-hero__big { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.ht-hero__big i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--faint); margin-left: 3px; }
.ht-hero__big--text { font-size: 16px; }
.ht-hero__cap {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}
/* streak variant: flame + number */
.ht-hero--streak { flex-direction: row; align-items: center; gap: 7px; }
.ht-flame { display: inline-flex; color: var(--faint); transition: color 0.16s; }
.ht-hero--streak.is-lit .ht-flame { color: var(--cal-office); }
.ht-hero--streak .ht-hero__big { font-size: 24px; }
/* percent variant: number + bar */
.ht-hero--pct { min-width: 92px; }
.ht-bar { width: 84px; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.ht-bar span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width 0.2s; }

/* new/edit modal extras */
.ht-seg { width: 100%; }
.ht-seg button { flex: 1; }
.ht-fieldhint { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 6px; }
.ht-stepper {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px;
  padding: 4px; height: 40px;
}
.ht-stepper button {
  width: 30px; height: 30px; border-radius: 7px; border: 0; cursor: pointer;
  background: var(--surface-3); color: var(--muted); font-size: 18px; line-height: 1;
  display: grid; place-items: center;
}
.ht-stepper button:hover { color: var(--text); background: var(--border); }
.ht-stepper span { font-family: var(--mono); font-size: 15px; color: var(--text); min-width: 24px; text-align: center; }
.ht-stepper--sm { height: 34px; padding: 3px; flex: none; width: auto; }
.ht-stepper--sm button { width: 26px; height: 26px; font-size: 16px; }
.ht-stepper--sm span { font-size: 13.5px; min-width: 20px; }

/* per-habit auto to-do setting */
.ht-autotodo { border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: 2px; }
.ht-autotodo__toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ht-autotodo__toggle input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; flex: none; }
.ht-autotodo__title { font-size: 13.5px; color: var(--text); font-weight: 500; }
.ht-autotodo__title em { color: var(--faint); font-style: normal; font-weight: 400; font-size: 12.5px; }
.ht-autotodo__body { margin: 12px 0 0 27px; display: flex; flex-direction: column; gap: 9px; }
.ht-autotodo__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ht-autotodo__lbl { font-size: 13px; color: var(--muted); }
.ht-autotodo__unit { font-size: 12.5px; color: var(--faint); }
.ht-autotodo__hint { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--faint); }
.ht-iconpick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.ht-iconopt {
  aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--border-soft);
  background: var(--surface-2); color: var(--muted); cursor: pointer;
  display: grid; place-items: center; transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.ht-iconopt:hover { color: var(--text); background: var(--surface-3); }
.ht-iconopt.is-on { color: var(--accent); border-color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, var(--surface)); }

@media (max-width: 720px) {
  .ht-summary { grid-template-columns: 1fr; gap: 12px; }
  .ht-list { grid-template-columns: 1fr; }
  .ht-row { gap: 11px; }
  .ht-iconpick { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   Agenda page
   ============================================================ */
.ag { max-width: 1240px; }
.cp-btn--sm { padding: 6px 11px; font-size: 12px; }
.ag-cols { display: grid; grid-template-columns: 1fr 408px; gap: 26px; align-items: start; }

/* ---- quick add ---- */
.ag-add {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 7px 8px; margin-bottom: 14px;
}
.ag-add__plus {
  flex: none; width: 34px; height: 34px; border-radius: 9px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center;
  transition: background 0.14s;
}
.ag-add__plus:hover { background: var(--accent-dim); }
.ag-add__text {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  font-family: var(--ui); font-size: 14.5px; color: var(--text);
}
.ag-add__text::placeholder { color: var(--faint); }
.ag-add__sel, .ag-add__date {
  flex: none; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px;
  color: var(--muted); font-family: var(--ui); font-size: 12.5px; padding: 6px 8px; cursor: pointer;
}
.ag-add__sel:focus, .ag-add__date:focus { outline: none; border-color: var(--accent); }
.ag-add__date { color: var(--muted); }
.ag-add__date::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.ag-add__imp {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 4px 8px;
}
.ag-add__imp > span { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--cal-office); }
.ag-add__imp input {
  width: 30px; background: transparent; border: 0; outline: none; -moz-appearance: textfield;
  font-family: var(--mono); font-size: 13px; color: var(--text); text-align: center;
}
.ag-add__imp input::-webkit-outer-spin-button, .ag-add__imp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- filter chips ---- */
.ag-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; }
.ag-filters__add { margin-left: auto; }
.ag-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 99px;
  color: var(--muted); font-size: 12.5px; padding: 6px 13px; cursor: pointer;
  transition: color 0.14s, background 0.14s, border-color 0.14s;
}
.ag-chip:hover { color: var(--text); background: var(--surface-2); }
.ag-chip.is-on { color: var(--text); background: var(--surface-2); border-color: var(--accent-line); }
.ag-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc, var(--muted)); flex: none; }
.ag-chip__n { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* ---- task list (aligned grid table) ---- */
.ag-tasks { padding: 8px 10px; --ag-grid: 24px minmax(0, 1fr) 48px 108px 74px 86px; }
.ag-group + .ag-group { margin-top: 6px; }
.ag-group__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 8px 6px; 
}
.ag-group__head > span:first-child {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
.ag-group__n { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.ag-group__list { display: flex; flex-direction: column; }

/* column header */
.ag-thead {
  display: grid; grid-template-columns: var(--ag-grid); align-items: center; gap: 10px;
  padding: 4px 8px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 2px;
}
.ag-thead > span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
.ag-thead .ag-col--imp, .ag-thead .ag-col--date, .ag-thead .ag-col--left { text-align: center; }
.ag-thead .ag-col--left { text-align: right; }

.ag-task {
  display: grid; grid-template-columns: var(--ag-grid); align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 10px; cursor: pointer;
  transition: background 0.14s;
}
.ag-task:hover { background: var(--surface-2); }
.ag-task__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-task__label { min-width: 0; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-task.is-done .ag-task__label { color: var(--faint); text-decoration: line-through; }
.ag-task__goal {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  font-size: 11.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ag-task__goaldot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); }
.ag-task.is-done .ag-task__goal { color: var(--faint); }
.ag-col { min-width: 0; display: flex; align-items: center; }
.ag-col--imp { justify-content: center; }
.ag-col--list { justify-content: flex-start; }
.ag-col--date { font-family: var(--mono); font-size: 11.5px; color: var(--muted); justify-content: center; }
.ag-col--left { font-family: var(--mono); font-size: 11.5px; justify-content: flex-end; white-space: nowrap; color: var(--muted); }
.ag-task.is-done .ag-col--date, .ag-task.is-done .ag-col--left { color: var(--faint); }

/* importance badge — neutral */
.ag-imp {
  width: 26px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft);
}

.ag-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--tc, var(--border)); background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--accent-ink); padding: 0;
  transition: background 0.14s, border-color 0.14s, transform 0.1s;
}
.ag-check:hover { border-color: var(--accent); }
.ag-check:active { transform: scale(0.88); }
.ag-check.is-done { background: var(--accent); border-color: transparent; }

.ag-tag {
  font-size: 11px; color: var(--muted); padding: 2px 9px; border-radius: 99px;
  border: 1px solid var(--border-soft); background: var(--surface-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

.ag-empty { padding: 34px 4px; text-align: center; color: var(--faint); font-size: 13.5px; }

/* auto-to-do rows derived from a habit */
.ag-task.is-habit { cursor: default; }
.ag-task.is-habit:hover { background: var(--surface-2); }
.ag-task__habit {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-ink); padding: 1px 7px 1px 5px; border-radius: 99px;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
}
.ag-task__habit svg { opacity: 0.9; }
.ag-task__recur {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: oklch(0.52 0.09 235); padding: 1px 7px 1px 5px; border-radius: 99px;
  background: oklch(0.70 0.09 235 / 0.15);
}
.ag-task__recur svg { opacity: 0.9; }

/* repeating-task manager + editor */
.ag-rc-card { max-width: 560px; }
.ag-rc-intro { margin: 0 0 2px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.ag-rc-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; max-height: 46vh; overflow-y: auto; }
.ag-rc-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft); cursor: pointer; transition: background .15s, border-color .15s;
}
.ag-rc-item:hover { background: var(--surface-3); border-color: var(--border); }
.ag-rc-item__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex: none; color: oklch(0.52 0.09 235); background: oklch(0.70 0.09 235 / 0.15); }
.ag-rc-item__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ag-rc-item__text { font-size: 14px; font-weight: 500; color: var(--text); }
.ag-rc-item__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.ag-rc-item__x { border: 0; background: none; color: var(--faint); cursor: pointer; display: grid; place-items: center; padding: 4px; border-radius: 7px; flex: none; }
.ag-rc-item__x:hover { color: oklch(0.62 0.16 30); background: var(--surface-3); }

.ag-rc-editor { display: flex; flex-direction: column; gap: 14px; }
.ag-rc-modeseg { width: 100%; }
.ag-rc-modeseg button { flex: 1; }
.ag-rc-interval { display: flex; align-items: center; gap: 8px; }
.ag-rc-interval select { width: auto; }
.ag-rc-interval select:first-child { flex: none; width: 76px; }
.ag-rc-interval select:last-child { flex: 1; min-width: 0; }
.ag-rc-interval__u { font-size: 13px; color: var(--muted); }
.ag-rc-hint { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ag-rc-flexhint { margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: var(--faint); }
.ag-rc-hint svg { color: oklch(0.52 0.09 235); flex: none; }
.ag-rc-dates { display: flex; flex-direction: column; gap: 8px; }
.ag-rc-dates__row { display: flex; align-items: center; gap: 8px; }
.ag-rc-dates__row .cp-input { flex: 1; }
.ag-rc-dates__x { border: 0; background: var(--surface-2); color: var(--faint); cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; flex: none; }
.ag-rc-dates__x:hover:not(:disabled) { color: oklch(0.62 0.16 30); }
.ag-rc-dates__x:disabled { opacity: 0.4; cursor: default; }
.ag-rc-dates__add { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--border); background: none; color: var(--muted); cursor: pointer; font-size: 12.5px; padding: 6px 11px; border-radius: 8px; }
.ag-rc-dates__add:hover { color: var(--text); border-color: var(--muted); }
.ag-tag--habit { color: var(--accent-ink); border-color: color-mix(in oklch, var(--accent) 35%, var(--border-soft)); background: color-mix(in oklch, var(--accent) 10%, var(--surface-2)); }
.ag-tag--list {
  color: color-mix(in oklch, var(--lc) 70%, var(--ink));
  border-color: color-mix(in oklch, var(--lc) 40%, var(--border-soft));
  background: color-mix(in oklch, var(--lc) 12%, var(--surface-2));
}
.ag-tag--list::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 99px;
  background: var(--lc); margin-right: 6px; vertical-align: 1px;
}
.ag-imp--habit { color: var(--faint); }

/* completed section */
.ag-done { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 4px; }
.ag-done__toggle {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: transparent; border: 0; cursor: pointer; padding: 10px 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}
.ag-done__toggle:hover { color: var(--muted); }

/* ---- column headers (shared by To-do + Big goals) ---- */
.ag-colhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 2px 13px; min-height: 32px;
}
.ag-colhead h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.ag-colhead__actions { display: flex; align-items: center; gap: 8px; }

/* ---- goals side ---- */
.ag-goalfilters { margin-bottom: 10px; }
.ag-goals { padding: 6px 16px; }
.ag-goal { cursor: pointer; border-radius: 10px; transition: background 0.14s; padding-left: 8px; padding-right: 8px; }
.ag-goal:hover { background: var(--surface-2); }
.ag-side__foot {
  margin-top: 12px; padding: 0 2px; text-align: right;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--faint);
}

/* progress slider in goal modal */
.ag-slider input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 99px;
  background: var(--surface-3); cursor: pointer; margin: 8px 0;
}
.ag-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gc, var(--accent)); border: 2px solid var(--surface); cursor: pointer;
}
.ag-slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--gc, var(--accent)); border: 2px solid var(--surface); cursor: pointer;
}

.ag-slider__scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--faint); margin-top: -2px; }

/* checklist progress chip on task rows */
.ag-task__meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ag-task__cl {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
}
.ag-task__cl svg { opacity: 0.85; }

/* checklist editor (task modal) */
.ag-cl { display: flex; flex-direction: column; gap: 6px; }
.ag-cl__row, .ag-cl__add { display: flex; align-items: center; gap: 8px; }
.ag-cl__box {
  flex: none; width: 20px; height: 20px; border-radius: 6px; cursor: pointer;
  border: 2px solid var(--border); background: transparent; display: grid; place-items: center;
  color: var(--accent-ink); padding: 0; transition: background 0.14s, border-color 0.14s;
}
.ag-cl__box:hover { border-color: var(--accent); }
.ag-cl__box.is-done { background: var(--accent); border-color: transparent; }
.ag-cl__text {
  flex: 1; min-width: 0; font-family: var(--ui); font-size: 13.5px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 7px 10px;
  transition: border-color 0.14s, background 0.14s;
}
.ag-cl__text:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.ag-cl__text::placeholder { color: var(--faint); }
.ag-cl__text.is-done { color: var(--faint); text-decoration: line-through; }
.ag-cl__x {
  flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--faint);
  display: grid; place-items: center; transition: color 0.14s, background 0.14s;
}
.ag-cl__x:hover { color: var(--cal-office); background: var(--surface-3); }
.ag-cl__addico { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--faint); }

/* inline "new list" editor in the task modal */
.ag-newlist { display: flex; align-items: stretch; gap: 6px; }
.ag-newlist .cp-input { flex: 1; min-width: 0; }
.ag-newlist__ok, .ag-newlist__x {
  flex: none; width: 38px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--muted);
  display: grid; place-items: center; transition: color 0.14s, background 0.14s, border-color 0.14s;
}
.ag-newlist__ok:hover:not(:disabled) { color: var(--accent-ink); border-color: var(--accent-line); background: color-mix(in oklch, var(--accent) 14%, var(--surface-2)); }
.ag-newlist__ok:disabled { opacity: 0.45; cursor: default; }
.ag-newlist__x:hover { color: var(--text); background: var(--surface-3); }

.ag-listmgr {
  margin-left: 8px; border: 0; background: transparent; cursor: pointer; padding: 0;
  font-family: var(--ui); font-size: 11px; color: var(--accent-ink);
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
.ag-listmgr:hover { text-decoration: underline; }

/* ---- goal detail panel (sidebar) ---- */
.ag-gd { display: flex; flex-direction: column; padding: 2px 0; }
.ag-gd__back {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  background: transparent; border: 0; cursor: pointer; padding: 6px 4px; margin-bottom: 4px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
  transition: color 0.14s;
}
.ag-gd__back:hover { color: var(--text); }
.ag-gd__head { display: flex; align-items: flex-start; gap: 13px; padding: 2px 2px 14px; border-bottom: 1px solid var(--border-soft); }
.ag-gd__titles { flex: 1; min-width: 0; }
.ag-gd__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.ag-gd__meta { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.ag-gd__edit {
  flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--muted);
  display: grid; place-items: center; transition: color 0.14s, background 0.14s;
}
.ag-gd__edit:hover { color: var(--text); background: var(--surface-3); }
.ag-gd__prog { padding: 14px 2px; border-bottom: 1px solid var(--border-soft); }
.ag-gd__progtop { display: flex; align-items: baseline; justify-content: space-between; }
.ag-gd__progtop > span:first-child { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ag-gd__pct { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--gc, var(--accent)); }
.ag-gd__tasks { padding: 14px 0 4px; display: flex; flex-direction: column; gap: 2px; }
.ag-gd__tasksh {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}
.ag-gd__tasksh > span { letter-spacing: 0.04em; }
.ag-gd__empty { padding: 14px 4px; color: var(--faint); font-size: 12.5px; line-height: 1.5; }
.ag-gd__donelbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 12px 2px 4px; }
.ag-gdtask { display: flex; align-items: center; gap: 11px; padding: 8px 6px; border-radius: 9px; transition: background 0.14s; }
.ag-gdtask:hover { background: var(--surface-2); }
.ag-gdtask__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-gdtask__label { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-gdtask.is-done .ag-gdtask__label { color: var(--faint); text-decoration: line-through; }
.ag-gdtask__meta { display: flex; align-items: center; gap: 10px; }
.ag-gdtask__due { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.ag-gdtask__imp { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--faint); width: 20px; text-align: right; }
.ag-gdtask__wt { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 7px; border: 1px solid var(--border-soft); border-radius: 7px; background: var(--surface); cursor: text; transition: border-color 0.12s; }
.ag-gdtask__wt:focus-within { border-color: var(--accent); }
.ag-gdtask__wt input { width: 26px; border: 0; background: transparent; color: var(--text); font-family: var(--mono); font-size: 12px; text-align: right; -moz-appearance: textfield; padding: 0; }
.ag-gdtask__wt input::-webkit-outer-spin-button, .ag-gdtask__wt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ag-gdtask__wt span { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.ag-gm-wthint { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 2px 2px 8px; }
.ag-gm-wthint.is-ok { color: var(--accent-ink); }
.ag-gd__add { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.ag-gd__addbtn { flex: none; width: 32px; height: 32px; border-radius: 8px; border: 0; cursor: pointer; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; transition: background 0.14s; }
.ag-gd__addbtn:hover { background: var(--accent-dim); }
.ag-gd__add input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 11px; font-family: var(--ui); font-size: 13.5px; color: var(--text); }
.ag-gd__add input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.ag-gd__add input::placeholder { color: var(--faint); }

/* ---- goal modal: linked tasks ---- */
.ag-goalmodal .cp-modal__card { max-width: 480px; }
.ag-gm-hide {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  margin: -4px 0 13px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  font-size: 13.5px; color: var(--text); transition: border-color 0.14s;
}
.ag-gm-hide:hover { border-color: var(--accent-line); }
.ag-gm-hide input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex: none; }
.ag-gm-hide em { color: var(--faint); font-style: normal; font-size: 12px; }
.ag-gm-tasks { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border-soft); border-radius: 10px; padding: 6px; background: var(--surface-2); }
.ag-gm-tasks .ag-gdtask:hover { background: var(--surface-3); }
.ag-gm-empty { padding: 12px 8px; color: var(--faint); font-size: 12.5px; line-height: 1.5; }
.ag-gdtask__unlink { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; transition: color 0.14s, background 0.14s; }
.ag-gdtask__unlink:hover { color: var(--cal-office); background: var(--surface); }
.ag-gm-add { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ag-gm-add input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 11px; font-family: var(--ui); font-size: 13.5px; color: var(--text); }
.ag-gm-add input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.ag-gm-add input::placeholder { color: var(--faint); }
.ag-gm-assoc { position: relative; display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.ag-gm-assoc__l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); flex: none; }
.ag-gm-assoc select { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 30px 8px 11px; font-family: var(--ui); font-size: 13px; color: var(--text); cursor: pointer; }
.ag-gm-assoc select:focus { outline: none; border-color: var(--accent); }
.ag-gm-assoc svg { position: absolute; right: 10px; pointer-events: none; color: var(--muted); }

@media (max-width: 900px) {
  .ag-cols { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 620px) {
  .ag-tasks { --ag-grid: 22px minmax(0, 1fr) 40px 84px; }
  .ag-col--date, .ag-thead .ag-col--date { display: none; }
  .ag-col--left, .ag-thead .ag-col--left { display: none; }
}
@media (max-width: 540px) {
  .ag-add { flex-wrap: wrap; }
  .ag-add__text { order: -1; width: 100%; flex-basis: 100%; padding: 4px 2px; }
}

/* ============================================================
   Journal page
   ============================================================ */
.jr { max-width: 1340px; }
.jr-cols { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; }
.jr-cols--solo { grid-template-columns: 1fr; }
.jr-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ---- day navigator ---- */
.jr-daynav {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
}
.jr-daynav__arrow {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border-soft); background: var(--surface-2);
  color: var(--muted); cursor: pointer; display: grid; place-items: center;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.jr-daynav__arrow:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.jr-daynav__arrow:disabled { opacity: 0.35; cursor: default; }
.jr-daynav__label { flex: 1; position: relative; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.jr-daynav__pick {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; background: transparent; border: 0; cursor: pointer; padding: 4px 6px;
  border-radius: 10px; transition: background 0.14s;
}
.jr-daynav__pick:hover { background: var(--surface-2); }
.jr-daynav__rel { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.jr-daynav__full { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.jr-daynav__cap { display: inline-flex; color: var(--faint); }

/* date-picker popover */
.jr-cal {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 40; width: 274px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 22px 50px -20px oklch(0 0 0 / 0.7); padding: 12px;
}
.jr-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jr-cal__title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); background: transparent; border: 0; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: background 0.12s; }
.jr-cal__title:hover { background: var(--surface-2); }
.jr-cal__year { color: var(--accent-ink); }
.jr-cal__years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 2px 0; }
.jr-cal__yr { padding: 9px 0; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 12.5px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.jr-cal__yr:hover { background: var(--surface-3); }
.jr-cal__yr.is-sel { background: var(--accent); color: #fff; font-weight: 600; }
.jr-cal__nav { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--muted); border-radius: 8px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.jr-cal__nav:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.jr-cal__nav:disabled { opacity: 0.35; cursor: default; }
.jr-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.jr-cal__dow span { font-family: var(--mono); font-size: 10px; color: var(--faint); text-align: center; }
.jr-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jr-cal__empty { aspect-ratio: 1 / 1; }
.jr-cal__day {
  position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--text);
  font-size: 12.5px; cursor: pointer; transition: background 0.12s, color 0.12s;
}
.jr-cal__day:hover:not(:disabled) { background: var(--surface-2); }
.jr-cal__day:disabled { color: var(--faint); opacity: 0.4; cursor: default; }
.jr-cal__day.is-today { color: var(--accent-ink); font-weight: 600; }
.jr-cal__day.is-sel { background: var(--accent); color: #fff; font-weight: 600; }
.jr-cal__dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.jr-cal__today {
  width: 100%; margin-top: 10px; padding: 8px; border-radius: 9px;
  border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--muted);
  font-size: 12px; cursor: pointer; transition: background 0.12s, color 0.12s;
}
.jr-cal__today:hover { background: var(--surface-3); color: var(--text); }

/* ---- ratings ---- */
.jr-ratings { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-soft); overflow: hidden; }
.jr-rate { background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.jr-rate__top { display: flex; align-items: center; gap: 9px; }
.jr-rate__ico { display: grid; place-items: center; color: var(--faint); transition: color 0.15s; }
.jr-rate__label { font-size: 14px; font-weight: 500; color: var(--text); }
.jr-rate__word { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--faint); transition: color 0.15s; }

.jr-pips { display: flex; gap: 8px; }
.jr-pip {
  flex: 1; height: 26px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface-2);
  transition: background 0.14s, border-color 0.14s, transform 0.08s;
}
.jr-pip:hover { border-color: var(--muted); }
.jr-pip:active { transform: scale(0.94); }
.jr-pip.is-on { background: var(--pc); border-color: transparent; }

/* sleep slider */
.jr-sleep { display: flex; flex-direction: column; gap: 3px; }
.jr-sleep__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px;
  background: var(--surface-3); cursor: pointer; margin: 8px 0 2px;
}
.jr-sleep__range.is-empty { opacity: 0.55; }
.jr-sleep__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--cal-work); border: 2px solid var(--surface); cursor: pointer;
}
.jr-sleep__range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--cal-work); border: 2px solid var(--surface); cursor: pointer;
}
.jr-sleep__scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
.jr-sleep3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2px; }
.jr-sleep3__box { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.jr-sleep3__box > span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.jr-sleep3__box input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px 9px;
}
.jr-sleep3__box input:focus { outline: none; border-color: var(--cal-work); }
.jr-sleep3__box input.is-empty { color: var(--faint); }
.jr-sleep3__len { position: relative; display: flex; align-items: center; }
.jr-sleep3__len input { padding-right: 24px; }
.jr-sleep3__len em { position: absolute; right: 10px; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--faint); pointer-events: none; }
.jr-sleep__link {
  margin-top: 0; align-self: center; display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--faint); transition: color 0.15s;
}
.jr-sleep__link:hover { color: var(--cal-work); }
.jr-sleep__link svg:last-child { opacity: 0.6; transition: transform 0.15s; }
.jr-sleep__link:hover svg:last-child { transform: translateX(2px); }

/* ---- write area ---- */
.jr-write { padding: 16px 18px; gap: 14px; }
.jr-write__area {
  width: 100%; min-height: 132px; resize: vertical;
  font-family: var(--ui); font-size: 15px; line-height: 1.6; color: var(--text);
  background: transparent; border: 0; outline: none; padding: 0;
}
.jr-write__area::placeholder { color: var(--faint); }

/* ---- tags ---- */
.jr-tags { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border-soft); padding-top: 13px; }
.jr-tags__row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.jr-tags__input {
  flex: 1; min-width: 110px; font-family: var(--ui); font-size: 13px; color: var(--text);
  background: transparent; border: 0; outline: none; padding: 4px 2px;
}
.jr-tags__input::placeholder { color: var(--faint); }
.jr-tags__pool { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em;
  padding: 4px 9px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--muted);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.jr-tag:hover { color: var(--text); background: var(--surface-3); }
.jr-tag.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.jr-tag__x { display: grid; place-items: center; opacity: 0.6; }
.jr-tag.is-on:hover .jr-tag__x { opacity: 1; }

/* ---- section heads ---- */
.jr-sectionhead { display: flex; align-items: baseline; gap: 10px; margin: 6px 2px 0; }
.jr-sectionhead h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.jr-sectionhead span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--faint); }
.jr-card { padding: 14px 16px; }

/* ---- shared round check ---- */
.jr-check {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  border: 2px solid var(--border); background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--accent-ink);
  transition: background 0.14s, border-color 0.14s, transform 0.1s;
}
.jr-check:hover { border-color: var(--accent); }
.jr-check.is-done { background: var(--accent); border-color: transparent; }

/* ---- did-it checklist ---- */
.jr-did { display: flex; flex-direction: column; gap: 2px; }
.jr-did__item { display: flex; align-items: center; gap: 11px; padding: 7px 6px; border-radius: 9px; transition: background 0.12s; }
.jr-did__item:hover { background: var(--surface-2); }
.jr-did__text { flex: 1; font-size: 14px; color: var(--text); min-width: 0; }
.jr-did__item.is-done .jr-did__text { color: var(--muted); }
.jr-did__x {
  flex: none; width: 24px; height: 24px; border-radius: 7px; border: 0; background: transparent;
  color: var(--faint); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.jr-did__item:hover .jr-did__x { opacity: 1; }
.jr-did__x:hover { background: var(--surface-3); color: var(--text); }
.jr-did__add { display: flex; align-items: center; gap: 11px; padding: 7px 6px; }
.jr-did__plus { flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; color: var(--faint); border: 1.5px dashed var(--border); }
.jr-did__add input {
  flex: 1; font-family: var(--ui); font-size: 14px; color: var(--text);
  background: transparent; border: 0; outline: none; padding: 2px 0;
}
.jr-did__add input::placeholder { color: var(--faint); }

/* ---- on this day ---- */
.jr-otd { display: flex; flex-direction: column; gap: 16px; }
.jr-otd__empty { font-size: 13.5px; color: var(--muted); padding: 8px 6px; }
.jr-otd__block { display: flex; flex-direction: column; gap: 4px; }
.jr-otd__head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 6px 4px; display: flex; align-items: center; gap: 7px; }
.jr-otd__head--todo { color: var(--faint); }
.jr-otd__sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 6px 6px 2px; }
.jr-otd__sub:first-of-type { margin-top: 2px; }
.jr-otd__n { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0; color: var(--faint); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 0 6px; line-height: 16px; }
.jr-otd__row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 7px 6px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; transition: background 0.12s;
}
.jr-otd__row:hover { background: var(--surface-2); }
.jr-otd__row .jr-check { width: 19px; height: 19px; }
.jr-otd__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.jr-otd__hico { flex: none; display: grid; place-items: center; color: var(--accent); }
.jr-otd__row:not(.is-on) .jr-otd__hico { color: var(--faint); }
.jr-otd__name { flex: 1; font-size: 14px; color: var(--text); min-width: 0; }
.jr-otd__row.is-on .jr-otd__name { color: var(--muted); }
.jr-otd__meta { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.jr-otd__habits { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 6px; }
.jr-otd__subhead { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); margin: 8px 6px 3px; }
.jr-habit {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ui); font-size: 12.5px; color: var(--muted);
  padding: 5px 11px; border-radius: 99px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.jr-habit svg { color: var(--faint); flex: none; }
.jr-habit:hover { color: var(--text); background: var(--surface-3); border-color: var(--border); }
.jr-habit.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.jr-habit.is-on svg { color: var(--accent); }
.jr-habit.is-on:hover { background: color-mix(in oklch, var(--accent) 20%, transparent); }
/* done in its window (not this specific day): muted/less-green + circle, tap to log today too */
.jr-habit.is-filled { background: color-mix(in oklch, var(--accent-dim) 9%, var(--surface-2)); border-color: color-mix(in oklch, var(--accent-dim) 26%, var(--border-soft)); color: var(--muted); }
.jr-habit.is-filled:hover { background: color-mix(in oklch, var(--accent-dim) 16%, var(--surface-2)); border-color: color-mix(in oklch, var(--accent-dim) 45%, transparent); color: var(--text); }
.jr-habit__dot { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in oklch, var(--accent-dim) 42%, var(--muted)); flex: none; }

/* ---- day log (logged today) ---- */
.jl { display: flex; flex-direction: column; gap: 14px; }
/* accent colours routed through --jl-ac so they can be muted without losing per-action --ac */
.jl--mono { --jl-ac: var(--muted); }
.jl-adjust { display: flex; align-items: center; justify-content: flex-end; }
.jl-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.jl-add {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 9px 11px; border-radius: 11px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  transition: background 0.14s, border-color 0.14s, transform 0.08s;
}
.jl-add:hover { background: var(--surface-3); border-color: color-mix(in oklch, var(--jl-ac, var(--ac)) 45%, var(--border)); }
.jl-add:active { transform: scale(0.97); }
.jl-add__ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--jl-ac, var(--ac)); background: color-mix(in oklch, var(--jl-ac, var(--ac)) 14%, transparent);
}
.jl-add__label { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.2; }

.jl-empty { font-size: 13.5px; color: var(--muted); padding: 6px 4px 2px; }
.jl-logs { column-count: 2; column-gap: 6px; }
.jr-cols--solo .jl-logs { column-count: 3; }
.jl-log { break-inside: avoid; margin-bottom: 6px; }
.jl-log {
  display: flex; align-items: center; gap: 11px; min-width: 0; overflow: hidden;
  padding: 9px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-soft);
}
.jl-log__ico { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--jl-ac, var(--ac)); background: color-mix(in oklch, var(--jl-ac, var(--ac)) 14%, transparent); }
.jl-log__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.jl-log__title { font-size: 13.5px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-log__detail { font-family: var(--mono); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-log__tag { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jl-ac, var(--ac)); background: color-mix(in oklch, var(--jl-ac, var(--ac)) 12%, transparent); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.jl-log__x { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; transition: background 0.12s, color 0.12s; }
.jl-log__x:hover { background: var(--surface-3); color: var(--text); }
.jl-log.is-clickable { cursor: pointer; transition: background 0.14s, border-color 0.14s; }
.jl-log.is-clickable:hover { background: var(--surface-3); border-color: var(--border); }
/* logged-record detail view */
.jl-detail__ico { display: inline-grid; place-items: center; color: var(--ac, var(--accent)); margin-right: 9px; vertical-align: -3px; }
.jl-detail__rows { margin: 6px 0 2px; display: flex; flex-direction: column; }
.jl-detail__row { display: flex; gap: 16px; padding: 11px 2px; border-bottom: 1px solid var(--border-soft); }
.jl-detail__row:last-child { border-bottom: 0; }
.jl-detail__row dt { flex: none; width: 96px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.jl-detail__row dd { margin: 0; font-size: 14px; color: var(--text); }

/* per-log time spent + day total */
.jl-log__time { flex: none; display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; color: var(--text); background: var(--surface-3); border-radius: 6px; padding: 3px 7px; }
.jl-total { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; background: color-mix(in oklch, var(--accent) 8%, var(--surface-2)); border: 1px solid var(--border-soft); margin-bottom: 2px; }
.jl-total__ico { display: grid; place-items: center; color: var(--accent); }
.jl-total__txt { font-size: 13px; color: var(--muted); }
.jl-total__txt b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* unified time-spent control */
.jl-time { display: flex; flex-direction: column; gap: 8px; }
.jl-time__set { display: flex; align-items: center; gap: 8px; }
.jl-time__b { flex: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background 0.12s, border-color 0.12s; }
.jl-time__b:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border); }
.jl-time__b:disabled { opacity: 0.4; cursor: default; }
.jl-time__field { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 12px; height: 36px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--surface-2); }
.jl-time__field:focus-within { border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
.jl-time__val { display: inline-flex; align-items: baseline; gap: 4px; }
.jl-time__input { width: 3ch; border: 0; background: transparent; color: var(--text); font-family: var(--mono); font-size: 15px; text-align: right; padding: 0; outline: none; -moz-appearance: textfield; }
.jl-time__input::-webkit-outer-spin-button, .jl-time__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jl-time__unit { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.jl-time__readout { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; color: var(--faint); }
.jl-time__presets { display: flex; gap: 6px; }
.jl-time__p { flex: 1; text-align: center; font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 7px; padding: 6px 4px; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.jl-time__p:hover { background: var(--surface-3); color: var(--text); }
.jl-time__p.is-on { color: var(--accent); background: color-mix(in oklch, var(--accent) 13%, transparent); border-color: color-mix(in oklch, var(--accent) 40%, transparent); }

/* day-log modals */
.jl-modal .cp-modal__card { max-width: 480px; max-height: 90vh; overflow-y: auto; }
.jl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jl-hint { font-size: 12px; color: var(--faint); margin: -6px 0 4px; line-height: 1.45; }
.jl-pick { position: relative; }
.jl-pop {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 20;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
  padding: 5px; box-shadow: 0 18px 40px -18px oklch(0 0 0 / 0.8); max-height: 248px; overflow-y: auto;
}
.jl-popitem { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 8px 9px; border-radius: 8px; transition: background 0.12s; }
.jl-popitem:hover { background: var(--surface-3); }
.jl-popitem__t { font-size: 13.5px; color: var(--text); }
.jl-popitem__s { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-left: auto; }
.jl-create { color: var(--accent); font-size: 13px; }
.jl-create .jl-popitem__t { color: var(--accent); }

.jl-step { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 4px; align-self: flex-start; }
.jl-step__b { width: 30px; height: 30px; border-radius: 7px; border: 0; background: var(--surface-3); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background 0.12s; }
.jl-step__b:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-ink); }
.jl-step__b:disabled { opacity: 0.35; cursor: default; }
.jl-step__v { min-width: 52px; text-align: center; font-size: 15px; font-weight: 600; color: var(--text); }
.jl-step__v i { font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 2px; }

.jl-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.jl-choice__o { font-family: var(--ui); font-size: 12.5px; color: var(--muted); padding: 6px 13px; border-radius: 99px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border-soft); transition: background 0.14s, color 0.14s, border-color 0.14s; }
.jl-choice__o:hover { color: var(--text); background: var(--surface-3); }
.jl-choice__o.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }

.jl-stars { display: flex; gap: 4px; }
.jl-star { border: 0; background: transparent; cursor: pointer; color: var(--border); padding: 2px; transition: color 0.12s, transform 0.08s; }
.jl-star:hover { transform: scale(1.12); }
.jl-star.is-on { color: oklch(0.78 0.14 85); }

.jl-toggle { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); cursor: pointer; margin-bottom: 6px; }
.jl-toggle input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.jl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.jl-chips:empty { display: none; }
.jl-pchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text); background: color-mix(in oklch, var(--pc, var(--accent)) 14%, transparent); border: 1px solid color-mix(in oklch, var(--pc, var(--accent)) 30%, transparent); border-radius: 99px; padding: 3px 5px 3px 11px; }
.jl-pchip__x { width: 18px; height: 18px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.jl-pchip__x:hover { background: var(--surface-3); color: var(--text); }

/* ---- future guard ---- */
.jr-future { padding: 22px; text-align: center; color: var(--muted); font-size: 14px; }
.jr-future__link { background: transparent; border: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }

/* ---- recent rail ---- */
.jr-side { position: sticky; top: 18px; }
.jr-recent__label { position: absolute; bottom: 100%; left: 2px; margin: 0 0 9px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.jr-colhead { margin: 0 2px 13px; display: flex; align-items: flex-start; }
.jr-colhead h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.jr-recent { padding: 6px; gap: 1px; max-height: calc(100vh - 120px); overflow-y: auto; }
.jr-rentry {
  display: flex; gap: 11px; width: 100%; text-align: left; align-items: flex-start;
  padding: 11px 11px; border: 0; background: transparent; border-radius: 11px; cursor: pointer; transition: background 0.12s;
}
.jr-rentry:hover { background: var(--surface-2); }
.jr-rentry.is-sel { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.jr-rentry__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; }
.jr-rentry__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.jr-rentry__date { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); }
.jr-rentry__today { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 1px 6px; border-radius: 99px; }
.jr-rentry__snip { font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jr-rentry.is-sel .jr-rentry__snip { color: var(--text); }
.jr-rentry__tags { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.02em; }

@media (max-width: 900px) {
  .jr-cols { grid-template-columns: 1fr; gap: 22px; }
  .jr-side { position: static; }
  .jr-recent { max-height: none; }
  .jl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .jr-ratings { grid-template-columns: 1fr; }
}

/* ============================================================
   Journal tabs + Notes tab + shared tag chips / picker
   ============================================================ */
.jr-tabs { display: flex; gap: 4px; margin: 4px 0 22px; border-bottom: 1px solid var(--border-soft); }
.jr-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--muted);
  background: none; border: 0; cursor: pointer;
  padding: 9px 4px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color 0.14s, border-color 0.14s;
}
.jr-tab + .jr-tab { margin-left: 18px; }
.jr-tab svg { color: var(--faint); transition: color 0.14s; }
.jr-tab:hover { color: var(--text); }
.jr-tab.is-on { color: var(--text); border-bottom-color: var(--accent); }
.jr-tab.is-on svg { color: var(--accent); }
.jr-tab__n { font-family: var(--mono); font-size: 10px; color: var(--faint); background: var(--surface-2); border-radius: 99px; padding: 1px 6px; }
.jr-tab.is-on .jr-tab__n { color: var(--accent-ink); background: var(--accent-soft); }

/* shared tag chip (picker, note cards, filter row) */
.ntag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: 99px;
  padding: 3px 9px; cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.ntag:hover { color: var(--text); background: var(--surface-3); }
.ntag.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.ntag__x { display: grid; place-items: center; opacity: 0.55; }
.ntag.is-on:hover .ntag__x, .ntag:hover .ntag__x { opacity: 1; }

/* searchable / creatable tag picker */
.ntp { position: relative; flex: 1; min-width: 0; }
.ntp__field {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px;
  padding: 7px 9px; cursor: text; transition: border-color 0.14s, background 0.14s;
}
.ntp__field.is-open, .ntp__field:focus-within { border-color: var(--accent); background: var(--surface); }
.ntp__input {
  flex: 1; min-width: 120px; font-family: var(--ui); font-size: 13px; color: var(--text);
  background: transparent; border: 0; outline: none; padding: 2px;
}
.ntp__input::placeholder { color: var(--faint); }
.ntp__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  max-height: 230px; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: var(--shadow); padding: 5px;
}
.ntp__opt {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  font-family: var(--ui); font-size: 13px; color: var(--text);
  background: none; border: 0; border-radius: 7px; padding: 8px 9px; cursor: pointer;
  transition: background 0.1s;
}
.ntp__opt:hover { background: var(--surface-3); }
.ntp__hash { color: var(--faint); }
.ntp__opt--new { color: var(--accent-ink); }
.ntp__opt--new svg { color: var(--accent); }
.ntp__opt--new strong { font-weight: 600; }

/* notes tab layout */
.ntab { display: flex; flex-direction: column; gap: 18px; }
.ntab-add { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ntab-add__text {
  font-family: var(--ui); font-size: 14px; line-height: 1.55; color: var(--text);
  background: transparent; border: 0; outline: none; resize: vertical;
  min-height: 64px; width: 100%;
}
.ntab-add__text::placeholder { color: var(--faint); }
.ntab-add__foot { display: flex; align-items: flex-start; gap: 10px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.ntab-add__btn { flex: none; align-self: stretch; }

.ntab-tools { display: flex; flex-direction: column; gap: 12px; }
.ntab-filterbar { display: flex; flex-direction: column; gap: 12px; }
.ntab-fb__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ntab-fb__row .ntab-search { flex: 1; min-width: 200px; }
.ntab-fb__row .an-filters__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ntab-fb__tags { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ntab-fb__clear { margin-left: 2px; }
.ntab-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 9px 13px; color: var(--faint); transition: border-color 0.14s;
}
.ntab-search:focus-within { border-color: var(--accent); color: var(--muted); }
.ntab-search input {
  flex: 1; font-family: var(--ui); font-size: 13.5px; color: var(--text);
  background: transparent; border: 0; outline: none;
}
.ntab-search input::placeholder { color: var(--faint); }
.ntab-filter { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ntab-filter__clear {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--faint); background: none; border: 0; cursor: pointer; padding: 3px 4px;
}
.ntab-filter__clear:hover { color: var(--text); }

.ntab-grid { columns: 3 290px; column-gap: 14px; }
.ntab-grid > .ncard { break-inside: avoid; margin-bottom: 14px; }
.ncard {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-left: 2px solid var(--accent);
  border-radius: 4px var(--radius-sm) var(--radius-sm) 4px;
  display: flex; flex-direction: column;
  transition: border-color 0.14s, background 0.14s;
}
.ncard:hover { border-color: var(--border); border-left-color: var(--accent); }
.ncard__body {
  text-align: left; background: none; border: 0; cursor: pointer;
  padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 7px;
}
.ncard__body:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-line); border-radius: 0 var(--radius-sm) 0 0; }
.ncard__time { font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: 0.03em; display: flex; align-items: center; gap: 8px; }
.ncard__done { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.ncard.is-done { border-left-color: color-mix(in oklch, var(--accent) 45%, var(--border-soft)); }
.ncard.is-done .ncard__text { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--muted) 55%, transparent); }
.ncard__text { font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.ncard__text em { color: var(--accent-dim); font-style: italic; }
.ncard__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 13px; }
.ntab-empty { color: var(--faint); font-size: 13.5px; padding: 32px 4px; text-align: center; }

/* dashboard widget mini-tags + modal picker */
.note__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; flex: none; }
.note__tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.02em; color: var(--accent-dim); }
.note-modal__tags { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.note-modal__taglabel { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
/* completed checkbox in the note modal */
.note-modal__done { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; cursor: pointer; font-size: 14px; color: var(--muted); user-select: none; }
.note-modal__box { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--accent-ink); cursor: pointer; transition: background 0.14s, border-color 0.14s; }
.note-modal__box:hover { border-color: var(--accent); }
.note-modal__box.is-done { background: var(--accent); border-color: transparent; }
.note-modal__done:has(.is-done) { color: var(--text); }

@media (max-width: 640px) {
  .ntab-grid { columns: 1; }
  .ntab-fb__row .an-filters__right { margin-left: 0; }
}

/* ---- camera-roll photo strip (sticky bottom of Journal) ---- */
.jr { padding-bottom: 8px; }
.jp-bar {
  z-index: 20;
  margin-top: 18px;
  background: color-mix(in oklch, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -14px 34px -22px oklch(0 0 0 / 0.7);
  padding: 10px 12px 12px;
  transition: border-color 0.16s ease;
}
.jp-bar.is-sticky { position: sticky; bottom: 0; }
.jp-bar.is-drag { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 -14px 34px -22px oklch(0 0 0 / 0.7); }
.jp-bar.is-collapsed { padding-bottom: 10px; }

.jp-head { display: flex; align-items: center; gap: 12px; }
.jp-head__toggle {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 2px 2px; color: var(--text);
}
.jp-head__ico { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
.jp-head__title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.jp-head__count { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.jp-head__chev { display: grid; place-items: center; color: var(--muted); transform: rotate(90deg); transition: transform 0.18s ease; margin-left: -2px; }
.jp-head__chev.is-up { transform: rotate(-90deg); }
.jp-head__right { display: flex; align-items: center; gap: 12px; flex: none; }
.jp-ctrls { display: flex; align-items: center; gap: 8px; }
.jp-ctrl { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 3px 4px 3px 9px; }
.jp-ctrl__lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.jp-ctrl__b { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; background: var(--surface-3); color: var(--muted); cursor: pointer; transition: background 0.12s, color 0.12s; }
.jp-ctrl__b:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-ink); }
.jp-ctrl__b:disabled { opacity: 0.4; cursor: default; }
.jp-ctrl__v { font-family: var(--mono); font-size: 12.5px; color: var(--text); min-width: 16px; text-align: center; }
.jp-pin { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 6px 10px; cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; }
.jp-pin:hover { color: var(--text); }
.jp-pin.is-on { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
.jp-head__sync { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--faint); }
.jp-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.70 0.13 55); box-shadow: 0 0 0 3px color-mix(in oklch, oklch(0.70 0.13 55) 20%, transparent); }
.jp-add-btn { gap: 6px; }

.jp-row {
  display: flex; gap: 9px; align-items: stretch;
  margin-top: 11px; padding: 1px 1px 5px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.jp-row > * { scroll-snap-align: start; }
.jp-row--loop { scroll-snap-type: none; scrollbar-width: none; }
.jp-row--loop::-webkit-scrollbar { display: none; }
.jp-row::-webkit-scrollbar { height: 7px; }
.jp-row::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; }

.jp-tile {
  position: relative; flex: none;
  width: calc((100% - (var(--jpcols, 6) - 1) * 9px) / var(--jpcols, 6));
  aspect-ratio: 1 / 1; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--border-soft); cursor: pointer;
  background: var(--surface-2);
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.jp-tile:hover { transform: translateY(-2px); border-color: var(--border); }
.jp-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-tile--ph {
  background:
    repeating-linear-gradient(135deg, oklch(1 0 0 / 0.05) 0 7px, transparent 7px 14px),
    linear-gradient(155deg, oklch(0.56 0.07 var(--h)), oklch(0.40 0.06 var(--h)));
}
.jp-tile__time {
  position: absolute; left: 5px; bottom: 5px;
  font-family: var(--mono); font-size: 9.5px; color: #fff;
  background: oklch(0 0 0 / 0.42); padding: 1px 5px; border-radius: 5px;
  letter-spacing: 0.02em; backdrop-filter: blur(2px);
}
.jp-tile__x {
  position: absolute; top: 4px; right: 4px;
  width: 19px; height: 19px; display: grid; place-items: center;
  border: 0; border-radius: 6px; cursor: pointer; color: #fff;
  background: oklch(0 0 0 / 0.42); opacity: 0; transition: opacity 0.14s ease;
}
.jp-tile:hover .jp-tile__x { opacity: 1; }
.jp-tile__x:hover { background: oklch(0.55 0.18 25); }

.jp-add {
  flex: none;
  width: calc((100% - (var(--jpcols, 6) - 1) * 9px) / var(--jpcols, 6));
  aspect-ratio: 1 / 1; border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px dashed var(--border); background: var(--surface-2); cursor: pointer;
  color: var(--muted); font-size: 11px; transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.jp-add:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.jp-add:disabled { opacity: 0.5; cursor: default; }

.jp-empty {
  flex: 1; min-width: 180px; align-self: center;
  font-size: 12.5px; line-height: 1.45; color: var(--faint); padding: 4px 6px;
}

/* lightbox */
.jp-lb {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0 0 0 / 0.82); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 40px;
}
.jp-lb__stage { display: flex; flex-direction: column; gap: 0; max-width: min(760px, 90vw); max-height: 84vh; }
.jp-lb__img { max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: 12px 12px 0 0; display: block; }
.jp-lb__ph {
  width: min(620px, 80vw); aspect-ratio: 4 / 3; border-radius: 12px 12px 0 0;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, oklch(1 0 0 / 0.05) 0 12px, transparent 12px 24px),
    linear-gradient(155deg, oklch(0.56 0.07 var(--h)), oklch(0.40 0.06 var(--h)));
}
.jp-lb__phlabel { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: oklch(1 0 0 / 0.78); }
.jp-lb__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 12px 16px;
}
.jp-lb__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jp-lb__cap { font-size: 14px; font-weight: 600; color: var(--text); }
.jp-lb__time { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.jp-lb__del {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 7px 11px;
  transition: color 0.14s, border-color 0.14s;
}
.jp-lb__del:hover { color: oklch(0.62 0.18 25); border-color: oklch(0.62 0.18 25); }
.jp-lb__x {
  position: fixed; top: 22px; right: 24px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 11px; cursor: pointer; color: #fff; background: oklch(1 0 0 / 0.12);
}
.jp-lb__x:hover { background: oklch(1 0 0 / 0.2); }
.jp-lb__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: oklch(1 0 0 / 0.12);
}
.jp-lb__nav:hover { background: oklch(1 0 0 / 0.2); }
.jp-lb__nav--l { left: 22px; }
.jp-lb__nav--r { right: 22px; }

@media (max-width: 640px) {
  .jp-head__sync { display: none; }
}

/* ============================================================
   3D Printing page
   ============================================================ */
.pr { max-width: 1340px; }
.pr-cols { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; }
.pr-main { min-width: 0; }
.pr-side { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 12px; }

.pr-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 14px; }
.pr-listhead:not(:first-child) { margin-top: 26px; }
.pr-listhead h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; }
.pr-count { font-family: var(--mono); font-size: 11px; color: var(--faint); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 1px 8px; }

.pr-list { display: flex; flex-direction: column; gap: 10px; }
.pr-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 13.5px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }

/* ---- print card ---- */
.pr-card {
  display: flex; gap: 16px; align-items: stretch; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 14px 16px; cursor: pointer; transition: border-color 0.14s, background 0.14s;
}
.pr-card:hover { border-color: var(--border); background: var(--surface-2); }
.pr-card.is-active { border-color: var(--accent-line); background: color-mix(in oklch, var(--accent) 6%, var(--surface)); }
.pr-card__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pr-card__top { display: flex; align-items: center; gap: 10px; }
.pr-card__name { font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-card__meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.pr-meta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.pr-meta svg { color: var(--faint); }
.pr-card__note { font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-card__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; flex: none; }
.pr-card__date { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pr-card__date--none { color: var(--faint); }

.pr-act {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ui); font-size: 12px; font-weight: 500;
  padding: 6px 11px; border-radius: 8px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--muted);
  transition: background 0.14s, color 0.14s, border-color 0.14s; white-space: nowrap;
}
.pr-act:hover { color: var(--text); background: var(--surface-3); border-color: var(--border); }
.pr-act--done { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.pr-act--done:hover { background: var(--accent-dim); }

/* ---- status chip ---- */
.pr-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc); }
.pr-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); }

/* ---- filament chip ---- */
.pr-fil { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pr-sw { width: 11px; height: 11px; border-radius: 4px; border: 1px solid oklch(1 0 0 / 0.18); flex: none; }
.pr-fil--none { color: var(--faint); font-style: italic; }

.pr-cost { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 1px 8px; border-radius: 99px; }

.pr-result { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; }
.pr-result--success { color: oklch(0.74 0.12 150); background: color-mix(in oklch, oklch(0.74 0.12 150) 14%, transparent); }
.pr-result--fail { color: var(--cal-office); background: color-mix(in oklch, var(--cal-office) 14%, transparent); }

/* ---- calendar ---- */
.pr-cal { padding: 14px; gap: 10px; }
.pr-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-cal__title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.pr-cal__nav { display: flex; align-items: center; gap: 4px; }
.pr-cal__nav button {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--surface-2);
  color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background 0.14s, color 0.14s;
}
.pr-cal__nav button:hover { background: var(--surface-3); color: var(--text); }
.pr-cal__today { width: auto !important; font-family: var(--ui); font-size: 11px; padding: 0 10px; }
.pr-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pr-cal__dow span { text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; color: var(--faint); text-transform: uppercase; }
.pr-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pr-cal__cell {
  position: relative; aspect-ratio: 1 / 1; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: background 0.12s, border-color 0.12s;
}
.pr-cal__cell:hover { background: var(--surface-3); }
.pr-cal__cell.is-out { opacity: 0.38; }
.pr-cal__cell.is-today { border-color: var(--accent-line); }
.pr-cal__cell.is-sel { background: var(--accent-soft); border-color: var(--accent); }
.pr-cal__cell.has-items { background: var(--surface-3); }
.pr-cal__num { font-size: 12px; color: var(--text); line-height: 1; }
.pr-cal__dots { display: flex; align-items: center; gap: 2px; height: 6px; }
.pr-cal__dots i { width: 5px; height: 5px; border-radius: 50%; }
.pr-cal__dots em { font-family: var(--mono); font-size: 8px; color: var(--faint); font-style: normal; }

.pr-legend { display: flex; gap: 16px; padding: 0 4px; }
.pr-legend__item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.pr-legend__item i { width: 8px; height: 8px; border-radius: 50%; }

/* ---- stats strip ---- */
.pr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; margin-bottom: 8px; }
.pr-stat { padding: 14px 16px; gap: 4px; }
.pr-stat__v { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.pr-stat__l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---- wishlist grid ---- */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.pr-wish { padding: 15px 16px; gap: 10px; cursor: pointer; transition: border-color 0.14s, background 0.14s; }
.pr-wish:hover { border-color: var(--border); background: var(--surface-2); }
.pr-wish__name { font-size: 15px; font-weight: 600; color: var(--text); }
.pr-wish__queue { align-self: flex-start; margin-top: 2px; padding: 6px 12px; font-size: 12px; }

/* ---- spools ---- */
.pr-spools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pr-spool { padding: 16px; gap: 13px; cursor: pointer; transition: border-color 0.14s; }
.pr-spool:hover { border-color: var(--border); }
.pr-spool__top { display: flex; align-items: center; gap: 12px; }
.pr-spool__sw { width: 40px; height: 40px; border-radius: 12px; flex: none; border: 1px solid oklch(1 0 0 / 0.18); box-shadow: inset 0 0 0 3px oklch(0 0 0 / 0.18); }
.pr-spool__id { flex: 1; min-width: 0; }
.pr-spool__name { font-size: 14.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-spool__brand { font-size: 12px; color: var(--faint); }
.pr-spool__mat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); padding: 3px 8px; border-radius: 99px; flex: none; }
.pr-spool__bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pr-spool__bar span { display: block; height: 100%; border-radius: 99px; transition: width 0.2s; }
.pr-spool__foot { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--text); }
.pr-spool__foot i { color: var(--faint); font-style: normal; }
.pr-spool__pct { color: var(--muted); }
.pr-spool__low { color: var(--cal-office); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; background: color-mix(in oklch, var(--cal-office) 14%, transparent); padding: 2px 8px; border-radius: 99px; }
.pr-spool__val { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: -5px; }

/* ---- modal extras ---- */
.pr-modalcost { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 11px 14px; margin-bottom: 13px; }
.pr-modalcost__l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pr-modalcost__b { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 3px; }
.pr-modalcost__v { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent-ink); }
.pr-stepper { display: inline-flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; overflow: hidden; }
.pr-stepper button { width: 38px; height: 38px; border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.pr-stepper button:hover { background: var(--surface-3); color: var(--text); }
.pr-stepper span { flex: 1; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--text); min-width: 56px; }
.pr-resultseg { width: 100%; }
.pr-resultseg button { flex: 1; }
.pr-swpick { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.pr-swopt { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.15); transition: transform 0.1s; }
.pr-swopt:hover { transform: scale(1.08); }
.pr-swopt.is-on { border-color: var(--text); }
.pr-swcustom { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; position: relative; overflow: hidden; border: 2px dashed var(--border); display: grid; place-items: center; }
.pr-swcustom input { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: 0; padding: 0; cursor: pointer; opacity: 0; }

@media (max-width: 980px) {
  .pr-cols { grid-template-columns: 1fr; gap: 22px; }
  .pr-side { position: static; }
  .pr-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .pr-card { flex-direction: column; gap: 10px; }
  .pr-card__side { flex-direction: row; align-items: center; justify-content: space-between; }
  .pr-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Anime Tracker page
   ============================================================ */
.an { max-width: 1340px; }
.an-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 16px; }
.an-listhead__right { display: flex; align-items: center; gap: 10px; }
.an-cols { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px 3px 9px; border: 1px solid var(--accent-line); border-radius: 99px; background: var(--surface-2); }
.an-cols__lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.an-cols__btn { width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 11.5px; display: grid; place-items: center; transition: background 0.12s, color 0.12s; }
.an-cols__btn:hover { color: var(--text); background: var(--surface-3); }
.an-cols__btn.is-on { background: var(--accent); color: var(--accent-ink); }
.an-listhead h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; }
.an-count { font-family: var(--mono); font-size: 11px; color: var(--faint); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 1px 8px; }
.an-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13.5px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }

/* status chip */
.an-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc); }
.an-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); }
.an-stars { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--accent); }
.an-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* progress bar */
.an-bar { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.an-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in oklch, var(--spine, var(--accent)) 45%, var(--surface-3)) 0%, var(--spine, var(--accent)) 65%, color-mix(in oklch, var(--spine, var(--accent)) 65%, white) 100%); transition: width 0.2s; }
.an-bar--sm { height: 5px; }

/* episode pips */
.an-pips { display: flex; flex-wrap: wrap; gap: 4px; }
.an-pip {
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer; flex: none;
  border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--faint);
  font-family: var(--mono); font-size: 10px; display: grid; place-items: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.08s;
}
.an-pip:hover { border-color: var(--muted); }
.an-pip:active { transform: scale(0.9); }
.an-pip.is-watched { background: color-mix(in oklch, var(--accent) 28%, var(--surface-2)); border-color: color-mix(in oklch, var(--accent) 42%, transparent); color: color-mix(in oklch, var(--accent) 55%, var(--text)); }
.an-pip.is-dl { border-color: var(--accent-line); border-style: dashed; color: var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--surface-2)); }
.an-pips--dense .an-pip { width: 13px; height: 13px; border-radius: 4px; font-size: 0; }

/* ---- watching cards ---- */
.an-wgrid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.an-wcard { padding: 16px 18px 16px 20px; gap: 12px; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.14s; }
.an-wcard::before { display: none; }
.an-wcard:hover { border-color: var(--border); }
.an-wcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.an-wcard__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.an-ready { display: inline-flex; align-items: center; gap: 4px; flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 2px 8px; border-radius: 99px; }

.an-seasontabs { display: flex; flex-wrap: wrap; gap: 5px; }
.an-seasontab {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted); cursor: pointer;
  padding: 3px 9px; border-radius: 99px; border: 1px solid var(--border-soft); background: var(--surface-2);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.an-seasontab:hover { color: var(--text); }
.an-seasontab.is-on { background: var(--surface-3); color: var(--text); border-color: var(--border); }
.an-seasontab.is-future { opacity: 0.6; font-style: italic; }

.an-wcard__srow { display: flex; align-items: center; gap: 10px; }
.an-wcard__epc, .an-wcard__air { margin-left: auto; flex: none; }
.an-wcard__season { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.an-wcard__slabel { font-size: 13.5px; font-weight: 500; color: var(--text); }
.an-wcard__epc { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.an-wcard__air { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.an-wcard__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-since { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-left: auto; }
.an-wcard__next { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); border-top: 1px solid var(--border-soft); padding-top: 10px; }
.an-wcard__next svg { color: var(--faint); }

.an-act {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--ui); font-size: 12px; font-weight: 500;
  padding: 6px 11px; border-radius: 8px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink); transition: background 0.14s, opacity 0.14s;
}
.an-act:hover { background: var(--accent-dim); }
.an-act:disabled { opacity: 0.4; cursor: default; }
.an-act--ghost { background: var(--surface-2); color: var(--muted); border-color: var(--border-soft); }
.an-act--ghost:hover { background: var(--surface-3); color: var(--text); }

/* ---- library ---- */
.an-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.vg-filters2 { margin-top: 0; }
.an-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--ui); font-size: 12.5px; color: var(--muted);
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border-soft); background: var(--surface);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.an-chip:hover { color: var(--text); background: var(--surface-2); }
.an-chip.is-on { color: var(--text); border-color: color-mix(in oklch, var(--cc, var(--accent)) 55%, var(--border)); background: color-mix(in oklch, var(--cc, var(--accent)) 14%, var(--surface-2)); }
.an-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc, var(--muted)); }
.an-chip__n { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.an-filters__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.an-filters__add { margin-left: auto; }
.an-sort { position: relative; }
.an-sort__btn { display: inline-flex; align-items: center; gap: 6px; }
.an-sort__btn.is-open { border-color: var(--border); background: var(--surface-2); }
.an-sort__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 5px; display: flex; flex-direction: column; gap: 1px;
}
.an-sort__lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding: 5px 8px 4px; }
.an-sort__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer; border: 0; background: transparent;
  font-family: var(--ui); font-size: 12.5px; color: var(--muted);
  padding: 7px 8px; border-radius: 6px; transition: background 0.12s, color 0.12s;
}
.an-sort__opt:hover { background: var(--surface-2); color: var(--text); }
.an-sort__opt.is-on { color: var(--text); }
.an-sort__opt.is-on svg { color: var(--accent); }

.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.an-statusgroups { display: flex; flex-direction: column; gap: 22px; }
.an-statusgroup { display: flex; flex-direction: column; gap: 11px; }
.an-statusgroup__head { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); padding-bottom: 9px; border-bottom: 1px solid var(--border-soft); }
.an-statusgroup__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cc, var(--accent)); flex: none; }
.an-card { padding: 15px 16px 15px 18px; gap: 10px; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.14s; }
.an-card::before { display: none; }
.an-card:hover { border-color: var(--border); }
.an-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.an-card__title { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.an-card__meta { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.an-card__tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 4px; }
.an-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border-soft); color: var(--muted); }
.an-tag--dl { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
.an-tag--air { color: var(--muted); }

/* ---- upcoming ---- */
.an-watching--split { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; align-items: start; }
.an-watching__main { min-width: 0; }
/* rail sits at the top of the content row, level with the "Currently watching / Add anime" listhead */
.an-uppane { position: sticky; top: 8px; margin-top: 0; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 12px 14px; }
.an-pane-divider { position: absolute; left: -13px; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 4; touch-action: none; }
.an-pane-divider::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3px; height: 48px; border-radius: 99px; background: var(--border); transition: background 0.14s ease, height 0.14s ease; }
.an-pane-divider:hover::before { background: var(--accent); height: 80px; }
body.resizing .an-pane-divider::before { background: var(--accent); }
.an-watching--split.is-adjust .an-uppane { border-color: var(--accent-line); }
.an-uppane__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.an-uppane__head h3 { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 7px; color: var(--text); }
.an-uppane__head h3 svg { color: var(--faint); }
.an-uppane__empty { padding: 16px 8px; text-align: center; color: var(--muted); font-size: 12.5px; }
.an-uppane__list { display: flex; flex-direction: column; gap: 9px; }
.an-upmini { display: flex; align-items: center; gap: 11px; text-align: left; width: 100%; min-height: 50px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 11px 12px 11px 11px; position: relative; cursor: pointer; overflow: hidden; transition: border-color 0.12s, background 0.12s; }
.an-upmini::before { display: none; }
.an-upmini:hover { border-color: var(--border); background: var(--surface); }
.an-upmini__date { flex: none; width: 30px; text-align: center; display: flex; flex-direction: column; }
.an-upmini__d { font-size: 17px; font-weight: 600; line-height: 1; color: var(--text); }
.an-upmini__m { font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.an-upmini__main { flex: 1; min-width: 0; }
.an-upmini__title { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-upmini__sub { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-upmini__cd { font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; flex: none; }
.an-upmini__cd.is-soon { color: var(--accent); }
@media (max-width: 900px) { .an-watching--split { grid-template-columns: 1fr !important; } .an-uppane { position: static; margin-top: 0; } .an-pane-divider { display: none; } .an--haspane .cp-head { padding-right: 0; } .an--haspane .cp-head__actions .cp-btn--primary { display: inline-flex; } }

.an-uplist { display: flex; flex-direction: column; gap: 8px; }
.an-upmonth { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin: 14px 2px 4px; }
.an-uprow { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 16px 12px 14px; position: relative; overflow: hidden; }
.an-uprow::before { display: none; }
.an-update { flex: none; width: 46px; text-align: center; display: flex; flex-direction: column; }
.an-update__d { font-size: 22px; font-weight: 600; line-height: 1; color: var(--text); }
.an-update__m { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.an-uprow__main { flex: 1; min-width: 0; }
.an-uprow__title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.an-uprow__sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.an-uprow__sub--center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; text-align: center; pointer-events: none; }
.an-countdown { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: none; }
.an-countdown.is-soon { color: var(--accent); }

/* ---- downloaded ---- */
.an-list { display: flex; flex-direction: column; gap: 10px; }
.an-dlrow { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 18px; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.14s; }
.an-dlrow::before { display: none; }
.an-dlrow:hover { border-color: var(--border); }
.an-dlrow__main { min-width: 0; flex: 1; }
.an-dlrow__title { font-size: 15px; font-weight: 600; color: var(--text); }
.an-dlrow__seasons { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.an-dlrow__seasons--center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); justify-content: center; max-width: 50%; pointer-events: none; }
.an-dlseason { font-size: 12.5px; color: var(--muted); }
.an-dlseason b { color: var(--accent); }
.an-dlseason i { color: var(--faint); font-style: normal; font-family: var(--mono); font-size: 11px; }
.an-dlrow__side { display: flex; align-items: center; gap: 10px; flex: none; }
.an-ready--big { font-size: 12px; padding: 4px 10px; }

/* ---- modal ---- */
.an-modal .cp-modal__card { max-width: 560px; max-height: 88vh; overflow-y: auto; }
.an-rate { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: var(--surface-3); cursor: pointer; margin: 12px 0; }
.an-rate::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); cursor: pointer; }
.an-rate::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); cursor: pointer; }
.an-eplen { display: flex; align-items: center; gap: 10px; }
.an-eplen input { width: 92px; }
.an-eplen__u { font-size: 13px; color: var(--muted); }
.an-seasonshead { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 10px; }
.an-seasonshead span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.an-seasons { display: flex; flex-direction: column; gap: 12px; }
.an-srow { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 11px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.an-srow__head { display: flex; align-items: center; gap: 8px; }
.an-srow__label { flex: 1; }
.an-srow__x { width: 32px; height: 32px; flex: none; border-radius: 8px; border: 0; background: var(--surface-3); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background 0.12s, color 0.12s; }
.an-srow__x:hover { background: color-mix(in oklch, var(--cal-office) 20%, var(--surface-3)); color: var(--text); }
.an-srow__steps, .an-srow__dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.an-srow__steps label, .an-srow__dates label { display: flex; flex-direction: column; gap: 5px; }
.an-srow__steps label span, .an-srow__dates label span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.an-srow .pr-stepper { width: 100%; }
.an-srow__dates .cp-input { padding: 7px 8px; font-size: 12px; }

@media (max-width: 980px) {
  .an-wgrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .an-srow__steps, .an-srow__dates { grid-template-columns: 1fr; }
  .an-filters__add { margin-left: 0; }
}

/* ============================================================
   Settings page
   ============================================================ */
.set { max-width: 1100px; }
.set-cols { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; }
.set-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.set-section { padding: 20px; gap: 16px; }
.set-section__head h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.set-section__head p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 56ch; }

.set-control { display: flex; flex-direction: column; gap: 9px; }
.set-control + .set-control { padding-top: 15px; border-top: 1px solid var(--border-soft); }
.set-control__head { display: flex; align-items: baseline; gap: 9px; }
.set-control__label { font-size: 13.5px; font-weight: 500; color: var(--text); }
.set-control__desc { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
/* text-size stepper */
.set-size { display: flex; align-items: center; gap: 12px; }
.set-size__btn {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2);
  color: var(--text); cursor: pointer; transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.set-size__btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--accent-line); color: var(--accent); }
.set-size__btn:disabled { opacity: 0.4; cursor: default; }
.set-size__val { min-width: 70px; text-align: center; font-size: 15px; font-weight: 600; color: var(--text); }
.set-size__reset { margin-left: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); background: none; border: none; cursor: pointer; }
.set-size__reset:hover { color: var(--accent); }
.set-size__reset:disabled { opacity: 0.4; cursor: default; }

.set-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.set-sw {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; flex: none;
  border: 1px solid oklch(1 0 0 / 0.14); display: grid; place-items: center;
  color: #fff; box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.15);
  transition: transform 0.1s, box-shadow 0.12s;
}
.set-sw:hover { transform: scale(1.06); }
.set-sw.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.set-sw svg { filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.5)); }
.set-sw--custom { position: relative; overflow: hidden; border-style: dashed; }
.set-sw--custom input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); border: 0; padding: 0; cursor: pointer; opacity: 0; }
.set-sw__pen { color: oklch(1 0 0 / 0.85); display: grid; place-items: center; filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.5)); }

/* ---- live preview ---- */
.set-side { position: sticky; top: 18px; }
.set-preview { padding: 18px; gap: 14px; }
.set-preview__head { display: flex; align-items: baseline; justify-content: space-between; }
.set-preview__title { font-size: 15px; font-weight: 600; }
.set-preview__title em { font-style: normal; color: var(--accent); }
.set-preview__sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.set-preview__row { display: flex; flex-wrap: wrap; gap: 8px; }
.set-preview__bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.set-preview__bar span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.set-preview__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.set-pchip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--c); }
.set-pchip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.set-preview__surf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.set-preview__tile { border-radius: 8px; padding: 12px 6px; text-align: center; font-family: var(--mono); font-size: 9.5px; color: var(--muted); border: 1px solid var(--border-soft); }
.set-preview__text { display: flex; gap: 14px; font-size: 13px; }

@media (max-width: 900px) {
  .set-cols { grid-template-columns: 1fr; gap: 20px; }
  .set-side { position: static; }
}

/* ============================================================
   BOARDGAMES
   ============================================================ */
.bg-page { max-width: 1340px; }
.bg-split { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; align-items: start; }
.bg-split__main { min-width: 0; }
.bg-qpane { position: sticky; top: 8px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 13px 13px 15px; }
.bg-qpane__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 11px; }
.bg-qpane__head h3 { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 7px; color: var(--text); }
.bg-qpane__head h3 svg { color: var(--faint); }
.bg-qpane__empty { padding: 16px 8px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.bg-qpane__list { display: flex; flex-direction: column; gap: 11px; }
.bg-qmini { display: flex; align-items: center; gap: 11px; text-align: left; width: 100%; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 13px 11px; position: relative; overflow: hidden; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.bg-qmini::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gc, var(--accent)); }
.bg-qmini:hover { border-color: var(--border); background: var(--surface); }
.bg-qmini__rank { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--text); background: var(--surface-3); }
.bg-qmini__main { flex: 1; min-width: 0; }
.bg-qmini__t { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-qmini__sub { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-qmini__log { flex: none; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border-soft); background: var(--surface); color: var(--accent); cursor: pointer; display: grid; place-items: center; transition: background 0.12s, border-color 0.12s; }
.bg-qmini__log:hover { background: var(--accent-soft); border-color: var(--accent-line); }
@media (max-width: 900px) { .bg-split { grid-template-columns: 1fr; } .bg-qpane { position: static; } }
.bg-tabwrap { display: flex; flex-direction: column; }
.bg-listhead--sub { margin-top: 26px; }

/* collection multi-select filter bar */
.bg-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.bg-mf { position: relative; }
.bg-mf__btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--muted);
  font-family: var(--ui); font-size: 12.5px; font-weight: 500;
  padding: 7px 11px; border-radius: 9px; transition: color 0.14s, background 0.14s, border-color 0.14s;
}
.bg-mf__btn:hover { color: var(--text); background: var(--surface-2); }
.bg-mf__btn.is-on { color: var(--text); border-color: var(--accent-line); background: var(--surface-2); }
.bg-mf__btn svg { color: var(--faint); }
.bg-mf__n {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  font-family: var(--mono); font-size: 10px; border-radius: 99px;
  background: var(--accent); color: var(--accent-ink);
}
.bg-mf__pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 178px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 1px;
  animation: cp-fade 0.12s ease;
}
.bg-mf__opt {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 7px 9px; border-radius: 7px; font-size: 13px; color: var(--text);
  transition: background 0.12s;
}
.bg-mf__opt:hover { background: var(--surface-2); }
.bg-mf__opt input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; flex: none; }
.bg-mf__clear {
  margin-top: 4px; background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 6px 9px;
}
.bg-mf__clear:hover { color: var(--accent); }
.bg-filterbar__clear {
  background: transparent; border: 0; cursor: pointer; color: var(--muted);
  font-family: var(--ui); font-size: 12.5px; padding: 6px 8px; border-radius: 8px;
}
.bg-filterbar__clear:hover { color: var(--text); text-decoration: underline; }
.bg-filterbar__count {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--faint);
}

/* status chip */
.bg-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc); }
.bg-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); }
.bg-meta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.bg-meta svg { color: var(--faint); }
.bg-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); margin: 0 3px; }
.bg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gc, var(--accent)); flex: none; }

/* collection grid + cards */
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 12px; }
.bg-card { padding: 15px 16px; gap: 11px; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.14s; display: flex; flex-direction: column; }
.bg-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gc, var(--accent)); opacity: 0.85; }
.bg-card:hover { border-color: var(--border); }
.bg-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bg-card__title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.bg-card__top svg { color: var(--faint); flex: none; }
.bg-card__note { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.bg-card__stats { display: flex; align-items: baseline; gap: 12px; }
.bg-stat { font-size: 12.5px; color: var(--text); }
.bg-stat b { font-family: var(--mono); }
.bg-stat--muted { color: var(--faint); font-family: var(--mono); font-size: 11px; margin-left: auto; }
.bg-pill { display: inline-flex; align-items: center; gap: 4px; flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 99px; }
.bg-pill--new { color: var(--muted); background: var(--surface-3); }
.bg-pill--win { color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.bg-pill--loss { color: oklch(0.72 0.13 30); background: color-mix(in oklch, oklch(0.62 0.18 25) 14%, transparent); border: 1px solid color-mix(in oklch, oklch(0.62 0.18 25) 30%, transparent); }
.bg-pill svg { color: currentColor; }

.bg-acts { display: flex; gap: 7px; margin-top: 2px; }
.bg-act { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: var(--ui); font-size: 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 6px 11px; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.bg-act svg { color: var(--accent); }
.bg-act:hover { background: var(--surface-3); border-color: var(--accent-line); }
.bg-act--ghost svg { color: var(--faint); }
.bg-act--ghost.is-on { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
.bg-act--ghost.is-on svg { color: var(--accent); }

/* play log */
.bg-playlist { display: flex; flex-direction: column; gap: 8px; }
.bg-playrow { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 15px 12px 13px; position: relative; overflow: hidden; cursor: pointer; transition: border-color 0.12s; }
.bg-playrow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gc, var(--accent)); }
.bg-playrow:hover { border-color: var(--border); }
.bg-playrow__date { flex: none; width: 38px; text-align: center; display: flex; flex-direction: column; padding-top: 1px; }
.bg-playrow__d { font-size: 20px; font-weight: 600; line-height: 1; color: var(--text); }
.bg-playrow__m { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.bg-playrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.bg-playrow__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bg-playrow__head .bg-scores { margin-left: auto; justify-content: flex-end; }
.bg-playrow__game { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.bg-scores { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-score { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 7px; padding: 3px 9px; color: var(--muted); }
.bg-score b { color: var(--text); }
.bg-score.is-win { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.bg-score.is-win b { color: var(--accent-ink); }
.bg-playrow__note { font-size: 12.5px; color: var(--muted); font-style: italic; }

/* queue */
.bg-queue { display: flex; flex-direction: column; gap: 8px; }
.bg-qitem { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 11px 13px 11px 12px; position: relative; overflow: hidden; cursor: pointer; transition: border-color 0.12s; }
.bg-qitem::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gc, var(--accent)); }
.bg-qitem:hover { border-color: var(--border); }
.bg-qrank { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--surface-3); }
.bg-qmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bg-qtitle { font-size: 14.5px; font-weight: 600; color: var(--text); }
.bg-qacts { display: flex; align-items: center; gap: 6px; }
.bg-qarrow { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.bg-qarrow:hover:not(:disabled) { color: var(--text); background: var(--surface-3); border-color: var(--accent-line); }
.bg-qarrow:disabled { opacity: 0.3; cursor: default; }

.bg-shelf { display: flex; flex-wrap: wrap; gap: 8px; }
.bg-shelfitem { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: var(--ui); font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 7px 12px; transition: background 0.12s, border-color 0.12s; }
.bg-shelfitem svg { color: var(--faint); }
.bg-shelfitem:hover { background: var(--surface-3); border-color: var(--accent-line); }
.bg-shelfitem:hover svg { color: var(--accent); }

/* sold */
.bg-soldlist { display: flex; flex-direction: column; gap: 2px; }
.bg-soldrow { display: flex; align-items: center; gap: 16px; padding: 12px 6px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 0.12s; border-radius: 8px; }
.bg-soldrow:hover { background: var(--surface-2); }
.bg-soldrow__t { font-size: 14px; font-weight: 600; color: var(--muted); min-width: 160px; }
.bg-soldrow__note { font-size: 12.5px; color: var(--faint); font-style: italic; margin-left: auto; text-align: right; }

/* modal extras */
.bg-checkrow { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); margin-bottom: 13px; cursor: pointer; }
.bg-checkrow input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.bg-coop { display: flex; gap: 8px; margin-bottom: 13px; }
.bg-coopbtn { flex: 1; cursor: pointer; font-family: var(--ui); font-size: 13px; font-weight: 500; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 9px; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.bg-coopbtn.is-on { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
.bg-coopbtn.is-loss { color: oklch(0.75 0.14 30); background: color-mix(in oklch, oklch(0.62 0.18 25) 16%, transparent); border-color: color-mix(in oklch, oklch(0.62 0.18 25) 32%, transparent); }
.bg-results { display: flex; flex-direction: column; gap: 7px; }
.bg-resrow { display: flex; align-items: center; gap: 7px; }
.bg-resrow.is-win .bg-wbtn { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.bg-wbtn { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--faint); cursor: pointer; display: grid; place-items: center; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.bg-wbtn:hover { color: var(--accent); border-color: var(--accent-line); }
.bg-resname { flex: 1; }
.bg-resscore { width: 88px; flex: none; }
.bg-addplayer { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: var(--ui); font-size: 12.5px; color: var(--accent); background: transparent; border: 0; padding: 2px; }
.bg-addplayer:hover { text-decoration: underline; }

/* ============================================================
   CRAFTY KITS  (.ck) — Gunpla / LEGO / DIY miniatures / models
   ============================================================ */
.ck { max-width: 1340px; }
.ck-tabwrap { display: flex; flex-direction: column; }

/* stats strip (Built tab) */
.ck-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ck-stat { padding: 14px 16px; gap: 4px; }
.ck-stat__v { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.ck-stat__l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* grid + card */
.ck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: 12px; }
.ck-card { padding: 15px 16px 15px 18px; gap: 11px; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.14s; display: flex; flex-direction: column; }
.ck-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gc, var(--accent)); opacity: 0.9; }
.ck-card:hover { border-color: var(--border); }
.ck-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ck-card__id { min-width: 0; }
.ck-card__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); line-height: 1.3; text-wrap: pretty; }
.ck-card__maker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--faint); margin-top: 3px; }
.ck-card__note { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* type tag */
.ck-typetag { flex: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc, var(--accent)); background: color-mix(in oklch, var(--tc, var(--accent)) 13%, transparent); border: 1px solid color-mix(in oklch, var(--tc, var(--accent)) 30%, transparent); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.ck-typetag i { width: 6px; height: 6px; border-radius: 50%; background: var(--tc, var(--accent)); }

/* cost / acquisition meta line */
.ck-meta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.ck-meta svg { color: var(--faint); }
.ck-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.ck-meta__est { color: var(--faint); }

/* rating row (built) */
.ck-card__rating { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ck-stars { display: inline-flex; align-items: center; gap: 2px; }
.ck-stars--none { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.ck-star { display: inline-flex; color: var(--surface-3); }
.ck-star.is-on { color: var(--cal-office, oklch(0.78 0.13 85)); }
.ck-star.is-on svg { fill: currentColor; }
.ck-buildtime { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.ck-buildtime svg { color: var(--faint); }

/* building badge */
.ck-bench { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gc, var(--accent)); }
.ck-bench__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gc, var(--accent)); box-shadow: 0 0 0 4px color-mix(in oklch, var(--gc, var(--accent)) 20%, transparent); }

/* received → started → built timeline */
.ck-track { display: flex; align-items: stretch; gap: 0; margin-top: 1px; }
.ck-track__step { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ck-track__lbl { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.ck-track__d { font-size: 12px; font-weight: 500; color: var(--faint); }
.ck-track__step.is-on .ck-track__d { color: var(--text); }
.ck-track__bar { width: 14px; flex: none; align-self: center; height: 2px; border-radius: 2px; background: var(--surface-3); margin: 0 9px; margin-top: 9px; }
.ck-track__bar.is-on { background: var(--gc, var(--accent)); opacity: 0.7; }

/* quick actions */
.ck-acts { display: flex; gap: 7px; margin-top: auto; padding-top: 3px; }
.ck-act { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: var(--ui); font-size: 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 6px 11px; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.ck-act svg { color: var(--accent); }
.ck-act:hover { background: var(--surface-3); border-color: var(--accent-line); }
.ck-act--done svg { color: oklch(0.70 0.12 235); }

/* modal: date grid + star input + swatch picker */
.ck-dategrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ck-dategrid .cp-input { padding: 8px 9px; font-size: 12.5px; }
.ck-starinput { display: flex; align-items: center; gap: 4px; }
.ck-starbtn { display: inline-flex; padding: 2px; background: transparent; border: 0; cursor: pointer; color: var(--surface-3); transition: color 0.12s, transform 0.1s; }
.ck-starbtn:hover { transform: scale(1.12); }
.ck-starbtn.is-on { color: oklch(0.78 0.13 85); }
.ck-starbtn.is-on svg { fill: currentColor; }
.ck-starinput__lbl { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ck-swpick { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 640px) {
  .ck-stats { grid-template-columns: 1fr 1fr; }
  .ck-dategrid { grid-template-columns: 1fr; }
}

/* ============================================================
   MANGA & BOOKS  (.bk) — reading tracker
   ============================================================ */
.bk-tabwrap { display: flex; flex-direction: column; }

/* shared byline */
.bk-by { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.bk-by__a { font-size: 12px; color: var(--muted); }
.bk-by__s { font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em; color: var(--faint); }

/* checkbox row (modal) */
.cp-check { display: flex; align-items: center; gap: 9px; cursor: pointer; margin: 2px 0 4px; font-size: 13px; color: var(--text); }
.cp-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ---- split layout: content + right-hand queue pane ---- */
.bk-split { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.bk-split--full { grid-template-columns: 1fr; }
.bk-split__main { min-width: 0; }
.bk-pane { position: sticky; top: 8px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 13px 15px; }
.bk-pane__head { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 11px; }
.bk-pane__head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; color: var(--text); }
.bk-pane__head h3 svg { color: var(--accent); }
.bk-pane__empty { padding: 16px 6px 8px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; }
.bk-pane__list { display: flex; flex-direction: column; gap: 8px; }
.bk-pitem { display: flex; flex-direction: column; gap: 9px; padding: 10px 11px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 11px; cursor: pointer; transition: border-color 0.14s; }
.bk-pitem:hover { border-color: var(--border); }
.bk-pitem__top { display: flex; align-items: flex-start; gap: 9px; }
.bk-pitem__id { min-width: 0; }
.bk-pitem__title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; text-wrap: pretty; }
.bk-pitem__sub { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 3px; }
.bk-pitem__acts { display: flex; align-items: center; gap: 8px; }
.bk-pitem__acts .ck-act { flex: 1; justify-content: center; font-weight: 600; background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.bk-pitem__acts .ck-act:hover { background: var(--accent-dim); border-color: transparent; }
.bk-pitem__acts .ck-act svg { color: var(--accent-ink); }
.bk-qitem__n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bk-qmove { display: flex; flex-direction: column; flex: none; }
.bk-qmove button { width: 24px; height: 16px; display: grid; place-items: center; border: 0; background: transparent; color: var(--faint); cursor: pointer; border-radius: 4px; }
.bk-qmove button:hover:not(:disabled) { color: var(--text); background: var(--surface-3); }
.bk-qmove button:disabled { opacity: 0.3; cursor: default; }

/* ---- reading cards ---- */
.bk-rgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.bk-rcard { padding: 16px 17px; gap: 11px; cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.14s; }
.bk-rcard:hover { border-color: var(--border); }
.bk-rcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bk-rcard__id { min-width: 0; }
.bk-rcard__title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); line-height: 1.3; text-wrap: pretty; }
.bk-bar { margin-top: 1px; }
.bk-progline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: -2px; }
.bk-progline__p { font-family: var(--mono); font-size: 12px; color: var(--text); }
.bk-progline__p i { color: var(--faint); font-style: normal; }
.bk-progline__pct { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.bk-pagectl { display: flex; align-items: center; gap: 6px; }
.bk-pageb { flex: none; min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); border-radius: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.12s, opacity 0.12s; }
.bk-pageb:hover:not(:disabled) { background: var(--accent-dim); }
.bk-pageb:disabled { opacity: 0.45; cursor: default; }
.bk-pagenum { flex: 1; text-align: center; font-family: var(--mono); font-size: 12.5px; color: var(--text); }

.bk-est { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bk-est__t { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
.bk-est__t svg { color: var(--accent); }
.bk-est__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }

.bk-rcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 3px; flex-wrap: wrap; }
.bk-since { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* ---- library / wishlist cards ---- */
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.bk-card { padding: 15px 16px; gap: 10px; cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.14s; }
.bk-card:hover { border-color: var(--border); }
.bk-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bk-card__id { min-width: 0; }
.bk-card__title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); line-height: 1.3; text-wrap: pretty; }
.bk-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.bk-genre { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 2px 8px; }
.bk-card__rating { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bk-fin { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.bk-card__note { font-size: 12.5px; color: var(--muted); line-height: 1.45; text-wrap: pretty; }
.bk-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 2px; }
.bk-pp { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.bk-pp svg { color: var(--muted); }
.bk-fmtfilters { margin-bottom: 16px; }

/* ---- stats ---- */
.bk-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bk-statcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-panel { padding: 16px 17px; gap: 13px; display: flex; flex-direction: column; }
.bk-panel__h { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.bk-fmtbars { display: flex; flex-direction: column; gap: 10px; }
.bk-fmtbar { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: 10px; }
.bk-fmtbar__l { font-size: 12px; color: var(--muted); }
.bk-fmtbar__track { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bk-fmtbar__track span { display: block; height: 100%; border-radius: 99px; opacity: 0.85; }
.bk-fmtbar__n { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; }
.bk-recent { display: flex; flex-direction: column; }
.bk-recent__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.bk-recent__row:last-child { border-bottom: 0; }
.bk-recent__title { font-size: 13px; font-weight: 500; color: var(--text); }
.bk-recent__sub { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 2px; }

.bk-modal .cp-modal__card { max-width: 560px; max-height: 90vh; overflow-y: auto; }

@media (max-width: 900px) {
  .bk-split { grid-template-columns: 1fr; }
  .bk-pane { position: static; }
}
@media (max-width: 760px) {
  .bk-statcols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bk-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   THEATRE & GIGS  (.tg) — live events tracker
   ============================================================ */
.tg-tabwrap { display: flex; flex-direction: column; }
.tg-fmtfilters { margin-bottom: 16px; }
/* Been-to header: title left · filters centered · add-event right */
.tg-beenhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 16px; }
.tg-beenhead > h2 { justify-self: start; }
.tg-beenhead > .cp-btn { justify-self: end; }
.tg-beenfilters { justify-self: center; min-width: 0; }
.tg-beenfilters .an-filters { margin-bottom: 0; justify-content: center; }
@media (max-width: 860px) {
  .tg-beenhead { grid-template-columns: 1fr auto; }
  .tg-beenfilters { grid-column: 1 / -1; order: 3; justify-self: stretch; }
  .tg-beenfilters .an-filters { justify-content: flex-start; }
}
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }

/* event card */
.tg-card { padding: 15px 16px; gap: 11px; cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.14s; }
.tg-card:hover { border-color: var(--border); }
.tg-card__top { display: flex; align-items: flex-start; gap: 12px; }
.tg-card__id { min-width: 0; flex: 1; }
.tg-card__title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); line-height: 1.25; text-wrap: pretty; }
.tg-card__note { font-size: 12.5px; color: var(--muted); line-height: 1.45; text-wrap: pretty; }

/* date badge */
.tg-date { flex: none; width: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; border-left: 3px solid var(--gc, var(--accent)); }
.tg-date__d { font-size: 18px; font-weight: 700; line-height: 1; color: var(--text); letter-spacing: -0.02em; }
.tg-date__m { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.tg-date__y { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--faint); margin-top: 1px; }

/* place / lineup / companions */
.tg-place { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.tg-place svg, .tg-lineup svg, .tg-with svg, .tg-cost svg { color: var(--faint); flex: none; }
.tg-lineup { display: flex; align-items: baseline; gap: 7px; font-size: 12px; color: var(--muted); }
.tg-lineup svg { position: relative; top: 1px; }
.tg-lineup__list { line-height: 1.4; }
.tg-act.is-head { color: var(--text); font-weight: 600; }
.tg-with { display: flex; align-items: center; gap: 7px; }
.tg-with__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tg-pchip { font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 1px 8px; }

.tg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.tg-cost { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12px; color: var(--text); }

.tg-card__rating { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tg-when { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

.tg-soon { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tg-countdown { font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 2px 9px; }
.tg-countdown.is-soon { color: var(--accent); border-color: var(--accent-line); background: color-mix(in oklch, var(--accent) 10%, var(--surface-2)); }

/* stats */
.tg-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tg-statcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tg-statcols:first-child { margin-top: 0; }
.tg-panel { padding: 16px 17px; gap: 13px; display: flex; flex-direction: column; }
.tg-panel__h { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.tg-fmtbars { display: flex; flex-direction: column; gap: 10px; }
.tg-fmtbar { display: grid; grid-template-columns: 96px 1fr 28px; align-items: center; gap: 10px; }
.tg-fmtbar__l { font-size: 12px; color: var(--muted); }
.tg-fmtbar__track { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.tg-fmtbar__track span { display: block; height: 100%; border-radius: 99px; opacity: 0.85; }
.tg-fmtbar__n { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; }
.tg-recent { display: flex; flex-direction: column; }
.tg-recent__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.tg-recent__row:last-child { border-bottom: 0; }
.tg-recent__title { font-size: 13px; font-weight: 500; color: var(--text); }
.tg-recent__sub { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 2px; }
.tg-crew { display: flex; flex-wrap: wrap; gap: 7px; }
.tg-crewchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 4px 6px 4px 11px; }
.tg-crewchip svg { color: var(--faint); }
.tg-crewchip i { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--muted); background: var(--surface-3); border-radius: 99px; min-width: 18px; text-align: center; padding: 1px 5px; }

/* modal: chips input */
.tg-modal .cp-modal__card { max-width: 820px; max-height: 90vh; overflow-y: auto; }
.tg-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: stretch; }
.tg-mcol { display: flex; flex-direction: column; }
.tg-mcol > .cp-field:last-child { margin-bottom: 0; }
.tg-reviewfield { flex: 1; }
.tg-reviewfield .cp-textarea { flex: 1; min-height: 150px; }
.tg-chipsinput { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 8px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; cursor: text; transition: border-color 0.14s; }
.tg-chipsinput:focus-within { border-color: var(--accent); background: var(--surface); }
.tg-ichip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text); background: var(--surface-3); border-radius: 7px; padding: 3px 4px 3px 9px; }
.tg-ichip button { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border: 0; background: transparent; color: var(--faint); cursor: pointer; border-radius: 5px; }
.tg-ichip button:hover { color: var(--text); background: var(--surface); }
.tg-chipinput { flex: 1; min-width: 110px; border: 0; background: transparent; color: var(--text); font-family: var(--ui); font-size: 13px; padding: 4px 2px; outline: none; }
.tg-chipinput::placeholder { color: var(--faint); }

@media (max-width: 760px) {
  .tg-statcols { grid-template-columns: 1fr; }
  .tg-mgrid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tg-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   VIDEOGAMES  (.vg)
   ============================================================ */
.vg-tabwrap { display: flex; flex-direction: column; }
.vg-platfilters { margin-bottom: 16px; }
.vg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }

/* now-playing cards — full width, horizontal layout */
.vg-pgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.vg-pcard { padding: 16px 18px; gap: 22px; cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: row; align-items: center; transition: border-color 0.14s; }
.vg-pcard:hover { border-color: var(--border); }
.vg-pcard__main { flex: 1.5; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vg-pcard__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vg-pcard__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); line-height: 1.25; text-wrap: pretty; }
.vg-pcard__genre { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--faint); margin-top: 3px; }
.vg-pcard__metaline { display: flex; flex-wrap: wrap; gap: 5px 14px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.vg-pcard__metaline span { display: inline-flex; align-items: center; gap: 5px; }
.vg-pcard__metaline svg { color: var(--faint); }
.vg-pcard__note { font-size: 12.5px; color: var(--muted); line-height: 1.4; text-wrap: pretty; }
.vg-pcard__ach { flex: 1; min-width: 160px; max-width: 300px; }
.vg-pcard__noach { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.vg-pcard__acts { flex: none; margin-top: 0; }
.vg-hours { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12px; color: var(--text); }
.vg-hours svg { color: var(--muted); }
@media (max-width: 720px) {
  .vg-pcard { flex-direction: column; align-items: stretch; gap: 13px; }
  .vg-pcard__ach { max-width: none; }
}

/* wishlist — two per row, thin */
.vg-wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vg-wcard { display: flex; flex-direction: column; gap: 9px; padding: 13px 15px; cursor: pointer; transition: border-color 0.14s; }
.vg-wcard:hover { border-color: var(--border); }
.vg-wcard__head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.vg-wcard__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-wcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vg-wcard__sub { min-width: 0; font-family: var(--mono); font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-wcard__acts { flex: none; margin-top: 0; }
@media (max-width: 1180px) {
  .vg-wgrid { grid-template-columns: 1fr; }
}

/* achievement progress */
.vg-ach { display: flex; flex-direction: column; gap: 5px; }
.vg-ach__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vg-ach__lbl { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.vg-ach__lbl svg { color: var(--faint); }
.vg-ach__n { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.vg-ach__n.is-done { color: oklch(0.80 0.14 95); }
.vg-bar--gold span { background: linear-gradient(90deg, oklch(0.80 0.13 95 / 0.6), oklch(0.84 0.15 95)) !important; }

/* quick action: 100% */
.vg-act--100 svg { color: oklch(0.80 0.14 95); }

/* library / wishlist cards */
.vg-card { padding: 15px 16px; gap: 10px; cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.14s; }
.vg-card:hover { border-color: var(--border); }
.vg-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vg-card__id { min-width: 0; }
.vg-card__title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); line-height: 1.25; text-wrap: pretty; }
.vg-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.vg-card__rating { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vg-fin { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.vg-card__note { font-size: 12.5px; color: var(--muted); line-height: 1.45; text-wrap: pretty; }
.vg-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 2px; }

/* completion badges */
.vg-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; border: 1px solid transparent; }
.vg-badge--100 { color: oklch(0.84 0.14 95); background: color-mix(in oklch, oklch(0.80 0.14 95) 16%, var(--surface-2)); border-color: color-mix(in oklch, oklch(0.80 0.14 95) 40%, transparent); }
.vg-badge--100 svg { fill: currentColor; }
.vg-badge--story { color: oklch(0.70 0.12 235); background: color-mix(in oklch, oklch(0.70 0.12 235) 14%, var(--surface-2)); border-color: color-mix(in oklch, oklch(0.70 0.12 235) 36%, transparent); }

/* stats */
.vg-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.vg-statcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vg-panel { padding: 16px 17px; gap: 13px; display: flex; flex-direction: column; }
.vg-panel__h { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.vg-fmtbars { display: flex; flex-direction: column; gap: 10px; }
.vg-fmtbar { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: 10px; }
.vg-fmtbar__l { font-size: 12px; color: var(--muted); }
.vg-fmtbar__track { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.vg-fmtbar__track span { display: block; height: 100%; border-radius: 99px; opacity: 0.85; }
.vg-fmtbar__n { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; }
.vg-recent { display: flex; flex-direction: column; }
.vg-recent__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.vg-recent__row:last-child { border-bottom: 0; }
.vg-recent__title { font-size: 13px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 7px; }
.vg-recent__100 { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.05em; color: oklch(0.84 0.14 95); background: color-mix(in oklch, oklch(0.80 0.14 95) 16%, var(--surface-2)); border-radius: 99px; padding: 1px 6px; }
.vg-recent__sub { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 2px; }

/* modal: achievements fields */
.vg-modal .cp-modal__card { max-width: 560px; max-height: 90vh; overflow-y: auto; }
.vg-achfields { display: flex; align-items: center; gap: 10px; }
.vg-achfields .cp-input { width: 100%; }
.vg-achslash { color: var(--faint); font-family: var(--mono); }

/* split layout + 100%-completed right pane */
.vg-split { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.vg-split--full { grid-template-columns: 1fr; }
.vg-split__main { min-width: 0; }
.vg-pane { position: sticky; top: 8px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 13px 15px; }
.vg-pane__head { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 11px; }
.vg-pane__head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; color: var(--text); }
.vg-pane__head h3 svg { color: oklch(0.82 0.14 95); fill: currentColor; }
.vg-pane__empty { padding: 16px 6px 8px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; }
.vg-pane__list { display: flex; flex-direction: column; gap: 8px; }
.vg-pitem { display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 11px; cursor: pointer; transition: border-color 0.14s; }
.vg-pitem:hover { border-color: var(--border); }
.vg-pitem__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.vg-pitem__id { min-width: 0; }
.vg-pitem__title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; text-wrap: pretty; }
.vg-pitem__sub { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 3px; }
.vg-pitem__medal { flex: none; color: oklch(0.82 0.14 95); }
.vg-pitem__medal svg { fill: currentColor; }
.vg-pitem__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.vg-pitem__meta span { display: inline-flex; align-items: center; gap: 4px; }
.vg-pitem__meta svg { color: var(--faint); }

@media (max-width: 900px) {
  .vg-split { grid-template-columns: 1fr; }
  .vg-pane { position: static; }
}

@media (max-width: 760px) {
  .vg-statcols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vg-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   DINING OUT  (.din)
   ============================================================ */
.din-tabwrap { display: flex; flex-direction: column; }
.din-loglayout { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 14px; align-items: start; }
.din-logmain { display: flex; flex-direction: column; }
.din-tlpane { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 14px 6px; position: sticky; top: 16px; align-self: start; }
.din-tlpane__h { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.din-tlpane__h span { font-size: 10px; color: var(--muted); background: var(--surface-2); border-radius: 99px; padding: 1px 7px; }
.din-tlpane__scroll { max-height: calc(100vh - 96px); overflow: auto; padding-bottom: 8px; }
.din-tlpane .din-tl__row { padding: 7px 6px; gap: 10px; }
.din-tlpane .din-tl__date { width: 34px; }
.din-tlpane .din-tl__d { font-size: 15px; }
.din-tlpane .din-tl__name { font-size: 13px; }
.din-grid { display: flex; flex-direction: column; gap: 10px; }

/* timeline + calendar two-column layout */
.din-tllayout { display: grid; grid-template-columns: minmax(0, 1fr) 405px; gap: 16px; align-items: start; }
.din-tlmain { min-width: 0; display: flex; flex-direction: column; }
.din-cal { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 20px; position: sticky; top: 16px; align-self: start; }
.din-cal__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.din-cal__nav { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; color: var(--muted); cursor: pointer; transition: background 0.14s, color 0.14s; }
.din-cal__nav:hover { background: var(--surface-3); color: var(--text); }
.din-cal__title { flex: 1; text-align: center; font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; gap: 10px; }
.din-cal__count { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.03em; color: var(--muted); background: var(--surface-2); border-radius: 99px; padding: 3px 9px; }
.din-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 7px; }
.din-cal__dow span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); text-align: center; }
.din-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.din-cal__cell { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 7px; border-radius: 10px; border: 1px solid transparent; }
.din-cal__cell.has { background: var(--surface-2); cursor: pointer; transition: background 0.12s; }
.din-cal__cell.has:hover { background: var(--surface-3); }
.din-cal__cell.is-today { border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
.din-cal__num { font-size: 15px; font-weight: 500; color: var(--muted); line-height: 1; }
.din-cal__cell.has .din-cal__num { color: var(--text); font-weight: 600; }
.din-cal__cell.is-out .din-cal__num { color: color-mix(in oklch, var(--faint) 60%, transparent); }
.din-cal__cell.is-out.has { opacity: 0.5; }
.din-cal__dots { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 5px; max-width: 80%; }
.din-cal__dot { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.din-cal__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.din-cal__leg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }

@media (max-width: 1080px) {
  .din-tllayout { grid-template-columns: 1fr; }
  .din-cal { position: static; }
}

@media (max-width: 1080px) {
  .din-loglayout { grid-template-columns: 1fr; }
  .din-tlpane { position: static; }
  .din-tlpane__scroll { max-height: none; }
}

/* score badge (timeline rows) */
.din-score { flex: none; display: flex; align-items: baseline; gap: 1px; padding: 5px 9px; border-radius: 10px; background: color-mix(in oklch, var(--sc) 16%, var(--surface-2)); border: 1px solid color-mix(in oklch, var(--sc) 35%, transparent); }
.din-score__n { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--sc); }
.din-score__d { font-family: var(--mono); font-size: 9px; color: var(--sc); opacity: 0.7; }
.din-score--big { padding: 7px 11px; }
.din-score--big .din-score__n { font-size: 22px; }
.din-score--big .din-score__d { font-size: 10px; }

/* big bordered score box (visit cards) */
.din-scorebox { display: flex; align-items: baseline; justify-content: center; gap: 2px; width: 62px; padding: 13px 0 14px; border-radius: 13px;
  background: color-mix(in oklch, var(--sc) 12%, transparent);
  border: 1.5px solid color-mix(in oklch, var(--sc) 52%, transparent); }
.din-scorebox__n { font-size: 27px; font-weight: 700; letter-spacing: -0.03em; color: var(--sc); line-height: 1; }
.din-scorebox__d { font-family: var(--mono); font-size: 10px; color: var(--sc); opacity: 0.65; }

/* visit card — full-width grid row (columns shared + resizable) */
.din-gridwrap { display: flex; flex-direction: column; container-type: inline-size; }
.din-card { padding: 16px 18px 16px 22px; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.14s;
  display: grid; grid-template-columns: var(--dc0, 0.85fr) var(--dc1, 1.15fr) var(--dc2, 1.25fr) 92px 62px; column-gap: 20px; align-items: start; }
.din-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gc, var(--accent)); opacity: 0.9; }
.din-card:hover { border-color: var(--border); }
.din-card__lead { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.din-card__dishes { min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.din-card__review { min-width: 0; padding-top: 1px; }
.din-card__subs { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.din-card__rate { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.din-card__price { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.din-card__name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); line-height: 1.2; text-wrap: pretty; }
.din-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.din-meta__cuisine { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--faint); }
.din-cuisine { align-self: flex-start; display: inline-flex; align-items: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.din-meta__city { font-size: 13.5px; color: var(--muted); }
.din-card__note { font-size: 14.5px; color: var(--muted); line-height: 1.5; text-wrap: pretty; margin: 0; }

/* adjust-mode column ruler */
.din-rule { display: grid; grid-template-columns: var(--dc0, 0.85fr) var(--dc1, 1.15fr) var(--dc2, 1.25fr) 92px 62px; column-gap: 20px; padding: 0 18px 0 22px; margin-bottom: 4px; }
.din-rule__seg { position: relative; min-width: 0; padding: 2px 0; }
.din-rule__seg > span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.din-rule__div { position: absolute; top: -4px; bottom: -4px; right: -16px; width: 14px; display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; z-index: 4; }
.din-rule__div > span { display: block; width: 2px; height: 15px; border-radius: 2px; background: var(--border); transition: background 0.14s ease, height 0.14s ease; }
.din-rule__div:hover > span { background: var(--accent); height: 22px; }
body.resizing .din-rule__div > span { background: var(--accent); }
.din-gridwrap.is-adjust .din-grid { outline: 1px dashed var(--border-soft); outline-offset: 4px; border-radius: var(--radius); }

/* sub-ratings */
.din-subs { display: flex; flex-wrap: wrap; gap: 7px; }
.din-subs--stacked { flex-direction: column; flex-wrap: nowrap; gap: 7px; }
.din-sub { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 3px 9px; }
.din-subs--stacked .din-sub { justify-content: space-between; min-width: 84px; padding: 4px 11px; }
.din-sub__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.din-sub__n { font-size: 13px; font-weight: 700; }

/* dishes */
.din-dishes { display: flex; flex-direction: column; gap: 6px; }
.din-dish { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: baseline; }
.din-dish__k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.din-dish__t { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.3; text-wrap: pretty; }

.din-when { font-family: var(--mono); font-size: 10.5px; color: var(--faint); text-align: center; line-height: 1.3; }
.din-with { display: flex; align-items: center; gap: 7px; }
.din-with svg { color: var(--faint); flex: none; }
.din-with__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.din-pchip { font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 1px 8px; }
.din-chip--city svg { margin-left: 2px; }

@container (max-width: 720px) {
  .din-card { grid-template-columns: var(--dc0, 0.85fr) var(--dc1, 1.15fr) 92px 62px; }
  .din-card__review { grid-column: 1 / -1; order: 5; padding-top: 0; }
  .din-rule__seg:nth-child(3) { display: none; }
  .din-rule { grid-template-columns: var(--dc0, 0.85fr) var(--dc1, 1.15fr) 92px 62px; }
}
@container (max-width: 520px) {
  .din-card { grid-template-columns: 1fr; row-gap: 14px; }
  .din-card__subs { flex-direction: row; flex-wrap: wrap; }
  .din-card__rate { flex-direction: row; align-items: center; gap: 14px; justify-self: start; }
  .din-rule { display: none; }
}

/* ---- map ---- */
.din-mapwrap { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; align-items: stretch; }
.din-map { padding: 18px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklch, var(--accent) 8%, var(--surface)) 0%, var(--surface) 70%);
  position: relative; overflow: hidden; }
.din-map::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 26px 26px; opacity: 0.35; pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 45%, #000 40%, transparent 100%);
  mask-image: radial-gradient(80% 80% at 50% 45%, #000 40%, transparent 100%);
}
.din-mapsvg { width: 100%; max-width: 440px; height: auto; position: relative; }
.din-land { fill: color-mix(in oklch, var(--accent) 22%, var(--surface-3)); stroke: color-mix(in oklch, var(--accent) 45%, var(--border)); stroke-width: 0.5; stroke-linejoin: round; }
.din-pin { cursor: pointer; }
.din-pin__halo { fill: #fff; opacity: 0; transition: opacity 0.14s; }
.din-pin:hover .din-pin__halo { opacity: 0.16; }
.din-pin__dot { stroke: var(--surface); stroke-width: 0.9; transition: transform 0.12s; transform-box: fill-box; transform-origin: center; }
.din-pin:hover .din-pin__dot { transform: scale(1.18); }
.din-pin__n { font-family: var(--mono); font-size: 3.4px; font-weight: 600; fill: #1a1207; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.din-pin__lbl { font-family: var(--mono); font-size: 3.2px; fill: var(--muted); text-anchor: middle; pointer-events: none; opacity: 0; transition: opacity 0.14s; paint-order: stroke; stroke: var(--surface); stroke-width: 0.9px; stroke-linejoin: round; }
.din-pin:hover .din-pin__lbl { opacity: 1; fill: var(--text); }
.din-maplist { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; align-self: start; }
.din-maplist__h { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.din-cityrow { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; transition: background 0.12s; }
.din-cityrow:hover { background: var(--surface-2); }
.din-cityrow__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.din-cityrow__name { flex: 1; text-align: left; font-size: 13px; color: var(--text); }
.din-cityrow__n { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.din-maplist__note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--faint); line-height: 1.5; }

/* ---- timeline ---- */
.din-tl { display: flex; flex-direction: column; gap: 2px; }
.din-tl__month { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 14px 0 6px; }
.din-tl__month:first-child { margin-top: 0; }
.din-tl__row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 8px 6px; border-radius: 10px; transition: background 0.12s; }
.din-tl__row:hover { background: var(--surface); }
.din-tl__date { flex: none; width: 40px; display: flex; flex-direction: column; align-items: center; }
.din-tl__d { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1; }
.din-tl__m { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.din-tl__line { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gc, var(--accent)); box-shadow: 0 0 0 4px color-mix(in oklch, var(--gc, var(--accent)) 18%, transparent); }
.din-tl__main { flex: 1; min-width: 0; }
.din-tl__name { font-size: 14px; font-weight: 600; color: var(--text); }
.din-tl__sub { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 2px; }

/* ---- stats ---- */
.din-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.din-statcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.din-panel { padding: 16px 17px; gap: 13px; display: flex; flex-direction: column; }
.din-panel__h { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.din-bars { display: flex; flex-direction: column; gap: 10px; }
.din-bar { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: 10px; }
.din-bar__l { font-size: 12px; color: var(--muted); }
.din-bar__track { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.din-bar__track span { display: block; height: 100%; border-radius: 99px; opacity: 0.85; }
.din-bar__n { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; }
.din-cuisines { display: flex; flex-wrap: wrap; gap: 7px; }
.din-cchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 4px 6px 4px 11px; }
.din-cchip i { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--surface-3); border-radius: 99px; min-width: 17px; text-align: center; padding: 1px 5px; }
.din-recent { display: flex; flex-direction: column; }
.din-recent__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.din-recent__row:last-child { border-bottom: 0; }
.din-recent__name { font-size: 13px; font-weight: 500; color: var(--text); }
.din-recent__sub { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 2px; }

/* ---- modal ---- */
.din-modal .cp-modal__card { max-width: 800px; max-height: 92vh; overflow-y: auto; }
.din-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
.din-mcol { display: flex; flex-direction: column; }
.din-rate__row { display: flex; align-items: center; gap: 11px; }
.din-range { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--sc) var(--fill), var(--surface-3) var(--fill)); cursor: pointer; }
.din-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--sc); border: 2px solid var(--surface); cursor: pointer; box-shadow: 0 1px 3px oklch(0 0 0 / 0.4); }
.din-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--sc); border: 2px solid var(--surface); cursor: pointer; }
.din-rate__v { flex: none; width: 18px; text-align: center; font-family: var(--mono); font-size: 13px; font-weight: 600; }

@media (max-width: 860px) {
  .din-mapwrap { grid-template-columns: 1fr; }
  .din-mgrid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 760px) {
  .din-statcols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .din-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   MEAL PLANNER  (.ml)
   ============================================================ */
.ml-weekbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }.ml-nav { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--border-soft); background: var(--surface); color: var(--muted); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.ml-nav:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.ml-weekbar__mid { min-width: 168px; text-align: center; }
.ml-weekbar__midwrap { position: relative; }
.ml-weekbar__mid--btn { display: block; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 4px 10px; cursor: pointer; transition: background 0.14s, border-color 0.14s; }
.ml-weekbar__mid--btn:hover { background: var(--surface-2); border-color: var(--border-soft); }
.ml-weekbar__mid--btn.is-open { background: var(--surface-2); border-color: var(--border); }
.ml-weekbar__mid--btn .ml-weekbar__range { display: inline-flex; align-items: center; gap: 3px; justify-content: center; }
.ml-weekbar__mid--btn .ml-weekbar__range svg { color: var(--muted); transition: transform 0.18s; }
.ml-weekbar__mid--btn.is-open .ml-weekbar__range svg { transform: rotate(180deg); }

/* week picker popover */
.ml-wp { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 40; width: 296px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 44px -12px rgba(0,0,0,0.32); padding: 12px; }
.ml-wp__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ml-wp__nav { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; color: var(--muted); cursor: pointer; transition: background 0.14s, color 0.14s; }
.ml-wp__nav:hover { background: var(--surface-3); color: var(--text); }
.ml-wp__title { flex: 1; display: flex; gap: 6px; justify-content: center; }
.ml-wp__sel { appearance: none; -webkit-appearance: none; font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.ml-wp__sel:focus { outline: none; border-color: var(--accent); }
.ml-wp__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 2px; margin-bottom: 4px; }
.ml-wp__dow span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); text-align: center; }
.ml-wp__grid { display: flex; flex-direction: column; gap: 3px; }
.ml-wp__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 3px 2px; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.ml-wp__week:hover { background: var(--surface-2); border-color: var(--border-soft); }
.ml-wp__week.is-sel { background: color-mix(in oklch, var(--accent) 16%, transparent); border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
.ml-wp__week.is-this:not(.is-sel) { border-color: color-mix(in oklch, var(--accent) 30%, transparent); }
.ml-wp__day { font-size: 12.5px; font-weight: 500; color: var(--text); text-align: center; padding: 4px 0; border-radius: 5px; }
.ml-wp__day.is-out { color: var(--faint); }
.ml-wp__week.is-sel .ml-wp__day { color: var(--accent); font-weight: 600; }
.ml-wp__foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.ml-wp__today { width: 100%; font-family: var(--ui); font-size: 12.5px; font-weight: 500; color: var(--accent); background: color-mix(in oklch, var(--accent) 8%, transparent); border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent); border-radius: 8px; padding: 8px; cursor: pointer; transition: background 0.14s; }
.ml-wp__today:hover { background: color-mix(in oklch, var(--accent) 14%, transparent); }
.ml-weekbar__rel { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.ml-weekbar__range { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 1px; }
.ml-todaybtn { margin-left: 2px; }
.ml-viewseg { flex: none; order: 9; margin-left: auto; }

.ml-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--ml-ideasw, 232px); gap: 16px; align-items: start; }
.ml-left { min-width: 0; }
.ml-grid { display: flex; flex-direction: column; gap: var(--ml-rowgap, 12px); }

/* day column */
/* day row — 4 aligned columns driven by shared CSS vars (adjust-mode resizable) */
.ml-day { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: var(--ml-c0, 0.62fr) var(--ml-c1, 1fr) var(--ml-c2, 1fr) var(--ml-c3, 1fr); align-items: stretch; column-gap: var(--ml-colgap, 18px); min-width: 0; }
.ml-day.is-today { border-color: color-mix(in oklch, var(--accent) 55%, transparent); background: color-mix(in oklch, var(--accent) 6%, var(--surface)); }
.ml-day__head { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-right: var(--ml-colgap, 18px); border-right: 1px solid var(--border-soft); }
.ml-day__dow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ml-day__date { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.ml-day.is-today .ml-day__date, .ml-day.is-today .ml-day__dow { color: var(--accent); }
.ml-day__today { margin-top: 4px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: color-mix(in oklch, var(--accent) 16%, transparent); border-radius: 99px; padding: 2px 5px; }

/* adjust mode: spacing toolbar + column ruler */
.ml-adjustbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ml-adjustbar__reset { border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.ml-rule { display: grid; grid-template-columns: var(--ml-c0, 0.62fr) var(--ml-c1, 1fr) var(--ml-c2, 1fr) var(--ml-c3, 1fr); column-gap: var(--ml-colgap, 18px); padding: 0 16px; margin-bottom: 4px; }
.ml-rule__seg { position: relative; min-width: 0; padding: 2px 0; }
.ml-rule__seg > span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.ml-rule__div { position: absolute; top: -3px; bottom: -3px; right: calc(-0.5 * var(--ml-colgap, 18px) - 6px); width: 12px; display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; z-index: 3; }
.ml-rule__div > span { display: block; width: 2px; height: 15px; border-radius: 2px; background: var(--border); transition: background 0.14s ease, height 0.14s ease; }
.ml-rule__div:hover > span { background: var(--accent); height: 22px; }
body.resizing .ml-rule__div > span { background: var(--accent); }

/* slot */
.ml-slot { display: flex; flex-direction: column; gap: 4px; }
.ml-slot__label { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: 0; padding: 0 1px; cursor: pointer; color: var(--faint); }
.ml-slot__label span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; }
.ml-slot__label svg { opacity: 0; transition: opacity 0.12s; }
.ml-slot:hover .ml-slot__label svg, .ml-slot.is-focus .ml-slot__label svg { opacity: 0.7; }
.ml-slot.is-focus .ml-slot__label { color: var(--accent); }
.ml-slot__items { display: flex; flex-direction: column; gap: 4px; }

.ml-chip { display: flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 7px; padding: 4px 5px 4px 7px; }
.ml-chip__t { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.25; color: var(--text); text-wrap: pretty; word-break: break-word; }
.ml-chip__x { flex: none; display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 5px; border: 0; background: transparent; color: var(--faint); cursor: pointer; opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s; }
.ml-chip:hover .ml-chip__x { opacity: 1; }
.ml-chip__x:hover { background: var(--surface-3); color: var(--text); }
.ml-add { width: 100%; font-family: inherit; font-size: 11.5px; color: var(--text); background: var(--surface-2); border: 1px solid color-mix(in oklch, var(--accent) 45%, var(--border)); border-radius: 7px; padding: 5px 7px; outline: none; }
.ml-add::placeholder { color: var(--faint); }

/* snacks: single comma-separated line in one box */
.ml-snackline { display: block; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 7px; padding: 4px 8px; font-size: 11.5px; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-snack { white-space: nowrap; }
.ml-snack__sep { color: var(--muted); }
.ml-snack__x { display: none; align-items: center; justify-content: center; vertical-align: middle; width: 14px; height: 14px; margin-left: 2px; border-radius: 4px; border: 0; background: var(--surface-3); color: var(--faint); cursor: pointer; }
.ml-snackline:hover .ml-snack__x { display: inline-flex; }
.ml-snack__x:hover { color: var(--text); background: var(--border); }
.ml-empty { width: 100%; border: 1px dashed var(--border); background: transparent; color: var(--faint); border-radius: 7px; padding: 3px; font-size: 13px; line-height: 1; cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; }
.ml-empty:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in oklch, var(--accent) 6%, transparent); }

/* ideas pane */
.ml-ideas { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px; align-self: start; position: sticky; top: 16px; }
.ml-ideas__resize { position: absolute; top: 0; bottom: 0; left: -9px; width: 14px; display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; z-index: 3; }
.ml-ideas__resize > span { display: block; width: 2px; height: 40px; border-radius: 2px; background: var(--border); transition: background 0.14s ease, height 0.14s ease; }
.ml-ideas__resize:hover > span { background: var(--accent); height: 72px; }
body.resizing .ml-ideas__resize > span { background: var(--accent); }
.ml-ideas__h { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.ml-ideas__target { margin: 8px 0 12px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.ml-ideas__target strong { color: var(--accent); font-weight: 600; }
.ml-ideas__list { display: flex; flex-direction: column; gap: 5px; }
.ml-idea { position: relative; display: flex; align-items: center; width: 100%; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; transition: background 0.12s, border-color 0.12s; }
.ml-idea:hover { background: var(--surface-3); border-color: var(--border); }
.ml-idea__add { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: none; padding: 7px 9px; cursor: pointer; color: inherit; }
.ml-idea__t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-idea__n { flex: none; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.ml-idea__tools { flex: none; display: flex; align-items: center; gap: 1px; padding-right: 5px; opacity: 0; transition: opacity 0.12s; }
.ml-idea:hover .ml-idea__tools, .ml-idea:focus-within .ml-idea__tools { opacity: 1; }
.ml-idea__tool { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: none; border: none; cursor: pointer; color: var(--faint); transition: background 0.12s, color 0.12s; }
.ml-idea__tool:hover { background: var(--surface); color: var(--text); }
.ml-idea__tool--del:hover { color: var(--cal-office, #d9534f); }
.ml-idea__edit { width: 100%; font-size: 12.5px; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--accent); border-radius: 7px; padding: 6px 8px; margin: 0; outline: none; }
.ml-idea.is-editing { background: none; border-color: transparent; }

@media (max-width: 1080px) {
  .ml-body { grid-template-columns: 1fr; }
  .ml-ideas { position: static; }
  .ml-ideas__resize { display: none; }
  .ml-ideas__list { flex-direction: row; flex-wrap: wrap; }
  .ml-idea { width: auto; }
}
@media (max-width: 680px) {
  .ml-day { grid-template-columns: 1fr; row-gap: 12px; }
  .ml-day__head { padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--border-soft); flex-direction: row; align-items: baseline; gap: 6px; }
  .ml-day__today { margin: 0 0 0 auto; }
  .ml-rule { display: none; }
}

/* ============================================================
   Health & Sleep
   ============================================================ */
.hs { max-width: 1240px; }
.hs-good { --hc: oklch(0.72 0.13 150); }
.hs-warn { --hc: oklch(0.78 0.13 75); }
.hs-bad  { --hc: var(--cal-office); }

/* summary stats */
.hs-summary {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px;
}
.hs-stat { padding: 15px 16px; }
.hs-stat__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.hs-stat__value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-top: 7px; line-height: 1; }
.hs-stat__value i { font-style: normal; font-size: 15px; font-weight: 500; color: var(--faint); margin-left: 3px; }
.hs-stat__sub { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 7px; letter-spacing: 0.02em; }
.hs-stat.is-accent .hs-stat__value { color: var(--accent); }
.hs-stat.is-good .hs-stat__value, .hs-stat.is-warn .hs-stat__value, .hs-stat.is-bad .hs-stat__value { color: var(--hc); }
.hs-stat.is-good { --hc: oklch(0.72 0.13 150); }
.hs-stat.is-warn { --hc: oklch(0.80 0.12 75); }
.hs-stat.is-bad  { --hc: var(--cal-office); }
.hs-stat.is-good .hs-stat__sub, .hs-stat.is-warn .hs-stat__sub, .hs-stat.is-bad .hs-stat__sub { color: var(--hc); }

/* grid of cards */
.hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.hs-card { padding: 16px 18px 18px; }
.hs-card--wide { grid-column: 1 / -1; }
.hs-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hs-card__title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.hs-ico { display: inline-flex; color: var(--accent); }
.hs-card__hint { font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: 0.03em; }
.hs-rangeseg button { padding: 5px 11px; font-size: 11.5px; }
.hs-chart__empty { color: var(--faint); font-size: 13px; padding: 26px 4px; text-align: center; }

/* weight chart */
.hs-wchart { width: 100%; height: 210px; display: block; overflow: visible; }
.hs-wchart__line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hs-wchart__dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.hs-wchart__goal { stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.hs-wchart__goallbl { fill: var(--faint); font-family: var(--mono); font-size: 10px; }
.hs-wmeta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.hs-wmeta__item { display: flex; flex-direction: column; gap: 3px; }
.hs-wmeta__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.hs-wmeta__item b { font-size: 14px; font-weight: 600; }
.hs-wmeta__item--proj b { color: var(--accent); }

/* sleep bars */
.hs-sleep { padding: 4px 0 0; }
.hs-sleep__bars { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; height: 150px; align-items: end; }
.hs-sleep__col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.hs-sleep__track { width: 100%; height: 100%; display: flex; align-items: flex-end; }
.hs-sleep__fill { width: 100%; border-radius: 4px 4px 2px 2px; background: var(--surface-3); min-height: 2px; transition: height 0.2s; }
.hs-sleep__fill.is-met { background: var(--accent); }
.hs-sleep__fill.is-empty { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, transparent 3px, transparent 6px); min-height: 0; }
.hs-sleep__dow { font-family: var(--mono); font-size: 9px; color: var(--faint); }
.hs-sleep__targetline { position: absolute; left: 0; right: 0; bottom: calc(var(--target) * (150px - 15px) / 100 + 15px); height: 0; border-top: 1px dashed var(--accent-line); pointer-events: none; }
.hs-sleepfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.hs-sleepfoot__hint { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.hs-pill { font-family: var(--mono); font-size: 10.5px; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--border-soft); }
.hs-pill.is-good { color: oklch(0.74 0.13 150); border-color: var(--accent-line); }
.hs-pill.is-warn { color: oklch(0.80 0.12 75); border-color: color-mix(in oklch, oklch(0.80 0.12 75) 30%, transparent); }

/* exercise */
.hs-exweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 120px; align-items: end; margin-bottom: 6px; }
.hs-exweek__col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.hs-exweek__track { width: 100%; height: 100%; display: flex; align-items: flex-end; }
.hs-exweek__fill { width: 100%; border-radius: 5px 5px 2px 2px; background: var(--surface-3); min-height: 2px; transition: height 0.2s; }
.hs-exweek__col.is-today .hs-exweek__fill { background: var(--accent); }
.hs-exweek__lbl { font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
.hs-exweek__col.is-today .hs-exweek__lbl { color: var(--accent); }
.hs-exlist { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.hs-exrow { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.hs-exrow__ico { display: inline-flex; color: var(--muted); }
.hs-exrow__name { font-size: 13px; color: var(--text); flex: 1; min-width: 0; }
.hs-exrow__mins { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.hs-exrow__when { font-family: var(--mono); font-size: 10px; color: var(--faint); min-width: 56px; text-align: right; }

/* modal extras */
.hs-logtabs, .hs-qseg { width: 100%; margin-bottom: 14px; }
.hs-logtabs button, .hs-qseg button { flex: 1; }
.hs-typepick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.hs-typeopt {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px;
  color: var(--muted); cursor: pointer; font-family: var(--ui); font-size: 11px; transition: all 0.12s;
}
.hs-typeopt span { font-size: 11px; }
.hs-typeopt:hover { color: var(--text); border-color: var(--border); }
.hs-typeopt.is-on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* entries table */
.hs-filterseg { margin-bottom: 14px; }
.hs-filterseg button i { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--faint); margin-left: 5px; }
.hs-filterseg button.is-on i { color: var(--accent); }
.hs-table tbody tr { cursor: pointer; }
.hs-td__rel { display: block; font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 2px; }
.hs-ttag { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.hs-ttag svg { color: var(--muted); }
.hs-td__val { font-family: var(--mono); font-size: 13px; color: var(--text); }
.hs-td__extra { font-family: var(--mono); font-size: 11px; color: var(--faint); }
@media (max-width: 640px) { .hs-th--extra { display: none; } }

/* sleep debt — column + current-number card */
.hs-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hs-debt-card { display: flex; flex-direction: column; }
.hs-debtnow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0 2px; }
.hs-debtnow__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hs-debtnow__val { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.hs-debtnow__val i { font-style: normal; font-size: 20px; font-weight: 500; color: var(--faint); margin-left: 4px; }
.hs-debtnow__val.is-pos { color: oklch(0.74 0.13 150); }
.hs-debtnow__val.is-neg { color: oklch(0.78 0.13 45); }
.hs-debtnow__cap { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.02em; }

/* mini 5-night chart in debt card */
.hs-mini { display: flex; flex-direction: column; gap: 5px; width: 252px; flex: none; }
.hs-mini__chart { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; height: 50px; }
.hs-mini__zero { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.hs-mini__col { position: relative; height: 100%; }
.hs-mini__bar { position: absolute; left: 0; right: 0; border-radius: 3px; min-height: 2px; }
.hs-mini__bar.is-pos { background: oklch(0.74 0.13 150); border-radius: 3px 3px 1px 1px; }
.hs-mini__bar.is-neg { background: oklch(0.78 0.13 45); border-radius: 1px 1px 3px 3px; }
.hs-mini__bar.is-empty { background: transparent; }
.hs-mini__axis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.hs-mini__axis span { text-align: center; font-family: var(--mono); font-size: 8.5px; color: var(--faint); }

@media (max-width: 1080px) {
  .hs-summary { grid-template-columns: repeat(3, 1fr); }
  .hs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hs-summary { grid-template-columns: repeat(2, 1fr); }
  .hs-wmeta { grid-template-columns: 1fr 1fr; }
  .hs-typepick { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   People directory
   ============================================================ */
.pd { max-width: 1340px; }
.pd-tabwrap { display: flex; flex-direction: column; gap: 16px; }

/* avatar */
.pd-av {
  flex: none; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in oklch, var(--av) 26%, var(--surface-2));
  color: color-mix(in oklch, var(--av) 92%, white);
  border: 1px solid color-mix(in oklch, var(--av) 45%, transparent);
  font-family: var(--ui); font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase;
}

/* stars (closeness) */
.pd-stars { display: inline-flex; align-items: center; gap: 1px; color: var(--accent); }
.pd-star { color: var(--surface-3); display: inline-flex; }
.pd-star.is-on { color: var(--accent); }
.pd-stars--none { font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* relationship tag */
.pd-rel { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rc); white-space: nowrap; }
.pd-rel i { width: 7px; height: 7px; border-radius: 50%; background: var(--rc); flex: none; }

/* catch-up chip */
.pd-cu { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--muted); }
.pd-cu i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pd-cu.is-ok i { background: oklch(0.70 0.115 150); }
.pd-cu.is-due i { background: oklch(0.80 0.12 85); }
.pd-cu.is-over i { background: oklch(0.68 0.16 30); }
.pd-cu.is-over { color: oklch(0.78 0.10 35); }

.pd-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); flex: none; }

/* toolbar / search */
.pd-toolbar { display: flex; gap: 10px; }
.pd-search {
  flex: 1; display: flex; align-items: center; gap: 9px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 11px;
  color: var(--faint); transition: border-color 0.14s;
}
.pd-search:focus-within { border-color: var(--accent); color: var(--muted); }
.pd-search input { flex: 1; border: 0; background: transparent; outline: none; color: var(--text); font-family: var(--ui); font-size: 14px; padding: 11px 0; }
.pd-search input::placeholder { color: var(--faint); }
.pd-search__x { border: 0; background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; padding: 4px; border-radius: 6px; }
.pd-search__x:hover { color: var(--text); background: var(--surface-2); }

/* directory grid */
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.pd-card {
  display: flex; flex-direction: column; gap: 11px; text-align: left;
  padding: 16px 16px 14px; cursor: pointer; position: relative; overflow: hidden;
  border-color: var(--border-soft); transition: border-color 0.14s, transform 0.14s, background 0.14s;
  font-family: var(--ui);
}
.pd-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rc); opacity: 0.85; }
.pd-card:hover { border-color: color-mix(in oklch, var(--rc) 45%, var(--border)); transform: translateY(-1px); background: var(--surface-2); }
.pd-card__top { display: flex; align-items: center; gap: 12px; }
.pd-card__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pd-card__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pd-card__name em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--faint); }
.pd-card__sub { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.pd-card__loc { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); }
.pd-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-card__tag { font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--muted); white-space: nowrap; }
.pd-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border-soft); }
.pd-bday { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; color: oklch(0.82 0.10 320); }

.pd-seg-n { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 9.5px; font-weight: 500; }

/* catch-up tab */
.pd-cu-list { display: flex; flex-direction: column; gap: 9px; }
.pd-curow {
  display: flex; flex-direction: row; align-items: center; gap: 13px; padding: 12px 14px; cursor: pointer;
  position: relative; overflow: hidden; transition: border-color 0.14s, background 0.14s;
}
.pd-curow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rc); }
.pd-curow.is-over::before { background: oklch(0.68 0.16 30); }
.pd-curow:hover { background: var(--surface-2); }
.pd-curow__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pd-curow__name { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--text); flex-wrap: wrap; }
.pd-curow__meta { font-family: var(--mono); font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.pd-curow.is-over .pd-curow__meta { color: oklch(0.76 0.10 35); }
.pd-logbtn { white-space: nowrap; flex: none; }

/* birthdays tab */
.pd-bday-split { display: grid; grid-template-columns: 1fr 468px; gap: 20px; align-items: start; }
.pd-bday-main { min-width: 0; }
.pd-bday-list { display: flex; flex-direction: column; gap: 9px; }
.pd-bdayrow { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 11px 16px 11px 12px; cursor: pointer; transition: border-color 0.14s, background 0.14s; }
.pd-bdayrow:hover { background: var(--surface-2); }
.pd-bdayrow.is-soon { border-color: color-mix(in oklch, oklch(0.70 0.12 320) 40%, var(--border)); }
.pd-bdayrow__date {
  flex: none; width: 50px; height: 52px; border-radius: 10px; display: grid; place-content: center; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.pd-bdayrow.is-soon .pd-bdayrow__date { background: color-mix(in oklch, oklch(0.62 0.12 320) 16%, var(--surface-2)); border-color: color-mix(in oklch, oklch(0.62 0.12 320) 40%, transparent); }
.pd-bdayrow__d { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.pd-bdayrow__m { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.pd-bdayrow__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pd-bdayrow__name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.pd-bdayrow__meta { font-family: var(--mono); font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.pd-bdayrow__gift { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; color: oklch(0.80 0.10 320); white-space: nowrap; }

/* milestone birthdays panel */
.pd-pane {
  position: sticky; top: 8px; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 16px 16px 14px;
}
.pd-pane__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pd-pane__head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.pd-pane__head h3 svg { color: var(--accent); }
.pd-pane__sub { margin: 2px 0 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.pd-pane__empty { padding: 16px 4px; text-align: center; color: var(--faint); font-size: 12.5px; }
.pd-pane__list { display: flex; flex-direction: column; gap: 8px; }
.pd-mstone {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; cursor: pointer;
  padding: 13px 15px; border-radius: 13px; font-family: var(--ui);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  transition: background 0.14s, border-color 0.14s, transform 0.14s;
}
.pd-mstone:hover { background: var(--surface-3); border-color: color-mix(in oklch, var(--rc) 45%, var(--border)); transform: translateY(-1px); }
.pd-mstone__age {
  flex: none; min-width: 56px; height: 56px; padding: 0 8px; display: grid; place-items: center; border-radius: 12px;
  font-size: 27px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  color: color-mix(in oklch, var(--rc) 92%, white);
  background: color-mix(in oklch, var(--rc) 18%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--rc) 42%, transparent);
}
.pd-mstone__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pd-mstone__name { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-mstone__meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

@media (max-width: 1060px) {
  .pd-bday-split { grid-template-columns: 1fr; }
  .pd-pane { position: static; }
}

/* ---- profile (read) modal ---- */
.pd-profile { max-width: 860px; }
.pd-profile__hero { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; }
.pd-profile__id { flex: 1; min-width: 0; }
.pd-profile__id h2 { margin: 0 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pd-profile__id h2 em { font-style: normal; font-size: 14px; font-weight: 500; color: var(--faint); }
.pd-profile__tags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd-profile__cu {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; margin-bottom: 16px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.pd-profile__body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; align-items: start; }
.pd-sec { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pd-sec--wide { grid-column: 1 / -1; }
.pd-sec__h { margin: 0 0 2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 500; }

.pd-field { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text); line-height: 1.45; }
.pd-field__i { flex: none; color: var(--accent); margin-top: 1px; display: inline-flex; }
.pd-field__v { min-width: 0; word-break: break-word; }
.pd-field__v--link { color: var(--accent); text-decoration: none; }
.pd-field__v--link:hover { text-decoration: underline; }

.pd-cg { display: flex; flex-direction: column; gap: 6px; }
.pd-cg__l { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pd-cg__l svg { color: var(--faint); }
.pd-cg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-chip {
  font-size: 12.5px; padding: 4px 10px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--text);
}
.pd-chip--good { border-color: color-mix(in oklch, oklch(0.70 0.115 150) 40%, transparent); color: oklch(0.82 0.09 150); }
.pd-chip--bad { border-color: color-mix(in oklch, oklch(0.68 0.16 30) 36%, transparent); color: oklch(0.80 0.10 35); }
.pd-chip--gift { border-color: color-mix(in oklch, oklch(0.70 0.12 320) 40%, transparent); color: oklch(0.83 0.09 320); }
.pd-notes { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; }

/* ---- edit modal ---- */
.pd-edit { max-width: 740px; }
.pd-edit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin-top: 4px; align-items: start; }
.pd-edit__col { min-width: 0; display: flex; flex-direction: column; }
.pd-edit__col .cp-field { min-width: 0; }
.pd-edit__col .cp-input { min-width: 0; width: 100%; box-sizing: border-box; }
.pd-edit__col > .pd-edit__sec:first-child .pd-edit__h { margin-top: 0; }
.pd-edit__h { margin: 15px 0 9px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 500; padding-bottom: 7px; border-bottom: 1px solid var(--border-soft); }
.pd-3 { grid-template-columns: 1fr 1fr 1fr; }
.pd-2 { grid-template-columns: 1fr 1fr 1fr; }
.rc-srcadd { display: flex; align-items: stretch; gap: 6px; }
.rc-srcadd .cp-input { flex: 1; min-width: 0; }
.rc-srcadd__ok, .rc-srcadd__x { flex: none; padding: 0 11px; font-size: 12.5px; white-space: nowrap; }

/* star input */
.pd-starinput { display: flex; align-items: center; gap: 2px; }
.pd-starbtn { border: 0; background: transparent; cursor: pointer; padding: 2px; color: var(--surface-3); display: inline-flex; transition: color 0.12s; }
.pd-starbtn:hover, .pd-starbtn.is-on { color: var(--accent); }
.pd-starinput__lbl { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-left: 8px; }

/* tag input */
.pd-taginput {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 7px 9px;
  transition: border-color 0.14s, background 0.14s;
}
.pd-taginput:focus-within { border-color: var(--accent); background: var(--surface); }
.pd-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 4px 3px 10px; border-radius: 99px; background: var(--surface-3); color: var(--text); }
.pd-tag button { border: 0; background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 50%; }
.pd-tag button:hover { color: var(--text); background: var(--surface); }
.pd-taginput__in { flex: 1; min-width: 90px; border: 0; background: transparent; outline: none; color: var(--text); font-family: var(--ui); font-size: 13.5px; padding: 3px 2px; }
.pd-taginput__in::placeholder { color: var(--faint); }

.pd-swpick { display: flex; flex-wrap: wrap; gap: 6px; }

/* dropdown filter bar */
.pd-filterbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 16px; flex-wrap: wrap; }
.pd-dropdowns { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.pd-filterbar__right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pd-filter { position: relative; display: flex; flex-direction: column; gap: 5px; }
.pd-filter__l { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); padding-left: 2px; }
.pd-filter select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--ui); font-size: 12.5px; font-weight: 500; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 8px 30px 8px 11px; cursor: pointer; min-width: 104px; transition: border-color 0.14s, background 0.14s;
}
.pd-filter select:hover { background: var(--surface-3); }
.pd-filter select:focus { outline: none; border-color: var(--accent); }
.pd-filter > svg { position: absolute; right: 9px; bottom: 11px; color: var(--muted); pointer-events: none; }
.pd-clearf { display: inline-flex; align-items: center; gap: 6px; height: 35px; padding: 0 12px; border-radius: 8px; font-family: var(--ui); font-size: 12px; color: var(--accent); background: transparent; border: 1px solid var(--accent-line); cursor: pointer; transition: background 0.14s; }
.pd-clearf:hover { background: color-mix(in oklch, var(--accent) 10%, transparent); }
.pd-filterbar__count { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }

/* card view (master–detail) */
.pd-cardview { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 16px; align-items: start; }
.pd-cvcol { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; }
.pd-cvsort { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.pd-cvsort .pd-sort { flex: 1; }
.pd-cvsort .pd-sort select { width: 100%; }
.pd-sort--btn { flex: 1; justify-content: space-between; }
.pd-sort--btn {
  appearance: none; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 500; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 7px 11px; cursor: pointer; transition: border-color 0.14s, background 0.14s;
}
.pd-sort--btn:hover { background: var(--surface-3); }
.pd-sort--btn:focus { outline: none; border-color: var(--accent); }
.pd-sort--btn .pd-sort__btnval { white-space: nowrap; }
.pd-sort--btn > svg { color: var(--muted); position: static; }
.pd-cvlist { display: flex; flex-direction: column; gap: 4px; max-height: 625px; overflow-y: auto; padding-right: 4px; position: sticky; top: 8px; }
.pd-cvrow {
  display: flex; align-items: center; gap: 11px; text-align: left; width: 100%; cursor: pointer;
  padding: 9px 11px; border-radius: 11px; font-family: var(--ui);
  background: transparent; border: 1px solid transparent; transition: background 0.14s, border-color 0.14s;
}
.pd-cvrow:hover { background: var(--surface-2); }
.pd-cvrow.is-sel { background: var(--surface-2); border-color: color-mix(in oklch, var(--rc) 45%, var(--border)); }
.pd-cvrow.is-sel::before { content: ''; position: absolute; }
.pd-cvrow__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-cvrow__name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-cvrow__sub { font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-cvrow__bday { flex: none; color: oklch(0.80 0.10 320); display: inline-flex; }

.pd-cvdetail { padding: 22px 24px; position: relative; --rc: var(--accent); }
.pd-cvdetail::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--radius) 0 0 var(--radius); background: var(--rc); opacity: 0.85; }
.pd-cvdetail--empty { display: grid; place-items: center; min-height: 280px; }
.pd-cvdetail__hero { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.pd-cvdetail__hero .pd-profile__id { flex: 1; min-width: 0; }
.pd-cvdetail__hero .pd-profile__id h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pd-cvdetail__hero .pd-profile__id h2 em { font-style: normal; font-size: 14px; font-weight: 500; color: var(--faint); }

@media (max-width: 820px) {
  .pd-cardview { grid-template-columns: 1fr; }
  .pd-cvlist { position: static; max-height: 300px; }
}

/* order-by dropdown */
.pd-sort { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.pd-sort__l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.pd-sort select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--ui); font-size: 12.5px; font-weight: 500; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 7px 30px 7px 11px; cursor: pointer; transition: border-color 0.14s, background 0.14s;
}
.pd-sort select:hover { background: var(--surface-3); }
.pd-sort select:focus { outline: none; border-color: var(--accent); }
.pd-sort > svg { position: absolute; right: 9px; color: var(--muted); pointer-events: none; }
.pd-sortdir {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px;
  color: var(--muted); cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.pd-sortdir:hover { background: var(--surface-3); color: var(--text); }
.pd-sortdir svg { transition: transform 0.18s; }
.pd-sortdir.is-asc svg { transform: rotate(180deg); }
.pd-sortdir.is-asc { color: var(--accent); border-color: var(--accent-line); }
.pd-sortdir:disabled { opacity: 0.4; cursor: not-allowed; }
.pd-sortdir:disabled:hover { background: var(--surface-2); color: var(--muted); }

@media (max-width: 720px) {
  .pd-profile__body { grid-template-columns: 1fr; }
  .pd-3 { grid-template-columns: 1fr 1fr; }
  .pd-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pd-3 { grid-template-columns: 1fr; }
  .pd-2 { grid-template-columns: 1fr; }
  .pd-logbtn span, .pd-curow__name .pd-rel { display: none; }
}

/* ============================================================
   Plant tracker
   ============================================================ */
.pt { max-width: 1340px; }
.pt-tabwrap { display: flex; flex-direction: column; gap: 16px; }

.pt-av {
  flex: none; display: grid; place-items: center; border-radius: 16px;
  background: color-mix(in oklch, var(--av) 24%, var(--surface-2));
  color: color-mix(in oklch, var(--av) 92%, white);
  border: 1px solid color-mix(in oklch, var(--av) 45%, transparent);
  font-family: var(--ui); font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase;
}
.pt-health { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hc); white-space: nowrap; }
.pt-health i { width: 7px; height: 7px; border-radius: 50%; background: var(--hc); flex: none; }
.pt-light { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.pt-light svg { color: oklch(0.80 0.12 85); }

/* water meter */
.pt-meter { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pt-meter__bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pt-meter__bar span { display: block; height: 100%; border-radius: 99px; background: oklch(0.68 0.13 230); transition: width 0.3s; }
.pt-meter__lbl { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.pt-meter__lbl svg { color: oklch(0.68 0.13 230); }
.pt-meter.is-due .pt-meter__bar span { background: oklch(0.80 0.12 85); }
.pt-meter.is-due .pt-meter__lbl, .pt-meter.is-due .pt-meter__lbl svg { color: oklch(0.82 0.10 85); }
.pt-meter.is-over .pt-meter__bar span { background: oklch(0.68 0.16 30); width: 100% !important; }
.pt-meter.is-over .pt-meter__lbl, .pt-meter.is-over .pt-meter__lbl svg { color: oklch(0.78 0.13 35); }

/* plant card */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pt-card { display: flex; flex-direction: column; gap: 12px; text-align: left; padding: 16px; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.14s, transform 0.14s, background 0.14s; font-family: var(--ui); }
.pt-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hc); opacity: 0.8; }
.pt-card:hover { border-color: color-mix(in oklch, var(--hc) 42%, var(--border)); transform: translateY(-1px); background: var(--surface-2); }
.pt-card.is-thirsty::before { background: oklch(0.68 0.16 30); }
.pt-card__top { display: flex; align-items: center; gap: 12px; }
.pt-card__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-card__name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pt-card__species { font-size: 12px; font-style: italic; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-card__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.pt-chip svg { color: var(--faint); }
.pt-card__foot { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.pt-waterbtn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in oklch, oklch(0.68 0.13 230) 16%, var(--surface-2)); border: 1px solid color-mix(in oklch, oklch(0.68 0.13 230) 35%, transparent); color: oklch(0.74 0.13 230); cursor: pointer; transition: background 0.14s, transform 0.14s; }
.pt-waterbtn:hover { background: color-mix(in oklch, oklch(0.68 0.13 230) 28%, var(--surface-2)); transform: scale(1.06); }

/* watering tab */
.pt-bucket { display: flex; flex-direction: column; gap: 10px; }
.pt-bucket + .pt-bucket { margin-top: 6px; }
.pt-bucket__h { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pt-bucket__h span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--surface-3); font-size: 10px; color: var(--muted); }
.pt-bucket__hdot { width: 8px; height: 8px; border-radius: 50%; background: var(--hc); }
.pt-bucket__h--overdue { color: oklch(0.78 0.13 35); }
.pt-bucket__h--today { color: oklch(0.82 0.10 85); }
.pt-wlist { display: flex; flex-direction: column; gap: 8px; }
.pt-wrow { display: flex; flex-direction: row; align-items: center; gap: 13px; padding: 11px 14px; cursor: pointer; position: relative; overflow: hidden; transition: background 0.14s; }
.pt-wrow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hc); opacity: 0.7; }
.pt-wrow.is-over::before { background: oklch(0.68 0.16 30); }
.pt-wrow:hover { background: var(--surface-2); }
.pt-wrow__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-wrow__name { font-size: 14.5px; font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 8px; }
.pt-wrow__sp { font-size: 11.5px; font-style: italic; font-weight: 400; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-wrow__meta { font-family: var(--mono); font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.pt-due { font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.pt-due.is-ok { color: var(--muted); background: var(--surface-3); }
.pt-due.is-due { color: oklch(0.84 0.10 85); background: color-mix(in oklch, oklch(0.70 0.12 85) 16%, transparent); }
.pt-due.is-over { color: oklch(0.82 0.12 35); background: color-mix(in oklch, oklch(0.68 0.16 30) 16%, transparent); }
.pt-wrow__btn { flex: none; }

/* plant profile */
.pt-profile { max-width: 720px; }
.pt-profile__hero { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pt-profile__id { flex: 1; min-width: 0; }
.pt-profile__id h2 { margin: 0 0 3px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.pt-profile__sp { font-size: 13.5px; font-style: italic; color: var(--faint); margin-bottom: 9px; }
.pt-profile__tags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pt-care { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pt-carebtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px; font-family: var(--ui); font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--cc); background: color-mix(in oklch, var(--cc) 12%, var(--surface-2)); border: 1px solid color-mix(in oklch, var(--cc) 32%, transparent); transition: background 0.14s, transform 0.14s; }
.pt-carebtn:hover { background: color-mix(in oklch, var(--cc) 22%, var(--surface-2)); transform: translateY(-1px); }
.pt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.pt-stat { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.pt-stat__i { flex: none; color: var(--accent); display: inline-flex; }
.pt-stat__t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-stat__l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.pt-stat__v { font-size: 12.5px; color: var(--text); line-height: 1.3; }
.pt-sec { margin-bottom: 16px; }
.pt-sec__h { margin: 0 0 9px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.pt-notes { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; }
.pt-log { display: flex; flex-direction: column; gap: 2px; }
.pt-logrow { display: flex; align-items: center; gap: 11px; padding: 7px 4px; border-bottom: 1px solid var(--border-soft); }
.pt-logrow:last-child { border-bottom: 0; }
.pt-logrow__i { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--cc); background: color-mix(in oklch, var(--cc) 14%, var(--surface-2)); }
.pt-logrow__t { flex: 1; font-size: 13px; color: var(--text); }
.pt-logrow__d { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* plant edit extras */
.pt-edit { max-width: 580px; }
.pt-healthpick { display: flex; flex-wrap: wrap; gap: 7px; }
.pt-hopt { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; font-family: var(--ui); font-size: 12.5px; cursor: pointer; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); transition: all 0.14s; }
.pt-hopt i { width: 8px; height: 8px; border-radius: 50%; background: var(--hc); }
.pt-hopt.is-on { color: var(--hc); border-color: color-mix(in oklch, var(--hc) 50%, transparent); background: color-mix(in oklch, var(--hc) 12%, var(--surface-2)); }

@media (max-width: 720px) {
  .pt-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Recipe book
   ============================================================ */
.rc { max-width: 1340px; }
.rc-tabwrap { display: flex; flex-direction: column; gap: 16px; }
.rc-hint { margin: -4px 0 4px; font-size: 13px; color: var(--muted); }

.rc-cost { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: oklch(0.78 0.10 150); white-space: nowrap; }
.rc-cost em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--faint); margin-left: 4px; }
.rc-pips { display: inline-flex; align-items: center; gap: 4px; }
.rc-pips i { width: 7px; height: 7px; border-radius: 2px; background: var(--surface-3); }
.rc-pips i.is-on { background: var(--cc); }
.rc-pips__l { font-size: 12px; letter-spacing: 0; color: var(--text); margin-left: 3px; white-space: nowrap; }
.rc-src { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; color: var(--sc); }
.rc-src svg { opacity: 0.85; }
.rc-fact { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.rc-fact svg { color: var(--accent); }
.rc-fact em { font-style: normal; color: var(--faint); font-size: 11px; }
.rc-fact--muted { color: var(--muted); }
.rc-fact--muted svg { color: var(--faint); }
.rc-ready { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.rc-ready__bar { width: 46px; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rc-ready__bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.rc-ready.is-full { color: oklch(0.80 0.10 150); }
.rc-ready.is-full svg { color: oklch(0.72 0.13 150); }

/* recipe card */
.rc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1080px) { .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .rc-grid { grid-template-columns: minmax(0, 1fr); } }
.rc-card { display: flex; flex-direction: column; gap: 0; text-align: left; padding: 17px 19px; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.14s, transform 0.14s, background 0.14s; font-family: var(--ui); }
.rc-card:hover { border-color: color-mix(in oklch, var(--ac) 42%, var(--border)); transform: translateY(-1px); background: var(--surface-2); }
.rc-card__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; }
.rc-card__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.rc-card__title h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ac); line-height: 1.22; }
.rc-card__cuisine { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ac); }
.rc-card__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); }
.rc-want { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--faint); background: transparent; border: 1px solid var(--border-soft); cursor: pointer; transition: all 0.14s; }
.rc-want:hover { color: var(--accent); border-color: var(--accent-line); }
.rc-want.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.rc-card__facts { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; padding: 13px 0; border-top: 1px solid var(--border-soft); }
.rc-card__facts > * { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; }
.rc-card__facts > *:first-child { justify-content: flex-start; }
.rc-card__facts > *:last-child { justify-content: flex-end; }
.rc-card__facts > * + * { border-left: 1px solid var(--border-soft); }
.rc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px solid var(--border-soft); }
.rc-card__facts .pd-stars { color: oklch(0.78 0.10 150); }
.rc-card__facts .pd-star.is-on { color: oklch(0.78 0.10 150); }
.rc-card__facts .pd-star.is-on svg { fill: oklch(0.78 0.10 150); }
.rc-card__facts .pd-stars--none { font-size: 11px; }
.rc-card__made { font-family: var(--mono); font-size: 10.5px; color: var(--faint); text-align: right; }

/* to-make tab */
.rc-tomake { display: flex; flex-direction: column; gap: 11px; }
.rc-tmrow { padding: 15px 16px; cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; transition: background 0.14s, border-color 0.14s; }
.rc-tmrow::before { content: none; }
.rc-tmrow:hover { background: var(--surface-2); }
.rc-tmrow__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.rc-tmrow__id { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.rc-tmrow__id h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ac); }
.rc-tmrow__facts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rc-tmrow__facts > span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.rc-tmrow__facts > span svg { color: var(--faint); }
.rc-tmrow__missing { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-top: 11px; border-top: 1px solid var(--border-soft); }
.rc-tmrow__ml { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.rc-miss { font-size: 12px; padding: 3px 10px; border-radius: 99px; color: oklch(0.82 0.10 35); background: color-mix(in oklch, oklch(0.68 0.16 30) 13%, transparent); border: 1px solid color-mix(in oklch, oklch(0.68 0.16 30) 26%, transparent); }
.rc-tmrow__ready { display: flex; align-items: center; gap: 7px; padding-top: 11px; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: oklch(0.80 0.10 150); }
.rc-tmrow__ready svg { color: oklch(0.72 0.13 150); }

/* pantry — redesigned dashboard layout */
.pn-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 860px) { .pn-grid { grid-template-columns: 1fr; } }

/* rail */
.pn-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 8px; }
.pn-rail__head { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pn-search { display: flex; align-items: center; gap: 8px; padding: 0 11px; height: 38px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--faint); }
.pn-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-family: var(--ui); font-size: 13px; outline: none; }
.pn-search input::placeholder { color: var(--faint); }
.pn-search__x { border: 0; background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; padding: 2px; }
.pn-search__x:hover { color: var(--text); }
.pn-railsec { display: flex; flex-direction: column; gap: 5px; }
.pn-railsec__h { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: 0; cursor: pointer; padding: 4px 2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.pn-railsec__h:hover { color: var(--muted); }
.pn-cats { display: flex; flex-direction: column; gap: 1px; }
.pn-cat { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 7px 9px; cursor: pointer; color: var(--muted); transition: background 0.13s, color 0.13s; }
.pn-cat:hover { background: var(--surface-2); color: var(--text); }
.pn-cat.is-on { background: var(--accent-soft); color: var(--text); }
.pn-cat.is-on .pn-cat__lbl { color: var(--text); font-weight: 500; }
.pn-cat__ico { flex: none; display: grid; place-items: center; color: var(--accent); }
.pn-cat__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin: 0 2.5px; }
.pn-cat__lbl { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-cat__n { flex: none; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.pn-cat.is-on .pn-cat__n { color: var(--accent); }
.pn-filters { display: flex; flex-direction: column; gap: 1px; }
.pn-filters__lbl { font-size: 11px; color: var(--faint); padding: 4px 9px 2px; }
.pn-fil { display: flex; align-items: center; gap: 9px; width: 100%; background: transparent; border: 0; border-radius: 8px; padding: 7px 9px; cursor: pointer; color: var(--muted); transition: background 0.13s, color 0.13s; }
.pn-fil:hover { background: var(--surface-2); color: var(--text); }
.pn-fil__box { flex: none; width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border); display: grid; place-items: center; color: #fff; transition: background 0.13s, border-color 0.13s; }
.pn-fil.is-on .pn-fil__box { background: var(--sc, var(--accent)); border-color: var(--sc, var(--accent)); }
.pn-fil__lbl { flex: 1; min-width: 0; text-align: left; font-size: 13px; }
.pn-fil__n { flex: none; font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* main */
.pn-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pn-mainhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pn-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); display: flex; align-items: baseline; gap: 9px; }
.pn-title__n { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--faint); }
.pn-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pn-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.pn-seg button { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-size: 12.5px; color: var(--muted); background: transparent; border: 0; padding: 5px 11px; border-radius: 6px; cursor: pointer; transition: all 0.13s; }
.pn-seg button:hover { color: var(--text); }
.pn-seg button.is-on { color: var(--text); background: var(--surface-3); }
.pn-sort { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 0 9px 0 12px; height: 36px; }
.pn-sort select { border: 0; background: transparent; color: var(--text); font-family: var(--ui); font-size: 12.5px; font-weight: 500; cursor: pointer; outline: none; padding: 8px 4px; }
.pn-addbtn { height: 36px; }

.pn-addform { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 13px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.pn-addform__name { flex: 2; min-width: 150px; }
.pn-addform__qty { flex: 1; min-width: 110px; }
.pn-addform__type { flex: 0 0 150px; }
.pn-addform__costwrap { display: inline-flex; align-items: center; gap: 3px; }
.pn-addform__cur { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.pn-addform__cost { width: 84px !important; }

/* stat cards */
.pn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) { .pn-stats { grid-template-columns: repeat(2, 1fr); } }
.pn-stat { position: relative; padding: 16px 17px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.pn-stat__l { font-size: 12.5px; color: var(--muted); margin-bottom: 9px; }
.pn-stat__v { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.pn-stat__v--warn { color: oklch(0.78 0.13 75); }
.pn-stat__v--bad { color: oklch(0.70 0.15 28); }
.pn-stat__ic { position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; }
.pn-stat__ic--total { color: oklch(0.74 0.12 150); background: color-mix(in oklch, oklch(0.74 0.12 150) 15%, transparent); }
.pn-stat__ic--value { color: oklch(0.76 0.1 95); background: color-mix(in oklch, oklch(0.76 0.1 95) 15%, transparent); }
.pn-stat__ic--low { color: oklch(0.78 0.13 75); background: color-mix(in oklch, oklch(0.78 0.13 75) 15%, transparent); }
.pn-stat__ic--out { color: oklch(0.70 0.15 28); background: color-mix(in oklch, oklch(0.70 0.15 28) 15%, transparent); }

/* groups + cards */
.pn-groups { display: flex; flex-direction: column; gap: 24px; }
.pn-group { display: flex; flex-direction: column; gap: 13px; }
.pn-group__h { display: flex; align-items: center; gap: 9px; }
.pn-group__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.pn-group__lbl { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pn-group__n { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.pn-group__val { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pn-group__col { border: 0; background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; padding: 3px; border-radius: 6px; }
.pn-group__col:hover { color: var(--text); background: var(--surface-2); }
.pn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.pn-rows { display: flex; flex-direction: column; gap: 8px; }

.pn-card { position: relative; display: flex; gap: 13px; padding: 15px 16px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--border-soft); transition: border-color 0.13s, background 0.13s; }
.pn-card:hover { border-color: var(--border); background: var(--surface-3); }
.pn-card__ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; line-height: 1; background: color-mix(in oklch, var(--tc) 14%, var(--surface)); border: 1px solid color-mix(in oklch, var(--tc) 22%, transparent); }
.pn-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pn-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pn-card__name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-card__menu { flex: none; border: 0; background: transparent; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 0.6; letter-spacing: 1px; padding: 2px 4px; border-radius: 6px; height: 22px; }
.pn-card__menu:hover { color: var(--text); background: var(--surface-2); }
.pn-card__qty { font-size: 12.5px; color: var(--muted); }
.pn-card__qty--none { color: var(--faint); font-style: italic; }
.pn-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.pn-card__status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sc, var(--muted)); }
.pn-card__sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc, var(--muted)); }
.pn-card__cost { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text); }
.pn-card--row { align-items: center; }
.pn-card--row .pn-card__ico { width: 36px; height: 36px; font-size: 18px; }
.pn-card--row .pn-card__body { flex-direction: row; align-items: center; gap: 14px; }
.pn-card--row .pn-card__top { flex: 1; min-width: 0; }
.pn-card--row .pn-card__qty { flex: 0 0 130px; }
.pn-card--row .pn-card__foot { margin-top: 0; flex: 0 0 200px; }

/* per-item menu popover */
.pn-pop__veil { position: fixed; inset: 0; z-index: 30; }
.pn-pop { position: absolute; top: 44px; right: 12px; z-index: 31; width: 244px; display: flex; flex-direction: column; gap: 11px; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(0,0,0,0.45); }
.pn-pop__row { display: flex; flex-direction: column; gap: 5px; }
.pn-pop__lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.pn-pop__in { width: 100% !important; }
.pn-statseg { display: flex; gap: 4px; }
.pn-statseg button { flex: 1; font-family: var(--ui); font-size: 10.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 7px; padding: 6px 4px; cursor: pointer; transition: all 0.13s; }
.pn-statseg button:hover { color: var(--text); }
.pn-statseg button.is-on { color: #fff; background: var(--sc); border-color: var(--sc); }
.pn-pop__del { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 2px; font-family: var(--ui); font-size: 12.5px; color: oklch(0.74 0.13 28); background: transparent; border: 1px solid color-mix(in oklch, oklch(0.74 0.13 28) 30%, transparent); border-radius: 8px; padding: 8px; cursor: pointer; transition: background 0.13s; }
.pn-pop__del:hover { background: color-mix(in oklch, oklch(0.74 0.13 28) 14%, transparent); }

/* shopping */
.rc-shopactions { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-shopclear:hover { color: oklch(0.78 0.13 35); }
.rc-shopclear:hover svg { color: oklch(0.78 0.13 35); }

/* add-to-shopping picker */
.rc-addshop { width: min(540px, 92vw); }
.rc-addshop__seg { display: flex; width: 100%; margin-bottom: 18px; }
.rc-addshop__seg button { flex: 1; }
.rc-search { position: relative; display: flex; align-items: center; margin-bottom: 8px; }
.rc-search > svg { position: absolute; left: 13px; color: var(--faint); pointer-events: none; }
.rc-search .cp-input { width: 100%; box-sizing: border-box; padding-left: 38px; padding-right: 34px; }
.rc-search__x { position: absolute; right: 9px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 4px; border-radius: 6px; transition: color 0.12s, background 0.12s; }
.rc-search__x:hover { color: var(--text); background: var(--surface-3); }
.rc-pickbox {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 46vh; overflow-y: auto; margin: 4px 0 2px;
  padding: 4px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface-2);
}
.rc-pickbox--tall { max-height: 54vh; }
.rc-pickempty { padding: 22px; text-align: center; color: var(--faint); font-size: 13.5px; }
.rc-pickitem { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 9px; cursor: pointer; transition: background 0.12s; }
.rc-pickitem:hover { background: var(--surface-3); }
.rc-pickitem.is-on { background: var(--accent-soft); }
.rc-pickitem input { position: absolute; opacity: 0; pointer-events: none; }
.rc-pickitem__box { flex: none; width: 21px; height: 21px; border-radius: 6px; border: 1.5px solid var(--border); display: grid; place-items: center; color: transparent; transition: all 0.14s; }
.rc-pickitem.is-on .rc-pickitem__box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rc-pickitem__name { flex: 1; font-size: 14.5px; color: var(--text); display: flex; align-items: baseline; gap: 9px; }
.rc-pickitem__name em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.rc-pickitem__tag { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 3px 8px; border-radius: 99px; background: var(--surface-3); }
.rc-manualadd { padding: 6px 0 2px; }
.rc-addshop__manualbtn { margin-top: 6px; }
.rc-addshop__foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.rc-addshop__count { flex: 1; font-size: 12.5px; color: var(--accent); font-family: var(--mono); }
.rc-shoplist { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.rc-shopgroup { display: flex; flex-direction: column; gap: 2px; }
.rc-shopgroup__h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.rc-shopgroup__h span { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px; background: var(--surface-3); font-size: 9.5px; color: var(--muted); }
.rc-shopgroup--done .rc-shopgroup__h { color: var(--faint); }
.rc-shopitem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background 0.12s; }
.rc-shopitem:hover { background: var(--surface-2); }
.rc-shopitem input { position: absolute; opacity: 0; pointer-events: none; }
.rc-shopitem__box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--border); display: grid; place-items: center; color: transparent; transition: all 0.14s; }
.rc-shopitem.is-done .rc-shopitem__box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rc-shopitem__name { flex: 1; font-size: 14px; color: var(--text); display: flex; align-items: baseline; gap: 9px; }
.rc-shopitem__name em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.rc-shopitem.is-done .rc-shopitem__name { color: var(--faint); text-decoration: line-through; }
.rc-shopitem__x { flex: none; border: 0; background: transparent; color: var(--surface-3); cursor: pointer; display: grid; place-items: center; padding: 4px; border-radius: 6px; opacity: 0; transition: all 0.14s; }
.rc-shopitem:hover .rc-shopitem__x { opacity: 1; }
.rc-shopitem__x:hover { color: oklch(0.78 0.13 35); background: var(--surface-3); }

/* shopping — two-column redesign */
.rc-shopgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.rc-shopmain { padding: 22px 22px 26px; }
.rc-shophead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.rc-shophead h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.rc-shopgrid .rc-shoplist { display: flex; flex-direction: column; gap: 22px; max-width: none; }
.rc-shopgrid .rc-shopgroup { display: flex; flex-direction: column; gap: 10px; }
.rc-shopgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.rc-shopgrid2 .rc-shopitem { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface-2); cursor: default; transition: border-color 0.14s, background 0.14s; }
.rc-shopgrid2 .rc-shopitem:hover { border-color: var(--border); background: var(--surface-3); }
.rc-shopitem__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 13px; padding: 11px 12px; cursor: pointer; }
.rc-shopitem__main input { position: absolute; opacity: 0; pointer-events: none; }
.rc-shopitem__qty { flex: none; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.rc-shopitem.is-done .rc-shopitem__qty { color: var(--faint); }
.rc-shopitem__menu { position: relative; flex: none; }
.rc-shopitem__kebab { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--surface-3); cursor: pointer; display: grid; place-items: center; transition: color 0.12s, background 0.12s; }
.rc-shopitem:hover .rc-shopitem__kebab { color: var(--muted); }
.rc-shopitem__kebab:hover { color: var(--text); background: var(--surface); }
.rc-kebab { position: absolute; top: 34px; right: 0; z-index: 20; min-width: 178px; padding: 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 18px 40px -18px oklch(0 0 0 / 0.8); display: flex; flex-direction: column; gap: 2px; }
.rc-kebab button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-family: var(--ui); font-size: 13.5px; cursor: pointer; transition: background 0.12s; }
.rc-kebab button:hover { background: var(--surface-3); }
.rc-kebab__del { color: oklch(0.78 0.13 35) !important; }

.rc-shopempty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 46px 24px; }
.rc-shopempty__ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--muted); margin-bottom: 6px; }
.rc-shopempty p { margin: 0; font-size: 16px; color: var(--text); font-weight: 600; }
.rc-shopempty span { font-size: 13.5px; color: var(--muted); max-width: 330px; }

/* sidebar */
.rc-shopside { padding: 20px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; }
.rc-side__hero { position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden; }
.rc-side__cart { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
.rc-side__herotxt h3 { margin: 0 0 2px; font-size: 17px; font-weight: 600; color: var(--text); }
.rc-side__herotxt span { font-size: 12.5px; color: var(--muted); }
.rc-side__bag { position: absolute; right: -4px; top: -8px; width: 90px; height: 80px; stroke: var(--border); stroke-width: 1.6; opacity: 0.5; pointer-events: none; }

.rc-statstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.rc-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 4px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.rc-stat:hover { background: var(--surface-3); }
.rc-stat.is-on { background: var(--accent-soft); border-color: var(--accent-line); }
.rc-stat__ic { color: var(--faint); }
.rc-stat.is-on .rc-stat__ic { color: var(--accent); }
.rc-stat b { font-family: var(--mono); font-size: 20px; font-weight: 600; color: oklch(0.82 0.12 90); }
.rc-stat.is-on b { color: var(--accent); }
.rc-stat__l { font-size: 11px; color: var(--muted); }

.rc-side__sec { display: flex; flex-direction: column; gap: 12px; }
.rc-side__sechead { display: flex; align-items: center; justify-content: space-between; }
.rc-side__sechead h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.rc-side__viewall { border: 0; background: transparent; color: var(--accent); font-family: var(--ui); font-size: 12.5px; cursor: pointer; padding: 0; }
.rc-side__viewall:hover { text-decoration: underline; }
.rc-side__recipes { display: flex; flex-direction: column; gap: 4px; }
.rc-side__recipe { display: flex; align-items: center; gap: 12px; padding: 9px; border-radius: 11px; border: 0; background: transparent; cursor: pointer; text-align: left; transition: background 0.12s; }
.rc-side__recipe:hover { background: var(--surface-2); }
.rc-side__thumb { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; font-weight: 700; color: var(--ac); background: color-mix(in oklch, var(--ac) 16%, transparent); border: 1px solid color-mix(in oklch, var(--ac) 35%, transparent); }
.rc-side__rmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-side__rmeta b { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-side__rmeta span { font-size: 12px; color: var(--muted); }

.rc-suggest { padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.rc-suggest__head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.rc-suggest__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
.rc-suggest__head h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.rc-suggest__lead { margin: 0 0 5px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.rc-suggest__body { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.rc-suggest__btn { margin-top: 12px; }

@media (max-width: 1000px) {
  .rc-shopgrid { grid-template-columns: 1fr; }
  .rc-shopside { position: static; }
}
@media (max-width: 620px) {
  .rc-shopgrid2 { grid-template-columns: 1fr; }
}

/* recipe profile */
.rc-profile { max-width: 1100px; }
.rc-profile__hero { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.rc-profile__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rc-profile__titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.rc-profile__cuisine { display: inline-flex; align-items: center; gap: 8px; flex: none; font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ac); }
.rc-profile__titlerow .rc-profile__cuisine { font-size: 22px; font-weight: 600; letter-spacing: 0.02em; align-self: center; }
.rc-profile__id h2 { margin: 2px 0 4px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; color: var(--ac); }

/* recipe stat bar — overview between title and actions */
.rc-statbar { --ac: var(--accent); margin-bottom: 18px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface); overflow: hidden; }
.rc-statbar__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.rc-stat { display: grid; grid-template-rows: auto 1fr auto; gap: 9px; padding: 18px 20px; min-width: 0; position: relative; }
.rc-stat + .rc-stat::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--border-soft); }
.rc-stat__top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.rc-stat__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); color: var(--ac); flex: none; }
.rc-stat__v { font-size: 23px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); line-height: 1; }
.rc-stat__v--sm { font-size: 17px; line-height: 1.15; }
.rc-stat__sub { font-size: 12.5px; color: var(--faint); }
.rc-stat__v--pips { display: inline-flex; gap: 5px; padding: 3px 0; }
.rc-stat__v--pips i { width: 16px; height: 9px; border-radius: 3px; background: var(--surface-3); }
.rc-stat__v--pips i.is-on { background: var(--cc, var(--ac)); }
.rc-stat__v--stars { display: inline-flex; padding: 2px 0; }
.rc-stat__v--stars .pd-star.is-on svg { fill: var(--ac); }
.rc-stat__v--stars .pd-stars { gap: 3px; }
.rc-statbar__foot { display: flex; align-items: center; gap: 9px; padding: 13px 20px; border-top: 1px solid var(--border-soft); font-size: 13.5px; color: var(--muted); }
.rc-statbar__link, .rc-statbar__link:link, .rc-statbar__link:visited, .rc-statbar__link:hover, .rc-statbar__link:active { color: var(--ac); }
.rc-statbar__link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.rc-statbar__link:hover { text-decoration: underline; }
.rc-statbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac); flex: none; }
@media (max-width: 720px) {
  .rc-statbar__grid { grid-template-columns: repeat(2, 1fr); }
  .rc-stat::before { display: none; }
  .rc-stat:nth-child(odd) { border-right: 1px solid var(--border-soft); }
  .rc-stat:not(:nth-child(-n+2)) { border-top: 1px solid var(--border-soft); }
}
.rc-actbar { display: flex; gap: 8px; padding: 13px 0; margin-bottom: 16px; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.rc-actbar .cp-btn { flex: 1; justify-content: center; }
.rc-actbar .cp-btn.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.rc-profile__body { display: flex; gap: 0; align-items: stretch; }
.rc-ingsec { flex: none; width: var(--ing-w, 44%); min-width: 0; padding-right: 12px; }
.rc-methodsec { flex: 1 1 0; min-width: 0; padding-left: 12px; }
.rc-split { flex: none; align-self: stretch; width: 11px; margin: 0 -5px; cursor: col-resize; display: flex; align-items: center; justify-content: center; touch-action: none; }
.rc-split span { width: 2px; align-self: stretch; margin: 4px 0; border-radius: 2px; background: var(--line, currentColor); opacity: 0.18; transition: opacity 0.12s, background 0.12s; }
.rc-split:hover span, .rc-split:active span { opacity: 1; background: var(--ac); }
.rc-sec__h { margin: 0 0 11px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-sec__h-l { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.rc-ingsort { flex: none; display: inline-flex; gap: 0; padding: 2px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.rc-ingsort button { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; padding: 4px 9px; border-radius: 6px; cursor: pointer; transition: all 0.14s; }
.rc-ingsort button:hover { color: var(--text); }
.rc-ingsort button.is-on { color: var(--accent-ink); background: var(--ac, var(--accent)); }
.rc-ingsec__ready { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.02em; text-transform: none; color: var(--muted); }
.rc-inglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.rc-ing { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border-soft); }
.rc-ing:last-child { border-bottom: 0; }
.rc-ing__check { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: color-mix(in oklch, oklch(0.68 0.16 30) 12%, var(--surface-2)); color: oklch(0.74 0.14 35); }
.rc-ing.is-have .rc-ing__check { background: color-mix(in oklch, oklch(0.70 0.13 150) 14%, var(--surface-2)); color: oklch(0.74 0.13 150); }
.rc-ing__name { flex: 1; font-size: 13.5px; color: var(--text); }
.rc-ing__step { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 600; }
.rc-ing__type { flex: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tc, var(--muted)); }
.rc-ing__type::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tc, var(--muted)); }
.rc-inggroups { display: flex; flex-direction: column; gap: 12px; }
.rc-inggroup__h { display: flex; align-items: center; gap: 7px; margin: 0 0 3px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rc-inggroup__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rc-inggroup__n { margin-left: 2px; color: var(--faint); }
.rc-ing.is-have .rc-ing__name { color: var(--muted); }
.rc-ing__qty { font-family: var(--mono); font-size: 11px; color: var(--text); }
.rc-ing--empty { color: var(--faint); font-size: 13px; }
.rc-method { margin: 0; padding-left: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 11px; }
.rc-method li { counter-increment: step; position: relative; padding-left: 36px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.rc-method li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.rc-notebox { display: flex; gap: 9px; margin-top: 16px; padding: 12px 13px; border-radius: 11px; background: color-mix(in oklch, var(--accent) 8%, var(--surface-2)); border: 1px solid var(--border-soft); }
.rc-notebox svg { flex: none; color: var(--accent); margin-top: 2px; }
.rc-notebox p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); white-space: pre-wrap; }
.rc-empty-note { margin: 0; font-size: 13px; color: var(--faint); }

/* recipe edit */
.rc-edit { max-width: 600px; }
.rc-ingedit { display: flex; flex-direction: column; gap: 7px; }
.rc-ingedit__head { display: flex; gap: 8px; padding: 0 2px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.rc-ingedit__h-name { flex: 1; }
.rc-ingedit__h-qty { flex: 0 0 84px; }
.rc-ingedit__h-type { flex: 0 0 116px; }
.rc-ingedit__h-step { flex: 0 0 58px; }
.rc-ingedit__h-x { flex: 0 0 38px; }
.rc-ingedit__row { display: flex; gap: 8px; }
.rc-ingedit__name { flex: 1; min-width: 0; }
.rc-ingedit__qty { flex: 0 0 84px !important; }
.rc-ingedit__type { flex: 0 0 116px !important; padding-left: 9px !important; padding-right: 22px !important; }
.rc-ingedit__step { flex: 0 0 58px !important; text-align: center; }
.rc-ingedit__x { flex: none; width: 38px; border: 1px solid var(--border-soft); background: var(--surface-2); border-radius: 9px; color: var(--faint); cursor: pointer; display: grid; place-items: center; transition: all 0.14s; }
.rc-ingedit__x:hover { color: oklch(0.78 0.13 35); border-color: color-mix(in oklch, oklch(0.68 0.16 30) 40%, transparent); }
.rc-ingedit__add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; padding: 7px 13px; border-radius: 9px; font-family: var(--ui); font-size: 12.5px; color: var(--accent); background: transparent; border: 1px dashed var(--accent-line); cursor: pointer; transition: background 0.14s; }
.rc-ingedit__add:hover { background: color-mix(in oklch, var(--accent) 10%, transparent); }
.rc-methodinput { min-height: 120px; }
.rc-wanttoggle { display: inline-flex; align-items: center; gap: 8px; width: 100%; padding: 10px 13px; border-radius: 9px; font-family: var(--ui); font-size: 13px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); cursor: pointer; transition: all 0.14s; }
.rc-wanttoggle.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* planner picker */
.rc-planner { max-width: 420px; }
.rc-slotpick { display: flex; gap: 7px; }
.rc-slot { flex: 1; padding: 9px; border-radius: 9px; font-family: var(--ui); font-size: 13px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); cursor: pointer; transition: all 0.14s; }
.rc-slot.is-on { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 50%, transparent); background: color-mix(in oklch, var(--accent) 12%, var(--surface-2)); }
.rc-planner__done { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 24px 12px 12px; color: oklch(0.74 0.13 150); }
.rc-planner__done p { margin: 0; font-size: 14px; color: var(--text); }

@media (max-width: 760px) {
  .rc-profile__body { flex-direction: column; gap: 18px; }
  .rc-ingsec { flex-basis: auto; width: 100% !important; padding-right: 0; }
  .rc-methodsec { padding-left: 0; }
  .rc-split { display: none; }
}

/* ============================================================
   Cook mode — full-screen, step-by-step recipe follower
   ============================================================ */
.cook {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0.10 0.006 165 / 0.975);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
  animation: cook-in 0.3s ease;
}
@keyframes cook-in { from { opacity: 0; } to { opacity: 1; } }

.cook__hud {
  position: relative; z-index: 10; flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px;
}
.cook__timer {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--muted); padding: 8px 15px; border-radius: 99px;
  border: 1px solid var(--border); background: oklch(0.16 0.006 165 / 0.8);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cook__timer.is-run { color: var(--accent); border-color: var(--accent-line); }
.cook__timer em { font-style: normal; font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.cook__timer.is-run em { color: var(--accent); }
.cook__prog { margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.cook__prog-lbl { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cook__pips { display: flex; gap: 5px; }
.cook__pip { width: 22px; height: 4px; border-radius: 99px; background: var(--surface-3); transition: background 0.3s ease, box-shadow 0.3s ease; }
.cook__pip.is-on { background: var(--accent); }
.cook__pip.is-cur { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cook__close {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  transition: color 0.14s, background 0.14s;
}
.cook__close:hover { color: var(--text); background: var(--surface-2); }

.cook__stage { position: relative; flex: 1; overflow: hidden; min-height: 0; }
.cook__col {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 36px;
  padding: 0 24px;
  transition: transform 0.55s cubic-bezier(0.6, 0.04, 0.18, 1);
  will-change: transform;
}
.cook-card {
  width: 100%; max-width: 720px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 24px; padding: 42px 46px;
  box-shadow: 0 34px 64px -34px oklch(0 0 0 / 0.85);
  opacity: 0.3; transform: scale(0.96);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cook-card.is-active { opacity: 1; transform: scale(1); border-color: var(--border); }

/* start card */
.cook-start__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.cook-start__headmain { min-width: 0; }
.cook-kicker { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.cook-start__title { margin: 13px 0 18px; font-size: 40px; line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; color: var(--text); text-wrap: balance; }
.cook-start__meta { display: flex; flex-wrap: wrap; gap: 20px; color: var(--muted); font-size: 14.5px; }
.cook-start__meta span { display: inline-flex; align-items: center; gap: 7px; }
.cook-start__meta svg { color: var(--faint); }

/* ingredients-gathered ring */
.cook-ring { position: relative; flex: none; width: 92px; height: 92px; }
.cook-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cook-ring__track { fill: none; stroke: var(--surface-3); stroke-width: 5; }
.cook-ring__fill { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }
.cook-ring__lbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.cook-ring__lbl b { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.cook-ring__lbl span { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); line-height: 1; }
.cook-ing { margin: 28px 0 0; }
.cook-ing__h { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.cook-ing ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.cook-ing__item { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 11px; cursor: pointer; transition: background 0.14s ease; }
.cook-ing__item:hover { background: var(--surface-2); }
.cook-ing__box { flex: none; width: 25px; height: 25px; border-radius: 8px; border: 1.5px solid var(--border); display: grid; place-items: center; color: transparent; transition: background 0.14s, border-color 0.14s, color 0.14s; }
.cook-ing__item.is-checked .cook-ing__box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cook-ing__name { flex: 1; font-size: 17px; color: var(--text); }
.cook-ing__item.is-checked .cook-ing__name { color: var(--faint); text-decoration: line-through; }
.cook-ing__qty { font-family: var(--mono); font-size: 14px; color: var(--muted); white-space: nowrap; }

.cook-bigbtn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 19px; font-family: var(--ui); font-size: 18px; font-weight: 600; border-radius: 15px; border: none; cursor: pointer; background: var(--accent); color: var(--accent-ink); transition: background 0.14s ease; }
.cook-bigbtn:hover { background: var(--accent-dim); }
.cook-card--start .cook-bigbtn { margin-top: 30px; }
.cook-bigbtn--done { margin-top: 32px; }
.cook-start__go { display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; color: var(--accent); font-size: 14.5px; font-family: var(--mono); padding: 10px; }

/* step card */
.cook-step__no { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.cook-step__no b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); font-weight: 600; }
.cook-step__no span { color: var(--faint); }
.cook-step__txt { margin: 0; font-size: 30px; line-height: 1.42; font-weight: 500; color: var(--text); text-wrap: pretty; }
.cook-step__ings { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-soft); }
.cook-step__ings ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.cook-step__ings li { display: inline-flex; align-items: baseline; gap: 8px; }
.cook-step__ing-name { font-size: 16px; color: var(--text); }
.cook-step__ing-qty { font-family: var(--mono); font-size: 13px; color: var(--accent); }

/* done card */
.cook-card--done { text-align: center; }
.cook-done__ic { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.cook-done__h { margin: 0 0 6px; font-size: 30px; font-weight: 700; color: var(--text); }
.cook-done__p { margin: 0 0 24px; color: var(--muted); font-size: 16px; }
.cook-done__p strong { color: var(--text); }
.cook-done__time { display: inline-flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 42px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.cook-done__sub { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 7px; }
.cook-done__btns { margin-top: 32px; display: flex; flex-direction: column; gap: 11px; }
.cook-ghostbtn { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 14px; border-radius: 13px; font-size: 15px; font-family: var(--ui); cursor: pointer; transition: color 0.14s, background 0.14s; }
.cook-ghostbtn:hover { color: var(--text); background: var(--surface-2); }

/* tap zones — purely visual hints; the stage handles the actual taps so the
   gradient never blocks the Start / Completed buttons under it */
.cook__zone {
  position: fixed; left: 0; right: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: none; background: transparent;
  color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase;
}
.cook__zone--top { top: 74px; height: 14vh; justify-content: flex-start; padding-top: 4px; }
.cook__zone--bottom { bottom: 0; height: 22vh; justify-content: flex-end; padding-bottom: 22px; background: linear-gradient(to top, oklch(0.10 0.006 165 / 0.85), transparent); }
.cook__stage:hover ~ .cook__zone--bottom:not(.is-off) .ch { transform: translateY(4px); }
.cook__zone .ch { display: grid; place-items: center; transition: transform 0.2s ease; }
.cook__zone.is-off { color: var(--faint); }
.cook__zone.is-off .ch { display: none; }

@media (max-width: 600px) {
  .cook-card { padding: 32px 26px; border-radius: 20px; }
  .cook-start__title { font-size: 31px; }
  .cook-step__txt { font-size: 24px; }
  .cook__prog-lbl { display: none; }
  .cook__timer { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cook__col { transition: none; }
  .cook-card { transition: opacity 0.2s ease; transform: none; }
  .cook-card.is-active { transform: none; }
}

/* Shared viewing room */
.media-share { max-width: 1180px; }
.media-share [hidden] { display: none !important; }
.media-share .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.media-share h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.media-share .cp-btn:disabled { opacity: 0.45; cursor: default; }
.media-share .cp-btn svg { flex: none; }

/* header */
.ms-live {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--border-soft);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap;
}
.ms-live i { width: 7px; height: 7px; border-radius: 99px; background: var(--faint); }
.ms-live.is-on { color: var(--text); }
.ms-live.is-on i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: ms-pulse 2.4s ease-in-out infinite; }
@keyframes ms-pulse { 50% { box-shadow: 0 0 0 6px transparent; } }

/* cards */
.ms-stage { margin-bottom: 16px; scroll-margin-top: 84px; }
.ms-panel { padding: 20px; margin-bottom: 16px; }

/* player */
.ms-screen { position: relative; background: #000; display: grid; place-items: center; overflow: hidden; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.ms-stage.is-fs .ms-screen { border-radius: 0; }
.ms-screen video { width: 100%; max-height: 68vh; display: block; cursor: pointer; }
.ms-join { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 12px 20px; font-size: 14px; box-shadow: 0 10px 30px -8px #000; }
.ms-badge {
  position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-radius: 99px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; backdrop-filter: blur(6px);
}
.ms-spin { width: 12px; height: 12px; border-radius: 99px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: ms-spin .8s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }
.ms-subtitles {
  position: absolute; left: 50%; width: max-content; max-width: 90%; transform: translateX(-50%); z-index: 2;
  text-align: center; pointer-events: none; color: #fff; line-height: 1.4; white-space: pre-line; text-shadow: 0 1px 3px #000;
  font-size: calc(clamp(18px, 2.2vw, 32px) * var(--sub-scale, 1));
}
.ms-subtitles span { background: rgba(0,0,0,.78); padding: 2px 7px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ms-subtitles--bottom { bottom: 6%; }
.ms-subtitles--top { top: 6%; }
.ms-subtitles--center { top: 50%; transform: translate(-50%, -50%); }
.ms-subtitles--custom { transform: translate(calc(-50% + var(--nudge-x, 0px)), calc(-50% + var(--nudge-y, 0px))); }
.ms-subtitles.is-lowbg { text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 4px #000; }
.ms-subtitles.is-preview span { opacity: .9; }
.ms-subtitles.is-movable { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
.ms-subtitles.is-movable:active { cursor: grabbing; }
.ms-subtitles.is-movable span { outline: 1.5px dashed rgba(255,255,255,.7); outline-offset: 4px; }

/* fullscreen: floating translucent bar that hides when the mouse is idle */
.ms-stage.is-fs { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #000; }
.ms-stage.is-fs .ms-screen { flex: 1; height: 100%; }
.ms-stage.is-fs .ms-screen video { height: 100vh; max-height: none; object-fit: contain; }
.ms-stage.is-fs .ms-subtitles { font-size: calc(clamp(24px, 3vw, 48px) * var(--sub-scale, 1)); transition: bottom .3s ease; }
.ms-stage.is-fs:not(.is-idle) .ms-subtitles--bottom { bottom: calc(6% + 96px); }
.ms-stage.is-fs .ms-bar {
  position: absolute; left: 50%; bottom: 24px; z-index: 4; width: min(1100px, calc(100% - 48px)); transform: translateX(-50%);
  padding: 12px 18px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  background: rgba(12,14,13,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px -12px rgba(0,0,0,.6); transition: opacity .3s ease, transform .3s ease;
  --track: linear-gradient(to right, var(--accent) var(--pct, 0%), rgba(255,255,255,.25) var(--pct, 0%));
}
.ms-stage.is-fs .ms-bar input[type=range]::-webkit-slider-thumb { background: #fff; }
.ms-stage.is-fs .ms-bar input[type=range]::-moz-range-thumb { background: #fff; }
.ms-stage.is-fs .ms-icon:not(.ms-icon--play), .ms-stage.is-fs .ms-volume { color: rgba(255,255,255,.82); }
.ms-stage.is-fs .ms-icon:not(.ms-icon--play):hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.12); }
.ms-stage.is-fs .ms-time { color: #fff; }
.ms-stage.is-fs .ms-quality__btn { color: #fff; border-color: rgba(255,255,255,.18); }
.ms-stage.is-fs .ms-quality__btn svg { color: rgba(255,255,255,.7); }
.ms-stage.is-fs .ms-quality__btn:hover:not(:disabled), .ms-stage.is-fs .ms-quality__btn[aria-expanded=true] { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.ms-stage.is-fs .ms-pop { background: rgba(12,14,13,.82); border-color: rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; }
.ms-stage.is-fs .ms-quality__menu button { color: #fff; }
.ms-stage.is-fs .ms-settings__menu small, .ms-stage.is-fs .ms-settings__empty { color: rgba(255,255,255,.55); }
.ms-stage.is-fs .ms-pop__head em.is-all { background: rgba(255,255,255,.14); color: #fff; }
.ms-stage.is-fs .ms-settings > .ms-icon[aria-expanded=true] { background: rgba(255,255,255,.14); color: #fff; }
.ms-stage.is-fs .ms-quality__menu button:hover { background: rgba(255,255,255,.1); }
.ms-stage.is-fs .ms-quality__menu button.is-on { background: rgba(255,255,255,.14); }
.ms-stage.is-fs .ms-pop__head, .ms-stage.is-fs .ms-substyle__label, .ms-stage.is-fs .ms-seg button, .ms-stage.is-fs .ms-fonts button { color: rgba(255,255,255,.65); }
.ms-stage.is-fs .ms-pop__head em { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.ms-stage.is-fs .ms-substyle__label b, .ms-stage.is-fs .ms-substyle__foot { color: rgba(255,255,255,.5); }
.ms-stage.is-fs .ms-seg { background: rgba(255,255,255,.08); }
.ms-stage.is-fs .ms-seg button.is-on { background: rgba(255,255,255,.18); color: #fff; }
.ms-stage.is-fs .ms-fonts button { border-color: rgba(255,255,255,.14); }
.ms-stage.is-fs .ms-fonts button b { color: #fff; }
.ms-stage.is-fs .ms-fonts button.is-on { border-color: var(--accent); background: rgba(255,255,255,.1); color: #fff; }
.ms-stage.is-fs .ms-swatch.is-on { box-shadow: 0 0 0 2px #111, 0 0 0 4px var(--accent); }
.ms-stage.is-fs .ms-substyle__foot { border-color: rgba(255,255,255,.12); }
.ms-stage.is-fs .ms-original { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }
.ms-stage.is-fs .ms-original small, .ms-stage.is-fs .ms-original svg { color: rgba(255,255,255,.6); }
.ms-stage.is-fs .ms-original.is-on { border-color: var(--accent); background: rgba(255,255,255,.14); }
.ms-stage.is-fs .ms-substyle > .ms-icon[aria-expanded=true] { background: rgba(255,255,255,.14); color: #fff; }
.ms-stage.is-fs .ms-time b { color: rgba(255,255,255,.55); }
.ms-stage.is-fs .ms-badge { top: 24px; left: 24px; }
.ms-badge--right, .ms-stage.is-fs .ms-badge--right { left: auto; right: 14px; }
.ms-stage.is-fs .ms-badge--right { right: 24px; }
.ms-stage.is-idle .ms-bar { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.ms-stage.is-idle, .ms-stage.is-idle video { cursor: none; }

/* control bar */
.ms-bar { position: relative; padding: 10px 16px 12px; border-top: 1px solid var(--border-soft); }
.ms-bar__row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.media-share input[type=range] {
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; margin: 0; height: 18px;
  --track: linear-gradient(to right, var(--accent) var(--pct, 0%), var(--surface-3) var(--pct, 0%));
}
.media-share input[type=range]:disabled { cursor: default; opacity: .5; }
.media-share input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: var(--track); }
.media-share input[type=range]::-moz-range-track { height: 4px; border-radius: 99px; background: var(--track); }
.media-share input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 99px; background: var(--text); border: 0; transition: transform .12s; }
.media-share input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 99px; background: var(--text); border: 0; }
.media-share input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.2); }
.ms-seek { display: block; width: 100%; }
.ms-icon {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: transparent; border: 0; color: var(--muted); cursor: pointer; transition: background .14s, color .14s;
}
.ms-icon:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.ms-icon:disabled { opacity: .4; cursor: default; }
.ms-icon--play { width: 42px; height: 42px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); margin-right: 4px; }
.ms-icon--play:hover:not(:disabled) { background: var(--accent-dim); color: var(--accent-ink); }
.ms-icon--danger:hover:not(:disabled) { color: var(--cal-office); background: color-mix(in oklch, var(--cal-office) 14%, transparent); }
.ms-time { font-family: var(--mono); font-size: 12.5px; color: var(--text); margin-left: 8px; white-space: nowrap; }
.ms-time b { color: var(--faint); font-weight: 400; }
.ms-volume { display: flex; align-items: center; gap: 8px; margin: 0 6px 0 4px; color: var(--muted); }
.ms-volume input { width: 96px; }
.ms-volume__value { min-width: 38px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); text-align: right; }
.ms-volume.is-boosted .ms-volume__value { color: var(--cal-ill); }
.media-share .ms-volume.is-boosted input[type=range] { --track: linear-gradient(to right, var(--accent) 50%, var(--cal-ill) 50%, var(--cal-ill) var(--pct), var(--surface-3) var(--pct)); }
.ms-stage.is-fs .ms-volume__value { color: rgba(255,255,255,.6); }
/* size the volume control by the bar's own width, which the sidebar and fullscreen change */
.ms-bar { container-type: inline-size; }
@container (max-width: 720px) { .ms-volume__value { display: none; } .ms-volume input { width: 80px; } }
@container (max-width: 600px) { .ms-volume input { width: 60px; } .ms-bar__row .ms-skip { display: none; } .ms-time b { display: none; } }
.ms-quality { position: relative; margin-left: 2px; }
.ms-quality__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--border-soft); background: transparent; color: var(--text); cursor: pointer;
  font-family: var(--mono); font-size: 12px; transition: background .14s, border-color .14s;
}
.ms-quality__btn svg { color: var(--muted); }
.ms-quality__btn:hover:not(:disabled), .ms-quality__btn[aria-expanded=true] { background: var(--surface-2); border-color: var(--border); }
.ms-quality__btn:disabled { opacity: .45; cursor: default; }
.ms-pop {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 6; padding: 6px;
  display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.55);
}
.ms-quality__menu { min-width: 170px; }
.ms-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 8px; font-size: 11px; color: var(--muted); font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ms-pop__head em { font-style: normal; text-transform: none; letter-spacing: 0; font-family: var(--ui); font-size: 10px; padding: 1px 6px; border-radius: 99px; background: var(--surface-2); color: var(--faint); white-space: nowrap; }
.ms-quality__menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font-family: var(--ui); font-size: 13px; text-align: left; cursor: pointer;
}
.ms-quality__menu button:hover { background: var(--surface-2); }
.ms-quality__menu button.is-on { background: var(--accent-soft); font-weight: 600; }
.ms-quality__menu button.is-on svg { color: var(--accent); }
.ms-settings { position: relative; }
.ms-settings > .ms-icon[aria-expanded=true] { background: var(--surface-2); color: var(--text); }
.ms-settings__menu { min-width: 250px; max-height: min(60vh, 440px); overflow-y: auto; }
.ms-settings__menu .ms-pop__head:not(:first-child) { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.ms-settings__menu button span { display: grid; gap: 1px; min-width: 0; }
.ms-settings__menu button small { font-size: 11px; font-weight: 400; color: var(--faint); }
.ms-settings__empty { padding: 6px 10px 8px; font-size: 13px; color: var(--faint); }
.ms-pop__head em.is-all { background: var(--accent-soft); color: var(--accent); }

/* subtitle style panel */
.ms-cc { position: relative; margin-left: auto; }
.ms-cc.is-on { color: var(--text); }
.ms-cc.is-on::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--accent); }
.ms-stage.is-fs .ms-cc.is-on { color: #fff; }
.ms-substyle > .ms-icon[aria-expanded=true] { background: var(--surface-2); color: var(--text); }
.ms-substyle__panel { right: 12px; bottom: calc(100% + 8px); width: 290px; max-height: min(70vh, 470px); overflow-y: auto; padding: 6px 12px 12px; gap: 12px; }
.ms-substyle__panel .ms-pop__head { padding: 6px 0 0; }
.ms-substyle__group { display: grid; gap: 8px; }
.ms-original {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; text-align: left; cursor: pointer;
  border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-2); color: var(--text); font-family: var(--ui);
  transition: border-color .14s, background .14s;
}
.ms-original svg { flex: none; color: var(--muted); }
.ms-original span { display: grid; gap: 1px; min-width: 0; }
.ms-original b { font-size: 13px; font-weight: 600; }
.ms-original small { font-size: 11px; color: var(--faint); }
.ms-original:hover { border-color: var(--border); }
.ms-original.is-on { border-color: var(--accent); background: var(--accent-soft); }
.ms-original.is-on svg { color: var(--accent); }
.ms-screen canvas.JASSUB { z-index: 2; }
.ms-substyle__label { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.ms-substyle__label b { font-family: var(--mono); font-weight: 400; color: var(--faint); }
.ms-substyle__hint { font-size: 11.5px; color: var(--accent); }
.ms-substyle input[type=range] { width: 100%; }
.ms-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.ms-seg button, .ms-fonts button {
  border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--ui); font-size: 12px; padding: 6px 0; transition: background .14s, color .14s;
}
.ms-seg button:hover, .ms-fonts button:hover { color: var(--text); }
.ms-seg button.is-on { background: var(--surface-3); color: var(--text); font-weight: 600; }
.ms-fonts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ms-fonts button { display: grid; gap: 2px; justify-items: center; padding: 6px 0 5px; border: 1px solid var(--border-soft); font-size: 10.5px; }
.ms-fonts button b { font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.1; }
.ms-fonts button.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.ms-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-swatch {
  position: relative; width: 26px; height: 26px; padding: 0; border-radius: 99px; cursor: pointer;
  background: var(--swatch); border: 1px solid rgba(128,128,128,.45); box-shadow: 0 0 0 2px transparent; transition: box-shadow .14s;
}
.ms-swatch.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.ms-swatch--custom { background: conic-gradient(#ff5f5f, #ffe14d, #6ee7ff, #b18cff, #ff5f5f); }
.ms-swatch--custom.is-on { background: var(--swatch); }
.ms-swatch--custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ms-substyle__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 11.5px; color: var(--faint); }

/* now showing + options */
.ms-now { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 0; }
.ms-now__title { min-width: 0; flex: 1 1 260px; }
.ms-now__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-now { align-items: center; }
.ms-ratings { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* title left, scores centred on the bar, buttons right; stacked on narrow screens */
.ms-now { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "title ratings actions"; align-items: center; gap: 16px; }
.ms-now__title { grid-area: title; }
.ms-now .ms-ratings { grid-area: ratings; justify-content: center; }
.ms-now__actions { grid-area: actions; justify-self: end; }
@media (max-width: 760px) {
  .ms-now { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "ratings" "actions"; gap: 12px; }
  .ms-now .ms-ratings { justify-content: flex-start; }
  .ms-now__actions { justify-self: start; }
}
/* guests have no buttons in the bar, so the scores sit on the right */
.ms-now.ms-now--guest { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title ratings"; }
.ms-now.ms-now--guest .ms-ratings { justify-content: flex-end; }
@media (max-width: 760px) {
  .ms-now.ms-now--guest { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "ratings"; }
  .ms-now.ms-now--guest .ms-ratings { justify-content: flex-start; }
}
.ms-rating { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 4px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ms-rating small { font-size: 11px; font-weight: 400; color: var(--faint); margin-left: 1px; }
.ms-rating--imdb b { display: inline-grid; place-items: center; height: 22px; padding: 0 6px; border-radius: 4px; background: #f5c518; color: #000; font-size: 12px; font-weight: 800; letter-spacing: -0.02em; }
.ms-rating--imdb span { display: inline-flex; align-items: center; gap: 4px; }
.ms-rating--imdb svg { color: #f5c518; }
a.ms-rating:hover { border-color: var(--border); background: var(--surface-3); }
.ms-now__meta { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.ms-rating--mc { font-weight: 500; font-size: 12px; color: var(--muted); }
.ms-rating--mc b { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 4px; border-radius: 4px; font-size: 12.5px; font-weight: 800; color: #111; }
.ms-rating--mc b.is-good { background: #66cc33; }
.ms-rating--mc b.is-mixed { background: #ffcc33; }
.ms-rating--mc b.is-bad { background: #ff4d4d; color: #fff; }
.ms-rating--rt { padding-left: 8px; }
.ms-rating--rt i { width: 14px; height: 14px; border-radius: 99px; background: radial-gradient(circle at 35% 35%, #ff7a59, #e2231a 70%); box-shadow: inset 0 2px 0 -1px #3ba04a; }
.ms-rating--rt.is-rotten i { background: radial-gradient(circle at 35% 35%, #a6d86b, #55a630 70%); box-shadow: none; }
.ms-keyrow { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.ms-keyrow .ms-note { margin: 0; }
.ms-eyebrow { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.ms-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ms-select, .ms-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ms-select__label, .ms-field > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ms-select select { cursor: pointer; text-overflow: ellipsis; }
.ms-select select:disabled { opacity: .5; cursor: default; }
.ms-scope { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 99px; background: var(--surface-2); color: var(--faint); }
.ms-scope--all { background: var(--accent-soft); color: var(--accent); }
.ms-select__note { margin-left: auto; font-size: 11px; color: var(--faint); }
.ms-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ms-note a, .ms-link { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }
.ms-link:disabled { opacity: .5; cursor: default; }
.ms-link--danger { color: var(--cal-office); }

/* guest access */
.ms-guests { display: grid; gap: 12px; }
.ms-guests__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ms-guests__head .ms-note { margin-top: 4px; }
.ms-guests__actions { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.guest-shell { min-height: calc(100vh - 190px); background: var(--bg); padding: 28px clamp(14px, 4vw, 40px); }
.guest-shell .media-share { margin: 0 auto; }
/* admin preview of the guest page */
.ms-preview-toggle { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 70; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: var(--ui); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 32px -12px rgba(0,0,0,.6); transition: background .14s, border-color .14s; }
.ms-preview-toggle:hover { background: var(--surface-3); border-color: var(--accent-line); }
.ms-preview-toggle svg { color: var(--accent); }
.ms-preview-toggle.is-preview { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.ms-preview-toggle.is-preview svg { color: var(--accent-ink); }
.ms-preview-toggle.is-preview:hover { background: var(--accent-dim); }
@media (max-width: 860px) { .ms-preview-toggle.is-app { bottom: calc(84px + env(safe-area-inset-bottom)); } }
.ms-stage.is-fs ~ .ms-preview-toggle, :fullscreen .ms-preview-toggle { display: none; }
/* sign-in extras and Settings → Access */
.gate__card { text-align: center; }
.gate__field { display: grid; gap: 6px; text-align: left; font-size: 12px; color: var(--muted); }
.gate__code { font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: .18em; padding: 12px 8px; border-radius: 12px; background: var(--surface-2); color: var(--text); }
.gate__hint { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; }
.gate__spin { border-color: var(--border); border-top-color: var(--accent); }
.gate__switch { justify-self: center; font-size: 13px; margin-top: 2px; }
.acc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.acc-form label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.acc-form__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acc-form > .acc-note { grid-column: 1 / -1; }
.acc-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.acc-devices { display: grid; gap: 8px; }
.acc-device { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--surface-2); }
.acc-device.is-pending { border-color: var(--cal-ill); background: color-mix(in oklch, var(--cal-ill) 10%, var(--surface-2)); }
.acc-device__main { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
.acc-device__main b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.acc-device__main span { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.acc-device__actions { display: flex; gap: 8px; }
.acc-code { font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: .14em; padding: 4px 10px; border-radius: 8px; background: var(--surface); }
.acc-tag { font-style: normal; font-size: 10.5px; font-weight: 500; padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.acc-guests .ms-guests h2 { margin: 0; font-size: 16px; }
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.gate__card { width: min(360px, 100%); padding: 28px; display: grid; gap: 12px; text-align: center; }
.gate__card h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.gate__card p { margin: 0; color: var(--muted); font-size: 13.5px; }
.gate__card .cp-btn { justify-content: center; padding: 10px 14px; }
.gate__card .gate__error { color: var(--cal-office); }
.gate__icon { justify-self: center; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.ms-note a:hover, .ms-link:hover { text-decoration: underline; }

/* alerts */
.ms-alert {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 10px 10px 10px 14px; border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--cal-office) 12%, var(--surface)); border: 1px solid color-mix(in oklch, var(--cal-office) 35%, transparent);
  font-size: 13px; color: var(--text);
}
.ms-alert span { flex: 1; }
.ms-alert button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.ms-alert button:hover { background: var(--surface-3); color: var(--text); }

/* source picker */
.ms-empty { text-align: center; padding: 28px 12px 24px; }
.ms-empty__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; }
.ms-empty p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.ms-empty__action { margin-top: 16px; }
.ms-pathbar { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-pathbar input { flex: 1 1 260px; width: auto; }

/* file browser */
.ms-browser { margin-top: 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.ms-browser__head { display: flex; align-items: center; gap: 6px; padding: 6px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.ms-browser__head .ms-icon { width: 30px; height: 30px; }
.ms-browser__path { flex: 1; min-width: 120px; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; padding: 0 4px; }
.ms-chip { font-family: var(--mono); font-size: 11.5px; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--border-soft); background: var(--surface); color: var(--muted); cursor: pointer; }
.ms-chip:hover, .ms-chip.is-on { color: var(--text); border-color: var(--accent-line); }
.ms-browser__list { max-height: 320px; overflow-y: auto; padding: 4px; display: grid; }
.ms-entry { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ms-entry svg { flex: none; color: var(--faint); }
.ms-entry span { overflow-wrap: anywhere; }
.ms-entry:hover:not(:disabled) { background: var(--surface-2); }
.ms-entry--video svg { color: var(--accent); }
.ms-browser__empty { margin: 0; padding: 18px; text-align: center; color: var(--faint); font-size: 13px; }

/* library */
.ms-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ms-search { position: relative; flex: 0 1 320px; margin-right: auto; }
.ms-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.ms-search input { padding-left: 34px; background: var(--surface); }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.ms-poster { min-width: 0; }
.ms-poster__art { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; background: var(--surface); cursor: pointer; color: var(--text); font-family: var(--ui); }
.ms-poster__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease, filter .3s; }
.ms-poster__blank { width: 100%; height: 100%; display: grid; place-items: center; padding: 18px; text-align: center; font-size: 17px; font-weight: 600; color: var(--muted); background: linear-gradient(150deg, var(--surface-3), var(--surface)); overflow-wrap: anywhere; }
.ms-poster__play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 99px; background: var(--accent); color: var(--accent-ink); transform: translate(-50%, -50%) scale(.85); opacity: 0; transition: opacity .18s, transform .18s; box-shadow: 0 8px 24px -6px #000; }
.ms-poster__play svg { margin-left: 3px; }
.ms-poster__art:hover:not(:disabled) img { transform: scale(1.04); filter: brightness(.7); }
.ms-poster__art:hover:not(:disabled) .ms-poster__play, .ms-poster__art:focus-visible .ms-poster__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ms-poster__art:disabled { cursor: default; }
.ms-poster.is-missing .ms-poster__art > :first-child { opacity: .4; filter: grayscale(1); }
.ms-poster__flag { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 99px; font-size: 11px; background: rgba(0,0,0,.7); color: #fff; }
.ms-poster__body { position: relative; padding: 10px 2px 0; }
.ms-poster__body h3 { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-poster__body p { margin: 3px 0 0; font-size: 12px; color: var(--faint); }
.ms-poster__body .ms-poster__desc { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.ms-poster__tools { position: absolute; top: 6px; right: -4px; display: flex; opacity: 0; transition: opacity .14s; }
.ms-poster:hover .ms-poster__tools, .ms-poster__tools:focus-within { opacity: 1; }
.ms-poster__tools .ms-icon { width: 28px; height: 28px; }
.ms-poster:hover .ms-poster__body h3 { padding-right: 56px; }
@media (hover: none) { .ms-poster__tools { opacity: 1; } .ms-poster__body h3 { padding-right: 56px; } }

/* library editor */
.ms-editor { display: grid; grid-template-columns: 150px 1fr; gap: 22px; }
.ms-editor__cover { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ms-editor__cover img, .ms-editor__cover .ms-poster__blank { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-soft); }
.ms-upload { position: relative; width: 100%; justify-content: center; }
.ms-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ms-editor__fields { display: grid; gap: 14px; min-width: 0; align-content: start; }
.ms-editor__fields textarea { resize: vertical; }
.ms-editor .ms-options { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ms-path { margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-editor__actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 640px) {
  .ms-panel { padding: 16px; }
  .ms-bar { padding: 8px 10px 10px; }
  .ms-bar__row { gap: 2px; }
  .ms-bar__row .ms-icon:not(.ms-icon--play) { width: 32px; }
  .ms-time { font-size: 11.5px; margin-left: 4px; }
  .ms-volume { display: none; }
  .ms-quality__btn { padding: 0 8px; }
  .ms-quality__btn svg { display: none; }
  .ms-time b { display: none; }
  .ms-substyle__panel { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 50vh; z-index: 60; }
  .ms-editor { grid-template-columns: 1fr; }
  .ms-editor__cover { flex-direction: row; flex-wrap: wrap; }
  .ms-editor__cover img, .ms-editor__cover .ms-poster__blank { width: 90px; }
  .ms-upload { width: auto; }
  .ms-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
}
@media (max-width: 420px) {
  .ms-skip { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-live.is-on i, .ms-spin { animation: none; }
  .ms-poster__art img, .ms-poster__play { transition: none; }
}