html { scroll-behavior: smooth; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .45); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* One readable column for the whole product: generous on a phone, capped on an
   ultrawide so a line of text never runs the length of the screen. */
.page { max-width: 1520px; }

/* The sections band scrolls sideways on a narrow screen, and a scrollbar under
   the tabs would be a line of jitter. */
.nav-strip { scrollbar-width: none; -ms-overflow-style: none; }
.nav-strip::-webkit-scrollbar { display: none; }

/* A field's edge is darker than the rules around it, and every control answers
   the keyboard the same way, so the field you are in is never a guess. */
input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease; }
.card input, .card select, .card textarea { border-color: #cbd5e1; }
.dark .card input, .dark .card select, .dark .card textarea { border-color: #334155; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}
.dark input:focus, .dark select:focus, .dark textarea:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .22);
}

/* A label is a heading for its field rather than another hint, so it carries
   more ink than the note under it - in both faces. */
.card label > span:first-child { color: #475569; font-weight: 500; }
.dark .card label > span:first-child { color: #94a3b8; }

/* The app's own accent strip: the one place the whole palette appears at once,
   so the product has a signature without any surface shouting. */
#shell::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #0ea5e9, #10b981);
}

/* The two signed-out screens (the access code and the portal sign-in) share a
   soft multi-colour wash, so the shell is unmistakably the same product. */
.auth-bg {
  background:
    radial-gradient(1000px 520px at 12% 0%, rgba(99, 102, 241, .12), transparent 62%),
    radial-gradient(900px 460px at 88% 8%, rgba(14, 165, 233, .11), transparent 62%),
    radial-gradient(760px 420px at 50% 100%, rgba(16, 185, 129, .09), transparent 62%);
}

.nav-item {
  position: relative;
  border: 1px solid transparent;
}
.nav-item.active {
  background: rgba(99, 102, 241, .10);
  color: #4338ca;
  font-weight: 600;
  border-color: rgba(99, 102, 241, .22);
}
/* The sections run across the top now, so the active one shows as a pill with
   an underline rather than the rail marker a side column would use. */
.nav-item.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  width: 55%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}
.dark .nav-item.active {
  color: #a5b4fc;
  background: rgba(99, 102, 241, .18);
  border-color: rgba(129, 140, 248, .28);
}

.fade-in { animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.hero {
  background: linear-gradient(135deg, rgba(99, 102, 241, .13), rgba(139, 92, 246, .07) 45%, rgba(14, 165, 233, .10) 100%);
}
/* The light face needs the wash a little stronger than the dark one: on a pale
   page a thin tint reads as no panel at all. */
.hero.hero { box-shadow: 0 1px 2px rgba(15, 23, 42, .05), inset 0 0 0 1px rgba(99, 102, 241, .10); }
.dark .hero {
  background: linear-gradient(135deg, rgba(99, 102, 241, .16), rgba(139, 92, 246, .08) 45%, rgba(14, 165, 233, .10) 100%);
}

.field-error {
  border-color: #f43f5e !important;
}

.pulse {
  position: relative;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid rgba(56, 189, 248, .6);
  animation: pulsering 1.3s ease-out infinite;
}
@keyframes pulsering {
  0% { opacity: .8; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.5); }
}

.card {
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card:hover {
  box-shadow: 0 10px 28px -14px rgba(30, 41, 59, .28);
}

.count-flash { animation: countflash 1.1s ease-out; }
@keyframes countflash {
  0% { transform: scale(1); text-shadow: 0 0 0 rgba(16, 185, 129, 0); }
  20% { transform: scale(1.18); text-shadow: 0 0 18px rgba(16, 185, 129, .7); }
  100% { transform: scale(1); text-shadow: 0 0 0 rgba(16, 185, 129, 0); }
}
.count-was {
  animation: countwas 2.4s ease-out forwards;
}
@keyframes countwas { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

#pgHost:empty { display: none; }
#pgHost iframe { border: 0; width: 100%; height: 100%; }
#pgHost .ticketClose { position: absolute; top: 14px; right: 18px; z-index: 1;
  font: inherit; font-size: 13px; padding: 8px 16px; border-radius: 8px;
  border: 1px solid #cbd5e1; background: #fff; color: #0f172a; cursor: pointer; }
#pgHost { position: fixed; inset: 0; z-index: 60; overflow: auto; background: #fff; }