/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.18_@babel+core@7._f72f9866c3b3560cb234326b00906372/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.18_@babel+core@7._f72f9866c3b3560cb234326b00906372/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ────────────────────────────────────────────────────────────────────
   Norya — Cinematic & Intimate design system
   ──────────────────────────────────────────────────────────────────── */

@keyframes norya-spin {
  to { transform: rotate(360deg); }
}
.spin { animation: norya-spin 0.9s linear infinite; }

@keyframes norya-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

:root {
  color-scheme: dark;
  /* Discord palette — gray base + blurple accent */
  --ink-0: #1a1b1e;
  --ink-1: #1e1f22;
  --ink-2: #2b2d31;
  --ink-3: #313338;
  --ink-4: #3f4248;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.1);

  --fg: #f2f3f5;
  --fg-2: #dbdee1;
  --fg-3: #949ba4;
  --fg-4: #6d7178;

  /* semantic accents kept under same names */
  --amber: #5865f2;      /* blurple — primary */
  --amber-2: #4752c4;
  --rose: #eb459e;       /* fuchsia — relationship */
  --rose-2: #b03680;
  --plum: #5865f2;
  --teal: #00afe9;       /* accent blue */
  --good: #23a55a;       /* online green */
  --warn: #f0b232;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;
  --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px -10px rgba(0,0,0,.55);
  --shadow-2: 0 24px 60px -30px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.04) inset;
  --shadow-glow: 0 0 60px rgba(88, 101, 242, 0.22);
  --ease: cubic-bezier(.2,.7,.1,1);

  --display: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--ink-0);
  color: var(--fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select {
  font: inherit; color: inherit; background: transparent; border: 0; outline: 0;
}
a { color: inherit; text-decoration: none; }

/* ─────────── shared atoms ─────────── */
.display { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; }
.eyebrow {
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--amber); font-weight: 500;
}
.muted { color: var(--fg-3); }
.hairline { height: 1px; background: var(--line); border: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  font-size: 11.5px; color: var(--fg-2);
}
.chip .swatch { width: 6px; height: 6px; border-radius: 999px; background: var(--amber); }
.chip.success { color: var(--good); border-color: rgba(35,165,90,.25); }
.chip.success .swatch { background: var(--good); }
.chip.night { color: var(--teal); border-color: rgba(0,175,233,.22); }
.chip.night .swatch { background: var(--teal); }
.chip.rose { color: var(--rose); border-color: rgba(235,69,158,.25); }
.chip.rose .swatch { background: var(--rose); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  transition: all .3s var(--ease);
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(180deg, #5865f2 0%, #4752c4 100%);
  color: #ffffff;
  box-shadow: 0 12px 30px -10px rgba(88,101,242,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -12px rgba(88,101,242,.55), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-ghost {
  background: rgba(255,255,255,.04);
  color: var(--fg);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,.07); }
.btn-quiet { color: var(--fg-2); padding: 10px 14px; }
.btn-quiet:hover { color: var(--fg); }
.btn-danger {
  background: linear-gradient(180deg, rgba(235,69,158,.16) 0%, rgba(176,54,128,.18) 100%);
  color: var(--rose);
  border: 1px solid rgba(235,69,158,.32);
}
.btn-danger:hover {
  background: linear-gradient(180deg, rgba(235,69,158,.24) 0%, rgba(176,54,128,.28) 100%);
  border-color: rgba(235,69,158,.45);
}
.btn:disabled, .btn[disabled] {
  opacity: 0.55; cursor: not-allowed;
  transform: none !important; box-shadow: none !important;
}

.field {
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.field label {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: 14.5px;
  transition: all .25s var(--ease);
}
.field input::placeholder { color: var(--fg-4); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: rgba(88,101,242,.45);
  background: var(--ink-3);
  box-shadow: 0 0 0 4px rgba(88,101,242,.08);
}

/* native select dark styling */
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23949ba4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.field select:hover { background-color: var(--ink-4); }
.field select option {
  background: var(--ink-2);
  color: var(--fg);
  padding: 8px 12px;
}
.field select optgroup {
  background: var(--ink-2);
  color: var(--fg-3);
}

/* native checkbox + date / etc. dark scheme */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--amber);
}

/* ╔════════════ 01 — LOGIN ════════════╗ */
.login-stage {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  min-height: 100dvh;
  grid-gap: 0;
  gap: 0;
}
.login-presence {
  position: relative;
  overflow: hidden;
  margin: 18px 0 18px 18px;
  border-radius: var(--r-xl);
  background: #2b2d31;
}
.login-presence::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,27,30,0) 0%, rgba(26,27,30,.45) 55%, rgba(26,27,30,.96) 100%),
    radial-gradient(60% 40% at 25% 30%, rgba(88,101,242,.20), transparent 70%);
  z-index: 2; pointer-events: none;
}
.login-presence img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
  animation: breathing 8s ease-in-out infinite;
}
@keyframes breathing {
  0%, 100% { transform: scale(1.02); }
  50% { transform: scale(1.05); }
}
.login-presence .pres-meta {
  position: absolute; left: 36px; top: 36px; z-index: 3;
  display: flex; flex-direction: column; gap: 18px;
}
.login-presence .pres-quote {
  position: absolute; left: 36px; bottom: 40px; right: 36px; z-index: 3;
  max-width: 460px;
}
.login-presence .pres-quote .display {
  font-size: 38px; line-height: 1.1; margin: 0 0 14px;
}
.login-presence .pres-quote .display em {
  color: var(--amber); font-style: italic;
}
.login-presence .pres-quote p {
  margin: 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.7;
}
.pres-presence-row {
  position: absolute; right: 28px; top: 28px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(30,31,34,.55);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: 12.5px;
}
.pres-presence-row .pulse {
  width: 7px; height: 7px; border-radius: 999px; background: var(--good);
  box-shadow: 0 0 0 0 rgba(35,165,90,.55);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(35,165,90,.55); }
  50% { box-shadow: 0 0 0 8px rgba(35,165,90,0); }
}
.login-form-pane {
  display: flex; flex-direction: column; justify-content: center;
  padding: 52px clamp(40px, 4.5vw, 72px);
  align-items: flex-start;
}
.login-form-pane > * {
  width: 100%;
  max-width: 460px;
}
.login-form-pane .brand-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 38px;
}
.brand-mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(88,101,242,.2), rgba(88,101,242,.05));
  border: 1px solid rgba(88,101,242,.28);
  font-family: var(--display);
  font-size: 22px;
  color: var(--amber);
}
.login-form-pane h1.display {
  font-size: 44px; line-height: 1.05; margin: 18px 0 14px;
}
.login-form-pane .lead {
  color: var(--fg-2); font-size: 14.5px; line-height: 1.6;
  max-width: 460px;
}
.auth-tabs {
  display: flex;
  width: 100%;
  max-width: 320px;
  padding: 5px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  margin: 28px 0 20px;
}
.auth-tabs button {
  flex: 1 1;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-3);
  transition: all .2s var(--ease);
  text-align: center;
}
.auth-tabs button:hover { color: var(--fg); }
.auth-tabs button.is-active {
  background: linear-gradient(180deg, rgba(88,101,242,.32), rgba(88,101,242,.18));
  color: var(--fg);
  box-shadow:
    inset 0 0 0 1px rgba(88,101,242,.4),
    0 6px 16px -6px rgba(88,101,242,.4);
}
.login-form {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 460px;
}
.login-form .row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px;
}
.login-form .row a { color: var(--amber); }
.login-form .row a:hover { text-decoration: underline; }
.login-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0; color: var(--fg-4); font-size: 11.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.login-divider::before, .login-divider::after { content:""; flex:1 1; height:1px; background: var(--line); }
.oauth-row { display: flex; gap: 10px; }
.oauth-row .btn-ghost { flex:1 1; }
.login-trust {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; gap: 10px;
  margin-top: 36px; max-width: 460px;
}
.login-trust .item {
  padding: 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 8px;
}
.login-trust .item .ic {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(88,101,242,.1);
  color: var(--amber);
}
.login-trust .item span { font-size: 12.5px; color: var(--fg-2); }
.login-trust .item small { font-size: 11px; color: var(--fg-4); }

/* ╔════════════ 02 — CREATION ════════════╗ */
.creation-stage {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100vh;
  grid-gap: 0;
  gap: 0;
  padding: 18px;
}
.creation-form-pane {
  background: rgba(30,31,34,.55);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  margin-right: 12px;
  padding: 44px 48px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.creation-progress {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
}
.creation-progress .step {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-4);
}
.creation-progress .step .num {
  width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  font-size: 11.5px;
}
.creation-progress .step.done .num {
  background: rgba(88,101,242,.16); border-color: rgba(88,101,242,.4); color: var(--amber);
}
.creation-progress .step.is-active .num {
  background: var(--amber); color: #ffffff; border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(88,101,242,.18);
}
.creation-progress .step.is-active span { color: var(--fg); }
.creation-progress .step.done span { color: var(--fg-2); }
.creation-progress .sep { width: 24px; height: 1px; background: var(--line); }
.creation-form-pane h2.display {
  font-size: 38px; line-height: 1.1; margin: 12px 0 8px;
}
.creation-form-pane .lead {
  color: var(--fg-2); font-size: 14.5px; line-height: 1.65;
  max-width: 520px;
}
.creation-scroll {
  margin-top: 28px;
  overflow-y: auto;
  padding-right: 6px;
  max-height: 100%;
}
.creation-scroll::-webkit-scrollbar { width: 6px; }
.creation-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 6px; }
.section-title {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 14px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-3);
}
.section-title::after { content:""; flex:1 1; height:1px; background: var(--line); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; gap: 10px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; gap: 10px; }
.choice {
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: all .25s var(--ease);
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
}
.choice:hover { border-color: var(--line-strong); background: rgba(255,255,255,.04); }
.choice.is-active {
  border-color: rgba(88,101,242,.5);
  background: linear-gradient(180deg, rgba(88,101,242,.12), rgba(88,101,242,.03));
  box-shadow: inset 0 0 0 1px rgba(88,101,242,.18), 0 0 24px -10px rgba(88,101,242,.4);
}
.choice strong { font-size: 14px; font-weight: 500; }
.choice small { font-size: 12px; color: var(--fg-3); }
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch {
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.is-active {
  box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 4px var(--amber);
}
.slider-row {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  border-radius: var(--r-md);
}
.slider-row .head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.slider-row .head span:last-child { color: var(--amber); font-weight: 500; }
.slider-row .track {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  position: relative; overflow: hidden;
}
.slider-row .track .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--amber), var(--rose));
  border-radius: 999px;
}
.creation-footer {
  margin-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.creation-preview-pane {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  margin-left: 12px;
  background: #2b2d31;
  display: flex; flex-direction: column;
}
.creation-preview-pane .canvas {
  position: relative; flex: 1 1; overflow: hidden;
}
.creation-preview-pane .canvas img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.06) contrast(1.05);
}
.creation-preview-pane .canvas::after {
  content:"";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,27,30,0) 50%, rgba(26,27,30,.85) 100%),
    radial-gradient(50% 35% at 50% 25%, rgba(88,101,242,.18), transparent 70%);
}
.preview-floating {
  position: absolute; left: 24px; top: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.preview-floating .chip { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(30,31,34,.6); }
.preview-summary {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  padding: 22px 24px;
  background: rgba(30,31,34,.78);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
}
.preview-summary .name {
  font-family: var(--display);
  font-size: 30px;
  margin: 0;
}
.preview-summary .vibe {
  color: var(--fg-3); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 2px 0 14px;
}
.preview-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; gap: 8px;
}
.preview-grid .cell {
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  border-radius: var(--r-sm);
}
.preview-grid .cell small {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-4); display:block; margin-bottom: 2px;
}
.preview-grid .cell span { font-size: 13px; color: var(--fg-2); }
.lock-notice {
  margin-top: 14px;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  background: rgba(88,101,242,.06);
  border: 1px solid rgba(88,101,242,.18);
  border-radius: var(--r-sm);
  font-size: 12px; color: var(--fg-2); line-height: 1.5;
}
.lock-notice strong { color: var(--amber); }

