/* neon-8831-generator-pro.css */
/* Allowed palette only: #f66399 (pink), #55ffff (blue), white, black. NO grays. */

.ntgpro{
  --pink:#f66399;
  --blue:#55ffff;
  --white:#ffffff;
  --black:#000000;

  --c1:var(--pink);
  --c2:var(--blue);

  --size:72px;
  --spacing:2px;

  --glow:0.70;
  --blur:0.40;
  --tube:0.55;
  --outline:0.55;
  --split:0.35;
  --bloom:0.70;
  --flickerInt:0.55;

  --angle:90deg;

  --pulseSpeed:4s;
  --driftSpeed:5s;
  --shimmerSpeed:4s;
  --breatheSpeed:5s;

  --stageBg: var(--white);

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ntgpro__wrap{
  background:var(--pink);
  border-radius:18px;
  padding:16px;
  box-shadow:0 0 0 3px var(--black);
}
.ntgpro__wrap *{box-sizing:border-box;}

.ntgpro__wrap{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:14px;
}
@media (max-width:860px){
  .ntgpro__wrap{grid-template-columns:1fr;}
}

.ntgpro__panel{
  background:var(--white);
  border-radius:16px;
  padding:14px;
  box-shadow:0 0 0 3px var(--black);
}

/* Left header (no black slab) */
.ntgpro__title{
  font-weight:950;
  letter-spacing:.6px;
  color:var(--black);
  background:var(--white);
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  box-shadow:0 0 0 3px var(--blue);
  margin-bottom:12px;
}

.ntgpro__label{
  display:block;
  color:var(--black);
  font-weight:950;
  letter-spacing:.35px;
  margin:10px 0 6px;
}

.ntgpro__input{
  width:100%;
  background:var(--white);
  color:var(--black);
  border:3px solid var(--black);
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  outline:none;
  caret-color:var(--blue);
}
.ntgpro__input:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px var(--blue);
}

/* Wide dropdowns */
.ntgpro__select{
  width:100%;
  min-width:100%;
  background:var(--white);
  color:var(--black);
  border:3px solid var(--black);
  border-radius:12px;
  padding:10px 44px 10px 12px;
  font-weight:950;
  letter-spacing:.25px;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pink) 50%),
    linear-gradient(135deg, var(--pink) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 4px),
    calc(100% - 14px) calc(50% - 4px);
  background-size:8px 8px, 8px 8px;
  background-repeat:no-repeat;
}
.ntgpro__select:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px var(--blue);
}

.ntgpro__row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}
.ntgpro__row--2{grid-template-columns:1fr 1fr;}
.ntgpro__col{min-width:0;}

/* Color controls (vanilla) */
.ntgpro__colorWrap{
  display:flex;
  gap:10px;
  align-items:center;
}
.ntgpro__colorSwatch{
  width:46px;
  height:44px;
  padding:0;
  border-radius:12px;
  border:3px solid var(--black);
  background:var(--white);
  cursor:pointer;
}
.ntgpro__colorText{
  flex:1;
  min-width:0;
  background:var(--white);
  color:var(--black);
  border:3px solid var(--black);
  border-radius:12px;
  padding:10px 12px;
  font-weight:950;
  outline:none;
}
.ntgpro__colorText:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px var(--blue);
}

/* Toggle row */
.ntgpro__toggleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  border:3px solid var(--black);
  background:var(--white);
}
.ntgpro__toggleLabel{
  color:var(--black);
  font-weight:950;
  letter-spacing:.25px;
}

/* Switch (no gray) */
.ntgpro__switch{position:relative;width:54px;height:30px;display:inline-block;}
.ntgpro__switch input{display:none;}
.ntgpro__slider{
  position:absolute; inset:0;
  border-radius:999px;
  background:var(--black);
  box-shadow:0 0 0 3px var(--blue);
  cursor:pointer;
  transition:all 180ms ease;
}
.ntgpro__slider::before{
  content:"";
  position:absolute;
  width:22px;height:22px;left:4px;top:4px;
  border-radius:999px;
  background:var(--pink);
  box-shadow:0 0 0 3px var(--white);
  transition:all 180ms ease;
}
.ntgpro__switch input:checked + .ntgpro__slider{
  background:linear-gradient(90deg,var(--pink),var(--blue));
  box-shadow:0 0 0 3px var(--black);
}
.ntgpro__switch input:checked + .ntgpro__slider::before{
  transform:translateX(24px);
  background:var(--white);
  box-shadow:0 0 0 3px var(--black);
}

