// SorinHome.jsx - desktop first screen with a Paper trading campaign entry

function HomeMark({ width = 108, opacity = 0.42 }) {
  return <img src="assets/logo-mark.svg" alt="" style={{ width, opacity, display: 'block', filter: 'invert(1)' }} />;
}

function HomeTopBar() {
  return (
    <header style={homeStyles.topBar}>
      <div style={homeStyles.topBrand}>
        <HomeMark width={46} opacity={0.32} />
        <span style={homeStyles.topDot} />
        <span style={homeStyles.topName}>Sorin</span>
      </div>
      <div style={homeStyles.windowControls} aria-label="Window controls">
        <span style={homeStyles.windowControl}>x</span>
        <span style={homeStyles.windowControl}>-</span>
        <span style={homeStyles.windowBox} />
      </div>
    </header>
  );
}

function HomeNavItem({ icon, label, active = false, chevron = false }) {
  return (
    <button type="button" style={{ ...homeStyles.navItem, ...(active ? homeStyles.navItemActive : {}) }}>
      {active && <span style={homeStyles.activeRail} />}
      <i className={icon} style={{ ...homeStyles.navIcon, ...(active ? homeStyles.navIconActive : {}) }} />
      <span>{label}</span>
      {chevron && <i className="ri-arrow-down-s-line" style={homeStyles.navChevron} />}
    </button>
  );
}

function HomeBotChild({ children, active = false }) {
  return (
    <button type="button" style={{ ...homeStyles.botChild, ...(active ? homeStyles.botChildActive : {}) }}>
      <i className="ri-robot-2-line" />
      <span>{children}</span>
    </button>
  );
}

function HomeSidebar() {
  return (
    <aside style={homeStyles.sidebar}>
      <div style={homeStyles.sidebarInner}>
        <div style={homeStyles.sidebarHeader}>
          <HomeMark />
          <span style={homeStyles.sidebarBrand}>Sorin</span>
          <span style={homeStyles.betaPill}>Beta</span>
        </div>

        <nav style={homeStyles.navList} aria-label="Sorin desktop navigation">
          <HomeNavItem icon="ri-add-line" label="New Task" active />
          <HomeNavItem icon="ri-bar-chart-box-line" label="Portfolio" />
          <HomeNavItem icon="ri-robot-2-line" label="Trading Bots" chevron />
          <div style={homeStyles.botChildren}>
            {['ghjgj', 'Active event-driven bot', 'Balanced DCA bot', 'Conservative hold bot', 'Paper Event Bot'].map(
              (item, index) => (
                <HomeBotChild key={item} active={index === 0}>
                  {item}
                </HomeBotChild>
              ),
            )}
          </div>
          <HomeNavItem icon="ri-time-line" label="Automation" chevron />
          <HomeNavItem icon="ri-broadcast-line" label="Data Feeds" />
          <HomeNavItem icon="ri-equalizer-line" label="Customize" chevron />
        </nav>

        <section style={homeStyles.recentsPanel}>
          <h2 style={homeStyles.recentsTitle}>Recents</h2>
          <p style={homeStyles.recentsSub}>3 conversations</p>
          <div style={homeStyles.recentList}>
            {['ETH Swing Setup', 'BTC DCA Automation', 'Narrative Rotation Radar'].map((item) => (
              <button key={item} type="button" style={homeStyles.recentItem}>
                <span style={homeStyles.recentDot} />
                {item}
              </button>
            ))}
          </div>
        </section>

        <div style={homeStyles.walletBox}>
          <span style={homeStyles.walletAvatar} />
          <span style={homeStyles.walletText}>0x43d4...4ae5</span>
          <i className="ri-arrow-down-s-fill" style={homeStyles.walletChevron} />
        </div>
      </div>
    </aside>
  );
}

function PromptToolbarPill({ icon, children, accent = 'default', wide = false }) {
  return (
    <button
      type="button"
      style={{ ...homeStyles.toolbarPill, ...(wide ? homeStyles.toolbarPillWide : {}), ...(accent === 'meter' ? homeStyles.meterPill : {}) }}
    >
      {icon && <i className={icon} style={homeStyles.toolbarIcon} />}
      <span>{children}</span>
      <i className="ri-arrow-down-s-line" style={homeStyles.smallChevron} />
    </button>
  );
}

