/* USB Link — site. Mesmos tokens do app (src/style.css): azul #1f6feb, Segoe UI, cartões de 16px. */
:root {
  --blue: #1f6feb; --blue-strong: #165ad1; --blue-deep: #0f3fa8; --blue-50: #eef4ff; --blue-100: #dde9ff; --blue-200: #c3d7fb;
  --ink: #0d1a33; --text: #26324a; --muted: #5b6880; --subtle: #8592a8;
  --line: #e2e8f2; --line-soft: #edf1f7; --surface: #ffffff; --surface-2: #f8fafd; --hover: #f1f5fb; --kind: #eef1f6; --bg: #f6f7fa; --text-2: #3c4a63; --icon: #41506a;
  --green: #18a957; --green-ink: #11803f; --green-50: #eaf8f0; --green-100: #d3f0df;
  --red: #d93a3a; --red-ink: #c22f2f; --red-50: #fff3f2; --red-100: #fadad7;
  --amber: #d99a1e; --amber-ink: #9a6a12; --amber-50: #fff7e6; --amber-100: #f7e3b5;
  --shadow-sm: 0 1px 2px #0d1a330a, 0 1px 1px #0d1a3305;
  --shadow-md: 0 8px 24px -12px #1f3c7a33, 0 2px 6px #0d1a330a;
  --shadow-lg: 0 24px 48px -24px #1f3c7a4d, 0 4px 12px #0d1a330d;
  --header-bg: #ffffffd9;
  --hero-glow: radial-gradient(900px 420px at 88% -10%, #dce9ff 0%, #eaf2ff 40%, transparent 72%);
  --demo-card-bg: linear-gradient(120deg, #ffffffee 0%, #ffffffd9 60%, #f3f7ffd9 100%);
  color-scheme: light;
  font-family: 'Segoe UI Variable Text', 'Segoe UI Variable', 'Segoe UI', Inter, system-ui, -apple-system, Arial, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --blue: #4c8dff; --blue-strong: #3a7cf0; --blue-deep: #9cc0ff; --blue-50: #14264a; --blue-100: #1d3766; --blue-200: #2d4d88;
  --ink: #eef3fc; --text: #d3dbea; --text-2: #b4c0d6; --icon: #a9b6cc; --muted: #8f9db6; --subtle: #76839c;
  --line: #26324b; --line-soft: #1d2840; --surface: #121b2d; --surface-2: #0f1727; --hover: #18233a; --kind: #1c2740; --bg: #0a111e;
  --green: #2ec27e; --green-ink: #63d99c; --green-50: #0f281c; --green-100: #1a4330;
  --red: #ff6b6b; --red-ink: #ff9090; --red-50: #2a1418; --red-100: #4a2229;
  --amber: #e5b75a; --amber-ink: #e5b75a; --amber-50: #2a2110; --amber-100: #4a3a18;
  --shadow-sm: 0 1px 2px #00000059;
  --shadow-md: 0 12px 32px -14px #000000b3, 0 2px 6px #00000059;
  --shadow-lg: 0 28px 56px -24px #000000cc, 0 4px 12px #00000066;
  --header-bg: #0d1526d9;
  --hero-glow: radial-gradient(900px 420px at 88% -10%, #17305e 0%, #11203f 40%, transparent 72%);
  --demo-card-bg: linear-gradient(120deg, #131d31f0 0%, #121b2de6 60%, #15244299 100%);
}
/* Sem JavaScript: segue o sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --blue: #4c8dff; --blue-strong: #3a7cf0; --blue-deep: #9cc0ff; --blue-50: #14264a; --blue-100: #1d3766; --blue-200: #2d4d88;
    --ink: #eef3fc; --text: #d3dbea; --text-2: #b4c0d6; --icon: #a9b6cc; --muted: #8f9db6; --subtle: #76839c;
    --line: #26324b; --line-soft: #1d2840; --surface: #121b2d; --surface-2: #0f1727; --hover: #18233a; --kind: #1c2740; --bg: #0a111e;
    --green: #2ec27e; --green-ink: #63d99c; --green-50: #0f281c; --green-100: #1a4330;
    --red: #ff6b6b; --red-ink: #ff9090; --red-50: #2a1418; --red-100: #4a2229;
    --amber: #e5b75a; --amber-ink: #e5b75a; --amber-50: #2a2110; --amber-100: #4a3a18;
    --header-bg: #0d1526d9;
    --hero-glow: radial-gradient(900px 420px at 88% -10%, #17305e 0%, #11203f 40%, transparent 72%);
    --demo-card-bg: linear-gradient(120deg, #131d31f0 0%, #121b2de6 60%, #15244299 100%);
  }
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 80px }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--hero-glow), var(--bg); background-repeat: no-repeat; color: var(--text) }
main { flex: 1; min-width: 0; overflow-x: clip }
button, input, select, textarea { font: inherit; color: inherit }
a { color: var(--blue); text-decoration: none }
a:hover { text-decoration: underline }
h1, h2, h3 { color: var(--ink); margin: 0 }
p { margin: 0 }
.icon { width: 20px; height: 20px; flex-shrink: 0 }
[hidden] { display: none !important }
:focus-visible { outline: 3px solid #8db4ff; outline-offset: 2px }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 10px; background: var(--blue); color: #fff }
.skip-link:focus { top: 12px }
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px }
.container.narrow { max-width: 820px }
.muted { color: var(--muted) }
.small { font-size: 13px }
.mono { font-family: 'Cascadia Code', Consolas, monospace }
.nowrap { white-space: nowrap }
.right { text-align: right }
.inline-form { display: inline-flex; margin: 0 }

/* ---------- Cabeçalho ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line) }
.header-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 24px }
.wordmark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none !important; flex-shrink: 0 }
.wordmark > svg { width: 26px; height: 28px; color: var(--blue) }
.wordmark strong { font-size: 19px; font-weight: 750; letter-spacing: -.3px; line-height: 1; white-space: nowrap }
.wordmark em { font-style: normal; color: var(--blue) }
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; flex: 1; min-width: 0 }
.site-nav a { padding: 8px 12px; border-radius: 9px; color: var(--text-2); font-size: 14.5px; font-weight: 500; white-space: nowrap }
.site-nav a:hover { background: var(--hover); color: var(--ink); text-decoration: none }
.site-nav-spacer { flex: 1 }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto }

/* ---------- Botões (mesmo estilo do app) ---------- */
.primary-button, .secondary-button, .danger-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 9px 16px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; cursor: pointer; text-decoration: none !important; transition: background .16s, border-color .16s, box-shadow .16s, color .16s, transform .16s }
.primary-button .icon, .secondary-button .icon, .danger-button .icon, .ghost-button .icon { width: 18px; height: 18px }
.primary-button { color: #fff; background: linear-gradient(180deg, #3a83f5, var(--blue)); border: 1px solid var(--blue-strong); box-shadow: 0 6px 14px -6px #1f6feb99 }
.primary-button:hover:not(:disabled) { background: linear-gradient(180deg, #2f78ee, var(--blue-strong)); color: #fff }
.secondary-button { color: var(--text); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm) }
.secondary-button:hover:not(:disabled) { background: var(--hover); border-color: var(--blue-200); color: var(--ink) }
.ghost-button { color: var(--text-2); background: transparent; border: 1px solid transparent }
.ghost-button:hover:not(:disabled) { background: var(--hover); color: var(--ink) }
.danger-button { color: var(--red-ink); background: var(--red-50); border: 1px solid var(--red-100) }
.danger-button:hover:not(:disabled) { background: #ffe8e6; border-color: #f3c3be }
:root[data-theme=dark] .danger-button:hover:not(:disabled) { background: #371a1f; border-color: #5a2a31 }
.danger-button .icon { color: var(--red) }
.primary-button.large, .secondary-button.large { min-height: 54px; padding: 12px 24px; border-radius: 13px; font-size: 16px; gap: 12px }
.primary-button.large .icon { width: 20px; height: 20px }
.compact { min-height: 38px; padding: 7px 13px; font-size: 14px }
.wide { width: 100% }
button:disabled { cursor: not-allowed; opacity: .55 }
button[aria-busy=true] { cursor: wait }
button:active:not(:disabled) { transform: translateY(1px) }

/* ---------- Alternar tema (igual ao app) ---------- */
.theme-toggle { position: relative; display: flex; align-items: center; flex-shrink: 0; width: 58px; height: 30px; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--icon); cursor: pointer; margin-left: 4px }
.theme-toggle .icon { position: absolute; top: 6px; width: 16px; height: 16px }
.theme-toggle .theme-sun { left: 7px; color: #e3a008 }
.theme-toggle .theme-moon { right: 7px; color: var(--blue) }
.theme-toggle .theme-thumb { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 4px #0d1a3340; transition: transform .2s ease }
.theme-toggle[aria-pressed=true] .theme-thumb { transform: translateX(28px) }
:root[data-theme=dark] .theme-toggle .theme-thumb { background: #2a3a5c }
.theme-toggle:hover { border-color: var(--blue-200) }

/* ---------- Elementos do app ---------- */
.card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm) }
.eyebrow { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: .7px; color: var(--blue); margin-bottom: 6px }
.access-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; letter-spacing: .4px; color: var(--blue); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 999px; padding: 5px 12px }
.access-pill .icon { width: 15px; height: 15px }
.access-tile { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: linear-gradient(145deg, #5ea0ff 0%, #1f6feb 55%, #0f3fa8 100%); box-shadow: 0 12px 24px -10px #1f6feb99, inset 0 1px 0 #ffffff55 }
.access-tile .icon { width: 38px; height: 38px; stroke-width: 1.6 }
.access-tile.small { width: 52px; height: 52px; border-radius: 15px }
.access-tile.small .icon { width: 26px; height: 26px }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 13.5px; color: var(--ink); white-space: nowrap }
.chip .icon { width: 16px; height: 16px; color: var(--blue) }
.status-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; font-size: 12.5px; font-weight: 650; padding: 5px 12px; white-space: nowrap; border: 1px solid transparent }
.status-pill > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor }
.status-pill.neutral { background: var(--blue-50); color: var(--blue); border-color: var(--blue-100) }
.status-pill.neutral > i { display: none }
.status-pill.green { background: var(--green-50); color: var(--green-ink); border-color: var(--green-100) }
.status-pill.red { background: var(--red-50); color: var(--red-ink); border-color: var(--red-100) }
.status-pill.amber { background: var(--amber-50); color: var(--amber-ink); border-color: var(--amber-100) }
.count-badge { min-width: 30px; height: 28px; padding: 0 8px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 13.5px; font-weight: 650; color: var(--blue); background: var(--blue-50); border: 1px solid var(--blue-100) }
.inline-feedback { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px; border-radius: 12px; border: 1px solid var(--blue-100); background: var(--blue-50); color: #1d4fa8; font-size: 14px; line-height: 1.5 }
:root[data-theme=dark] .inline-feedback { color: #9cc0ff }
.inline-feedback .icon { width: 18px; height: 18px }
.inline-feedback > span { flex: 1; min-width: 0; overflow-wrap: anywhere }
.inline-feedback.error { background: var(--red-50); border-color: var(--red-100); color: var(--red-ink) }
.inline-feedback.success { background: var(--green-50); border-color: var(--green-100); color: var(--green-ink) }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 56px; overflow-x: clip }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center }
.hero h1 { font-size: 52px; line-height: 1.05; font-weight: 800; letter-spacing: -1.6px; margin: 18px 0 16px }
.hero h1 .accent { color: var(--blue) }
.lead { font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 560px }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px }
.hero-chips { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px }
.hero-visual { position: relative; min-height: 380px }
.hero-art { position: absolute; right: -40px; top: -10px; width: 520px; max-width: 120%; height: auto; pointer-events: none; filter: drop-shadow(0 18px 24px #1f4fb02e) }
:root[data-theme=dark] .hero-art .hero-glow { opacity: .32 }
:root[data-theme=dark] .hero-art .hero-lines { opacity: .18 }
:root[data-theme=dark] .hero-art { filter: drop-shadow(0 18px 26px #00000080) }
.demo-card { position: absolute; left: 0; bottom: 64px; width: min(400px, 92%); display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--demo-card-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: var(--shadow-lg) }
.demo-card .access-tile { width: 64px; height: 64px; border-radius: 17px }
.demo-card .access-tile .icon { width: 32px; height: 32px }
.code-value { font-family: 'Cascadia Code', Consolas, monospace; font-size: 34px; font-weight: 650; letter-spacing: 6px; color: var(--blue-deep); line-height: 1.2; margin: 6px 0 2px; white-space: nowrap }
.access-status { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2) }
.access-status > i { width: 10px; height: 10px; border-radius: 50%; background: #b4bdcc }
.access-status.ready > i { background: var(--green); box-shadow: 0 0 0 3px #18a95722 }
.device-demo { position: absolute; right: 0; bottom: 0; width: min(360px, 88%); display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: linear-gradient(90deg, #effaf3, #f4fbf7); border-color: #dcf1e4; box-shadow: var(--shadow-md) }
:root[data-theme=dark] .device-demo { background: linear-gradient(90deg, #0f2a1e, #10241b); border-color: #1b4430 }
.device-symbol { position: relative; width: 50px; height: 50px; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; background: #e6f6ec; border: 1px solid #d0ecdb; color: var(--ink) }
:root[data-theme=dark] .device-symbol { background: #133624; border-color: #1f5137 }
.device-symbol .icon { width: 24px; height: 24px; stroke-width: 1.6 }
.device-badge { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 2px solid var(--surface); display: grid; place-items: center; color: #fff }
.device-badge .icon { width: 13px; height: 13px; stroke-width: 2.6 }
.device-name { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start }
.device-name strong { font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.shared-note { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: #d9f2e3; color: var(--green-ink); font-size: 12.5px; font-weight: 600 }
:root[data-theme=dark] .shared-note { background: #16412c }
.shared-note .icon { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 3 }

/* ---------- Seções ---------- */
.section { padding: 72px 0 }
.section.alt { background: var(--surface-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft) }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 36px }
.section-head.left { text-align: left; margin: 0 }
.section-head h2 { font-size: 34px; line-height: 1.15; font-weight: 780; letter-spacing: -.8px }
.section-head p { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--text-2) }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.feature-card { padding: 24px 22px }
.feature-card h3 { font-size: 17px; font-weight: 700; margin: 16px 0 8px }
.feature-card p { font-size: 14.5px; line-height: 1.6; color: var(--muted) }
.feature-icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue); flex-shrink: 0 }
.feature-icon .icon { width: 24px; height: 24px }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: none }
.step-card { position: relative; padding: 26px 24px 24px; box-shadow: var(--shadow-md) }
.step-number { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 18px; font-weight: 750; color: #fff; background: linear-gradient(145deg, #5ea0ff 0%, #1f6feb 55%, #0f3fa8 100%); box-shadow: 0 10px 20px -10px #1f6feb99 }
.step-card h3 { font-size: 18px; font-weight: 700; margin: 16px 0 8px }
.step-card p { color: var(--muted); line-height: 1.6 }
.pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: center }
.pricing-card { padding: 28px; box-shadow: var(--shadow-lg); border-color: var(--blue-100) }
.pricing-top { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line-soft) }
.price { display: flex; align-items: baseline; gap: 6px; color: var(--muted) }
.price-value { font-size: 44px; font-weight: 800; letter-spacing: -1.4px; color: var(--ink); line-height: 1.05 }
.price-value.text { font-size: 34px; letter-spacing: -.8px }
.check-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px }
.check-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--text) }
.check-list .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--green-50); color: var(--green-ink); stroke-width: 2.6; margin-top: 1px }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 960px; margin: 0 auto }
.download-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; padding: 24px; align-items: start }
.download-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px }
.download-card p { color: var(--muted); line-height: 1.6 }
.download-card > a { grid-column: 2; justify-self: start }
.faq { display: grid; gap: 10px }
.faq details { padding: 0; overflow: hidden }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 650; color: var(--ink); font-size: 16px }
.faq summary::-webkit-details-marker { display: none }
.faq summary:hover { background: var(--hover) }
.faq-chevron { width: 18px; height: 18px; color: var(--muted); transition: transform .2s }
.faq details[open] .faq-chevron { transform: rotate(90deg); color: var(--blue) }
.faq details p { padding: 0 20px 18px; color: var(--text-2); line-height: 1.65 }
.cta-section { padding-top: 24px }
.cta-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 36px; background: linear-gradient(120deg, var(--blue-50), var(--surface) 70%); border-color: var(--blue-100); box-shadow: var(--shadow-md) }
.cta-card h2 { font-size: 26px; font-weight: 750; letter-spacing: -.5px }
.cta-card p { margin-top: 6px; color: var(--text-2) }

/* ---------- Rodapé ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface-2); margin-top: 48px }
.footer-inner { max-width: 1160px; margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; font-size: 13.5px; color: var(--muted) }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink) }
.footer-brand svg { width: 18px; height: 20px; color: var(--blue) }

/* ---------- Formulários / autenticação ---------- */
.auth-wrap { padding: 56px 24px }
.auth-grid { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 40px; align-items: center }
.auth-card { padding: 30px; box-shadow: var(--shadow-lg) }
.auth-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px }
.auth-head h1 { font-size: 26px; font-weight: 780; letter-spacing: -.6px }
.auth-head p { color: var(--muted); margin-top: 2px }
.auth-aside { padding: 8px 4px }
.auth-aside h2 { font-size: 20px; font-weight: 720; margin-bottom: 18px }
.mini-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.mini-steps li { display: flex; align-items: center; gap: 12px; color: var(--text-2) }
.mini-steps span { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue); font-weight: 700; font-size: 14px }
.form { display: grid; gap: 16px }
.field { display: grid; gap: 7px; min-width: 0 }
.field > span { font-size: 14px; font-weight: 600; color: var(--ink) }
.field small { font-size: 12.5px; color: var(--muted) }
.field input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); color: var(--ink); font-size: 15px; transition: border-color .15s, box-shadow .15s, background .15s }
.field input:focus { outline: none; border-color: #8db4ff; box-shadow: 0 0 0 3px #1f6feb1f; background: var(--surface) }
.field input:user-invalid { border-color: #e59a9a; box-shadow: 0 0 0 3px #d93a3a14 }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.field-inline { display: flex; gap: 10px }
.field-inline input { flex: 1; min-width: 0 }
.form-foot { text-align: center; font-size: 14px; color: var(--muted) }
.form .primary-button.wide { margin-top: 4px; min-height: 48px; font-size: 15px }
.error-wrap { padding: 72px 24px }
.error-card { padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px }
.error-card h1 { font-size: 28px; font-weight: 780 }
.error-card p { color: var(--muted); margin-bottom: 12px }
.error-card .eyebrow { margin: 6px 0 0 }

/* ---------- Painel / administração ---------- */
.page { padding-top: 32px; padding-bottom: 16px }
.page-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px }
.page-hero h1 { font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -1px; overflow-wrap: anywhere }
.page-subtitle { font-size: 15px; color: var(--text-2); margin-top: 6px; overflow-wrap: anywhere }
.page-hero-extra { display: flex; align-items: center; gap: 10px; flex-shrink: 0 }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; margin-bottom: 14px }
.back-link .icon { width: 17px; height: 17px }
.panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px }
.panel-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.wide-page > .panel-card { margin-bottom: 16px }
.span-2 { grid-column: 1 / -1 }
.card-head { display: flex; align-items: center; gap: 11px; min-width: 0; flex-wrap: wrap }
.card-head > .icon { width: 22px; height: 22px; color: var(--blue) }
.card-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.2px; margin-right: auto }
.card-head h2:has(+ .count-badge) { margin-right: 0 }
.card-head .count-badge { margin-right: auto }
.card-head .push { margin-left: auto }
.license-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center }
.license-main { display: flex; flex-direction: column; gap: 6px }
.license-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-left: 24px; border-left: 1px solid var(--line-soft) }
.big-number { display: flex; align-items: baseline; gap: 10px; font-size: 46px; font-weight: 800; letter-spacing: -1.4px; color: var(--ink); line-height: 1.05 }
.big-number span { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted) }
.lead-sm { font-size: 15.5px; line-height: 1.6; color: var(--text-2) }
.hint { font-size: 13px; line-height: 1.55; color: var(--muted) }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--text-2); font-size: 14px; line-height: 1.5 }
.notice .icon { width: 18px; height: 18px; color: var(--blue); margin-top: 1px }
.empty-state { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--line); color: var(--muted); font-size: 14px; line-height: 1.5 }
.empty-state .icon { width: 26px; height: 26px; color: var(--blue); flex-shrink: 0 }
.divider { height: 1px; background: var(--line-soft); margin: 2px 0 }
.panel-card > .primary-button, .panel-card > .secondary-button { align-self: flex-start }
dl { margin: 0 }
dl > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px }
dl > div:last-child { border-bottom: 0 }
dt { color: var(--muted) }
dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; max-width: 70% }
.button-row { display: flex; flex-wrap: wrap; gap: 10px }
.date-form { padding-top: 14px; border-top: 1px solid var(--line-soft) }
.date-form .field > span { font-weight: 600; font-size: 13.5px; color: var(--text-2) }
.tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line) }
.tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 600; font-size: 14.5px }
.tabs a .icon { width: 18px; height: 18px }
.tabs a:hover { color: var(--ink); text-decoration: none }
.tabs a.active { color: var(--blue); border-bottom-color: var(--blue) }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px }
.stat-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px }
.stat-card strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.8px; color: var(--ink); line-height: 1.1 }
.stat-card span { font-size: 13.5px; color: var(--muted) }
.stat-icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue); flex-shrink: 0 }
.stat-icon.green { background: var(--green-50); border-color: var(--green-100); color: var(--green-ink) }
.stat-icon.amber { background: var(--amber-50); border-color: var(--amber-100); color: var(--amber-ink) }
.search-form { margin: 0 }
.search-field { display: flex; align-items: center; gap: 10px; height: 42px; width: 300px; max-width: 100%; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); transition: border-color .15s, box-shadow .15s }
.search-field:focus-within { border-color: #8db4ff; box-shadow: 0 0 0 3px #1f6feb1f; background: var(--surface) }
.search-field .icon { width: 18px; height: 18px; color: var(--muted) }
.search-field input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 14.5px; color: var(--ink) }
.search-field input::placeholder { color: var(--subtle) }
.table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px }
.data-table th { text-align: left; font-size: 12px; font-weight: 650; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line) }
.data-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--text) }
.data-table tbody tr:last-child td { border-bottom: 0 }
.data-table tbody tr:hover td { background: var(--hover) }
.data-table th:first-child, .data-table td:first-child { padding-left: 4px }
.row-link { display: flex; flex-direction: column; color: var(--ink) }
.row-link span { font-size: 13px; color: var(--muted) }
.row-link:hover { text-decoration: none }
.row-link:hover strong { color: var(--blue) }
.sub { display: block; font-size: 12.5px; color: var(--muted) }
.request-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px }
.request-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--surface-2) }
.request-info { display: flex; flex-direction: column; min-width: 0 }
.request-info strong { color: var(--ink) }
.request-info span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere }
.request-actions { display: flex; gap: 8px; flex-shrink: 0 }

