css/styles.css - main - indra/zhidao-protocol

css/styles.css
19 118 строк551 KB
Claude
Profile button toggles closed, instruction tour adapts to feature freeze
25 июн 2026, 00:32
25 июн 2026, 00:320241c1f

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }

/* Tactile press feedback to replace the removed default tap-highlight.
   Scoped to real buttons only — a blanket [onclick] selector matched every
   card/tile/row in the app (huge style-recalc cost on big re-renders like
   the shop catalog) and made large elements feel heavy/slow when scaled. */
button, .btn {
  transition: transform 0.08s ease;
}
button:active, .btn:active {
  transform: scale(0.96);
}

:root {
  --red: #cc2200;
  --red-dim: rgba(180,20,20,0.15);
  --red-border: rgba(180,20,20,0.35);
  --gold: #d4af37;
  --gold-dim: rgba(212,175,55,0.1);
  --gold-border: rgba(212,175,55,0.25);
  --bg: #050510;
  --bg2: rgba(255,255,255,0.03);
  --bg3: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.07);
  --text: #ffffff;
  --text2: #cccccc;
  --text3: #888888;
  --purple: #9b59b6;
  --purple-dim: rgba(155,89,182,0.15);
  --purple-border: rgba(155,89,182,0.3);
  --nav-h: 68px;
  --app-height: 100dvh;
  --app-width: 100vw;
  --tg-viewport-height: 100dvh;
  --tg-safe-top: env(safe-area-inset-top, 0px);
  --tg-safe-right: env(safe-area-inset-right, 0px);
  --tg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tg-safe-left: env(safe-area-inset-left, 0px);
  --font-ui: -apple-system, sans-serif;
  --btn-radius: 8px;
  --card-radius: 10px;
  --scan-opacity: 0.025;
  /* Design tokens */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --transition-fast: 120ms;
  --transition-normal: 200ms;
  --transition-slow: 350ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== NETWATCH LIGHT ===== */
body.theme-nw-light {
  --red: #993333;
  --red-dim: rgba(180,20,20,0.08);
  --red-border: rgba(180,20,20,0.22);
  --gold: #7a5010;
  --gold-dim: rgba(150,100,20,0.1);
  --gold-border: rgba(150,100,20,0.25);
  --bg: #f4f1ed;
  --bg2: rgba(0,0,0,0.03);
  --bg3: rgba(0,0,0,0.05);
  --border: rgba(0,0,0,0.08);
  --text: #1a1a1a;
  --text2: #333333;
  --text3: #5a5a5a;
  --scan-opacity: 0.01;
  --contract-card-bg: rgba(255,255,255,0.78);
  --contract-card-border: rgba(0,0,0,0.09);
  --contract-card-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

/* ===== GENSHIN LIGHT ===== */
body.theme-genshin-light {
  --red: #4b5366;
  --red-dim: rgba(75,83,102,0.08);
  --red-border: rgba(75,83,102,0.2);
  --gold: #8a6820;
  --gold-dim: rgba(219,177,101,0.12);
  --gold-border: rgba(219,177,101,0.3);
  --bg: #ece5d8;
  --bg2: rgba(255,255,255,0.6);
  --bg3: rgba(255,255,255,0.8);
  --border: rgba(219,177,101,0.2);
  --text: #3d4555;
  --text2: #454d5e;
  --text3: #6b7280;
  --font-ui: Georgia, serif;
  --btn-radius: 20px;
  --card-radius: 12px;
  --scan-opacity: 0.005;
}
body.theme-genshin-light .bottom-nav {
  background: rgba(236,229,216,0.97);
  border-top-color: rgba(219,177,101,0.25);
}
body.theme-genshin-light .bottom-nav::before {
  background: linear-gradient(90deg, transparent, rgba(219,177,101,0.5), transparent);
}
body.theme-genshin-light .btn-primary {
  border-radius: 20px;
  font-family: Georgia, serif;
  letter-spacing: 0.5px;
  text-transform: none;
}
body.theme-genshin-light .page-title {
  font-family: Georgia, serif;
}

/* ===== GENSHIN DARK ===== */
body.theme-genshin-dark {
  --red: #c87941;
  --red-dim: rgba(200,121,65,0.1);
  --red-border: rgba(200,121,65,0.25);
  --gold: rgba(219,177,101,0.9);
  --gold-dim: rgba(219,177,101,0.1);
  --gold-border: rgba(219,177,101,0.25);
  --bg: #1a1628;
  --bg2: rgba(255,255,255,0.04);
  --bg3: rgba(255,255,255,0.07);
  --border: rgba(219,177,101,0.1);
  --text: #e8e0d0;
  --text2: #a09880;
  --text3: #5a5248;
  --font-ui: Georgia, serif;
  --btn-radius: 20px;
  --card-radius: 12px;
  --scan-opacity: 0.02;
}
body.theme-genshin-dark .bottom-nav {
  background: rgba(26,22,40,0.97);
  border-top-color: rgba(219,177,101,0.15);
}
body.theme-genshin-dark .bottom-nav::before {
  background: linear-gradient(90deg, transparent, rgba(219,177,101,0.4), transparent);
}
body.theme-genshin-dark .btn-primary {
  border-radius: 20px;
  font-family: Georgia, serif;
  letter-spacing: 0.5px;
  text-transform: none;
}
body.theme-genshin-dark .page-title {
  font-family: Georgia, serif;
  text-shadow: none;
}

/* ===== ADMIN PROTOCOL ===== */
body.theme-admin {
  --accent:       #6478ff;
  --accent2:      #00d4ff;
  --accent-warn:  #ffb400;
  --red:          #6478ff;
  --red-dim:      rgba(100,120,255,0.1);
  --red-border:   rgba(100,120,255,0.3);
  --gold:         #00d4ff;
  --gold-dim:     rgba(0,212,255,0.08);
  --gold-border:  rgba(0,212,255,0.2);
  --bg:           #0a0a14;
  --bg2:          #0d0d20;
  --bg3:          rgba(100,120,255,0.06);
  --border:       rgba(100,120,255,0.2);
  --text:         #e0e8ff;
  --text2:        rgba(224,232,255,0.55);
  --text3:        rgba(224,232,255,0.3);
  --scan-opacity: 0.03;
}
body.theme-admin .bottom-nav {
  background: rgba(10,10,20,0.97);
  border-top-color: rgba(100,120,255,0.25);
}
body.theme-admin .bottom-nav::before {
  background: linear-gradient(90deg, transparent, rgba(100,120,255,0.5), transparent);
}
body.theme-admin .page-title {
  text-shadow: 0 0 20px rgba(100,120,255,0.4);
}

/* Nav active: синий вместо красного */
body.theme-admin .nav-item.active { color: #6478ff; }
body.theme-admin .nav-item.active::before {
  background: linear-gradient(90deg, transparent, rgba(100,120,255,0.9), transparent);
}
body.theme-admin .nav-item.active .ti {
  color: #6478ff;
  filter: drop-shadow(0 0 6px rgba(100,120,255,0.5));
}

/* Кнопки */
body.theme-admin .btn-primary { color: #8090ff; }
body.theme-admin .btn-primary::after {
  background: linear-gradient(90deg, transparent, rgba(100,120,255,0.12), transparent);
}

/* Card label + divider accent */
body.theme-admin .card-label { color: rgba(140,160,255,0.85); }
body.theme-admin .card-label::after {
  background: linear-gradient(90deg, rgba(100,120,255,0.2), transparent);
}

/* Neuro статус и кикер */
body.theme-admin .neuro-status { color: #6478ff; }
body.theme-admin .profile-card-kicker { color: rgba(100,120,255,0.7); }

/* Subtabs и date-btn active */
body.theme-admin .subtab.active { color: #6478ff; }
body.theme-admin .date-btn.active { color: #6478ff; }

/* Разные var(--red) метки */
body.theme-admin .shop-item-limit.limit-soldout { color: #8090ff; }
body.theme-admin .prize-result-points.negative { color: #ff7f7f; }
body.theme-admin .inv-btn-sell { background: rgba(100,120,255,0.1); color: #8090ff; }

/* Профильные бейджи */
body.theme-admin .profile-badge-path {
  background: rgba(100,120,255,0.12);
  border-color: rgba(100,120,255,0.28);
  color: rgba(160,180,255,0.9);
}
body.theme-admin .profile-badge-rank {
  background: rgba(0,212,255,0.1);
  border-color: rgba(0,212,255,0.3);
  color: #00d4ff;
}

/* Admin profile card: синий гlow вместо красного */
body.is-admin.theme-admin .profile-card-home {
  border-color: rgba(100,120,255,0.5);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(100,120,255,0.12), transparent 48%),
    radial-gradient(ellipse at 100% 100%, rgba(0,212,255,0.07), transparent 52%),
    linear-gradient(155deg, rgba(255,255,255,0.03), rgba(5,5,20,0.7));
  box-shadow: 0 0 28px rgba(100,120,255,0.14), inset 0 0 20px rgba(100,120,255,0.06);
}
body.is-admin.theme-admin .profile-card-home::before,
body.is-admin.theme-admin .profile-card-home::after {
  border-color: rgba(100,120,255,0.55);
}
body.is-admin.theme-admin .profile-scan-line {
  background: linear-gradient(90deg, transparent, rgba(100,120,255,0.6) 40%, rgba(140,160,255,0.9) 50%, rgba(100,120,255,0.6) 60%, transparent);
}
body.is-admin.theme-admin .profile-card-kicker {
  color: rgba(100,120,255,0.75);
}
body.is-admin.theme-admin .profile-admin-badge {
  background: rgba(80,100,220,0.88);
}

/* Карточка темы admin скрыта для обычных пользователей */
#theme-btn-admin {
  display: none;
}
body.is-admin #theme-btn-admin {
  display: block;
}

/* ===== ADMIN LIGHT THEME ===== */
body.theme-admin-light {
  --accent:       #4456e0;
  --accent2:      #0099cc;
  --accent-warn:  #cc7700;
  --red:          #4456e0;
  --red-dim:      rgba(68,86,224,0.1);
  --red-border:   rgba(68,86,224,0.28);
  --gold:         #0099cc;
  --gold-dim:     rgba(0,153,204,0.1);
  --gold-border:  rgba(0,153,204,0.25);
  --bg:           #eef0fa;
  --bg2:          rgba(255,255,255,0.75);
  --bg3:          rgba(255,255,255,0.95);
  --border:       rgba(68,86,224,0.15);
  --text:         #1a1f40;
  --text2:        #3a4070;
  --text3:        #6a72a0;
  --scan-opacity: 0.01;
}
body.theme-admin-light .bottom-nav {
  background: rgba(238,240,250,0.97);
  border-top-color: rgba(68,86,224,0.2);
}
body.theme-admin-light .bottom-nav::before {
  background: linear-gradient(90deg, transparent, rgba(68,86,224,0.4), transparent);
}
body.theme-admin-light .page-title {
  color: #1a1f40;
  text-shadow: none;
}
body.theme-admin-light .nav-item.active { color: #4456e0; }
body.theme-admin-light .nav-item.active::before {
  background: linear-gradient(90deg, transparent, rgba(68,86,224,0.7), transparent);
}
body.theme-admin-light .nav-item.active .ti {
  color: #4456e0;
  filter: drop-shadow(0 0 6px rgba(68,86,224,0.4));
}
body.theme-admin-light .btn-primary { color: #4456e0; }
body.theme-admin-light .card-label { color: rgba(68,86,200,0.85); }
body.theme-admin-light .neuro-status { color: #4456e0; }
body.theme-admin-light .profile-card-kicker { color: rgba(68,86,200,0.7); }
body.theme-admin-light .subtab.active { color: #4456e0; }
body.theme-admin-light .date-btn.active { color: #4456e0; }
body.theme-admin-light .inv-btn-sell { background: rgba(68,86,224,0.08); color: #4456e0; }
body.theme-admin-light .profile-badge-path {
  background: rgba(68,86,224,0.1);
  border-color: rgba(68,86,224,0.25);
  color: rgba(50,70,200,0.9);
}
body.theme-admin-light .profile-badge-rank {
  background: rgba(0,153,204,0.1);
  border-color: rgba(0,153,204,0.3);
  color: #0099cc;
}
body.is-admin.theme-admin-light .profile-card-home {
  border-color: rgba(68,86,224,0.4);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(68,86,224,0.08), transparent 48%),
    radial-gradient(ellipse at 100% 100%, rgba(0,153,204,0.05), transparent 52%),
    linear-gradient(155deg, rgba(255,255,255,0.7), rgba(238,240,250,0.9));
  box-shadow: 0 0 28px rgba(68,86,224,0.1), inset 0 0 20px rgba(68,86,224,0.04);
}
body.is-admin.theme-admin-light .profile-card-home::before,
body.is-admin.theme-admin-light .profile-card-home::after {
  border-color: rgba(68,86,224,0.45);
}
body.is-admin.theme-admin-light .profile-scan-line {
  background: linear-gradient(90deg, transparent, rgba(68,86,224,0.5) 40%, rgba(100,120,255,0.8) 50%, rgba(68,86,224,0.5) 60%, transparent);
}
body.is-admin.theme-admin-light .profile-admin-badge {
  background: rgba(68,86,200,0.88);
  color: #fff;
}

/* Карточка темы admin-light скрыта для обычных пользователей */
#theme-btn-admin-light {
  display: none;
}
body.is-admin #theme-btn-admin-light {
  display: block;
}

/* ===== ARCHITECT PROTOCOL THEME ===== */
body.theme-architect {
  --accent:       #00ff88;
  --accent2:      #00e5ff;
  --accent3:      #39ff14;
  --red:          #00ff88;
  --red-dim:      rgba(0,255,136,0.10);
  --red-border:   rgba(0,255,136,0.35);
  --gold:         #00e5ff;
  --gold-dim:     rgba(0,229,255,0.10);
  --gold-border:  rgba(0,229,255,0.28);
  --bg:           #020a05;
  --bg2:          #030e06;
  --bg3:          rgba(0,255,136,0.05);
  --border:       rgba(0,255,136,0.18);
  --text:         #e8fff3;
  --text2:        rgba(232,255,243,0.58);
  --text3:        rgba(232,255,243,0.30);
  --scan-opacity: 0.04;
}
body.theme-architect .bottom-nav {
  background: rgba(2,10,5,0.97);
  border-top-color: rgba(0,255,136,0.40);
}
body.theme-architect .bottom-nav::before {
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.55), rgba(0,229,255,0.45), rgba(57,255,20,0.20), rgba(0,229,255,0.45), rgba(0,255,136,0.55), transparent);
}
body.theme-architect .page-title {
  text-shadow: 0 0 30px rgba(0,255,136,0.7), 0 0 70px rgba(0,255,136,0.22);
}
body.theme-architect .nav-item.active { color: rgba(0,255,136,0.95); }
body.theme-architect .nav-item.active::before {
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.85), rgba(0,229,255,0.5), rgba(0,255,136,0.85), transparent);
}
body.theme-architect .nav-item.active .ti {
  color: rgba(0,255,136,0.95);
  filter: drop-shadow(0 0 8px rgba(0,255,136,0.6)) drop-shadow(0 0 16px rgba(0,255,136,0.2));
}
body.theme-architect .btn-primary { color: #00ff88; }
body.theme-architect .btn-primary::after {
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.12), rgba(0,229,255,0.07), transparent);
}
body.theme-architect .card-label { color: rgba(0,255,136,0.88); }
body.theme-architect .card-label::after {
  background: linear-gradient(90deg, rgba(0,255,136,0.28), rgba(0,229,255,0.10), transparent);
}
body.theme-architect .neuro-status { color: #00ff88; }
body.theme-architect .subtab.active { color: #00ff88; }
body.theme-architect .date-btn.active { color: #00ff88; }
body.theme-architect .profile-card-kicker { color: rgba(0,255,136,0.78); }
body.theme-architect .profile-badge-path {
  background: rgba(0,255,136,0.10);
  border-color: rgba(0,255,136,0.32);
  color: rgba(100,255,180,0.92);
}
body.theme-architect .profile-badge-rank {
  background: rgba(0,229,255,0.10);
  border-color: rgba(0,229,255,0.32);
  color: #00e5ff;
}

/* ── Architect profile card ────────────────────────────────── */
body.is-architect .profile-card-home {
  border-color: rgba(0,255,136,0.55);
  background:
    radial-gradient(ellipse at 0% 0%,    rgba(0,255,136,0.13),   transparent 44%),
    radial-gradient(ellipse at 100% 100%,rgba(0,229,255,0.12),   transparent 44%),
    radial-gradient(ellipse at 55% 45%,  rgba(57,255,20,0.05),   transparent 55%),
    linear-gradient(155deg, rgba(255,255,255,0.03), rgba(2,10,5,0.92));
}
body.is-architect .profile-card-home::before,
body.is-architect .profile-card-home::after {
  border-color: rgba(0,255,136,0.70);
}
body.is-architect .profile-scan-line {
  display: block;
  animation: architectScanLine 4s ease-in-out infinite;
}
body.is-architect .profile-card-kicker {
  color: rgba(0,255,136,0.85);
  text-shadow: 0 0 8px rgba(0,255,136,0.45);
}
body.is-architect .profile-admin-badge {
  background: linear-gradient(90deg, rgba(0,180,90,0.92), rgba(0,140,70,0.88), rgba(0,180,200,0.45));
  border-top: 1px solid rgba(0,229,255,0.30);
  font-size: 8px;
  letter-spacing: 2px;
  padding: 3px 0;
  text-shadow: 0 0 10px rgba(0,255,136,0.6);
}

/* Pulse glow — architect green */
body.is-architect .profile-card-home {
  animation: profilePulseArchitect 3.5s ease-in-out infinite;
}
body.is-architect.theme-architect .profile-card-home {
  animation: profilePulseArchitect 3.5s ease-in-out infinite;
}

/* Holo-ring — static glow, no spin for architect */
body.is-architect .profile-holo-ring {
  animation: none;
  opacity: 0.28;
  filter: drop-shadow(0 0 12px rgba(0,255,136,0.30));
}

/* Architect scan line animation */
@keyframes architectScanLine {
  0%   { top: 0%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(0,255,136,0.7) 40%, rgba(0,255,180,1.0) 50%, rgba(0,255,136,0.7) 60%, transparent); }
  8%   { opacity: 1; }
  45%  { background: linear-gradient(90deg, transparent, rgba(0,200,255,0.6) 40%, rgba(0,229,255,0.9) 50%, rgba(0,200,255,0.6) 60%, transparent); }
  85%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(57,255,20,0.5) 40%, rgba(0,255,136,0.8) 50%, rgba(57,255,20,0.5) 60%, transparent); }
}

/* Architect triple-layer pulse */
@keyframes profilePulseArchitect {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(0,255,136,0.18),
      0 0 0 1px rgba(0,255,136,0.28),
      inset 0 0 22px rgba(0,255,136,0.06);
  }
  33% {
    box-shadow:
      0 0 50px rgba(0,255,136,0.35),
      0 0 100px rgba(0,255,136,0.12),
      0 0 0 1px rgba(0,229,255,0.55),
      0 0 0 3px rgba(0,255,136,0.10),
      inset 0 0 35px rgba(0,255,136,0.10);
  }
  66% {
    box-shadow:
      0 0 32px rgba(0,255,136,0.24),
      0 0 72px rgba(0,229,255,0.12),
      0 0 0 1px rgba(0,255,136,0.36),
      inset 0 0 28px rgba(0,255,136,0.08);
  }
}

/* Architect glitch — green/cyan */
body.is-architect .page-title-cn,
body.theme-architect .page-title-cn {
  animation-name: glitchCnArchitect;
  animation-duration: 7s;
}
@keyframes glitchCnArchitect {
  0%, 72%, 100% { transform: none; text-shadow: none; clip-path: none; opacity: 1; }
  73% { transform: translateX(-4px) skewX(-5deg); text-shadow: 3px 0 #00ff88, -3px 0 #00e5ff; opacity: 0.75; }
  74% {
    transform: translateX(5px);
    text-shadow: -4px 0 #39ff14, 4px 0 #00e5ff;
    clip-path: polygon(0 12%, 100% 12%, 100% 46%, 0 46%);
    opacity: 0.7;
  }
  75% {
    transform: translateX(-2px);
    text-shadow: 2px 0 rgba(0,255,136,0.9);
    clip-path: polygon(0 54%, 100% 54%, 100% 83%, 0 83%);
  }
  76% { transform: none; text-shadow: none; clip-path: none; opacity: 1; }
  82% { transform: translateX(2px); text-shadow: -2px 0 rgba(0,229,255,0.7); }
  83% { transform: none; text-shadow: none; }
  90% { transform: translateX(-1px) skewX(-2deg); text-shadow: 1px 0 rgba(0,255,136,0.5), -1px 0 rgba(57,255,20,0.45); }
  91% { transform: none; text-shadow: none; }
}

/* Shimmer-sweep на карточке темы */
.architect-theme-card::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), rgba(255,204,0,0.04), transparent);
  animation: architectCardSweep 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes architectCardSweep {
  0%   { left: -120%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* Hidden until is-architect */
#theme-btn-architect { display: none; }
body.is-architect #theme-btn-architect { display: block; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, sans-serif;
  min-height: var(--app-height, 100dvh);
  padding-bottom: var(--nav-h);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

html {
  min-height: var(--app-height, 100dvh);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body.tg-ios {
  min-height: var(--app-height, 100dvh);
  overflow-x: hidden;
  padding-bottom: calc(var(--nav-h) + var(--tg-safe-bottom));
}

/* Сканлайны на фоне */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.025) 3px, rgba(0,0,0,0.025) 4px);
  pointer-events: none;
  z-index: 0;
}

/* Фоновые иероглифы */
.bg-kanji {
  position: fixed;
  font-family: serif;
  pointer-events: none;
  z-index: 0;
  line-height: 1;
  user-select: none;
  transform-origin: center;
  will-change: transform, opacity;
  animation: kanjiDrift var(--kanji-duration, 18s) ease-in-out infinite;
}

.matrix-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Vertical falling hieroglyphs — all users (default themes) */
.matrix-kanji {
  position: absolute;
  top: -120%;
  white-space: pre;
  font-size: 14px;
  font-family: monospace;
  line-height: 1.6;
  color: rgba(180, 0, 30, 0.55);
  text-shadow: 0 0 8px rgba(220, 0, 40, 0.30);
  will-change: transform;
  animation: matrixFall var(--dur, 10s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes matrixFall {
  0%   { transform: translateY(0); }
  100% { transform: translateY(240vh); }
}

/* On light themes the dark-red matrix kanji is too opaque against light
   cards/backgrounds and makes text behind it unreadable — tone it way down. */
body.theme-nw-light .matrix-kanji,
body.theme-genshin-light .matrix-kanji {
  color: rgba(180, 0, 30, 0.10) !important;
  text-shadow: none !important;
}

/* Horizontal data stream rows — architect green only */
.matrix-col {
  position: absolute;
  left: -10%;
  width: 120%;
  color: rgba(0, 255, 136, 0.38);
  font-size: 10px;
  font-family: "Courier New", "Lucida Console", monospace;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.06em;
  opacity: 0;
  text-shadow:
    0 0 6px rgba(0, 255, 136, 0.30),
    0 0 14px rgba(0, 229, 255, 0.12);
  will-change: transform, opacity;
  animation: dataStreamRun var(--dur, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes dataStreamRun {
  0%   { transform: translateX(-5%);  opacity: 0; }
  6%   { opacity: 0.75; }
  88%  { opacity: 0.45; }
  100% { transform: translateX(8%);   opacity: 0; }
}

/* ===== НИЖНЯЯ НАВИГАЦИЯ ===== */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(5,5,16,0.97);
  border-top: 1px solid var(--red-border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
  backdrop-filter: blur(10px);
}
.bottom-nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,20,20,0.6), rgba(212,175,55,0.3), rgba(180,20,20,0.6), transparent);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  cursor: pointer;
  border: none;
  background: none;
  color: #444;
  font-size: 7px;
  font-family: monospace;
  letter-spacing: 0.5px;
  transition: all var(--transition-normal) var(--ease-standard);
  text-transform: uppercase;
  position: relative;
  flex: 1;
}
.nav-item.active { color: rgba(200,50,50,0.95); }
.nav-item.active::before {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200,50,50,0.9), transparent);
}
.nav-item .ti {
  font-size: 28px !important;
  line-height: 1;
  transition: all var(--transition-normal) var(--ease-standard);
  display: block;
}
.nav-item.active .ti {
  color: rgba(200,50,50,0.95);
  filter: drop-shadow(0 0 6px rgba(200,50,50,0.4));
}
.nav-cn { font-size: 8px; font-family: serif; color: inherit; line-height: 1; }

.profile-fab {
  position: fixed;
  top: calc(10px + var(--tg-safe-top, 0px));
  right: calc(10px + var(--tg-safe-right, 0px));
  z-index: 500;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,5,16,0.92);
  border: 1px solid var(--red-border);
  color: rgba(200,50,50,0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: all var(--transition-normal) var(--ease-standard);
}
.profile-fab .ti { font-size: 19px !important; line-height: 1; }
.profile-fab:active { transform: scale(0.92); }
body.theme-nw-light .profile-fab,
body.theme-genshin-light .profile-fab,
body.theme-admin-light .profile-fab {
  background: rgba(255,255,255,0.92);
  color: #a02020;
}

/* ===== СВЕТЛЫЕ ТЕМЫ — ТЁМНЫЙ ТЕКСТ ===== */
body.theme-nw-light .page-title,
body.theme-nw-light .page-sub,
body.theme-nw-light .cn-divider,
body.theme-nw-light .card-label,
body.theme-nw-light .neuro-label,
body.theme-nw-light .stat-label,
body.theme-nw-light .team-name,
body.theme-nw-light .more-item-name,
body.theme-nw-light .shop-item-name,
body.theme-nw-light .announcement-text,
body.theme-nw-light .lb-name,
body.theme-nw-light .lb-points
{ color: #1a1a1a !important; }

body.theme-nw-light .page-sub,
body.theme-nw-light .team-role,
body.theme-nw-light .shop-item-desc,
body.theme-nw-light .announcement-date
{ color: #444444 !important; }

/* Low-opacity gold "kicker" labels and headers are illegible on the light
   background — darken them to the same readable gold used elsewhere in
   theme-nw-light (#7a5010). */
body.theme-nw-light .alpha-boss-kicker,
body.theme-nw-light .alpha-boss-pts,
body.theme-nw-light .alpha-boss-raid-cost,
body.theme-nw-light .page-title-cn,
body.theme-nw-light .main-pinyin,
body.theme-nw-light .stat-cn,
body.theme-nw-light .implant-py,
body.theme-nw-light .profile-card-kicker,
body.theme-nw-light .lb-leaders-label,
body.theme-nw-light .more-stat-lbl span,
body.theme-nw-light .more-item-cn,
body.theme-nw-light .shop-cat .cn,
body.theme-nw-light .shop-item-cn,
body.theme-nw-light .case-cn.g,
body.theme-nw-light .event-lobby-count,
body.theme-nw-light .launch-gate-kicker,
body.theme-nw-light .demo-lock-kicker,
body.theme-nw-light .event-lobby-card .event-lobby-reward::before,
body.theme-nw-light .event-result-card .event-lobby-reward::before,
body.theme-nw-light .diary-star,
body.theme-genshin-light .alpha-boss-kicker,
body.theme-genshin-light .alpha-boss-pts,
body.theme-genshin-light .alpha-boss-raid-cost,
body.theme-genshin-light .page-title-cn,
body.theme-genshin-light .main-pinyin,
body.theme-genshin-light .stat-cn,
body.theme-genshin-light .implant-py,
body.theme-genshin-light .profile-card-kicker,
body.theme-genshin-light .lb-leaders-label,
body.theme-genshin-light .more-stat-lbl span,
body.theme-genshin-light .more-item-cn,
body.theme-genshin-light .shop-cat .cn,
body.theme-genshin-light .shop-item-cn,
body.theme-genshin-light .case-cn.g,
body.theme-genshin-light .event-lobby-count,
body.theme-genshin-light .launch-gate-kicker,
body.theme-genshin-light .demo-lock-kicker,
body.theme-genshin-light .event-lobby-card .event-lobby-reward::before,
body.theme-genshin-light .event-result-card .event-lobby-reward::before,
body.theme-genshin-light .diary-star
{ color: #a07028 !important; }

body.theme-genshin-light .page-title,
body.theme-genshin-light .lb-name,
body.theme-genshin-light .lb-points,
body.theme-genshin-light .more-item-name,
body.theme-genshin-light .shop-item-name,
body.theme-genshin-light .announcement-text,
body.theme-genshin-light .team-name
{ color: #2a2040 !important; }

body.theme-genshin-light .page-sub,
body.theme-genshin-light .team-role,
body.theme-genshin-light .shop-item-desc,
body.theme-genshin-light .announcement-date
{ color: #454d5e !important; }

body.theme-genshin-dark .lb-name,
body.theme-genshin-dark .lb-points
{ color: #e8e0d0 !important; }

body.theme-nw-light .lb-item,
body.theme-genshin-light .lb-item,
body.theme-nw-light .diary-rank-card,
body.theme-genshin-light .diary-rank-card {
  border-color: rgba(80, 58, 35, 0.16);
  background:
    radial-gradient(circle at 0% 50%, rgba(184, 109, 31, 0.08), transparent 42%),
    linear-gradient(90deg, rgba(255,255,255,0.84), rgba(246,240,226,0.74));
  box-shadow: 0 10px 22px rgba(70,45,20,0.08);
}

body.theme-genshin-light .lb-item,
body.theme-genshin-light .diary-rank-card {
  border-color: rgba(149, 117, 70, 0.22);
  background:
    radial-gradient(circle at 0% 50%, rgba(184, 134, 59, 0.12), transparent 42%),
    linear-gradient(90deg, rgba(255,250,238,0.90), rgba(238,230,210,0.78));
}

body.theme-nw-light .lb-item.top1,
body.theme-genshin-light .lb-item.top1,
body.theme-nw-light .diary-rank-card.top1,
body.theme-genshin-light .diary-rank-card.top1 {
  border-color: rgba(184, 134, 59, 0.52);
  background:
    radial-gradient(circle at 0% 50%, rgba(212,175,55,0.22), transparent 46%),
    linear-gradient(90deg, rgba(255,244,204,0.96), rgba(255,255,255,0.74));
}

body.theme-nw-light .lb-item.top2,
body.theme-genshin-light .lb-item.top2,
body.theme-nw-light .diary-rank-card.top2,
body.theme-genshin-light .diary-rank-card.top2 {
  border-color: rgba(120, 128, 140, 0.36);
  background: linear-gradient(90deg, rgba(226,231,236,0.92), rgba(255,255,255,0.70));
}

body.theme-nw-light .lb-item.top3,
body.theme-genshin-light .lb-item.top3,
body.theme-nw-light .diary-rank-card.top3,
body.theme-genshin-light .diary-rank-card.top3 {
  border-color: rgba(184,115,51,0.38);
  background: linear-gradient(90deg, rgba(239,215,190,0.92), rgba(255,255,255,0.70));
}

body.theme-nw-light .lb-subline,
body.theme-genshin-light .lb-subline,
body.theme-nw-light .diary-rank-sub,
body.theme-genshin-light .diary-rank-sub {
  color: #4f493f;
}

body.theme-nw-light .lb-path-badge,
body.theme-genshin-light .lb-path-badge {
  background: rgba(255,255,255,0.78);
  color: #5d4320;
  border-color: rgba(120, 90, 40, 0.28);
}

/* Genshin Dark — same warm gold-on-deep-purple treatment as the light
   variant above, mirrored in dark tones (was previously unstyled and fell
   back to the default NetWatch-dark look). */
body.theme-genshin-dark .lb-item,
body.theme-genshin-dark .diary-rank-card {
  border-color: rgba(219,177,101,0.18);
  background:
    radial-gradient(circle at 0% 50%, rgba(219,177,101,0.1), transparent 42%),
    linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
}
body.theme-genshin-dark .lb-item.top1,
body.theme-genshin-dark .diary-rank-card.top1 {
  border-color: rgba(219,177,101,0.4);
  background:
    radial-gradient(circle at 0% 50%, rgba(219,177,101,0.2), transparent 46%),
    linear-gradient(90deg, rgba(219,177,101,0.1), transparent);
}
body.theme-genshin-dark .lb-item.top2,
body.theme-genshin-dark .diary-rank-card.top2 {
  border-color: rgba(200,200,210,0.22);
  background: linear-gradient(90deg, rgba(200,200,210,0.07), rgba(255,255,255,0.015));
}
body.theme-genshin-dark .lb-item.top3,
body.theme-genshin-dark .diary-rank-card.top3 {
  border-color: rgba(200,121,65,0.3);
  background: linear-gradient(90deg, rgba(200,121,65,0.1), rgba(255,255,255,0.015));
}
body.theme-genshin-dark .lb-subline,
body.theme-genshin-dark .diary-rank-sub {
  color: #a09880;
}
body.theme-genshin-dark .lb-path-badge {
  background: rgba(255,255,255,0.06);
  color: #e8e0d0;
  border-color: rgba(219,177,101,0.25);
}

.page { display: none; padding: 0 0 10px; position: relative; z-index: 1; }
.page.active { display: block; }

/* ===== ШАПКА СТРАНИЦЫ ===== */
.page-header {
  padding: 14px 16px 10px;
  position: relative;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-border), var(--gold-border), transparent);
}
.page-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--text);
  text-shadow: 1px 0 #cc0022, -1px 0 rgba(0,200,255,0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-title-cn {
  font-size: 11px;
  color: rgba(212,175,55,0.7);
  font-family: serif;
  font-weight: 400;
  letter-spacing: 2px;
}
.page-sub {
  font-size: 9px;
  color: rgba(200,80,80,0.6);
  font-family: monospace;
  letter-spacing: 1px;
  margin-top: 3px;
}

/* ===== КАРТОЧКИ ===== */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 10px 12px;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-border), rgba(212,175,55,0.2), transparent);
}
.card-inner { padding: 12px; }
.card-label {
  font-size: 8px;
  color: rgba(200,80,80,0.85);
  letter-spacing: 2px;
  font-family: monospace;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(200,50,50,0.2), transparent);
}

/* Разделитель с фонариком */
.cn-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 4px;
  font-size: 10px;
  color: rgba(200,80,80,0.75);
  letter-spacing: 1px;
  font-family: monospace;
}
.cn-divider::before { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--red-border)); }
.cn-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--red-border), transparent); }

/* ===== КНОПКИ ===== */
.btn {
  border: none;
  border-radius: var(--btn-radius);
  font-weight: 700;
  cursor: pointer;
  font-family: monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all var(--transition-normal) var(--ease-standard);
}
.btn-primary {
  background: var(--red-dim);
  border: 1px solid var(--red-border);
  color: var(--red);
  padding: 11px;
  font-size: 10px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(200,40,40,0.1), transparent);
  animation: sweep 3s infinite;
}
@keyframes sweep { 0%{left:-100%} 100%{left:100%} }
.btn-gold {
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  padding: 8px 14px;
  font-size: 9px;
}
.btn-sm {
  padding: 5px 10px;
  font-size: 8px;
  border-radius: var(--radius-sm);
}

/* ===== ГЛАВНАЯ ===== */
.main-logo-wrap { text-align: center; padding: 16px 16px 8px; position: relative; }
.main-logo {
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  position: relative;
}
.main-logo::before { content: none; }
.main-logo::after { content: none; }
.main-title {
  font-size: 26px; font-weight: 900; letter-spacing: 6px;
  color: var(--text);
  text-shadow: 2px 0 #cc0022, -2px 0 rgba(0,200,255,0.3);
  position: relative;
}
.main-pinyin { font-size: 10px; color: rgba(212,175,55,0.8); letter-spacing: 3px; font-family: serif; margin-top: 3px; }
.proto-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--red-dim);
  border: 1px solid var(--red-border);
  color: rgba(200,80,80,0.9);
  font-size: 8px; padding: 3px 10px; border-radius: 3px;
  letter-spacing: 1px; margin-top: 6px; font-family: monospace;
}
.stats-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin: 0 12px 4px;
}
.stat-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; text-align: center;
  position: relative; overflow: hidden;
}
.stat-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3), transparent);
}
.stat-cn { font-size: 10px; color: rgba(212,175,55,0.65); font-family: serif; }
.stat-num { font-size: 20px; font-weight: 800; color: var(--gold); }
.stat-lbl { font-size: 7px; color: var(--text3); letter-spacing: 1px; font-family: monospace; margin-top: 1px; }

/* Нейролинк карточка */
.neuro-card { margin: 4px 12px; }
.neuro-status { font-size: 8px; color: var(--red); font-family: monospace; }
.neuro-name { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 2px; }
.neuro-sub { font-size: 9px; color: #888; font-family: monospace; }
.traffic-bar { height: 3px; background: rgba(255,255,255,0.05); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.traffic-fill { height: 100%; background: linear-gradient(90deg, #8b0000, var(--gold)); border-radius: 2px; width: 0%; transition: width 1s ease; }

/* Импланты */
.implant-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.implant-row:last-child { border: none; }
.implant-icon {
  width: 32px; height: 32px;
  background: var(--purple-dim);
  border: 1px solid var(--purple-border);
  border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.implant-icon.legendary { background: var(--red-dim); border-color: var(--red-border); }
.implant-cn { font-size: 10px; color: #ccc; font-family: monospace; }
.implant-py { font-size: 9px; color: rgba(212,175,55,0.7); font-family: serif; font-style: italic; margin-top: 1px; }
.implant-sub { font-size: 9px; color: #aaa; margin-top: 1px; }
.implant-dur { margin-left: auto; display: flex; gap: 3px; }
.dur-dot { width: 5px; height: 5px; border-radius: 50%; }
.dur-dot.on { background: rgba(155,89,182,0.7); }
.dur-dot.on-r { background: rgba(200,40,40,0.8); }
.dur-dot.off { background: rgba(255,255,255,0.08); }

/* Конфиг */
.config-box {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 10px;
  font-size: 9px; font-family: monospace;
  color: rgba(212,175,55,0.7);
  word-break: break-all; margin-top: 8px;
  display: none;
}

/* ===== РАСПИСАНИЕ ===== */
.schedule-day {
  font-size: 9px; color: rgba(200,50,50,0.6);
  letter-spacing: 2px; font-family: monospace;
  padding: 10px 16px 4px;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.schedule-day::after { content: ''; flex:1; height:1px; background: linear-gradient(90deg, var(--red-border), transparent); }
.schedule-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.schedule-time {
  font-size: 12px; font-weight: 700; color: var(--gold);
  font-family: monospace; min-width: 42px;
}
.schedule-subject { font-size: 14px; font-weight: 600; color: var(--text); }
.schedule-location { font-size: 12px; color: var(--text2); margin-top: 2px; }

/* ===== РЕЙТИНГ ===== */
.my-rank-card {
  background: linear-gradient(135deg, rgba(180,20,20,0.08), rgba(212,175,55,0.05));
  border: 1px solid var(--red-border);
  border-radius: 10px; margin: 10px 12px;
  padding: 14px; text-align: center; position: relative; overflow: hidden;
}
.my-rank-card::before {
  content: '排名';
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 48px; color: rgba(212,175,55,0.04); font-family: serif;
  pointer-events: none;
}
.my-points-big { font-size: 36px; font-weight: 900; color: var(--gold); }
.my-rank-sub { font-size: 10px; color: var(--text2); margin-top: 4px; font-family: monospace; }
/* ── Alpha Boss Block ─────────────────────────────── */
.alpha-boss-block {
  margin: 0 12px 4px;
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,0.30);
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 50%, rgba(212,175,55,0.12), transparent 50%),
    linear-gradient(135deg, rgba(180,20,20,0.07), rgba(255,255,255,0.02));
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.alpha-boss-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px;
}
.alpha-boss-rank {
  flex: 0 0 auto;
  width: 28px;
  font-size: 18px;
  font-weight: 900;
  font-family: serif;
  color: var(--gold);
  text-align: center;
  text-shadow: 0 0 12px rgba(212,175,55,0.5);
}
.alpha-boss-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.28);
  background: radial-gradient(circle at 50% 30%, rgba(212,175,55,0.14), rgba(0,0,0,0.2));
  display: flex;
  align-items: center;
  justify-content: center;
}
.alpha-boss-info {
  flex: 1;
  min-width: 0;
}
.alpha-boss-kicker {
  font-size: 7px;
  font-family: monospace;
  letter-spacing: 1px;
  color: rgba(212,175,55,0.50);
}
.alpha-boss-name {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(212,175,55,0.30);
}
.alpha-boss-sub {
  margin-top: 2px;
  font-size: 8px;
  color: var(--text3);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alpha-boss-pts {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  font-family: monospace;
  color: rgba(212,175,55,0.70);
  white-space: nowrap;
}
.alpha-boss-raid-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  background: rgba(180,20,20,0.10);
  border: none;
  border-top: 1px solid rgba(180,20,20,0.20);
  color: #d97070;
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: background 0.15s;
  box-sizing: border-box;
}
.alpha-boss-raid-btn:active {
  background: rgba(180,20,20,0.20);
}
.alpha-boss-raid-cost {
  flex: 0 0 auto;
  color: rgba(212,175,55,0.60);
  font-size: 9px;
}
.lb-leaders-label {
  margin: 2px 12px 4px;
  padding: 5px 0;
  text-align: center;
  font-size: 9px;
  font-family: monospace;
  color: rgba(212,175,55,0.38);
  letter-spacing: 1.5px;
  border-top: 1px solid rgba(212,175,55,0.09);
  border-bottom: 1px solid rgba(212,175,55,0.09);
}
/* ===== PROFILE CARD v3 ===== */
.profile-card {
  margin: 0 12px 8px;
  padding: 14px;
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(212,175,55,0.09), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(180,20,20,0.06), transparent 52%),
    linear-gradient(155deg, rgba(255,255,255,0.032), rgba(10,10,28,0.6));
  overflow: hidden;
  position: relative;
}
.profile-card-home {
  margin-top: 8px;
  margin-bottom: 10px;
  border-color: rgba(212,175,55,0.26);
}

.profile-holo-ring {
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background:
    conic-gradient(
      from 0deg,
      rgba(220, 30, 48, 0.95),
      rgba(232, 190, 80, 0.88),
      rgba(128, 70, 255, 0.78),
      rgba(196, 70, 255, 0.82),
      rgba(220, 30, 48, 0.95)
    );
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
  animation: profileHoloSpin 7.5s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.profile-holo-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 18% 0%, rgba(255,255,255,0.65), transparent 32%);
  opacity: 0.28;
}

.profile-holo-ring { display: none; }
body.is-admin .profile-holo-ring {
  display: block;
  opacity: 0.64;
  filter: drop-shadow(0 0 10px rgba(220, 30, 48, 0.24));
  animation-duration: 5.8s;
}
body.is-architect .profile-holo-ring {
  display: block;
  opacity: 0.22;
  filter: drop-shadow(0 0 14px rgba(0, 255, 136, 0.35));
  animation: none;
}

@keyframes profileHoloSpin {
  to { transform: rotate(360deg); }
}

/* Corner brackets */
.profile-card-home::before,
.profile-card-home::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  pointer-events: none;
  z-index: 0;
}
.profile-card-home::before {
  top: 6px; left: 6px;
  border-top: 1px solid rgba(212,175,55,0.45);
  border-left: 1px solid rgba(212,175,55,0.45);
  border-radius: 3px 0 0 0;
}
.profile-card-home::after {
  bottom: 6px; right: 6px;
  border-bottom: 1px solid rgba(212,175,55,0.45);
  border-right: 1px solid rgba(212,175,55,0.45);
  border-radius: 0 0 3px 0;
}

/* Scan line */
.profile-scan-line {
  display: none;
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.5) 40%, rgba(212,175,55,0.7) 50%, rgba(212,175,55,0.5) 60%, transparent 100%);
  top: 0;
  animation: profileScanDown 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes profileScanDown {
  0%   { top: 0%; opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* Admin badge on avatar */
.profile-admin-badge {
  display: none;
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  text-align: center;
  background: rgba(180,20,20,0.88);
  color: #fff;
  font-size: 7px;
  font-family: monospace;
  letter-spacing: 0.5px;
  padding: 2px 0;
  font-weight: 700;
}
body.is-admin .profile-card-home .profile-admin-badge { display: block; }

/* Admin card: red glow + border */
body.is-admin .profile-card-home {
  border-color: rgba(200,30,30,0.55);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(200,30,30,0.12), transparent 48%),
    radial-gradient(ellipse at 100% 100%, rgba(212,175,55,0.07), transparent 52%),
    linear-gradient(155deg, rgba(255,255,255,0.032), rgba(20,5,5,0.7));
  box-shadow: 0 0 28px rgba(180,20,20,0.14), inset 0 0 20px rgba(180,20,20,0.06);
}
body.is-admin .profile-card-home::before {
  border-color: rgba(200,30,30,0.7);
}
body.is-admin .profile-card-home::after {
  border-color: rgba(200,30,30,0.7);
}
body.is-admin .profile-scan-line {
  display: block;
  background: linear-gradient(90deg, transparent, rgba(220,40,40,0.6) 40%, rgba(255,60,60,0.9) 50%, rgba(220,40,40,0.6) 60%, transparent);
}
body.is-admin .profile-card-kicker {
  color: rgba(255,80,80,0.85);
}

/* Avatar */
.profile-avatar-wrap,
.lb-avatar {
  flex: 0 0 auto;
  border-radius: 16px;
  border: 1px solid rgba(212,175,55,0.28);
  background:
    radial-gradient(circle at 50% 30%, rgba(212,175,55,0.14), transparent 58%),
    rgba(255,255,255,0.04);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.profile-avatar-wrap { width: 72px; height: 72px; overflow: hidden; }
.profile-avatar-img, .lb-avatar-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.profile-avatar-fallback, .lb-avatar-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--gold);
  font-family: monospace; font-weight: 900;
}
.profile-avatar-fallback { font-size: 26px; }

/* Main content layout */
.profile-card-main {
  width: 100%; min-width: 0; position: relative; z-index: 1;
}
.profile-identity-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.profile-identity-copy {
  min-width: 0;
  flex: 1;
  padding-top: 2px;
}
.profile-card-kicker {
  font-size: 7px;
  color: rgba(212,175,55,0.68);
  font-family: monospace;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.profile-card-name {
  margin-top: 4px;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

/* Badge row: rank / place / path */
.profile-badge-row {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  flex-wrap: wrap;
}
.profile-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-family: monospace;
  letter-spacing: 0.6px;
  font-weight: 700;
  border: 1px solid transparent;
}
.profile-badge-rank {
  background: rgba(212,175,55,0.14);
  border-color: rgba(212,175,55,0.35);
  color: var(--gold);
}
.profile-badge-place {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: var(--text2);
}
.profile-badge-path {
  background: rgba(180,20,20,0.12);
  border-color: rgba(180,20,20,0.28);
  color: rgba(255,100,100,0.85);
}

/* Status line */
.profile-status-line {
  margin-top: 10px;
  padding: 5px 8px;
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  background: rgba(0,0,0,0.12);
  color: rgba(212,175,55,0.7);
  font-size: 8px;
  font-family: monospace;
  letter-spacing: 0.7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep old mini-grid hidden if still present */
.profile-mini-grid { display: none; }
.profile-mini-stat, .profile-mini-stat span, .profile-mini-stat strong { display: none; }
.profile-showcase {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(212,175,55,0.20);
  border-radius: 11px;
  background:
    radial-gradient(circle at 0% 50%, var(--gold-dim), transparent 52%),
    rgba(255,255,255,0.028);
}
.profile-showcase-icon {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(212,175,55,0.18);
  background: rgba(212,175,55,0.06);
  color: var(--gold);
  font-size: 18px;
  font-family: serif;
  font-weight: 900;
  transition: border-color 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;
}
.profile-showcase-icon[data-kind="implant"] {
  border-color: rgba(255, 80, 80, 0.35);
  background: rgba(255, 54, 54, 0.09);
  color: #ff8080;
  box-shadow: 0 0 10px rgba(255, 54, 54, 0.12) inset;
}
.profile-showcase-icon[data-kind="card"] {
  border-color: rgba(212,175,55,0.40);
  background: rgba(212,175,55,0.11);
  color: var(--gold);
  box-shadow: 0 0 10px rgba(212,175,55,0.14) inset;
}
.profile-showcase-icon[data-source="manual"]::after {
  content: '★';
  position: absolute;
  bottom: -1px;
  right: 1px;
  font-size: 6px;
  color: rgba(212,175,55,0.7);
  line-height: 1;
  pointer-events: none;
}
.profile-showcase-copy {
  min-width: 0;
  flex: 1;
}
.profile-showcase-copy span {
  display: block;
  color: var(--text3);
  font-size: 7px;
  font-family: monospace;
  letter-spacing: 1px;
}
.profile-showcase-copy strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-showcase-copy em {
  display: block;
  margin-top: 1px;
  color: var(--gold);
  font-size: 8px;
  font-family: monospace;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-stat-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}
.profile-stat-grid div {
  min-width: 0;
  padding: 5px 3px;
  border-radius: 8px;
  background: rgba(255,255,255,0.022);
  border: 1px solid rgba(255,255,255,0.055);
  text-align: center;
}
.profile-stat-grid span {
  display: block;
  color: var(--text3);
  font-size: 7px;
  line-height: 1;
}
.profile-stat-grid strong {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-size: 10px;
  font-family: monospace;
}
.more-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.more-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.more-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.more-stat-num {
  font-size: 22px;
  font-weight: 900;
  font-family: monospace;
  line-height: 1;
}
.more-stat-lbl {
  font-size: 7px;
  font-family: monospace;
  letter-spacing: 0.8px;
  color: var(--text3);
  text-align: center;
  line-height: 1.5;
}
.more-stat-lbl span {
  color: rgba(212,175,55,0.5);
  font-size: 8px;
}

.profile-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.profile-mini-btn {
  border: 1px solid rgba(212,175,55,0.24);
  background: var(--gold-dim);
  color: var(--gold);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 8px;
  font-family: monospace;
  letter-spacing: 0.8px;
  cursor: pointer;
}
.profile-mini-btn.ghost {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text2);
}
.profile-showcase-modal {
  position: fixed;
  inset: 0;
  z-index: 6200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 12px calc(18px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 50% 18%, var(--gold-dim), transparent 34%),
    rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
}
.profile-showcase-panel {
  width: min(100%, 430px);
  max-height: min(72vh, 560px);
  overflow: hidden;
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, var(--gold-dim), transparent 38%),
    linear-gradient(145deg, rgba(12,10,16,0.96), rgba(20,12,15,0.94));
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
.profile-showcase-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.profile-showcase-panel-title {
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}
.profile-showcase-close {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}
.profile-showcase-options {
  max-height: calc(min(72vh, 560px) - 62px);
  overflow-y: auto;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
}
.profile-showcase-option {
  width: 100%;
  margin-bottom: 7px;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(212,175,55,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.profile-showcase-option:hover {
  border-color: rgba(212,175,55,0.28);
  background: rgba(212,175,55,0.075);
}
.profile-showcase-option-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(212,175,55,0.18);
  background: rgba(212,175,55,0.06);
  color: var(--gold);
  font-size: 17px;
  font-family: serif;
  font-weight: 900;
}
.profile-showcase-option-copy {
  min-width: 0;
  flex: 1;
}
.profile-showcase-option-copy strong,
.profile-showcase-option-copy span,
.profile-showcase-option-copy em {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-showcase-option-copy span {
  color: var(--text3);
  font-size: 7px;
  font-family: monospace;
  letter-spacing: 1px;
}
.profile-showcase-option-copy strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 11px;
}
.profile-showcase-option-copy em {
  margin-top: 2px;
  color: var(--gold);
  font-size: 8px;
  font-family: monospace;
  font-style: normal;
}
.profile-frame-swatch {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--frame-gradient, conic-gradient(#888,#444,#888));
  box-shadow: 0 0 8px var(--frame-glow, transparent);
}
.profile-frame-swatch.frame-none {
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(255,255,255,0.18);
  box-shadow: none;
}
.profile-showcase-option.locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.profile-showcase-option.equipped {
  border-color: rgba(212,175,55,0.5);
  background: rgba(212,175,55,0.1);
}
.profile-frame-lock {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--text3);
}

#profileShowcaseOptions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.profile-showcase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 12px;
  border: 1px solid rgba(212,175,55,0.16);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  color: var(--text);
  text-align: center;
  cursor: pointer;
}
.profile-showcase-card:hover {
  background: rgba(212,175,55,0.08);
}
.profile-showcase-card-art {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
  font-size: 22px;
  font-family: serif;
  overflow: hidden;
}
.profile-showcase-card-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.profile-showcase-card-label {
  font-size: 7px;
  font-family: monospace;
  letter-spacing: 1px;
  color: var(--text3);
}
.profile-showcase-card-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.profile-showcase-card-detail {
  font-size: 8px;
  color: var(--text3);
  line-height: 1.3;
}
.profile-showcase-card-equipped {
  margin-top: 2px;
  font-size: 7px;
  font-family: monospace;
  color: var(--gold);
}
.profile-showcase-card.equipped {
  border-color: rgba(212,175,55,0.55);
  background: rgba(212,175,55,0.1);
}
.profile-showcase-card-gold .profile-showcase-card-art {
  border: 1px solid rgba(192,160,64,0.5);
  box-shadow: inset 0 0 16px rgba(255,200,0,0.08), 0 0 10px rgba(192,160,64,0.16);
}
.profile-showcase-card-purple .profile-showcase-card-art {
  border: 1px solid rgba(155,89,182,0.5);
  box-shadow: inset 0 0 16px rgba(155,89,182,0.08), 0 0 10px rgba(155,89,182,0.16);
}
.profile-showcase-card-blue .profile-showcase-card-art {
  border: 1px solid rgba(74,122,204,0.46);
  box-shadow: inset 0 0 16px rgba(74,122,204,0.07), 0 0 10px rgba(74,122,204,0.14);
}
.profile-showcase-card-red .profile-showcase-card-art {
  border: 1px solid rgba(204,51,51,0.55);
  box-shadow: inset 0 0 16px rgba(204,51,51,0.08), 0 0 10px rgba(204,51,51,0.16);
}
.profile-showcase-card-auto .profile-showcase-card-art {
  border: 1px dashed rgba(255,255,255,0.18);
}

.profile-badge-rank {
  cursor: pointer;
}
.rank-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
}
.rank-breakdown-label em {
  font-size: 9px;
  color: var(--text3);
  font-style: normal;
}
.rank-breakdown-value {
  color: var(--gold);
  font-family: monospace;
  font-weight: 700;
  flex: 0 0 auto;
}
.rank-breakdown-total {
  padding: 4px 4px 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-family: monospace;
}
.rank-breakdown-total strong {
  color: var(--gold);
}
.rank-breakdown-progress {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.rank-breakdown-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-family: monospace;
  color: var(--text3);
  margin-bottom: 4px;
}
.rank-breakdown-progress-bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.rank-breakdown-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #f0d060);
}
.rank-breakdown-progress-note {
  margin-top: 6px;
  font-size: 10px;
  color: var(--text3);
}
.lb-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.045);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 50%, rgba(212,175,55,0.055), transparent 38%),
    linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
  animation: lb-fadein 0.4s ease both;
  overflow: hidden;
}
.lb-item::after {
  content: 'OP';
  position: absolute;
  right: 10px;
  top: -2px;
  color: rgba(212,175,55,0.045);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  pointer-events: none;
}
.lb-item.me {
  background: rgba(212,175,55,0.06);
  border-left: 2px solid rgba(212,175,55,0.4);
}
.lb-item.top1 {
  border-color: rgba(212,175,55,0.26);
  background:
    radial-gradient(circle at 0% 50%, rgba(212,175,55,0.13), transparent 42%),
    linear-gradient(90deg, rgba(212,175,55,0.08), transparent);
}
.lb-item.top2 {
  border-color: rgba(210,210,210,0.18);
  background: linear-gradient(90deg, rgba(180,180,180,0.06), rgba(255,255,255,0.012));
}
.lb-item.top3 {
  border-color: rgba(184,115,51,0.18);
  background: linear-gradient(90deg, rgba(184,115,51,0.06), rgba(255,255,255,0.012));
}
.lb-rank {
  position: relative;
  z-index: 1;
  font-size: 16px;
  min-width: 28px;
  text-align: center;
}
.lb-rank-change {
  display: block;
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: 0;
}
.lb-rank-change.up { color: #2ecc71; }
.lb-rank-change.down { color: #e74c3c; }
.lb-avatar {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 11px;
}
.lb-avatar-fallback {
  font-size: 13px;
}
.lb-name {
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  flex: 1;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lb-points {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  font-family: monospace;
  white-space: nowrap;
}
/* Top-3 avatar frames — CSS-only "mini achievement" cosmetics */
.lb-item.top1 .lb-avatar,
.lb-item.top2 .lb-avatar,
.lb-item.top3 .lb-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.lb-item.top1 .lb-avatar::before,
.lb-item.top2 .lb-avatar::before,
.lb-item.top3 .lb-avatar::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 50%;
  background: var(--lb-frame-gradient);
  box-shadow: 0 0 12px var(--lb-frame-glow);
  animation: lb-frame-spin 4s linear infinite;
}
.lb-item.top1 .lb-avatar { --lb-frame-gradient: conic-gradient(from 0deg, #d4af37, #fff3b0, #d4af37, #fff3b0, #d4af37); --lb-frame-glow: rgba(212,175,55,0.55); }
.lb-item.top2 .lb-avatar { --lb-frame-gradient: conic-gradient(from 0deg, #b0b0b0, #f0f0f0, #b0b0b0, #f0f0f0, #b0b0b0); --lb-frame-glow: rgba(200,200,200,0.4); }
.lb-item.top3 .lb-avatar { --lb-frame-gradient: conic-gradient(from 0deg, #b87333, #e8a050, #b87333, #e8a050, #b87333); --lb-frame-glow: rgba(184,115,51,0.4); }
.lb-item.top1 .lb-avatar-img,
.lb-item.top1 .lb-avatar-fallback,
.lb-item.top2 .lb-avatar-img,
.lb-item.top2 .lb-avatar-fallback,
.lb-item.top3 .lb-avatar-img,
.lb-item.top3 .lb-avatar-fallback {
  border-radius: 50%;
}
.lb-item.top1 .lb-avatar-fallback,
.lb-item.top2 .lb-avatar-fallback,
.lb-item.top3 .lb-avatar-fallback {
  font-size: 18px;
}
.lb-item.top1 .lb-avatar-fallback { color: #d4af37; }
.lb-item.top2 .lb-avatar-fallback { color: #d8d8d8; }
.lb-item.top3 .lb-avatar-fallback { color: #e8a050; }

/* Equipped avatar frames — unlockable cosmetic "mini-achievements" */
.has-frame {
  border-radius: 50% !important;
  overflow: visible !important;
}
.has-frame::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 50%;
  background: var(--frame-gradient);
  box-shadow: 0 0 10px var(--frame-glow);
  animation: lb-frame-spin 4s linear infinite;
}
.has-frame .lb-avatar-img,
.has-frame .lb-avatar-fallback,
.has-frame .profile-avatar-img,
.has-frame .profile-avatar-fallback {
  border-radius: 50%;
}
.frame-bronze    { --frame-gradient: conic-gradient(from 0deg, #b87333, #e8a050, #b87333, #e8a050, #b87333); --frame-glow: rgba(184,115,51,0.4); }
.frame-silver    { --frame-gradient: conic-gradient(from 0deg, #b0b0b0, #f0f0f0, #b0b0b0, #f0f0f0, #b0b0b0); --frame-glow: rgba(200,200,200,0.4); }
.frame-gold      { --frame-gradient: conic-gradient(from 0deg, #d4af37, #fff3b0, #d4af37, #fff3b0, #d4af37); --frame-glow: rgba(212,175,55,0.55); }
.frame-diamond   { --frame-gradient: conic-gradient(from 0deg, #7fdbff, #ffffff, #7fdbff, #ffffff, #7fdbff); --frame-glow: rgba(127,219,255,0.55); }
.frame-dragon    { --frame-gradient: conic-gradient(from 0deg, #cc2200, #ff6644, #cc2200, #ff6644, #cc2200); --frame-glow: rgba(204,34,0,0.55); }
.frame-netwatch-legend { --frame-gradient: conic-gradient(from 0deg, #00fff7, #0a3d3d, #00fff7, #0a3d3d, #00fff7); --frame-glow: rgba(0,255,247,0.45); }
.frame-zhongli   { --frame-gradient: conic-gradient(from 0deg, #d4af37, #5a3e1b, #d4af37, #5a3e1b, #d4af37); --frame-glow: rgba(212,175,55,0.45); }
.frame-raider    { --frame-gradient: conic-gradient(from 0deg, #ff8800, #ff3300, #ff8800, #ff3300, #ff8800); --frame-glow: rgba(255,102,0,0.45); }
.frame-scholar   { --frame-gradient: conic-gradient(from 0deg, #3498db, #ffffff, #3498db, #ffffff, #3498db); --frame-glow: rgba(52,152,219,0.45); }
.frame-path-netwatch { --frame-gradient: conic-gradient(from 0deg, #cc2200, #330000, #cc2200, #330000, #cc2200); --frame-glow: rgba(204,34,0,0.35); }
.frame-path-genshin  { --frame-gradient: conic-gradient(from 0deg, #9b59b6, #e91e8c, #9b59b6, #e91e8c, #9b59b6); --frame-glow: rgba(155,89,182,0.4); }
.frame-bronze .lb-avatar-fallback, .frame-bronze .profile-avatar-fallback { color: #e8a050; }
.frame-silver .lb-avatar-fallback, .frame-silver .profile-avatar-fallback { color: #d8d8d8; }
.frame-gold .lb-avatar-fallback, .frame-gold .profile-avatar-fallback { color: #fff3b0; }
.frame-diamond .lb-avatar-fallback, .frame-diamond .profile-avatar-fallback { color: #7fdbff; }
.frame-dragon .lb-avatar-fallback, .frame-dragon .profile-avatar-fallback { color: #ff6644; }
.frame-netwatch-legend .lb-avatar-fallback, .frame-netwatch-legend .profile-avatar-fallback { color: #00fff7; }
.frame-zhongli .lb-avatar-fallback, .frame-zhongli .profile-avatar-fallback { color: #d4af37; }
.frame-raider .lb-avatar-fallback, .frame-raider .profile-avatar-fallback { color: #ff8800; }
.frame-scholar .lb-avatar-fallback, .frame-scholar .profile-avatar-fallback { color: #3498db; }
.frame-path-netwatch .lb-avatar-fallback, .frame-path-netwatch .profile-avatar-fallback { color: #ff6644; }
.frame-path-genshin .lb-avatar-fallback, .frame-path-genshin .profile-avatar-fallback { color: #e91e8c; }
@keyframes lb-frame-spin {
  to { transform: rotate(360deg); }
}

/* "Титул дня" (title_player) — full-row leaderboard highlight, purely cosmetic */
.lb-item.title-glow {
  border-color: var(--title-glow-color, rgba(255,255,255,0.2));
  box-shadow: 0 0 16px var(--title-glow-shadow, transparent), inset 0 0 24px var(--title-glow-shadow, transparent);
  background:
    linear-gradient(90deg, var(--title-glow-tint, transparent), transparent 60%),
    radial-gradient(circle at 0% 50%, rgba(212,175,55,0.055), transparent 38%),
    linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
}
.lb-item.title-cyan    { --title-glow-color: rgba(0,255,247,0.55); --title-glow-shadow: rgba(0,255,247,0.28); --title-glow-tint: rgba(0,255,247,0.12); }
.lb-item.title-gold    { --title-glow-color: rgba(212,175,55,0.6);  --title-glow-shadow: rgba(212,175,55,0.3);  --title-glow-tint: rgba(212,175,55,0.14); }
.lb-item.title-violet  { --title-glow-color: rgba(155,89,182,0.6); --title-glow-shadow: rgba(155,89,182,0.3); --title-glow-tint: rgba(155,89,182,0.14); }
.lb-item.title-crimson { --title-glow-color: rgba(204,34,0,0.6);   --title-glow-shadow: rgba(204,34,0,0.3);   --title-glow-tint: rgba(204,34,0,0.14); }
.lb-item.title-emerald { --title-glow-color: rgba(46,204,113,0.6); --title-glow-shadow: rgba(46,204,113,0.3); --title-glow-tint: rgba(46,204,113,0.14); }

.title-style-swatch {
  border-radius: 10px !important;
}
.title-style-swatch.title-cyan    { background: linear-gradient(135deg, #00fff7, #0a3d3d); box-shadow: 0 0 8px rgba(0,255,247,0.45); }
.title-style-swatch.title-gold    { background: linear-gradient(135deg, #d4af37, #fff3b0); box-shadow: 0 0 8px rgba(212,175,55,0.45); }
.title-style-swatch.title-violet  { background: linear-gradient(135deg, #9b59b6, #e91e8c); box-shadow: 0 0 8px rgba(155,89,182,0.45); }
.title-style-swatch.title-crimson { background: linear-gradient(135deg, #cc2200, #ff6644); box-shadow: 0 0 8px rgba(204,34,0,0.45); }
.title-style-swatch.title-emerald { background: linear-gradient(135deg, #2ecc71, #145a32); box-shadow: 0 0 8px rgba(46,204,113,0.45); }
.lb-progress {
  height: 2px; border-radius: 1px;
  margin-top: 3px; opacity: 0.5;
}
.lb-name-wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lb-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.lb-path-badge {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(212,175,55,0.16);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(212,175,55,0.06);
  font-size: 7px;
  font-family: monospace;
  letter-spacing: 0.8px;
}
.lb-path-badge.netwatch {
  color: #ff6666;
  border-color: rgba(204,34,34,0.24);
  background: rgba(204,34,34,0.08);
}
.lb-path-badge.genshin {
  color: #d6aa4a;
  border-color: rgba(214,170,74,0.24);
  background: rgba(214,170,74,0.09);
}
.lb-subline {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--text3);
  font-size: 7px;
  font-family: monospace;
  letter-spacing: 0.7px;
  white-space: nowrap;
  overflow: hidden;
}
.lb-subline span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-sub { font-size: 9px; color: var(--text3); font-family: monospace; margin-top: 1px; }

@keyframes lb-fadein {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Свечение топ-3 */
.lb-item.top1 .lb-rank { text-shadow: 0 0 12px rgba(212,175,55,0.8); }
.lb-item.top2 .lb-rank { text-shadow: 0 0 10px rgba(200,200,200,0.6); }
.lb-item.top3 .lb-rank { text-shadow: 0 0 10px rgba(184,115,51,0.6); }
/* Разделитель топ-3 */
.lb-divider {
  text-align: center; font-size: 8px; color: var(--text3);
  font-family: monospace; letter-spacing: 2px;
  padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin: 2px 0;
}

/* ===== МАГАЗИН ===== */
.diary-rank-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 7px 0;
  padding: 10px;
  border: 1px solid rgba(212,175,55,0.12);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 50%, rgba(212,175,55,0.06), transparent 40%),
    linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  overflow: hidden;
  animation: lb-fadein 0.4s ease both;
}
.diary-rank-card::after {
  content: 'DIARY';
  position: absolute;
  right: 8px;
  top: -2px;
  color: rgba(212,175,55,0.045);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 2px;
  pointer-events: none;
}
.diary-rank-card.me {
  border-left: 2px solid rgba(212,175,55,0.42);
  background: rgba(212,175,55,0.06);
}
.diary-rank-card.top1 {
  border-color: rgba(212,175,55,0.28);
  background:
    radial-gradient(circle at 0% 50%, rgba(212,175,55,0.14), transparent 42%),
    linear-gradient(90deg, rgba(212,175,55,0.08), rgba(255,255,255,0.012));
}
.diary-rank-card.top2 {
  border-color: rgba(210,210,210,0.18);
}
.diary-rank-card.top3 {
  border-color: rgba(184,115,51,0.20);
}
.diary-rank-card .lb-avatar {
  width: 44px;
  height: 44px;
  border-width: 1.5px;
  border-color: rgba(212,175,55,0.45);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 10px rgba(212,175,55,0.12);
}
.diary-rank-card .lb-avatar-fallback {
  font-size: 17px;
}
.diary-rank-card.top1 .lb-avatar {
  border-color: #d4af37;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 12px rgba(212,175,55,0.5);
}
.diary-rank-card.top2 .lb-avatar {
  border-color: #c8c8c8;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 12px rgba(200,200,200,0.4);
}
.diary-rank-card.top3 .lb-avatar {
  border-color: #b87333;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 12px rgba(184,115,51,0.4);
}
.diary-rank-card.top1 .lb-avatar-fallback { color: #d4af37; }
.diary-rank-card.top2 .lb-avatar-fallback { color: #d8d8d8; }
.diary-rank-card.top3 .lb-avatar-fallback { color: #e8a050; }
.diary-rank-place {
  position: relative;
  z-index: 1;
  min-width: 28px;
  text-align: center;
  font-size: 16px;
}
.diary-rank-main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.diary-rank-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.diary-rank-name {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diary-rank-sub {
  margin-top: 3px;
  display: flex;
  gap: 5px;
  color: var(--text3);
  font-size: 7px;
  font-family: monospace;
  letter-spacing: 0.7px;
  white-space: nowrap;
  overflow: hidden;
}
.diary-rank-sub span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.diary-rank-score {
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-size: 13px;
  font-family: monospace;
  font-weight: 800;
  white-space: nowrap;
}
.diary-rank-note {
  margin: 0 0 8px;
  padding: 9px 10px;
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 12px;
  background: rgba(212,175,55,0.08);
  color: var(--gold);
  font-family: monospace;
  font-size: 9px;
  line-height: 1.45;
}

.shop-header-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px 0;
}
.shop-balance { font-size: 9px; color: var(--text3); font-family: monospace; }
.shop-balance span { color: var(--gold); font-weight: 700; }
.shop-reset-timer {
  margin: 4px 14px 0;
  font-size: 9px; color: var(--text3); font-family: monospace;
  text-align: right;
}
.shop-reset-timer span { color: var(--gold); font-weight: 700; }
.frozen-banner {
  background: rgba(180,20,20,0.1);
  border: 1px solid var(--red-border);
  border-radius: 6px; margin: 8px 12px;
  padding: 8px 12px; font-size: 10px; color: var(--red);
  font-family: monospace; display: none;
}
.shop-subtabs {
  display: flex; gap: 6px; padding: 8px 12px;
}
#page-shop .shop-subtabs {
  flex-wrap: wrap;
}
#page-shop .shop-subtabs .subtab {
  flex: 1 1 calc(50% - 6px);
  min-width: calc(50% - 6px);
}
#page-shop .shop-contracts-tab {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--border));
  color: var(--gold);
  background: rgba(212,175,55,0.06);
}
.subtab {
  flex: 1; padding: 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent; color: var(--text3);
  font-size: 9px; font-weight: 600; cursor: pointer;
  font-family: monospace; letter-spacing: 1px;
}
.subtab.active { background: var(--red-dim); border-color: var(--red-border); color: var(--red); }
.shop-cat {
  font-size: 11px; color: rgba(220,100,100,0.9);
  letter-spacing: 1px; font-family: monospace;
  padding: 10px 14px 4px;
  display: flex; align-items: center; gap: 6px;
  font-weight: 700;
}
.shop-cat .cn { font-size: 13px; color: rgba(212,175,55,0.7); font-family: serif; }
.shop-cat::after { content: ''; flex:1; height:1px; background: linear-gradient(90deg, var(--red-border), transparent); }
.shop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.shop-item.unavailable { opacity: 0.4; }
.shop-item-icon {
  width: 36px; height: 36px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.shop-item-name { font-size: 13px; color: var(--text); font-weight: 600; }
.shop-item-cn { font-size: 11px; color: rgba(212,175,55,0.75); font-family: serif; }
.shop-item-desc { font-size: 11px; color: var(--text2); margin-top: 1px; }
.shop-item-limit { font-size: 10px; color: var(--text3); margin-top: 1px; font-family: monospace; }
.shop-item-buy {
  margin-left: auto; flex-shrink: 0;
  background: var(--gold-dim); border: 1px solid var(--gold-border);
  color: var(--gold); font-size: 9px; padding: 5px 8px;
  border-radius: var(--radius-sm); font-weight: 700; cursor: pointer;
  font-family: monospace; white-space: nowrap;
}
.shop-item-buy:disabled { opacity: 0.3; cursor: not-allowed; }

/* === SHOP POLISH === */
.shop-item { transition: background var(--transition-normal) var(--ease-standard), transform var(--transition-normal) var(--ease-standard), opacity var(--transition-slow) var(--ease-standard); }
.shop-item.sold-out {
  opacity: 0.55;
  background: rgba(180,20,20,0.025);
}
.shop-item.sold-out .shop-item-icon {
  filter: grayscale(0.65);
  opacity: 0.7;
}

/* Limit indicator variants */
.shop-item-limit.limit-soldout { color: var(--red); font-weight: 600; }
.shop-item-limit.limit-low {
  color: #e8932a;
  font-weight: 700;
  animation: limitLowPulse 1.6s ease-in-out infinite;
}
.shop-item-limit.limit-medium { color: var(--gold); }
@keyframes limitLowPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; text-shadow: 0 0 8px rgba(232,147,42,0.5); }
}

/* Soldout / unavailable badges (replace buy button) */
.shop-item-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-family: monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  text-align: center;
}
.shop-item-badge.soldout {
  color: rgba(204,68,68,0.9);
  background: rgba(180,20,20,0.1);
  border: 1px solid rgba(180,20,20,0.32);
}
.shop-item-badge.unavailable {
  color: var(--text3);
  background: rgba(120,120,120,0.08);
  border: 1px solid rgba(120,120,120,0.2);
}

/* Cannot afford button — shows deficit */
.shop-item-buy.no-money {
  background: transparent;
  border-color: rgba(200,80,80,0.3);
  color: rgba(200,80,80,0.75);
  cursor: not-allowed;
  opacity: 0.85;
}

/* Purchase animation on item card */
.shop-item.shop-item-bought {
  animation: shopItemBought 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes shopItemBought {
  0%   { transform: scale(1); background: transparent; box-shadow: none; }
  25%  { transform: scale(0.97); background: rgba(40,200,100,0.1); }
  55%  { transform: scale(1.025); background: rgba(40,200,100,0.18); box-shadow: 0 0 22px rgba(40,200,100,0.32); }
  100% { transform: scale(1); background: transparent; box-shadow: none; }
}

/* Sparkles spawned around the icon on purchase */
.shop-item-icon { position: relative; }
.shop-sparkle {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 12px;
  color: #32d872;
  pointer-events: none;
  animation: shopSparkle 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
  text-shadow: 0 0 6px rgba(50,216,114,0.7);
}
@keyframes shopSparkle {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  35%  { opacity: 1; transform: translate(calc(-50% + var(--sx) * 0.55), calc(-50% + var(--sy) * 0.55)) scale(1.05); }
  100% { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0.5); opacity: 0; }
}

.shop-command-card {
  position: relative;
  margin: 6px 12px 10px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--gold-border) 66%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, rgba(212,175,55,0.20), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(180,20,20,0.16), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg2) 92%, transparent), color-mix(in srgb, var(--bg3) 76%, transparent));
  box-shadow: 0 16px 42px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.03);
  overflow: hidden;
}
.shop-command-bg {
  position: absolute;
  right: 12px;
  top: -8px;
  font-family: serif;
  font-size: 58px;
  font-weight: 900;
  color: rgba(212,175,55,0.05);
  pointer-events: none;
}
.shop-command-main {
  position: relative;
  z-index: 1;
}
.shop-command-kicker,
.shop-featured-kicker,
.shop-cat-kicker {
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1.8px;
  color: var(--gold);
}
.shop-command-title {
  margin-top: 3px;
  color: var(--text);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.shop-command-sub {
  margin-top: 4px;
  max-width: 330px;
  color: var(--text2);
  font-size: 11px;
  line-height: 1.55;
}
.shop-command-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 11px;
}
.shop-command-stats div {
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 12px;
  background: rgba(0,0,0,0.14);
}
.shop-command-stats span {
  display: block;
  color: var(--text3);
  font-family: monospace;
  font-size: 7px;
  text-transform: uppercase;
}
.shop-command-stats strong {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-family: monospace;
  font-size: 13px;
}
.shop-featured-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 9px;
  padding: 9px;
  border: 1px solid rgba(180,20,20,0.22);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(180,20,20,0.12), rgba(212,175,55,0.08));
}
.shop-featured-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--gold-border) 70%, transparent);
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
}
.shop-featured-copy {
  min-width: 0;
  flex: 1;
}
.shop-featured-name {
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
}
.shop-featured-desc {
  margin-top: 2px;
  color: var(--text2);
  font-size: 10px;
  line-height: 1.35;
}
.shop-featured-price {
  color: var(--gold);
  font-family: monospace;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.shop-section {
  margin: 0 12px 14px;
}
.shop-section .shop-cat {
  padding: 9px 0 8px;
}
.shop-section .shop-cat::after {
  display: none;
}
.shop-cat {
  justify-content: space-between;
}
.shop-cat strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 1.1px;
}
.shop-cat em {
  display: block;
  margin-top: 2px;
  color: var(--text3);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}
.shop-cat-count {
  min-width: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  text-align: center;
  font-family: monospace;
  font-size: 10px;
}
.shop-grid-modern {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.shop-grid-modern .shop-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg2) 90%, transparent), color-mix(in srgb, var(--bg3) 76%, transparent)),
    var(--bg2);
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
  overflow: hidden;
}
.shop-grid-modern .shop-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(180,20,20,0.18), transparent 38%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.shop-grid-modern .shop-item:active::before {
  opacity: 1;
}
.shop-item-topline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.shop-grid-modern .shop-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), transparent 40%),
    color-mix(in srgb, var(--bg2) 90%, transparent);
}
.shop-item-tier {
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--text3);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-family: monospace;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
}
.shop-item-hot .shop-item-tier,
.shop-item-legendary .shop-item-tier {
  color: var(--gold);
  border-color: var(--gold-border);
  background: var(--gold-dim);
}
.shop-item-rare .shop-item-tier {
  color: #9b59b6;
  border-color: rgba(155,89,182,0.38);
  background: rgba(155,89,182,0.10);
}
.shop-item-body {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.shop-grid-modern .shop-item-name {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.shop-grid-modern .shop-item-cn {
  margin-top: 4px;
  color: var(--text2);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.45;
}
.shop-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.shop-item-code {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text3) 82%, transparent);
  font-family: monospace;
  font-size: 8px;
}
.shop-item-hint {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 8px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--gold) 88%, var(--text));
  background: color-mix(in srgb, var(--gold-dim) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-border) 68%, transparent);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}
.shop-item-footer {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.shop-item-price {
  color: var(--gold);
  font-family: monospace;
  font-size: 14px;
  font-weight: 900;
}
.shop-item-state {
  margin-top: 2px;
  color: var(--text3);
  font-size: 9px;
  line-height: 1.2;
}
.shop-grid-modern .shop-item-buy {
  min-width: 104px;
  padding: 9px 11px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
}
.shop-grid-modern .shop-item-badge {
  margin-left: 0;
}

.inventory-item {
  position: relative;
  margin: 8px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg2) 88%, transparent), color-mix(in srgb, var(--bg3) 64%, transparent)),
    var(--bg2);
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
  overflow: hidden;
}
.inventory-item::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--red) 22%, transparent), transparent 38%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 34%);
  opacity: 0.42;
}
.inventory-item > * { position: relative; z-index: 1; }
.inventory-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.inventory-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg3) 74%, transparent);
  color: var(--gold);
  font-size: 24px;
  box-shadow: inset 0 0 18px rgba(255,255,255,0.03);
}
.inventory-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.inventory-info { min-width: 0; flex: 1; }
.inventory-kicker {
  margin-bottom: 3px;
  font-size: 8px;
  color: var(--gold);
  font-family: monospace;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.82;
}
.inventory-name { font-size: 12px; font-weight: 800; color: var(--text); line-height: 1.25; }
.inventory-date { font-size: 9px; color: var(--text3); font-family: monospace; margin-top: 3px; line-height: 1.35; }
.inventory-desc { font-size: 10px; color: var(--text2); margin-top: 4px; line-height: 1.35; }
.inventory-desc-secondary { font-size: 9px; color: var(--text3); margin-top: 3px; font-family: monospace; letter-spacing: 0.2px; }
.inventory-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex: 0 0 auto;
}
.inventory-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--gold) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold-dim) 72%, transparent);
  color: var(--gold);
  font-size: 8px;
  font-family: monospace;
  letter-spacing: 0.8px;
  padding: 3px 7px;
  text-transform: uppercase;
}
.inventory-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.inv-btn { flex:1; padding: 7px 6px; border-radius: var(--radius-md); font-size: 9px; font-weight: 700; cursor: pointer; border: 1px solid transparent; font-family: monospace; }
.inv-btn-use { flex: 0 0 100%; background: rgba(46,204,113,0.15); color: #2ecc71; border-color: rgba(46,204,113,0.18); }
.inv-btn-gift { background: rgba(212,175,55,0.08); color: var(--gold); border-color: rgba(212,175,55,0.18); }
.inv-btn-sell { background: rgba(180,20,20,0.10); color: var(--red); border-color: rgba(180,20,20,0.18); }
.inv-btn-legendary {
  background: rgba(180,20,20,0.14);
  border-color: rgba(180,20,20,0.34);
  color: #f07a68;
}
.legendary-implant-panel {
  margin-top: 9px;
  padding: 10px;
  border: 1px solid rgba(180,20,20,0.24);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, rgba(180,20,20,0.18), transparent 42%),
    rgba(10,8,14,0.72);
}
.legendary-implant-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: #f07a68;
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 1px;
}
.legendary-implant-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  border: 1px solid rgba(180,20,20,0.34);
  background: rgba(180,20,20,0.14);
}
.legendary-implant-line {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.legendary-implant-line b {
  color: var(--gold);
  font-size: 8px;
  font-family: monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.legendary-implant-line span,
.legendary-implant-note {
  color: var(--text2);
  font-size: 10px;
  line-height: 1.45;
}
.legendary-implant-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: var(--text3);
}
.legendary-implant-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 9px;
}
.legendary-action-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(180,20,20,0.28);
  background: rgba(180,20,20,0.12);
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
}
.legendary-action-btn strong {
  color: #f07a68;
  font-size: 9px;
  font-family: monospace;
  letter-spacing: 1px;
}
.legendary-action-btn span {
  color: var(--text2);
  font-size: 10px;
}
.legendary-action-btn.disabled {
  opacity: 0.55;
  filter: grayscale(0.3);
}

/* The implant/card "ПРОТОКОЛ" control panel is hardcoded to a dark palette
   above, which clashes with light themes (admin-light, NetWatch light,
   Genshin light). Re-skin it using each theme's own variables. */
body.theme-nw-light .legendary-implant-panel,
body.theme-admin-light .legendary-implant-panel,
body.theme-genshin-light .legendary-implant-panel {
  background:
    radial-gradient(circle at 100% 0, var(--red-dim), transparent 42%),
    var(--bg3);
  border-color: var(--red-border);
}
body.theme-nw-light .legendary-implant-head,
body.theme-admin-light .legendary-implant-head,
body.theme-genshin-light .legendary-implant-head {
  color: var(--red);
}
body.theme-nw-light .legendary-implant-head span,
body.theme-admin-light .legendary-implant-head span,
body.theme-genshin-light .legendary-implant-head span {
  border-color: var(--red-border);
  background: var(--red-dim);
}
body.theme-nw-light .legendary-implant-note,
body.theme-admin-light .legendary-implant-note,
body.theme-genshin-light .legendary-implant-note {
  border-top-color: var(--border);
}
body.theme-nw-light .legendary-action-btn,
body.theme-admin-light .legendary-action-btn,
body.theme-genshin-light .legendary-action-btn {
  border-color: var(--red-border);
  background: var(--red-dim);
  color: var(--text);
}
body.theme-nw-light .legendary-action-btn strong,
body.theme-admin-light .legendary-action-btn strong,
body.theme-genshin-light .legendary-action-btn strong {
  color: var(--red);
}
body.theme-nw-light .inv-btn-legendary,
body.theme-admin-light .inv-btn-legendary,
body.theme-genshin-light .inv-btn-legendary {
  background: var(--red-dim);
  border-color: var(--red-border);
  color: var(--red);
}

.legendary-target-modal {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 2, 7, 0.72);
  backdrop-filter: blur(12px);
}
.legendary-target-sheet {
  position: relative;
  width: min(360px, 100%);
  padding: 18px;
  border: 1px solid rgba(180,20,20,0.3);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(180,20,20,0.22), transparent 44%),
    color-mix(in srgb, var(--bg2) 94%, #12040a);
  box-shadow: 0 18px 60px rgba(0,0,0,0.42);
}
.legendary-target-close {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 16px;
}
.legendary-target-kicker {
  color: #f07a68;
  font-size: 8px;
  font-family: monospace;
  letter-spacing: 2px;
}
.legendary-target-title {
  margin-top: 5px;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}
.legendary-target-label {
  display: block;
  margin-top: 15px;
  color: var(--text3);
  font-size: 9px;
  font-family: monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.legendary-target-input {
  width: 100%;
  margin-top: 7px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(180,20,20,0.26);
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  color: var(--text);
  outline: none;
}
.legendary-target-input:focus {
  border-color: rgba(220,70,60,0.6);
  box-shadow: 0 0 0 2px rgba(180,20,20,0.16);
}
.legendary-target-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.legendary-target-btn {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
}
.legendary-target-btn.cancel {
  border-color: var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text2);
}
.legendary-target-btn.confirm {
  border-color: rgba(180,20,20,0.32);
  background: rgba(180,20,20,0.18);
  color: #f07a68;
}
/* In light themes, --bg2/--bg3 are mostly-transparent blacks/whites meant to
   tint over a light page background. This modal instead sits on a dark
   full-screen scrim, so a translucent sheet bg lets the dark scrim bleed
   through and leaves dark theme text unreadable on a dark sheet. Use the
   opaque --bg for the sheet itself, --bg3 (composited on that opaque sheet)
   for fields inside it. */
body.theme-nw-light .legendary-target-sheet,
body.theme-admin-light .legendary-target-sheet,
body.theme-genshin-light .legendary-target-sheet {
  background:
    radial-gradient(circle at 100% 0, var(--red-dim), transparent 44%),
    var(--bg);
  border-color: var(--red-border);
}
body.theme-nw-light .legendary-target-input,
body.theme-admin-light .legendary-target-input,
body.theme-genshin-light .legendary-target-input {
  background: var(--bg3);
  border-color: var(--red-border);
  color: var(--text);
}
body.theme-nw-light .legendary-target-btn.cancel,
body.theme-admin-light .legendary-target-btn.cancel,
body.theme-genshin-light .legendary-target-btn.cancel {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text2);
}
/* Generic in-app confirm dialog — used instead of tg.showPopup/window.confirm,
   both of which can be unsupported or hang on some Telegram clients. */
.confirm-dialog-modal {
  position: fixed; inset: 0; z-index: 9400;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(3,2,7,0.72); backdrop-filter: blur(12px);
}
.confirm-dialog-sheet {
  position: relative; width: min(360px, 100%); padding: 18px;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--border));
  border-radius: 20px;
  background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--gold) 16%, transparent), transparent 44%), color-mix(in srgb, var(--bg2) 94%, #120c04);
  box-shadow: 0 18px 60px rgba(0,0,0,0.42);
}
.confirm-dialog-title { color: var(--text); font-size: 15px; font-weight: 800; line-height: 1.3; }
.confirm-dialog-msg { margin-top: 8px; color: var(--text2); font-size: 12px; line-height: 1.45; white-space: pre-line; }
.confirm-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.confirm-dialog-btn { min-height: 42px; border-radius: 12px; border: 1px solid transparent; font-size: 11px; font-weight: 700; font-family: monospace; cursor: pointer; }
.confirm-dialog-btn.cancel { border-color: var(--border); background: rgba(255,255,255,0.03); color: var(--text2); }
.confirm-dialog-btn.confirm { border-color: color-mix(in srgb, var(--gold) 38%, transparent); background: color-mix(in srgb, var(--gold-dim) 70%, transparent); color: var(--gold); }
.confirm-dialog-btn.confirm.danger { border-color: rgba(180,20,20,0.34); background: rgba(180,20,20,0.16); color: #f07a68; }

.inventory-dur { display: flex; gap: 3px; justify-content: flex-end; }
.inventory-dur .dur-dot,
.inventory-dur-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.inventory-dur .dur-dot.on,
.inventory-dur-dot.on { background: var(--gold); box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 58%, transparent); }
.inventory-dur .dur-dot.on-r,
.inventory-dur-dot.on-r { background: var(--red); box-shadow: 0 0 8px color-mix(in srgb, var(--red) 58%, transparent); }
.inventory-dur .dur-dot.off,
.inventory-dur-dot.off { background: rgba(255,255,255,0.12); }
.inventory-item-legendary { border-color: rgba(180,20,20,0.38); }
.inventory-icon.legendary {
  border-color: rgba(212,175,55,0.55) !important;
  background: linear-gradient(145deg, rgba(212,175,55,0.16), rgba(180,20,20,0.10));
  box-shadow: inset 0 0 18px rgba(255,200,0,0.10), 0 0 12px rgba(212,175,55,0.18);
  color: var(--gold);
}
.inventory-item-card { border-color: color-mix(in srgb, var(--gold) 22%, var(--border)); }

/* ===== CARD RARITY VARIANTS ===== */

.inventory-expiry { font-size: 9px; color: var(--red); font-family: monospace; margin-top: 3px; letter-spacing: 0.2px; }

/* Case prize card: red-gold glow */
.inventory-item-prize::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--red) 18%, transparent), transparent 40%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 34%);
}

/* Shop card: gold left glow */
.inventory-item-shop::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gold) 18%, transparent), transparent 40%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--red) 9%, transparent), transparent 34%);
}

/* Genshin card pool borders */
.inventory-card-gold   { border-color: rgba(192,160,64,0.40); }
.inventory-card-purple { border-color: rgba(155,89,182,0.38); }
.inventory-card-blue   { border-color: rgba(74,122,204,0.34); }
.inventory-card-dup    { border-color: var(--gold-border); }

/* Genshin card icon rarity */
.inventory-icon-gold   { border-color: rgba(192,160,64,0.55) !important; box-shadow: inset 0 0 16px rgba(255,200,0,0.07), 0 0 10px rgba(192,160,64,0.13); }
.inventory-icon-purple { border-color: rgba(155,89,182,0.50) !important; box-shadow: inset 0 0 16px rgba(155,89,182,0.07), 0 0 10px rgba(155,89,182,0.13); }
.inventory-icon-blue   { border-color: rgba(74,122,204,0.44) !important; box-shadow: inset 0 0 16px rgba(74,122,204,0.06), 0 0 10px rgba(74,122,204,0.11); }

/* Genshin card gradient by pool */
.inventory-card-gold::before   { background: linear-gradient(90deg, color-mix(in srgb, #c0a040 18%, transparent), transparent 38%), radial-gradient(circle at 92% 8%, color-mix(in srgb, #ffd700 12%, transparent), transparent 34%); }
.inventory-card-purple::before { background: linear-gradient(90deg, color-mix(in srgb, #9b59b6 16%, transparent), transparent 38%), radial-gradient(circle at 92% 8%, color-mix(in srgb, #c39ef5 10%, transparent), transparent 34%); }
.inventory-card-blue::before   { background: linear-gradient(90deg, color-mix(in srgb, #4b8fcf 16%, transparent), transparent 38%), radial-gradient(circle at 92% 8%, color-mix(in srgb, #4a9af5 10%, transparent), transparent 34%); }

/* Kicker + date color per pool */
.inventory-card-gold   .inventory-kicker, .inventory-card-gold   .inventory-date { color: #c0a040; }
.inventory-card-purple .inventory-kicker, .inventory-card-purple .inventory-date { color: #c39ef5; }
.inventory-card-blue   .inventory-kicker, .inventory-card-blue   .inventory-date { color: #4a9af5; }
.inventory-card-dup    .inventory-kicker, .inventory-card-dup    .inventory-date { color: var(--gold); }

/* ===== КЕЙСЫ ===== */
.casino-balance {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 12px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; position: relative; overflow: hidden;
}
.casino-balance::before {
  content: '财';
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 40px; color: rgba(212,175,55,0.04); font-family: serif;
}
.cases-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px; margin: 0 12px 8px;
}

/* === CASINO ATTEMPTS HUD === */
.casino-attempts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}
.casino-attempts-kicker {
  font-size: 8px;
  color: var(--text3);
  font-family: monospace;
  letter-spacing: 1px;
}
.casino-attempts-pips {
  display: flex;
  gap: 5px;
  align-items: center;
}
.cas-attempt-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.4);
  background: transparent;
  display: inline-block;
  transition: all 0.3s;
}
.cas-attempt-pip.filled {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(212,175,55,0.55);
  border-color: var(--gold);
}
.cas-attempt-pip.spent {
  border-color: rgba(180,20,20,0.4);
  background: rgba(180,20,20,0.12);
}
.casino-attempts.exhausted .cas-attempt-pip {
  border-color: rgba(180,20,20,0.45);
  background: var(--red-dim);
  box-shadow: none;
}
.casino-attempts.low .cas-attempt-pip.filled {
  animation: pipPulse 1.4s ease-in-out infinite;
}
@keyframes pipPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(212,175,55,0.55); }
  50%      { box-shadow: 0 0 14px rgba(232,147,42,0.95); transform: scale(1.12); }
}

/* Disabled case button — uniform style instead of inline overrides */
#openCaseBtn.case-btn-disabled {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.32) !important;
  cursor: not-allowed;
  animation: none;
  box-shadow: none;
}
.case-card {
  border-radius: 10px; padding: 10px 5px; text-align: center;
  cursor: pointer; position: relative; overflow: hidden;
}
.case-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
}
.case-card.gold { background: rgba(212,175,55,0.05); border: 1px solid rgba(212,175,55,0.3); }
.case-card.gold::before { background: linear-gradient(90deg, transparent, rgba(212,175,55,0.7), transparent); }
.case-card.purple { background: rgba(155,89,182,0.05); border: 1px solid rgba(155,89,182,0.3); }
.case-card.purple::before { background: linear-gradient(90deg, transparent, rgba(155,89,182,0.7), transparent); }
.case-card.black { background: rgba(180,20,20,0.05); border: 1px solid rgba(180,20,20,0.3); }
.case-card.black::before { background: linear-gradient(90deg, transparent, rgba(180,20,20,0.7), transparent); }
.case-cn { font-size: 9px; font-family: serif; margin-bottom: 3px; }
.case-cn.g { color: rgba(212,175,55,0.5); }
.case-cn.p { color: rgba(155,89,182,0.5); }
.case-cn.b { color: rgba(180,20,20,0.5); }
.case-img { font-size: 30px; margin-bottom: 4px; }
.case-pct { font-size: 10px; font-weight: 800; font-family: monospace; }
.case-pct.g { color: var(--gold); }
.case-pct.p { color: var(--purple); }
.case-pct.b { color: #cc3333; }
.roulette-wrapper { margin: 0 12px 8px; position: relative; }
.roulette-pointer {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 14px solid rgba(180,20,20,0.8); z-index: 10;
  filter: drop-shadow(0 0 4px rgba(200,0,0,0.5));
}
.roulette-pointer-bottom {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 14px solid rgba(180,20,20,0.8); z-index: 10;
}
.roulette-track {
  overflow: hidden; border-radius: 10px;
  border: 1px solid var(--red-border);
  background: #080818; position: relative; height: 130px;
}
.roulette-track::before { content:''; position:absolute;left:0;top:0;bottom:0;width:50px;background:linear-gradient(to right,#080818,transparent);z-index:5;pointer-events:none; }
.roulette-track::after { content:''; position:absolute;right:0;top:0;bottom:0;width:50px;background:linear-gradient(to left,#080818,transparent);z-index:5;pointer-events:none; }
.roulette-center-line { position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(180,20,20,0.5);transform:translateX(-50%);z-index:6; }
.roulette-strip { display:flex;padding:8px 0;transition:none;will-change:transform; }
.roulette-item {
  min-width: 122px; height: 114px; margin: 0 4px;
  border-radius: 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: 1px solid rgba(212,175,55,0.15);
  background: linear-gradient(145deg, #0a0a1a, #0f0f22);
  flex-shrink: 0; position: relative; overflow: hidden;
}
.roulette-case-img {
  width: 96px;
  height: 86px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.28));
  transition: transform 0.22s ease, filter 0.22s ease;
}
.roulette-case-label {
  margin-top: 3px;
  font-size: 7px;
  letter-spacing: 0.8px;
  font-family: monospace;
  color: rgba(255,255,255,0.36);
  text-transform: uppercase;
}
.roulette-item-gold {
  border-color: rgba(212,175,55,0.22);
  background:
    radial-gradient(circle at 50% 10%, var(--gold-dim), transparent 48%),
    linear-gradient(145deg, #0a0a1a, #0f0f22);
}
.roulette-item-purple {
  border-color: rgba(155,89,182,0.34);
  background:
    radial-gradient(circle at 50% 10%, rgba(155,89,182,0.18), transparent 50%),
    linear-gradient(145deg, #11091d, #0d0b18);
}
.roulette-item-black {
  border-color: rgba(180,20,20,0.42);
  background:
    radial-gradient(circle at 50% 10%, rgba(180,20,20,0.22), transparent 52%),
    linear-gradient(145deg, #160507, #08040a);
}
.roulette-item-purple .roulette-case-label { color: rgba(199,146,255,0.72); }
.roulette-item-black .roulette-case-label { color: rgba(255,92,92,0.76); }
.roulette-track-gold {
  border-color: rgba(212,175,55,0.42);
  box-shadow: 0 0 18px rgba(212,175,55,0.08), inset 0 0 18px rgba(212,175,55,0.04);
}
.roulette-track-purple {
  border-color: rgba(155,89,182,0.70);
  animation: roulettePurplePulse 0.85s ease-in-out infinite;
}
.roulette-track-black {
  border-color: rgba(255,35,35,0.82);
  animation: rouletteBlackBreach 0.52s steps(2) infinite;
}
.roulette-track-black::before,
.roulette-track-black::after {
  width: 72px;
}
.roulette-track-reveal .roulette-item:not(.winner) {
  opacity: 0.42;
  filter: grayscale(0.35);
}
.roulette-item.winner { border-color: rgba(212,175,55,0.6) !important; box-shadow: 0 0 20px rgba(212,175,55,0.3) !important; }
.roulette-item.opening { animation: shakeBox 0.5s ease; }
.roulette-item.opened { border-color: var(--gold); box-shadow: 0 0 25px rgba(212,175,55,0.4); background: linear-gradient(145deg, #1a1a00, #2a2200); }
.roulette-item.winner-purple {
  border-color: rgba(190,100,255,0.88) !important;
  box-shadow: 0 0 26px rgba(155,89,182,0.46) !important;
}
.roulette-item.winner-black {
  border-color: rgba(255,45,45,0.94) !important;
  box-shadow: 0 0 36px rgba(255,0,0,0.58), inset 0 0 20px rgba(255,0,0,0.16) !important;
}
.roulette-item.opened-purple {
  background: linear-gradient(145deg, #21102e, #120817);
}
.roulette-item.opened-black {
  background: linear-gradient(145deg, #2a0507, #080204);
}
.roulette-item-icon { font-size: 38px; transition: all 0.3s; }
.roulette-item-name { font-size: 8px; color: #888; text-align: center; line-height: 1.2; padding: 0 4px; margin-top: 4px; }
.roulette-prize-reveal { animation: revealPrize 0.4s ease forwards; }
.bonus-banner { font-size: 10px; color: var(--gold); font-weight: 700; font-family: monospace; }
.prize-result {
  background: var(--bg2); border: 1px solid var(--gold-border);
  border-radius: 10px; margin: 0 12px 8px;
  padding: 16px; text-align: center; display: none;
}
.prize-result.show { display: block; animation: fadeIn 0.4s ease; }
.prize-result-icon { font-size: 48px; margin-bottom: 8px; }
.prize-result-name { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.prize-result-desc { font-size: 11px; color: var(--text2); margin-bottom: 8px; }
.prize-result-points { font-size: 18px; font-weight: 800; }
.prize-result-points.positive { color: #2ecc71; }
.prize-result-points.negative { color: var(--red); }
.prize-result-points.special { color: var(--purple); }
.casino-subtabs { display: flex; gap: 6px; padding: 8px 12px 4px; }

/* Правила */
.rules-row { padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,0.03); display: flex; gap: 10px; align-items: flex-start; }
.rules-icon { font-size: 18px; min-width: 28px; }
.rules-title { font-size: 11px; font-weight: 600; color: var(--text); }
.rules-desc { font-size: 10px; color: var(--text2); margin-top: 2px; line-height: 1.5; }

/* ===== ЕЩЁ (MORE) ===== */
.more-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin: 10px 12px;
}
.more-item.admin-only-item { display: none; }
body.is-admin .more-item.admin-only-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 94px;
  border-color: color-mix(in srgb, var(--gold-border) 72%, var(--red-border));
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.12), transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg2) 86%, rgba(120,30,30,0.18)), var(--bg2));
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.04);
}
body.is-admin .more-item.admin-only-item::before {
  background: linear-gradient(90deg, transparent, var(--gold), var(--red-border), transparent);
}
.more-item {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 10px; text-align: center;
  cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden;
}
.more-item::before {
  content: ''; position: absolute; top:0;left:0;right:0;height:1px;
  background: linear-gradient(90deg, transparent, var(--red-border), transparent);
}
.more-item:active { background: var(--red-dim); }
.more-item-icon {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
  line-height: 1;
}
.more-item-name { font-size: 10px; font-weight: 600; color: var(--text); }
.more-item-cn { font-size: 9px; color: rgba(212,175,55,0.6); font-family: serif; margin-top: 2px; }

/* ===== ПОГОДА ===== */
.weather-big { font-size: 52px; font-weight: 700; color: var(--text); line-height: 1; }
.weather-big span { font-size: 24px; color: var(--gold); }
.weather-icon-big { font-size: 52px; }
.weather-detail { font-size: 11px; color: var(--text3); }
.weather-detail span { color: var(--gold); }
.yuan-big { font-size: 48px; font-weight: 700; color: var(--text); line-height: 1; }
.yuan-big span { font-size: 22px; color: var(--gold); }

/* ===== СТИРКА ===== */
.date-scroll { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; }
.date-scroll::-webkit-scrollbar { display: none; }
.date-btn {
  flex-shrink: 0; padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent; color: var(--text2);
  font-size: 10px; cursor: pointer; font-family: monospace;
  white-space: nowrap;
}
.date-btn.active { background: var(--red-dim); border-color: var(--red-border); color: var(--red); }
.laundry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 12px; }
.laundry-slot {
  background: var(--bg2); border: 1px solid rgba(46,204,113,0.2);
  border-radius: var(--radius-md); padding: 12px; text-align: center; cursor: pointer;
  transition: all var(--transition-normal) var(--ease-standard);
}
.laundry-slot.booked { border-color: var(--red-border); opacity: 0.5; cursor: default; }
.laundry-slot.my-booking { background: rgba(212,175,55,0.05); border-color: var(--gold-border); }
.laundry-time { font-size: 16px; font-weight: 700; color: var(--gold); font-family: monospace; }
.laundry-status { font-size: 10px; color: var(--text2); margin-top: 4px; }

/* ===== ОБЪЯВЛЕНИЯ ===== */
.announcement-item {
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.announcement-text { font-size: 13px; color: var(--text); line-height: 1.6; }
.announcement-date { font-size: 9px; color: var(--text3); font-family: monospace; margin-top: 6px; }

/* ===== АЧИВКИ ===== */
.achievement-count { font-size: 10px; color: var(--text2); padding: 10px 14px; font-family: monospace; }
.achievements-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 12px 10px; }
.achievement-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 8px; text-align: center;
  cursor: pointer; position: relative;
}
.achievement-card.locked { opacity: 0.4; }
.achievement-svg { width: 92px; height: 92px; margin: 0 auto 8px; }
.achievement-icon-wrap {
  width: 92px; height: 92px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #d4af37;
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 8px rgba(212,175,55,0.18);
}
.achievement-icon-wrap i { font-size: 36px; color: #f5d05a; }
.achievement-icon-bg,
.no-leak-bg {
  display: inline-block;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none; user-drag: none;
}

.achievement-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(5,5,16,0.72); backdrop-filter: blur(3px);
}
.achievement-modal-sheet {
  width: 100%; max-width: 460px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 18px 18px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  text-align: center;
}
.achievement-modal-spin-zone {
  perspective: 600px;
  margin: 0 auto 6px;
  width: 150px;
}
.achievement-modal-img-mask {
  width: 150px; height: 150px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #d4af37; background: rgba(212,175,55,0.08);
  box-shadow: 0 0 16px rgba(212,175,55,0.22);
  overflow: hidden;
}
.achievement-modal-img-wrap {
  width: 100%; height: 100%;
  will-change: transform;
}
.achievement-modal-img-wrap.locked { filter: grayscale(1) brightness(0.35); }
.achievement-modal-spin-hint {
  font-size: 9px; font-family: monospace; letter-spacing: 0.5px;
  color: var(--text3); margin-bottom: 12px; opacity: 0.7;
}
.achievement-modal-status { font-size: 10px; font-family: monospace; letter-spacing: 1px; margin-bottom: 6px; }
.achievement-modal-status.earned { color: #2ecc71; }
.achievement-modal-status.locked { color: var(--text3); }
.achievement-modal-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.achievement-modal-desc { font-size: 12px; color: var(--text2); line-height: 1.5; }
.achievement-modal-close {
  margin-top: 18px; width: 100%; padding: 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg3); color: var(--text);
  font-size: 12px; font-family: monospace; letter-spacing: 1px; cursor: pointer;
}
.achievement-name { font-size: 9px; color: var(--text2); line-height: 1.3; }
.achievement-earned-badge {
  position: absolute; top: 4px; right: 4px;
  width: 16px; height: 16px; color: var(--gold);
  filter: drop-shadow(0 0 3px rgba(212,175,55,0.6));
}
.achievement-earned-badge svg { width: 100%; height: 100%; display: block; }
.achievement-earned-badge.is-demo-label {
  width: auto; height: auto; padding: 1px 5px;
  font-size: 8px; font-family: monospace; letter-spacing: 1px;
  background: rgba(212,175,55,0.18); border-radius: 4px;
  filter: none;
}
.achievement-locked-badge {
  position: absolute; top: 4px; right: 4px;
  width: 14px; height: 14px; color: var(--text3);
}
.achievement-locked-badge svg { width: 100%; height: 100%; display: block; }
.cn-divider-icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; color: var(--gold); margin-right: 4px; }
.cn-divider-icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; }

/* ===== КОМАНДА ===== */
.team-card-item {
  background: rgba(10,10,18,0.7);
}
.team-card-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.03);
  border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; overflow: hidden; flex-shrink: 0;
}
.team-card-avatar .no-leak-bg { background-size: cover; }
.team-card-name {
  font-size: 15px; font-weight: 800; color: #fff; margin-top: 2px;
}
.team-card-desc {
  margin-top: 8px; font-size: 11px; color: #bbb; line-height: 1.5;
}
.architect-popup-overlay {
  /* Must beat the raid overlay (z-index 9999) — Architect diary/battle
     speech popups can fire while a raid is open (loadUserData refreshes
     mid-raid), and used to render invisibly behind it while still
     marking themselves as "seen". */
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.55);
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;
  padding: 0 0 calc(78px + env(safe-area-inset-bottom, 0px));
  animation: architectPopupFadeIn 0.25s ease;
}
@keyframes architectPopupFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
.architect-popup-image {
  width: 62%; max-width: 320px; height: 38vh; max-height: 320px;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  opacity: 0; transform: translateX(60px);
  animation: architectPopupSlideInRight 0.45s ease 0.05s forwards;
}
.architect-popup-box {
  width: 100%; box-sizing: border-box; margin: 0 10px 10px;
  background: linear-gradient(180deg, rgba(8,8,18,0.97), rgba(4,4,12,0.99));
  border: 1px solid rgba(0,255,102,0.4);
  border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 0 20px rgba(0,255,102,0.15), 0 -6px 20px rgba(0,0,0,0.4);
  opacity: 0; transform: translateX(-60px);
  animation: architectPopupSlideInLeft 0.45s ease 0.15s forwards;
}
@keyframes architectPopupSlideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes architectPopupSlideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
.architect-popup-cursor {
  display: inline-block;
  animation: architectPopupBlink 0.9s step-end infinite;
  color: #00ff66;
}
@keyframes architectPopupBlink {
  50% { opacity: 0; }
}
.architect-popup-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.architect-popup-title {
  font-family: monospace; font-size: 12px; font-weight: 800;
  letter-spacing: 0.1em; color: #00ff66;
  border: 1px solid rgba(0,255,102,0.4); border-radius: 8px;
  padding: 3px 10px; background: rgba(0,255,102,0.08);
}
.architect-popup-close {
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid rgba(0,255,102,0.3); background: rgba(0,255,102,0.06);
  color: #00ff66; font-size: 12px; cursor: pointer;
}
.architect-popup-text {
  font-size: 12px; line-height: 1.6; color: #e6ffe9;
  max-height: 26vh; overflow-y: auto;
}
.architect-popup-arrow {
  text-align: center; margin-top: 6px; color: rgba(0,255,102,0.5);
  font-size: 12px; animation: architectPopupBounce 1.4s ease-in-out infinite;
}
@keyframes architectPopupBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(4px); opacity: 1; }
}

.mju-popup-theme .architect-popup-box {
  border-color: rgba(255,0,60,0.4);
  box-shadow: 0 0 20px rgba(255,0,60,0.15), 0 -6px 20px rgba(0,0,0,0.4);
}
.mju-popup-theme .architect-popup-title {
  color: #ff003c; border-color: rgba(255,0,60,0.4); background: rgba(255,0,60,0.08);
}
.mju-popup-theme .architect-popup-close {
  color: #ff003c; border-color: rgba(255,0,60,0.3); background: rgba(255,0,60,0.06);
}
.mju-popup-theme .architect-popup-cursor {
  color: #ff003c;
}
.mju-popup-theme .architect-popup-arrow {
  color: rgba(255,0,60,0.5);
}
.tianhao-popup-theme .architect-popup-box {
  border-color: rgba(255,180,0,0.4);
  box-shadow: 0 0 20px rgba(255,180,0,0.12), 0 -6px 20px rgba(0,0,0,0.4);
}
.tianhao-popup-theme .architect-popup-title {
  color: #e8a800; border-color: rgba(255,180,0,0.4); background: rgba(255,180,0,0.08);
}
.tianhao-popup-theme .architect-popup-close {
  color: #e8a800; border-color: rgba(255,180,0,0.3); background: rgba(255,180,0,0.06);
}
.tianhao-popup-theme .architect-popup-cursor { color: #e8a800; }
.tianhao-popup-theme .architect-popup-arrow { color: rgba(255,180,0,0.5); }

.liza-popup-theme .architect-popup-box {
  border-color: rgba(41,182,246,0.45);
  box-shadow: 0 0 20px rgba(41,182,246,0.15), 0 -6px 20px rgba(0,0,0,0.4);
}
.liza-popup-theme .architect-popup-title {
  color: #29b6f6; border-color: rgba(41,182,246,0.4); background: rgba(41,182,246,0.08);
}
.liza-popup-theme .architect-popup-close {
  color: #29b6f6; border-color: rgba(41,182,246,0.3); background: rgba(41,182,246,0.06);
}
.liza-popup-theme .architect-popup-cursor { color: #29b6f6; }
.liza-popup-theme .architect-popup-arrow { color: rgba(41,182,246,0.5); }

.intro-novel-theme .architect-popup-box {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 20px rgba(255,255,255,0.07), 0 -6px 20px rgba(0,0,0,0.4);
}
.intro-novel-btn {
  flex: 1; padding: 9px; border-radius: 8px; font-family: monospace; font-size: 11px;
  font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: var(--text2);
}
.intro-novel-btn.primary {
  border-color: rgba(0,255,102,0.4); background: rgba(0,255,102,0.08); color: #00ff66;
}
.intro-novel-theme .architect-popup-image.intro-novel-image-contain {
  width: 40%; max-width: 180px; height: 18vh; max-height: 150px;
  background-size: contain; background-position: center; align-self: flex-end;
}

.gift-code-msg {
  margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--text2);
  min-height: 14px;
}
.gift-code-msg-error {
  color: #ff4d6a;
}

.architect-diary-card {
  border-left: 3px solid #00ff66;
}
.architect-diary-card-title {
  font-size: 11px; font-family: monospace; color: #00ff66;
  letter-spacing: 1px; font-weight: 700; margin-bottom: 6px;
}
.architect-diary-card-img {
  width: 100%; height: 140px; overflow: hidden;
  border-radius: 6px; margin-bottom: 8px;
  border: 1px solid rgba(0,255,102,0.2);
}
.architect-diary-card-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block;
  -webkit-user-drag: none; user-select: none;
}
.architect-diary-card-text {
  font-size: 12px; color: var(--text2); line-height: 1.6;
}
.architect-diary-card-meta {
  margin-top: 8px; font-size: 9px; font-family: monospace; color: var(--text3);
}
.architect-diary-card-locked {
  border-left-color: var(--text3); opacity: 0.55;
}
.architect-diary-card-locked .architect-diary-card-title {
  color: var(--text3);
}
body.theme-nw-light .architect-diary-card-text { color: #444; }
body.theme-genshin-light .architect-diary-card-text { color: #565e6e; }
.team-card-status-badge {
  font-size: 8px; font-family: monospace; color: var(--text3);
  background: rgba(255,255,255,0.05); padding: 1px 5px;
  border-radius: 4px; white-space: nowrap;
}
.team-card-btn {
  margin-top: 10px; width: 100%; padding: 7px;
  background: rgba(255,255,255,0.04); border: 1px solid;
  border-radius: 8px; font-size: 10px; font-family: monospace;
  letter-spacing: 1px; cursor: pointer;
}
body.theme-nw-light .team-card-item { background: rgba(255,255,255,0.75); }
body.theme-nw-light .team-card-avatar { background: rgba(0,0,0,0.04); }
body.theme-nw-light .team-card-name  { color: #1a1a1a; }
body.theme-nw-light .team-card-desc  { color: #444; }
body.theme-nw-light .team-card-status-badge { background: rgba(0,0,0,0.06); color: #666; }
body.theme-nw-light .team-card-btn   { background: rgba(0,0,0,0.03); }

.team-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.team-avatar {
  width: 56px; height: 56px; border-radius: 14px; object-fit: cover;
  border: 1px solid var(--red-border); flex-shrink: 0;
}
.team-avatar-placeholder {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--red-dim); border: 1px solid var(--red-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.team-badge {
  display: inline-block;
  background: var(--red-dim); border: 1px solid var(--red-border);
  color: var(--red); font-size: 8px; padding: 1px 6px;
  border-radius: 3px; letter-spacing: 1px; font-family: monospace;
  margin-bottom: 3px;
}
.team-name { font-size: 14px; font-weight: 700; color: var(--text); }
.team-role { font-size: 10px; color: rgba(212,175,55,0.75); font-family: serif; }
.team-desc { font-size: 13px; color: #aaa; line-height: 1.6; margin-top: 5px; }
.team-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--red-dim); border: 1px solid var(--red-border);
  color: var(--red); font-size: 9px; padding: 4px 10px;
  border-radius: 4px; cursor: pointer; margin-top: 8px;
  font-family: monospace; letter-spacing: 1px; text-decoration: none;
}
.question-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.85); z-index: 200;
  align-items: center; justify-content: center; padding: 20px;
}
.question-modal.show { display: flex; }
.question-box {
  background: #0a0a1a; border: 1px solid var(--red-border);
  border-radius: 14px; padding: 20px; width: 100%; max-width: 340px;
}
.question-box textarea {
  width: 100%; background: rgba(0,0,0,0.4);
  border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 10px; font-size: 13px;
  resize: none; height: 100px; margin: 10px 0; font-family: -apple-system, sans-serif;
}

/* ===== АДМИН ===== */
.admin-section { display: none; }
.admin-input {
  width: 100%; background: rgba(0,0,0,0.28);
  border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px;
  margin-bottom: 6px; font-family: monospace;
  transition: border-color var(--transition-fast) var(--ease-standard);
}
.admin-input:focus { outline: none; border-color: color-mix(in srgb, var(--red) 40%, transparent); }

/* ===== ADMIN NAV GRID ===== */
.admin-nav-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 5px;
  padding: 6px 12px 10px;
}
.admin-sec-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 4px 8px;
  min-width: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg2);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-standard);
}
.admin-nav-icon { font-size: 18px; line-height: 1; display: block; }
.admin-nav-icon svg { width: 19px; height: 19px; display: block; stroke: currentColor; color: var(--gold); }
.admin-sec-btn.active .admin-nav-icon svg { color: var(--gold); }
.admin-nav-label {
  display: block;
  font-size: 7.5px;
  color: var(--text3);
  font-family: monospace;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Secondary admin action button (toggles, non-filter) */
.admin-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-standard);
}
.admin-action-btn:hover {
  border-color: var(--gold-border);
  color: var(--gold);
  background: var(--gold-dim);
}
.admin-sec-btn:hover { border-color: color-mix(in srgb, var(--border) 160%, transparent); background: var(--bg3); }
.admin-sec-btn.active {
  background: var(--red-dim);
  border-color: var(--red-border);
}
.admin-sec-btn.active .admin-nav-label { color: var(--red); }

/* Admin filter chips (contracts, etc.) */
.admin-filter-wrap { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0; }
.admin-filter-btn {
  padding: 5px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent;
  color: var(--text3); font-size: 9px; font-family: monospace;
  cursor: pointer; white-space: nowrap;
  transition: all var(--transition-fast) var(--ease-standard);
}
.admin-filter-btn:hover { border-color: var(--red-border); color: var(--text2); }
.admin-filter-btn.active { background: var(--red-dim); border-color: var(--red-border); color: var(--red); }

.admin-console-card {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-left: 2px solid var(--red-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bg2) 90%, transparent), color-mix(in srgb, var(--bg3) 66%, transparent)),
    var(--bg2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.admin-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.admin-console-kicker {
  color: var(--red);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1.6px;
}
.admin-console-title {
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
}
.admin-console-refresh {
  border: 1px solid var(--gold-border);
  background: var(--gold-dim);
  color: var(--gold);
  border-radius: 10px;
  padding: 7px 9px;
  font-family: monospace;
  font-size: 8px;
  font-weight: 800;
}
.admin-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.admin-user-results,
.admin-action-log {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-user-card,
.admin-log-card,
.admin-selected-user {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg3) 72%, transparent);
  padding: 10px;
}
.admin-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.admin-user-card.active {
  border-color: var(--gold-border);
  background: color-mix(in srgb, var(--gold-dim) 60%, var(--bg3));
}
.admin-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--red-border);
  background: var(--red-dim);
  color: var(--red);
  font-weight: 900;
  font-family: monospace;
  overflow: hidden;
  flex-shrink: 0;
}
.admin-user-avatar.large {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}
.admin-user-avatar.has-image {
  background: color-mix(in srgb, var(--bg3) 80%, transparent);
  color: transparent;
}
.admin-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-user-main { flex: 1; min-width: 0; }
.admin-user-name { color: var(--text); font-size: 12px; font-weight: 800; }
.admin-user-meta { color: var(--text3); font-size: 9px; font-family: monospace; margin-top: 2px; }
.admin-user-points {
  color: var(--gold);
  font-family: monospace;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.admin-selected-user {
  margin-top: 10px;
  border-color: color-mix(in srgb, var(--gold-border) 86%, transparent);
}
.admin-dossier-modal {
  position: fixed;
  inset: 0;
  z-index: 6200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: calc(18px + var(--tg-safe-top, 0px)) 12px calc(18px + var(--tg-safe-bottom, 0px));
}
.admin-dossier-modal.show {
  display: flex;
}
.admin-dossier-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(8px);
}
.admin-dossier-sheet {
  position: relative;
  width: min(100%, 460px);
  max-height: min(78vh, 620px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--gold-border) 64%, var(--border));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--gold-dim) 42%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--bg2) 96%, transparent), color-mix(in srgb, var(--bg3) 82%, transparent));
  box-shadow: 0 24px 70px rgba(0,0,0,0.52);
  animation: fadeIn 0.18s ease-out;
}
.admin-dossier-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.admin-dossier-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-dossier-main {
  flex: 1;
  min-width: 0;
}
.admin-dossier-room {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.admin-room-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 8px;
}
.admin-room-input {
  margin-bottom: 0;
}
.admin-roommate-title {
  margin: 10px 0 6px;
  color: var(--text3);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.admin-roommate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-roommate-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px 5px 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--bg3) 70%, transparent);
  color: var(--text2);
  font-size: 9px;
  font-weight: 700;
}
.admin-roommate-chip .admin-user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 8px;
}
.admin-roommate-empty {
  color: var(--text3);
  font-size: 10px;
}
.admin-dossier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.admin-dossier-stat {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--gold-dim) 42%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg3) 70%, transparent);
}
.admin-dossier-stat span,
.admin-dossier-panel-title {
  display: block;
  color: color-mix(in srgb, var(--gold) 82%, var(--text3));
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.admin-dossier-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-dossier-stat em {
  display: block;
  margin-top: 2px;
  color: var(--text3);
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-dossier-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.admin-dossier-quick button {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--gold-border) 55%, var(--border));
  background: color-mix(in srgb, var(--bg3) 72%, transparent);
  color: var(--gold);
  font-family: monospace;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.admin-dossier-quick button:nth-child(n + 3) {
  border-color: color-mix(in srgb, var(--red-border) 68%, var(--border));
  color: #ff6666;
}
.admin-dossier-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}
.admin-dossier-panel {
  padding: 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--bg2) 80%, transparent);
}
.admin-dossier-panel-title {
  margin-bottom: 7px;
}
.admin-dossier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 52%, transparent);
}
.admin-dossier-row:first-of-type {
  border-top: 0;
}
.admin-dossier-row strong {
  display: block;
  color: var(--text);
  font-size: 10px;
  line-height: 1.35;
}
.admin-dossier-row span {
  display: block;
  margin-top: 2px;
  color: var(--text3);
  font-size: 9px;
  line-height: 1.35;
}
.admin-dossier-row b {
  flex: 0 0 auto;
  color: var(--gold);
  font-family: monospace;
  font-size: 10px;
}
.admin-dossier-row b.plus { color: #2ecc71; }
.admin-dossier-row b.minus { color: #ff5a5a; }
.admin-dossier-row.needs_attention strong,
.admin-dossier-row.penalized strong {
  color: #ff6b6b;
}
.admin-dossier-empty {
  padding: 8px 0 2px;
  color: var(--text3);
  font-size: 10px;
}
.economy-journal {
  display: grid;
  gap: 7px;
}
.economy-log-card {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 13px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg2) 86%, transparent), color-mix(in srgb, var(--bg) 72%, transparent)),
    radial-gradient(circle at 0 0, var(--gold-dim), transparent 42%);
}
.economy-log-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gold);
  opacity: 0.8;
}
.economy-log-card.spend::before,
.economy-log-card.danger::before { background: #ff5a5a; }
.economy-log-card.gain::before { background: #2ecc71; }
.economy-log-card.case::before { background: #9b59b6; }
.economy-log-card.contract::before { background: #60b4d4; }
.economy-log-card.rep::before,
.economy-log-card.admin::before { background: var(--gold); }
.economy-log-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--border));
  border-radius: 10px;
  background: rgba(212,175,55,0.08);
  color: var(--gold);
  font-family: monospace;
  font-size: 10px;
  font-weight: 900;
}
.economy-log-main {
  min-width: 0;
}
.economy-log-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.economy-log-topline strong {
  overflow: hidden;
  color: var(--text);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.economy-log-topline span,
.economy-log-note {
  color: var(--text3);
  font-size: 8px;
  line-height: 1.35;
}
.economy-log-note {
  overflow: hidden;
  margin-top: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.economy-log-amount {
  padding: 4px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  font-family: monospace;
  font-size: 10px;
  white-space: nowrap;
}
.economy-log-amount.plus { color: #2ecc71; }
.economy-log-amount.minus { color: #ff5a5a; }
.economy-log-amount.zero { color: var(--text3); }
.admin-log-card {
  display: grid;
  gap: 4px;
}
.admin-log-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-log-delta {
  font-family: monospace;
  font-size: 12px;
  font-weight: 900;
}
.admin-log-delta.plus { color: #2ecc71; }
.admin-log-delta.minus { color: #ff5a5a; }
.admin-log-text { color: var(--text); font-size: 11px; line-height: 1.35; }
.admin-log-meta { color: var(--text3); font-family: monospace; font-size: 8px; }

.admin-contracts-section-title {
  margin: 12px 0 8px;
  color: var(--text3);
  font-family: monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.admin-contracts-section-title.danger {
  color: #e74c3c;
  text-shadow: 0 0 10px rgba(231,76,60,0.24);
}

.admin-contract-card {
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(96,180,212,0.08), transparent 40%),
    color-mix(in srgb, var(--bg3) 82%, transparent);
}

.admin-contract-card.suspicious {
  border-color: rgba(231,76,60,0.34);
  background:
    radial-gradient(circle at 0% 0%, rgba(231,76,60,0.09), transparent 42%),
    color-mix(in srgb, var(--bg3) 84%, transparent);
}

.admin-contract-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.admin-contract-titlebox {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.admin-contract-titlebox strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-contract-anon {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid rgba(230,126,34,0.36);
  border-radius: 999px;
  color: #e67e22;
  font-family: monospace;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-contract-category {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.35;
}

.admin-contract-side {
  flex-shrink: 0;
  text-align: right;
}

.admin-contract-status {
  color: var(--admin-contract-status);
  font-family: monospace;
  font-size: 10px;
  font-weight: 900;
}

.admin-contract-reward {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.admin-contract-meta {
  color: var(--text3);
  font-family: monospace;
  font-size: 10px;
  line-height: 1.5;
}

.admin-contract-warning {
  margin: 5px 0 0;
  color: #e74c3c;
  font-family: monospace;
  font-size: 9px;
}

.admin-contract-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.admin-contract-action {
  margin-top: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  font-family: monospace;
  font-size: 9px;
  font-weight: 900;
}

.admin-contract-action.refund { border-color: rgba(230,126,34,0.52); color: #e67e22; }
.admin-contract-action.pay { border-color: rgba(46,204,113,0.52); color: #2ecc71; }
.admin-contract-action.split { border-color: rgba(52,152,219,0.52); color: #3498db; }
.admin-contract-action.burn { border-color: rgba(231,76,60,0.52); color: #e74c3c; }

.admin-contract-monitor-actions {
  margin: 10px 0 4px;
}

.contract-monitor-panel {
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid rgba(96,180,212,0.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(96,180,212,0.10), transparent 42%),
    rgba(255,255,255,0.035);
}

.contract-monitor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.contract-monitor-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.contract-monitor-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.contract-monitor-stat {
  padding: 9px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 11px;
  background: rgba(0,0,0,0.12);
}

.contract-monitor-stat span,
.contract-monitor-stat em,
.contract-monitor-row span {
  display: block;
  color: var(--text3);
  font-family: monospace;
  font-size: 9px;
  font-style: normal;
}

.contract-monitor-stat strong {
  display: block;
  margin: 3px 0;
  color: var(--gold);
  font-size: 18px;
  font-weight: 950;
}

.contract-monitor-note {
  margin-bottom: 10px;
  color: var(--text2);
  font-family: monospace;
  font-size: 10px;
  line-height: 1.5;
}

.contract-monitor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.contract-monitor-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 11px;
  background: rgba(0,0,0,0.10);
}

.contract-monitor-row.risk {
  border-color: rgba(231,76,60,0.26);
  background: rgba(231,76,60,0.06);
}

.contract-monitor-row strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 11px;
}

.contract-monitor-row b {
  color: var(--gold);
  font-family: monospace;
  font-size: 10px;
}

.contract-monitor-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.contract-monitor-flags span {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(231,76,60,0.12);
  color: #e74c3c;
}

/* Economy report: compact, expandable player rows */
.economy-report-row {
  margin-bottom: 7px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 11px;
  background: rgba(0,0,0,0.10);
  cursor: pointer;
}
.economy-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.economy-report-head strong {
  display: inline;
  color: var(--text);
  font-size: 12px;
}
.economy-report-id {
  display: block;
  margin-top: 1px;
  color: var(--text3);
  font-family: monospace;
  font-size: 9px;
}
.economy-report-net {
  flex-shrink: 0;
  font-family: monospace;
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
}
.economy-report-net.pos { color: var(--gold); }
.economy-report-net.neg { color: #e74c3c; }
.economy-report-details {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.economy-report-row.expanded .economy-report-details { display: block; }
.economy-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.economy-report-stat {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.economy-report-stat span {
  display: block;
  color: var(--text3);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 0.5px;
}
.economy-report-stat b {
  display: block;
  margin-top: 2px;
  color: var(--text2);
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
}
.admin-console-note {
  color: var(--text3);
  font-family: monospace;
  font-size: 8px;
  line-height: 1.45;
  margin-top: 8px;
}

.admin-presence-hero {
  border-color: color-mix(in srgb, var(--gold-border) 55%, var(--border));
}
.admin-presence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.admin-presence-card {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--red-dim) 52%, transparent), transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--bg2) 92%, transparent), color-mix(in srgb, var(--bg3) 72%, transparent));
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}
.admin-presence-card::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity: 0.6;
}
.admin-presence-icon {
  position: absolute;
  right: 12px;
  top: 8px;
  color: color-mix(in srgb, var(--red) 18%, transparent);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.admin-presence-main {
  position: relative;
  padding-right: 42px;
  margin-bottom: 12px;
}
.admin-presence-kicker {
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1.6px;
  color: var(--gold);
}
.admin-presence-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  margin-top: 3px;
}
.admin-presence-desc {
  color: var(--text3);
  font-size: 10px;
  line-height: 1.45;
  margin-top: 4px;
}
.admin-presence-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 7px;
  margin-bottom: 12px;
}
.admin-presence-btn {
  min-height: 36px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg3) 70%, transparent);
  color: var(--text2);
  font-family: monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.admin-presence-btn.primary {
  border-color: var(--gold-border);
  background: var(--gold-dim);
  color: var(--gold);
}
.admin-presence-btn.danger {
  border-color: var(--red-border);
  background: var(--red-dim);
  color: var(--red);
}
.admin-presence-status {
  display: grid;
  gap: 9px;
}
.admin-presence-date {
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--text3);
}
.admin-presence-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.admin-presence-chip {
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--bg3) 72%, transparent);
}
.admin-presence-chip span {
  display: block;
  color: var(--text3);
  font-size: 8px;
  line-height: 1.2;
}
.admin-presence-chip strong {
  display: block;
  color: var(--text);
  font-family: monospace;
  font-size: 15px;
  margin-top: 2px;
}
.admin-presence-chip.pending strong,
.admin-presence-chip.leave_requested strong,
.admin-presence-chip.needs_attention strong { color: var(--gold); }
.admin-presence-chip.confirmed strong,
.admin-presence-chip.free_time strong,
.admin-presence-chip.admin_approved strong { color: #32d872; }
.admin-presence-chip.penalized strong,
.admin-presence-chip.leave_rejected strong { color: #ff5a5a; }
.admin-presence-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-presence-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--bg3) 66%, transparent);
}
.admin-presence-name {
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}
.admin-presence-meta {
  color: var(--text3);
  font-family: monospace;
  font-size: 8px;
  margin-top: 2px;
}
.admin-presence-row-badge {
  flex-shrink: 0;
  padding: 4px 6px;
  border-radius: 999px;
  border: 1px solid var(--gold-border);
  background: var(--gold-dim);
  color: var(--gold);
  font-family: monospace;
  font-size: 7px;
  font-weight: 900;
}

/* Admin panel header */
.admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 8px;
  gap: 10px;
}
.admin-panel-kicker {
  font-family: monospace;
  font-size: 8px;
  color: var(--red);
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.admin-panel-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.3px;
}
.admin-panel-status {
  font-family: monospace;
  font-size: 9px;
  color: var(--text3);
  margin-top: 3px;
  letter-spacing: 0.3px;
}
.admin-panel-badge {
  font-family: monospace;
  font-size: 9px;
  font-weight: 800;
  color: var(--red);
  background: var(--red-dim);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  letter-spacing: 1px;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Admin 2-col form grid */
.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* Admin laundry tabs */
.admin-laundry-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.admin-laundry-tab {
  padding: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text3);
  font-family: monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.admin-laundry-tab.active {
  background: var(--red-dim);
  border-color: var(--red-border);
  color: var(--red);
}

/* Admin slot day-picker buttons (Сегодня/Завтра/Послезавтра) */
.admin-day-btns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.admin-day-btn {
  padding: 8px 4px;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text3);
  font-family: monospace;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.admin-day-btn.active {
  background: var(--red-dim);
  border-color: var(--red-border);
  color: var(--red);
}

/* Admin slot list */
.admin-slot-list-label {
  font-family: monospace;
  font-size: 8px;
  color: var(--text3);
  letter-spacing: 1.5px;
  padding: 0 2px 8px;
}
.admin-slot-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.admin-slot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg2);
  transition: border-color 0.15s;
}
.admin-slot-item.taken {
  border-color: rgba(40,200,100,0.22);
  background: rgba(40,200,100,0.04);
}
.admin-slot-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.admin-slot-item.taken .admin-slot-icon { color: #32d872; }
.admin-slot-item.free  .admin-slot-icon { color: var(--text3); }
.admin-slot-info { flex: 1; min-width: 0; }
.admin-slot-time { font-size: 11px; font-weight: 700; color: var(--text); font-family: monospace; }
.admin-slot-note { font-size: 9px; color: var(--text3); margin-top: 1px; }
.admin-slot-status { font-size: 9px; margin-top: 2px; }
.admin-slot-item.taken .admin-slot-status { color: #32d872; }
.admin-slot-item.free  .admin-slot-status { color: var(--text3); }
.admin-slot-del {
  background: none;
  border: 1px solid rgba(200,50,50,0.25);
  color: rgba(200,80,80,0.55);
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.admin-slot-del:hover { border-color: rgba(200,50,50,0.55); color: var(--red); }

/* BlackWall card */
.admin-blackwall-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(12,5,22,0.95), rgba(22,10,35,0.85));
  border: 1px solid rgba(155,89,182,0.28);
  box-shadow: 0 0 24px rgba(155,89,182,0.08), 0 8px 24px rgba(0,0,0,0.3);
  margin-bottom: 12px;
}
.admin-blackwall-glyph {
  font-size: 40px;
  color: rgba(155,89,182,0.35);
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
  font-family: serif;
  text-shadow: 0 0 12px rgba(155,89,182,0.3);
}
.admin-blackwall-info { flex: 1; min-width: 0; }
.admin-blackwall-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 4px 0 5px;
}
.admin-blackwall-desc { font-size: 10px; color: var(--text3); line-height: 1.4; }
.admin-blackwall-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.admin-bw-btn-wide {
  grid-column: 1 / -1;
}
.admin-bw-btn {
  padding: 12px;
  border-radius: 10px;
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.15s;
}
.admin-bw-btn.bw-on {
  background: rgba(180,20,20,0.1);
  border-color: rgba(180,20,20,0.32);
  color: var(--red);
}
.admin-bw-btn.bw-on:hover { background: rgba(180,20,20,0.18); }
.admin-bw-btn.bw-off {
  background: rgba(40,200,100,0.07);
  border-color: rgba(40,200,100,0.22);
  color: #32d872;
}
.admin-bw-btn.bw-off:hover { background: rgba(40,200,100,0.13); }

/* Danger zone */
.admin-danger-zone {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(200,140,30,0.2);
  background: rgba(200,140,30,0.04);
}
.admin-danger-label {
  font-family: monospace;
  font-size: 8px;
  color: #e09a28;
  letter-spacing: 2px;
  margin-bottom: 5px;
}
.admin-danger-desc {
  font-size: 10px;
  color: var(--text3);
  margin-bottom: 10px;
  line-height: 1.45;
}
.admin-danger-btn {
  width: 100%;
  padding: 10px;
  background: none;
  border: 1px solid rgba(200,140,30,0.28);
  color: #e09a28;
  border-radius: 8px;
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.admin-danger-btn:hover { background: rgba(200,140,30,0.08); border-color: rgba(200,140,30,0.45); }

/* ===== АНИМАЦИИ ===== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shakeBox { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-3deg)} 75%{transform:rotate(3deg)} }
@keyframes revealPrize { from{transform:scale(0.5) rotate(-20deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
@keyframes roulettePurplePulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(155,89,182,0.16), inset 0 0 18px rgba(155,89,182,0.06);
    filter: saturate(1);
  }
  50% {
    box-shadow: 0 0 30px rgba(155,89,182,0.34), inset 0 0 26px rgba(155,89,182,0.12);
    filter: saturate(1.22);
  }
}
@keyframes rouletteBlackBreach {
  0%, 100% {
    box-shadow: 0 0 28px rgba(255,0,0,0.28), inset 0 0 28px rgba(255,0,0,0.12);
    filter: contrast(1.08) brightness(0.92);
  }
  50% {
    box-shadow: 0 0 46px rgba(255,0,0,0.48), inset 0 0 36px rgba(255,0,0,0.20);
    filter: contrast(1.34) brightness(0.76);
  }
}
@keyframes cyberOverlayIn{0%{opacity:0}100%{opacity:1}}
@keyframes cyberOverlayOut{0%{opacity:1}100%{opacity:0}}
@keyframes cyberItemIn{0%{transform:scale(0.2) translateY(40px);opacity:0}60%{transform:scale(1.15) translateY(-5px)}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes cyberRayIn{0%{height:0;opacity:0}100%{opacity:1}}
@keyframes cyberPulse{0%,100%{filter:drop-shadow(0 0 10px rgba(155,89,182,0.5))}50%{filter:drop-shadow(0 0 22px rgba(155,89,182,0.9))}}
@keyframes cyberPartFloat{0%{opacity:0;transform:translate(0,0) scale(0)}15%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(0.3)}}
@keyframes cyberBlink{0%,100%{opacity:0.2}50%{opacity:0.6}}
@keyframes fadeUpAnim{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}

/* ===== ВЫПАДЕНИЕ ПРИЗА: золотой кейс (голо-карта) ===== */
@keyframes prizeFlipGold{0%{transform:rotateY(180deg) scale(0.4);opacity:0}60%{transform:rotateY(0deg) scale(1.12);opacity:1}100%{transform:rotateY(0deg) scale(1)}}
@keyframes prizeShineSweep{0%{left:-150%}100%{left:200%}}
@keyframes prizeRingPulseGold{0%{transform:scale(0.4);opacity:0.9;border-width:3px}100%{transform:scale(2.6);opacity:0;border-width:1px}}

/* ===== ВЫПАДЕНИЕ ПРИЗА: фиолетовый кейс (слот-дроп) ===== */
@keyframes prizeDropPurple{0%{transform:translateY(-260px) scale(0.6);opacity:0}80%{transform:translateY(0) scale(1.15);opacity:1}100%{transform:translateY(0) scale(1)}}
@keyframes prizeShakePurple{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px) translateY(2px)}40%{transform:translateX(8px) translateY(-2px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes prizeFlashPurple{0%{opacity:0}30%{opacity:.8}100%{opacity:0}}
@keyframes prizeRingExpandPurple{0%{transform:scale(0.3);opacity:1}100%{transform:scale(7);opacity:0}}

/* ===== ВЫПАДЕНИЕ ПРИЗА: чёрный кейс (глитч-расшифровка) ===== */
@keyframes prizeGlitchBlack{
  0%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
  25%{transform:translate(-4px,2px);clip-path:inset(20% 0 30% 0);filter:hue-rotate(90deg)}
  50%{transform:translate(4px,-2px);clip-path:inset(60% 0 5% 0);filter:hue-rotate(-90deg)}
  75%{transform:translate(-2px,0);clip-path:inset(10% 0 50% 0)}
  100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
}
@keyframes prizeScanLineBlack{0%{top:-10%;opacity:1}100%{top:110%;opacity:0}}
@keyframes prizeTypewriter{from{width:0;border-right-color:rgba(255,255,255,.6)}to{width:100%;border-right-color:transparent}}
@keyframes gsBlinkHint{0%,100%{opacity:0.3}50%{opacity:0.8}}
@keyframes gsCardInNew{0%{transform:scale(0.2) translateY(50px);opacity:0}60%{transform:scale(1.08) translateY(-4px)}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes gsVortexSpin{0%{transform:rotate(0deg) scale(0.3);opacity:0}30%{opacity:1}100%{transform:rotate(720deg) scale(1.5);opacity:0}}
@keyframes gsRayIn{0%{height:0;opacity:0}100%{opacity:1}}
@keyframes gsCardIn{0%{transform:scale(0.2) translateY(50px);opacity:0}60%{transform:scale(1.08) translateY(-4px)}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes gsStarPop{0%{transform:translate(0,0) scale(0) rotate(0deg);opacity:0}40%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(1) rotate(var(--tr));opacity:0}}
@keyframes gsPartFloat{0%{opacity:0;transform:translate(0,0) scale(0)}15%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(0.3)}}
@keyframes gsFlashIn{0%{opacity:0}15%{opacity:0.85}50%{opacity:0}100%{opacity:0}}
@keyframes glitch {
  0%,100%{text-shadow:2px 0 #ff0033,-2px 0 rgba(0,255,255,0.5)}
  25%{text-shadow:-2px 0 #ff0033,2px 0 rgba(0,255,255,0.5)}
  50%{text-shadow:2px 2px #ff0033,-2px -2px rgba(0,255,255,0.5)}
}
@keyframes confettiFall {
  to { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.confetti-piece { position: fixed; top: -10px; z-index: 999; animation: confettiFall linear forwards; }

/* ===== УТИЛИТЫ ===== */
.empty-state {
  position: relative;
  text-align: center;
  margin: 10px 0;
  padding: 22px 18px;
  color: var(--text3);
  font-size: 12px;
  line-height: 1.55;
  font-family: monospace;
  border: 1px dashed color-mix(in srgb, var(--border) 74%, var(--gold-border));
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold-dim) 42%, transparent), transparent 54%),
    color-mix(in srgb, var(--bg2) 82%, transparent);
  overflow: hidden;
}
.empty-state::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 44%, transparent), transparent);
  opacity: 0.75;
}
.empty-state span {
  color: var(--text3) !important;
}
.empty-state:has(br)::after {
  content: 'STATUS // IDLE';
  display: block;
  margin-top: 8px;
  color: color-mix(in srgb, var(--gold) 58%, var(--text3));
  font-size: 8px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.section-pad { padding: 0 12px; }
.mt8 { margin-top: 8px; }
.shimmer { animation: shimmer 0.5s infinite; }
@keyframes shimmer { 0%,100%{opacity:1}50%{opacity:0.6} }

/* ===== CASE / ROULETTE IDLE ANIMATIONS ===== */
@keyframes caseIdleFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.28)); }
  50%      { transform: translateY(-3px) rotate(1deg); filter: drop-shadow(0 12px 18px rgba(212,175,55,0.22)); }
}
@keyframes caseIdlePurple {
  0%, 100% { transform: translateY(0) scale(1);    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.32)) drop-shadow(0 0 6px rgba(155,89,182,0.35)); }
  50%      { transform: translateY(-4px) scale(1.03); filter: drop-shadow(0 12px 22px rgba(0,0,0,0.32)) drop-shadow(0 0 14px rgba(190,100,255,0.7)); }
}
@keyframes caseIdleBlack {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4)) drop-shadow(0 0 8px rgba(255,30,30,0.45)); }
  35%      { transform: translateY(-2px) scale(1.02) rotate(-1.5deg); filter: drop-shadow(0 12px 22px rgba(0,0,0,0.4)) drop-shadow(0 0 16px rgba(255,40,40,0.85)); }
  50%      { transform: translateY(-5px) scale(1.04) rotate(1.5deg); filter: drop-shadow(0 14px 26px rgba(0,0,0,0.46)) drop-shadow(0 0 22px rgba(255,55,55,1)); }
  65%      { transform: translateY(-2px) scale(1.02) rotate(-1deg); filter: drop-shadow(0 12px 22px rgba(0,0,0,0.4)) drop-shadow(0 0 14px rgba(255,40,40,0.8)); }
}
.roulette-item-gold .roulette-case-img    { animation: caseIdleFloat 3.6s ease-in-out infinite; }
.roulette-item-purple .roulette-case-img  { animation: caseIdlePurple 2.8s ease-in-out infinite; }
.roulette-item-black .roulette-case-img   { animation: caseIdleBlack 2.0s ease-in-out infinite; }

/* Inner sheen sweep for purple/black idle */
.roulette-item-purple::before,
.roulette-item-black::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.07) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: caseSheen 4.2s ease-in-out infinite;
}
.roulette-item-black::before { animation-duration: 2.6s; background: linear-gradient(115deg, transparent 35%, rgba(255,80,80,0.18) 50%, transparent 65%); }
@keyframes caseSheen {
  0%   { transform: translateX(-110%); }
  60%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}

/* ===== CASE OPENING BURST (per rarity) ===== */
@keyframes caseBurstGold {
  0%   { transform: scale(1) rotate(0); }
  20%  { transform: scale(1.06) rotate(-4deg); }
  40%  { transform: scale(0.96) rotate(4deg); }
  60%  { transform: scale(1.10) rotate(-3deg); }
  80%  { transform: scale(1.02) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes caseBurstPurple {
  0%   { transform: scale(1) rotate(0); filter: brightness(1); }
  15%  { transform: scale(1.08) rotate(-6deg); filter: brightness(1.2) saturate(1.3); }
  35%  { transform: scale(0.92) rotate(7deg); filter: brightness(1.4) saturate(1.5); }
  55%  { transform: scale(1.16) rotate(-5deg); filter: brightness(1.6) saturate(1.6); }
  75%  { transform: scale(0.98) rotate(3deg); filter: brightness(1.3) saturate(1.3); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
}
@keyframes caseBurstBlack {
  0%   { transform: scale(1) rotate(0) translateX(0); filter: brightness(1) hue-rotate(0); }
  10%  { transform: scale(1.05) rotate(-3deg) translateX(-2px); filter: brightness(1.3) hue-rotate(-10deg); }
  20%  { transform: scale(0.94) rotate(5deg) translateX(3px);   filter: brightness(1.6) hue-rotate(8deg); }
  30%  { transform: scale(1.10) rotate(-6deg) translateX(-4px); filter: brightness(1.8) hue-rotate(-15deg); }
  40%  { transform: scale(0.90) rotate(7deg) translateX(4px);   filter: brightness(2.1) hue-rotate(12deg); }
  55%  { transform: scale(1.22) rotate(-4deg) translateX(-2px); filter: brightness(2.4) hue-rotate(-8deg); }
  70%  { transform: scale(1.06) rotate(2deg) translateX(1px);   filter: brightness(1.6) hue-rotate(0); }
  100% { transform: scale(1) rotate(0) translateX(0); filter: brightness(1) hue-rotate(0); }
}
.roulette-item.opening                 { animation: caseBurstGold 0.55s ease-in-out; }
.roulette-item.opening.winner-purple   { animation: caseBurstPurple 0.6s ease-in-out; }
.roulette-item.opening.winner-black    { animation: caseBurstBlack 0.7s ease-in-out; }

/* Shockwave pulse on the winning case slot */
@keyframes caseShockwave {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0.55), 0 0 20px rgba(212,175,55,0.3); }
  100% { box-shadow: 0 0 0 60px rgba(212,175,55,0), 0 0 20px rgba(212,175,55,0.3); }
}
@keyframes caseShockwavePurple {
  0%   { box-shadow: 0 0 0 0 rgba(190,100,255,0.6), 0 0 26px rgba(155,89,182,0.46); }
  100% { box-shadow: 0 0 0 80px rgba(190,100,255,0), 0 0 26px rgba(155,89,182,0.46); }
}
@keyframes caseShockwaveBlack {
  0%   { box-shadow: 0 0 0 0 rgba(255,45,45,0.75), 0 0 36px rgba(255,0,0,0.58), inset 0 0 20px rgba(255,0,0,0.16); }
  100% { box-shadow: 0 0 0 110px rgba(255,45,45,0), 0 0 36px rgba(255,0,0,0.58), inset 0 0 20px rgba(255,0,0,0.16); }
}
.roulette-item.winner.opened           { animation: caseShockwave 0.9s ease-out; }
.roulette-item.winner-purple.opened    { animation: caseShockwavePurple 1.0s ease-out; }
.roulette-item.winner-black.opened     { animation: caseShockwaveBlack 1.1s ease-out; }

/* Replace generic revealPrize with rarity-tiered variants */
@keyframes revealPrize         { 0%{transform:scale(0.5) rotate(-20deg);opacity:0} 60%{transform:scale(1.1) rotate(4deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes revealPrizePurple   { 0%{transform:scale(0.3) rotate(-180deg);opacity:0;filter:blur(6px)} 50%{transform:scale(1.18) rotate(10deg);filter:blur(0)} 75%{transform:scale(0.94) rotate(-4deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes revealPrizeLegendary{
  0%   { transform: scale(0.2) rotate(-360deg); opacity: 0; filter: blur(10px) brightness(2); }
  35%  { transform: scale(1.4) rotate(20deg); opacity: 1; filter: blur(0) brightness(1.6); }
  55%  { transform: scale(0.86) rotate(-8deg); filter: brightness(1.2); }
  75%  { transform: scale(1.08) rotate(4deg); filter: brightness(1.0); }
  100% { transform: scale(1) rotate(0); opacity: 1; filter: brightness(1); }
}
.opened-purple .roulette-prize-reveal  { animation: revealPrizePurple 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.opened-black .roulette-prize-reveal   { animation: revealPrizeLegendary 1.0s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ===== LEGENDARY SCREEN FLASH ===== */
.legendary-screen-flash {
  position: fixed; inset: 0; z-index: 9998;
  background: radial-gradient(ellipse at center, rgba(255,220,80,0.85) 0%, rgba(255,80,40,0.55) 40%, rgba(0,0,0,0) 75%);
  pointer-events: none; opacity: 0;
  animation: legendaryFlash 0.7s ease-out forwards;
  mix-blend-mode: screen;
}
.purple-screen-flash {
  position: fixed; inset: 0; z-index: 9998;
  background: radial-gradient(ellipse at center, rgba(190,100,255,0.6) 0%, rgba(120,40,180,0.35) 45%, rgba(0,0,0,0) 75%);
  pointer-events: none; opacity: 0;
  animation: legendaryFlash 0.55s ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes legendaryFlash {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 1; transform: scale(1.05); }
  60%  { opacity: 0.55; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* Stronger pulse intensity on legendary cyber overlay image */
.cyber-result-legendary { animation: cyberPulseLegendary 1.6s ease-in-out infinite !important; }
@keyframes cyberPulseLegendary {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(255,200,0,0.7)) drop-shadow(0 0 28px rgba(255,80,0,0.4)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 28px rgba(255,220,60,1)) drop-shadow(0 0 56px rgba(255,120,0,0.7)); transform: scale(1.05); }
}

/* BlackWall */
.blackwall-screen {
  min-height: 300px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #000; border-radius: 14px;
  border: 1px solid #ff0000; padding: 30px; text-align: center; margin: 12px;
}
.blackwall-title {
  font-size: 28px; font-weight: 900; color: #ff2200;
  text-shadow: 0 0 20px #ff2200; letter-spacing: 4px;
  margin-bottom: 12px; animation: glitch 2s infinite; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .profile-holo-ring {
    animation: none !important;
  }
}

.architect-event-entry-overlay {
  position: fixed;
  inset: 0;
  z-index: 6500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 20, 20, 0.18), transparent 25%),
    linear-gradient(180deg, rgba(12, 0, 0, 0.48), rgba(0, 0, 0, 0.78)),
    rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
}

.architect-event-entry-overlay.show {
  display: flex;
}

.architect-event-entry-card {
  position: relative;
  width: min(100%, 420px);
  overflow: hidden;
  border: 1px solid rgba(255, 42, 42, 0.60);
  border-radius: 18px;
  padding: 22px 18px 20px;
  background:
    linear-gradient(135deg, rgba(130, 0, 0, 0.42), rgba(5, 4, 10, 0.97) 44%, rgba(0, 0, 0, 0.99)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px);
  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.78),
    0 0 56px rgba(255, 0, 0, 0.28),
    0 0 120px rgba(255, 0, 0, 0.12),
    inset 0 0 38px rgba(255, 0, 0, 0.10);
  animation: architectEntryGlitchIn 0.44s cubic-bezier(0.22,1,0.36,1) both;
}

.architect-event-entry-card::before,
.architect-event-entry-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.architect-event-entry-card::before {
  inset: 10px;
  border: 1px solid rgba(255, 65, 45, 0.18);
  clip-path: polygon(0 0, 42px 0, 42px 2px, 2px 2px, 2px 42px, 0 42px, 0 0, 100% 0, 100% 100%, calc(100% - 46px) 100%, calc(100% - 46px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 46px), 100% calc(100% - 46px));
}

.architect-event-entry-card::after {
  top: 0;
  left: -30%;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 45, 35, 0.18), transparent);
  transform: skewX(-16deg);
  animation: architectEntrySweep 1.8s linear infinite;
}

.architect-event-entry-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 0, 0, 0.055) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, transparent, rgba(255, 0, 0, 0.12), transparent);
  mix-blend-mode: screen;
  opacity: 0.8;
  animation: architectEntryScan 1.1s linear infinite;
}

.architect-event-entry-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.82);
  font-size: 20px;
  cursor: pointer;
}

.architect-event-entry-kicker,
.architect-event-entry-title,
.architect-event-entry-copy,
.architect-event-entry-grid,
.architect-event-entry-accept {
  position: relative;
  z-index: 1;
}

.architect-event-entry-kicker {
  padding-right: 44px;
  color: rgba(255, 180, 110, 0.78);
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
}

.architect-event-entry-title {
  margin-top: 16px;
  color: #fff;
  font-size: 34px;
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow:
    0 0 34px rgba(255, 50, 35, 0.44),
    -2px 0 rgba(255, 0, 0, 0.40),
    2px 0 rgba(0, 230, 255, 0.22);
  animation: architectTextGlitch 1.7s steps(2) infinite;
}

.architect-event-entry-copy {
  margin-top: 14px;
  padding: 14px 14px 14px 16px;
  border-left: 3px solid rgba(255, 38, 38, 0.72);
  background: rgba(255, 255, 255, 0.035);
  color: #f3dddd;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 750;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.architect-event-entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 14px;
}

.architect-event-entry-grid span {
  padding: 8px 10px;
  border: 1px solid rgba(255, 50, 40, 0.20);
  background: rgba(255, 0, 0, 0.065);
  color: rgba(255, 190, 150, 0.88);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 1.7px;
}

.architect-event-entry-accept {
  width: 100%;
  margin-top: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(255, 52, 52, 0.68);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(195, 12, 12, 0.62), rgba(42, 3, 8, 0.97));
  color: #fff;
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 2.2px;
  cursor: pointer;
  box-shadow: 0 0 32px rgba(255, 0, 0, 0.22), inset 0 1px 0 rgba(255,100,80,0.18);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.architect-event-entry-accept:active {
  transform: scale(0.97);
  box-shadow: 0 0 18px rgba(255, 0, 0, 0.14);
}

@keyframes architectEntryGlitchIn {
  0%   { opacity: 0; transform: translateY(18px) scale(0.96) skewX(-3deg); filter: blur(6px) brightness(0.4); }
  30%  { opacity: 0.9; transform: translateY(-3px) scale(1.02) skewX(2deg); filter: blur(0) brightness(1.2); }
  55%  { opacity: 1; transform: translateY(2px) scale(0.99) skewX(-0.5deg); filter: blur(0) brightness(1); }
  100% { opacity: 1; transform: translateY(0) scale(1) skewX(0); filter: blur(0) brightness(1); }
}

@keyframes architectEntrySweep {
  0% { transform: translateX(-130%) skewX(-16deg); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(360%) skewX(-16deg); opacity: 0; }
}

@keyframes architectEntryScan {
  0% { transform: translateY(-18%); opacity: 0.46; }
  50% { opacity: 0.88; }
  100% { transform: translateY(18%); opacity: 0.46; }
}

.architect-banner-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(40,0,0,0.32);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

.architect-banner-overlay.show {
  display: flex;
  animation: architectScreenShake 2.6s 0.4s infinite linear;
}

.architect-banner-redflash {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(255,0,0,0.5);
  mix-blend-mode: hard-light;
  opacity: 0;
  animation: architectRedFlash 2.6s infinite steps(1);
}

.architect-banner-glitchbar {
  position: fixed;
  left: 0;
  right: 0;
  height: 16px;
  background: rgba(255,30,30,0.55);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

.architect-banner-glitchbar-1 {
  top: 22%;
  animation: architectGlitchBar1 1.8s infinite steps(1);
}

.architect-banner-glitchbar-2 {
  top: 64%;
  height: 10px;
  animation: architectGlitchBar2 2.2s infinite steps(1);
}

.architect-banner-glitchbar-3 {
  top: 42%;
  height: 6px;
  animation: architectGlitchBar2 1.5s infinite steps(1) reverse;
}

.architect-banner-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 360px;
  padding: 28px 24px;
  color: #fff;
  font-family: monospace;
  text-align: center;
}

.architect-banner-overlay.show .architect-banner-card {
  animation: architectBannerEnter 0.4s steps(8, end);
}

.architect-banner-eye {
  position: relative;
  width: 96px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(40,0,0,0.9), #000 70%);
  box-shadow:
    0 0 30px rgba(255,20,20,0.55),
    inset 0 0 20px rgba(255,0,0,0.4);
  overflow: hidden;
  animation: architectEyeBlink 4.4s infinite;
}

.architect-banner-eye-iris {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ff5050 0%, #ff1010 45%, #4a0000 100%);
  box-shadow: 0 0 18px rgba(255,30,30,0.85);
  animation: architectEyePulse 1.6s ease-in-out infinite;
}

.architect-banner-eye-iris::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #1a0000;
}

.architect-banner-eye-scan {
  position: absolute;
  inset: -10% 0;
  background: linear-gradient(180deg, transparent, rgba(255,80,80,0.55), transparent);
  animation: architectEyeScan 2.6s linear infinite;
}

.architect-banner-title {
  position: relative;
  margin: 12px 0 0;
  padding: 0;
  color: #ff2b2b;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 32px rgba(255,30,30,0.55);
}

.architect-banner-title::before,
.architect-banner-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.architect-banner-title::before {
  color: #fff;
  z-index: -1;
  animation: architectGlitchTop 1.4s infinite linear alternate-reverse;
}

.architect-banner-title::after {
  color: #ff8a6a;
  z-index: -2;
  animation: architectGlitchBottom 1.7s infinite linear alternate-reverse;
}

.architect-banner-subtitle {
  margin-top: 12px;
  color: #ff8a6a;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.architect-banner-actions {
  margin-top: 22px;
}

.architect-banner-dismiss {
  width: 100%;
  padding: 14px;
  border: none;
  background: transparent;
  color: #ff2b2b;
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 3px;
  cursor: pointer;
}

.architect-banner-dismiss:hover {
  color: #ff8a6a;
}

@keyframes architectScreenShake {
  0%, 96%, 100% { transform: translate(0, 0); }
  96.5% { transform: translate(-4px, 2px); }
  97% { transform: translate(3px, -2px); }
  97.5% { transform: translate(-2px, 3px); }
  98% { transform: translate(2px, -1px); }
  98.5% { transform: translate(0, 0); }
}

@keyframes architectEyeBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
  97% { transform: scaleY(1); }
}

@keyframes architectEyePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.85; }
}

@keyframes architectEyeScan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes architectGlitchTop {
  0% { clip-path: inset(0 0 85% 0); transform: translate(-2px, -1px); }
  20% { clip-path: inset(10% 0 60% 0); transform: translate(2px, 1px); }
  40% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 1px); }
  60% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
  80% { clip-path: inset(20% 0 70% 0); transform: translate(-1px, 2px); }
  100% { clip-path: inset(0 0 90% 0); transform: translate(1px, -2px); }
}

@keyframes architectGlitchBottom {
  0% { clip-path: inset(85% 0 0 0); transform: translate(2px, 1px); }
  20% { clip-path: inset(60% 0 10% 0); transform: translate(-2px, -1px); }
  40% { clip-path: inset(30% 0 40% 0); transform: translate(2px, -1px); }
  60% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, 1px); }
  80% { clip-path: inset(70% 0 20% 0); transform: translate(1px, -2px); }
  100% { clip-path: inset(90% 0 0 0); transform: translate(-1px, 2px); }
}

@keyframes architectGlitchBar1 {
  0%, 91%, 100% { opacity: 0; transform: translateX(0); }
  92% { opacity: 1; transform: translateX(-6%); }
  94% { opacity: 0.6; transform: translateX(4%); }
  96% { opacity: 1; transform: translateX(-3%); }
  98% { opacity: 0; transform: translateX(0); }
}

@keyframes architectGlitchBar2 {
  0%, 70%, 100% { opacity: 0; transform: translateX(0); }
  71% { opacity: 1; transform: translateX(8%); }
  73% { opacity: 0.5; transform: translateX(-5%); }
  75% { opacity: 0; transform: translateX(0); }
}

@keyframes architectRedFlash {
  0%, 90%, 100% { opacity: 0; }
  91% { opacity: 0.55; }
  92% { opacity: 0.1; }
  93% { opacity: 0.4; }
  94% { opacity: 0; }
}

@keyframes architectBannerEnter {
  0% { opacity: 0; filter: brightness(3) contrast(2); }
  30% { opacity: 1; filter: brightness(0.4); }
  45% { opacity: 0.6; filter: brightness(2); }
  60% { opacity: 1; filter: brightness(0.8); }
  100% { opacity: 1; filter: brightness(1); }
}

/* --- КРИТИЧЕСКИЙ CSS ДЛЯ РЕЙДА --- */

/* Оверлей фона (размытие и затемнение) */
.raid-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(circle at 50% 18%, rgba(212,175,55,0.08), transparent 28%),
        radial-gradient(circle at 50% 120%, rgba(204,34,0,0.12), transparent 42%),
        rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Поверх всего */
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-out;
}

.raid-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Контейнер контента */
.raid-content {
    width: 90%;
    max-width: 400px;
    max-height: min(92vh, 760px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 35%),
        linear-gradient(145deg, rgba(204,34,0,0.08), rgba(5,5,16,0.96) 55%);
    border: 1px solid rgba(204,34,0,0.5);
    box-shadow: 0 0 35px rgba(204,34,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.03);
    border-radius: 18px;
    padding: 18px 18px 20px;
    text-align: center;
    position: relative;
    overflow-x: hidden;
    transform: scale(0.8) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.raid-overlay.active .raid-content {
    transform: scale(1) translateY(0);
}

.raid-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 18%, transparent 36%),
        repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px);
    opacity: 0.7;
    pointer-events: none;
}

.raid-content::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    border: 1px solid rgba(212,175,55,0.08);
    pointer-events: none;
}

/* Рамка Босса */
.boss-frame {
    position: relative;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 320px;
}

.boss-frame::before,
.boss-frame::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.boss-frame::before {
    width: 312px;
    height: 344px;
    border-radius: 30px;
    border: 1px solid rgba(204,34,0,0.22);
    box-shadow: 0 0 28px rgba(204,34,0,0.08);
}

.boss-frame::after {
    width: 215px;
    height: 215px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.14), transparent 70%);
    filter: blur(6px);
}

.boss-img {
    width: 290px;
    height: 320px;
    object-fit: contain;
    object-position: center center;
    border-radius: 28px;
    border: 1px solid rgba(204,34,0,0.55);
    padding: 8px;
    background:
      radial-gradient(circle at 50% 22%, rgba(255,255,255,0.08), transparent 48%),
      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.14));
    box-shadow: 0 0 22px rgba(204,34,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.04);
    /* Начальное состояние для анимации появления */
    transform: scale(0) rotate(-180deg);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s; /* Задержка появления */
}

.raid-overlay.active .boss-img {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

/* Постоянная анимация "парения" босса */
@keyframes bossFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.015); }
}

.raid-overlay.active .boss-img {
    animation: bossFloat 4s ease-in-out infinite 0.9s;
}

/* Имя и Титул */
.boss-name-wrap {
    margin-bottom: 20px;
}

.boss-name {
    font-size: 20px;
    font-weight: bold;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.boss-title {
    font-size: 12px;
    color: var(--red);
    opacity: 0.8;
}

.raid-kicker {
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(212,175,55,0.22);
    background: rgba(212,175,55,0.08);
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 1.2px;
    font-family: monospace;
    text-transform: uppercase;
}

.raid-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff4b2b;
    box-shadow: 0 0 12px rgba(255,75,43,0.8);
    animation: raidPulseDot 1.5s ease-in-out infinite;
}

@keyframes raidPulseDot {
    0%, 100% { transform: scale(0.9); opacity: 0.65; }
    50% { transform: scale(1.2); opacity: 1; }
}

.raid-threat-strip {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}

.raid-chip {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.035);
    color: var(--text2);
    font-size: 9px;
    font-family: monospace;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.raid-brief-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 0 0 12px;
}

.raid-brief-card {
    padding: 8px 7px;
    border-radius: 12px;
    border: 1px solid rgba(212,175,55,0.14);
    background:
      radial-gradient(circle at top, var(--gold-dim), transparent 62%),
      rgba(255,255,255,0.035);
}

.raid-brief-card span {
    display: block;
    color: var(--text3);
    font-family: monospace;
    font-size: 8px;
    letter-spacing: 1px;
}

.raid-brief-card strong {
    display: block;
    margin-top: 3px;
    color: var(--gold);
    font-size: 14px;
    font-weight: 900;
}

/* Блок Прогресса */
.raid-status-block {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
      rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.raid-status-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transform: translateX(-120%);
    animation: raidSweep 3.2s linear infinite;
    pointer-events: none;
}

@keyframes raidSweep {
    to { transform: translateX(140%); }
}

.raid-meter-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.raid-meter-eyebrow {
    font-size: 9px;
    color: var(--text3);
    font-family: monospace;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.raid-meter-state {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(212,175,55,0.09);
    border: 1px solid rgba(212,175,55,0.2);
    color: var(--gold);
    font-size: 9px;
    font-family: monospace;
    letter-spacing: 0.9px;
}

.raid-count-label {
    font-size: 12px;
    color: var(--text2);
    margin-bottom: 8px;
    display: flex; justify-content: space-between;
}

/* Прогресс-бар */
.raid-progress-container {
    width: 100%;
    height: 14px;
    background:
      linear-gradient(90deg, rgba(255,255,255,0.03) 0 8%, transparent 8% 10%, rgba(255,255,255,0.03) 10% 18%, transparent 18% 20%, rgba(255,255,255,0.03) 20% 28%, transparent 28% 30%, rgba(255,255,255,0.03) 30% 38%, transparent 38% 40%, rgba(255,255,255,0.03) 40% 48%, transparent 48% 50%, rgba(255,255,255,0.03) 50% 58%, transparent 58% 60%, rgba(255,255,255,0.03) 60% 68%, transparent 68% 70%, rgba(255,255,255,0.03) 70% 78%, transparent 78% 80%, rgba(255,255,255,0.03) 80% 88%, transparent 88% 90%, rgba(255,255,255,0.03) 90% 100%),
      rgba(255,255,255,0.04);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.28);
}

.raid-progress-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 55%);
    pointer-events: none;
}

.raid-progress-bar {
    width: 0%; 
    height: 100%;
    background: linear-gradient(90deg, var(--red), #ff4400);
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px var(--red-dim);
    position: relative;
}

.raid-progress-bar::after {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 3px;
    width: 46px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.65));
    filter: blur(0.5px);
}

/* Анимация "заряжания" бара */
@keyframes barGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.raid-progress-bar {
    animation: barGlow 1.5s ease-in-out infinite;
}

.raid-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
}

.raid-progress-hint {
    color: var(--text3);
    font-size: 9px;
    font-family: monospace;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.raid-progress-percent {
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    font-family: monospace;
}

/* Кнопка закрытия */
.btn-close-raid {
    position: absolute;
    top: 10px; right: 10px;
    background: none; border: none;
    color: var(--text3);
    font-size: 24px; cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
}
.btn-close-raid:hover { color: var(--red); }

/* Кнопка действия */
#raid-action-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(204,34,0,0.95), rgba(255,94,58,0.92));
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(204,34,0,0.18);
    position: relative;
    overflow: hidden;
}

#raid-action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,0.18) 32%, transparent 49%);
    transform: translateX(-135%);
    transition: transform 0.45s ease;
}

#raid-action-btn:hover::before {
    transform: translateX(135%);
}
#raid-action-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* --- СТИЛИЗАЦИЯ ПОД ТЕМЫ --- */

/* GENSHIN LIGHT (theme-genshin-light) */
body.theme-genshin-light .raid-content {
    border-color: #d3bc8e; /* Золото Ли Юэ */
    box-shadow: 0 0 35px rgba(211, 188, 142, 0.3);
    background: #f0ebe1; /* Фон свитка */
    color: #3d4555;
}

body.theme-genshin-light .boss-img {
    border-color: #4b5366; /* Глубокий синий */
    box-shadow: 0 0 20px rgba(75, 83, 102, 0.3);
    border-radius: 20px; /* Прямоугольная карточка */
}

body.theme-genshin-light .boss-name { color: #3d4555; }
body.theme-genshin-light .boss-title { color: #dbb165; } /* Светлое золото */

body.theme-genshin-light .raid-progress-container {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
}

body.theme-genshin-light .raid-progress-bar {
    background: linear-gradient(90deg, #dbb165, #f0ebe1);
    box-shadow: 0 0 15px rgba(219, 177, 101, 0.4);
}

body.theme-genshin-light .raid-kicker,
body.theme-genshin-light .raid-meter-state {
    border-color: rgba(75,83,102,0.18);
    background: rgba(75,83,102,0.08);
    color: #4b5366;
}

body.theme-genshin-light .raid-brief-card,
body.theme-genshin-light .raid-roster-box,
body.theme-genshin-light .raid-result-panel {
    border-color: rgba(75,83,102,0.14);
    background: rgba(255,255,255,0.48);
}

body.theme-genshin-light .raid-brief-card strong,
body.theme-genshin-light .raid-roster-chip b {
    color: #9b6f2c;
}

body.theme-genshin-light .raid-roster-chip {
    background: rgba(75,83,102,0.07);
    border-color: rgba(75,83,102,0.12);
    color: #4b5366;
}

body.theme-genshin-light #raid-action-btn {
    background: #dbb165;
    color: #3d4555;
}

body.theme-genshin-light #gsPraySubtitle {
    color: rgba(75,83,102,0.6);
}

body.theme-genshin-light #gsPrayScreen {
    background: radial-gradient(ellipse at 50% 40%, #f0ebe1 0%, #e6dcc8 60%, #d8c8a0 100%);
}

body.theme-genshin-light #genshinOpenBtn {
    background: #dbb165;
    border-color: #c9a455;
    color: #3d4555;
}

/* GENSHIN DARK (theme-genshin-dark) */
body.theme-genshin-dark .raid-content {
    border-color: rgba(219,177,101,0.35);
    box-shadow: 0 0 35px rgba(219,177,101,0.18);
    background: #1a1628;
    color: #e8e0d0;
}

body.theme-genshin-dark .boss-img {
    border-color: rgba(219,177,101,0.4);
    box-shadow: 0 0 20px rgba(219,177,101,0.2);
    border-radius: 20px;
}

body.theme-genshin-dark .boss-name { color: #e8e0d0; }
body.theme-genshin-dark .boss-title { color: #dbb165; }

body.theme-genshin-dark .raid-progress-container {
    background: rgba(255,255,255,0.05);
    border-color: rgba(219,177,101,0.15);
}

body.theme-genshin-dark .raid-progress-bar {
    background: linear-gradient(90deg, #dbb165, #c8975a);
    box-shadow: 0 0 15px rgba(219, 177, 101, 0.4);
}

body.theme-genshin-dark .raid-kicker,
body.theme-genshin-dark .raid-meter-state {
    border-color: rgba(219,177,101,0.2);
    background: rgba(219,177,101,0.08);
    color: #dbb165;
}

body.theme-genshin-dark .raid-brief-card,
body.theme-genshin-dark .raid-roster-box,
body.theme-genshin-dark .raid-result-panel {
    border-color: rgba(219,177,101,0.14);
    background: rgba(255,255,255,0.04);
}

body.theme-genshin-dark .raid-brief-card strong,
body.theme-genshin-dark .raid-roster-chip b {
    color: #dbb165;
}

body.theme-genshin-dark .raid-roster-chip {
    background: rgba(219,177,101,0.07);
    border-color: rgba(219,177,101,0.12);
    color: #e8e0d0;
}

body.theme-genshin-dark #raid-action-btn {
    background: #dbb165;
    color: #1a1628;
}

/* DIARY */
.diary-shell {
    padding: 0 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.diary-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 16px;
    border: 1px solid rgba(180, 20, 20, 0.28);
    background:
        radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 38%),
        linear-gradient(145deg, rgba(20, 10, 16, 0.98), rgba(11, 10, 18, 0.96));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.diary-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.03) 45%, transparent 100%);
    pointer-events: none;
}

.diary-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.diary-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(180, 20, 20, 0.28);
    background: rgba(255,255,255,0.03);
    color: var(--text2);
    font-size: 9px;
    font-family: monospace;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.diary-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 12px rgba(204, 68, 68, 0.55);
}

.diary-title-wrap {
    position: relative;
    z-index: 1;
    margin-top: 16px;
}

.diary-title {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--text);
}

.diary-title-cn {
    margin-top: 6px;
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 2px;
    font-family: serif;
}

.diary-subtitle {
    margin-top: 8px;
    color: var(--text2);
    font-size: 11px;
    line-height: 1.7;
    max-width: 420px;
}

.diary-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 9px;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold);
    white-space: nowrap;
}

.diary-note {
    font-size: 10px;
    color: var(--text3);
    line-height: 1.6;
    position: relative;
    z-index: 1;
    margin-top: 12px;
}

.diary-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.diary-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.diary-section-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text);
}

.diary-section-sub {
    font-size: 9px;
    color: var(--text3);
    font-family: monospace;
    letter-spacing: 1px;
}

.diary-meta-grid,
.diary-discuss-grid,
.diary-grade-grid {
    display: grid;
    gap: 8px;
}

.diary-meta-grid {
    grid-template-columns: 1.2fr 0.95fr 0.95fr;
}

.diary-discuss-grid {
    grid-template-columns: 1fr 1fr;
}

.diary-grade-grid {
    grid-template-columns: 1fr 1fr;
}

.diary-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.diary-label {
    font-size: 9px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: monospace;
}

.diary-input,
.diary-select,
.diary-textarea {
    width: 100%;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 12px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.diary-input:focus,
.diary-select:focus,
.diary-textarea:focus {
    border-color: rgba(212,175,55,0.45);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.08);
    transform: translateY(-1px);
}

.diary-input[readonly] {
    color: var(--text2);
    background: rgba(255,255,255,0.03);
}

.diary-textarea {
    min-height: 220px;
    resize: vertical;
    line-height: 1.7;
}

.diary-words-head {
    display: grid;
    grid-template-columns: 42px 1fr 1fr 1fr;
    gap: 8px;
    padding: 0 0 8px;
    color: var(--text3);
    font-size: 9px;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.diary-words-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.diary-word-row {
    display: grid;
    grid-template-columns: 42px 1fr 1fr 1fr;
    gap: 8px;
    align-items: center;
}

.diary-word-index {
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--text2);
    background: rgba(255,255,255,0.02);
}

.diary-stars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.diary-star {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,0.22);
    background: rgba(255,255,255,0.03);
    color: rgba(212,175,55,0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.diary-star.active {
    background: linear-gradient(135deg, var(--gold-border), var(--gold-dim));
    color: var(--gold);
    border-color: rgba(212,175,55,0.45);
    box-shadow: 0 0 16px rgba(212,175,55,0.24);
}

.diary-star:hover {
    transform: translateY(-2px) scale(1.05);
}

.diary-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.diary-actions .btn {
    flex: 1;
    min-width: 160px;
}

.diary-saved-days {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.diary-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text2);
    font-size: 10px;
    cursor: pointer;
}

.diary-day-chip.active {
    border-color: rgba(212,175,55,0.35);
    color: var(--gold);
    box-shadow: 0 0 16px rgba(212,175,55,0.12);
}

.diary-day-chip-empty {
    color: var(--text3);
    font-size: 10px;
}


/* ── Diary Admin Panel ─────────────────────────────────── */
.diary-admin-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.diary-admin-date {
    flex: 1;
    min-width: 130px;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: monospace;
    font-size: 12px;
}
.diary-admin-refresh {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text2);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-family: monospace;
    font-size: 11px;
}
.diary-student-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.diary-student-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.diary-student-row:hover {
    border-color: rgba(212,175,55,0.35);
    background: rgba(212,175,55,0.04);
}
.diary-student-row.active {
    border-color: rgba(212,175,55,0.5);
    background: rgba(212,175,55,0.08);
}
.diary-student-icon { font-size: 16px; flex-shrink: 0; }
.diary-student-name {
    flex: 1;
    font-size: 12px;
    color: var(--text);
    font-family: monospace;
}
.diary-student-words {
    font-size: 10px;
    color: var(--text3);
    font-family: monospace;
}
.diary-student-badge {
    font-size: 9px;
    font-family: monospace;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.diary-student-badge.missing  { color: var(--text3); }
.diary-student-badge.draft    { color: #6af; }
.diary-student-badge.submitted{ color: #4fa; }
.diary-student-badge.locked   { color: #fa4; }

.diary-viewing-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(212,175,55,0.35);
    background: rgba(212,175,55,0.07);
    margin-bottom: 4px;
    font-family: monospace;
    font-size: 11px;
    color: var(--gold, #d4af37);
}
.diary-viewing-banner button {
    background: transparent;
    border: 1px solid rgba(212,175,55,0.4);
    color: var(--gold, #d4af37);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-family: monospace;
    font-size: 10px;
    flex-shrink: 0;
}



/* ── Импланты: названия и описания в светлых темах ───────── */
body.theme-nw-light .implant-cn,
body.theme-genshin-light .implant-cn { color: var(--text2); }
body.theme-nw-light .implant-sub,
body.theme-genshin-light .implant-sub { color: var(--text3); }

body.theme-nw-light .implant-row {
  border-bottom-color: rgba(70,45,45,0.08);
}

body.theme-nw-light .implant-py {
  color: #6f6258 !important;
  font-style: normal;
}

body.theme-nw-light .implant-row [style*="var(--text3)"] {
  color: #8a7f76 !important;
}

body.theme-nw-light .implant-icon {
  background: rgba(120,76,140,0.08);
  border-color: rgba(120,76,140,0.18);
}

body.theme-nw-light .implant-icon.legendary {
  background: rgba(153,51,51,0.08);
  border-color: rgba(153,51,51,0.18);
}

body.theme-nw-light .dur-dot.on {
  background: rgba(120,76,140,0.46);
}

body.theme-nw-light .dur-dot.on-r {
  background: rgba(153,51,51,0.52);
}

body.theme-nw-light .dur-dot.off {
  background: rgba(60,45,45,0.12);
}

body.theme-nw-light #myImplantsPage [style*="color:#fff"],
body.theme-nw-light #implants-catalog [style*="color:#fff"] {
  color: var(--text) !important;
}

body.theme-nw-light #myImplantsPage [style*="color:#ccc"],
body.theme-nw-light #implants-catalog [style*="color:#ccc"] {
  color: var(--text2) !important;
}

body.theme-nw-light #myImplantsPage [style*="rgba(212,175,55"],
body.theme-nw-light #implants-catalog [style*="rgba(212,175,55"] {
  color: var(--text3) !important;
}

body.theme-nw-light #implants-catalog [style*="border-top:1px solid rgba(255,255,255"],
body.theme-nw-light #implants-catalog [style*="border-bottom:1px solid rgba(255,255,255"],
body.theme-nw-light #myImplantsPage [style*="border-bottom:1px solid rgba(255,255,255"] {
  border-color: rgba(70,45,45,0.10) !important;
}

/* ── Светлые темы: золотые тексты → тёмно-серый ─────────── */
body.theme-nw-light .more-item-cn,
body.theme-genshin-light .more-item-cn,
body.theme-nw-light .shop-item-cn,
body.theme-genshin-light .shop-item-cn,
body.theme-nw-light .shop-cat .cn,
body.theme-genshin-light .shop-cat .cn,
body.theme-nw-light .team-role,
body.theme-genshin-light .team-role,
body.theme-nw-light .stat-cn,
body.theme-genshin-light .stat-cn,
body.theme-nw-light .implant-py,
body.theme-genshin-light .implant-py,
body.theme-nw-light .main-pinyin,
body.theme-genshin-light .main-pinyin,
body.theme-nw-light .page-sub,
body.theme-nw-light .cn-divider,
body.theme-nw-light .neuro-sub,
body.theme-nw-light .schedule-location,
body.theme-genshin-light .page-sub { color: var(--text3) !important; }

body.theme-nw-light .neuro-status { color: #993333; }

/* ── Навигация NW Light ──────────────────────────────────── */
body.theme-nw-light .bottom-nav {
  background: rgba(244,241,237,0.97);
  border-top-color: var(--red-dim);
}
body.theme-nw-light .bottom-nav::before {
  background: linear-gradient(90deg, transparent, rgba(180,20,20,0.3), transparent);
}
body.theme-nw-light .nav-item { color: #555555; }
body.theme-nw-light .nav-item.active { color: #993333; }
body.theme-nw-light .nav-cn { color: #777777; }

/* NetWatch light: keep casino and event cards readable on a pale surface. */
body.theme-nw-light .casino-balance,
body.theme-nw-light .prize-result {
  background: rgba(255,255,255,0.76);
  border-color: rgba(120,40,40,0.16);
  box-shadow: 0 8px 24px rgba(80,40,30,0.06);
}

body.theme-nw-light .case-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.78), rgba(238,232,226,0.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 8px 18px rgba(80,40,30,0.045);
}

body.theme-nw-light .case-card.gold {
  border-color: rgba(138,104,32,0.28);
}

body.theme-nw-light .case-card.purple {
  border-color: rgba(120,76,140,0.24);
}

body.theme-nw-light .case-card.black {
  border-color: rgba(153,51,51,0.24);
}

body.theme-nw-light .case-cn.g { color: rgba(122,80,16,0.72); }
body.theme-nw-light .case-cn.p { color: rgba(110,70,132,0.72); }
body.theme-nw-light .case-cn.b { color: rgba(153,51,51,0.72); }

body.theme-nw-light .roulette-track {
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(235,229,222,0.82));
  border-color: rgba(153,51,51,0.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 10px 28px rgba(80,40,30,0.08);
}

body.theme-nw-light .roulette-track::before {
  background: linear-gradient(to right, rgba(244,241,237,0.98), rgba(244,241,237,0));
}

body.theme-nw-light .roulette-track::after {
  background: linear-gradient(to left, rgba(244,241,237,0.98), rgba(244,241,237,0));
}

body.theme-nw-light .roulette-item {
  background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(232,225,218,0.92));
  border-color: rgba(153,51,51,0.16);
  color: #1f1f1f;
}

body.theme-nw-light .roulette-item-gold {
  border-color: rgba(138,104,32,0.24);
  background:
    radial-gradient(circle at 50% 10%, rgba(212,175,55,0.16), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(232,225,218,0.92));
}

body.theme-nw-light .roulette-item-purple {
  border-color: rgba(120,76,140,0.28);
  background:
    radial-gradient(circle at 50% 10%, rgba(155,89,182,0.16), transparent 50%),
    linear-gradient(145deg, rgba(250,246,255,0.94), rgba(228,219,235,0.92));
}

body.theme-nw-light .roulette-item-black {
  border-color: rgba(153,51,51,0.32);
  background:
    radial-gradient(circle at 50% 10%, rgba(180,20,20,0.14), transparent 52%),
    linear-gradient(145deg, rgba(255,244,244,0.92), rgba(230,218,218,0.90));
}

body.theme-nw-light .roulette-item-name {
  color: #444444;
}

body.theme-nw-light .roulette-case-label {
  color: rgba(40,40,40,0.52);
}

body.theme-nw-light .roulette-item.opened {
  background: linear-gradient(145deg, rgba(255,250,232,0.96), rgba(236,221,175,0.92));
}

body.theme-nw-light .home-event-card {
  border-color: rgba(153,51,51,0.24) !important;
  background:
    linear-gradient(135deg, rgba(153,51,51,0.10), rgba(255,255,255,0.76)),
    rgba(255,255,255,0.74) !important;
  box-shadow: 0 10px 26px rgba(80,40,30,0.08) !important;
}

body.theme-nw-light .home-event-card-kicker {
  color: #7a5010 !important;
}

body.theme-nw-light .home-event-card-title {
  color: #1f1f1f !important;
}

body.theme-nw-light .home-event-card-copy {
  color: #4a4a4a !important;
}

body.theme-genshin .home-event-card {
  border-color: rgba(219,177,101,0.18) !important;
  background:
    linear-gradient(135deg, rgba(219,177,101,0.10), rgba(255,255,255,0.03)),
    rgba(255,255,255,0.035) !important;
  box-shadow: 0 10px 24px rgba(90,60,20,0.08) !important;
}

body.theme-genshin .home-event-card-kicker {
  color: rgba(138,104,32,0.72) !important;
}

body.theme-genshin-light .home-event-card-title {
  color: #3d4555 !important;
}

body.theme-genshin-light .home-event-card-copy {
  color: #6b5f4d !important;
}

body.theme-genshin-dark .home-event-card-title {
  color: #f0dfb8 !important;
}

body.theme-genshin-dark .home-event-card-copy {
  color: rgba(234,220,190,0.72) !important;
}

/* ── Дневник в светлых темах ─────────────────────────────── */
body.theme-nw-light .diary-hero,
body.theme-genshin-light .diary-hero {
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.1);
}
body.theme-nw-light .diary-card,
body.theme-genshin-light .diary-card {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.08);
}
body.theme-nw-light .diary-input,
body.theme-nw-light .diary-textarea,
body.theme-nw-light .diary-select,
body.theme-genshin-light .diary-input,
body.theme-genshin-light .diary-textarea,
body.theme-genshin-light .diary-select {
  background: rgba(255,255,255,0.8);
  color: var(--text);
  border-color: rgba(0,0,0,0.1);
}

.diary-back-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text2);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    font-family: monospace;
    font-size: 10px;
}

body.theme-genshin-light .diary-hero {
    border-color: rgba(219,177,101,0.28);
    background:
        radial-gradient(circle at top right, rgba(219,177,101,0.16), transparent 42%),
        linear-gradient(145deg, rgba(240, 235, 225, 0.96), rgba(232, 224, 210, 0.98));
}

body.theme-genshin-light .diary-kicker,
body.theme-genshin-light .diary-status-badge,
body.theme-genshin-light .diary-day-chip.active {
    border-color: rgba(75,83,102,0.14);
    background: rgba(75,83,102,0.08);
    color: #4b5366;
}

body.theme-genshin-light .diary-kicker::before {
    background: #dbb165;
    box-shadow: 0 0 12px rgba(219,177,101,0.45);
}

body.theme-genshin-light .diary-title {
    color: #3d4555;
}

body.theme-genshin-light .diary-title-cn {
    color: #dbb165;
}

body.theme-genshin-light .diary-subtitle,
body.theme-genshin-light .diary-note,
body.theme-genshin-light .diary-section-sub,
body.theme-genshin-light .diary-label,
body.theme-genshin-light .diary-day-chip,
body.theme-genshin-light .diary-word-index {
    color: #6b7180;
}

body.theme-genshin-light .diary-card,
body.theme-genshin-light .diary-input,
body.theme-genshin-light .diary-select,
body.theme-genshin-light .diary-textarea,
body.theme-genshin-light .diary-word-index,
body.theme-genshin-light .diary-day-chip,
body.theme-genshin-light .diary-back-btn {
    background: rgba(255,255,255,0.55);
    border-color: rgba(75,83,102,0.14);
    color: #3d4555;
}

body.theme-genshin-light .diary-star {
    border-color: rgba(219,177,101,0.25);
    color: rgba(219,177,101,0.6);
    background: rgba(255,255,255,0.5);
}

body.theme-genshin-light .diary-star.active {
    color: #8a6820;
    background: linear-gradient(135deg, rgba(219,177,101,0.26), rgba(255,255,255,0.72));
    border-color: rgba(219,177,101,0.4);
}

@media (max-width: 640px) {
    .diary-meta-grid,
    .diary-discuss-grid,
    .diary-grade-grid {
        grid-template-columns: 1fr;
    }

    .diary-words-head,
    .diary-word-row {
        grid-template-columns: 34px 1fr 1fr 1fr;
        gap: 6px;
    }

    .diary-hero-top {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== АНИМАЦИИ ===== */
/* Переходы между страницами */
.page {
  animation: none;
}
.page.active {
  animation: pageIn 0.32s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== TOAST NOTIFICATIONS ===== */
#toastContainer {
  position: fixed;
  bottom: calc(var(--nav-h) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 7px;
  pointer-events: none;
  width: calc(100% - 28px);
  max-width: 430px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--card-radius);
  background: rgba(8, 8, 18, 0.94);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  pointer-events: auto;
  animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
  will-change: transform, opacity;
  min-height: 44px;
}
.toast.hiding {
  animation: toastOut 0.22s ease forwards;
  pointer-events: none;
}
.toast-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  line-height: 1.5;
}
.toast-msg {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  flex: 1;
  padding-top: 1px;
}
.toast-close {
  font-size: 14px;
  color: var(--text3);
  cursor: pointer;
  padding: 1px 3px;
  flex-shrink: 0;
  line-height: 1.4;
  opacity: 0.7;
}
.toast-close:hover { opacity: 1; }

.toast.toast-success {
  border-color: rgba(40,200,100,0.32);
  background: rgba(4,18,10,0.95);
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(40,200,100,0.08) inset;
}
.toast.toast-success .toast-icon { color: #32d872; }

.toast.toast-error {
  border-color: rgba(200,40,40,0.38);
  background: rgba(18,4,4,0.95);
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(200,40,40,0.08) inset;
}
.toast.toast-error .toast-icon { color: #e03333; }

.toast.toast-info {
  border-color: var(--gold-border);
  background: rgba(12,10,2,0.95);
}
.toast.toast-info .toast-icon { color: var(--gold); }

.toast.toast-warn {
  border-color: rgba(200,140,30,0.32);
  background: rgba(16,11,2,0.95);
}
.toast.toast-warn .toast-icon { color: #e09a28; }

@keyframes toastIn {
  from { transform: translateY(18px) scale(0.93); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateY(0) scale(1);      opacity: 1; }
  to   { transform: translateY(6px) scale(0.95); opacity: 0; }
}

body.theme-nw-light #toastContainer .toast {
  background: rgba(252,250,246,0.97);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 6px 28px rgba(0,0,0,0.12);
  color: var(--text);
}
body.theme-nw-light .toast.toast-success { background: rgba(240,252,245,0.97); }
body.theme-nw-light .toast.toast-error   { background: rgba(252,240,240,0.97); }
body.theme-nw-light .toast.toast-warn    { background: rgba(252,248,235,0.97); }

body.theme-genshin-light #toastContainer .toast {
  background: rgba(252,250,246,0.97);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 6px 28px rgba(0,0,0,0.12);
  color: var(--text);
}
body.theme-genshin-light .toast.toast-success { background: rgba(240,252,245,0.97); }
body.theme-genshin-light .toast.toast-error   { background: rgba(252,240,240,0.97); }
body.theme-genshin-light .toast.toast-warn    { background: rgba(252,248,235,0.97); }

/* --- nw-light: admin dossier modal --- */
body.theme-nw-light .admin-dossier-sheet {
  background:
    radial-gradient(circle at top left, rgba(180,130,60,0.08), transparent 42%),
    linear-gradient(145deg, rgba(255,252,245,0.98), rgba(250,246,238,0.96));
  border-color: rgba(160,110,40,0.22);
  box-shadow: 0 14px 50px rgba(0,0,0,0.14);
}
body.theme-nw-light .admin-dossier-stat {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.07);
}
body.theme-nw-light .admin-dossier-stat span,
body.theme-nw-light .admin-dossier-panel-title {
  color: rgba(100,60,10,0.7);
}
body.theme-nw-light .admin-dossier-stat strong { color: #1a1a1a; }
body.theme-nw-light .admin-dossier-stat em     { color: #3a3a3a; }
body.theme-nw-light .admin-dossier-panel {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.07);
}
body.theme-nw-light .admin-dossier-row { border-color: rgba(0,0,0,0.06); }
body.theme-nw-light .admin-dossier-row strong { color: #1a1a1a; }
body.theme-nw-light .admin-dossier-row span   { color: #4a4a4a; }
body.theme-nw-light .admin-dossier-room {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.08);
}
body.theme-nw-light .admin-dossier-empty { color: #888; }

/* --- nw-light: admin blackwall / architect event cards --- */
body.theme-nw-light .admin-blackwall-card {
  background: linear-gradient(135deg, rgba(60,20,90,0.07), rgba(100,50,140,0.05));
  border: 1px solid rgba(120,60,160,0.22);
  box-shadow: 0 4px 16px rgba(80,30,120,0.07);
}
body.theme-nw-light .admin-blackwall-glyph {
  color: rgba(100,40,140,0.45);
  text-shadow: none;
}
body.theme-nw-light .admin-blackwall-title { color: #2a1a3a; }
body.theme-nw-light .admin-blackwall-desc  { color: #5a4a6a; }

/* --- nw-light: diary star rating buttons --- */
body.theme-nw-light .diary-star {
  border-color: rgba(140,90,10,0.28);
  background: rgba(255,255,255,0.6);
  color: rgba(140,90,10,0.5);
}
body.theme-nw-light .diary-star.active {
  background: linear-gradient(135deg, rgba(200,155,40,0.18), rgba(220,175,60,0.12));
  color: #8a5a10;
  border-color: rgba(160,110,20,0.45);
  box-shadow: 0 0 10px rgba(180,130,30,0.18);
}
body.theme-nw-light .diary-admin-date {
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,0.12);
  color: #2a2a2a;
}
body.theme-nw-light .diary-admin-refresh {
  border-color: rgba(0,0,0,0.12);
  color: #555;
}
body.theme-nw-light .diary-admin-refresh:hover { background: rgba(0,0,0,0.05); }

/* Ripple на кнопках */
.btn, .btn-primary, .shop-item-buy, .subtab, .nav-item {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: scale(0);
  animation: rippleAnim 0.5s linear;
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* Bounce на навигации */
.nav-item.active .nav-icon {
  animation: navBounce 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes navBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Пульсация баллов при обновлении */
@keyframes pointsPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); color: #ffd700; }
  100% { transform: scale(1); }
}

.points-pulse {
  animation: pointsPulse 0.4s ease-out;
}

/* Появление элементов списка каскадом */
.lb-item {
  animation: fadeSlideIn 0.4s ease-out both;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-15px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Свечение кнопки открытия кейса */
#openCaseBtn {
  animation: btnGlow 2s ease-in-out infinite;
}

@keyframes btnGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(180,20,20,0.3); }
  50% { box-shadow: 0 0 20px rgba(180,20,20,0.7); }
}

/* Карточки имплантов */
.implant-row {
  animation: implantIn 0.4s ease-out both;
}

@keyframes implantIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.announcement-text {
  white-space: normal;
  line-height: 1.6;
  word-break: break-word;
}  

.event-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
}

.event-overlay::before,
.event-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.event-overlay::before {
  z-index: 6;
  opacity: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 40, 40, 0.08) 0,
      rgba(255, 40, 40, 0.08) 1px,
      transparent 1px,
      transparent 8px
    );
}

.event-overlay::after {
  z-index: 8;
  opacity: 0;
  background: transparent;
}

.event-overlay.event-state-active.event-phase-1::before {
  opacity: 0.12;
  animation: architectPhaseScanSlow 7.8s linear infinite;
}

.event-overlay.event-state-active.event-phase-2::before {
  opacity: 0.24;
  background:
    linear-gradient(90deg, rgba(0, 230, 255, 0.16), transparent 18%, rgba(255, 30, 45, 0.13) 82%, transparent),
    repeating-linear-gradient(180deg, rgba(0, 230, 255, 0.08) 0 1px, transparent 1px 7px);
  animation: architectPhaseSplit 2.2s steps(2) infinite;
}

.event-overlay.event-state-active.event-phase-3::before {
  opacity: 0.34;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.25), transparent 42%),
    repeating-linear-gradient(180deg, rgba(255, 30, 30, 0.10) 0 1px, transparent 1px 5px);
  animation: architectOverloadPulse 1.2s ease-in-out infinite;
}

.event-overlay.event-phase-shift::after {
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(0, 230, 255, 0.18), transparent 38%, rgba(255, 20, 40, 0.22)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 6px);
  animation: architectPhaseJerkFlash 0.9s steps(2) both;
}

.event-overlay.event-phase-shift .event-hud {
  animation: architectHudCorrupt 0.85s steps(2) both;
}

.event-overlay.event-phase-shift .event-hero-video,
.event-overlay.event-phase-shift #eventBossImage {
  animation: architectMediaJolt 0.85s steps(2) both;
}

.event-overlay.event-action-fx-attack::after {
  opacity: 1;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 35, 20, 0.34), transparent 35%),
    linear-gradient(90deg, rgba(255,0,0,0.24), transparent 32%, rgba(255,0,0,0.20));
  animation: architectAttackFlash 0.56s ease-out both;
}

.event-overlay.event-action-fx-attack .event-hero {
  animation: architectHitShake 0.38s ease-out both;
}

.event-overlay.event-action-fx-protocol::after {
  opacity: 1;
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(0, 230, 255, 0.22) 16px 18px),
    linear-gradient(180deg, transparent, rgba(0, 230, 255, 0.16), transparent);
  animation: architectProtocolTrace 0.68s ease-out both;
}

.event-overlay.event-action-fx-sync::after {
  opacity: 1;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(115, 125, 255, 0.24) 19%, transparent 31%),
    radial-gradient(circle at 50% 50%, rgba(115, 125, 255, 0.16), transparent 46%);
  animation: architectSyncRipple 0.72s ease-out both;
}

.event-overlay.event-action-fx-stabilize::after {
  opacity: 1;
  background:
    radial-gradient(circle at 50% 56%, rgba(70, 255, 140, 0.20), transparent 36%),
    linear-gradient(180deg, transparent, rgba(70, 255, 140, 0.12));
  animation: architectStabilizeShield 0.76s ease-out both;
}

.event-overlay.event-action-fx-miss::after {
  filter: grayscale(0.45) contrast(1.35);
}

.event-overlay.event-overload-high .event-hero-video,
.event-overlay.event-overload-high #eventBossImage {
  animation: architectOverloadShake 0.42s steps(2) infinite;
}

.event-overlay.event-overload-critical .event-hud,
.event-overlay.event-overload-critical .event-final-timer {
  animation: architectCriticalBlink 0.72s steps(2) infinite;
}

.event-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(180,20,20,0.16), rgba(0,0,0,0.88)),
    rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  animation: eventBackdropPulse 6s ease-in-out infinite;
}

.event-shell {
  position: relative;
  z-index: 3;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 0;
  overflow: hidden;
  pointer-events: none;
}

.event-shell > * {
  position: relative;
  z-index: 2;
}

.event-shell button,
.event-actions,
.event-log,
.event-hud {
  pointer-events: auto;
}

.event-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  position: fixed;
  top: 14px;
  left: 12px;
  right: 12px;
  z-index: 10;
  pointer-events: none;
}

.event-topbar-left,
.event-topbar-right,
.event-close-btn {
  pointer-events: auto;
}

.event-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-mute-btn {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, opacity 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-mute-btn.muted {
  background: rgba(255,80,60,0.10);
  border-color: rgba(255,80,60,0.22);
  opacity: 0.72;
}

.event-mute-btn:active {
  transform: scale(0.92);
}

.event-kicker {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(212,175,55,0.9);
  font-family: monospace;
}

.event-phase {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 22px rgba(255, 60, 40, 0.5);
  animation: eventPhaseFlicker 2.8s ease-in-out infinite;
}

.event-close-btn {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 20px;
  cursor: pointer;
}

.event-hero {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  border: none;
  background:
    radial-gradient(circle at center, rgba(180,20,20,0.24), rgba(0,0,0,0.20) 54%, rgba(0,0,0,0.78)),
    #050008;
  z-index: 1;
  pointer-events: none;
}

.event-hero img,
.event-hero-video {
  position: absolute;
  top: 132px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: calc(100vh - 132px);
  object-fit: contain;
  object-position: center center;
  display: block;
  transform: none;
  filter: saturate(1.08) contrast(1.05);
  z-index: 0;
}

.event-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0.08) 24%, rgba(0,0,0,0.22) 58%, rgba(0,0,0,0.82)),
    repeating-linear-gradient(
      180deg,
      rgba(255, 70, 40, 0.06) 0,
      rgba(255, 70, 40, 0.06) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}

.event-hero::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 90, 60, 0.18) 48%, transparent 100%);
  transform: translateX(-55%) skewX(-12deg);
  animation: eventScanSweep 5.5s linear infinite;
  pointer-events: none;
  z-index: 3;
}

.event-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(255,0,0,0.18), transparent 56%),
    radial-gradient(circle at 50% 22%, rgba(255,140,120,0.12), transparent 28%);
  pointer-events: none;
  animation: eventHeroPulse 4s ease-in-out infinite;
  z-index: 1;
}

.event-overlay.event-phase-1 .event-hero-glow {
  opacity: 0.55;
  animation-duration: 5.2s;
}

.event-overlay.event-phase-2 .event-hero-glow {
  opacity: 0.72;
  background:
    radial-gradient(circle at 42% 48%, rgba(0, 230, 255, 0.12), transparent 42%),
    radial-gradient(circle at 58% 44%, rgba(255, 30, 40, 0.16), transparent 48%);
  animation-duration: 2.9s;
}

.event-overlay.event-phase-3 .event-hero-glow {
  opacity: 0.92;
  background:
    radial-gradient(circle at center, rgba(255,0,0,0.30), transparent 54%),
    radial-gradient(circle at 50% 22%, rgba(255,140,120,0.16), transparent 30%);
  animation-duration: 1.55s;
}

.event-final-timer {
  position: fixed;
  top: 96px;
  right: 12px;
  z-index: 12;
  padding: 6px 9px;
  border: 1px solid rgba(255, 45, 45, 0.46);
  border-radius: 8px;
  background: rgba(20, 2, 4, 0.58);
  color: #ffdad2;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  box-shadow:
    0 0 18px rgba(255, 0, 0, 0.16),
    inset 0 0 0 1px rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.event-phase-warning {
  position: fixed;
  left: 50%;
  top: 132px;
  z-index: 12;
  transform: translateX(-50%);
  padding: 5px 10px;
  border: 1px solid rgba(255, 34, 34, 0.55);
  border-radius: 999px;
  background: rgba(55, 0, 0, 0.55);
  color: #ffb7aa;
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(255, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  animation: architectWarningBlink 0.9s steps(2) infinite;
  pointer-events: none;
}

.event-hud {
  position: fixed;
  top: 48px;
  left: 12px;
  z-index: 11;
  margin: 0;
  width: min(330px, calc(100vw - 24px));
  max-width: 330px;
  min-height: 42px;
  padding: 5px 7px 5px 6px;
  background: rgba(3, 8, 14, 0.46);
  border: 1px solid rgba(0, 230, 255, 0.46);
  box-shadow:
    0 0 12px rgba(0, 230, 255, 0.10),
    inset 0 0 0 1px rgba(0, 230, 255, 0.04);
  backdrop-filter: blur(4px);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  display: flex;
  align-items: stretch;
  gap: 7px;
  pointer-events: none;
}

.event-hud::before {
  display: none;
}

.event-hud::after {
  display: none;
}

.boss-hud__stack {
  position: relative;
  z-index: 1;
  width: 28px;
  flex: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: stretch;
}

.boss-hud__avatar {
  height: 24px;
  border: 1px solid rgba(255, 74, 74, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 66, 66, 0.1), rgba(255, 66, 66, 0.02)),
    rgba(7, 10, 16, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.boss-hud__avatar::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(255, 44, 44, 0.22), transparent 55%),
    repeating-linear-gradient(90deg, rgba(0, 234, 255, 0.12) 0 1px, transparent 1px 7px);
}

.boss-hud__level {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 15px;
  border: 1px solid rgba(0, 234, 255, 0.78);
  background: rgba(4, 10, 14, 0.92);
  color: #87f8ff;
  font-family: monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(0, 234, 255, 0.22);
}

.boss-hud__main {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}

.boss-hud__caption {
  font-family: monospace;
  font-size: 4px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 107, 96, 0.9);
}

.boss-hud__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.event-boss-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 9px;
  font-weight: 800;
  margin: 0;
  color: #c9fbff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgba(84, 245, 255, 0.18);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-meta-row {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  margin: 0;
}

.event-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 10px;
  padding: 0 3px;
  border-radius: 2px;
  font-size: 5px;
  font-family: monospace;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(96, 245, 255, 0.34);
  background: rgba(7, 14, 20, 0.82);
  color: #aef8ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.event-status-badge.hot {
  border-color: rgba(255, 86, 86, 0.52);
  background: rgba(56, 10, 14, 0.72);
  color: #ff9d9d;
}

.event-status-badge.gold {
  border-color: rgba(255, 190, 82, 0.48);
  background: rgba(56, 44, 8, 0.72);
  color: #ffd978;
}

.event-status-badge.green {
  border-color: rgba(72, 225, 150, 0.48);
  background: rgba(10, 42, 28, 0.72);
  color: #9ef0c1;
}

@keyframes eventHeroPulse {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

@keyframes eventScanSweep {
  from { transform: translateX(-65%) skewX(-12deg); }
  to { transform: translateX(65%) skewX(-12deg); }
}

@keyframes eventPhaseFlicker {
  0%, 100% { opacity: 1; transform: translateY(0); }
  20% { opacity: 0.92; }
  22% { opacity: 0.76; }
  24% { opacity: 1; }
  60% { opacity: 0.95; transform: translateY(-1px); }
}

@keyframes eventBackdropPulse {
  0%, 100% { opacity: 0.92; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.025); }
}

@keyframes architectPhaseScanSlow {
  from { transform: translateY(-10%); }
  to { transform: translateY(10%); }
}

@keyframes architectPhaseSplit {
  0%, 100% { transform: translateX(0); filter: hue-rotate(0deg); }
  18% { transform: translateX(-2px); filter: hue-rotate(12deg); }
  20% { transform: translateX(2px); }
  22% { transform: translateX(0); }
  62% { transform: translateX(1px); }
  64% { transform: translateX(-1px); }
}

@keyframes architectOverloadPulse {
  0%, 100% { opacity: 0.22; transform: scale(1); }
  50% { opacity: 0.46; transform: scale(1.02); }
}

@keyframes architectPhaseJerkFlash {
  0% { opacity: 0; transform: translateX(-8px); }
  12% { opacity: 1; transform: translateX(10px); }
  24% { opacity: 0.62; transform: translateX(-6px); }
  46% { opacity: 0.34; transform: translateX(3px); }
  100% { opacity: 0; transform: translateX(0); }
}

@keyframes architectHudCorrupt {
  0%, 100% { transform: translateX(0); filter: none; }
  12% { transform: translateX(-3px); filter: hue-rotate(60deg) saturate(1.6); }
  22% { transform: translateX(4px); filter: hue-rotate(-30deg) saturate(1.8); }
  34% { transform: translateX(-1px); }
}

@keyframes architectMediaJolt {
  0%, 100% { transform: translateX(0) scale(1); filter: saturate(1.08) contrast(1.05); }
  14% { transform: translateX(-8px) scale(1.012); filter: saturate(1.4) contrast(1.2); }
  28% { transform: translateX(7px) scale(1.006); filter: saturate(0.9) contrast(1.35); }
  42% { transform: translateX(-2px) scale(1); }
}

@keyframes architectAttackFlash {
  0% { opacity: 0; transform: scale(1); }
  18% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes architectHitShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 2px); }
  40% { transform: translate(6px, -1px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, 0); }
}

@keyframes architectProtocolTrace {
  0% { opacity: 0; transform: translateX(-18px); }
  22% { opacity: 0.82; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(28px); }
}

@keyframes architectSyncRipple {
  0% { opacity: 0; transform: scale(0.75); }
  28% { opacity: 0.78; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); }
}

@keyframes architectStabilizeShield {
  0% { opacity: 0; transform: scaleY(0.92); }
  26% { opacity: 0.70; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1.08); }
}

@keyframes architectOverloadShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(2px, 0); }
}

@keyframes architectCriticalBlink {
  0%, 100% { filter: saturate(1); opacity: 1; }
  50% { filter: saturate(1.8) brightness(1.18); opacity: 0.72; }
}

@keyframes architectWarningBlink {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.52; transform: translateX(-50%) scale(1.02); }
}

@keyframes architectButtonFire {
  0%   { transform: scale(1) translateY(0); }
  15%  { transform: scale(0.93) translateY(2px); }
  45%  { transform: scale(1.05) translateY(-3px); }
  70%  { transform: scale(0.99) translateY(-1px); }
  100% { transform: scale(1) translateY(0); }
}

.event-hp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin: 0;
  font-family: monospace;
  line-height: 1;
}

.event-hp-text,
.event-overload-readout {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #bafaff;
}

.event-overload-readout {
  color: #ff8f88;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: monospace;
}

.event-hp-bar {
  position: relative;
  height: 4px;
  background: rgba(7, 16, 24, 0.92);
  border: 1px solid rgba(84, 245, 255, 0.52);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 0 10px rgba(0, 234, 255, 0.08);
}

.event-hp-bar::after {
  content: '';
  position: absolute;
  inset: 1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(84, 245, 255, 0.18) 0 1px,
      transparent 1px 14px
    );
  pointer-events: none;
}

.event-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #59f6ff 0%, #59f6ff 48%, #ff5050 66%, #ff3030 100%);
  box-shadow: 0 0 10px rgba(255, 45, 60, 0.45);
  transition: width 0.35s ease;
}

@media (max-width: 379px) {
  .event-hud {
    width: min(286px, calc(100vw - 24px));
    max-width: 286px;
    min-height: 40px;
  }

  .event-status-badge {
    font-size: 5px;
    padding: 0 3px;
  }

  .event-boss-name {
    font-size: 8px;
  }

  .event-hp-text,
  .event-overload-readout {
    font-size: 7px;
  }

  .boss-hud__stack {
    width: 26px;
    flex-basis: 26px;
  }

  .boss-hud__avatar {
    height: 22px;
  }

  .boss-hud__level {
    min-height: 14px;
    font-size: 7px;
  }

  .boss-hud__main {
    min-height: 0;
  }
}

.event-log {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(158px + env(safe-area-inset-bottom, 0px));
  width: auto;
  min-height: 34px;
  max-height: 52px;
  overflow-y: auto;
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(4,4,12,0.84);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(14px);
  margin: 0;
  z-index: 13;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
  pointer-events: auto;
}

.event-log-empty {
  color: #888;
  font-size: 11px;
  line-height: 1.5;
}

.event-log-item,
.event-log-line {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 10px;
  line-height: 1.2;
}

/* ═══ COMMAND PANEL — REDESIGNED ═══════════════════════════════ */
.event-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(4, 4, 10, 0.98);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: auto;
}

.event-action {
  --col: #ff3636;
  --col-dim: rgba(255, 54, 54, 0.08);
  position: relative;
  overflow: hidden;
  min-height: 74px;
  padding: 12px 14px 10px;
  border: none;
  border-top: 2px solid var(--col);
  border-right: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(150deg, var(--col-dim) 0%, rgba(5, 5, 13, 0.99) 55%);
  color: #f3f3f3;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.12s ease;
}

.event-action:nth-child(even) {
  border-right: none;
  border-left: 1px solid rgba(255,255,255,0.05);
}

.event-action.attack    { --col: #ff3636; --col-dim: rgba(255, 54, 54, 0.08); }
.event-action.protocol  { --col: #ffc830; --col-dim: rgba(255, 200, 48, 0.08); }
.event-action.sync      { --col: #5b70ff; --col-dim: rgba(91, 112, 255, 0.08); }
.event-action.stabilize { --col: #2fd690; --col-dim: rgba(47, 214, 144, 0.08); }

/* Code label top-left */
.event-action::before {
  content: 'A1';
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 8px;
  letter-spacing: 2.4px;
  font-family: monospace;
  color: var(--col);
  opacity: 0.52;
  pointer-events: none;
}

.event-action.attack::before   { content: 'A1'; }
.event-action.protocol::before { content: 'P2'; }
.event-action.sync::before     { content: 'S3'; }
.event-action.stabilize::before { content: 'D4'; }

/* No ::after — replaced by spans */
.event-action::after { content: none; }

/* SYNC gets an AUTO indicator — no question, instant */
.event-action.sync::after {
  content: '⚡ АВТО';
  position: absolute;
  top: 9px; right: 10px;
  font-size: 7px;
  font-family: monospace;
  color: rgba(91, 112, 255, 0.8);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  pointer-events: none;
}

/* Chinese character decoration */
.event-action-kanji {
  position: absolute;
  top: 6px;
  right: 12px;
  font-size: 32px;
  font-weight: 900;
  color: var(--col);
  opacity: 0.13;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', serif;
}

.event-action-name {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1;
}

.event-action-sub {
  display: block;
  font-size: 7px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-family: monospace;
  color: var(--col);
  opacity: 0.56;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-action:active {
  filter: brightness(0.82) !important;
  transform: scale(0.97) !important;
  transition: filter 0.05s ease, transform 0.05s ease !important;
}

.event-action.is-firing {
  animation: architectButtonFire 0.52s cubic-bezier(0.34,1.56,0.64,1) both;
}

.event-action.is-requesting {
  opacity: 0.65;
  animation: architectBtnRequestPulse 0.55s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes architectBtnRequestPulse {
  from { opacity: 0.65; }
  to   { opacity: 0.95; }
}

.event-action.attack.is-firing    { border-top-color: #ff6060; background: rgba(255,54,54,0.14); }
.event-action.protocol.is-firing  { border-top-color: #ffe06a; background: rgba(255,200,48,0.14); }
.event-action.sync.is-firing      { border-top-color: #8a9fff; background: rgba(91,112,255,0.14); }
.event-action.stabilize.is-firing { border-top-color: #5fffa8; background: rgba(47,214,144,0.14); }

.event-question-modal {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(176px + env(safe-area-inset-bottom, 0px));
  z-index: 9;
  max-width: 520px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 16px;
  background: rgba(8,8,20,0.98);
  border: 1px solid rgba(212,175,55,0.26);
  box-shadow: 0 18px 50px rgba(0,0,0,0.52);
  backdrop-filter: blur(6px);
  transform: translateZ(0);
}

.event-question-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.5;
}

.event-options {
  display: grid;
  gap: 8px;
}

.event-option-btn {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
}

.event-explanation {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(216px + env(safe-area-inset-bottom, 0px));
  max-width: 520px;
  max-height: 54px;
  overflow-y: auto;
  margin: 0 auto;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.22);
  color: #e7d39a;
  font-size: 10px;
  line-height: 1.3;
  z-index: 12;
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}

.event-loading {
  opacity: 0.6;
}

.event-action[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.15);
}

.event-lobby-card {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  max-height: 62vh;
  overflow-y: auto;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,0.18);
  background: rgba(6, 6, 16, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 4;
  transform: translateZ(0);
}

.event-overlay.event-terminal .event-lobby-card {
  margin-top: 0;
}

.event-lobby-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.event-lobby-kicker {
  font-size: 10px;
  letter-spacing: 1.8px;
  color: rgba(212,175,55,0.8);
  font-family: monospace;
}

.event-lobby-status {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.event-lobby-count {
  font-size: 13px;
  color: rgba(212,175,55,0.92);
  font-family: monospace;
}

.event-lobby-reward,
.event-lobby-members {
  margin-top: 14px;
}

.event-lobby-label {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #777;
  font-family: monospace;
}

.event-lobby-value {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: #f3e7c2;
  font-weight: 600;
}

.event-team-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-team-member {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  font-size: 14px;
  color: #e8e8e8;
}

.event-team-empty {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
  font-size: 13px;
  color: #888;
}

.event-lobby-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.event-lobby-btn {
  border: none;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.event-lobby-btn:active {
  transform: scale(0.98);
}

.event-lobby-btn.join {
  background: linear-gradient(135deg, #8b1010, #c62828);
  color: #fff;
}

.event-lobby-btn.leave {
  background: rgba(255,255,255,0.08);
  color: #ddd;
}

.event-lobby-btn.start {
  background: linear-gradient(135deg, #8a6820, var(--gold));
  color: #161616;
}
.event-option-btn {
  width: 100%;
  border: 1px solid rgba(212,175,55,0.18);
  background: rgba(255,255,255,0.04);
  color: #f0f0f0;
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.event-option-btn:hover {
  background: rgba(212,175,55,0.08);
  border-color: rgba(212,175,55,0.32);
}

.event-option-btn:active {
  transform: scale(0.99);
}

/* ===== Telegram iOS compatibility layer ===== */
html.tg-ios,
body.tg-ios {
  width: 100%;
  min-height: var(--app-height, 100dvh);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body.tg-ios {
  position: relative;
  touch-action: manipulation;
}

body.tg-ios .page {
  padding-bottom: calc(10px + var(--tg-safe-bottom));
}

body.tg-ios .bottom-nav {
  height: calc(var(--nav-h) + var(--tg-safe-bottom));
  padding-bottom: var(--tg-safe-bottom);
  transform: translateZ(0);
  will-change: transform;
}

body.tg-ios .event-overlay,
body.tg-ios .raid-overlay,
body.tg-ios .question-modal,
body.tg-ios .contract-modal,
body.tg-ios .profile-showcase-modal,
body.tg-ios .admin-dossier-modal,
body.tg-ios #diaryStarsPopup {
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  overflow: hidden;
  transform: translateZ(0);
}

.admin-presence-card.manual::before {
  background: linear-gradient(180deg, rgba(96,180,212,0.9), transparent);
}

.admin-presence-card.manual .admin-presence-icon {
  color: color-mix(in srgb, #60b4d4 18%, transparent);
}

body.tg-ios .question-modal {
  padding:
    calc(20px + var(--tg-safe-top))
    calc(20px + var(--tg-safe-right))
    calc(20px + var(--tg-safe-bottom))
    calc(20px + var(--tg-safe-left));
}

body.tg-ios .question-box {
  max-height: calc(var(--app-height, 100dvh) - 40px - var(--tg-safe-top) - var(--tg-safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.tg-ios .raid-content {
  max-height: calc(var(--app-height, 100dvh) - 32px - var(--tg-safe-top) - var(--tg-safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.tg-ios .event-shell {
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  overflow: hidden;
  padding-top: calc(14px + var(--tg-safe-top));
  transform: translateZ(0);
}

body.tg-ios .event-topbar {
  top: calc(14px + var(--tg-safe-top));
  left: calc(12px + var(--tg-safe-left));
  right: calc(12px + var(--tg-safe-right));
}

body.tg-ios .event-hero {
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  transform: translateZ(0);
}

body.tg-ios .event-hero img,
body.tg-ios .event-hero-video {
  top: calc(132px + var(--tg-safe-top));
  width: var(--app-width, 100vw);
  height: calc(var(--app-height, 100dvh) - 132px - var(--tg-safe-top));
  max-width: none;
  max-height: none;
}

body.tg-ios .event-hud {
  top: calc(62px + var(--tg-safe-top));
  left: calc(12px + var(--tg-safe-left));
  width: min(330px, calc(100vw - 24px - var(--tg-safe-left) - var(--tg-safe-right)));
}

body.tg-ios .event-final-timer {
  top: calc(110px + var(--tg-safe-top));
  right: calc(12px + var(--tg-safe-right));
}

body.tg-ios .event-phase-warning {
  top: calc(146px + var(--tg-safe-top));
  max-width: calc(100vw - 24px - var(--tg-safe-left) - var(--tg-safe-right));
}

.event-hero {
  z-index: 1;
}

.event-topbar {
  z-index: 10;
}

.event-hud {
  z-index: 11;
}

.event-log {
  z-index: 19;
}

.event-actions {
  z-index: 20;
}

.event-question-modal {
  z-index: 30;
  color: rgba(255, 255, 255, 0.94) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.94);
  overscroll-behavior: contain;
}

body.tg-ios .event-actions {
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: var(--tg-safe-bottom);
  padding-left: var(--tg-safe-left);
  padding-right: var(--tg-safe-right);
}

body.tg-ios .event-log {
  left: calc(12px + var(--tg-safe-left));
  right: calc(12px + var(--tg-safe-right));
  bottom: calc(158px + var(--tg-safe-bottom));
}

body.tg-ios .event-question-modal {
  left: calc(12px + var(--tg-safe-left));
  right: calc(12px + var(--tg-safe-right));
  bottom: calc(176px + var(--tg-safe-bottom));
  max-height: max(220px, min(calc(var(--app-height, 100dvh) - 238px - var(--tg-safe-top) - var(--tg-safe-bottom)), 420px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateZ(0);
}

body.tg-ios input,
body.tg-ios textarea,
body.tg-ios select {
  font-size: 16px;
}

body.tg-ios .profile-showcase-modal {
  padding:
    calc(16px + var(--tg-safe-top))
    calc(12px + var(--tg-safe-right))
    calc(18px + var(--tg-safe-bottom))
    calc(12px + var(--tg-safe-left));
}

body.tg-ios .profile-showcase-panel {
  max-height: calc(var(--app-height, 100dvh) - 34px - var(--tg-safe-top) - var(--tg-safe-bottom));
}

body.tg-ios .admin-dossier-modal {
  padding:
    calc(18px + var(--tg-safe-top))
    calc(12px + var(--tg-safe-right))
    calc(18px + var(--tg-safe-bottom))
    calc(12px + var(--tg-safe-left));
}

body.tg-ios .admin-dossier-sheet {
  max-height: calc(var(--app-height, 100dvh) - 36px - var(--tg-safe-top) - var(--tg-safe-bottom));
}

body.tg-ios .contract-modal {
  padding:
    calc(12px + var(--tg-safe-top))
    var(--tg-safe-right)
    0
    var(--tg-safe-left);
}

body.tg-ios .contract-modal-sheet {
  max-height: calc(var(--app-height, 100dvh) - 12px - var(--tg-safe-top));
  padding-bottom: calc(24px + var(--tg-safe-bottom));
}

body.tg-ios #diaryStarsPopup {
  padding:
    calc(12px + var(--tg-safe-top))
    var(--tg-safe-right)
    0
    var(--tg-safe-left);
}

body.tg-ios #diaryStarsPopup > div {
  max-height: calc(var(--app-height, 100dvh) - 12px - var(--tg-safe-top));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(24px + var(--tg-safe-bottom)) !important;
}

body.tg-ios .event-lobby-card {
  bottom: calc(10px + var(--tg-safe-bottom));
  left: calc(12px + var(--tg-safe-left));
  right: calc(12px + var(--tg-safe-right));
}

body.tg-ios .event-overlay.event-terminal .event-lobby-card.event-result-card {
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: var(--tg-safe-bottom);
}

@media (max-height: 760px) {
  body.tg-ios .event-question-modal {
    bottom: calc(162px + var(--tg-safe-bottom));
    max-height: min(48dvh, 360px);
  }
}

@media (max-height: 680px) {
  body.tg-ios .event-question-modal {
    bottom: calc(154px + var(--tg-safe-bottom));
    max-height: 46dvh;
  }
}

.event-question-title {
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
  opacity: 1 !important;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 80, 60, 0.22);
  mix-blend-mode: normal !important;
  filter: none !important;
}

.event-question-title *,
.event-question-modal strong,
.event-question-modal span {
  color: inherit !important;
  -webkit-text-fill-color: inherit;
  opacity: 1 !important;
}

.event-option-btn {
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92);
}

.event-option-btn:disabled {
  cursor: default;
  opacity: 0.72;
}

.event-option-btn.is-selected {
  opacity: 1;
  border-color: rgba(212,175,55,0.55);
  background: rgba(212,175,55,0.12);
}

.event-option-btn.is-correct {
  border-color: rgba(70, 220, 130, 0.62);
  background: rgba(70, 220, 130, 0.12);
}

.event-option-btn.is-wrong {
  border-color: rgba(255, 70, 70, 0.68);
  background: rgba(255, 70, 70, 0.13);
}

.event-explanation,
.event-answer-feedback {
  color: #f0dca8 !important;
  -webkit-text-fill-color: #f0dca8;
  opacity: 1 !important;
}

.event-answer-feedback,
.event-question-modal .event-explanation {
  position: static !important;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--gold-dim);
  border: 1px solid rgba(212,175,55,0.24);
  color: #f0dca8 !important;
  -webkit-text-fill-color: #f0dca8;
  font-size: 12px;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.event-action-result {
  margin: 12px 0 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255, 54, 54, 0.16), rgba(212, 175, 55, 0.08)),
    rgba(8, 8, 14, 0.92) !important;
  border: 1px solid rgba(212, 175, 55, 0.38) !important;
  box-shadow: 0 0 22px rgba(232, 34, 0, 0.18), inset 0 0 18px rgba(255, 255, 255, 0.03);
  animation: eventActionResultIn 0.22s ease-out both;
}

.event-action-result.is-success {
  border-color: rgba(212, 175, 55, 0.48) !important;
}

.event-action-result.is-fail {
  background:
    linear-gradient(135deg, rgba(255, 54, 54, 0.22), rgba(80, 0, 0, 0.18)),
    rgba(8, 8, 14, 0.94) !important;
  border-color: rgba(255, 74, 74, 0.55) !important;
}

.event-action-result-title {
  color: #f6d778;
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.event-action-result-value {
  margin-top: 4px;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-shadow: 0 0 14px rgba(232, 34, 0, 0.46);
}

.event-action-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.event-action-result-meta span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-family: monospace;
  font-size: 9px;
}

@keyframes eventActionResultIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-height: 720px) {
  body.tg-ios .event-action {
    min-height: 62px;
    padding: 10px 12px 8px;
  }

  body.tg-ios .event-action-kanji {
    font-size: 26px;
  }

  body.tg-ios .event-action-name {
    font-size: 12px;
  }

  body.tg-ios .event-log {
    bottom: calc(136px + var(--tg-safe-bottom));
    max-height: 40px;
  }

  body.tg-ios .event-question-modal {
    bottom: calc(148px + var(--tg-safe-bottom));
  }
}

/* Theme polish layer: readable cards, history, catalog and light surfaces. */
body.theme-nw-light .card-inner,
body.theme-nw-light .my-rank-card,
body.theme-nw-light .profile-card,
body.theme-nw-light .shop-item,
body.theme-nw-light .inventory-item,
body.theme-nw-light .schedule-item,
body.theme-nw-light .rules-row,
body.theme-nw-light #myImplantsPage,
body.theme-nw-light #implants-catalog,
body.theme-genshin-light .card-inner,
body.theme-genshin-light .my-rank-card,
body.theme-genshin-light .profile-card,
body.theme-genshin-light .shop-item,
body.theme-genshin-light .inventory-item,
body.theme-genshin-light .schedule-item,
body.theme-genshin-light .rules-row,
body.theme-genshin-light #myCardsContent,
body.theme-genshin-light #cards-tab {
  border-color: rgba(55, 45, 35, 0.10) !important;
}

body.theme-nw-light .schedule-item,
body.theme-nw-light .shop-item,
body.theme-nw-light .inventory-item,
body.theme-nw-light .rules-row,
body.theme-nw-light .profile-card {
  background: rgba(255, 255, 255, 0.38);
  border-bottom-color: rgba(70,45,45,0.09);
}

body.theme-genshin-light .schedule-item,
body.theme-genshin-light .shop-item,
body.theme-genshin-light .inventory-item,
body.theme-genshin-light .rules-row,
body.theme-genshin-light .profile-card {
  background: rgba(255, 250, 238, 0.54);
  border-bottom-color: rgba(138,104,32,0.12);
}

body.theme-nw-light .shop-command-card,
body.theme-nw-light .shop-featured-item,
body.theme-nw-light .shop-grid-modern .shop-item {
  background:
    radial-gradient(circle at 92% 0%, rgba(153,51,51,0.08), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(245,238,228,0.58));
  border-color: rgba(100,64,50,0.16);
  box-shadow: 0 12px 28px rgba(90,60,45,0.10);
}

body.theme-genshin-light .shop-command-card,
body.theme-genshin-light .shop-featured-item,
body.theme-genshin-light .shop-grid-modern .shop-item {
  background:
    radial-gradient(circle at 92% 0%, rgba(219,177,101,0.16), transparent 34%),
    linear-gradient(135deg, rgba(255,250,238,0.78), rgba(238,229,211,0.62));
  border-color: rgba(138,104,32,0.16);
  box-shadow: 0 12px 28px rgba(96,68,24,0.10);
}

body.theme-genshin-light #page-shop .shop-command-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,0.72), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(219,177,101,0.22), transparent 42%),
    linear-gradient(145deg, rgba(255,252,242,0.88), rgba(239,228,207,0.74));
  border-color: rgba(138,104,32,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 12px 26px rgba(94,67,25,0.10);
}

body.theme-genshin-light #page-shop .shop-command-bg {
  color: rgba(138,104,32,0.07);
}

body.theme-genshin-light #page-shop .shop-command-kicker,
body.theme-genshin-light #page-shop .shop-featured-kicker,
body.theme-genshin-light #page-shop .shop-cat-kicker {
  color: #9b6b18;
  letter-spacing: 1.4px;
}

body.theme-genshin-light #page-shop .shop-command-stats div {
  background: rgba(255,255,255,0.52);
  border-color: rgba(138,104,32,0.16);
}

body.theme-genshin-light #page-shop .shop-featured-item {
  background:
    radial-gradient(circle at 12% 50%, rgba(219,177,101,0.16), transparent 44%),
    linear-gradient(90deg, rgba(255,252,242,0.82), rgba(236,226,207,0.70));
  border-color: rgba(138,104,32,0.22);
  box-shadow: 0 10px 22px rgba(96,68,24,0.08);
}

body.theme-genshin-light #page-shop .shop-featured-icon,
body.theme-genshin-light #page-shop .shop-grid-modern .shop-item-icon {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.82), transparent 42%),
    linear-gradient(145deg, rgba(255,250,238,0.92), rgba(232,216,181,0.58));
  border-color: rgba(138,104,32,0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.76);
}

body.theme-genshin-light #page-shop .shop-grid-modern .shop-item {
  background:
    radial-gradient(circle at 0% 0%, rgba(219,177,101,0.14), transparent 44%),
    linear-gradient(145deg, rgba(255,252,242,0.80), rgba(239,229,210,0.66));
  border-color: rgba(138,104,32,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.60),
    0 8px 18px rgba(96,68,24,0.07);
}

body.theme-genshin-light #page-shop .shop-grid-modern .shop-item::before {
  background: linear-gradient(90deg, rgba(219,177,101,0.18), transparent 40%);
}

body.theme-genshin-light #page-shop .shop-item-tier,
body.theme-genshin-light #page-shop .shop-item-hint {
  color: #7a5010;
  background: rgba(219,177,101,0.13);
  border-color: rgba(138,104,32,0.18);
}

body.theme-genshin-light #page-shop .shop-item-state,
body.theme-genshin-light #page-shop .shop-item-limit {
  color: #786b56;
}

body.theme-genshin-light #page-shop .shop-item-price {
  color: #8b6419;
}

body.theme-nw-light .shop-command-stats div,
body.theme-genshin-light .shop-command-stats div,
body.theme-nw-light .shop-featured-icon,
body.theme-genshin-light .shop-featured-icon {
  background: rgba(255,255,255,0.44);
  border-color: rgba(120,80,50,0.14);
}

body.theme-nw-light .shop-command-title,
body.theme-nw-light .shop-cat strong,
body.theme-nw-light .shop-featured-name,
body.theme-genshin-light .shop-command-title,
body.theme-genshin-light .shop-cat strong,
body.theme-genshin-light .shop-featured-name {
  color: var(--text) !important;
}

body.theme-nw-light .shop-command-sub,
body.theme-nw-light .shop-cat em,
body.theme-nw-light .shop-featured-desc,
body.theme-genshin-light .shop-command-sub,
body.theme-genshin-light .shop-cat em,
body.theme-genshin-light .shop-featured-desc {
  color: var(--text2) !important;
}

body.theme-nw-light .schedule-subject,
body.theme-nw-light .rules-title,
body.theme-nw-light .inventory-name,
body.theme-nw-light .prize-result-name,
body.theme-nw-light .profile-card-name,
body.theme-genshin-light .schedule-subject,
body.theme-genshin-light .rules-title,
body.theme-genshin-light .inventory-name,
body.theme-genshin-light .prize-result-name,
body.theme-genshin-light .profile-card-name,
body.theme-admin-light .schedule-subject,
body.theme-admin-light .rules-title,
body.theme-admin-light .inventory-name,
body.theme-admin-light .prize-result-name,
body.theme-admin-light .profile-card-name {
  color: var(--text) !important;
}

body.theme-nw-light .schedule-location,
body.theme-nw-light .rules-desc,
body.theme-nw-light .inventory-date,
body.theme-nw-light .prize-result-desc,
body.theme-nw-light .profile-card-sub,
body.theme-genshin-light .schedule-location,
body.theme-genshin-light .rules-desc,
body.theme-genshin-light .inventory-date,
body.theme-genshin-light .prize-result-desc,
body.theme-genshin-light .profile-card-sub,
body.theme-admin-light .schedule-location,
body.theme-admin-light .rules-desc,
body.theme-admin-light .inventory-date,
body.theme-admin-light .prize-result-desc,
body.theme-admin-light .profile-card-sub {
  color: var(--text2) !important;
}

body.theme-nw-light .profile-status-line,
body.theme-nw-light .profile-showcase,
body.theme-nw-light .profile-stat-grid div {
  background: rgba(255,255,255,0.42);
  border-color: rgba(90,60,50,0.13);
}

body.theme-genshin-light .profile-status-line,
body.theme-genshin-light .profile-showcase,
body.theme-genshin-light .profile-stat-grid div {
  background: rgba(255,250,238,0.58);
  border-color: rgba(138,104,32,0.16);
}

body.theme-nw-light .profile-status-line,
body.theme-nw-light .profile-showcase-copy em,
body.theme-nw-light .profile-stat-grid strong {
  color: #8a4a16;
}

body.theme-genshin-light .profile-status-line,
body.theme-genshin-light .profile-showcase-copy em,
body.theme-genshin-light .profile-stat-grid strong {
  color: #8b6419;
}

body.theme-nw-light .profile-badge-rank { background: rgba(138,74,22,0.12); border-color: rgba(138,74,22,0.30); color: #8a4a16; }
body.theme-nw-light .profile-badge-place { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: var(--text2); }
body.theme-nw-light .profile-badge-path  { background: rgba(140,20,20,0.08); border-color: rgba(140,20,20,0.20); color: #a83030; }
body.theme-nw-light .profile-showcase-copy span,
body.theme-nw-light .profile-stat-grid span,
body.theme-nw-light .profile-showcase-option-copy span,
body.theme-genshin-light .profile-showcase-copy span,
body.theme-genshin-light .profile-stat-grid span,
body.theme-genshin-light .profile-showcase-option-copy span {
  color: var(--text2) !important;
}

body.theme-nw-light .more-stat-cell,
body.theme-genshin-light .more-stat-cell {
  background: rgba(255,255,255,0.42);
  border-color: rgba(120,80,30,0.13);
}
body.theme-nw-light .more-stat-lbl,
body.theme-genshin-light .more-stat-lbl {
  color: var(--text2);
}

body.theme-nw-light .profile-showcase-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(153,51,51,0.08), transparent 38%),
    rgba(246,241,232,0.96);
  border-color: rgba(90,60,50,0.16);
}

body.theme-genshin-light .profile-showcase-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(219,177,101,0.14), transparent 38%),
    rgba(255,250,238,0.96);
  border-color: rgba(138,104,32,0.18);
}

body.theme-nw-light .profile-showcase-option,
body.theme-genshin-light .profile-showcase-option {
  background: rgba(255,255,255,0.50);
  border-color: rgba(90,60,50,0.12);
}

body.theme-nw-light .alpha-boss-block {
  background: rgba(255,255,255,0.46);
  border-color: rgba(90,60,50,0.22);
}
body.theme-nw-light .alpha-boss-raid-btn {
  background: rgba(180,20,20,0.08);
  border-top-color: var(--red-dim);
  color: #a83030;
}
body.theme-genshin-light .alpha-boss-block {
  background: rgba(255,250,238,0.70);
  border-color: rgba(138,104,32,0.24);
}
body.theme-genshin-light .alpha-boss-raid-btn {
  background: rgba(180,20,20,0.07);
  border-top-color: rgba(180,20,20,0.12);
  color: #a83030;
}

body.theme-nw-light .lb-item {
  background:
    radial-gradient(circle at 0% 50%, rgba(153,51,51,0.06), transparent 38%),
    rgba(255,255,255,0.42);
  border-color: rgba(90,60,50,0.10);
}

body.theme-genshin-light .lb-item {
  background:
    radial-gradient(circle at 0% 50%, rgba(219,177,101,0.10), transparent 38%),
    rgba(255,250,238,0.58);
  border-color: rgba(138,104,32,0.13);
}

body.theme-nw-light .lb-subline,
body.theme-nw-light .diary-rank-sub,
body.theme-genshin-light .lb-subline,
body.theme-genshin-light .diary-rank-sub {
  color: var(--text2);
}

body.theme-nw-light .diary-rank-card {
  background:
    radial-gradient(circle at 0% 50%, rgba(153,51,51,0.06), transparent 38%),
    rgba(255,255,255,0.42);
  border-color: rgba(90,60,50,0.10);
}

body.theme-genshin-light .diary-rank-card {
  background:
    radial-gradient(circle at 0% 50%, rgba(219,177,101,0.10), transparent 38%),
    rgba(255,250,238,0.58);
  border-color: rgba(138,104,32,0.13);
}

body.theme-nw-light .subtab {
  color: #5b524c;
  background: rgba(255,255,255,0.52);
  border-color: rgba(90,60,50,0.12);
}

body.theme-nw-light .subtab.active {
  color: #7f2b2b;
  background: rgba(153,51,51,0.10);
  border-color: rgba(153,51,51,0.24);
}

body.theme-genshin-light .subtab {
  color: #665b46;
  background: rgba(255,250,238,0.62);
  border-color: rgba(138,104,32,0.14);
}

body.theme-genshin-light .subtab.active {
  color: #6f4e12;
  background: rgba(219,177,101,0.16);
  border-color: rgba(138,104,32,0.28);
}

body.theme-genshin-light .casino-balance,
body.theme-genshin-light .prize-result {
  background:
    linear-gradient(145deg, rgba(255,250,238,0.84), rgba(241,232,214,0.74));
  border-color: rgba(138,104,32,0.18);
  box-shadow: 0 10px 24px rgba(90,60,20,0.06);
}

body.theme-genshin-light .case-card {
  background: linear-gradient(145deg, rgba(255,250,238,0.78), rgba(238,228,207,0.72));
  border-color: rgba(138,104,32,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 8px 18px rgba(90,60,20,0.045);
}

body.theme-genshin-light .case-card.gold {
  border-color: rgba(138,104,32,0.30);
}

body.theme-genshin-light .case-card.purple {
  border-color: rgba(98,86,135,0.22);
}

body.theme-genshin-light .case-card.black {
  border-color: rgba(112,72,56,0.22);
}

body.theme-genshin-light .case-cn.g,
body.theme-genshin-light .case-pct.g {
  color: #7a5010;
}

body.theme-genshin-light .case-cn.p,
body.theme-genshin-light .case-pct.p {
  color: #5d5882;
}

body.theme-genshin-light .case-cn.b,
body.theme-genshin-light .case-pct.b {
  color: #75433a;
}

body.theme-genshin-light .roulette-track {
  background: linear-gradient(180deg, rgba(255,250,238,0.88), rgba(236,226,207,0.84));
  border-color: rgba(138,104,32,0.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58), 0 10px 28px rgba(90,60,20,0.08);
}

body.theme-genshin-light .roulette-track::before {
  background: linear-gradient(to right, rgba(236,229,216,0.98), rgba(236,229,216,0));
}

body.theme-genshin-light .roulette-track::after {
  background: linear-gradient(to left, rgba(236,229,216,0.98), rgba(236,229,216,0));
}

body.theme-genshin-light .roulette-item {
  background: linear-gradient(145deg, rgba(255,252,242,0.94), rgba(236,226,207,0.92));
  border-color: rgba(138,104,32,0.16);
  color: #3d4555;
}

body.theme-genshin-light .roulette-item-gold {
  border-color: rgba(138,104,32,0.28);
  background:
    radial-gradient(circle at 50% 10%, rgba(219,177,101,0.18), transparent 48%),
    linear-gradient(145deg, rgba(255,252,242,0.95), rgba(236,226,207,0.92));
}

body.theme-genshin-light .roulette-item-purple {
  border-color: rgba(98,86,135,0.26);
  background:
    radial-gradient(circle at 50% 10%, rgba(98,86,135,0.14), transparent 50%),
    linear-gradient(145deg, rgba(248,246,255,0.95), rgba(226,222,238,0.92));
}

body.theme-genshin-light .roulette-item-black {
  border-color: rgba(112,72,56,0.28);
  background:
    radial-gradient(circle at 50% 10%, rgba(140,52,42,0.14), transparent 52%),
    linear-gradient(145deg, rgba(255,246,239,0.94), rgba(231,218,210,0.92));
}

body.theme-genshin-light .roulette-item-name {
  color: #5f6674;
}

body.theme-genshin-light .roulette-case-label {
  color: rgba(70,64,52,0.54);
}

body.theme-genshin-light .roulette-item.opened {
  background: linear-gradient(145deg, rgba(255,247,218,0.98), rgba(232,211,161,0.92));
}

body.theme-genshin-light .bonus-banner,
body.theme-genshin-light .shop-balance span,
body.theme-genshin-light .shop-item-buy,
body.theme-genshin-light .inv-btn-gift {
  color: #7a5010;
}

/* Unified case edge glow: rarity changes the prize, not the frame color. */
body:not(.theme-admin) .case-card.gold,
body:not(.theme-admin) .case-card.purple,
body:not(.theme-admin) .case-card.black {
  border-color: rgba(180,20,20,0.34) !important;
}
body:not(.theme-admin) .case-card.gold::before,
body:not(.theme-admin) .case-card.purple::before,
body:not(.theme-admin) .case-card.black::before {
  background: linear-gradient(90deg, transparent, rgba(180,20,20,0.76), transparent) !important;
}
body:not(.theme-admin) .roulette-item-gold,
body:not(.theme-admin) .roulette-item-purple,
body:not(.theme-admin) .roulette-item-black {
  border-color: rgba(180,20,20,0.38) !important;
}
body:not(.theme-admin) .roulette-track-gold,
body:not(.theme-admin) .roulette-track-purple,
body:not(.theme-admin) .roulette-track-black {
  border-color: rgba(180,20,20,0.66) !important;
  box-shadow: 0 0 18px rgba(180,20,20,0.16), inset 0 0 18px rgba(180,20,20,0.08) !important;
  animation: none !important;
}
body:not(.theme-admin) .roulette-item.winner,
body:not(.theme-admin) .roulette-item.winner-purple,
body:not(.theme-admin) .roulette-item.winner-black {
  border-color: rgba(255,55,55,0.82) !important;
  box-shadow: 0 0 24px rgba(180,20,20,0.36), inset 0 0 14px rgba(180,20,20,0.12) !important;
}
body:not(.theme-admin) .roulette-item.opened,
body:not(.theme-admin) .roulette-item.opened-purple,
body:not(.theme-admin) .roulette-item.opened-black {
  border-color: rgba(255,55,55,0.78) !important;
  box-shadow: 0 0 24px rgba(180,20,20,0.28) !important;
}
body.theme-admin .case-card.gold,
body.theme-admin .case-card.purple,
body.theme-admin .case-card.black {
  border-color: rgba(0,212,255,0.34) !important;
}
body.theme-admin .case-card.gold::before,
body.theme-admin .case-card.purple::before,
body.theme-admin .case-card.black::before {
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.82), transparent) !important;
}
body.theme-admin .roulette-item-gold,
body.theme-admin .roulette-item-purple,
body.theme-admin .roulette-item-black {
  border-color: rgba(0,212,255,0.38) !important;
}
body.theme-admin .roulette-track-gold,
body.theme-admin .roulette-track-purple,
body.theme-admin .roulette-track-black {
  border-color: rgba(0,212,255,0.68) !important;
  box-shadow: 0 0 18px rgba(0,212,255,0.18), inset 0 0 18px rgba(0,212,255,0.08) !important;
  animation: none !important;
}
body.theme-admin .roulette-item.winner,
body.theme-admin .roulette-item.winner-purple,
body.theme-admin .roulette-item.winner-black {
  border-color: rgba(0,212,255,0.86) !important;
  box-shadow: 0 0 24px rgba(0,212,255,0.34), inset 0 0 14px rgba(0,212,255,0.12) !important;
}

body.theme-nw-light .empty-state,
body.theme-genshin-light .empty-state {
  color: var(--text3);
}

body.theme-nw-light #casinoHistoryList .schedule-item,
body.theme-genshin-light #casinoHistoryList .schedule-item,
body.theme-nw-light #casinoInventoryList .inventory-item,
body.theme-genshin-light #casinoInventoryList .inventory-item {
  border-radius: 10px;
  margin: 0 12px 8px;
  border: 1px solid rgba(70,45,45,0.09);
  box-shadow: 0 8px 18px rgba(70,45,35,0.04);
}

body.theme-genshin-light #casinoHistoryList .schedule-item,
body.theme-genshin-light #casinoInventoryList .inventory-item {
  border-color: rgba(138,104,32,0.13);
  box-shadow: 0 8px 18px rgba(90,60,20,0.045);
}

body.theme-nw-light #myImplantsPage [style*="color:var(--text)"],
body.theme-nw-light #implants-catalog [style*="color:var(--text)"],
body.theme-nw-light #myImplantsPage [style*="color: var(--text)"],
body.theme-nw-light #implants-catalog [style*="color: var(--text)"],
body.theme-genshin-light #myCardsContent [style*="color:var(--text)"],
body.theme-genshin-light #myCardsContent [style*="color: var(--text)"] {
  color: var(--text) !important;
}

body.theme-nw-light #myImplantsPage [style*="color:var(--text2)"],
body.theme-nw-light #implants-catalog [style*="color:var(--text2)"],
body.theme-nw-light #myImplantsPage [style*="color: var(--text2)"],
body.theme-nw-light #implants-catalog [style*="color: var(--text2)"],
body.theme-genshin-light #myCardsContent [style*="color:var(--text2)"],
body.theme-genshin-light #myCardsContent [style*="color: var(--text2)"] {
  color: var(--text2) !important;
}

body.theme-genshin .home-event-card {
  background:
    linear-gradient(135deg, rgba(219,177,101,0.08), rgba(255,255,255,0.025)),
    rgba(255,255,255,0.026) !important;
}

body.theme-genshin-light .home-event-card {
  background:
    linear-gradient(135deg, rgba(219,177,101,0.12), rgba(255,250,238,0.78)),
    rgba(255,250,238,0.72) !important;
  border-color: rgba(138,104,32,0.20) !important;
}

body.theme-genshin-light .home-event-card-kicker {
  color: #7a5010 !important;
}

body.theme-genshin-dark .home-event-card {
  background:
    linear-gradient(135deg, rgba(219,177,101,0.08), rgba(26,22,40,0.70)),
    rgba(20,16,32,0.68) !important;
  border-color: rgba(219,177,101,0.14) !important;
}

body.theme-genshin-dark .home-event-card-kicker {
  color: rgba(219,177,101,0.68) !important;
}

/* Genshin Dark — gold-on-deep-purple casino/case cards, mirroring the
   warm cream/gold light variant above (was previously unstyled, falling
   back to the default NetWatch-dark look). */
body.theme-genshin-dark .casino-balance,
body.theme-genshin-dark .prize-result {
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-color: rgba(219,177,101,0.16);
}

body.theme-genshin-dark .case-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-color: rgba(219,177,101,0.16);
}

body.theme-genshin-dark .case-card.gold {
  border-color: rgba(219,177,101,0.32);
}

body.theme-genshin-dark .case-card.purple {
  border-color: rgba(155,89,182,0.3);
}

body.theme-genshin-dark .case-card.black {
  border-color: rgba(200,121,65,0.28);
}

body.theme-genshin-dark .case-cn.g,
body.theme-genshin-dark .case-pct.g {
  color: #dbb165;
}

body.theme-genshin-dark .case-cn.p,
body.theme-genshin-dark .case-pct.p {
  color: #c98bff;
}

body.theme-genshin-dark .schedule-item,
body.theme-genshin-dark .shop-item,
body.theme-genshin-dark .inventory-item,
body.theme-genshin-dark .rules-row {
  border-bottom-color: rgba(219,177,101,0.07);
}

/* UX foundation: list surfaces and tactile controls. */
.card-inner {
  border-radius: var(--card-radius);
}

.schedule-item,
.shop-item,
.inventory-item,
.rules-row {
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.schedule-item:hover,
.shop-item:hover,
.inventory-item:hover,
.rules-row:hover {
  background: color-mix(in srgb, var(--bg3) 72%, transparent);
}

.shop-item-buy,
.inv-btn,
.subtab,
.btn-primary,
.btn-gold {
  transition:
    transform var(--transition-fast) var(--ease-standard),
    opacity var(--transition-fast) var(--ease-standard),
    border-color var(--transition-fast) var(--ease-standard),
    background var(--transition-fast) var(--ease-standard),
    box-shadow var(--transition-fast) var(--ease-standard);
}

.shop-item-buy:active,
.inv-btn:active,
.subtab:active,
.btn-primary:active,
.btn-gold:active {
  transform: translateY(1px) scale(0.99);
}

.shop-item-buy:disabled,
.btn-primary:disabled,
.btn-gold:disabled,
.event-action[disabled] {
  filter: grayscale(0.18);
}

.prize-result,
.casino-balance {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 10px 28px rgba(0,0,0,0.10);
}

body.theme-nw-light .empty-state,
body.theme-genshin-light .empty-state {
  background:
    radial-gradient(circle at 50% 0%, rgba(138,104,32,0.10), transparent 54%),
    rgba(255,255,255,0.54);
  border-color: rgba(90,65,45,0.16);
  box-shadow: 0 10px 26px rgba(80,50,30,0.045);
}

body.theme-genshin-light .empty-state {
  background:
    radial-gradient(circle at 50% 0%, rgba(219,177,101,0.14), transparent 54%),
    rgba(255,250,238,0.62);
  border-color: rgba(138,104,32,0.18);
}

body.theme-genshin-dark .empty-state {
  background:
    radial-gradient(circle at 50% 0%, rgba(219,177,101,0.08), transparent 54%),
    rgba(255,255,255,0.032);
  border-color: rgba(219,177,101,0.12);
}

/* Catalog polish: implants and Genshin cards should feel like one system. */
#implants-catalog .card,
#cards-tab .card {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--border) 72%, var(--gold-border));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--red-dim) 42%, transparent), transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg2) 92%, transparent), color-mix(in srgb, var(--bg) 88%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 14px 34px rgba(0,0,0,0.14);
}

#implants-catalog .card-inner,
#cards-tab .card-inner {
  padding: 14px;
}

#implants-catalog img[style*="width:160px"],
#implants-catalog img[style*="width:180px"],
#cards-tab img[style*="width:160px"],
#cards-tab img[style*="width:180px"] {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.08), transparent 46%),
    rgba(255,255,255,0.025);
}

#implants-catalog img[style*="width:160px"],
#implants-catalog img[style*="width:180px"] {
  width: min(230px, 74vw) !important;
  height: min(230px, 74vw) !important;
}

#implants-catalog [style*="border-top:1px solid rgba(255,255,255"],
#cards-tab [style*="border-top:1px solid rgba(255,255,255"] {
  border-top-color: color-mix(in srgb, var(--border) 80%, var(--gold-border)) !important;
}

#implants-catalog [style*="border-bottom:1px solid rgba(255,255,255"],
#cards-tab [style*="border-bottom:1px solid rgba(255,255,255"] {
  border-bottom-color: color-mix(in srgb, var(--border) 82%, var(--gold-border)) !important;
}

#myCardsContent > div:not(.empty-state) {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--gold-dim) 48%, transparent), transparent 44%),
    color-mix(in srgb, var(--bg2) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 72%, var(--gold-border)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 10px 24px rgba(0,0,0,0.10);
}

#myCardsContent img {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.10), transparent 48%),
    rgba(255,255,255,0.035);
}

body.theme-nw-light #implants-catalog .card,
body.theme-nw-light #myImplantsPage,
body.theme-genshin-light #cards-tab .card,
body.theme-genshin-light #myCardsContent > div:not(.empty-state) {
  background:
    radial-gradient(circle at 50% 0%, rgba(138,104,32,0.10), transparent 52%),
    rgba(255,255,255,0.66) !important;
  border-color: rgba(90,65,45,0.14) !important;
  box-shadow: 0 12px 28px rgba(80,50,30,0.055);
}

body.theme-genshin-light #cards-tab .card,
body.theme-genshin-light #myCardsContent > div:not(.empty-state) {
  background:
    radial-gradient(circle at 50% 0%, rgba(219,177,101,0.14), transparent 52%),
    rgba(255,250,238,0.72) !important;
  border-color: rgba(138,104,32,0.18) !important;
}

body.theme-genshin-dark #cards-tab .card,
body.theme-genshin-dark #myCardsContent > div:not(.empty-state) {
  background:
    radial-gradient(circle at top left, rgba(219,177,101,0.08), transparent 44%),
    rgba(255,255,255,0.038) !important;
  border-color: rgba(219,177,101,0.12) !important;
}

/* Page chrome polish: headers, dividers and utility tiles. */
.page-header {
  margin: 0 0 2px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 72%, transparent), transparent);
}

.page-header::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 10px;
  width: 28px;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 58%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 28%, transparent);
}

.page-title {
  line-height: 1.15;
}

.page-sub {
  max-width: 92%;
  line-height: 1.45;
}

.cn-divider {
  margin-top: 4px;
  color: color-mix(in srgb, var(--red) 64%, var(--gold));
}

.cn-divider::before,
.cn-divider::after {
  opacity: 0.72;
}

.more-item {
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--red-dim) 54%, transparent), transparent 56%),
    var(--bg2);
}

.more-item:hover {
  border-color: color-mix(in srgb, var(--red-border) 62%, var(--gold-border));
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.more-item-icon {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--red) 18%, transparent));
}

body.theme-nw-light .page-header,
body.theme-genshin-light .page-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42), transparent);
}

body.theme-nw-light .more-item,
body.theme-genshin-light .more-item {
  background:
    radial-gradient(circle at 50% 0%, rgba(138,104,32,0.08), transparent 56%),
    rgba(255,255,255,0.58);
  border-color: rgba(90,65,45,0.13);
  box-shadow: 0 8px 20px rgba(80,50,30,0.04);
}

body.theme-genshin-light .more-item {
  background:
    radial-gradient(circle at 50% 0%, rgba(219,177,101,0.12), transparent 56%),
    rgba(255,250,238,0.66);
  border-color: rgba(138,104,32,0.16);
}

/* Home screen polish: stronger first impression without changing markup. */
#page-home .main-logo-wrap {
  padding: 18px 16px 10px;
  isolation: isolate;
}

#page-home .main-logo {
  width: 148px;
  height: 148px;
  margin-bottom: 12px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 48%),
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--red) 16%, transparent), transparent 62%);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.28));
}

#page-home .main-logo::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--gold-border) 34%, transparent);
  opacity: 0.46;
  pointer-events: none;
}

#page-home .main-logo::after {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--red) 56%, transparent), transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--red) 22%, transparent);
  pointer-events: none;
}

#page-home .main-logo img,
#page-home .main-logo .no-leak-bg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 14px rgba(212,175,55,0.12));
}

#page-home .main-pinyin {
  color: color-mix(in srgb, var(--gold) 76%, transparent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--gold) 16%, transparent);
}

#page-home .proto-tag {
  border-radius: 999px;
  padding: 4px 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--red-dim) 82%, transparent), color-mix(in srgb, var(--bg2) 72%, transparent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--red-border) 32%, transparent),
    0 10px 24px rgba(0,0,0,0.13);
  backdrop-filter: blur(8px);
}

#page-home .stats-row {
  gap: 8px;
  margin: 4px 12px 8px;
}

#page-home .stat-box {
  border-radius: 14px;
  padding: 12px 10px 11px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg2) 92%, transparent), color-mix(in srgb, var(--bg) 84%, transparent));
  border-color: color-mix(in srgb, var(--border) 84%, var(--gold-border));
  box-shadow:
    0 12px 28px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.035);
}

#page-home .stat-box::after {
  content: '';
  position: absolute;
  inset: auto 10px 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--red) 28%, transparent), transparent);
  opacity: 0.58;
}

#page-home .stat-cn {
  letter-spacing: 0.08em;
}

#page-home .stat-num {
  line-height: 1;
  text-shadow: 0 0 14px color-mix(in srgb, var(--gold) 16%, transparent);
}

#page-home .stat-lbl {
  opacity: 0.86;
}

#page-home .neuro-card {
  margin: 6px 12px 8px;
}

#page-home .neuro-card .card-inner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--red) 12%, transparent), transparent 42%),
    radial-gradient(circle at 92% 20%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 42%),
    color-mix(in srgb, var(--bg2) 94%, transparent);
}

#page-home .neuro-card .card-inner::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--red) 42%, transparent), color-mix(in srgb, var(--gold) 30%, transparent), transparent);
}

#page-home .neuro-status {
  color: color-mix(in srgb, var(--red) 72%, var(--gold));
  letter-spacing: 0.08em;
}

#page-home .neuro-name {
  font-size: 15px;
  line-height: 1.18;
}

#page-home .neuro-sub {
  color: var(--text3);
}

#page-home .traffic-bar {
  height: 5px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: rgba(255,255,255,0.045);
  border-radius: 999px;
}

#page-home .traffic-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--red) 82%, #220000), var(--gold));
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 22%, transparent);
}

#page-home .home-event-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--red) 18%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--red-dim) 76%, transparent), color-mix(in srgb, var(--bg2) 90%, transparent)) !important;
  border-color: color-mix(in srgb, var(--red-border) 76%, var(--gold-border)) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.035);
}

#page-home .home-event-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 16%, color-mix(in srgb, var(--red) 10%, transparent) 16% 17%, transparent 17% 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 6px);
  opacity: 0.58;
  pointer-events: none;
}

#page-home .home-event-card::after {
  content: '';
  position: absolute;
  right: -28px;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--red) 16%, transparent), transparent 68%);
  pointer-events: none;
}

#page-home .home-event-card-kicker,
#page-home .home-event-card-title,
#page-home .home-event-card-copy {
  position: relative;
  z-index: 1;
}

#page-home .home-event-card-title {
  letter-spacing: 0.015em;
  text-shadow: 0 0 18px rgba(255,255,255,0.035);
}

#page-home .home-event-card-copy {
  line-height: 1.45;
}

body.theme-nw-light #page-home .main-logo,
body.theme-genshin-light #page-home .main-logo {
  background:
    radial-gradient(circle at 50% 46%, rgba(138,104,32,0.12), transparent 50%),
    radial-gradient(circle at 50% 60%, rgba(153,51,51,0.08), transparent 64%);
  filter: drop-shadow(0 18px 26px rgba(80,50,30,0.10));
}

body.theme-nw-light #page-home .stat-box,
body.theme-genshin-light #page-home .stat-box,
body.theme-nw-light #page-home .neuro-card .card-inner,
body.theme-genshin-light #page-home .neuro-card .card-inner {
  background:
    radial-gradient(circle at 50% 0%, rgba(138,104,32,0.08), transparent 56%),
    rgba(255,255,255,0.66);
  border-color: rgba(90,65,45,0.13);
  box-shadow: 0 12px 26px rgba(80,50,30,0.045);
}

body.theme-genshin-light #page-home .stat-box,
body.theme-genshin-light #page-home .neuro-card .card-inner {
  background:
    radial-gradient(circle at 50% 0%, rgba(219,177,101,0.12), transparent 56%),
    rgba(255,250,238,0.70);
  border-color: rgba(138,104,32,0.16);
}

body.theme-nw-light #page-home .home-event-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(153,51,51,0.10), transparent 44%),
    rgba(255,255,255,0.72) !important;
  box-shadow: 0 14px 30px rgba(80,50,30,0.055);
}

body.theme-genshin-light #page-home .home-event-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(219,177,101,0.14), transparent 44%),
    rgba(255,250,238,0.74) !important;
  box-shadow: 0 14px 30px rgba(80,50,30,0.055);
}

body.theme-genshin-dark #page-home .home-event-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(219,177,101,0.10), transparent 44%),
    rgba(20,16,32,0.70) !important;
}

/* Architect polish pass: terminal result art and cleaner battle HUD. */
.event-overlay.event-state-terminal .event-hero::before {
  opacity: 0.72;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.03) 32%, rgba(0,0,0,0.72)),
    repeating-linear-gradient(180deg, rgba(255, 70, 40, 0.045) 0 1px, transparent 1px 5px);
}

.event-overlay.event-terminal .event-topbar {
  background: linear-gradient(180deg, rgba(0,0,0,0.42), transparent);
}

.event-overlay.event-terminal .event-lobby-card.event-result-card {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  z-index: 18;
  display: block;
  min-height: 44vh;
  max-height: 52vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 22px 22px 0 0;
  background: rgba(5, 5, 13, 0.97);
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 -12px 60px rgba(0,0,0,0.62),
    0 -1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  pointer-events: auto;
  transform: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.event-overlay.event-terminal .event-lobby-card.event-result-win {
  border-top-color: rgba(0, 230, 255, 0.55);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 230, 255, 0.10) 0%, transparent 60%),
    rgba(4, 5, 14, 0.97);
  box-shadow:
    0 -12px 60px rgba(0,0,0,0.62),
    0 -1px 0 rgba(0,230,255,0.22),
    0 -32px 80px rgba(0, 180, 255, 0.12);
  animation: resultWinPulse 3s ease-in-out infinite;
}

.event-overlay.event-terminal .event-lobby-card.event-result-lose {
  border-top-color: rgba(255, 54, 54, 0.58);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 40, 40, 0.12) 0%, transparent 60%),
    rgba(6, 4, 10, 0.97);
  box-shadow:
    0 -12px 60px rgba(0,0,0,0.62),
    0 -1px 0 rgba(255,54,54,0.22),
    0 -32px 80px rgba(180, 20, 20, 0.14);
  animation: resultLosePulse 3s ease-in-out infinite;
}

@keyframes resultWinPulse {
  0%,100% { border-top-color: rgba(0,230,255,0.42); }
  50%      { border-top-color: rgba(0,230,255,0.76); }
}

@keyframes resultLosePulse {
  0%,100% { border-top-color: rgba(255,54,54,0.44); }
  50%      { border-top-color: rgba(255,54,54,0.80); }
}

/* ── Result verdict header ─────────────────────────────── */
.event-result-header {
  padding: 18px 18px 0;
}

.event-result-verdict {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1;
}

.event-result-win .event-result-verdict {
  color: #54f5ff;
  text-shadow: 0 0 28px rgba(0,230,255,0.44);
}

.event-result-lose .event-result-verdict {
  color: #ff6464;
  text-shadow: 0 0 28px rgba(255,40,40,0.44);
}

.event-result-subtext {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

.event-result-lose .event-result-subtext {
  color: rgba(255,120,120,0.85);
}

.event-result-divider {
  margin-top: 12px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04), transparent);
}

.event-result-win .event-result-divider {
  background: linear-gradient(90deg, rgba(0,230,255,0.42), rgba(0,230,255,0.08), transparent);
}

.event-result-lose .event-result-divider {
  background: linear-gradient(90deg, rgba(255,54,54,0.42), rgba(255,54,54,0.08), transparent);
}

.event-result-card .event-lobby-head {
  align-items: center;
  gap: 10px;
  padding: 14px 18px 0;
}

.event-result-card .event-lobby-kicker {
  font-size: 8px;
  letter-spacing: 2.3px;
  color: rgba(84, 245, 255, 0.82);
}

.event-result-card.event-result-lose .event-lobby-kicker {
  color: rgba(255, 118, 92, 0.86);
}

.event-result-card .event-lobby-status {
  margin-top: 3px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.event-result-card .event-lobby-count {
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  font-size: 10px;
}

.event-result-card .event-lobby-reward,
.event-result-card .event-lobby-members {
  margin-top: 6px;
  padding: 0 18px;
}

.event-result-card .event-lobby-label {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: rgba(255,255,255,0.42);
}

.event-result-card .event-lobby-value {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.25;
}

.event-result-reward-main {
  display: block;
  color: #f4e1ad;
  font-weight: 800;
}

.event-result-reward-sub {
  display: block;
  margin-top: 2px;
  color: rgba(210, 235, 240, 0.70);
  font-family: monospace;
  font-size: 9px;
  font-weight: 600;
}

.event-result-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.event-result-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 14px;
  padding: 1px 5px;
  border: 1px solid rgba(84, 245, 255, 0.20);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(210, 252, 255, 0.82);
  font-family: monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.event-result-card .event-team-list {
  margin-top: 6px;
  /* The result sheet itself scrolls — don't squash the MVP card and damage
     board into a tiny inner scroll window (the crown was getting clipped). */
  max-height: none;
  padding: 0;
  border: none;
  background: transparent;
  overflow-y: visible;
}

.event-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  color: rgba(255,255,255,0.84);
  font-size: 10px;
  line-height: 1.2;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.event-result-row strong {
  flex: 0 0 auto;
  color: rgba(84, 245, 255, 0.82);
  font-family: monospace;
  font-size: 9px;
  font-weight: 800;
}

.event-result-mvp {
  display: inline-flex;
  margin-right: 5px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(212,175,55,0.15);
  border: 1px solid rgba(212,175,55,0.22);
  color: #f0d887;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
}

.event-result-card .event-lobby-actions {
  padding: 10px 18px 6px;
  margin: 0;
  display: flex;
  gap: 8px;
}

.event-result-card .event-lobby-btn {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 8px;
  min-height: 0;
}

.event-overlay.event-terminal .event-log {
  display: none;
}

/* iOS result card — full-width bottom sheet, safe bottom via padding */

body.tg-ios .event-overlay.event-terminal .event-log {
  display: none;
}

.event-overlay.event-state-terminal #eventBossImage {
  display: block !important;
  filter: saturate(1.12) contrast(1.08) brightness(0.96);
  animation: architectTerminalBreath 4.8s ease-in-out infinite;
}
.event-overlay.event-state-finished #eventBossImage,
.event-overlay.event-state-failed #eventBossImage {
  display: block !important;
  /* Fit the artwork into the zone above the bottom result sheet:
     the sheet is capped at 52vh, so the image box ends at 53vh from the bottom. */
  top: max(56px, env(safe-area-inset-top, 0px));
  bottom: 53vh;
  height: auto;
  max-height: none;
  width: 100vw;
  object-fit: contain;
  object-position: center center;
}

/* Wild AI Breach defeat: play the loss video instead of the static image */
.event-overlay.event-wildai.event-state-failed #eventBossImage {
  display: none !important;
}

.event-overlay.event-wildai.event-state-failed #eventBossVideo {
  display: block !important;
  top: max(56px, env(safe-area-inset-top, 0px));
  bottom: 53vh;
  height: auto;
  max-height: none;
  width: 100vw;
  object-fit: contain;
  object-position: center center;
}

.event-overlay.event-state-finished .event-hero-glow {
  background:
    radial-gradient(circle at 50% 38%, rgba(0, 230, 255, 0.16), transparent 34%),
    radial-gradient(circle at 50% 62%, rgba(212, 175, 55, 0.16), transparent 42%);
  opacity: 0.95;
}

.event-overlay.event-state-failed .event-hero-glow {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 0, 0, 0.28), transparent 36%),
    linear-gradient(180deg, transparent, rgba(80, 0, 0, 0.44));
  opacity: 1;
  animation: architectFailedPulse 1.7s ease-in-out infinite;
}

.event-overlay.event-state-failed::before {
  opacity: 0.24;
  background:
    repeating-linear-gradient(180deg, rgba(255, 20, 20, 0.10) 0 1px, transparent 1px 6px),
    linear-gradient(90deg, rgba(255, 0, 0, 0.12), transparent 38%, rgba(255, 0, 0, 0.14));
  animation: architectPhaseSplit 1.8s steps(2) infinite;
}

.event-overlay.event-state-finished::before {
  opacity: 0.16;
  background:
    repeating-linear-gradient(180deg, rgba(0, 230, 255, 0.08) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, rgba(0, 230, 255, 0.10), transparent 42%, rgba(212, 175, 55, 0.10));
  animation: architectPhaseScanSlow 7s linear infinite;
}

.event-hud {
  background: rgba(3, 8, 14, 0.32);
  border-color: rgba(0, 230, 255, 0.32);
  box-shadow:
    0 0 8px rgba(0, 230, 255, 0.07),
    inset 0 0 0 1px rgba(0, 230, 255, 0.04);
}

.event-hud .boss-hud__caption {
  display: none;
}

.event-hud .event-boss-name {
  max-width: 92px;
}

.event-hud .event-status-badge {
  opacity: 0.86;
}

.event-hp-bar {
  background: rgba(5, 14, 22, 0.62);
  border-color: rgba(84, 245, 255, 0.36);
}

.event-hp-fill {
  opacity: 0.82;
  box-shadow: 0 0 8px rgba(255, 45, 60, 0.32);
}

.event-final-timer {
  top: 96px;
  background: rgba(18, 3, 5, 0.58);
  border-color: rgba(255, 34, 34, 0.38);
}

@keyframes architectTerminalBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

@keyframes architectFailedPulse {
  0%, 100% { opacity: 0.82; filter: saturate(1); }
  50% { opacity: 1; filter: saturate(1.55); }
}

/* ===== GENSHIN PROFILE CARD v3 ===== */
body.theme-genshin-light .profile-card-home,
body.theme-genshin-dark .profile-card-home {
  border-width: 2px;
  border-radius: 20px;
  padding: 14px 16px 16px;
  font-family: Georgia, serif;
}
body.theme-genshin-light .profile-card-home {
  border-color: rgba(180,140,60,0.45);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(219,177,101,0.20), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(180,140,60,0.16), transparent 60%),
    linear-gradient(155deg, #fbf5e6 0%, #f3e8c8 50%, #e8d8a8 100%);
  box-shadow: 0 6px 24px rgba(160,120,40,0.18), inset 0 0 30px rgba(255,240,200,0.5);
}
body.theme-genshin-dark .profile-card-home {
  border-color: rgba(219,177,101,0.45);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(219,177,101,0.16), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(120,80,180,0.14), transparent 60%),
    linear-gradient(155deg, rgba(40,28,60,0.95) 0%, rgba(28,22,46,0.98) 100%);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), inset 0 0 30px rgba(219,177,101,0.06);
}

/* Genshin: replace tech corners with floral ornaments */
body.theme-genshin-light .profile-card-home::before,
body.theme-genshin-light .profile-card-home::after,
body.theme-genshin-dark .profile-card-home::before,
body.theme-genshin-dark .profile-card-home::after {
  width: 22px; height: 22px;
  border: none !important;
  border-radius: 0 !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.65;
}
body.theme-genshin-light .profile-card-home::before,
body.theme-genshin-dark .profile-card-home::before {
  top: 4px; left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2 L12 2 L10 4 L4 4 L4 10 L2 12 Z M5 5 L5 8 L8 5 Z' fill='%23b8893a'/%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%23dbb165'/%3E%3C/svg%3E");
}
body.theme-genshin-light .profile-card-home::after,
body.theme-genshin-dark .profile-card-home::after {
  bottom: 4px; right: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 22 L12 22 L14 20 L20 20 L20 14 L22 12 Z M19 19 L19 16 L16 19 Z' fill='%23b8893a'/%3E%3Ccircle cx='21' cy='21' r='1.5' fill='%23dbb165'/%3E%3C/svg%3E");
}

/* Genshin scan line: warm gold gradient */
body.theme-genshin-light .profile-scan-line,
body.theme-genshin-dark .profile-scan-line {
  background: linear-gradient(90deg, transparent 0%, rgba(219,177,101,0.55) 40%, rgba(255,225,150,0.85) 50%, rgba(219,177,101,0.55) 60%, transparent 100%);
  height: 1px;
  filter: blur(0.4px);
}

/* Avatar: round, gold double-ring */
body.theme-genshin-light .profile-card-home .profile-avatar-wrap,
body.theme-genshin-dark .profile-card-home .profile-avatar-wrap {
  border-radius: 50%;
  width: 76px; height: 76px;
  border: 2px solid;
  box-shadow: 0 0 0 3px rgba(255,240,200,0.5), 0 4px 16px rgba(160,120,40,0.3);
  position: relative;
  overflow: visible;
}
body.theme-genshin-light .profile-card-home .profile-avatar-wrap {
  border-color: #c89b4a;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,235,180,0.8), rgba(230,200,130,0.6) 70%);
}
body.theme-genshin-dark .profile-card-home .profile-avatar-wrap {
  border-color: rgba(219,177,101,0.85);
  box-shadow: 0 0 0 3px rgba(219,177,101,0.18), 0 4px 18px rgba(0,0,0,0.6);
  background:
    radial-gradient(circle at 50% 25%, rgba(80,60,30,0.6), rgba(40,28,60,0.8) 70%);
}
body.theme-genshin-light .profile-avatar-img,
body.theme-genshin-dark .profile-avatar-img {
  border-radius: 50%;
}
body.theme-genshin-light .profile-avatar-fallback,
body.theme-genshin-dark .profile-avatar-fallback {
  border-radius: 50%;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 30px;
}

/* Decorative star above avatar (rarity flair) */
body.theme-genshin-light .profile-card-home .profile-avatar-wrap::before,
body.theme-genshin-dark .profile-card-home .profile-avatar-wrap::before {
  content: '✦';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--gold);
  text-shadow: 0 0 6px rgba(255,220,120,0.9);
  pointer-events: none;
  animation: gsAvatarStar 3s ease-in-out infinite;
}
@keyframes gsAvatarStar {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.18); }
}

/* Kicker → decorative serif label */
body.theme-genshin-light .profile-card-kicker,
body.theme-genshin-dark .profile-card-kicker {
  font-family: Georgia, serif;
  font-size: 9px;
  font-style: italic;
  letter-spacing: 1.2px;
  text-transform: none;
}
body.theme-genshin-light .profile-card-kicker { color: #a07028; }
body.theme-genshin-dark .profile-card-kicker  { color: rgba(219,177,101,0.75); }

body.theme-genshin-light .profile-card-kicker::before,
body.theme-genshin-light .profile-card-kicker::after,
body.theme-genshin-dark .profile-card-kicker::before,
body.theme-genshin-dark .profile-card-kicker::after {
  content: '❋';
  display: inline-block;
  margin: 0 5px;
  font-size: 8px;
  vertical-align: 1px;
  opacity: 0.7;
}

/* Name: serif, italic-ish */
body.theme-genshin-light .profile-card-home .profile-card-name,
body.theme-genshin-dark .profile-card-home .profile-card-name {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-top: 5px;
}
body.theme-genshin-light .profile-card-home .profile-card-name {
  color: #2d3344;
  text-shadow: 0 1px 0 rgba(255,250,235,0.6);
}
body.theme-genshin-dark .profile-card-home .profile-card-name {
  color: #ede2cc;
  text-shadow: 0 0 8px rgba(219,177,101,0.3);
}

/* Badges → star rarity + path glyph */
body.theme-genshin-light .profile-badge,
body.theme-genshin-dark .profile-badge {
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 0.4px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
}
body.theme-genshin-light .profile-badge-rank {
  background: linear-gradient(180deg, #fff5d8, #f0d896);
  border: 1px solid #c89b4a;
  color: #6b4a18;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
body.theme-genshin-dark .profile-badge-rank {
  background: linear-gradient(180deg, rgba(219,177,101,0.30), rgba(150,110,50,0.4));
  border: 1px solid rgba(219,177,101,0.7);
  color: #f5e3b8;
}
body.theme-genshin-light .profile-badge-place {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(180,140,60,0.4);
  color: #5a4a28;
}
body.theme-genshin-dark .profile-badge-place {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(219,177,101,0.3);
  color: #d8c8a8;
}
body.theme-genshin-light .profile-badge-path,
body.theme-genshin-dark .profile-badge-path {
  background: linear-gradient(180deg, rgba(180,80,180,0.18), rgba(100,40,140,0.25));
  border: 1px solid rgba(180,100,200,0.55);
  color: #7a3a8a;
}
body.theme-genshin-dark .profile-badge-path { color: #d8a8e8; }

/* Status line: parchment strip */
body.theme-genshin-light .profile-card-home .profile-status-line,
body.theme-genshin-dark .profile-card-home .profile-status-line {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 9px;
  letter-spacing: 0.4px;
  border-radius: 10px;
  padding: 6px 10px;
  text-align: center;
}
body.theme-genshin-light .profile-card-home .profile-status-line {
  background: linear-gradient(90deg, transparent 0%, rgba(255,250,225,0.7) 50%, transparent 100%);
  border: 1px solid rgba(180,140,60,0.25);
  color: #6b4a18;
}
body.theme-genshin-dark .profile-card-home .profile-status-line {
  background: linear-gradient(90deg, transparent 0%, rgba(219,177,101,0.10) 50%, transparent 100%);
  border: 1px solid rgba(219,177,101,0.22);
  color: #d8c4a0;
}

/* Showcase: artifact-card */
body.theme-genshin-light .profile-card-home .profile-showcase,
body.theme-genshin-dark .profile-card-home .profile-showcase {
  border-radius: 14px;
  border-width: 1px;
  font-family: Georgia, serif;
}
body.theme-genshin-light .profile-card-home .profile-showcase {
  background: linear-gradient(135deg, rgba(255,245,210,0.7), rgba(250,225,170,0.5));
  border-color: rgba(180,140,60,0.4);
}
body.theme-genshin-dark .profile-card-home .profile-showcase {
  background: linear-gradient(135deg, rgba(60,45,30,0.5), rgba(40,28,55,0.6));
  border-color: rgba(219,177,101,0.35);
}
body.theme-genshin-light .profile-card-home .profile-showcase-icon,
body.theme-genshin-dark .profile-card-home .profile-showcase-icon {
  border-radius: 10px;
  font-family: Georgia, serif;
  border-width: 1px;
}
body.theme-genshin-light .profile-card-home .profile-showcase-icon {
  background: linear-gradient(180deg, #fff8e0, #f0d896);
  border-color: #c89b4a;
  color: #6b4a18;
}
body.theme-genshin-dark .profile-card-home .profile-showcase-icon {
  background: linear-gradient(180deg, rgba(219,177,101,0.25), rgba(120,80,30,0.35));
  border-color: rgba(219,177,101,0.6);
  color: #f0d896;
}
body.theme-genshin-light .profile-card-home .profile-showcase-copy strong {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 11px;
  color: #2d3344;
}
body.theme-genshin-dark .profile-card-home .profile-showcase-copy strong {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 11px;
  color: #ede2cc;
}
body.theme-genshin-light .profile-card-home .profile-showcase-copy span,
body.theme-genshin-dark .profile-card-home .profile-showcase-copy span {
  font-family: Georgia, serif;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0.6px;
}
body.theme-genshin-light .profile-card-home .profile-showcase-copy em {
  color: #8a6820;
  font-family: Georgia, serif;
  font-style: italic;
}
body.theme-genshin-dark .profile-card-home .profile-showcase-copy em {
  color: rgba(219,177,101,0.85);
  font-family: Georgia, serif;
  font-style: italic;
}

/* Buttons */
body.theme-genshin-light .profile-card-home .profile-mini-btn,
body.theme-genshin-dark .profile-card-home .profile-mini-btn {
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: lowercase;
  font-style: italic;
  padding: 6px 12px;
  border-radius: 999px;
  border-width: 1px;
}
body.theme-genshin-light .profile-card-home .profile-mini-btn {
  background: linear-gradient(180deg, #fff5d8, #e8c878);
  border-color: #c89b4a;
  color: #6b4a18;
  box-shadow: 0 2px 6px rgba(160,120,40,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
}
body.theme-genshin-dark .profile-card-home .profile-mini-btn {
  background: linear-gradient(180deg, rgba(219,177,101,0.28), rgba(150,110,50,0.35));
  border-color: rgba(219,177,101,0.6);
  color: #f5e3b8;
}
body.theme-genshin-light .profile-card-home .profile-mini-btn.ghost {
  background: rgba(255,255,255,0.6);
  border-color: rgba(120,80,30,0.3);
  color: #6b6055;
}
body.theme-genshin-dark .profile-card-home .profile-mini-btn.ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(219,177,101,0.25);
  color: #a09880;
}

/* Admin variant for Genshin: imperial red-gold */
body.is-admin.theme-genshin-light .profile-card-home,
body.is-admin.theme-genshin-dark .profile-card-home {
  border-color: rgba(160,40,40,0.65);
}
body.is-admin.theme-genshin-light .profile-card-home {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(180,40,40,0.16), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(219,177,101,0.20), transparent 60%),
    linear-gradient(155deg, #fdf2e0 0%, #f6dec8 60%, #ecc8a0 100%);
  box-shadow: 0 6px 24px rgba(160,40,40,0.22), inset 0 0 30px rgba(255,220,180,0.4);
}
body.is-admin.theme-genshin-dark .profile-card-home {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(180,40,40,0.20), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(219,177,101,0.16), transparent 60%),
    linear-gradient(155deg, rgba(50,22,32,0.95) 0%, rgba(34,20,38,0.98) 100%);
  box-shadow: 0 6px 24px rgba(0,0,0,0.6), inset 0 0 30px rgba(180,40,40,0.10);
}
body.is-admin.theme-genshin-light .profile-card-kicker,
body.is-admin.theme-genshin-dark .profile-card-kicker {
  color: #a83030;
}
body.is-admin.theme-genshin-light .profile-card-home .profile-avatar-wrap,
body.is-admin.theme-genshin-dark .profile-card-home .profile-avatar-wrap {
  border-color: #c8403a;
}

/* ===================================================
   GENSHIN SHOP — Part 3
   =================================================== */

/* ── Subtabs ── */
body.theme-genshin-light #page-shop .subtab,
body.theme-genshin-dark  #page-shop .subtab {
  font-family: Georgia, serif;
  min-height: 38px;
  padding: 9px 10px;
  font-size: 11px;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.55px;
  border-radius: 18px;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}
body.theme-genshin-light #page-shop .subtab {
  background: rgba(255,255,255,0.45);
  border-color: rgba(180,140,60,0.25);
  color: #8a6028;
}
body.theme-genshin-dark  #page-shop .subtab {
  background: rgba(255,255,255,0.04);
  border-color: rgba(219,177,101,0.18);
  color: rgba(219,177,101,0.7);
}
body.theme-genshin-light #page-shop .subtab.active {
  background: linear-gradient(180deg, #fff8e0, #f0d896);
  border-color: #c89b4a;
  color: #5a3a10;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 8px rgba(160,120,40,0.18);
}
body.theme-genshin-dark  #page-shop .subtab.active {
  background: linear-gradient(180deg, rgba(219,177,101,0.32), rgba(150,110,50,0.42));
  border-color: rgba(219,177,101,0.75);
  color: #f5e3b8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

body.theme-genshin-light #page-shop .shop-subtabs,
body.theme-genshin-dark  #page-shop .shop-subtabs {
  gap: 8px;
  padding: 10px 12px 8px;
}

/* ── Balance header ── */
body.theme-genshin-light #page-shop .shop-balance {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 10px;
  color: #8a6028;
}
body.theme-genshin-dark  #page-shop .shop-balance {
  font-family: Georgia, serif;
  font-style: italic;
  color: rgba(219,177,101,0.7);
}
body.theme-genshin-light #page-shop .shop-balance span,
body.theme-genshin-dark  #page-shop .shop-balance span {
  font-family: Georgia, serif;
  font-weight: 700;
}
body.theme-genshin-light #page-shop .shop-balance span { color: #7a5010; }
body.theme-genshin-dark  #page-shop .shop-balance span { color: #f0d896; }

/* ── Command card (top summary) ── */
body.theme-genshin-light #page-shop .shop-command-card {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255,255,255,0.8), transparent 44%),
    radial-gradient(ellipse at 100% 100%, rgba(219,177,101,0.22), transparent 48%),
    linear-gradient(145deg, #fcf8ee, #efe3c4);
  border: 1px solid rgba(180,140,60,0.35);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 24px rgba(140,100,30,0.12);
}
body.theme-genshin-dark  #page-shop .shop-command-card {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(219,177,101,0.12), transparent 44%),
    radial-gradient(ellipse at 100% 100%, rgba(120,80,180,0.12), transparent 48%),
    linear-gradient(145deg, rgba(40,30,55,0.96), rgba(30,22,44,0.98));
  border: 1px solid rgba(219,177,101,0.30);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}
body.theme-genshin-light #page-shop .shop-command-bg  { color: rgba(138,104,32,0.07); font-family: Georgia, serif; }
body.theme-genshin-dark  #page-shop .shop-command-bg  { color: rgba(219,177,101,0.05); font-family: Georgia, serif; }

body.theme-genshin-light #page-shop .shop-command-kicker,
body.theme-genshin-dark  #page-shop .shop-command-kicker {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: none;
}
body.theme-genshin-light #page-shop .shop-command-kicker { color: #a07028; }
body.theme-genshin-dark  #page-shop .shop-command-kicker { color: rgba(219,177,101,0.7); }

body.theme-genshin-light #page-shop .shop-command-title,
body.theme-genshin-dark  #page-shop .shop-command-title {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 15px;
}
body.theme-genshin-light #page-shop .shop-command-title { color: #2d3344; }
body.theme-genshin-dark  #page-shop .shop-command-title { color: #ede2cc; }

body.theme-genshin-light #page-shop .shop-command-sub,
body.theme-genshin-dark  #page-shop .shop-command-sub {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 11px;
}
body.theme-genshin-light #page-shop .shop-command-sub { color: #6b5530; }
body.theme-genshin-dark  #page-shop .shop-command-sub { color: #b0a088; }

body.theme-genshin-light #page-shop .shop-command-stats div {
  background: rgba(255,255,255,0.58);
  border-color: rgba(180,140,60,0.22);
  border-radius: 12px;
}
body.theme-genshin-dark  #page-shop .shop-command-stats div {
  background: rgba(255,255,255,0.05);
  border-color: rgba(219,177,101,0.20);
  border-radius: 12px;
}
body.theme-genshin-light #page-shop .shop-command-stats span { color: #8a6028; font-family: Georgia, serif; font-style: italic; font-size: 9px; }
body.theme-genshin-light #page-shop .shop-command-stats strong { color: #3d2a10; font-family: Georgia, serif; font-size: 14px; }
body.theme-genshin-dark  #page-shop .shop-command-stats span  { color: rgba(219,177,101,0.6); font-family: Georgia, serif; font-style: italic; font-size: 9px; }
body.theme-genshin-dark  #page-shop .shop-command-stats strong { color: #f0d896; font-family: Georgia, serif; font-size: 14px; }

/* ── Featured item ── */
body.theme-genshin-light #page-shop .shop-featured-item {
  background: linear-gradient(135deg, rgba(255,250,238,0.90), rgba(238,226,198,0.80));
  border: 1px solid rgba(180,140,60,0.35);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 8px 20px rgba(140,100,30,0.10);
}
body.theme-genshin-dark  #page-shop .shop-featured-item {
  background: linear-gradient(135deg, rgba(50,38,28,0.7), rgba(38,28,50,0.8));
  border: 1px solid rgba(219,177,101,0.32);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
body.theme-genshin-light #page-shop .shop-featured-icon {
  background: linear-gradient(180deg, #fff8e0, #f0d896);
  border-color: #c89b4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  border-radius: 14px;
}
body.theme-genshin-dark  #page-shop .shop-featured-icon {
  background: linear-gradient(180deg, rgba(219,177,101,0.22), rgba(120,80,30,0.35));
  border-color: rgba(219,177,101,0.55);
  border-radius: 14px;
}
body.theme-genshin-light #page-shop .shop-featured-kicker,
body.theme-genshin-dark  #page-shop .shop-featured-kicker {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: none;
}
body.theme-genshin-light #page-shop .shop-featured-kicker { color: #a07028; }
body.theme-genshin-dark  #page-shop .shop-featured-kicker { color: rgba(219,177,101,0.75); }
body.theme-genshin-light #page-shop .shop-featured-name { font-family: Georgia, serif; font-size: 13px; font-weight: 700; color: #2d3344; }
body.theme-genshin-dark  #page-shop .shop-featured-name { font-family: Georgia, serif; font-size: 13px; font-weight: 700; color: #ede2cc; }
body.theme-genshin-light #page-shop .shop-featured-desc { font-family: Georgia, serif; font-style: italic; font-size: 11px; color: #6b5530; }
body.theme-genshin-dark  #page-shop .shop-featured-desc { font-family: Georgia, serif; font-style: italic; font-size: 11px; color: #b0a088; }
body.theme-genshin-light #page-shop .shop-featured-price {
  font-family: Georgia, serif; font-weight: 700; font-size: 15px;
  color: #7a5010;
  text-shadow: 0 1px 0 rgba(255,250,220,0.8);
}
body.theme-genshin-dark  #page-shop .shop-featured-price {
  font-family: Georgia, serif; font-weight: 700; font-size: 15px;
  color: #f0d896;
  text-shadow: 0 0 12px rgba(219,177,101,0.5);
}

/* ── Category headers ── */
body.theme-genshin-light #page-shop .shop-cat,
body.theme-genshin-dark  #page-shop .shop-cat {
  font-family: Georgia, serif;
  padding: 14px 14px 6px;
}
body.theme-genshin-light #page-shop .shop-cat strong { color: #3d2a10; font-size: 13px; }
body.theme-genshin-dark  #page-shop .shop-cat strong { color: #ede2cc; font-size: 13px; }
body.theme-genshin-light #page-shop .shop-cat em { font-family: Georgia, serif; font-style: italic; color: #8a6028; }
body.theme-genshin-dark  #page-shop .shop-cat em { font-family: Georgia, serif; font-style: italic; color: rgba(219,177,101,0.65); }
/* Divider line: warm gold instead of red */
body.theme-genshin-light #page-shop .shop-cat::after {
  background: linear-gradient(90deg, rgba(180,140,60,0.55), rgba(219,177,101,0.25), transparent);
}
body.theme-genshin-dark  #page-shop .shop-cat::after {
  background: linear-gradient(90deg, rgba(219,177,101,0.45), rgba(219,177,101,0.15), transparent);
}
body.theme-genshin-light #page-shop .shop-cat-kicker,
body.theme-genshin-dark  #page-shop .shop-cat-kicker {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: none;
}
body.theme-genshin-light #page-shop .shop-cat-kicker { color: #a07028; }
body.theme-genshin-dark  #page-shop .shop-cat-kicker { color: rgba(219,177,101,0.65); }
body.theme-genshin-light #page-shop .shop-cat-count {
  background: rgba(255,255,255,0.6);
  border-color: rgba(180,140,60,0.3);
  color: #7a5010;
  font-family: Georgia, serif;
}
body.theme-genshin-dark  #page-shop .shop-cat-count {
  background: rgba(219,177,101,0.12);
  border-color: rgba(219,177,101,0.3);
  color: #f0d896;
  font-family: Georgia, serif;
}

/* ── Item cards ── */
body.theme-genshin-light #page-shop .shop-grid-modern .shop-item {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255,255,255,0.7), transparent 50%),
    linear-gradient(155deg, rgba(255,252,242,0.88), rgba(239,228,207,0.74));
  border: 1px solid rgba(180,140,60,0.22);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 6px 16px rgba(120,88,30,0.08);
}
body.theme-genshin-dark  #page-shop .shop-grid-modern .shop-item {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(219,177,101,0.12), transparent 50%),
    linear-gradient(155deg, rgba(40,30,55,0.92), rgba(28,22,44,0.96));
  border: 1px solid rgba(219,177,101,0.20);
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
/* Shimmer accent line */
body.theme-genshin-light #page-shop .shop-grid-modern .shop-item::before {
  background: linear-gradient(90deg, rgba(219,177,101,0.30), rgba(255,240,190,0.15) 40%, transparent);
}
body.theme-genshin-dark  #page-shop .shop-grid-modern .shop-item::before {
  background: linear-gradient(90deg, rgba(219,177,101,0.22), rgba(219,177,101,0.06) 40%, transparent);
}

body.theme-genshin-light #page-shop .shop-grid-modern .shop-item-icon {
  background: linear-gradient(180deg, #fff8e0, #f0d896);
  border-color: #c89b4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 6px rgba(160,120,40,0.12);
  border-radius: 12px;
}
body.theme-genshin-dark  #page-shop .shop-grid-modern .shop-item-icon {
  background: linear-gradient(180deg, rgba(219,177,101,0.22), rgba(100,70,25,0.38));
  border-color: rgba(219,177,101,0.5);
  border-radius: 12px;
}

body.theme-genshin-light #page-shop .shop-item-tier,
body.theme-genshin-light #page-shop .shop-item-hint {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 8px;
  background: rgba(255,255,255,0.55);
  border-color: rgba(180,140,60,0.25);
  color: #7a5010;
}
body.theme-genshin-dark  #page-shop .shop-item-tier,
body.theme-genshin-dark  #page-shop .shop-item-hint {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 8px;
  background: rgba(219,177,101,0.10);
  border-color: rgba(219,177,101,0.25);
  color: rgba(219,177,101,0.85);
}

body.theme-genshin-light #page-shop .shop-item-name { font-family: Georgia, serif; font-weight: 700; font-size: 13px; color: #2d3344; }
body.theme-genshin-dark  #page-shop .shop-item-name { font-family: Georgia, serif; font-weight: 700; font-size: 13px; color: #ede2cc; }
body.theme-genshin-light #page-shop .shop-item-cn   { font-family: Georgia, serif; font-style: italic; color: #8a6028; font-size: 11px; }
body.theme-genshin-dark  #page-shop .shop-item-cn   { font-family: Georgia, serif; font-style: italic; color: rgba(219,177,101,0.7); font-size: 11px; }
body.theme-genshin-light #page-shop .shop-item-state,
body.theme-genshin-light #page-shop .shop-item-limit { font-family: Georgia, serif; font-style: italic; font-size: 9px; color: #786b56; }
body.theme-genshin-dark  #page-shop .shop-item-state,
body.theme-genshin-dark  #page-shop .shop-item-limit { font-family: Georgia, serif; font-style: italic; font-size: 9px; color: #a09880; }

/* Item price */
body.theme-genshin-light #page-shop .shop-item-price {
  font-family: Georgia, serif; font-weight: 700; color: #7a5010;
}
body.theme-genshin-dark  #page-shop .shop-item-price {
  font-family: Georgia, serif; font-weight: 700; color: #f0d896;
}

/* ── Buy button (Primogem style) ── */
body.theme-genshin-light #page-shop .shop-item-buy,
body.theme-genshin-dark  #page-shop .shop-item-buy {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.3px;
  border-radius: 999px;
  border-width: 1px;
  padding: 6px 12px;
}
body.theme-genshin-light #page-shop .shop-item-buy {
  background: linear-gradient(180deg, #fff5d8, #e8c878);
  border-color: #c89b4a;
  color: #5a3a10;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 6px rgba(160,120,40,0.18);
}
body.theme-genshin-light #page-shop .shop-item-buy:active {
  background: linear-gradient(180deg, #f0d896, #d4a84a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 3px rgba(160,120,40,0.15);
}
body.theme-genshin-dark  #page-shop .shop-item-buy {
  background: linear-gradient(180deg, rgba(219,177,101,0.32), rgba(150,110,50,0.45));
  border-color: rgba(219,177,101,0.7);
  color: #f5e3b8;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
body.theme-genshin-dark  #page-shop .shop-item-buy:active {
  background: linear-gradient(180deg, rgba(219,177,101,0.45), rgba(180,140,60,0.55));
}
body.theme-genshin-light #page-shop .shop-item-buy.no-money {
  background: rgba(255,255,255,0.5);
  border-color: rgba(180,140,60,0.25);
  color: #8a7258;
}
body.theme-genshin-dark  #page-shop .shop-item-buy.no-money {
  background: rgba(255,255,255,0.05);
  border-color: rgba(219,177,101,0.18);
  color: #7a6e5e;
}

/* ── Soldout / unavailable badges ── */
body.theme-genshin-light #page-shop .shop-item-badge.soldout {
  font-family: Georgia, serif;
  font-style: italic;
  background: rgba(160,80,30,0.12);
  border-color: rgba(160,80,30,0.30);
  color: #a03020;
}
body.theme-genshin-dark  #page-shop .shop-item-badge.soldout {
  font-family: Georgia, serif;
  font-style: italic;
  background: rgba(180,60,40,0.18);
  border-color: rgba(180,60,40,0.40);
  color: #f08878;
}
body.theme-genshin-light #page-shop .shop-item-badge.unavailable {
  font-family: Georgia, serif;
  font-style: italic;
  background: rgba(120,100,70,0.12);
  border-color: rgba(120,100,70,0.28);
  color: #786b56;
}
body.theme-genshin-dark  #page-shop .shop-item-badge.unavailable {
  font-family: Georgia, serif;
  font-style: italic;
  background: rgba(255,255,255,0.05);
  border-color: rgba(219,177,101,0.18);
  color: #7a6e5e;
}

/* ── Limit indicators in Genshin tones ── */
body.theme-genshin-light #page-shop .shop-item-limit.limit-soldout { color: #a03020; }
body.theme-genshin-dark  #page-shop .shop-item-limit.limit-soldout { color: #f08878; }
body.theme-genshin-light #page-shop .shop-item-limit.limit-low     { color: #a06020; }
body.theme-genshin-dark  #page-shop .shop-item-limit.limit-low     { color: #f0b878; }
body.theme-genshin-light #page-shop .shop-item-limit.limit-medium  { color: #7a5010; }
body.theme-genshin-dark  #page-shop .shop-item-limit.limit-medium  { color: rgba(219,177,101,0.85); }

/* ── Dark theme: general surfaces ── */
body.theme-genshin-dark #page-shop .shop-item,
body.theme-genshin-dark #page-shop .shop-section {
  border-color: rgba(219,177,101,0.12) !important;
}
body.theme-genshin-dark #page-shop .shop-item {
  border-bottom-color: rgba(219,177,101,0.10) !important;
}
body.theme-genshin-dark #page-shop .frozen-banner {
  background: rgba(219,80,60,0.12);
  border-color: rgba(219,80,60,0.35);
  color: #f08878;
}
body.theme-genshin-light #page-shop .frozen-banner {
  background: rgba(180,40,30,0.08);
  border-color: rgba(180,40,30,0.28);
  color: #a03020;
  font-family: Georgia, serif;
  font-style: italic;
}

/* ── Inventory tab in Genshin ── */
body.theme-genshin-light #shopInventoryContent .inventory-item,
body.theme-genshin-dark  #shopInventoryContent .inventory-item {
  border-radius: 14px;
  margin-bottom: 6px;
}
body.theme-genshin-light #shopInventoryContent .inventory-item {
  background: linear-gradient(135deg, rgba(255,252,242,0.85), rgba(239,226,200,0.70));
  border-color: rgba(180,140,60,0.22);
}
body.theme-genshin-dark  #shopInventoryContent .inventory-item {
  background: linear-gradient(135deg, rgba(40,30,55,0.85), rgba(30,22,44,0.90));
  border-color: rgba(219,177,101,0.18);
}

/* Ornament line under subtabs */
body.theme-genshin-light #page-shop .shop-subtabs::after,
body.theme-genshin-dark  #page-shop .shop-subtabs::after {
  content: '';
  display: block;
  height: 1px;
  width: 60%;
  margin: -4px auto 0;
  background: linear-gradient(90deg, transparent, rgba(219,177,101,0.4), transparent);
}

  


/* ================================================================
   PAGE ANIMATIONS — glitch / stagger / pulse
   ================================================================ */

/* ── 1. GLITCH на китайских заголовках ───────────────────────── */
@keyframes glitchCn {
  0%, 80%, 100% {
    transform: none;
    text-shadow: none;
    clip-path: none;
    opacity: 1;
  }
  81% {
    transform: translateX(-3px) skewX(-3deg);
    text-shadow: 2px 0 #ff0044, -2px 0 #00eeff;
    opacity: 0.9;
  }
  82% {
    transform: translateX(3px);
    text-shadow: -3px 0 #ff0044, 2px 0 #00eeff;
    clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%);
    opacity: 0.85;
  }
  83% {
    transform: translateX(-1px);
    clip-path: polygon(0 60%, 100% 60%, 100% 85%, 0 85%);
    text-shadow: 1px 0 rgba(255,0,68,0.7);
  }
  84% {
    transform: none;
    text-shadow: none;
    clip-path: none;
    opacity: 1;
  }
  91% {
    transform: translateX(1px);
    text-shadow: -1px 0 rgba(0,238,255,0.5);
  }
  92%, 94% { transform: none; text-shadow: none; }
  93% {
    transform: translateX(-1px) skewX(-1deg);
    text-shadow: 1px 0 rgba(255,0,68,0.35);
  }
}

.page-title-cn {
  animation: glitchCn 10s ease-in-out infinite;
  display: inline-block;
}

/* Делители: более тихий глитч, разные фазы у разных элементов */
@keyframes glitchDividerText {
  0%, 88%, 100% { text-shadow: none; letter-spacing: inherit; }
  89% { text-shadow: 1px 0 rgba(255,0,68,0.5), -1px 0 rgba(0,238,255,0.5); letter-spacing: 1.5px; }
  90% { text-shadow: -1px 0 rgba(255,0,68,0.4); letter-spacing: inherit; }
  91% { text-shadow: none; }
}

.cn-divider {
  animation: glitchDividerText 13s ease-in-out infinite;
}
/* Сдвигаем фазы у вложенных делителей чтобы не глитчили синхронно */
.card .cn-divider:nth-of-type(2) { animation-delay: -4.3s; }
.card .cn-divider:nth-of-type(3) { animation-delay: -8.7s; }

/* Для admin-темы глитч в синей гамме */
body.theme-admin .page-title-cn {
  animation-name: glitchCnBlue;
}
@keyframes glitchCnBlue {
  0%, 80%, 100% { transform: none; text-shadow: none; clip-path: none; opacity: 1; }
  81% { transform: translateX(-3px) skewX(-3deg); text-shadow: 2px 0 #ff4488, -2px 0 #6478ff; opacity: 0.9; }
  82% { transform: translateX(3px); text-shadow: -3px 0 #ff4488, 2px 0 #00d4ff; clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%); }
  83% { transform: none; text-shadow: none; clip-path: none; opacity: 1; }
  91% { transform: translateX(1px); text-shadow: -1px 0 rgba(0,212,255,0.5); }
  92% { transform: none; text-shadow: none; }
}

/* ── 2. STAGGER ВХОД КАРТОЧЕК ────────────────────────────────── */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* .card внутри активной страницы */
.page.active .card {
  animation: cardEnter 0.38s ease backwards;
}
.page.active .card:nth-child(2)      { animation-delay: 0.06s; }
.page.active .card:nth-child(3)      { animation-delay: 0.12s; }
.page.active .card:nth-child(4)      { animation-delay: 0.18s; }
.page.active .card:nth-child(5)      { animation-delay: 0.24s; }
.page.active .card:nth-child(6)      { animation-delay: 0.29s; }
.page.active .card:nth-child(7)      { animation-delay: 0.33s; }
.page.active .card:nth-child(n+8)    { animation-delay: 0.37s; }

/* Карточки в подконтейнерах (rating, diary, etc.) */
.page.active > * > .card:nth-child(1)    { animation-delay: 0.00s; }
.page.active > * > .card:nth-child(2)    { animation-delay: 0.07s; }
.page.active > * > .card:nth-child(3)    { animation-delay: 0.14s; }
.page.active > * > .card:nth-child(4)    { animation-delay: 0.21s; }
.page.active > * > .card:nth-child(n+5)  { animation-delay: 0.28s; }

/* More-меню: иконки выпрыгивают */
@keyframes moreItemEnter {
  from { opacity: 0; transform: scale(0.88) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.page.active .more-grid .more-item {
  animation: moreItemEnter 0.30s cubic-bezier(0.34,1.56,0.64,1) backwards;
}
.page.active .more-grid .more-item:nth-child(1)   { animation-delay: 0.00s; }
.page.active .more-grid .more-item:nth-child(2)   { animation-delay: 0.05s; }
.page.active .more-grid .more-item:nth-child(3)   { animation-delay: 0.10s; }
.page.active .more-grid .more-item:nth-child(4)   { animation-delay: 0.15s; }
.page.active .more-grid .more-item:nth-child(5)   { animation-delay: 0.20s; }
.page.active .more-grid .more-item:nth-child(6)   { animation-delay: 0.24s; }
.page.active .more-grid .more-item:nth-child(7)   { animation-delay: 0.28s; }
.page.active .more-grid .more-item:nth-child(8)   { animation-delay: 0.32s; }
.page.active .more-grid .more-item:nth-child(9)   { animation-delay: 0.35s; }
.page.active .more-grid .more-item:nth-child(n+10){ animation-delay: 0.37s; }

/* Shop items стagger */
.shop-grid-modern .shop-item {
  animation: cardEnter 0.36s ease backwards;
}
.shop-grid-modern .shop-item:nth-child(1)   { animation-delay: 0.00s; }
.shop-grid-modern .shop-item:nth-child(2)   { animation-delay: 0.07s; }
.shop-grid-modern .shop-item:nth-child(3)   { animation-delay: 0.14s; }
.shop-grid-modern .shop-item:nth-child(4)   { animation-delay: 0.21s; }
.shop-grid-modern .shop-item:nth-child(5)   { animation-delay: 0.27s; }
.shop-grid-modern .shop-item:nth-child(6)   { animation-delay: 0.32s; }
.shop-grid-modern .shop-item:nth-child(n+7) { animation-delay: 0.36s; }

/* Inventory items */
@keyframes invItemEnter {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.page.active .inventory-item {
  animation: invItemEnter 0.30s ease backwards;
}
.page.active .inventory-item:nth-child(1)   { animation-delay: 0.00s; }
.page.active .inventory-item:nth-child(2)   { animation-delay: 0.05s; }
.page.active .inventory-item:nth-child(3)   { animation-delay: 0.10s; }
.page.active .inventory-item:nth-child(4)   { animation-delay: 0.15s; }
.page.active .inventory-item:nth-child(5)   { animation-delay: 0.20s; }
.page.active .inventory-item:nth-child(n+6) { animation-delay: 0.24s; }

/* ── 3. PULSE GLOW профильной карточки ──────────────────────── */

/* Базовый пульс — золотой (NetWatch default) */
@keyframes profilePulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 10px rgba(212,175,55,0.06); }
  50%       { box-shadow: 0 4px 28px rgba(0,0,0,0.30), 0 0 28px rgba(212,175,55,0.18), 0 0 56px rgba(212,175,55,0.07); }
}
.profile-card-home {
  animation: profilePulse 4.5s ease-in-out infinite;
}

/* Admin-роль: красный пульс */
@keyframes profilePulseRed {
  0%, 100% { box-shadow: 0 0 14px rgba(200,30,30,0.10), inset 0 0 18px rgba(200,30,30,0.04); }
  50%       { box-shadow: 0 0 36px rgba(200,30,30,0.28), 0 0 70px rgba(200,30,30,0.10), inset 0 0 26px rgba(200,30,30,0.10); }
}
body.is-admin .profile-card-home {
  animation: profilePulseRed 4s ease-in-out infinite;
}

/* Admin theme: синий пульс */
@keyframes profilePulseBlue {
  0%, 100% { box-shadow: 0 0 14px rgba(100,120,255,0.10), inset 0 0 18px rgba(100,120,255,0.05); }
  50%       { box-shadow: 0 0 36px rgba(100,120,255,0.32), 0 0 70px rgba(100,120,255,0.12), inset 0 0 26px rgba(100,120,255,0.10); }
}
body.is-admin.theme-admin .profile-card-home {
  animation: profilePulseBlue 4s ease-in-out infinite;
}

/* Genshin: мягкий золотой пульс */
@keyframes profilePulseGold {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.20), 0 0 10px rgba(219,177,101,0.06); }
  50%       { box-shadow: 0 4px 30px rgba(0,0,0,0.28), 0 0 30px rgba(219,177,101,0.22), 0 0 60px rgba(219,177,101,0.08); }
}
body.theme-genshin-light .profile-card-home,
body.theme-genshin-dark  .profile-card-home {
  animation: profilePulseGold 5.5s ease-in-out infinite;
}


/* ================================================================
   BLACKWALL — ARCHITECT MODE ANIMATIONS & ATMOSPHERE
   ================================================================ */

/* ── Corner vignette: красный+фиолетовый по краям экрана ────── */
body.is-architect::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%,    rgba(232,0,0,0.09)   0%, transparent 38%),
    radial-gradient(ellipse at 100% 0%,  rgba(157,0,221,0.06) 0%, transparent 32%),
    radial-gradient(ellipse at 0% 100%,  rgba(232,0,0,0.07)   0%, transparent 32%),
    radial-gradient(ellipse at 100% 100%,rgba(157,0,221,0.05) 0%, transparent 30%);
  pointer-events: none;
  z-index: 0;
  animation: blackwallEdgePulse 4s ease-in-out infinite;
}

.raid-result-panel {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    text-align: left;
    animation: fadeIn 0.22s ease-out;
}

.raid-result-panel.success {
    border-color: rgba(46,204,113,0.36);
    background: rgba(46,204,113,0.10);
}

.raid-result-panel.danger {
    border-color: rgba(255,75,85,0.38);
    background: rgba(180,20,20,0.14);
}

.raid-result-title {
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}

.raid-result-text {
    margin-top: 4px;
    color: var(--text2);
    font-size: 10px;
    line-height: 1.5;
}

.raid-question-block {
    margin: 0 0 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,255,136,0.20);
    background: rgba(0,20,10,0.75);
    animation: fadeIn 0.22s ease-out;
}
.raid-q-kicker {
    font-family: monospace;
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(0,255,136,0.6);
    margin-bottom: 8px;
}
.raid-q-prompt {
    font-family: monospace;
    font-size: 11px;
    color: #d0ffe8;
    line-height: 1.65;
    margin-bottom: 10px;
}
.raid-q-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}
.raid-q-option {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(0,255,136,0.04);
    border: 1px solid rgba(0,255,136,0.14);
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    font-family: monospace;
    font-size: 11px;
    color: var(--text);
    text-align: left;
    width: 100%;
    transition: border-color 0.15s, background 0.15s;
}
.raid-q-option.selected {
    border-color: rgba(0,255,136,0.65);
    background: rgba(0,255,136,0.10);
    color: #d0ffe8;
}
.raid-q-opt-key {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,255,136,0.12);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    color: rgba(0,255,136,0.9);
    flex-shrink: 0;
}
.raid-q-option.selected .raid-q-opt-key {
    background: rgba(0,255,136,0.85);
    color: #001a0a;
}
.raid-q-submit {
    width: 100%;
    padding: 9px;
    background: rgba(0,255,136,0.08);
    border: 1px solid rgba(0,255,136,0.30);
    border-radius: 6px;
    color: rgba(0,255,136,0.85);
    font-family: monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: background 0.15s;
}
.raid-q-submit:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}
.raid-q-submit:not(:disabled):active {
    background: rgba(0,255,136,0.20);
}

/* Genshin theme question block */
body.theme-genshin .raid-question-block {
    background: rgba(240,235,220,0.80);
    border-color: rgba(120,90,50,0.25);
}
body.theme-genshin .raid-q-kicker { color: rgba(120,80,30,0.7); }
body.theme-genshin .raid-q-prompt { color: #3a2a10; }
body.theme-genshin .raid-q-option {
    background: rgba(180,140,80,0.08);
    border-color: rgba(120,90,50,0.20);
    color: #3a2a10;
}
body.theme-genshin .raid-q-option.selected {
    border-color: rgba(120,80,30,0.60);
    background: rgba(180,140,80,0.18);
    color: #2a1a00;
}
body.theme-genshin .raid-q-opt-key {
    background: rgba(180,140,80,0.18);
    color: rgba(120,80,30,0.9);
}
body.theme-genshin .raid-q-option.selected .raid-q-opt-key {
    background: rgba(160,110,40,0.80);
    color: #fff8ea;
}
body.theme-genshin .raid-q-submit {
    background: rgba(180,140,80,0.12);
    border-color: rgba(120,80,30,0.35);
    color: rgba(100,60,10,0.9);
}

.raid-roster-box {
    margin: 0 0 12px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.16);
}

.raid-roster-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--text3);
    font-family: monospace;
    font-size: 8px;
    letter-spacing: 1px;
}

.raid-roster {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 30px;
}

.raid-roster-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 8px 5px 5px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: var(--text2);
    font-size: 9px;
    font-weight: 800;
}

.raid-roster-chip.me {
    border-color: rgba(46,204,113,0.34);
    background: rgba(46,204,113,0.10);
    color: #d6ffe9;
}

.raid-roster-chip b {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,175,55,0.14);
    color: var(--gold);
    font-size: 8px;
}

.raid-roster-empty {
    align-self: center;
    color: var(--text3);
    font-size: 10px;
}

body.theme-genshin .raid-brief-card,
body.theme-genshin .raid-roster-box,
body.theme-genshin .raid-result-panel {
    border-color: rgba(75,83,102,0.14);
    background: rgba(255,255,255,0.48);
}

body.theme-genshin .raid-roster-chip {
    background: rgba(75,83,102,0.07);
    border-color: rgba(75,83,102,0.12);
    color: #4b5366;
}

/* Genshin raid polish: parchment trial instead of NetWatch breach */
body.theme-genshin .raid-overlay {
    background:
      radial-gradient(circle at 50% 0%, rgba(219,177,101,0.24), transparent 34%),
      radial-gradient(circle at 100% 100%, rgba(80,116,154,0.18), transparent 42%),
      rgba(35, 30, 24, 0.72);
    backdrop-filter: blur(8px) saturate(1.08);
}

body.theme-genshin .raid-content {
    border-color: rgba(180,132,62,0.46);
    background:
      radial-gradient(circle at 18% 0%, rgba(255,244,209,0.92), transparent 34%),
      radial-gradient(circle at 100% 16%, rgba(184,214,226,0.34), transparent 38%),
      linear-gradient(145deg, rgba(252,246,230,0.97), rgba(231,219,195,0.96));
    box-shadow:
      0 28px 70px rgba(77, 61, 38, 0.32),
      inset 0 0 0 1px rgba(255,255,255,0.52);
    color: #3d4555;
}

body.theme-genshin .raid-content::before {
    background:
      linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 18%, transparent 36%),
      repeating-linear-gradient(90deg, rgba(128,94,42,0.035) 0 1px, transparent 1px 10px);
    opacity: 0.82;
}

body.theme-genshin .raid-content::after {
    border-color: rgba(180,132,62,0.16);
}

body.theme-genshin .btn-close-raid {
    color: rgba(61,69,85,0.62);
}

body.theme-genshin .btn-close-raid:hover {
    color: #9b6f2c;
}

body.theme-genshin .boss-frame::before {
    border-color: rgba(180,132,62,0.28);
    background:
      radial-gradient(circle at center, rgba(255,255,255,0.48), transparent 66%),
      linear-gradient(180deg, rgba(219,177,101,0.14), rgba(75,83,102,0.05));
    box-shadow: 0 16px 38px rgba(120,86,42,0.13);
}

body.theme-genshin .boss-frame::after {
    background: radial-gradient(circle, rgba(219,177,101,0.24), transparent 70%);
}

body.theme-genshin .boss-img {
    border-color: rgba(180,132,62,0.48);
    background:
      radial-gradient(circle at 50% 16%, rgba(255,255,255,0.72), transparent 52%),
      linear-gradient(180deg, rgba(255,255,255,0.52), rgba(219,177,101,0.08));
    box-shadow:
      0 16px 40px rgba(120,86,42,0.18),
      inset 0 0 0 1px rgba(255,255,255,0.52);
}

body.theme-genshin .boss-name {
    color: #313947;
    text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}

body.theme-genshin .boss-title {
    color: #9b6f2c;
    opacity: 0.95;
}

body.theme-genshin .raid-kicker {
    border-color: rgba(180,132,62,0.26);
    background: rgba(255,255,255,0.46);
    color: #8a6128;
}

body.theme-genshin .raid-kicker-dot {
    background: #dbb165;
    box-shadow: 0 0 14px rgba(219,177,101,0.85);
}

body.theme-genshin .raid-chip {
    border-color: rgba(180,132,62,0.18);
    background: rgba(255,255,255,0.42);
    color: #586276;
}

body.theme-genshin .raid-status-block {
    border-color: rgba(180,132,62,0.18);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.24)),
      rgba(219,177,101,0.08);
}

body.theme-genshin .raid-status-block::before {
    background: linear-gradient(90deg, transparent, rgba(219,177,101,0.18), transparent);
}

body.theme-genshin .raid-meter-eyebrow,
body.theme-genshin .raid-progress-hint,
body.theme-genshin .raid-progress-percent,
body.theme-genshin .raid-roster-head,
body.theme-genshin .raid-brief-card span {
    color: rgba(61,69,85,0.64);
}

body.theme-genshin .raid-meter-state {
    border-color: rgba(180,132,62,0.22);
    background: rgba(219,177,101,0.14);
    color: #8a6128;
}

body.theme-genshin .raid-progress-container {
    background:
      linear-gradient(90deg, rgba(61,69,85,0.04) 0 8%, transparent 8% 10%, rgba(61,69,85,0.04) 10% 18%, transparent 18% 20%, rgba(61,69,85,0.04) 20% 28%, transparent 28% 30%, rgba(61,69,85,0.04) 30% 38%, transparent 38% 40%, rgba(61,69,85,0.04) 40% 48%, transparent 48% 50%, rgba(61,69,85,0.04) 50% 58%, transparent 58% 60%, rgba(61,69,85,0.04) 60% 68%, transparent 68% 70%, rgba(61,69,85,0.04) 70% 78%, transparent 78% 80%, rgba(61,69,85,0.04) 80% 88%, transparent 88% 90%, rgba(61,69,85,0.04) 90% 100%),
      rgba(255,255,255,0.46);
    border-color: rgba(180,132,62,0.18);
}

body.theme-genshin .raid-progress-bar {
    background: linear-gradient(90deg, #7aa7b8, #dbb165 64%, #f0d89a);
    box-shadow: 0 0 16px rgba(219,177,101,0.42);
}

body.theme-genshin .raid-result-panel.success {
    border-color: rgba(86,150,106,0.28);
    background: rgba(86,150,106,0.10);
}

body.theme-genshin .raid-result-panel.danger {
    border-color: rgba(180,92,72,0.28);
    background: rgba(180,92,72,0.10);
}

body.theme-genshin .raid-result-title,
body.theme-genshin .raid-count-label,
body.theme-genshin .raid-result-text {
    color: #3d4555;
}

/* ===== GENSHIN DARK: night-palette overrides for raid overlay =====
   body.theme-genshin's raid-content uses a cream/parchment "Liyue day"
   palette that clashes with the dark theme's background. Re-skin to the
   genshin-dark "Liyue night" palette (#1a1628 + gold), same structure. */
body.theme-genshin-dark .raid-overlay {
    background:
      radial-gradient(circle at 50% 0%, rgba(219,177,101,0.16), transparent 34%),
      radial-gradient(circle at 100% 100%, rgba(80,90,154,0.18), transparent 42%),
      rgba(10, 8, 16, 0.82);
}

body.theme-genshin-dark .raid-content {
    border-color: rgba(219,177,101,0.28);
    background:
      radial-gradient(circle at 18% 0%, rgba(60,52,80,0.6), transparent 34%),
      radial-gradient(circle at 100% 16%, rgba(80,90,154,0.22), transparent 38%),
      linear-gradient(145deg, rgba(34,28,46,0.97), rgba(20,16,30,0.98));
    box-shadow:
      0 28px 70px rgba(0,0,0,0.5),
      inset 0 0 0 1px rgba(255,255,255,0.05);
    color: #e8e0d0;
}

body.theme-genshin-dark .raid-content::before {
    background:
      linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 18%, transparent 36%),
      repeating-linear-gradient(90deg, rgba(219,177,101,0.03) 0 1px, transparent 1px 10px);
    opacity: 0.82;
}

body.theme-genshin-dark .raid-content::after {
    border-color: rgba(219,177,101,0.12);
}

body.theme-genshin-dark .btn-close-raid {
    color: rgba(232,224,208,0.5);
}

body.theme-genshin-dark .btn-close-raid:hover {
    color: #dbb165;
}

body.theme-genshin-dark .boss-frame::before {
    border-color: rgba(219,177,101,0.22);
    background:
      radial-gradient(circle at center, rgba(219,177,101,0.08), transparent 66%),
      linear-gradient(180deg, rgba(219,177,101,0.08), rgba(80,90,154,0.06));
    box-shadow: 0 16px 38px rgba(0,0,0,0.35);
}

body.theme-genshin-dark .boss-frame::after {
    background: radial-gradient(circle, rgba(219,177,101,0.18), transparent 70%);
}

body.theme-genshin-dark .boss-img {
    border-color: rgba(219,177,101,0.32);
    background:
      radial-gradient(circle at 50% 16%, rgba(255,255,255,0.08), transparent 52%),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(219,177,101,0.05));
    box-shadow:
      0 16px 40px rgba(0,0,0,0.4),
      inset 0 0 0 1px rgba(255,255,255,0.05);
}

body.theme-genshin-dark .boss-name {
    color: #e8e0d0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

body.theme-genshin-dark .boss-title {
    color: #dbb165;
    opacity: 0.95;
}

body.theme-genshin-dark .raid-kicker {
    border-color: rgba(219,177,101,0.26);
    background: rgba(219,177,101,0.08);
    color: #dbb165;
}

body.theme-genshin-dark .raid-kicker-dot {
    background: #dbb165;
    box-shadow: 0 0 14px rgba(219,177,101,0.85);
}

body.theme-genshin-dark .raid-chip {
    border-color: rgba(219,177,101,0.16);
    background: rgba(255,255,255,0.04);
    color: #a09880;
}

body.theme-genshin-dark .raid-status-block {
    border-color: rgba(219,177,101,0.16);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
      rgba(219,177,101,0.05);
}

body.theme-genshin-dark .raid-status-block::before {
    background: linear-gradient(90deg, transparent, rgba(219,177,101,0.16), transparent);
}

body.theme-genshin-dark .raid-meter-eyebrow,
body.theme-genshin-dark .raid-progress-hint,
body.theme-genshin-dark .raid-progress-percent,
body.theme-genshin-dark .raid-roster-head,
body.theme-genshin-dark .raid-brief-card span {
    color: rgba(232,224,208,0.6);
}

body.theme-genshin-dark .raid-meter-state {
    border-color: rgba(219,177,101,0.22);
    background: rgba(219,177,101,0.1);
    color: #dbb165;
}

body.theme-genshin-dark .raid-progress-container {
    background:
      linear-gradient(90deg, rgba(255,255,255,0.03) 0 8%, transparent 8% 10%, rgba(255,255,255,0.03) 10% 18%, transparent 18% 20%, rgba(255,255,255,0.03) 20% 28%, transparent 28% 30%, rgba(255,255,255,0.03) 30% 38%, transparent 38% 40%, rgba(255,255,255,0.03) 40% 48%, transparent 48% 50%, rgba(255,255,255,0.03) 50% 58%, transparent 58% 60%, rgba(255,255,255,0.03) 60% 68%, transparent 68% 70%, rgba(255,255,255,0.03) 70% 78%, transparent 78% 80%, rgba(255,255,255,0.03) 80% 88%, transparent 88% 90%, rgba(255,255,255,0.03) 90% 100%),
      rgba(255,255,255,0.02);
    border-color: rgba(219,177,101,0.16);
}

body.theme-genshin-dark .raid-progress-bar {
    background: linear-gradient(90deg, #5a6aa0, #dbb165 64%, #f0d89a);
    box-shadow: 0 0 16px rgba(219,177,101,0.35);
}

body.theme-genshin-dark .raid-result-panel.success {
    border-color: rgba(86,150,106,0.32);
    background: rgba(86,150,106,0.12);
}

body.theme-genshin-dark .raid-result-panel.danger {
    border-color: rgba(200,100,80,0.32);
    background: rgba(200,100,80,0.12);
}

body.theme-genshin-dark .raid-result-title,
body.theme-genshin-dark .raid-count-label,
body.theme-genshin-dark .raid-result-text {
    color: #e8e0d0;
}

/* ===== NETWATCH LIGHT: render the raid popup on the light "paper"
   palette like the rest of the light theme, instead of forcing the dark
   "night raid" look. */
body.theme-nw-light .raid-content {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.5), transparent 35%),
      linear-gradient(145deg, rgba(204,34,0,0.05), #f4f1ed 55%);
    border-color: rgba(204,34,0,0.35);
    box-shadow: 0 0 35px rgba(204,34,0,0.1), inset 0 0 0 1px rgba(0,0,0,0.03);
}

body.theme-nw-light .boss-title { color: #993333; }

body.theme-nw-light .raid-progress-container {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
}

body.theme-nw-light .raid-kicker,
body.theme-nw-light .raid-meter-state {
    border-color: rgba(122,80,16,0.25);
    background: rgba(122,80,16,0.08);
}

body.theme-nw-light .raid-brief-card,
body.theme-nw-light .raid-roster-box,
body.theme-nw-light .raid-result-panel {
    border-color: rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.5);
}

body.theme-nw-light .raid-roster-chip {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
    color: #1a1a1a;
}

body.theme-nw-light .raid-chip {
    border-color: rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.04);
}

/* ===== RAID VISUAL ENHANCEMENTS ===== */

/* Result panel: center layout + icon */
.raid-result-panel { text-align: center; }

.raid-result-icon {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 5px;
    display: block;
}
.raid-result-panel.success .raid-result-icon,
.raid-result-panel.success .raid-result-title { color: #2ecc71; }
.raid-result-panel.danger  .raid-result-icon,
.raid-result-panel.danger  .raid-result-title { color: #ff4d5a; }

/* Success: double glow pulse */
.raid-result-panel.success {
    animation: fadeIn 0.22s ease-out, raidSuccessGlow 1.6s ease-in-out 2 0.3s;
}
@keyframes raidSuccessGlow {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 20px rgba(46,204,113,0.30); }
}

/* Danger: red flash on appear */
.raid-result-panel.danger {
    animation: fadeIn 0.22s ease-out, raidDangerFlash 0.35s ease-out 0.1s both;
}
@keyframes raidDangerFlash {
    0%   { background: rgba(200,30,30,0.45); border-color: rgba(220,60,60,0.8); }
    100% { background: rgba(180,20,20,0.14); border-color: rgba(255,75,85,0.38); }
}

/* Content shake on defeat */
@keyframes raidFailShake {
    0%,100% { transform: translateX(0)   rotate(0); }
    15%      { transform: translateX(-8px) rotate(-0.7deg); }
    30%      { transform: translateX(7px)  rotate(0.6deg); }
    50%      { transform: translateX(-5px) rotate(-0.3deg); }
    70%      { transform: translateX(4px); }
    85%      { transform: translateX(-2px); }
}
.raid-content.raid-shake {
    animation: raidFailShake 0.52s ease-out !important;
    transition: none !important;
}

/* Boss scan line overlay (NetWatch only) */
.boss-scan-overlay {
    position: absolute;
    width: 228px;
    height: 252px;
    border-radius: 28px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.6s 0.5s;
}
.raid-overlay.active .boss-scan-overlay { opacity: 1; }
.boss-scan-overlay::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 40px;
    background: linear-gradient(180deg, transparent, rgba(255,30,55,0.11), transparent);
    top: -40px;
    animation: bossScanDown 3.2s linear infinite 1.2s;
}
@keyframes bossScanDown {
    from { transform: translateY(0); }
    to   { transform: translateY(320px); }
}
body.theme-genshin .boss-scan-overlay { display: none; }

/* Boss glitch (NetWatch) */
@keyframes bossNetGlitch {
    0%, 86%, 100% { filter: none; transform: translateY(0) scale(1); }
    87% { filter: brightness(1.6) hue-rotate(320deg) saturate(2.5); transform: translateX(-5px) scale(1.01); }
    88% { filter: brightness(0.8) hue-rotate(180deg); transform: translateX(4px); }
    89% { filter: none; transform: translateY(0) scale(1); }
    90% { filter: brightness(1.3); transform: translateX(-2px); }
    91% { filter: none; transform: translateX(0); }
}
.raid-overlay.active .boss-img {
    animation: bossFloat 4s ease-in-out infinite 0.9s,
               bossNetGlitch 8s linear infinite 3s;
}
body.theme-genshin .raid-overlay.active .boss-img {
    animation: bossFloat 4s ease-in-out infinite 0.9s;
}

/* Genshin aura pulse on boss */
body.theme-genshin .boss-frame::after {
    animation: genshinBossAura 3.2s ease-in-out infinite;
}
@keyframes genshinBossAura {
    0%, 100% { opacity: 0.4; transform: scale(1);    filter: blur(6px); }
    50%       { opacity: 0.9; transform: scale(1.18); filter: blur(14px); }
}

/* Genshin success shimmer */
body.theme-genshin .raid-result-panel.success {
    background: linear-gradient(135deg,
        rgba(219,177,101,0.22) 0%,
        rgba(240,235,220,0.09) 50%,
        rgba(219,177,101,0.22) 100%
    );
    background-size: 200% auto;
    border-color: rgba(219,177,101,0.50);
    animation: fadeIn 0.22s ease-out, genshinSuccessShimmer 2.2s linear infinite 0.3s;
}
@keyframes genshinSuccessShimmer {
    from { background-position: 200% center; }
    to   { background-position: -200% center; }
}
body.theme-genshin .raid-result-panel.success .raid-result-icon,
body.theme-genshin .raid-result-panel.success .raid-result-title { color: #6b9c54; }

body.theme-genshin .raid-result-panel.danger {
    background: rgba(150,70,50,0.14);
    border-color: rgba(180,80,60,0.40);
}
body.theme-genshin .raid-result-panel.danger .raid-result-icon,
body.theme-genshin .raid-result-panel.danger .raid-result-title { color: #b84a38; }

/* Roster chip entry animation */
.raid-roster-chip {
    animation: chipAppear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes chipAppear {
    from { opacity: 0; transform: scale(0.5) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

body.theme-genshin #raid-status-text {
    color: rgba(61,69,85,0.78) !important;
}

body.theme-genshin #raid-action-btn {
    border: 1px solid rgba(180,132,62,0.22);
    background: linear-gradient(135deg, #d9b15f, #f1dca4);
    color: #3d4555;
    box-shadow: 0 14px 28px rgba(120,86,42,0.18);
}
@keyframes blackwallEdgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ── Scan overlay на профильной карточке ───────────────────── */
.blackwall-overlay {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
body.is-architect .blackwall-overlay { display: block; }

/* Горизонтальная линия скана */
body.is-architect .blackwall-overlay::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -5%;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(232,34,0,0.7) 20%,
    rgba(255,204,0,0.95) 50%,
    rgba(232,34,0,0.7) 80%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(232,34,0,0.6), 0 0 20px rgba(232,34,0,0.2);
  animation: blackwallHScan 5.5s ease-in-out infinite;
}
@keyframes blackwallHScan {
  0%   { left: -5%;  opacity: 0; }
  4%   { opacity: 1; }
  95%  { opacity: 0.7; }
  100% { left: 106%; opacity: 0; }
}

/* Анимированная сетка нейронных узлов */
body.is-architect .blackwall-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232,34,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,34,0,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  animation: blackwallGridDrift 18s linear infinite;
}
@keyframes blackwallGridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 22px 22px, 22px 22px; }
}

/* ── Heartbeat pulse — двойной удар (кардиомонитор) ─────────── */
@keyframes blackwallHeartbeat {
  0%,  100% { box-shadow: 0 0 12px rgba(232,34,0,0.12), inset 0 0 16px rgba(232,34,0,0.05); }
  6%         { box-shadow: 0 0 55px rgba(232,34,0,0.45), 0 0 110px rgba(232,34,0,0.18), 0 0 0 2px rgba(255,204,0,0.5), inset 0 0 36px rgba(232,34,0,0.16); }
  12%        { box-shadow: 0 0 16px rgba(232,34,0,0.15), inset 0 0 18px rgba(232,34,0,0.06); }
  18%        { box-shadow: 0 0 38px rgba(232,34,0,0.30), 0 0 80px rgba(232,34,0,0.12), 0 0 0 1px rgba(255,204,0,0.35), inset 0 0 26px rgba(232,34,0,0.11); }
  24%        { box-shadow: 0 0 12px rgba(232,34,0,0.12), inset 0 0 16px rgba(232,34,0,0.05); }
  36%        { box-shadow: 0 0 14px rgba(157,78,221,0.10), inset 0 0 18px rgba(232,34,0,0.04); }
}

body.is-architect .profile-card-home {
  animation: blackwallHeartbeat 3.5s ease-in-out infinite !important;
}

/* ── Warning beacon на активных nav-кнопках ────────────────── */
@keyframes blackwallNavBeacon {
  0%, 100% { text-shadow: 0 0 4px rgba(232,34,0,0.3); }
  5%        { text-shadow: 0 0 14px rgba(232,34,0,1), 0 0 28px rgba(255,204,0,0.5); }
  10%       { text-shadow: 0 0 4px rgba(232,34,0,0.3); }
  16%       { text-shadow: 0 0 10px rgba(232,34,0,0.8), 0 0 22px rgba(232,34,0,0.3); }
  22%       { text-shadow: 0 0 4px rgba(232,34,0,0.3); }
}
body.is-architect .nav-item.active,
body.is-architect .nav-item.active .ti {
  animation: blackwallNavBeacon 3s ease-in-out infinite;
}

/* ── Corruption на кикере (ARCHITECT // PROTOCOL мигает) ─────── */
@keyframes blackwallKickerCorrupt {
  0%, 86%, 100% { opacity: 1; filter: none; transform: none; }
  87%  { opacity: 0.15; filter: brightness(6) saturate(0); transform: translateX(3px); }
  88%  { opacity: 1;    filter: none;                       transform: none; }
  90%  { opacity: 0.4;  filter: hue-rotate(120deg) brightness(3); transform: translateX(-1px); }
  91%  { opacity: 1;    filter: none; transform: none; }
  95%  { opacity: 0.7;  filter: brightness(1.4); }
  96%  { opacity: 1;    filter: none; }
}
body.is-architect .profile-card-kicker {
  animation: blackwallKickerCorrupt 9s ease-in-out infinite;
}

/* ── LED индикатор на бейдже ───────────────────────────────── */
@keyframes architectLED {
  0%, 100% { opacity: 0.35; text-shadow: none; }
  50%       { opacity: 1;    text-shadow: 0 0 8px #ff1500, 0 0 16px rgba(232,0,0,0.4); }
}
body.is-architect .profile-admin-badge::before {
  content: '◆ ';
  color: #ff1500;
  animation: architectLED 1.4s ease-in-out infinite;
}

/* ── Глитч страничного заголовка ───────────────────────────── */
@keyframes blackwallTitleGlitch {
  0%, 88%, 100% {
    text-shadow: 0 0 30px rgba(232,34,0,0.7), 0 0 70px rgba(232,34,0,0.25);
    filter: none;
    transform: none;
  }
  89% {
    text-shadow: 5px 0 rgba(232,34,0,0.95), -5px 0 rgba(255,204,0,0.95), 0 0 50px rgba(232,34,0,0.9);
    filter: brightness(1.3);
    transform: skewX(-2deg);
  }
  90% {
    text-shadow: -3px 0 rgba(255,0,0,0.9), 4px 0 rgba(255,204,0,0.7);
    filter: none;
    transform: none;
  }
  91% {
    text-shadow: 0 0 30px rgba(232,34,0,0.7), 0 0 70px rgba(232,34,0,0.25);
    filter: none;
  }
  95% {
    text-shadow: 2px 0 rgba(157,78,221,0.5), 0 0 40px rgba(232,34,0,0.8);
    transform: translateX(1px);
  }
  96% {
    text-shadow: 0 0 30px rgba(232,34,0,0.7), 0 0 70px rgba(232,34,0,0.25);
    transform: none;
  }
}
body.is-architect .page-title {
  animation: blackwallTitleGlitch 11s ease-in-out infinite;
}

/* ── Data-stream на строке статуса профиля ─────────────────── */
@keyframes blackwallStatusFlicker {
  0%, 92%, 100% { opacity: 1; }
  93%  { opacity: 0.2; filter: brightness(3) saturate(0); }
  94%  { opacity: 1;   filter: none; }
  96%  { opacity: 0.5; filter: brightness(2) hue-rotate(90deg); }
  97%  { opacity: 1;   filter: none; }
}
body.is-architect .profile-status-line {
  animation: blackwallStatusFlicker 12s ease-in-out infinite;
  color: rgba(232,34,0,0.55);
  font-family: monospace;
  letter-spacing: 0.5px;
}

/* ── Flowing data border на cn-divider ──────────────────────── */
@keyframes blackwallDividerFlow {
  0%   { background-position: -200% center, 200% center; }
  100% { background-position: 200% center, -200% center; }
}
body.is-architect .cn-divider {
  animation: none;
  background-size: 200% 1px, 200% 1px;
  background-repeat: no-repeat;
  background-position: -200% center, 200% center;
  animation: blackwallDividerFlow 4s linear infinite;
}

/* ── Card-label мигает как системный предупреждающий код ────── */
@keyframes blackwallLabelPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; letter-spacing: 2.5px; }
}
body.is-architect .card-label {
  animation: blackwallLabelPulse 2.8s ease-in-out infinite;
}

/* ── Architect theme card: улучшенная версия с живой полосой ── */
body.is-architect .architect-theme-card {
  border-color: rgba(232,34,0,0.7);
  box-shadow: 0 0 20px rgba(232,34,0,0.2), inset 0 0 30px rgba(232,34,0,0.04);
  animation: blackwallCardPulse 3s ease-in-out infinite;
}
@keyframes blackwallCardPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(232,34,0,0.15), inset 0 0 20px rgba(232,34,0,0.03); border-color: rgba(232,34,0,0.55); }
  50%       { box-shadow: 0 0 40px rgba(232,34,0,0.35), 0 0 80px rgba(157,78,221,0.08), inset 0 0 30px rgba(232,34,0,0.07); border-color: rgba(255,100,0,0.75); }
}

/* ── Scan-линия на аватаре (радар по окружности) ────────────── */
@keyframes blackwallAvatarRing {
  0%, 100% { box-shadow: 0 0 0 0px rgba(232,34,0,0.5), 0 0 0 0px rgba(255,204,0,0); }
  40%       { box-shadow: 0 0 0 6px rgba(232,34,0,0.2), 0 0 0 12px rgba(255,204,0,0.08); }
  60%       { box-shadow: 0 0 0 8px rgba(232,34,0,0.0), 0 0 0 16px rgba(232,34,0,0.0); }
}
body.is-architect .profile-avatar-wrap {
  animation: blackwallAvatarRing 3.5s ease-out infinite;
}

/* Всё вместе: body.theme-architect усиливает scan-линии */
body.theme-architect::before {
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0,0,0,0.055) 3px, rgba(0,0,0,0.055) 4px
  );
}

/* ===== PRE-LAUNCH GATE ===== */
.launch-gate-card {
  position: relative;
  margin: 10px 12px 12px;
  padding: 16px 16px 14px;
  overflow: hidden;
  border: 1px solid rgba(220,45,45,0.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 10%, rgba(220,45,45,0.18), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(212,175,55,0.09), transparent 36%),
    linear-gradient(145deg, rgba(8,8,18,0.92), rgba(24,4,8,0.86));
  box-shadow:
    0 14px 38px rgba(0,0,0,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.035);
}

.launch-gate-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 6px),
    linear-gradient(90deg, transparent, rgba(220,45,45,0.12), transparent);
  opacity: 0.46;
  pointer-events: none;
}

.launch-gate-card > * {
  position: relative;
  z-index: 1;
}

.launch-gate-mark {
  color: rgba(255,60,60,0.92);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 5px;
  text-shadow: 0 0 18px rgba(220,45,45,0.42);
}

.launch-gate-title {
  margin-top: 6px;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.6px;
}

.launch-gate-copy {
  max-width: 430px;
  margin-top: 6px;
  color: var(--text2);
  font-size: 11px;
  line-height: 1.55;
}

.launch-gate-countdown {
  width: fit-content;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(212,175,55,0.24);
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  color: var(--gold);
  font-family: monospace;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}

.launch-gate-note {
  margin-top: 10px;
  color: rgba(255,80,80,0.55);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1.8px;
}

.launch-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background:
    radial-gradient(circle at center, rgba(180,20,20,0.20), transparent 45%),
    rgba(0,0,8,0.88);
  backdrop-filter: blur(10px);
}

.launch-gate-overlay.show {
  display: flex;
  animation: launchGateFadeIn 0.18s ease-out both;
}

.launch-gate-panel {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  overflow: hidden;
  padding: 24px 18px 18px;
  border: 1px solid rgba(255,55,55,0.52);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,60,60,0.18), transparent 34%),
    linear-gradient(150deg, rgba(7,7,16,0.96), rgba(28,4,8,0.94));
  box-shadow:
    0 0 54px rgba(180,20,20,0.28),
    inset 0 0 0 1px rgba(212,175,55,0.08);
  text-align: center;
}

.launch-gate-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.18;
}

.launch-gate-scan {
  position: absolute;
  left: -30%;
  right: -30%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,60,60,0.95), transparent);
  box-shadow: 0 0 22px rgba(255,60,60,0.58);
  animation: launchGateScan 1.55s linear infinite;
}

.launch-gate-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.78);
  font-size: 22px;
}

.launch-gate-kicker,
.launch-gate-big,
.launch-gate-panel-title,
.launch-gate-panel-copy,
.launch-gate-panel-timer,
.launch-gate-return {
  position: relative;
  z-index: 1;
}

.launch-gate-kicker {
  color: rgba(212,175,55,0.74);
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 2px;
}

.launch-gate-big {
  margin-top: 12px;
  color: #ff343d;
  font-size: clamp(38px, 13vw, 62px);
  font-weight: 950;
  letter-spacing: 8px;
  text-shadow:
    0 0 12px rgba(255,45,45,0.72),
    0 0 34px rgba(180,20,20,0.48);
}

.launch-gate-panel-title {
  margin-top: 4px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.launch-gate-panel-copy {
  margin: 10px auto 0;
  max-width: 330px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  line-height: 1.55;
}

.launch-gate-panel-timer {
  margin: 16px auto 0;
  padding: 10px 12px;
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 14px;
  background: rgba(0,0,0,0.28);
  color: #f2d273;
  font-family: monospace;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.launch-gate-return {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 1px solid rgba(212,175,55,0.24);
  border-radius: 14px;
  background: var(--gold-dim);
  color: #f0d896;
  font-weight: 900;
  letter-spacing: 0.8px;
}

body.launch-locked .bottom-nav .nav-item:not(.active) {
  opacity: 0.46;
  filter: saturate(0.55);
}

body.launch-locked .home-event-card {
  filter: grayscale(0.35) brightness(0.78);
}

.home-event-card.event-disabled-admin-view {
  opacity: 0.68;
  filter: grayscale(0.45) brightness(0.82);
}

.home-event-card.event-disabled-admin-view::after {
  content: 'ADMIN PREVIEW // EVENT HIDDEN';
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,80,80,0.72);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1.6px;
}

.admin-architect-event-card {
  margin-top: 12px;
}

.admin-architect-event-status {
  width: fit-content;
  margin-top: 8px;
  padding: 4px 8px;
  border: 1px solid rgba(255,80,80,0.22);
  border-radius: 999px;
  background: rgba(180,20,20,0.08);
  color: rgba(255,100,100,0.78);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1px;
}

.admin-architect-event-status.enabled {
  border-color: rgba(70,220,120,0.24);
  background: rgba(40,180,90,0.08);
  color: rgba(100,240,150,0.82);
}

@keyframes launchGateFadeIn {
  from { opacity: 0; transform: scale(1.01); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes launchGateScan {
  from { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 0.65; }
  to { transform: translateY(360px); opacity: 0; }
}

/* Заморозка отдельных разделов — замок на пунктах навигации/меню */
.feature-frozen { position: relative; }
.feature-frozen::after {
  content: "\1F512"; /* 🔒 */
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 10px;
  line-height: 1;
  opacity: 0.85;
  pointer-events: none;
  filter: grayscale(0.2);
}
.more-item.feature-frozen { opacity: 0.5; }
.nav-item.feature-frozen { opacity: 0.62; }
.nav-item.feature-frozen::after { top: 2px; right: 50%; transform: translateX(14px); }
/* ═══════════════════════════════════════════════════════════════
   ARCHITECT // WOW LAYER II — Holographic · Neon · Boot · Tilt
   ═══════════════════════════════════════════════════════════════ */

/* 1 ── Holographic border cycling: red → orange → gold → violet */
@keyframes holoBorderCycle {
  0%   { border-color: rgba(232,34,0,0.95);  }
  20%  { border-color: rgba(255,80,0,0.9);   }
  40%  { border-color: rgba(255,204,0,0.9);  }
  60%  { border-color: rgba(200,80,255,0.85); }
  80%  { border-color: rgba(157,78,221,0.95); }
  100% { border-color: rgba(232,34,0,0.95);  }
}
body.is-architect .profile-card-home {
  border: 2px solid rgba(232,34,0,0.95);
  animation: blackwallHeartbeat 3.5s ease-in-out infinite,
             holoBorderCycle 5s linear infinite !important;
}

/* 2 ── Neon flicker on profile name (irregular dropout + color drift) */
@keyframes neonFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    color: #fff5f0;
    text-shadow:
      0 0 8px rgba(232,34,0,0.95),
      0 0 20px rgba(232,34,0,0.6),
      0 0 45px rgba(232,34,0,0.25);
    filter: brightness(1);
  }
  19%, 23%, 54% {
    color: rgba(255,245,240,0.25);
    text-shadow: none;
    filter: brightness(0.35);
  }
  68% {
    color: #fffce0;
    text-shadow:
      0 0 12px rgba(255,204,0,0.9),
      0 0 28px rgba(255,204,0,0.45);
  }
  84% {
    color: #f5eaff;
    text-shadow:
      0 0 10px rgba(180,80,255,0.9),
      0 0 24px rgba(157,78,221,0.45);
  }
}
body.is-architect .profile-card-name {
  animation: neonFlicker 9s ease-in-out infinite;
}

/* 3 ── BLACKWALL BOOT SEQUENCE overlay */
#blackwall-boot {
  display: flex;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  font-family: 'Courier New', monospace;
  align-items: center;
  justify-content: center;
}
#blackwall-boot.bw-fadeout {
  animation: bootFadeOut 0.9s ease-in forwards;
}
@keyframes bootFadeOut {
  to { opacity: 0; pointer-events: none; }
}
.boot-terminal {
  width: 92%;
  max-width: 340px;
}
.boot-line {
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.8px;
}
.boot-line span {
  display: block;
  color: rgba(232,34,0,0.55);
}
.boot-line span.bw-current {
  color: #ff3300;
  text-shadow: 0 0 8px rgba(232,34,0,0.5);
}
.boot-line span.bw-gold {
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255,204,0,0.5);
  font-size: 12px;
  letter-spacing: 2px;
  margin-top: 4px;
}
.boot-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: #e82200;
  margin-left: 3px;
  vertical-align: middle;
  animation: bootBlink 0.55s step-end infinite;
}
@keyframes bootBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.boot-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
}

/* 4 ── 3D tilt transitions (transform applied by JS) */
body.is-architect .profile-card-home {
  will-change: transform;
}
.profile-card-home.tilt-move {
  transition: transform 0.12s ease-out !important;
}
.profile-card-home.tilt-reset {
  transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* 5 ── EXTRA: Corner spark pulse on profile card (architect) */
@keyframes cornerSparkTL {
  0%, 100% { opacity: 0; transform: scale(0.4) translate(-2px,-2px); }
  50%       { opacity: 1; transform: scale(1.2) translate(-4px,-4px); box-shadow: 0 0 10px rgba(255,204,0,0.9), 0 0 20px rgba(232,34,0,0.5); }
}
@keyframes cornerSparkBR {
  0%, 100% { opacity: 0; transform: scale(0.4) translate(2px,2px); }
  50%       { opacity: 1; transform: scale(1.2) translate(4px,4px); box-shadow: 0 0 10px rgba(157,78,221,0.9), 0 0 20px rgba(200,80,255,0.5); }
}
.profile-card-spark {
  display: none;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
}
body.is-architect .profile-card-spark { display: block; }
body.is-architect .profile-card-spark.spark-tl {
  top: 8px; left: 8px;
  background: #ffcc00;
  animation: cornerSparkTL 2.8s ease-in-out infinite;
}
body.is-architect .profile-card-spark.spark-br {
  bottom: 8px; right: 8px;
  background: #9d4edd;
  animation: cornerSparkBR 2.8s ease-in-out infinite 1.4s;
}
body.is-architect .profile-card-spark.spark-tr {
  top: 8px; right: 8px;
  background: #e82200;
  animation: cornerSparkTL 3.2s ease-in-out infinite 0.7s;
}
body.is-architect .profile-card-spark.spark-bl {
  bottom: 8px; left: 8px;
  background: #ff6600;
  animation: cornerSparkBR 3.2s ease-in-out infinite 2.1s;
}

/* ═══════════════════════════════════════════════════════════
   ARCHITECT EVENT — RESULT REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

/* Result image: fade-in + subtle zoom from dark */
@keyframes architectResultImageReveal {
  0%   { opacity: 0; transform: scale(1.07); filter: brightness(0.15) saturate(0); }
  30%  { opacity: 0.7; filter: brightness(0.6) saturate(0.4); }
  100% { opacity: 1; transform: scale(1); filter: saturate(1.12) contrast(1.08) brightness(0.96); }
}
#eventBossImage.result-image-reveal {
  animation: architectResultImageReveal 1.8s ease-out forwards !important;
}

/* ── Lobby image glitch ──────────────────────────────────────── */

/* Main image animation: gentle float with two glitch bursts per cycle */
@keyframes lobbyBossFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  25%       { transform: translateY(-7px) scale(1.006); }
  50%       { transform: translateY(0) scale(1); }
  75%       { transform: translateY(-4px) scale(1.003); }
}

@keyframes lobbyBossGlitch {
  /* Clean phase */
  0%, 78%, 86%, 94%, 100% {
    filter: saturate(1.1) contrast(1.08) brightness(0.9);
    clip-path: none;
    transform: translate(0);
  }
  /* Burst 1: RGB split */
  79%   { filter: saturate(3.5) contrast(1.6) hue-rotate(18deg) brightness(1.5); transform: translate(-6px, 0); clip-path: inset(27% 0 43% 0); }
  79.5% { filter: saturate(3.5) contrast(1.6) hue-rotate(-18deg) brightness(1.5); transform: translate(6px, 0);  clip-path: inset(58% 0 12% 0); }
  80%   { filter: saturate(0.2) contrast(2.2) brightness(2.2); transform: translate(-2px, 1px); clip-path: inset(0 0 0 0); }
  80.5% { filter: saturate(1.1) contrast(1.08) brightness(0.9); transform: translate(0); clip-path: none; }
  /* Brief flicker */
  83%   { filter: saturate(1.1) contrast(1.08) brightness(0.9); }
  83.3% { filter: saturate(0.1) brightness(2.5) contrast(1.8); }
  83.6% { filter: saturate(1.1) contrast(1.08) brightness(0.9); }
  /* Burst 2: horizontal tear */
  87%   { transform: translate(10px, 0); filter: saturate(2.5) hue-rotate(22deg); clip-path: inset(18% 0 52% 0); }
  87.5% { transform: translate(-10px, 0); filter: saturate(2.5) hue-rotate(-22deg); clip-path: inset(54% 0 16% 0); }
  88%   { transform: translate(4px, 0); filter: saturate(1.5) brightness(1.4); clip-path: inset(35% 0 35% 0); }
  88.5% { transform: translate(0); filter: saturate(1.1) contrast(1.08) brightness(0.9); clip-path: none; }
}

/* Scan-line intensification overlay during lobby */
@keyframes lobbyScanFlicker {
  0%, 78.9%, 80.6%, 86.9%, 88.6%, 100% { opacity: 0; }
  79%, 80.5% { opacity: 1; }
  87%, 88.5% { opacity: 0.7; }
}

.event-overlay.event-state-lobby #eventBossImage {
  animation:
    lobbyBossFloat  9s ease-in-out infinite,
    lobbyBossGlitch 14s linear infinite;
  will-change: transform, filter;
}

/* Lobby boss art reads too small/cramped under the lobby card — give it a taller,
   higher box so object-fit:contain renders it larger and shifted upward. */
.event-overlay.event-state-lobby .event-hero img,
.event-overlay.event-state-lobby .event-hero-video {
  top: 60px;
  height: calc(100vh + 30px - 60px);
}

/* Scan line flash on top of image during glitch — uses hero::after which already sweeps */
.event-overlay.event-state-lobby .event-hero::after {
  animation: eventScanSweep 5.5s linear infinite, lobbyScanFlicker 14s linear infinite;
  opacity: 0.6;
}

/* ── WildAI Breach lobby — BlackWall about to fail: heavier glitches/freezes ── */

@keyframes wildaiLobbyBossGlitch {
  /* Mostly clean, but jittery */
  0%, 100% { filter: saturate(1.15) contrast(1.1) brightness(0.9); clip-path: none; transform: translate(0); }
  6%   { transform: translate(-3px, 1px); filter: saturate(2.4) hue-rotate(14deg) brightness(1.3); clip-path: inset(12% 0 61% 0); }
  6.4% { transform: translate(3px, -1px); filter: saturate(2.4) hue-rotate(-14deg) brightness(1.3); clip-path: inset(54% 0 18% 0); }
  6.8% { transform: translate(0); filter: saturate(1.15) contrast(1.1) brightness(0.9); clip-path: none; }
  /* Freeze: image holds, screen briefly desaturates like a frozen frame */
  22%, 24.5% { filter: saturate(0) contrast(1.4) brightness(0.7); transform: translate(0); clip-path: none; }
  24.6% { filter: saturate(2.6) contrast(1.8) brightness(1.6); transform: translate(-8px, 0); clip-path: inset(35% 0 35% 0); }
  25%  { filter: saturate(1.15) contrast(1.1) brightness(0.9); transform: translate(0); clip-path: none; }
  /* Hard tear burst */
  41%   { transform: translate(12px, -2px); filter: saturate(3) hue-rotate(24deg) brightness(1.7); clip-path: inset(8% 0 70% 0); }
  41.4% { transform: translate(-12px, 2px); filter: saturate(3) hue-rotate(-24deg) brightness(1.7); clip-path: inset(66% 0 10% 0); }
  41.8% { transform: translate(4px, 0); filter: saturate(0.2) contrast(2.4) brightness(2.4); clip-path: inset(0); }
  42.2% { transform: translate(0); filter: saturate(1.15) contrast(1.1) brightness(0.9); clip-path: none; }
  /* Quick flicker stutter */
  58%   { filter: saturate(1.15) contrast(1.1) brightness(0.9); }
  58.2% { filter: saturate(0.1) brightness(2.6) contrast(2); }
  58.4% { filter: saturate(1.15) contrast(1.1) brightness(0.4); }
  58.6% { filter: saturate(0.1) brightness(2.6) contrast(2); }
  58.8% { filter: saturate(1.15) contrast(1.1) brightness(0.9); }
  /* Second freeze, longer */
  74%, 78% { filter: saturate(0) contrast(1.5) brightness(0.65); transform: translate(0); clip-path: none; }
  78.3% { filter: saturate(3) contrast(1.9) brightness(1.7); transform: translate(7px, -1px); clip-path: inset(20% 0 50% 0); }
  78.6% { filter: saturate(1.15) contrast(1.1) brightness(0.9); transform: translate(0); clip-path: none; }
  /* Final pre-collapse tear */
  90%   { transform: translate(-10px, 2px); filter: saturate(2.8) hue-rotate(-20deg) brightness(1.6); clip-path: inset(15% 0 55% 0); }
  90.4% { transform: translate(10px, -2px); filter: saturate(2.8) hue-rotate(20deg) brightness(1.6); clip-path: inset(60% 0 14% 0); }
  90.8% { transform: translate(0); filter: saturate(1.15) contrast(1.1) brightness(0.9); clip-path: none; }
}

/* Subtle constant jitter layered on top of the glitch keyframes */
@keyframes wildaiLobbyJitter {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(1px, 0); }
  20% { transform: translate(-1px, 1px); }
  30% { transform: translate(0, -1px); }
  40% { transform: translate(1px, 1px); }
  50% { transform: translate(-1px, 0); }
  60% { transform: translate(0, 1px); }
  70% { transform: translate(1px, -1px); }
  80% { transform: translate(-1px, -1px); }
  90% { transform: translate(0, 0); }
}

.event-overlay.event-wildai-lobby #eventBossImage {
  animation:
    wildaiLobbyBossGlitch 11s steps(1, end) infinite,
    wildaiLobbyJitter 0.18s steps(2, end) infinite;
  will-change: transform, filter;
}

/* Static-noise overlay flickers in during freezes/glitches */
@keyframes wildaiLobbyNoiseFlicker {
  0%, 5%, 21%, 26%, 40%, 43%, 57%, 60%, 73%, 79%, 89%, 92%, 100% { opacity: 0; }
  6%, 24.5%, 41.5%, 58.3%, 76%, 90.5% { opacity: 0.5; }
}

.event-overlay.event-wildai-lobby .event-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.08) 0px,
    rgba(255,255,255,0.08) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: wildaiLobbyNoiseFlicker 11s steps(1, end) infinite;
}

.event-overlay.event-wildai-lobby .event-hero::after {
  animation: eventScanSweep 4.2s linear infinite, wildaiLobbyNoiseFlicker 11s steps(1, end) infinite;
  opacity: 0.75;
}

/* "BlackWall integrity failing" warning text flicker over the lobby */
.event-wildai-lobby-warning {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff4040;
  text-shadow: 0 0 10px rgba(255,40,40,0.7);
  pointer-events: none;
  opacity: 0;
  animation: wildaiLobbyWarningFlicker 11s steps(1, end) infinite;
}

@keyframes wildaiLobbyWarningFlicker {
  0%, 5%, 21%, 26%, 40%, 43%, 57%, 60%, 73%, 79%, 89%, 92%, 100% { opacity: 0; }
  6%, 24.5%, 41.5%, 58.3%, 76%, 90.5% { opacity: 1; }
}

/* ── Lobby card redesign ────────────────────────────────────── */

.event-overlay.event-state-lobby .event-lobby-card {
  max-height: 44vh;
  padding: 0;
  border: none !important;
  border-top: 2px solid rgba(220, 38, 38, 0.55) !important;
  border-radius: 0 !important;
  background: rgba(4, 4, 10, 0.98) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5) !important;
  overflow: hidden;
}

/* Inner padding wrapper via head */
.event-overlay.event-state-lobby .event-lobby-head {
  align-items: center;
  gap: 8px;
  padding: 10px 14px 0;
}

.event-overlay.event-state-lobby .event-lobby-kicker {
  font-size: 8px !important;
  letter-spacing: 2.2px !important;
  color: rgba(220,38,38,0.75) !important;
  opacity: 1;
}
.event-overlay.event-state-lobby .event-lobby-kicker::before {
  background: rgba(220,38,38,0.9) !important;
  box-shadow: 0 0 6px rgba(220,38,38,0.6) !important;
}

.event-overlay.event-state-lobby .event-lobby-status {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  margin-top: 2px !important;
}

/* Prize: monospace terminal line, no background box */
.event-overlay.event-state-lobby .event-lobby-reward {
  margin-top: 6px !important;
  padding: 7px 14px !important;
  background: rgba(255,255,255,0.025) !important;
  border: none !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.event-overlay.event-state-lobby .event-lobby-reward::before {
  content: '//';
  font-family: monospace;
  font-size: 10px;
  color: rgba(220,38,38,0.65);
  letter-spacing: 0;
  font-weight: 700;
  flex: 0 0 auto;
}
.event-overlay.event-state-lobby .event-lobby-reward .event-lobby-label {
  display: none !important;
}
.event-overlay.event-state-lobby .event-lobby-reward .event-lobby-value {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f0e8d0 !important;
  text-shadow: none !important;
  font-family: -apple-system, sans-serif;
}

/* Members */
.event-overlay.event-state-lobby .event-lobby-members {
  margin-top: 0 !important;
  padding: 6px 14px 0;
}
.event-overlay.event-state-lobby .event-lobby-members .event-lobby-label {
  display: none !important;
}
.event-overlay.event-state-lobby .event-team-list {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  max-height: 48px !important;
  background: none !important;
  border: none !important;
  padding: 4px 0 0 !important;
  margin-top: 0 !important;
}
.event-overlay.event-state-lobby .event-team-member {
  padding: 3px 9px !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  font-family: monospace !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.7) !important;
}
.event-overlay.event-state-lobby .event-team-member::before {
  content: '' !important;
  display: none !important;
}
.event-overlay.event-state-lobby .event-team-empty {
  font-size: 10px !important;
  padding: 2px 0 !important;
  font-family: monospace !important;
  font-style: normal !important;
  color: rgba(255,255,255,0.28) !important;
  letter-spacing: 0.5px;
}
.event-overlay.event-state-lobby .event-team-empty::before {
  content: '○ ○ ○ ○ ○  ';
  color: rgba(220,38,38,0.35);
  letter-spacing: 4px;
}

/* Buttons: action-button style */
.event-overlay.event-state-lobby .event-lobby-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  margin-top: 8px !important;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.event-overlay.event-state-lobby .event-lobby-btn {
  min-height: 52px !important;
  padding: 10px 14px !important;
  font-size: 11px !important;
  font-family: monospace !important;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-top: 2px solid !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 0 !important;
  background: rgba(5,5,13,0.99) !important;
  box-shadow: none !important;
}
.event-overlay.event-state-lobby .event-lobby-btn:last-child {
  border-right: none !important;
}
.event-overlay.event-state-lobby #eventJoinBtn,
.event-overlay.event-state-lobby .event-lobby-btn.join {
  border-top-color: rgba(220,38,38,0.8) !important;
  color: #ffaaaa !important;
  background: linear-gradient(150deg, rgba(220,38,38,0.1), rgba(5,5,13,0.99) 60%) !important;
}
.event-overlay.event-state-lobby #eventLeaveBtn,
.event-overlay.event-state-lobby .event-lobby-btn.leave {
  border-top-color: rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.55) !important;
}
.event-overlay.event-state-lobby #eventStartBtn,
.event-overlay.event-state-lobby #eventCreateBtn,
.event-overlay.event-state-lobby .event-lobby-btn.start {
  border-top-color: rgba(212,175,55,0.8) !important;
  color: #f0d887 !important;
  background: linear-gradient(150deg, rgba(212,175,55,0.1), rgba(5,5,13,0.99) 60%) !important;
}



/* Result banner: hidden state (shown in DOM but invisible) */
.event-overlay.event-terminal .event-lobby-card.result-banner-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px);
}

/* Result banner: slide-up reveal */
@keyframes architectResultBannerReveal {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.event-overlay.event-terminal .event-lobby-card.result-banner-reveal {
  animation: architectResultBannerReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes verdictExpand {
  from { letter-spacing: -2px; opacity: 0; }
  30%  { opacity: 1; }
  to   { letter-spacing: 3px; opacity: 1; }
}
.event-overlay.event-terminal .event-lobby-card.result-banner-reveal .event-result-verdict {
  animation: verdictExpand 0.85s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── MVP badge on profile card ──────────────────────────────── */
.profile-badge-mvp {
  background: linear-gradient(90deg, rgba(255,180,0,0.18), rgba(255,120,0,0.12));
  border: 1px solid rgba(255,180,0,0.55);
  color: #ffb400;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255,180,0,0.5);
  animation: mvpPulse 3s ease-in-out infinite;
}
@keyframes mvpPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255,180,0,0.2); }
  50%       { box-shadow: 0 0 12px rgba(255,180,0,0.5), 0 0 24px rgba(255,100,0,0.15); }
}

/* ── Extra participants section in event result ─────────────── */
.event-extra-participants {
  padding: 8px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 6px;
}
.event-extra-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
  min-height: 4px;
}
.event-extra-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  font-family: monospace;
}
.event-extra-remove {
  background: none;
  border: none;
  color: rgba(255,80,80,0.7);
  cursor: pointer;
  font-size: 10px;
  padding: 0;
  line-height: 1;
}
.event-extra-input-row {
  display: flex;
  gap: 6px;
  margin-top: 7px;
  align-items: center;
}
.event-extra-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #fff;
  font-family: monospace;
  font-size: 10px;
  padding: 6px 10px;
  outline: none;
}
.event-extra-input::placeholder { color: rgba(255,255,255,0.3); }
.event-extra-add-btn {
  background: rgba(0,200,100,0.12);
  border: 1px solid rgba(0,200,100,0.35);
  color: rgba(0,220,110,0.9);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════
   PREMIUM POLISH LAYER — ARCHITECT PROTOCOL · NetWatch refinement
   v.20260507a · cohesive cyberpunk overhaul
   ════════════════════════════════════════════════════════════════ */

/* — Subtle scanline overlay for cohesion — */
.event-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 80, 80, 0.022) 0px,
      rgba(255, 80, 80, 0.022) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: overlay;
  opacity: 0.7;
}

.event-overlay.event-state-active::after {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 60, 50, 0.028) 0px,
      rgba(255, 60, 50, 0.028) 1px,
      transparent 1px,
      transparent 3px
    );
}

.event-overlay.event-terminal.event-state-finished::after {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 220, 255, 0.022) 0px,
      rgba(0, 220, 255, 0.022) 1px,
      transparent 1px,
      transparent 3px
    );
}

/* — Bottom gradient veil over image for legibility — */
.event-overlay .event-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.62));
  pointer-events: none;
  z-index: 1;
}

/* — Topbar premium — */
.event-topbar .event-kicker {
  font-size: 9px;
  letter-spacing: 2.6px;
  color: rgba(212, 175, 55, 0.92);
  font-family: monospace;
  text-shadow: 0 0 14px rgba(212, 175, 55, 0.32);
  position: relative;
  padding-left: 14px;
}

.event-topbar .event-kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff3535;
  box-shadow: 0 0 10px rgba(255, 53, 53, 0.7);
  animation: architectStatusBlink 1.4s ease-in-out infinite;
}

@keyframes architectStatusBlink {
  0%, 60%, 100% { opacity: 1; box-shadow: 0 0 10px rgba(255, 53, 53, 0.7); }
  30%           { opacity: 0.42; box-shadow: 0 0 4px rgba(255, 53, 53, 0.3); }
}

.event-topbar .event-phase {
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 2.4px;
  color: #fff;
  text-shadow:
    0 0 18px rgba(255, 60, 40, 0.55),
    -1px 0 rgba(255, 60, 40, 0.25),
    1px 0 rgba(0, 220, 255, 0.18);
  margin-top: 3px;
}

.event-mute-btn,
.event-close-btn {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(8, 8, 16, 0.78);
  backdrop-filter: blur(10px);
  transition: background 0.18s, border-color 0.18s, transform 0.1s;
}

.event-mute-btn:hover,
.event-close-btn:hover {
  background: rgba(20, 20, 30, 0.88);
  border-color: rgba(255,255,255,0.18);
}

.event-mute-btn:active,
.event-close-btn:active {
  transform: scale(0.92);
}

/* — HUD: bigger, more readable — */
.boss-hud {
  padding: 10px 12px !important;
  gap: 10px !important;
  background:
    linear-gradient(180deg, rgba(8, 8, 18, 0.86), rgba(4, 4, 12, 0.94)) !important;
  border: 1px solid rgba(255, 70, 70, 0.28) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.boss-hud__stack {
  width: 38px !important;
  flex: 0 0 38px !important;
  gap: 4px !important;
}

.boss-hud__avatar {
  height: 32px !important;
}

.boss-hud__level {
  min-height: 16px !important;
  font-size: 9px !important;
}

.boss-hud__caption {
  font-size: 7px !important;
  letter-spacing: 0.22em !important;
  color: rgba(255, 130, 100, 0.82) !important;
}

.event-boss-name {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #ffffff !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.7) !important;
}

.event-status-badge {
  min-height: 16px !important;
  padding: 2px 6px !important;
  font-size: 8px !important;
  letter-spacing: 0.10em !important;
  border-radius: 3px !important;
}

.event-hp-text,
.event-overload-readout {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

.event-hp-bar {
  height: 7px !important;
  border-radius: 4px !important;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.62) !important;
  border: 1px solid rgba(255, 70, 70, 0.22);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  position: relative;
}

.event-hp-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 4px,
    rgba(255,255,255,0.06) 4px 5px
  );
  pointer-events: none;
}

.event-hp-fill {
  height: 100% !important;
  background:
    linear-gradient(90deg, #ff3535 0%, #ff6a2a 60%, #ffba2a 100%) !important;
  box-shadow:
    0 0 12px rgba(255, 60, 40, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative;
}

.event-hp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32));
}

.event-overlay.event-phase-2 .event-hp-fill {
  background: linear-gradient(90deg, #ffaa1f 0%, #ffc832 100%) !important;
  box-shadow: 0 0 12px rgba(255, 170, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.event-overlay.event-phase-3 .event-hp-fill {
  background: linear-gradient(90deg, #54f5ff 0%, #fff 100%) !important;
  box-shadow: 0 0 16px rgba(84, 245, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  animation: hpCriticalPulse 0.9s ease-in-out infinite;
}

@keyframes hpCriticalPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.35); }
}

/* — Wild AI Breach HUD: drop the Architect avatar, recolor the bar — */
.event-overlay.event-wildai .boss-hud__stack {
  display: none !important;
}

.event-overlay.event-wildai .event-hp-bar {
  border-color: rgba(120, 255, 140, 0.28) !important;
}

.event-overlay.event-wildai .event-hp-fill {
  background: linear-gradient(90deg, #2bff7a 0%, #8cff4d 60%, #d4ff2a 100%) !important;
  box-shadow:
    0 0 12px rgba(80, 255, 110, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.event-overlay.event-wildai.event-phase-2 .event-hp-fill {
  background: linear-gradient(90deg, #ffd23a 0%, #ff8a2a 100%) !important;
  box-shadow: 0 0 12px rgba(255, 170, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.event-overlay.event-wildai.event-phase-3 .event-hp-fill {
  background: linear-gradient(90deg, #ff3a3a 0%, #ff2ad4 100%) !important;
  box-shadow: 0 0 16px rgba(255, 58, 58, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  animation: hpCriticalPulse 0.9s ease-in-out infinite;
}

/* Wild AI Breach battle clips letterbox down to a small strip with object-fit:contain
   (their source aspect ratio differs from Architect's clips) — fill the hero box instead. */
.event-overlay.event-wildai #eventBossVideo {
  object-fit: cover;
}

/* — Question modal premium cyber — */
.event-question-modal {
  border-radius: 16px !important;
  border: 1px solid rgba(212, 175, 55, 0.30) !important;
  background:
    linear-gradient(180deg, rgba(14, 12, 22, 0.96), rgba(8, 6, 14, 0.98)) !important;
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.62),
    0 0 32px rgba(212, 175, 55, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  padding: 16px 16px 14px !important;
  overflow: hidden;
}

.event-question-modal::before {
  content: 'QUERY // INPUT REQUIRED';
  display: block;
  margin-bottom: 8px;
  color: rgba(212, 175, 55, 0.78);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 2.4px;
  padding-left: 12px;
  position: relative;
}

.event-question-modal::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
  animation: architectStatusBlink 1.4s ease-in-out infinite;
}

.event-question-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
  color: #ffffff !important;
}

.event-options {
  gap: 7px !important;
}

.event-option-btn {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 11px !important;
  padding: 11px 12px 11px 10px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  text-align: left !important;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.18s ease !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

.event-option-btn:hover {
  border-color: rgba(212, 175, 55, 0.36) !important;
  background: rgba(212, 175, 55, 0.05) !important;
}

.event-option-btn:active {
  transform: scale(0.98) !important;
  background: rgba(212, 175, 55, 0.10) !important;
}

.event-option-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.26);
  color: rgba(240, 220, 168, 0.92);
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-top: -1px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.event-option-text {
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
}

.event-option-btn:hover .event-option-mark {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.46);
  color: #f8e2a0;
}

.event-option-btn.is-selected {
  border-color: rgba(212, 175, 55, 0.62) !important;
  background: rgba(212, 175, 55, 0.13) !important;
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.18), inset 0 0 0 1px rgba(212, 175, 55, 0.18) !important;
}

.event-option-btn.is-selected .event-option-mark {
  background: rgba(212, 175, 55, 0.28);
  border-color: rgba(212, 175, 55, 0.78);
  color: #fff4c8;
}

.event-option-btn.is-correct {
  border-color: rgba(70, 220, 130, 0.72) !important;
  background: rgba(70, 220, 130, 0.14) !important;
  box-shadow: 0 0 26px rgba(70, 220, 130, 0.22), inset 0 0 0 1px rgba(70, 220, 130, 0.20) !important;
  animation: optionCorrectPulse 0.6s ease-out;
}

.event-option-btn.is-correct .event-option-mark {
  background: rgba(70, 220, 130, 0.28);
  border-color: rgba(70, 220, 130, 0.78);
  color: #b6f8ce;
}

.event-option-btn.is-wrong {
  border-color: rgba(255, 70, 70, 0.78) !important;
  background: rgba(255, 70, 70, 0.14) !important;
  box-shadow: 0 0 26px rgba(255, 70, 70, 0.22), inset 0 0 0 1px rgba(255, 70, 70, 0.22) !important;
  animation: optionWrongShake 0.34s ease-out;
}

.event-option-btn.is-wrong .event-option-mark {
  background: rgba(255, 70, 70, 0.28);
  border-color: rgba(255, 70, 70, 0.78);
  color: #ffc4c4;
}

@keyframes optionCorrectPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes optionWrongShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* — Event log: terminal aesthetic — */
.event-log {
  background:
    linear-gradient(180deg, rgba(4, 5, 12, 0.84), rgba(3, 4, 10, 0.88)) !important;
  border: 1px solid rgba(0, 220, 255, 0.16) !important;
  border-radius: 10px !important;
  padding: 6px 11px 5px !important;
  position: fixed;
  font-family: monospace !important;
  overflow: hidden;
}

.event-log::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 1px,
    rgba(0, 220, 255, 0.022) 1px 2px
  );
  pointer-events: none;
}

.event-log-line,
.event-log-item {
  font-size: 10px !important;
  line-height: 1.4 !important;
  padding: 2px 0 !important;
  border-bottom: 1px solid rgba(0, 220, 255, 0.05) !important;
  color: rgba(190, 240, 255, 0.84);
  position: relative;
  padding-left: 10px;
  animation: logLineEnter 0.32s ease-out;
}

.event-log-line:last-child,
.event-log-item:last-child {
  border-bottom: none !important;
}

.event-log-line::before,
.event-log-item::before {
  content: '›';
  position: absolute;
  left: 0;
  top: 2px;
  color: rgba(0, 220, 255, 0.5);
  font-weight: 800;
}

.event-log-empty {
  color: rgba(140, 160, 175, 0.6) !important;
  font-size: 10px !important;
  padding-left: 0;
  font-style: italic;
}

@keyframes logLineEnter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* — Action button refinements — */
.event-action-sub {
  font-size: 8px !important;
  letter-spacing: 1.4px !important;
  opacity: 0.62 !important;
}

.event-action-name {
  font-size: 13.5px !important;
  letter-spacing: 1.5px !important;
}

.event-action-kanji {
  font-size: 36px !important;
  opacity: 0.16 !important;
  top: 4px !important;
  right: 12px !important;
}

.event-action::before {
  font-size: 9px !important;
  letter-spacing: 2.5px !important;
  opacity: 0.6 !important;
}

/* — Lobby card premium — */
.event-lobby-card {
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.52),
    0 0 28px rgba(212, 175, 55, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

.event-lobby-kicker {
  font-size: 9px !important;
  letter-spacing: 2.4px !important;
  color: rgba(212, 175, 55, 0.86) !important;
  font-family: monospace !important;
  position: relative;
  padding-left: 12px;
  display: inline-block;
}

.event-lobby-kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 7px rgba(212, 175, 55, 0.7);
  animation: architectStatusBlink 1.4s ease-in-out infinite;
}

.event-lobby-status {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
}

.event-lobby-count {
  padding: 5px 9px !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  background: rgba(212, 175, 55, 0.08) !important;
  color: #f0d887 !important;
  font-family: monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  border-radius: 999px !important;
}

.event-lobby-label {
  font-size: 8px !important;
  letter-spacing: 2px !important;
  color: rgba(255, 255, 255, 0.42) !important;
  font-family: monospace !important;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.event-lobby-value {
  font-size: 13px !important;
  color: #f0e7d2 !important;
  line-height: 1.35 !important;
}

.event-team-list {
  margin-top: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.22);
  padding: 6px 8px;
  max-height: 130px;
  overflow-y: auto;
}

.event-team-empty {
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 11px;
  font-style: italic;
  padding: 4px 0;
}

.event-team-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86);
}

.event-team-member:last-child {
  border-bottom: none;
}

.event-team-member::before {
  content: '◆';
  color: rgba(212, 175, 55, 0.62);
  font-size: 9px;
  flex: 0 0 auto;
}

/* — Lobby buttons premium — */
.event-lobby-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.event-lobby-btn {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  font-family: monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.18s ease !important;
  border: 1px solid !important;
  -webkit-tap-highlight-color: transparent;
}

.event-lobby-btn:active {
  transform: scale(0.97) !important;
}

.event-lobby-btn.start,
#eventCreateBtn,
#eventStartBtn {
  border-color: rgba(212, 175, 55, 0.62) !important;
  background: linear-gradient(180deg, rgba(220, 180, 60, 0.18), rgba(140, 100, 28, 0.22)) !important;
  color: #f8e2a0 !important;
  box-shadow:
    0 4px 16px rgba(212, 175, 55, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.event-lobby-btn.start:hover {
  background: linear-gradient(180deg, rgba(220, 180, 60, 0.26), rgba(160, 110, 30, 0.30)) !important;
}

.event-lobby-btn.join,
#eventJoinBtn {
  border-color: rgba(0, 220, 255, 0.55) !important;
  background: linear-gradient(180deg, rgba(0, 220, 255, 0.16), rgba(0, 80, 120, 0.22)) !important;
  color: #b6f0ff !important;
  box-shadow:
    0 4px 16px rgba(0, 220, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.event-lobby-btn.leave,
#eventLeaveBtn {
  border-color: rgba(255, 80, 80, 0.55) !important;
  background: linear-gradient(180deg, rgba(255, 80, 80, 0.14), rgba(120, 24, 24, 0.22)) !important;
  color: #ffb0b0 !important;
}

/* — Final timer dramatic — */
.event-final-timer {
  background:
    linear-gradient(180deg, rgba(20, 6, 8, 0.92), rgba(8, 4, 6, 0.94)) !important;
  border: 1px solid rgba(255, 60, 40, 0.62) !important;
  color: #ffaaaa !important;
  font-family: monospace !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-shadow: 0 0 14px rgba(255, 50, 40, 0.5) !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(255, 50, 40, 0.18) !important;
  animation: finalTimerPulse 1.6s ease-in-out infinite !important;
}

@keyframes finalTimerPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

/* — Phase warning more dramatic — */
.event-phase-warning {
  font-family: monospace !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-shadow: 0 0 18px rgba(255, 50, 40, 0.6) !important;
  color: #ff8080 !important;
}

/* — Result card content polish — */
.event-result-card .event-result-reward-main {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

.event-result-card .event-result-reward-sub {
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  margin-top: 4px !important;
}

.event-result-card .event-result-summary span {
  font-size: 9px !important;
  padding: 2px 7px !important;
  min-height: 18px !important;
  border-radius: 999px !important;
}

.event-result-card .event-result-row {
  font-size: 12px !important;
  padding: 5px 0 !important;
}

.event-result-card .event-result-row strong {
  font-size: 10px !important;
}

.event-result-card .event-result-mvp {
  padding: 2px 6px !important;
  font-size: 9px !important;
  letter-spacing: 0.10em !important;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.30), rgba(212, 175, 55, 0.12)) !important;
  border: 1px solid rgba(212, 175, 55, 0.42) !important;
  color: #ffe8a4 !important;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
}

/* — Compact mobile adjustments — */
@media (max-height: 720px) {
  .event-question-modal {
    padding: 12px 14px 10px !important;
  }
  .event-question-title {
    font-size: 13px !important;
    margin-bottom: 9px !important;
    padding-bottom: 7px;
  }
  .event-option-btn {
    padding: 9px 10px 9px 8px !important;
    font-size: 12px !important;
  }
  .event-option-mark {
    flex: 0 0 24px;
    height: 24px;
    font-size: 9px;
  }
  .event-result-header { padding: 14px 16px 0; }
  .event-result-verdict { font-size: 22px; }
  .event-lobby-status { font-size: 15px; }
  .event-result-card .event-result-reward-main { font-size: 15px !important; }
}

@media (max-height: 620px) {
  .event-result-verdict { font-size: 19px; }
  .event-result-header { padding: 11px 14px 0; }
}

/* ── Prize section redesign ──────────────────────────────── */
.event-lobby-card .event-lobby-reward {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(212,175,55,0.13) 0%, rgba(212,175,55,0.04) 100%);
  border: 1px solid rgba(212,175,55,0.38);
  position: relative;
  overflow: hidden;
}

.event-lobby-card .event-lobby-reward::before {
  content: 'ПРИЗ // MISSION REWARD';
  display: block;
  font-size: 8px;
  letter-spacing: 2.2px;
  font-family: monospace;
  color: rgba(212,175,55,0.70);
  text-transform: uppercase;
  margin-bottom: 9px;
}

.event-lobby-card .event-lobby-reward .event-lobby-label {
  display: none;
}

.event-lobby-card .event-lobby-reward .event-lobby-value {
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  color: #f5e8b8 !important;
  letter-spacing: 0.03em;
  text-shadow: 0 0 20px rgba(212,175,55,0.28);
}

/* In result card (terminal state), prize is smaller but still elevated */
.event-result-card .event-lobby-reward {
  margin-top: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-dim), rgba(212,175,55,0.03));
  border: 1px solid rgba(212,175,55,0.28);
}

.event-result-card .event-lobby-reward::before {
  content: 'MISSION REWARD';
  display: block;
  font-size: 7px;
  letter-spacing: 2.0px;
  font-family: monospace;
  color: rgba(212,175,55,0.60);
  margin-bottom: 6px;
}

.event-result-card .event-lobby-reward .event-lobby-label {
  display: none;
}

/* Performance: promote action buttons to own layer */
.event-action {
  transform: translateZ(0);
  will-change: transform;
}

/* ── Android performance overrides ─────────────────────────
   Many decorative infinite animations + mix-blend-mode + stacked
   backdrop-filters cause sustained paint/composite jank on Android.
   These overrides keep the look but cut the most expensive bits. */

/* Drop expensive screen-blend overlay over the boss video/image
   (the WildAI lobby keeps its glitch-noise overlay — it's the whole point
   of that screen, and steps() flicker is cheap to composite) */
.event-overlay:not(.event-wildai-lobby) .event-hero::before {
  mix-blend-mode: normal !important;
  opacity: 0.32 !important;
}

/* Disable always-on decorative infinite animations on the event overlay */
.event-overlay:not(.event-wildai-lobby) .event-hero::before,
.event-overlay .event-hero-glow,
.event-overlay::before {
  animation: none !important;
}

/* Phase 1 scanline overlay: keep static gradient, kill animation */
.event-overlay.event-state-active.event-phase-1::before {
  animation: none !important;
  opacity: 0.10 !important;
}

/* Phase 2 split overlay: drop animation, lower opacity */
.event-overlay.event-state-active.event-phase-2::before {
  animation: none !important;
  opacity: 0.16 !important;
}

/* Phase 3 overload pulse: drop animation, lower opacity */
.event-overlay.event-state-active.event-phase-3::before {
  animation: none !important;
  opacity: 0.22 !important;
}

/* Terminal breathing on result image: simplify */
.event-overlay.event-state-terminal #eventBossImage {
  animation: none !important;
}

/* Failed glow pulse: kill the infinite animation */
.event-overlay.event-state-failed .event-hero-glow {
  animation: none !important;
}

/* Overload shake on the boss media: too jittery on Android */
.event-overlay.event-overload-high .event-hero-video,
.event-overlay.event-overload-high #eventBossImage {
  animation: none !important;
}

/* Critical HUD blink: keep static red tone */
.event-overlay.event-overload-critical .event-hud,
.event-overlay.event-overload-critical .event-final-timer {
  animation: none !important;
}

/* Drop final-timer infinite glow animation entirely */
.event-final-timer {
  animation: none !important;
}

/* Drop status LED blink */
.event-status-badge {
  animation: none !important;
}

/* Reduce text-shadow stacking everywhere in the event overlay */
.event-overlay .event-boss-name,
.event-overlay .event-result-verdict,
.event-overlay .event-action-name,
.event-overlay .event-final-timer,
.event-overlay .event-phase-warning {
  text-shadow: 0 0 4px rgba(0,0,0,0.65) !important;
}

/* Drop heavy box-shadow stacks on event panels (kept for definition only) */
.event-question-modal {
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
}
.event-lobby-card {
  box-shadow: 0 -6px 22px rgba(0,0,0,0.45) !important;
}

/* Result win/lose container border animation -> keep but slow it */
.event-overlay.event-terminal .event-lobby-card.event-result-win,
.event-overlay.event-terminal .event-lobby-card.event-result-lose {
  animation-duration: 6s !important;
}

/* Disable Genshin/admin extra background sweeps inside the event */
.event-overlay .architect-event-entry-scan {
  animation: none !important;
  opacity: 0.4 !important;
}

/* ============================================================
   CONTRACT BOARD // THEME-READY P2P LAYER
   ============================================================ */
#page-contracts {
  --contract-accent: #e67e22;
  --contract-accent-soft: rgba(230, 126, 34, 0.14);
  --contract-accent-border: rgba(230, 126, 34, 0.38);
  --contract-card-bg: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  --contract-card-border: rgba(255,255,255,0.08);
  --contract-card-shadow: 0 14px 34px rgba(0,0,0,0.22);
  --contract-muted-bg: rgba(255,255,255,0.045);
  --contract-ok: #2ecc71;
  --contract-danger: #e74c3c;
}

.contracts-shell { padding: 0 12px 100px; }

.contracts-blackwall {
  text-align: center;
  padding: 40px 20px;
  border: 1px solid rgba(255, 60, 60, 0.26);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(180,20,20,0.18), transparent 55%),
    rgba(8, 8, 16, 0.68);
}

.contracts-blackwall-icon { font-size: 32px; margin-bottom: 12px; }

.contracts-blackwall-title {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.contracts-blackwall-text {
  color: var(--text3);
  font-family: monospace;
  font-size: 11px;
  line-height: 1.55;
}

.contracts-rules-card,
.contract-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--contract-card-border);
  border-radius: 16px;
  background: var(--contract-card-bg);
  box-shadow: var(--contract-card-shadow);
}

.contracts-rules-card { padding: 13px 14px; }

.contracts-rules-card::before,
.contract-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--contract-accent), transparent);
  opacity: 0.86;
}

.contracts-rules-kicker {
  margin-bottom: 7px;
  color: var(--contract-accent);
  font-family: monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.contracts-rules-text {
  color: var(--text2);
  font-family: monospace;
  font-size: 11px;
  line-height: 1.7;
}

.contracts-rule-ok { color: var(--contract-ok); font-weight: 900; }
.contracts-rule-no { color: var(--contract-danger); font-weight: 900; }
.contracts-rule-muted { color: var(--text3); }

.contracts-create-btn {
  width: 100%;
  margin-bottom: 12px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--contract-accent-border);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--contract-accent-soft), rgba(255,255,255,0.025));
  color: var(--contract-accent);
  font-family: monospace;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
}

.contracts-create-btn b {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  color: var(--gold);
  font-size: 10px;
}

.contracts-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid var(--contract-card-border);
  border-radius: 14px;
  background: rgba(0,0,0,0.12);
}

.admin-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #020205;
  animation: adminIntroIn 0.28s ease-out both;
}

.site-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #020205;
  animation: adminIntroIn 0.28s ease-out both;
}

.admin-intro-overlay.closing {
  animation: adminIntroOut 0.42s ease-in both;
}

.site-intro-overlay.closing {
  animation: adminIntroOut 0.42s ease-in both;
}

.admin-intro-video,
.site-intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #020205;
}

.admin-intro-vignette,
.site-intro-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 34%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.26), transparent 24%, rgba(0,0,0,0.42));
}

.admin-intro-overlay.cyberpunk .admin-intro-vignette {
  box-shadow: inset 0 0 90px rgba(232,34,0,0.22), inset 0 0 120px rgba(96,180,212,0.08);
}

.site-intro-overlay.cyberpunk .site-intro-vignette {
  box-shadow:
    inset 0 0 110px rgba(232,34,0,0.26),
    inset 0 0 150px rgba(96,180,212,0.12);
}

.admin-intro-overlay.genshin .admin-intro-vignette {
  box-shadow: inset 0 0 90px rgba(212,175,55,0.22), inset 0 0 120px rgba(110,150,230,0.10);
}

.admin-intro-skip,
.site-intro-skip {
  position: absolute;
  right: max(14px, var(--tg-safe-right));
  bottom: calc(18px + var(--tg-safe-bottom));
  z-index: 2;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(0,0,0,0.36);
  color: rgba(255,255,255,0.78);
  font-family: monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
  backdrop-filter: blur(10px);
}

.admin-intro-caption,
.site-intro-caption {
  position: absolute;
  left: max(14px, var(--tg-safe-left));
  bottom: calc(20px + var(--tg-safe-bottom));
  z-index: 2;
  color: rgba(255,255,255,0.84);
  font-family: monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 18px rgba(255,255,255,0.24);
}

.admin-intro-overlay.cyberpunk .admin-intro-caption {
  color: #8fe9ff;
  text-shadow: 0 0 18px rgba(96,180,212,0.55);
}

.site-intro-overlay.cyberpunk .site-intro-caption {
  color: #8fe9ff;
  text-shadow:
    0 0 18px rgba(96,180,212,0.62),
    0 0 30px rgba(232,34,0,0.26);
}

.admin-intro-overlay.genshin .admin-intro-caption {
  color: #f4d98a;
  text-shadow: 0 0 18px rgba(212,175,55,0.52);
}

@keyframes adminIntroIn {
  from { opacity: 0; filter: brightness(0.7); }
  to { opacity: 1; filter: brightness(1); }
}

@keyframes adminIntroOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.015); }
}

.contracts-tab {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text3);
  font-family: monospace;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.contracts-tab.active {
  border-color: var(--contract-accent-border);
  background: var(--contract-accent-soft);
  color: var(--contract-accent);
}

#ctab-disputed.active {
  border-color: rgba(231,76,60,0.45);
  background: rgba(231,76,60,0.12);
  color: #e74c3c;
}

.contracts-filter-row {
  display: flex;
  gap: 7px;
  margin: 0 -2px 12px;
  padding: 1px 2px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.contracts-filter-row::-webkit-scrollbar { display: none; }

.contracts-filter-chip {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--contract-card-border);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: var(--text3);
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.contracts-filter-chip.active {
  border-color: var(--contract-accent-border);
  background:
    radial-gradient(circle at 20% 0%, var(--contract-accent-soft), transparent 60%),
    rgba(255,255,255,0.055);
  color: var(--contract-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--contract-accent) 20%, transparent);
}

.contract-card { padding: 13px 13px 12px 15px; }

.contract-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.contract-creator-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--contract-accent-soft), rgba(255,255,255,0.04));
  border: 1px solid var(--contract-accent-border);
  color: var(--contract-accent);
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
  margin-top: 1px;
  overflow: hidden;
}

.contract-creator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contract-creator-avatar.has-image {
  background: rgba(255,255,255,0.035);
  color: transparent;
}

.contract-card-titlebox { min-width: 0; flex: 1; }

.contract-card-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  word-break: break-word;
}

.contract-category-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--contract-card-border);
  background: rgba(255,255,255,0.045);
  color: var(--text3);
  font-family: monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.contract-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}

.contract-admin-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(96, 180, 212, 0.58);
  background:
    linear-gradient(90deg, rgba(96,180,212,0.20), rgba(212,175,55,0.12)),
    rgba(5, 18, 28, 0.45);
  color: #8fe9ff;
  font-family: monospace;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 1.1px;
  text-shadow: 0 0 8px rgba(96,180,212,0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.contract-reward {
  flex: 0 0 auto;
  min-width: 60px;
  text-align: right;
  padding: 5px 8px 5px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--contract-card-border);
}

.contract-reward-main {
  color: var(--gold);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
}

.contract-reward-sub {
  margin-top: 3px;
  color: var(--text3);
  font-family: monospace;
  font-size: 9px;
}

.contract-description {
  margin-bottom: 9px;
  color: var(--text2);
  font-size: 11px;
  line-height: 1.5;
}

.contracts-section-label {
  margin: 14px 0 8px;
  padding: 0 2px;
  color: var(--text3);
  font-family: monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: 0.7;
}

.contracts-section-label.dispute {
  color: #e74c3c;
  opacity: 0.92;
}

.contracts-empty {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  padding: 26px 18px;
  border: 1px dashed var(--contract-card-border);
  border-radius: 17px;
  background:
    radial-gradient(circle at 0% 0%, var(--contract-accent-soft), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}

.contracts-empty-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--contract-accent-border);
  border-radius: 12px;
  background: var(--contract-accent-soft);
  color: var(--contract-accent);
  font-family: serif;
  font-size: 18px;
  font-weight: 900;
}

.contracts-empty-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.contracts-empty-hint {
  margin-top: 6px;
  color: var(--text3);
  font-family: monospace;
  font-size: 10px;
  line-height: 1.45;
}

.contract-card.status-open::before { background: linear-gradient(180deg, #e67e22, transparent); }
.contract-card.status-accepted::before { background: linear-gradient(180deg, #3498db, transparent); }
.contract-card.status-completed::before { background: linear-gradient(180deg, #2ecc71, transparent); }
.contract-card.status-disputed::before { background: linear-gradient(180deg, #e74c3c, transparent); }
.contract-card.status-cancelled::before { background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent); }
.contract-card.status-expired::before { background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent); }

.contract-card.status-accepted {
  background: linear-gradient(135deg, rgba(52,152,219,0.06), rgba(255,255,255,0.018));
  border-color: rgba(52,152,219,0.18);
}

.contract-card.status-completed {
  background: linear-gradient(135deg, rgba(46,204,113,0.06), rgba(255,255,255,0.018));
  border-color: rgba(46,204,113,0.18);
}

.contract-card.status-disputed {
  background: linear-gradient(135deg, rgba(231,76,60,0.06), rgba(255,255,255,0.018));
  border-color: rgba(231,76,60,0.18);
}

.contract-card.status-cancelled { opacity: 0.62; }
.contract-card.status-expired { opacity: 0.62; }

.contract-card.admin-contract {
  border-color: rgba(96, 180, 212, 0.42);
  background:
    radial-gradient(circle at 0% 0%, rgba(96,180,212,0.16), transparent 42%),
    radial-gradient(circle at 100% 0%, var(--gold-dim), transparent 38%),
    var(--contract-card-bg);
  box-shadow:
    0 0 0 1px rgba(96,180,212,0.08),
    0 16px 36px rgba(0,0,0,0.24),
    0 0 24px rgba(96,180,212,0.10);
}

.contract-card.admin-contract::before {
  width: 4px;
  background: linear-gradient(180deg, #60b4d4, var(--gold) 72%, transparent);
}

.startup-cover {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: #020205;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.startup-cover.hidden {
  opacity: 0;
}

.contract-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 0;
  padding: 0 2px;
}

.contract-flow-block {
  margin-top: 10px;
}

.contract-flow-block .contract-flow {
  margin: 0;
}

.contract-flow-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
  padding: 0 2px;
  color: var(--text3);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.contract-flow-labels span:nth-child(2) { text-align: center; }
.contract-flow-labels span:nth-child(3) { text-align: right; }

.contract-flow::before {
  content: '';
  position: absolute;
  left: 11%;
  right: 11%;
  top: 50%;
  height: 1px;
  background: var(--contract-card-border);
  transform: translateY(-50%);
}

.contract-flow span {
  position: relative;
  z-index: 1;
  height: 7px;
  border: 1px solid var(--contract-card-border);
  border-radius: 999px;
  background: var(--contract-muted-bg);
}

.contract-flow span.done {
  border-color: var(--contract-accent-border);
  background: linear-gradient(90deg, var(--contract-accent), color-mix(in srgb, var(--contract-accent) 42%, transparent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--contract-accent) 18%, transparent);
}

.contract-flow-accepted span.done { border-color: rgba(52,152,219,0.42); background: linear-gradient(90deg, #3498db, rgba(52,152,219,0.28)); }
.contract-flow-submitted span.done { border-color: rgba(155,89,182,0.42); background: linear-gradient(90deg, #9b59b6, rgba(155,89,182,0.28)); }
.contract-flow-completed span.done { border-color: rgba(46,204,113,0.42); background: linear-gradient(90deg, #2ecc71, rgba(46,204,113,0.26)); }
.contract-flow-disputed span.done { border-color: rgba(231,76,60,0.42); background: linear-gradient(90deg, #e74c3c, rgba(231,76,60,0.25)); }
.contract-flow-cancelled span { opacity: 0.5; }

.contract-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--text3);
  font-family: monospace;
  font-size: 10px;
}

.contract-status {
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  color: var(--contract-status-color);
  font-weight: 900;
  opacity: 0.92;
}

.contract-person { color: var(--text2); }

.contract-status-hint {
  color: var(--text3);
  font-size: 9px;
  opacity: 0.92;
}

.contract-countdown {
  color: #e67e22;
  font-size: 9px;
  opacity: 0.85;
  white-space: nowrap;
}

.contract-privacy-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 10px 11px;
  border: 1px solid var(--contract-card-border);
  border-radius: 12px;
  background: var(--contract-muted-bg);
  cursor: pointer;
}

.contract-privacy-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--contract-accent);
}

.contract-privacy-toggle span {
  display: grid;
  gap: 3px;
}

.contract-privacy-toggle b {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.contract-privacy-toggle small {
  color: var(--text3);
  font-family: monospace;
  font-size: 9px;
  line-height: 1.35;
}

.contract-warning {
  margin-top: 7px;
  color: var(--contract-danger);
  font-family: monospace;
  font-size: 9px;
}

.contract-action-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: transparent;
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.contract-action-btn.accept {
  border: 1px solid rgba(52,152,219,0.42);
  background: rgba(52,152,219,0.13);
  color: #3498db;
}

.contract-action-btn.complete {
  border: 1px solid rgba(46,204,113,0.42);
  background: rgba(46,204,113,0.13);
  color: #2ecc71;
}

.contract-action-btn.dispute {
  margin-top: 6px;
  border: 1px solid rgba(231,76,60,0.34);
  color: #e74c3c;
}

.contract-action-btn.ghost {
  border: 1px solid var(--contract-card-border);
  color: var(--text3);
}

.contract-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.90);
  backdrop-filter: blur(16px);
}

.contract-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--contract-card-border);
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 100% 0%, var(--contract-accent-soft), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, #141421), color-mix(in srgb, var(--bg) 96%, #05050b));
  box-shadow: 0 -18px 58px rgba(0,0,0,0.58);
}

.contract-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.contract-modal-title {
  margin-bottom: 16px;
  color: var(--text);
  font-family: monospace;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
}

.contract-field { margin-bottom: 12px; }

.contract-field label {
  display: block;
  margin-bottom: 5px;
  color: var(--text3);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 1px;
}

.contract-field input,
.contract-field textarea,
.contract-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--contract-card-border);
  border-radius: 11px;
  background: var(--contract-muted-bg);
  color: var(--text);
  font-family: monospace;
  font-size: 12px;
  outline: none;
}

.contract-field textarea { resize: none; }

.contract-reward-field input {
  color: var(--gold);
  font-size: 15px;
  font-weight: 900;
}

.contract-fee-preview {
  margin-top: 5px;
  color: var(--text3);
  font-family: monospace;
  font-size: 10px;
  line-height: 1.4;
}

.contract-create-error {
  margin-bottom: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(231,76,60,0.22);
  border-radius: 10px;
  background: rgba(231,76,60,0.10);
  color: #e74c3c;
  font-family: monospace;
  font-size: 11px;
}

.contract-submit-btn,
.contract-cancel-btn {
  width: 100%;
  border-radius: 12px;
  font-family: monospace;
  cursor: pointer;
}

.contract-submit-btn {
  margin-bottom: 8px;
  padding: 14px;
  border: 1px solid var(--contract-accent-border);
  background: var(--contract-accent-soft);
  color: var(--contract-accent);
  font-size: 13px;
  font-weight: 900;
}

.contract-cancel-btn {
  padding: 11px;
  border: 1px solid var(--contract-card-border);
  background: transparent;
  color: var(--text3);
  font-size: 11px;
}

body.theme-nw-light #page-contracts {
  --contract-accent: #b86d1f;
  --contract-accent-soft: rgba(184, 109, 31, 0.11);
  --contract-accent-border: rgba(184, 109, 31, 0.34);
  --contract-card-bg: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(247,242,231,0.70));
  --contract-card-border: rgba(80, 58, 35, 0.16);
  --contract-card-shadow: 0 12px 26px rgba(70,45,20,0.10);
  --contract-muted-bg: rgba(255,255,255,0.72);
  --contract-danger: #b83f3f;
}

body.theme-genshin-light #page-contracts {
  --contract-accent: #b8863b;
  --contract-accent-soft: rgba(184, 134, 59, 0.13);
  --contract-accent-border: rgba(184, 134, 59, 0.38);
  --contract-card-bg: linear-gradient(135deg, rgba(255,250,238,0.86), rgba(238,230,210,0.72));
  --contract-card-border: rgba(149, 117, 70, 0.22);
  --contract-card-shadow: 0 14px 28px rgba(85,61,28,0.12);
  --contract-muted-bg: rgba(255,255,255,0.72);
  --contract-ok: #4e8f62;
  --contract-danger: #b4564b;
}

body.theme-genshin-dark #page-contracts {
  --contract-accent: #d7b36a;
  --contract-accent-soft: rgba(215, 179, 106, 0.13);
  --contract-accent-border: rgba(215, 179, 106, 0.36);
  --contract-card-bg: linear-gradient(135deg, rgba(41,35,55,0.86), rgba(18,16,26,0.78));
  --contract-card-border: rgba(215, 179, 106, 0.18);
  --contract-card-shadow: 0 16px 30px rgba(0,0,0,0.24);
  --contract-muted-bg: rgba(255,255,255,0.055);
}

body.theme-admin #page-contracts,
body.is-architect #page-contracts {
  --contract-accent: #d4af37;
  --contract-accent-soft: rgba(212,175,55,0.12);
  --contract-accent-border: rgba(212,175,55,0.34);
}

body.theme-nw-light .contracts-tabs,
body.theme-genshin-light .contracts-tabs {
  background: rgba(255,255,255,0.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38);
}

/* Belt-and-braces: force the rules banner itself onto the light card
   look — relying only on the --contract-card-bg variable left this box
   dark/illegible on light themes. */
body.theme-nw-light .contracts-rules-card,
body.theme-genshin-light .contracts-rules-card {
  background: linear-gradient(135deg, rgba(255,250,238,0.92), rgba(238,230,210,0.82)) !important;
  border-color: rgba(149, 117, 70, 0.22) !important;
  box-shadow: 0 14px 28px rgba(85,61,28,0.12) !important;
}

body.theme-nw-light .contracts-rules-text,
body.theme-nw-light .contract-description,
body.theme-genshin-light .contracts-rules-text,
body.theme-genshin-light .contract-description {
  color: #33281d;
}

body.theme-nw-light .contract-card-title,
body.theme-nw-light .contracts-empty-title,
body.theme-genshin-light .contract-card-title,
body.theme-genshin-light .contracts-empty-title {
  color: #181612;
}

body.theme-nw-light .contract-person,
body.theme-nw-light .contract-reward-sub,
body.theme-nw-light .contracts-empty-hint,
body.theme-nw-light .contracts-rule-muted,
body.theme-genshin-light .contract-person,
body.theme-genshin-light .contract-reward-sub,
body.theme-genshin-light .contracts-empty-hint,
body.theme-genshin-light .contracts-rule-muted {
  color: #5d5345;
}

body.theme-nw-light .contracts-filter-chip,
body.theme-nw-light .contract-category-badge,
body.theme-genshin-light .contracts-filter-chip,
body.theme-genshin-light .contract-category-badge {
  background: rgba(255,255,255,0.72);
  color: #504637;
}

body.theme-nw-light .contract-reward,
body.theme-genshin-light .contract-reward {
  background: rgba(255,255,255,0.72);
}

body.theme-nw-light .contract-modal,
body.theme-genshin-light .contract-modal {
  background: rgba(22,18,12,0.66);
}

body.theme-nw-light .contract-modal-sheet,
body.theme-genshin-light .contract-modal-sheet {
  background:
    radial-gradient(circle at 100% 0%, var(--contract-accent-soft), transparent 42%),
    linear-gradient(180deg, rgba(255,252,244,0.98), rgba(246,239,224,0.98));
}

body.theme-nw-light .contract-field input,
body.theme-nw-light .contract-field textarea,
body.theme-nw-light .contract-field select,
body.theme-genshin-light .contract-field input,
body.theme-genshin-light .contract-field textarea,
body.theme-genshin-light .contract-field select {
  background: rgba(255,255,255,0.88);
  color: #16120c;
}

body.theme-nw-light .contract-submit-btn,
body.theme-genshin-light .contract-submit-btn {
  background: color-mix(in srgb, var(--contract-accent) 13%, #fff);
}

body.theme-nw-light .contracts-tab,
body.theme-genshin-light .contracts-tab {
  color: #5d5345;
}

body.theme-nw-light .contracts-tab.active,
body.theme-genshin-light .contracts-tab.active {
  color: var(--contract-accent);
  background: color-mix(in srgb, var(--contract-accent) 14%, #fff);
}

body.theme-nw-light .contracts-filter-chip.active,
body.theme-genshin-light .contracts-filter-chip.active {
  color: var(--contract-accent);
  background: color-mix(in srgb, var(--contract-accent) 12%, #fff);
}

body.theme-nw-light .contract-status,
body.theme-genshin-light .contract-status {
  background: rgba(255,255,255,0.78);
  opacity: 1;
}

body.theme-nw-light .contract-status-hint,
body.theme-genshin-light .contract-status-hint,
body.theme-nw-light .contract-flow-labels,
body.theme-genshin-light .contract-flow-labels,
body.theme-nw-light .contract-privacy-toggle small,
body.theme-genshin-light .contract-privacy-toggle small {
  color: #5d5345;
  opacity: 1;
}

body.theme-nw-light .contract-privacy-toggle,
body.theme-genshin-light .contract-privacy-toggle {
  background: rgba(255,255,255,0.74);
  border-color: rgba(80,58,35,0.16);
}

body.theme-nw-light .contract-privacy-toggle b,
body.theme-genshin-light .contract-privacy-toggle b {
  color: #181612;
}

body.theme-nw-light .contract-flow::before,
body.theme-genshin-light .contract-flow::before {
  background: rgba(80, 58, 35, 0.18);
}

body.theme-nw-light .contract-flow span,
body.theme-genshin-light .contract-flow span {
  background: rgba(255,255,255,0.78);
}

body.theme-nw-light .contract-card.status-accepted,
body.theme-genshin-light .contract-card.status-accepted {
  background: linear-gradient(135deg, rgba(52,152,219,0.13), rgba(255,255,255,0.78));
  border-color: rgba(52,152,219,0.28);
}

body.theme-nw-light .contract-card.status-completed,
body.theme-genshin-light .contract-card.status-completed {
  background: linear-gradient(135deg, rgba(46,204,113,0.13), rgba(255,255,255,0.78));
  border-color: rgba(46,204,113,0.28);
}

body.theme-nw-light .contract-card.status-disputed,
body.theme-genshin-light .contract-card.status-disputed {
  background: linear-gradient(135deg, rgba(231,76,60,0.13), rgba(255,255,255,0.78));
  border-color: rgba(231,76,60,0.30);
}

body.theme-genshin-light .contract-card.admin-contract {
  border-color: rgba(184, 134, 59, 0.42);
  background:
    radial-gradient(circle at 0% 0%, rgba(184,134,59,0.16), transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(184,134,59,0.10), transparent 38%),
    var(--contract-card-bg);
  box-shadow:
    0 0 0 1px rgba(184,134,59,0.10),
    0 14px 30px rgba(85,61,28,0.14),
    0 0 18px rgba(184,134,59,0.10);
}

body.theme-genshin-light .contract-card.admin-contract::before {
  background: linear-gradient(180deg, #b8863b, #8a6820 72%, transparent);
}

body.theme-genshin-light .contract-admin-badge {
  border: 1px solid rgba(184, 134, 59, 0.45);
  background:
    linear-gradient(90deg, rgba(184,134,59,0.18), rgba(184,134,59,0.08)),
    rgba(255,250,238,0.85);
  color: #8a6028;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

body.theme-nw-light .contract-modal-title,
body.theme-genshin-light .contract-modal-title,
body.theme-nw-light .contract-field label,
body.theme-genshin-light .contract-field label {
  color: #241c12;
}

body.theme-nw-light .contract-fee-preview,
body.theme-genshin-light .contract-fee-preview {
  color: #5d5345;
}

body.theme-genshin-light #page-shop .shop-subtabs .subtab,
body.theme-genshin-dark #page-shop .shop-subtabs .subtab {
  min-height: 42px;
  padding: 10px 12px;
  font-size: 11px;
}

body.theme-genshin-light #page-shop .shop-subtabs,
body.theme-genshin-dark #page-shop .shop-subtabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.theme-nw-light .admin-contract-monitor,
body.theme-genshin-light .admin-contract-monitor,
body.theme-nw-light .admin-contract-card,
body.theme-genshin-light .admin-contract-card,
body.theme-nw-light .contract-monitor-panel,
body.theme-genshin-light .contract-monitor-panel,
body.theme-nw-light .contract-monitor-row,
body.theme-genshin-light .contract-monitor-row,
body.theme-nw-light .contract-monitor-stat,
body.theme-genshin-light .contract-monitor-stat {
  color: #1f1a14;
}

body.theme-nw-light .admin-contract-card,
body.theme-genshin-light .admin-contract-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(96,180,212,0.10), transparent 40%),
    rgba(255,255,255,0.76);
  border-color: rgba(80,58,35,0.16);
}

body.theme-nw-light .admin-contract-card.suspicious,
body.theme-genshin-light .admin-contract-card.suspicious {
  background:
    radial-gradient(circle at 0% 0%, rgba(231,76,60,0.10), transparent 42%),
    rgba(255,255,255,0.78);
  border-color: rgba(231,76,60,0.30);
}

body.theme-nw-light .admin-contract-titlebox strong,
body.theme-genshin-light .admin-contract-titlebox strong {
  color: #181612;
}

body.theme-nw-light .admin-contract-meta,
body.theme-genshin-light .admin-contract-meta,
body.theme-nw-light .admin-contract-action.remove,
body.theme-genshin-light .admin-contract-action.remove {
  color: #5d5345;
}

body.theme-nw-light .contract-monitor-row span,
body.theme-genshin-light .contract-monitor-row span,
body.theme-nw-light .contract-monitor-stat span,
body.theme-genshin-light .contract-monitor-stat span,
body.theme-nw-light .contract-monitor-stat em,
body.theme-genshin-light .contract-monitor-stat em,
body.theme-nw-light .contract-monitor-note,
body.theme-genshin-light .contract-monitor-note {
  color: #5d5345;
}

@media (max-width: 380px) {
  .contracts-shell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .contract-card,
  .contracts-rules-card {
    border-radius: 14px;
  }

  .contract-modal-sheet {
    padding: 22px 18px;
  }
}

/* ===== LITE MODE — облегчённый режим для слабых устройств ===== */
body.lite-mode *,
body.lite-mode *::before,
body.lite-mode *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.1s !important;
}
body.lite-mode .profile-holo-ring { display: none; }
body.lite-mode .profile-scan-line { display: none; }
body.lite-mode #matrixRain { display: none; }

/* ===== DEMO MODE ===== */
html.demo-mode,
body.demo-mode {
  --demo-accent: #d4af37;
}

body.demo-mode.theme-genshin-light,
html.demo-mode.theme-genshin-light,
body.demo-mode.theme-genshin-dark,
html.demo-mode.theme-genshin-dark {
  --demo-accent: #caa45d;
}

.demo-mode-banner {
  position: sticky;
  top: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(212,175,55,0.34);
  background:
    linear-gradient(90deg, rgba(180,20,20,0.16), rgba(212,175,55,0.12), rgba(180,20,20,0.16)),
    rgba(5,5,10,0.92);
  color: var(--demo-accent);
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.demo-mode-banner span {
  color: rgba(255,255,255,0.68);
  letter-spacing: 0.6px;
  text-transform: none;
}

body.demo-mode #implants-catalog,
html.demo-mode #implants-catalog,
body.demo-mode #fragment-exchange-implant-block,
html.demo-mode #fragment-exchange-implant-block,
body.demo-mode #fragment-exchange-card-block,
html.demo-mode #fragment-exchange-card-block,
body.demo-mode #casinoPlayContent,
html.demo-mode #casinoPlayContent,
body.demo-mode #casinoInventoryContent,
html.demo-mode #casinoInventoryContent,
body.demo-mode #casinoHistoryContent,
html.demo-mode #casinoHistoryContent,
body.demo-mode #casinoRulesContent,
html.demo-mode #casinoRulesContent,
body.demo-mode #genshinRulesContent,
html.demo-mode #genshinRulesContent,
body.demo-mode #casinoGenshinContent,
html.demo-mode #casinoGenshinContent,
body.demo-mode .casino-subtabs,
html.demo-mode .casino-subtabs,
body.demo-mode #more-team,
html.demo-mode #more-team,
body.demo-mode .profile-showcase-modal,
html.demo-mode .profile-showcase-modal,
body.demo-mode .nav-item[onclick="showPage('casino',this)"],
html.demo-mode .nav-item[onclick="showPage('casino',this)"],
body.demo-mode .more-item[onclick="openMore('team')"],
html.demo-mode .more-item[onclick="openMore('team')"],
body.demo-mode .profile-card-actions .profile-mini-btn,
html.demo-mode .profile-card-actions .profile-mini-btn {
  display: none !important;
}

body.demo-mode #tab-rating-diary-btn,
html.demo-mode #tab-rating-diary-btn,
body.demo-mode #rating-diary-tab,
html.demo-mode #rating-diary-tab {
  display: none !important;
}

.demo-note,
.demo-catalog-lock,
.demo-card {
  margin: 10px 12px;
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(212,175,55,0.10), transparent 44%),
    rgba(255,255,255,0.035);
  color: var(--text2);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

.demo-note {
  padding: 11px 12px;
  color: var(--text3);
  font-family: monospace;
  font-size: 10px;
  line-height: 1.55;
}

.demo-card {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 12px;
}

.demo-card-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 12px;
  background: rgba(212,175,55,0.08);
  color: var(--demo-accent);
  font-family: serif;
  font-size: 18px;
  font-weight: 900;
}

.demo-card-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.demo-card-body {
  margin-top: 3px;
  color: var(--text3);
  font-family: monospace;
  font-size: 10px;
  line-height: 1.45;
}

.demo-catalog-lock {
  padding: 18px 14px;
  text-align: center;
  overflow: hidden;
}

.demo-raid-locked {
  cursor: default !important;
  border-style: dashed !important;
  border-color: rgba(212,175,55,0.34) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.12), transparent 55%),
    rgba(10,10,16,0.72) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,0.20) !important;
}

.demo-lock-kicker {
  color: rgba(212,175,55,0.70);
  font-family: monospace;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
}

.demo-lock-title {
  margin-top: 6px;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.demo-lock-copy {
  margin: 7px auto 0;
  max-width: 320px;
  color: var(--text3);
  font-family: monospace;
  font-size: 10px;
  line-height: 1.55;
}

body.theme-nw-light .demo-mode-banner,
body.theme-genshin-light .demo-mode-banner {
  background:
    linear-gradient(90deg, rgba(184,109,31,0.15), rgba(212,175,55,0.18), rgba(184,109,31,0.15)),
    rgba(255,250,238,0.94);
  color: #6c4a12;
}

body.theme-nw-light .demo-mode-banner span,
body.theme-genshin-light .demo-mode-banner span {
  color: #5d5345;
}

body.theme-nw-light .demo-note,
body.theme-nw-light .demo-catalog-lock,
body.theme-nw-light .demo-card,
body.theme-nw-light .demo-raid-locked,
body.theme-genshin-light .demo-note,
body.theme-genshin-light .demo-catalog-lock,
body.theme-genshin-light .demo-card,
body.theme-genshin-light .demo-raid-locked {
  background:
    radial-gradient(circle at 0% 0%, rgba(184,134,59,0.14), transparent 44%),
    rgba(255,255,255,0.82) !important;
  color: #33281d;
}

body.theme-nw-light .demo-card-title,
body.theme-nw-light .demo-lock-title,
body.theme-genshin-light .demo-card-title,
body.theme-genshin-light .demo-lock-title {
  color: #181612;
}

body.theme-nw-light .demo-card-body,
body.theme-nw-light .demo-lock-copy,
body.theme-genshin-light .demo-card-body,
body.theme-genshin-light .demo-lock-copy {
  color: #5d5345;
}
body.lite-mode .modal-content,
body.lite-mode .modal-header,
body.lite-mode .modal-footer { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lite-mode .leaderboard-modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lite-mode .admin-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lite-mode .event-dialog { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lite-mode .popup-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lite-mode #diaryStarsPopup { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lite-mode .contract-card { animation: none !important; }
body.lite-mode .lb-item { animation: none !important; }
body.lite-mode .inventory-item { box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; }
body.lite-mode .inventory-item::before { display: none; }
body.lite-mode .profile-card::before,
body.lite-mode .profile-card-home::before,
body.lite-mode .profile-card-home::after { display: none; }

/* ===== EVENT CREATE MODAL ===== */
.event-active-bonuses {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: 6px;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  pointer-events: auto;
}
.event-active-bonuses::-webkit-scrollbar {
  display: none;
}
.event-bonus-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.25);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 10px;
  font-family: monospace;
  color: #00ff88;
  white-space: nowrap;
}

.event-info-modal {
  position: absolute;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: flex-end;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
}
.event-info-modal-inner {
  position: relative;
  width: 100%;
  max-height: 78vh;
  overflow-y: auto;
  background: #0a0e14;
  border-top: 1px solid rgba(0,255,136,0.25);
  border-radius: 18px 18px 0 0;
  padding: 24px 18px 32px;
  box-sizing: border-box;
}
.event-info-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  cursor: pointer;
}
.event-info-title {
  font-family: monospace;
  font-size: 15px;
  font-weight: 800;
  color: #00ff88;
  letter-spacing: 2px;
  margin-bottom: 10px;
  padding-right: 30px;
}
.event-info-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(0,229,255,0.85);
  font-family: monospace;
  margin: 16px 0 6px;
}
.event-info-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}
.event-info-text b { color: #fff; }
.event-bonus-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
.event-bonus-table tr {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.event-bonus-table td {
  padding: 6px 4px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.75);
  vertical-align: top;
}
.event-bonus-table td:first-child {
  white-space: nowrap;
  color: #fff;
  font-weight: 700;
  padding-right: 10px;
}

.event-create-modal {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
}
.event-create-modal-inner {
  width: 100%;
  background: #0a0e14;
  border-top: 1px solid rgba(0,255,136,0.25);
  border-radius: 18px 18px 0 0;
  padding: 24px 18px 32px;
}
.event-create-modal-title {
  font-family: monospace;
  font-size: 15px;
  font-weight: 800;
  color: #00ff88;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.event-create-modal-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 16px;
}
.event-create-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.event-create-preset {
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.25);
  border-radius: 20px;
  color: #00ff88;
  font-size: 12px;
  padding: 6px 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.event-create-preset:active { background: rgba(0,255,136,0.2); }
.event-create-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  padding: 11px 14px;
  font-family: inherit;
  outline: none;
  margin-bottom: 16px;
}
.event-create-input:focus { border-color: #00ff88; }
.event-create-input::placeholder { color: rgba(255,255,255,0.3); }
.event-create-actions {
  display: flex;
  gap: 10px;
}
.event-create-cancel {
  flex: 1;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.event-create-confirm {
  flex: 2;
  padding: 12px;
  background: linear-gradient(135deg, rgba(0,255,136,0.18), rgba(0,229,255,0.12));
  border: 1px solid rgba(0,255,136,0.4);
  border-radius: 10px;
  color: #00ff88;
  font-size: 13px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 1px;
  cursor: pointer;
}
.event-create-confirm:active { background: rgba(0,255,136,0.28); }

/* ===== EVENT STANDBY SCREEN ===== */
.event-standby-screen {
  padding: 24px 18px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.event-standby-kicker {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
}
.event-standby-title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 0 24px rgba(200,0,30,0.45);
}
.event-standby-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  line-height: 1.5;
  max-width: 240px;
}
.event-standby-create-btn {
  margin-top: 8px;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, rgba(220,0,40,0.22), rgba(180,0,30,0.12));
  border: 1px solid rgba(220,0,40,0.45);
  border-radius: 12px;
  color: #ff3355;
  font-size: 14px;
  font-weight: 800;
  font-family: monospace;
  letter-spacing: 2px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s;
}
.event-standby-create-btn:active {
  background: rgba(220,0,40,0.35);
}

/* ── Architect finale (WIN / LOSE) ───────────────────────────────── */
.event-finale-mvp {
  position: relative;
  margin: 10px 0 14px;
  padding: 18px 14px 14px;
  text-align: center;
  background: linear-gradient(180deg, rgba(20,16,8,0.92), rgba(8,8,12,0.92));
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 0;
  overflow: hidden;
}
.event-finale-mvp::before,
.event-finale-mvp::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.6), transparent);
}
.event-finale-mvp::before { top: 0; }
.event-finale-mvp::after  { bottom: 0; }
.event-finale-mvp.is-fail {
  background: linear-gradient(180deg, rgba(28,8,8,0.92), rgba(8,8,12,0.92));
  border-color: rgba(220,38,38,0.45);
}
.event-finale-mvp.is-fail::before,
.event-finale-mvp.is-fail::after {
  background: linear-gradient(90deg, transparent, rgba(220,38,38,0.6), transparent);
}

.event-finale-mvp-crown {
  font-size: 26px;
  line-height: 1.25;
  color: var(--gold, #d4af37);
  text-shadow: 0 0 14px rgba(212,175,55,0.5);
  margin-bottom: 4px;
  animation: finaleMvpCrown 2.4s ease-in-out infinite;
}
.event-finale-mvp.is-fail .event-finale-mvp-crown {
  color: #ff6464;
  text-shadow: 0 0 14px rgba(220,38,38,0.55);
}
@keyframes finaleMvpCrown {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50%      { transform: translateY(-2px); filter: brightness(1.25); }
}

.event-finale-mvp-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(212,175,55,0.7);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.event-finale-mvp.is-fail .event-finale-mvp-label { color: rgba(220,38,38,0.7); }

.event-finale-mvp-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.event-finale-mvp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 240px;
  margin: 0 auto;
}
.event-finale-mvp-stat {
  padding: 8px 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.35);
}
.event-finale-mvp-stat span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold, #d4af37);
}
.event-finale-mvp.is-fail .event-finale-mvp-stat span { color: #ff8a8a; }
.event-finale-mvp-stat label {
  display: block;
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}

.event-finale-board-label {
  margin: 8px 0 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

.event-finale-board {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-finale-row {
  padding: 7px 8px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid rgba(255,255,255,0.1);
}
.event-finale-row.is-mvp {
  background: rgba(212,175,55,0.07);
  border-left-color: var(--gold, #d4af37);
}
.event-finale-row-empty {
  opacity: 0.55;
}

.event-finale-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.event-finale-row-place {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  min-width: 22px;
}
.event-finale-row.is-mvp .event-finale-row-place { color: var(--gold, #d4af37); }
.event-finale-row-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-finale-row-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold, #d4af37);
}
.event-finale-row-stat small {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
  margin-left: 2px;
}

.event-finale-row-bar {
  height: 3px;
  margin-top: 5px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.event-finale-row-bar > div {
  height: 100%;
  width: 0;
  background: rgba(255,255,255,0.3);
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.event-finale-row.is-mvp .event-finale-row-bar > div {
  background: linear-gradient(90deg, #ffd700, #ff8c00);
  box-shadow: 0 0 8px rgba(212,175,55,0.35);
}

.event-finale-row-sub {
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(120,200,255,0.7);
}

.event-finale-empty {
  margin: 10px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  text-align: center;
}

/* Bigger verdict at top of result card */
.event-result-card .event-result-verdict {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 4px !important;
  text-align: center !important;
  padding: 8px 0 6px !important;
}
.event-result-card.event-result-win .event-result-verdict {
  color: var(--gold, #d4af37) !important;
  text-shadow: 0 0 18px rgba(212,175,55,0.55), 0 0 2px rgba(255,255,255,0.4) !important;
  animation: finaleVerdictPulse 2.2s ease-in-out infinite;
}
.event-result-card.event-result-lose .event-result-verdict {
  color: #ff5555 !important;
  text-shadow: 0 0 18px rgba(220,38,38,0.55), 0 0 2px rgba(255,255,255,0.4) !important;
  animation: finaleVerdictPulse 2.2s ease-in-out infinite;
}
@keyframes finaleVerdictPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}

/* Campus map */
.campus-map-root {
  padding: 0 12px 16px;
}

.campus-map-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 212, 255, 0.16), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(204, 34, 0, 0.18), transparent 32%),
    rgba(5, 8, 14, 0.88);
  box-shadow: 0 18px 50px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(255,255,255,0.03);
}

.campus-map-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,255,136,0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,255,136,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
}

.campus-map-head,
.campus-map-search,
.campus-map-filters,
.campus-map-list {
  position: relative;
  z-index: 2;
}

.campus-map-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 8px;
}

.campus-map-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.campus-map-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(0, 212, 255, 0.86);
}

.campus-map-title {
  margin-top: 3px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text);
  white-space: nowrap;
}

body.theme-genshin-light .campus-map-title,
body.theme-genshin-dark .campus-map-title {
  font-family: 'Noto Serif SC', Georgia, serif;
  letter-spacing: 2px;
}

.campus-map-mode {
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(0, 212, 255, 0.08);
  color: rgba(0, 212, 255, 0.95);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
}

.campus-map-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 14px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 13px;
  background: rgba(0,0,0,0.22);
}

.campus-map-search i {
  color: rgba(0, 212, 255, 0.75);
}

.campus-map-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
}

.campus-map-search input::placeholder {
  color: var(--text3);
}

.campus-map-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 14px 12px;
  scrollbar-width: none;
}

.campus-map-filters::-webkit-scrollbar {
  display: none;
}

.campus-map-filters button {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.04);
  color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
}

.campus-map-filters button.active {
  border-color: rgba(0, 212, 255, 0.55);
  background: rgba(0, 212, 255, 0.14);
  color: #8ff4ff;
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.18);
}

/* Category filter chips match their map-pin colour:
   study #00d4ff, food #d4af37, dorm #e887ff, sport #42e88f,
   important #ff3b3b, meeting #ffffff. Resting state is a muted tint,
   active state lights up like the pin on the map. */
.campus-map-filters button.cat-study   { color: rgba(143, 244, 255, 0.78); border-color: rgba(0, 212, 255, 0.22); }
.campus-map-filters button.cat-food    { color: rgba(232, 200, 110, 0.82); border-color: rgba(212, 175, 55, 0.24); }
.campus-map-filters button.cat-dorm    { color: rgba(232, 170, 255, 0.82); border-color: rgba(232, 135, 255, 0.24); }
.campus-map-filters button.cat-sport   { color: rgba(120, 240, 175, 0.82); border-color: rgba(66, 232, 143, 0.24); }
.campus-map-filters button.cat-important{ color: rgba(255, 130, 130, 0.85); border-color: rgba(255, 59, 59, 0.26); }
.campus-map-filters button.cat-meeting { color: rgba(235, 235, 235, 0.85); border-color: rgba(255, 255, 255, 0.22); }

.campus-map-filters button.cat-study.active {
  border-color: rgba(0, 212, 255, 0.55); background: rgba(0, 212, 255, 0.14);
  color: #8ff4ff; box-shadow: 0 0 18px rgba(0, 212, 255, 0.20);
}
.campus-map-filters button.cat-food.active {
  border-color: rgba(212, 175, 55, 0.60); background: rgba(212, 175, 55, 0.15);
  color: #ffdf8a; box-shadow: 0 0 18px rgba(212, 175, 55, 0.22);
}
.campus-map-filters button.cat-dorm.active {
  border-color: rgba(232, 135, 255, 0.60); background: rgba(232, 135, 255, 0.15);
  color: #f3c2ff; box-shadow: 0 0 18px rgba(232, 135, 255, 0.22);
}
.campus-map-filters button.cat-sport.active {
  border-color: rgba(66, 232, 143, 0.60); background: rgba(66, 232, 143, 0.15);
  color: #9bffce; box-shadow: 0 0 18px rgba(66, 232, 143, 0.22);
}
.campus-map-filters button.cat-important.active {
  border-color: rgba(255, 59, 59, 0.62); background: rgba(255, 59, 59, 0.15);
  color: #ff9b9b; box-shadow: 0 0 18px rgba(255, 59, 59, 0.24);
}
.campus-map-filters button.cat-meeting.active {
  border-color: rgba(255, 255, 255, 0.60); background: rgba(255, 255, 255, 0.16);
  color: #ffffff; box-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
}

.campus-map-mode.active {
  border-color: rgba(0, 212, 255, 0.6);
  background: rgba(0, 212, 255, 0.16);
  color: #8ff4ff;
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.2);
}

.campus-map-route-bar {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  margin: 0 14px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-radius: 13px;
  background: rgba(0, 212, 255, 0.06);
}

.campus-map-route-points {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.campus-map-route-chip {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
}

.campus-map-route-chip.set {
  border-color: rgba(0, 212, 255, 0.4);
  color: #8ff4ff;
  background: rgba(0, 212, 255, 0.08);
}

.campus-map-route-arrow {
  color: var(--text3);
  font-size: 11px;
}

.campus-map-route-estimate {
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.campus-map-route-estimate.hint {
  color: var(--text3);
  font-size: 9px;
}

.campus-map-route-clear {
  justify-self: start;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.campus-map-route-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.campus-map-route-line line {
  stroke: rgba(0, 212, 255, 0.85);
  stroke-width: 0.4;
  stroke-dasharray: 1.6 1.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.6));
}

.campus-map-pin.route-from span,
.campus-map-pin.route-to span {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 22px rgba(0, 212, 255, 0.95);
}

.campus-map-pin.route-from span { background: #00ffaa; }
.campus-map-pin.route-to span { background: #ff8a00; }

.campus-map-row.route-from,
.campus-map-row.route-to {
  border-color: rgba(0, 212, 255, 0.4);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.14);
}

.campus-map-row-fav {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(255,255,255,0.22);
  font-size: 14px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.campus-map-row-fav.on {
  color: #ffd24a;
  text-shadow: 0 0 10px rgba(255, 210, 74, 0.7);
}

.campus-map-row-fav:active {
  transform: scale(0.85);
}

.campus-map-popup-fav {
  position: absolute;
  top: 10px;
  right: 50px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.3);
  font-size: 16px;
}

.campus-map-popup-fav.on {
  color: #ffd24a;
  border-color: rgba(255, 210, 74, 0.4);
  background: rgba(255, 210, 74, 0.1);
  text-shadow: 0 0 10px rgba(255, 210, 74, 0.7);
}

.campus-map-editor {
  position: relative;
  z-index: 2;
  margin: 0 14px 12px;
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 14px;
  background: rgba(0, 10, 16, 0.62);
  overflow: hidden;
}

.campus-map-editor.active {
  border-color: rgba(0, 212, 255, 0.46);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.12);
}

.campus-map-editor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
}

.campus-map-editor-top b {
  display: block;
  color: #8ff4ff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.campus-map-editor-top small {
  display: block;
  margin-top: 3px;
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
}

.campus-map-editor-top button,
.campus-map-editor-actions button {
  border: 1px solid rgba(0, 212, 255, 0.32);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(0, 212, 255, 0.08);
  color: #8ff4ff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.campus-map-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 11px 10px;
}

.campus-map-editor label {
  display: grid;
  gap: 4px;
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.campus-map-editor input,
.campus-map-editor select,
.campus-map-editor textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(0,0,0,0.24);
  color: var(--text);
  font-size: 11px;
  outline: 0;
}

.campus-map-editor-description {
  padding: 0 11px 10px;
}

.campus-map-editor textarea {
  resize: vertical;
  min-height: 48px;
}

.campus-map-editor-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 0 11px 11px;
}

.campus-map-scroll {
  position: relative;
  z-index: 1;
  overflow: auto;
  margin: 0 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.24);
  -webkit-overflow-scrolling: touch;
}

.campus-map-stage {
  position: relative;
  width: 980px;
  max-width: none;
}

.campus-map-stage.editing {
  cursor: crosshair;
}

.campus-map-stage img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.campus-map-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.campus-map-pin span {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #00d4ff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 18px rgba(0,212,255,0.8);
}

.campus-map-pin::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(0, 212, 255, 0.7);
  border-radius: 50%;
  animation: campusPinPulse 2s ease-out infinite;
}

.campus-map-pin.selected span {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.campus-map-pin em {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translate(calc(-50% + var(--label-dx, 0px)), var(--label-dy, 0px));
  min-width: max-content;
  max-width: 104px;
  padding: 3px 6px;
  border: 1px solid rgba(0, 212, 255, 0.38);
  border-radius: 999px;
  background: rgba(3, 8, 14, 0.86);
  box-shadow: 0 8px 18px rgba(0,0,0,0.45), 0 0 16px rgba(0, 212, 255, 0.18);
  color: #e8fdff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.campus-map-pin.label-up em {
  top: auto;
  bottom: 22px;
  transform: translate(calc(-50% + var(--label-dx, 0px)), var(--label-dy, 0px));
}

.campus-map-pin.label-left em {
  left: auto;
  right: 22px;
  top: 50%;
  transform: translate(var(--label-dx, 0px), calc(-50% + var(--label-dy, 0px)));
}

.campus-map-pin.label-right em {
  left: 22px;
  top: 50%;
  transform: translate(var(--label-dx, 0px), calc(-50% + var(--label-dy, 0px)));
}

.campus-map-pin.food span { background: #d4af37; box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 18px rgba(212,175,55,0.8); }
.campus-map-pin.dorm span { background: #e887ff; box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 18px rgba(232,135,255,0.75); }
.campus-map-pin.sport span { background: #42e88f; box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 18px rgba(66,232,143,0.75); }
.campus-map-pin.important span { background: #ff3b3b; box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 18px rgba(255,59,59,0.8); }
.campus-map-pin.meeting span { background: #ffffff; box-shadow: 0 0 0 2px rgba(0,0,0,0.7), 0 0 20px rgba(255,255,255,0.8); }

.campus-map-pin.food em { border-color: rgba(212,175,55,0.5); box-shadow: 0 8px 18px rgba(0,0,0,0.45), 0 0 16px rgba(212,175,55,0.2); }
.campus-map-pin.dorm em { border-color: rgba(232,135,255,0.5); box-shadow: 0 8px 18px rgba(0,0,0,0.45), 0 0 16px rgba(232,135,255,0.18); }
.campus-map-pin.sport em { border-color: rgba(66,232,143,0.5); box-shadow: 0 8px 18px rgba(0,0,0,0.45), 0 0 16px rgba(66,232,143,0.18); }
.campus-map-pin.important em { border-color: rgba(255,59,59,0.5); box-shadow: 0 8px 18px rgba(0,0,0,0.45), 0 0 16px rgba(255,59,59,0.2); }
.campus-map-pin.meeting em { border-color: rgba(255,255,255,0.5); box-shadow: 0 8px 18px rgba(0,0,0,0.45), 0 0 16px rgba(255,255,255,0.18); }

body.theme-genshin-light .campus-map-pin em,
body.theme-genshin-dark .campus-map-pin em,
body.theme-genshin .campus-map-pin em {
  border-color: rgba(154, 110, 39, 0.45);
  background: rgba(255, 247, 226, 0.92);
  box-shadow: 0 8px 16px rgba(88, 56, 16, 0.22);
  color: #624018;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 0.02em;
}

body.theme-nw-light .campus-map-pin em {
  border-color: rgba(21, 82, 116, 0.24);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 16px rgba(25, 40, 56, 0.18);
  color: #143044;
}

@keyframes campusPinPulse {
  0% { opacity: 0.7; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.9); }
}

.campus-map-list {
  display: grid;
  gap: 7px;
  padding: 12px 14px 14px;
}

.campus-map-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 13px;
  padding: 10px;
  background: rgba(255,255,255,0.035);
  color: var(--text);
}

.campus-map-row b {
  display: block;
  font-size: 12px;
}

.campus-map-row small {
  display: block;
  margin-top: 3px;
  color: var(--text3);
  font-size: 9px;
  line-height: 1.35;
}

.campus-map-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00d4ff;
  box-shadow: 0 0 12px rgba(0,212,255,0.7);
}

.campus-map-row.food .campus-map-row-dot { background: #d4af37; box-shadow: 0 0 12px rgba(212,175,55,0.7); }
.campus-map-row.dorm .campus-map-row-dot { background: #e887ff; box-shadow: 0 0 12px rgba(232,135,255,0.7); }
.campus-map-row.sport .campus-map-row-dot { background: #42e88f; box-shadow: 0 0 12px rgba(66,232,143,0.7); }
.campus-map-row.important .campus-map-row-dot { background: #ff3b3b; box-shadow: 0 0 12px rgba(255,59,59,0.7); }
.campus-map-row.meeting .campus-map-row-dot { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.7); }

.campus-map-empty {
  padding: 14px;
  color: var(--text3);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}

.campus-map-popup {
  position: fixed;
  inset: 0;
  z-index: 9200;
}

.campus-map-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}

.campus-map-popup-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(420px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 42px));
  overflow-y: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 212, 255, 0.28);
  border-radius: 18px;
  padding: 18px;
  background: rgba(8, 12, 20, 0.96);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

.campus-map-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: var(--text2);
  font-size: 20px;
}

.campus-map-popup-category {
  margin-bottom: 6px;
  color: rgba(0, 212, 255, 0.85);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.campus-map-popup-card h3 {
  margin: 0;
  padding-right: 34px;
  color: var(--text);
  font-size: 18px;
}

.campus-map-popup-cn {
  margin-top: 5px;
  color: var(--gold);
  font-size: 11px;
}

.campus-map-popup-card p {
  margin: 12px 0 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.55;
}

.campus-map-popup-note {
  margin-top: 12px;
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 12px;
  padding: 10px;
  background: rgba(212,175,55,0.08);
  color: var(--gold);
  font-size: 11px;
  line-height: 1.45;
}

body.theme-genshin-light .campus-map-panel,
body.theme-genshin-dark .campus-map-panel {
  border-color: rgba(219,177,101,0.35);
  background:
    radial-gradient(circle at 20% 0%, rgba(219,177,101,0.22), transparent 36%),
    radial-gradient(circle at 100% 20%, rgba(75,83,102,0.18), transparent 34%),
    var(--bg2);
}

body.theme-genshin-light .campus-map-kicker,
body.theme-genshin-dark .campus-map-kicker,
body.theme-genshin-light .campus-map-popup-category,
body.theme-genshin-dark .campus-map-popup-category {
  color: var(--gold);
  font-family: Georgia, serif;
}

body.theme-genshin-light .campus-map-mode,
body.theme-genshin-dark .campus-map-mode,
body.theme-genshin-light .campus-map-filters button.active,
body.theme-genshin-dark .campus-map-filters button.active {
  border-color: rgba(219,177,101,0.45);
  background: rgba(219,177,101,0.14);
  color: var(--gold);
}

/* ===== CAMPUS MAP — LIGHT THEME ADAPTATION ===== */

body.theme-nw-light .campus-map-panel {
  border-color: rgba(21, 82, 116, 0.2);
  background:
    radial-gradient(circle at 18% 0%, rgba(21, 82, 116, 0.08), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(153, 51, 51, 0.07), transparent 32%),
    var(--bg2);
}

body.theme-nw-light .campus-map-panel::before {
  background:
    linear-gradient(90deg, rgba(21, 82, 116, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(21, 82, 116, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.4;
}

body.theme-nw-light .campus-map-kicker {
  color: rgba(21, 82, 116, 0.78);
}

body.theme-nw-light .campus-map-mode,
body.theme-nw-light .campus-map-filters button.active {
  border-color: rgba(21, 82, 116, 0.35);
  background: rgba(21, 82, 116, 0.1);
  color: #15526a;
}

body.theme-nw-light .campus-map-search {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

body.theme-nw-light .campus-map-search i {
  color: rgba(21, 82, 116, 0.7);
}

body.theme-nw-light .campus-map-filters button {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text2);
}

body.theme-nw-light .campus-map-scroll {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-nw-light .campus-map-row {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-nw-light .campus-map-popup-card {
  border-color: rgba(21, 82, 116, 0.28);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 60px rgba(25, 40, 56, 0.22);
}

body.theme-nw-light .campus-map-popup-backdrop {
  background: rgba(20, 30, 40, 0.35);
}

body.theme-nw-light .campus-map-popup-close {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
}

body.theme-nw-light .campus-map-popup-category {
  color: #15526a;
}

body.theme-nw-light .campus-map-mode.active {
  border-color: rgba(21, 82, 116, 0.55);
  background: rgba(21, 82, 116, 0.16);
  color: #15526a;
  box-shadow: 0 0 14px rgba(21, 82, 116, 0.16);
}

body.theme-nw-light .campus-map-route-bar {
  border-color: rgba(21, 82, 116, 0.22);
  background: rgba(21, 82, 116, 0.06);
}

body.theme-nw-light .campus-map-route-chip {
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text2);
}

body.theme-nw-light .campus-map-route-chip.set {
  border-color: rgba(21, 82, 116, 0.4);
  color: #15526a;
  background: rgba(21, 82, 116, 0.1);
}

body.theme-nw-light .campus-map-route-clear {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  color: var(--text2);
}

body.theme-nw-light .campus-map-route-line line {
  stroke: rgba(21, 82, 116, 0.8);
  filter: drop-shadow(0 0 3px rgba(21, 82, 116, 0.45));
}

body.theme-nw-light .campus-map-row-fav {
  color: rgba(0, 0, 0, 0.18);
}

body.theme-nw-light .campus-map-popup-fav {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.25);
}

body.theme-genshin-light .campus-map-search,
body.theme-genshin-dark .campus-map-search {
  background: rgba(219,177,101,0.08);
  border-color: rgba(219,177,101,0.22);
}

body.theme-genshin-light .campus-map-search i,
body.theme-genshin-dark .campus-map-search i {
  color: var(--gold);
}

body.theme-genshin-light .campus-map-filters button,
body.theme-genshin-dark .campus-map-filters button {
  background: rgba(219,177,101,0.08);
  border-color: rgba(219,177,101,0.18);
  color: var(--text2);
}

body.theme-genshin-light .campus-map-scroll,
body.theme-genshin-dark .campus-map-scroll {
  background: rgba(219,177,101,0.05);
  border-color: rgba(219,177,101,0.18);
}

body.theme-genshin-light .campus-map-row,
body.theme-genshin-dark .campus-map-row {
  background: rgba(219,177,101,0.06);
  border-color: rgba(219,177,101,0.16);
}

body.theme-genshin-light .campus-map-popup-card {
  border-color: rgba(219,177,101,0.32);
  background: rgba(252,247,236,0.98);
  box-shadow: 0 20px 60px rgba(88, 56, 16, 0.22);
}
body.theme-genshin-dark .campus-map-popup-card {
  border-color: rgba(219,177,101,0.32);
  background: rgba(26,22,40,0.98);
  box-shadow: 0 20px 60px rgba(88, 56, 16, 0.22);
}

body.theme-genshin-light .campus-map-popup-close,
body.theme-genshin-dark .campus-map-popup-close {
  border-color: rgba(219,177,101,0.3);
  background: rgba(219,177,101,0.12);
}

body.theme-genshin-light .campus-map-route-bar,
body.theme-genshin-dark .campus-map-route-bar {
  border-color: rgba(219,177,101,0.25);
  background: rgba(219,177,101,0.08);
}

body.theme-genshin-light .campus-map-route-chip,
body.theme-genshin-dark .campus-map-route-chip {
  border-color: rgba(219,177,101,0.2);
  color: var(--text2);
}

body.theme-genshin-light .campus-map-route-chip.set,
body.theme-genshin-dark .campus-map-route-chip.set {
  border-color: rgba(219,177,101,0.45);
  color: var(--gold);
  background: rgba(219,177,101,0.14);
}

body.theme-genshin-light .campus-map-route-clear,
body.theme-genshin-dark .campus-map-route-clear {
  border-color: rgba(219,177,101,0.25);
  background: rgba(219,177,101,0.1);
  color: var(--text2);
}

body.theme-genshin-light .campus-map-route-line line,
body.theme-genshin-dark .campus-map-route-line line {
  stroke: rgba(154, 110, 39, 0.7);
  filter: drop-shadow(0 0 3px rgba(154, 110, 39, 0.4));
}

body.theme-genshin-light .campus-map-row-fav,
body.theme-genshin-dark .campus-map-row-fav {
  color: rgba(154, 110, 39, 0.25);
}

body.theme-genshin-light .campus-map-popup-fav,
body.theme-genshin-dark .campus-map-popup-fav {
  border-color: rgba(219,177,101,0.25);
  background: rgba(219,177,101,0.1);
  color: rgba(154, 110, 39, 0.4);
}

body.theme-nw-light .campus-map-editor {
  border-color: rgba(21, 82, 116, 0.22);
  background: rgba(21, 82, 116, 0.05);
}

body.theme-nw-light .campus-map-editor.active {
  border-color: rgba(21, 82, 116, 0.5);
  box-shadow: 0 0 24px rgba(21, 82, 116, 0.14);
}

body.theme-nw-light .campus-map-editor-top b {
  color: #15526a;
}

body.theme-nw-light .campus-map-editor-top button,
body.theme-nw-light .campus-map-editor-actions button {
  border-color: rgba(21, 82, 116, 0.35);
  background: rgba(21, 82, 116, 0.1);
  color: #15526a;
}

body.theme-nw-light .campus-map-editor input,
body.theme-nw-light .campus-map-editor select,
body.theme-nw-light .campus-map-editor textarea {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.7);
}

body.theme-genshin-light .campus-map-editor,
body.theme-genshin-dark .campus-map-editor {
  border-color: rgba(219,177,101,0.25);
  background: rgba(219,177,101,0.06);
}

body.theme-genshin-light .campus-map-editor.active,
body.theme-genshin-dark .campus-map-editor.active {
  border-color: rgba(219,177,101,0.5);
  box-shadow: 0 0 24px rgba(219,177,101,0.16);
}

body.theme-genshin-light .campus-map-editor-top b,
body.theme-genshin-dark .campus-map-editor-top b,
body.theme-genshin-light .campus-map-editor-top button,
body.theme-genshin-dark .campus-map-editor-top button,
body.theme-genshin-light .campus-map-editor-actions button,
body.theme-genshin-dark .campus-map-editor-actions button {
  color: var(--gold);
  border-color: rgba(219,177,101,0.35);
  background: rgba(219,177,101,0.1);
}

body.theme-genshin-light .campus-map-editor input,
body.theme-genshin-dark .campus-map-editor input,
body.theme-genshin-light .campus-map-editor select,
body.theme-genshin-dark .campus-map-editor select,
body.theme-genshin-light .campus-map-editor textarea,
body.theme-genshin-dark .campus-map-editor textarea {
  border-color: rgba(219,177,101,0.22);
  background: var(--bg3);
}

/* ===== CAMPUS MAP — ADMIN LIGHT THEME ===== */

body.theme-admin-light .campus-map-panel {
  border-color: rgba(68, 86, 224, 0.2);
  background:
    radial-gradient(circle at 18% 0%, rgba(68, 86, 224, 0.07), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(0, 153, 204, 0.06), transparent 32%),
    var(--bg2);
}

body.theme-admin-light .campus-map-panel::before {
  background:
    linear-gradient(90deg, rgba(68, 86, 224, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(68, 86, 224, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.4;
}

body.theme-admin-light .campus-map-kicker {
  color: rgba(68, 86, 224, 0.78);
}

body.theme-admin-light .campus-map-mode,
body.theme-admin-light .campus-map-filters button.active {
  border-color: rgba(68, 86, 224, 0.35);
  background: rgba(68, 86, 224, 0.1);
  color: #4456e0;
}

body.theme-admin-light .campus-map-search {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

body.theme-admin-light .campus-map-search i {
  color: rgba(68, 86, 224, 0.7);
}

body.theme-admin-light .campus-map-search input {
  color: var(--text);
}

body.theme-admin-light .campus-map-search input::placeholder {
  color: var(--text3);
}

body.theme-admin-light .campus-map-filters button {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text2);
}

body.theme-admin-light .campus-map-scroll {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-admin-light .campus-map-row {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-admin-light .campus-map-popup-card {
  border-color: rgba(68, 86, 224, 0.28);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 60px rgba(30, 40, 80, 0.22);
}

body.theme-admin-light .campus-map-popup-backdrop {
  background: rgba(20, 25, 60, 0.35);
}

body.theme-admin-light .campus-map-popup-close {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
}

body.theme-admin-light .campus-map-popup-category {
  color: #4456e0;
}

body.theme-admin-light .campus-map-mode.active {
  border-color: rgba(68, 86, 224, 0.55);
  background: rgba(68, 86, 224, 0.16);
  color: #4456e0;
  box-shadow: 0 0 14px rgba(68, 86, 224, 0.16);
}

body.theme-admin-light .campus-map-route-bar {
  border-color: rgba(68, 86, 224, 0.22);
  background: rgba(68, 86, 224, 0.06);
}

body.theme-admin-light .campus-map-route-chip {
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text2);
}

body.theme-admin-light .campus-map-route-chip.set {
  border-color: rgba(68, 86, 224, 0.4);
  color: #4456e0;
  background: rgba(68, 86, 224, 0.1);
}

body.theme-admin-light .campus-map-route-clear {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  color: var(--text2);
}

body.theme-admin-light .campus-map-route-line line {
  stroke: rgba(68, 86, 224, 0.8);
  filter: drop-shadow(0 0 3px rgba(68, 86, 224, 0.45));
}

body.theme-admin-light .campus-map-row-fav {
  color: rgba(0, 0, 0, 0.18);
}

body.theme-admin-light .campus-map-popup-fav {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.25);
}

body.theme-admin-light .campus-map-editor {
  border-color: rgba(68, 86, 224, 0.22);
  background: rgba(68, 86, 224, 0.05);
}

body.theme-admin-light .campus-map-editor.active {
  border-color: rgba(68, 86, 224, 0.5);
  box-shadow: 0 0 24px rgba(68, 86, 224, 0.14);
}

body.theme-admin-light .campus-map-editor-top b {
  color: #4456e0;
}

body.theme-admin-light .campus-map-editor-top button,
body.theme-admin-light .campus-map-editor-actions button {
  border-color: rgba(68, 86, 224, 0.35);
  background: rgba(68, 86, 224, 0.1);
  color: #4456e0;
}

body.theme-admin-light .campus-map-editor input,
body.theme-admin-light .campus-map-editor select,
body.theme-admin-light .campus-map-editor textarea {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.7);
}

/* ===== CASINO + HOME EVENT CARD — ADMIN LIGHT THEME ===== */

body.theme-admin-light .casino-balance,
body.theme-admin-light .prize-result {
  background: rgba(255,255,255,0.78);
  border-color: rgba(68,86,224,0.16);
  box-shadow: 0 8px 24px rgba(40,50,120,0.06);
}

body.theme-admin-light .case-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(232,235,248,0.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 8px 18px rgba(40,50,120,0.045);
}

body.theme-admin-light .case-card.gold {
  border-color: rgba(0,153,204,0.28);
}

body.theme-admin-light .case-card.purple {
  border-color: rgba(120,76,140,0.24);
}

body.theme-admin-light .case-card.black {
  border-color: rgba(68,86,224,0.26);
}

body.theme-admin-light .case-cn.g { color: rgba(0,120,160,0.78); }
body.theme-admin-light .case-cn.p { color: rgba(110,70,132,0.72); }
body.theme-admin-light .case-cn.b { color: rgba(68,86,224,0.72); }

body.theme-admin-light .roulette-track {
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(230,233,246,0.84));
  border-color: rgba(68,86,224,0.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 10px 28px rgba(40,50,120,0.08);
}

body.theme-admin-light .roulette-track::before {
  background: linear-gradient(to right, rgba(238,240,250,0.98), rgba(238,240,250,0));
}

body.theme-admin-light .roulette-track::after {
  background: linear-gradient(to left, rgba(238,240,250,0.98), rgba(238,240,250,0));
}

body.theme-admin-light .roulette-item {
  background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(228,231,244,0.92));
  border-color: rgba(68,86,224,0.14);
  color: #1a1f40;
}

body.theme-admin-light .roulette-item-gold {
  border-color: rgba(0,153,204,0.26);
  background:
    radial-gradient(circle at 50% 10%, rgba(0,153,204,0.14), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(228,231,244,0.92));
}

body.theme-admin-light .roulette-item-purple {
  border-color: rgba(120,76,140,0.28);
  background:
    radial-gradient(circle at 50% 10%, rgba(155,89,182,0.16), transparent 50%),
    linear-gradient(145deg, rgba(250,246,255,0.94), rgba(230,222,238,0.92));
}

body.theme-admin-light .roulette-item-black {
  border-color: rgba(68,86,224,0.32);
  background:
    radial-gradient(circle at 50% 10%, rgba(68,86,224,0.14), transparent 52%),
    linear-gradient(145deg, rgba(246,247,255,0.92), rgba(222,226,242,0.9));
}

body.theme-admin-light .roulette-item-name {
  color: #3a4070;
}

body.theme-admin-light .roulette-case-label {
  color: rgba(40,46,90,0.55);
}

body.theme-admin-light .roulette-item.opened {
  background: linear-gradient(145deg, rgba(240,248,255,0.96), rgba(208,228,248,0.92));
}

body.theme-admin-light .home-event-card {
  border-color: rgba(68,86,224,0.24) !important;
  background:
    linear-gradient(135deg, rgba(68,86,224,0.08), rgba(255,255,255,0.78)),
    rgba(255,255,255,0.74) !important;
  box-shadow: 0 10px 26px rgba(40,50,120,0.08) !important;
}

body.theme-admin-light .home-event-card-kicker {
  color: rgba(0,120,160,0.85) !important;
}

body.theme-admin-light .home-event-card-title {
  color: #1a1f40 !important;
}

body.theme-admin-light .home-event-card-copy {
  color: #3a4070 !important;
}

/* ===== TEAM CARDS — GENSHIN LIGHT + ADMIN LIGHT ===== */

body.theme-genshin-light .team-card-item { background: rgba(255,250,238,0.8); }
body.theme-genshin-light .team-card-avatar { background: rgba(219,177,101,0.1); }
body.theme-genshin-light .team-card-name  { color: #3d4555; }
body.theme-genshin-light .team-card-desc  { color: #565e6e; }
body.theme-genshin-light .team-card-status-badge { background: rgba(219,177,101,0.14); color: #6b6050; }
body.theme-genshin-light .team-card-btn   { background: rgba(219,177,101,0.08); }

body.theme-admin-light .team-card-item { background: rgba(255,255,255,0.78); }
body.theme-admin-light .team-card-avatar { background: rgba(68,86,224,0.06); }
body.theme-admin-light .team-card-name  { color: #1a1f40; }
body.theme-admin-light .team-card-desc  { color: #3a4070; }
body.theme-admin-light .team-card-status-badge { background: rgba(68,86,224,0.08); color: #5a62a0; }
body.theme-admin-light .team-card-btn   { background: rgba(68,86,224,0.05); }

/* ===== CONTRACTS — ADMIN LIGHT THEME ===== */

body.theme-admin-light #page-contracts {
  --contract-accent: #4456e0;
  --contract-accent-soft: rgba(68, 86, 224, 0.1);
  --contract-accent-border: rgba(68, 86, 224, 0.32);
  --contract-card-bg: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(235,238,250,0.7));
  --contract-card-border: rgba(50, 60, 130, 0.16);
  --contract-card-shadow: 0 12px 26px rgba(40,50,120,0.1);
  --contract-muted-bg: rgba(255,255,255,0.72);
  --contract-danger: #b83f3f;
}

body.theme-admin-light .contracts-tabs {
  background: rgba(255,255,255,0.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38);
}

body.theme-admin-light .contracts-rules-text,
body.theme-admin-light .contract-description {
  color: #272d55;
}

body.theme-admin-light .contract-card-title,
body.theme-admin-light .contracts-empty-title {
  color: #14182f;
}

body.theme-admin-light .contract-person,
body.theme-admin-light .contract-reward-sub,
body.theme-admin-light .contracts-empty-hint,
body.theme-admin-light .contracts-rule-muted {
  color: #4a5188;
}

body.theme-admin-light .contracts-filter-chip,
body.theme-admin-light .contract-category-badge {
  background: rgba(255,255,255,0.72);
  color: #3e4578;
}

body.theme-admin-light .contract-reward {
  background: rgba(255,255,255,0.72);
}

body.theme-admin-light .contract-modal {
  background: rgba(14,16,34,0.6);
}

body.theme-admin-light .contract-modal-sheet {
  background:
    radial-gradient(circle at 100% 0%, var(--contract-accent-soft), transparent 42%),
    linear-gradient(180deg, rgba(250,251,255,0.98), rgba(234,237,250,0.98));
}

body.theme-admin-light .contract-field input,
body.theme-admin-light .contract-field textarea,
body.theme-admin-light .contract-field select {
  background: rgba(255,255,255,0.88);
  color: #14182f;
}

body.theme-admin-light .contract-submit-btn {
  background: color-mix(in srgb, var(--contract-accent) 13%, #fff);
}

body.theme-admin-light .contracts-tab {
  color: #4a5188;
}

body.theme-admin-light .contracts-tab.active,
body.theme-admin-light .contracts-filter-chip.active {
  color: var(--contract-accent);
  background: color-mix(in srgb, var(--contract-accent) 13%, #fff);
}

body.theme-admin-light .contract-status {
  background: rgba(255,255,255,0.78);
  opacity: 1;
}

body.theme-admin-light .contract-status-hint,
body.theme-admin-light .contract-flow-labels,
body.theme-admin-light .contract-privacy-toggle small {
  color: #4a5188;
  opacity: 1;
}

/* ===== LEADERBOARD — ADMIN LIGHT THEME ===== */

body.theme-admin-light .lb-points {
  color: #4456e0 !important;
}

body.theme-admin-light .lb-name {
  color: #1a1f40 !important;
}

body.theme-admin-light .lb-item {
  background:
    radial-gradient(circle at 0% 50%, rgba(68,86,224,0.07), transparent 38%),
    rgba(255,255,255,0.52);
  border-color: rgba(68,86,224,0.12);
}

body.theme-admin-light .lb-item.top1 {
  border-color: rgba(0,153,204,0.44);
  background:
    radial-gradient(circle at 0% 50%, rgba(0,153,204,0.18), transparent 46%),
    linear-gradient(90deg, rgba(210,240,255,0.96), rgba(255,255,255,0.74));
}

body.theme-admin-light .lb-item.top2 {
  border-color: rgba(120, 128, 140, 0.36);
  background: linear-gradient(90deg, rgba(220,226,236,0.92), rgba(255,255,255,0.70));
}

body.theme-admin-light .lb-item.top3 {
  border-color: rgba(68,86,224,0.28);
  background: linear-gradient(90deg, rgba(210,216,248,0.92), rgba(255,255,255,0.70));
}

body.theme-admin-light .lb-subline,
body.theme-admin-light .diary-rank-sub {
  color: var(--text2);
}

body.theme-admin-light .lb-path-badge {
  background: rgba(255,255,255,0.78);
  color: #3a4070;
  border-color: rgba(68,86,224,0.24);
}

body.theme-admin-light .alpha-boss-block {
  background: rgba(255,255,255,0.50);
  border-color: rgba(68,86,224,0.22);
}

body.theme-admin-light .alpha-boss-pts {
  color: #4456e0;
}

body.theme-admin-light .alpha-boss-raid-cost {
  color: rgba(68,86,224,0.65);
}

/* Same low-opacity gold "kicker" labels are illegible on the admin light
   background too — darken them to the admin-light accent. */
body.theme-admin-light .alpha-boss-kicker,
body.theme-admin-light .page-title-cn,
body.theme-admin-light .main-pinyin,
body.theme-admin-light .stat-cn,
body.theme-admin-light .implant-py,
body.theme-admin-light .lb-leaders-label,
body.theme-admin-light .more-stat-lbl span,
body.theme-admin-light .more-item-cn,
body.theme-admin-light .shop-cat .cn,
body.theme-admin-light .shop-item-cn,
body.theme-admin-light .case-cn.g,
body.theme-admin-light .event-lobby-count,
body.theme-admin-light .launch-gate-kicker,
body.theme-admin-light .demo-lock-kicker,
body.theme-admin-light .event-lobby-card .event-lobby-reward::before,
body.theme-admin-light .event-result-card .event-lobby-reward::before,
body.theme-admin-light .diary-star
{ color: #4456e0 !important; }

body.theme-admin-light .alpha-boss-raid-btn {
  background: rgba(68,86,224,0.08);
  border-top-color: rgba(68,86,224,0.15);
  color: #4456e0;
}

body.theme-admin-light .demo-note,
body.theme-admin-light .demo-catalog-lock,
body.theme-admin-light .demo-card,
body.theme-admin-light .demo-raid-locked {
  background:
    radial-gradient(circle at 0% 0%, rgba(68,86,224,0.10), transparent 44%),
    rgba(255,255,255,0.82) !important;
  color: #1a1f40;
}

body.theme-admin-light .demo-card-title,
body.theme-admin-light .demo-lock-title {
  color: #1a1f40;
}

body.theme-admin-light .demo-card-body,
body.theme-admin-light .demo-lock-copy {
  color: #4a5188;
}

body.theme-admin-light .diary-rank-card {
  border-color: rgba(68,86,224,0.14);
  background:
    radial-gradient(circle at 0% 50%, rgba(68,86,224,0.07), transparent 38%),
    rgba(255,255,255,0.52);
}

body.theme-admin-light .diary-rank-card.top1 {
  border-color: rgba(0,153,204,0.44);
  background:
    radial-gradient(circle at 0% 50%, rgba(0,153,204,0.18), transparent 46%),
    linear-gradient(90deg, rgba(210,240,255,0.96), rgba(255,255,255,0.74));
}

/* ===== GIFT USER MODAL ===== */
.gift-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  align-items: flex-end;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.gift-modal-overlay.show { display: flex; }
.gift-modal {
  width: 100%;
  background: var(--bg);
  border-top: 1px solid var(--gold-border);
  border-radius: 18px 18px 0 0;
  padding: 20px 16px 32px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gift-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.gift-modal-kicker {
  font-family: monospace;
  font-size: 8px;
  color: var(--gold);
  letter-spacing: 2px;
  opacity: 0.65;
  margin-bottom: 2px;
}
.gift-modal-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.3px;
}
.gift-modal-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  font-family: inherit;
}
.gift-modal-item {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  font-family: monospace;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  padding: 7px 12px;
}
.gift-modal-tax {
  font-size: 11px;
  color: var(--text3);
  font-family: monospace;
}
.gift-modal-search {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg3);
  border: 1px solid var(--gold-border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  padding: 10px 13px;
  font-family: inherit;
  outline: none;
}
.gift-modal-search:focus { border-color: var(--gold); }
.gift-modal-search::placeholder { color: var(--text3); }
.gift-modal-results {
  overflow-y: auto;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gift-modal-hint {
  font-size: 11px;
  color: var(--text3);
  padding: 6px 0;
  font-family: monospace;
}
.gift-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  transition: background 0.12s;
}
.gift-user-row:active { background: var(--gold-dim); }
.gift-user-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gift-user-img { width: 100%; height: 100%; object-fit: cover; }
.gift-user-initials {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold);
  font-family: monospace;
}
.gift-user-info { flex: 1; min-width: 0; }
.gift-user-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gift-user-pts {
  font-size: 11px;
  font-family: monospace;
  color: var(--gold);
  opacity: 0.75;
  flex-shrink: 0;
}
.gift-modal-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  border-radius: 10px;
}
.gift-clear-btn {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  font-family: inherit;
  flex-shrink: 0;
}
.gift-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.gift-modal-confirm { flex: 1; opacity: 1; }
.gift-modal-confirm:disabled { opacity: 0.4; cursor: default; }
body.lite-mode .gift-modal-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* Light themes: search input needs a visible fill since --bg3 is transparent in some themes */
body.theme-nw-light .gift-modal-search,
body.theme-genshin-light .gift-modal-search,
body.theme-genshin-dark .gift-modal-search {
  background: rgba(0,0,0,0.06);
}

/* ===== INVENTORY EXPIRY LABELS ===== */
.inventory-expiry-warn {
  color: #e05050;
  font-weight: 700;
}
.inventory-expiry-soon {
  color: var(--gold);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   ARCHITECT PROTOCOL THEME — recolor BlackWall FX to green/cyan
   The BlackWall decoration system (body.is-architect) defaults
   to red/orange/purple regardless of active theme. When the
   Architect Protocol theme itself is active, recolor it to match
   the theme's green/cyan/lime palette instead of clashing.
   ═══════════════════════════════════════════════════════════ */

/* Heartbeat glow + border cycle on profile card */
@keyframes architectHeartbeatGreen {
  0%,  100% { box-shadow: 0 0 12px rgba(0,255,136,0.12), inset 0 0 16px rgba(0,255,136,0.05); }
  6%         { box-shadow: 0 0 55px rgba(0,255,136,0.45), 0 0 110px rgba(0,255,136,0.18), 0 0 0 2px rgba(0,229,255,0.5), inset 0 0 36px rgba(0,255,136,0.16); }
  12%        { box-shadow: 0 0 16px rgba(0,255,136,0.15), inset 0 0 18px rgba(0,255,136,0.06); }
  18%        { box-shadow: 0 0 38px rgba(0,255,136,0.30), 0 0 80px rgba(0,229,255,0.12), 0 0 0 1px rgba(0,229,255,0.35), inset 0 0 26px rgba(0,255,136,0.11); }
  24%        { box-shadow: 0 0 12px rgba(0,255,136,0.12), inset 0 0 16px rgba(0,255,136,0.05); }
  36%        { box-shadow: 0 0 14px rgba(57,255,20,0.10), inset 0 0 18px rgba(0,255,136,0.04); }
}
@keyframes architectBorderCycleGreen {
  0%   { border-color: rgba(0,255,136,0.95); }
  20%  { border-color: rgba(0,229,255,0.9);  }
  40%  { border-color: rgba(57,255,20,0.9);  }
  60%  { border-color: rgba(0,229,255,0.85); }
  80%  { border-color: rgba(0,255,136,0.85); }
  100% { border-color: rgba(0,255,136,0.95); }
}
body.theme-architect.is-architect .profile-card-home {
  border: 2px solid rgba(0,255,136,0.95);
  animation: architectHeartbeatGreen 3.5s ease-in-out infinite,
             architectBorderCycleGreen 5s linear infinite !important;
}

/* Profile name flicker */
@keyframes architectNeonFlickerGreen {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    color: #f0fff8;
    text-shadow:
      0 0 8px rgba(0,255,136,0.95),
      0 0 20px rgba(0,255,136,0.6),
      0 0 45px rgba(0,255,136,0.25);
    filter: brightness(1);
  }
  19%, 23%, 54% {
    color: rgba(240,255,248,0.25);
    text-shadow: none;
    filter: brightness(0.35);
  }
  68% {
    color: #e0fcff;
    text-shadow:
      0 0 12px rgba(0,229,255,0.9),
      0 0 28px rgba(0,229,255,0.45);
  }
  84% {
    color: #eaffe0;
    text-shadow:
      0 0 10px rgba(57,255,20,0.9),
      0 0 24px rgba(57,255,20,0.45);
  }
}
body.theme-architect.is-architect .profile-card-name {
  animation: architectNeonFlickerGreen 9s ease-in-out infinite;
}

/* Scan line + neural grid overlay */
body.theme-architect.is-architect .blackwall-overlay::before {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,255,136,0.7) 20%,
    rgba(0,229,255,0.95) 50%,
    rgba(0,255,136,0.7) 80%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(0,255,136,0.6), 0 0 20px rgba(0,255,136,0.2);
}
body.theme-architect.is-architect .blackwall-overlay::after {
  background-image:
    linear-gradient(rgba(0,255,136,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,0.04) 1px, transparent 1px);
}

/* Nav beacon */
@keyframes architectNavBeaconGreen {
  0%, 100% { text-shadow: 0 0 4px rgba(0,255,136,0.3); }
  5%        { text-shadow: 0 0 14px rgba(0,255,136,1), 0 0 28px rgba(0,229,255,0.5); }
  10%       { text-shadow: 0 0 4px rgba(0,255,136,0.3); }
  16%       { text-shadow: 0 0 10px rgba(0,255,136,0.8), 0 0 22px rgba(0,255,136,0.3); }
  22%       { text-shadow: 0 0 4px rgba(0,255,136,0.3); }
}
body.theme-architect.is-architect .nav-item.active,
body.theme-architect.is-architect .nav-item.active .ti {
  animation: architectNavBeaconGreen 3s ease-in-out infinite;
}

/* LED indicator on badge */
@keyframes architectLEDGreen {
  0%, 100% { opacity: 0.35; text-shadow: none; }
  50%       { opacity: 1;    text-shadow: 0 0 8px #00ff88, 0 0 16px rgba(0,255,136,0.4); }
}
body.theme-architect.is-architect .profile-admin-badge::before {
  color: #00ff88;
  animation: architectLEDGreen 1.4s ease-in-out infinite;
}

/* Page title glitch */
@keyframes architectTitleGlitchGreen {
  0%, 88%, 100% {
    text-shadow: 0 0 30px rgba(0,255,136,0.7), 0 0 70px rgba(0,255,136,0.25);
    filter: none;
    transform: none;
  }
  89% {
    text-shadow: 5px 0 rgba(0,255,136,0.95), -5px 0 rgba(0,229,255,0.95), 0 0 50px rgba(0,255,136,0.9);
    filter: brightness(1.3);
    transform: skewX(-2deg);
  }
  90% {
    text-shadow: -3px 0 rgba(57,255,20,0.9), 4px 0 rgba(0,229,255,0.7);
    filter: none;
    transform: none;
  }
  91% {
    text-shadow: 0 0 30px rgba(0,255,136,0.7), 0 0 70px rgba(0,255,136,0.25);
    filter: none;
  }
  95% {
    text-shadow: 2px 0 rgba(0,229,255,0.5), 0 0 40px rgba(0,255,136,0.8);
    transform: translateX(1px);
  }
  96% {
    text-shadow: 0 0 30px rgba(0,255,136,0.7), 0 0 70px rgba(0,255,136,0.25);
    transform: none;
  }
}
body.theme-architect.is-architect .page-title {
  animation: architectTitleGlitchGreen 11s ease-in-out infinite;
}

/* Status line */
body.theme-architect.is-architect .profile-status-line {
  color: rgba(0,255,136,0.55);
}

/* Avatar scan ring */
@keyframes architectAvatarRingGreen {
  0%, 100% { box-shadow: 0 0 0 0px rgba(0,255,136,0.5), 0 0 0 0px rgba(0,229,255,0); }
  40%       { box-shadow: 0 0 0 6px rgba(0,255,136,0.2), 0 0 0 12px rgba(0,229,255,0.08); }
  60%       { box-shadow: 0 0 0 8px rgba(0,255,136,0.0), 0 0 0 16px rgba(0,255,136,0.0); }
}
body.theme-architect.is-architect .profile-avatar-wrap {
  animation: architectAvatarRingGreen 3.5s ease-out infinite;
}

/* Architect theme card pulse (in theme picker) */
@keyframes architectCardPulseGreen {
  0%, 100% { box-shadow: 0 0 20px rgba(0,255,136,0.15), inset 0 0 20px rgba(0,255,136,0.03); border-color: rgba(0,255,136,0.55); }
  50%       { box-shadow: 0 0 40px rgba(0,255,136,0.35), 0 0 80px rgba(0,229,255,0.08), inset 0 0 30px rgba(0,255,136,0.07); border-color: rgba(0,229,255,0.75); }
}
body.theme-architect.is-architect .architect-theme-card {
  border-color: rgba(0,255,136,0.7);
  box-shadow: 0 0 20px rgba(0,255,136,0.2), inset 0 0 30px rgba(0,255,136,0.04);
  animation: architectCardPulseGreen 3s ease-in-out infinite;
}

/* Corner sparks */
body.theme-architect.is-architect .profile-card-spark.spark-tl { background: #00e5ff; }
body.theme-architect.is-architect .profile-card-spark.spark-br { background: #39ff14; }
body.theme-architect.is-architect .profile-card-spark.spark-tr { background: #00ff88; }
body.theme-architect.is-architect .profile-card-spark.spark-bl { background: #00e5ff; }

/* ===== WILD AI BREACH (野生AI入侵) ===== */
.wild-ai-breach-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  background: rgba(20,0,0,0.92);
  border-bottom: 1px solid #cc2222;
  font-family: monospace;
  text-align: center;
  padding: 6px 8px 5px;
  pointer-events: none;
  animation: wab-flicker 4s infinite;
}
.wild-ai-breach-banner .wab-line1 {
  color: #ff3b3b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 0 6px rgba(255,40,40,0.8);
}
.wild-ai-breach-banner .wab-line2 {
  color: #ff6666;
  font-size: 9px;
  letter-spacing: 1px;
  margin-top: 2px;
  word-break: break-word;
}
.wild-ai-breach-banner .wab-translation {
  color: #999;
}
.wild-ai-breach-banner .wab-timer {
  color: #ff8888;
  font-size: 9px;
  margin-top: 2px;
  letter-spacing: 1px;
}

body.wild-ai-breach {
  padding-top: 46px;
}

/* "Повреждённая" тема — перебивает текущую тему испорченной палитрой */
body.wild-ai-breach {
  --bg: #0a0604 !important;
  --bg2: rgba(255,40,40,0.05) !important;
  --bg3: rgba(255,40,40,0.09) !important;
  --border: rgba(255,60,60,0.25) !important;
  --text: #d8f0e0 !important;
  --text2: #9fcdb8 !important;
  --text3: #6a8a7c !important;
  --gold: #7cff9e !important;
  --gold-dim: rgba(124,255,158,0.1) !important;
  --gold-border: rgba(124,255,158,0.3) !important;
  --purple: #ff5577 !important;
  --purple-dim: rgba(255,85,119,0.15) !important;
  --purple-border: rgba(255,85,119,0.3) !important;
  background: var(--bg) !important;
  animation: wab-hue-shift 12s linear infinite;
}

@keyframes wab-hue-shift {
  0%   { filter: hue-rotate(0deg) saturate(1); }
  25%  { filter: hue-rotate(25deg) saturate(1.3); }
  50%  { filter: hue-rotate(-15deg) saturate(1.1) contrast(1.1); }
  75%  { filter: hue-rotate(10deg) saturate(1.4); }
  100% { filter: hue-rotate(0deg) saturate(1); }
}

/* Глитч-оверлей поверх всего интерфейса */
body.wild-ai-breach::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,0,0,0.04) 0px,
      rgba(255,0,0,0.04) 1px,
      transparent 1px,
      transparent 3px
    );
  animation: wab-static-flash 6s infinite;
}

/* Полосы "разрыва экрана", периодически проезжающие по всему интерфейсу */
body.wild-ai-breach::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    linear-gradient(transparent 0%, transparent 38%, rgba(255,40,40,0.18) 38%, rgba(0,255,200,0.12) 39%, transparent 40%, transparent 70%, rgba(255,40,40,0.14) 70%, transparent 71%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: wab-screen-tear 9s infinite;
}

/* Хромо-аберрация и дрожание интерфейса целиком */
body.wild-ai-breach .page.active {
  animation: wab-chroma-shift 8s infinite;
}

@keyframes wab-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
  95% { opacity: 0.6; }
  96% { opacity: 1; }
}

@keyframes wab-static-flash {
  0%, 96%, 100% { opacity: 0.3; }
  97% { opacity: 0.9; background-color: rgba(255,0,0,0.08); }
  98% { opacity: 0.2; }
  99% { opacity: 0.7; background-color: rgba(255,0,0,0.05); }
}

@keyframes wab-screen-tear {
  0%, 91%, 100% { opacity: 0; transform: translateX(0); }
  91.5% { opacity: 1; transform: translateX(-6px); }
  92% { opacity: 1; transform: translateX(8px); }
  92.5% { opacity: 0; transform: translateX(0); }
}

@keyframes wab-chroma-shift {
  0%, 94%, 100% { transform: translate(0, 0); filter: none; }
  94.3% { transform: translate(-2px, 0); filter: drop-shadow(2px 0 0 rgba(255,0,60,0.5)) drop-shadow(-2px 0 0 rgba(0,255,220,0.4)); }
  94.7% { transform: translate(2px, 1px); filter: drop-shadow(-2px 0 0 rgba(255,0,60,0.5)) drop-shadow(2px 0 0 rgba(0,255,220,0.4)); }
  95.1% { transform: translate(0, 0); filter: none; }
}

/* Перемешанные подвкладки и заголовки во время Breach подсвечиваются красным */
body.wild-ai-breach .subtab,
body.wild-ai-breach .contracts-tab,
body.wild-ai-breach .page-title-cn,
body.wild-ai-breach .diary-section-title {
  color: #ff6666 !important;
  text-shadow: 0 0 4px rgba(255,40,40,0.5);
}

.lb-corrupted-badge {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #ff6666;
  text-align: center;
  padding: 6px 8px;
  margin-bottom: 8px;
  border: 1px dashed rgba(255,60,60,0.4);
  background: rgba(255,0,0,0.05);
  animation: wab-flicker 4s infinite;
}

/* Профиль во время Wild AI Breach — карточка показывает "профиль дикого ИИ" */
.profile-card.wild-ai-profile {
  border-color: rgba(255,40,40,0.5) !important;
  filter: hue-rotate(-20deg) saturate(1.3);
  animation: wab-flicker 4s infinite;
}
.profile-card.wild-ai-profile .profile-avatar-wrap {
  filter: grayscale(1) contrast(1.4) sepia(1) hue-rotate(-50deg) saturate(4);
}
.profile-card.wild-ai-profile #profileDisplayName {
  color: #ff3b3b;
  text-shadow: 0 0 8px rgba(255,40,40,0.7);
}
.profile-card.wild-ai-profile #profileKicker {
  color: #ff6666;
}

/* ===== ИНСТРУКЦИЯ (Юля) ===== */
.instruction-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.instruction-modal-inner {
  position: relative;
  width: min(92vw, 380px);
  max-height: 80vh;
  overflow-y: auto;
  background: #0a0e14;
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 14px;
  padding: 24px 16px 18px;
  box-sizing: border-box;
}
.instruction-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  cursor: pointer;
}
.instruction-modal-title {
  font-family: monospace;
  font-size: 14px;
  font-weight: 800;
  color: #00e5ff;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  padding-right: 26px;
}
.instruction-option-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,229,255,0.25);
  background: rgba(0,229,255,0.06);
  color: rgba(230,247,255,0.85);
  font-family: monospace;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
}
.instruction-option-btn strong {
  display: block;
  font-size: 13px;
  color: #00e5ff;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.instruction-cut-notice {
  margin-bottom: 12px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255,170,30,0.3);
  background: rgba(255,170,30,0.08);
  color: rgba(255,200,110,0.9);
  font-family: monospace;
  font-size: 10px;
  line-height: 1.4;
}
.instruction-back-btn {
  text-align: center;
  color: rgba(230,247,255,0.6);
}
.instruction-text-section {
  border-left: 2px solid rgba(0,229,255,0.25);
  padding-left: 10px;
  margin-bottom: 14px;
}
.instruction-text-section h4 {
  font-family: monospace;
  font-size: 11px;
  color: #00e5ff;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}
.instruction-text-section p {
  font-size: 11px;
  color: rgba(230,247,255,0.8);
  margin: 0;
  line-height: 1.5;
}

.instruction-tour-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.instruction-tour-card {
  position: relative;
  pointer-events: auto;
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.instruction-tour-close {
  position: absolute;
  top: -32px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(4,4,12,0.7);
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}
.instruction-tour-portrait {
  position: relative;
  flex: 0 0 104px;
  width: 104px;
  height: 134px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: rgba(0,229,255,0.05);
  border-radius: 14px;
  border: 1px solid rgba(0,229,255,0.35);
  box-shadow: 0 0 16px rgba(0,229,255,0.25), 0 6px 18px rgba(0,0,0,0.4);
  overflow: hidden;
}
.instruction-tour-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,4,12,0) 62%, rgba(4,4,12,0.88) 100%);
}
.instruction-tour-name {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  z-index: 1;
  font-family: monospace;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: #00e5ff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.instruction-tour-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(180deg, rgba(8,8,18,0.96), rgba(4,4,12,0.99));
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.4);
}
.instruction-tour-title {
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #00e5ff;
}
.instruction-tour-bubble {
  font-size: 11px;
  line-height: 1.5;
  color: #e6f7ff;
  max-height: 26vh;
  overflow-y: auto;
}
.instruction-tour-cursor {
  display: inline-block;
  animation: instructionTourBlink 0.9s step-end infinite;
  color: #00e5ff;
}
@keyframes instructionTourBlink {
  50% { opacity: 0; }
}
.instruction-tour-progress {
  font-family: monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
}
.instruction-tour-actions {
  display: flex;
  gap: 8px;
}
.instruction-tour-actions button {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,229,255,0.25);
  background: rgba(0,229,255,0.08);
  color: #00e5ff;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.instruction-tour-actions button.ghost {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6);
  border-color: rgba(255,255,255,0.12);
}

.instruction-highlight {
  outline: 2px solid #00e5ff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0,229,255,0.18), 0 0 20px rgba(0,229,255,0.45);
  border-radius: 12px;
  animation: instructionHighlightPulse 1.4s ease-in-out infinite;
  position: relative;
  z-index: 6;
}
@keyframes instructionHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,229,255,0.18), 0 0 16px rgba(0,229,255,0.4); }
  50% { box-shadow: 0 0 0 9px rgba(0,229,255,0.05), 0 0 28px rgba(0,229,255,0.8); }
}

/* ===== Trip Rewind (Wrapped-style story slides) =====
   Fixed brand palette, independent of the active theme. */
.rewind-overlay {
  position: fixed; inset: 0; z-index: 9600;
  background: #05060a; overflow: hidden;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  color: #fff; user-select: none; -webkit-user-select: none;
}
.rewind-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--accent,#00ff66) 26%, transparent), transparent 46%),
    radial-gradient(circle at 85% 88%, color-mix(in srgb, var(--accent,#00ff66) 16%, transparent), transparent 52%),
    #05060a;
  transition: background 0.45s ease;
}
.rewind-bars {
  position: relative; z-index: 3;
  display: flex; gap: 4px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 6px;
}
.rewind-bar {
  flex: 1; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,0.22); overflow: hidden;
}
.rewind-bar-fill { height: 100%; width: 0; background: #fff; }
.rewind-bar.done .rewind-bar-fill { width: 100%; }
@keyframes rewindBarFill { from { width: 0; } to { width: 100%; } }
.rewind-close {
  position: absolute; z-index: 5;
  top: calc(8px + env(safe-area-inset-top, 0px)); right: 12px;
  background: none; border: none; color: rgba(255,255,255,0.6);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 6px;
}
.rewind-stage {
  position: relative; z-index: 2;
  height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: 24px 28px calc(70px + env(safe-area-inset-bottom, 0px));
}
.rewind-kicker {
  font-size: 14px; letter-spacing: 1px; line-height: 1.4;
  text-transform: uppercase; color: rgba(255,255,255,0.78);
  margin-bottom: 20px; max-width: 320px;
}
.rewind-big {
  font-size: 92px; font-weight: 900; line-height: 0.92;
  color: var(--accent, #00ff66);
  text-shadow: 0 0 34px color-mix(in srgb, var(--accent,#00ff66) 60%, transparent);
}
.rewind-big.text { font-size: 46px; letter-spacing: 1px; }
.rewind-label {
  margin-top: 20px; font-size: 16px; line-height: 1.4;
  color: rgba(255,255,255,0.9); max-width: 320px;
}
.rewind-sub {
  margin-top: 10px; font-size: 12.5px; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5); max-width: 300px;
}
.rewind-role-badge {
  width: 70px; height: 70px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: var(--accent, #00ff66);
  border: 2px solid color-mix(in srgb, var(--accent,#00ff66) 55%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent,#00ff66) 40%, transparent);
}
/* entrance animation */
.rewind-slide-enter .rewind-kicker { animation: rewindUp 0.5s ease both; }
.rewind-slide-enter .rewind-big,
.rewind-slide-enter .rewind-role-badge { animation: rewindPop 0.6s cubic-bezier(.2,1.3,.4,1) both 0.1s; }
.rewind-slide-enter .rewind-label { animation: rewindUp 0.5s ease both 0.25s; }
.rewind-slide-enter .rewind-sub  { animation: rewindUp 0.5s ease both 0.35s; }
.rewind-slide-enter .rewind-card { animation: rewindPop 0.55s cubic-bezier(.2,1.2,.4,1) both 0.05s; }
@keyframes rewindUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rewindPop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
/* final shareable card */
.rewind-card {
  width: 100%; max-width: 340px; box-sizing: border-box;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid color-mix(in srgb, var(--accent,#00ff66) 42%, transparent);
  border-radius: 20px; padding: 22px 22px 18px;
  box-shadow: 0 0 36px color-mix(in srgb, var(--accent,#00ff66) 18%, transparent);
}
.rewind-card-head { text-align: center; margin-bottom: 16px; }
.rewind-card-title {
  font-size: 22px; font-weight: 900; letter-spacing: 2px;
  color: var(--accent, #00ff66);
}
.rewind-card-sub { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 4px; }
.rewind-card-role {
  text-align: center; font-size: 18px; font-weight: 800; letter-spacing: 1px;
  color: #fff; margin-bottom: 18px;
  padding: 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent,#00ff66) 14%, transparent);
}
.rewind-card-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
}
.rewind-card-row span { color: rgba(255,255,255,0.7); }
.rewind-card-row b { font-size: 18px; color: var(--accent, #00ff66); }
.rewind-card-foot {
  margin-top: 16px; text-align: center;
  font-size: 11px; letter-spacing: 0.5px; color: rgba(255,255,255,0.45);
}

/* ===== Trip Rewind — ambient effects layer ===== */
/* drifting glow on the base background */
.rewind-bg::before {
  content: ''; position: absolute; inset: -30%;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent,#00ff66) 18%, transparent), transparent 40%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--accent,#00ff66) 12%, transparent), transparent 45%);
  animation: rewindDrift 14s ease-in-out infinite alternate;
}
@keyframes rewindDrift {
  from { transform: translate(-4%, -3%) scale(1); }
  to   { transform: translate(5%, 4%) scale(1.12); }
}
/* synthwave perspective grid at the bottom */
.rewind-grid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: 0;
  overflow: hidden; opacity: 0.45; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 92%);
  mask-image: linear-gradient(to top, #000 0%, transparent 92%);
}
.rewind-grid::before {
  content: ''; position: absolute; left: -50%; right: -50%; top: 0; bottom: -40%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent,#00ff66) 50%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent,#00ff66) 50%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: rotateX(72deg); transform-origin: top center;
  animation: rewindGridScroll 1.6s linear infinite;
}
@keyframes rewindGridScroll { from { background-position: 0 0; } to { background-position: 0 42px; } }
/* floating particles */
.rewind-particles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.rewind-particle {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent,#00ff66) 75%, #fff);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent,#00ff66) 80%, transparent);
  opacity: 0; animation-name: rewindFloat; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes rewindFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.5; }
  100% { transform: translateY(-108vh) scale(0.4); opacity: 0; }
}
/* subtle scanlines */
.rewind-scanlines {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px);
  animation: rewindScan 9s linear infinite;
}
@keyframes rewindScan { from { background-position: 0 0; } to { background-position: 0 140px; } }
/* slide-change flash */
.rewind-flash {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent,#00ff66) 38%, transparent), transparent 60%);
}
.rewind-flash.go { animation: rewindFlash 0.6s ease-out; }
@keyframes rewindFlash {
  0%   { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.4); }
}
/* keep stage above ambient layers */
.rewind-stage { z-index: 4; overflow: hidden; }
.rewind-bars, .rewind-close { z-index: 5; }
/* big-number wrapper hosts the rotating rays */
.rewind-big-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.rewind-rays {
  position: absolute; inset: 0; margin: auto; width: 360px; height: 360px; z-index: 0;
  pointer-events: none; opacity: 0.6;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--accent,#00ff66) 24%, transparent) 0deg 6deg,
    transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 6%, transparent 66%);
  mask-image: radial-gradient(circle, #000 6%, transparent 66%);
  animation: rewindSpin 16s linear infinite;
}
.rewind-big { position: relative; z-index: 1; }
@keyframes rewindSpin { to { transform: rotate(360deg); } }
/* breathing glow on the big number (entrance pop + looping glow) */
.rewind-slide-enter .rewind-big,
.rewind-slide-enter .rewind-role-badge {
  animation: rewindPop 0.6s cubic-bezier(.2,1.3,.4,1) both 0.1s,
             rewindGlow 2.6s ease-in-out infinite 0.7s;
}
@keyframes rewindGlow {
  0%, 100% { text-shadow: 0 0 24px color-mix(in srgb, var(--accent,#00ff66) 45%, transparent); }
  50%      { text-shadow: 0 0 46px color-mix(in srgb, var(--accent,#00ff66) 90%, transparent); }
}
/* rotating ring behind the role badge */
.rewind-role-badge { position: relative; }
.rewind-role-badge::before {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, transparent,
    color-mix(in srgb, var(--accent,#00ff66) 85%, transparent), transparent 62%);
  animation: rewindSpin 3s linear infinite;
}
/* shine sweep across the final card */
.rewind-card { position: relative; overflow: hidden; }
.rewind-card::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 42%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: rewindShine 2.8s ease-in-out infinite 0.9s;
}
@keyframes rewindShine { 0% { left: -60%; } 60%, 100% { left: 135%; } }
/* per-slide icon above the kicker */
.rewind-icon {
  font-size: 30px; line-height: 1; margin-bottom: 10px;
  color: var(--accent, #00ff66);
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent,#00ff66) 55%, transparent);
}
/* oversized drifting hanzi watermark behind each slide */
.rewind-hanzi-bg {
  position: absolute; top: 50%; left: 50%; z-index: 0;
  transform: translate(-50%, -50%);
  font-size: 240px; font-weight: 900; line-height: 1;
  white-space: nowrap; pointer-events: none;
  color: color-mix(in srgb, var(--accent,#00ff66) 8%, transparent);
  -webkit-user-select: none; user-select: none;
  animation: rewindHanziDrift 18s ease-in-out infinite alternate;
}
@keyframes rewindHanziDrift {
  from { transform: translate(-50%, -50%) scale(1) rotate(-1.5deg); }
  to   { transform: translate(-50%, -50%) scale(1.08) rotate(1.5deg); }
}
/* real item-drop image on the "best drop" slide */
.rewind-drop-img {
  position: relative; z-index: 1;
  width: 132px; height: 132px; object-fit: contain;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--accent,#00ff66) 55%, transparent));
  animation: rewindPop 0.6s cubic-bezier(.2,1.3,.4,1) both 0.1s;
}
.rewind-big.with-img { font-size: 30px; letter-spacing: 0.5px; }
/* weekly activity bar chart */
.rewind-timeline {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 16px; height: 180px; margin-top: 6px; width: 100%; max-width: 320px;
}
.rewind-tl-col {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; height: 100%; justify-content: flex-end;
}
.rewind-tl-val {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
}
.rewind-tl-bar-wrap {
  width: 26px; height: 100%; display: flex; align-items: flex-end;
  border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.rewind-tl-bar {
  width: 100%; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--accent,#00ff66), color-mix(in srgb, var(--accent,#00ff66) 40%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent,#00ff66) 50%, transparent);
  animation: rewindBarGrow 0.7s cubic-bezier(.2,1,.4,1) both 0.1s;
}
@keyframes rewindBarGrow { from { height: 0%; } }
.rewind-tl-label {
  margin-top: 8px; font-size: 11px; letter-spacing: 0.3px;
  color: rgba(255,255,255,0.55); white-space: nowrap;
}
/* save-as-image button on the final card */
.rewind-share-btn {
  position: relative; z-index: 1;
  margin-top: 18px; padding: 11px 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.4px;
  color: #000; background: var(--accent, #00ff66);
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent,#00ff66) 55%, transparent);
}
.rewind-share-btn i { font-size: 16px; }

/* =========================================================================
   AQUA / HAINAN — Frutiger Aero · Y2K test theme (dev-owner only)
   Glossy water-glass, aqua skies, light rays, rising bubbles. Bright/light
   theme, so text goes dark; accents go aqua-blue. Mostly variable-driven,
   plus a few signature glossy overrides for the nostalgic-2000s look.
   ========================================================================= */
body.theme-aqua {
  --red:          #1f7fc4;
  --red-dim:      rgba(31,127,196,0.12);
  --red-border:   rgba(31,127,196,0.32);
  --gold:         #0f9bd1;
  --gold-dim:     rgba(15,155,209,0.12);
  --gold-border:  rgba(15,155,209,0.3);
  --purple:       #2bbf7a;
  --purple-dim:   rgba(43,191,122,0.14);
  --purple-border:rgba(43,191,122,0.3);
  --bg:           #cdeeff;
  --bg2:          rgba(255,255,255,0.55);
  --bg3:          rgba(255,255,255,0.72);
  --border:       rgba(255,255,255,0.7);
  --text:         #0a4f7a;
  --text2:        #166390;
  --text3:        #5a89a6;
  --font-ui:      'Trebuchet MS', 'Segoe UI', sans-serif;
  --btn-radius:   16px;
  --card-radius:  16px;
  --scan-opacity: 0;
  --contract-card-bg: rgba(255,255,255,0.62);
  --contract-card-border: rgba(255,255,255,0.85);
  --contract-card-shadow: 0 6px 20px rgba(31,127,196,0.18);
}
/* sky→ocean gradient backdrop */
body.theme-aqua {
  background:
    linear-gradient(180deg,
      #d8f4ff 0%,
      #a6e0fb 22%,
      #6cc5ef 50%,
      #2f9bd6 78%,
      #1873b4 100%) fixed;
}
/* kill the dark scanline overlay under aqua */
body.theme-aqua::before { display: none; }

/* ---- ambient background layer ---- */
.aqua-layer {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  display: none;
}
body.theme-aqua .aqua-layer { display: block; }
body.lite-mode .aqua-layer { display: none; }

/* god-rays from the surface */
.aqua-rays {
  position: absolute; top: -10%; left: 50%; width: 160%; height: 90%;
  transform: translateX(-50%);
  background:
    linear-gradient(96deg, transparent 46%, rgba(255,255,255,0.35) 50%, transparent 54%),
    linear-gradient(88deg, transparent 38%, rgba(255,255,255,0.22) 42%, transparent 47%),
    linear-gradient(102deg, transparent 60%, rgba(255,255,255,0.28) 64%, transparent 69%);
  filter: blur(2px);
  opacity: 0.7;
  animation: aquaRays 9s ease-in-out infinite alternate;
}
@keyframes aquaRays {
  from { opacity: 0.45; transform: translateX(-52%) skewX(-2deg); }
  to   { opacity: 0.8;  transform: translateX(-48%) skewX(2deg); }
}
/* soft caustic shimmer near the surface */
.aqua-caustics {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 22% at 20% 8%, rgba(255,255,255,0.5), transparent 70%),
    radial-gradient(ellipse 40% 18% at 78% 4%, rgba(255,255,255,0.4), transparent 70%);
  opacity: 0.6;
  animation: aquaCaustics 12s ease-in-out infinite alternate;
}
@keyframes aquaCaustics {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(8px) scale(1.05); }
}
/* rising glossy bubbles */
.aqua-bubbles { position: absolute; inset: 0; }
.aqua-bubbles span {
  position: absolute; bottom: -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0.15) 42%, rgba(120,200,240,0.12) 70%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: inset 0 0 6px rgba(255,255,255,0.7), 0 0 6px rgba(255,255,255,0.35);
  animation: aquaRise linear infinite;
}
@keyframes aquaRise {
  0%   { transform: translateY(0) translateX(0) scale(0.9); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translateY(-52vh) translateX(10px) scale(1); }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-108vh) translateX(-8px) scale(1.1); opacity: 0; }
}
.aqua-bubbles span:nth-child(1)  { left: 6%;  width: 14px; height: 14px; animation-duration: 11s; animation-delay: -1s; }
.aqua-bubbles span:nth-child(2)  { left: 14%; width: 8px;  height: 8px;  animation-duration: 9s;  animation-delay: -4s; }
.aqua-bubbles span:nth-child(3)  { left: 22%; width: 20px; height: 20px; animation-duration: 14s; animation-delay: -7s; }
.aqua-bubbles span:nth-child(4)  { left: 30%; width: 6px;  height: 6px;  animation-duration: 8s;  animation-delay: -2s; }
.aqua-bubbles span:nth-child(5)  { left: 38%; width: 12px; height: 12px; animation-duration: 12s; animation-delay: -9s; }
.aqua-bubbles span:nth-child(6)  { left: 45%; width: 9px;  height: 9px;  animation-duration: 10s; animation-delay: -3s; }
.aqua-bubbles span:nth-child(7)  { left: 52%; width: 17px; height: 17px; animation-duration: 13s; animation-delay: -6s; }
.aqua-bubbles span:nth-child(8)  { left: 59%; width: 7px;  height: 7px;  animation-duration: 9s;  animation-delay: -1s; }
.aqua-bubbles span:nth-child(9)  { left: 66%; width: 13px; height: 13px; animation-duration: 12s; animation-delay: -8s; }
.aqua-bubbles span:nth-child(10) { left: 72%; width: 10px; height: 10px; animation-duration: 11s; animation-delay: -5s; }
.aqua-bubbles span:nth-child(11) { left: 78%; width: 22px; height: 22px; animation-duration: 15s; animation-delay: -2s; }
.aqua-bubbles span:nth-child(12) { left: 84%; width: 8px;  height: 8px;  animation-duration: 8s;  animation-delay: -7s; }
.aqua-bubbles span:nth-child(13) { left: 90%; width: 15px; height: 15px; animation-duration: 13s; animation-delay: -4s; }
.aqua-bubbles span:nth-child(14) { left: 95%; width: 6px;  height: 6px;  animation-duration: 9s;  animation-delay: -10s; }
.aqua-bubbles span:nth-child(15) { left: 10%; width: 11px; height: 11px; animation-duration: 14s; animation-delay: -11s; }
.aqua-bubbles span:nth-child(16) { left: 48%; width: 18px; height: 18px; animation-duration: 16s; animation-delay: -3s; }
.aqua-bubbles span:nth-child(17) { left: 63%; width: 6px;  height: 6px;  animation-duration: 7s;  animation-delay: -6s; }
.aqua-bubbles span:nth-child(18) { left: 88%; width: 12px; height: 12px; animation-duration: 12s; animation-delay: -9s; }

/* ---- glossy glass surfaces ---- */
body.theme-aqua .card {
  background: linear-gradient(160deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4));
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(31,127,196,0.18), inset 0 1px 0 rgba(255,255,255,0.95);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
body.theme-aqua .card::before {
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
  border-radius: 16px 16px 0 0;
}
body.theme-aqua .btn-primary {
  background: linear-gradient(160deg, rgba(255,255,255,0.9), #7fd0f5 60%, #2f9bd6);
  border: 1px solid rgba(255,255,255,0.9);
  color: #07405f;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(31,127,196,0.35), inset 0 1px 0 rgba(255,255,255,0.95);
  text-transform: none;
  letter-spacing: 0.5px;
}
body.theme-aqua .btn-primary::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
}
body.theme-aqua .btn-gold {
  background: linear-gradient(160deg, rgba(255,255,255,0.9), #ffe27a 60%, #f0b400);
  border: 1px solid rgba(255,255,255,0.9);
  color: #6a4a00;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(240,180,0,0.3), inset 0 1px 0 rgba(255,255,255,0.9);
}
body.theme-aqua .bottom-nav {
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(190,228,250,0.85));
  border-top: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 -4px 18px rgba(31,127,196,0.2), inset 0 1px 0 rgba(255,255,255,0.95);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
body.theme-aqua .bottom-nav::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), rgba(127,208,245,0.6), rgba(255,255,255,0.9), transparent);
}
body.theme-aqua .nav-item { color: #5a89a6; }
body.theme-aqua .nav-item.active { color: #0f7cc0; }
body.theme-aqua .nav-item.active::before {
  background: linear-gradient(90deg, transparent, #1f9fd4, transparent);
}
body.theme-aqua .nav-item.active .ti {
  color: #0f7cc0;
  filter: drop-shadow(0 0 6px rgba(31,159,212,0.5));
}
body.theme-aqua .page-title {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color: #07405f;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 0 12px rgba(255,255,255,0.5);
}
body.theme-aqua .page-title-cn { color: rgba(15,124,192,0.75); }
body.theme-aqua .page-sub { color: rgba(15,124,192,0.7); }

/* dark, legible text on the bright aqua background */
body.theme-aqua .cn-divider,
body.theme-aqua .card-label,
body.theme-aqua .neuro-label,
body.theme-aqua .stat-label,
body.theme-aqua .team-name,
body.theme-aqua .more-item-name,
body.theme-aqua .shop-item-name,
body.theme-aqua .announcement-text,
body.theme-aqua .lb-name,
body.theme-aqua .lb-points
{ color: #0a4f7a !important; }
body.theme-aqua .card-label,
body.theme-aqua .cn-divider { font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; }
body.theme-aqua .card-label { color: rgba(15,124,192,0.85) !important; }
body.theme-aqua .card-label::after { background: linear-gradient(90deg, rgba(15,124,192,0.25), transparent); }
body.theme-aqua .cn-divider::before,
body.theme-aqua .cn-divider::after { background: linear-gradient(90deg, transparent, rgba(15,124,192,0.3)); }

/* ===== Народный магазин (community shop) ===== */
.folk-shop-banner {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 18px 14px 16px;
  border-radius: 16px;
  text-align: center;
  border: 1px solid var(--gold-border);
  background:
    radial-gradient(circle at 50% 0%, var(--gold-dim), transparent 70%),
    var(--card-bg, rgba(255,255,255,0.03));
}
.folk-shop-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
  opacity: 0.5;
  height: 1px;
  top: auto;
}
.folk-shop-icon {
  font-size: 30px;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 10px var(--gold-dim));
}
.folk-shop-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text);
  margin-bottom: 5px;
}
.folk-shop-title .folk-shop-title-cn { color: var(--gold); font-weight: 700; }
.folk-shop-sub {
  font-size: 10.5px;
  color: var(--text2);
  line-height: 1.65;
  max-width: 320px;
  margin: 0 auto;
}
.folk-shop-sub b { color: var(--gold); }

.folk-shop-propose-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.folk-shop-propose-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), transparent);
  opacity: 0.85;
}
.folk-shop-propose-card .card-inner { padding: 13px 14px; }
.folk-shop-propose-kicker {
  font-family: monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--gold);
  margin-bottom: 8px;
}

.folk-item-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.025);
  transition: border-color 0.2s;
}
.folk-item-card.is-hot { border-color: var(--gold-border); }
.folk-item-card .card-inner { padding: 13px 14px; }
.folk-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.folk-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.folk-item-desc {
  font-size: 11px;
  color: var(--text2);
  margin-top: 4px;
  line-height: 1.55;
}
.folk-item-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 9.5px;
  font-family: monospace;
  letter-spacing: 0.3px;
  color: var(--text3);
}
.folk-item-status.status-promoted { color: #4caf7d; }
.folk-item-status.status-rejected { color: var(--red, #c0504d); }
.folk-item-status.status-hot { color: var(--gold); font-weight: 700; }

.folk-crown-btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 50px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid var(--gold-border);
  background: var(--gold-dim);
  cursor: pointer;
  font-family: monospace;
  transition: all 0.2s;
}
.folk-crown-btn.is-voted {
  background: var(--gold);
  border-color: var(--gold);
}
.folk-crown-btn .folk-crown-emoji { font-size: 17px; line-height: 1; }
.folk-crown-btn .folk-crown-count {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
}
.folk-crown-btn.is-voted .folk-crown-count { color: var(--bg, #0a0e12); }

.folk-item-progress-track {
  margin-top: 10px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.folk-item-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), #f0d060);
  transition: width 0.4s ease;
}
.folk-item-progress-label {
  margin-top: 4px;
  font-size: 9px;
  font-family: monospace;
  color: var(--text3);
  display: flex;
  justify-content: space-between;
}