/* ===== Анкета: rate.guloxy.com ===== */

.sheet{
  max-width:560px;margin:0 auto;
  padding:0 16px calc(132px + env(safe-area-inset-bottom));
}

/* ---------- шапка ---------- */
.hero{position:relative;padding:22px 0 30px}
.hero__meta{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:18px;
}
.hero__dot{width:8px;height:8px;background:var(--signal);border:2px solid var(--ink)}
.hero__title{
  margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;
  line-height:.86;letter-spacing:-.045em;
}
.hero__l1{display:block;font-size:min(18.6vw,116px)}
.hero__l2{display:block;margin-top:.06em}
.hero__l2 span{
  display:inline-block;font-size:min(18.6vw,116px);
  background:var(--signal);border:var(--b) solid var(--ink);box-shadow:var(--shadow);
  padding:.06em .12em .02em .08em;transform:rotate(-2.5deg);transform-origin:left bottom;
  margin-left:-4px;
}
.hero__lead{
  margin:30px 0 0;max-width:calc(100% - 124px);
  font-size:16px;line-height:1.42;font-weight:500;color:var(--ink-2);
}
.seal{
  position:absolute;right:-4px;bottom:16px;width:112px;height:112px;
  transform:rotate(8deg);
}
.seal__spin{transform-origin:100px 100px;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.again{
  border:var(--b) dashed var(--ink);background:var(--paper-2);
  padding:12px 14px;margin:0 0 6px;font-size:14px;line-height:1.4;
}
.again b{display:block;font-weight:800}

/* ---------- шаги ---------- */
.step{border-top:var(--b) solid var(--ink);padding:24px 0 34px}
.step__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.step__num{
  font-family:var(--display);font-weight:900;font-size:52px;line-height:.8;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:2px var(--ink);flex:none;
  transition:color .25s, -webkit-text-stroke-color .25s;
}
.step.is-done .step__num{color:var(--ink)}
.step h2{
  margin:0;font-family:var(--display);font-weight:800;font-size:21px;line-height:1.05;
  text-transform:uppercase;letter-spacing:-.02em;
}
.step__hint{
  margin:6px 0 0;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}

/* общая плитка */
.tile{
  position:relative;display:flex;align-items:center;justify-content:center;
  border:var(--b) solid var(--ink);background:var(--paper);border-radius:0;padding:0;
  font-family:var(--display);font-weight:900;letter-spacing:-.03em;
  box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .08s ease, background .12s, color .12s;
}
.tile:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.tile[aria-checked="true"]{
  background:var(--signal);transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);
}

/* класс */
.grades{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.grades .tile{aspect-ratio:1;font-size:clamp(18px,6vw,26px)}
.grades__cap{
  aspect-ratio:1;background:var(--ink);color:var(--paper-3);border:var(--b) solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:clamp(15px,5vw,22px);letter-spacing:-.04em;
  transition:color .15s;
}
.grades__cap.is-set{color:var(--signal)}
.letters{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}
.letters .tile{height:50px;font-size:19px}
.letters .tile--none{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;line-height:1.05;text-align:center}

/* оценка */
.meter{
  background:var(--ink);color:var(--paper);border:var(--b) solid var(--ink);
  box-shadow:6px 6px 0 var(--signal);
  padding:14px 16px 16px;margin:0 6px 24px 0;overflow:hidden;
}
.meter__top{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#A39B8C;
}
.meter__num{
  font-family:var(--display);font-weight:900;font-size:clamp(108px,38vw,168px);line-height:.92;
  letter-spacing:-.07em;margin:6px 0 2px -4px;color:var(--paper-3);
  font-variant-numeric:tabular-nums;
}
.meter.is-set .meter__num{color:var(--signal)}
.meter__num.slam{animation:slam .38s var(--ease-slam)}
@keyframes slam{0%{transform:scale(1.28) rotate(-4deg);opacity:.2}100%{transform:none;opacity:1}}
.meter__word{
  font-family:var(--display);font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:-.01em;
  min-height:1.2em;
}
.meter__bar{
  margin-top:14px;height:12px;border:2px solid var(--paper);position:relative;
}
.meter__bar::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),var(--ink) calc(10% - 2px) 10%);
}
.meter__bar i{
  position:absolute;left:0;top:0;bottom:0;width:0;background:var(--signal);
  transition:width .35s var(--ease-out);
}

