/* Layout do painel (casca). Só tokens. */
.shell{min-height:100vh;padding-bottom:calc(var(--ly-bottom-nav) + var(--sp-6))}
@media(min-width:1024px){.shell{padding-left:240px;padding-bottom:var(--sp-7)}}
.page{max-width:var(--ly-content-max);margin:0 auto;padding:var(--sp-5) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-5)}
.hello h1{font-size:var(--fs-xl);line-height:var(--lh-xl);font-weight:800}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.auth{min-height:100vh;display:grid;place-items:center;padding:var(--sp-5) var(--sp-4)}
.auth .card{width:100%;max-width:420px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
.auth h1{font-size:var(--fs-xl);font-weight:800}
.brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:800;color:var(--c-accent)}
.save-state{font-size:var(--fs-xs);color:var(--c-text-muted);display:flex;align-items:center;gap:var(--sp-1);min-height:24px}
.save-state.err{color:var(--c-danger)}
.editor-bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--c-bg) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--c-border);padding:var(--sp-2) var(--sp-4);display:flex;align-items:center;gap:var(--sp-2)}
.editor-bar .t{flex:1;min-width:0}.editor-bar .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slug-row{display:flex;align-items:stretch;border:1px solid var(--c-border-input);border-radius:var(--r-md);background:var(--c-surface-2);overflow:hidden}
.slug-row span{display:flex;align-items:center;padding:0 var(--sp-3);color:var(--c-text-muted);font-family:var(--font-mono);font-size:var(--fs-sm);border-right:1px solid var(--c-border);white-space:nowrap}
.slug-row .input{border:0;border-radius:0;font-family:var(--font-mono);font-size:var(--fs-sm)}
.slug-row:focus-within{border-color:var(--c-accent)}
.success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);padding:var(--sp-4) 0}
.success .ok{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--c-success);color:var(--c-bg)}
.success .ok .i{width:32px;height:32px}
.list{display:flex;flex-direction:column;gap:var(--sp-3)}
#toasts .toast{animation:toast-in var(--mo-base) var(--mo-ease)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}}

/* Início: cartão de boas-vindas */
.welcome{position:relative;overflow:hidden;border-radius:24px;padding:var(--sp-6) var(--sp-5);border:1px solid color-mix(in srgb,var(--c-accent) 30%,var(--c-border));
  background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--c-accent) 28%,transparent),transparent 60%),linear-gradient(160deg,var(--c-surface-2),var(--c-surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--sh-card)}
.welcome::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;border:1px solid color-mix(in srgb,var(--c-accent) 35%,transparent);box-shadow:0 0 0 28px color-mix(in srgb,var(--c-accent) 6%,transparent),0 0 0 56px color-mix(in srgb,var(--c-accent) 4%,transparent)}
.welcome h1{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:800;letter-spacing:-.02em}
.welcome .kpis{display:flex;gap:var(--sp-5);margin-top:var(--sp-5);position:relative;z-index:1}
.welcome .kpi b{display:block;font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums}
.welcome .kpi span{font-size:var(--fs-xs);color:var(--c-text-muted);font-weight:600}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.tile{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);border-radius:20px;text-decoration:none;color:var(--c-text);background:var(--c-surface);border:1px solid var(--c-border);min-height:112px;transition:transform var(--mo-fast) var(--mo-ease),border-color var(--mo-fast)}
.tile:hover{transform:translateY(-2px);border-color:var(--c-border-input)}
.tile .ti{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--c-accent-soft);color:var(--c-accent)}
.tile.primary{background:linear-gradient(160deg,color-mix(in srgb,var(--c-accent) 92%,#fff),var(--c-accent));color:var(--c-on-accent);border-color:transparent;box-shadow:0 14px 30px -14px var(--c-accent)}
.tile.primary .ti{background:rgba(255,255,255,.3);color:var(--c-on-accent)}
.tile b{font-size:var(--fs-base)}.tile small{font-size:var(--fs-xs);opacity:.8;margin-top:-8px}
.h-label{font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-muted)}

/* Editor com prévia ao vivo */
.editor-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6);padding:0 var(--sp-4)}
.editor-grid>.page{padding-left:0;padding-right:0;max-width:none;width:100%}
.preview-col{display:none}
@media(min-width:1100px){
  .editor-grid{grid-template-columns:minmax(0,1fr) 380px}
  .preview-col{display:block;position:sticky;top:76px;align-self:start;padding-top:var(--sp-5)}
  .btn-preview{display:none!important}
}
.device{width:100%;aspect-ratio:9/19;border-radius:44px;padding:10px;background:linear-gradient(160deg,#2a3350,#0d1220);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08)}
.device iframe{width:100%;height:100%;border:0;border-radius:34px;background:#fff;display:block}
.preview-cap{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3);font-size:var(--fs-xs);color:var(--c-text-muted);font-weight:700}
.preview-cap .live{display:inline-flex;align-items:center;gap:6px}.preview-cap .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-success);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-success) 25%,transparent)}
dialog.full{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:var(--c-bg);color:var(--c-text)}
dialog.full[open]{display:flex;flex-direction:column}
dialog.full iframe{flex:1;border:0;width:100%;background:#fff}
dialog.full .bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);border-bottom:1px solid var(--c-border)}

