/* ====================================================================
   ГРАНЬ — цифровой портрет личности
   Палитра: обсидиановая шкатулка + дисперсия света в огранке камня.
   Шрифты: Fraunces (дисплей) · Manrope (текст) · Space Mono (индексы)
   ==================================================================== */

:root{
  --obsidian:   #0B0D12;
  --obsidian-2: #0E1118;
  --ink:        #14171F;
  --platinum:   #ECEAE4;
  --muted:      #8A8F9C;
  --muted-dim:  #5C606C;
  --champagne:  #C9A86A;
  --champagne-d:#9E8043;

  /* дисперсия — переливы граней */
  --ice:      #7AD7F0;
  --amethyst: #B49CF0;
  --rose:     #F0A9C8;
  --gold:     #E7C887;

  --panel:        rgba(20,23,31,.62);
  --panel-border: rgba(201,168,106,.20);
  --hairline:     rgba(236,234,228,.10);

  --r-lg: 22px;
  --r-md: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* иначе display:flex на модалках перебивает hidden */
html,body{ margin:0; height:100%; }
body{
  background:
    radial-gradient(120% 90% at 50% -10%, #161A24 0%, var(--obsidian-2) 42%, var(--obsidian) 100%);
  color:var(--platinum);
  font-family:"Manrope",system-ui,sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* лёгкое зерно, чтобы фон не был «пластиковым» */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Шаги ─────────────────────────────────────────────────────────── */
#app{ position:relative; z-index:1; }
.step{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:48px 24px;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
  overflow-y:auto;
}
.step.is-active{ opacity:1; visibility:visible; transform:none; }

/* ── Типографика ──────────────────────────────────────────────────── */
.eyebrow{
  font-family:"Space Mono",monospace;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--champagne); margin:0 0 18px;
}
.display{
  font-family:"Fraunces",serif; font-weight:300;
  font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.04;
  letter-spacing:-.01em; margin:0 0 24px;
}
.display-sm{
  font-family:"Fraunces",serif; font-weight:300;
  font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.1; margin:0 0 18px;
}
.lede{
  color:#C5C8D0; font-size:1.06rem; max-width:46ch; margin:0 auto 32px;
}
.lede.sm{ font-size:.98rem; }
.micro{ color:var(--muted-dim); font-size:.82rem; margin-top:18px; }

/* ── Кнопки ───────────────────────────────────────────────────────── */
.btn{
  font-family:"Manrope",sans-serif; font-weight:500; font-size:.96rem;
  padding:14px 30px; border-radius:100px; cursor:pointer;
  border:1px solid transparent; transition:.25s var(--ease);
}
.btn-primary{
  color:#0B0D12;
  background:linear-gradient(120deg,var(--gold),var(--champagne) 55%,var(--champagne-d));
  box-shadow:0 8px 30px -10px rgba(201,168,106,.6);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -12px rgba(201,168,106,.75); }
.btn-primary:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-ghost{
  color:var(--platinum); background:transparent; border-color:var(--hairline);
}
.btn-ghost:hover{ border-color:var(--champagne); color:var(--champagne); }
.btn-text{ color:var(--muted); background:none; padding:14px 14px; }
.btn-text:hover{ color:var(--platinum); }

/* ── Интро ────────────────────────────────────────────────────────── */
.intro{ text-align:center; max-width:680px; }
.gem-stage{ width:200px; height:200px; margin:0 auto 26px; }
.gem-stage.big{ width:240px; height:240px; }

/* ── Панель (согласие/загрузка) ───────────────────────────────────── */
.panel{
  width:100%; max-width:560px;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--r-lg); padding:40px;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8);
}
.privacy p{ color:#C5C8D0; }
.ticks{ list-style:none; padding:0; margin:18px 0 26px; }
.ticks li{
  position:relative; padding-left:30px; margin-bottom:14px;
  color:#B9BCC6; font-size:.95rem;
}
.ticks li::before{
  content:""; position:absolute; left:6px; top:.55em;
  width:7px; height:7px; border-radius:50%;
  background:linear-gradient(120deg,var(--ice),var(--amethyst),var(--rose));
}
.consent{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:16px 0; color:#C5C8D0;
}
.consent input{ width:18px; height:18px; accent-color:var(--champagne); }
.row{ display:flex; gap:14px; justify-content:flex-end; margin-top:14px; }

/* ── Квиз ─────────────────────────────────────────────────────────── */
.quiz{ width:100%; max-width:640px; }
.quiz-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:26px;
}
.facet-tag{
  font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--champagne);
  padding:6px 14px; border:1px solid var(--panel-border); border-radius:100px;
}
.progress{ font-family:"Space Mono",monospace; font-size:.8rem; color:var(--muted); }

