/**
 * TemaDepo Studio — 3 palet (parlaklık merdiveni)
 * 1 açık  = mavi (#60A5FA / #3B82F6)
 * 2 orta  = çelik slate (#64748B) — ne açık ne koyu
 * 3 koyu  = slate (#0F172A / #162032)
 * Yeşil yalnızca başarı (✓ / tamam)
 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap");

.sonara-studio-fs {
  --st-rail-w: 252px;
  --st-top-h: 56px;
  --st-nav-gap: 2px;
  --st-r-btn: 10px;
  --st-r-input: 10px;
  --st-r-card: 16px;
  --st-r-modal: 20px;
  --st-r-pill: 999px;
  --st-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --st-dur: 200ms;
  --st-zoom-num: 100;
  --td-font: "IBM Plex Sans", system-ui, sans-serif;
  --td-font-display: "Outfit", system-ui, sans-serif;

  /* 1 açık mavi · 2 orta slate · 3 koyu */
  --st-deep: #0f172a;
  --st-mid: #64748b;
  --st-mid-2: #475569;
  --st-mid-soft: #e2e8f0;
  --st-mid-border: #94a3b8;
  --st-bg: #f1f5f9;
  --st-surface: #ffffff;
  --st-sidebar: #e8eef5;
  --st-topbar: #ffffff;
  --st-canvas: #f1f5f9;
  --st-dock-bg: #e8eef5;
  --st-hover: #f8fafc;
  --st-soft: #e2e8f0;
  --st-panel: #e2e8f0;
  --st-border: #d5dde7;
  --st-border-2: #b8c4d4;
  --st-ink: #0f172a;
  --st-ink-2: #334155;
  --st-mute: #64748b;
  --st-read: #334155;
  --st-nav-hover: #e8eef5;
  --st-accent: #3b82f6;
  --st-accent-2: #2563eb;
  --st-accent-soft: #eff6ff;
  --st-accent-border: #93c5fd;
  --st-glow: rgba(59, 130, 246, 0.22);
  --st-success: #059669;
  --st-success-bg: #ecfdf5;
  --st-success-text: #047857;
  --st-success-border: #a7f3d0;
  --st-success-dot: #059669;
  --st-success-mark: #059669;
  --st-help-bg: #e2e8f0;
  --st-help-border: #d5dde7;
  --st-help-text: #334155;
  --st-pill-save-bg: #e2e8f0;
  --st-pill-save-text: #334155;
  --st-pill-save-border: #d5dde7;
  --st-pill-save-sub: #64748b;
  --st-pill-save-dot: #64748b;
  --st-warn-bg: #fff8eb;
  --st-warn-border: #f0d9a8;
  --st-warn-text: #92400e;
  --st-warn-accent: #d97706;
  --st-sh: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
  --st-sh-h: 0 4px 14px rgba(15, 23, 42, 0.08);
  --st-sh-float: 0 12px 32px rgba(15, 23, 42, 0.1);
  --st-scroll-track: #e2e8f0;
  --st-scroll-thumb: #94a3b8;
  --st-scroll-thumb-hover: #64748b;
}

/* LIGHT — 1 açık mavi */
.sonara-studio-fs[data-st-ui="light"] {
  --st-deep: #0f172a;
  --st-mid: #64748b;
  --st-mid-2: #475569;
  --st-mid-soft: #e2e8f0;
  --st-mid-border: #94a3b8;
  --st-bg: #f1f5f9;
  --st-surface: #ffffff;
  --st-sidebar: #e8eef5;
  --st-topbar: #ffffff;
  --st-canvas: #f1f5f9;
  --st-dock-bg: #e8eef5;
  --st-hover: #f8fafc;
  --st-soft: #e2e8f0;
  --st-panel: #e2e8f0;
  --st-border: #d5dde7;
  --st-border-2: #b8c4d4;
  --st-ink: #0f172a;
  --st-ink-2: #334155;
  --st-mute: #64748b;
  --st-read: #334155;
  --st-nav-hover: #e8eef5;
  --st-accent: #3b82f6;
  --st-accent-2: #2563eb;
  --st-accent-soft: #eff6ff;
  --st-accent-border: #93c5fd;
  --st-glow: rgba(59, 130, 246, 0.22);
  --st-success: #059669;
  --st-success-bg: #ecfdf5;
  --st-success-text: #047857;
  --st-success-mark: #059669;
  --st-help-bg: #e2e8f0;
  --st-help-border: #d5dde7;
  --st-help-text: #334155;
  --st-warn-bg: #fff8eb;
  --st-warn-border: #f0d9a8;
  --st-warn-text: #92400e;
  --st-warn-accent: #d97706;
}

