:root {
      --apple-bg: #fbfbfd;
      --apple-card: rgba(255, 255, 255, 0.72);
      --apple-border: rgba(15, 23, 42, 0.08);
      --apple-text: #1d1d1f;
      --apple-subtext: #6e6e73;
      --apple-blue: #0071e3;
      --apple-hover: #f5f5f7;
      --apple-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
    }
    body {
      background:
        radial-gradient(circle at top left, rgba(191, 219, 254, 0.22) 0%, transparent 24%),
        radial-gradient(circle at top right, rgba(226, 232, 240, 0.55) 0%, transparent 28%),
        linear-gradient(180deg, #ffffff 0%, var(--apple-bg) 100%);
      color: var(--apple-text);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    .glass {
      background: var(--apple-card);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border: 0.5px solid var(--apple-border);
      box-shadow: var(--apple-shadow);
    }
    .hide {
      display: none !important;
    }
    .option-btn {
      transition: all 0.2s;
    }
    .option-btn.selected {
      background: var(--apple-text);
      color: white;
      border-color: var(--apple-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    .border-pink-100,
    .border-violet-100 {
      border-color: var(--apple-border) !important;
    }
    .border-pink-200 {
      border-color: rgba(15, 23, 42, 0.1) !important;
    }
    .border-pink-300 {
      border-color: rgba(0, 113, 227, 0.32) !important;
    }
    .bg-pink-50,
    .bg-pink-50\/40,
    .bg-pink-50\/50,
    .bg-pink-50\/60,
    .bg-pink-50\/70,
    .bg-violet-50,
    .bg-violet-50\/70,
    .bg-violet-100,
    .bg-fuchsia-50,
    .bg-sky-50,
    .bg-amber-50 {
      background-color: var(--apple-hover) !important;
      background-image: none !important;
    }
    .focus\:ring-pink-300:focus,
    .focus\:ring-pink-300:focus-visible {
      --tw-ring-color: rgba(0, 113, 227, 0.2) !important;
      border-color: var(--apple-blue) !important;
    }
    .hover\:bg-pink-50:hover,
    .hover\:bg-pink-50\/60:hover,
    .hover\:bg-pink-50\/70:hover {
      background-color: var(--apple-hover) !important;
    }
    .hover\:border-pink-200:hover {
      border-color: rgba(0, 113, 227, 0.18) !important;
    }
    .bg-gradient-to-r.from-pinkmain.to-violetmain {
      background: var(--apple-text) !important;
      background-image: none !important;
      color: #fff !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    .bg-gradient-to-br.from-pink-50\/70.to-white,
    .bg-gradient-to-br.from-violet-50\/70.to-white {
      background-image: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 1)) !important;
    }
    .brand-title {
      color: var(--apple-text);
      background: none !important;
      -webkit-text-fill-color: initial !important;
      font-weight: 600;
      letter-spacing: -0.015em;
    }
    .apple-primary {
      background: var(--apple-text);
      color: #fff;
      border-radius: 980px;
      border: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: all 0.2s ease;
    }
    .apple-primary:hover {
      background: #333336;
    }
    .apple-secondary {
      background: rgba(255, 255, 255, 0.82);
      color: var(--apple-text);
      border: 0.5px solid var(--apple-border);
      border-radius: 980px;
    }
    .section-eyebrow {
      color: var(--apple-subtext);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    nav .glass {
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.65);
    }
    .roomy-grid {
      gap: 1.5rem;
    }
    .roomy-stack {
      gap: 1.5rem;
    }
    .roomy-card {
      padding: 1.5rem;
    }
    @media (min-width: 768px) {
      .roomy-card {
        padding: 2.25rem;
      }
      .roomy-grid {
        gap: 2rem;
      }
      .roomy-stack {
        gap: 2rem;
      }
    }
    body.app-page-mode,
    body.chat-app-mode {
      overflow: hidden;
      background: #f7f7f5;
    }
    body.app-page-mode #appFrame,
    body.chat-app-mode #appFrame {
      max-width: none;
      height: 100vh;
      padding: 0;
    }
    body.app-page-mode #appHeader,
    body.app-page-mode #bottomNav,
    body.chat-app-mode #appHeader,
    body.chat-app-mode #bottomNav {
      display: none;
    }
    body.app-page-mode #channelView,
    body.app-page-mode #channelShell {
      height: 100vh;
      min-height: 0;
    }
    body.app-page-mode:not(.chat-app-mode) #channelShell {
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    body.app-page-mode:not(.chat-app-mode) #channelHeader {
      position: sticky;
      top: 0;
      z-index: 20;
      margin: 0;
      border-bottom: 0.5px solid var(--apple-border);
      background: rgba(255, 255, 255, 0.9);
      padding: 1rem;
      backdrop-filter: saturate(180%) blur(18px);
      -webkit-backdrop-filter: saturate(180%) blur(18px);
    }
    body.app-page-mode:not(.chat-app-mode) #channelShell > .mb-4,
    body.app-page-mode:not(.chat-app-mode) #channelList {
      margin-left: auto;
      margin-right: auto;
      max-width: 1120px;
      padding-left: 1rem;
      padding-right: 1rem;
    }
    body.app-page-mode:not(.chat-app-mode) #channelShell > .mb-4 {
      margin-top: 1rem;
    }
    body.app-page-mode:not(.chat-app-mode) #channelList {
      padding-bottom: 2rem;
    }
    body.chat-app-mode #channelView,
    body.chat-app-mode #channelShell,
    body.chat-app-mode #channelList {
      height: 100vh;
      min-height: 0;
    }
    .chat-tool-drawer[open] summary {
      border-bottom: 0.5px solid var(--apple-border);
      margin-bottom: 0.75rem;
      padding-bottom: 0.75rem;
    }