/* Titillium (Factorio-ish) */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700;900&display=swap');

:root{
  --bg-0:#0b0c0e;
  --bg-1:#111317;
  --steel-1:#2a2f36;
  --steel-2:#1a1e23;
  --edge:#0a0c0e;
  --accent:#f39c12;
  --text:#e7e7ea;
  --muted:#a9acb2;
  --good:#2ecc71;
  --warn:#f1c40f;
  --bad:#e74c3c;

  --plate-radius: 4px;
  --max:1140px;

  --shadow-plate:0 2px 0 var(--edge) inset,0 1px 0 rgba(255,255,255,.065),0 18px 32px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:'Titillium Web', system-ui, sans-serif;
  background:
    radial-gradient(1000px 600px at 10% -10%, #1a1c20 0%, #0d0f12 55%, var(--bg-0) 100%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  line-height:1.55;
  overflow-y:auto;               /* ensure scrollable on mobile */
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:28px 20px 40px}

/* Typography */
h1,h2,h3,.heading{
  color:#ffe6c0; font-weight:900; margin:0 0 12px; line-height:1.15;
}
p, li{ color:#fff; font-size:16px; line-height:1.5; margin-top:12px; margin-bottom:0; }
code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:#ffcc7a;
  max-width:100%;
  white-space:nowrap;
  overflow-x:auto;               /* long values scroll horizontally */
  display:inline-block;
}
.brand-logo{ height:36px; width:auto; vertical-align:middle }

/* HERO */
.hero{
  position:relative; overflow:hidden;
  border-radius:calc(var(--plate-radius) + 2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 46%, rgba(0,0,0,.45) 47%, rgba(0,0,0,.55)),
    linear-gradient(180deg, #2a2f36, #1a1e23 60%, #181b20);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-plate);
  margin-bottom:22px;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px),
    radial-gradient(400px 40px at 50% 0, rgba(243,156,18,.15), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%);
  mix-blend-mode:overlay;
}
.hero-inner{position:relative; display:grid; gap:16px; padding:44px 22px 26px}
.brand{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
h1{ font-size:clamp(26px,3.2vw,40px); text-shadow:0 2px 0 rgba(0,0,0,.45); }
.pill{ font-size:12px; padding:6px 10px; border-radius:999px; background:#20242a; border:1px solid rgba(255,255,255,.1); font-weight:700; }
.tag{ color:var(--muted); max-width:900px; }

/* Buttons */
.cta{display:flex; flex-wrap:wrap; gap:10px}
.btn{
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  font-weight:800; padding:12px 16px; border-radius:var(--plate-radius);
  transition:transform .05s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}
.btn.secondary{
  background:linear-gradient(180deg,#2b3036,#1b1f24); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 -2px 0 rgba(0,0,0,.6) inset, 0 6px 14px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
}
.btn.primary-green{
  background: linear-gradient(180deg, #6fd778, #42b552);
  border:1px solid #1a7f2b;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.35) inset, 0 8px 18px rgba(0,0,0,.35);
  color:#0b1c0f; text-shadow:0 1px 0 rgba(0,0,0,.35);
  padding:12px 22px 12px 16px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}
.steam-icon { width:20px; height:20px; }

/* Status chip */
.status{ display:inline-flex; align-items:center; gap:8px; font-weight:800; padding:8px 12px; border-radius:14px; background:#121418; border:1px solid rgba(255,255,255,.08); }
.dot{width:10px; height:10px; border-radius:50%}
.ok{background:var(--good)} .warn{background:var(--warn)} .bad{background:var(--bad)}
.notice{color:var(--muted); font-size:13px; margin-top:10px}

/* Caution stripe */
.caution{ height:18px; margin:12px 0 26px; border-radius:var(--plate-radius); overflow:hidden;
  background:repeating-linear-gradient(135deg,#2a2f36 0 18px,#f39c12 18px 36px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.6) inset, 0 8px 16px rgba(0,0,0,.35);
}

/* Grid & Panels */
.grid{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr) }
.panel{
  position:relative; overflow:hidden;
  grid-column:span 8; border-radius:var(--plate-radius);
  background:linear-gradient(180deg, #3a3f45, #2c3036 55%, #272b30);
  border:1px solid #171a1e;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 -1px 0 rgba(0,0,0,.55) inset, 0 8px 18px rgba(0,0,0,.45);
}
.panel.small{ grid-column:span 4 }
@media (max-width:980px){ .panel,.panel.small{ grid-column:1/-1 } }

.hud{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 10px; border-radius:14px; color:#cbd1d8; background:#292e33; border:1px solid #1b1f23;
  white-space:nowrap; pointer-events:none;
}
.panel-content{ position:relative; padding:56px 28px 44px }

/* Key/value rows */
.kv{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg, #2a2f34, #1e2328);
  border:1px solid #14181c; border-radius:var(--plate-radius);
  padding:10px 12px; margin:8px 0;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 -1px 0 rgba(0,0,0,.55) inset;
}
.kv > span:first-child{ flex:0 0 auto; }
.kv .kv-value{ margin-left:auto; text-align:right; white-space:nowrap; overflow-x:auto; }
.icon-btn{
  background:none; border:none; cursor:pointer; padding:4px; display:inline-flex; align-items:center; justify-content:center;
  opacity:.85; transition:opacity .2s ease; filter:brightness(0) invert(1);
}
.icon-btn:hover{ opacity:1 }
.icon{ width:16px; height:16px; pointer-events:none }

/* Lists */
ul.clean, ol.clean{ margin:8px 0 0; padding-left:28px }
.panel.small ul.clean{ list-style:none; margin:8px 0 0; padding:0 }
.panel.small ul.clean li{ margin:6px 0 }

/* Links */
.link, .panel a{ color:#8fd0df; text-decoration:underline }
.link:hover, .panel a:hover{ filter:brightness(1.1) }

/* Footer & Toast */
footer{ color:#aab1b8; text-align:center; margin:20px 0 40px; font-size:13px }
#toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#101216; color:#fff; padding:10px 14px; border-radius:var(--plate-radius);
  border:1px solid rgba(255,255,255,.1); box-shadow:0 10px 24px rgba(0,0,0,.4);
  opacity:0; transition:opacity .2s ease; z-index:9999;
}

/* Mobile improvements */
@media (max-width:640px){
  .hero-inner{ padding:28px 16px 18px }
  .cta{ gap:8px }
  .panel-content{ padding:56px 16px 40px }
  ul.clean, ol.clean{ padding-left:22px }
  code{ max-width:100%; }
}