:root {
  color-scheme: dark;
  --bg: #0a0e15; --sidebar: #0e141e; --panel: #141c28; --panel-2: #101721;
  --border: #273346; --text: #f4f7fb; --muted: #91a0b5; --accent: #7ca8ff;
  --success: #55d98a; --danger: #ff7878; --warning: #f2c969; --shadow: 0 22px 60px rgba(0,0,0,.26);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: radial-gradient(circle at 80% 0, rgba(92,133,218,.14), transparent 30%), var(--bg); }
button,input { font: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; border-right: 1px solid var(--border); background: rgba(14,20,30,.95); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 28px; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:#07101d; background:var(--accent); font-weight:900; }
.brand strong,.brand small { display:block; } .brand small{ color:var(--muted); margin-top:3px; }
.nav { display:grid; gap:8px; }
.nav-link { padding:12px 14px; border:1px solid transparent; border-radius:12px; color:var(--muted); background:transparent; text-align:left; cursor:pointer; font-weight:750; }
.nav-link:hover,.nav-link.active { color:var(--text); border-color:var(--border); background:#151e2b; }
.sidebar-footer { margin-top:auto; color:var(--muted); font-size:12px; line-height:1.5; }
.server-indicator { display:flex; align-items:center; gap:9px; margin-bottom:12px; color:#c8d2df; }
.indicator-dot { width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 15px var(--success); }
.server-indicator.offline .indicator-dot { background:var(--danger); box-shadow:0 0 15px var(--danger); }
.main-content { min-width:0; padding:36px clamp(20px,4vw,54px) 70px; }
.topbar { margin-bottom:22px; } .eyebrow { margin:0 0 7px; color:var(--accent); font-size:12px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(34px,5vw,54px); letter-spacing:-.045em; }
.warning { margin-bottom:26px; padding:14px 16px; border:1px solid rgba(242,201,105,.35); border-radius:14px; color:#ecdba8; background:rgba(242,201,105,.08); line-height:1.5; }
.page-section { display:none; } .page-section.active { display:block; }
.hero-card { padding:34px; border:1px solid var(--border); border-radius:25px; background:linear-gradient(135deg,rgba(124,168,255,.13),rgba(85,217,138,.07)),var(--panel); box-shadow:var(--shadow); display:flex; justify-content:space-between; gap:30px; align-items:center; }
.hero-card h2 { margin:0; max-width:700px; font-size:clamp(28px,4vw,44px); letter-spacing:-.04em; }
.hero-card p:last-child { color:var(--muted); max-width:700px; line-height:1.6; }
.hero-stats { display:flex; gap:12px; flex-wrap:wrap; }
.hero-stats div { min-width:112px; padding:17px; border:1px solid var(--border); border-radius:16px; background:rgba(8,13,20,.35); }
.hero-stats strong,.hero-stats span { display:block; } .hero-stats strong{font-size:27px}.hero-stats span{color:var(--muted);font-size:12px;margin-top:4px}
.dashboard-grid { margin-top:20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.shortcut { padding:24px; border:1px solid var(--border); border-radius:18px; color:var(--text); background:var(--panel); text-align:left; cursor:pointer; box-shadow:var(--shadow); }
.shortcut span,.shortcut small { display:block; } .shortcut span{font-weight:850;font-size:20px}.shortcut small{color:var(--muted);margin-top:8px;line-height:1.45}
.section-head { margin-bottom:20px; } .section-head h2{margin:0;font-size:30px}.section-head p{margin:7px 0 0;color:var(--muted)}
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
.cards.two-column{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.one-column{grid-template-columns:minmax(0,760px)}
.card { min-width:0; padding:25px; border:1px solid var(--border); border-radius:22px; background:rgba(20,28,40,.94); box-shadow:var(--shadow); }
.card-badge { display:grid; place-items:center; width:36px; height:36px; margin-bottom:17px; border-radius:11px; color:#09111d; background:var(--accent); font-weight:900; }
.card h3 { margin:0; font-size:22px; letter-spacing:-.025em; }.card>p{min-height:50px;margin:9px 0 20px;color:var(--muted);line-height:1.5}
form { display:grid; gap:14px; } label { display:grid; gap:8px; color:#d8e0ea; font-size:14px; font-weight:700; }
input { width:100%; min-width:0; height:46px; padding:0 13px; border:1px solid #344156; border-radius:12px; outline:none; color:var(--text); background:var(--panel-2); }
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,168,255,.14)}
input[type=file]{height:auto;padding:11px}.password-field{position:relative}.password-field input{padding-right:90px}
.toggle-password{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:0;padding:7px 9px;color:var(--muted);background:transparent;cursor:pointer}
.primary-button,.danger-button{min-height:48px;margin-top:4px;border:0;border-radius:13px;font-weight:850;cursor:pointer}.primary-button{color:#08111f;background:var(--accent)}.danger-button{color:#210a0a;background:var(--danger)}
button:hover:not(:disabled){filter:brightness(1.08)}button:disabled{opacity:.58;cursor:wait}.field-note{color:var(--muted);font-size:12px;font-weight:400}
.status{margin-bottom:17px;padding:14px;border-radius:14px;font-size:14px;line-height:1.45}.status.loading{border:1px solid rgba(124,168,255,.35);color:#cadbff;background:rgba(124,168,255,.09)}.status.success{border:1px solid rgba(85,217,138,.34);color:#bff4d2;background:rgba(85,217,138,.09)}.status.error{border:1px solid rgba(255,120,120,.38);color:#ffc4c4;background:rgba(255,120,120,.09)}.status-title{font-weight:850;margin-bottom:8px}.status ul{margin:0;padding-left:19px}.status li+li{margin-top:5px}
.credentials{margin:0 0 18px;padding:14px;border:1px solid var(--border);border-radius:14px;background:#0e151f}.credentials>div{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.credentials>div:last-of-type{border-bottom:0}.credentials span{color:var(--muted)}.credentials button{border:1px solid var(--border);border-radius:9px;padding:7px 9px;color:var(--text);background:#172130;cursor:pointer}.credentials details{margin-top:12px}.credentials summary{cursor:pointer;color:var(--accent)}.credentials pre{max-height:360px;overflow:auto;white-space:pre-wrap;color:#c8d2df;background:#090e15;padding:12px;border-radius:10px;font-size:12px}
.hidden{display:none!important}
@media(max-width:1050px){.cards,.dashboard-grid{grid-template-columns:1fr 1fr}.hero-card{align-items:flex-start;flex-direction:column}}
@media(max-width:780px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border)}.nav{grid-template-columns:repeat(4,1fr)}.sidebar-footer{display:none}.main-content{padding-top:25px}.cards,.cards.two-column,.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:520px){.nav{grid-template-columns:1fr 1fr}.main-content{padding-left:14px;padding-right:14px}.hero-card,.card{padding:20px}.credentials>div{grid-template-columns:1fr}.hero-stats{width:100%}.hero-stats div{flex:1}}