.hidden { display: none !important; }

.auth-body { min-height: 100vh; background: var(--white); }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: 1.12fr .88fr; }
.auth-visual { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px,4vw,65px); color: white; background: var(--ink); }
.auth-visual video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-visual-overlay { position: absolute; inset: 0; background: linear-gradient(100deg,rgba(9,9,11,.9),rgba(9,9,11,.38)), linear-gradient(0deg,rgba(9,9,11,.9),transparent 60%), linear-gradient(135deg,rgba(239,31,99,.35),transparent 45%,rgba(22,116,209,.28)); }
.auth-brand, .auth-promise, .auth-date { position: relative; z-index: 2; }
.auth-promise { max-width: 720px; margin: auto 0; }
.auth-promise > span { color: rgba(255,255,255,.57); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.auth-promise h1, .auth-form-wrap h2, .dashboard-main h1, .dashboard-main h2 { margin: 12px 0 0; font-family: var(--display); font-weight: 800; letter-spacing: -.025em; line-height: .85; text-transform: uppercase; }
.auth-promise h1 { font-size: clamp(76px,8.5vw,132px); }
.auth-promise h1 em, .dashboard-main h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1.5px white; }
.auth-promise p { max-width: 570px; color: rgba(255,255,255,.6); font-size: 16px; }
.auth-date { margin: 0; color: rgba(255,255,255,.46); font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .13em; }
.auth-panel { position: relative; display: grid; place-items: center; padding: 80px clamp(28px,7vw,120px); }
.auth-back { position: absolute; top: 35px; left: 40px; color: #77747a; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.auth-form-wrap { width: min(100%, 480px); }
.auth-form-wrap h2 { font-size: clamp(58px,6vw,82px); }
.auth-form-wrap > p:not(.eyebrow):not(.auth-help) { color: #757278; }
.auth-form-wrap form { margin-top: 40px; }
.auth-form-wrap label, .password-form label, .admin-form label { display: block; margin-bottom: 22px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auth-form-wrap input, .password-form input, .admin-form input, .admin-form textarea, .admin-form select, .search-field input { width: 100%; margin-top: 7px; padding: 13px 2px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #cecac4; outline: 0; font-size: 14px; letter-spacing: normal; text-transform: none; transition: border .2s; }
.auth-form-wrap input:focus, .password-form input:focus, .admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus { border-color: var(--blue); }
.auth-form-wrap .button { width: 100%; margin-top: 12px; }
.auth-divider { position: relative; margin: 35px 0 18px; text-align: center; }
.auth-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #e0dcd6; }
.auth-divider span { position: relative; padding: 0 12px; color: #939095; background: var(--white); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.auth-outline { width: 100%; border-color: #bbb7b1; }
.auth-outline:hover { color: white; background: var(--ink); border-color: var(--ink); }
.auth-help { margin-top: 30px; color: #8b888d; font-size: 10px; text-align: center; }
.auth-help a { color: var(--ink); border-bottom: 1px solid; font-weight: 700; }

.dashboard-body { min-height: 100vh; color: var(--ink); background: #ebe8e2; }
.dashboard-sidebar { position: fixed; z-index: 100; inset: 0 auto 0 0; width: 268px; display: flex; flex-direction: column; padding: 32px 26px 25px; color: white; background: #09090b; }
.dashboard-brand { padding: 2px 6px 32px; font-size: 20px; }
.dashboard-sidebar nav { display: flex; flex-direction: column; margin-top: 42px; }
.dashboard-sidebar nav a { display: flex; align-items: center; gap: 16px; padding: 15px 7px; color: rgba(255,255,255,.42); border-bottom: 1px solid rgba(255,255,255,.09); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; transition: color .2s; }
.dashboard-sidebar nav a:hover, .dashboard-sidebar nav a.active { color: white; }
.dashboard-sidebar nav a span { color: var(--pink); font-family: var(--display); font-size: 13px; }
.admin-sidebar nav a span { color: var(--blue-electric); }
.sidebar-cause { position: relative; overflow: hidden; margin-top: auto; padding: 22px; background: linear-gradient(140deg,#211018,#0a1824); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; font-family: var(--display); font-size: 21px; line-height: 1; text-transform: uppercase; }
.sidebar-cause span, .sidebar-cause strong { position: relative; z-index: 2; display: block; }
.sidebar-cause strong { color: var(--pink-hot); }
.sidebar-cause i { position: absolute; right: -22px; top: -18px; width: 82px; height: 82px; border: 15px solid var(--blue); border-left-color: var(--pink); border-radius: 50%; opacity: .48; }
.logout-button { display: flex; justify-content: space-between; width: 100%; margin-top: 25px; padding: 13px 7px; color: rgba(255,255,255,.44); background: transparent; border: 0; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.logout-button:hover { color: white; }
.admin-badge { margin: 3px 7px 0; padding: 8px 12px; color: #8ecfff; background: rgba(34,168,255,.1); border: 1px solid rgba(34,168,255,.2); border-radius: 99px; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-align: center; text-transform: uppercase; }
.admin-sidebar nav { margin-top: 25px; }

.dashboard-main { min-height: 100vh; margin-left: 268px; }
.dashboard-topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(25px,4vw,62px); background: rgba(255,255,255,.72); border-bottom: 1px solid rgba(9,9,11,.09); backdrop-filter: blur(15px); }
.dashboard-topbar > div { display: flex; align-items: center; gap: 18px; }
.dashboard-topbar > div span { color: #929095; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-topbar > div strong { font-family: var(--display); font-size: 17px; text-transform: uppercase; }
.public-link { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.public-link span { color: var(--pink); }
.dashboard-menu { display: none; }
.dashboard-loading { min-height: calc(100vh - 78px); display: grid; place-content: center; justify-items: center; gap: 20px; }
.dashboard-loading span { width: 48px; height: 48px; border: 4px solid #d4d0ca; border-top-color: var(--pink); border-right-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
.dashboard-loading p { color: #767378; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-content { padding: clamp(35px,5vw,75px) clamp(25px,5vw,75px) 100px; }
.welcome-block, .admin-welcome { display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; }
.welcome-block .eyebrow span { color: var(--pink); }
.dashboard-main h1 { font-size: clamp(65px,7vw,105px); }
.dashboard-main h1 em { -webkit-text-stroke-color: var(--ink); }
.status-card { min-width: 210px; padding: 22px; color: white; background: linear-gradient(135deg,var(--pink),#a90941); border-radius: 15px; box-shadow: 0 20px 50px rgba(239,31,99,.2); }
.status-card span, .status-card small { display: block; color: rgba(255,255,255,.66); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.status-card strong { display: block; margin: 4px 0 8px; font-family: var(--display); font-size: 32px; line-height: 1; text-transform: uppercase; }
.participant-alert, .live-control { display: flex; align-items: center; gap: 18px; margin-top: 38px; padding: 17px 22px; color: white; background: var(--ink); border-radius: 12px; }
.participant-alert .live-dot, .live-control .live-dot { flex: 0 0 auto; background: var(--pink); }
.participant-alert strong, .live-control strong { display: block; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.participant-alert p { margin: 2px 0 0; color: rgba(255,255,255,.62); font-size: 11px; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 22px; background: white; border-radius: 16px; box-shadow: 0 16px 50px rgba(9,9,11,.05); }
.dashboard-metrics article { min-height: 180px; padding: 28px; border-right: 1px solid #e5e1db; }
.dashboard-metrics article:last-child { border: 0; }
.dashboard-metrics article > span { display: block; color: #858287; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.dashboard-metrics article > strong { display: inline-block; margin-top: 24px; font-family: var(--display); font-size: 64px; line-height: .8; }
.dashboard-metrics article > small { margin-left: 7px; color: #858287; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.dashboard-metrics .word-metric { display: block; font-size: 34px; line-height: 1; }
.dashboard-metrics article button { display: block; margin-top: 18px; padding: 0 0 3px; color: var(--blue); background: transparent; border: 0; border-bottom: 1px solid; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dashboard-metrics article button:disabled { color: #aaa6aa; cursor: default; }
.dashboard-section { margin-top: 70px; scroll-margin-top: 30px; }
.dashboard-section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 25px; }
.dashboard-section-head > div { display: flex; align-items: baseline; gap: 16px; }
.dashboard-section-head > div span { color: var(--pink); font-family: var(--display); font-size: 15px; font-weight: 800; }
.admin-body .dashboard-section-head > div span { color: var(--blue); }
.dashboard-main h2 { font-size: clamp(44px,5vw,68px); line-height: 1; }
.dashboard-section-head > p { max-width: 490px; margin: 0; color: #767378; font-size: 11px; }
.my-stage-list { display: grid; gap: 9px; }
.my-stage { display: grid; grid-template-columns: 65px 130px minmax(200px,1fr) 90px 1fr; align-items: center; gap: 20px; min-height: 90px; padding: 16px 22px; background: white; border-left: 4px solid var(--pink); border-radius: 9px; }
.my-stage.blue { border-color: var(--blue); }
.my-stage > span:first-child { width: 40px; height: 40px; display: grid; place-items: center; color: white; background: var(--pink); border-radius: 50%; font-family: var(--display); font-weight: 800; }
.my-stage.blue > span:first-child { background: var(--blue); }
.my-stage time, .my-stage .mode { color: #7f7c81; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.my-stage .route strong { display: block; font-family: var(--display); font-size: 22px; line-height: 1; text-transform: uppercase; }
.my-stage .route small { color: #8a878c; }
.my-stage .distance { font-family: var(--display); font-size: 25px; font-weight: 800; text-align: right; }
.my-stage .meeting { padding-left: 18px; border-left: 1px solid #e3dfd9; font-size: 10px; }
.my-stage .meeting strong { display: block; }
.my-stage .meeting span { color: #89868b; }
.participant-news { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.participant-news article { padding: 25px; background: white; border-radius: 12px; }
.participant-news article:first-child { color: white; background: linear-gradient(145deg,#1c0b12,#0a1824); }
.participant-news .news-label { color: var(--pink); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.participant-news time { float: right; color: #9a979b; font-size: 9px; }
.participant-news h3 { margin: 25px 0 8px; font-family: var(--display); font-size: 27px; line-height: 1; text-transform: uppercase; }
.participant-news p { margin: 0; color: #777479; font-size: 11px; }
.participant-news article:first-child p { color: rgba(255,255,255,.58); }
.profile-grid, .admin-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-details, .password-form, .admin-form, .admin-feed, .sponsor-admin-list { padding: 30px; background: white; border-radius: 14px; }
.profile-detail { display: grid; grid-template-columns: 120px 1fr; gap: 15px; padding: 13px 0; border-bottom: 1px solid #ece8e2; font-size: 12px; }
.profile-detail span { color: #8d898e; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.password-form h3, .admin-form h3 { margin: 0 0 25px; font-family: var(--display); font-size: 28px; text-transform: uppercase; }
.password-form { max-width: 640px; }

.admin-welcome .live-control { max-width: 360px; margin: 0; }
.live-control small { display: block; margin-top: 3px; color: rgba(255,255,255,.5); }
.admin-metrics { grid-template-columns: repeat(4,1fr); }
.admin-metrics article { min-height: 160px; }
.admin-metrics article > strong { font-size: 54px; }
.table-wrap { overflow: auto; background: white; border-radius: 14px; box-shadow: 0 12px 45px rgba(9,9,11,.04); }
table { width: 100%; min-width: 800px; border-collapse: collapse; }
th { padding: 15px 18px; color: #8d8a8f; background: #f8f6f2; font-size: 8px; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
td { padding: 17px 18px; border-top: 1px solid #ede9e3; font-size: 11px; }
td strong { display: block; }
td small { color: #8a878c; }
.payment-select { padding: 7px 10px; color: var(--ink); background: white; border: 1px solid #d9d5cf; border-radius: 7px; font-size: 10px; }
.search-field { min-width: 280px; margin: 0; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.search-field input { padding: 8px 2px; }
.admin-form textarea { resize: vertical; line-height: 1.5; }
.admin-form select { padding-right: 28px; }
.admin-feed { max-height: 525px; overflow: auto; }
.admin-feed article { padding: 18px 0; border-bottom: 1px solid #e6e2dc; }
.admin-feed article:first-child { padding-top: 0; }
.admin-feed article span { color: var(--blue); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.admin-feed article h4 { margin: 7px 0 4px; font-family: var(--display); font-size: 22px; line-height: 1; text-transform: uppercase; }
.admin-feed article p { margin: 0; color: #77747a; font-size: 10px; }
.admin-feed article time { display: block; margin-top: 8px; color: #9d999e; font-size: 8px; }
.admin-stage-list { display: grid; gap: 10px; }
.admin-stage { display: grid; grid-template-columns: 53px 1fr 1.45fr; gap: 20px; align-items: center; padding: 17px 20px; background: white; border-radius: 10px; }
.admin-stage > span { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: var(--pink); border-radius: 50%; font-family: var(--display); font-weight: 800; }
.admin-stage.blue > span { background: var(--blue); }
.admin-stage-route strong { display: block; font-family: var(--display); font-size: 20px; line-height: 1; text-transform: uppercase; }
.admin-stage-route small { color: #89868b; font-size: 9px; }
.stage-edit-form { display: grid; grid-template-columns: .75fr 1.2fr 1.5fr auto; gap: 8px; align-items: end; }
.stage-edit-form label { margin: 0; color: #8b888d; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stage-edit-form input { width: 100%; margin-top: 3px; padding: 8px; border: 1px solid #dedad4; border-radius: 6px; font-size: 9px; }
.stage-edit-form button { height: 34px; padding: 0 13px; color: white; background: var(--ink); border: 0; border-radius: 6px; cursor: pointer; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.sponsor-admin-list { display: flex; flex-direction: column; gap: 8px; }
.sponsor-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid #e5e1db; }
.sponsor-admin-row strong { font-family: var(--display); font-size: 19px; text-transform: uppercase; }
.sponsor-admin-row a { color: #77747a; font-size: 9px; }
.sponsor-admin-row button { padding: 5px 8px; color: #a20b3b; background: #fff0f4; border: 0; border-radius: 5px; cursor: pointer; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.security-section { padding: 30px; color: white; background: #1a1014; border: 1px solid rgba(239,31,99,.25); border-radius: 14px; }
.security-section .dashboard-section-head p { color: rgba(255,255,255,.6); }
.security-section .password-form { color: var(--ink); }
.toast { position: fixed; z-index: 1000; right: 25px; bottom: 25px; max-width: 360px; padding: 15px 20px; color: white; background: var(--ink); border-left: 4px solid var(--blue); border-radius: 8px; box-shadow: 0 18px 50px rgba(9,9,11,.25); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(15px); transition: .25s; }
.toast.visible { opacity: 1; transform: none; }

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

@media (max-width: 1100px) {
  .dashboard-sidebar { width: 230px; }
  .dashboard-main { margin-left: 230px; }
  .my-stage { grid-template-columns: 50px 100px 1fr 70px; }
  .my-stage .meeting { grid-column: 3 / -1; padding: 8px 0 0; border: 0; }
  .admin-stage { grid-template-columns: 45px 1fr; }
  .stage-edit-form { grid-column: 1 / -1; }
  .admin-metrics { grid-template-columns: repeat(2,1fr); }
  .admin-metrics article:nth-child(2) { border-right: 0; }
}

@media (max-width: 820px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-visual { min-height: 45vh; padding: 25px; }
  .auth-promise { margin-top: 80px; }
  .auth-promise h1 { font-size: clamp(62px,17vw,94px); }
  .auth-promise p { display: none; }
  .auth-date { margin-top: 45px; }
  .auth-panel { min-height: 55vh; padding: 80px 25px 55px; }
  .auth-back { top: 25px; left: 25px; }
  .dashboard-sidebar { width: 275px; transform: translateX(-100%); transition: transform .25s; box-shadow: 20px 0 60px rgba(9,9,11,.2); }
  .dashboard-body.sidebar-open .dashboard-sidebar { transform: none; }
  .dashboard-main { margin-left: 0; }
  .dashboard-menu { display: block; padding: 8px 11px; color: white; background: var(--ink); border: 0; border-radius: 6px; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .dashboard-topbar { height: 64px; padding: 0 18px; }
  .dashboard-topbar > div span { display: none; }
  .public-link { font-size: 0; }
  .public-link span { font-size: 14px; }
  .dashboard-content { padding: 35px 18px 80px; }
  .welcome-block, .admin-welcome { align-items: stretch; flex-direction: column; }
  .dashboard-main h1 { font-size: clamp(62px,18vw,90px); }
  .status-card { min-width: 0; }
  .dashboard-metrics { grid-template-columns: 1fr; }
  .dashboard-metrics article, .admin-metrics article { min-height: 145px; border-right: 0; border-bottom: 1px solid #e5e1db; }
  .dashboard-section { margin-top: 55px; }
  .dashboard-section-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .my-stage { grid-template-columns: 42px 1fr 60px; gap: 12px; }
  .my-stage time { grid-column: 2; }
  .my-stage .route { grid-column: 2 / -1; }
  .my-stage .distance { grid-column: 3; grid-row: 1; }
  .my-stage .mode { grid-column: 2; }
  .my-stage .meeting { grid-column: 2 / -1; }
  .participant-news, .profile-grid, .admin-two-cols { grid-template-columns: 1fr; }
  .search-field { min-width: 100%; }
  .admin-stage { grid-template-columns: 40px 1fr; padding: 15px; }
  .stage-edit-form { grid-template-columns: 1fr 1fr; }
  .stage-edit-form label:nth-child(3) { grid-column: 1 / -1; }
  .stage-edit-form button { grid-column: 1 / -1; }
}