/* ----------------------------------------------------------
   0. TYPOGRAPHY — San Francisco (SF Pro) system font
      On Apple devices: uses native SF Pro Display/Text
      On other devices: Inter (visually near-identical)
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

body, button, input, select, textarea, .btn, .bni-lbl, .tb h1, .card, .inp {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Inter, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1 !important;
}

/* SF Pro tracking — tighter at large sizes, normal at small */
.tb h1, h1, h2 { letter-spacing: -.028em !important; }
h3, .sv        { letter-spacing: -.022em !important; }
h4, .ctitle    { letter-spacing: -.018em !important; }
p, .bni-lbl, .li-t, .ki-addr { letter-spacing: -.010em !important; }
.badge, .chip, .sl, .lbl      { letter-spacing: .005em !important; }

/* ============================================================
   LIQUID GLASS — iOS 26 design language
   Loaded after app.css — overrides colors/backgrounds only.
   Preserves all layout rules.
   ============================================================ */

/* ----------------------------------------------------------
   1. BODY — soft gradient mesh background
   ---------------------------------------------------------- */
body {
  background:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(99,102,241,.10) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 110%,  rgba(59,130,246,.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 50%,   rgba(236,252,255,.60) 0%, transparent 70%),
    linear-gradient(160deg, #eef6ff 0%, #f5f8fa 40%, #f0f4ff 70%, #faf5ff 100%) !important;
  background-attachment: fixed !important;
}

/* ----------------------------------------------------------
   2. SHELL — glass container, rounded on desktop
   ---------------------------------------------------------- */
.shell {
  background: rgba(255,255,255,.52) !important;
  backdrop-filter: blur(40px) saturate(1.9) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.9) brightness(1.04) !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  box-shadow:
    0 8px 60px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

@media (min-width:500px) and (max-width:767px) {
  .shell {
    border-radius: 32px !important;
    overflow: hidden !important;
  }
}

/* ----------------------------------------------------------
   3. TOOLBAR — frosted glass strip
   ---------------------------------------------------------- */
.tb {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(255,255,255,.65) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* ----------------------------------------------------------
   4. CARDS — all card variants
   ---------------------------------------------------------- */
.card,
.sc,
.pcard-item,
.icard,
.cccard,
.ucard,
.acard,
.prop-card,
.rcpt,
.pdt,
.qr-label-position-panel {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 24px !important;
  box-shadow:
    0 2px 20px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  transition: box-shadow .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}
.card:hover,
.sc:hover,
.acard:hover {
  box-shadow:
    0 6px 28px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
  transform: translateY(-1px) !important;
}

/* ----------------------------------------------------------
   5. INPUTS — glass fields
   ---------------------------------------------------------- */
.inp,
input.inp,
textarea.inp,
select.inp,
input[type="search"],
input[type="date"] {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255,255,255,.80) !important;
  border-radius: 18px !important;
  color: var(--tx) !important;
  caret-color: var(--gold) !important;
  box-shadow:
    inset 0 1.5px 3px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.90),
    0 1px 4px rgba(0,0,0,.04) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.inp:focus,
input.inp:focus,
textarea.inp:focus,
select.inp:focus {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(37,99,235,.45) !important;
  box-shadow:
    0 0 0 4px rgba(37,99,235,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.inp::placeholder,
textarea.inp::placeholder,
input[type="search"]::placeholder {
  color: var(--mt) !important;
}

/* Spec overrides for login/reg screens — keep same glass style */
#S-forgot .inp,
#S-login .inp,
#S-reg .inp,
#S-register .inp,
#S-reset .inp {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(255,255,255,.80) !important;
  color: var(--tx) !important;
}
#S-forgot .inp:focus,
#S-login .inp:focus,
#S-reg .inp:focus,
#S-register .inp:focus,
#S-reset .inp:focus {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(37,99,235,.50) !important;
}
#S-forgot .inp::placeholder,
#S-login .inp::placeholder,
#S-reg .inp::placeholder,
#S-register .inp::placeholder {
  color: var(--mt) !important;
}

/* ----------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------- */

