:root {
  --primary-red: #0B63E5; /* Replaced with e7dar brand blue */
  --primary-red-hover: #084ECC;
  --crimson-dark: #8A151B;
  --brand-blue: #0B63E5;
  --brand-blue-hover: #084ECC;
  --brand-teal: #10B981;
  --brand-teal-hover: #059669;
  --neo-black: #0F172A;
  --neo-white: #FFFFFF;
  --neo-bg: #F8FAFC;
  
  --border-main: 2.5px solid var(--neo-black);
  --border-subtle: 1.5px solid var(--neo-black);
  --shadow-main: 4px 4px 0px var(--neo-black);
  --shadow-sm: 2px 2px 0px var(--neo-black);
  --shadow-lg: 6px 6px 0px var(--neo-black);
  
  --color-emerald: #10B981;
  --color-amber: #D97706;
  --color-gray: #475569;
  --color-light-gray: #E2E8F0;
  
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
}

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

html, body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--neo-bg);
  color: var(--neo-black);
  direction: rtl;
  min-height: 100vh;
  padding-bottom: calc(95px + env(safe-area-inset-bottom, 0px)); /* space for bottom dock */
}

/* SMART TOPBAR - NEUBRUTALISM */
.smart-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--neo-white);
  border-bottom: var(--border-main);
  box-shadow: 0 3px 0px var(--neo-black);
  padding: 10px 16px;
}

.topbar-container {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.matany-top-logo {
  width: 38px;
  height: 38px;
  background: var(--neo-white);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-shadow: var(--shadow-sm);
}

.matany-top-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.topbar-titles {
  display: flex;
  flex-direction: column;
}

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

.topbar-brand-name {
  font-size: 0.98rem;
  font-weight: 900;
  color: var(--neo-black);
  letter-spacing: -0.3px;
}

.topbar-fue-pill {
  background: var(--primary-red);
  color: var(--neo-white);
  font-size: 0.65rem;
  font-weight: 900;
  padding: 1px 7px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--neo-black);
}

.topbar-sub {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-gray);
}

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

.student-chip {
  background: var(--neo-white);
  border: var(--border-subtle);
  box-shadow: var(--shadow-sm);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: monospace;
  color: var(--primary-red);
}

.chip-dot {
  width: 8px;
  height: 8px;
  background: var(--color-emerald);
  border-radius: 50%;
  border: 1px solid var(--neo-black);
}

.topbar-icon-btn {
  background: var(--neo-white);
  border: var(--border-subtle);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--neo-black);
  transition: transform 0.08s ease;
}

.topbar-icon-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--neo-black);
}

/* MAIN CONTAINER */
.app-main {
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 16px 20px 16px;
}

/* APP VIEWS */
.app-view {
  display: none;
}

.app-view.active {
  display: block;
}

/* NEUBRUTALISM CARDS */
.neo-card {
  background: var(--neo-white);
  border: var(--border-main);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-main);
  position: relative;
  margin-bottom: 14px;
}

/* VIEW HEADERS */
.view-header {
  margin-bottom: 12px;
}

.view-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--neo-black);
  line-height: 1.25;
}

.view-desc {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-gray);
  margin-top: 2px;
}

.card-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.card-section-title {
  font-size: 0.98rem;
  font-weight: 900;
  color: var(--neo-black);
}

.card-desc {
  font-size: 0.8rem;
  color: var(--color-gray);
  line-height: 1.4;
  margin-top: 4px;
}

/* AUTHENTICATION GATEWAY VIEW */
.auth-gate-view {
  display: none;
  padding-top: 10px;
}

.auth-gate-view.active {
  display: block;
}

.auth-gate-card {
  background: var(--neo-white);
  border: var(--border-main);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  box-shadow: var(--shadow-lg);
}

.auth-header {
  text-align: center;
  margin-bottom: 18px;
}

.auth-logo-center {
  width: 190px;
  max-width: 85%;
  height: 68px;
  margin: 0 auto 12px auto;
  background: var(--neo-white);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  border: var(--border-main);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-matany-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-fit: contain;
}

.auth-badge-fue {
  display: inline-block;
  background: #FEE2E2;
  color: var(--primary-red);
  border: 1.5px solid var(--neo-black);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.auth-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--neo-black);
  line-height: 1.2;
}

.auth-desc {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-gray);
  margin-top: 4px;
  line-height: 1.4;
}

.device-lock-banner {
  background: #FEF2F2;
  border: var(--border-subtle);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.device-lock-text {
  font-size: 0.76rem;
  line-height: 1.35;
  color: #7F1D1D;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.device-lock-text strong {
  font-weight: 900;
  color: var(--primary-red);
}

.form-group-neo {
  margin-bottom: 12px;
}

.neo-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--neo-black);
  margin-bottom: 4px;
}

.neo-input {
  width: 100%;
  background: var(--neo-white);
  border: var(--border-subtle);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 16px !important;
  font-family: inherit;
  font-weight: 700;
  color: var(--neo-black);
  outline: none;
  touch-action: manipulation;
}

.neo-input:focus {
  border-color: var(--primary-red);
}

.neo-input.code-font {
  font-family: monospace;
  font-size: 1.05rem;
  letter-spacing: 1px;
  font-weight: 800;
}

/* BUTTONS */
.neo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  border-radius: var(--radius-sm);
  border: var(--border-main);
  box-shadow: var(--shadow-main);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  user-select: none;
}

.neo-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--neo-black);
}

.btn-primary-blue {
  background: var(--brand-blue);
  color: var(--neo-white);
}

.btn-primary-blue:hover {
  background: var(--brand-blue-hover);
}

.btn-danger-red {
  background: #EF4444;
  color: var(--neo-white);
}

.btn-danger-red:hover {
  background: #DC2626;
}

.btn-primary-red {
  background: var(--primary-red);
  color: var(--neo-white);
}

.btn-primary-red:hover {
  background: var(--primary-red-hover);
}

