*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(1200px 700px at 10% 0%, var(--bg-2) 0%, rgba(255,233,220,0) 60%),
      radial-gradient(1000px 600px at 100% 100%, #EEE2FF 0%, rgba(238,226,255,0) 55%),
      #F3E9E2;
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }
  button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
  input{font:inherit;color:inherit}
  ::-webkit-scrollbar{width:0;height:0}

  /* ---------- desktop stage ---------- */
  .stage{height:100%;display:flex;align-items:center;justify-content:center;gap:64px;padding:24px}
  .side{width:300px;flex:0 0 auto;display:none}
  @media(min-width:1120px){.side{display:block}}
  .side .brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .brand-mark{width:44px;height:44px;border-radius:15px;background:linear-gradient(145deg,var(--accent-light),var(--accent));
    box-shadow:0 10px 24px -8px rgba(var(--accent-rgb),.55), inset 0 1px 0 rgba(var(--glass-rgb),.65);
    display:grid;place-items:center;color:#fff;font-size:22px}
  .side h1{font-size:26px;letter-spacing:-.03em;margin:0;font-weight:750}
  .side .sub{margin:2px 0 22px;font-size:13px;color:var(--muted);letter-spacing:.01em}
  .side .lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin:22px 0 10px}
  .jump{display:flex;flex-direction:column;gap:2px}
  .jump button{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;font-size:14px;color:var(--ink);text-align:left;transition:.18s}
  .jump button:hover{background:rgba(var(--glass-rgb),.6)}
  .jump button i{width:6px;height:6px;border-radius:50%;background:#E2B6A4}
  .jump button.on{color:var(--accent-ink);font-weight:650}
  .jump button.on i{background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}
  .feats{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--ink);line-height:1.35}
  .feats span{display:flex;gap:9px}
  .feats b{color:var(--ink);font-weight:650}
  .feats em{font-style:normal;color:var(--accent-ink)}
  .hint{margin-top:22px;font-size:12px;line-height:1.5;color:var(--muted);background:rgba(var(--glass-rgb),.5);
    border:1px solid rgba(var(--glass-rgb),.8);padding:12px 14px;border-radius:16px}

  /* ---------- phone ---------- */
  .phone{
    position:relative;width:392px;height:min(844px,calc(100vh - 40px));flex:0 0 auto;
    border-radius:54px;overflow:hidden;isolation:isolate;
    background:linear-gradient(165deg,var(--bg-1) 0%,var(--bg-2) 38%,var(--bg-3) 62%,var(--bg-4) 100%);
    box-shadow:0 0 0 10px #241D1A, 0 0 0 11px #4a3a33, 0 50px 90px -30px rgba(var(--shadow-rgb),.55);
  }
  @media(max-width:520px){
    body{overflow:auto}
    .stage{padding:0}
    .phone{width:100vw;height:100vh;height:100dvh;border-radius:0;box-shadow:none}
  }
  .blob{position:absolute;border-radius:50%;filter:blur(46px);pointer-events:none;z-index:0}
  .b1{width:250px;height:250px;left:-80px;top:-40px;background:var(--blob-1);opacity:.75;animation:drift1 18s ease-in-out infinite alternate}
  .b2{width:220px;height:220px;right:-70px;top:180px;background:var(--blob-2);opacity:.62;animation:drift2 21s ease-in-out infinite alternate}
  .b3{width:280px;height:280px;left:-90px;bottom:120px;background:var(--blob-3);opacity:.6;animation:drift1 24s ease-in-out infinite alternate-reverse}
  .b4{width:180px;height:180px;right:-40px;bottom:-30px;background:var(--blob-4);opacity:.45;animation:drift2 19s ease-in-out infinite alternate-reverse}
  @keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(34px,26px,0) scale(1.12)}}
  @keyframes drift2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-28px,-20px,0) scale(.95)}}

  .glass{
    background:linear-gradient(145deg,rgba(var(--glass-rgb),.72),rgba(var(--glass-rgb),.42));
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
    border:1px solid rgba(var(--glass-rgb),.85);
    box-shadow:0 12px 30px -14px rgba(var(--shadow-rgb),.28), inset 0 1px 0 rgba(var(--glass-rgb),.95), inset 0 -1px 0 rgba(var(--glass-rgb),.35);
  }
  .glass-soft{
    background:linear-gradient(150deg,rgba(var(--glass-rgb),.5),rgba(var(--glass-rgb),.26));
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(var(--glass-rgb),.62);
    box-shadow:0 8px 20px -14px rgba(var(--shadow-rgb),.25), inset 0 1px 0 rgba(var(--glass-rgb),.8);
  }

  /* ---------- status bar ---------- */
  .status{position:absolute;z-index:40;top:0;left:0;right:0;height:50px;display:flex;align-items:center;
    justify-content:space-between;padding:14px 30px 0;font-size:13px;font-weight:650;letter-spacing:.01em;pointer-events:none}
  .island{position:absolute;z-index:41;top:11px;left:50%;transform:translateX(-50%);width:106px;height:29px;border-radius:20px;background:#1C1715}
  .status .right{display:flex;align-items:center;gap:6px}
  .sig{display:flex;align-items:flex-end;gap:2px;height:10px}
  .sig i{width:3px;border-radius:1px;background:var(--ink);display:block}
  .sig i:nth-child(1){height:4px}.sig i:nth-child(2){height:6px}.sig i:nth-child(3){height:8px}.sig i:nth-child(4){height:10px}

  /* ---------- screens ---------- */
  .screen{position:absolute;inset:0;z-index:2;overflow-y:auto;overflow-x:hidden;padding:64px 20px 130px;
    opacity:0;transform:translateY(10px) scale(.995);pointer-events:none;transition:opacity .28s ease,transform .28s ease}
  .screen.active{opacity:1;transform:none;pointer-events:auto}
  .screen::-webkit-scrollbar{display:none}

  .eyebrow{font-size:12px;font-weight:650;letter-spacing:.04em;color:var(--muted2);text-transform:none}
  .h1{font-size:30px;line-height:1.12;font-weight:760;letter-spacing:-.035em;margin:4px 0 0}
  .h2{font-size:17px;font-weight:720;letter-spacing:-.02em;margin:0}
  .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .muted{color:var(--muted)}
  .tiny{font-size:11.5px}
  .section-head{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 10px}
  .section-head h3{font-size:12px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);margin:0}
  .section-head span{font-size:12px;color:var(--muted3)}

  /* header */
  .topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
  .ava{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;font-weight:750;font-size:15px;
    color:var(--accent-ink);background:linear-gradient(150deg,rgba(var(--glass-rgb),.9),rgba(255,222,207,.75));
    border:1px solid rgba(var(--glass-rgb),.9);box-shadow:0 8px 20px -12px rgba(var(--shadow-rgb),.4);position:relative}
  .ava .dot{position:absolute;right:-1px;top:-1px;width:11px;height:11px;border-radius:50%;background:#63C08A;border:2px solid var(--bg-1)}

  /* day strip */
  .days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px 6px;scroll-snap-type:x mandatory}
  .day{flex:0 0 auto;width:46px;height:64px;border-radius:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    scroll-snap-align:center;transition:.18s}
  .day small{font-size:10.5px;font-weight:650;letter-spacing:.02em;color:var(--muted2)}
  .day b{font-size:16px;font-weight:700;letter-spacing:-.02em}
  .day i{display:block;width:4px;height:4px;border-radius:50%;background:var(--accent-light);opacity:0}
  .day.has i{opacity:1}
  .day.active{background:linear-gradient(150deg,var(--accent-light),var(--accent));border-color:rgba(var(--glass-rgb),.6);
    box-shadow:0 14px 26px -12px rgba(var(--accent-rgb),.75), inset 0 1px 0 rgba(var(--glass-rgb),.55);color:#fff}
  .day.active small,.day.active i{display:none}
  .day.active b{font-size:19px}
  .day:active{transform:scale(.96)}

  /* progress card */
  .progress{padding:16px;border-radius:26px;display:flex;align-items:center;gap:16px;margin-top:8px}
  .ring{position:relative;width:66px;height:66px;flex:0 0 auto}
  .ring svg{transform:rotate(-90deg)}
  .ring .num{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:750;letter-spacing:-.03em}
  .progress .txt{flex:1;min-width:0}
  .progress .txt b{display:block;font-size:15px;letter-spacing:-.015em}
  .progress .txt span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.35}
  .streak{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:700;color:var(--accent-ink);
    background:rgba(var(--accent-rgb),.16);border:1px solid rgba(var(--accent-rgb),.28);white-space:nowrap}

  /* tasks */
  .group{margin-top:2px}
  .task{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:22px;margin-bottom:9px;text-align:left;
    transition:transform .16s ease, opacity .2s ease, box-shadow .2s}
  .task:active{transform:scale(.985)}
  .check{width:24px;height:24px;border-radius:50%;flex:0 0 auto;border:1.6px solid rgba(var(--ink-rgb),.16);
    display:grid;place-items:center;transition:.2s;background:rgba(var(--glass-rgb),.5)}
  .check svg{width:13px;height:13px;opacity:0;transform:scale(.5);transition:.2s}
  .task.done .check{background:linear-gradient(145deg,var(--accent-light),var(--accent-deep));border-color:transparent;box-shadow:0 6px 14px -6px rgba(var(--accent-rgb),.7)}
  .task.done .check svg{opacity:1;transform:none}
  .task .body{flex:1;min-width:0}
  .task .title{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .task .meta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
  .task.done .title{text-decoration:line-through;color:#A08A7D;text-decoration-thickness:1.5px}
  .task.done{opacity:.62}
  .task .right{display:flex;align-items:center;gap:8px;flex:0 0 auto}  .bell{width:30px;height:30px;border-radius:11px;display:grid;place-items:center;color:var(--accent-ink);background:rgba(var(--accent-rgb),.15)}
  .bell svg{width:15px;height:15px}
  .bell.quiet{color:var(--muted);background:rgba(var(--ink-rgb),.05)}
  .rembar{display:flex;align-items:center;gap:9px;width:100%;padding:11px 13px;border-radius:16px;margin-top:10px;
    font-size:12px;font-weight:600;color:#7A5A48;text-align:left;transition:.16s}
  .rembar:active{transform:scale(.99)}
  .rembar .c{width:20px;height:20px;border-radius:7px;background:rgba(255,178,71,.3);color:#A96A12;display:grid;place-items:center;
    font-size:11px;font-weight:800;flex:0 0 auto}
  .rembar .chev{margin-left:auto;color:var(--muted3);font-size:17px;line-height:1}
  .tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.01em}
  .dotp{width:5px;height:5px;border-radius:50%}
  .grouplabel{display:flex;align-items:center;gap:8px;margin:16px 4px 8px;font-size:10.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
  .grouplabel::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--ink-rgb),.09),transparent)}

  .empty{padding:26px 18px;text-align:center;border-radius:24px;font-size:13px;color:var(--muted);line-height:1.5}

  /* quick add bar */
  .quickbar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:20px;margin-top:14px;width:100%;color:var(--muted2);font-size:13.5px}
  .quickbar .plus{width:26px;height:26px;border-radius:9px;background:linear-gradient(145deg,var(--accent-light),var(--accent));display:grid;place-items:center;color:#fff;
    box-shadow:0 6px 14px -6px rgba(var(--accent-rgb),.8)}
  .quickbar svg{width:14px;height:14px}

  /* dock */
  .dock{position:absolute;z-index:30;left:14px;right:14px;bottom:16px;height:70px;border-radius:26px;display:flex;align-items:center;
    justify-content:space-around;padding:0 6px;
    background:linear-gradient(150deg,rgba(var(--glass-rgb),.8),rgba(var(--glass-rgb),.46));
    -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
    border:1px solid rgba(var(--glass-rgb),.9);
    box-shadow:0 20px 40px -18px rgba(var(--shadow-rgb),.45), inset 0 1px 0 rgba(var(--glass-rgb),1)}
  .nav{display:flex;flex-direction:column;align-items:center;gap:4px;width:56px;padding:7px 0;border-radius:18px;color:var(--muted2);transition:.18s;font-size:9.5px;font-weight:650}
  .nav svg{width:22px;height:22px;transition:.18s}
  .nav.on{color:var(--accent-ink);background:rgba(var(--accent-rgb),.16)}
  .nav:active{transform:scale(.94)}
  .fab{width:54px;height:54px;border-radius:19px;margin-top:-22px;display:grid;place-items:center;color:#fff;
    background:linear-gradient(150deg,var(--accent-light) 0%,var(--accent) 70%);
    box-shadow:0 16px 28px -12px rgba(var(--accent-rgb),.9), inset 0 1px 0 rgba(var(--glass-rgb),.5);transition:.18s}
  .fab svg{width:24px;height:24px}
  .fab:active{transform:scale(.93)}

  /* calendar */
  .cal{padding:16px;border-radius:26px;margin-top:6px}
  .cal head{display:flex;align-items:center;justify-content:space-between}
  .cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .cal-top b{font-size:15px;letter-spacing:-.01em}
  .cbtn{width:32px;height:32px;border-radius:12px;display:grid;place-items:center;color:var(--muted2);background:rgba(var(--glass-rgb),.55);border:1px solid rgba(var(--glass-rgb),.8)}
  .cbtn svg{width:15px;height:15px}
  .calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px 0}
  .calgrid .wd{text-align:center;font-size:10px;font-weight:700;color:var(--muted3);padding-bottom:6px}
  .cd{height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:12px;font-size:13px;font-weight:600;transition:.16s;position:relative}
  .cd.other{color:var(--muted3)}
  .cd .d{display:block;width:4px;height:4px;border-radius:50%;background:var(--accent-light)}
  .cd.today{color:var(--accent-ink);font-weight:750}
  .cd.sel{background:linear-gradient(150deg,var(--accent-light),var(--accent));color:#fff;box-shadow:0 8px 18px -8px rgba(var(--accent-rgb),.8)}
  .cd.sel .d{background:#fff}

  /* habits */
  .habit{padding:14px;border-radius:22px;margin-bottom:10px;display:flex;align-items:center;gap:12px}
  .hico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:19px;flex:0 0 auto;
    background:linear-gradient(150deg,rgba(var(--glass-rgb),.9),rgba(255,228,214,.7));border:1px solid rgba(var(--glass-rgb),.9)}
  .habit .hb{flex:1;min-width:0}
  .habit .hn{font-size:14px;font-weight:650;letter-spacing:-.01em}
  .habit .hs{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px}
  .habit .hs b{color:var(--accent-ink);font-weight:700}
  .week{display:flex;gap:4px;margin-top:9px}
  .week i{width:15px;height:15px;border-radius:6px;background:rgba(var(--ink-rgb),.06);display:block;transition:.2s}
  .week i.f{background:linear-gradient(145deg,var(--accent-light),var(--accent-deep))}
  .week i.t{box-shadow:0 0 0 1.5px var(--accent-deep) inset;background:transparent}
  .hcheck{width:34px;height:34px;border-radius:13px;display:grid;place-items:center;border:1.6px solid rgba(var(--ink-rgb),.14);flex:0 0 auto;color:#fff}
  .hcheck svg{width:16px;height:16px;opacity:0;transition:.2s}
  .hcheck.on{background:linear-gradient(145deg,var(--accent-light),var(--accent-deep));border-color:transparent;box-shadow:0 8px 16px -8px rgba(var(--accent-rgb),.8)}
  .hcheck.on svg{opacity:1}

  /* focus */
  .focus-wrap{margin-top:10px;padding:22px 18px 20px;border-radius:32px;text-align:center}
  .ftimer{position:relative;width:230px;height:230px;margin:4px auto 6px;display:grid;place-items:center}
  .ftimer svg{position:absolute;inset:0;transform:rotate(-90deg)}
  .ftimer .t{font-size:46px;font-weight:740;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
  .ftimer .st{font-size:11.5px;color:var(--muted2);letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-top:4px}
  .fbtns{display:flex;gap:10px;margin-top:16px}
  .btn{flex:1;width:100%;height:48px;border-radius:17px;font-size:14px;font-weight:700;display:grid;place-items:center;
    padding:0 14px;line-height:1.1;transition:.16s}
  .fbtns .btn{width:auto;min-width:0}
  .btn:active{transform:scale(.97)}
  .btn-primary{background:linear-gradient(150deg,var(--accent-light),var(--accent));color:#fff;box-shadow:0 14px 26px -12px rgba(var(--accent-rgb),.85), inset 0 1px 0 rgba(var(--glass-rgb),.45)}
  .btn-glass{background:rgba(var(--glass-rgb),.6);border:1px solid rgba(var(--glass-rgb),.9);color:var(--ink)}
  .fstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .stat{padding:14px;border-radius:20px}
  .stat b{display:block;font-size:20px;letter-spacing:-.03em}
  .stat span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

  /* stats */
  .chart{padding:16px;border-radius:26px;margin-top:6px}
  .bars{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;height:110px;margin-top:14px}
  .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
  .bar i{width:100%;max-width:26px;border-radius:8px;background:linear-gradient(180deg,var(--accent-light),var(--accent));display:block;transition:height .6s cubic-bezier(.2,.8,.2,1)}
  .bar.mut i{background:rgba(var(--accent-rgb),.22)}
  .bar span{font-size:9.5px;color:var(--muted3);font-weight:650}

  /* more */
  .listcard{padding:4px 0;border-radius:24px;overflow:hidden;margin-top:10px}
  .li{display:flex;align-items:center;gap:12px;padding:13px 15px;width:100%;text-align:left;transition:.15s}
  .li:active{background:rgba(var(--glass-rgb),.35)}
  .li .ico{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:rgba(var(--accent-rgb),.14);color:var(--accent-ink)}
  .li .ico svg{width:17px;height:17px}
  .li .lb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .li .lt{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
  .li .ls{display:block;font-size:11.5px;color:var(--muted);line-height:1.35}
  .li .chev{color:var(--muted3);flex:0 0 auto}
  .li .chev svg{width:16px;height:16px}
  .sep{height:1px;background:rgba(var(--ink-rgb),.06);margin:0 15px}

  .status-chip{font-size:10px;font-weight:750;padding:3px 7px;border-radius:999px}
  .ok{background:rgba(99,192,138,.16);color:#2E8B5A}
  .warn{background:rgba(255,178,71,.18);color:#A96A12}
  .bad{background:rgba(255,90,90,.15);color:#C23B3B}

  .health{padding:16px;border-radius:26px;margin-top:10px;border:1px solid rgba(255,178,71,.35);
    background:linear-gradient(150deg,rgba(var(--glass-rgb),.85),rgba(var(--glass-rgb),.6))}
  .health h4{margin:0;font-size:14px;display:flex;align-items:center;gap:8px}
  .health p{margin:7px 0 12px;font-size:12px;color:var(--muted);line-height:1.45}
  .checks{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
  .chk{display:flex;align-items:center;gap:8px;font-size:12.5px}
  .chk .c{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;flex:0 0 auto}
  .chk .c svg{width:11px;height:11px}
  .chk .c.done{background:rgba(99,192,138,.9);color:#fff}
  .chk .c.todo{background:rgba(255,178,71,.9);color:#fff}
  .chk span{margin-left:auto;font-size:11px;color:var(--muted2)}

  /* ---------- sheet ---------- */
  .backdrop{position:absolute;inset:0;z-index:50;background:rgba(var(--ink-rgb),.26);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .26s}
  .backdrop.on{opacity:1;pointer-events:auto}
  .sheet{position:absolute;z-index:55;left:0;right:0;bottom:0;transform:translateY(110%);transition:transform .34s cubic-bezier(.2,.9,.2,1);
    border-radius:30px 30px 0 0;padding:10px 20px 26px;
    background:linear-gradient(165deg,rgba(var(--glass-rgb),.96),rgba(var(--glass-rgb),.94));
    -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
    border-top:1px solid rgba(var(--glass-rgb),.95);box-shadow:0 -30px 60px -20px rgba(var(--shadow-rgb),.35)}
  .sheet.on{transform:none}
  .grab{width:38px;height:4px;border-radius:99px;background:rgba(var(--ink-rgb),.16);margin:0 auto 16px}
  .sheet h3{margin:0 0 4px;font-size:19px;letter-spacing:-.025em}
  .sheet .sh-sub{font-size:12px;color:var(--muted);margin-bottom:14px}
  .field{display:flex;align-items:center;gap:10px;height:52px;border-radius:17px;padding:0 14px;background:rgba(var(--glass-rgb),.72);
    border:1px solid rgba(var(--glass-rgb),.95);box-shadow:inset 0 1px 2px rgba(var(--shadow-rgb),.05);margin-bottom:12px}
  .field input{border:0;outline:0;background:transparent;width:100%;font-size:15px;font-weight:550}
  .field input::placeholder{color:var(--muted3);font-weight:450}
  .field .mic{color:var(--muted2)}
  .field svg{width:18px;height:18px}
  .chips{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:12px}
  .chip{flex:0 0 auto;display:flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:12px;font-size:12.5px;font-weight:600;
    background:rgba(var(--glass-rgb),.6);border:1px solid rgba(var(--glass-rgb),.9);color:var(--ink);transition:.16s}
  .chip svg{width:13px;height:13px;color:var(--accent-ink)}
  .chip.on{background:rgba(var(--accent-rgb),.17);border-color:rgba(var(--accent-rgb),.35);color:var(--accent-ink)}
  .seg{display:flex;padding:4px;border-radius:15px;background:rgba(var(--ink-rgb),.05);margin-bottom:12px}
  .seg button{flex:1;height:40px;border-radius:12px;font-size:12px;font-weight:650;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);transition:.18s}
  .seg button svg{width:15px;height:15px}
  .seg button.on{background:linear-gradient(150deg,rgba(var(--glass-rgb),.98),rgba(var(--glass-rgb),.95));color:var(--accent-ink);
    box-shadow:0 6px 14px -8px rgba(var(--shadow-rgb),.5), inset 0 1px 0 #fff}
  .sub-label{font-size:10.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);margin:4px 2px 7px}
  .save{width:100%;margin-top:6px}

  /* ---------- alarm overlay ---------- */
  .alarm{position:absolute;inset:0;z-index:70;display:flex;flex-direction:column;justify-content:space-between;
    padding:74px 26px 34px;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .3s;
    background:
      radial-gradient(520px 420px at 20% 12%, rgba(255,176,140,.95), rgba(255,176,140,0) 62%),
      radial-gradient(480px 400px at 90% 78%, rgba(214,196,255,.9), rgba(214,196,255,0) 60%),
      linear-gradient(165deg,var(--bg-1),var(--bg-3) 55%,#EFE6FF)}
  .alarm.on{opacity:1;pointer-events:auto}
  .alarm .top{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
  .alarm .top .pill{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(var(--glass-rgb),.6);border:1px solid rgba(var(--glass-rgb),.9)}
  .alarm .mid{text-align:center;margin-top:-10px}
  .alarm .big{font-size:64px;font-weight:760;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1}
  .alarm .date{font-size:13px;color:var(--muted2);margin-top:6px;font-weight:600}
  .alarm .card{margin-top:26px;padding:22px 20px;border-radius:28px;text-align:left;
    background:linear-gradient(150deg,rgba(var(--glass-rgb),.78),rgba(var(--glass-rgb),.48));border:1px solid rgba(var(--glass-rgb),.95);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow:0 24px 50px -24px rgba(var(--shadow-rgb),.5), inset 0 1px 0 #fff}
  .alarm .card .k{font-size:10.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:7px}
  .alarm .card .t{font-size:22px;font-weight:720;letter-spacing:-.025em;line-height:1.2}
  .alarm .card .m{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .alarm .bottom{display:flex;flex-direction:column;gap:10px}
  .alarm .snooze{height:56px;border-radius:20px;display:grid;place-items:center;font-size:15px;font-weight:700;color:var(--muted2);
    background:rgba(var(--glass-rgb),.62);border:1px solid rgba(var(--glass-rgb),.95);box-shadow:0 10px 24px -16px rgba(var(--shadow-rgb),.6)}
  .alarm .done-big{height:60px;border-radius:21px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:16px;font-weight:740;color:#fff;
    background:linear-gradient(150deg,var(--accent-light),var(--accent-deep));box-shadow:0 20px 36px -16px rgba(var(--accent-rgb),.9), inset 0 1px 0 rgba(var(--glass-rgb),.45)}
  .alarm .done-big svg{width:20px;height:20px}
  .alarm .sound{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--muted2);padding-top:2px}

  /* permission / test sheet */
  .bigsheet{position:absolute;z-index:60;left:10px;right:10px;bottom:10px;border-radius:30px;padding:20px;transform:translateY(120%);
    transition:transform .34s cubic-bezier(.2,.9,.2,1);
    background:linear-gradient(165deg,rgba(var(--glass-rgb),.97),rgba(var(--glass-rgb),.95));border:1px solid rgba(var(--glass-rgb),.95);
    box-shadow:0 -20px 60px -20px rgba(var(--shadow-rgb),.4)}
  .bigsheet.on{transform:none}
  .bigsheet h3{margin:0 0 4px;font-size:18px;letter-spacing:-.02em}
  .bigsheet p{margin:0 0 14px;font-size:12.5px;color:var(--muted);line-height:1.5}
  .steps{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
  .step{display:flex;gap:10px;font-size:12.5px;line-height:1.4;color:var(--ink)}
  .step b{width:20px;height:20px;border-radius:7px;background:rgba(var(--accent-rgb),.18);color:var(--accent-ink);display:grid;place-items:center;
    font-size:10.5px;flex:0 0 auto}

  .toast{position:absolute;z-index:80;left:50%;bottom:104px;transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:.28s;
    padding:10px 16px;border-radius:14px;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;
    background:rgba(var(--glass-rgb),.92);border:1px solid rgba(var(--glass-rgb),1);box-shadow:0 16px 30px -16px rgba(var(--shadow-rgb),.6)}
  .toast.on{opacity:1;transform:translate(-50%,0)}

/* ================= APP (WebView) overrides ================= */
html,body{height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none}
.stage{display:block;height:100dvh;padding:0}
.side{display:none!important}
.phone{width:100%;height:100dvh;max-height:none;border-radius:0;box-shadow:none}
.status,.island{display:none!important}
.screen{padding:calc(20px + env(safe-area-inset-top)) 20px calc(118px + env(safe-area-inset-bottom))}
.dock{bottom:calc(14px + env(safe-area-inset-bottom))}
.topbar{margin-top:2px}
.sheet{padding-bottom:calc(26px + env(safe-area-inset-bottom));z-index:55}
.bigsheet{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.alarm{padding-top:calc(46px + env(safe-area-inset-top));padding-bottom:calc(30px + env(safe-area-inset-bottom))}
.hidden{display:none!important}

/* time & date inputs stick to the chip look */
.chip input{background:transparent;border:0;outline:0;font:inherit;color:inherit;font-weight:650;width:auto}
.chip input[type="time"]{width:46px}
.chip input[type="date"]{width:92px;font-size:12px}
.chip input::-webkit-calendar-picker-indicator{display:none}
.chip.date{min-width:92px;justify-content:center}
.chip.date span{font-size:11px;opacity:.7;margin-right:2px}

/* quick access tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.tile{padding:13px 14px;border-radius:20px;text-align:left;display:flex;flex-direction:column;gap:3px;transition:.16s}
.tile:active{transform:scale(.985)}
.tile b{font-size:13.5px;font-weight:680;letter-spacing:-.01em}
.tile span{font-size:11px;color:var(--muted)}
.tile .ti{font-size:15px;margin-bottom:1px}

/* dynamic additions */
.habit-add{width:100%;display:flex;align-items:center;gap:9px;padding:13px 15px;border-radius:20px;
  border:1.4px dashed rgba(180,71,43,.28);color:var(--accent-ink);font-size:12.5px;font-weight:650;margin-top:2px}
.habit-new{display:flex;align-items:center;gap:9px;margin-top:9px}
.habit-new input{flex:1;height:46px;border-radius:16px;padding:0 14px;border:1px solid rgba(var(--glass-rgb),.95);
  background:rgba(var(--glass-rgb),.75);outline:0;font-size:14px}
.habit-new .ok{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,var(--accent-light),var(--accent-deep));box-shadow:0 10px 20px -10px rgba(var(--accent-rgb),.8)}

.danger{color:#C23B3B!important}
.linkrow{width:100%;text-align:center;font-size:12px;font-weight:650;color:var(--accent-ink);padding:14px 0 2px}
.empty-cta{margin-top:12px;color:var(--accent-ink);font-weight:700}

.badge-ok{background:rgba(99,192,138,.18);color:#2E8B5A;border:1px solid rgba(99,192,138,.3)}
.badge-warn{background:rgba(255,178,71,.2);color:#A96A12;border:1px solid rgba(255,178,71,.35)}

.mutedsmall{font-size:11px;color:var(--muted3);line-height:1.5}

.chk span{margin-left:0}
.chk .status-chip{margin-left:auto}


.sheet{max-height:96dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet::-webkit-scrollbar{width:0}