@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
      * { box-sizing: border-box; }
      html, body { margin: 0; }
      textarea::placeholder, input::placeholder { color: #9CA3A0; }
      .lc-scroll::-webkit-scrollbar { width: 6px; }
      .lc-scroll::-webkit-scrollbar-thumb { background: #DEE1D8; border-radius: 4px; }
      button, input { font-family: inherit; }

      @keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform: translateY(0);} }
      @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
      @keyframes popIn { 0% { transform: scale(0.9);} 55% { transform: scale(1.06);} 100% { transform: scale(1);} }
      @keyframes slideIn { from { opacity:0; transform: translateX(18px);} to { opacity:1; transform: translateX(0);} }
      @keyframes slideInLeft { from { opacity:0; transform: translateX(-18px);} to { opacity:1; transform: translateX(0);} }
      @keyframes dotPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(200,138,0,0.35); } 50% { box-shadow: 0 0 0 6px rgba(200,138,0,0); } }
      @keyframes dotPulseGreen { 0%,100% { box-shadow: 0 0 0 0 rgba(23,166,115,0.35); } 50% { box-shadow: 0 0 0 6px rgba(23,166,115,0); } }
      @keyframes loopSpin { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -56; } }
      @keyframes toastIn { from { opacity:0; transform: translateY(10px) scale(0.97);} to { opacity:1; transform: translateY(0) scale(1);} }
      @keyframes ripplePulse { 0% { box-shadow: 0 0 0 0 rgba(23,166,115,0.45);} 70% { box-shadow: 0 0 0 14px rgba(23,166,115,0);} 100% { box-shadow: 0 0 0 0 rgba(23,166,115,0);} }
      @keyframes floatY { 0%,100% { transform: translateY(0px) rotate(0deg);} 50% { transform: translateY(-14px) rotate(3deg);} }
      @keyframes blobMove1 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(40px,30px) scale(1.15);} }
      @keyframes blobMove2 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-50px,20px) scale(1.1);} }
      @keyframes blobMove3 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(20px,-40px) scale(1.2);} }
      @keyframes gradientPan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
      @keyframes underlineGrow { from { width: 0; } to { width: 100%; } }
      @keyframes shakeNo { 0%,100% { transform: translateX(0);} 25% { transform: translateX(-6px);} 75% { transform: translateX(6px);} }
      @keyframes mascotBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
      @keyframes mascotWave { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-24deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-14deg); } }
      @keyframes mascotBlink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
      @keyframes chipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
      @keyframes tagGlow { 0%,100% { text-shadow: 0 0 0 rgba(23,166,115,0); } 50% { text-shadow: 0 0 18px rgba(23,166,115,0.35); } }
      .mascot-wrap { animation: mascotBob 3.4s ease-in-out infinite; }
      .mascot-hand { animation: mascotWave 1.8s ease-in-out infinite; }
      .mascot-eyes { animation: mascotBlink 4.2s ease-in-out infinite; transform-origin: center; }
      .feature-chip { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; animation: chipFloat 5s ease-in-out infinite; }
      .feature-chip:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(15,30,23,0.09); }
      .tagline-glow { animation: tagGlow 2.6s ease-in-out infinite; }
      @keyframes spinIcon { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      .spin-icon { animation: spinIcon 0.9s linear infinite; }

      .fade-up { animation: fadeUp 0.6s cubic-bezier(.2,.8,.2,1) both; }
      .fade-in { animation: fadeIn 0.5s ease both; }
      .float-badge { animation: floatY var(--dur,8s) ease-in-out var(--delay,0s) infinite; }
      .chip { transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease; }
      .chip:hover { transform: translateY(-2px); }
      .chip:active { transform: translateY(0) scale(0.97); }
      .chip.selected { animation: popIn 260ms ease; }
      .primary-btn { transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease; }
      .primary-btn:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
      .primary-btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
      .primary-btn.pulse { animation: ripplePulse 500ms ease; }
      .ghost-btn { transition: transform 150ms ease, background 150ms ease, border-color 150ms ease; }
      .ghost-btn:hover:not(:disabled) { transform: translateY(-1px); background: #EFF2EC; }
      .ghost-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
      .queue-item { animation: slideIn 340ms cubic-bezier(.2,.8,.2,1) both; }
      .rail-in { animation: slideInLeft 320ms cubic-bezier(.2,.8,.2,1) both; }
      .rail-dot-queued { animation: dotPulse 2.2s ease-in-out infinite; }
      .rail-dot-posted, .rail-dot-connected { animation: dotPulseGreen 2.2s ease-in-out infinite; }
      .toast { animation: toastIn 240ms cubic-bezier(.2,.8,.2,1) both; }
      .shake { animation: shakeNo 320ms ease; }
      .nav-link { position: relative; }
      .nav-link::after { content: ""; position: absolute; left:0; bottom:-4px; height:2px; width:0%; background:#17A673; transition: width 180ms ease; }
      .nav-link:hover::after { width: 100%; }
      .nav-drop { opacity:0; visibility:hidden; transform: translateY(6px); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; }
      .nav-item:hover .nav-drop { opacity:1; visibility:visible; transform: translateY(0); }
      .platform-card { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
      .platform-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,30,23,0.08); }
      .composer-focus-bar { position: relative; overflow: hidden; }
      .composer-focus-bar::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0%; background:#17A673; transition: width 220ms ease; }
      .composer-focus-bar.focused::after { width: 100%; }
      .limit-bar-track { height: 3px; border-radius: 3px; background: #EEECE4; overflow: hidden; margin-top: 8px; }
      .limit-bar-fill { height: 100%; border-radius: 3px; transition: width 220ms ease, background 220ms ease; }
      .send-icon-fly { transition: transform 180ms ease; }
      button:hover .send-icon-fly { transform: translate(2px,-2px); }
      .auth-input { transition: border-color 180ms ease, box-shadow 180ms ease; }
      .auth-input:focus-within { border-color: #17A673; box-shadow: 0 0 0 3px rgba(23,166,115,0.14); }
      .hero-blob { position:absolute; border-radius:50%; filter: blur(60px); opacity:0.35; pointer-events:none; }

      /* ================= RESPONSIVE: mobile / tablet / laptop / desktop =================
         Mobile   <= 639px        single column, stacked forms, hamburger nav
         Tablet   640 - 1023px    portrait: single column | landscape (900+): composer + queue side by side
         Laptop   1024 - 1439px   3-col dashboard (rail | composer | queue)
         Desktop  >= 1440px       wider container, roomier queue
         Sizes are set inline in app.jsx, so overrides below use !important. */
      html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
      body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
      header { padding-top: env(safe-area-inset-top); }
      img, svg { max-width: 100%; }
      .lc-burger { display: none; }

      /* ---- Desktop (large monitors) ---- */
      @media (min-width: 1440px) {
        .lc-dash { max-width: 1520px !important; padding-left: 32px !important; padding-right: 32px !important; }
        .lc-dashboard-grid { grid-template-columns: 72px minmax(0,1fr) 440px !important; gap: 24px !important; }
        .lc-nav-inner { max-width: 1520px !important; }
      }
      @media (min-width: 1024px) and (min-height: 900px) { .lc-queue { max-height: 760px !important; } }

      /* ---- Laptop (small laptops get a slimmer queue column) ---- */
      @media (min-width: 1024px) and (max-width: 1279px) {
        .lc-dashboard-grid { grid-template-columns: 72px minmax(0,1fr) 330px !important; gap: 16px !important; }
      }

      /* ---- Tablet landscape / small laptop: 2 columns, channel rail becomes a strip on top ---- */
      @media (min-width: 900px) and (max-width: 1023px) {
        .lc-dashboard-grid { grid-template-columns: minmax(0,1fr) 320px !important; }
        .lc-platform-rail { grid-column: 1 / -1; }
      }

      /* ---- Tablet & below: horizontal channel rail, stacked panels ---- */
      @media (max-width: 1023px) {
        .lc-platform-rail {
          flex-direction: row !important;
          position: static !important;
          top: auto !important;
          width: 100%;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          justify-content: flex-start !important;
          padding: 12px 14px !important;
        }
        .lc-platform-rail > span { display: none; }
        .lc-platform-rail button { flex-shrink: 0; }
      }
      @media (max-width: 899px) {
        .lc-dashboard-grid { grid-template-columns: minmax(0,1fr) !important; }
        .lc-connect-grid { grid-template-columns: minmax(0,1fr) !important; }
        .lc-connect-side { position: static !important; }
        .lc-queue { max-height: none !important; }

        /* marketing nav -> hamburger dropdown (hover menus don't exist on touch) */
        .lc-burger { display: inline-flex; }
        .lc-marketing-nav {
          display: none !important;
          position: absolute; top: 100%; left: 0; right: 0;
          flex-direction: column; align-items: stretch !important; gap: 0 !important;
          background: #fff; border-bottom: 1px solid #E1E5DF;
          box-shadow: 0 14px 30px rgba(15,30,23,0.10);
          padding: 8px 20px 14px; max-height: 70vh; overflow-y: auto;
        }
        .lc-marketing-nav.open { display: flex !important; animation: fadeIn 160ms ease both; }
        .lc-marketing-nav .nav-item, .lc-marketing-nav > .nav-link { padding: 12px 0; border-bottom: 1px solid #EEF1EC; }
        .lc-marketing-nav .nav-drop {
          position: static !important; opacity: 1; visibility: visible; transform: none;
          width: auto !important; border: none !important; box-shadow: none !important; padding: 6px 0 0 8px !important;
        }
      }

      /* ---- Tablet portrait fine-tuning ---- */
      @media (min-width: 640px) and (max-width: 899px) {
        .lc-dash, .lc-page { padding-left: 24px !important; padding-right: 24px !important; }
        .lc-stats { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
        .lc-floater { display: none !important; }
      }

      /* ---- Mobile ---- */
      @media (max-width: 639px) {
        body { font-size: 15px; }
        .lc-floater { display: none !important; }
        .lc-nav-inner { padding: 10px 14px !important; }
        .lc-nav-actions { gap: 6px !important; }
        .lc-nav-actions > button:not(.lc-burger) { padding: 8px 11px !important; font-size: 13px !important; }

        .lc-landing { padding: 40px 16px 64px !important; }
        .lc-h1 { font-size: clamp(30px, 9vw, 44px) !important; }
        .lc-hero-form { flex-direction: column; padding: 8px !important; }
        .lc-hero-form input { text-align: center; }
        .lc-hero-form button { justify-content: center; padding: 12px 18px !important; }
        .lc-platform-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
        .lc-platform-grid .platform-card { padding: 18px 10px !important; }

        .lc-auth-card { padding: 24px 18px !important; }
        .lc-page { padding: 28px 16px 64px !important; }
        .lc-dash { padding: 18px 14px 48px !important; }
        .lc-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
        .lc-stats > div { padding: 12px !important; }
        .lc-card { padding: 16px !important; }
        .lc-queue { padding: 16px 16px 4px !important; }

        .lc-actions > label { flex: 1 1 100% !important; }
        .lc-actions > button { flex: 1 1 calc(50% - 5px) !important; justify-content: center; }

        .lc-toast { left: 14px !important; right: 14px !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; }

        /* 16px inputs stop iOS Safari from zooming the page on focus */
        input, textarea, select { font-size: 16px !important; }
      }

      /* ---- Touch devices: comfortable tap targets ---- */
      @media (pointer: coarse) {
        .chip, .primary-btn, .ghost-btn { min-height: 40px; }
        .chip:hover, .platform-card:hover, .feature-chip:hover, .primary-btn:hover:not(:disabled), .ghost-btn:hover:not(:disabled) { transform: none; }
      }

      /* ---- Short landscape phones: don't let the hero fill the whole screen ---- */
      @media (max-height: 480px) and (orientation: landscape) {
        .lc-landing { padding-top: 24px !important; }
        .lc-dash { padding-top: 12px !important; }
      }

      @media (prefers-reduced-motion: reduce) {
        .fade-up, .fade-in, .float-badge, .chip, .chip.selected, .primary-btn, .primary-btn.pulse,
        .ghost-btn, .queue-item, .rail-in, .rail-dot-queued, .rail-dot-posted, .rail-dot-connected,
        .toast, .shake, .hero-blob { animation: none !important; transition: none !important; }
      }