.btn-emerald {
  background: var(--color-emerald);
  color: var(--neo-white);
}

.btn-emerald:hover {
  background: #047857;
}

.btn-subtle-dark {
  background: #F1F5F9;
  color: var(--neo-black);
}

.btn-subtle-dark:hover {
  background: #E2E8F0;
}

.btn-full {
  width: 100%;
}

.btn-large {
  padding: 12px 20px;
  font-size: 0.95rem;
}

.btn-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-row {
  display: flex;
  gap: 10px;
}

.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 14px; }

/* HERO LECTURE CARD */
.lecture-hero-card {
  background: var(--neo-white);
  border: var(--border-main);
  box-shadow: var(--shadow-main);
}

.lecture-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FEE2E2;
  color: var(--primary-red);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--neo-black);
}

.live-dot-solid {
  width: 7px;
  height: 7px;
  background: var(--primary-red);
  border-radius: 50%;
  border: 1px solid var(--neo-black);
}

.session-id-pill {
  font-size: 0.74rem;
  font-weight: 800;
  font-family: monospace;
  color: var(--neo-white);
  background: var(--neo-black);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

.lecture-hero-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--neo-black);
  line-height: 1.3;
  margin-bottom: 10px;
}

.lecture-hero-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F8FAFC;
  border: 1.5px solid var(--neo-black);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--neo-black);
}

.detail-pill svg {
  color: var(--primary-red);
}

/* ATTENDANCE ACTION CARD */
.status-pill {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid var(--neo-black);
}

.pill-yellow {
  background: #FEF3C7;
  color: #92400E;
}

.pill-green {
  background: #D1FAE5;
  color: #065F46;
}

.font-xs {
  font-size: 0.68rem;
}

/* CODE ENTRY BOX */
.code-entry-box {
  background: #F8FAFC;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 10px;
}

.code-head-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.input-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--neo-black);
}

.time-limit-badge {
  background: var(--neo-white);
  color: var(--primary-red);
  border: 1px solid var(--neo-black);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 800;
}

.code-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.code-digit-input {
  flex: 1;
  font-family: monospace;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-align: center;
  touch-action: manipulation;
  min-height: 46px;
}

.input-hint {
  font-size: 0.72rem;
  color: var(--color-gray);
  margin-top: 8px;
  line-height: 1.35;
  font-weight: 600;
}

.divider-or {
  text-align: center;
  position: relative;
  margin: 14px 0;
}

.divider-or::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--neo-black);
}

.divider-or span {
  position: relative;
  background: var(--neo-white);
  border: 1px solid var(--neo-black);
  padding: 1px 10px;
  font-size: 0.74rem;
  font-weight: 800;
  border-radius: 4px;
}

/* ATTENDANCE SUCCESS BOX */
.attendance-success-card {
  background: #059669;
  color: var(--neo-white);
  border: var(--border-main);
  box-shadow: var(--shadow-main);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.success-icon-wrap {
  width: 46px;
  height: 46px;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid var(--neo-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.success-heading {
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.2;
}

.success-student {
  font-size: 0.88rem;
  font-weight: 800;
  margin-top: 3px;
}

.success-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  opacity: 0.9;
  margin-top: 4px;
}

.success-portal-notice {
  font-size: 0.72rem;
  margin-top: 6px;
  background: rgba(0, 0, 0, 0.2);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  display: inline-block;
  font-weight: 800;
}

/* ============================================================
   FUE 3D DIGITAL STUDENT ID CARD & 3D INTERACTIVE ENGINE
   ============================================================ */
.fue-3d-scene {
  perspective: 1200px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 16px auto;
  user-select: none;
  touch-action: none;
}

.interactive-fue-card {
  width: 100%;
  aspect-ratio: 1.586 / 1;
  min-height: 222px;
  max-height: 236px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.4, 1);
  cursor: pointer;
  border-radius: 14px;
}

@media (max-width: 380px) {
  .interactive-fue-card {
    min-height: 212px;
  }
}

.interactive-fue-card.is-dragging {
  cursor: grabbing;
  transition: none;
}

/* SMART 7-SECOND GLASSMORPHISM FLIP HINT */
.card-flip-hint-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}

.card-flip-hint-overlay.active {
  opacity: 1;
}

.hint-flip-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.45);
  padding: 10px 18px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  animation: hintPulse 1.8s infinite alternate;
}

@keyframes hintPulse {
  0% { transform: scale(0.96); }
  100% { transform: scale(1.04); }
}

.hint-flip-badge span {
  font-size: 0.82rem;
  font-weight: 800;
  color: #FFFFFF;
}

.card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 2.5px solid #121212;
  box-shadow: 5px 5px 0px #121212;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: #FFFFFF;
  box-sizing: border-box;
}

/* Front Face */
.card-face-front {
  transform: rotateY(0deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #FFFFFF;
  direction: ltr !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Back Face */
.card-face-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  padding: 14px 16px 12px 16px;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

/* Realistic Plastic Glare Effect */
.card-glare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
  border-radius: 14px;
  z-index: 10;
}

/* Front Card Elements - Matching FUE Official Card Exactly */
.fue-front-topbar {
  background: #8A151B;
  color: #FFFFFF;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  position: relative;
  direction: ltr !important;
}

.fue-topbar-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.fue-year-txt {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  font-family: 'Cairo', Arial, sans-serif;
  line-height: 1;
}

.fue-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fue-brand-header-wrap {
  display: flex;
  align-items: center;
}

.fue-official-logo-img {
  height: 26px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}

.fue-shield-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 2px;
}

.fue-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
}

.fue-brand-title {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #FFFFFF;
}

