/* Glass Studio — a split: the preview card (live wallpaper stage and the
   draggable glass card) on the left, the inspector and the CSS output on the
   right (layout from styles/components/form.css). Only the title tile, the
   stage and its glass card, the wallpaper swatches and the code block are the
   page's own. */

.gs-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #8FD8FF, #6A7BFF);
  color: #fff;
}

/* ── Stage ──────────────────────────────────────────────────────────────── */
/* Fills the flush row edge to edge (the row inherits the card corners). */
.gs-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.gs-bg {
  position: absolute;
  inset: 0;
  background: #1b2840;
  background-size: cover;
  background-position: center;
  transition: background var(--duration-snap) var(--ease-standard);
}
.gs-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, transparent 0 36%, rgba(0,0,0,0.24) 100%);
  background-size: 46px 46px, 46px 46px, 100% 100%;
  mix-blend-mode: overlay;
  opacity: 0.45;
}

/* Rich wallpaper content behind the glass so blur/refraction visibly sample it. */
.gs-bg-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gs-wallpaper-light,
.gs-wallpaper-orbit,
.gs-wallpaper-line { position: absolute; display: block; }
.gs-wallpaper-light {
  border-radius: 999px;
  filter: blur(10px);
  mix-blend-mode: screen;
}
.gs-wallpaper-light--a {
  width: 42%; aspect-ratio: 1;
  left: 7%; top: 8%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.92), var(--gs-wallpaper-accent, rgba(140,236,255,.8)) 28%, transparent 70%);
  opacity: 0.68;
}
.gs-wallpaper-light--b {
  width: 34%; aspect-ratio: 1;
  right: 8%; bottom: 7%;
  background: radial-gradient(circle at 45% 45%, rgba(255,255,255,0.74), rgba(255,138,190,.7) 34%, transparent 72%);
  opacity: 0.62;
}
.gs-wallpaper-orbit {
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255,255,255,0.12), inset 0 0 28px rgba(255,255,255,0.08);
  transform: rotate(-18deg);
}
.gs-wallpaper-orbit--a { width: 70%; aspect-ratio: 1.9; left: -14%; top: 18%; }
.gs-wallpaper-orbit--b { width: 58%; aspect-ratio: 2.2; right: -10%; bottom: 18%; transform: rotate(24deg); }
.gs-wallpaper-line {
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.62), var(--gs-wallpaper-accent, rgba(140,236,255,.8)), transparent);
  box-shadow: 0 0 18px rgba(255,255,255,0.24);
  opacity: 0.62;
}
.gs-wallpaper-line--a { width: 76%; left: 8%; top: 32%; transform: rotate(-22deg); }
.gs-wallpaper-line--b { width: 62%; right: 4%; bottom: 30%; transform: rotate(18deg); }
.gs-caption {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(34px, 8vw, 74px);
  font-weight: 850;
  letter-spacing: -0.055em;
  color: rgba(255, 255, 255, 0.18);
  text-shadow: 0 2px 24px rgba(255,255,255,0.18);
  white-space: nowrap;
}

/* ── The glass card itself — the live preview surface. ───────────────────── */
.gs-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56%;
  max-width: 360px;
  min-height: 120px;
  display: flex;
  align-items: center;
  cursor: grab;
  isolation: isolate;
  overflow: hidden;
  --gs-card-radius: 22px;
  --gs-card-border: rgba(255, 255, 255, 0.4);
  --gs-card-accent: rgba(140, 236, 255, 0.95);
  --gs-reflection-bg: var(--gs-wallpaper);
  --gs-reflection-x: 50%;
  --gs-reflection-y: 50%;
  --gs-specular-opacity: 1;
  /* These are overwritten live by app.js; values here are sane fallbacks. */
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--gs-card-radius);
  border: 1px solid var(--gs-card-border);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
}
.gs-card::before,
.gs-card::after,
.gs-card-reflection {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.gs-card-reflection {
  z-index: 0;
  background:
    linear-gradient(124deg, rgba(255,255,255,0.56) 0 10%, transparent 28% 62%, rgba(255,255,255,0.22) 82%, transparent 100%),
    var(--gs-reflection-bg);
  background-size: 100% 100%, 185% 185%;
  background-position: center, var(--gs-reflection-x) var(--gs-reflection-y);
  filter: blur(11px) saturate(1.55) contrast(1.08);
  opacity: 0.45;
  mix-blend-mode: screen;
  transform: scaleX(-1) scale(1.12) rotate(-2deg);
  mask-image: linear-gradient(120deg, rgba(0,0,0,0.95), rgba(0,0,0,0.55) 46%, transparent 82%);
}
.gs-card::before {
  z-index: 1;
  opacity: var(--gs-specular-opacity);
  background:
    radial-gradient(ellipse at 18% 10%, rgba(255,255,255,0.86), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,0.70) 0 9%, transparent 28% 72%, rgba(255,255,255,0.24) 100%),
    linear-gradient(90deg, var(--gs-card-accent), transparent 30% 70%, var(--gs-card-accent));
  mix-blend-mode: screen;
  opacity: calc(var(--gs-specular-opacity) * 0.52);
  mask-image: linear-gradient(160deg, rgba(0,0,0,1), transparent 58%);
}
.gs-card::after {
  z-index: 2;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.82),
    inset 1px 0 1px rgba(255,255,255,0.34),
    inset 0 -1px 1px rgba(0,0,0,0.18),
    inset 0 0 22px rgba(255,255,255,0.13);
}
.gs-card:focus-visible {
  outline: none;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 0 0 4px var(--accent-soft-strong);
}
.gs-card.is-dragging { cursor: grabbing; }
.gs-card-inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 20px 22px;
  width: 100%;
}
.gs-card-dot {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #cfe0ff);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.gs-card-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.gs-card-text strong {
  font-size: 15px;
  font-weight: 650;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.gs-card-text span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Wallpaper swatches */
.gs-walls { --swatch-min: 54px; }
.gs-wall { aspect-ratio: 16 / 11; }

/* ── Output ─────────────────────────────────────────────────────────────── */
.gs-css { --code-output-max-h: 220px; user-select: all; }

.gs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }