/* SYSMON — estilos da aplicação.
   #perf: vivia embutido no index.html (126KB). O index.html NÃO tem cache immutable (tem de
   revalidar para os ?v= novos chegarem), por isso estes bytes voltavam a descer a cada
   alteração do HTML. Como ficheiro próprio com ?v= entra na regra immutable de 1 ano. */

    :root {
      --surface: #141b2c;
      --border: rgba(148,163,184,0.11);
      --ink-1: #f1f5f9; --ink-2: #94a3b8; --ink-3: #64748b;
      --accent: #2dd4bf; --accent-2: #a78bfa; --accent-3: #38bdf8;
      /* atmosfera (skins #9 + meteorologia de ameaça #3) — cores dos brilhos de fundo */
      --atmo-1: rgba(45,212,191,.16); --atmo-2: rgba(56,189,248,.12); --atmo-3: rgba(167,139,250,.13);
      --atmo-speed: 1.6s;
      /* tokens usados pelos componentes .dlg-/.dj-/.dlf-/.ux-/.fr-seg- mas que NUNCA tinham sido declarados →
         declarações inválidas (cor herdada, fundo transparente): perdia-se a hierarquia e no claro ficavam ilegíveis */
      --text: #e2e8f0; --muted: #94a3b8; --card: #141b2c; --accent-strong: #5eead4; --text-soft: #aeb8c8;
    }
    :root[data-theme="light"] { --text: #0f172a; --muted: #64748b; --card: #ffffff; --accent-strong: #0f766e; --text-soft: #475569; }
    /* custom-properties animáveis → a mudança de skin/estado faz cross-fade suave (degrada p/ instantâneo se não suportado) */
    @property --atmo-1 { syntax: '<color>'; inherits: true; initial-value: rgba(45,212,191,.09); }
    @property --atmo-2 { syntax: '<color>'; inherits: true; initial-value: rgba(56,189,248,.07); }
    @property --atmo-3 { syntax: '<color>'; inherits: true; initial-value: rgba(167,139,250,.07); }
    :root { transition: --atmo-1 var(--atmo-speed) ease, --atmo-2 var(--atmo-speed) ease, --atmo-3 var(--atmo-speed) ease; }
    @media (prefers-reduced-motion: reduce) { :root { transition: none; } }
    html { color-scheme: dark; }
    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #0a0f1e;
           font-feature-settings: 'cv11', 'ss01'; text-rendering: optimizeLegibility; }

    /* Fundo navy com brilhos — cores vêm da atmosfera (skin + meteorologia de ameaça) */
    body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
      background:
        radial-gradient(1300px 820px at 88% -6%, var(--atmo-1), transparent 58%),
        radial-gradient(1100px 720px at -8% 18%, var(--atmo-2), transparent 56%),
        radial-gradient(1400px 940px at 50% 116%, var(--atmo-3), transparent 60%); }

    /* ===== #9 SKINS: paletas de atmosfera (a skin dá o clima calmo) ===== */
    :root[data-skin="aurora"]  { --accent:#34d399; --accent-2:#22d3ee; --accent-3:#818cf8; --atmo-1:rgba(52,211,153,.22); --atmo-2:rgba(34,211,238,.17); --atmo-3:rgba(129,140,248,.19); }
    :root[data-skin="rose"]    { --accent:#fb7185; --accent-2:#f472b6; --accent-3:#c084fc; --atmo-1:rgba(251,113,133,.20); --atmo-2:rgba(244,114,182,.15); --atmo-3:rgba(192,132,252,.17); }
    :root[data-skin="terminal"]{ --accent:#4ade80; --accent-2:#34d399; --accent-3:#a3e635; --atmo-1:rgba(74,222,128,.18); --atmo-2:rgba(52,211,153,.12); --atmo-3:rgba(163,230,53,.12); }
    :root[data-skin="ember"]   { --accent:#fb923c; --accent-2:#fbbf24; --accent-3:#f87171; --atmo-1:rgba(251,146,60,.20); --atmo-2:rgba(251,191,36,.14); --atmo-3:rgba(248,113,113,.16); }
    /* ===== #3 METEOROLOGIA DE AMEAÇA: o estado do sistema modula a atmosfera (vence a skin) e pulsa ===== */
    /* 2026-09-11: o operador NÃO quer o fundo vermelho de "down"/"alert". A meteorologia deixa de tingir o
       fundo (mantém a atmosfera calma da skin); o estado fica APENAS na pílula do header + pontos por-site.
       Não repor cores vermelhas/âmbar aqui sem pedido explícito. (o vermelho do 1º screenshot era isto.) */
    @keyframes atmobreathe { 0%,100%{ opacity:1 } 50%{ opacity:.5 } }
    /* ===== #2 arranque cinematográfico: cascata de revelação dos cards ===== */
    @keyframes bootcard { from { opacity:0; transform:translateY(16px) scale(.97); filter:blur(3px) } to { opacity:1; transform:none; filter:none } }
    /* ===== #10 momentos de conquista: banner + confetti ===== */
    .mile-pop { pointer-events:none; /* só informativo: tapava os controlos do cabeçalho */ position:fixed; top:70px; left:50%; z-index:130; display:flex; align-items:center; gap:12px; max-width:92vw;
      padding:12px 20px 12px 13px; border-radius:16px; background:rgba(12,16,24,.92); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
      border:1px solid rgba(45,212,191,.4); box-shadow:0 22px 55px -20px rgba(0,0,0,.75), 0 0 46px -10px var(--accent); animation:milein .5s cubic-bezier(.2,.9,.25,1.35); }
    .mile-pop .mi-ic { width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;flex:none;
      background:linear-gradient(140deg, var(--accent), var(--accent-3)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
    .mile-pop .mi-t { font-size:14.5px;font-weight:750;color:#f1f5f9;letter-spacing:-.01em }
    .mile-pop .mi-s { font-size:12.5px;color:#94a3b8;margin-top:1px }
    @keyframes milein { from { opacity:0; transform:translate(-50%,-16px) scale(.9) } to { opacity:1; transform:translate(-50%,0) scale(1) } }
    #mile-confetti { position:fixed; inset:0; pointer-events:none; z-index:129 }
    /* ===== #5 dinheiro em movimento: pulso dourado + etiqueta +N ===== */
    #ov-cards .card.coin-hit { animation: coinhit .9s ease-out; }
    @keyframes coinhit { 0%{ box-shadow:0 0 0 0 rgba(245,158,11,0) } 30%{ box-shadow:0 0 40px -6px rgba(245,158,11,.55); border-color:rgba(245,158,11,.5) } 100%{ box-shadow:0 0 0 0 rgba(245,158,11,0) } }
    .coin-plus { position:fixed; z-index:126; transform:translate(-50%,0); font-size:19px; font-weight:800; color:#fbbf24; text-shadow:0 2px 12px rgba(245,158,11,.6); pointer-events:none; animation:coinplus 1.5s cubic-bezier(.2,.7,.2,1) forwards; }
    @keyframes coinplus { 0%{ opacity:0; transform:translate(-50%,10px) scale(.7) } 20%{ opacity:1; transform:translate(-50%,-4px) scale(1.1) } 70%{ opacity:1; transform:translate(-50%,-22px) scale(1) } 100%{ opacity:0; transform:translate(-50%,-40px) scale(.9) } }
    /* ===== #6 constelação de visitantes ao vivo ===== */
    #live-constel { display:block; width:100%; height:200px }
    #live-constel-wrap { background:radial-gradient(130% 150% at 50% -10%, rgba(45,212,191,.07), transparent 60%), var(--surface) }
    .mile-pop { transform:translate(-50%,0); }
    @media (prefers-reduced-motion: reduce) { :root[data-weather] body::before { animation: none; } }
    /* #3 sinal de meteorologia na pílula de estado do header */
    #system-status-dot.bg-rose-500 { box-shadow:0 0 9px rgba(244,63,94,.65) !important; }
    #system-status-dot.bg-amber-400 { box-shadow:0 0 9px rgba(251,191,36,.6) !important; }
    :root[data-weather="down"] #system-status { border-color:rgba(244,63,94,.45); background:rgba(244,63,94,.12); color:#fda4af; }
    :root[data-weather="alert"] #system-status { border-color:rgba(251,191,36,.38); background:rgba(251,191,36,.09); color:#fcd34d; }
    body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.5;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
    ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: #fff; }
    [data-theme="light"] ::selection { background: rgba(13,148,136,0.22); color: #0f172a; }

    /* Cartões — superfície navy glassy */
    @media (min-width: 1024px) { #custom-pop { position: absolute; } } /* .card (relative) anulava o .absolute → o popover empurrava o cabeçalho de 132 para 348px */
    .card { position: relative;
      background: linear-gradient(180deg, rgba(148,163,184,0.05), rgba(148,163,184,0) 46%), #141b2c;
      border: 1px solid var(--border); border-radius: 20px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.45), 0 24px 70px -20px rgba(4,7,15,0.7);
      transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
    .card:hover { border-color: rgba(45,212,191,0.22); transform: translateY(-1px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.45), 0 32px 90px -20px rgba(4,7,15,0.8); }
    /* Glow Follower: brilho radial teal na borda de 1px a seguir o cursor (estilo Linear/Raycast).
       Máscara XOR revela só o anel da borda; --mx/--my atualizados por rAF em app.js. Só desktop. */
    @media (hover: hover) and (pointer: fine) {
      .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
        background: radial-gradient(190px circle at var(--mx, -300px) var(--my, -300px), rgba(45,212,191,.6), rgba(56,189,248,.18) 34%, transparent 62%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
        opacity: 0; transition: opacity .4s ease; pointer-events: none; }
      .card:hover::after { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) { .card::after { transition: none; } }
    /* Cartões clicáveis: affordance + feedback de press */
    .card.cursor-pointer:hover { border-color: rgba(45,212,191,0.35); }
    .card.cursor-pointer:active { transform: translateY(0) scale(0.994); transition-duration: .06s; }
    /* Estados de press */
    .btn-primary:active, .btn-ghost:active, .btn-mini:active, .pill:active { transform: scale(0.96); }
    .btn-mini.active { background: rgba(45,212,191,0.14); border-color: rgba(45,212,191,0.4); color: #5eead4; }
    .ls-check { width: 17px; height: 17px; accent-color: #2dd4bf; cursor: pointer; }
    .ls-check-wrap { display: inline-flex; align-items: center; }
    /* Tooltip de ajuda contextual (#17) */
    .help { position: relative; display: inline-flex; cursor: help; color: #5d677d; vertical-align: middle; }
    .help:hover, .help:focus-visible { color: #94a3b8; outline: none; }
    .help::after { content: attr(data-help); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
      background: #1a2336; color: #cbd5e1; font-size: 11px; font-weight: 400; line-height: 1.45; padding: 8px 11px; border-radius: 9px;
      border: 1px solid rgba(148,163,184,.2); width: max-content; max-width: 230px; opacity: 0; pointer-events: none;
      transition: opacity .16s ease, transform .16s ease; z-index: 60; box-shadow: 0 12px 34px rgba(0,0,0,.55); white-space: normal; text-align: left; }
    .help:hover::after, .help:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
    /* escondido com opacity:0 o tooltip CONTINUAVA no layout → 32px de scroll horizontal no Overview do telemóvel */
    .help:not(:hover):not(:focus-visible)::after { display: none; }
    /* Tooltip para os badges do Scout — visível e imediato (o title nativo é lento/discreto) */
    .tipb { position: relative; }
    .tipb::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px);
      background: #1a2336; color: #cbd5e1; font-size: 11px; font-weight: 400; line-height: 1.4; padding: 6px 10px; border-radius: 8px;
      border: 1px solid rgba(148,163,184,.2); width: max-content; max-width: 220px; opacity: 0; pointer-events: none;
      transition: opacity .15s ease, transform .15s ease; z-index: 60; box-shadow: 0 12px 34px rgba(0,0,0,.5); white-space: normal; text-align: left; }
    .tipb:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
    tr[data-goto] { cursor: pointer; }
    tr[data-goto]:active { background: rgba(45,212,191,0.06); }
    /* Densidade compacta (#5) — efeito bem visível: menos padding, menos espaço, mais denso */
    [data-density="compact"] .card { border-radius: 14px; padding: 16px !important; }
    [data-density="compact"] #ov-cards .card, [data-density="compact"] #an-cards .card,
    [data-density="compact"] #dl-cards .card, [data-density="compact"] #dt-cards .card { padding: 12px 14px !important; }
    [data-density="compact"] .stat-value { font-size: 21px; }
    [data-density="compact"] .tbl thead th, [data-density="compact"] .tbl tbody td { padding: 7px 12px !important; }
    [data-density="compact"] #landings-list > div { padding: 14px !important; }
    /* seções e grelhas mais apertadas */
    [data-density="compact"] section[data-view] { padding-top: 16px !important; padding-bottom: 16px !important; }
    [data-density="compact"] .space-y-5 > * + *, [data-density="compact"] .space-y-6 > * + * { margin-top: 14px !important; }
    [data-density="compact"] .gap-5, [data-density="compact"] .md\:gap-5 { gap: 12px !important; }
    /* #13 ULTRA (Terminal Mode) — máxima densidade: cards apertados, tabelas monospace ultrafinas */
    [data-density="ultra"] .card { border-radius: 11px; padding: 11px !important; }
    [data-density="ultra"] #ov-cards .card, [data-density="ultra"] #an-cards .card,
    [data-density="ultra"] #dl-cards .card, [data-density="ultra"] #dt-cards .card { padding: 9px 11px !important; }
    [data-density="ultra"] .stat-value { font-size: 18px; letter-spacing: -.01em; }
    [data-density="ultra"] .tbl { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; }
    [data-density="ultra"] .tbl thead th, [data-density="ultra"] .tbl tbody td { padding: 4px 10px !important; }
    [data-density="ultra"] #landings-list > div { padding: 9px 12px !important; }
    [data-density="ultra"] section[data-view] { padding-top: 12px !important; padding-bottom: 12px !important; }
    [data-density="ultra"] .space-y-5 > * + *, [data-density="ultra"] .space-y-6 > * + * { margin-top: 10px !important; }
    [data-density="ultra"] .gap-5, [data-density="ultra"] .md\:gap-5 { gap: 9px !important; }
    [data-density="ultra"] .uptime-bar, [data-density="ultra"] .up-bar span, [data-density="ultra"] [class*="uptime"] span { width: 1px !important; }
    /* botão de densidade realçado quando não está no confortável */
    #btn-density.active { background: rgba(45,212,191,.14); color: #5eead4; border-color: rgba(45,212,191,.3); }

    /* Valor de métrica + delta */
    .stat-value { font-size: 26px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: #fff;
      font-feature-settings: 'tnum' 1, 'zero' 1; } /* UI#10 — dígitos de largura fixa + zero cortado */
    .unit { font-size: 0.55em; color: #7c8598; font-weight: 500; letter-spacing: 0; margin-left: 1.5px; }
    [data-theme="light"] .unit { color: #94a3b8; }
    /* UI#3 — vinheta de glow teal sobre o cartão do globo (não bloqueia interação) */
    .globe-glow::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
      background: radial-gradient(120% 85% at 50% 42%, rgba(45,212,191,.13), transparent 60%); mix-blend-mode: screen; }
    [data-theme="light"] .globe-glow::after { opacity: .5; }
    /* Em tema claro o cartão do globo tem um fundo escuro INLINE (style="") que vence a
       classe .card → !important para o tornar claro. O globo WebGL também é re-renderizado
       no tema claro (aqua/verde) pelo toggle (app.js). */
    [data-theme="light"] .globe-glow { background: radial-gradient(120% 120% at 50% 0%, #dfe7f2, #eef2f8 70%) !important; }
    .stat-icon { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
      color: #7dd3fc; background: linear-gradient(180deg, rgba(56,189,248,0.14), rgba(167,139,250,0.06));
      border: 1px solid rgba(148,163,184,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); flex-shrink: 0; }
    .delta-pill { display: inline-flex; align-items: center; gap: 1px; padding: 2.5px 7px 2.5px 4px; border-radius: 9999px;
      font-size: 10px; font-weight: 700; letter-spacing: .01em; border: 1px solid; }
    .delta-up { color: #2dd4bf; background: rgba(45,212,191,.1); border-color: rgba(45,212,191,.24); }
    .delta-down { color: #fb7185; background: rgba(244,63,94,.08); border-color: rgba(244,63,94,.2); }

    /* Skeleton shimmer */
    .skel { position: relative; overflow: hidden; background: rgba(255,255,255,0.045); border-radius: 8px; }
    .skel::after { content: ''; position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent, rgba(45,212,191,0.07) 40%, rgba(255,255,255,0.06) 50%, transparent);
      animation: shimmer 1.4s infinite; }
    @keyframes shimmer { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

    /* Badges de estado */
    .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; font-size: 10.5px; font-weight: 600;
      border-radius: 9999px; border: 1px solid; letter-spacing: .025em; white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
    .badge .dot { width: 5px; height: 5px; border-radius: 9999px; background: currentColor; box-shadow: 0 0 7px currentColor; }
    /* #7 Live Pulse — anel radar a expandir nos pontos "Online"/OK; o dashboard parece vivo e a respirar */
    .badge.b-ok .dot { position: relative; }
    .badge.b-ok .dot::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; pointer-events: none; animation: livepulse 2.2s ease-out infinite; }
    @keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(45,212,191,.5); } 70% { box-shadow: 0 0 0 7px rgba(45,212,191,0); } 100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); } }
    @media (prefers-reduced-motion: reduce) { .badge.b-ok .dot::after { animation: none; } }
    .b-ok    { color:#2dd4bf; background:rgba(45,212,191,.1);   border-color:rgba(45,212,191,.24); }
    .b-warn  { color:#fbbf24; background:rgba(245,158,11,.09);  border-color:rgba(245,158,11,.22); }
    .b-info  { color:#38bdf8; background:rgba(56,189,248,.1);   border-color:rgba(56,189,248,.24); }
    .b-err   { color:#fb7185; background:rgba(244,63,94,.09);   border-color:rgba(244,63,94,.22); }
    .b-off   { color:#fda4af; background:rgba(190,18,60,.13);   border-color:rgba(190,18,60,.32); }
    .b-none  { color:#9f9fa6; background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.11); }

    /* Pills de período / filtros */
    .pill { padding: 6px 13px; font-size: 12px; font-weight: 500; color: #8b8b92; border-radius: 9px; cursor: pointer;
      transition: all .15s ease; border: 1px solid transparent; white-space: nowrap; }
    .pill:hover { color: #fff; background: rgba(255,255,255,.045); }
    .pill.active { color: #fff;
      background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.055));
      border-color: rgba(255,255,255,.13);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 8px rgba(0,0,0,.35); }

    .input { width: 100%; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
      padding: 11px 15px; font-size: 13px; color: #fff; outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.02); }
    .input::placeholder { color: #56565e; }
    .input:focus { border-color: rgba(255,255,255,.22); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
    select.input { appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.4) 50%), linear-gradient(135deg, rgba(255,255,255,.4) 50%, transparent 50%);
      background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
      background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; cursor: pointer; }
    input[type="date"].input::-webkit-calendar-picker-indicator { filter: invert(0.6); }

    /* ===== Definições: navegação lateral sticky + secções polidas ===== */
    .set-grid { display: block; }
    @media (min-width: 1024px) { .set-grid { display: grid; grid-template-columns: 208px minmax(0,1fr); gap: 2.25rem; align-items: start; } }
    .set-nav { display: none; }
    @media (min-width: 1024px) { .set-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 5.25rem; } }
    .set-nav-group { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5b5b66; padding: 14px 12px 6px; }
    .set-navlink { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 500;
      color: #9a9aa6; border: 1px solid transparent; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
    .set-navlink iconify-icon { font-size: 16px; opacity: .6; transition: opacity .15s; }
    .set-navlink:hover { color: #e6e6ea; background: rgba(255,255,255,.045); }
    .set-navlink.active { color: #5eead4; background: rgba(45,212,191,.10); border-color: rgba(45,212,191,.22); }
    .set-navlink.active iconify-icon { opacity: 1; }
    /* tema CLARO: as categorias da esquerda estavam demasiado claras (#9a9aa6) → escurece */
    :root[data-theme="light"] .set-navlink { color: #475569; }
    :root[data-theme="light"] .set-navlink:hover { color: #0f172a; background: rgba(15,23,42,.045); }
    :root[data-theme="light"] .set-navlink.active { color: #0d9488; background: rgba(13,148,136,.1); border-color: rgba(13,148,136,.25); }
    :root[data-theme="light"] .set-nav-group { color: #94a3b8; }
    .set-ico { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
      background: linear-gradient(150deg, rgba(45,212,191,.16), rgba(56,189,248,.07)); border: 1px solid rgba(255,255,255,.08); color: #5eead4;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
    .set-ico iconify-icon { font-size: 20px; }
    .set-section { scroll-margin-top: 6rem; }
    /* #publish — atualizar downloads */
    .pub-site { margin-bottom: 14px; }
    .pub-sitehead { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin: 0 0 7px 2px; }
    .pub-row { background: rgba(148,163,184,.04); border: 1px solid rgba(148,163,184,.1); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; }
    .pub-rowhead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
    .pub-plat { font-size: 12px; font-weight: 700; color: #e2e8f0; min-width: 62px; }
    .pub-file { font-size: 12px; color: #94a3b8; font-family: ui-monospace, Menlo, monospace; }
    .pub-badge { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; margin-left: auto; background: rgba(148,163,184,.12); color: #94a3b8; font-family: ui-monospace, Menlo, monospace; }
    .pub-badge.ok { background: rgba(45,212,191,.14); color: #5eead4; }
    .pub-badge.warn { background: rgba(251,191,36,.14); color: #fcd34d; }
    .pub-target { font-size: 11px; color: #94a3b8; margin-top: 7px; word-break: break-all; }
    .pub-target code { color: #cbd5e1; background: rgba(148,163,184,.1); padding: 1px 5px; border-radius: 4px; }
    .pub-last { margin-left: 6px; font-weight: 600; }
    .pub-last.ok { color: #5eead4; } .pub-last.err { color: #fb7185; }
    .pub-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; align-items: center; }
    .pub-upl { cursor: pointer; }
    .pub-progress { margin-top: 8px; font-size: 11px; color: #cbd5e1; font-family: ui-monospace, Menlo, monospace; }
    .pub-form { margin-top: 10px; }
    .pub-grid { display: flex; flex-wrap: wrap; gap: 7px; }
    .pub-grid .input { flex: 1 1 160px; }
    .pub-grid .pub-wide { flex: 1 1 100%; }
    .pub-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #94a3b8; }

    /* ===== Conversão: cartões de prioridade ===== */
    .cr-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 14px;
      border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.015); }
    .cr-main { min-width: 0; }
    .cr-fix { border-left: 3px solid #f59e0b; background: linear-gradient(90deg, rgba(245,158,11,.07), rgba(255,255,255,.008)); }
    .cr-hero { padding: 18px 20px; border-color: rgba(245,158,11,.30); box-shadow: 0 6px 30px -14px rgba(245,158,11,.55); }
    .cr-dead { border-left: 3px solid #5b6472; opacity: .82; }
    .cr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .cr-ic { font-size: 15px; line-height: 1; }
    .cr-hero .cr-ic { font-size: 20px; }
    .cr-name { font-weight: 600; color: #fff; font-size: 14px; }
    .cr-hero .cr-name { font-size: 16px; }
    .cr-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fbbf24;
      background: rgba(245,158,11,.13); padding: 2px 7px; border-radius: 6px; }
    .cr-tag-dead { color: #94a3b8; background: rgba(148,163,184,.12); }
    .cr-funnel { font-size: 12px; color: #93939f; margin-top: 6px; }
    .cr-hero .cr-funnel { font-size: 13px; }
    .cr-diag { font-size: 12px; color: #c9c9d2; margin-top: 5px; font-weight: 500; }
    .cr-hero .cr-diag { color: #fcd77f; }
    .cr-proof { font-size: 11px; color: #5eead4; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(94,234,212,.14); font-weight: 500; }
    .cr-btn { flex-shrink: 0; font-size: 12px; font-weight: 600; color: #fbbf24; border: 1px solid rgba(245,158,11,.32);
      background: rgba(245,158,11,.09); padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap;
      transition: background .15s, border-color .15s; }
    .cr-btn:hover { background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.55); }
    .cr-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-radius: 14px;
      border: 1px solid rgba(45,212,191,.16); background: rgba(45,212,191,.05); }
    .cr-chip { font-size: 12px; color: #cbd5e1; background: rgba(255,255,255,.045); padding: 3px 9px; border-radius: 8px; }
    .cr-foot { font-size: 11px; color: #64748b; padding: 6px 4px 0; }
    /* tema CLARO: o nome do site era #fff (invisível no cartão claro) e os chips cinza-claro — remapear p/ escuro */
    :root[data-theme="light"] .cr-name { color: #0f172a; }
    :root[data-theme="light"] .cr-chip { color: #334155; background: rgba(15,23,42,.05); }
    :root[data-theme="light"] .cr-funnel { color: #475569; }

    /* ===== Definições premium: toggle-rows, foco teal, ícones nos botões ===== */
    #set-content .set-toggle { padding: 13px 15px; border-radius: 13px; border: 1px solid rgba(255,255,255,.055);
      background: rgba(255,255,255,.02); transition: background .15s, border-color .15s; }
    #set-content .set-toggle:hover { background: rgba(255,255,255,.038); border-color: rgba(255,255,255,.10); }
    #set-content .input:focus { border-color: rgba(45,212,191,.45); box-shadow: 0 0 0 3px rgba(45,212,191,.11); }
    #set-content .input:hover:not(:focus) { border-color: rgba(255,255,255,.14); }
    #set-content button iconify-icon { font-size: 15px; }
    #set-content .btn-mini:not(.hidden) { display: inline-flex; align-items: center; gap: 5px; }
    #tfa-setup-pw { width: 18rem !important; max-width: 100%; }
    #set-content .btn-primary iconify-icon { opacity: .8; }

    .btn-primary { display: inline-flex; align-items: center; gap: 6px; color: #000; font-weight: 600; font-size: 12px;
      padding: 10px 16px; border-radius: 11px; transition: all .15s ease; cursor: pointer;
      background: linear-gradient(180deg, #fff, #e6e6e6);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -6px rgba(0,0,0,.5); }
    .btn-primary:hover { background: linear-gradient(180deg, #fff, #f2f2f2); }
    .btn-primary:active { transform: scale(.97); }
    .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
    .btn-ghost { display: inline-flex; align-items: center; gap: 6px; color: #e6e6e9; font-weight: 550; font-size: 12px;
      padding: 10px 14px; border-radius: 11px;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
      border: 1px solid rgba(255,255,255,.09);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
      transition: all .15s ease; cursor: pointer; }
    .btn-ghost:hover { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.14); color: #fff; }
    .btn-ghost:active { transform: scale(.97); }
    .btn-mini { padding: 5px 10px; font-size: 11px; font-weight: 500; color: #d9d9de;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 8px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
      transition: all .15s ease; cursor: pointer; white-space: nowrap; }
    .btn-mini:hover { background: rgba(255,255,255,.09); color: #fff; }
    /* #4 Spring physics — press afunda rápido, release volta com mola (overshoot). Toque de precisão. */
    .btn-primary, .btn-ghost, .btn-mini { transition: transform .34s cubic-bezier(.175,.885,.32,1.275),
      background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; }
    .btn-primary:active, .btn-ghost:active, .btn-mini:active { transform: scale(.955); transition: transform .09s cubic-bezier(.4,0,.2,1); }
    @media (prefers-reduced-motion: reduce) { .btn-primary, .btn-ghost, .btn-mini { transition: background-color .15s, border-color .15s, color .15s; } .btn-primary:active, .btn-ghost:active, .btn-mini:active { transform: none; } }
    /* #18 Toasts — entrada com mola, barra de progresso de auto-dismiss (pausa no hover) */
    .toast-card { position: relative; overflow: hidden; animation: toastin .42s cubic-bezier(.175,.885,.32,1.275); }
    @keyframes toastin { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
    .toast-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left;
      background: linear-gradient(90deg, rgba(45,212,191,.75), rgba(56,189,248,.5)); animation: toastprog linear forwards; }
    @keyframes toastprog { from { transform: scaleX(1); } to { transform: scaleX(0); } }
    @media (prefers-reduced-motion: reduce) { .toast-card { animation: none; } .toast-prog { display: none; } }
    /* #5 Sparkline — desenha-se suavemente na carga (stroke-dashoffset, pathLength=1 normaliza) */
    .spark-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sparkdraw 1.1s cubic-bezier(.4,0,.2,1) forwards; }
    @keyframes sparkdraw { to { stroke-dashoffset: 0; } }
    @media (prefers-reduced-motion: reduce) { .spark-draw { animation: none; stroke-dashoffset: 0; } }
    /* #11 Floating Island — barra de lote como ilha flutuante (glass + borda ciano + badge a brilhar) */
    .bulk-island { border-radius: 16px; background: rgba(10,14,20,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(45,212,191,.32); box-shadow: 0 16px 44px -10px rgba(0,0,0,.75), 0 0 32px -12px rgba(45,212,191,.45), inset 0 1px 0 rgba(255,255,255,.05);
      animation: islandin .34s cubic-bezier(.175,.885,.32,1.275); }
    @keyframes islandin { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
    .bulk-badge { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 8px;
      background: linear-gradient(180deg, #2dd4bf, #14b8a6); color: #04140f; font-weight: 800; font-size: 12px; line-height: 1;
      box-shadow: 0 0 16px -2px rgba(45,212,191,.75); }
    /* #17 Slide-over drawer — auditoria rápida a partir da direita, sem sair da lista */
    #site-drawer-backdrop { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
    .site-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 440px; max-width: 92vw; z-index: 86;
      background: linear-gradient(180deg, #141c2e, #0b1020); border-left: 1px solid rgba(45,212,191,.18);
      transform: translateX(100%); transition: transform .34s cubic-bezier(.32,.72,0,1); display: flex; flex-direction: column; }
    /* a sombra SÓ com o drawer aberto — senão a sombra à esquerda (-30px) sangra p/ dentro do ecrã e faz uma mancha cinza à direita mesmo fechado */
    .site-drawer.open { transform: translateX(0); box-shadow: -30px 0 80px -20px rgba(0,0,0,.72); }
    .site-drawer-body { height: 100%; overflow-y: auto; padding: 22px; }
    .dsd-close-mini { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
      background: rgba(148,163,184,.08); border: 1px solid rgba(255,255,255,.08); color: #94a3b8; cursor: pointer; font-size: 15px; transition: background .15s, border-color .15s, color .15s; }
    .dsd-close-mini:hover { background: rgba(251,113,133,.14); border-color: rgba(251,113,133,.4); color: #fecdd3; }
    @media (prefers-reduced-motion: reduce) { .site-drawer { transition: none; } }
    /* #12 Bottom sheets no mobile — os modais sobem de baixo (cantos-topo arredondados + pega de arrasto) */
    @media (max-width: 767px) {
      [role="dialog"][aria-modal="true"]:not(#cmdk) { align-items: flex-end !important; padding: 0 !important; }
      [role="dialog"][aria-modal="true"]:not(#cmdk) > div:not(.absolute) {
        width: 100% !important; max-width: 100% !important; max-height: 92vh !important;
        border-radius: 22px 22px 0 0 !important; padding-top: 12px; animation: sheetup .36s cubic-bezier(.32,.72,0,1); }
      [role="dialog"][aria-modal="true"]:not(#cmdk) > div:not(.absolute)::before {
        content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px;
        border-radius: 9999px; background: rgba(255,255,255,.22); z-index: 20; pointer-events: none; }
    }
    @keyframes sheetup { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @media (max-width: 767px) and (prefers-reduced-motion: reduce) { [role="dialog"][aria-modal="true"] > div:not(.absolute) { animation: none; } }
    /* #9 Sidebar icon-rail (⌘B) — recolhe para 66px, só ícones + tooltip flutuante teal. Só desktop. */
    @media (min-width: 768px) {
      #sidebar { transition: transform .3s ease, width .28s cubic-bezier(.4,0,.2,1); }
      html.sidebar-rail #sidebar { width: 66px; }
      html.sidebar-rail #sidebar .nav-item { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; position: relative; }
      html.sidebar-rail #sidebar .nav-item span, html.sidebar-rail #sidebar .nav-modsection,
      html.sidebar-rail #sidebar [data-i18n="nav.monitoring"], html.sidebar-rail #sidebar .logo-chip ~ span, html.sidebar-rail #sidebar #brand-eye ~ span,
      html.sidebar-rail #sidebar div:has(> #lang-select), html.sidebar-rail #sidebar [data-i18n="role.viewerbadge"] { display: none; }
      html.sidebar-rail #sidebar .logo-chip { margin-right: 0; }
      /* o olho da marca substituiu o .logo-chip: sem isto o wordmark "SYSMON LIVE" saía dos 66px e ficava por cima
         do título da página ("SYOverview") */
      html.sidebar-rail #sidebar #brand-eye { margin: 0; width: 40px; height: 28px; }
      html.sidebar-rail #sidebar .h-16:has(> #brand-eye) { justify-content: center; padding-left: 0; padding-right: 0; }
      html.sidebar-rail #sidebar .nav-item[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
        background: rgba(9,13,20,.96); border: 1px solid rgba(45,212,191,.28); color: #e8e8ee; font-size: 12px; font-weight: 500;
        padding: 6px 11px; border-radius: 9px; white-space: nowrap; z-index: 200; box-shadow: 0 10px 28px -8px rgba(0,0,0,.75); pointer-events: none; }
    }
    .btn-mini.danger { color: #fb7185; background: rgba(244,63,94,.07); border-color: rgba(244,63,94,.18); }
    .btn-mini.danger:hover { background: rgba(244,63,94,.15); }

    /* Sidebar */
    #sidebar { background: rgba(11,16,28,.82); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
    .nav-item { display: flex; align-items: center; gap: 12px; padding: 9.5px 13px; font-size: 13px; font-weight: 500;
      color: #8b98ab; border-radius: 11px; border: 1px solid transparent; cursor: pointer;
      transition: all .15s ease; position: relative; letter-spacing: -0.005em; }
    .nav-item:hover { color: #fff; background: rgba(148,163,184,.06); }
    .nav-item.active { color: #fff;
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-3) 5%, transparent));
      border-color: color-mix(in srgb, var(--accent) 18%, transparent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
    .nav-item.active::before { content: ''; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px;
      background: linear-gradient(180deg, var(--accent), var(--accent-3)); border-radius: 0 4px 4px 0; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
    /* UX#13 — barra de navegação inferior (mobile) */
    .bnav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
      padding: 8px 0 9px; font-size: 10px; font-weight: 500; color: #6b7688; cursor: pointer; transition: color .15s ease; }
    .bnav-item.active { color: var(--accent); }
    /* #9 skins: pílula LIVE segue o acento */
    .brand-live { color: color-mix(in srgb, var(--accent) 90%, white); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
    /* tema claro: a barra inferior tem bg-[#0a0f1e]/95 (Tailwind, escuro) sem override → claro */
    [data-theme="light"] #bottom-nav { background: rgba(248,250,252,.96) !important; border-top-color: rgba(15,23,42,.08) !important; }
    [data-theme="light"] .bnav-item { color: #64748b; }
    [data-theme="light"] .bnav-item.active { color: #0d9488; }
    /* análise profunda: elementos com fundo escuro inline sem override claro */
    [data-theme="light"] #country-panel { background: #ffffff !important; border-color: rgba(15,23,42,.1) !important; }
    [data-theme="light"] #btn-to-top { background: rgba(255,255,255,.92) !important; color: #334155 !important; border-color: rgba(15,23,42,.1) !important; }
    /* fixed em baixo (bulk bar + toasts) sobem acima do bottom-nav no telemóvel E respeitam a safe-area (home-indicator do notch) */
    @media (max-width: 767px) {
      html.bottom-nav-on #bulk-bar { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
      html.bottom-nav-on #toast-container { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
    }
    .bnav-item:active { transform: scale(.92); }
    /* Quando o drawer (menu de cima) ou o painel de país abrem, o app.js põe
       html.menu-open / html.panel-open → esconde a barra inferior E os flutuantes (btn-to-top,
       bulk-bar). Senão o #bottom-nav / btn-to-top (z-40) furam o backdrop e espreitam ao lado do
       drawer. JS em vez de :has() no CSS: o Firefox mobile <121 não suporta :has(). */
    #bottom-nav, #btn-to-top, #bulk-bar { transition: opacity .18s ease; }
    html.menu-open #bottom-nav, html.panel-open #bottom-nav,
    html.menu-open #btn-to-top, html.panel-open #btn-to-top,
    html.menu-open #bulk-bar, html.panel-open #bulk-bar { opacity: 0; pointer-events: none; }
    @media (max-width: 767px) {
      html.bottom-nav-on #content { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
      html.bottom-nav-on #btn-to-top { bottom: calc(5rem + env(safe-area-inset-bottom)); }
    }
    /* UX#12 — tabelas viram cartões empilhados no telemóvel (label:valor via data-label) */
    @media (max-width: 639px) {
      table.tbl.cards-mobile thead { display: none; }
      /* o cartão tem de encher a largura do ecrã: sem isto a <table> fica display:table e encolhe-se ao
         conteúdo nowrap (min-width real ~470px) → scroll horizontal invisível no telemóvel. */
      table.tbl.cards-mobile { display: block; width: 100%; white-space: normal; }
      table.tbl.cards-mobile tbody { display: block; width: 100%; }
      table.tbl.cards-mobile tbody tr { display: block; margin: 0 0 10px; border: 1px solid rgba(255,255,255,.07);
        border-radius: 13px; background: rgba(255,255,255,.02); overflow: hidden; }
      table.tbl.cards-mobile tbody td { display: flex; align-items: center; justify-content: space-between; gap: 14px;
        padding: 9px 14px !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.04) !important; text-align: right; }
      table.tbl.cards-mobile tbody td:last-child { border-bottom: 0 !important; }
      table.tbl.cards-mobile tbody td::before { content: attr(data-label); font-size: 10px; text-transform: uppercase;
        letter-spacing: .07em; color: #7c8598; font-weight: 600; text-align: left; flex-shrink: 0; }
      /* células placeholder (empty-state / skeleton) não têm data-label → não viram linha flex nem label */
      table.tbl.cards-mobile tbody td:not([data-label]) { display: block; text-align: center; }
      table.tbl.cards-mobile tbody td:not([data-label])::before { content: none; }
      /* colunas redundantes no cartão do telemóvel (ex.: Ficheiro dobra a Plataforma) — o flex do cartão
         ganha ao .hidden do tailwind, por isso é preciso esconder à força quem não deve aparecer. */
      table.tbl.cards-mobile tbody td.mcard-hide { display: none !important; }
      [data-theme="light"] table.tbl.cards-mobile tbody tr { border-color: rgba(15,23,42,.1); background: rgba(15,23,42,.02); }
    }

    /* Tabelas */
    table.tbl { width: 100%; font-size: 12.5px; text-align: left; white-space: nowrap; }
    .tbl thead th { padding: 11px 20px; font-size: 10px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .13em; color: #67676e; border-bottom: 1px solid rgba(255,255,255,.06);
      background: rgba(255,255,255,.014); }
    .tbl tbody td { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.038); color: #cfcfd4;
      font-variant-numeric: tabular-nums; }
    .tbl tbody tr:last-child td { border-bottom: none; }
    .tbl tbody tr { transition: background .12s ease; }
    .tbl tbody tr:hover { background: rgba(255,255,255,.022); }

    /* Empty states */
    .empty-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
      justify-content: center; text-align: center; padding: 16px; animation: fadeIn .3s ease; }
    .empty-wrap::before { content: ''; position: absolute; inset: 6%;
      background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.4px);
      background-size: 15px 15px;
      -webkit-mask-image: radial-gradient(closest-side at 50% 46%, black, transparent);
      mask-image: radial-gradient(closest-side at 50% 46%, black, transparent); }
    .empty-icon { position: relative; width: 48px; height: 48px; border-radius: 15px; display: flex;
      align-items: center; justify-content: center; color: #5eead4; margin-bottom: 13px;
      background: linear-gradient(180deg, rgba(45,212,191,.12), rgba(45,212,191,.03));
      border: 1px solid rgba(45,212,191,.2);
      box-shadow: 0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.09), 0 0 26px rgba(45,212,191,.14); }
    .empty-icon::after { content: ''; position: absolute; inset: -6px; border-radius: 19px;
      border: 1px solid rgba(45,212,191,.16); animation: emptyPulse 2.6s ease-in-out infinite; }
    @keyframes emptyPulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .12; transform: scale(1.09); } }
    .empty-title { position: relative; font-size: 12.5px; font-weight: 600; color: #d4d4d8; letter-spacing: -0.01em; }
    .empty-sub { position: relative; font-size: 11px; color: #6f6f76; margin-top: 4px; max-width: 250px; line-height: 1.55; }

    .code-block { background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); border-radius: 13px;
      padding: 14px 16px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11.5px; color: #86efac;
      overflow-x: auto; white-space: pre; box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }

    .fade-in { animation: fadeIn .28s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }
    .spin { animation: spin 1s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Barra de progresso no topo (navegação/refresh) */
    #topbar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200; opacity: 0;
      background: linear-gradient(90deg, #2dd4bf, #38bdf8, #a78bfa);
      box-shadow: 0 0 10px rgba(56,189,248,.6); transition: width .2s ease, opacity .3s ease; }
    #topbar.active { opacity: 1; }

    /* Barras de uptime / timeline de estado */
    .uptime-bars { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
    .uptime-bars > i { flex: 1; min-width: 2px; border-radius: 2px; height: 100%; opacity: .82;
      transform-origin: bottom; transition: transform .13s cubic-bezier(.175,.885,.32,1.275), opacity .12s ease, filter .12s ease; cursor: help; }
    /* #14 forense: a barra sob o rato cresce em altura + ganha um glow, revelando o incidente */
    .uptime-bars > i:hover { opacity: 1; transform: scaleY(1.38); filter: brightness(1.2) drop-shadow(0 0 5px currentColor); z-index: 1; }
    .ub-ok { background: #2dd4bf; color: #2dd4bf; } .ub-warn { background: #fbbf24; color: #fbbf24; } .ub-info { background: #38bdf8; color: #38bdf8; }
    .ub-err { background: #fb7185; color: #fb7185; } .ub-off { background: #f43f5e; color: #f43f5e; } .ub-none { background: rgba(148,163,184,.2); color: rgba(148,163,184,.4); }

    /* Command palette (⌘K) */
    #cmdk { position: fixed; inset: 0; z-index: 90; display: none; align-items: flex-start; justify-content: center;
      padding-top: 14vh; background: rgba(2,4,10,.6); backdrop-filter: blur(6px); }
    #cmdk.open { display: flex; }
    .cmdk-box { width: 100%; max-width: 600px; padding: 0 16px; }
    .cmdk-panel { background: linear-gradient(180deg, #232f49, #1a2336 42%);
      border: 1px solid rgba(148,163,184,.22); border-radius: 18px; overflow: hidden;
      box-shadow: 0 40px 130px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); }
    .cmdk-input { width: 100%; background: transparent; border: none; outline: none; color: #fff;
      font-size: 15px; padding: 18px 20px; border-bottom: 1px solid rgba(148,163,184,.1); }
    .cmdk-input::placeholder { color: #64748b; }
    .cmdk-list { max-height: 340px; overflow-y: auto; padding: 8px; }
    .cmdk-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px; cursor: pointer;
      font-size: 13px; color: #cbd5e1; }
    .cmdk-item .ic { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
      background: rgba(148,163,184,.08); color: #94a3b8; flex-shrink: 0; }
    .cmdk-item.sel { background: rgba(45,212,191,.1); color: #fff; }
    .cmdk-item.sel .ic { background: rgba(45,212,191,.18); color: #5eead4; }
    .cmdk-item .kbd { margin-left: auto; font-size: 10px; color: #64748b; }
    .cmdk-section { padding: 10px 14px 4px; font-size: 10px; font-weight: 600; letter-spacing: .1em;
      text-transform: uppercase; color: #64748b; }

    /* (6) Contraste: subtítulos ténues um passo acima */
    .empty-sub, .tbl thead th { color: #8595ab; }

    /* (7) Micro-polish: layout estável ao aparecer scrollbar (lift no hover: ver .card) */
    #content { scrollbar-gutter: stable; }

    /* Logo com chip de gradiente teal→ciano→roxo (estilo NEXORA) */
    .logo-chip { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--accent), var(--accent-3) 55%, var(--accent-2)); color: #06121f; position: relative; overflow: visible;
      box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--accent) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
    /* UI#1 — anel em órbita: um ponto teal a orbitar o ícone (reusa o keyframe radar-sweep = rotate 360). */
    .logo-chip::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; z-index: 2;
      background: radial-gradient(circle 3px at 50% 0%, #9cf5e8 0, #2dd4bf 2.4px, rgba(45,212,191,0) 4.2px);
      animation: radar-sweep 3.6s linear infinite; }
    .logo-chip > * { position: relative; z-index: 1; }
    @keyframes radar-sweep { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .logo-chip::after { animation: none; opacity: 0; } }

    /* UI#17 — anel de foco tokenizado (uma só fonte de verdade), por tema */
    :root, :root[data-theme="dark"] { --focus-ring: 0 0 0 2px #0a0f1e, 0 0 0 4px rgba(45,212,191,.6); }
    :root[data-theme="light"] { --focus-ring: 0 0 0 2px #fff, 0 0 0 4px rgba(13,148,136,.6); }
    .btn-primary:focus-visible, .btn-ghost:focus-visible, .btn-mini:focus-visible,
    .pill:focus-visible, .nav-item:focus-visible, .bnav-item:focus-visible,
    .card.cursor-pointer:focus-visible, [data-goto]:focus-visible, .help:focus-visible,
    input.sr-only:focus-visible + span, input.sr-only:focus-visible + div {
      outline: none; box-shadow: var(--focus-ring);
    }

    /* (2) Respeitar "reduzir movimento" */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
      }
      .card:hover { transform: none; }
    }

    /* Mobile refinado */
    @media (max-width: 768px) {
      .card { border-radius: 16px; }
      #ov-cards .card, #an-cards .card, #dl-cards .card, #dt-cards .card { padding: 15px; }
      .stat-value { font-size: 21px; }
      .tbl thead th { padding: 10px 14px; }
      .tbl tbody td { padding: 12px 14px; }
      header .pill { padding: 5px 10px; font-size: 11px; }
      .btn-ghost, .btn-primary { padding: 9px 12px; }
      /* header mais enxuto no telemóvel: menos padding + controlos compactos numa só linha */
      header > div { padding-top: 11px; padding-bottom: 11px; gap: 8px; }
      header .btn-ghost, header .btn-primary { padding: 8px 10px; }
      #period-select { min-width: 0; max-width: 118px; }
      /* Tap targets ≥ ~36-40px no telemóvel (iOS HIG ~44px) — só afeta mobile */
      .btn-mini { min-height: 36px; }
      .btn-ghost, .btn-primary { min-height: 40px; }
      .ds-primary { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
      select.input { min-height: 36px; }
      .globe-leg { min-height: 32px; padding-left: 4px; padding-right: 4px; }
      /* iOS Safari faz zoom-on-focus em qualquer input <16px — 16px no telemóvel evita-o (desktop mantém 13px). !important p/ bater os !text-xs (ex.: #ds-search/#ds-sort) */
      .input { font-size: 16px !important; }
      /* mais tap targets no telemóvel que a varredura sistémica não apanhou */
      #ds-detail-modal .dsd-toggle .ds-chart-p { min-height: 32px; padding: 6px 11px; display: inline-flex; align-items: center; }
      #ds-detail-modal .dsd-close { width: 40px !important; height: 40px !important; }
      #cp-close { width: 40px !important; height: 40px !important; } /* fecho do painel de país: alvo de toque */
      #site-modal label.cursor-pointer, [data-view="scout"] label.cursor-pointer, [data-view="settings"] label.cursor-pointer { min-height: 44px; }
      #lang-select { min-height: 44px; }
      /* labels de KPI quebram em 2 linhas em vez de cortar com "…" no ecrã estreito */
      .card .stat-label, .card .stat-label > .truncate { white-space: normal; overflow: visible; }
    }
    @media (max-width: 480px) {
      .tbl { font-size: 12px; }
      .tbl thead th, .tbl tbody td { padding: 9px 10px; }
    }

    /* ===== MODO CLARO (#1) ===== */
    :root[data-theme="light"] { color-scheme: light; }
    [data-theme="light"] body { background: #eef2f8; color: #0f172a; }
    [data-theme="light"] body::before {
      background:
        radial-gradient(1200px 760px at 84% -14%, rgba(45,212,191,.10), transparent 56%),
        radial-gradient(1000px 680px at -6% 12%, rgba(56,189,248,.09), transparent 54%),
        radial-gradient(1300px 900px at 52% 120%, rgba(167,139,250,.08), transparent 60%); }
    [data-theme="light"] body::after { opacity: 0; }
    /* superfícies */
    [data-theme="light"] .card { background: linear-gradient(180deg, #ffffff, #fdfefe); border-color: rgba(15,23,42,.09);
      box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 44px -22px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.6); }
    [data-theme="light"] .card:hover { border-color: rgba(13,148,136,.4); box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 22px 60px -22px rgba(15,23,42,.26); }
    [data-theme="light"] #sidebar { background: rgba(248,250,253,.9); border-color: rgba(15,23,42,.08); }
    [data-theme="light"] header { background: rgba(238,242,248,.75) !important; border-color: rgba(15,23,42,.08) !important; }
    [data-theme="light"] .stat-value { color: #0f172a; }
    [data-theme="light"] .stat-icon { background: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.02)); border-color: rgba(15,23,42,.08); color: #475569; }
    [data-theme="light"] .input { background-color: #fff; border-color: rgba(15,23,42,.14); color: #0f172a; }
    [data-theme="light"] .input:focus { border-color: rgba(13,148,136,.5); box-shadow: 0 0 0 3px rgba(45,212,191,.14); }
    [data-theme="light"] .input::placeholder { color: #94a3b8; }
    [data-theme="light"] .btn-ghost { background: #fff; border-color: rgba(15,23,42,.1); color: #1e293b; }
    [data-theme="light"] .btn-ghost:hover { background: #f1f5f9; }
    [data-theme="light"] .btn-mini { background: #fff; border-color: rgba(15,23,42,.1); color: #334155; }
    [data-theme="light"] .btn-mini:hover { background: #f1f5f9; }
    [data-theme="light"] .btn-mini.active { background: rgba(45,212,191,.16); border-color: rgba(13,148,136,.4); color: #0f766e; }
    [data-theme="light"] .pill { color: #475569; }
    [data-theme="light"] .pill.active { color: #0f172a; background: linear-gradient(180deg,#fff,#eef2f8);
      border-color: rgba(15,23,42,.12); box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(15,23,42,.1); }
    [data-theme="light"] .tbl thead th { color: #64748b; border-color: rgba(15,23,42,.08); }
    [data-theme="light"] .tbl tbody td { color: #334155; border-color: rgba(15,23,42,.06); }
    [data-theme="light"] .tbl tbody tr:hover { background: rgba(15,23,42,.03); }
    [data-theme="light"] .nav-item { color: #475569; }
    [data-theme="light"] .nav-item:hover { background: rgba(15,23,42,.05); color: #0f172a; }
    [data-theme="light"] .nav-item.active { background: rgba(45,212,191,.12); color: #0f766e; }
    [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15,23,42,.14); }
    [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.22); }
    [data-theme="light"] .code-block { background: #f1f5f9; border-color: rgba(15,23,42,.1); color: #334155; }
    [data-theme="light"] .cmdk-panel { background: linear-gradient(180deg, #ffffff, #f8fafc 42%); border-color: rgba(15,23,42,.12); }
    [data-theme="light"] .cmdk-input { color: #0f172a; }
    [data-theme="light"] .cmdk-item.sel { background: rgba(45,212,191,.12); }
    [data-theme="light"] .cmdk-item { color: #334155; }
    [data-theme="light"] .cmdk-item .ic { color: #475569; background: rgba(15,23,42,.05); }
    [data-theme="light"] .cmdk-item.sel { color: #0f172a; }
    [data-theme="light"] .cmdk-item.sel .ic { color: #0f766e; background: rgba(13,148,136,.14); }
    /* Definições → publicação de downloads (cores fixas de tema escuro) */
    [data-theme="light"] .pub-row { background: rgba(15,23,42,.02); border-color: rgba(15,23,42,.08); }
    [data-theme="light"] .pub-plat { color: #0f172a; }
    [data-theme="light"] .pub-file, [data-theme="light"] .pub-target { color: #475569; }
    [data-theme="light"] .pub-target code { color: #334155; background: rgba(15,23,42,.06); }
    [data-theme="light"] .pub-badge { color: #475569; background: rgba(15,23,42,.06); }
    [data-theme="light"] .pub-badge.ok { color: #0f766e; background: rgba(13,148,136,.12); }
    [data-theme="light"] .pub-badge.warn { color: #b45309; background: rgba(217,119,6,.13); }
    [data-theme="light"] .pub-last.ok { color: #0f766e; } [data-theme="light"] .pub-last.err { color: #be123c; }
    [data-theme="light"] .pub-progress { color: #334155; }
    /* sky/red/violet/emerald (papéis, auditoria, erros da equipa, badge "snippet missing"): por classe EXATA — um
       [class*=] apanharia o hover:text-red-400 do botão de apagar e pintava-o de vermelho permanente */
    [data-theme="light"] .text-sky-300, [data-theme="light"] .text-sky-200 { color: #0369a1 !important; }
    [data-theme="light"] .text-red-300, [data-theme="light"] .text-red-400, [data-theme="light"] .\!text-red-400 { color: #b91c1c !important; }
    [data-theme="light"] .text-violet-300, [data-theme="light"] .text-violet-300\/70, [data-theme="light"] .\!text-violet-200 { color: #6d28d9 !important; }
    [data-theme="light"] .text-emerald-300 { color: #047857 !important; }
    /* interruptor DESLIGADO: trilho e botão brancos sobre cartão branco (1,1:1) → trilho cinza + sombra no botão */
    [data-theme="light"] input.peer:not(:checked) ~ .bg-white\/10 { background-color: #cbd5e1 !important; }
    [data-theme="light"] input.peer ~ .bg-white\/10::after { box-shadow: 0 1px 3px rgba(15,23,42,.35); }
    /* jornadas da Fricção + grupos de pedidos de download (tons 300/400 pensados para fundo escuro) */
    [data-theme="light"] .dj-row.download .dj-rtitle, [data-theme="light"] .dj-v-converting { color: #047857; }
    [data-theme="light"] .dj-v-store { color: #0369a1; } [data-theme="light"] .dj-v-broken { color: #be123c; }
    [data-theme="light"] .dlg-b-human { color: #0369a1; } [data-theme="light"] .dlg-plat { color: #4338ca; }
    [data-theme="light"] .dlg-s-hum { color: #047857; }
    [data-theme="light"] .dlg-s-bot, [data-theme="light"] .dlg-b-bot, [data-theme="light"] .dlg-n-bot { color: #be123c; }
    [data-theme="light"] .empty-title { color: #334155; }
    [data-theme="light"] .empty-sub { color: #64748b; }
    /* Superfícies escuras FIXAS que ficaram de fora do tema claro: o remap global abaixo (.text-white/.text-neutral-*,
       teal/rose/amber → tinta escura) punha texto escuro sobre fundo escuro → toasts ("Signed out."), barra de seleção
       em massa e gaveta rápida da landing quase invisíveis. Especificidade (0,2,0) vence os bg-[#…] do Tailwind. */
    [data-theme="light"] .toast-card { background-color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 14px 38px -12px rgba(15,23,42,.28); }
    [data-theme="light"] .bulk-island { background: rgba(255,255,255,.94); border-color: rgba(13,148,136,.35);
      box-shadow: 0 16px 44px -12px rgba(15,23,42,.3), 0 0 32px -12px rgba(45,212,191,.35); }
    [data-theme="light"] .site-drawer { background: linear-gradient(180deg, #ffffff, #f6f9fc); border-left-color: rgba(15,23,42,.1); }
    [data-theme="light"] .site-drawer.open { box-shadow: -30px 0 80px -20px rgba(15,23,42,.28); }
    [data-theme="light"] .dsd-close-mini { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.1); color: #475569; }
    [data-theme="light"] .dsd-close-mini:hover { color: #be123c; }
    /* (foco do tema claro agora vem do token --focus-ring, UI#17) */
    /* utilitários Tailwind mais usados */
    [data-theme="light"] .text-white { color: #0f172a !important; }
    [data-theme="light"] .text-neutral-100 { color: #0f172a !important; } /* texto primário (brilhante no escuro) → tinta escura no claro (senão ficava quase branco) */
    [data-theme="light"] .text-neutral-200 { color: #1e293b !important; }
    [data-theme="light"] .text-neutral-300 { color: #334155 !important; }
    [data-theme="light"] .text-neutral-400 { color: #475569 !important; }
    [data-theme="light"] .text-neutral-500 { color: #64748b !important; }
    [data-theme="light"] .text-neutral-700 { color: #94a3b8 !important; }
    [data-theme="light"] .text-white\/90, [data-theme="light"] .text-white\/80 { color: #1e293b !important; }
    [data-theme="light"] .bg-white\/5 { background-color: rgba(15,23,42,.035) !important; }
    [data-theme="light"] .bg-white\/10 { background-color: rgba(15,23,42,.06) !important; }
    [data-theme="light"] .bg-white\/\[0\.02\] { background-color: rgba(15,23,42,.02) !important; }
    [data-theme="light"] .border-white\/10 { border-color: rgba(15,23,42,.1) !important; }
    [data-theme="light"] .border-white\/5 { border-color: rgba(15,23,42,.07) !important; }
    [data-theme="light"] .border-white\/\[0\.06\] { border-color: rgba(15,23,42,.08) !important; }
    [data-theme="light"] .divide-white\/5 > * + * { border-color: rgba(15,23,42,.07) !important; }
    /* badges de estado, deltas, chevron, pills, botões, cores de destaque */
    [data-theme="light"] .badge { box-shadow: none; }
    [data-theme="light"] .b-ok   { color:#0f766e; background:rgba(13,148,136,.12); border-color:rgba(13,148,136,.28); }
    [data-theme="light"] .b-warn { color:#b45309; background:rgba(217,119,6,.13);  border-color:rgba(217,119,6,.3); }
    [data-theme="light"] .b-info { color:#0369a1; background:rgba(2,132,199,.12);   border-color:rgba(2,132,199,.28); }
    [data-theme="light"] .b-err  { color:#be123c; background:rgba(225,29,72,.1);    border-color:rgba(225,29,72,.26); }
    [data-theme="light"] .b-off  { color:#9f1239; background:rgba(190,18,60,.11);   border-color:rgba(190,18,60,.3); }
    [data-theme="light"] .b-none { color:#64748b; background:rgba(15,23,42,.05);    border-color:rgba(15,23,42,.12); }
    [data-theme="light"] .delta-up   { color:#0f766e; background:rgba(13,148,136,.12); border-color:rgba(13,148,136,.28); }
    [data-theme="light"] .delta-down { color:#be123c; background:rgba(225,29,72,.1);   border-color:rgba(225,29,72,.26); }
    [data-theme="light"] select.input {
      background-image: linear-gradient(45deg, transparent 50%, rgba(15,23,42,.45) 50%), linear-gradient(135deg, rgba(15,23,42,.45) 50%, transparent 50%); }
    [data-theme="light"] .pill:hover { color:#0f172a; background:rgba(15,23,42,.05); }
    [data-theme="light"] .btn-primary { background:linear-gradient(180deg,#2dd4bf,#14b8a6); color:#04241f; }
    /* utilitários de cor Tailwind (teal/rose/amber) usados no markup e no JS */
    [data-theme="light"] [class*="text-teal-3"], [data-theme="light"] [class*="text-teal-2"] { color:#0f766e !important; }
    [data-theme="light"] [class*="text-rose-"] { color:#be123c !important; }
    [data-theme="light"] [class*="text-amber-"] { color:#b45309 !important; }
    /* classes EXATAS (evita apanhar peer-checked:bg-teal-400 dos toggles nem o bg-teal-400/bg-rose-500 do ponto de estado) */
    [data-theme="light"] .bg-teal-400\/10, [data-theme="light"] .bg-teal-400\/15, [data-theme="light"] .bg-teal-500\/10 { background-color:rgba(13,148,136,.1) !important; }
    [data-theme="light"] .bg-rose-500\/20 { background-color:rgba(225,29,72,.1) !important; }
    [data-theme="light"] .border-teal-400\/20 { border-color:rgba(13,148,136,.28) !important; }
    /* toggle LIGADO: o override .bg-white/10 !important venceria o peer-checked:bg-teal-400 (sem !important) */
    [data-theme="light"] .peer:checked ~ .bg-white\/10 { background-color:#0d9488 !important; }
    /* tooltip de ajuda em claro */
    [data-theme="light"] .help::after { background:#fff; color:#334155; border-color:rgba(15,23,42,.14); box-shadow:0 12px 34px rgba(15,23,42,.18); }
    [data-theme="light"] .help { color:#94a3b8; }
    /* ecrã de login em claro */
    [data-theme="light"] #view-login { background:#eef2f8 !important; }
    /* UI#2 — fundo imersivo do login (aurora + grelha + varrimento radar), CSS-only, CSP-safe */
    #view-login { overflow:hidden; }
    .login-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
    .login-bg::before { content:''; position:absolute; width:72vmax; height:72vmax; left:-14vmax; top:-24vmax;
      background:radial-gradient(circle at 50% 50%, rgba(45,212,191,.16), transparent 60%);
      animation:login-drift1 24s ease-in-out infinite alternate; }
    .login-bg::after { content:''; position:absolute; width:64vmax; height:64vmax; right:-18vmax; bottom:-22vmax;
      background:radial-gradient(circle at 50% 50%, rgba(56,120,255,.13), transparent 62%);
      animation:login-drift2 28s ease-in-out infinite alternate; }
    .login-grid { position:absolute; inset:0;
      background-image:linear-gradient(rgba(45,212,191,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(45,212,191,.055) 1px, transparent 1px);
      background-size:46px 46px;
      -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 42%, #000 28%, transparent 74%);
      mask-image:radial-gradient(ellipse 78% 68% at 50% 42%, #000 28%, transparent 74%); }
    .login-scan { position:absolute; left:0; right:0; height:38vmax; top:-38vmax;
      background:linear-gradient(180deg, transparent, rgba(45,212,191,.06) 82%, rgba(45,212,191,.11));
      animation:login-scan 7.5s linear infinite; }
    @keyframes login-drift1 { to { transform:translate(9vmax, 6vmax) scale(1.15); } }
    @keyframes login-drift2 { to { transform:translate(-8vmax, -5vmax) scale(1.12); } }
    @keyframes login-scan { 0% { transform:translateY(0); } 100% { transform:translateY(140vmax); } }
    [data-theme="light"] .login-bg::before { background:radial-gradient(circle at 50% 50%, rgba(13,148,136,.12), transparent 60%); }
    [data-theme="light"] .login-bg::after { background:radial-gradient(circle at 50% 50%, rgba(56,120,255,.08), transparent 62%); }
    [data-theme="light"] .login-grid { background-image:linear-gradient(rgba(13,148,136,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(13,148,136,.06) 1px, transparent 1px); }
    [data-theme="light"] .login-scan { display:none; }
    @media (prefers-reduced-motion: reduce) { .login-bg::before, .login-bg::after { animation:none; } .login-scan { display:none; } }
    /* #18 papéis: viewers (só-leitura) não veem controlos de escrita */
    body:not(.role-admin) .admin-only { display:none !important; }
    /* nav Scout/Inbox — concedíveis por utilizador (esconde quando o user não tem o direito) */
    body:not(.can-scout) .nav-scout { display:none !important; }
    body:not(.can-inbox) .nav-inbox { display:none !important; }
    body:not(.can-friction) .nav-friction { display:none !important; }
    body:not(.can-scout):not(.can-inbox) .nav-modsection { display:none !important; }
    body.role-viewer .write-only { display:none !important; }
    /* RBAC (auditoria): esconde ao VIEWER os controlos de escrita que faltavam gatear —
       botões do detalhe do site, verificar, gerar/rodar key, guardar downloads, branding,
       bulk bar, checkbox de seleção e os botões check/edit/add-landing de qualquer tabela.
       O backend já bloqueia (403); isto evita que o viewer veja botões que falhariam.
       Managers mantêm-nos (podem escrever). Os handlers têm guarda canWrite() como reforço. */
    body.role-viewer #btn-check-all, body.role-viewer #dt-check, body.role-viewer #dt-edit,
    body.role-viewer #dt-gen-key, body.role-viewer #dt-regen-key, body.role-viewer #dl-save,
    body.role-viewer #dt-status-brand-save, body.role-viewer #dt-status-enable-wrap,
    body.role-viewer #bulk-bar, body.role-viewer .ls-check-wrap,
    body.role-viewer button[data-action="check"], body.role-viewer button[data-action="edit"],
    body.role-viewer button[data-action="add-landing"] { display:none !important; }
    /* limpar histórico global é ação de admin → escondido a managers e viewers */
    body:not(.role-admin) #btn-clear-history { display:none !important; }

    /* ===== Scout — apresentação premium (Depth & glow) ===== */
    /* fundo com brilho subtil só na vista scout (fixed; só renderiza quando a secção está visível) */
    [data-view="scout"]:not(.hidden)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
      background:radial-gradient(900px 520px at 14% 2%,rgba(45,212,191,.07),transparent 60%),radial-gradient(820px 480px at 92% 5%,rgba(56,189,248,.055),transparent 55%);}
    /* MOBILE: os glows de fundo em px fixos (1200px) criavam uma rampa de brilho esquerda→direita em ecrãs
       estreitos. Aqui centram-se a 50% e escalam ao viewport (vw/vh) → luz simétrica, sem diferença L↔R. */
    @media (max-width:767px){
      /* precisa de bater TAMBÉM o `[data-theme="light"] body::before` (mais específico) senão o tema claro
         mantém os glows de px fixos assimétricos → mancha cinza/escura no lado direito no telemóvel */
      body::before, [data-theme="light"] body::before{background:
        radial-gradient(150vw 42vh at 50% -6%, rgba(45,212,191,.055), transparent 62%),
        radial-gradient(160vw 46vh at 50% 107%, rgba(167,139,250,.05), transparent 62%);}
      [data-view="scout"]:not(.hidden)::before, [data-theme="light"] [data-view="scout"]:not(.hidden)::before{background:
        radial-gradient(160vw 40vh at 50% -2%, rgba(45,212,191,.06), transparent 62%);}
    }
    /* profundidade: sheen base (topo->baixo) + glow de canto por tom, compostos numa só camada
       via --glow → todos os cartões flutuam; a cor muda por tom sem duplicar o background */
    #ds-suggestions .card{--glow:transparent;position:relative;transition:box-shadow .2s ease,transform .2s ease;overflow:hidden;border-radius:18px;padding:22px;
      background-color:#131a2b;
      background-image:radial-gradient(420px 260px at 86% -4%,var(--glow),transparent 62%),linear-gradient(162deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.012) 30%,rgba(0,0,0,.18) 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.4),0 28px 54px -28px rgba(0,0,0,.72)}
    :root[data-theme="light"] #ds-suggestions .card{background-color:#ffffff;
      background-image:radial-gradient(420px 260px at 86% -4%,var(--glow),transparent 62%),linear-gradient(162deg,rgba(255,255,255,.9) 0%,transparent 42%,rgba(30,45,70,.05) 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(30,45,70,.08),0 22px 44px -26px rgba(30,45,70,.32)}
    @media(min-width:768px){#ds-suggestions .card{padding:24px}}
    #ds-suggestions .card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.4),0 38px 64px -26px rgba(0,0,0,.8)}
    /* caixa do domínio (inset) + realce do próprio domínio */
    #ds-suggestions .ds-dombox{border:1px solid rgba(130,150,175,.16);background:rgba(10,14,24,.35);border-radius:11px;padding:9px 12px;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
    :root[data-theme="light"] #ds-suggestions .ds-dombox{border-color:rgba(80,100,130,.2);background:rgba(80,100,130,.05);box-shadow:inset 0 1px 2px rgba(30,45,70,.05)}
    #ds-suggestions .card.tone-good{--glow:rgba(45,212,191,.26)}
    #ds-suggestions .card.tone-neutral{--glow:rgba(56,189,248,.22)}
    #ds-suggestions .card.tone-warn{--glow:rgba(251,191,36,.24)}
    #ds-suggestions .card.tone-bad{--glow:rgba(251,69,112,.32);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(251,69,112,.2),0 28px 52px -26px rgba(251,69,112,.5)}
    #ds-suggestions .card.tone-bad:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(251,69,112,.28),0 38px 62px -24px rgba(251,69,112,.6)}
    /* tema claro: a regra light `.card` (mais específica) apagava o anel vermelho → repõe-se aqui com +especificidade */
    :root[data-theme="light"] #ds-suggestions .card.tone-bad{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(251,69,112,.3),0 22px 44px -26px rgba(251,69,112,.32)}
    /* faixa de perigo no topo dos cartões sinalizados/vetados */
    #ds-suggestions .card.tone-bad::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;
      background:repeating-linear-gradient(-45deg,#fb4570 0 8px,rgba(251,69,112,.18) 8px 16px)}
    /* arco de score — anima o preenchimento (0 → valor) no render */
    .ds-arc-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
    /* gauge NEON (estilo mockup A): track + traço com gradiente + halo desfocado + cap na ponta */
    .ds-gauge{overflow:visible}
    .ds-g-track{fill:none;stroke:rgba(150,178,205,.14);stroke-width:8;stroke-linecap:round}
    :root[data-theme="light"] .ds-g-track{stroke:rgba(90,120,150,.2)}
    .ds-g-val{fill:none;stroke-width:8;stroke-linecap:round}
    .ds-g-halo{filter:blur(4px)}
    .ds-g-halo.h-good{fill:#2dd4bf}.ds-g-halo.h-neutral{fill:#38bdf8}.ds-g-halo.h-warn{fill:#fbbf24}.ds-g-halo.h-bad{fill:#fb4570}.ds-g-halo.h-muted{fill:#94a3b8}
    @keyframes ds-gval{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
    @keyframes ds-ghalo{from{opacity:0}to{opacity:.34}}
    @keyframes ds-gcap{from{opacity:0}to{opacity:1}}
    #ds-suggestions .ds-g-val{stroke-dasharray:var(--len);animation:ds-gval .9s cubic-bezier(.34,1,.44,1) both}
    #ds-suggestions .ds-g-halo{opacity:.34;animation:ds-ghalo .45s ease .5s both}
    #ds-suggestions .ds-g-cap{animation:ds-gcap .45s ease .5s both}
    @media(prefers-reduced-motion:reduce){#ds-suggestions .ds-g-val{animation:none;stroke-dashoffset:0}#ds-suggestions .ds-g-halo{animation:none;opacity:.34}#ds-suggestions .ds-g-cap{animation:none;opacity:1}}
    /* ===== composição estilo mockup A: manchete-veredito, domínio mono, resumo em texto ===== */
    /* eyebrow + tick + manchete a cores (texto colorido por tom, theme-aware) */
    #ds-suggestions .ds-eyebrow{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#64748b;font-weight:700}
    #ds-suggestions .ds-vtick{border-left:3px solid;border-radius:2px;padding-left:12px}
    #ds-suggestions .ds-vh{font-size:17px;line-height:1.16;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
    #ds-suggestions .ds-vtick.g,#ds-suggestions .ds-stat.g{border-color:#2dd4bf}
    #ds-suggestions .ds-vtick.n,#ds-suggestions .ds-stat.n{border-color:#38bdf8}
    #ds-suggestions .ds-vtick.w,#ds-suggestions .ds-stat.w{border-color:#fbbf24}
    #ds-suggestions .ds-vtick.b,#ds-suggestions .ds-stat.b{border-color:#fb4570}
    #ds-suggestions .ds-vtick.m,#ds-suggestions .ds-stat.m{border-color:#64748b}
    #ds-suggestions .ds-vh.g{color:#5eead4}#ds-suggestions .ds-vh.n{color:#7dd3fc}#ds-suggestions .ds-vh.w{color:#fcd34d}#ds-suggestions .ds-vh.b{color:#fb7185}#ds-suggestions .ds-vh.m{color:#cbd5e1}
    :root[data-theme="light"] #ds-suggestions .ds-vh.g{color:#0f766e}:root[data-theme="light"] #ds-suggestions .ds-vh.n{color:#0369a1}:root[data-theme="light"] #ds-suggestions .ds-vh.w{color:#b45309}:root[data-theme="light"] #ds-suggestions .ds-vh.b{color:#be123c}:root[data-theme="light"] #ds-suggestions .ds-vh.m{color:#475569}
    /* domínio monospace com TLD esbatido */
    #ds-suggestions .ds-dom{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;font-weight:600;color:#e2e8f0}
    :root[data-theme="light"] #ds-suggestions .ds-dom{color:#1e293b}
    #ds-suggestions .ds-dom .tld{opacity:.5;font-weight:500}
    /* pílula de estado (outline, uppercase) — AVAILABLE / TAKEN / FLAGGED */
    #ds-suggestions .ds-stat{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:2.5px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
    #ds-suggestions .ds-stat.g{color:#5eead4;background:rgba(45,212,191,.1)}#ds-suggestions .ds-stat.w{color:#fcd34d;background:rgba(251,191,36,.1)}#ds-suggestions .ds-stat.b{color:#fb7185;background:rgba(251,69,112,.12)}
    :root[data-theme="light"] #ds-suggestions .ds-stat.g{color:#0f766e}:root[data-theme="light"] #ds-suggestions .ds-stat.w{color:#b45309}:root[data-theme="light"] #ds-suggestions .ds-stat.b{color:#be123c}
    /* chips de TLD mono + nota */
    #ds-suggestions .ds-tld{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;padding:2px 7px;border-radius:7px;border:1px solid rgba(130,150,175,.2);color:#94a3b8}
    #ds-suggestions .ds-tld.ok{color:#5eead4;border-color:rgba(45,212,191,.3)}#ds-suggestions .ds-tld.no{color:#64748b;text-decoration:line-through;opacity:.6}
    #ds-suggestions .ds-tld.sale{color:#fbbf24;border-color:rgba(251,191,36,.38);background:rgba(251,191,36,.08)}#ds-suggestions .ds-tld.sale b{color:#fcd34d;font-weight:700}
    :root[data-theme="light"] #ds-suggestions .ds-tld{color:#475569;border-color:rgba(80,100,130,.28)}:root[data-theme="light"] #ds-suggestions .ds-tld.ok{color:#0f766e}
    :root[data-theme="light"] #ds-suggestions .ds-tld.sale{color:#b45309}:root[data-theme="light"] #ds-suggestions .ds-tld.sale b{color:#92400e}
    /* linha de resumo em texto (substitui as barras de score) */
    #ds-suggestions .ds-summary{font-size:11.5px;line-height:1.5;color:#94a3b8}
    :root[data-theme="light"] #ds-suggestions .ds-summary{color:#64748b}
    /* botão primário preenchido na cor do tom */
    #ds-suggestions .ds-primary{font-size:12px;font-weight:600;padding:7px 14px;border-radius:9px;border:1px solid transparent;transition:filter .15s ease}
    #ds-suggestions .ds-primary:hover{filter:brightness(1.08)}
    #ds-suggestions .ds-primary.g{background:#2dd4bf;color:#04231f;border-color:#5eead4}
    #ds-suggestions .ds-primary.n{background:#38bdf8;color:#04212e;border-color:#7dd3fc}
    #ds-suggestions .ds-primary.w{background:#fbbf24;color:#2a1e02;border-color:#fcd34d}
    #ds-suggestions .ds-primary.b{background:#fb4570;color:#2a0713;border-color:#fb7185}
    #ds-suggestions .ds-primary.m{background:#5b6b82;color:#f8fafc;border-color:#7c8aa0}
    /* ===== KPI tiles premium (topo do Scout) — ícone-chip + tom + sub-métrica + profundidade ===== */
    .ds-kpi{--k:transparent;position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:16px;
      background-color:#131a2b;background-image:radial-gradient(320px 170px at 90% -35%,var(--k),transparent 62%),linear-gradient(160deg,rgba(255,255,255,.055),transparent 46%);
      border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 38px -26px rgba(0,0,0,.6);transition:transform .18s ease,box-shadow .18s ease}
    .ds-kpi:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 26px 46px -26px rgba(0,0,0,.7)}
    :root[data-theme="light"] .ds-kpi{background-color:#fff;background-image:radial-gradient(320px 170px at 90% -35%,var(--k),transparent 62%),linear-gradient(160deg,rgba(255,255,255,.7),transparent 44%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 32px -24px rgba(30,45,70,.28)}
    .ds-kpi-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-size:20px;flex-shrink:0;border:1px solid transparent}
    .ds-kpi-label{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#64748b;font-weight:700}
    .ds-kpi-num{font-size:30px;line-height:1.02;font-weight:800;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
    .ds-kpi-sub{font-size:11px;color:#64748b;margin-top:4px;font-weight:500}
    .ds-kpi.k-sky{--k:rgba(56,189,248,.15)}.ds-kpi.k-sky .ds-kpi-icon{color:#7dd3fc;background:rgba(56,189,248,.13);border-color:rgba(56,189,248,.28)}.ds-kpi.k-sky .ds-kpi-num{color:#e2e8f0}
    .ds-kpi.k-teal{--k:rgba(45,212,191,.17)}.ds-kpi.k-teal .ds-kpi-icon{color:#5eead4;background:rgba(45,212,191,.13);border-color:rgba(45,212,191,.28)}.ds-kpi.k-teal .ds-kpi-num{color:#5eead4}
    .ds-kpi.k-amber{--k:rgba(251,191,36,.15)}.ds-kpi.k-amber .ds-kpi-icon{color:#fcd34d;background:rgba(251,191,36,.13);border-color:rgba(251,191,36,.28)}.ds-kpi.k-amber .ds-kpi-num{color:#fcd34d}
    .ds-kpi.k-violet{--k:rgba(167,139,250,.15)}.ds-kpi.k-violet .ds-kpi-icon{color:#c4b5fd;background:rgba(167,139,250,.13);border-color:rgba(167,139,250,.28)}.ds-kpi.k-violet .ds-kpi-num{color:#c4b5fd}
    :root[data-theme="light"] .ds-kpi.k-sky .ds-kpi-num{color:#0f172a}:root[data-theme="light"] .ds-kpi.k-sky .ds-kpi-icon{color:#0284c7}
    :root[data-theme="light"] .ds-kpi.k-teal .ds-kpi-num{color:#0f766e}:root[data-theme="light"] .ds-kpi.k-teal .ds-kpi-icon{color:#0d9488}
    :root[data-theme="light"] .ds-kpi.k-amber .ds-kpi-num{color:#b45309}:root[data-theme="light"] .ds-kpi.k-amber .ds-kpi-icon{color:#d97706}
    :root[data-theme="light"] .ds-kpi.k-violet .ds-kpi-num{color:#6d28d9}:root[data-theme="light"] .ds-kpi.k-violet .ds-kpi-icon{color:#7c3aed}
    /* ===== Cabeçalho BENTO (direção escolhida — grelha assimétrica) ===== */
    #ds-bento{--cell:#151d30;--cell2:#111827;--cink:#e7edf6;--csub:#cbd5e1;--cmut:#64748b;--ctrack:rgba(148,163,184,.10);
      display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px}
    :root[data-theme="light"] #ds-bento{--cell:#ffffff;--cell2:#f6f9fc;--cink:#1e293b;--csub:#334155;--cmut:#64748b;--ctrack:rgba(80,100,130,.13)}
    #ds-bento .cell{position:relative;overflow:hidden;border-radius:20px;padding:18px 20px;color:var(--cink);
      background:linear-gradient(180deg,var(--cell),var(--cell2));border:1px solid var(--border);
      box-shadow:0 14px 32px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04)}
    :root[data-theme="light"] #ds-bento .cell{box-shadow:0 14px 30px -22px rgba(30,45,70,.32),inset 0 1px 0 rgba(255,255,255,.9)}
    #ds-bento .cell::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
      background:radial-gradient(120% 82% at 12% -8%,rgba(var(--tone),.13),transparent 58%)}
    #ds-bento .cell::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
      background:linear-gradient(180deg,rgba(var(--tone),.9),rgba(var(--tone),.22))}
    #ds-bento .featured{--tone:45,212,191;grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column}
    #ds-bento .avg{--tone:251,191,36;grid-column:2 / 4;grid-row:1;display:flex;flex-direction:column}
    #ds-bento .bought{--tone:167,139,250;grid-column:2 / 4;grid-row:2;display:flex;flex-direction:row;align-items:stretch;gap:22px}
    #ds-bento .board{--tone:45,212,191;grid-column:1 / 4;grid-row:3;display:flex;flex-direction:column}
    #ds-bento .c-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
    #ds-bento .c-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--cmut)}
    #ds-bento .c-eyebrow2{font-size:10.5px;font-weight:600;color:var(--cmut);opacity:.85}
    #ds-bento .c-foot{font-size:11.5px;color:var(--cmut);margin-top:auto;padding-top:8px}
    #ds-bento .c-foot b{color:var(--csub);font-weight:600}
    /* donut + legenda */
    #ds-bento .feat-body{flex:1;display:flex;align-items:center;gap:24px;padding-top:8px;min-width:0}
    #ds-bento .donut-wrap{position:relative;width:168px;height:168px;flex:0 0 auto}
    #ds-bento .donut-svg,#ds-bento .donut-svg svg{width:168px;height:168px;display:block}
    #ds-bento .donut-svg svg{filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
    #ds-bento .donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
    #ds-bento .donut-center .big{font-size:50px;font-weight:800;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
      background:linear-gradient(180deg,#f0fdfa,#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent}
    :root[data-theme="light"] #ds-bento .donut-center .big{background:linear-gradient(180deg,#0f766e,#14b8a6);-webkit-background-clip:text;background-clip:text}
    #ds-bento .donut-center .sub{font-size:10.5px;color:var(--cmut);margin-top:5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
    #ds-bento .legend{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
    #ds-bento .lg{display:grid;grid-template-columns:11px 1fr auto;align-items:center;gap:10px}
    #ds-bento .lg .sw{width:11px;height:11px;border-radius:4px}
    #ds-bento .lg .rng{font-size:12.5px;color:var(--csub);font-weight:600;white-space:nowrap}
    #ds-bento .lg .rng em{color:var(--cmut);font-style:normal;font-weight:500;font-size:11px;margin-left:5px}
    #ds-bento .lg .val{font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
    #ds-bento .lg .bar{grid-column:1 / -1;height:4px;border-radius:3px;background:var(--ctrack);overflow:hidden;margin-top:-3px}
    #ds-bento .lg .bar > i{display:block;height:100%;border-radius:3px}
    /* KPI cells */
    #ds-bento .kpi-num{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--cink)}
    #ds-bento .kpi-num .of{font-size:15px;font-weight:600;color:var(--cmut);margin-left:3px;letter-spacing:0}
    #ds-bento .free .kpi-main,#ds-bento .freeorg .kpi-main{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 4px}
    #ds-bento .dsring,#ds-bento .dsring svg{width:66px;height:66px;display:block;flex:0 0 auto}
    #ds-bento .dsring{position:relative}
    #ds-bento .dsring .rc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#38bdf8;letter-spacing:-.02em}
    :root[data-theme="light"] #ds-bento .dsring .rc{color:#0284c7}
    #ds-bento .avg .kpi-main{padding:9px 0 8px}
    #ds-bento .gauge{margin-top:auto}
    #ds-bento .gauge svg{width:100%;height:34px;display:block}
    #ds-bento .gauge .lab{display:flex;justify-content:space-between;font-size:9.5px;color:var(--cmut);margin-top:2px}
    #ds-bento .gauge .lab .mid{color:#d97706;font-weight:700}
    :root[data-theme="dark"] #ds-bento .gauge .lab .mid,#ds-bento .gauge .lab .mid{color:#fbbf24;font-weight:700}
    /* comprados + pipeline */
    #ds-bento .bought .b-left{flex:0 0 150px;display:flex;flex-direction:column}
    #ds-bento .bought .b-right{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px;padding-left:22px;border-left:1px solid var(--border)}
    #ds-bento .funnel-h{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--cmut);margin-bottom:1px}
    #ds-bento .frow{display:grid;grid-template-columns:88px 1fr 34px;align-items:center;gap:12px}
    #ds-bento .frow .fl{font-size:11.5px;color:var(--csub);font-weight:600}
    #ds-bento .frow .ftrack{height:14px;border-radius:7px;background:var(--ctrack);overflow:hidden}
    #ds-bento .frow .ftrack > i{display:block;height:100%;border-radius:7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
    #ds-bento .frow .fv{font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
    /* leaderboard */
    #ds-bento .board-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
    #ds-bento .board-sub{font-size:11px;color:var(--cmut)}
    #ds-bento .board-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
    #ds-bento .brow{display:grid;grid-template-columns:20px 1fr 92px 32px;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--ctrack)}
    #ds-bento .brow.r0,#ds-bento .brow.r1{border-top:none}
    #ds-bento .brow .rk{font-size:11px;font-weight:700;color:var(--cmut);text-align:center;font-family:ui-monospace,Menlo,monospace}
    #ds-bento .brow .dm{font-size:13px;font-weight:600;color:var(--cink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
    #ds-bento .brow .dm .tld{color:var(--cmut);font-weight:500}
    #ds-bento .brow .sbar{height:6px;border-radius:4px;background:var(--ctrack);overflow:hidden}
    #ds-bento .brow .sbar > i{display:block;height:100%;border-radius:4px}
    #ds-bento .brow .sc{font-size:13px;font-weight:800;text-align:right;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
    #ds-bento .t-teal{color:#2dd4bf}#ds-bento .t-sky{color:#38bdf8}#ds-bento .t-amber{color:#fbbf24}#ds-bento .t-rose{color:#fb7185}
    :root[data-theme="light"] #ds-bento .t-teal{color:#0f766e}:root[data-theme="light"] #ds-bento .t-sky{color:#0369a1}:root[data-theme="light"] #ds-bento .t-amber{color:#b45309}:root[data-theme="light"] #ds-bento .t-rose{color:#be123c}
    @media(max-width:1024px){#ds-bento{grid-template-columns:1fr 1fr}#ds-bento .featured{grid-column:1 / 3;grid-row:auto}#ds-bento .free{grid-column:1;grid-row:auto}#ds-bento .freeorg{grid-column:2;grid-row:auto}#ds-bento .avg{grid-column:1 / 3;grid-row:auto}#ds-bento .bought{grid-column:1 / 3;grid-row:auto}#ds-bento .board{grid-column:1 / 3;grid-row:auto}}
    @media(max-width:640px){#ds-bento{grid-template-columns:1fr}#ds-bento .cell{grid-column:1 !important}#ds-bento .feat-body{flex-direction:column;align-items:flex-start}#ds-bento .board-grid{grid-template-columns:1fr}#ds-bento .bought{flex-direction:column;gap:14px}#ds-bento .bought .b-right{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:12px}}
    /* ===== Modal de detalhe — DOSSIER de 2 colunas (direção escolhida) ===== */
    #ds-detail-modal{--dink:#e7edf6;--dsub:#94a3b8;--dmut:#64748b;--dpanel:#131a2b;--dunder:#0f1524;--dbd:rgba(148,163,184,.10);--dtrack:rgba(148,163,184,.12)}
    :root[data-theme="light"] #ds-detail-modal{--dink:#1e293b;--dsub:#475569;--dmut:#64748b;--dpanel:#ffffff;--dunder:#f6f9fc;--dbd:rgba(80,100,130,.14);--dtrack:rgba(80,100,130,.14)}
    #ds-detail-modal .dsd-panel{border-radius:22px;border:1px solid var(--dbd);color:var(--dink);background:linear-gradient(180deg,#141c2e 0%,var(--dpanel) 42%,var(--dunder) 100%);box-shadow:0 40px 90px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04)}
    :root[data-theme="light"] #ds-detail-modal .dsd-panel{background:linear-gradient(180deg,#fff,#f6f9fc);box-shadow:0 40px 90px -40px rgba(30,45,70,.4)}
    #ds-detail-modal .dsd-close{position:absolute;top:14px;right:14px;z-index:5;width:32px;height:32px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;background:rgba(148,163,184,.08);border:1px solid var(--dbd);color:var(--dsub);transition:.15s}
    #ds-detail-modal .dsd-close:hover{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.4);color:#fecdd3}
    #ds-detail-modal .dsd-grid{display:grid;grid-template-columns:296px 1fr}
    #ds-detail-modal .dsd-radar{height:212px;margin:2px 0 10px}
    #ds-detail-modal .dsd-left{padding:24px 22px;border-right:1px solid var(--dbd);background:linear-gradient(180deg,rgba(56,189,248,.03),transparent 220px)}
    #ds-detail-modal .dsd-right{padding:24px 24px;background:rgba(6,10,20,.28)}
    :root[data-theme="light"] #ds-detail-modal .dsd-right{background:rgba(80,100,130,.03)}
    #ds-detail-modal .dsd-badges{display:flex;gap:6px;margin-bottom:11px;flex-wrap:wrap}
    #ds-detail-modal .dsd-domain{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.15;overflow-wrap:anywhere;color:var(--dink)}
    #ds-detail-modal .dsd-tldx{color:var(--dmut)}
    #ds-detail-modal .dsd-subline{font-size:12px;color:var(--dmut);margin-top:5px}
    #ds-detail-modal .dsd-gauge{display:flex;justify-content:center;margin:14px 0 4px}
    #ds-detail-modal .dsd-cap{text-align:center;font-size:11px;font-weight:700;letter-spacing:.03em}
    #ds-detail-modal .dsd-tone.g{color:#5eead4}#ds-detail-modal .dsd-tone.n{color:#7dd3fc}#ds-detail-modal .dsd-tone.w{color:#fcd34d}#ds-detail-modal .dsd-tone.b{color:#fb7185}#ds-detail-modal .dsd-tone.m{color:#cbd5e1}
    :root[data-theme="light"] #ds-detail-modal .dsd-tone.g{color:#0f766e}:root[data-theme="light"] #ds-detail-modal .dsd-tone.n{color:#0369a1}:root[data-theme="light"] #ds-detail-modal .dsd-tone.w{color:#b45309}:root[data-theme="light"] #ds-detail-modal .dsd-tone.b{color:#be123c}:root[data-theme="light"] #ds-detail-modal .dsd-tone.m{color:#475569}
    #ds-detail-modal .dsd-rec{margin-top:15px;padding:13px 14px;border-radius:13px;background:linear-gradient(135deg,rgba(45,212,191,.13),rgba(56,189,248,.06));border:1px solid rgba(45,212,191,.3)}
    #ds-detail-modal .dsd-rec.tone-warn{background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(251,146,60,.05));border-color:rgba(251,191,36,.3)}
    #ds-detail-modal .dsd-rec.tone-bad{background:linear-gradient(135deg,rgba(251,69,112,.12),rgba(239,35,60,.05));border-color:rgba(251,69,112,.3)}
    #ds-detail-modal .dsd-rec.tone-neutral{background:linear-gradient(135deg,rgba(56,189,248,.12),rgba(45,212,191,.05));border-color:rgba(56,189,248,.3)}
    #ds-detail-modal .dsd-rec-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dmut)}
    #ds-detail-modal .dsd-rec-head{font-size:19px;font-weight:800;margin:2px 0 5px;letter-spacing:-.01em}
    #ds-detail-modal .dsd-rec-sub{font-size:12px;color:var(--dsub);line-height:1.5}
    #ds-detail-modal .dsd-sig{margin-top:15px;border:1px solid var(--dbd);border-radius:13px;overflow:hidden}
    #ds-detail-modal .dsd-sig-block{padding:11px 13px}
    #ds-detail-modal .dsd-sig-block+.dsd-sig-block{border-top:1px solid var(--dbd)}
    #ds-detail-modal .dsd-sig-title{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
    #ds-detail-modal .dsd-buy .dsd-sig-title{color:#2dd4bf}#ds-detail-modal .dsd-risk .dsd-sig-title{color:#fb7185}
    :root[data-theme="light"] #ds-detail-modal .dsd-buy .dsd-sig-title{color:#0f766e}:root[data-theme="light"] #ds-detail-modal .dsd-risk .dsd-sig-title{color:#be123c}
    #ds-detail-modal .dsd-sig-count{font-weight:700;padding:1px 6px;border-radius:20px;font-size:10px;font-family:ui-monospace,Menlo,monospace}
    #ds-detail-modal .dsd-buy .dsd-sig-count{background:rgba(45,212,191,.15);color:#5eead4}#ds-detail-modal .dsd-risk .dsd-sig-count{background:rgba(251,113,133,.15);color:#fb7185}
    #ds-detail-modal .dsd-sig-item{display:flex;gap:8px;font-size:12px;color:var(--dsub);padding:3px 0;align-items:flex-start}
    #ds-detail-modal .dsd-ico{flex:none;width:14px;text-align:center;font-weight:800}
    #ds-detail-modal .dsd-buy .dsd-ico{color:#2dd4bf}#ds-detail-modal .dsd-risk .dsd-ico{color:#fb7185}
    #ds-detail-modal .dsd-ctas{margin-top:15px;display:flex;flex-direction:column;gap:8px}
    #ds-detail-modal .dsd-btn{width:100%;cursor:pointer;border-radius:11px;font-size:13px;font-weight:700;padding:11px 14px;border:1px solid transparent;text-align:center;transition:.15s;display:block}
    #ds-detail-modal .dsd-primary{color:#04211c;background:linear-gradient(120deg,#2dd4bf,#38bdf8);box-shadow:0 12px 26px -14px rgba(45,212,191,.7)}
    #ds-detail-modal .dsd-primary:hover{filter:brightness(1.06)}
    #ds-detail-modal .dsd-secondary{color:#5eead4;background:rgba(45,212,191,.06);border-color:rgba(45,212,191,.28)}
    :root[data-theme="light"] #ds-detail-modal .dsd-secondary{color:#0f766e}
    #ds-detail-modal .dsd-secondary:hover{background:rgba(45,212,191,.12)}
    #ds-detail-modal .dsd-btn-row{display:flex;gap:8px}
    #ds-detail-modal .dsd-ghost{flex:1;background:rgba(148,163,184,.05);border-color:var(--dbd);color:var(--dsub);font-weight:600;font-size:12.5px;padding:9px}
    #ds-detail-modal .dsd-acc:hover{border-color:rgba(45,212,191,.4);color:#5eead4}#ds-detail-modal .dsd-rej:hover{border-color:rgba(251,113,133,.4);color:#fb7185}
    #ds-detail-modal .dsd-meta{margin-top:16px;border-top:1px solid var(--dbd);padding-top:13px}
    #ds-detail-modal .dsd-meta-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:12px}
    #ds-detail-modal .dsd-mk{color:var(--dmut)}#ds-detail-modal .dsd-mv{color:var(--dink);font-weight:600;text-align:right}
    #ds-detail-modal .dsd-good{color:#2dd4bf}:root[data-theme="light"] #ds-detail-modal .dsd-good{color:#0f766e}
    #ds-detail-modal .dsd-brandwarn{margin-top:9px;display:flex;gap:7px;font-size:11.5px;line-height:1.4;color:#fcd9b6;background:rgba(251,146,60,.08);border:1px solid rgba(251,146,60,.22);padding:8px 10px;border-radius:9px}
    :root[data-theme="light"] #ds-detail-modal .dsd-brandwarn{color:#b45309;background:rgba(251,146,60,.1)}
    #ds-detail-modal .dsd-brandwarn .dsd-ico{color:#fbbf24;flex:none}
    #ds-detail-modal .dsd-sec+.dsd-sec{margin-top:20px;padding-top:18px;border-top:1px solid var(--dbd)}
    #ds-detail-modal .dsd-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
    #ds-detail-modal .dsd-sec-title{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dsub)}
    #ds-detail-modal .dsd-chg{font-weight:700;font-size:11px}
    #ds-detail-modal .dsd-comp{font-size:11px;color:var(--dmut)}#ds-detail-modal .dsd-comp b{color:#2dd4bf;font-weight:700}
    :root[data-theme="light"] #ds-detail-modal .dsd-comp b{color:#0f766e}
    #ds-detail-modal .dsd-toggle{display:flex;gap:3px;background:rgba(148,163,184,.06);border:1px solid var(--dbd);border-radius:9px;padding:3px}
    #ds-detail-modal .dsd-toggle .ds-chart-p{font-size:11px;font-weight:700;color:var(--dmut);padding:4px 9px;border-radius:6px;cursor:pointer;border:none;background:none;transition:.12s}
    #ds-detail-modal .dsd-toggle .ds-chart-p.dsd-on{color:#04211c;background:linear-gradient(120deg,#2dd4bf,#38bdf8)}
    #ds-detail-modal .dsd-subs{display:flex;flex-direction:column;gap:9px}
    #ds-detail-modal .dsd-sub{display:grid;grid-template-columns:88px 1fr 34px;align-items:center;gap:11px}
    #ds-detail-modal .dsd-sub-name{font-size:12.5px;color:var(--dsub);font-weight:500}
    #ds-detail-modal .dsd-sub-track{height:8px;border-radius:99px;background:var(--dtrack);overflow:hidden}
    #ds-detail-modal .dsd-sub-track>i{display:block;height:100%;border-radius:99px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
    #ds-detail-modal .dsd-sub-val{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:700;text-align:right}
    #ds-detail-modal .dsd-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    #ds-detail-modal .dsd-fcell{background:rgba(148,163,184,.04);border:1px solid var(--dbd);border-radius:10px;padding:9px 11px}
    :root[data-theme="light"] #ds-detail-modal .dsd-fcell{background:rgba(80,100,130,.04)}
    #ds-detail-modal .dsd-wide{grid-column:1 / -1}
    #ds-detail-modal .dsd-fk{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dmut);display:inline-flex;align-items:center}
    #ds-detail-modal .dsd-fk .dsd-fico{font-size:12px;opacity:.6;margin-right:4px}
    #ds-detail-modal .dsd-fv{font-size:13.5px;font-weight:700;color:var(--dink);margin-top:3px}
    #ds-detail-modal .dsd-fv small{font-size:11px;font-weight:600;color:var(--dsub)}
    #ds-detail-modal .dsd-t{color:#2dd4bf}#ds-detail-modal .dsd-a{color:#fbbf24}#ds-detail-modal .dsd-s{color:#38bdf8}#ds-detail-modal .dsd-r{color:#fb7185}
    :root[data-theme="light"] #ds-detail-modal .dsd-t{color:#0f766e}:root[data-theme="light"] #ds-detail-modal .dsd-a{color:#b45309}:root[data-theme="light"] #ds-detail-modal .dsd-s{color:#0369a1}:root[data-theme="light"] #ds-detail-modal .dsd-r{color:#be123c}
    #ds-detail-modal .dsd-mono{font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
    /* #4 tendência de autoridade */
    #ds-detail-modal .dsd-bad{color:#fb7185}:root[data-theme="light"] #ds-detail-modal .dsd-bad{color:#be123c}
    #ds-detail-modal .dsd-trend{margin-top:10px;padding-top:10px;border-top:1px solid var(--dbd)}
    #ds-detail-modal .dsd-trend-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dmut)}
    #ds-detail-modal .dsd-trend-head .dsd-fico{font-size:12px;opacity:.6;margin-right:4px}
    #ds-detail-modal .dsd-trend-note{font-variant-numeric:tabular-nums;letter-spacing:0}
    #ds-detail-modal .dsd-trend-chart{height:96px;margin-top:4px}
    #ds-detail-modal .dsd-tlds{display:flex;gap:8px;flex-wrap:wrap}
    #ds-detail-modal .dsd-tld{flex:1;min-width:92px;display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:11px;border:1px solid var(--dbd);background:rgba(148,163,184,.04)}
    #ds-detail-modal .dsd-tld-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--dmut)}
    #ds-detail-modal .dsd-tld-name{font-size:13px;font-weight:700;color:var(--dink);font-family:ui-monospace,Menlo,monospace}
    #ds-detail-modal .dsd-tld-state{font-size:10px;color:var(--dsub);margin-left:auto}
    #ds-detail-modal .dsd-free{border-color:rgba(45,212,191,.28);background:rgba(45,212,191,.06)}
    #ds-detail-modal .dsd-free .dsd-tld-dot{background:#2dd4bf;box-shadow:0 0 8px rgba(45,212,191,.7)}
    #ds-detail-modal .dsd-free .dsd-tld-state{color:#5eead4}:root[data-theme="light"] #ds-detail-modal .dsd-free .dsd-tld-state{color:#0f766e}
    #ds-detail-modal .dsd-taken{border-color:rgba(251,113,133,.22)}#ds-detail-modal .dsd-taken .dsd-tld-dot{background:#fb7185}#ds-detail-modal .dsd-taken .dsd-tld-state{color:#fb7185}
    #ds-detail-modal .dsd-unk .dsd-tld-dot{background:#fbbf24}#ds-detail-modal .dsd-unk .dsd-tld-state{color:#fbbf24}
    #ds-detail-modal .dsd-sale{border-color:rgba(251,191,36,.38);background:rgba(251,191,36,.07)}#ds-detail-modal .dsd-sale .dsd-tld-dot{background:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.6)}#ds-detail-modal .dsd-sale .dsd-tld-state{color:#fbbf24;font-weight:700}:root[data-theme="light"] #ds-detail-modal .dsd-sale .dsd-tld-state{color:#b45309}
    #ds-detail-modal .dsd-reasoning{font-size:12px;color:var(--dsub);line-height:1.55;border-left:2px solid rgba(167,139,250,.4);padding-left:11px}
    @media(max-width:720px){#ds-detail-modal .dsd-grid{grid-template-columns:1fr}#ds-detail-modal .dsd-left{border-right:none;border-bottom:1px solid var(--dbd)}}
    /* #mobile-scout-modal — largura de lado no telemóvel não estava "fixa": um filho largo (o
       canvas do gráfico radar, largura fixa em px) forçava o track da grelha a ficar mais largo
       que a coluna porque os filhos de grid têm min-width:auto por defeito. Combinado com o
       #ds-detail-body ter overflow-y:auto (que a spec promove a overflow-x:auto) + no-scrollbar,
       dava scroll horizontal INVISÍVEL. Defesa em profundidade: (1) min-width:0 deixa os tracks
       encolher abaixo do min-content dos filhos; (2) o gráfico nunca passa da coluna;
       (3) o corpo do modal CORTA o eixo-x (mata o scroll fantasma). Ver [[mobile-overflow-gotcha]]. */
    #ds-detail-modal .dsd-grid,#ds-detail-modal .dsd-left,#ds-detail-modal .dsd-right{min-width:0}
    #ds-detail-modal .dsd-radar,#ds-detail-modal .dsd-radar canvas{max-width:100%}
    #ds-detail-body{overflow-x:hidden}
    /* Pílulas de país a orbitar o globo (overlay HTML projetado pela câmara do echarts-gl) */
    .globe-pills{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
    .globe-pill{position:absolute;left:0;top:0;opacity:0;display:inline-flex;align-items:center;gap:6px;
      padding:4px 10px 4px 7px;border-radius:999px;white-space:nowrap;will-change:transform,opacity;
      background:rgba(8,18,30,.72);border:1px solid rgba(94,234,212,.5);
      box-shadow:0 4px 16px rgba(0,0,0,.45),0 0 0 1px rgba(45,212,191,.08),0 0 18px rgba(45,212,191,.12);
      -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .18s linear}
    .globe-pill .gp-flag{font-size:14px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
    .globe-pill .gp-name{font-size:12px;font-weight:700;letter-spacing:.01em;color:#eafcf6;
      font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
    .globe-pill.gp-light{background:rgba(255,255,255,.92);border-color:rgba(13,118,110,.42);
      box-shadow:0 4px 14px rgba(15,23,42,.16),0 0 14px rgba(20,160,140,.14)}
    .globe-pill.gp-light .gp-name{color:#0b2b27}
    .globe-pill .gp-trend{font-size:9px;line-height:1;margin-left:1px}
    .globe-pill .gp-trend.gp-up{color:#34d399;filter:drop-shadow(0 0 4px rgba(52,211,153,.6))}
    .globe-pill .gp-trend.gp-down{color:#fb7185;filter:drop-shadow(0 0 4px rgba(251,113,133,.5))}
    @media (prefers-reduced-motion: reduce){.globe-pill{transition:none}}

    /* ===== Landings — vista grelha (favicon + imagem de preview og:image) ===== */
    .ls-viewbtn{width:30px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:#94a3b8}
    .ls-viewbtn.active{background:rgba(45,212,191,.15);color:#2dd4bf}
    [data-theme="light"] .ls-viewbtn{color:#64748b}[data-theme="light"] .ls-viewbtn.active{background:rgba(13,148,136,.12);color:#0d9488}
    .ls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
    .ls-gcard{transition:transform .12s,box-shadow .12s}
    .ls-gcard:hover{transform:translateY(-2px)}
    .ls-gcard-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#1e293b,#0f172a)}
    [data-theme="light"] .ls-gcard-img{background:linear-gradient(135deg,#e2e8f0,#cbd5e1)}
    .ls-og{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
    .ls-gcard-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,transparent 35%,transparent 55%,rgba(0,0,0,.72) 100%)}
    .ls-gcard-head{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;display:flex;align-items:center;gap:8px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
    .ls-gcard-head img{border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
    .ls-gcard-badges{position:absolute;top:10px;right:10px;z-index:2;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
    .ls-gcheck{position:absolute;top:10px;left:10px;z-index:3}
    .ls-gcheck input{width:18px;height:18px}

    /* ===== Inbox (Mailwatch) — split-pane premium, theme-aware ===== */
    :root, :root[data-theme="dark"]{
      --m-line:rgba(255,255,255,.08); --m-line2:rgba(255,255,255,.055);
      --m-surface:#141b2c; --m-listbg:rgba(255,255,255,.015); --m-hover:rgba(255,255,255,.04);
      --m-unread:rgba(45,212,191,.06); --m-sel:rgba(45,212,191,.13);
      --m-ink:#f1f5f9; --m-ink2:#cbd5e1; --m-muted:#94a3b8; --m-faint:#64748b;
      --m-chip:rgba(255,255,255,.08); --m-accent:#2dd4bf;
    }
    :root[data-theme="light"]{
      --m-line:rgba(15,23,42,.1); --m-line2:rgba(15,23,42,.07);
      --m-surface:#ffffff; --m-listbg:#fbfcfe; --m-hover:rgba(15,23,42,.035);
      --m-unread:rgba(13,148,136,.05); --m-sel:rgba(13,148,136,.1);
      --m-ink:#0f172a; --m-ink2:#334155; --m-muted:#64748b; --m-faint:#94a3b8;
      --m-chip:rgba(15,23,42,.06); --m-accent:#0d9488;
    }
    #mail-tabs .mail-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--m-muted);white-space:nowrap;transition:background .12s,color .12s;border:1px solid transparent}
    #mail-tabs .mail-tab:hover{background:var(--m-hover);color:var(--m-ink)}
    #mail-tabs .mail-tab-on{background:var(--m-sel);color:var(--m-accent);border-color:transparent;font-weight:600}
    #mail-tabs .mail-tab-n{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--m-chip);color:var(--m-muted);min-width:18px;text-align:center}
    #mail-tabs .mail-tab-n-red{background:rgba(239,68,68,.16);color:#ef4444}
    .mail-listwrap{border-radius:16px;overflow:hidden}
    .mail-groush{padding:9px 16px 5px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--m-faint)}
    .mail-row{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;border-top:1px solid var(--m-line2);cursor:pointer;transition:background .1s;position:relative}
    .mail-row:hover{background:var(--m-hover)}
    .mail-groush + .mail-row, .mail-listwrap > .mail-row:first-child{border-top:none}
    .mail-unread{background:var(--m-unread)}
    /* lido/não-lido claro: não-lido = ponto de acento + negrito + tom; lido = esbatido */
    .mail-row:not(.mail-unread) .mail-from, .mail-row:not(.mail-unread) .mail-subj{opacity:.82}
    .mail-unreaddot{width:7px;height:7px;border-radius:50%;background:var(--m-accent);flex-shrink:0}
    .mail-star{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--m-faint);background:none;border:none;cursor:pointer;transition:color .12s,transform .1s;margin-top:1px}
    .mail-star:hover{color:#f59e0b;transform:scale(1.15)}
    .mail-star.on{color:#f59e0b}
    .mail-av{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;line-height:1}
    .mail-from{font-size:13px;color:var(--m-muted)}
    .mail-unread .mail-from{color:var(--m-ink);font-weight:650}
    .mail-date{font-size:11px;color:var(--m-faint)}
    .mail-subj{font-size:13px;margin-top:1px;color:var(--m-muted)}
    .mail-unread .mail-subj{color:var(--m-ink);font-weight:600}
    .mail-snip{font-size:12px;color:var(--m-faint);margin-top:1px}
    .mail-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:500;padding:1.5px 7px;border-radius:999px;background:var(--m-chip);color:var(--m-muted);white-space:nowrap;flex-shrink:0}
    .mail-chip img{width:12px;height:12px;border-radius:3px}
    .mail-chip-dim{opacity:.6}
    .mail-urg-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.5)}
    .mail-frombar{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--m-muted);padding:8px 14px;background:var(--m-sel);border-bottom:1px solid var(--m-line2)}
    .mail-clearx{margin-left:auto;width:20px;height:20px;border-radius:6px;background:var(--m-chip);color:var(--m-ink);font-size:11px}
    .mail-clip{font-size:11px;opacity:.6;flex-shrink:0}
    /* densidade compacta */
    .mail-compact .mail-row{padding:7px 14px;gap:9px;align-items:center}
    .mail-compact .mail-av{width:24px;height:24px;font-size:11px}
    .mail-compact .mail-snip{display:none}
    .mail-compact .mail-subj{margin-top:0}
    .mail-compact .mail-star{width:18px;height:18px;font-size:13px;margin-top:0}
    #mail-density-btn.active{background:var(--m-sel);color:var(--m-accent)}
    /* ===== superfície única: toolbar + tabs + split ===== */
    .mail-shell{border:1px solid var(--m-line);border-radius:18px;overflow:hidden;background:var(--m-surface);display:flex;flex-direction:column;height:calc(100vh - 178px);height:calc(100dvh - 178px);min-height:480px}
    .mail-top{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--m-line2)}
    .mail-tabsrow{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px solid var(--m-line2)}
    .mail-split{flex:1;display:grid;grid-template-columns:360px 1fr;min-height:0}
    .mail-listpane{border-right:1px solid var(--m-line2);overflow-y:auto;background:var(--m-listbg)}
    .mail-readpane{overflow:hidden;background:var(--m-surface);display:flex;flex-direction:column}
    .mail-listpane .mail-row.mail-sel{background:var(--m-sel)}
    .mail-listpane .mail-row.mail-sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--m-accent);border-radius:0 2px 2px 0}
    /* painel de leitura */
    .mr-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--m-faint);text-align:center;padding:40px}
    .mr-empty iconify-icon{font-size:40px;opacity:.4}
    .mr-head{padding:18px 22px;border-bottom:1px solid var(--m-line2)}
    .mr-subj{font-size:17px;font-weight:650;letter-spacing:-.01em;color:var(--m-ink);line-height:1.35;margin-bottom:12px;overflow-wrap:break-word}
    .mr-from{display:flex;align-items:center;gap:11px}
    .mr-fromtxt{min-width:0}
    .mr-name{font-size:13px;font-weight:600;color:var(--m-ink)}
    .mr-addr{font-weight:400;color:var(--m-faint)}
    .mr-meta{font-size:11.5px;color:var(--m-faint);margin-top:1px}
    .mr-banner{margin:14px 22px 0;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:10px;padding:10px 13px;font-size:12.5px;color:#dc2626;font-weight:500}
    :root[data-theme="dark"] .mr-banner{color:#fca5a5}
    .mr-body{flex:1;overflow-y:auto;padding:18px 22px;font-size:13.5px;line-height:1.7;color:var(--m-ink2);white-space:pre-wrap;overflow-wrap:break-word}
    .mr-act{padding:11px 16px;border-top:1px solid var(--m-line2);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
    .mr-act a.btn-mini{text-decoration:none}
    .mr-back{display:none}
    /* corpo HTML (iframe) + barra de imagens bloqueadas */
    .mr-body-html{padding:0!important;overflow:hidden;display:flex}
    .mr-iframe{flex:1;width:100%;height:100%;border:none;background:#fff}
    .mr-imgbar{display:flex;align-items:center;gap:10px;margin:12px 22px 0;padding:8px 12px;border-radius:10px;background:var(--m-hover);border:1px solid var(--m-line2);font-size:12px;color:var(--m-muted)}
    .mr-imgbar button{margin-left:auto}
    /* ===================== INBOX v2 — estado legível por cor + profundidade premium ===================== */
    /* profundidade da superfície (destaca o Inbox do fundo) */
    .mail-shell{box-shadow:0 1px 2px rgba(15,23,42,.05),0 16px 40px -18px rgba(15,23,42,.18)}
    :root:not([data-theme="light"]) .mail-shell{box-shadow:0 0 0 1px rgba(255,255,255,.02),0 28px 64px -28px rgba(0,0,0,.7)}
    /* rail de severidade por linha: URGENTE=vermelho · NÃO-LIDO=teal · selecionado ganha sempre */
    .mail-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;border-radius:0 2px 2px 0;transition:background .12s}
    .mail-row.mail-unread:not(.mail-urg)::before{background:var(--m-accent);opacity:.5}
    .mail-row.mail-urg::before{background:#ef4444}
    .mail-listpane .mail-row.mail-sel::before{background:var(--m-accent);opacity:1}
    /* tom da linha urgente (fade da esquerda) — os 27 urgentes passam a saltar à vista */
    .mail-row.mail-urg{background:linear-gradient(90deg,rgba(239,68,68,.07),rgba(239,68,68,.018) 42%,transparent)}
    .mail-row.mail-urg:hover{background:linear-gradient(90deg,rgba(239,68,68,.1),rgba(239,68,68,.03) 42%,transparent)}
    .mail-listpane .mail-row.mail-sel,.mail-listpane .mail-row.mail-sel:hover{background:var(--m-sel)}
    /* não-lido: ponto de acento com brilho subtil */
    .mail-unreaddot{box-shadow:0 0 0 3px rgba(45,212,191,.12)}
    /* avatar: gradiente + profundidade (menos plano) */
    .mail-av{box-shadow:0 1px 2px rgba(15,23,42,.1),inset 0 1px 0 rgba(255,255,255,.14);font-weight:700}
    /* tabs premium: ativa com acento + anel interior; contagem da ativa em pílula cheia */
    #mail-tabs .mail-tab{border-radius:10px}
    #mail-tabs .mail-tab-on{box-shadow:inset 0 0 0 1px rgba(45,212,191,.22)}
    #mail-tabs .mail-tab-on .mail-tab-n{background:var(--m-accent);color:#04201c}
    /* barra superior: "Verificar agora" ganha acento (ação principal) */
    #mail-poll-btn{color:var(--m-accent);background:var(--m-sel);border-color:transparent;font-weight:600}
    #mail-poll-btn:hover{background:rgba(45,212,191,.2)}
    /* leitura: cabeçalho com leve véu + Reply como ação primária */
    .mr-head{background:linear-gradient(180deg,var(--m-hover),transparent)}
    .mr-act a.btn-mini:first-child{background:var(--m-accent);color:#04201c;border-color:transparent;font-weight:600}
    .mr-act a.btn-mini:first-child:hover{filter:brightness(1.08)}
    /* dica de atalhos no painel vazio */
    .mr-kbd{margin-top:14px;display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--m-faint)}
    .mr-kbd b{display:inline-flex;min-width:18px;justify-content:center;padding:1px 6px;border-radius:5px;background:var(--m-chip);color:var(--m-muted);font-weight:600;font-family:ui-monospace,monospace;font-size:11px;margin-right:6px}
    @media (max-width:900px){
      .mail-shell{height:auto;min-height:0}
      .mail-split{grid-template-columns:1fr}
      .mail-listpane{border-right:none;max-height:calc(100vh - 300px);max-height:calc(100dvh - 300px)}
      .mail-readpane{display:none}
      /* ao abrir um email no mobile, a leitura vira overlay em ecrã cheio (acima do bottom-nav),
         com a barra de ações SEMPRE visível no fundo — como o Gmail mobile */
      .mail-reading-open .mail-top,.mail-reading-open .mail-tabsrow,.mail-reading-open .mail-listpane{display:none}
      .mail-reading-open .mail-readpane{display:flex;position:fixed;left:0;right:0;top:0;bottom:calc(58px + env(safe-area-inset-bottom));z-index:40;border:none;border-radius:0}
      .mr-back{display:inline-flex}
    }
    @media (max-width:640px){.mail-chip{display:none}.mail-av{width:30px;height:30px;font-size:13px}}

    /* ===================== iOS Safari — altura real do viewport (#mobile-dvh) =====================
       O Tailwind h-screen no <body> é height:100vh. No Safari iOS o 100vh mede o viewport GRANDE
       (como se a toolbar dinâmica estivesse escondida), por isso a app fica mais alta que o ecrã
       visível e o bottom-nav + o fundo de TODAS as secções (Scout/War Room/Inbox incluídos) ficam
       atrás da barra do Safari. dvh (dynamic viewport height) mede o viewport REAL. A 1ª linha é o
       fallback (browsers sem dvh); no desktop dvh==vh, logo é inócuo. body.h-screen bate a
       especificidade do .h-screen do Tailwind. */
    body.h-screen { height: 100vh; height: 100dvh; }

    /* ===== War Room — TERMINAL (trading-desk / command center; escuro DELIBERADO, independente do tema) ===== */
    #wr-term{--bg:#0a0e14;--pan:#0b1119;--line:rgba(120,220,170,.13);--line2:rgba(120,160,200,.10);
      --ink:#d6e2ec;--sub:#8ba0b4;--mut:#5c7488;--dim:#3c4c5c;
      --grn:#28e58a;--red:#ff4b60;--amb:#ffc857;--cyn:#37dbff;
      font-family:ui-monospace,'SF Mono','JetBrains Mono','Menlo',monospace;font-variant-numeric:tabular-nums;
      background:radial-gradient(120% 80% at 0% 0%,#0c1420 0%,var(--bg) 62%);color:var(--ink);
      border:1px solid var(--line);border-radius:16px;overflow:hidden;-webkit-font-smoothing:antialiased;
      box-shadow:0 30px 70px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.03)}
    #wr-term .wt-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;flex-wrap:wrap;
      background:linear-gradient(180deg,rgba(40,229,138,.05),transparent);border-bottom:1px solid var(--line)}
    #wr-term .wt-dot{width:9px;height:9px;border-radius:50%;background:var(--grn);box-shadow:0 0 10px var(--grn);flex:0 0 auto;animation:wt-pulse 2s ease-in-out infinite}
    @keyframes wt-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
    #wr-term .wt-title{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
    #wr-term .wt-cmd{font-size:11.5px;color:var(--mut)}#wr-term .wt-cmd b{color:var(--grn);font-weight:600}
    #wr-term .wt-spacer{flex:1 1 auto}
    #wr-term .wt-clock{font-size:11px;color:var(--sub);letter-spacing:.06em;font-variant-numeric:tabular-nums}
    #wr-term .wt-live{font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--grn);border:1px solid rgba(40,229,138,.3);border-radius:5px;padding:2px 6px}
    #wr-term .wt-btn{font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--grn);
      background:rgba(40,229,138,.08);border:1px solid rgba(40,229,138,.28);border-radius:7px;padding:5px 12px;cursor:pointer;transition:.15s}
    #wr-term .wt-btn:hover{background:rgba(40,229,138,.18)}#wr-term .wt-btn[disabled]{opacity:.5;cursor:progress}
    #wr-term .wt-body{padding:16px;display:flex;flex-direction:column;gap:14px}
    /* ===== #4 RADAR DE AMEAÇA ===== */
    #wr-radar-wrap .wt-pan{position:relative}
    #wr-radar{display:block;width:100%;height:300px}
    #wr-radar-wrap .rd-legend{position:absolute;right:12px;top:40px;display:flex;flex-direction:column;gap:5px;font-size:10px;letter-spacing:.05em;color:var(--sub);pointer-events:none}
    #wr-radar-wrap .rd-legend span{display:flex;align-items:center;gap:6px}
    #wr-radar-wrap .rd-legend i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor}
    #wr-radar-wrap .rd-count{position:absolute;left:14px;top:40px;font-size:10px;letter-spacing:.05em;color:var(--sub);pointer-events:none}
    #wr-radar-wrap .rd-count b{color:#ff4b60;font-size:22px;font-weight:700;display:block;line-height:1;font-variant-numeric:tabular-nums}
    #wr-term .wt-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    #wr-term .wt-kpi{position:relative;background:var(--pan);border:1px solid var(--line2);border-radius:11px;padding:12px 13px 12px 16px;overflow:hidden}
    #wr-term .wt-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--k,#28e58a);box-shadow:0 0 12px -1px var(--k,#28e58a)}
    #wr-term .wt-kpi .l{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
    #wr-term .wt-kpi .v{font-size:26px;font-weight:700;line-height:1;margin-top:6px}
    #wr-term .wt-stack{display:flex;flex-direction:column;gap:12px}
    #wr-term .wt-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    #wr-term .wt-pan{background:var(--pan);border:1px solid var(--line2);border-radius:12px;overflow:hidden}
    #wr-term .wt-ph{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line2);
      font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sub)}
    #wr-term .wt-ph .ico{color:var(--cyn);font-weight:400}
    #wr-term .wt-ph.alert{color:#ffb3bd;background:linear-gradient(180deg,rgba(255,75,96,.07),transparent);border-bottom-color:rgba(255,75,96,.18)}
    #wr-term .wt-ph.alert .ico{color:var(--red)}
    #wr-term .wt-ph .n{margin-left:auto;font-size:10px;color:var(--mut);letter-spacing:.04em;text-transform:none;font-weight:600}
    #wr-term .wt-list{padding:2px 14px 8px}
    #wr-term .wt-tr{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px dashed var(--line2);font-size:12.5px}
    #wr-term .wt-tr:last-child{border-bottom:0}
    #wr-term .wt-nm{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
    #wr-term .wt-nm.sub{color:var(--sub)}
    #wr-term .wt-mono{color:var(--grn);font-weight:600;flex:0 0 auto}
    #wr-term .wt-rk{font-size:10px;color:var(--mut);flex:0 0 auto}
    #wr-term .wt-sq{width:7px;height:7px;flex:0 0 auto;box-shadow:0 0 7px -1px currentColor}
    #wr-term .wt-b{font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 6px;border-radius:5px;flex:0 0 auto;white-space:nowrap}
    #wr-term .b-red{color:#ffd0d6;background:rgba(255,75,96,.13);border:1px solid rgba(255,75,96,.35)}
    #wr-term .b-amber{color:#ffe6b0;background:rgba(255,200,87,.12);border:1px solid rgba(255,200,87,.3)}
    #wr-term .b-cyan{color:#bff0ff;background:rgba(55,219,255,.1);border:1px solid rgba(55,219,255,.28)}
    #wr-term .b-green{color:#b6f5d6;background:rgba(40,229,138,.1);border:1px solid rgba(40,229,138,.28)}
    #wr-term .wt-rep{color:var(--red);text-decoration:none;flex:0 0 auto;font-size:12px}#wr-term .wt-rep:hover{color:#ffb3bd}
    #wr-term .wt-land{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 20px;padding:4px 14px 12px}
    #wr-term .wt-col{min-width:0;overflow:hidden}/* nunca deixa um badge de ameaça largo expandir a coluna → sem scroll horizontal */
    #wr-term .wt-lh{display:flex;align-items:center;gap:7px;padding:9px 0 4px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
    #wr-term .wt-empty{font-size:11px;color:var(--dim);padding:12px 0;text-align:center}
    #wr-term .wt-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
    #wr-term .wt-tbl th{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-align:right;padding:0 8px 6px;border-bottom:1px solid var(--line2)}
    #wr-term .wt-tbl th:first-child{text-align:left}
    #wr-term .wt-tbl td{padding:6px 8px;border-bottom:1px dashed var(--line2);text-align:right;color:var(--sub)}
    #wr-term .wt-tbl td:first-child{text-align:left;color:var(--ink)}
    #wr-term .wt-tbl tr:last-child td{border-bottom:0}
    #wr-term .wt-note{font-size:12px;color:var(--sub);padding:18px 16px;text-align:center;line-height:1.55;background:var(--pan);border:1px solid var(--line2);border-radius:12px}
    @media(max-width:900px){#wr-term .wt-land{grid-template-columns:1fr}#wr-term .wt-cols{grid-template-columns:1fr}#wr-term .wt-kpis{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:520px){#wr-term .wt-kpi .v{font-size:22px}#wr-term .wt-body{padding:12px}
      /* mobile: sem glows decorativos (box-shadow por linha custa a pintar no scroll) */
      #wr-term .wt-sq{box-shadow:none}#wr-term .wt-kpi::before{box-shadow:none}}
    /* ===================== APP-LOCK — ecrã de bloqueio (Face ID + PIN) + card de Configurações ===================== */
    /* Ecrãs de segurança em "Vidro Líquido" (iOS) — mundo visual próprio, claro e translúcido, independente do tema. */
    #applock-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;color:#0b1220;
      font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
      background:linear-gradient(180deg,#eaf1fb,#d5e0f0);
      background-image:radial-gradient(120vw 60vh at 22% -8%,rgba(10,132,255,.16),transparent 58%),radial-gradient(120vw 60vh at 82% 108%,rgba(45,212,191,.13),transparent 58%),linear-gradient(180deg,#eaf1fb,#d5e0f0);}
    #applock-overlay.hidden{display:none}
    .applock-box{width:100%;max-width:340px;padding:30px 24px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;
      background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
      border:1px solid rgba(255,255,255,.75);border-radius:30px;box-shadow:0 34px 80px -30px rgba(20,50,95,.42),inset 0 1px 0 rgba(255,255,255,.95)}
    .applock-logo{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#0a84ff;margin-bottom:12px;
      background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.55));border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 26px -10px rgba(10,90,180,.4),inset 0 1px 0 #fff}
    .applock-title{font-size:23px;font-weight:700;letter-spacing:-.02em;color:#0b1220;text-wrap:balance}
    .applock-sub{font-size:13.5px;color:#5a6675;margin:4px 0 20px;line-height:1.45;max-width:27ch}
    .applock-face{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:15px;font-size:15px;font-weight:600;color:#fff;
      background:linear-gradient(180deg,#3a9bff,#0a84ff);border:none;cursor:pointer;box-shadow:0 12px 26px -10px rgba(10,132,255,.6);transition:filter .15s,transform .1s}
    .applock-face:hover{filter:brightness(1.05)} .applock-face:active{transform:scale(.98)}
    .applock-usepin{margin-top:16px;background:none;border:none;color:#0a84ff;font-size:14px;font-weight:500;cursor:pointer}
    .applock-dots{display:flex;gap:14px;justify-content:center;margin:6px 0 22px}
    .applock-dots i{width:12px;height:12px;border-radius:50%;background:rgba(11,18,32,.16);transition:background .12s,transform .12s;box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}
    .applock-dots i.on{background:#0a84ff;transform:scale(1.08)}
    .applock-dots.shake{animation:alshake .42s}
    @keyframes alshake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-7px)}}
    .applock-pad{display:grid;grid-template-columns:repeat(3,74px);gap:15px;justify-content:center}
    .applock-key{width:74px;height:74px;border-radius:50%;font-size:28px;font-weight:400;color:#0b1220;cursor:pointer;display:flex;align-items:center;justify-content:center;
      background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 12px -6px rgba(20,50,95,.25),inset 0 1px 0 #fff;transition:background .12s,transform .08s}
    .applock-key:hover{background:rgba(255,255,255,.92)} .applock-key:active{transform:scale(.93);background:#0a84ff;color:#fff}
    .applock-del{font-size:22px;background:transparent;border:none;box-shadow:none}
    .applock-del:active{background:transparent;color:#0a84ff}
    /* #constelação theme-aware por trás do App Lock (mesmo estilo do login) */
    .al-net{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
    #applock-overlay .applock-box{position:relative;z-index:1}
    /* NOITE: fundo navy + cartão de vidro escuro + texto claro (constelação branco/azul-bebé por cima) */
    [data-theme="dark"] #applock-overlay{color:#e7eefc;
      background:radial-gradient(120vw 60vh at 22% -8%,rgba(56,120,255,.18),transparent 58%),radial-gradient(120vw 60vh at 82% 108%,rgba(59,130,246,.12),transparent 58%),linear-gradient(180deg,#0a0f1e,#0b1428)}
    [data-theme="dark"] .applock-box{background:rgba(18,26,48,.5);border-color:rgba(255,255,255,.10);box-shadow:0 34px 80px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.10)}
    [data-theme="dark"] .applock-logo{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border-color:rgba(255,255,255,.14);color:#7dd3fc;box-shadow:0 10px 26px -10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
    [data-theme="dark"] .applock-title{color:#f4f8ff}
    [data-theme="dark"] .applock-sub{color:#9fb0cc}
    [data-theme="dark"] .applock-key{color:#e7eefc;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.10);box-shadow:0 4px 12px -6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
    [data-theme="dark"] .applock-key:hover{background:rgba(255,255,255,.12)}
    [data-theme="dark"] .applock-key:active{background:#3b82f6;color:#fff}
    [data-theme="dark"] .applock-del:active{background:transparent;color:#7dd3fc}
    [data-theme="dark"] .applock-dots i{background:rgba(255,255,255,.18)}
    [data-theme="dark"] .applock-dots i.on{background:#7dd3fc}
    [data-theme="dark"] .applock-usepin{color:#7dd3fc}
    /* #view-login — fundo theme-aware (a constelação, transparente, fica por cima) */
    #view-login{background:#0a0f1e}
    [data-theme="light"] #view-login{background:linear-gradient(180deg,#eef3fb,#dbe6f4)}
    .applock-err{min-height:18px;margin-top:16px;font-size:12.5px;color:#e0364b;font-weight:500}
    /* onboarding: escolha Face ID / código + inputs */
    .applock-choices{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:2px}
    .al-choice{width:100%;display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:16px;cursor:pointer;text-align:left;
      background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);box-shadow:0 6px 16px -10px rgba(20,50,95,.3);transition:transform .1s,background .12s}
    .al-choice:hover{background:rgba(255,255,255,.8)} .al-choice:active{transform:scale(.98)}
    .al-choice .ci{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
    .al-choice .ci svg{width:22px;height:22px}
    .al-choice>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
    .al-choice .cft{display:block;font-size:15px;font-weight:650;color:#0b1220}
    .al-choice .cfs{display:block;font-size:12px;color:#5a6675;margin-top:1px}
    .al-choice .cx{margin-left:auto;color:#b3bccb;font-size:18px}
    .al-choice.face .ci{background:linear-gradient(180deg,#3a9bff,#0a84ff)}
    .al-choice.code .ci{background:linear-gradient(180deg,#34c759,#23a049)}
    .al-skip{margin-top:16px;background:none;border:none;color:#8a94a3;font-size:13.5px;cursor:pointer}
    .al-inputs{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:2px}
    .al-pininput{width:100%;text-align:center;font-size:20px;letter-spacing:.45em;padding:13px 13px 13px 20px;border-radius:14px;border:1px solid rgba(11,18,32,.14);background:rgba(255,255,255,.72);color:#0b1220;outline:none}
    .al-pininput:focus{border-color:#0a84ff;box-shadow:0 0 0 4px rgba(10,132,255,.15)}
    /* camuflagem */
    .al-camo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin:6px 0 2px}
    .al-camo{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:8px 4px;border-radius:14px;border:2px solid transparent;transition:border-color .12s,background .12s}
    .al-camo:hover{background:rgba(255,255,255,.5)} .al-camo.sel{border-color:#0a84ff;background:rgba(10,132,255,.09)}
    .al-camo .cico{width:52px;height:52px;border-radius:24%;overflow:hidden;box-shadow:0 8px 18px -9px rgba(20,50,95,.45),inset 0 0 0 1px rgba(0,0,0,.06)}
    .al-camo .cico svg{width:100%;height:100%;display:block}
    .al-camo .cnm{font-size:11px;color:#5a6675}
    /* grelha de disfarce nas Configurações (card no tema da app) */
    .al-camo-block{border-top:1px solid rgba(255,255,255,.06);padding-top:14px}
    :root[data-theme="light"] .al-camo-block{border-top-color:rgba(15,23,42,.08)}
    .al-camo-lbl{font-size:13px;font-weight:600;color:#cbd5e1;margin-bottom:11px}
    :root[data-theme="light"] .al-camo-lbl{color:#334155}
    .al-camo-block .al-camo:hover{background:rgba(255,255,255,.05)}
    :root[data-theme="light"] .al-camo-block .al-camo:hover{background:rgba(15,23,42,.04)}
    .al-camo .cico-sysmon{background:linear-gradient(140deg,#5eead4,#14b8a6);position:relative}
    .al-camo .cico-sysmon::after{content:"";position:absolute;inset:32%;border-radius:50%;border:3px solid rgba(4,32,27,.6)}
    /* ===== ecrã de BLOQUEADO / arrefecimento — tema escuro dramático (independente do resto) ===== */
    #applock-overlay.lockout{--lk:244,63,94;color:#f8fafc;
      background:radial-gradient(135% 95% at 50% 30%,rgba(var(--lk),.16),rgba(9,5,8,.99) 60%),#090508;background-image:radial-gradient(135% 95% at 50% 30%,rgba(var(--lk),.16),rgba(9,5,8,.99) 60%)}
    #applock-overlay.lk-cool{--lk:251,191,36}
    #applock-overlay.lockout::before{content:"";position:absolute;inset:16px;border:1px solid rgba(var(--lk),.24);border-radius:32px;pointer-events:none;box-shadow:inset 0 0 70px rgba(var(--lk),.05)}
    #applock-overlay.lockout .applock-box{background:transparent;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;max-width:360px}
    #applock-overlay.lockout .al-lockicon{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:rgb(var(--lk));
      border:1.5px solid rgba(var(--lk),.42);background:radial-gradient(circle at 50% 44%,rgba(var(--lk),.12),transparent 70%);box-shadow:0 0 46px rgba(var(--lk),.16),inset 0 0 24px rgba(var(--lk),.06);animation:lkpulse 2.8s ease-in-out infinite}
    #applock-overlay.lockout .al-lockicon svg{width:34px;height:34px}
    @keyframes lkpulse{0%,100%{box-shadow:0 0 40px rgba(var(--lk),.13),inset 0 0 24px rgba(var(--lk),.05)}50%{box-shadow:0 0 60px rgba(var(--lk),.24),inset 0 0 24px rgba(var(--lk),.08)}}
    #applock-overlay.lockout .applock-title{color:#f8fafc;font-size:26px;font-weight:700}
    #applock-overlay.lockout .applock-sub{color:rgba(var(--lk),.82);font-size:15px;margin:11px 0 22px;max-width:24ch}
    #applock-overlay.lockout .al-timer{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:46px;font-weight:600;letter-spacing:.03em;color:#fbfcfe;text-shadow:0 0 26px rgba(var(--lk),.30);margin:2px 0 0}
    #applock-overlay.lockout .al-blocked-note{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:rgba(var(--lk),.85);margin-top:22px;letter-spacing:.02em}
    #applock-overlay.lockout .lk-face{background:rgba(var(--lk),.14);border:1px solid rgba(var(--lk),.4);color:#fff;box-shadow:none}
    #applock-overlay.lockout .lk-face:hover{background:rgba(var(--lk),.2)}
    @media (prefers-reduced-motion:reduce){#applock-overlay.lockout .al-lockicon{animation:none}}
    /* card das Configurações */
    .al-wrap{display:flex;flex-direction:column;gap:12px}
    .al-row{display:flex;align-items:center;gap:12px}
    .al-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#94a3b8;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);flex-shrink:0}
    .al-ic.on{color:#5eead4;background:rgba(45,212,191,.12);border-color:rgba(45,212,191,.25)}
    .al-t{font-size:13.5px;font-weight:600;color:#f1f5f9} :root[data-theme="light"] .al-t{color:#0f172a}
    .al-s{font-size:12px;color:#94a3b8;margin-top:1px}
    .al-grid{display:flex;flex-direction:column;gap:9px;border-top:1px solid rgba(255,255,255,.06);padding-top:12px}
    .al-item{display:flex;align-items:center;gap:10px;font-size:13px;color:#cbd5e1} :root[data-theme="light"] .al-item{color:#334155}
    .al-item>span:first-child{flex:1}
    .al-badge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;background:rgba(148,163,184,.15);color:#94a3b8}
    .al-badge.on{background:rgba(45,212,191,.14);color:#5eead4}
    .al-pinform{border-top:1px solid rgba(255,255,255,.06);padding-top:12px;margin-top:2px}
    .al-steps{padding:12px 14px;border-radius:12px;background:rgba(45,212,191,.06);border:1px solid rgba(45,212,191,.18);font-size:12.5px}
    .al-steps:empty{display:none}
    .al-steps-head{font-weight:650;color:#5eead4;margin-bottom:8px}
    .al-steps ol{margin:0;padding-left:20px;color:#cbd5e1;display:flex;flex-direction:column;gap:5px;list-style:decimal}
    .al-steps ol li{padding-left:3px}
    :root[data-theme="light"] .al-steps ol{color:#334155}
    .al-steps-note{margin-top:9px;font-size:11px;color:#94a3b8;font-style:italic}
    @media(max-width:380px){.applock-pad{grid-template-columns:repeat(3,64px);gap:12px}.applock-key{width:64px;height:64px;font-size:24px}}

/* #dest — linhas de referrer expansíveis: toca numa origem (chatgpt.com, facebook…) e vê
   PARA QUE landing(s) o tráfego foi, com visitas + downloads por site de destino. */
#an-referrers .ref-has{cursor:pointer}
#an-referrers .ref-has:hover{background:rgba(148,163,184,.05)}
#an-referrers .ref-caret,#an-referrers .ref-caret-sp{display:inline-block;width:12px;margin-right:9px;color:#64748b;font-size:9px;transition:transform .15s}
#an-referrers .ref-caret.open{transform:rotate(90deg);color:#2dd4bf}
#an-referrers .ref-detail td{padding-top:0!important;padding-bottom:12px!important;border-bottom:1px solid rgba(148,163,184,.08)}
#an-referrers .ref-dests{display:flex;flex-direction:column;gap:7px;padding:2px 0 2px 21px}
#an-referrers .ref-dest{display:flex;align-items:center;gap:10px;font-size:12.5px}
#an-referrers .ref-arr{color:#5f6f86;flex:none}
#an-referrers .ref-dn{color:#cbd5e1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-theme="light"] #an-referrers .ref-dn{color:#334155}
#an-referrers .ref-ds{margin-left:auto;color:#8b95a9;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
#an-referrers .ref-ds b{color:#2dd4bf;font-weight:600}

/* #login-net — canvas do fundo "Rede viva" do login (nós + ligações; animado no app.js, só enquanto
   o login está visível). Fica no fundo do .login-bg; o grid/scan existentes ficam por cima, subtis. */
.login-bg #login-net{position:absolute;inset:0;width:100%;height:100%;display:block}

/* #friction — cliques de fricção marcados SOBRE o print real da landing + lista "o que fazer" */
/* #uxfriction — vista dedicada: lista de wallets à esquerda */
.ux-wallet{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 11px;border-radius:10px;border:1px solid transparent;background:transparent;cursor:pointer;transition:background .12s,border-color .12s}
.ux-wallet:hover{background:color-mix(in srgb,var(--muted) 10%,transparent)}
.ux-wallet.active{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.ux-dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 7px currentColor}
.ux-wname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;color:var(--text)}
.ux-wallet.active .ux-wname{color:var(--accent-strong,#5eead4)}
.ux-wcount{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
/* #downloaderfriction — toggle de segmento da fricção UX (Todos / Quem descarregou) */
.fr-seg{display:inline-flex;background:rgba(120,130,150,.12);border:1px solid var(--border);border-radius:9px;padding:2px;gap:2px}
.fr-seg.hidden{display:none}
.fr-seg-btn{font-size:11px;font-weight:600;color:var(--muted);padding:4px 10px;border-radius:7px;border:0;background:transparent;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.fr-seg-btn:hover{color:var(--text)}
.fr-seg-btn.active{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent-strong,#5eead4)}
/* #downloadfriction — "como agem os downloads": linha por landing (barra de entrega + recomendação) */
#dl-friction .dlf-row{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:color-mix(in srgb,var(--card) 60%,transparent)}
.dlf-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dlf-verdict{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.dlf-dot{width:7px;height:7px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.dlf-name{font-size:13.5px;font-weight:600;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlf-people{font-size:11px;color:var(--muted);white-space:nowrap}
.dlf-bar{display:flex;height:8px;border-radius:5px;overflow:hidden;margin:9px 0;background:rgba(120,130,150,.14);gap:2px}
.dlf-bar>span{display:block;min-width:3px}
.dlf-s-real{background:#34d399}.dlf-s-store{background:#38bdf8}.dlf-s-broken{background:#fb7185}
.dlf-stats{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.dlf-stats b{font-variant-numeric:tabular-nums}
.dlf-plats{display:inline-flex;gap:5px;margin-left:auto}
.dlf-chip{font-size:10px;font-weight:600;color:var(--muted);background:rgba(120,130,150,.12);border-radius:5px;padding:1px 6px;white-space:nowrap}

/* #dlrecent-mobile — "Etiquetas" (Ideia 4): a lista de pedidos recentes no telemóvel. Landing + hora
   numa linha, e país·cidade / plataforma / origem em chips. A tabela desktop fica escondida (sm:block). */
.dlm-row{padding:13px 24px;border-top:1px solid rgba(255,255,255,.045)}
.dlm-row:first-child{border-top:0}
.dlm-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.dlm-land{font-size:15px;font-weight:600;color:#f1f5f9}
.dlm-time{font-size:11px;color:#64748b;white-space:nowrap;font-variant-numeric:tabular-nums}
.dlm-chips{display:flex;flex-wrap:wrap;gap:6px}
.dlm-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#cbd5e1;background:rgba(120,130,150,.14);border:1px solid rgba(255,255,255,.05);border-radius:999px;padding:3px 9px;white-space:nowrap}
.dlm-chip.dlm-src{color:#2dd4bf;background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.2)}
.dlm-empty{padding:48px 24px;text-align:center}
.dlm-empty-t{font-size:13px;font-weight:500;color:#cbd5e1}
.dlm-empty-s{font-size:11px;color:#64748b;margin-top:4px}
[data-theme="light"] .dlm-row{border-top-color:rgba(15,23,42,.06)}
[data-theme="light"] .dlm-land{color:#0f172a}
[data-theme="light"] .dlm-chip{color:#334155;background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.08)}
[data-theme="light"] .dlm-chip.dlm-src{color:#0d9488;background:rgba(13,148,136,.08);border-color:rgba(13,148,136,.22)}
/* #recentgroups — pedidos de download AGRUPADOS por origem (uma linha "×N tentativas") */
.dlg-summary{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:11px;flex-wrap:wrap}
.dlg-summary[hidden]{display:none} /* o display:flex acima (mesma especificidade, carregado depois) vencia o [hidden] do preflight */
.dlg-s-sep{opacity:.4}
.dlg-s-tot{color:var(--text);font-weight:650}
.dlg-s-hum{color:#34d399;font-weight:600}
.dlg-s-bot{color:#fb7185;font-weight:700}
.dlg-s-org{opacity:.8}
.dlg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:12px;border:1px solid var(--border);background:color-mix(in srgb,var(--card) 45%,transparent)}
.dlg-row.is-bot{border-color:rgba(251,113,133,.32);background:linear-gradient(90deg,rgba(251,113,133,.10),transparent 62%)}
.dlg-main{min-width:0;flex:1}
.dlg-l1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dlg-land{font-size:13.5px;font-weight:650;color:var(--text)}
.dlg-badge{font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:6px;white-space:nowrap}
.dlg-b-bot{color:#fb7185;background:rgba(251,113,133,.14);text-transform:uppercase}
.dlg-b-human{color:#7dd3fc;background:rgba(56,189,248,.12)}
.dlg-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.dlg-chip{font-size:11px;color:var(--muted);background:rgba(120,130,150,.12);border-radius:6px;padding:2px 8px;white-space:nowrap}
.dlg-chip.dlg-src{opacity:.9}
.dlg-plat{font-size:10.5px;font-weight:600;color:#a5b4fc;background:rgba(129,140,248,.12);border-radius:6px;padding:2px 7px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dlg-right{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none;text-align:right}
.dlg-n{font-size:16px;font-weight:750;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1}
.dlg-n-bot{color:#fb7185}
.dlg-people{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.dlg-when{font-size:10.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:520px){.dlg-row{flex-direction:column;align-items:flex-start;gap:8px}.dlg-right{flex-direction:row;align-items:baseline;gap:10px;text-align:left}}
[data-theme="light"] .dlg-land{color:#0f172a}
[data-theme="light"] .dlg-chip{color:#334155;background:rgba(15,23,42,.05)}
[data-theme="light"] .dlg-n{color:#0f172a}
[data-theme="light"] .dlm-empty-t{color:#334155}
.dlf-check{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-soft,#aeb8c8);background:rgba(120,130,150,.12);border:1px solid rgba(120,130,150,.28);border-radius:6px;padding:3px 11px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.dlf-check:hover{color:var(--text);background:rgba(120,130,150,.18);border-color:rgba(120,130,150,.38)}
.dlf-check:disabled{cursor:default;opacity:.7}
.dlf-check.dlf-check-ok{color:#6ee7b7;border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.12)}
.dlf-rec{margin-top:8px;font-size:12px;line-height:1.45;color:var(--text-soft,#aeb8c8)}
#an-friction .fr-shot, #ux-friction .fr-shot {position:relative;border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:560px;background:#0a0f1c;min-height:220px}
.fr-shot .fr-imgwrap{position:relative;width:max-content;max-width:100%;margin-inline:auto}
#an-friction-shot, #ux-friction-shot {display:block;width:auto;max-width:100%;height:auto;margin-inline:auto}
.fr-shot:not(.ready) .fr-imgwrap{visibility:hidden;min-height:220px}
.fr-shot .fr-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;z-index:2;font-size:12.5px;color:#5f6f86;text-align:center;padding:20px}
.fr-shot.ready .fr-ph{display:none}
.fr-shot.noshot .fr-spin{display:none}
.fr-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(45,212,191,.2);border-top-color:#2dd4bf;animation:fr-spin .8s linear infinite;flex:none}
@keyframes fr-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fr-spin{animation:none}}
.fr-mk{position:absolute;transform:translate(-50%,-50%);z-index:3;cursor:pointer}
.fr-pin{display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:ui-monospace,Menlo,monospace;font-weight:700;color:#1a1206;background:radial-gradient(circle at 35% 30%,#fde68a,#fbbf24);box-shadow:0 0 0 3px rgba(251,191,36,.2),0 3px 10px -2px rgba(251,191,36,.6);border:1.5px solid rgba(255,255,255,.35);transition:transform .12s,box-shadow .12s}
.fr-mk.rage .fr-pin{background:radial-gradient(circle at 35% 30%,#fecdd3,#fb7185);color:#3a0a12;box-shadow:0 0 0 3px rgba(251,113,133,.2),0 3px 10px -2px rgba(251,113,133,.6)}
.fr-mk.on .fr-pin,.fr-mk:hover .fr-pin{transform:scale(1.2);box-shadow:0 0 0 5px rgba(251,191,36,.28),0 5px 14px -2px rgba(251,191,36,.8)}
#an-fixlist .fr-fix, #ux-fixlist .fr-fix {display:flex;gap:11px;padding:11px 10px;border-top:1px solid rgba(148,165,200,.07);border-radius:9px}
#an-fixlist .fr-fix:first-child, #ux-fixlist .fr-fix:first-child {border-top:0}
#an-fixlist .fr-fix:hover, #an-fixlist .fr-fix.on, #ux-fixlist .fr-fix:hover, #ux-fixlist .fr-fix.on {background:rgba(251,191,36,.05)}
#an-fixlist .fr-fix.rage:hover, #an-fixlist .fr-fix.rage.on, #ux-fixlist .fr-fix.rage:hover, #ux-fixlist .fr-fix.rage.on {background:rgba(251,113,133,.06)}
#an-fixlist .fr-n, #ux-fixlist .fr-n {width:20px;height:20px;flex:none;border-radius:50%;font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:10.5px;color:#1a1206;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#fde68a,#fbbf24);margin-top:1px}
#an-fixlist .fr-fix.rage .fr-n, #ux-fixlist .fr-fix.rage .fr-n {background:radial-gradient(circle at 35% 30%,#fecdd3,#fb7185);color:#3a0a12}
#an-fixlist .fr-c, #ux-fixlist .fr-c {min-width:0;flex:1}
#an-fixlist .fr-what, #ux-fixlist .fr-what {font-size:12.5px;color:#e9eef7;font-weight:600;line-height:1.4}
#an-fixlist .fr-what em, #ux-fixlist .fr-what em {color:#fcd34d;font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
#an-fixlist .fr-fix.rage .fr-what em, #ux-fixlist .fr-fix.rage .fr-what em {color:#fda4af}
#an-fixlist .fr-tip, #ux-fixlist .fr-tip {font-size:12px;color:#93a2b8;margin-top:4px;line-height:1.45;display:flex;gap:6px}
#an-fixlist .fr-tip .arw, #ux-fixlist .fr-tip .arw {color:#34d399;font-weight:700;flex:none}
#an-fixlist .fr-cnt, #ux-fixlist .fr-cnt {font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:14px;color:#fcd34d;flex:none;align-self:flex-start;margin-top:1px;font-variant-numeric:tabular-nums}
#an-fixlist .fr-fix.rage .fr-cnt, #ux-fixlist .fr-fix.rage .fr-cnt {color:#fda4af}
[data-theme="light"] #an-friction .fr-shot, [data-theme="light"] #ux-friction .fr-shot {background:#eef2f8}
[data-theme="light"] #an-fixlist .fr-what, [data-theme="light"] #ux-fixlist .fr-what {color:#1e293b}
[data-theme="light"] #an-fixlist .fr-tip, [data-theme="light"] #ux-fixlist .fr-tip {color:#475569}

/* #downloadjourney — replay + timeline da jornada de um download (vista Fricção, modo Por download) */
.dj-picker{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:thin}
.dj-chip{flex:none;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:10px;border:1px solid var(--border);background:color-mix(in srgb,var(--card) 55%,transparent);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.dj-chip:hover{background:color-mix(in srgb,var(--muted) 10%,transparent)}
.dj-chip.active{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.dj-cdot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 7px currentColor}
.dj-ctime{font-size:12px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.dj-cplat{font-size:10px;font-weight:600;color:var(--muted);background:rgba(120,130,150,.14);border-radius:5px;padding:1px 6px}
.dj-csteps{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.dj-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dj-mleft{display:flex;align-items:center;gap:10px;min-width:0}
.dj-vchip{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:7px;white-space:nowrap}
.dj-v-broken{color:#fb7185;background:rgba(251,113,133,.12)}
.dj-v-store{color:#38bdf8;background:rgba(56,189,248,.12)}
.dj-v-converting{color:#34d399;background:rgba(52,211,153,.12)}
.dj-mwho{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dj-controls{display:flex;align-items:center;gap:8px}
.dj-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--border);background:color-mix(in srgb,var(--card) 60%,transparent);color:var(--text);cursor:pointer;font-size:13px;line-height:1;transition:background .12s,border-color .12s}
.dj-btn:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.dj-btn.dj-txt{width:auto;padding:0 9px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.dj-scrub{width:120px;accent-color:var(--accent-strong,#5eead4);cursor:pointer}
.dj-count{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:40px;text-align:center}
.dj-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px}
/* minmax(0,…): com `1fr` (mínimo auto) a pista crescia até à largura natural do print (1280px) → scroll
   horizontal no telemóvel. Uma coluna até 1279px: a 1024px, timeline de 340px + palco não cabiam (palco a 0px). */
@media (max-width:1279px){.dj-grid{grid-template-columns:minmax(0,1fr)}}
.dj-timeline{max-height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-right:4px;scrollbar-width:thin}
.dj-row{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;padding:8px 9px;border-radius:9px;border:1px solid transparent;background:transparent;cursor:pointer;transition:background .12s,border-color .12s}
.dj-row:hover{background:color-mix(in srgb,var(--muted) 8%,transparent)}
.dj-row.on{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.dj-rtime{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;width:54px;padding-top:2px}
.dj-ric{width:20px;height:20px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:rgba(120,130,150,.16);color:var(--muted)}
.dj-row.enter .dj-ric{background:rgba(45,212,191,.16);color:#2dd4bf}
.dj-row.scroll .dj-ric{background:rgba(129,140,248,.16);color:#a5b4fc}
.dj-row.dead .dj-ric,.dj-row.rage .dj-ric{background:rgba(251,113,133,.16);color:#fb7185}
.dj-row.cta .dj-ric,.dj-row.ext .dj-ric,.dj-row.form .dj-ric{background:rgba(251,191,36,.16);color:#fbbf24}
.dj-row.download .dj-ric{background:radial-gradient(circle at 35% 30%,#6ee7b7,#34d399);color:#062b1e}
.dj-rbody{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.dj-rtitle{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.35}
.dj-row.download .dj-rtitle{color:#34d399}
.dj-rsub{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dj-rdelta{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;padding-top:2px}
.dj-stage .dj-shot{position:relative;border:1px solid var(--border);border-radius:12px;overflow:hidden;height:520px;background:#0a0f1c}
@media (max-width:900px){.dj-stage .dj-shot{height:420px}}
.dj-scroller{position:relative;width:max-content;max-width:100%;margin-inline:auto;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){.dj-scroller{transition:none}}
#dj-img{display:block;width:auto;max-width:100%;height:auto}
.dj-shot:not(.ready) .dj-scroller{visibility:hidden}
.dj-mk{position:absolute;transform:translate(-50%,-50%);z-index:3;opacity:0;pointer-events:none;transition:opacity .3s}
.dj-mk.shown{opacity:.5}
.dj-mk .dj-pin{display:block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.5)}
.dj-mk.cta .dj-pin,.dj-mk.ext .dj-pin{background:radial-gradient(circle at 35% 30%,#fde68a,#fbbf24);box-shadow:0 0 0 3px rgba(251,191,36,.18)}
.dj-mk.dead .dj-pin,.dj-mk.rage .dj-pin{background:radial-gradient(circle at 35% 30%,#fecdd3,#fb7185);box-shadow:0 0 0 3px rgba(251,113,133,.18)}
/* o clique de DOWNLOAD — o momento-chave: pin maior, índigo, para o olho ir direto ao botão */
.dj-mk.download .dj-pin{width:22px;height:22px;background:radial-gradient(circle at 35% 30%,#a5b4fc,#4f46e5);box-shadow:0 0 0 4px rgba(79,70,229,.22),0 4px 12px -2px rgba(79,70,229,.65)}
.dj-mk.now{opacity:1;z-index:4}
.dj-mk.now .dj-pin{animation:dj-ripple 1.1s ease-out infinite}
@keyframes dj-ripple{0%{box-shadow:0 0 0 0 rgba(251,191,36,.5)}100%{box-shadow:0 0 0 16px rgba(251,191,36,0)}}
.dj-mk.now.dead .dj-pin,.dj-mk.now.rage .dj-pin{animation-name:dj-ripple-r}
@keyframes dj-ripple-r{0%{box-shadow:0 0 0 0 rgba(251,113,133,.5)}100%{box-shadow:0 0 0 16px rgba(251,113,133,0)}}
@media (prefers-reduced-motion:reduce){.dj-mk.now .dj-pin{animation:none}}
[data-theme="light"] .dj-stage .dj-shot{background:#eef2f8}
/* manchete de padrão da wallet + diagnóstico por jornada + cursor viajante */
.dj-headline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 13px;border-radius:11px;border:1px solid var(--border);margin-bottom:12px;font-size:12.5px}
.dj-headline.dj-hl-bad{background:rgba(251,113,133,.1);border-color:rgba(251,113,133,.3)}
.dj-headline.dj-hl-good{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3)}
.dj-headline.dj-hl-ok{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.28)}
.dj-hl-msg{font-weight:600;color:var(--text)}
.dj-hl-bad .dj-hl-msg{color:#fb7185}
.dj-hl-good .dj-hl-msg{color:#34d399}
.dj-hl-fix{margin-left:auto;font-size:11.5px;font-weight:700;color:#fff;background:#fb7185;border:0;border-radius:8px;padding:6px 12px;cursor:pointer;white-space:nowrap;transition:filter .12s}
.dj-hl-fix:hover{filter:brightness(1.08)}
.dj-diag{padding:11px 13px;border-radius:11px;border:1px solid var(--border);margin-bottom:12px;background:color-mix(in srgb,var(--card) 55%,transparent)}
.dj-diag.dj-d-broken{border-color:rgba(251,113,133,.28)}
.dj-diag.dj-d-converting{border-color:rgba(52,211,153,.28)}
.dj-dstory{font-size:13px;color:var(--text);line-height:1.5;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dj-dfix{font-size:12px;color:var(--text-soft,#aeb8c8);margin-top:6px;display:flex;gap:6px;align-items:baseline}
.dj-arw{color:#34d399;font-weight:700;flex:none}
.dj-mleft{flex-direction:column;align-items:flex-start;gap:2px}
.dj-mtime{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.dj-cursor{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(0,0,0,.4);z-index:5;opacity:0;pointer-events:none;transition:left .6s cubic-bezier(.4,.1,.2,1),top .6s cubic-bezier(.4,.1,.2,1),opacity .3s,transform .15s}
.dj-cursor.shown{opacity:1}
.dj-cursor.tap{animation:dj-tap .5s ease-out}
@keyframes dj-tap{0%{transform:scale(1.6)}60%{transform:scale(.85)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.dj-cursor{transition:opacity .3s}.dj-cursor.tap{animation:none}}
[data-theme="light"] .dj-cursor{background:rgba(15,23,42,.15);border-color:rgba(15,23,42,.7);box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* login: fundo liso — sem os glows radiais ambiente (só o dark + as constelações) */
.login-bg::before, .login-bg::after { display: none !important; }

.passkey-register-dialog { width: min(90vw, 420px); border: 1px solid #475569; border-radius: 16px; padding: 24px; background: #0f172a; color: #f1f5f9; }
.passkey-register-dialog::backdrop { background: #0009; }
.passkey-register-dialog input { width: 100%; margin: 16px 0; padding: 12px; border-radius: 8px; background: #1e293b; color: #fff; border: 1px solid #64748b; }
.passkey-register-dialog [role="alert"] { color: #fca5a5; margin: 12px 0; }
.passkey-register-dialog form > div { display: flex; justify-content: flex-end; gap: 16px; }
.passkey-register-dialog button { padding: 10px; cursor: pointer; }
.passkey-register-dialog button:disabled { opacity: .5; }

/* Selected Eclipse Solar, in Polar cyan/blue. Scoped to the entry screens. */
.access-eye{width:168px;height:101px;flex-shrink:0;position:relative;margin:0 auto 8px;color:#67f3ff;pointer-events:none}
.access-eye-login{width:190px;height:114px;margin-bottom:12px}
.access-eye-svg{width:100%;height:100%;overflow:visible;display:block}
.access-eye .gaze{transition:transform .3s cubic-bezier(.2,.8,.25,1)}
.access-eye .direction{transform-origin:200px 120px;transition:opacity .2s,transform .25s}
.access-eye .rotate{transform-origin:200px 120px;animation:access-eye-spin 18s linear infinite}
.access-eye .reverse{animation-direction:reverse;animation-duration:26s}
.access-eye .slow{animation-duration:50s}.access-eye .outer-spin{animation-duration:45s}
.access-eye .pulse{animation:access-eye-pulse 3s ease-in-out infinite}
.access-eye-paused .rotate,.access-eye-paused .pulse{animation-play-state:paused}
@keyframes access-eye-spin{to{transform:rotate(360deg)}}
@keyframes access-eye-pulse{50%{opacity:.28}}
.applock-box.has-access-eye{max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain}
@media(max-height:760px){.has-access-eye .access-eye{width:130px;height:78px}.applock-box.has-access-eye{padding:18px 20px}.has-access-eye .applock-pad{grid-template-columns:repeat(3,60px);gap:10px}.has-access-eye .applock-key{width:60px;height:60px;font-size:24px}.has-access-eye .applock-sub{margin-bottom:12px}.has-access-eye .applock-dots{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.access-eye .rotate,.access-eye .pulse{animation:none}.access-eye .gaze,.access-eye .direction{transition:none}}

.access-eye-brand{width:52px;height:36px;margin:0 8px 0 0}

/* #live-status — a tabela tem 9 colunas nowrap e é mais larga do que o cartão até ~1900px; a coluna de AÇÕES é a última
   e ficava cortada (a scrollbar é quase invisível). Fixa-a à direita; :not([colspan]) poupa as linhas vazias/skeleton. */
@media (min-width: 768px) {
  table:has(> #live-tbody) > thead th:last-child, #live-tbody > tr > td:last-child:not([colspan]) {
    position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -10px 0 12px -10px rgba(0,0,0,.6);
  }
  #live-tbody > tr:hover > td:last-child:not([colspan]) { background: linear-gradient(rgba(255,255,255,.022), rgba(255,255,255,.022)), var(--surface); }
  [data-theme="light"] table:has(> #live-tbody) > thead th:last-child, [data-theme="light"] #live-tbody > tr > td:last-child:not([colspan]) { background: #fff; box-shadow: -10px 0 12px -10px rgba(15,23,42,.18); }
}

/* #mobile-tablet (auditoria 2026-09-30) */
#team-list .team-id { flex: 1 1 11rem; } /* tablet: o email ficava com 0–52px (ações sm:w-auto + flex-1 de base 0) */
/* bottom-nav: colunas conforme os itens VISÍVEIS (viewers/categorias escondidas deixavam buracos numa grelha fixa de 5) */
#bottom-nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* toggles: a pista é o bloco de contenção da bola — com o label a 44px (alvo de toque) a bola ficava 10px acima */
label > input.peer.sr-only + span, label > input.peer.sr-only + div { position: relative; }
@media (max-width: 767px) {
  #hd-titlebox { flex: 1 1 0%; } /* título ao lado do hambúrguer (antes partia para uma linha própria: header de 226px) */
  #globe-drag { display: none; } /* no telemóvel o mapa é 2D e estático — "arrasta para rodar" não se aplica */
  #sidebar nav { -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); } /* indica que a lista rola */
}

/* KPI: o "?" de ajuda ficava DENTRO do rótulo truncado e era cortado com o texto (invisível até em EN). Agora o texto
   trunca sozinho (com title) e o ícone mantém-se. */
.stat-label .help { flex-shrink: 0; }

/* #recentvisits — linhas de visitas (reusa o .dlg-row dos downloads) */
@media (min-width: 768px) { .grp-list { max-height: 36rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }
.vg-dev { display: inline-flex; align-items: center; gap: 5px; }
.vg-dev iconify-icon { font-size: 12px; opacity: .85; }
.vg-muted { opacity: .72; }
.vg-utm { color: #c4b5fd; background: rgba(167,139,250,.12); }
.vg-path { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
.vg-dl { font-size: 10.5px; font-weight: 700; color: #34d399; background: rgba(52,211,153,.12); border-radius: 6px; padding: 2px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vg-s-dl { color: #34d399; font-weight: 600; }
[data-theme="light"] .vg-dl, [data-theme="light"] .vg-s-dl { color: #047857; }
[data-theme="light"] .vg-utm { color: #6d28d9; background: rgba(109,40,217,.08); }
/* lista com scroll: esbatimento no fundo = "há mais" (o pb-6 da lista deixa a última linha sair do esbatimento) */
@media (min-width: 768px) { .grp-list { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); } }
/* "Mostrar mais" — só no telemóvel */
.grp-more { display: none; }
@media (max-width: 767px) {
  .grp-list:not(.grp-expanded) > .grp-extra { display: none; }
  .grp-list:not(.grp-expanded) > .grp-more { display: block; width: 100%; margin-top: 4px; padding: 11px 14px; border-radius: 12px; border: 1px dashed var(--border);
    background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
}