.fue-brand-sub {
  font-size: 0.58rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.fue-brand-ar {
  font-size: 0.62rem;
  font-weight: 800;
  color: #FFFFFF;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

.fue-level-badge-row {
  display: flex;
  align-items: center;
}

.fue-level-tag {
  background: #FFFFFF;
  color: #8A151B;
  font-weight: 900;
  font-size: 0.68rem;
  padding: 2.5px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}

/* Card Center Details: Photo Left, Info Center, QR Right */
.fue-front-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  flex: 1;
  background: #FFFFFF;
  gap: 8px;
  box-sizing: border-box;
  direction: ltr !important;
  overflow: hidden;
}

.fue-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70px;
  flex-shrink: 0;
}

.fue-photo-frame {
  width: 66px;
  height: 78px;
  border-radius: 8px;
  border: 2px solid #CBD5E1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  background: #F8FAFC;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fue-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.fue-serial-dots {
  font-size: 0.95rem;
  font-weight: 900;
  color: #8A151B;
  margin-top: 4px;
  letter-spacing: 2px;
  font-family: monospace;
  line-height: 1;
  text-align: center;
}

.fue-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  gap: 5px;
  padding: 0 4px;
  direction: ltr !important;
  overflow: hidden;
}

.fue-info-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fue-lbl-bilingual {
  font-size: 0.58rem;
  font-weight: 800;
  color: #64748B;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.fue-val-name {
  font-size: 0.82rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.18;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fue-val-fac {
  font-size: 0.74rem;
  font-weight: 800;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.fue-id-block {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fue-id-txt {
  font-size: 0.92rem;
  font-weight: 900;
  color: #8A151B;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
}

/* High-Contrast Unclipped QR Code Column */
.fue-qr-col {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fue-qr-canvas-wrapper {
  width: 58px;
  height: 58px;
  padding: 2px;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.fue-qr-canvas-wrapper canvas {
  width: 62px !important;
  height: 62px !important;
  display: block;
}

/* Card Bottom Bar */
.fue-front-footer {
  background: #8A151B;
  color: #FFFFFF;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  min-height: 30px;
  box-sizing: border-box;
  direction: ltr !important;
}

.fue-footer-phone-col {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.fue-phone-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fue-phone-num {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.fue-web-link {
  font-size: 0.58rem;
  opacity: 0.9;
}

.fue-footer-badges-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.fue-rankings-badge-img {
  height: 18px;
  max-width: 145px;
  object-fit: contain;
  display: block;
}

/* Back Card Elements */
.fue-back-crest {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.fue-back-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fue-back-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: #8A151B;
  line-height: 1.2;
}

.fue-back-title-en {
  font-size: 0.65rem;
  color: #475569;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.fue-back-notice {
  font-size: 0.68rem;
  font-weight: 700;
  color: #334155;
  margin: 0;
  line-height: 1.35;
}

.fue-back-phone-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #FEE2E2;
  color: #8A151B;
  border: 1.5px solid #8A151B;
  border-radius: 999px;
  padding: 3.5px 14px;
  font-weight: 900;
  font-size: 0.76rem;
  line-height: 1;
}

/* 3D Interaction Controls */
.card-3d-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.card-3d-hint {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  margin-top: 6px;
}

/* ============================================================
   10/10 ULTRA-HIGH-TECH CARD SCAN SIMULATOR & HUD ANIMATION
   ============================================================ */
/* ============================================================
   SEAMLESS 3D CARD SHOWCASE (CLEAN PURE WHITE, INTERACTIVE SCAN & PAUSE)
   ============================================================ */
.auth-3d-card-stage {
  width: 100%;
  max-width: 330px;
  height: 250px;
  margin: 10px auto 14px auto;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
  touch-action: manipulation;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 16px;
}

.auth-3d-card-stage:active,
.auth-3d-card-stage.is-paused {
  cursor: grabbing;
  transform: scale(0.985);
}

.card-rotating-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  pointer-events: none;
  background: #FFFFFF;
  mix-blend-mode: multiply;
  filter: none;
}

/* CLEAN SCANNING LINE (SHARP, ZERO GLOWING, NEUBRUTALIST PRECISION) */
.card-scan-laser-beam {
  position: absolute;
  top: 14px;
  left: 28px;
  right: 28px;
  height: 2px;
  pointer-events: none;
  z-index: 3;
  background: #2563EB;
  border-radius: 2px;
  box-shadow: none !important;
  animation: cardLaserScanSweep 2.8s ease-in-out infinite alternate;
  will-change: transform;
}

.auth-3d-card-stage.is-paused .card-scan-laser-beam {
  animation-play-state: paused;
  background: #64748B;
  box-shadow: none !important;
}

@keyframes cardLaserScanSweep {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(182px);
  }
}

/* Status HUD Pill above card */
.hud-status-badge {
  background: #0F172A;
  color: #F8FAFC;
  border: 1.5px solid #334155;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  position: relative;
  overflow: hidden;
}

.hud-status-seeking,
.hud-status-locked {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.3s ease;
}

.hud-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0B63E5;
  animation: pulseDot 1.2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.6; box-shadow: 0 0 0 0 rgba(11, 99, 229, 0.7); }
  70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 6px rgba(11, 99, 229, 0); }
  100% { transform: scale(0.9); opacity: 0.6; }
}

.hud-status-seeking {
  animation: seekingFade 5s infinite;
}

.hud-status-locked {
  position: absolute;
  color: #10B981;
  animation: lockedFade 5s infinite;
}

@keyframes seekingFade {
  0%, 40% { opacity: 1; transform: translateY(0); }
  50%, 85% { opacity: 0; transform: translateY(-8px); }
  95%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes lockedFade {
  0%, 45% { opacity: 0; transform: translateY(8px); }
  55%, 85% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(8px); }
}

/* Tutorial Card Outer Container */
.tutorial-card-container {
  position: relative;
  width: 100%;
  border-radius: 12px;
}

/* HUD Viewfinder Overlay (Matches Image 3 live camera view) */
.hud-viewfinder-overlay {
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  pointer-events: none;
  z-index: 25;
  border: 1.5px solid rgba(11, 99, 229, 0.4);
  box-shadow: 0 0 16px rgba(11, 99, 229, 0.15), inset 0 0 14px rgba(11, 99, 229, 0.08);
  animation: viewfinderBreathe 5s ease-in-out infinite;
  direction: ltr !important;
}

@keyframes viewfinderBreathe {
  0%, 100% { border-color: rgba(11, 99, 229, 0.4); box-shadow: 0 0 14px rgba(11, 99, 229, 0.15); }
  50% { border-color: rgba(16, 185, 129, 0.6); box-shadow: 0 0 20px rgba(16, 185, 129, 0.25); }
}

/* 4 Corner Brackets of Card Frame */
.hud-card-bracket {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: #0B63E5;
  border-style: solid;
  border-width: 0;
  transition: border-color 0.4s ease;
}

.bracket-tl { top: -2px; left: -2px; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 6px; }
.bracket-tr { top: -2px; right: -2px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 6px; }
.bracket-bl { bottom: -2px; left: -2px; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 6px; }
.bracket-br { bottom: -2px; right: -2px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 6px; }

/* Targeted QR Code Reticle on the RIGHT (Image 3) */
.hud-qr-lock-target {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 78px;
  height: 78px;
  border-radius: 8px;
  border: 2px solid rgba(11, 99, 229, 0.7);
  background: rgba(11, 99, 229, 0.06);
  box-shadow: 0 0 12px rgba(11, 99, 229, 0.3);
  animation: qrTargetLock 5s ease-in-out infinite;
  overflow: hidden;
}

@keyframes qrTargetLock {
  0%, 40% {
    border-color: #0B63E5;
    background: rgba(11, 99, 229, 0.08);
    box-shadow: 0 0 14px rgba(11, 99, 229, 0.35);
    transform: translateY(-50%) scale(1);
  }
  50%, 85% {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.16);
    box-shadow: 0 0 22px rgba(16, 185, 129, 0.6), inset 0 0 10px rgba(16, 185, 129, 0.2);
    transform: translateY(-50%) scale(1.04);
  }
  95%, 100% {
    border-color: #0B63E5;
    background: rgba(11, 99, 229, 0.08);
    box-shadow: 0 0 14px rgba(11, 99, 229, 0.35);
    transform: translateY(-50%) scale(1);
  }
}

