:root {
  --bg: #07040F; --accent: #7B2FF7; --accent-ink: #fff; --water: #38E8FF; --glow1: rgba(123,47,247,.2); --glow2: rgba(0,198,255,.11); --glow3: rgba(46,242,176,.08); --bar: rgba(14,12,22,.74); --sheet: rgba(30,26,42,.94);
  --ink: #fff; --muted: #8e8e93; --dim: #636366; --hair: rgba(255,255,255,0.09);
  --glass: rgba(28,28,30,0.62); --field: rgba(118,118,128,0.24);
  --green: #30D158; --cyan: #64D2FF; --yellow: #FFD60A; --purple: #BF5AF2; --blue: #0A84FF; --orange: #FF9F0A; --pink: #FF6482; --red: #FF375F;
  --ease: cubic-bezier(.2,.8,.2,1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body {
  min-height: 100dvh;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(10,132,255,0.16), transparent 60%),
    radial-gradient(700px 500px at 110% 30%, rgba(191,90,242,0.12), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(255,159,10,0.08), transparent 60%),
    #000;
  background-attachment: fixed;
}
button, input, select, textarea { font-family: var(--font); }
.app { padding: env(safe-area-inset-top) 0 calc(92px + env(safe-area-inset-bottom)); }
.view { max-width: 760px; margin: 0 auto; padding: 18px 16px 28px; animation: fadeIn .45s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.large-title { font-size: 34px; font-weight: 700; letter-spacing: -0.025em; margin: 8px 4px 2px; }
.subtitle { color: var(--muted); font-size: 15px; margin: 0 4px 8px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.center { text-align: center; }
.hero-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; }
.muted { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.big { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; }
.face { max-width: 560px; margin: 4px auto 0; }
.face svg { width: 100%; height: auto; display: block; }
.ring { transition: stroke-dasharray .9s var(--ease), opacity .8s var(--ease); }
.rot { transition: transform .9s var(--ease); }
.motto { text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.5; max-width: 520px; margin: 2px auto 0; opacity: .92; }
.glass, .card, .tile {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--hair); border-radius: 24px;
}
.card { padding: 18px; margin-top: 12px; }
.card h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; }
.tile { padding: 16px 18px; border-radius: 22px; min-width: 0; }
.tile .label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tile .value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 12px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill {
  border: 0; border-radius: 999px; padding: 10px 17px; font-size: 15px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,0.12); color: var(--ink); transition: background .25s var(--ease), transform .15s var(--ease);
}
.pill:active { transform: scale(.96); }
.pill.fill { color: #000; }
.pill.green.fill { background: var(--green); } .pill.blue.fill { background: var(--accent); color: var(--accent-ink); }
.pill.orange.fill { background: var(--orange); } .pill.yellow.fill { background: var(--yellow); }
.pill.on { background: #fff; color: #000; }
.field {
  width: 100%; background: var(--field); color: var(--ink); border: 0; border-radius: 12px; padding: 11px 13px; font-size: 16px; outline: none;
  transition: box-shadow .2s var(--ease);
}
.field:focus { box-shadow: 0 0 0 2px var(--accent); }
textarea.field { resize: vertical; line-height: 1.45; }
label.lbl { display: block; color: var(--muted); font-size: 13px; margin-top: 12px; }
label.lbl .field { margin-top: 6px; }
.check {
  display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 16px; padding: 13px 14px; margin-top: 8px;
  background: rgba(255,255,255,0.05); color: var(--ink); font-size: 16px; text-align: left; cursor: pointer; transition: background .3s var(--ease);
}
.check .box { width: 26px; height: 26px; border-radius: 13px; border: 2px solid var(--dim); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #000; font-weight: 800; transition: all .3s var(--ease); }
.check.on { background: rgba(48,209,88,0.16); }
.check.on .box { background: var(--green); border-color: var(--green); }
.stats4 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stats4 .n { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.person { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(255,255,255,0.04); border-radius: 16px; padding: 10px 12px; margin-top: 8px; }
.dot { width: 10px; height: 10px; border-radius: 5px; flex: 0 0 auto; transition: all .4s var(--ease); }
.list { max-height: 300px; overflow-y: auto; }
.seg { display: inline-flex; background: rgba(118,118,128,0.24); border-radius: 10px; padding: 2px; }
.seg button { border: 0; background: transparent; color: var(--ink); padding: 7px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .25s var(--ease); }
.seg button.on { background: rgba(255,255,255,0.22); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { padding: 9px 6px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
td.r { text-align: right; font-variant-numeric: tabular-nums; }
ol, ul { padding-left: 20px; margin: 0; } li { margin: 6px 0; line-height: 1.45; }
a { color: var(--cyan); text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.chip { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip b { color: var(--ink); font-weight: 600; }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 12px; white-space: pre-wrap; word-break: break-word; }
.bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 6px; }
.bar > div { height: 100%; border-radius: 4px; transition: width .9s var(--ease); }
details.card summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after { content: "＋"; float: right; color: var(--muted); }
details.card[open] summary::after { content: "－"; }
details.card[open] summary { margin-bottom: 10px; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around;
  padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
  background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(26px); backdrop-filter: saturate(180%) blur(26px);
  border-top: 1px solid var(--hair);
}
.tab { flex: 1; max-width: 130px; background: none; border: 0; color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; cursor: pointer; padding: 4px 0; transition: color .25s var(--ease); }
.tab svg { width: 26px; height: 26px; }
.tab.on { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); opacity: 0; background: rgba(44,44,46,.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 10px 16px; border-radius: 14px; font-size: 14px; transition: all .35s var(--ease); pointer-events: none; z-index: 30; }
.toast.show { opacity: 1; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .ring, .rot, .view, .bar > div { transition: none !important; animation: none !important; } }
.brand { display: none; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.meal { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.tracker { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.tracker:last-child { border-bottom: 0; }
.tracker .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tracker .name { font-size: 16px; font-weight: 600; }
.tracker .val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.now-side { min-width: 0; }
@media (min-width: 900px) {
  .app { padding: 24px 0 40px 252px; }
  .tabbar { top: 0; bottom: 0; right: auto; width: 236px; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 28px 14px; border-top: 0; border-right: 1px solid var(--hair); }
  .brand { display: block; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; padding: 0 12px 6px; }
  .brand-sub { display: block; color: var(--muted); font-size: 12px; padding: 0 12px 20px; }
  .tab { flex: none; max-width: none; flex-direction: row; gap: 12px; font-size: 15px; padding: 10px 12px; border-radius: 12px; justify-content: flex-start; }
  .tab.on { background: rgba(255,255,255,0.1); }
  .tab svg { width: 22px; height: 22px; }
  .view { max-width: 1080px; padding: 8px 32px 32px; }
  .now-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 28px; align-items: start; }
  .now-side .tiles { margin-top: 0; }
  .toast { bottom: 32px; margin-left: 118px; }
}
@media (max-width: 899px) { .brand-sub { display: none; } }

/* ---- tappable rings ---- */
.tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tap:hover { filter: brightness(1.15); }
/* ---- 7 tabs on iPhone: scroll sideways, no "More" maze ---- */
@media (max-width: 899px) {
  .tabbar { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabbar::-webkit-scrollbar { display: none; }
  .tab { flex: 1 0 64px; min-width: 64px; }
}
/* ---- bottom sheet (tap a ring to log) ---- */
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0); pointer-events: none; transition: background .3s var(--ease); display: flex; align-items: flex-end; justify-content: center; }
.sheet.open { background: rgba(0,0,0,.55); pointer-events: auto; }
.sheet-body { width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto; background: var(--sheet); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  border-radius: 22px 22px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .38s var(--ease); border: 1px solid var(--hair); border-bottom: 0; }
.sheet-body::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px; background: #48484a; margin: 0 auto 12px; }
.sheet.open .sheet-body { transform: none; }
.sheet-body .card { margin-left: 0; margin-right: 0; }
@media (min-width: 900px) { .sheet { align-items: center; padding-left: 236px; } .sheet-body { border-radius: 22px; border-bottom: 1px solid var(--hair); padding-bottom: 22px; } }
/* ---- black sky with faint stars ---- */
body { background: var(--bg); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 9%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 38% 64%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 52%, #cfe3ff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 86%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 58% 32%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 88%, #ffe9c4 50%, transparent 51%), radial-gradient(1px 1px at 5% 48%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 4%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 66% 76%, #fff 50%, transparent 51%);
  background-size: 420px 420px, 380px 380px, 520px 520px, 460px 460px, 340px 340px, 600px 600px, 500px 500px, 300px 300px, 440px 440px, 560px 560px; }
.face svg text { pointer-events: none; }
.sheet:not(.open) { visibility: hidden; transition: background .3s var(--ease), visibility 0s linear .38s; }
@media (min-width: 900px) { .sheet-body { transform: translateY(24px) scale(.97); opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease); } .sheet.open .sheet-body { opacity: 1; } }

/* ===== Round 4: home, calm, minimal ===== */
body { background: radial-gradient(900px 520px at 50% -12%, var(--glow1), transparent 65%), radial-gradient(700px 520px at 105% 35%, var(--glow3), transparent 62%), radial-gradient(700px 500px at 50% 115%, var(--glow2), transparent 60%), var(--bg); background-attachment: fixed; transition: background-color .5s var(--ease); }
.topbar { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 25; display: flex; gap: 8px; }
.topbtn { width: 38px; height: 38px; border-radius: 19px; border: 1px solid var(--hair); background: rgba(28,28,30,.6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; transition: color .25s var(--ease), background .25s var(--ease); }
.topbtn svg { width: 19px; height: 19px; }
.topbtn.on, .topbtn:hover { color: #fff; background: rgba(255,255,255,.14); }
.hello { padding: 6px 44px 0; }
.hello > * { animation: rise .7s var(--ease) both; }
.hello > *:nth-child(2) { animation-delay: .06s; } .hello > *:nth-child(3) { animation-delay: .14s; } .hello > *:nth-child(4) { animation-delay: .2s; } .hello > *:nth-child(5) { animation-delay: .26s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.greet { font-size: 17px; font-weight: 600; color: #FFD9A0; margin-top: 8px; letter-spacing: -0.01em; }
.nowline { font-size: 26px; line-height: 1.22; max-width: 560px; margin: 6px auto 0; text-wrap: balance; }
.nowtag { color: var(--muted); font-size: 13.5px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.next { margin-top: 10px; border: 1px solid var(--hair); background: rgba(255,255,255,.06); color: #fff; font: 600 13.5px var(--font); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-variant-numeric: tabular-nums; }
.next:active { transform: scale(.97); }
.ctx h3 { margin-top: 0; }
.soft { font-size: 15px; line-height: 1.5; color: #F2E6D8; padding: 2px 0 12px; margin-bottom: 10px; border-bottom: 1px solid var(--hair); }
.preview { display: flex; flex-wrap: wrap; gap: 8px; }
.preview span { background: rgba(255,214,10,.1); color: #FFE9A8; border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.sofar { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.check.slim { padding: 9px 12px; margin-top: 6px; }
.field.slim { padding: 8px 10px; font-size: 15px; }
.pill.night.fill { background: #8E8EF5; color: #000; }
.shape-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 15px; }
.shape-row .mono { color: var(--muted); font-size: 13.5px; min-width: 96px; }
.shape-row .nm { flex: 1; }
.shape-row.now { background: rgba(255,214,10,.1); }
.shape-row .tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #000; background: var(--yellow); border-radius: 6px; padding: 2px 6px; }
.shape-row .tag.nx { background: rgba(255,255,255,.16); color: #fff; }
details.sub { margin-top: 12px; border-top: 1px solid var(--hair); padding-top: 10px; }
details.sub summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--yellow); list-style: none; }
details.sub summary::-webkit-details-marker { display: none; }
details.sub summary::after { content: " ›"; } details.sub[open] summary::after { content: " ⌄"; }
.blk { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.blk-t { color: var(--muted); font-size: 13.5px; min-width: 96px; }
.blk .pill { padding: 6px 10px; font-size: 13px; }
.empty { text-align: center; padding: 22px 8px 8px; }
.empty-ic { font-size: 26px; color: var(--yellow); margin-bottom: 6px; animation: breathe 4s ease-in-out infinite; }
.goal { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.person .bd { display: flex; align-items: center; gap: 6px; }
.person .bd .field { width: auto; }
.person .pill { padding: 7px 11px; font-size: 13px; }
.breathe { animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .28; } 50% { opacity: .55; } }
.tooth { transition: opacity .6s var(--ease); }
.tooth.due circle { animation: toothPulse 3s ease-in-out infinite; }
@keyframes toothPulse { 0%, 100% { stroke-opacity: .5; } 50% { stroke-opacity: 1; } }
@media (min-width: 900px) { .topbar { top: 18px; right: 24px; } .hello { padding-top: 0; } }
@media (max-width: 899px) { .tabbar { justify-content: space-around; overflow: visible; } .tab { flex: 1; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .hello > *, .breathe, .empty-ic, .tooth.due circle { animation: none !important; } }
.nowline { font-size: 22px; }
@media (min-width: 900px) { .nowline { font-size: 28px; } }
.next { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .now-side { padding-top: 52px; } }
.pill.water.fill { background: var(--water); color: #000; }
@media (min-width: 900px) { .now-wrap .face { max-width: 500px; } }

/* ===== palette picker ===== */
.palgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 12px; }
.pal { background: rgba(255,255,255,.04); border: 2px solid transparent; border-radius: 18px; padding: 8px 8px 10px; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 12.5px var(--font); transition: border-color .25s var(--ease), transform .15s var(--ease); }
.pal svg { width: 100%; max-width: 80px; height: auto; display: block; }
.pal span[data-swatch] { width: 100%; display: flex; justify-content: center; }
.pal:active { transform: scale(.96); }
.pal.on { border-color: var(--accent); background: rgba(255,255,255,.08); }
.customgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 14px; }
.cpick { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border-radius: 12px; padding: 6px 10px; font-size: 14px; cursor: pointer; }
.cpick input[type=color] { width: 34px; height: 34px; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; }
.cpick input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .cpick input[type=color]::-webkit-color-swatch { border: 2px solid rgba(255,255,255,.25); border-radius: 50%; }
.ring.aur { transition: stroke-dasharray .9s var(--ease); }