:root {
  color-scheme: dark;
  --bg: #080c12;
  --panel: rgba(17, 25, 38, .88);
  --panel-hover: #162131;
  --line: rgba(148, 163, 184, .14);
  --line-strong: rgba(148, 163, 184, .24);
  --text: #f3f6fa;
  --muted: #8997aa;
  --muted-light: #b7c1cf;
  --accent: #4fd1c5;
  --accent-strong: #2bb7ae;
  --accent-soft: rgba(79, 209, 197, .12);
  --danger: #fb7185;
  --success: #34d399;
  --shadow: 0 24px 70px rgba(0, 0, 0, .26);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); font: 15px/1.55 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; background: radial-gradient(circle at 82% -20%, rgba(79,209,197,.08), transparent 34rem), radial-gradient(circle at -10% 40%, rgba(139,124,246,.055), transparent 30rem), var(--bg); }
button,input,select,textarea { font: inherit; }
a { color: #9ce7e1; text-decoration: none; } a:hover { color: #c9faf6; }
a:focus-visible,button:focus-visible { outline: 3px solid rgba(79,209,197,.28); outline-offset: 3px; }
h1,h2,h3,p { margin-top: 0; } h1,h2,h3 { color: var(--text); line-height: 1.15; letter-spacing: -.025em; }
h1 { margin-bottom: .45rem; font-size: clamp(2rem,3vw,2.65rem); font-weight: 720; } h2 { margin-bottom: .4rem; font-size: 1.16rem; font-weight: 680; }
.muted { color: var(--muted); }
.eyebrow { display: block; margin-bottom: .55rem; color: var(--accent); font-size: .7rem; font-weight: 780; letter-spacing: .14em; text-transform: uppercase; }
[hidden] { display: none !important; }

.topbar { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid var(--line); background: rgba(8,12,18,.82); box-shadow: 0 8px 30px rgba(0,0,0,.12); backdrop-filter: blur(18px); }
.topbar-inner { display: flex; width: min(1320px,calc(100% - 40px)); min-height: 76px; margin: auto; align-items: center; gap: 2.5rem; }
.brand { display: flex; min-width: 184px; align-items: center; gap: .8rem; color: var(--text); } .brand:hover { color: var(--text); }
.brand-mark { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(79,209,197,.35); border-radius: 12px; background: linear-gradient(145deg,rgba(79,209,197,.25),rgba(79,209,197,.06)); color: #baf7f2; box-shadow: inset 0 1px rgba(255,255,255,.12),0 8px 26px rgba(79,209,197,.1); font-weight: 800; }
.brand-mark.large { width: 48px; height: 48px; border-radius: 15px; font-size: 1.15rem; }
.brand-copy,.login-brand>span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong,.login-brand strong { font-size: .98rem; letter-spacing: -.01em; } .brand-copy small,.login-brand small { margin-top: .18rem; color: var(--muted); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.primary-nav { display: flex; align-self: stretch; gap: .35rem; }
.primary-nav a { position: relative; display: flex; padding: 0 1rem; align-items: center; gap: .55rem; color: var(--muted-light); font-size: .91rem; font-weight: 620; }
.primary-nav a::after { position: absolute; right: .8rem; bottom: -1px; left: .8rem; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); content: ""; opacity: 0; transform: scaleX(.35); transition: .2s ease; }
.primary-nav a:hover,.primary-nav a.active { color: var(--text); } .primary-nav a.active::after { opacity: 1; transform: scaleX(1); }
.nav-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .38; } .primary-nav a.active .nav-dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); opacity: 1; }
.user-menu { display: flex; margin-left: auto; align-items: center; gap: .7rem; }
.user-avatar { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: #172232; color: #d7e2ef; font-size: .78rem; font-weight: 750; }
.user-copy { display: flex; min-width: 100px; flex-direction: column; line-height: 1.25; } .user-copy strong { font-size: .8rem; font-weight: 650; } .user-copy small { color: var(--muted); font-size: .68rem; }
.icon-button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button:hover { border-color: var(--line-strong); background: var(--panel-hover); color: var(--text); } .logout-button { transform: rotate(45deg); }
.container { width: min(1240px,calc(100% - 40px)); margin: 0 auto; padding: 3.2rem 0 5rem; } .container-wide { width: min(1480px,calc(100% - 40px)); } .auth-shell .container { width: 100%; max-width: none; margin: 0; padding: 0; }

.page-heading { display: flex; margin-bottom: 2rem; align-items: flex-end; justify-content: space-between; gap: 1.5rem; } .page-heading p { max-width: 650px; margin-bottom: 0; font-size: .98rem; }
.card { margin-bottom: 1.15rem; padding: 1.45rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,rgba(18,27,41,.94),rgba(14,21,32,.9)); box-shadow: 0 1px 0 rgba(255,255,255,.025),var(--shadow); }
.card-heading { display: flex; margin-bottom: 1.2rem; align-items: center; justify-content: space-between; gap: 1rem; } .card-heading h2,.table-title h2 { margin: 0; }
.soft-label { padding: .35rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted-light); background: rgba(255,255,255,.025); font-size: .7rem; font-weight: 650; }
button,.button { appearance: none; display: inline-flex; min-height: 42px; padding: .68rem 1rem; align-items: center; justify-content: center; gap: .45rem; border: 1px solid var(--accent-strong); border-radius: 11px; background: linear-gradient(180deg,#4fd1c5,#36bdb4); color: #071311; box-shadow: 0 8px 22px rgba(43,183,174,.15),inset 0 1px rgba(255,255,255,.25); font-weight: 720; cursor: pointer; transition: transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
button:hover,.button:hover { color: #071311; box-shadow: 0 11px 30px rgba(43,183,174,.23),inset 0 1px rgba(255,255,255,.25); transform: translateY(-1px); }
.button-icon { font-size: 1rem; line-height: 1; } .secondary { border-color: var(--line-strong); background: rgba(255,255,255,.025); color: var(--muted-light); box-shadow: none; }
.secondary:hover { border-color: rgba(79,209,197,.35); background: var(--accent-soft); color: var(--text); box-shadow: none; }
.link-button,.danger-link { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #8cddd7; box-shadow: none; font-size: .83rem; }
.link-button:hover,.danger-link:hover { background: transparent; box-shadow: none; color: #c5faf5; transform: none; } .danger-link { color: #f69aaa; } .danger-link:hover { color: #ffc1cb; }

.stats { display: grid; margin-bottom: 1.15rem; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.stat { display: flex; min-height: 138px; margin: 0; align-items: center; gap: 1.1rem; } .stat>div { display: flex; min-width: 0; flex-direction: column; }
.stat span:not(.stat-icon) { color: var(--muted-light); font-size: .78rem; font-weight: 620; } .stat strong { margin: .25rem 0 .1rem; font-size: 2rem; line-height: 1; letter-spacing: -.045em; }
.stat strong.connection-value { font-size: 1.35rem; } .stat small { color: var(--muted); font-size: .72rem; }
.stat-icon { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 15px; font-size: 1rem; }
.stat-icon.cyan { background: rgba(79,209,197,.12); color: #77e5dd; } .stat-icon.violet { background: rgba(139,124,246,.13); color: #ada2ff; } .stat-icon.amber { background: rgba(251,191,36,.12); color: #fcd34d; } .stat-icon.green { background: rgba(52,211,153,.12); color: var(--success); } .stat-icon.red { background: rgba(251,113,133,.12); color: var(--danger); }
.revenue-stat strong { font-size: clamp(1.35rem,2vw,1.8rem); white-space: nowrap; }

.stack { display: flex; flex-direction: column; gap: 1.1rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .form-grid.compact { margin-top: 1rem; } .full { grid-column: 1/-1; }
label { display: flex; flex-direction: column; gap: .45rem; color: var(--muted-light); font-size: .79rem; font-weight: 650; }
input,select,textarea { width: 100%; min-height: 44px; padding: .72rem .8rem; border: 1px solid var(--line-strong); border-radius: 11px; outline: none; background: rgba(5,10,17,.62); color: var(--text); transition: border-color .16s,box-shadow .16s,background .16s; }
textarea { min-height: 100px; resize: vertical; } input::placeholder,textarea::placeholder { color: #566477; } input:hover,select:hover,textarea:hover { border-color: rgba(148,163,184,.34); }
input:focus,select:focus,textarea:focus { border-color: rgba(79,209,197,.7); background: rgba(7,14,22,.86); box-shadow: 0 0 0 3px rgba(79,209,197,.1); }
select:disabled,input:disabled { color: #5f6c7d; cursor: not-allowed; opacity: .72; }
.checkbox { display: inline-flex; width: fit-content; min-height: 44px; padding: 0 .85rem; flex-direction: row; align-items: center; gap: .65rem; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.checkbox input { width: 17px; min-height: auto; height: 17px; accent-color: var(--accent-strong); }
.actions { display: flex; margin-top: .3rem; align-items: center; justify-content: flex-end; gap: .7rem; }
.editor-form { display: grid; grid-template-columns: 1fr; gap: 1rem; } .form-section { margin: 0; padding: 1.6rem; }
.form-section-heading { display: flex; margin-bottom: 1.5rem; align-items: flex-start; gap: .9rem; } .form-section-heading h2 { margin: .05rem 0 .25rem; } .form-section-heading p { margin: 0; color: var(--muted); font-size: .8rem; }
.section-number { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(79,209,197,.25); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: .67rem; font-weight: 800; }
.editor-actions { position: sticky; z-index: 8; bottom: 1rem; display: flex; margin-top: .25rem; padding: .9rem 1rem; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--line-strong); border-radius: 15px; background: rgba(13,19,29,.9); box-shadow: 0 18px 50px rgba(0,0,0,.32); backdrop-filter: blur(18px); }
.editor-actions>div { display: flex; gap: .65rem; }

.filter-bar { display: grid; margin-bottom: 1rem; padding: 1.15rem; grid-template-columns: minmax(240px,2fr) repeat(3,minmax(145px,1fr)); align-items: end; gap: .85rem; box-shadow: none; }
.filter-bar label { margin: 0; } .filter-actions { display: flex; grid-column: 1/-1; align-items: center; gap: .6rem; }
.data-card { padding: 0; overflow: hidden; } .data-card>.card-heading { padding: 1.25rem 1.4rem 1rem; } .table-title>div { display: flex; align-items: baseline; gap: .75rem; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th,td { padding: .95rem 1.1rem; border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: #718096; background: rgba(4,8,13,.22); font-size: .67rem; font-weight: 760; letter-spacing: .075em; text-transform: uppercase; } td { color: #c4cedb; font-size: .82rem; }
tbody tr { transition: background .15s; } tbody tr:hover { background: rgba(79,209,197,.025); }
.primary-cell { display: flex; align-items: center; gap: .7rem; } .primary-cell strong { color: var(--text); font-weight: 650; }
.domain-icon { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); color: var(--accent); font-size: .65rem; font-weight: 800; }
.badge { display: inline-flex; padding: .3rem .58rem; align-items: center; gap: .35rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(148,163,184,.08); color: #aeb9c7; font-size: .66rem; font-weight: 720; }
.badge::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.badge.succeeded,.badge.created { border-color: rgba(52,211,153,.18); background: rgba(52,211,153,.09); color: #6ee7b7; } .badge.failed { border-color: rgba(251,113,133,.18); background: rgba(251,113,133,.09); color: #fda4af; } .badge.running { border-color: rgba(96,165,250,.18); background: rgba(96,165,250,.09); color: #93c5fd; }
.row-actions { display: flex; align-items: center; gap: .75rem; } .inline-form { display: inline; margin: 0; }
.hosting-table table { table-layout: fixed; }
.hosting-table .col-domain { width: 18%; } .hosting-table .col-type { width: 13%; } .hosting-table .col-contact { width: 21%; } .hosting-table .col-product { width: 19%; } .hosting-table .col-date { width: 12%; } .hosting-table .col-status { width: 7%; } .hosting-table .col-actions { width: 10%; }
.hosting-table th,.hosting-table td { overflow: hidden; padding: .78rem .72rem; text-overflow: ellipsis; }
.hosting-table th:first-child,.hosting-table td:first-child { padding-left: 1rem; }
.hosting-table th:last-child,.hosting-table td:last-child { padding-right: 1rem; }
.hosting-table .primary-cell { min-width: 0; gap: .55rem; }
.hosting-table .domain-icon { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 8px; }
.cell-truncate { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hosting-table .row-actions { justify-content: flex-end; gap: .55rem; }
.hosting-table .row-actions a,.hosting-table .row-actions button { font-size: .76rem; }

.autocomplete { position: relative; } .results { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; left: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: #111a27; box-shadow: 0 18px 45px rgba(0,0,0,.48); }
.results:empty { display: none; } .results button { width: 100%; min-height: 0; padding: .75rem .85rem; justify-content: flex-start; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: #d2dbe6; box-shadow: none; font-weight: 480; text-align: left; }
.results button:hover { background: var(--panel-hover); color: var(--text); box-shadow: none; transform: none; }
.alert { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid; border-radius: 12px; font-size: .84rem; } .alert.error { border-color: rgba(251,113,133,.25); background: rgba(127,29,29,.2); color: #fecdd3; } .alert.warning { border-color: rgba(251,191,36,.24); background: rgba(120,53,15,.19); color: #fde68a; } .alert.success { border-color: rgba(52,211,153,.22); background: rgba(6,78,59,.22); color: #a7f3d0; }
.empty-state { display: flex; min-height: 180px; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; } .empty-state>span { margin-bottom: .55rem; color: #536276; font-size: 1.8rem; } .empty-state strong { color: var(--muted-light); font-size: .86rem; } .empty-state small { margin-top: .2rem; font-size: .72rem; }

.settings-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(260px,.8fr); gap: 1rem; align-items: start; } .settings-card,.security-card { margin: 0; }
.status-light { width: 10px; height: 10px; border-radius: 50%; } .status-light.online { background: var(--success); box-shadow: 0 0 14px rgba(52,211,153,.7); } .status-light.offline { background: var(--danger); box-shadow: 0 0 14px rgba(251,113,133,.55); }
.connection-panel { display: flex; margin-bottom: 1rem; align-items: center; gap: .7rem; } .settings-description { color: var(--muted-light); font-size: .87rem; }
.security-card { position: relative; overflow: hidden; background: linear-gradient(145deg,rgba(34,29,65,.72),rgba(16,24,37,.92)); } .security-card::after { position: absolute; right: -55px; bottom: -70px; width: 170px; height: 170px; border-radius: 50%; background: rgba(139,124,246,.12); filter: blur(6px); content: ""; }
.security-icon { display: grid; width: 42px; height: 42px; margin-bottom: 1.2rem; place-items: center; border: 1px solid rgba(139,124,246,.28); border-radius: 13px; background: rgba(139,124,246,.12); color: #b9b1ff; font-size: 1.2rem; }
.security-card p { color: var(--muted-light); font-size: .83rem; } .security-card ul { display: grid; margin: 1rem 0 0; padding: 0; gap: .55rem; list-style: none; } .security-card li { color: var(--muted); font-size: .75rem; } .security-card li::before { margin-right: .55rem; color: var(--accent); content: "✓"; }

.login-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(0,1.05fr) minmax(440px,.95fr); }
.login-intro { position: relative; display: flex; overflow: hidden; padding: clamp(2rem,5vw,5rem); flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); background: linear-gradient(145deg,#0a111a,#0b1520 55%,#10142a); }
.login-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: .8rem; } .login-message { position: relative; z-index: 2; max-width: 650px; margin: 12vh 0 auto; }
.login-message h1 { max-width: 650px; margin-bottom: 1.4rem; font-size: clamp(2.7rem,5vw,5rem); line-height: 1.02; letter-spacing: -.055em; } .login-message h1 em { color: var(--accent); font-style: normal; } .login-message p { max-width: 520px; color: #9aa8b9; font-size: 1.05rem; }
.login-orb { position: absolute; border-radius: 50%; filter: blur(2px); } .orb-one { right: -18%; bottom: -22%; width: 620px; height: 620px; border: 1px solid rgba(79,209,197,.12); background: radial-gradient(circle at 35% 35%,rgba(79,209,197,.19),rgba(79,209,197,.02) 60%,transparent 70%); } .orb-two { top: 15%; right: 8%; width: 180px; height: 180px; background: rgba(139,124,246,.1); filter: blur(50px); }
.login-panel { display: grid; padding: 2rem; place-items: center; background: #090d14; } .login-card { width: min(440px,100%); margin: 0; padding: 2.2rem; box-shadow: 0 35px 90px rgba(0,0,0,.34); }
.login-card h2 { margin-bottom: .5rem; font-size: 1.8rem; } .login-card>p { margin-bottom: 1.6rem; } .login-submit { width: 100%; margin-top: .3rem; justify-content: space-between; padding-inline: 1.1rem; }
.login-footnote { margin: 1.25rem 0 0 !important; color: #586679 !important; font-size: .68rem !important; text-align: center; text-transform: uppercase; letter-spacing: .1em; } .narrow { max-width: 520px; margin: 10vh auto; }

@media (max-width:1100px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width:960px) { .topbar-inner { gap: 1.2rem; } .user-copy { display: none; } .filter-bar { grid-template-columns: 1fr 1fr; } .settings-grid { grid-template-columns: 1fr; } .login-layout { grid-template-columns: 1fr; } .login-intro { min-height: 42vh; padding: 2.5rem; } .login-message { margin: 5vh 0 0; } .login-message h1 { font-size: clamp(2.5rem,8vw,4.3rem); } }
@media (max-width:700px) { .topbar-inner { width: calc(100% - 24px); min-height: 66px; flex-wrap: wrap; padding: .7rem 0; } .brand { min-width: 0; } .brand-copy small,.user-menu { display: none; } .primary-nav { order: 3; width: 100%; min-height: 38px; overflow-x: auto; } .primary-nav a { padding: .5rem .75rem; white-space: nowrap; } .container { width: calc(100% - 24px); padding-top: 2rem; } .page-heading { align-items: flex-start; flex-direction: column; } .stats,.form-grid,.filter-bar { grid-template-columns: 1fr; } .stats .stat:last-child,.full,.filter-actions { grid-column: auto; } .stat { min-height: 115px; } .editor-actions { position: static; align-items: flex-start; flex-direction: column; } .editor-actions>div { width: 100%; } .editor-actions .button,.editor-actions button { flex: 1; } .login-intro { min-height: 36vh; padding: 1.5rem; } .login-message { margin-top: 3rem; } .login-message h1 { font-size: 2.5rem; } .login-message p { display: none; } .login-panel { padding: 1.2rem; } .login-card { padding: 1.5rem; } }