/* =====================================================================
   Стиль TERMINAL для мини-аппа Enjoyer, версия 1.0 (11.10.2026)
   Правила и токены: workstreams/telegram/STYLE_TERMINAL_UI.md
   Только тёмная тема. Шрифт один: JetBrains Mono 400 (OFL), локально.
   Нет: скруглений, теней, градиентов (кроме сетки фона), размытия,
   пружин, масштабирования и проявления прозрачностью.
   ===================================================================== */

/* ---------- Шрифт (путь от этого файла) ---------- */
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- Токены (без изменений из STYLE_TERMINAL_UI.md §1) ---------- */
:root{
  --bg:#020403; --win:#000; --ph:#5CFFA0; --ph-hi:#C9FFE0; --ph-dim:#2C8F58;
  --ph-line:#21794A; --ph-sep:#123D26; --ph-deep:#0B2416;
  --amber:#FFB000; --amber-deep:#2B1C00; --red:#FF4B3E; --red-deep:#2A0705;
  --pass:#00C950; --pass-deep:#001408;
  --pass-border:#0B4D26; --warn-border:#6B4A00; --err-border:#7A1A12;
  --font:"JetBrains Mono","JBM",ui-monospace,Menlo,Consolas,monospace;
  --fs-meta:.75rem; --fs-small:.8125rem; --fs-body:.9375rem; --fs-code:.875rem;
  --fs-title:1.125rem; --fs-h1:clamp(1.25rem,5.6vw,1.5rem); --fs-price:1.75rem;
  --gutter:16px; --frame:3px double var(--ph-line); --tap:44px; --tap-main:48px;
  --t-beam:260ms linear; --t-cursor:140ms cubic-bezier(.2,0,0,1);
  --t-crt-off:220ms cubic-bezier(.5,0,.75,0);
  --safe-top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));
  --safe-bottom:calc(var(--tg-safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) + var(--tg-content-safe-area-inset-bottom,0px));
}
@media (min-width:390px){:root{--fs-body:1rem}}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-size:16px;background:var(--bg)}
body{
  margin:0;min-height:100vh;
  background-color:var(--bg);
  /* неподвижная сетка 40 / 200 px, как в паке */
  background-image:
    linear-gradient(rgba(80,255,150,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,255,150,.085) 1px,transparent 1px),
    linear-gradient(rgba(80,255,150,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,255,150,.038) 1px,transparent 1px);
  background-size:200px 200px,200px 200px,40px 40px,40px 40px;
  color:var(--ph);font-family:var(--font);font-size:var(--fs-body);line-height:1.5;font-weight:400;
  font-synthesis:none;font-variant-ligatures:none;letter-spacing:0;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
  -webkit-tap-highlight-color:transparent;
}
b,strong,h1,h2,h3,th{font-weight:400;color:var(--ph-hi)}
h1,h2,h3,p,ul,ol,pre{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--ph);text-decoration:underline dotted;text-underline-offset:3px;overflow-wrap:anywhere}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:0}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.slug,.url{overflow-wrap:anywhere;hyphens:none}
.dim{color:var(--ph-dim)}.hi{color:var(--ph-hi)}.ok{color:var(--pass)}.bad{color:var(--red)}
.meta{font-size:var(--fs-meta);line-height:1rem}
.small{font-size:var(--fs-small);line-height:1.125rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- Каркас приложения ---------- */
.app{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:relative;min-height:56px;padding:calc(var(--safe-top) + 8px) var(--gutter) 8px;
  display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ph-sep);
  /* строки развёртки и виньетка только в полосе заголовка */
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 5px),
    radial-gradient(ellipse at 50% 50%,#08140D 0,var(--bg) 70%);
  background-color:var(--bg);
}
.topbar-back{min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ph-line);background:var(--win);color:var(--ph)}
.topbar-name{flex:1;color:var(--ph-dim);font-size:var(--fs-small)}
.screen{
  flex:1;padding:16px var(--gutter) calc(var(--nav-h,calc(56px + var(--safe-bottom))) + 32px);
  display:flex;flex-direction:column;gap:24px;
}
/* --cta-h выставляет скрипт по реальной высоте прилипшей кнопки (она растёт при увеличении текста) */
.screen.has-cta{padding-bottom:calc(var(--nav-h,calc(56px + var(--safe-bottom))) + var(--cta-h,64px) + 24px)}
.stack{display:flex;flex-direction:column;gap:12px}
.stack-s{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.h1{
  font-size:var(--fs-h1);line-height:1.2;color:var(--ph-hi);
  text-shadow:0 0 6px rgba(92,255,160,.35); /* свечение только у h1 и цены */
}
.h2{font-size:var(--fs-title);line-height:1.5rem;color:var(--ph-hi)}
.lead{color:var(--ph)}
.price{font-size:var(--fs-price);line-height:2rem;color:var(--ph-hi);text-shadow:0 0 6px rgba(92,255,160,.35)}
.price-s{color:var(--ph-hi)}
.sep{border:0;border-top:1px solid var(--ph-sep);margin:0}
.list>li{position:relative;padding-left:1.5em;margin-top:6px}
.list>li:first-child{margin-top:0}
.list>li::before{content:"❯";position:absolute;left:0;color:var(--ph-dim)}
.steps{counter-reset:s}
.steps>li{position:relative;padding-left:2em;margin-top:8px;counter-increment:s}
.steps>li::before{content:counter(s) ".";position:absolute;left:0;color:var(--ph-dim)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.kv dt{color:var(--ph-dim)}.kv dd{margin:0}

/* ---------- Окно TUI ---------- */
.tw{
  position:relative;background:var(--win);border:var(--frame);
  padding:20px 12px 12px;margin-top:10px;min-width:0;
}
.tw-title{
  /* заголовок врезан в верхнюю рамку; в потоке, чтобы при длинном тексте или увеличении шрифта переноситься, а не обрезаться */
  display:block;width:fit-content;max-width:100%;margin:-32px 0 14px 0;
  padding:0 6px;background:var(--win);color:var(--ph);
  font-size:var(--fs-small);line-height:1.125rem;overflow-wrap:anywhere;
}
.tw-title .dim{color:var(--ph-dim)}
.tw-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.tw-row{padding-top:12px;border-top:1px solid var(--ph-sep)}
.tw-row:first-child{padding-top:0;border-top:0}
/* луч развёртки: окно прорисовывается сверху вниз; --i задаёт JS (0..3) */
.beam{animation:beam var(--t-beam) both;animation-delay:calc(var(--i,0) * 40ms)}
/* верхний вылет -20px: заголовок врезан в рамку и выходит за её край */
@keyframes beam{from{clip-path:inset(-20px -2px 100% -2px)}to{clip-path:inset(-20px -2px -2px -2px)}}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);min-width:var(--tap);padding:8px 16px;text-align:center;
  background:var(--win);border:1px solid var(--ph-line);color:var(--ph);
  text-decoration:none;font-size:var(--fs-body);line-height:1.25rem;
}
.btn-main{
  width:100%;min-height:var(--tap-main);background:var(--ph);border:1px solid var(--ph);color:var(--bg);
}
.btn-sec{width:auto}
.btn-block{width:100%}
.btn-text{
  min-height:var(--tap);padding:8px 4px;background:none;border:0;
  text-decoration:underline dotted;text-underline-offset:4px;color:var(--ph);display:inline-flex;align-items:center;
}
.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--win);border:1px dashed var(--ph-line);color:var(--ph-line);cursor:not-allowed;
}
.btn.is-loading{pointer-events:none}
.why-off{color:var(--ph-dim);font-size:var(--fs-small);line-height:1.125rem;margin-top:8px}
.sticky-cta{
  position:fixed;left:0;right:0;bottom:var(--nav-h,calc(56px + var(--safe-bottom)));z-index:5;
  padding:8px var(--gutter);background:var(--bg);border-top:1px solid var(--ph-sep);
  max-width:560px;margin:0 auto;
}