/* Sliders (NO GRAY) */
.ntgpro__range{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:30px;
  background:transparent;
  outline:none;
  margin:0;
}
.ntgpro__range::-webkit-slider-runnable-track{
  height:10px;border-radius:999px;
  background:linear-gradient(90deg,var(--pink),var(--blue));
  box-shadow:0 0 0 3px var(--black);
}
.ntgpro__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-6px;
  border-radius:999px;
  background:var(--black);
  box-shadow:0 0 0 3px var(--white),0 0 0 6px var(--blue);
  cursor:pointer;
}
.ntgpro__range::-moz-range-track{
  height:10px;border-radius:999px;
  background:linear-gradient(90deg,var(--pink),var(--blue));
  box-shadow:0 0 0 3px var(--black);
}
.ntgpro__range::-moz-range-thumb{
  width:22px;height:22px;border:none;border-radius:999px;
  background:var(--black);
  box-shadow:0 0 0 3px var(--white),0 0 0 6px var(--pink);
  cursor:pointer;
}

/* Preview */
.ntgpro__previewStage{
  position:relative;
  min-height:300px;
  border-radius:16px;
  background:var(--stageBg);
  box-shadow: inset 0 0 0 3px var(--black);
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:20px;
}
.ntgpro__previewStage.is-black{ --stageBg: var(--black); }
.ntgpro__previewStage.is-white{ --stageBg: var(--white); }
.ntgpro__previewStage.is-pink{ --stageBg: var(--pink); }
.ntgpro__previewStage.is-transparent{ --stageBg: transparent; }

.ntgpro__previewHalo{
  position:absolute; inset:-60px;
  pointer-events:none;
  opacity:0;
  transition:opacity 200ms ease;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--c1) 55%, transparent) 0%,
    transparent 65%);
  filter: blur(18px);
}
.ntgpro__previewHalo.is-on{opacity:1;}

.ntgpro__previewText{
  position:relative;
  text-align:center;
  font-weight:950;
  letter-spacing:var(--spacing);
  font-size:var(--size);
  line-height:1.05;
  user-select:none;
  padding:10px 12px;
}

