:root {
  --primary: #00ffcc;
  --text: #f3f7ff;
  --font-main: "Space Grotesk", sans-serif;
  --glow: 0.6;
  --radius: 28px;
  --link-border-color: #00ffcc;
  --link-text-color: #ffffff;
  --link-icon-color: #00ffcc;
  --avatar-border-color: #00ffcc;
  --avatar-border-width: 2px;
  --avatar-glow-color: #00ffcc;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  height: 100svh;
  font-family: var(--font-main);
  color: var(--text);
  display: grid;
  grid-template-columns: 410px 1fr;
  background: #04060b;
  overflow: hidden;
}

.bg-layer { position: fixed; inset: 0; z-index: -3; background: radial-gradient(circle at 10% 20%, #102a43 0%, #090b15 40%, #030307 100%); }
.bg-layer.gradient::before { content: ""; position: absolute; inset: -20%; filter: blur(70px); opacity: .45; animation: spin 16s linear infinite; background: conic-gradient(from 90deg, color-mix(in srgb, var(--primary) 60%, #fff 0%), #1e1f4f, #1a4a68, #201631, color-mix(in srgb, var(--primary) 60%, #fff 0%)); }
.bg-layer.gradient.radar::before { background: radial-gradient(circle at center, color-mix(in srgb, var(--primary) 50%, transparent 100%) 0%, transparent 55%), conic-gradient(from 0deg, transparent 0%, color-mix(in srgb, var(--primary) 60%, #000 40%) 40%, transparent 70%); }
.bg-layer.gradient.deep::before { background: linear-gradient(130deg, #06070f, #120c2a, #0a2330, #05070f); }
.bg-layer.gradient.sunburst::before { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 70%, #fff 5%), transparent 60%), linear-gradient(135deg, #220f0f, #141421, #071a1d); }

.bg-layer.image, .bg-layer.video { background-size: cover; background-position: center; }
.bg-layer.video video { width: 100%; height: 100%; object-fit: cover; }

.noise { position: fixed; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 3px 3px; opacity: .18; z-index: -2; pointer-events: none; }

#editor-panel { padding: 18px; border-right: 1px solid rgba(255,255,255,.18); background: rgba(6,9,18,.9); backdrop-filter: blur(8px); overflow: auto; min-height: 0; }
h2 { margin: 4px 0; font-size: 1.5rem; }
.subtitle { margin: 0 0 16px; opacity: .8; }
h3 { margin: 0 0 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
.control-group { margin-bottom: 18px; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.03); }
label { display: block; margin: 8px 0 4px; font-size: .85rem; opacity: .85; }
input, select { width: 100%; margin-bottom: 8px; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(6,8,16,.8); color: #fff; }
.actions { display: grid; gap: 10px; }
.main-btn, .small-btn { border: 1px solid color-mix(in srgb, var(--primary) 70%, #fff 20%); background: color-mix(in srgb, var(--primary) 35%, #03070f 65%); color: white; border-radius: 12px; padding: 11px; cursor: pointer; font-weight: 700; }
.small-btn { padding: 8px; }
#status-msg { min-height: 18px; font-size: .85rem; opacity: .9; }

#preview-area { display: grid; place-items: center; padding: 20px; overflow: auto; min-height: 0; }
.card { width: min(430px, 90vw); max-height: calc(100svh - 40px); overflow: auto; border-radius: var(--radius); padding: 26px; border: 1px solid color-mix(in srgb, var(--primary) 60%, #fff 10%); box-shadow: 0 0 45px color-mix(in srgb, var(--primary) calc(var(--glow) * 100%), transparent 100%); text-align: center; transition: .35s ease; }
.card { transform-style: preserve-3d; will-change: transform; }
.card.glass { background: rgba(9,13,25,.56); backdrop-filter: blur(12px); }
.card.solid { background: rgba(5,8,16,.95); }
.card.holo { background: linear-gradient(135deg, rgba(22,32,60,.6), rgba(90,15,110,.5), rgba(8,60,70,.45)); background-size: 220% 220%; animation: holo 8s ease infinite; }
.card.metal { background: linear-gradient(160deg, #121418, #2b303a, #141922); }
.card.neon-grid { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(160deg, rgba(6,8,16,.9), rgba(10,14,30,.9)); background-size: 20px 20px, 20px 20px, auto; }
.fx-intense { box-shadow: 0 0 26px color-mix(in srgb, var(--primary) 80%, #fff 10%), 0 0 72px color-mix(in srgb, var(--primary) 70%, transparent 100%); }
.fx-flicker { animation: neonflicker 2.2s infinite; }
.fx-3d-soft { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.fx-3d-hard { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(10px); }

#preview-avatar { width: 112px; height: 112px; border: var(--avatar-border-width) solid var(--avatar-border-color); outline: 1px solid color-mix(in srgb, var(--avatar-border-color) 55%, transparent 100%); object-fit: cover; box-shadow: 0 0 18px color-mix(in srgb, var(--avatar-glow-color) 80%, transparent 100%), 0 0 10px color-mix(in srgb, var(--avatar-border-color) 50%, transparent 100%); }
.avatar-circle #preview-avatar { border-radius: 50%; }
.avatar-rounded #preview-avatar { border-radius: 20px; }
.avatar-square #preview-avatar { border-radius: 4px; }
.avatar-hex #preview-avatar { clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%); border-radius: 0; }
.avatar-float #preview-avatar { animation: float 2.4s ease-in-out infinite; }
.avatar-pulse #preview-avatar { animation: pulse 1.8s ease-in-out infinite; }
.avatar-spin #preview-avatar { animation: slowspin 8s linear infinite; }

#preview-name { margin: 14px 0 6px; font-size: 2rem; }
#preview-tagline { margin: 0 0 20px; opacity: .9; }
.text-glitch #preview-name { text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff; }
.text-shadow #preview-name { text-shadow: 0 8px 24px rgba(0,0,0,.55); }
.text-neon #preview-name { text-shadow: 0 0 10px var(--primary), 0 0 22px var(--primary); }

.links { display: grid; gap: 10px; }
.link-btn { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--link-text-color); padding: 12px 14px; border: 1px solid var(--link-border-color); transition: transform .2s ease, background .2s ease; }
 .link-btn i { color: var(--link-icon-color); }
.btn-edge { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); background: rgba(255,255,255,.04); }
.btn-pill { border-radius: 999px; background: rgba(255,255,255,.09); }
.btn-minimal { border-radius: 8px; background: rgba(0,0,0,.16); }
.btn-glass { border-radius: 12px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.btn-block { border-radius: 0; background: rgba(255,255,255,.12); text-transform: uppercase; letter-spacing: .05em; }
.links-lift .link-btn:hover { transform: translateY(-2px) scale(1.01); background: color-mix(in srgb, var(--primary) 30%, #111 70%); }
.links-slide .link-btn:hover { transform: translateX(8px); background: color-mix(in srgb, var(--primary) 26%, #111 74%); }
.links-pulse .link-btn:hover { animation: pulse .8s ease-in-out 1; }

.link-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; margin-bottom: 6px; }

body.view-mode { grid-template-columns: 1fr; }
body.view-mode #editor-panel { display: none; }
.audio-toggle{
  position:fixed;right:16px;bottom:16px;z-index:50;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--link-border-color);
  color:var(--link-icon-color);background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.hidden{display:none !important;}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes holo { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes slowspin { to { transform: rotate(360deg); } }
@keyframes neonflicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: .78; }
}

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: auto; height: auto; min-height: 100svh; }
  #editor-panel { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  #preview-area { padding: 16px; }
  .card { width: min(480px, 94vw); max-height: none; }
  .link-row { grid-template-columns: 1fr; }
}