/* ═══════════════════════════════════════════════
   PhotoBooth Admin Portal — shared styles
   Design system: BINGO host navy/cyan chrome
   + cybercolt.com lime primary CTA accent.
   ═══════════════════════════════════════════════ */

:root {
  /* cybercolt.com brand */
  --cc-lime:      #ACCA32;
  --cc-lime-hot:  #C4E64A;
  --cc-graphite:  #1B1D22;
  --cc-graphite-2:#232631;
  --cc-graphite-3:#2C303B;
  --cc-cream:     #F2F4EE;
  --cc-gold:      #E5C353;

  /* BINGO host admin chrome */
  --navy:         #0d1b2a;
  --navy-2:       #060e18;
  --navy-3:       #122236;
  --cyan:         #00d4ff;
  --cyan-dim:     #00a8cc;

  /* Semantic */
  --danger:       #C73E3E;
  --warn:         #E5A53E;
  --good:         #00c853;

  /* Surface */
  --surface:      #ffffff;
  --surface-2:    #f7f9fb;
  --ink:          #0d1b2a;
  --ink-dim:      rgba(13,27,42,0.55);
  --ink-fade:     rgba(13,27,42,0.28);
  --hairline:     rgba(13,27,42,0.08);

  /* Geometry */
  --radius-card:  24px;
  --radius-input: 10px;
  --radius-pill:  999px;

  /* Type — matches cybercolt-com: Inter for everything, JetBrains Mono for code/labels.
     "Display" usages add weight 800-900 + tight tracking; --font-display is now
     just Inter so any rule referencing it stays valid. */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ═══════════════════════════════════════════════
   Type system — clean Inter hierarchy, no aggressive tracking.
     Headings get weight; codes/eyebrows get mono; metadata stays readable.
   ═══════════════════════════════════════════════ */

/* Display headings — Inter at maximum weight with very slight tightening so
   bold text doesn't feel airy. Mixed case, never uppercase. */
.page-title,
.wordmark-lg, .wordmark-md,
.empty-state .title,
.stat-tile .value,
.modal-title,
.event-card .event-name,
.event-date-badge .day,
.ep-event-name,
.pane-title,
.tpl-card .tpl-name,
.event-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 900;
  letter-spacing: -0.015em;
  text-transform: none;
}

/* Eyebrows + section dividers — uppercase mono, bumped to 700 for presence */
.form-section-title,
.section-header,
.rail-title,
.lib-group-title,
.stat-tile .label,
.wordmark-sub,
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Pairing codes + status pills — mono, bold, light tracking */
.event-card .event-code,
.event-status,
.event-pills .pill,
.event-card .event-edit {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Descriptive metadata — Inter weight 600 for more presence than before */
.event-meta,
.ep-event-meta,
.te-rail .tpl-item .meta,
.tpl-card .tpl-meta,
.tpl-card .meta,
.assigned-tpl .meta,
.lib-tile .meta,
.event-venue {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Body copy — beef up the base weight slightly for better readability on dark */
body {
  font-weight: 500;
}

/* Body line-height + smoothing */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  line-height: 1.5;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--ink);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.45;
}

/* ── Ambient radial glow used across pages ── */
.bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(0,212,255,0.07) 0%, transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(172,202,50,0.05) 0%, transparent 50%);
}

/* ── Top nav ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 56px; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: rgba(6,14,24,0.88);
  border-bottom: 1px solid rgba(0,212,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.topbar-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
/* The detailed CyberColt Solutions photographer logo doesn't read at
   topbar size (52px and below — too much fine detail). Hidden in the
   small-format chrome; it still shines at full size on the login page,
   the booth's idle screen, and the print-settings PDF header. The
   wordmark to its right carries the brand here.

   To bring the logo back, swap display:none for the original sizing
   block. */
.topbar-brand img.brand-mini { display: none; }

/* Wordmark gets slightly larger weight + spacing in the topbar to fill
   the void and stand on its own as the brand mark. */
.topbar-brand .wordmark {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.topbar-right {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
}
.topbar-right .user-email {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}

/* ── Card surface ── */
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.05);
}

/* ── Inputs ── */
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-group label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
}
.form-input {
  padding: 14px 16px;
  border-radius: var(--radius-input);
  border: 1.5px solid var(--hairline);
  background: var(--surface-2);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.form-input::placeholder { color: var(--ink-fade); }
.form-input:focus {
  border-color: var(--cyan-dim);
  box-shadow: 0 0 0 3px rgba(0,168,204,0.12);
  background: #fff;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-input);
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.99); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--cc-lime);
  color: var(--cc-graphite);
  box-shadow: 0 6px 24px rgba(172,202,50,0.30);
}
.btn-primary:hover:not(:disabled) {
  background: var(--cc-lime-hot);
  box-shadow: 0 8px 30px rgba(172,202,50,0.42);
}
.btn-primary.granted {
  background: linear-gradient(135deg, var(--good), #00a843);
  color: #fff;
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--ink);
  border: 1.5px solid var(--hairline);
}
.btn-secondary:hover:not(:disabled) {
  background: #eef1f5;
  border-color: rgba(0,168,204,0.3);
}

.btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.15);
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.05);
  color: #fff;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-block { width: 100%; }

/* ── Error / status messages ── */
.msg {
  border-radius: var(--radius-input);
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
  display: none;
}
.msg.show { display: block; }
.msg-error  { background: rgba(199,62,62,0.07); border: 1px solid rgba(199,62,62,0.2); border-left: 3px solid var(--danger); color: #a32f2f; }
.msg-good   { background: rgba(0,200,83,0.07);  border: 1px solid rgba(0,200,83,0.2);  border-left: 3px solid var(--good);   color: #007a36; }
.msg-warn   { background: rgba(229,165,62,0.08); border: 1px solid rgba(229,165,62,0.22); border-left: 3px solid var(--warn); color: #a06b15; }

/* ── Layout containers ── */
.page-wrap {
  position: relative; z-index: 1;
  min-height: calc(100vh - 56px);
  padding: 80px 24px 48px;
  display: flex; flex-direction: column; align-items: center;
}
.page-wrap.narrow { max-width: 520px; margin: 0 auto; }
.page-wrap.wide   { max-width: 1200px; margin: 0 auto; }

.page-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 24px;
  align-self: flex-start;
}
.page-title .accent { color: var(--cc-lime); }

/* ═══════════════════════════════════════════════
   CyberColt family wordmark
   Mirrors the pattern shared across cybercolt.com,
   cybercoltbingo.com, BINGO admin: lowercase
   "cybercolt" (bold) + pulsing lime dot + lowercase
   product name (regular). Defaults are cream-on-dark;
   add .on-light when sitting on a white surface.
   ═══════════════════════════════════════════════ */
.wordmark {
  font-family: var(--font-body);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--cc-cream);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark .handle  { font-weight: 900; color: var(--cc-cream); }
.wordmark .product { font-weight: 400; color: rgba(242,244,238,0.78); }
.wordmark .dot {
  display: inline-block;
  width: 0.36em; height: 0.36em;
  border-radius: 50%;
  background: var(--cc-lime);
  box-shadow: 0 0 8px rgba(172,202,50,0.35);
  align-self: center;
  flex-shrink: 0;
}
.wordmark.pulse .dot { animation: dotPulse 2.4s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(172,202,50,0.35); }
  50%      { box-shadow: 0 0 0 5px rgba(172,202,50,0); }
}

.wordmark.on-light .handle  { color: var(--cc-graphite); }
.wordmark.on-light .product { color: rgba(27,29,34,0.6); }

.wordmark-lg  { font-size: 2.1rem; }
.wordmark-md  { font-size: 1.35rem; }

/* ── Brand hero (login + future marketing surfaces) ── */
.brand-hero {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  margin-bottom: 26px;
}
.brand-logo {
  width: 128px; height: auto; display: block;
  filter: drop-shadow(0 0 30px rgba(172,202,50,0.28));
  animation: logoBreathe 5.6s ease-in-out infinite;
  user-select: none;
}
@keyframes logoBreathe {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(172,202,50,0.22)); }
  50%      { filter: drop-shadow(0 0 52px rgba(172,202,50,0.45)); }
}

/* ── Page watermark — typed "cybercolt · solutions" pill that matches
   the brand tag used on cybercolt-com's hero. */
