/* Base critical styles — extracted from index.html for strict CSP (no unsafe-inline in style-src) */
:root {
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
  --sar: env(safe-area-inset-right);
  --sal: env(safe-area-inset-left);
}
body {
  font-family: 'Heebo', sans-serif;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
  padding-right: var(--sar);
  overscroll-behavior-y: contain;
  min-height: 100vh;
}
#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
@media (max-width: 768px) {
  button, select, input { min-height: 44px; }
  * { font-size: max(9px, revert); }
  button, a, [role="button"], [onclick] { min-width: 36px; min-height: 36px; }
}
.bell-urgent { animation: wobble 1s ease-in-out 3; }
.no-select { user-select: none; }
@media (max-width: 768px) {
  .scroll-fade-x { position: relative; }
  .scroll-fade-x::before, .scroll-fade-x::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 24px; z-index: 10; pointer-events: none;
  }
  .scroll-fade-x::before { left: 0; background: linear-gradient(to right, var(--scroll-fade-bg, #f3f4f6), transparent); }
  .scroll-fade-x::after { right: 0; background: linear-gradient(to left, var(--scroll-fade-bg, #f3f4f6), transparent); }
  .dark .scroll-fade-x::before { background: linear-gradient(to right, var(--scroll-fade-bg-dark, #030712), transparent); }
  .dark .scroll-fade-x::after { background: linear-gradient(to left, var(--scroll-fade-bg-dark, #030712), transparent); }
}