/* auth.css — вход в Космопорт.
   Материал: Solid Glass (deeplethe/solid-glass), адаптирован в чистый CSS.
   Правила материала: отделка по кромке (светлая грань сверху + волосяная
   граница + тень снизу), нейтральный серый, глубина = толщина, одно состояние. */

:root{
  --radius: 0.875rem;
  --radius-control: 0.7rem;

  /* тёплый янтарь — ТА ЖЕ краска, что на пульте (не холодный серый) */
  --background: oklch(0.150 0.026 64);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.36 0 0 / 54%);
  --popover: oklch(0.22 0 0 / 96%);
  --primary: #FFAE1A;
  --primary-foreground: #1A1206;
  --muted: oklch(1 0 0 / 7%);
  --muted-foreground: oklch(0.79 0.018 72);
  --border: oklch(1 0 0 / 11%);
  --panel-base: #201203;           /* подложка стекла: та же, что у шапки и футера пульта */
  --neon-amber: oklch(0.82 0.20 62);
  --ease: cubic-bezier(.22,1,.36,1);

  /* отделка кромки */
  --glass-rim: oklch(1 0 0 / 22%);
  --glass-inner: oklch(1 0 0 / 4%);
  --glass-edge: oklch(1 0 0 / 9%);
  --glass-shade: oklch(0 0 0 / 60%);
  --glass-contact: oklch(0 0 0 / 10%);
  --glass-state-edge: oklch(1 0 0 / 6%);

  /* главная кнопка — плотное стекло цвета чернил */
  --primary-solid: 94%;
  --primary-rim: oklch(1 0 0);
  --primary-under: oklch(0 0 0 / 22%);
  --primary-inner: oklch(0 0 0 / 7%);
  --primary-edge: oklch(1 0 0 / 26%);

  /* поле — стекло, на котором печатают */
  --field: oklch(1 0 0 / 6%);
  --field-rim: oklch(1 0 0 / 15%);
  --field-edge: oklch(1 0 0 / 8%);
  --focus-line: oklch(0.84 0.16 74 / 62%);

  --brand: #FFAE1A;
  --brand-ink: #1A1206;
  --glass-blur: blur(26px);
  --glass-blur-control: blur(14px);
  --mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;padding:24px;
  /* тот же свет сверху → тьма внизу, что на пульте */
  background:linear-gradient(180deg,
    oklch(0.262 0.055 62) 0%,
    oklch(0.226 0.046 62) 20%,
    oklch(0.196 0.039 62) 44%,
    oklch(0.168 0.032 62) 70%,
    oklch(0.150 0.026 64) 100%);
  color:var(--foreground);
  font:400 15px/1.5 "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  display:grid;place-items:center;
  min-height:100%;
}
/* янтарь тянется сверху вниз и не гаснет в ноль — тот же, что на пульте */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 92% at 50% -12%,
      rgba(255,198,76,.34) 0%,
      rgba(255,184,44,.22) 20%,
      rgba(255,174,26,.13) 40%,
      rgba(255,174,26,.07) 62%,
      rgba(255,174,26,.038) 100%),
    linear-gradient(180deg,
      rgba(255,174,26,.095) 0%,
      rgba(255,174,26,.062) 40%,
      rgba(255,174,26,.040) 100%);
}

