/* ==========================================================================
   TronMoji Generator (tools/tronmoji/) — на общей основе сайта (08.10.2026).
   Цвета — --site-* (css/site-tokens.css), тема Light/Dark; приёмы главной: один синий акцент, кромка 3px,
   серые карточки без теней. Раскладка (генератор слева, руководство справа) — прежняя.
   ========================================================================== */
.tm-page{ background:var(--site-bg,#fff); color:var(--site-text,#3a4366); }
.tm-page main{ font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }

/* ---------- Первый экран ---------- */
.tm-hero{ padding:40px 0 16px; background:var(--site-bg,#fff); }
.tm-hero-in{ max-width:900px; margin:0 auto; text-align:center; }
.tm-badge{ display:inline-flex; align-items:center; gap:8px; margin-bottom:1.25rem; padding:6px 16px; border-radius:999px;
  background:var(--site-accent-soft,#eef1ff); color:var(--site-link,#2d4bdb); font-size:.875rem; font-weight:600; }
.tm-h1{ margin:0 0 1rem; font-size:clamp(30px,4vw,48px); font-weight:700; letter-spacing:-.025em; line-height:1.15;
  color:var(--site-ink,#0b1020); background:none; -webkit-text-fill-color:currentColor; }
.tm-lead{ margin:0 auto; max-width:760px; font-size:1.15rem; line-height:1.6; color:var(--site-text,#3a4366); }

/* ---------- Карточки ---------- */
.tm-main{ padding:24px 0 72px; }
.tm-card{ height:100%; padding:20px; background:var(--site-bg-soft,#f6f8fc); border-top:3px solid var(--site-accent,#2d4bdb); border-radius:0 0 12px 12px; }
.tm-h2{ margin:0 0 16px; font-size:1.35rem; font-weight:700; color:var(--site-ink,#0b1020); background:none; -webkit-text-fill-color:currentColor; }
.tm-hr{ margin:1.5rem 0; border-color:var(--site-line,#e2e6f2); opacity:1; }
.tm-muted{ color:var(--site-muted,#5c6690); }
.tm-page .form-label{ color:var(--site-ink,#0b1020); }

/* ---------- Сетка рисунка и палитра ---------- */
.tm-grid-col{ width:min(300px,100%); max-width:300px; flex-grow:1; }
.tr-tronmoji-grid{ display:grid; grid-template-columns:repeat(16,1fr); grid-template-rows:repeat(16,1fr); gap:1px; width:100%; aspect-ratio:1/1;
  background-color:var(--site-line,#e2e6f2); border:1px solid var(--site-line,#e2e6f2); border-radius:12px; overflow:hidden; direction:ltr; }
.tr-tronmoji-cell{ background-color:var(--site-bg-soft,#f6f8fc); cursor:pointer; transition:transform .1s ease; }
.tr-tronmoji-cell:hover{ transform:scale(1.05); z-index:1; }
.color-palette{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; align-items:center; justify-content:center; max-width:180px; direction:ltr; }
.color-key-cell{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; background:var(--site-surface,#fff); box-shadow:0 0 0 1px var(--site-line,#e2e6f2);
  transition:transform .1s ease, border-color .1s ease; }
.color-key-cell:hover{ transform:scale(1.05); }
.color-key-cell.selected{ border-color:var(--site-accent,#2d4bdb); transform:scale(1.1); }
.color-key-color{ width:22px; height:22px; border-radius:50%; }
.example-images .tr-tronmoji-grid{ width:64px; height:64px; cursor:pointer; border:2px solid transparent; transition:transform .1s ease, border-color .1s ease; }
.example-images .tr-tronmoji-grid:hover{ transform:scale(1.05); border-color:var(--site-accent,#2d4bdb); }

/* ---------- Поля и кнопки ---------- */
.tm-input{ background:var(--site-surface,#fff); border:1px solid var(--site-line-strong,#dce2ef); color:var(--site-ink,#0b1020); }
.tm-input::placeholder{ color:var(--site-faint,#8892b8); }
.tm-input:focus{ background:var(--site-surface,#fff); border-color:var(--site-accent,#2d4bdb); color:var(--site-ink,#0b1020); box-shadow:0 0 0 3px var(--site-accent-soft,#eef1ff); }
.tm-btn-ghost{ border:1px solid var(--site-line-strong,#dce2ef); background:var(--site-surface,#fff); color:var(--site-text,#3a4366); font-weight:600; }
.tm-btn-ghost:hover, .tm-btn-ghost:focus-visible{ border-color:var(--site-accent,#2d4bdb); color:var(--site-link,#2d4bdb); background:var(--site-surface,#fff); }
.tm-connect{ padding:24px; text-align:center; border-radius:12px; background:var(--site-accent-soft,#eef1ff); border:1px solid var(--site-line-strong,#dce2ef); }
.tm-connect p{ margin:0 0 1rem; color:var(--site-text,#3a4366); }

/* ---------- Руководство (аккордеон) ---------- */
.tm-page .accordion{ --bs-accordion-bg:transparent; --bs-accordion-border-color:transparent; }
.tm-page .accordion-item{ margin-bottom:.5rem; background:transparent; border:none; }
.tm-page .accordion-header{ margin:0; }
.tm-page .accordion-button{ padding:1rem; border:1px solid var(--site-line,#e2e6f2); border-radius:8px !important; font-weight:600;
  background:var(--site-surface,#fff); color:var(--site-ink,#0b1020); box-shadow:none;
  -webkit-text-fill-color:currentColor; }   /* общий style.css делает текст кнопок прозрачным (градиент) — заголовки пропадали */
.tm-page .accordion-button:not(.collapsed){ color:var(--site-link,#2d4bdb); border-color:var(--site-accent,#2d4bdb); background:var(--site-surface,#fff);
  border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; }
.tm-page .accordion-button:focus{ box-shadow:0 0 0 3px var(--site-accent-soft,#eef1ff); border-color:var(--site-accent,#2d4bdb); }
.tm-page .accordion-button::after{ background-image:none; width:auto; height:auto; content:"\F282"; font-family:"bootstrap-icons"; color:var(--site-muted,#5c6690); transition:transform .2s ease; }
.tm-page .accordion-button:not(.collapsed)::after{ transform:rotate(-180deg); color:var(--site-link,#2d4bdb); }
[dir="rtl"] .tm-page .accordion-button::after, .tm-page [dir="rtl"] .accordion-button::after{ margin-left:0; margin-right:auto; }
.tm-page .accordion-body{ margin-top:-1px; padding:1rem; background:var(--site-surface,#fff); border:1px solid var(--site-line,#e2e6f2); border-top:none;
  border-radius:0 0 8px 8px; color:var(--site-text,#3a4366); }
.tm-page .accordion-body strong, .tm-page .accordion-body h6{ color:var(--site-ink,#0b1020); }
.tm-page .accordion-body code{ color:var(--site-link,#2d4bdb); }
.tm-tip{ margin-top:12px; padding:12px 14px; border-radius:10px; background:var(--site-accent-soft,#eef1ff); border:1px solid var(--site-line-strong,#dce2ef); color:var(--site-ink,#0b1020); }
.tm-hex{ padding:8px; border-radius:6px; word-break:break-all; direction:ltr; text-align:left; background:var(--site-bg-soft,#f6f8fc); color:var(--site-ink,#0b1020) !important; }
.tm-code{ padding:12px; border-radius:6px; overflow-x:auto; direction:ltr; text-align:left; background:var(--site-code-bg,#0b1020); color:var(--site-code-text,#e9edff); }
.tm-code code{ color:inherit !important; }

@media (max-width:768px){ .tm-hero{ padding-top:28px; } .color-palette{ max-width:160px; } }