.lfield-label {
  font-family: var(--f-ui);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.30em;
  color: rgba(160,120,32,0.45);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 14px;
  -webkit-font-smoothing: antialiased;
}
.linput {
  width: 100%;
  padding: 14px 20px;
  background: rgba(4,7,16,0.85) !important;
  border: none !important;
  border-radius: 3px;
  color: rgba(210,175,90,0.75);
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 300;
  outline: none !important;
  transition: box-shadow 0.3s var(--ease), color 0.3s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  letter-spacing: 0.22em;
  text-align: center;
  caret-color: rgba(160,120,32,0.8);
  /* Recessed well — gold-tinted inner walls, no visible border */
  box-shadow:
    inset 0 2px 0 rgba(180,130,20,0.28),
    inset 2px 0 0 rgba(180,130,20,0.14),
    inset -2px 0 0 rgba(180,130,20,0.14),
    inset 0 -1px 0 rgba(180,130,20,0.10),
    inset 0 3px 8px rgba(0,0,0,0.70),
    inset 0 1px 3px rgba(0,0,0,0.55) !important;
}
/* Nuclear autofill kill — override Chrome's white/yellow flash */
.linput:-webkit-autofill,
.linput:-webkit-autofill:hover,
.linput:-webkit-autofill:focus,
.linput:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px rgba(4,7,16,1) inset !important;
  -webkit-text-fill-color: rgba(210,175,90,0.75) !important;
  background-color: rgba(4,7,16,1) !important;
  color: rgba(210,175,90,0.75) !important;
}
}
/* ── 3D flip card scene ─────────────────────────────────── */
.login-card-scene {
  perspective: 900px;
  perspective-origin: 50% 40%;
  width: 100%;
  overflow: hidden;
}
.login-card-flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.72s cubic-bezier(0.55, 0.05, 0.20, 1.00);
  width: 100%;
}
.login-card-flipper.flipped {
  transform: rotateY(180deg);
}
.login-card-front,
.login-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
}
.login-card-back {
  position: absolute;
  top: 0; left: 0; right: 0;
  transform: rotateY(180deg);
  visibility: hidden;
  transition: visibility 0s linear 0.36s;
}
.login-card-flipper.flipped .login-card-back {
  visibility: visible;
  transition: visibility 0s linear 0.36s;
}
/* During flip, front slides away — keep scene height stable */
.login-card-flipper.flipped .lcard-front-inner {
  opacity: 0;
  transition: opacity 0s;
}
.login-card-flipper.flipped .login-card-back {
  position: relative;
}
/* Front face content */
.lcard-front-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 34px 28px;
  gap: 0;
}
.lcard-front-wordmark {
  font-family: var(--f-display);
  font-size: 52px;
  font-weight: 300;
  letter-spacing: 0.30em;
  white-space: nowrap;
  margin-right: -0.30em;
  background: linear-gradient(160deg,
    var(--gold-lt) 0%, var(--gold-lt) 12%, var(--gold-metal-2) 32%,
    var(--gold) 48%, var(--gold) 54%, var(--gold-metal-3) 65%,
    var(--gold-lt) 80%, var(--gold-lt) 92%, var(--gold-metal-2) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 1px 0px rgba(0,0,0,1))
    drop-shadow(0 2px 3px rgba(0,0,0,0.75))
    drop-shadow(0 0 14px rgba(160,120,32,0.22));
  margin-bottom: 8px;
}
.lcard-front-sub {
  font-family: var(--f-ui);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.32em;
  background: linear-gradient(90deg, rgba(160,120,32,0.55), rgba(210,175,90,0.80) 40%, rgba(210,175,90,0.80) 60%, rgba(160,120,32,0.55));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  margin-bottom: 20px;
  -webkit-font-smoothing: antialiased;
}
.lcard-front-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,120,32,0.30) 30%, rgba(160,120,32,0.30) 70%, transparent);
  margin-bottom: 16px;
}

/* ── Mobile: login card sub-label fits on one line ── */
@media (max-width: 767px) {
  .lcard-front-wordmark { font-size: 38px !important; letter-spacing: 0.20em !important; }
  .lcard-front-sub { font-size: 7.5px !important; letter-spacing: 0.22em !important; }
  .lcard-front-inner { padding: 24px 20px 20px !important; }
}