.card{
  position:relative;
  z-index:1;
  width:100%;max-width:380px;
  padding:30px 28px 22px;
  border-radius:var(--radius);
  /* та же янтарная пластина, что шапка и футер пульта */
  background:linear-gradient(180deg, rgba(255,174,26,.13), rgba(255,174,26,.035)), var(--panel-base);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:
    inset 0 1px 0 rgba(255,174,26,.32),
    inset 0 0 0 1px rgba(255,174,26,.10),
    0 0 0 1px oklch(1 0 0 / 5%),
    0 2px 3px oklch(0 0 0 / 45%),
    0 6px 14px -2px oklch(0 0 0 / 42%),
    0 22px 52px -22px oklch(0 0 0 / 64%);
  animation:sg-float-in 220ms var(--ease);
  transition:box-shadow .25s var(--ease);
}
/* пока в карточке курсор или фокус — вывеска светится */
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(125% 110% at 50% 0%, oklch(0.84 0.20 62 / 42%), transparent 62%);
  mix-blend-mode:screen;opacity:0;transition:opacity .28s var(--ease);
}
.card:focus-within{
  box-shadow:
    inset 0 1px 0 rgba(255,196,90,.62),
    inset 0 0 0 1px rgba(255,174,26,.24),
    0 0 0 1px oklch(0.84 0.20 62 / 78%),
    0 0 24px oklch(0.82 0.20 62 / 46%),
    0 0 70px -6px oklch(0.80 0.20 62 / 30%),
    0 22px 52px -22px oklch(0 0 0 / 64%);
}
.card:hover::after,.card:focus-within::after{opacity:1;animation:neon-breathe 3.2s ease-in-out infinite alternate}
.card.lit::after{animation:neon-ignite .52s steps(1,end) 1,neon-breathe 3.2s ease-in-out .52s infinite alternate}
/* отказ — кромка становится красной, как «не запущен» на пульте */
.card.bad{
  box-shadow:
    inset 0 1px 0 rgba(255,174,26,.30),
    inset 0 0 0 1px oklch(0.66 0.22 27 / 55%),
    0 0 0 1px oklch(0.68 0.23 27 / 95%),
    0 0 26px oklch(0.66 0.22 27 / 58%),
    0 0 80px -8px oklch(0.64 0.20 27 / 34%),
    0 22px 52px -22px oklch(0 0 0 / 64%);
}
@keyframes neon-breathe{from{opacity:.55}to{opacity:1}}
@keyframes neon-ignite{
  0%{opacity:0}9%{opacity:.95}15%{opacity:.2}25%{opacity:1}33%{opacity:.45}43%{opacity:1}100%{opacity:1}}

/* вывеска «КОСМОПОРТ» — горит всегда, тем же письмом, что на пульте */
.brand{
  font:800 20px/1 "Onest", system-ui, sans-serif;letter-spacing:.2em;text-align:center;
  text-shadow:0 0 11px oklch(0.92 0.10 72 / 44%),0 0 28px oklch(0.88 0.16 64 / 26%);
}
.brand em{
  font-style:normal;color:var(--brand);
  text-shadow:
    0 0 8px oklch(0.92 0.19 62 / 84%),
    0 0 22px oklch(0.88 0.20 62 / 56%),
    0 0 50px oklch(0.86 0.20 62 / 34%);
  animation:sign-breathe 4.4s ease-in-out infinite alternate;
}
.brand .bmark{width:.78em;height:.78em;vertical-align:-.013em;margin:0 .03em;
  filter:drop-shadow(0 0 4px oklch(0.90 0.18 62 / 30%))}
.brand .num{font-style:normal;color:var(--brand);letter-spacing:.08em;margin-left:.5em;
  text-shadow:0 0 6px oklch(0.92 0.19 62 / 70%),0 0 16px oklch(0.88 0.20 62 / 44%);
  animation:sign-breathe 4.4s ease-in-out infinite alternate}

/* ── логин: крупный вертикальный локап ── */
.brand-lg{font:800 30px/1 "Onest", system-ui, sans-serif;letter-spacing:.2em;
  display:flex;flex-direction:column;align-items:center;gap:.42em;
  text-shadow:0 0 11px oklch(0.92 0.10 72 / 44%),0 0 28px oklch(0.88 0.16 64 / 26%)}
.brand-lg .word{display:inline-flex;align-items:center;white-space:nowrap}
.brand-lg .word em{font-style:normal;color:var(--brand);
  text-shadow:0 0 8px oklch(0.92 0.19 62 / 84%),0 0 22px oklch(0.88 0.20 62 / 56%),0 0 50px oklch(0.86 0.20 62 / 34%);
  animation:sign-breathe 4.4s ease-in-out infinite alternate}
.brand-lg .bmark{width:.78em;height:.78em;vertical-align:-.013em;margin:0 .03em;
  filter:drop-shadow(0 0 4px oklch(0.90 0.18 62 / 30%))}
.brand-lg .station{display:inline-flex;align-items:baseline;gap:0;
  font:600 11px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase}
