:root{
  --bg:#0b0f1a;
  --card:#0f1627;
  --border:rgba(255,255,255,.08);
  --text:#eef2ff;
  --muted:rgba(238,242,255,.70);
  --hot:#ff3d77;
  --gold:#ffd400;
  --aqua:#19a7ff;
  --mint:#00d1b2;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Auth */
.auth-bg{display:flex; align-items:center; justify-content:center; padding:20px}
.auth-card{width:min(440px, 100%); background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px; box-shadow:var(--shadow)}
.auth-brand{font-weight:800; font-size:22px; letter-spacing:.4px}
.auth-sub{color:var(--muted); margin-top:4px; margin-bottom:18px; font-size:13px}
.auth-form{display:flex; flex-direction:column; gap:10px}
.auth-note{margin-top:14px; color:var(--muted); font-size:12px}

/* Layout */
.app-shell{display:flex; height:100vh; overflow:hidden}
.sidebar{
  width:280px; min-width:280px; background:linear-gradient(180deg, rgba(15,22,39,.98), rgba(15,22,39,.88));
  border-right:1px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:14px;
}
.brand-title{font-weight:800; font-size:20px}
.brand-sub{font-size:12px; color:var(--muted)}

.nav{display:flex; flex-direction:column; gap:6px; overflow:auto; padding-right:6px}
.nav-item{
  width:100%; text-align:left; padding:10px 12px; border-radius:12px;
  border:1px solid transparent; background:transparent; color:var(--text);
  cursor:pointer; font-size:14px;
}
.nav-item:hover{background:rgba(255,255,255,.04); border-color:var(--border)}
.nav-item.active{background:rgba(25,167,255,.10); border-color:rgba(25,167,255,.35)}
.logout{margin-top:auto}

.main{flex:1; display:flex; flex-direction:column; min-width:0}
.topbar{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--border);
  background:rgba(11,15,26,.6); backdrop-filter: blur(8px);
}
.topbar-title{font-weight:700}
.topbar-right{margin-left:auto; color:var(--muted); font-size:12px}

.content{padding:14px; overflow:auto}

/* Components */
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:0 6px 18px rgba(0,0,0,.25)}
.grid{display:grid; gap:12px}
.kpis{grid-template-columns: repeat(4, minmax(0,1fr))}
.kpi{display:flex; flex-direction:column; gap:6px}
.kpi .label{color:var(--muted); font-size:12px}
.kpi .value{font-size:22px; font-weight:800}

.label{font-size:12px; color:var(--muted)}
.input, select, textarea{
  width:100%; background:#0b1222; color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:10px 12px; outline:none;
}
textarea{min-height:110px; resize:vertical}

.btn{border-radius:12px; padding:10px 12px; border:1px solid var(--border); background:rgba(255,255,255,.02); color:var(--text); cursor:pointer}
.btn:hover{background:rgba(255,255,255,.05)}
.btn.primary{border-color:rgba(255,61,119,.5); background:rgba(255,61,119,.12)}
.btn.primary:hover{background:rgba(255,61,119,.18)}
.btn.ghost{background:transparent}

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

.table{width:100%; border-collapse:separate; border-spacing:0 8px}
.table th{color:var(--muted); font-size:12px; text-align:left; font-weight:600; padding:0 10px}
.table td{background:#0b1222; border:1px solid var(--border); padding:10px; font-size:13px}
.table tr td:first-child{border-top-left-radius:12px; border-bottom-left-radius:12px}
.table tr td:last-child{border-top-right-radius:12px; border-bottom-right-radius:12px}

.badge{display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); color:var(--muted)}
.badge.hot{border-color:rgba(255,61,119,.5); color:#ffd0df}
.badge.good{border-color:rgba(0,209,178,.45); color:#bff8ef}
.badge.bad{border-color:rgba(255,212,0,.45); color:#fff2b3}

.error{color:#ffd0df; background:rgba(255,61,119,.12); border:1px solid rgba(255,61,119,.35); padding:8px 10px; border-radius:12px; font-size:13px}

/* Responsive */
#menuBtn{display:none}
@media (max-width: 980px){
  .kpis{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 820px){
  #menuBtn{display:inline-flex}
  .sidebar{position:fixed; left:0; top:0; bottom:0; width:280px; transform:translateX(-110%); transition:transform .2s ease; z-index:1000; box-shadow:4px 0 24px rgba(0,0,0,.5); background:var(--bg, #0a0a1a) !important}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999}
  .sidebar-backdrop.show{display:block}
  .main{width:100%}
  .nav-item{padding:14px 14px; font-size:15px; min-height:44px}
}
@media (max-width: 520px){
  .kpis{grid-template-columns: 1fr}
  .content{padding:10px}
}