:root{
  --nc-green:#b6ffbf;
  --nc-green2:#2dff86;
  --nc-bg:#06110b;
  --nc-panel:#071a10;
  --nc-panel2:#0a2416;
  --nc-line:#18462d;
  --nc-warn:#ffd46a;
  --nc-err:#ff6a6a;
}

.afexkidz-noisechord{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  color:var(--nc-green);
  background:linear-gradient(180deg, #041008 0%, #030a06 100%);
  border:1px solid var(--nc-line);
  border-radius:14px;
  padding:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.afexkidz-noisechord *{box-sizing:border-box;}
.afexkidz-noisechord::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(45,255,134,.10), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(182,255,191,.06), transparent 55%);
}

/* TOPBAR */
.afexkidz-nc-topbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:8px 10px;
  background:rgba(7,26,16,.8);
  border:1px solid var(--nc-line);
  border-radius:12px;
}
.afexkidz-nc-btns{display:flex; gap:8px; flex-wrap:wrap;}
.afexkidz-nc-btn{
  appearance:none;
  border:1px solid var(--nc-line);
  background:linear-gradient(180deg, rgba(11,40,25,.95), rgba(6,18,11,.95));
  color:var(--nc-green);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(182,255,191,.08);
}
.afexkidz-nc-btn:hover{border-color:rgba(182,255,191,.55);}
.afexkidz-nc-btn:active{transform:translateY(1px);}
.afexkidz-nc-btn.danger{border-color:rgba(255,106,106,.45); color:#ffd0d0;}
.afexkidz-nc-btn.small{padding:7px 10px; border-radius:10px;}

.afexkidz-nc-leds{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.afexkidz-nc-led{display:inline-flex; gap:7px; align-items:center; font-size:12px; opacity:.9;}
.afexkidz-nc-led i{width:9px; height:9px; border-radius:2px; display:inline-block; background:#103621; box-shadow:0 0 0 1px rgba(182,255,191,.18) inset;}
.afexkidz-nc-led.is-on i{background:var(--nc-green2); box-shadow:0 0 12px rgba(45,255,134,.55);}

.afexkidz-nc-status{display:flex; gap:10px; align-items:center; font-size:12px; flex-wrap:wrap;}
.afexkidz-nc-status-label{opacity:.75;}
.afexkidz-nc-status-val{padding:3px 8px; border:1px solid var(--nc-line); border-radius:999px; background:rgba(0,0,0,.25);}
.afexkidz-nc-status-val.ok{border-color:rgba(45,255,134,.45);}
.afexkidz-nc-status-val.warn{border-color:rgba(255,212,106,.45); color:var(--nc-warn);}
.afexkidz-nc-status-val.err{border-color:rgba(255,106,106,.5); color:var(--nc-err);}
.afexkidz-nc-status-val.panic{border-color:rgba(255,106,106,.7); color:#ffd0d0; background:rgba(60,0,0,.25);}
.afexkidz-nc-armed{padding:3px 8px; border:1px dashed var(--nc-line); border-radius:999px; opacity:.75;}
.afexkidz-nc-armed.is-armed{opacity:1; border-style:solid; border-color:rgba(45,255,134,.45);}

/* CRT */
.afexkidz-nc-crt{margin-top:10px; background:rgba(7,26,16,.78); border:1px solid var(--nc-line); border-radius:14px; padding:10px; position:relative;}
.afexkidz-nc-canvas{width:100%; height:420px; display:block; border-radius:12px; border:1px solid rgba(24,70,45,.75); background:#07150e;}
@media (max-width:720px){ .afexkidz-nc-canvas{height:360px;} }

.afexkidz-nc-readouts{margin-top:10px; display:flex; flex-direction:column; gap:8px;}
.afexkidz-nc-readout-line{padding:8px 10px; border:1px solid rgba(24,70,45,.85); border-radius:12px; background:rgba(0,0,0,.25); box-shadow:inset 0 0 0 1px rgba(182,255,191,.06);}
.afexkidz-nc-readout-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px;}
@media (max-width:720px){ .afexkidz-nc-readout-grid{grid-template-columns:1fr;} }
.afexkidz-nc-readout{padding:7px 10px; border:1px solid rgba(24,70,45,.75); border-radius:12px; background:rgba(0,0,0,.18); font-size:12px; opacity:.95;}

/* PRESETS */
.afexkidz-nc-presets{margin-top:10px; background:rgba(7,26,16,.7); border:1px solid var(--nc-line); border-radius:14px; padding:10px;}
.afexkidz-nc-preset-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.afexkidz-nc-chip{appearance:none; border:1px solid rgba(24,70,45,.9); background:rgba(0,0,0,.25); color:var(--nc-green); padding:7px 10px; border-radius:999px; cursor:pointer; font-size:12px;}
.afexkidz-nc-chip.is-active{border-color:rgba(45,255,134,.55); box-shadow:0 0 0 1px rgba(45,255,134,.12) inset;}
.afexkidz-nc-preset-list{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px;}
@media (max-width:980px){ .afexkidz-nc-preset-list{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:560px){ .afexkidz-nc-preset-list{grid-template-columns:1fr;} }
.afexkidz-nc-preset{appearance:none; text-align:left; border:1px solid rgba(24,70,45,.9); background:linear-gradient(180deg, rgba(10,36,22,.75), rgba(5,15,10,.75)); color:var(--nc-green); padding:10px; border-radius:12px; cursor:pointer;}
.afexkidz-nc-preset:hover{border-color:rgba(182,255,191,.55);}
.afexkidz-nc-preset.is-active{border-color:rgba(45,255,134,.55); box-shadow:0 0 0 1px rgba(45,255,134,.12) inset;}
.afexkidz-nc-preset .nm{font-size:13px; letter-spacing:.02em;}
.afexkidz-nc-preset .ht{font-size:11px; opacity:.8; margin-top:4px;}

/* MAIN */
.afexkidz-nc-main{margin-top:10px; display:flex; flex-direction:column; gap:10px;}
.afexkidz-nc-section{background:rgba(7,26,16,.65); border:1px solid var(--nc-line); border-radius:14px; padding:10px;}
.afexkidz-nc-section-title{font-size:12px; letter-spacing:.08em; opacity:.85; margin-bottom:10px;}

.afexkidz-nc-peaks{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px;}
@media (max-width:1100px){ .afexkidz-nc-peaks{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:720px){ .afexkidz-nc-peaks{grid-template-columns:1fr;} }

.afexkidz-nc-fx{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;}
@media (max-width:1100px){ .afexkidz-nc-fx{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:720px){ .afexkidz-nc-fx{grid-template-columns:1fr;} }

.afexkidz-nc-arp{display:block;}

/* CARDS */
.afexkidz-nc-card{
  border:1px solid rgba(24,70,45,.85);
  border-radius:14px;
  background:rgba(0,0,0,.20);
  padding:10px;
  box-shadow:inset 0 0 0 1px rgba(182,255,191,.05);
}
.afexkidz-nc-card .head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.afexkidz-nc-card .title{font-size:12px; letter-spacing:.08em; opacity:.9;}
.afexkidz-nc-card .grid{display:grid; grid-template-columns:1fr; gap:6px;}

/* ✅ ГЛАВНЫЙ ФИКС: расстояние "LABEL____slider" */
.afexkidz-nc-card .row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 56px 22px; /* меньше левый столбец + компактнее */
  gap:6px;                                            /* меньше пустота */
  align-items:center;
}
.afexkidz-nc-card .row.big{
  grid-template-columns:48px minmax(0,1fr) 56px 22px;
}
.afexkidz-nc-card.arp .row{
  grid-template-columns:66px minmax(0,1fr) 56px 22px;
}

.afexkidz-nc-card .lab{
  font-size:11px;
  opacity:.85;
  padding-left:6px;        /* чтобы не “жрало” первую букву */
  white-space:nowrap;
}
.afexkidz-nc-card .val{
  font-size:11px;
  text-align:right;
  opacity:.95;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.afexkidz-nc-card .val.ghost{opacity:.2;}
.afexkidz-nc-card .unit{font-size:11px; opacity:.6; white-space:nowrap;}

.afexkidz-nc-card input,
.afexkidz-nc-card select{margin:0;}

.afexkidz-nc-card input.rng{
  width:100%;
  min-width:0;
  justify-self:stretch;
}

/* ✅ чтобы range выглядел как range (а не "будто его нет") */
.afexkidz-nc-card input[type="range"].rng{
  -webkit-appearance:none;
  appearance:none;
  height:18px;
  background:transparent;
}
.afexkidz-nc-card input[type="range"].rng::-webkit-slider-runnable-track{
  height:5px;
  border-radius:999px;
  background:rgba(182,255,191,.22);
  border:1px solid rgba(24,70,45,.75);
}
.afexkidz-nc-card input[type="range"].rng::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:999px;
  background:var(--nc-green2);
  border:1px solid rgba(0,0,0,.55);
  box-shadow:0 0 10px rgba(45,255,134,.25);
  margin-top:-5px;
}
.afexkidz-nc-card input[type="range"].rng::-moz-range-track{
  height:5px;
  border-radius:999px;
  background:rgba(182,255,191,.22);
  border:1px solid rgba(24,70,45,.75);
}
.afexkidz-nc-card input[type="range"].rng::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:999px;
  background:var(--nc-green2);
  border:1px solid rgba(0,0,0,.55);
}

.afexkidz-nc-card select.sel{
  width:100%;
  min-width:0;
  background:rgba(0,0,0,.35);
  color:var(--nc-green);
  border:1px solid rgba(24,70,45,.75);
  border-radius:10px;
  padding:6px 8px;
}

.afexkidz-nc-card .tog{display:flex; gap:6px; align-items:center; font-size:11px; opacity:.9; cursor:pointer;}
.afexkidz-nc-card .tog input{accent-color:var(--nc-green2);}
.afexkidz-nc-card .mini{margin-top:8px; padding:6px 8px; border:1px dashed rgba(24,70,45,.6); border-radius:12px; background:rgba(0,0,0,.14); font-size:11px; opacity:.85;}

.afexkidz-nc-card.peak .lamp{width:10px; height:10px; border-radius:2px; background:#103621; border:1px solid rgba(182,255,191,.18); box-shadow:inset 0 0 0 1px rgba(182,255,191,.08);}
.afexkidz-nc-card.peak .lamp.is-on{background:var(--nc-green2); box-shadow:0 0 12px rgba(45,255,134,.55);}

/* PADS */
.afexkidz-nc-pads{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px;}
@media (max-width:980px){ .afexkidz-nc-pads{grid-template-columns:repeat(4, minmax(0,1fr));} }
@media (max-width:560px){ .afexkidz-nc-pads{grid-template-columns:repeat(3, minmax(0,1fr));} }
.afexkidz-nc-pad{appearance:none; border:1px solid rgba(24,70,45,.9); background:linear-gradient(180deg, rgba(10,36,22,.85), rgba(5,15,10,.85)); color:var(--nc-green); border-radius:14px; padding:16px 10px; cursor:pointer; min-height:64px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; box-shadow:inset 0 0 0 1px rgba(182,255,191,.06);}
.afexkidz-nc-pad .n{font-size:16px; letter-spacing:.08em;}
.afexkidz-nc-pad .k{font-size:11px; opacity:.75;}
.afexkidz-nc-pad:hover{border-color:rgba(182,255,191,.55);}
.afexkidz-nc-pad.is-on{border-color:rgba(45,255,134,.65); box-shadow:0 0 0 1px rgba(45,255,134,.15) inset, 0 0 18px rgba(45,255,134,.12);}
.afexkidz-nc-pad.is-step{outline:2px solid rgba(255,212,106,.55);}

.afexkidz-nc-hintline{margin-top:10px; font-size:11px; opacity:.8; padding:8px 10px; border-radius:12px; border:1px dashed rgba(24,70,45,.6); background:rgba(0,0,0,.12);}

/* overlay */
.afexkidz-nc-crt-overlay{position:absolute; inset:10px; border-radius:14px; border:1px solid rgba(182,255,191,.28); background:rgba(0,0,0,.72); backdrop-filter: blur(2px); display:flex; align-items:center; justify-content:center; padding:12px;}
.afexkidz-nc-overlay-inner{max-width:680px; width:100%; background:rgba(7,26,16,.85); border:1px solid rgba(24,70,45,.85); border-radius:14px; padding:12px;}
.afexkidz-nc-overlay-title{font-size:14px; letter-spacing:.12em; margin-bottom:8px;}
.afexkidz-nc-overlay-body{font-size:12px; opacity:.92; line-height:1.45;}
.afexkidz-nc-overlay-body .lst{margin:8px 0 10px 18px;}
.afexkidz-nc-overlay-body .p{margin:6px 0;}
.afexkidz-nc-overlay-body .err{color:var(--nc-err);}

.afexkidz-noisechord ::-webkit-scrollbar{height:8px;width:8px;}
.afexkidz-noisechord ::-webkit-scrollbar-thumb{background:rgba(45,255,134,.35); border-radius:10px;}

.afexkidz-noisechord [hidden]{display:none !important;}

.afexkidz-noisechord .afexkidz-nc-fatal{margin-top:10px;padding:10px;border:1px solid rgba(255,106,106,.55);border-radius:12px;background:rgba(60,0,0,.22);color:#ffd0d0;font-size:12px;}

/* ✅ УБИРАЕМ БЕЙДЖ "NC" НАХУЙ */
.afexkidz-noisechord .afexkidz-nc-badge{display:none !important;}

/* MOBILE: ещё компактнее */
@media (max-width:560px){
  .afexkidz-nc-card .row{
    grid-template-columns:44px minmax(0,1fr) 56px 20px;
    gap:6px;
  }
  .afexkidz-nc-card.arp .row{
    grid-template-columns:60px minmax(0,1fr) 56px 20px;
  }
}
/* ============================
   AfexKidz NoiseChord — Cosmo CRT Skin
   Черный экран, зелёная спектра, синие панели, ретро-дымка
   ============================ */

/* 1) Палитра (можно крутить) */
[data-afexkidz-noisechord="1"]{
  --nc-bg: #070a10;          /* общий фон */
  --nc-panel: #0b1020;       /* панели/блоки */
  --nc-panel2:#0f1b33;       /* акценты панелей */
  --nc-border:#1c2f55;       /* рамки */
  --nc-text: #c8d6ff;        /* основной текст */
  --nc-text-dim:#7f94c9;     /* вторичный текст */
  --nc-blue:#4ea1ff;         /* светлый синий акцент */
  --nc-blue2:#2f6bdc;        /* второй синий */
  --nc-green:#38ff86;        /* зелёная “спектра/CRT” */
  --nc-green-dim:#1fbf65;
  --nc-warn:#ffb86b;
  --nc-err:#ff5c7a;
}

/* 2) Глобально перекрашиваем “неон зелень” в холодный синий */
[data-afexkidz-noisechord="1"]{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(78,161,255,.10), transparent 60%),
              radial-gradient(900px 500px at 80% 15%, rgba(47,107,220,.10), transparent 55%),
              var(--nc-bg);
  color: var(--nc-text);
}

/* Если у тебя есть общие “карточки/модули” — подхватится */
[data-afexkidz-noisechord="1"] .afexkidz-nc-card,
[data-afexkidz-noisechord="1"] .afexkidz-nc-panel,
[data-afexkidz-noisechord="1"] .afexkidz-nc-box{
  background: linear-gradient(180deg, rgba(15,27,51,.92), rgba(11,16,32,.92));
  border: 1px solid rgba(28,47,85,.85);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  border-radius: 14px;
}

/* Линии/разделители */
[data-afexkidz-noisechord="1"] hr,
[data-afexkidz-noisechord="1"] .afexkidz-nc-divider{
  border-color: rgba(28,47,85,.55);
}

/* 3) Кнопки: синий металл + мягкий неон */
[data-afexkidz-noisechord="1"] .afexkidz-nc-btn{
  background: linear-gradient(180deg, rgba(20,35,70,.95), rgba(11,18,40,.95));
  color: var(--nc-text);
  border: 1px solid rgba(78,161,255,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  text-shadow: 0 0 10px rgba(78,161,255,.15);
}
[data-afexkidz-noisechord="1"] .afexkidz-nc-btn:hover{
  border-color: rgba(78,161,255,.65);
  box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 18px rgba(78,161,255,.18);
}
[data-afexkidz-noisechord="1"] .afexkidz-nc-btn[data-act="panic"]{
  border-color: rgba(255,92,122,.55);
  box-shadow: 0 10px 28px rgba(255,92,122,.10);
}

/* Чипы/табы */
[data-afexkidz-noisechord="1"] .afexkidz-nc-chip{
  background: rgba(11,16,32,.75);
  border: 1px solid rgba(28,47,85,.75);
  color: var(--nc-text-dim);
}
[data-afexkidz-noisechord="1"] .afexkidz-nc-chip.is-active{
  color: var(--nc-text);
  border-color: rgba(78,161,255,.75);
  box-shadow: 0 0 14px rgba(78,161,255,.18);
}

/* 4) Ползунки/инпуты */
[data-afexkidz-noisechord="1"] input,
[data-afexkidz-noisechord="1"] select{
  background: rgba(7,10,16,.75);
  color: var(--nc-text);
  border: 1px solid rgba(28,47,85,.75);
  outline: none;
}
[data-afexkidz-noisechord="1"] input:focus,
[data-afexkidz-noisechord="1"] select:focus{
  border-color: rgba(78,161,255,.75);
  box-shadow: 0 0 0 3px rgba(78,161,255,.15);
}

/* 5) Пэды: синий, а активный — зелёный “CRT” */
[data-afexkidz-noisechord="1"] .afexkidz-nc-pad{
  background: linear-gradient(180deg, rgba(15,27,51,.95), rgba(8,12,22,.95));
  border: 1px solid rgba(28,47,85,.85);
  color: var(--nc-text-dim);
}
[data-afexkidz-noisechord="1"] .afexkidz-nc-pad.is-on{
  border-color: rgba(56,255,134,.55);
  color: var(--nc-green);
  box-shadow: 0 0 14px rgba(56,255,134,.20), inset 0 0 18px rgba(56,255,134,.10);
}
[data-afexkidz-noisechord="1"] .afexkidz-nc-pad.is-step{
  box-shadow: 0 0 0 2px rgba(78,161,255,.55), 0 0 18px rgba(78,161,255,.18);
}

/* 6) LED-индикаторы */
[data-afexkidz-noisechord="1"] [data-led]{
  border-color: rgba(28,47,85,.75);
}
[data-afexkidz-noisechord="1"] [data-led].is-on{
  box-shadow: 0 0 16px rgba(78,161,255,.18);
}
[data-afexkidz-noisechord="1"] [data-led="audio"].is-on{
  box-shadow: 0 0 18px rgba(56,255,134,.20);
}

/* 7) CRT экран (canvas) — чёрный, ретро, дымка, сканлайны */
[data-afexkidz-noisechord="1"] canvas.afexkidz-nc-canvas{
  background: #000;
  border-radius: 16px;
  border: 1px solid rgba(28,47,85,.75);
  box-shadow:
    0 18px 40px rgba(0,0,0,.75),
    inset 0 0 80px rgba(0,0,0,.75);
  /* ВАЖНО: фильтром делаем “зелёную спектру”,
     если JS рисует зелёным — оно останется зелёным, станет “CRT-ядовитее” */
  filter: contrast(1.22) saturate(1.2) brightness(1.05);
}

/* Обёртка экрана: добавим ретро слои поверх.
   Если у тебя есть контейнер вокруг canvas — повесь на него класс/селектор.
   Я использую самый безопасный: сам canvas + псевдоэлементы через wrapper.
   Если wrapper нет — см. ниже альтернативу. */
[data-afexkidz-noisechord="1"] .afexkidz-nc-crt{
  position: relative;
  isolation: isolate;
  border-radius: 16px;
}

/* Сканлайны */
[data-afexkidz-noisechord="1"] .afexkidz-nc-crt::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 16px;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: overlay;
  opacity: .22;
}

/* Дымка/блик/виньетка + лёгкий шум */
[data-afexkidz-noisechord="1"] .afexkidz-nc-crt::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 16px;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 30% 15%, rgba(78,161,255,.10), transparent 55%),
    radial-gradient(800px 480px at 70% 18%, rgba(56,255,134,.06), transparent 60%),
    radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.58));
  opacity: .85;
  mix-blend-mode: screen;
  filter: blur(.2px);
}

/* “дрожание CRT” очень мягко */
@media (prefers-reduced-motion: no-preference){
  [data-afexkidz-noisechord="1"] .afexkidz-nc-crt{
    animation: ncCrtBreathe 5.6s ease-in-out infinite;
  }
  @keyframes ncCrtBreathe{
    0%,100%{ filter: brightness(1) }
    50%{ filter: brightness(1.04) }
  }
}

/* 8) Оверлей (если у тебя уже есть .afexkidz-nc-crt-overlay — подкрасим) */
[data-afexkidz-noisechord="1"] .afexkidz-nc-crt-overlay{
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(28,47,85,.75);
}
[data-afexkidz-noisechord="1"] .afexkidz-nc-crt-overlay .p,
[data-afexkidz-noisechord="1"] .afexkidz-nc-crt-overlay .lst{
  color: var(--nc-text);
}

/* 9) Числа/подписи — делаем “fallout-ish” холодными */
[data-afexkidz-noisechord="1"] [data-val],
[data-afexkidz-noisechord="1"] .afexkidz-nc-mini{
  color: var(--nc-text);
}
[data-afexkidz-noisechord="1"] .afexkidz-nc-mini{
  opacity: .92;
}