/* diyodar.com · business tools: For business, sign-up, account, dashboard, admin. Loaded only on those pages, so resident pages stay light. */
/* ---------- for business ---------- */
.bhero{background:var(--hero-bg);color:var(--hero-ink);overflow:hidden}
.bhero-in{display:grid;gap:26px;padding-top:30px;padding-bottom:30px}
.bhero h1{font-weight:var(--dw);font-size:clamp(32px,7.5vw,60px);line-height:1.08;letter-spacing:var(--dtrack);margin:6px 0 10px;text-wrap:balance}
.bhero .btns{margin-top:18px}
.bhero-art{position:relative;display:flex;justify-content:center;gap:16px;min-height:300px}
.phone{padding:10px;border-radius:34px;background:var(--ink);box-shadow:0 30px 60px rgba(0,0,0,.25)}
.phone .mini{box-shadow:none}
.phone-2{display:none}
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.feat{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--card-line)}
.feat .ic{width:30px;height:30px;color:var(--brand)}
.feat b{font-size:16px;line-height:1.3}.feat span{font-size:13px;color:var(--muted)}
.types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.type{display:flex;flex-direction:column;gap:5px;padding:14px;border-radius:var(--r);background:var(--surface);text-decoration:none;box-shadow:var(--shadow);border:1px solid var(--card-line)}
.type .ic{width:28px;height:28px;color:var(--brand)}
.type b{font-size:15px;line-height:1.3}.type span{font-size:12px;color:var(--muted)}
.ways{counter-reset:w;display:grid;gap:10px}
.ways li{counter-increment:w;position:relative;padding:16px 16px 16px 62px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--card-line);display:flex;flex-direction:column;gap:2px}
.ways li:before{content:counter(w);position:absolute;left:16px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-weight:800}
.ways li span{font-size:14px;color:var(--muted)}
.plans{display:grid;gap:12px}
.plan{padding:20px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.plan-on{border:2px solid var(--brand)}
.plan b{font-size:20px;font-weight:var(--dw);font-family:var(--display)}
.plan-p{font-size:34px;font-weight:800}
.plan ul{display:grid;gap:8px;margin:6px 0 12px}
.plan li{display:flex;gap:8px;align-items:center;font-size:14px}
.plan li .ic{color:var(--ok)}

/* ---------- join, account, dashboard ---------- */
.ways3{display:grid;gap:10px;margin-top:18px}
.way{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding:16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line);text-decoration:none}
.way .ic{grid-row:span 2;width:30px;height:30px;color:var(--brand)}
.way b{font-size:17px}.way span{font-size:13px;color:var(--muted)}
.way .pill{grid-column:2;justify-self:start}
.way-main{border:2px solid var(--brand)}
.card-form{padding:20px}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font-weight:700;font-size:15px}
label .muted{font-weight:400;font-size:13px}
input,select,textarea{width:100%;min-height:50px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:16px}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
textarea{min-height:96px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{width:22px;min-height:22px;height:22px;margin-top:2px;flex:none}
.prefix{display:flex}
.prefix span{display:grid;place-items:center;padding:0 12px;border:1.5px solid var(--line);border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--surface2);font-weight:800}
.prefix input{border-radius:0 var(--r-sm) var(--r-sm) 0}
.code{font-size:32px;font-weight:800;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.panel{background:var(--surface2);border-radius:var(--r);padding:14px;margin-top:12px}
.msg{padding:10px 14px;border-radius:var(--r-sm);background:var(--ok-bg);color:var(--ok);font-weight:700}
.msg.err{background:var(--bad-bg);color:var(--bad)}
.queue>li{padding:16px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);margin-bottom:10px}
.kv{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:4px 12px;font-size:14px;margin:8px 0}
.kv dt{color:var(--muted)}
.log li{font-size:12px;padding:6px 0;border-top:1px solid var(--line);font-family:var(--mono);overflow-wrap:anywhere}