.qr-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: #0B63E5;
  border-style: solid;
  border-width: 0;
  transition: border-color 0.3s;
}

.qrc-tl { top: -1px; left: -1px; border-top-width: 2.5px; border-left-width: 2.5px; }
.qrc-tr { top: -1px; right: -1px; border-top-width: 2.5px; border-right-width: 2.5px; }
.qrc-bl { bottom: -1px; left: -1px; border-bottom-width: 2.5px; border-left-width: 2.5px; }
.qrc-br { bottom: -1px; right: -1px; border-bottom-width: 2.5px; border-right-width: 2.5px; }

/* Sweeping Electric-Blue Laser Bar */
.hud-laser-sweep {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #06B6D4, #0B63E5, #06B6D4, transparent);
  box-shadow: 0 0 10px #06B6D4, 0 0 2px #FFFFFF;
  animation: hudLaserScan 5s ease-in-out infinite;
}

@keyframes hudLaserScan {
  0% { top: 4%; opacity: 0; }
  10% { opacity: 1; }
  42% { top: 92%; opacity: 1; }
  48% { opacity: 0; }
  52%, 85% { opacity: 0; }
  90% { top: 4%; opacity: 0; }
  100% { top: 4%; opacity: 0; }
}

/* Success Lock Ping Ring */
.hud-lock-ping {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10B981;
  opacity: 0;
  animation: hudPing 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hudPing {
  0%, 48% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  52% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  68% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); }
  100% { opacity: 0; }
}

/* 3D Realistic FUE Card */
.tutorial-3d-card {
  width: 100%;
  height: 195px;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 12px;
  border: 2px solid var(--neo-black);
  box-shadow: 5px 5px 0px var(--neo-black);
  background: #FFFFFF;
  overflow: hidden;
  animation: tutorialFloatSmooth 6s ease-in-out infinite;
  direction: ltr !important;
}

@keyframes tutorialFloatSmooth {
  0% { transform: rotateY(-3deg) rotateX(4deg) scale(0.99); }
  50% { transform: rotateY(3deg) rotateX(-2deg) scale(1.01); }
  100% { transform: rotateY(-3deg) rotateX(4deg) scale(0.99); }
}

/* ============================================================
   EMERGENCY ACCESS KEY VAULT
   ============================================================ */
.vault-key-container {
  background: #18181B;
  color: #FAFAFA;
  border: 2.5px solid #121212;
  box-shadow: 4px 4px 0px #121212;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  direction: ltr;
}

.vault-key-text {
  font-family: 'Courier New', monospace;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #34D399;
}

.vault-actions {
  display: flex;
  gap: 6px;
}

.btn-vault-action {
  background: #27272A;
  color: #FAFAFA;
  border: 1.5px solid #52525B;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.1s ease;
}

.btn-vault-action:hover {
  background: #3F3F46;
  border-color: #34D399;
}

/* STATS METRIC GRID */
.stats-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.metric-card {
  border: var(--border-subtle);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bg-neo-crimson {
  background: var(--primary-red);
  color: var(--neo-white);
}

.bg-neo-crimson .metric-label {
  color: #FEE2E2;
}

.bg-neo-crimson .metric-sub {
  color: #FFFFFF;
}

.bg-neo-white {
  background: var(--neo-white);
  color: var(--neo-black);
}

.metric-label {
  font-size: 0.68rem;
  font-weight: 800;
}

.metric-num {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.2;
  margin: 3px 0;
}

.text-crimson {
  color: var(--primary-red);
}

.metric-sub {
  font-size: 0.62rem;
  font-weight: 700;
}

/* TIMELINE LIST */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8FAFC;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.timeline-badge-check {
  width: 24px;
  height: 24px;
  background: var(--color-emerald);
  border: 1px solid var(--neo-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.timeline-content strong {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--neo-black);
}

.timeline-content span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-gray);
}