/* SOFT — 2 orta (ne açık ne koyu; mavi değil, slate) */
.sonara-studio-fs[data-st-ui="soft"] {
  --st-deep: #0f172a;
  --st-mid: #64748b;
  --st-mid-2: #475569;
  --st-mid-soft: #e2e8f0;
  --st-mid-border: #94a3b8;
  --st-bg: #e8edf3;
  --st-surface: #ffffff;
  --st-sidebar: #d8e0ea;
  --st-topbar: #f8fafc;
  --st-canvas: #e8edf3;
  --st-dock-bg: #d8e0ea;
  --st-hover: #f1f5f9;
  --st-soft: #cbd5e1;
  --st-panel: #cbd5e1;
  --st-border: #b8c4d4;
  --st-border-2: #94a3b8;
  --st-ink: #0f172a;
  --st-ink-2: #334155;
  --st-mute: #64748b;
  --st-read: #334155;
  --st-nav-hover: #dbe3ed;
  --st-accent: #64748b;
  --st-accent-2: #475569;
  --st-accent-soft: #e2e8f0;
  --st-accent-border: #94a3b8;
  --st-glow: rgba(100, 116, 139, 0.22);
  --st-success: #059669;
  --st-success-bg: #ecfdf5;
  --st-success-text: #047857;
  --st-success-mark: #059669;
  --st-help-bg: #cbd5e1;
  --st-help-border: #b8c4d4;
  --st-help-text: #334155;
  --st-warn-bg: #fff8eb;
  --st-warn-border: #e8d4a8;
  --st-warn-text: #854d0e;
  --st-warn-accent: #ca8a04;
}

/* DARK — 3 koyu */
.sonara-studio-fs[data-st-ui="dark"] {
  --st-deep: #020617;
  --st-mid: #64748b;
  --st-mid-2: #94a3b8;
  --st-mid-soft: rgba(100, 116, 139, 0.18);
  --st-mid-border: rgba(148, 163, 184, 0.4);
  --st-bg: #0b1220;
  --st-surface: #111827;
  --st-sidebar: #0f172a;
  --st-topbar: #111827;
  --st-canvas: #0b1220;
  --st-dock-bg: #0f172a;
  --st-hover: #1e293b;
  --st-border: #2d3b4f;
  --st-border-2: #3d4f66;
  --st-ink: #f8fafc;
  --st-ink-2: #e2e8f0;
  --st-mute: #94a3b8;
  --st-read: #e2e8f0;
  --st-nav-hover: #1e293b;
  --st-accent: #22d3ee;
  --st-accent-2: #06b6d4;
  --st-accent-soft: rgba(34, 211, 238, 0.12);
  --st-accent-border: rgba(34, 211, 238, 0.35);
  --st-glow: rgba(34, 211, 238, 0.25);
  --st-success: #34d399;
  --st-success-bg: rgba(52, 211, 153, 0.12);
  --st-success-text: #6ee7b7;
  --st-success-mark: #34d399;
  --st-help-bg: #162032;
  --st-help-border: #2d3b4f;
  --st-help-text: #e2e8f0;
  --st-pill-save-bg: #162032;
  --st-pill-save-text: #e2e8f0;
  --st-pill-save-border: #2d3b4f;
  --st-pill-save-sub: #94a3b8;
  --st-soft: #162032;
  --st-panel: #162032;
  --st-warn-bg: #162032;
  --st-warn-border: #2d3b4f;
  --st-warn-text: #e8eef7;
  --st-warn-accent: #22d3ee;
  --st-scroll-track: #1e293b;
  --st-scroll-thumb: #475569;
}

