:root {
  color-scheme: dark;
  --text: #fbf6ff;
  --muted: #d2c2df;
  --line: rgba(239, 216, 255, .2);
  --panel: rgba(29, 15, 45, .82);
  --purple: #b47bd7;
  --danger: #ffaaa9;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #170b26; }
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: #170b26 url('/static/images/purple-atmosphere-bg.png') center / cover fixed no-repeat;
  font: 15px/1.55 "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(112deg, rgba(13, 7, 25, .7), rgba(25, 9, 40, .42) 58%, rgba(13, 6, 25, .55));
}

.site-header {
  position: relative;
  z-index: 1;
  height: 68px;
  display: flex;
  align-items: center;
  padding: 0 clamp(20px, 5vw, 64px);
  border-bottom: 1px solid rgba(239, 216, 255, .16);
  background: rgba(20, 10, 33, .48);
  backdrop-filter: blur(16px);
}
.admin-diamond {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .02em;
}
.admin-diamond::before {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(247, 225, 255, .45);
  border-radius: 12px;
  background: linear-gradient(145deg, #b784df, #74449b);
  box-shadow: inset 1px 1px rgba(255,255,255,.3), 0 7px 20px rgba(11,4,21,.3);
  content: "d";
  font-size: 18px;
  font-weight: 800;
}
.admin-diamond:hover { color: #f0d2ff; }

body > main {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(36px, 7vh, 76px) 0 72px;
}
small {
  display: block;
  color: #dfc0f3;
  letter-spacing: .15em;
  font-weight: 750;
  font-size: 10px;
  margin-bottom: 13px;
  text-transform: uppercase;
}
h1 {
  max-width: 760px;
  font-size: clamp(34px, 5.3vw, 56px);
  line-height: 1.06;
  letter-spacing: -.045em;
  margin: 0 0 13px;
}
h1 em { color: #e5c9f6; font-style: normal; }
h2 { font-size: 20px; letter-spacing: -.02em; margin: 0 0 18px; }
p { color: var(--muted); }
.head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}
.head > div:first-child { max-width: 760px; }
.head p { max-width: 720px; margin: 0; }
.head-actions { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.btn, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  border: 1px solid rgba(239, 216, 255, .24);
  border-radius: 11px;
  background: linear-gradient(135deg, #b27bd5, #8154a3);
  color: white;
  padding: 10px 16px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(11,4,20,.22), inset 0 1px rgba(255,255,255,.18);
}
.btn:hover, button:hover { filter: brightness(1.1); }
.btn.ghost {
  background: rgba(34, 18, 51, .68);
  color: #f8edff;
  border-color: rgba(239, 216, 255, .25);
}
.panel {
  margin: 18px 0;
  padding: clamp(19px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(35, 18, 52, .88), rgba(22, 12, 36, .84));
  box-shadow: 0 18px 45px rgba(5,2,13,.23), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.narrow { width: min(520px, 100%); margin: 4vh auto 30px; }
.narrow h1 { font-size: clamp(34px, 5vw, 46px); }
.narrow form { margin-top: 25px; }
label {
  display: grid;
  gap: 7px;
  color: #f2e5fc;
  font-size: 13px;
  font-weight: 700;
}
input, select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid rgba(237, 213, 255, .25);
  border-radius: 10px;
  background: rgba(15, 8, 26, .66);
  color: #fff;
  font: inherit;
}
input::placeholder { color: #b9a8c7; }
input:focus, select:focus { outline: 2px solid #d6a8f3; outline-offset: 2px; }
form label { margin-bottom: 14px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.grid > div { align-self: end; }
.grid > div button { margin-bottom: 14px; }
.notice {
  padding: 14px 16px;
  border-radius: 12px;
  margin: 14px 0;
  color: #fff3f3;
  background: rgba(119, 36, 65, .72);
  border: 1px solid rgba(255, 179, 197, .3);
}
.notice.success { background: rgba(35, 95, 76, .72); border-color: rgba(163, 245, 207, .32); }
.code { font: 800 25px ui-monospace, Consolas, monospace; letter-spacing: .1em; color: white; margin: 10px 0; }
.scroll { overflow: auto; border-radius: 10px; }
table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: 13px; }
td, th { text-align: left; padding: 11px; border-bottom: 1px solid rgba(239,216,255,.14); vertical-align: top; }
th { color: #d9c2e9; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
td { color: #f3eafa; }
tr:last-child td { border-bottom: 0; }
.link { min-height: 0; background: none; border: 0; box-shadow: none; color: #e8c5ff; padding: 3px; font: inherit; font-weight: 700; }
.link.danger { color: var(--danger); }
fieldset { margin: 0 0 16px; padding: 17px; border: 1px solid rgba(239,216,255,.18); border-radius: 14px; }
legend { color: #e6c8f8; font-weight: 750; padding: 0 7px; }
code { color: #f1d6ff; }
.source-connect-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 14px; }
.source-connect-form button { justify-self: start; }
ul { color: var(--muted); }
.hero { padding: 30px 0; }
.hero p, footer { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cards article { border: 1px solid var(--line); border-radius: 16px; padding: 23px; background: var(--panel); }
.cards p { margin-bottom: 0; }
footer { text-align: center; border-top: 1px solid var(--line); padding: 23px; font-size: 12px; }

@media (max-width: 720px) {
  body > main { width: min(100% - 28px, 1180px); padding-top: 32px; }
  .head { flex-direction: column; }
  .head-actions { width: 100%; }
  .grid, .source-connect-form, .cards { grid-template-columns: 1fr; }
}

/* ∞43² logo in the shared header (replaces the old "d" square and ◇ diamond) */
.site-header{justify-content:space-between}
.site-header .logo{display:inline-flex;align-items:center;text-decoration:none}
.site-header .logo svg{width:96px;height:auto;overflow:visible;filter:drop-shadow(0 6px 7px rgba(8,2,16,.55)) drop-shadow(0 0 12px rgba(200,140,255,.25))}
.admin-link{font-size:12.5px;color:rgba(247,225,255,.7);text-decoration:none;letter-spacing:.02em}
.admin-link:hover{color:#f0d2ff}

.connect-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.connect-card{padding:16px;border-radius:14px;border:1px solid rgba(239,216,255,.18);background:rgba(255,255,255,.04)}
.connect-card h3{margin:0 0 6px;font-size:16px}
.connect-card label{display:block;margin:8px 0}
.connect-status .ok{color:#b9f5cf}.connect-status .err{color:#ffc9a8}

/* Shared depth with the library pages: the atmosphere behind every standalone page (Watch Party, Personal, Submit,
   Admin) is softly blurred and dimmed so panels read as floating glass, like the library's backdrop. */
body::before {
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
body > main .panel, body > main .head {
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 24px 70px rgba(6, 2, 14, .45);
  border-radius: 24px;
}
body > main { animation: pageIn .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes pageIn { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body > main { animation: none; } }

/* audit D5: the same controls and arrival as the library — rounded dropdowns with their own chevron, a switch
   instead of a bare square checkbox, the EN/ES pill, and a short settle when a page opens */
.header-tools { display: flex; align-items: center; gap: 14px; }
.lang-switch { display: inline-flex; height: 36px; padding: 3px; border-radius: 99px; border: 1px solid rgba(237, 213, 255, .25); background: rgba(15, 8, 26, .5); }
.lang-switch button { border: 0; background: transparent; padding: 0 12px; border-radius: 99px; font: inherit; font-weight: 800; font-size: 12px; letter-spacing: .06em; color: #cbb8db; cursor: pointer; min-height: 0; }
.lang-switch button[aria-pressed=true] { background: #fff; color: #2a0f3c; }
select { appearance: none; -webkit-appearance: none; border-radius: 14px; padding-right: 42px; cursor: pointer;
  background: rgba(15, 8, 26, .66) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e9d6ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
select option, select optgroup { background: #1b0f2b; color: #fff; }
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 42px; min-width: 42px; height: 24px; min-height: 0; padding: 0; margin: 0 10px 0 0; border-radius: 99px;
  border: 1px solid rgba(237, 213, 255, .3); background: rgba(15, 8, 26, .66); position: relative; vertical-align: middle; cursor: pointer; transition: background .25s cubic-bezier(.22, 1, .36, 1); }
input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #cbb8db; transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), background .25s; }
input[type=checkbox]:checked { background: #8f5cff; border-color: #b892ff; }
input[type=checkbox]:checked::after { transform: translateX(18px); background: #fff; }
label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; font-weight: 600; }
main { animation: page-arrive .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes page-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main { animation: none; } input[type=checkbox], input[type=checkbox]::after { transition: none; } }
@media (max-width: 560px) { .header-tools { gap: 8px; } .header-tools .admin-link { font-size: 12px; } }
.site-header .logo .logo-img { display: block; width: 150px; height: auto; filter: drop-shadow(0 6px 8px rgba(8, 2, 16, .45)); }
@media (max-width: 560px) { .site-header .logo .logo-img { width: 118px; } }

/* Access control center opening: the woman-in-water scene (the active dashboard hero) behind the heading and actions;
   her face at the centre of the panel, a dark wash at the lower left keeps the heading and buttons readable */
.admin-open{position:relative;overflow:hidden;border-radius:22px;margin:0 0 22px;min-height:clamp(300px,34vw,440px);display:flex;align-items:flex-end;background:#0b0809;isolation:isolate}
.admin-open .admin-scene{position:absolute;left:50%;top:50%;height:135%;width:auto;max-width:none;transform:translate(calc(-1 * var(--fx,73%)),calc(-1 * var(--fy,72%)));z-index:-2;filter:brightness(.9)}
.admin-open::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,6,8,.92) 0%,rgba(8,6,8,.55) 34%,transparent 62%),linear-gradient(90deg,rgba(8,6,8,.7),transparent 46%),radial-gradient(ellipse 60% 50% at 0% 100%,rgba(110,50,180,.35),transparent 70%)}
.admin-open .head{position:relative;width:100%;margin:0;background:none!important;border:0!important;box-shadow:none!important;padding:clamp(18px,3vw,36px)}
.admin-portrait-setting{display:flex;gap:14px;align-items:flex-start;margin:6px 0 16px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:14px}
.admin-portrait-setting img{width:120px;height:80px;object-fit:cover;object-position:right center;border-radius:10px;flex:none}
.admin-portrait-setting small{display:block;opacity:.8;margin:2px 0 8px}
/* wide enough that both sides of the panel stay covered with her face on the panel's centre line */
.admin-open .admin-scene{height:auto!important;width:max(calc(100% * .5 / (1 - var(--fxn,.73)) + 4px),calc(100% * .5 / var(--fxn,.73) + 4px));min-height:100%;object-fit:cover}

/* Access control center: both images — the lady in the water on the left, the purple portrait on the right, melting together */
.admin-open{min-height:clamp(320px,36vw,480px)!important}
.admin-open .admin-scene{left:0!important;top:0!important;transform:none!important;width:62%!important;height:100%!important;min-height:0!important;object-fit:cover;object-position:var(--fx,50%) 45%;
  -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,#000 70%,transparent 100%)}
.admin-open .admin-portrait-scene{position:absolute;right:0;top:0;height:100%;width:52%;object-fit:cover;object-position:60% 25%;z-index:-2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%);mask-image:linear-gradient(90deg,transparent 0,#000 32%)}
@media (max-width:760px){.admin-open .admin-scene{width:100%!important}.admin-open .admin-portrait-scene{width:60%;opacity:.55}}

/* ---- Logo: the same size as inside the app (Oct 27) ---- */
.site-header .logo .logo-img { width: 112px; }
@media (max-width: 560px) { .site-header .logo .logo-img { width: 84px; } }

/* ---- Access page: two clear choices on arrival — "I have a code" / "Request a code" (Oct 27) ---- */
.access-choice { margin-top: 3vh; }
.access-kicker { display: block; letter-spacing: .22em; font-weight: 700; font-size: 12px; color: #d9b8ff; }
.access-title { margin: 6px 0 18px; font-size: clamp(30px, 8vw, 44px); line-height: 1.05; }
.access-radio { position: absolute; opacity: 0; pointer-events: none; }
.access-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.access-tab { display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-radius: 16px; cursor: pointer;
  border: 1px solid rgba(239, 216, 255, .22); background: rgba(34, 18, 51, .6); color: #f8edff; transition: background .2s, border-color .2s, transform .2s; }
.access-tab:hover { transform: translateY(-1px); border-color: rgba(239, 216, 255, .4); }
.access-tab b { display: block; font-size: 16px; line-height: 1.2; }
.access-tab small { display: block; font-size: 12px; color: #cbb6e4; margin-top: 3px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.access-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 18px; background: rgba(255, 255, 255, .08); }
#tab-enter:checked ~ .access-tabs label[for="tab-enter"],
#tab-request:checked ~ .access-tabs label[for="tab-request"] { background: linear-gradient(135deg, #b27bd5, #8154a3); border-color: rgba(255, 255, 255, .35); box-shadow: 0 10px 26px rgba(11, 4, 20, .35), inset 0 1px rgba(255, 255, 255, .22); }
#tab-enter:checked ~ .access-tabs label[for="tab-enter"] small,
#tab-request:checked ~ .access-tabs label[for="tab-request"] small { color: #f3e6ff; }
#tab-enter:focus-visible ~ .access-tabs label[for="tab-enter"], #tab-request:focus-visible ~ .access-tabs label[for="tab-request"] { outline: 2px solid #f6d38b; outline-offset: 2px; }
.access-pane { display: none; margin-top: 14px; }
#tab-enter:checked ~ .pane-enter, #tab-request:checked ~ .pane-request { display: block; }
.access-note { margin: 0 0 12px; color: #d7c6ea; line-height: 1.5; }
.access-go { width: 100%; padding: 13px 16px; font-size: 16px; margin-top: 6px; }
@media (max-width: 380px) { .access-tab { flex-direction: column; text-align: center; } }

/* ---- Access page: one playful "Request your code" card (Oct 27) ---- */
.req-wrap { display: grid; place-items: center; min-height: 64vh; padding: 3vh 0 6vh; }
.req-card { position: relative; overflow: hidden; width: min(440px, 100%); padding: 34px 26px 28px; text-align: center; border-radius: 28px;
  border: 1px solid rgba(239, 216, 255, .22); background: linear-gradient(160deg, rgba(52, 26, 78, .92), rgba(22, 12, 36, .92));
  box-shadow: 0 26px 60px rgba(5, 2, 13, .45), inset 0 1px rgba(255, 255, 255, .1); }
.req-orb { position: absolute; width: 260px; height: 260px; top: -120px; right: -90px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 40%, rgba(246, 211, 139, .45), rgba(178, 123, 213, .25) 45%, transparent 70%); animation: reqFloat 7s ease-in-out infinite alternate; }
.req-icon { position: relative; display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 24px; font-size: 36px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 12px 28px rgba(10, 4, 20, .35); animation: reqBob 3.2s ease-in-out infinite; }
.req-kicker { position: relative; display: block; margin-top: 18px; letter-spacing: .24em; font-size: 11px; font-weight: 700; color: #d9b8ff; }
.req-title { position: relative; margin: 0 0 22px; font-size: clamp(28px, 7.5vw, 38px); line-height: 1.08; }
.req-sub { position: relative; margin: 0 auto 20px; max-width: 32ch; color: #dccbef; line-height: 1.5; }
.req-hint { position: relative; margin: -6px 0 18px; color: #b9a6d2; font-size: 14px; }
.req-form { position: relative; display: grid; gap: 12px; text-align: left; }
.req-form input { width: 100%; box-sizing: border-box; padding: 15px 16px; border-radius: 16px; font: inherit; font-size: 16px; color: #fff;
  background: rgba(10, 5, 18, .55); border: 1px solid rgba(239, 216, 255, .2); outline: none; transition: border-color .2s, box-shadow .2s; }
.req-form input::placeholder { color: #a996c2; }
.req-form input:focus { border-color: #d9b8ff; box-shadow: 0 0 0 4px rgba(178, 123, 213, .25); }
.req-btn { margin-top: 4px; width: 100%; padding: 16px 18px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 17px; font-weight: 800;
  color: #1a1012; background: linear-gradient(110deg, #f6d38b, #f0b35e 45%, #f6d38b 60%, #e9a5d8); background-size: 220% 100%;
  box-shadow: 0 14px 30px rgba(240, 179, 94, .28), inset 0 1px rgba(255, 255, 255, .5); transition: transform .2s, background-position .6s; }
.req-btn:hover, .req-btn:focus-visible { transform: translateY(-2px); background-position: 100% 0; }
.req-btn:active { transform: translateY(0) scale(.98); }
.req-btn span { display: inline-block; margin-left: 8px; transition: transform .2s; }
.req-btn:hover span { transform: translateX(4px); }
.req-again { position: relative; display: inline-block; margin-top: 4px; color: #e7cfff; font-weight: 700; }
@keyframes reqBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes reqFloat { from { transform: translate(0, 0); } to { transform: translate(-30px, 24px); } }
@media (prefers-reduced-motion: reduce) { .req-icon, .req-orb { animation: none; } }

/* ---- Access card, refined (Oct 27): one minimal card, two faces, a small capsule to switch ---- */
.req-wrap { min-height: 66vh; padding: 6vh 0 8vh; }
.req-card { width: min(400px, 100%); padding: 40px 30px 30px; border-radius: 26px; text-align: center;
  background: linear-gradient(180deg, rgba(40, 22, 60, .78), rgba(20, 11, 32, .82)); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 30px 70px rgba(4, 1, 10, .45); }
.req-title { margin: 0 0 26px; font-size: 26px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: #f7f1ff; }
.req-sub { margin: -14px auto 26px; color: #cbbbe0; font-size: 15px; line-height: 1.5; max-width: 30ch; }
.req-form { gap: 12px; }
.req-form input { padding: 15px 18px; border-radius: 14px; font-size: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1); }
.req-form input::placeholder { color: #9d8bb6; }
.req-form input:focus { border-color: rgba(246, 211, 139, .7); box-shadow: 0 0 0 3px rgba(246, 211, 139, .15); }
.req-code { text-transform: uppercase; letter-spacing: .12em; text-align: center; font-variant-numeric: tabular-nums; }
.req-code::placeholder { letter-spacing: .12em; }
.req-btn { margin-top: 8px; padding: 15px 18px; border-radius: 14px; font-size: 16px; font-weight: 700; letter-spacing: .01em;
  background: #f2c879; background-size: auto; color: #1d130a; box-shadow: 0 10px 24px rgba(242, 200, 121, .22); }
.req-btn:hover, .req-btn:focus-visible { transform: translateY(-1px); background: #f6d38b; }
.req-pill { display: inline-block; margin-top: 22px; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600;
  color: #e9dcfb; text-decoration: none; border: 1px solid rgba(255, 255, 255, .16); background: transparent; transition: background .2s, border-color .2s; }
.req-pill:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); }
.req-radio { position: absolute; opacity: 0; pointer-events: none; }
.req-face { display: none; }
#face-request:checked ~ .req-card .face-request, #face-code:checked ~ .req-card .face-code { display: block; animation: reqFade .25s ease; }
#face-request:focus-visible ~ .req-card .face-code .req-pill, #face-code:focus-visible ~ .req-card .face-request .req-pill { outline: 2px solid #f6d38b; outline-offset: 2px; }
@keyframes reqFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .req-face { animation: none !important; } }

/* ---- Access page, fully transparent (Oct 27): no card, no fill; everything floats on the background ---- */
.site-header .logo .logo-img { width: 84px; }
@media (max-width: 560px) { .site-header .logo .logo-img { width: 63px; } }
.req-card { background: none; border: 0; box-shadow: none; padding: 28px 8px 20px; }
.req-title { font-weight: 400; font-size: 28px; margin-bottom: 30px; }
.req-form input { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .28); border-radius: 0; padding: 14px 4px; text-align: center; }
.req-form input:focus { border-color: transparent; border-bottom-color: rgba(255, 255, 255, .85); box-shadow: none; }
.req-form input::placeholder { color: rgba(236, 224, 250, .55); }
.req-code { letter-spacing: .14em; }
.req-btn { margin-top: 22px; background: transparent; color: #f7f1ff; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  box-shadow: none; font-weight: 600; letter-spacing: .04em; }
.req-btn:hover, .req-btn:focus-visible { background: rgba(255, 255, 255, .1); border-color: #fff; transform: none; }
.req-pill { border: 0; padding: 6px 10px; margin-top: 18px; color: rgba(236, 224, 250, .75); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .3); }
.req-pill:hover { background: none; color: #fff; text-decoration-color: rgba(255, 255, 255, .7); }

/* ---- Admin page: fold-open sections with a chevron (Oct 27) ---- */
details.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; user-select: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2 { margin: 0; }
.fold-chev { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); display: grid; place-items: center; transition: transform .25s, background .2s; }
.fold-chev::before { content: ""; width: 9px; height: 9px; border-right: 2px solid #eadcff; border-bottom: 2px solid #eadcff; transform: translateY(-2px) rotate(45deg); }
details.fold[open] > summary .fold-chev { transform: rotate(180deg); }
details.fold > summary:hover .fold-chev { background: rgba(255, 255, 255, .08); }
details.fold > .fold-body { margin-top: 16px; }
details.fold:not([open]) { padding-top: 18px; padding-bottom: 18px; }
@media (prefers-reduced-motion: reduce) { .fold-chev { transition: none; } }

/* ===== Floating design language (Oct 27): admin and public pages float like the access page ===== */
.panel, details.fold, .narrow.panel, .notice { background: transparent !important; border-color: rgba(255, 255, 255, .12) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.panel, details.fold { border-width: 0 0 1px !important; border-radius: 0 !important; }
.site-header { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.panel h1, .panel h2, .panel p, details.fold h2, .notice { text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 12px rgba(0, 0, 0, .35); }
.notice.success { color: #c9f7df; } .notice.error { color: #ffc9d4; }
/* one-step access: a form that is signing in by itself dims slightly */
form.sending { opacity: .6; pointer-events: none; transition: opacity .2s; }
a.req-btn { display: block; text-align: center; text-decoration: none; }