:root {
    --bg:#080b14; --sidebar:#0b0f1c; --panel:#101624; --panel-2:#151d2d; --panel-3:#1b2538;
    --border:rgba(150,165,205,.14); --border-strong:rgba(151,126,255,.28);
    --text:#f5f7ff; --muted:#8c98b4; --faint:#5c6882;
    --violet:#8b5cf6; --blue:#4f7cff; --cyan:#3dd9ff; --green:#43d39e; --red:#ff6b7d; --amber:#ffbb55;
    --gradient:linear-gradient(135deg,#8b5cf6 0%,#4f7cff 52%,#3dd9ff 100%);
    --shadow:0 24px 80px rgba(0,0,0,.34); --radius:18px; --radius-sm:12px;
    font-size:15px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--text);font-family:"Inter",system-ui,sans-serif;background:var(--bg);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(700px 520px at 36% -10%,rgba(139,92,246,.14),transparent 60%),radial-gradient(700px 500px at 95% 10%,rgba(61,217,255,.08),transparent 58%)}
h1,h2,.stat-value,.sidebar-brand strong{font-family:"Space Grotesk","Inter",sans-serif}
button,a,input,textarea{font:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;padding:24px 18px 18px;background:rgba(10,14,27,.86);backdrop-filter:blur(22px);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:20}
.sidebar-brand{display:flex;gap:12px;align-items:center;padding:4px 8px 28px}.sidebar-brand strong{display:block;font-size:1rem}.sidebar-brand small,.profile-chip small{display:block;color:var(--faint);font-size:.72rem;margin-top:2px}
.brand-orb{width:38px;height:38px;border-radius:13px;background:var(--gradient);box-shadow:0 10px 35px rgba(79,124,255,.35);display:flex;align-items:center;justify-content:center;gap:2px}.brand-orb span{width:3px;border-radius:3px;background:#fff}.brand-orb span:nth-child(1){height:9px}.brand-orb span:nth-child(2){height:17px}.brand-orb span:nth-child(3){height:12px}
.sidebar-nav{display:flex;flex-direction:column;gap:7px}.nav-item{min-height:46px;padding:0 12px;display:flex;align-items:center;gap:11px;border-radius:12px;color:var(--muted);text-decoration:none;font-size:.88rem;font-weight:600;border:1px solid transparent;transition:.18s ease}.nav-item:hover{background:rgba(255,255,255,.035);color:var(--text)}.nav-item.is-active{color:#fff;background:linear-gradient(90deg,rgba(139,92,246,.17),rgba(79,124,255,.08));border-color:rgba(139,92,246,.18);box-shadow:inset 3px 0 0 #8b5cf6}.nav-icon{width:22px;text-align:center;color:#a89cff}.nav-count{margin-left:auto;min-width:24px;height:24px;padding:0 7px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:.72rem}
.sidebar-summary{margin-top:28px;padding:16px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,rgba(139,92,246,.08),rgba(61,217,255,.025));display:flex;flex-direction:column;gap:6px}.sidebar-summary strong{font-size:.9rem}.sidebar-summary>span:not(.eyebrow){font-size:.76rem;color:var(--muted)}.summary-bar{height:5px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;margin-top:7px}.summary-bar span{display:block;height:100%;background:var(--gradient);border-radius:inherit}
.sidebar-bottom{margin-top:auto;border-top:1px solid var(--border);padding-top:16px}.profile-chip{display:flex;align-items:center;gap:10px;padding:9px}.profile-chip strong{font-size:.78rem}.profile-avatar{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#202a42,#151c2d);border:1px solid var(--border);display:grid;place-items:center;font-size:.7rem;color:#b7c1d9}.logout-link{display:block;margin-top:7px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#78849e;font-size:.8rem}.logout-link:hover{color:#ff8a98;background:rgba(255,107,125,.07)}
.workspace{min-width:0}.workspace-header{min-height:180px;padding:34px 38px 28px;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(18,24,40,.58),rgba(8,11,20,.22))}.workspace-header h1{font-size:2rem;letter-spacing:-.035em;margin:6px 0 6px}.workspace-header p{margin:0;color:var(--muted);font-size:.9rem}.header-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:flex-end}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;font-weight:800;color:#7b89a7}.workspace-content{padding:26px 38px 48px;max-width:1800px;width:100%;margin:0 auto}
.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.stat-card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(20,28,45,.96),rgba(13,18,31,.96));border:1px solid var(--border);border-radius:17px;padding:20px 21px;min-height:132px;box-shadow:0 14px 34px rgba(0,0,0,.14)}.stat-card::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-38px;top:-38px;background:rgba(255,255,255,.025)}.stat-card-primary{border-color:rgba(139,92,246,.25);background:linear-gradient(145deg,rgba(139,92,246,.13),rgba(18,24,40,.96))}.stat-top{display:flex;justify-content:space-between;align-items:center}.stat-label{color:var(--muted);font-size:.76rem;font-weight:600}.stat-value{font-size:2rem;font-weight:700;letter-spacing:-.04em;margin-top:14px}.stat-foot{display:block;color:var(--faint);font-size:.69rem;margin-top:5px}.stat-ok{color:#66e0b2}.stat-warn{color:var(--amber)}.stat-dot{width:9px;height:9px;border-radius:50%;background:#8b5cf6;box-shadow:0 0 18px #8b5cf6}.stat-icon{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:.72rem;background:rgba(255,255,255,.05)}.stat-icon-ok{color:var(--green)}.stat-icon-warn{color:var(--amber)}.stat-icon-cam{color:var(--cyan)}
.panel{background:linear-gradient(180deg,rgba(16,22,36,.97),rgba(12,17,29,.98));border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}.panel-heading{padding:22px 24px 18px;display:flex;align-items:center;justify-content:space-between}.panel-heading h2{margin:5px 0 0;font-size:1.08rem;letter-spacing:-.02em}.panel-total{font-size:.72rem;color:var(--muted);padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.025)}
.toolbar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.012)}.search-field{position:relative;flex:1;max-width:560px}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#66728c}.search-field input{width:100%;height:43px;padding:0 14px 0 40px;border-radius:12px;border:1px solid var(--border);background:#0d1320;color:var(--text);outline:none;transition:.18s}.search-field input:focus{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.08)}.search-field input::placeholder{color:#59657e}.tabs{display:flex;margin-left:auto;padding:4px;border-radius:12px;background:#0d1320;border:1px solid var(--border);gap:3px}.tab{border:0;background:transparent;color:#77839c;padding:8px 12px;border-radius:9px;font-size:.76rem;font-weight:700;cursor:pointer}.tab:hover{color:#fff}.tab.is-active{background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(79,124,255,.17));color:#e9e6ff;box-shadow:inset 0 0 0 1px rgba(139,92,246,.16)}
.btn-primary{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;color:white;text-decoration:none;font-weight:750;font-size:.84rem;border-radius:12px;padding:11px 17px;background:var(--gradient);box-shadow:0 12px 30px rgba(79,124,255,.24),inset 0 1px 0 rgba(255,255,255,.18);cursor:pointer;transition:transform .16s,box-shadow .16s,filter .16s}.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 38px rgba(79,124,255,.34),inset 0 1px 0 rgba(255,255,255,.2)}.btn-primary:active{transform:translateY(0) scale(.98)}.btn-primary-large{padding:12px 19px}.btn-hosting{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:.84rem;letter-spacing:.01em;border-radius:13px;padding:11px 18px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(135deg,#665cff 0%,#4f7cff 45%,#27c9ff 100%);box-shadow:0 12px 30px rgba(79,124,255,.28),0 4px 14px rgba(39,201,255,.12),inset 0 1px 0 rgba(255,255,255,.26);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.btn-hosting:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.22) 48%,transparent 72%);transform:translateX(-130%);transition:transform .5s ease}.btn-hosting:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 17px 38px rgba(79,124,255,.38),0 7px 18px rgba(39,201,255,.18),inset 0 1px 0 rgba(255,255,255,.3)}.btn-hosting:hover:before{transform:translateX(130%)}.btn-hosting:active{transform:translateY(0) scale(.98)}.directadmin-icon{width:27px;height:27px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:rgba(8,18,45,.24);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.list-head,.row{display:grid;grid-template-columns:minmax(225px,1.7fr) minmax(145px,.9fr) minmax(150px,.95fr) minmax(145px,.9fr) minmax(120px,.72fr) auto;gap:18px;align-items:center}.list-head{padding:12px 20px;font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#59657e;background:rgba(255,255,255,.012);border-bottom:1px solid var(--border)}.row{padding:15px 20px;border-bottom:1px solid var(--border);transition:background .15s}.row:last-child{border-bottom:0}.row:hover{background:linear-gradient(90deg,rgba(139,92,246,.055),rgba(79,124,255,.025),transparent)}.row-main{display:flex;align-items:center;gap:12px;min-width:0}.avatar{width:40px;height:40px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(139,92,246,.22),rgba(79,124,255,.12));border:1px solid rgba(139,92,246,.24);font-family:"Space Grotesk";font-size:.72rem;font-weight:700;color:#cfc8ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.row-main-text{min-width:0;display:flex;flex-direction:column;gap:5px}.subdomein-link{color:#f5f7ff;text-decoration:none;font-size:.88rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subdomein-link:hover{color:#a99bff}.radio-pill,.versie-pill,.cam-pill{display:inline-flex;align-items:center;gap:5px;width:max-content;border-radius:999px;padding:3px 8px;font-size:.65rem;font-weight:700}.radio-pill{color:#72dfb5;background:rgba(67,211,158,.08);border:1px solid rgba(67,211,158,.18)}.radio-pill-empty,.versie-pill-empty{color:#66728b;background:transparent!important;border-color:var(--border)!important}.badges-cell{display:flex;align-items:flex-start;gap:5px;flex-wrap:wrap}.versie-pill{color:#baaaff;background:rgba(139,92,246,.09);border:1px solid rgba(139,92,246,.18)}.cam-pill{color:#65718a;border:1px solid var(--border)}.cam-pill-on{color:#69dff8;background:rgba(61,217,255,.07);border-color:rgba(61,217,255,.18)}.muted,.notities-cell{color:var(--muted);font-size:.77rem}.notities-cell{line-height:1.45;max-width:360px}.owner-cell{display:flex;align-items:center;gap:7px;min-width:0;color:#d7dcef;font-size:.76rem;font-weight:700}.owner-cell span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.owner-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:rgba(79,124,255,.08);border:1px solid rgba(79,124,255,.16);font-size:.72rem}.btn-note{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:10px;border:1px solid rgba(139,92,246,.18);background:rgba(139,92,246,.07);color:#c9c2ff;font-size:.69rem;font-weight:800;cursor:pointer;transition:.15s}.btn-note:hover{transform:translateY(-1px);border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.12);color:#fff}.col-actions{display:flex;gap:7px;justify-content:flex-end}.inline-form{display:inline}.btn-small{min-height:34px;border-radius:10px;border:1px solid var(--border);background:#121a29;color:#b9c2d7;padding:0 10px;display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;cursor:pointer;transition:.15s}.btn-small:hover{transform:translateY(-1px);color:#fff;border-color:rgba(139,92,246,.35);background:#182135}.btn-danger{color:#ff8e9b;background:rgba(255,107,125,.04)}.btn-danger:hover{border-color:rgba(255,107,125,.34);background:rgba(255,107,125,.08);color:#ff9eaa}.btn-icon{font-size:.86rem}.empty-state,.no-results{text-align:center;color:var(--muted);font-size:.82rem;padding:40px}.no-results{margin:0}.flash{margin-bottom:16px;padding:12px 14px;border-radius:12px;font-size:.8rem;font-weight:600}.flash-ok{background:rgba(67,211,158,.08);border:1px solid rgba(67,211,158,.2);color:#7be4bb}.flash-error{background:rgba(255,107,125,.08);border:1px solid rgba(255,107,125,.2);color:#ff98a5}
.modal-backdrop{position:fixed;inset:0;background:rgba(3,5,10,.76);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}.modal-backdrop[hidden]{display:none}.modal{width:100%;max-width:470px;padding:26px;border-radius:20px;background:linear-gradient(160deg,#151d2e,#0e1421);border:1px solid rgba(139,92,246,.22);box-shadow:0 30px 100px rgba(0,0,0,.55)}.modal h2{font-size:1.2rem;margin:0 0 20px}.modal label,.auth-box label{display:block;color:var(--muted);font-size:.76rem;font-weight:700;margin-bottom:13px}.modal input,.modal textarea,.auth-box input{width:100%;margin-top:6px;padding:11px 12px;border-radius:11px;border:1px solid var(--border);background:#0b111d;color:#fff;outline:none}.modal input:focus,.modal textarea:focus,.auth-box input:focus{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.08)}.checkbox-label{display:flex!important;align-items:center;gap:9px}.checkbox-label input{width:16px!important;margin:0!important;accent-color:#8b5cf6}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.notes-modal{max-width:560px}.notes-modal-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.notes-modal-head h2{margin:4px 0 3px}.notes-meta{margin:0;color:var(--muted);font-size:.76rem}.notes-close{width:36px;height:36px;border-radius:11px;border:1px solid var(--border);background:#111827;color:#9fa9c0;font-size:1.2rem;cursor:pointer}.notes-close:hover{color:#fff;border-color:rgba(139,92,246,.35);background:#182135}.notes-content{margin-top:20px;padding:17px 18px;min-height:120px;border-radius:14px;border:1px solid var(--border);background:#0b111d;color:#d9def0;font-size:.84rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.btn-ghost{border:1px solid var(--border);background:#111827;color:#a6b0c7;border-radius:11px;padding:10px 15px;text-decoration:none;cursor:pointer}.btn-ghost:hover{color:#fff;border-color:#39445d}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-box{width:min(420px,100%);padding:34px;background:linear-gradient(160deg,#151d2e,#0e1421);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}.auth-box .brand{margin-bottom:8px}.auth-box h1{margin:0 0 8px}.auth-box .sub,.auth-box .hint{color:var(--muted);font-size:.82rem}.auth-box button{width:100%;margin-top:6px}.auth-box .notice,.auth-box .error{padding:10px 12px;border-radius:10px;font-size:.78rem;margin-bottom:14px}.auth-box .notice{background:rgba(139,92,246,.08);color:#c6bbff}.auth-box .notice-ok{background:rgba(67,211,158,.08);color:#7be4bb}.auth-box .error{background:rgba(255,107,125,.08);color:#ff98a5}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}
@media(max-width:1220px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.workspace-header,.workspace-content{padding-left:24px;padding-right:24px}.stats-row{grid-template-columns:repeat(2,1fr)}.list-head,.row{grid-template-columns:minmax(220px,1.5fr) minmax(135px,.9fr) 1fr minmax(130px,.9fr) auto}.list-head>:nth-child(5),.row>:nth-child(5){display:none}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:relative;height:auto;padding:14px 16px;border-right:0;border-bottom:1px solid var(--border);flex-direction:row;align-items:center}.sidebar-brand{padding:0}.sidebar-brand small,.sidebar-summary,.sidebar-bottom,.sidebar-nav .nav-item:not(.is-active),.nav-count{display:none}.sidebar-nav{margin-left:auto}.nav-item.is-active{min-height:38px}.workspace-header{min-height:auto;padding:24px 18px;align-items:flex-start;gap:18px}.workspace-header h1{font-size:1.55rem}.workspace-header p{display:none}.header-actions{width:auto;justify-content:flex-end}.btn-primary-large,.btn-hosting{padding:10px 12px;font-size:.75rem}.workspace-content{padding:18px}.stats-row{grid-template-columns:1fr 1fr;gap:10px}.stat-card{min-height:115px;padding:16px}.toolbar{flex-direction:column;align-items:stretch}.search-field{max-width:none}.tabs{margin-left:0;width:100%;overflow:auto}.tab{flex:1;white-space:nowrap}.list-head{display:none}.row{grid-template-columns:1fr;gap:11px;padding:16px}.row>:nth-child(5){display:block}.col-actions{justify-content:flex-start}.notities-cell{max-width:none}.panel-heading{padding:18px}.modal{padding:22px}}
@media(max-width:470px){.stats-row{grid-template-columns:1fr}.workspace-header{flex-direction:column}.header-actions{width:100%;display:grid;grid-template-columns:1fr}.workspace-header .btn-primary,.workspace-header .btn-hosting{width:100%}.panel-heading{align-items:flex-end}.col-actions{flex-wrap:wrap}.btn-small{flex:1;justify-content:center}.inline-form{display:flex;flex:1}.inline-form .btn-small{width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* HostingBudget CAM filter separation */
.tabs{gap:8px;padding:5px;background:rgba(8,13,24,.58);border:1px solid rgba(255,255,255,.055);border-radius:14px}
.tab{border:1px solid transparent!important;border-radius:10px!important;min-height:36px;padding:0 13px!important}
.tab-cam,.tab-nocam{position:relative;font-weight:850!important;letter-spacing:.035em}
.tab-cam{color:#72e9be!important;background:rgba(67,211,158,.055)!important;border-color:rgba(67,211,158,.14)!important}
.tab-cam:hover,.tab-cam.is-active{color:#adffdf!important;background:linear-gradient(135deg,rgba(67,211,158,.18),rgba(39,201,255,.10))!important;border-color:rgba(67,211,158,.42)!important;box-shadow:0 8px 22px rgba(67,211,158,.10),inset 0 1px 0 rgba(255,255,255,.07)}
.tab-nocam{color:#ffb3bc!important;background:rgba(255,107,125,.045)!important;border-color:rgba(255,107,125,.13)!important;margin-left:4px}
.tab-nocam:before{content:"";position:absolute;left:-7px;top:7px;bottom:7px;width:1px;background:rgba(255,255,255,.10)}
.tab-nocam:hover,.tab-nocam.is-active{color:#ffd0d6!important;background:linear-gradient(135deg,rgba(255,107,125,.16),rgba(255,157,92,.08))!important;border-color:rgba(255,107,125,.38)!important;box-shadow:0 8px 22px rgba(255,107,125,.09),inset 0 1px 0 rgba(255,255,255,.06)}
.filter-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:2px;background:currentColor;box-shadow:0 0 12px currentColor}
.cam-pill{background:rgba(255,107,125,.055);border-color:rgba(255,107,125,.15);color:#ff9eaa}
.cam-pill-on{color:#72e9be;background:rgba(67,211,158,.08);border-color:rgba(67,211,158,.20)}

/* HostingBudget installer */
.install-box{max-width:560px;width:min(560px,calc(100vw - 32px));}
.install-box .hint{line-height:1.6;margin-bottom:20px;}
.install-separator{border:0;border-top:1px solid rgba(148,163,184,.16);margin:8px 0 18px;}