/* SECURITY & BIOMETRIC CARD */
.bio-visual-box {
  background: #F8FAFC;
  border: var(--border-subtle);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.bio-icon-large {
  width: 56px;
  height: 56px;
  background: var(--neo-white);
  border: var(--border-subtle);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.bio-visual-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bio-visual-info strong {
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--neo-black);
}

.bio-visual-info span {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-gray);
  line-height: 1.35;
}

.device-binding-info-box {
  background: #F8FAFC;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 10px;
}

.device-bind-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px dashed #CBD5E1;
}

.bind-lbl {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-gray);
}

.device-bind-row strong {
  font-family: monospace;
  font-size: 0.95rem;
  color: var(--primary-red);
}

.bind-warning-txt {
  font-size: 0.72rem;
  font-weight: 700;
  color: #7F1D1D;
  margin-top: 8px;
  line-height: 1.35;
}

/* NEUBRUTALISM SMART BOTTOM DOCK */
.smart-bottom-dock {
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  z-index: 95;
  background: var(--neo-white);
  border: 2px solid var(--neo-black);
  box-shadow: 0 4px 0 var(--neo-black);
  border-radius: 18px;
  padding: 6px 8px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  box-sizing: border-box;
}

.smart-bottom-dock.dock-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 40px);
}

.dock-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.dock-item {
  flex: 1;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  cursor: pointer;
  color: #64748B;
  font-family: inherit;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.dock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.dock-label {
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.dock-item:hover {
  color: var(--neo-black);
}

.dock-item.active {
  background: var(--brand-blue);
  color: #FFFFFF;
  border: 1.5px solid var(--neo-black);
  box-shadow: 2px 2px 0 var(--neo-black);
}

.dock-item.active .dock-icon svg {
  stroke: #FFFFFF;
}

.dock-item.active .dock-label {
  color: #FFFFFF;
  font-weight: 900;
}

/* MODALS */
.camera-modal-overlay,
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(18, 18, 18, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.camera-modal-card,
.modal-card {
  background: var(--neo-white);
  border: var(--border-main);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: 18px;
  width: 100%;
  max-width: 440px;
}

.camera-modal-header,
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.camera-modal-header strong,
.modal-header h3 {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--neo-black);
}

.btn-icon-close {
  background: #F1F5F9;
  border: 1.5px solid var(--neo-black);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 900;
  cursor: pointer;
  color: var(--neo-black);
}

/* Camera Modal Header Actions & Torch Toggle */
.camera-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-torch-toggle {
  background: #EFF6FF;
  border: 1.5px solid var(--neo-black);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--brand-blue);
  transition: all 0.15s ease;
}

.btn-torch-toggle.torch-active {
  background: #F59E0B;
  color: #000000;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

.camera-modal-title {
  font-size: 1rem;
  font-weight: 900;
  color: var(--neo-black);
  margin: 0;
}

/* CAMERA VIEWPORT FRAME (IMAGE 3 MATCHING) */
.camera-viewport-frame {
  position: relative;
  width: 100%;
  height: 270px;
  background: #000000;
  border: 2.5px solid var(--neo-black);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card Guide (Clean White Reticle matching physical FUE card dimensions) */
.camera-card-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 350px;
  aspect-ratio: 1.58 / 1;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  display: block;
  box-sizing: border-box;
  direction: ltr !important;
}

/* Corner Highlights for Card Guide */
.guide-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: #FFFFFF;
  border-style: solid;
  border-width: 0;
}

.gc-tl { top: -2px; left: -2px; border-top-width: 3.5px; border-left-width: 3.5px; border-top-left-radius: 6px; }
.gc-tr { top: -2px; right: -2px; border-top-width: 3.5px; border-right-width: 3.5px; border-top-right-radius: 6px; }
.gc-bl { bottom: -2px; left: -2px; border-bottom-width: 3.5px; border-left-width: 3.5px; border-bottom-left-radius: 6px; }
.gc-br { bottom: -2px; right: -2px; border-bottom-width: 3.5px; border-right-width: 3.5px; border-bottom-right-radius: 6px; }

/* Targeted QR Code Reticle on the RIGHT (Clean White outline, matching Image 5 card position) */
.camera-card-qr-reticle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 25%;
  aspect-ratio: 1 / 1;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-target-tag {
  position: absolute;
  bottom: 3px;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.7);
  padding: 1px 4px;
  border-radius: 2px;
}

/* Centered Lecture QR Reticle (For Classroom Attendance) */
.camera-lecture-qr-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
  height: 190px;
  border: 2.5px solid #FFFFFF;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  overflow: hidden;
}

/* Reticle Corners */
.reticle-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: #FFFFFF;
  border-style: solid;
  border-width: 0;
}

.rc-tl { top: -1px; left: -1px; border-top-width: 3px; border-left-width: 3px; }
.rc-tr { top: -1px; right: -1px; border-top-width: 3px; border-right-width: 3px; }
.rc-bl { bottom: -1px; left: -1px; border-bottom-width: 3px; border-left-width: 3px; }
.rc-br { bottom: -1px; right: -1px; border-bottom-width: 3px; border-right-width: 3px; }

/* Camera Laser Beam (Clean White, No Neon Green) */
.camera-laser-beam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #FFFFFF, transparent);
  box-shadow: 0 0 6px #FFFFFF;
  animation: cameraLaserScan 2s ease-in-out infinite;
}

@keyframes cameraLaserScan {
  0% { top: 4%; }
  50% { top: 92%; }
  100% { top: 4%; }
}

.camera-modal-hint {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--neo-black);
  margin-top: 10px;
}

.camera-fallback-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--brand-blue);
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  margin-top: 6px;
  padding: 4px;
  text-decoration: underline;
  width: 100%;
}

