:root{
    --bg:#F3F4FA; --card:rgba(255,255,255,.72); --card-brd:rgba(255,255,255,.9);
    --line:rgba(64,68,112,.10); --text:#17181F; --text2:#5C5E6B; --text3:#8B8D9C;
    --primary:#6366F1; --primary-d:#4F46E5; --primary-soft:rgba(99,102,241,.12);
    --ok:#12B76A; --warn:#F79009; --bad:#F04438; --shadow:0 8px 24px rgba(56,60,110,.08);
    --r:18px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html,body{margin:0; padding:0}
  body{
    min-height:100vh; color:var(--text); font-size: 15.5px; line-height:1.5;
    font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(70% 55% at 8% -12%, rgba(99,102,241,.22), transparent 62%),
      radial-gradient(60% 50% at 96% -6%, rgba(56,189,248,.18), transparent 60%),
      radial-gradient(55% 45% at 78% 108%, rgba(139,92,246,.14), transparent 62%),
      linear-gradient(158deg,#FAFBFF 0%, #F3F4FA 46%, #EFF1F9 100%);
    background-attachment:fixed;
  }
  button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
  input{font:inherit; color:inherit}
  .ic{width:20px; height:20px; flex:0 0 auto; display:block}
  .ic.sm{width:16px; height:16px}
  .ic.lg{width:26px; height:26px}

  /* ============ login ============ */
  #login{
    position:relative; overflow:hidden;
    min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px 18px;
  }
  #login:before,#login:after{content:""; position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none}
  #login:before{width:420px; height:420px; left:10%; top:6%; background:rgba(99,102,241,.20)}
  #login:after{width:380px; height:380px; right:12%; bottom:4%; background:rgba(56,189,248,.16)}
  .login-card{
    position:relative; z-index:1;
    width:100%; max-width:432px; padding:34px 32px 28px; border-radius:24px;
    background:var(--card); border:1px solid var(--card-brd);
    backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%);
    box-shadow:0 20px 50px rgba(56,60,110,.13), 0 2px 8px rgba(56,60,110,.05);
    animation:rise .5s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
  .brand-mark{
    width:50px; height:50px; border-radius:15px; display:grid; place-items:center; color:#fff;
    font-weight:800; font-size: 22px; letter-spacing:-.5px;
    background:linear-gradient(140deg,#7C7CF8,#4F46E5 70%);
    box-shadow:0 10px 22px rgba(79,70,229,.34);
  }
  .login-card h1{margin:18px 0 6px; font-size: 26px; letter-spacing:-.4px}
  .login-sub{margin:0 0 24px; color:var(--text2); font-size: 15px}
  .field{margin-bottom:16px}
  .field label{display:block; font-size: 13.5px; font-weight:600; color:var(--text2); margin-bottom:8px; letter-spacing:.1px}
  .input-wrap{
    display:flex; align-items:center; gap:10px; padding:0 14px; height:52px;
    background:rgba(255,255,255,.85); border:1px solid var(--line); border-radius:14px;
    transition:border-color .18s, box-shadow .18s, background .18s;
  }
  .input-wrap:focus-within{border-color:rgba(99,102,241,.55); box-shadow:0 0 0 4px var(--primary-soft); background:#fff}
  .input-wrap .ic{color:var(--text3)}
  .input-wrap input{
    flex:1; min-width:0; border:0; outline:0; background:none; font-size: 16px; height:100%;
  }
  .input-wrap input::placeholder{color:#A6A8B6}
  .code-input{letter-spacing:.42em; font-variant-numeric:tabular-nums; font-size: 18px; font-weight:600}
  .code-input::placeholder{letter-spacing:normal; font-size: 15.5px; font-weight:500; color:#A6A8B6}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:52px; padding:0 20px; border-radius:14px; font-size: 15.5px; font-weight:600;
    background:linear-gradient(135deg,#6E70F5,#4F46E5); color:#fff;
    box-shadow:0 8px 20px rgba(79,70,229,.26); transition:transform .16s, box-shadow .16s, opacity .16s;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-1px); box-shadow:0 12px 24px rgba(79,70,229,.3)}
  .btn:active{transform:translateY(0)}
  .btn[disabled]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
  .btn-full{width:100%}
  .btn-ghost{
    background:rgba(255,255,255,.7); color:var(--text2); border:1px solid var(--line);
    box-shadow:none; height:38px; border-radius:11px; font-size: 14px; padding:0 13px; font-weight:600;
  }
  .btn-ghost:hover{background:#fff; color:var(--text); transform:none; box-shadow:var(--shadow)}
  .send-btn{height:36px; padding:0 14px; border-radius:10px; font-size: 14px; font-weight:600; color:var(--primary-d); background:var(--primary-soft); white-space:nowrap}
  .send-btn[disabled]{color:var(--text3); background:rgba(139,141,156,.12); cursor:not-allowed}
  .login-err{display:none; margin:0 0 14px; padding:11px 13px; border-radius:12px; background:rgba(240,68,56,.09); color:#B42318; font-size: 14px; line-height:1.45}
  .login-err.show{display:block}
  .login-foot{margin-top:18px; font-size: 13.5px; color:var(--text3); text-align:center; line-height:1.6}

  /* ============ shell ============ */
  #app{display:none; min-height:100vh; padding:16px; gap:18px}
  #app.on{display:grid; grid-template-columns:240px minmax(0,1fr); align-items:start}
  .sidebar{
    position:sticky; top:16px; height:auto; max-height:calc(100vh - 32px); display:flex; flex-direction:column;
    padding:20px 14px 14px; border-radius:22px;
    background:var(--card); border:1px solid var(--card-brd);
    backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    box-shadow:var(--shadow);
  }
  .side-brand{display:flex; align-items:center; gap:11px; padding:2px 6px 22px}
  .side-brand .brand-mark{width:40px; height:40px; border-radius:12px; font-size: 18px; box-shadow:0 8px 16px rgba(79,70,229,.28)}
  .side-brand b{display:block; font-size: 16px; letter-spacing:-.2px}
  .side-brand span{display:block; font-size: 13.5px; color:var(--text3); margin-top:1px}
  .nav{display:flex; flex-direction:column; gap:5px}
  .nav-item{
    display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px;
    color:var(--text2); font-size: 15px; font-weight:600; text-align:left; width:100%;
    transition:background .16s, color .16s, transform .16s;
  }
  .nav-item .ic{color:var(--text3); transition:color .16s}
  .nav-item:hover{background:rgba(99,102,241,.07); color:var(--text)}
  .nav-item.active{
    background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(99,102,241,.07));
    color:var(--primary-d); box-shadow:inset 0 0 0 1px rgba(99,102,241,.16);
  }
  .nav-item.active .ic{color:var(--primary-d)}
  .nav-badge{margin-left:auto; font-size: 13px; font-weight:700; color:var(--primary-d); background:rgba(99,102,241,.14); padding:1px 7px; border-radius:20px}
  .side-spacer{flex:1}
  .side-block{margin-top:16px; padding:13px 13px 12px; border-radius:14px; background:rgba(255,255,255,.55); border:1px solid var(--line)}
  .side-block .sb-h{display:flex; align-items:center; justify-content:space-between; font-size: 13.5px; font-weight:700; color:var(--text2)}
  .side-block .sb-h span{color:var(--text3); font-weight:600}
  .sb-bar{display:flex; gap:2px; height:7px; margin:10px 0 10px; border-radius:6px; overflow:hidden; background:rgba(139,141,156,.14)}
  .sb-bar i{display:block; height:100%; border-radius:3px; transition:width .4s ease}
  .sb-legend{display:flex; flex-direction:column; gap:6px; font-size: 13.5px; color:var(--text3)}
  .sb-legend div{display:flex; align-items:center; gap:6px}
  .sb-legend em{width:7px; height:7px; border-radius:50%; flex:0 0 auto}
  .sb-legend b{margin-left:auto; color:var(--text); font-weight:700; font-variant-numeric:tabular-nums}
  .side-meta{padding:12px 12px 8px; font-size: 13.5px; color:var(--text3); line-height:1.65; border-top:1px solid var(--line)}
  .side-foot{display:flex; gap:8px; padding-top:10px; margin-top:18px}
  .side-foot .btn-ghost{flex:1; justify-content:center; padding:0 8px}

  /* ============ main ============ */
  main{min-width:0; padding-bottom:10px}
  .errbar{
    display:none; align-items:center; gap:10px; margin-bottom:14px; padding:12px 15px; border-radius:14px;
    background:rgba(240,68,56,.08); border:1px solid rgba(240,68,56,.2); color:#B42318; font-size: 14px;
  }
  .errbar.show{display:flex}
  .errbar .ic{color:var(--bad)}
  .errbar .txt{flex:1; min-width:0; line-height:1.45}
  .errbar button{color:#B42318; font-weight:700; font-size: 14px; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}

  .topbar{display:flex; align-items:flex-end; gap:16px; margin:6px 2px 18px; flex-wrap:wrap}
  .topbar h1{margin:0; font-size: 28px; letter-spacing:-.7px; line-height:1.2}
  .topbar .sub{display:flex; align-items:center; gap:9px; margin-top:7px; font-size: 14px; color:var(--text2); flex-wrap:wrap}
  .dot-sep{width:3px; height:3px; border-radius:50%; background:#C9CBD6}
  .pill{display:inline-flex; align-items:center; gap:5px; font-size: 13.5px; font-weight:700; padding:2px 9px; border-radius:20px}
  .pill.bad{color:#B42318; background:rgba(240,68,56,.11)}
  .pill.warn{color:#B54708; background:rgba(247,144,9,.14)}
  .pill.ok{color:#05603A; background:rgba(18,183,106,.12)}
  .pill.mute{color:var(--text2); background:rgba(139,141,156,.12)}
  .topbar .right{margin-left:auto; display:flex; gap:9px; align-items:center}
  .refresh-btn{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:11px; background:rgba(255,255,255,.72); border:1px solid var(--line); font-size: 14px; font-weight:600; color:var(--text2); box-shadow:0 2px 8px rgba(56,60,110,.05); transition:all .16s}
  .refresh-btn:hover{background:#fff; color:var(--text); box-shadow:var(--shadow)}
  .refresh-btn.spin .ic{animation:sp .8s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}

  .card{
    background:var(--card); border:1px solid var(--card-brd); border-radius:var(--r);
    backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    box-shadow:var(--shadow); padding:18px 18px 16px;
  }
  .card-h{display:flex; align-items:center; gap:9px; margin-bottom:12px}
  .card-h h2{margin:0; font-size: 16px; letter-spacing:-.1px}
  .card-h .ic{color:var(--primary-d)}
  .card-h .count{font-size: 13.5px; font-weight:700; color:var(--text2); background:rgba(139,141,156,.13); padding:1px 8px; border-radius:20px}
  .card-h .more{margin-left:auto; display:inline-flex; align-items:center; gap:2px; font-size: 13.5px; font-weight:600; color:var(--primary-d); padding:4px 6px; border-radius:8px}
  .card-h .more:hover{background:var(--primary-soft)}

  /* stats */
  .stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px}
  .stat{
    position:relative; text-align:left; padding:15px 16px 14px; border-radius:16px;
    background:var(--card); border:1px solid var(--card-brd);
    backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    box-shadow:var(--shadow); overflow:hidden;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .stat:before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary); opacity:.85}
  .stat:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(56,60,110,.12)}
  .stat .st-top{display:flex; align-items:center; gap:8px}
  .stat .st-ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-d)}
  .stat .st-label{font-size: 13.5px; color:var(--text2); font-weight:600; line-height:1.25}
  .stat .st-num{font-size: 30px; font-weight:750; letter-spacing:-1px; margin-top:8px; font-variant-numeric:tabular-nums; line-height:1.1}
  .stat .st-hint{font-size: 13.5px; color:var(--text3); margin-top:3px}
  .stat.t-bad:before{background:var(--bad)} .stat.t-bad .st-ic{background:rgba(240,68,56,.11); color:#D92D20}
  .stat.t-warn:before{background:var(--warn)} .stat.t-warn .st-ic{background:rgba(247,144,9,.13); color:#B54708}
  .stat.t-ok:before{background:var(--ok)} .stat.t-ok .st-ic{background:rgba(18,183,106,.12); color:#027A48}

  .wb-grid{display:grid; grid-template-columns:minmax(0,1.42fr) minmax(330px,1fr); gap:16px; align-items:start}
  .col{display:flex; flex-direction:column; gap:16px; min-width:0}

  /* todo rows */
  .tl{display:flex; flex-direction:column}
  .trow{
    display:flex; gap:11px; align-items:flex-start; padding:11px 9px; border-radius:12px;
    transition:background .15s, transform .15s, box-shadow .15s; cursor:pointer; position:relative;
  }
  .trow + .trow{border-top:1px solid var(--line)}
  .trow:hover{background:rgba(255,255,255,.78); box-shadow:0 6px 16px rgba(56,60,110,.07); transform:translateY(-1px); z-index:1}
  .trow:hover + .trow{border-top-color:transparent}
  .tdot{
    flex:0 0 auto; width:22px; height:22px; margin-top:1px; border-radius:50%;
    display:grid; place-items:center; border:2px solid transparent; transition:transform .15s, background .15s;
    background:transparent;
  }
  .tdot:hover{transform:scale(1.12)}
  .tdot i{display:block; width:11px; height:11px; border-radius:50%; background:var(--dc,#6366F1); box-shadow:0 0 0 4px color-mix(in srgb, var(--dc,#6366F1) 16%, transparent)}
  .tdot .ic{display:none; width:13px; height:13px; color:#fff}
  .trow.done .tdot{background:var(--ok); border-color:var(--ok)}
  .trow.done .tdot i{display:none}
  .trow.done .tdot .ic{display:block}
  .tbody{min-width:0; flex:1}
  .tline{display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px; min-width:0}
  .ttitle{font-size: 15px; font-weight:600; line-height:1.42; letter-spacing:-.05px; word-break:break-word; min-width:0; flex:0 1 auto}
  .tmeta{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size: 13.5px; color:var(--text3); flex:0 0 auto}
  .chip{display:inline-flex; align-items:center; gap:4px; font-size: 13px; padding:1px 7px; border-radius:7px; background:rgba(139,141,156,.11); color:var(--text2); font-weight:600; white-space:nowrap}
  .chip.p0{background:rgba(240,68,56,.1); color:#B42318}
  .chip.p1{background:rgba(247,144,9,.12); color:#B54708}
  .chip.cat{background:rgba(99,102,241,.1); color:var(--primary-d)}
  .tright{flex:0 0 auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:5px}
  .tago{font-size: 13.5px; color:var(--text3); white-space:nowrap; font-variant-numeric:tabular-nums}
  .tago.hot{color:#B42318; font-weight:600}
  .trow.done .ttitle{color:var(--text3); text-decoration:line-through; text-decoration-color:rgba(139,141,156,.6)}
  .trow.done .tmeta{opacity:.6}
  .donenote{display:none; align-items:center; gap:4px; margin-top:5px; font-size: 13.5px; font-weight:600; color:#027A48}
  .trow.done .donenote{display:flex; animation:rise .25s both}
  .trow.busy{opacity:.55; pointer-events:none}

  /* right column bits */
  .dec-row{display:flex; gap:10px; align-items:flex-start; padding:10px 9px; border-radius:11px; cursor:pointer; transition:background .15s, transform .15s}
  .dec-row + .dec-row{border-top:1px solid var(--line)}
  .dec-row:hover{background:rgba(255,255,255,.78); transform:translateY(-1px)}
  .dec-bar{width:3px; align-self:stretch; border-radius:3px; background:linear-gradient(180deg,#F97066,#F04438); flex:0 0 auto}
  .dec-row .t{font-size: 15px; font-weight:600; line-height:1.42}
  .dec-row .m{font-size: 13.5px; color:var(--text3); margin-top:4px}

  .ai-row{display:flex; gap:10px; align-items:center; padding:9px; border-radius:11px}
  .ai-row + .ai-row{border-top:1px solid var(--line)}
  .ai-av{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-d); flex:0 0 auto}
  .ai-row .t{font-size: 14px; font-weight:600; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .ai-row .m{font-size: 13.5px; color:var(--text3); margin-top:2px}
  .ai-stats{display:flex; gap:7px; margin-top:11px; flex-wrap:wrap}

  .quick{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .qbtn{display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:11px; background:rgba(255,255,255,.6); border:1px solid var(--line); font-size: 13.5px; font-weight:600; color:var(--text2); text-align:left; transition:all .15s}
  .qbtn:hover{background:#fff; color:var(--text); transform:translateY(-1px); box-shadow:var(--shadow)}
  .qbtn .ic{color:var(--primary-d)}

  .mini-apps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  .mini-app{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:11px; transition:all .15s}
  .mini-app:hover{background:rgba(255,255,255,.8); transform:translateY(-1px); box-shadow:var(--shadow)}
  .mini-app .mi{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:rgba(99,102,241,.1); color:var(--primary-d)}
  .mini-app span{font-size: 13px; color:var(--text2); font-weight:600; text-align:center; line-height:1.3}

  /* empty */
  .empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:26px 12px; color:var(--text3); text-align:center}
  .empty .ic{width:28px; height:28px; color:#B9BBC8}
  .empty p{margin:0; font-size: 14px}

  /* ============ todos view ============ */
  .view{display:none}
  .view.on{display:block; animation:rise .28s both}
  .toolbar{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
  .search{display:flex; align-items:center; gap:9px; height:44px; padding:0 14px; border-radius:13px; background:rgba(255,255,255,.8); border:1px solid var(--line); width:min(360px,100%); transition:all .18s}
  .search:focus-within{border-color:rgba(99,102,241,.5); box-shadow:0 0 0 4px var(--primary-soft); background:#fff}
  .search .ic{color:var(--text3)}
  .search input{flex:1; min-width:0; border:0; outline:0; background:none; font-size: 15px; height:100%}
  .search input::placeholder{color:#A6A8B6}
  .tabs{display:inline-flex; gap:3px; padding:4px; border-radius:13px; background:rgba(255,255,255,.66); border:1px solid var(--line)}
  .tab{display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 13px; border-radius:10px; font-size: 14px; font-weight:600; color:var(--text2); transition:all .15s}
  .tab:hover{color:var(--text); background:rgba(99,102,241,.07)}
  .tab.active{background:#fff; color:var(--primary-d); box-shadow:0 3px 10px rgba(56,60,110,.1)}
  .tab .n{font-size: 13px; padding:0 6px; border-radius:20px; background:rgba(99,102,241,.13); color:var(--primary-d); font-variant-numeric:tabular-nums}
  .list-meta{margin-left:auto; font-size: 13.5px; color:var(--text3); white-space:nowrap; font-variant-numeric:tabular-nums}
  .sentinel{height:40px; display:grid; place-items:center; font-size: 13.5px; color:var(--text3)}
  .loading-line{display:flex; align-items:center; justify-content:center; gap:8px; padding:18px; color:var(--text3); font-size: 14px}
  .spinner{width:15px; height:15px; border-radius:50%; border:2px solid rgba(99,102,241,.22); border-top-color:var(--primary); animation:sp .7s linear infinite}

  /* ============ apps view ============ */
  .group{margin-bottom:18px}
  .group-h{display:flex; align-items:center; gap:9px; margin:2px 4px 11px}
  .group-h h2{margin:0; font-size: 15.5px; letter-spacing:-.1px}
  .group-h .count{font-size: 13px; font-weight:700; color:var(--text2); background:rgba(139,141,156,.13); padding:1px 8px; border-radius:20px}
  .group-h .ln{flex:1; height:1px; background:var(--line)}
  .app-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:12px}
  .app-card{
    display:flex; gap:12px; align-items:center; padding:14px; border-radius:15px; text-align:left; width:100%;
    background:var(--card); border:1px solid var(--card-brd); box-shadow:0 3px 12px rgba(56,60,110,.05);
    backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
    transition:transform .16s, box-shadow .16s, border-color .16s;
  }
  .app-card:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(56,60,110,.13); border-color:rgba(99,102,241,.25)}
  .app-ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(140deg,rgba(99,102,241,.15),rgba(99,102,241,.07)); color:var(--primary-d); flex:0 0 auto}
  .app-body{min-width:0; flex:1}
  .app-name{font-size: 15px; font-weight:650; display:flex; align-items:center; gap:6px}
  .app-desc{font-size: 13.5px; color:var(--text3); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .app-lock{color:#B9BBC8; flex:0 0 auto}
  .app-card:hover .app-lock{color:var(--warn)}

  /* toast */
  #toast{position:fixed; left:50%; bottom:30px; transform:translate(-50%,18px); z-index:99; pointer-events:none; opacity:0; transition:opacity .2s, transform .2s;
    display:flex; align-items:center; gap:9px; padding:11px 17px; border-radius:13px; font-size: 14px; font-weight:600;
    background:rgba(23,24,31,.9); color:#fff; box-shadow:0 12px 30px rgba(23,24,31,.28); backdrop-filter:blur(10px); max-width:min(92vw,460px)}
  #toast.on{opacity:1; transform:translate(-50%,0)}
  #toast.bad{background:rgba(180,35,24,.94)}
  #toast.ok{background:rgba(5,96,58,.94)}

  @media (max-width:1180px){
    .wb-grid{grid-template-columns:minmax(0,1fr) minmax(300px,1fr)}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:900px){
    #app.on{grid-template-columns:1fr; padding:12px; gap:12px}
    .sidebar{position:static; height:auto; flex-direction:row; align-items:center; gap:8px; padding:10px 12px; border-radius:16px; overflow-x:auto}
    .side-brand{padding:0 6px 0 0; flex:0 0 auto}
    .side-brand .brand-mark{width:34px; height:34px; border-radius:10px; font-size: 15.5px}
    .side-brand div{display:none}
    .nav{flex-direction:row; gap:4px; flex:0 0 auto}
    .nav-item{padding:8px 11px; font-size: 14px; white-space:nowrap}
    .nav-badge{display:none}
    .side-spacer,.side-meta{display:none}
    .side-block{display:none}
    .side-foot{padding:0; margin-left:auto; flex:0 0 auto}
    .side-foot .btn-ghost{padding:0 9px; height:34px}
    .side-foot .btn-ghost span{display:none}
    .wb-grid{grid-template-columns:1fr}
    .topbar h1{font-size: 23px}
    .topbar .sub{gap:7px; font-size: 13.5px}
    .topbar .sub .pill{font-size: 13px; padding:1px 8px}
    .topbar .sub .pill.mute{display:none}
    .topbar .right{margin-left:auto; width:auto}
    .refresh-btn{flex:0 0 auto; height:36px; padding:0 13px}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
    .stat .st-num{font-size: 26px}
    .mini-apps{grid-template-columns:repeat(4,minmax(0,1fr))}
    .app-grid{grid-template-columns:1fr}
    .list-meta{margin-left:0; width:100%}
    .toolbar{gap:10px}
    .search{width:100%}
    .tabs{width:100%; overflow-x:auto}
    .login-card{padding:26px 20px 22px}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}