/* Hallmark · macrostructure: Glass Workbench Rail · tone: luminous operational · anchor hue: azure · motion: quiet depth */

/* The member pages share the landing page's cool blue language while keeping
   their existing HTML and interaction contracts intact. */
body.studio-page,
body.talkcraft-page,
body.obs-source-page {
  --shell-paper: #edf5fc;
  --shell-paper-strong: rgba(255, 255, 255, 0.78);
  --shell-surface: rgba(255, 255, 255, 0.64);
  --shell-surface-muted: rgba(226, 239, 250, 0.66);
  --shell-ink: #112e4c;
  --shell-muted: #718aa2;
  --shell-blue: #1479e3;
  --shell-cyan: #79e7ff;
  --shell-red: #e76568;
  --shell-danger: #d84c62;
  --shell-steel: #3d91c8;
  --shell-dark: #112e4c;
  --shell-success: #19b984;
  --shell-warning: #d18c33;
  --shell-coral: #ff7b7b;
  --shell-line: rgba(111, 162, 201, 0.2);
  --shell-rule: rgba(88, 136, 178, 0.2);
  --shell-rule-strong: rgba(88, 136, 178, 0.36);
  --shell-rule-dark: rgba(17, 46, 76, 0.2);
  --shell-scrim: rgba(17, 46, 76, 0.42);
  --shell-on-accent: #ffffff;
  --shell-placeholder: #8aa3b8;
  --shell-header-surface: rgba(247, 252, 255, 0.68);
  --shell-status-info-surface: rgba(20, 121, 227, 0.1);
  --shell-status-info-surface-subtle: rgba(20, 121, 227, 0.06);
  --shell-status-info-surface-strong: rgba(20, 121, 227, 0.16);
  --shell-status-success-surface: rgba(25, 185, 132, 0.12);
  --shell-status-success-surface-strong: rgba(25, 185, 132, 0.18);
  --shell-status-danger-surface: rgba(216, 76, 98, 0.1);
  --shell-status-danger-surface-strong: rgba(216, 76, 98, 0.16);
  --shell-status-warning-surface: rgba(209, 140, 51, 0.12);
  --shell-toggle-on-surface: rgba(25, 185, 132, 0.18);
  --shell-danger-rule: rgba(216, 76, 98, 0.46);
  --shell-danger-rule-soft: rgba(216, 76, 98, 0.25);
  --shell-overlay-surface: rgba(237, 245, 252, 0.84);
  --shell-shadow-raised: 0 1.5rem 4rem rgba(48, 104, 145, 0.14);
  --workbench-glass: rgba(255, 255, 255, 0.56);
  --workbench-glass-strong: rgba(255, 255, 255, 0.76);
  --workbench-blur: blur(24px) saturate(145%);
  --workbench-border: rgba(255, 255, 255, 0.72);
  --workbench-shadow: 0 1.35rem 3.5rem rgba(49, 105, 146, 0.13), 0 0.2rem 0.9rem rgba(49, 105, 146, 0.06);
  --workbench-shadow-hover: 0 1.7rem 4.2rem rgba(49, 105, 146, 0.17), 0 0.35rem 1.1rem rgba(49, 105, 146, 0.08);
  --workbench-radius: 1.35rem;
  --workbench-radius-sm: 0.95rem;
  position: relative;
  overflow-x: hidden;
  color: var(--shell-ink);
  background:
    radial-gradient(circle at 8% 10%, rgba(121, 231, 255, 0.34), transparent 22rem),
    radial-gradient(circle at 92% 16%, rgba(167, 154, 243, 0.2), transparent 27rem),
    linear-gradient(140deg, #f5fbff 0%, #eaf4fc 46%, #f1f3ff 100%);
}

body.studio-page::before,
body.talkcraft-page::before,
body.obs-source-page::before,
body.studio-page::after,
body.talkcraft-page::after,
body.obs-source-page::after {
  position: fixed;
  z-index: 0;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  filter: blur(8px);
  opacity: 0.34;
  animation: workbench-drift 16s ease-in-out infinite alternate;
}

body.studio-page::before,
body.talkcraft-page::before,
body.obs-source-page::before {
  top: 12rem;
  right: -10rem;
  background: radial-gradient(circle, rgba(121, 231, 255, 0.32), transparent 68%);
}

body.studio-page::after,
body.talkcraft-page::after,
body.obs-source-page::after {
  bottom: -13rem;
  left: 18%;
  background: radial-gradient(circle, rgba(167, 154, 243, 0.18), transparent 68%);
  animation-delay: -5s;
}

.studio-page .member-shell,
.talkcraft-page .member-shell,
.obs-source-page .member-shell {
  position: relative;
  z-index: 1;
}

.studio-page .site-header,
.talkcraft-page .site-header,
.obs-source-page .site-header {
  color: var(--shell-ink);
  border-right: 1px solid var(--workbench-border);
  background: rgba(241, 248, 253, 0.62);
  box-shadow: 0.8rem 0 2.4rem rgba(78, 128, 164, 0.05);
  backdrop-filter: var(--workbench-blur);
  -webkit-backdrop-filter: var(--workbench-blur);
}

.studio-page .site-brand-row,
.talkcraft-page .site-brand-row,
.obs-source-page .site-brand-row {
  border-bottom-color: rgba(112, 161, 199, 0.18);
}

.studio-page .site-brand-word,
.talkcraft-page .site-brand-word,
.obs-source-page .site-brand-word {
  color: var(--shell-ink);
  font-family: var(--shell-body);
  font-weight: 780;
  letter-spacing: -0.045em;
}

.studio-page .site-brand-subtitle,
.talkcraft-page .site-brand-subtitle,
.obs-source-page .site-brand-subtitle {
  color: var(--shell-muted);
}

.studio-page .site-menu-toggle,
.talkcraft-page .site-menu-toggle,
.obs-source-page .site-menu-toggle {
  border-color: var(--shell-rule-strong);
  color: var(--shell-ink);
}

.studio-page .site-nav,
.talkcraft-page .site-nav,
.obs-source-page .site-nav {
  gap: 0.42rem;
}

.studio-page .site-nav a,
.talkcraft-page .site-nav a,
.obs-source-page .site-nav a {
  min-height: 3.25rem;
  border: 1px solid transparent;
  border-radius: var(--workbench-radius-sm);
  color: var(--shell-muted);
  transition:
    color var(--shell-duration) var(--shell-ease),
    background-color var(--shell-duration) var(--shell-ease),
    border-color var(--shell-duration) var(--shell-ease),
    transform var(--shell-duration) var(--shell-ease);
}

.studio-page .site-nav a span,
.talkcraft-page .site-nav a span,
.obs-source-page .site-nav a span {
  color: #96b1c7;
}

.studio-page .site-nav a:hover,
.talkcraft-page .site-nav a:hover,
.obs-source-page .site-nav a:hover {
  color: var(--shell-blue);
  border-color: rgba(20, 121, 227, 0.16);
  background: rgba(255, 255, 255, 0.46);
  transform: translateX(0.14rem);
}

.studio-page .site-nav a.is-current,
.talkcraft-page .site-nav a.is-current,
.obs-source-page .site-nav a.is-current {
  color: var(--shell-blue);
  border-color: rgba(20, 121, 227, 0.18);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 0.55rem 1.2rem rgba(20, 121, 227, 0.08);
}

.studio-page .member-account,
.talkcraft-page .member-account,
.obs-source-page .member-account {
  border-top-color: rgba(112, 161, 199, 0.18);
  color: var(--shell-muted);
}

.studio-page .member-account-label,
.talkcraft-page .member-account-label,
.obs-source-page .member-account-label {
  color: #94aec3;
}

.studio-page .member-account strong,
.talkcraft-page .member-account strong,
.obs-source-page .member-account strong {
  color: var(--shell-ink);
}

.studio-page .member-account button,
.talkcraft-page .member-account button,
.obs-source-page .member-account button {
  color: var(--shell-danger);
}

.studio-page .member-topbar,
.talkcraft-page .member-topbar,
.obs-source-page .member-topbar {
  min-height: 4.65rem;
  margin: 0 var(--shell-page-gutter);
  padding-inline: 1.15rem;
  border: 1px solid var(--workbench-border);
  border-top: 0;
  border-radius: 0 0 var(--workbench-radius) var(--workbench-radius);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0.9rem 2.4rem rgba(65, 122, 163, 0.08);
  backdrop-filter: var(--workbench-blur);
  -webkit-backdrop-filter: var(--workbench-blur);
}

.studio-page .member-topbar-kicker,
.talkcraft-page .member-topbar-kicker,
.obs-source-page .member-topbar-kicker {
  color: var(--shell-blue);
}

.studio-page .member-topbar strong,
.talkcraft-page .member-topbar strong,
.obs-source-page .member-topbar strong {
  color: var(--shell-ink);
  font-family: var(--shell-body);
  font-weight: 760;
}

.studio-page .member-topbar-status,
.talkcraft-page .member-topbar-status,
.obs-source-page .member-topbar-status {
  color: var(--shell-muted);
}

.studio-page .site-footer,
.talkcraft-page .site-footer,
.obs-source-page .site-footer {
  border-top-color: var(--shell-rule);
  color: var(--shell-muted);
}

.studio-page main,
.obs-source-page main {
  padding-top: clamp(1.6rem, 4vw, 3.4rem);
  padding-bottom: clamp(2rem, 5vw, 4.5rem);
}

.studio-page [data-ui="surface"],
.talkcraft-page [data-ui="surface"],
.obs-source-page [data-ui="surface"] {
  border: 1px solid var(--workbench-border);
  border-radius: var(--workbench-radius);
  background: var(--workbench-glass);
  box-shadow: var(--workbench-shadow);
  backdrop-filter: var(--workbench-blur);
  -webkit-backdrop-filter: var(--workbench-blur);
}

.studio-page [data-ui="page-header"],
.obs-source-page [data-ui="page-header"] {
  border-left: 0;
}

.studio-page .studio-shell,
.studio-page .settings-shell,
.obs-source-page .obs-workspace {
  gap: 1.15rem;
}

/* Dashboard */
.studio-page .studio-hero,
.studio-page .settings-hero,
.obs-source-page .obs-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--workbench-border);
  border-radius: calc(var(--workbench-radius) + 0.2rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(235, 247, 255, 0.4)),
    radial-gradient(circle at 86% 18%, rgba(121, 231, 255, 0.3), transparent 15rem);
  box-shadow: var(--workbench-shadow);
}

