/* =====================================================================
   konkurs.css — единая дизайн-система конкурсной платформы
   Слой поверх темы (style.css + blue.css). Всё префикс .kx- / --kx-,
   чтобы не конфликтовать с bootstrap3 (.btn/.card/...).
   Эволюция бренда: Material blue + бирюза + зелёный.
   Утверждено: концепт konkurs-style.html (10.07.2026)
   ===================================================================== */

:root {
  --kx-bg:        #eef2f7;
  --kx-surface:   #ffffff;
  --kx-surface-2: #f5f8fc;
  --kx-ink:       #17242e;
  --kx-ink-2:     #46586a;
  --kx-ink-3:     #7c8da0;
  --kx-border:    #e2e8f1;
  --kx-border-2:  #d3dce8;
  /* brand */
  --kx-primary:   #1e88e5;
  --kx-primary-d: #1565c0;
  --kx-primary-wash:#e7f1fd;
  /* три творческие роли = три фирменных цвета (структурно) */
  --kx-text-c:    #0ca3b4;  --kx-text-wash: #dff4f6;   /* Текст  */
  --kx-music-c:   #1e88e5;  --kx-music-wash:#e4f0fd;   /* Музыка */
  --kx-video-c:   #10a884;  --kx-video-wash:#def3ec;   /* Видео  */
  /* семантика (отдельно от акцента) */
  --kx-gold:      #e0a52b;
  --kx-warn:      #d98324;
  --kx-danger:    #d94f4f;
  /* форма */
  --kx-radius:    14px;
  --kx-radius-sm: 9px;
  --kx-shadow:    0 1px 2px rgba(21,40,60,.05), 0 6px 20px rgba(21,40,60,.06);
  --kx-shadow-h:  0 2px 6px rgba(21,40,60,.08), 0 14px 34px rgba(21,40,60,.12);
  --kx-vk:        #2787f5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --kx-bg:#0d1620; --kx-surface:#152230; --kx-surface-2:#1a2937; --kx-ink:#e8eef5; --kx-ink-2:#a7b6c6;
    --kx-ink-3:#72869c; --kx-border:#233444; --kx-border-2:#2c3f52;
    --kx-primary:#4ba3f0; --kx-primary-d:#6bb4f3; --kx-primary-wash:#132b41;
    --kx-text-c:#33bccb; --kx-text-wash:#0e2b30; --kx-music-c:#4ba3f0; --kx-music-wash:#122a41;
    --kx-video-c:#3cc19c; --kx-video-wash:#0f2b25; --kx-gold:#e6b755;
    --kx-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --kx-shadow-h:0 2px 8px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="light"]{
  --kx-bg:#eef2f7; --kx-surface:#ffffff; --kx-surface-2:#f5f8fc; --kx-ink:#17242e; --kx-ink-2:#46586a; --kx-ink-3:#7c8da0;
  --kx-border:#e2e8f1; --kx-border-2:#d3dce8; --kx-primary:#1e88e5; --kx-primary-d:#1565c0; --kx-primary-wash:#e7f1fd;
  --kx-text-c:#0ca3b4; --kx-text-wash:#dff4f6; --kx-music-c:#1e88e5; --kx-music-wash:#e4f0fd;
  --kx-video-c:#10a884; --kx-video-wash:#def3ec; --kx-gold:#e0a52b;
}
:root[data-theme="dark"]{
  --kx-bg:#0d1620; --kx-surface:#152230; --kx-surface-2:#1a2937; --kx-ink:#e8eef5; --kx-ink-2:#a7b6c6; --kx-ink-3:#72869c;
  --kx-border:#233444; --kx-border-2:#2c3f52; --kx-primary:#4ba3f0; --kx-primary-d:#6bb4f3; --kx-primary-wash:#132b41;
  --kx-text-c:#33bccb; --kx-text-wash:#0e2b30; --kx-music-c:#4ba3f0; --kx-music-wash:#122a41;
  --kx-video-c:#3cc19c; --kx-video-wash:#0f2b25; --kx-gold:#e6b755;
}

