:root{
  --bg:#0d1320; --panel:#141d2e; --panel2:#1b2740; --line:#26344f;
  --txt:#e7edf7; --muted:#8aa0c0; --accent:#3da9fc; --accent2:#23c4a0;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--txt); display:flex; flex-direction:column; height:100vh;
}
header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 18px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{font-size:28px}
header h1{font-size:18px; margin:0; letter-spacing:.3px}
.sub{font-size:12px; color:var(--muted)}
.stats{display:flex; gap:10px; flex-wrap:wrap}
.chip{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:6px 12px; min-width:78px; text-align:center}
.chip b{display:block; font-size:18px; color:var(--accent)}
.chip span{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
.chip[title]{cursor:help}
.chip.wide{min-width:170px}
.chip.wide b{font-size:13px; color:var(--accent2)}
.chip.overpass{min-width:150px; background:linear-gradient(180deg,#173049,#142033); border-color:#2a4straight}
.chip.overpass{border-color:#2a4a6e}
.chip.overpass b{font-size:17px; color:#ffd166; font-variant-numeric:tabular-nums}
.chip.overpass span{font-size:10px; color:var(--muted)}
.live-ind{display:flex; align-items:center; gap:6px; min-width:auto}
.dot{width:10px; height:10px; border-radius:50%; background:#39d98a; display:inline-block; box-shadow:0 0 0 0 rgba(57,217,138,.6)}
.dot.pulse{animation:pulse 1s ease-out}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.6)}100%{box-shadow:0 0 0 10px rgba(57,217,138,0)}}

main{flex:1; display:flex; min-height:0}
.map-wrap{position:relative; flex:1 1 60%; min-width:0}
#map{position:absolute; inset:0; background:#0a1018}
.map-controls{position:absolute; top:10px; right:10px; z-index:500; display:flex; gap:6px; flex-direction:column; align-items:flex-end}
.map-controls button,.toggle{
  background:var(--panel); color:var(--txt); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer
}
.toggle{display:flex; gap:6px; align-items:center}
.legend{position:absolute; bottom:12px; left:12px; z-index:500; background:rgba(20,29,46,.9);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:11px; line-height:1.7}
.legend i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px}

.side{flex:1 1 40%; max-width:560px; min-width:340px; display:flex; flex-direction:column;
  background:var(--panel); border-left:1px solid var(--line)}
.tabs{display:flex; border-bottom:1px solid var(--line)}
.tab{flex:1; background:transparent; color:var(--muted); border:0; padding:12px; font-size:14px; cursor:pointer; border-bottom:2px solid transparent}
.tab.active{color:var(--txt); border-bottom-color:var(--accent)}
.badge{background:var(--panel2); border-radius:10px; padding:1px 7px; font-size:11px; color:var(--accent)}
.panel{flex:1; display:flex; flex-direction:column; min-height:0}
.panel.hidden{display:none}
.toolbar{display:flex; gap:10px; align-items:center; padding:10px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.toolbar input[type=search]{flex:1; min-width:160px; background:var(--bg); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:7px 10px}
.hint{font-size:11px; color:var(--muted); padding:6px 10px}
.filters{display:flex; gap:8px; flex-wrap:wrap; padding:10px; border-bottom:1px solid var(--line)}
.filters input,.filters select{background:var(--bg); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:7px 9px; font-size:12.5px}
.filters input[type=search]{flex:1; min-width:130px}
.filters input[type=number]{width:104px}
.filters .f-reset{background:var(--panel2); cursor:pointer}
.caret{cursor:pointer; color:var(--accent); user-select:none; width:18px; display:inline-block; text-align:center}
tr.hist-row>td{padding:0; background:#0f1726}
.hist-wrap{padding:6px 10px 10px 34px}
.hist-wrap table{width:100%}
.hist-wrap th,.hist-wrap td{padding:4px 8px; font-size:11.5px; color:var(--muted); border-bottom:1px solid #1a2538; white-space:nowrap}
.hist-wrap th{position:static; background:transparent}
.hist-title{font-size:11px; color:var(--accent2); margin-bottom:4px}
.muted{color:var(--muted)}
td.rownum{color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}

/* Tabellen-Ansicht (Rohdaten) */
.subtabs{display:flex; gap:6px}
.subtab{background:var(--panel2); border:1px solid var(--line); color:var(--muted); border-radius:7px; padding:5px 12px; cursor:pointer; font-size:12px; font-family:monospace}
.subtab.active{color:var(--txt); border-color:var(--accent)}
table.raw{font-size:11.5px}
table.raw thead th{position:static; background:var(--panel2)}
table.raw th, table.raw td{white-space:nowrap; padding:5px 8px}
table.raw tbody tr{cursor:default}
.filterrow th{padding:2px 4px}
.filterrow input{width:100%; min-width:64px; background:var(--bg); border:1px solid var(--line); color:var(--txt); border-radius:5px; padding:3px 6px; font-size:11px}
.tab-link{text-decoration:none; display:inline-flex; align-items:center; color:var(--accent)}
.linkchip{display:inline-flex; align-items:center; text-decoration:none; color:var(--accent); min-width:auto}
.tables-toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:10px 18px; background:var(--panel); border-bottom:1px solid var(--line)}
.tables-toolbar code{background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:11px; color:var(--accent2)}
.table-scroll.fullpage{flex:1; overflow:auto; padding:0 18px 18px}
body.page-tables{overflow:hidden}

/* Review (Tinder) */
body.page-review{overflow:hidden}
.hidden{display:none !important}
.review-main{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:18px; min-height:0}
.review-empty{font-size:20px; color:var(--muted)}
.card-stack{position:relative; width:min(900px,95vw)}
.review-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:0 12px 40px rgba(0,0,0,.4); transition:transform .28s ease, opacity .28s ease}
.review-card.fly-right{transform:translateX(120%) rotate(12deg); opacity:0}
.review-card.fly-left{transform:translateX(-120%) rotate(-12deg); opacity:0}
.card-images{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.card-images figure{margin:0}
.card-images figcaption{font-size:12px; color:var(--muted); margin-bottom:6px}
.card-images img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#000}
.card-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-top:14px}
.card-meta div{background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:12px}
.card-meta b{display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.3px; margin-bottom:2px}
.review-actions{display:flex; align-items:center; gap:24px}
.review-actions button{border:none; border-radius:12px; padding:14px 28px; font-size:16px; font-weight:600; cursor:pointer}
.btn-reject{background:#3a1f28; color:#ff6b6b; border:1px solid #5a2b36 !important}
.btn-approve{background:#16352a; color:#39d98a; border:1px solid #245c45 !important}
.review-actions button:hover{filter:brightness(1.25)}
.review-progress{color:var(--muted); font-size:13px; min-width:70px; text-align:center}
.swipe-hint{position:absolute; top:18px; z-index:5; font-size:22px; font-weight:800; padding:8px 16px; border-radius:10px; opacity:0; transition:opacity .15s; pointer-events:none}
.swipe-hint.left{left:18px; color:#ff6b6b; border:3px solid #ff6b6b; transform:rotate(-12deg)}
.swipe-hint.right{right:18px; color:#39d98a; border:3px solid #39d98a; transform:rotate(12deg)}
.swipe-hint.show{opacity:1}
@media (max-width:680px){ .card-images{grid-template-columns:1fr} }
tr.nodata td{color:#6f829f}
.table-scroll{overflow:auto; flex:1}
table{width:100%; border-collapse:collapse; font-size:12.5px}
thead th{position:sticky; top:0; background:var(--panel2); text-align:left; padding:8px 10px; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap}
tbody td{padding:7px 10px; border-bottom:1px solid #1c2740; white-space:nowrap}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--panel2)}
tbody tr.sel{background:#1d3354}
.swatch{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle}
.empty{padding:24px; text-align:center; color:var(--muted)}

.modal{position:fixed; inset:0; background:rgba(5,9,16,.8); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px}
.modal.hidden{display:none}
.modal-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; max-width:900px; width:100%; max-height:92vh; overflow:auto; position:relative}
.modal-close{position:absolute; top:12px; right:14px; background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:4px 10px; cursor:pointer}
.modal h2{margin:0 0 10px}
.m-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-bottom:16px}
.m-meta div{background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px}
.m-meta b{display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.3px; margin-bottom:2px}
.m-images{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.m-images figure{margin:0}
.m-images figcaption{font-size:12px; color:var(--muted); margin-bottom:6px}
.m-images img{width:100%; border-radius:10px; border:1px solid var(--line); background:#000; aspect-ratio:1/1; object-fit:cover}
.m-note{font-size:12px; color:var(--muted); margin-top:14px}
@media (max-width:760px){ main{flex-direction:column} .side{max-width:none; border-left:0; border-top:1px solid var(--line)} .m-images{grid-template-columns:1fr} }