/* Ghost / secondary */
.btn-ghost,
.btn-sf {
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255,255,255,.72) !important;
  color: var(--tx) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9) !important;
  border-radius: 18px !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease !important;
}
.btn-ghost:hover,
.btn-sf:hover {
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,1) !important;
  transform: scale(1.02) !important;
}
.btn-ghost:active,
.btn-sf:active { transform: scale(.97) !important; }

/* Primary — keep electric blue, just round more */
.btn-gold,
.btn-g {
  border-radius: 18px !important;
  box-shadow: 0 8px 28px -6px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease !important;
}
.btn-gold:hover { transform: scale(1.02) !important; }
.btn-gold:active { transform: scale(.97) !important; }

/* Red / green tinted glass */
.btn-red {
  background: rgba(196,26,26,.10) !important;
  border: 1.5px solid rgba(196,26,26,.30) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: var(--rd) !important;
}
.btn-green {
  background: rgba(10,122,82,.12) !important;
  border: 1.5px solid rgba(10,122,82,.30) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: var(--gn) !important;
}

/* All buttons — unified radius + bounce */
.btn {
  border-radius: 18px !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), opacity .15s ease !important;
}
.btn:active { transform: scale(.96) !important; }

/* ----------------------------------------------------------
   7. BOTTOM NAV (mobile) — thick frosted glass pill bar
   ---------------------------------------------------------- */