function QuickAction({ icon, label, tone, compact = false }) {
  return (
    <button type="button" style={{ ...homeStyles.quickAction, ...(compact ? homeStyles.quickActionCompact : {}) }}>
      <span style={{ ...homeStyles.quickIcon, ...(tone ? homeStyles[tone] : {}), ...(compact ? homeStyles.quickIconCompact : {}) }}>
        <i className={icon} />
      </span>
      <span>{label}</span>
    </button>
  );
}

function HomeRobot() {
  return (
    <div style={homeStyles.robot} aria-hidden="true">
      <div style={homeStyles.robotHead}>
        <span style={homeStyles.robotEyeLeft} />
        <span style={homeStyles.robotEyeRight} />
      </div>
      <div style={homeStyles.robotNeck} />
      <div style={homeStyles.robotBody} />
      <div style={homeStyles.robotLegLeft} />
      <div style={homeStyles.robotLegRight} />
    </div>
  );
}

function useHomeViewport() {
  const [width, setWidth] = React.useState(() => (typeof window === 'undefined' ? 1440 : window.innerWidth));

  React.useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return {
    width,
    isCompact: width < 1180,
    isNarrow: width < 1500,
  };
}

function CampaignStat({ label, value, suffix }) {
  return (
    <span style={homeStyles.campaignStat}>
      <small style={homeStyles.campaignStatLabel}>{label}</small>
      <strong style={homeStyles.campaignStatValue}>{value}</strong>
      {suffix && <em style={homeStyles.campaignStatSuffix}>{suffix}</em>}
    </span>
  );
}

function CampaignVisual() {
  return (
    <span style={homeStyles.campaignVisual} aria-hidden="true">
      <span style={homeStyles.campaignMedal}>
        <i className="ri-trophy-line" />
      </span>
      <span style={homeStyles.campaignLadder}>
        <span style={{ ...homeStyles.campaignBar, height: 34 }} />
        <span style={{ ...homeStyles.campaignBar, height: 52 }} />
        <span style={{ ...homeStyles.campaignBar, height: 76 }} />
        <span style={homeStyles.campaignRankChip}>#18</span>
      </span>
      <span style={homeStyles.campaignSpark}>
        <i className="ri-sparkling-2-line" />
      </span>
    </span>
  );
}

function CampaignEntry({ isCompact, onOpenCampaign }) {
  return (
    <button
      type="button"
      style={{ ...homeStyles.campaignEntry, ...(isCompact ? homeStyles.campaignEntryCompact : {}) }}
      onClick={onOpenCampaign}
    >
      <span style={homeStyles.campaignShine} aria-hidden="true" />
      <span style={{ ...homeStyles.campaignCopy, ...(isCompact ? homeStyles.campaignCopyCompact : {}) }}>
        <span style={homeStyles.campaignKicker}>
          <i className="ri-flashlight-line" />
          Season 01 · Live now
        </span>
        <strong style={{ ...homeStyles.campaignTitle, ...(isCompact ? homeStyles.campaignTitleCompact : {}) }}>
          Paper trading campaign
        </strong>
        <small style={homeStyles.campaignSubtitle}>
          Trade <b>10,000 USDT</b> paper money, complete mock orders, and climb the leaderboard.
        </small>
        <span style={homeStyles.campaignTagRow}>
          <span style={homeStyles.campaignTag}>4 quick steps</span>
          <span style={homeStyles.campaignTag}>No real funds</span>
          <span style={homeStyles.campaignTag}>Leaderboard live</span>
        </span>
      </span>
      {!isCompact && <CampaignVisual />}
      <span style={{ ...homeStyles.campaignStats, ...(isCompact ? homeStyles.campaignStatsCompact : {}) }}>
        <CampaignStat label="Prize pool" value="50,000" suffix="USDT" />
        <CampaignStat label="Time left" value="02d 14h left" />
        <CampaignStat label="Your rank" value="Rank #18" suffix="+3" />
      </span>
      <span style={homeStyles.campaignArrow}>
        <span style={homeStyles.campaignArrowText}>Open campaign</span>
        <i className="ri-arrow-right-up-line" />
      </span>
    </button>
  );
}

