:root {
  color-scheme: dark;
  --bg: #050506;
  --surface: rgba(16, 17, 21, .9);
  --surface-strong: rgba(21, 23, 29, .96);
  --text: #f4f5f7;
  --muted: #a7adb8;
  --muted-2: #8b92a0;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .18);
  --accent: #f07a2b;
  --link: rgb(180, 196, 255);
  --link-hover: rgb(206, 217, 255);
  --shadow: 0 28px 80px rgba(0, 0, 0, .42);
  --radius: 28px;
  --max: 1260px;
  --header: 84px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 28px); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 255, 255, .05), transparent 22%),
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .035), transparent 25%),
    linear-gradient(180deg, #060607, #030304 45%, #060607 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
input, textarea, select {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .055);
}
textarea { min-height: 140px; resize: vertical; }
select option { background: #101116; }
label { display: grid; gap: 10px; color: #d7dce5; font-size: .9rem; }

.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;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  padding: 10px 14px;
  background: #fff;
  color: #000;
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  height: 2px;
  background: rgba(255,255,255,.03);
}
.site-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8c929d, #fff);
  box-shadow: 0 0 14px rgba(255,255,255,.45);
}

.shell { width: min(calc(100% - 44px), var(--max)); margin: 0 auto; }
.section {
  position: relative;
  padding: 116px 0;
  scroll-margin-top: calc(var(--header) + 24px);
}
.section-heading { max-width: 980px; margin-bottom: 52px; }
.section-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr);
  gap: 46px;
  align-items: end;
  max-width: none;
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--muted-2);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.section-heading h2,
.drive-copy h2,
.submit-copy h2 {
  margin: 0;
  font-size: clamp(2.35rem, 4.8vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 720;
  text-wrap: balance;
}
.section-heading > p:last-child,
.drive-copy > p,
.submit-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.ambient-grid,
.ambient-glow,
.noise-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.ambient-grid {
  z-index: -4;
  opacity: .17;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 90%);
  animation: grid-drift 70s linear infinite;
}
.ambient-glow {
  z-index: -3;
  background:
    radial-gradient(ellipse 60% 40% at 18% -8%, rgba(111,141,255,.16), transparent 60%),
    radial-gradient(ellipse 55% 38% at 88% 6%, rgba(143,107,255,.13), transparent 62%);
}
.noise-layer {
  z-index: -1;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
}
@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 72px 144px, 72px 144px; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-grid { animation: none; }
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--header);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled {
  background: rgba(5, 5, 7, .76);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}
