/* ============================================================
   DRIVE MARGIN — Design Code v1
   Единый файл токенов и базовых стилей. Подключается на всех
   страницах сервиса: <link rel="stylesheet" href="drive-margin.css">
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* --- Бренд --- */
  --dm-green:      #1F8A5B;  /* основной зелёный: действия, ссылки, акценты */
  --dm-green-mid:  #00C4A7;  /* стоп градиента кнопок */
  --dm-teal:       #00E5C7;  /* live-сигнал, акцент на тёмном */
  --dm-green-soft: #E5F5ED;  /* подложка бейджей и подсказок */
  --dm-green-tint: #EAF7F1;  /* фон секций */
  --dm-bar-muted:  #BFEBD6;  /* неактивные бары графиков */
  --dm-ink:        #0B0E1A;  /* тёмный фон и основной текст */

  /* Градиенты */
  --dm-grad-action: linear-gradient(135deg, #1F8A5B, #00C4A7); /* кнопки */
  --dm-grad-brand:  linear-gradient(135deg, #1F8A5B, #00E5C7); /* лого, иконки */
  --dm-grad-text:   linear-gradient(120deg, #1F8A5B, #00C4A7 60%, #00E5C7); /* заголовки-акценты */
  --dm-grad-text-dark: linear-gradient(120deg, #00E5C7, #7CF5DE); /* акцент на тёмном */

  /* --- Нейтральные --- */
  --dm-bg:      #FFFFFF;
  --dm-bg-1:    #F7F7FB;
  --dm-fg-1:    #0B0E1A;
  --dm-fg-2:    #3D4356;
  --dm-fg-3:    #6B7186;
  --dm-fg-4:    #9097A8;
  --dm-line:    rgba(11, 14, 26, .08);
  --dm-line-2:  rgba(11, 14, 26, .14);
  /* на тёмном */
  --dm-dark-fg-1: #F2F3FA;
  --dm-dark-fg-2: #B7BDD2;
  --dm-dark-fg-3: #8A91AB;
  --dm-dark-line: rgba(255, 255, 255, .1);
  --dm-dark-card: rgba(255, 255, 255, .04);

  /* Семантика */
  --dm-danger:      #C73E3E;
  --dm-danger-dark: #FF8A8A;   /* минус на тёмном */
  --dm-danger-soft: #FBE7E7;
  --dm-warning:     #B8730E;
  --dm-warning-soft:#FEF4DC;
  /* Маркетплейсы */
  /* Только идентификация площадки (метки, легенды, чипы) — не кнопки и не статусы.
     Порядок в UI: Ozon → Wildberries → Я.Маркет → Прямые. Ключи: ozon · wb · ym · direct */
  --dm-mp-ozon: #2E63D4;   --dm-mp-ozon-soft: #E5EEFB;
  --dm-mp-wb: #C73E94;     --dm-mp-wb-soft: #FBE5F3;
  --dm-mp-ym: #DBA00C;     --dm-mp-ym-soft: #FEF4DC;
  --dm-mp-direct: #2A2D45; --dm-mp-direct-soft: #EAEAEE;

  /* --- Типографика --- */
  --dm-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --dm-font-sans:    "Inter", system-ui, sans-serif;
  --dm-font-mono:    "JetBrains Mono", Menlo, monospace; /* все суммы и % */

  /* --- Радиусы --- */
  --dm-r-card: 16px;  --dm-r-panel: 20px;  --dm-r-btn: 10px;  --dm-r-pill: 999px; /* pill — только бейджи и чипы, НЕ кнопки */

  /* --- Тени --- */
  --dm-shadow-card:  0 24px 64px rgba(11, 14, 26, .12);
  --dm-shadow-hover: 0 16px 40px rgba(31, 138, 91, .14);
  --dm-shadow-btn:   0 10px 28px rgba(31, 138, 91, .4);
  --dm-shadow-glow:  0 12px 36px rgba(0, 229, 199, .4);

  /* --- Отступы и сетка --- */
  --dm-pad-section: clamp(56px, 9vw, 96px) clamp(16px, 4vw, 32px);
  --dm-content: 1180px;

  /* --- Движение --- */
  --dm-ease: cubic-bezier(.16, 1, .3, 1);
  --dm-fast: .15s;  --dm-base: .25s;  --dm-reveal: .7s;
}

/* --- База --- */
body { margin: 0; background: var(--dm-bg); color: var(--dm-fg-1); font-family: var(--dm-font-sans); }
a { color: var(--dm-green); text-decoration: none; }
a:hover { color: #00A88F; }

/* --- Типографика --- */
.dm-h1 { font-family: var(--dm-font-display); font-weight: 700; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.02em; }
.dm-h2 { font-family: var(--dm-font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.02em; }
.dm-h3 { font-family: var(--dm-font-display); font-weight: 600; font-size: 17px; }
.dm-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--dm-green); }
.dm-lead { font-size: 16px; line-height: 1.65; color: var(--dm-fg-2); }
.dm-money { font-family: var(--dm-font-mono); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dm-accent-text { color: var(--dm-green); }

/* --- Кнопки --- */
.dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: none; transition: transform var(--dm-fast), background var(--dm-fast); border-radius: var(--dm-r-btn); background: var(--dm-green); color: #fff; font: 700 14px var(--dm-font-sans); cursor: pointer; box-shadow: 0 2px 6px rgba(11,14,26,.12); transition: transform var(--dm-fast), box-shadow var(--dm-fast); }
.dm-btn:hover { background: #177449; transform: translateY(-2px); }
.dm-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border: 1px solid var(--dm-line-2); border-radius: var(--dm-r-btn); background: #fff; color: var(--dm-fg-1); font: 600 14px var(--dm-font-sans); cursor: pointer; transition: border-color var(--dm-fast), color var(--dm-fast); }
.dm-btn-outline:hover { border-color: var(--dm-green); color: var(--dm-green); }

/* --- Карточки и бейджи --- */
.dm-card { background: #fff; border: 1px solid var(--dm-line); border-radius: var(--dm-r-panel); box-shadow: var(--dm-shadow-card); padding: 22px; }
.dm-tile { background: var(--dm-bg-1); border: 1px solid rgba(11,14,26,.06); border-radius: var(--dm-r-card); padding: 24px; transition: transform var(--dm-base) var(--dm-ease), box-shadow var(--dm-base), border-color var(--dm-base); }
.dm-tile:hover { transform: translateY(-6px); box-shadow: var(--dm-shadow-hover); border-color: rgba(31,138,91,.3); }
.dm-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--dm-r-pill); background: var(--dm-green-soft); color: var(--dm-green); font: 700 12px var(--dm-font-sans); }
.dm-badge-danger { background: var(--dm-danger-soft); color: var(--dm-danger); }
.dm-hint { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--dm-r-pill); background: var(--dm-green-soft); color: var(--dm-green); font: 700 12px var(--dm-font-sans); }
.dm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dm-teal); animation: dmPulse 1.8s infinite; }

/* --- Анимации --- */
@keyframes dmFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes dmPulse { 0%,100% { opacity: .5; transform: scale(1) } 50% { opacity: 1; transform: scale(1.6) } }
@keyframes dmGrow { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes dmTicker { 0% { transform: translateY(0) } 100% { transform: translateY(-50%) } }
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dm-reveal) var(--dm-ease), transform var(--dm-reveal) var(--dm-ease); }
[data-reveal].dm-in { opacity: 1; transform: none; }