:root{
  --bg:#061019;--panel:#0b1823;--panel2:#0d1d2a;--line:#203746;--line2:#28495d;
  --text:#eef7fc;--muted:#8298a8;--blue:#59afe7;--blue2:#2a86c4;
  --green:#45d28a;--red:#f26d6d;--amber:#efba5a;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;min-height:100vh;background:
 radial-gradient(circle at 85% 0%,rgba(49,138,199,.12),transparent 25rem),
 linear-gradient(180deg,#07121c 0%,#061019 100%)}
a{color:inherit;text-decoration:none}
.topbar{height:78px;border-bottom:1px solid #172b39;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4vw,72px);position:sticky;top:0;z-index:20;background:rgba(5,14,22,.92);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:90px;height:50px;object-fit:contain}
.brand span{display:grid}
.brand strong{font-size:12px;letter-spacing:.18em}
.brand small{font-size:11px;color:var(--muted);margin-top:2px}
.top-actions{display:flex;align-items:center;gap:13px;font-size:12px;font-weight:700}
.top-actions>a{padding:10px 13px;border:1px solid var(--line);border-radius:9px}
.live-pill{display:flex;align-items:center;gap:8px;color:#bcd0dc}
.live-pill i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(69,210,138,.1)}
.shell{width:min(1500px,calc(100% - 44px));margin:auto}
.hero{padding:72px 0 58px;display:grid;grid-template-columns:1.6fr .6fr;gap:40px;align-items:end}
.eyebrow{color:var(--blue);font-weight:900;letter-spacing:.17em;font-size:10px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(46px,6vw,88px);line-height:.94;letter-spacing:-.065em;margin:17px 0 25px}
h1 em{font-style:normal;color:var(--blue)}
.hero p{color:#9db0bd;max-width:730px;font-size:17px;line-height:1.7}
.hero-meta{padding:24px;border:1px solid var(--line);background:rgba(11,24,35,.62);border-radius:16px;display:grid;gap:7px}
.hero-meta span,.hero-meta small{color:var(--muted);font-size:11px}
.hero-meta strong{font-size:22px}
.section{padding:34px 0 52px;border-top:1px solid #152936}
.section-head,.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}
.section-head h2,.panel-head h2{font-size:32px;letter-spacing:-.035em;margin:7px 0 0}
.status-badge{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;padding:8px 10px;border-radius:999px;border:1px solid var(--line);color:#aebdc7}
.status-badge.online{color:#88eab7;border-color:rgba(69,210,138,.3);background:rgba(69,210,138,.08)}
.status-badge.offline{color:#ff9c9c;border-color:rgba(242,109,109,.3);background:rgba(242,109,109,.08)}
.status-badge.warning{color:#ffd48c;border-color:rgba(239,186,90,.3);background:rgba(239,186,90,.08)}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.metric,.service-card,.panel{background:linear-gradient(180deg,#0d1d2a,#0a1721);border:1px solid var(--line);border-radius:16px}
.metric{padding:23px}
.metric small,.service-card>small,.tb-grid small,.ets-hero small{font-size:9px;font-weight:900;letter-spacing:.15em;color:#718b9d}
.metric strong{font-size:34px;display:block;margin:12px 0 13px}
.metric>span{font-size:11px;color:var(--muted)}
.bar{height:7px;background:#152a38;border-radius:999px;overflow:hidden;margin-bottom:10px}
.bar i{height:100%;width:0;display:block;border-radius:inherit;background:linear-gradient(90deg,var(--blue2),var(--blue));transition:width .35s ease}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.service-card{padding:22px;min-height:205px}
.service-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}
.service-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#112838;border:1px solid #21465c;font-size:20px}
.service-card h3{font-size:20px;margin:8px 0 26px}
.service-stats{display:flex;gap:20px;color:#718a9a;font-size:10px}
.service-stats span{display:grid;gap:4px}
.service-stats b{font-size:13px;color:#d9e7ef}
.split-section{padding:34px 0 52px;border-top:1px solid #152936;display:grid;grid-template-columns:1.05fr .95fr;gap:12px}
.panel{padding:26px}
.mini-link{font-size:11px;font-weight:800;color:var(--blue)}
.ets-hero{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:22px 0;border-top:1px solid #183142;border-bottom:1px solid #183142}
.ets-hero strong{font-size:54px;display:block;margin-top:7px}
.ets-hero strong em{font-size:20px;color:#7891a2;font-style:normal;margin-left:5px}
.server-address{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;text-align:right}
.server-address span,.server-address small{font-size:10px;color:var(--muted)}
.server-address b{font-size:15px;margin:7px 0}
.players{display:flex;gap:8px;flex-wrap:wrap;padding-top:18px;min-height:50px}
.players span{padding:8px 10px;border-radius:999px;background:#102434;border:1px solid #1c3c50;font-size:10px;color:#a9bdc9}
.tb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tb-grid>div{padding:18px;background:#0a1721;border:1px solid #183142;border-radius:12px}
.tb-grid strong{display:block;font-size:27px;margin-top:8px}
.tb-foot{margin-top:14px;display:flex;justify-content:space-between;color:var(--muted);font-size:10px;gap:15px}
.roadmap p{max-width:900px;color:#91a7b5;line-height:1.75}
footer{border-top:1px solid #152936;width:min(1500px,calc(100% - 44px));margin:0 auto;padding:25px 0 36px;display:flex;justify-content:space-between;color:#657c8c;font-size:10px}
@media(max-width:1050px){
  .hero{grid-template-columns:1fr}.hero-meta{max-width:450px}
  .metrics-grid,.service-grid{grid-template-columns:1fr 1fr}
  .split-section{grid-template-columns:1fr}
}
@media(max-width:650px){
  .topbar{height:auto;min-height:74px;padding:10px 18px}.brand span{display:none}.brand img{width:78px}
  .top-actions{gap:8px}.live-pill span{display:none}.top-actions>a{padding:9px}
  .shell,footer{width:calc(100% - 28px)}
  .hero{padding-top:48px}.metrics-grid,.service-grid{grid-template-columns:1fr}
  .ets-hero{grid-template-columns:1fr}.server-address{align-items:flex-start;text-align:left}
  .tb-grid{grid-template-columns:1fr 1fr}.tb-foot{flex-direction:column}
}


/* Control Panel V2.0 */
button{font:inherit}
.top-button{padding:10px 13px;border:1px solid var(--line);border-radius:9px;background:#0b1823;color:var(--text);font-size:11px;font-weight:800;cursor:pointer}
.top-button:hover{border-color:var(--line2);background:#102231}
.website-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.website-card{background:linear-gradient(180deg,#0d1d2a,#0a1721);border:1px solid var(--line);border-radius:15px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.website-card>div:first-child{display:flex;align-items:center;gap:13px}
.website-card small{font-size:9px;letter-spacing:.14em;color:#718b9d;font-weight:900}
.website-card h3{font-size:18px;margin:4px 0 0}
.website-meta{display:flex;gap:15px;align-items:center;font-size:11px;color:var(--muted)}
.website-meta b{color:#dceaf2}
.status-dot{width:10px;height:10px;border-radius:50%;background:#596b76;box-shadow:0 0 0 5px rgba(89,107,118,.08)}
.status-dot.online{background:var(--green);box-shadow:0 0 0 5px rgba(69,210,138,.1)}
.status-dot.offline{background:var(--red);box-shadow:0 0 0 5px rgba(242,109,109,.1)}
.safe-note{font-size:10px;color:#6f8b9e;border:1px solid var(--line);padding:8px 10px;border-radius:999px}
.controls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.control-card{display:grid;grid-template-columns:auto 1fr;gap:14px;background:linear-gradient(180deg,#0d1d2a,#0a1721);border:1px solid var(--line);border-radius:16px;padding:20px;align-items:start}
.control-card>span{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#112838;border:1px solid #21465c;font-size:19px}
.control-card small{font-size:9px;letter-spacing:.14em;color:#718b9d;font-weight:900}
.control-card h3{font-size:18px;margin:5px 0 7px}
.control-card p{color:#8298a8;font-size:11px;line-height:1.55;margin:0}
.control-card code{color:#b8d9ec;background:#102330;padding:2px 4px;border-radius:4px}
.action-btn{grid-column:1/-1;margin-top:4px;border:1px solid rgba(89,175,231,.38);background:rgba(38,126,183,.14);color:#def2ff;border-radius:9px;padding:11px 13px;font-size:11px;font-weight:900;cursor:pointer;transition:.18s}
.action-btn:hover{background:rgba(38,126,183,.25);border-color:rgba(89,175,231,.7)}
.action-btn:disabled{opacity:.5;cursor:wait}
.action-btn.danger-soft{border-color:rgba(239,186,90,.32);background:rgba(239,186,90,.08);color:#ffe0a6}
.log-head{align-items:center}
.log-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.log-tabs{display:flex;gap:6px}
.log-tab{border:1px solid var(--line);background:#091621;color:#8298a8;padding:8px 10px;border-radius:8px;font-size:10px;font-weight:800;cursor:pointer}
.log-tab.active{color:#e8f7ff;border-color:#2a698e;background:#10283a}
.log-panel{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#050b10}
.terminal-bar{height:38px;background:#0c1821;border-bottom:1px solid #183041;display:flex;align-items:center;gap:7px;padding:0 13px;color:#657f90;font-size:10px}
.terminal-bar i{width:8px;height:8px;border-radius:50%;background:#334b5a}
.terminal-bar i:nth-child(1){background:#e46f6f}.terminal-bar i:nth-child(2){background:#e1b359}.terminal-bar i:nth-child(3){background:#4bc082}
.terminal-bar span{margin-left:7px}
.log-panel pre{margin:0;padding:17px;min-height:300px;max-height:440px;overflow:auto;color:#b9cbd6;font:11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.log-note{color:#637d8d;font-size:10px;margin-top:10px}
.toast{position:fixed;right:24px;bottom:24px;z-index:99;max-width:380px;padding:13px 16px;border-radius:11px;border:1px solid var(--line);background:#0c1b27;color:#eaf7ff;font-size:12px;font-weight:750;box-shadow:0 14px 50px rgba(0,0,0,.35);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:none}
.toast.success{border-color:rgba(69,210,138,.32)}
.toast.error{border-color:rgba(242,109,109,.4);color:#ffd6d6}
@media(max-width:1050px){
  .controls-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .website-grid{grid-template-columns:1fr}
  .website-card{align-items:flex-start}
  .website-meta{flex-direction:column;align-items:flex-end;gap:4px}
  .log-actions{justify-content:flex-start}
  .log-tabs{width:100%;overflow:auto}
  .safe-note{display:none}
}


/* Control Panel V3.0 — historie, uptime, alerty */
.history-head{align-items:center}
.range-tabs{display:flex;gap:6px;flex-wrap:wrap}
.range-tab{border:1px solid var(--line);background:#091621;color:#8298a8;padding:9px 11px;border-radius:8px;font-size:10px;font-weight:850;cursor:pointer}
.range-tab.active{color:#e8f7ff;border-color:#2a698e;background:#10283a}
.history-layout{display:grid;grid-template-columns:1.55fr .65fr;gap:12px}
.chart-panel{min-width:0}
.chart-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.chart-title small{font-size:9px;font-weight:900;letter-spacing:.15em;color:#718b9d}
.chart-title h3{font-size:21px;margin:5px 0 0}
.chart-legend{display:flex;gap:14px;color:#849baa;font-size:10px}
.chart-legend span{display:flex;align-items:center;gap:6px}
.chart-legend i{width:18px;height:2px;display:block;border-radius:3px}
.legend-cpu{background:#498fdb}.legend-ram{background:#72cdff}
.canvas-wrap{height:290px;position:relative}
.canvas-wrap canvas{width:100%;height:100%;display:block}
.chart-empty{position:absolute;inset:0;display:none;place-items:center;color:#6f8999;font-size:12px;text-align:center;padding:30px;pointer-events:none}
.chart-empty.visible{display:grid}
.chart-foot{display:flex;justify-content:space-between;gap:12px;color:#647f90;font-size:9px;margin-top:7px}
.compact-head{margin-bottom:17px}
.compact-head h2{font-size:24px}
.uptime-grid{display:grid;gap:13px}
.uptime-grid>div{padding:14px 0;border-bottom:1px solid #173040}
.uptime-grid>div:last-child{border-bottom:0}
.uptime-grid small{font-size:9px;letter-spacing:.14em;color:#718b9d;font-weight:900}
.uptime-grid strong{font-size:26px;display:block;margin:5px 0 8px}
.uptime-bar{height:6px;border-radius:999px;background:#142937;overflow:hidden;display:block}
.uptime-bar i{display:block;height:100%;width:0;background:#45d28a;border-radius:inherit;transition:width .35s}
.uptime-bar i.warn{background:#efba5a}.uptime-bar i.bad{background:#f26d6d}
.history-bottom{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px;margin-top:12px}
.alerts-panel p{color:#91a7b5;font-size:12px;line-height:1.65}
.alert-features{display:flex;gap:7px;flex-wrap:wrap;margin:17px 0}
.alert-features span{padding:7px 9px;border:1px solid var(--line);background:#0a1721;border-radius:999px;color:#9ab0bd;font-size:9px}
.incident-list{display:grid;gap:8px;max-height:260px;overflow:auto}
.incident-row{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;padding:11px 12px;background:#091620;border:1px solid #183142;border-radius:10px}
.incident-row>i{width:9px;height:9px;border-radius:50%;margin-top:4px;background:#f26d6d;box-shadow:0 0 0 5px rgba(242,109,109,.08)}
.incident-row.recovery>i{background:#45d28a;box-shadow:0 0 0 5px rgba(69,210,138,.08)}
.incident-row strong{font-size:11px;display:block}
.incident-row span{font-size:9px;color:#718998;display:block;margin-top:3px}
.incident-empty{color:#6f8797;font-size:11px;padding:20px 0}
@media(max-width:1050px){
  .history-layout,.history-bottom{grid-template-columns:1fr}
}
@media(max-width:650px){
  .history-head{align-items:flex-start;flex-direction:column}
  .range-tabs{width:100%}.range-tab{flex:1}
  .canvas-wrap{height:240px}
}


/* Control Panel V3.1 — traffic + backups */
.traffic-head{align-items:center}
.traffic-range-tabs{display:flex;gap:6px;flex-wrap:wrap}
.traffic-range-tab{border:1px solid var(--line);background:#091621;color:#8298a8;padding:9px 11px;border-radius:8px;font-size:10px;font-weight:850;cursor:pointer}
.traffic-range-tab.active{color:#e8f7ff;border-color:#2a698e;background:#10283a}
.traffic-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.traffic-chart-panel{min-width:0}
.traffic-canvas-wrap{height:270px;position:relative}
.traffic-canvas-wrap canvas{width:100%;height:100%;display:block}
.legend-requests{background:#59afe7}
.legend-pageviews{background:#45d28a}
.privacy-note{margin-top:13px;color:#6f8999;font-size:10px;border-top:1px solid #173040;padding-top:12px}
.backup-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:12px}
.backup-main{display:grid;grid-template-columns:auto 1fr;gap:17px;align-items:start}
.backup-icon{width:54px;height:54px;border:1px solid #24506a;background:#10293a;border-radius:14px;display:grid;place-items:center;font-size:24px}
.backup-main small,.backup-security small{font-size:9px;letter-spacing:.14em;color:#718b9d;font-weight:900}
.backup-main h3,.backup-security h3{font-size:21px;margin:5px 0 8px}
.backup-main p,.backup-security p{color:#859caa;font-size:11px;line-height:1.6}
.backup-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.backup-stats>div{border:1px solid #183142;background:#091720;border-radius:11px;padding:13px}
.backup-stats strong{display:block;font-size:14px;margin-top:5px}
.backup-security{display:flex;flex-direction:column}
.security-list{display:grid;gap:8px;margin-top:9px}
.security-list span{font-size:10px;color:#9ab0bd;padding:8px 10px;border:1px solid #183142;background:#091720;border-radius:8px}
@media(max-width:1050px){
  .traffic-metrics{grid-template-columns:1fr 1fr}
  .backup-layout{grid-template-columns:1fr}
}
@media(max-width:650px){
  .traffic-head{align-items:flex-start;flex-direction:column}
  .traffic-range-tabs{width:100%}.traffic-range-tab{flex:1}
  .traffic-metrics{grid-template-columns:1fr 1fr}
  .traffic-canvas-wrap{height:230px}
  .backup-main{grid-template-columns:1fr}
  .backup-stats{grid-template-columns:1fr}
}


/* Control Panel V3.2 — Backup Manager */
.backup-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.backup-manager-layout{display:grid;grid-template-columns:1.45fr .55fr;gap:12px}
.backup-list-panel{min-width:0}
.mini-action{width:auto!important;padding:9px 12px!important;white-space:nowrap}
.backup-table-wrap{overflow-x:auto}
.backup-table{width:100%;border-collapse:collapse;min-width:680px}
.backup-table th{text-align:left;font-size:8px;letter-spacing:.15em;color:#6f8999;padding:0 10px 10px;border-bottom:1px solid #183142}
.backup-table td{font-size:10px;color:#a2b5c0;padding:12px 10px;border-bottom:1px solid #142a38;vertical-align:middle}
.backup-table tr:last-child td{border-bottom:0}
.backup-name{display:flex;align-items:center;gap:9px}
.backup-name-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#10293a;border:1px solid #24506a}
.backup-name strong{display:block;color:#e7f2f8;font-size:10px}
.backup-name span{display:block;color:#607b8c;font-size:8px;margin-top:2px}
.latest-chip{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:rgba(69,210,138,.09);border:1px solid rgba(69,210,138,.35);color:#69dfa2;font-size:8px;font-weight:900;letter-spacing:.08em}
.delete-backup-btn{border:1px solid rgba(242,109,109,.35);background:rgba(242,109,109,.06);color:#f58a8a;border-radius:7px;padding:7px 9px;font-size:9px;font-weight:850;cursor:pointer}
.delete-backup-btn:hover{background:rgba(242,109,109,.12)}
.delete-backup-btn:disabled{opacity:.35;cursor:not-allowed}
.backup-empty{text-align:center!important;color:#6e8797!important;padding:28px!important}
.backup-space-card{margin-top:auto;padding:14px;border:1px solid #183142;background:#091720;border-radius:11px}
.backup-space-card strong{font-size:22px;display:block;margin:5px 0 2px}
.backup-space-card>span{font-size:9px;color:#718998}
.backup-space-bar{height:6px;background:#142937;border-radius:999px;overflow:hidden;margin-top:10px}
.backup-space-bar i{height:100%;display:block;width:0;background:#45d28a;border-radius:999px;transition:width .3s}
.backup-space-bar i.warn{background:#efba5a}
.backup-space-bar i.bad{background:#f26d6d}
@media(max-width:1050px){
  .backup-summary-grid{grid-template-columns:1fr 1fr}
  .backup-manager-layout{grid-template-columns:1fr}
}
@media(max-width:650px){
  .backup-summary-grid{grid-template-columns:1fr 1fr}
}


/* Control Panel V3.3 — DNS Monitoring */
.dns-section-head{align-items:center}
.dns-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dns-check-btn{width:auto!important;padding:9px 12px!important;white-space:nowrap}
.dns-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.dns-panel{min-width:0}
.dns-table-wrap{overflow-x:auto}
.dns-table{width:100%;border-collapse:collapse;min-width:820px}
.dns-table th{text-align:left;font-size:8px;letter-spacing:.14em;color:#718998;padding:0 12px 11px;border-bottom:1px solid #183142}
.dns-table td{padding:13px 12px;border-bottom:1px solid #142a38;vertical-align:middle}
.dns-table tr:last-child td{border-bottom:0}
.dns-domain strong{display:block;font-size:11px;color:#e9f4fa}
.dns-domain span{font-size:8px;color:#627d8d;display:block;margin-top:3px}
.dns-cell{display:flex;align-items:flex-start;gap:9px}
.dns-cell-dot{width:9px;height:9px;border-radius:50%;margin-top:4px;flex:0 0 auto}
.dns-cell.ok .dns-cell-dot{background:#45d28a;box-shadow:0 0 0 5px rgba(69,210,138,.08)}
.dns-cell.warn .dns-cell-dot{background:#efba5a;box-shadow:0 0 0 5px rgba(239,186,90,.08)}
.dns-cell.bad .dns-cell-dot{background:#f26d6d;box-shadow:0 0 0 5px rgba(242,109,109,.08)}
.dns-cell strong{display:block;font-size:10px;color:#dcebf3}
.dns-cell small{display:block;font-size:8px;color:#688292;margin-top:3px}
.dns-explain{margin-top:14px;padding:12px 13px;border:1px solid #183142;background:#091720;border-radius:10px;color:#849caa;font-size:10px;line-height:1.6}
.dns-explain.ok{border-color:rgba(69,210,138,.28);color:#8ecdad}
.dns-explain.warn{border-color:rgba(239,186,90,.28);color:#d5b778}
.dns-explain.bad{border-color:rgba(242,109,109,.28);color:#d79595}
.dns-empty{text-align:center!important;color:#6e8797!important;padding:28px!important}
@media(max-width:1050px){.dns-summary-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){
  .dns-section-head{align-items:flex-start;flex-direction:column}
  .dns-head-actions{width:100%}
  .dns-check-btn{flex:1}
  .dns-summary-grid{grid-template-columns:1fr 1fr}
}