/* ============================================================
   Гайды «Токены и покупки» + экран входа. App UI register (DESIGN.md).
   Загружается поверх guide.css: те же токены (нейтральная база,
   зелёный #1DB954 точечно), здесь только элементы, специфичные
   для этой группы страниц (герой, витрина шагов, карточки покупок,
   скриншот-рамка, чат-иллюстрация, итоговая плашка, вход).
   ============================================================ */

/* ── Шапка: простой лого-квадрат вместо g-back (публичные страницы,
   не встроены в приложение) ── */
.t-topbar{
  position:sticky; top:0; z-index:40; min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:12px var(--s6);
  background:var(--glass-fill);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
  box-shadow:var(--sh-xs);
}
.t-logo{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--ink);flex:0 0 auto}
.t-logo .sq{width:30px;height:30px;border-radius:9px;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none}
.t-logo .sq svg{width:16px;height:16px}
@media(max-width:640px){ .t-topbar{padding:10px var(--s4)} }

.t-main{max-width:900px;margin:0 auto;padding:0 var(--s6)}
@media(max-width:640px){ .t-main{padding:0 var(--s4)} }
/* Токены/строки-примеры (не команды терминала) должны переноситься,
   а не растягивать карточку: guide.css задаёт code{white-space:nowrap}
   для коротких терминальных команд на /rescue, здесь это переопределяем */
.t-main code{white-space:normal; overflow-wrap:anywhere; word-break:break-word}

/* ── Панель горизонтальных якорей (страница-хаб) ── */
.t-pillbar{
  position:sticky; top:var(--header-h); z-index:35;
  display:flex; gap:8px; overflow-x:auto; padding:10px var(--s6);
  background:var(--glass-fill); -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--glass-border);
  -ms-overflow-style:none; scrollbar-width:none;
}
.t-pillbar::-webkit-scrollbar{display:none}
@media(max-width:640px){ .t-pillbar{padding:10px var(--s4)} }

/* ── Герой ── */
.t-hero{padding:var(--s7) 0 var(--s6); display:flex; flex-direction:column; gap:var(--s4); max-width:720px}
.t-kicker{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute)}
.t-hero h1{font-size:clamp(28px,5vw,42px); font-weight:700; letter-spacing:-.02em; line-height:1.15; color:var(--ink)}
.t-hero .g-lead{margin-top:2px}
.t-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s2)}
.t-tag{
  display:inline-flex; align-items:center; gap:7px; min-height:34px;
  padding:7px 14px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--paper); font-size:13px; font-weight:600; color:var(--ink-soft);
}
.t-tag svg{width:15px;height:15px;flex:none;color:var(--ink-mute)}
.t-tag.accent{background:var(--tint); border-color:var(--tint); color:var(--ink); font-weight:700}
@media(max-width:640px){ .t-hero{padding:var(--s6) 0 var(--s5)} }

