/* Kept separate from the legacy bundle: desktop stays untouched. */
@media (max-width: 767px) {
  body { background-attachment: fixed; }
  .p-8 { padding: 1.25rem; }
  .p-6 { padding: 1rem; }
  .p-5 { padding: 0.9rem; }
  .gap-6 { gap: 1rem; }
  .rounded-\[32px\] { border-radius: 1.25rem; }
  .rounded-\[28px\] { border-radius: 1rem; }
  .text-3xl { font-size: 1.55rem; line-height: 2rem; }
  .tracking-\[0\.32em\], .tracking-\[0\.28em\] { letter-spacing: 0.18em; }
  .min-w-\[900px\] { min-width: 640px; }
  input, button, select { min-height: 44px; }
  .overflow-x-auto { margin-inline: -0.25rem; padding-inline: 0.25rem; }
  /* The legacy desktop sidebar becomes a compact, touch-friendly tab strip. */
  aside.rounded-\[32px\] { display: none; }
  #om-shell { display: flex; }
}
@media (max-width: 390px) {
  .p-8 { padding: 1rem; }
  .text-2xl { font-size: 1.25rem; }
  .min-w-\[900px\] { min-width: 580px; }
}

/* Controls and navigation drawer added by openmax-ui.js. */
.om-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .5rem; }
.om-control { min-width: 42px; min-height: 42px; border: 1px solid rgba(148,163,184,.35); border-radius: 14px; background: rgba(8,17,31,.7); color: #e2e8f0; font: 700 15px/1 system-ui; box-shadow: 0 10px 28px rgba(2,6,23,.2); backdrop-filter: blur(12px); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.om-control:hover { transform: translateY(-2px); background: rgba(94,234,212,.16); box-shadow: 0 14px 28px rgba(14,165,233,.18); }
#om-menu-button { display: none; font-size: 21px; }
.om-search-box { position: relative; transition: flex-basis .24s ease, width .24s ease; }
.om-search-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(148,163,184,.35); border-radius: 14px; color: #cbd5e1; background: rgba(8,17,31,.7); }
.om-search-toggle svg { width: 19px; height: 19px; }
.om-search-collapsed { flex: 0 0 42px !important; width: 42px; }
.om-search-collapsed input, .om-search-collapsed > svg { display: none; }
.om-search-collapsed .om-search-toggle { display: inline-flex; }
html.om-light .om-search-toggle { color: #334155; border-color: rgba(15,23,42,.14); background: rgba(255,255,255,.92); }
#om-drawer, #om-scrim { display: none; }
.om-rtl { text-align: right; }
.om-rtl input, .om-rtl textarea { text-align: right; }
/* Keep the compact action row against the header edge instead of floating in
   the middle when the search field is collapsed. */
@media (min-width: 768px) {
  main > div.sticky .flex.flex-1.items-center, main div.sticky .flex.flex-1.items-center { justify-content: flex-end; }
}
/* The legacy navigation uses SVG currentColor icons. Make them explicit in
   RTL too, because the original utility classes are not reliable after clone. */
.om-rtl aside nav a svg, .om-rtl #om-drawer nav a svg { display: block !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 20px; width: 20px !important; height: 20px !important; color: currentColor !important; stroke: currentColor !important; }
html.om-light body { background: linear-gradient(180deg,#f7fbff,#e9f1fa); color: #142033; }
html.om-light .bg-slate-950\/70, html.om-light .bg-slate-950\/50 { background-color: rgba(255,255,255,.85); }
html.om-light .bg-white\/5, html.om-light .bg-white\/10, html.om-light .bg-white\/\[0\.04\] { background-color: rgba(15,23,42,.05); }
html.om-light .border-white\/10, html.om-light .border-white\/15, html.om-light .border-white\/5 { border-color: rgba(15,23,42,.13); }
html.om-light .text-white, html.om-light .text-slate-100 { color: #142033; }
html.om-light .text-slate-200, html.om-light .text-slate-300 { color: #334155; }
html.om-light .text-slate-400, html.om-light .text-slate-500 { color: #64748b; }
html.om-light .om-control { color: #142033; background: rgba(255,255,255,.92); border-color: rgba(15,23,42,.14); }
.om-profile-trigger { position: relative; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.om-profile-trigger:hover { transform: translateY(-2px); background: rgba(94,234,212,.11); }
.om-profile-menu { position: fixed; z-index: 2147483005; display: none; min-width: 170px; overflow: hidden; border: 1px solid rgba(148,163,184,.25); border-radius: 14px; background: rgba(8,17,31,.97); box-shadow: 0 18px 45px rgba(2,6,23,.35); }
.om-profile-menu.om-profile-menu-open { display: grid; }
.om-profile-menu a, .om-profile-menu button { padding: .8rem 1rem; border: 0; color: #e2e8f0; background: transparent; font: 600 .85rem/1.2 system-ui; text-align: left; text-decoration: none; }
.om-profile-menu a:hover, .om-profile-menu button:hover { background: rgba(94,234,212,.14); }
html.om-light .om-profile-menu { background: rgba(255,255,255,.98); border-color: rgba(15,23,42,.12); }
html.om-light .om-profile-menu a, html.om-light .om-profile-menu button { color: #142033; }
/* Light mode uses accessible, saturated ink instead of the dark-mode pastels. */
html.om-light .text-emerald-100, html.om-light .text-emerald-300 { color: #047857; }
html.om-light .text-sky-200, html.om-light .text-sky-300 { color: #0369a1; }
html.om-light .text-amber-300 { color: #a16207; }
html.om-light .text-accent { color: #0f766e; }
html.om-light .bg-emerald-400\/10 { background-color: rgba(5,150,105,.12); }
html.om-light .bg-amber-400\/10 { background-color: rgba(217,119,6,.12); }
html.om-light .border-emerald-400\/30 { border-color: rgba(5,150,105,.32); }
html.om-light .border-amber-400\/30 { border-color: rgba(217,119,6,.32); }
html.om-light .bg-gradient-to-br { background-image: linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,246,255,.78)); }
html.om-light .shadow-glow { box-shadow: 0 20px 60px rgba(14,116,144,.16); }
body { transition: color .35s ease, background .45s ease; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(circle at 18% 20%, rgba(56,189,248,.22), transparent 28%), radial-gradient(circle at 78% 18%, rgba(94,234,212,.16), transparent 26%), radial-gradient(circle at 68% 82%, rgba(251,146,60,.14), transparent 28%); animation: om-aurora 16s ease-in-out infinite alternate; }
html.om-light body { background: linear-gradient(145deg,#f8fcff 0%,#edf5ff 43%,#f9f7ff 100%); }
html.om-light body::before { background: radial-gradient(circle at 16% 18%, rgba(56,189,248,.20), transparent 29%), radial-gradient(circle at 80% 16%, rgba(167,139,250,.17), transparent 25%), radial-gradient(circle at 64% 78%, rgba(45,212,191,.16), transparent 27%); }
@keyframes om-aurora { from { transform: translate3d(-1.5%,-1%,0) scale(1); } to { transform: translate3d(2%,1.5%,0) scale(1.045); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 767px) {
  #om-menu-button { display: inline-flex; align-items: center; justify-content: center; }
  .om-header-actions { width: 100%; overflow-x: auto; padding-bottom: .15rem; }
  .om-header-actions .om-profile-trigger { padding: .5rem .65rem; }
  .om-header-actions .om-profile-trigger > div:not(.om-profile-menu) { display: none; }
  #om-scrim { position: fixed; inset: 0; z-index: 69; border: 0; background: rgba(2,6,23,.56); }
  #om-drawer { position: fixed; z-index: 70; top: 0; bottom: 0; left: 0; width: min(82vw,320px); padding: 5rem 1rem 1rem; overflow-y: auto; background: #08111f; box-shadow: 20px 0 50px rgba(2,6,23,.36); transform: translateX(-105%); transition: transform .2s ease; }
  .om-rtl #om-drawer { left: auto; right: 0; transform: translateX(105%); }
  .om-menu-open #om-drawer, .om-menu-open #om-scrim { display: block; }
  .om-menu-open #om-drawer { transform: translateX(0); }
  .om-drawer-brand { margin: 0 0 1.25rem; color: #5eead4; font: 800 1.05rem/1 system-ui; letter-spacing: .16em; }
  #om-drawer nav { display: grid; gap: .45rem; }
  #om-drawer nav a { display: flex; align-items: center; gap: .75rem; min-height: 46px; padding: .75rem .85rem; border-radius: .8rem; color: #cbd5e1; text-decoration: none; transition: background .18s ease, color .18s ease, transform .18s ease; }
  #om-drawer nav a:hover, #om-drawer nav a[aria-current='page'] { color: #f8fafc; background: rgba(94,234,212,.14); transform: translateX(2px); }
  #om-drawer nav a svg { display: block !important; flex: 0 0 20px; width: 20px !important; height: 20px !important; color: inherit !important; stroke: currentColor !important; }
  .om-rtl #om-drawer nav a { flex-direction: row; }
  #om-drawer .om-drawer-close { position: absolute; top: .85rem; right: .85rem; width: 42px; height: 42px; border: 0; border-radius: 12px; color: #e2e8f0; background: rgba(255,255,255,.08); font-size: 28px; }
  .om-rtl #om-drawer .om-drawer-close { right: auto; left: .85rem; }
  html.om-light #om-drawer { background: #f8fbff; }
  html.om-light #om-drawer nav a, html.om-light #om-drawer .om-drawer-close { color: #142033; }
}