:root{
    --primary-color:#a87ab6;
    --secondary-color:#54bfc1;
    --background-dark:#1a1a2e;
    --background-medium:#1f2847;
    --text-light:#f0f0f0;
    --text-dark:#aaaaaa;
    --border-color:rgba(255,255,255,0.1);
    --shadow-light:rgba(0,0,0,0.2);
    --shadow-medium:rgba(0,0,0,0.4);
    --glass-background:rgba(255,255,255,0.05);
    --glass-backdrop-filter:blur(10px) saturate(180%);
    --card-hover-scale:1.03;
    --transition-speed:.3s;
    --border-radius:12px;
  }

  /* Overlay */
  .nebula-overlay{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(1200px 600px at 50% 50%, rgba(168,122,182,.10), transparent 60%),
               radial-gradient(800px 800px at 20% 20%, rgba(84,191,193,.12), transparent 55%),
               var(--background-dark);
    backdrop-filter:var(--glass-backdrop-filter);
    z-index:999999;
    animation:nebulaFadeIn .35s ease-out;
  }
  @keyframes nebulaFadeIn{from{opacity:0}to{opacity:1}}

  /* Card */
  .nebula-card{
    width:min(92vw, 860px);
    height:min(78vh, 560px);
    background:linear-gradient(180deg, var(--background-medium), rgba(26,26,46,.75));
    border:1px solid var(--border-color);
    border-radius:var(--border-radius);
    box-shadow:0 30px 80px var(--shadow-medium), inset 0 0 0 1px rgba(255,255,255,.03);
    position:relative; overflow:hidden;
  }

  /* Header & controls */
  .nebula-ui{
    position:absolute; inset:12px 12px auto 12px; display:flex; align-items:center; gap:8px;
    z-index:5; color:var(--text-light); font:600 14px/1.3 system-ui, Segoe UI, Roboto, sans-serif;
  }
  .nebula-tag{
    padding:6px 10px; border-radius:999px; border:1px solid var(--border-color);
    background:var(--glass-background);
  }
  .nebula-btn{
    margin-left:auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
    padding:8px 12px; border-radius:999px; border:1px solid var(--border-color);
    background:var(--glass-background); transition:transform var(--transition-speed), background var(--transition-speed);
    user-select:none;
  }
  .nebula-btn:hover{ transform:scale(var(--card-hover-scale)); background:rgba(255,255,255,.08); }
  .nebula-legend{
    position:absolute; left:12px; bottom:12px; z-index:5; color:var(--text-dark);
    font:500 12px/1.4 system-ui, Segoe UI, Roboto, sans-serif; opacity:.9;
    background:var(--glass-background); border:1px solid var(--border-color);
    border-radius:8px; padding:8px 10px;
  }

  /* HUD */
  .nebula-hud{
    position:absolute; top:82px; left:12px; right:12px; display:flex; gap:10px; z-index:5;
    color:var(--text-light); font:600 13px/1 system-ui, Segoe UI, Roboto, sans-serif;
  }
  .nebula-chip{
    flex:0 0 auto; padding:8px 12px; border-radius:8px; border:1px solid var(--border-color);
    background:var(--glass-background); box-shadow:0 6px 20px var(--shadow-light) inset;
  }
  .nebula-bar{
    position:relative; flex:1; height:28px; border-radius:8px; overflow:hidden; border:1px solid var(--border-color);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  }
  .nebula-fill{
    position:absolute; inset:0 auto 0 0; width:100%; transform-origin:left;
    background:linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    opacity:.35;
  }

  /* Canvas */
  .nebula-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

  /* Center prompts */
  .nebula-center{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column;
    z-index:4; text-align:center; pointer-events:none; color:var(--text-light);
    font:700 22px/1.15 system-ui, Segoe UI, Roboto, sans-serif; text-shadow:0 2px 10px rgba(0,0,0,.5);
  }
  .nebula-center p{ margin:.35rem 0 0; font:500 13px/1.35 system-ui, Segoe UI, Roboto, sans-serif; color:var(--text-dark) }

  /* Floating sparkles */
  .nebula-card::before, .nebula-card::after{
    content:""; position:absolute; inset:-20% -10%; pointer-events:none; mix-blend-mode:screen; opacity:.15;
    background:
      radial-gradient(2px 2px at 10% 20%, var(--secondary-color), transparent 60%),
      radial-gradient(1.6px 1.6px at 40% 80%, var(--primary-color), transparent 60%),
      radial-gradient(1.8px 1.8px at 85% 35%, #fff, transparent 60%),
      radial-gradient(1.4px 1.4px at 70% 60%, var(--secondary-color), transparent 60%);
    animation:nebulaDrift 22s linear infinite;
  }
  .nebula-card::after{ animation-duration:36s; opacity:.10; filter:blur(1px) }
  @keyframes nebulaDrift{ from{transform:translateY(0)} to{transform:translateY(-8%)} }

  /* Hidden (for accessibility when closed) */
  .nebula-hidden{ display:none !important; }