.cc-watermark {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 50;
  display: inline-flex; align-items: center;
  gap: 0.42em;
  padding: 7px 16px;
  background: rgba(13,19,28,0.85);
  border: 1px solid rgba(242,244,238,0.18);
  border-radius: 980px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0.78;
  transition: opacity 0.25s ease;
}
.cc-watermark:hover { opacity: 1; }
.cc-watermark .ccwm-handle  { color: var(--cc-cream); font-weight: 900; }
.cc-watermark .ccwm-product { color: rgba(242,244,238,0.7); font-weight: 400; }
.cc-watermark .ccwm-dot {
  display: inline-block;
  width: 0.4em; height: 0.4em;
  border-radius: 50%;
  background: var(--cc-lime);
  box-shadow: 0 0 6px rgba(172,202,50,0.55);
  animation: ccwmDot 2.4s ease-in-out infinite;
}
@keyframes ccwmDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(172,202,50,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(172,202,50,0); }
}
@media (max-width: 600px) {
  .cc-watermark { right: 14px; bottom: 14px; padding: 6px 12px; font-size: 0.68rem; }
}

/* ── Misc utilities ── */
.center-col { display: flex; flex-direction: column; align-items: center; }
.spacer-sm  { height: 12px; }
.spacer-md  { height: 24px; }
.divider    { height: 1px; background: var(--hairline); margin: 24px 0; }

.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: rgba(255,255,255,0.55);
}
.empty-state .title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 8px;
}
.empty-state .sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 24px;
}

/* ── Mono code (for pairing codes) ── */
.code-pill {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.22);
  color: var(--cyan);
}

/* ═══════════════════════════════════════════════
   Event editor — form sections, toggles, copy pills
   ═══════════════════════════════════════════════ */
.form-section {
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
  margin-top: 22px;
}
.form-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.form-section-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.form-section-sub {
  font-size: 0.82rem;
  color: var(--ink-dim);
  margin-bottom: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) {
  .form-row, .form-row.three { grid-template-columns: 1fr; }
}

.form-select {
  padding: 14px 16px;
  border-radius: var(--radius-input);
  border: 1.5px solid var(--hairline);
  background: var(--surface-2);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%230d1b2a' d='M0 0l5 6 5-6z' opacity='0.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.form-select:focus {
  border-color: var(--cyan-dim);
  box-shadow: 0 0 0 3px rgba(0,168,204,0.12);
  background-color: #fff;
}

/* ── Toggle switch row ── */
.setting-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.setting-toggle + .setting-toggle { border-top: 1px dashed var(--hairline); }
.setting-toggle .title  { font-weight: 600; color: var(--ink); }
.setting-toggle .sub    { font-size: 0.78rem; color: var(--ink-dim); margin-top: 2px; }

.toggle-switch {
  position: relative;
  width: 46px; height: 26px;
  background: rgba(13,27,42,0.15);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.toggle-switch.on {
  background: var(--cc-lime);
  box-shadow: 0 0 0 3px rgba(172,202,50,0.18);
}
.toggle-switch.on::after { transform: translateX(20px); }

/* ── Copy pill (shareable codes / URLs) ── */
.copy-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-input);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  word-break: break-all;
}
.copy-pill:hover {
  border-color: var(--cyan-dim);
  background: #fff;
}
.copy-pill.code {
  letter-spacing: 0.22em;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cyan-dim);
}
.copy-pill .copy-icon {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-fade);
  flex-shrink: 0;
}
.copy-pill.copied { border-color: var(--good); background: rgba(0,200,83,0.05); }
.copy-pill.copied .copy-icon { color: var(--good); }

/* ── Template picker chips ── */
.template-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.template-chip {
  border: 2px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-2);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.template-chip:hover { border-color: rgba(172,202,50,0.4); }
.template-chip.selected {
  border-color: var(--cc-lime);
  background: rgba(172,202,50,0.08);
}
.template-chip .name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.template-chip .meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Color swatch input ── */
.color-input {
  display: flex; align-items: center; gap: 12px;
}
.color-input input[type="color"] {
  width: 48px; height: 48px;
  border: none; padding: 0;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
}
.color-input .form-input { flex: 1; }

/* ═══════════════════════════════════════════════
   Event cards — dark cybercolt-family aesthetic
   Graphite surface, lime accents, mono pairing code,
   pulsing status dot, hover lifts with lime glow.
   ═══════════════════════════════════════════════ */
.events-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.event-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  animation: cardIn 0.45s cubic-bezier(0.16,1,0.3,1) both;
  -webkit-tap-highlight-color: transparent;
}
.event-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(172,202,50,0.10) 0%, transparent 55%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.event-card:hover {
  transform: translateY(-2px);
  border-color: rgba(172,202,50,0.4);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45), 0 0 0 1px rgba(172,202,50,0.15);
}
.event-card:hover::before { opacity: 1; }
.event-card:active { transform: translateY(-1px); }

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

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

