/*
 * WaveBlue Web/Desktop Polish
 * Scoped after legacy styles. Keeps mobile behavior intact and aligns app,
 * WaveLab, and WaveStream to one platform shell.
 */

:root {
  --wbp-bg: #05080d;
  --wbp-bg-soft: #0a1018;
  --wbp-panel: rgba(13, 20, 31, 0.94);
  --wbp-panel-2: rgba(18, 27, 41, 0.92);
  --wbp-panel-3: rgba(24, 35, 52, 0.88);
  --wbp-line: rgba(148, 163, 184, 0.18);
  --wbp-line-strong: rgba(125, 211, 252, 0.28);
  --wbp-text: #eef7ff;
  --wbp-muted: rgba(226, 238, 248, 0.64);
  --wbp-soft: rgba(226, 238, 248, 0.42);
  --wbp-accent: #00a3ff;
  --wbp-accent-2: #16d6c8;
  --wbp-good: #31d58b;
  --wbp-warn: #f6c453;
  --wbp-danger: #ff5a69;
  --wbp-radius: 8px;
  --wbp-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body.app-page,
body.wb-studio-page,
body.wb-wallet-page {
  background:
    linear-gradient(180deg, rgba(0, 163, 255, 0.05), transparent 360px),
    var(--wbp-bg) !important;
  color: var(--wbp-text);
}

body.wb-studio-page,
body.wb-wallet-page {
  --bg: var(--wbp-bg);
  --bg2: var(--wbp-panel);
  --bg3: var(--wbp-panel-2);
  --surface: var(--wbp-panel);
  --surface-1: var(--wbp-panel);
  --surface-2: var(--wbp-panel-2);
  --surface-3: var(--wbp-panel-3);
  --surface-glass: rgba(8, 13, 20, 0.86);
  --border: var(--wbp-line);
  --accent: var(--wbp-accent);
  --accent2: var(--wbp-accent-2);
  --text: var(--wbp-text);
  --text2: var(--wbp-muted);
  --fg: var(--wbp-text);
  --muted: var(--wbp-muted);
  --radius: var(--wbp-radius);
}

.wb-platform-logo,
.wb-logo-icon img,
.bw-rail-logo,
.bw-community-banner-logo,
.ws-preview-brand img,
#bw-preloader img {
  object-fit: contain;
}

.wb-logo-icon {
  overflow: hidden;
}

.wb-logo-icon img,
.wb-platform-logo {
  width: 100%;
  height: 100%;
  display: block;
}

body.wb-studio-page .wb-header {
  background: rgba(7, 12, 19, 0.9);
  border-bottom: 1px solid var(--wbp-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.wb-studio-page .wb-logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--wbp-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.wb-studio-page .wb-logo-text {
  color: var(--wbp-text);
  letter-spacing: 0;
}

body.wb-studio-page .wb-page-title {
  color: var(--wbp-muted);
}

body.wb-studio-page .wb-page-title span {
  color: var(--wbp-text);
}

body.wb-studio-page .wb-back-link,
body.wb-studio-page .btn-secondary,
body.wb-studio-page .activity-badge,
body.wb-studio-page .section-count {
  border-radius: var(--wbp-radius);
  border-color: var(--wbp-line);
  background: rgba(255, 255, 255, 0.045);
}

body.wb-studio-page .wb-back-link:hover,
body.wb-studio-page .btn-secondary:hover {
  color: #fff;
  border-color: var(--wbp-line-strong);
  background: rgba(0, 163, 255, 0.12);
}

body.wb-studio-page .btn-quickstart,
body.wb-studio-page .btn-start {
  border-radius: var(--wbp-radius);
  background: linear-gradient(135deg, var(--wbp-accent), var(--wbp-accent-2));
  box-shadow: 0 12px 34px rgba(0, 128, 220, 0.26);
}

body.wb-studio-page .btn-quickstart:hover,
body.wb-studio-page .btn-start:hover {
  filter: brightness(1.07);
  box-shadow: 0 16px 42px rgba(0, 128, 220, 0.34);
}

body.wb-studio-page .hero-title,
body.wb-studio-page .hero-title span {
  color: var(--wbp-text);
  -webkit-text-fill-color: currentColor;
  background: none;
  letter-spacing: 0;
}

body.wb-studio-page .hero-sub {
  color: var(--wbp-muted);
}

body.wb-studio-page .quickstart,
body.wb-studio-page .status-banner,
body.wb-studio-page .info-box,
body.wb-studio-page .activity-strip,
body.wb-studio-page .tool-card,
body.wb-studio-page .platform-card {
  border-radius: var(--wbp-radius);
  background: var(--wbp-panel);
  border-color: var(--wbp-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.wb-studio-page .tool-card,
body.wb-studio-page .platform-card {
  min-height: 172px;
}

body.wb-studio-page .tool-card:hover,
body.wb-studio-page .platform-card:hover {
  background: var(--wbp-panel-2);
  border-color: var(--wbp-line-strong);
  transform: translateY(-1px);
}

body.wb-studio-page .tool-icon,
body.wb-studio-page .platform-icon {
  border-radius: var(--wbp-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.wb-studio-page .key-input {
  min-height: 38px;
  border-radius: var(--wbp-radius);
  background: rgba(0, 0, 0, 0.24);
  border-color: var(--wbp-line);
}

body.wb-studio-page .toggle-label {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--wbp-line);
}

body.wb-studio-page .toast {
  border-radius: var(--wbp-radius);
  background: rgba(10, 16, 24, 0.96);
  border-color: var(--wbp-line-strong);
}

body.app-page,
body.app-page *,
body.wb-wallet-page,
body.wb-wallet-page * {
  scrollbar-color: rgba(96, 165, 250, 0.32) rgba(3, 7, 12, 0.82);
}

body.app-page *::-webkit-scrollbar,
body.wb-wallet-page *::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

body.app-page *::-webkit-scrollbar-track,
body.wb-wallet-page *::-webkit-scrollbar-track {
  background: rgba(3, 7, 12, 0.86);
}

body.app-page *::-webkit-scrollbar-thumb,
body.wb-wallet-page *::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.32);
  border-radius: 999px;
  border: 2px solid rgba(3, 7, 12, 0.86);
}

body.app-page *::-webkit-scrollbar-thumb:hover,
body.wb-wallet-page *::-webkit-scrollbar-thumb:hover {
  background: rgba(125, 211, 252, 0.48);
}

body.wb-wallet-page {
  min-height: 100vh;
  color-scheme: dark;
}

body.wb-wallet-page .bw-navbar {
  background: rgba(5, 9, 15, 0.94) !important;
  border-bottom: 1px solid var(--wbp-line) !important;
  box-shadow: none !important;
}

body.wb-wallet-page .bw-navbar-logo img {
  object-fit: contain;
}

body.wb-wallet-page main,
body.wb-wallet-page .bw-page-container {
  background: transparent !important;
}

body.wb-wallet-page .wallet-hero {
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.13), transparent 38%),
    rgba(8, 13, 20, 0.96) !important;
  border-color: var(--wbp-line) !important;
}

body.wb-wallet-page .credits-card,
body.wb-wallet-page .balance-chip,
body.wb-wallet-page .sidebar-card,
body.wb-wallet-page .tx-item,
body.wb-wallet-page .tx-filter-btn,
body.wb-wallet-page .pkg-card,
body.wb-wallet-page .topup-panel,
body.wb-wallet-page .topup-preset,
body.wb-wallet-page .topup-rate,
body.wb-wallet-page .topup-fire-info {
  background: rgba(13, 20, 31, 0.94) !important;
  border-color: var(--wbp-line) !important;
  box-shadow: none !important;
}

body.wb-wallet-page .credits-card {
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(13, 20, 31, 0.96)) !important;
}

body.wb-wallet-page .wallet-sidebar {
  gap: 14px !important;
}

body.wb-wallet-page .wallet-grid {
  gap: 18px !important;
}

body.wb-wallet-page .pkg-grid {
  gap: 8px !important;
}

body.wb-wallet-page input,
body.wb-wallet-page select,
body.wb-wallet-page textarea,
body.wb-wallet-page .transfer-form input,
body.wb-wallet-page .don-input,
body.wb-wallet-page .topup-custom-row input {
  background: rgba(4, 8, 14, 0.92) !important;
  color: var(--wbp-text) !important;
  border-color: var(--wbp-line) !important;
}

body.wb-wallet-page input::placeholder,
body.wb-wallet-page textarea::placeholder {
  color: rgba(226, 238, 248, 0.42) !important;
}

