/* Shy-玻璃 — component styles. Every value comes from tokens.css; nothing here re-declares a token. */

@property --sg-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --sg-mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --sg-my { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

body { margin: 0; font-family: var(--font-sans); background: var(--mist-000); color: var(--ink); -webkit-font-smoothing: antialiased; }
.sg-stage { padding: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.sg-stage--col { flex-direction: column; align-items: stretch; }
.sg-stage--mist { min-height: 100vh; box-sizing: border-box; align-content: flex-start; background:
  radial-gradient(40% 60% at 15% 20%, color-mix(in srgb, var(--glow-indigo) 30%, transparent), transparent 70%),
  radial-gradient(35% 50% at 85% 80%, color-mix(in srgb, var(--glow-teal) 30%, transparent), transparent 70%),
  var(--mist-000); }

/* ---------- focus: double ring, always ≥3:1 on mist, glass or nebula ---------- */
.sg-focusable:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); }

/* ---------- grain: the texture that makes nebula and pulse surfaces feel physical ---------- */
.sg-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain); mix-blend-mode: overlay;
}

/* ---------- shared motion primitives ---------- */
.sg-press { transition: transform var(--duration-quick) var(--ease-liquid); }
.sg-press:active { transform: scale(.96); }
@keyframes sg-spin { to { --sg-angle: 360deg; } }
@keyframes sg-blur-in { from { opacity: 0; filter: blur(6px); transform: translateY(4px) scale(.98); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes sg-reveal-x { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes sg-drift { 0% { rotate: 0deg; scale: 1; } 50% { rotate: 8deg; scale: 1.08; } 100% { rotate: -6deg; scale: 1.02; } }
@keyframes sg-dot-pulse { 0%, 100% { opacity: .22; scale: .7; } 40% { opacity: 1; scale: 1; } }
.sg-blur-in { animation: sg-blur-in var(--duration-smooth) var(--ease-liquid) both; }

/* ---------- Icon ---------- */
.sg-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Button ---------- */
.sg-btn { position: relative; isolation: isolate; font: inherit; font-size: 15px; font-weight: 500; line-height: 1; height: 44px; padding: 0 22px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform var(--duration-quick) var(--ease-liquid), background-color var(--duration-instant), box-shadow var(--duration-base) var(--ease-liquid); }
.sg-btn:hover { box-shadow: var(--shadow-lift); }
.sg-btn:active { transform: scale(.96); }
.sg-btn--ink { background: var(--ink); color: var(--ink-inverse); box-shadow: var(--shadow-lift); }
.sg-btn--glass { background: var(--glass-strong); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); }
.sg-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.sg-btn--sm { height: 32px; padding: 0 14px; font-size: 13px; }
.sg-btn[disabled] { opacity: var(--disabled); cursor: not-allowed; transform: none; }
/* metal: a live liquid-metal ring around an ink core */
.sg-btn--metal { background: var(--ink); color: var(--ink-inverse); border: 0; padding: 0 24px; box-shadow: 0 10px 24px -10px rgba(20,25,35,.6); }
.sg-btn--metal::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; padding: 2px;
  background: conic-gradient(from var(--sg-angle), #6b7280, #f8fafc, #9ca3af, #e5e7eb, #4b5563, #f1f5f9, #6b7280);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sg-spin var(--duration-loop) linear infinite; }
.sg-btn--metal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 140% at var(--sg-mx) -20%, rgba(255,255,255,.28), transparent 55%); transition: --sg-mx var(--duration-smooth) var(--ease-liquid); }
.sg-btn--metal.is-chromatic::before { background: conic-gradient(from var(--sg-angle), var(--glow-teal), #ffffff, var(--glow-magenta), var(--glow-indigo), #ffffff, var(--glow-ember), var(--glow-teal)); }
.sg-btn--metal:hover::before { animation-duration: calc(var(--duration-loop) / 3); }

/* ---------- IconButton ---------- */
.sg-iconbtn { width: 44px; height: 44px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; cursor: pointer; padding: 0;
  background: var(--glass); color: var(--ink); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm));
  transition: transform var(--duration-quick) var(--ease-liquid), background-color var(--duration-instant); }
.sg-iconbtn:hover { background: var(--glass-strong); }
.sg-iconbtn:hover .sg-icon { transform: translate(1px, -1px); }
.sg-iconbtn .sg-icon { transition: transform var(--duration-base) var(--ease-spring-bouncy); }
.sg-iconbtn:active { transform: scale(.92); }
.sg-iconbtn--sm { width: 32px; height: 32px; }
.sg-iconbtn--sm .sg-icon { width: 16px; height: 16px; }
.sg-iconbtn--lg { width: 56px; height: 56px; }
.sg-iconbtn--nebula { background: rgba(255,255,255,.06); color: var(--on-nebula); border-color: rgba(255,255,255,.5); }
.sg-iconbtn--nebula:hover { background: rgba(255,255,255,.14); }

/* ---------- PillTabs (gliding indicator) ---------- */
.sg-tabs { position: relative; display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.sg-tabs::-webkit-scrollbar { display: none; }
.sg-tab { position: relative; z-index: 1; font: inherit; font-size: 15px; font-weight: 500; height: 44px; padding: 0 20px; max-width: 168px; flex: none; border-radius: var(--radius-pill);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  background: var(--glass); color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm));
  transition: background-color var(--duration-base) var(--ease-liquid), color var(--duration-base), border-color var(--duration-base), transform var(--duration-quick) var(--ease-liquid); }
.sg-tab:hover { color: var(--ink); }
.sg-tab:active { transform: scale(.96); }
.sg-tab[aria-selected="true"] { background: transparent; color: var(--ink); border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="dark"] .sg-tab[aria-selected="true"] { color: var(--ink-inverse); }
.sg-tabs-ind { position: absolute; z-index: 0; top: 2px; left: 0; height: 44px; border-radius: var(--radius-pill); background: var(--solid); box-shadow: var(--shadow-lift);
  transition: transform var(--duration-spring) var(--ease-spring-soft), width var(--duration-spring) var(--ease-spring-soft); pointer-events: none; }
.sg-tabs--sm .sg-tab { height: 32px; padding: 0 14px; font-size: 13px; }
.sg-tabs--sm .sg-tabs-ind { height: 32px; }

/* ---------- GlassCard (+ pointer spotlight) ---------- */
.sg-glass { position: relative; border-radius: var(--radius-md); padding: var(--space-6); color: var(--ink);
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4);
  transition: transform var(--duration-base) var(--ease-liquid), box-shadow var(--duration-base) var(--ease-liquid); }
.sg-glass--lg { border-radius: var(--radius-lg); padding: var(--space-8); }
.sg-glass--strong { background: var(--glass-strong); }
.sg-glass--spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--sg-mx) var(--sg-my), color-mix(in srgb, var(--glass-edge) 70%, transparent), transparent 70%);
  transition: opacity var(--duration-smooth) var(--ease-liquid); }
.sg-glass--spot:hover::before { opacity: 1; }
.sg-glass--spot:hover { transform: translateY(-2px); box-shadow: var(--shadow-glass), var(--shadow-lift); }
.sg-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); position: relative; }
.sg-card-title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 500; }
.sg-card-sub { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }

/* ---------- NebulaPanel (drifting light + pointer parallax) ---------- */
.sg-nebula { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-xl); padding: var(--space-8);
  color: var(--on-nebula); background: var(--nebula-deep);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 48px rgba(255,255,255,.10); }