.camera-fallback-link:hover {
  color: var(--brand-blue-hover);
}

/* ============================================================
   CAMERA PERMISSION ASSISTANT MODAL (BLOCKAGE REMEDIATION)
   ============================================================ */
.camera-permission-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.camera-permission-card {
  background: #FFFFFF;
  border: 3px solid var(--neo-black);
  border-radius: var(--radius-md);
  box-shadow: 8px 8px 0px var(--neo-black);
  padding: 24px 20px;
  max-width: 440px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.perm-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #EFF6FF;
  border: 2px solid var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.perm-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--neo-black);
  margin: 0;
}

.perm-desc {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.45;
  margin: 6px 0 12px 0;
}

.perm-guide-box {
  width: 100%;
  background: #F8FAFC;
  border: 2px solid #E2E8F0;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
  box-sizing: border-box;
}

.perm-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.perm-step-num {
  background: var(--brand-blue);
  color: #FFFFFF;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}

.perm-step-text {
  font-size: 0.8rem;
  color: #1E293B;
  line-height: 1.4;
  flex: 1;
}

.perm-step-text strong {
  color: #0F172A;
}

.support-partner-card {
  background: #FEE2E2;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
}

.partner-badge {
  background: var(--primary-red);
  color: var(--neo-white);
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  display: inline-block;
  margin-bottom: 4px;
}

.support-partner-card h4 {
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--primary-red);
}

.support-partner-card p {
  font-size: 0.74rem;
  color: var(--neo-black);
  margin-top: 3px;
  line-height: 1.35;
  font-weight: 600;
}

.contact-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #CBD5E1;
  font-size: 0.76rem;
}

.contact-entry .lbl {
  color: var(--color-gray);
  font-weight: 800;
}

.contact-entry strong {
  color: var(--neo-black);
  font-family: monospace;
}

.hidden {
  display: none !important;
}

/* NEUBRUTALISM DYNAMIC STATUS FEEDBACK BANNER */
.status-banner {
  margin: 14px 0;
  padding: 12px 14px;
  border: 2.5px solid var(--neo-black);
  border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0px var(--neo-black);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: bannerPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bannerPop {
  0% { transform: scale(0.97); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.status-banner.banner-success {
  background: #F0FDF4;
  border-color: #059669;
  box-shadow: 3px 3px 0px #059669;
  color: #065F46;
}

.status-banner.banner-already {
  background: #EFF6FF;
  border-color: #2563EB;
  box-shadow: 3px 3px 0px #2563EB;
  color: #1E40AF;
}

.status-banner.banner-expired {
  background: #FEF2F2;
  border-color: #DC2626;
  box-shadow: 3px 3px 0px #DC2626;
  color: #991B1B;
}

.status-banner.banner-ancient {
  background: #FFF1F2;
  border-color: #9F1239;
  box-shadow: 3px 3px 0px #9F1239;
  color: #881337;
}

.status-banner.banner-warning {
  background: #FFFBEB;
  border-color: #D97706;
  box-shadow: 3px 3px 0px #D97706;
  color: #92400E;
}

.status-banner.banner-error {
  background: #FEF2F2;
  border-color: var(--neo-black);
  box-shadow: 3px 3px 0px var(--neo-black);
  color: #991B1B;
}

.banner-icon-wrap {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.banner-body {
  flex: 1;
}

.banner-title {
  display: block;
  font-size: 0.94rem;
  font-weight: 900;
  margin-bottom: 2px;
}

.banner-desc {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

/* HISTORY SUMMARY BAR */
.history-summary-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.summary-stat {
  flex: 1;
  background: var(--neo-white);
  border: var(--border-main);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
}

.stat-lbl {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--color-gray);
}

.stat-val {
  display: block;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--neo-black);
  margin-top: 2px;
}

.text-emerald {
  color: #059669 !important;
}

/* NATIVE BIOMETRIC MODAL - NEUBRUTALISM ZERO GLITCH */
.biometric-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(18, 18, 18, 0.78);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.15s ease-out;
}

.biometric-modal-card {
  background: var(--neo-white);
  border: var(--border-main);
  box-shadow: 6px 6px 0px var(--neo-black);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  direction: rtl;
}

.bio-device-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FEF2F2;
  border: 1.5px solid var(--primary-red);
  color: var(--primary-red);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.bio-sensor-visual {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px auto;
  border-radius: 50%;
  border: 2.5px solid var(--neo-black);
  box-shadow: 3px 3px 0px var(--neo-black);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8FAFC;
  position: relative;
  transition: all 0.25s ease;
  user-select: none;
}

.bio-sensor-visual.scanning {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 5px rgba(185, 28, 28, 0.15);
  animation: pulseSensor 1.4s infinite ease-in-out;
}

.bio-sensor-visual.success {
  background: #ECFDF5;
  border-color: #059669;
  box-shadow: 4px 4px 0px #065F46;
  transform: scale(1.05);
}

.bio-sensor-visual svg {
  width: 50px;
  height: 50px;
  transition: all 0.2s ease;
}

@keyframes pulseSensor {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.bio-modal-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--neo-black);
  margin-bottom: 6px;
}

.bio-modal-desc {
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 14px;
  line-height: 1.4;
}

.bio-scan-status {
  background: #F1F5F9;
  border: 1.5px solid var(--neo-black);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--neo-black);
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

.bio-scan-status.success {
  background: #ECFDF5;
  border-color: #059669;
  color: #065F46;
}

.btn-icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}

/* Topbar Extension Download Button */
.topbar-ext-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FEF08A;
  color: var(--neo-black);
  border: 1.5px solid var(--neo-black);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 2px 2px 0px var(--neo-black);
  transition: all 0.15s ease;
}

.topbar-ext-btn:hover {
  background: #FDE047;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--neo-black);
}

.topbar-ext-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--neo-black);
}

/* Instant Auto-Attendance Fullscreen Overlay */
.instant-attend-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 18, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 18px;
}

