:root{
    --paper:#f0ede8; --paper-sec:#e8e4de; --paper-card:#f5f2ed;
    --border:#c8c2b8; --border-light:#d8d3ca;
    --ink:#1a1a1a; --ink-2:#0a0a0a; --ink-sec:#6b6560; --muted:#9a9490;
    --blue:#2855a0; --blue-dark:#1a3d75; --blue-light:#5b8fd6;
    --blue-tint:rgba(40,85,160,0.045);
    --accent:#fb923c;
    --ok:#2a7a3a; --warn:#b86e20; --danger:#cc4444; --ai:#6a50b0;
    --shadow:#c8c2b8;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    padding:24px 32px;
    font-family:Inter,'Helvetica Neue','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
    font-size:15px;color:var(--ink);
    background-color:var(--paper);
    background-image:
      linear-gradient(var(--blue-tint) 1px, transparent 1px),
      linear-gradient(90deg, var(--blue-tint) 1px, transparent 1px);
    background-size:40px 40px;
    line-height:1.55;
  }
  .mono{font-family:'Space Mono','SF Mono',Menlo,Consolas,monospace;letter-spacing:0.5px}
  .kicker{
    font-family:'Space Mono',Menlo,Consolas,monospace;
    font-size:11px;color:var(--muted);letter-spacing:1.5px;
    text-transform:uppercase;
  }
  .corner-marks{
    display:flex;justify-content:space-between;align-items:center;
    border-top:1px solid var(--blue);border-bottom:1px solid var(--blue);
    padding:6px 12px;margin-bottom:20px;
    font-family:'Space Mono',Menlo,Consolas,monospace;font-size:11px;color:var(--blue);
    letter-spacing:3px;
  }
  h1{
    margin:0 0 4px;font-size:28px;font-weight:300;letter-spacing:1px;
    font-family:Inter,sans-serif;
  }
  h1 .dot{display:inline-block;width:10px;height:10px;background:var(--blue);margin-left:2px;vertical-align:baseline;}
  .subtitle{color:var(--ink-sec);font-size:12px;margin-bottom:20px;font-family:'Space Mono',Menlo,Consolas,monospace;letter-spacing:0.5px}
  .subtitle code{background:var(--ink-2);color:var(--paper);padding:2px 8px;font-family:inherit;font-size:11px}
  .section-head{
    display:flex;align-items:baseline;gap:10px;
    margin:8px 0 12px;
    border-bottom:2px solid var(--blue);padding-bottom:4px;
  }
  .section-head .num{font-family:'Space Mono',Menlo,Consolas,monospace;font-size:12px;color:var(--blue);letter-spacing:1px}
  .section-head .title{font-size:18px;font-weight:700;color:var(--ink-2)}
  .section-head .en{font-family:'Space Mono',Menlo,Consolas,monospace;font-size:11px;color:var(--muted);margin-left:auto;letter-spacing:1.5px}

  .tabs{display:flex;gap:0;margin-bottom:0;flex-wrap:wrap;border-bottom:1px solid var(--border)}
  .tab{
    padding:8px 20px;border:1px solid var(--border);border-bottom:none;
    background:var(--paper-card);cursor:pointer;font-size:12px;color:var(--ink);font-weight:500;
    margin-right:-1px;letter-spacing:1px;
    font-family:'Space Mono',Menlo,Consolas,monospace;text-transform:uppercase;
    box-shadow:1px 1px 0 var(--shadow);
  }
  .tab:hover{background:#fff}
  .tab.active{background:var(--ink-2);color:var(--paper);border-color:var(--ink-2);position:relative;z-index:1;box-shadow:none}
  .tab .badge{
    background:rgba(0,0,0,0.08);padding:1px 7px;margin-left:8px;font-size:11px;
    font-family:'Space Mono',Menlo,Consolas,monospace;
  }
  .tab.active .badge{background:rgba(255,255,255,0.18);color:var(--paper)}
  .panel{display:none;padding-top:20px}
  .panel.active{display:block}

  .card{
    background:var(--paper-card);border:1px solid var(--border);
    padding:16px 20px;margin-bottom:16px;
    border-radius:0;
    box-shadow:2px 2px 0 var(--shadow);
  }
  .card-title{
    font-size:15px;font-weight:600;margin-bottom:10px;
    font-family:'Space Mono',Menlo,Consolas,monospace;letter-spacing:1px;color:var(--ink-2);
    border-left:3px solid var(--blue);padding-left:8px;
  }
  .card-title .en{color:var(--ink-sec);font-size:11px;margin-left:8px;font-weight:400;letter-spacing:0.5px}

  .toolbar{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
  .toolbar input,.toolbar select{
    padding:8px 12px;border:1px solid var(--border);background:var(--paper);
    font-size:13px;font-family:'Space Mono',Menlo,Consolas,monospace;color:var(--ink);
    border-radius:0;box-shadow:1px 1px 0 var(--shadow);
  }
  .toolbar input{flex:1 1 240px}
  .toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--blue);box-shadow:2px 2px 0 var(--shadow)}
  .toolbar .count{color:var(--ink-sec);font-size:11px;font-family:'Space Mono',Menlo,Consolas,monospace}

  table{width:100%;border-collapse:collapse;font-size:13px}
  th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--border-light);vertical-align:middle}
  th{
    background:var(--ink-2);color:var(--paper);font-weight:500;
    cursor:pointer;user-select:none;position:sticky;top:0;font-size:11px;
    font-family:'Space Mono',Menlo,Consolas,monospace;letter-spacing:1px;text-transform:uppercase;
    border-bottom:none;
  }
  th:hover{background:#252525}
  .sort-ind{color:rgba(255,255,255,0.4);margin-left:4px;font-size:9px}
  td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:'Space Mono',Menlo,Consolas,monospace;letter-spacing:0.5px}
  td.rank{color:var(--blue);font-family:'Space Mono',Menlo,Consolas,monospace;width:60px;text-align:center;font-weight:600}
  td.total{color:var(--blue);font-weight:600;font-family:'Space Mono',Menlo,Consolas,monospace}
  td.month{color:var(--muted)}
  td.week{color:var(--muted)}
  td.up{color:var(--ok);font-weight:600;font-family:'Space Mono',Menlo,Consolas,monospace}
  td.down{color:var(--danger);font-weight:600;font-family:'Space Mono',Menlo,Consolas,monospace}
  td.flat{color:var(--muted);font-family:'Space Mono',Menlo,Consolas,monospace}
  td.name a{color:var(--ink);text-decoration:none;font-weight:500}
  td.name a:hover{color:var(--blue)}
  td.name .gid{color:var(--ink-sec);font-size:10.5px;font-family:'Space Mono',Menlo,Consolas,monospace;margin-left:6px;letter-spacing:0.5px}
  td.name img{width:26px;height:26px;border-radius:0;vertical-align:middle;margin-right:8px;object-fit:cover;background:var(--border-light);border:1px solid var(--border-light)}
  td.tags{color:var(--ink-sec);font-size:11px;max-width:280px;overflow:hidden;text-overflow:ellipsis;font-family:Inter,'PingFang SC',sans-serif;letter-spacing:0;line-height:1.7;white-space:normal}
  td.tags .tag-chip{display:inline-block;padding:0 6px;margin:1px 4px 1px 0;font-size:10.5px;color:var(--ink-sec);background:var(--paper-sec);border-radius:0;font-family:Inter,'PingFang SC',sans-serif;border:1px solid var(--border-light)}
  td.tags .tag-chip:hover{background:var(--blue);color:var(--paper);cursor:pointer;border-color:var(--blue)}
  td.tags .tags-fallback{color:var(--muted);font-style:italic;font-size:10.5px}
  .chip{display:inline-block;padding:1px 8px;font-size:10px;font-family:'Space Mono',Menlo,Consolas,monospace;letter-spacing:0.5px;border:1px solid;border-radius:0;margin-left:6px;vertical-align:middle}
  .chip.released{color:var(--ok);border-color:var(--ok)}
  .chip.testing{color:var(--accent);border-color:var(--accent)}
  .chip.unreleased{color:var(--blue-light);border-color:var(--blue-light)}
  .chip.new{color:var(--ink-2);border-color:var(--ink-2);background:var(--paper)}
  .chip.hot{color:var(--ok);border-color:var(--ok)}
  .chip.cold{color:var(--danger);border-color:var(--danger)}
  .chip.rise{color:var(--ok);border-color:var(--ok)}
  .chip.fall{color:var(--warn);border-color:var(--warn)}
  .chip.stay{color:var(--muted);border-color:var(--muted)}
  .chip.paid{color:var(--blue);border-color:var(--blue);background:var(--paper-card)}
  .chip.f2p{color:var(--accent);border-color:var(--accent);background:var(--paper-card)}
  .chip.delisted{color:var(--danger);border-color:var(--danger);background:var(--paper-card)}
  .chip.na{color:var(--muted);border-color:var(--muted)}
  .chip.sus-mom{color:var(--ok);border-color:var(--ok);background:var(--paper-card)}
  .chip.sus-fla{color:var(--accent);border-color:var(--accent);background:var(--paper-card)}
  .chip.sus-ste{color:var(--blue);border-color:var(--blue);background:var(--paper-card)}
  .chip.sus-col{color:var(--muted);border-color:var(--muted)}
  .chip.good{color:var(--ok);border-color:var(--ok);background:var(--paper-card)}
  .chip.launch{color:#2a7a3a;border-color:#2a7a3a;background:var(--paper-card)}
  .chip.warn{color:var(--warn);border-color:var(--warn);background:var(--paper-card)}
  .chip.bad{color:var(--danger);border-color:var(--danger);background:var(--paper-card)}
  .prate-na{color:var(--muted);font-family:'Space Mono',Menlo,Consolas,monospace}
  .chip.sus-na{color:var(--border);border-color:var(--border)}
  .proxy-star{color:var(--accent);font-weight:600;margin-left:2px;cursor:help}

  .alert-card{background:var(--paper-card);border-color:var(--accent);box-shadow:2px 2px 0 var(--accent)}
  .alert-row{padding:12px 16px;margin:8px 0;background:var(--paper);border:1px solid var(--border-light);box-shadow:1px 1px 0 var(--shadow)}
  .alert-row .alert-head{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
  .alert-row .alert-icon{font-size:14px;font-family:'Space Mono',Menlo,Consolas,monospace}
  .alert-row .alert-label{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:1px;font-family:'Space Mono',Menlo,Consolas,monospace}
  .alert-row .alert-rule{font-size:11px;color:var(--ink-sec);font-family:'Space Mono',Menlo,Consolas,monospace;letter-spacing:0.5px;margin-left:auto}
  .alert-row .alert-items{font-size:13px;line-height:1.8;color:var(--ink);font-family:Inter,'PingFang SC',sans-serif}
  .alert-row .alert-items a{color:var(--blue);text-decoration:none;font-weight:500}
  .alert-row .alert-items a:hover{text-decoration:underline}
  .alert-row .alert-num{font-family:'Space Mono',Menlo,Consolas,monospace;font-size:11px;letter-spacing:0.5px}
  .alert-row .alert-num.up{color:var(--ok)}
  .alert-row .alert-num.down{color:var(--danger)}

  tr.row-surge{background:#eaf5ea !important}
  tr.row-surge:hover{background:#d4efd4 !important}
  tr.row-plunge{background:#fceeee !important}
  tr.row-plunge:hover{background:#f9dddd !important}
  tr.row-into{background:#eef3fb !important}
  tr.row-into:hover{background:#dde9f7 !important}
  td.delta-up{color:var(--ok);font-weight:600;font-family:'Space Mono',Menlo,Consolas,monospace}
  td.delta-down{color:var(--danger);font-weight:600;font-family:'Space Mono',Menlo,Consolas,monospace}

  .btn-chart{
    background:transparent;color:var(--blue);border:1px solid var(--blue);
    padding:4px 12px;cursor:pointer;font-size:11px;font-family:'Space Mono',Menlo,Consolas,monospace;
    letter-spacing:1px;border-radius:0;box-shadow:1px 1px 0 var(--shadow);
  }
  .btn-chart:hover{background:var(--blue);color:var(--paper);box-shadow:2px 2px 0 var(--shadow)}
  tr:hover{background:rgba(40,85,160,0.03)}

  .modal-bg{position:fixed;inset:0;background:rgba(10,10,10,0.7);display:none;align-items:center;justify-content:center;z-index:999}
  .modal-bg.show{display:flex}
  .modal{background:var(--paper-card);border:1px solid var(--ink-2);padding:24px;width:92%;max-width:920px;border-radius:0;box-shadow:3px 3px 0 var(--shadow)}
  .modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
  .modal-head h3{margin:0;font-size:15px;font-family:'Space Mono',Menlo,Consolas,monospace;letter-spacing:1px;color:var(--ink-2)}
  .modal-head .close{background:none;border:0;font-size:24px;cursor:pointer;color:var(--muted);font-family:inherit}
  #modal-chart{height:460px}
  .legend-note{font-size:11px;color:var(--ink-sec);margin-top:8px;font-family:'Space Mono',Menlo,Consolas,monospace;letter-spacing:0.5px}

  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:4px}
  .stat-item{
    background:var(--ink-2);color:var(--paper);
    border:1px solid var(--ink-2);padding:16px;border-radius:0;
    position:relative;box-shadow:2px 2px 0 var(--shadow);
  }
  .stat-item .l{color:var(--ink-sec);font-size:10.5px;margin-bottom:6px;font-family:'Space Mono',Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:1px}
  .stat-item .v{font-size:28px;font-weight:300;color:var(--paper);font-family:Inter,sans-serif;letter-spacing:1px}
  .stat-item.accent .v{color:var(--accent)}

  .footer{
    margin-top:24px;padding-top:8px;border-top:1px solid var(--border);
    display:flex;justify-content:space-between;
    font-family:'Space Mono',Menlo,Consolas,monospace;font-size:10.5px;color:var(--ink-sec);letter-spacing:1.5px;
  }
  .app-state{margin-bottom:16px}
  .state-card{
    background:var(--paper-card);border:1px solid var(--border);border-left:3px solid var(--blue);
    padding:14px 18px;box-shadow:2px 2px 0 var(--shadow);
    font-family:'Space Mono',Menlo,Consolas,monospace;font-size:12px;color:var(--ink-sec);letter-spacing:0.06em;
  }
  .state-card.error{border-left-color:var(--danger);box-shadow:2px 2px 0 rgba(204,68,68,0.35)}
  .state-card.empty{border-left-color:var(--muted)}
  /* v5.3 Phase 1: 懒加载骨架屏 + 错误重试按钮 */
  .panel-skeleton{padding:48px 16px;text-align:center}
  .retry-btn{margin-top:12px;padding:8px 16px;border:1px solid var(--danger);background:var(--paper-card);color:var(--danger);font-family:'Space Mono',Menlo,Consolas,monospace;font-size:11px;cursor:pointer;border-radius:0;box-shadow:1px 1px 0 rgba(204,68,68,0.35);letter-spacing:0.06em}
  .retry-btn:hover{background:var(--danger);color:var(--paper)}
  .sort-presets{display:flex;gap:6px;flex-wrap:wrap}
  .sort-preset{padding:7px 10px;border:1px solid var(--border);background:var(--paper-card);color:var(--ink);font-family:'Space Mono',Menlo,Consolas,monospace;font-size:11px;cursor:pointer;border-radius:0;box-shadow:1px 1px 0 var(--shadow);letter-spacing:0.04em}
  .sort-preset:hover{border-color:var(--blue)}
  .sort-preset.active{background:var(--ink-2);border-color:var(--ink-2);color:var(--paper);box-shadow:none}
  .table-wrap{width:100%;overflow-x:auto}
  .table-wrap table{min-width:980px}
  .empty-table{padding:28px 0;text-align:center;color:var(--muted);font-family:'Space Mono',Menlo,Consolas,monospace;font-size:12px;letter-spacing:0.06em}
  .modal-meta{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 12px;font-family:'Space Mono',Menlo,Consolas,monospace;font-size:11px;color:var(--ink-sec)}
  .modal-meta span{border:1px solid var(--border-light);background:var(--paper);padding:3px 7px}
  .modal-meta .hot{border-color:var(--danger);color:var(--danger)}
  @media (max-width: 960px){
    body{padding:16px}
    .corner-marks,.footer{display:block;letter-spacing:1px}
    .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:1px}
    .tab{flex:0 0 auto;padding:8px 14px}
    .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
    .toolbar{align-items:stretch}
    .toolbar input,.toolbar select{flex:1 1 100%;min-width:0}
    .sort-presets{width:100%}
    .modal{width:96%;max-height:92vh;overflow:auto;padding:16px}
    #modal-chart{height:360px}
  }
  @media (max-width: 560px){
    body{padding:12px;font-size:14px}
    h1{font-size:23px}
    .stat-grid{grid-template-columns:1fr !important}
    .card{padding:14px 12px}
    th,td{padding:8px 9px}
    #modal-chart{height:320px}
  }