:root{
      --bg:#04050a;--ink:#eef2ff;--muted:#8b95b0;--line:rgba(140,160,255,.14);
      --a:#6ee7ff;--b:#8b5cff;--c:#ff4fd8;--rose:#ff5d73;--acc:var(--a);
      --grad:linear-gradient(120deg,var(--a),var(--b) 55%,var(--c));
      --glass:rgba(14,17,30,.66);
      --display:'Space Grotesk',Alexandria,system-ui,sans-serif;
    }
    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    html{-webkit-text-size-adjust:100%;background:var(--bg)}
    body{margin:0;color:var(--ink);font-family:Alexandria,system-ui,sans-serif;background:var(--bg);overflow-x:hidden;min-height:100vh}

    /* ===== boot overlay (fades out by CSS even if JS fails) ===== */
    .boot{position:fixed;inset:0;z-index:100;background:#04050a;display:grid;place-content:center;justify-items:center;gap:22px;animation:bootout .7s ease 2.3s forwards}
    @keyframes bootout{to{opacity:0;visibility:hidden}}
    .boot.skip{animation-duration:.01s;animation-delay:0s}
    .boot-core{width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--a),transparent 30%,var(--b) 55%,transparent 75%,var(--c));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:rot 1.2s linear infinite;filter:drop-shadow(0 0 14px var(--a))}
    @keyframes rot{to{transform:rotate(360deg)}}
    .boot pre{margin:0;font:500 12px/1.9 var(--display);letter-spacing:2px;color:#8fb7da;text-align:left;min-height:96px}
    .boot pre b{color:var(--a)}

    /* ===== 3D background ===== */
    .bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
    .bg:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 85% -5%,rgba(139,92,255,.28),transparent 60%),radial-gradient(ellipse 55% 45% at 0% 40%,rgba(255,79,216,.13),transparent 60%),radial-gradient(ellipse 60% 40% at 50% 110%,rgba(110,231,255,.16),transparent 60%)}
    .floor{position:absolute;left:-60%;right:-60%;bottom:-8vh;height:70vh;transform-origin:50% 100%;transform:perspective(520px) rotateX(64deg);background:
      linear-gradient(90deg,rgba(110,231,255,.22) 1px,transparent 1px) 0 0/64px 64px,
      linear-gradient(0deg,rgba(139,92,255,.22) 1px,transparent 1px) 0 0/64px 64px;
      -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 85%);mask-image:linear-gradient(to top,#000 5%,transparent 85%);animation:floor 6s linear infinite}
    @keyframes floor{to{background-position:0 0,0 64px}}
    .orbit{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:drift 16s ease-in-out infinite alternate}
    .o1{width:340px;height:340px;background:var(--b);top:12%;left:6%}
    .o2{width:280px;height:280px;background:var(--a);bottom:14%;right:8%;animation-delay:-8s;opacity:.28}
    @keyframes drift{to{transform:translate3d(60px,-40px,0) scale(1.15)}}

    .app{position:relative;z-index:1;max-width:1480px;margin:auto;padding:24px 32px calc(48px + env(safe-area-inset-bottom))}

    /* ===== header ===== */
    .top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:26px}
    .brand{display:flex;align-items:center;gap:16px}
    .cube-wrap{width:30px;height:30px;perspective:240px;margin:6px}
    .cube{position:relative;width:30px;height:30px;transform-style:preserve-3d;animation:cube 10s linear infinite}
    .cube i{position:absolute;inset:0;border:1.5px solid var(--a);background:rgba(110,231,255,.07);box-shadow:inset 0 0 10px rgba(110,231,255,.35),0 0 12px rgba(110,231,255,.25)}
    .cube i:nth-child(1){transform:translateZ(15px)}.cube i:nth-child(2){transform:rotateY(180deg) translateZ(15px)}
    .cube i:nth-child(3){transform:rotateY(90deg) translateZ(15px);border-color:var(--b)}.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(15px);border-color:var(--b)}
    .cube i:nth-child(5){transform:rotateX(90deg) translateZ(15px);border-color:var(--c)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(15px);border-color:var(--c)}
    @keyframes cube{from{transform:rotateX(-28deg) rotateY(0)}to{transform:rotateX(-28deg) rotateY(360deg)}}
    .brand-text b{display:block;font:700 26px var(--display);letter-spacing:6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
    .brand-text small{display:block;margin-top:6px;font:500 10px var(--display);letter-spacing:5px;color:var(--muted)}
    .month-switch{display:flex;align-items:center;gap:8px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px;border:1px solid var(--line);border-radius:14px;font:600 14px var(--display);box-shadow:0 10px 30px -10px #000a}
    #monthLabel{min-width:132px;text-align:center;letter-spacing:.5px}
    .round{border:1px solid var(--line);background:linear-gradient(180deg,#1a2040,#0e1226);width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:20px;color:var(--ink);box-shadow:0 3px 0 #060814;transition:.12s}
    .round:active{transform:translateY(2px);box-shadow:0 1px 0 #060814}

    /* ===== cards ===== */
    .card{position:relative;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:20px;padding:24px;min-width:0;
      box-shadow:0 40px 70px -30px #000e,0 2px 0 rgba(255,255,255,.04) inset;overflow:hidden}
    .card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle 380px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.09),transparent 70%)}
    .card.hot:before{opacity:1}
    .card:after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.7;pointer-events:none}
    .tilt{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
    .tilt.hot{transition:transform .12s ease-out}
    .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
    .card h2{font:700 14px var(--display);margin:0;text-transform:uppercase;letter-spacing:2.2px}
    .sys{display:block;font:500 9px var(--display);letter-spacing:3px;color:var(--muted);margin-bottom:10px}
    .label,.date{color:var(--muted);font:500 11px var(--display);letter-spacing:1px}

    /* ===== hero ===== */
    .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:center;padding:36px 40px;margin-bottom:24px}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;font:600 11px var(--display);letter-spacing:3.5px;color:var(--a)}
    .hud-dot{width:7px;height:7px;border-radius:50%;background:var(--a);box-shadow:0 0 12px var(--a);display:inline-block;animation:pulse 2s infinite}
    @keyframes pulse{50%{opacity:.35}}
    .hero h1{margin:14px 0 8px;font:700 clamp(30px,3.6vw,52px)/1.05 var(--display);letter-spacing:-.5px;background:linear-gradient(120deg,#fff 10%,var(--a) 50%,var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
    .hero h2{font:600 20px Alexandria,var(--display);margin:0 0 4px;text-transform:none;letter-spacing:0;color:var(--ink)}
    .hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}
    #scoreSub{color:var(--a);font-weight:600;font-size:13px}
    .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
    .kpi{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;padding:13px 14px;box-shadow:0 8px 20px -10px #000a,inset 0 1px 0 rgba(255,255,255,.05)}
    .kpi small{display:block;font:500 9px var(--display);letter-spacing:2px;color:var(--muted);margin-bottom:8px;text-transform:uppercase}
    .kpi b{font:700 26px var(--display);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}

    /* ===== 3D orb ===== */
    .hero-orb{display:grid;place-items:center;min-height:300px}
    .orb{position:relative;width:min(300px,100%);aspect-ratio:1;perspective:900px}
    .orb-3d{position:absolute;inset:0;transform-style:preserve-3d;animation:spin 20s linear infinite}
    @keyframes spin{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}
    .o-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,var(--a),transparent 28%,var(--b) 52%,transparent 74%,var(--c));
      -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
    .r1{transform:rotateX(74deg)}.r2{transform:rotateY(74deg) scale(.9)}.r3{transform:rotateX(40deg) rotateY(40deg) scale(.78);opacity:.8}
    .hud-ring{position:absolute;inset:-7%;width:114%;height:114%;pointer-events:none;animation:rot 40s linear infinite reverse}
    .hud-ring circle{fill:none}
    .hud-ring .ticks{stroke:rgba(110,231,255,.5);stroke-width:1.6;stroke-dasharray:.35 1.75}
    .hud-ring .arcs{stroke:var(--a);stroke-width:.7;stroke-dasharray:14 36;opacity:.8}
    .core{position:absolute;inset:23%;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.4),rgba(110,231,255,.14) 28%,rgba(10,12,26,.92) 68%);
      box-shadow:0 0 60px rgba(110,231,255,.35),0 0 120px rgba(139,92,255,.3),inset -14px -18px 34px rgba(0,0,0,.6),inset 8px 8px 22px rgba(255,255,255,.1);animation:bob 5s ease-in-out infinite}
    @keyframes bob{50%{transform:translateY(-8px)}}
    .prog{position:absolute;inset:11%;width:78%;height:78%;transform:rotate(-90deg);filter:drop-shadow(0 0 8px rgba(110,231,255,.65))}
    .prog circle{fill:none;stroke-linecap:round;stroke-width:3.4}
    .prog .track{stroke:rgba(255,255,255,.08)}
    #progArc{stroke:url(#pg);stroke-dasharray:289.03;stroke-dashoffset:289.03;transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)}
    .orb-text{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:2;pointer-events:none}
    .orb-text strong{font:700 clamp(34px,4vw,48px) var(--display);line-height:1;text-shadow:0 0 24px rgba(110,231,255,.5)}
    .orb-text span{margin-top:6px;font:500 12px var(--display);letter-spacing:3px;color:var(--muted)}
    .shadow-floor{position:absolute;left:18%;right:18%;bottom:-28px;height:30px;border-radius:50%;background:radial-gradient(ellipse,rgba(110,231,255,.35),transparent 70%);filter:blur(8px)}

    /* ===== layout ===== */
    .content{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
    .col{display:grid;gap:24px;min-width:0}

    /* ===== ZEN assistant ===== */
    .zen{--acc:var(--b)}
    .zen-id{display:flex;align-items:center;gap:12px}
    .zen-orb{width:38px;height:38px;border-radius:50%;position:relative;flex:none;background:radial-gradient(circle,#fff 0,var(--a) 22%,transparent 60%);box-shadow:0 0 18px var(--a),0 0 40px rgba(139,92,255,.5);animation:pulse 2.4s infinite}
    .zen-orb:before{content:"";position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(var(--a),transparent 35%,var(--b) 60%,transparent 80%,var(--c));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));animation:rot 3s linear infinite}
    .mini{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#b5c0e0;border-radius:9px;padding:8px 11px;font:600 10px var(--display);letter-spacing:1.5px;cursor:pointer;text-transform:uppercase}
    .mini.on{border-color:var(--a);color:var(--a);box-shadow:0 0 14px -4px var(--a)}
    .zen-log{background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:14px;padding:12px 14px;height:150px;overflow-y:auto;font-size:13px;line-height:1.7;display:flex;flex-direction:column;gap:6px}
    .zen-log .ln{display:flex;gap:9px;align-items:baseline}
    .zen-log .pfx{font:600 10px var(--display);letter-spacing:1.5px;flex:none;color:var(--a)}
    .zen-log .me .pfx{color:var(--muted)}
    .zen-log .me{color:#9aa6c6}
    .zen-log .zen:last-child span:last-child:after{content:"▌";color:var(--a);animation:blink 1s steps(1) infinite;margin-left:2px}
    @keyframes blink{50%{opacity:0}}
    .zen-input{display:flex;align-items:center;gap:10px;margin-top:12px}
    .zen-input .prompt{font:700 18px var(--display);color:var(--a)}
    .zen-input input{flex:1;min-width:0;background:#070914;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-family:inherit;font-size:16px;outline:none;min-height:46px}
    .zen-input input:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(110,231,255,.12)}
    .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
    .chips button{border:1px solid var(--line);background:rgba(255,255,255,.03);color:#9fb0d6;border-radius:999px;padding:7px 12px;font:500 11px var(--display);cursor:pointer}
    .chips button:hover{border-color:var(--a);color:#fff}

    /* habits */
    .habit-list,.task-list{display:grid;gap:10px}
    .habit,.task{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);transition:transform .15s,border-color .2s,background .2s;box-shadow:0 8px 18px -12px #000}
    .habit:hover,.task:hover{transform:translateX(3px);border-color:rgba(110,231,255,.4)}
    .habit.done{background:linear-gradient(90deg,rgba(110,231,255,.1),rgba(110,231,255,.02));border-color:rgba(110,231,255,.4);border-left:3px solid var(--acc)}
    .check{appearance:none;-webkit-appearance:none;width:26px;height:26px;border:2px solid #4b557a;border-radius:8px;margin:0;cursor:pointer;display:grid;place-content:center;flex:none;transition:.2s;background:#070914}
    .check:checked{border-color:var(--acc);box-shadow:0 0 14px color-mix(in srgb,var(--acc) 55%,transparent),inset 0 0 8px color-mix(in srgb,var(--acc) 35%,transparent)}
    .check:checked:after{content:'✓';color:var(--acc);font-size:16px;font-weight:700}
    .emoji{background:#070914;border:1px solid var(--line);border-radius:10px;width:38px;height:38px;display:grid;place-items:center;flex:none;box-shadow:inset 0 0 12px rgba(139,92,255,.15)}
    .habit-name,.task-title{text-align:left}
    .habit-name{font-size:14px;font-weight:600;flex:1;min-width:0;overflow-wrap:anywhere}
    .remove{border:0;background:transparent;color:#6b7699;cursor:pointer;font-size:22px;width:38px;height:38px;flex:none;border-radius:8px}
    .remove:hover{color:var(--rose);background:rgba(255,93,115,.08)}
    .add-row{display:flex;gap:10px;margin-top:14px}
    .add-row input,.task-form input{flex:1;min-width:0;background:#070914;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-family:inherit;font-size:16px;outline:none;min-height:46px;transition:.2s}
    .add-row input:focus,.task-form input:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(110,231,255,.12)}
    .add{border:0;border-radius:12px;padding:0 22px;min-height:46px;background:var(--grad);color:#04050a;font:700 13px var(--display);letter-spacing:1px;cursor:pointer;box-shadow:0 4px 0 #3b2a8a,0 12px 24px -8px rgba(139,92,255,.6);transition:.12s;text-transform:uppercase}
    .add:hover{filter:brightness(1.1)}
    .add:active{transform:translateY(3px);box-shadow:0 1px 0 #3b2a8a,0 4px 10px -4px rgba(139,92,255,.6)}
    .templates{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
    .template{border:1px solid var(--line);background:rgba(255,255,255,.03);color:#b5c0e0;border-radius:10px;padding:10px 12px;font:600 10px var(--display);letter-spacing:1.5px;cursor:pointer;transition:.15s}
    .template:hover{border-color:var(--a);color:#fff;transform:translateY(-2px);box-shadow:0 8px 16px -8px rgba(110,231,255,.5)}
    .install-note{color:#6f7a99;font-size:11px;margin:16px 0 0;line-height:1.7}
    .checkin{margin-top:20px;padding:16px;border:1px solid var(--line);background:rgba(0,0,0,.28);border-radius:14px}
    .checkin-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
    .checkin-head b{display:block;font-size:13px}
    .checkin-head span{display:block;color:var(--muted);font-size:10px;margin-top:4px}
    .checkin select,.checkin textarea{background:#070914;color:var(--ink);border:1px solid var(--line);font:16px Alexandria,sans-serif;outline:none}
    .checkin select{border-radius:10px;padding:9px;max-width:170px;min-height:42px}
    .checkin textarea{width:100%;height:78px;resize:vertical;border-radius:12px;padding:12px;margin-top:12px}
    .checkin textarea:focus{border-color:var(--a)}
    .save-checkin{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#1a2040,#0e1226);color:#dce8ff;padding:11px 16px;font:600 11px var(--display);letter-spacing:1.5px;cursor:pointer;box-shadow:0 3px 0 #060814;text-transform:uppercase}
    .save-checkin:active{transform:translateY(2px);box-shadow:0 1px 0 #060814}

    .task-title{font-size:13px;font-weight:700;flex:1;min-width:0;overflow-wrap:anywhere}
    .due{font:500 10px var(--display);color:var(--muted);background:rgba(255,255,255,.05);border-radius:8px;padding:5px 8px;white-space:nowrap}
    .grade{font:600 11px var(--display);color:#ffd27a;background:rgba(255,190,80,.12);border-radius:8px;padding:5px 8px}
    .task-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
    .task-form input:first-child,.task-form .add{grid-column:1/-1}

    /* ===== stats: HUD ===== */
    .stat-total{display:flex;align-items:end;gap:12px;margin:0 0 16px}
    .stat-total strong{font:700 44px var(--display);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
    .stat-total span{font-size:12px;color:var(--muted);padding-bottom:6px}
    .chart-box{--hc:#6ee7ff;position:relative;border:1px solid color-mix(in srgb,var(--hc) 22%,transparent);border-radius:6px;padding:14px 12px 8px;
      background:
        linear-gradient(var(--hc),var(--hc)) 0 0/18px 2px no-repeat,linear-gradient(var(--hc),var(--hc)) 0 0/2px 18px no-repeat,
        linear-gradient(var(--hc),var(--hc)) 100% 0/18px 2px no-repeat,linear-gradient(var(--hc),var(--hc)) 100% 0/2px 18px no-repeat,
        linear-gradient(var(--hc),var(--hc)) 0 100%/18px 2px no-repeat,linear-gradient(var(--hc),var(--hc)) 0 100%/2px 18px no-repeat,
        linear-gradient(var(--hc),var(--hc)) 100% 100%/18px 2px no-repeat,linear-gradient(var(--hc),var(--hc)) 100% 100%/2px 18px no-repeat,
        radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--hc) 9%,transparent),transparent 70%),
        linear-gradient(160deg,#091024,#050813);
      box-shadow:0 0 40px -14px color-mix(in srgb,var(--hc) 60%,transparent),inset 0 0 50px rgba(0,0,0,.4)}
    .ch-head{display:flex;justify-content:space-between;align-items:center;margin:0 6px 6px}
    .ch-title{font:600 11px var(--display);letter-spacing:3px;color:#a9c4e6;text-transform:uppercase}
    .ch-live{display:inline-flex;align-items:center;gap:7px;font:600 9px var(--display);letter-spacing:2px;color:var(--hc)}
    .ch-live i{width:6px;height:6px;border-radius:50%;background:var(--hc);box-shadow:0 0 10px var(--hc);animation:pulse 1.4s infinite}
    .chart-box svg{display:block;width:100%;height:auto;overflow:visible}
    .chart-box text{font-family:'Space Grotesk',Arial,sans-serif;fill:#7f9cc2}
    .chart-box .axt{letter-spacing:.18em;font-size:9px;fill:#5f7aa0}
    .chart-box .grid{stroke:rgba(120,160,230,.13);stroke-width:1;stroke-dasharray:2 5}
    .chart-box .base{stroke:rgba(140,180,255,.35);stroke-width:1}
    .chart-box .tick{stroke:rgba(140,180,255,.35);stroke-width:1}
    .chart-box .avg{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:6 5}
    .chart-box .scan{animation:scan 5.5s linear infinite}
    @keyframes scan{from{transform:translateX(-50px)}to{transform:translateX(var(--pw,300px))}}
    .chart-box .ping{transform-box:fill-box;transform-origin:center;animation:ping 1.8s ease-out infinite}
    @keyframes ping{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}
    .table-box{margin-top:14px;overflow-x:auto;direction:ltr;border:1px solid var(--line);border-radius:10px;-webkit-overflow-scrolling:touch;background:rgba(0,0,0,.25)}
    .table-box::-webkit-scrollbar{height:8px}.table-box::-webkit-scrollbar-thumb{background:#2a3355;border-radius:6px}
    .table-box table{border-collapse:collapse;width:max-content;min-width:100%;font:12px var(--display)}
    .table-box td,.table-box th{border:1px solid rgba(140,160,255,.09);text-align:center;padding:8px 4px;min-width:46px;color:#c9d6f2}
    .table-box th{position:sticky;left:0;z-index:1;background:#0b0e1c;color:var(--muted);font-weight:600;font-size:10px;letter-spacing:1px}
    .table-box td.pc{font-weight:700;color:#fff;text-shadow:0 1px 6px #000a}
    .table-box td.now{box-shadow:inset 0 0 0 2px var(--a);color:var(--a);font-weight:700}

    .quit-card{--acc:#ff6b8a}
    .quit-card .check:checked{border-color:var(--rose)}
    .quit-card .check:checked:after{color:var(--rose)}
    .quit-card .habit.done{background:linear-gradient(90deg,rgba(255,93,115,.1),rgba(255,93,115,.02));border-color:rgba(255,93,115,.45)}
    .quit-card .habit:hover{border-color:rgba(255,93,115,.5)}
    .quit-score{font:600 11px var(--display);letter-spacing:1px;color:var(--rose);white-space:nowrap}
    .quit-card .stat-total strong{background:linear-gradient(120deg,#ff9a8b,#ff4f8b);-webkit-background-clip:text;background-clip:text}

    .toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);background:rgba(20,26,50,.95);border:1px solid var(--line);color:#fff;padding:12px 20px;border-radius:12px;font-size:13px;opacity:0;transition:.25s;pointer-events:none;z-index:20;max-width:90vw;text-align:center;backdrop-filter:blur(10px)}
    .toast.show{opacity:1;transform:translate(-50%,0)}

    @media(max-width:1100px){.app{padding:20px 20px calc(40px + env(safe-area-inset-bottom))}.content{grid-template-columns:1fr}.hero{grid-template-columns:1fr;padding:28px}.hero-orb{order:-1;min-height:260px}.orb{width:250px}}
    @media(max-width:600px){
      .app{padding:14px 12px calc(34px + env(safe-area-inset-bottom))}
      .top{margin-bottom:16px}.brand-text b{font-size:21px;letter-spacing:4px}
      .hero{padding:20px 16px;margin-bottom:16px;gap:6px}.hero-orb{min-height:230px}.orb{width:210px}
      .kpis{grid-template-columns:repeat(2,1fr);margin-top:20px}.kpi b{font-size:22px}
      .card{padding:16px;border-radius:16px}.content,.col{gap:16px}
      .stat-total strong{font-size:36px}.zen-log{height:170px}
      #monthLabel{min-width:104px}
    }
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.boot{display:none}}

    /* ===== v3 additions ===== */
    .hdr-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .install-btn{border:1px solid var(--a);background:rgba(110,231,255,.08);color:var(--a);border-radius:12px;padding:0 16px;min-height:42px;font:700 11px var(--display);letter-spacing:1.5px;cursor:pointer;text-transform:uppercase;box-shadow:0 0 18px -6px var(--a)}
    .install-btn[hidden]{display:none}

    .alerts{display:grid;gap:10px;margin-bottom:20px}
    .alerts:empty{display:none}
    .alert{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:13px;line-height:1.7}
    .alert .ico{font-size:18px;flex:none}
    .alert .txt{flex:1;min-width:180px}
    .alert.warn{border-color:rgba(255,190,80,.5);background:linear-gradient(90deg,rgba(255,190,80,.1),rgba(255,190,80,.02))}
    .alert.bad{border-color:rgba(255,93,115,.55);background:linear-gradient(90deg,rgba(255,93,115,.12),rgba(255,93,115,.02))}
    .alert.info{border-color:rgba(110,231,255,.4)}
    .alert button{border:1px solid var(--line);background:rgba(255,255,255,.05);color:#dce8ff;border-radius:10px;padding:8px 12px;font:600 10px var(--display);letter-spacing:1.2px;cursor:pointer;text-transform:uppercase}

    .zen-log{height:250px;white-space:pre-wrap}
    .zen-log .ln{align-items:flex-start}
    .zen-log .ln>span:last-child{min-width:0;overflow-wrap:anywhere}
    .zen-log .ln.zen:last-child>span:last-child:after{content:""}
    .zen-log .ln.zen:last-child.typing>span:last-child:after{content:"▌";color:var(--a);animation:blink 1s steps(1) infinite;margin-left:2px}
    @media(max-width:600px){.zen-log{height:280px}}

    .date-nav{display:flex;align-items:center;gap:6px}
    .date-nav .round{width:34px;height:34px;font-size:18px}
    .date-nav .round:disabled{opacity:.3;cursor:default}
    .date-nav .dlabel{font:600 12px var(--display);min-width:112px;text-align:center;color:var(--ink)}
    .today-btn{border:1px solid var(--a);background:rgba(110,231,255,.08);color:var(--a);border-radius:9px;padding:7px 10px;font:700 10px var(--display);letter-spacing:1.4px;cursor:pointer;text-transform:uppercase}
    .today-btn[hidden]{display:none}

    .streak{font:700 11px var(--display);color:#ffb86b;background:rgba(255,160,70,.12);border-radius:8px;padding:4px 7px;white-space:nowrap;flex:none}
    .icon-btn{border:0;background:transparent;color:#6b7699;cursor:pointer;font-size:17px;width:36px;height:38px;flex:none;border-radius:8px}
    .icon-btn:hover{color:var(--a);background:rgba(110,231,255,.08)}
    .empty{color:var(--muted);font-size:12px;padding:10px 4px;line-height:1.8}

    .mood-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
    .mood-opt{flex:1;min-width:92px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#b5c0e0;border-radius:12px;padding:10px 8px;font:600 11px Alexandria,var(--display);cursor:pointer;text-align:center;transition:.15s}
    .mood-opt.on{border-color:var(--a);color:#fff;box-shadow:0 0 16px -6px var(--a);background:rgba(110,231,255,.08)}
    .mood-opt b{display:block;font-size:20px;margin-bottom:2px}
    .ck-list{display:grid;gap:8px;margin-top:16px;max-height:340px;overflow-y:auto}
    .ck{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);cursor:pointer}
    .ck:hover{border-color:rgba(110,231,255,.4)}
    .ck .when{font:600 11px var(--display);color:var(--muted);min-width:58px;letter-spacing:.5px}
    .ck .mo{font-size:18px;flex:none}
    .ck .nt{font-size:12.5px;line-height:1.7;color:#c9d6f2;overflow-wrap:anywhere;flex:1;min-width:0}
    .ck .pc{font:600 10px var(--display);color:var(--a);flex:none}
    .mood-sum{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
    .mood-sum span{font:600 10px var(--display);letter-spacing:1px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 10px}

    .task.done .task-title{text-decoration:line-through;opacity:.5}
    .cd{font:600 10px var(--display);border-radius:8px;padding:5px 8px;white-space:nowrap;background:rgba(255,255,255,.05);color:var(--muted)}
    .cd.soon{background:rgba(255,190,80,.14);color:#ffd27a}
    .cd.urgent{background:rgba(255,93,115,.16);color:#ff8a9a}
    .task .check{width:22px;height:22px;border-radius:7px}

    .perf-tabs{display:flex;gap:6px}
    .perf-list{display:grid;gap:12px;margin-top:6px}
    .perf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:center}
    .perf .nm{font-size:13px;font-weight:600;overflow-wrap:anywhere;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .perf .tag{font:700 9px var(--display);letter-spacing:1.4px;border-radius:6px;padding:3px 6px;text-transform:uppercase}
    .perf .tag.best{background:rgba(110,231,255,.14);color:var(--a)}
    .perf .tag.weak{background:rgba(255,93,115,.15);color:#ff8a9a}
    .perf .tag.q{background:rgba(255,79,216,.12);color:#ff9be8}
    .perf .bar{grid-column:2;height:8px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
    .perf .bar i{display:block;height:100%;border-radius:6px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
    .perf .val{font:700 14px var(--display);text-align:right;min-width:54px}
    .perf .sub{grid-column:2/4;font:500 10.5px var(--display);color:var(--muted);letter-spacing:.4px}
    .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:6px;align-items:end;height:90px}
    .dow div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
    .dow i{display:block;width:100%;border-radius:6px 6px 2px 2px;min-height:3px}
    .dow small{font:500 9px Alexandria,var(--display);color:var(--muted)}
    .dow b{font:700 10px var(--display);color:#c9d6f2}
    .subhead{font:600 10px var(--display);letter-spacing:2.5px;color:var(--muted);text-transform:uppercase;margin:22px 0 8px}
    .mood-line{font-size:12px;color:#c9d6f2;line-height:1.9;margin:10px 0 0}

    .set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)}
    .set-row:first-of-type{border-top:0;padding-top:0}
    .set-row .lbl{font-size:13px;font-weight:600}
    .set-row .hint{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.7;font-weight:400}
    .btns{display:flex;gap:8px;flex-wrap:wrap}
    .btn{border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#1a2040,#0e1226);color:#dce8ff;padding:10px 14px;font:600 10.5px var(--display);letter-spacing:1.3px;cursor:pointer;box-shadow:0 3px 0 #060814;text-transform:uppercase}
    .btn:active{transform:translateY(2px);box-shadow:0 1px 0 #060814}
    .btn.danger{border-color:rgba(255,93,115,.5);color:#ff8a9a}
    .btn.primary{border-color:var(--a);color:var(--a)}
    .switch{position:relative;width:46px;height:26px;flex:none}
    .switch input{appearance:none;-webkit-appearance:none;position:absolute;inset:0;margin:0;cursor:pointer;border-radius:999px;background:#1a2040;border:1px solid var(--line);transition:.2s}
    .switch input:checked{background:rgba(110,231,255,.25);border-color:var(--a)}
    .switch input:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8b95b0;transition:.2s}
    .switch input:checked:after{left:23px;background:var(--a);box-shadow:0 0 10px var(--a)}
    input[type=time],.card select,.modal input,.modal select{background:#070914;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 10px;font:16px Alexandria,sans-serif;outline:none;min-height:42px;color-scheme:dark}
    .status-ok{color:#7dffb2}.status-bad{color:#ff8a9a}

    .modal{position:fixed;inset:0;z-index:60;background:rgba(2,3,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
    .modal[hidden]{display:none}
    .modal-box{width:min(440px,100%);max-height:92vh;overflow-y:auto;background:#0b0e1c;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 40px 90px -20px #000}
    .modal-box h3{margin:0 0 14px;font:700 14px var(--display);letter-spacing:2px;text-transform:uppercase}
    .modal-box p{margin:0 0 12px;font-size:13px;line-height:1.8;color:#c9d6f2}
    .modal .fld{display:grid;gap:6px;margin-bottom:12px}
    .modal .fld label{font:600 10px var(--display);letter-spacing:1.6px;color:var(--muted);text-transform:uppercase}
    .modal .fld input,.modal .fld select{width:100%}
    .emoji-pick{display:flex;gap:6px;flex-wrap:wrap}
    .emoji-pick button{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:18px;cursor:pointer}
    .emoji-pick button:hover,.emoji-pick button.on{border-color:var(--a);box-shadow:0 0 12px -4px var(--a)}
    .modal-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}
    .modal-actions .left{margin-right:auto;display:flex;gap:6px}
    .tilt.no-tilt{transform:none}
    .table-box td[data-d]{cursor:pointer}
    .table-box td.sel{background:rgba(139,92,255,.35)}
    .hero-date{color:var(--a);font:600 11px var(--display);letter-spacing:2px}
    @media(max-width:600px){.date-nav .dlabel{min-width:88px;font-size:11px}.perf{grid-template-columns:auto minmax(0,1fr) auto}.card-head{flex-wrap:wrap}}
    .ck-text{width:100%;height:84px;resize:vertical;border-radius:12px;padding:12px;margin-top:12px;background:#070914;color:var(--ink);border:1px solid var(--line);font:16px Alexandria,sans-serif;outline:none}
    .ck-text:focus{border-color:var(--a)}

    /* ===== v3.1: language, tabs, levels, notes ===== */
    html[lang=ar] *{letter-spacing:0!important}
    html[dir=rtl] .habit.done{border-left:1px solid rgba(110,231,255,.4);border-right:3px solid var(--acc)}
    html[dir=rtl] .quit-card .habit.done{border-left:1px solid rgba(255,93,115,.45);border-right:3px solid var(--rose)}
    html[dir=rtl] .habit:hover,html[dir=rtl] .task:hover{transform:translateX(-3px)}
    html[dir=rtl] .perf .val{text-align:left}
    html[dir=rtl] .modal-actions .left{margin-right:0;margin-left:auto}
    html[dir=rtl] .zen-input .prompt{transform:scaleX(-1)}
    html[dir=rtl] .boot pre{text-align:left;direction:ltr}
    .lang-switch{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
    .lang-switch button{border:0;background:transparent;color:var(--muted);padding:0 14px;min-height:42px;font:700 12px Alexandria,var(--display);cursor:pointer}
    .lang-switch button.on{background:rgba(110,231,255,.14);color:var(--a)}
    .btn.on{border-color:var(--a);color:var(--a)}
    .tabs{display:flex;gap:8px;margin:-6px 0 22px;flex-wrap:wrap}
    .tabs button{border:1px solid var(--line);background:var(--glass);color:#9fb0d6;border-radius:12px;padding:0 18px;min-height:44px;font:600 13px Alexandria,var(--display);cursor:pointer;transition:.15s}
    .tabs button.on{border-color:var(--a);color:#fff;box-shadow:0 0 22px -8px var(--a);background:linear-gradient(180deg,rgba(110,231,255,.14),rgba(110,231,255,.04))}
    [hidden]{display:none!important}

    /* hunter status */
    .sys-card{margin-bottom:24px;padding:22px 26px;border-color:rgba(90,160,255,.5);background:linear-gradient(160deg,rgba(9,20,52,.8),rgba(5,9,26,.84));box-shadow:0 0 0 1px rgba(90,160,255,.12),0 0 60px -14px rgba(60,140,255,.55),inset 0 0 60px rgba(40,100,255,.06)}
    .sys-card:after{background:linear-gradient(90deg,transparent,#5aa0ff,transparent)}
    .sys-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
    .sys-tag{font:700 11px var(--display);letter-spacing:3px;color:#7db6ff;border:1px solid rgba(90,160,255,.55);padding:6px 12px;border-radius:4px;background:rgba(40,100,255,.1)}
    .sys-sub{font:500 11px var(--display);color:var(--muted);letter-spacing:1px}
    .lv-grid{display:grid;grid-template-columns:auto minmax(0,1.35fr) minmax(0,1fr);gap:30px;align-items:center}
    .lv-badge{width:132px;height:152px;display:grid;place-content:center;text-align:center;position:relative;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,#16306e,#0a1230);filter:drop-shadow(0 0 18px rgba(90,160,255,.7))}
    .lv-badge:before{content:"";position:absolute;inset:3px;clip-path:inherit;background:linear-gradient(160deg,#0c1a44,#050a1e)}
    .lv-badge>*{position:relative}
    .lv-badge small{font:600 10px var(--display);letter-spacing:3px;color:#7db6ff}
    .lv-badge b{font:800 52px/1 var(--display);background:linear-gradient(180deg,#fff,#7db6ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(90,160,255,.6)}
    .lv-rank{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
    .lv-rank strong{font:700 22px Alexandria,var(--display)}
    .lv-rank span{font:600 11px var(--display);letter-spacing:2px;color:#7db6ff;border:1px solid rgba(90,160,255,.45);border-radius:6px;padding:3px 8px}
    .lv-bar{margin:0 0 12px}
    .lv-bar .row{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:6px;color:#c9d6f2}
    .lv-bar .row b{font:700 12px var(--display);color:#fff;white-space:nowrap}
    .lv-bar .track{height:10px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;box-shadow:inset 0 1px 3px #0008}
    .lv-bar .fill{display:block;height:100%;border-radius:6px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
    .lv-bar.pos .fill{background:linear-gradient(90deg,#3b82ff,#6ee7ff);box-shadow:0 0 12px #3b82ff}
    .lv-bar.neg .fill{background:linear-gradient(90deg,#ff4f8b,#ff9a8b);box-shadow:0 0 12px #ff4f8b}
    .lv-note{font-size:12px;color:var(--muted);line-height:1.8;margin:6px 0 0}
    .lv-note b{color:#ffd27a}
    .lv-stats{display:grid;gap:9px}
    .lv-stat{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;font:600 11px var(--display)}
    .lv-stat i{display:block;height:6px;border-radius:4px;background:linear-gradient(90deg,#3b82ff,#8b5cff)}
    .lv-stat .tr{height:6px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
    .lv-stat span{color:#7db6ff;letter-spacing:1.5px}
    .lv-stat b{color:#fff;min-width:32px;text-align:end}
    .lv-road{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
    .lv-road summary{cursor:pointer;font:600 11px Alexandria,var(--display);color:#7db6ff;list-style:none}
    .lv-road summary::-webkit-details-marker{display:none}
    .lv-road table{width:100%;border-collapse:collapse;margin-top:10px;font:12px var(--display)}
    .lv-road th,.lv-road td{padding:7px 10px;text-align:center;border-bottom:1px solid rgba(140,160,255,.1);color:#c9d6f2}
    .lv-road th{color:var(--muted);font-weight:600;font-size:10px;letter-spacing:1px}
    .lv-road tr.cur td{color:var(--a);font-weight:700}
    .lvup{text-align:center;padding:10px 0 4px}
    .lvup .big{font:800 64px/1 var(--display);background:linear-gradient(180deg,#fff,#7db6ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px #3b82ff);animation:lvpop .7s cubic-bezier(.2,1.4,.3,1)}
    .lvup .tag{font:700 12px var(--display);letter-spacing:4px;color:#7db6ff;margin-bottom:10px}
    @keyframes lvpop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
    @media(max-width:900px){.lv-grid{grid-template-columns:1fr;gap:20px;justify-items:center}.lv-grid>*{width:100%}.lv-badge{width:118px;height:136px}.lv-badge-wrap{display:grid;place-items:center}.sys-card{padding:18px 16px}}

    /* notes */
    .notes{display:grid;grid-template-columns:310px minmax(0,1fr);gap:24px;align-items:start}
    .notes-side{position:sticky;top:16px;max-height:calc(100vh - 32px);display:flex;flex-direction:column}
    .note-search{width:100%;background:#070914;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font:15px Alexandria,sans-serif;outline:none;min-height:44px;margin-bottom:10px}
    .note-search:focus{border-color:var(--a)}
    .note-today{width:100%;margin-bottom:12px;padding:12px 14px}
    .note-list{display:grid;gap:6px;overflow-y:auto;min-height:0}
    .note-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid transparent;border-radius:12px;cursor:pointer;background:rgba(255,255,255,.02)}
    .note-item:hover{background:rgba(255,255,255,.05)}
    .note-item.on{border-color:rgba(110,231,255,.45);background:rgba(110,231,255,.07)}
    .note-item .ic{font-size:18px;flex:none;width:24px;text-align:center}
    .note-item .tx{min-width:0;flex:1}
    .note-item .tt{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .note-item .sn{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
    .note-item .pin{font-size:11px;flex:none}
    .notes-main{min-height:560px;display:flex;flex-direction:column;gap:14px}
    .ed-top{display:flex;gap:12px;align-items:center}
    .ed-icon{width:54px;height:54px;border-radius:14px;border:1px solid var(--line);background:#070914;font-size:28px;text-align:center;padding:0;flex:none;color:var(--ink);outline:none}
    .ed-title{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:700 26px Alexandria,var(--display);padding:6px 2px;outline:none}
    .ed-title:focus{border-color:var(--a)}
    .ed-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
    .ed-bar .sp{flex:1}
    .tool{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#c9d6f2;border-radius:9px;min-width:38px;height:36px;padding:0 10px;font:700 12px var(--display);cursor:pointer}
    .tool:hover,.tool.on{border-color:var(--a);color:var(--a)}
    .ed-area{width:100%;flex:1;min-height:420px;resize:vertical;background:rgba(0,0,0,.28);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:18px;font:15px/1.9 Alexandria,sans-serif;outline:none}
    .ed-area:focus{border-color:rgba(110,231,255,.5)}
    .ed-foot{display:flex;justify-content:space-between;gap:10px;font:500 11px var(--display);color:var(--muted)}
    .ed-empty{margin:auto;text-align:center;color:var(--muted);line-height:2;padding:40px 10px}
    .ed-empty b{display:block;font-size:42px;margin-bottom:6px}
    .md{min-height:420px;background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:14px;padding:18px 22px;font-size:15px;line-height:1.95;overflow-wrap:anywhere}
    .md h1{font:700 26px Alexandria,var(--display);margin:.4em 0 .3em}
    .md h2{font:700 20px Alexandria,var(--display);margin:.9em 0 .3em;color:#cfe3ff}
    .md h3{font:700 16px Alexandria,var(--display);margin:.8em 0 .2em;color:#a9c4e6}
    .md p{margin:.2em 0}
    .md .li{display:flex;gap:10px;align-items:flex-start;margin:.1em 0}
    .md .li .bt{flex:none;color:var(--a);min-width:18px;text-align:center}
    .md .task{padding:0;border:0;background:none;box-shadow:none;gap:10px;margin:.15em 0;cursor:pointer;transition:none;align-items:flex-start}
    .md .task:hover{transform:none;border:0}
    .md .task input{width:18px;height:18px;margin-top:6px;accent-color:#6ee7ff;cursor:pointer}
    .md .task.dn span{text-decoration:line-through;opacity:.5}
    .md blockquote{margin:.5em 0;padding:.2em 14px;border-inline-start:3px solid var(--b);color:#b5c0e0;background:rgba(139,92,255,.07);border-radius:4px}
    .md code{background:#0b0e1c;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font:13px ui-monospace,Consolas,monospace;direction:ltr;unicode-bidi:embed}
    .md pre{background:#050813;border:1px solid var(--line);border-radius:10px;padding:12px;overflow-x:auto;direction:ltr;text-align:left;font:13px/1.7 ui-monospace,Consolas,monospace;margin:.6em 0}
    .md hr{border:0;border-top:1px solid var(--line);margin:1em 0}
    .md a{color:var(--a)}
    .md .sp{height:.7em}
    @media(max-width:900px){.notes{grid-template-columns:1fr}.notes-side{position:static;max-height:none}.note-list{max-height:260px}.ed-title{font-size:21px}}

/* ================= v4: shell + pages ================= */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;align-self:start;height:100vh;padding:22px 14px;display:flex;flex-direction:column;gap:6px;border-inline-end:1px solid var(--line);background:rgba(6,8,18,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.side .brand{margin:0 6px 18px}
.side a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:#9fb0d6;text-decoration:none;font:600 14px Alexandria,var(--display);border:1px solid transparent;transition:.15s}
.side a i{font-style:normal;font-size:18px;width:24px;text-align:center}
.side a:hover{color:#fff;background:rgba(255,255,255,.04)}
.side a.on{color:#fff;border-color:var(--a);background:linear-gradient(180deg,rgba(110,231,255,.14),rgba(110,231,255,.03));box-shadow:0 0 22px -10px var(--a)}
.shell .app{max-width:1380px;width:100%;margin:0 auto}
.top{justify-content:space-between}
.lv-chip{font:700 13px var(--display);letter-spacing:2px;color:#cfe3ff;text-decoration:none;border:1px solid rgba(90,160,255,.5);padding:9px 14px;border-radius:12px;background:rgba(9,20,52,.7)}
.page[hidden]{display:none!important}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:24px;align-items:start}
@media(max-width:900px){
  .shell{display:block}
  .side{position:fixed;inset:auto 0 0 0;top:auto;height:auto;flex-direction:row;gap:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:40;border-inline-end:0;border-top:1px solid var(--line);background:rgba(6,8,18,.92);justify-content:space-around;overflow-x:auto}
  .side .brand{display:none}
  .side a{flex-direction:column;gap:2px;padding:6px 8px;font-size:10px;min-width:0;flex:1;text-align:center;border-radius:10px}
  .side a i{font-size:19px}
  .shell .app{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ================= paper tracker ================= */
.paper{--ink:#1a1a1a;--paper:#f4f1e8;--rule:#2a2a2a;background:var(--paper);color:var(--ink);border-radius:6px;padding:22px 22px 28px;box-shadow:0 30px 60px -30px #000,0 0 0 1px rgba(0,0,0,.4);font-family:Alexandria,system-ui,sans-serif;max-width:1180px;margin:0 auto}
.pp-banner{border:2.5px solid var(--ink);padding:10px;text-align:center;margin-bottom:12px}
.pp-banner .motto,.pp-level,.quote{all:unset;box-sizing:border-box;cursor:pointer}
.pp-banner .motto{display:block;width:100%;font:800 clamp(18px,3.4vw,34px) var(--display);letter-spacing:3px;text-transform:uppercase;color:var(--ink)}
.pp-month{display:flex;align-items:baseline;gap:10px;justify-content:center;margin:6px 0 14px;font:700 18px var(--display);letter-spacing:3px;text-transform:uppercase}
.pp-month b{border-bottom:2px solid var(--ink);padding:0 18px;font-size:22px}.pp-month small{color:#666;font-size:13px}
.pp-sec{border:2px solid var(--ink);padding:12px;margin-bottom:14px;position:relative}
.pp-sec h3{margin:-24px 0 8px;display:inline-block;background:var(--paper);padding:0 10px;font:800 14px var(--display);letter-spacing:4px}
.pp-row{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:14px;align-items:stretch;margin-bottom:0}
.pp-row .pp-sec{margin-bottom:14px}
.pp-side{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.pp-level{display:grid;gap:2px;justify-items:center;border:2px solid var(--ink);padding:14px 10px;text-align:center;position:relative}
.pp-level small{font:700 12px var(--display);letter-spacing:3px;text-transform:uppercase}.pp-level b{font:800 36px var(--display)}.pp-level span{font:700 12px var(--display);letter-spacing:2px}
.pp-level .arrow{font-style:normal;font-size:22px;color:#c1121f}html[dir=rtl] .pp-level .arrow{transform:scaleX(-1)}
.quote{color:#d11a2a;font:800 22px/1.25 "Segoe Script","Brush Script MT",cursive,var(--display);text-align:center;transform:rotate(-3deg);padding:8px}
.grid-scroll{overflow-x:auto;padding-bottom:4px}
table.grid{border-collapse:collapse;font:600 11px var(--display);min-width:100%}
.grid th,.grid td{border:1px solid var(--rule);height:26px;min-width:24px;text-align:center;padding:0}
.grid th.nm{min-width:150px;max-width:220px;text-align:start;padding:0 8px;position:sticky;inset-inline-start:0;background:var(--paper);z-index:1;font:700 12px Alexandria,var(--display)}
.grid tr.wd th,.grid tr.dn th{background:#e9e4d4;font-weight:700}
.grid th.today,.grid td.today{background:#ffe9a8}.grid th.we{color:#7a1f1f}
.grid .tot{min-width:34px;font-weight:800;background:#e9e4d4}
.grid td.c{cursor:pointer;font-size:15px;font-weight:800}.grid td.c:hover{background:#d9d4c0}.grid td.c.on{background:#222;color:#fff}.grid td.c.fut{background:repeating-linear-gradient(45deg,transparent 0 4px,#00000010 4px 5px);cursor:default}.grid td.c.off{background:#00000008}
.grid td.c.m.on{background:#fff;color:#222}
.hn{all:unset;cursor:pointer;display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px Alexandria,var(--display)}.hn:hover{text-decoration:underline}
.none{padding:18px!important;color:#666;font:500 13px Alexandria}
.pp-add{display:flex;gap:8px;margin-top:10px}
.pp-add input{flex:1;min-width:0;border:1.5px solid var(--ink);background:#fff;padding:9px 12px;font:500 15px Alexandria,sans-serif;color:var(--ink);border-radius:0;outline:none}
.pp-add button,.pp-shot button{border:2px solid var(--ink);background:var(--ink);color:#fff;font:700 13px Alexandria,sans-serif;padding:0 18px;min-height:40px;cursor:pointer}
.dotted{background-image:radial-gradient(#8a8576 1px,transparent 1.3px);background-size:14px 14px;background-position:-3px -3px}
svg.chart{display:block;width:100%;height:auto}.chart text{font:600 10px var(--display);fill:#222}.chart .gl{stroke:#bdb8a6;stroke-width:.6;stroke-dasharray:1 3}
.chart .ln{fill:none;stroke:#111;stroke-width:2.2;stroke-linejoin:round}.chart .dt{fill:#fff;stroke:#111;stroke-width:2}.chart .bar{fill:#2b2b2b}.chart .hit{fill:transparent;cursor:pointer}.chart .hit:hover{fill:#00000012}
.pp-note{margin:8px 4px 0;color:#666;font:500 12px Alexandria}
.pp-shot{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-top:10px}.pp-shot label{display:grid;gap:3px;font:700 11px var(--display);letter-spacing:1px}
.pp-shot input{border:1.5px solid var(--ink);background:#fff;padding:7px 9px;font:500 14px Alexandria,sans-serif;color:var(--ink);width:150px;border-radius:0}
@media(max-width:700px){.paper{padding:14px 10px 22px;border-radius:0}.pp-row{grid-template-columns:1fr}.pp-side{flex-direction:row}.pp-side>*{flex:1}.grid th.nm{min-width:110px}}

/* ================= ZEN page (Claude-like) ================= */
.zenpage{height:calc(100vh - 110px);min-height:520px}
.zenpage:not([hidden]){display:block}
.zp{height:100%;display:flex;flex-direction:column;max-width:860px;margin:0 auto}
.zp-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 4px 14px}
.zp-tools{display:flex;gap:8px;align-items:center}
.zp-tools select{background:#070914;color:#b5c0e0;border:1px solid var(--line);border-radius:9px;padding:8px;font:600 11px Alexandria,sans-serif}
.zenpage .zen-log{flex:1;height:auto;min-height:0;background:transparent;border:0;padding:8px 4px 16px;gap:18px;font-size:16px;line-height:1.85;white-space:pre-wrap}
.zenpage .zen-log .ln{display:block;max-width:100%}
.zenpage .zen-log .pfx{display:none}
.zenpage .zen-log .ln.me{align-self:flex-end;max-width:82%;background:rgba(139,92,255,.18);border:1px solid rgba(139,92,255,.35);color:#eef2ff;padding:10px 16px;border-radius:18px}
.zenpage .zen-log .ln.zen{align-self:stretch;color:#e4eaff}
.zenpage .zen-log .ln.coach{align-self:stretch;border-inline-start:3px solid #ffb84d;background:rgba(255,184,77,.08);color:#ffd9a0;padding:10px 14px;border-radius:10px;font-size:14px;line-height:1.7}
.zenpage .zen-log .ln.coach b{color:#ffcf85}
.zenpage .zen-log .ln.zen:last-child>span:last-child:after{content:""}
.zp-compose{padding-bottom:8px}
.zp-compose .chips{margin:0 0 10px}
.zp-box{display:flex;align-items:flex-end;gap:8px;background:#0a0d1c;border:1px solid var(--line);border-radius:22px;padding:8px 10px;transition:.15s}
.zp-box:focus-within{border-color:var(--a);box-shadow:0 0 0 3px rgba(110,231,255,.1)}
.zp-box textarea{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:500 16px/1.6 Alexandria,sans-serif;resize:none;max-height:180px;padding:8px 6px}
.zp-box button{flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font-size:18px}
.zp-box .send{background:var(--grad);color:#050813;font-weight:800}html[dir=rtl] .zp-box .send{transform:scaleX(-1)}
.zp-box .mic{background:rgba(255,255,255,.06);color:#b5c0e0}.zp-box .mic.rec{background:#ff3b5c;color:#fff;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(255,59,92,.18)}}
.zp-hint{min-height:20px;margin-top:8px;text-align:center;font:500 12px Alexandria,sans-serif;color:#8b95b0}
.zp-hint.live{color:#ffb3c0}
@media(max-width:900px){.zenpage{height:calc(100vh - 170px)}}

/* account */
.acc-msg{margin:10px 0;font:500 13px/1.7 Alexandria,sans-serif;color:#b5c0e0}.acc-msg.bad{color:#ff8da1}.acc-msg.ok{color:#7ee2a8}
.acc-form{display:grid;gap:10px;margin-top:12px}.acc-form input{background:#070914;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:500 16px Alexandria,sans-serif;outline:none;min-height:46px}
.acc-form input:focus{border-color:var(--a)}
.acc-pill{display:inline-block;padding:4px 10px;border-radius:99px;background:rgba(126,226,168,.12);color:#7ee2a8;font:600 12px Alexandria,sans-serif}