:root {
  color-scheme: light;
  --ink: #0f172a;
  --ink-strong: #020617;
  --muted: #526174;
  --line: #d8e0e7;
  --surface: #ffffff;
  --canvas: #f7f9fb;
  --navy: #162f45;
  --navy-deep: #0f172a;
  --teal: #0369a1;
  --teal-soft: #e0f2fe;
  --blue-soft: #e8eef5;
  --gold: #9a5b13;
  --gold-soft: #fef3c7;
  --coral: #9a3412;
  --coral-soft: #ffedd5;
  --danger: #b42318;
  --shadow: 0 12px 30px rgb(15 23 42 / 9%);
  /* Indicador de foco: precisa de >= 3:1 (WCAG 2.2 SC 1.4.11) sobre o
     canvas claro E sobre a sidebar navy escura. #38bdf8 (sky-400) so
     alcanca ~2,14:1 no claro. #0284c7 (sky-600) da ~4,09:1 no claro e
     ~4,36:1 sobre --navy-deep, com folga real nos dois lados. */
  --focus-ring: #0284c7;

  /* Escala tipografica: 6 degraus. Piso de 12px. */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  --fs-3xl: 42px;

  /* Pesos existentes na fonte carregada (400;500;600;700). */
  --fw-body: 400;
  --fw-label: 500;
  --fw-title: 600;
  --fw-strong: 700;

  /* Raio unico. */
  --radius: 6px;

  /* Espacamento em multiplos de 4. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); font-family: "Source Sans 3", "Segoe UI", sans-serif; font-size: var(--fs-md); line-height: 1.5; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; stroke-width: 1.8; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink-strong); font-family: Lexend, "Segoe UI", sans-serif; font-weight: 600; letter-spacing: 0; }
a, button, input { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 8px 16px; color: #fff; background: var(--ink-strong); border-radius: var(--radius); font-weight: 700; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.app-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 32px 24px 24px; color: #eff6ff; background: var(--navy-deep); border-right: 1px solid #1e293b; }
.brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: var(--radius); color: #fff; background: var(--teal); font-family: Lexend, sans-serif; font-size: var(--fs-lg); font-weight: 700; }
.brand strong, .brand small { display: block; }
.brand strong { color: inherit; font-family: Lexend, sans-serif; font-size: var(--fs-md); line-height: 1.1; text-transform: uppercase; }
.brand small { margin-top: 4px; color: #94a3b8; font-size: var(--fs-xs); }
.primary-nav { display: grid; gap: 8px; margin-top: 48px; }
.nav-label { padding: 0 var(--sp-3) var(--sp-2); color: #94a3b8; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.primary-nav a, .nav-logout { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: var(--radius); color: #cbd5e1; font-size: var(--fs-sm); font-weight: 600; }
.primary-nav a:hover, .primary-nav a.is-active, .nav-logout:hover { color: #fff; background: #1e293b; }
.primary-nav a.is-active { box-shadow: inset 3px 0 #38bdf8; }
.sidebar-foot { display: grid; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 12%); }
.company-chip { display: flex; align-items: center; gap: 8px; min-width: 0; }
.company-avatar { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--navy-deep); background: #e0f2fe; font-family: Lexend, sans-serif; font-weight: 700; }
.company-chip > span:last-child { min-width: 0; }
.company-chip strong, .company-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-chip strong { font-size: var(--fs-xs); }
.company-chip small { margin-top: 4px; color: #9fb2bb; font-size: var(--fs-xs); }
.nav-logout { padding-left: 4px; }
.app-main { display: flex; min-width: 0; flex-direction: column; }
.page-content { width: min(1200px, calc(100% - 72px)); margin: 0 auto; padding: 48px 0 68px; }
.mobile-header { display: none; }
.mobile-nav { display: none; }
.app-footer { display: flex; gap: 24px; width: min(1200px, calc(100% - 72px)); margin: auto auto 0; padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.app-footer span { margin-right: auto; font-weight: 700; }
.app-footer a:hover { color: var(--teal); }

.overline { margin-bottom: 8px; color: var(--teal); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.overline.light { color: #7dd3fc; }
.header-status { display: flex; align-items: center; gap: 16px; }
.access-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-left: 16px; border-left: 1px solid var(--line); color: #356047; font-size: var(--fs-xs); font-weight: 700; }
.access-status > span { width: 7px; height: 7px; border-radius: 50%; background: #15803d; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.page-header h1 { margin-bottom: 8px; font-size: clamp(var(--fs-xl), 3.4vw, var(--fs-2xl)); line-height: 1.18; }
.page-header p:last-child { max-width: 680px; margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.compact-header { margin-bottom: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; font-weight: 700; }
.button svg { width: 17px; height: 17px; }
.button.primary { color: #fff; background: var(--teal); box-shadow: 0 1px 2px rgb(15 23 42 / 12%); }
.button.primary:hover { background: #075985; }
.button.primary:disabled { cursor: wait; opacity: .7; }
.button.secondary { border-color: #cbd5e1; background: #fff; }
.button.secondary:hover { border-color: #64748b; background: #f8fafc; }
.button.full { width: 100%; }
.icon-button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 48px; }
.metric { display: flex; align-items: center; gap: 16px; min-height: 124px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 2px rgb(15 23 42 / 3%); }
.metric-icon { display: grid; flex: 0 0 44px; height: 44px; place-items: center; border-radius: var(--radius); }
.metric-icon.teal { color: var(--teal); background: var(--teal-soft); }
.metric-icon.blue { color: #315e7b; background: var(--blue-soft); }
.metric-icon.coral { color: var(--coral); background: var(--coral-soft); }
.metric-icon.gold { color: var(--gold); background: var(--gold-soft); }
.metric span:not(.metric-icon) { display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--fs-sm); }
.metric strong { display: block; color: var(--ink-strong); font-family: Lexend, sans-serif; font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; }
.metric small { display: block; margin-top: 4px; color: #64748b; font-size: var(--fs-xs); }
.section-block { margin-bottom: 48px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.section-heading h2 { margin-bottom: 0; font-size: var(--fs-xl); }
.section-heading > a, .text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-size: var(--fs-sm); font-weight: 700; }
.section-heading > a svg, .text-link svg { width: 16px; height: 16px; }

.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.course-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color 180ms ease, box-shadow 180ms ease; }
.course-card:hover { border-color: #9fb3c1; box-shadow: var(--shadow); }
.course-cover { position: relative; display: flex; aspect-ratio: 16 / 8; align-items: flex-end; justify-content: space-between; overflow: hidden; padding: 20px; color: #fff; background: #164e63; }
.course-cover.variant-b { background: #334155; }
.cover-pattern { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(90deg, transparent 49%, rgb(255 255 255 / 14%) 50%), linear-gradient(0deg, transparent 49%, rgb(255 255 255 / 10%) 50%); background-size: 42px 42px; transform: rotate(-8deg) scale(1.2); }
.cover-label { position: relative; z-index: 1; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.course-cover > svg { position: relative; z-index: 1; width: 38px; height: 38px; padding: 8px; border: 1px solid rgb(255 255 255 / 50%); border-radius: 50%; background: rgb(8 26 35 / 30%); }
.course-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.course-meta { margin-bottom: 8px; color: var(--coral); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.course-card h2, .course-card h3 { margin-bottom: 8px; font-size: var(--fs-md); line-height: 1.35; }
.course-card-body > p:not(.course-meta) { display: -webkit-box; overflow: hidden; margin-bottom: 16px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.course-card-body > .text-link { margin-top: auto; padding-top: 4px; }
.usage-band { display: grid; grid-template-columns: 1fr minmax(260px, 430px); align-items: center; gap: 36px; padding: 24px 28px; border-left: 4px solid var(--teal); background: #fff; }
.usage-band > div:first-child { display: flex; align-items: center; gap: 16px; }
.usage-band h2 { margin-bottom: 0; font-size: var(--fs-lg); }
.progress-track { height: 8px; overflow: hidden; border-radius: var(--radius); background: #e2e8f0; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--teal); transition: width 250ms ease; }
.usage-progress p { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-xs); }

.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.catalog-toolbar p { margin-bottom: 0; color: var(--muted); font-size: var(--fs-sm); }
.search-box { display: flex; align-items: center; gap: 8px; width: min(320px, 100%); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.search-box svg { flex: 0 0 auto; width: 17px; color: var(--muted); }
.search-box input { width: 100%; height: 40px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.catalog-grid { grid-template-columns: repeat(3, minmax(230px, 1fr)); }
.empty-state, .empty-search { grid-column: 1 / -1; padding: 48px 24px; border: 1px dashed #bdcbd1; text-align: center; color: var(--muted); background: #fff; }
/* Aviso de que o filtro do catalogo alcanca so a pagina atual. Discreto de
   proposito: e uma ressalva, nao um erro — a busca funcionou, o alcance dela
   e que e menor do que o usuario supoe. */
.search-scope-note { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.search-scope-note .text-link { margin-left: 8px; }
.empty-state svg { width: 36px; height: 36px; margin-bottom: 12px; color: var(--teal); }
.empty-state h2, .empty-state h3 { margin-bottom: 8px; color: var(--ink); }
.empty-state p { margin-bottom: 0; }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-8); }
.pagination-status { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-align: center; }
.pagination .button.is-disabled { color: var(--muted); opacity: .5; }

