:root{
  --gap:16px;
  --bg:#0b0b0d;
  --text:#e8e8ea;
  --muted:#a6a6ad;
  --card:#141418;
  --accent:#d3fa43;        /* основной акцент (зелёный) */
  --btn-w:148px;           /* ширина колонки с кнопкой в гриде форм */
  --marq-duration:260s;     /* скорость бегущей строки (больше — медленнее) */

  /* эффекты/тени */
  --shadow-card:0 6px 24px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.24);
  --shadow-card-hover:0 10px 30px rgba(0,0,0,.38), 0 1px 1px rgba(0,0,0,.24);
  --shadow-soft:0 1px 0 rgba(255,255,255,.02) inset, 0 1px 6px rgba(0,0,0,.35) inset;
}

/* утилита для скрытия */
.hidden{display:none!important}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu
}
a{color:var(--accent);text-decoration:none;transition:color .15s ease, filter .2s ease}
a:hover{text-decoration:underline;filter:brightness(.95)}

.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header / навигация */
header{background:#111115;border-bottom:1px solid #24242a;position:sticky;top:0;z-index:10;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.nav{display:flex;align-items:center;gap:16px;height:64px}
.nav .logo{display:flex;align-items:center;gap:10px;font-weight:700}
.nav .menu{margin-left:auto;display:flex;gap:12px;flex-wrap:nowrap}
.nav .menu a{padding:8px 10px;border-radius:8px;transition:background .15s ease;font-size:14px}
.nav .menu a:hover{background:#17171c}
.logo-placeholder{width:28px;height:28px;border-radius:6px;background:var(--accent);display:inline-block}

/* Hero */
.hero{padding:40px 0;display:grid;gap:16px;grid-template-columns:1.2fr 2fr;align-items:center}
.hero .title{font-size:28px;font-weight:800}

/* Карточки / общие элементы */
.card{
  background:var(--card);border:1px solid #222229;border-radius:14px;padding:16px;
  box-shadow:var(--shadow-card);transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease
}
.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-1px);border-color:#2c2c33}

.inputs{display:grid;grid-template-columns:1fr 1fr var(--btn-w);gap:10px;align-items:center}
.input{position:relative}
.input input,
.input select{
  width:100%;padding:12px;border-radius:10px;border:1px solid #2a2a31;background:#0f0f15;color:var(--text);
  box-shadow:var(--shadow-soft);transition:border-color .15s ease, box-shadow .2s ease, background .15s ease
}
.input input:focus,
.input select:focus{outline:none;border-color:rgba(211,250,67,.85);box-shadow:0 0 0 3px rgba(211,250,67,.12)}
.input select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}

