/* ============================================================
   Medidor de DNP — estilos das telas (vindos dos <style> do protótipo).
   Carregado depois de styles.css, na camada components.
   - Classes comuns pg-*: uma vez só, aqui no topo.
   - Classes específicas de cada tela: escopadas por [data-tela="…"]
     (o protótipo reaproveita nomes como .pg-hero e .pg-thumb com
     estilos diferentes em telas diferentes).
   ============================================================ */
@layer components {

  /* ---------- Comum da demo ---------- */
  .pg-top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg-surface) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); }
  .pg-top-in { max-width: 480px; margin: 0 auto; display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); }
  .pg-top .mel-wordmark { height: 22px; }
  .pg-top-t { font-weight: var(--font-weight-heavy); font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pg-top-sep { width: 1px; height: 18px; background: var(--border-base); }
  .pg-wrap { width: 100%; max-width: 480px; margin: 0 auto; padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-md); }
  .pg-actions { display: flex; flex-direction: column; gap: var(--spacing-sm); }
  .pg-actions > .btn { width: 100%; }
  .pg-row { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
  .pg-row > .btn { flex: 1 1 0; min-width: 0; }
  .pg-note { margin: 0; font-size: var(--text-xs); color: var(--text-muted); text-align: center; }
  .pg-title { margin: 0; font-size: var(--text-2xl); font-weight: var(--font-weight-heavy); line-height: 1.15; letter-spacing: -0.02em; }
  .pg-lead { margin: 0; color: var(--text-muted); }
  .pg-alert { margin: 0; }
  .pg-alert > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
  .pg-demo { font-size: var(--text-xs); color: var(--text-muted); text-align: center; }
  .pg-demo a { color: var(--text-muted); }
  .pg-toast { left: var(--spacing-md); right: var(--spacing-md); margin: 0 auto; }
  .pg-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .pg-wrap > .mel-panel + .mel-panel { margin-top: 0; }
  .pg-wrap > div:empty { display: none; }

  /* ---------- Ícones Lucide (<v-icon>) com os tamanhos que o DS dá aos <svg> ---------- */
  .btn .lucide { width: 1.05em; height: 1.05em; }
  .btn-icon .lucide { width: 1.25em; height: 1.25em; }
  button:not([class]) .lucide { width: 1.05em; height: 1.05em; }
  .mel-segs button .lucide { width: 15px; height: 15px; }
  .alert > .lucide { width: 1.25rem; height: 1.25rem; }
  .mel-ic .lucide { width: 19px; height: 19px; }
  .mel-ic.is-sm .lucide { width: 15px; height: 15px; }
  .mel-ic.is-lg .lucide { width: 23px; height: 23px; }
  .mel-chip .lucide { width: 13px; height: 13px; }
  .mel-empty-art .lucide { width: 30px; height: 30px; }
  .toast .tk .lucide { width: 15px; height: 15px; }

  /* Ponto do chip de confiança na cor do chip (no protótipo: style="background:currentColor") */
  .mel-chip .mel-dot.is-atual { background: currentColor; }

  /* ---------- Tela inicial (index.html) ---------- */
  [data-tela="inicio"] .pg-brand { display: flex; align-items: center; justify-content: space-between; }
  [data-tela="inicio"] .pg-brand .mel-wordmark { height: 26px; }
  [data-tela="inicio"] .pg-hero { display: flex; flex-direction: column; gap: var(--spacing-sm); padding-top: var(--spacing-sm); }
  [data-tela="inicio"] .pg-art { position: relative; border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--honey-50), var(--honey-100)); border: 1px solid var(--honey-200); padding: var(--spacing-md); display: grid; place-items: center; }
  [data-tela="inicio"] .pg-art svg { width: 100%; max-width: 260px; height: auto; display: block; }
  [data-tela="inicio"] .pg-art .face { fill: var(--bg-surface); stroke: var(--honey-300); stroke-width: 3; }
  [data-tela="inicio"] .pg-art .eye { fill: var(--slate-700); }
  [data-tela="inicio"] .pg-art .eye-w { fill: var(--slate-100); }
  [data-tela="inicio"] .pg-art .meas { stroke: var(--honey-600); stroke-width: 3; fill: none; stroke-linecap: round; }
  [data-tela="inicio"] .pg-art .lbl { fill: var(--honey-800); font-family: var(--font-mono); font-weight: 700; font-size: 22px; }
  [data-tela="inicio"] .pg-art .soft { stroke: var(--honey-300); stroke-width: 3; fill: none; stroke-linecap: round; }
  [data-tela="inicio"] .pg-comecar { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-surface)); display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); text-decoration: none; color: var(--text-main); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
  [data-tela="inicio"] .pg-comecar:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
  [data-tela="inicio"] .pg-comecar-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  [data-tela="inicio"] .pg-comecar-t { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; font-weight: var(--font-weight-heavy); font-size: var(--text-lg); }
  [data-tela="inicio"] .pg-comecar-d { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); }
  [data-tela="inicio"] .pg-chev { display: inline-flex; color: var(--text-muted); flex: none; }
  [data-tela="inicio"] .pg-chev .lucide { width: 20px; height: 20px; }
  [data-tela="inicio"] .pg-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-sm); }
  [data-tela="inicio"] .pg-passos li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--text-muted); }

  /* ---------- Como tirar a foto (instrucoes.html) ---------- */
  [data-tela="instrucoes"] .pg-art { border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--slate-50), var(--slate-100)); border: 1px solid var(--border-subtle); padding: var(--spacing-md); display: grid; place-items: center; }
  [data-tela="instrucoes"] .pg-art svg { width: 100%; max-width: 260px; height: auto; display: block; }
  [data-tela="instrucoes"] .pg-art .face { fill: var(--bg-surface); stroke: var(--slate-300); stroke-width: 3; }
  [data-tela="instrucoes"] .pg-art .ln { stroke: var(--slate-400); stroke-width: 3; fill: none; stroke-linecap: round; }
  [data-tela="instrucoes"] .pg-art .eye { fill: var(--slate-700); }
  [data-tela="instrucoes"] .pg-art .plane { stroke: var(--honey-500); stroke-width: 2.5; stroke-dasharray: 7 6; fill: none; }
  [data-tela="instrucoes"] .pg-art .iris { fill: none; stroke: var(--color-info); stroke-width: 2.5; }
  [data-tela="instrucoes"] .pg-art .lbl { font-family: var(--font-sans); font-weight: 800; font-size: 13px; fill: var(--text-muted); }
  [data-tela="instrucoes"] .pg-art .lbl-a { fill: var(--honey-700); }
  [data-tela="instrucoes"] .pg-dicas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  [data-tela="instrucoes"] .pg-dicas li { display: flex; align-items: center; gap: 12px; font-size: var(--text-sm); line-height: var(--leading-snug); }
  [data-tela="instrucoes"] .pg-dicas li > span:last-child > strong:first-child { display: block; font-size: var(--text-base); }
  [data-tela="instrucoes"] .pg-dicas li > span:last-child { color: var(--text-muted); }
  [data-tela="instrucoes"] .pg-dicas li > span:last-child strong { color: var(--text-main); }

  /* ---------- Captura (captura.html) ---------- */
  [data-tela="captura"].pg-wrap { gap: 12px; }
  [data-tela="captura"] .pg-cap-h { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
  [data-tela="captura"] .pg-cap-h h1 { margin: 0; font-size: var(--text-lg); font-weight: var(--font-weight-heavy); }
  [data-tela="captura"] .pg-stage { position: relative; aspect-ratio: 3 / 4; width: 100%; border-radius: var(--radius-xl); overflow: hidden; background: var(--slate-900); box-shadow: var(--shadow-md); isolation: isolate; }
  [data-tela="captura"] .pg-stage video, [data-tela="captura"] .pg-stage .pg-sim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: none; }
  [data-tela="captura"] .pg-stage .pg-sim { transition: transform .7s var(--ease-enter, ease); }
  [data-tela="captura"] .pg-stage[data-fonte="video"] video, [data-tela="captura"] .pg-stage[data-fonte="sim"] .pg-sim { display: block; }
  [data-tela="captura"] .pg-molde { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  [data-tela="captura"] .pg-molde .m-mask { fill: var(--slate-900); opacity: .5; }
  [data-tela="captura"] .pg-molde .m-ln { fill: none; stroke: var(--slate-300); stroke-width: 4; stroke-dasharray: 14 10; opacity: .85; transition: stroke var(--transition-base); }
  [data-tela="captura"] .pg-molde .m-eye { stroke-dasharray: none; stroke-width: 3; }
  [data-tela="captura"] .pg-molde .m-t { font-family: var(--font-sans); font-weight: 800; font-size: 20px; fill: var(--slate-200); opacity: .9; }
  [data-tela="captura"] .pg-stage[data-estado="ok"] .m-ln { stroke: var(--color-success); stroke-dasharray: none; opacity: 1; }
  [data-tela="captura"] .pg-stage:not([data-estado="ok"]):not([data-estado="ruim"]) .pg-molde { opacity: .35; }
  [data-tela="captura"] .pg-fb { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--slate-900) 78%, transparent); color: var(--slate-50); font-weight: var(--font-weight-heavy); font-size: var(--text-sm); white-space: nowrap; backdrop-filter: blur(6px); transition: background var(--transition-base); }
  [data-tela="captura"] .pg-fb svg, [data-tela="captura"] .pg-fb .lucide { width: 16px; height: 16px; }
  [data-tela="captura"] .pg-stage[data-estado="ok"] .pg-fb { background: var(--color-success); color: var(--text-inverted); }
  [data-tela="captura"] .pg-stage:not([data-estado="ok"]):not([data-estado="ruim"]) .pg-fb { display: none; }
  [data-tela="captura"] .pg-count { position: absolute; inset: 0; display: none; place-items: center; font-family: var(--font-mono); font-size: 120px; font-weight: 800; color: var(--slate-50); text-shadow: 0 4px 24px color-mix(in srgb, var(--slate-900) 60%, transparent); }
  [data-tela="captura"] .pg-count.on { display: grid; }
  [data-tela="captura"] .pg-flash { position: absolute; inset: 0; background: var(--slate-50); opacity: 0; pointer-events: none; transition: opacity .35s; }
  [data-tela="captura"] .pg-flash.on { opacity: .9; transition: none; }
  [data-tela="captura"] .pg-ov { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: var(--spacing-lg); text-align: center; color: var(--slate-100); background: color-mix(in srgb, var(--slate-900) 88%, transparent); }
  [data-tela="captura"] .pg-ov h2 { margin: 6px 0 0; font-size: var(--text-lg); font-weight: var(--font-weight-heavy); color: var(--slate-50); }
  [data-tela="captura"] .pg-ov p { margin: 0; font-size: var(--text-sm); color: var(--slate-300); max-width: 300px; }
  [data-tela="captura"] .pg-ov .pg-actions { width: 100%; max-width: 260px; margin-top: 8px; }
  [data-tela="captura"] .pg-ov .btn-outline { color: var(--slate-50); border-color: var(--slate-500); }
  [data-tela="captura"] .pg-ov .btn-outline:hover { color: var(--slate-900); }
  [data-tela="captura"] .pg-stage[data-estado="pedindo"] .pg-ov-pedindo, [data-tela="captura"] .pg-stage[data-estado="negada"] .pg-ov-erro, [data-tela="captura"] .pg-stage[data-estado="indisponivel"] .pg-ov-erro { display: flex; }
  [data-tela="captura"] .pg-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--spacing-sm); }
  [data-tela="captura"] .pg-controls .btn { font-size: var(--text-sm); padding-left: 10px; padding-right: 10px; }
  [data-tela="captura"] .pg-controls > :first-child { justify-self: start; }
  [data-tela="captura"] .pg-controls > :last-child { justify-self: end; }
  [data-tela="captura"] .pg-shutter { width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--bg-surface); background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary), var(--shadow-md); cursor: pointer; display: grid; place-items: center; color: var(--color-primary-fg); transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast); }
  [data-tela="captura"] .pg-shutter .lucide { width: 28px; height: 28px; }
  [data-tela="captura"] .pg-shutter:hover:not(:disabled) { transform: scale(1.05); }
  [data-tela="captura"] .pg-shutter:disabled { background: var(--slate-300); box-shadow: 0 0 0 3px var(--slate-300); cursor: not-allowed; color: var(--slate-500); }
  [data-tela="captura"] .pg-opts { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); flex-wrap: wrap; font-size: var(--text-sm); }
  [data-tela="captura"] .pg-opts .toggle { font-weight: var(--font-weight-bold); }
  [data-tela="captura"] .pg-hint { color: var(--text-muted); font-size: var(--text-xs); }
  [data-tela="captura"] .pg-demo-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: var(--spacing-sm); border-top: 1px dashed var(--border-base); }
  [data-tela="captura"] .pg-demo-bar .mel-segs { flex-wrap: wrap; justify-content: center; }
  [data-tela="captura"] .pg-demo-bar .mel-segs button { font-size: 12px; padding: 5px 9px; }

  /* ---------- Analisando a foto (processando.html) ---------- */
  [data-tela="processando"] .pg-foto { position: relative; width: 62%; max-width: 240px; margin: var(--spacing-sm) auto 0; aspect-ratio: 3 / 4; border-radius: var(--radius-xl); overflow: hidden; background: var(--slate-800); box-shadow: var(--shadow-md); }
  [data-tela="processando"] .pg-foto img { width: 100%; height: 100%; display: block; object-fit: cover; }
  [data-tela="processando"] .pg-scan { position: absolute; left: 0; right: 0; height: 3px; background: var(--color-primary); box-shadow: 0 0 18px 6px color-mix(in srgb, var(--color-primary) 55%, transparent); animation: pg-scan 1.6s ease-in-out infinite alternate; }
  @keyframes pg-scan { from { top: 6%; } to { top: 92%; } }
  [data-tela="processando"].is-fim .pg-scan, [data-tela="processando"].is-erro .pg-scan { display: none; }
  [data-tela="processando"] .pg-center { text-align: center; display: flex; flex-direction: column; gap: 4px; }
  [data-tela="processando"] .pg-center h1 { margin: 0; font-size: var(--text-xl); font-weight: var(--font-weight-heavy); }
  [data-tela="processando"] .pg-center p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
  [data-tela="processando"] .pg-prog { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: 14px; }
  [data-tela="processando"] .pg-prog .mel-meter > span { width: 0; transition: width .35s ease; }
  [data-tela="processando"] .pg-erro { display: none; }
  [data-tela="processando"].is-erro .pg-erro { display: flex; }
  [data-tela="processando"].is-erro .pg-ok-only { display: none; }
  [data-tela="processando"] .pg-erro .mel-empty { padding: var(--spacing-lg) var(--spacing-md); width: 100%; }
  [data-tela="processando"] .pg-erro .mel-empty-actions { width: 100%; flex-direction: column; }
  [data-tela="processando"] .pg-erro .mel-empty-actions .btn { width: 100%; }
  [data-tela="processando"] .mel-steplist li { min-height: 34px; }

  /* ---------- Confira os pontos (ajuste.html) ---------- */
  [data-tela="ajuste"].pg-wrap { gap: 12px; }
  [data-tela="ajuste"] .pg-viewer { position: relative; }
  [data-tela="ajuste"] .pg-vp { position: relative; width: 100%; aspect-ratio: 720 / 920; overflow: hidden; border-radius: var(--radius-xl); background: var(--slate-800); box-shadow: var(--shadow-md); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
  [data-tela="ajuste"] .pg-vp.is-panning { cursor: grabbing; }
  [data-tela="ajuste"] .pg-world { position: absolute; inset: 0; transform-origin: 0 0; }
  [data-tela="ajuste"] .pg-world canvas { position: absolute; left: 8.3333%; top: 6.5217%; width: 83.3333%; height: 86.9565%; display: block; }
  [data-tela="ajuste"] .pg-world svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  [data-tela="ajuste"] .o-margem { fill: var(--slate-800); }
  [data-tela="ajuste"] .o-borda { fill: none; stroke: var(--slate-600); }
  [data-tela="ajuste"] .o-guia { stroke: var(--slate-50); opacity: .75; fill: none; }
  [data-tela="ajuste"] .o-pd { stroke: var(--color-primary); fill: none; }
  [data-tela="ajuste"] .o-pupila { fill: color-mix(in srgb, var(--color-primary) 18%, transparent); stroke: var(--color-primary); }
  [data-tela="ajuste"] .o-cruz { stroke: var(--color-primary); }
  [data-tela="ajuste"] .o-iris { fill: none; stroke: var(--color-info); }
  [data-tela="ajuste"] .o-alca-iris { fill: var(--color-info); stroke: var(--slate-50); }
  [data-tela="ajuste"] .o-nariz { fill: var(--color-success); stroke: var(--slate-50); }
  [data-tela="ajuste"] .o-lbl { font-family: var(--font-sans); font-weight: 800; fill: var(--slate-50); paint-order: stroke; stroke: var(--slate-900); stroke-linejoin: round; }
  [data-tela="ajuste"] .is-fora .o-pupila, [data-tela="ajuste"] .is-fora.o-nariz { fill: var(--color-error); stroke: var(--slate-50); }
  [data-tela="ajuste"] .is-fora .o-cruz { stroke: var(--slate-50); }
  [data-tela="ajuste"] .is-drag .o-pupila { fill: color-mix(in srgb, var(--color-primary) 35%, transparent); }
  [data-tela="ajuste"] .pg-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-surface) 92%, transparent); box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle); }
  [data-tela="ajuste"] .pg-zoom .btn { padding: 6px; }
  [data-tela="ajuste"] .pg-zoom .btn .lucide { width: 18px; height: 18px; }
  [data-tela="ajuste"] .pg-zoom output { min-width: 40px; text-align: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }
  [data-tela="ajuste"] .pg-lupa { position: absolute; top: 10px; width: 116px; height: 116px; border-radius: 50%; border: 3px solid var(--bg-surface); box-shadow: var(--shadow-lg); overflow: hidden; display: none; pointer-events: none; background: var(--slate-800); }
  [data-tela="ajuste"] .pg-lupa.on { display: block; }
  [data-tela="ajuste"] .pg-lupa.is-l { left: 10px; }
  [data-tela="ajuste"] .pg-lupa.is-r { right: 10px; }
  [data-tela="ajuste"] .pg-lupa canvas { width: 100%; height: 100%; display: block; }
  [data-tela="ajuste"] .pg-lupa::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid var(--color-primary); border-radius: 50%; }
  [data-tela="ajuste"] .pg-dica { margin: 0; font-size: var(--text-xs); color: var(--text-muted); text-align: center; }
  [data-tela="ajuste"] .pg-painel { padding: var(--spacing-md); }
  [data-tela="ajuste"] .pg-res { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-md); }
  [data-tela="ajuste"] .pg-res-l { display: flex; flex-direction: column; gap: 2px; }
  [data-tela="ajuste"] .pg-eyebrow { font-size: var(--text-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  [data-tela="ajuste"] .pg-big { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-4xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
  [data-tela="ajuste"] .pg-big small { font-size: var(--text-lg); color: var(--text-muted); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
  [data-tela="ajuste"] .pg-mono-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-sm); margin-top: 14px; }
  [data-tela="ajuste"] .pg-mono-grid div { padding: 8px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 2px; }
  [data-tela="ajuste"] .pg-mono-grid span { font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--text-muted); }
  [data-tela="ajuste"] .pg-mono-grid b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-lg); }
  [data-tela="ajuste"] .pg-tec { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
  [data-tela="ajuste"] .pg-tec b { color: var(--text-main); font-weight: 700; }
  [data-tela="ajuste"] .pg-tec .is-bad { color: var(--color-error); }

  /* ---------- Resultado (resultado.html) ---------- */
  [data-tela="resultado"] .pg-hero { text-align: center; padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md); display: flex; flex-direction: column; align-items: center; gap: 6px; }
  [data-tela="resultado"] .pg-eyebrow { font-size: var(--text-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
  [data-tela="resultado"] .pg-big { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-6xl); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--text-main); }
  [data-tela="resultado"] .pg-big small { font-size: var(--text-2xl); color: var(--text-muted); font-weight: 600; letter-spacing: 0; margin-left: 6px; }
  [data-tela="resultado"] .pg-est { font-size: var(--text-sm); color: var(--text-muted); }
  [data-tela="resultado"] .pg-est b { font-family: var(--font-mono); color: var(--text-main); }
  [data-tela="resultado"] .pg-mono { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: var(--spacing-md); width: 100%; border-top: 1px solid var(--border-subtle); }
  [data-tela="resultado"] .pg-mono div { padding: 12px 8px 0; display: flex; flex-direction: column; gap: 2px; }
  [data-tela="resultado"] .pg-mono div + div { border-left: 1px solid var(--border-subtle); }
  [data-tela="resultado"] .pg-mono span { font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--text-muted); }
  [data-tela="resultado"] .pg-mono b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); font-weight: 700; }
  [data-tela="resultado"] .pg-conf { display: flex; flex-direction: column; gap: 10px; }
  [data-tela="resultado"] .pg-conf-h { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); }
  [data-tela="resultado"] .pg-conf-h strong { font-size: var(--text-sm); }
  [data-tela="resultado"] .pg-niveis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  [data-tela="resultado"] .pg-niveis span { height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
  [data-tela="resultado"] .pg-niveis[data-n="baixa"] span:nth-child(-n+1) { background: var(--color-error); }
  [data-tela="resultado"] .pg-niveis[data-n="media"] span:nth-child(-n+2) { background: var(--color-primary); }
  [data-tela="resultado"] .pg-niveis[data-n="alta"] span { background: var(--color-success); }
  [data-tela="resultado"] .pg-niveis-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--font-weight-bold); }
  [data-tela="resultado"] .pg-niveis-l span:nth-child(2) { text-align: center; }
  [data-tela="resultado"] .pg-niveis-l span:last-child { text-align: right; }
  [data-tela="resultado"] .pg-conf p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
  [data-tela="resultado"] .pg-foto { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--spacing-md); align-items: start; }
  [data-tela="resultado"] .pg-thumb { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden; background: var(--slate-800); }
  [data-tela="resultado"] .pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  [data-tela="resultado"] .pg-foto .mel-summary dl { font-size: var(--text-sm); gap: 8px 10px; }
  [data-tela="resultado"] .pg-foto .mel-summary dd.mel-mono { white-space: nowrap; font-size: var(--text-xs); }
  [data-tela="resultado"] .pg-foto .mel-chip { margin-top: 10px; white-space: normal; }
  [data-tela="resultado-vazio"] .mel-empty { margin-top: var(--spacing-lg); }

  /* ---------- Histórico (historico.html) ---------- */
  [data-tela="historico"] [hidden] { display: none !important; }
  [data-tela="historico"] .pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-sm); }
  [data-tela="historico"] .pg-head p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
  [data-tela="historico"] .pg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
  [data-tela="historico"] .pg-lista:empty { display: none; }
  [data-tela="historico"] .pg-item { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px 10px 10px; }
  [data-tela="historico"] .pg-item + .pg-item { margin-top: 0; }
  [data-tela="historico"] .pg-item:hover { border-color: var(--border-base); box-shadow: var(--shadow-md); }
  [data-tela="historico"] .pg-item .pg-thumb { aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; background: var(--slate-800); }
  [data-tela="historico"] .pg-item .pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  [data-tela="historico"] .pg-item-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  [data-tela="historico"] .pg-item-l1 { display: flex; align-items: baseline; gap: var(--spacing-sm); flex-wrap: wrap; }
  [data-tela="historico"] .pg-item-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 700; color: var(--text-main); text-decoration: none; line-height: 1.1; }
  [data-tela="historico"] .pg-item-v small { font-size: var(--text-sm); color: var(--text-muted); margin-left: 3px; }
  [data-tela="historico"] .pg-item-v::after { content: ""; position: absolute; inset: 0; }
  [data-tela="historico"] .pg-item-mm { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
  [data-tela="historico"] .pg-item-mm b { color: var(--text-main); font-weight: 700; }
  [data-tela="historico"] .pg-item-l3 { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  [data-tela="historico"] .pg-item-d { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
  [data-tela="historico"] .pg-item .btn { position: relative; z-index: 1; color: var(--text-muted); }
  [data-tela="historico"] .pg-item .btn:hover { color: var(--color-error); }
  [data-tela="historico"] .pg-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
  [data-tela="historico"] dialog.modal .modal-body p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--text-sm); }
  [data-tela="historico"] dialog.modal .modal-body strong { font-size: var(--text-lg); }
  [data-tela="historico"] .pg-dlg { display: flex; flex-direction: column; gap: 12px; }

}