/* legacy layer: always loses to the unlayered theme in css/cyber.css, whatever the stylesheet load order */
@layer base{
/* Top navigation bar, pills and the floating Info / Idea buttons */
.dn{position:fixed;top:10px;right:14px;z-index:30;width:64px;height:30px;border-radius:999px;padding:0;display:flex;align-items:center;justify-content:space-between;font-size:15px;line-height:1;backdrop-filter:blur(10px);cursor:pointer;transform:none!important;text-transform:none}
.dn span{width:30px;text-align:center;position:relative;z-index:1}
.kn{position:absolute;top:2px;left:2px;width:28px;height:24px;border-radius:999px;background:rgba(255,255,255,.9);transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
body.day .kn{transform:translateX(32px)}
.mo{right:88px;width:30px;justify-content:center;font-size:14px}
.topnav{position:fixed;top:0;left:0;right:0;height:56px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 clamp(12px,3vw,28px);background:rgba(8,12,34,.45);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.18);color:#fff;transition:background .3s}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:.02em;color:inherit;text-decoration:none}
.logo{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#7c3aed,#22d3ee);color:#fff;font-size:16px;box-shadow:0 4px 14px rgba(124,58,237,.45)}
.navr{display:flex;align-items:center;gap:10px}
.pill{height:36px;border-radius:999px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer;text-transform:none}
.pill.sw{position:relative;width:64px;padding:0;justify-content:space-between}
.pill.sw span{width:30px;text-align:center;position:relative;z-index:1}
.pill.sw .kn{top:3px;height:28px;width:28px}
.fab{position:fixed;right:14px;bottom:14px;z-index:25;display:flex;gap:8px}
.fab button{height:42px;border-radius:999px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;background:rgba(8,12,34,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-weight:600;text-transform:none}
@media(max-width:640px){
  .pill .lb{display:none}
  .pill{padding:0 11px}
  .pill.sw{padding:0}
  .fab .lb{display:none}
  .fab button{width:44px;padding:0;justify-content:center}
}
.fab{right:auto;left:14px}
@media(max-width:640px){
  .pill.sw{flex:none}
  .navr{gap:6px}
}
@media(max-width:640px){
  .navr{gap:4px}
  .pill{padding:0 9px}
}
}
/* small screens: keep the top bar on one line */
.brand{white-space:nowrap}
@media(max-width:480px){body.inapp .brand{font-size:0;gap:0}body.inapp .brand .logo{font-size:15px}.pill{padding:0 9px}}
body.inapp{font-size:16px}