@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');

/* WaveBlue Aurora 2099: light social surfaces, dark media surfaces. */
:root,
[data-theme="dark"],
[data-theme="light"] {
  color-scheme: light;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --bg: #F6F9FF;
  --bg2: #FFFFFF;
  --bg3: #EEF5FF;
  --surface: #FFFFFF;
  --surface-1: #FFFFFF;
  --surface-2: #F8FBFF;
  --surface-3: #EEF5FF;
  --surface-glass: rgba(255,255,255,0.84);
  --border: #DCE8F7;
  --fg: #0D1728;
  --text: #0D1728;
  --muted: #5F6F86;
  --text2: #5F6F86;

  --accent: #1677FF;
  --accent-hover: #0B62D8;
  --accent2: #18C7D4;
  --accent-rgb: 22,119,255;
  --accent-glow: rgba(22,119,255,0.22);
  --accent-subtle: rgba(22,119,255,0.10);

  --live: #EF3B5D;
  --danger: #EF3B5D;
  --danger-glow: rgba(239,59,93,0.28);
  --gift: #FFD166;
  --gold: #FFD166;
  --success: #1EBD72;
  --online: #1EBD72;
  --away: #F59E0B;
  --warning: #F59E0B;
  --offline: #8EA0B7;

  --media-bg: #050814;
  --media-surface: rgba(8,13,28,0.84);
  --media-surface-2: rgba(12,18,36,0.72);
  --media-line: rgba(255,255,255,0.14);

  --radius-sm: 8px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --shadow-md: 0 14px 38px rgba(22,64,120,0.14);
  --shadow-lg: 0 24px 70px rgba(22,64,120,0.18);
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-ui) !important;
}

body {
  color: var(--fg);
  background:
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 48%, #EEF5FF 100%);
  letter-spacing: 0;
}

code,
kbd,
samp,
pre,
.mono,
.cmd-text,
.stream-info-card code,
.stream-info-row code,
#obs-stream-key,
#obs-server-url,
#st-api-token,
#st-ref-code,
#st-webrtc-stats,
#st-system-info,
#st-desktop-version,
#st-gaming-overlay-url,
#hk-mute,
#hk-cam,
#hk-settings,
#hk-chat,
#hk-overlay,
.bw-bottom-bar-clock,
.hud-metric,
.hud-value,
[data-mono="true"] {
  font-family: var(--font-mono) !important;
}

/* Component standard */
.bw-btn,
.bw-btn-icon,
.hdr-btn,
.btn-cam,
.feed-action-btn,
.mob-action-btn,
.mob-grid-btn,
.orb,
.sbar-tab {
  letter-spacing: 0 !important;
}

.bw-btn {
  min-height: 44px;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 0.94rem;
  font-weight: 700;
  box-shadow: none;
}

.bw-btn-primary,
.bw-btn.primary,
.ofl-action-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(22,119,255,0.20) !important;
}

.bw-btn-secondary,
.bw-btn-ghost,
.bw-btn.secondary {
  background: var(--surface-2) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
}

.bw-btn-ghost:hover,
.bw-btn-secondary:hover {
  background: var(--surface-3) !important;
  border-color: rgba(22,119,255,0.34) !important;
}