/* ── KAIT — AI letter shimmer ───────────────────────────────
   The "AI" letters inside KAIT get an occasional pulse of brightness
   and warm glow. Subtle but unmistakable when it fires. Rare enough
   that it reads as a moment, not an animation. Used across all four
   wordmark placements: login, login-card front, sidebar brand card,
   and topbar logo. Fires shortly after page load (so first-arrival
   gets the AI reveal) and then every 45-75 seconds at random intervals.
   See JS in init for the firing schedule.

   Note on rendering: when -webkit-background-clip:text is on the parent
   wordmark, a child span doesn't inherit the painted gradient — the
   child establishes its own background context and renders with the
   inherited transparent text-fill, which means the wrapped letters
   appear blank. So .kait-ai inside a gradient parent needs its own
   matching gradient + clip. Inside a flat-color parent (the topbar
   logo), .kait-ai must inherit the parent's color instead, otherwise
   the topbar would show smoke-K, gold-A, gold-I, smoke-T mismatch. */
.kait-ai {
  display: inline-block;
  transition: filter 0.4s ease;
  will-change: filter;
}
/* Gradient parents (login, login-card front, sidebar brand card):
   give .kait-ai a matching copy of the wordmark gradient. */
.login-wordmark .kait-ai,
.lcard-front-wordmark .kait-ai {
  background: linear-gradient(160deg,
    var(--gold-lt) 0%, var(--gold-lt) 12%, var(--gold-metal-2) 32%,
    var(--gold) 48%, var(--gold) 54%, var(--gold-metal-3) 65%,
    var(--gold-lt) 80%, var(--gold-lt) 92%, var(--gold-metal-2) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Flat-color parent (topbar): inherit the parent's color so
   K, A, I, T all render the same flat color. The shimmer's
   filter still applies on top of the rendered glyph. */
.tb-logo .kait-ai {
  background: none;
  -webkit-text-fill-color: inherit;
  color: inherit;
}
/* The shimmer plays as a sequence, not in parallel: the A starts
   first, the I follows part-way through, both letters hold lit
   together, then both fade as a pair. The eye reads "A...I" — and
   then sees AI together. We do this with two pieces of state:
   - .kait-ai-shimmer-rise: a bright band rising through the letter
   - .kait-ai-shimmer-hold: keep the letter glowing while the next
     letter does its rise, then fade together
   The JS adds rise to the A first; ~700ms later adds rise to the I
   while putting hold on the A; then ~700ms later removes both. */
.kait-ai.kait-ai-shimmer-rise {
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 240, 180, 0.55) 46%,
      rgba(255, 230, 140, 0.95) 50%,
      rgba(255, 240, 180, 0.55) 54%,
      transparent 62%,
      transparent 100%
    ),
    linear-gradient(160deg,
      var(--gold-lt) 0%, var(--gold-lt) 12%, var(--gold-metal-2) 32%,
      var(--gold) 48%, var(--gold) 54%, var(--gold-metal-3) 65%,
      var(--gold-lt) 80%, var(--gold-lt) 92%, var(--gold-metal-2) 100%
    );
  background-size: 100% 300%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text, text;
  -webkit-text-fill-color: transparent;
  background-clip: text, text;
  animation: kaitAiShimmerRise 1.6s ease-out forwards;
}
@keyframes kaitAiShimmerRise {
  0%   { background-position: 50% 200%, 0 0; filter: drop-shadow(0 0 0 rgba(255,215,100,0)); }
  100% { background-position: 50% -50%, 0 0; filter: drop-shadow(0 0 14px rgba(255, 220, 120, 0.85)); }
}
/* Hold state — the letter stays glowing while waiting for the
   second letter to finish its rise. No animation; just a static
   bright filter. The JS removes this class to begin the fade. */
.kait-ai.kait-ai-shimmer-hold {
  filter: drop-shadow(0 0 14px rgba(255, 220, 120, 0.85)) brightness(1.15);
  transition: filter 0.6s ease-out;
}
/* When neither rise nor hold is set, the letter returns to default —
   the existing transition on .kait-ai handles the fade-down. */

/* Topbar fallback — flat color, no rise effect, just a brightness
   pulse that follows the same sequenced timing via JS. */