/* Tools under preview */
.ntgpro__tools--under{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.ntgpro__btn{
  border-radius:14px;
  border:3px solid var(--black);
  background:var(--white);
  color:var(--black);
  font-weight:950;
  padding:10px 12px;
  cursor:pointer;
}
.ntgpro__btn:hover{ background:var(--pink); }
.ntgpro__btn--blue{
  background:var(--blue);
  color:var(--black);
}
.ntgpro__btn--blue:hover{ background:var(--pink); }
.ntgpro__btn--sm{
  padding:8px 10px;
  border-radius:12px;
  font-size:13px;
}

/* Note smaller */
.ntgpro__panel--noteSmall{
  padding:10px 12px;
}
.ntgpro__note{
  color:var(--black);
  font-weight:950;
  line-height:1.2;
  font-size:13px;
}

/* Messages */
.ntgpro__mini{
  margin-top:10px;
  font-weight:950;
  color:var(--black);
}

/* Hide irrelevant controls */
.ntgpro__control.is-hidden{display:none!important;}

/* Gradient text helper */
.ntgpro__previewText.is-gradient{
  background: linear-gradient(var(--angle), var(--c1), var(--c2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ntgpro__previewText:not(.is-gradient){ color:var(--c1); }

/* =========================
   EFFECTS (6 robust styles)
   ========================= */

/* 1) Tube */
.ntgpro__effect--tube{
  --core: color-mix(in oklab, var(--c1) 85%, var(--white));
  --outer: color-mix(in oklab, var(--c2) 70%, transparent);
  text-shadow:
    0 0 calc(6px + 18px * var(--tube)) var(--core),
    0 0 calc(12px + 34px * var(--glow)) var(--c1),
    0 0 calc(18px + 52px * var(--glow)) var(--outer);
  filter: drop-shadow(0 0 calc(6px + 14px * var(--blur)) var(--c1));
}

/* 2) Flicker */
.ntgpro__effect--flicker{
  --outer: color-mix(in oklab, var(--c2) 65%, transparent);
  text-shadow:
    0 0 calc(10px + 28px * var(--glow)) var(--c1),
    0 0 calc(18px + 62px * var(--glow)) var(--outer),
    0 0 calc(8px + 22px * var(--blur)) var(--c1);
  transform: translateZ(0);
}
.ntgpro__previewText.is-flicker{
  animation: ntgFlicker 2.6s infinite steps(1,end);
}
@keyframes ntgFlicker{
  0%{opacity:1}
  4%{opacity:.88}
  6%{opacity:1}
  9%{opacity:calc(.55 + .45*(1 - var(--flickerInt)))}
  10%{opacity:1}
  38%{opacity:.92}
  39%{opacity:1}
  67%{opacity:calc(.62 + .38*(1 - var(--flickerInt)))}
  69%{opacity:1}
  100%{opacity:1}
}

/* 3) Prism */
.ntgpro__effect--prism{
  text-shadow:
    0 0 calc(12px + 44px * var(--glow)) var(--c1),
    0 0 calc(18px + 60px * var(--glow)) var(--c2),
    0 0 calc(10px + 26px * var(--blur)) color-mix(in oklab, var(--c1) 50%, var(--c2));
  transform: translateZ(0);
}
.ntgpro__previewText.is-pulse{
  animation: ntgPulse var(--pulseSpeed) ease-in-out infinite;
}
@keyframes ntgPulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}
  50%{transform:scale(1.02);filter:drop-shadow(0 0 18px color-mix(in oklab, var(--c1) 55%, var(--c2)))}
}

/* 4) Holo */
.ntgpro__effect--holo{
  --outer: color-mix(in oklab, var(--c2) 70%, transparent);
  text-shadow:
    0 0 calc(10px + 30px * var(--glow)) var(--c1),
    0 0 calc(16px + 52px * var(--glow)) var(--outer);
}
.ntgpro__effect--holo::before,
.ntgpro__effect--holo::after{
  content: attr(aria-label);
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.85;
  filter: blur(calc(0px + 8px * var(--split)));
}
.ntgpro__effect--holo::before{
  color:var(--c2);
  transform:translateX(calc(-1px - 8px * var(--split)));
  mix-blend-mode:screen;
}
.ntgpro__effect--holo::after{
  color:var(--c1);
  transform:translateX(calc(1px + 8px * var(--split)));
  mix-blend-mode:screen;
}
.ntgpro__previewText.is-drift{
  animation: ntgDrift var(--driftSpeed) ease-in-out infinite;
}
@keyframes ntgDrift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(0, calc(-3px - 10px * var(--split)))}
}

/* 5) Outline */
.ntgpro__effect--outline{
  color:transparent;
  -webkit-text-stroke: calc(1px + 6px * var(--outline)) var(--c1);
  text-shadow:
    0 0 calc(8px + 22px * var(--glow)) var(--c1),
    0 0 calc(14px + 48px * var(--glow)) color-mix(in oklab, var(--c2) 70%, transparent);
  position:relative;
}
.ntgpro__previewText.is-shimmer::before{
  content:"";
  position:absolute; top:-40%; left:-60%;
  width:70%; height:180%;
  background: linear-gradient(90deg, transparent, var(--white), transparent);
  opacity:.55;
  transform: rotate(18deg);
  mix-blend-mode: screen;
  animation: ntgShimmer var(--shimmerSpeed) linear infinite;
}
@keyframes ntgShimmer{
  0%{transform:translateX(-40%) rotate(18deg)}
  100%{transform:translateX(240%) rotate(18deg)}
}

/* 6) Bloom */
.ntgpro__effect--bloom{
  --mix: color-mix(in oklab, var(--c1) 60%, var(--c2));
  text-shadow:
    0 0 calc(14px + 54px * var(--bloom)) var(--mix),
    0 0 calc(18px + 70px * var(--bloom)) color-mix(in oklab, var(--c2) 65%, transparent),
    0 0 calc(10px + 34px * var(--blur)) color-mix(in oklab, var(--c1) 65%, transparent);
  filter: drop-shadow(0 0 calc(10px + 36px * var(--bloom)) var(--mix));
}
.ntgpro__previewText.is-breathe{
  animation: ntgBreathe var(--breatheSpeed) ease-in-out infinite;
}
@keyframes ntgBreathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.03)}
}