@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --cnp-bg: #f8f8f8;
  --cnp-surface: #ffffff;
  --cnp-surface-warm: #fbfaf8;
  --cnp-ink: #363636;
  --cnp-body: #55535f;
  --cnp-muted: #6f6d7a;
  --cnp-brand: #00a99d;
  --cnp-deep: #0a6561;
  --cnp-deep-hover: #003333;
  --cnp-mint-soft: #e6f6f3;
  --cnp-mint: #d3efea;
  --cnp-brand-line: #b0e2da;
  --cnp-line: #eaeaea;
  --cnp-buy: #1baf1b;
  --cnp-warning-bg: #fff4cc;
  --cnp-error: #a12622;
  --cnp-error-bg: #fde4e3;
  --cnp-shadow: 0 20px 55px rgba(0, 51, 51, 0.08);
  --cnp-shadow-soft: 0 10px 28px rgba(0, 51, 51, 0.055);
  --cnp-radius-card: 16px;
  --cnp-radius-field: 8px;
}

* { box-sizing: border-box; }

html { background: var(--cnp-bg); scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--cnp-body);
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 169, 157, 0.105), transparent 28rem),
    linear-gradient(180deg, #fbfaf8 0, var(--cnp-bg) 28rem);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { color: var(--cnp-ink); background: var(--cnp-mint); }

a { color: var(--cnp-deep); text-underline-offset: 3px; }
a:hover { color: var(--cnp-deep-hover); }

h1, h2, h3 {
  color: var(--cnp-ink);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: 1.25rem; }

button,
.button,
.download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--cnp-line);
  border-radius: 999px;
  padding: 0 20px;
  font: inherit;
  font-weight: 700;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

button { color: var(--cnp-ink); background: var(--cnp-surface); cursor: pointer; }
button:hover, .button:hover, .download:hover { border-color: var(--cnp-brand-line); transform: translateY(-1px); }
button:active, .button:active, .download:active { transform: translateY(0); }
button:disabled { color: var(--cnp-muted); background: var(--cnp-line); cursor: not-allowed; opacity: 1; }

button.primary,
.button,
.download {
  border-color: var(--cnp-deep);
  color: #fff;
  background: var(--cnp-deep);
  box-shadow: 0 8px 18px rgba(10, 101, 97, 0.18);
  text-decoration: none;
}

button.primary:hover,
.button:hover,
.download:hover {
  border-color: var(--cnp-deep-hover);
  color: #fff;
  background: var(--cnp-deep-hover);
}

button.checkout {
  border-color: var(--cnp-buy);
  color: var(--cnp-deep-hover);
  background: var(--cnp-buy);
}

button.checkout:hover { border-color: var(--cnp-deep-hover); color: #fff; background: var(--cnp-deep-hover); }

button.danger { border-color: #e9aaa7; color: var(--cnp-error); background: #fff; }
button.danger:hover { border-color: var(--cnp-error); background: var(--cnp-error-bg); }

button:focus-visible,
.button:focus-visible,
.download:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(10, 101, 97, 0.24);
  outline-offset: 3px;
}

input,
textarea,
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d7d6da;
  border-radius: var(--cnp-radius-field);
  padding: 10px 12px;
  color: var(--cnp-ink);
  background: var(--cnp-surface);
  font: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

input:hover, textarea:hover, select:hover { border-color: var(--cnp-brand-line); }
input:focus, textarea:focus, select:focus { border-color: var(--cnp-deep); box-shadow: 0 0 0 3px rgba(10, 101, 97, 0.1); outline: 0; }
input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: var(--cnp-deep); }

label { color: var(--cnp-body); font-size: 0.79rem; font-weight: 650; }

.card {
  border: 1px solid var(--cnp-line);
  border-radius: var(--cnp-radius-card);
  background: var(--cnp-surface);
  box-shadow: var(--cnp-shadow-soft);
}