.studio-page .studio-hero::after,
.studio-page .settings-hero::after,
.obs-source-page .obs-hero::after {
  position: absolute;
  right: 4%;
  bottom: -5rem;
  width: 15rem;
  height: 15rem;
  border: 1px solid rgba(20, 121, 227, 0.13);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 1.4rem rgba(20, 121, 227, 0.035), 0 0 0 2.8rem rgba(20, 121, 227, 0.025);
  pointer-events: none;
}

.studio-page .studio-hero-copy,
.studio-page .settings-hero > div,
.obs-source-page .obs-hero > div {
  position: relative;
  z-index: 1;
}

.studio-page .studio-kicker,
.obs-source-page .obs-kicker {
  color: var(--shell-blue);
  font-weight: 780;
}

.studio-page .studio-kicker span {
  height: 0.3rem;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--shell-blue), var(--shell-cyan, #79e7ff));
}

.studio-page .studio-hero h1,
.studio-page .settings-hero h1,
.obs-source-page .obs-hero h1 {
  color: var(--shell-ink);
  font-family: var(--shell-body);
  font-weight: 820;
  letter-spacing: -0.06em;
}

.studio-page .studio-hero-copy > p:last-child,
.studio-page .settings-hero > div > p:last-child,
.obs-source-page .obs-hero > div > p:last-child {
  color: var(--shell-muted);
}

