/* ============================================================
   Did I Do? — warm, tactile habit tracker
   ============================================================ */

:root{
  /* base palette: cream / charcoal */
  --cream:        #f4ecdf;
  --cream-2:      #efe5d4;
  --paper:        #fbf6ec;
  --paper-card:   #fffaf1;
  --ink:          #2a2520;
  --ink-soft:     #6b6357;
  --ink-faint:    #756b5e;
  --line:         #d8cbb6;
  --line-soft:    #efe7d8;

  /* accent (app brand) */
  --honey:        #b84e1e;
  --honey-deep:   #8e350e;

  /* per-habit defaults (overridden inline) */
  --accent:       #e8743b;

  --shadow-card:  0 1px 0 rgba(255,255,255,.7) inset, 0 12px 28px -16px rgba(60,42,20,.35);
  --shadow-pop:   0 18px 50px -18px rgba(60,42,20,.5);
  --radius:       26px;
  --radius-lg:    34px;

  --font-display: "Fraunces", Georgia, serif;
  --font-sans:    "Bricolage Grotesque", system-ui, sans-serif;

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease:   cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
[hidden]{ display:none !important; }
button, input{ font:inherit; }
:focus-visible{ outline:3px solid #175f9e; outline-offset:3px; }

body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 80% -10%, #f8d9a8 0%, transparent 55%),
    radial-gradient(900px 700px at 10% 110%, #f3c9c0 0%, transparent 50%),
    #e9ddc8;
  display:flex; align-items:center; justify-content:center;
  min-height:100dvh; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- desktop ambient ---------- */
.stage-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.stage-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; animation:drift 18s ease-in-out infinite; }
.b1{ width:420px; height:420px; background:#f6b56b; top:-80px; left:-60px; }
.b2{ width:380px; height:380px; background:#ef8f7e; bottom:-100px; right:-40px; animation-delay:-6s; }
.b3{ width:300px; height:300px; background:#7c5cff55; top:40%; left:60%; animation-delay:-11s; }
@keyframes drift{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-40px) scale(1.08)} }

/* ============================================================
   Phone frame
   ============================================================ */
.phone{
  position:relative; z-index:2;
  width:393px; height:852px;
  max-height:96dvh;
  background:#1c1813;
  border-radius:54px;
  padding:11px;
  box-shadow:
    0 0 0 2px #3a332a,
    0 50px 90px -30px rgba(40,28,10,.7),
    0 0 0 11px #0d0a07;
}
.phone-notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:118px; height:30px; background:#0d0a07; border-radius:0 0 18px 18px; z-index:30;
  display:flex; align-items:center; justify-content:center;
}
.notch-cam{ width:9px; height:9px; border-radius:50%; background:#241d2c; box-shadow:inset 0 0 0 2px #15101a; }

.phone-screen{
  position:relative; width:100%; height:100%;
  background:var(--cream);
  border-radius:44px; overflow:hidden;
}

/* ============================================================
   Views
   ============================================================ */
.view{ display:none; height:100%; }
.view.is-active{ display:block; }
.app{ height:100%; }

/* scrollable content area inside views (leaves room for tabbar) */
.view--today,.view--habits,.view--stats{
  height:100%; overflow-y:auto; overflow-x:hidden;
  padding:54px 18px 110px;
  -webkit-overflow-scrolling:touch;
}
.view::-webkit-scrollbar{ display:none; }
.view{ scrollbar-width:none; }

/* ============================================================
   Onboarding
   ============================================================ */
.view--onboard{
  flex-direction:column; height:100%;
  padding:80px 28px 36px; text-align:center;
}
.view--onboard.is-active{ display:flex; }
.ob-slides{ flex:1; position:relative; }
.ob-slide{
  position:absolute; inset:0; opacity:0; transform:translateX(24px) scale(.98);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.ob-slide.is-active{ opacity:1; transform:none; pointer-events:auto; }
.ob-title{ font-family:var(--font-display); font-size:38px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.ob-sub{ color:var(--ink-soft); font-size:16px; line-height:1.5; max-width:280px; margin-top:6px; }

.ob-art{ height:230px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.ob-ring{ position:relative; width:160px; height:160px; }
.ob-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ob-ring-track{ fill:none; stroke:#e2d6c0; stroke-width:8; }
.ob-ring-fill{ fill:none; stroke:var(--honey); stroke-width:8; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; animation:ringDraw 1.6s var(--ease) .3s forwards; }
@keyframes ringDraw{ to{ stroke-dashoffset:50; } }
.ob-ring-emoji{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:60px; animation:pop .6s var(--spring) .6s both; }
@keyframes pop{ from{ transform:scale(0); } to{ transform:scale(1);} }

.ob-art--cards{ gap:14px; }
.ob-mini{
  width:78px; height:96px; border-radius:22px; background:var(--paper-card);
  display:flex; align-items:center; justify-content:center; font-size:34px;
  box-shadow:var(--shadow-card); border:2px solid var(--c);
  animation:floaty 3s ease-in-out infinite;
}
.ob-mini:nth-child(1){ transform:rotate(-8deg); }
.ob-mini:nth-child(2){ transform:translateY(-14px) scale(1.08); animation-delay:-1s; }
.ob-mini:nth-child(3){ transform:rotate(8deg); animation-delay:-2s; }
@keyframes floaty{ 0%,100%{ translate:0 0 } 50%{ translate:0 -8px } }
.ob-confetti-burst{ font-size:96px; animation:pop .7s var(--spring) both, floaty 3s ease-in-out infinite .7s; }

.ob-dots{ display:flex; gap:8px; justify-content:center; margin:6px 0 22px; }
.ob-dots span{ width:8px; height:8px; border-radius:50%; background:#d9ccb4; transition:.3s var(--ease); }
.ob-dots span.is-active{ background:var(--honey); width:26px; border-radius:5px; }
.ob-actions{ display:flex; gap:12px; align-items:center; }
.ob-actions .btn--ghost{ flex:0 0 auto; }
.ob-actions .btn--primary{ flex:1; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{ font-family:var(--font-sans); font-weight:600; font-size:16px; border:none; cursor:pointer; border-radius:18px; padding:16px 22px; transition:transform .15s var(--spring), filter .2s; }
.btn:active{ transform:scale(.96); }
.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ filter:brightness(1.1); }
.btn--ghost{ background:transparent; color:var(--ink-soft); }

/* ============================================================
   Today
   ============================================================ */
.today-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.today-date{ color:var(--ink-soft); font-size:13.5px; font-weight:600; letter-spacing:.01em; }
.today-greeting{ font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.05; margin-top:2px; }

.streak-pill{
  display:inline-flex; align-items:center; gap:5px; background:var(--paper-card);
  border:1.5px solid var(--line); border-radius:16px; padding:8px 12px;
  font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; box-shadow:var(--shadow-card);
  transition:transform .15s var(--spring);
}
.streak-pill:active{ transform:scale(.94); }
.streak-flame{ font-size:15px; }

/* ring card */
.ring-card{
  margin-top:18px; background:var(--paper-card); border:1.5px solid var(--line);
  border-radius:var(--radius); padding:18px; display:flex; align-items:center; gap:18px;
  box-shadow:var(--shadow-card);
}
.ring-wrap{ position:relative; width:104px; height:104px; flex:0 0 auto; }
.ring{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:#ece0cb; stroke-width:9; }
.ring-fill{ fill:none; stroke:var(--honey); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:314; stroke-dashoffset:314; transition:stroke-dashoffset .8s var(--ease), stroke .4s; }
.ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-pct{ font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1; }
.ring-sub{ font-size:11px; color:var(--ink-soft); font-weight:600; margin-top:2px; }
.ring-msg{ flex:1; }
.ring-msg-line{ font-family:var(--font-display); font-size:18px; font-weight:500; line-height:1.25; font-style:italic; }
.ring-msg-sub{ color:var(--ink-soft); font-size:13px; margin-top:6px; line-height:1.4; }

/* habit list */
.habit-list{ margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.habit-row{
  position:relative; display:flex; align-items:center; gap:14px;
  background:var(--paper-card); border:1.5px solid var(--line); border-radius:22px;
  padding:14px 16px; box-shadow:var(--shadow-card);
  transition:transform .18s var(--spring), background .3s, border-color .3s;
  overflow:hidden;
}
.habit-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--accent); opacity:.85; }
.habit-row:active{ transform:scale(.985); }
.habit-row.is-done{ background:color-mix(in srgb, var(--accent) 11%, var(--paper-card)); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }

.habit-emoji{ width:46px; height:46px; flex:0 0 auto; border-radius:14px;
  background:color-mix(in srgb, var(--accent) 16%, #fff);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  transition:transform .3s var(--spring); }
.habit-row.is-done .habit-emoji{ transform:rotate(-6deg) scale(1.04); }
.habit-info{ flex:1; min-width:0; }
.habit-name{ font-weight:600; font-size:16.5px; letter-spacing:-.01em; transition:.3s; }
.habit-row.is-done .habit-name{ color:var(--ink-soft); }
.habit-meta{ display:flex; align-items:center; gap:8px; margin-top:3px; color:var(--ink-soft); font-size:12.5px; font-weight:500; flex-wrap:wrap; }
.habit-streak{ display:inline-flex; align-items:center; gap:3px; color:var(--ink); font-weight:700; }
.habit-time{ display:inline-flex; align-items:center; gap:3px; font-weight:600; }
.habit-row.is-overdue .habit-time{ color:var(--honey-deep); font-weight:700; }
.habit-row.is-done .habit-time{ color:var(--ink-faint); }

/* spotlight the next-due habit */
.habit-row.is-next{ border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow:var(--shadow-card), 0 0 0 2px color-mix(in srgb,var(--accent) 30%, transparent); }
.next-badge{ display:inline-block; margin-left:8px; vertical-align:middle; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink); background:color-mix(in srgb,var(--accent) 14%, #fff); border:1px solid color-mix(in srgb,var(--accent) 30%, var(--line)); padding:2px 7px; border-radius:8px; }

/* per-row edit pencil */
.row-edit{ width:34px; height:34px; flex:0 0 auto; border-radius:11px; border:1.5px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s var(--spring); margin-left:2px; }
.row-edit svg{ width:16px; height:16px; fill:none; stroke:var(--ink-soft); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.row-edit:hover{ border-color:var(--accent); }
.row-edit:hover svg{ stroke:var(--accent); }
.row-edit:active{ transform:scale(.9); }

/* the tappable check */
.check{
  width:32px; height:32px; flex:0 0 auto; border-radius:50%;
  border:2.5px solid var(--accent); background:transparent; position:relative; cursor:pointer;
  transition:background .25s var(--spring), transform .2s var(--spring);
}
.check svg{ position:absolute; inset:0; margin:auto; width:18px; height:18px; }
.check svg path{ stroke:#fff; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; fill:none;
  stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .3s var(--ease); }
.habit-row.is-done .check{ background:var(--ink); border-color:var(--ink); transform:scale(1); }
.habit-row.is-done .check svg path{ stroke-dashoffset:0; }
.check.is-pop{ animation:checkPop .45s var(--spring); }
@keyframes checkPop{ 0%{transform:scale(1)} 35%{transform:scale(1.35)} 100%{transform:scale(1)} }

.today-empty{ text-align:center; padding:50px 20px; }
.empty-emoji{ font-size:52px; }
.empty-title{ font-family:var(--font-display); font-size:20px; font-weight:600; margin-top:10px; }
.empty-sub{ color:var(--ink-soft); margin-top:4px; }

.list-foot{ margin-top:16px; }
.add-inline{
  width:100%; padding:15px; border:1.5px dashed var(--line); background:transparent;
  border-radius:18px; color:var(--ink-soft); font-family:var(--font-sans); font-weight:600; font-size:15px;
  cursor:pointer; transition:.2s; }
.add-inline:hover{ border-color:var(--honey); color:var(--honey); }

/* ============================================================
   Page heads (habits / stats)
   ============================================================ */
.page-head{ margin-bottom:18px; }
.page-title{ font-family:var(--font-display); font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.page-sub{ color:var(--ink-soft); font-size:14px; margin-top:5px; }

/* ============================================================
   Habit cards (streaks + heatmap)
   ============================================================ */
.habit-cards{ display:flex; flex-direction:column; gap:14px; }
.hcard{
  background:var(--paper-card); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow-card); cursor:pointer;
  transition:transform .18s var(--spring);
}
.hcard:active{ transform:scale(.99); }
.hcard:focus-visible{ outline:3px solid #175f9e; outline-offset:3px; }
.hcard-top{ display:flex; align-items:center; gap:12px; }
.hcard-emoji{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:22px;
  background:color-mix(in srgb, var(--accent) 16%, #fff); }
.hcard-name{ font-weight:600; font-size:16.5px; flex:1; }
.hcard-freq{ font-size:12px; color:var(--ink-soft); font-weight:500; margin-top:2px; }
.hcard-streak{ text-align:right; }
.hcard-streak b{ font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--ink); display:block; line-height:1; }
.hcard-streak span{ font-size:11px; color:var(--ink-soft); font-weight:600; }

.heat{ margin-top:14px; display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,1fr); gap:3px; }
.heat-cell{ width:100%; aspect-ratio:1; border-radius:3px; background:#ece1cd; }
.heat-cell.lvl1{ background:color-mix(in srgb, var(--accent) 35%, #f0e6d3); }
.heat-cell.lvl2{ background:color-mix(in srgb, var(--accent) 65%, #fff); }
.heat-cell.lvl3{ background:var(--accent); }
.heat-cell.future{ background:transparent; }
.heat-cell.today-cell{ box-shadow:0 0 0 2px var(--ink); }
.hcard-legend{ display:flex; align-items:center; gap:6px; justify-content:flex-end; margin-top:10px; color:var(--ink-faint); font-size:11px; }
.hcard-legend .heat-cell{ width:10px; aspect-ratio:1; }

/* ============================================================
   Stats
   ============================================================ */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.stat-card{ background:var(--paper-card); border:1.5px solid var(--line); border-radius:22px; padding:16px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; }
.stat-num{ font-family:var(--font-display); font-size:34px; font-weight:600; line-height:1; letter-spacing:-.02em; }
.stat-card:nth-child(1) .stat-num{ color:var(--honey); }
.stat-card:nth-child(2) .stat-num{ color:#7c5cff; }
.stat-card:nth-child(3) .stat-num{ color:#3b8ee8; }
.stat-card:nth-child(4) .stat-num{ color:#1ea672; }
.stat-label{ font-weight:600; font-size:14px; margin-top:8px; }
.stat-foot{ color:var(--ink-faint); font-size:11.5px; margin-top:2px; font-weight:500; }

.panel{ background:var(--paper-card); border:1.5px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-card); margin-bottom:14px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel-title{ font-family:var(--font-display); font-size:18px; font-weight:600; }
.panel-tag{ font-size:12px; font-weight:700; color:var(--honey-deep); background:color-mix(in srgb,var(--honey) 12%, #fff); padding:4px 10px; border-radius:10px; }

.bars{ display:flex; align-items:flex-end; gap:9px; height:130px; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end; }
.bar-track{ width:100%; flex:1; display:flex; align-items:flex-end; }
.bar-fill{ width:100%; background:linear-gradient(180deg,#f6a35a,var(--honey)); border-radius:8px 8px 4px 4px; height:0; transition:height .7s var(--spring); min-height:4px; }
.bar-fill.today{ background:linear-gradient(180deg,#2a2520,#4a4036); }
.bar-day{ font-size:11px; font-weight:600; color:var(--ink-soft); }
.bar-val{ font-size:10.5px; font-weight:700; color:var(--ink-faint); }

.leaderboard{ display:flex; flex-direction:column; gap:10px; }
.lb-row{ display:flex; align-items:center; gap:12px; }
.lb-rank{ width:22px; font-family:var(--font-display); font-weight:600; color:var(--ink-faint); font-size:16px; text-align:center; }
.lb-emoji{ width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; background:color-mix(in srgb,var(--accent) 16%,#fff); }
.lb-body{ flex:1; min-width:0; }
.lb-name{ font-weight:600; font-size:14px; }
.lb-bar{ height:7px; background:#ece1cd; border-radius:4px; margin-top:5px; overflow:hidden; }
.lb-bar i{ display:block; height:100%; background:var(--accent); border-radius:4px; width:0; transition:width .8s var(--ease); }
.lb-val{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); }

/* ============================================================
   Tab bar
   ============================================================ */
.tabbar{
  position:absolute; bottom:0; left:0; right:0; height:84px; z-index:20;
  display:flex; align-items:flex-start; justify-content:space-around; padding:10px 8px 0;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-top:1.5px solid var(--line-soft);
  border-radius:0 0 44px 44px;
}
.tab{ flex:1; background:none; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--ink-faint); font-family:var(--font-sans); font-weight:600; font-size:10.5px; padding-top:4px; transition:color .2s; }
.tab-ic{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tab.is-active{ color:var(--honey-deep); }
.tab.is-active .tab-ic{ stroke:var(--honey-deep); }
.tab--add{ flex:0 0 auto; }
.tab-plus{ width:52px; height:52px; margin-top:-14px; border-radius:50%; background:var(--honey); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:300; line-height:1;
  box-shadow:0 10px 22px -8px var(--honey-deep); transition:transform .18s var(--spring); }
.tab--add:active .tab-plus{ transform:scale(.9) rotate(90deg); }

/* ============================================================
   Sheets (editor / profile)
   ============================================================ */
.sheet-scrim{ position:fixed; inset:0; background:rgba(30,22,12,.42); z-index:40; opacity:0; transition:opacity .3s; backdrop-filter:blur(2px); }
.sheet-scrim.is-open{ opacity:1; }

.sheet{
  position:absolute; left:11px; right:11px; bottom:11px; z-index:50;
  max-height:calc(100% - 60px);
  background:var(--paper); border-radius:36px 36px 44px 44px;
  box-shadow:var(--shadow-pop); display:flex; flex-direction:column;
  transform:translateY(110%); transition:transform .42s var(--spring);
}
.sheet.is-open{ transform:translateY(0); }
.sheet-grab{ width:42px; height:5px; border-radius:3px; background:var(--line); margin:10px auto 4px; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 20px 14px; border-bottom:1px solid var(--line-soft); }
.sheet-title{ font-family:var(--font-display); font-size:19px; font-weight:600; }
.sheet-x,.sheet-save{ background:none; border:none; font-family:var(--font-sans); font-weight:700; font-size:15px; cursor:pointer; }
.sheet-x{ color:var(--ink-soft); }
.sheet-save{ color:var(--honey); }
.sheet-body{ padding:18px 20px 28px; overflow-y:auto; }
.sheet-body::-webkit-scrollbar{ display:none; }

.ed-preview{ display:flex; align-items:center; gap:12px; background:color-mix(in srgb,var(--accent) 12%,#fff);
  border:1.5px solid color-mix(in srgb,var(--accent) 30%, var(--line)); border-radius:20px; padding:14px 16px; margin-bottom:20px; transition:.3s; }
.ed-preview-emoji{ width:46px; height:46px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; }
.ed-preview-name{ font-weight:600; font-size:17px; }

.field{ display:block; margin-bottom:20px; }
.fieldset-reset{ min-width:0; border:0; padding:0; }
.field-label{ display:block; font-weight:700; font-size:13px; color:var(--ink-soft); margin-bottom:9px; letter-spacing:.01em; }
.field-input{ width:100%; background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:15px 16px;
  font-family:var(--font-sans); font-size:16px; color:var(--ink); transition:border-color .2s, box-shadow .2s; }
.field-input:focus{ outline:none; border-color:#175f9e; box-shadow:0 0 0 4px color-mix(in srgb,#175f9e 22%, transparent); }
.field--row{ display:flex; align-items:center; justify-content:space-between; }
.field--row .field-label{ margin-bottom:0; }
.field-time{ background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:11px 14px; font-family:var(--font-sans); font-size:15px; color:var(--ink); }
.field-time:focus{ outline:3px solid #175f9e; outline-offset:2px; border-color:#175f9e; }

.emoji-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:7px; }
.emoji-grid button{ aspect-ratio:1; border:1.5px solid transparent; border-radius:13px; background:#fff; font-size:21px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s var(--spring); }
.emoji-grid button:hover{ background:var(--cream-2); }
.emoji-grid button.is-sel{ border-color:var(--ink); background:color-mix(in srgb,var(--accent) 14%,#fff); transform:scale(1.06); }

.color-row{ display:flex; gap:11px; flex-wrap:wrap; }
.color-dot{ width:44px; height:44px; padding:0; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:.15s var(--spring); position:relative; }
.color-dot.is-sel{ border-color:var(--ink); transform:scale(1.08); }
.color-dot.is-sel::after{ content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; text-shadow:0 1px 2px #000, 0 0 2px #000; font-weight:800; font-size:15px; }

.seg{ display:flex; background:var(--cream-2); border-radius:14px; padding:4px; gap:4px; }
.seg-btn{ flex:1; padding:11px; border:none; background:transparent; border-radius:11px; font-family:var(--font-sans); font-weight:600; font-size:14px; color:var(--ink-soft); cursor:pointer; transition:.2s; }
.seg-btn.is-active{ background:#fff; color:var(--ink); box-shadow:0 2px 8px -3px rgba(60,42,20,.25); }

.weekdays{ display:flex; gap:7px; margin-top:12px; }
.wd{ flex:1; aspect-ratio:1; border:1.5px solid var(--line); border-radius:50%; background:#fff; font-family:var(--font-sans); font-weight:700; font-size:12px; color:var(--ink-soft); cursor:pointer; transition:.15s var(--spring); }
.wd.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); transform:scale(1.04); }

.ed-delete{ width:100%; padding:15px; border:1.5px solid #e9c4bb; background:#fdeeea; color:#c0392b; border-radius:16px; font-family:var(--font-sans); font-weight:700; font-size:15px; cursor:pointer; margin-top:6px; transition:.2s; }
.ed-delete:hover{ background:#fbe2db; }

/* profile */
.sheet--profile .sheet-body{ text-align:center; }
.profile-hero{ padding:14px 0 22px; }
.profile-av{ width:84px; height:84px; border-radius:26px; background:var(--cream-2); display:flex; align-items:center; justify-content:center; font-size:42px; margin:0 auto 12px; box-shadow:var(--shadow-card); }
.profile-name{ font-family:var(--font-display); font-size:22px; font-weight:600; }
.profile-tag{ color:var(--ink-soft); font-size:13px; margin-top:3px; }
.profile-stat-row{ display:flex; background:var(--paper-card); border:1.5px solid var(--line); border-radius:20px; padding:18px 0; box-shadow:var(--shadow-card); margin-bottom:22px; }
.pstat{ flex:1; border-right:1px solid var(--line-soft); }
.pstat:last-child{ border:none; }
.pstat b{ font-family:var(--font-display); font-size:26px; font-weight:600; display:block; color:var(--honey); }
.pstat span{ font-size:11.5px; color:var(--ink-soft); font-weight:600; }
.profile-reset{ max-width:none; }
.profile-foot{ color:var(--ink-faint); font-size:12px; margin-top:18px; line-height:1.5; }

/* ---------- suggested-habit chips (editor) ---------- */
.suggest-row{ display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.suggest-row::-webkit-scrollbar{ display:none; }
.suggest-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding:9px 13px 9px 9px; cursor:pointer; font-family:var(--font-sans); font-weight:600; font-size:14px;
  color:var(--ink); transition:.15s var(--spring); white-space:nowrap;
}
.suggest-chip:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,#fff); }
.suggest-chip:active{ transform:scale(.95); }
.suggest-emoji{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px;
  background:color-mix(in srgb,var(--accent) 16%,#fff); }

/* ---------- profile action links ---------- */
.profile-actions{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.profile-link{
  display:flex; align-items:center; gap:13px; text-align:left; width:100%;
  background:var(--paper-card); border:1.5px solid var(--line); border-radius:18px;
  padding:13px 15px; cursor:pointer; box-shadow:var(--shadow-card); text-decoration:none;
  font-family:var(--font-sans); transition:.18s var(--spring);
}
.profile-link:hover{ border-color:var(--honey); transform:translateY(-1px); }
.profile-link:active{ transform:scale(.985); }
.profile-link-ic{ width:42px; height:42px; flex:0 0 auto; border-radius:13px; background:var(--cream-2);
  display:flex; align-items:center; justify-content:center; font-size:21px; }
.profile-link-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.profile-link-body b{ font-size:15px; font-weight:700; color:var(--ink); }
.profile-link-body i{ font-style:normal; font-size:12.5px; color:var(--ink-soft); margin-top:1px; }
.profile-link-arr{ font-size:24px; color:var(--ink-faint); font-weight:400; line-height:1; }

/* ============================================================
   Toast + confetti
   ============================================================ */
.toast{
  position:absolute; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--paper); padding:13px 20px; border-radius:18px;
  font-weight:600; font-size:14px; z-index:60; box-shadow:var(--shadow-pop); opacity:0;
  transition:opacity .3s, transform .3s var(--spring); white-space:nowrap; max-width:88%;
}
.toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }
.confetti{ position:absolute; inset:0; z-index:55; pointer-events:none; }

/* ============================================================
   Desktop hint + small screens
   ============================================================ */
@media (max-width:440px){
  body{ overflow:auto; }
  .stage-bg{ display:none; }
  .phone{ width:100vw; height:100dvh; max-height:none; border-radius:0; padding:0; box-shadow:none; }
  .phone-notch{ display:none; }
  .phone-screen{ border-radius:0; }
  .view--today,.view--habits,.view--stats{ padding-top:24px; }
  .tabbar{ border-radius:0; }
  .sheet{ left:0; right:0; bottom:0; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.05s !important; }
}

/* ============================================================
   AI coach card (Today) + AI suggest-by-goal (editor sheet)
   ============================================================ */
.coach-card{
  margin-top:16px; background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 7%, var(--paper-card)), var(--paper-card));
  border:1.5px solid color-mix(in srgb,var(--accent) 24%, var(--line)); border-radius:20px;
  padding:15px 16px; box-shadow:var(--shadow-card);
}
.coach-head{ display:flex; align-items:center; gap:8px; }
.coach-ic{ font-size:18px; }
.coach-title{ font-weight:800; font-size:14px; color:var(--ink); letter-spacing:.01em; flex:1; }
.coach-refresh{
  width:32px; height:32px; flex:0 0 auto; border-radius:10px; border:1.5px solid var(--line);
  background:#fff; color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .2s, border-color .2s, color .2s;
}
.coach-refresh:hover{ border-color:var(--honey-deep); color:var(--honey-deep); }
.coach-refresh:active{ transform:scale(.92); }
.coach-refresh:disabled{ opacity:.55; cursor:default; }
.coach-card.is-loading .coach-refresh{ animation:coach-spin .9s linear infinite; }
@keyframes coach-spin{ to{ transform:rotate(360deg); } }
.coach-body{ margin-top:10px; }
.coach-tip{ font-size:14px; line-height:1.55; color:var(--ink); }
.coach-card.is-loading .coach-tip{ color:var(--ink-soft); }
.coach-suggestions{ list-style:none; margin:11px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.coach-suggestions li{
  position:relative; padding:9px 12px 9px 30px; background:#fff; border:1.5px solid var(--line-soft);
  border-radius:13px; font-size:13px; line-height:1.45; color:var(--ink-soft);
}
.coach-suggestions li::before{
  content:"✓"; position:absolute; left:11px; top:9px; color:var(--accent); font-weight:800; font-size:12px;
}
.ai-disclaimer, .ai-goal-help{ margin-top:10px; color:var(--ink-soft); font-size:12px; line-height:1.45; }

/* AI suggest-by-goal row inside the editor sheet */
.ai-goal{ display:flex; gap:8px; margin-bottom:10px; }
.ai-goal-input{ flex:1; padding:13px 14px; }
.ai-goal-btn{
  flex:0 0 auto; padding:0 16px; border-radius:14px; border:none; background:var(--ink); color:var(--paper);
  font-family:var(--font-sans); font-weight:700; font-size:14px; cursor:pointer; transition:opacity .2s, transform .15s;
}
.ai-goal-btn:hover{ opacity:.9; }
.ai-goal-btn:active{ transform:scale(.95); }
.ai-goal-btn:disabled{ opacity:.55; cursor:default; }
.ai-goal-status{ font-size:12.5px; color:var(--ink-soft); margin:-2px 0 9px; line-height:1.4; }
.ai-goal-status.is-error{ color:#9b2d24; }

@media (forced-colors:active){
  .habit-row::before, .bar-fill, .heat-cell{ forced-color-adjust:none; }
}