body{margin:0;background:#f4f6fa;color:#1f2933;font-family:-apple-system,Segoe UI,Roboto,sans-serif}
header{padding:18px 20px 16px;border-bottom:1px solid #dbe2ea;background:linear-gradient(180deg,#f8fbff 0%,#f4f6fa 100%)}
.brand{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brand-text{max-width:860px}
.eyebrow{font-size:28px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#5f7ea3;margin-bottom:6px;line-height:1.1}
.eyebrow .game{color:#2e86ab;font-weight:900}
@media (max-width:700px){.eyebrow{font-size:22px}}
h1{font-size:34px;line-height:1.08;margin:0 0 6px;color:#152433}
.sub{font-size:14px;color:#52606d;max-width:940px;line-height:1.5}
.logo-card{background:#fff;border:1px solid #dbe2ea;border-radius:14px;padding:8px;box-shadow:0 6px 20px rgba(38,55,77,.06)}
.logo-card img{display:block;width:220px;height:auto;border-radius:10px}
.controls{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.quick-help{display:flex;flex-wrap:wrap;gap:10px 14px;padding:12px 20px;border-bottom:1px solid #dbe2ea;background:#eef4fb;color:#405365;font-size:13px;line-height:1.45}
.quick-help div{background:#fff;border:1px solid #dbe2ea;border-radius:999px;padding:7px 10px}
button{font:inherit;background:#2e86ab;color:#fff;border:0;border-radius:8px;padding:8px 13px;cursor:pointer;font-weight:600}
button.sec{background:#e6ebf1;color:#334}button.sec:hover{background:#d7dfe8}
input[type=text]{font:inherit;padding:7px 9px;border:1px solid #c4cdd6;border-radius:8px;width:180px;background:#fff}
select{font:inherit;padding:7px 9px;border:1px solid #c4cdd6;border-radius:8px;max-width:300px;background:#fff}#regionsel{max-width:190px}#syssel{max-width:260px}.thr{display:flex;align-items:center;gap:8px;font-size:13px;color:#52606d}.meta{font-size:13px;color:#52606d}
.wrap{display:flex;flex-wrap:wrap;gap:18px;padding:18px}.card{background:#fff;border:1px solid #dbe2ea;border-radius:12px;padding:12px;box-shadow:0 3px 10px rgba(38,55,77,.03)}
.readout{font-size:14px;margin:0 0 8px}.kpi{font-size:26px;font-weight:700}.kpi.ok{color:#2e8b57}.kpi.bad{color:#c0392b}
.warn{box-sizing:border-box;width:600px;max-width:100%;font-size:13px;line-height:1.45;margin:0 0 8px;padding:8px 10px;border-radius:8px;background:#fdf0e6;border:1px solid #f0c9a3;color:#8a4b12;overflow-wrap:break-word;word-wrap:break-word}.warn b{color:#7a3d0a}
canvas{display:block;border-radius:8px;background:#fbfcfe;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}
.legend{font-size:12px;color:#52606d;margin-top:8px;display:flex;gap:14px;flex-wrap:wrap}.sw{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle;margin-right:4px}.star-swatch{width:14px;height:14px;border-radius:0;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 35%);vertical-align:-2px}.shared-star{background:#111}.gate-star{background:#2e86ab}
.recipes{font-size:13px;line-height:1.5;max-width:none}.recipes h3{font-size:13px;margin:0 0 4px}.recipes .g{margin:6px 0 8px}.recipes .gt{font-weight:700}.recipes ol{margin:3px 0 0 18px;padding:0}.recipes li{margin:1px 0}.recipes .k1{background:#f3f7f4;border:1px solid #d7e6db;border-radius:8px;padding:8px 10px;margin-top:8px}
#gateclear{font-size:13px;color:#52606d;line-height:1.6;margin-top:10px}
#tip{position:fixed;pointer-events:none;background:#0f1419;color:#fff;font-size:12px;padding:8px 10px;border-radius:8px;display:none;z-index:50;box-shadow:0 4px 14px rgba(0,0,0,.28);max-width:260px;line-height:1.45}
#tip .tipdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
#tip .tipmeta{color:#aeb9c6}
.grid{display:flex;flex-wrap:wrap;gap:12px}.dial{width:176px}.dtitle{font-size:13px;font-weight:700;margin:2px 0 4px}.hint{font-size:12px;color:#7a8794;margin-top:8px;line-height:1.5}
.footer-note{margin:8px 18px 24px;padding:12px 14px;border:1px solid #dbe2ea;border-radius:12px;background:#fffaf1;color:#5d4a24;font-size:13px;line-height:1.55}
.footer-note strong{color:#3f2d08}
.footer-note p{margin:0 0 8px}
.footer-note p:last-child{margin-bottom:0}
.footer-note .disclaimer{font-size:12px;color:#8a7a55;line-height:1.5}
@media (max-width: 900px){
  h1{font-size:28px}
  .logo-card img{width:180px}
}
@media (max-width: 700px){
  header{padding:16px}
  .wrap{padding:16px}
  .quick-help{padding:12px 16px}.quick-help div{border-radius:10px}
  .logo-card{order:-1}
  .logo-card img{width:140px}
  canvas{max-width:100%;height:auto}
}


.ctrl-label{display:flex;align-items:center;gap:6px;font-size:13px;color:#52606d}
.secbadge{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:6px 9px;border-radius:999px;border:1px solid #c4cdd6;background:#fff;font-weight:700;font-size:13px}
.secbadge.high{background:#eef9f0;border-color:#b9dfc2;color:#1f7a3a}
.secbadge.low{background:#fff5dc;border-color:#e5c46a;color:#8a6100}
.secbadge.null{background:#ffecef;border-color:#e2a1ab;color:#9b1c31}
.secbadge.unknown{background:#f3f5f8;color:#6b7785}