.studio-page .studio-signal {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--workbench-radius-sm);
  color: #eff9ff;
  background: linear-gradient(145deg, rgba(17, 46, 76, 0.96), rgba(20, 121, 227, 0.84));
  box-shadow: 0 1rem 2.2rem rgba(17, 46, 76, 0.2);
}

.studio-page .studio-signal::after {
  position: absolute;
  right: -2.6rem;
  bottom: -3.2rem;
  width: 9rem;
  height: 9rem;
  border: 1px solid rgba(121, 231, 255, 0.38);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 0.9rem rgba(121, 231, 255, 0.08), 0 0 0 1.8rem rgba(121, 231, 255, 0.04);
}

.studio-page .studio-signal p,
.studio-page .studio-signal strong,
.studio-page .studio-signal span {
  position: relative;
  z-index: 1;
}

.studio-page .studio-signal p {
  color: #9fe9ff;
}

.studio-page .studio-signal span {
  color: rgba(239, 249, 255, 0.72);
}

.studio-page .studio-flow {
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.studio-page .studio-flow li {
  min-height: 9rem;
  padding: 1.15rem;
  border: 1px solid var(--workbench-border);
  border-radius: var(--workbench-radius-sm);
  background: rgba(255, 255, 255, 0.54);
  box-shadow: 0 0.7rem 1.8rem rgba(49, 105, 146, 0.07);
  transition: transform var(--shell-duration) var(--shell-ease), box-shadow var(--shell-duration) var(--shell-ease);
}

.studio-page .studio-flow li:hover {
  transform: translateY(-0.22rem);
  box-shadow: var(--workbench-shadow-hover);
}

.studio-page .studio-flow li:last-child {
  color: #eff9ff;
  border-color: rgba(121, 231, 255, 0.24);
  background: linear-gradient(145deg, rgba(17, 46, 76, 0.95), rgba(20, 121, 227, 0.74));
}

.studio-page .studio-flow strong {
  color: var(--shell-ink);
  font-family: var(--shell-body);
  font-weight: 780;
}

.studio-page .studio-flow li:last-child strong {
  color: #ffffff;
}

.studio-page .studio-flow small {
  color: var(--shell-muted);
}

.studio-page .studio-flow li:last-child small {
  color: rgba(239, 249, 255, 0.72);
}

.studio-page .studio-grid {
  gap: 1.15rem;
}

.studio-page .studio-card {
  min-height: 18.5rem;
  border-radius: var(--workbench-radius);
  transition: transform 320ms var(--shell-ease), box-shadow 320ms var(--shell-ease), border-color 320ms var(--shell-ease);
}

.studio-page .studio-card:hover {
  border-color: rgba(20, 121, 227, 0.34);
  box-shadow: var(--workbench-shadow-hover);
  transform: translateY(-0.34rem);
}

.studio-page .studio-card--desktop {
  border-color: rgba(121, 231, 255, 0.28);
  color: #eff9ff;
  background: linear-gradient(145deg, rgba(17, 46, 76, 0.98), rgba(25, 102, 161, 0.9));
}

.studio-page .studio-card--desktop p,
.studio-page .studio-card--desktop .studio-card-status {
  color: rgba(239, 249, 255, 0.72);
}

.studio-page .studio-card--desktop .studio-card-icon {
  border-color: rgba(121, 231, 255, 0.35);
  color: var(--shell-ink);
  background: linear-gradient(145deg, #ffffff, #b8f0ff);
  box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.12);
}

.studio-page .studio-card--talk,
.studio-page .studio-card--source,
.studio-page .studio-card--boundary {
  background: rgba(255, 255, 255, 0.58);
}

.studio-page .studio-card-icon {
  border-color: rgba(20, 121, 227, 0.2);
  border-radius: 0.85rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(208, 236, 252, 0.68));
  box-shadow: 0 0.7rem 1.2rem rgba(20, 121, 227, 0.08);
}