.tb-logo .kait-ai.kait-ai-shimmer-rise {
  background: none;
  animation: kaitAiShimmerFlatRise 1.6s ease-out forwards;
}
@keyframes kaitAiShimmerFlatRise {
  0%   { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 215, 100, 0)); }
  100% { filter: brightness(1.4) drop-shadow(0 0 10px rgba(255, 220, 120, 0.75)); }
}
.tb-logo .kait-ai.kait-ai-shimmer-hold {
  filter: brightness(1.4) drop-shadow(0 0 10px rgba(255, 220, 120, 0.75));
  transition: filter 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .kait-ai.kait-ai-shimmer-rise,
  .kait-ai.kait-ai-shimmer-hold { animation: none; filter: none; transition: none; }
}

/* The turn toggle — a horizontal line bisected by a rotatable diamond */
.lcard-turn {
  display: flex;
  align-items: center;
  gap: 0;
  width: 72px;
  cursor: pointer;
  position: relative;
}
.lcard-turn-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,120,32,0.45));
  transition: background 0.4s ease;
}
.lcard-turn-line:last-child {
  background: linear-gradient(90deg, rgba(160,120,32,0.45), transparent);
}
.lcard-turn-diamond {
  width: 20px;
  height: 10px;
  flex-shrink: 0;
  color: rgba(160,120,32,0.70);
  transition: color 0.3s, filter 0.3s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: visible;
}
.login-card-flipper.flipped .lcard-turn-diamond {
  opacity: 0;
  transition: opacity 0s linear 0s;
}
.lcard-turn:hover .lcard-turn-diamond {
  color: rgba(210,175,90,0.95);
  filter: drop-shadow(0 0 4px rgba(160,120,32,0.55));
  transform: scaleX(1.12);
}
.lcard-turn:hover .lcard-turn-line {
  background: linear-gradient(90deg, transparent, rgba(160,120,32,0.70));
}
.lcard-turn:hover .lcard-turn-line:last-child {
  background: linear-gradient(90deg, rgba(160,120,32,0.70), transparent);
}

.login-card-back .login-card::before,
.login-card-back .login-card::after {
  display: none;
}

