/* UI + colors (unchanged from V8) */
:root{
  --main:#022039;
  --second:#003969;
  --bg:var(--main);
  --panel:#05142a;
  --muted:#9fb6cc;
  --border:#0a2a4b;
  --accent:var(--second);
  --text:#e7f2ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:#68a9ff;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1160px;margin:36px auto;padding:0 16px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:26px 22px;background:rgba(0,0,0,0.15);border-bottom:2px solid var(--border)}
.topbar .brand img{height:50px;display:block}
.topbar .menu{display:flex;gap:18px;align-items:center}
.btn{display:inline-block;padding:10px 14px;background:var(--accent);color:white;border:0}
.header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.form{display:grid;gap:12px;max-width:820px}
.form input[type="text"], .form input[type="date"], .form textarea, .form select{
  background:var(--panel);border:2px solid var(--border);padding:10px;color:var(--text)
}
.form button{background:var(--accent);color:white;border:0;padding:10px 14px;cursor:pointer}
.searchbar{display:flex;gap:8px;align-items:center;margin:14px 0;flex-wrap:wrap}
.searchbar input[type="text"]{flex:1;min-width:240px;background:var(--panel);border:2px solid var(--border);padding:10px;color:var(--text)}
.searchbar input::placeholder{color:var(--muted)}
.searchbar select{background:var(--panel);border:2px solid var(--border);padding:10px;color:var(--text)}
.searchbar button{padding:10px 14px;border:0;background:var(--accent);color:#fff}
.table-wrap{overflow-x:auto;background:rgba(255,255,255,0.05);border:2px solid var(--border)}
table.data{width:100%;border-collapse:collapse;table-layout:fixed}
table.data thead th{background:rgba(0,0,0,0.2);text-align:left;padding:12px;border-bottom:2px solid var(--border)}
table.data td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}
.status-lamp{display:inline-block;width:12px;height:12px;margin-right:8px;border:2px solid rgba(255,255,255,0.35)}
.status-red{background:#ef4444}
.status-yellow{background:#f59e0b}
.status-green{background:#10b981}
.status-unknown{background:#6b7280}
.small{font-size:13px;color:var(--muted)}
@media (max-width:760px){
  .container{margin:18px auto}
  .header-row{flex-direction:column;align-items:flex-start;gap:10px}
  .table-wrap{border:none;background:transparent}
  table.data{border:0}
  table.data thead{display:none}
  table.data, table.data tbody, table.data tr, table.data td{display:block;width:100%}
  table.data tr{background:rgba(255,255,255,0.05);border:2px solid var(--border);margin-bottom:12px}
  table.data td{border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:16px}
  table.data td::before{content:attr(data-label);font-weight:700;color:var(--muted)}
  table.data td:last-child{border-bottom:0}
}