.scores{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scores .tile{height:62px;font-size:25px}
.scores .tile.is-under{background:var(--paper-3)}
.scores .tile[aria-checked="true"]{background:var(--signal)}
.scores__ends{
  display:flex;justify-content:space-between;margin-top:12px;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}

/* формат */
.q{margin:-4px 0 18px;font-size:17px;line-height:1.4;font-weight:600}
.formats{display:grid;gap:10px;margin-bottom:22px}
.fmt{
  display:flex;align-items:center;gap:14px;text-align:left;
  height:62px;padding:0 16px;
  border:var(--b) solid var(--ink);background:var(--paper);box-shadow:var(--shadow-sm);border-radius:0;
  font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;
  transition:transform .08s ease, box-shadow .08s ease, background .12s, color .12s;
}
.fmt:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.fmt__mark{
  flex:none;width:26px;height:26px;border:var(--b) solid var(--ink);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.fmt[aria-checked="true"]{background:var(--ink);color:var(--paper);transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.fmt[aria-checked="true"] .fmt__mark{background:var(--signal);border-color:var(--signal)}
.fmt[aria-checked="true"] .fmt__mark::after{
  content:"";width:12px;height:7px;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);
  transform:translateY(-2px) rotate(-45deg);
}

.note{display:block;border:var(--b) solid var(--ink);background:var(--paper-2);box-shadow:var(--shadow-sm)}
.note__head{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--ink);color:var(--paper);padding:8px 12px;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.note__count{color:#A39B8C}
.note__count.is-near{color:var(--signal)}
.note textarea{
  display:block;width:100%;min-height:168px;resize:vertical;border:0;outline:0;border-radius:0;
  padding:4px 14px 14px;background:transparent;
  font-family:var(--body);font-size:17px;line-height:28px;font-weight:500;
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,rgba(18,17,16,.16) 27px 28px);
  background-attachment:local;background-position:0 4px;
}
.note textarea::placeholder{color:var(--mute);opacity:1}
.note:focus-within{outline:3px solid var(--signal);outline-offset:3px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.foot{border-top:var(--b) solid var(--ink);padding:18px 0 8px}
.foot p{margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.6;letter-spacing:.02em;color:var(--mute)}

/* ---------- нижняя панель ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--paper);border-top:var(--b) solid var(--ink);
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
}
.dock__inner{max-width:528px;margin:0 auto;display:flex;gap:10px;align-items:stretch}
.dock__sum{display:flex;gap:6px}
.chip{
  width:58px;border:var(--b) solid var(--ink);background:var(--paper-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.chip span{font-family:var(--mono);font-weight:700;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.chip b{font-family:var(--display);font-weight:900;font-size:18px;line-height:1;letter-spacing:-.03em}
.chip.is-set{background:var(--ink)}
.chip.is-set span{color:#A39B8C}
.chip.is-set b{color:var(--signal)}
.submit{flex:1;height:60px;font-size:13.5px;padding:0 12px;min-width:0}
.submit span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.submit__arrow{width:22px;height:22px;flex:none;display:none}
.submit.is-ready{font-size:16px}
.submit.is-ready .submit__arrow{display:block}
.submit.is-ready{background:var(--signal);color:var(--ink)}
.submit.is-ready .submit__arrow{animation:nudge 1.4s var(--ease-out) infinite}
@keyframes nudge{0%,60%,100%{transform:none}30%{transform:translateX(5px)}}
.submit.is-busy{pointer-events:none}
.submit.is-busy span::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.dock__err{
  max-width:528px;margin:10px auto 0;background:var(--ink);color:var(--signal);
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.04em;padding:8px 12px;
}

.shake{animation:shake .42s ease}
@keyframes shake{
  0%,100%{transform:none}
  20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}
}

/* ---------- экран «Принято» ---------- */
.done{
  position:fixed;inset:0;z-index:100;background:var(--signal);color:var(--ink);
  display:flex;align-items:center;justify-content:center;padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  overflow:auto;animation:fadeIn .2s ease;
}
.done[hidden]{display:none}
.done::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(18,17,16,.07) 22px 24px);
}
.done__inner{position:relative;max-width:420px;width:100%;text-align:center}
.stamp{display:flex;justify-content:center;margin-bottom:34px}
.stamp__ring{
  width:min(74vw,280px);aspect-ratio:1;border-radius:50%;
  border:7px solid var(--ink);outline:3px solid var(--ink);outline-offset:-20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  transform:rotate(-12deg);animation:stampIn .55s var(--ease-slam) .05s both;
  background:var(--signal);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.1'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.1'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.stamp__big{
  font-family:var(--display);font-weight:900;font-size:min(8.6vw,33px);text-transform:uppercase;letter-spacing:-.04em;
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:6px 4px 4px;line-height:1;
}
.stamp__small{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
@keyframes stampIn{
  0%{transform:rotate(-30deg) scale(2.4);opacity:0}
  60%{transform:rotate(-10deg) scale(.94);opacity:1}
  100%{transform:rotate(-12deg) scale(1)}
}
@keyframes fadeIn{from{opacity:0}}
.done__title{
  margin:0;font-family:var(--display);font-weight:900;font-size:48px;line-height:.9;text-transform:uppercase;letter-spacing:-.05em;
  animation:rise .4s var(--ease-out) .35s both;
}
.done__text{margin:14px auto 28px;max-width:300px;font-size:16px;font-weight:600;line-height:1.4;animation:rise .4s var(--ease-out) .42s both}
.done__note{
  display:inline-block;margin:0;padding:8px 12px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;
  animation:rise .4s var(--ease-out) .5s both;
}
body.is-checking .sheet,body.is-checking .dock{visibility:hidden}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
body.is-done{overflow:hidden}

/* ---------- широкие экраны ---------- */
@media (min-width:640px){
  body{background:var(--paper-2)}
  .sheet{background:var(--paper);border-left:var(--b) solid var(--ink);border-right:var(--b) solid var(--ink);padding-left:28px;padding-right:28px;min-height:100vh}
  .hero__l1,.hero__l2 span{font-size:104px}
  .dock{background:transparent;border-top:0;padding-bottom:20px;pointer-events:none}
  .dock__inner,.dock__err{pointer-events:auto}
  .dock__inner{background:var(--paper);border:var(--b) solid var(--ink);box-shadow:var(--shadow);padding:10px}
}
@media (max-width:350px){
  .hero__lead{max-width:none;padding-right:96px;font-size:15px}
  .seal{width:92px;height:92px}
  .chip{width:50px}
  .submit{font-size:13px}
}