:root {
      --bg: #0b1220;
      --sider: #0c1424;
      --card: #141e30;
      --line: rgba(148, 163, 184, .14);
      --text: #e8eef8;
      --muted: #8b9bb4;
      --blue: #3b82f6;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; height: 100%; }
    body {
      font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      background: var(--bg);
      color: var(--text);
    }
    button, input, select, textarea { font: inherit; color: inherit; }
    a { color: #7dd3fc; }
    .app { display: flex; min-height: 100vh; }
    .sider {
      width: 232px;
      background: var(--sider);
      color: #c5d0e0;
      flex: none;
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--line);
    }
    .brand {
      height: 72px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 18px;
      border-bottom: 1px solid var(--line);
    }
    .logo {
      width: 34px; height: 34px; border-radius: 10px;
      display: grid; place-items: center; flex: none;
      background: rgba(59,130,246,.16);
    }
    .brand-text { display: flex; flex-direction: column; min-width: 0; }
    .brand-text b { color: #fff; font-size: 15px; }
    .brand-text small { color: var(--muted); font-size: 12px; }
    .menu { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; }
    .menu-group { display: flex; flex-direction: column; gap: 2px; }
    .menu-group + .menu-group { margin-top: 14px; }
    .menu-label { padding: 0 12px 4px; color: #64748b; font-size: 12px; }
    .menu button, .collapse {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
      border: 0;
      background: transparent;
      color: #b7c3d6;
      padding: 10px 12px;
      border-radius: 10px;
      cursor: pointer;
    }
    .menu button svg, .collapse svg { flex: none; }
    .menu button:hover { background: rgba(255,255,255,.04); color: #fff; }
    .menu button.active { background: rgba(59,130,246,.16); color: #fff; box-shadow: inset 3px 0 0 var(--blue); }
    .collapse { margin: 8px 12px 14px; width: auto; color: var(--muted); }
    .sider.collapsed { width: 76px; }
    .sider.collapsed .brand { justify-content: center; padding: 0; }
    .sider.collapsed .brand-text, .sider.collapsed .menu span, .sider.collapsed .menu-label, .sider.collapsed .collapse-label { display: none; }
    .sider.collapsed .menu button, .sider.collapsed .collapse { justify-content: center; }
    .main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #0f172a; }
    .header {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 24px;
      border-bottom: 1px solid var(--line);
    }
    .titles h1 { margin: 0; font-size: 20px; font-weight: 650; }
    .titles p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
    .header .tools { display: flex; gap: 8px; align-items: center; }
    .header input { width: 220px; }
    .doc-link { color: var(--text); text-decoration: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
    .content { padding: 20px 24px 32px; }
    .page { display: none; }
    .page.active { display: block; }
    .dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .dash-kpis + .dash-kpis { margin-top: 14px; }
    .dash-toolbar, .quick-row, .dist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .dash-toolbar { margin: 14px 0; }
    .quick-row { justify-content: flex-start; flex-wrap: wrap; }
    .quick-row button { min-width: 120px; }
    .dash-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
    .dist { display: grid; grid-template-columns: 168px 1fr; gap: 12px; align-items: center; }
    .dist svg { width: 168px; height: 168px; }
    .chart { width: 100%; height: 220px; display: block; }
    .legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
    .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 6px; }
    .kpi, .panel, .keys-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
    }
    .kpi { display: flex; gap: 14px; align-items: center; padding: 18px; }
    .kpi-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
    .c1 { background: rgba(59,130,246,.16); color: #60a5fa; }
    .c2 { background: rgba(168,85,247,.16); color: #c084fc; }
    .c3 { background: rgba(16,185,129,.16); color: #34d399; }
    .c4 { background: rgba(6,182,212,.16); color: #22d3ee; }
    .c5 { background: rgba(245,158,11,.16); color: #fbbf24; }
    .kpi .n { font-size: 26px; font-weight: 650; line-height: 1.1; }
    .kpi .l { color: var(--muted); font-size: 13px; }
    .kpi .s { color: #64748b; font-size: 12px; margin-top: 2px; }
    .panel { padding: 18px 18px 8px; overflow: auto; }
    .panel + .panel, .cards + .panel { margin-top: 14px; }
    .panel h2, .keys-bar h2 { margin: 0 0 12px; font-size: 16px; }
    .hint { color: var(--muted); font-size: 13px; line-height: 1.6; }
    .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
    input, select, textarea {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      background: #0f172a;
      color: var(--text);
    }
    textarea { width: 100%; min-height: 120px; }
    button.primary, button.ghost, button.small { border-radius: 8px; cursor: pointer; padding: 8px 14px; }
    button.primary { background: var(--blue); color: #fff; border: 0; }
    button.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
    button.small { padding: 4px 10px; font-size: 12px; }
    button:disabled { opacity: .55; cursor: wait; }
    .pager { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
    .pager button:disabled { cursor: default; }
    table { width: 100%; border-collapse: collapse; }
    th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; white-space: nowrap; }
    td.hint { white-space: normal; max-width: 460px; word-break: break-all; }
    .queue-account { margin-bottom: 22px; }
    .queue-account .queue-jobs { margin-top: 0; }
    td.queue-urls { white-space: pre-wrap; }
    th { color: var(--muted); font-weight: 500; }
    .tag { display: inline-block; padding: 1px 8px; border-radius: 4px; background: #1e293b; color: #cbd5e1; font-size: 12px; margin-right: 4px; }
    .tag.on { background: rgba(34,197,94,.15); color: #86efac; }
    .tag.off { background: rgba(248,113,113,.12); color: #fca5a5; }
    .tag.idle { background: rgba(148,163,184,.12); color: #94a3b8; }
    .tag.plat-douyin { background: rgba(59,130,246,.16); color: #93c5fd; }
    .tag.plat-xiaohongshu { background: rgba(251,113,133,.16); color: #fda4af; }
    .tag.plat-weixin { background: rgba(52,211,153,.16); color: #6ee7b7; }
    .tag.plat-toutiao { background: rgba(251,191,36,.16); color: #fcd34d; }
    .tag.plat-unknown { background: rgba(148,163,184,.12); color: #94a3b8; }
    .kv { display: grid; grid-template-columns: 108px 1fr; gap: 8px 12px; margin-top: 14px; font-size: 13px; }
    .kv span { color: var(--muted); }
    .kv b { font-weight: 500; word-break: break-all; }
    .status { min-height: 1.4em; margin-top: 10px; color: #38bdf8; font-size: 13px; }
    .keys-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
    .keys-bar h2 { margin: 0; font-size: 16px; }
    .keys-bar p { margin: 4px 0 0; }
    .keys-actions, .keys-filters, .key-cell, .row-actions { display: flex; align-items: center; gap: 8px; }
    .keys-filters { margin-bottom: 12px; }
    .keys-filters input { width: min(360px, 100%); }
    .keys-filters select { min-width: 140px; }
    .keys-card { overflow: auto; }
    .keys table th { background: rgba(255,255,255,.02); }
    .key-cell code { font-family: ui-monospace, Consolas, monospace; color: #cbd5e1; font-size: 13px; }
    .icon-btn, .copy-ico {
      width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: #0f172a; color: #cbd5e1;
      display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
    }
    .icon-btn:hover, .copy-ico:hover { background: #1e293b; }
    .copy-ico.is-ok { color: #86efac; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.12); }
    button.green { background: #16a34a; }
    button.green:hover { background: #15803d; }
    .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(34,197,94,.15); color: #86efac; font-size: 12px; margin: 0 4px 4px 0; }
    .keys-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
    .row-actions .ghost { display: inline-flex; align-items: center; gap: 4px; }
    .proxy-line { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
    .proxy-line .hint { margin: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .danger { color: #b91c1c; }
    .toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #e8eef8; color: #0b1220; padding: 8px 14px; border-radius: 8px; z-index: 40; font-size: 13px; }
    .modal-box.form { text-align: left; width: min(460px, 92vw); }
    .modal-box.task-detail { width: min(880px, 94vw); max-height: 86vh; overflow: auto; text-align: left; }
    td.clip { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
    .grid-2 { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
    .open-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
    .open-grid h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 500; }
    #open-login-code-row.is-due { outline: 1px solid #fbbf24; border-radius: 8px; padding: 8px; }
    #open-login-img { display: block; max-width: min(360px, 100%); margin: 0 0 12px; background: #fff; }
    #open-login-img[hidden] { display: none; }
    .sample {
      margin: 0 0 12px;
      padding: 12px;
      border-radius: 8px;
      background: #0f172a;
      color: #cbd5e1;
      font-family: ui-monospace, Consolas, monospace;
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-all;
      min-height: 4.5em;
    }
    #runlog-text { max-height: 520px; overflow: auto; }
    .metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
    .metrics div { background: #0f172a; border-radius: 8px; padding: 8px; }
    .metrics b { display: block; font-size: 18px; }
    .metrics span { color: var(--muted); font-size: 12px; }
    .fail { color: #f87171; }
    .task-item { padding: 8px 0 4px; border-top: 1px solid var(--line); }
    .task-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; color: var(--muted); font-size: 13px; }
    .task-meta b { color: var(--text); }
    .result { padding: 12px 0; border-top: 1px solid var(--line); }
    .result h3 { margin: 6px 0; }
    .thread { margin: 8px 0 0; padding: 0; list-style: none; }
    .thread li { padding: 8px 0; border-top: 1px solid var(--line); }
    .who { color: #38bdf8; font-size: 12px; }
    .replies { margin: 6px 0 0 16px; padding: 0; list-style: none; color: #cbd5e1; }
    .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.62); align-items: center; justify-content: center; z-index: 20; }
    .modal.open { display: flex; }
    .modal-box { width: min(380px, 92vw); background: #162033; color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 24px; text-align: center; }
    .modal-box img { width: 240px; height: 240px; object-fit: contain; background: #0f172a; }
    #qr-modal .modal-box { width: min(520px, 94vw); }
    #qr-img { width: auto; height: auto; max-width: min(460px, 86vw); max-height: 68vh; cursor: pointer; background: #fff; user-select: none; }
    .qr-code { display: flex; gap: 8px; margin-top: 12px; }
    .qr-code[hidden] { display: none; }
    .qr-code input { flex: 1; min-width: 0; }
    .spin {
      width: 36px;
      height: 36px;
      margin: 28px auto;
      border: 3px solid #f0f0f0;
      border-top-color: #1677ff;
      border-radius: 50%;
      animation: spin .8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    @media (max-width: 1280px) {
      .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 960px) {
      .sider { width: 76px; }
      .brand-text, .menu span, .menu-label, .collapse-label { display: none; }
      .brand, .menu button, .collapse { justify-content: center; }
      .cards, .dash-kpis, .dash-split, .grid-2, .open-grid, .metrics { grid-template-columns: 1fr; }
      .header { align-items: flex-start; flex-direction: column; }
    }