/* ╔════════════ 03 — WORKSPACE ════════════╗ */
.workspace-stage {
  display: grid;
  /* Widened stage column (1.5fr) so the Norya video fills the centre
     panel without aggressive pillarboxing, and a narrower side rail
     (260px) on the right that hosts the outfits + scenes split. */
  grid-template-columns: 76px 420px 1.5fr 260px;
  /* dvh (not vh): mobile browsers count the URL bar in vh, which would push
     the chat composer behind the bottom chrome / keyboard. dvh tracks the
     visible viewport so the composer + dock stay reachable. */
  height: 100dvh;
  grid-gap: 0;
  gap: 0;
}
.ws-rail {
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 0;
  border-right: 1px solid var(--line);
  background: rgba(30,31,34,.6);
}
.ws-rail .top, .ws-rail .bottom {
  display: flex; flex-direction: column; gap: 10px;
}
.ws-rail .bottom { margin-top: auto; }
.rail-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--fg-3);
  transition: all .25s var(--ease);
  position: relative;
}
.rail-btn:hover { color: var(--fg); background: rgba(255,255,255,.04); }
.rail-btn.is-active {
  color: var(--amber);
  background: rgba(88,101,242,.1);
  box-shadow: inset 0 0 0 1px rgba(88,101,242,.3);
}
.rail-btn .pip {
  position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--rose);
}
.rail-divider { width: 22px; height: 1px; background: var(--line); margin: 6px 0; }
.rail-brand {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(88,101,242,.22), rgba(88,101,242,.05));
  border: 1px solid rgba(88,101,242,.3);
  color: var(--amber);
  font-family: var(--display); font-size: 18px;
  margin-bottom: 24px;
}
.rail-avatar {
  width: 40px; height: 40px; border-radius: 999px;
  background-size: cover; background-position: center;
  border: 2px solid rgba(88,101,242,.35);
  box-shadow: 0 0 12px rgba(88,101,242,.25);
}
.ws-stage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 50%, #2b2d31 0%, #1e1f22 60%, #1a1b1e 100%);
}

/* Stage glassy chips — two compact pills at top-left + top-right.
   Replaced the old stage-id/stage-energy widgets so the stage shows
   only the Norya video + minimal status overlay. */
.ws-stage .stage-top {
  position: absolute; top: 16px; left: 16px; right: 16px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 0;
  z-index: 3;
  pointer-events: none;
}
.stage-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(20, 21, 24, 0.66);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--fg);
  pointer-events: auto;
  box-shadow: 0 10px 28px -16px rgba(0,0,0,.7);
}
.stage-chip .primary { font-weight: 500; }
.stage-chip .secondary { color: var(--fg-3); font-size: 12px; }
.stage-chip .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(60,200,170,.6);
}
.stage-chip .dot.dot-rose {
  background: var(--rose);
  box-shadow: 0 0 8px rgba(235,69,158,.6);
}
.stage-chip-rose {
  background: rgba(40, 22, 32, 0.7);
  border-color: rgba(235,69,158,.18);
}

/* Stage video layers — the foreground (.stage-video-main) keeps its
   portrait aspect ratio via object-fit:contain, and the ambient backdrop
   (.stage-video-ambient) plays the same clip stretched to cover the
   pillarbox area, heavily blurred + slightly darkened so the live scene
   colour fills the gap instead of a flat letterbox. Same source pulled
   twice; browsers dedupe the network fetch, so the ambient layer is
   essentially free. */
.stage-video-ambient,
.stage-video-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stage-video-ambient {
  object-fit: cover;
  object-position: center center;
  filter: blur(48px) brightness(.6) saturate(.85);
  /* Push the blurred edges past the stage clip rect so the blur halo
     doesn't reveal the actual clip border. */
  transform: scale(1.18);
  z-index: 0;
  pointer-events: none;
}
.stage-video-main {
  object-fit: contain;
  object-position: center center;
  z-index: 1;
  background: transparent;
}

.ws-stage .stage-img {
  position: absolute; inset: 0;
  background-size: cover;
  /* Tall companion portraits (1024x1536) get center-cropped if we anchor
     at center, which clips the head. Anchor the crop at the top so the
     face stays visible regardless of stage aspect ratio. */
  background-position: center top;
  background-repeat: no-repeat;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.06) contrast(1.03);
  animation: breathing 10s ease-in-out infinite;
}
.ws-stage .stage-img.blur {
  filter: blur(60px) saturate(1.1) brightness(.55);
  transform: scale(1.2);
  z-index: 0;
  animation: none;
}
.ws-stage::after {
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 50% 60%, rgba(88,101,242,.10), transparent 70%),
    linear-gradient(180deg, rgba(26,27,30,.50) 0%, rgba(26,27,30,0) 25%, rgba(26,27,30,0) 70%, rgba(26,27,30,.92) 100%);
  pointer-events: none;
}
.stage-top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 24px 28px;
  z-index: 3;
}
.stage-id { display: flex; flex-direction: column; gap: 6px; }
.stage-id .name {
  font-family: var(--display); font-size: 30px; line-height: 1;
}
.stage-id .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stage-status { display: flex; gap: 10px; align-items: center; }
.stage-energy {
  padding: 10px 16px;
  background: rgba(30,31,34,.6);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 8px;
  width: 220px;
}
.stage-energy .head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
}
.stage-energy .head .val { color: var(--teal); }
.stage-energy .bar {
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden; position: relative;
}
.stage-energy .bar .fill {
  position: absolute; left:0; top:0; bottom:0;
  background: linear-gradient(90deg, var(--teal), var(--amber));
}
.presence-dock {
  position: absolute; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  background: rgba(30,31,34,.7);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
}
.presence-dock button {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px; color: var(--fg-2);
  transition: all .25s var(--ease);
}
.presence-dock button:hover { color: var(--fg); background: rgba(255,255,255,.04); }
.presence-dock button.is-active {
  background: linear-gradient(180deg, rgba(88,101,242,.22), rgba(88,101,242,.08));
  color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(88,101,242,.32);
}
.mood-strip {
  position: absolute; left: 28px; bottom: 28px;
  z-index: 3;
  padding: 18px 22px;
  background: rgba(30,31,34,.7);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  width: 280px;
}
.mood-strip .title {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3);
}
.mood-strip .quote {
  margin: 10px 0 14px;
  font-family: var(--display); font-style: italic;
  color: var(--fg); font-size: 16.5px; line-height: 1.35;
}
.mood-meters { display: flex; flex-direction: column; gap: 8px; }
.mood-meters .meter { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--fg-3); }
.mood-meters .meter .label { width: 70px; letter-spacing: 0.08em; text-transform: uppercase; }
.mood-meters .meter .bar {
  flex: 1 1; height: 3px; background: rgba(255,255,255,.06);
  border-radius: 999px; overflow: hidden;
}
.mood-meters .meter .bar .fill {
  height: 100%; background: linear-gradient(90deg, var(--rose), var(--amber)); border-radius: 999px;
}
.mood-meters .meter .val { width: 26px; text-align: right; color: var(--fg-2); }

