/*
 * new-design.css — Roltworld Judge System, Фаза 3
 * CSS-токены и базовые компоненты нового дизайна.
 * Подключается в layout.php вместо roltworld.css.
 * roltworld.css сохраняется только для HTML-экспортов (total_response, comment_response).
 */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Токены ── */
:root {
  --bg:  #0b0b0f;
  --s1:  #13131a;
  --s2:  #1a1a23;
  --s3:  #22222e;
  --s4:  #2a2a38;

  --b1: rgba(255,255,255,.07);
  --b2: rgba(255,255,255,.12);
  --b3: rgba(255,255,255,.20);

  --t1: #eeecea;
  --t2: #8a8899;
  --t3: #4f4e64;

  --gold:        #c9a84c;
  --gold-dim:    rgba(201,168,76,.14);
  --gold-b:      rgba(201,168,76,.38);

  --silver:      #9ea6b4;
  --silver-dim:  rgba(158,166,180,.11);
  --silver-b:    rgba(158,166,180,.32);

  --bronze:      #b87d4b;
  --bronze-dim:  rgba(184,125,75,.11);
  --bronze-b:    rgba(184,125,75,.32);

  --accent:      #534CF0;
  --accent-dim:  rgba(124,140,248,.13);
  --accent-b:    rgba(124,140,248,.42);

  --ok:  #4caf82;
  --bad: #e05555;

  --r:    10px;
  --r-sm: 7px;
  --r-xs: 5px;

  --font-head: 'Unbounded', sans-serif;
  --font-body: 'Inter', sans-serif;

  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--s1); }
::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--s4); }

/* ── Шрифты ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--t1);
}

/* ── Кнопки базовые ── */
.btn-nd {
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--b2);
  background: var(--s2);
  color: var(--t2);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .13s, border-color .13s, color .13s, transform .13s var(--ease-back);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn-nd:hover  { border-color: var(--b3); color: var(--t1); background: var(--s3); }
.btn-nd:active { transform: scale(.96); }
.btn-nd.primary  { background: var(--accent); border-color: var(--accent-b); color: #fff; }
.btn-nd.primary:hover { opacity: .9; }
.btn-nd.success  { background: var(--ok); border-color: rgba(76,175,130,.5); color: #fff; }
.btn-nd.danger   { background: transparent; border-color: rgba(224,85,85,.4); color: var(--bad); }
.btn-nd.danger:hover { background: rgba(224,85,85,.08); }
.btn-nd svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Карточки ── */
.card-nd {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  transition: border-color .18s, transform .2s var(--ease-smooth);
}
.card-nd:hover { border-color: var(--b2); }

/* ── Бейджи статуса ── */
.badge-open   { background: rgba(76,175,130,.14); color: var(--ok);  border: 1px solid rgba(76,175,130,.3);  padding: 3px 9px; border-radius: 20px; font-size: 10px; font-family: var(--font-head); }
.badge-closed { background: rgba(224,85,85,.10);  color: var(--bad); border: 1px solid rgba(224,85,85,.25); padding: 3px 9px; border-radius: 20px; font-size: 10px; font-family: var(--font-head); }

/* ── Критерии: цветовые классы ── */
.crit-tehcnics { border-color: rgba(53,197,135,.35)  !important; }
.crit-choreo   { border-color: rgba(126,226,188,.35) !important; }
.crit-creo     { border-color: rgba(0,201,96,.35)    !important; }
.crit-show     { border-color: rgba(124,140,248,.35) !important; }

/* ── Toast ── */
.nd-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--s3);
  border: 1px solid var(--b2);
  border-radius: var(--r-sm);
  padding: 9px 18px;
  font-size: 13px;
  color: var(--t1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .22s var(--ease-back);
  z-index: 9999;
  white-space: nowrap;
}
.nd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Dropdown ── */
.nd-dropdown {
  background: var(--s2);
  border: 1px solid var(--b2);
  border-radius: var(--r);
  transform-origin: top;
  transform: scaleY(.9) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s var(--ease-back), opacity .15s;
  overflow-y: auto;
  z-index: 200;
}
.nd-dropdown.open { transform: none; opacity: 1; pointer-events: all; }
.nd-dd-item {
  padding: 9px 13px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--t2);
  transition: background .1s, color .1s;
  gap: 8px;
}
.nd-dd-item:hover   { background: var(--s3); color: var(--t1); }
.nd-dd-item.active  { color: var(--accent); background: var(--accent-dim); }
.nd-dd-group {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t3);
  padding: 9px 13px 3px;
}