@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
  /* ============================================================
     Tokens canônicos do Moura One (sistema de design mestre).
     Mesmos nomes e valores de moura-eventos/public/assets/css/styles.css.
     ============================================================ */
  :root{
    --navy:#152C6B;           /* Azul Institucional — títulos, links, ações */
    --navy-deep:#0E1B3D;      /* Azul Profundo — fundos */
    --ink:#0A1228;            /* Base near-black para profundidade da sidebar */
    --cyan:#00C2B8;           /* Turquesa — sinal "ao vivo / requer atenção" */
    --cyan-soft:#e0f7f5;
    --off-white:#F4F6FA;      /* Canvas — cinza frio limpo */
    --gray:#E2E8F0;           /* Cinza Claro */
    --gray-soft:#eef2f7;
    --charcoal:#16203A;       /* Tinta com leve viés navy (texto) */
    --muted:#64748B;          /* Slate (texto secundário) */
    --ok:#00C2B8;
    --danger:#EF4444;         /* Status Crítico */
    --warn:#F59E0B;           /* Status Alto */
    --success:#22C55E;
    --info:#3B82F6;
    --purple:#8B5CF6;
    --white:#fff;
    --grad-principal: linear-gradient(135deg, #0E1B3D 0%, #152C6B 100%);
    --grad-destaque:  linear-gradient(135deg, #152C6B 0%, #00C2B8 100%);
    --grad-suave:     linear-gradient(135deg, #00C2B8 0%, #66E2D6 100%);
    --radius:16px;
    --radius-sm:10px;
    --shadow-xs:0 1px 2px rgba(11,21,48,.05);
    --shadow:0 1px 3px rgba(11,21,48,.06),0 8px 22px -10px rgba(11,21,48,.16);
    --shadow-lg:0 18px 48px -12px rgba(11,21,48,.26);
    --ring:0 0 0 3px rgba(0,194,184,.20);   /* foco — turquesa da marca */
    --display:'Space Grotesk', system-ui, sans-serif;
    --display-soft:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --body:'Inter', system-ui, -apple-system, sans-serif;
    --tnum: 'tnum' 1, 'lnum' 1;
    /* ---- Tokens específicos do Check-in (sem equivalente no mestre) ---- */
    --navy-tint:#e8edf8;
    --teal-line:#b0e8e4;
    --amber-tint:#FBF3E4;
    /* ---- Estados de mesa (mapa de mesas) ---- */
    --st-empty:#94A3B8;   --st-empty-bg:#F8FAFC;   --st-empty-ink:#475569;
    --st-partial:#F59E0B; --st-partial-bg:#FFFBEB; --st-partial-ink:#92400E;
    --st-full:#16A34A;    --st-full-bg:#F0FDF4;    --st-full-ink:#15803D;
    --st-over:#EF4444;    --st-over-bg:#FFF5F5;    --st-over-ink:#991B1B;
    --present:#0E8C84;    --present-bg:#E2F6F4;    /* presença = turquesa da marca */
    --topbar-h:76px;
    --sidebar-w:220px;
    /* Casca de navegação IDÊNTICA ao moura-one (sistema-mestre): degradê
       #0E1B3D→#0A1228 + dois brilhos sutis de turquesa. Usado em topbar,
       sidebar e barra do modo operação para uma identidade única. */
    --chrome-bg:
      radial-gradient(115% 50% at -10% -5%, rgba(0,194,184,.13) 0%, rgba(0,194,184,0) 55%),
      radial-gradient(120% 55% at 0% 100%, rgba(0,194,184,.10) 0%, rgba(0,194,184,0) 60%),
      linear-gradient(180deg, #0E1B3D 0%, #0A1228 100%);
  }
  /* ===== Modo Escuro ===== */
  html[data-dark="1"]{
    --navy:#7b9fe0;
    --navy-deep:#1a2d5a;
    --off-white:#0f1420;
    --gray:#1e2a3a;
    --gray-soft:#182030;
    --charcoal:#dde3ee;
    --muted:#7a8a9e;
    --white:#182030;
    --shadow-xs:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 22px -10px rgba(0,0,0,.5);
    --shadow-lg:0 18px 48px -12px rgba(0,0,0,.6);
    --navy-tint:#1a2d5a;
    --teal-line:#0f2a28;
    --amber-tint:#221800;
    --st-empty-bg:#182030;  --st-empty-ink:#94A3B8;
    --st-partial-bg:#241c08; --st-partial-ink:#d4a017;
    --st-full-bg:#0d2018;   --st-full-ink:#3ecf70;
    --st-over-bg:#240c0c;   --st-over-ink:#f87171;
    --present-bg:#0a1f1e;
    --cyan-soft:#0c2522;
  }
  html[data-dark="1"],html[data-dark="1"] body{background:var(--off-white);color:var(--charcoal)}

  /* Títulos e números: --navy vira --charcoal para contraste adequado no escuro */
  html[data-dark="1"] .home-head h1,
  html[data-dark="1"] .ev-title h2,
  html[data-dark="1"] .home-kpi__n,
  html[data-dark="1"] .stat .n,
  html[data-dark="1"] .modal-head h3,
  html[data-dark="1"] .rep-box .n,
  html[data-dark="1"] .dash-card .dn,
  html[data-dark="1"] .tcard__num,
  html[data-dark="1"] .td-cell__n,
  html[data-dark="1"] .ok-n,
  html[data-dark="1"] .chart-box h3,
  html[data-dark="1"] .audit-stat b{color:var(--charcoal)}

  /* Backgrounds hardcoded #fff → tons escuros */
  html[data-dark="1"] .home-kpi{background:var(--gray);border-color:var(--gray-soft)}
  html[data-dark="1"] .ev-card2{background:var(--gray);border-color:var(--gray-soft)}
  html[data-dark="1"] .tcard{background:var(--gray);border-color:var(--gray-soft)}
  html[data-dark="1"] .dash-card,html[data-dark="1"] .chart-box{background:var(--gray);border-color:var(--gray-soft)}
  html[data-dark="1"] .op-kpi{background:var(--gray);border-color:var(--gray-soft)}
  html[data-dark="1"] .tabs button.on{background:var(--gray-soft);color:var(--charcoal)}
  html[data-dark="1"] .tm-view-toggle{background:var(--off-white);border-color:var(--gray)}
  html[data-dark="1"] .salao-hint{background:var(--gray);border-color:var(--gray-soft)}
  html[data-dark="1"] .map-toggle button{background:var(--gray);border-color:var(--gray-soft)}
  html[data-dark="1"] .seg{background:var(--gray)}
  html[data-dark="1"] .sort-ctl select,html[data-dark="1"] .comp-filter select,html[data-dark="1"] .dash-filters select{background:var(--gray);color:var(--charcoal);border-color:var(--gray-soft)}
  /* Filtros de "Atividade recente" (Resumo) — ficavam brancos, destoando do
     painel escuro ao redor. O ícone do calendário nativo também é escuro por
     padrão nos navegadores baseados em Chromium; invertido para ficar visível. */
  html[data-dark="1"] .act-filters select,html[data-dark="1"] .act-filters input[type=date]{background:var(--gray);color:var(--charcoal);border-color:var(--gray-soft)}
  html[data-dark="1"] .act-filters input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1)}
  html[data-dark="1"] select option{background:#1e2a3a;color:var(--charcoal)}
  html[data-dark="1"] .planta-palette{background:var(--gray);border-color:var(--gray-soft)}
  html[data-dark="1"] .userbtn{background:var(--gray)}
  html[data-dark="1"] .field input,html[data-dark="1"] .field select,html[data-dark="1"] .field textarea{background:var(--gray);color:var(--charcoal);border-color:var(--gray-soft)}
  html[data-dark="1"] .adv-ctl{background:var(--gray);border-color:var(--gray-soft)}
  html[data-dark="1"] .adv-ctl select{background:transparent;color:var(--charcoal)}
  html[data-dark="1"] .adv-ctl select option{background:#1e2a3a;color:var(--charcoal)}
  html[data-dark="1"] .guest{background:var(--gray)}
  html[data-dark="1"] .guest.present{background:var(--present-bg)}

  /* KPI "PRESENTES" com gradiente hardcoded — substituir por dark teal */
  html[data-dark="1"] .stat.hl,
  html[data-dark="1"] .stats .stat.hl,
  html[data-dark="1"] .ev-left .stat.hl{background:#051a18;border-color:#0e3d30}
  html[data-dark="1"] .stat.hl .n,
  html[data-dark="1"] .ev-left .stat.hl .n{color:var(--cyan)}

  /* Barra "⚡ Últimos 5 min" com cores hardcoded */
  html[data-dark="1"] .queue-panel{background:#0d1f18;border-color:#1a3d2e;color:#4ade80}
  html[data-dark="1"] .queue-panel b{color:#86efac}

  /* Live boxes com realce verde hardcoded */
  html[data-dark="1"] .live-box.hl{background:#0d1f18;border-color:#1a3d2e}
  html[data-dark="1"] .live-box.hl .n{color:#4ade80}
  html[data-dark="1"] .sc-hstat.hl b{color:#4ade80}

  /* === Superfícies brancas (#fff fixo) que faltavam no dark mode === */
  html[data-dark="1"] .panel,
  html[data-dark="1"] .kpi-card,
  html[data-dark="1"] .qr-card,
  html[data-dark="1"] .li-box,
  html[data-dark="1"] .config-warn,
  html[data-dark="1"] .tbl-group,
  html[data-dark="1"] .ci-card,
  html[data-dark="1"] .cred-model,
  html[data-dark="1"] .op-li,
  html[data-dark="1"] .ly-row,
  html[data-dark="1"] .drawer{background:var(--gray);border-color:var(--gray-soft)}
  html[data-dark="1"] .tbl-meta{background:var(--gray);color:var(--charcoal)}
  html[data-dark="1"] .scan-tabs button.on{background:var(--gray-soft);color:var(--charcoal)}

  /* Menu do perfil (dropdown) — estava branco com texto claro invisível */
  html[data-dark="1"] .menu-pop{background:#1a2330;border-color:var(--gray-soft);color:var(--charcoal)}
  html[data-dark="1"] .menu-pop button{color:var(--charcoal)}
  html[data-dark="1"] .menu-pop button:hover{background:rgba(255,255,255,.06)}
  html[data-dark="1"] .menu-pop>div{border-bottom-color:var(--gray-soft)!important}
  html[data-dark="1"] .menu-pop a{border-bottom-color:var(--gray-soft)!important;color:var(--charcoal)!important}

  /* Topbars/painéis dos modos tela-cheia (scanner, mapa de mesas, editor de crachá) */
  html[data-dark="1"] .sc-topbar,
  html[data-dark="1"] .sc-hide-panel,
  html[data-dark="1"] .sc-header,
  html[data-dark="1"] .sc-tcard,
  html[data-dark="1"] .sc-foot,
  html[data-dark="1"] .tm-topbar,
  html[data-dark="1"] .tm-kpibar,
  html[data-dark="1"] .tm-side,
  html[data-dark="1"] .tm-side-head,
  html[data-dark="1"] .ce-topbar,
  html[data-dark="1"] .ce-controls{background:var(--gray);border-color:var(--gray-soft)}

  /* Inputs voltam a #fff/#fafafa ao focar — manter escuros */
  html[data-dark="1"] .field input:focus,
  html[data-dark="1"] .field select:focus,
  html[data-dark="1"] .field textarea:focus,
  html[data-dark="1"] .tc-notes:focus{background:var(--gray)!important}

  /* botão lua/sol na topbar */
  .dark-toggle{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 6px;border-radius:8px;line-height:1;opacity:.8;transition:opacity .15s}
  .dark-toggle:hover{opacity:1}

  /* ===== Gráfico de chegadas por hora ===== */
  .hr-chart{display:flex;align-items:flex-end;gap:3px;height:60px;padding:0 0 0;margin:8px 16px 2px;overflow-x:auto}
  .hr-bar{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:26px;flex:1;max-width:56px}
  .hr-bar__fill{width:100%;background:var(--cyan);border-radius:3px 3px 0 0;flex:none}
  .hr-bar__lbl{font-size:9px;color:var(--muted);white-space:nowrap;line-height:1}
  .hr-bar__val{font-size:9px;font-weight:700;color:var(--charcoal);line-height:1}

  /* ===== Badge "sem mesa" no mapa de mesas ===== */
  .tm-nomesa-badge{display:inline-flex;align-items:center;gap:5px;background:#fff3cd;color:#856404;border:1px solid #ffc107;border-radius:8px;padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer}
  html[data-dark="1"] .tm-nomesa-badge{background:#241c08;color:#d4a017;border-color:#856404}

  /* ===== Acesso rápido a outros módulos (sidebar) ===== */
  .sb-ext-section{padding:6px 0 2px;border-top:1px solid rgba(255,255,255,.1);margin-top:6px}
  .sb-ext-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.38);padding:4px 18px 5px;display:block}
  .sb-ext-link{display:flex;align-items:center;gap:10px;padding:9px 16px;color:rgba(255,255,255,.6);font-size:13px;font-weight:500;border-radius:10px;margin:1px 8px;text-decoration:none;transition:.12s}
  .sb-ext-link:hover{background:rgba(255,255,255,.08);color:#fff}
  .sb-ext-link .sb-ic{font-size:15px;flex-shrink:0}

  *{box-sizing:border-box;margin:0;padding:0}
  /* App de operação (kiosk): não deve dar pra dar pinça/zoom por acidente
     durante o check-in. touch-action:manipulation também tira o duplo-toque
     de zoom do Safari — o viewport (maximum-scale=1, user-scalable=no) cobre
     o resto. */
  html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;touch-action:manipulation}
  html,body{background:var(--off-white);color:var(--charcoal);font-family:var(--body);font-size:15px;line-height:1.5;max-width:100vw;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
  button{font-family:inherit;cursor:pointer;border:none;background:none;-webkit-font-smoothing:antialiased}
  /* Inputs com font-size 16px para evitar o zoom automático do iOS ao focar
     (proteção de usabilidade no celular; o mestre usa 15px no desktop). */
  input,select{font-family:inherit;font-size:16px}
  h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.018em}
  .tnum{font-variant-numeric:tabular-nums;font-feature-settings:var(--tnum)}

  /* ===== Topbar ===== */
  /* padding-top respeita a "área segura" do topo (notch / barra de status do
     iPhone quando instalado como app); idem laterais no modo paisagem. Sem isso
     o relógio/wifi/bateria do iOS ficam por cima do logo e dos botões. */
  /* Cor da casca de navegação padronizada com o ecossistema (moura-eventos):
     o token oficial da navegação é --ink (#0A1228), usado na sidebar do mestre.
     Topbar, sidebar e barra do modo operação compartilham essa mesma cor. */
  .topbar{position:sticky;top:0;z-index:30;background-color:var(--ink);background-image:var(--chrome-bg);border-bottom:none;
    padding:calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
    display:flex;align-items:center;gap:12px}
  .topbar img{height:56px;width:auto;display:block}
  .topbar .appname{font-size:11px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.7);text-transform:uppercase;border-left:1px solid rgba(255,255,255,.25);padding-left:12px}
  .top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
  /* Botão "Instalar app" na topbar — destaque turquesa da marca; some quando o
     app já está instalado (controlado por JS). */
  .install-btn{display:inline-flex;align-items:center;gap:6px;background:var(--cyan);color:#04201e;border:none;
    font-weight:800;font-size:12.5px;padding:8px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;
    box-shadow:0 2px 8px -2px rgba(0,194,184,.5);transition:filter .12s,transform .12s}
  .install-btn:hover{filter:brightness(1.06)}
  .install-btn:active{transform:translateY(1px)}
  @media(max-width:600px){ .install-btn{font-size:12px;padding:7px 11px} }
  .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;letter-spacing:.02em}
  .pill .d{width:7px;height:7px;border-radius:50%}
  .pill.ok{background:var(--cyan-soft);color:#127a83}.pill.ok .d{background:var(--cyan)}
  .pill.off{background:#ededee;color:var(--muted)}.pill.off .d{background:#a9a9ad}
  .pill.pend{background:var(--amber-tint);color:var(--warn)}.pill.pend .d{background:var(--warn)}
  .userbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--navy);font-weight:800;font-size:14px;cursor:pointer;border:none;box-shadow:0 0 0 2px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.25);transition:opacity .15s;overflow:hidden;padding:0}
  .userbtn:hover{opacity:.85}

  /* ===== Barra de operação (logo abaixo da topbar) =====
     Mostra o evento + alertas (credenciais pendentes, mesas excedidas, sync).
     É o "centro da operação": fica fixa abaixo da topbar dentro de um evento. */
  .op-alerts{position:sticky;top:var(--topbar-h);z-index:28;background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.08);
    display:flex;align-items:center;gap:12px;padding:8px 16px;flex-wrap:wrap}
  .op-alerts .opa-ev{display:flex;align-items:baseline;gap:8px;min-width:0}
  .op-alerts .opa-ev-name{font-weight:700;font-size:13.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .op-alerts .opa-ev-ref{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#aab6e0;background:rgba(255,255,255,.08);border-radius:6px;padding:2px 7px}
  .op-alerts .opa-chips{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
  .opa-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;border:1px solid transparent;border-radius:999px;padding:5px 12px;cursor:pointer;white-space:nowrap;transition:filter .12s}
  .opa-chip:hover{filter:brightness(1.06)}
  .opa-chip.warn{background:#fff3e9;color:#c2410c;border-color:#fdba74}
  .opa-chip.ok{background:rgba(16,140,132,.18);color:#7fe3da;border-color:rgba(16,140,132,.4)}
  .opa-chip.muted{background:rgba(255,255,255,.08);color:#c7d0ec;border-color:rgba(255,255,255,.14)}
  @media (max-width:640px){
    .op-alerts{gap:8px;padding:7px 12px}
    .op-alerts .opa-ev-name{max-width:100%}
    .op-alerts .opa-chips{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:1px}
    .opa-chip{flex:none}
  }
  .userbtn img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
  .back{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--navy-tint);color:var(--navy);font-size:18px;font-weight:700}
  .ham{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;font-size:20px;cursor:pointer;border:none;flex-shrink:0;line-height:1}
  .ham:hover{background:rgba(255,255,255,.2)}

  /* ===== Sidebar de navegação ===== */
  .sb-overlay{display:none;position:fixed;inset:0;z-index:49;background:rgba(0,0,0,.48);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .sidebar{position:fixed;top:calc(var(--topbar-h) + env(safe-area-inset-top));left:0;height:calc(100vh - var(--topbar-h) - env(safe-area-inset-top));width:var(--sidebar-w);z-index:50;background-color:var(--ink);background-image:var(--chrome-bg);display:flex;flex-direction:column;transform:translateX(calc(-1 * var(--sidebar-w)));transition:transform .24s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;padding:8px 0}
  body.has-sidebar .sidebar{transform:translateX(0)}
  .sb-section{padding:4px 0}
  .sb-item{display:flex;align-items:center;gap:11px;width:100%;padding:12px 16px;background:none;border:none;color:rgba(255,255,255,.72);font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;transition:background .12s,color .12s;position:relative}
  .sb-item:hover{background:rgba(255,255,255,.08);color:#fff}
  .sb-item.active{background:rgba(0,194,184,.14);color:var(--cyan)}
  .sb-item.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--cyan);border-radius:0 3px 3px 0}
  .sb-ic{font-size:17px;flex-shrink:0;width:24px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
  .sb-spacer{flex:1;min-height:16px}
  .sb-footer{padding:12px;border-top:1px solid rgba(255,255,255,.1)}
  .sb-user-row{display:flex;align-items:center;gap:10px;padding:6px 4px 12px}
  .sb-avatar{width:34px;height:34px;border-radius:50%;background:var(--cyan);color:var(--navy-deep);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
  .sb-user-info{min-width:0;flex:1}
  .sb-user-name{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sb-user-role{font-size:10.5px;color:rgba(255,255,255,.42)}
  .sb-logout{width:100%;padding:9px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:rgba(255,255,255,.65);font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;transition:background .12s}
  .sb-logout:hover{background:rgba(255,255,255,.13);color:#fff}
  @media(min-width:769px){
    body.has-sidebar #screen{margin-left:var(--sidebar-w)}
    body.has-sidebar .op-alerts{margin-left:var(--sidebar-w)}
  }
  @media(max-width:768px){
    body.has-sidebar .sb-overlay{display:block}
    .ham{display:inline-flex}
    /* Gaveta de tela cheia POR CIMA da topbar — robusta contra a área segura
       (Dynamic Island/notch) e sem depender da altura exata da topbar, que era
       a causa do menu abrir "torto" no iPhone. Fecha tocando fora ou num item. */
    .sidebar{top:0;height:100dvh;z-index:60;
      padding-top:calc(14px + env(safe-area-inset-top));
      padding-bottom:calc(14px + env(safe-area-inset-bottom))}
    .sb-overlay{z-index:59}
    body.has-sidebar{overflow:hidden}   /* trava a rolagem do fundo com a gaveta aberta */
  }

  .wrap{max-width:1280px;margin:0 auto;padding:18px}

  /* ===== Botões (idêntico ao mestre Moura One) ===== */
  .btn{
    font-family:var(--body); font-weight:600; font-size:14px;
    border:1px solid transparent; border-radius:var(--radius-sm);
    padding:11px 18px; cursor:pointer;
    transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, filter .14s ease;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    text-decoration:none; line-height:1; white-space:nowrap;
  }
  .btn-primary{background:var(--navy);color:var(--white);box-shadow:0 1px 2px rgba(11,21,48,.18)}
  .btn-primary:hover{background:var(--navy-deep);transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(14,27,61,.5)}
  .btn-primary:active{transform:translateY(0)}
  .btn-accent,.btn-teal{background:var(--cyan);color:var(--navy-deep);box-shadow:0 1px 2px rgba(0,194,184,.30)}
  .btn-accent:hover,.btn-teal:hover{filter:brightness(.97);transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(0,194,184,.5)}
  .btn-accent:active,.btn-teal:active{transform:translateY(0)}
  .btn-ghost{background:var(--white);color:var(--navy);border-color:var(--gray)}
  .btn-ghost:hover{border-color:var(--navy);background:var(--off-white)}
  .btn-danger{background:transparent;color:var(--danger);border-color:var(--gray)}
  .btn-danger:hover{border-color:var(--danger);background:#fdf2f2}
  .btn-sm{padding:8px 12px;font-size:13px}
  .btn:focus-visible{outline:none;box-shadow:var(--ring)}
  .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
  .btn-block{width:100%;justify-content:center}

  /* ===== Campos / inputs base (idêntico ao mestre Moura One) =====
     Regras de fundação para qualquer input/select/textarea. Componentes
     específicos (.search input, .field input, etc.) vêm depois e podem
     sobrescrever o fundo/foco conforme o contexto do app. */
  input[type=text], input[type=email], input[type=tel], input[type=password],
  input[type=date], input[type=time], input[type=number], textarea, select{
    width:100%; font-family:var(--body); /* 16px para evitar zoom no iOS (o mestre usa 15px) */
    font-size:16px; color:var(--charcoal);
    background:var(--white); border:1px solid var(--gray); border-radius:var(--radius-sm);
    padding:11px 13px; transition:border-color .15s ease, box-shadow .15s ease;
  }
  textarea{resize:vertical;min-height:72px}
  input:hover, textarea:hover, select:hover{border-color:#cbd5e1}
  input:focus, textarea:focus, select:focus{
    outline:none; border-color:var(--cyan); box-shadow:var(--ring);
  }
  ::placeholder{color:#9aa7ba}

  /* ===== Cartões / superfícies (idêntico ao mestre) ===== */
  .card{
    background:var(--white); border:1px solid var(--gray-soft);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
  }

  /* ===== Pílulas de status do mestre (.pill-ok / .pill-no etc.) =====
     A .pill da topbar deste app é própria (com .pill .d e .pill.ok/.off/.pend)
     e é definida acima; estas são as variantes canônicas do mestre. */
  .pill-ok{color:#0a8f88;background:var(--cyan-soft)}
  .pill-no{color:var(--danger);background:#fdecec}
  .pill-active{color:#0a8f88;background:var(--cyan-soft)}
  .pill-inactive{color:var(--muted);background:var(--gray-soft)}
  @keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(0,194,184,.5)}50%{box-shadow:0 0 0 5px rgba(0,194,184,0)}}

  /* ===== Auth ===== */
  .auth-wrap{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:20px}
  .auth-card{background:var(--white);border:1px solid var(--gray-soft);border-radius:18px;box-shadow:var(--shadow);width:100%;max-width:400px;padding:30px 26px}
  .auth-card .logo{display:block;margin:0 auto 16px;max-width:220px;height:auto}
  .auth-card .tag{text-align:center;color:var(--muted);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:22px}
  .tabs{display:flex;background:var(--off-white);border-radius:10px;padding:4px;margin-bottom:18px}
  .tabs button{flex:1;padding:9px;border-radius:8px;font-weight:700;font-size:13.5px;color:#334155}
  .tabs button.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .auth-err{background:#FBEAEA;color:var(--danger);font-size:13px;padding:10px 12px;border-radius:9px;margin-bottom:12px;display:none}
  .auth-note{font-size:12px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}

  /* ===== Home / cards ===== */
  .home-head{display:flex;align-items:flex-end;justify-content:space-between;margin:6px 0 18px;gap:10px;flex-wrap:wrap}
  .home-head h1{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--navy)}
  .home-head p{color:var(--muted);font-size:14px;margin-top:3px}
  .ev-grid{display:flex;flex-direction:column;gap:12px}
  .ev-card{background:var(--white);border:1px solid var(--gray-soft);border-left:4px solid var(--navy);border-radius:14px;padding:18px;box-shadow:var(--shadow);cursor:pointer;transition:.12s;display:flex;align-items:center;gap:16px}
  .ev-card:hover{transform:translateY(-1px);border-color:#c9cacb;border-left-color:var(--cyan)}
  .ev-card .ev-main{flex:1;min-width:0}
  .ev-card h3{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;color:var(--charcoal)}
  .ev-card .meta{color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:4px 14px}
  .ev-card .ring{flex-shrink:0;text-align:center}
  .ev-card .ring .pct{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--navy)}
  .ev-card .ring .lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
  .empty{text-align:center;padding:60px 20px;color:var(--muted)}
  .empty .big{font-size:46px;margin-bottom:10px}
  .empty .big svg{width:46px;height:46px}
  /* ---- Home redesign ---- */
  .home-kpi-row{display:flex;gap:12px;margin:0 0 24px;flex-wrap:wrap}
  .home-kpi{flex:1;min-width:130px;background:#fff;border:1px solid var(--gray-soft);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
  .home-kpi__n{display:block;font-size:26px;font-weight:800;color:var(--navy);font-family:var(--display);line-height:1.1}
  .home-kpi__l{display:block;font-size:12px;color:var(--muted);margin-top:3px;font-weight:600}
  .home-kpi--accent .home-kpi__n{color:var(--present)}
  .home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
  .ev-card2{background:#fff;border:1px solid var(--gray-soft);border-left:4px solid var(--navy);border-radius:14px;padding:18px;box-shadow:var(--shadow);cursor:pointer;transition:.14s ease;display:flex;flex-direction:column;gap:10px;min-height:148px}
  .ev-card2:hover{transform:translateY(-2px);border-left-color:var(--cyan);box-shadow:var(--shadow-lg)}
  .ev-card2-head h3{font-size:16px;font-weight:700;color:var(--charcoal);line-height:1.3}
  .ev-card2-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--muted);align-items:center}
  .ev-card2-meta svg{width:14px;height:14px;flex:none;vertical-align:-1px}
  .ev-card2-foot{margin-top:auto;padding-top:4px}
  .ev-card2-bar{height:6px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin-bottom:7px}
  .ev-card2-bar-fill{height:100%;background:var(--cyan);border-radius:99px;transition:width .3s ease;min-width:2px}
  .ev-card2-stats{display:flex;justify-content:space-between;font-size:12px}
  .ev-card2-pres{color:var(--present);font-weight:700}
  .ev-card2-pct{color:var(--muted);font-weight:700}
  /* Atalho "Modo operação" no card: leva direto à tela focada de check-in. */
  .ev-card2-op{margin-top:2px;width:100%;border:1px solid var(--cyan);background:var(--cyan-tint,#e6fbf9);color:var(--navy);
    font-weight:700;font-size:13px;padding:9px 12px;border-radius:10px;cursor:pointer;transition:.12s ease}
  .ev-card2-op:hover{background:var(--cyan);color:#04201e}
  html[data-dark="1"] .ev-card2-op{background:transparent;color:var(--cyan)}
  html[data-dark="1"] .ev-card2-op:hover{background:var(--cyan);color:#04201e}
  @media(max-width:640px){
    .home-grid{grid-template-columns:1fr}
    .home-kpi-row{gap:8px}
    .home-kpi{min-width:calc(50% - 4px);flex:none}
  }

  /* ===== Event view ===== */
  .ev-title{margin:4px 0 14px}
  .ev-title h2{font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--navy)}
  .ev-title .meta{color:var(--muted);font-size:13.5px;margin-top:5px;display:flex;flex-wrap:wrap;align-items:center;gap:3px 14px}

  /* Antes: cada .refresh tinha margin-left:auto, então CADA botão empurrava os
     seguintes pra própria linha (Moura One / Abrir RSVP / Sincronizar / Atualizar
     saíam quase um por linha) — a barra crescia bem mais alto do que precisava.
     Agora é uma fileira compacta de "pilulas" que só quebra linha quando a tela
     é estreita demais para caber, num bloco só, bem menor. */
  .syncbar{display:flex;align-items:center;gap:6px;background:var(--white);border:1px solid var(--gray-soft);border-radius:11px;padding:8px 10px;margin-bottom:14px;font-size:11.5px;flex-wrap:wrap}
  .syncbar .upd{color:var(--muted);flex:1 1 100%;font-size:10.5px;order:-1}
  .syncbar .refresh{display:inline-flex;align-items:center;gap:4px;color:var(--navy);font-weight:700;border:1px solid var(--gray);border-radius:20px;padding:5px 10px;margin-left:0;white-space:nowrap}
  .syncbar .refresh:hover{background:var(--navy-tint)}
  .syncbar .refresh.spin span{display:inline-block;animation:rot .8s linear infinite}
  @keyframes rot{to{transform:rotate(360deg)}}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gray-soft);border:1px solid var(--gray-soft);border-radius:14px;overflow:hidden;margin-bottom:16px}
  .stat{background:var(--white);padding:13px 10px;text-align:center}
  .stat .n{font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--navy)}
  .stat.hl .n{color:#16a34a}
  .stat .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:5px}

  .toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .search{flex:1;min-width:180px;position:relative}
  .search input{width:100%;padding:11px 13px 11px 38px;border:1px solid var(--gray);border-radius:10px;background:var(--white)}
  .search input:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:transparent}
  .search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
  .search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;font-size:18px;color:var(--muted);background:#ededee;display:flex;align-items:center;justify-content:center}
  .search-clear:hover{background:#e0e0e1;color:var(--charcoal)}
  mark{background:#FFE9A8;color:inherit;border-radius:3px;padding:0 1px}
  .cat-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 9px;border-radius:7px;letter-spacing:.01em}
  .cat-filters{margin-top:-6px}
  .cat-f .cat-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
  .cat-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #efefef}
  .cat-row .cat-sw{width:18px;height:18px;border-radius:6px;flex-shrink:0}
  .cat-row .cat-name{flex:1;font-weight:600;font-size:14px}
  .cat-mini{width:30px;height:30px;border-radius:8px;font-size:13px;color:var(--muted);background:#f2f2f2}
  .cat-mini:hover{background:#e6e6e6;color:var(--charcoal)}
  .cat-mini.danger:hover{background:#FBEAEA;color:var(--danger)}
  .color-row{display:flex;flex-wrap:wrap;gap:8px}
  .color-pick{width:30px;height:30px;border-radius:8px;cursor:pointer;border:3px solid transparent;transition:.1s}
  .color-pick.on{border-color:var(--charcoal);transform:scale(1.08)}
  /* Mapa de mesas avançado */
  .ob-banner{background:#FBEAEA;color:var(--danger);border:1px solid #f0c4c4;border-radius:10px;padding:10px 13px;font-size:13px;font-weight:700;margin-bottom:14px}
  .ob-banner.clickable{cursor:pointer}.ob-banner.clickable:hover{background:#f8dede}
  .map-legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
  /* ===== Mapa de mesas — cards de status ("instrumentos") =====
     Cor por ESTADO de alocação (vazia/parcial/completa/excedente).
     Presença (quem chegou) = camada verde separada, no medidor e no badge. */
  .tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(174px,1fr));gap:13px}
  .tcard{position:relative;display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--gray);
    border-radius:14px;padding:14px 14px 12px 17px;cursor:pointer;overflow:hidden;
    transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
  .tcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .tcard:focus-visible{outline:none;box-shadow:var(--ring)}
  .tcard__accent{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--st);border-radius:14px 0 0 14px}
  .tcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
  .tcard__id{display:flex;flex-direction:column;line-height:1}
  .tcard__eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  .tcard__num{font-family:var(--display);font-size:26px;font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:.95}
  .tcard__state{flex:none;font-size:10px;font-weight:800;letter-spacing:.02em;padding:3px 8px;border-radius:999px;
    color:var(--st-ink);background:var(--st-bg);border:1px solid var(--st);border-color:color-mix(in srgb,var(--st) 32%,transparent);white-space:nowrap}
  .tcard__cap{display:flex;align-items:baseline;gap:7px}
  .tcard__cap-num{font-family:var(--display);font-size:22px;font-weight:700;color:var(--charcoal);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .tcard__cap-num i{font-style:normal;font-size:14px;color:var(--muted);font-weight:600}
  .tcard__cap-lbl{font-size:11px;color:var(--muted);font-weight:600}
  .tcard__meter{display:flex;flex-wrap:wrap;gap:3px;align-items:center;min-height:11px}
  .ts{width:11px;height:11px;border-radius:3.5px;box-sizing:border-box}
  .ts.is-present{background:#16a34a}
  .ts.is-absent{background:#fff;border:1.5px solid #b6c2d1;border-color:color-mix(in srgb,var(--st) 60%,#cbd5e1)}
  .ts.is-free{background:#EAEFF4}
  .ts.is-over{background:var(--st-over);box-shadow:0 0 0 1.5px #ffcf33}
  .ts-more{font-size:10px;color:var(--muted);font-weight:700;align-self:center;margin-left:1px}
  .tcard__present{font-size:12px;font-weight:700;color:var(--muted)}
  .tcard__present.on{color:#16a34a}
  .tcard__names{display:flex;flex-direction:column;gap:1px;font-size:11.5px;color:var(--charcoal);line-height:1.35}
  .tcard__names--empty{color:var(--muted);font-style:italic}
  .tcard__names-list{list-style:none;margin:0;padding:0;font-size:11.5px;color:var(--charcoal);line-height:1.45;display:flex;flex-direction:column;gap:2px}
  .tcard__names-list li{display:flex;gap:5px;align-items:baseline;overflow:hidden;white-space:nowrap}
  .tcard__names-list li b{color:var(--muted);font-weight:700;font-size:10.5px;min-width:18px;text-align:right;flex-shrink:0}
  .tcard__names-list li.more{color:var(--muted);font-weight:600;font-size:11px;padding-left:23px}
  .tcard__cta{margin-top:auto;font-size:11.5px;font-weight:800;color:var(--navy);letter-spacing:.01em;
    border-top:1px solid var(--gray-soft);padding-top:9px;transition:color .14s,gap .14s}
  .tcard:hover .tcard__cta{color:#16a34a}
  .tcard.st-empty{--st:var(--st-empty);--st-bg:var(--st-empty-bg);--st-ink:var(--st-empty-ink)}
  .tcard.st-partial{--st:var(--st-partial);--st-bg:var(--st-partial-bg);--st-ink:var(--st-partial-ink)}
  .tcard.st-full{--st:var(--st-full);--st-bg:var(--st-full-bg);--st-ink:var(--st-full-ink)}
  .tcard.st-over{--st:var(--st-over);--st-bg:var(--st-over-bg);--st-ink:var(--st-over-ink);border-color:color-mix(in srgb,var(--st-over) 38%,transparent);background:var(--st-over-bg)}
  .tcard.st-na{--st:var(--st-empty);--st-bg:var(--st-empty-bg);--st-ink:var(--st-empty-ink);border-style:dashed}
  @keyframes tmPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
  .tm-pulse{animation:tmPulse 1.6s ease-out 1;border-color:#16a34a!important}
  .td-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:13px}
  .td-cell{background:var(--off-white);border:1px solid var(--gray-soft);border-radius:11px;padding:10px 8px;text-align:center}
  .td-cell__n{display:block;font-family:var(--display);font-size:22px;font-weight:700;color:var(--navy);line-height:1}
  .td-cell__n i{font-style:normal;font-size:13px;color:var(--muted);font-weight:600}
  .td-cell__l{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:5px;display:block}
  .td-cell--present{background:#f0fdf4;border-color:#bbf7d0}
  .td-cell--present .td-cell__n{color:#16a34a}
  .td-empty{color:var(--muted);font-style:italic;padding:14px 2px}
  /* Config de mesas */
  .tc-gen{display:flex;gap:10px}
  .tc-head{display:grid;grid-template-columns:1fr 80px 60px 34px;gap:8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:0 2px 4px;font-weight:700}
  .tc-row{display:grid;grid-template-columns:1fr 80px 60px 34px;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid #efefef;row-gap:4px}
  .tc-notes{grid-column:1/-1;padding:6px 9px;border:1px solid var(--gray);border-radius:8px;background:#fafafa;font-size:12px;width:100%;color:var(--charcoal);font-family:inherit}
  .tc-notes:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:transparent;background:#fff}
  .tc-row.over{background:#FCEDED;border-radius:8px}
  .tc-name,.tc-cap{padding:8px 9px;border:1px solid var(--gray);border-radius:8px;background:#fafafa;font-size:13px;width:100%}
  .tc-occ{font-size:12px;color:var(--muted);font-weight:600;text-align:center}
  .tc-occ.over{color:var(--danger);font-weight:800}
  .map-res{margin-bottom:12px;border:1px solid var(--gray);border-radius:10px;overflow:hidden}
  .map-res-i{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid #efefef;cursor:pointer;font-size:14px}
  .map-res-i:last-child{border-bottom:none}
  .map-res-i:hover{background:#f6f6f4}
  .map-res-t{color:var(--navy);font-weight:700;font-size:13px}
  .dash-filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
  .dash-filters select{padding:9px 11px;border:1px solid var(--gray);border-radius:9px;background:#fff;font-size:13px;max-width:100%}
  .dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
  .dash-card{background:#fff;border:1px solid var(--gray-soft);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
  .dash-card .dn{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1}
  .dash-card.teal .dn{color:#149aa5}
  .dash-card .dl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
  .chart-box{background:#fff;border:1px solid var(--gray-soft);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
  .chart-box h3{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:14px}
  .bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
  .bar-row .bl{width:32%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--charcoal)}
  .bar-row .bt{flex:1;background:#ececec;border-radius:6px;height:18px;overflow:hidden}
  .bar-row .bt span{display:block;height:100%;background:var(--navy);border-radius:6px;min-width:2px}
  .bar-row .bt span.teal{background:var(--cyan)}
  .bar-row .bv{width:70px;text-align:right;color:var(--muted);font-weight:600;font-size:12px}
  @media(max-width:520px){.dash-grid{grid-template-columns:repeat(2,1fr)}.bar-row .bl{width:40%}}
  .actions{display:flex;gap:8px;flex-wrap:wrap}

  .filters{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
  .filters-row{align-items:center;justify-content:space-between}
  .filters-tabs{display:flex;gap:7px;flex-wrap:wrap}
  .sort-ctl{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
  .sort-ctl .sort-ic{color:var(--navy);font-size:14px;font-weight:700}
  .sort-ctl select{padding:7px 10px;border:1px solid var(--gray);border-radius:999px;background:#fff;font-size:12.5px;font-weight:600;color:var(--charcoal);cursor:pointer}
  .chip{font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--white);border:1px solid var(--gray);color:var(--muted);white-space:nowrap}
  .chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}

  .list{display:flex;flex-direction:column;gap:8px}
  .guest{background:var(--white);border:1px solid var(--gray-soft);border-radius:12px;padding:13px 14px;display:flex;align-items:center;gap:12px;transition:.12s}
  .guest.present{background:#f0fdf4;border-color:#bbf7d0}
  .guest.clickable{cursor:pointer}
  .guest .gi{flex:1;min-width:0}
  .guest .gname{font-weight:600;font-size:15.5px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  /* O nome fica num span próprio (um único item flex) para o destaque de busca
     (<mark>) fluir INLINE dentro do nome, sem quebrar a palavra nem abrir gaps
     entre os pedaços. min-width:0 deixa nomes longos quebrarem por palavra. */
  .guest .gname .gn-txt{min-width:0;overflow-wrap:anywhere}
  .guest .gname .gn-txt mark{background:var(--amber-tint,#fef3c7);color:inherit;padding:0 1px;border-radius:3px}
  .guest .gsub{font-size:12.5px;color:var(--muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
  .table-chip{display:inline-flex;align-items:center;gap:5px;background:var(--navy-tint);color:var(--navy);font-size:12px;font-weight:700;padding:3px 9px;border-radius:7px;cursor:pointer}
  .table-chip:hover{background:#dde4f2}
  .table-chip.none{background:#eeeeef;color:var(--muted)}
  .time{font-size:11.5px;color:#15803d;font-weight:700;display:inline-flex;align-items:center;gap:4px}
  .ck{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:10px;border:1.5px solid var(--navy);color:var(--navy);background:var(--white);transition:.12s}
  .ck:hover{background:var(--navy-tint)}
  .ck.done{background:#16a34a;color:#fff;border-color:#16a34a}
  .ck.done:hover{background:#15803d}
  .row-menu{flex-shrink:0;width:32px;height:32px;border-radius:8px;color:var(--muted);font-size:18px;display:inline-flex;align-items:center;justify-content:center}
  .row-menu:hover{background:#ededee}

  /* ===== Modal ===== */
  .overlay{position:fixed;inset:0;background:rgba(40,40,42,.45);z-index:130;display:flex;align-items:center;justify-content:center;padding:18px}
  /* overflow-x:hidden é o cinto de segurança: mesmo que algum conteúdo futuro
     force largura demais (número grande, palavra comprida), o modal NUNCA pode
     ficar mais largo que a tela nem "andar" para o lado — só cresce em altura,
     que já tem rolagem própria. Sem isso, o painel ao vivo numa tela estreita
     ficava mais largo que a tela e o navegador deixava arrastar de lado a lado
     (o usuário via como se o modal estivesse "com zoom"/solto). */
  .modal{background:var(--white);border-radius:16px;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;overflow-x:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25)}
  .modal-head{padding:18px 20px 0;display:flex;align-items:center;justify-content:space-between}
  .modal-head h3{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
  .modal-body{padding:16px 20px 20px}
  .x{width:32px;height:32px;border-radius:8px;font-size:20px;color:var(--muted)}
  .x:hover{background:#ededee}
  /* Alvo de toque ≥44px: mantém o tamanho visual e amplia a área clicável com
     uma camada invisível ao redor (pseudo-elemento) — nada muda na aparência.
     (.search-clear já é position:absolute, o que também "ancora" o ::after.) */
  .x,.row-menu,.back{position:relative}
  .x::after,.row-menu::after,.back::after{content:'';position:absolute;inset:-6px}
  .search-clear::after{content:'';position:absolute;inset:-9px}
  .field{margin-bottom:13px}
  .field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
  .field input,.field select{width:100%;padding:11px 12px;border:1px solid var(--gray);border-radius:10px;background:#fafafa}
  .field input:focus,.field select:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:transparent;background:#fff}
  .toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--gray);border-radius:10px;background:#fafafa;margin-bottom:13px;cursor:pointer}
  .toggle-row .t-lbl{font-weight:600;font-size:14px}
  .toggle-row .t-sub{font-size:12px;color:var(--muted);margin-top:2px}
  .sw{width:46px;height:27px;border-radius:99px;background:#c8c9ca;position:relative;transition:.15s;flex-shrink:0}
  .sw.on{background:var(--cyan)}
  .sw::after{content:'';position:absolute;width:21px;height:21px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .sw.on::after{left:22px}

  .import-help{font-size:12.5px;color:var(--muted);background:#fafafa;border:1px dashed var(--gray);border-radius:10px;padding:12px;margin-bottom:13px;line-height:1.55}
  .tmpl-btn{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid var(--gray);border-radius:10px;padding:12px 14px;background:var(--navy-tint);color:var(--navy);font-weight:700;font-size:13.5px;margin-bottom:13px}
  .tmpl-btn:hover{background:#dde4f2}
  .filedrop{border:1.5px dashed #c2c3c4;border-radius:12px;padding:26px 16px;text-align:center;color:var(--muted);cursor:pointer;transition:.12s}
  .filedrop:hover{border-color:var(--navy);color:var(--navy);background:var(--navy-tint)}
  .preview-tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
  .preview-tbl th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-bottom:1px solid var(--gray)}
  .preview-tbl td{padding:7px 8px;border-bottom:1px solid #efefef}
  .imp-summary{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  .imp-stat{font-size:12px;font-weight:600;border-radius:20px;padding:4px 10px;background:var(--gray-soft);color:var(--charcoal)}
  .imp-stat.imp-warn{background:#FEF3C7;color:#92400E}
  .imp-stat.imp-info{background:#DBEAFE;color:#1E40AF}
  .imp-tag{font-size:10.5px;font-weight:700;border-radius:4px;padding:1px 5px;vertical-align:middle;white-space:nowrap}
  .imp-tag.imp-tag-dup{background:#DBEAFE;color:#1E40AF}
  .imp-tag.imp-tag-warn{background:#FEF3C7;color:#92400E}
  .import-merge{border:1px solid var(--gray);border-radius:10px;padding:12px 14px;margin-top:12px;background:var(--gray-soft)}
  .import-merge-lbl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
  .merge-opt{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;cursor:pointer;padding:4px 0;line-height:1.4}
  .merge-opt input{margin-top:3px;accent-color:var(--navy);flex-shrink:0}
  .del-ev-name{background:var(--gray-soft);border:1px solid var(--gray);border-radius:8px;padding:9px 13px;font-weight:700;font-size:14px;color:var(--charcoal);letter-spacing:.01em;margin-bottom:2px;word-break:break-word}

  .rep-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
  .rep-box{background:#fafafa;border:1px solid var(--gray-soft);border-radius:12px;padding:14px;text-align:center}
  .rep-box .n{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--navy)}
  .rep-box .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
  .rep-section h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:16px 0 8px}
  .rep-list{font-size:13.5px}
  .rep-list .ri{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid #efefef}
  .table-grp{margin-bottom:10px}
  .table-grp .tg-head{font-weight:700;font-size:13px;background:var(--navy-tint);color:var(--navy);padding:6px 10px;border-radius:7px;display:flex;justify-content:space-between}
  .table-grp .tg-body{padding:4px 10px;font-size:13px;color:var(--muted)}
  .export-row{display:flex;gap:8px;margin-top:18px}
  .export-row .btn{flex:1;justify-content:center}
  /* Dashboard executivo */
  .exec-card{background:linear-gradient(135deg,var(--navy) 0%,#2a3f6e 100%);color:#fff;border-radius:16px;padding:18px 16px;margin-bottom:14px}
  .exec-card .ec-title{font-size:11px;text-transform:uppercase;letter-spacing:.07em;opacity:.7;margin-bottom:10px}
  .exec-card .ec-big{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:6px}
  .exec-card .ec-sub{font-size:12.5px;opacity:.8;margin-bottom:4px;line-height:1.4}
  .exec-card .ec-highlight{background:rgba(255,255,255,.15);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:13px;font-weight:600}
  .exec-card .ec-highlight span{opacity:.7;font-weight:400;display:block;font-size:11px;margin-bottom:2px}
  /* Relatório operacional */
  .op-section{background:#fafafa;border:1px solid var(--gray-soft);border-radius:14px;padding:14px;margin-bottom:12px}
  .op-section h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px}
  .op-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:0}
  .op-kpi{background:#fff;border:1px solid var(--gray);border-radius:10px;padding:10px 12px}
  .op-kpi .ok-n{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1}
  .op-kpi .ok-l{font-size:11px;color:var(--muted);margin-top:4px}
  .op-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:13px}
  .op-bar-row .obl{width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--charcoal);font-size:12px}
  .op-bar-row .obt{flex:1;background:#ececec;border-radius:5px;height:16px;overflow:hidden}
  .op-bar-row .obt span{display:block;height:100%;background:var(--navy);border-radius:5px;min-width:2px}
  .op-bar-row .obv{width:30px;text-align:right;color:var(--muted);font-weight:700;font-size:12px}
  /* Alternador de visão (Cards / Planta) */
  .map-toggle{display:flex;gap:6px;margin-bottom:12px}
  .map-toggle button{flex:1;padding:7px 10px;border:1px solid var(--gray);border-radius:9px;background:#fff;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
  .map-toggle button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
  /* Toggle de visão proeminente (abaixo da barra de KPIs do mapa).
     São os dois botões principais da tela — desenhados como controle segmentado
     de alto contraste: o ativo fica preenchido (azul institucional) com ícone
     turquesa; o inativo é um botão de borda nítida (não fica "escondido"). */
  .tm-view-toggle{display:flex;gap:10px;background:#fff;border-bottom:1px solid #e6e9ee;padding:12px 18px;flex:none}
  .tm-view-toggle button{display:flex;align-items:center;gap:8px;padding:11px 24px;font-size:14.5px;font-weight:700;color:var(--navy);border:1.5px solid var(--gray);border-radius:11px;background:#fff;cursor:pointer;transition:transform .12s,background .12s,border-color .12s,box-shadow .12s;box-shadow:var(--shadow-xs)}
  .tm-view-toggle button:hover{border-color:var(--navy);background:var(--off-white);transform:translateY(-1px)}
  .tm-view-toggle button.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 6px 16px -6px rgba(21,44,107,.55)}
  .tm-view-toggle button.active .tvi{color:var(--cyan)}
  .tvi{font-size:17px}
  @media(max-width:520px){.tm-view-toggle{gap:8px;padding:10px 14px}.tm-view-toggle button{flex:1;justify-content:center;padding:11px 12px;font-size:13.5px;gap:6px}}
  /* ===== Modo Mapa — planta editável do salão ===== */
  .salao-wrap{margin:0 auto;width:100%}
  .salao-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  .salao-hint{font-size:12.5px;color:var(--muted);background:#fff;border:1px solid var(--gray-soft);border-radius:9px;padding:8px 12px}
  /* o salão: retângulo "planta baixa" com paredes e grade blueprint tênue */
  .salao{position:relative;width:100%;aspect-ratio:16/10;border:2px solid var(--navy);border-radius:16px;overflow:hidden;
    background-color:#fbfcfe;
    background-image:linear-gradient(rgba(21,44,107,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(21,44,107,.05) 1px,transparent 1px);
    background-size:5% 5%;
    box-shadow:inset 0 0 0 1px #fff,inset 0 2px 22px rgba(11,21,48,.07),var(--shadow-lg)}
  /* A entrada sugerida fica DENTRO do salão: com translate para fora ela era
     cortada pelo overflow:hidden e aparecia pela metade, "fora do mapa". */
  .salao-entrada{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:5;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--off-white);
    border:2px dashed var(--navy);border-radius:9px;padding:4px 18px;font-size:10px;font-weight:800;
    letter-spacing:.14em;color:var(--navy);transition:border-color .12s,background .12s}
  .salao-entrada:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,var(--off-white))}
  .salao-entrada small{font-size:8px;font-weight:600;letter-spacing:.02em;color:var(--muted);text-transform:none}
  @media (max-width:640px){ .salao-entrada small{display:none} }
  /* mesa arrastável — disco com anel de presença (turquesa) e borda do estado */
  .salao-mesa{position:absolute;width:var(--sz,68px);height:var(--sz,68px);transform:translate(-50%,-50%);
    cursor:grab;touch-action:none;--st:var(--st-empty);transition:filter .12s}
  /* ── Mesa em ESCALA REAL ────────────────────────────────────────────────
     O elemento passa a ser a ÁREA OCUPADA no chão (tampo + cadeiras), medida
     em % do salão. O tampo fica centralizado dentro dela e as cadeiras são
     desenhadas em volta, em SVG com coordenadas em metros. */
  .salao-mesa.em-escala{display:flex;align-items:center;justify-content:center}
  .salao-mesa.em-escala .salao-disc{width:var(--tampo-w,100%);height:var(--tampo-h,100%);flex:none}
  .salao-mesa.em-escala.shape-round  .salao-disc,
  .salao-mesa.em-escala.shape-bistro .salao-disc{border-radius:50%;aspect-ratio:auto}
  .salao-mesa.em-escala.shape-rect     .salao-disc{border-radius:8px;aspect-ratio:auto}
  .salao-mesa.em-escala.shape-imperial .salao-disc{border-radius:5px;aspect-ratio:auto}
  /* Cadeiras: o viewBox do SVG está em METROS, então stroke-width também. Uma
     linha de 0,04 m (4 cm) é o traço fino que se enxerga em qualquer zoom —
     vector-effect aqui deixaria o traço com 0,04 PIXEL, ou seja, invisível. */
  .salao-cadeiras{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
  .salao-cadeiras rect{fill:color-mix(in srgb,var(--st) 22%,#fff);stroke:var(--st);stroke-width:.04;opacity:.95}
  .salao-mesa.st-full .salao-cadeiras rect,
  .salao-mesa.st-over .salao-cadeiras rect{fill:color-mix(in srgb,var(--st) 42%,#fff)}
  /* números legíveis mesmo em mesa pequena: escala com o tamanho do elemento */
  .salao-mesa.em-escala .salao-num{font-size:clamp(9px,2.6cqw,26px)}
  .salao-mesa.em-escala .salao-occ{font-size:clamp(7px,1.5cqw,14px)}
  .salao.em-escala{container-type:size}
  .salao-mesa.dragging{cursor:grabbing;z-index:7}
  .salao-disc{position:relative;width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:conic-gradient(var(--present) calc(var(--pres,0)*1%),color-mix(in srgb,var(--st) 26%,#e1e8f0) 0);
    box-shadow:0 5px 12px rgba(11,21,48,.18),0 1px 2px rgba(11,21,48,.12);transition:transform .1s,box-shadow .12s}
  .salao-disc::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff;border:2px solid var(--st)}
  .salao-mesa:hover .salao-disc{transform:scale(1.05)}
  .salao-mesa.dragging .salao-disc{transform:scale(1.1);box-shadow:0 16px 30px rgba(11,21,48,.30)}
  .salao-num{position:relative;z-index:1;font-family:var(--display);font-weight:700;color:var(--navy);font-size:calc(var(--sz,68px)*.3);line-height:1}
  .salao-occ{position:relative;z-index:1;font-size:calc(var(--sz,68px)*.16);color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums;line-height:1;margin-top:1px}
  .salao-label{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:800;color:var(--present)}
  .salao-mesa.st-empty .salao-label{color:var(--muted)}
  .salao-over{position:absolute;top:-6px;right:-6px;z-index:2;width:20px;height:20px;border-radius:50%;background:var(--st-over);color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:11px}
  .salao-mesa.st-empty{--st:var(--st-empty)} .salao-mesa.st-partial{--st:var(--st-partial)}
  .salao-mesa.st-full{--st:var(--st-full)} .salao-mesa.st-over{--st:var(--st-over)} .salao-mesa.st-na{--st:var(--st-empty)}
  .salao-mesa.sel .salao-disc{box-shadow:0 0 0 3px var(--cyan),0 5px 12px rgba(11,21,48,.18)}
  /* ===== Seleção múltipla de mesas (igual a marcar ícones na área de trabalho) ===== */
  .salao-mesa.msel{z-index:7}
  .salao-mesa.msel .salao-disc{box-shadow:0 0 0 3px var(--cyan),0 0 0 7px color-mix(in srgb,var(--cyan) 26%,transparent),0 6px 14px rgba(11,21,48,.22)}
  .salao-mesa.msel .salao-cadeiras rect{stroke:var(--cyan)}
  .salao-lasso{position:absolute;z-index:8;pointer-events:none;border-radius:4px;
    border:1.5px dashed var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent)}
  /* Com o modo seleção ligado o dedo desenha o laço em vez de rolar a tela. */
  .salao.sel-mode{touch-action:none;cursor:crosshair}
  .mesa-selbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;
    border-radius:12px;border:1.5px solid var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,#fff);font-size:13px}
  .mesa-selbar__n{font-weight:800;color:var(--navy);white-space:nowrap}
  .mesa-selbar__hint{color:var(--muted);font-size:12px}
  .mesa-selbar__acts{margin-left:auto;display:flex;gap:6px}
  .salao-mesa.tm-pulse .salao-disc{animation:tmPulse 1.6s ease-out 1}
  /* ===== Editor de planta — elementos do salão (palco, bar, parede, ...) ===== */
  .salao-mesa{z-index:6} /* mesas sempre acima dos elementos estruturais */
  .salao-bar__actions{display:flex;gap:8px;flex-wrap:wrap}
  .salao-stage{display:flex;gap:14px;align-items:flex-start}
  .salao-stage .salao{flex:1;min-width:0}
  .salao-el{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    border-radius:10px;border:1.5px solid var(--el-bd,#9fb0c9);background:var(--el-bg,#eef2f8);color:var(--el-ink,#33415c);
    font-size:11px;font-weight:700;text-align:center;overflow:hidden;user-select:none;box-shadow:0 2px 6px rgba(11,21,48,.08)}
  .salao-el__ic{font-size:15px;line-height:1}
  .salao-el__lb{line-height:1.05;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  /* Medida real da peça: discreta, menor que o nome — informa sem competir. */
  .salao-el__m{font-size:9px;font-weight:700;line-height:1.05;opacity:.72;letter-spacing:.01em;
    font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .salao-el--zona .salao-el__m{font-size:10px;opacity:.6}
  @media (max-width:640px){ .salao-el__m{font-size:8px} }
  .salao-el.editable{cursor:grab;touch-action:none}
  .salao-el.editable.dragging{cursor:grabbing;z-index:4!important;box-shadow:0 14px 28px rgba(11,21,48,.26)}
  .salao-el.sel{outline:2.5px solid var(--cyan);outline-offset:2px;overflow:visible}
  .salao-el__rz{position:absolute;right:-7px;bottom:-7px;width:16px;height:16px;border-radius:50%;background:var(--cyan);
    border:2px solid #fff;cursor:nwse-resize;touch-action:none;box-shadow:0 2px 5px rgba(11,21,48,.3);z-index:5}
  .salao-el--palco{--el-bg:#ede9fe;--el-bd:#8b7ff0;--el-ink:#4c1d95}
  .salao-el--pista{--el-bg:#fae8ff;--el-bd:#d56ee8;--el-ink:#86198f}
  .salao-el--bar{--el-bg:#ccfbf1;--el-bd:#2dd4bf;--el-ink:#115e59}
  .salao-el--buffet{--el-bg:#fef3c7;--el-bd:#f0b429;--el-ink:#92400e}
  .salao-el--recepcao{--el-bg:#dbeafe;--el-bd:#60a5fa;--el-ink:#1e40af}
  .salao-el--entrada{--el-bg:#dcfce7;--el-bd:#34d399;--el-ink:#166534}
  .salao-el--saida{--el-bg:#ffe4e6;--el-bd:#fb7185;--el-ink:#9f1239}
  /* novos tipos (montagem do evento) */
  .salao-el--backdrop{--el-bg:#ede9fe;--el-bd:#a78bfa;--el-ink:#5b21b6}
  .salao-el--painel{--el-bg:#e0e7ff;--el-bd:#818cf8;--el-ink:#3730a3}
  .salao-el--coffee{--el-bg:#f5e6d8;--el-bd:#c8915b;--el-ink:#7c4a1e}
  .salao-el--credenciamento{--el-bg:#cffafe;--el-bd:#22d3ee;--el-ink:#155e75}
  .salao-el--cabine_foto{--el-bg:#fce7f3;--el-bd:#f472b6;--el-ink:#9d174d}
  .salao-el--totem{--el-bg:#e2e8f0;--el-bd:#94a3b8;--el-ink:#334155}
  .salao-el--tv{--el-bg:#e2e8f0;--el-bd:#64748b;--el-ink:#1e293b}
  .salao-el--projetor{--el-bg:#e2e8f0;--el-bd:#64748b;--el-ink:#1e293b}
  .salao-el--som{--el-bg:#e2e8f0;--el-bd:#64748b;--el-ink:#1e293b}
  .salao-el--gerador{--el-bg:#fef9c3;--el-bd:#eab308;--el-ink:#854d0e}
  .salao-el--saida_emergencia{--el-bg:#fee2e2;--el-bd:#ef4444;--el-ink:#991b1b}
  .salao-el--banheiro{--el-bg:#dbeafe;--el-bd:#60a5fa;--el-ink:#1e40af}
  .salao-el--extintor{--el-bg:#fee2e2;--el-bd:#ef4444;--el-ink:#991b1b}
  /* elemento com observação ganha um cantinho indicando que há nota */
  .salao-el.has-note::after{content:'';position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 1.5px #fff}
  .salao-el--parede{--el-bg:#64748b;--el-bd:#475569;border-radius:4px}
  .salao-el--divisoria{--el-bg:repeating-linear-gradient(90deg,#94a3b8 0 8px,transparent 8px 14px);--el-bd:transparent;border-radius:4px}
  .salao-el--parede .salao-el__ic,.salao-el--parede .salao-el__lb,
  .salao-el--divisoria .salao-el__ic,.salao-el--divisoria .salao-el__lb{display:none}
  /* seletor de cor do formulário de propriedades do elemento */
  .fp-colors{display:flex;gap:8px;flex-wrap:wrap}
  .fp-color{width:30px;height:30px;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px var(--gray);cursor:pointer;padding:0;transition:transform .1s}
  .fp-color:hover{transform:scale(1.08)}
  .fp-color.active{box-shadow:0 0 0 2px var(--cyan)}
  .fp-color--none{background:#fff;color:var(--muted);font-size:15px;display:flex;align-items:center;justify-content:center}
  /* biblioteca de layouts (montagens salvas) */
  .ly-new{display:flex;gap:8px;align-items:center;margin-bottom:6px}
  .ly-new input{flex:1}
  .ly-list{display:flex;flex-direction:column;gap:8px}
  .ly-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--gray-soft);border-radius:10px;padding:10px 12px;background:#fff;flex-wrap:wrap}
  .ly-info{display:flex;flex-direction:column;min-width:0}
  .ly-name{font-weight:700;font-size:14px;color:var(--charcoal)}
  .ly-meta{font-size:11.5px;color:var(--muted)}
  .ly-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  /* paleta lateral de elementos */
  .planta-palette{flex:0 0 172px;background:#fff;border:1px solid var(--gray-soft);border-radius:14px;padding:12px;box-shadow:var(--shadow-sm)}
  .planta-palette__h{font-family:var(--display);font-weight:700;color:var(--navy);font-size:14px;margin-bottom:10px}
  .pal-group{margin-bottom:12px}
  .pal-group__t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
  .pal-items{display:flex;flex-direction:column;gap:6px}
  .pal-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:1px solid var(--gray-soft);border-radius:9px;
    background:#fbfcfe;font-size:12.5px;font-weight:600;color:var(--charcoal);cursor:pointer;text-align:left;transition:background .12s,border-color .12s}
  .pal-item:hover{background:#eef4ff;border-color:var(--cyan)}
  .pal-item__ic{font-size:15px}
  .planta-palette__hint{font-size:11px;color:var(--muted);line-height:1.4;margin-top:6px;border-top:1px dashed var(--gray-soft);padding-top:8px}
  /* mini-barra do elemento selecionado */
  .planta-eltools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#0b1530;color:#fff;border-radius:11px;padding:8px 12px;margin-bottom:12px}
  .planta-eltools__name{font-weight:700;font-size:13px;margin-right:auto}
  .planta-eltools .btn{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}
  .planta-eltools .btn:hover{background:rgba(255,255,255,.22)}
  .planta-eltools .btn.danger{background:rgba(239,68,68,.28)}
  .planta-eltools .btn.danger:hover{background:rgba(239,68,68,.5)}
  /* renomear rápido no painel lateral da mesa */
  .tm-ren{background:none;border:none;cursor:pointer;font-size:13px;opacity:.55;padding:0 2px}
  .tm-ren:hover{opacity:1}
  .tm-ren-row{display:flex;gap:6px;align-items:center;margin-top:3px}
  .tm-ren-row input{flex:1;min-width:0;padding:5px 8px;border:1.5px solid var(--cyan);border-radius:7px;font-size:14px;font-weight:700;color:var(--navy)}
  @media (max-width:640px){ .salao-stage{flex-direction:column} .planta-palette{flex:none;width:100%} }
  /* No celular a barra vira bloco: contagem em cima, botões grandes embaixo.
     A dica some — quem está de dedo na tela não tem teclado nem laço de mouse. */
  @media (max-width:720px){
    .mesa-selbar{flex-direction:column;align-items:stretch;gap:8px}
    .mesa-selbar__hint{display:none}
    .mesa-selbar__acts{margin-left:0;width:100%}
    .mesa-selbar__acts .btn{flex:1}
  }
  /* impressão da planta */
  .salao-print-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;border-bottom:2px solid var(--navy);padding-bottom:8px}
  .salao-print-head h2{font-family:var(--display);font-size:19px;color:var(--navy)}
  .salao-print-head span{font-size:12px;color:var(--muted);font-weight:600}
  .salao--print{aspect-ratio:16/10}
  .salao-print-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 4px}
  .salao-print-legend .spl-i{font-size:11px;font-weight:600;color:var(--charcoal)}
  .salao-print-list{margin-top:16px;break-inside:avoid}
  .salao-print-list h3{font-family:var(--display);font-size:14px;color:var(--navy);margin-bottom:6px}
  .salao-print-list table{width:100%;border-collapse:collapse;font-size:11.5px}
  .salao-print-list th{text-align:left;background:#f1f5f9;color:var(--navy);padding:5px 8px;border:1px solid #e2e8f0;font-weight:700}
  .salao-print-list td{padding:5px 8px;border:1px solid #e2e8f0;color:var(--charcoal);vertical-align:top}
  .tm-empty{color:var(--muted);font-style:italic;padding:30px 4px;text-align:center;grid-column:1/-1}
  /* Auditoria */
  .audit-screen{padding:4px 0}
  .audit-filter{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .audit-filter input{flex:1;padding:9px 12px;border:1px solid var(--gray);border-radius:9px;font-size:13px;background:#fafafa;min-width:0}
  .audit-stats{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
  .audit-stat{background:#fafafa;border:1px solid var(--gray-soft);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--muted)}
  .audit-stat b{display:block;font-size:16px;color:var(--navy);font-weight:800}

  /* Bloco 7 — textarea, observações, filtro empresa, ficha histórico, feed, painel ao vivo */
  .field textarea{width:100%;padding:11px 12px;border:1px solid var(--gray);border-radius:10px;background:#fafafa;font-family:inherit;font-size:16px;resize:vertical}
  .field textarea:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:transparent;background:#fff}
  .guest .gnote{font-size:12.5px;color:var(--warn);background:var(--amber-tint);border-radius:6px;padding:3px 8px;margin-top:5px;display:inline-block;line-height:1.35}
  .comp-filter{display:flex;align-items:center;gap:8px;margin:0 0 14px}
  .comp-filter .cf-ic{color:var(--navy);font-size:15px}
  .comp-filter select{flex:1;max-width:340px;padding:8px 10px;border:1px solid var(--gray);border-radius:9px;background:#fff;font-size:13.5px;color:var(--charcoal)}
  .comp-filter .cf-clear{font-size:12.5px;color:var(--navy);font-weight:600;text-decoration:underline}

  /* Alternador de visão Lista | Mesas */
  .seg{display:inline-flex;border:1px solid var(--gray);border-radius:999px;overflow:hidden;background:#fff;margin-left:auto}
  .seg-btn{font-size:12.5px;font-weight:700;padding:7px 14px;color:var(--muted);background:transparent;white-space:nowrap}
  .seg-btn.on{background:var(--navy);color:#fff}
  /* Filtros avançados (Mesa / Empresa / Ordenar) */
  .adv-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
  .adv-ctl{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--gray);border-radius:10px;background:#fff;padding:0 8px;min-width:0}
  .adv-ctl .adv-ic{color:var(--navy);font-size:14px;font-weight:700}
  .adv-ctl select{border:0;background:transparent;padding:9px 4px;font-size:12.5px;font-weight:600;color:var(--charcoal);max-width:200px;cursor:pointer}
  .adv-ctl select:focus{outline:none}
  /* Destaque VIP (Problema 10) */
  .guest.vip{border-left:4px solid #d4af37;background:linear-gradient(90deg,#fffdf3,#fff)}
  .guest.vip.present{background:linear-gradient(90deg,#fefce8,#f0fdf4)}
  .vip-star{font-size:13px;line-height:1}
  /* Agrupamento por mesa (Problema 9) */
  .tbl-group{border:1px solid var(--gray-soft);border-radius:12px;overflow:hidden;margin-bottom:10px;background:#fff}
  .tbl-head{width:100%;display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--navy-tint);color:var(--navy);font-weight:700;font-size:14.5px}
  .tbl-arrow{transition:transform .15s;font-size:12px}
  .tbl-group.collapsed .tbl-arrow{transform:rotate(-90deg)}
  .tbl-name{flex:1;text-align:left}
  .tbl-meta{font-size:12.5px;font-weight:700;color:var(--navy);background:#fff;border-radius:999px;padding:2px 10px}
  .tbl-body{display:flex;flex-direction:column;gap:8px;padding:10px}
  .tbl-group.collapsed .tbl-body{display:none}
  .hist-card{background:var(--off-white);border:1px solid var(--gray-soft);border-radius:12px;padding:6px 14px;margin-bottom:8px}
  .hist-card .hr{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #e7e7e7;font-size:13.5px}
  .hist-card .hr:last-child{border-bottom:none}
  .hist-card .hr span{color:var(--muted)}
  .hist-card .hr b{text-align:right}
  .feed{font-size:13.5px}
  .feed .fi{display:flex;align-items:flex-start;gap:9px;padding:9px 2px;border-bottom:1px solid #efefef}
  .feed .fic{flex:none;width:22px;height:22px;border-radius:50%;background:var(--navy-tint);color:var(--navy);font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
  .feed .ft{flex:1;line-height:1.4}
  .feed .time{flex:none;color:var(--muted);font-size:12px;white-space:nowrap}
  /* minmax(0,1fr): sem isso, cada coluna de grid herda a largura MÍNIMA do
     conteúdo (o número + o rótulo), e numa tela estreita a soma das 4 colunas
     passa da largura do modal — empurrando tudo pra fora (a causa raiz do
     modal "andando" na tela). Com minmax(0,1fr) a coluna pode encolher e o
     texto quebra a linha em vez de forçar largura. */
  .live-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
  .live-box{background:var(--off-white);border:1px solid var(--gray-soft);border-radius:12px;padding:12px 6px;text-align:center}
  .live-box.hl{background:#f0fdf4;border-color:#bbf7d0}
  .live-box .n{font-size:26px;font-weight:800;color:var(--navy)}
  .live-box.hl .n{color:#15803d}
  .live-box .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
  .live-bar-wrap{height:8px;background:var(--gray-soft);border-radius:999px;overflow:hidden;margin-bottom:6px}
  .live-pct{height:100%;background:var(--cyan);transition:width .4s}
  .live-insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 4px}
  .li-box{background:#fff;border:1px solid var(--gray-soft);border-radius:10px;padding:9px 6px;text-align:center}
  .li-box b{display:block;font-size:15px;font-weight:800;color:var(--navy);font-family:var(--display)}
  .li-box span{font-size:10.5px;color:var(--muted)}
  .lb-chart{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:14px}
  .lb-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
  .lb-bar{width:100%;min-height:2px;background:var(--cyan);border-radius:4px 4px 0 0;position:relative;transition:height .4s}
  .lb-bar .lb-v{position:absolute;top:-13px;left:0;right:0;text-align:center;font-size:10px;font-weight:700;color:var(--navy)}
  .lb-x{font-size:9.5px;color:var(--muted);margin-top:3px;height:12px}

  /* Bloco 8 — QR: leitura, crachá */
  .scan-tabs{display:flex;background:var(--off-white);border-radius:10px;padding:4px;margin-bottom:12px}
  .scan-tabs button{flex:1;padding:9px;border-radius:8px;font-weight:700;font-size:13px;color:var(--muted)}
  .scan-tabs button.on{background:#fff;color:var(--navy);box-shadow:var(--shadow)}
  .scan-result{min-height:0;margin-bottom:10px}
  .scan-result.ok,.scan-result.warn,.scan-result.err{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;margin-bottom:14px;min-height:64px}
  .scan-result.ok{background:#f0fdf4;border:1px solid #bbf7d0}
  .scan-result.warn{background:var(--amber-tint);border:1px solid #ecd9b0}
  .scan-result.err{background:#fbeaea;border:1px solid #f0cdcd}
  .scan-result .sr-ic{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#fff}
  .scan-result.ok .sr-ic{background:#16a34a}
  .scan-result.warn .sr-ic{background:var(--warn)}
  .scan-result.err .sr-ic{background:var(--danger)}
  .scan-result b{font-size:16px}
  .scan-result .sr-sub{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
  .qr-cam{width:100%;max-width:320px;margin:0 auto;border-radius:12px;overflow:hidden;background:#000;min-height:60px}
  .qr-cam video{width:100%!important;display:block}
  .qr-card{background:#fff;border:1px solid var(--gray-soft);border-radius:14px;padding:22px;text-align:center;box-shadow:var(--shadow)}
  .qr-card .qr-name{font-size:18px;font-weight:800;color:var(--charcoal);margin-top:12px}
  .qr-card .qr-comp{font-size:13px;color:var(--muted);margin-top:2px}
  .qr-card .qr-token{font-size:18px;letter-spacing:.35em;color:var(--navy);font-weight:700;margin-top:8px}

  /* Admin */
  .u-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #efefef}
  .u-row .ui{flex:1;min-width:0}
  .u-row .un{font-weight:700;font-size:14px}
  .u-row .ue{font-size:12px;color:var(--muted)}
  .u-row select{padding:7px 8px;border:1px solid var(--gray);border-radius:8px;background:#fafafa;font-size:13px}
  .badge-you{font-size:10px;font-weight:800;background:var(--cyan-soft);color:#127a83;padding:2px 7px;border-radius:6px;letter-spacing:.04em}

  /* Painel de resumo (mini-dashboard) */
  .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 22px}
  .kpi-card{background:#fff;border:1px solid var(--gray-soft);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
  .kpi-card .kv{font-size:26px;font-weight:800;color:var(--navy);line-height:1.1}
  .kpi-card .kl{font-size:12px;color:var(--muted);margin-top:4px;font-weight:600}
  .panel{background:#fff;border:1px solid var(--gray-soft);border-radius:14px;box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
  .panel h2{font-size:14px;color:var(--navy);padding:14px 18px;border-bottom:1px solid #efefef;font-weight:800}
  .panel .pbody{padding:6px 18px 12px}
  .ev-line{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f3f3f3}
  .ev-line:last-child{border-bottom:none}
  .ev-line .en{flex:1;min-width:0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ev-line .ed{font-size:12px;color:var(--muted);min-width:74px;text-align:right}
  .ev-line .ep{font-size:14px;font-weight:800;color:var(--navy);min-width:46px;text-align:right}
  .log-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #f3f3f3;font-size:13px}
  .log-row:last-child{border-bottom:none}
  .log-row .lt{color:var(--muted);font-size:11.5px;min-width:96px}
  .log-row .la{flex:1;min-width:0}
  .log-row .la b{font-weight:700}
  .log-row .ld{color:var(--muted);font-size:12px}
  .admin-cta{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px}
  @media(max-width:520px){ .kpi-grid{grid-template-columns:repeat(2,1fr)} }

  /* Filtros do feed de atividade — linha compacta no desktop, empilhado no mobile */
  .act-filters{align-items:center;margin-bottom:14px}
  .act-filters select, .act-filters input[type=date]{width:auto;padding:9px 11px;font-size:13px;border:1px solid var(--gray);border-radius:9px;background:#fff}
  .act-filters .search{width:auto}
  @media(min-width:769px){
    .act-filters{flex-wrap:nowrap}
    .act-filters select{max-width:160px}
    .act-filters input[type=date]{max-width:150px}
  }
  @media(max-width:768px){
    .act-filters{flex-direction:column;align-items:stretch}
    .act-filters .search, .act-filters select, .act-filters input[type=date]{width:100%;max-width:none}
  }

  /* Selo de origem + código de referência do evento */
  .ev-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:5px 0 2px}
  .ev-selo{font-size:10px;font-weight:800;background:var(--navy);color:#fff;padding:2px 8px;border-radius:6px;letter-spacing:.03em}
  .ev-ref{font-size:10.5px;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eef0f4;color:#4a5673;padding:2px 7px;border-radius:6px;letter-spacing:.04em}

  .menu-pop{position:fixed;z-index:60;background:#fff;border:1px solid var(--gray-soft);border-radius:11px;box-shadow:0 12px 32px rgba(0,0,0,.16);overflow:hidden;min-width:185px}
  .menu-pop button{display:block;width:100%;text-align:left;padding:11px 15px;font-size:14px;color:var(--charcoal);display:flex;align-items:center;gap:8px}
  .menu-pop button svg,.menu-pop a svg{width:15px;height:15px;flex:none}
  .menu-pop button:hover{background:#f5f5f5}
  .menu-pop button.danger{color:var(--danger)}

  /* z-index acima de TUDO (mapa de mesas = 100, modais = 130, confirmação =
     200, editor de credencial = 1000). Com 80 o aviso ficava PINTADO ATRÁS da
     tela do mapa: erro de gravação, "salão reorganizado", botão Desfazer —
     nada disso chegava ao operador justamente na tela em que acontece. */
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:11px;font-size:14px;font-weight:500;z-index:2000;opacity:0;transition:.25s;box-shadow:0 8px 24px rgba(0,0,0,.25)}
  /* Escondido de verdade quando não está mostrando, para não roubar o clique
     de quem está arrastando mesa perto do rodapé. */
  .toast:not(.show){pointer-events:none}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  .config-warn{max-width:560px;margin:60px auto;background:#fff;border:1px solid var(--gray);border-radius:16px;padding:28px;line-height:1.6}
  .config-warn h2{color:var(--navy);margin-bottom:10px}
  .config-warn code{background:var(--off-white);padding:2px 7px;border-radius:6px;font-size:13px}

  /* ===== Layout de duas colunas — desktop ===== */
  .ev-layout{display:flex;flex-direction:column;gap:0}
  .ev-left{display:contents}
  .ev-right{display:contents}

  @media(min-width:1024px){
    .ev-layout{display:grid;grid-template-columns:340px 1fr;gap:0 28px;align-items:start}
    .ev-left{display:flex;flex-direction:column;gap:14px;position:sticky;top:76px;max-height:calc(100vh - 90px);overflow-y:auto}
    .ev-right{display:flex;flex-direction:column;gap:0;min-width:0}
    /* Stats maiores no painel esquerdo */
    .ev-left .stats{display:flex;flex-direction:column;gap:10px;background:none;border:none;border-radius:0;margin-bottom:0}
    .ev-left .stat{background:var(--white);border:1px solid var(--gray-soft);border-radius:14px;padding:20px 20px 18px;text-align:left;box-shadow:var(--shadow);display:flex;align-items:center;gap:16px}
    .ev-left .stat .n{font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1;min-width:80px}
    .ev-left .stat.hl{background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);border-color:#bbf7d0}
    .ev-left .stat.hl .n{color:#16a34a}
    .ev-left .stat .l{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:0;font-weight:600}
    /* Esconde syncbar no painel esquerdo — fica inline no ev-title-meta do desktop */
    .ev-left .syncbar{border-radius:12px;flex-wrap:wrap}
    /* Queue panel maior */
    .ev-left .queue-panel{border-radius:12px;font-size:14px;padding:12px 16px}
    /* ev-title no desktop */
    .ev-left .ev-title h2{font-size:22px}
    /* Overbooking banner no painel direito */
    .ev-right .ob-banner{margin-top:0}
  }

  @media(max-width:520px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .actions .btn span.lbl{display:none}
    .actions .btn{padding:10px 12px}
    .topbar .appname{display:none}
  }
  /* ── Seating Chart (Mapa de mesas imprimível) ── */
  .sc-overlay{position:fixed;inset:0;z-index:100;background:#f4f6f8;display:none;flex-direction:column;overflow:hidden}
  .sc-wrap{display:flex;flex-direction:column;height:100%;overflow:hidden}
  .sc-topbar{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:#fff;border-bottom:1px solid #e0e0e0;flex-wrap:wrap;flex:none}
  .sc-back-btn{padding:7px 14px;border:1px solid var(--gray);border-radius:9px;background:#fff;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;white-space:nowrap}
  .sc-font-ctrl{display:flex;align-items:center;gap:4px;border:1px solid var(--gray);border-radius:9px;padding:4px 8px;background:#fafafa}
  .sc-font-ctrl button{width:24px;height:24px;border:none;background:none;font-size:16px;font-weight:700;cursor:pointer;color:var(--navy);line-height:1}
  .sc-font-val{min-width:22px;text-align:center;font-size:13px;font-weight:700;color:var(--charcoal)}
  .sc-font-lbl{font-size:11px;color:var(--muted);margin-left:2px}
  .sc-view-ctrl{display:flex;border:1px solid var(--gray);border-radius:9px;overflow:hidden;background:#fafafa}
  .sc-view-ctrl button{padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--muted);border:none;cursor:pointer;background:transparent}
  .sc-view-ctrl button.on{background:var(--navy);color:#fff}
  .sc-hide-btn,.sc-print-btn{padding:7px 13px;border:1px solid var(--gray);border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
  .sc-hide-btn{background:#fafafa;color:var(--charcoal)}
  .sc-print-btn{background:var(--cyan);color:var(--navy-deep);border-color:var(--cyan);margin-left:auto}
  .sc-hide-panel{background:#fff;border-bottom:1px solid #ddd;padding:14px 18px;display:none;flex:none}
  .sc-hp-title{font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:10px}
  .sc-hp-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:13.5px;cursor:pointer}
  .sc-hp-row:last-child{border-bottom:none}
  .sc-eye{background:none;border:none;font-size:18px;cursor:pointer;padding:0 4px;line-height:1}
  .sc-eye.hidden{opacity:.35}
  .sc-body{flex:1;overflow-y:auto;padding:20px 18px}
  .sc-header{display:flex;align-items:flex-start;gap:16px;background:#fff;border:1px solid #e0e0e0;border-radius:16px;padding:18px 20px;margin-bottom:22px}
  .sc-hico{font-size:42px;flex:none;width:56px;height:56px;background:#e8f4f8;border-radius:50%;display:flex;align-items:center;justify-content:center}
  .sc-hico svg{width:28px;height:28px;flex:none}
  .sc-hinfo{flex:1;min-width:0}
  .sc-htitle{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
  .sc-hname{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:2px}
  .sc-hdate{font-size:13px;color:var(--charcoal);margin-bottom:2px;display:flex;align-items:center;gap:5px}
  .sc-hdate svg{width:13px;height:13px;flex:none}
  .sc-hmeta{font-size:12.5px;color:var(--muted)}
  .sc-hstats{display:flex;gap:18px;flex:none}
  .sc-hstat{text-align:center;padding:0 8px}
  .sc-hstat b{display:block;font-size:22px;font-weight:800;color:var(--navy);line-height:1}
  .sc-hstat.hl b{color:#15803d}
  .sc-hstat span{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
  .sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
  .sc-tcard{background:#fff;border:1px solid #ddd;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
  .sc-tname{font-size:1.05em;font-weight:800;color:var(--navy);text-align:center;padding-bottom:8px;border-bottom:1px solid #eee}
  .sc-tnote{font-size:.8em;color:var(--muted);text-align:center;font-style:italic;margin-top:-2px}
  .sc-glist{flex:1;padding:4px 0}
  .sc-gline{display:flex;align-items:center;gap:4px;padding:2px 0;font-size:.9em;line-height:1.4}
  .sc-gline.empty{opacity:.45}
  .sc-idx{color:var(--muted);font-size:.82em;min-width:18px;flex:none}
  .sc-gn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sc-muted{color:var(--muted)}
  .sc-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#ddd;margin-left:4px}
  .sc-dot.pres{background:#15795B}
  .sc-dot.wait{background:#d4841a}
  .sc-tcap{font-size:.82em;color:var(--muted);text-align:right;padding-top:6px;border-top:1px solid #eee;margin-top:4px}
  .sc-empty-msg{color:var(--muted);font-size:.85em;text-align:center;padding:10px 0;font-style:italic}
  .sc-list-tbl{width:100%;border-collapse:collapse;font-size:1em}
  .sc-list-tbl th{background:var(--navy);color:#fff;padding:8px 12px;text-align:left;font-size:.88em;font-weight:700}
  .sc-list-tbl td{padding:6px 12px;border-bottom:1px solid #eee;vertical-align:top}
  .sc-list-tbl tr:last-child td{border-bottom:none}
  .sc-foot{padding:16px 18px;background:#fff;border-top:1px solid #e0e0e0;display:flex;justify-content:center;flex:none}

  @media(max-width:600px){
    .sc-topbar{gap:6px}
    .sc-hstats{gap:10px}
    .sc-hstat b{font-size:18px}
    .sc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
    .sc-print-btn{margin-left:0}
  }

  /* ===== Mapa de mesas — página inteira ===== */
  .tm-overlay{position:fixed;inset:0;z-index:100;background:#f4f6f8;display:none;flex-direction:column;overflow:hidden}
  .tm-wrap{display:flex;flex-direction:column;height:100%;overflow:hidden}
  .tm-topbar{display:flex;align-items:center;gap:12px;padding:calc(11px + env(safe-area-inset-top)) 18px 11px;background:#fff;border-bottom:1px solid #e6e9ee;flex-wrap:wrap;flex:none}
  .tm-back{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--gray);border-radius:10px;background:#fff;font-size:18px;font-weight:700;color:var(--navy);cursor:pointer;line-height:1}
  .tm-back:hover{background:#f3f4f6}
  /* evento é o protagonista; "mapa de mesas" vira sobrescrito (eyebrow) */
  .tm-titleblock{display:flex;flex-direction:column;line-height:1.1;min-width:0;margin-right:4px}
  .tm-eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .tm-event{font-family:var(--display);font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.02em;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
  .tm-search{position:relative;flex:1;min-width:190px;margin:0}
  .tm-searchres{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20}
  .tm-searchres .map-res{margin-bottom:0;background:#fff;box-shadow:var(--shadow-lg)}
  .tm-nores{font-size:13px;color:var(--muted);background:#fff;border:1px solid var(--gray);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow-lg)}
  .map-res-ok{color:var(--present);font-weight:800}
  .map-res-h{padding:8px 12px;background:var(--navy-tint);color:var(--navy);font-size:12px;font-weight:700;
    border-bottom:1px solid var(--gray);line-height:1.4}
  .map-res-n{display:flex;flex-direction:column;gap:1px;min-width:0}
  .map-res-n small{font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .map-res-more{padding:7px 12px;font-size:11.5px;color:var(--muted);text-align:center;border-top:1px solid var(--gray-soft)}
  .tm-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .tm-toggle{flex:none;width:auto;margin-bottom:0}
  .tm-toggle button{flex:none}
  .tm-zoom{display:flex;align-items:center;gap:4px;border:1px solid var(--gray);border-radius:9px;padding:3px 6px;background:#fafafa}
  .tm-zoom button{width:24px;height:24px;border:none;background:none;font-size:16px;font-weight:700;cursor:pointer;color:var(--navy);line-height:1}
  .tm-zoom span{min-width:40px;text-align:center;font-size:12.5px;font-weight:700;color:var(--charcoal)}
  /* faixa de KPIs — métricas operacionais sempre visíveis */
  .tm-kpibar{display:flex;align-items:center;gap:22px;padding:11px 20px;background:#fff;border-bottom:1px solid #e6e9ee;flex:none;flex-wrap:wrap}
  .tm-kpi{display:flex;flex-direction:column;line-height:1}
  .tm-kpi__n{font-family:var(--display);font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
  .tm-kpi__l{font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
  .tm-kpi--present .tm-kpi__n{color:var(--present)}
  .tm-kpi--soft .tm-kpi__n{font-size:17px;color:var(--charcoal)}
  .tm-legend{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap;font-size:11.5px;color:var(--muted);font-weight:600}
  .tm-legend span{display:flex;align-items:center;gap:5px}
  .lg-dot{width:11px;height:11px;border-radius:50%;display:inline-block;background:var(--st-empty)}
  .lg-dot.st-empty{background:var(--st-empty)} .lg-dot.st-partial{background:var(--st-partial)}
  .lg-dot.st-full{background:var(--st-full)} .lg-dot.st-over{background:var(--st-over);box-shadow:0 0 0 1.5px #ffcf33}
  .tm-main{flex:1;display:flex;overflow:hidden;min-height:0}
  .tm-grid-area{flex:1;overflow-y:auto;padding:20px;font-size:calc(13px*var(--tm-scale,1))}
  .tm-grid-area .tm-grid{grid-template-columns:repeat(auto-fill,minmax(calc(174px*var(--tm-scale,1)),1fr))}
  .tcard.sel{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan)}
  .tcard.tm-drop{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan)}
  .tcard.tm-drop .tcard__accent{background:var(--cyan)}
  /* Mesa da planta como alvo de soltar convidado (arrastar do painel lateral) */
  .salao-mesa.tm-drop .salao-disc{box-shadow:0 0 0 3px var(--cyan)}
  /* Botão ⇄ "mover de mesa" — alternativa ao arrasto (única opção no toque) */
  .tm-move-btn{flex-shrink:0;border:1px solid #dbe2ea;background:#fff;color:var(--navy);border-radius:8px;width:30px;height:30px;font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .tm-move-btn:hover{background:#f0f4ff;border-color:var(--cyan)}
  @media(pointer:coarse){ .tm-move-btn{width:42px;height:42px;font-size:17px} }
  .tm-side{flex:none;width:0;overflow:hidden;background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column;transition:width .18s}
  .tm-side.open{width:368px;overflow-y:auto}
  .tm-side-head{position:sticky;top:0;background:#fff;display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid #eee;z-index:1;border-left:5px solid var(--st,var(--gray))}
  .tm-side-head.st-empty{--st:var(--st-empty)} .tm-side-head.st-partial{--st:var(--st-partial)}
  .tm-side-head.st-full{--st:var(--st-full)} .tm-side-head.st-over{--st:var(--st-over)} .tm-side-head.st-na{--st:var(--st-empty)}
  .tm-side-id{display:flex;flex-direction:column;line-height:1;flex:1;min-width:0}
  .tm-side-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
  .tm-side-head h3{font-family:var(--display);font-size:21px;font-weight:700;color:var(--navy);margin-top:2px}
  .tm-side-head .tcard__state{position:static}
  .tm-side-head .x{font-size:22px;color:var(--muted);line-height:1;background:none;border:none;cursor:pointer;padding:0 2px}
  .tm-side-body{padding:15px 16px}
  .tm-side-hint{font-size:12px;color:var(--muted);background:#f6f8fa;border-radius:8px;padding:8px 10px;margin-bottom:12px;line-height:1.4}
  /* ── Linha compacta do painel da mesa ──────────────────────────────────────
     O painel serve para ORGANIZAR mesas: quanto mais nomes couberem na tela,
     menos rolagem para achar quem se quer mover. Nome em uma linha só (o
     título mostra o nome inteiro) e acompanhante recuado sob o titular. */
  .tm-side-list{display:flex;flex-direction:column;gap:4px}
  .tmg{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--gray-soft);
    border-radius:9px;background:#fff;cursor:grab;min-height:40px}
  .tmg:hover{border-color:var(--gray);background:#fcfdff}
  .tmg:active{cursor:grabbing}
  .tmg.is-in{background:var(--present-bg);border-color:var(--teal-line)}
  .tmg--acomp{margin-left:16px;border-left:3px solid var(--cyan)}
  .tmg__i{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .tmg__n{font-size:13.5px;font-weight:600;color:var(--charcoal);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
  .tmg__link{color:var(--cyan);font-weight:800;flex:none}
  .tmg__m{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:flex;align-items:center;gap:5px}
  .tmg__st{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:800;background:var(--gray-soft);color:var(--muted)}
  .tmg__st.is-in{background:var(--present);color:#fff}
  .tmg .tm-move-btn{width:28px;height:28px;font-size:13px}
  @media(pointer:coarse){ .tmg{min-height:46px} .tmg .tm-move-btn{width:38px;height:38px;font-size:15px} }
  .tmg__count{font-size:11.5px;color:var(--muted);margin:2px 0 6px;font-weight:600}
  .tmg__count{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .tmg__clear{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--cyan);cursor:pointer;text-decoration:underline}
  .tm-side-search{margin-bottom:8px}
  .tm-side-search input{font-size:13.5px;padding-top:8px;padding-bottom:8px}
  /* Atalhos por empresa / categoria: uma fileira que rola de lado, para não
     empurrar a lista de nomes para fora da tela quando houver muitas empresas. */
  .tm-side-chips{display:flex;gap:6px;overflow-x:auto;padding:0 0 8px;margin-bottom:2px;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .tm-side-chips::-webkit-scrollbar{height:5px}
  .tm-side-chips::-webkit-scrollbar-thumb{background:var(--gray-soft);border-radius:3px}
  .tm-chip{flex:none;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    border:1px solid var(--gray-soft);background:var(--white);color:var(--charcoal);
    border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;
    font-variant-numeric:tabular-nums;transition:background .12s,border-color .12s,color .12s}
  .tm-chip:hover{border-color:var(--cyan)}
  .tm-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
  .tm-chip--more{color:var(--muted);border-style:dashed}
  .tm-side-chips--cat .tm-chip{border-style:dashed}
  /* Cabeçalho de bloco: a empresa vira uma faixa fina que "gruda" no topo
     enquanto se rola a lista — assim nunca se perde de quem é aquele nome. */
  .tmg-grp{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;gap:8px;
    margin:10px 0 4px;padding:5px 9px;border-radius:8px;
    background:color-mix(in srgb,var(--navy) 8%,var(--white));
    font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--navy)}
  .tmg-grp:first-child{margin-top:0}
  .tmg-grp__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tmg-grp__c{margin-left:auto;flex:none;letter-spacing:0;color:var(--muted);font-variant-numeric:tabular-nums}
  .tm-side .guest{cursor:grab}
  .tm-side .guest:active{cursor:grabbing}
  .tm-grip{color:var(--muted);font-size:13px;cursor:grab;touch-action:none;padding:6px 8px;margin:-6px 0 -6px -6px}
  /* Fantasma que segue o dedo no arrasto por toque */
  .tm-ghost{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-130%);background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:7px 14px;border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.28);max-width:64vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tm-drag-src{opacity:.45}
  /* Guias de alinhamento do salão */
  .sg{position:absolute;pointer-events:none;z-index:15;background:#4F46E5;opacity:.5}
  .sg-h{left:0;right:0;height:1px;transform:translateY(-50%)}
  .sg-v{top:0;bottom:0;width:1px;transform:translateX(-50%)}
  /* Badge de status no painel de mesas (sem botão de check-in) */
  .tm-sb{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0}
  .tm-sb--in{background:#F0FDF4;color:#15803D}
  .tm-sb--out{background:#F8FAFC;color:#94A3B8}
  /* Modal troca de mesa */
  .mt-transfer{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy);background:#f0f4ff;border-radius:9px;padding:10px 14px;margin-bottom:12px}
  .mt-from{color:var(--charcoal)}
  .mt-to{color:#0E8C84;min-width:20px}
  .mt-warn{font-size:13px;padding:9px 12px;border-radius:8px;margin-bottom:10px;line-height:1.4}
  .mt-warn--over{background:#FEF2F2;color:#B42318;border:1px solid #FCA5A5}
  .mt-warn--info{background:#EFF6FF;color:#1d4ed8;border:1px solid #BFDBFE}
  @media(max-width:760px){
    /* Cabeçalho do mapa é bem mais alto que o desktop porque cada botão/KPI que
       não cabia virava uma linha nova (flex-wrap). No celular, a tela toda
       precisa caber quase 3 telas de rolagem só para chegar na 1ª mesa — por
       isso o cabeçalho ganha um layout PRÓPRIO aqui (mobile ≠ desktop), em 3
       fileiras fixas: 1) voltar+evento · 2) busca · 3) ações (ícones, rolagem
       lateral se precisar) — em vez de deixar o navegador quebrar linha sozinho. */
    .tm-topbar{padding:calc(9px + env(safe-area-inset-top)) 14px 9px;gap:8px}
    .tm-titleblock{flex:1;min-width:0}
    .tm-event{max-width:100%}
    .tm-search{flex-basis:100%;order:3;min-width:0}
    .tm-actions{flex-basis:100%;order:4;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1px}
    .tm-actions .btn{flex:none;padding:8px 11px;white-space:nowrap}
    .tm-actions .btn .lbl{display:none}     /* só o ícone — o title="" explica ao segurar/focar */
    .tm-zoom{flex:none}
    /* Faixa de KPIs vira UMA linha com rolagem lateral (em vez de quebrar em 2-3
       linhas). A legenda de cores some no celular: cada card já escreve o status
       por extenso ("Vazia","Parcial"...), então repetir os pontinhos de cor não
       ajuda e só ocupava mais uma linha inteira. */
    .tm-kpibar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:16px;padding:9px 14px}
    .tm-kpi{flex:none}
    .tm-legend{display:none}
    .tm-nomesa-badge{flex:none;white-space:nowrap}
    .tm-main{flex-direction:column}
    .tm-grid-area .tm-grid{grid-template-columns:repeat(2,1fr)}
    .tm-side{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:82vh;border-left:none;border-top:1px solid #e0e0e0;border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.18);transform:translateY(110%);transition:transform .2s;z-index:5}
    .tm-side.open{width:auto;transform:translateY(0)}
  }
  @media(max-width:460px){
    .tm-grid-area .tm-grid{grid-template-columns:1fr}
  }
  @media(prefers-reduced-motion:reduce){
    .tm-pulse,.salao-mesa.tm-pulse .salao-disc{animation:none}
    .tcard,.salao-disc{transition:none}
  }

  @media print{
    body *{visibility:hidden}
    #printArea,#printArea *{visibility:visible}
    #printArea{display:block!important;position:absolute;left:0;top:0;width:100%;padding:20px;box-sizing:border-box}
    #printArea .sc-header{display:flex;align-items:flex-start;gap:14px;border:1px solid #ddd;border-radius:12px;padding:14px 16px;margin-bottom:16px;page-break-inside:avoid}
    #printArea .sc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    #printArea .sc-tcard{border:1px solid #ddd;border-radius:10px;padding:10px 12px;page-break-inside:avoid}
    #printArea .sc-hstats{flex-wrap:wrap}
    #printArea .sc-list-tbl{width:100%;border-collapse:collapse}
    #printArea .sc-list-tbl th{background:#2C427E;color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    #printArea .sc-dot.pres{background:#15795B;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    /* planta do salão impressa em cores fiéis */
    #printArea .salao,#printArea .salao *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    #printArea .salao{page-break-inside:avoid}
    @page{size:landscape;margin:12mm}
  }
  #printArea{display:none}

  /* ── Offline / Queue ── */
  /* O aviso fica fixo no topo, ACIMA de tudo (inclusive de modais e do modo
     scanner) — é informação que o operador não pode perder de vista na porta.
     Justamente por isso ele não pode COBRIR nada: a altura real dele é medida
     em JS e publicada na variável --offline-h, e todo mundo que encosta no topo
     da tela reserva esse espaço. Sem isso, o aviso engolia o cabeçalho do modal
     (com o botão de fechar) e o operador ficava preso na ficha do convidado. */
  .offline-banner{position:fixed;top:0;left:0;right:0;background:#fef08a;color:#713f12;text-align:center;padding:calc(8px + env(safe-area-inset-top)) 8px 8px;font-size:.85rem;font-weight:600;z-index:9999;}
  body{padding-top:var(--offline-h,0px)}
  /* Modais: empurra o conteúdo para baixo do aviso, para o ✕ ficar sempre
     alcançável. O max-height acompanha, senão o modal passa a vazar da tela. */
  .overlay{padding-top:calc(18px + var(--offline-h,0px))}
  .overlay .modal{max-height:calc(88vh - var(--offline-h,0px))}
  /* Telas cheias (scanner e mapa de mesas) começam abaixo do aviso. */
  .sc-overlay,.tm-overlay,#credEditorRoot{top:var(--offline-h,0px)}
  .pending-badge{font-size:.7rem;vertical-align:middle;margin-left:4px;}
  .queue-panel{background:#f0fdf4;border:1px solid #86efac;border-radius:8px;padding:8px 14px;margin-bottom:12px;font-size:.85rem;color:#166534;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
  .dup-warn{background:#fff7ed;border:1px solid #fed7aa;border-radius:6px;color:#9a3412;font-size:.82rem;padding:8px 12px;margin-bottom:10px;}
  .dup-warn a{color:#9a3412;font-weight:600;}

  /* ══════════════════════════════════════════════════════
     Fase 2 — Orientação, Zonas, Formatos de Mesa, Régua
     ══════════════════════════════════════════════════════ */

  /* ── Orientação do salão ── */
  .salao{aspect-ratio:4/3}
  .salao.landscape{aspect-ratio:16/9}

  /* ── Zonas (kind=zona) — ficam atrás de todos os outros elementos ── */
  .salao-el--zona{background:rgba(59,130,246,0.12);border:2px dashed rgba(59,130,246,0.4);border-radius:6px;z-index:0!important}
  .salao-el--zona .salao-el__ic{display:none}
  .salao-el--zona .salao-el__lb{font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.7}

  /* ── Dots de cor da zona na paleta ── */
  .zona-colors{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}
  .zona-color-dot{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .12s,box-shadow .12s;display:inline-block}
  .zona-color-dot:hover{transform:scale(1.18)}
  .zona-color-dot.active{border-color:#fff;box-shadow:0 0 0 2px #333}
  .pal-zona-wrap{display:flex;flex-direction:column;gap:2px}

  /* ── Régua de escala no rodapé do salão ── */
  .salao-ruler{position:absolute;bottom:0;left:0;right:0;height:18px;pointer-events:none}
  .salao-ruler__mark{position:absolute;transform:translateX(-50%);font-size:9px;color:rgba(0,0,0,.35);border-left:1px solid rgba(0,0,0,.18);padding-left:2px;line-height:18px}

  /* ── Formatos de mesa ── */
  /* Aviso de encaixe (mesas sem corredor / passando da parede / apertadas) */
  .salao-fit{background:var(--st-over-bg);border:1px solid var(--st-over);color:var(--st-over-ink);
    border-radius:10px;padding:9px 13px;margin-bottom:12px;font-size:13px;font-weight:600;line-height:1.45}
  .salao-escala{margin-top:10px;font-size:12.5px;color:var(--muted);text-align:center}
  .salao-escala b{color:var(--present)}
  .salao-mesa.shape-round  .salao-disc{border-radius:50%}
  .salao-mesa.shape-rect   .salao-disc{border-radius:10px;aspect-ratio:1.3/1;width:calc(var(--sz)*1.15);height:calc(var(--sz)*.9)}
  .salao-mesa.shape-imperial .salao-disc{border-radius:6px;aspect-ratio:2.5/1;width:calc(var(--sz)*1.8);height:calc(var(--sz)*.7)}
  .salao-mesa.shape-bistro .salao-disc{border-radius:50%;width:calc(var(--sz)*.65);height:calc(var(--sz)*.65)}

  /* ── Picker de formato no painel lateral da mesa ── */
  .tm-shape-row{display:flex;align-items:center;gap:6px;margin:8px 0 4px;flex-wrap:wrap}
  .tm-shape-label{font-size:.8rem;color:var(--muted);white-space:nowrap}
  .tm-shape-btn{padding:4px 11px;border:1.5px solid #ddd;border-radius:6px;background:#f5f5f5;cursor:pointer;font-size:1rem;line-height:1;transition:border-color .15s}
  .tm-shape-btn:hover{border-color:#aaa}
  .tm-shape-btn.active{border-color:var(--primary,#2C427E);background:#eef2ff}

  /* ── Impressão: garante cores dos elementos da planta ao imprimir via printSalao() ── */
  #printArea .salao-el{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printArea .salao{aspect-ratio:4/3;position:relative;overflow:hidden}

  /* ════════ CREDENCIAMENTO ════════ */
  /* Abas do evento */
  /* scroll-padding: dá uma margem de respiro pro scrollIntoView('nearest') do JS
     (ver scrollActiveTabIntoView) — sem isso ele encosta a aba exatamente na borda,
     que por arredondamento de sub-pixel podia deixar a última letra cortada. */
  .ev-tabs{margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-padding-inline:14px}
  .ev-tabs button{flex:1 0 auto;min-width:max-content;padding:9px 14px;white-space:nowrap}

  /* Ações e dicas das abas simples (Mesas/Check-in/Relatórios) */
  .tab-actions{margin:6px 0 4px}
  .op-start{font-size:15px;padding:14px}
  .tab-hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:12px;background:var(--off-white);border-radius:10px;padding:12px 14px}
  /* Aba Check-in: ações em boxes lado a lado (desktop) */
  .ci-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 4px}
  .ci-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;background:#fff;border:1.5px solid var(--gray);border-radius:14px;cursor:pointer;transition:box-shadow .15s,transform .15s,border-color .15s}
  .ci-card:hover{border-color:var(--navy);box-shadow:0 6px 18px -6px rgba(21,44,107,.28);transform:translateY(-2px)}
  .ci-card .ci-ic{font-size:26px;line-height:1}
  .ci-card .ci-tt{font-weight:800;font-size:15px;color:var(--navy)}
  .ci-card .ci-sub{font-size:12.5px;color:var(--muted)}
  .ci-card--teal{border-color:var(--cyan);background:#F0FCFB}
  .ci-card--teal .ci-tt{color:var(--navy-deep)}
  .ci-card--teal:hover{border-color:var(--cyan);box-shadow:0 6px 18px -6px rgba(0,194,184,.4)}
  /* Ação que não se aplica a este evento (ex.: "Ler QR Code" sem credenciais
     habilitadas): fica visível e apagada, em vez de sumir — ajuda o usuário a
     entender que a opção existe mas não está ligada, sem precisar adivinhar. */
  .ci-card:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.6)}
  .ci-card:disabled:hover{border-color:var(--gray);box-shadow:none;transform:none}
  /* No desktop o agrupamento título+legenda não deve interferir na coluna
     centralizada que já existia — "desaparece" do layout (display:contents) e
     os 3 <span> se comportam como se fossem filhos diretos do card, igual antes. */
  .ci-card .ci-txt{display:contents}
  /* Mobile: mantém empilhado em largura cheia (como uma lista de opções). A
     legenda (ci-sub) explica CADA ação — "Relatório completo", "Auditoria" e
     "Exportar" são só um ícone e uma palavra sem ela, e o usuário tinha que
     adivinhar ou testar um por um para achar o que queria. Por isso ela NÃO
     pode mais ficar escondida aqui: título e legenda passam a empilhar ao lado
     do ícone, num layout de linha (como um item de configurações). */
  @media(max-width:520px){
    .ci-actions{grid-template-columns:1fr;gap:10px}
    .ci-card{flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;padding:13px 16px;text-align:left}
    .ci-card .ci-ic{font-size:19px;flex:none;width:22px;text-align:center}
    .ci-card .ci-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
    .ci-card .ci-tt{font-size:14.5px}
    .ci-card .ci-sub{display:block;font-size:11.5px;color:var(--muted);font-weight:500}
  }

  /* Lista de credenciamento */
  .cred-filters{flex-wrap:wrap;gap:7px;margin-bottom:12px}
  .cred-row{cursor:pointer}
  .cred-num{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--navy);background:var(--navy-tint,#eef1fb);border-radius:6px;padding:2px 7px;margin-left:2px}
  .cred-badge{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12px;padding:6px 10px;border-radius:9px;white-space:nowrap;border:1px solid transparent}
  .cred-badge.none{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
  .cred-badge.issued{background:#fffbeb;color:#92400e;border-color:#fde68a}
  .cred-badge.reprinted{background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
  .cred-badge.checkedin{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
  .cred-badge.cancelled{background:#fef2f2;color:#991b1b;border-color:#fecaca}
  .cred-badge.pending{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
  /* Status do credenciamento em duas linhas: check-in (operacional) em cima,
     credencial embaixo — a primeira informação é se a pessoa entrou. */
  .cred-status{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
  /* No celular o status ocupa a linha inteira embaixo do nome (não espreme o nome). */
  @media (max-width:640px){
    .cred-row{flex-wrap:wrap}
    .cred-row .gi{flex:1 1 auto;min-width:0}
    .cred-row .cred-qrbtn{order:2}
    .cred-status{order:3;flex-basis:100%;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 12px;text-align:left;margin-top:6px}
  }
  .cred-sub{font-size:11px;color:var(--muted);white-space:nowrap}
  .cred-sub b{font-weight:700}
  .cred-sub-lg{font-size:13px;color:var(--muted);margin:-6px 0 14px}
  .cred-sub-lg b{font-weight:700}
  .cs-none{color:#64748b}.cs-issued{color:#92400e}.cs-reprinted{color:#1e40af}.cs-cancelled{color:#991b1b}

  /* Painel lateral (drawer) do convidado */
  .drawer-overlay{justify-content:flex-end}
  .drawer{background:#fff;width:100%;max-width:420px;height:100%;max-height:100%;border-radius:0;display:flex;flex-direction:column;animation:drawerIn .2s ease;box-shadow:var(--shadow-lg)}
  /* No celular o painel deixa de ocupar a tela inteira e passa a ter a altura do
     conteúdo: antes sobrava uma faixa branca grande embaixo do último botão. */
  @media (max-width:768px){
    .drawer{height:auto;max-height:calc(88vh - var(--offline-h,0px));border-radius:16px}
  }
  @keyframes drawerIn{from{transform:translateX(40px);opacity:.4}to{transform:translateX(0);opacity:1}}
  .drawer .modal-body{overflow-y:auto;flex:1}
  .cred-badge-lg{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14px;padding:9px 14px;border-radius:11px;margin-bottom:14px;border:1px solid transparent}
  .cred-badge-lg.none{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
  .cred-badge-lg.issued{background:#fffbeb;color:#92400e;border-color:#fde68a}
  .cred-badge-lg.reprinted{background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
  .cred-badge-lg.checkedin{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
  .cred-badge-lg.cancelled{background:#fef2f2;color:#991b1b;border-color:#fecaca}
  .cred-badge-lg.pending{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
  .cred-qr-mini{display:flex;align-items:center;gap:12px;margin:14px 0;padding:12px;background:var(--off-white);border-radius:12px}
  .cred-qr-mini img{width:72px;height:72px;flex:none;background:#fff;border-radius:8px}
  .cred-qr-mini span{font-size:11px;letter-spacing:.06em;color:var(--muted);word-break:break-all}
  .cred-photo-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
  .cred-photo-thumb{width:64px;height:64px;flex:none;border-radius:50%;overflow:hidden;background:var(--off-white);border:1px solid var(--gray-soft);display:flex;align-items:center;justify-content:center}
  .cred-photo-thumb img{width:100%;height:100%;object-fit:cover}
  .cred-photo-ph{font-size:10px;color:var(--muted);text-align:center;padding:0 4px}
  .cred-photo-actions{display:flex;flex-wrap:wrap;gap:8px}
  .cred-photo-btn{position:relative;overflow:hidden}
  .cred-photo-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
  .cred-actions{display:flex;flex-direction:column;gap:9px;margin-top:6px}
  .cred-actions .btn{width:100%;justify-content:center}
  /* Ações secundárias em DUAS COLUNAS no celular: sete botões empilhados de
     ponta a ponta deixavam a ficha do convidado altíssima e cheia de vazio,
     obrigando a rolar para achar o que é ação principal. A ação de check-in e a
     de remover continuam ocupando a linha inteira — uma por ser a mais usada na
     porta, a outra por ser destrutiva e precisar de destaque. */
  .cred-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .cred-actions-grid .btn{width:100%;justify-content:center;min-height:44px;padding-left:8px;padding-right:8px}
  @media (min-width:769px){ .cred-actions-grid{grid-template-columns:repeat(3,1fr)} }

  /* Editor de credencial */
  .ce-h{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:18px 0 8px}
  .ce-h:first-child{margin-top:2px}
  .cred-models{display:flex;gap:8px;flex-wrap:wrap}
  .cred-model{flex:1;min-width:110px;display:flex;flex-direction:column;gap:2px;text-align:left;padding:11px 12px;border:1.5px solid var(--gray);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .14s,background .14s}
  .cred-model:hover{border-color:var(--navy)}
  .cred-model.on{border-color:var(--navy);background:var(--navy-tint,#eef1fb)}
  .cred-model b{font-size:13.5px;color:var(--navy)}
  .cred-model span{font-size:11px;color:var(--muted);line-height:1.3}
  .cred-toggle-dis{opacity:.55;cursor:default}
  .ce-dims{display:flex;gap:10px}
  .ce-presets{font-size:12px;color:var(--muted);margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .ce-presets .chip{cursor:pointer}

  /* Prévia do crachá (iframe isolado, em mm) */
  .badge-preview-wrap{display:flex;justify-content:center;align-items:center;padding:16px;background:var(--off-white);border-radius:12px}
  .badge-preview{border:1px solid var(--gray);border-radius:6px;background:#fff;box-shadow:var(--shadow);max-width:100%}
  .badge-preview-meta{text-align:center;font-size:12px;color:var(--muted);margin-top:8px}

  /* ════════ MODO OPERAÇÃO (check-in foco) ════════ */
  body.op-mode .topbar{display:none}
  /* No modo operação a PÁGINA não rola: a tela toda tem altura fixa (100dvh) e
     só a área central (.op-main) rola. Assim o cabeçalho (evento + contador)
     fica SEMPRE fixo no topo, nunca é "puxado" ao rolar a lista. */
  body.op-mode{overflow:hidden}
  /* Botão principal "Modo operação" na página do evento — ação central, em destaque. */
  .op-cta{display:flex;align-items:center;gap:14px;width:100%;margin:14px 0 4px;padding:16px 18px;border:none;border-radius:14px;
    background:linear-gradient(135deg,var(--navy),#1e3a8a);color:#fff;cursor:pointer;text-align:left;
    box-shadow:0 10px 24px -10px rgba(21,44,107,.6);transition:transform .12s ease,box-shadow .12s ease}
  .op-cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(21,44,107,.7)}
  .op-cta:active{transform:translateY(0)}
  .op-cta-ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--cyan);color:#04201e;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900}
  .op-cta-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
  .op-cta-tx b{font-size:16px;font-weight:800;letter-spacing:.01em}
  .op-cta-tx small{font-size:12.5px;color:rgba(255,255,255,.8)}
  .opmode{height:100dvh;overflow:hidden;background:var(--off-white);display:flex;flex-direction:column}
  .op-top{flex:none;z-index:5;background-color:var(--ink);background-image:var(--chrome-bg);color:#fff;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));flex-wrap:wrap}
  .op-ev{font-weight:800;font-size:16px;flex:1;min-width:120px}
  .op-count{font-size:14px;color:rgba(255,255,255,.85)}
  .op-count b{font-size:20px;color:#fff}
  .op-top .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
  .op-top .btn-ghost:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
  .op-main{--op-pad-top:18px;width:100%;max-width:560px;margin:0 auto;padding:var(--op-pad-top) 16px calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .op-col-left,.op-col-right{display:flex;flex-direction:column;gap:14px}
  .op-col-right{order:1}
  .op-col-left{order:2}
  .op-result{min-height:74px}
  .op-result.scan-result:empty,.op-result:not(.ok):not(.warn):not(.err){background:#fff;border:1px dashed var(--gray);border-radius:12px}
  .op-scan input{font-size:18px;text-align:center;letter-spacing:.04em}
  .op-cam-wrap{display:flex;flex-direction:column;align-items:center}
  .op-cam{max-width:300px}
  @media(min-width:900px){
    .op-main{--op-pad-top:24px;max-width:1040px;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:20px 28px;padding:var(--op-pad-top) 28px 48px}
    .op-col-left{grid-column:1;order:1}
    .op-col-right{grid-column:2;order:2}
    .op-cam{max-width:100%}
    /* Evento SEM credenciais: sem leitor de QR, então coluna única e mais
       estreita (só confirmação + busca + lista), centralizada. */
    .op-main.no-cred{max-width:560px;display:flex;flex-direction:column}
  }
  /* Sem credenciais: a confirmação (op-result) vem antes da busca/lista, e
     enquanto está vazia não ocupa espaço (só aparece após um check-in). */
  .op-main.no-cred .op-col-right{order:1}
  .op-main.no-cred .op-col-left{order:2}
  .op-main.no-cred .op-result:empty{display:none}
  /* Depois do primeiro check-in o cartão guarda o lugar dele (fica em branco em
     vez de sumir): sumindo, a lista pulava ~90px sozinha quando o cartão se
     limpava, 2,6 s após cada check-in. Antes do primeiro, continua escondido
     para não gastar altura de tela à toa no celular. */
  .op-main.no-cred .op-result.usado:empty{display:block}
  /* Busca + "＋" na mesma linha: o botão é discreto (não compete com a busca,
     que é a ação principal) mas fica sempre à mão para quem chegou fora da
     lista. */
  /* A busca fica PINÇADA no topo da área que rola (.op-main): o operador desce
     a lista, dá check-in em duas ou três pessoas próximas e a busca continua
     ali, à mão — sem precisar subir tudo de novo. O pai (.op-search) envolve a
     lista inteira, então ela fica presa durante toda a rolagem.
     O fundo opaco é obrigatório: sem ele os nomes passariam POR BAIXO da barra. */
  .op-search-row{position:sticky;top:calc(-1 * var(--op-pad-top,18px));z-index:4;
    display:flex;align-items:stretch;gap:8px;background:var(--off-white);
    /* Sobe o próprio padding da área de rolagem para dentro da barra: sem isso
       sobrava uma faixa (o padding-top de .op-main) por onde os nomes passavam
       POR CIMA da busca ao rolar. O padding devolve o espaço, então no fluxo
       normal nada se desloca. */
    padding:var(--op-pad-top,18px) 0 8px;margin-top:calc(-1 * var(--op-pad-top,18px))}
  .op-search-row .search{flex:1;min-width:0}
  .op-add-btn{flex:none;width:44px;border:1px dashed var(--gray);border-radius:11px;background:#fff;
    color:var(--muted);font-size:21px;line-height:1;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
  .op-add-btn:hover{border-color:var(--navy);color:var(--navy);background:var(--navy-tint)}
  .op-empty{color:var(--muted);font-size:14px;padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
  .op-empty-add{max-width:100%;white-space:normal;line-height:1.35}
  .op-list-hint{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
  /* A lista flui dentro de .op-main (que é a única área rolável do modo
     operação); o cabeçalho fica fixo por fora. Sem rolagem aninhada. */
  .op-list{margin-top:8px;display:flex;flex-direction:column;gap:6px}
  .op-list .op-li mark{background:var(--amber-tint,#fef3c7);color:inherit;padding:0 1px;border-radius:3px}
  .op-li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--gray);border-radius:11px;background:#fff;cursor:pointer;font-size:14px;text-align:left;transition:border-color .12s}
  .op-li:hover{border-color:var(--navy)}
  .op-li.done{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
  .op-li span:last-child{flex:none;font-weight:700;font-size:13px}

  /* ════════ CREDENCIAMENTO v2 ════════ */
  /* Modal de QR: número da credencial em destaque, token pequeno e quebrável */
  .qr-card .qr-crednum{font-size:15px;font-weight:800;letter-spacing:.08em;color:var(--navy);margin-top:10px}
  .qr-card .qr-crednum.off{font-weight:600;letter-spacing:normal;color:var(--muted);font-size:13px}
  .qr-card .qr-token{font-size:10px!important;letter-spacing:normal!important;color:var(--muted)!important;font-weight:500!important;margin-top:8px!important;word-break:break-all;line-height:1.4}

  /* Seleção múltipla + barra de ações em massa */
  .cred-cb{flex:none;width:18px;height:18px;margin-right:4px;accent-color:var(--navy);cursor:pointer}
  .cred-row.sel,.guest.sel{background:var(--navy-tint,#eef1fb);border-color:var(--navy)}
  .cred-qrbtn{color:var(--navy)}
  .cred-qrbtn svg{display:block;margin:auto}
  .cred-selall{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600;margin:4px 2px 10px;cursor:pointer}
  .cred-selall input{width:17px;height:17px;accent-color:var(--navy);cursor:pointer}
  .cred-bulkbar{position:sticky;top:6px;z-index:6;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:12px;padding:10px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
  .cred-bulkbar .cbk-n{font-weight:800;font-size:13.5px;white-space:nowrap}
  .cred-bulkbar .cbk-actions{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
  .cred-bulkbar .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28)}
  .cred-bulkbar .btn-ghost:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.45)}
  .cred-bulkbar .btn-danger{background:rgba(239,68,68,.18);color:#fff;border-color:rgba(239,68,68,.5)}
  .cred-bulkbar .btn-danger:hover{background:rgba(239,68,68,.32)}

  /* Editor de credencial — página inteira (módulo próprio) */
  body.ce-open{overflow:hidden}
  #credEditorRoot{position:fixed;inset:0;z-index:1000;background:var(--off-white)}
  .ce-page{height:100%;display:flex;flex-direction:column}
  .ce-topbar{display:flex;align-items:center;gap:14px;padding:calc(11px + env(safe-area-inset-top)) 18px 11px;background:#fff;border-bottom:1px solid var(--gray);flex:none}
  .ce-titleblock{flex:1;min-width:0}
  .ce-eyebrow{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
  .ce-titleblock h2{font-size:17px;margin:0;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ce-body{flex:1;min-height:0;display:grid;grid-template-columns:380px 1fr}
  .ce-controls{overflow-y:auto;padding:14px 18px 50px;border-right:1px solid var(--gray);background:#fff}
  .ce-preview-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:var(--off-white);overflow:auto}
  .ce-preview-stage{display:flex;align-items:center;justify-content:center;transform:scale(1.5);transform-origin:center}
  .ce-preview-stage .badge-preview{box-shadow:var(--shadow-lg)}
  .ce-color{display:flex;align-items:center;gap:10px}
  .ce-color input[type=color]{width:46px;height:34px;border:1px solid var(--gray);border-radius:8px;background:#fff;cursor:pointer;padding:2px}
  .ce-color-hex{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em}
  .ce-note{font-size:12.5px;color:var(--muted);background:var(--off-white);border-radius:10px;padding:10px 12px;line-height:1.45;margin:2px 0 6px}
  .ce-logo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .ce-logo-thumb{height:42px;max-width:120px;object-fit:contain;background:#152C6B;border-radius:8px;padding:4px}
  .ce-logo-empty{font-size:12.5px;color:var(--muted);flex:1;min-width:120px}
  .ce-upload{cursor:pointer}
  @media(max-width:760px){
    .ce-body{grid-template-columns:1fr;grid-template-rows:minmax(0,46vh) 1fr}
    .ce-controls{border-right:none;border-bottom:1px solid var(--gray)}
    .ce-preview-stage{transform:scale(1.15)}
  }

  /* ════════════════════════════════════════════════════════════════════
     Reforma de UX (2026) — feedback, estados e acessibilidade.
     Aditivo sobre o sistema de design do Moura One já definido acima.
     ════════════════════════════════════════════════════════════════════ */

  /* Foco visível por teclado em todo elemento interativo (a11y). */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline:none; box-shadow:var(--ring); border-radius:8px;
  }
  button, .chip, .row-menu, .table-chip, .ck{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  /* Spinner reutilizável (botões ocupados). */
  @keyframes ci-spin{to{transform:rotate(360deg)}}
  .btn.is-busy{position:relative;color:transparent !important;pointer-events:none}
  .btn.is-busy::after{content:'';position:absolute;width:16px;height:16px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:ci-spin .7s linear infinite}
  .btn-ghost.is-busy::after,.btn-danger.is-busy::after{border-color:var(--navy);border-right-color:transparent}

  /* Toast turbinado: tipos (ok/err/warn) + ação "Desfazer". */
  .toast{display:flex;align-items:center;gap:12px;max-width:min(92vw,440px);text-align:left}
  .toast.ok{background:#0a8f88}
  .toast.err{background:#b3261e}
  .toast.warn{background:#9a6700}
  .toast .toast-msg{flex:1;min-width:0}
  .toast .toast-act{flex:none;background:rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:13px;padding:7px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.35)}
  .toast .toast-act:hover{background:rgba(255,255,255,.3)}

  /* Estado de erro reaproveitável (listas que falham ao carregar). */
  .state-error{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--muted);padding:30px 18px;font-size:14px}
  .state-error .ei{font-size:30px}

  /* Banner offline com botão de reenviar (já existente .offline-banner). */
  .offline-banner .toast-act{background:rgba(0,0,0,.12);color:inherit;border:1px solid rgba(0,0,0,.2);padding:3px 10px;margin-left:8px;border-radius:8px;font-weight:700;font-size:.8rem;cursor:pointer}

  /* ════════════════════════════════════════════════════════════════════
     MODO OPERAÇÃO (porta) — turbinado: confirmação marcante, ritmo, som.
     ════════════════════════════════════════════════════════════════════ */
  .op-top{gap:10px}
  .opt-kpis{display:flex;align-items:center;gap:14px;margin-left:auto}
  .opt-kpi{display:flex;align-items:baseline;gap:6px;color:rgba(255,255,255,.85);font-size:13px;white-space:nowrap}
  .opt-kpi b{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em;font-family:var(--display)}
  .opt-kpi.rhythm{padding:4px 11px;border-radius:999px;background:rgba(0,194,184,.18);border:1px solid rgba(0,194,184,.45)}
  .opt-kpi.rhythm b{color:var(--cyan);font-size:18px}
  .opt-kpi.rhythm .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(0,194,184,.6);animation:livePulse 1.8s infinite}
  .op-iconbtn{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);font-size:17px;color:#fff;display:inline-flex;align-items:center;justify-content:center}
  .op-iconbtn:hover{background:rgba(255,255,255,.22)}

  /* Cartão de resultado da porta — full-bleed e inequívoco. */
  .op-result{min-height:96px;border-radius:16px}
  .op-result.scan-result:empty,.op-result:not(.ok):not(.warn):not(.err):not(.offline){background:#fff;border:1.5px dashed var(--gray)}
  .op-result.scan-result.ok,.op-result.scan-result.warn,.op-result.scan-result.err,.op-result.scan-result.offline{padding:20px 22px;min-height:96px;border:none;color:#fff;align-items:center}
  .op-result .sr-ic{width:54px;height:54px;font-size:30px;background:rgba(255,255,255,.25)!important;color:#fff}
  .op-result .sr-tx{min-width:0}
  .op-result.scan-result b{font-size:24px;font-weight:800;letter-spacing:-.02em;font-family:var(--display);line-height:1.1;color:#fff}
  .op-result .sr-sub{font-size:14px;color:rgba(255,255,255,.9);margin-top:3px}
  .op-result.scan-result.ok{background:linear-gradient(135deg,#0E8C84 0%,#16a34a 100%)}
  .op-result.scan-result.warn{background:linear-gradient(135deg,#b45309 0%,#d97706 100%)}
  .op-result.scan-result.err{background:linear-gradient(135deg,#b3261e 0%,#dc2626 100%)}
  .op-result.scan-result.offline{background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%)}
  @keyframes opFlash{0%{transform:scale(.97);box-shadow:0 0 0 0 rgba(0,194,184,.55)}40%{transform:scale(1.015)}100%{transform:scale(1);box-shadow:0 14px 40px -10px rgba(11,21,48,.45)}}
  .op-result.flash{animation:opFlash .5s cubic-bezier(.2,.8,.3,1)}

  /* Busca da porta — itens com alvo de toque grande. */
  .op-li{padding:15px 16px;border-radius:12px;min-height:58px}
  .op-li-i{display:flex;flex-direction:column;gap:2px;min-width:0}
  /* .op-li-row separa nome (que trunca com ...) da tag de categoria (que não
     pode ser cortada) — sem isso, um nome comprido "engolia" a tag junto. */
  .op-li-row{display:flex;align-items:center;gap:6px;min-width:0}
  .op-li-n{font-weight:700;font-size:15px;color:var(--charcoal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .op-li-row .cat-chip{flex:none}
  .op-li-m{font-size:12.5px;color:var(--muted)}
  .op-li-s{flex:none;font-weight:800;font-size:13px;color:var(--navy);background:var(--navy-tint);padding:7px 12px;border-radius:9px}
  .op-li.done .op-li-s{color:#15803d;background:#dcfce7}
  .op-scan input{font-size:18px;padding:14px 14px}
  .op-search .search input{font-size:17px;padding:13px 14px 13px 40px}
  /* No celular o dedo precisa de alvo maior — e o botão de adicionar ganha
     contorno sólido, já que ali não existe "passar o mouse" para descobri-lo. */
  .op-add-btn{width:52px;font-size:24px;border-style:solid;border-color:var(--navy-tint);color:var(--navy)}
  @media (prefers-reduced-motion: reduce){ .op-result.flash{animation:none} .opt-kpi.rhythm .dot{animation:none} }

  /* ════════════════════════════════════════════════════════════════════
     REDESIGN DA TELA DE EVENTO (2026) — elevação visual (sem mexer na
     estrutura do renderEvent). Identidade Moura: navy + turquesa.
     ════════════════════════════════════════════════════════════════════ */

  /* Cabeçalho do evento como faixa "hero" com acento turquesa. */
  .ev-title{position:relative;padding-left:16px;margin:6px 0 16px}
  .ev-title::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:5px;border-radius:3px;background:linear-gradient(180deg,var(--navy),var(--cyan))}
  .ev-title h2{font-family:var(--display);font-size:27px;font-weight:700;letter-spacing:-.03em;color:var(--navy-deep);text-wrap:balance}
  @media(min-width:1024px){ .ev-left .ev-title h2{font-size:24px} }

  /* Stats: números em Space Grotesk; "Presentes" com realce turquesa. */
  .stat .n{font-family:var(--display);font-weight:700}
  .stats .stat.hl{background:linear-gradient(135deg,#ecfeff 0%,#e0f7f5 100%)}
  .stat.hl .n{color:#0E8C84}

  /* Barra de abas → segmented control claro e tátil. */
  .ev-tabs{background:var(--gray-soft);border-radius:12px;padding:5px;gap:4px;display:flex;margin-bottom:16px}
  .ev-tabs button{flex:1 0 auto;min-width:max-content;padding:10px 16px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--muted);background:transparent;transition:background .14s,color .14s,box-shadow .14s}
  .ev-tabs button:hover{color:var(--navy)}
  .ev-tabs button.on{background:var(--white);color:var(--navy);box-shadow:var(--shadow-xs),0 2px 8px -2px rgba(11,21,48,.18)}
  .ev-tabs button:focus-visible{outline:none;box-shadow:var(--ring)}

  /* Chips de filtro mais nítidos. */
  .chip{transition:background .14s,border-color .14s,color .14s}
  .chip:hover{border-color:var(--navy);color:var(--navy)}
  .chip.on:hover{color:#fff}

  /* Syncbar e painel de ritmo: superfícies elegantes e de marca. */
  .syncbar{border-radius:12px;box-shadow:var(--shadow-xs)}
  .queue-panel{background:linear-gradient(135deg,#ecfeff,#e0f7f5);border:1px solid var(--teal-line);border-radius:12px;color:#0a6b66;font-weight:600;padding:11px 15px}
  .queue-panel b{color:#0E8C84}

  /* Cartões de convidado: mais profundidade e estados fortes. */
  .guest{border-radius:14px;box-shadow:var(--shadow-xs);border-left:3px solid transparent;transition:transform .12s,box-shadow .12s,border-color .12s,background .12s}
  .guest:hover{box-shadow:var(--shadow)}
  .guest.present{border-left-color:var(--cyan)}
  .guest .gname{font-size:16px}
  /* Botão de check-in maior e inequívoco. */
  .ck{font-size:14px;padding:11px 17px;border-radius:11px;min-width:104px;justify-content:center}
  .ck.done{box-shadow:0 2px 8px -2px rgba(22,163,74,.5)}

  /* ════════ Credenciamento v4 — prévia sem scroll + cards responsivos ════════ */
  /* Prévia do crachá: nunca mostrar barras de rolagem (iframe isolado) */
  .badge-preview{display:block;overflow:hidden}
  .ce-preview-col{overflow:hidden}
  .ce-preview-stage{transform:scale(1.4)}
  @media(max-width:760px){ .ce-preview-stage{transform:scale(1.1)} }

  /* Cards de ação das abas (Mesas/Check-in/Relatórios): grade que preenche o
     espaço no desktop e empilha no mobile (experiências diferentes). */
  .ci-actions{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .ce-logo{align-items:center}