:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #101313; color: #f4f1e8; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #28443c, transparent 35%), #101313; } .center { display: grid; place-items: center; padding: 24px; } .shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0; } header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:32px; } h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: .95; margin: 8px 0 0; letter-spacing:-.06em; } .eyebrow, .label { color:#9bd2a8; font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin:0; } .card { width:min(430px,100%); padding:28px; border:1px solid #435149; border-radius:18px; background:#1a211eeb; box-shadow:0 20px 80px #0005; } label { display:grid; gap:8px; margin:18px 0; color:#cdd7cd; } input { width:100%; padding:13px 14px; border:1px solid #4b5d51; border-radius:10px; background:#101613; color:inherit; font:inherit; } button { border:0; border-radius:10px; padding:13px 18px; background:#9bd2a8; color:#102017; font:inherit; font-weight:800; cursor:pointer; } button:hover { filter:brightness(1.1); } .actions { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0; } .danger { background:#e28d87; } .ghost { background:transparent; color:#d2e4d5; border:1px solid #53675a; } .small { padding:7px 10px; font-size:.75rem; } .status-card { width:100%; display:flex; justify-content:space-between; align-items:center; } .status-card strong { display:block; margin-top:8px; font-size:2rem; text-transform:capitalize; } .muted, .message { color:#aab9ae; min-height:1.3em; } .error { color:#f4a39b; min-height:1.3em; } .light { width:16px; height:16px; border-radius:50%; background:#777; box-shadow:0 0 18px #777; } .light[data-state=running] { background:#9bd2a8; box-shadow:0 0 18px #9bd2a8; } .light[data-state=stopped] { background:#e28d87; box-shadow:0 0 18px #e28d87; } .terminal { width:100%; margin-top:26px; } .terminal-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; } .logs-heading { margin-top:24px; } .terminal-mark { color:#9bd2a8; font-size:.7rem; letter-spacing:.14em; font-weight:800; } #terminal-form { display:flex; gap:10px; margin-top:18px; } #terminal-form input { flex:1; } #terminal-output, #server-logs { min-height:90px; margin:18px 0 0; padding:16px; overflow:auto; border:1px solid #2d3b32; border-radius:10px; background:#0b0f0d; color:#b9d9bd; font: .85rem/1.5 ui-monospace, SFMono-Regular, monospace; white-space:pre-wrap; } #server-logs { max-height:360px; margin-top:12px; color:#a7b6aa; } a { color:#9bd2a8; } nav { display:flex; gap:20px; flex-wrap:wrap; margin-top:28px; }

