/* Scoped root variables and base */
.cybertool-metal-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));
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --touch: 44px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Noto Mono", monospace;
  color: var(--neon-cyan);
  position: relative;
  box-sizing: border-box;
  isolation: isolate;
}

/* Background dynamic layer */
.cybertool-metal-text-generator__bg {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(30rem 12rem at 10% 20%, rgba(112,40,228,0.06), transparent 8%),
    radial-gradient(24rem 10rem at 90% 80%, rgba(0,243,255,0.05), transparent 12%),
    linear-gradient(180deg, rgba(10,10,18,0.85), rgba(10,10,18,1));
  filter: blur(18px);
  pointer-events: none;
  transform: translateZ(0);
  animation: mtg-bg-rotate 14s linear infinite;
}
@keyframes mtg-bg-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Header */
.cybertool-metal-text-generator__header,
.cybertool-metal-text-generator__footer { text-align:center; z-index:2; position:relative; }
.cybertool-metal-text-generator__title {
  margin: 14px 0;
  font-size: 18px;
  text-transform: lowercase;
  font-weight: 700;
  background: var(--hologram-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 1px;
}

/* Body layout mobile-first */
.cybertool-metal-text-generator__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px;
  z-index: 2;
}

/* Panels */
.cybertool-metal-text-generator__panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-radius: var(--radius);
  padding: 12px;
  border: 1px solid var(--glass);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  min-height: 120px;
}

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

/* Input */
.cybertool-metal-text-generator__input {
  width:100%;
  padding:10px;
  border-radius:10px;
  resize:vertical;
  background: rgba(0,0,0,0.36);
  color: var(--neon-cyan);
  border:1px solid rgba(255,255,255,0.03);
  font-size:16px;
  line-height:1.3;
}

/* Controls */
.cybertool-metal-text-generator__controls { margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.cybertool-metal-text-generator__control-row { display:flex; gap:10px; align-items:flex-end; }
.cybertool-metal-text-generator__control { flex:1; }
.cybertool-metal-text-generator__range { width:100%; height: var(--touch); background:transparent; -webkit-appearance:none; }
.cybertool-metal-text-generator__range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--neon-cyan); box-shadow:0 0 10px rgba(0,243,255,0.2); cursor:pointer; }
.cybertool-metal-text-generator__select { width:100%; min-height:var(--touch); border-radius:8px; background:transparent; color:var(--neon-cyan); border:1px solid rgba(255,255,255,0.04); padding:6px 8px; }

/* Toggles and buttons */
.cybertool-metal-text-generator__toggles { display:flex; gap:8px; flex-wrap:wrap; }
.cybertool-metal-text-generator__toggle {
  min-height: var(--touch);
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.04);
  background:transparent;
  color:var(--neon-cyan);
  cursor:pointer;
}
.cybertool-metal-text-generator__toggle[aria-pressed="true"] { background: var(--hologram-gradient); color:#03030a; transform:translateY(-2px); box-shadow:0 8px 24px rgba(112,40,228,0.06); }

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

/* Output preview */
.cybertool-metal-text-generator__preview {
  min-height:140px;
  border-radius:10px;
  padding:14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.5));
  border:1px solid rgba(255,255,255,0.03);
  color:var(--neon-cyan);
  font-size:36px;
  line-height:1.05;
  letter-spacing:1px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition: transform .16s ease, box-shadow .16s ease;
  position:relative;
  overflow:hidden;
}

/* Hover micro effect */
.cybertool-metal-text-generator__preview:hover { transform:translateY(-4px); box-shadow:0 18px 60px rgba(112,40,228,0.06); }

/* Output row */
.cybertool-metal-text-generator__output-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }
.cybertool-metal-text-generator__meta { display:flex; gap:8px; }
.cybertool-metal-text-generator__variant { text-transform:lowercase; color:#bfefff; font-weight:700; margin-left:6px; }
.cybertool-metal-text-generator__hint { font-size:12px; margin-top:8px; color:#a6ffeb; }

/* Style variants applied by JS */

/* Chrome: bright metallic gradient with reflection */
.cybertool-metal-text-generator--style-chrome .cybertool-metal-text-generator__preview {
  background: linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(90deg, #f8f9fb 0%, #d1d6dd 20%, #ffffff 40%, #b8bfc8 60%, #eef2f6 100%);
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Rust: warm dark tones with grain */
.cybertool-metal-text-generator--style-rust .cybertool-metal-text-generator__preview {
  color: #ffd9b0;
  text-shadow: 0 6px 18px rgba(0,0,0,0.7), 0 0 8px rgba(128,40,10,0.08);
  background-image: linear-gradient(180deg, rgba(80,30,10,0.12), rgba(200,70,20,0.06));
}

/* Emboss: raised bevel look */
.cybertool-metal-text-generator--style-emboss .cybertool-metal-text-generator__preview {
  color: #e6eef8;
  text-shadow:
    0 -2px 0 rgba(255,255,255,0.08),
    0 2px 6px rgba(0,0,0,0.6);
  transform: translateZ(0);
}

/* Burned: dark core and hot edge */
.cybertool-metal-text-generator--style-burn .cybertool-metal-text-generator__preview {
  color: #ffb86b;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(255,80,0,0.08);
}

/* Gothic: heavy serif-like feel using all caps and spacing */
.cybertool-metal-text-generator--style-gothic .cybertool-metal-text-generator__preview {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #dfe9ff;
  text-shadow: 0 6px 20px rgba(0,0,0,0.7);
}

/* Metal plate 3D */
.cybertool-metal-text-generator--style-plate3d .cybertool-metal-text-generator__preview {
  color: #e8f5ff;
  transform: perspective(600px) rotateX(2deg);
  text-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.02);
}

/* Effects toggles */
.cybertool-metal-text-generator--effect-holo .cybertool-metal-text-generator__preview::after {
  content: '';
  position:absolute;
  inset: -30% -10%;
  background: var(--hologram-gradient);
  mix-blend-mode: screen;
  opacity:0.08;
  pointer-events:none;
  filter: blur(12px);
  animation: mtg-holo 6s linear infinite;
}
@keyframes mtg-holo { 0%{transform:translateX(-5%)}50%{transform:translateX(5%)}100%{transform:translateX(-5%)} }

.cybertool-metal-text-generator--effect-grain .cybertool-metal-text-generator__preview::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 3px);
  opacity:0.12;
  mix-blend-mode: overlay;
}

/* Edge glow */
.cybertool-metal-text-generator--effect-edge .cybertool-metal-text-generator__preview {
  text-shadow: 0 2px 14px rgba(0,243,255,0.06), 0 0 18px rgba(112,40,228,0.04);
}

/* Responsive: horizontal split on wider screens */
@media (min-width: 600px) {
  .cybertool-metal-text-generator__body { grid-template-columns: 1fr 1fr; align-items:start; }
}

/* Focus outlines for keyboard nav */
.cybertool-metal-text-generator__input:focus,
.cybertool-metal-text-generator__preview:focus,
.cybertool-metal-text-generator__btn:focus,
.cybertool-metal-text-generator__toggle:focus,
.cybertool-metal-text-generator__select:focus {
  outline: 2px solid rgba(0,243,255,0.12);
  outline-offset: 3px;
}

/* Prevent global bleed: all selectors scoped under block class */