.event-date-badge {
  font-family: var(--font-mono);
  display: flex; flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.event-date-badge .month {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--cc-lime);
}
.event-date-badge .day {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0;
  color: var(--cc-cream);
}
.event-date-badge .year {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: rgba(242,244,238,0.38);
}

.event-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.event-status .dot { width: 6px; height: 6px; border-radius: 50%; }
.event-status.upcoming {
  color: var(--cc-lime);
  background: rgba(172,202,50,0.08);
  border: 1px solid rgba(172,202,50,0.28);
}
.event-status.upcoming .dot {
  background: var(--cc-lime);
  box-shadow: 0 0 6px rgba(172,202,50,0.7);
  animation: dotPulse 2.4s ease-in-out infinite;
}
.event-status.today {
  color: var(--cc-gold);
  background: rgba(229,195,83,0.1);
  border: 1px solid rgba(229,195,83,0.32);
}
.event-status.today .dot {
  background: var(--cc-gold);
  box-shadow: 0 0 6px rgba(229,195,83,0.7);
  animation: dotPulse 1.2s ease-in-out infinite;
}
.event-status.past {
  color: rgba(242,244,238,0.42);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.event-status.past .dot { background: rgba(242,244,238,0.42); }

.event-card .event-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--cc-cream);
  line-height: 1.05;
}
.event-card .event-venue {
  font-size: 0.84rem;
  color: rgba(242,244,238,0.55);
}

.event-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.event-pills .pill {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-lime { color: var(--cc-lime); background: rgba(172,202,50,0.1); border-color: rgba(172,202,50,0.28); }
.pill-cyan { color: var(--cyan);    background: rgba(0,212,255,0.1);  border-color: rgba(0,212,255,0.28); }
.pill-gold { color: var(--cc-gold); background: rgba(229,195,83,0.1); border-color: rgba(229,195,83,0.28); }
.pill-off  { color: rgba(242,244,238,0.42); background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }

.event-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.event-card .event-code {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--cc-lime);
}
.event-card .event-code .cc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cc-lime);
  box-shadow: 0 0 6px rgba(172,202,50,0.65);
  animation: dotPulse 2.4s ease-in-out infinite;
}
.event-card .event-edit {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,244,238,0.4);
  transition: color 0.15s, transform 0.15s;
}
.event-card:hover .event-edit { color: var(--cc-cream); transform: translateX(2px); }

/* Event card wrapper — holds the navigation anchor AND the settings cog
   as siblings so neither becomes invalid interactive-in-anchor content. */
.event-card-wrap { position: relative; }

.event-card-wrap .gear-btn {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(242,244,238,0.55);
  text-decoration: none;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.event-card-wrap:hover .gear-btn { transform: rotate(15deg); }
.event-card-wrap .gear-btn:hover {
  background: rgba(0,212,255,0.15);
  color: var(--cyan);
  border-color: rgba(0,212,255,0.4);
}
.event-card-wrap .gear-btn svg { width: 16px; height: 16px; }

/* Duplicate button — sits to the left of the gear, same shape. */
.event-card-wrap .duplicate-btn {
  position: absolute;
  top: 14px; right: 58px;
  width: 34px; height: 34px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(242,244,238,0.55);
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.event-card-wrap .duplicate-btn:hover {
  background: rgba(172,202,50,0.15);
  color: var(--cc-lime);
  border-color: rgba(172,202,50,0.45);
  transform: translateY(-1px);
}
.event-card-wrap .duplicate-btn:disabled { opacity: 0.5; cursor: wait; }
.event-card-wrap .duplicate-btn svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════
   Dashboard stats bar + search + section headers
   ═══════════════════════════════════════════════ */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  width: 100%;
  margin-bottom: 22px;
}
.stat-tile {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-tile .label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,244,238,0.5);
}
.stat-tile .value {
  font-family: var(--font-display);
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  color: var(--cc-cream);
  line-height: 1.05;
}
.stat-tile.lime .value { color: var(--cc-lime); }
.stat-tile.cyan .value { color: var(--cyan); }
.stat-tile.gold .value { color: var(--cc-gold); }
.stat-tile .sub {
  font-size: 0.74rem;
  color: rgba(242,244,238,0.45);
}

