/* Easyday app prototype — styles generated from packages/tokens/tokens.json */

:root {
  --pink-50:#FFF1F5; --pink-100:#FFE0EA; --pink-200:#FFC2D5; --pink-300:#FF94B4; --pink-400:#FF5C8D; --pink-500:#FF2D6F; --pink-600:#E0185A; --pink-700:#B8104A; --pink-800:#8F0F3D;
  --clay-25:#FBF7F4; --clay-50:#F5EFEA; --clay-100:#EDE5DF; --clay-200:#DDD2CA; --clay-300:#C4B6AC; --clay-400:#9C8D83; --clay-500:#7A6C63; --clay-600:#5C5049; --clay-700:#433A35; --clay-800:#2D2724; --clay-900:#1E1A18;
  --sage-100:#E3EFE6; --sage-200:#C3DBC9; --sage-500:#5E8C6A; --sage-600:#4A7255;
  --apricot-100:#FCEBDD; --apricot-200:#F8D2B2; --apricot-500:#E88A3C; --apricot-600:#C46D24;
  --dusk-100:#E4E8F1; --dusk-200:#C6CEE0; --dusk-500:#56688F; --dusk-600:#455476;
  --crimson:#A51C46;

  --sans:'Plus Jakarta Sans', system-ui, sans-serif;
  --serif:'Newsreader', Georgia, serif;

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:20px; --r-full:9999px;
  --e-standard:cubic-bezier(.2,0,0,1); --e-emph:cubic-bezier(.05,.7,.1,1); --e-exit:cubic-bezier(.4,0,1,1);
  --d-instant:80ms; --d-fast:120ms; --d-base:200ms; --d-slow:320ms; --d-slower:480ms;
  --shadow-raised:0 2px 8px rgba(30,26,24,.06),0 1px 2px rgba(30,26,24,.04);
  --shadow-overlay:0 12px 32px rgba(30,26,24,.14),0 2px 6px rgba(30,26,24,.06);
}

/* ---------- semantic tokens (phone) ---------- */
.phone {
  --bg-canvas:#FBF7F4; --bg-surface:#FFFFFF; --bg-sunken:#F5EFEA; --bg-inverse:#1E1A18;
  --border-subtle:#EDE5DF; --border-default:#DDD2CA; --border-strong:#9C8D83;
  --text-primary:#1E1A18; --text-secondary:#5C5049; --text-tertiary:#7A6C63; --text-inverse:#F4EEE9; --text-on-accent:#fff; --text-link:#B8104A;
  --accent:#E0185A; --accent-pressed:#B8104A; --accent-subtle:#FFF1F5; --brand:#FF2D6F;
  --success:#2F7D4F; --success-subtle:#E6F2EA; --warning:#9A6212; --warning-subtle:#FBF0DC; --danger:#C2410C; --danger-subtle:#FCE9E0; --info:#2C6A9A; --info-subtle:#E3EEF6;
  --scrim:rgba(30,26,24,.48);
  --ph-period:#FF2D6F; --ph-period-t:#FFE0EA; --ph-foll:#5E8C6A; --ph-foll-t:#E3EFE6; --ph-fert:#E88A3C; --ph-fert-t:#FCEBDD; --ph-ovu:#C46D24; --ph-ovu-t:#F8D2B2; --ph-lut:#56688F; --ph-lut-t:#E4E8F1;
  --track:#EDE5DF;
}
.phone[data-theme="dark"] {
  --bg-canvas:#161312; --bg-surface:#201C1A; --bg-sunken:#110F0E; --bg-inverse:#F4EEE9;
  --border-subtle:#2D2724; --border-default:#433A35; --border-strong:#7A6C63;
  --text-primary:#F4EEE9; --text-secondary:#C4B6AC; --text-tertiary:#9C8D83; --text-inverse:#1E1A18; --text-link:#FF94B4;
  --accent:#FF5C8D; --accent-pressed:#FF94B4; --accent-subtle:#3A1220;
  --success:#6BC291; --success-subtle:#17291F; --warning:#E8B04C; --warning-subtle:#2E2412; --danger:#F2865A; --danger-subtle:#33190F; --info:#7FB3DB; --info-subtle:#132433;
  --scrim:rgba(0,0,0,.6);
  --ph-period:#FF5C8D; --ph-period-t:#3A1220; --ph-foll:#76A483; --ph-foll-t:#18261C; --ph-fert:#EE9A55; --ph-fert-t:#2E1F12; --ph-ovu:#F2B07C; --ph-ovu-t:#3A2614; --ph-lut:#7686AB; --ph-lut-t:#1A2030;
  --track:#2D2724;
  --shadow-overlay:0 12px 32px rgba(0,0,0,.5);
}