.sg-nebula::before { content: ""; position: absolute; inset: -18%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 22% at 46% 96%, var(--nebula-glow) 0%, transparent 100%),
    radial-gradient(50% 42% at 34% 82%, var(--nebula-teal) 0%, transparent 100%),
    radial-gradient(38% 48% at 92% 56%, var(--nebula-mauve) 0%, transparent 100%),
    radial-gradient(56% 44% at 46% 40%, var(--nebula-indigo) 0%, transparent 100%);
  translate: calc((var(--sg-mx) - 50%) * .12) calc((var(--sg-my) - 50%) * .12);
  transition: --sg-mx var(--duration-slow) var(--ease-liquid), --sg-my var(--duration-slow) var(--ease-liquid);
  animation: sg-drift var(--duration-drift) var(--ease-in-out) infinite alternate; }
.sg-nebula > .sg-nebula-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-6); height: 100%; }
.sg-nebula-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.sg-nebula-title { margin: 0; font-size: 24px; line-height: 30px; font-weight: 400; letter-spacing: -.01em; }
.sg-nebula-foot { display: flex; align-items: center; justify-content: center; gap: var(--space-3); font-size: 17px; text-shadow: 0 1px 8px rgba(8,14,30,.45); }
.sg-nebula--compact { border-radius: var(--radius-lg); padding: var(--space-6); }

/* ---------- DotNumber (+ rolling digits) ---------- */
.sg-dot { white-space: nowrap; font-family: var(--font-dot); font-weight: 800; font-variation-settings: "ROND" 100; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1; }
.sg-dot-point { display: inline-block; width: .13em; height: .13em; border-radius: 50%; background: currentColor; margin: 0 .1em; vertical-align: baseline; }
.sg-dot--glow .sg-dot-point { box-shadow: 0 0 8px rgba(255,255,255,.7); }
.sg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sg-dot--glow { text-shadow: 0 0 10px rgba(255,255,255,.55), 0 0 2px rgba(255,255,255,.8); }
.sg-dot-unit { font-family: var(--font-sans); font-size: 13px; font-weight: 500; margin-left: var(--space-1); letter-spacing: 0; text-shadow: none; }
.sg-roll { display: inline-block; height: 1em; overflow: hidden; vertical-align: -.12em; padding: 0 .02em; margin: 0 -.02em; }
.sg-roll-strip { display: flex; flex-direction: column; transition: transform var(--duration-spring) var(--ease-spring-bouncy), filter var(--duration-smooth) var(--ease-liquid); }
.sg-roll-strip > span { height: 1em; line-height: 1; }
.sg-roll.is-moving .sg-roll-strip { filter: blur(.6px); }

/* ---------- DeltaChip ---------- */
.sg-chip { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); }
.sg-chip .sg-icon { width: 13px; height: 13px; stroke-width: 2; }
.sg-chip--on-color { color: var(--on-pulse); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.sg-chip--surface { color: var(--ink); background: var(--glass-strong); border: 1px solid var(--line); }
.sg-chip--surface.is-up .sg-icon { color: var(--status-good); }
.sg-chip--surface.is-down .sg-icon { color: var(--status-bad); }
.sg-chip > * { animation: sg-blur-in var(--duration-smooth) var(--ease-liquid) both; }

/* ---------- MetricPill (liquid capsule; the glow follows the pointer) ---------- */
.sg-pill { --tone: var(--pulse-indigo); --tone-glow: var(--glow-indigo); --sg-mx: 92%; --sg-my: 110%;
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-pill); min-height: 112px; box-sizing: border-box;
  padding: 20px 28px 22px; color: var(--on-pulse); display: flex; flex-direction: column; justify-content: center; gap: 10px;
  background:
    radial-gradient(60% 70% at var(--sg-mx) var(--sg-my), color-mix(in srgb, var(--tone-glow) 55%, transparent), transparent 70%),
    radial-gradient(50% 60% at 6% -10%, color-mix(in srgb, var(--tone-glow) 45%, transparent), transparent 70%),
    var(--tone);
  box-shadow: inset 0 0 22px 2px color-mix(in srgb, var(--tone-glow) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.55),
    0 22px 40px -22px var(--tone);
  transition: transform var(--duration-smooth) var(--ease-spring-soft), --sg-mx var(--duration-slow) var(--ease-liquid), --sg-my var(--duration-slow) var(--ease-liquid); }
.sg-pill::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; border: 1px dashed rgba(255,255,255,.42); pointer-events: none; z-index: 0;
  transition: inset var(--duration-smooth) var(--ease-spring-soft); }
.sg-pill > * { position: relative; z-index: 1; }
.sg-pill:hover { transform: translateY(-3px) scale(1.015); }
.sg-pill:hover::before { inset: 5px; }
.sg-pill:active { transform: scale(.98); }
.sg-pill--magenta { --tone: var(--pulse-magenta); --tone-glow: var(--glow-magenta); }
.sg-pill--indigo { --tone: var(--pulse-indigo); --tone-glow: var(--glow-indigo); }
.sg-pill--ember { --tone: var(--pulse-ember); --tone-glow: var(--glow-ember); }
.sg-pill--teal { --tone: var(--pulse-teal); --tone-glow: var(--glow-teal); }
.sg-pill-label { text-align: center; font-size: 13px; line-height: 18px; font-weight: 500; }
.sg-pill-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.sg-pill-row .sg-chip { align-self: center; }
.sg-pill--sm { min-height: 88px; padding: 14px 22px 16px; gap: 6px; }
.sg-add { min-height: 112px; border-radius: var(--radius-pill); border: 0; background: var(--solid); color: var(--ink); box-shadow: var(--shadow-lift);
  display: grid; place-items: center; cursor: pointer; font: inherit; transition: transform var(--duration-quick) var(--ease-liquid); }
.sg-add:active { transform: scale(.96); }
.sg-add .sg-icon { width: 26px; height: 26px; stroke-width: 1.25; transition: transform var(--duration-spring) var(--ease-spring-bouncy); }
.sg-add:hover .sg-icon { transform: rotate(90deg); }
[data-theme="dark"] .sg-add { color: var(--ink-inverse); }
.sg-add--sm { min-height: 88px; }

/* ---------- StatFigure ---------- */
.sg-stat { display: flex; flex-direction: column; gap: var(--space-1); color: var(--ink); }
.sg-stat-value { display: flex; align-items: flex-start; gap: 2px; font-variant-numeric: tabular-nums; }
.sg-stat-value > span[class^="numeral"] { animation: sg-blur-in var(--duration-smooth) var(--ease-liquid) both; }
.sg-stat-affix { font-size: 15px; line-height: 20px; font-weight: 400; color: var(--ink-2); margin-top: 6px; }
.sg-stat-label { font-size: 12px; line-height: 16px; color: var(--ink-2); display: flex; align-items: center; gap: var(--space-2); }

