/* ═══════════════════════════════════════════════════════════
   Mane.DB — components
   Theme: black surfaces · white outlines · white text
   ═══════════════════════════════════════════════════════════ */
.wrap{max-width:1180px;margin:0 auto;padding:38px 28px 90px;width:100%}
.wrap-narrow{max-width:820px}
.section{padding:14px 0}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow.pill{display:inline-block;padding:5px 13px;border:1px solid var(--stroke-2);background:rgba(255,255,255,.05);border-radius:20px;color:#fff}
h1.page{font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,38px);letter-spacing:-1px;line-height:1.05}
h2.section-title{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,30px);letter-spacing:-.6px;margin:10px 0 6px}
.lead{color:var(--muted);font-size:15.5px;max-width:640px}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.grad-sun{background:var(--sunset);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.grad-brand{background:var(--brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.divider{height:1px;background:var(--stroke);margin:26px 0}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid var(--stroke);color:var(--muted)}
.chip.green{color:#fff;border-color:var(--stroke-2);background:rgba(255,255,255,.07)}
.chip.amber{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.chip.red{color:#fff;border-color:rgba(255,255,255,.5);border-style:dashed;background:transparent}

/* ── hero ── */
.hero{position:relative;padding:70px 28px 40px;max-width:1180px;margin:0 auto;text-align:center}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(42px,8vw,86px);line-height:.98;letter-spacing:-2.5px;margin:20px 0 18px}
.hero h1 .l1{display:block;background:linear-gradient(100deg,#fff,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .l2{display:block;background:linear-gradient(100deg,#fff,rgba(255,255,255,.72));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--muted);font-size:clamp(15px,2vw,18px);max-width:560px;margin:0 auto 30px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-orbs{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:visible}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.orb.a{width:340px;height:340px;background:rgba(255,255,255,.16);top:-40px;left:8%}
.orb.b{width:300px;height:300px;background:rgba(255,255,255,.12);bottom:-80px;right:6%}
.orb.c{width:260px;height:260px;background:rgba(255,255,255,.10);top:30%;right:26%;opacity:.35}

/* ── grids & cards ── */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.card{
  position:relative;background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius);
  padding:24px;transition:.24s;backdrop-filter:blur(10px);overflow:hidden;
}
.card:hover{border-color:var(--stroke-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#fff;opacity:0;transition:.24s}
.card:hover::before{opacity:1}
.card.aurora::before{background:rgba(255,255,255,.6)}
.card-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:22px;margin-bottom:16px;border:1px solid var(--stroke-2);background:rgba(255,255,255,.05)}
.card h3{font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:8px}
.card p{color:var(--muted);font-size:14px}
.card-link{cursor:pointer}
.card-arrow{position:absolute;top:22px;right:22px;color:var(--dim);transition:.24s}
.card:hover .card-arrow{color:#fff;transform:translate(3px,-3px)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--stroke);border-radius:var(--radius);overflow:hidden;background:var(--glass)}
.stat{padding:22px;text-align:center;border-right:1px solid var(--stroke)}
.stat:last-child{border-right:none}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:28px;color:#fff}
.stat span{font-size:12px;color:var(--muted)}

.panel{background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius);backdrop-filter:blur(10px)}
.panel-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--stroke)}
.panel-head h3{font-family:var(--display);font-size:15px;font-weight:700}
.panel-body{padding:20px}
.panel-body.tight{padding:0}

/* ── tabs ── */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--stroke);overflow-x:auto}
.tab{padding:11px 16px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;transition:.16s;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.active{color:#000;background:#fff;border-bottom-color:#fff;border-radius:8px 8px 0 0;font-weight:700}

/* ── sub-nav (Render-style hosting sections) ── */
.subnav{display:flex;gap:2px;border:1px solid var(--stroke);border-radius:12px;padding:5px;background:var(--glass);overflow-x:auto;margin:20px 0 26px;scrollbar-width:thin}
.subnav a{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;transition:.15s;border:1px solid transparent;
}
.subnav a:hover{color:#fff;background:var(--surface);border-color:var(--stroke)}
.subnav a.active{background:#fff;color:#000;border-color:#fff}
.subnav a .n{font-family:var(--mono);font-size:10.5px;opacity:.65}

/* ── toolbar ── */
.toolbar{display:flex;gap:12px;align-items:center;margin:22px 0;flex-wrap:wrap}
.search{flex:1;min-width:200px;max-width:340px;position:relative}
.search input{padding-left:38px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--dim)}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--stroke);border-radius:10px;padding:3px;gap:2px}
.seg button{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);transition:.15s}
.seg button.active{background:#fff;color:#000}

/* ── status ── */
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;padding:4px 10px;border-radius:20px;border:1px solid var(--stroke);color:var(--muted)}
.status .p{width:7px;height:7px;border-radius:50%;background:currentColor}
.status.online{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.09)}
.status.building,.status.deploying{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.05)}
.status.error{color:#fff;border-color:rgba(255,255,255,.55);border-style:dashed;background:transparent}
.status.offline{color:var(--dim)}
.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* ── project card ── */
.proj-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.proj-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:rgba(255,255,255,.06);border:1px solid var(--stroke-2)}
.proj-head b{font-size:14.5px;font-weight:600;display:block}
.proj-head i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--dim)}
.proj-url{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:10px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:11.5px;color:var(--dim)}