.q-card{
  background:var(--panel); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:34px;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -45px rgba(0,0,0,.8);
}
.q-index{
  font-family:"Space Mono",monospace; font-size:.8rem;
  color:var(--champagne-d); margin:0 0 12px; letter-spacing:.1em;
}
.q-text{
  font-family:"Fraunces",serif; font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.7rem); line-height:1.3; margin:0 0 22px;
}
.q-input{
  width:100%; resize:vertical; min-height:120px;
  background:rgba(11,13,18,.55); color:var(--platinum);
  border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:16px; font-family:inherit; font-size:1rem; line-height:1.5;
  transition:border-color .25s var(--ease);
}
.q-input:focus{ outline:none; border-color:var(--champagne); }
.q-input::placeholder{ color:var(--muted-dim); }

.q-tools{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.chip{
  display:inline-flex; align-items:center; gap:9px;
  font-family:inherit; font-size:.9rem; color:var(--platinum);
  background:transparent; border:1px solid var(--hairline);
  border-radius:100px; padding:9px 18px; cursor:pointer;
  transition:.25s var(--ease);
}
.chip:hover{ border-color:var(--champagne); color:var(--champagne); }
.chip.is-rec{
  border-color:var(--rose); color:var(--rose);
  animation:pulse 1.3s infinite;
}
.chip .ic{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.rec-hint{ font-size:.82rem; color:var(--muted); }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(240,169,200,.4);} 50%{ box-shadow:0 0 0 7px rgba(240,169,200,0);} }

.quiz-foot{
  display:flex; justify-content:space-between; align-items:center; margin-top:24px;
}
.foot-right{ display:flex; gap:10px; align-items:center; }

/* рельса граней — прогресс как набор зажигающихся точек */
.facet-rail{ display:flex; gap:8px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.rail-dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(236,234,228,.14); transition:.4s var(--ease);
}
.rail-dot.done{ background:linear-gradient(120deg,var(--ice),var(--amethyst),var(--rose)); }
.rail-dot.current{ background:var(--champagne); transform:scale(1.45); }