/* ---------- guided sign-up ---------- */
.wiz{margin-top:18px}
.wiz-steps{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px;font-size:12px;counter-reset:s}
.wiz-steps::-webkit-scrollbar{display:none}
.wiz-steps li{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border-radius:99px;background:var(--surface2);color:var(--muted);font-weight:700}
.wiz-steps li span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface);font-size:11px}
.wiz-steps li.now{background:var(--brand);color:var(--on-brand)}.wiz-steps li.now span{color:var(--brand)}
.wiz-steps li.done span{background:var(--ok);color:#fff}
.wiz-body{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.wiz-form{background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);border:1px solid var(--card-line)}
.wiz-form h2{font-weight:var(--dw);font-size:20px}
.wiz-form .types{grid-template-columns:repeat(2,minmax(0,1fr))}
.wiz-form button.type{text-align:left;cursor:pointer;font:inherit}
.wiz-form button.type.on{outline:3px solid var(--brand)}
.wiz-nav{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
.wiz-nav .btn-brand{margin-left:auto}
.wiz-preview{display:none}
.wiz.show-preview .wiz-preview{display:block}.wiz.show-preview .wiz-form{display:none}
.wiz-toggle{position:fixed;right:var(--padr);bottom:calc(var(--tab) + 14px + env(safe-area-inset-bottom,0px));z-index:25;box-shadow:var(--shadow);background:var(--surface)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.two-a{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.rows-edit{display:grid;gap:8px}
.swatches{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.swatches legend{font-weight:700;font-size:15px;margin-bottom:6px;padding:0}
.swatches button{width:38px;height:38px;border-radius:50%;background:var(--c);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer}
.swatches button[aria-pressed=true]{box-shadow:0 0 0 3px var(--ink)}
.pv{max-width:360px;margin:0 auto;background:var(--surface);border-radius:28px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.18);border:8px solid var(--ink);padding-bottom:16px}
.pv-cover{height:110px;background:var(--brand);background-size:cover;background-position:center;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 22px,transparent 22px 44px);background-repeat:no-repeat;background-size:100% 30px;background-position:0 32px}
.pv-head{padding:0 16px}
.pv-head .logo{margin-top:-30px;background-size:cover}
.pv-cat{font-size:12px;color:var(--muted);margin-top:8px}
.pv-name{font-family:var(--display);font-weight:var(--dw);font-size:24px;line-height:1.15}
.pv-tag{font-size:13px;color:var(--muted);margin-top:2px}
.pv-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:12px 16px}
.pv-act{display:grid;place-items:center;height:42px;border-radius:12px;background:var(--surface2)}
.pv-act.on{background:var(--brand);color:var(--on-brand)}.pv-act.wa{background:#128c4a;color:#fff}
.pv-offer{display:flex;gap:8px;align-items:center;margin:0 16px 10px;padding:10px;border-radius:12px;border:2px dashed var(--brand);font-weight:700;font-size:14px}
.pv-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.pv-items{padding:0 16px}
.pv-items li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.pv-hours{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);padding:10px 16px 0}
.pv-url{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center;margin-top:10px}
.done{display:grid;justify-items:center;gap:10px;text-align:center;padding:30px 10px}
.done-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff}
.done-ic .ic{width:34px;height:34px}
.done h2{font-weight:var(--dw);font-size:26px}

/* ---------- dashboard ---------- */
.dash-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;align-items:center;margin-top:18px}
.dash-head .btns{grid-column:1/-1}
.dash-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.dash-id b{font-family:var(--display);font-weight:var(--dw);font-size:22px;line-height:1.2}
.meter{display:block;height:8px;border-radius:4px;background:var(--surface2);overflow:hidden;margin-top:4px;max-width:260px}
.meter i{display:block;height:100%;background:var(--ok)}
.dash-tabs{margin-top:8px}
.dash-panel{margin-top:8px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.kpi{display:grid;gap:2px;padding:14px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--card-line)}
.kpi span{font-size:12px;color:var(--muted)}.kpi b{font-size:30px;font-weight:800;line-height:1.1}.kpi .ic{color:var(--brand)}
.chart>svg{display:block;width:100%;height:auto;max-height:280px}
.chart .bar{fill:color-mix(in srgb,var(--brand) 35%,var(--surface))}.chart .bar-now{fill:var(--brand)}
.chart .grid{stroke:var(--line);stroke-dasharray:3 4}.chart .ax{font-size:9px;fill:var(--muted)}.chart .val{font-size:11px;font-weight:800;fill:var(--ink)}
.kit{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.kit-item{margin:0;background:var(--surface);border-radius:var(--r-lg);padding:12px;box-shadow:var(--shadow);border:1px solid var(--card-line);display:grid;gap:10px}
.kit-item img{width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface2)}
.kit-poster img{max-width:300px;margin:0 auto}
.kit-item figcaption{display:grid;gap:8px}

@media (min-width:720px){
  .feats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ways3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
  .kit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-head{grid-template-columns:auto minmax(0,1fr) auto}
  .dash-head .btns{grid-column:auto}
  .ways3 .way{grid-template-columns:minmax(0,1fr);align-content:start}
  .ways3 .way .ic{grid-row:auto}
  .ways3 .way .pill{grid-column:1}
  .types{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1000px){
  .wiz-body{grid-template-columns:minmax(0,1fr) 380px;align-items:start}
  .wiz-preview{display:block;position:sticky;top:80px}
  .bhero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;padding-top:56px;padding-bottom:56px}
  .phone-2{display:block;transform:translateY(40px)}
  .types{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wiz-toggle{display:none}
}