/* ============================================================
   POIS — o seu centro de estudo de português
   "Azulejaria": the blue-and-white glazed tile that lines Lisbon
   stations and Brazilian colonial churches alike — the one visual
   the two Portugueses genuinely share. Cobalt on whitewash (cal) is
   the signature; the two flags supply the only other colours, and
   only where the product itself splits in two: verde/vermelho marks
   the European track (CAPLE), verde/amarelo the Brazilian one
   (Celpe-Bras). Fraunces for display (soft, ink-trapped, a little
   baroque, like the tiles), Archivo for the interface, Source Serif
   for anything you actually read.
   ============================================================ */

:root {
  /* Cal e papel: a whitewashed wall, a sheet of paper on it. */
  --papel: #f5f3ee;
  --papel-2: #e8e6df;
  --folha: #fffefb;
  --tinta: #13264b;
  --tinta-soft: #535d75;
  --traco: #d5d6d2;
  --traco-soft: #e6e6e1;

  /* Azul de azulejo — cobalt, the glaze. --azul is the interactive colour
     (links, primary buttons); --azulejo the paler tile blue used as the B2
     accent and for ornament, so a B2 chip is never mistaken for a button. */
  --azul: #1c4f9c;
  --azul-soft: #e3ebf7;
  --azulejo: #2f6cb3;
  --azulejo-soft: #e4eef9;
  --anil: #1d4f95;

  /* The two tracks, pulled towards legibility. Portugal's #046A38 green
     and #DA291C red are correct on cloth; the red is darkened here so it
     holds contrast behind text. Brazil's #009C3B is too light for white
     type and its #FFDF00 unreadable on paper, so --verde-br is darkened and
     --amarelo splits in two: a fill (--amarelo-vivo, never under text) and
     a text-safe ochre. */
  --verde: #046a38;
  --verde-soft: #e1f0e7;
  --vermelho: #b3261e;
  --vermelho-soft: #f9e5e3;
  --verde-br: #0a7a35;
  --verde-br-soft: #e0f3e6;
  --amarelo: #7d6000;
  --amarelo-vivo: #f4cf1d;
  --amarelo-soft: #fbf3cf;

  /* Level accents (content.LEVEL_META names these): the materials of a
     Portuguese street, light to dark — sand, honey, roof tile, azulejo,
     slate, ink. Each is dark enough to carry white badge text. */
  --areia: #8c6d3f;
  --areia-soft: #f3ece0;
  --mel: #a8730f;
  --mel-soft: #faf0d6;
  --telha: #ab4a24;
  --telha-soft: #f7e6dd;
  --ardosia: #45556b;
  --ardosia-soft: #e5e9ee;
  --tinta-soft-bg: #e3e7ef;

  /* The joints of a tiled wall: a 72px grid of grout, barely there. */
  --junta: rgba(28, 79, 156, 0.07);

  --sombra: 0 1px 2px rgba(19, 38, 75, 0.06), 0 8px 24px -12px rgba(19, 38, 75, 0.22);
  --sombra-alta: 0 2px 4px rgba(19, 38, 75, 0.08), 0 18px 40px -18px rgba(19, 38, 75, 0.34);

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --texto: "Source Serif 4", Georgia, serif;

  --r: 12px;
  --r-lg: 18px;

  /* One azulejo, as a data URI so any element can wear it: a four-petal
     rosette with quarter-circles in the corners, which tile into full
     circles where four tiles meet — the way the real pattern works. */
  --azulejo-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='%231c4f9c'%3E%3Cpath d='M0 0h11a11 11 0 0 1-11 11zM60 0v11A11 11 0 0 1 49 0zM0 60V49a11 11 0 0 1 11 11zM60 60H49a11 11 0 0 1 11-11z'/%3E%3Cpath d='M30 30c-5-6-5-13 0-18 5 5 5 12 0 18zm0 0c6-5 13-5 18 0-5 5-12 5-18 0zm0 0c5 6 5 13 0 18-5-5-5-12 0-18zm0 0c-6 5-13 5-18 0 5-5 12-5 18 0z'/%3E%3C/g%3E%3Cg fill='none' stroke='%231c4f9c' stroke-width='1.4'%3E%3Cpath d='M30 30 19 19M30 30l11-11M30 30l11 11M30 30 19 41'/%3E%3Ccircle cx='30' cy='30' r='21'/%3E%3C/g%3E%3Ccircle cx='30' cy='30' r='3' fill='%23fffefb'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--texto);
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--tinta);
  background-color: var(--papel);
  /* A whitewashed wall with the faintest tile grout on it, and two washes
     of light — cobalt from the top right, a warm lime-plaster glow from
     the bottom left — so the page does not read as graph paper. */
  background-image:
    linear-gradient(var(--junta) 1px, transparent 1px),
    linear-gradient(90deg, var(--junta) 1px, transparent 1px),
    radial-gradient(900px 460px at 92% -140px, rgba(28, 79, 156, 0.10), transparent 62%),
    radial-gradient(760px 420px at -140px 108%, rgba(168, 115, 15, 0.07), transparent 58%);
  background-size: 72px 72px, 72px 72px, 100% 100%, 100% 100%;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

/* Fraunces at its "soft" optical settings: the display cut, slightly
   wonky, so headings have the hand-painted quality of a tile panel
   rather than the chill of a newspaper serif. */
h1, h2 {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "SOFT" 60, "WONK" 0;
  letter-spacing: -0.01em; line-height: 1.12;
}
h3, h4 { font-family: var(--ui); font-weight: 700; line-height: 1.25; }

a { color: var(--anil); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--telha); }
img { max-width: 100%; }

.container { width: min(1140px, 92vw); margin: 0 auto; }
.narrow { width: min(860px, 92vw); margin: 0 auto; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--tinta); color: var(--papel); padding: 0.6rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }

/* ---------- Faixa: the ornamental band ---------- */

/* A strip of azulejos — the footer's top edge, and any divider that wants
   to be an ornament rather than a rule. `.tricolore` is kept as an alias so
   templates inherited from the fleet render the band, not nothing. */
.faixa, .tricolore {
  height: 22px; border-radius: 0;
  background: var(--azulejo-soft) var(--azulejo-tile) repeat-x left center / 22px 22px;
  border-top: 2px solid var(--azul); border-bottom: 2px solid var(--azul);
}
.faixa-thin, .tricolore-thin { height: 10px; background-size: 10px 10px; border-width: 1px; }

/* An azulejo panel: a block of tiles, for heroes and empty states. */
.azulejos {
  background: var(--folha) var(--azulejo-tile) repeat left top / 56px 56px;
}

/* ---------- Kicker / section heads ---------- */

.kicker {
  font-family: var(--ui); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-soft);
  display: flex; align-items: center; gap: 0.6rem;
}
.kicker::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--azul); flex: none; }
.kicker.center { justify-content: center; }

.section { padding: 4rem 0; }
.section-head { margin-bottom: 2rem; max-width: 62ch; }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-top: 0.6rem; }
.section-head p { color: var(--tinta-soft); margin-top: 0.6rem; }