.instant-attend-card {
  width: 100%;
  max-width: 440px;
  background: #FFFFFF;
  border: 3.5px solid var(--neo-black);
  border-radius: var(--radius-md);
  box-shadow: 8px 8px 0px var(--neo-black);
  padding: 28px 22px;
  text-align: center;
  animation: popInModal 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.instant-state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.instant-radar-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.instant-radar-circle {
  width: 76px;
  height: 76px;
  background: #FEE2E2;
  border: 3px solid var(--primary-red);
  border-radius: 50%;
  position: absolute;
}

.instant-radar-pulse {
  position: absolute;
  inset: 0;
  border: 3px solid var(--primary-red);
  border-radius: 50%;
  animation: radarPulse 1.4s infinite ease-out;
}

@keyframes radarPulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.4); opacity: 0; }
}

.instant-radar-icon {
  position: relative;
  z-index: 2;
  animation: floatIcon 2s infinite ease-in-out;
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.instant-attend-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--neo-black);
  margin-bottom: 6px;
}

.instant-attend-title.text-emerald {
  color: #047857;
}

.instant-attend-title.text-red {
  color: var(--primary-red);
}

.instant-attend-sub {
  font-size: 0.83rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 16px;
  line-height: 1.45;
}

.instant-student-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #F8FAFC;
  border: 2px solid var(--neo-black);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--neo-black);
  box-shadow: 2px 2px 0px var(--neo-black);
  margin-top: 4px;
}

.instant-id-pill {
  background: var(--primary-red);
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.8rem;
}

.instant-success-icon-wrap {
  width: 78px;
  height: 78px;
  background: #10B981;
  border: 3px solid var(--neo-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 4px 4px 0px var(--neo-black);
  animation: successPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.instant-error-icon-wrap {
  width: 72px;
  height: 72px;
  background: var(--primary-red);
  border: 3px solid var(--neo-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 4px 4px 0px var(--neo-black);
}

.instant-summary-box {
  width: 100%;
  background: #F8FAFC;
  border: 2px solid var(--neo-black);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: right;
  margin-bottom: 8px;
  box-shadow: 3px 3px 0px var(--neo-black);
}

.summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed #CBD5E1;
  font-size: 0.82rem;
  color: #334155;
}

.summary-line:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.summary-line strong {
  color: var(--neo-black);
  font-weight: 800;
}

/* ============================================================
   MINIMALIST ONBOARDING STEP 2 & CHECKMARK ANIMATION
   ============================================================ */
.auth-success-box {
  background: #FFFFFF;
  border: 2.5px solid var(--neo-black);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.auth-success-check-pulse {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark-circle-svg {
  width: 56px;
  height: 56px;
  display: block;
}

.checkmark-circle-ring {
  stroke: #10B981;
  stroke-width: 3;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: strokeRing 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check-path {
  stroke: #10B981;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: strokeCheck 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

@keyframes strokeRing {
  100% { stroke-dashoffset: 0; }
}

@keyframes strokeCheck {
  100% { stroke-dashoffset: 0; }
}

.auth-step-tag {
  background: #EFF6FF;
  color: var(--brand-blue);
  border: 1.5px solid var(--brand-blue);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 900;
}

.auth-success-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--neo-black);
  margin: 0;
}

.auth-3d-preview-scene {
  max-width: 360px;
  margin: 10px auto 14px auto;
}

.auth-3d-hint {
  font-size: 0.84rem;
  font-weight: 700;
  color: #475569;
  margin: 2px 0 10px 0;
  text-align: center;
}

.auth-step-pill {
  display: inline-flex;
  align-items: center;
  background: #E0E7FF;
  color: #1D4ED8;
  border: 1.5px solid #1E40AF;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 999px;
}

.btn-subtle-white {
  background: var(--neo-white);
  color: var(--neo-black);
  border: var(--border-main);
  box-shadow: var(--shadow-sm);
  font-weight: 800;
}

.btn-subtle-white:hover {
  background: #F8FAFC;
}

.reticle-success {
  border-color: #10B981 !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.45) !important;
}

.auth-student-card-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F8FAFC;
  border: 2px solid #E2E8F0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  text-align: right;
}

.auth-student-avatar-frame {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--neo-black);
  overflow: hidden;
  background: #E2E8F0;
  flex-shrink: 0;
}

.auth-student-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-student-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow: hidden;
}

.auth-student-name {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--neo-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-student-id {
  font-size: 0.8rem;
  font-weight: 800;
  color: #64748B;
  font-family: monospace;
}

.auth-student-fac {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0B63E5;
}

.auth-step2-hint {
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.45;
  margin: 0;
}

/* ============================================================
   CROSS-DEVICE SMART TRANSFER MODALS
   ============================================================ */
.device-transfer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.device-transfer-card {
  background: #FFFFFF;
  border: 3px solid var(--neo-black);
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0px var(--neo-black);
  padding: 28px 22px;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  box-sizing: border-box;
}

.transfer-radar-icon, .transfer-alert-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EFF6FF;
  border: 2.5px solid var(--brand-blue);
  box-shadow: 3px 3px 0px var(--neo-black);
}

.transfer-alert-icon {
  background: #FEF3C7;
  border-color: #F59E0B;
}

.transfer-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--neo-black);
  margin: 0;
}

.transfer-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

.transfer-pulse-status {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border: 1.5px solid #CBD5E1;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

.transfer-pulse-status .pulse-ring {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-blue);
  animation: radarPulse 1.5s infinite;
  flex-shrink: 0;
}

/* Pending Transfer Banner in Security View */
.pending-transfer-banner {
  background: #FEF3C7;
  border: 2px solid #F59E0B;
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}

.pending-transfer-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  color: #92400E;
  font-size: 0.92rem;
}

.pending-transfer-body {
  font-size: 0.82rem;
  color: #78350F;
  line-height: 1.4;
}