.studio-page .studio-card h2 {
  color: var(--shell-ink);
  font-family: var(--shell-body);
  font-weight: 780;
}

.studio-page .studio-card--desktop h2 {
  color: #ffffff;
}

.studio-page .studio-card p {
  color: var(--shell-muted);
}

.studio-page .studio-card-link {
  border-top-color: var(--shell-rule);
  color: var(--shell-blue);
}

.studio-page .studio-card-status span {
  border: 0;
  border-radius: 50%;
  background: var(--shell-coral);
  box-shadow: 0 0 0 0.25rem rgba(255, 123, 123, 0.14);
}

.studio-page .studio-boundary-list {
  border-top-color: var(--shell-rule);
}

.studio-page .studio-boundary-list div {
  border-bottom-color: var(--shell-rule);
}

.studio-page .studio-boundary-list span {
  border-radius: 99px;
  color: var(--shell-success);
  background: var(--shell-status-success-surface);
}

.studio-page .studio-boundary-list .is-network {
  color: var(--shell-blue);
  background: var(--shell-status-info-surface);
}

/* Settings */
.studio-page .settings-hero {
  align-items: center;
}

.studio-page .settings-status {
  border-color: rgba(20, 121, 227, 0.16);
  border-radius: 99px;
  color: var(--shell-blue);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 0.6rem 1.2rem rgba(20, 121, 227, 0.08);
}

.studio-page .settings-layout {
  gap: 1.15rem;
}

.studio-page .settings-section {
  position: relative;
  overflow: hidden;
  border-radius: var(--workbench-radius);
  background: rgba(255, 255, 255, 0.56);
}

