:root{
  --bg:#060c12; --panel:#0d1520; --card:#111e2e; --border:#1e3a4a;
  --accent:#4fc3f7; --text:#c8d8e8; --dim:#6a8a9a; --green:#4caf50;
  --yellow:#f0c040; --red:#ef5350;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:14px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;gap:18px;padding:0 16px;height:48px;
  background:#0a1628;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.brand{color:var(--accent);font-weight:800;letter-spacing:2px;font-size:15px}
.topbar nav{display:flex;gap:4px;flex:1}
.topbar nav a{color:var(--dim);padding:6px 12px;border-radius:5px;font-weight:600}
.topbar nav a:hover{color:var(--text);background:#13283c;text-decoration:none}
.topbar nav a.active{color:var(--accent);background:#0d3a5a}
.user{display:flex;align-items:center;gap:8px}
.cname{color:var(--accent);font-weight:bold}
.btn-sm{background:var(--card);color:var(--text);border:1px solid var(--border);
  border-radius:5px;padding:5px 10px;cursor:pointer;font-size:12px}
.btn-sm.accent{border-color:var(--accent);color:var(--accent)}
.btn-sm:hover{background:#13283c}

main{max-width:1180px;margin:18px auto;padding:0 16px}
.flash{max-width:1180px;margin:10px auto 0;padding:0 16px}
.flash div{background:#3a1a1a;border:1px solid var(--red);color:#ffb4b4;
  padding:8px 12px;border-radius:5px;margin-bottom:6px}
footer{max-width:1180px;margin:24px auto;padding:0 16px;color:var(--dim);font-size:11px;
  border-top:1px solid var(--border);padding-top:10px}

h1{font-size:18px;color:var(--accent);letter-spacing:1px;margin:0 0 14px}
h2{font-size:15px;color:var(--text);margin:18px 0 8px}
.muted{color:var(--dim)}

.cards{display:flex;flex-wrap:wrap;gap:12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 14px}
.tile{flex:1 1 180px;min-width:170px}
.tile a{font-weight:600}

table{width:100%;border-collapse:collapse;background:rgba(6,12,18,.55);
  border:1px solid var(--border);border-radius:8px;overflow:hidden}
th{background:var(--panel);color:var(--dim);text-align:left;font-weight:600;
  padding:7px 9px;font-size:12px;border-bottom:1px solid var(--border)}
td{padding:7px 9px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
td.r,th.r{text-align:right}
.bold{font-weight:bold}

.box{display:inline-block;min-width:34px;text-align:center;color:#fff;font-size:11px;
  font-weight:bold;border-radius:3px;padding:1px 5px;margin:1px}
.box.dim{background:rgba(255,255,255,.10);color:var(--dim)}
.icon{width:22px;height:22px;vertical-align:middle}
.icon.big{width:26px;height:26px}
.dmgrow{display:flex;align-items:center;gap:5px;margin:2px 0}
.lbl{color:var(--accent);font-size:10px;font-weight:bold;width:40px}
.red{color:var(--red)} .green{color:var(--green)} .yellow{color:var(--yellow)}

form.frm{background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:3px}
.field label{color:var(--dim);font-size:11px}
.field input,.field select{background:var(--bg);color:var(--text);border:1px solid var(--border);
  border-radius:5px;padding:6px 8px;font-size:13px;min-width:140px}
.field input[type=number]{min-width:70px}
.flags{display:flex;gap:10px;align-items:center;color:var(--dim);font-size:12px}
.btn{background:#0d3a5a;color:var(--accent);border:1px solid var(--accent);border-radius:6px;
  padding:8px 18px;font-weight:bold;cursor:pointer}
.btn:hover{background:#1a5070}

#routemap{width:100%;height:300px;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;margin-top:12px}
.ac-wrap{position:relative}
.ac-list{position:absolute;z-index:10;left:0;right:0;background:var(--panel);
  border:1px solid var(--border);border-top:none;max-height:200px;overflow:auto}
.ac-list div{padding:5px 8px;cursor:pointer}
.ac-list div:hover,.ac-list div.sel{background:#0d3a5a}