.page-head { padding: 2.6rem 0 0.4rem; }
.page-head h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin-top: 0.6rem; }
.page-head .lede { color: var(--tinta-soft); margin-top: 0.6rem; max-width: 66ch; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--ui); font-weight: 700; font-size: 0.86rem;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  color: var(--papel); background: var(--tinta);
  border: 1.5px solid var(--tinta); border-radius: 10px;
  padding: 0.68rem 1.3rem; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: var(--sombra);
}
.btn:hover { color: var(--papel); transform: translateY(-1px); box-shadow: var(--sombra-alta); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[disabled] { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost { background: transparent; color: var(--tinta); box-shadow: none; }
.btn-ghost:hover { color: var(--tinta); background: var(--papel-2); }
.btn-primario { background: var(--azul); border-color: var(--azul); }
.btn-primario:hover { color: #fff; }
.btn-danger { background: var(--vermelho); border-color: var(--vermelho); }
.btn-danger:hover { color: #fff; }
.btn-oro { background: var(--mel); border-color: var(--mel); color: var(--tinta); }
.btn-oro:hover { color: var(--tinta); }
.btn-big { font-size: 0.98rem; padding: 0.9rem 1.8rem; }
.btn-sm { font-size: 0.76rem; padding: 0.42rem 0.85rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */

/* The bar is full-bleed — the tint and the rule under it should run edge to
   edge — but its *contents* sit on the same grid as the page. Before this the
   header was padded to the window instead, so the wordmark sat 35px from the
   left edge while the content column started 326px in on a 1512px screen and
   850px in on a 2560px one. Two grids on one page: the logo orphaned against
   the window, the nav pinned to the far right, and an empty corridor down
   each side of everything else.

   `min(1140px, 92vw)` is the same expression `.container` uses, so the
   wordmark now lines up exactly with the content on `.container` pages, and
   is concentric with the narrower reading column on `.narrow` pages. The 92vw
   half is not arbitrary either: (100 - 92) / 2 = 4, so at narrow widths the
   gutter is exactly the 4vw the mobile nav already pads itself by. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 0.7rem 0;
  background: rgba(245, 243, 238, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--traco);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(1140px, 92vw); margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
/* The mark is the logo itself (one azulejo), so header, certificate and
   favicon can never drift apart. Child spans from older markup are hidden. */
.brand-mark {
  display: block; width: 30px; height: 30px; flex: none;
  background: url("../img/logo.svg") center / contain no-repeat;
}
.brand-mark span { display: none; }
.brand-name {
  font-family: var(--ui); font-weight: 800; font-size: 1.12rem;
  letter-spacing: 0.24em; color: var(--tinta);
}
.brand-name::after { content: "."; color: var(--azul); letter-spacing: 0; }

.site-nav { display: flex; align-items: center; gap: 1.15rem; }
.site-nav > a {
  font-family: var(--ui); font-weight: 600; font-size: 0.83rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta); text-decoration: none;
}
.site-nav > a:hover { color: var(--azul); }
.site-nav .btn-nav { padding: 0.44rem 0.95rem; font-size: 0.76rem; color: var(--papel); }
.site-nav .btn-nav:hover { color: var(--papel); }
.site-nav .nav-muted { color: var(--tinta-soft); }
.site-nav .nav-admin { color: var(--telha); }
.site-nav .nav-admin::before { content: "⚙ "; }

.lang-switcher { display: flex; gap: 0.22rem; margin-left: 0.3rem; }
.lang-btn {
  font-family: var(--ui); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.06em;
  text-decoration: none; color: var(--tinta-soft);
  border: 1px solid var(--traco); border-radius: 5px; padding: 0.2rem 0.38rem;
}
.lang-btn:hover { color: var(--tinta); border-color: var(--tinta); }
.lang-btn.active { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--tinta); margin: 5px 0; border-radius: 2px; transition: 0.2s; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Flash ---------- */

.flash-stack { position: fixed; top: 72px; right: 1rem; z-index: 60; display: grid; gap: 0.5rem; max-width: 380px; }
.flash {
  font-family: var(--ui); font-weight: 600; font-size: 0.9rem;
  background: var(--folha); border: 1px solid var(--traco); border-left: 4px solid var(--tinta);
  border-radius: 8px; box-shadow: var(--sombra-alta); padding: 0.72rem 1rem;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.flash-error { border-left-color: var(--vermelho); color: var(--vermelho); }
.flash-ok { border-left-color: var(--azul); color: var(--azul); }
.flash.gone { opacity: 0; transform: translateX(16px); pointer-events: none; }

/* ---------- Study index: disclosures and progress ---------- */

details.level-block > summary { cursor: pointer; list-style: none; }
details.level-block > summary::-webkit-details-marker { display: none; }
details.level-block > summary::after {
  content: "▾"; font-size: 0.7rem; color: var(--tinta-soft);
  transition: transform 0.2s ease; flex: 0 0 auto;
}
details.level-block[open] > summary::after { transform: rotate(180deg); }
details.level-block > summary:hover h2 { color: var(--azul); }
details.level-block > summary .level-bar-track { max-width: 160px; }

.unit-card.is-seen { border-color: var(--azul); }
.seen-pip { color: var(--azul); font-weight: 700; margin-left: 0.3rem; }

.resume-strip {
  display: flex; align-items: center; gap: 0.7rem; text-decoration: none;
  background: var(--folha); border: 1px solid var(--traco);
  border-left: 4px solid var(--azul); border-radius: 10px;
  padding: 0.75rem 1rem; margin: 1.4rem 0; color: var(--tinta);
}
.resume-strip:hover { border-color: var(--azul); }
.resume-label { font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.14em;
                text-transform: uppercase; color: var(--tinta-soft); }
.resume-go { margin-left: auto; color: var(--azul); }

/* ---------- Next step, course bars, shelves ---------- */

.next-step {
  display: flex; align-items: stretch; justify-content: space-between; gap: 1.5rem;
  background: var(--tinta); color: var(--papel);
  border-radius: var(--r); padding: 1.6rem 1.8rem; margin-top: 1.5rem;
  border-left: 6px solid var(--lv, var(--azul)); box-shadow: var(--sombra-alta);
}
.next-kicker { font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.2em;
               text-transform: uppercase; color: #9fb0c8; margin: 0 0 0.35rem; }
.next-step h2 { font-family: var(--display); font-size: clamp(1.5rem, 4vw, 2.1rem);
                margin: 0 0 0.4rem; color: var(--papel); }
.next-step p { margin: 0; color: #c3cbdb; max-width: 54ch; }
.next-badge {
  align-self: flex-start; flex: 0 0 auto; font-family: var(--ui); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #9fb0c8;
  border: 1px solid #3c4a60; border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap;
}

.level-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.level-bar { display: flex; align-items: center; gap: 0.8rem; text-decoration: none;
             padding: 0.35rem 0.4rem; border-radius: 8px; color: inherit; }
.level-bar:hover { background: var(--papel); }
.level-bar.current { background: var(--papel); }
.level-bar.locked { opacity: 0.6; }
.level-bar-track { flex: 1 1 auto; height: 8px; border-radius: 999px;
                   background: var(--traco); overflow: hidden; }
.level-bar-track i { display: block; height: 100%; background: var(--azul); }
.level-bar-count { flex: 0 0 auto; font-family: var(--ui); font-size: 0.78rem;
                   color: var(--tinta-soft); min-width: 3rem; text-align: right; }

.shelf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.shelf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  padding: 0.7rem 0.85rem; border: 1px solid var(--traco); border-radius: 10px;
  background: var(--folha); text-decoration: none; color: var(--tinta);
}
.shelf:hover { border-color: var(--azul); }
.shelf.locked { opacity: 0.65; }
.shelf-name { font-family: var(--ui); font-size: 0.83rem; font-weight: 600; }
.shelf-count { font-family: var(--display); font-size: 1.05rem; color: var(--tinta-soft); }

@media (max-width: 720px) {
  .next-step { flex-direction: column; gap: 0.9rem; padding: 1.3rem; }
}

/* ---------- Account menu ---------- */

.account-menu { position: relative; }
.account-trigger {
  display: flex; align-items: center; gap: 0.45rem;
  background: none; border: 1.5px solid transparent; border-radius: 999px;
  padding: 0.25rem 0.6rem 0.25rem 0.28rem; cursor: pointer;
  font-family: var(--ui); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta);
}
.account-trigger:hover, .account-trigger.open { border-color: var(--traco); background: var(--folha); }
.account-trigger:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.account-avatar {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--tinta); color: var(--papel); font-size: 0.8rem; letter-spacing: 0;
}
.account-caret { font-size: 0.6rem; color: var(--tinta-soft); }
.account-trigger.open .account-caret { transform: rotate(180deg); }

.account-dropdown {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60;
  min-width: 15rem; background: var(--folha);
  border: 1px solid var(--traco); border-radius: 12px; box-shadow: var(--sombra-alta);
  padding: 0.4rem; display: flex; flex-direction: column;
}
.account-dropdown[hidden] { display: none; }
.account-head {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.6rem 0.7rem 0.7rem; border-bottom: 1px solid var(--traco); margin-bottom: 0.35rem;
}
.account-head strong { font-family: var(--ui); font-size: 0.9rem; }
/* Targeted rather than a blanket `span`: that selector out-specified
   .badge-pro and repainted the badge's white text muted grey on green, which
   is how the plan badge ended up unreadable in the menu. */
.account-email { display: block; font-size: 0.78rem; color: var(--tinta-soft);
                 word-break: break-all; }
.account-plan { margin-top: 0.35rem; }
.account-dropdown a {
  padding: 0.5rem 0.7rem; border-radius: 8px; text-decoration: none;
  font-family: var(--ui); font-size: 0.85rem; font-weight: 600; color: var(--tinta);
  letter-spacing: 0; text-transform: none;
}
.account-dropdown a:hover { background: var(--papel); }
.account-dropdown hr { border: 0; border-top: 1px solid var(--traco); margin: 0.35rem 0; }
.account-unlock { color: var(--azul) !important; }
.account-admin { color: var(--telha) !important; }
.account-logout { color: var(--tinta-soft) !important; }

/* On the mobile sheet the nav is a stacked column, so the dropdown becomes
   part of the flow rather than an overlay anchored to a trigger. */
@media (max-width: 900px) {
  .account-menu { width: 100%; }
  .account-trigger { width: 100%; justify-content: flex-start; }
  .account-dropdown { position: static; box-shadow: none; border: 0; padding: 0 0 0 0.4rem; min-width: 0; }
}

/* ---------- Entitlement: locks, price, feature lists ---------- */

.badge-pro {
  background: var(--azul); color: #fff; border-color: var(--azul);
  letter-spacing: 0.06em;
}
.nav-unlock { color: var(--azul); font-weight: 700; }

/* A locked unit card stays legible — it is an advert, not a redaction. */
.unit-card.is-locked { opacity: 0.72; }
.unit-card.is-locked:hover { opacity: 1; }
.lock-pip { font-size: 0.78em; margin-left: 0.3rem; }

.locked-plate { border-left: 4px solid var(--azul); }

.price-plate { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.price-tag { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; }
.price-amount { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--tinta); }
.price-note { font-family: var(--ui); font-size: 0.8rem; letter-spacing: 0.08em;
              text-transform: uppercase; color: var(--tinta-soft); }

.price-blocked { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; max-width: 22rem; }
.price-blocked .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.price-blocked p { text-align: right; margin: 0; }
@media (max-width: 640px) {
  .price-blocked { align-items: flex-start; }
  .price-blocked p { text-align: left; }
}

.feedback { border-left: 4px solid var(--azul); background: var(--papel);
             border-radius: 10px; padding: 1rem 1.1rem; margin-top: 0.9rem; }
.fb-head { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.12em;
           text-transform: uppercase; color: var(--tinta-soft); margin: 0 0 0.4rem; }
.correction-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.correction-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem;
                      font-size: 0.93rem; }
.fix-before { text-decoration: line-through; color: var(--vermelho); }
.fix-arrow { color: var(--tinta-soft); }
.fix-after { font-weight: 600; color: var(--azul); }
.fix-why { flex-basis: 100%; font-size: 0.83rem; color: var(--tinta-soft); }

.pattern { border-left: 3px solid var(--traco); padding: 0.1rem 0 0.1rem 0.8rem; margin-bottom: 0.7rem; }
.pattern strong { font-family: var(--ui); font-size: 0.92rem; }
.pattern p { margin: 0.2rem 0 0; }
.kind-ai { border-style: dashed; }
.kind-cost { display: block; margin-top: 0.5rem; font-family: var(--ui); font-size: 0.72rem;
             letter-spacing: 0.06em; text-transform: uppercase; color: var(--azul); }

.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.pkg-card { display: flex; flex-direction: column; gap: 0.4rem; }
.pkg-card h3 { margin: 0; font-family: var(--ui); font-size: 1rem; letter-spacing: 0.04em; }
.pkg-credits { font-family: var(--display); font-size: 2rem; line-height: 1; margin: 0; }
.pkg-credits span { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.1em;
                    text-transform: uppercase; color: var(--tinta-soft); }
.pkg-price { font-family: var(--ui); font-weight: 700; margin: 0.2rem 0 0; }
.pkg-card .btn { margin-top: auto; }
td.pos { color: var(--azul); }
td.neg { color: var(--tinta-soft); }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.feature-list li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.95rem; }
.feature-list .tick { color: var(--azul); font-weight: 700; flex: 0 0 auto; }
.muted-list li { color: var(--tinta-soft); }
.muted-list .tick { color: var(--tinta-soft); }

.card-element {
  padding: 0.7rem 0.75rem; border: 1.5px solid var(--traco); border-radius: 9px; background: #fff;
}
#pay-message.error { color: var(--vermelho); }

@media (max-width: 640px) {
  .price-plate { flex-direction: column; align-items: flex-start; }
}

/* ---------- Exam task types ---------- */

.cloze { line-height: 2.6; font-size: 1.05rem; }
.gap {
  display: inline-block; width: 9rem; padding: 0.25rem 0.5rem; margin: 0 0.15rem;
  border: 0; border-bottom: 2px solid var(--traco); background: transparent;
  font-family: var(--texto); font-size: 1rem; color: var(--tinta);
}
.gap:focus { outline: none; border-bottom-color: var(--azul); background: var(--folha); }
.gap-ok { border-bottom-color: var(--azul); color: var(--azul); }
.gap-bad { border-bottom-color: var(--vermelho); color: var(--vermelho); }

.word-bank { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
.bank-word {
  font-family: var(--ui); font-size: 0.82rem; padding: 0.25rem 0.7rem;
  border: 1px dashed var(--traco); border-radius: 999px; color: var(--tinta-soft);
}

.match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.match-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
             padding: 0.6rem 0.8rem; border: 1px solid var(--traco); border-radius: 10px;
             background: var(--folha); }
.match-row.gap-ok { border-color: var(--azul); }
.match-row.gap-bad { border-color: var(--vermelho); }
.match-text { flex: 1 1 14rem; }
.match-row select { flex: 0 0 auto; max-width: 15rem; padding: 0.4rem 0.5rem;
                    border: 1.5px solid var(--traco); border-radius: 8px; background: #fff; }
.match-correct { flex-basis: 100%; font-size: 0.83rem; color: var(--azul); }

@media (max-width: 640px) {
  .gap { width: 6.5rem; }
  .match-row select { max-width: none; flex-basis: 100%; }
}

.tf-list, .reorder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.tf-row, .reorder-row {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.7rem 0.9rem; border: 1px solid var(--traco); border-radius: 10px;
  background: var(--folha);
}
.tf-row.gap-ok, .reorder-row.gap-ok { border-color: var(--azul); }
.tf-row.gap-bad, .reorder-row.gap-bad { border-color: var(--vermelho); }
.tf-text { flex: 1 1 16rem; }
.tf-options { display: flex; gap: 0.8rem; flex: 0 0 auto; flex-wrap: wrap; }
.tf-option { display: flex; align-items: center; gap: 0.3rem; font-size: 0.86rem; cursor: pointer; }
.tf-option input { accent-color: var(--azul); }

.reorder-slot {
  flex: 0 0 auto; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 50%; background: var(--tinta); color: var(--papel);
  font-family: var(--ui); font-size: 0.8rem;
}
.reorder-row select { flex: 1 1 auto; padding: 0.4rem 0.5rem; border: 1.5px solid var(--traco);
                      border-radius: 8px; background: #fff; max-width: 100%; }

@media (max-width: 640px) {
  .tf-options { flex-basis: 100%; }
}

.section-chip { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.1em;
                text-transform: uppercase; color: var(--tinta-soft); margin: 0 0 0.9rem; }
.section-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: sec; }
.section-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
               padding: 0.6rem 0.85rem; border: 1px solid var(--traco); border-radius: 10px; }
.section-row.is-next { border-color: var(--azul); background: var(--folha); }
.section-row.is-done { opacity: 0.6; }
.section-name { flex: 1 1 8rem; font-family: var(--ui); font-weight: 600; font-size: 0.9rem; }
.section-state { margin-left: auto; }
.section-go { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
              flex-wrap: wrap; margin-top: 1.2rem; padding-top: 1.2rem;
              border-top: 1px solid var(--traco); }
.section-go p { margin: 0; color: var(--tinta-soft); }

/* ---------- Item calibration ---------- */
.table.calib { width: 100%; }
.table.calib th, .table.calib td { padding: 0.55rem 0.8rem; vertical-align: top; }
.table.calib th.num, .table.calib td.num { text-align: right; white-space: nowrap; }
.table.calib td:last-child, .table.calib th:last-child { width: 1%; }
.table.calib .badge { white-space: nowrap; }

/* ---------- Onboarding, placement, plan ---------- */
.onboard .field { border: 0; padding: 0; margin: 0 0 1.6rem; }
.onboard legend { font-family: var(--ui); font-weight: 700; font-size: 0.95rem;
                  margin-bottom: 0.6rem; padding: 0; }
/* Scoped to .onboard throughout: `.choice` is already the exam renderer's
   class for an answer option, and an unscoped rule here would hide the radio
   button on every question in the app. */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.6rem; }
.onboard .choice { display: block; cursor: pointer; }
/* .field label uppercases and letter-spaces, which is right for "Email" and
   wrong for a card carrying a sentence. */
.onboard .field label.choice,
.onboard .field label.pill { text-transform: none; letter-spacing: normal;
                             font-size: 1rem; color: inherit; margin-bottom: 0; }
.onboard .choice input { position: absolute; opacity: 0; }
.onboard .choice-body { display: block; padding: 0.75rem 0.9rem; border: 1px solid var(--traco);
               border-radius: 10px; background: var(--papel); transition: border-color .12s, background .12s; }
.onboard .choice-body strong { display: block; font-family: var(--ui); font-size: 0.92rem; }
.onboard .choice-body .small { display: block; margin-top: 0.15rem; }
.onboard .choice input:checked + .choice-body { border-color: var(--azul); background: var(--folha); }
.onboard .choice input:focus-visible + .choice-body { outline: 2px solid var(--azul); outline-offset: 2px; }
.onboard .choice.is-soon .choice-body { opacity: 0.75; }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pill input { position: absolute; opacity: 0; }
.pill > span, .pill-btn { display: inline-block; padding: 0.4rem 0.8rem; border: 1px solid var(--traco);
                        border-radius: 999px; font-family: var(--ui); font-size: 0.85rem;
                        background: var(--papel); cursor: pointer; }
.pill input:checked + span { border-color: var(--azul); background: var(--azul); color: #fff; }
.pill input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.pill-btn:hover { border-color: var(--azul); }
.center { text-align: center; }
.btn-quiet { background: transparent; border: 0; color: var(--tinta-soft);
             text-decoration: underline; cursor: pointer; font-family: var(--ui); font-size: 0.85rem; }

.exam-shell.single { display: block; }
.exam-shell.single > div { max-width: 720px; margin: 0 auto; }
.row.spread { justify-content: space-between; }

.level-verdict { text-align: center; }
.level-big { font-size: 3.4rem; line-height: 1; margin: 0.2rem 0 0; }
.skill-levels { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.skill-levels li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
                   padding-bottom: 0.7rem; border-bottom: 1px solid var(--traco); }
.skill-levels li:last-child { border-bottom: 0; padding-bottom: 0; }
.sl-name { font-family: var(--ui); font-weight: 600; min-width: 7rem; }
.sl-evidence { flex: 1 1 auto; }
.sl-ladder { display: flex; gap: 0.2rem; }
.rung { font-family: var(--ui); font-size: 0.65rem; letter-spacing: 0.04em; padding: 0.15rem 0.35rem;
        border-radius: 4px; background: var(--folha); color: var(--tinta-soft); }
.rung.held { background: var(--azul); color: #fff; }

.plan-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }
.plate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
              flex-wrap: wrap; }
.task-list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: task; }
.task { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem;
        border: 1px solid var(--traco); border-radius: 10px; }
