/**
 * ============================================================================
 * Chaitanya 2k26 — Auth Modal & Dialog Styles (Original Website UI Theme)
 * ============================================================================
 * Matches the original Noomo Labs / Chaitanya 2k26 aesthetic:
 * - Frosted ethereal glassmorphism with subtle noise texture
 * - Bold black DrukMedium display headers
 * - Crisp IBM Plex Mono uppercase monospace typography & bracketed tags
 * - High-contrast black/white pill buttons and circular accents
 * - Clean pill form inputs with fine borders and bold focus states
 */

/* Modal Root Overlay - Frosted luminous blur */
.chaitanya-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 232, 252, 0.45);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px;
  box-sizing: border-box;
}

.chaitanya-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Main Modal Card */
.chaitanya-modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  background-color: rgba(255, 255, 255, 0.88);
  background-image: url(/images/footerPatern.png);
  background-repeat: repeat;
  background-size: 80px;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  border: 2px solid #ffffff;
  box-shadow: 
    0 30px 90px rgba(0, 40, 120, 0.12),
    0 4px 20px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 #ffffff;
  border-radius: 28px;
  padding: 32px 32px 28px;
  color: #000000;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.3s ease;
  box-sizing: border-box;
}

.chaitanya-modal-card::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.chaitanya-modal-backdrop.active .chaitanya-modal-card {
  transform: translateY(0) scale(1);
}

.chaitanya-modal-card.admin-wide {
  max-width: 920px;
}

/* Corner Accents */
.chaitanya-modal-card .corner {
  position: absolute;
  color: rgba(0, 0, 0, 0.28);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}
.chaitanya-modal-card .corner-tl { top: 12px; left: 16px; }
.chaitanya-modal-card .corner-tr { top: 12px; right: 16px; }
.chaitanya-modal-card .corner-bl { bottom: 12px; left: 16px; }
.chaitanya-modal-card .corner-br { bottom: 12px; right: 16px; }

/* Close Button */
.chaitanya-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: #ffffff;
  border: 1.5px solid #000000;
  color: #000000;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-transform: uppercase;
}

.chaitanya-modal-close:hover {
  background: #000000;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Headers */
.chaitanya-modal-header {
  text-align: center;
  margin-bottom: 18px;
}

.chaitanya-modal-tag {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: 6px;
}

.chaitanya-modal-title {
  font-family: "DrukMedium", sans-serif;
  font-size: 48px;
  line-height: 0.88;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #000000;
  margin: 0 0 8px;
}

.chaitanya-modal-subtitle {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #555555;
  margin: 0 auto;
  max-width: 420px;
  line-height: 1.45;
}

/* Notice / Banner */
.chaitanya-modal-banner {
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: #111111;
  line-height: 1.45;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* display:flex above would otherwise override the hidden attribute and show
   the empty #auth-error-box as a blank yellow bar. */
.chaitanya-modal-banner[hidden],
.chaitanya-modal-banner:empty {
  display: none;
}

.chaitanya-modal-banner.warning {
  background: rgba(254, 187, 37, 0.14);
  border-color: rgba(254, 187, 37, 0.7);
  color: #6a4400;
}

.chaitanya-modal-banner.danger {
  background: rgba(228, 0, 29, 0.08);
  border-color: rgba(228, 0, 29, 0.45);
  color: #8c000e;
}

/* Google Sign-in Button — Iconic OG Black Pill */
.btn-google-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 15px 24px;
  background: #000000;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 50px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
}

.btn-google-auth:hover {
  background: #ffffff;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.btn-google-auth:active {
  transform: translateY(0);
}

.btn-google-auth svg {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  padding: 2px;
  flex-shrink: 0;
}

/* Form Fields */
.chaitanya-form-group {
  margin-bottom: 13px;
  text-align: left;
}

.chaitanya-form-label {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: 6px;
}

.chaitanya-form-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 50px;
  padding: 13px 20px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  color: #000000;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.chaitanya-form-input:focus {
  outline: none;
  border-color: #000000;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.chaitanya-form-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* Form Divider */
.chaitanya-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0;
}

.chaitanya-divider::before,
.chaitanya-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.12);
}

.chaitanya-divider span {
  padding: 0 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: #555555;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Mode Switchers */
.chaitanya-modal-footer {
  margin-top: 24px;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: #555555;
}

.chaitanya-link-btn {
  background: transparent;
  border: none;
  color: #000000;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.chaitanya-link-btn:hover {
  color: #0433ff;
}

/* Profile Card View */
.profile-avatar-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 24px;
}