.muted { color: var(--cnp-muted); }
.err, .error { color: var(--cnp-error); }
.success { color: var(--cnp-deep); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--cnp-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brand::before,
.brand .mark,
.download-page .brand span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #16beb2 0 48%, var(--cnp-deep) 49% 100%);
  box-shadow: 0 7px 16px rgba(10, 101, 97, 0.19);
  content: "CNP";
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0;
}

.brand:has(.mark)::before,
.download-page .brand::before { display: none; }

.brand .mark,
.download-page .brand span { font-size: 0; }
.brand .mark::after,
.download-page .brand span::after { content: "CNP"; font-size: 0.65rem; }

/* Portal autenticado */
body.portal-page { min-width: 320px; color: var(--cnp-body); background-color: var(--cnp-bg); }

.portal-page header {
  min-height: 70px;
  border-bottom: 1px solid var(--cnp-line);
  padding: 13px clamp(18px, 4vw, 44px);
  color: var(--cnp-ink);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.portal-page header h1 { color: var(--cnp-ink); font-size: 1rem; letter-spacing: -0.01em; }
.portal-page header h1::before { content: "CNP"; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; border-radius: 10px; color: #fff; background: linear-gradient(145deg, var(--cnp-brand), var(--cnp-deep)); font-size: 0.58rem; letter-spacing: 0; vertical-align: middle; }
.portal-page header .who { color: var(--cnp-muted); opacity: 1; }
.portal-page button.link { min-height: 32px; color: var(--cnp-deep); text-decoration: none; }
.portal-page button.link:hover { color: var(--cnp-deep-hover); background: var(--cnp-mint-soft); }

.portal-page .center { min-height: 100vh; padding: 28px 18px; }
.portal-page .login { width: min(460px, 100%); padding: clamp(26px, 5vw, 38px); border-top: 4px solid var(--cnp-brand); box-shadow: var(--cnp-shadow); }
.portal-page .login h2 { margin-top: 24px; font-size: 1.7rem; }
.portal-page .login .muted { font-size: 0.9rem; }
.portal-page .login label { margin-top: 16px; }
.portal-page .auth-link { min-height: 32px; border: 0; padding: 2px; color: var(--cnp-deep); background: transparent; font-size: 0.8rem; font-weight: 650; text-decoration: none; }
.portal-page .auth-link:hover { color: var(--cnp-deep-hover); background: transparent; text-decoration: underline; transform: none; }

.portal-page .app-shell { grid-template-columns: 252px minmax(0, 1fr); max-width: 1440px; min-height: calc(100vh - 70px); }
.portal-page .sidebar { border-right: 1px solid var(--cnp-line); padding: 25px 18px; background: rgba(251, 250, 248, 0.86); }
.portal-page .sidebar .brand { margin: 0 8px 24px; }
.portal-page .sidebar button,
.portal-page .sidebar-link {
  min-height: 42px;
  align-items: center;
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--cnp-body);
  font-weight: 600;
}
.portal-page .sidebar button.active,
.portal-page .sidebar button:hover,
.portal-page .sidebar-link:hover { color: var(--cnp-deep); background: var(--cnp-mint-soft); }
.portal-page .sidebar button.active { box-shadow: inset 3px 0 var(--cnp-brand); }

.portal-page .wrap { max-width: 1080px; margin: 28px auto; padding: 0 28px; }
.portal-page .card { margin-bottom: 16px; padding: 24px; }
.portal-page .card h2 { color: var(--cnp-ink); }
.portal-page .hero {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  padding: clamp(26px, 4vw, 38px);
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.14), transparent 13rem),
    linear-gradient(125deg, #07524f, var(--cnp-deep));
  box-shadow: 0 18px 42px rgba(0, 51, 51, 0.17);
}
.portal-page .hero h2 { color: #fff; font-size: clamp(1.55rem, 3vw, 2rem); }
.portal-page .hero .muted { color: #d9f4ef; }
.portal-page .hero button.primary { border-color: #fff; color: var(--cnp-deep-hover); background: #fff; box-shadow: none; }
.portal-page .hero button.primary:hover { border-color: var(--cnp-mint); color: var(--cnp-deep-hover); background: var(--cnp-mint); }

.portal-page .summary-grid,
.portal-page .calculator-grid { gap: 14px; }
.portal-page .summary,
.portal-page .calculator { border-color: var(--cnp-line); border-radius: 14px; background: var(--cnp-surface); box-shadow: var(--cnp-shadow-soft); }
.portal-page .summary strong { color: var(--cnp-deep); font-size: 2rem; }
.portal-page .proj { border-color: var(--cnp-line); border-radius: 10px; background: var(--cnp-surface-warm); }
.portal-page .proj:hover { border-color: var(--cnp-brand); background: var(--cnp-mint-soft); }
.portal-page .proj .sig { color: var(--cnp-deep); }
.portal-page .plan { border: 1px solid var(--cnp-brand-line); border-radius: 12px; color: var(--cnp-deep); background: var(--cnp-mint-soft); }
.portal-page .tabs button.active { border-color: var(--cnp-deep); color: #fff; background: var(--cnp-deep); }
.portal-page .breadcrumb button { color: var(--cnp-deep); }
.portal-page .modal-backdrop { background: rgba(0, 51, 51, 0.46); backdrop-filter: blur(4px); }
.portal-page .modal { border: 1px solid var(--cnp-line); border-radius: 20px; box-shadow: 0 30px 90px rgba(0, 51, 51, 0.28); }

/* Página de download */
body.download-page { min-height: 100vh; background-color: var(--cnp-bg); }
.download-page > header { max-width: 1180px; margin: 0 auto; padding: 22px clamp(20px, 4vw, 48px); background: transparent; }
.download-page > header > a { min-height: 36px; border: 1px solid var(--cnp-line); border-radius: 999px; padding: 7px 14px; color: var(--cnp-deep); background: rgba(255, 255, 255, 0.72); font-weight: 700; text-decoration: none; }
.download-page main { width: min(1080px, calc(100% - 32px)); margin-top: 22px; }
.download-page .hero {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 17%, rgba(255, 255, 255, 0.15), transparent 15rem),
    linear-gradient(125deg, #064b48, #0a7771 62%, #07998f);
  box-shadow: 0 24px 64px rgba(0, 51, 51, 0.19);
}
.download-page .hero h1,
.download-page .hero h2 { color: #fff; }
.download-page .eyebrow { color: #bfece5; }
.download-page .lead, .download-page .meta { color: #dcf5f1; }
.download-page .download { min-height: 52px; border-color: #fff; color: var(--cnp-deep-hover); background: #fff; box-shadow: 0 12px 28px rgba(0, 51, 51, 0.2); }
.download-page .download:hover { border-color: var(--cnp-mint); color: var(--cnp-deep-hover); background: var(--cnp-mint); }
.download-page .version-card { border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 51, 51, 0.14); }
.download-page .version-label { color: #c8efe9; }
.download-page .compat li { border-color: rgba(255, 255, 255, 0.18); }
.download-page .compat li::before { color: #8ff0b3; }
.download-page .grid { gap: 18px; margin-top: 18px; }
.download-page .card { padding: 30px; }
.download-page .account-alert { border-color: var(--cnp-brand-line); color: var(--cnp-body); background: var(--cnp-mint-soft); }
.download-page .account-alert strong { color: var(--cnp-deep); }
.download-page .support { margin-top: 24px; }

/* Confirmação e recuperação de conta */
body.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-page .shell { width: min(470px, 100%); }
.auth-page .brand { margin: 0 0 22px 6px; }
.auth-page .card { border-top: 4px solid var(--cnp-brand); padding: clamp(28px, 6vw, 40px); box-shadow: var(--cnp-shadow); }
.auth-page .icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; color: var(--cnp-deep); background: var(--cnp-mint-soft); }
.auth-page .icon svg { width: 24px; height: 24px; }
.auth-page .eyebrow { margin-top: 22px; color: var(--cnp-deep); }
.auth-page h1 { margin: 0; color: var(--cnp-ink); font-size: clamp(1.65rem, 7vw, 2rem); }
.auth-page p { color: var(--cnp-muted); }
.auth-page label { display: block; margin: 22px 0 6px; color: var(--cnp-body); }
.auth-page .button, .auth-page button { width: 100%; margin-top: 22px; }
.auth-page .back { display: block; margin-top: 22px; color: var(--cnp-deep); font-weight: 650; text-align: center; text-decoration: none; }
.auth-page .back:hover { text-decoration: underline; }
.auth-page .status, .auth-page .message { border-radius: 12px; }
.auth-page .status { margin-top: 24px; padding: 14px 15px; color: var(--cnp-body); background: var(--cnp-line); font-size: 14px; }
.auth-page .status.success, .auth-page .message.success { border-color: var(--cnp-brand-line); color: var(--cnp-deep); background: var(--cnp-mint-soft); }
.auth-page .status.error, .auth-page .message.error { color: var(--cnp-error); background: var(--cnp-error-bg); }
.auth-page .message { min-height: 21px; margin-top: 16px; padding: 10px 12px; font-size: 14px; }
.auth-page .message:empty { padding: 0; }
.auth-page .footer { margin-top: 26px; color: var(--cnp-muted); font-size: 12px; text-align: center; }

/* Termos e privacidade */
body.legal-page { min-height: 100vh; padding: 24px 0 52px; }
.legal-page .page { width: min(880px, calc(100% - 32px)); margin: 28px auto; border: 1px solid var(--cnp-line); border-top: 4px solid var(--cnp-brand); border-radius: 20px; padding: clamp(28px, 6vw, 56px); background: var(--cnp-surface); box-shadow: var(--cnp-shadow-soft); }
.legal-page .page > p:first-child { margin-top: 0; }
.legal-page .page > p:first-child a { display: inline-flex; align-items: center; min-height: 36px; border: 1px solid var(--cnp-line); border-radius: 999px; padding: 6px 13px; color: var(--cnp-deep); background: var(--cnp-surface-warm); font-size: 0.84rem; font-weight: 700; text-decoration: none; }
.legal-page h1 { margin: 34px 0 8px; color: var(--cnp-ink); font-size: clamp(2rem, 6vw, 2.8rem); }
.legal-page h2 { margin-top: 34px; padding-top: 8px; color: var(--cnp-deep); font-size: 1.18rem; letter-spacing: -0.01em; }
.legal-page p { color: var(--cnp-body); }
.legal-page .muted { color: var(--cnp-muted); }

@media (max-width: 760px) {
  .portal-page .app-shell { grid-template-columns: 1fr; }
  .portal-page .sidebar { border-right: 0; border-bottom: 1px solid var(--cnp-line); padding: 10px 12px; background: rgba(255, 255, 255, 0.96); }
  .portal-page .sidebar button.active { box-shadow: inset 0 -3px var(--cnp-brand); }
  .portal-page .wrap { margin: 18px auto; padding: 0 16px; }
  .portal-page .card { padding: 20px; }
  .download-page .hero { grid-template-columns: 1fr; }
  .download-page .version-card { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
}

@media (max-width: 520px) {
  .portal-page header { align-items: flex-start; gap: 10px; }
  .portal-page header .who { align-items: flex-end; flex-direction: column; gap: 2px; }
  .portal-page .login { padding: 26px 22px; }
  .portal-page .row-actions { flex-wrap: wrap; }
  .portal-page .row-actions button { flex: 1 1 auto; }
  .download-page .copy { padding: 34px 24px; }
  .download-page .card { padding: 24px; }
  .auth-page { padding: 18px; }
  .legal-page { padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}