body.wb-wallet-page .bw-mobile-menu,
body.wb-wallet-page .bw-dropdown-menu {
  background: rgba(8, 13, 20, 0.98) !important;
  border-color: var(--wbp-line) !important;
}

body.wb-wallet-page .payment-result {
  background: rgba(13, 20, 31, 0.96) !important;
  border-color: var(--wbp-line) !important;
  box-shadow: var(--wbp-shadow) !important;
}

@media (min-width: 960px) {
  body.app-page {
    overflow: hidden;
  }

  body.app-page .bw-app {
    background:
      linear-gradient(180deg, rgba(0, 163, 255, 0.035), transparent 240px),
      var(--wbp-bg) !important;
  }

  body.app-page .bw-workspace-rail {
    background: rgba(7, 12, 19, 0.96) !important;
    border-right: 1px solid var(--wbp-line) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
  }

  body.app-page .bw-rail-logo-wrap {
    min-height: 46px;
    padding: 7px 8px !important;
    border-radius: var(--wbp-radius);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  body.app-page .bw-rail-logo {
    width: 30px;
    height: 30px;
  }

  body.app-page .bw-workspace-add,
  body.app-page .bw-rail-icon-btn,
  body.app-page .bw-rail-uc-btn,
  body.app-page .bw-btn-icon {
    border-radius: var(--wbp-radius) !important;
  }

  body.app-page .bw-workspace-add:hover,
  body.app-page .bw-rail-icon-btn:hover,
  body.app-page .bw-rail-uc-btn:hover,
  body.app-page .bw-btn-icon:hover {
    background: rgba(0, 163, 255, 0.12) !important;
    color: #fff !important;
  }

  body.app-page .bw-rail-usercard,
  body.app-page .bw-sidebar,
  body.app-page .bw-chat-main,
  body.app-page #community-table-web,
  body.app-page .bw-stream-studio-main {
    background: var(--wbp-panel) !important;
    border-color: var(--wbp-line) !important;
  }

  body.app-page .bw-sidebar {
    width: clamp(252px, 18vw, 292px) !important;
    min-width: 252px !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
  }

  body.app-page .bw-app {
    grid-template-columns: clamp(236px, 16vw, 276px) minmax(0, 1fr) clamp(212px, 18vw, 300px) !important;
  }

  body.app-page .bw-rp-static,
  body.app-page .bw-right-panel {
    background: rgba(4, 7, 12, 0.98) !important;
    border-left: 1px solid rgba(148, 163, 184, 0.14) !important;
    color: var(--wbp-text) !important;
    box-shadow: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.app-page .bw-rp-static > div[style*="flex:1"] {
    background: rgba(5, 9, 15, 0.94) !important;
  }

  body.app-page .bw-rp-vert-bar {
    width: 44px !important;
    padding: 7px 0 !important;
    gap: 2px !important;
    background: rgba(2, 5, 9, 0.96) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.12) !important;
  }

  body.app-page .bw-rp-vert-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    color: rgba(226, 238, 248, 0.66) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(148, 163, 184, 0.12) !important;
    transform: none !important;
  }

  body.app-page .bw-rp-vert-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  body.app-page .bw-rp-group-label,
  body.app-page .bw-rp-server-status,
  body.app-page .bw-rp-ads-strip,
  body.app-page .bw-rp-ad-lower-third {
    display: none !important;
  }

  body.app-page .bw-rp-live-badge {
    margin-top: 4px !important;
    font-size: 0.55rem !important;
    padding: 5px 2px !important;
  }

  body.app-page #sidebar-mini-universe {
    padding: 6px 6px 3px !important;
    background: rgba(4, 7, 12, 0.72) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  body.app-page #mini-universe-canvas {
    width: 96px !important;
    height: 96px !important;
    display: block !important;
    margin-inline: auto !important;
  }

  body.app-page .mini-universe-label {
    font-size: 0.58rem !important;
    line-height: 1.1 !important;
    padding: 2px 0 !important;
  }

  body.app-page #mini-community-list {
    max-height: 70px !important;
    font-size: 0.66rem !important;
  }

  body.app-page .bw-rp-streams-main {
    min-height: 86px !important;
    background: rgba(5, 9, 15, 0.94) !important;
  }

  body.app-page .bw-rp-streams-title {
    padding: 6px 8px 4px !important;
    font-size: 0.58rem !important;
  }

  body.app-page .bw-rp-streams-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  body.app-page .bw-rp-stream-card {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
    border-radius: 7px !important;
  }

  body.app-page .bw-rp-stream-thumb {
    border-radius: 7px 7px 0 0 !important;
  }

  body.app-page .bw-rp-stream-info {
    min-height: 24px !important;
    padding: 4px 5px !important;
  }

  body.app-page .bw-rp-stream-card-name {
    font-size: 0.68rem !important;
  }

  body.app-page .bw-rp-stream-card-viewers {
    font-size: 0.6rem !important;
  }

  body.app-page .bw-sidebar-header,
  body.app-page .bw-chat-header,
  body.app-page .ws-studio-topbar {
    min-height: 58px;
    background: rgba(9, 15, 23, 0.9) !important;
    border-color: var(--wbp-line) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  body.app-page .ws-slider-wrap,
  body.app-page #sidebar-orbit-wrap,
  body.app-page .bw-sidebar-tools-menu,
  body.app-page .bw-sidebar-members,
  body.app-page .bw-input-wrapper-chat,
  body.app-page .ws-studio-panel,
  body.app-page .ws-studio-preview,
  body.app-page .ws-studio-mixer,
  body.app-page .ws-studio-chat,
  body.app-page .wb-ct-roundtable,
  body.app-page .wb-ct-chat-panel {
    border-radius: var(--wbp-radius) !important;
    border-color: var(--wbp-line) !important;
    background: var(--wbp-panel-2) !important;
    box-shadow: none !important;
  }

  body.app-page .bw-sidebar-members,
  body.app-page #sidebar-members-section,
  body.app-page #sidebar-members-body {
    background: rgba(4, 7, 12, 0.97) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
  }

  body.app-page .bw-sidebar-members-header {
    background: rgba(4, 7, 12, 0.88) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
  }

  body.app-page .bw-channel-section,
  body.app-page .bw-sidebar-tools,
  body.app-page .bw-sidebar-body {
    min-width: 0;
  }

  body.app-page .bw-channel-item,
  body.app-page .bw-sidebar-tool-link,
  body.app-page .bw-member-item {
    border-radius: 6px !important;
  }

  body.app-page .bw-channel-item:hover,
  body.app-page .bw-sidebar-tool-link:hover,
  body.app-page .bw-member-item:hover {
    background: rgba(255, 255, 255, 0.065) !important;
  }

  body.app-page .bw-channel-item.active,
  body.app-page .ws-studio-tab.active {
    background: rgba(0, 163, 255, 0.14) !important;
    color: #fff !important;
    border-color: rgba(0, 163, 255, 0.32) !important;
  }

  body.app-page .bw-chat-main {
    min-width: 0;
  }

  body.app-page #community-table-web {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }

  body.app-page #community-table-web.active {
    display: flex !important;
    flex-direction: column !important;
  }

  body.app-page .wb-ct-header {
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  body.app-page .wb-ct-title {
    font-size: 12px !important;
  }

  body.app-page .wb-ct-sub,
  body.app-page .wb-ct-pill {
    font-size: 9px !important;
  }

  body.app-page .wb-ct-stage {
    padding: 8px !important;
    overflow: hidden !important;
  }

  body.app-page .bw-messages-container {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 180px),
      rgba(5, 8, 13, 0.34) !important;
  }

  body.app-page .bw-chat-textarea {
    min-height: 44px !important;
    max-height: 140px !important;
    border-radius: var(--wbp-radius) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid var(--wbp-line) !important;
  }

  body.app-page .bw-chat-textarea:focus {
    border-color: var(--wbp-line-strong) !important;
    box-shadow: 0 0 0 2px rgba(0, 163, 255, 0.08) !important;
  }

  body.app-page .bw-message,
  body.app-page .message,
  body.app-page .chat-message {
    max-width: min(760px, 78%);
  }

  body.app-page .bw-stream-studio-main {
    height: 100%;
    min-width: 0;
    overflow: hidden;
  }

  body.app-page .ws-studio-body {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(240px, 300px) !important;
    gap: 10px !important;
    padding: 10px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.app-page .ws-studio-left,
  body.app-page .ws-studio-side,
  body.app-page .ws-studio-center {
    min-width: 0 !important;
  }

  body.app-page .ws-studio-center {
    overflow: hidden !important;
  }

  body.app-page .ws-studio-side,
  body.app-page .ws-studio-chat,
  body.app-page .ws-studio-panel {
    background: rgba(4, 7, 12, 0.95) !important;
  }

  body.app-page .ws-studio-preview {
    min-height: 0 !important;
    height: min(56vh, 520px) !important;
    overflow: hidden;
    background: rgba(5, 9, 15, 0.96) !important;
  }

  body.app-page .ws-studio-preview-stage {
    border-radius: var(--wbp-radius) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 5, 9, 0.82) !important;
  }

  body.app-page .ws-program-frame {
    width: min(100%, 820px) !important;
    max-height: calc(100vh - 278px) !important;
    margin-inline: auto !important;
  }

  body.app-page .ws-studio-tabs,
  body.app-page .ws-studio-actions {
    min-width: 0;
  }

  body.app-page .ws-studio-tab,
  body.app-page .ws-studio-btn,
  body.app-page .ws-studio-icon-btn {
    border-radius: var(--wbp-radius) !important;
    white-space: nowrap;
  }

  body.app-page .ws-studio-btn.primary,
  body.app-page .ws-studio-btn.accent,
  body.app-page .bw-send-btn,
  body.app-page .bw-btn-primary {
    background: linear-gradient(135deg, var(--wbp-accent), var(--wbp-accent-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
  }

  body.app-page .wb-ct-roundtable {
    display: grid !important;
    min-height: 0 !important;
    height: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(118px, 1fr) minmax(118px, 170px) minmax(118px, 1fr) !important;
    grid-template-rows: minmax(0, 0.85fr) auto minmax(112px, 176px) !important;
    gap: 8px !important;
    padding: 9px !important;
    overflow: hidden !important;
  }

  body.app-page .wb-ct-roundtable::before {
    inset: 18px 10% !important;
    opacity: 0.72 !important;
  }

  body.app-page .wb-ct-roundtable::after {
    opacity: 0.45 !important;
  }

  body.app-page .wb-ct-table-core {
    gap: 7px !important;
  }

  body.app-page .wb-ct-host-seat {
    gap: 6px !important;
  }

  body.app-page .wb-ct-host-label {
    font-size: 9px !important;
  }

  body.app-page .wb-ct-host-actions {
    gap: 4px !important;
  }

  body.app-page .wb-ct-council-center {
    width: min(118px, 100%) !important;
    min-height: 32px !important;
    padding: 5px 8px !important;
  }

  body.app-page .wb-ct-center-title,
  body.app-page .wb-ct-center-sub {
    font-size: 8px !important;
  }

  body.app-page .wb-ct-host-planet {
    width: clamp(82px, 7vw, 104px) !important;
    height: clamp(82px, 7vw, 104px) !important;
  }

  body.app-page .wb-ct-host-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  body.app-page .wb-ct-host-name {
    max-width: 68px !important;
    font-size: 9px !important;
  }

  body.app-page .wb-ct-host-badge {
    font-size: 7px !important;
  }

  body.app-page .wb-ct-seat-band {
    padding: 8px !important;
    gap: 6px !important;
    border-radius: var(--wbp-radius) !important;
  }

  body.app-page .wb-ct-band-head {
    font-size: 8px !important;
  }

  body.app-page .wb-ct-band-head strong {
    font-size: 9px !important;
  }

  body.app-page .wb-ct-guests {
    grid-template-columns: repeat(4, minmax(38px, 1fr)) !important;
    grid-auto-rows: minmax(42px, 1fr) !important;
    gap: 5px !important;
  }

  body.app-page .wb-ct-guest-avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 8px !important;
  }

  body.app-page .wb-ct-guest-name,
  body.app-page .wb-ct-guest-role {
    max-width: 46px !important;
    font-size: 7px !important;
  }

  body.app-page .wb-ct-chat-panel {
    min-height: 112px !important;
    grid-template-rows: 28px minmax(52px, 1fr) 34px !important;
  }

  body.app-page .wb-ct-chat-head {
    min-height: 28px !important;
    padding: 5px 8px !important;
    font-size: 8px !important;
  }

  body.app-page .wb-ct-chat-messages {
    padding: 6px !important;
    gap: 5px !important;
  }

  body.app-page .wb-ct-chat-msg {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.app-page .wb-ct-chat-msg.own {
    grid-template-columns: minmax(0, 1fr) 24px !important;
  }

  body.app-page .wb-ct-chat-avatar {
    width: 24px !important;
    height: 24px !important;
    font-size: 8px !important;
  }

  body.app-page .wb-ct-chat-text {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }

  body.app-page .wb-ct-chat-form {
    padding: 5px !important;
    gap: 5px !important;
  }

  body.app-page .wb-ct-chat-input {
    height: 28px !important;
    font-size: 10px !important;
  }

  body.app-page .wb-ct-chat-btn {
    min-width: 28px !important;
    height: 28px !important;
  }

  body.app-page .wb-ct-icon-btn,
  body.app-page [data-ct-watch],
  body.app-page [data-ct-gift] {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    aspect-ratio: 1 / 1;
    display: inline-grid !important;
    place-items: center !important;
    line-height: 1 !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
  }

  body.app-page .wb-ct-icon-btn svg,
  body.app-page [data-ct-watch] svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
  }

  body.app-page [data-ct-gift] {
    font-size: 13px !important;
  }

  body.app-page .wb-ct-chat-text,
  body.app-page .bw-input-wrapper-chat,
  body.app-page .modal-content,
  body.app-page .modal,
  body.app-page .bw-modal {
    border-radius: var(--wbp-radius) !important;
  }

  body.app-page .bw-avatar,
  body.app-page .bw-rail-uc-avatar,
  body.app-page .orbit-center {
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.18), 0 10px 28px rgba(0, 0, 0, 0.22) !important;
  }

  body.app-page .ws-preview-brand {
    color: var(--wbp-text) !important;
  }

  body.app-page #vela-widget {
    right: 10px !important;
    bottom: 70px !important;
    gap: 2px !important;
    transform: scale(0.78);
    transform-origin: bottom right;
  }

  body.app-page #vela-avatar-mount {
    width: 64px !important;
    height: 88px !important;
  }

  body.app-page #vela-bubble {
    width: 138px !important;
    max-width: 138px !important;
    padding: 6px 8px !important;
    font-size: 0.56rem !important;
    line-height: 1.35 !important;
  }

  body.app-page #vela-controls {
    gap: 3px !important;
  }

  body.app-page #vela-controls > span:first-child {
    display: none !important;
  }

  body.app-page #vela-controls button {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.68rem !important;
  }

  body.app-page #vela-chat-wrap {
    width: 132px !important;
    gap: 3px !important;
    margin-top: 2px !important;
  }

  body.app-page #vela-chat-input {
    border-radius: 10px !important;
    padding: 4px 7px !important;
    font-size: 0.54rem !important;
  }

  body.app-page #vela-chat-send {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.65rem !important;
  }

  body.app-page #vela-voice-btn {
    opacity: 0.72 !important;
  }
}

