@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Space+Mono:wght@400;700&display=swap');
        
        /* ══════════════════════════════════════════
           THEME VARIABLES
           ══════════════════════════════════════════ */
        
        /* DARK THEME (default) */
        [data-theme="dark"]{
          --bg:#0a0805;--surf:#120e09;--surf2:#1c1610;--surf3:#251d12;
          --bdr:#2a2018;--bdr2:#3d3020;
          --acc:#e8a84c;--acc-d:rgba(232,168,76,.2);
          --grn:#a8e84c;--grn-d:rgba(168,232,76,.14);
          --red:#e85c4c;--blu:#6b9db8;
          --sd:#c47a2b;--sl:#f5c97a;
          --tp:#f0e6d0;--ts:#8a7a66;--td:#4a3e30;
          --glass-fill:rgba(18,14,9,.72);
          --glass-stroke:#252015;
          --glass-stroke-run:#5a4a30;
          --highlight:rgba(255,255,255,.04);
          --header-bg:rgba(10,8,5,.96);
          --radial-glow:rgba(196,122,43,.07);
        }
        
        /* LIGHT THEME */
        [data-theme="light"]{
          --bg:#f5f0e8;--surf:#ffffff;--surf2:#ebe5da;--surf3:#ddd5c8;
          --bdr:#c9c0b0;--bdr2:#b8ad9a;
          --acc:#c47a2b;--acc-d:rgba(196,122,43,.15);
          --grn:#5a8a10;--grn-d:rgba(90,138,16,.12);
          --red:#c44a3a;--blu:#4a7a94;
          --sd:#a86820;--sl:#daa050;
          --tp:#2a2418;--ts:#5a5040;--td:#8a8070;
          --glass-fill:rgba(235,229,218,.9);
          --glass-stroke:#b8ad9a;
          --glass-stroke-run:#a86820;
          --highlight:rgba(0,0,0,.04);
          --header-bg:rgba(245,240,232,.96);
          --radial-glow:rgba(196,122,43,.05);
        }
        
        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
        html,body{height:100%}
        body{
          background:var(--bg);color:var(--tp);
          font-family:'Space Mono',monospace;
          min-height:100vh;overflow-x:hidden;
          transition:background .3s,color .3s;
        }
        body::before{
          content:'';position:fixed;inset:0;
          background:radial-gradient(ellipse 60% 40% at 50% 0%,var(--radial-glow) 0%,transparent 60%);
          pointer-events:none;z-index:0;
          transition:background .3s;
        }
        
        /* ── HEADER ── */
        header{
          position:sticky;top:0;z-index:300;
          background:var(--header-bg);backdrop-filter:blur(14px);
          border-bottom:1px solid var(--bdr);
          padding:0 1.4rem;height:72px;
          display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
          transition:background .3s,border-color .3s;
        }
        .logo{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:300;letter-spacing:.3em;color:var(--acc);text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:.8rem}
        .logo em{font-style:italic;color:var(--ts);font-size:.85rem;letter-spacing:.1em}
        
        /* Theme Toggle */
        .theme-toggle{
          background:var(--surf2);border:1px solid var(--bdr);
          width:42px;height:42px;border-radius:50%;
          display:flex;align-items:center;justify-content:center;
          cursor:pointer;transition:all .3s;
          font-size:1.2rem;color:var(--acc);
        }
        .theme-toggle:hover{border-color:var(--acc);transform:scale(1.08)}
        .theme-toggle .icon-sun{display:none}
        .theme-toggle .icon-moon{display:block}
        [data-theme="light"] .theme-toggle .icon-sun{display:block}
        [data-theme="light"] .theme-toggle .icon-moon{display:none}
        
        /* clock center block */
        .hdr-center{display:flex;flex-direction:column;align-items:center;gap:.15rem}
        .clk-lbl{font-size:.65rem;letter-spacing:.22em;color:var(--td);text-transform:uppercase}
        .clk-val{font-size:1.6rem;font-weight:700;letter-spacing:.06em;color:var(--acc);font-variant-numeric:tabular-nums}
        .clk-jumps{display:flex;gap:.25rem;margin-top:.15rem}
        .btn-gj{
          background:var(--surf2);border:1px solid var(--bdr);color:var(--ts);
          padding:.2rem .5rem;font-family:'Space Mono',monospace;font-size:.65rem;
          cursor:pointer;letter-spacing:.04em;transition:all .14s;
        }
        .btn-gj:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
        .btn-gj.neg:hover:not(:disabled){border-color:var(--red);color:var(--red)}
        .btn-gj:disabled{opacity:.22;cursor:not-allowed}
        .ap-banner{
          font-size:.65rem;letter-spacing:.14em;color:var(--grn);
          padding:.2rem .6rem;border:1px solid rgba(168,232,76,.4);
          background:rgba(168,232,76,.06);margin-top:.15rem;
          animation:blink .85s ease-in-out infinite;display:none;text-align:center;
        }
        [data-theme="light"] .ap-banner{
          border-color:rgba(90,138,16,.5);
          background:rgba(90,138,16,.08);
        }
        .ap-banner.on{display:block}
        @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
        
        /* header right */
        .hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}
        .goal-done{font-size:.65rem;letter-spacing:.18em;color:var(--grn);display:none;animation:blink 1s ease-in-out infinite}
        .goal-done.on{display:block}
        .hdr-flips{font-size:.65rem;color:var(--ts);letter-spacing:.12em}
        .hdr-flips strong{color:var(--grn);font-size:.8rem}
        
        /* ── GOAL BAR ── */
        .goal-bar-wrap{height:4px;background:var(--surf2);display:none;transition:background .3s}
        .goal-bar-wrap.on{display:block}
        .goal-bar-fill{height:100%;background:linear-gradient(90deg,var(--sd),var(--grn));max-width:100%;transition:width .15s linear}
        
        /* ── LAYOUT ── */
        .layout{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 72px);position:relative;z-index:1}
        
        /* ── SIDEBAR ── */
        .sidebar{
          background:var(--surf);border-right:1px solid var(--bdr);
          padding:1.2rem;display:flex;flex-direction:column;gap:1.2rem;
          overflow-y:auto;position:sticky;top:72px;height:calc(100vh - 72px);
          transition:background .3s,border-color .3s;
        }
        .sec-lbl{font-size:.7rem;letter-spacing:.26em;color:var(--td);text-transform:uppercase;padding-bottom:.4rem;border-bottom:1px solid var(--bdr);margin-bottom:.55rem}
        
        /* form */
        .add-form{display:flex;flex-direction:column;gap:.6rem}
        .f-row{display:flex;flex-direction:column;gap:.2rem}
        .f-lbl{font-size:.7rem;letter-spacing:.14em;color:var(--ts)}
        .f-in{
          background:var(--surf2);border:1px solid var(--bdr);color:var(--tp);
          padding:.45rem .6rem;font-family:'Space Mono',monospace;font-size:.85rem;
          outline:none;transition:all .2s;width:100%;
        }
        .f-in:focus{border-color:var(--acc)}
        .f-in.err{border-color:var(--red)}
        .f-err{font-size:.65rem;color:var(--red);min-height:.8rem}
        .f-2c{display:flex;gap:.4rem}
        .f-col{flex:1;display:flex;flex-direction:column;gap:.2rem}
        .f-unit{font-size:.6rem;color:var(--td);letter-spacing:.1em;text-align:center;margin-top:.08rem}
        .btn-add{
          background:var(--acc);color:var(--bg);border:none;
          padding:.55rem .9rem;font-family:'Space Mono',monospace;
          font-size:.75rem;letter-spacing:.15em;cursor:pointer;
          text-transform:uppercase;transition:all .2s;font-weight:700;
        }
        .btn-add:hover{background:var(--sl);transform:translateY(-1px)}
        
        /* goal section */
        .goal-display{
          display:flex;align-items:center;justify-content:space-between;
          padding:.45rem .55rem;background:var(--surf2);border:1px solid var(--bdr);
          margin-bottom:.55rem;transition:all .3s;
        }
        .goal-display.active{border-color:var(--grn);background:rgba(168,232,76,.05)}
        [data-theme="light"] .goal-display.active{background:rgba(90,138,16,.08)}
        .goal-display .g-lbl{font-size:.6rem;color:var(--td);letter-spacing:.1em}
        .goal-display .g-val{font-size:.85rem;color:var(--grn);font-weight:700;font-variant-numeric:tabular-nums}
        .goal-display.active .g-lbl{color:var(--grn)}
        .goal-display:not(.active) .g-val{color:var(--td)}
        .goal-btns{display:flex;gap:.4rem}
        .btn-goal{
          flex:1;background:var(--surf2);border:1px solid var(--bdr);color:var(--ts);
          padding:.4rem .45rem;font-family:'Space Mono',monospace;font-size:.68rem;
          cursor:pointer;letter-spacing:.08em;transition:all .2s;text-transform:uppercase;
        }
        .btn-goal.set{background:var(--grn-d);border-color:rgba(168,232,76,.4);color:var(--grn)}
        [data-theme="light"] .btn-goal.set{border-color:rgba(90,138,16,.5)}
        .btn-goal.set:hover{background:var(--grn);color:#fff}
        [data-theme="light"] .btn-goal.set:hover{color:#fff}
        .btn-goal.clr:hover{border-color:var(--red);color:var(--red)}
        .btn-goal:disabled{opacity:.3;cursor:not-allowed}
        
        /* controls */
        .ctrls{display:flex;flex-direction:column;gap:.55rem}
        .c-row{display:flex;gap:.4rem}
        .btn-c{
          flex:1;background:var(--surf2);border:1px solid var(--bdr);color:var(--tp);
          padding:.45rem .2rem;font-family:'Space Mono',monospace;font-size:.72rem;
          cursor:pointer;letter-spacing:.07em;transition:all .2s;
          display:flex;align-items:center;justify-content:center;gap:.2rem;
        }
        .btn-c:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
        .btn-c:disabled{opacity:.22;cursor:not-allowed}
        .btn-c.on{background:var(--acc-d);border-color:var(--acc);color:var(--acc)}
        .btn-c.dng:hover:not(:disabled){border-color:var(--red);color:var(--red)}
        .spd-row{display:flex;gap:.3rem;align-items:center}
        .spd-lbl{font-size:.65rem;color:var(--ts);letter-spacing:.1em;white-space:nowrap}
        .btn-spd{
          flex:1;background:var(--surf2);border:1px solid var(--bdr);color:var(--ts);
          padding:.3rem .1rem;font-family:'Space Mono',monospace;font-size:.68rem;
          cursor:pointer;transition:all .2s;text-align:center;
        }
        .btn-spd.on{background:var(--acc-d);border-color:var(--acc);color:var(--acc)}
        .btn-spd:hover:not(.on){border-color:var(--ts);color:var(--tp)}
        
        /* stats */
        .stats-g{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
        .sb{background:var(--surf2);border:1px solid var(--bdr);padding:.5rem;text-align:center;transition:all .3s}
        .sb .v{font-size:1.1rem;color:var(--acc);font-weight:700}
        .sb .l{font-size:.6rem;color:var(--td);letter-spacing:.1em;margin-top:.12rem}
        .sb.gv .v{color:var(--grn)}
        
        /* ── MAIN ── */
        .main{display:flex;flex-direction:column;overflow-y:auto;max-height:calc(100vh - 72px)}
        .main-top{padding:1.1rem 1.4rem .7rem;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
        .hg-cnt{font-size:.72rem;color:var(--ts);letter-spacing:.14em}
        .btn-clr{background:none;border:1px solid var(--bdr);color:var(--ts);padding:.3rem .65rem;font-family:'Space Mono',monospace;font-size:.68rem;cursor:pointer;letter-spacing:.1em;transition:all .2s}
        .btn-clr:hover{border-color:var(--red);color:var(--red)}
        
        .hg-grid{padding:0 1.4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:1.1rem;flex-shrink:0}
        .empty-st{grid-column:1/-1;text-align:center;padding:4.5rem 2rem;color:var(--td)}
        .empty-st .big{font-family:'Cormorant Garamond',serif;font-size:4rem;font-weight:300;opacity:.18;margin-bottom:.8rem}
        .empty-st p{font-size:.75rem;letter-spacing:.15em}
        
        /* ── HOURGLASS CARD ── */
        .hg-card{
          background:var(--surf);border:1px solid var(--bdr);
          padding:.75rem .7rem;
          display:flex;flex-direction:column;align-items:center;gap:.45rem;
          transition:all .3s;
          position:relative;overflow:hidden;
        }
        .hg-card.running{border-color:rgba(232,168,76,.22)}
        [data-theme="light"] .hg-card.running{border-color:rgba(196,122,43,.35)}
        .hg-card.empty{border-color:rgba(168,232,76,.5);animation:epulse 1.1s ease-in-out infinite}
        [data-theme="light"] .hg-card.empty{border-color:rgba(90,138,16,.6)}
        @keyframes epulse{0%,100%{box-shadow:0 0 0 0 rgba(168,232,76,.04)}50%{box-shadow:0 0 14px 4px rgba(168,232,76,.12)}}
        [data-theme="light"] .hg-card.empty{animation-name:epulse-light}
        @keyframes epulse-light{0%,100%{box-shadow:0 0 0 0 rgba(90,138,16,.05)}50%{box-shadow:0 0 14px 4px rgba(90,138,16,.15)}}
        
        .flip-badge{
          display:none;position:absolute;top:0;left:0;right:0;
          background:var(--grn);color:#fff;
          font-size:.6rem;font-weight:700;letter-spacing:.22em;
          text-align:center;padding:.15rem;text-transform:uppercase;
          animation:blink .8s ease-in-out infinite;
        }
        [data-theme="light"] .flip-badge{color:#fff}
        .hg-card.empty .flip-badge{display:block}
        
        /* Card header area */
        .hg-hdr{width:100%;position:relative;text-align:center;margin-top:.5rem;padding:0 1.3rem}
        .hg-nm{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:400;color:var(--tp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .hg-id{font-size:.55rem;color:var(--td);letter-spacing:.14em;margin-top:.12rem}
        
        .btn-rm{
          position:absolute;top:.55rem;right:.55rem;
          width:22px;height:22px;
          background:var(--surf2);border:1px solid var(--bdr);
          color:var(--td);font-size:14px;cursor:pointer;
          transition:all .2s;
          display:flex;align-items:center;justify-content:center;
          z-index:10;
        }
        .btn-rm:hover{color:var(--red);border-color:var(--red);background:rgba(232,92,76,.1)}
        [data-theme="light"] .btn-rm:hover{background:rgba(196,74,58,.1)}
        
        /* SVG */
        .hg-vis{width:75px;height:112px;flex-shrink:0}
        .hg-svg{width:100%;height:100%;overflow:visible}
        .hg-svg.flipping{animation:flipA .65s cubic-bezier(.68,-.55,.27,1.55) forwards;transform-origin:center}
        @keyframes flipA{0%{transform:rotate(0)}50%{transform:rotate(90deg) scale(.78)}100%{transform:rotate(180deg)}}
        .sf{animation:sdrop .38s linear infinite}
        @keyframes sdrop{0%{transform:translateY(-2px);opacity:1}100%{transform:translateY(4px);opacity:0}}
        
        /* status */
        .hg-st{font-size:.6rem;letter-spacing:.18em;padding:.15rem .4rem;border:1px solid;text-transform:uppercase}
        .hg-st.running{color:var(--acc);border-color:var(--acc);background:rgba(232,168,76,.07)}
        [data-theme="light"] .hg-st.running{background:rgba(196,122,43,.1)}
        .hg-st.paused{color:var(--blu);border-color:var(--blu);background:rgba(107,157,184,.07)}
        [data-theme="light"] .hg-st.paused{background:rgba(74,122,148,.1)}
        .hg-st.idle{color:var(--ts);border-color:var(--ts)}
        .hg-st.empty{color:var(--grn);border-color:var(--grn);background:rgba(168,232,76,.07)}
        [data-theme="light"] .hg-st.empty{background:rgba(90,138,16,.1)}
        
        /* time */
        .hg-time{font-size:1.15rem;font-weight:700;color:var(--tp);font-variant-numeric:tabular-nums;letter-spacing:.04em;transition:color .3s}
        .hg-card.running .hg-time{color:var(--acc)}
        .hg-card.empty .hg-time{color:var(--grn)}
        
        /* flip count */
        .hg-fc{font-size:.6rem;color:var(--td);letter-spacing:.07em}
        .hg-card.empty .hg-fc{color:var(--grn)}
        
        /* jump row */
        .jrow{display:flex;gap:.25rem;width:100%}
        .btn-j{
          flex:1;background:var(--surf2);border:1px solid var(--bdr);color:var(--td);
          padding:.22rem .06rem;font-family:'Space Mono',monospace;font-size:.6rem;
          cursor:pointer;text-align:center;transition:all .13s;line-height:1.3;
        }
        .btn-j:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
        .btn-j.neg:hover:not(:disabled){border-color:var(--red);color:var(--red)}
        .btn-j:disabled{opacity:.18;cursor:not-allowed}
        
        /* progress */
        .hg-pw{width:100%;height:4px;background:var(--surf2);overflow:hidden}
        .hg-pb{height:100%;background:linear-gradient(90deg,var(--sd),var(--sl));transition:width .12s linear}
        .hg-pb.g{background:linear-gradient(90deg,#5a8a10,var(--grn))}
        .hg-pr{width:100%;display:flex;justify-content:space-between;font-size:.58rem;color:var(--td)}
        
        /* flip btn */
        .btn-fl{
          background:none;border:1px solid var(--bdr);color:var(--ts);
          padding:.32rem .7rem;font-family:'Space Mono',monospace;
          font-size:.65rem;cursor:pointer;letter-spacing:.1em;
          text-transform:uppercase;width:100%;transition:all .2s;
        }
        .btn-fl:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
        .btn-fl:disabled{opacity:.16;cursor:not-allowed}
        .btn-fl.cf{
          border-color:var(--grn);color:var(--grn);background:var(--grn-d);font-weight:700;
          animation:fbp .9s ease-in-out infinite;
        }
        @keyframes fbp{0%,100%{box-shadow:0 0 0 0 rgba(168,232,76,.08)}50%{box-shadow:0 0 8px 2px rgba(168,232,76,.18)}}
        
        /* ── FLIP LOG ── */
        .log-section{margin:1.1rem 1.4rem;border:1px solid var(--bdr);flex-shrink:0;transition:border-color .3s}
        .log-hdr{padding:.5rem .75rem;display:flex;justify-content:space-between;align-items:center;background:var(--surf2);cursor:pointer;user-select:none;border-bottom:1px solid var(--bdr);transition:background .3s}
        .log-hdr-t{font-size:.68rem;letter-spacing:.18em;color:var(--ts);text-transform:uppercase}
        .log-tog{font-size:.62rem;color:var(--td)}
        .log-body{max-height:220px;overflow-y:auto;display:none}
        .log-body.open{display:block}
        .log-tbl{width:100%;border-collapse:collapse;font-size:.65rem}
        .log-tbl th{padding:.38rem .6rem;text-align:left;color:var(--td);letter-spacing:.1em;font-size:.58rem;border-bottom:1px solid var(--bdr);font-weight:400;background:var(--surf);position:sticky;top:0;transition:background .3s}
        .log-tbl td{padding:.32rem .6rem;border-bottom:1px solid rgba(42,32,24,.45);color:var(--ts);font-variant-numeric:tabular-nums}
        [data-theme="light"] .log-tbl td{border-bottom-color:rgba(200,192,176,.5)}
        .log-tbl td:nth-child(2){color:var(--acc)}
        .log-tbl tr:last-child td{border-bottom:none}
        .log-nil td{color:var(--td);font-style:italic;text-align:center;padding:1rem;font-size:.62rem}
        
        /* ── FLIP MODAL ── */
        .modal-bg{
          position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(5px);
          z-index:500;display:none;align-items:center;justify-content:center;
        }
        [data-theme="light"] .modal-bg{background:rgba(0,0,0,.5)}
        .modal-bg.open{display:flex}
        .modal{
          background:var(--surf);border:1px solid var(--bdr2);
          width:min(540px,94vw);max-height:82vh;
          display:flex;flex-direction:column;
          box-shadow:0 28px 70px rgba(0,0,0,.75);
          transition:background .3s,border-color .3s;
        }
        [data-theme="light"] .modal{box-shadow:0 28px 70px rgba(0,0,0,.25)}
        .modal-head{padding:1rem 1.2rem;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between}
        .modal-ttl{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:300;color:var(--acc);letter-spacing:.1em}
        .modal-sub{font-size:.65rem;color:var(--ts);letter-spacing:.1em;margin-top:.18rem}
        .modal-body{padding:.7rem 1.2rem;overflow-y:auto;flex:1}
        .fm-row{
          display:flex;align-items:center;gap:.6rem;
          padding:.5rem .4rem;border-bottom:1px solid rgba(42,32,24,.4);
          transition:background .14s;cursor:pointer;
        }
        [data-theme="light"] .fm-row{border-bottom-color:rgba(200,192,176,.5)}
        .fm-row:last-child{border-bottom:none}
        .fm-row:hover{background:rgba(255,255,255,.02)}
        [data-theme="light"] .fm-row:hover{background:rgba(0,0,0,.02)}
        .fm-row.is-empty{background:rgba(168,232,76,.04)}
        [data-theme="light"] .fm-row.is-empty{background:rgba(90,138,16,.06)}
        .fm-chk{width:16px;height:16px;cursor:pointer;accent-color:var(--grn);flex-shrink:0}
        .fm-nm{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:400;color:var(--tp);min-width:36px}
        .fm-st{font-size:.58rem;letter-spacing:.12em;padding:.12rem .32rem;border:1px solid;text-transform:uppercase;flex-shrink:0}
        .fm-st.running{color:var(--acc);border-color:var(--acc)}
        .fm-st.paused{color:var(--blu);border-color:var(--blu)}
        .fm-st.idle{color:var(--ts);border-color:var(--ts)}
        .fm-st.empty{color:var(--grn);border-color:var(--grn)}
        .fm-rem{font-size:.65rem;color:var(--ts);font-variant-numeric:tabular-nums;margin-left:auto}
        .fm-fc{font-size:.58rem;color:var(--td);margin-left:.45rem}
        .fm-tag{font-size:.52rem;color:var(--grn);letter-spacing:.1em;margin-left:.22rem}
        .fm-empty-note{padding:.9rem;font-size:.65rem;color:var(--td);text-align:center}
        
        .modal-foot{padding:.7rem 1.2rem;border-top:1px solid var(--bdr);display:flex;gap:.45rem;flex-wrap:wrap}
        .btn-mf{
          flex:1;min-width:120px;padding:.5rem .45rem;
          font-family:'Space Mono',monospace;font-size:.7rem;
          letter-spacing:.09em;cursor:pointer;text-transform:uppercase;
          transition:all .2s;text-align:center;
        }
        .btn-mf.prim{background:var(--grn);color:#fff;border:none;font-weight:700}
        .btn-mf.prim:hover{background:#7ab820}
        .btn-mf.sec{background:var(--surf2);border:1px solid var(--bdr);color:var(--ts)}
        .btn-mf.sec:hover{border-color:var(--acc);color:var(--acc)}
        .btn-mf.gho{background:none;border:1px solid var(--bdr);color:var(--td)}
        .btn-mf.gho:hover{border-color:var(--red);color:var(--red)}
        
        /* ── NOTIFICATIONS ── */
        .ntf-wrap{position:fixed;top:82px;right:1.3rem;z-index:600;display:flex;flex-direction:column;gap:.35rem;pointer-events:none}
        .ntf{
          background:var(--surf2);border:1px solid var(--acc);
          padding:.48rem .85rem;font-size:.7rem;letter-spacing:.1em;color:var(--acc);
          animation:nin .22s ease,nout .28s ease 1.9s forwards;
          transition:background .3s;
        }
        .ntf.grn{border-color:var(--grn);color:var(--grn)}
        .ntf.red{border-color:var(--red);color:var(--red)}
        @keyframes nin{from{transform:translateX(12px);opacity:0}to{transform:none;opacity:1}}
        @keyframes nout{from{opacity:1}to{opacity:0;transform:translateX(10px)}}
        
        ::-webkit-scrollbar{width:5px}
        ::-webkit-scrollbar-track{background:var(--bg)}
        ::-webkit-scrollbar-thumb{background:var(--bdr)}
        ::-webkit-scrollbar-thumb:hover{background:var(--acc)}
        
        @media(max-width:720px){
          .layout{grid-template-columns:1fr}
          .sidebar{position:static;height:auto;max-height:none}
          .main{max-height:none}
          header{grid-template-columns:1fr;height:auto;padding:.7rem 1.1rem;gap:.5rem}
          .logo{justify-content:center}
          .hdr-right{align-items:center}
        }