/* ---------- Barras de rolagem ---------- */
* { scrollbar-width: thin; scrollbar-color: #b9c6dc transparent }
:root[data-theme=dark] * { scrollbar-color: #2c3a57 transparent }

/* ---------- Responsivo ---------- */
@media (max-width: 1060px) {
  .site-nav a { padding: 8px 9px; font-size: 14px }
  .hero h1 { font-size: 44px }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 900px) {
  .site-nav { display: none }
  .site-nav-spacer { display: block }
  .header-inner > .header-actions { margin-left: auto }
  .hero { padding: 40px 0 32px }
  .hero-grid, .pricing-grid, .auth-grid { grid-template-columns: minmax(0, 1fr) }
  .hero-visual { min-height: 340px; max-width: 520px; width: 100%; margin: 0 auto }
  .auth-aside { display: none }
  .auth-grid { max-width: 480px }
  .steps { grid-template-columns: minmax(0, 1fr) }
  .download-grid { grid-template-columns: minmax(0, 1fr) }
  .license-body { grid-template-columns: minmax(0, 1fr) }
  .license-actions { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--line-soft) }
  .panel-grid { grid-template-columns: minmax(0, 1fr) }
  .cta-card { flex-direction: column; align-items: flex-start }
}
@media (max-width: 640px) {
  .container, .header-inner { padding: 0 16px }
  .header-inner { gap: 10px }
  .hide-sm { display: none }
  .header-actions .compact { padding: 7px 10px }
  .wordmark strong { font-size: 17px }
  .hero h1 { font-size: 36px; letter-spacing: -1px }
  .lead { font-size: 16.5px }
  .hero-actions > a { flex: 1 1 100% }
  .hero-visual { min-height: 300px }
  .hero-art { width: 400px; right: -60px }
  .demo-card { bottom: 74px; gap: 14px; padding: 14px }
  .code-value { font-size: 26px; letter-spacing: 4px }
  .section { padding: 52px 0 }
  .section-head h2 { font-size: 27px }
  .feature-grid, .stat-grid { grid-template-columns: minmax(0, 1fr) }
  .download-card { grid-template-columns: minmax(0, 1fr) }
  .download-card > a { grid-column: 1 }
  .auth-wrap { padding: 28px 16px }
  .auth-card { padding: 22px }
  .field-row { grid-template-columns: minmax(0, 1fr) }
  .page-hero { flex-direction: column; align-items: flex-start }
  .page-hero h1 { font-size: 28px }
  .search-field { width: 100% }
  .search-form { flex: 1 1 100% }
  .request-list li { flex-direction: column; align-items: flex-start }
  .cta-card { padding: 24px }
  .cta-card .primary-button { width: 100% }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition: none !important; animation: none !important }
}