.landing { position:relative; isolation:isolate; display:grid; place-items:center; overflow:hidden; padding:24px; background:#101313; } .landing::before { position:absolute; z-index:0; inset:-8%; content:""; background:linear-gradient(90deg,#101313dd 0%,#10131388 48%,#101313dd 100%),url('/beikao-food.png') center/cover no-repeat; opacity:.28; filter:saturate(.85) contrast(1.05); transform:rotate(-5deg) scale(1.12); } .landing-shell { position:relative; z-index:1; width:min(920px,100%); } .landing h1 { max-width:920px; margin:0; color:#fff9eb; font-size:clamp(3.5rem,11vw,9rem); line-height:.86; letter-spacing:-.09em; text-shadow:0 5px 35px #000b; } .landing-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:48px; } .tile { min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; border:1px solid #b5c9b755; border-radius:22px; color:#f4f1e8; text-decoration:none; background:#10131366; box-shadow:0 18px 50px #0005; transition:transform .2s,border-color .2s,background .2s; } .tile:hover { transform:translateY(-4px); border-color:#d9f1d9; background:#26362dcc; } .tile strong { font-size:clamp(2.2rem,5vw,4.8rem); letter-spacing:-.07em; line-height:.9; text-shadow:0 3px 18px #0008; } .tile-map { background:#15483b66; } .tile-control { background:#54372266; } @media (max-width:640px) { .landing-actions { grid-template-columns:1fr; margin-top:32px; } .tile { min-height:150px; } #terminal-form { flex-direction:column; } }

/* Keep the console useful on desktop without letting it dominate the page. */
.shell { width:min(1100px, calc(100% - 32px)); }
.terminal { max-width:none; }
#terminal-output, #server-logs { min-height:0; height:120px; max-height:180px; overflow-y:auto; }
#server-logs { height:210px; max-height:240px; }

.performance { width:100%; margin-top:26px; }
.performance-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.metric-value { color:#9bd2a8; font-size:clamp(2rem,5vw,3.5rem); letter-spacing:-.06em; white-space:nowrap; }
.metric-row { display:flex; flex-wrap:wrap; gap:clamp(24px,7vw,64px); margin:22px 0 12px; }
.metric-row div { display:grid; gap:4px; }
.metric-label { color:#aab9ae; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; }
.metric-row strong { font-size:1.5rem; }
.chart-wrap { width:100%; padding:14px 12px 0; border:1px solid #435149; border-radius:14px; background:linear-gradient(180deg,#10161399,#10161333); }
.tps-chart { display:block; width:100%; height:clamp(170px,28vw,230px); margin-top:2px; overflow:visible; }
.chart-guide { stroke:#435149; stroke-width:1; stroke-dasharray:4 8; }
.tps-chart text { fill:#aab9ae; font-size:12px; }
.chart-fill { fill:url(#tps-fill-gradient); }
.chart-line { fill:none; stroke:#b9e9c2; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px #9bd2a877); }
.chart-point { fill:#9bd2a8; opacity:.55; }
.chart-point.current { fill:#f4f1e8; stroke:#9bd2a8; stroke-width:3; opacity:1; }
.chart-caption { margin:10px 0 0; font-size:.8rem; }
@media (max-width:520px) { .performance-heading { display:grid; gap:8px; } .metric-value { font-size:2.6rem; } .metric-row { gap:20px; } .chart-wrap { padding:10px 4px 0; } }

/* High-contrast dark palette for the metrics card. */
:root { background:#0b1210; color:#f5f2e9; }
body { background:radial-gradient(circle at 15% 0%, #285845 0%, transparent 34%), #0b1210; }
.card { border-color:#405c4d; background:#17241f; }
.performance { background:#17241f; }
.chart-wrap { border-color:#d9c8a9; background:#f3ecdf; box-shadow:inset 0 1px 0 #ffffff; }
.chart-guide { stroke:#cfc1aa; stroke-dasharray:5 7; opacity:.9; }
.tps-chart text { fill:#665d51; font-weight:700; }
.chart-fill { fill:#efb35f !important; opacity:.48; }
.chart-line { stroke:#d95743 !important; filter:drop-shadow(0 1px 3px #9d3d2e66); }
.chart-point { fill:#d95743; }
.chart-point.current { fill:#fffaf0; stroke:#d95743; }
.metric-label, .muted, .message { color:#b7cabe; }

/* Shared top navigation between the menu, map and control pages. */
.site-nav { position:fixed; z-index:10; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0; padding:10px max(16px, calc((100% - 1100px) / 2)); background:#0b1210e6; border-bottom:1px solid #2a3b33; backdrop-filter:blur(8px); }
.site-brand { color:#fff9eb; font-weight:900; letter-spacing:-.04em; text-decoration:none; white-space:nowrap; }
.site-links { display:flex; align-items:center; gap:4px; }
.site-links a { padding:8px 12px; border-radius:8px; color:#d2e4d5; font-weight:700; text-decoration:none; }
.site-links a:hover { background:#ffffff14; }
.site-links a[aria-current=page] { background:#9bd2a8; color:#102017; }
.site-links button { margin-left:8px; }
body.has-nav { padding-top:58px; }
.has-nav .shell { padding-top:28px; }
@media (max-width:520px) { .site-nav { padding:8px 12px; } .site-brand { display:none; } .site-links { width:100%; justify-content:space-between; } .site-links a { padding:8px 10px; } }
/* A fixed background can't widen the page, so the fixed top bar keeps the real screen width on phones. */
.landing::before { position:fixed; }