.task-mins { font-family: var(--ui); font-size: 0.75rem; font-weight: 700; color: var(--tinta-soft);
             min-width: 2.4rem; }
.task-body { flex: 1 1 auto; }
.task-body strong { display: block; font-family: var(--ui); font-size: 0.92rem; }
.task-mock { border-color: var(--vermelho); background: var(--vermelho-soft); }
.task-review { border-color: var(--azul); }
.focus-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.focus-list li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.milestones { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.milestones li { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0.85rem;
                 border: 1px solid var(--traco); border-radius: 10px; }
.milestones li.is-done { opacity: 0.6; }
.milestones li.is-next { border-color: var(--azul); }
.milestones li.is-due { border-color: var(--vermelho); background: var(--vermelho-soft); }
.ms-date { font-family: var(--ui); font-weight: 700; font-size: 0.85rem; min-width: 3.2rem; }
.ms-body { flex: 1 1 auto; }
.ms-body strong { display: block; font-family: var(--ui); font-size: 0.9rem; }
.ms-state { margin-left: auto; }
.stack { display: grid; gap: 0.35rem; }
.stack label { font-family: var(--ui); font-size: 0.8rem; font-weight: 600; margin-top: 0.5rem; }
.kv { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.kv li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.kv span { color: var(--tinta-soft); }
.plan-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
              flex-wrap: wrap; padding: 0.9rem 1.1rem; border: 1px solid var(--traco);
              border-radius: 12px; background: var(--papel); }
.plan-strip-line { margin: 0.2rem 0 0; font-family: var(--ui); font-size: 0.95rem; }
/* ---------- Plan: the form and the calendar it drives ---------- */
.plan-shape { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.35fr);
              gap: 1.6rem; align-items: start; }
@media (max-width: 860px) { .plan-shape { grid-template-columns: 1fr; } }
.plan-shape-form { position: relative; }
/* A rule between the control and its output, so the pairing reads as one
   panel with two halves rather than two panels that happen to touch. */
@media (min-width: 861px) {
  .plan-shape-cal { padding-left: 1.6rem; border-left: 1px solid var(--traco); }
}
.plan-dirty { margin: 0.6rem 0 0; color: var(--mel); font-weight: 600; }
.plan-shape .cal-day { transition: background .12s ease, border-color .12s ease, opacity .12s ease; }

.tool-sub { color: var(--tinta-soft); font-weight: 400; }

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
         flex-wrap: wrap; margin-top: 1.6rem; padding-top: 1.1rem;
         border-top: 1px solid var(--traco); }
.pager-count { font-family: var(--ui); font-size: 0.78rem; color: var(--tinta-soft); }
.pager-links { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.pager-num, .pager-step, .pager-gap {
  font-family: var(--ui); font-size: 0.82rem; line-height: 1;
  padding: 0.45rem 0.6rem; border-radius: 8px; text-decoration: none;
  color: var(--tinta); border: 1px solid transparent; }
.pager-num { min-width: 2rem; text-align: center; }
.pager-num:hover, .pager-step:hover { border-color: var(--traco); background: var(--papel); }
.pager-num.is-current { background: var(--tinta); color: var(--papel); font-weight: 700; }
.pager-step { font-weight: 600; }
.pager-step.is-off { color: var(--traco); pointer-events: none; }
.pager-gap { color: var(--tinta-soft); padding-left: 0.2rem; padding-right: 0.2rem; }

/* ---------- Payment result dialog ---------- */
body.has-modal { overflow: hidden; }
.pay-modal { position: fixed; inset: 0; z-index: 90; display: flex;
             align-items: center; justify-content: center; padding: 1.2rem; }
.pay-modal[hidden] { display: none; }
.pay-modal-backdrop { position: absolute; inset: 0; background: rgba(16, 27, 42, 0.55); }
.pay-modal-card { position: relative; width: min(480px, 100%); background: var(--papel);
                  border-radius: 14px; padding: 1.8rem 1.6rem 1.4rem; text-align: center;
                  box-shadow: 0 24px 60px rgba(16, 27, 42, 0.28); }
.pay-modal-mark { width: 3rem; height: 3rem; border-radius: 50%; margin: 0 auto 0.9rem;
                  display: flex; align-items: center; justify-content: center;
                  font-size: 1.5rem; line-height: 1; color: #fff; }
.pay-modal.is-ok .pay-modal-mark { background: var(--azul); }
.pay-modal.is-pending .pay-modal-mark { background: var(--mel); }
.pay-modal.is-error .pay-modal-mark { background: var(--vermelho); }
.pay-modal-card h2 { margin: 0 0 0.4rem; font-size: 1.5rem; }
.pay-modal-lede { margin: 0 0 1.1rem; color: var(--tinta-soft); font-size: 0.95rem; }
.pay-modal-rows { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem;
                  text-align: left; margin: 0 0 1rem; padding: 0.9rem 1rem;
                  background: var(--folha); border-radius: 10px; }
.pay-modal-rows:empty { display: none; }
.pay-modal-rows dt { font-family: var(--ui); font-size: 0.78rem; color: var(--tinta-soft); }
.pay-modal-rows dd { margin: 0; font-family: var(--ui); font-size: 0.85rem; font-weight: 600;
                     text-align: right; }
.pay-modal-ref { margin: 0 0 0.8rem; font-family: var(--mono);
                 font-size: 0.72rem; word-break: break-all; }
.pay-modal .row { justify-content: center; flex-wrap: wrap; gap: 0.5rem; }

.account-credits { display: grid; grid-template-columns: 1fr auto; gap: 0 0.6rem;
                   align-items: baseline; padding: 0.55rem 0.9rem !important;
                   border-bottom: 1px solid var(--traco); }
.account-credits .ac-label { font-family: var(--ui); font-size: 0.8rem; font-weight: 600; }
.account-credits .ac-balance { font-family: var(--display); font-size: 1.35rem; line-height: 1;
                               justify-self: end; }
.account-credits .ac-balance.is-low { color: var(--vermelho); }
.account-credits .ac-note { grid-column: 1 / -1; font-size: 0.7rem; color: var(--tinta-soft); }

.prob-big { font-family: var(--display); font-size: 2.6rem; line-height: 1; margin: 0.3rem 0 0.4rem; }

/* ---------- The plan calendar ---------- */
.cal { margin-top: 0.8rem; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head span { font-family: var(--ui); font-size: 0.65rem; letter-spacing: 0.08em;
                 text-transform: uppercase; color: var(--tinta-soft); text-align: center;
                 padding-bottom: 0.3rem; }
.cal-pad { visibility: hidden; }
.cal-day { position: relative; aspect-ratio: 1 / 1; border-radius: 7px; border: 1px solid var(--traco);
           display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 1px; background: var(--papel); }
.cal-day b { font-family: var(--ui); font-size: 0.78rem; font-weight: 600; line-height: 1; }
.cal-day .cal-mins { font-size: 0.58rem; font-style: normal; color: var(--tinta-soft); line-height: 1; }
.cal-day .cal-flag { font-size: 0.6rem; font-style: normal; line-height: 1; }
.cal-day.is-study { background: var(--folha); border-color: var(--azul); }
.cal-day.is-rest { opacity: 0.5; }
.cal-day.is-mock { background: var(--mel-soft); border-color: var(--mel); opacity: 1; }
.cal-day.is-mock .cal-flag { color: var(--mel); }
.cal-day.is-exam { background: var(--vermelho); border-color: var(--vermelho); color: #fff; opacity: 1; }
.cal-day.is-exam .cal-flag { color: #fff; }
.cal-day.is-today { outline: 2px solid var(--tinta); outline-offset: 1px; }
.cal-legend { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; }
.cal-legend .key { width: 0.7rem; height: 0.7rem; border-radius: 3px; border: 1px solid var(--traco);
                   display: inline-block; margin-left: 0.6rem; }
.cal-legend .key:first-child { margin-left: 0; }
.cal-legend .key.is-study { background: var(--folha); border-color: var(--azul); }
.cal-legend .key.is-rest { background: var(--papel); opacity: 0.5; }
.cal-legend .key.is-mock { background: var(--mel-soft); border-color: var(--mel); }
.cal-legend .key.is-exam { background: var(--vermelho); border-color: var(--vermelho); }
.pill.pill-sm > span { padding: 0.28rem 0.5rem; font-size: 0.75rem; }

/* ---------- Bulk authoring ---------- */
.admin-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .admin-cols { grid-template-columns: 1fr; } }
.admin-cols textarea { width: 100%; font-family: var(--mono);
                       font-size: 0.82rem; line-height: 1.5; }
.import-report { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.import-report li { padding: 0.55rem 0.8rem; border-radius: 8px; border-left: 3px solid var(--traco);
                    background: var(--folha); font-size: 0.88rem; }
.import-report li.ok { border-left-color: var(--azul); }
.import-report li.warn { border-left-color: var(--mel); }
.import-report li.bad { border-left-color: var(--vermelho); }
.import-report .line { display: block; font-size: 0.82rem; color: var(--vermelho); }
.import-report .line.muted { color: var(--tinta-soft); }
.code-sample { background: var(--tinta); color: var(--papel); padding: 0.9rem 1rem;
               border-radius: 8px; overflow-x: auto; font-size: 0.75rem; line-height: 1.55; margin: 0; }
.gap-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.gap-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; align-items: center; }
.gap-name { font-family: var(--ui); font-weight: 600; font-size: 0.85rem; }
.gap-count { font-family: var(--ui); font-size: 0.8rem; text-align: right; }
.gap-count.thin { color: var(--vermelho); font-weight: 700; }
.gap-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--traco); overflow: hidden; }
.gap-bar i { display: block; height: 100%; background: var(--azul); }
.gap-note { grid-column: 1 / -1; font-size: 0.75rem; color: var(--tinta-soft); }
.table.calib .q-line { display: block; font-weight: 600; }
.table.calib .num { text-align: right; white-space: nowrap; }
.table.calib td.neg { color: var(--vermelho); font-weight: 700; }
.table.calib tr.is-retired { opacity: 0.55; }
.table.calib tr.is-retired .q-line { text-decoration: line-through; }

/* ---------- Receipts ---------- */

.receipt {
  background: var(--folha); border: 1px solid var(--traco); border-radius: var(--r);
  box-shadow: var(--sombra); padding: clamp(1.4rem, 4vw, 2.4rem);
}
.receipt-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
                padding-bottom: 1.2rem; border-bottom: 2px solid var(--tinta); }
.receipt-kicker { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.2em;
                  text-transform: uppercase; color: var(--tinta-soft); margin: 0; }
.receipt-number { font-family: var(--display); font-size: 1.7rem; margin: 0.1rem 0 0; }
.receipt-seller { display: flex; flex-direction: column; text-align: right; font-size: 0.8rem;
                  color: var(--tinta-soft); gap: 0.1rem; }
.receipt-seller strong { font-family: var(--ui); color: var(--tinta); font-size: 0.9rem; }

.receipt-void { font-family: var(--ui); font-weight: 700; letter-spacing: 0.2em; color: var(--vermelho);
                border: 2px solid var(--vermelho); border-radius: 6px; padding: 0.3rem 0.8rem;
                display: inline-block; margin: 1.2rem 0 0; }

.receipt-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
                gap: 1rem; padding: 1.3rem 0; }