.profile-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid #000000;
  padding: 3px;
  object-fit: cover;
  background: #ffffff;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.profile-name {
  font-family: "DrukMedium", sans-serif;
  font-size: 38px;
  line-height: 0.92;
  text-transform: uppercase;
  color: #000000;
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}

.profile-email {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: #666666;
  margin: 0 0 10px;
}

.profile-role-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 30px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: #ffffff;
  color: #000000;
  border: 1.5px solid #000000;
}

.profile-role-badge.admin {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

.profile-meta-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 20px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.profile-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

.profile-meta-row:last-child {
  border-bottom: none;
}

.profile-meta-label {
  color: #666666;
  text-transform: uppercase;
  font-weight: 500;
}

.profile-meta-val {
  color: #000000;
  font-weight: 600;
}

.profile-events-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.profile-event-chip {
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 30px;
  padding: 5px 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: #000000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Secondary Button / Sign Out */
.btn-secondary-action {
  width: 100%;
  padding: 13px;
  background: transparent;
  border: 1.5px solid #000000;
  border-radius: 50px;
  color: #000000;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 12px;
  box-sizing: border-box;
}

.btn-secondary-action:hover {
  background: #e4001d;
  border-color: #e4001d;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(228, 0, 29, 0.25);
}

/* Admin Table & Stats */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.admin-stat-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid #000000;
  border-radius: 18px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.admin-stat-num {
  font-family: "DrukMedium", sans-serif;
  font-size: 46px;
  color: #000000;
  line-height: 0.95;
  margin-bottom: 4px;
}

.admin-stat-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: #444444;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1.5px solid #000000;
  border-radius: 16px;
  background: #ffffff;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-align: left;
}

.admin-table th {
  background: #000000;
  color: #ffffff;
  padding: 12px 14px;
  border-bottom: 2px solid #000000;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  color: #000000;
}

.admin-table tr:hover td {
  background: rgba(180, 203, 245, 0.2);
}

/* Admin Tabs Navigation */
.admin-tabs-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.15);
  padding-bottom: 8px;
  overflow-x: auto;
}

.admin-tab-btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.7);
  color: #333333;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.admin-tab-btn:hover {
  background: #000000;
  color: #ffffff;
}

.admin-tab-btn.active {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

/* Status Badges */
.badge-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-status.verified,
.badge-status.paid {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.badge-status.pending,
.badge-status.pending_verification {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.badge-status.rejected {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.badge-status.free {
  background: #e2e3e5;
  color: #383d41;
  border: 1px solid #d6d8db;
}

/* Admin Action Buttons */
.admin-action-btn-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.btn-action-approve {
  background: #155724;
  color: #ffffff;
  border: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-action-approve:hover {
  background: #0b3414;
}

.btn-action-reject {
  background: #721c24;
  color: #ffffff;
  border: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-action-reject:hover {
  background: #491217;
}

/* Export Control Bar */
.admin-export-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Responsive tweaks */
@media (max-width: 767px) {
  .chaitanya-modal-card {
    padding: 32px 20px 24px;
    border-radius: 20px;
  }
  .chaitanya-modal-title {
    font-size: 38px;
  }
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
  .chaitanya-form-input {
    padding: 12px 16px;
  }
}

/* Admin dashboard v2 */
.admin-loading,
.admin-note,
.admin-progress,
.profile-empty {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: #555555;
}

.admin-loading {
  text-align: center;
  padding: 24px;
}

.admin-note {
  margin: 0 0 10px;
  line-height: 1.5;
}

.profile-empty a {
  color: #000000;
  text-decoration: underline;
}

.admin-flag {
  display: inline-block;
  margin: 4px 0 0 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fdecee;
  color: #8a1020;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.admin-panel-box {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 20px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.5;
}

.admin-panel-box h4 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.admin-panel-box p {
  margin: 0 0 12px;
  color: #444444;
}

.admin-inline-btn {
  width: auto !important;
  padding: 8px 14px !important;
  font-size: 11px !important;
}

.admin-excel-btn {
  background: #107c41 !important;
  border-color: #107c41 !important;
  color: #ffffff !important;
}

.admin-progress {
  margin-top: 10px;
  padding: 8px 12px;
  background: #e8f4fd;
  border-radius: 4px;
  color: #004085;
}

.btn-action-view {
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  cursor: pointer;
}

.admin-table code {
  font-size: 11px;
  background: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
}

.badge-status.paid,
.badge-status.team {
  background: #d4edda;
  color: #155724;
}

.chaitanya-form-input:focus-visible,
.btn-google-auth:focus-visible,
.admin-tab-btn:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

#profile-edit-form .chaitanya-form-group {
  margin-bottom: 10px;
}

html:not(.is-fest-admin) a[href="#admin"],
html:not(.is-fest-admin) a[href="/admin"] {
  display: none !important;
}

/* Performance: drop heavy blur on touch / small screens */
@media (hover: none), (max-width: 1024px) {
  .chaitanya-modal-backdrop,
  .chaitanya-modal-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .chaitanya-modal-backdrop {
    background: rgba(220, 226, 236, 0.8);
  }
  .chaitanya-modal-card {
    background-color: rgba(255, 255, 255, 0.97);
  }
}

/* Display headings: open up the condensed Druk letterforms for readability */
.chaitanya-modal-title,
.profile-name,
.admin-stat-num {
  letter-spacing: 0.04em;
  word-spacing: 0.08em;
}

/* ==========================================================================
   Nav profile icon
   ========================================================================== */
/* Desktop nav (the site hides .right-menu links below 768px) */
@media (min-width: 768px) {
  header .header .right-menu a.nav-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

/* Mobile menu */
.mobile-menu a.nav-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #000000;
  flex-shrink: 0;
}

.nav-avatar-initials {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

/* ==========================================================================
   Profile overlay (floating glass panel)
   ========================================================================== */
.pp-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(214, 220, 232, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.pp-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s;
}

.pp-panel {
  position: absolute;
  top: 76px;
  right: 24px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 100px);
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.78);
  background-image: url(/images/footerPatern.png);
  background-size: 80px;
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 2px solid #ffffff;
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0, 40, 120, 0.18);
  font-family: "IBM Plex Mono", monospace;
  color: #000000;
  overflow: hidden;
  transform: translateY(-10px) scale(0.97);
  transform-origin: top right;
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pp-overlay.active .pp-panel {
  transform: none;
}

html.pp-open {
  overflow: hidden;
}

.pp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 12px;
}

.pp-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pp-kicker {
  font-size: 10px;
  font-weight: 700;
  color: #005a3c;
  letter-spacing: 0.6px;
}

.pp-title {
  font-family: "DrukMedium", sans-serif;
  font-size: 26px;
  line-height: 1;
  margin: 2px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-sub {
  font-size: 11px;
  color: #555555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-avatar,
.pp-id-photo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #000000;
  flex-shrink: 0;
}

.pp-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
}

.pp-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
}

.pp-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0 14px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 14px;
}

.pp-tab {
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 9px 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #444444;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pp-tab.active {
  background: #000000;
  color: #ffffff;
}

.pp-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  overscroll-behavior: contain;
}

