/* ===========================
   Morphing Glass UI (v1)
   Works with Tailwind CDN
   =========================== */

/* Theme tokens */
:root{
  --bg-1:#140c28;
  --bg-2:#0f0a1f;
  --ink:#e2e8f0;
  --ink-dim:#94a3b8;
  --glass:rgba(255,255,255,.06);
  --glass-strong:rgba(255,255,255,.12);
  --ring:#6366f1; /* indigo-500 */
}

/* Animated gradient backdrop */
body{
  font-family:'Inter',system-ui,ui-sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, #201442 0%, transparent 60%),
    radial-gradient(900px 700px at 100% 0%, #231b44 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  overflow-x:hidden;
}

/* Floating blur blobs (decor only) */
.ui-blobs{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  filter: blur(60px) saturate(120%);
}
.ui-blobs .blob{
  position:absolute; border-radius:50%;
  opacity:.35; transform: translateZ(0);
  mix-blend-mode:screen;
  animation:float 18s ease-in-out infinite;
}
.blob.b1{width:38vmax; height:38vmax; left:-10vmax; top:-6vmax; background:#8b5cf6;}
.blob.b2{width:28vmax; height:28vmax; right:-6vmax; top:10vmax; background:#06b6d4; animation-duration:22s;}
.blob.b3{width:35vmax; height:35vmax; left:30vw; bottom:-12vmax; background:#f43f5e; animation-duration:26s;}
@keyframes float{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(2vw, -1vh, 0) scale(1.06); }
}

/* =========== GLASS CORE =========== */
.card,
.glass {
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  box-shadow:
    0 10px 25px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  transition: border-radius .35s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
  z-index:1;
}
.card:hover{
  transform: translateY(-2px);
  border-radius:22px;
  box-shadow:
    0 16px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}

/* subtle glass shine */
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background: radial-gradient(120% 60% at 0% -20%, rgba(255,255,255,.22), transparent 50%),
              radial-gradient(80% 70% at 100% 0%, rgba(255,255,255,.10), transparent 60%);
  mask: linear-gradient(#000 60%, transparent);
  transition: opacity .3s ease;
  opacity:.75;
}

/* Inputs / selects / textareas as mini-glass */
.input-glass,
select,
textarea{
  background: rgba(10,12,22,.6);
  border:1px solid rgba(255,255,255,.12);
  color:var(--ink);
  border-radius:12px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea{resize:none;}
select:focus, textarea:focus{
  outline:0;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
  background: rgba(10,12,22,.75);
}

/* Tabs (mode buttons) */
.mode-btn{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(20,20,40,.55);
  border-radius:12px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.mode-btn:hover{ transform: translateY(-1px); }
.mode-btn.active,
.mode-btn.bg-indigo-600{
  background: linear-gradient(180deg, rgba(99,102,241,.9), rgba(79,70,229,.85));
  border-color: rgba(255,255,255,.22);
}

/* Output panel stronger glass */
#output-container{
  background: linear-gradient(180deg, rgba(9,11,20,.85), rgba(9,11,20,.75));
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
#output-container:focus-within{
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(99,102,241,.22);
}

/* Glass toolbar buttons */
.toolbar-btn{
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  filter:saturate(105%);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
}
.toolbar-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.25); }
.toolbar-btn:disabled{ opacity:.5; transform:none; box-shadow:none; }

/* Scrollbar styling (dark) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius:12px; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius:12px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.24); }

/* Step indicator pills */
#step-indicator span{
  padding:.35rem .6rem; border-radius:999px;
  background: rgba(255,255,255,.06);
}
#step-indicator .active{
  color:#fff; background: rgba(99,102,241,.35);
  border:1px solid rgba(255,255,255,.16);
}

/* Footer subtle */
footer{ opacity:.75; }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

.wizard-step:focus-within .input-glass{
  border-radius:16px;
  background: rgba(14,16,28,.8);
}

.wrap-text {
  white-space: pre-wrap;   /* preserves line breaks but allows wrapping */
  word-wrap: break-word;   /* ensures long words break to fit */
  overflow-wrap: break-word;
}