function SorinHome({ onOpenCampaign }) {
  const { isCompact, isNarrow } = useHomeViewport();
  const actions = [
    ['ri-line-chart-line', 'Market Pulse', 'blueTone'],
    ['ri-bar-chart-grouped-line', 'Trade Execution', 'amberTone'],
    ['ri-robot-2-line', 'Automation', 'greenTone'],
    ['ri-shield-line', 'Portfolio', 'greenTone'],
    ['ri-sparkling-line', 'Skills', 'amberTone'],
    ['ri-broadcast-line', 'Data Feeds', 'tealTone'],
  ];

  return (
    <div style={{ ...homeStyles.root, ...(isCompact ? homeStyles.rootCompact : {}) }}>
      <HomeTopBar />
      <div style={{ ...homeStyles.workspace, ...(isCompact ? homeStyles.workspaceCompact : {}) }}>
        {!isCompact && <HomeSidebar />}
        <main style={{ ...homeStyles.main, ...(isCompact ? homeStyles.mainCompact : {}) }}>
          <div
            style={{
              ...homeStyles.centerStage,
              ...(isNarrow ? homeStyles.centerStageNarrow : {}),
              ...(isCompact ? homeStyles.centerStageCompact : {}),
            }}
          >
            <div style={homeStyles.greetingWrap}>
              <h1 style={{ ...homeStyles.greeting, ...(isCompact ? homeStyles.greetingCompact : {}) }}>
                Hey, <span style={homeStyles.greetingAccent}>I'm Sorin.</span> How can I help you today?
              </h1>
              {!isNarrow && <HomeRobot />}
            </div>

            <section style={{ ...homeStyles.composer, ...(isCompact ? homeStyles.composerCompact : {}) }} aria-label="New task composer">
              <p style={homeStyles.placeholder}>Type / for commands</p>
              <div style={{ ...homeStyles.toolbar, ...(isNarrow ? homeStyles.toolbarNarrow : {}), ...(isCompact ? homeStyles.toolbarCompact : {}) }}>
                <div style={{ ...homeStyles.toolbarLeft, ...(isNarrow ? homeStyles.toolbarLeftNarrow : {}), ...(isCompact ? homeStyles.toolbarLeftCompact : {}) }}>
                  <button type="button" style={{ ...homeStyles.toolbarPill, ...homeStyles.workspacePill }}>
                    <i className="ri-folder-3-line" style={homeStyles.toolbarIcon} />
                    <span>Workspace</span>
                  </button>
                  <button type="button" style={homeStyles.commandPill}>
                    Type <span style={homeStyles.slashKey}>/</span> for commands
                  </button>
                  <PromptToolbarPill wide>Balanced</PromptToolbarPill>
                  <PromptToolbarPill icon="ri-flashlight-line" wide>
                    gpt-5.4
                  </PromptToolbarPill>
                </div>
                <div style={{ ...homeStyles.toolbarRight, ...(isNarrow ? homeStyles.toolbarRightNarrow : {}), ...(isCompact ? homeStyles.toolbarRightCompact : {}) }}>
                  <PromptToolbarPill accent="meter">
                    <strong style={homeStyles.meterText}>1%</strong> 5.9k/1.1M
                  </PromptToolbarPill>
                  <button type="button" aria-label="Send" style={homeStyles.sendButton}>
                    <i className="ri-arrow-right-up-line" />
                  </button>
                </div>
              </div>
            </section>

            {isCompact && <CampaignEntry isCompact={isCompact} onOpenCampaign={onOpenCampaign} />}

            <section
              style={{
                ...homeStyles.quickShell,
                ...(isNarrow ? homeStyles.quickShellNarrow : {}),
                ...(isCompact ? homeStyles.quickShellCompact : {}),
              }}
              aria-label="Quick entries"
            >
              <div style={{ ...homeStyles.quickRow, ...(isNarrow ? homeStyles.quickRowNarrow : {}), ...(isCompact ? homeStyles.quickRowCompact : {}) }}>
                {actions.map(([icon, label, tone]) => (
                  <QuickAction key={label} icon={icon} label={label} tone={tone} compact={isCompact || isNarrow} />
                ))}
              </div>
            </section>

            {!isCompact && <CampaignEntry isCompact={isCompact} onOpenCampaign={onOpenCampaign} />}
          </div>
        </main>
      </div>
    </div>
  );
}

