/* Black Knight — panel chrome, density, motion, toasts */

.knight-bg {
  background:
    radial-gradient(900px 520px at 80% -10%, rgba(200,200,210,0.06), transparent 52%),
    radial-gradient(800px 480px at -8% 110%, rgba(80,80,90,0.10), transparent 50%),
    linear-gradient(180deg, #09090c 0%, #050506 45%, #030304 100%) !important;
}
.knight-bg::before {
  content:"";
  position:fixed; inset:-20%; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 40% 30% at 15% 20%, rgba(180,185,200,0.06), transparent 60%),
    radial-gradient(ellipse 35% 28% at 85% 75%, rgba(90,95,110,0.07), transparent 55%);
  animation: bkAmbient 18s ease-in-out infinite alternate;
  opacity:.9;
}
.knight-bg::after {
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px) 0 0 / 72px 72px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  opacity:.55;
}
@keyframes bkAmbient {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(2%, -1.5%, 0) scale(1.04); }
}

.aside-panel {
  position: relative;
  background:
    linear-gradient(185deg, rgba(18,18,24,0.96) 0%, rgba(6,6,9,0.98) 100%) !important;
  border-right: 1px solid rgba(70,70,80,0.55) !important;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,0.035),
    12px 0 40px -24px rgba(0,0,0,0.85) !important;
}
.aside-panel::before {
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, #E8E8EC 35%, #8A8A94 65%, transparent);
  opacity:.35;
}

.knight-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.04) 0%, transparent 42%),
    linear-gradient(180deg, rgba(26,26,32,0.98) 0%, rgba(10,10,14,0.99) 100%) !important;
  border: 1px solid #32323a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 28px -16px rgba(0,0,0,0.85) !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2,.8,.2,1) !important;
}
.knight-card::before {
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02));
  pointer-events:none;
}
.knight-card:hover {
  border-color: #4a4a54 !important;
  transform: translateY(-1px);
}

.knight-btn-primary {
  position: relative;
  overflow: hidden;
  letter-spacing: .16em;
}
.knight-btn-primary::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.12) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .5s ease;
}
.knight-btn-primary:hover::after { transform: translateX(120%); }

.nav-sec {
  padding: .65rem .55rem .35rem;
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(168,168,176,.42);
}
#bk-sidebar nav {
  position: relative;
}
.nav-slider { display: none !important; }
.nav-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .85rem .55rem .95rem;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
  color: #A8A8B0;
  transition: color .22s ease !important;
  animation: bkNavIn .42s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