/* ---------- Поле «слово из ролика» ---------- */
.field{
  display:flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 8px;
  background:var(--win);border:1px solid var(--ph-line);border-bottom:2px dotted var(--ph-line);
}
.field-prompt{color:var(--ph-dim);flex:none}
.field-input{
  flex:1;min-width:0;min-height:var(--tap);background:transparent;border:0;outline:0;
  color:var(--ph-hi);caret-color:var(--amber);font-size:1rem;
}
.field-input::placeholder{color:var(--ph-dim);opacity:1}
.field:focus-within{border-color:var(--amber);border-bottom-color:var(--amber)}
.field.is-err{border-color:var(--red)}
.field-help{color:var(--ph-dim);font-size:var(--fs-small);line-height:1.125rem;margin-top:8px}
.field-err{margin-top:8px;display:flex;gap:8px;align-items:flex-start;color:var(--red);font-size:var(--fs-small);line-height:1.125rem}
.caret::after{content:"";display:inline-block;width:.6em;height:1.1em;margin-left:2px;vertical-align:text-bottom;background:var(--amber);animation:blink 1s steps(1) 5}
.caret.done::after{display:none}
@keyframes blink{50%{background:transparent}}

/* ---------- Плашки ---------- */
.badge{
  display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1px solid var(--ph-line);
  font-size:var(--fs-meta);line-height:1rem;white-space:nowrap;vertical-align:middle;
}
.badge-pass{background:var(--pass-deep);border-color:var(--pass-border);color:var(--pass)}
.badge-warn{background:var(--amber-deep);border-color:var(--warn-border);color:var(--amber)}
.badge-err{background:var(--red-deep);border-color:var(--err-border);color:var(--red)}
.badge-inv{background:var(--ph);border-color:var(--ph);color:var(--bg)}
.badge-wrap{height:auto;min-height:24px;padding:4px 8px;white-space:normal}