.nav-shell {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .84rem;
  font-weight: 850;
  letter-spacing: .28em;
}
.brand img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 25px;
}
.site-nav a {
  color: #cbd1da;
  font-size: .88rem;
  font-weight: 660;
  transition: color .2s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.is-active { color: #fff; }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: none;
}
.nav-toggle > span:not(.sr-only) {
  display: block;
  width: 24px;
  height: 1px;
  margin: 7px auto;
  background: #fff;
}

.hero {
  min-height: 100svh;
  padding: calc(var(--header) + 70px) 0 86px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
  gap: 48px;
  align-items: center;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: #d2d7df;
  font-size: .75rem;
  font-weight: 820;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-kicker span { width: 28px; height: 1px; background: #fff; }
.hero h1 {
  margin: 0;
  font-size: clamp(3.45rem, 7vw, 7.2rem);
  line-height: .96;
  letter-spacing: -.065em;
  font-weight: 730;
  text-wrap: balance;
}
.hero h1 em {
  color: #a7adb7;
  font-style: normal;
  font-weight: 430;
}
.hero-text {
  max-width: 690px;
  margin: 28px 0 0;
  color: #b4bac4;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 760;
  transition: transform .24s var(--ease), background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  color: #0b0c10;
  background: linear-gradient(180deg, #f6f7f9, #dce2eb);
  box-shadow: 0 12px 30px rgba(255,255,255,.09);
}
.button-secondary {
  color: #fff;
  background: rgba(255,255,255,.035);
  border-color: var(--line-strong);
}
.hero-stage {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: calc(var(--radius) + 8px);
  background:
    radial-gradient(circle at 75% 20%, rgba(255,255,255,.1), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: var(--shadow);
}
.hero-stage-grid {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  opacity: .5;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 32px 32px;
  transform: perspective(900px) rotateX(78deg) translateY(30%);
  transform-origin: bottom center;
}
.hero-stage-panel {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,10,14,.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}
.hero-stage-panel img { width: 100%; height: 100%; object-fit: contain; }
.hero-stage-panel-a { inset: 8% 8% 23% 7%; padding: 18px; border-radius: 28px; }
.hero-stage-panel-b { right: 5%; bottom: 10%; width: 36%; height: 27%; padding: 12px; border-radius: 22px; }
.hero-stage-panel-c { left: 6%; bottom: 8%; width: 28%; height: 23%; padding: 18px; border-radius: 22px; }
.hero-stage-caption {
  position: absolute;
  top: 24px;
  left: 24px;
  display: grid;
  gap: 5px;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-stage-caption span { color: var(--muted-2); }
.hero-stage-caption strong { font-weight: 700; }

.about-section { background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.025)); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 70px;
  align-items: start;
}
.about-grid .section-heading { margin-bottom: 0; }
.about-copy { display: grid; gap: 18px; }
.about-copy p { margin: 0; color: var(--muted); font-size: 1.04rem; }
.about-copy .about-lead { color: #d8dce3; font-size: 1.22rem; }
.about-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 62px;
}
.principle-card {
  min-height: 270px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(20,22,28,.92), rgba(11,12,16,.92));
  box-shadow: var(--shadow);
}
.principle-card > span {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: #cfd4dc;
  font-size: .72rem;
  font-weight: 760;
}
.principle-card h3 { margin: 52px 0 12px; font-size: 1.45rem; }
.principle-card p { margin: 0; color: var(--muted); }

.roadmap-section { background: linear-gradient(180deg, #070708, #0c0d11); }
.roadmap-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.roadmap-card {
  position: relative;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(20,22,28,.92), rgba(11,12,16,.92));
  box-shadow: var(--shadow);
}
.roadmap-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(255,255,255,.12);
}
.roadmap-card.is-current::before {
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.25));
  box-shadow: 0 0 18px rgba(255,255,255,.32);
}
.roadmap-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted-2);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.roadmap-topline strong { color: #dce1e8; }
.roadmap-card h3 {
  margin: 22px 0 16px;
  max-width: 610px;
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.roadmap-card ul { margin: 0; padding-left: 18px; color: var(--muted); }
.roadmap-card li + li { margin-top: 6px; }

.dark-surface {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  background: radial-gradient(circle at top, rgba(255,255,255,.08), rgba(255,255,255,.015) 62%);
}

.design-section { background: linear-gradient(180deg, rgba(255,255,255,.012), transparent); }
.design-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}
.filter-group { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-button {
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: #c5ccd6;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 740;
}
.filter-button.is-active,
.filter-button:hover {
  color: #090a0d;
  border-color: transparent;
  background: linear-gradient(180deg, #fff, #dfe4ec);
}
.design-count { color: var(--muted); font-size: .86rem; }
.design-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.loading-card,
.design-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(18,20,26,.94), rgba(10,11,14,.92));
  box-shadow: var(--shadow);
}
.loading-card { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); }
.design-card {
  grid-column: span 4;
  overflow: hidden;
  display: grid;
  grid-template-rows: 250px auto;
}
.design-card-media { overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.design-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.design-card:hover .design-card-media img { transform: scale(1.035); }
.design-card-body { padding: 22px; }
.design-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted-2);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.design-card h3 { margin: 14px 0 11px; font-size: 1.28rem; line-height: 1.3; letter-spacing: -.025em; }
.design-card p { margin: 0; color: var(--muted); }
.design-card-stats { display: flex; gap: 18px; margin-top: 18px; color: #d8dde6; font-size: .88rem; }
.design-card-actions { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 18px; color: var(--muted); font-size: .84rem; }
.design-card .button { min-height: 42px; padding-inline: 18px; }

.drive-copy > p { margin-top: 22px; }

.drivelab-panel {
  position: relative;
  margin-top: 38px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 30px;
  background: #030309;
  box-shadow: var(--shadow);
}
.drivelab-canvas {
  display: block;
  width: 100%;
  height: 720px;
  touch-action: none;
  outline: none;
}
.drivelab-canvas:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(180,196,255,.45);
}
.drivelab-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: #c8ced8;
  font-size: .82rem;
  letter-spacing: .06em;
  background: radial-gradient(circle at center, rgba(120,140,220,.08), transparent 60%);
}
.drivelab-error {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px;
  background: rgba(2,3,6,.9);
  backdrop-filter: blur(14px);
}
.drivelab-error[hidden] { display: none; }
.drivelab-error strong { font-size: 1.3rem; }
.drivelab-error p { max-width: 430px; margin: 0; color: var(--muted); }
.drivelab-error details {
  max-width: 460px;
  margin-top: 4px;
  text-align: left;
  color: var(--muted-2);
  font-size: .78rem;
}
.drivelab-error summary { cursor: pointer; color: #cdd3dc; font-weight: 700; letter-spacing: .02em; }
.drivelab-error code {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.35);
  color: #d6dbe3;
  font-size: .74rem;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}
