:root {
  --bg: #06110f;
  --bg-soft: #0a1915;
  --panel: #0d201a;
  --panel-strong: #11281f;
  --panel-glass: rgba(11, 29, 23, .9);
  --line: #274b3d;
  --line-soft: rgba(111, 155, 136, .2);
  --text: #f5f8f6;
  --muted: #9bada5;
  --muted-strong: #c2cec8;
  --green: #49dda0;
  --green-strong: #25bc79;
  --green-dark: #0f6c49;
  --gold: #d8ab57;
  --danger: #ff746d;
  --warning: #f1c567;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .28);
  --sidebar: 250px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Alexandria", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("../images/academy-night.png");
  background-size: cover;
  background-position: center;
  opacity: .025;
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
button { color: inherit; }
::selection { background: var(--green); color: #04100c; }

.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; top: -80px; inset-inline-start: 20px; z-index: 1000; background: var(--green); color: #04100c; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 500; white-space: nowrap; }
.brand b { color: var(--gold); }
.brand-mark { width: 42px; height: 42px; border: 1px solid rgba(73, 221, 160, .45); border-radius: 50%; display: grid; place-items: center; color: var(--green); background: #0b1d17; }
.brand-mark i { font-size: 23px; }

.button {
  border: 1px solid var(--green-strong);
  border-radius: 13px;
  padding: 11px 20px;
  min-height: 46px;
  background: var(--green-strong);
  color: #03110c;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); background: var(--green); border-color: var(--green); }
.button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(73, 221, 160, .34); outline-offset: 3px; }
.button-secondary { background: rgba(9, 29, 22, .7); color: var(--green); border-color: var(--line); }
.button-secondary:hover { background: var(--panel-strong); color: var(--text); }
.button-lg { min-height: 56px; padding-inline: 27px; border-radius: 16px; font-size: 16px; }
.button-small { min-height: 40px; padding: 7px 17px; }
.button-block { width: 100%; }
.button-disabled { background: #1c352c; border-color: #2a4c3f; color: #8ba097; cursor: default; }
.button-disabled:hover { transform: none; background: #1c352c; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: var(--panel); color: var(--text); cursor: pointer; }
.icon-button i { font-size: 21px; }

.eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.eyebrow i { color: var(--gold); }
.section { padding-block: 100px; }
.section-heading { margin-bottom: 28px; }
.section-heading.centered { text-align: center; max-width: 650px; margin-inline: auto; margin-bottom: 50px; }
.section-heading.inline { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.section-heading h2 { margin: 3px 0 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.3; }
.section-heading p { color: var(--muted); margin: 10px 0 0; }
.section-heading > a, .section-heading > span { color: var(--green); font-size: 13px; }

/* Landing */
.landing-page { overflow-x: hidden; }
.landing-page::before { opacity: .045; }
.landing-nav { height: 90px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5; }
.landing-nav nav { display: flex; align-items: center; gap: 28px; color: var(--muted-strong); font-size: 13px; }
.landing-nav nav a:hover { color: var(--green); }
.hero { min-height: 720px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 60px; padding-block: 45px 80px; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { margin: 14px 0 22px; font-size: clamp(48px, 6vw, 84px); line-height: 1.14; letter-spacing: -.05em; }
.hero-copy h1 span { color: var(--gold); }
.hero-copy > p { color: var(--muted-strong); font-size: 18px; max-width: 580px; margin: 0 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 20px; color: var(--muted); margin-top: 30px; font-size: 12px; }
.trust-row span { display: flex; gap: 7px; align-items: center; }
.trust-row i { color: var(--green); font-size: 17px; }
.hero-media { position: relative; height: 610px; border: 1px solid var(--line); border-radius: 34px; overflow: hidden; box-shadow: var(--shadow); background: var(--panel); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(4, 18, 14, .15); pointer-events: none; }
.hero-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.floating-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(213, 171, 87, .34); border-radius: 16px; background: rgba(7, 24, 19, .9); backdrop-filter: blur(16px); padding: 13px 16px; box-shadow: 0 14px 36px rgba(0,0,0,.28); }
.floating-card i { font-size: 25px; color: var(--green); }
.floating-card span { display: flex; flex-direction: column; }
.floating-card small { color: var(--muted); }
.floating-card-top { top: 50px; inset-inline-start: 34px; }
.floating-card-bottom { bottom: 42px; inset-inline-end: 35px; }
.floating-card-bottom strong { color: var(--gold); font-size: 28px; }
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: rgba(10, 29, 23, .72); border-radius: var(--radius-lg); padding: 30px; }
.feature-strip article { display: flex; gap: 18px; align-items: center; padding: 8px 30px; border-inline-start: 1px solid var(--line-soft); }
.feature-strip article:first-child { border-inline-start: 0; }
.feature-strip article > i { color: var(--green); font-size: 38px; }
.feature-strip h3 { margin: 0 0 2px; font-size: 16px; }
.feature-strip p { margin: 0; color: var(--muted); font-size: 12px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps-grid article { min-height: 270px; position: relative; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; background: var(--panel); }
.steps-grid article > span { position: absolute; top: 18px; inset-inline-end: 20px; color: rgba(216, 171, 87, .45); font-size: 32px; font-weight: 800; }
.steps-grid article > i { width: 56px; height: 56px; display: grid; place-items: center; color: var(--green); border: 1px solid var(--line); border-radius: 15px; font-size: 27px; margin-top: 40px; }
.steps-grid h3 { margin: 20px 0 8px; }
.steps-grid p { color: var(--muted); margin: 0; font-size: 13px; }
.cta-section { min-height: 260px; margin-block: 20px 80px; border: 1px solid rgba(73, 221, 160, .34); background: var(--panel-strong); border-radius: 32px; padding: 50px 60px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cta-section h2 { margin: 8px 0; font-size: clamp(28px, 4vw, 46px); }
.cta-section p { margin: 0; color: var(--muted); }
.landing-footer { min-height: 120px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }

/* Application chrome */
.topbar { height: 76px; border-bottom: 1px solid var(--line-soft); background: rgba(6, 17, 15, .92); backdrop-filter: blur(18px); position: fixed; inset: 0 0 auto 0; z-index: 30; }
.topbar-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.topbar .brand { display: none; }
.top-search { max-width: 570px; flex: 1; display: flex; align-items: center; gap: 9px; height: 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding-inline: 15px; }
.top-search i { color: var(--muted); font-size: 20px; }
.top-search input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; }
.top-search input::placeholder { color: #74877e; }
.top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip img { width: 43px; height: 43px; object-fit: cover; border-radius: 50%; border: 1px solid var(--gold); }
.user-chip span { display: flex; flex-direction: column; line-height: 1.35; }
.user-chip b { font-size: 13px; }
.user-chip small { color: var(--muted); font-size: 10px; }
.desktop-sidebar { width: var(--sidebar); position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; background: #071612; border-inline-end: 1px solid var(--line-soft); padding: 20px 16px; display: flex; flex-direction: column; }
.brand-sidebar { padding: 3px 10px 26px; }
.desktop-sidebar nav { display: grid; gap: 5px; }
.desktop-sidebar nav a, .sidebar-profile, .sidebar-logout { min-height: 48px; border-radius: 13px; display: flex; align-items: center; gap: 12px; padding: 8px 13px; color: var(--muted-strong); font-size: 13px; }
.desktop-sidebar nav a i, .sidebar-profile i, .sidebar-logout i { font-size: 22px; }
.desktop-sidebar nav a:hover, .desktop-sidebar nav a.active, .sidebar-profile:hover { background: #112b21; color: var(--green); }
.sidebar-profile { margin-top: auto; }
.sidebar-settings { margin-top: 0; }
.sidebar-settings.active { background: #112b21; color: var(--green); }
.sidebar-logout { color: #d48b87; }
.app-main { padding-inline-start: var(--sidebar); padding-top: 76px; min-height: 100vh; }
.bottom-nav { display: none; }
.dashboard { padding-block: 42px 80px; }
.welcome-row { display: flex; justify-content: space-between; align-items: end; margin-bottom: 30px; }
.welcome-row h1, .page-heading h1 { margin: 3px 0 4px; font-size: clamp(30px, 4vw, 45px); line-height: 1.25; }
.welcome-row p, .page-heading p { margin: 0; color: var(--muted); }
.dashboard-hero { height: 355px; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; position: relative; display: flex; align-items: center; padding: 45px 55px; box-shadow: var(--shadow); }
.dashboard-hero::after { content: ""; position: absolute; inset: 0; background: rgba(1, 14, 10, .45); }
.dashboard-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dashboard-hero-content { position: relative; z-index: 2; max-width: 430px; }
.dashboard-hero h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.3; margin: 7px 0; }
.dashboard-hero p { color: var(--muted-strong); margin: 0 0 22px; }
.profile-score { position: absolute; z-index: 2; inset-inline-end: 35px; bottom: 35px; width: 160px; border: 1px solid rgba(216,171,87,.42); background: rgba(5, 22, 16, .88); backdrop-filter: blur(15px); border-radius: 17px; padding: 16px; display: grid; }
.profile-score strong { color: var(--gold); font-size: 30px; line-height: 1; }
.profile-score span { color: var(--muted); font-size: 11px; }
.profile-score a { color: var(--green); font-size: 11px; margin-top: 7px; }
.quick-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 46px; }
.quick-filters a { min-height: 70px; border: 1px solid var(--line); background: var(--panel); border-radius: 15px; display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--muted-strong); }
.quick-filters a:hover { border-color: var(--green-dark); color: var(--green); }
.quick-filters i { font-size: 23px; }
.mobile-home-search { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.content-section { margin-block: 46px; }
.player-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.player-card { height: 330px; position: relative; border: 1px solid var(--line); border-radius: 19px; overflow: hidden; background: var(--panel); }
.player-card:hover { border-color: var(--gold); transform: translateY(-3px); transition: .25s ease; }
.player-card > img { width: 100%; height: 100%; object-fit: cover; }
.card-shade { position: absolute; inset: 0; background: rgba(2, 12, 9, .23); }
.verified-badge { position: absolute; top: 14px; inset-inline-start: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #032016; display: grid; place-items: center; }
.player-card-content { position: absolute; inset: auto 0 0; padding: 24px 18px 17px; background: rgba(3, 14, 11, .82); backdrop-filter: blur(10px); }
.player-card-content h3 { margin: 0; font-size: 16px; }
.player-card-content p { margin: 2px 0 10px; color: var(--muted-strong); font-size: 11px; }
.match-pill { display: inline-flex; border: 1px solid rgba(216,171,87,.38); color: var(--gold); border-radius: 20px; padding: 3px 9px; font-size: 10px; }
.reel-preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reel-preview { height: 280px; position: relative; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; background: var(--panel); }
.reel-preview img { width: 100%; height: 100%; object-fit: cover; }
.reel-preview::after { content: ""; position: absolute; inset: 50% 0 0; background: rgba(3, 13, 10, .68); }
.play-circle { position: absolute; z-index: 2; inset: 46% auto auto 50%; transform: translate(-50%, -50%); width: 45px; height: 45px; border-radius: 50%; display: grid; place-items: center; background: rgba(3, 19, 13, .7); border: 1px solid white; }
.reel-preview > div { position: absolute; z-index: 2; inset: auto 15px 15px; }
.reel-preview h3 { margin: 0; font-size: 14px; }
.reel-preview p { margin: 2px 0 0; color: var(--muted-strong); font-size: 10px; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.academy-list, .opportunity-mini-list { display: grid; gap: 9px; }
.academy-list article, .opportunity-mini-list article { display: flex; align-items: center; gap: 13px; border: 1px solid var(--line-soft); background: var(--panel); border-radius: 14px; padding: 10px; }
.academy-list img { width: 68px; height: 58px; border-radius: 10px; object-fit: cover; }
.academy-list div, .opportunity-mini-list div:nth-child(2) { flex: 1; }
.academy-list h3, .opportunity-mini-list h3 { margin: 0; font-size: 13px; }
.academy-list h3 i { color: var(--green); }
.academy-list p, .opportunity-mini-list p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.opportunity-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: #163425; color: var(--gold); font-size: 24px; }
.opportunity-mini-list a { color: var(--green); font-size: 10px; }

/* Forms and auth */
.auth-page { background: #06110f; }
.auth-page::before { opacity: .09; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, .85fr) minmax(480px, 1.15fr); }
.auth-wide { grid-template-columns: minmax(320px, .65fr) minmax(640px, 1.35fr); }
.auth-visual { position: sticky; top: 0; min-height: 100vh; height: 100%; padding: 42px; background-image: url("../images/hero-football.png"); background-size: cover; background-position: 63% center; display: flex; flex-direction: column; justify-content: space-between; }
.auth-visual::before { content: ""; position: absolute; inset: 0; background: rgba(2, 15, 11, .62); }
.auth-visual > * { position: relative; z-index: 2; }
.auth-visual-copy { max-width: 470px; }
.auth-visual-copy h1 { font-size: clamp(40px, 5vw, 66px); line-height: 1.22; margin: 10px 0; }
.auth-visual-copy p { color: var(--muted-strong); }
.auth-card { width: min(820px, 100%); padding: 60px clamp(28px, 6vw, 80px); margin: auto; }
.auth-card-compact { max-width: 590px; }
.auth-card-heading { margin-bottom: 28px; }
.auth-card-heading h1 { font-size: clamp(30px, 4vw, 45px); margin: 4px 0; }
.auth-card-heading p { color: var(--muted); margin: 0; }
.step-label { color: var(--gold); font-size: 12px; }
.form-progress { display: flex; gap: 6px; margin-bottom: 28px; }
.form-progress span { width: 45px; height: 4px; border-radius: 4px; background: #1d3a30; }
.form-progress span.active { width: 80px; background: var(--green); }
.role-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.role-option { cursor: pointer; position: relative; min-height: 126px; border: 1px solid var(--line); border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--panel); }
.role-option input { position: absolute; opacity: 0; }
.role-option:has(input:checked) { border-color: var(--green); background: #102c21; }
.role-option i { font-size: 30px; color: var(--green); }
.role-option b { margin-top: 5px; }
.role-option small { color: var(--muted); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > span { font-size: 12px; color: var(--muted-strong); }
.field input, .field textarea, .field select, .discover-search input, .discover-search select, .reel-comment-form input {
  width: 100%; min-height: 49px; border: 1px solid var(--line); border-radius: 12px; background: #091a15; color: var(--text); padding: 10px 13px; outline: 0;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .discover-search input:focus, .discover-search select:focus { border-color: var(--green-strong); }
.field input::placeholder, .field textarea::placeholder, .discover-search input::placeholder { color: #657a70; }
.field input[type=file] { padding: 10px; font-size: 11px; }
.field > small { color: var(--muted); font-size: 10px; }
.field-full { grid-column: 1 / -1; }
.field-error { color: var(--danger) !important; font-size: 10px; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; top: 50%; inset-inline-start: 15px; transform: translateY(-50%); color: var(--muted); z-index: 1; }
.input-icon input { padding-inline-start: 43px; }
.conditional-row { border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(11,30,24,.55); padding: 15px; margin: 12px 0; }
.switch-row { display: flex; align-items: center; gap: 12px; }
.switch-row > input { appearance: none; width: 43px; height: 24px; background: #244339; border-radius: 20px; position: relative; cursor: pointer; flex: 0 0 auto; }
.switch-row > input::after { content: ""; position: absolute; width: 18px; height: 18px; top: 3px; inset-inline-start: 3px; border-radius: 50%; background: #9aafa6; transition: .2s; }
.switch-row > input:checked { background: var(--green-strong); }
.switch-row > input:checked::after { inset-inline-start: 22px; background: white; }
.switch-row > span { display: flex; flex-direction: column; }
.switch-row b { font-size: 12px; }
.switch-row small { color: var(--muted); font-size: 9px; }
.conditional-field { display: none; margin: 15px 0 0; }
.conditional-field.is-visible { display: grid; }
.role-fields { display: none; border-top: 1px solid var(--line-soft); margin-top: 22px; padding-top: 22px; }
.role-fields.is-visible { display: block; }
.checkbox-row { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-strong); font-size: 11px; }
.checkbox-row input { accent-color: var(--green); }
.checkbox-row a, .form-between a, .auth-switch a, .status-links a, .dev-link { color: var(--green); }
.password-grid { margin-top: 20px; }
.form-between { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 20px; font-size: 11px; }
.auth-switch { text-align: center; color: var(--muted); margin-top: 20px; font-size: 12px; }
.demo-box { margin-top: 24px; border: 1px solid rgba(216,171,87,.25); background: rgba(44,36,18,.25); border-radius: 13px; display: flex; gap: 10px; align-items: center; padding: 12px; }
.demo-box > i { color: var(--gold); font-size: 22px; }
.demo-box span { display: flex; flex-direction: column; }
.demo-box b { font-size: 11px; }
.demo-box small { font-size: 9px; color: var(--muted); direction: ltr; text-align: left; }
.simple-auth-page { display: grid; place-items: center; min-height: 100vh; padding: 30px; }
.status-card { width: min(480px, 100%); border: 1px solid var(--line); border-radius: 25px; background: rgba(10, 28, 22, .94); padding: clamp(30px, 6vw, 54px); text-align: center; box-shadow: var(--shadow); margin: 80px auto; }
.status-icon { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 18px; color: var(--green); border: 1px solid rgba(73,221,160,.38); background: #102c21; border-radius: 50%; }
.status-icon i { font-size: 36px; }
.status-icon-error { color: var(--danger); border-color: rgba(255,116,109,.4); background: #2b1716; }
.status-card h1 { margin: 5px 0 12px; font-size: 31px; }
.status-card > p { color: var(--muted); margin-bottom: 25px; }
.status-card form { text-align: start; }
.status-links { display: flex; justify-content: center; gap: 20px; margin-top: 22px; font-size: 11px; }
.dev-note { display: block; color: var(--gold); font-size: 9px; margin-top: 8px; }
.dev-link { display: block; text-align: center; margin-top: 15px; font-size: 11px; }
.error-page { margin-top: 15vh; }

/* Inner pages */
.page-space { padding-block: 45px 80px; }
.page-heading { margin-bottom: 32px; }
.heading-actions { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.discover-search { display: grid; grid-template-columns: 1fr 190px auto; gap: 10px; padding: 15px; border: 1px solid var(--line); background: var(--panel); border-radius: 17px; }
.discover-search .input-icon input { min-height: 48px; }
.discover-search select { min-height: 48px; }
.directory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.directory-card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); background: var(--panel); border-radius: 15px; padding: 13px; }
.directory-card:hover { border-color: var(--green-dark); }
.directory-card img { width: 67px; height: 67px; object-fit: cover; border-radius: 13px; }
.directory-card > div { flex: 1; }
.directory-card h3 { margin: 0; font-size: 14px; }
.directory-card h3 i { color: var(--green); }
.directory-card p { margin: 2px 0; color: var(--muted); font-size: 10px; }
.directory-card span { color: var(--gold); font-size: 9px; }
.organization-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.organization-card { border: 1px solid var(--line); background: var(--panel); border-radius: 17px; overflow: hidden; }
.organization-card img { width: 100%; height: 160px; object-fit: cover; }
.organization-card > div { padding: 15px; }
.organization-card > div > span { color: var(--green); font-size: 10px; }
.organization-card h3 { margin: 3px 0; }
.organization-card h3 i { color: var(--green); }
.organization-card p { margin: 0; color: var(--muted); font-size: 11px; }
.empty-state { grid-column: 1 / -1; min-height: 160px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed var(--line); border-radius: 15px; color: var(--muted); text-align: center; }
.empty-state i { font-size: 35px; color: var(--green-dark); }
.empty-state p { margin: 0; }
.empty-state.compact { min-height: 100px; }

/* Reels */
.reels-layout { padding-block: 35px 90px; display: grid; grid-template-columns: 280px minmax(350px, 500px); gap: 40px; justify-content: center; align-items: start; }
.reels-intro { position: sticky; top: 120px; padding-top: 30px; }
.reels-intro h1 { font-size: 42px; margin: 4px 0; }
.reels-intro p { color: var(--muted); margin-bottom: 20px; }
.reels-feed { display: grid; gap: 24px; }
.reel-card { height: min(760px, calc(100vh - 115px)); min-height: 620px; scroll-snap-align: start; position: relative; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: black; box-shadow: var(--shadow); }
.reel-card video { width: 100%; height: 100%; object-fit: cover; }
.reel-overlay { position: absolute; inset: 40% 0 0; background: rgba(2, 10, 8, .5); pointer-events: none; }
.reel-play { position: absolute; z-index: 3; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(4,20,14,.65); display: grid; place-items: center; cursor: pointer; font-size: 29px; }
.reel-card.is-playing .reel-play { opacity: 0; }
.reel-card.is-playing:hover .reel-play { opacity: 1; }
.reel-info { position: absolute; z-index: 2; inset: auto 25px 23px; padding-inline-end: 58px; }
.reel-author { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.reel-author img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; border: 1px solid var(--gold); }
.reel-author span { display: flex; flex-direction: column; }
.reel-author b { font-size: 12px; }
.reel-author small { font-size: 9px; color: var(--muted-strong); }
.reel-author > i { color: var(--green); }
.reel-info h2 { margin: 0; font-size: 20px; }
.reel-info > p { margin: 3px 0 0; font-size: 11px; color: var(--muted-strong); }
.reel-actions { position: absolute; z-index: 3; inset: auto auto 25px 13px; display: grid; gap: 12px; }
.reel-actions button { width: 47px; min-height: 47px; padding: 5px; border-radius: 50%; border: 1px solid rgba(255,255,255,.32); background: rgba(4,18,13,.68); display: grid; place-items: center; cursor: pointer; }
.reel-actions button i { font-size: 21px; }
.reel-actions button span { font-size: 8px; }
.reel-comment-form { display: none; position: absolute; z-index: 5; inset: auto 15px 95px; align-items: center; gap: 8px; background: rgba(5,20,15,.94); border: 1px solid var(--line); padding: 8px; border-radius: 13px; }
.reel-comment-form.is-visible { display: flex; }
.reel-comment-form input { min-height: 42px; }
.reel-comment-form button { width: 42px; height: 42px; border: 0; border-radius: 10px; background: var(--green); color: #04110d; }

/* Dialogs */
.modal { width: min(570px, calc(100% - 30px)); max-height: 90vh; overflow: auto; border: 1px solid var(--line); border-radius: 22px; background: #0b1d17; color: var(--text); padding: 32px; box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(0, 8, 6, .78); backdrop-filter: blur(4px); }
.modal-close-form { float: left; }
.modal-close-form button { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--panel); border-radius: 50%; cursor: pointer; }
.modal-heading h2 { margin: 3px 0; }
.modal-heading p { color: var(--muted); margin-top: 0; font-size: 11px; }
.validation-modal { max-width: 520px; text-align: start; }
.validation-modal-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 16px; border: 1px solid rgba(255,116,109,.42); border-radius: 50%; background: #2b1716; color: var(--danger); }
.validation-modal-icon i { font-size: 29px; }
.validation-errors { display: grid; gap: 9px; margin: 22px 0; padding: 0; list-style: none; }
.validation-errors li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid rgba(255,116,109,.24); border-radius: 12px; background: rgba(43,23,22,.58); padding: 12px; color: var(--muted-strong); font-size: 11px; }
.validation-errors li > i { margin-top: 2px; color: var(--danger); }
.validation-errors li span { display: grid; gap: 3px; }
.validation-errors li b { color: var(--text); }

/* Opportunities */
.opportunities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.opportunity-card { border: 1px solid var(--line); background: var(--panel); border-radius: 19px; padding: 24px; }
.opportunity-card:hover { border-color: rgba(216,171,87,.48); }
.opportunity-top { display: flex; justify-content: space-between; gap: 10px; }
.opportunity-kind { color: var(--gold); font-size: 11px; }
.verified-pill { color: var(--green); font-size: 10px; border: 1px solid rgba(73,221,160,.27); padding: 3px 8px; border-radius: 15px; }
.opportunity-card h2 { margin: 17px 0 8px; font-size: 20px; }
.opportunity-card > p { color: var(--muted); font-size: 12px; min-height: 50px; }
.opportunity-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted-strong); font-size: 10px; padding-block: 13px; border-block: 1px solid var(--line-soft); }
.opportunity-meta span { display: flex; align-items: center; gap: 4px; }
.opportunity-meta i { color: var(--green); }
.match-box { margin: 14px 0; border: 1px solid rgba(216,171,87,.28); background: rgba(45,35,14,.19); border-radius: 13px; padding: 12px; display: flex; align-items: center; gap: 18px; }
.match-box > div { display: flex; flex-direction: column; }
.match-box strong { color: var(--gold); font-size: 25px; line-height: 1.1; }
.match-box span { color: var(--muted); font-size: 8px; }
.match-box ul { padding: 0; margin: 0; list-style: none; font-size: 9px; color: var(--muted-strong); }
.match-box li { display: flex; align-items: center; gap: 5px; }
.match-box li i { color: var(--green); }

/* Profile */
.profile-hero { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--panel); }
.profile-cover { height: 260px; overflow: hidden; }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; }
.profile-main { min-height: 150px; position: relative; padding: 25px 30px 25px 190px; display: flex; align-items: center; gap: 24px; }
.profile-avatar { position: absolute; width: 130px; height: 150px; inset-inline-start: 36px; bottom: 27px; border: 5px solid var(--panel); border-radius: 20px; object-fit: cover; }
.profile-identity { flex: 1; }
.profile-name { display: flex; align-items: center; gap: 7px; }
.profile-name h1 { margin: 0; font-size: 31px; }
.profile-name i { color: var(--green); font-size: 22px; }
.profile-identity > p { color: var(--muted); margin: 2px 0 10px; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-tags span { border: 1px solid var(--line); border-radius: 20px; padding: 4px 10px; color: var(--muted-strong); font-size: 9px; }
.profile-grid { display: grid; grid-template-columns: 1fr 270px; gap: 25px; }
.profile-about { border: 1px solid var(--line); background: var(--panel); border-radius: 18px; padding: 25px; }
.profile-about > p { color: var(--muted-strong); }
.profile-about dl { display: grid; gap: 10px; }
.profile-about dl div { display: grid; grid-template-columns: 150px 1fr; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.profile-about dt { color: var(--muted); font-size: 11px; }
.profile-about dd { margin: 0; }
.profile-stats { display: grid; gap: 10px; margin-block: 46px; }
.profile-stats article { border: 1px solid var(--line); background: var(--panel); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; }
.profile-stats strong { color: var(--gold); font-size: 22px; }
.profile-stats span { color: var(--muted); font-size: 10px; }

/* Inbox and notifications */
.inbox-layout { min-height: 620px; display: grid; grid-template-columns: 330px 1fr; border: 1px solid var(--line); border-radius: 21px; overflow: hidden; background: var(--panel); }
.contacts-panel { padding: 20px; border-inline-end: 1px solid var(--line); overflow: auto; }
.contacts-panel h2 { font-size: 15px; margin: 0 0 15px; }
.contacts-panel form { margin-bottom: 6px; }
.contacts-panel button { width: 100%; border: 0; background: transparent; color: var(--text); display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; cursor: pointer; text-align: start; }
.contacts-panel button:hover { background: #122d23; }
.contacts-panel img { width: 45px; height: 45px; object-fit: cover; border-radius: 50%; }
.contacts-panel span { flex: 1; display: flex; flex-direction: column; }
.contacts-panel b { font-size: 11px; }
.contacts-panel small { color: var(--muted); font-size: 8px; }
.message-panel { display: flex; flex-direction: column; }
.message-panel-heading { min-height: 70px; display: flex; justify-content: space-between; align-items: center; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.message-panel-heading > div { display: flex; align-items: center; gap: 8px; }
.message-panel-heading h2 { margin: 0; font-size: 14px; }
.message-panel-heading > i { color: var(--green); font-size: 22px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.message-list { flex: 1; padding: 25px; display: flex; flex-direction: column; gap: 10px; }
.message-list article { max-width: 70%; align-self: flex-start; border: 1px solid var(--line); background: #112a21; border-radius: 15px 15px 15px 4px; padding: 10px 13px; }
.message-list article.message-mine { align-self: flex-end; background: #15563b; border-color: #277653; border-radius: 15px 15px 4px 15px; }
.message-list p { margin: 0; font-size: 11px; }
.message-list time { display: block; color: var(--muted); font-size: 8px; margin-top: 3px; }
.narrow-page { max-width: 780px; }
.notification-list { border: 1px solid var(--line); background: var(--panel); border-radius: 18px; overflow: hidden; }
.notification-list > a { display: flex; align-items: center; gap: 15px; padding: 17px; border-bottom: 1px solid var(--line-soft); }
.notification-list > a:last-child { border-bottom: 0; }
.notification-icon { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: #153729; color: var(--green); font-size: 22px; }
.notification-list > a > div { flex: 1; }
.notification-list h2 { font-size: 13px; margin: 0; }
.notification-list p { color: var(--muted); font-size: 10px; margin: 2px 0; }
.notification-list time { color: #70867c; font-size: 8px; }

/* Settings */
.settings-page { max-width: 980px; }
.settings-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.settings-card { border: 1px solid var(--line); background: var(--panel); border-radius: 19px; padding: 25px; }
.settings-card .panel-heading > i { color: var(--green); font-size: 28px; }
.settings-card .panel-heading h2 { margin: 2px 0; }
.settings-checkbox { margin: 2px 0 18px; }
.settings-description, .settings-note { color: var(--muted); font-size: 11px; }
.settings-description b { color: var(--muted-strong); }
.settings-note { display: flex; align-items: center; gap: 6px; border: 1px solid rgba(216,171,87,.22); background: rgba(47,35,12,.18); border-radius: 11px; padding: 9px; }
.settings-note i { color: var(--gold); font-size: 18px; }

/* Admin */
.admin-role { border: 1px solid rgba(216,171,87,.35); color: var(--gold); border-radius: 20px; padding: 6px 12px; font-size: 10px; }
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }
.stats-grid article { border: 1px solid var(--line); background: var(--panel); border-radius: 16px; padding: 18px; display: flex; align-items: center; gap: 12px; }
.stats-grid article > i { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; background: #153729; color: var(--green); font-size: 22px; }
.stats-grid article div { display: flex; flex-direction: column; }
.stats-grid strong { font-size: 24px; line-height: 1.2; }
.stats-grid span { color: var(--muted); font-size: 9px; }
.stats-grid .stat-danger > i { background: #351a19; color: var(--danger); }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 25px; }
.admin-panel { border: 1px solid var(--line); background: var(--panel); border-radius: 17px; padding: 20px; min-width: 0; }
.admin-panel-wide { grid-column: 1 / -1; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.panel-heading h2 { margin: 2px 0; font-size: 18px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 10px; }
th { text-align: start; color: var(--muted); font-weight: 500; padding: 10px; border-bottom: 1px solid var(--line); }
td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); }
.table-user { display: flex; align-items: center; gap: 8px; min-width: 180px; }
.table-user img { width: 37px; height: 37px; border-radius: 9px; object-fit: cover; }
.table-user span { display: flex; flex-direction: column; }
.table-user small { color: var(--muted); font-size: 8px; }
.status-pill { display: inline-flex; padding: 3px 8px; border-radius: 12px; background: #273b34; color: var(--muted-strong); font-size: 8px; }
.status-active { background: #123d2b; color: var(--green); }
.event-list, .flag-list, .audit-list { display: grid; gap: 7px; }
.event-list article, .flag-list article, .audit-list article { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line-soft); border-radius: 11px; }
.event-list article > div, .flag-list article > div, .audit-list article > div { flex: 1; display: flex; flex-direction: column; }
.event-list b, .flag-list b, .audit-list b { font-size: 10px; }
.event-list small, .flag-list small, .audit-list small { color: var(--muted); font-size: 8px; }
.event-list time { color: var(--muted); font-size: 8px; }
.event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.event-dot.danger { background: var(--danger); }
.toggle-display { width: 38px; height: 21px; border-radius: 12px; background: #294139; position: relative; }
.toggle-display::after { content: ""; width: 15px; height: 15px; border-radius: 50%; background: #8da097; position: absolute; top: 3px; inset-inline-start: 3px; }
.toggle-display.active { background: var(--green-strong); }
.toggle-display.active::after { inset-inline-start: 20px; background: white; }
.audit-list article > i { color: var(--green); font-size: 21px; }

.flash-stack { position: fixed; z-index: 100; top: 90px; inset-inline-end: 22px; width: min(380px, calc(100% - 30px)); display: grid; gap: 8px; }
.flash { border: 1px solid var(--line); background: rgba(10,29,23,.96); backdrop-filter: blur(15px); border-radius: 13px; padding: 12px 14px; display: flex; align-items: center; gap: 9px; box-shadow: var(--shadow); }
.flash > i { color: var(--green); font-size: 20px; }
.flash-danger > i, .flash-warning > i { color: var(--warning); }
.flash span { flex: 1; font-size: 11px; }
.flash button { border: 0; background: transparent; cursor: pointer; color: var(--muted); }

@media (max-width: 1100px) {
  :root { --sidebar: 210px; }
  .player-grid { grid-template-columns: repeat(3, 1fr); }
  .reel-preview-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { grid-template-columns: 1fr 1fr; gap: 30px; }
  .hero-media { height: 530px; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  body { font-size: 14px; }
  .shell { width: min(100% - 28px, 720px); }
  .landing-nav { height: 76px; }
  .landing-nav nav a:not(.button) { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 28px; min-height: auto; }
  .hero-copy h1 { font-size: clamp(42px, 13vw, 64px); }
  .hero-media { height: 520px; order: -1; }
  .hero-media::after { background: rgba(4,18,14,.1); }
  .floating-card-top { top: 24px; inset-inline-start: 20px; }
  .floating-card-bottom { bottom: 25px; inset-inline-end: 20px; }
  .feature-strip { grid-template-columns: 1fr; }
  .feature-strip article { border-inline-start: 0; border-bottom: 1px solid var(--line-soft); padding: 18px 5px; }
  .feature-strip article:last-child { border-bottom: 0; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .cta-section { flex-direction: column; align-items: flex-start; padding: 35px; }
  .landing-footer { flex-direction: column; justify-content: center; gap: 12px; text-align: center; }

  .desktop-sidebar { display: none; }
  .app-main { padding-inline-start: 0; padding-top: 68px; padding-bottom: 78px; }
  .topbar { height: 68px; }
  .topbar .brand { display: inline-flex; font-size: 17px; }
  .topbar .brand-mark { width: 36px; height: 36px; }
  .top-search { display: none; }
  .user-chip span { display: none; }
  .bottom-nav { display: flex; position: fixed; z-index: 35; inset: auto 10px max(8px, env(safe-area-inset-bottom)) 10px; height: 67px; background: rgba(9,25,20,.96); backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 20px; padding: 7px 8px; justify-content: space-around; box-shadow: 0 15px 45px rgba(0,0,0,.45); }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--muted); font-size: 8px; }
  .bottom-nav i { font-size: 23px; }
  .bottom-nav a.active { color: var(--green); }
  .dashboard { padding-top: 26px; }
  .welcome-row { align-items: flex-start; }
  .welcome-row .button { font-size: 0; width: 44px; padding: 0; }
  .welcome-row .button i { font-size: 19px; }
  .dashboard-hero { display: none; }
  .mobile-home-search { display: flex; height: 52px; align-items: center; gap: 9px; border: 1px solid rgba(216,171,87,.36); background: var(--panel); border-radius: 15px; padding-inline: 14px 8px; }
  .mobile-home-search > i { color: var(--muted); font-size: 21px; }
  .mobile-home-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
  .mobile-home-search input::placeholder { color: #7b8d85; }
  .mobile-home-search button { width: 36px; height: 36px; border: 0; border-radius: 10px; display: grid; place-items: center; background: var(--green-strong); color: #03110c; cursor: pointer; }
  .quick-filters { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; margin: 13px 0 34px; padding-bottom: 2px; }
  .quick-filters::-webkit-scrollbar { display: none; }
  .quick-filters a { flex: 0 0 auto; min-width: 112px; min-height: 48px; padding-inline: 14px; font-size: 11px; border-radius: 13px; }
  .quick-filters i { font-size: 19px; }
  .player-grid { grid-template-columns: 1fr 1fr; }
  .player-card { height: 310px; }
  .reel-preview-grid { grid-template-columns: 1fr 1fr; }
  .two-column { grid-template-columns: 1fr; }
  .directory-grid { grid-template-columns: 1fr; }
  .organization-grid { grid-template-columns: 1fr 1fr; }
  .discover-search { grid-template-columns: 1fr; }
  .opportunities-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: repeat(3, 1fr); margin: 0; }
  .profile-main { padding: 85px 22px 24px; flex-direction: column; align-items: flex-start; }
  .profile-avatar { width: 110px; height: 125px; bottom: auto; top: -60px; }
  .profile-cover { height: 220px; }
  .inbox-layout { grid-template-columns: 1fr; }
  .contacts-panel { border-inline-end: 0; border-bottom: 1px solid var(--line); max-height: 270px; }
  .message-panel { min-height: 400px; }
  .admin-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .admin-panel-wide { grid-column: auto; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .reels-layout { width: 100%; grid-template-columns: 1fr; padding: 0; gap: 0; }
  .reels-intro { position: relative; z-index: 8; height: 0; padding: 0; }
  .reels-intro .eyebrow, .reels-intro h1, .reels-intro p { display: none; }
  .reels-intro .button { position: fixed; z-index: 38; top: 80px; inset-inline-end: 14px; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 0; background: rgba(9,29,22,.88); color: var(--green); backdrop-filter: blur(14px); }
  .reels-intro .button i { font-size: 20px; }
  .reels-feed { gap: 0; scroll-snap-type: y mandatory; }
  .reel-card { height: calc(100svh - 68px); min-height: 620px; border-radius: 0; border-inline: 0; }
  .reel-info { bottom: 91px; }
  .reel-actions { bottom: 92px; }
  .reel-comment-form { bottom: 160px; }

  .auth-shell, .auth-wide { grid-template-columns: 1fr; }
  .auth-visual { position: relative; min-height: 270px; height: 270px; padding: 25px; background-position: 58% 50%; }
  .auth-visual-copy h1 { font-size: 32px; margin-bottom: 0; }
  .auth-visual-copy p { display: none; }
  .auth-card { padding: 35px 22px 65px; }
}

@media (max-width: 520px) {
  .shell { width: calc(100% - 22px); }
  .brand { font-size: 17px; }
  .brand-mark { width: 36px; height: 36px; }
  .landing-nav nav { gap: 8px; }
  .landing-nav .button { padding-inline: 13px; }
  .hero-media { height: 430px; border-radius: 24px; }
  .hero { gap: 24px; padding-block: 18px 55px; }
  .hero-media { height: 330px; }
  .hero-copy h1 { margin-block: 10px 14px; font-size: 36px; }
  .hero-copy > p { margin-bottom: 20px; font-size: 13px; }
  .hero-actions .button { width: 100%; }
  .trust-row { gap: 9px; }
  .feature-strip { padding: 20px; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid article { min-height: 230px; }
  .section { padding-block: 70px; }
  .cta-section { margin-bottom: 50px; padding: 28px; }
  .topbar .brand span:last-child { display: none; }
  .welcome-row h1, .page-heading h1 { font-size: 29px; }
  .welcome-row { margin-bottom: 18px; }
  .dashboard { padding-top: 16px; }
  .welcome-row h1 { font-size: 23px; }
  .welcome-row p { display: none; }
  .quick-filters { margin-bottom: 30px; }
  .content-section { margin-block: 30px; }
  .content-section .section-heading { margin-bottom: 16px; }
  .player-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .player-card { height: 195px; border-radius: 14px; }
  .verified-badge { width: 24px; height: 24px; top: 9px; inset-inline-start: 9px; }
  .player-card-content { padding: 13px 9px 9px; }
  .player-card-content h3 { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .player-card-content p { margin-bottom: 6px; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .match-pill { padding: 2px 6px; font-size: 8px; }
  .reel-preview-grid { display: flex; overflow-x: auto; scrollbar-width: none; gap: 7px; }
  .reel-preview-grid::-webkit-scrollbar { display: none; }
  .reel-preview { flex: 0 0 108px; height: 158px; border-radius: 13px; }
  .reel-preview h3 { font-size: 10px; }
  .reel-preview > div { inset: auto 9px 9px; }
  .play-circle { width: 36px; height: 36px; }
  .section-heading.inline { align-items: center; }
  .section-heading.inline h2 { font-size: 22px; }
  .organization-grid { grid-template-columns: 1fr; }
  .heading-actions { align-items: flex-start; flex-direction: column; }
  .heading-actions .button { width: 100%; }
  .profile-cover { height: 180px; }
  .profile-main { padding-top: 78px; }
  .profile-main > .button, .profile-main > form, .profile-main > form .button { width: 100%; }
  .profile-name h1 { font-size: 25px; }
  .profile-stats { grid-template-columns: 1fr; }
  .profile-about dl div { grid-template-columns: 1fr; gap: 3px; }
  .stats-grid { grid-template-columns: 1fr; }
  .reels-layout { width: 100%; }
  .reel-card { min-height: 620px; }
  .role-picker { gap: 6px; }
  .role-option { min-height: 105px; }
  .role-option small { display: none; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .field-full { grid-column: auto; }
  .auth-visual { min-height: 230px; height: 230px; }
  .auth-visual-copy h1 { font-size: 27px; }
  .status-card { margin: 30px auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}