.receipt-meta .k { display: block; font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.12em;
                   text-transform: uppercase; color: var(--tinta-soft); margin-bottom: 0.25rem; }
.receipt-meta .v { display: block; }

.receipt-lines { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.receipt-lines th { font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.12em;
                    text-transform: uppercase; color: var(--tinta-soft);
                    text-align: left; padding: 0.5rem 0; border-bottom: 1px solid var(--traco); }
.receipt-lines td { padding: 0.85rem 0; border-bottom: 1px solid var(--traco); vertical-align: top; }
.receipt-lines .right { text-align: right; }
.receipt-lines tfoot td { border-bottom: 0; padding-top: 1rem; }
.total-label { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.total-value { font-family: var(--display); font-size: 1.5rem; }
.receipt-paid { font-family: var(--ui); font-size: 0.8rem; color: var(--azul); margin: 0.6rem 0 0; }
.receipt-note { font-size: 0.7rem; color: var(--tinta-soft); margin: 1.6rem 0 0;
                padding-top: 0.9rem; border-top: 1px solid var(--traco); }

@media print {
  .receipt { box-shadow: none; border: 0; padding: 0; }
  .receipt-void { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Certificates ---------- */

.cert-row .req-row { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.22rem 0; font-size: 0.93rem; }
.req-mark { font-weight: 700; width: 1rem; flex: 0 0 auto; text-align: center; }
.req-mark.ok { color: var(--azul); }
.req-mark.todo { color: var(--tinta-soft); }
.req-label { flex: 1 1 auto; }
.ml { margin-left: 0.5rem; }

.doc-actions { display: flex; gap: 0.6rem; justify-content: space-between; margin-bottom: 1.2rem; }

/* The document. Fixed proportions so the screen version and the printed one
   are recognisably the same object. */
.certificate {
  background: var(--folha); border: 1px solid var(--traco); border-radius: var(--r);
  box-shadow: var(--sombra-alta); padding: clamp(1.5rem, 5vw, 3rem);
  border-top: 6px solid var(--lv, var(--azul)); text-align: center;
}
.cert-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.cert-issuer { display: flex; align-items: center; gap: 0.55rem; font-family: var(--ui);
               font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; }
.cert-unofficial {
  font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vermelho); border: 1.5px solid var(--vermelho); border-radius: 999px;
  padding: 0.18rem 0.6rem; white-space: nowrap;
}
.cert-kicker { font-family: var(--ui); font-size: 0.75rem; letter-spacing: 0.2em;
               text-transform: uppercase; color: var(--tinta-soft); margin: 0; }
.cert-level { font-family: var(--display); font-size: clamp(3.5rem, 12vw, 6rem); line-height: 1; margin: 0.2rem 0 0; }
.cert-level-name { font-style: italic; color: var(--tinta-soft); margin: 0 0 2rem; }
.cert-holder-label { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.18em;
                     text-transform: uppercase; color: var(--tinta-soft); margin: 0; }
.cert-holder { font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.4rem); margin: 0.2rem 0 1.5rem; }
.cert-attests { max-width: 46ch; margin: 0 auto 2rem; font-size: 0.95rem; color: var(--tinta-soft); }

.cert-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
              border-top: 1px solid var(--traco); border-bottom: 1px solid var(--traco);
              padding: 1.1rem 0; margin-bottom: 1.6rem; }
.cert-facts div { display: flex; flex-direction: column; gap: 0.2rem; }
.cert-facts .k { font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.1em;
                 text-transform: uppercase; color: var(--tinta-soft); }
.cert-facts .v { font-family: var(--display); font-size: 1.35rem; }

.cert-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; text-align: left; }
.cert-code { font-family: var(--ui); font-weight: 700; letter-spacing: 0.1em; font-size: 1rem; margin: 0; }
.cert-meta { font-size: 0.76rem; color: var(--tinta-soft); margin: 0.15rem 0 0; }
.cert-hash { font-family: ui-monospace, monospace; font-size: 0.62rem; color: var(--tinta-soft);
             margin: 0.2rem 0 0; word-break: break-all; max-width: 42ch; }
.cert-qr { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.cert-qr span { font-size: 0.66rem; color: var(--tinta-soft); }
.cert-disclaimer { font-size: 0.7rem; color: var(--tinta-soft); text-align: left;
                   margin: 1.8rem 0 0; padding-top: 1rem; border-top: 1px solid var(--traco); }

.inline-form { display: flex; gap: 0.4rem; align-items: center; }
.inline-form input { width: 11rem; font-size: 0.82rem; padding: 0.35rem 0.5rem;
                     border: 1.5px solid var(--traco); border-radius: 7px; }

.verdict { border-left: 5px solid var(--traco); }
.verdict-good { border-left-color: var(--azul); }
.verdict-bad { border-left-color: var(--vermelho); }
.verdict-title { font-family: var(--ui); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.3rem; }
.verdict-good .verdict-title { color: var(--azul); }
.verdict-bad .verdict-title { color: var(--vermelho); }
.mono-break { font-family: ui-monospace, monospace; font-size: 0.74rem; word-break: break-all; }
.seal-badge { max-width: 220px; height: auto; }
.statement { font-family: ui-monospace, monospace; font-size: 0.72rem; line-height: 1.6;
             white-space: pre-wrap; word-break: break-word; background: var(--papel);
             border: 1px solid var(--traco); border-radius: 8px; padding: 0.9rem; margin-top: 0.8rem; }

@media (max-width: 640px) {
  .cert-facts { grid-template-columns: repeat(2, 1fr); }
  .cert-foot { flex-direction: column-reverse; align-items: flex-start; }
}

.cert-seal { display: flex; align-items: flex-end; gap: 1rem; flex: 0 0 auto; }
/* Bounded on both axes with object-fit: the badge comes from another service,
   and a surprise aspect ratio must not be able to stretch across the page. */
.cert-badge { max-height: 76px; max-width: 150px; width: auto; object-fit: contain; }
.cert-qr img { object-fit: contain; }

/* Printing a certificate should yield the certificate, on one page, not the
   website. Chrome drops backgrounds and colour by default when printing, which
   would silently turn the red NON UFFICIALE badge into grey text — the one
   element that must never be quiet. */
@page {
  size: A4 portrait;
  margin: 12mm;
}

@media print {
  .site-header, .site-footer, .flash-stack, .no-print, .skip-link { display: none !important; }
  html, body { background: #fff; margin: 0; padding: 0; }
  main, .narrow { max-width: none; margin: 0; padding: 0; }

  .certificate {
    box-shadow: none; border: 1px solid #999; border-top-width: 5px;
    padding: 10mm 12mm; page-break-inside: avoid; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .cert-unofficial {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    color: #b3372b !important; border-color: #b3372b !important;
  }
  /* Tightened so the whole document clears one A4 page: at the screen scale
     the facts row and the footer pushed onto a second sheet. */
  .cert-head { margin-bottom: 1.2rem; }
  .cert-level { font-size: 4.2rem; }
  .cert-level-name { margin-bottom: 1.1rem; }
  .cert-holder { font-size: 1.9rem; margin-bottom: 0.9rem; }
  .cert-attests { margin-bottom: 1.1rem; font-size: 0.85rem; }
  .cert-facts { padding: 0.7rem 0; margin-bottom: 1rem; }
  .cert-facts .v { font-size: 1.15rem; }
  .cert-disclaimer { margin-top: 1.1rem; padding-top: 0.7rem; font-size: 0.62rem; }
  .cert-badge { max-height: 62px; max-width: 120px; }
  .cert-qr img { width: 92px; height: 92px; }
  img { break-inside: avoid; }
}

/* ---------- Footer ---------- */

.site-footer { margin-top: 4rem; }
.footer-inner { background: var(--tinta); color: #c3cbdb; padding: 2.2rem clamp(1rem, 4vw, 2.2rem) 2.4rem; }
.footer-inner strong { font-family: var(--ui); color: var(--papel); letter-spacing: 0.18em; }
.footer-fine { font-size: 0.84rem; margin-top: 0.5rem; opacity: 0.72; max-width: 74ch; }
.footer-link { color: #a9c4ee; }
.footer-link:hover { color: #dce7f8; }

/* ---------- Cards ---------- */

.plate {
  background: var(--folha); border: 1px solid var(--traco);
  border-radius: var(--r); box-shadow: var(--sombra); padding: 1.5rem;
}
.plate-tight { padding: 1.1rem 1.2rem; }

.card-link {
  display: block; text-decoration: none; color: inherit;
  background: var(--folha); border: 1px solid var(--traco);
  border-radius: var(--r); box-shadow: var(--sombra); padding: 1.3rem 1.4rem;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.card-link:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--tinta-soft); }

/* ---------- Level accents ---------- */

/* One accent per level, named by content.LEVEL_META so a template can
   also write var(--{{ LEVEL_META[lv].accent }}) directly. */
.lv { --lv-color: var(--azul); --lv-soft: var(--azul-soft); }
.lv-a1 { --lv-color: var(--areia); --lv-soft: var(--areia-soft); }
.lv-a2 { --lv-color: var(--mel); --lv-soft: var(--mel-soft); }
.lv-b1 { --lv-color: var(--telha); --lv-soft: var(--telha-soft); }
.lv-b2 { --lv-color: var(--azulejo); --lv-soft: var(--azulejo-soft); }
.lv-c1 { --lv-color: var(--ardosia); --lv-soft: var(--ardosia-soft); }
.lv-c2 { --lv-color: var(--tinta); --lv-soft: var(--tinta-soft-bg); }

.lv-badge {
  display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.55rem;
  font-family: var(--ui); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em;
  border-radius: 6px; background: var(--lv-color, var(--azul)); color: #fff; padding: 0 0.45rem;
}
.lv-rule { height: 3px; background: var(--lv-color, var(--azul)); border-radius: 3px; }

/* ---------- Hero ---------- */

.hero { padding: 4.2rem 0 2.4rem; }
.hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.hero-title { font-size: clamp(2.4rem, 5.6vw, 4.2rem); margin: 0.9rem 0 1rem; }
.hero-title em { font-style: italic; color: var(--azul); }
.hero-sub { font-size: 1.12rem; color: var(--tinta-soft); max-width: 54ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.7rem; }
.hero-note { margin-top: 1rem; font-size: 0.9rem; color: var(--tinta-soft); font-style: italic; }

/* The hero "card": a mock conjugation sheet, so the landing page shows
   the actual product instead of a stock photo. */
.hero-sheet {
  background: var(--folha); border: 1px solid var(--traco); border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta); overflow: hidden; transform: rotate(-1.2deg);
}
.hero-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.2rem; background: var(--tinta); color: var(--papel);
  font-family: var(--ui); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-sheet-body { padding: 1.1rem 1.3rem 1.4rem; }
.hero-sheet-body table { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: 0.95rem; }
.hero-sheet-body td { padding: 0.34rem 0; border-bottom: 1px dashed var(--traco-soft); }
.hero-sheet-body td:first-child { color: var(--tinta-soft); width: 36%; font-size: 0.85rem; }
.hero-sheet-body td:last-child { font-weight: 700; }
.hero-sheet-foot { padding: 0.7rem 1.3rem 1rem; font-size: 0.78rem; color: var(--tinta-soft); font-family: var(--ui); }

/* ---------- Stat tiles ---------- */

.stat-band { padding: 1.6rem 0 0.4rem; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 1rem; }
.tile {
  background: var(--folha); border: 1px solid var(--traco); border-radius: var(--r);
  box-shadow: var(--sombra); padding: 1.1rem 1rem; text-align: center; position: relative; overflow: hidden;
}
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--lv-color, var(--azul)); }
.tile .num { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1; display: block; }
.tile .num small { font-size: 0.5em; }
.tile .lbl { font-family: var(--ui); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-soft); display: block; margin-top: 0.45rem; }

/* ---------- Feature grid ---------- */

.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }
.grid-auto-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.2rem; }

