/* ============ AromaLab — Tema 1: Âmbar / Perfumaria ============ */
  :root {
    --bg:        #0b0806;
    --panel:     #16100a;
    --panel-2:   #1f150c;
    --panel-3:   #2a1c10;
    --line:      #3a2a18;
    --brown:     #7c4a1e;
    --brown-2:   #95622e;
    --amber:     #c98e4a;
    --gold:      #e0b878;
    --cream:     #ece2d3;
    --muted:     #a08e76;
    --ok:        #7fae6e;
    --warn:      #d9a23c;
    --danger:    #c45b4d;
    --radius:    14px;
    --shadow:    0 10px 30px rgba(0,0,0,.55);
    --input-bg:  #0e0a07;
    --topbar-bg: linear-gradient(180deg, #241709, #190f07);
    --topbar-border: var(--brown);
    --nav-mob-bg: linear-gradient(0deg, #241709, #1b1108);
    --nav-mob-border: var(--brown);
    --thead-bg:  linear-gradient(180deg, #2a1c10, #20150b);
    --thead-color: var(--gold);
    --thead-border: var(--brown);
    --tfoot-bg:  linear-gradient(180deg, #20150b, #2a1c10);
    --body-bg:   radial-gradient(1200px 600px at 70% -10%, #1c130a 0%, var(--bg) 55%);
    --auth-card-bg: linear-gradient(160deg, var(--panel-2), var(--panel));
    --modal-bg:  linear-gradient(160deg, var(--panel-2), var(--panel));
    --modal-border: var(--brown);
  }

  /* ============ Tema 2: Dark mode ============ */
  body[data-tema="2"] {
    --bg:        #111111;
    --panel:     #1c1c1c;
    --panel-2:   #232323;
    --panel-3:   #2c2c2c;
    --line:      #363636;
    --brown:     #1565c0;
    --brown-2:   #1976d2;
    --amber:     #64b5f6;
    --gold:      #90caf9;
    --cream:     #e8e8e8;
    --muted:     #888888;
    --ok:        #66bb6a;
    --warn:      #ffa726;
    --danger:    #ef5350;
    --input-bg:  #0d0d0d;
    --topbar-bg: linear-gradient(180deg, #1c1c1c, #151515);
    --topbar-border: #363636;
    --nav-mob-bg: linear-gradient(0deg, #1c1c1c, #151515);
    --nav-mob-border: #363636;
    --thead-bg:  linear-gradient(180deg, #232323, #1c1c1c);
    --thead-color: #90caf9;
    --thead-border: #363636;
    --tfoot-bg:  linear-gradient(180deg, #1c1c1c, #232323);
    --body-bg:   #111111;
    --auth-card-bg: linear-gradient(160deg, #232323, #1c1c1c);
    --modal-bg:  linear-gradient(160deg, #232323, #1c1c1c);
    --modal-border: #363636;
    --shadow:    0 10px 30px rgba(0,0,0,.7);
  }

  /* ============ Tema 3: Light mode (estilo olfactorian) ============ */
  body[data-tema="3"] {
    --bg:        #f5f0eb;
    --panel:     #ffffff;
    --panel-2:   #fdf9f5;
    --panel-3:   #f7f2ec;
    --line:      #ddd5c8;
    --brown:     #5a3a2a;
    --brown-2:   #7a5040;
    --amber:     #8b5a3c;
    --gold:      #5a3820;
    --cream:     #1a0f08;
    --muted:     #7a6555;
    --ok:        #2e7d32;
    --warn:      #e65100;
    --danger:    #c62828;
    --input-bg:  #ffffff;
    --topbar-bg: linear-gradient(180deg, #ffffff, #faf6f0);
    --topbar-border: #ddd5c8;
    --nav-mob-bg: linear-gradient(0deg, #ffffff, #faf6f0);
    --nav-mob-border: #ddd5c8;
    --thead-bg:  linear-gradient(180deg, #f0e8e0, #e8ddd4);
    --thead-color: #5a3820;
    --thead-border: #ddd5c8;
    --tfoot-bg:  linear-gradient(180deg, #e8ddd4, #f0e8e0);
    --body-bg:   #f5f0eb;
    --auth-card-bg: linear-gradient(160deg, #fdf9f5, #ffffff);
    --modal-bg:  linear-gradient(160deg, #fdf9f5, #ffffff);
    --modal-border: #ddd5c8;
    --shadow:    0 4px 20px rgba(0,0,0,.12);
  }

  body[data-tema="3"] .btn-fantasma {
    color: var(--amber);
    border-color: var(--line);
  }
  body[data-tema="3"] .btn-fantasma:hover {
    border-color: var(--amber);
    background: rgba(90,58,42,.06);
  }
  body[data-tema="3"] .chip {
    background: rgba(90,58,42,.1);
    color: var(--amber);
    border-color: rgba(90,58,42,.25);
  }
  body[data-tema="3"] .chip.ok    { background: rgba(46,125,50,.1);  color: var(--ok);    border-color: rgba(46,125,50,.3); }
  body[data-tema="3"] .chip.nao   { background: rgba(198,40,40,.1);  color: var(--danger); border-color: rgba(198,40,40,.3); }
  body[data-tema="3"] .chip.warn  { background: rgba(230,81,0,.1);   color: var(--warn);   border-color: rgba(230,81,0,.3); }
  body[data-tema="3"] nav:not(.pub-nav) button.ativo { color: var(--amber); background: rgba(90,58,42,.1); }
  body[data-tema="3"] nav:not(.pub-nav) button:hover { color: var(--gold);  background: rgba(90,58,42,.06); }
  body[data-tema="3"] .estrelas        { color: var(--amber); }
  body[data-tema="3"] .estrelas .estrela-vazia { color: #d5c4b5; }
  body[data-tema="3"] .sel-idioma {
    background: rgba(90,58,42,.08);
    color: var(--amber);
  }
  body[data-tema="3"] #loading { background: rgba(245,240,235,.88); }
  body[data-tema="3"] #loading p { color: var(--muted); }
  body[data-tema="3"] #toast { background: var(--panel); border-color: var(--line); color: var(--cream); }
  body[data-tema="3"] #toast.ok   { border-color: var(--ok);    color: #1b5e20; }
  body[data-tema="3"] #toast.erro { border-color: var(--danger); color: #b71c1c; }

  body[data-tema="2"] .btn-fantasma { color: var(--amber); border-color: var(--line); }
  body[data-tema="2"] .btn-fantasma:hover { border-color: var(--amber); }
  body[data-tema="2"] .chip         { background: rgba(100,181,246,.1); color: var(--amber); border-color: rgba(100,181,246,.25); }
  body[data-tema="2"] .chip.ok      { background: rgba(102,187,106,.1); color: var(--ok);    border-color: rgba(102,187,106,.3); }
  body[data-tema="2"] .chip.nao     { background: rgba(239,83,80,.1);   color: var(--danger); border-color: rgba(239,83,80,.3); }
  body[data-tema="2"] .chip.warn    { background: rgba(255,167,38,.1);  color: var(--warn);   border-color: rgba(255,167,38,.3); }
  body[data-tema="2"] nav:not(.pub-nav) button.ativo { color: var(--gold); background: rgba(144,202,249,.1); }
  body[data-tema="2"] nav:not(.pub-nav) button:hover { color: var(--gold); background: rgba(144,202,249,.07); }
  body[data-tema="2"] .estrelas        { color: var(--amber); }
  body[data-tema="2"] .estrelas .estrela-vazia { color: #333; }
  body[data-tema="2"] #loading { background: rgba(17,17,17,.85); }
  body[data-tema="2"] .sel-idioma { background: rgba(144,202,249,.08); color: var(--gold); }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; overflow-x: hidden; max-width: 100%; }
  main { overflow-x: clip; }
  body {
    background: var(--body-bg);
    color: var(--cream);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .brand { font-family: 'Cormorant Garamond', Georgia, serif; }
  .hidden { display: none !important; }
  a { color: var(--gold); }

  /* ---------- ícone SVG frasco ---------- */
  .icone-svg {
    display: inline-block; vertical-align: middle;
    width: 1em; height: 1em;
  }
  .frasco .icone-svg { width: 46px; height: 46px; }
  .auth-svg   { width: 46px; height: 46px; display: block; margin: 0 auto 6px; }
  .topbar-svg { width: 30px; height: 30px; }
  .pub-icone-svg { width: 28px; height: 28px; }

  /* ---------- loading / toast ---------- */
  #loading {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(11,8,6,.88); backdrop-filter: blur(4px);
    display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center;
  }
  body[data-tema="2"] #loading { background: rgba(10,10,10,.92); }
  .frasco { animation: flutua 1.6s ease-in-out infinite; }
  @keyframes flutua { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
  #loading p { color: var(--gold); letter-spacing: 3px; text-transform: uppercase; font-size: 11px; }
  /* loading inline (catálogo público) */
  .loading-inline {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 60px 16px; color: #8b5a3c;
  }
  .loading-inline .icone-svg { width: 40px; height: 40px; animation: flutua 1.6s ease-in-out infinite; }
  .loading-inline p { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #b8a898; }

  #toast {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(80px);
    z-index: 2100; padding: 12px 22px; border-radius: 10px; max-width: 90vw;
    background: var(--panel-3); border: 1px solid var(--line); box-shadow: var(--shadow);
    opacity: 0; transition: all .3s ease; font-size: 13px;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  #toast.ok    { border-color: var(--ok);    color: #cfe3c6; }
  #toast.erro  { border-color: var(--danger);color: #f0c6bf; }

  /* ---------- tela de autenticação ---------- */
  #authShell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  }
  .auth-card {
    width: 100%; max-width: 410px; background: var(--auth-card-bg);
    border: 1px solid var(--line); border-radius: 20px; padding: 38px 34px; box-shadow: var(--shadow);
  }
  .auth-logo { text-align: center; margin-bottom: 26px; }
  .auth-logo .icone { font-size: 46px; display: block; margin-bottom: 6px; }
  .brand { font-size: 34px; font-weight: 700; color: var(--gold); letter-spacing: 1px; }
  .brand small { display: block; font-family: 'Inter'; font-size: 10px; color: var(--muted);
                 letter-spacing: 4px; text-transform: uppercase; margin-top: 4px; }

  /* ---------- formulários ---------- */
  .campo { margin-bottom: 16px; }
  .campo label { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
                 color: var(--muted); margin-bottom: 6px; }
  input, select, textarea {
    width: 100%; padding: 11px 13px; border-radius: 10px;
    background: var(--input-bg); border: 1px solid var(--line); color: var(--cream);
    font-family: 'Inter'; font-size: 14px; outline: none; transition: border .2s;
  }
  input:focus, select:focus, textarea:focus { border-color: var(--amber); }
  input[readonly] { color: var(--muted); background: var(--panel-3); }
  input:disabled, select:disabled { color: var(--muted); opacity: .6; cursor: not-allowed; }
  textarea { resize: vertical; min-height: 70px; }
  select option { background: var(--panel-2); }

  .campo-senha { position: relative; }
  .campo-senha input { padding-right: 44px; }
  .olho {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; cursor: pointer; font-size: 17px;
    padding: 6px 8px; color: var(--muted); line-height: 1; border-radius: 8px;
  }
  .olho:hover { color: var(--gold); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 10px; border: 1px solid transparent;
    font-family: 'Inter'; font-weight: 600; font-size: 13px; cursor: pointer; transition: all .2s;
  }
  .btn-primario { background: linear-gradient(135deg, var(--brown), var(--brown-2)); color: #fff7ea;
                  border-color: var(--brown-2); width: 100%; }
  .btn-primario:hover { filter: brightness(1.15); }
  .btn-acao { background: linear-gradient(135deg, var(--brown), var(--brown-2)); color: #fff7ea; }
  .btn-acao:hover { filter: brightness(1.15); }
  .btn-fantasma { background: transparent; color: var(--amber); border-color: var(--line); }
  .btn-fantasma:hover { border-color: var(--amber); }
  .btn-perigo { background: transparent; color: var(--danger); border-color: #5a2f28; }
  .btn-perigo:hover { background: #2a1410; }
  .btn-mini { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
  .btn:disabled { opacity: .45; cursor: not-allowed; }

  .auth-links { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
  .auth-links a { cursor: pointer; text-decoration: none; }
  .auth-links a:hover { text-decoration: underline; }
  .separador { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; margin: 14px 0; }
  .separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--line); }

  /* ---------- força de senha ---------- */
  .forca-senha-wrap { display: flex; gap: 4px; margin-top: 8px; min-height: 6px; }
  .forca-barra { flex: 1; height: 6px; border-radius: 3px; background: var(--line); transition: background .3s; }
  .forca-barra.fraca   { background: var(--danger); }
  .forca-barra.media   { background: var(--warn); }
  .forca-barra.forte   { background: var(--ok); }
  .hint-senha { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

  /* ---------- menu avatar ---------- */
  .avatar-wrap { position: relative; }
  .menu-avatar {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow); min-width: 180px; padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .menu-avatar button {
    width: 100%; text-align: left; background: transparent; border: none;
    color: var(--cream); font-family: 'Inter'; font-size: 13px; font-weight: 500;
    padding: 10px 14px; border-radius: 8px; cursor: pointer; transition: background .15s;
    display: flex; align-items: center; gap: 8px;
  }
  .menu-avatar button:hover { background: rgba(201,142,74,.1); }
  .menu-avatar .menu-sair   { color: var(--danger); }
  .menu-avatar .menu-sair:hover { background: rgba(196,91,77,.1); }
  .menu-avatar-sep { height: 1px; background: var(--line); margin: 4px 0; }

  /* ---------- paginação interna insumos (mesma linha da barra de ferramentas) ---------- */
  /* especificidade precisa vencer ".barra-ferramentas select" (max-width:300px) */
  .barra-ferramentas select.filtro-estreito { max-width: 170px; flex: 0 1 170px; }
  .ins-paginacao {
    display: flex; justify-content: flex-end; align-items: center; gap: 6px;
    flex-wrap: wrap; margin-left: auto;
  }
  .ins-paginacao button {
    padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--panel); color: var(--cream); font-family: 'Inter'; font-size: 12px;
    cursor: pointer; transition: all .2s;
  }
  .ins-paginacao button:hover { border-color: var(--amber); }
  .ins-paginacao button.ativo { background: var(--brown); color: #fff7ea; border-color: var(--brown-2); }
  .ins-paginacao button:disabled { opacity: .4; cursor: not-allowed; }
  .ins-paginacao .pag-info { font-size: 11px; color: var(--muted); padding: 0 6px; }
  .sel-por-pagina { width: 100px; }

  /* ---------- shell do app ---------- */
  .topbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 18px; padding: 12px 26px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    box-shadow: 0 4px 18px rgba(0,0,0,.5);
  }
  .topbar .logo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
  .topbar .logo .icone { font-size: 26px; }
  .topbar .logo .brand { font-size: 24px; }
  nav:not(.pub-nav) { display: flex; gap: 4px; flex: 1; align-items: center; }
  nav:not(.pub-nav) button {
    background: transparent; border: none; color: var(--muted); padding: 9px 14px;
    font-family: 'Inter'; font-size: 13px; font-weight: 500; border-radius: 8px; cursor: pointer; transition: all .2s;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  }
  nav:not(.pub-nav) button:hover { color: var(--gold); background: rgba(201,142,74,.08); }
  nav:not(.pub-nav) button.ativo { color: var(--gold); background: rgba(201,142,74,.14); }
  nav:not(.pub-nav) button .nav-ico { display: none; }
  /* Grupos de nav (containers "Meu Laboratório" / "Biblioteca") */
  .nav-grupo {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 12px; border: 1px solid var(--line); border-radius: 12px;
    background: rgba(201,142,74,.03);
  }
  .nav-grupo-rotulo {
    font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--muted); white-space: nowrap; opacity: .85; user-select: none;
  }
  .nav-grupo-itens { display: inline-flex; align-items: center; gap: 2px; }
  /* Separador de nav no desktop (espaço entre os dois grupos) */
  .nav-sep {
    width: 6px; height: 1px; background: transparent; margin: 0; flex-shrink: 0;
  }
  /* Menu hambúrguer (Biblioteca: Insumos, Fórmulas gerais, Glossário) */
  .hamb-wrap { position: relative; }
  .btn-hamb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line);
    background: rgba(201,142,74,.03); color: var(--muted); cursor: pointer; transition: all .2s;
  }
  .btn-hamb:hover, .btn-hamb.ativo { color: var(--gold); border-color: var(--amber); background: rgba(201,142,74,.08); }
  .menu-biblioteca {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow); min-width: 190px; padding: 6px;
  }
  .menu-biblioteca-rotulo {
    display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--muted); opacity: .85; padding: 6px 10px 4px; user-select: none;
  }
  .menu-biblioteca button {
    width: 100%; text-align: left; background: transparent; border: none;
    color: var(--cream); font-family: 'Inter'; font-size: 13px; font-weight: 500;
    padding: 10px 10px; border-radius: 8px; cursor: pointer; transition: background .15s;
    display: flex; align-items: center; gap: 8px;
  }
  .menu-biblioteca button:hover, .menu-biblioteca button.ativo { background: rgba(201,142,74,.1); color: var(--gold); }
  .avatar-top { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--amber);
                object-fit: cover; cursor: pointer; background: var(--panel-3); }
  .sel-idioma {
    width: auto; padding: 7px 8px; border-radius: 8px; cursor: pointer;
    background: rgba(201,142,74,.08); border: 1px solid var(--line);
    color: var(--gold); font-size: 13px; font-family: 'Inter';
  }
  .sel-idioma:hover, .sel-idioma:focus { border-color: var(--amber); }

  main { max-width: 1180px; margin: 0 auto; padding: 28px 26px 80px; }
  .view-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
                 flex-wrap: wrap; margin-bottom: 22px; }
  .view-titulo h2 { font-size: 30px; color: var(--gold); font-weight: 600; }
  .view-titulo p { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ---------- dashboard ---------- */
  .grade-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 26px; }
  .stat-card {
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  }
  .stat-card.clicavel { cursor: pointer; transition: all .2s; }
  .stat-card.clicavel:hover { border-color: var(--amber); transform: translateY(-2px); }
  .stat-card .num { font-family: 'Cormorant Garamond'; font-size: 40px; font-weight: 700; color: var(--gold); line-height: 1; }
  .stat-card .rotulo { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

  .grade-2col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
  @media (max-width: 860px) { .grade-2col { grid-template-columns: 1fr; } }
  .grade-2col > *, .atalhos > * { min-width: 0; }

  .painel {
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
    max-width: 100%;
  }
  #listaRecentes table { min-width: 0; }
  .painel h3 { color: var(--amber); font-size: 20px; margin-bottom: 14px; }

  .barra-tipo { margin-bottom: 12px; }
  .barra-tipo .meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
  .barra-tipo .trilho { height: 8px; border-radius: 6px; background: var(--input-bg); overflow: hidden; }
  .barra-tipo .fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brown), var(--gold)); }

  .atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 26px; }
  .atalho {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: linear-gradient(160deg, var(--panel-3), var(--panel-2));
    border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; cursor: pointer; transition: all .2s;
  }
  .atalho:hover { border-color: var(--amber); transform: translateY(-2px); }
  .atalho .info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
  .atalho .ico { font-size: 24px; }
  .atalho .titulo { font-weight: 600; color: var(--cream); }
  .atalho .sub { font-size: 12px; color: var(--muted); }
  .atalho .qtd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 38px; font-weight: 700;
                 color: var(--gold); line-height: 1; flex-shrink: 0; }

  /* ---------- glossário ---------- */
  .glossario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
  .glos-card {
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  }
  .glos-card h4 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 600;
                  color: var(--gold); margin-bottom: 8px; }
  .glos-card .glos-campo { margin-bottom: 8px; }
  .glos-card .glos-campo:last-child { margin-bottom: 0; }
  .glos-card .glos-campo .r { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
  .glos-card .glos-campo .v { font-size: 13.5px; line-height: 1.55; overflow-wrap: break-word; }

  .lista-atividade { list-style: none; }
  .lista-atividade li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
  .lista-atividade li:last-child { border-bottom: none; }
  .lista-atividade .quando { color: var(--muted); white-space: nowrap; }

  /* ---------- tabelas ---------- */
  .tabela-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
                 background: var(--panel); }
  table { width: 100%; border-collapse: collapse; min-width: 640px; }
  thead th {
    text-align: left; padding: 12px 14px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--thead-color); background: var(--thead-bg);
    border-bottom: 1px solid var(--thead-border); white-space: nowrap;
  }
  tbody td { padding: 11px 14px; border-bottom: 1px solid #221709; font-size: 13px; vertical-align: middle; }
  body[data-tema="2"] tbody td { border-bottom-color: #282828; }
  body[data-tema="3"] tbody td { border-bottom-color: #ede6de; }
  tfoot td {
    padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--gold);
    background: var(--tfoot-bg); border-top: 1px solid var(--thead-border);
  }
  .estrelas { color: var(--gold); letter-spacing: 1.5px; white-space: nowrap; }
  .estrelas .estrela-vazia { color: #4a3722; }
  tbody tr:hover { background: rgba(201,142,74,.05); }
  body[data-tema="2"] tbody tr:hover { background: rgba(144,202,249,.05); }
  body[data-tema="3"] tbody tr:hover { background: rgba(90,58,42,.04); }
  tbody tr.clicavel { cursor: pointer; }
  td.num, th.num { text-align: right; }
  th.col-nome { width: 38%; min-width: 220px; }

  .thumb { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--panel-3);
           border: 1px solid var(--line); }
  .chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
          background: rgba(201,142,74,.14); color: var(--amber); border: 1px solid rgba(201,142,74,.3); }
  .chip.ok    { background: rgba(127,174,110,.12); color: var(--ok);    border-color: rgba(127,174,110,.3); }
  .chip.nao   { background: rgba(196,91,77,.12);  color: var(--danger); border-color: rgba(196,91,77,.3); }
  .chip.warn  { background: rgba(217,162,60,.12); color: var(--warn);   border-color: rgba(217,162,60,.3); }

  .barra-ferramentas { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
  .barra-ferramentas input[type=search], .barra-ferramentas select { max-width: 300px; }
  .barra-ferramentas input[type=search] { flex: 1 1 220px; max-width: 260px; }
  .vazio { text-align: center; color: var(--muted); padding: 40px 16px; }
  .vazio .ico { font-size: 34px; display: block; margin-bottom: 8px; }

  /* ---------- editor de fórmula ---------- */
  .grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
  .grade-form .span-todo { grid-column: 1 / -1; }

  .linha-form-flex { display: flex; gap: 14px; flex-wrap: wrap; }
  .linha-form-desc { align-items: flex-end; }
  @media (max-width: 600px) {
    .linha-form-flex .campo { max-width: 100% !important; flex-basis: 100% !important; }
  }

  /* ---------- modal ---------- */
  #modalFundo {
    position: fixed; inset: 0; z-index: 1000; background: rgba(5,3,2,.7); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
  }
  body[data-tema="3"] #modalFundo { background: rgba(0,0,0,.3); }
  .modal-caixa {
    width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
    background: var(--modal-bg);
    border: 1px solid var(--modal-border); border-radius: 18px; padding: 26px; box-shadow: var(--shadow);
  }
  .modal-caixa h3 { color: var(--gold); font-size: 24px; margin-bottom: 16px; }
  .modal-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

  .detalhe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .detalhe-grid .full { grid-column: 1 / -1; }
  .detalhe-item .r { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
  .detalhe-item .v { font-size: 14px; margin-top: 2px; }
  /* topo do detalhe: imagem quadrada + meta */
  .ins-detalhe-topo { display: grid; grid-template-columns: 140px 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
  .ins-detalhe-img {
    width: 140px; height: 140px; object-fit: cover; border-radius: 10px;
    background: var(--panel-3); border: 1px solid var(--line); display: block;
  }
  .ins-detalhe-placeholder {
    width: 140px; height: 140px; border-radius: 10px; background: var(--panel-3);
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 40px;
  }
  .ins-detalhe-meta { display: flex; flex-direction: column; gap: 10px; }
  .ins-detalhe-desc { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .ins-detalhe-desc .r { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
  .ins-detalhe-desc .v { font-size: 13px; color: var(--cream); line-height: 1.6; margin-top: 4px; }

  /* ---------- perfil ---------- */
  .painel-foto-h {
    display: flex; align-items: center; gap: 20px; margin-bottom: 16px;
  }
  .avatar-grande {
    width: 92px; height: 92px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0;
    border: 3px solid var(--amber); background: var(--panel-3); box-shadow: 0 0 30px rgba(201,142,74,.25);
  }
  .painel-foto-info h3 { margin-bottom: 10px; }
  @media (max-width: 600px) { .painel-foto-h { flex-direction: column; text-align: center; } }

  /* Seletor de temas no perfil */
  .tema-opcoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
  .tema-btn {
    flex: 1; min-width: 90px; padding: 12px 10px; border-radius: 10px; border: 2px solid var(--line);
    background: var(--panel-3); color: var(--muted); font-family: 'Inter'; font-size: 12px;
    cursor: pointer; text-align: center; transition: all .2s; line-height: 1.4;
  }
  .tema-btn:hover { border-color: var(--amber); color: var(--cream); }
  .tema-btn.ativo { border-color: var(--amber); color: var(--gold); background: rgba(201,142,74,.1); }
  .tema-btn .tema-ico { font-size: 20px; display: block; margin-bottom: 4px; }

  .codigo-token { letter-spacing: 12px; text-align: center; font-size: 26px; font-weight: 600; }
  .nota { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

  /* ============ LANDING PAGE PÚBLICA ============ */

  /* topbar pública */
  .pub-topbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 16px; padding: 12px 32px;
    background: rgba(245,240,235,.95); backdrop-filter: blur(10px);
    border-bottom: 1px solid #ddd5c8; box-shadow: 0 2px 12px rgba(0,0,0,.08);
  }
  .pub-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
  .pub-icone { font-size: 26px; }
  .pub-topbar .brand { font-size: 24px; color: #5a3820; }
  .pub-nav { flex: 1; display: flex; gap: 4px; }
  .pub-nav button {
    background: transparent; border: none; color: #7a6555;
    padding: 8px 14px; font-family: 'Inter'; font-size: 13px; font-weight: 500;
    border-radius: 8px; cursor: pointer; transition: all .2s;
  }
  .pub-nav button:hover, .pub-nav button.ativo { color: #5a3820; background: rgba(90,58,42,.08); }
  .pub-acoes { display: flex; align-items: center; gap: 10px; }
  .pub-acoes .sel-idioma {
    padding: 7px 8px; font-size: 13px; font-family: 'Inter';
    height: 34px; line-height: 1;
  }
  .pub-acoes .btn-mini { height: 34px; font-size: 13px; }

  /* hero */
  .pub-hero {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
    max-width: 1180px; margin: 0 auto; padding: 32px 32px 28px;
    height: calc(100vh - 57px); max-height: 680px; overflow: hidden;
  }
  .pub-titulo {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 72px; font-weight: 700; color: #1a0f08; line-height: 1; margin-bottom: 16px;
  }
  .pub-titulo em { font-style: italic; color: #8b5a3c; }
  .pub-subtitulo { font-size: 17px; color: #7a6555; line-height: 1.6; margin-bottom: 24px; max-width: 420px; }
  .pub-beneficios { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 440px; }
  .pub-beneficios li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: #5a4a3a; line-height: 1.5; }
  .pub-beneficio-ico {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
    background: rgba(139,90,60,.12); color: #8b5a3c; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
  }
  .pub-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

  /* carrossel */
  .carrossel { position: relative; width: 100%; overflow: hidden; border-radius: 20px; }
  .carrossel-trilho {
    display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); will-change: transform;
  }
  .carrossel-card {
    min-width: 100%; position: relative; border-radius: 20px; overflow: hidden;
    height: 320px; background: #f0e8e0;
    box-shadow: 0 8px 40px rgba(90,58,42,.18);
  }
  .carrossel-card img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .carrossel-card .carrossel-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 40px 20px 20px;
    background: linear-gradient(0deg, rgba(10,5,2,.85) 0%, transparent 100%);
    color: #fff;
  }
  .carrossel-label .c-nome { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; }
  .carrossel-label .c-perfil {
    display: inline-block; margin-top: 6px; padding: 3px 12px;
    background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.3); border-radius: 20px;
    font-size: 12px; font-weight: 600; letter-spacing: .5px; color: #fff;
  }
  .carrossel-label .c-desc {
    font-size: 11px; color: rgba(255,255,255,.75); margin-top: 5px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .carrossel-dots {
    display: flex; justify-content: center; gap: 6px; margin-top: 12px;
  }
  .carrossel-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ddd5c8; cursor: pointer; transition: background .3s;
  }
  .carrossel-dots span.ativo { background: #8b5a3c; }

  /* catálogo público */
  #publicShell { background: #f5f0eb; min-height: 100vh; color: #1a0f08; }
  .pub-main { max-width: 1180px; margin: 0 auto; padding: 32px 32px 80px; }
  .pub-catalogo-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
  .pub-catalogo-header > div { min-width: 0; flex: 1 1 auto; }
  .pub-catalogo-titulo {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 48px; font-weight: 700; color: #1a0f08; line-height: 1;
  }
  .pub-catalogo-titulo em { font-style: italic; color: #8b5a3c; }
  .pub-catalogo-desc { color: #7a6555; font-size: 14px; margin-top: 8px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .pub-barra {
    display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center;
  }
  .pub-busca-wrap {
    flex: 1 1 220px; max-width: 300px; min-width: 200px; position: relative;
  }
  .pub-barra select.pub-filtro-estreito { max-width: 170px; flex: 0 1 170px; }
  .pub-busca-wrap input {
    width: 100%; padding: 10px 12px 10px 36px;
    background: #fff; border: 1px solid #ddd5c8; border-radius: 10px;
    color: #1a0f08; font-family: 'Inter'; font-size: 14px;
  }
  .pub-busca-ico {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 15px;
  }
  .pub-busca-wrap input:focus { outline: none; border-color: #8b5a3c; }

  /* layout lista + detalhe (compartilhado: público e logado, Insumos e Fórmulas gerais) */
  .pub-catalogo-layout {
    display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start;
  }
  /* Fórmulas gerais: painel de detalhe mais largo, pra caber a tabela de composição */
  .pub-catalogo-layout.layout-largo { grid-template-columns: 1fr 420px; }
  .layout-largo .tabela-wrap { margin-top: 4px; }
  .layout-largo table { min-width: 0; font-size: 12px; }
  .layout-largo thead th, .layout-largo tbody td { padding: 7px 8px; }

  /* lista de itens (insumos/fórmulas) */
  .pub-ins-item {
    display: grid; grid-template-columns: 48px 1fr; align-items: start; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
    cursor: pointer; transition: background .15s;
  }
  .pub-ins-item:first-child { border-top: 1px solid var(--line); }
  .pub-ins-item:hover { background: rgba(139,90,60,.06); }
  .pub-ins-item.selecionado { background: rgba(139,90,60,.1); }
  .pub-ins-thumb {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    background: var(--panel-3); border: 1px solid var(--line); flex-shrink: 0;
  }
  .pub-ins-thumb-placeholder {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--panel-3); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
  }
  .pub-ins-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pub-ins-linha-topo { display: flex; align-items: center; gap: 8px; }
  .pub-ins-nome { font-weight: 600; font-size: 14px; color: var(--cream); }
  .pub-ins-sub { font-size: 11px; color: var(--muted); }
  .pub-ins-flag {
    display: inline-flex; align-items: center; flex-shrink: 0;
    font-size: 10px; font-weight: 600; color: var(--amber);
    background: rgba(139,90,60,.1); border: 1px solid rgba(139,90,60,.25);
    border-radius: 20px; padding: 2px 9px; text-transform: uppercase; letter-spacing: .4px;
  }
  .pub-ins-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px;
                  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* box de detalhe lateral (compartilhado) */
  .pub-detalhe-box {
    position: sticky; top: 80px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
    overflow: hidden; box-shadow: var(--shadow);
    transition: all .3s ease;
  }
  .pub-detalhe-vazio {
    padding: 60px 24px; text-align: center;
  }
  .pub-detalhe-hint { color: var(--muted); font-size: 13px; line-height: 1.6; }
  /* layout do box de detalhe (usado também em modal, no mobile) */
  .pub-detalhe-corpo { padding: 18px 20px; }
  .pub-detalhe-corpo .d-nome {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 700; color: var(--cream); margin-bottom: 12px; line-height: 1.2;
  }
  .pub-detalhe-topo { display: grid; grid-template-columns: 90px 1fr; gap: 12px; margin-bottom: 14px; align-items: start; }
  .pub-detalhe-img-sq {
    width: 90px; height: 90px; object-fit: cover; border-radius: 8px;
    background: var(--panel-3); display: block; border: 1px solid var(--line);
  }
  .pub-detalhe-meta { display: flex; flex-direction: column; gap: 8px; }
  .pub-detalhe-desc-bloco { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .pub-detalhe-desc-txt { font-size: 12.5px; color: var(--cream); line-height: 1.6; margin-top: 4px; }
  .pub-detalhe-corpo .d-rotulo { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
  .pub-detalhe-corpo .d-valor { font-size: 13px; color: var(--cream); margin-top: 2px; }
  .pub-detalhe-corpo .d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 16px; }
  .pub-detalhe-corpo .d-ver {
    display: block; text-align: center; padding: 10px;
    border-top: 1px solid var(--line); font-size: 12px; font-weight: 600;
    color: var(--amber); text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
    text-decoration: none;
  }
  .pub-detalhe-corpo .d-ver:hover { background: rgba(139,90,60,.06); }

  /* modal de detalhe (mobile, reaproveita o modal genérico do app) */
  #modalConteudo .pub-detalhe-corpo { padding: 0; }

  /* paginação pública */
  .pub-paginacao {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    margin-top: 32px; flex-wrap: wrap;
  }
  /* na barra de busca (mesma linha de busca/filtro, alinhada à direita) */
  .pub-barra .pub-paginacao { margin: 0 0 0 auto; justify-content: flex-end; }
  .pub-paginacao button {
    padding: 8px 14px; border-radius: 8px; border: 1px solid #ddd5c8;
    background: #fff; color: #5a3820; font-family: 'Inter'; font-size: 13px;
    cursor: pointer; transition: all .2s;
  }
  .pub-paginacao button:hover { border-color: #8b5a3c; background: rgba(90,58,42,.05); }
  .pub-paginacao button.ativo { background: #8b5a3c; color: #fff; border-color: #8b5a3c; }
  .pub-paginacao button:disabled { opacity: .4; cursor: not-allowed; }
  .pub-paginacao .pag-info { font-size: 12px; color: #b8a898; padding: 0 8px; }

  /* overlay de autenticação */
  #authOverlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,.35); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
  }
  #authOverlay #authShell {
    min-height: unset; padding: 0;
  }
  #authOverlay .auth-card {
    max-height: 90vh; overflow-y: auto;
  }

  /* ============ RESPONSIVIDADE MOBILE ============ */
  @media (max-width: 720px) {
    .topbar { padding: 10px 16px; gap: 12px; justify-content: space-between; }
    .topbar .logo .brand { font-size: 16px; }
    .topbar .logo .icone { font-size: 22px; }

    .nav-sep { display: none; }
    /* No mobile os grupos "somem" e os botões voltam a ser filhos diretos da barra */
    .nav-grupo, .nav-grupo-itens { display: contents; }
    .nav-grupo-rotulo { display: none; }

    nav:not(.pub-nav) {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
      background: var(--nav-mob-bg);
      border-top: 1px solid var(--nav-mob-border);
      box-shadow: 0 -4px 18px rgba(0,0,0,.5);
      display: flex; justify-content: space-around; gap: 0;
      padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    nav:not(.pub-nav) button {
      flex: 1; min-width: 0; flex-direction: column; gap: 2px; padding: 6px 2px;
      font-size: 10px; line-height: 1.15; text-align: center; white-space: normal; border-radius: 10px;
    }
    nav:not(.pub-nav) button .nav-ico { display: block; font-size: 19px; }

    main { padding: 18px 14px 110px; }
    .view-titulo h2 { font-size: 24px; }
    .auth-card { padding: 28px 22px; }
    .barra-ferramentas input[type=search], .barra-ferramentas select { max-width: 100%; }
    .modal-caixa { padding: 20px 16px; }
    .detalhe-grid { grid-template-columns: 1fr; }
    .tema-opcoes { gap: 8px; }
    .tema-btn { min-width: 80px; padding: 10px 8px; }

    /* public mobile */
    .pub-topbar { padding: 10px 16px; flex-wrap: wrap; row-gap: 10px; }
    .pub-logo { flex: 0 0 100%; order: 1; }
    .pub-acoes { flex: 0 0 100%; order: 2; justify-content: flex-start; }
    .pub-nav {
      flex: 0 0 100%; order: 3; justify-content: center;
      padding-top: 10px; border-top: 1px solid #ddd5c8;
    }
    .pub-hero { grid-template-columns: 1fr; padding: 28px 16px 24px; min-height: unset; height: auto; max-height: none; overflow: visible; gap: 24px; }
    .pub-titulo { font-size: 48px; }
    .pub-hero-visual { order: -1; }
    .pub-catalogo-layout, .pub-catalogo-layout.layout-largo { grid-template-columns: 1fr; }
    .pub-detalhe-box { display: none; }
    .pub-main { padding: 20px 14px 80px; }
    .pub-ins-item { grid-template-columns: 42px 1fr; }
    .pub-ins-desc { display: none; }
    .pub-catalogo-titulo { font-size: 32px; }
  }