/* ---------- Курсор-фокус: янтарная инверсия ---------- */
:is(.btn,.btn-text,.card,.mrow,.nav-item,.chk-btn,.opt,.topbar-back,.check-box):is(:active,.is-press,:focus-visible){
  background:var(--amber)!important;border-color:var(--amber)!important;color:#000!important;
  text-decoration-color:#000;outline:0;
  transition:background var(--t-cursor),color var(--t-cursor);
}
:is(.btn,.btn-text,.card,.mrow,.nav-item,.chk-btn,.opt,.topbar-back,.check-box):is(:active,.is-press,:focus-visible) *{
  color:#000!important;background:transparent!important;border-color:#000!important;text-shadow:none!important;
}
.field-input:focus-visible{outline:0}
/* следы послесвечения: три рамки, создаёт JS при переезде фокуса с клавиатуры */
.ghost{position:fixed;z-index:30;pointer-events:none;border:2px solid var(--amber)}
.ghost[data-n="1"]{opacity:.55}.ghost[data-n="2"]{opacity:.32}.ghost[data-n="3"]{opacity:.16}

/* ---------- Состояния наведения (мышь) ---------- */
@media (hover:hover){
  .btn:hover:not([disabled]):not(.btn-main),.card:hover,.mrow:hover,.nav-item:hover{color:var(--ph-hi);border-color:var(--ph)}
  .btn-main:hover{border-color:var(--ph-hi)}
}

/* ---------- Нижняя навигация ---------- */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:10;max-width:560px;margin:0 auto;
  min-height:calc(56px + var(--safe-bottom));padding-bottom:var(--safe-bottom);
  display:grid;grid-template-columns:repeat(3,1fr);background:var(--win);border-top:var(--frame);
}
.nav-item{
  min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  border-top:2px solid transparent;margin-top:-3px;padding:4px;color:var(--ph);font-size:var(--fs-small);line-height:1.125rem;text-align:center;
}
.nav-item{hyphens:auto;overflow-wrap:break-word}
.nav-item .nav-n{color:var(--ph-dim);font-size:var(--fs-meta);line-height:1rem}
.nav-item[aria-current="page"],.nav-item[aria-selected="true"]{color:var(--ph-hi);border-top-color:var(--ph)}

/* ---------- Карточка продукта ---------- */
.card{
  position:relative;display:block;width:100%;text-align:left;
  background:var(--win);border:var(--frame);padding:20px 12px 12px;margin-top:10px;color:var(--ph);
  text-decoration:none;min-height:var(--tap);
}
.card .tw-title{pointer-events:none;text-align:left}
.card-name{font-size:var(--fs-title);line-height:1.5rem;color:var(--ph-hi)}
.card-promise{margin-top:6px;color:var(--ph)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;flex-wrap:wrap}
.card-go{color:var(--ph-dim)}
.card-price{color:var(--ph-hi)}
.card-note{margin-top:6px;color:var(--ph-dim);font-size:var(--fs-small);line-height:1.125rem}

/* ---------- Строка материала ---------- */
.mrow{
  display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:start;width:100%;text-align:left;
  min-height:var(--tap);padding:12px 0;border-top:1px solid var(--ph-sep);color:var(--ph);background:transparent;
}
.mrow:first-child{border-top:0}
.mrow-word{grid-column:1/-1}
.mrow-title{color:var(--ph-hi)}
.mrow-what{grid-column:1;color:var(--ph-dim);font-size:var(--fs-small);line-height:1.125rem}
.mrow-go{grid-row:2;grid-column:2;color:var(--ph-dim);align-self:center}
.group-title{color:var(--ph-dim);font-size:var(--fs-small);margin-bottom:4px}

/* ---------- Блок кода ---------- */
.code{
  background:var(--win);border:1px solid var(--ph-line);padding:12px;
  font-size:var(--fs-code);line-height:1.25rem;white-space:pre-wrap;overflow-wrap:anywhere;hyphens:none;
  color:var(--ph);margin:0;user-select:text;-webkit-user-select:text;
}

/* ---------- Баннер входа ---------- */
.banner{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;color:var(--ph-dim);font-size:var(--fs-small);line-height:1.125rem}
.banner q{quotes:"«" "»";color:var(--ph)}