@media(min-width:1024px){.shell.no-nav{padding-left:0}}

/* ---------- editor completo ---------- */
.style-pick{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.style-pick{grid-template-columns:repeat(4,1fr)}}
.style-pick .mini{display:flex;height:56px;border-radius:10px;overflow:hidden;margin-bottom:var(--sp-2);border:1px solid var(--c-border);background:var(--a);padding:8px;gap:5px;flex-direction:column}
.style-pick .mini i{display:block;height:10px;border-radius:4px;background:var(--b)}
.style-pick .mini i:first-child{width:60%;background:var(--c)}
.font-pick{grid-template-columns:repeat(4,1fr)}
.font-pick .choice{text-align:center;padding:var(--sp-3) var(--sp-2)}
.font-pick .aa{font-size:24px}
.thumb{background-size:cover;background-position:center}
.thumb.wide{width:96px;height:64px}
.uploader .btn{position:relative}
.product-row{display:flex;gap:var(--sp-4);align-items:flex-start;flex-wrap:wrap}
.product-row>.field{flex:0 0 auto}
.product-row .uploader{flex-direction:column;align-items:flex-start}
.product-row .uploader .help{display:none}
.rep-actions{display:flex;margin:-12px -10px -12px 0}
.rep-actions .icon-btn{width:40px;height:40px}
.rep-actions .icon-btn:disabled{opacity:.3}
.stats-edit{display:grid;gap:var(--sp-2)}
.stat-edit{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--sp-2)}
.hours-row{grid-template-columns:96px minmax(0,1fr) auto minmax(0,1fr)}
.client-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--c-border);border-radius:14px;background:var(--c-bg)}
.client-row .meta{flex:1;min-width:0}.client-row .meta b{display:block}.client-row small{color:var(--c-text-muted);font-size:var(--fs-xs)}
.avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--c-accent-soft);color:var(--c-accent);font-weight:800;flex:none}
.avatar.lg{width:56px;height:56px;border-radius:16px;font-size:var(--fs-lg)}
.sheet-head h2 .i{vertical-align:-3px;margin-right:4px;color:var(--c-accent)}
@media(max-width:480px){.client-row .btn{display:none}}