/* Autofill override not needed — input uses type="text" with JS masking */
.linput::placeholder {
  color: rgba(160,120,32,0.18);
  letter-spacing: 0.15em;
}
.linput:focus {
  color: rgba(210,175,90,0.9);
  box-shadow:
    inset 0 2px 0 rgba(160,120,32,0.42),
    inset 2px 0 0 rgba(160,120,32,0.22),
    inset -2px 0 0 rgba(160,120,32,0.22),
    inset 0 -1px 0 rgba(160,120,32,0.16),
    inset 0 3px 8px rgba(0,0,0,0.70),
    inset 0 1px 3px rgba(0,0,0,0.55);
}
/* Thin bottom glow line on focus */
.linput:focus + .linput-glow {
  opacity: 1;
}
.linput-glow {
  position: absolute;
  bottom: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210,175,90,0.5) 50%, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.lbtn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(180deg, rgba(22,30,50,0.95) 0%, rgba(10,14,26,0.98) 100%);
  border: 1px solid rgba(160,120,32,0.40);
  border-radius: 2px;
  color: rgba(160,120,32,0.7);
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.28s var(--ease);
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  /* Raised button — top highlight, bottom shadow */
  box-shadow:
    /* top edge highlight — raised face */
    inset 0 1px 0 rgba(210,175,90,0.14),
    /* left/right soft edge */
    inset 1px 0 0 rgba(210,175,90,0.05),
    inset -1px 0 0 rgba(210,175,90,0.05),
    /* bottom drop shadow — lifts it off the surface */
    0 3px 8px rgba(0,0,0,0.70),
    0 1px 3px rgba(0,0,0,0.85),
    /* outer bottom edge — the "thickness" */
    inset 0 -1px 0 rgba(0,0,0,0.50);
}
.lbtn::before {
  content: '';
  position: absolute; top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210,175,90,0.5) 50%, transparent);
}
.lbtn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(210,175,90,0.04) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.25s;
}
.lbtn:hover {
  border-color: rgba(160,120,32,0.60);
  color: rgba(210,175,90,0.95);
  background: linear-gradient(180deg, rgba(28,38,60,0.97) 0%, rgba(14,19,34,0.99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(210,175,90,0.20),
    inset 1px 0 0 rgba(210,175,90,0.07),
    inset -1px 0 0 rgba(210,175,90,0.07),
    0 4px 14px rgba(0,0,0,0.75),
    0 1px 4px rgba(0,0,0,0.90),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 0 28px rgba(160,120,32,0.10);
  letter-spacing: 0.42em;
}
.lbtn:hover::after { opacity: 1; }
.lbtn:active {
  opacity: 0.85;
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(0,0,0,0.40),
    0 1px 3px rgba(0,0,0,0.60),
    inset 0 -1px 0 rgba(210,175,90,0.04);
}
.lbtn:disabled { opacity: 0.25; cursor: default; }
.lerr {
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 300;
  color: var(--red-lt);
  letter-spacing: 0.12em;
  margin-top: 12px;
  text-align: center;
  display: none;
}


/* ── App shell ─────────────────────────────────────────── */
#app { display: none; height: 100dvh; position: relative; z-index: 2; }

/* ── Recurring gold glimmer sweep across the whole app ── */
#app-glimmer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: linear-gradient(
    112deg,
    transparent 0%,
    transparent 25%,
    rgba(210,175,90,0.008) 38%,
    rgba(232,200,120,0.018) 48%,
    rgba(255,252,220,0.025) 50%,
    rgba(232,200,120,0.018) 52%,
    rgba(210,175,90,0.008) 62%,
    transparent 75%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-position: 150% 0;
  opacity: 0;
  will-change: background-position, opacity;
}
@keyframes appGlimmer {
  0%   { background-position: 150% 0; opacity: 0; }
  4%   { opacity: 0.15; }
  96%  { opacity: 0.12; }
  100% { background-position: -50% 0; opacity: 0; }
}

/* ── Sidebar ───────────────────────────────────────────── */
#sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar);
  background: var(--ink);
  border-right: none;
  display: flex; flex-direction: column;
  z-index: 200;
  overflow: hidden;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    inset -4px 0 8px rgba(0,0,0,0.5),
    inset -8px 0 18px rgba(0,0,0,0.3),
    4px 0 0 0 rgba(0,0,0,0.8),
    6px 0 0 0 rgba(160,120,32,0.04);
}
#sidebar.collapsed {
  width: 0;
}
/* Gold glimmering right edge */
#sidebar::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(160,120,32,0.18) 15%,
    rgba(160,120,32,0.45) 40%,
    rgba(210,175,90,0.7) 50%,
    rgba(160,120,32,0.45) 60%,
    rgba(160,120,32,0.18) 85%,
    transparent 100%
  );
  z-index: 1;
  animation: edgeGlimmer 4s ease-in-out 1s infinite;
}
@keyframes edgeGlimmer {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}
/* Sidebar toggle button */
#sb-toggle {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: var(--sidebar);
  width: 20px; height: 64px;
  background: linear-gradient(90deg, rgba(6,9,18,1) 0%, rgba(12,18,30,0.98) 60%, rgba(8,12,22,0.98) 100%);
  border: 1px solid rgba(160,120,32,0.50);
  border-left: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  z-index: 201;
  display: flex; align-items: center; justify-content: center;
  color: rgba(160,120,32,0.65);
  font-size: 8px;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s, box-shadow 0.2s;
  padding: 0;
  box-shadow:
    /* outer glow */
    3px 0 12px rgba(0,0,0,0.70),
    /* recessed top/bottom dark edges */
    inset 0 2px 4px rgba(0,0,0,0.80),
    inset 0 -2px 4px rgba(0,0,0,0.80),
    /* inner gold rim — second border */
    inset 0 1px 0 rgba(160,120,32,0.30),
    inset 0 -1px 0 rgba(160,120,32,0.20),
    inset -2px 0 0 rgba(160,120,32,0.18),
    /* face highlight */
    inset -1px 0 0 rgba(210,175,90,0.08);
}
#sb-toggle::before {
  content: '';
  position: absolute;
  top: 3px; bottom: 3px; right: 2px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    rgba(160,120,32,0.35) 20%,
    rgba(210,175,90,0.55) 50%,
    rgba(160,120,32,0.35) 80%,
    transparent
  );
  border-radius: 1px;
}
#sb-toggle:hover {
  color: rgba(210,175,90,0.95);
  box-shadow:
    3px 0 16px rgba(0,0,0,0.75),
    inset 0 2px 4px rgba(0,0,0,0.80),
    inset 0 -2px 4px rgba(0,0,0,0.80),
    inset 0 1px 0 rgba(160,120,32,0.45),
    inset 0 -1px 0 rgba(160,120,32,0.30),
    inset -2px 0 0 rgba(160,120,32,0.28),
    inset -1px 0 0 rgba(210,175,90,0.12),
    0 0 8px rgba(160,120,32,0.12);
}
#sb-toggle.collapsed { left: 0; }
#sb-toggle svg { width: 10px; height: 10px; transition: transform 0.35s ease; }
#sb-toggle.collapsed svg { transform: scaleX(-1); }
/* Scanline texture on sidebar */
#sidebar::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.006) 3px,
    rgba(255,255,255,0.006) 4px
  );
}
.sb-header {
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(160,120,32,0.14);
  flex-shrink: 0;
  position: relative;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.55),
    inset 0 1px 3px rgba(0,0,0,0.40),
    0 1px 0 rgba(210,175,90,0.06);
}
.sb-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(160,120,32,0.18) 20%,
    rgba(160,120,32,0.45) 40%,
    rgba(210,175,90,0.65) 50%,
    rgba(160,120,32,0.45) 60%,
    rgba(160,120,32,0.18) 80%,
    transparent
  );
}
.sb-header::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(160,120,32,0.4) 30%,
    rgba(210,175,90,0.7) 50%,
    rgba(160,120,32,0.4) 70%,
    transparent
  );
}
/* ━━━ Sidebar brand card — uses login card recipe, sidebar-sized ━━━
   Same colors, same corners, same gradient — but compact so it doesn't
   dominate the sidebar header. */
