:root{
  --bg:#0b0f14; /* deep slate */
  --panel:#121821;
  --muted:#1a2230;
  --text:#eaf2ff;
  --sub:#9fb3cc;
  --accent:#7cc6ff;
  --ok:#37d67a;
  --warn:#ffc857;
  --danger:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0b0f14,#0a0d12);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:var(--accent)}

.wrap{max-width:1250px;margin:24px auto;padding:0 16px}

.app-title{display:flex;gap:12px;align-items:center;margin:8px 0 18px}
.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#2a6cff,#22d3ee);box-shadow:var(--shadow)}
h1{font-size:22px;margin:0}
.sub{color:var(--sub)}

.toolbar{display:grid;gap:12px;grid-template-columns:1.2fr 1fr;align-items:start}
@media(max-width:900px){.toolbar{grid-template-columns:1fr}}

.card{background:linear-gradient(180deg,#0f1520,#0d141d);border:1px solid #1a2533;border-radius:var(--radius);box-shadow:var(--shadow)}
.card .hd{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #1c2938}
.card .bd{padding:16px}

.controls{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#101826;border:1px solid #223044;color:var(--sub);padding:8px 10px;border-radius:12px}

.row{display:grid;gap:10px}
.row.cols-2{grid-template-columns:repeat(2,1fr)}
.row.cols-3{grid-template-columns:repeat(3,1fr)}
.row.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.row.cols-4,.row.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.row.cols-4,.row.cols-3,.row.cols-2{grid-template-columns:1fr}}

label{display:block;color:var(--sub);font-size:12px;margin:2px 2px 6px}
input[type=text], input[type=search], input[type=date], select, textarea{width:100%;padding:10px 12px;background:#0e1520;border:1px solid #223044;color:var(--text);border-radius:10px;outline:none}
input[type=text]:focus, input[type=search]:focus, input[type=date]:focus, select:focus, textarea:focus{border-color:#2f79ff;box-shadow:0 0 0 3px rgba(47,121,255,.15)}

.btn{appearance:none;border:1px solid #2a3950;background:#14202e;color:var(--text);padding:10px 12px;border-radius:12px;font-weight:600;cursor:pointer;transition:transform .06s ease,filter .2s}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#2a6cff,#1d9bf0);border-color:#2a6cff}
.btn.success{background:linear-gradient(180deg,#1f9d57,#1abc9c);border-color:#25b26b}
.btn.warn{background:linear-gradient(180deg,#d58b00,#c97f00);border-color:#d58b00}
.btn.danger{background:linear-gradient(180deg,#aa2334,#e03131);border-color:#e03131}
.btn.ghost{background:#0f1623}

.stack{display:flex;gap:8px;flex-wrap:wrap}

.kpi{display:flex;gap:6px;align-items:center;padding:8px 10px;border:1px dashed #223044;border-radius:10px;color:var(--sub)}

table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:#0f1724;z-index:2;border-bottom:1px solid #1b2838;color:#aac1df;text-align:left;padding:10px 10px;font-weight:700}
tbody td{border-bottom:1px solid #172233;padding:8px 10px}
tbody tr:hover{background:#0d1522}

.actions{display:flex;gap:6px}

.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{background:#0d1a28;border:1px solid #1f2d42;color:#cfe3ff;padding:2px 8px;border-radius:999px;font-size:12px}

.muted{color:#8aa0ba}

.vers-group{display:flex;gap:10px;flex-wrap:wrap}
.vers-item{display:flex;gap:6px;align-items:center;background:#0d1622;border:1px solid #1c2b3f;padding:6px 8px;border-radius:10px}

.table-wrap{max-height:55vh;overflow:auto;border-radius:12px;border:1px solid #1a2533}

.foot{display:flex;justify-content:space-between;align-items:center;padding:10px 6px;color:var(--sub)}

.srch{position:relative}
.srch input{padding-left:38px}
.srch:before{content:"🔎";position:absolute;left:10px;top:50%;transform:translateY(-50%)}

.pill{padding:6px 8px;border-radius:999px;background:#0d1622;border:1px solid #1c2b3f;font-size:12px;color:#b9cbe4}

.sep{height:1px;background:#1a2638;margin:10px 0}

details#importLog summary{cursor:pointer}
#aiLog{background:#0b111b;border:1px solid #1c2a3c;border-radius:10px;padding:10px;max-height:160px;overflow:auto;color:#99b5db}

@media print{
  body{background:white;color:black}
  .no-print{display:none !important}
  .table-wrap{max-height:none}
  thead th{position:static;background:white;color:black;border-color:#bbb}
  tbody td{border-color:#ddd}
}