/* =========================================================
   I•Match v3 — Maximum premium dark UI
   Linear + Raycast + cinematic motion
   ========================================================= */

:root {
  --canvas: #050508;
  --surface-1: #0c0c12;
  --surface-2: #12121a;
  --surface-3: #181822;
  --surface-glass: rgba(14, 14, 22, 0.72);

  --ink: #f4f4f7;
  --ink-muted: #c4c4d0;
  --ink-subtle: #8b8b9a;
  --ink-tertiary: #5c5c6c;

  --accent: #6d5efc;
  --accent-2: #22d3ee;
  --accent-3: #a78bfa;
  --accent-hover: #8b7cff;
  --accent-soft: rgba(109, 94, 252, 0.18);
  --accent-glow: rgba(109, 94, 252, 0.45);

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.15);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.15);
  --warning: #fbbf24;

  --hairline: rgba(255,255,255,0.08);
  --hairline-strong: rgba(255,255,255,0.14);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 9999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.45s;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* admin aliases */
  --bg: var(--canvas);
  --bg-s: var(--surface-glass);
  --bg-e: var(--surface-2);
  --border: var(--hairline);
  --border-h: var(--hairline-strong);
  --text: var(--ink);
  --text-d: var(--ink-subtle);
  --text-m: var(--ink-tertiary);
  --emerald: var(--success);
  --rose: var(--danger);
  --amber: var(--warning);
  --radius: var(--r-lg);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
a { color: var(--accent-hover); }
::selection { background: rgba(109,94,252,.4); color: #fff; }

/* ===== cinematic background ===== */
.bg-fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55;
  animation: orbFloat 14s var(--ease) infinite alternate;
}
.orb-a {
  width: 420px; height: 420px; top: -120px; left: -80px;
  background: radial-gradient(circle, rgba(109,94,252,.55), transparent 70%);
}
.orb-b {
  width: 360px; height: 360px; top: 30%; right: -100px;
  background: radial-gradient(circle, rgba(34,211,238,.28), transparent 70%);
  animation-delay: -5s;
}
.orb-c {
  width: 300px; height: 300px; bottom: -80px; left: 30%;
  background: radial-gradient(circle, rgba(167,139,250,.3), transparent 70%);
  animation-delay: -9s;
}
.grid-fx {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 10%, transparent 70%);
  opacity: 0.5;
  animation: gridDrift 40s linear infinite;
}
@keyframes orbFloat {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(30px,-40px,0) scale(1.12); }
}
@keyframes gridDrift {
  from { transform: translateY(0); }
  to { transform: translateY(56px); }
}

.app {
  position: relative; z-index: 1;
  max-width: 640px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: calc(16px + var(--safe-t)) 18px calc(20px + var(--safe-b));
}

/* ===== icons ===== */
.icon {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em;
  flex: 0 0 auto; stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 30px; height: 30px; }
.icon-2xl { width: 40px; height: 40px; }

/* ===== header ===== */
.header {
  position: sticky; top: 0; z-index: 40;
  padding: 4px 0 14px;
  background: linear-gradient(180deg, rgba(5,5,8,.92) 40%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.brand-badge {
  width: 44px; height: 44px; border-radius: 14px;
  background: conic-gradient(from 210deg, #6d5efc, #22d3ee, #a78bfa, #6d5efc);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 12px 32px var(--accent-glow);
  position: relative; animation: badgeSpin 8s linear infinite;
}
.brand-badge::before {
  content: ""; position: absolute; inset: 2px; border-radius: 12px;
  background: linear-gradient(160deg, #1a1630, #0c0c14);
}
.brand-badge .icon { position: relative; z-index: 1; width: 20px; height: 20px; }
@keyframes badgeSpin { to { filter: hue-rotate(20deg); } }
.brand h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.03em; }
.brand .sub { margin-top: 2px; font-size: 12px; color: var(--ink-tertiary); }

.progress-wrap { display: grid; gap: 9px; }
.progress {
  height: 5px; border-radius: var(--r-pill); overflow: hidden;
  background: rgba(255,255,255,.05); border: 1px solid var(--hairline);
}
.progress > i {
  display: block; height: 100%; width: 0%; border-radius: inherit;
  background: linear-gradient(90deg, #6d5efc, #8b7cff 40%, #22d3ee);
  background-size: 200% 100%;
  box-shadow: 0 0 16px var(--accent-glow);
  transition: width .4s var(--ease);
  animation: progShine 2.4s linear infinite;
}
@keyframes progShine {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}
.meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; font-size: 12px; color: var(--ink-tertiary);
}
.tag {
  display: inline-flex; align-items: center; gap: 7px; max-width: 72%;
  padding: 6px 12px 6px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: rgba(255,255,255,.03);
  color: var(--ink-subtle);
}
.tag .icon { width: 14px; height: 14px; color: var(--accent-3); }
.step-count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-subtle); }

/* ===== form / card ===== */
.stage-form { display: flex; flex-direction: column; flex: 1; gap: 14px; min-height: 0; }
.card {
  background: var(--surface-glass);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 24px 20px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 24px 60px rgba(0,0,0,.5);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
.card::after {
  content: ""; position: absolute; top: -40%; right: -20%; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(109,94,252,.12), transparent 70%);
  pointer-events: none;
}
.card.from-next { animation: slideInRight var(--dur) var(--ease) both; }
.card.from-prev { animation: slideInLeft var(--dur) var(--ease) both; }
.card.shake { animation: shake .45s var(--ease); }

@keyframes slideInRight {
  from { opacity: 0; transform: translate3d(28px, 12px, 0) scale(.97); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translate3d(-28px, 12px, 0) scale(.97); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}

.q-kicker {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-3);
}
.q-title {
  margin: 0 0 8px; font-size: clamp(18px, 4.4vw, 22px); font-weight: 700;
  line-height: 1.28; letter-spacing: -.03em; white-space: pre-wrap;
}
.q-hint {
  margin: 0 0 20px; color: var(--ink-subtle); font-size: 14px;
  line-height: 1.55; white-space: pre-wrap;
}

/* fields */
.field {
  width: 100%; min-height: 52px; padding: 14px 16px;
  border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: rgba(255,255,255,.03); outline: none;
  transition: border-color .15s, box-shadow .25s var(--ease), background .15s;
}
.field::placeholder { color: var(--ink-tertiary); }
.field:hover { border-color: var(--hairline-strong); }
.field:focus {
  border-color: rgba(109,94,252,.7);
  background: rgba(109,94,252,.08);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
textarea.field { min-height: 132px; resize: vertical; line-height: 1.5; }

/* options */
.options { display: grid; gap: 9px; }
.option {
  text-align: left; min-height: 52px; padding: 14px 16px;
  border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: rgba(255,255,255,.03); display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  transition: transform .15s var(--ease), border-color .15s, background .15s, box-shadow .25s var(--ease);
  animation: fadeUp .4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.option:hover {
  border-color: var(--hairline-strong); background: rgba(255,255,255,.05);
  transform: translateY(-2px);
}
.option:active { transform: scale(.985); }
.option.on {
  border-color: rgba(109,94,252,.75);
  background: linear-gradient(135deg, rgba(109,94,252,.2), rgba(34,211,238,.06));
  box-shadow: 0 0 0 1px rgba(109,94,252,.2), 0 12px 32px rgba(109,94,252,.15);
}
.option .opt-label { line-height: 1.35; color: var(--ink-muted); }
.option.on .opt-label { color: var(--ink); font-weight: 500; }
.option .tick {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.18);
  display: grid; place-items: center; color: transparent;
  transition: all .25s var(--ease-spring);
}
.option .tick .icon { width: 12px; height: 12px; }
.option.on .tick {
  color: #fff; border-color: transparent;
  background: linear-gradient(145deg, var(--accent-hover), var(--accent));
  box-shadow: 0 4px 14px var(--accent-glow);
  transform: scale(1.08);
}

/* photos */
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo, .photo-add {
  aspect-ratio: 1; border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: rgba(255,255,255,.03); position: relative; overflow: hidden;
  animation: pop .35s var(--ease-spring) both;
}
@keyframes pop {
  from { opacity: 0; transform: scale(.88); }
  to { opacity: 1; transform: scale(1); }
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo button {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(6px);
  transition: background .15s, transform .15s var(--ease);
}
.photo button:hover { background: rgba(251,113,133,.9); transform: scale(1.08); }
.photo button .icon { width: 14px; height: 14px; }
.photo-add {
  display: grid; place-items: center; gap: 6px; color: var(--ink-subtle);
  border-style: dashed; border-color: rgba(255,255,255,.16);
  transition: all .2s var(--ease);
}
.photo-add:hover {
  border-color: rgba(109,94,252,.6); background: var(--accent-soft);
  color: var(--ink); transform: translateY(-2px);
}
.photo-add .icon { width: 28px; height: 28px; color: var(--accent-3); }
.photo-add span { font-size: 12px; font-weight: 600; }
.photo-add input { display: none; }
.photo-hint {
  margin-top: 12px; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-tertiary);
}

.err {
  margin-top: 14px; display: flex; gap: 8px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid rgba(251,113,133,.4); background: var(--danger-soft);
  color: #fecdd3; font-size: 13px;
  animation: slideInRight .3s var(--ease);
}
.err .icon { color: var(--danger); margin-top: 1px; }

/* footer buttons */
.footer {
  position: sticky; bottom: 0; z-index: 40; margin-top: auto;
  padding-top: 14px; padding-bottom: 2px;
  background: linear-gradient(0deg, rgba(5,5,8,.96) 55%, transparent);
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px;
}
.btn {
  min-height: 52px; border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: rgba(255,255,255,.04);
  color: var(--ink); font-weight: 600; font-size: 14px; letter-spacing: -.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s var(--ease), filter .15s, box-shadow .25s var(--ease), background .15s, border-color .15s;
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover:not(:disabled) {
  border-color: var(--hairline-strong); background: rgba(255,255,255,.07);
  transform: translateY(-2px);
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary {
  border: 0; color: #fff;
  background: linear-gradient(135deg, #8b7cff 0%, #6d5efc 45%, #4f46e5 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 12px 32px var(--accent-glow);
  position: relative; overflow: hidden;
}
.btn.primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: btnShine 3.5s ease-in-out infinite;
}
@keyframes btnShine {
  0%, 65% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
.btn.primary:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 16px 40px rgba(109,94,252,.55);
}
.btn.primary > * { position: relative; z-index: 1; }

/* ===== WELCOME — maximum impact ===== */
.welcome {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 20px 4px 12px;
  animation: welcomeIn .7s var(--ease) both;
}
@keyframes welcomeIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

.logo-wrap {
  position: relative; width: 110px; height: 110px;
  display: grid; place-items: center; margin-bottom: 8px;
}
.logo-ring {
  position: absolute; inset: 0; border-radius: 32px;
  background: conic-gradient(from 0deg, #6d5efc, #22d3ee, #a78bfa, #6d5efc);
  animation: spin 6s linear infinite;
  filter: blur(0.3px);
}
.logo-ring::after {
  content: ""; position: absolute; inset: -8px; border-radius: 36px;
  background: conic-gradient(from 180deg, transparent, rgba(109,94,252,.4), transparent 40%);
  animation: spin 4s linear infinite reverse;
  filter: blur(8px);
}
@keyframes spin { to { transform: rotate(360deg); } }
.logo-core {
  position: relative; z-index: 1; width: 94px; height: 94px; border-radius: 28px;
  background: linear-gradient(160deg, #1a1635 0%, #0a0a12 100%);
  border: 1px solid rgba(255,255,255,.1);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 20px 50px rgba(109,94,252,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.logo-core .icon { width: 42px; height: 42px; stroke-width: 1.5; }

.welcome h1 {
  margin: 22px 0 6px; font-size: clamp(32px, 8vw, 42px); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.05;
  background: linear-gradient(135deg, #fff 20%, #c4b5fd 50%, #67e8f9 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.welcome .eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid rgba(109,94,252,.35); background: var(--accent-soft);
  color: var(--accent-3); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px;
  animation: fadeUp .5s var(--ease) .1s both;
}
.welcome .lead {
  margin: 14px 0 0; max-width: 400px; color: var(--ink-muted);
  font-size: 15.5px; line-height: 1.6;
  animation: fadeUp .5s var(--ease) .15s both;
}
.welcome .intro-box {
  margin: 18px 0 0; max-width: 400px; width: 100%;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: rgba(255,255,255,.03);
  color: var(--ink-subtle); font-size: 13px; line-height: 1.55;
  text-align: left; white-space: pre-wrap;
  animation: fadeUp .5s var(--ease) .2s both;
}

.feature-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%; max-width: 400px; margin: 22px 0 28px;
}
.feature-card {
  text-align: left; padding: 14px 14px 12px; border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: rgba(255,255,255,.03);
  transition: transform .2s var(--ease), border-color .2s, background .2s;
  animation: fadeUp .5s var(--ease) both;
  animation-delay: calc(0.25s + var(--i, 0) * 0.06s);
}
.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(109,94,252,.4);
  background: rgba(109,94,252,.08);
}
.feature-card .fc-icon {
  width: 36px; height: 36px; border-radius: 11px; margin-bottom: 10px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(109,94,252,.25), rgba(34,211,238,.1));
  border: 1px solid rgba(109,94,252,.3); color: var(--accent-3);
}
.feature-card .fc-icon .icon { width: 18px; height: 18px; }
.feature-card strong {
  display: block; font-size: 13px; font-weight: 700; margin-bottom: 3px;
  letter-spacing: -.01em;
}
.feature-card span { font-size: 11.5px; color: var(--ink-tertiary); line-height: 1.35; }

.welcome .cta-wrap {
  width: 100%; max-width: 400px;
  animation: fadeUp .5s var(--ease) .45s both;
}
.welcome .btn.primary {
  width: 100%; min-height: 56px; font-size: 16px; border-radius: 16px;
}
.welcome .hint-below {
  margin-top: 14px; font-size: 12px; color: var(--ink-tertiary);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* center / done / loading */
.center {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 28px 10px;
  animation: welcomeIn .55s var(--ease);
}
.hero-badge {
  width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #8b7cff, #6d5efc 50%, #4f46e5);
  box-shadow: 0 20px 50px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25);
  animation: floatY 3s ease-in-out infinite;
}
.hero-badge.success {
  background: linear-gradient(145deg, #34d399, #059669);
  box-shadow: 0 20px 50px rgba(52,211,153,.4), inset 0 1px 0 rgba(255,255,255,.25);
  animation: pop .5s var(--ease-spring) both;
}
.hero-badge .icon { width: 40px; height: 40px; }
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.center h2 {
  margin: 20px 0 10px; font-size: clamp(26px, 6vw, 34px); font-weight: 800;
  letter-spacing: -.035em;
}
.center .lead {
  margin: 0 0 12px; max-width: 380px; color: var(--ink-muted);
  font-size: 15px; line-height: 1.55;
}
.feature-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 8px 0 24px; max-width: 420px;
}
.feature-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: rgba(255,255,255,.03);
  color: var(--ink-subtle); font-size: 12px; font-weight: 500;
  animation: fadeUp .4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
.feature-pill .icon { width: 14px; height: 14px; color: var(--accent-3); }
.muted { color: var(--ink-tertiary); font-size: 13px; }

.loader {
  width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.08); border-top-color: var(--accent-hover);
  animation: spin .7s linear infinite;
}

@media (max-width: 420px) {
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .feature-card { padding: 12px 10px; }
}

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

/* ===== Admin ===== */
.admin-shell { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }
.admin-top {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between; margin-bottom: 18px;
}
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  background: rgba(255,255,255,.03); border: 1px solid var(--hairline);
  color: var(--ink-subtle); border-radius: var(--r-pill); padding: 8px 14px;
  transition: all .15s;
}
.tab:hover { border-color: var(--hairline-strong); color: var(--ink); }
.tab.on { color: #fff; border-color: rgba(109,94,252,.55); background: var(--accent-soft); }
.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td {
  border-bottom: 1px solid var(--hairline); padding: 10px 8px;
  text-align: left; vertical-align: top;
}
.table th { color: var(--ink-tertiary); font-weight: 500; }
.badge {
  display: inline-block; border-radius: var(--r-pill); padding: 2px 8px;
  font-size: 12px; border: 1px solid var(--hairline);
}
.badge.new, .badge.unanswered { color: var(--warning); background: rgba(251,191,36,.1); }
.badge.approved, .badge.answered { color: var(--success); background: var(--success-soft); }
.badge.rejected { color: var(--danger); background: var(--danger-soft); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; position: relative; z-index: 1; }
.login-card { width: min(400px, 100%); }
.login-card h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.stack { display: grid; gap: 10px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.danger { background: var(--danger-soft); border-color: rgba(251,113,133,.4); }
.small { font-size: 12px; color: var(--ink-tertiary); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.hidden { display: none !important; }

/* ===== Admin friendly editor v2 ===== */
.admin-app { max-width: 1180px; }
.admin-app .admin-shell { max-width: 1180px; padding: 8px 0 40px; position: relative; z-index: 1; }

.admin-hero {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.admin-hero .brand-badge {
  width: 44px; height: 44px; border-radius: 14px;
  background: conic-gradient(from 210deg, #6d5efc, #22d3ee, #a78bfa, #6d5efc);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 12px 32px var(--accent-glow);
  position: relative;
}
.admin-hero .brand-badge::before {
  content: ""; position: absolute; inset: 2px; border-radius: 12px;
  background: linear-gradient(160deg, #1a1630, #0c0c14);
}
.admin-hero .brand-badge .icon { position: relative; z-index: 1; width: 20px; height: 20px; }
.admin-hero h1 {
  margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.03em;
}
.admin-hero .sub { color: var(--ink-tertiary); font-size: 12px; margin-top: 2px; }

.save-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: rgba(255,255,255,.03);
  font-size: 12px; color: var(--ink-subtle); min-height: 36px;
}
.save-pill.ok { color: var(--success); border-color: rgba(52,211,153,.35); background: var(--success-soft); }
.save-pill.err { color: var(--danger); border-color: rgba(251,113,133,.35); background: var(--danger-soft); }
.save-pill.dirty { color: var(--warning); border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); }
.save-pill.busy { color: var(--accent-3); border-color: rgba(109,94,252,.35); background: var(--accent-soft); }
.save-dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.save-pill.busy .save-dot { animation: pulseDot 1s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.75)} }

.admin-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 6px; border-radius: 16px; border: 1px solid var(--hairline);
  background: rgba(255,255,255,.02);
}
.admin-tab {
  border: 0; background: transparent; color: var(--ink-subtle);
  padding: 10px 14px; border-radius: 12px; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: all .15s var(--ease);
}
.admin-tab .icon { width: 16px; height: 16px; }
.admin-tab:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.admin-tab.on {
  color: #fff;
  background: linear-gradient(135deg, rgba(109,94,252,.35), rgba(34,211,238,.12));
  box-shadow: 0 0 0 1px rgba(109,94,252,.35);
}

.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px;
}
@media (max-width: 820px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  padding: 14px 14px 12px; border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: rgba(255,255,255,.03);
}
.stat-card .k { font-size: 11px; color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.stat-card .v { margin-top: 6px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }

.editor-layout {
  display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start;
}
@media (max-width: 900px) { .editor-layout { grid-template-columns: 1fr; } }

.q-list { display: grid; gap: 8px; max-height: min(70vh, 760px); overflow: auto; padding-right: 2px; }
.q-item {
  text-align: left; width: 100%; padding: 12px 12px;
  border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: rgba(255,255,255,.03); color: var(--ink);
  display: grid; gap: 4px; cursor: pointer;
  transition: all .15s var(--ease);
}
.q-item:hover { border-color: var(--hairline-strong); transform: translateY(-1px); }
.q-item.on {
  border-color: rgba(109,94,252,.65);
  background: linear-gradient(135deg, rgba(109,94,252,.18), rgba(34,211,238,.05));
  box-shadow: 0 0 0 1px rgba(109,94,252,.18);
}
.q-item .qi-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.q-item .qi-num {
  font-size: 11px; font-weight: 800; color: var(--accent-3);
  letter-spacing: .04em;
}
.q-item .qi-title { font-size: 13px; font-weight: 650; line-height: 1.35; }
.q-item .qi-meta { font-size: 11px; color: var(--ink-tertiary); display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600;
  border: 1px solid var(--hairline); background: rgba(255,255,255,.03); color: var(--ink-subtle);
}
.chip.on { color: var(--success); border-color: rgba(52,211,153,.3); background: var(--success-soft); }
.chip.off { color: var(--ink-tertiary); }
.chip.btn { color: var(--accent-3); border-color: rgba(109,94,252,.3); background: var(--accent-soft); }

.editor-panel { display: grid; gap: 12px; }
.editor-head {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
}
.editor-head h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.help {
  font-size: 12.5px; color: var(--ink-subtle); line-height: 1.45;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px dashed rgba(109,94,252,.35); background: rgba(109,94,252,.06);
}
.label {
  display: block; font-size: 12px; font-weight: 700; color: var(--ink-subtle);
  margin: 0 0 6px; letter-spacing: .02em;
}
.field-block { display: grid; gap: 6px; }
.type-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.type-pill {
  border: 1px solid var(--hairline); background: rgba(255,255,255,.03);
  color: var(--ink-subtle); border-radius: var(--r-pill); padding: 8px 12px;
  font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; transition: all .15s var(--ease);
}
.type-pill .icon { width: 14px; height: 14px; }
.type-pill:hover { border-color: var(--hairline-strong); color: var(--ink); }
.type-pill.on {
  color: #fff; border-color: rgba(109,94,252,.55);
  background: linear-gradient(135deg, rgba(109,94,252,.3), rgba(34,211,238,.1));
}

.opt-editor { display: grid; gap: 8px; }
.opt-row {
  display: grid; grid-template-columns: 28px 1fr auto auto; gap: 8px; align-items: center;
}
.opt-row .handle {
  width: 28px; height: 40px; display: grid; place-items: center;
  color: var(--ink-tertiary); font-size: 14px; user-select: none;
}
.opt-row .field { min-height: 40px; padding: 10px 12px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--hairline);
  background: rgba(255,255,255,.03); color: var(--ink-subtle);
  display: grid; place-items: center; cursor: pointer;
  transition: all .15s var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--hairline-strong); }
.icon-btn.danger:hover { color: var(--danger); border-color: rgba(251,113,133,.45); background: var(--danger-soft); }
.icon-btn .icon { width: 16px; height: 16px; }

.switch-row {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
}
.switch {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; color: var(--ink-muted); user-select: none;
}
.switch input { accent-color: var(--accent); width: 16px; height: 16px; }

.live-box {
  border-radius: var(--r-lg); border: 1px solid var(--hairline);
  background: rgba(0,0,0,.25); overflow: hidden;
}
.live-box .lb-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--hairline);
  font-size: 12px; font-weight: 700; color: var(--ink-subtle); letter-spacing: .04em; text-transform: uppercase;
}
.live-box .lb-body { padding: 16px; }
.live-box .q-title { font-size: 17px; }
.live-box .option { pointer-events: none; min-height: 44px; padding: 11px 12px; animation: none; }

.empty-state {
  padding: 28px 18px; text-align: center; color: var(--ink-subtle);
}
.empty-state h3 { margin: 10px 0 6px; color: var(--ink); font-size: 18px; }

.profile-card { display: grid; gap: 10px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-row { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-row img {
  width: 88px; height: 88px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--hairline);
}

.text-grid { display: grid; gap: 12px; }
@media (min-width: 860px) { .text-grid { grid-template-columns: 1fr 1fr; } }
.text-card .label { margin-bottom: 8px; }
.text-card .hint { font-size: 11px; color: var(--ink-tertiary); margin-top: 4px; }

.toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.search.field { min-height: 42px; max-width: 280px; }

.login-wrap { position: relative; z-index: 1; }
.login-card {
  background: var(--surface-glass) !important;
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  backdrop-filter: blur(18px);
}

/* ===== Categories + DnD ===== */
.q-sidebar .search { max-width: none; width: 100%; min-height: 38px; }
.cat-list { display: grid; gap: 10px; grid-auto-rows: max-content; align-content: start; max-height: min(72vh, 820px); overflow: auto; padding-right: 2px; }
.cat-block {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.cat-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  user-select: none;
}
.cat-head:hover { background: rgba(255,255,255,.05); }
.cat-block.collapsed .cat-head { border-bottom: 0; }
.cat-block.collapsed .cat-body { display: none; }
.cat-toggle {
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-tertiary);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .15s ease, color .15s;
}
.cat-toggle:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.cat-block:not(.collapsed) .cat-toggle { transform: rotate(0deg); }
.cat-block.collapsed .cat-toggle { transform: rotate(-90deg); }
.cat-ico { display: grid; place-items: center; color: var(--accent-3); }
.cat-ico .icon { width: 16px; height: 16px; }
.cat-title { font-size: 13px; font-weight: 750; letter-spacing: -.01em; }
.cat-count {
  font-size: 11px; font-weight: 700; color: var(--ink-tertiary);
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--hairline);
  background: rgba(0,0,0,.2);
}
.cat-add { font-size: 12px !important; }
.cat-body {
  display: grid; gap: 6px; padding: 8px;
  min-height: 44px;
  transition: background .15s ease, box-shadow .15s ease;
}
.cat-body.drag-over {
  background: rgba(109,94,252,.08);
  box-shadow: inset 0 0 0 1px rgba(109,94,252,.35);
}
.cat-empty {
  font-size: 12px; color: var(--ink-tertiary); text-align: center;
  padding: 12px 8px; border: 1px dashed var(--hairline); border-radius: 10px;
}

