/* Hounds — Base: estilos mínimos do esqueleto da página, variáveis dos temas escuro e claro, reset e grade do app */

:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: retractable left rail with a data-driven menu tree + full-height content pane; maps open in a full-screen explorer. Dark and light themes, matching the Mesa de Combate app. */
:root {
  color-scheme: dark;
  --ground: #0d0b09;
  --rail: #15110d;
  --surface: #1c1712;
  --surface-2: #241e18;
  --well: #14100c;
  --line: #2e261f;
  --line-2: #42382c;
  --text: #ecdcc9;
  --muted: #b5a28c;
  --faint: #7d6f5f;
  --accent: #d97706;
  --accent-ink: #14100c;
  --accent-soft: rgba(217, 119, 6, .14);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, .12);
  --danger-ink: #1a0808;
  --stage: #090706;
  --stage-grid: rgba(181, 162, 140, .06);
  --glass: rgba(21, 17, 13, .95);
  --overlay: rgba(13, 11, 9, .75);
  --shadow: rgba(0, 0, 0, .55);
  --tag-amber: #f59e0b;
  --tag-blue: #93c5fd;
  --tag-cyan: #38bdf8;
  --tag-violet: #c084fc;
  --tag-violet-strong: #a855f7;
  --tag-pink: #f472b6;
  --font-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --rail-open: 268px;
  --rail-closed: 64px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #f1f5f9;
  --rail: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --well: #f1f5f9;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --text: #0f172a;
  --muted: #475569;
  --faint: #64748b;
  --accent: #b45309;
  --accent-ink: #ffffff;
  --accent-soft: rgba(217, 119, 6, .12);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, .08);
  --danger-ink: #ffffff;
  --stage: #e2e8f0;
  --stage-grid: rgba(15, 23, 42, .06);
  --glass: rgba(255, 255, 255, .94);
  --overlay: rgba(15, 23, 42, .45);
  --shadow: rgba(15, 23, 42, .14);
  --tag-amber: #b45309;
  --tag-blue: #1d4ed8;
  --tag-cyan: #0e7490;
  --tag-violet: #6d28d9;
  --tag-violet-strong: #7c3aed;
  --tag-pink: #be185d;
}
/* Mais temas (botão Mais temas, js/menu.js): paletas por cima do claro ou do escuro (data-palette no
   <html>, com data-theme do modo). Trocam o fundo, as superfícies, as linhas, o texto e o destaque;
   o resto (perigo, etiquetas) é o do modo. */
:root[data-palette="pergaminho"] {
  --ground: #efe6d2; --rail: #f6efe0; --surface: #fbf7ee; --surface-2: #f1e8d6; --well: #efe5d1;
  --line: #e0d3b8; --line-2: #cdbb98; --text: #2b1d10; --muted: #5e4a33; --faint: #846d52;
  --accent: #8b2e1c; --accent-ink: #ffffff; --accent-soft: rgba(139, 46, 28, .12);
  --stage: #e6dbc3; --stage-grid: rgba(43, 29, 16, .07); --glass: rgba(251, 247, 238, .94); --overlay: rgba(43, 29, 16, .45); --shadow: rgba(60, 40, 20, .16);
}
:root[data-palette="neve"] {
  --ground: #eef3f8; --rail: #f7fafd; --surface: #ffffff; --surface-2: #edf2f8; --well: #eef3f8;
  --line: #dbe4ee; --line-2: #c2cfdd; --text: #0b1b2e; --muted: #3d536b; --faint: #5f748b;
  --accent: #1d5fb8; --accent-ink: #ffffff; --accent-soft: rgba(29, 95, 184, .12);
  --stage: #dde6f0; --stage-grid: rgba(11, 27, 46, .06); --glass: rgba(255, 255, 255, .94); --overlay: rgba(11, 27, 46, .45); --shadow: rgba(11, 27, 46, .14);
}
:root[data-palette="floresta"] {
  --ground: #0a0f0c; --rail: #0f1612; --surface: #141d18; --surface-2: #1b2620; --well: #0d1410;
  --line: #223029; --line-2: #33463b; --text: #dcebd9; --muted: #9db59f; --faint: #6c8270;
  --accent: #c9a227; --accent-ink: #0d1410; --accent-soft: rgba(201, 162, 39, .14);
  --stage: #070b09; --stage-grid: rgba(157, 181, 159, .06); --glass: rgba(15, 22, 18, .95); --overlay: rgba(10, 15, 12, .75); --shadow: rgba(0, 0, 0, .55);
}
:root[data-palette="meia-noite"] {
  --ground: #0a0c16; --rail: #0f1220; --surface: #151929; --surface-2: #1c2135; --well: #0d1020;
  --line: #252b42; --line-2: #363e5c; --text: #dfe3f5; --muted: #a3aacb; --faint: #6f7697;
  --accent: #8b7cf6; --accent-ink: #0d1020; --accent-soft: rgba(139, 124, 246, .16);
  --stage: #070912; --stage-grid: rgba(163, 170, 203, .06); --glass: rgba(15, 18, 32, .95); --overlay: rgba(10, 12, 22, .75); --shadow: rgba(0, 0, 0, .55);
}
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--font-ui); font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }
.app { display: grid; grid-template-columns: var(--rail-open) 1fr; height: 100%; transition: grid-template-columns .2s ease; }
.app.collapsed { grid-template-columns: var(--rail-closed) 1fr; }