/* ============================================================ tokens */ :root{ --bg:#0b0d12; --bg-2:#0f1219; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.07); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --text:#e9ecf5; --muted:#8b93a9; --faint:#5d6478; --violet:#8b5cf6; --indigo:#6366f1; --sky:#38bdf8; --emerald:#34d399; --amber:#fbbf24; --orange:#fb923c; --rose:#fb7185; --red:#f87171; --accent:var(--violet); --accent-soft:rgba(139,92,246,.16); --r:18px; --r-sm:12px; --r-lg:26px; --ease:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.56,.64,1); --shadow:0 18px 40px -18px rgba(0,0,0,.85); --safe-b:env(safe-area-inset-bottom,0px); } /* Per-section accents, set on */ body[data-accent="today"] {--accent:var(--violet); --accent-soft:rgba(139,92,246,.16)} body[data-accent="tasks"] {--accent:var(--indigo); --accent-soft:rgba(99,102,241,.16)} body[data-accent="habits"] {--accent:var(--emerald);--accent-soft:rgba(52,211,153,.15)} body[data-accent="courses"] {--accent:var(--amber); --accent-soft:rgba(251,191,36,.15)} body[data-accent="timetable"]{--accent:var(--sky); --accent-soft:rgba(56,189,248,.15)} body[data-accent="workout"] {--accent:var(--orange);--accent-soft:rgba(251,146,60,.15)} /* Colour classes used by chips, dots and bars */ .c-violet{--c:var(--violet)} .c-indigo{--c:var(--indigo)} .c-sky{--c:var(--sky)} .c-emerald{--c:var(--emerald)} .c-amber{--c:var(--amber)} .c-orange{--c:var(--orange)} .c-rose{--c:var(--rose)} .c-red{--c:var(--red)} *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--text); font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; } /* Two soft light sources so the flat black has some depth. */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(60rem 40rem at 12% -10%, color-mix(in srgb,var(--accent) 16%, transparent), transparent 60%), radial-gradient(46rem 34rem at 105% 8%, rgba(56,189,248,.07), transparent 62%); transition:background .7s var(--ease); } h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.02em} p{margin:0} button,input,select,textarea{font:inherit; color:inherit} .muted{color:var(--muted)} .small{font-size:13px} .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} [hidden]{display:none !important} /* ============================================================ lock */ .lock{position:fixed; inset:0; display:grid; place-items:center; padding:24px; z-index:60} .lock-card{ width:min(380px,100%); text-align:center; padding:34px 26px 28px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); animation:pop .6s var(--spring) both; } .lock-orb{ width:76px;height:76px;margin:0 auto 18px;border-radius:24px;display:grid;place-items:center; font-size:34px; background:linear-gradient(145deg,rgba(139,92,246,.35),rgba(56,189,248,.18)); border:1px solid var(--line-2); animation:float 5s var(--ease-in-out) infinite; } .lock h1{font-size:22px;margin-bottom:6px} .lock form{margin-top:22px; display:grid; gap:10px} .lock input{ width:100%; padding:14px 16px; background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:14px; outline:none; text-align:center; letter-spacing:.12em; transition:border-color .25s,box-shadow .25s,background .25s; } .lock input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); background:rgba(0,0,0,.4)} .lock-err{min-height:18px;font-size:13px;color:var(--red)} .shake{animation:shake .45s var(--ease-in-out)} /* ============================================================ buttons */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:14px; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-weight:600; overflow:hidden; transition:transform .18s var(--spring), background .2s, border-color .2s, opacity .2s; -webkit-tap-highlight-color:transparent; } .btn:hover{background:var(--surface-2)} .btn:active{transform:scale(.96)} .btn.primary{ background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%, #000)); border-color:transparent; color:#fff; box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 90%, transparent); } .btn.primary:hover{filter:brightness(1.08)} .btn.block{width:100%} .btn.grow{flex:1} .btn.ghost{background:transparent} .btn.danger{color:var(--red); border-color:rgba(248,113,113,.3)} .btn.danger:hover{background:rgba(248,113,113,.1)} .btn[disabled]{opacity:.55; pointer-events:none} .icon-btn{ display:grid;place-items:center;width:38px;height:38px;border-radius:12px; border:1px solid var(--line); background:var(--surface); cursor:pointer; transition:transform .18s var(--spring), background .2s; } .icon-btn:hover{background:var(--surface-2)} .icon-btn:active{transform:scale(.9)} /* ============================================================ layout */ .app{min-height:100%; display:flex} .rail{ display:none; width:216px; flex-shrink:0; padding:22px 14px; border-right:1px solid var(--line); position:sticky; top:0; height:100vh; flex-direction:column; gap:6px; } .rail-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 20px;font-size:17px} .rail-logo{font-size:22px} .rail-nav{display:grid;gap:4px} .rail-out{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; border:0; background:transparent; color:var(--muted); cursor:pointer; transition:background .2s,color .2s; } .rail-out:hover{background:var(--surface); color:var(--text)} .nav-item{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-weight:600; text-align:left; width:100%; position:relative; transition:color .22s, background .22s; } .nav-item .em{font-size:17px; width:22px; text-align:center; transition:transform .3s var(--spring)} .nav-item:hover{background:var(--surface); color:var(--text)} .nav-item.on{color:var(--text); background:var(--accent-soft)} .nav-item.on .em{transform:scale(1.18)} .nav-item.on::before{ content:""; position:absolute; left:-14px; top:50%; translate:0 -50%; width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--accent); animation:growY .3s var(--ease) both; } .main{flex:1; min-width:0; padding:0 16px calc(112px + var(--safe-b)); max-width:1000px; margin:0 auto; width:100%} .topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 0 14px; background:linear-gradient(var(--bg) 62%, transparent); backdrop-filter:blur(6px); } .topbar h1{font-size:26px} /* ============================================================ tabbar */ .tabbar{ position:fixed; left:12px; right:12px; bottom:calc(10px + var(--safe-b)); z-index:40; display:flex; justify-content:space-around; gap:2px; padding:7px; background:rgba(16,19,26,.82); backdrop-filter:blur(20px) saturate(1.6); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); } .tab{ flex:1; display:grid; place-items:center; gap:3px; padding:7px 2px; border:0; border-radius:15px; background:transparent; color:var(--faint); cursor:pointer; font-size:10px; font-weight:600; position:relative; transition:color .25s; -webkit-tap-highlight-color:transparent; } .tab .em{font-size:19px; transition:transform .35s var(--spring)} .tab.on{color:var(--text)} .tab.on .em{transform:translateY(-2px) scale(1.16)} .tab.on::before{ content:""; position:absolute; inset:0; border-radius:15px; background:var(--accent-soft); animation:pop .35s var(--spring) both; z-index:-1; } /* ============================================================ fab */ .fab{ position:fixed; right:18px; bottom:calc(84px + var(--safe-b)); z-index:45; width:56px; height:56px; border-radius:20px; border:0; cursor:pointer; color:#fff; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#000)); box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 85%, transparent); transition:transform .25s var(--spring), background .4s, opacity .2s; animation:pop .4s var(--spring) both; } .fab .ic{width:24px;height:24px;stroke-width:2.4} .fab:hover{transform:scale(1.07) rotate(90deg)} .fab:active{transform:scale(.92) rotate(90deg)} /* ============================================================ cards */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; transition:border-color .25s, background .25s, transform .25s var(--ease); } .card:hover{border-color:var(--line-2)} .grid{display:grid; gap:12px} .g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} .row{display:flex; align-items:center; gap:12px} .between{justify-content:space-between} .wrap{flex-wrap:wrap} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 2px 12px} .sec-head h2{font-size:15px; color:var(--muted); font-weight:650; letter-spacing:.01em} .sec-head .n{font-size:12px; color:var(--faint)} .empty{ text-align:center; padding:44px 20px; color:var(--faint); border:1px dashed var(--line); border-radius:var(--r); animation:fade .4s var(--ease) both; } .empty .big{font-size:36px; display:block; margin-bottom:10px; animation:float 4s var(--ease-in-out) infinite} /* ============================================================ stats */ /* Two columns even on a narrow phone — stacking all four made the Today screen scroll before it showed anything useful. The habits ring and the workout name carry longer text, so they take the full row. */ .stats{display:grid; grid-template-columns:1fr 1fr; gap:12px} .stats .span2{grid-column:1/-1} @media (min-width:700px){ .stats{grid-template-columns:1.6fr 1fr 1fr 1.4fr} .stats .span2{grid-column:auto} } .stat{ padding:15px; border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(150deg,color-mix(in srgb,var(--c,var(--accent)) 15%,transparent),var(--surface)); position:relative; overflow:hidden; } .stat .k{font-size:12px;color:var(--muted);font-weight:600} .stat .v{font-size:27px;font-weight:700;letter-spacing:-.03em;margin-top:2px; font-variant-numeric:tabular-nums} .stat .em{position:absolute; right:10px; top:9px; font-size:22px; opacity:.55} /* ============================================================ ring */ .ring{--p:0; width:58px;height:58px;flex-shrink:0; position:relative; display:grid; place-items:center} .ring svg{position:absolute; inset:0; transform:rotate(-90deg)} .ring circle{fill:none; stroke-width:5; stroke-linecap:round} .ring .bg{stroke:rgba(255,255,255,.09)} .ring .fg{ stroke:var(--c,var(--accent)); stroke-dasharray:157; stroke-dashoffset:calc(157 - 157 * var(--p) / 100); transition:stroke-dashoffset 1s var(--ease); } .ring b{font-size:13px; font-variant-numeric:tabular-nums} /* ============================================================ list rows */ .item{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); transition:background .22s, border-color .22s, opacity .3s, transform .3s var(--ease); } .item:hover{background:var(--surface-2)} .item.done{opacity:.45} .item.done .t{text-decoration:line-through; text-decoration-color:var(--muted)} .item .t{font-weight:550; word-break:break-word} .item .meta{font-size:12px; color:var(--faint); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; align-items:center} .item .grow{flex:1; min-width:0} .leaving{animation:leave .32s var(--ease-in-out) forwards} .check{ flex-shrink:0; width:23px; height:23px; margin-top:1px; border-radius:8px; cursor:pointer; border:2px solid var(--line-2); background:transparent; display:grid; place-items:center; transition:background .25s var(--ease), border-color .25s, transform .2s var(--spring); -webkit-tap-highlight-color:transparent; } .check:active{transform:scale(.84)} .check svg{width:13px;height:13px;stroke:#0b0d12;stroke-width:3.4;fill:none; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset .3s var(--ease) .05s} .check.on{background:var(--c,var(--accent)); border-color:var(--c,var(--accent))} .check.on svg{stroke-dashoffset:0} .check.on{animation:checkPop .4s var(--spring)} .chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:650; background:color-mix(in srgb,var(--c,var(--accent)) 17%, transparent); color:color-mix(in srgb,var(--c,var(--accent)) 82%, #fff); white-space:nowrap; } .chip.late{background:rgba(248,113,113,.16); color:#fca5a5} .dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--accent));flex-shrink:0} .bar{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden} .bar i{display:block;height:100%;border-radius:99px;background:var(--c,var(--accent));width:0; transition:width .9s var(--ease)} /* ============================================================ habits */ .habit{ display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); cursor:pointer; transition:background .22s, border-color .22s, transform .22s var(--ease); -webkit-tap-highlight-color:transparent; text-align:left; width:100%; } .habit:active{transform:scale(.985)} .habit.on{border-color:color-mix(in srgb,var(--c) 45%, transparent); background:color-mix(in srgb,var(--c) 10%, var(--surface))} .habit .hemo{ width:40px;height:40px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;font-size:19px; background:color-mix(in srgb,var(--c) 16%, transparent); transition:transform .35s var(--spring); } .habit.on .hemo{transform:scale(1.08) rotate(-6deg)} .streak{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--amber)} .streak.zero{color:var(--faint)} .dots{display:flex;gap:4px;margin-top:6px} .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.13)} .dots i.f{background:var(--c)} .dots i.t{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 35%,transparent)} /* ============================================================ timetable */ .day-tabs{display:flex; gap:6px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none} .day-tabs::-webkit-scrollbar{display:none} .day-tab{ flex:0 0 auto; padding:8px 15px; border-radius:13px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; font-weight:600; font-size:13px; transition:all .22s var(--ease); } .day-tab.on{background:var(--accent); border-color:transparent; color:#fff} .day-tab.today::after{content:"•"; margin-left:5px; color:var(--accent)} .day-tab.on.today::after{color:#fff} .slot{ display:flex; gap:13px; padding:13px 14px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--c,var(--accent)); transition:background .22s; } .slot:hover{background:var(--surface-2)} .slot .time{flex-shrink:0; width:52px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums} .slot .time span{display:block; font-size:11px; font-weight:500; color:var(--faint)} .slot.now{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent)} .slot.now .time{color:var(--c)} /* ============================================================ sheet */ .sheet-wrap{position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end; justify-content:center} .sheet-bg{position:absolute; inset:0; background:rgba(4,6,10,.66); backdrop-filter:blur(5px); animation:fade .28s var(--ease) both} .sheet{ position:relative; width:min(520px,100%); max-height:88vh; overflow-y:auto; background:var(--bg-2); border:1px solid var(--line); border-bottom:0; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:10px 20px calc(20px + var(--safe-b)); animation:slideUp .4s var(--ease) both; box-shadow:var(--shadow); } .sheet-grip{width:38px;height:4px;border-radius:99px;background:var(--line-2);margin:0 auto 12px} .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px} .sheet-head h2{font-size:19px} .sheet-foot{display:flex;gap:10px;margin-top:22px} .field{margin-bottom:13px} .field label{display:block;font-size:12px;font-weight:650;color:var(--muted);margin-bottom:6px} .field input,.field select,.field textarea{ width:100%; padding:12px 14px; background:rgba(0,0,0,.26); border:1px solid var(--line); border-radius:13px; outline:none; transition:border-color .22s, box-shadow .22s; } .field textarea{resize:vertical; min-height:74px} .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); } .field select{appearance:none; background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 19px) 51%, calc(100% - 14px) 51%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat} .two{display:grid; grid-template-columns:1fr 1fr; gap:10px} .picks{display:flex; gap:7px; flex-wrap:wrap} .pick{ padding:8px 13px; border-radius:11px; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); transition:all .2s var(--ease); } .pick.on{background:var(--accent-soft); border-color:var(--accent); color:var(--text)} .pick:active{transform:scale(.94)} .swatch{width:32px;height:32px;border-radius:10px;border:2px solid transparent;background:var(--c); cursor:pointer; transition:transform .2s var(--spring), border-color .2s; opacity:.5} .swatch.on{border-color:#fff; opacity:1; transform:scale(1.1)} /* ============================================================ toast */ .toast{ position:fixed; left:50%; bottom:calc(150px + var(--safe-b)); translate:-50% 0; z-index:90; padding:11px 18px; border-radius:14px; font-size:13px; font-weight:600; background:rgba(22,26,35,.95); border:1px solid var(--line-2); box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .3s, translate .35s var(--spring); } .toast.show{opacity:1; translate:-50% -10px} /* ============================================================ motion */ @keyframes fade{from{opacity:0} to{opacity:1}} @keyframes pop{from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)}} @keyframes slideUp{from{opacity:0; transform:translateY(40px)} to{opacity:1; transform:translateY(0)}} @keyframes growY{from{transform:translateY(-50%) scaleY(0)} to{transform:translateY(-50%) scaleY(1)}} @keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}} @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)} 40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}} @keyframes checkPop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}} @keyframes leave{to{opacity:0; transform:translateX(28px) scale(.96); max-height:0; padding-top:0; padding-bottom:0; margin-bottom:-12px}} @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}} /* Children of a freshly shown view rise in sequence. */ .view.in > *{animation:rise .5s var(--ease) both; animation-delay:calc(var(--i,0) * 45ms)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important} } /* ============================================================ desktop */ .only-mobile{display:grid} @media (min-width:860px){ .rail{display:flex} .tabbar{display:none} .only-mobile{display:none} .main{padding:0 30px 60px; max-width:none} .fab{right:30px; bottom:30px} .topbar{padding:26px 0 16px} .topbar h1{font-size:30px} }