.bw-btn-live,
.bw-btn.live {
  background: var(--live) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.bw-btn-danger,
.bw-btn.danger {
  background: rgba(239,59,93,0.10) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(239,59,93,0.24) !important;
}

.bw-btn-gift,
.bw-btn.gift {
  background: linear-gradient(135deg, #FFE6A3, var(--gift)) !important;
  color: #4B3300 !important;
  border: 1px solid rgba(160,112,0,0.18) !important;
}

.bw-btn-icon,
.hdr-btn,
.feed-action-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .bw-btn-icon,
  .hdr-btn,
  .feed-action-btn,
  .mob-action-btn,
  .orb {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* Light app shell */
.bw-app {
  background: var(--bg) !important;
  color: var(--fg) !important;
}

.bw-workspace-rail,
.bw-sidebar,
.bw-chat-main,
.bw-right-panel,
.bw-mobile-top,
.bw-bottom-bar,
.bw-modal,
.bw-device-picker,
.bw-mobile-profile-menu,
.bw-dm-panel,
.bw-popout,
.profile-popup,
.wallet-modal,
.bw-set-panel {
  background: var(--surface-glass) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.bw-sidebar,
.bw-workspace-rail {
  background: #FFFFFF !important;
}

.bw-chat-main {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%) !important;
}

.bw-channel-item,
.bw-workspace-item,
.bw-rail-icon-btn,
.bw-rail-uc-btn,
.bw-mh-btn,
.bw-set-nav-item,
.bw-set-tab,
.bw-friends-tab,
.bw-follower-tab,
.bw-dm-conv-item,
.bw-member-item,
.bw-popout-btn {
  border-radius: var(--radius-sm) !important;
}

.bw-sidebar-title {
  font-size: 0.98rem !important;
  letter-spacing: 0 !important;
}

.bw-channel-item,
.bw-channel-name,
.bw-workspace-name,
.bw-message-bubble,
.bw-message-username,
.bw-label,
.bw-set-nav-item,
.bw-dm-conv-name {
  font-size: 0.9rem !important;
  letter-spacing: 0 !important;
}

.bw-channel-icon {
  font-size: 1rem !important;
}

.label-section,
.bw-pill,
.bw-badge,
.bw-bar-label,
.bw-bottom-bar-status,
.bw-rail-uc-statustext {
  font-size: 0.72rem !important;
  letter-spacing: 0.02em !important;
}

.bw-channel-item:hover,
.bw-workspace-item:hover,
.bw-rail-icon-btn:hover,
.bw-rail-uc-btn:hover,
.bw-mh-btn:hover,
.bw-set-nav-item:hover,
.bw-dm-conv-item:hover,
.bw-member-item:hover,
.bw-popout-btn:hover {
  background: var(--surface-3) !important;
  color: var(--fg) !important;
}

.bw-channel-item.active,
.bw-workspace-item.active,
.bw-set-nav-item.active,
.bw-dm-conv-item.active,
.bw-set-tab.active,
.bw-friends-tab.active,
.bw-follower-tab.active {
  background: var(--accent-subtle) !important;
  color: var(--accent) !important;
}

.bw-rail-trigger,
#btn-universum {
  color: var(--accent) !important;
  background: rgba(255,255,255,0.86) !important;
  border-color: rgba(22,119,255,0.24) !important;
  box-shadow: 0 10px 26px rgba(22,64,120,0.14) !important;
}

.bw-workspace-icon,
.bw-avatar,
.bw-rail-uc-avatar,
.comment-avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
}

.bw-bottom-bar {
  height: 58px !important;
  max-height: 58px !important;
  border-top: 1px solid var(--border) !important;
}

.bw-bottom-bar-controls .bw-btn-icon {
  width: 40px !important;
  height: 40px !important;
  color: var(--muted) !important;
}

.bw-bottom-bar-controls .bw-btn-icon:hover,
.bw-bottom-bar-controls .bw-btn-icon.active {
  background: var(--accent-subtle) !important;
  color: var(--accent) !important;
}

.bw-input,
.bw-textarea,
.bw-select,
.bw-memmodal-search,
.bw-follower-broadcast textarea,
#dm-input {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.bw-input:focus,
.bw-textarea:focus,
.bw-select:focus,
#dm-input:focus {
  border-color: rgba(22,119,255,0.62) !important;
  box-shadow: 0 0 0 3px rgba(22,119,255,0.12) !important;
}

