/* Minimoneymo — Tile Dashboard (iOS-first) */

:root {
  --bg-page: #fbfbfb;       /* warm soft paper */
  --bg-card: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --ink-1: #1a1410;
  --ink-2: #6e645c;
  --ink-3: #a39990;
  --ink-4: #c9c0b8;
  --hairline: rgba(26, 20, 16, 0.08);
  --hairline-strong: rgba(26, 20, 16, 0.14);

  /* Tile colors (custom warm palette, slightly desaturated for paper-feel) */
  --t-marigold: #E89A2E;
  --t-coral:    #E47373;
  --t-rose:     #E29CAF;
  --t-lavender: #B19CD9;
  --t-periwinkle: #6E8CDB;
  --t-sky:      #6FB7E0;
  --t-mint:     #74BD93;
  --t-olive:    #B8C168;
  --t-peach:    #F2A88F;
  --t-slate:    #8896A8;
  --t-cocoa:    #A38468;
  --t-grape:    #8064B2;

  /* AI gradient */
  --ai-1: #FF9F4D;
  --ai-2: #FF6E8E;
  --ai-3: #A06CD5;

  --shadow-tile: 0 1px 2px rgba(26,20,16,0.05), 0 4px 14px rgba(26,20,16,0.06);
  --shadow-tile-hover: 0 2px 6px rgba(26,20,16,0.08), 0 14px 28px rgba(26,20,16,0.10);
  --shadow-fab: 0 8px 22px rgba(255, 130, 90, 0.45), 0 2px 6px rgba(0,0,0,0.12);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(26,20,16,0.04), 0 8px 24px rgba(26,20,16,0.05);

  --r-tile: 22px;
  --r-tile-sm: 18px;
  --r-card: 20px;
  --r-pill: 999px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-page);
  color: var(--ink-1);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* ===================== DASHBOARD ROOT ===================== */
.td {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}

.td__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 90px;
}

/* ===================== HEADER ===================== */
.td__header {
  padding: 8px 20px 6px;
}
.td__greet {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.td__title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.td__title .on {
  color: var(--ink-1);
}
.td__title .off {
  color: var(--ink-3);
}

.td__tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 16px;
  padding: 0 20px;
  border-bottom: 1px solid var(--hairline);
}
.td__tab {
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  position: relative;
  cursor: pointer;
}
.td__tab.on {
  color: var(--ink-1);
}
.td__tab.on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-1);
}
.td__tab-spacer { flex: 1; }
.td__tab-action {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--ink-2);
  cursor: pointer;
}
.td__tab-action:hover { background: rgba(26,20,16,0.04); }

/* ===================== SECTION ===================== */
.td__section {
  padding: 20px 20px 4px;
}
.td__section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.td__section-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}
.td__section-counter {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(26,20,16,0.05);
  border-radius: 999px;
}
.td__section-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.td__avatars {
  display: flex;
  align-items: center;
}
.td__avatars .av {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--bg-page);
  margin-left: -7px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: white;
}
.td__avatars .av:first-child { margin-left: 0; }
.td__avatars .av-plus {
  background: rgba(26,20,16,0.08);
  color: var(--ink-2);
  font-weight: 700;
  cursor: pointer;
}

/* ===================== TILE GRID ===================== */
.td__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 22px 14px;
}
.td__grid.size-lg {
  gap: 26px 20px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  -webkit-touch-callout: none;
  user-select: none;
}
.tile__icon {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-tile);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-tile);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease;
  overflow: hidden;
}
.tile:active .tile__icon {
  transform: scale(0.96);
}
.tile:hover .tile__icon {
  box-shadow: var(--shadow-tile-hover);
  transform: translateY(-2px);
}
.tile__icon::before {
  /* soft inner highlight */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}