.brand-lg .station .w{color:var(--foreground)}
.brand-lg .station .w.nm{letter-spacing:.06em;font-size:1.12em}
.brand-lg .station .dot{color:var(--brand);font-size:1.1em;line-height:0;margin:0 .48em;
  text-shadow:0 0 6px oklch(0.92 0.19 62 / 80%),0 0 16px oklch(0.88 0.20 62 / 50%)}
.brand-lg .station .num{font-style:normal;color:var(--brand);letter-spacing:.14em;margin-left:.4em;
  text-shadow:0 0 7px oklch(0.92 0.19 62 / 82%),0 0 18px oklch(0.88 0.20 62 / 54%),0 0 40px oklch(0.86 0.20 62 / 30%)}
@keyframes sign-breathe{from{opacity:.84}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.brand em{animation:none}}

/* ── hero: большой CRT-неоновый локап в янтарной рамке-«хедер» ── */
.hero{position:relative;z-index:1;display:flex;justify-content:center;
  width:min(94vw,960px);
  margin:0 0 20px;
  padding:clamp(18px,2.6vw,28px) clamp(18px,2.6vw,34px) clamp(14px,2.2vw,22px);
  border-radius:calc(var(--radius) + 6px);
  background:
    linear-gradient(180deg, oklch(0.34 0.10 62 / 40%) 0%, oklch(0.22 0.08 56 / 26%) 58%, oklch(0.18 0.07 54 / 34%) 100%),
    var(--panel-base);
  border:1px solid oklch(0.84 0.20 62 / 40%);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.12 78 / 26%),
    inset 0 -22px 44px -26px oklch(0 0 0 / 62%),
    inset 0 0 0 1px oklch(0.92 0.14 72 / 10%),
    0 0 0 1px oklch(0.84 0.20 62 / 18%),
    0 18px 50px -14px oklch(0.80 0.20 62 / 34%),
    0 0 84px -12px oklch(0.82 0.20 62 / 26%),
    0 30px 70px -30px oklch(0 0 0 / 70%);
  overflow:hidden;isolation:isolate}
/* светящаяся кромка-волосок по верхней грани рамки */
.hero::marker{content:""}
.hero > .rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  background:linear-gradient(180deg, oklch(0.96 0.12 78 / 16%) 0%, oklch(0 0 0 / 0%) 22%),
             linear-gradient(0deg, oklch(0.80 0.20 62 / 12%) 0%, oklch(0 0 0 / 0%) 18%);
  box-shadow:inset 0 1px 0 oklch(0.98 0.10 80 / 22%)}
.brand-xl{font:800 clamp(30px,6.6vw,92px)/1 "Onest", system-ui, sans-serif;
  letter-spacing:.2em;color:var(--brand);
  display:flex;flex-direction:column;align-items:center;gap:.34em;
  position:relative;
  text-shadow:
    0 0 6px oklch(0.95 0.14 78 / 92%),
    0 0 18px oklch(0.92 0.19 64 / 80%),
    0 0 42px oklch(0.88 0.20 62 / 62%),
    0 0 92px oklch(0.84 0.20 62 / 42%),
    0 0 160px oklch(0.80 0.20 60 / 26%)}
.brand-xl .word{display:inline-flex;align-items:center;white-space:nowrap;
  position:relative;
  animation:crt-breathe 3.6s ease-in-out infinite alternate,
            crt-jitter 6.7s steps(1,end) infinite}
/* «вся неоновая» — и К, и СМ, и ПОРТ светятся янтарём */
.brand-xl .word em{font-style:normal;color:var(--brand);text-shadow:inherit}
.brand-xl .bmark{width:.78em;height:.78em;vertical-align:-.013em;margin:0 .03em;
  filter:drop-shadow(0 0 7px oklch(0.90 0.18 62 / 62%))
         drop-shadow(0 0 20px oklch(0.86 0.20 62 / 34%))}