/* ---------- SignalCurve ---------- */
.sg-curve { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; }
.sg-curve-draw { animation: sg-reveal-x var(--duration-slow) var(--ease-liquid) both; }
.sg-curve-line { fill: none; stroke-width: 2; stroke-linecap: round; }
.sg-curve-dots { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: .1 5; }
.sg-curve-grid { stroke-width: 1; stroke-linecap: round; stroke-dasharray: .1 5; fill: none; }
.sg-curve-lens { transition: transform var(--duration-spring) var(--ease-spring-soft); }
.sg-curve-clip { transition: x var(--duration-spring) var(--ease-spring-soft), width var(--duration-spring) var(--ease-spring-soft); }
.sg-curve-drop { transition: transform var(--duration-spring) var(--ease-spring-soft); }
.sg-curve--nebula { color: var(--on-nebula); }
.sg-curve--nebula .sg-curve-line, .sg-curve--nebula .sg-curve-dots { stroke: var(--on-nebula); }
.sg-curve--nebula .sg-curve-grid { stroke: rgba(243,245,249,.55); }
.sg-curve--nebula .sg-curve-lens-glass { fill: rgba(255,255,255,.16); stroke: rgba(255,255,255,.6); }
.sg-curve--nebula .sg-curve-tip { fill: var(--on-nebula); }
.sg-curve--surface { color: var(--ink); }
.sg-curve--surface .sg-curve-line, .sg-curve--surface .sg-curve-dots { stroke: var(--ink); }
.sg-curve--surface .sg-curve-grid { stroke: var(--ink-3); }
.sg-curve--surface .sg-curve-lens-glass { fill: var(--glass-strong); stroke: var(--line-strong); }
.sg-curve--surface .sg-curve-tip { fill: var(--ink); }
.sg-curve-label { font-family: var(--font-sans); font-size: 12px; font-weight: 500; fill: currentColor; }

/* ---------- DayDial (gliding day) ---------- */
.sg-dial { display: flex; flex-direction: column; gap: var(--space-5); align-items: stretch; }
.sg-dial-days { position: relative; display: flex; justify-content: space-between; gap: var(--space-1); }
.sg-day { position: relative; z-index: 1; width: 40px; height: auto; aspect-ratio: 1; flex: 0 1 40px; min-width: 28px; border-radius: var(--radius-pill); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; padding: 0;
  background: transparent; transition: color var(--duration-base) var(--ease-liquid), border-color var(--duration-base), transform var(--duration-quick) var(--ease-liquid); }
.sg-day:active { transform: scale(.9); }
.sg-dial--nebula .sg-day { color: var(--on-nebula); border: 1px solid rgba(255,255,255,.45); }
.sg-dial--surface .sg-day { color: var(--ink-2); border: 1px solid var(--line-strong); }
.sg-day[aria-pressed="true"] { border-color: transparent; color: var(--nebula-deep); }
.sg-dial--surface .sg-day[aria-pressed="true"] { color: var(--ink); }
[data-theme="dark"] .sg-dial--surface .sg-day[aria-pressed="true"] { color: var(--ink-inverse); }
.sg-dial-ind { position: absolute; z-index: 0; top: 0; left: 0; width: var(--sg-day-w, 40px); height: var(--sg-day-w, 40px); border-radius: var(--radius-pill); background: var(--solid); box-shadow: var(--shadow-lift);
  transition: transform var(--duration-spring) var(--ease-spring-soft); pointer-events: none; }
.sg-dial-range { display: flex; align-items: center; justify-content: center; gap: var(--space-3); font-size: 17px; line-height: 24px; }
.sg-dial-range > span { display: inline-block; }
.sg-dial-range button { background: none; border: 0; padding: 4px; color: inherit; cursor: pointer; display: inline-grid; place-items: center; border-radius: var(--radius-pill);
  transition: transform var(--duration-quick) var(--ease-liquid); }
.sg-dial-range button:active { transform: scale(.85); }
.sg-dial-range .sg-icon { width: 16px; height: 16px; }
.sg-dial--nebula .sg-dial-range { text-shadow: 0 1px 8px rgba(8,14,30,.5); }

/* ---------- BorderBeam: a soft light riding the edge ---------- */
.sg-beam { position: relative; isolation: isolate; border-radius: var(--radius-md); }
.sg-beam::before, .sg-beam::after { content: ""; position: absolute; inset: calc(var(--sg-beam-w, 1.5px) * -1); border-radius: inherit; pointer-events: none; z-index: 2;
  padding: var(--sg-beam-w, 1.5px);
  background: conic-gradient(from var(--sg-angle), transparent 0 64%, color-mix(in srgb, var(--sg-beam-c, var(--glow-teal)) 70%, transparent) 76%, #ffffff 82%, var(--sg-beam-c2, var(--glow-indigo)) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sg-spin var(--sg-beam-d, var(--duration-loop)) linear infinite; }
.sg-beam::after { filter: blur(8px); opacity: .8; padding: calc(var(--sg-beam-w, 1.5px) * 3); inset: calc(var(--sg-beam-w, 1.5px) * -3); }
.sg-beam > * { border-radius: inherit; }
.sg-beam--pulse { --sg-beam-c: var(--glow-magenta); --sg-beam-c2: var(--glow-ember); }
.sg-beam--mono { --sg-beam-c: var(--ink-3); --sg-beam-c2: var(--ink); }
.sg-beam.is-paused::before, .sg-beam.is-paused::after { animation-play-state: paused; opacity: 0; transition: opacity var(--duration-smooth); }

/* ---------- ThinkingOrb / MatrixLoader ---------- */
.sg-orb { display: inline-block; vertical-align: middle; }
.sg-matrix { display: inline-grid; grid-template-columns: repeat(4, var(--sg-mx-dot, 6px)); gap: var(--sg-mx-gap, 4px); color: inherit; }
.sg-matrix > i { width: var(--sg-mx-dot, 6px); height: var(--sg-mx-dot, 6px); border-radius: 50%; background: currentColor;
  animation: sg-dot-pulse calc(var(--duration-loop) / 4) var(--ease-in-out) infinite both; }

/* ---------- GooeyMenu: a liquid + that splits into actions ---------- */
.sg-goo { position: relative; width: var(--sg-goo-size, 56px); height: var(--sg-goo-size, 56px); }
.sg-goo-blobs { position: absolute; inset: -120px; pointer-events: none; }
.sg-goo-blob, .sg-goo-btn { position: absolute; left: 50%; top: 50%; width: var(--sg-goo-size, 56px); height: var(--sg-goo-size, 56px); margin: calc(var(--sg-goo-size, 56px) / -2);
  border-radius: 50%; transition: transform var(--duration-spring) var(--ease-spring-bouncy); transition-delay: var(--sg-d, 0ms); }
.sg-goo-blob { background: var(--sg-goo-c, var(--ink)); }
.sg-goo-blob.is-main { transition: transform var(--duration-quick) var(--ease-liquid); }
.sg-goo-btn { display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; background: transparent; color: var(--sg-goo-on, var(--ink-inverse)); font: inherit; }
.sg-goo-btn.is-action { width: 44px; height: 44px; margin: -22px; opacity: 0; scale: .4; transition: transform var(--duration-spring) var(--ease-spring-bouncy), opacity var(--duration-base) var(--ease-liquid), scale var(--duration-spring) var(--ease-spring-bouncy); transition-delay: var(--sg-d, 0ms); }
.sg-goo.is-open .sg-goo-btn.is-action { opacity: 1; scale: 1; }
.sg-goo-btn.is-action:not(:focus-visible):hover { scale: 1.1; }
.sg-goo-btn .sg-icon { transition: transform var(--duration-spring) var(--ease-spring-bouncy); }
.sg-goo.is-open .sg-goo-btn.is-toggle .sg-icon { transform: rotate(135deg); }
.sg-goo-blob.is-action { width: 44px; height: 44px; margin: -22px; }
.sg-goo-tip { position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0; font-size: 12px; white-space: nowrap; color: var(--ink); background: var(--glass-strong);
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 4px 8px; opacity: 0; pointer-events: none; transition: opacity var(--duration-quick); }
.sg-goo-btn:hover .sg-goo-tip, .sg-goo-btn:focus-visible .sg-goo-tip { opacity: 1; }

/* ---------- Tilt: pointer-driven 3D tilt with a glass glare ---------- */
.sg-tilt { perspective: 900px; display: block; }
.sg-tilt-inner { position: relative; transform-style: preserve-3d; border-radius: inherit;
  transform: rotateX(var(--sg-rx, 0deg)) rotateY(var(--sg-ry, 0deg)); transition: transform var(--duration-spring) var(--ease-spring-soft); }
.sg-tilt.is-active .sg-tilt-inner { transition: transform var(--duration-quick) linear; }
.sg-tilt-glare { position: absolute; inset: 0; z-index: 3; border-radius: var(--sg-tilt-r, var(--radius-xl)); pointer-events: none; mix-blend-mode: soft-light; opacity: 0;
  background: radial-gradient(60% 60% at var(--sg-mx) var(--sg-my), rgba(255,255,255,.75), transparent 60%);
  transition: opacity var(--duration-smooth) var(--ease-liquid); }
.sg-tilt.is-active .sg-tilt-glare { opacity: 1; }

/* ---------- Switch: spring thumb that stretches like liquid ---------- */
.sg-switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: 15px; color: var(--ink); background: none; border: 0; padding: 0; font-family: inherit; }
.sg-switch-track { position: relative; width: 52px; height: 32px; border-radius: var(--radius-pill); background: var(--mist-200); border: 1px solid var(--line-strong); box-sizing: border-box;
  transition: background-color var(--duration-base) var(--ease-liquid), border-color var(--duration-base); }
.sg-switch-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--solid); box-shadow: var(--shadow-lift);
  transition: transform var(--duration-spring) var(--ease-spring-bouncy), width var(--duration-base) var(--ease-liquid), background-color var(--duration-base); }