/* ── empty ── */
.empty{grid-column:1/-1;text-align:center;padding:60px 24px;border:1px dashed var(--stroke-2);border-radius:var(--radius);background:var(--glass)}
.empty .em{font-size:40px;margin-bottom:12px}
.empty h3{font-family:var(--display);font-size:18px;margin-bottom:6px}
.empty p{color:var(--muted);margin-bottom:18px;font-size:14px}

/* ── modal ── */
.overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;background:rgba(0,0,0,.78);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:.22s}
.overlay.open{opacity:1;pointer-events:auto}
.modal{width:100%;max-width:520px;background:#000;border:1px solid var(--stroke-2);border-radius:18px;box-shadow:var(--shadow);transform:translateY(14px) scale(.98);transition:.24s;margin:auto}
.overlay.open .modal{transform:none}
.modal.wide{max-width:680px}
.modal-head{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 0}
.modal-head h2{font-family:var(--display);font-weight:700;font-size:20px}
.modal-head p{color:var(--muted);font-size:13px;margin-top:4px}
.modal-x{margin-left:auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--dim);font-size:18px}
.modal-x:hover{background:var(--surface);color:var(--ink)}
.modal-body{padding:20px 24px 24px}
.modal-foot{padding:0 24px 24px;display:flex;gap:10px;justify-content:flex-end}

/* ── auth ── */
.auth-logo{font-family:var(--display);font-weight:800;font-size:26px;text-align:center;color:#fff;margin-bottom:4px;letter-spacing:-.5px}
.auth-sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:22px}
.oauth{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:11px;border-radius:10px;border:1px solid var(--stroke-2);background:transparent;font-weight:600;font-size:14px;transition:.16s;color:#fff}
.oauth:hover{border-color:#fff;background:#fff;color:#000}
.oauth svg path{transition:fill .16s}
.oauth:hover svg path{fill:#000}
.oauth:hover svg [fill="#5865F2"],.oauth:hover svg [fill="#4285F4"],.oauth:hover svg [fill="#EA4335"],.oauth:hover svg [fill="#FBBC05"],.oauth:hover svg [fill="#34A853"]{fill:#000}
.or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--dim);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--stroke)}
.auth-switch{text-align:center;font-size:13px;color:var(--muted);margin-top:16px}
.auth-switch a{color:#fff;cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.alert{padding:11px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;display:none}
.alert.show{display:block}
.alert.err{background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.5);color:#fff}
.alert.ok{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.5);color:#fff}
.pw-meter{display:flex;gap:5px;margin-top:8px}
.pw-meter i{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.14)}
.pw-meter.s1 i:nth-child(1){background:rgba(255,255,255,.4)}
.pw-meter.s2 i:nth-child(-n+2){background:rgba(255,255,255,.6)}
.pw-meter.s3 i:nth-child(-n+3){background:rgba(255,255,255,.8)}
.pw-meter.s4 i{background:#fff}

/* ── terminal ── */
.term{background:#000;border:1px solid var(--stroke);border-radius:12px;padding:16px;font-family:var(--mono);font-size:12.5px;line-height:1.75;max-height:340px;overflow:auto}
.term .ln{color:rgba(255,255,255,.7);white-space:pre-wrap;word-break:break-word}
.term .ok{color:#fff}.term .err{color:#fff;text-decoration:underline dotted}.term .warn{color:rgba(255,255,255,.75)}.term .cmd{color:#fff;font-weight:600}
.term .cursor::after{content:"▋";color:#fff;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── secrets ── */
.secret{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.secret .k{flex:0 0 150px}.secret .v{flex:1}

/* ── repo list ── */
.repo{display:flex;align-items:center;gap:14px;padding:18px 4px;border-bottom:1px solid var(--stroke);cursor:pointer;transition:.16s}
.repo:hover{background:rgba(255,255,255,.03)}
.repo:last-child{border-bottom:none}
.repo-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--stroke);font-size:17px;flex:0 0 auto}
.repo-main{flex:1;min-width:0}
.repo-main b{font-size:14.5px;font-weight:600}
.repo:hover .repo-main b{text-decoration:underline;text-underline-offset:3px}
.repo-main p{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 6px}
.repo-meta{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--dim);flex-wrap:wrap}
.lang{display:inline-flex;align-items:center;gap:5px}
.lang i{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.6)}
.badge{font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:20px;border:1px solid var(--stroke)}
.badge.private{color:#fff;border-color:rgba(255,255,255,.5);border-style:dashed}
.badge.public{color:#fff;border-color:var(--stroke-2);background:rgba(255,255,255,.08)}

/* ── file tree ── */
.filetree{border:1px solid var(--stroke);border-radius:12px;overflow:hidden;background:var(--glass)}
.filetree-head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--stroke);font-size:12.5px}
.branch{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--stroke)}
.frow{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.07);font-size:13.5px;cursor:pointer;transition:.12s}
.frow:hover{background:rgba(255,255,255,.05)}
.frow:last-child{border-bottom:none}
.frow .fn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .fn:hover{text-decoration:underline;text-underline-offset:3px}
.frow .fc{flex:0 0 220px;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .ft{font-size:11.5px;color:var(--dim);flex:0 0 auto}
.breadcrumb{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap}
.breadcrumb a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ── contribution grid (real data) ── */
.contrib{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px;justify-content:start}
.cc{width:11px;height:11px;border-radius:2.5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.05)}
.cc.l1{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.12)}
.cc.l2{background:rgba(255,255,255,.45);border-color:rgba(255,255,255,.2)}
.cc.l3{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.3)}
.cc.l4{background:#fff;border-color:#fff}
.cc.future{opacity:.35}
.contrib-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);font-family:var(--mono)}

