/* Scoped root variables and light performance-conscious animations */
.cybertool-unown-text-generator {
  --neon-cyan: #00f3ff;
  --cyber-purple: #7028e4;
  --matrix-green: #00ff9d;
  --cyber-black: #0a0a12;
  --hologram-gradient: linear-gradient(45deg, var(--cyber-purple), var(--neon-cyan));
  --glow: 0 0 18px rgba(0,243,255,0.14), 0 0 32px rgba(112,40,228,0.08);
  --glass-blur: 8px;
  --radius: 14px;
  --tgap: 12px;
  --touch: 44px; /* consistent touch target */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Noto Mono", monospace;
  color: var(--neon-cyan);
  background: transparent;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
}

/* Subtle dynamic background layer (hardware-accelerated) */
.cybertool-unown-text-generator__glow-layer {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(40rem 20rem at 10% 20%, rgba(112,40,228,0.08), transparent 10%),
    radial-gradient(30rem 15rem at 90% 80%, rgba(0,243,255,0.06), transparent 15%),
    linear-gradient(180deg, rgba(10,10,18,0.6), rgba(10,10,18,0.95));
  transform: translateZ(0);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: utg-slow-rotate 12s linear infinite;
}
@keyframes utg-slow-rotate { from { transform: translateZ(0) rotate(0deg); } to { transform: translateZ(0) rotate(360deg); } }

/* Layout: mobile-first stack */
.cybertool-unown-text-generator__header,
.cybertool-unown-text-generator__footer { text-align: center; z-index: 3; position: relative; }
.cybertool-unown-text-generator__title {
  margin: 14px 0;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: lowercase;
  background: var(--hologram-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

/* Main body stack */
.cybertool-unown-text-generator__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 14px;
  z-index: 2;
  position: relative;
}

/* Panels */
.cybertool-unown-text-generator__panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glow);
  min-height: 120px;
}

/* Labels */
.cybertool-unown-text-generator__label { display:block; font-size:12px; opacity:0.9; margin-bottom:8px; color: #bfefff; }
.cybertool-unown-text-generator__sub-label { font-size:11px; opacity:0.85; display:block; margin-bottom:6px; }

/* Textarea / preview */
.cybertool-unown-text-generator__input {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  padding: 10px;
  border-radius: 10px;
  outline: none;
  border: 1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  color: var(--neon-cyan);
  font-size: 15px;
  line-height: 1.35;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.4);
}

/* Preview display area */
.cybertool-unown-text-generator__preview {
  min-height: 120px;
  padding: 12px;
  border-radius: 10px;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 1px;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: inset 0 -6px 20px rgba(0,0,0,0.45);
  color: var(--neon-cyan);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Controls layout */
.cybertool-unown-text-generator__controls { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.cybertool-unown-text-generator__control-group { display:flex; flex-direction:column; gap:6px; }
.cybertool-unown-text-generator__range { width:100%; height: var(--touch); -webkit-appearance:none; background:transparent; }
.cybertool-unown-text-generator__range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--neon-cyan); box-shadow:0 0 8px rgba(0,243,255,0.2); cursor:pointer; }

/* Toggle buttons */
.cybertool-unown-text-generator__toggles { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.cybertool-unown-text-generator__toggle {
  min-height: var(--touch);
  min-width: 84px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  color: var(--neon-cyan);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cybertool-unown-text-generator__toggle[aria-pressed="true"] {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(112,40,228,0.06);
  background: var(--hologram-gradient);
  color: #03030a;
  -webkit-background-clip: unset;
}

/* Action buttons */
.cybertool-unown-text-generator__actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.cybertool-unown-text-generator__btn {
  min-height: var(--touch);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  cursor: pointer;
  color: var(--neon-cyan);
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cybertool-unown-text-generator__btn:active { transform: translateY(1px); }
.cybertool-unown-text-generator__btn--primary {
  background: var(--hologram-gradient);
  color: #01010a;
  box-shadow: 0 6px 28px rgba(0,243,255,0.06);
}

/* Output meta row */
.cybertool-unown-text-generator__output-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; }
.cybertool-unown-text-generator__select { min-height: var(--touch); padding:6px 8px; border-radius:8px; background:transparent; color:var(--neon-cyan); border:1px solid rgba(255,255,255,0.04); }

/* Hint and status */
.cybertool-unown-text-generator__hint { font-size:12px; opacity:0.8; margin-top:8px; color:#a6ffeb; }
.cybertool-unown-text-generator__status { font-size:12px; color: rgba(255,255,255,0.65); padding:10px 0; }

/* Hover-activated gradient on preview */
.cybertool-unown-text-generator__preview:hover {
  box-shadow: 0 12px 48px rgba(112,40,228,0.06);
  transform: translateY(-4px);
}

/* Visual effect classes applied by JS */
.cybertool-unown-text-generator--effect-hologram .cybertool-unown-text-generator__preview {
  background-image: var(--hologram-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(112,40,228,0.12), 0 0 24px rgba(0,243,255,0.08);
}
.cybertool-unown-text-generator--effect-glitch .cybertool-unown-text-generator__preview {
  position:relative;
  color:var(--neon-cyan);
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.cybertool-unown-text-generator--effect-matrix .cybertool-unown-text-generator__preview {
  font-variant-ligatures: none;
  letter-spacing: 2px;
}

/* lightweight glitch pseudo-layers for visual noise (only when active) */
.cybertool-unown-text-generator--effect-glitch .cybertool-unown-text-generator__preview::before,
.cybertool-unown-text-generator--effect-glitch .cybertool-unown-text-generator__preview::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  transform-origin: left top;
  mix-blend-mode: screen;
}
.cybertool-unown-text-generator--effect-glitch .cybertool-unown-text-generator__preview::before { color: var(--neon-cyan); transform: translateX(-4px) skewX(-4deg); animation: utg-glitch1 2.6s infinite linear; }
.cybertool-unown-text-generator--effect-glitch .cybertool-unown-text-generator__preview::after { color: var(--matrix-green); transform: translateX(6px) skewX(3deg); animation: utg-glitch2 3.1s infinite linear; }
@keyframes utg-glitch1 { 0%{transform:translateX(-4px) skewX(-4deg)}50%{transform:translateX(-2px) skewX(-1deg)}100%{transform:translateX(-4px) skewX(-4deg)} }
@keyframes utg-glitch2 { 0%{transform:translateX(6px) skewX(3deg)}40%{transform:translateX(3px) skewX(0deg)}100%{transform:translateX(6px) skewX(3deg)} }

/* Responsive: horizontal split on wider screens */
@media (min-width: 600px) {
  .cybertool-unown-text-generator__body { grid-template-columns: 1fr 1fr; align-items:start; }
  .cybertool-unown-text-generator__panel--input { margin-right: 4px; }
  .cybertool-unown-text-generator__panel--output { margin-left: 4px; }
}

/* Fine-tuned micro-interaction focus outlines for keyboard nav */
.cybertool-unown-text-generator__input:focus,
.cybertool-unown-text-generator__preview:focus,
.cybertool-unown-text-generator__btn:focus,
.cybertool-unown-text-generator__toggle:focus,
.cybertool-unown-text-generator__select:focus {
  outline: 2px solid rgba(0,243,255,0.18);
  outline-offset: 3px;
}

/* Prevent global bleed: all inner selectors start with block class */