/* ---- scope: включается на новых страницах, не трогает легаси ---- */
.kx-scope { color:var(--kx-ink);
  font-family:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
.kx-scope *{ box-sizing:border-box; }
.kx-wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }

/* ---- заголовки страницы ---- */
.kx-page-head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.kx-page-head h1{ font-size:26px; font-weight:760; letter-spacing:-.025em; text-wrap:balance; margin:0; }
.kx-page-head p{ color:var(--kx-ink-2); font-size:14px; margin:5px 0 0; }
.kx-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--kx-text-c); }
.kx-spacer{ flex:1; }

/* ---- кнопки ---- */
.kx-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:10px;
  font:inherit; font-weight:650; font-size:14px; padding:9px 16px; cursor:pointer; transition:.14s; white-space:nowrap;
  text-decoration:none; }
.kx-btn--primary{ background:var(--kx-primary); color:#fff; box-shadow:var(--kx-shadow); }
.kx-btn--primary:hover{ background:var(--kx-primary-d); box-shadow:var(--kx-shadow-h); color:#fff; }
.kx-btn--ghost{ background:var(--kx-surface); border-color:var(--kx-border-2); color:var(--kx-ink); }
.kx-btn--ghost:hover{ border-color:var(--kx-primary); color:var(--kx-primary); }
.kx-btn--vk{ background:var(--kx-vk); color:#fff; }
.kx-btn--vk:hover{ background:#1a6fd4; color:#fff; }
.kx-btn--sm{ padding:6px 12px; font-size:13px; }
.kx-btn[disabled]{ opacity:.55; cursor:default; pointer-events:none; }
.kx-btn:focus-visible{ outline:2px solid var(--kx-primary); outline-offset:2px; }

/* ---- карточка ---- */
.kx-card{ background:var(--kx-surface); border:1px solid var(--kx-border); border-radius:var(--kx-radius); box-shadow:var(--kx-shadow); }
.kx-panel{ padding:18px; }

/* ---- поиск / поля ---- */
.kx-search{ flex:1; min-width:180px; display:flex; align-items:center; gap:9px; background:var(--kx-surface);
  border:1px solid var(--kx-border); border-radius:10px; padding:0 12px; height:40px; color:var(--kx-ink-3); }
.kx-search input{ border:0; background:transparent; font:inherit; font-size:14px; color:var(--kx-ink); flex:1; outline:none; height:100%; }
.kx-field{ display:flex; flex-direction:column; gap:6px; }
.kx-field label{ font-size:12.5px; font-weight:650; color:var(--kx-ink-2); }
.kx-inp{ border:1px solid var(--kx-border-2); background:var(--kx-surface); border-radius:10px; padding:9px 12px; font:inherit;
  font-size:14px; color:var(--kx-ink); outline:none; width:100%; }
.kx-inp:focus{ border-color:var(--kx-primary); box-shadow:0 0 0 3px var(--kx-primary-wash); }

/* ---- чипы ролей ---- */
.kx-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:650; padding:3px 9px 3px 7px;
  border-radius:999px; border:1px solid transparent; letter-spacing:.01em; }
.kx-chip .kx-dot{ width:7px; height:7px; border-radius:50%; }
.kx-chip--text { background:var(--kx-text-wash);  color:var(--kx-text-c); }  .kx-chip--text  .kx-dot{ background:var(--kx-text-c); }
.kx-chip--music{ background:var(--kx-music-wash); color:var(--kx-music-c); } .kx-chip--music .kx-dot{ background:var(--kx-music-c); }
.kx-chip--video{ background:var(--kx-video-wash); color:var(--kx-video-c); } .kx-chip--video .kx-dot{ background:var(--kx-video-c); }
.kx-chip--need { background:transparent; color:var(--kx-ink-3); border:1px dashed var(--kx-border-2); } .kx-chip--need .kx-dot{ background:var(--kx-ink-3); opacity:.5; }

/* ---- статусы ---- */
.kx-status{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:7px; }
.kx-status--ready{ background:var(--kx-video-wash); color:var(--kx-video-c); }
.kx-status--build{ background:var(--kx-music-wash); color:var(--kx-music-c); }
.kx-status--mod  { background:#fbf0dd; color:var(--kx-warn); }
:root[data-theme="dark"] .kx-status--mod{ background:#2e2413; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .kx-status--mod{ background:#2e2413; } }

/* ---- аватары / команда ---- */
.kx-avatar{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; background:var(--kx-primary); }
.kx-team{ display:flex; align-items:center; }
.kx-team .kx-avatar{ width:24px; height:24px; font-size:10px; border:2px solid var(--kx-surface); margin-left:-7px; }
.kx-team .kx-avatar:first-child{ margin-left:0; }

/* ---- список текстов ---- */
.kx-list{ overflow:hidden; }
.kx-row{ display:flex; align-items:center; gap:16px; padding:15px 18px; border-bottom:1px solid var(--kx-border); transition:.12s; }
.kx-row:last-child{ border-bottom:0; }
.kx-row:hover{ background:var(--kx-surface-2); }
.kx-row .kx-num{ font-size:13px; font-weight:700; color:var(--kx-ink-3); width:26px; font-variant-numeric:tabular-nums; text-align:right; }
.kx-row .kx-ico{ width:38px; height:38px; border-radius:10px; background:var(--kx-text-wash); color:var(--kx-text-c); display:grid; place-items:center; flex:none; }
.kx-row .kx-main{ flex:1; min-width:0; }
.kx-row .kx-title{ font-weight:680; font-size:15.5px; letter-spacing:-.01em; }
.kx-row .kx-sub{ color:var(--kx-ink-2); font-size:13px; margin-top:2px; }
.kx-meta{ display:flex; align-items:center; gap:14px; color:var(--kx-ink-3); font-size:12.5px; }
.kx-meta b{ color:var(--kx-ink-2); font-variant-numeric:tabular-nums; }

/* ---- туры ---- */
.kx-tour{ margin-bottom:34px; }
.kx-tour-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.kx-tour-head .kx-bar{ width:4px; align-self:stretch; border-radius:3px; background:var(--kx-primary); }
.kx-tour--t1 .kx-bar{ background:var(--kx-text-c); }
.kx-tour--t2 .kx-bar{ background:var(--kx-music-c); }
.kx-tour--t3 .kx-bar{ background:var(--kx-gold); }
.kx-tour-head h2{ font-size:19px; font-weight:730; letter-spacing:-.02em; margin:0; }
.kx-tour-head .kx-tsub{ color:var(--kx-ink-2); font-size:13px; }
.kx-count-pill{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--kx-ink-2); background:var(--kx-surface-2);
  border:1px solid var(--kx-border); padding:4px 11px; border-radius:999px; font-variant-numeric:tabular-nums; }

/* ---- сетка + карточка клипа ---- */
.kx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px; }
.kx-clip{ overflow:hidden; display:flex; flex-direction:column; transition:.16s; }
.kx-clip:hover{ transform:translateY(-3px); box-shadow:var(--kx-shadow-h); }
.kx-thumb{ aspect-ratio:16/10; position:relative; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#25506b,#0d2536); }
.kx-play{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(3px);
  border:1.5px solid rgba(255,255,255,.6); display:grid; place-items:center; }
.kx-thumb .kx-dur{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:600; padding:2px 7px; border-radius:6px; font-variant-numeric:tabular-nums; }
.kx-thumb .kx-rank{ position:absolute; left:10px; top:10px; width:30px; height:30px; border-radius:9px; background:var(--kx-gold); color:#3a2a05; font-weight:800; display:grid; place-items:center; font-size:14px; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.kx-clip-body{ padding:13px 14px 14px; display:flex; flex-direction:column; gap:10px; flex:1; }
.kx-clip-title{ font-weight:700; font-size:15px; letter-spacing:-.01em; }
.kx-clip-src{ color:var(--kx-ink-2); font-size:12.5px; display:flex; align-items:center; gap:6px; }
.kx-roles{ display:flex; flex-wrap:wrap; gap:5px; }
.kx-clip-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:11px; border-top:1px solid var(--kx-border); }
.kx-votes{ display:flex; align-items:center; gap:7px; font-weight:750; font-size:15px; font-variant-numeric:tabular-nums; }
.kx-votes i{ color:var(--kx-danger); font-style:normal; }
.kx-votes small{ color:var(--kx-ink-3); font-weight:600; font-size:12px; }

/* ---- подиум ---- */
.kx-podium{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.kx-win{ text-align:center; padding:22px 16px; position:relative; }
.kx-win .kx-medal{ width:46px; height:46px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; font-size:20px; font-weight:800; color:#fff; }
.kx-win--1 .kx-medal{ background:linear-gradient(135deg,#f0c04a,#d69a1e); } .kx-win--1{ border-color:var(--kx-gold); }
.kx-win--2 .kx-medal{ background:linear-gradient(135deg,#c3ccd6,#93a1af); }
.kx-win--3 .kx-medal{ background:linear-gradient(135deg,#d69b6a,#b06f3e); }
.kx-win h3{ font-size:16px; font-weight:730; margin:0; }
.kx-win .kx-place{ font-size:12px; color:var(--kx-ink-3); font-weight:650; text-transform:uppercase; letter-spacing:.06em; margin-top:3px; }
.kx-win .kx-wv{ margin-top:9px; font-weight:750; font-variant-numeric:tabular-nums; }

/* ---- инфо-плашка ---- */
.kx-note{ display:flex; gap:12px; align-items:flex-start; background:var(--kx-primary-wash); border:1px solid transparent; border-radius:var(--kx-radius); padding:14px 16px; font-size:13.5px; color:var(--kx-ink); }
.kx-note .kx-note-ic{ width:30px; height:30px; border-radius:8px; background:var(--kx-primary); color:#fff; display:grid; place-items:center; flex:none; }

/* ---- сегмент-переключатель ---- */
.kx-seg{ display:inline-flex; background:var(--kx-surface-2); border:1px solid var(--kx-border); border-radius:12px; padding:4px; gap:2px; }
.kx-seg button{ border:0; background:transparent; color:var(--kx-ink-2); font:inherit; font-weight:650; font-size:14px; padding:8px 16px; border-radius:9px; cursor:pointer; display:flex; align-items:center; gap:7px; }
.kx-seg button[aria-selected="true"]{ background:var(--kx-surface); color:var(--kx-ink); box-shadow:var(--kx-shadow); }
.kx-seg button:focus-visible{ outline:2px solid var(--kx-primary); outline-offset:2px; }

/* ---- чекбоксы ролей (регистрация/профиль) ---- */
.regRoles{ display:flex; gap:10px; flex-wrap:wrap; }
.regRole{ display:flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--kx-border-2); border-radius:10px;
  cursor:pointer; font-weight:600; font-size:14px; background:var(--kx-surface); color:var(--kx-ink); user-select:none; transition:.14s; }
.regRole:hover{ border-color:var(--kx-primary); }
.regRole input{ accent-color:var(--kx-primary); width:16px; height:16px; margin:0; }
.regRole .dot{ width:9px; height:9px; border-radius:50%; }
.regRole:has(input:checked){ border-color:var(--kx-primary); box-shadow:0 0 0 3px var(--kx-primary-wash); }

@media (max-width:560px){ .kx-podium{ grid-template-columns:1fr; } .kx-row .kx-num{ display:none; } }
@media (prefers-reduced-motion:reduce){ .kx-clip:hover{ transform:none; } }