:root { 
  --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1440px; 
  --bg: #0E0E0F; --bg2: #141415; --bg3: #1A1A1B; --bg4: rgba(255,255,255,0.06);
  --text: #EBEBEB; --text2: #A1A1A1; --text3: #5C5852;
  --gold: #C9A84C; --gold2: #B8923D;
  --red: #FF4D4D; --green: #4DFF4D; --blue: #4D94FF;
  --radius: 16px; --radius-sm: 10px;
  --border: 1px solid rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.06);
  --sidebar-w: 240px; --sidebar-collapsed-w: 80px;
}

[data-theme="light"] {
  --bg: #FAFAF7; --bg2: #FFFFFF; --bg3: #F2EFE8; --bg4: rgba(0,0,0,0.04);
  --text: #1A1A1A; --text2: #555555; --text3: #888888;
  --border2: rgba(0,0,0,0.08);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }

/* Layout — controle por classe `.is-narrow` aplicada via JS conforme largura do .layout */
.layout { display: flex; flex-direction: row; height: 100%; width: 100%; }
.sidebar { display: flex; width: var(--sidebar-w); flex-direction: column; border-right: 1px solid var(--border2); background: var(--bg2); transition: width 0.2s ease; flex-shrink: 0; }
.sidebar.collapsed { width: var(--sidebar-collapsed-w); }
.sidebar.collapsed .label { display: none; }
.bottomnav { display: none; }
main { flex: 1; overflow-y: auto; min-width: 0; position: relative; height: 100%; }
main > * { min-height: 100%; }

.layout.is-narrow { flex-direction: column; }
.layout.is-narrow .sidebar { display: none; }
.layout.is-narrow .bottomnav { display: flex; }

.hide-mobile, .show-desktop { display: none; }
@media (min-width: 1024px) {
  .hide-mobile { display: revert; }
  .show-mobile { display: none; }
}
.container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.print-only { display: none; }
@media print { .no-print { display: none !important; } .print-only { display: block; } }

/* Fix Headers Desktop */
.page-header { padding: 52px 24px 20px; }
@media (min-width: 768px) {
  .page-header { padding: 20px 24px; }
}

/* Fluid Grids */
.fluid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}