const homeStyles = {
  root: {
    width: '100vw',
    height: '100vh',
    background: '#000',
    color: 'var(--c-fg)',
    fontFamily: 'var(--font-sans)',
    overflow: 'hidden',
  },
  rootCompact: { overflowY: 'auto', overflowX: 'hidden' },
  topBar: {
    height: 58,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '0 23px',
    borderBottom: '1px solid rgba(30,30,31,0.68)',
    background: '#030303',
  },
  topBrand: { display: 'flex', alignItems: 'center', gap: 10 },
  topDot: { width: 9, height: 9, borderRadius: '50%', background: 'var(--sorin-green-bright)' },
  topName: { color: 'var(--c-fg-muted-2)', fontSize: 18, lineHeight: '24px', fontWeight: 700 },
  windowControls: {
    height: 34,
    minWidth: 128,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
    border: '1px solid rgba(30,30,31,0.72)',
    borderRadius: 10,
    color: '#5E5F6A',
    fontSize: 20,
  },
  windowControl: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 24 },
  windowBox: { width: 13, height: 13, border: '2px solid currentColor', borderRadius: 2 },
  workspace: { height: 'calc(100vh - 58px)', display: 'flex', minHeight: 0 },
  workspaceCompact: { height: 'auto', minHeight: 'calc(100vh - 58px)', display: 'block' },
  sidebar: { width: 422, flex: '0 0 422px', padding: '10px 0 0' },
  sidebarInner: {
    boxSizing: 'border-box',
    height: 'calc(100% - 10px)',
    display: 'flex',
    flexDirection: 'column',
    padding: '16px 15px 18px',
    border: '1px solid var(--c-line-faint)',
    borderLeft: 0,
    borderRadius: '0 24px 24px 0',
    background: 'linear-gradient(180deg, rgba(17,17,18,0.98), rgba(8,8,8,0.98))',
  },
  sidebarHeader: {
    height: 72,
    display: 'flex',
    alignItems: 'center',
    gap: 16,
    padding: '0 10px 18px',
    borderBottom: '1px solid rgba(32,202,139,0.2)',
  },
  sidebarBrand: { color: 'var(--sorin-green)', fontSize: 30, lineHeight: '32px', fontWeight: 500 },
  betaPill: {
    display: 'inline-flex',
    alignItems: 'center',
    height: 25,
    padding: '0 9px',
    border: '1px solid rgba(32,202,139,0.45)',
    borderRadius: 8,
    color: 'var(--sorin-green)',
    background: 'rgba(32,202,139,0.12)',
    fontSize: 14,
    fontWeight: 700,
  },
  navList: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 18 },
  navItem: {
    position: 'relative',
    width: '100%',
    height: 54,
    display: 'flex',
    alignItems: 'center',
    gap: 17,
    padding: '0 17px',
    border: 0,
    borderRadius: 16,
    background: 'transparent',
    color: 'var(--c-fg-muted-2)',
    fontFamily: 'var(--font-sans)',
    fontSize: 24,
    lineHeight: '28px',
    fontWeight: 500,
    textAlign: 'left',
    cursor: 'default',
  },
  navItemActive: { color: 'var(--c-fg-muted-2)', background: 'rgba(32,202,139,0.10)' },
  activeRail: {
    position: 'absolute',
    left: 0,
    top: 10,
    width: 5,
    height: 34,
    borderRadius: 99,
    background: 'var(--sorin-green-bright)',
  },
  navIcon: { width: 20, fontSize: 22, color: '#7A7B87' },
  navIconActive: { color: 'var(--sorin-green-bright)' },
  navChevron: { marginLeft: 'auto', fontSize: 19, color: '#747580' },
  botChildren: {
    margin: '0 0 6px 35px',
    paddingLeft: 16,
    borderLeft: '1px solid rgba(40,252,174,0.20)',
    display: 'flex',
    flexDirection: 'column',
    gap: 3,
  },
  botChild: {
    height: 41,
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    padding: '0 14px',
    border: 0,
    borderRadius: 10,
    background: 'transparent',
    color: '#686972',
    fontFamily: 'var(--font-sans)',
    fontSize: 22,
    lineHeight: '26px',
    fontWeight: 500,
    textAlign: 'left',
    cursor: 'default',
  },
  botChildActive: { background: 'rgba(32,202,139,0.10)', color: '#6A6B74' },
  recentsPanel: {
    boxSizing: 'border-box',
    height: 388,
    marginTop: 16,
    padding: '19px 20px',
    border: '1px solid var(--c-line)',
    borderRadius: 20,
    background: 'linear-gradient(180deg, rgba(17,17,18,0.98), rgba(17,17,18,0.78))',
  },
  recentsTitle: { margin: 0, color: 'var(--c-fg)', fontSize: 20, lineHeight: '24px', fontWeight: 700 },
  recentsSub: { margin: '4px 0 0', color: '#747580', fontSize: 18, lineHeight: '24px' },
  recentList: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 19 },
  recentItem: {
    height: 47,
    display: 'flex',
    alignItems: 'center',
    gap: 12,
    padding: '0 15px',
    border: '1px solid rgba(30,30,31,0.85)',
    borderRadius: 14,
    background: '#121212',
    color: 'var(--c-fg)',
    fontFamily: 'var(--font-sans)',
    fontSize: 17,
    lineHeight: '22px',
    fontWeight: 700,
    textAlign: 'left',
    cursor: 'default',
  },
  recentDot: { width: 8, height: 8, borderRadius: '50%', background: '#3C3C40', flex: '0 0 auto' },
  walletBox: {
    height: 60,
    display: 'flex',
    alignItems: 'center',
    gap: 13,
    marginTop: 'auto',
    padding: '0 14px',
    border: '1px solid var(--c-line)',
    borderRadius: 16,
    background: '#111112',
  },
  walletAvatar: { width: 40, height: 40, borderRadius: '50%', background: 'var(--sorin-green-bright)' },
  walletText: { color: '#9899A6', fontSize: 17, fontWeight: 700 },
  walletChevron: { marginLeft: 'auto', color: '#747580' },
  main: {
    minWidth: 0,
    flex: 1,
    position: 'relative',
    overflowY: 'auto',
    overflowX: 'hidden',
    background:
      'radial-gradient(780px 520px at 56% 34%, rgba(32,202,139,0.10), transparent 68%), linear-gradient(rgba(40,252,174,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(40,252,174,0.025) 1px, transparent 1px), #000',
    backgroundSize: 'auto, 52px 52px, 52px 52px, auto',
  },
  mainCompact: { minHeight: 'calc(100vh - 58px)', overflow: 'visible' },
  centerStage: {
    width: 'min(1380px, calc(100vw - 540px))',
    minWidth: 900,
    margin: '318px auto 0',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'stretch',
  },
  centerStageNarrow: { width: 'min(1120px, calc(100vw - 500px))', minWidth: 760, marginTop: 220 },
  centerStageCompact: {
    width: 'calc(100vw - 28px)',
    minWidth: 0,
    marginTop: 22,
    marginRight: 'auto',
    marginBottom: 36,
    marginLeft: 'auto',
  },
  greetingWrap: { position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 86 },
  greeting: {
    margin: 0,
    color: 'var(--c-fg-strong)',
    fontSize: 44,
    lineHeight: '54px',
    fontWeight: 400,
    letterSpacing: 0,
    textAlign: 'center',
  },
  greetingCompact: { fontSize: 31, lineHeight: '38px', maxWidth: 356, margin: '0 auto' },
  greetingAccent: { color: 'var(--sorin-green-bright)' },
  robot: { position: 'absolute', right: 72, top: -41, width: 108, height: 120, transform: 'rotate(-2deg)' },
  robotHead: {
    position: 'absolute',
    left: 13,
    top: 14,
    width: 78,
    height: 46,
    borderRadius: '25px 23px 18px 20px',
    background: 'linear-gradient(180deg, #F7F3E9, #E5DED0)',
    boxShadow: '0 0 0 2px rgba(0,0,0,0.24) inset',
  },
  robotEyeLeft: {
    position: 'absolute',
    left: 25,
    top: 18,
    width: 9,
    height: 16,
    borderRadius: 8,
    background: 'var(--sorin-green-bright)',
    boxShadow: '0 0 14px rgba(40,252,174,0.72)',
  },
  robotEyeRight: {
    position: 'absolute',
    right: 20,
    top: 16,
    width: 9,
    height: 16,
    borderRadius: 8,
    background: 'var(--sorin-green-bright)',
    boxShadow: '0 0 14px rgba(40,252,174,0.72)',
  },
  robotNeck: { position: 'absolute', left: 48, top: 55, width: 14, height: 17, background: '#E5DED0', borderRadius: 8 },
  robotBody: {
    position: 'absolute',
    left: 32,
    top: 67,
    width: 48,
    height: 39,
    borderRadius: '19px 19px 14px 14px',
    background: '#EFE9DA',
  },
  robotLegLeft: { position: 'absolute', left: 31, top: 100, width: 12, height: 27, borderRadius: 8, background: '#EFE9DA' },
  robotLegRight: { position: 'absolute', left: 72, top: 100, width: 12, height: 27, borderRadius: 8, background: '#EFE9DA' },
  composer: {
    boxSizing: 'border-box',
    minHeight: 257,
    marginTop: 22,
    padding: '35px 34px 30px',
    border: '1px solid rgba(116,117,128,0.64)',
    borderRadius: 40,
    background: 'rgba(3,3,3,0.72)',
    boxShadow: '0 22px 120px rgba(0,0,0,0.62)',
  },
  composerCompact: { minHeight: 196, marginTop: 18, padding: '24px 18px 20px', borderRadius: 24 },
  placeholder: { margin: 0, color: '#747B99', fontSize: 22, lineHeight: '29px', fontWeight: 500 },
  toolbar: { marginTop: 94, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 },
  toolbarNarrow: { marginTop: 66, flexDirection: 'column', alignItems: 'stretch', gap: 12 },
  toolbarCompact: { marginTop: 48, flexDirection: 'column', alignItems: 'stretch', gap: 16 },
  toolbarLeft: { display: 'flex', alignItems: 'center', gap: 24, minWidth: 0, flexWrap: 'wrap' },
  toolbarLeftNarrow: { gap: 12 },
  toolbarLeftCompact: { gap: 12 },
  toolbarRight: { display: 'flex', alignItems: 'center', gap: 285 },
  toolbarRightNarrow: { gap: 12, justifyContent: 'space-between' },
  toolbarRightCompact: { gap: 12, justifyContent: 'space-between' },
  toolbarPill: {
    height: 36,
    display: 'inline-flex',
    alignItems: 'center',
    gap: 9,
    padding: '0 8px',
    border: 0,
    background: 'transparent',
    color: '#B9C4E5',
    fontFamily: 'var(--font-sans)',
    fontSize: 18,
    fontWeight: 700,
    whiteSpace: 'nowrap',
    cursor: 'default',
  },
  toolbarPillWide: { padding: '0 12px' },
  workspacePill: { color: '#C3C8E6' },
  toolbarIcon: { color: '#A8ADBF', fontSize: 21 },
  smallChevron: { color: '#747580', fontSize: 18, marginLeft: 4 },
  commandPill: {
    height: 36,
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    border: 0,
    background: 'transparent',
    color: '#AABDE4',
    fontFamily: 'var(--font-sans)',
    fontSize: 17,
    fontWeight: 500,
    cursor: 'default',
  },
  slashKey: {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: 24,
    height: 28,
    borderRadius: 7,
    background: '#1E1E1F',
    color: '#AABDE4',
    fontWeight: 700,
  },
  meterPill: {
    height: 46,
    padding: '0 17px',
    border: '1px solid rgba(45,45,47,0.9)',
    borderRadius: 14,
    background: '#141415',
  },
  meterText: {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: 28,
    minWidth: 38,
    border: '1px solid rgba(32,202,139,0.55)',
    borderRadius: 999,
    color: 'var(--sorin-green-bright)',
    background: 'rgba(32,202,139,0.14)',
    fontSize: 16,
  },
  sendButton: {
    width: 58,
    height: 58,
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    border: 0,
    borderRadius: 16,
    background: 'linear-gradient(180deg, #20CA8B, #18A977)',
    color: '#00140E',
    fontSize: 31,
    cursor: 'default',
  },
  quickShell: {
    boxSizing: 'border-box',
    minHeight: 124,
    marginTop: 23,
    padding: '28px 38px',
    borderRadius: 24,
    background: 'linear-gradient(180deg, rgba(17,17,18,0.86), rgba(17,17,18,0.62))',
    boxShadow: '0 20px 80px rgba(0,0,0,0.44)',
  },
  quickShellNarrow: { padding: '22px 28px' },
  quickShellCompact: { minHeight: 0, marginTop: 16, padding: 14, borderRadius: 18 },
  quickRow: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, flexWrap: 'nowrap' },
  quickRowNarrow: { justifyContent: 'flex-start', flexWrap: 'wrap' },
  quickRowCompact: { justifyContent: 'flex-start', flexWrap: 'wrap' },
  quickAction: {
    height: 67,
    display: 'inline-flex',
    alignItems: 'center',
    gap: 12,
    padding: '0 16px',
    border: '1px solid rgba(45,45,47,0.95)',
    borderRadius: 999,
    background: '#111112',
    color: '#C3C8E6',
    fontFamily: 'var(--font-sans)',
    fontSize: 20,
    lineHeight: '26px',
    fontWeight: 500,
    whiteSpace: 'nowrap',
    cursor: 'default',
  },
  quickActionCompact: {
    width: 'calc(50% - 5px)',
    height: 52,
    gap: 8,
    padding: '0 10px',
    fontSize: 15,
    lineHeight: '20px',
    boxSizing: 'border-box',
  },
  quickIcon: {
    width: 40,
    height: 40,
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '50%',
    background: 'rgba(32,202,139,0.10)',
    border: '1px solid rgba(32,202,139,0.22)',
    color: '#9FCFBF',
    fontSize: 22,
  },
  quickIconCompact: { width: 32, height: 32, fontSize: 17 },
  blueTone: { background: 'rgba(83,157,255,0.12)', borderColor: 'rgba(83,157,255,0.28)', color: '#8EBBFF' },
  amberTone: { background: 'rgba(255,189,76,0.12)', borderColor: 'rgba(255,189,76,0.28)', color: '#DDB36A' },
  greenTone: { background: 'rgba(32,202,139,0.12)', borderColor: 'rgba(32,202,139,0.28)', color: '#A9DCCA' },
  tealTone: { background: 'rgba(40,252,174,0.10)', borderColor: 'rgba(40,252,174,0.26)', color: '#91DAC4' },
  campaignEntry: {
    boxSizing: 'border-box',
    position: 'relative',
    width: 'min(1120px, 100%)',
    minHeight: 190,
    margin: '24px auto 0',
    display: 'grid',
    gridTemplateColumns: 'minmax(0, 1.2fr) 190px minmax(260px, 0.7fr) auto',
    alignItems: 'center',
    gap: 22,
    padding: '22px 22px 22px 26px',
    border: '1px solid rgba(40,252,174,0.42)',
    borderRadius: 20,
    background:
      'linear-gradient(135deg, rgba(40,252,174,0.18), rgba(17,17,18,0.94) 38%, rgba(255,189,76,0.09) 70%, rgba(83,157,255,0.08)), linear-gradient(90deg, rgba(40,252,174,0.08) 1px, transparent 1px), #0B0C0C',
    backgroundSize: 'auto, 34px 34px, auto',
    color: 'var(--c-fg)',
    fontFamily: 'var(--font-sans)',
    textAlign: 'left',
    boxShadow: '0 18px 76px rgba(0,0,0,0.42), 0 0 48px rgba(32,202,139,0.14)',
    cursor: 'pointer',
    overflow: 'hidden',
  },
  campaignEntryCompact: {
    width: '100%',
    minHeight: 0,
    gridTemplateColumns: 'minmax(0, 1fr)',
    gap: 18,
    marginTop: 16,
    padding: 18,
    borderRadius: 18,
  },
  campaignShine: {
    position: 'absolute',
    inset: '0 auto 0 0',
    width: 5,
    background: 'linear-gradient(180deg, var(--sorin-green-bright), rgba(255,189,76,0.86))',
    boxShadow: '0 0 34px rgba(40,252,174,0.52)',
  },
  campaignCopy: { display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 },
  campaignCopyCompact: { gap: 8 },
  campaignKicker: {
    width: 'fit-content',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 7,
    padding: '6px 10px',
    border: '1px solid rgba(40,252,174,0.34)',
    borderRadius: 999,
    background: 'rgba(40,252,174,0.10)',
    color: 'var(--sorin-green-bright)',
    fontSize: 12,
    lineHeight: '16px',
    fontWeight: 800,
    textTransform: 'uppercase',
  },
  campaignTitle: { color: 'var(--c-fg-strong)', fontSize: 29, lineHeight: '35px', fontWeight: 800 },
  campaignTitleCompact: { fontSize: 24, lineHeight: '30px' },
  campaignSubtitle: { color: '#B9C4E5', fontSize: 15, lineHeight: '22px', maxWidth: 440 },
  campaignTagRow: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginTop: 6 },
  campaignTag: {
    display: 'inline-flex',
    alignItems: 'center',
    height: 26,
    padding: '0 9px',
    border: '1px solid rgba(45,45,47,0.92)',
    borderRadius: 999,
    background: 'rgba(3,3,3,0.45)',
    color: '#9899A6',
    fontSize: 12,
    lineHeight: '16px',
    fontWeight: 700,
  },
  campaignVisual: {
    position: 'relative',
    height: 132,
    display: 'flex',
    alignItems: 'flex-end',
    justifyContent: 'center',
    border: '1px solid rgba(45,45,47,0.74)',
    borderRadius: 18,
    background: 'linear-gradient(180deg, rgba(17,17,18,0.66), rgba(3,3,3,0.58))',
  },
  campaignMedal: {
    position: 'absolute',
    left: 17,
    top: 17,
    width: 48,
    height: 48,
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    border: '1px solid rgba(255,189,76,0.46)',
    borderRadius: 14,
    background: 'rgba(255,189,76,0.12)',
    color: 'var(--sorin-yellow)',
    fontSize: 26,
  },
  campaignLadder: {
    height: 92,
    display: 'flex',
    alignItems: 'flex-end',
    gap: 9,
  },
  campaignBar: {
    width: 22,
    borderRadius: '8px 8px 3px 3px',
    background: 'linear-gradient(180deg, var(--sorin-green-bright), rgba(32,202,139,0.28))',
  },
  campaignRankChip: {
    position: 'absolute',
    right: 14,
    top: 20,
    display: 'inline-flex',
    alignItems: 'center',
    height: 30,
    padding: '0 10px',
    border: '1px solid rgba(40,252,174,0.38)',
    borderRadius: 999,
    background: 'rgba(32,202,139,0.12)',
    color: '#C5CBE9',
    fontSize: 13,
    fontWeight: 800,
  },
  campaignSpark: {
    position: 'absolute',
    right: 20,
    bottom: 18,
    color: '#8EBBFF',
    fontSize: 20,
  },
  campaignStats: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 9,
    minWidth: 0,
  },
  campaignStatsCompact: { gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' },
  campaignStat: {
    minHeight: 48,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    padding: '9px 11px',
    border: '1px solid rgba(45,45,47,0.84)',
    borderRadius: 12,
    background: 'rgba(3,3,3,0.48)',
  },
  campaignStatLabel: { color: '#747B99', fontSize: 11, lineHeight: '14px', textTransform: 'uppercase', fontWeight: 800 },
  campaignStatValue: {
    marginTop: 2,
    color: '#FFFFFF',
    fontSize: 17,
    lineHeight: '22px',
    fontWeight: 900,
    whiteSpace: 'normal',
  },
  campaignStatSuffix: {
    color: 'var(--sorin-green-bright)',
    fontSize: 11,
    lineHeight: '14px',
    fontStyle: 'normal',
    fontWeight: 800,
  },
  campaignArrow: {
    minWidth: 58,
    height: 58,
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
    padding: '0 15px',
    borderRadius: 14,
    background: 'var(--sorin-green-bright)',
    color: '#00140E',
    fontSize: 24,
    fontWeight: 900,
    justifySelf: 'end',
  },
  campaignArrowText: {
    display: 'inline-block',
    maxWidth: 86,
    fontSize: 13,
    lineHeight: '15px',
    fontWeight: 900,
  },
};

Object.assign(window, { SorinHome });