.drivelab-hud {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(3,5,9,.6);
  backdrop-filter: blur(10px);
}
.drivelab-hud-top {
  top: 18px;
  left: 18px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.drivelab-hud-top span {
  color: #949ca8;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.drivelab-hud-top strong { font-size: .92rem; }
.drivelab-reset {
  position: absolute;
  z-index: 4;
  bottom: 18px;
  right: 18px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(6,8,13,.6);
  backdrop-filter: blur(10px);
  color: #d6dbe5;
  font-size: .76rem;
  cursor: pointer;
}
.drivelab-reset:hover { background: rgba(255,255,255,.09); }
.drivelab-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(6,8,13,.62);
  backdrop-filter: blur(10px);
  color: #d6dbe5;
  font-size: .78rem;
  pointer-events: none;
  transition: opacity .4s ease;
}
.drivelab-hint.is-hidden { opacity: 0; }

@media (max-width: 1050px) {
  .drivelab-canvas { height: 620px; }
}

@media (max-width: 820px) {
  .drivelab-canvas { height: 560px; }
}

@media (max-width: 580px) {
  .drivelab-canvas { height: 480px; }
  .drivelab-hint { max-width: calc(100% - 40px); text-align: center; }
}

.submit-section { background: linear-gradient(180deg, rgba(255,255,255,.012), transparent); }
.submit-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 24px;
}
.submit-copy > p { margin-top: 22px; }
.submission-form,
.comment-form { display: grid; gap: 16px; }
.submit-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(180deg, rgba(18,20,26,.95), rgba(10,11,14,.94));
  box-shadow: var(--shadow);
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.upload-field input { padding: 12px; }
.form-feedback { min-height: 1.3em; margin: 4px 0 0; color: #cfd6df; font-size: .94rem; }
.form-feedback.is-error { color: #ff9d9d; }
.form-feedback.is-success { color: #b1f7c3; }

.site-footer {
  padding: 34px 0 44px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.footer-shell { display: flex; justify-content: space-between; gap: 32px; }
.footer-shell p { max-width: 560px; margin: 14px 0 0; color: var(--muted); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 18px; align-content: start; justify-content: end; }
.footer-nav a { color: #c9d0da; font-weight: 650; }

.vote-row { display: flex; gap: 10px; margin: 26px 0 18px; }
.vote-button {
  min-width: 92px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.vote-button.is-active { color: #090a0d; border-color: transparent; background: linear-gradient(180deg, #fff, #dfe4ec); }
.comment-list { display: grid; gap: 12px; max-height: 280px; margin-bottom: 18px; padding-right: 6px; overflow: auto; }
.comment-item { padding: 14px 16px; border: 1px solid rgba(255,255,255,.06); border-radius: 16px; background: rgba(255,255,255,.03); }
.comment-item strong { display: block; margin-bottom: 6px; }
.comment-item time { display: block; margin-top: 8px; color: var(--muted-2); font-size: .78rem; }
.comment-empty { margin: 0; color: var(--muted); }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.float-card { animation: float 6s ease-in-out infinite; }
.hero-stage-panel-b.float-card { animation-delay: 1s; }
.hero-stage-panel-c.float-card { animation-delay: .5s; }
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -9px, 0); }
}
@media (max-width: 1100px) {
  .hero-shell,
  .about-grid,
  .submit-grid,
  .section-heading-split {
    grid-template-columns: 1fr;
  }
  .hero-stage { min-height: 560px; }
  .section-heading-split { gap: 22px; }
  .section-heading-split > p { max-width: 760px; }
  .about-principles { grid-template-columns: 1fr; }
  .principle-card { min-height: 220px; }
  .principle-card h3 { margin-top: 34px; }
  .design-card { grid-column: span 12; }
  .footer-shell { flex-direction: column; }
  .footer-nav { justify-content: start; }
}

@media (max-width: 900px) {
  .site-nav {
    position: fixed;
    top: calc(var(--header) - 2px);
    right: 14px;
    left: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(8,9,12,.95);
    backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .site-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .site-nav a::after { display: none; }
  .site-nav a.is-active { color: var(--text); }
  .nav-toggle { display: block; }
  .hero-stage { min-height: 470px; }
  .hero-stage-panel-a { inset: 10% 5% 28% 5%; }
  .hero-stage-panel-b { width: 42%; }
  .hero-stage-panel-c { width: 34%; }
  .roadmap-list { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .section { padding: 86px 0; }
  .shell { width: min(calc(100% - 28px), var(--max)); }
  .hero { padding-top: calc(var(--header) + 34px); }
  .hero h1 { font-size: clamp(3rem, 16vw, 4.6rem); }
  .hero-stage { min-height: 390px; }
  .hero-stage-caption { top: 18px; left: 18px; }
  .hero-stage-panel-a { inset: 13% 4% 30% 4%; }
  .roadmap-card,
  .design-card,
  .submit-card,
  .principle-card { border-radius: 22px; }
  .roadmap-card { padding: 24px; }
  .roadmap-topline { align-items: flex-start; flex-direction: column; gap: 7px; }
  .design-card { grid-template-rows: 220px auto; }
  .submit-card { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Accounts, news and administration */
button { border: 0; }
section[id] { scroll-margin-top: calc(var(--header) + 34px); }

.nav-auth,
.account-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #fff;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 760;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.nav-auth:hover,
.account-button:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}
.account-button { padding: 0 14px 0 7px; }
.account-button > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #f4f5f7, #8d949f);
  color: #0b0c0f;
  font-size: .78rem;
  font-weight: 900;
}
.account-button strong { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.news-section { background: linear-gradient(180deg, #07080a, #0b0c10); }
.news-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.news-card {
  grid-column: span 4;
  display: grid;
  grid-template-rows: 250px auto;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(19,21,27,.96), rgba(10,11,15,.94));
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), border-color .3s ease;
}
.news-card:first-child { grid-column: span 8; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); grid-template-rows: auto; }
.news-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.18); }
.news-card-media { min-height: 250px; overflow: hidden; background: rgba(255,255,255,.02); }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.news-card:hover .news-card-media img { transform: scale(1.035); }
.news-card-body { display: flex; flex-direction: column; padding: 24px; }
.news-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-2);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.news-card h3 { margin: 18px 0 12px; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.03em; }
.news-card p { margin: 0; color: var(--muted); }
.news-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: auto; padding-top: 22px; }
.news-card-footer span { color: var(--muted-2); font-size: .84rem; }

.account-prompt {
  display: grid;
  gap: 18px;
  margin-top: 34px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.035);
}
.account-prompt .button { width: max-content; }
.submission-form.is-locked { opacity: .42; pointer-events: none; filter: grayscale(.4); }

.footer-nav button {
  padding: 0;
  background: transparent;
  color: #c9d0da;
  font-weight: 650;
  cursor: pointer;
}
.footer-nav button:hover { color: #fff; }

.auth-dialog,
.account-dialog,
.content-dialog,
.admin-dialog,
.confirm-dialog,
.verify-dialog {
  width: min(100% - 24px, 1180px);
  max-height: min(calc(100dvh - 32px), 920px);
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: visible;
}
.auth-dialog { width: min(100% - 24px, 680px); }
.account-dialog { width: min(100% - 24px, 560px); }
.confirm-dialog { width: min(100% - 24px, 480px); }
.verify-dialog { width: min(100% - 24px, 440px); }
.auth-dialog::backdrop,
.account-dialog::backdrop,
.content-dialog::backdrop,
.admin-dialog::backdrop,
.confirm-dialog::backdrop,
.verify-dialog::backdrop {
  background: rgba(0,0,0,.76);
  backdrop-filter: blur(10px);
}
.dialog-card,
.content-dialog-card,
.admin-shell {
  position: relative;
  max-height: inherit;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(20,22,28,.99), rgba(9,10,14,.99));
  box-shadow: 0 34px 110px rgba(0,0,0,.62);
}
/* The dialog element itself stays overflow:visible (so its rounded corners
   and shadow aren't clipped); these inner cards are what actually bound and
   scroll the content, so e.g. Account's Logout/Delete buttons are always
   reachable instead of rendering past the viewport. */
.dialog-card,
.content-dialog-card { overflow-y: auto; }
.dialog-card { padding: 30px; }
.dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  background: rgba(0,0,0,.38);
  color: #fff;
  cursor: pointer;
  font-size: 1.45rem;
}
.dialog-close:hover { background: rgba(255,255,255,.1); }