.sonara-st-scale {
  display: grid;
  grid-template-rows: var(--st-top-h) 1fr;
  flex: 1;
  min-height: 0;
  height: 100%;
  zoom: calc(var(--st-zoom-num) / 100);
}

.sonara-st-theme-switch,
.sonara-st-zoom {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--st-border-2);
  background: var(--st-bg);
}
.sonara-st-theme-switch__btn,
.sonara-st-zoom__btn {
  min-width: 32px;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--st-mute);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.sonara-st-theme-switch__btn .sonara-st-ico { width: 15px; height: 15px; }
.sonara-st-theme-switch__btn:hover,
.sonara-st-zoom__btn:hover { color: var(--st-ink); background: var(--st-surface); }
.sonara-st-theme-switch__btn.is-on {
  color: var(--st-accent);
  background: var(--st-accent-soft);
  box-shadow: inset 0 0 0 1px var(--st-accent-border);
}
.sonara-st-zoom__val {
  min-width: 40px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--st-ink);
}

.sonara-st-ui-pick {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: rgba(15, 23, 42, 0.45);
}
.sonara-st-ui-pick[hidden] { display: none !important; }
.sonara-st-ui-pick__box {
  width: min(560px, calc(100vw - 40px));
  padding: 28px 32px;
  border-radius: 20px;
  border: 1px solid var(--st-border);
  background: var(--st-surface);
  box-shadow: var(--st-sh-float);
}
.sonara-st-ui-pick__box h2 {
  margin: 0 0 8px;
  font-family: var(--td-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--st-ink);
}
.sonara-st-ui-pick__box p {
  margin: 0 0 20px;
  color: var(--st-mute);
  font-size: 14px;
  line-height: 1.55;
}
.sonara-st-ui-pick__opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sonara-st-ui-pick__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--st-border);
  background: var(--st-bg);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.sonara-st-ui-pick__opt:hover {
  border-color: var(--st-accent-border);
  transform: translateY(-2px);
  box-shadow: var(--st-sh-h);
}
.sonara-st-ui-pick__opt.is-rec {
  border-color: var(--st-accent-border);
  background: var(--st-accent-soft);
}
.sonara-st-ui-pick__opt b { font-size: 14px; color: var(--st-ink); }
.sonara-st-ui-pick__opt small { font-size: 11px; color: var(--st-mute); line-height: 1.4; }
.sonara-st-ui-pick__swatch {
  display: flex;
  gap: 4px;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}
.sonara-st-ui-pick__swatch i { flex: 1; }