.pp-body.pp-enter {
  animation: pp-fade-in 0.26s ease both;
}

@keyframes pp-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pp-foot {
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.pp-logout {
  width: 100%;
  padding: 11px;
  border-radius: 30px;
  border: 1.5px solid #b00020;
  background: transparent;
  color: #b00020;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.pp-logout:hover {
  background: #b00020;
  color: #ffffff;
}

.pp-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.pp-field input,
.pp-field select,
.pp-utr input {
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 12px;
  background: #ffffff;
  color: #000000;
  text-transform: none;
}

.pp-field input:focus-visible,
.pp-field select:focus-visible,
.pp-tab:focus-visible,
.pp-close:focus-visible,
.pp-primary:focus-visible,
.pp-action:focus-visible,
.pp-logout:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

.pp-primary {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 30px;
  border: none;
  background: #000000;
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

.pp-primary:disabled {
  opacity: 0.5;
}

.pp-hint,
.pp-loading,
.pp-empty {
  font-size: 11px;
  color: #555555;
  line-height: 1.5;
}

.pp-loading,
.pp-empty {
  text-align: center;
  padding: 24px 6px;
}

.pp-empty p {
  margin: 0 0 12px;
}

.pp-inline {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.pp-msg {
  font-size: 11px;
}

.pp-msg.ok {
  color: #005a3c;
}

.pp-msg.bad {
  color: #b00020;
}

.pp-regs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-reg {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-reg-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.pp-reg-top strong {
  font-size: 12px;
  line-height: 1.3;
}

.pp-reg-meta,
.pp-reg-note {
  font-size: 10.5px;
  color: #555555;
}

.pp-reg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.pp-action {
  border: 1.5px solid #000000;
  background: #000000;
  color: #ffffff;
  border-radius: 20px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.pp-action.subtle {
  background: transparent;
  color: #000000;
}

.pp-chip {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.pp-chip.ok {
  background: #eafaf1;
  color: #005a3c;
}

.pp-chip.pending {
  background: #fff3cd;
  color: #6b4a00;
}

.pp-chip.bad {
  background: #fdecee;
  color: #8a1020;
}

.pp-chip.cart {
  background: #e8f0fe;
  color: #0b3d91;
}

.pp-utr {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.pp-utr input {
  flex: 1;
  min-width: 140px;
  letter-spacing: 1px;
}

/* Digital ID card */
.pp-idcard {
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.pp-idcard-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  background: #000000;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.pp-idcard-main {
  display: flex;
  gap: 14px;
  padding: 14px;
  align-items: flex-start;
}

.pp-idcard-main .pp-id-photo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  font-size: 20px;
}

.pp-idcard-main dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-size: 11px;
  min-width: 0;
}

.pp-idcard-main dt {
  color: #777777;
  font-weight: 600;
  font-size: 9.5px;
  padding-top: 1px;
}

.pp-idcard-main dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.pp-idcard-qr {
  width: 168px;
  margin: 0 auto 12px;
}

.pp-idcard-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.pp-idcard-status {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 10px;
  letter-spacing: 0.4px;
}

.pp-idcard.verified .pp-idcard-status {
  background: #eafaf1;
  color: #005a3c;
}

.pp-idcard.pending .pp-idcard-status {
  background: #fff3cd;
  color: #6b4a00;
}

.pp-idcard.none .pp-idcard-status {
  background: #f2f2f2;
  color: #555555;
}

.pp-idcard + .pp-hint {
  margin-top: 12px;
}

.mono {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.5px;
}

/* Organiser verification */
.pp-verify {
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  margin-bottom: 8px;
}

.pp-verify strong {
  font-size: 15px;
  letter-spacing: 0.5px;
}

.pp-verify p {
  margin: 4px 0 0;
  font-size: 11px;
}

.pp-verify.ok {
  background: #eafaf1;
  color: #005a3c;
}

.pp-verify.bad {
  background: #fdecee;
  color: #8a1020;
}

.pp-verify-events {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
}

.pp-verify-events li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

@media (max-width: 600px) {
  .pp-panel {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 24px);
    transform-origin: top center;
  }
}

@media (hover: none), (max-width: 1024px) {
  .pp-overlay {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .pp-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.96);
  }
}

/* The custom cursor must stay above every overlay (the site hides the system
   cursor), otherwise the pointer disappears inside modals and panels. */
/* No backdrop blur on the cursor: re-blurring under it on every mouse move
   (often over the WebGL scene) was a constant GPU cost for a 25px dot. */
#cursor .wrapper {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.85);
}

#cursor {
  z-index: 2147483000 !important;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* The system cursor is hidden only while the custom cursor is actually on
   screen (html.custom-cursor-active is set by the cursor component on mouse
   movement and cleared when the pointer leaves the page or enters an iframe).
   Without the component (tablet widths, touch devices) the system cursor stays. */
html.custom-cursor-active #cursor {
  opacity: 1;
}

html.custom-cursor-active .error-page .go-home {
  cursor: none !important;
}

/* Music and sound effects are removed, so the sound on/off toggle goes too.
   visibility (not display) keeps the space so the bottom bar doesn't shift. */
.social-links-global .volume,
.home-preloader .volume {
  visibility: hidden;
  pointer-events: none;
}

/* A thin dark ring keeps the white cursor visible on white/light sections. */
#cursor:not(.dif) .wrapper {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

header .header .mobile-menu .nav-avatar {
  width: 42px;
  height: 42px;
  margin-right: 10px;
  vertical-align: middle;
  font-size: 16px;
}

/* Loading screen removed: the 3D scene appears as soon as it is ready. */
.home-preloader {
  display: none !important;
}

/* The header fades in at the end of the home 3D intro; on every other page
   (including direct links) it must be visible straight away. */
html.not-home header {
  opacity: 1 !important;
}

/* ==========================================================================
   Profile page (/profile) — full page, sections stacked top to bottom
   ========================================================================== */
.profile-page-root {
  min-height: 100vh;
  width: 100%;
  padding: 96px 16px 72px;
  background-image: url(/images/footerPatern.png), linear-gradient(0deg, #b4cbf5, #f7faff);
  background-repeat: repeat;
  background-size: 80px, auto;
  box-sizing: border-box;
  font-family: "IBM Plex Mono", monospace;
  color: #000000;
}

.prof-wrap {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.prof-card {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #ffffff;
  border-radius: 26px;
  box-shadow: 0 20px 60px rgba(0, 40, 120, 0.12);
  padding: 24px;
  box-sizing: border-box;
  scroll-margin-top: 90px;
}

.prof-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.prof-head .prof-avatar {
  width: 64px;
  height: 64px;
  font-size: 20px;
}

.prof-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prof-title {
  font-family: "DrukMedium", sans-serif;
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 500;
  line-height: 1;
  margin: 2px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

.prof-h2 {
  font-family: "DrukMedium", sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.05;
  margin: 4px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.prof-section-head {
  margin-bottom: 18px;
}

.prof-section-head .pp-hint {
  margin: 0;
}

.prof-logout {
  width: auto;
  padding: 10px 18px;
  flex-shrink: 0;
}

.prof-form {
  gap: 16px;
}

.prof-form .pp-field {
  font-size: 11px;
}

.prof-form .pp-field input,
.prof-form .pp-field select {
  font-size: 14px;
  padding: 12px 14px;
}

.prof-form .pp-field input[readonly] {
  background: rgba(0, 0, 0, 0.04);
  color: #555555;
}

.prof-form .pp-field small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.pp-field input[aria-invalid="true"],
.pp-field select[aria-invalid="true"] {
  border-color: #b00020;
}

.prof-form .pp-msg {
  font-size: 12px;
  font-weight: 600;
}

.prof-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.prof-signed-out {
  text-align: center;
}

.prof-signed-out .prof-actions {
  justify-content: center;
  margin-top: 16px;
}

/* Registrations: details on the left, entry QR on the right */
.prof-regs {
  gap: 14px;
}

.prof-reg {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
}

.prof-reg-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prof-reg-info .pp-reg-top strong {
  font-size: 14px;
}

.prof-reg-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 6px 0 2px;
  font-size: 11px;
}

.prof-reg-dl dt {
  color: #777777;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  padding-top: 1px;
}

.prof-reg-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.prof-qr {
  margin: 0;
  width: 150px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.prof-qr.small {
  width: 132px;
}

.prof-qr-code {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 12px;
  overflow: hidden;
}

.prof-qr-code svg {
  display: block;
  width: 100%;
  height: auto;
}

.prof-qr figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-align: center;
}

.prof-idcard {
  max-width: 420px;
  margin: 0 auto;
}

/* Entry QRs on the registration success step */
.checkout-qrs {
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.checkout-qrs ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.checkout-qrs li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 600px) {
  .profile-page-root {
    padding: 80px 12px 56px;
  }

  .prof-card {
    padding: 18px 16px;
    border-radius: 20px;
  }

  .prof-head {
    flex-wrap: wrap;
  }

  .prof-logout {
    width: 100%;
  }

  .prof-reg {
    flex-direction: column;
    align-items: stretch;
  }

  .prof-qr {
    align-self: center;
    width: 180px;
  }
}

/* Like the events page, the profile page skips the site's page-transition wipe. */
body:has(.profile-page-root) .transition-component {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* The site header is transparent; on the profile page fade the page colour in
   behind it so form controls scrolling underneath don't collide with the logo. */
body:has(.profile-page-root) header {
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.96) 70%, rgba(247, 250, 255, 0));
}

/* Deregister / delete-profile confirmations */
.prof-confirm {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1.5px solid #b00020;
  border-radius: 14px;
  background: #fdf3f4;
  font-size: 11.5px;
  line-height: 1.5;
}

.prof-confirm p {
  margin: 0 0 10px;
}

.prof-confirm .pp-field input {
  font-size: 14px;
  padding: 12px 14px;
}

.prof-confirm-yes {
  width: auto;
  padding: 8px 16px;
}

.prof-confirm-yes:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.prof-confirm-yes:disabled:hover {
  background: transparent;
  color: #b00020;
}

.pp-action.prof-dereg {
  border-color: #b00020;
  color: #b00020;
}

.prof-danger {
  border-color: rgba(176, 0, 32, 0.25);
}

.prof-delete-open {
  width: auto;
  padding: 10px 18px;
}

.prof-reg-info .pp-msg {
  margin: 8px 0 0;
}

/* Nav profile link is just the avatar: centre it on the text links' line and
   keep the links' hover "spread" effect off the initials badge. */
header .header .right-menu a.nav-profile,
header .header .mobile-menu a.nav-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  gap: 0;
}

header .header .right-menu a.nav-profile .nav-avatar {
  width: 28px;
  height: 28px;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

header .header .right-menu a.nav-profile:hover span,
header .header .mobile-menu a.nav-profile:hover span {
  padding: 0;
}

header .header .right-menu a.nav-profile:hover .nav-avatar {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #000000;
}

header .header .mobile-menu a.nav-profile .nav-avatar {
  margin-right: 0;
}

/* Nav links have a 44px tap height; centre their text in it so text links,
   the avatar and the logo sit on one line. (html body …: default-layout.css
   loads later with the same specificity and sets inline-block.) */
html body header .header .right-menu > a {
  display: inline-flex;
  align-items: center;
}