/* ===== TEMAS ===== */
html.theme-dark{
  --bg:#0c0f14; --panel:#141922; --soft:#1b2230; --accent:#6ee7ff; --accent2:#a78bfa;
  --text:#e9edf1; --muted:#9aa7b2; --border:#263040; --chip:#1f2836; --shadow:0 8px 30px rgba(0,0,0,.25);
}
html.theme-light{
  --bg:#f6f8fb; --panel:#ffffff; --soft:#f1f4f9; --accent:#0ea5e9; --accent2:#8b5cf6;
  --text:#0e1726; --muted:#576074; --border:#d9e0ea; --chip:#eef2f8; --shadow:0 8px 30px rgba(10,10,10,.08);
}

*{box-sizing:border-box}
body{
  margin:0;
  background: linear-gradient(180deg, var(--panel), var(--bg) 35%, var(--panel));
  color:var(--text);
  font:14.5px/1.45 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.container{max-width:1100px;margin:28px auto;padding:0 16px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:10px;background:radial-gradient(circle at 30% 30%,var(--accent),var(--accent2));box-shadow:0 0 20px #6ee7ff33}
h1{font-size:20px;margin:0}
.badge{font-size:12px;color:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.section{padding:18px}
.section + .section{border-top:1px solid var(--border)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
label{color:var(--muted);font-size:12px}
select, input[type="text"], input[type="password"], input[type="datetime-local"], input[type="date"], textarea{
  width:100%;background:var(--soft);color:var(--text);border:1px solid var(--border);
  border-radius:10px;padding:12px 12px;outline:none;transition:.2s;
}
select:focus, input:focus, textarea:focus{border-color:var(--accent)}
textarea{min-height:90px;resize:vertical}
.actions{display:flex;gap:10px;flex-wrap:wrap}
button{
  appearance:none;border:0;border-radius:10px;padding:10px 12px;font-weight:600;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#001018;transition:transform .05s ease;
}
button:hover{transform:translateY(-1px)}
.btn-secondary, a.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:10px;font-weight:600;text-decoration:none;
  background:#222a39;color:var(--text);border:1px solid var(--border);cursor:pointer;
  transition:transform .05s ease, background .15s ease;
}
html.theme-light .btn-secondary{ background:#f0f3f9; border-color:var(--border); color:var(--text); }
.btn-secondary:hover, a.btn-secondary:hover{ transform:translateY(-1px); background:#263045; }
html.theme-light .btn-secondary:hover{ background:#e7ecf6; }

.msg{padding:10px 12px;border-radius:10px;margin-bottom:12px}
.msg.ok{background:#0d1a12;border:1px solid #173b26;color:#b7f3c9}
.msg.err{background:#1a0f10;border:1px solid #3b1722;color:#f7c2c2}
html.theme-light .msg.ok{ background:#e8fbef; border-color:#b6e6c9; color:#0e5c2c; }
html.theme-light .msg.err{ background:#ffe8ea; border-color:#f7c2c2; color:#7a1d25; }

/* --- Tabela --- */
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }
table { width:100%; table-layout: fixed; border-collapse:separate; border-spacing:0; word-break:break-word; }
th, td { padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:top; overflow:hidden; }
th{color:#c9d4df;font-weight:600;background:#101522;position:sticky;top:0}
html.theme-light th{ color:#223; background:#eef2f8; }
tr:hover td{background:#101521}
html.theme-light tr:hover td{ background:#f6f9ff; }
thead th:nth-child(1), tbody td:nth-child(1) { width:56px; text-align:center; } /* id */
thead th:nth-child(2), tbody td:nth-child(2) { width:176px; } /* Data/Hora */
thead th:last-child,   tbody td:last-child   { width:220px; } /* Ações */
.truncate { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.nowrap   { white-space:nowrap; }
.cards { display:flex; gap:8px; flex-wrap:wrap; }
.chip  { padding:4px 8px; font-size:11.5px; border-radius:999px; background:var(--chip); border:1px solid var(--border); }
.actions-cell{ display:flex; gap:8px; flex-wrap:wrap; overflow:visible; }
.btn-secondary.small { padding:8px 10px; font-size:12.5px; }

/* paginação */
.pagination{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.pagination .pg{padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:#222a39;color:var(--text);text-decoration:none}
html.theme-light .pagination .pg{ background:#f0f3f9; }
.pagination .pg.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#001018;border:0}
.pagination .count{color:var(--muted);font-size:12px}

/* footer */
.footer{color:var(--muted);font-size:12px;text-align:center;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}

/* Modais base (usados pelo Ver/Editar, Ajuda, Significados, Categorias) */
.modal-backdrop{
  position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:9999;
}
.modal{width:min(820px,96vw);background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.25);overflow:hidden}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.modal h3{margin:0;font-size:16px}
.modal .content{padding:18px;max-height:75vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) #101522}
.modal .content::-webkit-scrollbar{width:8px}
.modal .content::-webkit-scrollbar-thumb{background-color:var(--accent);border-radius:6px}
.modal .content::-webkit-scrollbar-track{background-color:#101522}
.close-btn{background:#222a39;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px 10px;cursor:pointer}
html.theme-light .close-btn{ background:#f0f3f9; }

/* Painel de Dicas (abaixo do formulário) */
.hints{background: var(--soft);border:1px solid var(--border);border-radius:12px;padding:12px;margin:6px 0 14px 0;display:none}
.hints h3{margin:0 0 8px 0;font-size:14px;color: var(--text)}
.hints .hint{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:10px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;background: var(--panel)}
.hints .num{font-family:ui-monospace,monospace;background: var(--chip);border:1px solid var(--border);border-radius:8px;padding:6px 8px;color: var(--text);text-align:center}
.hints .title{font-weight:600}
.hints .k{color: var(--muted);font-size:12px;margin-top:2px}
.hints .s{white-space:pre-wrap;margin-top:6px}

/* Editor de Significados/Categorias (painel/side modal partilhado) */
.help-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; z-index:10000;}
.help-panel{position:fixed; right:20px; bottom:20px; width:min(520px, 96vw); height:min(78vh, 92vh);
  background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.35);
  display:flex; flex-direction:column; overflow:hidden;}
.help-header{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border);}
.help-body{padding:14px; overflow-y:auto; flex:1; scrollbar-width:thin; scrollbar-color:var(--accent) #101522;}
.help-body::-webkit-scrollbar{width:8px}
.help-body::-webkit-scrollbar-thumb{background-color:var(--accent);border-radius:6px}
.help-body::-webkit-scrollbar-track{background-color:#101522}
.help-item{border:1px solid var(--border); background: var(--panel); border-radius:12px; padding:10px 12px; margin-bottom:10px;}
.help-item .head{display:flex; align-items:center; gap:8px; font-weight:600;}
.help-item .badge{margin-left:auto}
.help-item .sub{color:#b7c7d6; font-size:12px; margin-top:4px}
.help-item .txt{white-space:pre-wrap; line-height:1.55; margin-top:8px}
.help-footer{padding:10px 14px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px}
.help-btn{background:#222a39;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px 10px;cursor:pointer}
.help-primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#001018; border:0}

/* Estrela de favoritos */
.star-btn {
  background:#1e2533;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  font-weight:700;
  cursor:pointer;
  color:#a4b1c3;
}
.star-btn.on {
  background:linear-gradient(135deg, #ffd54d, #ff9f1a);
  color:#3a2a00;
  border:0;
}
.star-btn.small { font-size:14px; }

/* responsivo */
@media (max-width: 980px) {
  thead th:nth-child(3), tbody td:nth-child(3) { display:none; } /* Pergunta (para caber) */
}

/* ===== Correção tema claro para "Explicação das cartas selecionadas" (.hints) ===== */
html.theme-light .hints{
  background: var(--soft);
  border-color: var(--border);
}
html.theme-light .hints h3{
  color: var(--text);
}
html.theme-light .hints .hint{
  background: var(--panel);
  border-color: var(--border);
}
html.theme-light .hints .num{
  background: var(--chip);
  border-color: var(--border);
  color: var(--text);
}
html.theme-light .hints .title{ color: var(--text); }
html.theme-light .hints .k{ color: var(--muted); }
html.theme-light .hints .s{ color: var(--text); }



/* (mantido) Correção final: Tema Claro — Explicação das cartas selecionadas */
html.theme-light .hints {
  background: var(--soft) !important;
  border-color: var(--border) !important;
}

html.theme-light .hints h3 {
  color: var(--text) !important;
}

html.theme-light .hints .hint {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}

html.theme-light .hints .num {
  background: var(--chip) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html.theme-light .hints .title {
  color: var(--text) !important;
}

html.theme-light .hints .k {
  color: var(--muted) !important;
}

html.theme-light .hints .s {
  color: var(--text) !important;
}



/* ===== Correção visual do tema claro — tons mais claros (final) ===== */
html.theme-light {
  --bg: #fdfdfd;
  --panel: #ffffff;
  --soft: #f9fafe;
  --chip: #f2f5fa;
  --border: #d7dde8;
  --text: #0e1726;
  --muted: #4d5668;
}

/* Forçar contraste correto no painel de explicações (.hints) */
html.theme-light .hints {
  background: #ffffff !important;
  border-color: #d7dde8 !important;
}

html.theme-light .hints .hint {
  background: #f9fafe !important;
  border-color: #d7dde8 !important;
}

html.theme-light .hints .num {
  background: #eef2f8 !important;
  color: #0e1726 !important;
}



/* ===== Overrides de alta especificidade para tema claro (.hints) ===== */
html.theme-light body .panel .hints {
  background: #ffffff !important;
  border-color: #d7dde8 !important;
}
html.theme-light body .panel .hints .hint {
  background: #f9fafe !important;
  border-color: #d7dde8 !important;
}
html.theme-light body .panel .hints .num {
  background: #eef2f8 !important;
  color: #0e1726 !important;
  border-color: #d7dde8 !important;
}
html.theme-light body .panel .hints h3,
html.theme-light body .panel .hints .title,
html.theme-light body .panel .hints .s {
  color: #0e1726 !important;
}
html.theme-light body .panel .hints .k {
  color: #4d5668 !important;
}



/* ===== Tema claro: modal de categorias/ajuda ===== */
html.theme-light .modal { background: #ffffff !important; border-color: var(--border) !important; }
html.theme-light .modal header { background: #ffffff !important; border-bottom-color: var(--border) !important; }
html.theme-light .help-item { background: var(--panel) !important; border-color: var(--border) !important; }
html.theme-light .help-item .head { color: var(--text) !important; }
html.theme-light .help-item input[type="text"] { background: var(--soft) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* ===== Remoção total da coluna "Cartas" (5.ª coluna) ===== */
thead th:nth-child(5),
tbody td:nth-child(5) {
  display: none !important;
}

/* Ajustes de layout após remoção (opcional): mantém ações como última coluna */
thead th:last-child, tbody td:last-child { text-align: right; }


/* ===== Ações como texto inline (Ver • Editar • ★ • Eliminar) ===== */
.actions-cell{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
}

/* Normalizar botões dentro das ações para "texto" */
.actions-cell .btn-secondary.small,
.actions-cell .icon-btn,
.actions-cell .star-btn,
.actions-cell button,
.actions-cell a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  width: auto !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
  color: var(--text) !important;
  text-decoration: none !important;
}

/* Visual de link no hover */
.actions-cell .btn-secondary.small:hover,
.actions-cell a:hover,
.actions-cell button:hover{
  text-decoration: underline !important;
  transform: none !important;
  background: transparent !important;
}

/* Estrela de favorito apenas como carácter, sem fundo */
.actions-cell .star-btn{
  font-weight: 700 !important;
  border-radius: 0 !important;
}
.actions-cell .star-btn.on{
  color: #ffb300 !important;
}

/* Quando a linha tem divisor (se existir), manter alinhamento direito se preferires */
thead th:last-child, tbody td:last-child { text-align: right; }


/* ===== Coluna "Categoria" mais estreita ===== */
thead th:nth-child(4),
tbody td:nth-child(4) {
  width: 110px !important;
  text-align: center;
}

/* Centralizar o chip e ajustar tamanho */
tbody td:nth-child(4) .chip {
  margin: 0 auto;
  padding: 3px 8px;
  font-size: 12px;
}


/* === Botões globais — estilo unificado, sem gradiente === */
button,
.btn-primary,
.btn-secondary,
.help-btn,
.help-primary,
.modal .help-footer button,
.modal footer button {
  border: 0 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, transform 0.1s ease;
  font-weight: 600;
}

/* Tema escuro — azul sólido */
html.theme-dark button,
html.theme-dark .btn-primary,
html.theme-dark .help-primary,
html.theme-dark .modal footer button {
  background: #0284c7 !important;
  color: #ffffff !important;
}

html.theme-dark button:hover,
html.theme-dark .btn-primary:hover,
html.theme-dark .help-primary:hover,
html.theme-dark .modal footer button:hover {
  background: #0369a1 !important;
}

/* Tema claro — azul mais vivo */
html.theme-light button,
html.theme-light .btn-primary,
html.theme-light .help-primary,
html.theme-light .modal footer button {
  background: #0ea5e9 !important;
  color: #ffffff !important;
}

html.theme-light button:hover,
html.theme-light .btn-primary:hover,
html.theme-light .help-primary:hover,
html.theme-light .modal footer button:hover {
  background: #0284c7 !important;
}

/* Botões secundários / neutros (ex: "Limpar", "Cancelar") */
html.theme-light .btn-secondary,
html.theme-dark  .btn-secondary {
  background: #e5e7eb !important;
  color: #0e1726 !important;
  border: 1px solid #cbd5e1 !important;
}
html.theme-light .btn-secondary:hover,
html.theme-dark  .btn-secondary:hover {
  background: #dbe0e8 !important;
}

/* Remover gradientes antigos */
button,
.btn-primary,
.btn-secondary,
.help-btn,
.help-primary,
.modal footer button {
  background-image: none !important;
}


/* === Uniformizar dimensões de todos os botões === */
button,
.btn-primary,
.btn-secondary,
.help-btn,
.help-primary,
.modal footer button {
  min-height: 42px !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
}

/* Garantir consistência entre botão azul e cinzento */
.btn-secondary {
  box-sizing: border-box !important;
}

/* Corrigir pequenas variações em layouts grid */
.actions .btn-secondary,
.section .btn-secondary {
  padding: 10px 18px !important;
}


/* === Compactar botões e aplicar azul mais escuro === */
button,
.btn-primary,
.btn-secondary,
.help-btn,
.help-primary,
.modal footer button {
  min-height: 36px !important;      /* antes 42px */
  padding: 8px 14px !important;     /* mais compacto */
  border-radius: 8px !important;
  font-size: 13.5px !important;
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  font-weight: 600;
}

/* Azul fixo mais escuro (claro e escuro) */
html.theme-dark button,
html.theme-dark .btn-primary,
html.theme-dark .help-primary,
html.theme-dark .modal footer button,
html.theme-light button,
html.theme-light .btn-primary,
html.theme-light .help-primary,
html.theme-light .modal footer button {
  background: #007acc !important;
  color: #ffffff !important;
}

html.theme-dark button:hover,
html.theme-dark .btn-primary:hover,
html.theme-dark .help-primary:hover,
html.theme-dark .modal footer button:hover,
html.theme-light button:hover,
html.theme-light .btn-primary:hover,
html.theme-light .help-primary:hover,
html.theme-light .modal footer button:hover {
  background: #006bb3 !important;
}

/* Secundários/Neutros */
.btn-secondary {
  background: #e5e7eb !important;
  color: #0e1726 !important;
  border: 1px solid #cbd5e1 !important;
  padding: 8px 14px !important;     /* igual aos primários */
}

/* Garantir que não há gradientes */
button,
.btn-primary,
.btn-secondary,
.help-btn,
.help-primary,
.modal footer button {
  background-image: none !important;
  box-shadow: none !important;
}


/* === Ver lançamento: preservar ENTERs nas interpretações e textos longos === */
.modal .content p,
.modal .content .text,
.modal .content .value,
.modal .content .interp,
.modal .content .interp-user,
.modal .content .interp-ai,
.modal .content .details,
.modal .content [data-field="interp_user"],
.modal .content [data-field="interp_ai"] {
  white-space: pre-wrap;   /* mantém \n e quebra linhas automaticamente */
  word-break: break-word;
}


/* === Modal Ver: texto com quebras de linha === */
.modal .fulltext{
  white-space: pre-wrap;
  word-break: break-word;
}

.brand-logo{width:36px;height:36px;border-radius:8px;display:block;transition:transform 0.15s ease;}

.brand-logo:hover{transform:scale(1.05);}


/* === TABS (non-intrusive) === */
.tabs{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border);margin:0 0 12px 0;padding:0 6px 8px 6px}
.tab{appearance:none;border:0;cursor:pointer;padding:8px 12px;border-radius:8px;font-weight:600;font-size:14px;background:transparent;color:var(--muted)}
.tab:hover{text-decoration:underline}
.tab.active{color:var(--text);background:var(--soft);border:1px solid var(--border);text-decoration:none}
.tab-page{display:none}
.tab-page.active{display:block}
@media (max-width:720px){.tabs{gap:8px;padding:0 4px 8px 4px}.tab{font-size:13px;padding:7px 10px}}

/* Espaçamento entre input e botão no login */
form input[type="password"] {
  margin-bottom: 10px !important; /* cria espaço abaixo do campo */
}

form button {
  margin-top: 6px !important; /* assegura separação visual */
}

/* ====== TABS ESTILO MENU COM DIVISORES (inspirado no mock) ====== */
.tabs{
  display:flex;
  align-items:stretch;
  gap:0;
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  margin:0 0 12px 0;
}
.tab{
  appearance:none;
  background:transparent;
  flex:1 1 0;
  padding:14px 16px 12px 16px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  border:0;
  position:relative;
  cursor:pointer;
  transition:color .15s ease, background-color .15s ease, opacity .15s ease;
}
.tab:not(:last-child)::after{
  content:"";
  position:absolute;
  top:8px; bottom:8px; right:0;
  width:1px;
  background:var(--border);
  opacity:.7;
}
.tab:hover{ color:var(--text); background:rgba(0,0,0,.02); }
html.theme-dark .tab:hover{ background:rgba(255,255,255,.03); }

/* Barra de seleção no topo */
.tab::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:transparent;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s ease, background-color .18s ease;
}
.tab.active{
  color:var(--text);
  background:transparent;
}
.tab.active::before{
  background:var(--primary, #10b981);
  transform:scaleX(1);
}

/* Páginas */
.tab-page{ display:none; }
.tab-page.active{ display:block; }

/* Variante opcional com ícone via data-ico (emoji ou caractere) */
.tab[data-ico]{
  padding-top:18px;
}
.tab[data-ico]::marker{ content:""; }
.tab[data-ico] .__label{ display:block; }
.tab[data-ico]::after{ /* keep divider defined above */ }
.tab[data-ico]::before{ /* reserve for top bar (already used) */ }
.tab[data-ico] .__ico{
  display:block;
  font-size:16px;
  margin-bottom:6px;
  opacity:.8;
}
@media (max-width:720px){
  .tab{ padding:12px 10px; font-size:11px; letter-spacing:.05em; }
}

/* ====== TABS — estilo profissional (barra, divisórias, azul, ícones) ====== */
:root{ --primary: #1ea7ff; }

.tabs{
  display:flex;
  align-items:stretch;
  gap:0;
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  margin:0 0 12px 0;
  padding:0;
}
.tabs .tab{
  all: unset;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex:1 1 0;
  padding:14px 16px 12px 16px;
  cursor:pointer;
  font: 700 12px/1 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted) !important;
  position:relative;
}
.tabs .tab:not(:last-child)::after{
  content:'';
  position:absolute; top:8px; bottom:8px; right:0;
  width:1px; background:var(--border); opacity:.7;
}
.tabs .tab:hover{ color:var(--text) !important; background:rgba(0,0,0,.02) !important; }
html.theme-dark .tabs .tab:hover{ background:rgba(255,255,255,.03) !important; }
.tabs .tab::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:3px;
  background:transparent;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s ease, background-color .18s ease;
}
.tabs .tab.active{ color:var(--text) !important; }
.tabs .tab.active::before{ background:var(--primary); transform:scaleX(1); }
.tabs .tab .tab-ico{ font-size:16px; line-height:1; opacity:.9; }
.tabs .tab .tab-label{ line-height:1; }
.tab-page{ display:none; }
.tab-page.active{ display:block; }
@media (max-width:720px){
  .tabs .tab{ padding:12px 10px; gap:8px; font-size:11px; }
  .tabs .tab .tab-ico{ font-size:15px; }
}

/* ====== TABS — estilo clássico (como o mock), respeitando variáveis de tema ====== */
.tabs{
  display:flex;
  gap:12px;
  align-items:flex-end;
  border-bottom:1px solid var(--border);
  margin:0 0 16px 0;
  padding:0 6px;
  background:transparent;
}

/* botão como aba clássica */
.tabs .tab{
  all: unset;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  cursor:pointer;
  font:600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--muted);
  background:transparent;
  border:1px solid transparent;
  border-bottom:none;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  position:relative;
  top:1px; /* para sobrepor a linha inferior */
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}

.tabs .tab:hover{
  color:var(--text);
  background:color-mix(in oklab, var(--soft) 65%, transparent);
}

html.theme-dark .tabs .tab:hover{
  background:color-mix(in oklab, var(--soft) 35%, transparent);
}

/* aba ativa: fundo suave + borda + integra na linha */
.tabs .tab.active{
  color:var(--text);
  background:var(--soft);
  border-color:var(--border);
}

/* remover qualquer indicador anterior */
.tabs .tab::before,
.tabs .tab::after{ content:none !important; }

/* páginas */
.tab-page{ display:none; }
.tab-page.active{ display:block; }

/* ícone opcional */
.tab-ico{ font-size:15px; line-height:1; opacity:.9; }
.tab-label{ line-height:1; }

@media (max-width:720px){
  .tabs{ gap:6px; padding:0 2px; }
  .tabs .tab{ padding:9px 10px; font-size:13px; }
}

/* ====== NAV TABS — compacto, quadrado, colado ====== */
.tabs{
  display:flex;
  gap:0; /* todos juntos */
  align-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  margin:0 0 10px 0;
  background:var(--soft);
  padding:0;
}

/* botões quadrados, pequenos, só ícone */
.tabs .tab{
  all: unset;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  cursor:pointer;
  color:var(--muted) !important;
  background:transparent;
  border-right:1px solid var(--border);
  position:relative;
  transition:background-color .12s ease, color .12s ease;
}
.tabs .tab:last-child{ border-right:none; }

/* ícone */
.tabs .tab .tab-ico{ font-size:18px; line-height:1; }
.tabs .tab .tab-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } /* sr-only */

/* hover/active */
.tabs .tab:hover{ background:color-mix(in oklab, var(--soft) 60%, transparent); color:var(--text) !important; }
html.theme-dark .tabs .tab:hover{ background:color-mix(in oklab, var(--soft) 35%, transparent); }
.tabs .tab.active{ background:var(--bg, #0000); color:var(--text) !important; }

@media (max-width:720px){
  .tabs .tab{ width:40px; height:40px; }
  .tabs{ margin-bottom:8px; }
}

/* ====== TABS — estilo EXACTO do mock (texto simples numa caixa), com cores do tema ====== */
.tabs{
  display:flex;
  align-items:center;
  gap:32px;                 /* espaçamento entre labels */
  background:var(--soft);   /* fundo suave do site */
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 14px;
  margin:0 0 12px 0;
}

/* cada item é só texto clicável, sem pílulas, sem barras, sem divisórias */
.tabs .tab{
  all: unset;
  display:inline-block;
  cursor:pointer;
  color:var(--text);
  font: 500 14px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding:2px 0;            /* ligeiro respiro vertical */
}

/* esconder quaisquer ícones anteriores e mostrar o label */
.tabs .tab .tab-ico{ display:none !important; }
.tabs .tab .tab-label{ display:inline !important; position:static !important; width:auto; height:auto; clip:auto; }

/* remover estilos antigos (barras/topos/outlines herdados) */
.tabs .tab::before,
.tabs .tab::after{ content:none !important; }

/* estado ativo: apenas ligeiro destaque tipográfico (como no mock) */
.tabs .tab.active{
  font-weight:600;
}

/* responsivo: reduzir espaçamento em ecrãs estreitos */
@media (max-width:720px){
  .tabs{ gap:18px; padding:8px 10px; }
  .tabs .tab{ font-size:13px; }
}

/* ====== NAV TABS — quadrados, pequenos, colados ====== */
.tabs{
  display:flex;
  gap:0; /* todos juntos */
  align-items:center;
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  padding:0;
  margin:0 0 10px 0;
}

/* botões perfeitamente quadrados e compactos */
.tabs .tab{
  all: unset;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  cursor:pointer;
  color:var(--muted) !important;
  background:transparent;
  border-right:1px solid var(--border);
  transition:background-color .12s ease, color .12s ease;
}
.tabs .tab:last-child{ border-right:none; }

/* usar ícone; esconder label para manter quadrado */
.tabs .tab .tab-ico{ font-size:17px; line-height:1; }
.tabs .tab .tab-label{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; /* sr-only */
}

/* estados */
.tabs .tab:hover{ background:color-mix(in oklab, var(--soft) 60%, transparent); color:var(--text) !important; }
html.theme-dark .tabs .tab:hover{ background:color-mix(in oklab, var(--soft) 35%, transparent); }
.tabs .tab.active{ background:var(--bg, transparent); color:var(--text) !important; }

@media (max-width:720px){
  .tabs .tab{ width:34px; height:34px; }
}

/* ====== NAV TABS — retangulares, cantos quadrados, compactos, com ícone + texto ====== */
.tabs{
  display:flex;
  gap:0;                    /* juntos */
  align-items:center;
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  padding:4px;              /* pequeno respiro interno */
  margin:0 0 10px 0;
}
.tabs .tab{
  all: unset;               /* mata heranças (pílulas azuis, etc.) */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;                  /* espaço entre ícone e texto */
  padding:6px 10px;         /* compacto */
  cursor:pointer;
  color:var(--muted) !important;
  background:transparent !important;
  border-right:1px solid var(--border);
  border-radius:0;          /* cantos quadrados */
  font:600 13px/1.1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  transition:background-color .12s ease, color .12s ease;
}
.tabs .tab:last-child{ border-right:none; }
.tabs .tab .tab-ico{ font-size:16px; line-height:1; opacity:.9; }
.tabs .tab .tab-label{ display:inline; position:static; width:auto; height:auto; clip:auto; white-space:nowrap; }

/* estado hover/active */
.tabs .tab:hover{
  background:color-mix(in oklab, var(--soft) 65%, transparent);
  color:var(--text) !important;
}
html.theme-dark .tabs .tab:hover{
  background:color-mix(in oklab, var(--soft) 35%, transparent);
}
.tabs .tab.active{
  background:color-mix(in oklab, var(--soft) 80%, transparent) !important;
  color:var(--text) !important;
}

/* elimina quaisquer pseudo-indicadores herdados */
.tabs .tab::before,
.tabs .tab::after{ content:none !important; }

@media (max-width:720px){
  .tabs{ padding:3px; }
  .tabs .tab{ padding:6px 8px; font-size:12.5px; gap:6px; }
  .tabs .tab .tab-ico{ font-size:15px; }
}

/* ====== NAV TABS — igual ao botão "Adicionar": dimensão, ícone + texto legível ====== */
.tabs{
  display:flex;
  gap:8px;
  align-items:center;
  background:transparent;
  border:0;
  padding:0 2px 8px 2px; /* pequeno respiro sob o header */
  margin:0 0 8px 0;
}

:root{
  --btn-bg: var(--primary, #0ea5e9);
  --btn-bg-hover: color-mix(in oklab, var(--primary, #0ea5e9) 85%, black);
  --btn-border: color-mix(in oklab, var(--primary, #0ea5e9) 85%, black);
  --btn-text: #fff;
}

/* base igual ao botão primário da app */
.tabs .tab{
  all: unset;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  min-height:38px;            /* mesma altura do "Adicionar" */
  border-radius:10px;
  cursor:pointer;
  font:600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--btn-bg);
  color:var(--btn-text);
  border:1px solid var(--btn-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
  transition:background-color .15s ease, transform .04s ease;
}
.tabs .tab .tab-ico{ font-size:16px; line-height:1; }
.tabs .tab .tab-label{ white-space:nowrap; }

.tabs .tab:hover{ background:var(--btn-bg-hover); }
.tabs .tab:active{ transform:translateY(1px); }

/* estado inativo: outline para distinguir (mesma dimensão) */
.tabs .tab:not(.active){
  background:transparent;
  color:var(--text);
  border-color:var(--border);
}
.tabs .tab:not(.active):hover{
  background:color-mix(in oklab, var(--soft) 65%, transparent);
}

/* páginas */
.tab-page{ display:none; }
.tab-page.active{ display:block; }

@media (max-width:720px){
  .tabs{ gap:6px; padding:0 0 6px 0; }
  .tabs .tab{ padding:7px 12px; min-height:36px; font-size:13px; }
  .tabs .tab .tab-ico{ font-size:15px; }
}

/* ===== Tabs iguais ao botão primário (dimensão + tipografia + ícone) ===== */
.tabs{ display:flex; gap:8px; align-items:center; margin:0 0 10px 0; padding:0; border:0; background:transparent; }
.tabs .tab{
  all: unset;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:36px !important;
  padding:8px 14px !important;
  border-radius:8px !important;
  font-size:13.5px !important;
  line-height:1.1 !important;
  font-weight:600 !important;
  border:1px solid var(--border) !important;
  background: #ffffff00 !important;
  color: var(--text) !important;
  cursor:pointer;
}
html.theme-dark .tabs .tab{ background:transparent !important; }
.tabs .tab.active{
  border-color: transparent !important;
  background: #0ea5e9 !important; /* segue botão primário existente no CSS */
  color:#fff !important;
}
.tabs .tab:hover{ background: color-mix(in oklab, var(--soft) 70%, transparent) !important; }
.tabs .tab .tab-ico{ font-size:16px; line-height:1; }
.tabs .tab .tab-label{ white-space:nowrap; }

/* ===== Tabs: largura pela soma ícone+texto, cantos retos, sem truncar ===== */
.tabs{
  display:flex;
  gap:8px;
  align-items:center;
  background:transparent;
  border:0;
  padding:0 0 8px 0;
  margin:0 0 8px 0;
}
.tabs .tab{
  all: unset;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:8px 14px !important;
  min-height:36px !important;
  height:auto !important;
  width:auto !important;                /* adapta ao conteúdo */
  max-width:100%;
  border:1px solid var(--border) !important;
  border-radius:0 !important;          /* arestas retas */
  background:transparent !important;
  color:var(--text) !important;
  font:600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
  white-space:nowrap;                   /* não quebrar label */
  cursor:pointer;
}
.tabs .tab .tab-ico{ font-size:16px; line-height:1; }
.tabs .tab .tab-label{ display:inline; }

/* Ativo cheio (azul) para dar hierarquia visual */
.tabs .tab.active{
  background:#0ea5e9 !important;
  color:#fff !important;
  border-color:#0ea5e9 !important;
}
.tabs .tab:hover{
  background:color-mix(in oklab, var(--soft) 70%, transparent) !important;
}

@media (max-width:720px){
  .tabs{ gap:6px; }
  .tabs .tab{ padding:7px 12px !important; font-size:13px !important; }
}

/* ====== TABS — retangulares com texto fluido (estilo editor) ====== */
.tabs{
  display:flex;
  gap:6px;
  align-items:flex-end;
  margin:0 0 12px 0;
  padding:0 0 0 0;
  border-bottom:1px solid var(--border);
  background:transparent;
}

.tabs .tab{
  all:unset;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  max-width:100%;
  white-space:nowrap;
  cursor:pointer;
  color:var(--text);
  background:var(--soft);
  border:1px solid var(--border);
  border-bottom:none;              /* encosta à linha inferior */
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  font:600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  position:relative;
  top:1px;                         /* sobrepor a linha base */
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}

.tabs .tab:hover{
  background:color-mix(in oklab, var(--soft) 70%, transparent);
}

.tabs .tab.active{
  background:var(--bg, #fff);
  border-color:var(--border);
  color:var(--text);
}

/* barra azul fininha no topo do ativo */
.tabs .tab.active::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:3px;
  background:#1ea7ff;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
}

/* Ícone opcional */
.tabs .tab .tab-ico{ font-size:15px; line-height:1; }
.tabs .tab .tab-label{ white-space:nowrap; }

@media (max-width:720px){
  .tabs{ gap:4px; }
  .tabs .tab{ padding:7px 10px; font-size:13px; }
}

/* === TABS: mais baixos e mais largos (texto cabe dentro) === */
.tabs{ display:flex; gap:8px; align-items:flex-end; border-bottom:1px solid var(--border); padding:0 0 4px 0; }
.tabs .tab{
  all: unset;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:6px 18px !important;          /* mais baixo + mais largo */
  min-height:30px !important;            /* antes 36/38 */
  height:auto !important;
  width:auto !important;                 /* largura ao conteúdo */
  max-width:100%;
  background:var(--soft) !important;
  border:1px solid var(--border) !important;
  border-bottom:none !important;
  border-radius:0 !important;            /* cantos retos */
  color:var(--text) !important;
  font:600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
  white-space:nowrap;                     /* não quebrar dentro do botão */
  cursor:pointer;
  position:relative;
  top:1px;
}
.tabs .tab .tab-ico{ font-size:15px; line-height:1; }
.tabs .tab .tab-label{ white-space:nowrap; }
.tabs .tab:hover{ background:color-mix(in oklab, var(--soft) 70%, transparent) !important; }
.tabs .tab.active{ background:var(--bg, #fff) !important; border-color:var(--border) !important; color:var(--text) !important; }
.tabs .tab.active::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:3px; background:#1ea7ff; }

@media (max-width:720px){
  .tabs{ gap:6px; }
  .tabs .tab{ padding:5px 14px !important; min-height:28px !important; font-size:13px !important; }
}

/* === TABS: retângulos mais largos e todos juntos (sem espaços) === */
.tabs{
  display:flex;
  align-items:flex-end;
  gap:0;                         /* juntos */
  border-bottom:1px solid var(--border);
  margin:0 0 10px 0;
  padding:0;
  background:transparent;
}

.tabs .tab{
  all:unset;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:6px 24px !important;   /* MAIS LARGO */
  min-height:30px !important;
  height:auto !important;
  width:auto !important;         /* cresce com o texto */
  white-space:nowrap;
  background:var(--soft) !important;
  color:var(--text) !important;
  font:600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
  border:1px solid var(--border) !important;
  border-bottom:none !important; /* encosta à linha base */
  border-radius:0 !important;    /* cantos retos */
  cursor:pointer;
  position:relative;
  top:1px;
}

/* separadores encostados com divisor */
.tabs .tab + .tab{ margin-left:-1px; } /* sobrepõe a borda para parecer contínuo */

.tabs .tab:hover{
  background:color-mix(in oklab, var(--soft) 70%, transparent) !important;
}

.tabs .tab.active{
  background:var(--bg, #fff) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

.tabs .tab.active::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:3px;
  background:#1ea7ff;
}

/* ícone + texto */
.tabs .tab .tab-ico{ font-size:15px; line-height:1; }
.tabs .tab .tab-label{ white-space:nowrap; }

@media (max-width:720px){
  .tabs .tab{ padding:6px 18px !important; min-height:28px !important; font-size:13px !important; }
}

/* === TABS: largura x2 e ativo com fundo azul === */
.tabs{
  display:flex;
  align-items:flex-end;
  gap:0;
  border-bottom:1px solid var(--border);
  margin:0 0 10px 0;
  padding:0;
  background:transparent;
}
.tabs .tab{
  all:unset;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:6px 48px !important;       /* DOBRO da largura (antes 24px) */
  min-height:30px !important;
  height:auto !important;
  width:auto !important;
  white-space:nowrap;
  background:var(--soft) !important;
  color:var(--text) !important;
  font:600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
  border:1px solid var(--border) !important;
  border-bottom:none !important;
  border-radius:0 !important;
  cursor:pointer;
  position:relative;
  top:1px;
}
/* colados com divisória contínua */
.tabs .tab + .tab{ margin-left:-1px; }

/* hover */
.tabs .tab:hover{
  background:color-mix(in oklab, var(--soft) 70%, transparent) !important;
}

/* ATIVO: fundo azul */
.tabs .tab.active{
  background:#0ea5e9 !important;
  color:#fff !important;
  border-color:#0ea5e9 !important;
}
/* retirar indicador antigo se existir */
.tabs .tab.active::before{ content:none !important; }

.tabs .tab .tab-ico{ font-size:15px; line-height:1; }
.tabs .tab .tab-label{ white-space:nowrap; }

@media (max-width:720px){
  .tabs .tab{ padding:6px 40px !important; min-height:28px !important; font-size:13px !important; }
}


/* ==== Inline editor in hints panel ==== */
.hints .hint { position: relative; display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--border, #dbe2f5); border-radius:12px; background: var(--panel-bg, #f7f9ff); }
.hints .hint .num { width: 28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border, #dbe2f5); border-radius:8px; font-weight:600; background:#fff; }
.hints .hint .hint-body { flex:1; }
.hints .hint .title { font-weight:700; }
.hints .hint .k { font-size:12px; opacity:.8; margin:2px 0 6px; }
.hints .hint .s { line-height:1.4; white-space:pre-wrap; }
.hints .hint .icon-btn.hint-edit { margin-left:auto; border:none; background:transparent; cursor:pointer; opacity:.6; }
.hints .hint .icon-btn.hint-edit:hover { opacity:1; }

.hints .hint.is-editing .hint-body { display:none; }
.hints .hint .hint-editor { flex:1; display:grid; gap:8px; }
.hints .hint .cm-lab { display:grid; gap:4px; font-size:12px; opacity:.85; }
.hints .hint .cm-inp, .hints .hint .cm-txa { width:100%; border:1px solid var(--border, #dbe2f5); border-radius:8px; padding:8px; background:var(--input-bg,#fff); font:inherit; }
.hints .hint .cm-txa { resize:vertical; min-height:72px; }
.hints .hint .cm-actions { display:flex; gap:8px; justify-content:flex-end; }



/* ===== Botão "Copiar p/ IA" ===== */
.ai-copy-btn { min-width: 44px; }


/* === Imagem do lançamento (upload + visualização) === */
.img-preview{
  display:block;
  max-width:100%;
  height:auto;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow: var(--shadow);
  background: #0000;
}
.img-uploader .uploader-row input[type="file"]{
  background: transparent;
  border: 0;
  padding: 0;
}
.img-view{ margin:10px 0 14px; }


/* Chip para rascunhos */
.chip.draft{
  background: #3a2e1f;
  border: 1px dashed var(--border);
  color: #ffd8a8;
}
html.theme-light .chip.draft{
  background: #fff4e6;
  color: #7a4a00;
  border-color: #f9d8a8;
}


/* === Responsivo (mobile) === */
@media (max-width: 680px) {
  /* Oculta colunas pesadas para caber as ações */
  thead th:nth-child(3), tbody td:nth-child(3) { display:none; } /* Pergunta */
  thead th:nth-child(5), tbody td:nth-child(5) { display:none; } /* Cartas */
  /* Larguras mais compactas */
  thead th:nth-child(2), tbody td:nth-child(2) { width:150px; }
  thead th:last-child, tbody td:last-child { width:auto; }
  /* Botões menores */
  .btn-secondary.small, .star-btn.small, .btn.small {
    padding:6px 8px;
    font-size:12px;
  }
  /* Ações em várias linhas */
  td.actions-cell { white-space:normal; }
  .actions-cell { display:flex; flex-wrap:wrap; gap:6px; }
}

/* Permite scroll horizontal caso ainda assim não caiba tudo */
.table-wrap table{ min-width: 700px; }
@media (max-width: 680px){
  .table-wrap table{ min-width: 520px; }
}


/* ===== Cores por categoria nas "pills" ===== */
.chip.cat{
  --cat: #64748b;
  background: color-mix(in oklab, var(--cat) 16%, transparent);
  border-color: color-mix(in oklab, var(--cat) 58%, var(--border));
  color: var(--text);
  position: relative;
  padding-left: 8px;
}
.chip.cat::before{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background: var(--cat);
  margin-right:6px;
  border:1px solid rgba(0,0,0,.2);
}

/* ===== Lista responsiva: 2 linhas por item no telemóvel ===== */
.row-mobile{ display:none; }

@media (max-width: 680px){
  .table-wrap table{ min-width: auto !important; }
  thead{ display:none; }
  tbody tr{ display:block; border-bottom:1px solid var(--border); padding:8px 6px; }
  tbody tr > td{ display:none; }
  /* Linha 1: Pergunta visível e com texto completo */
  tbody tr > td:nth-child(3){ display:block !important; }
  tbody tr > td:nth-child(3) .truncate{ white-space:normal; font-weight:600; }
  /* Linha 2: meta + ações dentro de .row-mobile */
  tbody tr > td:nth-child(3) .row-mobile{
    display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px;
  }
  .row-mobile .spacer{ flex:1 1 auto; }
  .row-mobile .actions-cell{ display:flex; gap:8px; flex-wrap:wrap; }
  /* Esconder as outras colunas originais */
  tbody tr > td:nth-child(1),
  tbody tr > td:nth-child(2),
  tbody tr > td:nth-child(4),
  tbody tr > td:nth-child(5),
  tbody tr > td:nth-child(6){ display:none !important; }
}

/* Anular regra antiga que escondia a Pergunta em ecrãs pequenos */
@media (max-width: 980px){
  thead th:nth-child(3), tbody td:nth-child(3){ display: table-cell; }
}


/* === Reduzir automaticamente a imagem no formulário para metade === */
#image_preview{
  max-width: 50% !important;
  height: auto !important;
}


/* === Miniatura da carta na secção "Explicação das cartas selecionadas" === */
.hints .hint .card-thumb{
  width:64px;
  height:64px;
  object-fit:contain;
  background: #fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px;
  box-shadow: var(--shadow);
}
html.theme-dark .hints .hint .card-thumb{ background:#0e1420; }
@media (max-width:680px){
  .hints .hint .card-thumb{ width:56px; height:56px; padding:5px; }
}


/* Layout do cabeçalho da dica com imagem + texto */
.hints .hint .title-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.hints .hint .title-wrap{display:flex; flex-direction:column}


/* ========== HINTS: imagem maior à esquerda + texto à direita ========== */
.hints .hint{align-items: flex-start;}
.hints .hint .num{margin-top: 8px;}

.hints .hint .card-thumb{
  width: 96px;
  height: 96px;
  border-radius: 12px;
  padding: 6px;
  object-fit: contain;
}
.hints .hint .txt-wrap{display:flex; flex-direction:column; gap:6px; min-width:0}
.hints .hint .title-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.hints .hint .title-line .title{font-weight:700}
.hints .hint .title-line .descr{opacity:.8; font-size:.95em}

.hints .hint .s{margin-top:4px}
@media (max-width:720px){
  
  .hints .hint .card-thumb{ width:84px; height:84px; }
}


/* ========== HINTS v4: imagem XL à esquerda, TODO texto à direita ========== */
.hints .hint{ align-items:flex-start; }
.hints .hint .hint-body{
  display:grid;
  grid-template-columns: 210px 1fr; /* espaço para a imagem maior */
  gap:18px;
  align-items:start;
}
.hints .hint .card-thumb{
  width:192px;
  height:192px;
  border-radius:14px;
  padding:8px;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
html.theme-dark .hints .hint .card-thumb{ background:#0e1420; }
.hints .hint .txt-wrap{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.hints .hint .title{ font-weight:800; font-size:1.05rem }
.hints .hint .descr{ opacity:.85 }

.hints .hint .s{ margin-top:2px }
@media (max-width: 780px){
  .hints .hint .hint-body{ grid-template-columns: 170px 1fr; gap:14px; }
  .hints .hint .card-thumb{ width:144px; height:144px; padding:6px; }
  .hints .hint .title{ font-size:1rem }
}


/* ========== HINTS v5: tipografia ========== */
.hints .hint .descr{ font-style: italic; opacity:.95 }
.hints .hint .k, .hints .hint .s{ font-style: normal; opacity: 1 }
.hints .hint .field-label{ font-weight:600; margin-right:6px; white-space:nowrap }


/* === HINTS v5.1: 'Palavras‑chave' igual a 'Significado' === */
.hints .hint .k,
.hints .hint .s{
  font-style: normal;
  opacity: 1;
  font-size: inherit;
  line-height: inherit;
}


/* === Cartas no modal "Ver lançamento" — imagens das cartas === */
.modal .cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  justify-items:center;
  gap:12px;
}
.modal .cards .card-view{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.modal .cards .card-view img{
  width:110px;
  height:auto;
  object-fit:contain;
}
.modal .cards .card-view .card-caption{
  font-size:13px;
  text-align:center;
  max-width:110px;
}