/* ── insight rail (right sidebar — always-on bond + memories) ── */
.ws-insights {
  border-left: 1px solid var(--line);
  background: rgba(30,31,34,.66);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 22px 18px 26px;
  gap: 20px;
  min-height: 0;
}
.ws-insights .insights-section { display: flex; flex-direction: column; gap: 10px; }
.ws-insights .section-head {
  font-family: var(--display); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-3);
  display: flex; align-items: baseline; justify-content: space-between;
}
.ws-insights .section-head .count {
  font-family: inherit; font-size: 11px; color: var(--fg-4);
}
.ws-insights .bond-hero {
  padding: 14px 14px 16px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(88,101,242,.16), rgba(88,101,242,.02));
  border: 1px solid rgba(88,101,242,.22);
  gap: 4px;
}
.ws-insights .bond-hero .label {
  font-family: var(--display); font-size: 19px; color: var(--fg); letter-spacing: -0.01em;
}
.ws-insights .bond-hero .tone {
  font-size: 12px; color: var(--fg-3); text-transform: capitalize;
}
.ws-insights .bond-hero .hint {
  font-size: 11.5px; color: var(--fg-4); margin-top: 6px; line-height: 1.45;
}
.ws-insights .insights-meters .meter {
  display: grid; grid-template-columns: 64px 1fr 28px;
  align-items: center; grid-gap: 10px; gap: 10px; font-size: 11.5px;
}
.ws-insights .insights-meters .meter .label { color: var(--fg-3); }
.ws-insights .insights-meters .meter .bar {
  height: 5px; background: rgba(255,255,255,.05);
  border-radius: 999px; overflow: hidden;
}
.ws-insights .insights-meters .meter .fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), var(--rose));
  transition: width .4s var(--ease);
}
.ws-insights .insights-meters .meter .val {
  color: var(--fg-2); text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ws-insights .insights-meters .badge-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.ws-insights .insights-emotion .row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.ws-insights .insights-emotion .intensity {
  display: grid; grid-template-columns: 64px 1fr 28px;
  align-items: center; grid-gap: 10px; gap: 10px; font-size: 11.5px;
}
.ws-insights .insights-emotion .intensity .lbl { color: var(--fg-3); }
.ws-insights .insights-emotion .intensity .bar {
  height: 5px; background: rgba(255,255,255,.05);
  border-radius: 999px; overflow: hidden;
}
.ws-insights .insights-emotion .intensity .fill {
  height: 100%; border-radius: 999px;
  background: var(--amber);
  transition: width .4s var(--ease);
}
.ws-insights .insights-emotion .intensity .val {
  color: var(--fg-2); text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ws-insights .insights-emotion .reason {
  font-size: 11px; color: var(--fg-4); line-height: 1.45; margin-top: 2px;
}
.ws-insights .memory-item {
  text-align: left; width: 100%;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 5px;
  transition: all .2s var(--ease);
  cursor: pointer;
}
.ws-insights .memory-item:hover {
  background: rgba(255,255,255,.05); border-color: var(--fg-4);
}
.ws-insights .memory-item .meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; color: var(--fg-4);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ws-insights .memory-item .meta .salience {
  display: inline-flex; align-items: center; gap: 5px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; color: var(--fg-3);
}
.ws-insights .memory-item .meta .salience .dot {
  width: 5px; height: 5px; border-radius: 999px; background: var(--amber);
}
.ws-insights .memory-item .title {
  font-size: 12.5px; color: var(--fg); font-weight: 600; line-height: 1.3;
}
.ws-insights .memory-item .body {
  font-size: 11.5px; color: var(--fg-3); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-insights .see-all {
  margin-top: 2px; padding: 9px 12px; border-radius: 10px;
  font-size: 11px; color: var(--fg-3); text-align: center;
  background: transparent; border: 1px dashed var(--line);
  transition: all .2s var(--ease); cursor: pointer;
}
.ws-insights .see-all:hover {
  color: var(--fg); border-color: var(--fg-3);
  background: rgba(255,255,255,.04);
}
.ws-insights .empty {
  font-size: 11px; color: var(--fg-4); line-height: 1.5;
  padding: 12px 14px;
  background: rgba(255,255,255,.02); border-radius: 10px;
  border: 1px dashed var(--line);
}

/* ws-side — right side rail, two-section split (Kıyafetler top,
   Sahneler bottom). Replaced the old relationship-meter heavy
   ws-insights with action-first surfaces: outfit cards click into the
   chat composer (chat-driven equip), scene cards toast "yakında" until
   the avatar factory ships per-scene renders. */
.ws-side {
  background: var(--ink-2);
  border-left: 1px solid rgba(0,0,0,.35);
  display: grid;
  /* İlişki (auto height) on top, then Kıyafetler + Sahneler split the
     remaining space. */
  grid-template-rows: auto 1fr 1fr;
  min-height: 0;
}

/* İlişki section — relationship trajectory + grudge gauge. */
.side-section-relationship {
  background: linear-gradient(160deg, rgba(88,101,242,.10), rgba(88,101,242,.02));
  border-bottom: 1px solid var(--line);
  gap: 8px;
}
.side-section-relationship.is-kus {
  background: linear-gradient(160deg, rgba(220,38,38,.12), rgba(220,38,38,.02));
}
.rel-role {
  font-size: 12px;
  color: var(--amber);
  font-weight: 500;
}
.rel-progress { display: flex; flex-direction: column; gap: 5px; }
.rel-progress-label {
  font-size: 11.5px; color: var(--fg-3);
}
.rel-progress-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.rel-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), var(--rose));
  transition: width .5s var(--ease);
}
.rel-meters { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.rel-meter {
  display: grid; grid-template-columns: 56px 1fr 24px;
  align-items: center; grid-gap: 8px; gap: 8px; font-size: 11px;
}
.rel-meter .lbl { color: var(--fg-4); }
.rel-meter .bar {
  height: 4px; background: rgba(255,255,255,.05);
  border-radius: 999px; overflow: hidden;
}
.rel-meter .fill {
  height: 100%; border-radius: 999px;
  background: var(--teal);
  transition: width .4s var(--ease);
}
.rel-meter .val { color: var(--fg-3); text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Gönül alma (grudge) gauge — shown when trust below the floor. */
.rel-kus { display: flex; flex-direction: column; gap: 8px; }
.rel-kus-state { font-size: 13px; color: var(--fg); font-weight: 500; }
.rel-kus-hint { font-size: 11.5px; color: var(--fg-3); line-height: 1.5; }
.rel-kus-meter {
  display: grid; grid-template-columns: 44px 1fr 24px;
  align-items: center; grid-gap: 8px; gap: 8px; font-size: 11px;
}
.rel-kus-meter .lbl { color: var(--fg-4); }
.rel-kus-meter .bar {
  height: 5px; background: rgba(255,255,255,.05);
  border-radius: 999px; overflow: hidden;
}
.rel-kus-meter .fill.danger {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #b91c1c, #ef4444);
}
.rel-kus-meter .val { color: var(--fg-3); text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.rel-kus-cta {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--rose);
  text-decoration: none;
  padding: 4px 0;
  transition: color .15s var(--ease);
}
.rel-kus-cta:hover { color: var(--amber); }
.side-section {
  display: flex; flex-direction: column;
  padding: 16px 14px 14px;
  min-height: 0;
  overflow: hidden;
}
.side-section + .side-section { border-top: 1px solid var(--line); }
.side-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 10px;
}
.side-head .title {
  font-family: var(--display); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-2);
}
.side-link {
  font-size: 11px;
  color: var(--fg-4);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color .15s var(--ease);
}
.side-link:hover { color: var(--amber); }
.side-grid {
  flex: 1 1; min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
  overflow-y: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-4) transparent;
}
.side-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-3);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.side-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 24px -16px rgba(0,0,0,.55);
}
.side-card.is-equipped {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber) inset, 0 8px 22px -16px rgba(235,158,0,.55);
}
.side-thumb {
  position: relative;
  width: 100%; aspect-ratio: 3 / 4;
  background-color: var(--ink-4);
  background-size: cover; background-position: center top;
}
.side-equip-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 6px rgba(235,158,0,.6);
}
.side-card-scene .side-thumb {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 8px;
}
.side-scene-label {
  background: rgba(0,0,0,.42);
  color: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .02em;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.side-empty {
  flex: 1 1;
  display: grid; place-items: center;
  padding: 12px;
}
.side-empty-cta {
  color: var(--fg-3);
  font-size: 12px;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.side-empty-cta:hover {
  color: var(--amber);
  border-color: rgba(235,158,0,.4);
}

/* Mini toast (also used in this commit by scene cards) — single slot,
   fixed bottom-center, 3s auto-dismiss in workspace TSX. */
.norya-toast {
  position: fixed;
  left: 50%; bottom: 32px;
  transform: translateX(-50%);
  max-width: 480px;
  padding: 10px 18px;
  background: rgba(20, 21, 24, 0.95);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.65);
  z-index: 60;
  animation: norya-toast-in .18s var(--ease) both;
}
@keyframes norya-toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .norya-toast { animation-duration: .01s; }
}

/* ── chat panel (Discord-refined) ── */
.ws-chat {
  background: var(--ink-2);
  border-right: 1px solid rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  min-height: 0;
  position: relative;
}

/* header */
.chat-head {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,.25);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ink-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.02);
}
.chat-head .who { display: flex; align-items: center; gap: 14px; }
.chat-head .ava-wrap {
  position: relative; flex-shrink: 0;
}
.chat-head .ava {
  width: 44px; height: 44px; border-radius: 999px; object-fit: cover;
  display: block;
}
.chat-head .ava-dot {
  position: absolute; right: -2px; bottom: -2px;
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--good);
  border: 3px solid var(--ink-2);
  box-shadow: 0 0 0 0 rgba(35,165,90,.55);
  animation: pulse 2.5s ease-in-out infinite;
}
.chat-head .name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.chat-head .sub {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 3px;
  display: flex; align-items: center; gap: 6px;
  transition: color .25s var(--ease);
}
/* The static dot before the chip label. Hidden whenever a richer
   .presence-pulse is rendered inline (listening/thinking states) so we
   don't double up. */
.chat-head .sub::before {
  content:""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--good);
  display: inline-block;
}
.chat-head .sub.presence-listening::before,
.chat-head .sub.presence-thinking::before { display: none; }

/* Reacting: temporarily tint the chip rose while a reactive clip plays so
   the user feels the room shift with the avatar. */
.chat-head .sub.presence-reacting { color: var(--rose); }
.chat-head .sub.presence-reacting::before { background: var(--rose); }
.chat-head .sub.presence-reacting .presence-label { text-transform: lowercase; }

/* Listening pulse — small green dot that breathes, signals "Norya is
   attending to you" while you're composing. */
.chat-head .sub.presence-listening { color: var(--good); }
/* Thinking — same shape but amber/blurple and faster, paired with the
   3-dot ellipsis below. */
.chat-head .sub.presence-thinking { color: var(--amber); }

.presence-pulse {
  width: 8px; height: 8px; border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: presence-pulse 1.6s var(--ease) infinite;
  flex-shrink: 0;
}
@keyframes presence-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.0); }
  35%  { box-shadow: 0 0 0 6px rgba(255,255,255,.0); }
  50%  { box-shadow: 0 0 0 6px rgba(255,255,255,.18); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,.0); }
}

/* Animated three-dot ellipsis after "Norya yazıyor" while we're waiting
   on the chat turn response from Spark. */
.presence-dots {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 2px;
}
.presence-dots i {
  width: 4px; height: 4px; border-radius: 999px;
  background: currentColor;
  opacity: 0.4;
  animation: presence-dots 1.2s ease-in-out infinite;
}
.presence-dots i:nth-child(2) { animation-delay: 0.18s; }
.presence-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes presence-dots {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1.0;  transform: translateY(-2px); }
}
.chat-head .actions { display: flex; gap: 2px; }
.chat-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--fg-3);
  transition: all .15s var(--ease);
}
.chat-icon:hover {
  color: var(--fg);
  background: var(--ink-3);
}

/* scroll area */
.chat-scroll {
  flex: 1 1; overflow-y: auto;
  padding: 20px 16px 8px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--ink-2);
}
.chat-scroll::-webkit-scrollbar { width: 8px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border-radius: 999px;
  border: 2px solid var(--ink-2);
}

/* system card */
.system-card {
  align-self: center;
  max-width: 92%;
  margin: 6px 0 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink-3);
  color: var(--fg-3);
  font-size: 11.5px;
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.04);
}
.system-card span {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--teal); display: inline-block;
}

/* messages — refined Discord-ish */
.msg {
  max-width: 78%;
  display: flex; flex-direction: column; gap: 4px;
  margin: 6px 0;
}
.msg .body {
  padding: 10px 14px;
  font-size: 14.5px; line-height: 1.5;
  border-radius: 16px;
  position: relative;
}
.msg.in {
  align-self: flex-start;
  padding-left: 48px;
  position: relative;
}
.msg.in::before {
  content:"";
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  background-image: var(--norya-ava, url('/curated/v1/norya_canonical_v2.jpg'));
  background-size: cover; background-position: center;
}
.msg.in .body {
  background: var(--ink-3);
  color: var(--fg);
  border-bottom-left-radius: 6px;
}
.msg.out { align-self: flex-end; }
.msg.out .body {
  background: var(--amber);
  color: #ffffff;
  border-bottom-right-radius: 6px;
}
.msg .meta {
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0;
  text-transform: none;
  padding: 0 4px;
}
.msg.in .meta { padding-left: 4px; }
.msg.out .meta { align-self: flex-end; padding-right: 4px; }
.msg .memory-tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px;
  padding: 4px 9px;
  background: rgba(235,69,158,.14);
  border: 1px solid rgba(235,69,158,.3);
  border-radius: 999px;
  color: var(--rose);
  font-size: 11px;
  font-weight: 500;
}