/* ── Загрузка файлов ──────────────────────────────────────────────── */
.drop{
  display:block; margin:8px 0 16px; cursor:pointer;
  border:1.5px dashed var(--panel-border); border-radius:var(--r-md);
  padding:34px; text-align:center; transition:.25s var(--ease);
}
.drop:hover,.drop.over{ border-color:var(--champagne); background:rgba(201,168,106,.05); }
.drop-inner p{ margin:8px 0 0; color:#C5C8D0; }
.ic-lg{ width:34px; height:34px; fill:none; stroke:var(--champagne); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.files{ list-style:none; padding:0; margin:0 0 24px; }
.files li{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 16px; margin-bottom:8px;
  background:rgba(11,13,18,.5); border:1px solid var(--hairline);
  border-radius:10px; font-size:.9rem;
}
.files li .fname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70%; }
.files li button{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.1rem;
}
.files li button:hover{ color:var(--rose); }

/* ── Сборка ───────────────────────────────────────────────────────── */
.analyzing{ text-align:center; max-width:520px; }
.analyzing .gem-stage{ margin-bottom:30px; }

/* ── Результат ────────────────────────────────────────────────────── */
.result{ width:100%; max-width:760px; text-align:center; padding-bottom:40px; }
.result-headline{
  font-size:clamp(1.8rem,4.4vw,3rem); font-weight:300; margin:0 auto 8px;
  max-width:20ch;
  background:linear-gradient(110deg,var(--platinum),var(--gold) 60%,var(--ice));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.result-stage{ margin:26px auto 12px; }
.result-gem{ width:min(340px,80vw); height:min(340px,80vw); margin:0 auto; }
.gem-hint{ font-size:.82rem; color:var(--muted); margin:6px 0 0; }

.facet-panel{
  text-align:left; margin:26px auto 0; max-width:640px;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--r-lg); padding:34px; backdrop-filter:blur(14px);
  animation:rise .5s var(--ease);
}
@keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
.facet-panel h3{
  font-family:"Fraunces",serif; font-weight:400; font-size:1.5rem; margin:0 0 4px;
}
.facet-panel .fp-lead{
  font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--champagne); margin:0 0 18px;
}
.facet-panel p{ color:#C9CCD4; line-height:1.65; }
.fp-block{ margin-top:18px; }
.fp-block h4{
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px;
}
.fp-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.fp-tags span{
  font-size:.86rem; padding:7px 14px; border-radius:100px;
  background:rgba(201,168,106,.10); border:1px solid var(--panel-border);
  color:#E3D9C3;
}
.fp-list{ list-style:none; padding:0; margin:0; }
.fp-list li{
  position:relative; padding-left:24px; margin-bottom:11px; color:#C9CCD4;
}
.fp-list li::before{
  content:""; position:absolute; left:4px; top:.6em; width:6px; height:6px;
  transform:rotate(45deg);
  background:linear-gradient(120deg,var(--ice),var(--rose));
}

.result-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.note-card{
  max-width:560px; margin:26px auto 0; padding:22px 26px;
  background:rgba(122,215,240,.05); border:1px solid rgba(122,215,240,.18);
  border-radius:var(--r-md); color:#BFD9E2; font-size:.94rem; text-align:left;
}

/* ── Камень (SVG) ─────────────────────────────────────────────────── */
.gem-svg{ width:100%; height:100%; overflow:visible; }
.gem-facet{ transition:opacity .6s var(--ease); }
.gem-spin{ transform-origin:50% 50%; animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.gem-breathe{ transform-origin:50% 50%; animation:breathe 5s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ opacity:.85;} 50%{ opacity:1; transform:scale(1.015);} }

/* грани результата — кликабельные */
.rg-wedge{ cursor:pointer; transition:.35s var(--ease); }
.rg-wedge:hover{ opacity:.92; }
.rg-wedge.active .rg-fill{ filter:brightness(1.35); }
.rg-label{
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.12em;
  fill:var(--platinum); text-transform:uppercase; pointer-events:none;
}
.rg-wedge.active .rg-label{ fill:var(--gold); }

/* ── Тост ─────────────────────────────────────────────────────────── */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:var(--ink); border:1px solid var(--panel-border);
  color:var(--platinum); padding:14px 24px; border-radius:100px;
  font-size:.9rem; z-index:50; box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
  animation:rise .3s var(--ease);
}

/* ── Адаптив ──────────────────────────────────────────────────────── */
@media (max-width:560px){
  .panel,.q-card,.facet-panel{ padding:26px; }
  .row{ flex-direction:column-reverse; }
  .row .btn{ width:100%; }
  .quiz-foot{ flex-wrap:wrap; gap:12px; }
}

/* ── Доступность ──────────────────────────────────────────────────── */
:focus-visible{ outline:2px solid var(--champagne); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .step{ transition:opacity .2s !important; }
}

/* ── Вход / регистрация ───────────────────────────────────────────── */
.auth-chip{
  position:fixed; top:18px; right:18px; z-index:40;
  font-family:"Manrope",sans-serif; font-size:.85rem; color:var(--platinum);
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:100px; padding:9px 18px; cursor:pointer;
  backdrop-filter:blur(10px); transition:.25s var(--ease);
}
.auth-chip:hover{ border-color:var(--champagne); color:var(--champagne); }