.nav-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(232,232,236,.16) 0%, rgba(160,160,168,.07) 72%, rgba(255,255,255,.03) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.22,.82,.2,1);
  pointer-events: none;
  z-index: 0;
}
.nav-link > * { position: relative; z-index: 1; }
.nav-link:hover {
  color: #F2F2F6 !important;
  transform: none !important;
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active {
  color: #F2F2F6 !important;
  box-shadow: inset 0 0 0 1px rgba(210,210,218,.16) !important;
  animation: bkNavIn .42s cubic-bezier(.2,.8,.2,1) both;
}
.nav-link.is-active::after {
  transform: scaleX(1);
  animation: bkTabFill .45s cubic-bezier(.22,.82,.2,1) both;
  background: linear-gradient(90deg, rgba(232,232,236,.22) 0%, rgba(180,180,188,.1) 62%, rgba(255,255,255,.04) 100%);
}
.nav-link.is-active::before { display: none !important; content: none !important; }
.nav-label { font-weight: 500; line-height: 1; }
.nav-ico {
  width: 1.05rem; height: 1.05rem;
  display: grid; place-items: center;
  flex: none;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0;
  color: inherit;
  opacity: .88;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-ico svg { width: 15px; height: 15px; }
.nav-link:hover .nav-ico { opacity: 1; transform: translateY(-1px); }
.nav-ico.is-on { color: #F2F2F6 !important; opacity: 1; background: none !important; box-shadow: none !important; }

.brand-mark { text-decoration: none; }
.brand-crest {
  width: 4.6rem; height: 4.6rem;
  margin: 0 auto;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(90,90,100,.55);
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.1), transparent 58%),
    linear-gradient(165deg, rgba(36,36,44,.95), rgba(8,8,12,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 28px -18px rgba(0,0,0,.9);
  position: relative;
  overflow: hidden;
}
.brand-crest::after {
  content:"";
  position:absolute; inset:-40%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  transform: translateX(-30%);
  animation: brandSheen 5.5s ease-in-out infinite;
}
.brand-logo {
  width: 3.15rem; height: 3.15rem;
  object-fit: contain;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 12px rgba(200,200,210,.2));
  transition: transform .35s ease, filter .35s ease;
}
.brand-mark:hover .brand-logo {
  transform: scale(1.06);
  filter: drop-shadow(0 0 18px rgba(220,220,230,.35));
}
@keyframes brandSheen {
  0%, 70%, 100% { transform: translateX(-40%); }
  40% { transform: translateX(40%); }
}

.live-dot {
  animation: bkPulse 1.8s ease-in-out infinite;
}
@keyframes bkPulse {
  0%, 100% { opacity:1; box-shadow:0 0 0 0 rgba(52,211,153,.45); }
  50% { opacity:.7; box-shadow:0 0 0 5px rgba(52,211,153,0); }
}

.topbar {
  position: sticky; top:0; z-index:30;
  backdrop-filter: blur(18px) saturate(1.15);
  background: linear-gradient(180deg, rgba(8,8,12,0.86), rgba(8,8,12,0.58));
  border-bottom: 1px solid rgba(70,70,80,0.55);
  box-shadow: 0 10px 30px -24px rgba(0,0,0,0.9);
}
.topbar-chip {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .7rem;
  border:1px solid rgba(70,70,80,0.7);
  background: rgba(0,0,0,0.28);
  border-radius: 999px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#A8A8B0;
}
.topbar-icon-btn {
  position:relative;
  width:2.15rem; height:2.15rem;
  display:grid; place-items:center;
  border:1px solid #2A2A30;
  border-radius:7px;
  background: linear-gradient(180deg, #1A1A22, #101016);
  color:#C8C8D0;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.topbar-icon-btn:hover {
  border-color:#55555F; color:#E8E8EC; transform: translateY(-1px);
}

/* Shared dense toolkit */
.kbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.kbox{
  background:rgba(10,10,14,.92);
  border:1px solid #303038;
  border-radius:7px;
}
.kin{
  background:#060608;border:1px solid #3a3a44;border-radius:5px;
  padding:5px 8px;font-size:12px;color:#e8e8ec;height:30px;line-height:1.2;
}
.kin:focus{outline:none;border-color:#6a6a78}
textarea.kin{height:auto;min-height:52px;line-height:1.35;resize:vertical}
.kl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(170,170,180,.55);margin-bottom:2px;display:block}
.kb{
  height:30px;padding:0 10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border-radius:5px;border:1px solid #4a4a56;background:linear-gradient(180deg,#26262e,#121216);
  color:#ddd;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;
}
.kb:hover{border-color:#7a7a88;color:#fff}
.kb-g{border-color:#5a5a68;background:linear-gradient(180deg,#34343e,#1a1a22);font-weight:600}
.kb-g:hover{border-color:#aaa}
.kc{
  height:24px;padding:0 8px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  border-radius:4px;border:1px solid #3a3a44;background:transparent;color:#bbb;
}
.kc-mit{border-color:rgba(217,119,6,.5);color:#fbbf24}
.kc-bk{border-color:rgba(16,185,129,.45);color:#6ee7b7}
.kstat{font-size:11px;color:rgba(180,180,190,.7)}
.kstat b{font-size:12px;font-weight:600;margin-right:3px}
.ksep{width:1px;height:16px;background:#3a3a44;flex-shrink:0}
.ktab{
  position:relative; overflow:hidden;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;
  border-radius:4px;border:1px solid transparent;color:rgba(180,180,190,.55);
  cursor:pointer;background:transparent;
  transition: border-color .18s, color .18s, background .18s, transform .18s, box-shadow .18s;
}
.ktab:hover{
  color:#e8e8ec; transform:translateY(-1px);
  border-color:rgba(180,180,190,.22); background:rgba(255,255,255,.03);
}
.ktab.is-on{border-color:#3a3a44;color:#e8e8ec;background:rgba(255,255,255,.04); animation: bkTabPulse 2.4s ease-in-out infinite;}
.ktab::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  transform:translateX(-130%); transition:transform .45s ease;
}
.ktab:hover::after{ transform:translateX(130%); }
.kpanel[hidden]{display:none!important}
.kquick{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 11px;border-radius:6px;border:1px solid #32323a;
  background:rgba(255,255,255,.02);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#c8c8d0;transition:border-color .15s, background .15s, transform .15s;
}
.kquick:hover{border-color:#55555f;background:rgba(255,255,255,.045);color:#fff;transform:translateY(-1px)}

/* Tables denser */
.bk-table th{padding:.55rem .55rem !important}
.bk-table td{padding:.45rem .55rem !important}
.bk-table tbody tr{transition:background .15s ease}
.bk-table tbody tr:hover{background:rgba(255,255,255,.025)}

/* Notifications — steel tray */
#bk-notif-badge {
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; font-size:9px; font-weight:700;
  display:grid; place-items:center;
  background: linear-gradient(180deg,#C45A5A,#8A3030); color:#fff;
  box-shadow:0 0 0 2px #0a0a0e, 0 0 12px rgba(196,90,90,.35);
  animation: bkBadgePop .35s cubic-bezier(.2,.8,.2,1) both;
}
#bk-notif-badge.is-hot {
  animation: bkBadgePulse 1.8s ease-in-out infinite;
}
@keyframes bkBadgePop {
  from { transform: scale(.5); opacity:0; }
  to { transform: scale(1); opacity:1; }
}
@keyframes bkBadgePulse {
  0%, 100% { box-shadow:0 0 0 2px #0a0a0e, 0 0 0 0 rgba(196,90,90,.0); }
  50% { box-shadow:0 0 0 2px #0a0a0e, 0 0 0 6px rgba(196,90,90,.18); }
}
.bk-notif-wrap { position:relative; }
.topbar-icon-btn.has-unread {
  border-color: rgba(196,90,90,.45);
  color:#E8E8EC;
}
.topbar-icon-btn.has-unread svg {
  animation: bkBellTilt 2.4s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes bkBellTilt {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(12deg); }
  92% { transform: rotate(-10deg); }
  94% { transform: rotate(8deg); }
  96% { transform: rotate(-4deg); }
}
.bk-notif-panel {
  position:absolute; right:0; top:calc(100% + 12px);
  width:min(380px, 92vw);
  opacity:0; visibility:hidden;
  transform: translateY(14px) scale(.96);
  transform-origin: top right;
  transition:
    opacity .28s cubic-bezier(.2,.8,.2,1),
    transform .32s cubic-bezier(.2,.8,.2,1),
    visibility .28s;
  border:1px solid #3A3A46;
  border-radius:14px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.05) 0%, transparent 40%),
    linear-gradient(180deg, rgba(26,26,34,.99), rgba(8,8,12,.99));
  box-shadow:
    0 28px 70px -22px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
  z-index:50;
  pointer-events:none;
}
.bk-notif-panel::before {
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, #E8E8EC 30%, #8A8A94 70%, transparent);
  opacity:.55;
}
.bk-notif-panel.is-open {
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
.bk-notif-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem;
  border-bottom:1px solid rgba(42,42,48,.95);
  background: rgba(0,0,0,.22);
}
.bk-notif-head h3 {
  margin:0; font-family:Orbitron,sans-serif;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#E8E8EC;
}
.bk-notif-list { max-height:340px; overflow:auto; padding:.45rem; }
.bk-notif-empty {
  padding:2rem 1rem; text-align:center; color:#6B7280; font-size:13px;
}
.bk-notif-empty::before {
  content:"";
  display:block; width:42px; height:42px; margin:0 auto .75rem;
  border-radius:12px; border:1px solid #32323a;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(160deg,#1a1a22,#0c0c10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  animation: bkEmptyFloat 3s ease-in-out infinite;
}
@keyframes bkEmptyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.bk-notif-item {
  display:grid;
  grid-template-columns:36px 1fr;
  gap:.7rem; padding:.7rem .65rem;
  border-radius:10px; border:1px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  opacity:0; transform: translateY(8px);
  animation: bkNotifItem .38s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--bk-i, 0ms);
}
.bk-notif-panel.is-open .bk-notif-item { opacity:1; }
@keyframes bkNotifItem {
  to { opacity:1; transform:none; }
}
.bk-notif-item:hover {
  background:rgba(255,255,255,0.035);
  border-color: rgba(70,70,80,.55);
  transform: translateX(2px);
}
.bk-notif-item.is-unread {
  background: rgba(255,255,255,.035);
  border-color: rgba(80,80,90,.4);
}
.bk-notif-ico {
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; flex:none;
  border:1px solid #32323a;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.35));
}
.bk-notif-ico svg { width:16px; height:16px; }
.bk-notif-ico-ok { color:#6EE7B7; border-color:rgba(16,185,129,.35); background:rgba(16,185,129,.08); }
.bk-notif-ico-error { color:#F0A0A0; border-color:rgba(168,80,80,.4); background:rgba(120,40,40,.18); }
.bk-notif-ico-warn { color:#FBBF24; border-color:rgba(217,119,6,.4); background:rgba(217,119,6,.1); }
.bk-notif-msg { font-size:13px; color:#E8E8EC; line-height:1.35; font-weight:500; }
.bk-notif-meta {
  margin-top:.28rem; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#6B7280;
  display:flex; align-items:center; gap:.45rem;
}
.bk-notif-tag {
  font-size:9px; letter-spacing:.14em; padding:.12rem .4rem; border-radius:4px;
  border:1px solid #32323a; color:#A8A8B0;
}
.bk-notif-tag-ok { color:#6EE7B7; border-color:rgba(16,185,129,.35); }
.bk-notif-tag-error { color:#F0A0A0; border-color:rgba(168,80,80,.4); }
.bk-notif-tag-warn { color:#FBBF24; border-color:rgba(217,119,6,.4); }

/* Toasts — animated steel cards */
#bk-toast-host {
  position:fixed; right:1rem; bottom:1rem; z-index:10000;
  display:flex; flex-direction:column; gap:.65rem;
  width:min(360px, calc(100vw - 1.4rem));
  pointer-events:none;
}
.bk-toast {
  pointer-events:auto;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:.75rem;
  align-items:center;
  padding:.85rem .9rem;
  border-radius:12px;
  border:1px solid #3A3A46;
  background:
    linear-gradient(145deg, rgba(255,255,255,.06) 0%, transparent 42%),
    linear-gradient(180deg, rgba(30,30,38,.99), rgba(10,10,14,.99));
  box-shadow:
    0 22px 48px -18px rgba(0,0,0,.88),
    inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;
  transform: translateX(28px) translateY(8px) scale(.96);
  transition:
    opacity .32s cubic-bezier(.2,.8,.2,1),
    transform .38s cubic-bezier(.2,.8,.2,1);
}
.bk-toast::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: bkToastSheen .9s ease .15s both;
  pointer-events:none;
}
@keyframes bkToastSheen {
  to { transform: translateX(120%); }
}
.bk-toast.is-in { opacity:1; transform:none; }
.bk-toast.is-out {
  opacity:0;
  transform: translateX(18px) scale(.97);
}
.bk-toast-ico {
  width:42px; height:42px; border-radius:11px;
  display:grid; place-items:center;
  border:1px solid #32323a;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.4));
}
.bk-toast-ico svg { width:18px; height:18px; }
.bk-toast-ok .bk-toast-ico {
  color:#6EE7B7; border-color:rgba(16,185,129,.4);
  background: rgba(16,185,129,.1);
  box-shadow: 0 0 18px -8px rgba(110,231,183,.55);
}
.bk-toast-error .bk-toast-ico {
  color:#F0A0A0; border-color:rgba(168,80,80,.45);
  background: rgba(120,40,40,.2);
  box-shadow: 0 0 18px -8px rgba(240,160,160,.4);
}
.bk-toast-warn .bk-toast-ico {
  color:#FBBF24; border-color:rgba(217,119,6,.45);
  background: rgba(217,119,6,.12);
  box-shadow: 0 0 18px -8px rgba(251,191,36,.4);
}
.bk-toast-label {
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#9CA3AF; margin-bottom:.18rem;
}
.bk-toast-msg { font-size:13px; color:#E8E8EC; line-height:1.4; font-weight:500; }
.bk-toast-x {
  border:0; background:transparent; color:#6B7280; font-size:18px; line-height:1;
  cursor:pointer; padding:.15rem .25rem; border-radius:6px;
  transition: color .15s, background .15s;
}
.bk-toast-x:hover { color:#E8E8EC; background:rgba(255,255,255,.05); }
.bk-toast-timer {
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.bk-toast-timer > i {
  display:block; height:100%; width:100%;
  transform-origin: left center;
  animation: bkToastTimer linear forwards;
  animation-duration: var(--bk-life, 3800ms);
}
.bk-toast-ok .bk-toast-timer > i { background: linear-gradient(90deg,#166534,#6EE7B7); }
.bk-toast-error .bk-toast-timer > i { background: linear-gradient(90deg,#7F1D1D,#F0A0A0); }
.bk-toast-warn .bk-toast-timer > i { background: linear-gradient(90deg,#9A3412,#FBBF24); }
@keyframes bkToastTimer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Reveal / page motion */
.page-enter {
  animation: bkPage .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bkPage {
  from { opacity:0; transform: translateY(10px); }
  to { opacity:1; transform:none; }
}
.bk-reveal {
  animation: bkReveal .5s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--bk-delay, 0ms);
}
@keyframes bkReveal {
  from { opacity:0; transform: translateY(12px); }
  to { opacity:1; transform:none; }
}

/* Soft polish on dense plates */
.kbox {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.kbox:hover {
  border-color: #3c3c46;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 10px 28px -18px rgba(0,0,0,.7);
}
.kb {
  position: relative;
  overflow: hidden;
  transition: border-color .15s, color .15s, transform .15s, filter .15s, box-shadow .2s;
}
.kb:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(0,0,0,.8); }
.kb:active { transform:none; }
.kb::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.1) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .45s ease;
  pointer-events:none;
}
.kb:hover::after { transform: translateX(130%); }
.nav-link {
  transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease !important;
}
.bk-table tbody tr {
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bk-table tbody tr:hover {
  background: rgba(255,255,255,0.025);
  box-shadow: inset 3px 0 0 rgba(200,200,210,.35);
}
.kin, .kb, .kc, .ktab {
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease, transform .15s ease;
}
.kin:focus {
  box-shadow: 0 0 0 3px rgba(180,180,190,0.12);
}
.ktab.is-on {
  box-shadow: 0 0 0 1px rgba(220,220,230,.18), 0 8px 18px -14px rgba(0,0,0,.9);
}
.page-enter {
  animation: bkPage .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bkNavGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(210,210,218,.12); }
  50% { box-shadow: inset 0 0 0 1px rgba(232,232,236,.22); }
}
@keyframes bkTabFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes bkNavFill {
  from { filter: brightness(.86); }
  to { filter: none; }
}
@keyframes bkNavIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}
@keyframes bkIcoPop {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.14) rotate(-6deg); }
  100% { transform: scale(1.04) rotate(0deg); }
}
@keyframes bkTabPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,232,236,0); }
  50% { box-shadow: 0 0 16px -6px rgba(232,232,236,.28); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-reveal, .page-enter, .bk-toast, .knight-card, .nav-link, .live-dot, .brand-crest::after,
  .bk-notif-item, .bk-toast::after, .bk-toast-timer > i, #bk-notif-badge,
  .topbar-icon-btn.has-unread svg, .bk-notif-empty::before,
  .knight-bg::before, .aside-panel .nav-link.is-active, .kb::after {
    animation:none !important; transition:none !important;
  }
  .knight-card:hover, .kquick:hover, .nav-link:hover, .brand-mark:hover .brand-logo,
  .kbox:hover, .kb:hover, .bk-notif-item:hover { transform:none; }
}

/* ========== Collapsible sidebar drawer ========== */
.bk-menu-toggle,
.bk-sidebar-close {
  display:none;
  width:2.45rem; height:2.45rem;
  place-items:center;
  border:1px solid #3A3A44;
  border-radius:8px;
  background: linear-gradient(180deg, #22222A, #121218);
  color:#E8E8EC;
  flex:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 8px 18px -12px rgba(0,0,0,.8);
}
.bk-menu-toggle:hover,
.bk-sidebar-close:hover { border-color:#7A7A88; color:#fff; }
.bk-menu-toggle-wrap {
  display:none;
  align-items:center;
  gap:.45rem;
}
.bk-menu-toggle-label {
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#A8A8B0;
}
.bk-sidebar-close-row {
  display:none;
  justify-content:flex-end;
  padding:.65rem .75rem 0;
}
.bk-sidebar-backdrop {
  display:none;
  position:fixed; inset:0; z-index:55;
  background:rgba(0,0,0,.62);
  backdrop-filter: blur(2px);
}
.bk-sidebar-backdrop.is-on { display:block; }

/* Phones + tablets (+ many laptops): sidebar closed, open via Menu */
@media (max-width: 1400px) {
  .bk-menu-toggle-wrap { display:inline-flex !important; }
  .bk-menu-toggle { display:grid !important; visibility:visible !important; opacity:1 !important; }
  .bk-sidebar-close { display:grid !important; }
  .bk-sidebar-close-row { display:flex !important; }

  .knight-shell { display:block !important; }
  .bk-main { width:100% !important; min-width:0 !important; }

  #bk-sidebar.aside-panel,
  aside#bk-sidebar,
  #bk-sidebar {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 80 !important;
    width: min(18rem, 88vw) !important;
    max-width: 18rem !important;
    margin: 0 !important;
    transform: translate3d(-105%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s !important;
    box-shadow: 18px 0 50px -20px rgba(0,0,0,.9) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.bk-nav-open #bk-sidebar.aside-panel,
  body.bk-nav-open aside#bk-sidebar,
  body.bk-nav-open #bk-sidebar {
    display: flex !important;
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.bk-nav-open { overflow: hidden !important; }
  body.bk-nav-open .bk-sidebar-backdrop {
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:70 !important;
  }

  .brand-crest { width: 2.8rem; height: 2.8rem; }
  .bk-logo { width: 2.85rem !important; height: 2.85rem !important; max-width: 2.85rem !important; }
  .kbar { gap: 6px; }
  .kbox { border-radius: 8px; }
  .kin, .kb { min-height: 34px; height: auto; }
  .kb { padding: 6px 10px; }
  .bk-table { font-size: 12px; }
  .bk-table th, .bk-table td { padding: .4rem .45rem !important; }
  .kbar > label { min-width: 0; flex: 1 1 42%; }
  .kstat { font-size: 10px; }
  #bk-toast-host {
    right: .55rem; left: .55rem; bottom: .55rem;
    width: auto;
  }
}

@media (max-width: 640px) {
  .page-enter { padding-left: 0 !important; padding-right: 0 !important; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bk-menu-panel { width: min(14rem, 78vw); right: auto; left: 0; }
  .topbar-chip { display: none !important; }
  code { word-break: break-all; }
}

/* ========== Consolidated chrome extras (from layout) ========== */
.font-gothic { font-family:'Orbitron',sans-serif; letter-spacing:.12em; }
.knight-shell { position:relative; z-index:1; }
.knight-divider {
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(140,140,150,0.45), transparent);
}
.knight-btn-primary {
  background: linear-gradient(180deg, #32323A 0%, #16161A 100%);
  color:#E8E8EC; border:1px solid #55555F;
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 10px 22px -12px rgba(0,0,0,0.75);
  transition: filter .15s ease, border-color .15s ease, transform .15s ease;
}
.knight-btn-primary:hover { filter:brightness(1.18); border-color:#9A9AA4; transform: translateY(-1px); }
.nav-link {
  border: 0;
}
.kbox {
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.kbox::before {
  content:"";
  position:absolute; top:0; left:12%; right:12%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  pointer-events:none; opacity:.7;
}
.kb:focus-visible, .kin:focus-visible, .bk-btn:focus-visible, .topbar-icon-btn:focus-visible, .bk-menu-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(180,180,190,0.16);
  border-color: #8A8A94;
}

/* Buttons / badges */
.bk-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid #2A2A30; color:#A8A8B0; background:rgba(18,18,22,.9);
  border-radius:6px; padding:.4rem .75rem; transition: all .15s ease;
}
.bk-btn:hover { color:#E8E8EC; border-color:#4A4A52; background:#1A1A22; }
.bk-btn-ok { border-color:rgba(22,163,74,.4); color:#6EE7B7; }
.bk-btn-ok:hover { background:rgba(22,163,74,.12); border-color:rgba(22,163,74,.7); }
.bk-btn-warn { border-color:rgba(245,158,11,.4); color:#FBBF24; }
.bk-btn-warn:hover { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.7); }
.bk-btn-danger { border-color:rgba(160,80,80,.45); color:#D4A0A0; }
.bk-btn-danger:hover { background:rgba(120,40,40,.18); border-color:rgba(180,90,90,.7); }
.kb.bk-btn-danger { border-color:rgba(160,80,80,.45); color:#D4A0A0; }
.bk-badge {
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; padding:0 10px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  line-height:1; white-space:nowrap;
  border-radius:999px; border:1px solid #3A3A44;
}
.badge-unused { background:#1A1A22; color:#E5E7EB; border-color:#3A3A44; }
.badge-active { background:rgba(22,163,74,.16); color:#6EE7B7; border-color:rgba(22,163,74,.4); }
.badge-expired { background:rgba(234,88,12,.18); color:#FB923C; border-color:rgba(234,88,12,.45); }
.badge-banned { background:rgba(120,40,40,.25); color:#F0C8C8; border-color:rgba(160,80,80,.5); }
.bk-menu { display:inline-block; }
.bk-menu > summary { list-style:none; }
.bk-menu-panel {
  position:absolute; right:0; z-index:40; margin-top:.35rem; width:11.5rem;
  border:1px solid #2A2A30; border-radius:8px; padding:.35rem;
  background:linear-gradient(180deg, rgba(28,28,34,.98), rgba(12,12,16,.98));
  box-shadow:0 16px 40px -16px rgba(0,0,0,.85);
  opacity:0; transform: translateY(6px); pointer-events:none;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.bk-menu[open] > .bk-menu-panel { opacity:1; transform:none; pointer-events:auto; }
.bk-menu-item {
  display:block; width:100%; text-align:left; padding:.45rem .6rem;
  border-radius:5px; font-size:12px; color:#C8C8D0; background:transparent; border:0;
}
.bk-menu-item:hover { background:rgba(255,255,255,.05); color:#E8E8EC; }

/* Empty states */
.bk-empty {
  padding:2.2rem 1rem; text-align:center; color:rgba(168,168,176,.55); font-size:13px;
}
.bk-empty::before {
  content:"NO DATA"; display:block; margin-bottom:.55rem;
  font-family:Orbitron,sans-serif; font-size:10px; letter-spacing:.22em; color:rgba(232,232,236,.35);
}

/* Chart bars */
.bk-bar {
  height: var(--bk-bar, 2%);
  transform-origin: bottom;
  animation: bkBarGrow .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bkBarGrow {
  from { transform: scaleY(0); opacity:.4; }
  to { transform: scaleY(1); opacity:1; }
}

/* Upload overlay + shared modal motion */
#bk-upload-overlay{
  position:fixed;inset:0;z-index:9999;display:none;place-items:center;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  opacity:0; transition: opacity .22s ease;
}
#bk-upload-overlay.is-on{display:grid; opacity:1;}
.bk-up-card{
  width:min(420px,92vw);padding:1.35rem 1.4rem;border-radius:10px;
  background:#121216;border:1px solid #2A2A30;
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  animation: bkModalIn .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bkModalIn {
  from { opacity:0; transform: translateY(10px) scale(.98); }
  to { opacity:1; transform:none; }
}
.bk-up-title{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#E8E8EC;font-weight:700}
.bk-up-sub{margin-top:.55rem;font-size:.8rem;color:#A8A8B0}
.bk-up-track{margin-top:1rem;height:8px;border-radius:999px;background:#070709;overflow:hidden;border:1px solid #2A2A30}
.bk-up-bar{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#7A8AA8,#E8E8EC,#C8C8D0);transition:width .12s linear}
.bk-up-pct{margin-top:.55rem;font-size:.75rem;color:#C8C8D0;font-variant-numeric:tabular-nums}
.bk-fresh{color:#6ee7b7}

/* Legacy Tailwind remaps (slate pages / residual classes) */
.bg-slate-900, .bg-slate-900\/40, .bg-slate-900\/60 {
  background: linear-gradient(180deg, rgba(26,26,34,0.95) 0%, rgba(19,19,26,0.95) 100%) !important;
  border-color: #27272E !important;
}
.bg-slate-950, .bg-slate-950\/40 { background-color: #050507 !important; }
.bg-slate-800, .bg-slate-800\/30, .bg-slate-800\/40 { background-color: #1A1A22 !important; }
.hover\:bg-slate-800:hover, .hover\:bg-slate-800\/30:hover { background-color: #1A1A22 !important; }
.hover\:bg-slate-700:hover { background-color: #27272E !important; }
.border-slate-800, .border-slate-800\/60 { border-color: #27272E !important; }
.border-slate-700 { border-color: #3F3F46 !important; }
.border-slate-600 { border-color: #52525B !important; }
.text-slate-400 { color: #9CA3AF !important; }
.text-slate-500 { color: #6B7280 !important; }
.text-slate-300 { color: #E5E7EB !important; }
.rounded-2xl { border-radius: 10px !important; }
.rounded-xl  { border-radius: 8px !important; }
.bg-indigo-500, button.bg-indigo-500, .bg-indigo-600,
.bg-violet-500, .bg-violet-600, .bg-purple-500, .bg-purple-600 {
  background: linear-gradient(180deg, #2A2A30 0%, #141418 100%) !important;
  color: #E8E8EC !important; border: 1px solid #4A4A52 !important;
}
.text-indigo-300, .text-indigo-400, .text-violet-300, .text-sky-300 { color: #C8C8D0 !important; }
.bg-rose-500, .bg-rose-600, button.bg-rose-500 {
  background: linear-gradient(180deg, #3A2020 0%, #1A1010 100%) !important;
  color: #F0C8C8 !important; border: 1px solid rgba(160,80,80,0.45) !important;
}
.text-rose-300, .text-rose-400 { color: #D4A0A0 !important; }
.bg-emerald-500, .bg-emerald-600, button.bg-emerald-500 {
  background: linear-gradient(180deg, #166534 0%, #14532D 100%) !important;
  color: #ECFCCB !important;
}
.bg-amber-500, .bg-amber-600 {
  background: linear-gradient(180deg, #C2410C 0%, #9A3412 100%) !important;
  color: #FFEDD5 !important;
}
input[type="text"], input[type="password"], input[type="number"], input[type="email"],
input:not([type]), input[type="search"], select, textarea {
  background-color: #13131A !important; border-color: #27272E !important; color: #E5E7EB !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #8A8A94 !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(180,180,190,0.10) !important;
}

/* Page titles only — toolbars stay Rajdhani */
h1.font-gothic, .page-title { font-family: 'Orbitron', sans-serif; letter-spacing: .12em; }
.bk-table thead th { position: sticky; top: 0; background: rgba(8,8,12,.96); z-index: 1; }

/* Drawer motion (compact) */
.bk-sidebar-backdrop {
  opacity: 0;
  transition: opacity .24s ease, visibility .24s;
}
body.bk-nav-open .bk-sidebar-backdrop,
.bk-sidebar-backdrop.is-on {
  opacity: 1;
}

@media (max-width: 1400px) {
  #bk-sidebar.aside-panel,
  aside#bk-sidebar,
  #bk-sidebar {
    display: flex !important;
    flex-direction: column !important;
    transform: translate3d(-105%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s !important;
  }
  body.bk-nav-open #bk-sidebar.aside-panel,
  body.bk-nav-open aside#bk-sidebar,
  body.bk-nav-open #bk-sidebar {
    display: flex !important;
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 640px) {
  .page-enter { padding-left: .75rem !important; padding-right: .75rem !important; }
  .topbar-chip.bk-chip-keep { display:inline-flex !important; }
  .kbar-tools { display:none; }
  .kbar-tools.is-open { display:flex; width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-bar, .bk-up-card, .app-modal.is-on, .bk-menu-panel,
  #bk-sidebar, .bk-sidebar-backdrop {
    animation:none !important; transition:none !important;
  }
}

/* ========== VampirAuth-style chrome ========== */
.aside-panel::before {
  background: linear-gradient(90deg, transparent, #E8E8EC 30%, #8A8A94 70%, transparent) !important;
  opacity:.55 !important;
}
.nav-link.is-active {
  background: transparent !important;
  color: #F2F2F6 !important;
}
.nav-link.is-active::before { display:none !important; }
.nav-ico.is-on {
  border: 0 !important;
  color: #F2F2F6 !important;
  background: none !important;
  box-shadow: none !important;
}
.nav-sec { letter-spacing:.22em; color:rgba(168,168,176,.5); }

.va-search {
  position:relative;
  flex:1 1 280px;
  max-width:420px;
  min-width:0;
}
.va-search-ico {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:#8A8A94; pointer-events:none;
}
.va-search input {
  width:100%; height:36px; padding:0 12px 0 36px;
  border-radius:8px; border:1px solid #2A2A32;
  background:#0A0A0E !important; color:#E8E8EC !important;
  font-size:13px;
}
.va-search input::placeholder { color:#6B7280; }
.va-search-list {
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  z-index:60; max-height:280px; overflow:auto;
  border:1px solid #32323A; border-radius:8px;
  background:linear-gradient(180deg,#16161C,#0A0A0E);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  padding:6px;
}
.va-search-list a {
  display:block; padding:8px 10px; border-radius:6px;
  color:#C8C8D0; font-size:13px; text-decoration:none;
}
.va-search-list a:hover, .va-search-list a.is-on {
  background:rgba(232,232,236,.08); color:#fff;
}
.va-search-list a[hidden] { display:none !important; }

.va-userchip {
  display:flex; align-items:center; gap:.65rem;
  padding:.2rem .15rem .2rem .2rem;
}
.va-userchip-avatar {
  width:40px; height:40px; border-radius:999px;
  object-fit:cover; object-position:center top;
  display:block; flex:none;
  background:#16161A;
  border:1px solid #3A3A40;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}
.va-userchip-avatar-sm { width:32px; height:32px; }
.va-userchip-name { font-size:13px; font-weight:600; line-height:1.1; color:#F2F2F6; }
.va-userchip-role { font-size:10px; color:#8A8A94; margin-top:2px; }
@media (max-width: 720px) {
  .va-userchip-meta { display:none; }
  .va-search { max-width:none; }
}

.va-crumb {
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .55rem;
  font-size:12px; color:#7A7A84; margin-bottom:.85rem;
}
.va-crumb a { color:#9A9AA4; text-decoration:none; }
.va-crumb a:hover { color:#E8E8EC; }
.va-crumb strong { color:#E8E8EC; font-weight:600; }

.va-pagehead { margin-bottom:1.15rem; }
.va-pagehead h1 {
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(22px, 2.2vw, 28px);
  font-weight:700;
  letter-spacing:-.02em;
  color:#F7F7F8;
  line-height:1.15;
}
.va-pagehead p {
  margin:.45rem 0 0;
  font-size:14px;
  color:#8A8A94;
}

.va-actions { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.va-actions-row { display:flex; flex-wrap:wrap; gap:8px; }
.va-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  height:34px; padding:0 12px;
  border-radius:6px; font-size:12px; font-weight:600;
  letter-spacing:.02em; background:transparent; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.va-btn svg { width:14px; height:14px; flex:none; }
.va-btn-cyan {
  border:1px solid #55555F; color:#C8C8D0;
}
.va-btn-cyan:hover { background:rgba(232,232,236,.08); color:#fff; border-color:#8A8A94; }
.va-btn-red {
  border:1px solid #DC2626; color:#FCA5A5;
}
.va-btn-red:hover { background:rgba(220,38,38,.12); color:#fff; }
.va-btn.is-on { background:rgba(232,232,236,.12); color:#fff; }
.va-btn-red.is-on { background:rgba(220,38,38,.16); }

.va-sheet {
  margin-bottom:14px;
  padding:12px;
  border:1px solid #2A2A32;
  border-radius:8px;
  background:rgba(10,10,14,.92);
}
.va-sheet[hidden] { display:none !important; }

.va-table-card {
  border:1px solid #26262E;
  border-radius:8px;
  overflow:hidden;
  background:rgba(8,8,12,.92);
}
.va-table-tools {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; border-bottom:1px solid #26262E;
}
.va-table-tools label { font-size:12px; color:#9A9AA4; display:flex; align-items:center; gap:6px; }
.bk-table thead th,
table.bk-table thead th,
.va-table-card thead th {
  color:#C8C8D0 !important;
  font-size:11px !important;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:#0A0A0E !important;
  border-bottom:1px solid #26262E;
  white-space:nowrap;
}
.va-table-card tbody td {
  border-top:1px solid #1C1C22;
  font-size:13px;
  color:#D4D4DA;
}
.va-status-cell { white-space:nowrap; width:1%; }
.badge-used { background:rgba(22,163,74,.18); color:#4ADE80; border-color:rgba(22,163,74,.45); }
.badge-unused { background:#1A1A22; color:#E5E7EB; border-color:#3A3A44; }
.badge-expired { background:rgba(220,38,38,.18); color:#FCA5A5; border-color:rgba(220,38,38,.45); }

@media (max-width: 640px) {
  .va-pagehead h1 { font-size:26px; }
}

.va-footer {
  margin-top:2.4rem;
  padding:1.2rem 0 .4rem;
  text-align:center;
  font-size:12px;
  color:#6B6B74;
}
.va-footer span { color:#E8E8EC; font-weight:700; letter-spacing:.12em; }

.va-stats {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  flex:1;
}
.va-stat {
  background:linear-gradient(180deg,#16161C,#101014);
  border:1px solid #2A2A32;
  border-radius:10px;
  padding:14px 16px;
  min-width:0;
}
.va-stat b {
  display:block;
  font-size:28px;
  font-weight:700;
  letter-spacing:-.03em;
  color:#F5F5F7;
  line-height:1;
}
.va-stat span {
  display:block;
  margin-top:6px;
  font-size:12px;
  color:#8A8A94;
}
.va-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:18px; flex-wrap:wrap;
}

.va-appgrid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}
.va-appcard {
  background:linear-gradient(180deg,#141418,#0E0E12);
  border:1px solid #2A2A32;
  border-radius:12px;
  padding:16px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 10px 28px -20px rgba(0,0,0,.9);
}
.va-appcard.is-on {
  border-color:#6A6A74;
  box-shadow:0 0 0 1px rgba(232,232,236,.12), 0 14px 32px -20px rgba(0,0,0,.7);
}
.va-appcard-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.va-appcard-head strong {
  font-size:16px; font-weight:700; color:#F4F4F6;
}
.va-appmeta {
  display:flex; flex-wrap:wrap; gap:12px 16px;
  font-size:12px; color:#9A9AA4;
}
.va-appmeta b { color:#E8E8EC; font-weight:600; }
.va-appbtns { display:flex; flex-direction:column; gap:8px; }
.va-appbtns-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.va-ab {
  height:36px; border-radius:8px; font-size:12px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:#121216; border:1px solid #32323A; color:#E5E7EB;
  cursor:pointer; text-decoration:none; width:100%;
  transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.va-ab svg { width:14px; height:14px; flex:none; }
.va-ab:hover { border-color:#55555F; background:#18181E; }
.va-ab-select { border-color:#6A6A74; color:#D4D4DA; }
.va-ab-select.is-on {
  background:rgba(232,232,236,.08);
  box-shadow:inset 0 0 0 1px rgba(232,232,236,.16);
}
.va-ab-select .dot {
  width:8px; height:8px; border-radius:99px; background:#C8C8D0;
  box-shadow:0 0 8px rgba(200,200,210,.35);
}
.va-ab-pause { border-color:#F97316; color:#FDBA74; }
.va-ab-pause:hover { background:rgba(249,115,22,.12); }
.va-ab-play { border-color:#22C55E; color:#86EFAC; }
.va-ab-secret { border-color:#22C55E; color:#4ADE80; }
.va-ab-secret:hover { background:rgba(34,197,94,.1); }
.va-ab-del { border-color:#DC2626; color:#FCA5A5; }
.va-ab-del:hover { background:rgba(220,38,38,.1); }

.app-badge{font-size:11px;font-weight:600;padding:.22rem .55rem;border-radius:999px;border:1px solid}
.app-badge-on{border-color:rgba(34,197,94,.45);color:#4ADE80;background:rgba(34,197,94,.12)}
.app-badge-off{border-color:rgba(249,115,22,.5);color:#FDBA74;background:rgba(249,115,22,.12)}

.app-modal{position:fixed;inset:0;z-index:80;display:none;place-items:center;background:rgba(0,0,0,.68);backdrop-filter:blur(5px);padding:1rem}
.app-modal.is-on{display:grid}
.app-modal .box{width:min(460px,94vw);background:linear-gradient(180deg,#18181E,#0E0E12);border:1px solid #32323A;border-radius:12px;padding:1.15rem}

@media (max-width: 900px) {
  .va-stats { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .va-stats { grid-template-columns:1fr 1fr; }
  .va-appbtns-row { grid-template-columns:1fr; }
}

/* ========== Black Knight identity ========== */
.knight-bg::before {
  background:
    radial-gradient(ellipse 42% 32% at 18% 12%, rgba(210,210,220,0.05), transparent 62%),
    radial-gradient(ellipse 38% 30% at 86% 78%, rgba(90,90,100,0.07), transparent 58%) !important;
}
.knight-bg::after {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.012) 3px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px) 0 0 / 68px 68px,
    linear-gradient(rgba(255,255,255,0.01) 1px, transparent 1px) 0 0 / 68px 68px !important;
  opacity:.7 !important;
  animation: bkScan 9s linear infinite;
}
@keyframes bkScan {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 48px, 0 0, 0 0; }
}

.bk-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 4px;
  text-decoration: none;
}
.bk-brand-text { min-width: 0; line-height: 1.15; }
.bk-brand-name {
  font-family: Orbitron, Rajdhani, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
  background: linear-gradient(180deg, #FFFFFF 8%, #C8C8D0 58%, #8A8A94 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.55));
}
.bk-top-brand {
  display: none;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}
.bk-top-brand-name {
  font-family: Orbitron, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  background: linear-gradient(180deg, #FFFFFF 8%, #C8C8D0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bk-top-brand-sub {
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(168,168,176,.55);
}
@media (max-width: 1400px) {
  .bk-top-brand { display: flex; }
}
.bk-logo {
  position: relative;
  width: 3.35rem;
  height: 3.35rem;
  max-width: 3.35rem;
  margin: 0;
  flex: none;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: 10px;
}
.bk-logo .brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.75)) saturate(1.05);
  animation: bkLogoBreath 5.5s ease-in-out infinite;
}
.bk-logo-scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgba(255,255,255,.035) 2px 3px
  );
  mix-blend-mode: overlay;
  opacity: .35;
  animation: bkLogoScan 3.6s linear infinite;
}
.bk-logo-glitch {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: bkLogoSheen 6.5s ease-in-out infinite;
}
.bk-logo.is-glitching .brand-logo {
  animation: bkGlitchHit .42s steps(2, end);
}
@keyframes bkLogoBreath {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 12px rgba(0,0,0,.75)) brightness(1); }
  50% { transform: scale(1.04); filter: drop-shadow(0 6px 16px rgba(210,210,220,.2)) brightness(1.08); }
}
@keyframes bkLogoScan {
  from { background-position: 0 0; }
  to { background-position: 0 18px; }
}
@keyframes bkLogoSheen {
  0%, 72%, 100% { transform: translateX(-130%); opacity: 0; }
  78% { opacity: 1; }
  88% { transform: translateX(130%); opacity: 0; }
}
@keyframes bkGlitchHit {
  0% { transform: translate(0,0); filter: none; }
  20% { transform: translate(-3px,1px); filter: hue-rotate(-12deg) contrast(1.2); }
  40% { transform: translate(3px,-1px); filter: hue-rotate(10deg) contrast(1.15); }
  60% { transform: translate(-2px,0) skewX(-2deg); }
  80% { transform: translate(2px,1px); }
  100% { transform: none; filter: none; }
}
.bk-brand-sub {
  text-align: left;
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(180,180,188,.62);
}

.va-stat, .va-appcard, .kbox, .va-table-card {
  animation: bkReveal .55s cubic-bezier(.2,.8,.2,1) both;
}
.va-stat:nth-child(2) { animation-delay: .05s; }
.va-stat:nth-child(3) { animation-delay: .1s; }
.va-stat:nth-child(4) { animation-delay: .15s; }
.va-appcard { transition: border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.va-appcard:hover {
  transform: translateY(-3px);
  border-color: #4A4A54;
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(220,220,230,.06);
}
.va-stat:hover {
  border-color: #4A4A54;
  box-shadow: 0 12px 28px -18px rgba(0,0,0,.8);
}

.va-pagehead h1 {
  background: linear-gradient(180deg, #FFFFFF 10%, #B8B8C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aside-panel {
  background:
    linear-gradient(185deg, rgba(14,14,18,0.98) 0%, rgba(4,4,6,0.99) 100%) !important;
}

.va-search-list a:hover, .va-search-list a.is-on {
  background: rgba(232,232,236,.08);
  color: #fff;
}

.bk-usermenu { position: relative; }
.bk-usermenu-btn,
.bk-sideuser-btn {
  display: flex; align-items: center; gap: .65rem;
  width: 100%;
  padding: .35rem .5rem .35rem .35rem;
  border-radius: 14px;
  border: 1px solid #2A2A32;
  background: linear-gradient(180deg, #121216, #0A0A0E);
  color: #F2F2F6;
  box-shadow: 0 0 0 1px rgba(232,232,236,.06), 0 10px 26px -16px rgba(0,0,0,.7);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.bk-usermenu-btn { width: auto; min-width: 0; }
.bk-usermenu-btn:hover,
.bk-sideuser-btn:hover,
.bk-usermenu.is-open .bk-usermenu-btn,
.bk-sideuser.is-open .bk-sideuser-btn {
  border-color: #4A4A54;
  box-shadow: 0 0 0 1px rgba(232,232,236,.14), 0 0 22px -10px rgba(200,200,210,.2);
}
.bk-usermenu-chev {
  flex: none; color: #9A9AA4;
  transition: transform .28s cubic-bezier(.22,.82,.2,1);
}
.bk-usermenu.is-open .bk-usermenu-chev,
.bk-sideuser.is-open .bk-usermenu-chev { transform: rotate(180deg); color: #E8E8EC; }
.bk-usermenu-drop,
.bk-sideuser-drop {
  min-width: 232px;
  padding: .55rem;
  border-radius: 14px;
  border: 1px solid #26262E;
  background: #08080C;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(232,232,236,.06);
}
.bk-usermenu-drop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  animation: bkDropIn .22s cubic-bezier(.22,.82,.2,1) both;
}
.bk-sideuser { margin: .35rem .65rem .75rem; }
.bk-sideuser-drop {
  margin-top: .45rem;
  animation: bkDropIn .22s cubic-bezier(.22,.82,.2,1) both;
}
.bk-usermenu-status {
  padding: .45rem .65rem .55rem;
  font-size: 13px; font-weight: 700; color: #F2F2F6;
}
.bk-usermenu-sep { height: 1px; margin: .15rem .35rem .45rem; background: #22222A; }
.bk-usermenu-drop a,
.bk-sideuser-drop a {
  display: flex; align-items: center; gap: .7rem;
  padding: .62rem .7rem;
  border-radius: 8px;
  color: #E8E8EC;
  text-decoration: none;
  font-size: 13px;
  transition: background .16s ease, transform .16s ease, color .16s ease;
}
.bk-usermenu-drop a svg,
.bk-sideuser-drop a svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.bk-usermenu-drop a:hover,
.bk-sideuser-drop a:hover {
  background: rgba(255,255,255,.05);
  transform: translateX(3px);
}
.bk-usermenu-drop a.is-out,
.bk-sideuser-drop a.is-out { color: #F0C8C8; }
@keyframes bkDropIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-logo .brand-logo, .bk-logo-scan, .bk-logo-glitch, .knight-bg::after,
  .va-stat, .va-appcard, .kbox, .va-table-card, .nav-link, .ktab.is-on, .nav-slider, .bk-usermenu-drop, .bk-sideuser-drop {
    animation: none !important;
  }
}