.breadcrumbs { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 20px; color: var(--muted); font-size: var(--fs-xs); }
.breadcrumbs a { color: var(--teal); font-weight: 700; }
.breadcrumbs svg { flex: 0 0 auto; width: 14px; height: 14px; }
.breadcrumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-hero { display: flex; min-height: 260px; align-items: center; justify-content: space-between; gap: 36px; overflow: hidden; margin-bottom: 40px; padding: 44px 48px; color: #fff; background: var(--navy); border-bottom: 4px solid #0ea5e9; }
.course-hero > div { max-width: 700px; }
.course-hero h1 { margin-bottom: 16px; color: #fff; font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); line-height: 1.14; }
.course-hero > div > p:not(.overline) { max-width: 620px; color: #c5d4da; line-height: 1.65; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; }
.hero-meta svg { width: 17px; height: 17px; color: #8fd2ca; }
.hero-symbol { display: grid; flex: 0 0 150px; height: 150px; place-items: center; border: 1px solid rgb(255 255 255 / 20%); border-radius: 50%; background: rgb(255 255 255 / 6%); }
.hero-symbol svg { width: 66px; height: 66px; color: #8fd2ca; }
.lesson-section { max-width: 920px; }
.lesson-list { display: grid; gap: 8px; }
.lesson-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 102px; padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.lesson-number { display: grid; width: 42px; height: 42px; place-items: center; color: var(--teal); background: var(--teal-soft); font-size: var(--fs-sm); font-weight: 700; }
.lesson-info p { margin-bottom: 4px; color: var(--coral); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.lesson-info h3 { margin-bottom: 8px; font-size: var(--fs-md); }
.lesson-info > span { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-xs); }
.lesson-info svg { width: 14px; height: 14px; }
.status-badge { display: inline-flex; align-items: center; padding: 8px 8px; border-radius: var(--radius); color: var(--muted); background: #eef2f4; font-size: var(--fs-xs); font-weight: 700; }
.lesson-status { display: flex; align-items: center; gap: 12px; }

.resource-section { max-width: 920px; margin-bottom: 40px; }
.resource-list { display: grid; gap: 8px; }
.resource-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; min-height: 90px; align-items: center; gap: 16px; padding: 16px 16px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); background: #fff; }
.resource-icon { display: grid; width: 42px; height: 42px; place-items: center; color: #8a5a08; background: var(--gold-soft); }
.resource-icon svg { width: 20px; height: 20px; }
.resource-info p { margin-bottom: 4px; color: #8a5a08; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.resource-info h3 { margin-bottom: 4px; font-size: var(--fs-md); }
.resource-info span { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.resource-info .resource-open-note { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--teal); font-weight: 700; }
.resource-open-note svg { flex: 0 0 auto; width: 13px; height: 13px; }
.training-resources { margin-top: 40px; }
.resource-content { max-width: 920px; padding: 30px clamp(22px, 5vw, 48px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; line-height: 1.75; }
.resource-content h2, .resource-content h3, .resource-content h4 { margin-top: 1.4em; }
.resource-content > :first-child { margin-top: 0; }
.resource-content a { color: var(--teal); text-decoration: underline; }
.resource-content blockquote { margin: 20px 0; padding: 8px 16px; border-left: 3px solid var(--teal); color: var(--muted); background: #f5fafb; }
.resource-actions { display: flex; justify-content: flex-end; max-width: 920px; margin-bottom: 12px; }
.pdf-viewer { display: block; width: 100%; max-width: 920px; min-height: 70vh; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

.informativo-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.informativo-toolbar .search-box { width: min(480px, 100%); }
.informativo-toolbar select { min-height: 42px; padding: 0 36px 0 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: #fff; font-weight: 600; }
.category-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 28px; padding-bottom: 4px; }
.category-tabs a { flex: 0 0 auto; min-height: 36px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: #fff; font-size: var(--fs-xs); font-weight: 700; }
.category-tabs a:hover, .category-tabs a.is-active { border-color: #94a3b8; color: var(--ink-strong); background: #eef6f7; }
.informativo-list { max-width: 980px; }
.month-group { margin-bottom: 32px; }
.month-group h2 { margin-bottom: 12px; color: var(--muted); font-size: var(--fs-sm); text-transform: capitalize; }
.informativo-rows { display: grid; gap: 8px; }
.informativo-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 92px; padding: 16px 16px; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius); background: #fff; }
.informativo-date { display: grid; width: 54px; min-height: 54px; place-items: center; border: 1px solid #c7d8dc; background: #f4fbfc; }
.informativo-date strong { color: var(--teal); font-family: Lexend, sans-serif; font-size: var(--fs-lg); line-height: 1; }
.informativo-date span { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.informativo-summary { min-width: 0; }
.informativo-summary p { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.informativo-summary h3 { margin-bottom: 4px; font-size: var(--fs-md); }
.informativo-summary small { display: block; overflow: hidden; color: var(--muted); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.category-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 8px; border-radius: var(--radius); color: #075985; background: #e0f2fe; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.informativo-reader-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.informativo-reader-header h1 { margin-bottom: 8px; font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); }
.informativo-reader-header p:last-child { margin-bottom: 0; color: var(--muted); }
.reader-actions { display: flex; gap: 8px; }
.informativo-reader { max-width: 760px; margin: 0 auto 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 4%); }
.informativo-reader img { max-width: 100%; height: auto; }
.informativo-reader table { max-width: 100%; }
.informativo-reader a { color: var(--teal); }
.reader-nav { display: flex; justify-content: space-between; max-width: 760px; margin: 0 auto; }
.informativo-compact-list { display: grid; gap: 8px; max-width: 920px; }
.informativo-compact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; min-height: 58px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.informativo-compact strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.informativo-compact small { color: var(--muted); font-size: var(--fs-xs); }
.informativo-compact svg { width: 16px; height: 16px; color: var(--teal); }

.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 16px; }
.dashboard-card { display: flex; min-height: 280px; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color 180ms ease, box-shadow 180ms ease; }
.dashboard-card:hover { border-color: #9fb3c1; box-shadow: var(--shadow); }
.dashboard-cover { position: relative; display: flex; aspect-ratio: 16 / 7; align-items: center; justify-content: center; overflow: hidden; color: #fff; background: linear-gradient(135deg, #164e63, #25636d 55%, #334155); }
.dashboard-cover-grid { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(90deg, transparent 49%, rgb(255 255 255 / 18%) 50%), linear-gradient(0deg, transparent 49%, rgb(255 255 255 / 12%) 50%); background-size: 36px 36px; }
.dashboard-cover svg { position: relative; z-index: 1; width: 46px; height: 46px; padding: 8px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 50%; background: rgb(15 23 42 / 24%); }
.dashboard-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.dashboard-card-body > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.dashboard-card-body h2 { margin-bottom: 8px; font-size: var(--fs-lg); line-height: 1.3; }
.dashboard-card-body > p:not(:first-child) { margin-bottom: 16px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.dashboard-card-body .text-link { margin-top: auto; }
.dashboard-reader-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.dashboard-reader-header h1 { margin-bottom: 8px; font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); }
.dashboard-reader-header div > p:last-of-type { max-width: 760px; margin-bottom: 0; color: var(--muted); }
.dashboard-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.dashboard-meta span { display: inline-flex; align-items: center; gap: 8px; }
.dashboard-meta svg { width: 15px; height: 15px; color: var(--teal); }
.dashboard-filter-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid #e7c875; border-left: 4px solid var(--gold); border-radius: var(--radius); background: var(--gold-soft); }
.dashboard-filter-notice > svg { width: 20px; height: 20px; margin-top: 2px; color: #8a5a00; }
.dashboard-filter-notice h2 { margin-bottom: 4px; font-size: var(--fs-md); }
.dashboard-filter-notice p { margin-bottom: 0; color: var(--muted); font-size: var(--fs-sm); }
.dashboard-reader-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 32px; }
.dashboard-reader-layout.has-operadora-guide { grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); }
.dashboard-frame-shell { position: relative; width: 100%; overflow: hidden; border: 1px solid #b8c7d1; border-radius: var(--radius); background: #e8eef2; box-shadow: 0 14px 34px rgb(15 23 42 / 12%); }
.dashboard-frame-loading { position: absolute; z-index: 0; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.dashboard-frame-loading span { width: 18px; height: 18px; border: 2px solid #bfd0d9; border-top-color: var(--teal); border-radius: 50%; animation: dashboard-loading 800ms linear infinite; }
.dashboard-frame-shell:fullscreen { padding: 0; border: 0; border-radius: 0; }
.dashboard-frame { position: relative; z-index: 1; display: block; width: 100%; min-height: min(76vh, 820px); aspect-ratio: 16 / 9; border: 0; border-radius: inherit; background: transparent; }
.dashboard-frame-shell:fullscreen .dashboard-frame { height: 100vh; min-height: 100vh; border-radius: 0; }
.dashboard-operadora-guide { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 1px 3px rgb(15 23 42 / 5%); }
.dashboard-operadora-guide h2 { margin-bottom: 8px; font-size: var(--fs-lg); }
.dashboard-operadora-guide > p:not(.overline) { margin-bottom: 16px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.dashboard-operadora-guide ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dashboard-operadora-guide li { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.dashboard-operadora-guide li strong { color: var(--ink-strong); font-size: var(--fs-sm); }
.dashboard-operadora-guide li span { color: var(--muted); font-size: var(--fs-xs); }
.dashboard-resources { max-width: 920px; }

@keyframes dashboard-loading { to { transform: rotate(360deg); } }

.lesson-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.lesson-header h1 { margin-bottom: 4px; font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); }
.lesson-header div > p:last-child { margin-bottom: 0; color: var(--muted); }
.watch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.player-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #0c1720; box-shadow: 0 12px 32px rgb(12 29 39 / 14%); }
.player-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.status-panel { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 1px 3px rgb(15 23 42 / 5%); }
.quota-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.quota-heading .overline { margin-bottom: 4px; }
.quota-heading strong { font-size: var(--fs-xl); }
.quota-heading strong small { color: var(--muted); font-family: "Source Sans 3", sans-serif; font-size: var(--fs-sm); font-weight: 600; }
.status-list { display: grid; gap: 0; margin: 16px 0 0; }
.status-list div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.status-list dt { color: var(--muted); }
.status-list dd { margin: 0; font-weight: 700; }
.status-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--gold); }
.status-dot.is-active { background: var(--teal); }
.status-dot.is-warning { background: var(--gold); }
.status-dot.is-error { background: var(--danger); }
.quota-progress-block { min-width: 0; }
.progress-caption { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.notice { min-height: 0; margin: 8px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.notice:empty { display: none; }
.notice.is-error, .form-error { color: var(--danger); }
.quota-help { display: flex; gap: 8px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.quota-help svg { flex: 0 0 auto; width: 15px; height: 15px; }

/* Navegacao sequencial da aula, equivalente ao .reader-nav dos informativos. */
.lesson-nav { display: flex; align-items: center; justify-content: flex-end; gap: 16px; max-width: 920px; margin: 16px 0 0; }
.lesson-nav .notice { margin: 0; }

.login-body { background: #fff; }
.login-layout { display: grid; grid-template-columns: minmax(380px, 44%) minmax(420px, 56%); min-height: 100vh; }
.login-intro { display: flex; flex-direction: column; min-height: 100vh; padding: 42px clamp(34px, 5vw, 72px); color: #fff; background-color: var(--navy-deep); background-image: linear-gradient(90deg, transparent 49%, rgb(255 255 255 / 4%) 50%), linear-gradient(0deg, transparent 49%, rgb(255 255 255 / 3%) 50%); background-size: 72px 72px; }
.brand-light .brand-mark { background: var(--teal); }
.login-message { max-width: 580px; margin: auto 0; }
.login-message h1 { max-width: 560px; margin-bottom: 24px; color: #fff; font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); line-height: 1.15; }
.login-message > p:last-child { max-width: 500px; color: #cbd5e1; font-size: var(--fs-md); line-height: 1.65; }
.login-support { margin-bottom: 0; color: #9fb5bf; font-size: var(--fs-xs); }
.login-support a { color: #8fd2ca; font-weight: 700; }
.login-form-area { display: grid; place-items: center; padding: 48px; }
.login-panel { width: min(460px, 100%); }
.login-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.login-icon { display: grid; width: 48px; height: 48px; place-items: center; color: var(--teal); background: var(--teal-soft); border-radius: var(--radius); }
.login-heading .overline { margin-bottom: 4px; }
.login-heading h2 { margin-bottom: 0; font-size: var(--fs-xl); }
.form-help { margin-bottom: 24px; color: var(--muted); line-height: 1.55; }
.login-panel form { display: grid; gap: 16px; }
.field label { display: block; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 700; }
.input-wrap { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border: 1px solid #aebdca; border-radius: var(--radius); }
.input-wrap:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgb(3 105 161 / 14%); }
.input-wrap svg { flex: 0 0 auto; width: 18px; color: var(--muted); }
.input-wrap input { width: 100%; height: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.form-error { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 0; font-size: var(--fs-xs); line-height: 1.45; }
.form-error svg { flex: 0 0 auto; width: 16px; }
.field-error { margin: 8px 0 0; color: var(--danger); font-size: var(--fs-xs); line-height: 1.4; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.field-label-row a { margin-bottom: 8px; color: var(--teal); font-size: var(--fs-xs); font-weight: 700; }
.form-success { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 20px; padding: 12px 16px; border: 1px solid #bbdcc8; border-radius: var(--radius); color: #24563a; background: #effaf3; font-size: var(--fs-sm); }
.form-success svg { flex: 0 0 auto; width: 17px; height: 17px; }
.message-stack { margin-bottom: 24px; }
.message-stack .form-success { margin-bottom: 8px; }
.auth-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 16px; color: var(--teal); font-size: var(--fs-sm); font-weight: 700; }
.auth-back svg { width: 16px; height: 16px; }
.auth-result { text-align: center; }
.auth-result-icon { display: grid; width: 58px; height: 58px; margin: 0 auto 16px; place-items: center; border-radius: 50%; color: var(--teal); background: var(--teal-soft); }
.auth-result-icon.is-warning { color: var(--gold); background: var(--gold-soft); }
.auth-result-icon svg { width: 26px; height: 26px; }
.auth-result h2 { margin-bottom: 8px; font-size: var(--fs-xl); }
.auth-result > p:not(.overline) { margin-bottom: 24px; color: var(--muted); line-height: 1.6; }
.account-form-panel { width: min(560px, 100%); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.account-form-panel form { display: grid; gap: 16px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.privacy-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px 0 0; color: var(--muted); font-size: var(--fs-xs); }
.privacy-note svg { width: 14px; }
.auth-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); }
.auth-legal-links a { color: var(--teal); font-weight: 700; }

/* Paginas institucionais publicas. */
.public-body { background: var(--canvas); }
.public-header { color: #fff; background: var(--navy-deep); border-bottom: 4px solid var(--teal); }
.public-header-inner { display: flex; width: min(960px, calc(100% - 48px)); min-height: 88px; margin: 0 auto; align-items: center; justify-content: space-between; gap: 24px; }
.public-header-action { border-color: rgb(255 255 255 / 34%); color: #fff; background: transparent; }
.public-header-action:hover { border-color: #fff; background: rgb(255 255 255 / 8%); }
.public-main { width: min(960px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 64px; }
.policy-document { padding: clamp(24px, 5vw, 56px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.policy-hero { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.policy-hero h1 { max-width: 720px; margin-bottom: 16px; font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); line-height: 1.2; }
.policy-hero > p:not(.overline, .policy-updated) { max-width: 720px; color: var(--muted); font-size: var(--fs-lg); line-height: 1.65; }
.policy-updated { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.policy-updated svg { width: 17px; height: 17px; color: var(--teal); }
.policy-index { margin: 32px 0 40px; padding: 24px; border-left: 4px solid var(--teal); background: var(--teal-soft); }
.policy-index > strong { display: block; margin-bottom: 12px; font-family: Lexend, sans-serif; }
.policy-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; margin: 0; padding-left: 20px; }
.policy-index a, .policy-document section a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.policy-document section { scroll-margin-top: 24px; }
.policy-document section + section { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.policy-document h2 { margin-bottom: 16px; font-size: var(--fs-lg); }
.policy-document h3 { margin: 24px 0 12px; font-size: var(--fs-md); }
.policy-document p, .policy-document li { line-height: 1.7; }
.policy-document p { margin-bottom: 16px; }
.policy-document ul { margin: 0 0 20px; padding-left: 24px; }
.policy-document li + li { margin-top: 8px; }
.policy-callout { margin-top: 24px; padding: 20px 24px; border: 1px solid var(--line); background: var(--canvas); }
.policy-callout h3 { margin-top: 0; }
.policy-callout p:last-child { margin-bottom: 0; }
.policy-contact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; margin-top: 24px; padding: 24px; color: #fff; background: var(--navy); }
.policy-contact > svg { width: 24px; height: 24px; color: #7dd3fc; }
.policy-contact h3 { margin: 0 0 8px; color: #fff; }
.policy-contact p { margin-bottom: 8px; color: #dbeafe; }
.policy-contact a { color: #bae6fd !important; overflow-wrap: anywhere; }
.public-footer { display: flex; width: min(960px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 40px; border-top: 1px solid var(--line); gap: 24px; color: var(--muted); font-size: var(--fs-sm); }
.public-footer span { margin-right: auto; font-weight: 700; }
.public-footer a:hover { color: var(--teal); }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 224px minmax(0, 1fr); }
  .page-content, .app-footer { width: min(100% - 48px, 900px); }
  .course-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-grid > .metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .watch-grid { grid-template-columns: 1fr; }
  .status-panel { display: grid; grid-template-columns: minmax(180px, .7fr) 1fr; gap: 0 28px; }
  .status-panel > .quota-progress-block, .status-panel > .status-list { grid-column: 2; }
  .status-panel > .quota-heading { grid-row: 1 / 3; align-self: center; }
  .status-panel > .notice, .status-panel > .quota-help { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .app-body { padding-bottom: 72px; overscroll-behavior-y: contain; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .mobile-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 97%); }
  .mobile-nav { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); min-height: 66px; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgb(255 255 255 / 98%); box-shadow: 0 -4px 18px rgb(15 23 42 / 7%); }
  .mobile-nav a { display: flex; min-height: 52px; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: #64748b; font-size: var(--fs-xs); font-weight: 700; }
  .mobile-nav a svg { width: 19px; height: 19px; }
  .mobile-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav a.is-active { color: var(--teal); }
  .brand.compact { gap: 8px; }
  .brand.compact .brand-mark { width: 34px; height: 34px; }
  .brand.compact strong { font-size: var(--fs-sm); }
  .page-content, .app-footer { width: min(100% - 32px, 620px); }
  .page-content { padding: 32px 0 44px; }
  .app-footer { flex-wrap: wrap; gap: 8px 16px; }
  .app-footer span { flex-basis: 100%; }
  .page-header, .lesson-header { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }
  .page-header .button, .lesson-header .button { width: 100%; }
  .metric-grid { grid-template-columns: 1fr; gap: 8px; margin-bottom: 36px; }
  .metric { min-height: 110px; padding: 16px; }
  .metric strong { font-size: var(--fs-xl); }
  .course-grid, .catalog-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .usage-band { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .search-box { width: 100%; }
  .informativo-toolbar { align-items: stretch; flex-direction: column; }
  .informativo-toolbar .search-box { width: 100%; }
  .pagination { flex-wrap: wrap; justify-content: center; text-align: center; }
  .pagination-status { order: 1; flex-basis: 100%; }
  .informativo-row { grid-template-columns: 54px minmax(0, 1fr); }
  .informativo-row .button { grid-column: 2; width: fit-content; }
  .informativo-reader-header { align-items: flex-start; flex-direction: column; }
  .dashboard-reader-header { align-items: flex-start; flex-direction: column; }
  .dashboard-reader-layout.has-operadora-guide { grid-template-columns: 1fr; }
  .reader-actions, .reader-actions .button { width: 100%; }
  .informativo-reader { width: 100%; padding: 16px; }
  .dashboard-frame { min-height: 62vh; aspect-ratio: 4 / 3; }
  .informativo-compact { grid-template-columns: minmax(0, 1fr) auto; }
  .informativo-compact .category-pill, .informativo-compact svg { display: none; }
  .course-hero { min-height: 0; padding: 32px 24px; }
  .hero-symbol { display: none; }
  .lesson-row { grid-template-columns: 42px minmax(0, 1fr); }
  .lesson-row .button, .lesson-row .status-badge, .lesson-row .lesson-status { grid-column: 2; width: fit-content; }
  .lesson-status { flex-wrap: wrap; }
  .resource-row { grid-template-columns: 42px minmax(0, 1fr); }
  .resource-row .button, .resource-row > .icon-button { grid-column: 2; width: fit-content; }
  .pdf-viewer { min-height: 65vh; }
  .status-panel { display: block; }
  .login-layout { grid-template-columns: 1fr; }
  .login-intro { min-height: 330px; padding: 28px 24px; }
  .login-message { margin: 32px 0 20px; }
  .login-message h1 { font-size: var(--fs-2xl); line-height: 1.18; }
  .login-form-area { padding: 40px 24px 48px; }
  .public-header-inner, .public-main, .public-footer { width: min(100% - 32px, 620px); }
  .public-header-inner { min-height: 76px; }
  .public-header-action { min-height: 40px; padding: 0 12px; font-size: var(--fs-xs); }
  .public-header-action svg { display: none; }
  .public-main { padding: 24px 0 40px; }
  .policy-document { padding: 24px 20px; }
  .policy-hero > p:not(.overline, .policy-updated) { font-size: var(--fs-md); }
  .policy-index ol { grid-template-columns: 1fr; }
  .public-footer { flex-wrap: wrap; gap: 8px 16px; }
  .public-footer span { flex-basis: 100%; }
  .search-box input, .input-wrap input { font-size: var(--fs-md); }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .form-actions .button { width: 100%; }
}

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

/* ---------- Busca no acervo ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-search { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-6); padding: 0 var(--sp-3); border: 1px solid #1e293b; border-radius: var(--radius); background: #0b1220; }
.nav-search svg { flex: 0 0 auto; width: 16px; height: 16px; color: #94a3b8; }
.nav-search input { width: 100%; height: 40px; border: 0; outline: 0; color: #e2e8f0; background: transparent; font-size: var(--fs-sm); }
.nav-search input::placeholder { color: #7c8ea3; }
.nav-search:focus-within { border-color: #38bdf8; }
.mobile-header-actions { display: flex; gap: var(--sp-2); }

.search-page-form { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.search-page-form .search-box { flex: 1; width: auto; }
.search-summary { margin-bottom: var(--sp-6); color: var(--muted); font-size: var(--fs-sm); }
.search-group { margin-bottom: var(--sp-8); }
.search-group-title { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-md); }
.search-group-title svg { width: 17px; height: 17px; color: var(--teal); }
.search-group-count { padding: 1px var(--sp-2); border-radius: 999px; color: var(--muted); background: #eef2f4; font-family: "Source Sans 3", sans-serif; font-size: var(--fs-xs); font-weight: 600; }

/* Lista densa, nao grade de cards: numa busca a pessoa varre muitos
   resultados de uma vez, e altura de card vira rolagem inutil. */
.search-results { max-width: 920px; border-top: 1px solid var(--line); }
.search-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--line); border-radius: 0; }
.search-hit:hover { background: #f4f8fa; }
.hit-body { min-width: 0; }
.hit-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: 2px; }
.hit-tag { color: var(--teal); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.hit-date { color: var(--muted); font-size: var(--fs-xs); }
.hit-title { display: block; overflow: hidden; color: var(--ink-strong); font-family: Lexend, sans-serif; font-size: var(--fs-md); font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.hit-snippet { display: -webkit-box; overflow: hidden; margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hit-snippet mark { padding: 0 2px; border-radius: 2px; color: var(--ink-strong); background: #fde68a; font-weight: 600; }
.search-hit > svg { width: 18px; height: 18px; color: var(--teal); }

/* ---------- O que mudou ---------- */
.novo-selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--sp-2); border-radius: 999px; color: #fff; background: var(--coral); font-size: var(--fs-xs); font-weight: 700; }
.changed-band { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-12); padding: var(--sp-6); border-left: 4px solid var(--coral); background: #fff; }
.changed-band > header { display: flex; align-items: center; gap: var(--sp-4); }
.changed-band h2 { margin-bottom: 0; font-size: var(--fs-lg); }
.changed-band .overline { margin-bottom: 2px; color: var(--coral); }
.changed-list { display: grid; gap: var(--sp-2); }
.changed-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.changed-list a strong { overflow: hidden; color: var(--ink-strong); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.changed-list a small { color: var(--muted); font-size: var(--fs-xs); }
.changed-list svg { width: 16px; height: 16px; color: var(--coral); }

@media (max-width: 760px) {
  .nav-search { display: none; }
  .search-page-form { flex-direction: column; }
  .changed-band { padding: var(--sp-4); }
  .changed-list a { grid-template-columns: auto minmax(0, 1fr); }
  .changed-list a small { display: none; }
}