.search-row {
  width: 100%;
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 18px;
}
.search-input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(0,0,0,0.25);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: var(--cc-cream);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}
.search-input:focus { border-color: var(--cc-lime); }
.search-input::placeholder { color: rgba(242,244,238,0.35); }

.section-header {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,244,238,0.65);
  margin: 24px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.section-header:first-of-type { margin-top: 4px; }
.section-header .count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(242,244,238,0.4);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.section-header.lime { color: var(--cc-lime); }
.section-header.gold { color: var(--cc-gold); }

/* ═══════════════════════════════════════════════
   Modal — shared overlay for strip detail, confirms
   ═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(6,14,24,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.18s;
}
.modal-overlay.show { display: flex; opacity: 1; }
.modal-card {
  background: var(--cc-graphite-2, #232631);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  max-width: 880px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.55);
  animation: modalIn 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  color: var(--cc-cream);
}
.modal-close {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: rgba(242,244,238,0.6);
  font-size: 1.2rem;
  cursor: pointer;
}
.modal-close:hover { background: rgba(199,62,62,0.2); color: var(--cc-cream); border-color: rgba(199,62,62,0.4); }

/* ── Save bar at bottom of editor ── */
.save-bar {
  position: sticky;
  bottom: 0;
  margin: 32px -32px -32px;
  padding: 18px 32px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--hairline);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  display: flex; gap: 12px; align-items: center;
  z-index: 10;
}
.save-bar .spacer { flex: 1; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .page-wrap { padding: 76px 16px 32px; }
  .card { padding: 24px; }
  .topbar { padding: 0 16px; height: 52px; }
  .topbar-brand { font-size: 1.2rem; }
  .topbar-brand .sub { display: none; }
  .topbar-right .user-email { display: none; }
  .page-title { font-size: 1.9rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Dashboard rebuild — view switcher, list grid, week view, month
   calendar. Designed around three modes the operator can flip between
   with the top-right toggle:
     • List   — sectioned by status (default; today's events leap out)
     • Week   — 7 columns Sun..Sat with stacked event chips, navigate
                week by week
     • Month  — classic calendar grid, each day cell shows up to 3
                events with overflow indicator
   ═══════════════════════════════════════════════════════════════════ */

/* ── Toolbar row above the events area ─────────────────────────── */
.dash-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 18px; margin-bottom: 18px;
}
.dash-toolbar .dash-search {
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 480px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-pill);
  color: var(--cc-cream);
  font-family: var(--font-body);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.dash-toolbar .dash-search::placeholder { color: rgba(242,244,238,0.4); }
.dash-toolbar .dash-search:focus {
  border-color: var(--cyan);
  background: rgba(0,212,255,0.06);
}

/* View switcher pill */
.view-switch {
  display: inline-flex;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-pill);
  gap: 2px;
}
.view-switch button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242,244,238,0.55);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.view-switch button:hover { color: var(--cc-cream); }
.view-switch button.active {
  background: var(--cc-lime);
  color: var(--cc-graphite);
  box-shadow: 0 4px 14px rgba(172,202,50,0.32);
}

/* Date navigator for week / month views */
.date-nav {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-pill);
  padding: 4px;
}
.date-nav button {
  appearance: none;
  background: transparent;
  border: 0;
  width: 32px; height: 32px;
  border-radius: 999px;
  color: rgba(242,244,238,0.55);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
}
.date-nav button:hover { background: rgba(255,255,255,0.06); color: var(--cc-cream); }
.date-nav .nav-label {
  padding: 0 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--cc-cream);
  letter-spacing: 0.02em;
  min-width: 130px;
  text-align: center;
}
.date-nav .today-btn {
  padding: 0 14px;
  width: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-lime);
  font-weight: 700;
}
.date-nav .today-btn:hover { background: rgba(172,202,50,0.12); }

/* ── Unified pill styling ──────────────────────────────────────── */
/* Override the old pill spread that was wrapping awkwardly. Pills now
   use a tight icon-dot prefix + label, all the same height + weight. */
