.trading-screen {
  --trade-up: var(--danger);
  --trade-down: #2563eb;
  --trade-buy: var(--success);
  --trade-sell: var(--danger);
  --trade-neutral: #7c3aed;
  --trade-warning: #b45309;
  --trade-warning-bright: #f59e0b;
  --trade-negative-stroke: #7f1d1d;
  --trading-font-title: 28px;
  --trading-font-panel: 17px;
  --trading-font-section: 13px;
  --trading-font-body: 12px;
  --trading-font-input: 12px;
  --trading-font-table-head: 11px;
  min-height: 100vh;
  background: var(--canvas);
}
body[data-theme="dark"] .trading-screen {
  --trade-down: #6aaeff;
  --trade-neutral: #c08cff;
  --trade-warning: #e9a65a;
  --trade-warning-bright: #f0b35e;
  --trade-negative-stroke: #f48771;
}
.trading-app-shell { width: 100%; min-width: 800px; max-width: 1920px; min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); margin: 0 auto; transition: grid-template-columns .2s ease; }
.trading-app-header { min-height: 64px; }
.trading-app-nav { min-width: 0; }
.trading-app-nav > .brand { padding: 0 8px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.trading-workspace { min-width: 0; }
.trading-menu-link { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.trading-app-main { min-width: 0; padding: 26px 30px 50px; }
.trading-app-main > .global-message { margin: 0 0 18px; }
.trading-view { display: grid; gap: 18px; }
.trading-page-head { display: flex; align-items: center; justify-content: space-between; }
.trading-page-head h1 { margin: 0; font-size: 28px; }
.trading-page-head p { margin: 7px 0 0; color: var(--muted); }
.trading-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.trading-panel-head { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.trading-panel-head h2 { margin: 0; font-size: 17px; }
.trading-panel-head span { color: var(--muted); font-size: 12px; }
.trading-table-region { padding: 16px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.trading-table-region > .table-wrap { border: 1px solid var(--line); border-radius: 4px; }
.trading-table-region > .table-wrap tbody tr:last-child td { border-bottom: 0; }
.trading-view:where(:not(#trading-privacy-view):not(#trading-p-scalping-view):not(#trading-order-reference-view):not(#trading-order-waiting-view)) > .trading-panel > .table-wrap { margin: 16px; width: calc(100% - 32px); max-width: calc(100% - 32px); box-sizing: border-box; border: 1px solid var(--line); border-radius: 4px; }
/* Shared hierarchy for trading and reference-data pages. Keep status and numeric emphasis. */
.trading-app-main .trading-view .trading-page-head h1 { font-size: var(--trading-font-title); font-weight: 700; }
.trading-app-main .trading-view .trading-panel-head h2 { font-size: var(--trading-font-panel); font-weight: 700; }
.trading-app-main .trading-view h3 { font-size: var(--trading-font-section); font-weight: 700; }
.trading-app-main .trading-view label { font-size: var(--trading-font-body); font-weight: 800; }
.trading-app-main .trading-view input,
.trading-app-main .trading-view select,
.trading-app-main .trading-view textarea { font-size: var(--trading-font-input); }
.trading-app-main .trading-view .table-wrap th { font-size: var(--trading-font-table-head); font-weight: 900; }
.trading-app-main .trading-view .table-wrap td { font-size: var(--trading-font-body); }
body.trading-modal-open { overflow: hidden; }
.trading-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; }
.trading-modal[hidden] { display: none; }
.trading-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: var(--modal-overlay); cursor: default; }
.trading-modal-dialog { position: relative; z-index: 1; width: min(1500px, calc(100vw - 32px)); height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: var(--modal-shadow); }
.trading-modal-head { flex: none; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.trading-modal-head > div { display: flex; align-items: baseline; gap: 12px; }
.trading-modal-head h2 { margin: 0; font-size: 18px; }
.trading-modal-head span { color: var(--muted); font-size: 12px; }
.order-modal-message { flex: none; margin: 12px 18px 0; }
.order-entry-calendar-panel { flex: none; padding: 12px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 45%, var(--surface)); }
.order-entry-calendar-panel .month-date-strip { grid-template-columns: repeat(16, minmax(0, 1fr)); }
.order-entry-calendar-panel .pattern-calendar-day { min-height: 34px; }
.pattern-calendar-day.registered-date { color: var(--trade-warning); background: color-mix(in srgb, var(--trade-warning) 10%, var(--surface)); }
.pattern-calendar-day:disabled { opacity: .62; cursor: not-allowed; }
.pattern-calendar-day:disabled:hover { background: inherit; }
.trading-modal-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.trading-modal .order-reference-create { min-height: 100%; align-items: start; align-content: start; }
.trading-modal .order-image-picker { min-height: min(520px, calc(100vh - 260px)); }
.order-modal-actions { position: sticky; z-index: 3; bottom: 0; padding: 12px 0; border-top: 1px solid var(--line); background: var(--surface); }
.trading-search-grid, .trading-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.trading-search-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; align-items: end; }
.trading-search-grid label, .trading-form-grid label { display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 800; }
.trading-search-grid input, .trading-form-grid input, .trading-form-grid select { min-width: 0; border-radius: 5px; }
.pattern-search-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)) auto; align-items: end; }
.pattern-date-field { min-width: 0; grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.pattern-date-field legend { margin-bottom: 6px; color: var(--ink); font-size: 12px; font-weight: 800; }
.pattern-calendar-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.pattern-calendar-head strong { text-align: center; font-size: 15px; }
.pattern-calendar-head .button { min-height: 34px; padding: 6px 10px; }
.month-date-strip { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.pattern-calendar-day { position: relative; min-height: 38px; padding: 5px 4px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--surface); font-size: 12px; cursor: pointer; }
.pattern-calendar-day:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.pattern-calendar-day.saturday { color: var(--trade-down); background: color-mix(in srgb, var(--trade-down) 6%, var(--surface)); }
.pattern-calendar-day.sunday { color: var(--trade-sell); background: color-mix(in srgb, var(--trade-sell) 6%, var(--surface)); }
.pattern-calendar-day.market-holiday { color: var(--trade-neutral); background: color-mix(in srgb, var(--trade-neutral) 9%, var(--surface)); }
.pattern-calendar-day.early-close { color: var(--trade-buy); background: color-mix(in srgb, var(--trade-buy) 9%, var(--surface)); }
.pattern-calendar-day.selected { color: white; background: var(--accent); font-weight: 900; }
.pattern-calendar-day.today:not(.selected) { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent); }
.pattern-calendar-day .date-dots { position: absolute; right: 0; bottom: 5px; left: 0; display: flex; justify-content: center; gap: 3px; }
.pattern-calendar-day .date-dots i, .pattern-calendar-legend i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; }
.pattern-calendar-day .date-dots .bars, .pattern-calendar-legend .bars { background: var(--accent); }
.pattern-calendar-day .date-dots .orders, .pattern-calendar-legend .orders { background: var(--trade-warning); }
.pattern-calendar-day.selected .date-dots i { outline: 1px solid rgba(255,255,255,.7); }
.market-closed-label { position: absolute; top: 3px; right: 4px; color: inherit; font-size: 8px; font-weight: 900; }
.pattern-calendar-legend { min-height: 28px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 6px 2px 0; color: var(--muted); font-size: 11px; }
.pattern-calendar-legend span { display: inline-flex; align-items: center; gap: 4px; }
.pattern-calendar-legend > strong { margin-left: auto; color: var(--ink); font-size: 12px; }
.pattern-calendar-legend > strong.missing { color: var(--danger); }
.pattern-time-control { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: stretch; }
.pattern-time-control input { min-height: 44px; border-radius: 5px 0 0 5px; }
.pattern-time-step-buttons { display: grid; grid-template-rows: 1fr 1fr; }
.pattern-time-step { min-height: 22px; padding: 0; border: 1px solid var(--line); border-left: 0; border-radius: 0 5px 0 0; color: var(--ink); background: var(--surface); font-size: 9px; line-height: 1; cursor: pointer; touch-action: none; user-select: none; }
.pattern-time-step + .pattern-time-step { border-top: 0; border-radius: 0 0 5px 0; }
.pattern-time-step:hover, .pattern-time-step:focus-visible { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.pattern-time-step:active { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.trading-form-grid small { color: var(--muted); font-weight: 500; }
.order-date-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trading-form-actions { display: flex; justify-content: flex-end; align-items: end; gap: 8px; }
.fanding-panel-body { padding: 16px; font-size: var(--trading-font-body); }
.fanding-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 100%; }
.fanding-action-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.fanding-progress { padding: 16px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: var(--trading-font-body); }
.fanding-progress p { margin: 0; line-height: 1.6; }
.fanding-progress progress { display: block; width: 100%; height: 10px; margin: 8px 0; accent-color: var(--accent); }
.fanding-hint { margin: 0; color: var(--muted); font-size: var(--trading-font-body); line-height: 1.6; }
.fanding-settings { margin-top: 12px; border-top: 1px solid var(--line); }
.fanding-settings > summary { padding: 12px 0; color: var(--ink); font-size: var(--trading-font-section); font-weight: 700; cursor: pointer; }
.fanding-form.trading-form-grid { padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fanding-wide { grid-column: 1 / -1; min-width: 0; }
.fanding-schedule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.fanding-form .multi-checkbox { padding: 0; flex-wrap: wrap; }
.fanding-form .multi-checkbox label { display: inline-flex; align-items: center; gap: 8px; }
.fanding-recipients-field { margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--line); }
.fanding-recipients-field legend { padding: 0 8px 0 0; color: var(--ink); font-size: var(--trading-font-section); font-weight: 700; }
.fanding-result p { margin: 12px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
.fanding-image-gallery { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.fanding-image-gallery a { display: block; width: 240px; max-width: 100%; }
.fanding-image-gallery img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
.fanding-result details, #order-reference-collected-images { font-size: var(--trading-font-body); }
.fanding-result summary { margin-top: 12px; cursor: pointer; }
#order-reference-collected-images:has(details), #order-reference-validation-errors:not([hidden]) { margin: 0; padding: 12px 16px; font-size: var(--trading-font-body); }
@media (max-width: 640px) {
  .fanding-form.trading-form-grid { grid-template-columns: minmax(0, 1fr); }
  .fanding-form .trading-form-actions { flex-wrap: wrap; }
}
.condition-action-row { grid-column: 1 / -1; min-height: 44px; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.condition-action-row .button { min-width: 76px; min-height: 40px; padding: 7px 14px; }
.trading-chart-wrap { width: 100%; padding: 12px; }
.trading-chart-guide { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.trading-chart-guide > span:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pattern-chart-legend { width: 18px; height: 3px; display: inline-block; margin-left: 6px; border-radius: 99px; background: var(--muted); }
.pattern-chart-legend:first-child { margin-left: 0; }
.pattern-chart-legend.candle { height: 9px; background: linear-gradient(90deg, var(--trade-buy) 0 48%, transparent 48% 52%, var(--trade-sell) 52%); }
.pattern-chart-legend.vwap { background: var(--trade-warning); }
.pattern-chart-legend.order { background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 8px); }
.pattern-chart-legend.order-buy { background: var(--trade-buy); }
.pattern-chart-legend.order-sell { background: var(--trade-sell); }
.pattern-chart-scale-controls { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pattern-chart-scale-controls .button { min-height: 30px; padding: 5px 10px; }
.pattern-chart-scale-controls small { min-width: 72px; text-align: right; }
.pattern-chart-stage { overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.trading-price-scroll { width: 100%; height: 430px; overflow: auto; background: var(--surface); scrollbar-gutter: stable; }
.trading-price-scroll svg { display: block; width: 100%; min-width: 760px; height: auto; }
.trading-volume-wrap { width: 100%; overflow-x: auto; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 32%, var(--surface)); box-sizing: border-box; }
.trading-volume-wrap svg { display: block; width: 100%; min-width: 760px; height: auto; }
.pattern-order-lines { border-top: 1px solid var(--line); }
.close-market-analysis { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 42%, var(--surface)); }
.close-market-analysis-head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.close-market-analysis-head h3 { margin: 0 0 3px; font-size: 15px; }
.close-market-analysis-head span { color: var(--muted); font-size: 11px; }
.market-status { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; padding: 7px 12px; border-radius: 99px; font-size: 13px; font-weight: 900; }
.market-status.buy-market { color: var(--trade-buy); background: color-mix(in srgb, var(--trade-buy) 12%, var(--surface)); }
.market-status.sell-market { color: var(--trade-sell); background: color-mix(in srgb, var(--trade-sell) 12%, var(--surface)); }
.market-status.neutral-market { color: var(--trade-neutral); background: color-mix(in srgb, var(--trade-neutral) 11%, var(--surface)); }
.market-status.unavailable { color: var(--muted); background: var(--canvas); }
.close-market-analysis-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .38fr); gap: 16px; padding: 14px 16px 8px; }
.market-analysis-result { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 8px; margin: 0; }
.market-analysis-result div { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); background: var(--surface); }
.market-analysis-result dt { margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
.market-analysis-result dd { margin: 0; font-size: 13px; font-weight: 900; overflow-wrap: anywhere; }
.market-analysis-result dd.positive { color: var(--trade-buy); }
.market-analysis-result dd.negative { color: var(--trade-sell); }
.market-analysis-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.market-analysis-times label { display: grid; gap: 5px; color: var(--ink); font-size: 11px; font-weight: 800; }
.market-analysis-times label span { display: flex; align-items: center; gap: 5px; min-height: 38px; padding: 5px 8px; border: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
.market-analysis-times input { width: 58px; min-height: 28px; padding: 3px 5px; text-align: right; border-radius: 3px; }
.market-analysis-times .button { grid-column: 1 / -1; justify-self: end; min-height: 34px; }
.market-analysis-times[hidden] { display: none; }
.market-boundary-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 16px 10px; }
.market-boundary-summary[hidden] { display: none; }
.market-boundary-summary > div { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-left-width: 4px; background: var(--surface); }
.market-boundary-summary span, .market-boundary-summary small { color: var(--muted); font-size: 11px; }
.market-boundary-summary strong { font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.market-boundary-summary .buy-boundary { border-left-color: var(--trade-buy); }
.market-boundary-summary .current-position { border-left-color: var(--trade-neutral); }
.market-boundary-summary .sell-boundary { border-left-color: var(--trade-sell); }
.market-analysis-message { min-height: 30px; margin: 0; padding: 3px 16px 12px; color: var(--muted); font-size: 12px; }
.simulation-search-grid { display: grid; grid-template-columns: repeat(4, minmax(155px, 1fr)); gap: 12px; align-items: end; padding: 16px; }
.simulation-search-grid label { display: grid; gap: 7px; min-width: 0; color: var(--ink); font-size: 12px; font-weight: 800; }
.simulation-search-grid input, .simulation-search-grid select { width: 100%; min-height: 44px; }
.simulation-static-field { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 800; }
.simulation-relative-time { display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 5px 8px; border: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
.simulation-relative-time input { width: 64px; min-height: 30px; padding: 4px 6px; text-align: right; }
.simulation-summary { display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)); gap: 10px; margin: 0; padding: 16px; }
.simulation-summary div { padding: 12px 14px; border: 1px solid var(--line); background: var(--surface); }
.simulation-summary dt { margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.simulation-summary dd { margin: 0; font-size: 17px; font-weight: 900; }
.simulation-summary dd.positive { color: var(--trade-buy); }
.simulation-summary dd.negative { color: var(--trade-sell); }
.simulation-skipped { margin: 0; padding: 0 16px 14px; color: var(--muted); font-size: 11px; }
.simulation-chart-wrap { width: 100%; padding: 12px 16px 16px; overflow-x: auto; }
.simulation-chart-wrap svg { display: block; width: 100%; min-width: 760px; height: auto; background: var(--surface); }
.simulation-pattern-date-link { cursor: pointer; }
.simulation-pattern-date-link:hover { filter: brightness(.9); }
.simulation-pattern-date-link:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.simulation-trade-table { min-width: 1550px; }
.simulation-trade-table td:nth-child(5),
.simulation-trade-table td:nth-child(7),
.simulation-trade-table td:nth-child(9),
.simulation-trade-table td:nth-child(10),
.simulation-trade-table td:nth-child(11),
.simulation-trade-table td:nth-child(12),
.simulation-trade-table td:nth-child(15) { text-align: right; font-variant-numeric: tabular-nums; }
.simulation-trade-table td.positive { color: var(--trade-buy); font-weight: 900; }
.simulation-trade-table td.negative { color: var(--trade-sell); font-weight: 900; }
.simulation-trade-table tr.buy-market td { background: color-mix(in srgb, var(--trade-buy) 5%, var(--surface)); }
.simulation-trade-table tr.sell-market td { background: color-mix(in srgb, var(--trade-sell) 5%, var(--surface)); }
.simulation-trade-table tr.neutral-market td { background: color-mix(in srgb, var(--trade-neutral) 5%, var(--surface)); }
.simulation-trade-table tr.buy-market td:first-child { box-shadow: inset 4px 0 var(--trade-buy); }
.simulation-trade-table tr.sell-market td:first-child { box-shadow: inset 4px 0 var(--trade-sell); }
.simulation-trade-table tr.neutral-market td:first-child { box-shadow: inset 4px 0 var(--trade-neutral); }
.timing-search-grid { grid-template-columns: repeat(4, minmax(155px, 1fr)); }
.timing-date-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 14px 16px; }
.timing-date-list .trading-empty { grid-column: 1 / -1; min-height: 90px; }
.timing-date-button { min-width: 0; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--surface); text-align: left; cursor: pointer; }
.timing-date-button span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.timing-date-button strong { font-size: 13px; }
.timing-date-button small { color: var(--muted); font-size: 11px; }
.timing-date-button.buy { box-shadow: inset 3px 0 color-mix(in srgb, var(--trade-buy) 60%, transparent); }
.timing-date-button.sell { box-shadow: inset 3px 0 color-mix(in srgb, var(--trade-sell) 60%, transparent); }
.timing-date-button:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.timing-date-button.active { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.timing-date-button.positive small, .timing-overall-card .positive, .trading-panel-head > span.positive { color: var(--trade-buy); }
.timing-date-button.negative small, .timing-overall-card .negative, .trading-panel-head > span.negative { color: var(--trade-sell); }
.timing-selected-summary { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 8px; margin: 0; padding: 14px 16px 4px; }
.timing-selected-summary div { min-width: 0; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface); }
.timing-selected-summary dt { margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.timing-selected-summary dd { margin: 0; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.timing-selected-summary dd.positive { color: var(--trade-buy); }
.timing-selected-summary dd.negative { color: var(--trade-sell); }
.timing-vwap-summary { grid-template-columns: repeat(4, minmax(150px, 1fr)); padding-top: 8px; padding-bottom: 14px; }
.timing-vwap-summary div { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.timing-chart-wrap { width: 100%; padding: 12px 16px 16px; overflow-x: auto; }
.timing-chart-wrap svg { display: block; width: 100%; min-width: 900px; height: auto; border: 1px solid var(--line); background: var(--surface); }
.timing-minute-table { min-width: 780px; }
.timing-minute-table td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.timing-minute-table tr.baseline td { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.timing-minute-table tr.comparison td { background: color-mix(in srgb, var(--trade-warning) 9%, var(--surface)); }
.timing-minute-table tr.baseline td:first-child { box-shadow: inset 4px 0 var(--accent); font-weight: 900; }
.timing-minute-table tr.comparison td:first-child { box-shadow: inset 4px 0 var(--trade-warning); font-weight: 900; }
.timing-overall-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px; }
.timing-overall-card { overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.timing-overall-card h3 { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 45%, var(--surface)); font-size: 14px; }
.timing-overall-row { min-height: 76px; display: grid; grid-template-columns: minmax(120px, .34fr) minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 10px 14px; }
.timing-overall-row > * { min-width: 0; }
.timing-overall-row + .timing-overall-row { border-top: 1px solid var(--line); }
.timing-overall-row > strong { color: var(--ink); font-size: 13px; }
.timing-overall-row:nth-of-type(2) > strong { color: var(--accent); }
.timing-overall-row > span { color: var(--muted); font-size: 12px; }
.timing-overall-result { grid-column: 1 / -1; text-align: right; line-height: 1.35; overflow-wrap: anywhere; font-weight: 900; font-variant-numeric: tabular-nums; }
.timing-overall-card small { font-size: 11px; font-weight: 700; }
.pattern-order-lines-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.pattern-order-lines-head h3 { margin: 0; font-size: 14px; }
.pattern-order-lines-head span { color: var(--muted); font-size: 12px; }
.pattern-order-lines-table { min-width: 0; table-layout: fixed; }
.pattern-order-lines-table th, .pattern-order-lines-table td { text-align: center; }
.pattern-order-lines-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.pattern-order-lines-table th:first-child { width: 14%; }
.trading-empty { min-height: 180px; display: grid; place-items: center; color: var(--muted); }
.pattern-import-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.pattern-import-bar[hidden] { display: none; }
.trading-data-table { min-width: 900px; }
.trading-data-table th, .trading-data-table td { text-align: center; }
.trading-data-table td:nth-child(5),
.trading-data-table td:nth-child(6),
.trading-data-table td:nth-child(7),
.trading-data-table td:nth-child(8),
.trading-data-table td:nth-child(11) { text-align: right; font-variant-numeric: tabular-nums; }
.trading-data-table.broker-account-table th,
.trading-data-table.broker-account-table td { text-align: center; }
.broker-account-status { position: static; display: inline-flex; min-width: 42px; align-items: center; justify-content: center; padding: 4px 9px; border: 1px solid var(--line); border-radius: 99px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.broker-account-status.success { color: var(--trade-buy); border-color: color-mix(in srgb, var(--trade-buy) 40%, var(--line)); background: color-mix(in srgb, var(--trade-buy) 8%, var(--surface)); }
.broker-account-status.warning { color: var(--trade-warning); border-color: color-mix(in srgb, var(--trade-warning) 40%, var(--line)); background: color-mix(in srgb, var(--trade-warning) 8%, var(--surface)); }
.broker-account-status.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.direction-arrow { display: inline-flex; min-width: 24px; justify-content: center; font-size: 20px; font-weight: 900; line-height: 1; }
.direction-arrow.up { color: var(--trade-up); }.direction-arrow.down { color: var(--trade-down); }.direction-arrow.flat { color: var(--muted); }
.trading-data-table tr.close-minus-30 td { font-weight: 900; }
.order-reference-create { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(520px, 1.1fr); gap: 18px; padding: 18px; }
.order-entry-mode-row { grid-column: 1 / -1; display: flex; align-items: end; gap: 12px; padding: 0 0 2px; }
.order-entry-mode-row label { display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 800; }
.order-entry-mode-row select { min-width: 190px; border-radius: 5px; }
.order-entry-mode-row small { padding-bottom: 8px; color: var(--muted); }
.order-extraction-progress { grid-column: 1 / -1; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); font-size: var(--trading-font-body); }
.order-extraction-progress p { margin: 0; line-height: 1.6; }
.order-extraction-progress progress { display: block; width: 100%; height: 10px; margin: 8px 0; accent-color: var(--accent); }
.order-reference-create.manual-entry { grid-template-columns: minmax(0, 1fr); }
.order-reference-create.manual-entry .order-image-column { display: none; }
.order-image-column { min-width: 0; }
.order-image-picker { position: relative; min-height: 520px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--accent); border-radius: 7px; background: var(--canvas); cursor: pointer; }
.order-image-picker:focus { outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); }
.order-image-picker[contenteditable="true"] { caret-color: transparent; }
.order-image-remove { position: absolute; z-index: 2; top: 12px; right: 12px; background: var(--surface); }
.order-image-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.order-image-picker span { color: var(--muted); font-weight: 800; }
.order-image-picker img { display: block; width: 100%; height: auto; object-fit: contain; background: var(--surface); }
.order-image-picker.has-image { min-height: 0; align-content: start; }
.order-input-column { min-width: 0; display: grid; align-content: start; gap: 16px; }
.order-application-override-reason { grid-column: 1 / -1; }
.order-lines-wrap { overflow-x: hidden; }
.order-lines-table { min-width: 0; table-layout: fixed; }
.order-lines-table th, .order-lines-table td { text-align: center; }
.order-lines-table th:nth-child(1) { width: 18%; }.order-lines-table th:nth-child(2) { width: 30%; }.order-lines-table th:nth-child(3) { width: 20%; }.order-lines-table th:nth-child(4) { width: 12%; }.order-lines-table th:nth-child(5) { width: 20%; }
.order-lines-table input { min-height: 34px; padding: 6px 8px; border-radius: 4px; text-align: right; }
.extraction-missing { border-color: var(--danger-line) !important; background: var(--danger-soft) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 12%, transparent); }
.extraction-missing-label::after { content: "확인 필요"; justify-self: start; color: var(--danger); font-size: 11px; font-weight: 900; }
[data-order-check] { font-size: 11px; font-weight: 800; white-space: nowrap; }
[data-order-check].recognized { color: var(--trade-buy); }
[data-order-check].missing { color: var(--danger); }
.trade-side { display: inline-flex; min-width: 46px; justify-content: center; padding: 5px 8px; border-radius: 99px; font-size: 12px; font-weight: 900; }
.trade-side.buy { color: var(--trade-buy); background: color-mix(in srgb, var(--trade-buy) 12%, var(--surface)); }.trade-side.sell { color: var(--trade-sell); background: color-mix(in srgb, var(--trade-sell) 12%, var(--surface)); }
.order-sheet-input-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.order-sheet-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; }
.order-sheet-panel h3 { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--canvas); font-size: 13px; font-weight: 900; }
.order-sheet-panel h3:not(:first-child) { border-top: 1px solid var(--line); }
.order-sheet-panel .order-lines-wrap { border: 0; }
.order-side-buy td { background: color-mix(in srgb, var(--trade-buy) 2.5%, var(--surface)); }
.order-side-sell td { background: color-mix(in srgb, var(--trade-sell) 2.5%, var(--surface)); }
.order-side-buy + .order-side-sell td { border-top: 1px solid var(--line); }
.order-sheet-panel .order-lines-table th, .order-sheet-panel .order-lines-table td { padding: 6px; }
.order-sheet-panel .cycle-grid, .order-sheet-panel .order-sheet-quantity-grid { padding: 10px; }
.order-sheet-quantity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.order-sheet-quantity-grid label:last-child { grid-column: 1 / -1; }
.order-search-grid { grid-template-columns: minmax(0, 1fr) auto; }
.order-search-grid .order-date-field { grid-column: 1 / -1; }
#trading-order-reference-view .trading-panel > .table-wrap,
#trading-order-reference-view .order-sheet-panel > .table-wrap { margin: 16px; width: calc(100% - 32px); max-width: calc(100% - 32px); border: 1px solid var(--line); border-radius: 4px; box-sizing: border-box; }
.order-reference-detail-grid { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(520px, 1.1fr); gap: 18px; padding: 18px; }
.saved-order-image { min-height: 520px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: var(--canvas); }
.saved-order-image img { width: 100%; height: 100%; max-height: 860px; object-fit: contain; }
.saved-order-image-empty { max-width: 380px; display: grid; justify-items: center; gap: 10px; padding: 32px; color: var(--muted); text-align: center; }
.saved-order-image-empty[hidden] { display: none; }
.saved-order-image-empty > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font-size: 27px; line-height: 1; }
.saved-order-image-empty strong { color: var(--ink); font-size: 15px; }
.saved-order-image-empty p { margin: 0; font-size: 12px; line-height: 1.6; }
.order-reference-detail-form { min-width: 0; display: grid; align-content: start; gap: 12px; }
.order-reference-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--line); }
.order-reference-meta label { min-width: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; background: var(--surface); font-size: 12px; font-weight: 900; }
.order-reference-meta label > span { min-width: 0; padding: 0 14px; line-height: 1.4; }
.order-reference-meta input { min-width: 0; min-height: 40px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--surface); }
.order-reference-comparison { min-width: 0; }
.order-reference-comparison input[readonly], .order-reference-meta input[readonly] { color: var(--ink); background: color-mix(in srgb, var(--canvas) 45%, var(--surface)); cursor: default; }
.order-reference-comparison input:not([readonly]), .order-reference-meta input:not([readonly]) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.order-detail-head-actions { display: flex; align-items: center; gap: 10px; }
#order-reference-detail-actions { padding-top: 4px; }

