/* ПРОИГРОК · Конструктор прицелов v2 — стили (скоуп .csc-) */
#csc-root{
  --csc-bg:#232946; --csc-soft:#141a33; --csc-line:rgba(255,255,255,.15);
  --csc-text:#c3c9d6; --csc-head:#fff; --csc-pink:#FF1D61; --csc-cyan:#85ddff;
  margin-top:18px; color:var(--csc-text); font-size:14.5px; line-height:1.5;
}
.csc-grid{display:grid; gap:16px;}
@media (min-width:860px){ .csc-grid{grid-template-columns:1fr 1fr; align-items:start;} }
.csc-panel{background:var(--csc-bg); border:1px solid var(--csc-line); border-radius:14px; padding:18px;}

.csc-block{padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--csc-line);}
.csc-block:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0;}
.csc-block-h{font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--csc-cyan); font-weight:700; margin-bottom:12px;}

/* соотношение сторон — над превью */
.csc-aspect{display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.csc-aspect-lbl{font-size:13px; color:var(--csc-text);}

/* сегменты (стиль, соотношение) */
.csc-segrow{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.csc-seg{background:var(--csc-soft); border:1px solid var(--csc-line); color:var(--csc-text);
  border-radius:9px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
  transition:all .15s; font-family:inherit;}
.csc-seg:hover{border-color:var(--csc-cyan); color:var(--csc-head);}
.csc-seg.is-active{background:var(--csc-pink); border-color:var(--csc-pink); color:#fff;}

/* тумблеры — ВИДНО хорошо */
.csc-toggles{display:grid; gap:2px;}
.csc-toggle{display:flex; align-items:center; justify-content:space-between;
  padding:9px 0; cursor:pointer; gap:12px;}
.csc-toggle-txt{font-size:14px; color:var(--csc-text);}
.csc-switch{position:relative; flex:0 0 auto; width:42px; height:24px;}
.csc-switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.csc-slider{position:absolute; inset:0; background:var(--csc-soft);
  border:1px solid var(--csc-line); border-radius:99px; transition:.18s;}
.csc-slider::before{content:""; position:absolute; height:18px; width:18px; left:2px; top:2px;
  background:#9aa0c3; border-radius:50%; transition:.18s;}
.csc-switch input:checked + .csc-slider{background:var(--csc-pink); border-color:var(--csc-pink);}
.csc-switch input:checked + .csc-slider::before{transform:translateX(18px); background:#fff;}
.csc-switch input:focus-visible + .csc-slider{outline:2px solid var(--csc-cyan); outline-offset:2px;}

/* слайдеры */
.csc-row{margin-bottom:13px; transition:opacity .15s;}
.csc-row:last-child{margin-bottom:0;}
.csc-row--off{opacity:.32; pointer-events:none;}
.csc-label{display:flex; justify-content:space-between; font-size:13.5px; color:var(--csc-text); margin-bottom:6px;}
.csc-val{color:var(--csc-cyan); font-weight:700;}
.csc-range{width:100%; accent-color:var(--csc-pink); cursor:pointer; height:22px;}

/* цвет */
.csc-swatches{display:flex; gap:8px; flex-wrap:wrap;}
.csc-swatch{width:34px; height:34px; border-radius:9px; border:2px solid transparent;
  cursor:pointer; padding:0; position:relative;}
.csc-swatch.is-active{border-color:#fff; box-shadow:0 0 0 2px var(--csc-pink);}
.csc-swatch--custom{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);
  display:flex; overflow:hidden;}
.csc-swatch--custom input{opacity:0; width:100%; height:100%; cursor:pointer; border:0;}

/* динамика */
.csc-adv{margin-top:4px;}
.csc-adv summary{cursor:pointer; color:var(--csc-cyan); font-size:13px; padding:6px 0; list-style:none;}
.csc-adv summary::-webkit-details-marker{display:none;}
.csc-adv summary::before{content:"▸ "; }
.csc-adv[open] summary::before{content:"▾ "; }
.csc-adv--open{margin-top:0;}

/* вывод */
.csc-code-row,.csc-import-row{display:flex; gap:8px; margin-bottom:10px;}
.csc-input{flex:1; background:var(--csc-soft); color:var(--csc-head);
  border:1px solid var(--csc-line); border-radius:8px; padding:10px 12px;
  font-family:ui-monospace,Consolas,monospace; font-size:12.5px; min-width:0;}
.csc-input--code{font-weight:700; letter-spacing:.02em;}
.csc-convars{width:100%; background:var(--csc-soft); color:var(--csc-text);
  border:1px solid var(--csc-line); border-radius:8px; padding:10px;
  font-family:ui-monospace,Consolas,monospace; font-size:11.5px; resize:vertical; margin:8px 0;}
.csc-btn{background:transparent; color:var(--csc-text); border:1px solid var(--csc-line);
  border-radius:8px; padding:10px 16px; font-size:13px; font-weight:700; cursor:pointer;
  transition:all .15s; white-space:nowrap; font-family:inherit;}
.csc-btn:hover{border-color:var(--csc-cyan); color:var(--csc-head);}
.csc-btn--pink{background:var(--csc-pink); color:#fff; border-color:var(--csc-pink);
  box-shadow:0 5px 14px rgba(255,29,97,.28);}
.csc-btn--pink:hover{transform:translateY(-1px); color:#fff;}
.csc-err{color:#ff5d5d; font-size:12.5px; margin:0;}

/* пресеты */
.csc-chiprow{display:flex; gap:8px; flex-wrap:wrap;}
.csc-chip{background:var(--csc-soft); border:1px solid var(--csc-line); color:var(--csc-text);
  border-radius:99px; padding:8px 15px; font-size:13px; cursor:pointer;
  transition:all .15s; text-decoration:none; font-family:inherit;}
.csc-chip:hover{border-color:var(--csc-pink); color:var(--csc-head);}
.csc-chip--link{color:var(--csc-cyan);}

@media (max-width:600px){
  .csc-code-row,.csc-import-row{flex-direction:column;}
}