:root{
    --ink:#2b2340; --muted:#8b84a0; --line:#ece6f3; --card:#ffffff;
    --m:#ff7a3d; --m-soft:#fff2e8; --m-grad:linear-gradient(135deg,#ffc06b,#ff6f61);
    --a:#13a88a; --a-soft:#e5f8f2; --a-grad:linear-gradient(135deg,#5be0b3,#1ea7d6);
    --e:#7b5cff; --e-soft:#f0ecff; --e-grad:linear-gradient(135deg,#a083ff,#e35fcf);
    --pink:#ff5d8f; --red:#f04b5a; --red-soft:#ffe8ea; --green:#22b573; --green-soft:#dcf7ea; --blue:#3d8bff; --blue-soft:#e7f0ff; --gold:#ffb703;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    color:var(--ink); font:15px/1.45 Nunito,system-ui,sans-serif; -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(circle at 8% 0%, #ffd9e8 0, transparent 32%),
      radial-gradient(circle at 100% 18%, #d6f0ff 0, transparent 34%),
      radial-gradient(circle at 0% 75%, #fff0b8 0, transparent 32%),
      radial-gradient(circle at 100% 100%, #e6deff 0, transparent 38%),
      #fffaf6;
    background-attachment:fixed; min-height:100vh;
  }
  body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;
    background-image:radial-gradient(#e9dff3 1.2px, transparent 1.3px);background-size:18px 18px}
  .wrap{position:relative;max-width:600px;margin:0 auto;padding:18px 14px 110px}
  .hand{font-family:Kalam,cursive}

  /* ---------- banner ---------- */
  .banner{position:relative;border-radius:26px;padding:22px 20px 20px;color:#fff;overflow:hidden;
    background:linear-gradient(120deg,#ff6fa5 0%,#ff8f5a 45%,#ffc94d 100%);
    box-shadow:0 10px 30px -12px rgba(255,111,165,.6)}
  .banner .doodles{position:absolute;inset:0;pointer-events:none}
  .banner .row{position:relative;display:flex;align-items:center;gap:14px}
  .banner .titles{flex:1;min-width:0}
  .banner .hi{font-weight:700;font-size:13px;opacity:.95}
  .banner h1{font:700 32px/1.05 Kalam,cursive;margin:2px 0 4px;text-shadow:0 2px 0 rgba(0,0,0,.08)}
  .banner .date{font:700 17px Kalam,cursive;background:rgba(255,255,255,.25);display:inline-block;padding:1px 10px;border-radius:20px}
  .ring{flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#fff var(--p), rgba(255,255,255,.3) 0)}
  .ring div{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--pink);display:grid;place-items:center;text-align:center;line-height:1}
  .ring b{font-size:20px;font-weight:800}
  .ring small{display:block;font-size:10px;color:var(--muted);font-weight:700;margin-top:2px}
  .chips{position:relative;display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
  .chip{background:rgba(255,255,255,.92);color:var(--ink);font-weight:800;font-size:12px;padding:5px 10px;border-radius:20px}

  /* ---------- tabs ---------- */
  .tabs{position:sticky;top:8px;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 0;padding:6px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-radius:18px;box-shadow:0 4px 18px -8px rgba(80,50,120,.25)}
  .tabs button{border:0;background:transparent;color:var(--muted);font:800 12.5px Nunito,sans-serif;padding:8px 2px 7px;border-radius:13px;cursor:pointer;line-height:1.2}
  .tabs button .em{display:block;font-size:19px;margin-bottom:1px}
  .tabs button.on{color:#fff}
  .tabs button[data-tab=today].on{background:linear-gradient(135deg,#ff8f5a,#ff5d8f)}
  .tabs button[data-tab=cal].on{background:linear-gradient(135deg,#5b8cff,#8f5bff)}
  .tabs button[data-tab=done].on{background:linear-gradient(135deg,#2ec98a,#13a8a0)}
  .tabs button[data-tab=mail].on{background:linear-gradient(135deg,#ffb703,#ff7a3d)}

  /* ---------- cards ---------- */
  .card{position:relative;background:var(--card);border-radius:22px;padding:18px 16px 14px;margin:18px 0 0;border:2px solid var(--line);box-shadow:0 6px 20px -14px rgba(60,30,100,.35)}
  .tape{position:absolute;top:-11px;left:22px;width:76px;height:22px;transform:rotate(-4deg);border-radius:3px;opacity:.85;
    background:repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 6px, transparent 6px 12px), var(--tc,#ffb3cf)}
  .tape.r{left:auto;right:22px;transform:rotate(5deg)}
  .p-morning{border-color:#ffd2b8;background:linear-gradient(180deg,var(--m-soft),#fff 70%)}
  .p-afternoon{border-color:#b9ecdc;background:linear-gradient(180deg,var(--a-soft),#fff 70%)}
  .p-evening{border-color:#d9cfff;background:linear-gradient(180deg,var(--e-soft),#fff 70%)}
  .p-morning{--pc:var(--m);--pg:var(--m-grad);--tc:#ffc59e}
  .p-afternoon{--pc:var(--a);--pg:var(--a-grad);--tc:#9fe6cf}
  .p-evening{--pc:var(--e);--pg:var(--e-grad);--tc:#cbbcff}
  .chead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .badge{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:var(--pg);box-shadow:0 4px 10px -4px var(--pc)}
  .chead h2{font:700 22px/1 Kalam,cursive;margin:0;flex:1}
  .chead .sub{display:block;font:700 11px Nunito,sans-serif;color:var(--muted);margin-top:3px}
  .pill{font-weight:800;font-size:12px;padding:4px 9px;border-radius:20px;background:#fff;border:1.5px solid var(--pc);color:var(--pc)}
  .pill.full{background:var(--pc);color:#fff}
  .mini{height:6px;border-radius:6px;background:rgba(0,0,0,.06);overflow:hidden;margin:2px 0 8px}
  .mini i{display:block;height:100%;background:var(--pg);transition:width .35s}

  ul.tasks{list-style:none;margin:0;padding:0}
  ul.tasks li{display:flex;align-items:flex-start;gap:10px;padding:9px 2px;border-bottom:1.5px dashed var(--line)}
  ul.tasks li:last-child{border-bottom:0}
  .box{flex:none;width:24px;height:24px;margin-top:1px;border-radius:8px;border:2.5px solid var(--pc,var(--blue));background:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .15s}
  .box svg{width:14px;height:14px;opacity:0}
  li.done .box{background:var(--pc,var(--blue))}
  li.done .box svg{opacity:1}
  .box.pop{animation:pop .3s}
  @keyframes pop{50%{transform:scale(1.3)}}
  li.leaving{animation:leave .38s ease-in forwards}
  @keyframes leave{60%{opacity:.6;transform:translateX(20px)}100%{opacity:0;transform:translateX(60px);max-height:0;padding:0}}
  .donebox{border-color:#b5ecd2;background:linear-gradient(180deg,#e6faf0,#fff 70%);--pc:var(--green);--pg:linear-gradient(135deg,#5be0b3,#22b573);--tc:#a6ebd3}
  .txt{flex:1;min-width:0;word-wrap:break-word;font-weight:600;padding-top:2px}
  li.done .txt{color:var(--ink)}
  .donelink{display:flex;align-items:center;gap:10px;width:100%;margin-top:18px;border:2px solid #b5ecd2;background:linear-gradient(135deg,#e6faf0,#fff);border-radius:18px;padding:12px 14px;font:800 14.5px Nunito,sans-serif;color:var(--green);cursor:pointer;text-align:left}
  .donelink span{margin-left:auto;font-size:18px}
  .tag{display:inline-block;font:800 11px Nunito,sans-serif;padding:1px 7px;border-radius:10px;margin-left:4px;vertical-align:1px}
  .tag.late{background:var(--red-soft);color:var(--red)}
  .tag.dt{background:var(--blue-soft);color:var(--blue)}
  .tag.p-morning{background:var(--m-soft);color:var(--m);border:0}
  .tag.p-afternoon{background:var(--a-soft);color:var(--a);border:0}
  .tag.p-evening{background:var(--e-soft);color:var(--e);border:0}
  .ibtn{flex:none;border:0;background:transparent;width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:16px;color:#c3bdd2;display:grid;place-items:center}
  .ibtn:hover{background:rgba(0,0,0,.05)}
  .ibtn.star.on{color:var(--gold)}
  .ibtn.go{font:800 11px Nunito,sans-serif;width:auto;padding:0 9px;background:var(--red-soft);color:var(--red)}

  form.add{display:flex;gap:8px;margin-top:8px}
  form.add input{flex:1;min-width:0;border:2px dashed color-mix(in srgb,var(--pc,#bbb) 45%, #fff);background:rgba(255,255,255,.75);color:var(--ink);border-radius:14px;padding:10px 12px;font:600 14.5px Nunito,sans-serif;outline:none}
  form.add input:focus{border-style:solid;border-color:var(--pc,#bbb);background:#fff}
  form.add button{flex:none;width:44px;border:0;border-radius:14px;background:var(--pg,var(--pink));color:#fff;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 4px 10px -4px var(--pc,#999)}
  .empty{color:var(--muted);font-size:13.5px;font-weight:600;padding:4px 2px 2px}

  .overdue{border-color:#ffc4ca;background:linear-gradient(180deg,#fff0f1,#fff 75%);--pc:var(--red);--pg:linear-gradient(135deg,#ff8a8a,#f04b5a);--tc:#ffb0b8}
  .overdue .smallbtn{border:0;background:var(--red);color:#fff;font:800 12px Nunito,sans-serif;padding:6px 10px;border-radius:10px;cursor:pointer}

  /* ---------- calendar ---------- */
  .cal{padding:0;overflow:visible;border-color:#d8d2ff}
  .cal .top{border-radius:20px 20px 0 0;padding:16px 14px 14px;color:#fff;background:linear-gradient(120deg,#5b8cff,#8f5bff 55%,#e35fcf);position:relative;overflow:hidden}
  .cal .top .row{position:relative;display:flex;align-items:center;justify-content:space-between}
  .cal .top h2{margin:0;font:700 26px/1 Kalam,cursive;text-align:center}
  .cal .top h2 small{display:block;font:700 12px Nunito,sans-serif;opacity:.9;margin-top:4px}
  .navb{border:0;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.25);color:#fff;font-size:20px;font-weight:800;cursor:pointer}
  .todaybtn{position:relative;display:block;margin:10px auto 0;border:0;background:#fff;color:#7b5cff;font:800 12px Nunito,sans-serif;padding:5px 12px;border-radius:20px;cursor:pointer}
  .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:12px 10px 6px}
  .wd{text-align:center;font:800 11px Nunito,sans-serif;color:var(--muted);text-transform:uppercase;padding-bottom:2px}
  .wd.we{color:var(--pink)}
  .cell{position:relative;aspect-ratio:1/1.08;border:0;border-radius:13px;background:#faf8fd;cursor:pointer;padding:4px 2px 0;display:flex;flex-direction:column;align-items:center;font:800 14px Nunito,sans-serif;color:var(--ink);overflow:hidden;transition:transform .12s}
  .cell:active{transform:scale(.94)}
  .cell.out{visibility:hidden}
  .cell.past{color:#b6b0c4}
  .cell.we .n{color:var(--pink)}
  .cell.past.we .n{color:#f0a9c0}
  .cell .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
  .cell.plan{background:var(--blue-soft)}
  .cell.all{background:var(--green-soft)}
  .cell.miss{background:var(--red-soft)}
  .cell.today .n{box-shadow:0 0 0 2.5px var(--pink);color:var(--pink)}
  .cell.sel{box-shadow:0 0 0 2.5px #7b5cff inset}
  .cell.sel .n{background:linear-gradient(135deg,#5b8cff,#8f5bff);color:#fff;box-shadow:none}
  .dots{display:flex;gap:3px;margin-top:3px;height:7px}
  .dots i{width:7px;height:7px;border-radius:50%}
  .dots .dm{background:var(--m)} .dots .da{background:var(--a)} .dots .de{background:var(--e)} .dots .dn{background:#9aa3b5}
  .mark{position:absolute;top:2px;right:3px;font-size:10px;font-weight:900}
  .cell.all .mark{color:var(--green)} .cell.miss .mark{color:var(--red)}
  .cbar{position:absolute;left:5px;right:5px;bottom:4px;height:4px;border-radius:4px;background:rgba(0,0,0,.07);overflow:hidden}
  .cbar i{display:block;height:100%;background:linear-gradient(90deg,#5b8cff,#2ec98a)}
  .legend{display:flex;flex-wrap:wrap;gap:6px 10px;padding:6px 12px 14px;font:700 11.5px Nunito,sans-serif;color:var(--muted)}
  .legend span{display:inline-flex;align-items:center;gap:5px}
  .legend .sw{width:12px;height:12px;border-radius:4px}
  .legend .dot{width:8px;height:8px;border-radius:50%}
  .dayhead{display:flex;align-items:center;gap:10px;margin:22px 4px 0}
  .dayhead .big{font:700 22px/1.1 Kalam,cursive}
  .dayhead .when{font:800 12px Nunito,sans-serif;color:#fff;padding:3px 10px;border-radius:20px;background:linear-gradient(135deg,#5b8cff,#8f5bff)}
  .dayhead .when.past{background:#b6b0c4}
  .dayhead .when.now{background:linear-gradient(135deg,#ff8f5a,#ff5d8f)}
  .someday{border-color:#ffe08a;background:linear-gradient(180deg,#fff9e0,#fff 75%);--pc:#e0a100;--pg:linear-gradient(135deg,#ffd54d,#ffa53d);--tc:#ffe38f}

  /* ---------- stats ---------- */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .stat{border-radius:18px;padding:12px 8px;text-align:center;color:#fff}
  .stat b{display:block;font:800 26px/1 Nunito,sans-serif}
  .stat span{font:800 11.5px Nunito,sans-serif;opacity:.95}
  .s1{background:linear-gradient(135deg,#ff9f43,#ff5d8f)}
  .s2{background:linear-gradient(135deg,#2ec98a,#13a8a0)}
  .s3{background:linear-gradient(135deg,#5b8cff,#8f5bff)}
  .week{display:flex;justify-content:space-between;align-items:flex-end;height:96px;padding:6px 4px 0;gap:6px}
  .week div{flex:1;text-align:center;font:800 11px Nunito,sans-serif;color:var(--muted)}
  .week .b{margin:0 auto 4px;width:100%;max-width:30px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#5be0b3,#1ea7d6);min-height:4px}
  .week .b.z{background:#eee9f5}
  .week .v{color:var(--ink);font-size:11px}

  /* ---------- mail ---------- */
  .mailcard{border-color:#ffd88a;background:linear-gradient(180deg,#fff6e0,#fff 70%);--tc:#ffd27a}
  .envelope{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #ffe3a6;border-radius:16px;padding:12px}
  .envelope .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:linear-gradient(135deg,#ffd54d,#ff7a3d)}
  .envelope b{display:block;font-size:15px;word-break:break-all}
  .envelope span{font-size:12px;color:var(--muted);font-weight:700}
  .sched{display:grid;gap:8px;margin-top:12px}
  .sched div{display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:10px 12px;border:1.5px solid var(--line);font-weight:700;font-size:14px}
  .sched .t{margin-left:auto;font:800 12px Nunito,sans-serif;padding:3px 9px;border-radius:20px;color:#fff}
  .preview{white-space:pre-wrap;font:600 13px/1.5 ui-monospace,Menlo,monospace;background:#fbf9ff;border:1.5px dashed #d9cfff;border-radius:14px;padding:12px;margin-top:10px;max-height:340px;overflow:auto}
  .btnrow{display:flex;gap:8px;margin-top:10px}
  .btn{flex:1;border:0;border-radius:14px;padding:11px;font:800 14px Nunito,sans-serif;cursor:pointer;color:#fff;background:linear-gradient(135deg,#ff8f5a,#ff5d8f)}
  .btn.alt{background:#fff;color:var(--ink);border:2px solid var(--line)}
  .note{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:10px}

  /* ---------- sheet ---------- */
  .sheet{position:fixed;inset:0;background:rgba(43,35,64,.4);display:none;align-items:flex-end;justify-content:center;z-index:10}
  .sheet.open{display:flex}
  .sheet .boxw{background:#fff;width:100%;max-width:600px;border-radius:24px 24px 0 0;padding:20px 16px 26px;max-height:92vh;overflow:auto}
  .sheet h3{margin:0 0 12px;font:700 24px Kalam,cursive}
  .sheet label.l{display:block;font:800 12px Nunito,sans-serif;color:var(--muted);margin:10px 0 5px}
  .sheet input[type=text],.sheet input[type=date]{width:100%;border:2px solid var(--line);border-radius:12px;padding:11px 12px;font:600 15px Nunito,sans-serif;color:var(--ink);background:#fbf9ff}
  .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .seg button{border:2px solid var(--line);background:#fff;border-radius:12px;padding:9px 4px;font:800 13px Nunito,sans-serif;cursor:pointer;color:var(--ink)}
  .seg button.on[data-p=morning]{border-color:var(--m);background:var(--m-soft);color:var(--m)}
  .seg button.on[data-p=afternoon]{border-color:var(--a);background:var(--a-soft);color:var(--a)}
  .seg button.on[data-p=evening]{border-color:var(--e);background:var(--e-soft);color:var(--e)}
  .quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .quick button{border:0;background:var(--blue-soft);color:var(--blue);font:800 12px Nunito,sans-serif;padding:6px 10px;border-radius:20px;cursor:pointer}
  .quick button.sd{background:#fff4cc;color:#b88400}
  .sheet .acts{display:flex;gap:8px;margin-top:18px}
  .sheet .acts button{flex:1;border-radius:14px;padding:12px;font:800 14px Nunito,sans-serif;cursor:pointer;border:2px solid var(--line);background:#fff;color:var(--ink)}
  .sheet .acts .save{border:0;color:#fff;background:linear-gradient(135deg,#5b8cff,#8f5bff)}
  .sheet .acts .del{color:var(--red)}
  .starrow{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:700}

  .toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font:800 13px Nunito,sans-serif;padding:8px 14px;border-radius:20px;opacity:0;transition:.25s;pointer-events:none;z-index:20}
  .toast.show{opacity:.95;transform:translateX(-50%)}
  .confetti{position:fixed;top:40%;left:50%;pointer-events:none;z-index:30;font-size:20px;animation:fly 1.5s ease-out forwards}
  @keyframes fly{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
  .tabs button{position:relative}
  .nb{position:absolute;top:2px;right:8px;min-width:18px;height:18px;border-radius:9px;background:#3b82f6;color:#fff;font:800 11px/18px Nunito,sans-serif;padding:0 5px}
  .nb.bump{animation:bump .5s}
  @keyframes bump{40%{transform:scale(1.6)}}
  .ver{text-align:center;font:700 11px Nunito,sans-serif;color:#b6b0c4;margin-top:26px}
  .bstar{width:22px;height:22px;flex:none}
  .starred{border-color:#bcd3ff;background:linear-gradient(180deg,#eaf2ff,#fff 70%);--pc:#3b82f6;--pg:linear-gradient(135deg,#6aa8ff,#3b6dff);--tc:#a9c8ff}
  .em-row{display:flex;gap:10px;padding:11px 2px;border-bottom:1.5px dashed var(--line)}
  .em-row:last-child{border-bottom:0}
  .em-row .body{flex:1;min-width:0}
  .em-row .from{font-weight:800;font-size:14.5px;display:flex;justify-content:space-between;gap:8px}
  .em-row .from span{font-weight:700;font-size:12px;color:var(--muted);flex:none}
  .em-row .subj{font-weight:700;font-size:14px;margin-top:1px}
  .em-row .snip{font-size:12.5px;color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .em-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .em-acts button,.em-acts a{border:0;text-decoration:none;font:800 12px Nunito,sans-serif;padding:6px 10px;border-radius:10px;cursor:pointer}
  .em-acts .plan{background:linear-gradient(135deg,#6aa8ff,#3b6dff);color:#fff}
  .em-acts .ok{background:var(--green-soft);color:var(--green)}
  .em-acts .no{background:#f2eff7;color:var(--muted)}
  .em-acts a{background:var(--blue-soft);color:var(--blue)}
  .sorts{display:flex;gap:6px;margin:0 0 6px}
  .sorts button{border:1.5px solid var(--line);background:#fff;color:var(--muted);font:800 12px Nunito,sans-serif;padding:5px 10px;border-radius:20px;cursor:pointer}
  .sorts button.on{border-color:#3b82f6;color:#3b82f6;background:#eaf2ff}
  .tag.mail{background:#eaf2ff;color:#3b6dff;text-decoration:none}
.sugg{margin-top:5px;font-size:12.5px;font-weight:600;color:#3b6dff;background:#f3f7ff;border-radius:10px;padding:5px 8px}
  .rbtn{border:0;border-radius:12px;padding:7px 12px;font:800 13px Nunito,sans-serif;color:#fff;background:linear-gradient(135deg,#6aa8ff,#3b6dff);cursor:pointer;box-shadow:0 4px 10px -4px #3b6dff}
  .rbtn[disabled]{opacity:.6}
  .syncline{font-size:12px;color:var(--muted);font-weight:700;margin:-2px 0 8px}
  .voice{border-color:#ffc4dd;background:linear-gradient(135deg,#fff0f6,#f3efff 60%,#e9f6ff);--tc:#ffb3d1}
  .voice form{display:flex;gap:8px;align-items:center}
  .voice .mic{flex:none;width:52px;height:52px;border-radius:50%;border:0;font-size:24px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#ff6fa5,#8f5bff);box-shadow:0 6px 16px -6px #ff6fa5;animation:pulse 2.4s infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,111,165,.45)}50%{box-shadow:0 0 0 10px rgba(255,111,165,0)}}
  .voice input{flex:1;min-width:0;border:2px solid #f3d3e4;background:#fff;border-radius:16px;padding:13px 12px;font:700 15px Nunito,sans-serif;color:var(--ink);outline:none}
  .voice input:focus{border-color:#ff6fa5}
  .voice .go{flex:none;border:0;border-radius:14px;padding:0 14px;height:48px;font:800 14px Nunito,sans-serif;color:#fff;background:linear-gradient(135deg,#ff8f5a,#ff5d8f);cursor:pointer}
  .vprev{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;min-height:22px}
  .vprev span{font:800 12px Nunito,sans-serif;padding:3px 9px;border-radius:20px;background:#fff;border:1.5px solid var(--line)}
  .vtip{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:8px}
  .vtip b{color:#d6407f}
  [hidden]{display:none!important}

  .sync{text-align:center;font:800 12px Nunito,sans-serif;margin-top:22px;color:var(--muted)}
  .sync.ok{color:var(--green)} .sync.off{color:var(--red)}
  .loginwrap{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(43,35,64,.45);backdrop-filter:blur(6px)}
  .login{background:#fff;border-radius:24px;padding:26px 22px;max-width:360px;width:100%;text-align:center;box-shadow:0 20px 50px -20px rgba(0,0,0,.4)}
  .login h3{font:700 24px Kalam,cursive;margin:6px 0}
  .login p{color:var(--muted);font-weight:600;font-size:13.5px;margin:0 0 14px}
  .login input{width:100%;border:2px solid var(--line);border-radius:14px;padding:12px;font:700 16px Nunito,sans-serif;margin-bottom:10px}
  .login button{width:100%;border:0;border-radius:14px;padding:12px;font:800 15px Nunito,sans-serif;color:#fff;background:linear-gradient(135deg,#ff8f5a,#ff5d8f);cursor:pointer}