.scheduler-panel + .scheduler-panel { margin-top: 18px; }
.scheduler-task-form, .scheduler-schedule-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scheduler-wide-field { grid-column: 1 / -1; }
.scheduler-checkbox-field { display: flex !important; grid-template-columns: auto 1fr; align-items: center; align-self: end; min-height: 44px; }
.scheduler-checkbox-field input { width: 18px; min-width: 18px; height: 18px; }
.scheduler-config-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.scheduler-config-fields label { display: grid; gap: 6px; }
.scheduler-weekdays { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 5px; }
.scheduler-weekdays legend { padding: 0 5px; color: var(--ink); font-size: 12px; font-weight: 800; }
.scheduler-weekdays label { min-width: 42px; display: inline-flex; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 5px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); cursor: pointer; }
.scheduler-weekdays input { width: 15px; min-width: 15px; height: 15px; }
.scheduler-table td:last-child { white-space: nowrap; }
.scheduler-table .button { min-height: 30px; padding: 5px 8px; margin: 2px; font-size: 11px; }
.scheduler-task-selected { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.scheduler-table tbody tr[data-selectable] { cursor: pointer; }
.scheduler-table tbody tr[data-selectable]:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.scheduler-result { max-width: 340px; white-space: normal; word-break: break-word; }
.scheduler-status { display: inline-flex; padding: 3px 7px; border: 1px solid var(--line); border-radius: 99px; font-size: 11px; font-weight: 800; }
.scheduler-status.active, .scheduler-status.completed, .scheduler-status.succeeded, .scheduler-status.no_data { color: var(--trade-buy); border-color: color-mix(in srgb, var(--trade-buy) 40%, var(--line)); }
.scheduler-status.failed, .scheduler-status.cancelled { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.scheduler-status.running, .scheduler-status.queued, .scheduler-status.pending, .scheduler-status.partial { color: var(--trade-warning); border-color: color-mix(in srgb, var(--trade-warning) 40%, var(--line)); }
.scheduler-empty-detail { padding: 28px 18px; color: var(--muted); text-align: center; }
.scheduler-detail-fieldset { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 5px; }
.scheduler-detail-fieldset legend { padding: 0 6px; color: var(--ink); font-size: 13px; font-weight: 900; }
.scheduler-module-detail { display: grid; gap: 14px; }
.scheduler-module-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.scheduler-module-summary div, .scheduler-runtime-summary { padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: color-mix(in srgb, var(--canvas) 42%, var(--surface)); }
.scheduler-module-summary small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.scheduler-module-summary strong { color: var(--ink); font-size: 12px; }
.scheduler-module-description { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.65; }
.scheduler-module-steps { display: grid; gap: 6px; margin: 0; padding-left: 22px; color: var(--ink); font-size: 12px; line-height: 1.55; }
.scheduler-module-notes { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.scheduler-inline-filter, .scheduler-run-filters label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.scheduler-inline-filter select, .scheduler-run-filters select { min-width: 170px; }
.scheduler-run-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.scheduler-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.scheduler-toggle input { width: 18px; height: 18px; }
.scheduler-runtime-summary { color: var(--muted); font-size: 12px; line-height: 1.6; }
.scheduler-link-button { border: 0; padding: 0; color: var(--accent); background: transparent; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }

@media (min-width: 1025px) {
  .trading-app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
  .trading-app-shell.sidebar-collapsed .trading-app-nav { width: 0; padding-right: 0; padding-left: 0; overflow: hidden; opacity: 0; transform: translateX(-100%); pointer-events: none; }
}

@media (max-width: 1050px) {
  .order-reference-create, .order-reference-detail-grid { grid-template-columns: 1fr; }
  .order-image-picker { min-height: 420px; }
  .trading-modal .order-image-picker { min-height: 420px; }
  .order-image-picker.has-image, .trading-modal .order-image-picker.has-image { min-height: 0; }
  .pattern-search-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)) auto; }
  .pattern-search-grid .trading-form-actions { grid-column: -2 / -1; }
  .month-date-strip { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .close-market-analysis-grid { grid-template-columns: 1fr; }
  .simulation-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simulation-search-grid .condition-action-row { grid-column: 1 / -1; }
  .timing-selected-summary { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .timing-overall-summary { grid-template-columns: 1fr; }
  .scheduler-config-fields { grid-template-columns: 1fr; }
  .scheduler-module-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .trading-app-shell { min-width: 0; display: block; }
  .trading-app-nav { position: fixed; z-index: 20; width: 248px; transform: translateX(-100%); transition: transform .2s ease; }
  .trading-app-shell.menu-open .trading-app-nav { transform: translateX(0); }
  .trading-app-header { padding: 12px 18px; }
  .trading-app-header .app-theme-control { display: none; }
}

@media (max-width: 900px) {
  .trading-page-head, .trading-panel-head { align-items: flex-start; flex-direction: column; }
  .trading-app-main { padding: 20px 14px 40px; }
  .trading-search-grid, .trading-form-grid { grid-template-columns: 1fr; }
  .scheduler-wide-field { grid-column: auto; }
  .scheduler-module-summary { grid-template-columns: 1fr; }
  .order-reference-create { padding: 12px; grid-template-columns: minmax(0, 1fr); }
  .order-sheet-input-layout, .order-reference-meta { grid-template-columns: 1fr; }
  .order-reference-meta label { grid-template-columns: 120px minmax(0, 1fr); }
  .trading-modal { padding: 0; }
  .trading-modal-dialog { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
  .trading-modal-head { padding: 10px 12px; }
  .trading-modal-head > div { align-items: flex-start; flex-direction: column; gap: 2px; }
  .order-modal-message { margin: 10px 12px 0; }
  .order-entry-calendar-panel { padding: 10px 12px; }
  .order-entry-calendar-panel .month-date-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .pattern-search-grid { grid-template-columns: 1fr; }
  .pattern-search-grid .trading-form-actions { grid-column: auto; }
  .month-date-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .market-analysis-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-analysis-times { grid-template-columns: 1fr; }
  .market-analysis-times .button { grid-column: auto; }
  .market-boundary-summary { grid-template-columns: 1fr; }
  .simulation-search-grid { grid-template-columns: 1fr; }
  .simulation-search-grid .condition-action-row { grid-column: 1 / -1; }
  .simulation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timing-selected-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timing-overall-row { grid-template-columns: 1fr; gap: 5px; }
  .timing-overall-result { text-align: left; }
  .trading-chart-wrap { padding: 8px; }
  .trading-chart-guide { align-items: flex-start; flex-direction: column; }
  .pattern-chart-scale-controls { width: 100%; flex-wrap: wrap; white-space: normal; }
  .pattern-chart-scale-controls small { min-width: 0; margin-left: auto; }
  .trading-price-scroll {
    height: 360px;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: none;
    scrollbar-gutter: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }
  .trading-price-scroll::-webkit-scrollbar,
  .trading-volume-wrap::-webkit-scrollbar { width: 0; height: 0; }
  .trading-price-scroll svg,
  .trading-volume-wrap svg { width: auto; max-width: none; }
  .trading-volume-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .pattern-chart-stage:fullscreen {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    background: var(--surface);
  }
  .pattern-chart-stage:fullscreen .trading-price-scroll { height: auto; min-height: 0; }
  .pattern-order-lines-head { align-items: flex-start; flex-direction: column; }
  .pattern-order-lines-table { min-width: 0; display: block; }
  .pattern-order-lines-table thead { display: none; }
  .pattern-order-lines-table tbody { display: grid; gap: 8px; padding: 8px; }
  .pattern-order-lines-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
  .pattern-order-lines-table tbody td { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); white-space: normal; text-align: right; }
  .pattern-order-lines-table tbody td::before { color: var(--muted); font-size: 10px; text-align: left; content: attr(data-label); }
  .pattern-order-lines-table tbody td:first-child { grid-column: 1 / -1; display: block; text-align: left; background: color-mix(in srgb, var(--canvas) 50%, var(--surface)); }
  .pattern-order-lines-table tbody td:first-child::before { display: none; }
}