.sg-switch:active .sg-switch-thumb { width: 30px; }
.sg-switch[aria-checked="true"] .sg-switch-track { background: var(--ink); border-color: var(--ink); }
.sg-switch[aria-checked="true"] .sg-switch-thumb { transform: translateX(20px); background: var(--ink-inverse); }
.sg-switch[aria-checked="true"]:active .sg-switch-thumb { transform: translateX(14px); }

/* ---------- GlassIsland: a pill that morphs between compact and expanded ---------- */
.sg-island { position: relative; overflow: hidden; color: var(--on-nebula); background: var(--nebula-deep); border-radius: 28px; cursor: pointer; border: 0; padding: 0; font: inherit; text-align: left;
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: width var(--duration-smooth) var(--ease-spring-soft), height var(--duration-smooth) var(--ease-spring-soft), border-radius var(--duration-smooth) var(--ease-spring-soft); }
.sg-island.is-open { border-radius: 36px; }
.sg-island-face { position: absolute; top: 0; left: 0; padding: 10px 16px; box-sizing: border-box; white-space: nowrap;
  transition: opacity var(--duration-base) var(--ease-liquid), filter var(--duration-base) var(--ease-liquid), transform var(--duration-smooth) var(--ease-spring-soft); }
.sg-island-face.is-hidden { opacity: 0; filter: blur(8px); transform: scale(.94); pointer-events: none; }
.sg-island-face.is-expanded { padding: 20px 24px; }

/* ---------- BottomSheet: draggable glass sheet with snap points ---------- */
.sg-sheet-scrim { position: absolute; inset: 0; z-index: 20; background: rgba(11,15,23,.28); opacity: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity var(--duration-smooth) var(--ease-liquid); }
.sg-sheet-scrim.is-on { opacity: 1; pointer-events: auto; }
.sg-sheet { position: absolute; left: 8px; right: 8px; bottom: 0; box-sizing: border-box; z-index: 21; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 8px var(--space-5) var(--space-6);
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-float); color: var(--ink);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.5); backdrop-filter: blur(var(--blur-lg)) saturate(1.5);
  touch-action: none; transition: transform var(--duration-smooth) var(--ease-spring-soft); }
.sg-sheet.is-dragging { transition: none; }
.sg-sheet-handle { width: 40px; height: 5px; border-radius: var(--radius-pill); background: var(--ink-3); margin: 0 auto var(--space-4); cursor: grab; }

/* ================= Infinite canvas ================= */
.sg-canvas { container-type: inline-size; position: relative; overflow: hidden; isolation: isolate; outline: none; user-select: none; -webkit-user-select: none; touch-action: none;
  background-color: var(--mist-000); border-radius: var(--radius-lg); min-height: 320px; cursor: default; }
.sg-canvas:focus-visible { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); }
.sg-canvas--dots { background-image: radial-gradient(circle, var(--canvas-dot) 1.1px, transparent 1.7px); }
.sg-canvas--lines { background-image: linear-gradient(var(--canvas-grid) 1px, transparent 1px), linear-gradient(90deg, var(--canvas-grid) 1px, transparent 1px); }
.sg-canvas--none { background-image: none; }
.sg-canvas--glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 20% 25%, color-mix(in srgb, var(--glow-indigo) 22%, transparent), transparent 70%),
    radial-gradient(36% 46% at 85% 80%, color-mix(in srgb, var(--glow-teal) 22%, transparent), transparent 70%); }
.sg-canvas.is-animating { transition: background-position var(--duration-smooth) var(--ease-spring-soft), background-size var(--duration-smooth) var(--ease-spring-soft); }
.sg-canvas.is-animating .sg-canvas-world { transition: transform var(--duration-smooth) var(--ease-spring-soft); }
.sg-canvas.is-hand { cursor: grab; }
.sg-canvas.is-panning, .sg-canvas.is-panning * { cursor: grabbing !important; }
.sg-canvas.is-connecting { cursor: crosshair; }
.sg-canvas-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.sg-canvas-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.sg-canvas-edges .sg-edge-hit { pointer-events: stroke; }

/* Edge */
.sg-edge { --ec: var(--port-any); }
.sg-edge--text { --ec: var(--port-text); } .sg-edge--image { --ec: var(--port-image); } .sg-edge--number { --ec: var(--port-number); } .sg-edge--audio { --ec: var(--port-audio); }
.sg-edge--st-ok { --ec: var(--status-good); } .sg-edge--st-running { --ec: var(--status-busy); } .sg-edge--st-warn { --ec: var(--status-warn); } .sg-edge--st-error { --ec: var(--status-bad); } .sg-edge--st-idle, .sg-edge--st-off { --ec: var(--status-idle); }
.sg-edge path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sg-edge-hit { stroke: transparent; stroke-width: 16; cursor: pointer; }
.sg-edge-line { stroke: var(--edge-idle); stroke-width: 2; stroke-dasharray: .1 6; transition: stroke var(--duration-base) var(--ease-liquid); }
.sg-edge.is-done .sg-edge-line, .sg-edge.is-flow .sg-edge-line { stroke: var(--ec); stroke-dasharray: none; }
.sg-edge.is-flow .sg-edge-line { stroke-opacity: .45; }
.sg-edge-flow { stroke: var(--ec); stroke-width: 2.5; stroke-dasharray: 10 14; animation: sg-edge-flow calc(var(--duration-loop) / 6) linear infinite; }
.sg-edge-dot { fill: var(--ec); filter: drop-shadow(0 0 4px var(--ec)); }
.sg-edge.is-error .sg-edge-line { stroke: var(--status-bad); stroke-dasharray: 6 6; }
.sg-edge.is-draft .sg-edge-line { stroke: var(--ec); stroke-dasharray: 4 6; animation: sg-edge-flow calc(var(--duration-loop) / 8) linear infinite; }
.sg-edge-halo { stroke: var(--canvas-select); stroke-width: 7; stroke-opacity: .22; }
.sg-edge.is-selected .sg-edge-line { stroke: var(--canvas-select); stroke-dasharray: none; stroke-width: 2.5; }
.sg-edge-trace { stroke: var(--ec); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sg-edge-trace var(--duration-slow) var(--ease-liquid) forwards; }
@keyframes sg-edge-flow { to { stroke-dashoffset: -24; } }
@keyframes sg-edge-trace { 0% { stroke-dashoffset: 1; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.sg-edge-label { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 11px; line-height: 20px; padding: 0 8px; border-radius: var(--radius-pill); color: var(--ink-2);
  background: var(--glass-strong); border: 1px solid var(--line); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); pointer-events: none; }

/* Port */
.sg-port { --pc: var(--port-any); position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; box-sizing: border-box;
  background: var(--mist-100); border: 2px solid var(--pc); cursor: crosshair; z-index: 2;
  transition: scale var(--duration-base) var(--ease-spring-bouncy), background-color var(--duration-quick), box-shadow var(--duration-base), opacity var(--duration-base); }
.sg-port::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.sg-port--in { left: -7px; } .sg-port--out { right: -7px; }
.sg-port--text { --pc: var(--port-text); } .sg-port--image { --pc: var(--port-image); } .sg-port--number { --pc: var(--port-number); } .sg-port--audio { --pc: var(--port-audio); }
.sg-port.is-connected { background: var(--pc); }
.sg-port:hover { scale: 1.35; }
.sg-port.is-valid { scale: 1.35; background: var(--pc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc) 22%, transparent); animation: sg-port-pulse 1s var(--ease-in-out) infinite alternate; }
.sg-port.is-invalid { opacity: .3; }
@keyframes sg-port-pulse { to { box-shadow: 0 0 0 9px color-mix(in srgb, var(--pc) 6%, transparent); } }

/* Node */
.sg-node { position: relative; box-sizing: border-box; border-radius: var(--radius-md); color: var(--ink); font-size: 13px;
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4);
  transition: box-shadow var(--duration-base) var(--ease-liquid), scale var(--duration-base) var(--ease-spring-bouncy), border-color var(--duration-base);
  animation: sg-node-in var(--duration-smooth) var(--ease-liquid) backwards; }
@keyframes sg-pop { from { opacity: 0; filter: blur(6px); scale: .96; } }
@keyframes sg-node-in { from { opacity: 0; filter: blur(6px); scale: .96; } }
.sg-node.is-positioned { position: absolute; left: 0; top: 0; }
.sg-node.sg-beam { position: absolute; }
.sg-node:not(.is-positioned).sg-beam { position: relative; }
.sg-node.is-selected { border-color: transparent; box-shadow: 0 0 0 2px var(--canvas-select), var(--shadow-float); }
.sg-node.is-dragging { scale: 1.02; box-shadow: 0 0 0 2px var(--canvas-select), var(--shadow-float); z-index: 5; }
.sg-node:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); }
.sg-node-head { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 12px; box-sizing: border-box; border-bottom: 1px solid var(--line); cursor: grab; }
.sg-node-icon { --nc: var(--pulse-indigo); width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--on-pulse); background: var(--nc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px -4px var(--nc); }
.sg-acc--magenta { --nc: var(--pulse-magenta); --ng: var(--glow-magenta); } .sg-acc--indigo { --nc: var(--pulse-indigo); --ng: var(--glow-indigo); }
.sg-acc--ember { --nc: var(--pulse-ember); --ng: var(--glow-ember); } .sg-acc--teal { --nc: var(--pulse-teal); --ng: var(--glow-teal); }
.sg-acc--magenta .sg-node-icon, .sg-acc--indigo .sg-node-icon, .sg-acc--ember .sg-node-icon, .sg-acc--teal .sg-node-icon { --nc: inherit; }
.sg-node-title { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-node-status { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; flex: none;
  background: var(--mist-200); color: var(--ink); animation: sg-blur-in var(--duration-smooth) var(--ease-liquid) both; }
.sg-node-status.is-running { color: var(--ink); }
.sg-node-status.is-done .sg-icon { color: var(--status-good); stroke-width: 2.4; }
.sg-node-status.is-error .sg-icon { color: var(--status-bad); stroke-width: 2.4; }
.sg-node-ports { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 0; }
.sg-node-col { display: grid; grid-auto-rows: 28px; align-content: start; }
.sg-node-row { position: relative; display: flex; align-items: center; padding: 0 14px; min-width: 0; }
.sg-node-col--out .sg-node-row { justify-content: flex-end; }
.sg-node-plabel { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-node-body { padding: 0 14px 14px; cursor: default; }
.sg-node-ports + .sg-node-body { padding-top: 2px; }
.sg-node-head + .sg-node-body { padding-top: 12px; }
/* nebula node: the one output that matters */
.sg-node--nebula { color: var(--on-nebula); border-color: rgba(255,255,255,.12);
  background: radial-gradient(60% 50% at 30% 100%, var(--nebula-teal), transparent 100%), radial-gradient(50% 60% at 100% 40%, var(--nebula-mauve), transparent 100%),
    radial-gradient(70% 60% at 40% 20%, var(--nebula-indigo), transparent 100%), var(--nebula-deep);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(255,255,255,.08); }
.sg-node--nebula .sg-node-head { border-bottom-color: rgba(255,255,255,.12); }
.sg-node--nebula .sg-node-plabel { color: var(--on-nebula-2); }
.sg-node--nebula .sg-port { background: var(--nebula-deep); --pc: var(--glow-indigo); }
.sg-node--nebula .sg-port--image { --pc: var(--glow-magenta); } .sg-node--nebula .sg-port--number { --pc: var(--glow-teal); } .sg-node--nebula .sg-port--audio { --pc: var(--glow-ember); } .sg-node--nebula .sg-port--any { --pc: var(--on-nebula-2); }
.sg-node--nebula .sg-port.is-connected { background: var(--pc); }
.sg-node--nebula .sg-node-status { background: rgba(255,255,255,.14); color: var(--on-nebula); }
.sg-node--nebula .sg-node-status.is-done .sg-icon { color: var(--glow-teal); }
/* note node: a liquid sticky */
.sg-node--note { color: var(--on-pulse); border: 0; background: radial-gradient(70% 80% at 100% 110%, color-mix(in srgb, var(--ng) 55%, transparent), transparent 70%), var(--nc);
  box-shadow: inset 0 0 18px 1px color-mix(in srgb, var(--ng) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.5), 0 18px 34px -18px var(--nc); }
.sg-node--note .sg-node-head { border-bottom: 1px dashed rgba(255,255,255,.4); }
.sg-node--note .sg-node-icon { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.sg-node--note .sg-node-body { font-size: 13px; line-height: 19px; }

/* Group */
.sg-group { position: absolute; left: 0; top: 0; box-sizing: border-box; border-radius: var(--radius-lg);
  border: 1.5px dashed color-mix(in srgb, var(--nc) 55%, transparent); background: color-mix(in srgb, var(--nc) 6%, transparent); }
.sg-group-title { position: absolute; left: 14px; top: -30px; height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-pulse); background: var(--nc); cursor: grab; white-space: nowrap; }

/* Cursor */
.sg-cursor { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; z-index: 20; transition: transform 120ms linear; }
.sg-cursor svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.sg-cursor path { fill: var(--nc); stroke: #ffffff; stroke-width: 1.2; stroke-linejoin: round; }
.sg-cursor-name { position: absolute; left: 14px; top: 16px; white-space: nowrap; font-size: 12px; line-height: 20px; padding: 0 8px; border-radius: var(--radius-pill); color: var(--on-pulse); background: var(--nc); }

/* Overlays: marquee, node toolbar, picker, minimap, controls, tool dock */
.sg-marquee { position: absolute; z-index: 15; border: 1px solid var(--canvas-select); background: var(--canvas-select-fill); border-radius: 4px; pointer-events: none; }
.sg-canvas-ui { z-index: 16; }
.sg-canvas .sg-picker, .sg-canvas .sg-nodebar { z-index: 18; }
.sg-nodebar { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-pill);
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-lift); -webkit-backdrop-filter: blur(var(--blur-lg)); backdrop-filter: blur(var(--blur-lg));
  animation: sg-pop var(--duration-base) var(--ease-liquid) backwards; white-space: nowrap; }
.sg-nodebar-btn { height: 30px; min-width: 30px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px;
  transition: background-color var(--duration-instant), transform var(--duration-quick) var(--ease-liquid); }
.sg-nodebar-btn:hover { background: var(--mist-200); }
.sg-nodebar-btn:active { transform: scale(.92); }
.sg-nodebar-btn.is-danger .sg-icon { color: var(--status-bad); }
.sg-nodebar-sep, .sg-ctl-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; flex: none; }
.sg-picker { position: absolute; width: 240px; padding: 8px; border-radius: var(--radius-md); background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4); backdrop-filter: blur(var(--blur-lg)) saturate(1.4); animation: sg-pop var(--duration-base) var(--ease-liquid) backwards; color: var(--ink); }
.sg-picker-q { width: 100%; box-sizing: border-box; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--mist-100); color: var(--ink); padding: 0 12px; font: inherit; font-size: 13px; outline: none; }
.sg-picker-q:focus-visible { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); }
.sg-picker-list { display: grid; gap: 2px; margin-top: 6px; max-height: 240px; overflow: auto; }
.sg-picker-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; height: 40px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.sg-picker-item:hover:not(:disabled) { background: var(--mist-200); }
.sg-picker-item:disabled { opacity: var(--disabled); cursor: not-allowed; }
.sg-picker-types { display: inline-flex; gap: 4px; }
.sg-picker-types .sg-port { position: static; margin: 0; width: 9px; height: 9px; cursor: inherit; }
.sg-picker-types .sg-port::after { content: none; }
.sg-picker-empty { padding: 12px; font-size: 12px; color: var(--ink-2); }
.sg-minimap { position: absolute; right: 12px; bottom: 12px; padding: 6px; border-radius: var(--radius-sm); background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-lift);
  -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); }
.sg-minimap svg { display: block; cursor: pointer; touch-action: none; }
.sg-minimap-node { fill: var(--nc); opacity: .75; }
.sg-minimap-node.is-nebula { fill: var(--nebula-deep); opacity: 1; }
.sg-minimap-view { fill: var(--canvas-select-fill); stroke: var(--canvas-select); stroke-width: 1.5; transition: x var(--duration-quick), y var(--duration-quick); }
.sg-canvas-controls, .sg-tooldock { position: absolute; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-pill);
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-lift); -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); }
.sg-canvas-controls { left: 12px; bottom: 12px; }
.sg-tooldock { left: 12px; top: 12px; flex-direction: column; }
.sg-tooldock .sg-ctl-sep { width: 18px; height: 1px; margin: 4px 0; }
.sg-ctl { height: 34px; min-width: 34px; padding: 0 8px; box-sizing: border-box; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; display: inline-grid; place-items: center; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  transition: background-color var(--duration-instant), transform var(--duration-quick) var(--ease-liquid), box-shadow var(--duration-base); }
.sg-ctl:hover { background: var(--mist-200); }
.sg-ctl:active { transform: scale(.9); }
.sg-ctl--pct { min-width: 52px; }
.sg-ctl[aria-pressed="true"] { background: var(--solid); box-shadow: var(--shadow-lift); }
[data-theme="dark"] .sg-ctl[aria-pressed="true"] { color: var(--ink-inverse); }
.sg-ctl--add { background: var(--ink); color: var(--ink-inverse); }
.sg-ctl--add:hover { background: var(--ink); }
.sg-ctl--add .sg-icon { transition: transform var(--duration-spring) var(--ease-spring-bouncy); }
.sg-ctl--add:hover .sg-icon { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .sg-edge-flow, .sg-edge.is-draft .sg-edge-line, .sg-port.is-valid, .sg-node, .sg-node-status, .sg-nodebar, .sg-picker { animation: none !important; }
  .sg-edge-trace { display: none; }
  .sg-edge-dot { display: none; }
  .sg-canvas.is-animating .sg-canvas-world, .sg-canvas.is-animating { transition: none; }
  .sg-cursor { transition: none; }
  .sg-light.is-running, .sg-light.is-error, .sg-light.is-pulse::after, .sg-ent--cell.is-running, .sg-ent.is-changed::after, .sg-bulkbar, .sg-ent.is-running .sg-ent-progress i { animation: none !important; }
}

/* ================= Node modules ================= */
/* StatusLight — shape carries the state as well as colour */
.sg-light { --sc: var(--status-idle); --lz: 8px; position: relative; display: inline-block; flex: none; width: var(--lz); height: var(--lz); box-sizing: border-box; vertical-align: middle;
  transition: background-color var(--duration-base) var(--ease-liquid), border-color var(--duration-base), scale var(--duration-base) var(--ease-spring-bouncy), rotate var(--duration-base) var(--ease-spring-bouncy), border-radius var(--duration-base); }
.sg-light--xs { --lz: 6px; } .sg-light--sm { --lz: 8px; } .sg-light--md { --lz: 10px; } .sg-light--lg { --lz: 14px; } .sg-light--xl { --lz: 20px; }
.sg-light.is-ok { --sc: var(--status-good); background: var(--sc); border-radius: 50%; box-shadow: 0 0 calc(var(--lz) * .9) color-mix(in srgb, var(--sc) 50%, transparent); }
.sg-light.is-running { --sc: var(--status-busy); border-radius: 50%; background: conic-gradient(var(--sc) 0 60%, color-mix(in srgb, var(--sc) 24%, transparent) 60% 100%); animation: sg-light-spin 1.1s linear infinite; }
.sg-light.is-warn { --sc: var(--status-warn); background: var(--sc); border-radius: 1.5px; scale: .8; rotate: 45deg; }
.sg-light.is-error { --sc: var(--status-bad); background: var(--sc); border-radius: 2px; animation: sg-light-blink 1.6s var(--ease-in-out) infinite; }
.sg-light.is-idle { --sc: var(--status-idle); background: var(--sc); border-radius: 50%; scale: .55; }
.sg-light.is-off { --sc: var(--status-idle); background: transparent; border: max(1.5px, calc(var(--lz) * .2)) solid var(--sc); border-radius: 50%; }
.sg-light.is-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sc); animation: sg-light-ping 2.4s var(--ease-liquid) infinite; }
@keyframes sg-light-spin { to { rotate: 360deg; } }
@keyframes sg-light-blink { 50% { opacity: .45; } }
@keyframes sg-light-ping { 0% { opacity: .55; scale: 1; } 70%, 100% { opacity: 0; scale: 2.6; } }

/* EntityNode */
.sg-ent { --sc: var(--status-idle); position: relative; box-sizing: border-box; color: var(--ink); font-size: 13px; cursor: pointer; outline: none; -webkit-user-select: none; user-select: none;
  transition: transform var(--duration-base) var(--ease-spring-bouncy), box-shadow var(--duration-base) var(--ease-liquid), background-color var(--duration-base), border-color var(--duration-base); }
.sg-ent.is-ok { --sc: var(--status-good); } .sg-ent.is-running { --sc: var(--status-busy); } .sg-ent.is-warn { --sc: var(--status-warn); } .sg-ent.is-error { --sc: var(--status-bad); }
.sg-ent:focus-visible { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); z-index: 3; }
.sg-ent.is-selected { box-shadow: 0 0 0 2px var(--canvas-select), 0 0 0 5px var(--canvas-select-fill); z-index: 2; }
.sg-ent.is-changed::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--sc); pointer-events: none; animation: sg-ent-ripple 900ms var(--ease-liquid) forwards; }
@keyframes sg-ent-ripple { from { opacity: 1; scale: .92; } to { opacity: 0; scale: 1.3; } }
.sg-ent-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sg-ent-sub { font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-ent-main { display: grid; min-width: 0; flex: 1; gap: 1px; }
.sg-ent-avatar { --nc: var(--pulse-indigo); position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--on-pulse); background: var(--nc); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.sg-acc--magenta .sg-ent-avatar, .sg-acc--indigo .sg-ent-avatar, .sg-acc--ember .sg-ent-avatar, .sg-acc--teal .sg-ent-avatar { --nc: inherit; }
.sg-ent-badge { position: absolute; right: -1px; bottom: -1px; box-shadow: 0 0 0 2.5px var(--mist-100); }
.sg-ent-badge.is-off { background: var(--mist-100); }
.sg-ent-badge.is-idle { scale: .8; }
/* light */
.sg-ent--light { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; }
.sg-ent--light:hover { transform: scale(1.5); }
/* cell */
.sg-ent--cell { display: inline-grid; place-items: center; width: var(--sg-cell, 24px); height: var(--sg-cell, 24px); border-radius: 6px;
  background: color-mix(in srgb, var(--sc) 16%, var(--mist-100)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 38%, transparent); }
.sg-ent--cell.is-idle, .sg-ent--cell.is-off { background: var(--mist-200); box-shadow: inset 0 0 0 1px var(--line); }
.sg-ent--cell:hover { transform: scale(1.3); z-index: 3; }
.sg-ent--cell.is-selected { box-shadow: 0 0 0 2px var(--canvas-select); }
.sg-ent--cell.is-running { background-image: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--sc) 22%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: sg-ent-shimmer 1.6s linear infinite; }
@keyframes sg-ent-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* chip */
.sg-ent--chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--glass-strong); border: 1px solid var(--line); max-width: 100%; }
.sg-ent--chip .sg-ent-metric { margin-left: auto; padding-left: 6px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sg-ent--chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.sg-ent--chip.is-selected { box-shadow: 0 0 0 2px var(--canvas-select); }
/* compact */
.sg-ent--compact { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 14px 0 12px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); }
.sg-ent--compact .sg-ent-name { font-size: 14px; line-height: 20px; }
.sg-ent--compact .sg-ent-metric { display: grid; justify-items: end; flex: none; }
.sg-ent--compact .sg-ent-metric b { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; animation: sg-pop var(--duration-smooth) var(--ease-liquid) backwards; }
.sg-ent--compact .sg-ent-metric small { font-size: 11px; color: var(--ink-2); }
.sg-ent--compact:hover { transform: translateY(-2px); box-shadow: var(--shadow-glass), var(--shadow-lift); }
.sg-ent--compact.is-selected { box-shadow: 0 0 0 2px var(--canvas-select), var(--shadow-lift); }
.sg-ent--compact::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sc); opacity: 0; }
/* card + hero */
.sg-ent--card, .sg-ent--hero { display: grid; gap: 14px; padding: 16px; border-radius: var(--radius-md); align-content: start; }
.sg-ent--card { background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); }
.sg-ent--card:hover, .sg-ent--hero:hover { transform: translateY(-3px); }
.sg-ent--card:hover { box-shadow: var(--shadow-glass), var(--shadow-lift); }
.sg-ent--card.is-selected { box-shadow: 0 0 0 2px var(--canvas-select), var(--shadow-float); }
.sg-ent-head { display: flex; align-items: center; gap: 12px; }
.sg-ent--card .sg-ent-name, .sg-ent--hero .sg-ent-name { font-size: 15px; line-height: 20px; }
.sg-ent-state { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; flex: none; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500;
  background: color-mix(in srgb, var(--sc) 13%, transparent); color: var(--ink); animation: sg-pop var(--duration-smooth) var(--ease-liquid) backwards; }
.sg-ent-big { display: flex; align-items: baseline; gap: 8px; }
.sg-ent-bigval { font-size: 32px; line-height: 36px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; animation: sg-pop var(--duration-smooth) var(--ease-liquid) backwards; }
.sg-ent-biglabel { font-size: 12px; color: var(--ink-2); }
.sg-ent-spark { display: block; width: 100%; height: 36px; overflow: visible; }
.sg-ent-spark-line { fill: none; stroke: var(--sc); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sg-ent-spark-area { fill: color-mix(in srgb, var(--sc) 14%, transparent); }
.sg-ent-progress { height: 6px; border-radius: var(--radius-pill); background: var(--mist-200); overflow: hidden; }
.sg-ent-progress i { display: block; height: 100%; border-radius: inherit; background: var(--sc); transition: width var(--duration-slow) var(--ease-spring-soft); }
.sg-ent.is-running .sg-ent-progress i { background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: sg-ent-shimmer 1.4s linear infinite; background-color: var(--sc); }
.sg-ent-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-ent-tags span { font-family: var(--font-mono); font-size: 11px; line-height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--mist-200); color: var(--ink-2); }
.sg-ent-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-ent--hero { color: var(--on-nebula); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-float);
  background: radial-gradient(60% 50% at 30% 100%, var(--nebula-teal), transparent 100%), radial-gradient(50% 60% at 100% 40%, var(--nebula-mauve), transparent 100%), radial-gradient(70% 60% at 40% 20%, var(--nebula-indigo), transparent 100%), var(--nebula-deep); }
