:root { color-scheme: light; --bg:#f8f7fc; --card:#fff; --ink:#302d3f; --sub:#777187; --primary:#5b54a6; --line:#e8e4f1; --soft:#efedf8; font-family:-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif; background:var(--bg); color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; } button,input,textarea,select { font:inherit; } button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:disabled { opacity:.5; cursor:wait; } button:focus-visible,a:focus-visible { outline:3px solid #a89fe0; outline-offset:3px; }
button { min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--primary); } button.primary { background:var(--primary); color:white; border-color:var(--primary); } button.danger { color:#a83c48; } button.ghost { background:transparent; border:0; } h1,h2,h3,p { margin:0; } h1 { font-size:30px; letter-spacing:2px; } h2 { font-size:22px; } h3 { font-size:17px; } p { line-height:1.7; } small,.muted { color:var(--sub); } small { line-height:1.6; } a { color:var(--primary); }
.page { max-width:760px; margin:auto; padding:calc(26px + env(safe-area-inset-top)) 22px calc(112px + env(safe-area-inset-bottom)); } header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:30px; } .brand { display:flex; align-items:center; gap:13px; } .logo { display:grid; place-items:center; width:52px; height:52px; border-radius:17px; background:var(--primary); color:white; font:30px serif; } .eyebrow { font-size:11px; letter-spacing:3px; color:var(--sub); margin-bottom:8px; } .subtitle { color:var(--sub); font-size:13px; margin-top:5px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:23px; margin-bottom:18px; } .hero { background:linear-gradient(135deg,#ece8f9,#f6f3fb); padding:28px; border:0; } .hero .number { font-size:64px; font-weight:300; line-height:1.25; margin:7px 0 12px; color:#464079; } .number small { font-size:15px; margin-left:8px; } .flex { display:flex; align-items:center; gap:12px; } .between { justify-content:space-between; } .wrap { flex-wrap:wrap; } .metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; text-align:center; } .metrics strong { display:block; font-size:25px; font-weight:500; margin-bottom:5px; } .section { margin:30px 0 16px; } .empty { text-align:center; padding:35px 20px; color:var(--sub); line-height:1.8; } .welcome { border:1px dashed #b7acd6; } .welcome p { margin:12px 0 20px; }
.instance { position:relative; } .instance h3 { margin-bottom:9px; overflow-wrap:anywhere; } .instance p { font-size:13px; color:var(--sub); } .instance .actions { margin-top:20px; display:flex; gap:9px; flex-wrap:wrap; } .pill { border-radius:20px; padding:4px 10px; background:var(--soft); color:var(--primary); font-size:11px; } .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .grid .card { margin:0; } .chart { height:150px; display:flex; align-items:flex-end; gap:10px; padding-top:16px; } .day { flex:1; min-width:0; text-align:center; } .bar { width:100%; max-width:28px; background:#a49bcf; border-radius:6px 6px 0 0; margin:auto auto 10px; } .day small { display:block; font-size:11px; white-space:nowrap; } .record { padding:16px 0; border-bottom:1px solid var(--line); } .record:last-child { border:0; } .record .muted { margin-top:5px; font-size:12px; } .record p { overflow-wrap:anywhere; }
.tabs { position:fixed; bottom:0; left:0; right:0; z-index:5; display:flex; justify-content:center; background:rgba(255,255,255,.96); border-top:1px solid var(--line); padding:8px 10px calc(8px + env(safe-area-inset-bottom)); } .tabs button { width:150px; max-width:25%; min-height:54px; border:0; border-radius:12px; background:transparent; color:var(--sub); font-size:12px; } .tabs button span { display:block; font-size:21px; margin-bottom:3px; } .tabs button.active { background:var(--soft); color:var(--primary); } .settings-row { padding:16px 0; border-bottom:1px solid var(--line); } .settings-row label { display:flex; justify-content:space-between; align-items:center; gap:15px; } .settings-row:last-child { border:0; } .settings-row input[type=checkbox] { width:24px; height:24px; accent-color:var(--primary); } .notice { padding:14px 16px; background:#fff3da; border-radius:12px; color:#785323; font-size:13px; line-height:1.7; margin:12px 0; } details { margin-top:14px; font-size:13px; } details li { overflow-wrap:anywhere; padding:8px 0; } summary { cursor:pointer; min-height:35px; }
dialog { border:0; padding:0; color:var(--ink); background:var(--bg); } dialog::backdrop { background:rgba(34,29,51,.48); } .sheet { width:min(760px,100%); max-height:96dvh; border-radius:24px 24px 0 0; margin:auto auto 0; } .sheet header { position:sticky; top:0; background:var(--bg); z-index:2; padding:18px 22px; border-bottom:1px solid var(--line); margin:0; } .sheet form { padding:22px 22px calc(28px + env(safe-area-inset-bottom)); } label.field { display:block; font-size:13px; margin-bottom:18px; color:var(--sub); } input:not([type=checkbox]),textarea,select { width:100%; min-height:46px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--ink); padding:11px; margin-top:7px; } textarea { resize:vertical; min-height:100px; } .step-fields { background:white; padding:18px; border:1px solid var(--line); border-radius:18px; margin-bottom:18px; } .step-fields label.field:last-child { margin-bottom:0; } .step-head { margin-bottom:15px; } .two { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .footer-actions { display:flex; gap:10px; margin-top:24px; } .footer-actions .primary { flex:1; }
.practice { width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:calc(25px + env(safe-area-inset-top)) 24px calc(25px + env(safe-area-inset-bottom)); } .practice-inner { max-width:600px; height:100%; margin:auto; display:flex; flex-direction:column; text-align:center; } .practice header { margin-bottom:20px; text-align:left; } .practice .spacer { flex:1; min-height:18px; } .ring { width:min(65vw,270px); aspect-ratio:1; border:2px solid #c6bddf; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:25px auto; box-shadow:0 0 0 16px #f0edf8,0 0 0 17px #e8e3f1; } .timer { font-size:55px; font-weight:250; letter-spacing:2px; margin:12px 0; font-variant-numeric:tabular-nums; } .practice-text { font-size:15px; line-height:1.9; max-height:18vh; overflow:auto; color:var(--sub); white-space:pre-wrap; } .practice-status { font-size:12px; line-height:1.6; min-height:38px; margin:10px 0; color:var(--sub); } .controls { justify-content:center; margin:22px 0; } .controls .primary { min-width:130px; min-height:55px; border-radius:30px; } #toast { position:fixed; bottom:calc(90px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); background:#353044; color:white; border-radius:14px; padding:13px 20px; z-index:30; width:max-content; max-width:90%; font-size:13px; line-height:1.6; pointer-events:none; opacity:0; transition:opacity .15s; } #toast.visible { opacity:1; }
@media(max-width:430px) { .grid { grid-template-columns:1fr; } .page { padding-left:18px; padding-right:18px; } .card { padding:20px; } header { margin-bottom:24px; } .two { gap:10px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }