:root {
  --neon-cyan: #00f3ff;
  --cyber-purple: #7028e4;
  --matrix-green: #00ff9d;
  --cyber-black: #0a0a12;
  --hologram-gradient: linear-gradient(45deg, var(--cyber-purple), var(--neon-cyan));
  --glass-alpha: 0.12;
  --glass-border: rgba(255,255,255,0.06);
  --accent-glow: 0 8px 30px rgba(112,40,228,0.14), 0 2px 6px rgba(0,243,255,0.06);
  --ui-radius: 12px;
  --touch-size: 44px;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
}

/* Scoped: .cybertool-duplicate */
.cybertool-duplicate { font-family: var(--font-mono); color: var(--neon-cyan); background: radial-gradient(1200px 600px at 10% 10%, rgba(112,40,228,0.06), transparent 8%), linear-gradient(180deg, rgba(6,6,12,0.7), rgba(6,6,12,0.92)); padding:18px; border-radius:14px; position:relative; isolation:isolate; box-shadow:var(--accent-glow); border:1px solid rgba(255,255,255,0.03); }
.cybertool-duplicate *{box-sizing:border-box;}

.cybertool-duplicate__stage { display:grid; grid-template-columns:1fr; gap:12px; }
.cybertool-duplicate__panel { padding:12px; border-radius:10px; backdrop-filter: blur(6px) saturate(120%); border:1px solid rgba(255,255,255,0.03); min-height:140px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); }

.cybertool-duplicate__header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
.cybertool-duplicate__title { font-size:16px; margin:0; color:var(--neon-cyan); font-weight:600; letter-spacing:0.6px; text-transform:lowercase; }

.cybertool-duplicate__modes { display:flex; gap:8px; }
.cybertool-duplicate__mode { min-height:var(--touch-size); padding:6px 12px; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--neon-cyan); font-weight:600; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
.cybertool-duplicate__mode:hover{ transform:translateY(-3px); box-shadow:var(--accent-glow); }
.cybertool-mode--active{ background:var(--hologram-gradient); color:var(--cyber-black); border:none; box-shadow:0 6px 22px rgba(112,40,228,0.2); }

.cybertool-duplicate__label{display:block;font-size:12px;color:rgba(255,255,255,0.6);margin-bottom:6px;}
.cybertool-duplicate__input{width:100%; min-height:140px; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background:linear-gradient(180deg, rgba(0,0,0,0.38), rgba(6,6,12,0.5)); color:var(--neon-cyan); font-family:var(--font-mono); font-size:14px; outline:none; transition:box-shadow .16s ease;}
.cybertool-duplicate__input:focus{ box-shadow:0 6px 28px rgba(0,243,255,0.06); border-color:rgba(0,243,255,0.18); }

.cybertool-duplicate__controls{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.cybertool-duplicate__btn{ min-height:var(--touch-size); padding:8px 14px; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--neon-cyan); font-weight:600; cursor:pointer; transition:transform .12s ease; }
.cybertool-duplicate__btn--duplicate { background: linear-gradient(90deg, rgba(0,243,255,0.08), rgba(112,40,228,0.08)); border:1px solid rgba(112,40,228,0.18); color:#fff; box-shadow:var(--accent-glow); }

.cybertool-duplicate__meta{ display:flex; gap:12px; margin-top:12px; font-size:13px; color:rgba(255,255,255,0.7); }
.cybertool-duplicate__meta-item{ background:rgba(255,255,255,0.02); padding:6px 8px; border-radius:8px; }

.cybertool-duplicate__canvas-wrap{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0.16; }
.cybertool-duplicate__canvas{ width:100%; height:100%; display:block; }

.cybertool-duplicate__output-wrap{ position:relative; z-index:1; padding:12px; min-height:160px; display:flex; flex-direction:column; gap:8px; }
.cybertool-duplicate__output{ white-space:pre-wrap; word-break:break-word; padding:12px; border-radius:10px; background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(6,6,12,0.6)); border:1px solid rgba(255,255,255,0.02); color:var(--neon-cyan); min-height:120px; font-size:14px; overflow:auto; }

.cybertool-duplicate--loading .cybertool-duplicate__loading-spinner { width:18px; height:18px; border-radius:50%; border:3px solid rgba(255,255,255,0.04); border-top-color:var(--neon-cyan); animation:cyber-rotate 800ms linear infinite; }
@keyframes cyber-rotate { to { transform: rotate(360deg); } }

@media (min-width:600px) { .cybertool-duplicate__stage { grid-template-columns:1fr 1fr; gap:18px; } }