.tile__icon::after {
  /* subtle inner border */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.06);
  pointer-events: none;
}
.tile__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  margin-top: 10px;
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.tile__meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Tile color helpers */
.tile.marigold .tile__icon  { background: var(--t-marigold); }
.tile.coral .tile__icon     { background: var(--t-coral); }
.tile.rose .tile__icon      { background: var(--t-rose); }
.tile.lavender .tile__icon  { background: var(--t-lavender); }
.tile.periwinkle .tile__icon{ background: var(--t-periwinkle); }
.tile.sky .tile__icon       { background: var(--t-sky); }
.tile.mint .tile__icon      { background: var(--t-mint); }
.tile.olive .tile__icon     { background: var(--t-olive); }
.tile.peach .tile__icon     { background: var(--t-peach); }
.tile.slate .tile__icon     { background: var(--t-slate); }
.tile.cocoa .tile__icon     { background: var(--t-cocoa); }
.tile.grape .tile__icon     { background: var(--t-grape); }
.tile.white .tile__icon     {
  background: #fff;
  color: var(--ink-2);
}
.tile.ai .tile__icon {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(135deg, var(--ai-1) 0%, var(--ai-2) 50%, var(--ai-3) 100%);
}

/* Tile badges (top-right) */
.tile__badge {
  position: absolute;
  top: 8px; right: 8px;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: rgba(0,0,0,0.22);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 0 7px;
  display: grid; place-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: 0;
}
.tile__badge.alert {
  background: #E53935;
  box-shadow: 0 0 0 2px var(--bg-page);
}

/* "Show more" tile */
.tile.more .tile__icon {
  background: rgba(26, 20, 16, 0.05);
  border: 1px dashed rgba(26, 20, 16, 0.15);
  box-shadow: none;
}
.tile.more .tile__icon::before { display: none; }
.tile.more .tile__icon::after { display: none; }

/* ===================== TODAY HERO CARD ===================== */
.today-hero {
  margin: 0 20px 4px;
  padding: 18px 20px;
  border-radius: var(--r-card);
  background:
    radial-gradient(120% 80% at 90% 10%, rgba(255, 200, 130, 0.35), transparent 60%),
    linear-gradient(180deg, #FFF6E9, #FFFDF7);
  box-shadow: var(--shadow-card);
  border: 0.5px solid rgba(232, 154, 46, 0.18);
  position: relative;
  overflow: hidden;
}
.today-hero__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.today-hero__date {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-marigold);
}
.today-hero__weather {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 500;
}
.today-hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.today-hero__stat .v {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.today-hero__stat .v .delta {
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(58, 128, 80, 0.14);
  color: #3A8050;
  vertical-align: 4px;
}
.today-hero__stat .l {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 2px;
  font-weight: 500;
}

/* ===================== AI PILL (in-flow, when tile not enough) ===================== */
.ai-pill {
  margin: 4px 20px;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.35), transparent 60%),
    linear-gradient(135deg, var(--ai-1), var(--ai-2) 50%, var(--ai-3));
  color: white;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(255, 130, 90, 0.28);
  position: relative;
  overflow: hidden;
}
.ai-pill__mic {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.35);
}
.ai-pill__text {
  flex: 1;
  min-width: 0;
}
.ai-pill__hint {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 1px;
}
.ai-pill__cta {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ai-pill__arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  display: grid; place-items: center;
}

/* ===================== BOTTOM TABS (iOS) ===================== */
.td__bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 76px;
  padding-bottom: 16px;
  background: rgba(245, 241, 235, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-top: 0.5px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  z-index: 10;
}
.td__bottom .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}
.td__bottom .tab.on { color: var(--ink-1); }
.td__bottom .tab.on .lbl { font-weight: 600; }

/* ===================== FAB (AI) ===================== */
.td__fab {
  position: absolute;
  right: 16px;
  bottom: 84px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(135deg, var(--ai-1), var(--ai-2) 60%, var(--ai-3));
  color: white;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-fab);
  z-index: 11;
  border: 1.5px solid rgba(255,255,255,0.4);
  transition: transform 200ms ease;
}
.td__fab:active { transform: scale(0.94); }