.modal{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center;
  justify-content:center; padding:24px;
  background:rgba(6,8,12,.72); backdrop-filter:blur(6px);
  animation:rise .25s var(--ease);
}
.modal-card{
  position:relative; width:100%; max-width:420px;
  background:var(--obsidian-2); border:1px solid var(--panel-border);
  border-radius:var(--r-lg); padding:38px 34px;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9);
}
.modal-card .display-sm{ margin-bottom:8px; }
.modal-card .lede{ margin-bottom:22px; }
.modal-x{
  position:absolute; top:16px; right:18px; background:none; border:none;
  color:var(--muted); font-size:1.5rem; cursor:pointer; line-height:1;
}
.modal-x:hover{ color:var(--platinum); }
.auth-input{ min-height:0; margin-bottom:12px; }
.auth-err{
  color:#F0A9C8; font-size:.86rem; margin:2px 0 12px;
}
#authModal .btn-primary{ width:100%; margin-top:6px; }
.auth-switch{
  text-align:center; color:var(--muted); font-size:.88rem; margin:18px 0 0;
}
.auth-switch a{ color:var(--champagne); text-decoration:none; margin-left:6px; }
.auth-switch a:hover{ text-decoration:underline; }

/* ── Инфографика ──────────────────────────────────────────────────── */
.infographic-wrap{
  margin:30px auto 0; max-width:540px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.infographic{
  width:100%; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--panel-border);
  box-shadow:0 30px 80px -45px rgba(0,0,0,.8);
}
.infographic svg{ display:block; width:100%; height:auto; }

/* ── Личный кабинет ───────────────────────────────────────────────── */
#cabUser{ margin-bottom:18px; color:var(--muted); }
.report-list{ list-style:none; padding:0; margin:0 0 10px; max-height:48vh; overflow-y:auto; }
.report-list li{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; margin-bottom:10px;
  background:rgba(11,13,18,.5); border:1px solid var(--hairline);
  border-radius:var(--r-md); cursor:pointer; transition:.2s var(--ease);
}
.report-list li:hover{ border-color:var(--champagne); }
.report-list .rep-main{ flex:1; min-width:0; }
.report-list .rep-head{
  font-family:"Fraunces",serif; font-size:1rem; color:var(--platinum);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.report-list .rep-date{ font-size:.78rem; color:var(--muted); margin-top:3px; }
.report-list .rep-del{
  background:none; border:none; color:var(--muted-dim); font-size:1.2rem;
  cursor:pointer; padding:4px 6px; line-height:1;
}
.report-list .rep-del:hover{ color:var(--rose); }
.cab-empty{ color:var(--muted); text-align:center; padding:18px 0 8px; line-height:1.6; }
#logoutBtn{ display:block; margin:8px auto 0; }

/* ── Тизер «Цифровой двойник — в разработке» ──────────────────────── */
.avatar-teaser{ margin:30px auto 0; max-width:560px; text-align:left; }
.avatar-card{
  position:relative;
  background:linear-gradient(150deg, rgba(180,156,240,.08), rgba(122,215,240,.05));
  border:1px solid rgba(180,156,240,.28);
  border-radius:var(--r-lg); padding:28px 30px;
}
.avatar-badge{
  display:inline-block; font-family:"Space Mono",monospace; font-size:.66rem;
  letter-spacing:.22em; text-transform:uppercase; color:#0B0D12;
  background:linear-gradient(120deg,var(--ice),var(--amethyst));
  padding:5px 12px; border-radius:100px; margin-bottom:14px;
}
.avatar-card h3{
  font-family:"Fraunces",serif; font-weight:400; font-size:1.5rem; margin:0 0 8px;
}
.avatar-card p{ color:#C5C8D0; font-size:.96rem; line-height:1.6; margin:0; }
.avatar-card details{ margin-top:16px; }
.avatar-card summary{
  cursor:pointer; color:var(--champagne); font-size:.92rem; list-style:none;
  padding:8px 0; user-select:none;
}
.avatar-card summary::-webkit-details-marker{ display:none; }
.avatar-card summary::before{ content:"＋ "; }
.avatar-card details[open] summary::before{ content:"− "; }
.avatar-card details ul{ list-style:none; padding:0; margin:6px 0 4px; }
.avatar-card details li{
  position:relative; padding-left:22px; margin-bottom:10px;
  color:#C9CCD4; font-size:.92rem; line-height:1.5;
}
.avatar-card details li::before{
  content:""; position:absolute; left:4px; top:.55em; width:6px; height:6px;
  transform:rotate(45deg); background:linear-gradient(120deg,var(--ice),var(--amethyst));
}
.avatar-card .avatar-foot{ margin-top:14px; font-size:.86rem; color:var(--muted); }
.avatar-card .avatar-foot a{ color:var(--champagne); }