:root{--ink:#17233d;--muted:#667085;--line:#e5e9f2;--surface:#fff;--canvas:#f5f7fb;--brand:#2356d8;--brand2:#14358c;--success:#12815b;--warning:#b86809;--danger:#c2373f;--radius:18px;--shadow:0 12px 35px rgba(28,45,82,.07)}*{box-sizing:border-box}html{font-family:Inter,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--canvas)}body{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.app-shell{display:grid;grid-template-columns:255px 1fr;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:255px;padding:28px 20px;background:#101b35;color:#dce5ff;display:flex;flex-direction:column;z-index:10}.brand{display:flex;gap:11px;align-items:center;font-size:18px;font-weight:750;letter-spacing:-.02em}.brand>span>span{color:#7197ff}.brand small{display:block;margin-top:2px;color:#8fa0c6;text-transform:uppercase;font-size:9px;letter-spacing:.18em}.brand-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:linear-gradient(145deg,#527ef0,#204dc9);color:#fff!important;font-size:20px}.sidebar nav{display:grid;gap:5px;margin-top:42px}.sidebar nav a{padding:11px 13px;border-radius:10px;color:#9faecf;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:#1e2b49;color:#fff}.nav-separator{height:1px;background:#273555;margin:10px 6px}.sidebar-footer{margin-top:auto;display:flex;align-items:center;gap:10px;padding:14px 6px;border-top:1px solid #273555}.sidebar-footer strong,.sidebar-footer small{display:block;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-footer strong{font-size:13px}.sidebar-footer small{color:#8fa0c6;font-size:11px}.avatar{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#294780;color:#fff}.main{grid-column:2;min-width:0}.topbar{height:66px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);display:flex;justify-content:flex-end;align-items:center;padding:0 4vw;position:sticky;top:0;z-index:5;backdrop-filter:blur(10px)}.menu-button,.mobile-brand{display:none}.link-button{border:0;background:none;color:var(--muted);cursor:pointer}.page{max-width:1240px;margin:auto;padding:44px 4vw 80px}.page-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:30px}.page-heading h1,.section-heading h2{font-size:clamp(28px,3vw,40px);margin:5px 0 8px;letter-spacing:-.035em}.page-heading p,.section-heading p,.card p{color:var(--muted);margin:0;line-height:1.6}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:var(--brand);font-size:11px}.hero-card{background:linear-gradient(120deg,#1749bd,#273b82 72%,#18284d);color:#fff;border-radius:24px;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 18px 45px rgba(30,60,140,.22)}.hero-card .eyebrow{color:#b9cdfd}.hero-card h2{font-size:32px;margin:8px 0 13px}.status-row{display:flex;gap:10px;flex-wrap:wrap}.status{display:inline-flex;padding:6px 10px;border-radius:99px;font-size:12px;font-weight:700;background:#eef1f6;color:#536176}.status.success{background:#e6f6ef;color:var(--success)}.hero-card .status.success{background:rgba(255,255,255,.14);color:#fff}.status.warning{background:#fff2dd;color:#965607}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 42px}.metric,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.metric{padding:22px}.metric>span,.detail-grid span,.connection-grid span{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.metric strong{font-size:22px}.metric strong small{font-size:12px;color:var(--muted);font-weight:500}.metric p{font-size:12px;color:var(--muted);margin:10px 0 0}.progress{height:6px;background:#edf0f5;border-radius:9px;margin-top:15px;overflow:hidden}.progress i{height:100%;display:block;background:var(--brand);border-radius:9px}.section-heading{margin-bottom:18px}.section-heading h2{font-size:27px}.action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.action-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:19px;display:grid;grid-template-columns:43px 1fr auto;align-items:center;gap:14px;transition:.2s}.action-card:hover{transform:translateY(-2px);border-color:#b8c7eb;box-shadow:var(--shadow)}.action-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#edf2ff;color:var(--brand);font-size:11px;font-weight:800}.action-card h3{font-size:15px;margin:0 0 4px}.action-card p{font-size:12px;color:var(--muted);margin:0;line-height:1.4}.arrow{color:var(--brand);font-size:20px}.advanced{margin-top:40px;padding:27px 30px;border:1px dashed #bfc8d9;border-radius:var(--radius);display:flex;justify-content:space-between;align-items:center;gap:20px}.advanced h2{font-size:19px;margin:7px 0}.advanced p{color:var(--muted);margin:0}.button{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:10px;padding:11px 17px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}.button.primary{background:var(--brand);color:#fff}.button.primary:hover{background:var(--brand2)}.button.secondary{border:1px solid #cdd5e3;background:#fff;color:var(--ink)}.button.light{background:#fff;color:var(--brand)}.button.danger{background:var(--danger);color:#fff}.button.danger-ghost{background:#fff0f1;color:var(--danger);padding:8px 12px}.button:disabled,.button.disabled{opacity:.5;pointer-events:none}.card{padding:26px;margin-bottom:18px}.card.compact{max-width:760px}.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.card h2{font-size:20px;margin:0 0 7px}.card h3{margin:25px 0 12px}.detail-grid,.connection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.detail-grid>div,.connection-grid>div{padding:15px;background:#f7f9fc;border-radius:12px}.detail-grid strong{font-size:13px}.connection-grid code{font-size:13px}.tone-ok{color:var(--success)}.php-badge{background:#edf2ff;color:var(--brand);padding:9px 12px;border-radius:10px;font-weight:800}.inline-form{display:flex;align-items:flex-end;gap:12px}.inline-form label{flex:1}.stack{display:grid;gap:17px}.stack label,.inline-form label,.confirm-box label{display:grid;gap:7px;font-size:13px;font-weight:700}.stack label small{font-weight:400;color:var(--muted)}input,select{width:100%;border:1px solid #cfd7e5;border-radius:9px;padding:11px 12px;background:#fff;color:var(--ink);outline:none}input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(35,86,216,.12)}.notice,.flash{padding:14px 16px;border-radius:11px;margin:18px 0;font-size:13px;line-height:1.5}.notice.warning,.flash.warning{background:#fff7e8;color:#8b550e}.notice.neutral{background:#f1f4f9;color:#4d5a70}.flash.success{background:#e7f8f0;color:#0f7351}.flash.danger{background:#fff0f1;color:#a82732}.feature-card{display:grid;grid-template-columns:65px 1fr auto;gap:22px;align-items:start}.feature-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:16px;background:#edf2ff;color:var(--brand);font-weight:900}.check-list{display:flex;gap:20px;flex-wrap:wrap;padding:0;list-style:none;color:var(--muted);font-size:13px}.check-list li:before{content:'✓';color:var(--success);font-weight:900;margin-right:6px}.steps{color:var(--muted);line-height:1.9}.two-column{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.resource-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}.resource-row:last-child{border-bottom:0}.resource-row strong,.resource-row small,.resource-row code{display:block}.resource-row small{color:var(--muted);margin-top:4px}.confirm-box{display:grid;gap:10px;margin-top:10px;padding:15px;background:#fff3f4;border-radius:10px}.empty{text-align:center;padding:35px;color:var(--muted)}.dns-checks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.dns-checks>div{padding:18px;background:#f7f9fc;border-radius:12px;display:grid;gap:5px}.dns-checks small{color:var(--muted)}.check{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#fff0df;color:var(--warning);font-weight:900}.check.ok{background:#e6f6ef;color:var(--success)}.security-note{font-size:11px!important;color:var(--muted)!important;text-align:center;margin-top:22px!important}.hidden{display:none!important}.error-page{text-align:center;padding:15vh 20px}.error-code{font-size:70px;font-weight:900;color:#dce4f8}.error-page h1{font-size:35px;margin:0}.error-page p{color:var(--muted);margin-bottom:25px}.auth-shell{background:#eef2f9;min-height:100vh}.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.login-panel{padding:6vw;background:linear-gradient(145deg,#101c39,#173a89);color:#fff;display:flex;flex-direction:column;justify-content:space-between}.login-brand{align-self:flex-start}.login-copy{max-width:560px;margin:auto 0}.login-copy .eyebrow{color:#9bb9ff}.login-copy h1{font-size:clamp(44px,6vw,76px);letter-spacing:-.055em;line-height:1;margin:18px 0}.login-copy p{color:#bfcae3;font-size:18px;line-height:1.6}.login-card{background:#fff;margin:auto;width:min(440px,80%);padding:45px;border-radius:22px;box-shadow:var(--shadow)}.login-card h2{font-size:32px;margin:8px 0}.muted{color:var(--muted)}@media(max-width:900px){.app-shell{display:block}.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.main{grid-column:auto}.topbar{justify-content:space-between}.menu-button,.mobile-brand{display:block}.menu-button{border:0;background:none;font-size:22px}.mobile-brand{font-weight:800}.metrics,.detail-grid,.connection-grid,.dns-checks{grid-template-columns:repeat(2,1fr)}.action-grid,.two-column{grid-template-columns:1fr}.login-wrap{grid-template-columns:1fr}.login-panel{display:none}.feature-card{grid-template-columns:55px 1fr}.feature-card>.button{grid-column:1/-1}}@media(max-width:580px){.page{padding:28px 18px 60px}.page-heading,.hero-card,.advanced{align-items:flex-start;flex-direction:column}.metrics,.detail-grid,.connection-grid,.dns-checks{grid-template-columns:1fr}.action-card{grid-template-columns:40px 1fr auto}.inline-form{display:grid}.login-card{width:calc(100% - 28px);padding:30px 22px}.card{padding:20px}.resource-row{align-items:flex-start;flex-direction:column}}