/* input */
.chat-input {
  padding: 12px 16px 18px;
  background: var(--ink-2);
  display: flex; flex-direction: column; gap: 10px;
}
.chat-input .box {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 10px;
  background: var(--ink-3);
  border: 1px solid transparent;
  border-radius: 12px;
  transition: all .2s var(--ease);
}
.chat-input .box:focus-within {
  border-color: rgba(88,101,242,.5);
  background: var(--ink-3);
  box-shadow: 0 0 0 4px rgba(88,101,242,.1);
}
.chat-input textarea {
  flex: 1 1;
  min-height: 40px; max-height: 168px;
  padding: 10px 6px;
  resize: none;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--fg);
  overflow-y: auto;
}
.chat-input textarea::placeholder { color: var(--fg-4); }
.chat-input .chat-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
}
.send-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--amber);
  color: #ffffff;
  margin-left: 2px;
  transition: all .15s var(--ease);
}
.send-btn:hover {
  background: var(--amber-2);
  transform: scale(1.05);
}
.send-btn:disabled, .send-btn[aria-disabled="true"] {
  background: var(--ink-4); color: var(--fg-4); cursor: not-allowed;
}

/* typing indicator — three pulsing dots in an "in" bubble.
   Animation cycle staggered so the dots wave instead of pulsing in unison;
   keeps the indicator feeling alive at the GLM ~1.8s latency. */
.msg.is-typing .body.typing-dots {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 12px 16px;
  min-width: 56px;
}
.typing-dots span {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--fg-3);
  display: inline-block;
  animation: typing-bounce 1.2s var(--ease) infinite both;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation-duration: .01s; }
}

/* "yeni mesaj" jump pill — anchored above the composer, only renders when
   the user has scrolled up and missed at least one Norya reply. Click
   handler in workspace scrolls smoothly back to the bottom and clears the
   unread count. */
.chat-jump {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 96px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: var(--amber);
  color: #ffffff;
  font-size: 12.5px; font-weight: 500;
  box-shadow:
    0 8px 24px -8px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.08) inset;
  cursor: pointer;
  z-index: 5;
  animation: chat-jump-in .22s var(--ease) both;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.chat-jump:hover {
  background: var(--amber-2);
  transform: translateX(-50%) translateY(-1px);
}
.chat-jump-badge {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  font-size: 11px; font-weight: 600;
  letter-spacing: .02em;
}
@keyframes chat-jump-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-jump { animation-duration: .01s; }
}

/* ╔════════════ 04 — WARDROBE ════════════╗ */
.wardrobe-stage {
  display: grid;
  grid-template-columns: 480px 1fr;
  height: 100dvh;
  grid-gap: 0;
  gap: 0;
}
.wd-companion {
  position: relative; overflow: hidden;
  margin: 18px 0 18px 18px;
  border-radius: var(--r-xl);
  background: #2b2d31;
}
.wd-companion .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
  filter: saturate(1.08);
}
.wd-companion::after {
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,27,30,0) 35%, rgba(26,27,30,.9) 100%);
}
.wd-companion .floating {
  position: absolute; left: 22px; top: 22px; z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
}
.wd-companion .bottom {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  z-index: 3;
  padding: 18px 20px;
  background: rgba(30,31,34,.7);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
}
.wd-companion .bottom .nm {
  font-family: var(--display); font-size: 22px; margin: 0;
}
.wd-companion .bottom .outfit {
  color: var(--fg-3); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px;
}
.wd-companion .bottom .equip-row {
  margin-top: 14px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.wd-panel {
  margin: 18px;
  background: rgba(30,31,34,.5);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 0;
}
.wd-tabs {
  display: flex; gap: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: var(--r-pill);
  align-self: flex-start;
}
.wd-tabs button {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: 13px; color: var(--fg-3);
  transition: all .25s var(--ease);
  display: flex; align-items: center; gap: 8px;
}
.wd-tabs button.is-active {
  background: rgba(88,101,242,.16);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(88,101,242,.35);
}
.wd-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: 22px;
}
.wd-header h2.display { font-size: 30px; margin: 0; }
.wd-header .lead {
  color: var(--fg-2); font-size: 13.5px; line-height: 1.5;
  margin-top: 6px; max-width: 480px;
}
.wd-balance {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(88,101,242,.07);
  border: 1px solid rgba(88,101,242,.22);
  border-radius: var(--r-pill);
  font-size: 13px;
}
.wd-balance .coin {
  width: 18px; height: 18px; border-radius: 999px;
  background: linear-gradient(180deg, #faa61a, #d4881a);
  box-shadow: 0 0 8px rgba(88,101,242,.4);
}
.wd-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 22px 0 18px;
}
.filter-pill {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: var(--fg-3); font-size: 12px;
  transition: all .25s var(--ease);
}
.filter-pill:hover { color: var(--fg); }
.filter-pill.is-active {
  background: rgba(88,101,242,.12);
  border-color: rgba(88,101,242,.35);
  color: var(--fg);
}
.wd-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  overflow-y: auto;
  padding-right: 6px;
  align-content: start;
  min-height: 0;
}
.wd-grid::-webkit-scrollbar { width: 6px; }
.wd-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 6px; }
.wd-card {
  position: relative;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all .3s var(--ease);
  cursor: pointer;
}
.wd-card:hover {
  transform: translateY(-3px);
  border-color: rgba(88,101,242,.35);
  box-shadow: 0 24px 50px -24px rgba(88,101,242,.25);
}
.wd-card .thumb {
  aspect-ratio: 3/4; background-size: cover; background-position: center;
  position: relative;
}
.wd-card .thumb::after {
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(26,27,30,.92));
}
.wd-card .badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(30,31,34,.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line-strong);
}
.wd-card .badge.premium { color: var(--amber); border-color: rgba(88,101,242,.4); }
.wd-card .badge.equipped { color: var(--good); border-color: rgba(35,165,90,.4); }
.wd-card .info {
  position: relative;
  padding: 12px 14px;
  z-index: 3;
}
.wd-card .info .nm { font-size: 14px; font-weight: 500; }
.wd-card .info .sub { font-size: 11.5px; color: var(--fg-4); margin-top: 2px; }
.wd-card .info .price {
  margin-top: 8px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px;
}
.wd-card .info .price .val {
  color: var(--amber); display: inline-flex; align-items: center; gap: 5px; font-weight: 500;
}
.wd-card .info .price .val::before {
  content:""; width: 9px; height: 9px; border-radius: 999px;
  background: linear-gradient(180deg, #faa61a, #d4881a);
}
.scene-form {
  display: flex;
  flex-direction: column; gap: 16px;
  overflow-y: auto;
  padding-right: 4px;
  min-height: 0;
}
.scene-textarea {
  min-height: 130px;
  padding: 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: 14.5px;
  line-height: 1.5;
  resize: vertical;
}
.scene-textarea:focus {
  border-color: rgba(88,101,242,.45);
  background: rgba(88,101,242,.04);
}
.scene-policy {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.policy-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: var(--fg-2); font-size: 12.5px;
  cursor: pointer;
}
.policy-toggle.is-active {
  background: linear-gradient(180deg, rgba(88,101,242,.18), rgba(88,101,242,.05));
  color: var(--fg);
  border-color: rgba(88,101,242,.35);
}
.policy-toggle.adult.is-active {
  background: linear-gradient(180deg, rgba(235,69,158,.18), rgba(235,69,158,.05));
  color: var(--fg);
  border-color: rgba(235,69,158,.4);
}
.scene-aspect-row { display: flex; gap: 8px; }
.aspect-card {
  flex: 1 1; padding: 12px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  text-align: center; font-size: 12px;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.aspect-card .shape {
  margin: 0 auto 6px; border-radius: 4px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line-strong);
}
.aspect-card.s1 .shape { width: 30px; height: 38px; }
.aspect-card.s2 .shape { width: 38px; height: 38px; }
.aspect-card.s3 .shape { width: 44px; height: 26px; }
.aspect-card.is-active {
  border-color: rgba(88,101,242,.45);
  background: rgba(88,101,242,.06);
}
.identity-lock {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px;
  background: rgba(0,175,233,.05);
  border: 1px solid rgba(0,175,233,.22);
  border-radius: var(--r-md);
  font-size: 12.5px; color: var(--fg-2); line-height: 1.5;
}
.identity-lock strong { color: var(--teal); }
.gift-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  overflow-y: auto;
  padding-right: 4px;
  align-content: start;
  min-height: 0;
}
.gift-card {
  padding: 18px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all .25s var(--ease);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
}
.gift-card:hover {
  border-color: rgba(235,69,158,.4);
  background: rgba(235,69,158,.05);
}
.gift-card .emoji {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(235,69,158,.1);
  font-size: 26px;
}
.gift-card .nm { font-size: 14px; font-weight: 500; }
.gift-card .effect { font-size: 11.5px; color: var(--rose); letter-spacing: 0.04em; }
.gift-card .price {
  font-size: 13px; color: var(--amber);
  display: inline-flex; align-items: center; gap: 5px;
}
.gift-card .price::before {
  content:""; width:8px; height:8px; border-radius:999px;
  background: linear-gradient(180deg,#faa61a,#d4881a);
}

/* ── wardrobe redesign additions ── */
.wd-panel-scroll {
  flex: 1 1;
  overflow-y: auto;
  padding-right: 6px;
  margin-right: -6px;
  display: flex; flex-direction: column; gap: 28px;
  min-height: 0;
}
.wd-panel-scroll::-webkit-scrollbar { width: 8px; }
.wd-panel-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.wd-section { display: flex; flex-direction: column; gap: 12px; }
.wd-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3); margin: 0;
  font-weight: 600;
}
.wd-section-title svg { color: var(--amber); }
.wd-section-title .count {
  margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--ink-3); color: var(--fg-3);
  font-size: 10.5px; letter-spacing: .04em;
}

.wd-hero {
  background: linear-gradient(135deg, rgba(88,101,242,.10) 0%, rgba(235,69,158,.06) 100%);
  border: 1px solid rgba(88,101,242,.18);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.wd-hero-row {
  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px;
}
.wd-card.featured {
  display: grid; grid-template-columns: 110px 1fr;
  background: var(--ink-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.wd-card.featured:hover {
  border-color: rgba(88,101,242,.35);
  transform: translateY(-2px);
}
.wd-card.featured .thumb { aspect-ratio: auto; height: 100%; }
.wd-card.featured .info {
  display: flex; flex-direction: column; gap: 4px; padding: 14px;
}
.wd-card .rarity {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); font-weight: 600;
}
.wd-card.featured .rarity.drop { color: var(--rose); }
.wd-card.featured .nm { font-size: 15px; font-weight: 500; margin-top: 2px; }
.wd-card.featured .sub { font-size: 12px; color: var(--fg-3); }
.wd-card.featured .price {
  margin-top: auto; padding-top: 8px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
}

.gift-featured {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 180px 1fr;
  background: linear-gradient(135deg, rgba(235,69,158,.14) 0%, rgba(88,101,242,.08) 100%);
  border: 1px solid rgba(235,69,158,.22);
  border-radius: var(--r-lg);
  padding: 0;
  min-height: 170px;
}
.gift-featured .hero-bg {
  display: grid; place-items: center;
  font-size: 92px;
  background: linear-gradient(180deg, rgba(235,69,158,.18), rgba(235,69,158,.04));
  border-right: 1px solid rgba(235,69,158,.16);
}
.gift-featured .content {
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.gift-featured .content h3 {
  margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em;
}
.gift-featured .content p {
  margin: 0; color: var(--fg-2); font-size: 13.5px; line-height: 1.55;
  max-width: 460px;
}
.gift-featured .effects {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
}
.gift-featured .effects span {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(235,69,158,.16);
  border: 1px solid rgba(235,69,158,.3);
  color: var(--rose);
  font-size: 11px; font-weight: 500;
}
.gift-featured .cta-row {
  display: flex; align-items: center; gap: 10px; margin-top: auto;
}
.gift-featured .cta-row .btn { padding: 10px 18px; }
.gift-featured .cta-row .meta {
  font-size: 12px; color: var(--fg-3);
}

.gift-card .effects-mini {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.effect-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  background: rgba(235,69,158,.10);
  color: var(--rose);
  border: 1px solid rgba(235,69,158,.2);
}
.effect-chip.warm {
  background: rgba(88,101,242,.10);
  color: var(--amber);
  border-color: rgba(88,101,242,.22);
}
.effect-chip.calm {
  background: rgba(0,175,233,.10);
  color: var(--teal);
  border-color: rgba(0,175,233,.22);
}

.scene-recent { display: flex; flex-direction: column; gap: 10px; }
.scene-recent-row {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; gap: 10px;
}
.scene-thumb {
  aspect-ratio: 3/4;
  border-radius: var(--r-md);
  background-size: cover; background-position: center;
  position: relative;
  cursor: pointer;
  transition: all .25s var(--ease);
  border: 1px solid var(--line);
  overflow: hidden;
}
.scene-thumb:hover { transform: translateY(-2px); border-color: rgba(88,101,242,.4); }
.scene-thumb::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(26,27,30,.9));
}
.scene-thumb .label {
  position: absolute; left: 10px; bottom: 8px;
  font-size: 11px; color: var(--fg);
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.policy-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; gap: 10px;
}
.policy-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--ink-3);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all .25s var(--ease);
  text-align: left;
}
.policy-card .icon-wrap {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--ink-4); color: var(--amber);
  margin-bottom: 4px;
}
.policy-card strong { font-size: 13.5px; font-weight: 600; }
.policy-card small { font-size: 11.5px; color: var(--fg-3); line-height: 1.4; }
.policy-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.policy-card.is-active {
  border-color: rgba(88,101,242,.5);
  background: linear-gradient(180deg, rgba(88,101,242,.14), rgba(88,101,242,.04));
  box-shadow: 0 0 0 1px rgba(88,101,242,.3), 0 8px 24px -10px rgba(88,101,242,.35);
}
.policy-card.is-active .icon-wrap { background: var(--amber); color: #ffffff; }
.policy-card.adult.is-active {
  border-color: rgba(235,69,158,.5);
  background: linear-gradient(180deg, rgba(235,69,158,.14), rgba(235,69,158,.04));
  box-shadow: 0 0 0 1px rgba(235,69,158,.3), 0 8px 24px -10px rgba(235,69,158,.35);
}
.policy-card.adult.is-active .icon-wrap { background: var(--rose); color: #fff; }
.policy-card.adult .icon-wrap { color: var(--rose); }

.scene-suggestions { display: flex; gap: 6px; flex-wrap: wrap; }
.scene-suggest-pill {
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 999px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--fg-2);
  transition: all .15s var(--ease);
  cursor: pointer;
}
.scene-suggest-pill:hover {
  background: var(--ink-4);
  color: var(--fg);
  border-color: rgba(88,101,242,.3);
}

/* ╔════════════ 00 — SPLASH INTRO ════════════╗ */
.splash {
  position: fixed; inset: 0;
  z-index: 9999;
  background:
    radial-gradient(70% 70% at 50% 50%, #1e1f22 0%, #14151a 60%, #0d0e12 100%);
  display: grid; place-items: center;
  cursor: pointer;
  overflow: hidden;
  animation: splash-in .8s var(--ease) both;
}
.splash.is-closing { animation: splash-out .7s var(--ease) forwards; }
@keyframes splash-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes splash-out {
  to { opacity: 0; transform: scale(1.05); pointer-events: none; }
}
.splash-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 45% at 50% 50%, rgba(88,101,242,.28) 0%, transparent 70%),
    radial-gradient(40% 40% at 28% 72%, rgba(235,69,158,.16) 0%, transparent 70%),
    radial-gradient(40% 40% at 72% 28%, rgba(0,175,233,.12) 0%, transparent 70%);
  animation: splash-bg-pulse 6s ease-in-out infinite;
}
@keyframes splash-bg-pulse {
  0%, 100% { opacity: 0.88; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.06); }
}
.splash-orb {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(88,101,242,.42) 0%, transparent 60%);
  filter: blur(28px);
  animation: splash-orb 6s ease-in-out infinite;
}
@keyframes splash-orb {
  0%, 100% { transform: scale(0.92); opacity: 0.7; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.splash-ring {
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 999px;
  border: 1px solid rgba(88,101,242,.18);
  animation: splash-ring-pulse 4s ease-out infinite;
}
.splash-ring.delay-1 { animation-delay: .8s; }
.splash-ring.delay-2 { animation-delay: 1.6s; }
@keyframes splash-ring-pulse {
  0%   { transform: scale(0.6); opacity: 0; }
  10%  { opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

.splash-particles { position: absolute; inset: 0; pointer-events: none; }
.splash-particles span {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 4px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 14px rgba(255,255,255,.45), 0 0 28px rgba(88,101,242,.4);
  animation: particle-float 6s ease-in-out infinite;
  animation-delay: var(--d);
  opacity: 0;
}
@keyframes particle-float {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  20%  { opacity: 1; }
  80%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-80px) scale(1.2); }
}

.splash-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 22px;
  text-align: center;
  padding: 0 24px;
}

.splash-mark-wrap {
  width: 92px; height: 92px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(88,101,242,.35) 0%, rgba(88,101,242,.06) 100%);
  border: 1px solid rgba(88,101,242,.5);
  display: grid; place-items: center;
  box-shadow:
    0 30px 80px -20px rgba(88,101,242,.65),
    inset 0 1px 0 rgba(255,255,255,.18);
  animation: splash-mark-in 1s var(--ease) .2s both;
  position: relative;
}
.splash-mark-wrap::before {
  content: ""; position: absolute; inset: -2px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(88,101,242,.55), rgba(235,69,158,.4) 70%, rgba(0,175,233,.35));
  z-index: -1;
  filter: blur(10px);
  opacity: .55;
  animation: splash-aura 4s ease-in-out infinite alternate;
}
@keyframes splash-aura {
  from { opacity: .35; }
  to   { opacity: .7; }
}
.splash-mark {
  font-family: var(--display);
  font-size: 50px;
  color: var(--fg);
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 4px 18px rgba(88,101,242,.5);
}
@keyframes splash-mark-in {
  from { opacity: 0; transform: scale(.7) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.splash-name {
  font-family: var(--display);
  font-size: clamp(56px, 9vw, 92px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex; gap: 2px;
}
.splash-name span {
  display: inline-block;
  opacity: 0;
  transform: translateY(34px);
  animation: letter-in .9s cubic-bezier(.2,.7,.1,1) calc(.75s + var(--i) * .09s) forwards;
  background: linear-gradient(180deg, #ffffff 0%, #c7cbff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 24px rgba(88,101,242,.3);
}
@keyframes letter-in {
  to { opacity: 1; transform: translateY(0); }
}

.splash-tagline {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--fg-3);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 500;
}
.splash-tagline span {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: letter-in .9s cubic-bezier(.2,.7,.1,1) 1.55s forwards;
}

.splash-line {
  width: 1px; height: 38px;
  background: linear-gradient(180deg, transparent, rgba(88,101,242,.7), transparent);
  margin-top: 12px;
  opacity: 0;
  animation: splash-line-in .6s var(--ease) 2.1s forwards;
}
@keyframes splash-line-in {
  to { opacity: 1; }
}

.splash-hint {
  margin-top: 52px;
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0;
  animation: hint-pulse 2.4s ease-in-out 2.6s infinite;
}
@keyframes hint-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .splash *, .splash { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ── login presence: alive layer ── */
.pres-portrait-wrap {
  position: absolute; inset: 0;
  will-change: transform;
  transition: transform .3s var(--ease);
}
.login-presence .pres-elapsed {
  position: absolute; right: 28px; top: 28px; z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: rgba(20,21,26,.68);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--fg-2);
}
.pres-elapsed .pulse {
  width: 7px; height: 7px; border-radius: 999px; background: var(--good);
  box-shadow: 0 0 0 0 rgba(35,165,90,.55);
  animation: pulse 2.5s ease-in-out infinite;
}
.pres-elapsed .label { color: var(--fg-3); }
.pres-elapsed strong { color: var(--fg); font-weight: 600; }

.pres-memories {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
.pres-memory-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: rgba(20,21,26,.78);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  color: var(--fg-2);
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0; transform: translateY(8px);
  animation: mem-in 1s var(--ease) forwards;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.7);
}
.pres-memory-chip::before {
  content:""; width: 5px; height: 5px; border-radius: 999px;
  background: var(--rose);
  box-shadow: 0 0 8px var(--rose);
}
.pres-memory-chip .em { color: var(--fg); font-weight: 500; }
@keyframes mem-in {
  to { opacity: 1; transform: translateY(0); }
}
.pres-memory-chip.m1 { left: 6%;  top: 12%;  animation-delay: .9s; }
.pres-memory-chip.m2 { right: 8%; top: 36%;  animation-delay: 1.4s; }
.pres-memory-chip.m3 { left: 10%; bottom: 32%; animation-delay: 1.9s; }

.pres-fireflies {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
}
.pres-fireflies span {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 3px; height: 3px; border-radius: 999px;
  background: rgba(255,231,200,.7);
  box-shadow: 0 0 10px rgba(255,231,200,.6), 0 0 22px rgba(88,101,242,.35);
  opacity: 0;
  animation: firefly 7s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes firefly {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  25%  { opacity: 0.9; }
  75%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.2); }
}

.login-presence .pres-quote {
  z-index: 4;
}
.pres-typewriter {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  min-height: 1.4em;
  color: var(--fg);
}
.pres-typewriter em {
  font-style: italic;
  background: linear-gradient(180deg, #f6f1ff 0%, #c7cbff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pres-typewriter .cursor {
  display: inline-block;
  width: 2px; height: 1em;
  vertical-align: -0.18em;
  margin-left: 4px;
  background: var(--amber);
  animation: cursor-blink 1.05s steps(1) infinite;
  box-shadow: 0 0 10px var(--amber);
}
@keyframes cursor-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.pres-subline {
  margin: 0; color: var(--fg-3); font-size: 14px; line-height: 1.6;
  max-width: 480px;
}

/* right pane: stronger hero */
.login-form-pane h1.display.hero {
  font-size: clamp(36px, 4vw, 50px);
  line-height: 1.05;
  margin: 14px 0 14px;
  max-width: 460px;
}
.login-form-pane h1.display.hero em {
  font-style: italic; color: var(--amber);
}
.login-form-pane .eyebrow.live {
  display: inline-flex; align-items: center; gap: 8px;
}
.login-form-pane .eyebrow.live::before {
  content:""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.6); opacity: .6; }
}

/* ── login: cinematic image treatment ── */
.pres-portrait-wrap img {
  filter: saturate(1.08) contrast(1.05);
}
/* color-grade duotone overlay */
.pres-grade {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 12% 10%, rgba(88,101,242,.30), transparent 65%),
    radial-gradient(50% 70% at 90% 90%, rgba(235,69,158,.20), transparent 70%),
    linear-gradient(180deg, rgba(20,21,26,0) 40%, rgba(8,9,12,.92) 100%);
  mix-blend-mode: normal;
}
/* film grain (SVG noise inline) */
.pres-grain {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain-shift 1.2s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0); }
  16%  { transform: translate(-2%,1%); }
  32%  { transform: translate(1%,-2%); }
  48%  { transform: translate(-1%,2%); }
  64%  { transform: translate(2%,1%); }
  80%  { transform: translate(-2%,-1%); }
  100% { transform: translate(0,0); }
}
/* letterbox top + bottom */
.pres-letterbox::before, .pres-letterbox::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 38px;
  background: linear-gradient(180deg, #07080c 0%, transparent 100%);
  z-index: 4; pointer-events: none;
}
.pres-letterbox::before { top: 0; }
.pres-letterbox::after { bottom: 0; background: linear-gradient(0deg, #07080c 0%, transparent 100%); }
/* slow scan-line moving down */
.pres-scanline {
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(88,101,242,.55) 50%, transparent);
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 5;
  animation: scan 9s linear infinite;
  opacity: .55;
}
@keyframes scan {
  0%   { top: -3px; opacity: 0; }
  6%   { opacity: .55; }
  94%  { opacity: .55; }
  100% { top: 100%; opacity: 0; }
}
/* film-still watermark (top-left, replacing the old chips) */
.pres-stamp {
  position: absolute; left: 28px; top: 28px; z-index: 6;
  display: flex; flex-direction: column; gap: 6px;
  font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", monospace;
  color: rgba(255,255,255,.78);
  pointer-events: none;
}
.pres-stamp .rec {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: .22em;
}
.pres-stamp .rec .dot {
  width: 8px; height: 8px; border-radius: 999px; background: #ff3b3b;
  box-shadow: 0 0 12px #ff3b3b;
  animation: rec-blink 1.4s ease-in-out infinite;
}
@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
.pres-stamp .frame {
  font-size: 10.5px; letter-spacing: .26em;
  color: rgba(255,255,255,.5);
}
.pres-stamp .frame strong { color: rgba(255,255,255,.85); font-weight: 600; }

/* corner crosshair markers (cinematic film-frame guides) */
.pres-cross {
  position: absolute; width: 18px; height: 18px;
  z-index: 6; pointer-events: none;
  opacity: .45;
}

.pres-cross::before, .pres-cross::after {
  content: ""; position: absolute; background: rgba(255,255,255,.9);
}
.pres-cross::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.pres-cross::after { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.pres-cross.tl { left: 22px; top: 70px; }
.pres-cross.tr { right: 22px; top: 70px; }
.pres-cross.bl { left: 22px; bottom: 70px; }
.pres-cross.br { right: 22px; bottom: 70px; }

/* darker base behind everything for stronger contrast */
.login-presence { background: #0a0c10; }

/* ── creation: polish ── */
.creation-form-pane h2.display {
  font-size: 34px; line-height: 1.12;
}
.creation-progress .step-icon {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: var(--fg-4);
  flex-shrink: 0;
  transition: all .25s var(--ease);
}
.creation-progress .step.done .step-icon {
  background: rgba(88,101,242,.16);
  border-color: rgba(88,101,242,.45);
  color: var(--amber);
}
.creation-progress .step.is-active .step-icon {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
  box-shadow:
    0 0 0 4px rgba(88,101,242,.18),
    0 6px 18px -6px rgba(88,101,242,.55);
}

/* preview pane upgrades */
.creation-preview-pane .canvas::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 25%, rgba(88,101,242,.22), transparent 65%),
    radial-gradient(50% 50% at 80% 80%, rgba(235,69,158,.14), transparent 70%);
}

/* radial identity dial */
.identity-dial {
  position: absolute; right: 24px; top: 24px;
  width: 84px; height: 84px;
  z-index: 5;
}
.identity-dial svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.identity-dial circle { fill: none; stroke-width: 4; }
.identity-dial .track { stroke: rgba(255,255,255,.10); }
.identity-dial .fill {
  stroke: var(--amber);
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--amber));
}
.identity-dial .label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
}
.identity-dial .label .val {
  font-family: var(--display);
  font-size: 22px;
  color: var(--fg);
  letter-spacing: -.02em;
  line-height: 1;
}
.identity-dial .label small {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3);
  font-family: var(--sans);
  margin-top: 4px;
  line-height: 1;
}

/* voice sample bubble */
.voice-sample {
  position: absolute; left: 24px; top: 24px;
  z-index: 5;
  max-width: 260px;
  display: flex; flex-direction: column; gap: 6px;
  animation: voice-in .6s var(--ease);
}
@keyframes voice-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.voice-sample .speech {
  padding: 12px 16px;
  background: rgba(20,21,26,.78);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  border-top-left-radius: 4px;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.42;
  font-style: italic;
  font-family: var(--display);
}
.voice-sample .meta {
  display: inline-flex; align-items: center; gap: 7px;
  padding-left: 10px;
  font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.voice-sample .meta::before {
  content:""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* refined color swatches */
.color-swatch {
  width: 36px; height: 36px;
  position: relative;
  border: 2px solid rgba(255,255,255,.06);
  transition: transform .2s var(--ease);
}
.color-swatch::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: all .25s var(--ease);
  pointer-events: none;
}
.color-swatch.is-active::after {
  border-color: var(--amber);
  box-shadow: 0 0 14px rgba(88,101,242,.4);
}
.color-swatch.is-active { box-shadow: none; }

/* refined choice card with inline radio dot */
.choice {
  padding: 14px 14px 14px 36px;
  position: relative;
}
.choice::before {
  content: "";
  position: absolute; left: 14px; top: 18px;
  width: 12px; height: 12px;
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 999px;
  transition: all .2s var(--ease);
  background: transparent;
}
.choice.is-active::before {
  border-color: var(--amber);
  background: radial-gradient(circle at center, var(--amber) 45%, transparent 50%);
  box-shadow: 0 0 8px rgba(88,101,242,.55);
}
.choice strong { font-size: 13.5px; }
.choice small { font-size: 11.5px; }

/* slider thumb at fill end */
.slider-row {
  background: var(--ink-3);
  border-color: var(--line);
}
.slider-row .track {
  background: rgba(255,255,255,.06);
}
.slider-row .track .fill {
  position: relative;
}
.slider-row .track .fill::after {
  content: "";
  position: absolute; right: -7px; top: 50%;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid var(--amber);
  transform: translateY(-50%);
  box-shadow: 0 4px 10px rgba(0,0,0,.4), 0 0 10px rgba(88,101,242,.4);
}

/* preview summary refinements */
.preview-summary {
  padding: 20px 22px;
}
.preview-summary .name {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 2px;
}
.preview-grid .cell {
  padding: 9px 11px;
  background: var(--ink-3);
  border: 1px solid var(--line);
}
.preview-grid .cell small {
  color: var(--fg-4);
}
.preview-grid .cell span {
  color: var(--fg);
  font-weight: 500;
}

/* ╔════════════ 11.5 — ONBOARDING CHARACTER MAGAZINE ════════════╗ */
/* 5 curated character cards; the fresh-user landing path before chat. */
.dergi-stage {
  min-height: 100vh;
  background: var(--ink-1);
  padding: 64px 28px 96px;
  display: flex; flex-direction: column;
  gap: 48px;
  font-family: var(--sans);
}
.dergi-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 14px;
}
.dergi-header .eyebrow {
  font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-4);
}
.dergi-header h1 {
  font-family: var(--display); font-size: 38px;
  color: var(--fg); letter-spacing: -0.01em;
  line-height: 1.15; margin: 0;
}
.dergi-header .lead {
  font-size: 14.5px; color: var(--fg-3);
  line-height: 1.55; margin: 0;
}
.dergi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 22px;
  gap: 22px;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}
.dergi-card {
  position: relative;
  display: flex; flex-direction: column;
  text-align: left;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: inherit;
  cursor: pointer;
  transition: transform .35s var(--ease), border-color .25s var(--ease),
              box-shadow .35s var(--ease), opacity .25s var(--ease);
  font-family: inherit;
  padding: 0;
}
.dergi-card:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: rgba(88,101,242,.35);
  box-shadow: 0 18px 40px -18px rgba(88,101,242,.35);
}
.dergi-card.is-selected {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 24px 50px -20px rgba(88,101,242,.55);
}
.dergi-card.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.dergi-card .hero {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center 30%;
  background-blend-mode: overlay;
  position: relative;
}
.dergi-card .hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(26,27,30,.94) 100%);
}
.dergi-card .hero-mark {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(20,20,22,.78);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--fg); font-family: var(--display);
  font-size: 13px; letter-spacing: .01em;
  z-index: 1;
}
.dergi-card .hero-mark svg { color: var(--amber); }
.dergi-card .body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1 1;
}
.dergi-card .tagline {
  font-size: 12.5px; color: var(--fg-3); line-height: 1.45;
}
.dergi-card .quote {
  margin: 0; padding: 10px 12px;
  background: rgba(255,255,255,.02);
  border-left: 2px solid rgba(88,101,242,.35);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px; color: var(--fg-2);
  font-style: italic; line-height: 1.45;
}
.dergi-card .cta {
  margin-top: auto;
  padding: 11px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(88,101,242,.18), rgba(88,101,242,.06));
  border: 1px solid rgba(88,101,242,.32);
  color: var(--fg);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.01em;
  transition: background .2s var(--ease);
}
.dergi-card:hover:not(:disabled) .cta {
  background: linear-gradient(180deg, rgba(88,101,242,.28), rgba(88,101,242,.12));
}
.dergi-card.is-selected .cta {
  background: linear-gradient(180deg, var(--amber), var(--amber-2));
  color: white;
  border-color: var(--amber);
}
.dergi-card .cta-dots {
  display: inline-flex; align-items: center; gap: 3px;
}
.dergi-card .cta-dots i {
  width: 4px; height: 4px; border-radius: 999px;
  background: currentColor; opacity: 0.5;
  animation: presence-dots 1.2s ease-in-out infinite;
}
.dergi-card .cta-dots i:nth-child(2) { animation-delay: 0.18s; }
.dergi-card .cta-dots i:nth-child(3) { animation-delay: 0.36s; }
.dergi-error {
  max-width: 720px; margin: 0 auto;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(235,69,158,.10);
  border: 1px solid rgba(235,69,158,.32);
  color: var(--rose); font-size: 13px;
  text-align: center;
}
.dergi-footer {
  text-align: center;
  color: var(--fg-4); font-size: 12.5px;
}
.dergi-footer a { color: var(--amber); }
.dergi-footer a:hover { color: var(--fg); }
.dergi-loading {
  align-items: center; justify-content: center;
}
.dergi-spinner {
  width: 44px; height: 44px; border-radius: 999px;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: var(--amber);
  animation: norya-spin 0.9s linear infinite;
}
.dergi-loading-text { color: var(--fg-3); font-size: 13px; }

/* ╔════════════ 12 — SETTINGS MODAL ════════════╗ */
/* Account profile + logout. Backdrop click closes, ESC handled by the
   browser's native dialog focus model since we set role="dialog". */
.settings-overlay {
  position: fixed; inset: 0;
  background: rgba(12,13,15,.62);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 1000;
  padding: 24px;
  animation: norya-fade-in .18s var(--ease);
}
.settings-card {
  width: 100%; max-width: 480px;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  gap: 20px;
  padding: 24px 26px 26px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  animation: settingsCardIn .22s var(--ease);
}
@keyframes settingsCardIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.settings-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.settings-head .eyebrow {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-4);
}
.settings-head h2 {
  margin: 4px 0 0 0;
  font-size: 26px; color: var(--fg); letter-spacing: -0.01em;
}
.settings-close {
  width: 32px; height: 32px;
  border-radius: 10px;
  color: var(--fg-3);
  display: grid; place-items: center;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  transition: all .2s var(--ease);
}
.settings-close:hover {
  color: var(--fg); background: rgba(255,255,255,.07);
  border-color: var(--fg-4);
}
.settings-form { display: flex; flex-direction: column; gap: 16px; }
.settings-form .field-hint {
  font-size: 11px; color: var(--fg-4); margin-top: 4px; line-height: 1.45;
}
.settings-form .field.readonly .readonly-val {
  padding: 12px 14px;
  background: rgba(255,255,255,.02);
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-size: 13px; color: var(--fg-3);
  font-family: var(--sans);
  letter-spacing: 0;
}
.settings-error {
  padding: 10px 12px;
  background: rgba(235,69,158,.08);
  border: 1px solid rgba(235,69,158,.25);
  border-radius: 10px;
  color: var(--rose); font-size: 12px;
}
.settings-saved {
  padding: 10px 12px;
  background: rgba(35,165,90,.10);
  border: 1px solid rgba(35,165,90,.28);
  border-radius: 10px;
  color: var(--good); font-size: 12px;
}
.settings-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 4px;
}
.settings-actions .btn { padding: 11px 18px; font-size: 13px; gap: 8px; }
.settings-danger {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.settings-danger .danger-head {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-4);
}
.settings-danger .btn { align-self: flex-start; padding: 10px 16px; font-size: 13px; gap: 8px; }

/* responsive lite */
/* ── login: living AI orb presence ──────────────────────────────── */
.orb-stage {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 18%, #0f1020 0%, #0a0b14 46%, #05060a 100%);
}
.orb-stage::before { display: none; }

.orb-field {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 1;
  transition: transform .35s var(--ease);
  will-change: transform;
}

/* outer breathing aura */
.orb-aura {
  position: absolute;
  width: min(72vmin, 600px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(124,109,255,.45) 0%, rgba(88,101,242,.30) 38%, rgba(235,69,158,.12) 60%, transparent 72%);
  filter: blur(44px);
  animation: orb-breathe 7.5s ease-in-out infinite;
}

/* spinning iridescent halo ring */
.orb-halo {
  position: absolute;
  width: min(48vmin, 400px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg,
    #5865f2, #8b7bff, #eb459e, #6f8bff, #36d6c3, #5865f2);
  filter: blur(20px);
  opacity: .7;
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 58%, #000 76%, transparent 84%);
  mask: radial-gradient(circle, transparent 50%, #000 58%, #000 76%, transparent 84%);
  animation: orb-spin 22s linear infinite, orb-breathe 7.5s ease-in-out infinite;
}

/* expanding ripples */
.orb-ripple {
  position: absolute;
  width: min(34vmin, 280px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(139,123,255,.4);
  animation: orb-ripple 5.5s ease-out infinite;
}
.orb-ripple.d2 { animation-delay: 2.75s; }

/* glowing core sphere */
.orb-core {
  position: relative;
  width: min(30vmin, 248px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    #ffffff 0%, #cdd3ff 14%, #6f7bff 40%, #3a3a86 72%, #181436 100%);
  box-shadow:
    inset -16px -22px 56px rgba(6,6,18,.85),
    inset 10px 12px 40px rgba(180,190,255,.35),
    0 0 70px rgba(88,101,242,.55), 0 0 140px rgba(124,109,255,.35);
  animation: orb-breathe 7.5s ease-in-out infinite;
  overflow: hidden;
}
/* drifting inner energy */
.orb-iris {
  position: absolute; inset: -25%;
  background: radial-gradient(40% 40% at 30% 30%, rgba(54,214,195,.55), transparent 60%),
              radial-gradient(45% 45% at 72% 64%, rgba(235,69,158,.5), transparent 62%);
  mix-blend-mode: screen;
  filter: blur(8px);
  animation: orb-iris 11s ease-in-out infinite alternate;
}
.orb-shine {
  position: absolute; top: 14%; left: 20%;
  width: 34%; height: 26%; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.9), transparent 70%);
  filter: blur(3px);
}

/* orbiting particles */
.orb-orbit {
  position: absolute;
  width: min(48vmin, 400px); aspect-ratio: 1;
  animation: orb-spin 26s linear infinite;
}
.orb-orbit span {
  position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(220,225,255,.95);
  box-shadow: 0 0 10px rgba(139,123,255,.9), 0 0 20px rgba(88,101,242,.6);
  transform: rotate(calc(var(--i) * 60deg)) translateX(min(24vmin, 200px));
  animation: orb-twinkle 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.7s);
}

/* subtle texture */
.orb-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}
.orb-spark { z-index: 2; }

/* AI state chip (top-left) */
.orb-state {
  position: absolute; left: 30px; top: 30px; z-index: 5;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  background: rgba(16,17,26,.55);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 12px; letter-spacing: .04em;
  color: var(--fg-2);
}
.orb-state-pulse {
  width: 7px; height: 7px; border-radius: 999px; background: var(--amber);
  box-shadow: 0 0 0 0 rgba(88,101,242,.55);
  animation: pulse-cool 2.6s ease-in-out infinite;
}
@keyframes pulse-cool {
  0%, 100% { box-shadow: 0 0 0 0 rgba(88,101,242,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(88,101,242,0); }
}

.orb-quote { z-index: 5; }
.orb-memories { z-index: 4; }

/* reactive: brighten + swell while the user types */
.orb-stage.is-active .orb-core {
  box-shadow:
    inset -14px -20px 52px rgba(6,6,18,.8),
    inset 12px 14px 44px rgba(200,208,255,.5),
    0 0 100px rgba(88,101,242,.8), 0 0 190px rgba(124,109,255,.5);
  transform: scale(1.05);
}
.orb-stage.is-active .orb-aura { transform: scale(1.08); filter: blur(40px); }
.orb-stage.is-active .orb-halo { opacity: .92; }
.orb-stage .orb-core,
.orb-stage .orb-aura,
.orb-stage .orb-halo { transition: transform .8s var(--ease), box-shadow .8s var(--ease), opacity .8s var(--ease); }

@keyframes orb-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes orb-spin {
  to { transform: rotate(360deg); }
}
@keyframes orb-iris {
  0%   { transform: translate(-4%, 3%) rotate(0deg); }
  100% { transform: translate(5%, -4%) rotate(40deg); }
}
@keyframes orb-ripple {
  0%   { transform: scale(.7); opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes orb-twinkle {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .orb-aura, .orb-halo, .orb-core, .orb-iris, .orb-orbit, .orb-ripple,
  .orb-orbit span, .orb-state-pulse { animation: none !important; }
  .orb-ripple { opacity: 0; }
}

/* Tablet / small laptop: collapse the secondary panes but KEEP Norya's
   stage beside the chat — the live avatar is the product, not a desktop-only
   extra. Only the right side rail (relationship/wardrobe/scenes) drops; all
   of it is still reachable from the nav rail + /wardrobe. */
/* ══════════════ Wardrobe — dressing room ══════════════
   Persistent companion in the centre "room", contextual rack on the
   right (wardrobe / gift / scene), slim category rail on the left.
   Backend-agnostic: pure presentation over the same WardrobeItem data. */
.dr-stage {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100dvh;
  background: radial-gradient(120% 80% at 50% -10%, #15131f 0%, #0d0e15 45%, #08080d 100%);
}
.dr-hud {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.dr-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: var(--fg-2); font-size: 13px; transition: all .2s var(--ease);
}
.dr-back:hover { color: var(--fg); border-color: var(--line-strong); }
.dr-seg {
  display: flex; gap: 4px; margin: 0 auto;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  padding: 4px; border-radius: var(--r-pill);
}
.dr-seg button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--r-pill);
  font-size: 13px; color: var(--fg-3); transition: all .2s var(--ease);
}
.dr-seg button:hover { color: var(--fg-2); }
.dr-seg button.is-active {
  background: rgba(88,101,242,.18); color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(88,101,242,.4);
}
.dr-hud-right { display: flex; align-items: center; gap: 10px; }
.dr-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--teal); }
.dr-coin {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  font-size: 13px; color: var(--fg);
}
.dr-coin .coin { width: 14px; height: 14px; border-radius: 999px; background: linear-gradient(180deg,#faa61a,#d4881a); box-shadow: 0 0 8px rgba(250,166,26,.5); }
.dr-topup {
  padding: 7px 13px; border-radius: var(--r-pill);
  background: rgba(88,101,242,.16); border: 1px solid rgba(88,101,242,.35);
  color: var(--fg); font-size: 12.5px; transition: all .2s var(--ease);
}
.dr-topup:hover:not(:disabled) { background: rgba(88,101,242,.28); }
.dr-topup:disabled { opacity: .5; }
.dr-body { display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
.dr-body.has-cats { grid-template-columns: 132px 1fr 380px; }
.dr-cats {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 12px; overflow-y: auto;
  border-right: 1px solid var(--line);
}
.dr-cat {
  text-align: left; padding: 10px 14px; border-radius: var(--r-md);
  font-size: 12.5px; color: var(--fg-3);
  border: 1px solid transparent; transition: all .2s var(--ease);
}
.dr-cat:hover { color: var(--fg-2); background: rgba(255,255,255,.03); }
.dr-cat.is-active { color: var(--fg); background: rgba(88,101,242,.12); border-color: rgba(88,101,242,.3); }
.dr-room {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 0;
}
.dr-spot {
  position: absolute; top: -12%; left: 50%; transform: translateX(-50%);
  width: min(70%, 560px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,109,255,.28), rgba(88,101,242,.12) 45%, transparent 70%);
  filter: blur(46px); z-index: 0;
  animation: orb-breathe 9s ease-in-out infinite;
}
.dr-floor {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: min(60%, 460px); height: 64px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 72%);
  z-index: 1;
}
.dr-figure {
  position: relative; z-index: 2;
  width: min(78%, 440px); height: 90%;
  background-size: cover; background-position: center top;
  border-radius: 24px 24px 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  filter: saturate(1.08) contrast(1.03);
  animation: dr-breathe 8s ease-in-out infinite;
}
@keyframes dr-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.005); }
}
.dr-nameplate {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 3; text-align: center; max-width: 84%;
  padding: 14px 24px; border-radius: var(--r-lg);
  background: rgba(16,17,24,.6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
}
.dr-nameplate .nm { font-family: var(--display); font-size: 24px; margin: 0; }
.dr-nameplate .outfit {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 6px 0 0; font-size: 12px; color: var(--fg-2); letter-spacing: .04em;
}
.dr-nameplate .outfit .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--good); box-shadow: 0 0 8px var(--good); }
.dr-nameplate .hint { margin: 8px 0 0; font-size: 11.5px; color: var(--fg-4); }
.dr-toast {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 4;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: rgba(235,69,158,.14); border: 1px solid rgba(235,69,158,.34);
  font-size: 12.5px; color: var(--fg); white-space: nowrap;
  animation: norya-fade-in .3s var(--ease);
}
.dr-error {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 4;
  padding: 9px 16px; border-radius: var(--r-md); text-align: center;
  background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.4);
  font-size: 12.5px; color: var(--fg); max-width: 80%;
}
.dr-rack {
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--line);
  background: rgba(255,255,255,.015);
}
.dr-rack-head { padding: 22px 22px 14px; }
.dr-rack-head h2.display { font-size: 22px; margin: 0; }
.dr-rack-head p { margin: 6px 0 0; font-size: 12.5px; color: var(--fg-3); line-height: 1.5; }
.dr-rack-scroll {
  flex: 1 1; min-height: 0; overflow-y: auto;
  padding: 4px 22px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.dr-rack-scroll::-webkit-scrollbar { width: 8px; }
.dr-rack-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 8px; }
.dr-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 12px; gap: 12px; }
.dr-rack .gift-grid { grid-template-columns: repeat(2, 1fr); }
.dr-rack .grid-2 { grid-template-columns: 1fr 1fr; }
.dr-rack .policy-cards { grid-template-columns: 1fr; }
.dr-scene-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.dr-scene-soon { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-4); }
@media (max-width: 1100px) {
  .dr-stage { height: auto; min-height: 100dvh; }
  .dr-body, .dr-body.has-cats { grid-template-columns: 1fr; grid-auto-rows: min-content; }
  .dr-cats { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .dr-room { min-height: 50vh; }
  .dr-rack { border-left: 0; border-top: 1px solid var(--line); }
  .dr-rack-scroll { overflow: visible; }
}
@media (max-width: 640px) {
  .dr-hud { flex-wrap: wrap; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 14px 12px; }
  .dr-back { order: 1; }
  .dr-hud-right { order: 2; margin-left: auto; }
  .dr-seg { order: 3; margin: 0; width: 100%; }
  .dr-seg button { flex: 1 1; justify-content: center; padding: 9px 8px; }
  .dr-room { min-height: 44dvh; }
  .dr-figure { width: min(72%, 320px); }
  .dr-rack-head { padding: 18px 16px 12px; }
  .dr-rack-scroll { padding: 4px 16px max(20px, env(safe-area-inset-bottom)); }
}


@media (max-width: 1100px) {
  .login-stage, .creation-stage, .wardrobe-stage {
    grid-template-columns: 1fr;
  }
  .login-presence, .creation-preview-pane, .wd-companion {
    min-height: 320px; margin: 18px;
  }
  .workspace-stage { grid-template-columns: 64px minmax(280px, 1fr) 1.2fr; }
  .ws-side { display: none; }
  .ws-insights { display: none; }
  .policy-cards { grid-template-columns: 1fr; }
  .scene-recent-row { grid-template-columns: repeat(2, 1fr); }
  .wd-hero-row { grid-template-columns: 1fr; }
  .gift-featured { grid-template-columns: 1fr; }
  .gift-featured .hero-bg { border-right: 0; border-bottom: 1px solid rgba(235,69,158,.16); min-height: 120px; }
}

/* Phone: stack the stage ABOVE the chat (slim nav rail stays as a left
   column spanning both rows). dvh + safe-area keep the composer and the
   rail's bottom controls clear of the browser chrome / iOS home bar. */
@media (max-width: 640px) {
  .workspace-stage {
    grid-template-columns: 56px 1fr;
    grid-template-rows: minmax(0, 38dvh) minmax(0, 1fr);
    grid-template-areas:
      "rail stage"
      "rail chat";
  }
  .ws-rail  { grid-area: rail; padding: 16px 0 max(16px, env(safe-area-inset-bottom)); }
  .ws-stage { grid-area: stage; display: block; min-height: 0; }
  .ws-chat  { grid-area: chat; border-right: 0; min-height: 0; }

  /* Tighter chat header so the avatar + name + action icons fit ~360px
     without the name overflowing. */
  .chat-head { padding: 12px 14px; }
  .chat-head .who { min-width: 0; }
  .chat-head .name {
    max-width: 44vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* iOS Safari zooms the page when a focused control's font is < 16px.
     Force 16px on phones (beats inline font-size: …) so focusing the
     composer / memory / research / settings fields never jump-zooms. */
  input, textarea, select { font-size: 16px !important; }
}

/* ── Login on phones (iPhone 15 ≈ 390px CSS px) ──────────────────────
   Orb becomes a compact hero band on top, form flows below. dvh +
   safe-area keep content clear of the dynamic island / home indicator.
   Floating memory chips + bottom quote are dropped on phone — they
   crowd the short band; the right-hand hero copy carries the message. */
@media (max-width: 640px) {
  .login-stage { min-height: 100dvh; }
  .login-presence {
    min-height: 0;
    height: clamp(220px, 32dvh, 300px);
    margin: 12px 12px 0;
    border-radius: var(--r-lg);
  }
  .orb-aura  { width: min(64vmin, 300px); filter: blur(34px); }
  .orb-halo  { width: min(44vmin, 220px); filter: blur(16px); }
  .orb-core  { width: min(34vmin, 150px); }
  .orb-orbit { width: min(44vmin, 220px); }
  .orb-orbit span {
    transform: rotate(calc(var(--i) * 60deg)) translateX(min(22vmin, 110px));
  }
  .orb-memories, .orb-quote, .orb-spark { display: none; }
  .orb-state { left: 14px; top: 14px; padding: 7px 12px; font-size: 11.5px; }

  .login-form-pane {
    padding: 22px 20px max(22px, env(safe-area-inset-bottom));
    justify-content: flex-start;
  }
  .login-form-pane .brand-row { margin-bottom: 22px; }
  .login-form-pane h1.display.hero { font-size: 30px; margin: 10px 0 12px; }
  .login-form-pane .lead { font-size: 13.5px; }
  .auth-tabs { max-width: none; margin: 20px 0 16px; }
  .login-form { gap: 13px; max-width: none; }
  .login-trust { margin-top: 22px; gap: 8px; }
  .login-trust .item { padding: 11px 10px; }
  .login-trust .item small { display: none; }
}

/* ── Hands-free voice mode (presence "Sesli") ─────────────────────── */
.voice-call {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 8px;
  text-align: center;
}
.voice-orb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(235,69,158,.55), rgba(235,69,158,.12));
  box-shadow: 0 0 0 1px rgba(235,69,158,.25), 0 0 24px rgba(235,69,158,.25);
  display: grid;
  place-items: center;
}
.voice-orb-pulse {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  transition: transform .2s ease, opacity .2s ease;
}
.voice-orb-listening .voice-orb-pulse { animation: voicePulse 1.6s ease-in-out infinite; }
.voice-orb-recording { box-shadow: 0 0 0 2px rgba(80,220,120,.6), 0 0 30px rgba(80,220,120,.45); }
.voice-orb-recording .voice-orb-pulse { background: rgba(120,255,160,.95); animation: voicePulse .7s ease-in-out infinite; }
.voice-orb-transcribing .voice-orb-pulse,
.voice-orb-thinking .voice-orb-pulse { animation: voiceSpin 1s linear infinite; background: rgba(255,220,120,.95); }
.voice-orb-speaking .voice-orb-pulse { animation: voicePulse .5s ease-in-out infinite; background: rgba(235,69,158,.95); }
.voice-orb-error { box-shadow: 0 0 0 2px rgba(255,90,90,.6); }
@keyframes voicePulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.45); opacity: 1; }
}
@keyframes voiceSpin {
  to { transform: rotate(360deg) scale(1.1); }
}
.voice-status { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.92); }
.voice-last { font-size: 13px; color: rgba(255,255,255,.6); font-style: italic; max-width: 260px; }
.voice-error { font-size: 12px; color: #ff8a8a; }
.voice-btn {
  margin-top: 4px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(235,69,158,.4);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.voice-btn-start { background: rgba(235,69,158,.85); color: #fff; }
.voice-btn-start:hover { background: rgba(235,69,158,1); }
.voice-btn-stop { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); }
.voice-btn-stop:hover { background: rgba(255,90,90,.18); border-color: rgba(255,90,90,.5); }
.voice-btn:active { transform: scale(.97); }
.voice-hint { font-size: 11px; color: rgba(255,255,255,.4); max-width: 240px; margin: 2px 0 0; }

/* ── Dev labs (/live-lab, /wardrobe-lab) ──────────────────────────────
   Stage on the left, control panel on the right. Stacks (stage over panel)
   on phones so the 320px panel never crushes the stage to a sliver. */
.lab-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  height: 100dvh;
}
.lab-stage > aside { border-left: 1px solid rgba(255,255,255,0.08); }
@media (max-width: 860px) {
  .lab-stage {
    grid-template-columns: 1fr;
    grid-template-rows: 46dvh 1fr;
  }
  .lab-stage > aside {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    overflow-y: auto;
  }
}