:root {
  --cis-colour-background: #f7f6f9;
  --cis-colour-background-muted: #edebf1;
  --cis-colour-surface: #ffffff;
  --cis-colour-surface-raised: #fbf6ec;
  --cis-colour-text-primary: #15121a;
  --cis-colour-text-secondary: #686270;
  --cis-colour-text-inverse: #ffffff;
  --cis-colour-border: #e4e0e8;
  --cis-colour-brand-primary: #260269;
  --cis-colour-brand-secondary: #190234;
  --cis-colour-brand-tint: #8a78a8;
  --cis-colour-accent: #baa073;
  --cis-colour-accent-muted: #d8cfe6;
  --cis-colour-border-muted: #edeaf2;
  --cis-radius-field: 9px;
  --cis-radius-sheet: 20px;
  --cis-shadow-button: 0 6px 16px rgb(38 2 105 / 28%);
  --cis-shadow-sheet: 0 -6px 18px rgb(21 18 26 / 8%);
  --cis-typography-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--cis-colour-background-muted);
  color: var(--cis-colour-text-primary);
  font-family: var(--cis-typography-family);
  margin: 0;
}

body:has(.pwa-shell--auth),
body:has(.pwa-splash) {
  background: var(--cis-colour-brand-primary);
}

.pwa-splash {
  align-items: center;
  background: #190234;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  max-width: 520px;
  min-height: 100dvh;
  opacity: 1;
  overflow: hidden;
  position: relative;
  transition: opacity 0.6s ease;
}

.pwa-splash--fade {
  opacity: 0;
}

.pwa-splash__chevron {
  position: absolute;
}

.pwa-splash__chevron--tl {
  left: -30px;
  top: -24px;
}

.pwa-splash__chevron--br {
  bottom: -24px;
  right: -30px;
  transform: rotate(180deg);
}

.pwa-splash__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.pwa-splash__badge {
  align-items: center;
  background: rgba(186, 160, 115, 0.08);
  border: 1.5px solid var(--cis-colour-accent);
  border-radius: 50%;
  color: var(--cis-colour-accent);
  display: flex;
  font-size: 24px;
  font-weight: 700;
  height: 84px;
  justify-content: center;
  margin-bottom: 20px;
  width: 84px;
}

.pwa-splash__edition {
  color: #fff;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
}

.pwa-splash__edition sup {
  color: var(--cis-colour-accent);
  font-size: 20px;
  vertical-align: super;
}

.pwa-splash__rule {
  background: var(--cis-colour-accent);
  height: 2px;
  margin: 14px 0;
  width: 34px;
}

.pwa-splash__name {
  color: var(--cis-colour-accent);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.8;
  text-align: center;
  text-transform: uppercase;
}

.pwa-splash__charter {
  bottom: 22px;
  color: #8a78a8;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  position: absolute;
  text-transform: uppercase;
}

.pwa-shell {
  background: var(--cis-colour-brand-primary);
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 520px;
  min-height: 100vh;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
}

.pwa-shell--offline {
  align-content: center;
}

.pwa-shell--auth {
  background: var(--cis-colour-brand-primary);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 520px;
  min-height: 100dvh;
  padding: 0;
}

.pwa-canopy {
  background: var(--cis-colour-brand-primary);
  overflow: hidden;
  padding: 18px 22px 36px;
  position: relative;
}

.pwa-canopy--compact {
  padding: 14px 22px 26px;
}

.pwa-canopy__chevron {
  opacity: 0.5;
  position: absolute;
  right: -18px;
  top: -14px;
}

.pwa-canopy__badge {
  align-items: center;
  border: 1.5px solid var(--cis-colour-accent);
  border-radius: 50%;
  color: var(--cis-colour-accent);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  height: 46px;
  justify-content: center;
  margin-bottom: 16px;
  width: 46px;
}

.pwa-canopy__title {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin: 8px 0 0;
  position: relative;
}

.pwa-canopy__subtitle {
  color: #d8cfe6;
  font-size: 11.5px;
  margin: 10px 0 0;
  position: relative;
}

