/* Visual polish layer for the app. Keeps the brand palette (--accent / --accent-2) and refines type,
   spacing, depth and motion so every screen feels like one considered product. */
:root { --cg-ease: cubic-bezier(.16, 1, .3, 1); --cg-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif; }

/* ---------- Icons ---------- */
.cg-ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.16em; flex-shrink: 0; }
.cg-ic-host > .cg-ic { width: 18px; height: 18px; vertical-align: middle; }
.row .ri, .empty-card .ei, .li .ri { color: var(--accent-text); background: var(--accent-soft); }
.cg-mark-sm { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.cg-mark-sm svg { width: 13px; height: 13px; }

/* ---------- Page scaffolding ---------- */
.page { margin: 0 auto; padding: 32px max(32px, env(safe-area-inset-left, 0px)) 64px max(32px, env(safe-area-inset-right, 0px)); }
.pad { max-width: 1120px; margin: 0 auto; padding: 32px max(32px, env(safe-area-inset-left, 0px)) 64px max(32px, env(safe-area-inset-right, 0px)); }
@media (max-width: 760px) { .page, .pad { padding: 20px 16px 40px; } }
.page-h { font-family: var(--cg-display); font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.page-sub { font-size: 15px; line-height: 1.55; max-width: 640px; margin: 6px 0 24px; }
.pg-h .page-h, .content > .page-h { margin-top: 4px; }

.cg-hero { margin: 8px 0 28px; }
.cg-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--accent-text); margin-bottom: 10px; }
.cg-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent); }
.cg-title { font-family: var(--cg-display); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; font-weight: 700; letter-spacing: -.035em; margin: 0 0 10px; }
.cg-lede { font-size: 16px; line-height: 1.55; color: var(--text2); max-width: 620px; margin: 0; }

/* ---------- Surfaces ---------- */
.card { border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.12); }
.tile { border-radius: 18px; padding: 18px 18px 16px; background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 92%, var(--accent) 8%)); box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: transform .35s var(--cg-ease), box-shadow .35s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--accent) 60%, transparent); }
.tile-v { font-family: var(--cg-display); font-size: 30px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile-k { font-size: 12.5px; color: var(--text2); margin-top: 4px; }
.row { transition: background .2s; }
.row:hover { background: var(--hover); }
.row:last-child { border-bottom: none; }
.row .ri, .li .ri { width: 36px; height: 36px; border-radius: 11px; }

/* ---------- Empty states ---------- */
.empty { padding: 72px 20px; }
.empty .mark.lg, .empty .mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: #fff; background: linear-gradient(180deg, #1B1B28, #0D0D15); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.empty .mark svg { width: 30px; height: 30px; }
.empty .page-h { margin-top: 6px; }
.empty .page-sub { margin-left: auto; margin-right: auto; }
.empty-card { border-style: solid; border-color: var(--border); border-radius: 20px; padding: 52px 24px; background: radial-gradient(60% 80% at 50% 0%, var(--accent-soft), transparent 70%), var(--panel); }
.empty-card .ei { width: 48px; height: 48px; border-radius: 15px; }

/* ---------- Buttons & controls ---------- */
.btn { transition: transform .2s var(--cg-ease), background .2s, box-shadow .2s, border-color .2s; }
.btn:active { transform: scale(.97); }
.btn-accent { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff 12%), var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px -8px var(--accent); }
.btn:focus-visible, .nav-item:focus-visible, .sug:focus-visible, .cg-spec:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.tabs { gap: 4px; }

/* ---------- Sidebar ---------- */
.nav-item { border-radius: 10px; transition: background .2s, color .2s; }
.nav-item.on, .nav-item.active { box-shadow: inset 0 0 0 1px var(--border); }
.upgrade-cta { position: relative; overflow: hidden; border-radius: 14px; padding: 10px 12px; background: linear-gradient(135deg, #15152A 0%, #1E1B3A 100%); border: 1px solid rgba(124,124,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px -14px rgba(99,102,241,.9); }
.upgrade-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%); transform: translateX(-120%); animation: cgSheen 5s ease-in-out 2s infinite; pointer-events: none; }
.upgrade-cta .uc-logo { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.upgrade-cta:hover { opacity: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 32px -14px rgba(99,102,241,1); }
.upgrade-cta.pulse { animation: none; }
@keyframes cgSheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------- Home ---------- */
.home-head { gap: 12px; margin-bottom: 10px; }
.home-head .mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: linear-gradient(180deg, #1B1B28, #0D0D15); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.home-head .mark svg { width: 20px; height: 20px; }
.home-head .wordmark { font-family: var(--cg-display); font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.035em; line-height: 1.1; }
.composer { border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 60px -28px rgba(24,24,60,.35); transition: border-color .25s, box-shadow .25s; }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 4px var(--accent-soft), 0 28px 70px -28px color-mix(in srgb, var(--accent) 55%, transparent); }
.composer textarea { font-size: 16px; padding: 18px 20px 8px; }
.sug { border-radius: 999px; padding: 8px 14px; transition: border-color .2s, color .2s, background .2s, transform .25s var(--cg-ease); }
.sug:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); background: var(--accent-soft); transform: translateY(-1px); }
.cg-feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 20px; }
.cg-feats span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; color: var(--text2); background: var(--panel); border: 1px solid var(--border); }
.cg-feats .cg-ic { color: var(--accent-text); }