.sb-brand-card {
  padding: 6px 12px !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: box-shadow 0.3s ease, opacity 0.2s ease;
  box-shadow:
    0 0 0 1px rgba(160,120,32,0.50),
    0 0 0 2px rgba(160,120,32,0.10),
    inset 0 2px 6px rgba(0,0,0,0.70),
    inset 2px 0 4px rgba(0,0,0,0.40),
    inset 0 -1px 0 rgba(210,175,90,0.06),
    inset 0 0 0 1px rgba(210,175,90,0.10),
    inset 0 0 24px rgba(160,120,32,0.05),
    0 6px 18px rgba(0,0,0,0.65),
    0 2px 4px rgba(0,0,0,0.5) !important;
}
.sb-brand-card:hover {
  box-shadow:
    0 0 0 1px rgba(160,120,32,0.75),
    0 0 0 2px rgba(160,120,32,0.18),
    inset 0 2px 6px rgba(0,0,0,0.70),
    inset 2px 0 4px rgba(0,0,0,0.40),
    inset 0 -1px 0 rgba(210,175,90,0.10),
    inset 0 0 0 1px rgba(210,175,90,0.18),
    inset 0 0 28px rgba(160,120,32,0.10),
    0 6px 22px rgba(0,0,0,0.65),
    0 2px 4px rgba(0,0,0,0.5) !important;
}
.sb-brand-card:active {
  opacity: 0.8;
  transform: scale(0.985);
}
.sb-brand-card .lcard-front-inner {
  padding: 10px 8px 8px !important;
}
.sb-brand-card .lcard-front-wordmark {
  font-size: 28px !important;
  letter-spacing: 0.26em !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  margin-right: -0.26em !important;
}
.sb-brand-card .lcard-front-sub {
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
  margin-bottom: 0 !important;
}
.sb-brand-card .corner {
  width: 9px !important;
  height: 9px !important;
}

