/* ═══════════════════════════════════════════════════════
   moto.css — общие стили для всех страниц обзоров
   ═══════════════════════════════════════════════════════ */

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

body {
  background: #0f0f0f;
  color: #e8e8e8;
  font-family: 'Segoe UI', system-ui, sans-serif;
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
}

.breadcrumb { display: flex; align-items: center; gap: 10px; background: #161616; border-bottom: 2px solid #1e1e1e; padding: 11px 20px; margin: -40px -20px 36px; font-size: 13px; }
.breadcrumb a { color: #666 !important; text-decoration: none !important; transition: color 0.2s; white-space: nowrap; }
.breadcrumb a:hover { color: #e63a00 !important; }
.bc-sep { color: #333; flex-shrink: 0; }
.bc-current { color: #e63a00; font-weight: 600; }
body.light .breadcrumb { background: #f4f4f4; border-bottom-color: #e0e0e0; }
body.light .breadcrumb a { color: #888 !important; }
body.light .bc-sep { color: #ccc; }
body.light .bc-current { color: #e63a00; }

header { border-left: 4px solid #e63a00; padding-left: 20px; margin-bottom: 40px; }
header .brand { font-size: 13px; text-transform: uppercase; letter-spacing: 3px; color: #e63a00; margin-bottom: 6px; }
header h1 { font-size: 32px; font-weight: 700; line-height: 1.2; }
header .subtitle { margin-top: 8px; color: #888; font-size: 15px; }

section { margin-bottom: 36px; }

h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: #e63a00; margin-bottom: 16px; }
h3 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 10px; }

/* ── Базовые карточки ─────────────────────────────────── */
.card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; }
.info-box { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 20px; }

/* ── Сетки ────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* ── Карточки характеристик ───────────────────────────── */
.spec-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 16px 20px; }
.spec-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #666; margin-bottom: 6px; }
.spec-card .value { font-size: 22px; font-weight: 700; color: #fff; }
.spec-card .value span { font-size: 13px; color: #888; font-weight: 400; }

/* ── Карточки зон защиты ──────────────────────────────── */
.zone-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 16px 12px; text-align: center; }
.zone-card .zone-icon { font-size: 26px; margin-bottom: 8px; }
.zone-card .zone-name { font-size: 12px; color: #aaa; margin-bottom: 6px; }
.zone-card .zone-level { font-size: 15px; font-weight: 700; color: #e63a00; }
.zone-card .zone-cert { font-size: 10px; color: #555; margin-top: 3px; }

/* ── CE badges ────────────────────────────────────────── */
.ce-row { display: flex; gap: 16px; }
.ce-badge { flex: 1; background: #1a1a1a; border-radius: 8px; padding: 20px; text-align: center; border: 1px solid #2a2a2a; }
.ce-badge .zone { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.ce-badge .level { font-size: 28px; font-weight: 800; color: #e63a00; }
.ce-badge .cert { font-size: 12px; color: #666; margin-top: 4px; }
.ce-badge .note { margin-top: 10px; font-size: 13px; color: #aaa; }
.ce-badge .note strong { color: #fff; }

/* ── Слайдер ──────────────────────────────────────────── */
.slider-wrap { position: relative; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; overflow: hidden; margin-bottom: 36px; }
.slider-track { display: flex; transition: transform 0.4s ease; }
.slide { min-width: 100%; height: 420px; display: flex; align-items: center; justify-content: center; background: #111; }
.slide img { max-height: 100%; max-width: 100%; object-fit: contain; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); border: 1px solid #333; color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.2s; }
.slider-btn:hover { background: #e63a00; border-color: #e63a00; }
.slider-btn.prev { left: 12px; }
.slider-btn.next { right: 12px; }
.slider-dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #333; cursor: pointer; transition: background 0.2s; }
.dot.active { background: #e63a00; }

/* ── Энергетическая шкала ─────────────────────────────── */
.energy-section { background: #1a1a1a; border-radius: 8px; padding: 20px; border: 1px solid #2a2a2a; }
.energy-label { display: flex; justify-content: space-between; font-size: 13px; color: #888; margin-bottom: 8px; }
.energy-bar-wrap { background: #2a2a2a; border-radius: 4px; height: 12px; overflow: hidden; margin-bottom: 6px; }
.energy-bar-fill { height: 100%; background: #e63a00; border-radius: 4px; width: 43%; }
.energy-note { font-size: 12px; color: #555; }

/* ── Таблицы ──────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead tr { border-bottom: 1px solid #2a2a2a; }
thead th { text-align: left; padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #666; }
tbody tr { border-bottom: 1px solid #1e1e1e; }
tbody tr:hover { background: #1a1a1a; }
tbody td { padding: 12px 14px; }

/* ── Плюсы / минусы ───────────────────────────────────── */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pros, .cons { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 20px; }
.pros h3 { color: #4caf50; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.cons h3 { color: #e63a00; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.pros li, .cons li { list-style: none; font-size: 14px; color: #ccc; margin-bottom: 8px; padding-left: 18px; position: relative; }
.pros li::before { content: '+'; position: absolute; left: 0; color: #4caf50; font-weight: 700; }
.cons li::before { content: '−'; position: absolute; left: 0; color: #e63a00; font-weight: 700; }

/* ── Аудитория ────────────────────────────────────────── */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.audience-card { background: #1a1a1a; border-radius: 8px; padding: 16px; text-align: center; border: 1px solid #2a2a2a; font-size: 14px; color: #ccc; }
.audience-card .icon { font-size: 28px; margin-bottom: 8px; }

/* ── Takeaway / Warn ──────────────────────────────────── */
.takeaway { background: #1a0a00; border: 1px solid #e63a00; border-radius: 8px; padding: 20px 24px; }
.takeaway p { font-size: 15px; line-height: 1.7; color: #ddd; }
.takeaway strong { color: #fff; }
.warn-box { background: #1a0a00; border: 1px solid #5a2000; border-radius: 8px; padding: 16px; }
.warn-box .warn-title { font-size: 13px; font-weight: 700; color: #e63a00; margin-bottom: 10px; }
.warn-box p { font-size: 13px; color: #ccc; line-height: 1.6; }

/* ── Алго-карточки (общий компонент) ─────────────────── */
.algo-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; padding: 24px; text-decoration: none; color: inherit; display: flex; align-items: center; gap: 20px; transition: border-color 0.2s; }
.algo-card:hover { border-color: #e63a00; }
.algo-icon { width: 52px; height: 52px; background: #2a2a2a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.algo-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.algo-desc { font-size: 13px; color: #666; line-height: 1.5; }

/* ── Footer ───────────────────────────────────────────── */
footer { margin-top: 48px; border-top: 1px solid #2a2a2a; padding-top: 20px; font-size: 12px; color: #444; }

/* ══════════════════════════════════════════════════════════
   THEME TOGGLE
   ══════════════════════════════════════════════════════════ */
.theme-toggle {
  position: fixed; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #2a2a2a; background: #1a1a1a; color: #e8e8e8;
  font-size: 18px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  z-index: 100; transition: border-color 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.theme-toggle:hover { border-color: #e63a00; }

/* ══════════════════════════════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════════════════════════════ */
body.light { background: #f2f2f2; color: #1a1a1a; }
body.light .theme-toggle { background: #fff; border-color: #ddd; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

body.light header .brand { color: #e63a00; }
body.light header h1 { color: #111; }
body.light header .subtitle, body.light header p { color: #888; }
body.light h2 { color: #e63a00; }
body.light h3 { color: #111; }

body.light .card, body.light .info-box,
body.light .spec-card, body.light .zone-card,
body.light .ce-badge, body.light .energy-section,
body.light .pros, body.light .cons,
body.light .audience-card,
body.light .algo-card,
body.light .product-card { background: #fff; border-color: #e8e8e8; }

body.light .slider-wrap { background: #fff; border-color: #e8e8e8; }
body.light .slide { background: #f8f8f8; }
body.light .slider-btn { background: rgba(255,255,255,0.9); border-color: #ddd; color: #333; }
body.light .slider-btn:hover { background: #e63a00; border-color: #e63a00; color: #fff; }
body.light .dot { background: #ccc; }
body.light .dot.active { background: #e63a00; }

body.light .takeaway { background: #fff5f0; border-color: #ffc8a0; }
body.light .takeaway p, body.light .takeaway strong { color: #222; }
body.light .warn-box { background: #fff5f0; border-color: #ffc8a0; }
body.light .warn-box .warn-title { color: #e63a00; }
body.light .warn-box p { color: #444; }

body.light .spec-card .label { color: #aaa; }
body.light .spec-card .value { color: #111; }
body.light .spec-card .value span { color: #888; }
body.light .zone-card .zone-name { color: #888; }
body.light .zone-card .zone-cert { color: #bbb; }
body.light .ce-badge .zone { color: #999; }
body.light .ce-badge .cert { color: #888; }
body.light .ce-badge .note { color: #666; }
body.light .ce-badge .note strong { color: #111; }
body.light .audience-card { color: #444; }
body.light .algo-icon { background: #f0f0f0; }
body.light .algo-title { color: #111; }
body.light .algo-desc { color: #666; }

body.light .pros li, body.light .cons li { color: #444; }
body.light .energy-label { color: #888; }
body.light .energy-bar-wrap { background: #e8e8e8; }
body.light .energy-note { color: #999; }

body.light table thead tr { border-color: #e8e8e8; }
body.light table thead th { color: #aaa; }
body.light table tbody tr { border-color: #f0f0f0; }
body.light table tbody td { color: #444; }
body.light table tbody tr:hover { background: #f8f8f8; }
body.light table tbody tr.highlight { background: #fff5f0; }

body.light footer { color: #bbb; border-color: #e8e8e8; }

/* inline-style overrides */
body.light [style*="background:#1a1a1a"] { background: #fff !important; }
body.light [style*="background:#222"]    { background: #f8f8f8 !important; }
body.light [style*="background:#111"]    { background: #f4f4f4 !important; }
body.light [style*="background:#1a0a00"] { background: #fff5f0 !important; }
body.light [style*="background:#0a1a00"] { background: #f0fff5 !important; }
body.light [style*="background:#1a1500"] { background: #fffbf0 !important; }
body.light [style*="background:#1a1a00"] { background: #fffef0 !important; }
body.light [style*="color:#fff"]  { color: #111 !important; }
body.light [style*="color: #fff"] { color: #111 !important; }
body.light [style*="color:#ccc"]  { color: #444 !important; }
body.light [style*="color:#aaa"]  { color: #666 !important; }
body.light [style*="color:#888"]  { color: #777 !important; }
body.light [style*="color:#666"]  { color: #888 !important; }
body.light [style*="color:#555"]  { color: #999 !important; }
body.light [style*="border:1px solid #2a2a2a"]        { border-color: #e8e8e8 !important; }
body.light [style*="border-right:1px solid #2a2a2a"]  { border-color: #e8e8e8 !important; }
body.light [style*="border-bottom:1px solid #2a2a2a"] { border-color: #e8e8e8 !important; }
body.light [style*="border-top:1px solid #2a2a2a"]    { border-color: #e8e8e8 !important; }
body.light [style*="border:1px solid #333"]   { border-color: #ddd !important; }
body.light [style*="border:1px solid #5a2000"] { border-color: #ffc8a0 !important; }
body.light [style*="border:1px solid #1a4a00"] { border-color: #a8ddb8 !important; }
body.light [style*="border:1px solid #3a3a00"] { border-color: #ffe8a0 !important; }