:root {
  --bg: #07090d;
  --panel: #0e1118;
  --panel-2: #131722;
  --panel-3: #191f2b;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.14);
  --text: #f5f7fb;
  --muted: #8e98aa;
  --accent: #7c5cff;
  --accent-2: #9a83ff;
  --green: #39d98a;
  --yellow: #f4bd50;
  --red: #ff667d;
  --shadow: 0 28px 80px rgba(0,0,0,.36);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

.login-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% -20%, #251b55 0, transparent 42%), var(--bg); }
.login-glow { position: absolute; border-radius: 999px; filter: blur(100px); opacity: .25; }
.glow-a { width: 420px; height: 420px; background: var(--accent); left: -140px; top: 10%; }
.glow-b { width: 360px; height: 360px; background: #2a8cff; right: -120px; bottom: 5%; }
.login-card { width: min(460px, 100%); background: rgba(15,18,26,.86); border: 1px solid var(--line-strong); border-radius: 26px; padding: 34px; box-shadow: var(--shadow); backdrop-filter: blur(24px); display: grid; gap: 18px; position: relative; z-index: 2; }
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg,var(--accent-2),var(--accent)); font-weight: 900; box-shadow: 0 12px 30px rgba(124,92,255,.35); }
.brand strong { display: block; letter-spacing: -.02em; }
.brand small { display: block; color: var(--muted); margin-top: 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.brand-login { margin-bottom: 8px; }
.login-copy h1 { font-size: clamp(28px,5vw,38px); line-height: 1.05; letter-spacing: -.045em; margin: 8px 0 10px; }
.login-copy p { margin: 0; color: var(--muted); line-height: 1.6; }
label { display: grid; gap: 8px; color: #cbd2df; font-size: 13px; font-weight: 650; }
input, textarea { width: 100%; color: var(--text); background: #090c12; border: 1px solid var(--line-strong); border-radius: 12px; padding: 13px 14px; outline: none; transition: .2s; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(124,92,255,.12); }
label small { color: var(--muted); font-weight: 400; }
.form-error { color: var(--red); min-height: 18px; margin: 0; font-size: 13px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 254px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; border-right: 1px solid var(--line); background: #090b10; display: flex; flex-direction: column; }
.sidebar .brand { padding: 0 8px 26px; }
.nav-list { display: grid; gap: 5px; }
.nav-item { appearance: none; border: 0; background: transparent; text-align: left; display: flex; align-items: center; gap: 13px; padding: 12px 13px; border-radius: 11px; color: var(--muted); cursor: pointer; transition: .18s; }
.nav-item span { width: 22px; text-align: center; color: #b9c1d0; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-item.active { color: #fff; background: linear-gradient(90deg,rgba(124,92,255,.20),rgba(124,92,255,.08)); box-shadow: inset 0 0 0 1px rgba(124,92,255,.18); }
.nav-item.active span { color: var(--accent-2); }
.sidebar-footer { margin-top: auto; display: grid; gap: 14px; }
.server-indicator { border: 1px solid var(--line); border-radius: 13px; padding: 12px; display: flex; align-items: center; gap: 10px; }
.server-indicator i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(57,217,138,.09); }
.server-indicator strong, .server-indicator small { display:block; }
.server-indicator strong { font-size: 12px; }
.server-indicator small { color: var(--muted); margin-top: 2px; font-size: 10px; }
.main-content { min-width: 0; padding: 0 30px 50px; background: radial-gradient(circle at 74% -10%,rgba(124,92,255,.1),transparent 25%), var(--bg); }
.topbar { min-height: 104px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.topbar h1 { margin: 2px 0 0; font-size: 29px; letter-spacing: -.035em; }
.eyebrow { margin: 0; font-size: 10px; letter-spacing: .17em; color: var(--muted); font-weight: 800; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 21px; }
.icon-btn:hover { border-color: var(--line-strong); background: var(--panel-2); }
.user-chip { display:flex; align-items:center; gap:10px; padding: 7px 11px 7px 7px; border: 1px solid var(--line); background: var(--panel); border-radius: 13px; }
.user-chip > span { width: 31px; height:31px; border-radius:9px; display:grid; place-items:center; background:var(--panel-3); color:var(--accent-2); font-weight:800; }
.user-chip strong,.user-chip small{display:block}.user-chip strong{font-size:12px}.user-chip small{font-size:10px;color:var(--muted);margin-top:2px}
.view { display:none; animation: fadeIn .22s ease; }
.view.active { display:block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }

.hero-panel { min-height: 164px; border: 1px solid rgba(124,92,255,.28); background: linear-gradient(120deg,rgba(124,92,255,.16),rgba(16,19,28,.86) 55%), var(--panel); border-radius: 20px; padding: 27px 28px; display:flex; justify-content:space-between; align-items:center; box-shadow: inset 0 1px rgba(255,255,255,.03); }
.hero-panel h2 { font-size: clamp(26px,4vw,38px); letter-spacing:-.045em; margin:8px 0; }
.hero-panel p:last-child { color:var(--muted); margin:0; }
.hero-badge { display:flex; align-items:center; gap:10px; border:1px solid var(--line-strong); background:rgba(8,10,15,.55); padding:11px 14px; border-radius:999px; color:#cfd5e2; font-size:12px; }
.hero-badge i { width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(57,217,138,.1); }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:14px; }
.metric-card { padding:18px; border:1px solid var(--line); background:var(--panel); border-radius:16px; }
.metric-head { display:flex; justify-content:space-between; align-items:center; }
.metric-head span { font-weight:760; font-size:13px; }
.metric-head small { color:#dbe0e9; font-size:15px; font-weight:800; }
.metric-card p { color:var(--muted); font-size:11px; margin:11px 0 0; }
.progress { height:6px; background:rgba(255,255,255,.055); border-radius:999px; overflow:hidden; margin-top:17px; }
.progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:inherit; transition:width .45s ease; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr); gap:14px; margin-top:14px; }
.panel { border:1px solid var(--line); background:var(--panel); border-radius:17px; padding:21px; min-width:0; }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-header h3 { margin:4px 0 0; font-size:17px; letter-spacing:-.02em; }
.soft-badge { padding:7px 10px; border-radius:999px; background:rgba(124,92,255,.10); color:var(--accent-2); font-size:10px; border:1px solid rgba(124,92,255,.16); }
.text-button { border:0;background:none;color:var(--accent-2);cursor:pointer;font-size:11px; }
.traffic-cards { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px; }
.traffic-cards div { background:#0a0d13;border:1px solid var(--line);border-radius:12px;padding:13px; }
.traffic-cards small,.traffic-cards strong{display:block}.traffic-cards small{color:var(--muted);font-size:10px}.traffic-cards strong{margin-top:7px;font-size:16px}
.mini-chart { height:96px; margin-top:16px; display:flex; align-items:end; gap:6px; padding:12px 4px 0; border-top:1px solid var(--line); }
.chart-bar { flex:1; min-width:5px; border-radius:4px 4px 1px 1px; background:linear-gradient(to top,rgba(124,92,255,.35),var(--accent)); opacity:.85; transition:height .3s; }
.activity-list { margin-top:13px; display:grid; }
.activity-item { display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:11px; align-items:start; padding:13px 0; border-bottom:1px solid var(--line); }
.activity-item:last-child{border-bottom:0}.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);margin-top:5px}.activity-item strong{display:block;font-size:12px}.activity-item p{margin:4px 0 0;color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-item time{color:var(--muted);font-size:9px}

.section-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.section-copy { color:var(--muted); margin:0; font-size:13px; }
.btn { border:1px solid transparent; border-radius:11px; padding:10px 14px; font-weight:720; font-size:12px; cursor:pointer; transition:.18s; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.btn:hover { transform:translateY(-1px); }
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary { background:linear-gradient(135deg,var(--accent-2),var(--accent)); box-shadow:0 10px 26px rgba(124,92,255,.22); }
.btn-secondary { background:var(--panel-2); border-color:var(--line); color:#d7dce7; }
.btn-ghost { background:transparent;border-color:var(--line);color:var(--muted); }
.btn-danger { background:rgba(255,102,125,.14);border-color:rgba(255,102,125,.23);color:#ff9aab; }
.btn-full{width:100%}.btn-large{padding:14px}.btn-small{padding:7px 10px;font-size:10px}
.search-box { display:flex; align-items:center; gap:8px; width:min(320px,100%); background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:0 12px; }
.search-box input { border:0;background:transparent;padding:11px 2px;box-shadow:none; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.project-card { border:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 45%),var(--panel); border-radius:17px; padding:19px; min-width:0; }
.project-card-head { display:flex;justify-content:space-between;align-items:flex-start;gap:12px; }
.project-icon { width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:rgba(124,92,255,.12);color:var(--accent-2);border:1px solid rgba(124,92,255,.16);font-weight:900; }
.project-card h3 { margin:14px 0 4px;font-size:17px; }
.project-domain { color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.status-pill { padding:6px 9px;border-radius:999px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em; }
.status-online { color:#7cebb0;background:rgba(57,217,138,.09);border:1px solid rgba(57,217,138,.18); }
.status-offline { color:#ff9aab;background:rgba(255,102,125,.09);border:1px solid rgba(255,102,125,.18); }
.status-unknown { color:#d3b875;background:rgba(244,189,80,.08);border:1px solid rgba(244,189,80,.16); }
.project-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:17px 0; }
.project-stats div { background:#0a0d13;border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0; }
.project-stats small,.project-stats strong{display:block}.project-stats small{color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em}.project-stats strong{font-size:11px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-actions { display:flex;gap:7px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:15px; }
.card-menu { background:transparent;border:1px solid var(--line);border-radius:9px;width:32px;height:32px;cursor:pointer; }
.empty-state { border:1px dashed var(--line-strong); border-radius:18px; min-height:330px; display:grid; place-items:center; align-content:center; text-align:center; padding:30px; }
.empty-state span{font-size:34px;color:var(--accent-2)}.empty-state h3{margin:12px 0 6px}.empty-state p{color:var(--muted);margin:0 0 18px;max-width:420px}
.table-card { border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:auto; }
table { width:100%;border-collapse:collapse;min-width:840px; }
th { text-align:left;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.12em;padding:14px 16px;border-bottom:1px solid var(--line); }
td { padding:14px 16px;border-bottom:1px solid var(--line);font-size:11px;color:#d6dbe5;vertical-align:middle; }
tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:rgba(255,255,255,.018)}
.cell-title { display:flex;align-items:center;gap:10px; }.cell-icon{width:30px;height:30px;border-radius:9px;background:var(--panel-3);display:grid;place-items:center;color:var(--accent-2)}.cell-title strong{display:block;font-size:12px}.cell-title small{display:block;color:var(--muted);margin-top:2px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-actions{display:flex;justify-content:flex-end;gap:6px}.row-actions button{border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:6px 8px;font-size:9px;cursor:pointer}.row-actions button.danger{color:#ff9aab}.usage{min-width:110px}.usage small{display:block;color:var(--muted);font-size:9px;margin-top:3px}

.modal-backdrop { position:fixed;inset:0;background:rgba(2,4,7,.74);backdrop-filter:blur(10px);display:grid;place-items:center;padding:22px;z-index:100; }
.modal { width:min(660px,100%); max-height:calc(100vh - 44px); overflow:auto; background:#0d1017;border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--shadow);padding:23px; }
.modal-large{width:min(1050px,100%)}.modal-small{width:min(460px,100%)}
.modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}.modal-header h2{margin:5px 0 0;font-size:23px;letter-spacing:-.03em}.modal-close{border:0;background:transparent;font-size:25px;color:var(--muted);cursor:pointer}.modal-head-actions{display:flex;gap:8px;align-items:center}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid .full{grid-column:1/-1}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.confirm-text{color:var(--muted);line-height:1.6;margin:0 0 22px}.logs-view{height:min(64vh,650px);overflow:auto;margin:0;background:#06080c;border:1px solid var(--line);border-radius:13px;padding:15px;color:#bac5d8;font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.toast-root { position:fixed;right:20px;bottom:20px;display:grid;gap:9px;z-index:200; }
.toast { min-width:260px;max-width:390px;background:#151923;border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);font-size:12px;animation:toastIn .2s ease; }
.toast.error{border-color:rgba(255,102,125,.3)}.toast.success{border-color:rgba(57,217,138,.3)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.project-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.app-shell{display:block}.sidebar{height:auto;position:sticky;z-index:50;padding:13px;border-right:0;border-bottom:1px solid var(--line)}.sidebar .brand{display:none}.nav-list{display:flex;overflow:auto}.nav-item{white-space:nowrap;padding:9px 11px}.nav-item span{display:none}.sidebar-footer{display:none}.main-content{padding:0 15px 35px}.topbar{min-height:78px;margin-bottom:18px}.topbar h1{font-size:23px}.user-chip div{display:none}.hero-panel{align-items:flex-start;gap:18px;flex-direction:column}.metric-grid,.project-grid{grid-template-columns:1fr}.traffic-cards{grid-template-columns:repeat(2,1fr)}.section-toolbar{align-items:stretch;flex-direction:column}.search-box{width:100%}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.modal{padding:18px}}