.hero { padding-block: 64px 40px; }
h1,h2,h3,p { margin:0; font-weight:400; }
.hero h1 { font-size:clamp(48px,5.8vw,80px); line-height:1.05; letter-spacing:-.045em; }
.hero-description { font-size:26px; line-height:1.4; margin-top:20px; color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:20px; top:-100px; z-index:300; padding:14px 20px; border-radius:12px; background:white; }
.skip-link:focus { top:16px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:12px 20px; border-radius:30px; font-size:15px; line-height:24px; white-space:nowrap; }
.button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }
.button > span:last-child { font-size:22px; line-height:20px; }
.primary { background:#ff403f; color:white; }
.primary:hover { background:#e62a2d; }
.primary:active { background:#ce2025; }
.secondary { background:#edf0f2; color:#181818; }
.secondary:hover { background:#e2e6e9; }
.light { background:#fff; color:#161616; }
.light:hover { background:#e6e9ec; }
.quiet { background:transparent; }
.quiet:hover { background:#e7eaed; }
.danger { color:#b62331; padding-inline:0; }
.destructive { color:white; background:#b62331; }
.destructive:hover { background:#901323; }
.text-link { display:inline-flex; align-items:center; gap:12px; padding:4px 0; line-height:1.5; font-size:14px; text-decoration:underline; text-decoration-color:#a2abb4; text-underline-offset:5px; }
.text-link:hover { color:#c9272f; }
.text-link span { text-decoration:none; font-size:18px; }
svg { flex-shrink:0; }
.quick-guide { padding:0 0 24px; }
summary { list-style:none; cursor:pointer; }
summary::-webkit-details-marker { display:none; }
.quick-guide > summary { display:inline-flex; gap:16px; align-items:center; min-height:44px; font-size:16px; color:var(--ink); }
.quick-guide > summary > svg { height:18px; width:18px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform 180ms; }
.quick-guide[open] > summary > svg { transform:rotate(180deg); }
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:24px 0; }
.guide-grid h2 { font-size:20px; margin-bottom:12px; }
.guide-grid p { color:var(--muted); font-size:15px; line-height:1.65; }
.workspace-bar { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-bottom:16px; }
.save-state { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--muted); font-size:14px; }
.save-state > svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.save-state .text-link { margin-left:12px; font-size:13px; }
.workspace-actions { display:flex; align-items:center; gap:4px; }
.workspace-actions .button { font-size:14px; padding-inline:16px; }
.data-menu { position:relative; }
.data-menu-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:10; padding:8px; border-radius:20px; background:#fff; box-shadow:0 16px 60px #10182024; width:260px; }
.data-menu-panel a,.data-menu-panel button { display:block; width:100%; text-align:left; border-radius:12px; padding:12px; font-size:14px; line-height:1.4; }
.data-menu-panel a:hover,.data-menu-panel button:hover { background:#f0f2f4; }
.demo-banner,.backup-reminder { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:16px 24px; background:#e4e9ee; border-radius:16px; margin-bottom:16px; font-size:14px; line-height:1.5; }
.demo-banner strong { font-weight:500; margin-right:8px; }
.demo-banner .button { min-height:40px; padding:8px 0; }
.backup-reminder { background:#f4e9d7; color:#594423; }
.overview { background:#161616; color:#f6f7f8; border-radius:32px; padding:32px 40px 28px; color-scheme:dark; }
.overview-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:32px; }
.overview h2 { font-size:22px; letter-spacing:-.025em; }
.overview-filters { display:flex; gap:16px; }
.select-label { display:flex; gap:12px; align-items:center; color:#b9bbc0; font-size:14px; }
.select-wrap { position:relative; display:inline-flex; align-items:center; min-width:0; }
.select-wrap > svg { position:absolute; right:14px; width:16px; height:16px; pointer-events:none; fill:none; stroke:currentColor; stroke-width:1.5; }
select { appearance:none; -webkit-appearance:none; border:0; padding:12px 40px 12px 16px; min-height:44px; border-radius:12px; background:#2a2a2c; color:#f5f6f7; cursor:pointer; font:inherit; }
select:hover { background:#343437; }
.performance-grid { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:64px; }
.metric-label { color:#b2b5bc; font-size:14px; line-height:1.5; display:flex; align-items:center; gap:8px; }
.help { display:inline-grid; place-items:center; border-radius:50%; width:18px; height:18px; font-size:11px; line-height:1; background:#343438; color:#d6d7dc; }
.help:hover { background:#53535a; color:white; }
.net-total { font-size:clamp(40px,5vw,68px); letter-spacing:-.045em; line-height:1.15; margin-top:12px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.positive { color:#68dfa6; }
.negative { color:#ff9298; }
.total-caption { font-size:14px; line-height:1.5; color:#afb2ba; margin-top:8px; }
.chart-wrap { position:relative; margin-top:20px; min-height:230px; }
#pnl-chart { width:100%; height:auto; display:block; overflow:visible; }
.chart-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.chart-empty > p { font-size:24px; letter-spacing:-.025em; }
.chart-empty > span { margin-top:10px; font-size:14px; color:#b0b3bb; }
.chart-empty > div { display:flex; gap:24px; align-items:center; margin-top:24px; }
.chart-empty .text-link { color:#e2e5e9; }
.chart-empty .text-link:hover { color:#ff9298; }
.chart-tooltip { position:absolute; top:8px; left:16px; z-index:1; pointer-events:none; background:#38383c; color:#fff; padding:12px 16px; font-size:13px; line-height:1.7; border-radius:12px; box-shadow:0 8px 24px #0004; }
.chart-footer { display:flex; justify-content:space-between; gap:16px; color:#aeb1ba; font-size:12px; line-height:1.5; margin-top:8px; }
.key-metrics { display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding-bottom:4px; }
.metric > p:nth-child(2) { font-size:36px; line-height:1.15; letter-spacing:-.035em; margin:12px 0 8px; font-variant-numeric:tabular-nums; }
.metric > span { font-size:12px; color:#b0b3bc; line-height:1.5; display:block; }
.win-rate-track { height:4px; margin-top:16px; border-radius:4px; background:#39393d; overflow:hidden; }
.win-rate-track i { display:block; height:100%; width:0; background:#68dfa6;  }
.date-range { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:-8px 0 32px; color:#b2b5bc; font-size:14px; }
.date-range label { display:flex; align-items:center; gap:12px; }
.date-range input { width:160px; border:0; border-radius:10px; padding:10px; color:white; background:#2a2a2c; }
.date-range p { color:#ffb1b6; font-size:13px; }
.trade-log { margin-top:24px; border-radius:32px; background:white; padding:32px 40px 24px; }
.log-heading { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.log-heading h2 { font-size:28px; line-height:1.25; letter-spacing:-.03em; }
.log-heading h2 > span { color:#74808b; font-size:20px; margin-left:8px; }
.log-heading p { font-size:14px; line-height:1.5; color:var(--muted); margin-top:8px; }
.log-filters { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:28px; }
.search { display:flex; align-items:center; gap:12px; background:#f2f4f6; border-radius:14px; padding:0 16px; width:min(400px,100%); }
.search svg { width:18px; height:18px; fill:none; stroke:#5b6570; stroke-width:1.5; }
.search input { background:none; border:0; outline-offset:2px; font-size:14px; color:#181818; padding:14px 0; width:100%; min-width:0; }
.search:focus-within { outline:2px solid #5b6570; outline-offset:2px; }
.search input:focus-visible { outline:none; }
.outcome-tabs { display:flex; gap:4px; }
.outcome-tabs button { font-size:13px; padding:10px 14px; border-radius:24px; min-height:40px; color:#5b6570; white-space:nowrap; }
.outcome-tabs button:hover { background:#edf0f3; }
.outcome-tabs button[aria-pressed=true] { color:#fff; background:#242426; }
.filter-scope { color:#697480; font-size:12px; margin-block:16px 4px; line-height:1.6; }
.table-scroll { overflow-x:auto; overscroll-behavior-inline:contain; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; line-height:1.5; }
th { font-weight:400; color:#65717e; font-size:12px; padding:18px 12px; white-space:nowrap; }
td { padding:18px 12px; vertical-align:middle; border-top:1px solid #f0f2f4; max-width:240px; }
th:first-child,td:first-child { padding-left:0; }
th:last-child,td:last-child { padding-right:0; width:32px; }
tr:hover td { background:#fafbfc; }
td.numeric { font-variant-numeric:tabular-nums; white-space:nowrap; }
.numeric { text-align:right; }
.trade-symbol { font-size:15px; text-align:left; font-weight:500; padding:6px 0; display:block; max-width:100%; overflow-wrap:anywhere; }
.trade-symbol:hover { color:#ce2025; }
.row-note { color:#75808b; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; font-size:12px; }
.net-positive { color:#168152; }
.net-negative { color:#b72e3e; }
.table-open { font-size:20px; width:32px; height:36px; border-radius:12px; color:#73808c; }
.table-open:hover { background:#e9edf0; color:#181818; }
.log-empty { padding:52px 20px; text-align:center; }
.log-empty h3 { font-size:24px; letter-spacing:-.025em; }
.log-empty p { font-size:14px; color:var(--muted); margin:12px 0 16px; line-height:1.6; }
.pagination { display:flex; justify-content:space-between; align-items:center; padding-top:16px; color:var(--muted); font-size:13px; }
.pagination > div { display:flex; gap:8px; }
.icon-button { width:40px; height:40px; display:inline-grid; place-items:center; border-radius:50%; font-size:26px; line-height:1; flex-shrink:0; }
.icon-button:hover { background:#edf0f2; }
.review-panel { display:grid; grid-template-columns:1fr 1fr; gap:80px; background:white; border-radius:32px; margin-top:24px; padding:40px; }
.review-panel h2 { font-size:24px; letter-spacing:-.03em; }
.trade-details dl { display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; margin:32px 0 0; }
.trade-details dt { font-size:13px; line-height:1.5; color:#64707c; display:flex; align-items:center; gap:8px; }
.trade-details dd { margin:8px 0 0; font-size:26px; letter-spacing:-.025em; overflow-wrap:anywhere; }
.trade-details .help { color:#56616d; background:#edf0f2; flex-shrink:0; }
.setup-review > p { font-size:13px; line-height:1.6; color:var(--muted); margin-top:12px; }
.setup-row { margin-top:24px; }
.setup-row > div:first-child { display:flex; justify-content:space-between; gap:12px; font-size:14px; }
.setup-row .setup-name { overflow-wrap:anywhere; max-width:65%; }
.setup-row .setup-value { font-variant-numeric:tabular-nums; white-space:nowrap; }
.setup-row small { display:block; color:#75808b; font-size:12px; margin-top:6px; }
.setup-bar { height:4px; background:#eef1f3; margin-top:10px; border-radius:4px; }
.setup-bar i { display:block; height:100%; border-radius:4px; background:#188258; }
.setup-bar .bar-negative { background:#ba3a46; }
.analytics-note { font-size:12px; line-height:1.7; color:var(--muted); margin:20px 0 0; max-width:850px; }
.explain-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-block:112px; }
.section-intro h2 { font-size:48px; line-height:1.1; letter-spacing:-.04em; }
.section-intro > p { color:var(--muted); font-size:18px; line-height:1.65; margin-top:24px; max-width:440px; }
.section-intro > a { margin-top:24px; max-width:430px; }
.explain-list { display:grid; gap:32px; }
.explain-list h3 { font-size:22px; letter-spacing:-.02em; }
.explain-list p { margin-top:12px; font-size:16px; line-height:1.7; color:var(--muted); }
.faq-section { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; }
.faq-section > h2 { font-size:40px; line-height:1.15; letter-spacing:-.04em; }
.faq-list details { padding:24px 0; border-bottom:1px solid #d9dee3; }
.faq-list details:first-child { padding-top:0; }
.faq-list summary { display:flex; justify-content:space-between; gap:32px; font-size:20px; line-height:1.4; }
.faq-list summary > span { font-size:28px; font-weight:400; color:#65717c; transition:transform 180ms; }
.faq-list details[open] summary > span { transform:rotate(45deg); }
.faq-list details > p { font-size:16px; line-height:1.75; color:var(--muted); padding-top:16px; }
.about-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; background:white; padding:40px; border-radius:32px; margin-top:96px; }
.about-section h2 { font-size:32px; letter-spacing:-.035em; }
.about-section h3 { font-size:20px; }
.about-section p { margin-top:16px; color:var(--muted); font-size:15px; line-height:1.7; }
.about-section .updated { font-size:13px; margin-top:24px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:32px; padding-block:48px; color:var(--muted); font-size:13px; }
.site-footer div { display:flex; gap:24px; }
.site-footer img { width:126px; height:auto; display:block; }
.modal { color:#181818; background:#fff; border:0; border-radius:28px; margin:auto; padding:0; max-width:calc(100% - 32px); max-height:calc(100dvh - 48px); box-shadow:0 24px 100px #0003; overflow:auto; overscroll-behavior:contain; }
.modal::backdrop { background:#10131780; }
html:has(.modal[open]) { overflow:hidden; }
.trade-dialog { width:620px; }
.info-dialog { width:500px; }
.import-dialog { width:580px; }
.modal-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:28px 32px 20px; }
.modal-heading h2 { font-size:28px; line-height:1.25; letter-spacing:-.03em; padding-top:4px; }
.modal-heading p { font-size:14px; color:var(--muted); line-height:1.5; margin-top:8px; }
.form-body { padding:8px 32px 24px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.form-grid > label { display:flex; flex-direction:column; gap:10px; font-size:14px; line-height:1.5; min-width:0; }
.form-grid input,.form-grid select,.form-grid textarea { width:100%; border:0; background:#f1f3f5; color:#181818; padding:14px 16px; border-radius:12px; min-height:48px; font-size:16px; line-height:1.4; font-weight:400; }
.form-grid input:focus-visible,.form-grid select:focus-visible,.form-grid textarea:focus-visible { outline:2px solid #596877; outline-offset:2px; }
input::selection,textarea::selection { background:#b8d8f8; color:#101820; }
.form-grid select { padding-right:40px; }
.form-grid textarea { resize:vertical; min-height:88px; max-height:240px; }
.form-grid .optional { font-size:12px; color:#74808b; font-weight:400; display:inline; margin-left:8px; }
.full-width { grid-column:1/-1; }
.field-help { color:#63707c; font-size:12px; line-height:1.6; font-weight:400; }
.direction-field { padding:0; margin:0; border:0; min-width:0; }
.direction-field legend { font-size:14px; margin-bottom:10px; padding:0; line-height:1.5; }
.segmented { display:flex; padding:4px; border-radius:12px; background:#f1f3f5; min-height:50px; }
.segmented label { position:relative; flex:1; display:flex; }
.segmented input { position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; min-height:0; width:100%; height:100%; }
.segmented span { display:flex; align-items:center; justify-content:center; width:100%; border-radius:9px; font-size:13px; }
.segmented input:checked + span { background:#fff; box-shadow:0 2px 6px #14202a0a; }
.segmented input:focus-visible + span { outline:2px solid #596877; outline-offset:2px; }
.form-result { background:#f3f5f6; border-radius:12px; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:16px; margin-top:24px; font-size:14px; }
.form-result output { font-size:22px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.form-error { background:#fff0f1; color:#9e2334; padding:12px 16px; margin-top:16px; font-size:14px; line-height:1.6; border-radius:12px; }
.modal-footer { display:flex; gap:16px; align-items:center; justify-content:flex-end; position:sticky; bottom:0; padding:20px 32px; background:#fff; box-shadow:0 -12px 24px #fff9; }
.form-save-label { font-size:12px; color:#6d7781; margin-right:auto; }
.modal-footer:has(.danger:not([hidden])) .form-save-label { display:none; }
.modal-footer .danger { margin-right:auto; }
.info-dialog .form-body p,.info-dialog .form-body li,.import-dialog .form-body p { font-size:15px; line-height:1.7; color:var(--muted); }
.info-dialog .form-body p + p { margin-top:16px; }
.info-dialog .form-body ul { padding-left:20px; margin-block:16px 0; }
.info-dialog .form-body li { margin-top:8px; }
.notice { padding:20px 24px; border-radius:16px; background:#fff; font-size:14px; line-height:1.7; margin-bottom:20px; }
.error-notice { color:#922438; background:#ffe9ec; }
.file-picker { display:flex; flex-direction:column; gap:12px; font-size:14px; margin-top:24px; }
.file-picker input { width:100%; padding:12px; background:#f0f3f5; border-radius:12px; font-size:14px; }
.file-picker input::file-selector-button { border:0; border-radius:20px; background:white; padding:8px 14px; margin-right:12px; color:#181818; cursor:pointer; }
.import-dialog .form-body .field-help { font-size:12px; margin-top:12px; }
#import-instructions .text-link { margin-top:12px; }
#import-preview { margin-top:24px; }
#import-preview h3 { font-size:22px; }
#import-preview-caption { margin-top:8px; }
.preview-row { display:flex; justify-content:space-between; gap:20px; font-size:13px; line-height:1.5; padding:12px 0; border-bottom:1px solid #edf0f3; }
.preview-row small { color:#6d7781; display:block; margin-top:4px; }
.toast { position:fixed; z-index:400; bottom:24px; left:50%; transform:translateX(-50%); color:white; background:#292c30; padding:14px 24px; border-radius:16px; font-size:14px; max-width:calc(100% - 32px); width:max-content; box-shadow:0 8px 40px #0003; line-height:1.5; }
.modal-heading { position:sticky; top:0; background:white; z-index:2; }
.workspace-actions .top-add { padding-inline:20px; margin-right:8px; }
@media (min-width:1600px) { .performance-grid { grid-template-columns:minmax(0,1fr) 240px; gap:88px; } }
@media (max-width:1199px) { :root { --page-gutter:48px; } .overview,.trade-log { padding-inline:32px; } .performance-grid { gap:40px; grid-template-columns:minmax(0,1fr) 190px; } .workspace-bar { flex-wrap:wrap; gap:8px; } .workspace-actions { margin-left:auto; } .log-filters { flex-wrap:wrap; gap:16px; } .search { width:100%; flex:1; min-width:220px; } .outcome-tabs { margin-left:auto; } .review-panel { gap:40px; padding:32px; } .explain-section,.faq-section { gap:48px; } .section-intro h2 { font-size:42px; } }
@media (max-width:1023px) { :root { --header-height:110px; --page-gutter:32px; } .header-container { padding:16px 32px 20px; } .primary-nav,.header-actions { display:none; } .header-bar { justify-content:space-between; } .header-burger { display:flex; } .solutions-nav { display:none; } .hero { padding-top:48px; } .hero h1 { font-size:64px; } .workspace-actions { margin-left:0; } .workspace-bar { gap:8px 24px; } .save-state .text-link { margin-left:8px; } .overview { padding:28px; } .performance-grid { gap:32px; grid-template-columns:minmax(0,1fr) 156px; } .net-total { font-size:46px; } .key-metrics .metric > p:nth-child(2) { font-size:32px; } .chart-wrap { min-height:210px; } #pnl-chart { height:210px; } .chart-empty > div { flex-direction:column; gap:12px; margin-top:20px; } .chart-empty > p { font-size:21px; } .chart-footer { font-size:11px; } .metric > span { font-size:11px; } .review-panel { grid-template-columns:1fr 1fr; gap:32px; } .trade-details dl { grid-template-columns:1fr; gap:24px; } .explain-section { margin-block:80px; } .about-section { gap:40px; padding:32px; } .site-footer { flex-wrap:wrap; } }
@media (max-width:767px) { :root { --page-gutter:20px; } .header-container { padding:12px 20px 16px; } .hero { padding:40px 0 28px; } .hero h1 { font-size:50px; } .hero-description { font-size:21px; margin-top:16px; max-width:310px; } .quick-guide { padding-bottom:16px; } .quick-guide summary { font-size:14px; } .guide-grid { grid-template-columns:1fr; gap:24px; padding-top:16px; } .workspace-bar { padding-bottom:16px; } .save-state { gap:6px; font-size:12px; } .save-state .text-link { font-size:12px; margin-left:6px; } .workspace-actions { gap:4px; width:100%; justify-content:space-between; } .workspace-actions .button { font-size:12px; min-height:40px; padding:8px 4px; gap:8px; } .workspace-actions .button svg { width:16px; height:16px; } .data-menu-panel { width:245px; } .overview { border-radius:24px; padding:24px 20px; } .overview-top { align-items:flex-start; gap:16px; flex-direction:column; margin-bottom:24px; } .overview h2 { font-size:22px; } .overview-filters { gap:12px; width:100%; justify-content:space-between; } .select-label { font-size:12px; gap:8px; } .select-wrap select { padding:10px 32px 10px 12px; font-size:13px; min-height:40px; } .select-wrap > svg { right:10px; } .performance-grid { grid-template-columns:1fr; gap:28px; } .net-total { font-size:48px; } .metric-label { font-size:12px; } .total-caption { font-size:12px; } .chart-wrap { min-height:216px; margin-top:16px; } #pnl-chart { height:auto; aspect-ratio:1.5; } .chart-empty > div { flex-direction:row; gap:16px; } .chart-empty > p { font-size:21px; } .chart-empty > span { font-size:12px; } .chart-empty .button { min-height:44px; padding:10px 16px; font-size:13px; } .chart-empty .text-link { font-size:12px; gap:8px; } .chart-footer { font-size:11px; } .key-metrics { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; padding-top:24px; border-top:1px solid #333336; } .key-metrics .metric > p:nth-child(2) { font-size:28px; margin-top:12px; } .metric .help { width:16px; height:16px; font-size:10px; } .metric > span { font-size:10px; line-height:1.6; } .win-rate-track { margin-top:12px; height:3px; } .trade-log { border-radius:24px; padding:24px 20px 16px; margin-top:16px; } .log-heading { gap:16px; align-items:start; } .log-heading h2 { font-size:24px; } .log-heading h2 > span { font-size:16px; } .log-heading p { font-size:12px; max-width:155px; } .log-heading .button { font-size:13px; padding:10px 16px; min-height:44px; gap:8px; } .log-filters { margin-top:24px; gap:12px; } .search { flex:auto; min-width:0; } .search input { font-size:12px; } .outcome-tabs { margin-left:0; gap:2px; } .outcome-tabs button { padding:8px 12px; font-size:12px; min-height:36px; } .filter-scope { font-size:11px; margin-top:12px; } table { min-width:660px; font-size:13px; } th { font-size:11px; } td { padding-block:14px; } .trade-symbol { font-size:14px; } .table-scroll { margin-right:-20px; padding-right:20px; } .log-empty { padding:40px 0; } .log-empty h3 { font-size:22px; } .log-empty p { font-size:13px; } .review-panel { border-radius:24px; padding:24px 20px; grid-template-columns:1fr; margin-top:16px; gap:40px; } .review-panel h2 { font-size:24px; } .trade-details dl { grid-template-columns:1fr 1fr; gap:24px 20px; margin-top:24px; } .trade-details dd { font-size:24px; } .trade-details dt { font-size:12px; } .analytics-note { font-size:11px; } .demo-banner,.backup-reminder { padding:16px; flex-wrap:wrap; gap:8px; font-size:12px; } .demo-banner .button { font-size:12px; } .explain-section { grid-template-columns:1fr; gap:40px; margin-block:64px; } .section-intro h2 { font-size:38px; } .section-intro > p { font-size:16px; } .section-intro > a { font-size:13px; } .explain-list h3 { font-size:21px; } .explain-list p { font-size:14px; } .faq-section { grid-template-columns:1fr; gap:32px; } .faq-section > h2 { font-size:36px; } .faq-list summary { font-size:18px; gap:24px; } .faq-list details > p { font-size:14px; } .about-section { grid-template-columns:1fr; border-radius:24px; padding:28px 24px; gap:32px; margin-top:64px; } .about-section h2 { font-size:28px; } .about-section p { font-size:14px; } .site-footer { gap:24px; padding-block:32px; font-size:12px; } .site-footer > div { width:100%; gap:24px; } .modal { max-height:calc(100dvh - 24px); max-width:calc(100% - 16px); border-radius:24px; } .modal-heading { padding:20px 20px 16px; gap:16px; } .modal-heading h2 { font-size:26px; } .modal-heading p { font-size:12px; } .form-body { padding:8px 20px 20px; } .form-grid { gap:20px 16px; } .form-grid > label { font-size:12px; gap:8px; } .form-grid input,.form-grid select,.form-grid textarea { font-size:16px; padding:12px; } .form-grid > label:first-child { grid-column:1/-1; } .direction-field legend { font-size:12px; margin-bottom:8px; } .direction-field { grid-column:1/-1; } .form-grid > label:has(select) { grid-column:2; grid-row:2; } .form-grid > label:has([name=gross_pnl]),.form-grid > label:has([name=fees]) { grid-column:1/-1; } .modal-footer { padding:16px 20px; gap:12px; } .modal-footer .button { padding:10px 16px; font-size:13px; min-height:44px; } .form-save-label { font-size:11px; } .form-result { padding:14px; font-size:12px; } .date-range { gap:12px; } .date-range input { width:140px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }
@media (max-width:767px) {
  .workspace-actions { flex-wrap:wrap; column-gap:12px; }
  .workspace-actions .top-add { padding:8px 16px; margin-right:auto; }
  .workspace-actions #backup-button { order:3; width:100%; justify-content:flex-start; padding-top:12px; }
  .workspace-actions #backup-button:disabled { display:none; }
  table { min-width:0; table-layout:fixed; }
  th:nth-child(3),th:nth-child(4),th:nth-child(5),th:last-child,td:nth-child(3),td:nth-child(4),td:nth-child(5),td:last-child { display:none; }
  th:first-child { width:29%; }
  th:nth-child(2) { width:36%; }
  th:nth-child(6) { width:35%; }
  td,th { padding-inline:6px; }
  td:first-child { font-size:11px; }
  td.numeric { font-size:12px; padding-right:0; }
  .row-note { max-width:100%; font-size:10px; }
  .trade-symbol { font-size:12px; }
  .table-scroll { margin:0; padding:0; }
  .form-grid .optional { margin-left:4px; font-size:11px; }
}