/* ---------- financeiro ---------- */
.month-nav{display:flex;align-items:center;justify-content:space-between;background:var(--c-surface);border:1px solid var(--c-border);border-radius:16px;padding:4px}
.month-nav b{text-transform:capitalize}
.tx{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ico meta amt" "ico meta act";align-items:center;column-gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:16px;background:var(--c-surface);border:1px solid var(--c-border)}
.tx-ico{grid-area:ico;width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.tx-ico.in{background:color-mix(in srgb,var(--c-success) 16%,transparent);color:var(--c-success)}
.tx-ico.out{background:color-mix(in srgb,var(--c-danger) 16%,transparent);color:var(--c-danger)}
.tx .meta{grid-area:meta;min-width:0}.tx .meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-sm)}
.tx .meta small{font-size:var(--fs-xs);color:var(--c-text-muted)}.tx .meta .open{color:var(--c-warning);font-weight:700}
.tx .amt{grid-area:amt;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tx .amt.pos{color:var(--c-success)}.tx .amt.neg{color:var(--c-danger)}
.tx [data-pay]{grid-area:act;justify-self:end;min-height:32px;padding:0 var(--sp-3)}
.tx [data-del]{display:none}
@media(min-width:640px){.tx{grid-template-columns:auto 1fr auto auto auto;grid-template-areas:"ico meta amt act del"}.tx [data-del]{display:inline-grid;grid-area:del}}
/* estilo exclusivo do operador: destacado no seletor para não ir por engano a um cliente */
.style-pick .choice:has(input[value=autoral]){border-style:dashed;border-color:color-mix(in srgb,#d8c7a3 60%,transparent)}
.style-pick .choice:has(input[value=autoral]) small{color:#d8c7a3}
@media(min-width:640px){.style-pick{grid-template-columns:repeat(5,1fr)}}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.chips .chip .i{width:14px;height:14px;vertical-align:-2px;margin-right:2px}

/* domínio próprio */
.dom-row{display:flex;gap:8px}.dom-row .input{flex:1;min-width:0}
.domain-card{border:1px solid var(--c-border);border-radius:16px;padding:var(--sp-4);background:var(--c-bg);display:flex;flex-direction:column;gap:var(--sp-3)}
.dns{border:1px solid var(--c-border);border-radius:12px;overflow:hidden}
.dns-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 4px 4px 14px;background:var(--c-surface)}
.dns-row+.dns-row{border-top:1px solid var(--c-border)}
.dns-row span{font-size:var(--fs-xs);color:var(--c-text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.dns-row b{font-size:var(--fs-sm);word-break:break-all}
.dns-row .icon-btn{width:40px;height:40px}

/* painel do assinante: some o que é só do dono */
.is-client [data-admin]{display:none!important}

/* ===== plataforma: conta, passo a passo, início do assinante, assinatura, clientes ===== */
.welcome .acct{position:absolute;top:12px;right:12px;z-index:2;background:color-mix(in srgb,var(--c-surface-2) 70%,transparent)}
.auth .brand{text-decoration:none}
.auth a{color:var(--c-accent)}
.input-lg{min-height:56px;font-size:var(--fs-lg)}
.wizard{min-height:100vh;max-width:560px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-8);display:flex;flex-direction:column}
.wz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-7)}
.wz-dots{display:flex;gap:6px}.wz-dots i{width:28px;height:4px;border-radius:2px;background:var(--c-surface-2)}.wz-dots i.on{background:var(--c-accent)}
.wz-body{display:flex;flex-direction:column;gap:var(--sp-5)}
.wz-body h1{font-size:clamp(1.7rem,6vw,2.2rem);line-height:1.1;font-weight:800;letter-spacing:-.02em}
.wz-body>p.muted{margin:-8px 0 0}
.wz-actions{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-3)}
.wz-actions .btn-primary{min-width:200px}
.style-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.style-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px 10px 14px;border-radius:20px;border:1.5px solid var(--c-border);background:var(--c-surface);cursor:pointer;transition:border-color var(--mo-fast),transform var(--mo-fast)}
.style-card input{position:absolute;opacity:0;inset:0;cursor:pointer}
.style-card:has(input:checked){border-color:var(--c-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent) 25%,transparent)}
.style-card:has(input:focus-visible){outline:2px solid var(--c-focus);outline-offset:2px}
.style-card .phone{display:flex;flex-direction:column;align-items:center;gap:6px;aspect-ratio:9/13;border-radius:14px;background:var(--bg);padding:16px 12px;overflow:hidden}
.style-card .phone .av{width:28px;height:28px;border-radius:50%;background:var(--ink);opacity:.85}
.style-card .phone b{font:700 15px/1.1 var(--title);color:var(--ink);text-align:center}
.style-card .phone em{width:60%;height:5px;border-radius:3px;background:var(--ink);opacity:.25}
.style-card .phone .c{width:100%;height:18px;border-radius:7px;background:var(--card);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.style-card .nm{font-weight:800;margin-top:6px}.style-card small{color:var(--c-text-muted);font-size:var(--fs-xs)}
.done{align-items:center;text-align:center;margin-top:var(--sp-6)}
.ok-big{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--c-success);color:var(--c-bg)}.ok-big .i{width:38px;height:38px}
.linkbox.big{width:100%;align-items:center}.linkbox.big .url{font-size:var(--fs-base);text-align:center}
.sub-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid}
.sub-banner div{display:flex;flex-direction:column}.sub-banner span{font-size:var(--fs-sm);color:var(--c-text-muted)}
.sub-banner.tone-info{border-color:var(--c-accent);background:var(--c-accent-soft)}
.sub-banner.tone-success{border-color:color-mix(in srgb,var(--c-success) 60%,transparent);background:color-mix(in srgb,var(--c-success) 10%,var(--c-surface))}
.sub-banner.tone-warning{border-color:var(--c-warning);background:color-mix(in srgb,var(--c-warning) 10%,var(--c-surface))}
.sub-banner.tone-danger{border-color:var(--c-danger);background:color-mix(in srgb,var(--c-danger) 10%,var(--c-surface))}
.my-bio{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5);border-radius:22px;background:linear-gradient(160deg,var(--c-surface-2),var(--c-surface));border:1px solid var(--c-border)}
.my-bio .logo{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;font-weight:800;font-size:var(--fs-xl);color:#fff;background:var(--av);flex:none}
.my-bio .meta{min-width:0;display:flex;flex-direction:column}.my-bio b{font-size:var(--fs-lg)}
.my-bio .url{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--c-text-muted);word-break:break-all}
.tile.wide{min-height:auto;flex-direction:row;align-items:center;flex-wrap:wrap}.tile.wide small{width:100%;margin:0}
.plan-card{padding:var(--sp-6) var(--sp-5);border-radius:24px;background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--c-accent) 22%,transparent),transparent 60%),var(--c-surface);border:1px solid var(--c-border)}
.plan-card .price{display:flex;align-items:baseline;gap:6px;margin:8px 0 14px}.plan-card .price b{font-size:2.6rem;font-weight:800;letter-spacing:-.03em}.plan-card .price span{color:var(--c-text-muted)}
.plan-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.plan-card li{display:flex;gap:10px;align-items:center}.plan-card li .i{color:var(--c-success)}
.cl-row{display:flex;flex-direction:column;gap:12px;padding:var(--sp-4);border-radius:18px;background:var(--c-surface);border:1px solid var(--c-border)}
.cl-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.cl-main .meta{display:flex;flex-direction:column;min-width:0}.cl-main small{font-size:var(--fs-xs);color:var(--c-text-muted)}
.cl-bio{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--c-accent);text-decoration:none}
.cl-st{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.cl-actions{display:flex;flex-wrap:wrap;gap:6px}
@media(min-width:760px){.cl-main{grid-template-columns:auto minmax(0,1fr) auto}.cl-st{grid-column:auto;flex-direction:column;align-items:flex-end;gap:2px}}
.asaas-box{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;border:1px dashed var(--c-border-input)}
#ch,#bl{display:flex;flex-direction:column;gap:var(--sp-4)}
.linkbox.big .row{justify-content:center}
.done .btn-ghost.btn-lg{border:1px solid var(--c-border);background:var(--c-surface)}

/* marca vemdebio.site */
.brand-logo{height:28px;width:auto;display:block}
.wz-top .brand-logo{height:24px}