.td__fab .pulse-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--ai-1);
  opacity: 0;
  animation: aiPulse 2.2s ease-out infinite;
}
@keyframes aiPulse {
  0%   { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ===================== AI SHEET (bottom sheet) ===================== */
.ai-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 20, 16, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 20;
  animation: fadeIn 200ms ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.ai-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #FAF7F2;
  border-radius: 28px 28px 0 0;
  padding: 12px 16px 28px;
  z-index: 21;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.16);
  display: flex;
  flex-direction: column;
  max-height: 78%;
  animation: sheetUp 320ms cubic-bezier(.2,.8,.2,1);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ai-sheet__grabber {
  width: 36px; height: 5px;
  border-radius: 3px;
  background: rgba(26,20,16,0.18);
  margin: 4px auto 12px;
}
.ai-sheet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 4px;
}
.ai-sheet__avatar {
  width: 36px; height: 36px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(135deg, var(--ai-1), var(--ai-2) 60%, var(--ai-3));
  display: grid; place-items: center;
  color: white;
}
.ai-sheet__name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.ai-sheet__sub { font-size: 11px; color: var(--ink-2); }
.ai-sheet__close {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(26,20,16,0.06);
  color: var(--ink-2);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 18px;
}

.ai-sheet__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 4px 4px;
}

.ai-msg { display: flex; flex-direction: column; gap: 4px; max-width: 92%; }
.ai-msg.user { align-self: flex-end; align-items: flex-end; }
.ai-msg.bot { align-self: flex-start; }
.ai-msg .meta {
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.ai-bubble {
  padding: 11px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.45;
  background: white;
  color: var(--ink-1);
  border: 0.5px solid var(--hairline);
}
.ai-msg.user .ai-bubble {
  background:
    linear-gradient(135deg, var(--ai-1), var(--ai-2) 60%, var(--ai-3));
  color: white;
  border: none;
  border-bottom-right-radius: 6px;
}
.ai-msg.bot .ai-bubble {
  border-bottom-left-radius: 6px;
  box-shadow: var(--shadow-card);
}

.ai-confirm {
  background: white;
  border-radius: 20px;
  padding: 16px;
  border: 0.5px solid var(--hairline);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-confirm__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-confirm__title .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ai-1);
  box-shadow: 0 0 8px rgba(255, 130, 90, 0.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 130, 90, 0.4), 0 0 8px rgba(255, 130, 90, 0.7); }
  50% { box-shadow: 0 0 0 6px transparent, 0 0 8px rgba(255, 130, 90, 0.7); }
}
.ai-plan {
  display: flex;
  flex-direction: column;
}
.ai-plan-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.ai-plan-step:first-child { border-top: none; padding-top: 0; }
.ai-plan-step__chip {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: white;
}
.ai-plan-step__chip.create { background: var(--t-mint); }
.ai-plan-step__chip.minus { background: var(--t-marigold); }
.ai-plan-step__chip.update { background: var(--t-periwinkle); }
.ai-plan-step__body { font-size: 14px; line-height: 1.45; }
.ai-plan-step__body .verb { color: var(--ink-2); }
.ai-plan-step__body strong { font-weight: 700; }
.ai-plan-step__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  background: rgba(26,20,16,0.05);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--ink-1);
  font-weight: 600;
}
.ai-plan-step__body .meta {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 3px;
}
.ai-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.btn-ios {
  height: 44px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  letter-spacing: -0.01em;
}
.btn-primary-ios {
  background: linear-gradient(135deg, var(--ai-1), var(--ai-2));
  color: white;
  box-shadow: 0 6px 16px rgba(255, 130, 90, 0.36);
}
.btn-secondary-ios {
  background: rgba(26,20,16,0.06);
  color: var(--ink-1);
}

.ai-done {
  background: #E8F2EC;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 0.5px solid rgba(58, 128, 80, 0.18);
}
.ai-done__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--t-mint);
  color: white;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ai-done__body { font-size: 14px; line-height: 1.45; }