/* Кнопки */
.btn{
  padding:12px 16px;border-radius:10px;border:1px solid #2a2a31;background:var(--accent);color:#0b0b0d;
  cursor:pointer;font-weight:700;transition:transform .08s ease, filter .12s ease, box-shadow .12s ease
}
.btn:hover{filter:brightness(.96)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#0b0b0d}
.btn-geo-mobile{display:none}

/* «Пилюли» и сетки */
.pill{display:inline-block;padding:6px 10px;background:#0f0f15;border:1px solid #2a2a31;border-radius:999px}
.grid{display:grid;gap:10px;grid-template-columns:repeat(6,1fr)}
.grid a{
  display:block;text-align:center;padding:10px;border-radius:12px;border:1px solid #2a2a31;background:#121218;
  transition:transform .12s ease, box-shadow .2s ease, border-color .15s ease
}
.grid a:hover{transform:translateY(-1px);border-color:rgba(211,250,67,.45);box-shadow:0 8px 18px rgba(0,0,0,.3)}

/* Разделы/таблицы */
.section{padding:24px 0}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 10px;border-bottom:1px solid #1e1e25;text-align:left}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:#15151b}
th{color:#bdbdc7;font-weight:600}
.muted{color:var(--muted)}
.chg-up{ color:#aaff84; }     /* зелёный для плюса */
.chg-down{ color:#ff7f7c; }   /* красный для минуса */
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid #2a2a31;background:#101015}
.table-scroll{overflow:auto}

/* Ссылки в таблицах */
.link-exchanger{color:var(--text);text-decoration:none}
.link-exchanger:hover{color:var(--accent);text-decoration:underline}
.link-reviews{color:var(--muted)}
.link-reviews:hover{color:var(--accent)}

/* FAQ карточки */
.faq-item{
  border:1px solid #2a2a31;border-radius:12px;padding:12px;background:#121218;
  transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease
}
.faq-item:hover{border-color:rgba(211,250,67,.35);box-shadow:0 6px 16px rgba(0,0,0,.28);transform:translateY(-1px)}

/* Footer */
.footer{color:#bdbdc7;padding:32px 0;border-top:1px solid #24242a}
.footer .bottom{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.footer .bottom a{color:#cfd0d6}
.footer .bottom a:hover{color:#ffffff}

/* Не показывать панель выбора города на страницах ...-in-<city> */
.has-city #geoRowPair{display:none!important}

/* Гео-панель на странице пары */
#geoRowPair .inputs{grid-template-columns:1fr 1fr var(--btn-w);gap:10px}
#geoRowPair .inputs .btn{height:100%}

/* Мобилки */
@media (max-width: 960px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .nav .menu a{font-size:13px;padding:6px 8px}
}
@media (max-width: 720px){
  .hero{grid-template-columns:1fr}
  .inputs{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .nav{height:56px}
  .nav .menu{gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav .menu::-webkit-scrollbar{display:none}
  .nav .menu a{font-size:12px;padding:6px 8px;white-space:nowrap}

  body.geo-open #searchCard .btn.btn-primary{display:none}
  #geoRow .btn-geo-mobile{display:block;width:100%}

  #geoRowPair .inputs{grid-template-columns:1fr}
  #geoRowPair .inputs .btn{width:100%;height:auto}

  table thead{display:none}
  table, tbody, tr, td{display:block;width:100%}
  tr{border:1px solid #2a2a31;border-radius:12px;margin-bottom:10px;padding:6px;background:#121218}
  td{border-bottom:none;padding:8px 6px;display:flex;justify-content:space-between;align-items:center}
  td::before{content:attr(data-label);color:#a6a6ad;font-weight:600;margin-right:10px}
  td:last-child{justify-content:flex-end}
}

/* ===== Отзывы: бейджи в таблицах курсов ===== */
.rv-agg{display:flex; gap:6px; align-items:center; justify-content:flex-start;}
.rv-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:26px; padding:0 10px;
  border-radius:8px; border:1px solid #2a2a31;
  background:#101015; color:var(--text);
  font-weight:700; text-decoration:none; transition:filter .12s ease;
}
.rv-badge:hover{ text-decoration:none; filter:brightness(.96); }
.rv-ok{ background:#11260a; border-color:#294a1a; color:#b7ff7e; }
.rv-claim{ background:#260a0a; border-color:#4a1a1a; color:#ff7f7c; min-width:22px; height:24px; padding:0 8px; }

@media (max-width:720px){ .rv-badge{ height:28px; padding:0 8px; } }

/* ===== Ticker (RAF) ===== */
.ticker{ overflow:hidden; border-top:1px solid #24242a; background:#0f0f13; white-space:nowrap; }
.ticker > .wrap{ max-width:none; padding-left:0; padding-right:0; }
#ticker{ position:relative; overflow:hidden; padding:8px 0; }
.ticker .track{ display:flex; align-items:center; gap:16px; white-space:nowrap; will-change:transform; transform:translate3d(0,0,0); }
.ticker .track .seq{ display:inline-flex; gap:16px; }
.badge.coin{ display:inline-flex; align-items:center; gap:8px; padding:4px 8px; border:1px solid #2a2a31; border-radius:999px; background:#0f0f15; color:#e8e8ea; }
.badge.coin b{ font-weight:700; }
.coin-ico{ width:20px; height:20px; border-radius:50%; object-fit:cover; display:inline-block; }
.chg-up{ color:#aaff84; } .chg-down{ color:#ff7f7c; } .muted{ color:#9aa0a6; }
@media (prefers-reduced-motion: reduce){ .ticker .track{ transform:none !important; } }

/* === EXCHANGER (страница обменника) === */
.ex-card{ background:var(--card); border:1px solid #222229; border-radius:14px; padding:16px; box-shadow:var(--shadow-card); }
.ex-card .row{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.ex-alert{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#2a1a1a; border:1px solid #4a1a1a; color:#ff7f7c; font-weight:800; }

/* кнопка под текстовым блоком */
.ex-actions{ flex:1 0 100%; margin-left:0; margin-top:12px; }
.ex-btn{ padding:12px 16px; border-radius:10px; border:1px solid #2a2a31; background:var(--accent); color:#0b0b0d; font-weight:700; text-decoration:none; display:inline-block; }
.ex-btn:hover{ filter:brightness(.96); text-decoration:none; }
.ex-btn.ex-btn-block{ display:block; width:100%; text-align:center; }
@media (min-width:721px){ .ex-btn.ex-btn-block{ width:260px; } }

.ex-muted{ color:var(--muted); }

.counts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.counts .pill{font-weight:600}
.pill.pos{border-color:#294a1a;background:#12260a;color:#b7ff7e}
.pill.neg{border-color:#4a1a1a;background:#260a0a;color:#ff9a96}
.pill.neu{border-color:#2a2a31;background:#15151b;color:#c9c9d0}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.filters .btn{background:#0f0f15;color:#e8e8ea;border-color:#2a2a31}
.filters .btn.active{background:var(--accent);color:#0b0b0d}

.reviews{display:grid;gap:10px}
.rev{border:1px solid #2a2a31;border-radius:12px;padding:12px;background:#121218}
.rev.pos{background:rgba(133, 255, 133, .08)}
.rev.neg{background:rgba(255, 127, 124, .10)}
.rev.neu{background:#141418}
.rev .meta{display:flex;gap:8px;flex-wrap:wrap;color:#a6a6ad;font-size:14px;margin-bottom:6px;align-items:center}

/* === Действия справа: зелёные ССЫЛКИ + модальные формы === */
.rev-actions{ margin-left:auto; display:inline-flex; gap:14px; align-items:center; }

details.action{ display:inline-block; position:relative; }

/* ссылки вместо кнопок */
details.action > summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:0; margin:0; background:none; border:none;
  color:var(--accent); font-weight:700;
}
details.action > summary::-webkit-details-marker{ display:none; }
details.action > summary:hover{ text-decoration:underline; }

/* Бэкдроп — показываем только когда <details open> */
details.action .modal-backdrop{ display:none; }
details.action[open] .modal-backdrop{
  display:block; position:fixed; inset:0;
  background:rgba(0,0,0,.6); z-index:120;
}

/* Модальная форма — поверх бэкдропа */
details.action .manage-form{
  position:absolute; right:0; top:28px;
  min-width:420px; max-width:min(92vw, 540px);
  background:#101015; border:1px solid #2a2a31; border-radius:12px;
  padding:14px; padding-top:44px;               /* запас под крестик */
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  z-index:130;                                   /* ВЫШЕ бэкдропа */
  max-height:80vh; overflow:auto;
}

/* сетка полей: Email шире PIN */
details.action .manage-form .row{ display:grid; gap:10px; grid-template-columns:2fr 1fr; }
details.action .manage-form .row1{ display:grid; gap:10px; grid-template-columns:1fr; }

details.action label{ font-size:13px; color:#cfd0d6; }

details.action .manage-form input[type="email"],
details.action .manage-form input[type="text"],
details.action .manage-form textarea{
  width:100%; padding:10px; border-radius:10px;
  border:1px solid #2a2a31; background:#0f0f15; color:#e8e8ea;
}

details.action .manage-form textarea{ min-height:110px; resize:vertical; }
details.action .manage-form .btn{ margin-top:10px; }   /* кнопка не прилипает к textarea */

/* Крестик закрытия */
.manage-form .modal-close{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; border-radius:8px;
  border:1px solid #2a2a31; background:#111;
  color:#cfd0d6; font-weight:800; line-height:1;
  cursor:pointer;
}
.manage-form .modal-close:hover{ color:#fff; }
.manage-form .modal-close:focus{ outline:3px solid rgba(211,250,67,.25); outline-offset:2px; }

/* Мобильный полноэкранный модал */
@media (max-width:720px){
  details.action .manage-form{
    position:fixed; left:0; right:0; top:0; bottom:0;
    border-radius:0; min-width:0; max-width:none;
    padding:52px 16px 16px;                      /* больше отступ под X */
    overflow:auto; z-index:130;
  }
  details.action .manage-form .row{ grid-template-columns:1fr; }
  .manage-form .modal-close{ top:12px; right:12px; width:36px; height:36px; font-size:20px; }
}

/* Блокируем прокрутку под модалом (класс навешивается JS) */
body.modal-open{ overflow:hidden; }

/* Аккордеон и формы добавления */
.accordion{border:1px solid #2a2a31;border-radius:12px;background:#121218}
.accordion summary{list-style:none;cursor:pointer;user-select:none;padding:12px 14px;display:flex;align-items:center;gap:8px;font-weight:700;color:#e8e8ea}
.accordion summary::-webkit-details-marker{display:none}
.accordion .dot{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#11260a;border:1px solid #294a1a;color:#b7ff7e;font-weight:800}
.accordion[open]{box-shadow:var(--shadow-card-hover)}
.accordion .content{padding:0 14px 14px}

.addrev .row{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.addrev .row .col{display:flex;flex-direction:column;gap:8px}
.addrev label{font-size:14px;color:#cfd0d6}
.addrev input[type="text"], .addrev input[type="email"], .addrev textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #2a2a31;background:#0f0f15;color:#e8e8ea}
.addrev textarea{min-height:120px;resize:vertical}
.addrev .radios{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:720px){ .addrev .row{grid-template-columns:1fr} }

.alert-ok,.alert-err{border:1px solid #2a2a31;border-radius:10px;padding:10px;margin:10px 0}
.alert-ok{background:#12260a;color:#b7ff7e}
.alert-err{background:#260a0a;color:#ff9a96}

.pager{display:flex;gap:6px;align-items:center;margin-top:12px;flex-wrap:wrap}
.pager .btn{padding:8px 12px}
.pager .muted{padding:0 4px}

/* === Review threads (Q/A) === */
.thread{ border-left:2px solid #2a2a31; margin:10px 0 6px 8px; padding-left:10px; display:grid; gap:8px; }
.msg{ border:1px solid #2a2a31; border-radius:10px; padding:10px; background:#101015; }
.msg .who{ font-weight:700; margin-bottom:4px; color:#e8e8ea; }
.msg .text{ white-space:pre-wrap; }
.msg .when{ color:#a6a6ad; font-size:12px; margin-top:6px; }
.msg.exchanger{ background:#101a12; border-color:#294a1a; }
.msg.user{ background:#1a1010; border-color:#4a1a1a; }

/* ================================================================== */
/* ===========================  BLOG  ================================ */
/* ===== Стили отдельной страницы блога перенесены в общий файл ===== */
/* ================================================================== */

/* Контейнер поисковой формы можно оставить static, подсказки теперь fixed */
.blog-search{ position:static; margin-left:auto; }

/* Оверлей подсказок на всю ширину окна с боковыми полями */
.search-hints{
  position:fixed;
  left:16px;               /* поля по краям окна */
  right:16px;
  top:0;                   /* фактическую позицию ставим из JS */
  background:#0f0f15;
  border:1px solid #2a2a31;
  border-radius:12px;
  box-shadow:var(--shadow-card);
  max-height:70vh;         /* больше места */
  overflow:auto;
  z-index:1000;            /* поверх контента */
  overscroll-behavior:contain;
}

/* Элемент списка + мобильная адаптация */
.search-item{display:flex; gap:12px; align-items:center; padding:12px 14px; text-decoration:none; color:var(--text);}
.search-item:hover{background:#17171c}
.search-item img{width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid #2a2a31}
.search-item .title{font-weight:700; line-height:1.25}
.search-item .excerpt{color:var(--muted); font-size:12px; line-height:1.35; margin-top:2px}
.search-item .meta{color:var(--muted); font-size:12px}
.search-empty{padding:10px 12px; color:var(--muted)}

@media (max-width:720px){
  .search-hints{left:10px; right:10px; border-radius:12px}
  .search-item img{width:44px; height:44px}
  .search-item{padding:10px 12px}
}

/* ===== Сетка и карточки блога ===== */
.posts-wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.tagbar{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.tagbar a{display:inline-block;padding:6px 10px;border:1px solid #2a2a31;border-radius:999px;background:#0f0f15;color:#e8e8ea;text-decoration:none}
.tagbar a.active{background: var(--accent);color: #0b0b0d;border-color: #2a2a31;}
.tagbar a{ transition: background .15s ease, color .15s ease, border-color .15s ease; }
.blog-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.span-6{grid-column:span 6} .span-4{grid-column:span 4}
.a-card{background:#141418;border:1px solid #222229;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card)}
.a-card:hover{border-color:rgba(211,250,67,.35);box-shadow:var(--shadow-card-hover)}

/* карточка-обложка: одинаковая высота для всех */
.a-cover{
  display:block;
  position:relative;
  overflow:hidden;
  background:#101015;
  /* если aspect-ratio поддерживается — пусть тоже работает */
  aspect-ratio:16/9;
}

/* Фолбэк на старые браузеры: фиксируем 16:9 псевдо-элементом */
.a-card .a-cover::before{
  content:"";
  display:block;
  padding-bottom:56.25%; /* 16:9 */
}

/* Картинка заполняет кадр */
.a-cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  /* при желании центр кадра можно менять так: */
  /* object-position:center; */
}

.a-body{padding:12px}
.a-title{font-weight:700;font-size:18px;line-height:1.35;color:#fff;margin:0 0 6px}
.a-exc{color:#a6a6ad;font-size:14px;margin:0 0 8px}
.a-meta{display:flex;justify-content:space-between;align-items:center;color:#a6a6ad;font-size:13px}
.a-tags{display:flex;gap:6px;flex-wrap:wrap}
.a-tag{padding:4px 8px;border:1px solid #2a2a31;border-radius:999px;background:#101015}
.pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.pagination a,.pagination span{padding:8px 12px;border:1px solid #2a2a31;border-radius:10px;text-decoration:none;color:#e8e8ea;background:#0f0f15}
.pagination .active{background:#d3fa43;color:#0b0b0d;border-color:#2a2a31}
.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;margin:18px 0 8px}
.blog-search input{padding:8px 10px;border-radius:10px;border:1px solid #2a2a31;background:#0f0f15;color:#e8e8ea}

@media (max-width:960px){
  .span-6{grid-column:span 12}
  .span-4{grid-column:span 6}
}

@media (max-width:720px){
  .span-6,.span-4{grid-column:span 12}
  .a-body{padding:10px}
  .a-title{font-size:16px}
  .a-exc{font-size:13px}
}

/* ===== BLOG: страница статьи ===== */
.crumbs{
  display:flex; gap:6px; align-items:center;
  color:var(--muted); font-size:14px; margin:8px 0 12px;
}
.crumbs a{ color:var(--muted); }
.crumbs .sep{ opacity:.6; }

.post-head{ margin:8px 0 14px; }

.post-meta{
  color:var(--muted); font-size:14px; margin:6px 0 10px;
}

.post-cover{
  border-radius:14px; overflow:hidden;
  border:1px solid #2a2a31; background:#0f0f15;
}

.post{ font-size:18px; line-height:1.6; }
.post h1{ font-size:32px; margin:10px 0 4px; }
.post h2{ font-size:24px; margin:20px 0 8px; }
.post p{ margin:10px 0; }

.post .tag{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid #2a2a31; background:#121218;
  margin-right:6px; font-size:12px;
}

@media (max-width:720px){
  .post h1{ font-size:26px; }
  .post h2{ font-size:20px; }
}
.faq-item pre{
  overflow:auto;
  max-width:100%;
  padding:12px;
  border:1px solid #2a2a31;
  background:#0f0f15;
  border-radius:12px;
  -webkit-overflow-scrolling:touch;
}
.faq-item pre code{ white-space:pre; }
@media (max-width:720px){
  .faq-item pre{ font-size:13px; line-height:1.45; }
}
@media (max-width: 720px){
  input, select, textarea {
    font-size: 16px !important;
  }
}
@supports (-webkit-overflow-scrolling: touch) {
  input, select, textarea { font-size: 16px !important; }
}
img.coin-ico[src*="/_default.svg"] { display:none !important; }
img[src*="/assets/coins/_default.svg"] { display:none !important; }

.badge.coin .coin-ico { display:none; }
.badge.coin.has-ico .coin-ico { display:inline-block; }

@supports(selector(:has(*))){
  .badge.coin:not(:has(img.coin-ico)) .coin-ico { display:none; }
  .badge.coin:has(img.coin-ico) .coin-ico { display:inline-block; }
}
/* === Ticker icons: резервация места + мягкое появление === */
.badge.coin .coin-ico{
  display:inline-block;           /* место всегда есть */
  width:20px; height:20px;
  border-radius:50%;
  object-fit:cover;
  visibility:hidden;              /* невидимо до onload */
}
.badge.coin.has-ico .coin-ico{
  visibility:visible;             /* показываем без изменения размеров */
}

/* На случай старых селекторов, где было display:none; важнее по специфичности и порядку */
.badge.coin.has-ico img.coin-ico { visibility:visible; }