.app-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--glass-border); position: sticky; top: 0; background: rgba(13,16,26,.55); backdrop-filter: blur(14px) saturate(120%); box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 50; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand .logo { font-weight: 700; letter-spacing: .3px; }
.menu-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; cursor: pointer; }
.menu-toggle .bar { display: block; width: 18px; height: 2px; background: var(--fg); margin: 2px 0; border-radius: 2px; }
.menu-toggle i { color: var(--fg); font-size: 20px; line-height: 1; }
.header-right { width: 40px; height: 40px; }

.app-nav { display: flex; gap: .75rem; flex-wrap: wrap; justify-self: center; }
.app-nav a { padding: .45rem .7rem; border-radius: 10px; border: 1px solid transparent; }
.app-nav a:focus, .app-nav a:hover { background: rgba(255,255,255,.06); border-color: var(--glass-border); }
.app-nav a[aria-current="page"], .app-nav a.is-active { background: rgba(255,255,255,.12); border-color: var(--glass-border); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.app-meta { font-size: .85rem; color: var(--muted); }

main#app { display: block; padding: 1.25rem; max-width: 1100px; margin: 0 auto; }
.controls { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.panels { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.rules-bar { min-height: 40px; }
/* Cog is inline with the Settings label (no absolute positioning) */
.rules-bar .rules-group { flex: 1 1 auto; }
.rules-bar .btn-icon { flex: 0 0 auto; }

.app-footer { position: fixed; left: 0; right: 0; bottom: 0; padding: .5rem 1rem; border-top: 1px solid var(--glass-border); background: rgba(13,16,26,.6); backdrop-filter: blur(10px) saturate(120%); z-index: 45; display: flex; flex-direction: column; gap: .35rem; align-items: center; padding-bottom: max(.5rem, env(safe-area-inset-bottom, 0px)); }
.ad-sticky { position: relative; min-height: var(--ad-sticky-h); border-radius: var(--radius); width: min(100%, 980px); }
.ad-sticky.is-collapsed { min-height: 28px; }
.footer-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; max-width: 1100px; gap: .5rem; }
.footer-left { justify-self: start; font-size: .85rem; color: var(--muted); }
.footer-center { justify-self: center; display: inline-flex; gap: .5rem; align-items: center; font-size: .9rem; }
.footer-center .footer-link { color: var(--fg); opacity: .9; }
.footer-center .footer-link:hover { text-decoration: underline; }
.footer-center .dot { opacity: .6; }
.footer-right { justify-self: end; text-align: right; font-size: .8rem; color: var(--muted); line-height: 1.2; }

@media (max-width: 1024px) {
  /* Reserve space for sticky ad on mobile/tablet so content isn't covered */
  main#app { padding-bottom: calc(var(--ad-sticky-h) + var(--footer-extra) + env(safe-area-inset-bottom, 0px)); }
  .menu-toggle { display: inline-flex; }
  .app-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: center; gap: .5rem; padding: .75rem 1rem; background: rgba(13,16,26,.85); border-bottom: 1px solid var(--glass-border); backdrop-filter: blur(14px) saturate(120%); }
  .app-nav.is-open { display: flex; }
  .header-right { justify-self: end; }
}

@media (min-width: 1025px) {
  .ad-sticky { min-height: var(--ad-sticky-h-lg); }
  main#app { padding-bottom: calc(var(--ad-sticky-h-lg) + var(--footer-extra) + env(safe-area-inset-bottom, 0px)); }
}

/* Right rail temporarily disabled to keep layout centered */

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}