.event-pills {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.event-pills .pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px 4px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.event-pills .pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

/* ── Week view ──────────────────────────────────────────────────── */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.week-day {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 10px;
  min-height: 240px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.week-day.is-today {
  background: rgba(229,195,83,0.06);
  border-color: rgba(229,195,83,0.4);
  box-shadow: inset 0 0 0 1px rgba(229,195,83,0.2);
}
.week-day .wd-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.week-day .wd-dow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,244,238,0.45);
}
.week-day.is-today .wd-dow { color: var(--cc-gold); }
.week-day .wd-day {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--cc-cream);
  letter-spacing: -0.02em;
}
.week-day.is-today .wd-day { color: var(--cc-gold); }
.week-day .wd-empty {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: rgba(242,244,238,0.25);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.week-card {
  display: block;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--cc-lime);
  border-radius: 8px;
  padding: 8px 10px;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.week-card:hover {
  background: rgba(172,202,50,0.06);
  transform: translateY(-1px);
}
.week-card .wc-name {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--cc-cream);
  line-height: 1.2;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.week-card .wc-meta {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,244,238,0.55);
}
.week-card .wc-code {
  color: var(--cc-lime);
  font-weight: 700;
}

/* ── Month view ─────────────────────────────────────────────────── */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.month-dow-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.month-dow-row > div {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242,244,238,0.4);
  padding: 6px 0;
}

.month-cell {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px;
  min-height: 110px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.month-cell.out-of-month {
  background: rgba(255,255,255,0.012);
  opacity: 0.5;
}
.month-cell.is-today {
  background: rgba(229,195,83,0.06);
  border-color: rgba(229,195,83,0.4);
}
.month-cell .mc-day {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--cc-cream);
  margin-bottom: 4px;
}
.month-cell.is-today .mc-day { color: var(--cc-gold); }
.month-cell.out-of-month .mc-day { color: rgba(242,244,238,0.3); }

.month-chip {
  display: block;
  text-decoration: none;
  background: rgba(172,202,50,0.12);
  border: 1px solid rgba(172,202,50,0.32);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cc-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s;
}
.month-chip:hover { background: rgba(172,202,50,0.22); }
.month-chip.past {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(242,244,238,0.65);
}
.month-chip.today {
  background: rgba(229,195,83,0.18);
  border-color: rgba(229,195,83,0.5);
  color: var(--cc-cream);
}
.month-overflow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(242,244,238,0.5);
  margin-top: 2px;
}

/* Responsive collapse: week view → list on narrow screens */
@media (max-width: 900px) {
  .week-grid { grid-template-columns: repeat(1, 1fr); }
  .week-day { min-height: auto; }
  .month-cell { min-height: 80px; }
  .month-chip { font-size: 0.66rem; padding: 2px 5px; }
  .date-nav .nav-label { min-width: 100px; padding: 0 8px; font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Professional polish pass — restrained accents, tighter typography,
   more whitespace, less glow. Lives at the end so it overrides the
   older bolder treatment without forcing me to delete the previous
   rules (which are shared with other admin pages).
   ═══════════════════════════════════════════════════════════════════ */

/* Hero row sits flush; page title gets a refined size + tracking */
.page-title {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.page-title .accent { color: var(--cc-lime); font-weight: 800; }

/* Stats tiles — flatter, more legible */
.stats-bar {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.stat-tile {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px 18px;
  gap: 6px;
}
.stat-tile .label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(242,244,238,0.45);
  font-weight: 600;
}
.stat-tile .value {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-tile .sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(242,244,238,0.35);
  text-transform: uppercase;
}

/* Section headers — quieter, more refined */
.section-header {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242,244,238,0.55);
  margin: 28px 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent);
}
.section-header .count {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 2px 8px;
  font-size: 0.66rem;
  color: rgba(242,244,238,0.45);
  letter-spacing: 0.12em;
}
.section-header.lime { color: var(--cc-lime); }
.section-header.gold { color: var(--cc-gold); }
.section-header.lime .count { border-color: rgba(172,202,50,0.3); color: var(--cc-lime); }
.section-header.gold .count { border-color: rgba(229,195,83,0.3); color: var(--cc-gold); }

/* Event card refinement: flatter surface, cleaner border, slimmer hover */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.event-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 20px 22px;
  gap: 14px;
}
.event-card::before { display: none; }   /* drop the radial wash */
.event-card:hover {
  transform: translateY(-1px);
  border-color: rgba(172,202,50,0.32);
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}

/* Date badge — gets bigger and more architectural since it's the only
   thing in the top-left of the head row now. */
.event-date-badge { gap: 0; }
.event-date-badge .month {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--cc-lime);
}
.event-date-badge .day {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 2px;
  color: var(--cc-cream);
}
.event-date-badge .year {
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: rgba(242,244,238,0.35);
  margin-top: 4px;
}