.bnav {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(32px) saturate(2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2) !important;
  border-top: 1px solid rgba(255,255,255,.75) !important;
  box-shadow: 0 -4px 28px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Nav items — mobile */
.bni {
  border-radius: 16px !important;
  transition:
    background .15s ease,
    transform  .2s  cubic-bezier(.34,1.56,.64,1),
    box-shadow .15s ease !important;
}
.bni:active { transform: scale(.88) !important; }
.bni.on { background: rgba(37,99,235,.10) !important; }
.bni-icon {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), filter .15s ease !important;
}
.bni.on .bni-icon {
  color: var(--gold) !important;
  filter: drop-shadow(0 0 5px rgba(37,99,235,.35)) !important;
  transform: scale(1.12) !important;
}
.bni.on .bni-lbl {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

/* ----------------------------------------------------------
   8. SIDEBAR (desktop >= 768px) — iOS compact glass sidebar
   ---------------------------------------------------------- */
@media (min-width:768px) {
  .bnav {
    width: 200px !important;
    min-width: 200px !important;
    background: rgba(248,250,255,.82) !important;
    backdrop-filter: blur(36px) saturate(2) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(36px) saturate(2) brightness(1.04) !important;
    border-right: 1px solid rgba(255,255,255,.68) !important;
    border-top: none !important;
    box-shadow: 2px 0 20px rgba(0,0,0,.05), inset -1px 0 0 rgba(255,255,255,.90) !important;
    padding: 12px 8px 20px !important;
    gap: 2px !important;
  }

  /* Sidebar header */
  .bnav::before {
    content: 'ArkkeyFlow' !important;
    height: 48px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    color: var(--gold) !important;
    border-bottom: 1px solid rgba(37,99,235,.10) !important;
    margin-bottom: 8px !important;
    filter: none !important;
    background: none !important;
  }

  /* Nav item — compact iOS pill */
  .bni {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 7px 10px !important;
    gap: 10px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: left !important;
    transition:
      background  .14s ease,
      box-shadow  .14s ease,
      transform   .18s cubic-bezier(.34,1.56,.64,1) !important;
  }

  .bni:hover {
    background: rgba(13,16,28,.05) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Icon bubble — SF Symbol style rounded rect */
  .bni-icon {
    font-size: 16px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    background: rgba(13,16,28,.07) !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    color: var(--dim) !important;
    transition:
      transform   .18s cubic-bezier(.34,1.56,.64,1),
      background  .14s ease,
      color       .14s ease,
      box-shadow  .14s ease !important;
  }

  /* SVG inside icon bubble */
  .bni-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .bni:hover .bni-icon {
    background: rgba(13,16,28,.10) !important;
    transform: scale(1.08) !important;
    color: var(--tx) !important;
  }

  /* Label */
  .bni-lbl {
    font-size: 13px !important;
    font-weight: 590 !important;
    color: var(--dim) !important;
    letter-spacing: -.01em !important;
    line-height: 1 !important;
    transition: color .14s ease !important;
    display: block !important;
    white-space: nowrap !important;
  }

  /* ACTIVE pill */
  .bni.on {
    background: rgba(37,99,235,.09) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !important;
    transform: none !important;
  }

  .bni.on .bni-icon {
    background: var(--gold) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(37,99,235,.30) !important;
    transform: none !important;
  }

  .bni.on .bni-lbl {
    color: var(--gold) !important;
    font-weight: 700 !important;
  }

  .bni:active { transform: scale(.96) !important; }

  /* Logout / danger item */
  .bni[onclick*="Logout"] .bni-icon,
  .bni[onclick*="logout"] .bni-icon {
    background: rgba(196,26,26,.08) !important;
    color: var(--rd) !important;
  }
  .bni[onclick*="Logout"]:hover .bni-icon,
  .bni[onclick*="logout"]:hover .bni-icon {
    background: rgba(196,26,26,.15) !important;
  }
}

/* Compact icon-only sidebar (768-1023px) */
@media (min-width:768px) and (max-width:1023px) {
  .bnav {
    width: 64px !important;
    min-width: 64px !important;
    padding: 12px 6px 20px !important;
    align-items: center !important;
  }
  .bnav::before {
    content: 'AKF' !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    padding: 0 !important;
    justify-content: center !important;
    letter-spacing: .02em !important;
    height: 44px !important;
  }
  .bni {
    flex-direction: column !important;
    justify-content: center !important;
    padding: 7px 4px !important;
    gap: 4px !important;
    min-height: auto !important;
    border-radius: 14px !important;
    width: 48px !important;
  }
  .bni-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
  }
  .bni-icon svg {
    width: 19px !important;
    height: 19px !important;
  }
  .bni-lbl {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    max-width: 56px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    color: var(--dim) !important;
  }
  .bni:hover { transform: scale(1.05) !important; }
  .bni.on .bni-icon {
    box-shadow: 0 4px 14px rgba(37,99,235,.28) !important;
  }
}
/* ----------------------------------------------------------
   9. TAB BARS (.ctabs, .ctab)
   ---------------------------------------------------------- */
.ctabs {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(255,255,255,.65) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
}
.ctab {
  border-radius: 10px !important;
  transition: background .15s ease, color .15s ease !important;
}
.ctab.on {
  background: rgba(37,99,235,.10) !important;
  color: var(--gold) !important;
}

/* ----------------------------------------------------------
   10. BADGES & CHIPS — glass pills
   ---------------------------------------------------------- */
.badge,
.nfc-chip,
.chip {
  border-radius: 999px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.bok,  .nfc-chip.ok  { background: rgba(10,122,82,.12) !important; color: var(--gn) !important; border-color: rgba(10,122,82,.30) !important; }
.bout, .nfc-chip.sim { background: rgba(37,99,235,.10) !important; color: var(--gold) !important; border-color: rgba(37,99,235,.25) !important; }
.berr, .nfc-chip.off { background: rgba(196,26,26,.10) !important; color: var(--rd) !important;   border-color: rgba(196,26,26,.28) !important; }

/* ----------------------------------------------------------
   11. OVERLAYS / MODALS (.ov)
   ---------------------------------------------------------- */
.ov {
  background: rgba(245,248,250,.65) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
}
.ov > div:not(.card):not(.sc) {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 50px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* ----------------------------------------------------------
   12. ALERTS (.al-*)
   ---------------------------------------------------------- */
.al {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 18px !important;
}
.al-info { background: rgba(37,99,235,.08)  !important; border-color: rgba(37,99,235,.20) !important; }
.al-warn { background: rgba(160,92,0,.08)   !important; border-color: rgba(160,92,0,.20)  !important; }
.al-ok   { background: rgba(10,122,82,.08)  !important; border-color: rgba(10,122,82,.20) !important; }
.al-err  { background: rgba(196,26,26,.08)  !important; border-color: rgba(196,26,26,.20) !important; }

/* ----------------------------------------------------------
   13. IB (icon buttons) — glass bubbles
   ---------------------------------------------------------- */
.ib {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.95) !important;
  border-radius: 14px !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease !important;
}
.ib:hover {
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,1) !important;
  transform: scale(1.06) !important;
}
.ib:active { transform: scale(.93) !important; }

/* ----------------------------------------------------------
   14. SEGMENT / SELECTOR BAR (.segi, .seg, .tog)
   ---------------------------------------------------------- */
.segi,
.seg {
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 14px !important;
}
.segi.on {
  background: rgba(37,99,235,.12) !important;
  color: var(--gold) !important;
}
.tog {
  background: rgba(255,255,255,.50) !important;
  border: 1.5px solid rgba(255,255,255,.70) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.tog.on {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 3px 12px rgba(37,99,235,.35) !important;
}

/* ----------------------------------------------------------
   15. NFC ZONE — glass ring
   ---------------------------------------------------------- */
.nfc-zone {
  background: rgba(37,99,235,.04) !important;
  border: 2px solid rgba(37,99,235,.15) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.nfc-zone.scanning {
  border-color: rgba(37,99,235,.60) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.08), 0 0 40px rgba(37,99,235,.08) !important;
  animation: glassNfcPulse 1.4s ease-in-out infinite !important;
}
@keyframes glassNfcPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(37,99,235,.08), 0 0 40px rgba(37,99,235,.08); }
  50%      { box-shadow: 0 0 0 8px rgba(37,99,235,.04), 0 0 60px rgba(37,99,235,.14); }
}