.studio-page .settings-section::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.28rem;
  height: 100%;
  background: linear-gradient(180deg, var(--shell-blue), rgba(121, 231, 255, 0.28));
  content: "";
}

.studio-page .settings-section-head > span {
  border-color: rgba(20, 121, 227, 0.2);
  border-radius: 0.7rem;
  color: var(--shell-blue);
  background: rgba(20, 121, 227, 0.06);
}

.studio-page .settings-section-head h2 {
  color: var(--shell-ink);
  font-family: var(--shell-body);
  font-weight: 780;
}

.studio-page .settings-form-grid label {
  color: var(--shell-ink);
}

.studio-page .settings-form-grid input,
.studio-page .settings-form-grid textarea,
.studio-page .settings-form-grid select {
  border-color: rgba(88, 136, 178, 0.22);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.62);
  transition: border-color var(--shell-duration) var(--shell-ease), box-shadow var(--shell-duration) var(--shell-ease), background-color var(--shell-duration) var(--shell-ease);
}

.studio-page .settings-form-grid input:hover,
.studio-page .settings-form-grid textarea:hover,
.studio-page .settings-form-grid select:hover,
.studio-page .settings-form-grid input:focus,
.studio-page .settings-form-grid textarea:focus,
.studio-page .settings-form-grid select:focus {
  border-color: rgba(20, 121, 227, 0.54);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 0.25rem rgba(20, 121, 227, 0.08);
}

.studio-page .settings-actions button {
  border-radius: 99px;
  transition: transform var(--shell-duration) var(--shell-ease), box-shadow var(--shell-duration) var(--shell-ease), background-color var(--shell-duration) var(--shell-ease);
}

.studio-page .settings-actions button:hover:not(:disabled) {
  box-shadow: 0 0.65rem 1.2rem rgba(20, 121, 227, 0.12);
  transform: translateY(-0.12rem);
}

