/* Estilos do Studiy. Cores, raios, tipo e movimento: SOMENTE via tokens (css/tokens.css). */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: var(--font); font-size: var(--fs-md); line-height: 1.55;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--link); text-underline-offset: .18em; }
img, svg { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--surface); color: var(--text); padding: 10px 14px; border-radius: var(--r-sm); z-index: 100; box-shadow: var(--shadow-2); }
.skip:focus { top: 8px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Ícones (máscaras SVG; a cor vem de currentColor) ---------- */
:root {
  --ico-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
  --ico-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.2 6.3L21 10.5l-6.2 2.3L12 19.5l-2.8-6.7L3 10.5l6.8-2.2z'/%3E%3C/svg%3E");
  --ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4-6 8-6s7 2 8 6'/%3E%3C/svg%3E");
  --ico-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M5 20h14'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  --ico-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E");
  --ico-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E");
  --ico-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --ico-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M7 11l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
  --ico-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E");
  --ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7v.5'/%3E%3C/svg%3E");
}
.i-user { --ico: var(--ico-user); } .i-upload { --ico: var(--ico-upload); } .i-check { --ico: var(--ico-check); }
.i-trash { --ico: var(--ico-trash); } .i-play { --ico: var(--ico-play); } .i-eye { --ico: var(--ico-eye); }
.i-download { --ico: var(--ico-download); } .i-sparkle { --ico: var(--ico-sparkle); } .i-home { --ico: var(--ico-home); }

/* Botões: css/buttons.css */

.i-sun { display: none; }
html[data-theme="dark"] .i-sun { display: inline; }
html[data-theme="dark"] .i-moon { display: none; }

/* ---------- Campos ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  width: 100%; min-height: var(--btn-h); padding: 12px 16px;
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--control-line); border-radius: var(--r-btn);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.field input:hover { border-color: var(--text-muted); }
.field input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
.field input[aria-invalid="true"], .field input:user-invalid { border-color: var(--danger); }
.field .hint { font-size: var(--fs-xs); color: var(--text-muted); margin: 6px 0 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); margin-bottom: 18px; }
.check input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--accent); }

/* ---------- Mensagens (sempre ícone + texto: nunca só cor) ---------- */
.msg { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); margin-bottom: 16px; overflow-wrap: anywhere; }
.msg::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: currentColor; -webkit-mask: var(--ico-info) center / contain no-repeat; mask: var(--ico-info) center / contain no-repeat; }
.msg.error { background: var(--danger-soft); color: var(--text); box-shadow: inset 3px 0 0 var(--danger); }
.msg.error::before { background: var(--danger); }
.msg.error::before { -webkit-mask-image: var(--ico-alert); mask-image: var(--ico-alert); }
.msg.info { background: var(--info-soft); color: var(--text); box-shadow: inset 3px 0 0 var(--info); }
.msg.info::before { background: var(--info); }
.msg .btn { margin-left: auto; }

/* ---------- Marca ---------- */
/* Tipografia editorial compartilhada (landing, auth, painel) */
.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.display {
  margin: 0; font-size: var(--fs-display); font-weight: var(--fw-display);
  letter-spacing: var(--ls-display); line-height: var(--lh-display);
  text-transform: uppercase; text-wrap: initial;
}
.logo-dot { color: var(--dot); }

.logo { font-size: 20px; font-weight: 900; letter-spacing: -.04em; color: inherit; text-decoration: none; }

/* Landing: css/landing.css */
/* Autenticação: css/auth.css. Compartilhados com pagamento, admin e páginas legais: */
.auth-top { position: fixed; top: 16px; right: 16px; z-index: 10; }
/* "Voltar": link discreto, não um segundo botão competindo com o principal */
.back-home { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h); margin-bottom: 24px; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.back-home::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ico-arrow-left) center / contain no-repeat; mask: var(--ico-arrow-left) center / contain no-repeat; transition: transform var(--dur-2) var(--ease-spring); }
.back-home:hover { color: var(--text); }
.back-home:hover::before { transform: translateX(-3px); }


/* ---------- Páginas legais ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 32px) 96px; }
.legal .bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.legal .logo { color: var(--text); text-decoration: none; }
.legal h1 { margin-bottom: 16px; font-size: clamp(44px, 7vw, 96px); font-weight: 900; letter-spacing: -.055em; line-height: .9; text-transform: uppercase; overflow-wrap: anywhere; }
.legal h2 { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--text); font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.025em; }
.legal li { margin-bottom: 6px; }
.legal .meta { color: var(--text-muted); }
.legal table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal th { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }

/* Painel: css/painel.css */

/* ---------- Diálogos e revisão ---------- */
dialog { border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--text); padding: 28px; width: min(520px, calc(100vw - 32px)); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
dialog[open] { animation: entra var(--dur-2) var(--ease); }
dialog::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog[open]::backdrop { animation: aparece var(--dur-2) var(--ease); }
dialog h2 { font-size: var(--fs-xl); margin-bottom: 14px; }
dialog.wide { width: min(640px, calc(100vw - 32px)); max-height: 90vh; max-height: 90dvh; overflow-y: auto; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; }
@keyframes entra { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Toasts (ícone + texto; erro também anuncia) ---------- */
.toasts { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-2); font-size: 15px; animation: entra var(--dur-2) var(--ease); }
.toast::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: currentColor; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
.toast.error { background: var(--danger); color: var(--on-danger); }
.toast.error::before { -webkit-mask-image: var(--ico-alert); mask-image: var(--ico-alert); }

/* ---------- Perfil ---------- */
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 750; font-size: 15px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.lg { width: 88px; height: 88px; font-size: 30px; }
.acc-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 8px; }
.acc-name { font-size: var(--fs-xl); font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.acc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.acc-section { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.acc-section h3 { font-size: var(--fs-md); margin-bottom: 10px; }
details.acc-section summary { cursor: pointer; font-weight: 650; min-height: var(--control-h); display: flex; align-items: center; }
details.acc-section form { margin-top: 10px; }

/* ---------- Onboarding (primeiro acesso) ---------- */
.onb-back { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: var(--backdrop); animation: aparece var(--dur-2) var(--ease); }
.onb { width: 100%; max-width: 440px; background: var(--surface); color: var(--text); border-radius: var(--r-lg); padding: 28px 24px 22px; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); animation: entra var(--dur-2) var(--ease); }
.onb h2 { margin: 0 0 4px; font-size: var(--fs-xl); }
.onb p { margin: 0 0 18px; color: var(--text-muted); }
.onb ol { list-style: none; counter-reset: passo; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.onb li { counter-increment: passo; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.onb li::before { content: counter(passo); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 750; }
.onb li strong { display: block; }
.onb li span { color: var(--text-muted); font-size: var(--fs-sm); }
.onb-actions { display: flex; justify-content: flex-end; }