/* English comments only */
:root { --bg:#0b0f14; --fg:#e6eef7; --accent:#53b2ff; --card:#131a22; --ok:#6bd38d; --warn:#ffcc66; --err:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; background:var(--bg); color:var(--fg); }
.page { max-width: 980px; margin: 0 auto; padding: 16px; }
.top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.brand { font-weight:700; font-size:22px; letter-spacing:1px; }
.status span { margin-left:12px; opacity:.8; }
.controls { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.controls input { padding:8px 10px; background:#0e141b; color:var(--fg); border:1px solid #1d2733; border-radius:8px; min-width:220px; }
.controls button { padding:8px 12px; background:#182433; color:var(--fg); border:1px solid #243347; border-radius:10px; cursor:pointer; }
.controls button:hover { background:#1e2c3d; }
.cards { display:grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.card { background:var(--card); border:1px solid #1c2633; border-radius:12px; padding:12px; }
.card .title { font-weight:700; margin-bottom:6px; }
.badge { padding:2px 6px; border-radius:6px; font-size:12px; margin-left:6px; }
.badge.ok { background: rgba(107,211,141,.15); color: var(--ok); }
.badge.warn { background: rgba(255,204,102,.15); color: var(--warn); }
.badge.err { background: rgba(255,107,107,.15); color: var(--err); }
.foot { margin-top:14px; opacity:.7; }