/* кольцо знака тоже в неон */
.brand-xl .bmark > circle{stroke:var(--brand)}
/* узел станции — раскалённое белое ядро, иначе сливается с янтарным кольцом */
.brand-xl .bmark > g > circle,
.brand-xl .bmark > g > path{fill:oklch(0.98 0.04 92)}
.brand-xl .bmark > g{filter:drop-shadow(0 0 4px oklch(0.98 0.10 84 / 90%))
                            drop-shadow(0 0 10px oklch(0.94 0.14 76 / 60%))}
.brand-xl .station{display:inline-flex;align-items:baseline;gap:0;
  font:600 clamp(11px,1.6vw,15px)/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;
  text-shadow:0 0 8px oklch(0.92 0.19 62 / 70%),0 0 20px oklch(0.88 0.20 62 / 40%)}
.brand-xl .station .w{color:var(--foreground)}
.brand-xl .station .w.nm{letter-spacing:.06em;font-size:1.12em}
.brand-xl .station .dot{color:var(--brand);font-size:1.1em;line-height:0;margin:0 .5em;
  text-shadow:0 0 7px oklch(0.92 0.19 62 / 82%),0 0 18px oklch(0.88 0.20 62 / 52%)}
.brand-xl .station .num{font-style:normal;color:var(--brand);letter-spacing:.14em;margin-left:.42em;
  text-shadow:0 0 8px oklch(0.92 0.19 62 / 84%),0 0 20px oklch(0.88 0.20 62 / 56%),0 0 44px oklch(0.86 0.20 62 / 32%)}

/* ── CRT: строки развёртки, бегущая полоса, хроматика, мерцание ── */
.hero::after{
  content:"";position:absolute;inset:-4% -2%;pointer-events:none;z-index:3;
  background:
    repeating-linear-gradient(180deg,
      oklch(0 0 0 / 0%) 0 2px,
      oklch(0 0 0 / 26%) 2px 3px,
      oklch(0 0 0 / 0%) 3px 4px),
    linear-gradient(180deg, oklch(0.94 0.12 76 / 7%) 0%, oklch(0 0 0 / 0%) 42%);
  mix-blend-mode:multiply;opacity:.85;
  animation:crt-scan 7.3s linear infinite}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg, oklch(0 0 0 / 0%) 0%, oklch(0.92 0.14 72 / 12%) 50%, oklch(0 0 0 / 0%) 100%);
  height:26%;animation:crt-roll 5.1s linear infinite}

/* хроматическая аберрация — на всё слово, включая знаки (drop-shadow, не ghost-текст) */
.brand-xl .word{
  filter:drop-shadow(-2px 0 0 oklch(0.60 0.22 28 / 55%))
         drop-shadow(2px 0 0 oklch(0.60 0.16 250 / 45%))}
@keyframes crt-breathe{from{opacity:.88}to{opacity:1}}
@keyframes crt-scan{from{background-position:0 0,0 0}to{background-position:0 40px,0 0}}
@keyframes crt-roll{from{transform:translateY(-40%)}to{transform:translateY(400%)}}
@keyframes crt-jitter{
  0%,86%,100%{transform:translate(0,0)}
  87%{transform:translate(-2px,1px)}
  89%{transform:translate(2px,-1px)}
  91%{transform:translate(-1px,0)}
  93%{transform:translate(1px,1px)}}

@media (prefers-reduced-motion: reduce){
  .brand-xl .word,.hero::after,.hero::before{animation:none}
}
/* ── футер страницы: та же янтарная рамка, что у хедера ── */
.pagefoot{
  position:relative;z-index:1;
  width:min(92vw,760px);
  margin:26px 0 0;
  padding:14px clamp(18px,3vw,30px);
  display:flex;align-items:center;justify-content:center;gap:.62em;
  border-radius:calc(var(--radius) + 2px);
  background:
    linear-gradient(180deg, oklch(0.30 0.09 62 / 34%) 0%, oklch(0.20 0.07 56 / 30%) 100%),
    var(--panel-base);
  border:1px solid oklch(0.84 0.20 62 / 42%);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.12 78 / 26%),
    inset 0 -18px 38px -24px oklch(0 0 0 / 62%),
    inset 0 0 0 1px oklch(0.92 0.14 72 / 10%),
    0 0 0 1px oklch(0.84 0.20 62 / 20%),
    0 16px 44px -14px oklch(0.80 0.20 62 / 34%),
    0 0 78px -12px oklch(0.82 0.20 62 / 26%),
    0 26px 60px -28px oklch(0 0 0 / 68%);
  overflow:hidden;isolation:isolate}