.sb-wordmark {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.28em;
  line-height: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg,
    var(--gold-lt) 0%, var(--gold-lt) 12%, var(--gold-metal-2) 32%,
    var(--gold) 48%, var(--gold) 54%, var(--gold-metal-3) 65%,
    var(--gold-lt) 80%, var(--gold-lt) 92%, var(--gold-metal-2) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 1px 0px rgba(0,0,0,1))
    drop-shadow(0 2px 3px rgba(0,0,0,0.75))
    drop-shadow(0 0 14px rgba(160,120,32,0.22));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transform: translateZ(0);
}
.sb-tagline {
  font-family: var(--f-ui);
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.26em;
  color: rgba(160,120,32,0.40);
  text-transform: uppercase;
  margin-top: 7px;
  text-align: center;
  position: relative;
  z-index: 1;
}
/* Engraved department label — sits on the outer plate's surface, below
   the inner KAIT plaque. No border, no plate of its own — the gold
   letterform is the only visual element. */
.sb-dept-engraved {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: rgba(160,120,32,0.55);
  text-transform: uppercase;
  text-align: center;
  padding-top: 10px;
  position: relative;
  z-index: 1;
}
.sb-brand-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 16px 14px 14px;
  border-radius: 6px;
  /* Calm uniform gold ring — matches the login card */
  border: 1px solid rgba(160,120,32,0.60);
  /* Brighter dark base for visibility */
  background: linear-gradient(170deg, rgba(32,42,62,1) 0%, rgba(20,26,40,1) 45%, rgba(14,18,30,1) 100%);
  position: relative;
  isolation: isolate;
  box-shadow:
    /* outer lift */
    0 4px 16px rgba(0,0,0,0.65),
    0 1px 4px rgba(0,0,0,0.80),
    /* inner top highlight — same low alpha as login card */
    inset 0 1px 0 rgba(210,175,90,0.15),
    /* inner bottom shadow — grounds it */
    inset 0 -2px 6px rgba(0,0,0,0.50),
    /* inner sides */
    inset 1px 0 0 rgba(210,175,90,0.08),
    inset -1px 0 0 rgba(210,175,90,0.08);
}
/* Scanline texture overlay */
.sb-brand-plate::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.008) 2px,
    rgba(255,255,255,0.008) 3px
  );
  pointer-events: none;
  border-radius: 5px;
}
/* Gold shimmer sweep on top edge — matched to login card */
.sb-brand-plate::after {
  content: '';
  position: absolute; top: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(160,120,32,0.25) 20%,
    rgba(210,175,90,0.85) 45%,
    rgba(220,180,100,1) 50%,
    rgba(210,175,90,0.85) 55%,
    rgba(160,120,32,0.25) 80%,
    transparent
  );
  pointer-events: none;
}
.sb-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(160,120,32,0.16), transparent);
  margin: 8px 0;
  flex-shrink: 0;
}
.sb-section-label {
  font-family: var(--f-ui);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(160,120,32,0.70);
  display: block;
  width: 100%;
  padding: 7px 20px;
  margin: 8px 0 4px;
  flex-shrink: 0;
  position: relative;
  text-align: center;
  background: linear-gradient(180deg, rgba(20,26,42,0.90) 0%, rgba(14,18,32,0.95) 100%);
  border-top: 1px solid rgba(160,120,32,0.18);
  border-bottom: 1px solid rgba(0,0,0,0.60);
  box-shadow: inset 0 1px 0 rgba(210,175,90,0.06), 0 2px 6px rgba(0,0,0,0.40);
}
.sb-section-label::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(160,120,32,0.28) 30%, rgba(210,175,90,0.42) 50%, rgba(160,120,32,0.28) 70%, transparent 95%);
}
.sb-section-label::after { display: none; }
.sb-section-label-plate { display: contents; }
.sb-section-label-text { display: contents; }
.sb-content-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 10px 10px;
  border-radius: 6px;
  border: 1px solid rgba(160,120,32,0.12);
  border-top-color: rgba(0,0,0,0.70);
  border-bottom-color: rgba(210,175,90,0.08);
  background: linear-gradient(180deg, rgba(3,4,10,0.80) 0%, rgba(5,7,14,0.60) 100%);
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.70),
    inset 0 1px 4px rgba(0,0,0,0.55),
    inset 2px 0 6px rgba(0,0,0,0.35),
    inset -2px 0 6px rgba(0,0,0,0.35),
    inset 0 -1px 0 rgba(210,175,90,0.05),
    0 0 0 1px rgba(160,120,32,0.06);
}