/* ============================================
   INVEST BLOGGERS — REDESIGN PROTOTYPE
   Dark terminal theme, official socials,
   trust-first catalog, TG-style profile
   ============================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Financial terminal palette */
  --bg:#07090c;
  --bg-panel:#0e1218;
  --bg-panel-2:#141923;
  --bg-elev:#1a2030;
  --border:rgba(255,255,255,0.06);
  --border-hi:rgba(255,255,255,0.12);

  --text:#e8ecf2;
  --text-2:#8a94a6;
  --text-3:#5a6476;

  /* Terminal green + amber accents */
  --green:#26d97f;
  --green-hi:#3cf597;
  --green-lo:#0f8a4b;
  --green-glow:rgba(38,217,127,0.35);

  --amber:#f5b942;
  --amber-hi:#ffd166;

  --red:#ff5757;
  --blue:#4da6ff;

  /* Semantic */
  --accent:var(--green);
  --accent-hi:var(--green-hi);
  --accent-glow:var(--green-glow);

  --ring:rgba(38,217,127,0.35);

  /* Mono for numbers / tickers */
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
  --display:'Manrope','Inter',system-ui,sans-serif;
  --sans:'Inter','Manrope',system-ui,sans-serif;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
}

html,body{background:var(--bg);color:var(--text);min-height:100vh;font-family:var(--sans);-webkit-font-smoothing:antialiased}
/* overflow-x:clip (не hidden) — hidden заставляет overflow-y вычисляться как auto,
   делая body скролл-контейнером, из-за чего position:sticky-шапка дёргается/«летает»
   в Telegram-вебвью (iOS). clip блокирует горизонтальный скролл, но не создаёт
   скролл-контейнер, поэтому sticky остаётся прибит к верху. */
body{overflow-x:clip;line-height:1.5;letter-spacing:-0.005em}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;color:inherit;font-family:inherit}
input,textarea,select{font-family:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-0.025em;line-height:1.1}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ========== AVATAR (img + initials fallback) ========== */
.avatar{
  position:relative;display:grid;place-items:center;overflow:hidden;
  color:#fff;font-family:var(--display);font-weight:800;
  flex-shrink:0;line-height:1;
}
.avatar img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;
}
.avatar-fallback{position:relative;z-index:0;pointer-events:none}

/* Grid background */
.grid-bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(38,217,127,0.08), transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(77,166,255,0.05), transparent 50%),
    linear-gradient(180deg, #07090c 0%, #0a0d12 100%);
}
.grid-bg::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 80%);
}

.container{max-width:1360px;margin:0 auto;padding:0 32px}
@media(max-width:768px){.container{padding:0 16px}}

/* ========== TICKER TAPE (top bar) ========== */
.ticker-tape{
  position:sticky;top:0;z-index:80;
  background:#05070a;
  border-bottom:1px solid var(--border);
  overflow:hidden;
  height:34px;display:flex;align-items:center;
  font-family:var(--mono);font-size:12px;
}
.ticker-tape-label{
  padding:0 14px;height:100%;display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg, rgba(38,217,127,0.12), transparent);
  border-right:1px solid var(--border);
  color:var(--green);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;font-size:10px;
  flex-shrink:0;
}
.ticker-tape-label::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:0.5;transform:scale(0.8)}50%{opacity:1;transform:scale(1.2)}}
.ticker-tape-track{
  display:flex;gap:36px;animation:tickerScroll 60s linear infinite;flex-shrink:0;padding-left:24px;white-space:nowrap;
}
.ticker-tape:hover .ticker-tape-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:10px}
.ticker-sym{color:var(--text-2);font-weight:600}
.ticker-val{color:var(--text)}
.ticker-delta{font-weight:600}
.ticker-delta.up{color:var(--green)}
.ticker-delta.down{color:var(--red)}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ========== HEADER ========== */
.header{
  position:sticky;top:0;z-index:70;
  background:rgba(7,9,12,0.8);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;gap:32px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-0.01em;white-space:nowrap;flex-shrink:0}
.brand-logo-img{
  width:32px;height:32px;display:block;object-fit:contain;
  image-rendering:auto; /* SVG — вектор, без потери качества */
  filter:drop-shadow(0 0 14px rgba(38,217,127,0.22));
  flex-shrink:0;
}
.header-nav{display:flex;gap:4px;margin-left:12px}
.nav-link{
  padding:8px 14px;border-radius:999px;font-size:13.5px;color:var(--text-2);
  font-weight:500;transition:all 0.2s;
}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.nav-link.active{color:var(--text);background:rgba(255,255,255,0.06)}
.header-spacer{flex:1}
.header-actions{display:flex;gap:10px;align-items:center}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:13.5px;border-radius:999px;
  padding:10px 18px;transition:all 0.2s;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg, var(--green-hi), var(--green) 80%);
  color:#001a0d;font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,0.15) inset, 0 8px 24px -8px var(--green-glow);
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,0.2) inset, 0 12px 32px -8px var(--green-glow)}
.btn-primary:active{transform:translateY(0)}
.btn[disabled],.btn[disabled]:hover{
  opacity:0.42;filter:grayscale(0.45);
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
/* "tentative" — clicked, but form is incomplete; click reveals what's missing */
.btn[data-state="tentative"]{opacity:0.78;filter:saturate(0.85)}
.btn[data-state="tentative"]:hover{opacity:0.92;filter:saturate(1)}
/* inline blocker pill shown above form-actions when canNext() is false */
.form-warn{
  display:flex;align-items:flex-start;gap:8px;
  margin:14px 0 -4px;padding:9px 12px;
  border:1px solid rgba(245,185,66,0.28);background:rgba(245,185,66,0.08);
  border-radius:10px;color:var(--amber-hi);font-size:12.5px;line-height:1.4;
}
.form-warn svg{flex-shrink:0;margin-top:2px}
.form-warn-loud{
  border-color:rgba(245,185,66,0.55);background:rgba(245,185,66,0.14);
  animation:formWarnShake 0.35s ease-out;
}
@keyframes formWarnShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}
.btn-ghost{background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,0.08);border-color:var(--border-hi)}
.btn-outline{border:1px solid var(--border-hi);color:var(--text);background:transparent}
.btn-outline:hover{background:rgba(255,255,255,0.04)}
.btn-lg{padding:14px 24px;font-size:14px}