.pagefoot .pf-word{
  display:inline-flex;align-items:center;white-space:nowrap;
  font:800 clamp(13px,2.1vw,19px)/1 "Onest", system-ui, sans-serif;letter-spacing:.2em;
  color:var(--brand);
  text-shadow:0 0 6px oklch(0.94 0.16 74 / 78%),0 0 20px oklch(0.88 0.20 62 / 52%),0 0 46px oklch(0.84 0.20 62 / 30%)}
.pagefoot .pf-word em{font-style:normal;color:var(--brand)}
.pagefoot .bmark{width:.78em;height:.78em;vertical-align:-.013em;margin:0 .03em;
  filter:drop-shadow(0 0 6px oklch(0.90 0.18 62 / 56%))}
.pagefoot .bmark > circle{stroke:var(--brand)}
.pagefoot .bmark > g > circle,
.pagefoot .bmark > g > path{fill:oklch(0.98 0.04 92)}
.pagefoot .bmark > g{filter:drop-shadow(0 0 3px oklch(0.98 0.10 84 / 85%))}
.pagefoot .pf-num{
  font:600 clamp(10px,1.5vw,12.5px)/1 var(--mono);letter-spacing:.24em;
  color:var(--muted-foreground);white-space:nowrap;
  text-shadow:0 0 8px oklch(0.92 0.19 62 / 40%)}
.pagefoot .pf-sep{color:var(--brand);opacity:.82;
  text-shadow:0 0 8px oklch(0.92 0.19 62 / 70%)}
/* строки развёртки и на футере */
.pagefoot::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(180deg,
    oklch(0 0 0 / 0%) 0 2px, oklch(0 0 0 / 22%) 2px 3px, oklch(0 0 0 / 0%) 3px 4px);
  mix-blend-mode:multiply;opacity:.7}

.sub{margin:9px 0 22px;text-align:center;font:600 10.5px/1 var(--mono);letter-spacing:.26em;color:var(--muted-foreground)}

.step[hidden]{display:none}

label{display:block;font:600 10px/1 var(--mono);letter-spacing:.16em;color:var(--muted-foreground);margin:14px 0 7px;text-transform:uppercase}

input{
  width:100%;padding:12px 13px;
  border-radius:var(--radius-control);
  background-color:var(--field);
  border:1px solid var(--field-edge);
  color:var(--foreground);
  font:400 15px/1 "Onest", system-ui, sans-serif;
  outline:none;
  box-shadow:inset 0 1px 0 var(--field-rim);
  transition:border-color .15s, background-color .15s;
}
input::placeholder{color:var(--muted-foreground)}
input:focus{
  border-color:var(--focus-line);
  background-color:oklch(0.82 0.17 74 / 8%);
  box-shadow:inset 0 1px 0 var(--field-rim),0 0 0 1px oklch(0.84 0.16 74 / 30%),0 0 20px -4px oklch(0.84 0.17 74 / 45%);
}
/* повтор пароля не совпал — поле краснеет, как кромка карточки на отказе */
input.bad{
  border-color:oklch(0.68 0.23 27 / 95%);
  background-color:oklch(0.66 0.22 27 / 10%);
}
input.bad:focus{
  border-color:oklch(0.72 0.23 27);
  background-color:oklch(0.66 0.22 27 / 14%);
  box-shadow:inset 0 1px 0 var(--field-rim),0 0 0 1px oklch(0.68 0.23 27 / 40%),0 0 20px -4px oklch(0.66 0.22 27 / 55%);
}

