:root{color-scheme:dark;--bg:#070d18;--panel:#101c2d;--line:#203d58;--cyan:#42d9e8;--muted:#8ca6bd}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 0%,#102b45 0,#070d18 55%);color:#e8f4ff;font:15px "Segoe UI",Arial,sans-serif;min-height:100vh}
a{color:var(--cyan);text-decoration:none}.top{min-height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 4vw;background:#07101ddd;position:sticky;top:0;z-index:10}.top>a{font-weight:900;letter-spacing:3px;font-size:20px}.top nav{display:flex;gap:18px;flex-wrap:wrap}
main{max-width:1400px;margin:30px auto;padding:0 20px}.panel{background:linear-gradient(145deg,#12243aee,#0c1727ee);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 18px 60px #0005}.narrow{max-width:470px;margin:8vh auto}.hero{padding:9vh 5vw;min-height:48vh}.hero h1{font-size:clamp(42px,7vw,82px);margin:10px 0}.hero p{color:var(--muted);max-width:650px;line-height:1.7}.eyebrow{color:var(--cyan);letter-spacing:3px;font-size:11px;font-weight:800}.muted,small{color:var(--muted)}small{display:block;margin-top:5px}.page-head,.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.page-head{margin:0 0 22px}.page-head h1{font-size:clamp(30px,4vw,44px);margin:5px 0}.btn,button{display:inline-block;background:var(--cyan);color:#03121c;border:0;border-radius:7px;padding:12px 18px;font-weight:800;cursor:pointer}.secondary{background:#203d58;color:#e8f4ff}.block-btn{width:100%;margin-top:15px}.danger{background:#a83249;color:white}.small-btn{padding:8px 12px}.flash{margin:10px 4vw;padding:13px;border-radius:8px;background:#102d3d;border:1px solid #236072}.flash.error{background:#3a1820;border-color:#873849}.flash.success{background:#103527;border-color:#236a4d}
label{display:block;margin:18px 0;color:var(--muted)}input{display:block;width:100%;margin-top:7px;padding:12px;background:#071421;border:1px solid var(--line);border-radius:6px;color:white}
.planet-switch{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 22px}.planet-pill{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#091827}.planet-pill.active{border-color:var(--cyan);background:#123247}
.resource-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.resource-card{background:#071421;border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}.resource-card span{font-size:11px;letter-spacing:1.5px;color:var(--muted)}.resource-card strong{display:block;font-size:clamp(20px,2.5vw,30px);margin:9px 0;color:#eaf7ff;overflow-wrap:anywhere}.resource-card small{color:var(--cyan)}.resource-card .capacity{font-size:11px;color:var(--muted);margin-top:9px}.resource-card.energy strong{color:#ffd36a}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.level-list>div,.queue-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #203d5866}.level-list b{color:var(--cyan);white-space:nowrap}.queue-row form{margin:0}
.building-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}.building-card h2{margin:5px 0;font-size:21px}.building-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.level-badge{min-width:58px;height:58px;border-radius:12px;background:#0a1a2a;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:var(--cyan)}.level-badge small{font-size:10px;margin:3px 0 0 3px}.costs{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;font-size:12px;color:#c4d8e8}.costs span{white-space:nowrap}.costs i,.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.metal-dot{background:#d7a66e}.crystal-dot{background:#65cfe0}.deut-dot{background:#8db9f0}.maxed{display:block;margin-top:18px;color:#8ca6bd}
footer{text-align:center;padding:28px;color:#587087;font-size:12px}
@media(max-width:850px){.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col{grid-template-columns:1fr}.building-grid{grid-template-columns:1fr}.top{padding:12px 16px;align-items:flex-start;flex-direction:column}.top nav{gap:12px}.page-head{align-items:flex-start;flex-direction:column}}
@media(max-width:420px){main{padding:0 12px}.panel{padding:16px}.resource-grid{gap:8px}.resource-card{padding:12px}.costs{gap:8px}}