/* GenZ branding and accessible fullscreen short-video experience. */
.genz-brand-icon { display:block;flex:none;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(5,96,210,.13)); }
.auth-brand .genz-brand-icon{display:inline-block;vertical-align:middle;margin-right:9px}
.boot-logo img{display:block;margin:0 auto 16px;filter:drop-shadow(0 9px 20px rgba(5,96,210,.18))}
.genz-short-header{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:11px;padding:calc(13px + env(safe-area-inset-top)) 20px 14px;color:#fff;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)}
.genz-short-header h2{font-size:17px;letter-spacing:-.025em;font-weight:800;margin:0}.genz-short-header h2 span{color:#43dfb4}
.genz-short-header .icon-btn{background:rgba(255,255,255,.16);color:#fff;flex:none}
.genz-short-header .btn{white-space:nowrap;min-height:36px}
.shorts-stage{isolation:isolate;background:#050914}
.short-container{position:absolute;inset:0}
.short-item{position:absolute;inset:0}
.short-frame{border-left:1px solid rgba(255,255,255,.07);border-right:1px solid rgba(255,255,255,.07)}
.short-frame video{object-fit:cover;width:100%;height:100%;background:#070a13}
.short-overlay{pointer-events:none}.short-overlay button,.short-overlay a{pointer-events:auto}
.short-meta .sm-author{background:transparent;color:white;border:0;cursor:pointer;padding:4px 0;font-weight:800;text-align:left}
.short-meta .sm-text{margin:4px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.short-rail .sr-btn:disabled{opacity:.6;cursor:wait}
.short-nav-hint button:disabled{opacity:.28;cursor:default}
.genz-short-pause{position:absolute;inset:22% 25% 18%;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2;opacity:.85;transition:opacity .2s}
.genz-short-pause .icn{background:rgba(0,0,0,.35);border-radius:100%;padding:17px;backdrop-filter:blur(7px)}
.genz-short-pause svg{width:28px;height:28px}
.short-frame.is-playing .genz-short-pause{opacity:0}.short-frame.is-playing .genz-short-pause:focus-visible,.short-frame.is-playing .genz-short-pause:hover{opacity:.9}
.genz-short-error{position:absolute;top:47%;left:12%;right:12%;text-align:center;z-index:3;color:white;font-weight:700;background:rgba(0,0,0,.8);padding:15px;border-radius:13px}
.short-loading,.genz-short-state{height:100%;min-height:330px;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;padding:25px}
.genz-short-state-icon{width:70px;height:70px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,#1261F3,#05C985)}
.genz-short-state-icon svg{width:28px;height:28px}
.genz-short-state h3{font-size:22px;margin:7px 0 0}.genz-short-state p{font-size:14px;color:#b9c6d8;max-width:310px;line-height:1.6}
.genz-short-upload[hidden],.genz-short-error[hidden]{display:none!important}
.genz-short-upload{position:absolute;inset:0;z-index:30;background:rgba(4,9,21,.84);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;padding:24px;color:#f8fafc}
.genz-short-upload-card{width:min(430px,100%);background:#121c2d;border:1px solid #2b3954;border-radius:22px;padding:25px;display:grid;gap:13px;box-shadow:0 25px 70px rgba(0,0,0,.3)}
.genz-short-upload-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.genz-short-upload-heading h3{font-size:22px}.genz-short-upload-heading button{color:white;font-size:24px;background:transparent;border:0;cursor:pointer}
.genz-short-upload-card>p{font-size:13px;color:#aebdd3;line-height:1.5;margin:0}
.genz-short-upload-card label{font-size:13px;font-weight:700;color:white}
.genz-short-upload-card textarea,.genz-short-upload-card input{width:100%;border:1px solid #43506b;border-radius:11px;padding:12px;min-width:0;background:#0b1423;color:#fff;font-size:14px}
.genz-short-upload-card textarea:focus,.genz-short-upload-card input:focus-visible{outline:2px solid #33d6af;outline-offset:1px}
.genz-short-upload-status{min-height:16px;color:#f8cc86!important}
.genz-short-upload-card button[disabled]{opacity:.55;cursor:wait}
.shorts-stage :focus-visible{outline:3px solid #56f0c4;outline-offset:2px}
@media(max-width:560px){.genz-short-header{padding-left:10px;padding-right:10px}.genz-short-header h2{font-size:15px}.genz-short-header .btn{padding:8px 10px}.short-nav-hint{right:5px}.short-rail{gap:11px}.short-overlay{padding-bottom:calc(18px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.genz-short-pause{transition:none}}
/* Buttons remain tappable even when the global icon-button reset removes padding. */
.genz-short-upload-heading button{display:grid;place-items:center;flex:none;width:38px;height:38px;min-width:38px;border-radius:10px;background:rgba(255,255,255,.1)}
.genz-short-upload-heading button .icn,.genz-short-upload-heading button svg{width:20px;height:20px}

/* ========================================================================
   GenZ / Visual refresh 2026 — electric blue × mint, quiet midnight canvas.
   Keep the original chosen play-in-a-chat-bubble logo in every placement.
   This layer intentionally follows the legacy amber styles in app.css.
   ======================================================================== */
:root {
  --accent:#4779f5; --accent-2:#16bb9e; --teal:#11b998;
  --grad-brand:linear-gradient(125deg,#345af1 0%,#2879ec 64%,#078e92 100%);
  --grad-brand-soft:linear-gradient(125deg,rgba(60,116,255,.18),rgba(5,201,156,.12));
  --glow-brand:0 14px 35px -12px rgba(53,112,249,.45);
  --ring:0 0 0 3px rgba(57,117,248,.32);
  --info-soft:rgba(62,114,247,.14);
  --r-md:16px; --r-lg:22px; --r-xl:28px;
}
html[data-theme="dark"] {
  --bg:#080d18; --bg-soft:#0d1524; --surface:#121c2c;
  --surface-2:#172438; --surface-3:#22314a;
  --line:rgba(164,194,236,.115); --line-strong:rgba(175,204,244,.22);
  --text:#f5f9ff; --text-2:#b1bfd3; --text-3:#8f9fb8;
  --hover:rgba(85,140,255,.09);
  --glass:rgba(17,29,47,.84);
  --shadow-2:0 15px 38px -18px rgba(1,8,26,.8);
}
html[data-theme="light"] {
  --bg:#f3f7fd; --bg-soft:#ecf2fb; --surface:#fff;
  --surface-2:#edf3fc; --surface-3:#dce7f6;
  --line:rgba(35,77,133,.13); --line-strong:rgba(35,77,133,.24);
  --text:#10233c; --text-2:#4b5f7a; --text-3:#4b617f;
  --hover:rgba(42,101,226,.06); --glass:rgba(255,255,255,.9);
}
body {
  background:radial-gradient(900px 550px at 70% -300px,rgba(41,100,226,.065),transparent 75%),var(--bg);
}
::selection {background:rgba(64,118,245,.30)}
:focus-visible {outline:2px solid #4798ff;outline-offset:2px;box-shadow:var(--ring)}
a,button { -webkit-tap-highlight-color:transparent; }
.btn-primary,.nav-create {
  background:var(--grad-brand);color:#fff;
  box-shadow:0 11px 27px -13px rgba(50,106,238,.62),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover,.nav-create:hover {filter:brightness(1.08) saturate(1.05);box-shadow:0 15px 35px -13px rgba(50,106,238,.68)}
.btn-primary:disabled {opacity:.6;cursor:wait}
.brand-name em,.auth-brand em,.auth-mobile-brand em {color:#2cddb7}
.genz-brand-icon {filter:drop-shadow(0 6px 12px rgba(5,133,225,.16))}
.brand {min-height:76px;gap:12px}
.brand .genz-brand-icon {width:45px;height:45px}
.brand-name {font-size:22px;letter-spacing:-.055em}
.side-nav .nav-item {border:1px solid transparent}
.side-nav .nav-item.active {
  border-color:rgba(66,133,245,.15);
  color:var(--text);
  background:linear-gradient(90deg,rgba(54,113,233,.16),rgba(16,185,153,.065)),var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(53,113,240,.04)
}
.side-nav .nav-item.active::before {background:linear-gradient(180deg,#5e97ff,#2de4b7);box-shadow:0 0 18px rgba(44,125,244,.4)}
.nav-user {border:1px solid var(--line);background:var(--surface)}
.nav-create {border-radius:15px}
.rail-card {border-color:var(--line);background:var(--surface)}
.rail-card h3 svg {color:var(--accent)}
.mobile-header {
  background:color-mix(in srgb,var(--bg) 91%,transparent);
  border-bottom:1px solid var(--line)
}
.mobile-header .genz-brand-icon {width:40px;height:40px}
.mobile-tabs {
  background:color-mix(in srgb,var(--bg-soft) 93%,transparent);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 32px rgba(4,12,28,.15)
}
.mobile-tabs .tab.active {color:var(--accent)}
.mobile-tabs .tab-create svg {background:var(--grad-brand);box-shadow:0 6px 16px rgba(30,96,228,.25)}
.mobile-tabs .tab {min-height:51px;align-content:center}
.card {border-color:var(--line)}
.boot-screen {background:radial-gradient(750px 550px at 52% 25%,rgba(43,115,236,.15),transparent 70%),var(--bg)}
.boot-dots span:first-child {background:#397cff}
.boot-dots span:nth-child(2) {background:#23cebf}
.boot-dots span:nth-child(3) {background:#0cb486}

/* Login & account creation */
.auth-wrap {
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  background:#080d18;
  min-height:100dvh
}
.auth-hero {
  isolation:isolate; padding:clamp(34px,4.5vw,74px);
  background:
    radial-gradient(ellipse at 83% 88%,rgba(0,206,170,.22),transparent 48%),
    radial-gradient(ellipse at 7% 10%,rgba(52,111,251,.36),transparent 58%),
    linear-gradient(143deg,#0d1e44 0%,#0b1730 49%,#091a2c 100%);
  border-right:1px solid rgba(135,190,246,.12);
  min-width:0
}
.auth-hero::before {
  width:440px;height:440px;right:-90px;top:12%;opacity:.86;
  background:radial-gradient(circle,rgba(45,110,241,.28),transparent 69%)
}
.auth-hero::after {
  opacity:.42;
  background-image:radial-gradient(rgba(141,191,255,.19) .9px,transparent .9px);
  background-size:28px 28px;
  mask-image:linear-gradient(100deg,transparent 5%,#000 95%)
}
.auth-brand {gap:12px;font-size:25px;letter-spacing:-.06em}
.auth-brand .genz-brand-icon {width:52px;height:52px;filter:drop-shadow(0 8px 19px rgba(2,157,233,.2))}
.auth-brand-suffix {
  align-self:center;margin-left:5px;padding:6px 11px;border:1px solid rgba(130,193,255,.22);
  border-radius:100px;font-size:9px;font-weight:800;letter-spacing:.12em;color:#b5ccec;white-space:nowrap
}
.auth-hero-copy {max-width:600px;gap:19px}
.auth-eyebrow {
  display:inline-flex;align-items:center;gap:10px;width:fit-content;
  padding:9px 13px;background:rgba(75,135,249,.11);
  border:1px solid rgba(119,182,255,.21);border-radius:100px;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;color:#c4ddff
}
.auth-eyebrow-dot {width:7px;height:7px;border-radius:50%;background:#38edc1;box-shadow:0 0 16px rgba(45,235,182,.6)}
.auth-hero-copy h1 {
  max-width:13ch;font-size:clamp(39px,4.25vw,67px);
  line-height:1.09;letter-spacing:-.062em;font-weight:800
}
.auth-hero-copy h1 em {
  display:inline;background:linear-gradient(105deg,#78abff 0%,#7be4e7 58%,#52e0a9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.auth-hero-copy p {max-width:44ch;color:#bbcae0;font-size:clamp(14px,1.14vw,17px);line-height:1.73}
.auth-points {gap:11px;margin-top:10px}
.auth-point {
  gap:15px;min-height:58px;padding:8px 12px;border:1px solid rgba(141,196,255,.12);
  background:linear-gradient(90deg,rgba(105,164,250,.09),rgba(64,122,215,.025));
  border-radius:15px;color:#f0f7ff
}
.auth-point i {
  width:40px;height:40px;border-radius:12px;flex:none;
  background:linear-gradient(145deg,rgba(57,114,245,.24),rgba(18,197,174,.14));
  border:1px solid rgba(148,204,255,.17)
}
.auth-point i svg {width:19px;height:19px;color:#78dce9}
.auth-point span {display:grid;gap:2px}
.auth-point strong {font-size:14px;font-weight:750}
.auth-point small {font-size:11.5px;color:#adbed9;font-weight:500}
.auth-hero-foot {z-index:1;display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.015em;color:#98aecf}
.auth-hero-foot span {color:#34e7bb}
.auth-panel {
  position:relative;isolation:isolate;
  padding:clamp(26px,4vw,66px);
  background:radial-gradient(ellipse at 90% 1%,rgba(53,112,253,.065),transparent 45%),#080d18
}
.auth-panel::before {
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.48;
  background:radial-gradient(circle at 25% 72%,rgba(23,194,166,.06),transparent 45%)
}
.auth-card {
  z-index:1;position:relative;max-width:480px;gap:23px;
  padding:clamp(24px,3.2vw,39px);
  border-radius:27px;
  border:1px solid rgba(150,184,234,.16);
  background:linear-gradient(160deg,rgba(25,36,57,.96),rgba(12,20,35,.94));
  box-shadow:0 27px 90px -32px rgba(0,2,14,.8),inset 0 1px 0 rgba(255,255,255,.035)
}
.auth-form-eyebrow {display:block;margin-bottom:10px;font-size:10px;letter-spacing:.18em;font-weight:800;color:#63d6c2}
.auth-card h2 {font-size:clamp(26px,2.3vw,33px);letter-spacing:-.055em}
.auth-title-dot {color:#44d5b2}
.auth-card .sub {margin-top:10px;line-height:1.6;font-size:13.5px;color:var(--text-2)}
.auth-tabs {
  background:#0c1525;border-color:rgba(131,169,223,.16);
  border-radius:14px;padding:5px;gap:3px
}
.auth-tabs button {font-size:13.5px;border-radius:10px;min-height:43px;padding:9px 11px}
.auth-tabs button.active {
  color:#fff;background:linear-gradient(140deg,#254dc0,#2166b8);
  box-shadow:0 5px 20px rgba(30,85,200,.25)
}
.auth-form {gap:16px}
.auth-form .field {gap:7px}
.auth-form label {font-weight:700;font-size:12.5px;color:#dbe6f8}
.auth-form .input {
  min-height:49px;padding:12px 14px;border-radius:12px;
  background:#0b1629;border:1px solid rgba(128,161,214,.22);
  color:#f2f7ff;font-size:14px;
  transition:border-color .2s,box-shadow .2s,background .2s
}
.auth-form .input::placeholder {color:#8293ae;opacity:1}
.auth-form .input:hover {border-color:rgba(120,168,248,.4)}
.auth-form .input:focus {outline:none;border-color:#62a2ff;box-shadow:0 0 0 3px rgba(53,124,247,.18)}
.auth-password-row {position:relative}
.auth-password-row .input {padding-right:75px;width:100%}
.auth-password-toggle {
  position:absolute;top:50%;right:7px;transform:translateY(-50%);
  padding:8px 10px;border-radius:8px;font-size:12px;font-weight:800;
  color:#9bc8ff;min-width:58px;min-height:36px
}
.auth-password-toggle:hover {background:rgba(72,135,232,.16);color:#fff}
.auth-form .btn-primary {min-height:51px;font-size:14.5px;border-radius:12px}
.auth-form .hint {color:#adbbd1;font-size:11.5px;line-height:1.55}
.auth-form .error {padding:11px 12px;border-radius:11px;background:rgba(229,72,77,.09);border:1px solid rgba(229,72,77,.24)}
.auth-foot {font-size:11.5px;line-height:1.75;color:#a0acc3}
.auth-foot span {color:#86b7f0}
.auth-mobile-brand {display:none}

/* Auth layout tracks actual content height rather than leaving a giant blank space. */
@media (max-width:1050px) and (min-width:761px) {
  .auth-hero {padding:38px}
  .auth-brand-suffix {display:none}
  .auth-hero-copy h1 {font-size:clamp(36px,3.9vw,48px)}
  .auth-card {padding:29px}
  .auth-point small {font-size:11px}
}
@media (max-width:900px) {
  .auth-wrap {grid-template-columns:1fr;min-height:100dvh}
  .auth-hero {display:none}
  .auth-panel {min-height:100dvh;padding:45px 24px}
  .auth-card {max-width:470px}
  .auth-mobile-brand {display:flex;align-items:center;gap:12px;margin-bottom:3px;color:#f5f9ff}
  .auth-mobile-brand img {width:50px;height:50px;filter:drop-shadow(0 7px 16px rgba(44,160,235,.25))}
  .auth-mobile-brand>span {display:flex;flex-direction:column;font-size:25px;font-weight:800;letter-spacing:-.065em;line-height:1.1}
  .auth-mobile-brand small {margin-top:6px;font-size:9px;font-weight:800;letter-spacing:.17em;color:#a7bfdc}
}
@media (max-width:560px) {
  .auth-wrap {background:#080d18}
  .auth-panel {min-height:100dvh;align-items:flex-start;padding:clamp(28px,7vh,60px) 18px 30px}
  .auth-card {width:100%;max-width:430px;padding:25px 20px 22px;gap:21px;border-radius:22px}
  .auth-mobile-brand {display:flex;align-items:center;gap:12px;margin-bottom:3px}
  .auth-mobile-brand img {width:50px;height:50px;filter:drop-shadow(0 7px 16px rgba(44,160,235,.25))}
  .auth-mobile-brand>span {display:flex;flex-direction:column;font-size:25px;font-weight:800;letter-spacing:-.065em;line-height:1.1}
  .auth-mobile-brand small {margin-top:6px;font-size:9px;font-weight:800;letter-spacing:.17em;color:#a7bfdc}
  .auth-form-eyebrow {font-size:9px}
  .auth-card h2 {font-size:27px}
  .auth-card .sub {font-size:13px}
  .auth-tabs button {min-height:42px}
  .auth-form .input {font-size:16px}
  .auth-foot {font-size:11px}
  .mobile-tabs {padding-inline:5px}
  .mobile-tabs .tab {font-size:10px}
}
@media (max-width:359px) {
  .auth-panel {padding-inline:12px}
  .auth-card {padding-inline:16px}
  .auth-card h2 {font-size:25px}
  .auth-password-toggle {right:4px}
  .mobile-tabs .tab {font-size:9px}
}
@media (min-width:901px) and (max-height:690px) {
  .auth-hero {padding-top:28px;padding-bottom:28px}
  .auth-hero-copy {gap:13px}
  .auth-hero-copy h1 {font-size:clamp(34px,3.9vw,49px)}
  .auth-hero-copy p {font-size:14px;line-height:1.55}
  .auth-point {min-height:48px;padding:6px 9px}
  .auth-point i {width:34px;height:34px}
  .auth-points {gap:7px;margin-top:3px}
  .auth-card {padding:25px;gap:16px}
}
@media (prefers-reduced-motion:reduce) {
  .auth-hero::before {animation:none}
  .auth-tabs button,.auth-form .input {transition:none}
}

/* The authentication experience stays midnight-dark even if a returning user previously chose light mode. */
.auth-card,.auth-card h2,.auth-mobile-brand {color:#f5f9ff}
.auth-tabs button:not(.active) {color:#b8c7de}
.auth-mobile-brand small {color:#a6bfdd}
html[data-theme="light"] .auth-card .sub {color:#b6c5d9}
html[data-theme="light"] .auth-form label {color:#dae8ff}
html[data-theme="light"] .auth-form .hint {color:#b4c3d6}
html[data-theme="light"] .auth-foot {color:#a0b0ca}
html[data-theme="light"] .auth-password-toggle {color:#a7ceff}

/* Brand lockups: GenZ is a single word in every breakpoint and never splits. */
.auth-brand-wordmark,.auth-mobile-wordmark {display:inline-block;white-space:nowrap;letter-spacing:-.055em;line-height:1.12}
.auth-brand-wordmark {font-size:25px;font-weight:800}
.auth-mobile-wordmark {font-size:25px;font-weight:800;white-space:nowrap}
.auth-brand-wordmark em,.auth-mobile-wordmark em {font-style:normal;color:#36e3b7}
.auth-mobile-brand>span {min-width:0}
.auth-form .error:focus {outline:2px solid #ff8a96;outline-offset:3px}
.auth-mobile-brand img {flex:none}
@media(max-width:560px) {
  .auth-mobile-wordmark {font-size:26px}
  .auth-mobile-brand {gap:13px}
}
@media(max-width:350px) {
  .auth-mobile-wordmark {font-size:23px}
  .auth-mobile-brand img {width:44px;height:44px}
}

/* === GenZ Campus Social: approved reference design, responsive signed-in UI === */
:root {
  --genz-midnight:#0a0f1f;
  --genz-electric:#3b82f6;
  --genz-mint:#22d3a7;
  --genz-indigo:#6366f1;
  --genz-slate:#94a3b8;
  --nav-w:215px;
  --main-w:720px;
  --rail-w:286px;
  --accent:#3b82f6;
  --accent-2:#22d3a7;
  --violet:#6366f1;
  --grad-violet:linear-gradient(135deg,#4857de,#813fc8);
  --grad-teal:linear-gradient(135deg,#137bcb,#16bca5);
}
html[data-theme="dark"] {
  --bg:#07101e;
  --bg-soft:#0a1728;
  --surface:#101e32;
  --surface-2:#152740;
  --surface-3:#203553;
  --line:rgba(149,191,248,.12);
  --line-strong:rgba(149,191,248,.25);
  --text:#f5f8ff;
  --text-2:#b5c8e4;
  --text-3:#8ea6c9;
  --glass:rgba(12,25,45,.88);
}
html[data-theme="light"] {
  --accent:#2865df;
  --accent-2:#0d9d88;
  --violet:#585be1;
  --grad-violet:linear-gradient(135deg,#5056e4,#7564d3)
}
.genz-concept-shell {
  max-width:1600px;
  grid-template-columns:minmax(188px,var(--nav-w)) minmax(0,var(--main-w)) minmax(242px,var(--rail-w));
  grid-template-rows:72px minmax(0,1fr);
  column-gap:24px;
  row-gap:0;
  justify-content:center;
  align-items:start;
  padding-inline:clamp(16px,2vw,32px)
}
.genz-concept-shell .side-nav {
  grid-column:1;grid-row:1 / 3;
  padding:20px 5px 18px;
  gap:3px;
  background:linear-gradient(175deg,rgba(33,74,126,.07),transparent 40%);
  border-right:1px solid var(--line);
}
.genz-concept-shell .main-col {grid-column:2;grid-row:2;padding-top:11px;min-height:calc(100dvh - 72px)}
.genz-concept-shell .rail-col {grid-column:3;grid-row:2;padding-top:11px}
.genz-desktop-topbar {
  grid-column:2 / 4;grid-row:1;
  min-width:0;height:72px;
  display:flex;gap:12px;align-items:center;
  position:sticky;top:0;z-index:42;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 95%,transparent);
  backdrop-filter:blur(18px)
}
.genz-top-search {
  flex:1;min-width:0;max-width:540px;
  display:flex;align-items:center;gap:10px;
  height:43px;padding:0 15px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
  transition:border-color .18s,box-shadow .18s
}
.genz-top-search:focus-within {border-color:rgba(80,144,250,.65);box-shadow:0 0 0 3px rgba(58,130,246,.13)}
.genz-top-search>span {color:var(--text-3);display:flex}
.genz-top-search>span svg {width:17px;height:17px}
.genz-top-search input {width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:13px}
.genz-top-search input::placeholder {color:var(--text-3)}
.genz-topbar-spacer {flex:1}
.genz-topbar-icon {width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;color:var(--text-2);background:var(--surface)}
.genz-topbar-icon:hover {color:var(--genz-mint);border-color:rgba(77,166,244,.4)}
.genz-topbar-icon svg {width:19px;height:19px}
.genz-concept-shell .brand {padding:8px 10px 27px}
.genz-concept-shell .nav-item {min-height:43px;font-size:13.5px;gap:12px;border-radius:13px;padding:10px 12px}
.genz-concept-shell .nav-item svg {width:20px;height:20px}
.genz-concept-shell .nav-item.active {
  background:linear-gradient(100deg,rgba(54,110,242,.21),rgba(29,84,151,.07));
  color:#e6f3ff;border-color:rgba(92,153,243,.22)
}
.genz-concept-shell .nav-item.active::before {left:0;top:50%;width:3px;height:24px}
.genz-concept-shell .nav-create {margin:10px 7px 18px;min-height:43px;border-radius:12px;font-size:13.5px}
.genz-concept-shell .nav-user {padding:9px 8px;gap:8px}
.genz-concept-shell .rail {max-height:calc(100dvh - 72px);gap:14px;top:72px}
.genz-concept-shell .rail-card {padding:17px;border-radius:18px;box-shadow:none;border:1px solid var(--line);background:linear-gradient(145deg,rgba(57,112,184,.06),transparent 53%),var(--surface)}
.genz-concept-shell .rail-card h3 {font-size:14px;margin-bottom:13px}
.genz-concept-shell .rail-card h3 svg {color:var(--genz-electric)}
.genz-concept-shell .rail-card:first-child {border-radius:99px}
.genz-concept-shell .rail-col .search-box input {font-size:13px!important}
.genz-rail-see-all {margin-left:auto;color:#72b5ff;font-size:12px;font-weight:700}
.genz-trend-row {display:flex;align-items:center;gap:10px;border-radius:12px;min-height:58px;padding:9px 5px!important;cursor:pointer}
.genz-trend-row:hover {background:var(--hover)}
.genz-trend-number {width:29px;height:29px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(53,117,241,.12);color:#a8c6f5;font-weight:800;font-size:12px}
.genz-trend-meta {flex:1;display:grid;gap:3px;min-width:0}
.genz-trend-meta .tr-tag {font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.genz-trend-meta .tr-count {font-size:11px;color:var(--text-3)}
.genz-trend-row>svg {width:15px;height:15px;color:var(--text-3)}
/* Hero reproduces approved composition with a real licensed campus photo. */
.genz-home {display:grid;gap:15px;min-width:0}
.genz-campus-hero {
  position:relative;isolation:isolate;min-height:282px;
  display:flex;align-items:center;overflow:hidden;
  border:1px solid rgba(83,160,240,.2);border-radius:22px;
  color:#fff;
  background:linear-gradient(92deg,rgba(4,15,35,.92) 2%,rgba(6,25,52,.76) 43%,rgba(7,22,41,.14) 93%),url('/brand/campus-lawn.jpg') center 55% /cover no-repeat,#142641;
  box-shadow:0 19px 45px -22px rgba(2,9,21,.7)
}
.genz-campus-hero::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(3,12,27,.48),transparent 43%)}
.genz-campus-hero-copy {position:relative;padding:clamp(24px,3vw,37px);max-width:515px;z-index:1}
.genz-hero-eyebrow {display:inline-flex;gap:9px;align-items:center;margin-bottom:11px;padding:7px 12px;border:1px solid rgba(202,232,255,.27);border-radius:40px;background:rgba(8,27,50,.58);backdrop-filter:blur(10px);letter-spacing:.125em;font-size:9px;font-weight:800;color:#d6ebff}
.genz-online-dot {display:inline-block;width:7px;height:7px;border-radius:50%;background:#31dfb1;box-shadow:0 0 12px rgba(34,211,167,.65)}
.genz-campus-hero h1 {margin:0;max-width:500px;font-size:clamp(29px,3vw,41px);letter-spacing:-.057em;line-height:1.11;font-weight:850;color:#fff}
.genz-campus-hero h1 em {font-style:normal;background:linear-gradient(92deg,#70dff1,#4ae5ae);-webkit-background-clip:text;background-clip:text;color:transparent}
.genz-campus-hero p {margin:12px 0 20px;max-width:33ch;font-size:13.5px;line-height:1.65;color:#e3efff}
.genz-hero-button {min-height:43px;display:inline-flex;gap:12px;align-items:center;padding:10px 17px;border:0;border-radius:999px;background:linear-gradient(105deg,#257bfa,#24d5b6);color:white;font-weight:800;font-size:13px;box-shadow:0 8px 25px rgba(4,22,43,.5)}
.genz-hero-button:hover {filter:brightness(1.1)}
.genz-hero-button svg {width:16px;height:16px}
.genz-hero-photo-credit {position:absolute;right:11px;bottom:7px;font-size:9px;font-weight:600;color:rgba(238,246,255,.75);text-shadow:0 1px 2px black}
.genz-home-heading,.genz-feed-section-head {display:flex;align-items:end;justify-content:space-between;gap:10px;min-width:0}
.genz-section-kicker {display:block;color:var(--accent-2);font-size:10px;font-weight:850;letter-spacing:.15em;margin:0 0 6px}
.genz-home-heading h2,.genz-feed-section-head h2,.genz-section-head h2 {font-size:18px;margin:0;letter-spacing:-.035em;line-height:1.25}
.genz-home-heading .ph-sub,.genz-feed-section-head>span {font-size:11px;color:var(--text-3)}
.genz-home .composer {border-radius:18px;box-shadow:none;background:linear-gradient(125deg,rgba(62,124,230,.08),transparent 58%),var(--surface);border:1px solid var(--line)}
.genz-home .composer:focus-within {border-color:rgba(55,136,255,.55);box-shadow:0 0 0 3px rgba(58,132,246,.1)}
.genz-home .composer-input {background:var(--surface-2)!important;border-radius:999px!important}
.genz-home .composer-tools .icon-btn.active {background:rgba(44,141,231,.15)}
.genz-shorts-preview {display:grid;gap:14px;padding:15px 16px 17px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(150deg,rgba(40,112,231,.09),transparent 70%),var(--surface)}
.genz-section-head {display:flex;align-items:center;justify-content:space-between;gap:12px}
.genz-section-head h2 {display:flex;align-items:center;gap:8px}
.genz-section-head h2 svg {width:17px;height:17px;color:var(--accent-2)}
.genz-section-head>a {display:flex;gap:6px;align-items:center;color:#6eaefe;font-size:12px;font-weight:800}
.genz-section-head>a svg {width:15px;height:15px}
.genz-shorts-grid {display:flex;gap:11px;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:3px}
.genz-short-tile {position:relative;flex:0 0 clamp(113px,22%,151px);height:180px;min-width:0;overflow:hidden;display:block;border-radius:14px;border:1px solid rgba(112,166,241,.15);background:linear-gradient(145deg,#23466d,#192544 55%,#116c79);scroll-snap-align:start}
.genz-short-tile:nth-child(3n+2){background:linear-gradient(140deg,#303377,#25536c,#086b7a)}
.genz-short-tile:nth-child(3n){background:linear-gradient(140deg,#533278,#1b3f6e,#19597c)}
.genz-short-tile-art {position:absolute;inset:0;display:grid;place-items:center}
.genz-short-tile-art img {width:100%;height:100%;object-fit:cover}
.genz-short-tile-play {display:grid;place-items:center;width:51px;height:51px;border-radius:17px;background:rgba(241,248,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18)}
.genz-short-tile-play svg {width:29px;height:29px;color:#fff}
.genz-short-tile-gradient {position:absolute;inset:40% 0 0;background:linear-gradient(0deg,rgba(5,14,30,.94),transparent)}
.genz-short-tile-caption {position:absolute;bottom:10px;left:10px;right:10px;color:white;line-height:1.3;font-size:11.5px;font-weight:750;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.genz-short-tile-badge {position:absolute;left:8px;top:8px;border-radius:100px;padding:4px 8px;font-size:9px;font-weight:850;letter-spacing:.1em;background:rgba(10,22,43,.7);color:#e0efff}
.genz-short-tile:hover {border-color:#4abdf4;transform:translateY(-2px)}
.genz-short-invite {min-height:112px;display:flex;align-items:center;gap:14px;width:100%;padding:17px;border:1px dashed rgba(79,147,238,.37);border-radius:14px;background:linear-gradient(100deg,rgba(30,91,176,.15),rgba(24,183,157,.09))}
.genz-short-invite-icon {width:53px;height:53px;flex:none;display:grid;place-items:center;background:var(--grad-brand);border-radius:17px;color:#fff}
.genz-short-invite-icon svg {width:28px;height:28px}
.genz-short-invite>span:nth-child(2) {display:grid;gap:4px;flex:1;min-width:0}
.genz-short-invite strong {font-size:13px}
.genz-short-invite small {font-size:11.5px;color:var(--text-2)}
.genz-short-invite .btn {white-space:nowrap;font-size:11.5px}
.genz-shorts-skeleton {width:100%;padding:24px;color:var(--text-3);font-size:12px}
.genz-feed-section-head {margin-top:5px}
.genz-feed-tabs {width:100%;border-radius:13px;padding:5px;gap:4px;background:color-mix(in srgb,var(--surface-2) 80%,transparent);box-shadow:none}
.genz-feed-tabs .feed-tab {min-width:0;flex:1;border-radius:10px;min-height:39px;text-align:center;font-size:12.5px;justify-content:center}
.genz-feed-tabs .feed-tab.active {background:linear-gradient(115deg,#245cba,#217ebc);box-shadow:none}
.genz-home .post-card {border-radius:17px;box-shadow:none;background:var(--surface);border:1px solid var(--line)}
.genz-home .post-card:hover {box-shadow:0 16px 36px -26px rgba(17,77,144,.7);border-color:rgba(86,158,253,.26)}
.genz-home .post-head {padding-top:17px}
.genz-home .post-actions {border-color:var(--line)}
/* Give all other sections the same blue/mint design language. */
.genz-concept-shell .card,.genz-concept-shell .rail-card,.genz-concept-shell .chat-layout {box-shadow:none}
.genz-concept-shell .card {border-color:var(--line);background:var(--surface)}
.genz-concept-shell .card:hover {border-color:rgba(76,140,237,.32)}
.genz-concept-shell .btn-primary,.genz-concept-shell .nav-create {background:linear-gradient(110deg,#2878f6,#19cba8)}
.genz-concept-shell .input:focus,.genz-concept-shell textarea.input:focus {border-color:#489cff;box-shadow:0 0 0 3px rgba(73,146,252,.16)}
.genz-concept-shell .avatar {border:1px solid rgba(130,183,247,.2)}
.genz-concept-shell .post-card .like.liked {color:#fa6987}
@media(max-width:1320px) {
  .genz-concept-shell {grid-template-columns:200px minmax(0,1fr) 254px;gap:18px;padding-inline:16px}
}
@media(max-width:1180px) {
  .genz-concept-shell {grid-template-columns:204px minmax(0,780px);justify-content:center}
  .genz-concept-shell.chat-wide {grid-template-columns:204px minmax(0,1fr)}
  .genz-concept-shell .rail-col {display:none}
  .genz-desktop-topbar {grid-column:2}
}
@media(max-width:980px) {
  .genz-concept-shell {grid-template-columns:78px minmax(0,780px);padding:0 13px;gap:14px}
  .genz-concept-shell.chat-wide {grid-template-columns:78px minmax(0,1fr)}
  .genz-concept-shell .side-nav {align-items:center;padding-inline:5px}
  .genz-concept-shell .side-nav .brand-name,.genz-concept-shell .side-nav .nav-item span,.genz-concept-shell .side-nav .nav-create span,.genz-concept-shell .side-nav .nav-user .nu-meta {display:none}
  .genz-concept-shell .side-nav .nav-item {justify-content:center;padding:12px;width:50px}
  .genz-concept-shell .side-nav .nav-create {padding:12px;width:50px;margin-inline:0}
  .genz-concept-shell .side-nav .brand {justify-content:center;padding:8px 0 24px}
}
@media(max-width:900px){
  .genz-concept-shell,.genz-concept-shell.chat-wide {display:block;padding:0}
  .genz-concept-shell .side-nav,.genz-desktop-topbar {display:none}
  .genz-concept-shell .main-col {padding:14px 14px 96px;min-height:calc(100dvh - 125px)}
  .genz-concept-shell .rail-col {display:none}
  .genz-campus-hero {min-height:250px}
  .genz-campus-hero-copy {padding:26px}
  .genz-campus-hero h1 {font-size:35px}
}
@media(max-width:560px){
  .genz-concept-shell .main-col {padding:12px 12px 92px}
  .genz-home {gap:14px}
  .genz-campus-hero {min-height:252px;border-radius:18px;background-position:60% center}
  .genz-campus-hero-copy {padding:19px 19px 22px}
  .genz-campus-hero h1 {font-size:clamp(29px,8vw,35px)}
  .genz-hero-eyebrow {font-size:8px;margin-bottom:10px}
  .genz-campus-hero p {font-size:12px;max-width:28ch;margin:11px 0 15px}
  .genz-hero-photo-credit {font-size:8px}
  .genz-home-heading h2,.genz-feed-section-head h2 {font-size:17px}
  .genz-home-heading .ph-sub {display:none}
  .genz-shorts-preview {padding:13px;border-radius:16px}
  .genz-short-invite {flex-wrap:wrap;padding:14px;gap:10px}
  .genz-short-invite .btn {width:100%;justify-content:center}
  .genz-short-tile {flex-basis:126px;height:169px}
  .genz-feed-section-head>span {font-size:10px}
  .genz-feed-tabs .feed-tab {font-size:11px;gap:3px;padding-inline:5px}
}
@media(prefers-reduced-motion:reduce){
  .genz-short-tile:hover {transform:none}
  .genz-top-search {transition:none}
}

/* Approved GenZ reference refinement — functional feed and mobile experience. */
.genz-concept-shell {--nav-w:205px;--main-w:720px;--rail-w:292px}
.genz-concept-shell .rail {overflow-x:hidden;scrollbar-width:thin}
.genz-topbar-avatar {border-radius:999px;width:42px;height:42px;padding:3px;border-color:rgba(98,161,245,.35);background:linear-gradient(145deg,rgba(55,109,221,.22),rgba(17,198,163,.18))}
.genz-topbar-avatar .avatar {border:2px solid rgba(249,252,255,.12);flex:none}
.genz-rail-shorts {position:relative;overflow:hidden;padding:15px 12px!important}
.genz-rail-shorts h3 {display:flex;align-items:center;gap:7px;margin-bottom:12px!important;white-space:nowrap}
.genz-rail-shorts h3 .genz-rail-see-all {font-size:11px}
.genz-rail-short-grid {min-height:165px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(106px,calc(50% - 5px));gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:6px}
.genz-rail-short {position:relative;display:block;min-width:0;min-height:156px;height:156px;border:1px solid rgba(144,189,247,.22);border-radius:12px;overflow:hidden;background:linear-gradient(145deg,#265a7d,#213467 49%,#135969);scroll-snap-align:start}
.genz-rail-short:nth-child(3n+2) {background:linear-gradient(140deg,#50418c,#304877,#17877b)}
.genz-rail-short:nth-child(3n+3) {background:linear-gradient(160deg,#562c73,#194773,#245e83)}
.genz-rail-short-media {position:absolute;inset:0;display:grid;place-items:center}
.genz-rail-short-media img {width:100%;height:100%;object-fit:cover}
.genz-rail-short-play {display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.genz-rail-short-play svg {width:22px;height:22px}
.genz-rail-short::after {content:"";position:absolute;inset:40% 0 0;background:linear-gradient(0deg,rgba(3,12,27,.94),transparent);pointer-events:none}
.genz-rail-short-caption {position:absolute;z-index:1;bottom:9px;left:8px;right:8px;color:#fff;font-weight:750;line-height:1.35;font-size:11px;max-height:3em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.genz-rail-short:hover,.genz-rail-short:focus-visible {border-color:#51c4ff;box-shadow:0 12px 25px -14px rgba(41,143,231,.6)}
.genz-rail-shorts-empty {grid-column:1 / -1;min-height:144px;padding:12px;display:grid;justify-items:center;align-content:center;gap:8px;text-align:center;border:1px dashed rgba(86,151,245,.35);border-radius:13px;background:linear-gradient(135deg,rgba(53,126,237,.1),rgba(20,207,161,.06))}
.genz-rail-shorts-empty>span {color:#58bcfa}
.genz-rail-shorts-empty>span svg {width:27px;height:27px}
.genz-rail-shorts-empty p {font-size:11px;color:var(--text-2);max-width:20ch;line-height:1.4}
.genz-rail-shorts-empty a,.genz-rail-short-error {color:#76bfff;font-size:11px;font-weight:800;display:inline-flex;gap:5px;align-items:center}
.genz-rail-shorts-empty a svg,.genz-rail-short-error svg {width:13px;height:13px}
.genz-short-loading {padding:35px 10px;color:var(--text-3);font-size:12px}
.genz-concept-shell .rail-card#rail-trends {background:linear-gradient(145deg,rgba(51,84,159,.10),rgba(14,30,56,.02)),var(--surface)}
.genz-concept-shell .rail-card#rail-suggested {background:var(--surface)}
.genz-concept-shell .brand {margin-bottom:5px}
.genz-concept-shell .nav-user {border-radius:14px}
.genz-concept-shell .nav-item.active {box-shadow:inset 0 0 0 1px rgba(75,138,245,.1)}
.genz-concept-shell .genz-home .genz-campus-hero {box-shadow:0 18px 38px -24px rgba(4,8,30,.8),inset 0 1px 0 rgba(255,255,255,.16)}
.genz-concept-shell .genz-home .genz-campus-hero::before {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(7,23,44,.12),rgba(125,188,244,.05));z-index:-1}
.genz-concept-shell .genz-home .genz-home-heading {margin-top:3px}
.genz-concept-shell .genz-home .composer {border-radius:18px}
.genz-concept-shell .genz-feed-tabs .feed-tab.active {background:linear-gradient(120deg,#245ad1,#168eaa)}
@media(min-width:1181px){
  .genz-concept-shell .main-col .genz-shorts-preview {display:none}
  .genz-concept-shell .genz-home {gap:14px}
  .genz-concept-shell .genz-home .genz-campus-hero {min-height:282px}
}
@media(max-width:1180px){
  .genz-rail-shorts {display:none}
}
/* Five-slot navigation mirrors the approved mobile concept while secondary
   real sections stay reachable from the accessible More panel. */
.mobile-tabs .genz-mobile-create {display:grid;justify-items:center;align-content:center;gap:2px;min-height:52px}
.mobile-tabs .genz-mobile-create .icn {display:grid;place-items:center;width:43px;height:39px;border-radius:14px;background:linear-gradient(125deg,#2378f9,#33aafc 48%,#26d2aa);box-shadow:0 5px 18px rgba(40,115,231,.3);color:#fff}
.mobile-tabs .genz-mobile-create .icn svg {width:22px!important;height:22px!important;fill:none!important;background:none!important;padding:0!important;box-shadow:none!important}
.mobile-tabs .genz-mobile-create span:last-child {font-size:10px;color:var(--text-2)}
.genz-mobile-more[hidden] {display:none!important}
.genz-mobile-more {position:fixed;inset:0;z-index:1100;display:none}
.genz-more-backdrop {position:absolute;inset:0;background:rgba(0,9,28,.66);border:0;width:100%;height:100%;cursor:default}
.genz-more-sheet {position:absolute;right:12px;left:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px));margin:0 auto;max-width:480px;padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;border:1px solid rgba(116,174,247,.29);border-radius:22px;background:linear-gradient(160deg,#142945,#0c182b 85%);box-shadow:0 25px 80px rgba(0,0,0,.54)}
.genz-more-title {display:flex;grid-column:1 / -1;justify-content:space-between;align-items:center;padding:2px 4px 7px;color:#f4faff}
.genz-more-title strong {font-size:16px;font-weight:800;letter-spacing:-.025em}
.genz-more-sheet>a {display:flex;align-items:center;gap:10px;min-width:0;padding:13px 10px;border:1px solid rgba(147,192,248,.12);border-radius:14px;background:rgba(77,124,205,.08);color:#e3edff;font-size:12px;font-weight:700}
.genz-more-sheet>a .icn {color:#55bcf9}
.genz-more-sheet>a .icn svg {width:18px;height:18px}
.genz-more-sheet>a:focus-visible,.genz-more-sheet>a:hover {background:rgba(68,136,244,.20);border-color:rgba(105,181,247,.35)}
@media(max-width:900px){
  .genz-mobile-more {display:block}
  .mobile-header {gap:6px}
  .mobile-header .genz-mobile-menu-button {display:grid;place-items:center}
  .mobile-tabs {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px 8px calc(7px + env(safe-area-inset-bottom,0px))}
  .mobile-tabs .tab {min-width:0;min-height:52px}
  .mobile-tabs .genz-mobile-create {padding-top:2px}
}
@media(max-width:420px){
  .genz-more-sheet {left:7px;right:7px;padding:13px;gap:7px}
  .genz-more-sheet>a {padding:12px 8px;gap:7px;font-size:11.5px}
  .mobile-tabs {padding-left:4px;padding-right:4px}
}
/* The legacy app.css breakpoint hid the entire rail below 1380px.
   Restore it when the GenZ three-column grid has enough room. */
@media(min-width:1181px) and (max-width:1380px){
  .genz-concept-shell .rail-col {display:block}
}

/* Accessible profile link: its own readable text is its accessible name. */
.genz-visually-hidden {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Visual-audit refinements: empty Shorts panel fills its card; failed data
   requests show useful options instead of spinning indefinitely. */
.genz-rail-short-grid.is-empty {display:block;min-height:144px;overflow:visible;padding-bottom:0}
.genz-rail-short-grid.is-empty .genz-rail-shorts-empty {width:100%;min-height:156px}
.genz-rail-shorts-empty>span {display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(97,178,250,.26);border-radius:15px;background:linear-gradient(140deg,rgba(40,112,235,.28),rgba(24,205,163,.15))}
.genz-rail-shorts-empty>span svg {width:24px;height:24px}
.genz-rail-fallback {font-size:12px;line-height:1.55;color:var(--text-2)}
.genz-rail-fallback-link {margin-top:11px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:#83bfff}
.genz-rail-fallback-link svg {width:13px;height:13px}
.genz-rail-fallback-link:hover {color:#40deb3}
/* Legacy navigation appears only up to 760px; the new GenZ layout changes
   to mobile at 900px, so the sticky header must follow that breakpoint. */
@media(min-width:761px) and (max-width:900px){
  .mobile-header {display:flex}
}
/* Accessible password recovery inside the GenZ blue/mint auth card. */
.auth-recover-link {border:0;background:transparent;color:#7fbcff;cursor:pointer;font:inherit;font-size:12px;font-weight:750;padding:9px 2px;text-align:left}
.auth-recover-link:hover {color:#50e4ba;text-decoration:underline}
.auth-recover-link:focus-visible {outline:2px solid #55e4c4;outline-offset:3px;border-radius:4px}
.auth-recovery-note {color:var(--text-2);font-size:13px;line-height:1.65;margin:4px 0 16px}
.auth-recovery-success {padding:14px;border:1px solid rgba(41,196,163,.35);border-radius:12px;background:rgba(36,151,125,.10);color:#9af5de;font-size:13px;line-height:1.55}
.auth-tabs[hidden] {display:none!important}

/* Accessible, private post-report dialog. */
.genz-report-dialog {width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 36px);overflow-y:auto;background:#10192c;color:#edf6ff;border:1px solid rgba(112,170,231,.35);border-radius:18px;padding:22px;box-shadow:0 25px 85px rgba(0,0,0,.52)}
.genz-report-dialog::backdrop {background:rgba(3,7,18,.78);backdrop-filter:blur(4px)}
.genz-report-form {display:grid;gap:14px}
.genz-report-form h3 {font-size:21px;font-weight:850;margin:0}
.genz-report-form p {font-size:13px;line-height:1.6;color:#a6b8d1;margin:0}
.genz-report-form label {display:grid;gap:6px;color:#d1e0f5;font-size:13px;font-weight:700}
.genz-report-form select,.genz-report-form textarea {width:100%;min-width:0;color:#eef8ff;background:#17253b;border:1px solid #3d526e;border-radius:10px;padding:10px}
.genz-report-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:3px}
.genz-report-button {min-width:34px;justify-content:center}

/* Staging-only signed-in UI demo: never mistaken for a real user session. */
.genz-demo-banner {position:sticky;top:0;z-index:1800;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 14px;text-align:center;background:linear-gradient(100deg,#1542ae,#176da2 55%,#116b67);color:#f5fbff;border-bottom:1px solid rgba(255,255,255,.25);font-size:12px;line-height:1.4;box-shadow:0 4px 18px rgba(1,16,38,.3)}
.genz-demo-banner strong {font-weight:900;color:#fff}
.genz-demo-banner a {font-weight:850;color:#bdffea;text-decoration:underline;text-underline-offset:3px}
.genz-demo-banner a:focus-visible {outline:2px solid white;outline-offset:3px}
@media (max-width:680px) {.genz-demo-banner{font-size:11px;padding:7px 8px}}

/* Accessible Settings danger action: readable in both light and dark themes. */
.genz-concept-shell .settings-group .btn-danger-soft {background:rgba(182,48,67,.15);color:#ffc5cf;border:1px solid rgba(255,137,154,.55)}
.genz-concept-shell .settings-group .btn-danger-soft:disabled {opacity:.67;cursor:not-allowed}
.genz-concept-shell .settings-group .switch:focus-visible {outline:3px solid #6debd8;outline-offset:4px}
.genz-concept-shell .settings-group input[type="range"]:focus-visible {outline:3px solid #6debd8;outline-offset:3px}

.genz-concept-shell .genz-danger-title {color:#ffb1bc}
[data-theme="light"] .genz-concept-shell .genz-danger-title {color:#8e1731}
[data-theme="light"] .genz-concept-shell .settings-group .btn-danger-soft {background:#fff3f4;color:#901e36;border-color:#bc536a}

/* v12: native keyboard/touch actions and honest notification states. */
button.trend-row {width:100%;text-align:left;color:inherit;font:inherit;min-height:40px}
button.trend-row:focus-visible,a.course-card:focus-visible,a.uc-meta:focus-visible,
button.notif-row:focus-visible,button.pf-avatar:focus-visible {outline:3px solid #40d9b8;outline-offset:2px}
a.course-card {color:var(--text);text-decoration:none}
a.uc-meta {display:block;color:inherit;text-decoration:none}
a.uc-meta:hover .uc-name {text-decoration:underline;text-underline-offset:3px}
button.notif-row {width:100%;text-align:left;color:var(--text);font:inherit}
.notif-row:not(button) {cursor:default}
.notif-row .notif-body {display:block;min-width:0}
.notif-row .nb-title,.notif-row .nb-text,.notif-row .nb-time {display:block}
button.pf-avatar {display:block;cursor:pointer;padding:0;background:transparent;border:0}
button.pf-avatar:hover .avatar {box-shadow:0 0 0 3px rgba(34,211,167,.32)}