/* 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}}