button{
  width:100%;margin-top:20px;padding:13px;
  border:1px solid color-mix(in oklab, var(--primary) 55%, var(--primary-edge));
  border-radius:var(--radius-control);
  background-color:color-mix(in oklch, var(--primary) var(--primary-solid), transparent);
  color:var(--primary-foreground);
  font:700 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  -webkit-backdrop-filter:var(--glass-blur-control);backdrop-filter:var(--glass-blur-control);
  box-shadow:
    inset 0 1px 0 var(--primary-rim),
    inset 0 -1px 0 var(--primary-under),
    inset 0 0 0 1px var(--primary-inner),
    0 0 0 1px oklch(0.86 0.20 62 / 48%),
    0 0 28px -6px oklch(0.82 0.20 62 / 48%),
    0 0 64px -12px oklch(0.80 0.20 62 / 32%),
    0 1px 2px oklch(0 0 0 / 42%),
    0 8px 20px -6px oklch(0 0 0 / 54%),
    0 16px 34px -12px oklch(0 0 0 / 64%);
  transition:background-color .15s, transform .15s, box-shadow .15s;
}
button:hover:not(:disabled){background-color:color-mix(in oklch, var(--primary) calc(var(--primary-solid) - 10%), transparent);transform:translateY(-2px);box-shadow:
    inset 0 1px 0 var(--primary-rim),
    inset 0 -1px 0 var(--primary-under),
    inset 0 0 0 1px var(--primary-inner),
    0 0 0 1px oklch(0.84 0.20 62 / 70%),
    0 0 22px oklch(0.82 0.20 62 / 46%),
    0 0 60px -6px oklch(0.80 0.20 62 / 28%),
    0 14px 28px -8px oklch(0 0 0 / 48%),
    0 22px 44px -14px var(--glass-shade)}
button.lit{
  box-shadow:
    inset 0 1px 0 var(--primary-rim),
    inset 0 -1px 0 var(--primary-under),
    inset 0 0 0 1px var(--primary-inner),
    0 0 0 1px oklch(0.84 0.20 62 / 80%),
    0 0 26px oklch(0.82 0.20 62 / 52%),
    0 0 70px -6px oklch(0.80 0.20 62 / 32%),
    0 14px 28px -8px oklch(0 0 0 / 48%);
}
button:active:not(:disabled){
  transform:none;
  box-shadow:
    inset 0 1px 0 var(--primary-rim),
    inset 0 -1px 0 var(--primary-under),
    inset 0 0 0 1px var(--primary-inner),
    0 0 0 1px oklch(0.84 0.20 62 / 80%),
    0 0 26px oklch(0.82 0.20 62 / 52%),
    0 1px 1px var(--glass-contact);
}
button:disabled{opacity:.5;cursor:default;transform:none}

.err{min-height:18px;margin-top:12px;color:oklch(0.82 0.19 28);font:600 12.5px/1.35 "Onest", system-ui, sans-serif;text-align:center}

.foot{margin-top:18px;text-align:center;font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--muted-foreground)}
.foot a{color:var(--muted-foreground);text-decoration:none;border-bottom:1px solid transparent;transition:color .15s, border-color .15s}
.foot a:hover{color:var(--foreground);border-color:var(--border)}

/* ── ПИН: четыре слота, как input-otp в Solid Glass ─────────────────────── */
.pinwrap{position:relative;display:flex;gap:12px;justify-content:center;margin:6px 0 4px}
.cell{
  width:56px;height:64px;
  border-radius:var(--radius-control);
  background-color:var(--field);
  border:1px solid var(--field-edge);
  box-shadow:inset 0 1px 0 var(--field-rim);
  display:grid;place-items:center;
  font:600 26px/1 var(--mono);
  color:var(--foreground);
  transition:border-color .15s, background-color .15s, box-shadow .15s;
}
.cell.on{
  background-color:oklch(0.82 0.17 74 / 14%);
  border-color:oklch(0.84 0.16 74 / 34%);
  box-shadow:inset 0 1px 0 var(--field-rim),0 0 16px -3px oklch(0.84 0.17 74 / 55%);
}
.cell.active{
  border-color:var(--focus-line);
  background-color:oklch(0.82 0.17 74 / 12%);
  box-shadow:inset 0 0 0 1px var(--focus-line),0 0 20px -4px oklch(0.84 0.17 74 / 55%);
}
.pin-real{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;font-size:16px;cursor:text;
}

@keyframes sg-float-in{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes sg-fade-in{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .card{animation:none}
}