.icon-btn{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,0.04);border:1px solid var(--border);
  color:var(--text-2);transition:all 0.2s;
}
.icon-btn:hover{color:var(--text);border-color:var(--border-hi);background:rgba(255,255,255,0.08)}
.icon-btn svg{width:16px;height:16px}

.menu-toggle{display:none;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;background:rgba(255,255,255,0.04);border:1px solid var(--border)}
.menu-toggle svg{width:18px;height:18px}

@media(max-width:960px){
  .header-nav{display:none}
  .header-actions .btn-outline{display:none}
  .menu-toggle{display:flex}
}
@media(max-width:640px){
  .header-inner{gap:12px}
  .header-actions{display:none}
}

/* ========== AUDIT BADGE (toggle review annotations) ========== */
.audit-toggle{
  position:fixed;bottom:20px;right:20px;z-index:500;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  background:rgba(14,18,24,0.9);backdrop-filter:blur(20px);
  border:1px solid var(--border-hi);
  font-size:12px;font-weight:600;
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.5);
  transition:all 0.2s;
}
.audit-toggle:hover{border-color:var(--green);transform:translateY(-2px)}
.audit-toggle .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
body.audit-on .audit-toggle .dot{background:var(--green);box-shadow:0 0 10px var(--green)}

.audit-note{
  position:absolute;z-index:60;
  background:linear-gradient(180deg, #2a1f0c, #1f1708);
  border:1px solid #5c4418;
  color:#ffd889;
  border-radius:10px;
  padding:8px 12px;font-size:11.5px;line-height:1.4;
  max-width:280px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,0.7);
  display:none;font-family:var(--sans);font-weight:500;
  pointer-events:none;
}
.audit-note::before{
  content:"PROBLEM";
  display:block;font-size:9px;letter-spacing:0.2em;color:#f5b942;
  font-weight:800;margin-bottom:4px;
}
body.audit-on .audit-note{display:block}
body.audit-on [data-audit]{
  outline:1px dashed rgba(245,185,66,0.55);
  outline-offset:4px;
  border-radius:4px;
}

/* ========== MOBILE NAV ========== */
.mobile-nav-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity 0.3s;
}
.mobile-nav-overlay.active{opacity:1;pointer-events:auto}
.mobile-nav{
  position:fixed;top:0;right:0;z-index:201;
  width:min(340px,90vw);height:100%;
  background:var(--bg-panel);
  border-left:1px solid var(--border);
  transform:translateX(100%);transition:transform 0.32s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
  padding:72px 20px 20px;
}
.mobile-nav-overlay.active .mobile-nav{transform:translateX(0)}
.mobile-nav a{padding:14px 0;font-size:17px;font-weight:600;border-bottom:1px solid var(--border)}
.mobile-nav-close{position:absolute;top:16px;right:16px;width:40px;height:40px;display:grid;place-items:center;color:var(--text-2)}

/* ========== CHANNEL PROMO POPUP ========== */
/* Всплывашка снизу справа: приглашение в Telegram-канал. Появляется через 15с,
   закрытие пишется в cookie на 3 дня (см. ChannelPopup в components-modals.jsx). */
@keyframes tgPromoIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.tg-promo{
  position:fixed;right:22px;bottom:22px;z-index:280;
  width:400px;max-width:calc(100vw - 32px);
  background:var(--bg-panel);border:1px solid var(--border-hi);
  border-radius:var(--r-xl);padding:24px 24px 26px;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(38,217,127,.06);
  animation:tgPromoIn .4s cubic-bezier(.16,1,.3,1) both;
}
.tg-promo-close{
  position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:var(--text-2);background:rgba(255,255,255,.05);
  font-size:20px;line-height:1;transition:all .2s;
}
.tg-promo-close:hover{color:var(--text);background:rgba(255,255,255,.1)}
.tg-promo-head{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:16px}
.tg-promo-logo{width:28px;height:28px;filter:drop-shadow(0 0 12px var(--green-glow))}
.tg-promo-text{margin:12px 0 18px;color:var(--text-2);font-size:14.5px;line-height:1.55}
.tg-promo-cta{width:100%;padding:14px 24px;font-size:14.5px}
@media(max-width:640px){
  .tg-promo{right:12px;left:12px;bottom:12px;width:auto}
}