.feature { background: var(--folha); border: 1px solid var(--traco); border-radius: var(--r); box-shadow: var(--sombra); padding: 1.5rem; }
.feature h3 { margin: 0.9rem 0 0.45rem; font-size: 1.08rem; }
.feature p { color: var(--tinta-soft); font-size: 0.95rem; }
.feature-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: var(--lv-soft, var(--azul-soft)); font-size: 1.25rem; }

/* ---------- Level path (landing) ---------- */

.path { display: grid; gap: 0; position: relative; margin-top: 1rem; }
.path-step { display: grid; grid-template-columns: 56px 1fr; gap: 1.2rem; padding: 1.1rem 0; position: relative; }
.path-step:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 66px; bottom: -4px; border-left: 2px dashed var(--traco); }
.path-num {
  width: 54px; height: 54px; flex: none; border-radius: 14px;
  background: var(--lv-soft); border: 1.5px solid var(--lv-color);
  display: grid; place-items: center; color: var(--lv-color);
  font-family: var(--ui); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.06em;
}
.path-step h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.path-step p { color: var(--tinta-soft); max-width: 64ch; font-size: 0.97rem; }

/* ---------- Auth ---------- */

.auth-wrap { display: grid; place-items: center; padding: 3.4rem 1rem; }
.auth-card { width: min(440px, 100%); background: var(--folha); border: 1px solid var(--traco); border-radius: var(--r-lg); box-shadow: var(--sombra-alta); padding: 2.2rem; }
.auth-card h1 { font-size: 1.7rem; margin: 0.5rem 0 1.3rem; }
.auth-alt { margin-top: 1.1rem; font-size: 0.93rem; color: var(--tinta-soft); }

.field { margin-bottom: 1rem; }
.field label {
  display: block; font-family: var(--ui); font-weight: 600;
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.35rem;
  color: var(--tinta-soft);
}
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field select, .field textarea {
  width: 100%; font-family: var(--texto); font-size: 1rem;
  padding: 0.62rem 0.75rem; border: 1.5px solid var(--traco); border-radius: 9px;
  background: #fff; color: var(--tinta);
}
.field textarea { font-family: var(--texto); line-height: 1.7; resize: vertical; min-height: 220px; }

/* Selects. The browser's own control ignores every other decision on this
   page — its own font, its own chevron, its own focus ring — so it is drawn
   here instead. `appearance: none` removes the native widget; the chevron is
   an inline SVG in the background so there is no extra element and nothing to
   load, and the right padding keeps the longest option clear of it. */
.field select, .stack select, select.select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  font-family: var(--ui); font-size: 0.92rem; font-weight: 500;
  padding: 0.62rem 2.4rem 0.62rem 0.85rem;
  border: 1.5px solid var(--traco); border-radius: 9px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231d2b3e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.72rem auto;
  color: var(--tinta); cursor: pointer; width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field select:hover, .stack select:hover, select.select:hover { border-color: var(--tinta-soft); }
.field select:focus, .stack select:focus, select.select:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-soft);
}
.field select:disabled, .stack select:disabled { opacity: 0.55; cursor: not-allowed; background-color: var(--folha); }
/* Firefox keeps a dotted focus ring on the text inside the control. */
.field select:-moz-focusring, .stack select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--tinta); }
.field select option, .stack select option { font-family: var(--ui); color: var(--tinta); }

/* Date inputs sit next to those selects and were the only control still
   wearing the browser's default. The picker indicator stays — it is the
   affordance — but the box around it matches. */
.field input[type="date"], .stack input[type="date"] {
  width: 100%; font-family: var(--ui); font-size: 0.92rem; font-weight: 500;
  padding: 0.6rem 0.85rem; border: 1.5px solid var(--traco); border-radius: 9px;
  background: #fff; color: var(--tinta);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input[type="date"]:hover, .stack input[type="date"]:hover { border-color: var(--tinta-soft); }
.field input[type="date"]:focus, .stack input[type="date"]:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-soft);
}
.stack input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.stack input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
/* Show/hide password. The wrapper is inserted by js/password.js, so the
   padding that keeps text clear of the eye is scoped to it — a plain password
   field with no toggle keeps the normal padding. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input[type="password"], .pw-wrap input[type="text"] { padding-right: 2.9rem; }
.pw-toggle {
  position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--tinta-soft);
}
.pw-toggle:hover { color: var(--tinta); background: rgba(0, 0, 0, 0.04); }
.pw-toggle:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

.field-hint { font-size: 0.82rem; color: var(--tinta-soft); margin-top: 0.3rem; }
.turnstile-box { margin-bottom: 1rem; min-height: 65px; }

.check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; cursor: pointer; }
.check input[type="checkbox"], .check input[type="radio"] { width: 1.05rem; height: 1.05rem; accent-color: var(--azul); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.4rem 1.1rem; }
.count-muted { color: var(--tinta-soft); font-size: 0.83rem; }

/* ---------- Dashboard ---------- */

.quick-cards { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1.1rem; margin-top: 1.5rem; }
.action-card {
  background: var(--folha); border: 1px solid var(--traco); border-radius: var(--r);
  box-shadow: var(--sombra); padding: 1.3rem; display: flex; flex-direction: column; gap: 0.55rem;
}
.action-card.primary { background: var(--tinta); color: #e6ebf5; border-color: var(--tinta); }
.action-card.primary h3 { color: #fff; }
.action-card.primary p { color: #aab5cb; }
.action-card h3 { font-size: 1.05rem; }
.action-card p { font-size: 0.93rem; color: var(--tinta-soft); flex: 1; }
.action-card form, .action-card .btn { margin-top: auto; }

.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.3rem; margin-top: 1.5rem; align-items: start; }
.stack { display: grid; gap: 1.3rem; }

.panel-title {
  font-family: var(--ui); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-soft);
  margin-bottom: 0.9rem;
}

/* Bars */
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.6rem; align-items: center; margin-bottom: 0.85rem; }
.bar-label { font-family: var(--ui); font-weight: 600; font-size: 0.85rem; }
.bar { grid-column: 1 / -1; height: 9px; background: var(--papel-2); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--azul); border-radius: 99px; transition: width 0.4s ease; }
.bar-fill.low { background: var(--vermelho); }
.bar-fill.mid { background: var(--mel); }
.bar-fill.high { background: var(--azul); }
.bar-pct { font-family: var(--ui); font-weight: 700; font-size: 0.85rem; }