.pending-transfer-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* White-Themed Device Management & Encrypted Vault Key */
.device-hwid-text {
  font-family: 'Courier New', monospace;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--brand-blue);
  word-break: break-all;
}

.vault-key-container-white {
  background: #F8FAFC;
  color: #0F172A;
  border: 2px solid var(--neo-black);
  box-shadow: 3px 3px 0px var(--neo-black);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  direction: ltr;
}

.vault-key-text-white {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #0F172A;
}

.btn-vault-action-white {
  background: #FFFFFF;
  color: var(--neo-black);
  border: 1.5px solid var(--neo-black);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 1px 1px 0px var(--neo-black);
  transition: all 0.1s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-vault-action-white:hover {
  background: #F1F5F9;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0px var(--neo-black);
}

.card-inner-divider {
  border: none;
  border-top: 1.5px dashed #CBD5E1;
  margin: 16px 0;
}

/* ==========================================================================
   PERMANENT RIOT / TAMPER LOCKDOWN SCREEN (STRICTLY NO BUTTONS, NO LINKS)
   ========================================================================== */
.screen-permanent-riot-ban {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  background: radial-gradient(circle at center, #1E1012 0%, #080304 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  user-select: none;
  animation: riotFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes riotFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.screen-permanent-riot-ban.hidden {
  display: none !important;
}

.riot-ban-card {
  background: #0F0809;
  border: 4px solid #DC2626;
  box-shadow: 10px 10px 0px #000000, 0 0 40px rgba(220, 38, 38, 0.35);
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  padding: 32px 24px;
  text-align: center;
  box-sizing: border-box;
  color: #FFFFFF;
}

.riot-ban-shield-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.riot-ban-fue-logo {
  height: 48px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.riot-ban-icon-circle {
  width: 88px;
  height: 88px;
  background: rgba(220, 38, 38, 0.12);
  border: 3px solid #DC2626;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  box-shadow: 0 0 25px rgba(220, 38, 38, 0.4);
  animation: riotPulse 2s infinite ease-in-out;
}

@keyframes riotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(220, 38, 38, 0.3); }
  50% { transform: scale(1.05); box-shadow: 0 0 35px rgba(220, 38, 38, 0.6); }
}

.riot-ban-badge {
  display: inline-block;
  background: #DC2626;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 0.8rem;
  padding: 4px 14px;
  border-radius: 6px;
  border: 2px solid #000000;
  box-shadow: 2px 2px 0px #000000;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.riot-ban-title {
  font-size: 1.55rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 10px 0;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(220, 38, 38, 0.5);
}

.riot-ban-message {
  font-size: 1.25rem;
  font-weight: 800;
  color: #F87171;
  margin: 0 0 22px 0;
  line-height: 1.4;
}

.riot-ban-details {
  background: #1A0D0F;
  border: 2px solid #7F1D1D;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.riot-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  border-bottom: 1px dashed rgba(220, 38, 38, 0.2);
  padding-bottom: 8px;
}

.riot-meta-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.riot-meta-item .meta-lbl {
  color: #94A3B8;
  font-weight: 700;
}

.riot-meta-item .meta-val {
  color: #F1F5F9;
  font-weight: 800;
}

.riot-meta-item .meta-val.text-red {
  color: #EF4444;
}

.riot-security-notice {
  font-size: 0.82rem;
  font-weight: 700;
  color: #94A3B8;
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #331014;
  border-radius: 6px;
  padding: 10px 14px;
}

/* ==========================================================================
   AVQR CINEMATIC SMART LOADING SPLASH (PURE WHITE CANVAS, SMART CROPPING)
   ========================================================================== */
.avqr-smart-splash {
  position: fixed;
  inset: 0;
  z-index: 999999999;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px 36px 16px;
  box-sizing: border-box;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s ease;
  user-select: none;
  overflow: hidden;
}

.avqr-smart-splash.dismissed {
  opacity: 0;
  transform: scale(1.02);
  visibility: hidden;
  pointer-events: none;
}

.splash-inner-content {
  width: 100%;
  max-width: 440px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.splash-video-container {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 260px;
  background-color: #FFFFFF;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.splash-brand-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #FFFFFF;
  z-index: 1;
  text-align: center;
}

.splash-fallback-logo {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.splash-fallback-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: 0.5px;
}

.splash-fallback-sub {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748B;
}

.splash-fallback-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #E2E8F0;
  border-top-color: #0B63E5;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-top: 6px;
}

.splash-video-element {
  width: 100%;
  max-width: 320px;
  max-height: 56vh;
  object-fit: contain;
  background-color: #FFFFFF;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  mix-blend-mode: multiply;
}

.splash-bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-bottom: 6px;
}

.splash-with-label {
  font-size: 0.82rem;
  font-weight: 900;
  color: #94A3B8;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  position: relative;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.splash-with-label::before,
.splash-with-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 26px;
  height: 1.5px;
  background: #E2E8F0;
}

.splash-with-label::before {
  right: 100%;
  margin-right: 12px;
}

.splash-with-label::after {
  left: 100%;
  margin-left: 12px;
}

.splash-partner-slider {
  position: relative;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-partner-slide {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.splash-partner-slide.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.splash-partner-slide.exit {
  opacity: 0;
  transform: translateY(-14px) scale(0.94);
  pointer-events: none;
}

.partner-img-fue {
  height: 48px;
  max-width: 175px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(196, 18, 48, 0.15));
}

.partner-img-moodle {
  height: 38px;
  max-width: 160px;
  object-fit: contain;
}

/* 3. MATANY GROUP (CLEAN TYPOGRAPHY WITH MONOGRAM) */
.partner-matany-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.partner-img-matany-m {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: contain;
}

.partner-text-matany {
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.5px;
  display: inline-block;
}

/* 4. UPSTORE.ONE */
.partner-upstore-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.partner-img-upstore {
  height: 38px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.partner-text-upstore {
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.5px;
}