/* Daylight v2 (2026-10-23). Same family as NV OS: dark top, white sheet, pills,
   icon-only bottom bar. Each world keeps its colour: New Visions orange, CILOVIA
   forest, Me sunrise amber. */
:root {
  color-scheme: dark;
  --ground: #0b0b0d;
  --hero: #121215;
  --hero-hi: #26262b;
  --on-dark: #fff;
  --on-dark-2: #a9a9af;
  --on-dark-3: #76767c;
  --glass: rgba(255, 255, 255, .08);
  --glass-2: rgba(255, 255, 255, .16);
  --sheet: #fff;
  --ink: #1c1c1e;
  --ink-2: #4a4a4e;
  --ink-3: #8e8e93;
  --soft: #f3f3f6;
  --hair: #e8e8ec;
  --sun: #ffb340;
  --sun-deep: #e8890c;
  --sun-soft: #fff3df;
  --nv: #ff6b35;
  --nv-soft: #fff0ea;
  --cil: #2f8f5b;
  --cil-deep: #123d2a;
  --cil-soft: #e6f3eb;
  --bad: #d9432b;
  --good: #2e9b5b;
  --r-lg: 26px;
  --r-md: 18px;
  --font: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--on-dark); font-family: var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body { min-height: 100dvh; overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.chev { width: 18px; height: 18px; color: #c4c4c9; }
.pill svg, .back svg { width: 19px; height: 19px; }
.mini svg, .x svg { width: 16px; height: 16px; }
.addt .plus svg { width: 16px; height: 16px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.boot { min-height: 100dvh; display: grid; place-items: center; }
.sun-mark { width: 44px; height: 44px; border-radius: 28%; background: url(/assets/icon-192.png?v=2) center/cover; animation: rise 1.6s ease-in-out infinite alternate; }
@keyframes rise { from { transform: translateY(3px); opacity: .7 } to { transform: translateY(-3px); opacity: 1 } }

/* ---------- shell ---------- */
.shell { max-width: 640px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.hero { padding: calc(14px + env(safe-area-inset-top)) 20px 26px; background: radial-gradient(120% 90% at 85% -10%, rgba(255, 179, 64, .22), transparent 55%), linear-gradient(180deg, var(--hero-hi), var(--hero) 70%); }
.hero.nv { background: radial-gradient(120% 90% at 85% -10%, rgba(255, 107, 53, .3), transparent 55%), linear-gradient(180deg, #2a221f, #121215 70%); }
.hero.cil { background: radial-gradient(120% 90% at 85% -10%, rgba(76, 190, 125, .28), transparent 55%), linear-gradient(180deg, #1b2a22, #0f1713 70%); }
.htop { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: auto; min-width: 0; }
.brand .sun-mark { width: 30px; height: 30px; animation: none; }
.brand b { font-size: 17px; letter-spacing: -.01em; }
.pill { height: 40px; border-radius: 20px; border: 0; background: var(--glass); color: var(--on-dark); padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pill:active { transform: scale(.97); }
.pill.icon { width: 40px; padding: 0; justify-content: center; }
.pill.light { background: var(--on-dark); color: var(--ink); }
.pill.sun { background: var(--sun); color: #1a1205; }
.back { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--glass); color: var(--on-dark); display: grid; place-items: center; text-decoration: none; }
.htitle { font-size: 31px; line-height: 1.12; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.hsub { color: var(--on-dark-2); font-size: 15px; margin-top: 8px; line-height: 1.45; }
.hsub b { color: var(--on-dark); font-weight: 600; }

/* habits in the hero */
.habits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.habit { border: 0; background: var(--glass); border-radius: 18px; padding: 10px 2px 9px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--on-dark-2); min-height: 76px; position: relative; transition: background .15s, color .15s; }
.habit svg { width: 22px; height: 22px; }
.habit span { font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; padding: 0 2px; }
.habit.on { background: var(--sun); color: #1a1205; }
.habit .x2 { position: absolute; top: 5px; right: 6px; font-size: 10px; font-weight: 800; background: #1a1205; color: var(--sun); border-radius: 8px; padding: 1px 5px; }
.habit:active { transform: scale(.95); }
.hweek { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; color: var(--on-dark-2); font-size: 13px; }
.hweek b { color: var(--on-dark); }
.dots { display: flex; gap: 5px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--glass-2); }
.dots i.on { background: var(--sun); }
.dots i.part { background: linear-gradient(90deg, var(--sun) 50%, var(--glass-2) 50%); }

/* ---------- white sheet ---------- */
.sheet { flex: 1; background: var(--sheet); color: var(--ink); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 22px 16px calc(110px + env(safe-area-inset-bottom)); }
.sec { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 4px 12px; }
.sec:first-child { margin-top: 2px; }
.sec h2 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.sec a, .sec button.link { font-size: 14px; color: var(--ink-3); text-decoration: none; border: 0; background: none; padding: 4px; font-weight: 600; }

/* business cards */
.biz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bcard { border: 0; text-align: left; border-radius: var(--r-md); padding: 15px 15px 13px; color: #fff; min-height: 176px; display: flex; flex-direction: column; position: relative; overflow: hidden; text-decoration: none; }
.bcard.nv { background: linear-gradient(160deg, #26201d, #121214); }
.bcard.cil { background: linear-gradient(160deg, #1d3a2b, #0f1f17); }
.bcard .bh { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.bcard .logo { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.bcard.nv .logo { background: var(--nv); color: #160c06; }
.bcard.cil .logo { background: #7cd69b; color: #0d2318; }
.bcard .big { font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: auto; padding-top: 18px; }
.bcard .lbl { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 4px; }
.bcard .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.6); }
.bcard .foot span:first-child { white-space: nowrap; }
.bars { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.bars i { width: 5px; border-radius: 2px; background: rgba(255,255,255,.2); min-height: 3px; }
.bcard.nv .bars i.now { background: var(--nv); }
.bcard.cil .bars i.now { background: #7cd69b; }
.bcard .err { font-size: 13px; color: rgba(255,255,255,.7); margin-top: auto; }
.bcard:active { transform: scale(.98); }

/* light cards */
.card { background: var(--soft); border-radius: var(--r-md); padding: 6px 4px; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 12px; min-height: 54px; border: 0; background: none; width: 100%; text-align: left; color: var(--ink); text-decoration: none; }
.row + .row { border-top: 1px solid var(--hair); }
.row .ico { width: 36px; height: 36px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex-shrink: 0; color: var(--ink); }
.row .ico svg { width: 19px; height: 19px; }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.row .t small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.row .end { font-size: 13px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }

/* ---------- task lists (NV OS Work tab) ---------- */
.tabs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.tab2 { border: 1px solid var(--hair); background: #fff; border-radius: var(--r-md); padding: 12px 14px; text-align: left; color: var(--ink); }
.tab2 small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tab2 b { display: block; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.03em; }
.tab2 span { font-size: 13px; color: var(--ink-3); }
.tab2[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab2[aria-selected="true"] small, .tab2[aria-selected="true"] span { color: rgba(255,255,255,.65); }
.w-nv .tab2[aria-selected="true"] b { color: var(--nv); }
.w-cil .tab2[aria-selected="true"] { background: var(--cil-deep); border-color: var(--cil-deep); }
.w-me .tab2[aria-selected="true"] b { color: var(--sun); }
.tlist { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-md); overflow: hidden; }
.addt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--hair); }
.addt .plus { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); flex-shrink: 0; }
.w-nv .addt .plus { background: var(--nv-soft); color: var(--nv); }
.w-cil .addt .plus { background: var(--cil-soft); color: var(--cil); }
.w-me .addt .plus { background: var(--sun-soft); color: var(--sun-deep); }
.addt input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; min-height: 42px; color: var(--ink); }
.addt input::placeholder { color: var(--ink-3); }
.flag { border: 1px solid var(--hair); background: none; border-radius: 99px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.flag[aria-pressed="true"] { background: #fdecea; border-color: #f5c7bf; color: var(--bad); }
.trow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 56px; }
.trow + .trow { border-top: 1px solid var(--hair); }
.ck { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #d1d1d6; background: none; flex-shrink: 0; display: grid; place-items: center; padding: 0; color: #fff; transition: background .15s, border-color .15s; }
.ck svg { width: 15px; height: 15px; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .2s ease .05s; }
.trow.done .ck svg { stroke-dashoffset: 0; }
.trow.done .ck { background: var(--ink); border-color: var(--ink); }
.w-nv .trow.done .ck { background: var(--nv); border-color: var(--nv); color: #160c06; }
.w-cil .trow.done .ck { background: var(--cil); border-color: var(--cil); }
.w-me .trow.done .ck { background: var(--sun); border-color: var(--sun); color: #1a1205; }
.trow .tt { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.35; overflow-wrap: anywhere; border: 0; background: none; text-align: left; padding: 4px 0; color: var(--ink); }
.trow.done .tt { color: var(--ink-3); text-decoration: line-through; }
.trow .meta { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; text-decoration: none; }
.trow .late { color: var(--bad); font-weight: 600; }
.urg { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex-shrink: 0; }
.mini { border: 0; background: var(--soft); border-radius: 99px; height: 30px; padding: 0 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); flex-shrink: 0; }
.donefold summary { list-style: none; padding: 13px 14px; font-size: 14px; color: var(--ink-3); font-weight: 600; border-top: 1px solid var(--hair); cursor: pointer; }
.donefold summary::-webkit-details-marker { display: none; }
.empty { padding: 22px 14px; text-align: center; color: var(--ink-3); font-size: 14.5px; }
.week { margin-top: 12px; background: var(--soft); border-radius: var(--r-md); padding: 14px 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.week small { display: block; color: var(--ink-3); font-size: 13px; }
.week b { font-size: 28px; letter-spacing: -.03em; }
.wbars { display: flex; gap: 7px; align-items: flex-end; height: 62px; }
.wbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; width: 20px; height: 100%; font-size: 11px; color: var(--ink-3); }
.wbar em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--ink-2); min-height: 12px; }
.wbar i { width: 100%; border-radius: 5px; background: #dcdce1; }
.w-nv .wbar.now i { background: var(--nv); }
.w-cil .wbar.now i { background: var(--cil); }
.w-me .wbar.now i, .wbar.now i { background: var(--sun); }
.openos { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; }

/* habit history (Me) */
.hgrid { background: var(--soft); border-radius: var(--r-md); padding: 6px 14px; }
.hline { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.hline + .hline { border-top: 1px solid var(--hair); }
.hline .name { width: 96px; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.hline .cells { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; flex: 1; }
.hline .cells i { aspect-ratio: 1; border-radius: 4px; background: #dedee3; }
.hline .cells i.on { background: var(--sun); }
.hline .cells i.two { background: var(--sun-deep); }
.hline .cells i.today { box-shadow: 0 0 0 2px var(--ink) inset; }
.hline .streak { width: 44px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* calendar */
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day { border: 0; background: var(--glass); color: var(--on-dark-2); border-radius: 16px; padding: 9px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.day small { font-size: 11px; font-weight: 600; }
.day b { font-size: 18px; color: var(--on-dark); }
.day i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.day i.has { background: var(--sun); }
.day[aria-pressed="true"] { background: var(--on-dark); color: var(--ink-3); }
.day[aria-pressed="true"] b { color: var(--ink); }
.evt { display: flex; gap: 12px; align-items: center; padding: 12px; }
.evt + .evt { border-top: 1px solid var(--hair); }
.evt .tm { width: 54px; font-size: 14px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.evt .tm small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.evt .bar { width: 4px; align-self: stretch; border-radius: 4px; background: var(--sun); }
.evt .t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }

/* forms */
.form { display: grid; gap: 10px; background: var(--soft); border-radius: var(--r-md); padding: 14px; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.form input, .form select, .form textarea { border: 1px solid var(--hair); background: #fff; border-radius: 12px; min-height: 46px; padding: 0 12px; font-size: 16px; color: var(--ink); width: 100%; }
.form textarea { padding: 12px; min-height: 90px; resize: vertical; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn { border: 0; border-radius: 14px; min-height: 48px; padding: 0 18px; font-size: 15px; font-weight: 700; background: var(--ink); color: #fff; }
.btn.sun { background: var(--sun); color: #1a1205; }
.btn.ghost { background: var(--soft); color: var(--ink); }
.btn:disabled { opacity: .5; }

/* bottom nav: icons only */
.nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; display: flex; gap: 6px; padding: 6px; border-radius: 30px; background: rgba(28, 28, 31, .92); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.nav a { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #9a9aa0; text-decoration: none; }
.nav a svg { width: 22px; height: 22px; }
.nav a[aria-current="page"] { background: var(--sun); color: #1a1205; }
.nav a.nvi[aria-current="page"] { background: var(--nv); color: #160c06; }
.nav a.cili[aria-current="page"] { background: #7cd69b; color: #0d2318; }
.nav .talk { background: #fff; color: var(--ink); }

/* talk sheet */
dialog.sheetd { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 640px; background: var(--sheet); color: var(--ink); border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92dvh; }
dialog.sheetd::backdrop { background: rgba(0,0,0,.55); }
dialog.sheetd[open] { animation: up .22s cubic-bezier(.2,.8,.2,1); }
@keyframes up { from { transform: translateY(40px); opacity: .4 } to { transform: none; opacity: 1 } }
.sh { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 6px; }
.sh b { font-size: 19px; }
.sb { padding: 8px 18px calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
.x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft); display: grid; place-items: center; color: var(--ink); }
.mic { width: 96px; height: 96px; border-radius: 50%; border: 0; margin: 6px auto 0; display: grid; place-items: center; background: var(--ink); color: #fff; }
.mic svg { width: 36px; height: 36px; }
.mic.rec { background: var(--bad); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(217,67,43,.15) } }
.center { text-align: center; color: var(--ink-3); font-size: 14px; }
.reply { background: var(--soft); border-radius: var(--r-md); padding: 14px; font-size: 15px; line-height: 1.5; }
.reply small { display: block; color: var(--ink-3); font-size: 12.5px; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { border-radius: 99px; padding: 6px 11px; font-size: 13px; font-weight: 600; background: #fff; border: 1px solid var(--hair); }

/* history */
.search { width: 100%; border: 1px solid var(--hair); background: var(--soft); border-radius: 14px; min-height: 46px; padding: 0 14px; font-size: 16px; color: var(--ink); margin-bottom: 12px; }
.note { padding: 14px 4px; }
.note + .note { border-top: 1px solid var(--hair); }
.note time { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.note p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.note p.ai { color: var(--ink-2); padding-left: 10px; border-left: 3px solid var(--sun); }
.note audio { width: 100%; margin-top: 8px; height: 36px; }

/* login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(90% 60% at 50% 0%, rgba(255,179,64,.22), transparent 60%), var(--ground); }
.login form { width: 100%; max-width: 340px; display: grid; gap: 14px; text-align: center; }
.login .sun-mark { margin: 0 auto 6px; width: 56px; height: 56px; }
.login h1 { margin: 0; font-size: 30px; letter-spacing: -.03em; }
.login p { margin: 0; color: var(--on-dark-2); font-size: 15px; }
.login input { text-align: center; letter-spacing: .5em; font-size: 26px; font-weight: 700; height: 62px; border-radius: 18px; border: 1px solid var(--glass-2); background: var(--glass); color: #fff; outline: 0; }
.login input:focus { border-color: var(--sun); }
.login .err { color: #ff917c; font-size: 14px; min-height: 20px; }

#toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60; background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 14px; font-size: 14px; font-weight: 600; transition: .2s; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--bad); }

@media (min-width: 900px) {
  .shell { max-width: 1080px; display: grid; grid-template-columns: 380px 1fr; align-items: start; gap: 0; padding: 24px; }
  .hero { position: sticky; top: 24px; border-radius: var(--r-lg); min-height: calc(100dvh - 48px); padding-top: 22px; }
  .sheet { border-radius: var(--r-lg); margin-left: 20px; min-height: calc(100dvh - 48px); padding: 26px 26px 110px; }
}
@media (max-width: 370px) {
  .htitle { font-size: 27px; }
  .habits { gap: 5px; }
  .habit span { font-size: 10px; }
  .bcard .big { font-size: 34px; }
  .nav a { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- game (2026-10-23) ---------- */
.scorebar { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: 18px; background: var(--glass); text-decoration: none; color: var(--on-dark); }
.scorebar .sc { flex: 1; min-width: 0; }
.scorebar .sc b { display: block; font-size: 14.5px; }
.scorebar .sc small { display: block; font-size: 12.5px; color: var(--on-dark-2); margin-top: 2px; }
.ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: conic-gradient(var(--sun) calc(var(--p) * 1%), rgba(255,255,255,.14) 0); position: relative; }
.ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--hero); }
.ring b { position: relative; font-size: 14px; }
.ring.big { width: 78px; height: 78px; }
.ring.big::before { inset: 7px; }
.ring.big b { font-size: 26px; }
.lvl { display: flex; align-items: center; gap: 16px; }
.lvl small { color: var(--sun); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.lvl .hsub { margin-top: 4px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }
.stats div { background: var(--glass); border-radius: 16px; padding: 10px 6px; text-align: center; }
.stats b { display: block; font-size: 20px; }
.stats small { display: block; font-size: 11px; color: var(--on-dark-2); margin-top: 2px; line-height: 1.2; }
.why { display: block; text-decoration: none; color: #fff; background: linear-gradient(135deg, #2b1d08, #1a1206); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 4px; border: 1px solid rgba(255,179,64,.25); }
.why small { color: var(--sun); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.why p { margin: 6px 0 0; font-size: 16.5px; line-height: 1.45; font-weight: 600; }
.muted { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.steps { display: flex; gap: 5px; margin-bottom: 18px; }
.steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--glass-2); }
.steps i.on { background: var(--sun); }
.chips.big { gap: 8px; }
.chips.big .chip { padding: 12px 16px; font-size: 15px; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chart { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 130px; background: var(--soft); border-radius: var(--r-md); padding: 14px 12px 26px; }
.chart .goal { position: absolute; left: 12px; right: 12px; border-top: 2px dashed #c9c9cf; z-index: 1; pointer-events: none; }
.chart .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.chart .col i { width: 100%; border-radius: 5px; background: #d6d6dc; }
.chart .col.good i { background: var(--sun); }
.chart .col.now i { box-shadow: 0 0 0 2px var(--ink); }
.chart .col span { position: absolute; bottom: -20px; font-size: 11px; color: var(--ink-3); }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.badge { background: var(--soft); border-radius: 16px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--ink-3); font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.badge svg { width: 24px; height: 24px; }
.badge.got { background: var(--sun-soft); color: #7a4a00; }
.badge.got svg { color: var(--sun-deep); }
button.row { font: inherit; cursor: pointer; }
@media (max-width: 370px) { .badges { grid-template-columns: repeat(3, 1fr); } .stats b { font-size: 17px; } }

/* ---------- v2.1: one task page, camera, simpler calendar (2026-10-23) ---------- */
.nav button.talk { width: 56px; height: 48px; border-radius: 24px; border: 0; display: grid; place-items: center; background: var(--sun); color: #1a1205; }
.nav button.talk svg { width: 24px; height: 24px; }
.nav a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; }
.bline { display: flex; align-items: center; gap: 12px; padding: 14px 12px; text-decoration: none; color: var(--ink); }
.bline + .bline { border-top: 1px solid var(--hair); }
.bline .dot, .grp h3 .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.nv .dot { background: var(--nv); } .cil .dot { background: var(--cil); } .me .dot { background: var(--sun); }
.bline .t { flex: 1; min-width: 0; }
.bline .t b { display: block; font-size: 15.5px; }
.bline .t small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.prog { width: 56px; height: 6px; border-radius: 6px; background: #e2e2e7; overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 6px; }
.bline.nv .prog i { background: var(--nv); } .bline.cil .prog i { background: var(--cil); } .bline.me .prog i { background: var(--sun); }
.tm2 { font-weight: 700; font-size: 14px; width: 48px; flex-shrink: 0; }
.more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; }
.more a, .more button { border: 0; background: var(--soft); border-radius: 16px; padding: 12px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: none; font-family: inherit; }
.seg { display: inline-flex; margin-top: 18px; background: var(--glass); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: none; color: var(--on-dark-2); font-weight: 700; font-size: 14px; height: 36px; padding: 0 18px; border-radius: 10px; }
.seg button[aria-selected="true"] { background: #fff; color: var(--ink); }
.filters { display: flex; gap: 6px; overflow-x: auto; margin: -4px -2px 12px; padding: 2px; scrollbar-width: none; }
.fchip { border: 1px solid var(--hair); background: #fff; border-radius: 99px; height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.fchip em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.fchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fchip[aria-pressed="true"] em { color: rgba(255,255,255,.7); }
.addt.big { display: block; background: var(--soft); border: 0; border-radius: var(--r-md); padding: 6px 12px 10px; margin-bottom: 16px; }
.addt.big input { width: 100%; min-height: 46px; }
.addrow { display: flex; align-items: center; gap: 6px; }
.pick { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pk { border: 1px solid var(--hair); background: #fff; border-radius: 99px; height: 32px; padding: 0 12px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; flex-shrink: 0; }
.pk.nv[aria-pressed="true"] { background: var(--nv); border-color: var(--nv); color: #160c06; }
.pk.cil[aria-pressed="true"] { background: var(--cil); border-color: var(--cil); color: #fff; }
.pk.me[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: #1a1205; }
.addt.big .flag { width: 32px; padding: 0; font-weight: 800; }
.addbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.grp { margin-bottom: 14px; }
.grp h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin: 0 4px 6px; }
.grp h3 a { margin-left: auto; color: var(--ink-3); display: grid; place-items: center; width: 30px; height: 30px; }
.grp h3 a svg { width: 16px; height: 16px; }
.grp .trow { background: #fff; border: 1px solid var(--hair); border-radius: 16px; margin-bottom: 6px; }
.grp .trow + .trow { border-top: 1px solid var(--hair); }
.trow.nv.done .ck { background: var(--nv); border-color: var(--nv); color: #160c06; }
.trow.cil.done .ck { background: var(--cil); border-color: var(--cil); }
.trow.me.done .ck { background: var(--sun); border-color: var(--sun); color: #1a1205; }
.trow .urg { display: inline-block; vertical-align: middle; margin-right: 7px; }
.donefold { background: var(--soft); border-radius: var(--r-md); margin-top: 10px; }
.donefold summary { border-top: 0; }
.donefold .trow { border-top: 1px solid var(--hair); }
.empty.big { padding: 40px 14px; }
.daypick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.daypick button { border: 1px solid var(--hair); background: #fff; border-radius: 12px; padding: 6px 0; font-size: 11px; font-weight: 600; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.daypick button b { font-size: 16px; color: var(--ink); }
.daypick button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: rgba(255,255,255,.7); }
.daypick button[aria-pressed="true"] b { color: #fff; }
.form > input { border: 1px solid var(--hair); background: #fff; border-radius: 12px; min-height: 48px; padding: 0 12px; font-size: 16px; color: var(--ink); width: 100%; }
.free { margin: 0 4px; color: var(--ink-3); font-size: 14px; }
.scanning { display: grid; place-items: center; gap: 12px; padding: 30px 0; color: var(--ink-3); }
.scanlist { display: grid; gap: 6px; max-height: 56dvh; overflow-y: auto; }
.srow { display: flex; align-items: center; gap: 10px; background: var(--soft); border-radius: 14px; padding: 8px 10px; }
.srow.off .st { color: var(--ink-3); text-decoration: line-through; }
.srow .ck.on { background: var(--ink); border-color: var(--ink); }
.srow .ck.on svg { stroke-dashoffset: 0; }
.srow .st { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.srow .st small { display: block; font-size: 12px; color: var(--ink-3); text-decoration: none; }

/* logos + past days (2026-10-24) */
.blogo { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; object-fit: cover; display: inline-block; vertical-align: middle; }
.blogo.me { background: url(/assets/icon-192.png?v=2) center/cover; }
.grp h3 .blogo { width: 22px; height: 22px; border-radius: 6px; }
.fchip .blogo, .pk .blogo { width: 18px; height: 18px; border-radius: 5px; margin-left: -6px; }
.pk { display: inline-flex; align-items: center; gap: 6px; }
.pk.nv[aria-pressed="true"] .blogo, .pk.cil[aria-pressed="true"] .blogo { box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.dayswitch { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.dayswitch b { font-size: 15px; margin-right: auto; }
.dayswitch .pill:disabled { opacity: .3; }
.dayswitch .flip svg { transform: scaleX(-1); }
.dayswitch .pill:not(.icon) { height: 34px; font-size: 13px; }
.habits.past .habit.on { background: #ffc978; }
.dayswitch + .habits { margin-top: 10px; }