:root{
  --bg:#000000;
  --card:#0b0b0f;
  --text:#f0f0f2;
  --muted:#b7b7bf;
  --line:#23232a;
  --primary:#c8c8d2;
  --primary2:#8f8f9a;
  --danger:#ef4444;
  --ok:#22c55e;
  --shadow: 0 14px 40px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(200,200,210,.10), transparent 60%),
    radial-gradient(700px 440px at 85% 18%, rgba(160,160,175,.08), transparent 55%),
    linear-gradient(180deg, #000, var(--bg));
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:18px}
.card{
  background: rgba(11,11,15,.92);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow);
}
h1{font-size:22px;margin:0 0 12px}
h2{font-size:14px;margin:0 0 10px;color:var(--muted);font-weight:800;letter-spacing:.2px;text-transform:uppercase}
p{margin:0 0 10px;color:var(--muted)}
hr{border:none;border-top:1px solid var(--line);margin:14px 0}

.nav{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:14px 18px;background:rgba(0,0,0,.70);
  border-bottom:1px solid var(--line);position:sticky;top:0;backdrop-filter: blur(10px);
}
.nav .left{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.brand{display:flex;gap:10px;align-items:center;font-weight:900;letter-spacing:.2px}
.brand img{height:28px;width:auto;display:block}
.badge{font-size:12px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.menu{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.menu a{padding:8px 10px;border:1px solid transparent;border-radius:12px;color:var(--muted)}
.menu a.active,.menu a:hover{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.04)}

.grid{display:grid;gap:14px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.grid.cols-3{grid-template-columns:1fr}.grid.cols-2{grid-template-columns:1fr}}

.label{font-size:13px;color:var(--muted);margin:10px 0 6px;display:block}
.input, select.input, textarea.input{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text);outline:none
}
textarea.input{min-height:90px;resize:vertical}
.input:focus{border-color:rgba(200,200,210,.65);box-shadow:0 0 0 3px rgba(200,200,210,.14)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:12px;border:1px solid rgba(200,200,210,.35);
  background:rgba(255,255,255,.05);color:var(--text);cursor:pointer
}
.btn:hover{background:rgba(255,255,255,.08)}
.btn.primary{
  background:linear-gradient(180deg, rgba(220,220,232,.28), rgba(160,160,175,.12));
  border-color:rgba(220,220,232,.40)
}
.btn.ghost{border-color:var(--line);background:rgba(255,255,255,.02);color:var(--muted)}
.btn.ghost:hover{background:rgba(255,255,255,.06);color:var(--text)}
.btn.danger{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12)}
.btn.danger:hover{background:rgba(239,68,68,.22)}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px;border:1px solid var(--line)}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:top}
.table th{color:var(--muted);font-weight:800;background:rgba(255,255,255,.02)}
.table tr:last-child td{border-bottom:none}

.kpi{display:flex;flex-direction:column;gap:6px}
.kpi .big{font-size:18px;font-weight:900;color:var(--text)}
.kpi .small{font-size:13px;color:var(--muted)}

.toast{margin-top:12px;font-size:13px;color:var(--muted)}
.status{font-size:12px;padding:4px 10px;border-radius:999px;display:inline-block;border:1px solid var(--line)}
.status.open{border-color:rgba(200,200,210,.45);color:#e9e9ef}
.status.paid{border-color:rgba(34,197,94,.5);color:#ccfbe0}
.status.overdue{border-color:rgba(239,68,68,.5);color:#ffd3d3}
.status.off{border-color:rgba(239,68,68,.5);color:#ffd3d3}
.status.on{border-color:rgba(34,197,94,.5);color:#ccfbe0}

.center-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:min(560px, 100%)}
.logo-block{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.logo-block img{height:44px;width:auto}
.breadcrumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:13px;margin-bottom:10px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--text)}
.small-note{font-size:12px;color:var(--muted)}