@media (min-width: 960px) and (max-width: 1280px) {
  body.app-page .ws-studio-body {
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) !important;
  }

  body.app-page .ws-studio-side {
    display: none !important;
  }
}

@media (min-width: 960px) {
  body.wb-studio-page .wb-main {
    width: min(1180px, calc(100vw - 64px));
    max-width: none;
    padding: 34px 0 76px;
  }

  body.wb-studio-page .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 28px;
    align-items: end;
    margin-bottom: 24px;
  }

  body.wb-studio-page .hero::after {
    content: "";
    min-height: 150px;
    border-radius: var(--wbp-radius);
    border: 1px solid var(--wbp-line);
    background:
      linear-gradient(135deg, rgba(0, 163, 255, 0.16), rgba(22, 214, 200, 0.08)),
      radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.16), transparent 34%),
      rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  body.wb-studio-page .hero-eyebrow,
  body.wb-studio-page .hero-title,
  body.wb-studio-page .hero-sub {
    grid-column: 1;
  }

  body.wb-studio-page .hero-title {
    font-size: clamp(2rem, 3vw, 3.1rem);
    line-height: 1.05;
  }

  body.wb-studio-page .quickstart,
  body.wb-studio-page .status-banner {
    margin-bottom: 22px;
  }

  body.wb-studio-page .tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  body.wb-studio-page .platform-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  body.wb-studio-page .action-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  body.wb-studio-page .info-box {
    max-width: none;
  }
}

@media (min-width: 1280px) {
  body.wb-studio-page .platform-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 959px) {
  body.wb-studio-page .wb-header {
    gap: 10px;
  }

  body.wb-studio-page .wb-logo-text {
    font-size: 0.95rem;
  }
}