/* iframe tokens — palete göre */
html[data-st-ui="light"] {
  --bg: #f1f5f9;
  --surface: #ffffff;
  --line: #d5dde7;
  --line2: #b8c4d4;
  --ink: #0f172a;
  --text-soft: #334155;
  --mute: #334155;
  --mute2: #64748b;
  --amber: #3b82f6;
  --amber-h: #2563eb;
  --amber-2: #3b82f6;
  --amber-soft: #eff6ff;
  --amber-border: #93c5fd;
  --info-bg: #e2e8f0;
  --info-text: #334155;
  --ok: #059669;
  --ok-bg: #ecfdf5;
  --ok-text: #047857;
  --ok-border: #a7f3d0;
  --help-bg: #e2e8f0;
  --help-border: #d5dde7;
  --help-text: #334155;
  --warn-bg: #fff8eb;
  --warn-text: #92400e;
  --sh: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
  --sh-h: 0 4px 14px rgba(15, 23, 42, 0.08);
  --fd: "Outfit", system-ui, sans-serif;
  --fb: "IBM Plex Sans", system-ui, sans-serif;
  --r: 12px;
  --r2: 16px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

html[data-st-ui="soft"] {
  --bg: #e8edf3;
  --surface: #ffffff;
  --line: #b8c4d4;
  --line2: #94a3b8;
  --ink: #0f172a;
  --text-soft: #334155;
  --mute: #334155;
  --mute2: #64748b;
  --amber: #64748b;
  --amber-h: #475569;
  --amber-2: #64748b;
  --amber-soft: #e2e8f0;
  --amber-border: #94a3b8;
  --info-bg: #cbd5e1;
  --info-text: #334155;
  --ok: #059669;
  --ok-bg: #ecfdf5;
  --ok-text: #047857;
  --ok-border: #a7f3d0;
  --help-bg: #cbd5e1;
  --help-border: #b8c4d4;
  --help-text: #334155;
  --warn-bg: #fff8eb;
  --warn-text: #854d0e;
  --fd: "Outfit", system-ui, sans-serif;
  --fb: "IBM Plex Sans", system-ui, sans-serif;
  --r: 12px;
  --r2: 16px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

html[data-st-ui="dark"] {
  --bg: #0b1220;
  --surface: #111827;
  --line: #2d3b4f;
  --line2: #3d4f66;
  --ink: #f8fafc;
  --text-soft: #e2e8f0;
  --mute: #cbd5e1;
  --mute2: #94a3b8;
  --amber: #22d3ee;
  --amber-h: #67e8f9;
  --amber-2: #06b6d4;
  --amber-soft: rgba(34, 211, 238, 0.12);
  --amber-border: rgba(34, 211, 238, 0.32);
  --info-bg: #162032;
  --info-text: #e2e8f0;
  --ok: #34d399;
  --ok-bg: rgba(52, 211, 153, 0.12);
  --ok-text: #6ee7b7;
  --ok-border: rgba(52, 211, 153, 0.35);
  --help-bg: #162032;
  --help-border: #2d3b4f;
  --help-text: #e2e8f0;
  --warn-bg: #162032;
  --warn-text: #e8eef7;
  --fd: "Outfit", system-ui, sans-serif;
  --fb: "IBM Plex Sans", system-ui, sans-serif;
  --r: 12px;
  --r2: 16px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

html[data-st-ui] .sonara-studio-wrap {
  color: var(--ink);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html[data-st-ui] .td-view-head { margin-bottom: 24px; }
html[data-st-ui] .td-view-head h1 {
  font-family: var(--fd);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
html[data-st-ui] .td-view-head p {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--mute);
}

html[data-st-ui] .sonara-tab-guide,
html[data-st-ui] .sonara-callout,
html[data-st-ui] .sonara-callout--info {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--info-bg) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink);
}
html[data-st-ui] .sonara-callout__body strong,
html[data-st-ui] .sonara-tab-guide strong {
  color: var(--ink) !important;
  font-weight: 650;
}
html[data-st-ui] .sonara-callout__body p,
html[data-st-ui] .sonara-tab-guide p,
html[data-st-ui] .sonara-tab-guide {
  color: var(--text-soft) !important;
  line-height: 1.65;
}
html[data-st-ui] .sonara-callout--info {
  background: var(--info-bg) !important;
  border-color: var(--line) !important;
}
html[data-st-ui="dark"] .sonara-callout--info {
  background: #162032 !important;
  border-color: #2d3b4f !important;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.08);
}
html[data-st-ui="dark"] .sonara-callout__ico {
  background: rgba(34, 211, 238, 0.14) !important;
  border-color: rgba(34, 211, 238, 0.3) !important;
  color: #67e8f9 !important;
}
html[data-st-ui="dark"] .sonara-callout__body strong {
  color: #f8fafc !important;
}
html[data-st-ui="dark"] .sonara-callout__body p,
html[data-st-ui="dark"] .sonara-callout__note {
  color: #cbd5e1 !important;
}
html[data-st-ui] .sonara-callout--warm {
  background: var(--warn-bg) !important;
  border-color: var(--line) !important;
}
html[data-st-ui="dark"] .sonara-callout--warm {
  background: #162032 !important;
  border-color: #2d3b4f !important;
  border-left: 3px solid #22d3ee !important;
}
html[data-st-ui] .sonara-callout--warm .sonara-callout__body strong {
  color: var(--warn-text) !important;
}
html[data-st-ui] .sonara-callout--warm .sonara-callout__body p {
  color: var(--text-soft) !important;
}
html[data-st-ui="dark"] .sonara-callout--warm .sonara-callout__body p {
  color: #cbd5e1 !important;
}
html[data-st-ui] .sonara-callout__note {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--mute) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
html[data-st-ui] .sonara-demo-setup__title {
  color: var(--ink);
}
html[data-st-ui] .td-live-status--demo {
  background: var(--amber-soft);
  border-color: var(--amber-border);
  color: var(--amber-h);
}
html[data-st-ui] .td-live-status--live {
  background: var(--ok-bg);
  border-color: var(--ok-border);
  color: var(--ok-text);
}
html[data-st-ui] .td-live-status--empty {
  background: var(--surface);
  border-color: var(--line2);
  color: var(--mute2);
}

html[data-st-ui] .td-view-head p,
html[data-st-ui] .sonara-studio-form .description,
html[data-st-ui] .sonara-studio-form .form-table td p,
html[data-st-ui] .sonara-demo-pkg__safe,
html[data-st-ui] .sonara-demo-dockbar__note {
  color: var(--text-soft) !important;
}
html[data-st-ui] .sonara-demo-steps li {
  color: var(--mute2);
  font-weight: 550;
}
html[data-st-ui] .sonara-demo-steps li.is-done,
html[data-st-ui] .sonara-demo-steps li.is-current {
  color: var(--ink);
}

html[data-st-ui] .sonara-studio-form .sonara-panel,
html[data-st-ui] .td-card,
html[data-st-ui] .sonara-demo-pkg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
html[data-st-ui] .sonara-studio-form .sonara-panel:hover,
html[data-st-ui] .td-card:hover,
html[data-st-ui] .sonara-demo-pkg:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-h);
  border-color: var(--amber-border);
}

