@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600;700&family=Sora:wght@500;600;700&display=swap');
:root {
  --bg:#0f0f11; --surface:#18181c; --surface2:#1e1e24;
  --border:#2a2a30; --text:#e8e8ec; --muted:#6b6b78;
  --accent:#6366f1; --accent2:#a855f7; --green:#22c55e; --yellow:#eab308; --red:#ef4444;
  --shadow:0 4px 24px -8px rgba(0,0,0,.5); --shadow-lg:0 12px 48px -12px rgba(0,0,0,.6);
  --radius:14px;
}
* { box-sizing:border-box; margin:0; padding:0; }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes floatBg { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(3%,4%) scale(1.08); } }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; font-size:15px; min-height:100vh; position:relative; overflow-x:hidden; }
body::before { content:''; position:fixed; top:-30%; right:-20%; width:70vw; height:70vw; z-index:-2;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 22%,transparent) 0%, transparent 60%);
  filter:blur(60px); animation:floatBg 22s ease-in-out infinite; pointer-events:none; }
body::after { content:''; position:fixed; bottom:-30%; left:-20%; width:60vw; height:60vw; z-index:-2;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent2) 18%,transparent) 0%, transparent 60%);
  filter:blur(70px); animation:floatBg 28s ease-in-out infinite reverse; pointer-events:none; }
a { color:inherit; text-decoration:none; }
select { background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:5px;
  padding:.35rem .65rem; font-family:'DM Mono',monospace; font-size:.85rem; outline:none; cursor:pointer; }
select:focus { border-color:var(--accent); }
header { border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent); padding:1.25rem 2rem;
  display:flex; align-items:center; gap:1rem; backdrop-filter:blur(12px) saturate(1.4);
  background:color-mix(in srgb,var(--surface) 60%,transparent); position:sticky; top:0; z-index:50; }
header h1 { font-family:'Sora',sans-serif; font-size:1.15rem; font-weight:700; letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
header .sub { color:var(--muted); font-size:.82rem; font-family:'DM Mono',monospace; }
header .spacer { flex:1; }
.user-badge { font-family:'DM Mono',monospace; font-size:.78rem; color:var(--muted); }
.topnav { display:flex; gap:.5rem; padding:1rem 2rem; border-bottom:1px solid var(--border); flex-wrap:wrap; align-items:center; }
.topnav a { font-family:'DM Mono',monospace; font-size:.8rem; padding:.32rem .85rem; border-radius:999px;
  color:var(--muted); border:1px solid var(--border); transition:all .2s; }
.topnav a:hover, .topnav a.active { color:var(--text); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.topnav .spacer { flex:1; }
.toolbar { display:flex; gap:.5rem; padding:.75rem 2rem; border-bottom:1px solid var(--border); flex-wrap:wrap; align-items:center; }
.daynav { display:flex; gap:.4rem; flex-wrap:wrap; }
.daynav a, .filter-btn { font-family:'DM Mono',monospace; font-size:.75rem; padding:.3rem .8rem; border-radius:999px;
  color:var(--muted); border:1px solid var(--border); cursor:pointer; background:transparent; transition:all .2s; }
.daynav a:hover, .daynav a.active, .filter-btn:hover, .filter-btn.active {
  color:var(--text); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.spacer { flex:1; min-width:.5rem; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; padding:1.5rem 2rem; }
.stat { background:color-mix(in srgb,var(--surface) 75%,transparent); padding:1.1rem 1.4rem;
  border:1px solid color-mix(in srgb,var(--border) 70%,transparent); border-radius:var(--radius);
  backdrop-filter:blur(12px); box-shadow:var(--shadow); animation:fadeUp .5s ease both;
  position:relative; overflow:hidden; }
.stat::before { content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); opacity:.6; }
.stat .label { font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:.45rem; }
.stat .value { font-family:'Sora',sans-serif; font-size:1.6rem; font-weight:700; letter-spacing:-.02em; }
.stat .value.green { color:var(--green); } .stat .value.yellow { color:var(--yellow); } .stat .value.red { color:var(--red); }
table { width:100%; border-collapse:collapse; }
th { font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:500;
  padding:.65rem 1.25rem; text-align:left; border-bottom:1px solid var(--border); font-family:'DM Mono',monospace; }
td { padding:.58rem 1.25rem; border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);
  font-family:'DM Mono',monospace; font-size:.81rem; }
tbody tr { transition:background .15s; }
tr:hover td { background:color-mix(in srgb,var(--accent) 7%,transparent); }
.badge { display:inline-block; padding:.14rem .44rem; border-radius:3px; font-size:.7rem; font-weight:500; }
.badge.ok { background:color-mix(in srgb,var(--green) 15%,transparent); color:var(--green); }
.badge.warn { background:color-mix(in srgb,var(--yellow) 15%,transparent); color:var(--yellow); }
.badge.alert { background:color-mix(in srgb,var(--red) 15%,transparent); color:var(--red); }
.badge.cancel { background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent); }
.dest { color:var(--muted); }
.msg { font-size:.74rem; color:var(--muted); max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empty { padding:4rem 2rem; text-align:center; color:var(--muted); font-family:'DM Mono',monospace; }
.page { max-width:760px; margin:2rem auto; padding:0 1.5rem; }
.center-page { max-width:380px; margin:6rem auto; padding:0 1.5rem; }
.card { background:color-mix(in srgb,var(--surface) 82%,transparent); border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
  border-radius:var(--radius); margin-bottom:1.5rem; overflow:hidden; backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:var(--shadow); animation:fadeUp .5s ease both; transition:transform .2s, box-shadow .2s; }
.card:hover { box-shadow:var(--shadow-lg); }
.card-header { padding:1rem 1.5rem; border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);
  font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600;
  display:flex; align-items:center; justify-content:space-between;
  background:color-mix(in srgb,var(--accent) 4%,transparent); }
