/* beta-notice — site-wide beta modal. Consumes cyber.css tokens (with fallbacks
   so pages that theme differently still render sanely). RTL-safe: logical
   properties only, symmetric layout. */
#beta-notice { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: center; justify-content: center; padding: 18px; }
#beta-notice .bn-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 12, .72); }
#beta-notice .bn-box {
  position: relative; width: min(430px, 100%);
  background: var(--cyber-card, #12121a);
  border: 1px solid var(--cyber-accent-line, rgba(0, 255, 136, .4));
  padding: 26px 24px 22px; text-align: center;
  font-family: var(--font-body, monospace); color: var(--cyber-fg, #e0e0e0);
  clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
  animation: bn-in .25s cubic-bezier(.4, 0, .2, 1);
}
#beta-notice .bn-close {
  position: absolute; top: 10px; inset-inline-end: 10px;
  width: 30px; height: 30px; cursor: pointer;
  background: transparent; border: 1px solid var(--cyber-border, #2a2a3a);
  color: var(--cyber-muted-fg, #6b7280); font-size: 13px; border-radius: 4px;
}
#beta-notice .bn-close:hover { color: var(--cyber-danger, #ff3366); border-color: var(--cyber-danger, #ff3366); }
#beta-notice .bn-emoji { font-size: 40px; line-height: 1; margin-bottom: 10px; }
#beta-notice .bn-title {
  font-family: var(--font-head, sans-serif); font-weight: 900; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--cyber-accent, #00ff88); margin-bottom: 10px;
}
#beta-notice .bn-body { font-size: .88rem; line-height: 1.6; color: var(--cyber-text-dim, #9aa0b8); margin-bottom: 12px; }
#beta-notice .bn-count {
  display: inline-block; font-size: .8rem; font-weight: 700;
  color: var(--cyber-warn, #febc2e); background: var(--cyber-warn-dim, rgba(254, 188, 46, .12));
  border: 1px solid var(--cyber-warn-line, rgba(254, 188, 46, .45));
  padding: 4px 12px; border-radius: 999px; margin-bottom: 16px;
}
#beta-notice .bn-ok {
  display: block; width: 100%; cursor: pointer;
  font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyber-accent, #00ff88); background: transparent;
  border: 2px solid var(--cyber-accent, #00ff88);
  padding: 11px 18px;
  clip-path: polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));
  transition: all .15s ease;
}
#beta-notice .bn-ok:hover { background: var(--cyber-accent, #00ff88); color: var(--cyber-bg, #0a0a0f); }
@keyframes bn-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #beta-notice .bn-box { animation: none; } }