:root{
    --bg:#f7f7f3;
    --surface:#ffffff;
    --ink:#111815;
    --muted:#707972;
    --faint:#98a09a;
    --line:#e2e3dc;
    --line-soft:#edeee8;
    --accent:#1f6b52;
    --accent-deep:#175340;
    --accent-soft:#eaf2ed;
    --danger:#a33528;
    --danger-soft:#fbefed;
    --warn:#8a6517;
    --warn-soft:#f8f1df;
    --radius:15px;
    --shadow:0 1px 2px rgba(17,24,21,.035), 0 14px 34px -28px rgba(17,24,21,.22);
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;
    min-height:100vh;
    color:var(--ink);
    background:var(--bg);
    font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
      radial-gradient(900px 520px at 8% 0%, rgba(31,107,82,.075), transparent 62%),
      radial-gradient(720px 500px at 96% 12%, rgba(170,150,96,.075), transparent 66%),
      linear-gradient(180deg,#f8f8f4 0%,#f3f4ef 100%);
  }
  [hidden]{display:none!important}
  button,input{font:inherit}
  button{cursor:pointer}
  a{color:inherit}
  img,svg{display:block}
  ::selection{background:rgba(31,107,82,.2)}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
  .brand-mark{
    width:32px;height:32px;border-radius:9px;
    display:grid;place-items:center;
    background:var(--accent);color:#fff;
    font-size:10.5px;font-weight:750;letter-spacing:.08em;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  }
  .brand-copy{display:flex;flex-direction:column;line-height:1.08}
  .brand-name{font-size:13.5px;font-weight:650;letter-spacing:.01em}
  .brand-sub{margin-top:4px;font-size:9.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}

  .dot{
    width:6px;height:6px;border-radius:50%;
    background:#1f9b6b;
    box-shadow:0 0 0 3px rgba(31,155,107,.12);
    flex:0 0 auto;
  }
  .dot.pending{background:#b38a2e;box-shadow:0 0 0 3px rgba(179,138,46,.12)}
  .dot.bad{background:#b5473a;box-shadow:0 0 0 3px rgba(181,71,58,.12)}
  .dot.off{background:#aab1ab;box-shadow:0 0 0 3px rgba(170,177,171,.12)}

  .spinner{
    width:14px;height:14px;border-radius:50%;
    border:2px solid currentColor;border-right-color:transparent;
    animation:spin .7s linear infinite;flex:0 0 auto;
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:42px;padding:0 17px;
    border:1px solid transparent;border-radius:9px;
    font-size:13px;font-weight:600;line-height:1;
    text-decoration:none;white-space:nowrap;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,opacity .18s ease;
  }
  .btn:active{transform:translateY(1px)}
  .btn:disabled{opacity:.66;cursor:not-allowed;transform:none}
  .btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px -18px rgba(31,107,82,.8)}
  .btn-primary:hover{background:var(--accent-deep)}
  .btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
  .btn-ghost:hover{background:#f5f6f1}
  .btn-danger{background:var(--danger);color:#fff}
  .btn-danger:hover{background:#8e2b20}
  .btn-danger-outline{background:#fff;border-color:#e7c8c3;color:var(--danger)}
  .btn-danger-outline:hover{background:var(--danger-soft)}
  .btn-sm{min-height:35px;padding:0 12px;font-size:12px}
  .btn-block{width:100%;min-height:47px;font-size:13.5px}

  .text-button{
    padding:0;border:0;background:none;color:var(--accent);
    font-size:12.5px;font-weight:600;
  }
  .text-button:hover{text-decoration:underline;text-underline-offset:3px}

  /* ---------- 登录 / 注册 ---------- */
  .auth-nav{
    max-width:1180px;margin:0 auto;padding:25px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
  }
  .nav-note{display:flex;align-items:center;gap:18px;font-size:11.5px;color:var(--faint)}
  .nav-note .program{letter-spacing:.08em}
  .nav-note a{text-decoration:none;color:#737c75}
  .nav-note a:hover{color:var(--ink)}

  .auth-main{
    max-width:1120px;margin:0 auto;padding:42px 28px 76px;
    display:grid;grid-template-columns:minmax(0,1.06fr) minmax(390px,.86fr);
    gap:clamp(44px,7vw,96px);align-items:center;
    min-height:calc(100vh - 150px);
  }
  .intro-badge{
    display:inline-flex;align-items:center;gap:10px;
    color:var(--accent);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  }
  .intro-badge::before{content:"";width:23px;height:1px;background:var(--accent);opacity:.7}
  .intro h1{
    margin:20px 0 18px;
    font-size:clamp(38px,4.4vw,58px);
    font-weight:600;line-height:1.06;letter-spacing:-.045em;
    max-width:560px;
  }
  .intro h1 span{color:var(--accent)}
  .intro-lead{
    max-width:470px;margin:0;
    color:#5e675f;font-size:14.5px;line-height:1.85;
  }
  .intro-list{
    max-width:510px;margin:32px 0 0;
    border-top:1px solid var(--line);
  }
  .intro-item{
    display:grid;grid-template-columns:35px 1fr;gap:14px;
    padding:14px 0;border-bottom:1px solid var(--line);
  }
  .intro-num{
    padding-top:2px;
    color:#a3aba5;font-size:10.5px;font-weight:650;letter-spacing:.08em;
    font-variant-numeric:tabular-nums;
  }
  .intro-item strong{display:block;font-size:13px;font-weight:600;letter-spacing:.01em}
  .intro-item p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.65}

  .auth-panel{
    position:relative;
    padding:30px;border:1px solid #e1e3db;border-radius:20px;
    background:rgba(255,255,255,.93);
    box-shadow:0 32px 90px -46px rgba(17,24,21,.34), inset 0 1px 0 #fff;
  }
  .panel-kicker{display:block;color:var(--accent);font-size:9.5px;font-weight:750;letter-spacing:.2em}
  .panel-head h2{margin:10px 0 7px;font-size:25px;font-weight:600;letter-spacing:-.03em}
  .panel-head p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.65;min-height:21px}

  .auth-tabs{
    display:grid;grid-template-columns:1fr 1fr;gap:4px;
    margin:22px 0 20px;padding:4px;border-radius:10px;background:#f0f1eb;
  }
  .auth-tab{
    height:35px;border:0;border-radius:7px;background:transparent;
    color:#7b847d;font-size:12.5px;font-weight:600;
    transition:background .18s ease,color .18s ease,box-shadow .18s ease;
  }
  .auth-tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(17,24,21,.08)}

  .form-alert{
    display:flex;align-items:flex-start;gap:10px;
    margin:0 0 16px;padding:10px 12px;
    border:1px solid #f0c9c3;border-radius:9px;
    background:#fdf3f1;color:#9a3428;
    font-size:12px;line-height:1.6;
  }
  .form-alert span{flex:1}
  .form-alert button{
    flex:0 0 auto;padding:0;border:0;background:none;
    color:#8c2c21;font-size:11.5px;font-weight:700;text-decoration:underline;text-underline-offset:2px;
  }

  .field{display:block;margin:0 0 15px}
  .field-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
  .field-head label,.field-label{color:#39423b;font-size:12px;font-weight:600}
  .field-hint{color:#9ba29c;font-size:10.5px;font-weight:400}
  .input-wrap{position:relative}
  .input{
    width:100%;height:46px;
    border:1px solid #d9ddd4;border-radius:9px;
    background:#fcfcf9;color:var(--ink);
    padding:0 13px;outline:none;
    font-size:13.5px;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
  }
  .input::placeholder{color:#a7aea8}
  .input:hover{border-color:#cdd2c9}
  .input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(31,107,82,.1)}
  .input[readonly]{color:#6e7770;background:#f4f5f0}
  .input.has-reveal{padding-right:58px}
  .reveal{
    position:absolute;top:50%;right:7px;transform:translateY(-50%);
    padding:6px 7px;border:0;border-radius:6px;background:none;
    color:#7d867f;font-size:10.5px;font-weight:600;
  }
  .reveal:hover{background:#eef1ea;color:var(--ink)}

  .auth-submit{margin-top:5px}
  .auth-foot{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-top:20px;padding-top:17px;border-top:1px solid var(--line-soft);
    color:var(--faint);font-size:10.5px;
  }
  .auth-foot a{color:#717a73;text-decoration:none}
  .auth-foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

  .auth-footer{
    max-width:1120px;margin:0 auto;padding:0 28px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    color:#949c96;font-size:10.5px;
  }
  .auth-footer .meta{display:flex;align-items:center;gap:14px}
  .auth-footer a{text-decoration:none}
  .auth-footer a:hover{color:var(--ink)}

  /* ---------- 应用 ---------- */
  .app-header{
    position:sticky;top:0;z-index:30;
    border-bottom:1px solid rgba(220,222,214,.8);
    background:rgba(247,247,243,.87);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  }
  .app-header-inner{
    max-width:1120px;height:72px;margin:0 auto;padding:0 28px;
    display:flex;align-items:center;gap:34px;
  }
  .app-nav{display:flex;align-items:center;gap:28px;margin:0 auto}
  .app-nav button{
    position:relative;padding:25px 0 23px;border:0;background:none;
    color:#6f7872;font-size:12.5px;font-weight:600;letter-spacing:.01em;
    transition:color .18s ease;
  }
  .app-nav button:hover{color:var(--ink)}
  .app-nav button[aria-current="page"]{color:var(--ink)}
  .app-nav button[aria-current="page"]::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    border-radius:2px 2px 0 0;background:var(--accent);
  }
  .app-account{display:flex;align-items:center;gap:11px;margin-left:auto;flex-shrink:0}
  .status-pill{
    display:inline-flex;align-items:center;gap:7px;
    height:28px;padding:0 10px;border:1px solid var(--line);border-radius:99px;
    background:rgba(255,255,255,.7);color:#687169;
    font-size:10.5px;font-weight:600;white-space:nowrap;
  }
  .status-pill[data-state="offline"]{color:#8a918b}
  .account-chip{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;min-width:0}
  .avatar{
    width:29px;height:29px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--accent-soft);color:var(--accent);
    font-size:11px;font-weight:750;flex:0 0 auto;
  }
  .account-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .logout-button{
    height:30px;padding:0 10px;border:1px solid transparent;border-radius:7px;
    background:none;color:#848c86;font-size:10.5px;font-weight:600;
  }
  .logout-button:hover{background:#eef0e9;color:var(--ink)}
  .update-pill{
    height:28px;padding:0 10px;border:1px solid #e6d6aa;border-radius:99px;
    background:var(--warn-soft);color:#775610;
    font-size:10.5px;font-weight:700;white-space:nowrap;
  }
  .update-pill:hover{background:#f4e9cc}

  .app-content{max-width:1120px;margin:0 auto;padding:40px 28px 76px}
  .view{animation:view-in .28s ease both}
  @keyframes view-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

  .page-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
    margin-bottom:27px;
  }
  .eyebrow{display:block;color:var(--accent);font-size:9.5px;font-weight:750;letter-spacing:.2em}
  .page-head h1{margin:10px 0 0;font-size:clamp(28px,3.5vw,38px);font-weight:600;line-height:1.14;letter-spacing:-.04em}
  .page-sub{margin:9px 0 0;color:var(--muted);font-size:12.5px;line-height:1.65}
  .page-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

  .stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
  .stat-card{
    min-height:153px;padding:20px 21px 18px;
    display:flex;flex-direction:column;
    border:1px solid var(--line);border-radius:var(--radius);
    background:var(--surface);box-shadow:var(--shadow);
  }
  .stat-card.dark{background:#13211a;border-color:#13211a;color:#f5f8f5;box-shadow:0 18px 40px -32px rgba(19,33,26,.65)}
  .stat-label{display:flex;align-items:center;gap:8px;color:#8b948d;font-size:9.5px;font-weight:700;letter-spacing:.14em}
  .stat-card.dark .stat-label{color:#9bb0a4}
  .stat-value{
    margin-top:auto;padding-top:17px;
    font-size:clamp(26px,2.8vw,31px);font-weight:600;line-height:1.08;letter-spacing:-.04em;
    font-variant-numeric:tabular-nums;
  }
  .stat-value.small{font-size:clamp(20px,2.2vw,25px);letter-spacing:-.035em}
  .stat-card.dark .stat-value{color:#fff}
  .stat-foot{margin-top:8px;color:var(--muted);font-size:10.5px;line-height:1.5}
  .stat-card.dark .stat-foot{color:#a8b9ae}
  .tone-bad{color:var(--danger)!important}
  .tone-warn{color:var(--warn)!important}

  .overview-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(270px,.78fr);gap:13px;margin-top:13px}
  .card{
    padding:21px;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--surface);box-shadow:var(--shadow);
  }
  .card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
  .card-head h2{margin:0;font-size:13px;font-weight:650;letter-spacing:.01em}
  .card-meta{color:#a0a7a1;font-size:8.5px;font-weight:700;letter-spacing:.16em}
  .detail-list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:0}
  .detail-row{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:12px;
  }
  .detail-row dt{color:var(--muted);white-space:nowrap}
  .detail-row dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
  .detail-row:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}

  .quick-actions{display:grid;gap:8px}
  .quick-action{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    width:100%;min-height:46px;padding:0 13px;
    border:1px solid var(--line-soft);border-radius:9px;
    background:#fafbf7;color:var(--ink);text-align:left;
    transition:border-color .18s ease,background .18s ease;
  }
  .quick-action:hover{border-color:#cfd4ca;background:#f6f7f2}
  .quick-action span:first-child{display:flex;flex-direction:column;gap:2px}
  .quick-action strong{font-size:11.5px;font-weight:650}
  .quick-action small{color:var(--faint);font-size:10px}
  .quick-action .arrow{color:#a5ada7;font-size:15px;line-height:1}
  .quick-note{margin:12px 0 0;color:var(--faint);font-size:10px;line-height:1.55}

  /* ---------- 充值 ---------- */
  .recharge-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(270px,.82fr);gap:13px}
  .recharge-card{padding:27px}
  .recharge-card h2{margin:0 0 7px;font-size:19px;font-weight:600;letter-spacing:-.025em}
  .recharge-card .card-lead{margin:0 0 23px;color:var(--muted);font-size:12px;line-height:1.7}
  .card-code{
    min-height:49px;height:49px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    letter-spacing:.04em;
  }
  .recharge-note{margin:11px 0 0;color:var(--faint);font-size:10.5px;line-height:1.6}
  .info-list{margin:0;padding:0;list-style:none}
  .info-item{display:grid;grid-template-columns:25px 1fr;gap:11px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
  .info-item:first-child{padding-top:0}
  .info-item:last-child{padding-bottom:0;border-bottom:0}
  .info-num{color:#a6ada7;font-size:9.5px;font-weight:700;letter-spacing:.08em;padding-top:2px}
  .info-item strong{display:block;font-size:11.5px;font-weight:650}
  .info-item p{margin:4px 0 0;color:var(--muted);font-size:10.5px;line-height:1.65}

  /* ---------- 程序公告悬浮窗 ---------- */
  .notice-launcher{
    position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:65;
    display:inline-flex;align-items:center;gap:8px;
    height:40px;padding:0 15px;border:1px solid #173d2f;border-radius:999px;
    background:#152f25;color:#f3f8f5;
    font-size:11.5px;font-weight:650;letter-spacing:.02em;
    box-shadow:0 20px 44px -20px rgba(9,20,14,.65);
    transition:background .18s ease,transform .18s ease;
  }
  .notice-launcher:hover{background:#1b3a2e;transform:translateY(-1px)}
  .notice-launcher .dot{background:#67d5a6;box-shadow:0 0 0 3px rgba(103,213,166,.16)}
  .notice-launcher .dot.bad{background:#ff9f91;box-shadow:0 0 0 3px rgba(255,159,145,.14)}
  .notice-window{
    position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:70;
    width:374px;max-width:calc(100vw - 32px);max-height:min(520px,calc(100vh - 44px));
    display:flex;flex-direction:column;overflow:hidden;
    border:1px solid #dde0d8;border-radius:16px;background:#fff;
    box-shadow:0 34px 90px -36px rgba(12,24,17,.58),inset 0 1px 0 #fff;
    animation:notice-in .22s ease both;
  }
  @keyframes notice-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
  .notice-window.is-dragging{animation:none}
  .notice-window-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    padding:15px 15px 13px;border-bottom:1px solid var(--line-soft);
    cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;
  }
  .notice-window-head:active{cursor:grabbing}
  .notice-window-title{display:flex;align-items:center;gap:9px;min-width:0}
  .notice-window-title > div{min-width:0}
  .notice-window-title strong{display:block;font-size:13px;font-weight:650;letter-spacing:.01em}
  .notice-window-title small{
    display:block;margin-top:3px;color:var(--faint);
    font-size:9.5px;font-variant-numeric:tabular-nums;
  }
  .notice-window-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
  .notice-refresh{
    height:26px;padding:0 8px;border:1px solid var(--line);border-radius:6px;
    background:#fff;color:#747d76;font-size:9.5px;font-weight:600;
  }
  .notice-refresh:hover{background:#f5f6f1;color:var(--ink)}
  .notice-close{
    width:26px;height:26px;padding:0;border:0;border-radius:6px;
    display:grid;place-items:center;background:none;color:#8e968f;
  }
  .notice-close:hover{background:#f0f1eb;color:var(--ink)}
  .notice-window-body{
    flex:1;min-height:78px;overflow:auto;padding:16px;
    color:#3f4942;font-size:12.5px;line-height:1.9;
    white-space:pre-wrap;overflow-wrap:anywhere;
  }
  .notice-window-body.is-error{color:var(--danger)}
  .notice-window-foot{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px;border-top:1px solid var(--line-soft);
    color:#9aa19b;font-size:9px;
  }
  .notice-window-foot .sync-state{font-variant-numeric:tabular-nums}

  /* ---------- 设置 ---------- */
  .settings-grid{display:grid;gap:13px}
  .settings-card{padding:24px 25px}
  .settings-card h2{margin:0 0 5px;font-size:16px;font-weight:600;letter-spacing:-.02em}
  .settings-card .settings-lead{margin:0 0 17px;color:var(--muted);font-size:11px;line-height:1.65}
  .setting-row{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:15px 0;border-bottom:1px solid var(--line-soft);
  }
  .setting-row:first-of-type{padding-top:0}
  .setting-row:last-child{padding-bottom:0;border-bottom:0}
  .setting-copy{min-width:0}
  .setting-copy strong{display:block;font-size:12px;font-weight:650}
  .setting-copy p{margin:4px 0 0;max-width:530px;color:var(--muted);font-size:10.5px;line-height:1.65}
  .setting-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
  .device-code{
    display:inline-block;max-width:300px;
    padding:7px 9px;border:1px solid #e3e5dd;border-radius:7px;
    background:#f3f4ef;color:#535c55;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:10px;line-height:1.4;overflow-wrap:anywhere;
    -webkit-user-select:all;user-select:all;
  }
  .value-text{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
  .value-muted{color:var(--faint);font-size:11px}
  .state-text{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600}
  .state-text.ok{color:#1f7a58}
  .state-text.warn{color:var(--warn)}
  .state-text.bad{color:var(--danger)}

  .app-footer{
    max-width:1120px;margin:0 auto;padding:0 28px 30px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    color:#9aa19b;font-size:10px;
  }
  .app-footer .meta{display:flex;align-items:center;gap:13px}

  /* ---------- 弹窗 ---------- */
  .modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
  .modal-backdrop{position:absolute;inset:0;background:rgba(12,18,15,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade-in .18s ease}
  .modal-card{
    position:relative;width:min(478px,100%);max-height:calc(100vh - 40px);overflow:auto;
    padding:25px;border:1px solid #e2e3dc;border-radius:18px;background:#fff;
    box-shadow:0 34px 90px -30px rgba(0,0,0,.46);
    animation:modal-in .2s ease both;
  }
  @keyframes fade-in{from{opacity:0}to{opacity:1}}
  @keyframes modal-in{from{opacity:0;transform:translateY(9px) scale(.99)}to{opacity:1;transform:none}}
  .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
  .modal-kicker{display:block;color:var(--accent);font-size:9px;font-weight:750;letter-spacing:.2em;min-height:11px}
  .modal-head h2{margin:8px 0 0;font-size:21px;font-weight:600;letter-spacing:-.03em}
  .modal-close{
    width:30px;height:30px;margin:-3px -4px 0 0;padding:0;
    border:0;border-radius:7px;background:none;color:#8e968f;
    display:grid;place-items:center;
  }
  .modal-close:hover{background:#f0f1eb;color:var(--ink)}
  .modal-card:focus{outline:none}
  .modal-body{margin-top:17px;color:#505a53;font-size:12.5px;line-height:1.8}
  .modal-body p{margin:0 0 11px}
  .modal-body p:last-child{margin-bottom:0}
  .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:23px}
  .modal-actions .btn-primary{width:auto;padding:0 18px;min-height:41px;box-shadow:none}
  .modal-form .field:last-of-type{margin-bottom:0}
  .modal-error{
    margin:12px 0 0;padding:9px 10px;border:1px solid #f0c9c3;border-radius:8px;
    background:#fdf3f1;color:#9a3428;font-size:11px;line-height:1.6;
  }
  .modal-hint{margin:14px 0 0;color:var(--faint);font-size:10px;line-height:1.6}
  .update-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:15px}
  .update-meta div{padding:10px 12px;border:1px solid var(--line-soft);border-radius:8px;background:#fafbf7}
  .update-meta span{display:block;color:var(--faint);font-size:9px;letter-spacing:.06em}
  .update-meta strong{display:block;margin-top:4px;font-size:13px;font-weight:650}
  .update-log{
    max-height:180px;overflow:auto;padding:11px 12px;
    border:1px solid var(--line-soft);border-radius:8px;background:#fafbf7;
    color:#525b54;font-size:11px;line-height:1.75;white-space:pre-wrap;
  }
  .confirm-copy{color:#4d5750;font-size:12.5px;line-height:1.8}
  .confirm-list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px}
  .confirm-list li{position:relative;padding-left:14px;color:var(--muted);font-size:11px;line-height:1.6}
  .confirm-list li::before{content:"";position:absolute;left:0;top:.64em;width:4px;height:4px;border-radius:50%;background:#b0b7b1}

  /* ---------- 提示 ---------- */
  .toast-host{
    position:fixed;left:50%;bottom:24px;z-index:200;
    width:calc(100% - 32px);max-width:410px;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    transform:translateX(-50%);pointer-events:none;
  }
  .toast{
    max-width:100%;padding:10px 15px;border-radius:8px;
    background:#121b16;color:#fff;font-size:12px;line-height:1.5;text-align:center;
    box-shadow:0 14px 36px -18px rgba(0,0,0,.55);
    opacity:0;transform:translateY(7px);
    transition:opacity .2s ease,transform .2s ease;
    overflow-wrap:anywhere;
  }
  .toast.show{opacity:1;transform:none}
  .toast.error{background:#8f2d22}
  .toast.info{background:#37423b}

  @media (max-width:900px){
    .auth-main{grid-template-columns:1fr;gap:38px;min-height:0;padding-top:26px}
    .intro h1{max-width:600px}
    .intro-list{display:none}
    .auth-panel{max-width:560px;width:100%;justify-self:center}
    .overview-grid,.recharge-grid{grid-template-columns:1fr}
    .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  }

  @media (max-width:760px){
    .auth-nav{padding:19px 18px}
    .nav-note .program{display:none}
    .auth-main{padding:22px 18px 54px;gap:30px}
    .intro h1{font-size:clamp(34px,9vw,44px);margin-top:16px}
    .intro-lead{font-size:13.5px}
    .auth-panel{padding:23px 20px;border-radius:17px}
    .auth-footer{padding:0 18px 76px;flex-direction:column;align-items:flex-start;gap:9px}
    .app-header-inner{height:auto;padding:13px 18px 0;flex-wrap:wrap;gap:10px 13px}
    .app-nav{order:3;width:100%;margin:0;gap:25px;overflow-x:auto;scrollbar-width:none;border-top:1px solid rgba(220,222,214,.8)}
    .app-nav::-webkit-scrollbar{display:none}
    .app-nav button{padding:12px 0 11px;font-size:12px;white-space:nowrap}
    .app-account{gap:8px}
    .account-name{max-width:92px}
    .status-pill{display:none}
    .app-content{padding:29px 18px 58px}
    .page-head{align-items:flex-start;flex-direction:column;gap:17px;margin-bottom:22px}
    .page-actions{width:100%}
    .page-actions .btn{flex:1}
    .stat-grid{grid-template-columns:1fr;gap:9px}
    .stat-card{min-height:125px;padding:17px 18px}
    .stat-value{padding-top:13px}
    .overview-grid{margin-top:9px;gap:9px}
    .card{padding:18px}
    .detail-list{grid-template-columns:1fr}
    .detail-row:nth-last-child(-n+2){border-bottom:1px solid var(--line-soft);padding-bottom:10px}
    .detail-row:last-child{border-bottom:0;padding-bottom:0}
    .recharge-card,.settings-card{padding:20px}
    .setting-row{align-items:flex-start;flex-direction:column;gap:11px}
    .setting-actions{width:100%;flex-wrap:wrap}
    .setting-actions .btn{flex:1}
    .device-code{max-width:100%}
    .modal{padding:12px}
    .modal-card{padding:21px;border-radius:16px}
    .modal-actions{flex-direction:column-reverse}
    .modal-actions .btn{width:100%}
    .app-footer{padding:0 18px 78px;flex-direction:column;align-items:flex-start;gap:8px}
    .toast-host{bottom:18px}
    .notice-launcher{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
    .notice-window{
      left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
      width:auto;max-width:none;max-height:min(62vh,460px);border-radius:14px;
    }
    .notice-window-head{cursor:default}
  }

  @media (max-width:390px){
    .intro h1{font-size:32px}
    .auth-panel{padding:21px 17px}
    .brand-sub{display:none}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  }

/* 结构拆分后的补充分离样式 */
.brand-button{border:0;background:none;padding:0;text-align:left}
.noscript{padding:24px;text-align:center;font-size:14px}