/* =========================================================
   JoJo — The Great Gatsby · Art Deco брендбук
   Чёрный · Золото · Белый · 1920–30-е
   Общая дизайн-система для всех экранов концепта
   (имена переменных и классов сохранены — стиль задаётся здесь)
   ========================================================= */

:root {
  /* — ночь (тёплый чёрный) — */
  --night-900: #0B0A08;
  --night-800: #100E0B;
  --night-700: #16130F;   /* surface */
  --night-600: #1E1A14;   /* surface raised */
  --night-500: #2A241B;   /* hover / borders */
  --line: rgba(201,162,75,.16);        /* тонкая золотая линия */
  --line-strong: rgba(201,162,75,.34);

  /* — золото (главный акцент ар-деко) — */
  --gold: #C9A24B;
  --gold-bright: #EBCB79;
  --gold-deep: #7A5C24;
  --brass: #C9A24B;
  --brass-soft: #EBCB79;
  --brass-dim: rgba(201,162,75,.14);

  /* «ember» переназначен на золото — оранжевого больше нет */
  --ember: #C9A24B;
  --ember-hot: #EBCB79;
  --ember-glow: rgba(201,162,75,.40);
  --ember-dim: rgba(201,162,75,.12);

  /* — служебные деко-акценты (изумруд / оксблад / тил) — */
  --mint: #3CB07E;        /* успех / рост / «в норме» */
  --rose: #C0392B;        /* опасность / падение / «опаздываем» */
  --violet: #3FA39C;      /* деко-тил (бывш. фиолетовый) */

  /* — текст: шампань-белый — */
  --ink: #F5ECD6;
  --ink-2: #D9CDAC;
  --ink-3: #9C9072;
  --ink-4: #6A6150;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  --shadow: 0 24px 60px -28px rgba(0,0,0,.85);
  --shadow-soft: 0 12px 30px -18px rgba(0,0,0,.75);

  --font-display: "Playfair Display", Georgia, serif;   /* изящный гэтсби-дисплей */
  --font-deco: "Forum", "Playfair Display", serif;      /* деко-капитель: бренд, эйброу */
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--night-900);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.005em;
  min-height: 100vh;
}

/* атмосфера: тёплое золотое свечение + изумруд по краям, на чёрном */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 42vh at 88% -8%, rgba(201,162,75,.14), transparent 60%),
    radial-gradient(48vw 40vh at 4% 108%, rgba(60,176,126,.07), transparent 60%),
    radial-gradient(40vw 30vh at 108% 72%, rgba(201,162,75,.08), transparent 60%);
}
/* тонкая деко-«лучистость» поверх (по желанию через .rays) */
.rays::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background: repeating-conic-gradient(from 0deg at 50% 0%, rgba(201,162,75,.05) 0deg 2deg, transparent 2deg 14deg);
  -webkit-mask: radial-gradient(70% 50% at 50% 0%, #000, transparent 70%);
          mask: radial-gradient(70% 50% at 50% 0%, #000, transparent 70%);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }

::selection { background: var(--gold); color: #1a1407; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* — типографика — */
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; line-height: 1.04; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.eyebrow {
  font-family: var(--font-deco); font-size: 12px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--gold);
}

/* ============ деко-разделитель с ромбом ============ */
.deco-rule { display:flex; align-items:center; gap:12px; }
.deco-rule::before, .deco-rule::after { content:""; height:1px; flex:1;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.deco-rule .dia { width:7px; height:7px; transform:rotate(45deg); background:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,75,.12); flex:none; }

/* ============ «уголёк» → золотая искра (сигнатура) ============ */
.coal {
  --size: 14px;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF6DA, var(--gold-bright) 42%, var(--gold-deep) 86%);
  box-shadow: 0 0 14px 2px var(--ember-glow);
  animation: emberPulse 3s ease-in-out infinite;
  flex: none;
}
@keyframes emberPulse {
  0%, 100% { box-shadow: 0 0 8px 1px var(--ember-glow); filter: brightness(1); }
  50%      { box-shadow: 0 0 18px 5px var(--ember-glow); filter: brightness(1.15); }
}
@media (prefers-reduced-motion: reduce) { .coal { animation: none !important; } }

/* ============ бренд ============ */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: center / contain no-repeat url('img/logo.png');
  display: grid; place-items: center; position: relative;
}
.brand__mark .coal { display: none; }   /* в брендмарке — логотип JoJo */
.hdr-logo { width: 34px; height: 34px; flex: none; border-radius: 50%; }
.brand__name { font-family: var(--font-deco); font-weight: 400; font-size: 21px; letter-spacing: .06em; color: var(--ink); }
.brand__name b { color: var(--gold); font-weight: 400; }
.brand__sub { font-family: var(--font-deco); font-size: 10px; letter-spacing: .3em; color: var(--ink-3); text-transform: uppercase; }