.pwa-canopy__step {
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.pwa-canopy__step-label {
  color: #d8cfe6;
  font-size: 10px;
}

.pwa-sheet {
  background: #fff;
  border-radius: var(--cis-radius-sheet) var(--cis-radius-sheet) 0 0;
  box-shadow: var(--cis-shadow-sheet);
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: -18px;
  overflow-y: auto;
  padding: 22px;
  position: relative;
}

.pwa-sheet__spacer {
  flex: 1;
  min-height: 14px;
}

.pwa-auth-divider {
  align-items: center;
  display: flex;
  gap: 10px;
  margin: 14px 0 12px;
}

.pwa-auth-divider::before,
.pwa-auth-divider::after {
  background: var(--cis-colour-border-muted);
  content: "";
  flex: 1;
  height: 1px;
}

.pwa-auth-divider span {
  color: #9a93a6;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.pwa-auth-footer {
  font-size: 12px;
  padding-top: 14px;
  text-align: center;
}

.pwa-auth-footer,
.pwa-auth-footer a {
  color: var(--cis-colour-text-secondary);
}

.pwa-auth-footer a {
  font-weight: 600;
}

.pwa-theme-quote {
  border-left: 2px solid var(--cis-colour-accent);
  margin-bottom: 22px;
  padding-left: 12px;
}

.pwa-theme-quote__label {
  color: #8a6d3b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.pwa-theme-quote__text {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

.pwa-form .pwa-consent-row,
.pwa-consent-row {
  align-items: flex-start;
  border: 1px solid var(--cis-colour-border-muted);
  border-radius: var(--cis-radius-field);
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 8px 10px;
}

.pwa-consent-row--checked {
  background: #f1eef6;
}

.pwa-consent-tick {
  align-items: center;
  background: var(--cis-colour-brand-primary);
  border-radius: 6px;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 12px;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.pwa-consent-empty {
  border: 1.5px solid #c4bdcf;
  border-radius: 6px;
  flex-shrink: 0;
  height: 20px;
  width: 20px;
}

.pwa-consent-row span {
  font-size: 11.5px;
  line-height: 1.45;
}

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

.pwa-btn-row .pwa-button {
  flex: 2;
}

.pwa-btn-row .pwa-button--secondary {
  flex: 1;
}

.pwa-hero,
.pwa-panel {
  border-radius: var(--cis-radius-sheet);
  padding: 22px;
}

.pwa-hero {
  align-content: end;
  background:
    radial-gradient(circle at 85% 12%, rgb(186 160 115 / 20%), transparent 28%),
    linear-gradient(160deg, var(--cis-colour-brand-primary), var(--cis-colour-brand-secondary));
  color: var(--cis-colour-text-inverse);
  display: grid;
  min-height: 58vh;
}

.pwa-panel {
  background: var(--cis-colour-surface);
  box-shadow: var(--cis-shadow-sheet);
}

.pwa-auth-card {
  background: var(--cis-colour-surface);
  border-radius: var(--cis-radius-sheet);
  box-shadow: var(--cis-shadow-sheet);
  padding: 24px;
}

.pwa-auth-card h1 {
  font-size: 32px;
}

.pwa-back-link {
  color: var(--cis-colour-text-secondary);
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 18px;
  text-decoration: none;
}

.pwa-form {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.pwa-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.pwa-form label {
  display: grid;
  gap: 6px;
}

.pwa-form label span {
  color: var(--cis-colour-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.pwa-form input[type="email"],
.pwa-form input[type="number"],
.pwa-form input[type="password"],
.pwa-form input[type="text"],
.pwa-form select,
.pwa-form textarea {
  background: var(--cis-colour-background);
  border: 1px solid var(--cis-colour-border-muted);
  border-radius: var(--cis-radius-field);
  color: var(--cis-colour-text-primary);
  font: inherit;
  font-size: 15px;
  height: 48px;
  padding: 0 13px;
  width: 100%;
}

.pwa-form textarea {
  height: auto;
  min-height: 112px;
  padding: 12px 13px;
  resize: vertical;
}

.pwa-form input:focus {
  border-color: var(--cis-colour-brand-primary);
  box-shadow: 0 0 0 3px rgb(38 2 105 / 8%);
  outline: none;
}

.pwa-form select:focus,
.pwa-form textarea:focus {
  border-color: var(--cis-colour-brand-primary);
  box-shadow: 0 0 0 3px rgb(38 2 105 / 8%);
  outline: none;
}

.pwa-form small,
.pwa-field-error {
  color: #9c3b3b;
  font-size: 12px;
}

.pwa-check {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 20px 1fr;
}

.pwa-check input {
  margin-top: 2px;
}

.pwa-auth-links {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: 18px;
}

.pwa-auth-links a {
  color: var(--cis-colour-brand-primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.pwa-alert,
.pwa-notice {
  border-radius: var(--cis-radius-field);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 16px;
  padding: 12px;
}

.pwa-alert {
  background: #fdf2f2;
  color: #9c3b3b;
}

.pwa-notice {
  background: #eef6f1;
  color: #2f7d4f;
}

.pwa-sync-status {
  background: var(--cis-colour-brand-secondary);
  border-radius: 999px;
  bottom: calc(60px + env(safe-area-inset-bottom));
  box-shadow: 0 8px 20px rgb(21 18 26 / 22%);
  color: var(--cis-colour-text-inverse);
  font-size: 12px;
  font-weight: 800;
  left: 50%;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  position: fixed;
  text-align: center;
  transform: translateX(-50%);
  z-index: 20;
}

.pwa-app-shell {
  background: var(--cis-colour-background);
  display: grid;
  gap: 16px;
  margin: 0 auto;
  max-width: 560px;
  min-height: 100vh;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
}

.pwa-app-header {
  align-items: start;
  background: var(--cis-colour-brand-primary);
  border-radius: 0 0 var(--cis-radius-sheet) var(--cis-radius-sheet);
  color: var(--cis-colour-text-inverse);
  display: flex;
  justify-content: space-between;
  margin: -24px -18px 0;
  padding: 26px 18px 22px;
}

.pwa-app-header h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.pwa-app-header p:last-child {
  color: var(--cis-colour-brand-tint);
  font-size: 13px;
  margin: 0;
}

.pwa-icon-button {
  align-items: center;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  color: var(--cis-colour-text-inverse);
  display: flex;
  font-size: 24px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.pwa-dashboard-card {
  background: var(--cis-colour-surface);
  border: 1px solid var(--cis-colour-border-muted);
  border-radius: var(--cis-radius-sheet);
  padding: 18px;
}

.pwa-dashboard-card--hero {
  background: var(--cis-colour-surface-raised);
  border-color: var(--cis-colour-accent-muted);
}

.pwa-dashboard-card--hero h2 {
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: 10px;
}

.pwa-dashboard-card--hero p:last-child,
.pwa-empty {
  color: var(--cis-colour-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.pwa-dashboard-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.pwa-dashboard-grid a {
  background: var(--cis-colour-surface);
  border: 1px solid var(--cis-colour-border-muted);
  border-radius: var(--cis-radius-field);
  color: var(--cis-colour-brand-primary);
  font-size: 13px;
  font-weight: 800;
  padding: 16px 14px;
  text-decoration: none;
}

.pwa-section-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pwa-section-heading h2 {
  margin: 0;
}

.pwa-section-heading a {
  color: var(--cis-colour-brand-primary);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.pwa-list-item {
  align-items: center;
  border-top: 1px solid var(--cis-colour-border-muted);
  display: grid;
  gap: 12px;
  grid-template-columns: 48px 1fr;
  padding: 13px 0;
}

.pwa-list-item:first-of-type {
  border-top: 0;
}

.pwa-list-item time,
.pwa-avatar {
  align-items: center;
  background: var(--cis-colour-background);
  border-radius: var(--cis-radius-field);
  color: var(--cis-colour-brand-primary);
  display: flex;
  font-size: 12px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
}

.pwa-avatar {
  border-radius: 999px;
}

.pwa-list-item h3 {
  font-size: 14px;
  line-height: 1.25;
  margin: 0 0 4px;
}

.pwa-list-item p {
  color: var(--cis-colour-text-secondary);
  font-size: 12px;
  margin: 0;
}

.pwa-mark {
  align-items: center;
  border: 1.5px solid var(--cis-colour-accent);
  border-radius: 999px;
  color: var(--cis-colour-accent);
  display: flex;
  font-size: 13px;
  font-weight: 800;
  height: 46px;
  justify-content: center;
  margin-bottom: 22px;
  width: 46px;
}

.pwa-kicker {
  color: var(--cis-colour-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-size: 36px;
  line-height: 1.02;
  margin-bottom: 14px;
}

h2 {
  font-size: 17px;
  margin-bottom: 16px;
}

.pwa-copy {
  color: var(--cis-colour-text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

.pwa-hero .pwa-copy {
  color: var(--cis-colour-brand-tint);
}

.pwa-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 22px;
}

.pwa-button {
  align-items: center;
  background: var(--cis-colour-brand-primary);
  border: 1px solid var(--cis-colour-brand-primary);
  border-radius: var(--cis-radius-field);
  box-shadow: var(--cis-shadow-button);
  color: var(--cis-colour-text-inverse);
  display: flex;
  font-size: 14px;
  font-weight: 700;
  height: 48px;
  justify-content: center;
  text-decoration: none;
}

.pwa-wizard-step .pwa-button:not(.pwa-btn-row .pwa-button) {
  width: 100%;
}

/* Wizard forms are flex columns so each step can fill the sheet. */
.pwa-form--wizard {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* Step-3 panels must fill the step so their margin-top:auto footers sit at the bottom. */
.pwa-step-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.pwa-step-panel[hidden] {
  display: none !important;
}

.pwa-button--secondary {
  background: var(--cis-colour-surface);
  border-color: var(--cis-colour-accent-muted);
  box-shadow: none;
  color: var(--cis-colour-brand-primary);
}

.pwa-status-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pwa-status-list li {
  align-items: center;
  border-top: 1px solid var(--cis-colour-border);
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.pwa-status-list span {
  color: var(--cis-colour-text-secondary);
  font-size: 13px;
}

.pwa-status-list strong {
  font-size: 13px;
}

.pwa-section-heading span {
  color: var(--cis-colour-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.pwa-agenda-day {
  display: grid;
  gap: 10px;
}

.pwa-agenda-session {
  border-top: 1px solid var(--cis-colour-border-muted);
  color: var(--cis-colour-text-primary);
  display: grid;
  gap: 7px;
  padding: 14px 0;
  text-decoration: none;
}

.pwa-agenda-session:first-of-type {
  border-top: 0;
}

.pwa-agenda-session time {
  color: var(--cis-colour-brand-primary);
  font-size: 12px;
  font-weight: 800;
}

.pwa-agenda-session strong {
  font-size: 16px;
  line-height: 1.25;
}

.pwa-agenda-session span:not(.pwa-status-pill) {
  color: var(--cis-colour-text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.pwa-status-pill {
  background: var(--cis-colour-background);
  border: 1px solid var(--cis-colour-border-muted);
  border-radius: 999px;
  color: var(--cis-colour-brand-primary);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-self: start;
  padding: 5px 9px;
  text-transform: uppercase;
}

.pwa-session-meta {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.pwa-session-meta div {
  background: var(--cis-colour-background);
  border-radius: var(--cis-radius-field);
  display: grid;
  gap: 5px;
  padding: 12px;
}

.pwa-session-meta span {
  color: var(--cis-colour-text-secondary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.pwa-session-meta strong {
  font-size: 13px;
  line-height: 1.3;
}

.pwa-alert-card {
  background: #fff8e6;
  border-color: var(--cis-colour-accent);
}

.pwa-alert-card h2 {
  margin-bottom: 8px;
}

.pwa-alert-card p {
  color: var(--cis-colour-text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 0;
}

.pwa-session-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.pwa-speaker-list {
  display: grid;
  gap: 4px;
}

.pwa-speaker-card {
  align-items: center;
  border-top: 1px solid var(--cis-colour-border-muted);
  color: var(--cis-colour-text-primary);
  display: grid;
  gap: 12px;
  grid-template-columns: 48px 1fr;
  padding: 14px 0;
  text-decoration: none;
}

.pwa-speaker-card:first-of-type {
  border-top: 0;
}

.pwa-speaker-card strong,
.pwa-speaker-card small {
  display: block;
}

.pwa-speaker-card strong {
  font-size: 15px;
  line-height: 1.25;
}

.pwa-speaker-card small {
  color: var(--cis-colour-text-secondary);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 3px;
}

.pwa-speaker-hero {
  display: grid;
  gap: 8px;
}

.pwa-speaker-hero .pwa-avatar {
  background: var(--cis-colour-brand-primary);
  color: var(--cis-colour-text-inverse);
  height: 56px;
  width: 56px;
}

.pwa-speaker-hero h2 {
  margin-bottom: 0;
}

.pwa-material-list {
  display: grid;
  gap: 4px;
}

.pwa-material-card {
  align-items: center;
  border-top: 1px solid var(--cis-colour-border-muted);
  color: var(--cis-colour-text-primary);
  display: grid;
  gap: 12px;
  grid-template-columns: 54px 1fr;
  padding: 14px 0;
  text-decoration: none;
}

.pwa-material-card:first-of-type {
  border-top: 0;
}

.pwa-material-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 4px;
}

.pwa-material-card small {
  color: var(--cis-colour-text-secondary);
  display: block;
  font-size: 12px;
  line-height: 1.4;
}

.pwa-file-badge {
  align-items: center;
  background: var(--cis-colour-brand-primary);
  border-radius: var(--cis-radius-field);
  color: var(--cis-colour-text-inverse);
  display: flex;
  font-size: 11px;
  font-weight: 800;
  height: 44px;
  justify-content: center;
  text-transform: uppercase;
}

.pwa-detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.pwa-detail-list div {
  background: var(--cis-colour-background);
  border-radius: var(--cis-radius-field);
  display: grid;
  gap: 4px;
  padding: 12px;
}

.pwa-detail-list dt {
  color: var(--cis-colour-text-secondary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.pwa-detail-list dd {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.pwa-announcement-list {
  display: grid;
  gap: 4px;
}

.pwa-announcement-card {
  border-top: 1px solid var(--cis-colour-border-muted);
  color: var(--cis-colour-text-primary);
  display: grid;
  gap: 7px;
  padding: 14px 0;
  text-decoration: none;
}

.pwa-announcement-card:first-of-type {
  border-top: 0;
}

.pwa-announcement-card--unread {
  border-left: 3px solid var(--cis-colour-accent);
  padding-left: 12px;
}

.pwa-announcement-card strong {
  font-size: 16px;
  line-height: 1.25;
}

.pwa-announcement-card small,
.pwa-announcement-card p {
  color: var(--cis-colour-text-secondary);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.pwa-feedback-form {
  gap: 18px;
}

.pwa-feedback-question {
  border: 0;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.pwa-feedback-question legend {
  color: var(--cis-colour-text-primary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  padding: 0;
}

.pwa-feedback-question legend span {
  color: var(--cis-colour-accent);
  display: block;
  font-size: 11px;
  margin-top: 4px;
  text-transform: uppercase;
}

.pwa-feedback-question p {
  color: var(--cis-colour-text-secondary);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.pwa-choice-list {
  display: grid;
  gap: 8px;
}

.pwa-choice-list label {
  align-items: center;
  background: var(--cis-colour-background);
  border: 1px solid var(--cis-colour-border-muted);
  border-radius: var(--cis-radius-field);
  display: grid;
  gap: 10px;
  grid-template-columns: 18px 1fr;
  padding: 12px;
}

.pwa-choice-list input {
  margin: 0;
}

.pwa-choice-list span {
  color: var(--cis-colour-text-primary);
  font-size: 13px;
  font-weight: 700;
}

.pwa-network-request-list {
  display: grid;
  gap: 14px;
}

.pwa-network-request {
  border-top: 1px solid var(--cis-colour-border-muted);
  display: grid;
  gap: 8px;
  padding-top: 14px;
}

.pwa-network-request:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.pwa-network-request h2 {
  font-size: 16px;
  line-height: 1.25;
  margin: 0;
}

.pwa-network-request p {
  color: var(--cis-colour-text-secondary);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.pwa-request-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
}

.pwa-request-actions form,
.pwa-request-actions button {
  width: 100%;
}

.pwa-bottom-nav {
  background: var(--cis-colour-surface);
  border-top: 1px solid var(--cis-colour-border-muted);
  bottom: 0;
  display: flex;
  left: 0;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  right: 0;
  z-index: 10;
}

.pwa-bottom-nav-item {
  align-items: center;
  color: var(--cis-colour-text-secondary);
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 10px;
  font-weight: 700;
  gap: 3px;
  padding: 8px 0 6px;
  text-decoration: none;
  transition: color 0.15s;
}

.pwa-bottom-nav-item--active {
  color: var(--cis-colour-brand-primary);
}

.pwa-bottom-nav-item svg {
  flex-shrink: 0;
}

.pwa-app-shell {
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
}

.pwa-password-wrap { position: relative; }
.pwa-password-wrap input { padding-right: 54px; }
.pwa-password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--cis-colour-text-secondary); font-size: 11px; font-weight: 600; cursor: pointer; padding: 4px; font-family: inherit; }

.pwa-remember-row { display: flex; justify-content: space-between; align-items: center; margin: -6px 0 4px; }
.pwa-form .pwa-remember-label { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #4a4551; cursor: pointer; }
.pwa-remember-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #c4bdcf; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; transition: all 0.15s; }
.pwa-remember-box--checked { background: var(--cis-colour-brand-primary); border-color: var(--cis-colour-brand-primary); color: #fff; }

.pwa-splash__continue {
  animation: pwa-pulse 2s ease-in-out infinite;
  bottom: 52px;
  color: #8a78a8;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  position: absolute;
  text-transform: uppercase;
}

@keyframes pwa-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.pwa-wizard-step {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
}

.pwa-wizard-step[hidden] {
  display: none;
}

.pwa-wizard-bar {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.pwa-wizard-bar > div {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  flex: 1;
  height: 3px;
}

.pwa-wizard-bar > .pwa-wizard-bar--on {
  background: var(--cis-colour-accent);
}

.pwa-otp-row {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
}

.pwa-otp-input {
  background: var(--cis-colour-background);
  border: 1px solid var(--cis-colour-border-muted);
  border-radius: var(--cis-radius-field);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  height: 46px;
  text-align: center;
  width: 37px;
}

.pwa-otp-input:focus {
  background: #fff;
  border: 1.5px solid var(--cis-colour-brand-primary);
  box-shadow: 0 0 0 3px rgba(38, 2, 105, 0.08);
  outline: none;
}

.pwa-form input.pwa-otp-input--error,
.pwa-otp-input--error {
  background: #fff;
  border: 1.5px solid #9c3b3b;
}

.pwa-form .pwa-radio-card,
.pwa-radio-card {
  align-items: center;
  border: 1px solid var(--cis-colour-border-muted);
  border-radius: var(--cis-radius-field);
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}

.pwa-radio-card--selected {
  background: #fff;
  border: 1.5px solid var(--cis-colour-brand-primary);
  box-shadow: 0 0 0 3px rgba(38, 2, 105, 0.08);
}

.pwa-radio-dot {
  border: 1.5px solid #c4bdcf;
  border-radius: 50%;
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

.pwa-radio-card--selected .pwa-radio-dot {
  border: 5px solid var(--cis-colour-brand-primary);
}

.pwa-strength-bar {
  background: var(--cis-colour-border-muted);
  border-radius: 3px;
  height: 5px;
  margin: -4px 0 6px;
  overflow: hidden;
}

.pwa-strength-fill {
  border-radius: 3px;
  height: 100%;
  transition: width 0.3s;
  width: 0;
}

.pwa-strength-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.pwa-strength-check {
  color: #c4bdcf;
  font-size: 11px;
  font-weight: 600;
}

.pwa-strength-check--pass {
  color: #2f7d4f;
}

.pwa-info-box {
  align-items: flex-start;
  background: var(--cis-colour-background);
  border-radius: 10px;
  color: var(--cis-colour-text-secondary);
  display: flex;
  font-size: 11px;
  gap: 9px;
  line-height: 1.55;
  padding: 11px 12px;
}

.pwa-forgot-link {
  color: #260269;
  font-size: 12px;
  font-weight: 600;
  margin: 2px 0 6px;
  text-decoration: none;
}

.pwa-step-desc {
  color: var(--cis-colour-text-secondary);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.pwa-med {
  align-items: center;
  background: rgba(186, 160, 115, 0.1);
  border: 1.5px solid #baa073;
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  font-size: 24px;
  height: 62px;
  justify-content: center;
  margin-bottom: 16px;
  width: 62px;
}

.pwa-med--amber {
  background: rgba(156, 107, 20, 0.08);
  border-color: #9c6b14;
}

.pwa-med--red {
  background: rgba(156, 59, 59, 0.07);
  border-color: #9c3b3b;
}

.pwa-med--green {
  background: rgba(47, 125, 79, 0.08);
  border-color: #2f7d4f;
}

.pwa-state-panel {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.pwa-state-panel[hidden] {
  display: none;
}

.pwa-state-heading {
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

.pwa-state-desc {
  color: var(--cis-colour-text-secondary);
  font-size: 12px;
  line-height: 1.65;
  margin-bottom: 20px;
}

.pwa-spinner {
  animation: pwa-spin 0.9s linear infinite;
  border: 3px solid #edeaf2;
  border-radius: 50%;
  border-top-color: #260269;
  height: 34px;
  margin-bottom: 14px;
  width: 34px;
}

@keyframes pwa-spin {
  to { transform: rotate(360deg); }
}

.pwa-text-button {
  background: none;
  border: 0;
  color: var(--cis-colour-text-secondary);
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 14px 0 2px;
  text-align: center;
  width: 100%;
}

.pwa-diamond-item {
  align-items: center;
  display: flex;
  font-size: 11.5px;
  gap: 9px;
}

.pwa-account-chip {
  align-items: center;
  background: var(--cis-colour-background);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
}

.pwa-account-chip[hidden] {
  display: none;
}

.pwa-account-chip__avatar {
  align-items: center;
  background: #260269;
  border: 1.5px solid #baa073;
  border-radius: 50%;
  color: #baa073;
  display: flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.pwa-offline-box {
  background: #fbf6ec;
  border-left: 3px solid #9c6b14;
  border-radius: 0 9px 9px 0;
  margin-bottom: 18px;
  padding: 11px 13px;
}

.pwa-offline-box[hidden] {
  display: none;
}

.pwa-ceremony {
  align-items: center;
  background: #190234;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  padding: 0 34px;
  position: fixed;
  z-index: 40;
}

.pwa-ceremony[hidden],
.pwa-ob-screen[hidden] {
  display: none !important;
}

.pwa-ceremony__chevron--tl {
  left: -26px;
  opacity: 0.8;
  position: absolute;
  top: -20px;
}

.pwa-ceremony__chevron--br {
  bottom: -24px;
  position: absolute;
  right: -30px;
  transform: rotate(180deg);
}

.pwa-ceremony__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: 340px;
  position: relative;
  width: 100%;
}

.pwa-ceremony__badge {
  align-items: center;
  background: rgba(186, 160, 115, 0.08);
  border: 1.5px solid #baa073;
  border-radius: 50%;
  display: flex;
  height: 64px;
  justify-content: center;
  margin-bottom: 22px;
  width: 64px;
}

.pwa-ceremony__badge span {
  color: #baa073;
  font-size: 17px;
  font-weight: 700;
}

.pwa-ceremony__check {
  align-items: center;
  background: rgba(186, 160, 115, 0.1);
  border: 1.5px solid #baa073;
  border-radius: 50%;
  color: #baa073;
  display: flex;
  font-size: 28px;
  height: 76px;
  justify-content: center;
  margin-bottom: 20px;
  width: 76px;
}

.pwa-ceremony__heading {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}

.pwa-ceremony__desc {
  color: #8a78a8;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 26px;
  text-align: center;
}

.pwa-ceremony__track {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  height: 5px;
  width: 100%;
}

.pwa-ceremony__fill {
  background: #baa073;
  border-radius: 3px;
  height: 100%;
  transition: width 0.5s ease;
  width: 0%;
}

.pwa-ceremony__status {
  color: #8a78a8;
  font-size: 10.5px;
  margin-top: 10px;
}

.pwa-error-box {
  background: #fdf2f2;
  border-left: 3px solid #9c3b3b;
  border-radius: 0 9px 9px 0;
  margin-bottom: 14px;
  padding: 11px 13px;
}

.pwa-form input.pwa-input--error {
  background: #fff;
  border-color: #9c3b3b;
  border-width: 1.5px;
}

/* --- Screen 14: live status pill --- */
.pwa-live-pill {
  align-items: center;
  background: rgba(186, 160, 115, 0.16);
  border: 1px solid rgba(186, 160, 115, 0.45);
  border-radius: 14px;
  display: inline-flex;
  gap: 7px;
  margin-top: 12px;
  padding: 5px 11px;
}

.pwa-live-pill[hidden],
.pwa-canopy__badge[hidden] {
  display: none !important;
}

.pwa-live-pill__glyph {
  color: #baa073;
  font-size: 10px;
}

.pwa-live-pill__text {
  color: #ebd9b4;
  font-size: 10.5px;
  font-weight: 600;
}

/* --- Screen 14: stay-signed-in row --- */
.pwa-signin-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: -4px 0 14px;
}

.pwa-form .pwa-stay-label,
.pwa-stay-label {
  align-items: center;
  color: #4a4551;
  cursor: pointer;
  display: flex;
  font-size: 11.5px;
  gap: 7px;
}

.pwa-stay-box {
  align-items: center;
  background: #fff;
  border: 1.5px solid #c4bdcf;
  border-radius: 5px;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 10px;
  height: 16px;
  justify-content: center;
  width: 16px;
}

.pwa-stay-box--checked {
  background: #260269;
  border-color: #260269;
}

.pwa-inline-link {
  color: #260269;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
}

/* --- Screen 15: recognised delegate --- */
.pwa-delegate-chip {
  align-items: center;
  background: var(--cis-colour-background);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
}

.pwa-delegate-chip[hidden],
.pwa-live-card[hidden],
.pwa-error-box[hidden] {
  display: none !important;
}

.pwa-delegate-chip__avatar {
  align-items: center;
  background: #260269;
  border: 1.5px solid #baa073;
  border-radius: 50%;
  color: #baa073;
  display: flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.pwa-delegate-chip__meta {
  color: var(--cis-colour-text-secondary);
  font-size: 10.5px;
}

.pwa-live-card {
  background: #190234;
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  padding: 14px 15px;
  position: relative;
}

.pwa-live-card__chevron {
  opacity: 0.4;
  position: absolute;
  right: -14px;
  top: -10px;
}

.pwa-live-card__tag {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-bottom: 7px;
}

.pwa-live-card__dot {
  background: #e56b6b;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(229, 107, 107, 0.2);
  height: 6px;
  width: 6px;
}

.pwa-live-card__label {
  color: #f2b5b5;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pwa-live-card__title {
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

.pwa-live-card__hint {
  color: #baa073;
  font-size: 10px;
  margin-top: 4px;
}

.pwa-float-field {
  margin-bottom: 8px;
  position: relative;
}

.pwa-float-field__label {
  background: #fff;
  color: var(--cis-colour-text-secondary);
  font-size: 10px;
  left: 12px;
  padding: 0 5px;
  position: absolute;
  top: -9px;
  z-index: 1;
}

/* --- Screen 13: registered success --- */
.pwa-ceremony__delegate-id {
  color: #baa073;
  font-weight: 600;
}

.pwa-countdown {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(186, 160, 115, 0.35);
  border-radius: 12px;
  margin-bottom: 22px;
  padding: 12px 14px;
  text-align: center;
  width: 100%;
}

.pwa-countdown__label {
  color: #baa073;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pwa-countdown__value {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 3px;
}

.pwa-button--gold {
  background: #baa073;
  box-shadow: 0 6px 16px rgba(186, 160, 115, 0.3);
  color: #190234;
  width: 100%;
}

.pwa-verify-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
}

.pwa-verify-panel[hidden] {
  display: none;
}

.pwa-verify-illustration {
  align-self: center;
  margin: 12px 0 4px;
}

.pwa-verify-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--cis-colour-text-primary);
  text-align: center;
}

.pwa-verify-desc {
  font-size: 12px;
  color: var(--cis-colour-text-secondary);
  line-height: 1.65;
  text-align: center;
  margin: 0;
  padding: 0 8px;
}

.pwa-verify-spacer {
  flex: 1;
  min-height: 18px;
}

.pwa-terms-preview {
  background: var(--cis-colour-background);
  border: 1px solid var(--cis-colour-border-muted);
  border-radius: 10px;
  color: var(--cis-colour-text-secondary);
  font-size: 11px;
  height: 96px;
  line-height: 1.7;
  margin-bottom: 12px;
  overflow: hidden;
  padding: 11px 13px;
}

.pwa-terms-preview-header {
  color: var(--cis-colour-text-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.pwa-phone-wrap {
  background: var(--cis-colour-background);
  border: 1px solid var(--cis-colour-border-muted);
  border-radius: var(--cis-radius-field);
  display: flex;
  height: 48px;
  overflow: hidden;
}

.pwa-phone-prefix {
  align-items: center;
  background: var(--cis-colour-border-muted);
  display: flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  justify-content: center;
  width: 72px;
}

.pwa-phone-wrap input {
  background: transparent;
  border: none;
  flex: 1;
  font: inherit;
  font-size: 15px;
  outline: none;
  padding: 0 14px;
}

@media (min-width: 760px) {
  .pwa-shell {
    max-width: 860px;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  }

  .pwa-shell--offline {
    display: grid;
    grid-template-columns: minmax(320px, 520px);
    justify-content: center;
  }
}

/* ==========================================================================
   MobileHome v2 — home dashboard (designs 01–05)
   ========================================================================== */

.pwa-home {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 100dvh;
}

.pwa-home__scroll {
  flex: 1;
  padding-bottom: 76px;
}

.pwa-home__canopy {
  padding: 16px 20px 34px;
}

.pwa-home__canopy-row {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.pwa-home__greeting {
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  margin-top: 5px;
}

.pwa-home__dateline {
  color: #d8cfe6;
  font-size: 11.5px;
  margin-top: 3px;
}

.pwa-home__bell {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 14px;
  height: 34px;
  justify-content: center;
  position: relative;
  text-decoration: none;
  width: 34px;
}

.pwa-home__bell-badge {
  align-items: center;
  background: #baa073;
  border: 1.5px solid #260269;
  border-radius: 50%;
  color: #190234;
  display: flex;
  font-size: 8px;
  font-weight: 700;
  height: 15px;
  justify-content: center;
  position: absolute;
  right: -2px;
  top: -2px;
  width: 15px;
}

.pwa-home__canopy .pwa-kicker {
  font-size: 9.5px;
  letter-spacing: 0.11em;
}

.pwa-home__body {
  padding: 16px 16px 0;
  position: relative;
  z-index: 1;
}

/* The design pulls the sheet up over the canopy only when an opaque card sits
   directly beneath it — otherwise a transparent heading lands on the purple. */
.pwa-home__body--overlap {
  margin-top: -20px;
  padding-top: 0;
}

.pwa-home__offline {
  align-items: center;
  background: #fbf6ec;
  border: 1px solid #ead9b8;
  border-radius: 10px;
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 9px 12px;
}

.pwa-home__offline[hidden] {
  display: none !important;
}

.pwa-home__offline div {
  color: #8a6d3b;
  font-size: 10.5px;
  line-height: 1.4;
}

.pwa-home__offline-dot {
  background: #9c6b14;
  border-radius: 50%;
  flex-shrink: 0;
  height: 7px;
  width: 7px;
}

/* --- Happening now hero --- */

.pwa-live-hero {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(21, 18, 26, 0.1);
  margin-bottom: 14px;
  overflow: hidden;
}

.pwa-live-hero__rule {
  background: linear-gradient(90deg, #baa073, #260269);
  height: 5px;
}

.pwa-live-hero__inner {
  padding: 14px 15px;
}

.pwa-live-hero__top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pwa-live-hero__tag {
  align-items: center;
  color: #9c3b3b;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pwa-live-hero__dot {
  background: #9c3b3b;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.pwa-live-hero__time {
  color: var(--cis-colour-text-secondary);
  font-size: 10px;
}

.pwa-live-hero__title {
  color: var(--cis-colour-text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.pwa-live-hero__venue {
  color: var(--cis-colour-text-secondary);
  font-size: 11px;
  margin-top: 4px;
}

.pwa-live-hero__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.pwa-live-hero__watch {
  align-items: center;
  background: #260269;
  border-radius: 9px;
  color: #fff;
  display: flex;
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  height: 38px;
  justify-content: center;
  text-decoration: none;
}

.pwa-live-hero__star {
  align-items: center;
  background: #fff;
  border: 1px solid #e4e0e8;
  border-radius: 9px;
  color: #c4bdcf;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.pwa-live-hero__star--on {
  color: #baa073;
}

/* --- Section headings --- */

.pwa-home__sect {
  align-items: center;
  color: var(--cis-colour-text-primary);
  display: flex;
  font-size: 11px;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.05em;
  margin: 0 0 9px 2px;
  text-transform: uppercase;
}

.pwa-home__sect a {
  color: #260269;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

/* --- Quick-access grid --- */

.pwa-qa-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 16px;
}

.pwa-qa {
  align-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(21, 18, 26, 0.05);
  color: var(--cis-colour-text-primary);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 8px 11px;
  text-align: center;
  text-decoration: none;
}

.pwa-qa--lg {
  padding: 15px 6px;
}

.pwa-qa__icon {
  align-items: center;
  border-radius: 11px;
  display: flex;
  font-size: 16px;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.pwa-qa__icon--purple {
  background: rgba(38, 2, 105, 0.08);
  color: #260269;
}

.pwa-qa__icon--gold {
  background: rgba(186, 160, 115, 0.16);
  color: #8a6d3b;
}

.pwa-qa__icon--red {
  background: rgba(156, 59, 59, 0.1);
  color: #9c3b3b;
}

.pwa-qa__label {
  font-size: 9.5px;
  font-weight: 600;
}

.pwa-qa--lg .pwa-qa__label {
  font-size: 10px;
}

/* --- Cards --- */

.pwa-home__card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(21, 18, 26, 0.06);
  display: block;
  margin-bottom: 10px;
  padding: 13px 15px;
  text-decoration: none;
}

.pwa-home__card--saved {
  border-left: 2px solid #baa073;
}

.pwa-home__card-top {
  display: flex;
  justify-content: space-between;
}

.pwa-home__card-meta {
  color: var(--cis-colour-text-secondary);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pwa-home__card-meta--gold {
  color: #8a6d3b;
}

.pwa-home__card-saved {
  color: #baa073;
  font-size: 10px;
}

.pwa-home__card-title {
  color: var(--cis-colour-text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 4px;
}

.pwa-home__card-sub {
  color: var(--cis-colour-text-secondary);
  font-size: 11px;
  margin-top: 3px;
}

.pwa-home__ann-tag {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-bottom: 5px;
}

.pwa-home__ann-dot {
  background: #260269;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.pwa-home__ann-tag span:last-child {
  color: #260269;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pwa-home__ann-body {
  color: var(--cis-colour-text-primary);
  font-size: 12.5px;
  line-height: 1.5;
}

/* --- More list --- */

.pwa-home__list {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(21, 18, 26, 0.06);
  margin-bottom: 16px;
  overflow: hidden;
}

.pwa-home__list-item {
  align-items: center;
  border-bottom: 1px solid #f1eef6;
  color: var(--cis-colour-text-primary);
  display: flex;
  font-size: 12.5px;
  font-weight: 500;
  gap: 12px;
  padding: 12px 15px;
  text-decoration: none;
}

.pwa-home__list-item:last-child {
  border-bottom: 0;
}

.pwa-home__list-item > span:nth-child(2) {
  flex: 1;
}

.pwa-home__list-icon {
  align-items: center;
  border-radius: 8px;
  display: flex;
  font-size: 13px;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.pwa-home__chev {
  color: #c4bdcf;
}

/* --- All sections sheet (design 05) --- */

.pwa-sections-overlay {
  background: rgba(21, 10, 40, 0.55);
  inset: 0;
  position: fixed;
  z-index: 40;
}

.pwa-sections-overlay[hidden] {
  display: none !important;
}

.pwa-sections-sheet {
  background: #f7f6f9;
  border-radius: 20px 20px 0 0;
  bottom: 0;
  left: 0;
  max-height: 82vh;
  overflow-y: auto;
  padding: 16px 16px 20px;
  position: absolute;
  right: 0;
}

.pwa-sections-sheet__grip {
  background: #ded8e8;
  border-radius: 2px;
  height: 4px;
  margin: 0 auto 16px;
  width: 36px;
}

.pwa-sections-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

/* --- Welcome address (design 01) --- */

.pwa-welcome-overlay {
  background: rgba(21, 10, 40, 0.62);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow-y: auto;
  padding: 60px 14px 24px;
  position: fixed;
  z-index: 60;
}

.pwa-welcome-overlay[hidden] {
  display: none !important;
}

.pwa-welcome-modal {
  align-self: flex-start;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(21, 18, 26, 0.4);
  max-width: 340px;
  overflow: hidden;
  width: 100%;
}

.pwa-welcome-modal__head {
  background: #190234;
  overflow: hidden;
  padding: 22px 20px 20px;
  position: relative;
  text-align: center;
}

.pwa-welcome-modal__crest {
  align-items: center;
  background: rgba(186, 160, 115, 0.12);
  border: 1.5px solid #baa073;
  border-radius: 50%;
  display: flex;
  font-size: 20px;
  height: 52px;
  justify-content: center;
  margin: 0 auto 12px;
  width: 52px;
}

.pwa-welcome-modal__title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 6px;
}

.pwa-welcome-modal__body {
  padding: 18px 20px 20px;
}

.pwa-welcome-modal__quote {
  color: #4a4551;
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 14px;
}

.pwa-welcome-modal__quote span {
  color: var(--cis-colour-text-primary);
  font-weight: 600;
}

.pwa-welcome-modal__signer {
  align-items: center;
  border-top: 1px solid #edeaf2;
  display: flex;
  gap: 11px;
  padding: 11px 0;
}

.pwa-welcome-modal__avatar {
  background: #f7f6f9;
  border: 1px solid #e4e0e8;
  border-radius: 50%;
  flex-shrink: 0;
  height: 40px;
  width: 40px;
}

.pwa-welcome-modal__signer-name {
  font-size: 12px;
  font-weight: 600;
}

.pwa-welcome-modal__signer-role {
  color: #8a6d3b;
  font-size: 10.5px;
}

.pwa-welcome-modal__body .pwa-button {
  height: 46px;
  margin-top: 8px;
  width: 100%;
}

/* --- Bottom nav active dot --- */

.pwa-bottom-nav-dot {
  background: #baa073;
  border-radius: 50%;
  display: block;
  height: 4px;
  width: 4px;
}

/* ==========================================================================
   MobileAgendaNetwork v2 (designs 01–16)
   ========================================================================== */

.pwa-ag { display: flex; flex-direction: column; min-height: 100dvh; }
.pwa-ag__scroll { flex: 1; padding: 12px 14px 76px; }
.pwa-ag__canopy { padding: 14px 18px 16px; }
.pwa-ag__canopy--tight { padding: 14px 18px 14px; }
.pwa-ag__glab { font-size: 9.5px; letter-spacing: 0.11em; margin: 0; }
.pwa-ag__title { color: #fff; font-size: 19px; font-weight: 600; margin: 4px 0 0; position: relative; }
.pwa-ag__title--sm { font-size: 17px; margin-top: 3px; }
.pwa-ag__canopy-row { align-items: center; display: flex; justify-content: space-between; position: relative; }
.pwa-ag__viewtoggle { border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; color: #d8cfe6; font-size: 10.5px; padding: 6px 11px; text-decoration: none; }

.pwa-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(21,18,26,0.06); display: block; text-decoration: none; }
.pwa-cta { align-items: center; background: #260269; border: 0; border-radius: 11px; box-shadow: 0 6px 16px rgba(38,2,105,0.24); color: #fff; cursor: pointer; display: flex; font-family: inherit; font-size: 13px; font-weight: 600; gap: 7px; height: 46px; justify-content: center; text-decoration: none; width: 100%; }
.pwa-cta--live { background: #9c3b3b; box-shadow: 0 6px 16px rgba(156,59,59,0.28); margin-bottom: 9px; }
.pwa-sd__notice--live-off { margin-bottom: 16px; }
.pwa-sd__notice--live-off[hidden] { display: none !important; }
.pwa-cta--outline { background: #fff; border: 1.5px solid #260269; box-shadow: none; color: #260269; }

/* Day switcher (design 01) */
.pwa-ag__days { background: rgba(255,255,255,0.1); border-radius: 12px; display: flex; gap: 7px; margin-top: 12px; padding: 4px; }
.pwa-ag__day { border-radius: 9px; color: #d8cfe6; flex: 1; font-size: 11.5px; font-weight: 600; padding: 8px 0; text-align: center; text-decoration: none; }
.pwa-ag__day--on { background: #fff; color: #260269; font-weight: 700; }

/* Filter chip rail */
.pwa-ag__chips { background: var(--cis-colour-background); border-bottom: 1px solid var(--cis-colour-border-muted); display: flex; gap: 7px; overflow-x: auto; padding: 11px 14px 8px; }
.pwa-chip { align-items: center; background: #fff; border: 1px solid var(--cis-colour-border); border-radius: 16px; color: var(--cis-colour-text-secondary); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 10.5px; font-weight: 600; padding: 6px 11px; text-decoration: none; white-space: nowrap; }
.pwa-chip--on { background: #260269; border-color: #260269; color: #fff; }

.pwa-ag__band { color: #8a6d3b; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; margin: 14px 0 8px 2px; text-transform: uppercase; }
.pwa-ag__band:first-child { margin-top: 0; }

/* Live hero row (design 01) */
.pwa-ag__live { border-left: 3px solid #9c3b3b; margin-bottom: 9px; overflow: hidden; padding: 0; }
.pwa-ag__live-inner { padding: 12px 14px; }
.pwa-ag__live-top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 5px; }
.pwa-ag__live-tag { align-items: center; color: #9c3b3b; display: flex; font-size: 9px; font-weight: 700; gap: 5px; letter-spacing: 0.06em; text-transform: uppercase; }
.pwa-ag__live-dot { background: #9c3b3b; border-radius: 50%; height: 6px; width: 6px; }
.pwa-ag__live-venue { color: #8a6d3b; font-size: 10px; }
.pwa-ag__live-title { color: var(--cis-colour-text-primary); font-size: 13px; font-weight: 600; line-height: 1.35; }
.pwa-ag__live-sub { color: var(--cis-colour-text-secondary); font-size: 10.5px; margin-top: 3px; }

/* Standard session row */
.pwa-ag__row { display: flex; gap: 11px; margin-bottom: 9px; padding: 12px 14px; }
.pwa-ag__row-time { color: var(--cis-colour-text-secondary); flex-shrink: 0; font-size: 10.5px; line-height: 1.3; width: 44px; }
.pwa-ag__row-time div { color: var(--cis-colour-text-primary); font-weight: 700; }
.pwa-ag__row-main { flex: 1; }
.pwa-ag__row-title { color: var(--cis-colour-text-primary); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.pwa-ag__row-sub { color: var(--cis-colour-text-secondary); font-size: 10.5px; margin-top: 3px; }
.pwa-ag__row-star { color: #baa073; font-size: 13px; }

/* Timeline (design 02) */
.pwa-ag__scroll--timeline { padding: 16px 12px 76px; }
.pwa-tl { display: flex; flex-direction: column; }
.pwa-tl__row { display: flex; gap: 10px; }
.pwa-tl__time { color: #9a93a6; flex-shrink: 0; font-size: 9.5px; padding-top: 11px; text-align: right; width: 34px; }
.pwa-tl__time--live { color: #9c3b3b; font-weight: 700; }
.pwa-tl__rail { border-left: 2px solid var(--cis-colour-border-muted); flex-shrink: 0; position: relative; width: 2px; }
.pwa-tl__node { background: var(--cis-colour-border-muted); border-radius: 50%; height: 8px; left: -5px; position: absolute; top: 12px; width: 8px; }
.pwa-tl__node--live { background: #9c3b3b; border: 2px solid var(--cis-colour-background); height: 10px; left: -6px; width: 10px; }
.pwa-tl__nowline { background: repeating-linear-gradient(90deg, #9c3b3b 0 5px, transparent 5px 9px); height: 1.5px; left: 0; position: absolute; right: -300px; top: 16px; }
.pwa-tl__card { flex: 1; margin-bottom: 12px; padding: 9px 11px; }
.pwa-tl__card--live { border-left: 3px solid #9c3b3b; }
.pwa-tl__card--saved { border-left: 3px solid #baa073; }
.pwa-tl__card-title { color: var(--cis-colour-text-primary); font-size: 11.5px; font-weight: 600; }
.pwa-tl__card-sub { color: var(--cis-colour-text-secondary); font-size: 9.5px; margin-top: 1px; }
.pwa-tl__card-sub--live { color: #9c3b3b; font-weight: 600; }
.pwa-tl__card-sub--saved { color: #8a6d3b; }

/* Search (design 04) */
.pwa-ag__searchbar { background: #fff; border-bottom: 1px solid var(--cis-colour-border-muted); padding: 14px 16px 12px; }
.pwa-ag__searchfield { align-items: center; background: #f1eef6; border: 1.5px solid #260269; border-radius: 12px; display: flex; gap: 9px; height: 42px; padding: 0 13px; }
.pwa-ag__searchfield input { background: none; border: 0; color: var(--cis-colour-text-primary); flex: 1; font-family: inherit; font-size: 12.5px; outline: none; }
.pwa-ag__searchfield a { color: #9a93a6; text-decoration: none; }
.pwa-ag__count { color: var(--cis-colour-text-secondary); font-size: 10.5px; margin-bottom: 11px; }
.pwa-ag__result { margin-bottom: 10px; padding: 12px 14px; }
.pwa-ag__result-meta { color: #8a6d3b; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pwa-ag__result-title { color: var(--cis-colour-text-primary); font-size: 12.5px; font-weight: 600; line-height: 1.4; margin-top: 4px; }
.pwa-ag__result-title mark { background: rgba(186,160,115,0.35); color: inherit; }

/* Filter sheet (design 03) */
.pwa-filter-sheet { background: var(--cis-colour-background); border-radius: 22px 22px 0 0; bottom: 0; left: 0; max-height: 84vh; overflow-y: auto; padding: 16px 18px 22px; position: absolute; right: 0; }
.pwa-filter-sheet__head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }
.pwa-filter-sheet__title { font-size: 15px; font-weight: 600; }
.pwa-filter-sheet__label { color: var(--cis-colour-text-secondary); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 9px; text-transform: uppercase; }
.pwa-filter-sheet__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }

/* Session detail (designs 05–08) */
.pwa-sd__canopy { padding: 12px 18px 20px; }
.pwa-sd--live .pwa-sd__canopy, .pwa-badge__canopy { background: #190234; }
.pwa-sd__back { align-items: center; color: #d8cfe6; display: flex; font-size: 11px; gap: 8px; position: relative; text-decoration: none; }
.pwa-sd__pill { align-items: center; border-radius: 14px; display: inline-flex; font-size: 9.5px; font-weight: 700; gap: 6px; letter-spacing: 0.06em; margin-top: 14px; padding: 4px 10px; text-transform: uppercase; }
.pwa-sd__pill--gold { background: rgba(186,160,115,0.16); border: 1px solid rgba(186,160,115,0.5); color: #ebd9b4; }
.pwa-sd__pill--live { background: rgba(156,59,59,0.22); border: 1px solid rgba(156,59,59,0.6); color: #f2b5b5; }
.pwa-sd__pill--done { background: rgba(47,125,79,0.2); border: 1px solid rgba(47,125,79,0.55); color: #8fd3ac; }
.pwa-sd__pill-dot { background: #e56b6b; border-radius: 50%; box-shadow: 0 0 0 3px rgba(229,107,107,0.25); height: 6px; width: 6px; }
.pwa-sd__pill-dot--gold { background: #baa073; box-shadow: none; }
.pwa-sd__title { color: #fff; font-size: 17px; font-weight: 600; line-height: 1.3; margin-top: 10px; position: relative; }
.pwa-sd__meta { color: #d8cfe6; font-size: 11.5px; margin-top: 6px; }
.pwa-sd__meta--moved { color: #fff; }
.pwa-sd__meta--moved span { color: #9a8fb8; text-decoration: line-through; }
.pwa-sd__scroll { margin-top: -10px; padding: 16px 16px 76px; }
.pwa-sd__actions { display: flex; gap: 9px; margin-bottom: 18px; }
.pwa-sd__ghost { align-items: center; background: #fff; border: 1px solid var(--cis-colour-border); border-radius: 11px; color: #260269; display: flex; flex: 1; font-size: 12px; font-weight: 600; gap: 7px; height: 44px; justify-content: center; text-decoration: none; }
.pwa-sd__icon { align-items: center; background: #fff; border: 1px solid var(--cis-colour-border); border-radius: 11px; color: #260269; cursor: pointer; display: flex; font-size: 15px; height: 46px; justify-content: center; width: 46px; }
.pwa-sd__label { color: var(--cis-colour-text-primary); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 7px; text-transform: uppercase; }
.pwa-sd__body { color: #4a4551; font-size: 12px; line-height: 1.65; margin: 0 0 18px; }
.pwa-sd__speaker { align-items: center; display: flex; gap: 11px; margin-bottom: 12px; padding: 12px 14px; }
.pwa-sd__speaker-med { flex-shrink: 0; height: 42px; margin: 0; width: 42px; }
.pwa-sd__speaker-name { font-size: 12.5px; font-weight: 600; }
.pwa-sd__speaker-role { color: #8a6d3b; font-size: 10.5px; }
.pwa-sd__notice { align-items: center; background: #fbf6ec; border: 1px solid #ead9b8; border-radius: 12px; color: #8a6d3b; display: flex; font-size: 11px; gap: 9px; line-height: 1.5; margin-bottom: 16px; padding: 12px 13px; }
.pwa-sd__notice--info { font-size: 10.5px; margin-bottom: 0; margin-top: 12px; }
.pwa-sd__feedback { margin-bottom: 12px; padding: 14px; text-align: center; }
.pwa-sd__feedback-med { margin: 0 auto 10px; }
.pwa-sd__feedback-title { font-size: 13px; font-weight: 600; }
.pwa-sd__feedback-sub { color: var(--cis-colour-text-secondary); font-size: 11px; margin: 3px 0 13px; }
.pwa-sd__materials { overflow: hidden; }
.pwa-sd__material { align-items: center; border-bottom: 1px solid #f1eef6; display: flex; gap: 11px; padding: 12px 14px; text-decoration: none; }
.pwa-sd__material:last-child { border-bottom: 0; }
.pwa-sd__material-icon { align-items: center; background: rgba(38,2,105,0.08); border-radius: 8px; color: #260269; display: flex; font-size: 12px; height: 30px; justify-content: center; width: 30px; }
.pwa-sd__material div { flex: 1; }
.pwa-sd__material-name { color: var(--cis-colour-text-primary); font-size: 12px; font-weight: 600; }
.pwa-sd__material-meta { color: var(--cis-colour-text-secondary); font-size: 10px; }
.pwa-sd__material-dl { color: #260269; font-size: 14px; }

/* My schedule (designs 09–12) */
.pwa-sc__canopy-row { align-items: flex-end; display: flex; justify-content: space-between; position: relative; }
.pwa-sc__count { text-align: right; }
.pwa-sc__count-n { color: #baa073; font-size: 20px; font-weight: 700; }
.pwa-sc__count-l { color: #d8cfe6; font-size: 9px; }
.pwa-sc__card { border-left: 3px solid #baa073; margin-bottom: 9px; padding: 12px 14px; }
.pwa-sc__meta { color: #8a6d3b; font-size: 9.5px; font-weight: 700; }
.pwa-sc__title { color: var(--cis-colour-text-primary); font-size: 12.5px; font-weight: 600; line-height: 1.35; margin-top: 3px; }
.pwa-sc__offline { align-items: center; background: #fbf6ec; border: 1px solid #ead9b8; border-radius: 10px; display: flex; gap: 8px; margin-bottom: 14px; padding: 9px 12px; }
.pwa-sc__offline[hidden] { display: none !important; }
.pwa-sc__offline div { color: #8a6d3b; font-size: 10px; line-height: 1.4; }
.pwa-sc__empty { align-items: center; display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 0 34px 76px; text-align: center; }
.pwa-sc__empty-med { font-size: 24px; height: 64px; margin-bottom: 16px; width: 64px; }
.pwa-clash { background: #fbf6ec; border: 1px solid #ead9b8; border-radius: 14px; margin-bottom: 12px; padding: 12px 13px; }
.pwa-clash__head { align-items: center; color: #9c6b14; display: flex; font-size: 10px; font-weight: 700; gap: 6px; letter-spacing: 0.05em; margin-bottom: 9px; text-transform: uppercase; }
.pwa-clash__item { background: #fff; border-radius: 9px; display: block; margin-bottom: 7px; padding: 10px 12px; text-decoration: none; }
.pwa-clash__title { color: var(--cis-colour-text-primary); font-size: 12px; font-weight: 600; margin-top: 2px; }
.pwa-clash__resolve { color: #8a6d3b; font-size: 10.5px; font-weight: 600; margin-top: 9px; text-align: center; }

/* Network hub (design 13) */
.pwa-nw__tiles { display: flex; gap: 9px; margin-bottom: 16px; }
.pwa-nw__tile { background: #fff; border-radius: 13px; box-shadow: 0 2px 8px rgba(21,18,26,0.06); display: block; flex: 1; padding: 13px 12px; text-decoration: none; }
.pwa-nw__tile--dark { background: #190234; box-shadow: none; color: #fff; }
.pwa-nw__tile-icon { align-items: center; border-radius: 9px; display: flex; font-size: 15px; height: 34px; justify-content: center; margin-bottom: 9px; width: 34px; }
.pwa-nw__tile-icon--qr { background: #fff; }
.pwa-nw__qr-mini { background: linear-gradient(135deg, #260269 25%, #fff 25% 50%, #260269 50% 75%, #fff 75%); background-size: 7px 7px; display: block; height: 20px; width: 20px; }
.pwa-nw__tile-title { color: var(--cis-colour-text-primary); display: block; font-size: 11.5px; font-weight: 600; }
.pwa-nw__tile--dark .pwa-nw__tile-title { color: #fff; }
.pwa-nw__tile-sub { color: var(--cis-colour-text-secondary); display: block; font-size: 9.5px; margin-top: 1px; }
.pwa-nw__tile-sub--gold { color: #baa073; }
.pwa-nw__badge { background: #9c3b3b; border-radius: 10px; color: #fff; font-size: 9px; font-style: normal; font-weight: 700; padding: 2px 7px; }
.pwa-nw__avatar { flex-shrink: 0; height: 38px; margin: 0; width: 38px; }
.pwa-nw__avatar--sm { height: 36px; width: 36px; }
.pwa-nw__req { align-items: center; display: flex; gap: 10px; margin-bottom: 9px; padding: 11px 13px; }
.pwa-nw__req-main { flex: 1; min-width: 0; }
.pwa-nw__name { color: var(--cis-colour-text-primary); font-size: 12px; font-weight: 600; }
.pwa-nw__role { color: var(--cis-colour-text-secondary); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwa-nw__req-actions { display: flex; gap: 6px; }
.pwa-nw__accept, .pwa-nw__decline { align-items: center; border-radius: 8px; cursor: pointer; display: flex; font-size: 13px; height: 30px; justify-content: center; width: 30px; }
.pwa-nw__accept { background: #260269; border: 0; color: #fff; }
.pwa-nw__decline { background: #fff; border: 1px solid var(--cis-colour-border); color: #9a93a6; font-size: 12px; }
.pwa-nw__list { overflow: hidden; }
.pwa-nw__row { align-items: center; border-bottom: 1px solid #f1eef6; display: flex; gap: 10px; padding: 11px 13px; text-decoration: none; }
.pwa-nw__row:last-child { border-bottom: 0; }

/* Directory (design 15) */
.pwa-dir__search { align-items: center; background: rgba(255,255,255,0.12); border-radius: 11px; display: flex; gap: 9px; height: 38px; margin-top: 12px; padding: 0 12px; position: relative; }
.pwa-dir__search input { background: none; border: 0; color: #fff; flex: 1; font-family: inherit; font-size: 12px; outline: none; }
.pwa-dir__search input::placeholder { color: #c7bde0; }
.pwa-dir__scroll { padding: 6px 0 76px; }
.pwa-dir__letter { color: #8a6d3b; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; padding: 10px 16px 4px; }
.pwa-dir__row { align-items: center; display: flex; gap: 11px; padding: 9px 16px; }
.pwa-dir__row-main { flex: 1; min-width: 0; text-decoration: none; }
.pwa-dir__add, .pwa-dir__connected { align-items: center; border-radius: 8px; display: flex; height: 28px; justify-content: center; text-decoration: none; width: 28px; }
.pwa-dir__add { border: 1px solid #260269; color: #260269; font-size: 15px; }
.pwa-dir__connected { background: rgba(47,125,79,0.12); color: #2f7d4f; font-size: 13px; }

/* QR badge (design 14) */
.pwa-badge { background: #190234; display: flex; flex-direction: column; min-height: 100dvh; }
.pwa-badge__canopy { overflow: hidden; padding: 12px 18px 18px; position: relative; }
.pwa-badge__body { align-items: center; display: flex; flex: 1; flex-direction: column; padding: 4px 22px 90px; position: relative; text-align: center; }
.pwa-badge__crest { align-items: center; background: rgba(186,160,115,0.12); border: 1.5px solid #baa073; border-radius: 50%; display: flex; font-size: 20px; height: 52px; justify-content: center; margin-bottom: 14px; width: 52px; }
.pwa-badge__name { color: #fff; font-size: 17px; font-weight: 600; margin-top: 5px; }
.pwa-badge__role { color: #d8cfe6; font-size: 11px; margin-top: 3px; }
.pwa-badge__qr-frame { background: #fff; border-radius: 18px; box-shadow: 0 16px 34px rgba(0,0,0,0.35); margin: 20px 0 14px; padding: 18px; }
.pwa-badge__qr { display: grid; grid-template-columns: repeat(21, 1fr); height: 170px; position: relative; width: 170px; }
.pwa-badge__qr i { background: transparent; }
.pwa-badge__qr i.on { background: #190234; }
.pwa-badge__qr-centre { align-items: center; background: #fff; border-radius: 8px; display: flex; height: 44px; inset: 0; justify-content: center; margin: auto; position: absolute; width: 44px; }
.pwa-badge__qr-centre span { align-items: center; border: 1.5px solid #baa073; border-radius: 50%; color: #260269; display: flex; font-size: 13px; font-weight: 700; height: 30px; justify-content: center; width: 30px; }
.pwa-badge__note { color: #9a8fb8; font-size: 11px; line-height: 1.5; }

/* Connection request (design 16) */
.pwa-dim { filter: brightness(0.72); }
.pwa-req-overlay { background: rgba(21,10,40,0.6); display: flex; inset: 0; justify-content: center; overflow-y: auto; padding: 70px 14px 24px; position: fixed; z-index: 50; }
.pwa-req-overlay[hidden] { display: none !important; }
.pwa-req-modal { align-self: flex-start; background: #fff; border-radius: 18px; box-shadow: 0 18px 40px rgba(21,18,26,0.4); max-width: 340px; overflow: hidden; width: 100%; }
.pwa-req-modal__head { border-bottom: 1px solid #f1eef6; padding: 20px 20px 16px; text-align: center; }
.pwa-req-modal__avatar { height: 60px; margin: 0 auto 11px; width: 60px; }
.pwa-req-modal__name { font-size: 15px; font-weight: 600; }
.pwa-req-modal__role { color: var(--cis-colour-text-secondary); font-size: 11px; margin-top: 2px; }
.pwa-req-modal__tag { background: rgba(186,160,115,0.14); border-radius: 12px; color: #8a6d3b; display: inline-flex; font-size: 9px; font-weight: 700; margin-top: 8px; padding: 3px 9px; }
.pwa-req-modal__body { padding: 16px 20px 18px; }
.pwa-req-modal__label { color: var(--cis-colour-text-primary); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 7px; text-transform: uppercase; }
.pwa-req-modal__note { background: var(--cis-colour-background); border: 1px solid var(--cis-colour-border-muted); border-radius: 10px; color: #4a4551; font-family: inherit; font-size: 11.5px; line-height: 1.5; margin-bottom: 14px; padding: 10px 12px; resize: none; width: 100%; }
.pwa-req-modal__dismiss { color: #9a93a6; display: block; font-size: 11px; margin-top: 12px; text-align: center; text-decoration: none; }

/* ==========================================================================
   MobileLiveStream v2 (designs 01–11)
   ========================================================================== */

/* Cinematic stage shared by the player, home card and PiP */
.pwa-stage { background: linear-gradient(180deg, #1c0740 0%, #0a0217 100%); overflow: hidden; position: relative; }
.pwa-stage::before { background: radial-gradient(ellipse at 30% 40%, rgba(186,160,115,0.18) 0%, transparent 60%); content: ''; inset: 0; position: absolute; }
.pwa-stage::after { background: radial-gradient(ellipse at 70% 90%, rgba(38,2,105,0.5) 0%, transparent 55%); content: ''; inset: 0; position: absolute; }

/* --- DESIGN 01 · home live card --- */
.pwa-hlive { border: 1px solid #baa073; margin-bottom: 14px; overflow: hidden; }
.pwa-hlive__stage { align-items: center; display: flex; height: 110px; justify-content: center; }
.pwa-hlive__chevron { bottom: -10px; opacity: 0.25; position: absolute; right: -10px; }
.pwa-hlive__play { align-items: center; backdrop-filter: blur(4px); background: rgba(255,255,255,0.14); border: 1.5px solid #baa073; border-radius: 50%; color: #fff; display: flex; font-size: 15px; height: 44px; justify-content: center; position: relative; width: 44px; z-index: 1; }
.pwa-hlive__chip { align-items: center; color: #fff; display: inline-flex; font-size: 10px; font-weight: 600; gap: 5px; left: 10px; letter-spacing: 0.08em; position: absolute; top: 9px; z-index: 1; }
.pwa-hlive__dot { background: #e56b6b; border-radius: 50%; box-shadow: 0 0 0 3px rgba(229,107,107,0.25); height: 6px; width: 6px; }
.pwa-hlive__viewers { bottom: 8px; color: #d8cfe6; font-size: 9px; font-weight: 600; left: 10px; position: absolute; z-index: 1; }
.pwa-hlive__body { padding: 12px 14px; }
.pwa-hlive__kicker { color: #8a6d3b; font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; margin-bottom: 4px; text-transform: uppercase; }
.pwa-hlive__title { color: var(--cis-colour-text-primary); font-size: 13px; font-weight: 600; line-height: 1.35; }
.pwa-hlive__meta { color: var(--cis-colour-text-secondary); font-size: 10.5px; margin-top: 3px; }

/* --- DESIGN 02 · viewers note on session detail --- */
.pwa-sd__viewers { align-items: center; background: #f1eef6; border: 1px solid #e1daee; border-radius: 10px; color: #4a4551; display: flex; font-size: 10.5px; gap: 8px; line-height: 1.4; margin-top: 12px; padding: 9px 12px; }
.pwa-sd__viewers span { color: #260269; }

/* --- Player shell --- */
.pwa-live { background: #0a0217; display: flex; flex-direction: column; inset: 0; position: fixed; z-index: 30; }
.pwa-live__stage { flex: 1; position: relative; transition: flex-basis 0.25s ease; }
.pwa-live__stage[hidden] { display: none !important; }
.pwa-live__stage.is-split { flex: none; height: 35%; }
.pwa-live__stage.is-dimmed::after { background: linear-gradient(180deg, rgba(10,2,23,0.7), rgba(10,2,23,0.3) 40%, rgba(10,2,23,0.85)); }
.pwa-live__stage.is-audio-only { background: #0a0217; }
.pwa-live__chevron { left: 50%; opacity: 0.28; position: absolute; top: 20%; transform: translateX(-50%); }

/* YouTube embed fills the stage; the design's chrome sits above it.
   The IFrame API replaces the target element, so these rules land on the
   generated <iframe> itself. */
.pwa-live__video { border: 0; display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
.pwa-live__stage.is-audio-only .pwa-live__video { opacity: 0; }
.pwa-live__spinner--still::before { animation: none; border-top-color: rgba(186,160,115,0.35); }
.pwa-live__connect-note[hidden] { display: none !important; }

/* --- DESIGN 03 · connecting --- */
.pwa-live__connect { align-items: center; background: linear-gradient(180deg, #1c0740 0%, #0a0217 100%); display: flex; flex-direction: column; inset: 0; justify-content: center; padding: 0 34px; position: absolute; text-align: center; z-index: 4; }
.pwa-live__connect[hidden] { display: none !important; }
.pwa-live__spinner { align-items: center; background: rgba(186,160,115,0.08); border: 1.5px solid #baa073; border-radius: 50%; color: #baa073; display: flex; font-size: 20px; height: 74px; justify-content: center; margin-bottom: 20px; position: relative; width: 74px; }
.pwa-live__spinner::before { animation: pwa-spin 1s linear infinite; border: 2px solid transparent; border-radius: 50%; border-top-color: #baa073; content: ''; inset: -6px; position: absolute; }
.pwa-live__connect-title { color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.4; margin: 6px 0 8px; }
.pwa-live__connect-sub { color: #9a8fb8; font-size: 11.5px; line-height: 1.6; }
.pwa-live__connect-note { backdrop-filter: blur(6px); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 11px; bottom: 14px; color: #d8cfe6; font-size: 10.5px; left: 14px; padding: 10px 12px; position: absolute; right: 14px; }

/* --- top chrome --- */
/* Scrim masks YouTube's own title/channel overlay, which cannot be disabled
   (modestbranding is deprecated) and would otherwise collide with our chrome. */
.pwa-live__stage::after { background: linear-gradient(180deg, rgba(10,2,23,0.92) 0%, rgba(10,2,23,0.55) 55%, transparent 100%); content: ''; height: 96px; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: 2; }
.pwa-live__top { align-items: center; display: flex; justify-content: space-between; left: 14px; position: absolute; right: 14px; top: 14px; z-index: 3; }
.pwa-live__top[hidden] { display: none !important; }
.pwa-live__back { color: #fff; font-size: 11px; text-decoration: none; }
.pwa-live__chip { align-items: center; backdrop-filter: blur(8px); background: rgba(156,59,59,0.4); border: 1px solid rgba(229,107,107,0.5); border-radius: 14px; color: #fff; display: inline-flex; font-size: 10px; font-weight: 600; gap: 5px; letter-spacing: 0.09em; padding: 5px 10px; }
.pwa-live__chip--sd { background: rgba(156,107,20,0.4); border-color: rgba(240,195,107,0.5); color: #f3d89b; }
.pwa-live__chip-dot { background: #e56b6b; border-radius: 50%; box-shadow: 0 0 0 3px rgba(229,107,107,0.25); height: 6px; width: 6px; }
.pwa-live__chip-venue { opacity: 0.7; }
.pwa-live__ctrls { display: flex; gap: 8px; }
.pwa-ctrl { align-items: center; backdrop-filter: blur(6px); background: rgba(255,255,255,0.14); border: 0; border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 12px; height: 34px; justify-content: center; text-decoration: none; width: 34px; }

/* --- DESIGN 05/06 · centre transport --- */
.pwa-live__centre { align-items: center; display: flex; gap: 24px; inset: 0; justify-content: center; position: absolute; z-index: 3; }
.pwa-live__centre[hidden] { display: none !important; }
.pwa-live__seek { font-size: 14px; height: 44px; width: 44px; }
.pwa-live__play { align-items: center; background: #baa073; border: 0; border-radius: 50%; box-shadow: 0 8px 24px rgba(186,160,115,0.4); color: #190234; cursor: pointer; display: flex; font-size: 22px; height: 66px; justify-content: center; width: 66px; }

/* --- DESIGN 05 · info panel --- */
.pwa-live__panel { backdrop-filter: blur(10px); background: rgba(15,4,32,0.55); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; bottom: 14px; left: 14px; padding: 12px 14px; position: absolute; right: 14px; z-index: 3; }
.pwa-live__panel[hidden] { display: none !important; }
.pwa-live__panel-meta { align-items: center; color: #d8cfe6; display: flex; font-size: 9px; gap: 8px; margin-bottom: 8px; }
.pwa-live__panel-dot { opacity: 0.5; }
.pwa-live__panel-title { color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.pwa-live__panel-sub { color: #9a8fb8; font-size: 10px; margin-top: 2px; }
.pwa-live__bar { background: rgba(255,255,255,0.14); border-radius: 2px; height: 3px; margin-top: 11px; }
.pwa-live__bar-fill { background: linear-gradient(90deg, #baa073, #f3d89b); border-radius: 2px; box-shadow: 0 0 8px rgba(186,160,115,0.6); height: 100%; width: 30%; }

/* --- DESIGN 06 · transport bar --- */
.pwa-live__transport { bottom: 16px; left: 14px; position: absolute; right: 14px; z-index: 3; }
.pwa-live__transport[hidden] { display: none !important; }
.pwa-live__scrub { align-items: center; display: flex; gap: 10px; margin-bottom: 8px; }
.pwa-live__scrub-t { color: #d8cfe6; font-size: 10px; }
.pwa-live__scrub-track { background: rgba(255,255,255,0.14); border-radius: 2px; flex: 1; height: 3px; position: relative; }
.pwa-live__scrub-fill { background: linear-gradient(90deg, #baa073, #f3d89b); border-radius: 2px; height: 100%; width: 30%; }
.pwa-live__scrub-knob { background: #baa073; border-radius: 50%; box-shadow: 0 0 10px rgba(186,160,115,0.7); height: 11px; left: 30%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 11px; }
.pwa-live__tools { align-items: center; color: #d8cfe6; display: flex; font-size: 11px; justify-content: space-between; }
.pwa-live__tools-l, .pwa-live__tools-r { display: flex; gap: 14px; }
.pwa-live__tool { background: none; border: 0; color: #d8cfe6; cursor: pointer; font-family: inherit; font-size: 11px; padding: 0; }
.pwa-live__tool--on { color: #baa073; }
.pwa-live__tool--off { opacity: 0.5; }

/* --- DESIGN 07 · degraded --- */
.pwa-live__degraded { bottom: 14px; left: 14px; position: absolute; right: 14px; z-index: 4; }
.pwa-live__degraded[hidden] { display: none !important; }
.pwa-live__degraded-card { align-items: center; backdrop-filter: blur(10px); background: rgba(74,44,10,0.55); border: 1px solid rgba(240,195,107,0.35); border-radius: 14px; color: #f3d89b; display: flex; font-size: 11px; gap: 8px; line-height: 1.45; margin-bottom: 10px; padding: 12px 14px; }
.pwa-live__degraded-icon { align-items: center; background: rgba(240,195,107,0.16); border-radius: 50%; display: flex; flex-shrink: 0; font-size: 14px; height: 28px; justify-content: center; width: 28px; }
.pwa-live__degraded-actions { display: flex; gap: 8px; }
.pwa-live__ghost, .pwa-live__gold { border: 0; border-radius: 9px; cursor: pointer; flex: 1; font-family: inherit; font-size: 11.5px; font-weight: 600; height: 36px; }
.pwa-live__ghost { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; }
.pwa-live__gold { background: rgba(186,160,115,0.9); color: #190234; }

/* --- DESIGN 08 · Q&A rail --- */
.pwa-qarail { background: #0f0424; border-radius: 20px 20px 0 0; border-top: 1px solid rgba(186,160,115,0.3); bottom: 0; display: flex; flex-direction: column; left: 0; padding: 14px 16px; position: absolute; right: 0; top: 35%; z-index: 6; }
.pwa-qarail[hidden] { display: none !important; }
.pwa-qarail__grip { background: rgba(255,255,255,0.15); border-radius: 2px; height: 3px; margin: 0 auto 12px; width: 34px; }
.pwa-qarail__head { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 12px; }
.pwa-qarail__tabs { display: flex; gap: 16px; }
.pwa-qarail__tab { background: none; border: 0; color: #8a78a8; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 0 0 6px; }
.pwa-qarail__tab--on { border-bottom: 2px solid #baa073; color: #fff; }
.pwa-qarail__close { background: none; border: 0; color: #8a78a8; cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 0 0; }
.pwa-qarail__list { display: flex; flex: 1; flex-direction: column; gap: 9px; overflow-y: auto; }
.pwa-qarail__item { background: rgba(255,255,255,0.05); border-radius: 11px; padding: 10px 11px; }
.pwa-qarail__item--mine { background: rgba(186,160,115,0.1); border: 1px solid rgba(186,160,115,0.3); }
.pwa-qarail__item-head { align-items: center; display: flex; gap: 7px; margin-bottom: 5px; }
.pwa-qarail__avatar { align-items: center; background: linear-gradient(135deg, #baa073, #8a6d3b); border-radius: 50%; color: #190234; display: flex; flex-shrink: 0; font-size: 8px; font-weight: 700; height: 20px; justify-content: center; width: 20px; }
.pwa-qarail__avatar--mine { background: #260269; border: 1px solid #baa073; color: #baa073; }
.pwa-qarail__author { color: #fff; font-size: 10.5px; font-weight: 600; }
.pwa-qarail__vote { background: none; border: 0; color: #8a78a8; cursor: pointer; font-family: inherit; font-size: 9px; margin-left: auto; padding: 0; }
.pwa-qarail__vote--on { color: #baa073; }
.pwa-qarail__body { color: #d8cfe6; font-size: 11px; line-height: 1.45; }
.pwa-qarail__item--mine .pwa-qarail__body { color: #f3d89b; }
.pwa-qarail__empty { color: #8a78a8; font-size: 11px; text-align: center; }
.pwa-qarail__compose { align-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 11px; display: flex; height: 40px; margin-top: 10px; padding: 0 12px; }
.pwa-qarail__compose input { background: none; border: 0; color: #fff; flex: 1; font-family: inherit; font-size: 11.5px; outline: none; }
.pwa-qarail__compose input::placeholder { color: #8a78a8; }
.pwa-qarail__compose button { background: none; border: 0; color: #baa073; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; }

/* --- DESIGN 11 · offline --- */
.pwa-live__offline { background: var(--cis-colour-background); display: flex; flex-direction: column; inset: 0; position: absolute; z-index: 5; }
.pwa-live__offline[hidden] { display: none !important; }
.pwa-live__offline-body { align-items: center; display: flex; flex: 1; flex-direction: column; justify-content: center; margin-top: -10px; padding: 22px 24px; text-align: center; }
.pwa-live__offline-med { font-size: 22px; height: 66px; margin-bottom: 14px; width: 66px; }
.pwa-live__offline-note { align-items: center; background: #fbf6ec; border: 1px solid #ead9b8; border-radius: 12px; color: #8a6d3b; display: flex; font-size: 10.5px; gap: 9px; line-height: 1.4; margin-bottom: 16px; padding: 11px 13px; text-align: left; width: 100%; }
.pwa-live__offline-note span { color: #9c6b14; }

/* --- DESIGN 04 · scheduled --- */
.pwa-lv__wait { margin-bottom: 16px; padding: 16px; text-align: center; }
.pwa-lv__wait-med { font-size: 20px; margin: 0 auto 12px; }
.pwa-lv__wait-title { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.pwa-lv__wait-sub { color: var(--cis-colour-text-secondary); font-size: 11px; line-height: 1.55; margin-bottom: 16px; }
.pwa-lv__count { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.pwa-lv__count-n { color: #260269; font-size: 20px; font-weight: 700; }
.pwa-lv__count-l { color: var(--cis-colour-text-secondary); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
.pwa-lv__count-sep { align-self: flex-start; color: #c4bdcf; font-size: 20px; }

/* --- DESIGN 09 · ended / replay --- */
.pwa-lv__replay { margin-bottom: 14px; overflow: hidden; }
.pwa-lv__replay-stage { align-items: center; display: flex; height: 92px; justify-content: center; }
.pwa-lv__replay-play { align-items: center; backdrop-filter: blur(4px); background: rgba(186,160,115,0.2); border: 1.5px solid #baa073; border-radius: 50%; color: #fff; display: flex; font-size: 15px; height: 44px; justify-content: center; position: relative; width: 44px; z-index: 1; }
.pwa-lv__replay-dur { bottom: 8px; color: #d8cfe6; font-size: 9px; font-weight: 600; position: absolute; right: 10px; z-index: 1; }
.pwa-lv__replay-body { padding: 12px 14px; }
.pwa-lv__replay-kicker { color: #8a6d3b; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.pwa-lv__replay-text { color: var(--cis-colour-text-primary); font-size: 12.5px; margin-top: 3px; }
.pwa-lv__pair { display: flex; gap: 9px; margin-top: 10px; }
.pwa-lv__pair-btn { align-items: center; background: #fff; border: 1px solid var(--cis-colour-border); border-radius: 11px; color: #260269; display: flex; flex: 1; font-size: 11.5px; font-weight: 600; gap: 6px; height: 42px; justify-content: center; text-decoration: none; }

/* --- DESIGN 10 · picture-in-picture --- */
.pwa-pip { border: 1px solid rgba(186,160,115,0.4); border-radius: 12px; bottom: 76px; box-shadow: 0 12px 26px rgba(0,0,0,0.45); overflow: hidden; position: fixed; right: 14px; width: 118px; z-index: 20; }
.pwa-pip[hidden] { display: none !important; }
.pwa-pip__stage { display: block; height: 68px; position: relative; }
.pwa-pip__chip { align-items: center; background: rgba(156,59,59,0.5); border-radius: 14px; color: #fff; display: inline-flex; font-size: 8px; gap: 4px; left: 6px; letter-spacing: 0.08em; padding: 2px 6px; position: absolute; top: 6px; z-index: 1; }
.pwa-pip__dot { background: #e56b6b; border-radius: 50%; height: 4px; width: 4px; }
.pwa-pip__close { background: none; border: 0; color: #fff; cursor: pointer; font-size: 10px; opacity: 0.8; position: absolute; right: 6px; top: 6px; z-index: 2; }
.pwa-pip__play { align-items: center; background: rgba(255,255,255,0.15); border-radius: 50%; color: #fff; display: flex; font-size: 10px; height: 26px; inset: 0; justify-content: center; margin: auto; position: absolute; width: 26px; z-index: 1; }
.pwa-pip__body { background: #0f0424; padding: 7px 9px; }
.pwa-pip__title { color: #fff; font-size: 9px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwa-pip__meta { color: #8a78a8; font-size: 7.5px; margin-top: 1px; }

/* --- Sign out ------------------------------------------------------------
   The v2 designs specify no sign-out control, but it must be reachable. It
   lives on Profile, and as a row under the "All sections" sheet so the
   design's 12-tile grid stays exactly as drawn. */
.pwa-signout { border-top: 1px solid var(--cis-colour-border-muted); margin-top: 22px; padding-top: 18px; }
.pwa-signout__label { color: var(--cis-colour-text-primary); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 9px; text-transform: uppercase; }
.pwa-signout__btn { background: #fff; border: 1.5px solid #9c3b3b; border-radius: var(--cis-radius-field); color: #9c3b3b; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; height: 46px; width: 100%; }
.pwa-signout__note { color: var(--cis-colour-text-secondary); font-size: 11px; line-height: 1.5; margin: 10px 0 0; }
.pwa-sections-signout { margin-top: 14px; }
.pwa-sections-signout button { background: #fff; border: 1.5px solid #9c3b3b; border-radius: 14px; color: #9c3b3b; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; height: 46px; width: 100%; }

/* --- Resend code (register step 3) -------------------------------------- */
.pwa-otp-resend { align-items: center; color: var(--cis-colour-text-secondary); display: flex; flex-wrap: wrap; font-size: 11.5px; gap: 6px; margin-top: 14px; }
.pwa-otp-resend #otp-timer { color: #c4bdcf; }
.pwa-otp-resend #otp-timer[hidden], .pwa-otp-resend #otp-resend-lead[hidden] { display: none !important; }
.pwa-otp-resend__btn { background: none; border: 0; color: var(--cis-colour-brand-primary); cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 0; text-decoration: underline; }
.pwa-otp-resend__btn[hidden] { display: none !important; }
.pwa-otp-resend__btn:disabled { color: #9a93a6; cursor: default; text-decoration: none; }
.pwa-otp-resend__status { flex-basis: 100%; font-size: 11px; margin-top: 4px; }
.pwa-otp-resend__status[hidden] { display: none !important; }
.pwa-otp-resend__status--ok { color: #2f7d4f; font-weight: 600; }
.pwa-otp-resend__status--pending { color: var(--cis-colour-text-secondary); }
.pwa-otp-resend__status--error { color: #9c3b3b; font-weight: 600; }

/* Real QR badge: the medallion overlays the centre, which high ECC tolerates. */
.pwa-badge__qr { height: 170px; position: relative; width: 170px; }
.pwa-badge__qr-img { display: block; height: 170px; width: 170px; }
.pwa-badge__qr-missing { color: #9a8fb8; font-size: 12px; padding: 60px 10px; text-align: center; width: 170px; }
.pwa-badge__code { color: #baa073; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; margin-bottom: 14px; }