:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  color: #F5F7FB;
  background: #05070D;
  --bg: #05070D;
  --surface: #0B1020;
  --panel: #111827;
  --border: #1B2940;
  --border-strong: #2B3E5C;
  --primary: #1677FF;
  --primary-hover: #29B6FF;
  --primary-deep: #0A56F0;
  --text: #F5F7FB;
  --secondary: #A8B3C7;
  --muted: #6F7C91;
  --silver: #DDE4F0;
  --silver-soft: #BFC9D9;
  --green: #54DBAC;
  --green-soft: #102B27;
  --red: #FF879B;
  --red-soft: #321D2A;
  --dark: #0B1020;
  --radius: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: none; color: inherit; transition: background .16s, border-color .16s, color .16s, box-shadow .16s; }
button:disabled { opacity: .48; cursor: not-allowed; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 4px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 2px; border-color: var(--primary); }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
svg { display: inline-block; vertical-align: middle; }
button svg { flex-shrink: 0; }
::selection { background: #1677FF66; color: white; }
.icon { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
button.primary { background: var(--primary-deep); color: white; border: 1px solid var(--primary); padding: 12px 18px; border-radius: 9px; font-size: 14px; font-weight: 650; box-shadow: 0 4px 18px #1677FF20, inset 0 1px #FFFFFF13; min-height: 43px; }
button.primary:hover:not(:disabled) { background: #1267EF; border-color: var(--primary-hover); box-shadow: 0 6px 23px #1677FF35; }
button.secondary, .month-picker { background: #101A2B; border: 1px solid var(--border-strong); border-radius: 9px; padding: 11px 15px; font-weight: 550; font-size: 13px; color: var(--silver); }
button.secondary:hover:not(:disabled) { background: #17253D; border-color: #40628C; }
button.ghost { padding: 9px; border-radius: 8px; color: var(--secondary); }
button.ghost:hover { background: #1B2940; color: var(--text); }
button.text-button { padding: 2px 0; color: #6BBDFF; font-size: 13px; font-weight: 600; }
button.text-button:hover { color: #A4D8FF; }
button.danger { color: var(--red); border: 1px solid #6A3142; background: var(--red-soft); padding: 11px 15px; border-radius: 8px; }

/* Navigation stays quiet; blue identifies the current workspace view. */
.sidebar { width: 246px; position: fixed; inset: 0 auto 0 0; z-index: 30; background: #090E1B; color: var(--secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 30px 16px 20px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 35px; color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 800; text-decoration: none; letter-spacing: -.5px; }
.brand-logo { position: relative; display: block; width: 46px; height: 46px; flex: 0 0 46px; overflow: hidden; border-radius: 11px; border: 1px solid #26334A; background: #000; box-shadow: 0 0 18px #1677FF0C; }
.brand-logo img { position: absolute; width: 80px; height: 80px; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain; }
.brand > img { width: 46px; height: 46px; object-fit: contain; border-radius: 9px; }
.brand-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.brand-copy b { color: var(--silver); font-size: 14px; font-weight: 800; letter-spacing: 1.6px; }
.brand-copy small { color: var(--secondary); font: 550 9px/1.4 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 1.65px; }
.brand-mark { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 32px; height: 32px; padding: 8px 7px; background: var(--primary-deep); border-radius: 8px; }
.brand-mark i { display: block; width: 4px; border-radius: 1px; background: white; }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 14px; }.brand-mark i:nth-child(3) { height: 19px; }
.nav-label { font-size: 11px; letter-spacing: 1.4px; font-weight: 650; color: var(--muted); padding: 0 14px; margin-bottom: 13px; }
.nav-list { display: grid; gap: 5px; }
.nav-item { font-size: 14px; justify-content: flex-start; gap: 12px; padding: 13px 14px; border: 1px solid transparent; border-radius: 9px; width: 100%; font-weight: 500; min-height: 47px; }
.nav-item:hover { background: #142036; color: var(--text); }
.nav-item.active { background: #112746; border-color: #1C3E68; color: #D8EDFF; box-shadow: inset 3px 0 var(--primary); }
.nav-item.active .icon { color: var(--primary-hover); }
.nav-item .nav-count { margin-left: auto; font-size: 11px; border-radius: 5px; background: #263754; color: #C6D8ED; padding: 2px 7px; }
.nav-separator { margin: 25px 14px; border-top: 1px solid var(--border); }
.sidebar-bottom { margin-top: auto; }
.storage-card { margin: 24px 6px 20px; padding: 16px 13px; background: #101A2B; border: 1px solid var(--border); border-radius: 10px; }
.storage-card .small-label { display: flex; align-items: center; gap: 7px; color: var(--silver); font-size: 12px; font-weight: 550; }
.storage-card p { font-size: 12px; line-height: 1.7; color: var(--secondary); margin-top: 8px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.profile { border-top: 1px solid var(--border); padding: 18px 10px 0; display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 10px; background: #192C48; color: #BDDCFF; display: grid; place-items: center; font-size: 12px; font-weight: 650; flex-shrink: 0; }
.profile b { font-size: 13px; display: block; color: var(--silver); }.profile small { font-size: 11px; color: var(--secondary); }
.profile .icon { margin-left: auto; width: 16px; }
.main { margin-left: 246px; min-width: 0; }
.topbar { height: 76px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 34px; background: var(--surface); }
.breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }.breadcrumb .icon { width: 17px; height: 17px; }.breadcrumb strong { color: var(--silver); font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 20px; font-size: 12px; color: var(--secondary); }
.live-indicator { display: flex; align-items: center; gap: 7px; }
.topbar-avatar { width: 32px; height: 32px; border: 1px solid var(--border-strong); background: #152640; color: #B9DFFF; }
.content { max-width: 1660px; margin: auto; padding: 32px 34px 28px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 28px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; color: #8DABCC; text-transform: uppercase; margin-bottom: 8px; }
h1 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 30px; font-weight: 750; letter-spacing: -1px; line-height: 1.35; }
.page-subtitle { font-size: 14px; line-height: 1.6; color: var(--secondary); margin-top: 7px; }
.heading-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.demo-banner { margin-bottom: 23px; border: 1px solid #233D5F; background: #101E34; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; gap: 14px; font-size: 12px; color: #A9C4E3; }
.demo-banner > span { display: flex; align-items: center; gap: 9px; }.demo-banner .icon { width: 17px; height: 17px; color: #64B5FF; }
.demo-banner button { color: #92CBFF; font-size: 12px; font-weight: 650; padding: 5px; white-space: nowrap; }
.overview-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 19px; }
.period-label { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 550; }.period-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-hover); }
.muted { color: var(--secondary); }
.month-picker { display: flex; align-items: center; padding: 5px 7px; gap: 8px; }.month-picker button { padding: 6px; color: var(--secondary); }.month-picker span { font-size: 13px; min-width: 108px; text-align: center; font-weight: 550; }.month-picker .icon { width: 16px; height: 16px; }

/* Data hierarchy: large values, readable labels, subdued supporting detail. */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.metric { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 21px 20px 17px; overflow: hidden; min-height: 150px; box-shadow: 0 3px 16px #00000013; }
.metric-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--secondary); margin-bottom: 15px; }
.metric-icon { color: #8198B8; display: inline-flex; }.metric-icon .icon { width: 17px; height: 17px; }
.metric-value { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 28px; letter-spacing: -.9px; font-weight: 750; line-height: 1.3; position: relative; z-index: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.metric-foot { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--secondary); margin-top: 14px; position: relative; z-index: 1; }
.metric-foot .badge { font-size: 11px; padding: 3px 6px; background: var(--green-soft); color: var(--green); border-radius: 5px; font-weight: 600; }
.positive { color: var(--green) !important; }.negative { color: var(--red) !important; }
.mini-spark { position: absolute; right: 18px; bottom: 43px; width: 73px; height: 27px; opacity: .45; }
.mini-progress { height: 4px; width: 65px; display: flex; overflow: hidden; border-radius: 3px; margin-left: auto; background: #29374B; }.mini-progress i { display: block; background: var(--green); height: 100%; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(325px, 1fr); gap: 22px; margin-bottom: 22px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 3px 18px #00000013; overflow: hidden; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 23px 24px 0; gap: 13px; }.panel-title { font-size: 16px; font-weight: 650; color: var(--silver); }.panel-subtitle { font-size: 12px; color: var(--secondary); margin-top: 6px; line-height: 1.6; }.panel-head .icon { width: 17px; height: 17px; color: #7E94B0; }
.panel-body { padding: 24px; }
.segmented { display: inline-flex; background: #0C1322; border: 1px solid var(--border); border-radius: 8px; padding: 4px; }.segmented button { padding: 7px 11px; border-radius: 5px; font-size: 12px; color: var(--secondary); }.segmented button.active { background: #21334F; color: #D1E7FF; box-shadow: 0 1px 4px #0002; }
.chart-summary { padding: 23px 24px 0; display: flex; align-items: center; gap: 10px; }.chart-total { font-size: 26px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 750; letter-spacing: -.6px; }.trend-badge { font-size: 12px; color: var(--green); background: var(--green-soft); padding: 5px 8px; border-radius: 5px; }
.chart-container { padding: 15px 18px 7px; min-height: 228px; }.equity-chart { width: 100%; height: 230px; overflow: visible; }.chart-label { font-size: 11px; fill: var(--secondary); font-family: inherit; }.chart-grid { stroke: var(--border); stroke-dasharray: 3 5; stroke-width: 1; }
.chart-footer { border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; padding: 15px 24px; color: var(--secondary); font-size: 12px; }.chart-footer span { display: flex; align-items: center; gap: 7px; }.chart-footer .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-hover); }
.calendar { padding: 22px 20px 16px; }.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }.weekday { font-size: 12px; color: var(--secondary); text-align: center; padding: 0 0 10px; }
.day { border-radius: 7px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #0E1524; color: #8C9BB2; font-size: 12px; border: 1px solid transparent; padding: 5px 1px; min-width: 0; }
.day.win { background: #10332D; color: #75E3BD; }.day.loss { background: #351F2C; color: #FFA0B0; }.day.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px #1677FF20; }.day.empty { background: none; pointer-events: none; }.day .day-pnl { font-size: 10px; font-weight: 600; letter-spacing: -.3px; }.day:hover:not(.empty) { border-color: #6885AB; }
.calendar-legend { margin-top: 18px; display: flex; align-items: center; gap: 12px; color: var(--secondary); font-size: 11px; }.legend-box { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }.legend-box.green { background: var(--green); }.legend-box.red { background: var(--red); }.calendar-total { margin-left: auto; font-weight: 600; font-size: 12px; }
.table-wrap { overflow: auto; scrollbar-color: #344A69 #0B1020; }
.trades-table { width: 100%; border-collapse: collapse; white-space: nowrap; }.trades-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .65px; color: #A5B5CD; font-weight: 550; padding: 19px 17px 14px; border-bottom: 1px solid var(--border); background: #101726; }.trades-table td { font-size: 13px; padding: 17px; border-bottom: 1px solid var(--border); color: var(--secondary); }
.trades-table th:first-child, .trades-table td:first-child { padding-left: 24px; }.trades-table th:last-child, .trades-table td:last-child { padding-right: 24px; text-align: right; }.trades-table tr:last-child td { border-bottom: 0; }.trades-table tbody tr:hover { background: #162136; }
.asset { display: flex; align-items: center; gap: 10px; }.coin { height: 31px; width: 31px; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0; font-size: 15px; font-weight: 600; background: #1E2D48; color: #A2C4F0; }.coin.btc { background: #342B1E; color: #FFC56D; }.coin.eth { background: #282B48; color: #B9BAF5; }.coin.sol { background: #193C38; color: #7DDDC5; }.asset b { font-size: 13px; color: var(--silver); font-weight: 650; }.asset small { display: block; color: #99A8BF; font-size: 11px; margin-top: 4px; }
.pill { padding: 4px 8px; display: inline-flex; border-radius: 5px; font-size: 11px; font-weight: 550; background: #223049; color: #B8C9E3; }.pill.long, .pill.closed { background: var(--green-soft); color: #6BDDB4; }.pill.short { background: var(--red-soft); color: #FFA0B3; }.pill.open { background: #352D1E; color: #EBD18F; }.amount { font-weight: 650; font-variant-numeric: tabular-nums; }
.table-bottom { padding: 15px 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--secondary); display: flex; align-items: center; justify-content: space-between; gap: 12px; }.table-bottom button { font-size: 12px; }
.strategy-list { padding: 10px 24px 9px; }.strategy-row { padding: 18px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 33px 1fr auto; gap: 11px; align-items: center; }.strategy-row:last-child { border-bottom: 0; }.strategy-symbol { width: 32px; height: 32px; display: grid; place-items: center; color: #7BBEFF; background: #162B49; border-radius: 8px; }.strategy-symbol .icon { width: 17px; height: 17px; }.strategy-row b { font-size: 13px; font-weight: 550; color: var(--silver); }.strategy-row small { display: block; font-size: 11px; color: var(--secondary); margin-top: 6px; }.strategy-row .strategy-result { text-align: right; font-size: 13px; }.strategy-progress { height: 4px; width: 75px; background: #24324A; border-radius: 5px; overflow: hidden; margin-top: 9px; margin-left: auto; }.strategy-progress i { display: block; background: #278BFF; height: 100%; border-radius: 5px; }
.insight { background: #12233B; border: 1px solid #213B5F; margin: 6px 22px 22px; padding: 13px 14px; border-radius: 8px; font-size: 12px; line-height: 1.75; color: #ABC6E4; display: flex; gap: 9px; align-items: flex-start; }.insight .icon { width: 16px; flex-shrink: 0; margin-top: 2px; color: #69B5FF; }
.footer { color: #8798B2; font-size: 11px; display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-top: 29px; line-height: 1.7; }.footer .icon { width: 13px; height: 13px; }
.mobile-menu { display: none; }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }.search-input { position: relative; flex: 1; min-width: 180px; }.search-input .icon { position: absolute; left: 13px; top: 13px; color: #869DBB; width: 17px; }.search-input input { padding-left: 39px !important; width: 100%; }
input, select, textarea { border: 1px solid var(--border-strong); background: #0B1220; padding: 12px 13px; border-radius: 8px; color: var(--text); font-size: 14px; min-width: 0; accent-color: var(--primary); }
select { padding-right: 28px; color-scheme: dark; }option { background: var(--surface); color: var(--text); }input::placeholder, textarea::placeholder { color: #8292A9; }input:disabled { color: var(--secondary); background: #121D2F; opacity: 1; }input[type=date]::-webkit-calendar-picker-indicator { opacity: .65; }
.empty-state { padding: 48px 25px; text-align: center; color: var(--secondary); }.empty-state .empty-icon { background: #142B4B; color: #6AB9FF; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; margin: 0 auto 18px; }.empty-state h3 { font-size: 18px; color: var(--silver); margin-bottom: 10px; }.empty-state p { font-size: 14px; line-height: 1.75; max-width: 380px; margin: auto; }.empty-state button { margin-top: 22px; }
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; }.section-gap { margin-top: 23px; }.stat-list { display: grid; gap: 0; }.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 14px; padding: 17px 0; border-bottom: 1px solid var(--border); }.stat-row:last-child { border-bottom: 0; }.stat-row span { color: var(--secondary); }.stat-row b { font-weight: 600; }
.monthly-bars { height: 230px; display: flex; gap: 15px; align-items: stretch; padding: 22px 5px 0; }.bar-column { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; justify-content: flex-end; }.bar-area { display: flex; flex: 1; align-items: flex-end; justify-content: center; width: 100%; }.bar-value { font-size: 11px; color: var(--secondary); }.bar { background: #35B88D; border-radius: 5px 5px 0 0; max-width: 42px; width: 80%; min-height: 3px; }.bar.negative-bar { background: #DC728F; }.bar-column small { font-size: 12px; color: var(--secondary); }
.calendar.full { padding: 26px; }.calendar.full .day { min-height: 97px; gap: 14px; font-size: 14px; }.calendar.full .day-pnl { font-size: 14px; }.calendar.full .weekday { font-size: 13px; }
.split-layout > *, .dashboard-grid > *, .analytics-grid > *, .settings-grid > *, .verification-grid > *, .metrics > *, .form-grid > * { min-width: 0; }
.split-layout { display: grid; grid-template-columns: 365px minmax(0, 1fr); gap: 22px; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }.field label { font-size: 13px; color: #C4CEDF; font-weight: 500; }.field small { font-size: 12px; color: var(--secondary); line-height: 1.6; }.field input, .field select { width: 100%; }.field.full-width { grid-column: 1/-1; }.form-section { font-size: 13px; font-weight: 650; color: #B9D4F2; margin: 24px 0 15px; }.form-section:first-child { margin-top: 0; }.form-divider { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
.file-drop { padding: 27px 16px; border: 1px dashed #37577E; background: #0D1B30; border-radius: 10px; text-align: center; }.file-drop .icon { color: #63B7FF; width: 27px; height: 27px; margin-bottom: 10px; }.file-drop b { max-width: 100%; word-break: break-word; display: block; font-size: 14px; color: #D3E9FF; margin-bottom: 8px; overflow-wrap: anywhere; }.file-drop p { font-size: 12px; color: var(--secondary); line-height: 1.7; }.file-drop button { margin-top: 15px; }.file-drop button .icon { width: 18px; height: 18px; margin: 0; color: inherit; }
.help-text { font-size: 13px; color: var(--secondary); line-height: 1.85; }.backtest-empty { display: flex; align-items: center; justify-content: center; min-height: 510px; }.backtest-empty .empty-state { max-width: 420px; }.backtest-empty .empty-icon { width: 72px; height: 72px; }.backtest-empty .empty-icon .icon { width: 32px; height: 32px; }.backtest-tags { display: flex; gap: 8px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }.backtest-tags span { font-size: 12px; background: #1A2940; color: #ADC8E8; padding: 6px 9px; border-radius: 5px; }.run-button { width: 100%; margin-top: 22px; }.backtest-result .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.backtest-result .metric { min-height: 138px; }.backtest-notice { font-size: 13px; line-height: 1.75; color: #D6C69C; background: #28251D; border: 1px solid #493E28; border-radius: 9px; padding: 14px; margin-bottom: 19px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }.setting-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 19px; }.info-box { font-size: 13px; color: #AFC7E3; line-height: 1.8; background: #13233A; border: 1px solid #203858; border-radius: 9px; padding: 15px 16px; margin-top: 20px; }.info-box > .icon { color: #6CB8FC; margin-right: 4px; }.notice-error { font-size: 13px; color: #FFB0BE; background: #331C29; border: 1px solid #603144; border-radius: 8px; padding: 12px 14px; line-height: 1.7; margin: 12px 0; }.notice-error:empty { display: none; }

dialog { border: 1px solid var(--border-strong); border-radius: 15px; padding: 0; width: 650px; max-width: calc(100% - 28px); max-height: 92vh; box-shadow: 0 30px 120px #00000099; color: var(--text); background: var(--panel); }dialog::backdrop { background: #030712B8; backdrop-filter: blur(5px); }.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 24px 27px; border-bottom: 1px solid var(--border); }.dialog-head h2 { font-size: 21px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }.dialog-head p { font-size: 13px; color: var(--secondary); margin-top: 7px; }.dialog-body { padding: 24px 27px; max-height: 65vh; overflow: auto; }.dialog-footer { display: flex; align-items: center; justify-content: space-between; padding: 18px 27px; border-top: 1px solid var(--border); background: #0E1625; gap: 12px; }.dialog-footer > div { display: flex; gap: 9px; }.pnl-preview { padding: 16px 18px; background: #12233A; border: 1px solid #294464; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: #AEC7E1; margin-top: 20px; }.pnl-preview strong { font-size: 22px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--green); }textarea { resize: vertical; min-height: 88px; }.row-actions { display: flex; justify-content: flex-end; gap: 3px; }.row-actions .ghost { padding: 7px; }.row-actions .icon { width: 16px; height: 16px; }
#toast { position: fixed; bottom: 25px; left: calc(50% + 123px); transform: translateX(-50%) translateY(100px); opacity: 0; transition: all .2s; background: #193456; color: #EBF5FF; border: 1px solid #375C88; padding: 14px 20px; max-width: 85%; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 35px #0005; z-index: 100; pointer-events: none; }#toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }#confirm-dialog { width: 450px; }#confirm-dialog .dialog-body { font-size: 14px; line-height: 1.8; color: var(--secondary); }.day-detail { margin-top: 23px; }.pill-demo { font-size: 11px; background: #162C48; color: #9DCAFF; padding: 4px 7px; border-radius: 5px; }.mobile-overlay { display: none; }.journal-summary { display: flex; gap: 25px; font-size: 13px; padding: 19px 24px; border-bottom: 1px solid var(--border); color: var(--secondary); }.journal-summary strong { margin-left: 7px; color: var(--silver); font-weight: 650; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

/* Performance review and certificate controls use the same workspace language. */
.review-hero { display: flex; align-items: center; gap: 19px; background: linear-gradient(110deg, #102643, #111B2D); border: 1px solid #254263; border-radius: 13px; padding: 27px; margin-bottom: 24px; }.review-hero h2 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 23px; letter-spacing: -.6px; color: var(--silver); }.review-hero p { font-size: 14px; line-height: 1.7; color: var(--secondary); margin-top: 8px; }.review-hero-icon { width: 60px; height: 60px; border-radius: 15px; background: #163455; border: 1px solid #28527E; display: grid; place-items: center; color: #69C3FF; flex-shrink: 0; }.review-hero-icon .icon { width: 29px; height: 29px; }.review-tag { font-size: 11px; color: #A6CDFA; background: #172B44; border: 1px solid #2D4B6F; border-radius: 20px; padding: 8px 11px; margin-left: auto; white-space: nowrap; }.review-steps { display: flex; align-items: center; gap: 35px; margin: 25px 0 29px; font-size: 14px; color: var(--secondary); }.review-steps span { display: flex; align-items: center; gap: 10px; }.review-steps i { font-style: normal; width: 28px; height: 28px; display: grid; place-items: center; background: #1B2940; border-radius: 50%; font-size: 12px; }.review-steps .active { color: #B4DDFF; }.review-steps .active i { background: #173A67; color: #C7E6FF; }.verification-grid { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 23px; align-items: start; }.review-or { display: flex; align-items: center; gap: 10px; color: var(--secondary); font-size: 12px; margin: 18px 0; }.review-or span { flex: 1; border-top: 1px solid var(--border); }.review-criterion { display: flex; gap: 17px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--border); }.criterion-value { min-width: 70px; height: 45px; border-radius: 9px; display: grid; place-items: center; background: #162E4B; color: #93CBFF; font-weight: 650; font-size: 16px; }.review-criterion b { font-size: 14px; color: var(--silver); font-weight: 600; }.review-criterion small { display: block; font-size: 13px; color: var(--secondary); margin-top: 6px; line-height: 1.6; }.review-await { padding: 28px 10px 8px; font-size: 14px; color: var(--secondary); text-align: center; }.review-await .icon { margin-right: 6px; }
.review-result-head { display: flex; gap: 16px; align-items: center; padding: 26px; background: #122F2A; border-bottom: 1px solid #234B3D; }.review-result-head.pending { background: #28251E; border-color: #453A26; }.review-result-icon { width: 46px; height: 46px; display: grid; place-items: center; background: #1D4537; color: #83E6BE; border-radius: 50%; flex-shrink: 0; }.pending .review-result-icon { background: #443A27; color: #E5CA8D; }.review-result-head h2 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 20px; color: var(--silver); letter-spacing: -.4px; }.review-result-head p { font-size: 13px; color: var(--secondary); margin-top: 7px; }.review-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 25px; gap: 14px; }.review-stat-grid span { display: block; font-size: 12px; color: var(--secondary); margin-bottom: 8px; }.review-stat-grid b { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 20px; color: var(--text); letter-spacing: -.5px; }.review-source { display: flex; align-items: center; justify-content: space-between; gap: 11px; color: var(--secondary); font-size: 12px; border-bottom: 1px solid var(--border); padding: 5px 0 18px; overflow-wrap: anywhere; }.check-row { display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--border); padding: 18px 0; }.check-circle { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; flex-shrink: 0; }.check-circle .icon { width: 15px; height: 15px; }.check-circle.pass { background: var(--green-soft); color: var(--green); }.check-circle.fail { background: #392B24; color: #F6BB91; }.check-row b { font-size: 13px; color: var(--silver); font-weight: 550; }.check-row small { display: block; color: var(--secondary); font-size: 12px; margin-top: 6px; line-height: 1.6; }.check-row strong { margin-left: auto; font-size: 13px; color: #B9D4EE; max-width: 160px; text-align: right; flex-shrink: 0; }.certificate-preview { border: 1px solid #304762; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 25px #0003; background: var(--surface); }.certificate-preview svg { width: 100%; height: auto; display: block; }.certificate-panel { scroll-margin-top: 25px; }

/* A compact, optional first-use guide; explanations never compete with the data. */
.quick-guide { background: linear-gradient(120deg, #10233C, #0D1728); border: 1px solid #254364; border-radius: 12px; padding: 22px 24px; margin-bottom: 23px; }
.quick-guide h2, .quick-guide h3 { color: var(--silver); font-size: 16px; font-weight: 650; }.quick-guide > p { margin-top: 7px; font-size: 13px; color: var(--secondary); line-height: 1.7; }
.guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.guide-step { display: flex; align-items: flex-start; justify-content: flex-start; gap: 11px; min-width: 0; text-align: left; padding: 10px 0; }
button.guide-step { border: 1px solid transparent; border-radius: 8px; padding: 12px; background: #122944; }
button.guide-step:hover { background: #193452; border-color: #31567F; }
.guide-step > i { flex: 0 0 27px; width: 27px; height: 27px; border-radius: 7px; background: #21456F; color: #B0DFFF; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 650; }
.guide-step > span { display: block; flex: 1; min-width: 0; }
.guide-step b, .guide-step strong, .guide-step h3 { display: block; color: #D9E8F9; font-size: 13px; font-weight: 600; line-height: 1.6; }
.guide-step small, .guide-step p { display: block; color: var(--secondary); font-size: 12px; line-height: 1.75; margin-top: 6px; }
.guide-step > .icon { width: 15px; height: 15px; flex: 0 0 15px; color: #83BFFF; margin-top: 5px; }
.glossary .guide-step { padding: 0; }
.quick-guide details, details.glossary, .glossary details { margin-top: 18px; border-top: 1px solid #28405D; padding-top: 14px; }.quick-guide summary, .glossary summary { font-size: 13px; font-weight: 550; color: #94CAFF; cursor: pointer; }.quick-guide details p, .glossary p { font-size: 13px; line-height: 1.8; color: var(--secondary); margin-top: 10px; }.quick-guide dl, .glossary dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; font-size: 13px; line-height: 1.7; }.quick-guide dt, .glossary dt { color: var(--silver); font-weight: 550; }.quick-guide dd, .glossary dd { margin: 0; color: var(--secondary); }

@media (min-width: 1550px) { .content { padding-top: 39px; }.metric { min-height: 162px; }.metric-value { font-size: 32px; }.day { min-height: 52px; }.equity-chart { height: 250px; }.chart-container { min-height: 249px; }.trades-table td { padding-top: 20px; padding-bottom: 20px; } }
@media (max-width: 1250px) { .sidebar { width: 224px; padding-left: 11px; padding-right: 11px; }.main { margin-left: 224px; }.brand { padding-left: 8px; gap: 9px; }.brand-copy b { font-size: 13px; letter-spacing: 1.3px; }.brand-copy small { font-size: 8px; }.content { padding: 27px; }.topbar { padding: 0 27px; }.metric { padding: 19px 16px; }.metric-value { font-size: 25px; }.metrics { gap: 13px; }.metric-foot { font-size: 11px; }.dashboard-grid { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 18px; }.page-heading h1 { font-size: 28px; }.heading-actions { gap: 8px; }.trades-table th, .trades-table td { padding-left: 14px; padding-right: 14px; }.split-layout { grid-template-columns: 330px minmax(0, 1fr); }.verification-grid { grid-template-columns: 320px minmax(0, 1fr); }.review-tag { display: none; }.review-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.review-source { align-items: flex-start; flex-direction: column; }#toast { left: calc(50% + 112px); } }
@media (max-width: 1050px) { .dashboard-grid { grid-template-columns: minmax(0, 1fr); }.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metric-value { font-size: 29px; }.calendar .day { min-height: 53px; }.page-heading { align-items: flex-start; flex-wrap: wrap; }.heading-actions { flex-wrap: wrap; }.page-subtitle { line-height: 1.7; }.settings-grid, .analytics-grid { grid-template-columns: minmax(0, 1fr); }.split-layout { grid-template-columns: minmax(0, 1fr); }.backtest-result .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.verification-grid { grid-template-columns: minmax(0, 1fr); }.live-indicator { display: none; }.guide-steps { gap: 14px; }.guide-step { gap: 9px; } }
@media (max-width: 800px) { .sidebar { transform: translateX(-100%); width: 246px; transition: transform .2s; }.sidebar.shown { transform: translateX(0); }.mobile-overlay.shown { display: block; position: fixed; inset: 0; background: #02050DB8; z-index: 25; backdrop-filter: blur(3px); }.main { margin-left: 0; }.topbar { height: 64px; padding: 0 19px; }.mobile-menu { display: inline-flex; margin-right: 3px; }.breadcrumb { gap: 8px; }.topbar-right { gap: 13px; }.content { padding: 24px 19px; }.page-heading { flex-direction: column; gap: 18px; margin-bottom: 22px; }.heading-actions { justify-content: flex-start; align-self: stretch; }.heading-actions .primary { margin-left: auto; }.demo-banner { align-items: flex-start; padding: 13px; gap: 10px; }.demo-banner > span { line-height: 1.7; align-items: flex-start; }.demo-banner > span .icon { flex-shrink: 0; margin-top: 2px; }.demo-banner button { white-space: normal; min-width: 104px; max-width: 145px; }.metric { min-height: 150px; padding: 18px; }.metric-value { font-size: 27px; }.metrics { gap: 12px; margin-bottom: 20px; }.metric-label { font-size: 13px; }.metric-foot { font-size: 11px; gap: 6px; }.mini-spark { width: 56px; right: 15px; bottom: 47px; }.mini-progress { width: 42px; }.dashboard-grid { gap: 20px; margin-bottom: 20px; }.panel-head { padding: 22px 20px 0; }.panel-body { padding: 22px 20px; }.chart-summary { padding: 22px 20px 0; }.chart-footer { padding: 15px 20px; }.footer { font-size: 11px; align-items: flex-start; flex-wrap: wrap; }.backtest-empty { min-height: 320px; }.calendar.full { padding: 18px 12px; }.calendar.full .day { min-height: 76px; font-size: 12px; gap: 11px; }.calendar.full .day-pnl { font-size: 11px; }.settings-grid { gap: 20px; }.form-grid { gap: 15px; }.dialog-head, .dialog-body { padding: 22px; }.dialog-footer { padding: 17px 22px; }.journal-summary { gap: 15px; flex-wrap: wrap; }.filters select { flex: 1; }.filters .search-input { flex-basis: 100%; }#toast { left: 50%; max-width: 92%; width: max-content; }.calendar-grid { gap: 4px; }.review-hero { padding: 21px; gap: 14px; }.review-hero h2 { font-size: 21px; }.review-hero-icon { width: 48px; height: 48px; border-radius: 12px; }.review-hero-icon .icon { width: 25px; height: 25px; }.review-steps { gap: 15px; font-size: 12px; }.review-steps span { gap: 7px; flex: 1; }.review-steps i { flex-shrink: 0; }.review-result-head { padding: 22px; }.review-result-head h2 { font-size: 19px; } }
@media (max-width: 480px) { .content { padding: 22px 15px; }.topbar { padding: 0 12px; }.topbar-right > span:not(.avatar):not(.cloud-badge) { display: none; }.breadcrumb { font-size: 12px; }.breadcrumb > .icon, .breadcrumb > span:first-of-type { display: none; }.page-heading h1 { font-size: 27px; }.page-subtitle { font-size: 13px; }.heading-actions button { padding: 11px 12px; font-size: 12px; }.metric { padding: 17px 14px; min-height: 147px; }.metric-label { font-size: 12px; }.metric-value { font-size: 23px; }.metric-foot { flex-wrap: wrap; line-height: 1.55; }.mini-spark { display: none; }.panel-head { flex-wrap: wrap; }.panel-title { font-size: 15px; }.chart-total { font-size: 24px; }.chart-footer { font-size: 11px; flex-wrap: wrap; }.demo-banner { flex-direction: column; }.demo-banner button { max-width: none; align-self: flex-end; }.overview-tools { flex-wrap: wrap; }.period-label { font-size: 13px; }.calendar { padding: 20px 12px 15px; }.calendar-legend { gap: 8px; font-size: 10px; }.calendar-total { font-size: 11px; }.day .day-pnl { font-size: 9px; }.calendar.full .day-pnl { font-size: 10px; }.calendar.full .day { min-height: 68px; }.form-grid { grid-template-columns: minmax(0, 1fr); }.field.full-width { grid-column: auto; }.field input, .field select, .field textarea { font-size: 16px; }.dialog-body { max-height: 65dvh; }.dialog-footer { flex-wrap: wrap; }.dialog-footer > div { width: 100%; justify-content: flex-end; }.dialog-footer .muted { display: none; }.review-hero-icon { display: none; }.review-steps { gap: 10px; font-size: 11px; line-height: 1.5; }.review-steps i { width: 24px; height: 24px; }.review-result-head { align-items: flex-start; }.review-result-head h2 { font-size: 18px; }.review-stat-grid { padding: 21px; }.check-row { gap: 10px; flex-wrap: wrap; }.check-row > div:not(.setting-actions) { flex: 1; min-width: 0; }.check-row strong { max-width: 110px; font-size: 12px; }.check-row .setting-actions { flex-basis: 100%; }.quick-guide { padding: 20px; }.guide-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }.guide-step { padding: 10px 0; }.quick-guide dl, .glossary dl { grid-template-columns: minmax(0, 1fr); gap: 5px; }.quick-guide dd, .glossary dd { margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { :root { color-scheme: light; }.sidebar, .topbar, .heading-actions, .demo-banner, .footer, button { display: none !important; }.main { margin: 0; }.content { padding: 0; }.panel, .metric { break-inside: avoid; background: white; color: #111827; border-color: #CFD7E4; box-shadow: none; }.dashboard-grid { display: block; }.panel { margin-bottom: 18px; }body { background: white; color: #111827; }.panel-title, .metric-value, .asset b { color: #111827; }.chart-label { fill: #52617B; }.chart-grid { stroke: #E1E6EE; } }
@media(max-width:800px){.sidebar{visibility:hidden}.sidebar.shown{visibility:visible}}

/* A visible save state and a clear journal-to-review path. */
.cloud-save-status { display: inline-flex; align-items: center; margin-left: 12px; color: var(--green); font-size: 11px; }
.journal-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; background: linear-gradient(115deg,#0F2038,#0B1424); border: 1px solid #233E60; border-radius: 12px; margin-bottom: 20px; }
.journal-intro p { max-width: 720px; color: var(--secondary); font-size: 13px; line-height: 1.7; }
.journal-intro > button { flex-shrink: 0; }
.review-link { font-size: 12px; color: #89C8FF !important; }
.trade-advanced { padding: 15px 0; border-top: 1px solid var(--border); margin-top: 18px; }
.trade-advanced summary { cursor: pointer; color: var(--secondary); font-size: 12px; margin-bottom: 12px; }
.trade-advanced .field { max-width: 230px; margin-bottom: 10px; }
#trade-exit-fields[hidden] { display: none; }
#trade-exit-fields { border: 1px solid #264668; background: #0E1D31; border-radius: 10px; padding: 0 16px 16px; margin-top: 18px; }
#trade-save-hint { max-width: 170px; line-height: 1.5; font-size: 11px; }
.trade-save-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#trade-form .dialog-footer { align-items: center; }
#trade-error:not(:empty) { padding: 12px; background: #321D2A; border-radius: 8px; border: 1px solid #6A3142; }
#trade-form .dialog-body { padding-bottom: 12px; }
@media (max-width: 700px) {
 .journal-intro { flex-direction: column; align-items: flex-start; gap: 12px; padding: 17px; }
 .cloud-save-status { display: block; margin: 7px 0 0; }
 #trade-form .dialog-footer { position: sticky; bottom: 0; z-index: 2; flex-direction: column; align-items: stretch; background: var(--surface); gap: 10px; }
 #trade-save-hint { max-width: none; }
 .trade-save-actions { display: grid; grid-template-columns: 1fr 1fr; }
 .trade-save-actions .primary { grid-column: 1 / -1; }
 .trade-save-actions button { padding: 10px 9px; font-size: 12px; }
}

[data-save-status][data-state=error] { color: var(--red); }
[data-save-status][data-state=saving] { color: var(--secondary); }
.legal-links{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:12px;line-height:1.6}
.legal-links a{color:#A8B3C7;text-decoration:underline;text-underline-offset:4px}
.legal-links a:hover{color:#fff}
.legal-links a:focus-visible,.contact-action:focus-visible{outline:2px solid #29B6FF;outline-offset:5px;border-radius:3px}
.footer{flex-wrap:wrap;gap:16px}
.footer .legal-links{width:100%}
.privacy-settings{margin-bottom:22px}
.privacy-settings .help-text+.help-text{margin-top:12px}
.privacy-settings a:not(.secondary){color:#9CBDFD}
.privacy-settings .legal-links{margin-top:20px}
.contact-action{display:inline-flex;text-decoration:none;margin:18px 0 10px}