/* ── markdown ── */
.md{font-size:14px;line-height:1.75;color:var(--muted)}
.md h1,.md h2,.md h3{font-family:var(--display);color:var(--ink);margin:18px 0 8px;font-weight:700}
.md h1{font-size:22px}.md h2{font-size:18px}.md h3{font-size:15px}
.md p{margin-bottom:10px}
.md code{font-family:var(--mono);font-size:12.5px;background:rgba(255,255,255,.09);padding:2px 6px;border-radius:5px;color:#fff;border:1px solid var(--stroke)}
.md pre{background:#000;border:1px solid var(--stroke);border-radius:10px;padding:14px;overflow:auto;margin-bottom:12px}
.md pre code{background:none;padding:0;color:rgba(255,255,255,.85);border:none}
.md ul{padding-left:20px;margin-bottom:10px}
.md a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ── toasts ── */
#toasts{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{padding:13px 17px;border-radius:12px;font-size:13.5px;background:#000;border:1px solid var(--stroke-2);box-shadow:var(--shadow);animation:slide .26s cubic-bezier(.2,.7,.2,1);display:flex;gap:10px;align-items:flex-start}
.toast.ok{border-color:#fff}
.toast.err{border-style:dashed;border-color:rgba(255,255,255,.7)}
.toast b{font-weight:600}
@keyframes slide{from{transform:translateX(24px);opacity:0}}

/* ── owner console ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:var(--glass);border:1px solid var(--stroke);border-radius:12px;padding:18px}
.kpi b{display:block;font-family:var(--display);font-weight:800;font-size:26px}
.kpi span{font-size:12px;color:var(--muted)}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);padding:10px 12px;border-bottom:1px solid var(--stroke)}
.table td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:middle}
.table tr:hover td{background:rgba(255,255,255,.03)}
.table .mono{font-family:var(--mono);font-size:12px}
.table a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ── usage meters ── */
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.meter{border:1px solid var(--stroke);border-radius:12px;padding:18px;background:var(--glass)}
.meter .m-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.meter .m-name{font-size:13px;color:var(--muted);font-weight:600}
.meter .m-val{font-family:var(--mono);font-size:15px;font-weight:600;color:#fff}
.meter .m-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.09);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.meter .m-fill{height:100%;background:#fff;border-radius:6px;min-width:2px;transition:width .5s}
.meter .m-limit{font-size:11.5px;color:var(--dim);margin-top:8px;font-family:var(--mono)}

/* ── notification list ── */
.note{display:flex;gap:14px;padding:16px 18px;border:1px solid var(--stroke);border-radius:12px;background:var(--glass);margin-bottom:10px;transition:.15s}
.note:hover{border-color:var(--stroke-2)}
.note.unread{border-left:3px solid #fff}
.note .n-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--stroke-2);background:rgba(255,255,255,.06);flex:0 0 auto;font-size:15px}
.note .n-body{flex:1;min-width:0}
.note .n-body b{font-size:13.5px;display:block}
.note .n-body p{font-size:13px;color:var(--muted);margin-top:3px}
.note .n-when{font-family:var(--mono);font-size:11px;color:var(--dim);flex:0 0 auto}

/* ── info blocks (private link / dedicated IP) ── */
.info{border:1px solid var(--stroke);border-radius:var(--radius);padding:22px;background:var(--glass);margin-bottom:16px}
.info h3{font-family:var(--display);font-size:16px;margin-bottom:8px}
.info p{font-size:14px;color:var(--muted);margin-bottom:10px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:13px;align-items:center}
.kv dt{color:var(--dim);font-family:var(--mono);font-size:12px}
.kv dd{color:#fff;font-family:var(--mono);font-size:12.5px;word-break:break-all}

/* ── terms ── */
.terms{max-width:820px;margin:0 auto;padding:44px 28px 100px;line-height:1.78}
.terms h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,44px);margin-bottom:8px;letter-spacing:-1px}
.terms .updated{font-family:var(--mono);font-size:12px;color:var(--dim);margin-bottom:30px}
.terms h2{font-family:var(--display);font-size:19px;font-weight:700;margin:32px 0 10px;color:#fff;padding-bottom:6px;border-bottom:1px solid var(--stroke)}
.terms h3{font-size:15px;font-weight:700;margin:20px 0 8px;color:var(--ink)}
.terms p,.terms li{font-size:14px;color:var(--muted);margin-bottom:10px}
.terms ul{padding-left:22px;margin-bottom:12px}
.terms strong{color:var(--ink)}
.terms .note{border-left:3px solid #fff;background:rgba(255,255,255,.05);padding:14px 18px;border-radius:0 10px 10px 0;margin:16px 0}

/* ── API keys ── */
.akey{display:flex;gap:16px;align-items:center;padding:18px;border-bottom:1px solid var(--stroke)}
.akey:last-child{border-bottom:0}
.akey.off{opacity:.5}
.akey-main{flex:1;min-width:0}
.akey-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.akey-top b{font-size:14.5px}
.akey-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.code{font-family:var(--mono);font-size:12px;line-height:1.7;background:#050505;border:1px solid var(--stroke);border-radius:10px;padding:14px 16px;color:#e8e8e8;white-space:pre-wrap;word-break:break-word;overflow-x:auto}
code.inline{font-family:var(--mono);font-size:11.5px;background:rgba(255,255,255,.07);border:1px solid var(--stroke);border-radius:6px;padding:2px 7px;color:#fff}
.keyline{display:flex;gap:10px;align-items:stretch}
.keyline code{flex:1;font-family:var(--mono);font-size:12.5px;background:#050505;border:1px solid var(--stroke-2);border-radius:10px;padding:12px 14px;color:#fff;word-break:break-all}
.keyline .btn{flex:0 0 auto}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick-list{display:flex;flex-direction:column;gap:8px}
.pick{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:13px 14px;border:1px solid var(--stroke);border-radius:11px;background:var(--glass);color:var(--muted);cursor:pointer;transition:.15s;font:inherit}
.pick:hover{border-color:var(--stroke-2)}
.pick.on{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.pick-ico{font-size:17px;line-height:1.2}
.pick b{display:block;font-size:13.5px;color:#fff;font-weight:600}
.pick i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:3px}
.pick.on i{color:rgba(255,255,255,.8)}
.pick-radio{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--stroke-2);margin-top:2px;flex:0 0 auto;position:relative}
.pick.on .pick-radio{border-color:#fff}
.pick.on .pick-radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#fff}
.pick-grid .pick{flex-direction:column;gap:8px}
@media(max-width:640px){.pick-grid{grid-template-columns:1fr}}

/* ── project setup wizard ── */
.wiz{max-width:720px;margin:0 auto}
.wiz-steps{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.wiz-dot{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.wiz-dot i{width:20px;height:20px;border-radius:50%;border:1px solid var(--stroke-2);display:grid;place-items:center;font-style:normal;font-size:10.5px}
.wiz-dot.on{color:#fff}
.wiz-dot.on i{background:#fff;color:#000;border-color:#fff}
.wiz-dot.done i{background:rgba(255,255,255,.15);color:#fff}
.wiz-sep{flex:1;height:1px;background:var(--stroke);min-width:12px}
.wiz h2{font-family:var(--display);font-size:22px;font-weight:800;margin-bottom:6px}
.wiz .wiz-sub{color:var(--muted);font-size:13.5px;margin-bottom:20px;line-height:1.65}
.wiz-guide{border:1px solid var(--stroke);border-radius:12px;background:var(--glass);padding:16px 18px;margin-bottom:16px}
.wiz-guide h4{font-family:var(--display);font-size:13.5px;margin-bottom:8px}
.wiz-guide ol{padding-left:18px;margin:0;color:var(--muted);font-size:13px;line-height:1.85}
.wiz-guide code{font-family:var(--mono);font-size:11.5px;background:rgba(255,255,255,.07);padding:1px 6px;border-radius:5px;color:#fff}
.wiz-foot{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.wiz-foot .right{display:flex;gap:10px}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.feature-grid{grid-template-columns:1fr}}