html[data-st-ui] .sonara-studio-form input[type="text"],
html[data-st-ui] .sonara-studio-form input[type="url"],
html[data-st-ui] .sonara-studio-form input[type="number"],
html[data-st-ui] .sonara-studio-form textarea {
  min-height: 46px !important;
  border-radius: 10px !important;
  border-color: var(--line2) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
html[data-st-ui] .sonara-studio-form input:focus,
html[data-st-ui] .sonara-studio-form textarea:focus {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px var(--amber-soft) !important;
}

/* Select — tonlara göre chevron + şerit (metin input’tan ayrı) */
html[data-st-ui] .sonara-studio-wrap select,
html[data-st-ui] .sonara-studio-form select {
  min-height: 46px !important;
  border-radius: 10px !important;
  border-color: var(--line2) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  background-image:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 40px), color-mix(in srgb, var(--ink) 6%, transparent) calc(100% - 40px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center, right 14px center !important;
  background-size: 100% 100%, 16px 16px !important;
}
html[data-st-ui] .sonara-studio-wrap select:hover,
html[data-st-ui] .sonara-studio-form select:hover {
  border-color: var(--amber-border, #94a3b8) !important;
  background-color: color-mix(in srgb, var(--surface) 88%, var(--ink) 4%) !important;
}
html[data-st-ui] .sonara-studio-wrap select:focus,
html[data-st-ui] .sonara-studio-form select:focus {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px var(--amber-soft) !important;
}
html[data-st-ui="dark"] .sonara-studio-wrap select,
html[data-st-ui="dark"] .sonara-studio-form select {
  background-image:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 40px), rgba(255, 255, 255, .06) calc(100% - 40px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
html[data-st-ui="soft"] .sonara-studio-wrap select,
html[data-st-ui="soft"] .sonara-studio-form select {
  background-image:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 40px), rgba(15, 23, 42, .06) calc(100% - 40px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

html[data-st-ui] .sonara-studio-form .button-primary,
html[data-st-ui] .td-btn--primary,
html[data-st-ui] .td-btn--hero {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html[data-st-ui="dark"] .sonara-studio-form .button-primary,
html[data-st-ui="dark"] .td-btn--primary {
  color: #0b1220 !important;
}
html[data-st-ui] .sonara-studio-form .button-primary:hover,
html[data-st-ui] .td-btn--primary:hover {
  background: var(--amber-h) !important;
}

html[data-st-ui] .sonara-demo-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0 0 24px;
  padding: 16px 0;
  list-style: none;
  background: transparent;
  border: 0;
}
html[data-st-ui] .sonara-demo-steps li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 8px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mute2);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
html[data-st-ui] .sonara-demo-steps li + li::before {
  content: "";
  position: absolute;
  left: -50%;
  right: 50%;
  top: 11px;
  height: 2px;
  background: var(--line2);
  z-index: 0;
}
html[data-st-ui] .sonara-demo-steps li.is-done + li::before { background: var(--ok); }
html[data-st-ui] .sonara-demo-steps li span {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface);
  border: 2px solid var(--line2);
  color: var(--mute2);
}
html[data-st-ui] .sonara-demo-steps li.is-done span {
  border-color: var(--ok);
  background: var(--ok-bg);
  color: transparent;
  font-size: 0;
}
html[data-st-ui] .sonara-demo-steps li.is-done span::before {
  content: "✓";
  font-size: 12px;
  font-weight: 800;
  color: var(--ok);
}
html[data-st-ui] .sonara-demo-steps li.is-current { color: var(--ink); }
html[data-st-ui] .sonara-demo-steps li.is-current span {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
  box-shadow: 0 0 0 3px var(--amber-soft);
}
html[data-st-ui="dark"] .sonara-demo-steps li.is-current span { color: #0b1220; }

html[data-st-ui] .sonara-demo-pkg__safe:not(.sonara-demo-pkg__safe--warn),
html[data-st-ui] .td-badge--ok {
  background: var(--ok-bg) !important;
  border: 0 !important;
  color: var(--ok-text) !important;
}
html[data-st-ui] .sonara-demo-pkg__safe--warn {
  background: #dc2626 !important;
  border: 0 !important;
  color: #fff !important;
}
html[data-st-ui] .td-cover,
html[data-st-ui] .td-cover--welcome {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh) !important;
}
html[data-st-ui] .td-studio-tab.is-on {
  background: var(--amber-soft) !important;
  border-color: var(--amber) !important;
  box-shadow: inset 3px 0 0 var(--amber) !important;
}
html[data-st-ui] .td-welcome-kicker { color: var(--amber) !important; }
html[data-st-ui] .td-studio-lockup__product{ color: var(--ink) !important; }
html[data-st-ui="dark"] .td-studio-lockup__product{ color: #f8fafc !important; }

/* Dark — demo kartları / dockbar / SEÇ alanı */
html[data-st-ui="dark"] .sonara-demo-dockbar {
  background: #162032 !important;
  border-color: #2d3b4f !important;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.35);
}
html[data-st-ui="dark"] .sonara-demo-dockbar__chip {
  background: #111827 !important;
  border-color: #2d3b4f !important;
  color: #e2e8f0 !important;
}
html[data-st-ui="dark"] .sonara-demo-dockbar__note,
html[data-st-ui="dark"] .sonara-demo-dockbar__note--help {
  background: #111827 !important;
  border-color: #2d3b4f !important;
  color: #cbd5e1 !important;
}
html[data-st-ui="dark"] .sonara-demo-dockbar__note strong,
html[data-st-ui="dark"] .sonara-demo-dockbar__note--help strong {
  color: #f1f5f9 !important;
}
html[data-st-ui="dark"] .sonara-demo-dockbar__action small {
  color: #94a3b8 !important;
}
html[data-st-ui="dark"] .sonara-demo-dockbar__submit,
html[data-st-ui="dark"] .sonara-demo-picker__actions .button-primary {
  background: #22d3ee !important;
  border-color: #22d3ee !important;
  color: #0b1220 !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg {
  background: #111827 !important;
  border-color: #2d3b4f !important;
  color: #e2e8f0 !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg:hover {
  border-color: rgba(34, 211, 238, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg.is-selected {
  background: rgba(34, 211, 238, 0.08) !important;
  border-color: rgba(34, 211, 238, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.12) !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg.is-risk {
  background: #162032 !important;
  border-color: #2d3b4f !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg__pick {
  background: #0f172a !important;
  border-left-color: #2d3b4f !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg.is-selected .sonara-demo-pkg__pick {
  background: rgba(34, 211, 238, 0.1) !important;
  border-left-color: rgba(34, 211, 238, 0.25) !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg__box {
  background: #111827 !important;
  border-color: #64748b !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg.is-selected .sonara-demo-pkg__box {
  border-color: #22d3ee !important;
  background: linear-gradient(145deg, #22d3ee, #06b6d4) !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg__state {
  color: #94a3b8 !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg.is-selected .sonara-demo-pkg__state {
  color: #67e8f9 !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg h3,
html[data-st-ui="dark"] .sonara-demo-pkg strong {
  color: #f1f5f9 !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg p,
html[data-st-ui="dark"] .sonara-demo-pkg .description {
  color: #cbd5e1 !important;
}
html[data-st-ui="dark"] .sonara-demo-picker__tools .button {
  background: #162032 !important;
  border-color: #2d3b4f !important;
  color: #e2e8f0 !important;
}
html[data-st-ui="dark"] .sonara-demo-picker__tools .button:hover,
html[data-st-ui="dark"] .sonara-demo-picker__tools .button.is-active {
  background: rgba(34, 211, 238, 0.12) !important;
  border-color: #22d3ee !important;
  color: #67e8f9 !important;
}
html[data-st-ui="dark"] .sonara-demo-picker__actions {
  background: #162032 !important;
  border-color: #2d3b4f !important;
}
html[data-st-ui="dark"] .sonara-demo-picker__actions-note {
  color: #cbd5e1 !important;
}
html[data-st-ui="dark"] .sonara-panel--demo-featured {
  background: transparent !important;
  border-color: transparent !important;
}
html[data-st-ui="dark"] .sonara-demo-picker__actions .button,
html[data-st-ui="dark"] .sonara-studio-form .button-secondary {
  background: #162032 !important;
  border-color: #2d3b4f !important;
  color: #e2e8f0 !important;
}
html[data-st-ui="dark"] .sonara-demo-advanced {
  background: #162032 !important;
  border-color: #2d3b4f !important;
  box-shadow: none !important;
}
html[data-st-ui="dark"] .sonara-demo-advanced summary {
  color: #f1f5f9 !important;
}
html[data-st-ui="dark"] .sonara-demo-advanced .description,
html[data-st-ui="dark"] .sonara-demo-advanced .sonara-panel--danger {
  color: #e2e8f0 !important;
  background: #111827 !important;
  border-color: #3d4f66 !important;
}
html[data-st-ui="dark"] .sonara-demo-pkg__safe--warn {
  color: #fff !important;
  background: #dc2626 !important;
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}
html[data-st-ui="dark"] .sonara-demo-dockbar__chip-body {
  gap: 6px;
}
html[data-st-ui="dark"] .sonara-demo-dockbar__chip-num,
html[data-st-ui="dark"] .sonara-demo-dockbar__chip-unit {
  color: #e2e8f0 !important;
}