.sg-ent--hero.is-ok { --sc: var(--glow-teal); } .sg-ent--hero.is-running { --sc: var(--glow-indigo); } .sg-ent--hero.is-warn { --sc: var(--glow-ember); } .sg-ent--hero.is-error { --sc: var(--on-nebula-bad); } .sg-ent--hero.is-idle, .sg-ent--hero.is-off { --sc: var(--on-nebula-2); }
.sg-ent--hero .sg-light { --sc: inherit; }
.sg-ent--hero .sg-ent-sub, .sg-ent--hero .sg-ent-biglabel { color: var(--on-nebula-2); }
.sg-ent--hero .sg-ent-state { color: var(--on-nebula); background: rgba(255,255,255,.12); }
.sg-ent--hero .sg-ent-badge { box-shadow: 0 0 0 2.5px var(--nebula-deep); }
.sg-ent--hero .sg-ent-progress { background: rgba(255,255,255,.14); }
.sg-ent--hero .sg-ent-tags span { background: rgba(255,255,255,.12); color: var(--on-nebula); }
.sg-ent--hero.is-selected { box-shadow: 0 0 0 2px var(--canvas-select), var(--shadow-float); }
.sg-ent--hero .sg-ent-spark-area { fill: color-mix(in srgb, var(--sc) 22%, transparent); }

/* NodeGrid */
.sg-ngrid { position: relative; outline: none; touch-action: pan-y; padding: 8px; margin: -8px; border-radius: var(--radius-sm); }
.sg-ngrid-groups { display: grid; gap: 20px; }
.sg-ngrid-group { display: grid; gap: 10px; }
.sg-ngrid-ghead { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.sg-ngrid-ghead b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.sg-ngrid-items { display: grid; gap: 10px; align-items: start; }
.sg-ngrid--light .sg-ngrid-items { grid-template-columns: repeat(auto-fill, 16px); gap: 8px; }
.sg-ngrid--cell .sg-ngrid-items { grid-template-columns: repeat(auto-fill, var(--sg-cell, 24px)); gap: 5px; }
.sg-ngrid--chip .sg-ngrid-items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sg-ngrid--compact .sg-ngrid-items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.sg-ngrid--card .sg-ngrid-items, .sg-ngrid--hero .sg-ngrid-items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.sg-ngrid-empty { padding: 32px; text-align: center; color: var(--ink-2); font-size: 13px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.sg-ntip { position: absolute; z-index: 20; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; min-width: 150px; max-width: 240px; padding: 10px 12px; border-radius: 12px; display: grid; gap: 4px;
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-lift); -webkit-backdrop-filter: blur(var(--blur-lg)); backdrop-filter: blur(var(--blur-lg));
  animation: sg-pop var(--duration-quick) var(--ease-liquid) backwards; color: var(--ink); }
.sg-ntip-name { font-size: 13px; font-weight: 500; }
.sg-ntip-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.sg-ntip-metric { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sg-ntip-sub { font-size: 12px; color: var(--ink-2); }

/* StatusSummary */
.sg-summary { display: grid; gap: 12px; }
.sg-summary-head { display: flex; align-items: baseline; gap: 12px; }
.sg-summary-total { display: inline-flex; align-items: baseline; gap: 4px; }
.sg-summary-total b { font-size: 40px; line-height: 44px; font-weight: 200; letter-spacing: -.02em; font-variant-numeric: tabular-nums; animation: sg-pop var(--duration-smooth) var(--ease-liquid) backwards; }
.sg-summary-total small { font-size: 13px; color: var(--ink-2); }
.sg-summary-title { font-size: 13px; color: var(--ink-2); }
.sg-summary-bar { display: flex; gap: 3px; height: 10px; }
.sg-summary-bar span { --sc: var(--status-idle); flex-basis: 0; min-width: 6px; border-radius: var(--radius-pill); background: var(--sc); transition: flex-grow var(--duration-slow) var(--ease-spring-soft), opacity var(--duration-base); }
.sg-summary-bar .is-ok { --sc: var(--status-good); } .sg-summary-bar .is-running { --sc: var(--status-busy); } .sg-summary-bar .is-warn { --sc: var(--status-warn); } .sg-summary-bar .is-error { --sc: var(--status-bad); }
.sg-summary-bar .is-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sc); }
.sg-summary-bar .is-dim { opacity: .25; }
.sg-summary-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.sg-summary-item { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer;
  transition: background-color var(--duration-instant), border-color var(--duration-base), color var(--duration-base); }
.sg-summary-item:disabled { cursor: default; }
.sg-summary-item:not(:disabled):hover { background: var(--mist-200); color: var(--ink); }
.sg-summary-item b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; animation: sg-pop var(--duration-smooth) var(--ease-liquid) backwards; }
.sg-summary-item.is-on { background: var(--solid); border-color: transparent; color: var(--ink); box-shadow: var(--shadow-lift); }
[data-theme="dark"] .sg-summary-item.is-on { color: var(--ink-inverse); }
[data-theme="dark"] .sg-summary-item.is-on b { color: var(--ink-inverse); }

/* BulkBar */
.sg-bulkbar { display: inline-flex; align-items: center; gap: 2px; padding: 5px; border-radius: var(--radius-pill); color: var(--ink-inverse); background: var(--ink); box-shadow: var(--shadow-float);
  animation: sg-bulk-in var(--duration-spring) var(--ease-spring-bouncy) backwards; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
@keyframes sg-bulk-in { from { opacity: 0; translate: 0 16px; scale: .94; filter: blur(4px); } }
.sg-bulk-count { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 10px 0 12px; font-size: 13px; white-space: nowrap; }
.sg-bulk-count b { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; animation: sg-pop var(--duration-base) var(--ease-liquid) backwards; }
.sg-bulkbar .sg-nodebar-sep { background: color-mix(in srgb, var(--ink-inverse) 25%, transparent); }
.sg-bulk-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background-color var(--duration-instant), transform var(--duration-quick) var(--ease-liquid); }
.sg-bulk-btn:hover { background: color-mix(in srgb, var(--ink-inverse) 14%, transparent); }
.sg-bulk-btn:active { transform: scale(.94); }
.sg-bulk-btn:disabled { opacity: var(--disabled); cursor: not-allowed; }
.sg-bulk-btn.is-danger .sg-icon { color: var(--on-nebula-bad); }
[data-theme="dark"] .sg-bulk-btn.is-danger .sg-icon { color: var(--status-bad); }
.sg-bulk-clear { padding: 0 10px; }

/* entity nodes on the canvas */
.sg-node--entity { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 18px; }
.sg-node--entity.is-selected, .sg-node--entity.is-dragging { box-shadow: none; }
.sg-node--entity > .sg-ent { cursor: grab; }
.sg-node--entity .sg-ent--chip, .sg-node--entity .sg-ent--compact, .sg-node--entity .sg-ent--card, .sg-node--entity .sg-ent--hero { width: 100%; }
.sg-node--entity.is-tiny .sg-port { opacity: 0; pointer-events: none; }
.sg-node--entity .sg-port { top: 50%; }

@container (max-width: 560px) { .sg-minimap { display: none; } .sg-canvas-controls .sg-ctl--pct { min-width: 44px; } }

/* ---------- reduced motion: keep colour changes, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .sg-btn, .sg-iconbtn, .sg-tab, .sg-pill, .sg-day, .sg-curve-lens, .sg-tabs-ind, .sg-dial-ind, .sg-roll-strip, .sg-goo-blob, .sg-goo-btn, .sg-tilt-inner, .sg-switch-thumb, .sg-island, .sg-sheet, .sg-curve-clip, .sg-curve-drop {
    transition-property: background-color, color, opacity !important; }
  .sg-nebula::before, .sg-beam::before, .sg-beam::after, .sg-btn--metal::before, .sg-matrix > i, .sg-curve-draw, .sg-blur-in, .sg-chip > *, .sg-stat-value > span { animation: none !important; }
  .sg-pill:hover, .sg-glass--spot:hover { transform: none; }
}