/* ================= theme tokens ================= Light is the default. Dark applies when the OS prefers it (unless the user forced light), or when the user forces dark via the toggle. */ :root { --page: #f9f9f7; --surface: #fcfcfb; --surface-2: #f3f2ee; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781; --grid: #e1e0d9; --baseline: #c3c2b7; --border: rgba(11,11,11,0.10); --accent: #2a78d6; --accent-ink:#1c5cab; --accent-soft: rgba(42,120,214,0.10); --grad-2: #4a3aa7; --good: #0ca30c; --good-text: #006300; --bad: #d03b3b; --neutral-x: #ec835a; --error-bg: #fdf0f0; --info-bg: #f4f1e8; --shadow: 0 1px 2px rgba(11,11,11,.04), 0 8px 24px rgba(11,11,11,.06); --shadow-lift: 0 2px 6px rgba(11,11,11,.08), 0 14px 34px rgba(11,11,11,.10); --grad: linear-gradient(92deg, var(--accent), var(--grad-2)); --glow: 0 8px 26px rgba(42,120,214,.35); --glow-lift: 0 14px 34px rgba(42,120,214,.45); --ease-spring: cubic-bezier(.16,1,.3,1); --dur-fast: .15s; --dur: .3s; --dur-slow: .6s; --top-offset: 70px; } /* Dark values. A head script resolves the theme (saved choice, else OS preference) and stamps data-theme on before first paint. */ :root[data-theme="dark"] { --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232322; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781; --grid: #2c2c2a; --baseline: #383835; --border: rgba(255,255,255,0.10); --accent: #3987e5; --accent-ink:#6da7ec; --accent-soft: rgba(57,135,229,0.14); --grad-2: #9085e9; --good: #0ca30c; --good-text: #0ca30c; --bad: #e66767; --neutral-x: #ec835a; --error-bg: #2b1a1a; --info-bg: #232219; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); --shadow-lift: 0 2px 6px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45); --glow: 0 8px 26px rgba(57,135,229,.4); --glow-lift: 0 14px 34px rgba(57,135,229,.5); } /* ================= base ================= */ * { box-sizing: border-box; } /* Viewport-fluid type: the root font tracks browser width (15px at ~1270px, the old default), so the whole rem-based UI scales — zoomed way out or in a tiny window, the layout keeps its proportions instead of vanishing. */ html { scroll-behavior: smooth; font-size: clamp(12.5px, 0.55vw + 8px, 21px); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body { margin: 0; background: var(--page); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.5; transition: background .25s ease, color .25s ease; } button { font: inherit; cursor: pointer; } .wrap { max-width: 73.3rem; margin: 0 auto; padding: 0 1.1rem; } .pos { color: var(--good-text); font-weight: 600; } .neg { color: var(--bad); font-weight: 600; } /* ================= top bar ================= */ .topbar { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--page) 82%, transparent); border-bottom: 1px solid transparent; transition: border-color .2s; } .topbar.scrolled { border-bottom-color: var(--border); } .topbar .inner { max-width: 73.3rem; margin: 0 auto; padding: .65rem 1.1rem; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; font-weight: 800; font-size: 1.15rem; letter-spacing: 0; background: none; border: 0; color: var(--ink); padding: 0; text-decoration: none; } .brand-word { display: inline-flex; align-items: baseline; letter-spacing: 0; } .brand-sign { font-family: "Segoe UI", system-ui, sans-serif; font-weight: 850; } .brand-core { font-family: "Segoe UI", system-ui, sans-serif; font-weight: 950; color: var(--accent-ink); letter-spacing: .035em; margin: 0 .01rem; } .brand-chemy { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; color: var(--ink); } .top-actions { display: flex; align-items: center; gap: .6rem; } .auth-slot { display: flex; align-items: center; } .auth-slot .btn.auth-signin { padding: .35rem .8rem; } .badge { font-size: .74rem; font-weight: 600; color: var(--ink-2); border: 1px solid var(--border); border-radius: 999px; padding: .26rem .7rem; background: var(--surface); } .badge .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: .4rem; } .theme-toggle { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; transition: transform .2s var(--ease-spring), color .15s; } .theme-toggle:hover { transform: translateY(-1px); color: var(--ink); } .theme-toggle svg { display: block; } :root[data-theme="light"] .icon-sun { display: none; } :root[data-theme="dark"] .icon-moon { display: none; } /* ============ SHARED WITH LANDING (landing.html) — do not restyle ============ landing.html carries its own hero/scroll-movie styles inline but relies on these classes from here. Extend via new modifiers only. */ .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .cta { border: 0; border-radius: 14px; padding: .95rem 2rem; font-size: 1.05rem; font-weight: 700; color: #fff; background: linear-gradient(92deg, var(--accent), var(--grad-2)); box-shadow: 0 8px 26px rgba(42,120,214,.35); transition: transform .18s ease, box-shadow .18s ease; } .cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(42,120,214,.45); } .cta:active { transform: translateY(0); } /* entrance animation (landing scroll reveals) */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ==================== end shared-with-landing block ==================== */ /* ================= app section ================= */ #app { padding: 3.2rem 0 3rem; } .ask-zone { text-align: center; max-width: 760px; margin: .6rem auto 2.6rem; } .ask-zone h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.15; letter-spacing: -.03em; margin: 0 0 1.1rem; } .ask { display: flex; gap: .55rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: .45rem; box-shadow: var(--shadow); transition: box-shadow .25s ease, transform .25s var(--ease-spring), background .25s ease, border-color .25s ease; } /* focused ask box: hairline gradient border + landing-CTA glow */ .ask:focus-within { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: var(--glow); transform: translateY(-1px); } .ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.08rem; padding: .55rem .7rem; } .ask input::placeholder { color: var(--muted); } .btn { border: 0; border-radius: 12px; padding: .7rem 1.25rem; background: var(--accent); color: #fff; font-weight: 650; white-space: nowrap; transition: transform .2s var(--ease-spring), box-shadow .15s ease, opacity .15s; } .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(42,120,214,.35); } .btn:disabled { opacity: .55; cursor: default; } .btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--baseline); font-weight: 500; } .btn.ghost:hover:not(:disabled) { box-shadow: none; color: var(--ink); border-color: var(--muted); } /* the one clear next action per view: gradient + glow, like the landing CTA */ .btn.primary { background: var(--grad); box-shadow: var(--glow); transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, opacity .15s; } .btn.primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--glow-lift); } .btn:active:not(:disabled) { transform: translateY(0) scale(.98); } .chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; margin-top: .9rem; } .chips-label { color: var(--muted); font-size: .8rem; font-weight: 600; } .chip { border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: .42rem .9rem; font-size: .82rem; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .2s var(--ease-spring); } .chip:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); } .parse-error { display: none; margin: .7rem 0 0; text-align: left; background: var(--error-bg); color: var(--bad); border: 1px solid var(--border); border-radius: 12px; padding: .6rem .9rem; font-size: .9rem; } .parse-error.show { display: block; animation: rise .35s var(--ease-spring); } #confirm { display: none; position: relative; overflow: hidden; margin-top: 1rem; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.15rem 1rem 1.3rem; box-shadow: var(--shadow); } #confirm::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); } #confirm.show { display: block; animation: rise .4s var(--ease-spring); } #confirm .kicker { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-ink); } #confirm .desc { margin: .35rem 0 .65rem; } .pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; } .pill { font-size: .78rem; border-radius: 999px; padding: .28rem .7rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); } .pill b { color: var(--ink); font-weight: 650; } .confirm-name { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; } .confirm-name label { color: var(--muted); font-size: .8rem; font-weight: 600; } .confirm-name input { flex: 1; max-width: 360px; font: inherit; font-size: .9rem; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .4rem .65rem; outline: none; } .confirm-name input:focus { border-color: var(--accent); } .confirm-actions { display: flex; gap: .55rem; flex-wrap: wrap; } .confirm-hint { margin-top: .55rem; } /* ---- context + banners ---- */ .context { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; font-size: .9rem; color: var(--ink-2); } .run-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: .25rem .7rem; } .context .desc { flex: 1; min-width: 240px; } .context .desc em { font-style: normal; font-weight: 600; color: var(--ink); } /* landing state (no run yet): a centered hint under the hero column, with the demo link sitting right next to the sentence instead of across the page */ .context.context-hero { justify-content: center; text-align: center; margin-top: 1.6rem; } .context.context-hero .desc { flex: 0 1 auto; min-width: 0; } .conn-actions { flex-basis: 100%; display: flex; flex-direction: column; gap: .25rem; margin-top: .35rem; } .linklike { background: none; border: 0; padding: 0; color: var(--accent-ink); font-size: .82rem; text-decoration: underline; } .banner { border-radius: 12px; padding: .65rem .95rem; margin-bottom: .9rem; border: 1px solid var(--border); display: none; font-size: .92rem; } .banner.show { display: block; animation: rise .35s var(--ease-spring); } .banner.error { background: var(--error-bg); color: var(--bad); } .banner.info { background: var(--info-bg); color: var(--ink-2); } /* ---- plain-money results story (Build tab) ---- */ .story-card { position: relative; overflow: hidden; } .story-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); } .story { margin: 0; font-size: 1.06rem; line-height: 1.65; color: var(--ink-2); max-width: 60rem; } .story b { color: var(--ink); font-weight: 650; } .story b.pos { color: var(--good-text); } .story b.neg { color: var(--bad); } .story-actions { margin-top: .7rem; } .explain-body p { margin: 0 0 .7rem; line-height: 1.6; } .explain-body p:last-child { margin-bottom: 0; } /* ---- metrics ---- */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: .9rem; } @media (max-width: 680px) { .metrics { grid-template-columns: repeat(2, 1fr); } } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .8rem 1rem; box-shadow: var(--shadow); transition: transform .2s var(--ease-spring), box-shadow .2s ease; } .tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } /* fresh results land in a stagger (class re-toggled after each run) */ .metrics-in .tile { animation: rise var(--dur-slow) var(--ease-spring) backwards; } .metrics-in .tile:nth-child(2) { animation-delay: .07s; } .metrics-in .tile:nth-child(3) { animation-delay: .14s; } .metrics-in .tile:nth-child(4) { animation-delay: .21s; } .card-in { animation: viewIn .45s var(--ease-spring) .12s backwards; } .tile .label { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .tile .value { font-size: 1.55rem; font-weight: 700; margin-top: .05rem; letter-spacing: -.02em; } .tile .subnote { font-size: .76rem; color: var(--muted); margin-top: .05rem; } .tile .value.pos { color: var(--good-text); } .tile .value.neg { color: var(--bad); } /* ---- benchmark bars: strategy vs buy-and-hold vs SPY ---- */ .bench-bars { margin-top: .85rem; display: flex; flex-direction: column; gap: .45rem; } .bb-row { display: grid; grid-template-columns: 11rem 1fr 6.5rem; align-items: center; gap: .8rem; font-size: .85rem; } .bb-label { color: var(--ink-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bb-track { position: relative; height: 1.15rem; background: var(--surface-2); border-radius: 6px; overflow: hidden; } .bb-zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--baseline); } .bb-bar { position: absolute; top: 2px; bottom: 2px; width: 0; border-radius: 0 4px 4px 0; /* rounded data-end, square at the zero line */ background: var(--baseline); transition: width .7s var(--ease-spring); } .bb-bar.bb-neg { border-radius: 4px 0 0 4px; } .bb-bar.strat { background: var(--accent); } .bb-val { font-variant-numeric: tabular-nums; text-align: left; } @media (max-width: 680px) { .bb-row { grid-template-columns: 7.5rem 1fr 5.5rem; font-size: .78rem; } } /* ---- broker picker (Trade tab): paper vs connected real account ---- */ .broker-picker { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; } .broker-picker .bench[disabled] { opacity: .55; cursor: not-allowed; } #broker-note { margin-top: .55rem; } /* SnapTrade Connection Portal, embedded in a modal */ .portal-modal { width: min(30rem, calc(100vw - 2rem)); } .portal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; } .portal-head h4 { margin: 0; } .portal-modal iframe { width: 100%; height: min(70vh, 34rem); border: 0; border-radius: 10px; background: var(--surface-2); } .portal-loading { height: min(70vh, 34rem); border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; text-align: center; padding: 1.3rem; } .portal-loading .spinner { margin: 0 auto .8rem; } .portal-state-text { color: var(--ink-2); font-size: .9rem; } .portal-actions { display: flex; justify-content: center; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; } /* ---- animated stat rings (Build tab results) ---- */ .ring-tile { text-align: center; padding: .9rem .8rem .75rem; } .ring-wrap { position: relative; width: 6.6rem; height: 6.6rem; margin: 0 auto .4rem; } .ring { width: 100%; height: 100%; transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 7; } .ring-track { stroke: var(--grid); } .ring-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 226.2; stroke-dashoffset: 226.2; /* 2π·36, starts empty */ transition: stroke-dashoffset .9s var(--ease-spring); } .ring-center { position: absolute; inset: 0; display: grid; place-items: center; } .ring-tile .value { font-size: 1.1rem; margin-top: 0; } .ring-tile .subnote { margin-top: .1rem; } /* secondary stats step back: smaller tiles, smaller numbers */ .metrics.compact { gap: .6rem; } .metrics.compact .tile { padding: .55rem .85rem; } .metrics.compact .tile .value { font-size: 1.15rem; } /* the one number that IS the account: bigger, gradient-inked */ .tile .value.grad-num { font-size: 2rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- collapsible technical layer (chart + trades) ---- */ .reveal-toggle { display: flex; align-items: baseline; gap: .55rem; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: .75rem 1.1rem; margin-bottom: .9rem; text-align: left; color: var(--ink-2); font-size: .9rem; font-weight: 600; transition: color .15s ease, box-shadow .2s ease, transform .2s var(--ease-spring); } .reveal-toggle:hover { color: var(--ink); box-shadow: var(--shadow-lift); transform: translateY(-1px); } .reveal-toggle .chev { color: var(--accent-ink); font-size: .8rem; } .reveal-toggle .h-sub { font-weight: 400; color: var(--muted); font-size: .8rem; } /* results dim while a re-run is fetching (the chart spinner may be hidden) */ .stale { opacity: .45; transition: opacity .2s ease; } /* non-verbal nudge: a slow breath of glow on the thing worth clicking */ .reveal-toggle.attn { animation: breathe-btn 3s ease-in-out infinite; } @keyframes breathe-btn { 0%, 100% { opacity: .78; box-shadow: var(--shadow); border-color: var(--border); } 50% { opacity: 1; border-color: var(--accent); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent) 45%, transparent); } } .tool-btn.pulse-glow { border-color: var(--accent); color: var(--accent-ink); animation: breathe-shadow 3s ease-in-out infinite; } @keyframes breathe-shadow { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 55%, transparent); } } /* callout bubble under the fit button: "not every trade fits this view" */ .zoom-group { position: relative; } .fit-callout { position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; width: 15.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lift); padding: .55rem .8rem; font-size: .8rem; line-height: 1.45; color: var(--ink-2); cursor: pointer; animation: rise .35s var(--ease-spring); } .fit-callout b { color: var(--accent-ink); } .fit-callout::before { content: ""; position: absolute; top: -5px; right: 12px; width: 9px; height: 9px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } /* ---- chart card ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); margin-bottom: .9rem; } #chart-card { padding: .65rem; } .chart-toolbar { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .15rem .25rem .6rem; } .symbol-box { width: 108px; font: inherit; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .45rem .7rem; outline: none; } .symbol-box:focus { border-color: var(--accent); } .seg { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; } .seg button { border: 0; background: transparent; color: var(--ink-2); font-size: .8rem; font-weight: 600; border-radius: 8px; padding: .34rem .62rem; transition: all .15s; } .seg button:hover { color: var(--ink); } .seg button.active { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow); } .toolbar-spacer { flex: 1; } .zoom-group { display: flex; gap: .3rem; } .tool-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; font-size: .95rem; font-weight: 700; line-height: 1; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .2s var(--ease-spring); } .tool-btn:hover { color: var(--ink); transform: translateY(-1px); } #chart { position: relative; width: 100%; height: 30.7rem; } #chart-loading { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; gap: .6rem; align-items: center; justify-content: center; color: var(--muted); background: var(--surface); border-radius: 12px; } #chart-loading.show { display: flex; } .spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--grid); border-top-color: var(--accent); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes rise { from { opacity: 0; transform: translateY(6px); } } #ohlc-legend { position: absolute; top: 6px; left: 8px; z-index: 4; pointer-events: none; font-size: .76rem; color: var(--ink-2); display: flex; gap: .7rem; background: color-mix(in srgb, var(--surface) 78%, transparent); border-radius: 8px; padding: .2rem .5rem; backdrop-filter: blur(4px); } #ohlc-legend b { color: var(--ink); } #ohlc-legend:empty { display: none; } #trade-tip { position: absolute; z-index: 10; display: none; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .55rem .75rem; font-size: .8rem; box-shadow: var(--shadow-lift); min-width: 190px; } #trade-tip .tt-head { font-weight: 700; margin-bottom: .25rem; } #trade-tip .row { display: flex; justify-content: space-between; gap: 1.2rem; } #trade-tip .row span:first-child { color: var(--muted); } .legend { display: flex; flex-wrap: wrap; gap: .85rem; padding: .5rem .35rem 0; font-size: .76rem; color: var(--ink-2); } .legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .32rem; } /* ---- trades table ---- */ #trades-card { padding: .3rem 0 .2rem; overflow: hidden; } .tbl-scroll { overflow: auto; max-height: 32rem; } table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .86rem; } th { text-align: left; color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: .4rem 1rem; border-bottom: 1px solid var(--grid); position: sticky; top: 0; z-index: 2; background: var(--surface); } td { padding: .5rem 1rem; border-bottom: 1px solid var(--grid); white-space: nowrap; } tr:last-child td { border-bottom: 0; } tbody tr { transition: background .12s; } tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); } tbody tr:hover td { background: var(--accent-soft); } tbody tr.clickable { cursor: pointer; } /* one accent bar at the row's left edge — not one per cell */ tbody tr.clickable:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); } td.num { font-variant-numeric: tabular-nums; } .reason { display: inline-flex; align-items: center; gap: .38rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: .12rem .55rem; font-size: .76rem; } .reason .dot { width: 8px; height: 8px; border-radius: 50%; } .tbl-hint { color: var(--muted); font-size: .75rem; padding: .35rem 1rem .6rem; } footer { text-align: center; color: var(--muted); font-size: .78rem; padding: .7rem 1.1rem 2.2rem; max-width: 46rem; margin: 0 auto; } /* ================= indicator & compare-line colors ================= */ :root { --ind-1: #eda100; --ind-2: #4a3aa7; --ind-3: #e87ba4; --ind-4: #eb6834; --cmp-1: #2a78d6; --cmp-2: #1baf7a; --cmp-3: #eda100; --cmp-4: #4a3aa7; --cmp-5: #e87ba4; --cmp-6: #eb6834; } :root[data-theme="dark"] { --ind-1: #c98500; --ind-2: #9085e9; --ind-3: #d55181; --ind-4: #d95926; --cmp-1: #3987e5; --cmp-2: #199e70; --cmp-3: #c98500; --cmp-4: #9085e9; --cmp-5: #d55181; --cmp-6: #d95926; } /* ================= tabs & compare view ================= */ .tabs { align-self: center; } .tabs button { padding: .4rem 1rem; position: relative; } /* active tab: gradient wordmark treatment + underline that springs in. Two background layers: the gradient clipped to the text, the surface pill clipped to the box underneath it. */ .tabs button.active { background: var(--grad), linear-gradient(var(--surface), var(--surface)); -webkit-background-clip: text, padding-box; background-clip: text, padding-box; color: transparent; } .tabs button.active::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 3px; height: 2px; border-radius: 2px; background: var(--grad); animation: underline-in var(--dur) var(--ease-spring); } @keyframes underline-in { from { transform: scaleX(0); } } /* view entrance on tab switch (class re-toggled by showView) */ .view-in { animation: viewIn var(--dur) var(--ease-spring); } @keyframes viewIn { from { opacity: 0; transform: translateY(10px); } } /* per-tab page header: big tight-tracked title + one-line explainer */ .view-head { margin-bottom: 1.1rem; } .view-head h2 { font-size: 1.45rem; letter-spacing: -.025em; margin: 0; line-height: 1.2; } .view-sub { color: var(--ink-2); font-size: .9rem; margin: .3rem 0 0; max-width: 680px; } .btn-sm { padding: .35rem .8rem; font-size: .8rem; border-radius: 9px; } .compare-grid { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; align-items: start; } @media (max-width: 860px) { .compare-grid { grid-template-columns: 1fr; } } .side-panel { padding: 1rem 1.1rem; position: sticky; top: var(--top-offset); } .side-note { color: var(--muted); font-size: .78rem; margin-top: .5rem; } #saved-empty { text-align: center; padding: .5rem .2rem; line-height: 1.6; } /* stats table pops in when a comparison finishes (display toggle restarts it) */ #cmp-stats-card { animation: viewIn .45s var(--ease-spring); } .saved-list { display: flex; flex-direction: column; gap: .15rem; } .saved-row { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem; border-radius: 8px; cursor: pointer; font-size: .85rem; transition: background .15s ease, box-shadow .15s ease; } .saved-row:hover { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); } .saved-row input { accent-color: var(--accent); } .saved-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .saved-ret { font-variant-numeric: tabular-nums; font-size: .8rem; } .saved-del { border: 0; background: none; color: var(--muted); font-size: 1rem; padding: 0 .25rem; border-radius: 6px; } .saved-del:hover { color: var(--bad); } .saved-actions { display: inline-flex; align-items: center; gap: .1rem; } .saved-act { border: 0; background: none; color: var(--muted); font-size: .8rem; padding: .1rem .3rem; border-radius: 6px; } .saved-act:hover { color: var(--accent-ink); background: var(--accent-soft); } .bench-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .bench { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); border-radius: 999px; padding: .35rem .8rem; font-size: .82rem; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .25s var(--ease-spring); } .bench .sub { color: var(--muted); font-size: .72rem; margin-left: .15rem; } .bench:hover { border-color: var(--accent); } .bench.on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; transform: scale(1.03); } .bench-add { display: flex; gap: .4rem; margin-top: .55rem; } .bench-add input { flex: 1; min-width: 0; font: inherit; font-size: .84rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: .35rem .6rem; outline: none; } .bench-add input:focus { border-color: var(--accent); } .cmp-hover { font-size: .8rem; color: var(--ink-2); padding: .15rem .4rem .4rem; min-height: 1.5em; } .cmp-hover .dot-lbl .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .25rem; } #cmp-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 60%, transparent); z-index: 5; border-radius: 10px; } /* ================= options tab ================= */ .opt-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .8rem 1rem; margin-bottom: .9rem; } /* two-level expiry picker: horizon seg + weekday chips for that horizon */ .opt-expiries-row { flex-basis: 100%; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .opt-expiries-row:empty { display: none; } .exp-groups button { padding: .34rem .8rem; } /* Any-date drill-down: month row, then that month's dates, on its own line */ .exp-any { display: flex; flex-direction: column; gap: .45rem; flex-basis: 100%; } /* strike-depth control in the chain header */ .depth-ctl { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; letter-spacing: 0; } .depth-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); } .seg.seg-sm button { padding: .22rem .55rem; font-size: .74rem; } .depth-box { width: 3.4rem; font: inherit; font-size: .78rem; text-align: center; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: .26rem .4rem; outline: none; } .depth-box:focus { border-color: var(--accent); } .depth-box::placeholder { color: var(--muted); } .opt-spot-wrap { display: flex; align-items: baseline; gap: .5rem; } .opt-spot-label { color: var(--muted); font-weight: 700; letter-spacing: .04em; } .opt-spot { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .opt-spot.flash { animation: tick-flash .8s ease; } @keyframes tick-flash { from { color: var(--accent-ink); } } .opt-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; align-items: start; } @media (max-width: 980px) { .opt-grid { grid-template-columns: 1fr; } } .opt-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: var(--top-offset); } #opt-chain-card { padding: .4rem 0 .2rem; overflow: hidden; } .chain-caps { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .4rem 1.2rem .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); } .chain-caps .calls-cap { color: var(--good-text); } .chain-caps .puts-cap { color: var(--bad); } table.chain { font-size: .8rem; } table.chain th, table.chain td { padding: .32rem .55rem; text-align: right; transition: background .15s ease; } table.chain .strike { text-align: center; font-weight: 700; background: var(--surface-2); } table.chain tbody td.itm { background: var(--accent-soft); } table.chain tr.atm td { border-top: 2px solid var(--accent); border-image: var(--grad) 1; } table.chain tr.picked td { background: color-mix(in srgb, var(--accent) 18%, transparent); } table.chain tbody tr { cursor: pointer; } .ticket-head { margin-bottom: .3rem; } .occ { font-family: ui-monospace, Consolas, monospace; font-size: .74rem; color: var(--muted); margin-bottom: .7rem; } .ticket-grid { display: grid; grid-template-columns: auto 1fr; gap: .5rem .9rem; align-items: center; font-size: .88rem; } .ticket-grid > span:nth-child(odd) { color: var(--muted); font-size: .8rem; } .qty-row { display: inline-flex; align-items: center; gap: .6rem; } /* ================= workbench shared components ================= One vocabulary for every tab: cards, headings, pills, form bits. */ .view .wrap { padding-top: 2rem; } /* card variants: table cards are flush (default); .pad for form/content cards */ .card.pad { padding: 1rem 1.1rem; } /* the hero card of a tab: gradient top hairline + lifted shadow */ .card.hero-card { position: relative; overflow: hidden; box-shadow: var(--shadow-lift); } .card.hero-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); } .card.pad-sm { padding: .65rem; } /* every card heading reads the same: small-caps panel title, with room for an action button (.h-btn) and a de-emphasized suffix (.h-sub) */ .card h3 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .55rem 1rem .3rem; } .card.pad h3, .card.pad-sm h3 { margin: 0 0 .55rem; } .card h3 .h-sub { font-weight: 400; text-transform: none; letter-spacing: 0; } .card h3 .h-btn { margin-left: auto; } /* header row inside a padded card (title + controls on one line) */ .card-toolbar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .35rem .5rem .5rem; } .card-toolbar h3 { margin: 0; } /* status pill: colored dot + short label (runner state, order status, ...) */ .status-pill { display: inline-flex; align-items: center; gap: .38rem; font-size: .74rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: .18rem .62rem; white-space: nowrap; } .status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .status-pill.good { color: var(--good-text); } .status-pill.good .dot { background: var(--good); } .status-pill.bad { color: var(--bad); } .status-pill.bad .dot { background: var(--bad); } .status-pill.warn { color: var(--neutral-x); } .status-pill.warn .dot { background: var(--neutral-x); } /* inline form bits */ .select { font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .4rem .55rem; outline: none; } .select:focus { border-color: var(--accent); } .asset-row { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 .6rem; } .field-label { color: var(--muted); font-size: .9rem; } .btn.full { width: 100%; margin-top: .8rem; } .gap-top { margin-top: .6rem; } .gap-bottom { margin-bottom: .9rem; } .mt-1 { margin-top: 1rem; } .qty-box { width: 6rem; } .card.flush { padding: .3rem 0 .2rem; overflow: hidden; } /* reporting tables that shouldn't dominate the page */ .card.dense table { font-size: .82rem; } .card.dense td { padding: .38rem 1rem; } .card.dense .tbl-scroll { max-height: 20rem; } .tbl-msg { padding: 1rem; } .card > .side-note[id$="-empty"] { display: block; margin: 0; padding: .85rem 1rem 1rem; max-width: 100%; } .card .tbl-scroll + .side-note[id$="-empty"] { border-top: 1px solid var(--grid); } td .btn + .btn { margin-left: .4rem; } /* horizontal status card (runner state row on the Live tab) */ .row-card { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .8rem 1.1rem; } .watch-chips { display: inline-flex; gap: .35rem; flex-wrap: wrap; } /* Trade tab: order form on the left, runner status + activity beside it. The activity card stretches to match the form so the row has no dead gap. */ .trade-grid { display: grid; grid-template-columns: 28rem 1fr; gap: 1rem; align-items: stretch; margin-bottom: .9rem; } .trade-grid > .card, .trade-side .card { margin-bottom: 0; } .trade-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .trade-side .banner { margin-bottom: 0; } #live-activity-card { flex: 1; display: flex; flex-direction: column; min-height: 0; } #live-activity-card .feed { flex: 1; max-height: 17.3rem; } @media (max-width: 900px) { .trade-grid { grid-template-columns: 1fr; } } /* activity feed (Live tab) */ .feed { padding: .2rem 1rem .7rem; max-height: 21.3rem; overflow-y: auto; } .feed-row { display: flex; gap: .7rem; align-items: baseline; padding: .32rem 0; border-bottom: 1px solid var(--grid); font-size: .84rem; } .feed-row:last-child { border-bottom: 0; } .feed-time { color: var(--muted); font-size: .76rem; min-width: 5.2rem; font-variant-numeric: tabular-nums; } .feed-text.pos, .feed-text.neg { font-weight: 500; } .feed-empty { padding: .3rem 0 .5rem; } /* long description cells may wrap instead of stretching the table */ td.wrap-cell { white-space: normal; min-width: 220px; max-width: 340px; } /* two-line table cells: bold main line + quiet detail line */ .cell-sub { display: block; font-size: .74rem; font-weight: 400; color: var(--muted); margin-top: .12rem; } /* row actions hug the table's right edge */ td.actions-cell { text-align: right; white-space: nowrap; } /* compact square icon action (rename, delete) — quieter than a text button */ .icon-btn { width: 1.85rem; height: 1.85rem; padding: 0; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); display: inline-grid; place-items: center; vertical-align: middle; font-size: .95rem; line-height: 1; transition: color .15s ease, border-color .15s ease, background .15s ease; } .icon-btn:hover { color: var(--ink); border-color: var(--baseline); background: var(--surface-2); } .icon-btn svg { display: block; } td .btn + .icon-btn { margin-left: .4rem; } td .icon-btn + .icon-btn { margin-left: .15rem; } /* "Show N more" expander row inside a grouped table */ .more-row td { padding: .15rem 1rem .45rem; border-bottom: 1px solid var(--grid); } .more-row .linklike { font-size: .78rem; text-decoration: none; color: var(--accent-ink); } .more-row .linklike:hover { text-decoration: underline; } tbody tr.more-row:hover td { background: transparent; } /* inline filter box in a card heading (saved-strategy library) */ .lib-filter { width: 220px; font: inherit; font-size: .82rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: .32rem .6rem; outline: none; } .lib-filter:focus { border-color: var(--accent); } .lib-filter::placeholder { color: var(--muted); } /* fixed-height chart hosts */ #pf-chart { position: relative; height: 20rem; transition: opacity .2s ease; } #pf-chart.loading { opacity: .45; } tbody tr.group-row td { background: var(--surface-2); border-top: 1px solid var(--grid); } tbody tr.group-row:hover td { background: var(--surface-2); } /* expandable strategy P&L rows (Portfolio) */ .expander { display: inline-block; width: 1em; color: var(--muted); transition: transform .12s; } tbody tr.detail-row td { background: var(--surface-2); padding: 0; } tbody tr.detail-row:hover td { background: var(--surface-2); } .detail-box { padding: .4rem 1rem .6rem 2rem; max-height: 17.3rem; overflow: auto; } .detail-box table { font-size: .8rem; } .detail-box th { position: static; background: transparent; } /* ================= responsive: 1024px and 768px breakpoints ================= */ @media (max-width: 1024px) { #chart { height: 26.7rem; } .opt-side, .side-panel { position: static; } } @media (max-width: 860px) { .topbar .badge { display: none; } .tabs { overflow-x: auto; max-width: 60vw; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { #chart { height: 22rem; } #pf-chart, #cmp-chart { height: 17.3rem; } th, td { padding-left: .65rem; padding-right: .65rem; } .row-card { gap: .6rem; } .chart-toolbar { gap: .4rem; } } #cmp-chart { position: relative; height: 26.7rem; } /* series/legend swatches generated from JS */ .cmp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; } .ind-swatch { margin-right: .85rem; } .muted-note { color: var(--muted); } .pill-lg { font-size: .85rem; } /* ================= feedback: toasts, modal, skeletons ================= */ #ui-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; } .ui-toast { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--good); border-radius: 12px; box-shadow: var(--shadow-lift); padding: .6rem .95rem; font-size: .88rem; max-width: 340px; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s var(--ease-spring); } .ui-toast.in { opacity: 1; transform: none; } .ui-toast.error { border-left-color: var(--bad); color: var(--bad); } .modal-backdrop { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); animation: fadein .15s ease; } @keyframes fadein { from { opacity: 0; } } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lift); padding: 1.1rem 1.25rem; width: min(28rem, calc(100vw - 2rem)); animation: rise .28s var(--ease-spring); } .modal h4 { margin: 0 0 .5rem; font-size: 1rem; letter-spacing: -.01em; } .modal.modal-wide { width: min(34rem, calc(100vw - 2rem)); } /* key/value rows inside a strategy-detail dialog */ .spec-detail .drow { display: flex; justify-content: space-between; gap: 1.2rem; padding: .3rem 0; border-bottom: 1px solid var(--grid); font-size: .88rem; } .spec-detail .drow:last-child { border-bottom: 0; } .spec-detail .drow span:first-child { color: var(--muted); flex-shrink: 0; } .spec-detail .drow span:last-child { text-align: right; color: var(--ink); } .modal .detail-desc { color: var(--ink-2); font-size: .85rem; margin: .7rem 0 0; } .modal-input { width: 100%; font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .7rem; outline: none; margin-bottom: .9rem; } .modal-input:focus { border-color: var(--accent); } .modal-body { color: var(--ink-2); font-size: .9rem; margin-bottom: .9rem; } .modal-actions { display: flex; justify-content: flex-end; gap: .55rem; } .btn.danger { background: var(--bad); } .btn.danger:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(208,59,59,.35); } /* the tutorial button carries a plain-words label so first-timers know what the ? is for; it collapses to a plain ? on first click or after a few seconds (JS adds .collapsed), and yields entirely on narrow screens */ .tut-btn { width: auto; padding: 0 .7rem; gap: .45rem; display: inline-flex; align-items: center; font-size: .8rem; } .tut-btn-label { font-weight: 600; white-space: nowrap; max-width: 14rem; overflow: hidden; transition: max-width .5s var(--ease-spring), opacity .25s ease; } .tut-btn.collapsed { gap: 0; } .tut-btn.collapsed .tut-btn-label { max-width: 0; opacity: 0; } @media (max-width: 768px) { .tut-btn-label { display: none; } } /* ---- candlestick tutorial (Build tab ? tool) ---- A stepper modal that reuses the landing scroll-movie's caption + canvas language, paced by buttons instead of scroll. */ .modal-backdrop[hidden] { display: none; } .candle-tut-modal { position: relative; width: min(40rem, calc(100vw - 2rem)); padding: 1.1rem 1.25rem .95rem; } .candle-tut-x { position: absolute; top: .6rem; right: .6rem; } .candle-tut-cap { min-height: 2.3em; display: flex; align-items: center; padding-right: 2.2rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; } #ct-cap { transition: opacity .25s ease, transform .25s ease; } #ct-cap.out { opacity: 0; transform: translateY(8px); } .candle-tut-canvas-wrap { position: relative; height: clamp(170px, 34vh, 250px); margin: .45rem 0 .55rem; } #ct-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .candle-tut-body { color: var(--ink-2); font-size: .9rem; line-height: 1.55; margin: 0 0 .85rem; min-height: 4.7em; } .candle-tut-body b { color: var(--ink); font-weight: 650; } .candle-tut-nav { display: flex; align-items: center; justify-content: center; gap: .85rem; } .candle-tut-dots { display: flex; gap: .45rem; } .candle-tut-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--baseline); transition: background .15s ease, transform .2s var(--ease-spring); } .candle-tut-dots button:hover { background: var(--muted); } .candle-tut-dots button.on { background: var(--accent); transform: scale(1.3); } .skel { display: block; height: .95rem; border-radius: 6px; width: 100%; background: linear-gradient(90deg, var(--surface-2) 25%, var(--grid) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } .skel-row td { padding: .55rem 1rem; } tbody tr.skel-row:hover td { background: transparent; } .retry-btn { margin-left: .5rem; } /* ---- order ticket: colored side toggle + receipt ---- */ .seg button.side-buy.active { background: color-mix(in srgb, var(--good) 16%, var(--surface)); color: var(--good-text); } .seg button.side-sell.active { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); color: var(--bad); } .qty-row .qty-box { text-align: center; } .order-preview { margin-top: .7rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: .65rem .85rem; font-size: .85rem; } .order-preview .drow { display: flex; justify-content: space-between; gap: .8rem; padding: .16rem 0; } .order-preview .drow span:first-child { color: var(--muted); } .receipt { margin-top: .7rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: .6rem .85rem; font-size: .85rem; animation: rise .35s var(--ease-spring); } .receipt-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; } .receipt-row { display: flex; justify-content: space-between; gap: 1rem; padding: .1rem 0; color: var(--ink-2); } .receipt-row span:first-child { color: var(--muted); font-size: .8rem; } .receipt-actions:not(:empty) { display: flex; justify-content: flex-end; margin-top: .55rem; } /* a working (non-terminal) order breathes until it fills or cancels */ .receipt .status-pill.warn .dot { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .35; } } .billing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: .9rem; } .billing-current, #auth-session { display: grid; grid-template-columns: 1.4fr .8fr; gap: 1rem; align-items: center; } .billing-hero-copy h3, .account-hero-copy h3 { margin: .35rem 0 .4rem; font-size: 1.55rem; line-height: 1.15; text-transform: none; letter-spacing: 0; color: var(--ink); } .billing-hero-copy p, .account-hero-copy p { margin: 0; color: var(--ink-2); max-width: 45rem; } .billing-hero-meter, .account-panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: .85rem; } .billing-plan { margin-bottom: 0; } .billing-plan.featured { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: var(--glow); } .plan-tag { display: inline-flex; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: .18rem .55rem; font-size: .72rem; font-weight: 750; margin-bottom: .45rem; } .plan-price { font-size: 1.4rem; font-weight: 750; margin: .25rem 0 .5rem; } .plan-cost { margin: 0 0 .65rem; color: var(--muted); font-size: .8rem; } .billing-plan ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .9rem; } .usage-list { display: grid; gap: .6rem; } .usage-row { display: grid; grid-template-columns: 1fr auto; gap: .45rem .8rem; align-items: center; font-size: .9rem; } .usage-track { grid-column: 1 / -1; height: .45rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .usage-track span { display: block; height: 100%; background: var(--accent); } .auth-actions { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .85rem; } @media (max-width: 900px) { .billing-grid, .billing-current, #auth-session { grid-template-columns: 1fr; } } /* one switch kills every workbench animation; the landing's .reveal rules live in the shared-with-landing block near the top of this file */ @media (prefers-reduced-motion: reduce) { .skel { animation: none; } .ui-toast, .modal, .modal-backdrop { animation: none; transition: none; } #ct-cap, .candle-tut-dots button, .tut-btn-label { transition: none; } .ring-fill, .bb-bar { transition: none; } .reveal-toggle.attn, .tool-btn.pulse-glow { animation: none; } .fit-callout { animation: none; } .view-in, .metrics-in .tile, .card-in, #cmp-stats-card, .tabs button.active::after, .opt-spot.flash, .receipt .status-pill.warn .dot, .banner.show, #confirm.show, .parse-error.show, .receipt { animation: none; } .tile, .ask, .chip, .bench, .btn, .tool-btn, .theme-toggle, .saved-row, .reveal-toggle { transition: none; } .reveal-toggle:hover { transform: none; } .tile:hover, .btn:hover:not(:disabled), .btn.primary:hover:not(:disabled), .chip:hover, .bench.on, .theme-toggle:hover, .tool-btn:hover, .btn:active:not(:disabled) { transform: none; } }