.q-drag {
  display: grid; grid-template-columns: 28px 1fr; gap: 4px; align-items: stretch;
  border-radius: 12px; border: 1px solid var(--hairline);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, opacity .15s, transform .15s;
}
.q-drag:hover { border-color: var(--hairline-strong, rgba(255,255,255,.25)); }
.q-drag.on {
  border-color: rgba(109,94,252,.65);
  background: linear-gradient(135deg, rgba(109,94,252,.16), rgba(34,211,238,.04));
  box-shadow: 0 0 0 1px rgba(109,94,252,.15);
}
.q-drag.dragging {
  opacity: 0.55;
  border-style: dashed;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.q-handle {
  display: grid; place-items: center;
  color: var(--ink-tertiary); cursor: grab;
  border-radius: 12px 0 0 12px;
}
.q-handle:active { cursor: grabbing; }
.q-handle .icon { width: 14px; height: 14px; }
.q-main {
  text-align: left; border: 0; background: transparent; color: inherit;
  padding: 10px 10px 10px 4px; cursor: pointer; border-radius: 0 12px 12px 0;
  display: grid; gap: 3px;
}
.q-main:hover { background: rgba(255,255,255,.03); }
.q-drag .qi-title { font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.q-drag .qi-num { font-size: 10px; font-weight: 800; color: var(--accent-3); }
.q-drag .qi-meta { gap: 6px; }
.q-drag .chip { font-size: 10px; padding: 1px 6px; }

@media (max-width: 900px) {
  .cat-add span { display: none; }
}

/* category pills in question editor (intuitive visible picker) */
.cat-pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cat-pill { justify-content: flex-start; }
.cat-pill .icon { color: var(--accent-3); }

/* collapsed category header as drop target */
.cat-head.drag-over { background: rgba(109,94,252,.12); box-shadow: inset 0 0 0 1px rgba(109,94,252,.45); }

/* =========================================================
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ (кнопка справа сверху)
   ========================================================= */
.theme-toggle {
  position: fixed; top: calc(12px + var(--safe-t)); right: 14px; z-index: 90;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface-glass);
  color: var(--ink-subtle);
  display: grid; place-items: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transition: transform .18s var(--ease), color .2s, border-color .2s, box-shadow .3s;
}
.theme-toggle:hover { transform: translateY(-2px); color: var(--accent-3); border-color: var(--hairline-strong); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle .icon { width: 19px; height: 19px; }
.theme-toggle .tt-moon { display: none; }
[data-theme="love"] .theme-toggle .tt-moon { display: block; }
[data-theme="love"] .theme-toggle .tt-heart { display: none; }

/* =========================================================
   THEME «LOVE» — светлая романтичная тема
   Белый холст + кораллово-розовый акцент (в духе Rausch #ff385c)
   Активируется атрибутом data-theme="love" на <html>
   ========================================================= */
:root[data-theme="love"] {
  --canvas: #fff7f8;
  --surface-1: #ffffff;
  --surface-2: #fff0f2;
  --surface-3: #ffe3e9;
  --surface-glass: rgba(255, 255, 255, 0.82);

  --ink: #31121c;
  --ink-muted: #5c2734;
  --ink-subtle: #8c4b59;
  --ink-tertiary: #b98b96;

  --accent: #ff385c;
  --accent-2: #ff8fab;
  --accent-3: #d60f55;
  --accent-hover: #ff5c7a;
  --accent-soft: rgba(255, 56, 92, 0.12);
  --accent-glow: rgba(255, 56, 92, 0.32);

  --success: #0ca678;
  --success-soft: rgba(12, 166, 120, 0.12);
  --danger: #e03131;
  --danger-soft: rgba(224, 49, 49, 0.10);
  --warning: #e8890c;

  --hairline: rgba(140, 40, 65, 0.14);
  --hairline-strong: rgba(140, 40, 65, 0.26);
}

[data-theme="love"] ::selection { background: rgba(255,56,92,.22); color: #31121c; }

/* --- живой фон: мягкие розовые «шары» вместо неоновых --- */
[data-theme="love"] .orb { opacity: 0.6; }
[data-theme="love"] .orb-a { background: radial-gradient(circle, rgba(255,56,92,.30), transparent 70%); }
[data-theme="love"] .orb-b { background: radial-gradient(circle, rgba(255,143,171,.35), transparent 70%); }
[data-theme="love"] .orb-c { background: radial-gradient(circle, rgba(255,120,150,.25), transparent 70%); }
[data-theme="love"] .grid-fx {
  background-image:
    linear-gradient(rgba(140,40,65,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,40,65,.05) 1px, transparent 1px);
}

/* --- липкие шапка/подвал (были затемнены) --- */
[data-theme="love"] .header { background: linear-gradient(180deg, rgba(255,247,248,.94) 40%, transparent); }
[data-theme="love"] .footer { background: linear-gradient(0deg, rgba(255,247,248,.97) 55%, transparent); }

/* --- бренд-Badge и вращающееся кольцо логотипа --- */
[data-theme="love"] .brand-badge,
[data-theme="love"] .admin-hero .brand-badge {
  background: conic-gradient(from 210deg, #ff385c, #ff8fab, #d60f55, #ff385c);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 12px 32px var(--accent-glow);
}
[data-theme="love"] .brand-badge::before,
[data-theme="love"] .admin-hero .brand-badge::before {
  background: linear-gradient(160deg, #2b0d16, #12060a);
}
[data-theme="love"] .logo-ring {
  background: conic-gradient(from 0deg, #ff385c, #ff8fab, #d60f55, #ff385c);
}
[data-theme="love"] .logo-ring::after {
  background: conic-gradient(from 180deg, transparent, rgba(255,56,92,.35), transparent 40%);
}
/* тёмная «таблетка» логотипа (.logo-core) намеренно остаётся тёмной — это фирменный знак */

/* --- прогресс-бар --- */
[data-theme="love"] .progress { background: rgba(140,40,65,.08); }
[data-theme="love"] .progress > i {
  background: linear-gradient(90deg, #ff385c, #ff5c7a 40%, #ff8fab);
  background-size: 200% 100%;
}

/* --- карточка и светлые поверхности вместо «белых 3%» --- */
[data-theme="love"] .card {
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 24px 60px rgba(170, 40, 70, .12);
}
[data-theme="love"] .card::before {
  background: linear-gradient(90deg, transparent, rgba(255,56,92,.35), transparent);
}
[data-theme="love"] .card::after {
  background: radial-gradient(circle, rgba(255,56,92,.10), transparent 70%);
}
[data-theme="love"] .login-card { box-shadow: 0 24px 60px rgba(170,40,70,.14); }
[data-theme="love"] .tag,
[data-theme="love"] .field,
[data-theme="love"] .option,
[data-theme="love"] .photo,
[data-theme="love"] .photo-add,
[data-theme="love"] .feature-card,
[data-theme="love"] .feature-pill,
[data-theme="love"] .welcome .intro-box,
[data-theme="love"] .tab,
[data-theme="love"] .admin-tabs,
[data-theme="love"] .stat-card,
[data-theme="love"] .q-item,
[data-theme="love"] .q-drag,
[data-theme="love"] .type-pill,
[data-theme="love"] .icon-btn,
[data-theme="love"] .chip,
[data-theme="love"] .save-pill,
[data-theme="love"] .cat-block,
[data-theme="love"] .cat-head {
  background: rgba(255, 255, 255, 0.72);
}

/* --- поля и варианты ответов --- */
[data-theme="love"] .field:focus {
  border-color: rgba(255,56,92,.65);
  background: rgba(255,56,92,.05);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
[data-theme="love"] .option:hover { background: rgba(255,255,255,.95); }
[data-theme="love"] .option.on {
  border-color: rgba(255,56,92,.7);
  background: linear-gradient(135deg, rgba(255,56,92,.14), rgba(255,143,171,.08));
  box-shadow: 0 0 0 1px rgba(255,56,92,.16), 0 12px 32px rgba(255,56,92,.14);
}
[data-theme="love"] .option .tick { border-color: rgba(140,40,65,.3); }
[data-theme="love"] .option.on .tick {
  background: linear-gradient(145deg, var(--accent-hover), var(--accent));
  box-shadow: 0 4px 14px var(--accent-glow);
}

/* --- фото --- */
[data-theme="love"] .photo-add { border-color: rgba(140,40,65,.25); }
[data-theme="love"] .photo-add:hover {
  border-color: rgba(255,56,92,.6);
  background: var(--accent-soft);
}

/* --- ошибка с тёмным текстом на светлом --- */
[data-theme="love"] .err { color: #7a1626; }

/* --- кнопки --- */
[data-theme="love"] .btn { background: rgba(255,255,255,.8); }
[data-theme="love"] .btn:hover:not(:disabled) { background: #ffffff; }
[data-theme="love"] .btn.primary {
  background: linear-gradient(135deg, #ff5c7a 0%, #ff385c 45%, #d61c4a 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 32px var(--accent-glow);
}
[data-theme="love"] .btn.primary:hover:not(:disabled) {
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 16px 40px rgba(255,56,92,.45);
}

/* --- приветственный экран --- */
[data-theme="love"] .welcome h1 {
  background: linear-gradient(135deg, #31121c 20%, #d60f55 55%, #ff5c7a 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="love"] .welcome .eyebrow { border-color: rgba(255,56,92,.4); }
[data-theme="love"] .feature-card:hover {
  border-color: rgba(255,56,92,.4);
  background: rgba(255,56,92,.06);
}
[data-theme="love"] .feature-card .fc-icon {
  background: linear-gradient(145deg, rgba(255,56,92,.14), rgba(255,143,171,.08));
  border-color: rgba(255,56,92,.3);
}
[data-theme="love"] .hero-badge {
  background: linear-gradient(145deg, #ff5c7a, #ff385c 50%, #d61c4a);
  box-shadow: 0 20px 50px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
[data-theme="love"] .loader {
  border-color: rgba(140,40,65,.15);
  border-top-color: var(--accent);
}
[data-theme="love"] .theme-toggle {
  color: var(--accent);
  border-color: rgba(255,56,92,.35);
  box-shadow: 0 6px 20px rgba(255,56,92,.18);
}

/* --- админка: активные табы и «фиолетовые» места → розовые --- */
[data-theme="love"] .tab.on {
  color: var(--accent-3);
  border-color: rgba(255,56,92,.5);
  background: var(--accent-soft);
}
[data-theme="love"] .admin-tab.on {
  color: var(--accent-3);
  background: linear-gradient(135deg, rgba(255,56,92,.16), rgba(255,143,171,.09));
  box-shadow: 0 0 0 1px rgba(255,56,92,.3);
}
[data-theme="love"] .type-pill.on {
  color: var(--accent-3);
  border-color: rgba(255,56,92,.5);
  background: linear-gradient(135deg, rgba(255,56,92,.14), rgba(255,143,171,.08));
}
[data-theme="love"] .q-item.on,
[data-theme="love"] .q-drag.on {
  border-color: rgba(255,56,92,.6);
  background: linear-gradient(135deg, rgba(255,56,92,.10), rgba(255,143,171,.05));
  box-shadow: 0 0 0 1px rgba(255,56,92,.15);
}
[data-theme="love"] .q-item .qi-num,
[data-theme="love"] .q-drag .qi-num { color: var(--accent-3); }
[data-theme="love"] .chip.btn {
  color: var(--accent-3);
  border-color: rgba(255,56,92,.3);
  background: var(--accent-soft);
}
[data-theme="love"] .save-pill.busy {
  color: var(--accent-3);
  border-color: rgba(255,56,92,.35);
  background: var(--accent-soft);
}
[data-theme="love"] .help {
  border-color: rgba(255,56,92,.35);
  background: rgba(255,56,92,.05);
}
[data-theme="love"] .live-box { background: rgba(140,40,65,.05); }
[data-theme="love"] .cat-body.drag-over {
  background: rgba(255,56,92,.07);
  box-shadow: inset 0 0 0 1px rgba(255,56,92,.3);
}
[data-theme="love"] .cat-head.drag-over {
  background: rgba(255,56,92,.1);
  box-shadow: inset 0 0 0 1px rgba(255,56,92,.4);
}
[data-theme="love"] .cat-count { background: rgba(140,40,65,.06); }
[data-theme="love"] .q-drag:hover { border-color: var(--hairline-strong); }
[data-theme="love"] .q-main:hover { background: rgba(255,255,255,.5); }

/* ===== логотип I•M (картинка вместо иконки-искры) ===== */
.brand-badge .logo-img,
.admin-hero .brand-badge .logo-img {
  position: relative; z-index: 1;
  width: 68%; height: 68%; border-radius: 50%;
  display: block;
}
.logo-core .logo-img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; display: block;
}