/* ПРОИГРОК · Конструктор прицелов — стили (скоуп .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:820px){ .csc-grid{grid-template-columns:1.1fr .9fr;} }
.csc-panel{background:var(--csc-bg); border:1px solid var(--csc-line); border-radius:14px; padding:18px;}
.csc-h{margin:0 0 12px; font-size:15px; font-weight:700; color:var(--csc-head); text-transform:none; letter-spacing:0;}
.csc-h + .csc-h{margin-top:18px;}

/* контролы */
.csc-row{margin-bottom:12px; transition:opacity .15s;}
.csc-row--off{opacity:.35; pointer-events:none;}
.csc-label{display:flex; justify-content:space-between; font-size:13px; color:var(--csc-text); margin-bottom:5px;}
.csc-val{color:var(--csc-cyan); font-weight:700;}
.csc-range{width:100%; accent-color:var(--csc-pink); cursor:pointer;}
.csc-check{display:flex; align-items:center; gap:8px; font-size:13.5px; cursor:pointer;}
.csc-check input{accent-color:var(--csc-pink); width:16px; height:16px;}
.csc-select{width:100%; background:var(--csc-soft); color:var(--csc-text);
  border:1px solid var(--csc-line); border-radius:8px; padding:8px 10px; font-size:13.5px;}
.csc-adv{margin-top:6px; border-top:1px dashed var(--csc-line); padding-top:10px;}
.csc-adv summary{cursor:pointer; color:var(--csc-cyan); font-size:13px; margin-bottom:10px;}

/* цвет */
.csc-swatches{display:flex; gap:8px; flex-wrap:wrap;}
.csc-swatch{width:30px; height:30px; border-radius:8px; 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; align-items:center; justify-content:center; overflow:hidden;}
.csc-swatch--custom input{opacity:0; width:100%; height:100%; cursor:pointer;}

/* вывод */
.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:9px 11px;
  font-family:ui-monospace,Consolas,monospace; font-size:12.5px; min-width:0;}
.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:12px; resize:vertical; margin-bottom:8px;}
.csc-btn{background:transparent; color:var(--csc-text); border:1px solid var(--csc-line);
  border-radius:8px; padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer;
  transition:border-color .15s,color .15s; white-space:nowrap;}
.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{border-color:var(--csc-pink); color:#fff; transform:translateY(-1px);}
.csc-err{color:#ff5d5d; font-size:12.5px; margin:0 0 8px;}

/* пресеты */
.csc-presets{margin-top:16px; background:var(--csc-bg); border:1px solid var(--csc-line);
  border-radius:14px; padding:18px;}
.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:7px 14px; font-size:13px; cursor:pointer;
  transition:border-color .15s,color .15s; text-decoration:none;}
.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;}
}