:root{
  --bg:#f4f7fb;
  --surface:rgba(255,255,255,.86);
  --surface-solid:#fff;
  --text:#101521;
  --muted:#7f8998;
  --line:#e7ebf1;
  --blue:#1687ff;
  --blue-dark:#0567d8;
  --shadow:0 18px 50px rgba(30,54,82,.10);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Hiragino Sans","Yu Gothic",sans-serif;color:var(--text)}
body{min-height:100dvh}
button,input,textarea{font:inherit}
button{cursor:pointer}
.app-shell{width:min(100%,520px);min-height:100dvh;margin:0 auto;background:linear-gradient(180deg,#fbfcff 0%,#f4f7fb 58%,#eef3f9 100%);position:relative;overflow:hidden;padding-bottom:calc(88px + var(--safe-bottom))}
.topbar{height:calc(54px + var(--safe-top));padding:calc(10px + var(--safe-top)) 20px 0;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.brand{font-size:21px;font-weight:780;letter-spacing:-.7px}
.icon-button{width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.72);box-shadow:0 5px 18px rgba(27,47,72,.06);font-size:22px;color:#475466}
main{padding:0 18px 24px}.screen{display:none;animation:fade .22s ease}.screen.active{display:block}@keyframes fade{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
.elapsed{text-align:center;font-size:13px;font-weight:650;color:#778293;letter-spacing:.02em;margin:2px 0 12px}
.water-section{display:flex;justify-content:center;padding:4px 0 16px}
.water-orb{position:relative;width:min(76vw,340px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 22%,rgba(255,255,255,.95) 0 12%,rgba(246,250,255,.9) 28%,rgba(231,239,248,.88) 65%,rgba(216,227,239,.92) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.96),inset 0 -26px 46px rgba(90,133,180,.11),inset 10px 10px 18px rgba(255,255,255,.42),inset -12px -18px 28px rgba(70,97,137,.08),0 26px 58px rgba(50,89,129,.16);cursor:pointer;touch-action:manipulation;transition:transform .18s ease,box-shadow .22s ease}
.water-orb:active{transform:scale(.992)}
.water-orb.done{box-shadow:inset 0 0 0 1px rgba(255,255,255,.96),inset 0 -26px 46px rgba(90,133,180,.13),inset 10px 10px 18px rgba(255,255,255,.42),inset -12px -18px 28px rgba(70,97,137,.09),0 22px 48px rgba(50,89,129,.14)}
.water-orb:before{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid rgba(112,137,165,.14);z-index:3;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -18px 22px rgba(255,255,255,.08)}
.water-orb:after{content:"";position:absolute;inset:3px;border-radius:50%;pointer-events:none;z-index:3;background:radial-gradient(circle at 26% 20%,rgba(255,255,255,.82),transparent 19%),radial-gradient(circle at 72% 78%,rgba(255,255,255,.16),transparent 24%),linear-gradient(140deg,rgba(255,255,255,.28),transparent 34% 67%,rgba(255,255,255,.08));mix-blend-mode:screen}
#waterCanvas{position:absolute;width:100%;height:100%;inset:0}
.orb-glass{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle at 33% 19%,rgba(255,255,255,.96) 0 5%,rgba(255,255,255,.28) 13%,transparent 31%),radial-gradient(circle at 72% 80%,rgba(255,255,255,.15),transparent 23%),linear-gradient(120deg,rgba(255,255,255,.24),transparent 37% 68%,rgba(255,255,255,.1));mix-blend-mode:screen}
.orb-label{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:0 1px 9px rgba(255,255,255,.74)}
.count{font-weight:820;font-size:48px;letter-spacing:-2.6px;line-height:1}.slash{font-weight:430;color:#8b97a6;margin:0 5px}.count-label{font-size:12px;font-weight:700;color:#697586;margin-top:9px;letter-spacing:.08em}
.detail-card,.form-card,.today-column,.progress-summary{background:var(--surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.92);box-shadow:var(--shadow);border-radius:24px}
.detail-card{padding:19px 19px 16px;margin-top:0}.detail-row{display:flex;justify-content:space-between;gap:16px}.detail-right{text-align:right}.detail-label{font-size:12px;color:var(--muted);margin-bottom:5px}.detail-value{font-size:24px;font-weight:760;letter-spacing:-.8px}.detail-value small{font-size:12px;font-weight:650;color:#7f8998}.divider{height:1px;background:var(--line);margin:15px 0}.mini-grid{display:grid;grid-template-columns:1fr 1fr}.mini-item{display:flex;justify-content:space-between;align-items:center;padding-right:10px;font-size:12px;color:var(--muted)}.mini-item+ .mini-item{border-left:1px solid var(--line);padding-left:16px}.mini-item strong{font-size:16px;color:var(--text)}
.primary-action{width:100%;border:0;border-radius:18px;padding:16px 18px;background:#111823;color:#fff;font-weight:750;font-size:15px;box-shadow:0 12px 26px rgba(16,24,35,.16);margin-top:14px}.primary-action:active{transform:scale(.99)}.primary-action.done{background:#e8edf3;color:#8993a1;box-shadow:none}.helper{text-align:center;font-size:11px;color:#8b95a3;margin:9px 0 17px}
.today-column{padding:19px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--blue);margin-bottom:7px}.today-column h2,.page-heading h1,.article-sheet h1{margin:0;letter-spacing:-.7px}.today-column h2{font-size:18px;line-height:1.35}.today-column p,.page-heading p{font-size:12px;color:var(--muted);line-height:1.6}.text-button{border:0;background:none;padding:5px 0;color:#111823;font-weight:750}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,520px);height:calc(74px + var(--safe-bottom));padding:7px 17px var(--safe-bottom);display:grid;grid-template-columns:repeat(4,1fr);background:rgba(250,252,255,.90);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(214,221,230,.7);z-index:20}.nav-item{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#99a2af;font-size:10px;font-weight:650}.nav-item.active{color:#121924}.nav-icon{font-size:22px;line-height:1}
.page-heading{padding:22px 4px 17px}.page-heading h1{font-size:30px}.form-card{padding:20px}.form-card label,.sheet label{display:block;font-size:12px;font-weight:700;color:#566171;margin-bottom:16px}.form-card label span{font-weight:500;color:#9aa3af}.form-card input,.form-card textarea,.sheet input{width:100%;border:1px solid #e3e8ef;background:#f8fafc;border-radius:14px;padding:13px 14px;margin-top:7px;outline:none;color:var(--text)}.form-card textarea{resize:vertical}.form-card input:focus,.form-card textarea:focus,.sheet input:focus{border-color:#b4cce9;box-shadow:0 0 0 3px rgba(22,135,255,.08)}
.column-list{display:grid;gap:9px}.column-item{border:0;width:100%;text-align:left;background:#fff;border-radius:17px;padding:14px 15px;display:flex;gap:12px;align-items:center;box-shadow:0 6px 18px rgba(40,58,82,.05)}.column-item.locked{opacity:.48}.column-day{font-size:10px;font-weight:800;color:var(--blue);min-width:47px}.column-title{font-size:13px;font-weight:700;line-height:1.4;flex:1}.column-lock{font-size:13px;color:#9ca5b1}
.test-code-panel{margin:24px 0 8px;padding:16px;background:rgba(255,255,255,.62);border:1px dashed #d8dee7;border-radius:18px}.test-code-label{font-size:9px;font-weight:800;letter-spacing:.16em;color:#a0a8b4;margin-bottom:9px}.test-code-row{display:grid;grid-template-columns:1fr auto;gap:8px}.test-code-row input{min-width:0;border:1px solid #e2e7ed;background:#fff;border-radius:13px;padding:12px 13px;outline:none;color:var(--text)}.test-code-row input:focus{border-color:#b4cce9;box-shadow:0 0 0 3px rgba(22,135,255,.08)}.test-code-row button{border:0;border-radius:13px;padding:0 15px;background:#17202c;color:#fff;font-size:12px;font-weight:750}.test-code-panel p{margin:9px 2px 0;font-size:10px;color:#939daa}
.progress-summary{display:grid;grid-template-columns:repeat(3,1fr);padding:17px;margin-bottom:15px}.progress-summary div{text-align:center}.progress-summary div+div{border-left:1px solid var(--line)}.progress-summary span{display:block;font-size:10px;color:var(--muted)}.progress-summary strong{font-size:23px}.day-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}.day-dot{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;background:#e8edf3;color:#85909e}.day-dot.done{background:#151d28;color:#fff}.day-dot.missed{background:#fff;border:1px solid #e0e5eb;color:#b0b7c0}
dialog{border:0;padding:0;background:transparent}.sheet-dialog{width:min(100%,520px);max-width:none;margin:auto auto 0}.sheet-dialog::backdrop,.article-dialog::backdrop{background:rgba(14,22,32,.34);backdrop-filter:blur(4px)}.sheet{background:#fff;border-radius:26px 26px 0 0;padding:9px 20px calc(22px + var(--safe-bottom));box-shadow:0 -15px 45px rgba(15,25,40,.16)}.sheet-handle{width:40px;height:5px;border-radius:99px;background:#d9dee5;margin:2px auto 12px}.sheet-head{display:flex;align-items:center;justify-content:space-between}.sheet-head h2{margin:0}.danger-button{width:100%;border:0;background:none;color:#d74747;padding:13px;font-weight:700}
.article-dialog{width:min(calc(100% - 28px),492px);max-width:none;border-radius:26px;margin:auto}.article-sheet{position:relative;max-height:82dvh;overflow:auto;background:#fff;border-radius:26px;padding:28px 23px 31px}.article-close{position:absolute;right:16px;top:15px;width:34px;height:34px;border:0;border-radius:50%;background:#f0f3f6;font-size:20px}.article-sheet h1{font-size:26px;line-height:1.25;padding-right:32px}.article-body{font-size:14px;line-height:1.9;color:#3f4b5b;margin-top:18px}.article-body p{margin:0 0 14px}
.toast{position:fixed;left:50%;bottom:calc(92px + var(--safe-bottom));transform:translate(-50%,18px);background:#121924;color:#fff;padding:10px 15px;border-radius:99px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:360px){.count{font-size:41px}.water-orb{width:78vw}.day-grid{gap:4px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.screen{animation:none}}