.card-body { padding:1.4rem; }
.field { margin-bottom:1.1rem; } .field:last-child { margin-bottom:0; }
label { display:block; font-size:.78rem; color:var(--muted); margin-bottom:.35rem; font-family:'DM Mono',monospace; }
input[type=text],input[type=number],input[type=password] { width:100%; background:var(--surface2); border:1px solid var(--border);
  color:var(--text); padding:.5rem .75rem; border-radius:5px; font-family:'DM Mono',monospace; font-size:.86rem; outline:none; transition:border-color .15s; }
input:focus { border-color:var(--accent); }
.tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.tag { display:flex; align-items:center; gap:.3rem; background:var(--surface2); border:1px solid var(--border);
  border-radius:4px; padding:.2rem .5rem; font-family:'DM Mono',monospace; font-size:.8rem; }
.tag button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:.9rem; line-height:1; }
.tag button:hover { color:var(--red); }
.tag-input { display:flex; gap:.5rem; } .tag-input input { flex:1; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
.btn { display:inline-block; padding:.45rem 1rem; border-radius:5px; font-size:.83rem;
  cursor:pointer; border:none; font-family:'DM Sans',sans-serif; font-weight:600; transition:all .15s; }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;
  box-shadow:0 4px 14px -4px color-mix(in srgb,var(--accent) 60%,transparent); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px -4px color-mix(in srgb,var(--accent) 70%,transparent); }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--text); border-color:var(--text); }
.btn-danger { background:color-mix(in srgb,var(--red) 15%,transparent); color:var(--red); border:1px solid color-mix(in srgb,var(--red) 30%,transparent); }
.btn-danger:hover { background:color-mix(in srgb,var(--red) 25%,transparent); }
.btn-sm { padding:.28rem .6rem; font-size:.76rem; }
.btn-block { width:100%; text-align:center; }
.theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.5rem; }
.theme-btn { padding:.6rem .8rem; border-radius:10px; border:2px solid var(--border); cursor:pointer;
  font-family:'DM Mono',monospace; font-size:.76rem; text-align:center; transition:all .2s; background:var(--surface2); color:var(--text); }
.theme-btn:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.theme-btn.active { border-color:transparent; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 4px 16px -4px color-mix(in srgb,var(--accent) 60%,transparent); }
.hint { font-size:.73rem; color:var(--muted); margin-top:.3rem; font-family:'DM Mono',monospace; }
.logo { font-family:'Sora',sans-serif; font-size:1.8rem; font-weight:700; margin-bottom:.4rem; letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.logo-sub { color:var(--muted); font-size:.82rem; font-family:'DM Mono',monospace; margin-bottom:2rem; }
.center-page .card { animation:fadeUp .6s ease both; }
.error { color:var(--red); font-size:.8rem; margin-top:.5rem; font-family:'DM Mono',monospace; }
.user-row { display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent); }
.user-row:last-child { border-bottom:none; }
.user-info { font-family:'DM Mono',monospace; font-size:.85rem; }
.user-meta { color:var(--muted); font-size:.72rem; }
.toast { position:fixed; bottom:1.5rem; right:1.5rem; background:var(--green); color:var(--bg);
  padding:.55rem 1.1rem; border-radius:6px; font-weight:600; font-size:.83rem; opacity:0; transition:opacity .3s; pointer-events:none; }
.toast.show { opacity:1; }
.station-name { font-weight:600; font-size:.9rem; }