.bw-toast,
.toast {
  background: rgba(255,255,255,0.92) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

.bw-modal-overlay,
.wallet-modal-backdrop,
.gift-confirm-backdrop {
  background: rgba(13,23,40,0.42) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Media screens keep a dark video-first base. */
body.stream-page,
body.watch-page,
body.host-page,
body.watch-page #app,
body.host-page #app {
  color-scheme: dark;
  --bg: var(--media-bg);
  --bg2: #0B1020;
  --bg3: #10172A;
  --surface: #0B1020;
  --surface-1: #0B1020;
  --surface-2: #10172A;
  --surface-3: #17213A;
  --border: rgba(255,255,255,0.14);
  --fg: #F8FBFF;
  --text: #F8FBFF;
  --muted: rgba(248,251,255,0.66);
  --text2: rgba(248,251,255,0.66);
  background: var(--media-bg) !important;
  color: #F8FBFF !important;
}

body.watch-page .stream-header,
body.host-page .stream-header,
.feed-nav {
  background: linear-gradient(180deg, rgba(5,8,20,0.68), rgba(5,8,20,0.18), transparent) !important;
}

body.watch-page .hdr-btn,
body.host-page .btn-cam,
.feed-action-btn,
.feed-live-chip,
.sbar-tab {
  background: rgba(8,13,28,0.54) !important;
  color: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body.watch-page .hdr-wallet,
.feed-nav-upload,
.feed-follow-btn,
.feed-live-open,
.feed-empty-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 12px 30px rgba(22,119,255,0.28) !important;
}

body.watch-page .hdr-leave,
body.host-page .btn-cam.danger,
body.host-page #btn-end-stream,
.mob-end-btn {
  background: rgba(239,59,93,0.18) !important;
  color: #FFDCE3 !important;
  border-color: rgba(239,59,93,0.34) !important;
}

.chat-overlay,
.admin-overlay,
.gift-picker,
.gift-confirm-box,
.profile-hover-card.stream-profile-sheet,
.stream-bar,
.upload-sheet,
.comments-sheet,
.wallet-modal,
.stream-info-card,
.modal-box {
  background: rgba(248,251,255,0.92) !important;
  color: #0D1728 !important;
  border: 1px solid rgba(220,232,247,0.92) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.26) !important;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

body.chat-immersive-mode .chat-overlay {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.chat-overlay-header,
.chat-input-area,
.comments-header,
.comments-input-row,
.wallet-modal-header,
.admin-overlay-header {
  border-color: rgba(13,23,40,0.10) !important;
}

.comments-header button,
.overlay-close {
  color: #5F6F86 !important;
}

.chat-msg,
.chat-bubble,
.comment-text,
.chat-header-title,
.chat-header-viewers,
.chat-viewer-pill,
.gift-tab,
.gift-item-name,
.gift-confirm-name,
.wallet-tx-desc {
  color: #0D1728 !important;
}

body.chat-immersive-mode .chat-msg,
body.chat-immersive-mode .chat-bubble,
body.chat-immersive-mode .chat-msg-text,
body.chat-immersive-mode .chat-msg-name {
  color: #FFFFFF !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.66);
}

.chat-input-area input,
#chat-input,
.comments-input,
.upload-input {
  background: #FFFFFF !important;
  color: #0D1728 !important;
  border: 1px solid #DCE8F7 !important;
  border-radius: var(--radius-full) !important;
}

.btn-send,
.comments-send {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

.btn-gift-picker,
.orb-gift,
.gift-item,
.gift-premium-item,
.gift-currency-item,
.gift-confirm-send,
.gift-quickbuy-pkg {
  border-color: rgba(255,209,102,0.42) !important;
}

.btn-gift-picker,
.gift-confirm-send {
  background: linear-gradient(135deg, #FFE6A3, var(--gift)) !important;
  color: #4B3300 !important;
}

.orb,
.mob-action-btn,
.mob-grid-btn {
  background: rgba(8,13,28,0.58) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.24) !important;
}

body.host-page .mob-grid-btn.is-selected,
body.host-page [data-host-tool].is-selected {
  border-color: rgba(24,199,212,0.72) !important;
  background: linear-gradient(180deg, rgba(22,119,255,0.28), rgba(24,199,212,0.14)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 1px rgba(24,199,212,0.2), 0 12px 28px rgba(22,119,255,0.18) !important;
}

body.host-page .mob-grid-btn.is-selected .mob-grid-icon,
body.host-page [data-host-tool].is-selected .mob-grid-icon {
  color: #9BEFF6 !important;
}

.mob-stat-chip,
.mob-chat-pill,
.mob-tool-grid .mob-grid-inner {
  background: rgba(248,251,255,0.92) !important;
  color: #0D1728 !important;
  border: 1px solid rgba(220,232,247,0.86) !important;
}

.mob-live-dot,
.feed-live-dot,
.resume-live-dot {
  background: var(--live) !important;
  box-shadow: 0 0 0 4px rgba(239,59,93,0.18) !important;
}

/* Feed */
.feed-nav-logo {
  background: rgba(255,255,255,0.88) !important;
  color: var(--accent) !important;
  border-color: rgba(22,119,255,0.20) !important;
}

.feed-nav-tab.active,
.sbar-tab.active {
  background: rgba(22,119,255,0.18) !important;
  color: #FFFFFF !important;
}

.feed-app-nav {
  background: linear-gradient(0deg, rgba(5,8,20,0.88), rgba(5,8,20,0.48), transparent) !important;
}

.feed-app-nav a {
  width: 60px !important;
  min-height: 44px !important;
  color: rgba(255,255,255,0.68) !important;
}

.feed-app-nav a.active {
  color: #FFFFFF !important;
}

.feed-app-nav svg,
.feed-action-btn svg,
.feed-nav-logo svg,
.feed-nav-upload svg,
.btn-send svg,
.comments-send svg,
.overlay-close svg,
.mob-end-btn svg,
.mob-grid-icon svg,
.wb-ct-icon-btn svg,
#sbp-start-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.feed-nav-upload::before {
  content: none !important;
}

.mob-grid-icon svg {
  display: block;
}

@media (max-width: 390px) {
  .feed-nav-upload span {
    display: none !important;
  }
}

.feed-live-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(238,245,255,0.82)) !important;
  color: #0D1728 !important;
  border-color: rgba(220,232,247,0.86) !important;
}

.feed-live-title,
.feed-live-meta {
  color: #0D1728 !important;
}

.feed-live-pill {
  color: #FFFFFF !important;
  background: rgba(239,59,93,0.90) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

.feed-item[data-type="community_event"] .feed-live-pill {
  background: rgba(24,199,212,0.92) !important;
}

.feed-item[data-type="roundtable"] .feed-live-pill {
  background: rgba(22,119,255,0.92) !important;
}

.comments-sheet.open,
.upload-modal.open {
  color: #0D1728 !important;
}

/* Dense professional surfaces */
.bw-rp-section,
.bw-set-section,
.bm-endpoint-row,
.ofl-section,
.wallet-package,
.profile-hover-card,
.stream-lobby-card,
.lobby-card {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-md) !important;
}

/* Keep futuristic areas clean, not neon-heavy. */
.bw-orbit-widget,
.bw-universum-orbit,
#galaxy-modal,
#bw-stream-mode,
.hud-panel {
  --accent: #1677FF;
  --accent2: #18C7D4;
  --danger: #EF3B5D;
  --gift: #FFD166;
}

@media (max-width: 768px) {
  body.watch-page .stream-header,
  body.host-page .stream-header {
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    min-height: 50px !important;
  }

  .stream-bar {
    max-height: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .stream-bar-tabs {
    padding: 6px 10px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .sbar-tab {
    min-height: 40px !important;
    font-size: 0.72rem !important;
  }

  .chat-overlay,
  .comments-sheet,
  .upload-sheet {
    border-radius: 16px 16px 0 0 !important;
  }

  .feed-nav {
    padding-top: calc(8px + env(safe-area-inset-top,0px)) !important;
  }

  .feed-app-nav b {
    line-height: 0;
  }
}

/* App Polish Pass: feinere, TT-naehere Dichte ohne neue UX-Flows. */
.bw-app,
body.watch-page,
body.host-page,
body.feed-page {
  --radius-sm: 7px;
  --radius: 9px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

.bw-btn {
  min-height: 38px !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

.bw-btn-sm,
.bw-modal .bw-btn,
.bw-set-panel .bw-btn,
.bill-subtabs .bw-btn,
.bm-actions .bw-btn {
  min-height: 34px !important;
  padding: 6px 10px !important;
  font-size: 0.76rem !important;
}

.bw-btn-icon,
.bw-header-action-btn,
.bw-input-action-btn,
.bw-mh-btn,
.bw-rail-icon-btn,
.bw-rail-uc-btn,
.bw-modal-close {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 9px !important;
}

.bw-header-action-btn {
  gap: 4px !important;
  padding-inline: 9px !important;
  width: auto !important;
  font-size: 0.76rem !important;
}

.bw-header-action-btn svg,
.bw-btn-icon svg,
.bw-input-action-btn svg,
.bw-mh-btn svg,
.bw-modal-close svg {
  width: 17px !important;
  height: 17px !important;
}

.bw-sidebar {
  width: 210px !important;
}

.bw-sidebar-header {
  min-height: 48px !important;
  padding: 8px 10px !important;
}

.bw-sidebar-title {
  font-size: 0.9rem !important;
}

.bw-channel-item,
.bw-workspace-item,
.bw-dm-conv-item,
.bw-member-item,
.bw-memmodal-item {
  min-height: 36px !important;
  padding: 6px 8px !important;
  gap: 8px !important;
  border-radius: 8px !important;
}

.bw-workspace-icon,
.bw-channel-avatar,
.bw-channel-icon,
.bw-memmodal-avatar,
.bw-dm-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  font-size: 0.84rem !important;
  border-radius: 9px !important;
}

.bw-channel-name,
.bw-workspace-name,
.bw-member-name,
.bw-dm-conv-name {
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
}

.bw-chat-header {
  min-height: 50px !important;
  padding: 7px 12px !important;
}

.bw-chat-channel-title {
  font-size: 0.95rem !important;
}

.bw-chat-channel-meta,
.bw-chat-channel-desc {
  font-size: 0.72rem !important;
}

.bw-messages-container {
  padding: 10px 12px 6px !important;
}

.bw-message-group {
  gap: 7px !important;
  margin-top: 3px !important;
  padding: 1px 0 !important;
}

.bw-message-avatar-col {
  width: 24px !important;
}

.bw-message-group .bw-avatar,
.bw-message-group .bw-avatar-wrap {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  font-size: 0.66rem !important;
}

.bw-message-header {
  gap: 4px !important;
  margin-bottom: 1px !important;
}

.bw-message-username {
  font-size: 0.76rem !important;
  line-height: 1.05 !important;
}

.bw-message-timestamp {
  font-size: 0.64rem !important;
  opacity: 0.58 !important;
}

.bw-message-bubble {
  padding: 2px 0 !important;
  max-width: min(78%, 560px) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 0.86rem !important;
  line-height: 1.34 !important;
  box-shadow: none !important;
}

.bw-message-own .bw-message-bubble {
  padding: 5px 9px !important;
  border-radius: 13px 5px 13px 13px !important;
  background: var(--accent) !important;
  color: #fff !important;
}

.bw-message-system {
  margin: 6px 0 !important;
}

.bw-message-system-inner,
.bw-date-divider-label,
.bw-unread-divider-label {
  padding: 2px 9px !important;
  font-size: 0.68rem !important;
  border-radius: 999px !important;
}

.bw-message-input-area {
  padding: 7px 12px 10px !important;
}

.bw-input-wrapper-chat {
  min-height: 42px !important;
  border-radius: 14px !important;
  border-width: 1px !important;
}

.bw-input-icons-left,
.bw-input-icons-right {
  padding: 4px !important;
}

.bw-chat-textarea {
  min-height: 24px !important;
  padding: 7px 3px 6px !important;
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
}

.bw-send-btn,
.btn-send,
.comments-send {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  margin: 0 4px 4px 0 !important;
  border-radius: 10px !important;
}

.bw-modal {
  border-radius: 14px !important;
  box-shadow: 0 18px 52px rgba(13,23,40,0.18) !important;
}

.bw-modal-header {
  min-height: 46px !important;
  padding: 10px 14px !important;
}

.bw-modal-title {
  font-size: 0.96rem !important;
  line-height: 1.2 !important;
}

.bw-modal-body {
  padding: 12px 14px !important;
}

.bw-modal-footer {
  padding: 10px 14px !important;
  gap: 8px !important;
}

.bw-input,
.bw-textarea,
.bw-select,
.bw-memmodal-search,
.bw-follower-broadcast textarea,
#dm-input,
.upload-input,
.comments-input {
  min-height: 38px !important;
  padding: 8px 10px !important;
  font-size: 0.86rem !important;
  border-radius: 10px !important;
}

.bw-input::placeholder,
.bw-textarea::placeholder,
.bw-chat-textarea::placeholder,
.comments-input::placeholder,
.upload-input::placeholder {
  opacity: 0.48 !important;
}

.bw-chat-empty,
.lobby-empty,
.feed-empty,
.camera-placeholder,
.stream-offline-card,
.code-screen-error,
.error-msg,
.bw-auth-error,
#auth-error {
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(220,232,247,0.86) !important;
  color: #5F6F86 !important;
  box-shadow: none !important;
}

.bw-chat-empty-icon,
.camera-placeholder svg,
.stream-offline-card svg,
.feed-empty-icon {
  width: 36px !important;
  height: 36px !important;
  opacity: 0.42 !important;
}

.bw-chat-img-preview {
  max-width: 220px !important;
  max-height: 158px !important;
  border-radius: 8px !important;
}

body.watch-page .hdr-btn,
body.host-page .btn-cam,
.feed-action-btn,
.feed-nav-tab,
.feed-nav-upload,
.feed-live-chip,
.sbar-tab {
  min-height: 34px !important;
  padding: 6px 9px !important;
  border-radius: 10px !important;
  font-size: 0.74rem !important;
  box-shadow: none !important;
}

body.host-page .host-controls .btn-cam,
body.host-page .guest-cam-bar .btn-cam {
  min-height: 32px !important;
  padding: 5px 8px !important;
  font-size: 0.72rem !important;
}

.orb,
.mob-action-btn,
.mob-grid-btn,
.btn-nautical {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 13px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
}

.chat-preview-bubble,
.toast,
.bw-toast {
  padding: 8px 11px !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
}

@media (max-width: 768px) {
  .bw-app {
    padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  }

  .bw-mobile-header {
    padding: 7px 10px 5px !important;
    min-height: 42px !important;
  }

  .bw-mh-brand img {
    width: 20px !important;
    height: 20px !important;
  }

  .bw-mh-brand span {
    font-size: 0.78rem !important;
    letter-spacing: 0 !important;
  }

  .bw-mobile-bottom-nav {
    height: calc(56px + env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,0.94) !important;
    border-top-color: rgba(13,23,40,0.08) !important;
    box-shadow: 0 -12px 34px rgba(13,23,40,0.10) !important;
  }

  .bw-mbn-item {
    position: relative !important;
    gap: 2px !important;
    padding: 6px 2px 5px !important;
    font-size: 9px !important;
    color: #7B8AA1 !important;
  }

  .bw-mbn-item svg {
    width: 20px !important;
    height: 20px !important;
  }

  .bw-mbn-item.active {
    color: var(--accent) !important;
  }

  .bw-mbn-item.active::before {
    content: '';
    position: absolute;
    top: 5px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--accent);
  }

  .bw-sidebar {
    width: min(82vw, 310px) !important;
  }

  .bw-chat-header {
    min-height: 46px !important;
    padding: 6px 10px !important;
  }

  .bw-messages-container {
    padding: 8px 10px 4px !important;
  }

  .bw-message-group {
    gap: 6px !important;
    margin-top: 2px !important;
  }

  .bw-message-bubble {
    max-width: 86% !important;
    font-size: 0.84rem !important;
  }

  .bw-message-input-area {
    padding: 6px 9px 7px !important;
    padding-bottom: calc(7px + env(safe-area-inset-bottom)) !important;
  }

  .bw-input-wrapper-chat {
    min-height: 40px !important;
  }

  .bw-btn,
  .bw-btn-icon {
    min-height: 38px !important;
  }

  .bw-modal-overlay .bw-modal,
  .bw-modal {
    width: min(94vw, 520px) !important;
    max-width: min(94vw, 520px) !important;
    max-height: 88vh !important;
    border-radius: 14px !important;
  }

  .bw-mob-comm-sheet,
  .comments-sheet,
  .upload-sheet,
  .chat-overlay {
    border-radius: 14px 14px 0 0 !important;
  }

  body.watch-page .hdr-btn,
  body.host-page .btn-cam,
  .feed-action-btn,
  .feed-live-chip {
    min-height: 32px !important;
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
  }
}

@media (max-width: 380px) {
  .bw-message-group .bw-avatar,
  .bw-message-group .bw-avatar-wrap,
  .bw-message-avatar-col {
    width: 22px !important;
    min-width: 22px !important;
  }

  .bw-message-bubble {
    font-size: 0.8rem !important;
  }

  .bw-mbn-item span {
    display: none !important;
  }
}