:root{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif; }
    *,*::before,*::after{ box-sizing:border-box; }
    html,body{ margin:0; background:#0b0f17; color:#e8eefc; max-width:100%; overflow-x:hidden; }
    .wrap{ max-width:1240px; margin:0 auto; padding:22px; }
    h1{ margin:0 0 6px; font-size:20px; letter-spacing:.2px; }
    .muted{ color:#b9c6e6; font-size:13px; }
    .small{ font-size:12px; color:#b9c6e6; }

    .topbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:12px; }
    .tabs{ display:flex; gap:8px; flex-wrap:wrap; }
    .tab{ cursor:pointer; user-select:none; padding:9px 12px; border-radius:999px; border:1px solid #2a3a5e; background:#0e1526; color:#cfe0ff; font-weight:800; font-size:13px; }
    .tab.active{ border-color:#4a76ff; box-shadow:0 0 0 3px rgba(74,118,255,.15); }

    .grid{ display:grid; gap:14px; grid-template-columns:1.1fr .9fr; align-items:start; }
    @media (max-width:980px){ .grid{ grid-template-columns:1fr; } }
    .grid > *{ min-width:0; } /* critical for overflow */
    .card{ background:#121a2a; border:1px solid #24304b; border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); min-width:0; }
    .section-title{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; min-width:0; }
    .section-title h2{ margin:0; font-size:16px; min-width:0; }
    .divider{ height:1px; background:#24304b; margin:10px 0; border-radius:999px; }
    .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
    .footer{ margin-top:10px; color:#93a6cf; font-size:12px; line-height:1.5; }

    .pill{ display:inline-flex; gap:8px; align-items:center; border:1px solid #2a3a5e; background:#0e1526; padding:8px 10px; border-radius:999px; color:#cfe0ff; font-size:13px; max-width:100%; flex-wrap:wrap; }
    button{ cursor:pointer; border:1px solid #2a3a5e; background:#17203a; color:#e8eefc; padding:10px 12px; border-radius:12px; font-weight:800; }
    button:hover{ border-color:#4a76ff; }
    button.ghost{ background:#0e1526; }
    input[type="number"], select, input[type="text"]{
      border-radius:10px; border:1px solid #2a3a5e; background:#0e1526; color:#e8eefc; padding:8px 10px; outline:none;
      max-width:100%;
    }
    input[type="number"]:focus, select:focus, input[type="text"]:focus{ border-color:#4a76ff; }

    .err{ color:#ff9aa7; font-weight:900; }
    .ok{ color:#bfffd6; font-weight:900; }
    .warn{ color:#ffd36a; font-weight:900; }

    .nums{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; max-width:100%; }
    .ball{
      width:56px;
      height:56px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      font-weight:900;
      font-size:20px;
      color:#000;
      user-select:none;
      flex:0 0 auto;
      text-shadow:0 1px 0 rgba(255,255,255,.55);
      box-shadow:
        0 4px 10px rgba(0,0,0,.22),
        inset 0 -5px 8px rgba(0,0,0,.18),
        inset 0 2px 4px rgba(255,255,255,.85);
      border:1px solid rgba(0,0,0,.10);
      background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.95) 0 10%, rgba(255,255,255,.35) 11%, rgba(255,255,255,0) 28%),
        radial-gradient(circle at center, #ffffff 0 44%, transparent 45%),
        conic-gradient(
          var(--ball-color) 0 55deg,
          #ffffff 55deg 65deg,
          var(--ball-color) 65deg 115deg,
          #ffffff 115deg 125deg,
          var(--ball-color) 125deg 175deg,
          #ffffff 175deg 185deg,
          var(--ball-color) 185deg 235deg,
          #ffffff 235deg 245deg,
          var(--ball-color) 245deg 295deg,
          #ffffff 295deg 305deg,
          var(--ball-color) 305deg 360deg
        );
    }
    .ball.red{ background:#d91e18; border-color:#d91e18; color:#fff; }
    .ball.blue{ background:#2e86de; border-color:#2e86de; color:#fff; }
    .ball.green{ background:#27ae60; border-color:#27ae60; color:#fff; }
    .ball.gray{ background:#10192e; border-color:#2a3a5e; color:#cfe0ff; box-shadow:none; }
    .ball.sp{ outline:3px solid rgba(255,255,255,.18); outline-offset:1px; }
    .plus{ color:#b9c6e6; font-weight:900; margin:0 6px; }

    .tableScroll{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
    table{ width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px; }
    th, td{ border-bottom:1px solid #24304b; padding:10px 10px; text-align:left; font-size:14px; vertical-align:top; }
    th{ background:#0f1628; color:#cfe0ff; position:sticky; top:0; }
    td .nums{ flex-wrap:wrap; }

    .badge{ display:inline-flex; padding:2px 8px; border-radius:999px; border:1px solid #2a3a5e; font-size:12px; color:#cfe0ff; }
    .b-hot{ border-color:#ff7a7a; color:#ffd0d0; background:rgba(255,122,122,.08); }
    .b-mid{ border-color:#ffd36a; color:#ffe8b5; background:rgba(255,211,106,.08); }
    .b-cold{ border-color:#7ac7ff; color:#cfeaff; background:rgba(122,199,255,.08); }

    .chartWrap{ margin-top:10px; border:1px solid #24304b; border-radius:12px; background:#0e1526; padding:10px; }
    canvas{ width:100%; height:230px; display:block; }

    .kpi{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
    @media (max-width:720px){ .kpi{ grid-template-columns:1fr; } }
    .kpi .box{ border:1px solid #24304b; background:#0e1526; border-radius:14px; padding:10px; min-width:0; }
    .kpi .label{ color:#b9c6e6; font-size:12px; }
    .kpi .val{ font-weight:950; font-size:18px; margin-top:4px; }

    details{ border:1px solid #24304b; border-radius:12px; background:#0e1526; padding:10px; }
    details > summary{ cursor:pointer; font-weight:900; color:#cfe0ff; }
    pre{ margin:10px 0 0; background:#0b0f17; border:1px solid #24304b; padding:10px; border-radius:10px; overflow:auto; max-height:380px; }

    .hide{ display:none !important; }

    @media (max-width:720px){
      .wrap{ padding:14px; }
      .tab{ padding:8px 10px; font-size:12px; }
      .card{ padding:12px; }
      .ball{ width:44px; height:44px; font-size:17px; }
      .nums{ gap:6px; }
      th, td{ font-size:13px; padding:9px 8px; }
      th{ position:static; }
      #myPick{ width:100% !important; }
    }