/* ----------------------------------------------------------
   16. AGENT CARDS & GRID
   ---------------------------------------------------------- */
#S-agt .card,
body.ak-agent-mode .card {
  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
}
#S-agt .btn-ghost,
#S-agt .btn-sf {
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(255,255,255,.72) !important;
}
#S-cfg .card {
  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
}
body.ak-agent-mode #S-agt .agrid {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border-top: 1px solid rgba(255,255,255,.70) !important;
}

/* ----------------------------------------------------------
   17. LOGIN / REGISTER SCREEN overlay — glass card
   ---------------------------------------------------------- */
#S-login > div,
#S-trial > div,
#S-forgot > div,
#S-reset > div,
#S-register > div {
  background: rgba(255,255,255,.68) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 50px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.95) !important;
  padding: 32px !important;
}

/* ----------------------------------------------------------
   18. CABINET SLOTS (.csl)
   ---------------------------------------------------------- */
.csl {
  background: rgba(255,255,255,.60) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.95) !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease !important;
}
.csl:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,1) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* ----------------------------------------------------------
   19. MORE MENU popup
   ---------------------------------------------------------- */
.more-menu-pop {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(28px) saturate(1.9) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.9) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* ----------------------------------------------------------
   20. TOAST NOTIFICATIONS
   ---------------------------------------------------------- */
.toast,
[class*="toast"] {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,.80) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 32px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* ----------------------------------------------------------
   21. GLOBAL rounded corners
   ---------------------------------------------------------- */
:root {
  --r:  18px !important;
  --rl: 24px !important;
  --rll: 32px !important;
}

/* ----------------------------------------------------------
   22. REDUCED MOTION — respect user preferences
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bni, .bni-icon, .card, .sc, .ib, .btn, .btn-ghost, .btn-sf, .csl {
    transition: none !important;
    animation: none !important;
  }
}

/* ----------------------------------------------------------
   AGENT MODE — override dark theme variables and selectors
   All agent/PU/RT screens use light Liquid Glass instead
   ---------------------------------------------------------- */

/* Reset dark CSS variables for agent screens */
body.ak-agent-mode #S-agt,
body.ak-agent-mode #S-pu,
body.ak-agent-mode #S-rt {
  --bg: #F5F8FA !important;
  --sf: #FFFFFF !important;
  --sf2: #EDF1F6 !important;
  --sf3: #E2E8EF !important;
  --bd: rgba(13,16,28,.10) !important;
  --bd2: rgba(13,16,28,.18) !important;
  --tx: #1A2033 !important;
  --dim: #515654 !important;
  --mt: #8C97A8 !important;
}