/* ---------- Specialist agents ---------- */
.cg-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cg-spec { --c: var(--accent); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 20px 18px; text-align: left; border-radius: 20px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; overflow: hidden; transition: transform .4s var(--cg-ease), box-shadow .4s, border-color .3s; }
.cg-spec::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%); opacity: .7; transition: opacity .3s; pointer-events: none; }
.cg-spec:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, var(--border)); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--c) 70%, transparent); }
.cg-spec:hover::before { opacity: 1; }
.cg-spec-ic { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; margin-bottom: 8px; color: #fff; background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 65%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -8px var(--c); }
.cg-spec-ic .cg-ic { width: 21px; height: 21px; }
.cg-spec-badge { position: relative; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: color-mix(in srgb, var(--c) 80%, var(--text)); }
.cg-spec b { position: relative; font-family: var(--cg-display); font-size: 17px; letter-spacing: -.02em; }
.cg-spec small { position: relative; font-size: 13px; line-height: 1.5; color: var(--text2); }
.cg-spec-go { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--c) 85%, var(--text)); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s var(--cg-ease); }
.cg-spec-go svg { width: 14px; height: 14px; }
.cg-spec:hover .cg-spec-go, .cg-spec:focus-visible .cg-spec-go { opacity: 1; transform: none; }
@media (hover: none) { .cg-spec-go { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tile, .cg-spec, .cg-spec-go, .sug, .btn { transition: none !important; }
  .upgrade-cta::after { animation: none; }
}

.upgrade-cta .uc-logo svg { width: 14px; height: 14px; }

/* Section titles and trailing actions sitting directly inside a card get the card's inner spacing */
.card > .page-h:first-child { padding: 18px 18px 8px; margin: 0 !important; font-size: 15px !important; letter-spacing: -.01em; }
.card > div[style^="margin-top"]:last-child { padding: 4px 16px 16px; }
.card > .row:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.card > .row:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

/* ---------- Welcome / onboarding ---------- */
.hero2 h1 { font-family: var(--cg-display); font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.04em; background: linear-gradient(180deg, var(--text) 35%, color-mix(in srgb, var(--text) 55%, var(--accent))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero2 .sub { font-size: 16.5px; line-height: 1.6; }
.hero2-l > .mark.lg { box-shadow: 0 0 0 1px var(--border), 0 18px 44px -14px color-mix(in srgb, var(--accent) 75%, transparent); }
.hero2 .feat { border-radius: 18px; transition: transform .35s var(--cg-ease), border-color .3s, box-shadow .35s; }
.hero2 .feat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--accent) 70%, transparent); }
.hero2 .feat > .cg-ic { width: 34px; height: 34px; padding: 8px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, var(--accent), var(--accent-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px -8px var(--accent); margin-bottom: 6px; }
.hero2 .proof { border-radius: 20px; position: relative; overflow: hidden; transition: transform .35s var(--cg-ease), border-color .3s; }
.hero2 .proof::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 90% at 100% 0%, var(--accent-soft), transparent 65%); pointer-events: none; }
.hero2 .proof:hover { transform: translateX(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.hero2 .proof b { position: relative; font-family: var(--cg-display); font-size: 32px; letter-spacing: -.035em; background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--accent) 70%, var(--text))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero2 .proof small { position: relative; }
.ob-steps span.on { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ── Agent welcome screens (Trading, Accountant, Vision, …) ── */
.welcome-orb-wrap{gap:22px!important;padding-top:28px}
.welcome-orb-wrap .welcome-orb{box-shadow:0 30px 80px -20px rgba(99,102,241,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.cg-orb-ic{display:grid;place-items:center;color:#fff;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25))}
.cg-orb-ic svg{width:52px;height:52px;stroke-width:1.6}
.welcome-orb-wrap > div > div:first-child[style*="font-size:22px"]{font-family:var(--cg-display);font-size:34px!important;font-weight:650!important;letter-spacing:-.025em;margin-bottom:10px!important}
.welcome-orb-wrap > div > div[style*="letter-spacing:.06em"]{border-radius:980px!important;padding:5px 12px!important;font-size:11px!important;letter-spacing:.12em!important;box-shadow:0 6px 20px -8px currentColor}
.welcome-orb-wrap > div > div[style*="max-width:320px"]{font-size:16px!important;max-width:460px!important;line-height:1.6!important}
.welcome-orb-wrap > div[style*="grid-template-columns:1fr 1fr"]{max-width:560px!important;gap:12px!important}
.welcome-orb-wrap .card[onclick]{padding:18px 18px!important;border-radius:16px!important;background:var(--card,var(--bg))!important;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .35s var(--cg-ease),box-shadow .35s var(--cg-ease),border-color .35s}
.welcome-orb-wrap .card[onclick]:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(79,70,229,.35);border-color:color-mix(in srgb,var(--accent,#6366F1) 40%,var(--border))!important}
.welcome-orb-wrap .card[onclick] > div:first-child{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px!important;background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(168,85,247,.14));color:var(--accent,#6366F1)}
.welcome-orb-wrap .card[onclick] > div:first-child .cg-ic{width:18px;height:18px}
.welcome-orb-wrap .card[onclick] > div:nth-child(2){font-size:14px!important;margin-bottom:2px}
.welcome-orb-wrap .card[onclick] > div:nth-child(3){font-size:12.5px!important}
.welcome-orb-wrap > .btn-dark{border-radius:980px!important;padding:14px 36px!important;box-shadow:0 14px 34px -14px rgba(17,17,17,.55);transition:transform .3s var(--cg-ease),box-shadow .3s}
.welcome-orb-wrap > .btn-dark:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(17,17,17,.6)}