/* Kharin configurator — собранный файл, правим исходник в configurator/src */
/* Новый сайт-кастомайзер конструктора — тёмная тема сайта. */
:root { --bg:#14121a; --bg-2:#1c1922; --bg-3:#241f2e; --line:#37313f; --text:#e9e6f0; --muted:#a49fb3; --accent:#b39ddb; --accent-2:#8a72b0; }

body[data-mode="custom"] { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 "Segoe UI", system-ui, sans-serif; }
/* Страница открывается внутри общей оболочки сайта (base.html) — на всю ширину. */
body[data-mode="custom"] .page-shell { padding:0; }
body[data-mode="custom"] .page-shell > .container { max-width:none; padding:0; }

.kc-bar { display:flex; align-items:center; gap:14px; padding:10px 16px; background:var(--bg-2); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.kc-back { color:var(--accent); text-decoration:none; }
.kc-title { font-weight:600; }
.kc-file { cursor:pointer; padding:7px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg-3); }
.kc-btn { padding:8px 16px; border:1px solid var(--accent-2); border-radius:8px; background:var(--accent-2); color:#14121a; font-weight:600; cursor:pointer; }
.kc-status { color:var(--muted); margin-left:auto; }

.kc-grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:14px; padding:12px; }
.kc-stage { width:min(440px,92vw); aspect-ratio:3 / 4; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; overflow:hidden; position:relative; }
.kc-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(20,18,26,.72); color:var(--text); font-size:15px; letter-spacing:.02em; z-index:2; }
.kc-mode-badge { align-self:center; padding:5px 12px; border:1px solid var(--accent-2); border-radius:999px; color:var(--accent); font-weight:600; font-size:12.5px; }
.kc-loading::before { content:''; width:22px; height:22px; margin-right:10px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:var(--accent); animation:kc-spin .8s linear infinite; }
@keyframes kc-spin { to { transform:rotate(360deg); } }
.kc-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,9,13,.6); z-index:50; }
.kc-modal[hidden] { display:none; }
.kc-modal-card { width:340px; max-width:92vw; max-height:90vh; overflow:auto; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; }
.kc-modal-title { font-weight:700; font-size:16px; }
.kc-modal-img { width:100%; height:320px; object-fit:contain; background:#0f0d14; border-radius:10px; }
.kc-modal-text { color:var(--muted); font-size:13px; line-height:1.45; margin:0; }
.kc-right { width:min(440px,92vw); aspect-ratio:3 / 4; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; overflow:auto; padding:8px; display:flex; flex-direction:column; align-items:stretch; justify-content:center; }
.kc-atlas { width:100%; height:auto; max-width:100%; background:#14121a; border-radius:8px; }

.kc-controls { display:flex; flex-wrap:wrap; gap:14px; padding:10px 16px; background:var(--bg-2); border-top:1px solid var(--line); }
.kc-controls label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12.5px; }
.kc-controls input[type=range] { accent-color:var(--accent-2); }
.kc-controls output { color:var(--text); }

.kc-start { display:grid; grid-template-columns:repeat(auto-fill, 220px); justify-content:start; gap:14px; padding:20px; }
.kc-tile { display:flex; flex-direction:column; gap:8px; padding:12px; background:var(--bg-3); border:1px solid var(--line); border-radius:12px; color:var(--text); text-decoration:none; }
.kc-tile:hover { border-color:var(--accent); }
.kc-tile-name { font-size:17px; font-weight:600; }
.kc-tile-img { width:100%; height:170px; object-fit:contain; border-radius:8px; background:#0f0d14; display:block; }
.kc-tile small { color:var(--muted); }

.kc-mine { padding:16px 20px 0; }
.kc-mine-card { display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--bg-3); border:1px solid var(--accent); border-radius:10px; }
.kc-mine-card small { color:var(--muted); }
.kc-mine-card .kc-btn { margin-left:auto; text-decoration:none; }

.kc-btn.ghost { background:transparent; color:var(--text); border-color:var(--line); font-weight:500; }
.kc-btn.primary { background:var(--accent); border-color:var(--accent); }
.kc-btn:disabled { opacity:.5; cursor:not-allowed; }
.kc-tray-title { color:var(--muted); font-size:12.5px; margin:0 0 8px 4px; flex:0 0 auto; }
.kc-atlas { cursor:grab; touch-action:none; }
.kc-controls select { background:var(--bg-3); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:4px 6px; }
.kc-check { gap:6px; }
.kc-check input { accent-color:var(--accent-2); }

@media (max-width: 960px) {
  .kc-grid { padding:8px; gap:10px; }
}

@media (orientation: portrait) and (max-width: 1024px) {
  .kc-grid { flex-direction: column; align-items: center; }
  .kc-right { order: 1; }   /* развёртка сверху */
  .kc-stage { order: 2; }   /* превью с машинкой — внизу */
}

@media (max-width: 720px) {
  .kc-bar { gap:8px 10px; padding:10px 12px; }
  .kc-title { flex:1 1 auto; min-width:0; }
  .kc-status { flex:1 1 100%; margin-left:0; order:9; }
  .kc-btn, .kc-file { padding:7px 11px; font-size:13px; }
}

/* Запас сверху, чтобы плавающая кнопка меню не накрывала строку кастомизации. */
@media (max-width: 767.98px),
       (min-width: 992px) and (max-width: 1400px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  body[data-mode="custom"] .page-shell { padding-top: 4rem; }
}
@media (max-width: 575.98px) {
  body[data-mode="custom"] .page-shell { padding-top: 3.5rem; }
}