:root { --bg:#0b0f14; --panel:#101621; --muted:#9fb0c3; --text:#e7eef7; --blue:#2a7de1; --blue-2:#144d9c; --ok:#2ecc71; --warn:#f1c40f; --bad:#e74c3c; }
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family:"Noto Sans",system-ui,Arial,sans-serif; background:var(--bg); color:var(--text) }
.topbar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:linear-gradient(180deg,#0b0f14 0%, rgba(11,15,20,0.6) 100%); border-bottom:1px solid rgba(255,255,255,0.06); backdrop-filter: blur(6px);}
.topbar h1{ margin:0; font-size:20px; letter-spacing:.3px }
.container{ max-width:1200px; margin:20px auto; padding:0 16px }
.client-area{ max-width:800px; margin:24px auto; padding:0 16px }
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px }
.kpi{ background:var(--panel); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:14px; transition:transform .2s ease }
.kpi:hover{ transform:translateY(-2px) }
.kpi-label{ color:var(--muted); font-size:12px }
.kpi-value{ font-size:22px; font-weight:700; margin-top:6px }
.charts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px }
.card{ background:var(--panel); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:12px }
.card-header{ display:flex; align-items:center; justify-content:space-between; font-weight:600; margin-bottom:8px }
.search-bar input{ background:#0c1320; border:1px solid #1a2740; color:var(--text); padding:8px 10px; border-radius:8px; outline:none }
.table-wrap{ overflow:auto; border-radius:10px; border:1px solid rgba(255,255,255,0.06) }
.table{ width:100%; border-collapse:collapse; min-width:780px }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.06); text-align:left }
.table th{ color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.3px }
.table th.sortable{ cursor:pointer; }
.table th.sortable.active{ color:#fff; }
.status{ padding:4px 8px; border-radius:999px; font-size:12px }
.status.active{ background:rgba(46,204,113,.12); color:var(--ok) }
.status.expired{ background:rgba(231,76,60,.12); color:var(--bad) }
.client-card{ background:var(--panel); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:16px }
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.info-grid .label{ color:var(--muted); font-size:12px; display:block }
#c-status.active{ background:rgba(46,204,113,.12); color:var(--ok); padding:4px 8px; border-radius:999px }
#c-status.expired{ background:rgba(231,76,60,.12); color:var(--bad); padding:4px 8px; border-radius:999px }
.btn{ background:#102036; color:#d6e6fb; border:1px solid #2a3f66; padding:8px 12px; border-radius:10px; cursor:pointer; transition:background .2s, transform .06s }
.btn:hover{ background:#0f1a2d }
.btn:active{ transform:translateY(1px) }
.btn.primary{ background:linear-gradient(180deg, var(--blue), var(--blue-2)); border-color:#1d4f97 }
.row{ display:flex; gap:8px; align-items:center }
.modal{ border:none; padding:0; background:transparent }
.modal::backdrop{ background:rgba(0,0,0,.6) }
.modal-content{ background:var(--panel); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:16px; width:min(640px, 92vw) }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px }
label{ display:grid; gap:6px; font-size:12px; color:var(--muted) }
input, select, textarea{ width:100%; padding:10px 12px; border-radius:8px; background:#0c1320; border:1px solid #1a2740; color:var(--text); outline:none }
.muted{ color:var(--muted); font-size:12px }
.actions{ display:flex; gap:6px; flex-wrap:wrap }
.badge{ padding:2px 8px; border-radius:999px; border:1px solid #264a85; color:#86b6ff; font-size:11px; }
.hidden{ display:none !important; }
.login-screen{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#0b0f14; padding:20px; }
.login-card{ width:min(360px,90vw); background:var(--panel); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:16px; display:grid; gap:10px }
@media (max-width: 900px){ .charts{ grid-template-columns:1fr } .kpis{ grid-template-columns:repeat(2,1fr) } .grid{ grid-template-columns:1fr } }