.auth-header {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding-right: 48px;
}
.auth-header img { width: 76px; height: 76px; object-fit: cover; border-radius: 22px; }
.auth-header span,
.account-identity p,
.admin-header p {
  margin: 0 0 6px;
  color: var(--muted-2);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.auth-header h2,
.account-identity h2,
.admin-header h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 28px 0 20px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
}
.auth-tab {
  min-height: 44px;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 760;
}
.auth-tab.is-active { background: #f3f4f6; color: #0a0b0e; }
.auth-form { display: none; gap: 16px; }
.auth-form.is-active { display: grid; }
.check-row {
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  gap: 12px;
  color: #cbd1da;
  line-height: 1.4;
}
.check-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: #fff; }
.check-row a { color: var(--link); text-decoration: none; border-radius: 3px; transition: color .15s var(--ease); }
.check-row a:visited { color: var(--link); }
.check-row a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
.check-row a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.account-identity {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 18px;
  align-items: center;
  padding-right: 46px;
}
.account-avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(145deg, #f4f5f7, #7e8794);
  color: #0a0b0e;
  font-size: 1.45rem;
  font-weight: 900;
}
.account-identity > div > span { color: var(--muted); }
.account-form { display: grid; gap: 16px; margin-top: 28px; }
.account-form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 -4px;
  color: var(--muted-2);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.account-form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.password-notice {
  position: fixed;
  z-index: 200;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,11,15,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  color: #f1f3f7;
  font-size: .84rem;
  font-weight: 650;
}
.password-notice[hidden] { display: none; }
.password-notice button {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #f1f3f7;
  cursor: pointer;
  font-weight: 700;
}
.password-notice [data-password-notice-open] { padding: 7px 13px; font-size: .78rem; }
.password-notice [data-password-notice-close] {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: .95rem;
  line-height: 1;
}
@media (max-width: 560px) {
  .password-notice { left: 12px; right: 12px; top: 12px; transform: none; }
}

.text-button {
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  background: transparent;
  color: #cdd3dc;
  cursor: pointer;
  font-weight: 680;
}
.text-button.danger { color: #ffaaaa; }
.account-card > .button { width: 100%; margin-top: 14px; }

.content-dialog { overflow: auto; }
.content-dialog-card {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  overflow: hidden;
}
.content-media {
  min-height: 620px;
  display: grid;
  place-items: center;
  padding: 26px;
  border-radius: 30px 0 0 30px;
}
.content-media img { width: 100%; max-height: 760px; object-fit: contain; }
.content-copy { padding: 38px 32px 32px; overflow: auto; max-height: 88vh; }
.content-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-right: 46px;
  color: var(--muted-2);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.content-copy > h2 { margin: 16px 0 16px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -.05em; }
.content-copy > p { margin: 0; color: #b8bec8; white-space: pre-line; }
.article-body { line-height: 1.72; }
.vote-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 8px; }
.vote-button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: #d7dce5;
  cursor: pointer;
  font-weight: 680;
}
.vote-button.is-active { background: #f2f3f5; color: #090a0d; border-color: transparent; }
.comments-block { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.comments-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.comments-heading h3 { margin: 0; font-size: 1.2rem; }
.comments-heading span { color: var(--muted-2); }
.comment-list { display: grid; gap: 12px; max-height: 280px; overflow: auto; padding-right: 6px; }
.comment-item {
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 17px;
  background: rgba(255,255,255,.03);
}
.comment-item strong { display: block; margin-bottom: 5px; }
.comment-item p { margin: 0; color: #bbc1ca; white-space: pre-line; }
.comment-item time { display: block; margin-top: 9px; color: var(--muted-2); font-size: .77rem; }
.comment-empty { color: var(--muted); }
.comment-form { display: grid; gap: 12px; margin-top: 16px; }
.comment-login { margin-top: 16px; }
.comment-report { margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--muted-2); font: inherit; font-size: .78rem; text-decoration: underline; cursor: pointer; }
.comment-report:hover, .comment-report:focus-visible { color: var(--text); }

.admin-dialog { overflow: visible; }
/* Header + tabs stay put; only the active panel scrolls internally, so long
   Admin content (Content lists, Insights, Users & Staff) never pushes the
   panel navigation or the dialog itself past the viewport. */
.admin-shell {
  min-height: 720px;
  max-height: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-header {
  position: relative;
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 104px;
  padding: 24px 80px 24px 28px;
  border-bottom: 1px solid var(--line);
}
.admin-tabs {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.admin-tabs button {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 730;
}
.admin-tabs button.is-active { background: #f3f4f6; color: #0a0b0e; }
.admin-panel { display: none; padding: 28px; }
.admin-panel.is-active { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.admin-stat-grid article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.03);
}
.admin-stat-grid span { display: block; color: var(--muted-2); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.admin-stat-grid strong { display: block; margin-top: 10px; font-size: 2rem; }
.admin-note { margin-top: 22px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.025); }
.admin-note h3 { margin: 0 0 8px; }
.admin-note p { margin: 0; color: var(--muted); }
.admin-form { display: grid; gap: 16px; max-width: 760px; }
.submission-list { display: grid; gap: 14px; }
.submission-item {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.03);
}
.submission-item-header { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.submission-item h3 { margin: 4px 0 8px; }
.submission-item p { margin: 0; color: var(--muted); white-space: pre-line; }
.submission-meta { color: var(--muted-2); font-size: .8rem; }
.submission-image { margin-top: 16px; width: min(100%, 520px); border-radius: 16px; border: 1px solid var(--line); }
.submission-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.submission-controls button {
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: #d5dae2;
  cursor: pointer;
}
.submission-controls button.is-active { background: #f3f4f6; color: #090a0d; }

@media (max-width: 1180px) {
  .site-nav { gap: 16px; }
  .site-nav a { font-size: .82rem; }
  .nav-auth, .account-button { padding-inline: 12px; }
  .news-card,
  .news-card:first-child { grid-column: span 6; grid-template-columns: 1fr; grid-template-rows: 240px auto; }
  .content-dialog-card { grid-template-columns: 1fr; }
  .content-media { min-height: 360px; border-radius: 30px 30px 0 0; }
  .content-copy { max-height: none; }
}

@media (max-width: 900px) {
  .site-nav .nav-auth,
  .site-nav .account-button { width: 100%; }
  .news-card,
  .news-card:first-child { grid-column: 1 / -1; }
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-dialog { width: min(100% - 12px, 1180px); }
  .admin-shell { min-height: 0; }
}

@media (max-width: 640px) {
  .auth-header,
  .account-identity { grid-template-columns: 58px minmax(0,1fr); }
  .auth-header img { width: 58px; height: 58px; border-radius: 30%; }
  .account-avatar { width: 58px; height: 58px; border-radius: 17px; }
  .dialog-card { padding: 22px; border-radius: 24px; }
  .content-dialog-card,
  .admin-shell { border-radius: 24px; }
  .content-media { min-height: 270px; border-radius: 24px 24px 0 0; padding: 16px; }
  .content-copy { padding: 28px 20px 22px; }
  .admin-header { padding: 20px 70px 20px 20px; }
  .admin-panel { padding: 20px; }
  .admin-stat-grid { grid-template-columns: 1fr 1fr; }
  .submission-item-header { display: grid; }
}

/* Navigation */
.nav-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: max-content;
}
.admin-launch {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: #eef2f7;
  font-size: .76rem;
  font-weight: 780;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.admin-launch:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-1px);
}
.admin-launch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dce7f5;
  box-shadow: 0 0 12px rgba(220,231,245,.72);
}

/* Admin content management */
.admin-management-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.admin-management-summary article {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
}
.admin-management-summary span {
  display: block;
  color: var(--muted-2);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.admin-management-summary strong {
  display: block;
  margin-top: 8px;
  font-size: 1.8rem;
}
.admin-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.admin-management-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.025);
  min-width: 0;
}
.admin-management-card-wide { grid-column: 1 / -1; }
.admin-management-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.admin-management-heading span {
  display: block;
  color: var(--muted-2);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.admin-management-heading h3 {
  margin: 4px 0 0;
  font-size: 1.15rem;
}
.admin-content-list,
.admin-comment-list {
  display: grid;
  gap: 10px;
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}
.admin-content-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}
.admin-content-row img {
  width: 64px;
  height: 54px;
  object-fit: cover;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.07);
  background: #090a0d;
}
.admin-content-row strong,
.admin-content-row span { display: block; }
.admin-content-row strong { font-size: .93rem; }
.admin-content-row span {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: .77rem;
}
.admin-comment-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.admin-comment-columns h4 {
  margin: 0 0 10px;
  font-size: .96rem;
}
.admin-comment-row {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}
.admin-comment-row-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.admin-comment-row strong,
.admin-comment-row span { display: block; }
.admin-comment-row span {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: .75rem;
}
.admin-comment-row p {
  margin: 12px 0 0;
  color: #c4cad3;
  white-space: pre-line;
}
.admin-delete-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255,120,120,.22);
  border-radius: 999px;
  background: rgba(151,35,35,.14);
  color: #ffb2b2;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 760;
}
.admin-delete-button:hover {
  background: rgba(196,45,45,.22);
  border-color: rgba(255,145,145,.42);
}