/* ---------- presenter shell ---------- */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body { font-family:var(--sans); background:#EFE8E2; color:var(--clay-900); overflow:hidden; }
body.dark-shell { background:#0E0C0B; color:#F4EEE9; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input, textarea, select { font:inherit; color:inherit; }

#presenter { display:grid; grid-template-columns:280px 1fr 300px; height:100vh; }
#nav, #notes { background:#FBF7F4; border-right:1px solid var(--clay-100); overflow-y:auto; padding:20px 16px; }
#notes { border-right:0; border-left:1px solid var(--clay-100); }
body.dark-shell #nav, body.dark-shell #notes { background:#161312; border-color:#2D2724; }
.brand-row { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.brand-row img { width:36px; height:36px; border-radius:10px; object-fit:cover; background:#fff; }
.brand-row b { font-size:16px; font-weight:800; letter-spacing:-.2px; }
.brand-sub { font-size:12px; color:var(--clay-500); margin:0 0 16px 46px; }
.ctl-group { display:flex; gap:4px; padding:4px; background:var(--clay-50); border-radius:10px; margin-bottom:8px; }
body.dark-shell .ctl-group { background:#201C1A; }
.ctl-group button { flex:1; height:32px; border-radius:7px; font-size:13px; font-weight:600; color:var(--clay-600); display:flex; align-items:center; justify-content:center; gap:6px; }
body.dark-shell .ctl-group button { color:#C4B6AC; }
.ctl-group button.on { background:#fff; color:var(--clay-900); box-shadow:var(--shadow-raised); }
body.dark-shell .ctl-group button.on { background:#2D2724; color:#F4EEE9; }
.nav-search { width:100%; height:36px; border-radius:8px; border:1px solid var(--clay-200); background:#fff; padding:0 12px; font-size:13px; margin:8px 0 12px; }
body.dark-shell .nav-search { background:#201C1A; border-color:#433A35; }
.nav-h { font-size:11px; font-weight:700; color:var(--clay-500); letter-spacing:.4px; margin:16px 0 4px; text-transform:uppercase; }
.nav-item { display:flex; width:100%; text-align:left; font-size:13px; padding:7px 10px; border-radius:7px; color:var(--clay-700); gap:8px; align-items:center; }
body.dark-shell .nav-item { color:#C4B6AC; }
.nav-item:hover { background:var(--clay-50); }
body.dark-shell .nav-item:hover { background:#201C1A; }
.nav-item.on { background:var(--pink-50); color:var(--pink-700); font-weight:600; }
body.dark-shell .nav-item.on { background:#3A1220; color:#FF94B4; }
.nav-item .k { margin-left:auto; font-size:10px; color:var(--clay-400); font-weight:600; }
.notes-title { font-size:20px; font-weight:700; letter-spacing:-.2px; margin:4px 0 4px; }
.notes-id { display:inline-block; font-size:11px; font-weight:700; padding:2px 6px; border-radius:4px; background:var(--clay-50); color:var(--clay-600); margin:0 4px 4px 0; }
body.dark-shell .notes-id { background:#201C1A; color:#C4B6AC; }
.notes p, .notes li { font-size:13px; line-height:1.55; color:var(--clay-600); }
body.dark-shell .notes p, body.dark-shell .notes li { color:#C4B6AC; }
.notes ul { padding-left:18px; margin:6px 0; }
.notes h4 { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--clay-500); margin:18px 0 6px; }
.scn-btn { display:block; width:100%; text-align:left; font-size:13px; padding:8px 10px; border:1px solid var(--clay-100); border-radius:8px; margin-bottom:6px; background:#fff; }
body.dark-shell .scn-btn { background:#201C1A; border-color:#2D2724; }
.scn-btn:hover { border-color:var(--pink-300); }
.hint-toggle { display:flex; align-items:center; gap:8px; font-size:13px; margin-top:8px; color:var(--clay-600); }

#stage { display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.device { position:relative; transform-origin:center center; }
.device-frame { position:relative; width:414px; height:868px; border-radius:68px; background:#1A1716; padding:12px; box-shadow:0 0 0 2px #3a3431, 0 30px 80px rgba(30,26,24,.28); }
.device[data-platform="android"] .device-frame { border-radius:44px; padding:10px; width:410px; height:864px; }

/* ---------- phone ---------- */
.phone { position:relative; width:390px; height:844px; border-radius:56px; overflow:hidden; background:var(--bg-canvas); color:var(--text-primary); font-family:var(--sans); isolation:isolate; }
.phone[data-platform="android"] { border-radius:34px; }
.phone[data-platform="ios"] { --sat:54px; --sab:30px; }
.phone[data-platform="android"] { --sat:36px; --sab:18px; }

.statusbar { position:absolute; top:0; left:0; right:0; height:var(--sat); z-index:60; display:flex; align-items:center; justify-content:space-between; padding:0 32px 0 36px; font-weight:600; font-size:16px; pointer-events:none; color:var(--text-primary); transition:color var(--d-base); }
.phone[data-platform="android"] .statusbar { padding:0 20px; font-size:13px; font-weight:500; }
.statusbar .sb-icons { display:flex; gap:6px; align-items:center; font-size:16px; }
.phone[data-platform="android"] .statusbar .sb-icons { font-size:14px; gap:4px; }
.statusbar.light { color:#fff; }
.island { position:absolute; top:11px; left:50%; transform:translateX(-50%); width:124px; height:36px; border-radius:20px; background:#000; z-index:70; pointer-events:none; }
.phone[data-platform="android"] .island { width:14px; height:14px; top:12px; border-radius:50%; }
.homebar { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:136px; height:5px; border-radius:3px; background:var(--text-primary); opacity:.85; z-index:70; pointer-events:none; }
.phone[data-platform="android"] .homebar { width:108px; height:4px; bottom:6px; opacity:.6; }

.stack { position:absolute; inset:0; }
.screen { position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg-canvas); padding-top:var(--sat); will-change:transform; }
.screen.no-sat { padding-top:0; }
.screen .content { flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; position:relative; }
.screen .content::-webkit-scrollbar { display:none; }
.screen.has-tabs .content { padding-bottom:calc(56px + var(--sab) + 24px); }
.screen:not(.has-tabs) .content.pad-b { padding-bottom:calc(var(--sab) + 24px); }

/* screen transitions */
.phone[data-platform="ios"] .screen.enter { animation:iosIn var(--d-slow) var(--e-standard) both; box-shadow:-10px 0 30px rgba(0,0,0,.08); }
.phone[data-platform="ios"] .screen.under { animation:iosUnder var(--d-slow) var(--e-standard) both; }
.phone[data-platform="ios"] .screen.leave { animation:iosOut var(--d-slow) var(--e-exit) both; }
.phone[data-platform="ios"] .screen.restore { animation:iosRestore var(--d-slow) var(--e-standard) both; }
@keyframes iosIn { from { transform:translateX(100%); } to { transform:none; } }
@keyframes iosUnder { to { transform:translateX(-28%); filter:brightness(.96); } }
@keyframes iosOut { from { transform:none; } to { transform:translateX(100%); } }
@keyframes iosRestore { from { transform:translateX(-28%); } to { transform:none; } }
.phone[data-platform="android"] .screen.enter { animation:anIn var(--d-slow) var(--e-emph) both; }
.phone[data-platform="android"] .screen.under { animation:anUnder var(--d-slow) var(--e-standard) both; }
.phone[data-platform="android"] .screen.leave { animation:anOut 220ms var(--e-exit) both; }
.phone[data-platform="android"] .screen.restore { animation:anRestore var(--d-slow) var(--e-standard) both; }
@keyframes anIn { from { transform:translateX(12%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes anUnder { to { transform:translateX(-6%); opacity:.6; } }
@keyframes anOut { to { transform:translateX(12%); opacity:0; } }
@keyframes anRestore { from { transform:translateX(-6%); opacity:.6; } to { transform:none; opacity:1; } }
.screen.fade-in { animation:fadeIn var(--d-base) var(--e-standard) both; }
.screen.rise-in { animation:riseIn var(--d-slow) var(--e-emph) both; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes riseIn { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }

/* ---------- typography ---------- */
.t-dxl { font-family:var(--serif); font-size:40px; line-height:44px; font-weight:500; letter-spacing:-.5px; }
.t-dl { font-family:var(--serif); font-size:32px; line-height:38px; font-weight:500; letter-spacing:-.3px; }
.t-tl { font-size:24px; line-height:30px; font-weight:700; letter-spacing:-.2px; }
.t-tm { font-size:20px; line-height:26px; font-weight:700; letter-spacing:-.1px; }
.t-ts { font-size:17px; line-height:22px; font-weight:600; }
.t-bl { font-size:17px; line-height:26px; }
.t-bm { font-size:15px; line-height:22px; }
.t-bs { font-size:13px; line-height:18px; letter-spacing:.1px; }
.t-ll { font-size:17px; line-height:22px; font-weight:600; }
.t-lm { font-size:15px; line-height:20px; font-weight:600; }
.t-ls { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.4px; }
.t-nh { font-size:64px; line-height:64px; font-weight:700; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.t-nl { font-size:28px; line-height:32px; font-weight:700; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.serif { font-family:var(--serif); }
.tab-num { font-variant-numeric:tabular-nums; }
.c2 { color:var(--text-secondary); } .c3 { color:var(--text-tertiary); } .clink { color:var(--text-link); } .cacc { color:var(--accent); } .cdanger { color:var(--danger); } .csuccess { color:var(--success); }
.m0 { margin:0; }
.clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.strike { text-decoration:line-through; }

/* ---------- layout helpers ---------- */
.px { padding-left:20px; padding-right:20px; }
.sec { margin-top:32px; }
.sec-h { display:flex; align-items:baseline; justify-content:space-between; margin:0 0 12px; }
.row-flex { display:flex; align-items:center; gap:12px; }
.between { justify-content:space-between; }
.stack-8 > * + * { margin-top:8px; } .stack-12 > * + * { margin-top:12px; } .stack-16 > * + * { margin-top:16px; }
.hscroll { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:0 20px; scroll-snap-type:x mandatory; }
.hscroll::-webkit-scrollbar { display:none; }
.grow { flex:1; min-width:0; }
.divider { height:1px; background:var(--border-subtle); margin:0; border:0; }
.spacer-8 { height:8px; } .spacer-16 { height:16px; } .spacer-24 { height:24px; } .spacer-32 { height:32px; }

/* ---------- press feedback ---------- */
.tap { transition:transform var(--d-fast) var(--e-standard), background-color var(--d-fast), opacity var(--d-fast); cursor:pointer; position:relative; user-select:none; }
.tap:active { transform:scale(.97); }
.tap.flat:active { transform:none; background:var(--bg-sunken); }
.ripple { position:absolute; border-radius:50%; background:currentColor; opacity:.14; transform:scale(0); animation:ripple 480ms var(--e-standard) forwards; pointer-events:none; }
@keyframes ripple { to { transform:scale(1); opacity:0; } }
.rip-host { overflow:hidden; }

/* ---------- header ---------- */
.hdr { height:52px; flex:none; display:flex; align-items:center; padding:0 8px; gap:4px; position:relative; z-index:5; background:var(--bg-canvas); transition:box-shadow var(--d-base); }
.hdr.scrolled { box-shadow:0 1px 0 var(--border-subtle); }
.hdr .hdr-title { font-size:17px; font-weight:700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phone[data-platform="ios"] .hdr .hdr-title { position:absolute; left:64px; right:64px; text-align:center; }
.phone[data-platform="android"] .hdr .hdr-title { font-size:20px; font-weight:600; padding-left:4px; }
.hdr .hdr-actions { margin-left:auto; display:flex; gap:2px; }
.icon-btn { width:44px; height:44px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--text-primary); flex:none; }
.icon-btn:active { background:var(--bg-sunken); }
.icon-btn .badge-dot { position:absolute; top:8px; right:8px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-canvas); }
.back-ios { display:flex; align-items:center; color:var(--text-link); font-size:17px; font-weight:500; padding:0 8px 0 2px; height:44px; }
.back-ios i { font-size:26px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--r-md); font-weight:600; white-space:nowrap; position:relative; overflow:hidden; }
.btn-l { height:52px; padding:0 24px; font-size:17px; }
.btn-m { height:44px; padding:0 20px; font-size:15px; }
.btn-s { height:36px; padding:0 16px; font-size:15px; border-radius:var(--r-sm); }
.btn-block { display:flex; width:100%; }
.btn-primary { background:var(--accent); color:var(--text-on-accent); }
.btn-primary:active { background:var(--accent-pressed); }
.btn-secondary { background:var(--bg-surface); color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--border-default); }
.btn-ghost { color:var(--text-link); }
.btn-danger { background:var(--danger); color:#fff; }
.btn i { font-size:20px; }
.btn[disabled] { opacity:.4; pointer-events:none; }
.btn.loading { color:transparent !important; }
.btn.loading::after { content:''; position:absolute; width:36px; height:8px; background:radial-gradient(circle 4px, #fff 98%, transparent) 0 50%/12px 8px repeat-x; animation:dots 900ms linear infinite; }
.btn-secondary.loading::after { background:radial-gradient(circle 4px, var(--accent) 98%, transparent) 0 50%/12px 8px repeat-x; }
@keyframes dots { 0% { opacity:.35; } 50% { opacity:1; } 100% { opacity:.35; } }
.btn.done i.ph-check { animation:pop 320ms var(--e-emph); }

/* ---------- inputs ---------- */
.field label { display:block; font-size:13px; color:var(--text-secondary); margin-bottom:8px; font-weight:500; }
.input { width:100%; height:52px; border-radius:var(--r-sm); background:var(--bg-sunken); border:2px solid transparent; padding:0 14px; font-size:16px; outline:none; transition:border-color var(--d-fast), background var(--d-fast); color:var(--text-primary); }
.input:focus { border-color:var(--accent); background:var(--bg-surface); }
textarea.input { height:96px; padding:12px 14px; resize:none; line-height:22px; }
.field .help { font-size:13px; color:var(--text-tertiary); margin-top:6px; }
.field.error .input { border-color:var(--danger); }
.field.error .help { color:var(--danger); }
.shake { animation:shake 240ms linear; }
@keyframes shake { 0%,100% { transform:none; } 20% { transform:translateX(-6px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-6px); } 80% { transform:translateX(6px); } }

/* ---------- chips ---------- */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { height:36px; padding:0 14px; border-radius:var(--r-full); background:var(--bg-surface); box-shadow:inset 0 0 0 1px var(--border-default); font-size:15px; font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; color:var(--text-primary); position:relative; overflow:hidden; flex:none; }
.chip i { font-size:16px; }
.chip.on { background:var(--accent-subtle); box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--text-link); }
.chip.on .chk { animation:pop 220ms var(--e-emph); }
.chip.solid.on { background:var(--text-primary); color:var(--bg-canvas); box-shadow:none; }
@keyframes pop { 0% { transform:scale(0); } 70% { transform:scale(1.2); } 100% { transform:scale(1); } }

/* ---------- cards & rows ---------- */
.card { background:var(--bg-surface); border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--border-subtle); padding:16px; }
.card.tap:active { background:var(--bg-sunken); }
.list { background:var(--bg-surface); border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--border-subtle); overflow:hidden; }
.lrow { display:flex; align-items:center; gap:14px; min-height:56px; padding:10px 16px; position:relative; }
.lrow + .lrow::before { content:''; position:absolute; top:0; left:52px; right:0; height:1px; background:var(--border-subtle); }
.lrow.noicon + .lrow.noicon::before { left:16px; }
.lrow > i:first-child { font-size:22px; color:var(--text-secondary); width:22px; }
.lrow .lr-main { flex:1; min-width:0; }
.lrow .lr-title { font-size:15px; font-weight:500; }
.lrow .lr-sub { font-size:13px; color:var(--text-tertiary); margin-top:2px; }
.lrow .lr-end { color:var(--text-tertiary); font-size:14px; display:flex; align-items:center; gap:4px; }
.lrow .lr-end i { font-size:18px; }
.lrow.tap:active { transform:none; background:var(--bg-sunken); }
.list-h { font-size:13px; font-weight:600; color:var(--text-tertiary); margin:24px 4px 8px; }

/* ---------- badges ---------- */
.badge { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:var(--r-xs); font-size:12px; font-weight:600; letter-spacing:.2px; background:var(--accent-subtle); color:var(--text-link); white-space:nowrap; }
.badge.success { background:var(--success-subtle); color:var(--success); }
.badge.warning { background:var(--warning-subtle); color:var(--warning); }
.badge.info { background:var(--info-subtle); color:var(--info); }
.badge.neutral { background:var(--bg-sunken); color:var(--text-secondary); }
.badge.danger { background:var(--danger-subtle); color:var(--danger); }
.overline { font-size:12px; font-weight:700; letter-spacing:.4px; }

/* ---------- switch ---------- */
.switch { width:51px; height:31px; border-radius:16px; background:var(--clay-200); position:relative; flex:none; transition:background var(--d-fast); }
.phone[data-theme="dark"] .switch { background:var(--clay-700); }
.switch::after { content:''; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.2); transition:transform 260ms cubic-bezier(.3,1.4,.5,1); }
.switch.on { background:var(--accent); }
.switch.on::after { transform:translateX(20px); }
.phone[data-platform="android"] .switch { width:52px; height:32px; background:var(--bg-sunken); box-shadow:inset 0 0 0 2px var(--border-strong); }
.phone[data-platform="android"] .switch::after { width:16px; height:16px; top:8px; left:8px; background:var(--border-strong); box-shadow:none; }
.phone[data-platform="android"] .switch.on { background:var(--accent); box-shadow:none; }
.phone[data-platform="android"] .switch.on::after { width:24px; height:24px; top:4px; left:4px; background:#fff; transform:translateX(20px); }

/* ---------- segmented ---------- */
.seg { display:flex; background:var(--bg-sunken); border-radius:var(--r-md); padding:3px; position:relative; }
.seg button { flex:1; height:36px; font-size:15px; font-weight:600; color:var(--text-secondary); border-radius:9px; position:relative; z-index:1; transition:color var(--d-base); }
.seg button.on { color:var(--text-primary); }
.seg .seg-ind { position:absolute; top:3px; bottom:3px; border-radius:9px; background:var(--bg-surface); box-shadow:var(--shadow-raised); transition:transform var(--d-slow) var(--e-emph), width var(--d-slow); }

/* ---------- tab bar ---------- */
.tabbar { position:absolute; left:0; right:0; bottom:0; height:calc(56px + var(--sab)); padding-bottom:var(--sab); background:var(--bg-surface); box-shadow:0 -1px 0 var(--border-subtle); display:flex; z-index:40; transition:transform var(--d-slow) var(--e-standard); }
.tabbar.hidden { transform:translateY(110%); }
.tabbar button { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; font-weight:600; color:var(--text-tertiary); position:relative; letter-spacing:.2px; }
.tabbar button i { font-size:24px; transition:transform var(--d-base); }
.tabbar button.on { color:var(--accent); }
.tabbar button.on i { animation:tabPop 300ms var(--e-emph); }
.tabbar .tab-badge { position:absolute; top:4px; left:calc(50% + 6px); min-width:16px; height:16px; border-radius:8px; background:var(--accent); color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.tabbar .tab-badge.bump { animation:bump 420ms cubic-bezier(.3,1.6,.5,1); }
.phone[data-platform="android"] .tabbar button.on i { background:var(--accent-subtle); border-radius:16px; padding:2px 18px; }
@keyframes tabPop { 0% { transform:scale(.85); } 60% { transform:scale(1.08); } 100% { transform:scale(1); } }
@keyframes bump { 0% { transform:scale(1); } 40% { transform:scale(1.45); } 100% { transform:scale(1); } }

/* ---------- layers: sheet / modal / toast ---------- */
.layer { position:absolute; inset:0; z-index:80; pointer-events:none; }
.layer > * { pointer-events:auto; }
.scrim { position:absolute; inset:0; background:var(--scrim); opacity:0; transition:opacity var(--d-slow) var(--e-standard); }
.scrim.show { opacity:1; }
.sheet { position:absolute; left:0; right:0; bottom:0; max-height:92%; background:var(--bg-surface); border-radius:20px 20px 0 0; box-shadow:var(--shadow-overlay); transform:translateY(100%); transition:transform 380ms var(--e-emph); display:flex; flex-direction:column; }
.sheet.show { transform:none; }
.sheet.dragging { transition:none; }
.sheet .grab { flex:none; height:24px; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; }
.sheet .grab::before { content:''; width:36px; height:4px; border-radius:2px; background:var(--clay-200); }
.phone[data-theme="dark"] .sheet .grab::before { background:var(--clay-700); }
.sheet .sheet-h { padding:4px 20px 12px; display:flex; align-items:center; gap:8px; touch-action:none; }
.sheet .sheet-h .t-tm { flex:1; }
.sheet .sheet-body { overflow-y:auto; padding:0 20px calc(var(--sab) + 20px); scrollbar-width:none; }
.sheet .sheet-body::-webkit-scrollbar { display:none; }
.sheet .sheet-foot { padding:12px 20px calc(var(--sab) + 12px); box-shadow:0 -1px 0 var(--border-subtle); }
.sheet.full { height:92%; }

.dialog-wrap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; }
.popup { width:100%; max-width:320px; background:var(--bg-surface); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-overlay); transform:scale(.9); opacity:0; transition:transform 360ms cubic-bezier(.3,1.3,.5,1), opacity var(--d-base); position:relative; }
.popup.show { transform:none; opacity:1; }
.popup .pop-close { position:absolute; top:8px; right:8px; width:40px; height:40px; border-radius:20px; background:var(--bg-surface); display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:var(--shadow-raised); z-index:2; }
.sysdialog { width:270px; border-radius:14px; background:rgba(242,242,242,.97); color:#000; text-align:center; overflow:hidden; transform:scale(1.1); opacity:0; transition:all 220ms var(--e-standard); }
.sysdialog.show { transform:none; opacity:1; }
.sysdialog .sd-body { padding:20px 16px 16px; font-size:13px; line-height:18px; }
.sysdialog .sd-body b { display:block; font-size:17px; margin-bottom:4px; line-height:22px; }
.sysdialog .sd-btns button { display:block; width:100%; height:44px; border-top:1px solid rgba(60,60,67,.29); color:#007AFF; font-size:17px; }
.sysdialog .sd-btns button.b { font-weight:600; }
.phone[data-platform="android"] .sysdialog { width:300px; border-radius:28px; background:#F3EDF0; text-align:left; padding:24px; }
.phone[data-platform="android"] .sysdialog .sd-body { padding:0 0 20px; font-size:14px; color:#49454F; }
.phone[data-platform="android"] .sysdialog .sd-body b { font-size:22px; font-weight:400; color:#1D1B20; line-height:28px; margin-bottom:12px; }
.phone[data-platform="android"] .sysdialog .sd-btns { display:flex; flex-direction:column; gap:6px; }
.phone[data-platform="android"] .sysdialog .sd-btns button { border:0; height:40px; border-radius:20px; background:#E8DEF8; color:#1D1B20; font-size:14px; font-weight:500; text-align:center; }

.toasts { position:absolute; left:16px; right:16px; bottom:calc(56px + var(--sab) + 16px); z-index:95; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toasts.no-tabs { bottom:calc(var(--sab) + 80px); }
.toast { background:var(--bg-inverse); color:var(--text-inverse); border-radius:var(--r-md); padding:12px 14px; display:flex; align-items:center; gap:10px; font-size:15px; box-shadow:var(--shadow-overlay); pointer-events:auto; animation:toastIn 320ms var(--e-emph) both; }
.toast.out { animation:toastOut 200ms var(--e-exit) both; }
.toast i { font-size:20px; }
.toast .t-act { margin-left:auto; color:var(--pink-300); font-weight:700; font-size:15px; }
.phone[data-theme="dark"] .toast .t-act { color:var(--pink-700); }
@keyframes toastIn { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes toastOut { to { transform:translateY(16px); opacity:0; } }
.check-draw path { stroke-dasharray:24; stroke-dashoffset:24; animation:draw 360ms 120ms var(--e-standard) forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }

/* ---------- stagger entrance ---------- */
.stagger > * { animation:riseSm 420ms var(--e-emph) both; }
.stagger > *:nth-child(1) { animation-delay:40ms; } .stagger > *:nth-child(2) { animation-delay:80ms; } .stagger > *:nth-child(3) { animation-delay:120ms; } .stagger > *:nth-child(4) { animation-delay:160ms; } .stagger > *:nth-child(5) { animation-delay:200ms; } .stagger > *:nth-child(6) { animation-delay:240ms; } .stagger > *:nth-child(7) { animation-delay:280ms; } .stagger > *:nth-child(n+8) { animation-delay:320ms; }
@keyframes riseSm { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.no-anim .stagger > * { animation:none; }

/* ---------- skeleton ---------- */
.sk { background:var(--bg-sunken); border-radius:var(--r-sm); animation:skp 1.2s ease-in-out infinite; }
@keyframes skp { 50% { opacity:.55; } }

/* ---------- images ---------- */
.img { background:var(--bg-sunken) center/cover no-repeat; display:block; }
.r-md { border-radius:var(--r-md); } .r-sm { border-radius:var(--r-sm); } .r-lg { border-radius:var(--r-lg); } .r-full { border-radius:50%; }
.ratio-169 { aspect-ratio:16/9; } .ratio-45 { aspect-ratio:4/5; } .ratio-11 { aspect-ratio:1; }
.avatar { width:40px; height:40px; border-radius:50%; background:var(--bg-sunken) center/cover; flex:none; }
.avatar.s { width:24px; height:24px; } .avatar.l { width:72px; height:72px; }

/* ---------- cycle ring ---------- */
.ring-wrap { position:relative; width:264px; height:264px; margin:8px auto 0; }
.ring-wrap svg { position:absolute; inset:0; overflow:visible; }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.ring-mask-circle { transition:stroke-dashoffset 900ms var(--e-emph); }
.ring-today { transition:transform 700ms cubic-bezier(.3,1.2,.5,1); }
.ripple-ring { animation:ringRipple 900ms var(--e-standard) forwards; transform-origin:center; transform-box:fill-box; }
@keyframes ringRipple { from { opacity:.5; transform:scale(.6); } to { opacity:0; transform:scale(1.8); } }

.day-chip { width:44px; height:64px; border-radius:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; flex:none; scroll-snap-align:center; position:relative; }
.day-chip .dc-d { font-size:12px; font-weight:600; color:var(--text-tertiary); }
.day-chip .dc-n { font-size:17px; font-weight:700; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.day-chip.today { background:var(--bg-surface); box-shadow:inset 0 0 0 1px var(--border-default); }
.day-chip .dc-dot { position:absolute; bottom:5px; width:4px; height:4px; border-radius:2px; background:var(--clay-500); }
.day-chip .dc-dot.new { animation:pop 320ms var(--e-emph); }

/* collapsing today header */
.mini-hdr { position:absolute; top:var(--sat); left:0; right:0; height:52px; display:flex; align-items:center; gap:10px; padding:0 12px 0 20px; background:var(--bg-canvas); box-shadow:0 1px 0 var(--border-subtle); z-index:6; transform:translateY(-12px); opacity:0; pointer-events:none; transition:all var(--d-base) var(--e-standard); }
.mini-hdr.show { transform:none; opacity:1; pointer-events:auto; }

/* ---------- calendar ---------- */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); row-gap:6px; }
.cal-dow { font-size:12px; font-weight:600; color:var(--text-tertiary); text-align:center; height:24px; }
.cal-cell { height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.cal-cell .cn { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-variant-numeric:tabular-nums; position:relative; transition:transform var(--d-fast); }
.cal-cell.out .cn { color:var(--text-tertiary); opacity:.4; }
.cal-cell .cn.period { background:var(--ph-period); color:#fff; font-weight:700; }
.cal-cell .cn.period-pred { box-shadow:inset 0 0 0 2px var(--ph-period); border:0; background:none; outline:2px dashed var(--ph-period); outline-offset:-2px; box-shadow:none; color:var(--text-link); font-weight:600; }
.cal-cell .cn.fertile { background:var(--ph-fert-t); }
.cal-cell .cn.ovu { background:var(--ph-ovu-t); color:var(--ph-ovu); font-weight:700; }
.cal-cell .cn.fertile.pred, .cal-cell .cn.ovu.pred { background:none; outline:2px dashed var(--ph-fert); outline-offset:-2px; }
.cal-cell .cn.today { box-shadow:0 0 0 2px var(--text-primary); }
.cal-cell .cn.sel { transform:scale(1.08); box-shadow:0 0 0 2px var(--accent); }
.cal-cell .cdot { position:absolute; bottom:1px; width:4px; height:4px; border-radius:2px; background:var(--clay-500); }
.cal-cell .odot { position:absolute; bottom:1px; width:4px; height:4px; border-radius:2px; background:var(--ph-ovu); }
.cal-month { animation:calIn 300ms var(--e-emph) both; }
.cal-month.prev { animation-name:calInL; }
@keyframes calIn { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
@keyframes calInL { from { opacity:0; transform:translateX(-24px); } to { opacity:1; transform:none; } }
.legend { display:flex; flex-wrap:wrap; gap:12px 16px; }
.legend span { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary); }
.legend i.sw { width:12px; height:12px; border-radius:6px; display:inline-block; }

/* ---------- article ---------- */
.article-body p { font-family:var(--serif); font-size:18px; line-height:30px; margin:0 0 18px; }
.article-body h2 { font-family:var(--serif); font-size:24px; line-height:30px; font-weight:600; letter-spacing:-.2px; margin:28px 0 12px; }
.article-body blockquote { font-family:var(--serif); font-style:italic; font-size:22px; line-height:32px; margin:24px 0; padding-left:16px; box-shadow:inset 3px 0 0 var(--brand); }
.article-body ul { font-family:var(--serif); font-size:18px; line-height:30px; padding-left:22px; margin:0 0 18px; }
.callout { border-radius:var(--r-md); padding:14px 16px; background:var(--info-subtle); margin:0 0 20px; display:flex; gap:12px; font-size:15px; line-height:22px; }
.callout i { font-size:22px; color:var(--info); flex:none; }
.callout.doc { background:var(--accent-subtle); } .callout.doc i { color:var(--accent); }
.progress-line { position:absolute; left:0; top:0; height:2px; background:var(--brand); width:0; z-index:7; }
.reviewed { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--success); font-weight:600; }

/* heart pop & burst */
.pop-anim { animation:heartPop 420ms cubic-bezier(.3,1.6,.5,1); }
@keyframes heartPop { 0% { transform:scale(1); } 30% { transform:scale(.8); } 60% { transform:scale(1.3); } 100% { transform:scale(1); } }
.burst-dot { position:absolute; width:6px; height:6px; border-radius:3px; pointer-events:none; z-index:99; }

/* ---------- shop ---------- */
.pgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; }
.pcard .pimg { border-radius:var(--r-md); aspect-ratio:4/5; background:var(--clay-50); overflow:hidden; position:relative; }
.phone[data-theme="dark"] .pcard .pimg, .phone[data-theme="dark"] .pimg-bg { background:#2a2421; }
.pimg-bg { background:var(--clay-50); }
.pcard .pimg svg, .pimg-bg svg { width:100%; height:100%; display:block; }
.pcard .add-mini { position:absolute; right:8px; bottom:8px; width:36px; height:36px; border-radius:18px; background:var(--bg-surface); box-shadow:var(--shadow-raised); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--accent); }
.price { font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }
.stepper { display:inline-flex; align-items:center; border-radius:var(--r-full); box-shadow:inset 0 0 0 1px var(--border-default); height:36px; background:var(--bg-surface); }
.stepper button { width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--text-primary); }
.stepper .sv { min-width:24px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; overflow:hidden; height:22px; position:relative; }
.roll-up { animation:rollUp 260ms var(--e-emph); } .roll-down { animation:rollDown 260ms var(--e-emph); }
@keyframes rollUp { from { transform:translateY(100%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes rollDown { from { transform:translateY(-100%); opacity:0; } to { transform:none; opacity:1; } }
.bottom-bar { flex:none; padding:12px 20px calc(var(--sab) + 12px); background:var(--bg-surface); box-shadow:0 -1px 0 var(--border-subtle); display:flex; align-items:center; gap:12px; z-index:5; }
.radio { width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--border-strong); flex:none; position:relative; transition:box-shadow var(--d-fast); }
.radio.on { box-shadow:inset 0 0 0 2px var(--accent); }
.radio.on::after { content:''; position:absolute; inset:5px; border-radius:50%; background:var(--accent); animation:pop 220ms var(--e-emph); }
.pay-logo { width:40px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex:none; letter-spacing:-.2px; }
.voucher-card { display:flex; border-radius:var(--r-md); overflow:hidden; box-shadow:inset 0 0 0 1px var(--border-subtle); background:var(--bg-surface); }
.voucher-card .vc-l { width:84px; background:var(--accent-subtle); color:var(--text-link); display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; font-size:18px; border-right:2px dashed var(--border-default); }
.voucher-card .vc-r { padding:12px 14px; flex:1; }
.stamp { animation:stamp 420ms cubic-bezier(.3,1.5,.5,1); }
@keyframes stamp { 0% { transform:scale(1.25) rotate(-4deg); opacity:.5; } 100% { transform:none; opacity:1; } }
.slide-in { animation:slideIn 320ms var(--e-emph) both; }
@keyframes slideIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.qr { width:220px; height:220px; margin:0 auto; padding:14px; background:#fff; border-radius:16px; position:relative; }
.qr::after { content:''; position:absolute; inset:-4px; border-radius:20px; box-shadow:0 0 0 2px var(--brand); animation:breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity:.25; transform:scale(1.02); } }
.timeline { position:relative; padding-left:28px; }
.timeline .tl-line { position:absolute; left:9px; top:10px; bottom:10px; width:2px; background:var(--border-default); }
.timeline .tl-fill { position:absolute; left:9px; top:10px; width:2px; background:var(--success); height:0; transition:height 900ms var(--e-emph); }
.tl-step { position:relative; padding-bottom:20px; }
.tl-step .tl-dot { position:absolute; left:-24px; top:3px; width:12px; height:12px; border-radius:6px; background:var(--border-default); box-shadow:0 0 0 3px var(--bg-surface); }
.tl-step.done .tl-dot { background:var(--success); }
.tl-step.cur .tl-dot { background:var(--success); animation:curPulse 1.6s ease-in-out infinite; }
@keyframes curPulse { 50% { box-shadow:0 0 0 3px var(--bg-surface), 0 0 0 8px var(--success-subtle); } }

/* ---------- payment success overlay ---------- */
.ps-overlay { position:absolute; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; color:#fff; }
.ps-bg { position:absolute; inset:0; background:var(--pink-600); clip-path:circle(0% at 50% 60%); transition:clip-path 480ms var(--e-emph); }
.ps-overlay.go .ps-bg { clip-path:circle(150% at 50% 60%); }
.ps-inner { position:relative; flex:1; width:100%; display:flex; flex-direction:column; align-items:center; padding:calc(var(--sat) + 72px) 24px 0; text-align:center; }
.ps-check { width:96px; height:96px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; transform:scale(0); }
.ps-overlay.go .ps-check { animation:pop 520ms 420ms var(--e-emph) forwards; }
.ps-check svg path { stroke-dasharray:60; stroke-dashoffset:60; }
.ps-overlay.go .ps-check svg path { animation:draw 420ms 760ms var(--e-standard) forwards; }
.ps-fade { opacity:0; transform:translateY(12px); }
.ps-overlay.go .ps-fade { animation:riseSm 420ms var(--e-emph) forwards; }
.ps-receipt { position:absolute; left:16px; right:16px; bottom:calc(var(--sab) + 16px); background:var(--bg-surface); color:var(--text-primary); border-radius:20px; padding:20px; transform:translateY(130%); transition:transform 520ms var(--e-emph); text-align:left; }
.ps-overlay.receipt .ps-receipt { transform:none; }
.ps-pack { width:84px; margin-top:20px; opacity:0; transform:translateY(30px) scale(.8); }
.ps-overlay.go .ps-pack { animation:packIn 600ms 1000ms cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes packIn { to { opacity:1; transform:none; } }
.particle { position:absolute; border-radius:50%; pointer-events:none; }

/* ---------- onboarding ---------- */
.splash { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--bg-canvas); }
.splash svg .mk { stroke-dasharray:1; stroke-dashoffset:1; animation:draw1 700ms var(--e-standard) forwards; }
.splash svg .mk2 { animation-delay:300ms; }
.splash svg .dot { transform:scale(0); transform-origin:center; transform-box:fill-box; animation:pop 420ms 820ms cubic-bezier(.3,1.6,.5,1) forwards; }
.splash .wm { opacity:0; animation:riseSm 420ms 1000ms var(--e-emph) forwards; }
@keyframes draw1 { to { stroke-dashoffset:0; } }
.dots-ind { display:flex; gap:6px; justify-content:center; }
.dots-ind i { width:6px; height:6px; border-radius:3px; background:var(--border-default); transition:all var(--d-slow) var(--e-emph); font-style:normal; }
.dots-ind i.on { width:22px; background:var(--accent); }
.carousel { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.carousel::-webkit-scrollbar { display:none; }
.carousel > * { flex:0 0 100%; scroll-snap-align:start; }
.otp { display:flex; gap:8px; justify-content:space-between; }
.otp div { width:46px; height:56px; border-radius:var(--r-sm); background:var(--bg-sunken); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; border:2px solid transparent; font-variant-numeric:tabular-nums; }
.otp div.cur { border-color:var(--accent); background:var(--bg-surface); }
.otp div.filled { animation:pop 200ms var(--e-emph); }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:8px 6px; background:var(--bg-sunken); }
.keypad button { height:48px; border-radius:8px; background:var(--bg-surface); font-size:24px; font-weight:500; box-shadow:0 1px 0 var(--border-default); }
.keypad button:active { background:var(--border-subtle); }
.keypad button.k-blank { background:none; box-shadow:none; }
.wheel { height:220px; overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; position:relative; mask-image:linear-gradient(transparent, #000 35%, #000 65%, transparent); }
.wheel::-webkit-scrollbar { display:none; }
.wheel div { height:44px; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; font-size:22px; font-weight:600; color:var(--text-tertiary); font-variant-numeric:tabular-nums; transition:color var(--d-fast), font-size var(--d-fast); }
.wheel div.on { color:var(--text-primary); font-size:28px; }
.wheel-wrap { position:relative; }
.wheel-wrap::before { content:''; position:absolute; left:0; right:0; top:88px; height:44px; border-radius:var(--r-md); background:var(--bg-sunken); }
.big-step { display:flex; align-items:center; justify-content:center; gap:28px; }
.big-step button { width:56px; height:56px; border-radius:28px; box-shadow:inset 0 0 0 1px var(--border-default); background:var(--bg-surface); font-size:24px; display:flex; align-items:center; justify-content:center; }
.big-step .bv { font-size:64px; font-weight:700; letter-spacing:-1.5px; min-width:96px; text-align:center; font-variant-numeric:tabular-nums; }
.progress { height:4px; border-radius:2px; background:var(--bg-sunken); overflow:hidden; }
.progress > i { display:block; height:100%; background:var(--accent); border-radius:2px; transition:width var(--d-slower) var(--e-emph); }
.check-row { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; }
.cbox { width:24px; height:24px; border-radius:6px; box-shadow:inset 0 0 0 2px var(--border-strong); flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; transition:all var(--d-fast); }
.cbox.on { background:var(--accent); box-shadow:none; }
.cbox.on i { animation:pop 220ms var(--e-emph); }
.pin-dots { display:flex; gap:16px; justify-content:center; }
.pin-dots i { width:14px; height:14px; border-radius:7px; box-shadow:inset 0 0 0 2px var(--text-primary); font-style:normal; transition:all var(--d-fast); }
.pin-dots i.on { background:var(--text-primary); }

/* pull to refresh */
.ptr { position:absolute; left:50%; top:calc(var(--sat) + 8px); width:40px; height:40px; margin-left:-20px; border-radius:20px; background:var(--bg-surface); box-shadow:var(--shadow-raised); display:flex; align-items:center; justify-content:center; z-index:8; opacity:0; transform:translateY(-40px); pointer-events:none; }
.ptr svg { width:26px; height:26px; }
.ptr.spin img { animation:spin 800ms linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* offline banner */
.offline { position:absolute; top:var(--sat); left:0; right:0; z-index:50; background:var(--warning-subtle); color:var(--warning); font-size:13px; font-weight:600; padding:8px 20px; display:flex; gap:8px; align-items:center; animation:slideIn 300ms var(--e-emph); }
.offline.online { background:var(--success-subtle); color:var(--success); }

/* hint flash */
.hint-flash [data-go], .hint-flash [data-act], .hint-flash [data-sheet], .hint-flash [data-tab], .hint-flash [data-back], .hint-flash [data-toast] { outline:2px solid rgba(46,120,230,.75); outline-offset:-1px; background-color:rgba(46,120,230,.08); }

.empty { text-align:left; padding:40px 20px; }
.empty .ill { width:160px; height:120px; margin-bottom:16px; }

/* small phone (real device) */
@media (max-width:900px) {
  #presenter { grid-template-columns:1fr; }
  #nav, #notes { display:none; }
}
@media (max-width:520px) {
  html, body { height:auto; min-height:100%; }
  body { background:linear-gradient(to bottom, #FBF7F4 0 50%, #FFFFFF 50% 100%); overscroll-behavior:none; }
  body.dark-shell { background:linear-gradient(to bottom, #161312 0 50%, #201C1A 50% 100%); }
  #presenter, #stage { height:var(--app-h, 100dvh); }
  #stage { align-items:stretch; }
  .device, .device-frame { width:100vw !important; height:var(--app-h, 100dvh) !important; transform:none !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important; background:none !important; }
  .phone { width:100vw; height:var(--app-h, 100dvh); border-radius:0 !important; }
  .phone[data-platform] { --sat:max(env(safe-area-inset-top), 8px); --sab:max(env(safe-area-inset-bottom), 6px); }
  .island, .statusbar, .homebar { display:none; }
  #mobileMenu { display:flex !important; }
}
#mobileMenu { display:none; position:fixed; right:12px; top:50%; z-index:200; width:36px; height:36px; border-radius:18px; background:rgba(30,26,24,.6); color:#fff; align-items:center; justify-content:center; font-size:18px; }
#mobileNav { position:fixed; inset:0; z-index:300; background:#FBF7F4; overflow-y:auto; padding:20px; display:none; }
#mobileNav.show { display:block; }

@media (prefers-reduced-motion:reduce) {
  .phone *, .phone *::before, .phone *::after { animation-duration:1ms !important; animation-delay:0ms !important; transition-duration:1ms !important; }
}

/* real-logo splash reveal */
.logo-reveal { animation:logoReveal 900ms cubic-bezier(.3,1.3,.5,1) both; }
@keyframes logoReveal { 0% { clip-path:circle(0% at 30% 30%); transform:scale(.82); opacity:0; } 35% { opacity:1; } 100% { clip-path:circle(80% at 50% 50%); transform:none; opacity:1; } }

/* ---------- Easyday icon set (packages/icons) ---------- */
.ed-i { display:inline-flex; width:1em; height:1em; line-height:1; flex:none; vertical-align:-.125em; --ed-dot:var(--brand); }
.ed-i svg { width:100%; height:100%; display:block; overflow:visible; }
/* white icons on pink: the dot follows the icon color, a pink dot would vanish */
.btn-primary .ed-i, .btn-danger .ed-i, .add-mini .ed-i, .badge .ed-i, .toast .ed-i, .ps-overlay .ed-i { --ed-dot:currentColor; }
/* selected tab: whole icon pink, dot white */
.tabbar button.on .ed-i { color:var(--accent); --ed-dot:#fff; }
.phone[data-platform="android"] .tabbar button.on .ed-i { width:auto; height:auto; }
.phone[data-platform="android"] .tabbar button.on .ed-i svg { width:24px; height:24px; }
.chip.on .ed-i { --ed-dot:currentColor; }