:root{--bg:#0b1220;--card:#111a2e;--muted:#7f8aa3;--text:#e7ecf7;--line:rgba(255,255,255,.10);--ok:#2ecc71;--bad:#ff5c5c;--warn:#f1c40f;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
input,select,button,textarea{font:inherit}
a{color:inherit}

/* Layout */
#appRoot{display:flex;min-height:100vh}
.sidebar{width:260px;flex:0 0 260px;border-right:1px solid var(--line);padding:16px;position:sticky;top:0;align-self:flex-start;height:100vh;background:rgba(0,0,0,.12)}
.brand{font-weight:700;font-size:18px;margin-bottom:10px}
.userline{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0 12px}
.small{color:var(--muted);font-size:12px}
.nav{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.navbtn{width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:10px;cursor:pointer}
.navbtn.active{background:rgba(255,255,255,.08)}
.content{flex:1;padding:18px;max-width:1200px}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 0 14px}
.card h3{margin:0 0 10px;font-size:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.sidebar{position:static;width:100%;height:auto}.content{padding:12px}.grid2,.grid3{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:6px;font-size:13px}
input,select,textarea{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px}
textarea{min-height:90px;resize:vertical}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.right{display:flex;justify-content:flex-end}

.btn{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer}
.btn.primary{background:rgba(46,204,113,.15);border-color:rgba(46,204,113,.35)}
.btn.danger{background:rgba(255,92,92,.12);border-color:rgba(255,92,92,.35)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}

.pills{display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);margin:4px 4px 0 0}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:10px;text-align:left;font-size:13px}
.table th{color:var(--muted);font-weight:600}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:12px}
.kpi .v{font-size:22px;font-weight:800;margin-top:6px}

/* Hints */
.hint{margin-top:6px;color:var(--muted);font-size:12px}
.error{display:none;margin-top:10px;padding:10px;border-radius:10px;background:rgba(255,92,92,.12);border:1px solid rgba(255,92,92,.35)}

/* Autocomplete */
.auto{position:relative}
.autoList{position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:none;max-height:240px;overflow:auto}
.autoItem{padding:10px;border-bottom:1px solid var(--line);cursor:pointer}
.autoItem:hover{background:rgba(255,255,255,.06)}

/* Modal / Overlay */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modalCard{width:min(520px,100%);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.overlayCard{width:min(900px,100%);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}

/* Toast */
.toastWrap{position:fixed;top:12px;right:12px;z-index:60;display:flex;flex-direction:column;gap:10px;max-width:min(420px,92vw)}
.toast{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(17,26,46,.98)}
.toast .t{font-weight:800;margin-bottom:2px}
.toast .m{color:var(--muted);font-size:13px}
.toast.ok{border-color:rgba(46,204,113,.35)}
.toast.bad{border-color:rgba(255,92,92,.35)}
.toast.warn{border-color:rgba(241,196,15,.35)}
.toast .x{border:none;background:transparent;color:var(--text);cursor:pointer;font-size:16px}

/* Status pill used by JS */
.pill{display:inline-flex;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}