/* app-base.css —— 设计变量 / reset / 通用组件（bar, tabs, card, switch, button, input, tag, dialog, toast）
   从 index.html 内联 <style> 拆出（2026-08-15），逐字保留。 */

    :root {
      --bg:#f4f5f7; --card:#ffffff; --sunk:#eceef1;
      --text:#16181c; --text-2:#5b6470; --text-3:#9aa1ab;
      --line:#eef0f3;
      --blue:#2f7bff; --blue-d:#1f6bff;
      --green:#11b566; --red:#f0473c; --amber:#f59e0b;
      --r-xl:12px; --r-l:10px; --r-m:8px; --r-s:6px; --pill:999px;
      --mono:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
      --sh:0 1px 2px rgba(20,24,33,.03);
      --sh-pop:0 12px 40px rgba(20,24,33,.18);
      --ease:cubic-bezier(.2,.8,.2,1);
      --safe-b:env(safe-area-inset-bottom,0px);
    }
    * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
    html,body { margin:0; background:var(--bg); color:var(--text);
      font-family:"MiSans","PingFang SC",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
      font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; }
    .app { max-width:480px; margin:0 auto; min-height:100vh; padding:0 14px calc(28px + var(--safe-b)); }

    /* App bar */
    .bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
      padding:14px 4px 10px; background:linear-gradient(var(--bg) 70%, transparent); }
    .bar .logo { width:34px; height:34px; border-radius:11px; flex:none;
      background:var(--blue); display:flex; align-items:center; justify-content:center;
      color:#fff; font-weight:800; font-size:16px; }
    .bar h1 { font-size:18px; font-weight:700; margin:0; letter-spacing:-.01em; }
    .bar .sub { font-size:11px; color:var(--text-3); margin-top:1px; }
    .bar .dot { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-2);
      background:var(--card); padding:6px 11px; border-radius:var(--pill); box-shadow:var(--sh); }
    .dot i { width:8px; height:8px; border-radius:50%; background:var(--text-3); transition:.3s; }
    .dot i.ok { background:var(--green); box-shadow:0 0 0 3px rgba(17,181,102,.16); }
    .dot i.bad { background:var(--red); box-shadow:0 0 0 3px rgba(240,71,60,.16); }

    /* Segmented tabs */
    .seg { display:flex; background:var(--sunk); border-radius:var(--r-m); padding:3px; margin:6px 0 16px; }
    .seg button { flex:1; border:0; background:transparent; padding:9px 2px; border-radius:6px; cursor:pointer;
      color:var(--text-2); font-weight:600; font-size:12.5px; font-family:inherit; transition:.25s var(--ease); }
    .seg button.active { background:var(--card); color:var(--text); }

    /* Cards / grouped list */
    .group { background:var(--card); border:1px solid #e4e7ec; border-radius:var(--r-xl); box-shadow:var(--sh); overflow:hidden; margin-bottom:14px;
      animation:rise .4s var(--ease) both; }
    @keyframes rise { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
    .ghead { padding:16px 18px 4px; font-size:12.5px; font-weight:700; color:var(--text-3); letter-spacing:.02em; }
    .item { display:flex; align-items:center; gap:13px; padding:14px 18px; }
    .item + .item { border-top:1px solid var(--line); }
    .item .lab { flex:1; min-width:0; }
    .item .lab .t { font-size:15.5px; font-weight:550; }
    .item .lab .s { font-size:12px; color:var(--text-3); margin-top:2px; }
    .item .val { font-size:15px; font-weight:650; font-variant-numeric:tabular-nums; }
    .num { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.2px; }

    /* Switch (MIUI/HyperOS) */
    .sw { position:relative; width:50px; height:30px; flex:none; cursor:pointer; }
    .sw input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
    .sw .tk { position:absolute; inset:0; background:#dfe2e7; border-radius:var(--pill); transition:background .3s var(--ease); }
    .sw .kn { position:absolute; top:2.5px; left:2.5px; width:25px; height:25px; background:#fff; border-radius:50%;
      box-shadow:0 2px 6px rgba(20,24,33,.22); transition:transform .32s var(--ease); }
    .sw input:checked ~ .tk { background:var(--blue); }
    .sw input:checked ~ .kn { transform:translateX(20px); }
    .sw.danger input:checked ~ .tk { background:var(--red); }
    .sw input:active ~ .kn { width:29px; }

    /* Buttons */
    .btn { border:0; border-radius:var(--r-m); padding:12px 16px; font-size:15px; font-weight:600; font-family:inherit;
      cursor:pointer; background:var(--sunk); color:var(--text); transition:transform .12s var(--ease), filter .2s, background .2s; }
    .btn:active { transform:scale(.96); }
    .btn.pri { background:var(--blue); color:#fff; }
    .btn.pri:active { background:var(--blue-d); }
    .btn.dang { background:var(--red); color:#fff; }
    .btn.ghost { background:transparent; color:var(--blue); font-weight:650; }
    .btn.block { width:100%; }
    .row2 { display:flex; gap:10px; }
    .row2 .btn { flex:1; }

    /* Stepper */
    .step { display:flex; align-items:center; gap:0; background:var(--sunk); border-radius:var(--r-m); overflow:hidden; }
    .step button { width:40px; height:40px; border:0; background:transparent; font-size:20px; color:var(--blue); cursor:pointer; }
    .step input { width:64px; border:0; background:transparent; text-align:center; font-size:16px; font-weight:650;
      font-family:inherit; color:var(--text); -moz-appearance:textfield; }
    .step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{ -webkit-appearance:none; }

    /* Inputs */
    .field { padding:14px 18px; }
    .field label { display:block; font-size:12px; color:var(--text-3); margin-bottom:7px; }
    .field input, .field textarea { width:100%; border:1px solid var(--line); background:#fbfcfd; color:var(--text);
      border-radius:var(--r-m); padding:11px 13px; font:inherit; transition:.2s; resize:none; }
    .field input:focus, .field textarea:focus { outline:0; border-color:var(--blue); background:#fff;
      box-shadow:0 0 0 4px rgba(47,123,255,.12); }

    /* Pills / tags */
    .tag { font-size:11.5px; font-weight:650; padding:3px 9px; border-radius:var(--pill); white-space:nowrap; }
    .tag.up { background:rgba(17,181,102,.13); color:#0e9c58; }
    .tag.down { background:rgba(240,71,60,.13); color:#d83b30; }
    .tag.mut { background:var(--sunk); color:var(--text-2); }
    .tag.dry { background:rgba(245,158,11,.15); color:#b9770a; }

    /* List rows (orders/signals) */
    .lrow { display:flex; align-items:center; gap:12px; padding:13px 18px; }
    .lrow + .lrow { border-top:1px solid var(--line); }
    .lrow .main { flex:1; min-width:0; }
    .lrow .main .l1 { display:flex; align-items:center; gap:7px; font-weight:600; font-size:14.5px; }
    .lrow .main .l2 { font-size:12px; color:var(--text-3); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .lrow .rt { text-align:right; font-size:12px; color:var(--text-2); }
    .empty { padding:30px 18px; text-align:center; color:var(--text-3); font-size:13.5px; }

    /* Feed */
    .feed { max-height:230px; overflow:auto; padding:6px 0; }
    .feed div { padding:7px 18px; font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums;
      border-top:1px solid var(--line); animation:rise .3s var(--ease) both; }
    .feed div:first-child { border-top:0; }

    .hint { font-size:12px; color:var(--text-3); padding:10px 18px 16px; line-height:1.6; }

    /* Dialog */
    .scrim { position:fixed; inset:0; background:rgba(20,24,33,.32); backdrop-filter:blur(6px); z-index:50;
      display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .28s var(--ease); }
    .scrim.show { opacity:1; pointer-events:auto; }
    .sheet { width:100%; max-width:452px; background:var(--card); border-radius:24px 24px 0 0; padding:22px 20px calc(20px + var(--safe-b));
      transform:translateY(20px); transition:transform .34s var(--ease); box-shadow:var(--sh-pop); }
    .scrim.show .sheet { transform:none; }
    @media(min-width:481px){ .scrim{ align-items:center; } .sheet{ border-radius:24px; } }
    .sheet h3 { margin:0 0 6px; font-size:18px; }
    .sheet p { margin:0 0 18px; color:var(--text-2); font-size:14px; }
    .sheet .row2 { margin-top:4px; }

    /* Toast */
    #toast { position:fixed; left:50%; bottom:calc(28px + var(--safe-b)); transform:translateX(-50%) translateY(20px);
      background:rgba(22,24,28,.92); color:#fff; padding:11px 18px; border-radius:var(--pill); font-size:13.5px;
      z-index:60; opacity:0; pointer-events:none; transition:.3s var(--ease); max-width:90%; box-shadow:var(--sh-pop); }
    #toast.show { opacity:1; transform:translateX(-50%); }