/* ============ карточки ============ */
.card {
  background: linear-gradient(180deg, var(--night-700), var(--night-800));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.card--pad { padding: 22px; }

/* ============ кнопки ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 18px; border-radius: 10px; font-weight: 700; font-size: 14px;
  border: 1px solid var(--line-strong); background: var(--night-600); color: var(--ink);
  transition: transform .12s ease, background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--gold); background: var(--night-500); }
.btn:active { transform: translateY(0); }
.btn--ember, .btn--brass {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #1d1606; border-color: transparent;
  box-shadow: 0 10px 26px -14px var(--ember-glow);
}
.btn--ember:hover, .btn--brass:hover {
  box-shadow: 0 16px 34px -14px var(--ember-glow);
  background: linear-gradient(180deg, #f4d98e, var(--gold-bright));
}
.btn--ghost { background: transparent; }
.btn--block { width: 100%; }
.btn--lg { padding: 16px 22px; font-size: 15px; }

/* ============ бейджи ============ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-2); background: rgba(201,162,75,.04);
}
.badge--up { color: var(--st-green); border-color: rgba(52,179,107,.4); background: rgba(52,179,107,.10); }
.badge--down { color: var(--st-red); border-color: rgba(229,72,77,.45); background: rgba(229,72,77,.12); }
.badge--ember { color: var(--gold-bright); border-color: rgba(201,162,75,.4); background: var(--ember-dim); }
.badge--violet { color: var(--violet); border-color: rgba(63,163,156,.4); background: rgba(63,163,156,.10); }
.badge--brass { color: var(--gold); border-color: rgba(201,162,75,.4); background: var(--brass-dim); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--mint { background: var(--mint); box-shadow: 0 0 8px rgba(60,176,126,.6); }
.dot--rose { background: var(--rose); }
.dot--brass { background: var(--gold); box-shadow: 0 0 8px var(--ember-glow); }

/* =======================================================
   СВЕТОФОР СРОЧНОСТИ — единая система для всех экранов
   🔴 red = срочно/стоп (вверху + пульс) · 🟠 amber = умеренно · 🟢 green = норма
   ======================================================= */
:root{
  --st-red:#E5484D;   --st-red-dim:rgba(229,72,77,.14);   --st-red-glow:rgba(229,72,77,.55);
  --st-amber:#E8923B; --st-amber-dim:rgba(232,146,59,.15);
  --st-green:#34B36B; --st-green-dim:rgba(52,179,107,.14);
}
@keyframes stPulse{ 0%,100%{ box-shadow:0 0 0 0 var(--st-red-glow); } 50%{ box-shadow:0 0 0 5px transparent, 0 0 16px 3px var(--st-red-glow); } }
@keyframes stBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion: reduce){ .pulse-red,[data-st="red"] .st-dot{ animation:none !important; } }

/* точка-индикатор */
.st-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.st-dot.red{ background:var(--st-red); animation:stPulse 1.2s ease-in-out infinite; }
.st-dot.amber{ background:var(--st-amber); }
.st-dot.green{ background:var(--st-green); }

/* пилюля срочности */
.urg{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:4px 10px; border-radius:999px; }
.urg.red{ color:#fff; background:var(--st-red); animation:stBlink 1.2s ease-in-out infinite; }
.urg.amber{ color:#241606; background:var(--st-amber); }
.urg.green{ color:#06241a; background:var(--st-green); }

/* карточка пульсирует, если красная */
.pulse-red{ animation:stPulse 1.4s ease-in-out infinite; }

/* легенда-светофор (одинаковая на всех экранах) */
.tl-legend{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:11px; color:var(--ink-3); }
.tl-legend span{ display:inline-flex; align-items:center; gap:6px; }
.tl-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.tl-legend .r{ background:var(--st-red); } .tl-legend .a{ background:var(--st-amber); } .tl-legend .g{ background:var(--st-green); }

/* ============ статы ============ */
.stat__label { font-family: var(--font-deco); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 0; margin-top: 8px; }
.stat__value small { font-size: 15px; color: var(--ink-3); font-weight: 600; }

/* ============ прогресс ============ */
.bar { height: 7px; border-radius: 999px; background: rgba(201,162,75,.10); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }
.bar--brass > span { background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }
.bar--violet > span { background: linear-gradient(90deg, #1f5e5a, var(--violet)); }

/* ============ скролл ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--night-500); border-radius: 999px; border: 2px solid var(--night-900); }
::-webkit-scrollbar-track { background: transparent; }

/* ============ утилиты ============ */
.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.muted { color: var(--ink-3); }
.tnum { font-variant-numeric: tabular-nums; }
.wrap { flex-wrap: wrap; }