@media (max-width: 900px) {
  .admin-management-grid,
  .admin-comment-columns { grid-template-columns: 1fr; }
  .admin-management-card-wide { grid-column: auto; }
}

@media (max-width: 640px) {
  .admin-management-summary { grid-template-columns: 1fr; }
  .admin-content-row { grid-template-columns: 52px minmax(0, 1fr); }
  .admin-content-row img { width: 52px; height: 48px; }
  .admin-content-row .admin-delete-button { grid-column: 1 / -1; width: 100%; }
  .admin-comment-row-head { display: grid; }
  .admin-comment-row .admin-delete-button { width: 100%; }
}


/* Login and account controls */
[hidden] {
  display: none !important;
}

.footer-action-panel {
  margin-top: 34px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.025);
}
.footer-action-panel span,
.footer-action-panel strong { display: block; }
.footer-action-panel span { color: var(--muted-2); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; }
.footer-action-panel strong { margin-top: 7px; font-size: 1.05rem; }
.footer-action-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .footer-action-panel { align-items: flex-start; flex-direction: column; }
}

.admin-legal-note{margin:0 0 18px;color:var(--muted);max-width:760px}.legal-admin-form .field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.footer-action-buttons{flex-wrap:wrap}@media(max-width:720px){.legal-admin-form .field-grid{grid-template-columns:1fr}}
.legal-fieldset { display: grid; gap: 16px; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; }
.legal-fieldset + .legal-fieldset { margin-top: 18px; }
.legal-fieldset legend { padding: 0 8px; color: var(--muted-2); font-size: .76rem; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }


