:root{--ink:#0A2A22;--green:#0F5C46;--green2:#0F4A3B;--sand:#F3E6C6;--sand2:#EAD9AE;--line:#E3D5B0;--orange:#FF7A2F;--burnt:#B8430F;--muted:#4F6A61;--ok:#1B9C74;--warn:#E8A23A;--bad:#D6453D}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--sand),var(--sand2));min-height:100vh;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;margin:0}
.muted{color:var(--muted)}
button,input,select{font:inherit;color:inherit}
a{color:var(--green)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:.3em;font-size:17px}
.brand small{display:block;font-weight:600;font-size:10px;letter-spacing:.6em;color:#FFB070}

/* auth */
#auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-art{background:linear-gradient(180deg,#17368F 0%,#9A5FB0 42%,#F2784B 64%,#FF9A3D 80%,#0E5A7E 80.2%,#0A3B35 100%);position:relative;overflow:hidden}
.auth-art::before{content:"";position:absolute;left:58%;top:62%;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#FFF1BE 0 30%,#FFB347 31% 55%,rgba(255,122,47,0) 70%);transform:translate(-50%,-50%);animation:sun 8s ease-in-out infinite}
.auth-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 40px,transparent 40px 90px);animation:wave 9s linear infinite}
@keyframes sun{50%{transform:translate(-50%,-54%)}}
@keyframes wave{to{background-position:90px 0}}
.auth-card{padding:56px clamp(24px,6vw,84px);display:flex;flex-direction:column;justify-content:center;gap:14px;max-width:560px;width:100%;margin:0 auto}
.auth-card .brand{color:var(--ink);margin-bottom:18px}
.auth-card h1{font-size:clamp(2rem,4vw,2.8rem)}
.tabs{display:flex;gap:6px;background:rgba(10,42,34,.07);padding:5px;border-radius:999px;width:max-content;margin:8px 0}
.tab{border:0;background:transparent;padding:10px 20px;border-radius:999px;cursor:pointer;font-weight:600;color:var(--muted)}
.tab.on{background:var(--ink);color:#F6F1E7}
form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600}
input,select{border:1.5px solid var(--line);background:#FFFDF7;border-radius:14px;padding:13px 14px;font-weight:400;font-size:15.5px;min-height:48px;width:100%}
input:focus,select:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.form-error{color:var(--bad);font-size:14px;min-height:20px;margin:0}
.demo-note{font-size:13px;color:var(--burnt);background:#FFE9D4;padding:10px 14px;border-radius:12px;margin:6px 0 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;font-weight:600;cursor:pointer;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:700;box-shadow:0 12px 26px -12px rgba(255,122,47,.8)}
.btn.dark{background:var(--ink);color:#F6F1E7}
.btn.sm{min-height:36px;padding:0 14px;font-size:13.5px}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}
.link-btn{background:none;border:0;color:rgba(246,241,231,.75);cursor:pointer;padding:6px 0;text-align:left;text-decoration:underline}

/* layout */
#app{display:grid;grid-template-columns:268px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,#0A2A22,#0F4A3B);color:#F6F1E7;padding:26px 18px;display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh}
.side .brand{padding:0 8px}
#nav{display:flex;flex-direction:column;gap:4px}
#nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:rgba(246,241,231,.78);text-decoration:none;font-weight:500;transition:background .2s}
#nav a:hover{background:rgba(255,255,255,.07)}
#nav a.on{background:rgba(255,122,47,.18);color:#fff}
#nav a.on svg{stroke:#FFB070}
#nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;font-size:14px;padding:0 8px}
.who{display:flex;gap:10px;align-items:center}
.who b{display:block;font-size:14px}
.who small{display:block;color:rgba(246,241,231,.6);font-size:12.5px;word-break:break-all}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(160deg,#FFD36B,#F2503F);display:grid;place-items:center;color:var(--ink);font-weight:800;flex:none}
.main{padding:40px clamp(20px,4vw,56px) 80px;min-width:0}
#view{max-width:1100px;margin:0 auto;animation:rise .45s both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px}
.page-head h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--burnt);display:block;margin-bottom:8px}

/* cards */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px}
.card.dark{background:linear-gradient(150deg,#0F5C46,#0A2A22);color:#F6F1E7;border:0;position:relative;overflow:hidden}
.card.dark::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,154,61,.55),rgba(255,154,61,0) 70%)}
.card.dark>*{position:relative;z-index:1}
.card h3{font-size:19px;margin-bottom:6px}
.stat{display:flex;flex-direction:column;gap:10px}
.stat .lbl{font-size:13px;color:var(--muted)}
.stat .val{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:700;letter-spacing:-.03em}
.stat .val small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.bar{height:8px;background:#EFE5CC;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--orange);transition:width .6s}
.bar.green i{background:var(--ok)}
.bar.hot i{background:var(--bad)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:#CFEFE6;color:#06352A;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.pill.warn{background:#FFE9C9;color:#7A4A06}.pill.warn::before{background:var(--warn);animation:blink 1.1s infinite}
.pill.bad{background:#FFD9D5;color:#7A1710}.pill.bad::before{background:var(--bad)}
.pill.off{background:#E8E2D2;color:#4F4A3C}.pill.off::before{background:#9A937E}
@keyframes blink{50%{opacity:.3}}
.list{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .grow{flex:1 1 220px;min-width:0}
.row .grow b{display:block;font-size:16px;word-break:break-all}
.row .grow small{color:var(--muted);font-size:13.5px}
.row .acts{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-block;background:#F6EEDB;border-radius:999px;padding:3px 10px;font-size:12.5px;margin:6px 6px 0 0;color:var(--muted)}
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty svg{width:64px;height:64px;margin-bottom:12px}
.empty h3{color:var(--ink);margin-bottom:6px}
.banner{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:linear-gradient(115deg,#0A2A22,#0F4A3B 55%,#B8430F);color:#F6F1E7;border-radius:24px;padding:26px 30px;margin-bottom:22px}
.banner p{margin:4px 0 0;color:rgba(246,241,231,.82)}
.dns{background:#FBF6E8;border:1px dashed #D9C690;border-radius:14px;padding:12px 14px;margin-top:10px;font-size:13.5px;width:100%}
.dns table{width:100%;border-collapse:collapse}
.dns td,.dns th{text-align:left;padding:4px 8px 4px 0;font-weight:500}
.dns code{background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 6px;cursor:pointer}

/* modal */
#modal-root .overlay{position:fixed;inset:0;background:rgba(6,30,24,.55);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;z-index:50;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{background:#FFFDF7;border-radius:28px;padding:30px;width:min(520px,100%);max-height:92vh;overflow:auto;animation:rise .3s both}
.modal h2{font-size:26px;margin-bottom:6px}
.modal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
#toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:60}
.toast{background:var(--ink);color:#F6F1E7;padding:14px 18px;border-radius:14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);animation:rise .3s both;max-width:340px;font-size:14.5px}
.toast.err{background:#7A1710}

/* builder */
.steps{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.step{flex:1 1 120px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.55);font-size:13.5px;font-weight:600;color:var(--muted);border:1px solid transparent}
.step b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:20px;color:var(--ink)}
.step.on{background:#fff;border-color:var(--orange);color:var(--ink)}
.step.done b{color:var(--ok)}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.opt{display:flex;flex-direction:column;gap:6px;text-align:left;background:#fff;border:2px solid var(--line);border-radius:20px;padding:20px;cursor:pointer;transition:transform .2s,border-color .2s}
.opt:hover{transform:translateY(-3px)}
.opt.on{border-color:var(--orange);box-shadow:0 14px 30px -18px rgba(255,122,47,.9)}
.opt svg{width:34px;height:34px;stroke:var(--green);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.opt b{font-family:'Bricolage Grotesque',sans-serif;font-size:19px}
.opt span{color:var(--muted);font-size:14px}
.check{flex-direction:row;align-items:flex-start;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;font-weight:500;cursor:pointer}
.check input{width:20px;min-height:20px;margin-top:2px;accent-color:var(--orange)}
.check small{display:block;color:var(--muted);font-weight:400;margin-top:2px}
.sumlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.sumlist li{display:flex;gap:12px;align-items:flex-start}
.sumlist svg{width:20px;height:20px;stroke:var(--ok);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.wiz-foot{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan{display:flex;flex-direction:column;gap:14px}
.plan.cur{outline:3px solid var(--orange);outline-offset:-3px}
.price{font-family:'Bricolage Grotesque',sans-serif;font-size:40px;font-weight:700;letter-spacing:-.04em}
.price small{font-size:15px;font-weight:500;color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px}

a.back{display:inline-block;margin-bottom:14px;text-decoration:none;font-weight:600;color:var(--muted)}a.back:hover{color:var(--ink)}
.site-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.site-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(10,42,34,.5)}
.site-card .go{font-weight:600;color:var(--burnt)}
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:34px 20px;border:2px dashed #D9C690;border-radius:20px;background:#FBF6E8;cursor:pointer;transition:background .2s,border-color .2s}
.drop:hover,.drop.over{background:#FFF1DC;border-color:var(--orange)}
.drop.busy{cursor:progress;opacity:.9}
.drop b{font-family:'Bricolage Grotesque',sans-serif;font-size:20px}
.notice{background:#FFF1DC;border:1px solid #F2D2A4;color:#7A4A06;border-radius:14px;padding:14px 16px;font-size:14.5px}
.danger-zone{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-color:#F0C9C4}
.sumlist li .dot{width:20px;height:20px;border:2px solid #CDBE92;border-radius:50%;flex:none;margin-top:1px}
.sumlist li.ok span{color:var(--muted);text-decoration:line-through}
@media(max-width:960px){
  #auth{grid-template-columns:1fr}.auth-art{min-height:170px}
  #app{grid-template-columns:minmax(0,1fr)}
  .side{min-width:0;max-width:100vw}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px 16px;gap:10px}
  .side .brand div{display:none}
  #nav{flex-direction:row;overflow-x:auto;flex:1 1 100%;order:3;gap:6px;padding-bottom:4px}
  #nav a{padding:10px 14px;white-space:nowrap}
  .side-foot{margin:0 0 0 auto;flex-direction:row;align-items:center}
  .who div{display:none}
  .g3,.g2,.plans,.opts{grid-template-columns:minmax(0,1fr)}
  .main{padding-top:24px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}