/* Shell in agent mode */
body.ak-agent-mode .shell {
  background: rgba(255,255,255,.52) !important;
}

/* Agent bottom nav */
body.ak-agent-mode #agt-nav {
  background: rgba(255,255,255,.78) !important;
  border-top: 1px solid rgba(255,255,255,.75) !important;
  box-shadow: 0 -4px 28px rgba(0,0,0,.07) !important;
}

/* Agent home cards and action cards */
body.ak-agent-mode #S-agt .card,
body.ak-agent-mode #S-agt .acard,
body.ak-agent-mode #S-pu .card,
body.ak-agent-mode #S-rt .card {
  background: rgba(255,255,255,.65) !important;
  border-color: rgba(255,255,255,.72) !important;
  color: var(--tx) !important;
}

/* Return card (ret) — subtle red tint instead of dark */
body.ak-agent-mode #S-agt .acard.ret {
  background: rgba(196,26,26,.07) !important;
  color: var(--rd) !important;
  border-color: rgba(196,26,26,.22) !important;
}

/* Key list rows in agent */
body.ak-agent-mode #S-agt .ki {
  background: rgba(255,255,255,.55) !important;
  border-color: var(--bd) !important;
  color: var(--tx) !important;
}
body.ak-agent-mode #S-agt #agt-keys .ki {
  background: rgba(255,255,255,.55) !important;
  border-color: var(--bd) !important;
}

/* Agent grid footer bar */
body.ak-agent-mode #S-agt .agrid {
  background: rgba(248,250,255,.75) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border-top: 1px solid rgba(255,255,255,.70) !important;
}

/* PU/RT step screens */
body.ak-agent-mode #S-pu .pstep,
body.ak-agent-mode #S-rt .pstep {
  background: var(--bg) !important;
}
body.ak-agent-mode #S-pu #pu-s0,
body.ak-agent-mode #S-rt #rt-s1 {
  background: var(--bg) !important;
}

/* Toolbars in agent flows */
body.ak-agent-mode #S-pu .tb,
body.ak-agent-mode #S-rt .tb,
body.ak-agent-mode #S-agt .tb {
  background: rgba(255,255,255,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.65) !important;
  color: var(--tx) !important;
}

/* Manual search screens */
#rt-s-manual,
body.ak-agent-mode #pu-s-manual {
  background: var(--bg) !important;
}
body.ak-agent-mode #S-agt #agt-keys {
  background: transparent !important;
}

/* Fade gradients — replace dark fade with light */
body.ak-agent-mode #S-pu #pu-s0>div:last-child,
body.ak-agent-mode #S-rt #rt-s1>div:last-child {
  background: linear-gradient(180deg, rgba(245,248,250,0), rgba(245,248,250,.98) 30%, #F5F8FA 100%) !important;
}

/* Manual list footer */
body.ak-agent-mode #pu-s-manual>div:last-child,
body.ak-agent-mode #rt-s-manual>.rt-manual-actions,
body.ak-agent-mode #S-rt #rt-s-manual .rt-manual-actions {
  background: rgba(245,248,250,.92) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Hero icon area */
body.ak-agent-mode #S-pu .hero-icon,
body.ak-agent-mode #S-rt .hero-icon {
  filter: none !important;
}

/* QR scan buttons — keep dark (camera overlay) */
#qr-scan-controls button {
  background: rgba(13,16,28,.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

/* ----------------------------------------------------------
   REMAINING DARK SELECTORS IN APP.CSS — high-spec overrides
   ---------------------------------------------------------- */

/* Base .card was rgba(23,26,33,.6) in app.css — already fixed
   but some nested selectors still need overriding */
.card {
  background: rgba(255,255,255,.65) !important;
  border-color: rgba(255,255,255,.72) !important;
  color: var(--tx) !important;
}

/* Any element with forced dark inline style via [style*] */
[style*="background:#0b0d11"],
[style*="background: #0b0d11"],
[style*="background:#080b12"],
[style*="background: #080b12"],
[style*="background:#101318"],
[style*="background: #101318"],
[style*="background:#0B0D11"],
[style*="background:#080B12"] {
  background: var(--sf) !important;
  color: var(--tx) !important;
}