/* Account and viewer states */
.account-danger-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.text-button.danger { color: #ff9b9b; }
.text-button.danger:hover { color: #ffd0d0; }
.button-primary.danger {
  color: #fff;
  background: linear-gradient(180deg, #ff6b6b, #d63c3c);
  box-shadow: 0 12px 30px rgba(214,60,60,.28);
}
.confirm-card h2 { margin: 0 0 12px; font-size: 1.5rem; letter-spacing: -.02em; }
.confirm-card > p { margin: 0; color: var(--muted); line-height: 1.55; }
.confirm-card .admin-note { margin-top: 16px; }
button[data-confirm-button][disabled],
button[data-confirm-cancel][disabled] { opacity: .6; cursor: not-allowed; transform: none; }
@media (max-width: 560px) {
  .account-danger-actions { align-items: flex-start; flex-direction: column; }
}

/* --- Signup email verification (6-digit PIN) -----------------------------
   Deliberately orange-free and restrained: cool white/gray tones only, with
   a soft cool-blue glow reused from the site's own existing ambient
   gradients (see .ambient-glow), never the SYFRA accent orange. The global
   `prefers-reduced-motion: reduce` override further up this file already
   collapses every animation/transition duration to ~0, so no separate
   reduced-motion rules are needed here; site.js additionally shortens its
   own stage-transition timers when that preference is set, so no dead
   pause is left waiting on an animation that no longer visibly plays. */

.verify-card {
  padding: 34px 30px;
  text-align: center;
  animation: verifyCardIn .38s var(--ease);
  /* Both .verify-stage children share this one cell (see below) so the PIN
     and progress stages overlap in place during the crossfade instead of
     stacking in normal flow, which is what caused the modal to grow taller
     mid-transition and then collapse back down. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@keyframes verifyCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.verify-card .auth-header { grid-template-columns: 1fr; padding-right: 0; text-align: center; }
.verify-subtext { margin: 6px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.verify-subtext strong { color: var(--text); font-weight: 600; }

/* visibility:hidden (not display:none/[hidden]) so an inactive stage still
   occupies its natural height and keeps contributing to the grid row's auto
   sizing — this is what keeps the reserved stage area (and the modal as a
   whole) a stable height across PIN entry/verifying/error/success instead
   of shrinking to whichever stage happens to be shorter. */
.verify-stage {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.verify-stage.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.verify-stage.is-leaving { opacity: 0; transform: scale(.97); pointer-events: none; }
.verify-stage-progress.is-active { animation: verifyStageIn .32s var(--ease); }
@keyframes verifyStageIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

.verify-pin-group { display: flex; gap: 10px; justify-content: center; margin: 24px 0 16px; }
.verify-pin-input {
  width: 48px;
  height: 58px;
  padding: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
  opacity: 0;
  animation: verifyPinIn .32s var(--ease) forwards;
}
.verify-pin-input:nth-child(1) { animation-delay: .04s; }
.verify-pin-input:nth-child(2) { animation-delay: .08s; }
.verify-pin-input:nth-child(3) { animation-delay: .12s; }
.verify-pin-input:nth-child(4) { animation-delay: .16s; }
.verify-pin-input:nth-child(5) { animation-delay: .2s; }
.verify-pin-input:nth-child(6) { animation-delay: .24s; }
@keyframes verifyPinIn {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Used only when the PIN boxes return after a wrong code: a quick, uniform
   fade rather than replaying the staggered first-open cascade above. */
.verify-pin-group.is-retry .verify-pin-input {
  animation-name: verifyPinRetryIn;
  animation-duration: .26s;
  animation-delay: 0s;
}
@keyframes verifyPinRetryIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.verify-pin-input:focus {
  outline: none;
  border-color: rgba(244,245,247,.55);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 3px rgba(244,245,247,.1), 0 0 22px rgba(180,196,255,.2);
  transform: translateY(-1px);
}
.verify-pin-input.is-filled { border-color: rgba(244,245,247,.32); background: rgba(255,255,255,.05); }
.verify-pin-input.is-error { border-color: rgba(255,107,107,.6); animation: verifyShakeInput .35s var(--ease); }
@keyframes verifyShakeInput {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.verify-resend-row { margin-top: 16px; }
button[data-verify-resend][disabled] { opacity: .5; cursor: not-allowed; }

.verify-lock { position: relative; width: 96px; height: 96px; margin: 4px auto 22px; display: grid; place-items: center; border-radius: 50%; }
.verify-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.verify-ring-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.verify-ring-sweep {
  fill: none;
  stroke: #e7eaf2;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 66 198;
  transform-origin: 48px 48px;
  animation: verifyRingSpin 1.1s linear infinite;
  filter: drop-shadow(0 0 6px rgba(180,196,255,.4));
  transition: stroke-dasharray .4s var(--ease), stroke .3s ease, opacity .4s ease;
}
@keyframes verifyRingSpin { to { transform: rotate(360deg); } }

.verify-lock-icon { position: relative; width: 44px; height: 44px; }
.verify-lock-body { fill: rgba(255,255,255,.06); stroke: #e7eaf2; stroke-width: 2; transition: stroke .3s ease; }
.verify-lock-dot { fill: #e7eaf2; transition: fill .3s ease; }
.verify-lock-shackle {
  fill: none;
  stroke: #e7eaf2;
  stroke-width: 2.4;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 0% 100%;
  transition: transform .5s var(--ease), stroke .3s ease;
}

.verify-stage-progress.is-success .verify-ring-sweep { animation: none; stroke-dasharray: 264 0; stroke: #eef1ff; opacity: 0; transition-delay: 0s, 0s, .3s; }
.verify-stage-progress.is-success .verify-lock-shackle { transform: rotate(-28deg) translate(-1px, -2px); }
.verify-stage-progress.is-success .verify-lock { animation: verifySuccessGlow .9s var(--ease); }
@keyframes verifySuccessGlow {
  0% { box-shadow: 0 0 0 0 rgba(180,196,255,0); }
  45% { box-shadow: 0 0 46px 12px rgba(180,196,255,.22); }
  100% { box-shadow: 0 0 0 0 rgba(180,196,255,0); }
}
.verify-stage-progress.is-success .verify-status-text { color: var(--text); }

/* Error turns the FULL ring red (both the always-present track circle and
   the sweep, which switches from a spinning partial arc to a full closed
   circle via stroke-dasharray) rather than leaving most of the circumference
   its normal faint gray — the track's own transition (declared here, applied
   the moment .is-error's stroke value takes effect) and the sweep's existing
   stroke-dasharray transition animate both into place together. */
.verify-stage-progress.is-error .verify-ring-track { stroke: rgba(255,122,122,.4); transition: stroke .25s var(--ease); }
.verify-stage-progress.is-error .verify-ring-sweep { animation: none; stroke: #ff6b6b; stroke-dasharray: 264 0; filter: drop-shadow(0 0 8px rgba(255,107,107,.45)); }
.verify-stage-progress.is-error .verify-lock-body,
.verify-stage-progress.is-error .verify-lock-shackle { stroke: #ff8a8a; }
.verify-stage-progress.is-error .verify-lock-dot { fill: #ff8a8a; }
/* One-time settle: the outer glow flashes slightly brighter then eases down
   to a steady "warning light" level, held via `forwards` for as long as
   .is-error stays applied — not a repeating pulse. */
.verify-stage-progress.is-error .verify-lock { animation: verifyShakeLock .4s var(--ease), verifyErrorGlow .5s var(--ease) forwards; }
.verify-stage-progress.is-error .verify-status-text { color: #ff9b9b; }
@keyframes verifyShakeLock {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-2deg); }
  40% { transform: translateX(5px) rotate(2deg); }
  60% { transform: translateX(-4px) rotate(-1deg); }
  80% { transform: translateX(4px) rotate(1deg); }
}
@keyframes verifyErrorGlow {
  0% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
  40% { box-shadow: 0 0 34px 8px rgba(255,107,107,.4); }
  100% { box-shadow: 0 0 16px 3px rgba(255,107,107,.22); }
}

.verify-status-text { margin: 6px 0 0; color: var(--muted); font-size: .98rem; }

@media (max-width: 420px) {
  .verify-pin-group { gap: 6px; }
  .verify-pin-input { width: 38px; height: 48px; font-size: 1.2rem; border-radius: 10px; }
}
@media (max-width: 360px) {
  .verify-pin-group { gap: 5px; }
  .verify-pin-input { width: 34px; height: 44px; font-size: 1.05rem; }
}