/* ============================================================
   Khan SAT-1600 · Премиальное оформление конструктора
   Author: Xudoyorxon Bunyodov / Худоёрхон Бунёдов

   Меняется только вид: разметка и логика прежние, поэтому
   ничего не ломается. Основа — фирменные зелёный и золотой,
   карточная раскладка, мягкие тени и крупные зоны нажатия.
   ============================================================ */
/* Все правила действуют только в режиме «Премиум». */


/* ---------- шапка экрана ---------- */
html[data-skin="premium"] .ct .ct-head {
  position: relative;
  padding: 22px 24px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(201,162,39,.22) 0%, transparent 55%),
    linear-gradient(135deg, var(--k-green, #1B5E20) 0%, #14431a 100%);
  color: #F3F8F3;
  box-shadow: 0 16px 40px rgba(14,61,20,.22);
  overflow: hidden;
  margin-bottom: 16px;
}
html[data-skin="premium"] .ct .ct-head::after {
  content: '🧩';
  position: absolute; right: 18px; top: 10px;
  font-size: 78px; opacity: .12; pointer-events: none;
}
html[data-skin="premium"] .ct .ct-head h1 { color: #fff; font-size: 27px; letter-spacing: -.01em; }
html[data-skin="premium"] .ct .ct-sub { color: rgba(255,255,255,.78); max-width: 640px; }

/* полоса показателей под заголовком */
html[data-skin="premium"] .ct-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
html[data-skin="premium"] .ct-stat {
  display: flex; align-items: baseline; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12.5px; color: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
}
html[data-skin="premium"] .ct-stat b { font-size: 15px; color: #fff; }
html[data-skin="premium"] .ct-stat--gold { background: rgba(201,162,39,.24); border-color: rgba(201,162,39,.45); }

/* ---------- панель выбора предмета ---------- */
html[data-skin="premium"] .ct .ct-bar {
  border-radius: 14px; border: 1px solid var(--k-line, #DCE5DC);
  box-shadow: 0 2px 10px rgba(14,61,20,.05);
  padding: 14px 16px;
}
html[data-skin="premium"] .ct .ct-bar select {
  border-radius: 10px; padding: 9px 12px; font-size: 14.5px;
  border: 1.5px solid #D6DEE5; min-width: 220px;
}
html[data-skin="premium"] .ct .ct-bar select:focus { outline: none; border-color: var(--k-green, #1B5E20); }

/* ---------- карточки источников ---------- */
html[data-skin="premium"] .ct .ct-col {
  border-radius: 16px; border: 1px solid var(--k-line, #DCE5DC);
  box-shadow: 0 4px 18px rgba(14,61,20,.06);
  padding: 18px 20px;
}
html[data-skin="premium"] .ct .ct-h2 { color: var(--k-green, #1B5E20); letter-spacing: .04em; }

/* зона перетаскивания */
html[data-skin="premium"] .ct .ct-drop {
  border: 2px dashed #BFD3C2; border-radius: 14px; padding: 20px 16px;
  background: linear-gradient(180deg, #FBFDFB 0%, #F4F8F4 100%);
  transition: transform .12s, border-color .15s, background .15s;
}
html[data-skin="premium"] .ct .ct-drop.is-over {
  border-color: var(--k-gold, #C9A227);
  background: linear-gradient(180deg, #FFFDF3 0%, #FBF3D9 100%);
  transform: scale(1.01);
}

/* поле вставки */
html[data-skin="premium"] .ct .ct-paste {
  border-radius: 12px; border: 1.5px solid #D6DEE5; min-height: 190px;
  font-size: 13.5px; line-height: 1.6; padding: 13px 14px;
}
.ct .ct-paste:focus { outline: none; border-color: var(--k-green, #1B5E20);
  box-shadow: 0 0 0 3px rgba(27,94,32,.12); }

/* панель формул */
html[data-skin="premium"] .ct .fm-bar { gap: 6px; }
html[data-skin="premium"] .ct .fm-b {
  border-radius: 10px; min-width: 38px; padding: 7px 10px; font-size: 15px;
  box-shadow: 0 1px 3px rgba(14,61,20,.06);
}
html[data-skin="premium"] .ct .fm-b:hover { background: #F1F8F2; border-color: var(--k-green, #1B5E20); transform: translateY(-1px); }

/* ---------- кнопки ---------- */
html[data-skin="premium"] .ct .btn {
  border-radius: 11px; padding: 9px 16px; font-weight: 600; font-size: 13.5px;
  transition: transform .12s, box-shadow .15s;
}
html[data-skin="premium"] .ct .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(14,61,20,.14); }
html[data-skin="premium"] .ct .btn-primary {
  background: linear-gradient(135deg, var(--k-green, #1B5E20), #2E7D32);
  border: 0; color: #fff;
}

/* ---------- строки заданий ---------- */
html[data-skin="premium"] .ct .ct-row {
  border-radius: 14px; border: 1px solid #E4EBE5;
  box-shadow: 0 2px 10px rgba(14,61,20,.05);
  padding: 14px 16px; transition: box-shadow .15s, border-color .15s;
}
html[data-skin="premium"] .ct .ct-row:hover { border-color: #BFD9C4; box-shadow: 0 8px 22px rgba(14,61,20,.09); }
html[data-skin="premium"] .ct .ct-row__g {
  font-variant-numeric: tabular-nums; font-weight: 600; color: #7C8B97;
  background: #F4F8F4; border-radius: 9px; padding: 6px 8px; text-align: center; height: fit-content;
}
html[data-skin="premium"] .ct .ct-in { border-radius: 10px; border: 1.5px solid #DDE5E0; }
html[data-skin="premium"] .ct .ct-in:focus { outline: none; border-color: var(--k-green, #1B5E20); }
html[data-skin="premium"] .ct .ct-ch span {
  background: #F1F8F2; color: #14562B; border-radius: 8px; padding: 4px 10px; font-size: 12.5px;
}

/* вложения */
html[data-skin="premium"] .ct .ct-att { border-radius: 10px; padding: 5px 8px; transition: background .15s; }
html[data-skin="premium"] .ct .ct-att:hover { background: #E8F2EA; }
html[data-skin="premium"] .ct .ct-att.is-set { background: #EAF7EE; border: 1px solid #C6E3CC; }

/* кнопка решения */
html[data-skin="premium"] .ct .ct-play {
  border-radius: 10px; font-weight: 600; padding: 7px 14px;
  background: linear-gradient(135deg, #F7FBFE, #EAF3FA);
  border: 1px solid #BFD9EC;
}
.ct .ct-play:hover { background: linear-gradient(135deg, var(--k-green, #1B5E20), #2E7D32);
  color: #fff; border-color: transparent; }

/* нижняя панель сохранения липнет к экрану */
html[data-skin="premium"] .ct .ct-actions--save {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 16px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border: 1px solid var(--k-line, #DCE5DC);
  box-shadow: 0 -6px 22px rgba(14,61,20,.08);
}

/* окно решения */
html[data-skin="premium"] .ct-modal__b { border-radius: 18px; box-shadow: 0 30px 70px rgba(10,30,15,.35); }
html[data-skin="premium"] .ct-opt { border-radius: 12px; transition: transform .1s, border-color .15s, background .15s; }
html[data-skin="premium"] .ct-opt:hover { transform: translateX(2px); border-color: var(--k-green, #1B5E20); background: #F4FBF5; }

@media (max-width: 620px) {
html[data-skin="premium"] .ct .ct-head { padding: 18px 16px; border-radius: 14px; }
html[data-skin="premium"] .ct .ct-head h1 { font-size: 21px; }
html[data-skin="premium"] .ct .ct-head::after { font-size: 56px; }
html[data-skin="premium"] .ct .ct-col { padding: 14px; }
}

[data-theme="dark"] .ct .ct-bar,
[data-theme="dark"] .ct .ct-col,
html[data-skin="premium"] [data-theme="dark"] .ct .ct-row { background: #1B262C; border-color: #2C3B33; }
html[data-skin="premium"] [data-theme="dark"] .ct .ct-drop { background: #16211A; border-color: #2C3B33; }
html[data-skin="premium"] [data-theme="dark"] .ct .ct-actions--save { background: rgba(22,33,26,.94); border-color: #2C3B33; }

/* ============================================================
   ЗОЛОТОЙ ВИД: изумруд и золото, как на присланных макетах
   Тёмно-зелёный фон, карточки цвета слоновой кости с золотой
   каймой, крупные золотые цифры. Действует только в этом режиме.
   ============================================================ */
html[data-skin="premium"] {
  --pr-green: #0F3D18;
  --pr-green-2: #14501F;
  --pr-gold: #C9A227;
  --pr-gold-2: #E7CF7A;
  --pr-ivory: #FBF7EA;
}
html[data-skin="premium"] body,
html[data-skin="premium"] body[class*="nx-w-"] {
  background:
    radial-gradient(90% 70% at 80% -10%, rgba(201,162,39,.14) 0%, transparent 60%),
    linear-gradient(180deg, #0F3D18 0%, #0B2E12 100%) !important;
  color: #F2EEDF;
}
html[data-skin="premium"] .topbar {
  background: linear-gradient(180deg, rgba(15,61,24,.98), rgba(11,46,18,.94));
  border-bottom: 1px solid rgba(201,162,39,.35);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
html[data-skin="premium"] .panel,
html[data-skin="premium"] .card,
html[data-skin="premium"] .stat,
html[data-skin="premium"] .cat-item,
html[data-skin="premium"] .dc-card,
html[data-skin="premium"] .ct-col,
html[data-skin="premium"] .ct-row,
html[data-skin="premium"] .ct-lib,
html[data-skin="premium"] .ct-meta,
html[data-skin="premium"] .mth-topic,
html[data-skin="premium"] .syl-row {
  background: linear-gradient(180deg, #FDFBF3 0%, var(--pr-ivory) 100%);
  border: 1px solid rgba(201,162,39,.42);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.8);
  color: #22301F;
}
html[data-skin="premium"] .stat .n,
html[data-skin="premium"] .dc-card b,
html[data-skin="premium"] .ct-stat b {
  background: linear-gradient(135deg, #B9902A, #E7CF7A 60%, #A97F1E);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
html[data-skin="premium"] h1,
html[data-skin="premium"] .page-head h1 { color: #F6EFD8; }
html[data-skin="premium"] .cat-h2,
html[data-skin="premium"] .mth-h2,
html[data-skin="premium"] .ct-h2,
html[data-skin="premium"] .dc-h2 { color: var(--pr-gold-2); }
html[data-skin="premium"] .btn,
html[data-skin="premium"] .ds-btn {
  border-radius: 12px; border: 1px solid rgba(201,162,39,.5);
  background: linear-gradient(180deg, #FDF6E0, #EFE0B4); color: #3A2E08; font-weight: 700;
}
html[data-skin="premium"] .btn-primary {
  background: linear-gradient(135deg, #C9A227, #A97F1E); color: #1B1502; border-color: #8E6C17;
}
html[data-skin="premium"] a { color: #E7CF7A; }
html[data-skin="premium"] .ct-head {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(201,162,39,.28) 0%, transparent 55%),
    linear-gradient(135deg, #14501F 0%, #0C3413 100%);
  border: 1px solid rgba(201,162,39,.4);
}
html[data-skin="premium"] .ct-in,
html[data-skin="premium"] .ct-paste,
html[data-skin="premium"] select {
  background: #FFFDF6; border-color: rgba(201,162,39,.45); color: #22301F;
}
html[data-skin="premium"] .ct-row.is-sel {
  border-color: var(--pr-gold); box-shadow: 0 0 0 3px rgba(201,162,39,.28);
}
html[data-skin="premium"] #ksat-bottomnav,
html[data-skin="premium"] .bottomnav {
  background: linear-gradient(180deg, rgba(15,61,24,.96), rgba(11,46,18,.98));
  border-top: 1px solid rgba(201,162,39,.35);
}


/* ============================================================
   ОБЪЁМНЫЙ ЦВЕТ ПРЕДМЕТА
   Фон, шапка и панель строятся из оттенков текущего предмета:
   глубокий снизу, средний сверху, световое пятно сбоку. Золото
   остаётся общим для всех — тонкими линиями и цифрами.
   ============================================================ */
html[data-skin="premium"] body,
html[data-skin="premium"] body[class*="nx-w-"],
html[data-skin="premium"] body[class*="nx-bg-"],
html[data-skin="premium"].ksat-env-theme body {
  background:
    radial-gradient(78% 52% at 84% -6%, rgba(201,162,39,.20) 0%, transparent 58%),
    radial-gradient(64% 44% at 6% 104%, var(--subj-glow, #2E7D32) 0%, transparent 62%),
    linear-gradient(180deg,
      var(--subj-mid, #14501F) 0%,
      var(--subj-dark, #0F3D18) 52%,
      var(--subj-deep, #08240C) 100%) !important;
}
html[data-skin="premium"] .topbar,
html[data-skin="premium"].ksat-env-theme .topbar {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--subj-mid, #14501F) 92%, #fff 8%) 0%,
      var(--subj-dark, #0F3D18) 100%) !important;
  border-bottom: 1px solid rgba(201,162,39,.40) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.30), inset 0 -1px 0 rgba(255,255,255,.06);
}

/* карточки: слоновая кость с оттенком предмета и объёмом */
html[data-skin="premium"] .panel,
html[data-skin="premium"] .card,
html[data-skin="premium"] .stat,
html[data-skin="premium"] .cat-item,
html[data-skin="premium"] .dc-card,
html[data-skin="premium"] .ct-col,
html[data-skin="premium"] .ct-row,
html[data-skin="premium"] .ct-lib,
html[data-skin="premium"] .ct-meta,
html[data-skin="premium"] .mth-topic,
html[data-skin="premium"] .syl-row {
  background:
    linear-gradient(180deg, #FFFDF6 0%, var(--subj-tint, #F6F2E4) 100%);
  border: 1px solid rgba(201,162,39,.42);
  border-radius: 16px;
  box-shadow:
    0 14px 30px rgba(0,0,0,.26),
    0 2px 0 rgba(255,255,255,.9) inset,
    0 -10px 24px rgba(0,0,0,.05) inset;
  color: #22301F;
}
html[data-skin="premium"] .stat,
html[data-skin="premium"] .dc-card { position: relative; overflow: hidden; }
html[data-skin="premium"] .stat::after,
html[data-skin="premium"] .dc-card::after {
  content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #C9A227, transparent);
}
/* блик по верхнему краю — тот самый объём */
html[data-skin="premium"] .panel::before,
html[data-skin="premium"] .stat::before,
html[data-skin="premium"] .cat-item::before {
  content: ''; position: absolute; inset: 1px 1px auto 1px; height: 42%;
  border-radius: 15px 15px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  pointer-events: none;
}
html[data-skin="premium"] .panel,
html[data-skin="premium"] .cat-item { position: relative; }

/* цифры и заголовки */
html[data-skin="premium"] .stat .n,
html[data-skin="premium"] .dc-card b,
html[data-skin="premium"] .ct-stat b {
  background: linear-gradient(135deg, #B9902A, #E7CF7A 55%, #A97F1E);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
html[data-skin="premium"] h1,
html[data-skin="premium"] .page-head h1 { color: #F8F2DE; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
html[data-skin="premium"] .cat-h2,
html[data-skin="premium"] .mth-h2,
html[data-skin="premium"] .ct-h2,
html[data-skin="premium"] .dc-h2 { color: #EEDFA8; }

/* кнопки с объёмом */
html[data-skin="premium"] .btn,
html[data-skin="premium"] .ds-btn {
  border-radius: 12px; border: 1px solid rgba(201,162,39,.55); font-weight: 700;
  background: linear-gradient(180deg, #FDF6E0, #EBD9A6);
  color: #3A2E08;
  box-shadow: 0 6px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.85);
}
html[data-skin="premium"] .btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
html[data-skin="premium"] .btn:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
html[data-skin="premium"] .btn-primary {
  background: linear-gradient(180deg, #E7CF7A, #C9A227 55%, #A97F1E);
  color: #2A2005; border-color: #8E6C17;
}
html[data-skin="premium"] a { color: #F0DFA4; }
html[data-skin="premium"] .ct-in,
html[data-skin="premium"] .ct-paste,
html[data-skin="premium"] select {
  background: #FFFDF6; border-color: rgba(201,162,39,.45); color: #22301F;
}

/* панель: те же оттенки предмета плюс золото */
html.side-gold .edu-side {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px),
    radial-gradient(70% 34% at 50% 0%, rgba(201,162,39,.22) 0%, transparent 62%),
    linear-gradient(180deg, var(--subj-mid, #12481D) 0%, var(--subj-deep, #07220B) 100%);
  border-right: 1px solid rgba(201,162,39,.35);
}
html.side-gold .edu-side__top { border-bottom: 1px solid rgba(201,162,39,.28); margin-bottom: 8px; }
html.side-gold .edu-side__ttl b { color: #F6EFD8; }
html.side-gold .edu-side__ttl span { color: rgba(231,207,122,.75); }
html.side-gold .edu-side__i { color: rgba(246,239,216,.86); }
html.side-gold .edu-side__i:hover { background: rgba(201,162,39,.14); color: #FFF6DA; }
html.side-gold .edu-side__i.is-on {
  font-weight: 700; color: #FFF6DA;
  background: linear-gradient(135deg, rgba(201,162,39,.34), rgba(201,162,39,.12));
  box-shadow: inset 0 0 0 1px rgba(231,207,122,.6), 0 0 18px rgba(201,162,39,.22);
}
html.side-gold .edu-side__logo { background: linear-gradient(135deg, #E7CF7A, #A97F1E); color: #2A2005; }
html.side-gold .edu-side__subj {
  border-color: rgba(231,207,122,.55);
  background: linear-gradient(135deg, rgba(201,162,39,.30), rgba(201,162,39,.10));
}
html.side-gold .edu-burger {
  background: linear-gradient(135deg, var(--subj-mid, #14501F), var(--subj-deep, #0B2E12));
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(201,162,39,.4);
}
html.side-gold .edu-burger span { background: #E7CF7A; }

html[data-skin="premium"] #ksat-bottomnav,
html[data-skin="premium"] .bottomnav {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--subj-mid, #14501F) 90%, #000 10%), var(--subj-deep, #0B2E12));
  border-top: 1px solid rgba(201,162,39,.35);
}

/* Золото — общая подпись центра: даже если предмет задаёт свой
   акцентный цвет, в этом режиме золотые детали остаются золотыми. */
html[data-skin="premium"] { --gold: #C9A227 !important; }