:root {
  --ink: #17152c;
  --muted: #7b778a;
  --faint: #a4a0ad;
  --line: rgba(61, 53, 100, .105);
  --panel: rgba(255, 255, 255, .79);
  --panel-solid: #fbfaff;
  --violet: #6958dc;
  --violet-deep: #4939b6;
  --violet-soft: #ebe7ff;
  --mint: #3ecb9b;
  --mint-deep: #168565;
  --cyan: #55bdd2;
  --coral: #ee6f7d;
  --coral-deep: #be4253;
  --yellow: #f3b94c;
  --shadow: 0 20px 50px rgba(43, 35, 88, .11), 0 2px 7px rgba(49, 41, 90, .045);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: #f5f3fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background:
  radial-gradient(circle at 12% 2%, rgba(124, 107, 235, .12), transparent 28%),
  radial-gradient(circle at 94% 24%, rgba(76, 208, 178, .09), transparent 24%),
  linear-gradient(180deg, #f8f7fd 0%, #f3f1f8 100%); }
button, input { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible, svg[tabindex]:focus-visible { outline: 3px solid rgba(89, 75, 202, .27); outline-offset: 3px; }
button:disabled { cursor: default; opacity: .46; }

.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.ambient-one { top: 30%; left: -160px; width: 330px; height: 330px; background: rgba(83, 192, 213, .12); }
.ambient-two { right: -190px; bottom: 4%; width: 430px; height: 430px; background: rgba(123, 101, 222, .11); }
.app-shell { width: min(1440px, calc(100% - 44px)); margin: 0 auto; padding: 30px 0 34px; }
.glass-panel { border: 1px solid rgba(255, 255, 255, .9); background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); }

.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 14px 8px 25px; }
.eyebrow, .section-number { margin: 0; color: #7569b4; font-size: .65rem; font-weight: 850; letter-spacing: .18em; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow span { width: 24px; height: 2px; background: var(--violet); }
.hero h1 { margin: 8px 0 7px; font-size: clamp(2.3rem, 5.6vw, 5rem); line-height: .94; letter-spacing: -.07em; }
.hero h1 span { color: var(--violet); }
.hero-lead { margin: 0; color: #625e72; font-size: clamp(.85rem, 1.5vw, 1.08rem); font-weight: 650; line-height: 1.7; }
.target-lockup { min-width: 270px; padding: 15px 18px; border-left: 3px solid var(--mint); text-align: right; }
.target-lockup span, .target-lockup small, .target-lockup strong { display: block; }
.target-lockup span { color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .13em; }
.target-lockup strong { margin: 6px 0 2px; color: #40359a; font-size: 1.45rem; letter-spacing: -.04em; }
.target-lockup small { color: var(--faint); font-size: .66rem; font-weight: 700; }
.disclaimer { margin: 0 0 11px; padding: 10px 15px; border: 1px solid rgba(104, 88, 213, .11); border-radius: 12px; color: #6d687b; background: rgba(245, 242, 255, .72); font-size: .66rem; line-height: 1.55; }

.replay-bar { display: grid; grid-template-columns: auto minmax(230px, 1fr) auto; align-items: center; gap: 22px; padding: 14px 16px; border-radius: 20px; }
.timeline-identity { display: flex; align-items: center; gap: 12px; min-width: 245px; }
.timeline-identity p { margin: 0 0 5px; color: #7f798e; font-size: .57rem; font-weight: 850; letter-spacing: .12em; }
.timeline-identity strong { display: flex; gap: 7px; color: #3f3a53; font-size: .69rem; }
.timeline-identity i { color: #bbb7c4; font-style: normal; }
.phase-badge { display: grid; place-items: center; min-width: 58px; height: 44px; padding: 0 8px; border-radius: 12px; color: #5c52a5; background: #ece9ff; font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.phase-badge[data-state="running"] { color: #147958; background: rgba(69, 207, 158, .15); }
.phase-badge[data-state="paused"] { color: #8d6416; background: rgba(243, 185, 76, .18); }
.phase-badge[data-state="complete"] { color: #5143bb; background: rgba(105, 88, 220, .14); }
.phase-badge[data-state="gameover"] { color: var(--coral-deep); background: rgba(238, 111, 125, .14); }
.progress-track { position: relative; height: 8px; border-radius: 999px; background: #e9e6ef; }
.progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), #978bf0, var(--mint)); transition: width 180ms linear; }
.progress-marks { position: absolute; top: 13px; left: 0; display: flex; justify-content: space-between; width: 100%; color: #a09ba8; font-size: .47rem; font-weight: 750; }
.replay-controls { display: flex; align-items: center; gap: 7px; }
.start-button, .icon-button, .speed-switch { min-height: 54px; border: 1px solid var(--line); border-radius: 14px; }
.start-button { display: flex; align-items: center; gap: 10px; min-width: 196px; padding: 8px 13px; border-color: rgba(86, 70, 198, .12); color: white; background: linear-gradient(135deg, #6555d7, #8271e4); box-shadow: 0 9px 20px rgba(76, 61, 177, .22); cursor: pointer; text-align: left; transition: transform 140ms var(--ease-out), box-shadow 140ms ease; }
.start-button span:last-child, .start-button strong, .start-button small { display: block; }
.start-button strong { font-size: .7rem; }
.start-button small { margin-top: 3px; color: rgba(255, 255, 255, .68); font-size: .53rem; }
.play-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .15); font-size: .66rem; }
.icon-button { width: 58px; padding: 5px; border-color: var(--line); color: #5f5a70; background: rgba(255, 255, 255, .68); cursor: pointer; }
.icon-button span, .icon-button small { display: block; }
.icon-button span { font-size: .74rem; font-weight: 900; }
.icon-button small { margin-top: 3px; font-size: .43rem; font-weight: 850; }
.speed-switch { display: flex; align-items: center; gap: 3px; padding: 5px; background: rgba(255, 255, 255, .6); }
.speed-switch > span { margin: 0 5px; color: #98939f; font-size: .43rem; font-weight: 850; letter-spacing: .12em; }
.speed-button { min-width: 39px; height: 42px; border: 0; border-radius: 10px; color: #757080; background: transparent; cursor: pointer; font-size: .56rem; font-weight: 850; }
.speed-button.is-active { color: var(--violet-deep); background: white; box-shadow: 0 5px 14px rgba(61, 48, 139, .12); }

.score-strip { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.score-card { min-width: 0; padding: 14px 16px; border: 1px solid rgba(63, 54, 104, .075); border-radius: 17px; background: rgba(255, 255, 255, .68); }
.score-card span, .score-card strong, .score-card small { display: block; }
.score-card span { color: #8e8998; font-size: .57rem; font-weight: 700; }
.score-card strong { overflow: hidden; margin: 7px 0 4px; color: #24203c; font-size: clamp(.86rem, 1.7vw, 1.12rem); letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.score-card small { color: #aaa5b1; font-size: .51rem; line-height: 1.35; }
.primary-score { background: linear-gradient(135deg, rgba(235, 231, 255, .92), rgba(255, 255, 255, .75)); }
.primary-score strong { color: #493bb1; font-size: clamp(1rem, 2vw, 1.35rem); }
.positive { color: var(--mint-deep) !important; }
.negative { color: var(--coral-deep) !important; }
.neutral { color: #8d8897 !important; }

.terminal-grid { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(320px, .78fr); gap: 10px; }
.chart-panel, .order-ticket, .wealth-panel, .log-panel { min-width: 0; border-radius: 24px; }
.chart-panel { padding: 21px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-heading h2 { margin: 5px 0 0; font-size: 1rem; letter-spacing: -.025em; }
.price-lockup { text-align: right; }
.price-lockup span, .price-lockup strong, .price-lockup small { display: block; }
.price-lockup span { color: #8b8696; font-size: .5rem; font-weight: 850; letter-spacing: .12em; }
.price-lockup strong { margin: 3px 0 1px; color: #4136a2; font-size: 1.45rem; letter-spacing: -.04em; }
.price-lockup small { font-size: .56rem; font-weight: 800; }
.chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-top: 15px; padding: 9px 11px; border: 1px solid rgba(62, 54, 101, .065); border-radius: 11px; color: #8b8693; background: rgba(255, 255, 255, .52); font-size: .51rem; }
.chart-legend, .wealth-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.chart-legend span, .wealth-legend span { display: flex; align-items: center; gap: 4px; }
.chart-legend i, .wealth-legend i { display: inline-block; width: 11px; height: 3px; border-radius: 999px; }
.up-key { background: var(--mint); }
.down-key { background: var(--coral); }
.limit-key { background: var(--yellow); }
.entry-key { background: var(--cyan); }
#price-chart { display: block; width: 100%; min-height: 380px; margin-top: 7px; overflow: visible; border-radius: 15px; background: rgba(252, 251, 255, .7); cursor: crosshair; }
.chart-grid { stroke: rgba(54, 47, 85, .075); stroke-width: 1; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
.chart-axis { fill: #9994a2; font-size: 11px; font-weight: 700; }
.chart-axis-label { fill: #aaa5b1; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.candle-wick { stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.candle-body { stroke-width: .7; vector-effect: non-scaling-stroke; }
.candle-up .candle-wick, .candle-up .candle-body { stroke: #28ae81; fill: rgba(62, 203, 155, .68); }
.candle-down .candle-wick, .candle-down .candle-body { stroke: #dc5969; fill: rgba(238, 111, 125, .7); }
.current-price-line { stroke: #5748c8; stroke-width: 1.2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.current-price-pill { fill: #5748c8; }
.current-price-text { fill: white; font-size: 10px; font-weight: 850; }
.order-line { stroke: var(--yellow); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.order-label { fill: #a97618; font-size: 10px; font-weight: 850; }
.order-line.is-edge { stroke-width: 2; stroke-dasharray: 2 4; opacity: .72; }
.order-label.is-edge { font-size: 9px; }
.stop-line { stroke: #d58d20; stroke-width: 2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.stop-label { fill: #a96612; font-size: 10px; font-weight: 900; }
.stop-line.is-edge { opacity: .75; }
.stop-label.is-edge { font-size: 9px; }
.entry-line { stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.entry-label { fill: #267f92; font-size: 10px; font-weight: 850; }
.entry-line.is-edge { stroke-width: 2.2; stroke-dasharray: 2 4; opacity: .78; }
.entry-label.is-edge { font-size: 9px; }
.chart-crosshair { stroke: rgba(79, 66, 180, .32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 3px 1px; color: #9994a2; font-size: .53rem; }
.chart-foot kbd, .shortcut-note kbd { padding: 2px 5px; border: 1px solid rgba(64, 54, 105, .12); border-radius: 5px; color: #696276; background: white; box-shadow: 0 1px 0 rgba(42, 35, 78, .08); font-size: .48rem; font-weight: 850; }
.chart-foot strong { color: #7168a7; font-size: .5rem; letter-spacing: .04em; }

.order-ticket { padding: 21px; }
.ticket-status { padding: 6px 8px; border-radius: 999px; color: #1d7d62; background: rgba(62, 203, 155, .13); font-size: .5rem; font-weight: 850; }
.ticket-status.is-paused { color: #8b651b; background: rgba(243, 185, 76, .16); }
.ticket-status.is-terminal { color: var(--coral-deep); background: rgba(238, 111, 125, .14); }
.position-card { margin-top: 15px; padding: 14px; border: 1px solid rgba(96, 78, 200, .11); border-radius: 15px; background: linear-gradient(135deg, rgba(238, 235, 255, .76), rgba(255, 255, 255, .55)); }
.position-card > div { display: flex; align-items: center; justify-content: space-between; }
.position-card > div span { color: #8d8799; font-size: .49rem; font-weight: 850; letter-spacing: .12em; }
.position-card > div strong { color: #5143bb; font-size: 1rem; }
.position-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 11px 0 0; }
.position-card dl div { min-width: 0; padding-top: 8px; border-top: 1px solid rgba(74, 63, 132, .08); }
.position-card dt { color: #9b96a5; font-size: .47rem; }
.position-card dd { overflow: hidden; margin: 4px 0 0; color: #433f51; font-size: .58rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.size-selector { margin: 14px 0 0; padding: 0; border: 0; }
.size-selector legend { width: 100%; color: #4b465b; font-size: .59rem; font-weight: 850; }
.size-selector legend small { float: right; color: #a09ba8; font-size: .47rem; font-weight: 650; }
.size-selector > [role="radiogroup"] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.size-button { min-height: 40px; border: 1px solid rgba(64, 55, 104, .09); border-radius: 10px; color: #6e6978; background: rgba(255, 255, 255, .64); cursor: pointer; font-size: .59rem; font-weight: 850; transition: transform 130ms var(--ease-out), background-color 130ms ease, border-color 130ms ease; }
.size-button.is-active { border-color: rgba(93, 76, 205, .23); color: var(--violet-deep); background: var(--violet-soft); box-shadow: inset 0 0 0 1px rgba(92, 75, 204, .05); }
.danger-size.is-active { border-color: rgba(238, 111, 125, .26); color: var(--coral-deep); background: rgba(238, 111, 125, .1); }
.size-selector > p { margin: 7px 0 0; color: #a19ca9; font-size: .48rem; line-height: 1.5; }
.order-size-preview { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; margin-top: 8px; padding: 9px 10px; border: 1px solid rgba(93, 76, 205, .12); border-radius: 11px; background: rgba(238, 235, 255, .58); }
.order-size-preview span { grid-row: 1 / 3; color: #8d8799; font-size: .47rem; }
.order-size-preview span b { display: block; margin-top: 2px; color: #5548bd; font-size: .76rem; }
.order-size-preview strong { color: #4137a0; font-size: .61rem; }
.order-size-preview small { color: #837d8f; font-size: .46rem; }
.size-selector .order-size-rule { margin-top: 8px; color: #716b7d; }
.size-selector .order-size-rule strong { color: #4d465d; }
.size-selector .leverage-warning { margin-top: 4px; }
.market-orders, .stop-orders, .limit-orders, .pending-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(57, 49, 94, .08); }
.ticket-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ticket-section-heading > span { color: #514c61; font-size: .59rem; font-weight: 850; }
.ticket-section-heading > small { color: #9f9aa7; font-size: .47rem; }
.ticket-section-heading b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; border-radius: 999px; color: var(--violet-deep); background: var(--violet-soft); font-size: .48rem; }
.market-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.trade-button { position: relative; min-height: 66px; padding: 8px 9px 8px 35px; overflow: hidden; border: 0; border-radius: 13px; cursor: pointer; text-align: left; transition: transform 130ms var(--ease-out), filter 130ms ease; }
.trade-button > span { position: absolute; top: 10px; left: 9px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; color: rgba(255, 255, 255, .84); background: rgba(255, 255, 255, .16); font-size: .49rem; font-weight: 900; }
.trade-button strong, .trade-button small { display: block; }
.trade-button strong { color: white; font-size: .65rem; }
.trade-button small { margin-top: 5px; color: rgba(255, 255, 255, .67); font-size: .45rem; font-weight: 800; letter-spacing: .06em; }
.buy-button { background: linear-gradient(135deg, #2eac82, #52cba4); box-shadow: 0 7px 16px rgba(41, 163, 124, .18); }
.sell-button { background: linear-gradient(135deg, #d95769, #ef7a88); box-shadow: 0 7px 16px rgba(211, 79, 96, .17); }
.close-button { width: 100%; min-height: 36px; margin-top: 6px; border: 1px solid rgba(66, 57, 105, .09); border-radius: 10px; color: #635e6e; background: rgba(255, 255, 255, .58); cursor: pointer; font-size: .55rem; font-weight: 800; }
.close-button span { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 5px; border-radius: 5px; color: #817a8c; background: #efedf2; font-size: .43rem; }
.limit-input { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid rgba(62, 53, 102, .09); border-radius: 11px; background: rgba(255, 255, 255, .6); }
.limit-input span { color: #918b9a; font-size: .46rem; font-weight: 850; letter-spacing: .08em; }
.limit-input input { min-width: 0; width: 108px; border: 0; color: #332f42; background: transparent; font-size: .84rem; font-weight: 850; text-align: right; }
.limit-input input:focus { outline: 0; }
.limit-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
.limit-buttons button { min-height: 39px; border: 1px solid rgba(65, 55, 104, .09); border-radius: 10px; color: #5e586a; background: rgba(255, 255, 255, .68); cursor: pointer; font-size: .55rem; font-weight: 850; }
.limit-buttons button:first-child { color: #188260; border-color: rgba(62, 203, 155, .18); }
.limit-buttons button:last-child { color: #b64b5a; border-color: rgba(238, 111, 125, .18); }
.limit-buttons button:disabled { cursor: not-allowed; filter: grayscale(.25); opacity: .48; }
.stop-buttons button:first-child { color: #9a6618; border-color: rgba(229, 169, 54, .3); background: rgba(255, 248, 229, .72); }
.stop-buttons button:last-child { color: #756f7f; border-color: rgba(65, 55, 104, .09); }
.limit-hint { min-height: 2.6em; margin: 7px 1px 0; color: #a09ba7; font-size: .47rem; line-height: 1.4; }
.limit-hint.is-error { color: var(--coral-deep); }
#cancel-all { border: 0; color: #756dae; background: transparent; cursor: pointer; font-size: .47rem; font-weight: 800; }
.pending-orders { display: grid; gap: 5px; max-height: 112px; overflow-y: auto; }
.empty-order { margin: 7px 0; color: #aaa5b0; font-size: .51rem; text-align: center; }
.pending-order { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid rgba(61, 52, 100, .075); border-radius: 9px; background: rgba(255, 255, 255, .55); }
.pending-order > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: white; font-size: .45rem; font-weight: 900; }
.pending-order[data-side="buy"] > span { background: var(--mint); }
.pending-order[data-side="sell"] > span { background: var(--coral); }
.pending-order[data-side="stop"] > span { background: #d79a2b; }
.pending-order strong, .pending-order small { display: block; }
.pending-order strong { font-size: .54rem; }
.pending-order small { margin-top: 2px; color: #a09ba8; font-size: .45rem; }
.pending-order button { width: 25px; height: 25px; border: 0; border-radius: 8px; color: #847e8d; background: #eeecf1; cursor: pointer; font-size: .55rem; }
.shortcut-note { margin: 14px 0 0; color: #9e99a5; font-size: .45rem; line-height: 1.8; text-align: center; }

.lower-grid { display: grid; grid-template-columns: 1.45fr .75fr; gap: 10px; margin-top: 10px; }
.wealth-panel, .log-panel { padding: 21px; }
.compact-heading h2 { font-size: .9rem; }
.wealth-legend { color: #8e8997; font-size: .5rem; }
.asset-key { background: var(--violet); }
.target-key { background: var(--mint); }
.benchmark-key { background: #a29daa; }
#wealth-chart { display: block; width: 100%; min-height: 200px; margin-top: 8px; border-radius: 14px; background: rgba(252, 251, 255, .65); }
.wealth-grid { stroke: rgba(54, 47, 85, .07); stroke-width: 1; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
.wealth-axis { fill: #a39eaa; font-size: 9px; font-weight: 750; }
.wealth-area { fill: url(#wealthGradient); }
.wealth-line, .target-line, .benchmark-line { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wealth-line { stroke: var(--violet); stroke-width: 2.3; }
.target-line { stroke: var(--mint); stroke-width: 1.8; stroke-dasharray: 7 5; }
.benchmark-line { stroke: #aaa5b0; stroke-width: 1.4; }
.wealth-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 5px; }
.wealth-values > div { padding: 9px 11px; border: 1px solid rgba(64, 55, 103, .07); border-radius: 10px; background: rgba(255, 255, 255, .51); }
.wealth-values span, .wealth-values strong { display: block; }
.wealth-values span { color: #9893a0; font-size: .48rem; }
.wealth-values strong { overflow: hidden; margin-top: 4px; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.live-pill { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 999px; color: #258064; background: rgba(62, 203, 155, .12); font-size: .45rem; font-weight: 850; letter-spacing: .08em; }
.live-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.trade-log { max-height: 272px; margin: 14px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.trade-log li { display: grid; grid-template-columns: 48px 8px 1fr; align-items: center; gap: 8px; min-height: 35px; border-bottom: 1px solid rgba(58, 50, 94, .055); color: #625d6d; font-size: .54rem; line-height: 1.4; }
.trade-log time { color: #9f9aa7; font-size: .44rem; font-weight: 750; }
.trade-log i { width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: #aaa4b5; box-shadow: 0 0 0 1px rgba(62, 53, 103, .08); }
.trade-log li[data-type="trade"] i { background: var(--mint); }
.trade-log li[data-type="order"] i { background: var(--yellow); }
.trade-log li[data-type="reject"] i, .trade-log li[data-type="gameover"] i { background: var(--coral); }
.trade-log li[data-type="year"] i, .trade-log li[data-type="complete"] i { background: var(--violet); }

.result-section { position: relative; margin-top: 10px; padding: 34px; overflow: hidden; border-radius: 26px; }
.result-glow { position: absolute; top: -250px; right: -130px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(125, 105, 230, .19), transparent 67%); pointer-events: none; }
.result-section h2 { position: relative; max-width: 760px; margin: 8px 0 24px; font-size: clamp(1.8rem, 4.4vw, 3.7rem); line-height: 1.08; letter-spacing: -.06em; }
.result-hero { position: relative; padding: 22px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 19px; background: linear-gradient(135deg, rgba(237, 233, 255, .9), rgba(255, 255, 255, .68)); }
.result-hero span, .result-hero strong, .result-hero b { display: block; }
.result-hero span { color: #817b8f; font-size: .62rem; font-weight: 750; }
.result-hero strong { margin: 6px 0 2px; color: var(--violet-deep); font-size: clamp(2rem, 6vw, 4.7rem); line-height: 1; letter-spacing: -.06em; }
.result-hero b { color: #4e4693; font-size: .72rem; }
.result-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 8px; }
.result-grid div { padding: 13px 14px; border: 1px solid rgba(65, 56, 103, .07); border-radius: 12px; background: rgba(255, 255, 255, .5); }
.result-grid span, .result-grid strong { display: block; }
.result-grid span { color: #9994a1; font-size: .49rem; }
.result-grid strong { margin-top: 5px; font-size: .7rem; }
.result-insight { position: relative; margin-top: 10px; padding: 16px 18px; border-radius: 14px; color: white; background: #242044; }
.result-insight span { color: #aaa2ed; font-size: .48rem; font-weight: 850; letter-spacing: .14em; }
.result-insight p { margin: 7px 0 0; color: rgba(255, 255, 255, .82); font-size: .67rem; line-height: 1.65; }
.result-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.result-actions button { min-height: 44px; padding: 0 16px; border: 1px solid rgba(89, 73, 195, .16); border-radius: 11px; color: #5648bd; background: white; cursor: pointer; font-size: .58rem; font-weight: 850; }
.result-actions button:last-child { color: white; background: var(--violet); }

footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 7px 0; }
footer p { margin: 0; color: #a09ba7; font-size: .48rem; font-weight: 700; letter-spacing: .04em; }
.footer-actions { display: flex; gap: 5px; }
.footer-actions button { min-height: 35px; padding: 0 11px; border: 1px solid rgba(66, 56, 105, .09); border-radius: 9px; color: #716b7d; background: rgba(255, 255, 255, .55); cursor: pointer; font-size: .5rem; font-weight: 750; }
.notice { position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: min(380px, calc(100vw - 32px)); padding: 12px 15px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 13px; color: white; background: rgba(35, 31, 64, .94); box-shadow: 0 15px 35px rgba(32, 25, 68, .24); font-size: .62rem; font-weight: 700; line-height: 1.5; animation: notice-in 180ms var(--ease-out); }
.notice[data-state="error"] { background: rgba(154, 50, 65, .96); }

@keyframes notice-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (hover: hover) and (pointer: fine) {
  .start-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(76, 61, 177, .27); }
  .trade-button:hover { transform: translateY(-2px); filter: saturate(1.06); }
  .size-button:hover, .limit-buttons button:hover, .close-button:hover, .result-actions button:hover, .footer-actions button:hover { transform: translateY(-1px); }
}
.start-button:active, .trade-button:active, .size-button:active, .limit-buttons button:active, .close-button:active, .result-actions button:active, .footer-actions button:active { transform: scale(.98); }

@media (max-width: 1080px) {
  .replay-bar { grid-template-columns: 1fr auto; }
  .progress-track { grid-column: 1 / -1; grid-row: 2; margin: 2px 12px 10px; }
  .score-strip { grid-template-columns: repeat(3, 1fr); }
  .primary-score { grid-column: span 1; }
  .terminal-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); }
  .result-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 821px) and (max-height: 900px) {
  .app-shell { width: min(1440px, calc(100% - 20px)); padding: 8px 0 16px; }
  .hero { align-items: center; gap: 16px; padding: 2px 4px 7px; }
  .brand-lockup { display: flex; align-items: baseline; gap: 15px; min-width: 0; }
  .eyebrow { display: none; }
  .hero h1 { flex: none; margin: 0; font-size: clamp(2rem, 3.3vw, 3rem); }
  .hero-lead { overflow: hidden; font-size: .68rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .target-lockup { min-width: 205px; padding: 5px 9px; }
  .target-lockup span { font-size: .45rem; }
  .target-lockup strong { margin: 2px 0 0; font-size: 1rem; }
  .target-lockup small { display: none; }
  .disclaimer { margin-bottom: 5px; padding: 5px 10px; border-radius: 8px; font-size: .53rem; line-height: 1.3; }
  .replay-bar { grid-template-columns: auto minmax(120px, 1fr) auto; gap: 10px; padding: 6px 10px; border-radius: 14px; }
  .timeline-identity { gap: 8px; min-width: 205px; }
  .timeline-identity p { margin-bottom: 2px; font-size: .48rem; }
  .timeline-identity strong { font-size: .59rem; }
  .phase-badge { min-width: 50px; height: 38px; border-radius: 9px; font-size: .49rem; }
  .progress-track { grid-column: auto; grid-row: auto; height: 6px; margin: 0; }
  .progress-marks { top: 9px; font-size: .4rem; }
  .replay-controls { gap: 4px; }
  .start-button, .icon-button, .speed-switch { min-height: 42px; border-radius: 10px; }
  .start-button { min-width: 156px; padding: 5px 8px; }
  .start-button strong { font-size: .59rem; }
  .start-button small { display: none; }
  .play-icon { width: 25px; height: 25px; border-radius: 7px; }
  .icon-button { width: 45px; }
  .icon-button small { display: none; }
  .speed-switch { padding: 4px; }
  .speed-switch > span { display: none; }
  .speed-button { min-width: 32px; height: 32px; border-radius: 7px; font-size: .49rem; }
  .score-strip { gap: 5px; margin: 5px 0; }
  .score-strip { grid-template-columns: 1.35fr repeat(4, 1fr); }
  .score-card { padding: 7px 10px; border-radius: 11px; }
  .score-card span { font-size: .47rem; }
  .score-card strong, .primary-score strong { margin: 3px 0 0; font-size: .83rem; }
  .score-card small { display: none; }
  .terminal-grid { height: calc(100vh - 209px); min-height: 420px; max-height: 690px; gap: 7px; }
  .chart-panel, .order-ticket { min-height: 0; height: 100%; border-radius: 16px; }
  .chart-panel { display: flex; flex-direction: column; padding: 12px; }
  .panel-heading h2 { margin-top: 3px; font-size: .82rem; }
  .section-number { font-size: .49rem; }
  .price-lockup strong { font-size: 1rem; }
  .price-lockup span { font-size: .42rem; }
  .price-lockup small { font-size: .48rem; }
  .chart-toolbar { gap: 8px; margin-top: 5px; padding: 5px 7px; border-radius: 8px; font-size: .44rem; }
  .chart-legend { gap: 6px; }
  #price-chart { flex: 1; min-height: 0; height: auto; margin-top: 3px; border-radius: 10px; }
  .chart-foot { padding-top: 3px; font-size: .44rem; }
  .chart-foot kbd, .shortcut-note kbd { font-size: .4rem; }
  .chart-foot strong { font-size: .43rem; }
  .order-ticket { overflow-y: auto; padding: 12px; scrollbar-gutter: stable; }
  .ticket-status { padding: 4px 6px; font-size: .43rem; }
  .position-card { margin-top: 7px; padding: 9px; border-radius: 10px; }
  .position-card dl { gap: 4px; margin-top: 6px; }
  .position-card dl div { padding-top: 5px; }
  .position-card dt { font-size: .42rem; }
  .position-card dd { margin-top: 2px; font-size: .5rem; }
  .size-selector { margin-top: 7px; }
  .size-selector legend { font-size: .51rem; }
  .size-selector legend small { font-size: .41rem; }
  .size-selector > [role="radiogroup"] { gap: 4px; margin-top: 5px; }
  .size-button { min-height: 32px; border-radius: 8px; font-size: .51rem; }
  .order-size-preview { gap: 1px 7px; margin-top: 5px; padding: 6px 7px; border-radius: 8px; }
  .order-size-preview span { font-size: .41rem; }
  .order-size-preview span b { font-size: .62rem; }
  .order-size-preview strong { font-size: .52rem; }
  .order-size-preview small { font-size: .4rem; }
  .size-selector > p { margin-top: 3px; font-size: .41rem; line-height: 1.35; }
  .market-orders, .stop-orders, .limit-orders, .pending-section { margin-top: 8px; padding-top: 7px; }
  .ticket-section-heading { margin-bottom: 5px; }
  .ticket-section-heading > span { font-size: .5rem; }
  .ticket-section-heading > small, #cancel-all { font-size: .41rem; }
  .trade-button { min-height: 50px; padding: 6px 7px 6px 30px; border-radius: 9px; }
  .trade-button > span { top: 7px; left: 7px; width: 18px; height: 18px; }
  .trade-button strong { font-size: .55rem; }
  .trade-button small { margin-top: 2px; font-size: .4rem; }
  .close-button { min-height: 29px; margin-top: 4px; }
  .limit-input { padding: 6px 8px; border-radius: 8px; }
  .limit-input input { font-size: .7rem; }
  .limit-buttons { margin-top: 4px; }
  .limit-buttons button { min-height: 31px; border-radius: 8px; font-size: .48rem; }
  .limit-hint { min-height: 1.4em; margin-top: 4px; font-size: .4rem; }
  .pending-orders { max-height: 58px; }
  .empty-order { margin: 3px 0; }
  .shortcut-note { display: none; }
}

@media (max-width: 820px) {
  .app-shell { width: min(100% - 24px, 720px); padding-top: 18px; }
  .hero { align-items: flex-start; flex-direction: column; gap: 15px; }
  .target-lockup { min-width: 0; padding: 9px 0 9px 13px; text-align: left; }
  .replay-bar { grid-template-columns: 1fr; gap: 13px; }
  .replay-controls { display: grid; grid-template-columns: 1fr 58px; }
  .speed-switch { grid-column: 1 / -1; justify-content: center; }
  .progress-track { grid-column: auto; grid-row: auto; margin: 0 9px 8px; }
  .score-strip { grid-template-columns: repeat(2, 1fr); }
  .primary-score { grid-column: 1 / -1; }
  .terminal-grid, .lower-grid { grid-template-columns: 1fr; }
  #price-chart { min-height: 330px; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
  footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .app-shell { width: calc(100% - 16px); padding-top: 11px; }
  .hero { padding: 9px 4px 17px; }
  .hero h1 { font-size: clamp(2.2rem, 14vw, 3.2rem); }
  .hero-lead { font-size: .76rem; }
  .disclaimer { font-size: .57rem; }
  .replay-bar { padding: 13px; border-radius: 17px; }
  .timeline-identity { min-width: 0; }
  .timeline-identity strong { flex-wrap: wrap; }
  .start-button { min-width: 0; }
  .score-card { padding: 12px; }
  .score-card strong { font-size: .86rem; }
  .primary-score strong { font-size: 1.08rem; }
  .chart-panel, .order-ticket, .wealth-panel, .log-panel { padding: 16px; border-radius: 19px; }
  .panel-heading h2 { font-size: .88rem; }
  .chart-heading { align-items: center; }
  .chart-toolbar { align-items: flex-start; flex-direction: column; }
  .chart-legend { justify-content: flex-start; }
  #price-chart { min-height: 280px; }
  .chart-foot { align-items: flex-start; flex-direction: column; }
  .position-card dl { grid-template-columns: 1fr 1fr; }
  .position-card dl div:last-child { grid-column: 1 / -1; }
  .size-selector legend small { display: block; float: none; margin-top: 3px; }
  .wealth-legend { justify-content: flex-start; margin-top: 7px; }
  .compact-heading { align-items: flex-start; flex-direction: column; }
  #wealth-chart { min-height: 180px; }
  .wealth-values { grid-template-columns: 1fr; }
  .result-section { padding: 25px 17px; border-radius: 20px; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .result-actions { display: grid; }
  .result-actions button { width: 100%; }
  .footer-actions { display: grid; width: 100%; }
  .footer-actions button { width: 100%; }
  .notice { right: 10px; bottom: 10px; }
}

/* Legibility-first layout: remove decorative height before shrinking useful text. */
@media (min-width: 821px) {
  .app-shell { width: min(1520px, calc(100% - 32px)); padding: 12px 0 28px; }
  .hero { align-items: center; gap: 22px; padding: 4px 6px 10px; }
  .brand-lockup { display: flex; align-items: baseline; gap: 18px; min-width: 0; }
  .eyebrow, .hero-lead { display: none; }
  .hero h1 { flex: none; margin: 0; font-size: clamp(2rem, 2.6vw, 2.75rem); line-height: 1; letter-spacing: -.055em; }
  .target-lockup { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; min-width: 390px; padding: 8px 14px; }
  .target-lockup span, .target-lockup strong, .target-lockup small { display: inline; }
  .target-lockup span { font-size: 13px; }
  .target-lockup strong { margin: 0; font-size: 25px; }
  .target-lockup small { font-size: 13px; }
  .disclaimer { margin-bottom: 8px; padding: 9px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; }

  .replay-bar { grid-template-columns: auto minmax(120px, 1fr) auto; gap: 12px; padding: 9px 14px; border-radius: 17px; }
  .timeline-identity { gap: 10px; min-width: 218px; }
  .timeline-identity p { margin-bottom: 3px; font-size: 12px; }
  .timeline-identity strong { font-size: 15px; }
  .phase-badge { min-width: 62px; height: 50px; border-radius: 11px; font-size: 12px; }
  .progress-track { grid-column: auto; grid-row: auto; height: 8px; margin: 0; }
  .progress-marks { top: 13px; font-size: 13px; }
  .replay-controls { gap: 6px; }
  .start-button, .icon-button, .speed-switch { min-height: 54px; border-radius: 12px; }
  .start-button { min-width: 210px; padding: 8px 12px; }
  .start-button strong { font-size: 15px; }
  .start-button small { display: block; font-size: 12px; }
  .play-icon { width: 34px; height: 34px; font-size: 13px; }
  .icon-button { width: 58px; }
  .icon-button span { font-size: 15px; }
  .icon-button small { display: block; font-size: 13px; }
  .speed-switch { padding: 5px; }
  .speed-switch > span { display: block; margin: 0 4px; font-size: 13px; }
  .speed-button { min-width: 42px; height: 42px; border-radius: 9px; font-size: 13px; }

  .score-strip { grid-template-columns: 1.25fr repeat(4, 1fr); gap: 8px; margin: 8px 0; }
  .score-card { padding: 11px 14px; border-radius: 14px; }
  .score-card span { font-size: 14px; }
  .score-card strong, .primary-score strong { margin: 4px 0 2px; font-size: 22px; }
  .primary-score strong { font-size: 26px; }
  .score-card small { display: block; font-size: 13px; }

  .terminal-grid { grid-template-columns: minmax(0, 1.8fr) minmax(430px, .82fr); gap: 10px; height: clamp(520px, calc(100vh - 275px), 760px); max-height: none; }
  .chart-panel, .order-ticket { min-height: 0; height: 100%; border-radius: 20px; }
  .chart-panel { display: flex; flex-direction: column; padding: 18px; }
  .panel-heading h2 { margin-top: 4px; font-size: 20px; }
  .section-number { font-size: 13px; }
  .price-lockup span { font-size: 13px; }
  .price-lockup strong { font-size: 27px; }
  .price-lockup small { font-size: 12px; }
  .chart-toolbar { gap: 12px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; }
  .chart-legend { gap: 10px; }
  #price-chart { flex: 1; min-height: 330px; height: auto; margin-top: 6px; border-radius: 12px; }
  .chart-axis { font-size: 15px; }
  .chart-axis-label { font-size: 14px; }
  .current-price-text, .order-label, .entry-label { font-size: 14px; }
  .order-label.is-edge, .entry-label.is-edge { font-size: 13px; }
  .chart-foot { padding-top: 6px; font-size: 13px; }
  .chart-foot kbd, .shortcut-note kbd { font-size: 12px; }
  .chart-foot strong { font-size: 13px; }

  .order-ticket { overflow-y: auto; padding: 18px; scrollbar-gutter: stable; }
  .ticket-status { padding: 5px 8px; font-size: 14px; }
  .position-card { margin-top: 10px; padding: 13px; border-radius: 13px; }
  .position-card > div span { font-size: 13px; }
  .position-card > div strong { font-size: 20px; }
  .position-card dl { gap: 6px; margin-top: 9px; }
  .position-card dl div { padding-top: 7px; }
  .position-card dt { font-size: 13px; }
  .position-card dd { margin-top: 3px; font-size: 13px; }
  .size-selector { margin-top: 11px; }
  .size-selector legend { font-size: 14px; }
  .size-selector legend small { font-size: 13px; }
  .size-selector > [role="radiogroup"] { gap: 6px; margin-top: 7px; }
  .size-button { min-height: 42px; border-radius: 10px; font-size: 14px; }
  .order-size-preview { gap: 2px 10px; margin-top: 7px; padding: 9px 10px; border-radius: 10px; }
  .order-size-preview span { font-size: 13px; }
  .order-size-preview span b { font-size: 17px; }
  .order-size-preview strong { font-size: 14px; }
  .order-size-preview small { font-size: 13px; }
  .size-selector > p { margin-top: 6px; font-size: 13px; line-height: 1.45; }
  .market-orders, .stop-orders, .limit-orders, .pending-section { margin-top: 12px; padding-top: 10px; }
  .ticket-section-heading { margin-bottom: 7px; }
  .ticket-section-heading > span { font-size: 14px; }
  .ticket-section-heading > small, #cancel-all { font-size: 13px; }
  .ticket-section-heading b { font-size: 11px; }
  .trade-button { min-height: 64px; padding: 9px 10px 9px 39px; border-radius: 12px; }
  .trade-button > span { top: 10px; left: 10px; width: 22px; height: 22px; font-size: 13px; }
  .trade-button strong { font-size: 15px; }
  .trade-button small { margin-top: 4px; font-size: 13px; }
  .close-button { min-height: 40px; margin-top: 6px; font-size: 13px; }
  .close-button span { font-size: 12px; }
  .limit-input { padding: 9px 11px; border-radius: 10px; }
  .limit-input span { font-size: 13px; }
  .limit-input input { font-size: 18px; }
  .limit-buttons { margin-top: 6px; }
  .limit-buttons button { min-height: 42px; border-radius: 10px; font-size: 14px; }
  .limit-hint { min-height: 1.5em; margin-top: 5px; font-size: 13px; }
  .pending-orders { max-height: 96px; }
  .empty-order, .pending-order strong { font-size: 13px; }
  .pending-order small { font-size: 13px; }
  .pending-order > span, .pending-order button { font-size: 13px; }
  .shortcut-note { display: block; margin-top: 10px; font-size: 13px; }

  .compact-heading h2 { font-size: 19px; }
  .wealth-legend { font-size: 12px; }
  .wealth-axis { font-size: 14px; }
  .wealth-values span { font-size: 12px; }
  .wealth-values strong { font-size: 15px; }
  .live-pill { font-size: 13px; }
  .trade-log li { font-size: 13px; }
  .trade-log time { font-size: 13px; }
  .result-hero span, .result-hero b { font-size: 14px; }
  .result-grid span { font-size: 14px; }
  .result-grid strong { font-size: 16px; }
  .result-insight span { font-size: 13px; }
  .result-insight p { font-size: 15px; }
  .result-actions button { font-size: 14px; }
  footer p { font-size: 13px; }
  .footer-actions button { font-size: 14px; }
  .notice { font-size: 14px; }
}

@media (max-width: 820px) {
  .target-lockup span { font-size: 11px; }
  .target-lockup strong { font-size: 25px; }
  .target-lockup small { font-size: 13px; }
  .hero-lead, .disclaimer { font-size: 14px; }
  .timeline-identity p, .phase-badge { font-size: 11px; }
  .timeline-identity strong, .start-button strong { font-size: 15px; }
  .start-button small { font-size: 12px; }
  .progress-marks, .icon-button small, .speed-switch > span { font-size: 10px; }
  .speed-button { font-size: 13px; }
  .score-card span { font-size: 13px; }
  .score-card strong { font-size: 21px; }
  .primary-score strong { font-size: 25px; }
  .score-card small { font-size: 12px; }
  .section-number { font-size: 11px; }
  .panel-heading h2, .compact-heading h2 { font-size: 19px; }
  .price-lockup span { font-size: 10px; }
  .price-lockup strong { font-size: 25px; }
  .price-lockup small { font-size: 12px; }
  .chart-toolbar, .chart-foot { font-size: 12px; }
  .chart-axis { font-size: 12px; }
  .chart-axis-label { font-size: 10px; }
  .current-price-text, .order-label, .entry-label { font-size: 11px; }
  .chart-foot kbd, .shortcut-note kbd, .chart-foot strong { font-size: 10px; }
  .ticket-status, .position-card > div span, .position-card dt { font-size: 11px; }
  .position-card > div strong { font-size: 20px; }
  .position-card dd { font-size: 13px; }
  .size-selector legend, .size-button, .ticket-section-heading > span { font-size: 14px; }
  .size-selector legend small, .size-selector > p, .ticket-section-heading > small, #cancel-all { font-size: 13px; }
  .order-size-preview span { font-size: 11px; }
  .order-size-preview span b { font-size: 17px; }
  .order-size-preview strong { font-size: 14px; }
  .order-size-preview small { font-size: 13px; }
  .trade-button strong { font-size: 15px; }
  .trade-button small, .trade-button > span { font-size: 11px; }
  .close-button, .limit-buttons button { font-size: 14px; }
  .limit-input span { font-size: 11px; }
  .limit-input input { font-size: 18px; }
  .limit-hint, .empty-order, .pending-order strong, .pending-order small { font-size: 13px; }
  .shortcut-note, .wealth-legend, .wealth-values span, .live-pill, .trade-log time, .result-grid span, footer p { font-size: 11px; }
  .wealth-values strong, .trade-log li, .result-insight p, .result-actions button { font-size: 14px; }
  .footer-actions button, .notice { font-size: 13px; }
}

/* Phone layout: readable type, fewer stacked summaries, and a native-size chart. */
@media (max-width: 480px) {
  .app-shell { width: calc(100% - 16px); padding: 8px 0 24px; }
  .hero { gap: 12px; padding: 8px 4px 14px; }
  .eyebrow { display: none; }
  .hero h1 { margin: 0 0 8px; font-size: clamp(2.4rem, 11vw, 2.75rem); line-height: .96; }
  .hero-lead { font-size: 16px; line-height: 1.65; }
  .target-lockup { width: 100%; padding: 10px 0 10px 14px; }
  .target-lockup span { font-size: 14px; letter-spacing: .03em; }
  .target-lockup strong { margin: 3px 0 0; font-size: 26px; }
  .target-lockup small { font-size: 14px; }
  .disclaimer { margin-bottom: 10px; padding: 12px 14px; font-size: 16px; line-height: 1.65; }

  .replay-bar { gap: 15px; padding: 14px; }
  .timeline-identity { gap: 11px; }
  .timeline-identity p { margin-bottom: 4px; font-size: 14px; letter-spacing: .03em; }
  .timeline-identity strong { gap: 6px; font-size: 16px; }
  .phase-badge { min-width: 64px; height: 48px; font-size: 14px; }
  .progress-track { height: 10px; margin-bottom: 2px; }
  .progress-marks { display: none; }
  .replay-controls { grid-template-columns: 1fr 60px; gap: 8px; }
  .start-button, .icon-button, .speed-switch { min-height: 58px; }
  .start-button { padding: 9px 12px; }
  .play-icon { font-size: 14px; }
  .start-button strong { font-size: 17px; }
  .start-button small { font-size: 14px; }
  .icon-button { width: 60px; }
  .icon-button span { font-size: 17px; }
  .icon-button small { font-size: 14px; }
  .speed-switch { gap: 5px; padding: 6px; }
  .speed-switch > span { margin: 0 7px; font-size: 14px; letter-spacing: 0; }
  .speed-button { min-width: 49px; height: 46px; font-size: 16px; }

  .score-strip { display: flex; gap: 10px; margin: 10px 0; overflow-x: auto; overscroll-behavior-inline: contain; padding: 1px 1px 7px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .score-strip::-webkit-scrollbar { display: none; }
  .score-card, .primary-score { flex: 0 0 166px; min-height: 108px; padding: 14px; scroll-snap-align: start; }
  .primary-score { flex-basis: 220px; }
  .score-card span { font-size: 15px; }
  .score-card strong { margin: 8px 0 4px; font-size: 22px; }
  .primary-score strong { font-size: 27px; }
  .score-card small { font-size: 14px; line-height: 1.4; }

  .chart-panel, .order-ticket, .wealth-panel, .log-panel { padding: 16px; }
  .section-number { display: none; }
  .panel-heading h2, .compact-heading h2 { margin-top: 0; font-size: 21px; line-height: 1.35; }
  .chart-heading { align-items: flex-start; }
  .chart-heading > div:first-child { min-width: 0; }
  .price-lockup { flex: 0 0 auto; }
  .price-lockup span { font-size: 14px; }
  .price-lockup strong { font-size: 28px; }
  .price-lockup small { font-size: 14px; }
  .chart-toolbar { gap: 9px; margin-top: 12px; padding: 10px 11px; font-size: 14px; line-height: 1.45; }
  .chart-legend { gap: 8px 12px; }
  #price-chart { min-height: 0; aspect-ratio: 7 / 5; margin-top: 8px; }
  .chart-axis { font-size: 16px; }
  .chart-axis-label { font-size: 15px; letter-spacing: 0; }
  .current-price-text, .order-label, .entry-label { font-size: 16px; }
  .order-label.is-edge, .entry-label.is-edge { font-size: 15px; }
  .chart-foot { padding: 10px 2px 1px; font-size: 15px; line-height: 1.55; }

  .ticket-status { padding: 7px 9px; font-size: 14px; white-space: nowrap; }
  .position-card { margin-top: 12px; padding: 14px; }
  .position-card > div span { font-size: 14px; letter-spacing: .02em; }
  .position-card > div strong { font-size: 22px; }
  .position-card dl { gap: 8px; }
  .position-card dt { font-size: 14px; }
  .position-card dd { margin-top: 4px; font-size: 16px; }
  .size-selector { margin-top: 16px; }
  .size-selector legend { font-size: 16px; line-height: 1.45; }
  .size-selector legend small { margin-top: 5px; font-size: 14px; }
  .size-selector > [role="radiogroup"] { gap: 7px; margin-top: 10px; }
  .size-button { min-height: 48px; font-size: 16px; }
  .order-size-preview { grid-template-columns: 82px minmax(0, 1fr); gap: 3px 12px; margin-top: 10px; padding: 12px; }
  .order-size-preview span { font-size: 14px; }
  .order-size-preview span b { font-size: 20px; }
  .order-size-preview strong { font-size: 16px; }
  .order-size-preview small { font-size: 14px; line-height: 1.45; }
  .size-selector > p { margin-top: 9px; font-size: 15px; line-height: 1.6; }
  .market-orders, .stop-orders, .limit-orders, .pending-section { margin-top: 17px; padding-top: 14px; }
  .ticket-section-heading { margin-bottom: 10px; }
  .ticket-section-heading > span { font-size: 16px; }
  .ticket-section-heading > small, #cancel-all { font-size: 14px; }
  .ticket-section-heading b { font-size: 14px; }
  .trade-button { min-height: 62px; padding-left: 40px; }
  .trade-button > span { width: 24px; height: 24px; font-size: 14px; }
  .trade-button strong { font-size: 17px; }
  .trade-button small { display: none; }
  .close-button { min-height: 48px; font-size: 15px; }
  .close-button span { font-size: 14px; }
  .limit-input { padding: 11px 12px; }
  .limit-input span { font-size: 14px; }
  .limit-input input { font-size: 21px; }
  .limit-buttons { gap: 7px; margin-top: 8px; }
  .limit-buttons button { min-height: 48px; font-size: 16px; }
  .limit-hint, .empty-order, .pending-order strong, .pending-order small { font-size: 15px; line-height: 1.55; }
  .pending-order > span, .pending-order button { font-size: 13px; }
  .shortcut-note { display: none; }

  .compact-heading { gap: 8px; }
  .wealth-legend { gap: 8px 12px; font-size: 14px; }
  #wealth-chart { min-height: 0; aspect-ratio: 21 / 13; }
  .wealth-axis { font-size: 16px; }
  .wealth-values { gap: 8px; }
  .wealth-values span { font-size: 14px; }
  .wealth-values strong { font-size: 17px; }
  .live-pill { font-size: 14px; }
  .trade-log li { grid-template-columns: 60px 8px 1fr; min-height: 46px; font-size: 16px; line-height: 1.55; }
  .trade-log time { font-size: 14px; line-height: 1.4; }
  .result-hero span, .result-hero b { font-size: 15px; }
  .result-grid span { font-size: 14px; }
  .result-grid strong { font-size: 17px; }
  .result-insight span { font-size: 13px; }
  .result-insight p { font-size: 16px; }
  .result-actions button { min-height: 50px; font-size: 16px; }
  footer p { display: none; }
  .footer-actions button { min-height: 48px; font-size: 15px; }
  .notice { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .start-button:hover, .trade-button:hover, .size-button:hover, .limit-buttons button:hover, .close-button:hover, .result-actions button:hover, .footer-actions button:hover { transform: none; }
}

@supports not (backdrop-filter: blur(18px)) {
  .glass-panel { background: var(--panel-solid); }
}