/* ---------- Строка проверки PASS / FAIL ---------- */
.chk{padding:12px 0;border-top:1px solid var(--ph-sep);display:flex;flex-direction:column;gap:8px}
.chk:first-child{border-top:0}
.chk-head{display:flex;gap:8px;align-items:flex-start}
.chk-no{color:var(--ph-dim);flex:none}
.chk-actions{display:flex;gap:8px}
.chk-btn{
  min-width:72px;min-height:var(--tap);padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--win);border:1px solid var(--ph-line);color:var(--ph);font-size:var(--fs-small);
}
.chk-btn[aria-pressed="true"].is-pass{background:var(--pass-deep);border-color:var(--pass-border);color:var(--pass)}
.chk-btn[aria-pressed="true"].is-fail{background:var(--red-deep);border-color:var(--err-border);color:var(--red)}
.chk-detail summary{min-height:var(--tap);display:flex;align-items:center;color:var(--ph);cursor:pointer;list-style:none;text-decoration:underline dotted;text-underline-offset:4px}
.chk-detail summary::-webkit-details-marker{display:none}
.counter{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Переключатель и галочка ---------- */
.opt{
  display:flex;gap:12px;align-items:flex-start;width:100%;min-height:var(--tap);padding:10px 12px;text-align:left;
  background:var(--win);border:1px solid var(--ph-line);color:var(--ph);
}
.opt-mark{flex:none;width:3ch;white-space:nowrap;color:var(--ph-dim)}
.opt[aria-checked="true"]{border-color:var(--ph);color:var(--ph-hi)}
.opt[aria-checked="true"] .opt-mark{color:var(--ph-hi)}
.check-box{
  display:flex;gap:12px;align-items:flex-start;width:100%;min-height:var(--tap);padding:10px 12px;text-align:left;
  background:var(--win);border:1px dotted var(--ph-line);color:var(--ph);
}

/* ---------- Шторка ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:560px;margin:0 auto;
  margin-bottom:0;
  background:var(--win);border:var(--frame);border-bottom:0;
  padding:20px var(--gutter) calc(var(--safe-bottom) + 16px);
  animation:beam var(--t-beam) both;
}
.sheet.is-closing{animation:crtoff var(--t-crt-off) forwards}
.scrim.is-closing{animation:crtoff-scrim var(--t-crt-off) forwards}
/* схлоп в линию, затем гаснет */
@keyframes crtoff{0%{clip-path:inset(-20px -2px -2px -2px)}60%{clip-path:inset(49.5% 0 49.5% 0)}100%{clip-path:inset(50% 50% 50% 50%)}}
@keyframes crtoff-scrim{0%{opacity:1}99%{opacity:1}100%{opacity:0}}
.sheet-scroll{max-height:calc(var(--tg-viewport-stable-height,100vh) - 96px);overflow-y:auto;overscroll-behavior:contain}
.sheet-text{user-select:text;-webkit-user-select:text}

/* ---------- Строка состояния ---------- */
.status{
  position:fixed;left:0;right:0;bottom:var(--nav-h,calc(56px + var(--safe-bottom)));z-index:20;max-width:560px;margin:0 auto;
  padding:8px var(--gutter);background:var(--win);border-top:1px solid var(--ph-line);color:var(--ph);font-size:var(--fs-small);line-height:1.125rem;
}
.status.is-err{color:var(--red);background:var(--red-deep);border-top-color:var(--err-border)}
.status:empty{display:none}

/* ---------- Загрузка ---------- */
.spin::before{content:"|";color:var(--ph-dim);display:inline-block;width:1ch;animation:spin .4s steps(1) infinite}
@keyframes spin{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\"}}
.skel{color:var(--ph-sep)}

/* ---------- Пустое состояние ---------- */
.empty{display:flex;flex-direction:column;gap:8px}
.empty .cmd{color:var(--ph-dim)}

/* ---------- Подвал ---------- */
.foot-note{color:var(--ph-dim);font-size:var(--fs-small);line-height:1.125rem}

/* ---------- Доступность ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .spin::before{content:"…";animation:none}
  .caret::after{display:none}
  .ghost{display:none}
}
@media (prefers-contrast:more){
  :root{--ph-dim:var(--ph)}
  body{background-image:none}
  .topbar{background:var(--bg)}
  .h1,.price{text-shadow:none}
}
@media (forced-colors:active){
  .tw,.card,.sheet,.nav,.field,.code,.btn,.badge,.chk-btn,.opt,.check-box{border-color:CanvasText}
  .btn-main{background:ButtonFace;color:ButtonText;border-color:ButtonText}
  .nav-item[aria-current="page"]{border-top-color:Highlight}
  :is(.btn,.card,.mrow,.nav-item,.chk-btn,.opt,.check-box):is(:active,.is-press,:focus-visible){
    background:Highlight!important;color:HighlightText!important;outline:2px solid CanvasText
  }
  :is(.btn,.card,.mrow,.nav-item,.chk-btn,.opt,.check-box):is(:active,.is-press,:focus-visible) *{color:HighlightText!important}
  .badge-inv{background:Highlight;color:HighlightText}
}