:root { --bg:#060812; --panel:#0c101e; --panel-2:#101625; --line:rgba(255,255,255,.1); --text:#f8fbff; --muted:rgba(248,251,255,.57); --soft:rgba(248,251,255,.34); --cyan:#31d7ff; --green:#77f2b1; --pink:#ff5fa2; }
* { box-sizing:border-box; margin:0; padding:0; }
body { min-height:100vh; overflow-x:hidden; color:var(--text); font-family:"Inter",sans-serif; background:radial-gradient(circle at 8% 10%,rgba(49,215,255,.11),transparent 24%),linear-gradient(180deg,#060812,#080b15); }
body::before { content:""; position:fixed; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(#000,transparent 88%); }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
.panel-brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-size:23px; font-weight:900; letter-spacing:-.8px; }
.panel-brand > span:last-child span { color:var(--cyan); }
.brand-mark { width:34px; height:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:5px; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(255,255,255,.06); }
.brand-mark i { border-radius:2px; background:var(--cyan); }.brand-mark i:nth-child(2),.brand-mark i:nth-child(6){background:var(--green)}.brand-mark i:nth-child(5),.brand-mark i:nth-child(9){background:var(--pink)}

.login-page { display:grid; place-items:center; padding:25px; }
.login-shell { width:min(430px,100%); }
.login-shell > .panel-brand { display:flex; width:max-content; margin:0 auto 25px; }
.login-card { padding:34px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); box-shadow:0 35px 100px rgba(0,0,0,.42); backdrop-filter:blur(15px); }
.login-heading > span,.card-heading > div > span,.dashboard-header > div > span { display:block; margin-bottom:9px; color:var(--green); font-size:9px; font-weight:900; letter-spacing:1.3px; text-transform:uppercase; }
.login-heading h1 { font-family:"Space Grotesk"; font-size:35px; letter-spacing:-1.5px; }
.login-heading p { margin:10px 0 25px; color:var(--muted); font-size:13px; line-height:1.6; }
label { display:block; color:var(--muted); font-size:11px; font-weight:800; }
input { width:100%; min-height:45px; margin-top:8px; padding:0 13px; border:1px solid var(--line); border-radius:7px; outline:0; background:rgba(0,0,0,.22); color:var(--text); transition:border-color .2s,box-shadow .2s; }
input:focus { border-color:rgba(49,215,255,.6); box-shadow:0 0 0 3px rgba(49,215,255,.08); }
.login-card form { display:grid; gap:17px; }
.primary-button { min-height:44px; padding:0 17px; border:0; border-radius:7px; background:linear-gradient(135deg,var(--cyan),var(--green)); color:#051016; font-size:12px; font-weight:900; }
.login-card .primary-button { width:100%; display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.back-link { display:block; width:max-content; margin:20px auto 0; color:var(--muted); text-decoration:none; font-size:11px; font-weight:800; }
.alert { margin-bottom:20px; padding:13px 15px; border:1px solid; border-radius:7px; font-size:12px; font-weight:700; line-height:1.5; }
.alert.error { border-color:rgba(255,95,162,.3); background:rgba(255,95,162,.09); color:#ffb0cf; }
.alert.success { border-color:rgba(119,242,177,.28); background:rgba(119,242,177,.08); color:#b4ffd4; }

.dashboard-shell { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:30; width:245px; display:flex; flex-direction:column; padding:25px 18px 18px; border-right:1px solid var(--line); background:rgba(7,10,19,.92); backdrop-filter:blur(20px); }
.sidebar .panel-brand { padding:0 8px; }
.panel-label { margin:35px 8px 10px; color:var(--soft); font-size:8px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; }
.sidebar nav { display:grid; gap:5px; }
.sidebar nav a { display:flex; align-items:center; gap:11px; min-height:45px; padding:0 12px; border:1px solid transparent; border-radius:7px; color:var(--muted); text-decoration:none; font-size:12px; font-weight:800; }
.sidebar nav a:hover,.sidebar nav a.active { border-color:var(--line); background:rgba(255,255,255,.055); color:var(--text); }
.sidebar nav a.active { border-color:rgba(49,215,255,.18); background:rgba(49,215,255,.075); }
.nav-icon { width:20px; color:var(--cyan); text-align:center; }
.sidebar-bottom { display:flex; align-items:center; gap:10px; margin-top:auto; padding:15px 8px 3px; border-top:1px solid var(--line); }
.admin-mini { display:flex; align-items:center; gap:9px; margin-right:auto; }
.admin-mini > span { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--green)); color:#061018; font-size:11px; font-weight:900; }
.admin-mini strong,.admin-mini small { display:block; }.admin-mini strong{font-size:10px}.admin-mini small{margin-top:2px;color:var(--soft);font-size:8px}
.logout-button { width:30px; height:30px; border:1px solid var(--line); border-radius:6px; background:rgba(255,255,255,.04); color:var(--muted); }

.dashboard-main { width:calc(100% - 245px); min-height:100vh; margin-left:245px; padding:38px clamp(24px,4vw,58px) 60px; }
.dashboard-header { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:30px; }
.dashboard-header h1 { font-family:"Space Grotesk"; font-size:32px; letter-spacing:-1.2px; }
.header-actions { display:flex; align-items:center; gap:9px; }
.header-actions form { display:flex; }
.gear-button { min-height:44px; display:flex; align-items:center; gap:9px; padding:0 14px; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.045); color:var(--muted); font-size:11px; font-weight:800; }
.gear-button > span:first-child { color:var(--cyan); font-size:17px; transition:transform .35s ease; }.gear-button:hover>span:first-child{transform:rotate(90deg)}
.sidebar-toggle { display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.05); }

.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.summary-grid article { padding:20px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.035); }
.summary-grid article > span { display:block; margin-bottom:14px; color:var(--soft); font-size:9px; font-weight:900; letter-spacing:.8px; text-transform:uppercase; }
.summary-grid strong { display:block; margin-bottom:5px; font-family:"Space Grotesk"; font-size:28px; }
.summary-grid small { color:var(--muted); font-size:9px; }.summary-grid small i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--green);box-shadow:0 0 9px rgba(119,242,177,.5)}
.summary-grid .status-text { color:var(--green); }.summary-grid .version-text{overflow:hidden;color:var(--cyan);font-size:16px;text-overflow:ellipsis;white-space:nowrap}

.editor-card,.portfolio-card { margin-top:18px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.035); overflow:hidden; }
.editor-card[hidden] { display:none; }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:21px 23px; border-bottom:1px solid var(--line); }
.card-heading h2 { font-size:17px; }
.editor-close { width:31px;height:31px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04);font-size:19px; }
.count-badge { padding:7px 9px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:9px;font-weight:900; }
.domain-form { display:grid;grid-template-columns:1.5fr .65fr .8fr auto;gap:12px;align-items:end;padding:22px; }
.domain-form .primary-button { min-width:130px; }
.domain-list { display:grid; }
.domain-row { display:grid;grid-template-columns:40px minmax(0,1fr) 34px;gap:12px;align-items:end;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.065); }
.domain-row:last-child { border:0; }
.row-index { height:43px;display:grid;place-items:center;color:var(--soft);font-family:monospace;font-size:10px; }
.row-form { display:grid;grid-template-columns:1.5fr .65fr .8fr 75px;gap:10px;align-items:end; }
.row-form label span { display:block; }
.row-form input { min-height:42px; }
.save-button { min-height:42px;border:1px solid rgba(49,215,255,.25);border-radius:7px;background:rgba(49,215,255,.08);color:var(--cyan);font-size:10px;font-weight:900; }
.delete-button { width:34px;height:42px;border:1px solid rgba(255,95,162,.19);border-radius:7px;background:rgba(255,95,162,.07);color:#ff8eba;font-size:18px; }
.save-button:hover{background:rgba(49,215,255,.15)}.delete-button:hover{background:rgba(255,95,162,.14)}
.empty-state { padding:65px 25px;text-align:center; }.empty-state>span{display:block;margin-bottom:13px;color:var(--cyan);font-size:35px}.empty-state h3{margin-bottom:8px}.empty-state p{color:var(--muted);font-size:12px}

@media(max-width:1000px){
    .domain-form{grid-template-columns:1fr 1fr}.domain-form .primary-button{align-self:end}
    .row-form{grid-template-columns:1fr 1fr}.row-form label:first-of-type{grid-column:1/-1}
    .row-form .save-button{align-self:end}
}
@media(max-width:760px){
    .sidebar{transform:translateX(-100%);transition:transform .25s ease;box-shadow:20px 0 60px rgba(0,0,0,.35)}.sidebar.open{transform:none}
    .dashboard-main{width:100%;margin-left:0;padding:25px 16px 45px}.sidebar-toggle{display:block}.dashboard-header{align-items:flex-start;flex-wrap:wrap}.dashboard-header>div:nth-child(2){margin-right:auto}.dashboard-header h1{font-size:25px}.header-actions{width:100%;justify-content:flex-end}
    .summary-grid{grid-template-columns:1fr}.domain-row{grid-template-columns:25px minmax(0,1fr) 34px;padding:15px 10px;gap:6px}.row-form{grid-template-columns:1fr}.row-form label:first-of-type{grid-column:auto}.row-index{font-size:8px}.gear-text{display:none}.domain-form{grid-template-columns:1fr}.card-heading{padding:18px}.portfolio-card{overflow:visible}
}
@media(max-width:430px){.login-card{padding:27px 20px}.header-actions .primary-button{padding-inline:12px}.dashboard-header{gap:14px}}