.ai-done__body strong { color: #3A8050; font-weight: 700; }
.ai-done__body .links { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; }
.ai-done__body .links a { color: #3A8050; text-decoration: none; font-weight: 600; border-bottom: 1px dashed currentColor; }

.ai-sheet__composer {
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-suggestions {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ai-suggestions::-webkit-scrollbar { display: none; }
.ai-suggestion {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 999px;
  background: white;
  color: var(--ink-2);
  border: 0.5px solid var(--hairline);
  cursor: pointer;
  white-space: nowrap;
}
.ai-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  padding: 6px 6px 6px 14px;
}
.ai-composer input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink-1);
  padding: 8px 0;
}
.ai-composer input::placeholder { color: var(--ink-3); }
.ai-mic {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ai-1), var(--ai-2));
  color: white;
  border: none;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(255, 130, 90, 0.4);
  flex-shrink: 0;
}
.ai-mic.recording { animation: recPulse 1.5s infinite; }
@keyframes recPulse {
  0% { box-shadow: 0 4px 12px rgba(255, 130, 90, 0.4), 0 0 0 0 rgba(255, 130, 90, 0.5); }
  70% { box-shadow: 0 4px 12px rgba(255, 130, 90, 0.4), 0 0 0 14px rgba(255, 130, 90, 0); }
  100% { box-shadow: 0 4px 12px rgba(255, 130, 90, 0.4), 0 0 0 0 rgba(255, 130, 90, 0); }
}
.waveform-ios {
  display: flex; align-items: center; gap: 3px;
  height: 22px;
}
.waveform-ios span {
  width: 3px;
  border-radius: 2px;
  background: white;
  animation: waveIos 1.2s ease-in-out infinite;
}
@keyframes waveIos {
  0%, 100% { transform: scaleY(0.4); opacity: 0.7; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ===================== iPad layout ===================== */
.td.layout-tablet {
  flex-direction: row;
}
.td.layout-tablet .td__sidebar {
  width: 220px;
  border-right: 0.5px solid var(--hairline);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255,255,255,0.4);
}
.td.layout-tablet .td__bottom { display: none; }
.td.layout-tablet .td__scroll { padding-bottom: 30px; padding-top: 8px; }
.td.layout-tablet .td__fab { bottom: 24px; right: 24px; width: 60px; height: 60px; }
.td.layout-tablet .td__header { padding: 16px 30px 6px; }
.td.layout-tablet .td__tabs { padding: 0 30px; }
.td.layout-tablet .td__section { padding: 22px 30px 4px; }
.td.layout-tablet .today-hero { margin: 0 30px 4px; }
.td.layout-tablet .ai-pill { margin: 4px 30px; }

.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
.side-item.on { background: rgba(26,20,16,0.06); color: var(--ink-1); font-weight: 600; }
.side-item .ico { width: 18px; height: 18px; display: grid; place-items: center; }

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  margin-bottom: 18px;
}
.side-brand .mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(135deg, var(--ai-1), var(--ai-2));
  box-shadow: 0 4px 10px rgba(255, 130, 90, 0.32);
}
.side-brand .name { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.side-brand .slug { font-size: 10px; color: var(--ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ===================== Desktop layout ===================== */
.td.layout-desktop {
  flex-direction: row;
}
.td.layout-desktop .td__sidebar {
  width: 240px;
  border-right: 0.5px solid var(--hairline);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255,255,255,0.4);
}
.td.layout-desktop .td__bottom { display: none; }
.td.layout-desktop .td__scroll { padding-bottom: 30px; padding-top: 12px; }
.td.layout-desktop .td__fab { bottom: 30px; right: 30px; width: 64px; height: 64px; }
.td.layout-desktop .td__header { padding: 18px 36px 8px; }
.td.layout-desktop .td__tabs { padding: 0 36px; }
.td.layout-desktop .td__section { padding: 26px 36px 4px; }
.td.layout-desktop .today-hero { margin: 0 36px 4px; padding: 22px 26px; }
.td.layout-desktop .today-hero__stat .v { font-size: 30px; }
.td.layout-desktop .ai-pill { margin: 4px 36px; }
.td.layout-desktop .td__title { font-size: 36px; }
.td.layout-desktop .tile__label { font-size: 14px; }
.td.layout-desktop .tile__meta { font-size: 12px; }
.td.layout-desktop .td__section-title { font-size: 24px; }

/* ===================== Status bar (iOS) ===================== */
.ios-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.ios-statusbar .right { display: flex; align-items: center; gap: 6px; }

/* Tablet top bar */
.tablet-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 30px 8px;
  border-bottom: 0.5px solid var(--hairline);
}
.tablet-topbar .search {
  flex: 1;
  max-width: 480px;
  height: 36px;
  border-radius: 999px;
  background: rgba(26,20,16,0.05);
  padding: 0 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
}
.tablet-topbar .topbar-action {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(26,20,16,0.05);
  display: grid; place-items: center;
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
}
.tablet-topbar .topbar-action .dot {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #E53935; border: 1.5px solid #fff;
}
.tablet-topbar .av-me {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ai-1), var(--ai-2));
  color: white; display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
}