/* Event name — refined hierarchy */
.event-card .event-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--cc-cream);
}
.event-card .event-venue {
  font-size: 0.82rem;
  color: rgba(242,244,238,0.5);
  margin-top: -8px;
}

/* Pills — uniform compact size, subtle dot prefix */
.event-pills { gap: 6px; }
.event-pills .pill {
  font-size: 0.6rem;
  padding: 3px 9px 3px 8px;
  letter-spacing: 0.14em;
}
.event-pills .pill::before { width: 4px; height: 4px; }

/* Card footer — less heavy divider, tighter spacing */
.event-card-foot {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.event-card .event-code {
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  font-weight: 700;
}
.event-card .event-code .cc-dot {
  width: 5px; height: 5px;
  box-shadow: 0 0 4px rgba(172,202,50,0.5);
}
.event-card .event-edit {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: rgba(242,244,238,0.4);
}

/* Action buttons (duplicate + gear) — slimmer, subtler */
.event-card-wrap .gear-btn,
.event-card-wrap .duplicate-btn {
  width: 30px; height: 30px;
  top: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(242,244,238,0.45);
}
.event-card-wrap .gear-btn { right: 12px; }
.event-card-wrap .duplicate-btn { right: 50px; }
.event-card-wrap:hover .gear-btn { transform: none; }
.event-card-wrap .gear-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: var(--cc-cream);
}
.event-card-wrap .duplicate-btn:hover {
  background: rgba(172,202,50,0.1);
  border-color: rgba(172,202,50,0.3);
  color: var(--cc-lime);
  transform: none;
}
.event-card-wrap .gear-btn svg,
.event-card-wrap .duplicate-btn svg { width: 14px; height: 14px; }

/* Dashboard toolbar — slightly more breathing room */
.dash-toolbar { margin-top: 22px; margin-bottom: 22px; }

/* Topbar — tighter weight on user email */
.topbar-right .user-email {
  font-size: 0.82rem;
  color: rgba(242,244,238,0.55);
  font-weight: 500;
}

/* Buttons — clean primary, no shadow loudness */
.btn-primary {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.btn-secondary {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════
   Per-event SMS message template — light-themed card matching the
   event editor's cream/white surface. Sits under the "Text strips
   to guests" toggle.
   ═══════════════════════════════════════════════════════════════════ */
.sms-template-card {
  margin: 12px 0 22px;
  padding: 18px 20px;
  background: rgba(0,168,204,0.05);
  border: 1px solid rgba(0,168,204,0.35);
  border-radius: 14px;
}
.sms-template-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.sms-template-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan-dim);
}
.sms-template-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.sms-template-count.over { color: #c4710a; }
.sms-template-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 88px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.sms-template-textarea::placeholder { color: var(--ink-fade); }
.sms-template-textarea:focus {
  border-color: var(--cyan-dim);
  box-shadow: 0 0 0 3px rgba(0,168,204,0.12);
}
.sms-template-helper {
  margin-top: 14px;
  display: flex; flex-direction: column;
  gap: 8px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
}
.sms-helper-line {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.sms-helper-line > :first-child {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.sms-helper-default {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px dashed rgba(13,27,42,0.14);
  color: var(--ink);
  font-size: 0.84rem;
}
.sms-helper-default strong {
  color: var(--ink-dim);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-right: 8px;
}
.sms-helper-tip {
  color: var(--ink-dim);
  font-size: 0.8rem;
  font-style: italic;
}
.sms-token {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: #5a7a18;
  background: rgba(172,202,50,0.18);
  border: 1px solid rgba(172,202,50,0.55);
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0;
}
.sms-token-desc {
  font-size: 0.8rem;
  color: var(--ink-dim);
  font-style: italic;
}
.sms-token-desc + .sms-token { margin-left: 6px; }

/* Live preview box — shows the actual rendered SMS body with substituted
   placeholders, plus segment count. Lives between the textarea and the
   helper lines. */
.sms-preview-box {
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 14px;
}
.sms-preview-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(13,27,42,0.10);
}
.sms-preview-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.sms-preview-count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.sms-preview-count strong {
  color: var(--ink);
  font-weight: 700;
}
.sms-cost-hint { color: var(--ink-dim); }
.sms-cost-hint.warn { color: #c4710a; font-weight: 600; }
.sms-preview-body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 22px;
}