/* SHIZA Dating Mini App — «Графит + пыльная роза» (канон: SHIZA_DATING_STYLE.md) */
:root {
  --dt-bg:#101114; --dt-surface-1:#17181C; --dt-surface-2:#1E2025; --dt-elevated:#26282E;
  --dt-border:rgba(235,225,230,.08); --dt-border-strong:rgba(235,225,230,.16);
  --dt-text:#F2EFF1; --dt-text-2:#B9B3B9; --dt-text-3:#7E787E;
  --dt-rose:#D9718F; --dt-rose-light:#E895AC; --dt-rose-deep:#B25574; --dt-gold:#E8B65A;
  --dt-rose-rgb:217,113,143; --dt-rose-light-rgb:232,149,172; --dt-gold-rgb:232,182,90;
  --dt-success:#46C7A8; --dt-danger:#FF5C6C;
  --dt-grad-action:linear-gradient(135deg,#B25574 0%,#D9718F 100%);
  --dt-grad-premium:linear-gradient(135deg,#E8B65A 0%,#C8923C 100%);
  --dt-glow-hero:0 0 26px rgba(217,113,143,.25);

  --dt-font-sans:"Manrope","Inter",system-ui,-apple-system,sans-serif;
  --dt-font-serif:"Playfair Display","Lora",Georgia,serif;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px;
  --dt-screen-pad:20px;
  --r-card:22px; --r-sheet:28px; --r-button:16px; --r-pill:999px;
  --dt-dur-1:120ms; --dt-dur-2:200ms; --dt-dur-3:320ms;
  --dt-ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce){ :root{ --dt-dur-1:0ms; --dt-dur-2:0ms; --dt-dur-3:0ms; } }

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; background:var(--dt-bg); color:var(--dt-text);
  font:400 16px/24px var(--dt-font-sans); overscroll-behavior:none; }
body { min-height:100vh; }

.bg-glow { position:fixed; inset:0 0 auto 0; height:340px; pointer-events:none; z-index:0;
  background:radial-gradient(120% 100% at 50% -10%, rgba(var(--dt-rose-rgb),.16), transparent 70%); }

.view { position:relative; z-index:1; padding:
  calc(var(--dt-screen-pad) + env(safe-area-inset-top)) var(--dt-screen-pad)
  calc(96px + env(safe-area-inset-bottom)); max-width:520px; margin:0 auto; }

/* --- typography --- */
h1 { font:700 24px/30px var(--dt-font-sans); margin:0 0 var(--s-2); }
.overline { font:600 11px/14px var(--dt-font-sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--dt-text-3); }
.muted { color:var(--dt-text-2); }
.muted3 { color:var(--dt-text-3); }

/* --- entrance --- */
.fade { opacity:0; transform:translateY(8px); animation:fade var(--dt-dur-3) var(--dt-ease) forwards; }
.fade:nth-child(2){ animation-delay:40ms } .fade:nth-child(3){ animation-delay:80ms }
.fade:nth-child(4){ animation-delay:120ms } .fade:nth-child(5){ animation-delay:160ms }
@keyframes fade { to { opacity:1; transform:none; } }

/* --- feed card --- */
.card { position:relative; border-radius:var(--r-card); overflow:hidden;
  background:var(--dt-surface-1); border:1px solid var(--dt-border);
  aspect-ratio:3/4; display:flex; align-items:flex-end; }
.card.premium { border:1px solid rgba(var(--dt-gold-rgb),.55); }
.card-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-nophoto { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:600 64px var(--dt-font-serif); color:var(--dt-text-3);
  background:linear-gradient(160deg,var(--dt-surface-2),var(--dt-surface-1)); }
.card-scrim { position:absolute; inset:0; background:linear-gradient(to top,
  rgba(10,10,12,.92) 0%, rgba(10,10,12,.55) 28%, rgba(10,10,12,0) 55%); }
.card-body { position:relative; padding:var(--s-6); width:100%; }
.card-name { font:700 24px/28px var(--dt-font-sans); }
.card-bio { color:var(--dt-text-2); margin-top:var(--s-1); font-size:15px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.chips { display:flex; gap:var(--s-2); margin-top:var(--s-3); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  border-radius:var(--r-pill); font-weight:700; font-size:15px;
  background:rgba(255,255,255,.06); border:1px solid var(--dt-border-strong); }
.chip.lt { color:var(--dt-rose-light); border-color:rgba(var(--dt-rose-rgb),.45);
  background:rgba(var(--dt-rose-rgb),.12); }
.chip.gold { color:#1a1206; background:var(--dt-grad-premium); border:0; }
.chip.forming { color:var(--dt-text-2); }

/* --- feed actions --- */
.actions { display:flex; justify-content:center; gap:var(--s-4); margin-top:var(--s-6); }
.act { width:60px; height:60px; border-radius:var(--r-pill); border:1px solid var(--dt-border-strong);
  background:var(--dt-surface-1); color:var(--dt-text); font-size:26px; display:flex;
  align-items:center; justify-content:center; transition:transform var(--dt-dur-1) var(--dt-ease),
  background var(--dt-dur-2); }
.act:active { transform:scale(.9); }
.act.like { background:var(--dt-grad-action); border:0; }
.act.msg { color:var(--dt-rose-light); }
.report-link { display:block; text-align:center; margin-top:var(--s-4);
  color:var(--dt-rose-light); font-size:14px; background:none; border:0; width:100%; }

/* --- compatibility report --- */
.report-head { display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-bottom:var(--s-6); }
.avatars { display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-4); }
.ava { width:64px; height:64px; border-radius:var(--r-pill); object-fit:cover;
  border:2px solid var(--dt-border-strong); background:var(--dt-surface-2); }
.ava.ph { display:flex; align-items:center; justify-content:center; font:600 26px var(--dt-font-serif);
  color:var(--dt-text-3); }
.ava-link { width:34px; height:2px; background:linear-gradient(90deg,var(--dt-rose-deep),var(--dt-rose-light)); }
.big-pct { font:700 48px/48px var(--dt-font-serif); color:var(--dt-text);
  text-shadow:var(--dt-glow-hero); }
.big-sub { color:var(--dt-text-2); margin-top:var(--s-1); }

.axes { display:flex; flex-direction:column; gap:var(--s-4); }
.axis-row .axis-top { display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; }
.axis-top .v { color:var(--dt-text); font-weight:700; }
.bar { height:6px; border-radius:var(--r-pill); background:rgba(255,255,255,.07); overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:var(--r-pill);
  background:var(--dt-grad-action); transition:width var(--dt-dur-3) var(--dt-ease); }
.bar.neutral > span { background:linear-gradient(90deg,#5a5560,#8a828c); }

.section-title { font:700 19px/25px var(--dt-font-sans); margin:var(--s-8) 0 var(--s-4); }
.fling-line { display:flex; justify-content:space-between; align-items:baseline;
  padding:var(--s-4); border:1px solid var(--dt-border); border-radius:var(--r-button);
  background:var(--dt-surface-1); margin-bottom:var(--s-4); }
.fling-line .p { font-weight:700; font-size:20px; }

.notes { display:flex; flex-wrap:wrap; gap:var(--s-2); }
.note { padding:6px 12px; border-radius:var(--r-pill); font-size:13px; color:var(--dt-text-2);
  background:var(--dt-surface-2); border:1px solid var(--dt-border); }

.advice { background:var(--dt-surface-1); border:1px solid var(--dt-border);
  border-radius:var(--r-card); padding:var(--s-6); margin-top:var(--s-4); }
.advice p { margin:0 0 var(--s-3); color:var(--dt-text-2); }
.advice p:last-child { margin:0; }
.advice b { color:var(--dt-text); }
.advice-lock { text-align:center; padding:var(--s-8) var(--s-6); border:1px dashed var(--dt-border-strong);
  border-radius:var(--r-card); background:var(--dt-surface-1); }
.advice-lock .g { color:var(--dt-gold); font-weight:700; }

/* --- personality --- */
.pers-card { background:var(--dt-surface-1); border:1px solid var(--dt-border);
  border-radius:var(--r-card); padding:var(--s-6); margin-bottom:var(--s-4); }
.code-name { font:700 22px/26px var(--dt-font-serif); color:var(--dt-text); }
.accuracy { font-size:13px; color:var(--dt-text-3); margin-top:var(--s-1); }
.chart-wrap { display:flex; justify-content:center; padding:var(--s-2) 0; }
svg .grid { stroke:var(--dt-border-strong); fill:none; }
svg .axis-lbl { fill:var(--dt-text-3); font:600 10px var(--dt-font-sans); }
svg .poly { fill:rgba(var(--dt-rose-rgb),.20); stroke:var(--dt-rose); stroke-width:2; }
svg .hex { fill:rgba(var(--dt-rose-light-rgb),.16); stroke:var(--dt-rose-light); stroke-width:2; }

/* --- quiz --- */
.progress { height:4px; border-radius:var(--r-pill); background:rgba(255,255,255,.08);
  overflow:hidden; margin-bottom:var(--s-8); }
.progress > span { display:block; height:100%; background:var(--dt-grad-action);
  transition:width var(--dt-dur-3) var(--dt-ease); }
.q-text { font:700 24px/32px var(--dt-font-sans); margin-bottom:var(--s-6); }
.answer { display:block; width:100%; text-align:left; padding:var(--s-4) var(--s-6);
  margin-bottom:var(--s-3); border-radius:var(--r-button); background:var(--dt-surface-1);
  border:1px solid var(--dt-border); color:var(--dt-text); font-size:16px;
  transition:border-color var(--dt-dur-2), background var(--dt-dur-2), transform var(--dt-dur-1); }
.answer:active { transform:scale(.99); }
.answer.sel { border-color:var(--dt-rose); background:rgba(var(--dt-rose-rgb),.10); }

/* --- settings --- */
.set-group { background:var(--dt-surface-1); border:1px solid var(--dt-border);
  border-radius:var(--r-card); padding:var(--s-2) var(--s-6); margin-bottom:var(--s-4); }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-4) 0; border-bottom:1px solid var(--dt-border); }
.set-row:last-child { border-bottom:0; }
.set-row .lbl { font-size:16px; } .set-row .sub { font-size:13px; color:var(--dt-text-3); }
.seg { display:inline-flex; background:var(--dt-surface-2); border-radius:var(--r-pill); padding:3px; }
.seg button { border:0; background:none; color:var(--dt-text-2); padding:8px 14px;
  border-radius:var(--r-pill); font-size:14px; font-weight:600; }
.seg button.on { background:var(--dt-grad-action); color:#fff; }
.switch { width:50px; height:30px; border-radius:var(--r-pill); background:var(--dt-surface-2);
  border:1px solid var(--dt-border-strong); position:relative; transition:background var(--dt-dur-2); }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:var(--r-pill); background:var(--dt-text-2); transition:transform var(--dt-dur-2); }
.switch.on { background:var(--dt-grad-action); border-color:transparent; }
.switch.on::after { transform:translateX(20px); background:#fff; }

/* --- generic --- */
.btn { display:block; width:100%; padding:16px; border:0; border-radius:var(--r-button);
  background:var(--dt-grad-action); color:#fff; font:700 16px var(--dt-font-sans);
  transition:transform var(--dt-dur-1) var(--dt-ease); }
.btn:active { transform:scale(.98); }
.btn.ghost { background:var(--dt-surface-1); border:1px solid var(--dt-border-strong); color:var(--dt-text); }
.empty { text-align:center; padding:var(--s-12) var(--s-4); }
.empty .ico { font-size:44px; margin-bottom:var(--s-4); }
.empty h1 { font-size:22px; } .empty p { color:var(--dt-text-2); margin:0 0 var(--s-6); }
.center-screen { min-height:70vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; }
.spinner { width:34px; height:34px; border-radius:50%; border:3px solid var(--dt-border-strong);
  border-top-color:var(--dt-rose); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.topbar { display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-6); }
.back { background:var(--dt-surface-1); border:1px solid var(--dt-border-strong);
  border-radius:var(--r-pill); width:40px; height:40px; color:var(--dt-text); font-size:20px; }

.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(16,17,20,.86); backdrop-filter:blur(16px);
  border-top:1px solid var(--dt-border); }
.tab { flex:1; background:none; border:0; color:var(--dt-text-3); display:flex; flex-direction:column;
  align-items:center; gap:3px; padding:6px 0; font-size:11px; font-weight:600; }
.tab .tab-i { font-size:20px; line-height:1; }
.tab.on { color:var(--dt-rose-light); }
.toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); z-index:20;
  background:var(--dt-elevated); border:1px solid var(--dt-border-strong); color:var(--dt-text);
  padding:12px 18px; border-radius:var(--r-pill); font-size:14px; box-shadow:0 8px 30px rgba(0,0,0,.5);
  opacity:0; transition:opacity var(--dt-dur-2); }
.toast.show { opacity:1; }
.toast.match { border-color:rgba(var(--dt-rose-rgb),.6); color:var(--dt-rose-light); }