:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #07101f;
  color: #f5f8ff;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(900px 600px at 90% -8%, #18569a62, transparent 70%),
    radial-gradient(760px 680px at -14% 72%, #08796b4d, transparent 67%),
    #07101f;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: linear-gradient(#dceeff08 1px, transparent 1px), linear-gradient(90deg, #dceeff08 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.shell { position: relative; width: min(1120px, calc(100% - 48px)); min-height: 100vh; margin: auto; padding: 27px 0 76px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 42px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: inherit; font-size: 15px; font-weight: 750; letter-spacing: .03em; text-decoration: none; }
.brand > span:last-child { white-space: nowrap; }
.brand-mark { display: grid; width: 35px; height: 35px; place-items: center; color: #06101d; border: 1px solid #d7f5ff99; border-radius: 11px; background: linear-gradient(135deg, #b8f3ff, #70adff); box-shadow: 0 8px 24px #67c8ff3d; font-family: Georgia, serif; font-size: 22px; }
.account { display: flex; align-items: center; gap: 16px; color: #c7d7ee; font-size: 13px; }
.text-button { padding: 7px 0; color: #9dddf5; border: 0; border-bottom: 1px solid transparent; background: transparent; cursor: pointer; font: inherit; transition: border-color .2s ease, color .2s ease; }
.text-button:hover { color: #fff; border-color: currentColor; }
.text-button:focus-visible, .primary-button:focus-visible, .workspace-card:focus-visible, .continue-link:focus-visible { outline: 3px solid #9aeaff; outline-offset: 4px; }

.hero { position: relative; padding: 66px 7% 54px; }
.hero::after { position: absolute; top: 92px; right: 6%; width: min(30vw, 330px); aspect-ratio: 1; border: 1px solid #b3ecff20; border-radius: 50%; content: ""; box-shadow: inset 0 0 80px #72c6ff10, 0 0 70px #68bfff18; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: #81d3f5; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.hero h1 { position: relative; z-index: 1; max-width: 740px; margin: 0; font-size: clamp(47px, 6vw, 76px); font-weight: 760; line-height: 1.1; letter-spacing: -.065em; }
.hero-copy { position: relative; z-index: 1; max-width: 555px; margin: 28px 0 0; color: #b3c6df; font-size: 17px; line-height: 1.9; }
.principles { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.principles span { padding: 7px 11px; color: #cce0f3; border: 1px solid #b2e0f029; border-radius: 99px; background: #9edfff08; font-size: 12px; }
.principles b { margin-right: 5px; color: #69c9eb; font-size: 10px; letter-spacing: .06em; }

.login-panel { display: grid; grid-template-columns: 1fr .94fr; gap: 52px; margin: 0 5%; padding: 40px 44px; border: 1px solid #9ecfff2b; border-radius: 24px; background: linear-gradient(125deg, #11223eea, #0b1831db); box-shadow: 0 25px 78px #0006, inset 0 1px #e0f6ff0d; backdrop-filter: blur(14px); }
.login-panel h2 { margin: 0; font-size: clamp(25px, 2.6vw, 32px); letter-spacing: -.045em; }
.login-note { max-width: 340px; margin: 16px 0 0; color: #9fb5d3; font-size: 14px; line-height: 1.75; }
.login-panel form { display: grid; gap: 15px; padding: 3px 0; }
.login-panel label { display: grid; gap: 8px; color: #bdd0eb; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.login-panel input { width: 100%; padding: 14px 15px; color: #f4f8ff; border: 1px solid #789bc25e; border-radius: 11px; outline: none; background: #071428a8; font: inherit; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.login-panel input:focus { border-color: #92e7ff; background: #0a1930; box-shadow: 0 0 0 4px #8ee7ff14; }
.primary-button { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; padding: 14px 17px; color: #05101c; border: 0; border-radius: 11px; background: linear-gradient(100deg, #b8f4ff, #7bb2ff); box-shadow: 0 10px 25px #5bb7f836; cursor: pointer; font: 750 14px inherit; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.primary-button span:last-child { font-size: 20px; font-weight: 500; transition: transform .2s ease; }.primary-button:hover { box-shadow: 0 13px 31px #5bb7f84d; filter: brightness(1.05); transform: translateY(-1px); }.primary-button:hover span:last-child { transform: translateX(4px); }.primary-button:disabled { opacity: .68; cursor: wait; transform: none; }.form-error { min-height: 18px; margin: -2px 0 0; color: #ffaaa9; font-size: 13px; }

.workspace-page .shell { padding-top: 27px; }
#workspace { padding: 76px 3% 0; animation: reveal .5s ease both; }
.auth-pending #workspace { visibility: hidden; }
.section-heading { display: flex; align-items: center; margin-bottom: 24px; }
.section-heading .eyebrow { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.continue-panel { display: flex; align-items: center; gap: 19px; margin: -8px 0 22px; padding: 14px 17px; border: 1px solid #9edcf336; border-radius: 15px; background: #b4e9ff0a; }
.continue-kicker { padding: 5px 7px; color: #86dff9; border: 1px solid #a1e9ff2c; border-radius: 7px; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.continue-panel div { display: grid; gap: 3px; min-width: 0; }.continue-panel strong { color: #ebf7ff; font-size: 14px; }.continue-panel div span { overflow: hidden; color: #9db4d2; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.continue-link { margin-left: auto; padding: 8px 10px; color: #bceeff; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s ease, color .2s ease; }.continue-link:hover { color: #fff; background: #b4edff16; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.workspace-card { position: relative; display: flex; min-height: 312px; flex-direction: column; justify-content: space-between; padding: 26px; overflow: hidden; isolation: isolate; color: inherit; border: 1px solid #7e9dc34d; border-radius: 20px; text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.workspace-card::before { position: absolute; z-index: -1; top: -45%; right: -34%; width: 75%; aspect-ratio: 1; border-radius: 50%; content: ""; background: currentColor; filter: blur(2px); opacity: .08; transition: transform .35s ease, opacity .35s ease; }
.workspace-card:hover { border-color: #c7efff9e; box-shadow: 0 22px 45px #0005; transform: translateY(-6px); }.workspace-card:hover::before { opacity: .16; transform: scale(1.35); }
.gpt { color: #d7e3ff; background: linear-gradient(145deg, #293a78dc, #111936f2); }.health { color: #d7fff3; background: linear-gradient(145deg, #115b58dc, #082c35f2); }.stock { color: #e2efff; background: linear-gradient(145deg, #164875dc, #0c1e3af2); }
.card-icon { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid #ffffff2e; border-radius: 14px; background: #ffffff14; box-shadow: inset 0 1px #ffffff15; font-size: 23px; }
.workspace-card p { margin: 0 0 8px; color: #c9eaffbd; font-size: 10px; font-weight: 800; letter-spacing: .14em; }.workspace-card h2 { margin: 0 0 9px; font-size: 27px; letter-spacing: -.045em; }.workspace-card div > span { display: block; color: #d2ddedc9; font-size: 14px; line-height: 1.72; }.workspace-card strong { display: inline-flex; margin-top: 17px; padding: 7px 9px; color: #e9f8ff; border: 1px solid #dbf6ff26; border-radius: 8px; background: #ffffff0d; font-size: 12px; font-weight: 650; }.card-cta { color: #d2f5ff; font-size: 13px; font-weight: 700; }.card-cta::after { margin-left: 8px; content: "→"; font-size: 17px; transition: transform .2s ease; }.workspace-card:hover .card-cta::after { display: inline-block; transform: translateX(4px); }
.auth-loading, .auth-error { max-width: 540px; margin: 118px auto 0; padding: 20px; color: #b9cce4; text-align: center; }.auth-error { color: #ffb6b3; }.noscript-notice { max-width: 540px; margin: 26px auto; color: #ffb6b3; text-align: center; }

@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 800px) { .shell { width: min(100% - 30px, 620px); padding-bottom: 60px; }.brand > span:last-child { overflow: hidden; text-overflow: ellipsis; }.hero { padding: 58px 2% 48px; }.hero::after { top: 32px; right: -100px; width: 300px; }.login-panel { grid-template-columns: 1fr; gap: 25px; margin: 0; padding: 30px; }.card-grid { grid-template-columns: 1fr; }.workspace-card { min-height: 225px; }.section-heading { align-items: flex-start; } #workspace { padding-top: 60px; }.continue-panel { align-items: flex-start; flex-wrap: wrap; }.continue-link { margin-left: 0; } }
@media (max-width: 480px) { .shell { width: min(100% - 26px, 480px); }.brand { font-size: 13px; }.brand-mark { flex: 0 0 auto; width: 32px; height: 32px; }.login-panel { padding: 24px 20px; }.login-panel h2 { font-size: 25px; }.workspace-card { padding: 23px; }.account { gap: 9px; }.continue-panel { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }