:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
small { display: block; opacity: .68; margin-top: 3px; }
.app-layout { min-height: 100vh; }
.app-sider { background: color-mix(in srgb, var(--ant-color-bg-container) 92%, transparent) !important; border-right: 1px solid var(--ant-color-border-secondary); position: sticky !important; top: 0; height: 100vh; }
.app-sider .ant-menu { background: transparent; border-inline-end: 0 !important; padding: 8px; }
.app-sider .ant-menu-item { margin-block: 7px; }
.logo { height: 82px; display: flex; align-items: center; gap: 11px; padding: 14px 18px; overflow: hidden; white-space: nowrap; }
.logo b, .public-brand b { font-size: 16px; letter-spacing: -.02em; }
.logo small, .public-brand small { color: var(--ant-color-text-secondary); }
.brand-mark { width: 38px; min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-size: 18px; background: linear-gradient(145deg, var(--ant-color-primary), color-mix(in srgb, var(--ant-color-primary) 65%, #7cb5d8)); box-shadow: 0 8px 22px color-mix(in srgb, var(--ant-color-primary) 22%, transparent); }
.app-header { height: 66px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: color-mix(in srgb, var(--ant-color-bg-container) 88%, transparent); border-bottom: 1px solid var(--ant-color-border-secondary); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.app-content { width: min(1480px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 64px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-head h1 { margin: 5px 0 4px !important; letter-spacing: -.04em; }
.eyebrow { color: var(--ant-color-primary); font-size: 11px; letter-spacing: .16em; font-weight: 800; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric-card { min-height: 132px; background: linear-gradient(145deg, color-mix(in srgb, var(--ant-color-bg-container) 94%, var(--ant-color-primary)), var(--ant-color-bg-container)); box-shadow: 0 12px 34px rgba(50, 80, 70, .07); }
.metric-card .ant-statistic-content { font-size: clamp(20px, 2vw, 28px); letter-spacing: -.035em; }
.soft-card { margin-top: 16px; box-shadow: 0 14px 38px rgba(45, 75, 65, .06); }
.positive { color: #3b9875; font-weight: 650; }
.negative { color: #ca626d; font-weight: 650; }
.logic-copy { font-size: 15px; line-height: 1.9; max-width: 900px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-form { margin-top: 18px; }
.settings-form .ant-input-number, .account-grid .ant-input-number { width: 100%; }
.account-grid { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(520px, 1.4fr); gap: 16px; margin-top: 16px; }
.svg-chart { position: relative; width: 100%; padding: 36px 8px 28px; }
.svg-chart svg { width: 100%; height: calc(100% - 42px); overflow: visible; }
.grid-line { stroke: var(--ant-color-border-secondary); stroke-width: .5; }
.chart-legend { position: absolute; top: 5px; left: 8px; display: flex; gap: 18px; font-size: 12px; color: var(--ant-color-text-secondary); }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i, .donut-legend i { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.chart-axis { position: absolute; bottom: 2px; left: 8px; right: 8px; display: flex; justify-content: space-between; color: var(--ant-color-text-secondary); font-size: 11px; }
.bar-chart { position: relative; height: 330px; padding: 42px 8px 30px; }
.bars { height: 240px; display: flex; align-items: center; gap: clamp(3px, .7vw, 10px); border-bottom: 1px solid var(--ant-color-border-secondary); }
.bar-slot { flex: 1; height: 46%; min-width: 5px; display: flex; align-items: flex-end; justify-content: center; }
.bar { width: min(18px, 78%); border-radius: 5px 5px 2px 2px; min-height: 3px; }
.bar-up { background: #68b99c; } .bar-down { background: #df7c86; transform: translateY(100%); }
.donut-wrap { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.25fr); align-items: center; gap: 34px; }
.donut { width: min(310px, 76vw); aspect-ratio: 1; border-radius: 50%; margin: auto; display: grid; place-items: center; }
.donut > div { width: 48%; aspect-ratio: 1; border-radius: 50%; background: var(--ant-color-bg-container); display: grid; place-content: center; text-align: center; box-shadow: inset 0 0 0 1px var(--ant-color-border-secondary); }
.donut > div b { font-size: 30px; }
.donut-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.donut-legend > div { display: grid; grid-template-columns: 12px 1fr auto; gap: 7px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ant-color-border-secondary); }
.donut-legend small { grid-column: 2 / 4; margin: 0; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; background: linear-gradient(145deg, #eff9f4, #f5f9fc 52%, #fff8f0); }
.login-panel { width: min(430px, 100%); padding: 16px; box-shadow: 0 30px 90px rgba(69, 104, 92, .17); position: relative; z-index: 2; }
.login-panel .brand-mark { margin-bottom: 20px; }
.login-orb { position: absolute; border-radius: 999px; filter: blur(2px); opacity: .7; }
.orb-one { width: 420px; height: 420px; left: -150px; top: -130px; background: #d8f1e4; }
.orb-two { width: 360px; height: 360px; right: -110px; bottom: -130px; background: #e4eff9; }
.center-page { width: min(900px, 90vw); margin: 20vh auto; }
.public-page { min-height: 100vh; padding: 28px; background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--ant-color-primary) 13%, transparent), transparent 34%), var(--ant-color-bg-layout); }
.public-brand { width: min(1100px, 100%); margin: 0 auto 20px; display: flex; align-items: center; gap: 11px; }
.public-card { width: min(1100px, 100%); margin: auto; box-shadow: 0 24px 70px rgba(48, 78, 68, .10); }
.code-box { background: var(--ant-color-fill-quaternary, #1a222d); border: 1px solid var(--ant-color-border-secondary); padding: 14px 18px; border-radius: 10px; overflow: auto; max-height: 520px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre; }
.backtest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.inline-form { display: flex; gap: 8px; align-items: center; }
@media (max-width: 1050px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.form-grid { grid-template-columns: repeat(2,1fr); }.account-grid { grid-template-columns: 1fr; }.backtest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .app-sider { position: fixed !important; z-index: 40; } .app-layout > .ant-layout { margin-left: 80px; } .app-header { padding: 0 12px; } .app-content { width: calc(100% - 20px); padding-top: 20px; } .page-head { flex-direction: column; } .metric-grid,.form-grid,.form-grid.two,.backtest-grid { grid-template-columns: 1fr; } .public-page { padding: 14px; } .donut-wrap { grid-template-columns: 1fr; }.donut-legend { grid-template-columns: 1fr; } }