/* ── Секция инструкции ── */
.t-section{padding:var(--s6) 0 var(--s7)}
.t-section-head{display:flex;flex-direction:column;gap:6px;max-width:640px;margin-bottom:var(--s5)}
.t-section-head h2{font-size:clamp(21px,2.8vw,26px);font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.t-section-head p{font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:60ch}
.t-intro{font-size:15px;line-height:1.65;color:var(--ink-soft);max-width:64ch;margin-bottom:var(--s4)}
.t-divider{border:none;border-top:1px solid var(--line);margin:var(--s5) 0}

/* Нумерованные шаги: тот же рецепт круглых номеров, что и в guide.css,
   но с индивидуальным counter-reset для страниц, где список разбит
   скриншотом на две половины */
.t-steps{display:flex;flex-direction:column;gap:var(--s4);max-width:66ch;counter-reset:t-step;margin-bottom:var(--s4)}
.t-steps.t-cont{counter-reset:none}
.t-steps > li{counter-increment:t-step; position:relative; padding-left:38px; font-size:15px; line-height:1.6; color:var(--ink-soft)}
.t-steps > li::before{
  content:counter(t-step); position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:9px; background:var(--tint); color:var(--ink);
  font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.t-steps > li strong{color:var(--ink); font-weight:700}

/* ── Скриншот в рамке ── */
.t-shot{border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--sh-xs);
  overflow:hidden; background:var(--paper); max-width:680px; margin:0 0 var(--s4)}
.t-shot img{width:100%;height:auto;display:block}
.t-shot figcaption{padding:10px var(--s4) var(--s3); font-size:12.5px; color:var(--ink-mute)}

/* ── Итоговая плашка «что получишь» ── */
.t-result{
  max-width:66ch; background:var(--paper); border:1px solid var(--line);
  border-left:3px solid var(--green); border-radius:0 var(--r-card) var(--r-card) 0;
  padding:var(--s4) var(--s5); font-size:14.5px; line-height:1.6; color:var(--ink-soft);
}
.t-result strong{color:var(--ink)}
.t-result-label{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:6px}

/* ── Чат-иллюстрация (мокап переписки с ботом, не реальный скриншот) ── */
.t-chat{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--sh-xs); padding:var(--s5); max-width:520px; margin:0 0 var(--s4)}
.t-chat-col{display:flex;flex-direction:column;gap:10px}
.t-chat-row{display:flex;gap:9px;align-items:flex-end}
.t-chat-row.me{flex-direction:row-reverse}
.t-chat-avatar{width:28px;height:28px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--ink-soft)}
.t-chat-avatar.bot{background:var(--tint)}
.t-chat-avatar.me{background:var(--ink);color:#fff}
.t-chat-bubble{padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;max-width:78%;color:var(--ink-soft)}
.t-chat-bubble.bot{background:var(--tint); border-bottom-left-radius:4px}
.t-chat-bubble.me{background:var(--ink); color:#fff; border-bottom-right-radius:4px}
.t-chat-bubble code{background:rgba(255,255,255,.14); color:inherit}
.t-chat-cap{margin-top:var(--s3); font-size:12.5px; color:var(--ink-mute)}

/* ── Кнопка «вернуться к чек-листу» ── */
.t-end{display:flex; justify-content:center; padding-top:var(--s4)}

/* ── Витрина покупок (страница-хаб tokeny-i-pokupki) ── */
.t-grid{display:grid; gap:var(--s4)}
.t-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.t-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.t-grid > *{min-width:0}
@media(max-width:860px){ .t-grid.cols-3{grid-template-columns:1fr} }
@media(max-width:700px){ .t-grid.cols-2{grid-template-columns:1fr} }

.t-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--sh-xs); padding:var(--s5); display:flex; flex-direction:column; gap:10px;
  scroll-margin-top:calc(var(--header-h) + var(--s4));
}
.t-card-icon{width:42px;height:42px;border-radius:11px;background:var(--tint);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.t-card-icon svg{width:21px;height:21px}
.t-card h3{font-size:16.5px;font-weight:700;color:var(--ink);margin-top:2px}
.t-card p{font-size:14px;line-height:1.6;color:var(--ink-soft)}
.t-card .t-tag{align-self:flex-start}
.t-card-head{display:flex;align-items:flex-start;gap:12px}
.t-card-head .t-card-icon{width:38px;height:38px}
.t-card-head .t-card-icon svg{width:19px;height:19px}
.t-card-head-text{display:flex;flex-direction:column;gap:4px}
.t-card-head-text h3{margin-top:0;font-size:15.5px}
.t-card .t-steps{margin-top:2px}
.t-more{
  align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--green-hover); min-height:36px; padding-top:6px;
}
.t-more::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg); margin-top:-2px}

/* Итоговая плашка внизу хаба */
.t-panel{background:var(--tint); border-radius:var(--r-card); padding:var(--s6) var(--s5);
  display:flex; flex-direction:column; gap:10px; max-width:820px; margin:0 auto}
.t-panel .t-card-icon{background:var(--paper)}
.t-panel h2{font-size:21px;font-weight:700;color:var(--ink)}
.t-panel p{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.t-panel code{background:var(--paper)}

/* ── Плавное появление секций ── */
.t-rv{opacity:0; transform:translateY(16px); transition:opacity .4s var(--ease-out,ease-out),transform .4s ease-out}
.t-rv.on{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .t-rv{opacity:1;transform:none;transition:none} }

/* ── Подвал ── */
.t-footer{max-width:900px; margin:0 auto; padding:var(--s6) var(--s6) var(--s7);
  display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; justify-content:space-between;
  border-top:1px solid var(--line)}
.t-footer p{font-size:12.5px; color:var(--ink-mute)}
.t-footer a{font-size:12.5px; font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong)}
.t-footer a:hover{text-decoration-color:var(--green)}
@media(max-width:640px){ .t-footer{padding:var(--s5) var(--s4) var(--s6)} }

/* ── Экран входа ── */
.t-login-wrap{
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:20px; padding:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
    calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}
.t-login-card{
  background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh-lg);
  padding:40px 36px; width:100%; max-width:380px; display:flex; flex-direction:column; gap:var(--s5);
}
.t-login-logo{display:flex; align-items:center; gap:10px}
.t-login-logo .sq{width:34px;height:34px;border-radius:10px;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none}
.t-login-logo .sq svg{width:18px;height:18px}
.t-login-card h1{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.t-login-card p{font-size:14px;color:var(--ink-soft);margin-top:-8px}
.t-login-card input{
  width:100%; min-height:48px; padding:12px 15px; border:1.5px solid var(--line);
  border-radius:var(--r-input); font:inherit; font-size:16px; background:var(--bg); color:var(--ink);
  outline:none; transition:border-color .15s,box-shadow .15s;
}
.t-login-card input:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(29,185,84,.18)}
.t-login-card button{
  width:100%; min-height:48px; border:none; border-radius:var(--r-pill); background:var(--green-strong);
  color:var(--on-green); font:inherit; font-size:15px; font-weight:700; cursor:pointer;
  transition:background .15s,transform .1s;
}
.t-login-card button:hover{background:var(--green-strong-hover)}
.t-login-card button:active{transform:translateY(1px)}
.t-login-err{font-size:13px; font-weight:600; color:#B3261E; display:none}
@media(max-width:420px){ .t-login-card{padding:32px 24px} }