/* Subtle background system */
.ms-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(59,227,214,.12), transparent 60%),
    radial-gradient(900px 420px at 85% 15%, rgba(77,163,255,.12), transparent 62%),
    radial-gradient(980px 520px at 55% 90%, rgba(176,124,255,.10), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg2));
}

.ms-noise{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .10;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Glass surfaces */
.glass{
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border: 1px solid var(--line);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}

.glass-soft{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(calc(var(--blur) - 3px));
  -webkit-backdrop-filter: blur(calc(var(--blur) - 3px));
  border-radius: var(--radius);
}

.glass-ring{
  position: relative;
}
.glass-ring:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(120deg, rgba(59,227,214,.35), rgba(77,163,255,.20), rgba(176,124,255,.18));
  opacity: .25;
  filter: blur(10px);
  z-index:-1;
}

/* Buttons / Inputs */
.glass-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color: var(--text);
  transition: transform var(--fast), border-color var(--fast), background var(--fast), box-shadow var(--fast);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.glass-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(59,227,214,.35);
  background: linear-gradient(180deg, rgba(59,227,214,.16), rgba(255,255,255,.07));
}
.glass-btn:active{ transform: translateY(0px) scale(.99); }

.glass-input{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 14px 16px;
  outline: none;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.glass-input::placeholder{ color: rgba(244,246,250,.55); }
.glass-input:focus{
  border-color: rgba(59,227,214,.45);
  box-shadow: 0 0 0 4px rgba(59,227,214,.12);
  background: rgba(255,255,255,.08);
}

/* Small labels / chips */
.glass-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(244,246,250,.78);
}

/* Simple reveal helper */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--med), transform var(--med);
  will-change: opacity, transform;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}