.studio-page .settings-primary {
  border-color: var(--shell-blue);
  background: linear-gradient(135deg, #1479e3, #239de7);
}

.studio-page .settings-secondary {
  border-color: rgba(88, 136, 178, 0.24);
  background: rgba(255, 255, 255, 0.62);
}

.studio-page .settings-data-grid {
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.studio-page .settings-data-grid div {
  border: 1px solid rgba(88, 136, 178, 0.16);
  border-radius: 0.85rem;
  background: rgba(237, 247, 253, 0.7);
}

.studio-page .settings-data-grid strong {
  color: var(--shell-ink);
}

.studio-page .settings-privacy,
.studio-page .settings-clear-note,
.studio-page .settings-provider-state {
  color: var(--shell-muted);
}

/* Source lens */
.obs-source-page .obs-hero {
  align-items: center;
}

.obs-source-page .obs-hero h1,
.obs-source-page .obs-results h2,
.obs-source-page .obs-open-dialog h2 {
  font-family: var(--shell-body);
  font-weight: 820;
}

.obs-source-page .obs-boundary {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(20, 121, 227, 0.16);
  border-left: 0;
  border-radius: var(--workbench-radius-sm);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 0.8rem 1.6rem rgba(20, 121, 227, 0.06);
}

.obs-source-page .obs-boundary strong {
  color: var(--shell-blue);
}

.obs-source-page .obs-query-card,
.obs-source-page .obs-results {
  background: rgba(255, 255, 255, 0.6);
}

.obs-source-page .obs-query-card > label,
.obs-source-page .obs-cookie-panel summary {
  color: var(--shell-ink);
}

.obs-source-page .obs-query-row input,
.obs-source-page .obs-cookie-panel textarea {
  border-color: rgba(88, 136, 178, 0.22);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.7);
}

.obs-source-page .obs-query-row input:focus,
.obs-source-page .obs-cookie-panel textarea:focus {
  border-color: rgba(20, 121, 227, 0.54);
  box-shadow: 0 0 0 0.25rem rgba(20, 121, 227, 0.08);
}

.obs-source-page .obs-primary {
  border-color: var(--shell-blue);
  border-radius: 99px;
  background: linear-gradient(135deg, #1479e3, #239de7);
  box-shadow: 0 0.7rem 1.3rem rgba(20, 121, 227, 0.2);
}

.obs-source-page .obs-primary:hover:not(:disabled) {
  border-color: #0d62bd;
  background: linear-gradient(135deg, #0d62bd, #1479e3);
  transform: translateY(-0.1rem);
}

.obs-source-page .obs-secondary,
.obs-source-page .obs-link-action {
  border-color: rgba(88, 136, 178, 0.24);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.62);
}

.obs-source-page .obs-secondary:hover:not(:disabled),
.obs-source-page .obs-link-action:hover {
  border-color: rgba(20, 121, 227, 0.42);
  background: rgba(255, 255, 255, 0.84);
  color: var(--shell-blue);
}

.obs-source-page .obs-cookie-panel {
  border-color: rgba(88, 136, 178, 0.24);
  border-radius: var(--workbench-radius-sm);
  background: rgba(230, 242, 250, 0.54);
}

.obs-source-page .obs-stages li,
.obs-source-page .obs-empty,
.obs-source-page .obs-room-grid > div,
.obs-source-page .obs-link {
  border-color: rgba(88, 136, 178, 0.18);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.52);
}

.obs-source-page .obs-stages li {
  transition: transform var(--shell-duration) var(--shell-ease), border-color var(--shell-duration) var(--shell-ease), background-color var(--shell-duration) var(--shell-ease);
}

.obs-source-page .obs-stages li:hover {
  border-color: rgba(20, 121, 227, 0.3);
  transform: translateY(-0.12rem);
}

.obs-source-page .obs-stages li.is-active {
  border-color: rgba(20, 121, 227, 0.42);
  background: rgba(20, 121, 227, 0.1);
}

.obs-source-page .obs-stages li.is-done {
  border-color: rgba(25, 185, 132, 0.34);
  background: rgba(25, 185, 132, 0.1);
}

.obs-source-page .obs-stages li.is-failed {
  border-color: rgba(216, 76, 98, 0.34);
  background: rgba(216, 76, 98, 0.1);
}

.obs-source-page .obs-room-grid {
  gap: 0.6rem;
  margin-top: 1.35rem;
  border: 0;
  background: transparent;
}

.obs-source-page .obs-room-grid > div {
  min-height: 4.2rem;
}

.obs-source-page .obs-room-grid dt,
.obs-source-page .obs-room-grid dd {
  color: var(--shell-muted);
}

.obs-source-page .obs-room-grid dd {
  color: var(--shell-ink);
}

.obs-source-page .obs-link.is-recommended {
  border-left: 3px solid var(--shell-blue);
  background: rgba(20, 121, 227, 0.08);
}

.obs-source-page .obs-protocol,
.obs-source-page .obs-recommended {
  border-color: rgba(88, 136, 178, 0.2);
  border-radius: 99px;
  background: rgba(230, 242, 250, 0.72);
}

.obs-source-page .obs-recommended {
  border-color: rgba(20, 121, 227, 0.28);
  color: var(--shell-blue);
  background: rgba(20, 121, 227, 0.1);
}

.obs-source-page .obs-open-dialog {
  border: 1px solid var(--workbench-border);
  border-radius: var(--workbench-radius);
  background: rgba(248, 252, 255, 0.82);
  box-shadow: 0 2rem 5rem rgba(17, 46, 76, 0.2);
  backdrop-filter: var(--workbench-blur);
  -webkit-backdrop-filter: var(--workbench-blur);
}

.obs-source-page .obs-toast {
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 99px;
  background: rgba(17, 46, 76, 0.88);
  box-shadow: 0 1rem 2.4rem rgba(17, 46, 76, 0.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Talkcraft */
.talkcraft-page > main {
  width: min(var(--shell-workbench-width), calc(100% - (2 * var(--shell-page-gutter))));
  padding-top: clamp(1.3rem, 3vw, 2.2rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.talkcraft-page .app {
  gap: 1rem;
}

.talkcraft-page .hdr {
  position: relative;
  border: 1px solid var(--workbench-border);
  border-radius: var(--workbench-radius);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: var(--workbench-shadow);
  backdrop-filter: var(--workbench-blur);
  -webkit-backdrop-filter: var(--workbench-blur);
}

.talkcraft-page .hdr-logo {
  border: 1px solid rgba(20, 121, 227, 0.24);
  border-radius: 0.75rem;
  color: #ffffff;
  background: linear-gradient(135deg, var(--shell-blue), #2aa8e8);
  box-shadow: 0 0.6rem 1.1rem rgba(20, 121, 227, 0.18);
}

.talkcraft-page .hdr-title,
.talkcraft-page .section-title,
.talkcraft-page .out-title {
  color: var(--shell-ink);
  font-family: var(--shell-body);
  font-weight: 780;
}

.talkcraft-page .hdr-nav {
  gap: 0.28rem;
}

.talkcraft-page .hdr-link {
  border: 1px solid transparent;
  border-radius: 99px;
  color: var(--shell-muted);
  background: transparent;
}

.talkcraft-page .hdr-link:hover:not(:disabled),
.talkcraft-page .hdr-link.active {
  border-color: rgba(20, 121, 227, 0.18);
  color: var(--shell-blue);
  background: rgba(20, 121, 227, 0.1);
}

.talkcraft-page .top-status {
  gap: 0.55rem;
}

.talkcraft-page .status-chip {
  border: 1px solid rgba(88, 136, 178, 0.2);
  border-radius: 99px;
  color: var(--shell-muted);
  background: rgba(255, 255, 255, 0.54);
  box-shadow: 0 0.45rem 1rem rgba(49, 105, 146, 0.06);
}

.talkcraft-page .status-chip::before {
  border-radius: 50%;
}

.talkcraft-page .status-clickable:hover:not(:disabled) {
  border-color: rgba(20, 121, 227, 0.36);
  color: var(--shell-blue);
  background: rgba(255, 255, 255, 0.82);
}

.talkcraft-page .main {
  gap: 1rem;
}

.talkcraft-page .panel.active {
  animation: workbench-panel-in 420ms var(--shell-ease) both;
}

.talkcraft-page .gen-sidebar,
.talkcraft-page .gen-output,
.talkcraft-page .check-main,
.talkcraft-page .check-result,
.talkcraft-page .check-fixed,
.talkcraft-page .kn-body,
.talkcraft-page .s-card {
  border: 1px solid var(--workbench-border);
  border-radius: var(--workbench-radius);
  background: var(--workbench-glass);
  box-shadow: var(--workbench-shadow);
  backdrop-filter: var(--workbench-blur);
  -webkit-backdrop-filter: var(--workbench-blur);
}

.talkcraft-page .gen-sidebar {
  gap: 1.15rem;
}

.talkcraft-page .gen-output {
  overflow: hidden;
}

.talkcraft-page .cfg-label,
.talkcraft-page .out-tips-label {
  color: var(--shell-blue);
  font-weight: 780;
}

.talkcraft-page .pill,
.talkcraft-page .mode-btn,
.talkcraft-page .kn-tab {
  border-color: rgba(88, 136, 178, 0.2);
  border-radius: 99px;
  color: var(--shell-muted);
  background: rgba(255, 255, 255, 0.5);
}

.talkcraft-page .pill:hover:not(:disabled),
.talkcraft-page .mode-btn:hover:not(:disabled),
.talkcraft-page .kn-tab:hover:not(:disabled),
.talkcraft-page .pill.active,
.talkcraft-page .mode-btn.active,
.talkcraft-page .kn-tab.active {
  border-color: rgba(20, 121, 227, 0.28);
  color: var(--shell-blue);
  background: rgba(20, 121, 227, 0.1);
}

.talkcraft-page select,
.talkcraft-page textarea,
.talkcraft-page .s-input,
.talkcraft-page .s-select {
  border-color: rgba(88, 136, 178, 0.22);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.64);
  transition: border-color var(--shell-duration) var(--shell-ease), box-shadow var(--shell-duration) var(--shell-ease), background-color var(--shell-duration) var(--shell-ease);
}

.talkcraft-page select:focus,
.talkcraft-page textarea:focus,
.talkcraft-page .s-input:focus,
.talkcraft-page .s-select:focus {
  border-color: rgba(20, 121, 227, 0.52);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 0 0 0.25rem rgba(20, 121, 227, 0.08);
}

.talkcraft-page .advanced-settings,
.talkcraft-page .model-library {
  border-color: rgba(88, 136, 178, 0.2);
  border-radius: var(--workbench-radius-sm);
  background: rgba(232, 243, 251, 0.48);
}

.talkcraft-page .advanced-settings summary,
.talkcraft-page .model-library summary {
  border-bottom-color: rgba(88, 136, 178, 0.16);
  color: var(--shell-ink);
}

.talkcraft-page .btn-gen {
  border: 0;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, #1479e3, #2aa8e8);
  box-shadow: 0 0.9rem 1.8rem rgba(20, 121, 227, 0.22);
}

.talkcraft-page .btn-gen:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d62bd, #1479e3);
  box-shadow: 0 1.1rem 2.1rem rgba(20, 121, 227, 0.28);
  transform: translateY(-0.16rem);
}

.talkcraft-page .btn-secondary,
.talkcraft-page .btn-fix,
.talkcraft-page .out-btn {
  border-color: rgba(88, 136, 178, 0.22);
  border-radius: 99px;
  color: var(--shell-ink);
  background: rgba(255, 255, 255, 0.58);
}

.talkcraft-page .btn-secondary:hover:not(:disabled),
.talkcraft-page .btn-fix:hover:not(:disabled),
.talkcraft-page .out-btn:hover:not(:disabled) {
  border-color: rgba(20, 121, 227, 0.34);
  color: var(--shell-blue);
  background: rgba(255, 255, 255, 0.84);
  transform: translateY(-0.1rem);
}

.talkcraft-page .out-header {
  border-bottom-color: rgba(88, 136, 178, 0.16);
}

.talkcraft-page .out-btn-primary {
  border-color: rgba(20, 121, 227, 0.26);
  color: var(--shell-blue);
  background: rgba(20, 121, 227, 0.1);
}

.talkcraft-page .out-body {
  background: rgba(255, 255, 255, 0.26);
}

.talkcraft-page .out-empty,
.talkcraft-page .check-result .out-empty {
  border-color: rgba(88, 136, 178, 0.2);
  border-radius: var(--workbench-radius-sm);
  background: rgba(232, 243, 251, 0.42);
}

.talkcraft-page .out-empty-icon {
  color: var(--shell-blue);
  text-shadow: 0 0.6rem 1.3rem rgba(20, 121, 227, 0.22);
}

.talkcraft-page .out-empty-text {
  color: var(--shell-ink);
}

.talkcraft-page .out-empty-sub,
.talkcraft-page .section-sub,
.talkcraft-page .s-hint,
.talkcraft-page .muted {
  color: var(--shell-muted);
}

.talkcraft-page .tip-card,
.talkcraft-page .kn-item,
.talkcraft-page .fav-item {
  border-color: rgba(88, 136, 178, 0.16);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.48);
}

.talkcraft-page .tip-card:hover,
.talkcraft-page .kn-item:hover,
.talkcraft-page .fav-item:hover {
  border-color: rgba(20, 121, 227, 0.26);
  background: rgba(255, 255, 255, 0.76);
  transform: translateY(-0.12rem);
}

.talkcraft-page .banned-inline {
  border-color: rgba(216, 76, 98, 0.28);
  border-radius: var(--workbench-radius-sm);
  background: rgba(216, 76, 98, 0.08);
}

.talkcraft-page .ftr {
  border-top-color: var(--shell-rule);
  color: var(--shell-muted);
}

.talkcraft-page .toast {
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 99px;
  background: rgba(17, 46, 76, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.talkcraft-page .loading-overlay {
  background: rgba(237, 245, 252, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.talkcraft-page .loader {
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: var(--workbench-radius);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--workbench-shadow-hover);
  backdrop-filter: var(--workbench-blur);
  -webkit-backdrop-filter: var(--workbench-blur);
}

.talkcraft-page .loader-ring {
  border-color: rgba(20, 121, 227, 0.2);
  border-top-color: var(--shell-blue);
}

@keyframes workbench-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(1.5rem, -1.2rem, 0) scale(1.06); }
}

@keyframes workbench-panel-in {
  from { opacity: 0.55; transform: translateY(0.45rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 52rem) {
  .studio-page .member-topbar,
  .talkcraft-page .member-topbar,
  .obs-source-page .member-topbar {
    margin: 0;
    border-radius: 0;
    border-right: 0;
    border-left: 0;
  }
}

@media (max-width: 44rem) {
  .studio-page .studio-hero,
  .studio-page .settings-hero,
  .obs-source-page .obs-hero {
    border-radius: var(--workbench-radius-sm);
  }

  .studio-page .studio-hero::after,
  .studio-page .settings-hero::after,
  .obs-source-page .obs-hero::after {
    right: -4rem;
    bottom: -5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.studio-page::before,
  body.talkcraft-page::before,
  body.obs-source-page::before,
  body.studio-page::after,
  body.talkcraft-page::after,
  body.obs-source-page::after,
  .talkcraft-page .panel.active {
    animation: none;
  }
}