:root{
  --bg:#0b0d12;--panel:#151922;--panel2:#1b2130;--text:#e6e9ef;--muted:#9aa4b2;
  --accent:#6ae3b5;--accent2:#7aa2ff;--danger:#ff6b6b;--border:#262c3a;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Manrope',sans-serif;background:var(--bg);color:var(--text);}
h1,h2,h3,.brand{font-family:'Syne',sans-serif;}
.hidden{display:none !important;}
#app{display:flex;min-height:100vh;}
#sidebar{width:220px;background:var(--panel);border-right:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:16px;}
.brand{font-size:22px;font-weight:800;} .brand span{color:var(--accent);}
nav{display:flex;flex-direction:column;gap:6px;}
.navbtn{background:transparent;border:1px solid transparent;color:var(--text);padding:10px 12px;border-radius:8px;cursor:pointer;text-align:left;}
.navbtn.active,.navbtn:hover{background:var(--panel2);border-color:var(--border);}
.sidebar-footer{margin-top:auto;font-size:13px;color:var(--muted);}
.linkbtn{background:none;border:none;color:var(--accent);cursor:pointer;padding:0;}
main{flex:1;padding:28px;overflow:auto;}
.view{max-width:1200px;}
.login-card{max-width:380px;margin:10vh auto;background:var(--panel);padding:32px;border-radius:14px;border:1px solid var(--border);}
.login-card h1{margin:0 0 6px;} .login-card p{color:var(--muted);margin-bottom:16px;}
.login-card input,.toolbar input,.toolbar select, .panel input, .panel select, .panel textarea{width:100%;padding:10px 12px;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:8px;margin:6px 0;}
.login-card button{width:100%;margin-top:10px;padding:12px;background:var(--accent);border:none;border-radius:8px;font-weight:700;cursor:pointer;color:#0b0d12;}
.err{color:var(--danger);margin-top:8px;min-height:18px;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px;}
.card .num{font-size:28px;font-weight:800;} .card .lbl{color:var(--muted);font-size:13px;}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:16px;}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.toolbar input,.toolbar select{width:auto;min-width:140px;}
button{background:var(--accent2);color:#fff;border:none;border-radius:8px;padding:9px 14px;cursor:pointer;font-weight:600;}
button:hover{opacity:.9;}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.tabs{display:flex;gap:6px;margin:10px 0;}
.tabbtn{background:var(--panel2);border:1px solid var(--border);}
.tabbtn.active{background:var(--accent);color:#0b0d12;}
.tab-pane{}
.tables{width:100%;border-collapse:collapse;}
.tables th,.tables td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;font-size:13px;}
.tables th{color:var(--muted);}
.tables tr:hover{background:var(--panel2);}
.pager{display:flex;gap:10px;align-items:center;margin-top:10px;}
.import-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.CodeMirror{height:320px;border-radius:8px;border:1px solid var(--border);}
input[type=file]{color:var(--text);}
a{color:var(--accent);}
.linkbtn{color:var(--accent);}