/* Readiness dial */
.ready { display: flex; align-items: center; gap: 1.2rem; }
.dial { --pct: 0; width: 92px; height: 92px; flex: none; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--azul) calc(var(--pct) * 1%), var(--papel-2) 0); }
.dial::after { content: ""; position: absolute; inset: 9px; background: var(--folha); border-radius: 50%; }
.dial span { position: relative; z-index: 1; font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.ready-copy h3 { font-size: 1.02rem; margin-bottom: 0.2rem; }
.ready-copy p { font-size: 0.88rem; color: var(--tinta-soft); }
.ready-parts { display: grid; gap: 0.5rem; margin-top: 1rem; }

/* Streak heatmap */
.streak-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.9rem; }
.streak-num { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; }
.streak-lbl { font-family: var(--ui); font-size: 0.8rem; color: var(--tinta-soft); }
.heatmap { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.heat-col { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.heat-cell { width: 11px; height: 11px; border-radius: 3px; background: var(--papel-2); }
.heat-cell[data-level="1"] { background: #cddcf1; }
.heat-cell[data-level="2"] { background: #93b3e0; }
.heat-cell[data-level="3"] { background: #5282c4; }
.heat-cell[data-level="4"] { background: var(--azul); }
.heat-cell.future { background: transparent; box-shadow: inset 0 0 0 1px var(--traco-soft); }
.heat-legend { display: flex; align-items: center; gap: 5px; margin-top: 0.7rem; font-size: 0.75rem; color: var(--tinta-soft); font-family: var(--ui); }

/* Forecast */
.forecast { display: flex; align-items: flex-end; gap: 4px; height: 68px; margin-top: 0.4rem; }
.forecast-bar { flex: 1; background: var(--papel-2); border-radius: 3px 3px 0 0; position: relative; min-height: 3px; }
.forecast-bar i { position: absolute; inset: auto 0 0 0; background: var(--telha); border-radius: 3px 3px 0 0; display: block; }
.forecast-axis { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--tinta-soft); font-family: var(--ui); margin-top: 0.3rem; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; background: var(--folha); border: 1px solid var(--traco); border-radius: var(--r); overflow: hidden; }
table.list th {
  font-family: var(--ui); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: left;
  background: var(--papel-2); color: var(--tinta-soft); padding: 0.65rem 0.95rem;
}
table.list td { padding: 0.7rem 0.95rem; border-top: 1px solid var(--traco-soft); font-size: 0.95rem; }
table.list tr:hover td { background: var(--papel); }

.badge {
  display: inline-block; font-family: var(--ui); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 99px;
}
.badge-pass { background: var(--azul); color: #fff; }
.badge-fail { background: var(--vermelho); color: #fff; }
.badge-progress { background: var(--mel-soft); color: var(--mel); }
.badge-muted { background: var(--folha); color: var(--tinta-soft); }

.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--ui); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.03em;
  background: var(--papel-2); border-radius: 99px; padding: 0.26rem 0.72rem; color: var(--tinta-soft);
}
.chip-strong { background: var(--tinta); color: var(--papel); }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* ---------- Study index ---------- */

.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.4rem 0 2.4rem; }
.tool {
  display: block; text-decoration: none; color: var(--tinta);
  background: var(--folha); border: 1px solid var(--traco); border-left: 4px solid var(--lv-color, var(--azul));
  border-radius: var(--r); box-shadow: var(--sombra); padding: 1.05rem 1.15rem;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.tool:hover { color: var(--tinta); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.tool h3 { font-size: 0.98rem; }
.tool p { font-size: 0.85rem; color: var(--tinta-soft); margin-top: 0.25rem; }
.tool .tool-meta { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lv-color); margin-top: 0.5rem; display: block; }

.level-block { margin-bottom: 2.6rem; }
.level-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.level-head h2 { font-size: 1.35rem; }
.level-head .rule { flex: 1; height: 1px; background: var(--traco); }

.unit-card { border-top: 3px solid var(--lv-color); }
.unit-card .unit-num { font-family: var(--ui); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lv-color); }
.unit-card h3 { font-size: 1.06rem; margin: 0.45rem 0 0.4rem; }
.unit-card p { font-size: 0.9rem; color: var(--tinta-soft); }
.unit-card .unit-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }

/* ---------- Unit (theory) page ---------- */

.unit { width: min(820px, 92vw); margin: 0 auto; padding: 2.6rem 0 1rem; }
.unit-header h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0.55rem 0; }
.unit-blurb { font-size: 1.08rem; color: var(--tinta-soft); font-style: italic; }

.block-p { margin: 0 0 1rem; }
.block-h { font-family: var(--ui); font-weight: 700; font-size: 1.12rem; margin: 2rem 0 0.7rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--lv-color, var(--azul)); display: inline-block; }
.block-list { margin: 0.3rem 0 1.2rem 1.2rem; }
.block-list li { margin-bottom: 0.4rem; }

.block-table { width: 100%; border-collapse: collapse; margin: 0.9rem 0 1.4rem; font-size: 0.94rem; background: var(--folha); border-radius: 10px; overflow: hidden; box-shadow: var(--sombra); }
.block-table th {
  font-family: var(--ui); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: left; background: var(--tinta); color: var(--papel); padding: 0.55rem 0.8rem;
}
.block-table td { padding: 0.55rem 0.8rem; border-top: 1px solid var(--traco-soft); vertical-align: top; }
.block-table tr:nth-child(even) td { background: var(--papel); }
/* Key columns are marked in the data, not assumed to be the first one: a
   table like the alphabet is two key/value pairs side by side. */
.block-table td.k { font-family: var(--ui); font-weight: 600; }

.callout { border-radius: 11px; padding: 0.95rem 1.15rem; margin: 1.2rem 0; font-size: 0.97rem; border: 1px solid transparent; }
.callout strong { font-weight: 700; }
.callout-key { background: var(--azul-soft); border-color: #c7d7ef; border-left: 4px solid var(--azul); }
.callout-warn { background: var(--vermelho-soft); border-color: #f0cccd; border-left: 4px solid var(--vermelho); }
.callout-tip { background: var(--mel-soft); border-color: #eedcb4; border-left: 4px solid var(--mel); }
.callout-falso { background: var(--telha-soft); border-color: #eccdbb; border-left: 4px solid var(--telha); }
.callout-label {
  display: block; font-family: var(--ui); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.35rem; opacity: 0.8;
}

.examples { margin: 1rem 0 1.4rem; display: grid; gap: 0.55rem; }
.example {
  background: var(--folha); border: 1px solid var(--traco-soft); border-radius: 10px;
  padding: 0.7rem 0.95rem;
}
.example .es { font-weight: 600; }
.example .tr { font-size: 0.88rem; color: var(--tinta-soft); margin-top: 0.15rem; }

.conj {
  background: var(--folha); border: 1px solid var(--traco); border-radius: 12px;
  box-shadow: var(--sombra); margin: 1.2rem 0 1.5rem; overflow: hidden;
}
.conj-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.7rem 1.1rem; background: var(--papel-2);
  font-family: var(--ui); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-soft);
}
.conj-head b { font-size: 0.95rem; letter-spacing: 0.02em; text-transform: none; color: var(--tinta); }
.conj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; padding: 0.9rem 1.1rem 1.1rem; }
.conj-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--traco-soft); }
.conj-row .p { font-size: 0.85rem; color: var(--tinta-soft); font-family: var(--ui); }
.conj-row .f { font-weight: 700; font-family: var(--ui); }

/* `pairs` — the Portugal | Brasil comparison, the product's thesis in one
   table. Contract for templates (study/unit.html and the landing sheet):

     <table class="pairs">
       <thead><tr><th class="pt">Portugal</th><th class="br">Brasil</th>
                  <th class="gloss">…</th></tr></thead>
       <tbody><tr><td class="pt">Estou a estudar.</td>
                  <td class="br">Estou estudando.</td>
                  <td class="gloss">I'm studying.</td></tr></tbody>
     </table>

   Unclassed cells fall back to the older key/value look (first cell bold,
   last cell muted), so a two-column pairs block with no classes still reads.
   A learner's own track can be emphasised with `.pairs.mine-pt` /
   `.pairs.mine-br` on the table: the other column is muted, not hidden —
   seeing the other variety is how you learn not to write it. */
.pairs { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0.9rem 0 1.4rem; font-size: 0.95rem;
         background: var(--folha); border: 1px solid var(--traco); border-radius: 11px; overflow: hidden; }
.pairs th { font-family: var(--ui); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; color: var(--tinta-soft); padding: 0.55rem 0.8rem; background: var(--papel); }
.pairs td { padding: 0.5rem 0.8rem; border-top: 1px solid var(--traco-soft); vertical-align: top; }
.pairs td:first-child { font-weight: 600; }
.pairs td:last-child { color: var(--tinta-soft); }
.pairs th.pt, .pairs th.br { color: var(--tinta); }
.pairs th.pt::before, .pairs th.br::before {
  content: ""; display: inline-block; width: 16px; height: 10px; margin-right: 0.45rem;
  vertical-align: -1px; border-radius: 2px;
}
.pairs th.pt::before { background: linear-gradient(90deg, var(--verde) 0 40%, var(--vermelho) 40%); }
.pairs th.br::before { background: linear-gradient(90deg, var(--verde-br) 0 50%, var(--amarelo-vivo) 50%); }
.pairs td.pt, .pairs td.br { font-weight: 600; color: var(--tinta); }
.pairs td.pt { box-shadow: inset 3px 0 0 var(--verde); }
.pairs td.br { box-shadow: inset 3px 0 0 var(--amarelo-vivo); }
.pairs td.gloss { font-weight: 400; color: var(--tinta-soft); font-size: 0.9rem; }
.pairs .diff { background: var(--amarelo-soft); border-radius: 3px; padding: 0 0.15em; }
.pairs.mine-pt .br, .pairs.mine-br .pt { opacity: 0.55; }
@media (max-width: 560px) {
  .pairs td.gloss, .pairs th.gloss { display: none; }
}

.unit-pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2.4rem 0 1rem; flex-wrap: wrap; }

/* ---------- Inline exercises ---------- */
/* Visually distinct from the surrounding theory: practice should look like a
   different activity, not like another paragraph you can skim past. */

.exercise {
  background: var(--papel-2); border: 1px solid var(--traco);
  border-left: 4px solid var(--lv-color, var(--azul));
  border-radius: 12px; padding: 1.2rem 1.4rem 1.3rem; margin: 1.6rem 0 1.8rem;
}
.exercise-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.exercise-label {
  font-family: var(--ui); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff; background: var(--lv-color, var(--azul));
  border-radius: 4px; padding: 0.18rem 0.42rem;
}
.exercise-head h3 { font-size: 1rem; flex: 1; }
.exercise-score {
  font-family: var(--ui); font-weight: 700; font-size: 0.8rem;
  color: var(--vermelho); background: var(--vermelho-soft); border-radius: 99px; padding: 0.16rem 0.6rem;
}
.exercise-score.all-right { color: var(--azul); background: var(--azul-soft); }
.exercise-intro { font-size: 0.93rem; color: var(--tinta-soft); margin-bottom: 0.9rem; }

.exercise-items { list-style: none; counter-reset: ex; display: grid; gap: 0.85rem; }
.ex-item { counter-increment: ex; padding-left: 2rem; position: relative; }
.ex-item::before {
  content: counter(ex) "."; position: absolute; left: 0; top: 0.08rem;
  font-family: var(--ui); font-weight: 700; font-size: 0.82rem; color: var(--tinta-soft);
}
.ex-item.ok::before { content: "✓"; color: var(--azul); }
.ex-item.ko::before { content: "✗"; color: var(--vermelho); }
.ex-q { font-size: 1rem; margin-bottom: 0.4rem; }

.ex-input {
  font-family: var(--texto); font-size: 0.98rem; width: min(320px, 100%);
  padding: 0.42rem 0.7rem; border: 1.5px solid var(--traco); border-radius: 8px; background: #fff;
}
.ex-input-long { width: 100%; }
.ex-input:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.ex-item.ok .ex-input { border-color: var(--azul); background: var(--azul-soft); }
.ex-item.ko .ex-input { border-color: var(--vermelho); background: var(--vermelho-soft); }
.ex-input:disabled { opacity: 1; }

.ex-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ex-option {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  border: 1.5px solid var(--traco); border-radius: 8px; background: #fff;
  padding: 0.34rem 0.7rem; font-size: 0.95rem;
}
.ex-option:hover { background: var(--papel); }
.ex-option:has(input:checked) { border-color: var(--tinta); background: var(--folha); font-weight: 600; }
.ex-item.ok .ex-option:has(input:checked) { border-color: var(--azul); background: var(--azul-soft); }
.ex-item.ko .ex-option:has(input:checked) { border-color: var(--vermelho); background: var(--vermelho-soft); }
.ex-option input { accent-color: var(--tinta); }

.ex-note { font-size: 0.88rem; color: var(--tinta-soft); margin-top: 0.35rem; }
.ex-note b { font-family: var(--ui); font-weight: 700; color: var(--tinta); }
.exercise-actions { display: flex; gap: 0.5rem; margin-top: 1.1rem; flex-wrap: wrap; }

/* ---------- Vocabulary reviewer ---------- */

.rev-shell { width: min(720px, 94vw); margin: 2rem auto; }
.rev-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.rev-progress { height: 6px; background: var(--papel-2); border-radius: 99px; overflow: hidden; margin-bottom: 1.4rem; }
.rev-progress i { display: block; height: 100%; background: var(--azul); border-radius: 99px; transition: width 0.3s ease; }

.rev-card {
  background: var(--folha); border: 1px solid var(--traco); border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta); padding: 2.6rem 2rem; text-align: center; min-height: 280px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  cursor: pointer; position: relative; overflow: hidden;
}
.rev-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--lv-color, var(--azul)); }
.rev-card:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.rev-word { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.2; }
.rev-meaning { font-size: 1.25rem; color: var(--azul); font-weight: 600; }
.rev-example { font-style: italic; color: var(--tinta-soft); font-size: 1rem; max-width: 46ch; }
.rev-hint { font-family: var(--ui); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-soft); }
.rev-new { position: absolute; top: 0.9rem; right: 0.9rem; }

.grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 1.1rem; }
.grade {
  font-family: var(--ui); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em;
  border: 1.5px solid var(--traco); background: var(--folha); color: var(--tinta);
  border-radius: 10px; padding: 0.7rem 0.4rem; cursor: pointer; display: grid; gap: 0.15rem;
  transition: transform 0.1s ease, border-color 0.1s ease, background 0.1s ease;
}
.grade small { font-family: var(--ui); font-weight: 500; font-size: 0.68rem; text-transform: none; letter-spacing: 0; color: var(--tinta-soft); }
.grade:hover { transform: translateY(-1px); }
.grade-again:hover { border-color: var(--vermelho); background: var(--vermelho-soft); }
.grade-hard:hover { border-color: var(--telha); background: var(--telha-soft); }
.grade-good:hover { border-color: var(--azul); background: var(--azul-soft); }
.grade-easy:hover { border-color: var(--anil); background: #e4eef7; }
.keys-hint { text-align: center; font-size: 0.8rem; color: var(--tinta-soft); margin-top: 0.9rem; font-family: var(--ui); }

.rev-done { text-align: center; padding: 2.6rem 2rem; }
.rev-done .big { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.2rem); margin: 0.5rem 0; }

/* ---------- Vocabulary browse ---------- */

.vocab-list { display: grid; gap: 0.5rem; }
.vocab-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: baseline;
  background: var(--folha); border: 1px solid var(--traco-soft); border-radius: 10px; padding: 0.65rem 0.9rem;
}
.vocab-row .es { font-weight: 700; }
.vocab-row .tr { color: var(--tinta-soft); font-size: 0.94rem; }
.vocab-row .ex { grid-column: 1 / -1; font-style: italic; font-size: 0.88rem; color: var(--tinta-soft); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1.2rem 0 1.6rem; }
.filter-bar input[type="search"] { font-family: var(--texto); font-size: 0.95rem; padding: 0.5rem 0.8rem; border: 1.5px solid var(--traco); border-radius: 9px; background: #fff; min-width: 220px; }

/* ---------- Readings ---------- */

.reading { width: min(760px, 92vw); margin: 0 auto; padding: 2.4rem 0 1rem; }
.reading-body { font-size: 1.12rem; line-height: 1.85; }
.reading-body p { margin-bottom: 1.1rem; }
.glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.4rem 1.2rem; }
.glossary div { font-size: 0.92rem; padding: 0.25rem 0; border-bottom: 1px dashed var(--traco-soft); }
.glossary b { font-weight: 600; }
.glossary span { color: var(--tinta-soft); }

.quiz-item { border-top: 1px solid var(--traco-soft); padding: 1.2rem 0; }
.quiz-item:first-child { border-top: none; }
.quiz-q { font-weight: 600; margin-bottom: 0.7rem; }
.quiz-choices { display: grid; gap: 0.4rem; }
.quiz-choice {
  display: flex; gap: 0.7rem; align-items: baseline; cursor: pointer;
  border: 1.5px solid var(--traco); border-radius: 9px; background: #fff; padding: 0.55rem 0.8rem; font-size: 0.97rem;
}
.quiz-choice input { position: absolute; opacity: 0; }
.quiz-choice .letter { font-family: var(--ui); font-weight: 700; font-size: 0.78rem; color: var(--tinta-soft); }
.quiz-choice:hover { background: var(--papel); }
.quiz-choice.correct { background: var(--azul-soft); border-color: var(--azul); }
.quiz-choice.wrong { background: var(--vermelho-soft); border-color: var(--vermelho); }
.quiz-expl { font-size: 0.9rem; color: var(--tinta-soft); margin-top: 0.6rem; font-style: italic; }

/* ---------- Phrases / false friends / verbs ---------- */

.phrase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px dashed var(--traco-soft); align-items: baseline; }
.phrase-row .es { font-weight: 600; }
.phrase-row .tr { color: var(--tinta-soft); font-size: 0.94rem; }
.phrase-row .reg { font-family: var(--ui); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-soft); }

.fa-card { background: var(--folha); border: 1px solid var(--traco); border-left: 4px solid var(--telha); border-radius: var(--r); box-shadow: var(--sombra); padding: 1.1rem 1.2rem; }
.fa-card.fon { border-left-color: var(--anil); }
.fa-word { font-family: var(--display); font-weight: 700; font-size: 1.35rem; }
.fa-line { font-size: 0.92rem; margin-top: 0.4rem; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; }
.fa-line b { font-family: var(--ui); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-soft); white-space: nowrap; padding-top: 0.18rem; }
.fa-ex { font-style: italic; color: var(--tinta-soft); font-size: 0.9rem; margin-top: 0.6rem; }

.verb-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.4rem; align-items: start; }
.verb-list { max-height: 70vh; overflow-y: auto; display: grid; gap: 0.2rem; }
.verb-list a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 7px; text-decoration: none; color: var(--tinta); font-size: 0.92rem; }
.verb-list a:hover { background: var(--papel-2); color: var(--tinta); }
.verb-list a.active { background: var(--tinta); color: var(--papel); }
.verb-list a span { color: var(--tinta-soft); font-size: 0.8rem; }
.verb-list a.active span { color: #a8b4cb; }
.verb-group-title { font-family: var(--ui); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-soft); margin: 0.9rem 0 0.3rem; }
.tense-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

/* ---------- Immigration track ---------- */

.letter-body {
  background: var(--folha); border: 1px solid var(--traco); border-radius: 10px;
  padding: 1.2rem 1.4rem; font-family: var(--texto); font-size: 0.95rem; line-height: 1.8;
  white-space: pre-wrap;
}
.dialogue { display: grid; gap: 0.6rem; }
.dl-line { display: grid; grid-template-columns: 96px 1fr; gap: 0.9rem; align-items: baseline; }
.dl-who { font-family: var(--ui); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-soft); }
.dl-fr { font-weight: 600; }
.dl-tr { font-size: 0.88rem; color: var(--tinta-soft); }

/* ---------- Drills ---------- */

.drill-shell { width: min(680px, 94vw); margin: 2rem auto; }
.drill-card {
  background: var(--folha); border: 1px solid var(--traco); border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta); padding: 2.2rem 1.8rem; text-align: center;
}
.drill-meta { font-family: var(--ui); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-soft); }
.drill-verb { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5.4vw, 2.9rem); margin: 0.5rem 0 0.2rem; }
.drill-tr { color: var(--tinta-soft); font-size: 0.98rem; }
.drill-person { font-family: var(--ui); font-weight: 700; font-size: 1.3rem; margin: 1.2rem 0 0.8rem; color: var(--telha); }
.drill-input {
  width: 100%; font-family: var(--texto); font-size: 1.35rem; text-align: center;
  padding: 0.75rem 1rem; border: 1.5px solid var(--traco); border-radius: 11px; background: #fff;
}
.drill-input:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.drill-input.ok { border-color: var(--azul); background: var(--azul-soft); }
.drill-input.ko { border-color: var(--vermelho); background: var(--vermelho-soft); }
.drill-feedback { margin-top: 1rem; font-size: 1rem; min-height: 2.6rem; }
.drill-feedback .right { color: var(--azul); font-weight: 700; }
.drill-feedback .wrong { color: var(--vermelho); font-weight: 700; }
.drill-feedback .answer { font-family: var(--ui); font-weight: 700; font-size: 1.15rem; }
.drill-actions { display: flex; justify-content: center; gap: 0.7rem; margin-top: 1.2rem; }

.dict-sentence { font-family: var(--texto); font-size: 1.2rem; line-height: 1.8; }
.dict-diff .ok { color: var(--azul); }
.dict-diff .ko { color: var(--vermelho); text-decoration: underline wavy var(--vermelho); }
.speak-card { background: var(--folha); border: 1px solid var(--traco); border-left: 4px solid var(--lv-color); border-radius: var(--r); box-shadow: var(--sombra); padding: 1.3rem 1.4rem; }
.timer-big { font-family: var(--display); font-weight: 700; font-size: 3.2rem; line-height: 1; }

.word-count { font-family: var(--ui); font-weight: 600; font-size: 0.82rem; color: var(--tinta-soft); }
.word-count.ok { color: var(--azul); }
.word-count.over { color: var(--vermelho); }
.attempt { background: var(--papel); border: 1px solid var(--traco-soft); border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 0.7rem; }
.attempt-meta { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-soft); margin-bottom: 0.4rem; }
.attempt-text { white-space: pre-wrap; font-size: 0.95rem; }

/* ---------- Exams ---------- */

.kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.3rem 0; }
.kind-card {
  position: relative; display: block; cursor: pointer;
  background: var(--folha); border: 1.5px solid var(--traco); border-radius: var(--r);
  box-shadow: var(--sombra); padding: 1.2rem 1.3rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.kind-card input { position: absolute; opacity: 0; }
.kind-card h3 { font-size: 1.04rem; margin-bottom: 0.3rem; }
.kind-card p { font-size: 0.9rem; color: var(--tinta-soft); }
.kind-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.kind-card.selected { border-color: var(--tinta); background: var(--tinta); }
.kind-card.selected h3 { color: #fff; }
.kind-card.selected p { color: #aab5cb; }

.options-panel { margin: 0.8rem 0 1.6rem; }
.options-panel .plate { display: grid; gap: 1rem; }
.options-row { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-start; }

.exam-shell { display: grid; grid-template-columns: 1fr 240px; gap: 1.5rem; width: min(1080px, 94vw); margin: 2rem auto; align-items: start; }
.exam-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.exam-count { font-family: var(--ui); font-weight: 700; font-size: 0.95rem; }
#exam-timer {
  font-family: var(--ui); font-weight: 800; font-size: 1.02rem;
  background: var(--tinta); color: var(--papel); border-radius: 8px; padding: 0.3rem 0.8rem;
  min-width: 78px; text-align: center;
}
#exam-timer.timer-low { background: var(--vermelho); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.62; } }

.exam-progress { height: 6px; background: var(--papel-2); border-radius: 99px; overflow: hidden; margin-bottom: 1.3rem; }
.exam-progress i { display: block; height: 100%; background: var(--azul); border-radius: 99px; }

.q-plate { background: var(--folha); border: 1px solid var(--traco); border-radius: var(--r-lg); box-shadow: var(--sombra-alta); padding: 1.9rem; }
.q-passage {
  background: var(--papel); border: 1px solid var(--traco-soft); border-radius: 10px;
  padding: 1rem 1.2rem; margin-bottom: 1.3rem; font-size: 1rem; line-height: 1.75; white-space: pre-wrap;
}
.q-audio { display: flex; align-items: center; gap: 0.8rem; background: var(--papel); border: 1px dashed var(--traco); border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 1.3rem; }
.q-audio p { font-size: 0.88rem; color: var(--tinta-soft); }
.q-text { font-size: 1.2rem; font-weight: 600; line-height: 1.55; margin-bottom: 1.2rem; }

.choices { display: grid; gap: 0.6rem; }
.choice {
  position: relative; display: flex; gap: 0.8rem; align-items: baseline;
  border: 1.5px solid var(--traco); border-radius: 10px; background: #fff;
  padding: 0.78rem 1rem; cursor: pointer; font-size: 1.02rem;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.choice:hover { background: var(--papel); }
.choice input { position: absolute; opacity: 0; }
.choice-letter {
  font-family: var(--ui); font-weight: 700; font-size: 0.78rem;
  width: 1.55rem; height: 1.55rem; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--traco); border-radius: 6px; background: var(--papel); align-self: center;
}
.choice:has(input:checked) { border-color: var(--tinta); background: var(--papel-2); }
.choice:has(input:checked) .choice-letter { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.choice:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.choice.locked { pointer-events: none; }
.choice.reveal-correct { background: var(--azul-soft); border-color: var(--azul); }
.choice.reveal-correct .choice-letter { background: var(--azul); color: #fff; border-color: var(--azul); }
.choice.reveal-wrong { background: var(--vermelho-soft); border-color: var(--vermelho); }
.choice.reveal-wrong .choice-letter { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }

.answer-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }
.feedback { border-radius: 10px; padding: 1rem 1.2rem; margin-top: 1.3rem; }
.feedback.ok { background: var(--azul-soft); border-left: 4px solid var(--azul); }
.feedback.bad { background: var(--vermelho-soft); border-left: 4px solid var(--vermelho); }
.feedback h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.feedback.ok h3 { color: var(--azul); }
.feedback.bad h3 { color: var(--vermelho); }
.feedback p { font-size: 0.95rem; }

.exam-side { position: sticky; top: 84px; display: grid; gap: 1rem; }
.qnav { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 0.35rem; }
.qnav a {
  display: grid; place-items: center; height: 32px;
  font-family: var(--ui); font-weight: 600; font-size: 0.78rem;
  border: 1px solid var(--traco); border-radius: 7px; text-decoration: none; color: var(--tinta); background: #fff;
}
.qnav a.answered { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.qnav a.current { background: var(--mel); color: var(--tinta); border-color: var(--mel); }
.qnav a:hover { border-color: var(--tinta); }

/* ---------- Results ---------- */

.result-banner {
  border-radius: var(--r-lg); padding: 2.2rem 2rem; text-align: center; color: #fff;
  margin: 2rem 0 1.4rem; box-shadow: var(--sombra-alta);
}
.result-banner.pass { background: var(--azul); }
.result-banner.fail { background: var(--vermelho); }
.result-verdict { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.result-score { font-family: var(--ui); font-weight: 800; font-size: clamp(1.2rem, 3vw, 1.7rem); margin-top: 0.4rem; }
.result-sub { margin-top: 0.5rem; opacity: 0.92; font-size: 0.98rem; }

.review-item { background: var(--folha); border: 1px solid var(--traco); border-left: 4px solid var(--azul); border-radius: var(--r); box-shadow: var(--sombra); padding: 1.3rem 1.5rem; margin-bottom: 1rem; }
.review-item.missed { border-left-color: var(--vermelho); }
.review-q { font-weight: 600; font-size: 1.03rem; margin-bottom: 0.8rem; }
.review-num { font-family: var(--ui); font-weight: 700; color: var(--tinta-soft); margin-right: 0.4rem; }
.review-choices { list-style: none; display: grid; gap: 0.32rem; margin-bottom: 0.7rem; }
.review-choices li { padding: 0.4rem 0.75rem; border: 1px solid var(--traco-soft); border-radius: 8px; font-size: 0.95rem; }
.review-choices li.is-correct { background: var(--azul-soft); border-color: var(--azul); font-weight: 600; }
.review-choices li.is-wrong { background: var(--vermelho-soft); border-color: var(--vermelho); }
.review-expl { font-size: 0.92rem; color: var(--tinta-soft); font-style: italic; }
.review-ref { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-soft); margin-top: 0.5rem; }

/* ---------- Profile ---------- */

.profile-grid { display: grid; gap: 1.2rem; margin: 1.5rem 0 2rem; }
.switch { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .slider { width: 46px; height: 26px; flex: none; border-radius: 99px; background: var(--papel-2); border: 1.5px solid var(--traco); position: relative; transition: background 0.15s ease; }
.switch .slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.15s ease; }
.switch input:checked + .slider { background: var(--azul); border-color: var(--azul); }
.switch input:checked + .slider::after { transform: translateX(20px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--azul); outline-offset: 2px; }
.switch-label { font-family: var(--ui); font-weight: 600; font-size: 0.92rem; }

/* ---------- Admin ---------- */
/* Deliberately the same visual language as the rest of the app: an admin
   plane that looks like a different product is one nobody checks. */

.admin .admin-nav { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 1.6rem;
             border-bottom: 1px solid var(--traco); padding-bottom: 0.6rem; }
.admin-nav a { font-family: var(--ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
               text-decoration: none; color: var(--tinta-soft);
               padding: 0.4rem 0.75rem; border-radius: 8px; }
.admin-nav a:hover { background: var(--folha); color: var(--tinta); }
.admin-nav a.on { background: var(--tinta); color: var(--papel); }

.admin-section {
  font-family: var(--ui); font-weight: 800; font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-soft);
  margin: 2.6rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--traco);
}
.admin .page-head .kicker a { color: var(--tinta-soft); text-decoration: none; }
.admin .page-head .kicker a:hover { color: var(--azul); }

.badge-admin { background: var(--telha); color: #fff; }
.chip-warn { background: var(--vermelho-soft); color: var(--vermelho); }
.chip-bad { background: var(--vermelho); color: #fff; }

/* The destructive corner earns its own colour; nothing else in the app is
   outlined in red, so it cannot be mistaken for an ordinary panel. */
.plate.danger { border-color: var(--vermelho); border-left: 4px solid var(--vermelho); background: #fffbfb; }
.plate.danger .panel-title { color: var(--vermelho); }

/* ---------- Utilities ---------- */

.muted { color: var(--tinta-soft); }
.small { font-size: 0.88rem; }
.center { text-align: center; }
.mt { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb { margin-bottom: 1rem; }
.row { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.divider { border: none; border-top: 1px dashed var(--traco); margin: 1.2rem 0; }

/* Scoped to .js: the class is set by an inline script in <head>, so with
   scripting off — or in a print/PDF render, where the IntersectionObserver
   never fires — the content is simply visible instead of permanently
   transparent. An animation must never be able to hide the page. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.07s; }
.reveal.d2 { transition-delay: 0.14s; }
.reveal.d3 { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .js .reveal { opacity: 1; transform: none; }
  .site-header, .site-nav, .flash-stack, .btn { display: none !important; }
  body { background: #fff; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-sheet { transform: none; }
  .quick-cards { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .exam-shell { grid-template-columns: 1fr; }
  .exam-side { position: static; }
  .verb-layout { grid-template-columns: 1fr; }
  .verb-list { max-height: none; }
  .conj-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0.9rem;
    background: var(--papel); border-bottom: 1px solid var(--traco);
    padding: 1.2rem clamp(1rem, 4vw, 2.2rem);
  }
  .site-nav.open { display: flex; }
  .q-plate { padding: 1.2rem 1.1rem; }
  .grade-row { grid-template-columns: repeat(2, 1fr); }
  .phrase-row, .vocab-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .dl-line { grid-template-columns: 1fr; gap: 0.1rem; }
}


/* ---------- Filter pills (the false-friends shelf) ---------- */

.pill-btn.is-on {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--folha);
}
.fa-word .chip { margin-inline-start: 0.4rem; vertical-align: middle; }

/* ---------- Immigration tracks ---------- */

.track-grid { display: grid; gap: 1.2rem; }
.track-card.is-active {
  border-color: var(--azul);
  box-shadow: var(--sombra-alta);
}
.track-card .path { margin-top: 0.8rem; padding-inline-start: 0; list-style: none; }


/* ---------- The two tracks ---------- */

/* A track badge. PT = European Portuguese (CAPLE): verde e vermelho.
   BR = Brazilian Portuguese (Celpe-Bras): verde e amarelo. The flag pair
   is the swatch at the start; the text stays ink, because a red or yellow
   word on paper is either an error message or unreadable. */
.track-badge, .track-pt, .track-br {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--ui); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
  color: var(--tinta); background: var(--folha);
  border: 1px solid var(--traco); border-radius: 999px; padding: 0.3rem 0.6rem 0.3rem 0.4rem;
}
.track-pt::before, .track-br::before {
  content: ""; width: 14px; height: 10px; border-radius: 2px; flex: none;
}
.track-pt { border-color: #b9d8c6; background: var(--verde-soft); }
.track-pt::before { background: linear-gradient(90deg, var(--verde) 0 40%, var(--vermelho) 40%); }
.track-br { border-color: #e8d98a; background: var(--amarelo-soft); }
.track-br::before { background: linear-gradient(90deg, var(--verde-br) 0 50%, var(--amarelo-vivo) 50%); }
/* A block or card that belongs to one track only. */
.is-track-pt { border-left: 4px solid var(--verde) !important; }
.is-track-br { border-left: 4px solid var(--amarelo-vivo) !important; }
.is-other-track { opacity: 0.6; }

/* ---------- Landing: the two-track split ---------- */

.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.track-panel {
  position: relative; background: var(--folha); border: 1px solid var(--traco);
  border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 1.8rem 1.8rem 1.6rem;
  overflow: hidden;
}
.track-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; }
.track-panel.pt::before { background: linear-gradient(90deg, var(--verde) 0 40%, var(--vermelho) 40%); }
.track-panel.br::before { background: linear-gradient(90deg, var(--verde-br) 0 62%, var(--amarelo-vivo) 62%); }
.track-panel h3 { font-family: var(--display); font-weight: 600; font-size: 1.7rem; margin: 0.8rem 0 0.2rem; }
.track-panel .track-exam { font-family: var(--ui); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--tinta-soft); }
.track-panel p { margin-top: 0.8rem; color: var(--tinta-soft); }
.track-panel ul { list-style: none; margin-top: 1rem; display: grid; gap: 0.45rem; font-size: 0.95rem; }
.track-panel li { padding-left: 1.2rem; position: relative; }
.track-panel li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); background: var(--azul); }
.track-ladder { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1.1rem; }
.track-ladder span {
  font-family: var(--ui); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em;
  padding: 0.28rem 0.5rem; border-radius: 6px; background: var(--papel); color: var(--tinta-soft);
  border: 1px solid var(--traco-soft);
}
.track-ladder span.star { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ---------- Landing: the nationality band ---------- */

.nat-band {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 2rem; align-items: center;
  background: var(--tinta); color: #d5dcea; border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta); overflow: hidden;
}
.nat-band-copy { padding: 2.4rem 0 2.4rem 2.4rem; }
.nat-band h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0.6rem 0 0.8rem; }
.nat-band .kicker { color: #a9c4ee; }
.nat-band .kicker::before { background: #a9c4ee; }
.nat-band p { max-width: 58ch; }
.nat-band ul { list-style: none; display: grid; gap: 0.4rem; margin: 1.1rem 0 1.4rem; }
.nat-band li::before { content: "✓"; color: #a9c4ee; font-weight: 700; margin-right: 0.55rem; }
.nat-band .btn { background: var(--folha); color: var(--tinta); border-color: var(--folha); }
.nat-band .btn:hover { color: var(--tinta); }
.nat-band-art {
  align-self: stretch; min-height: 260px;
  background: #f3f6fb var(--azulejo-tile) repeat center / 64px 64px;
  border-left: 6px solid var(--azul);
}
.nat-price { display: block; margin-top: 0.9rem; font-family: var(--ui); font-size: 0.8rem; color: #a3b0c7; }

/* ---------- Landing: the hero comparison sheet ---------- */

.hero-sheet .pairs { margin: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--ui); font-size: 0.93rem; }
.hero-sheet .pairs th { background: transparent; }
.hero-sheet-body.flush { padding: 0.2rem 0.5rem 0.6rem; }

/* ---------- Landing: honest notes ---------- */

.honest { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.honest-note {
  background: var(--folha); border: 1px dashed var(--traco); border-radius: var(--r);
  padding: 1.1rem 1.2rem; font-size: 0.95rem; color: var(--tinta-soft);
}
.honest-note strong { display: block; font-family: var(--ui); color: var(--tinta); margin-bottom: 0.3rem; }

@media (max-width: 860px) {
  .tracks { grid-template-columns: 1fr; }
  .nat-band { grid-template-columns: 1fr; }
  .nat-band-copy { padding: 2rem 1.5rem 0.5rem; }
  .nat-band-art { min-height: 90px; border-left: 0; border-top: 6px solid var(--azul); }
}

/* A plate framed in a border of tiles — the closing call to action. */
.azulejo-frame { position: relative; border: 0; padding: 2.8rem 2rem;
  background:
    linear-gradient(var(--folha), var(--folha)) padding-box,
    var(--azulejo-tile) 0 0 / 28px 28px border-box;
  border: 14px solid transparent; }