/* Phase 3A — compact, responsive CME workspace. */
:root{--p3-bg:#030a12;--p3-surface:#081522;--p3-panel:#0b1928;--p3-line:#20394e;--p3-text:#edf4fa;--p3-muted:#96a9ba;--p3-dim:#698096;--p3-gold:#f2bd45;--p3-red:#ff596d;--p3-green:#20cf91;--p3-blue:#4ca9ff;--p3-radius:12px;--p3-gap:11px;--p3-shell:1500px}*{box-sizing:border-box}body:has(#phase3-root){min-width:320px;margin:0;background:var(--p3-bg);color:var(--p3-text);font:14px/1.45 Inter,"Segoe UI",Tahoma,sans-serif}#phase3-root{min-height:100vh;background:radial-gradient(880px 430px at 90% -10%,rgba(42,93,134,.2),transparent 67%),linear-gradient(180deg,#06121f 0,#030a12 61%,#02070c 100%)}.p3-shell{width:min(100%,var(--p3-shell));margin:auto;padding:0 12px calc(22px + env(safe-area-inset-bottom))}.p3-topbar{display:flex;align-items:center;gap:11px;min-height:68px;border-bottom:1px solid rgba(85,117,145,.35)}.p3-brand{display:flex;align-items:center;gap:9px;min-width:0}.p3-mark{display:grid;place-items:center;width:41px;height:41px;border:1px solid rgba(242,189,69,.85);border-radius:10px;background:linear-gradient(145deg,#30240b,#0b121b);color:var(--p3-gold);font-size:18px;font-weight:900}.p3-brand-copy{white-space:nowrap}.p3-brand strong{display:block;font-size:14px}.p3-brand small{display:block;color:var(--p3-muted);font-size:9px;letter-spacing:.13em}.p3-tabs{display:flex;flex:1;max-width:280px;gap:4px;margin-left:auto;padding:3px;border:1px solid var(--p3-line);border-radius:9px;background:#07111c}.p3-tabs a{display:grid;flex:1;min-height:35px;place-items:center;border:1px solid transparent;border-radius:6px;color:var(--p3-muted);font-size:11px;font-weight:800;text-decoration:none}.p3-tabs a.active{border-color:rgba(242,189,69,.7);background:rgba(242,189,69,.13);color:#ffdc88}.p3-connection{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 9px;border:1px solid rgba(36,207,145,.34);border-radius:9px;background:rgba(11,59,51,.42);font-size:10px}.p3-status-dot{width:8px;height:8px;border-radius:50%;background:var(--p3-gold);box-shadow:0 0 10px currentColor}.p3-connection.live .p3-status-dot{background:var(--p3-green)}.p3-connection.delayed .p3-status-dot{background:var(--p3-gold)}.p3-connection.stale,.p3-connection.offline{border-color:rgba(255,89,109,.5);background:rgba(90,22,34,.33)}.p3-connection.stale .p3-status-dot,.p3-connection.offline .p3-status-dot{background:var(--p3-red)}.p3-connection strong,.p3-connection small{display:block;white-space:nowrap}.p3-connection strong{font-size:10px}.p3-connection small{max-width:135px;overflow:hidden;color:var(--p3-muted);font-size:9px;text-overflow:ellipsis}.p3-panel{border:1px solid var(--p3-line);border-radius:var(--p3-radius);background:linear-gradient(145deg,rgba(11,26,42,.97),rgba(5,14,24,.99));box-shadow:0 11px 30px rgba(0,0,0,.16)}.p3-loading{padding:24px}.p3-loading p{margin:6px 0 0;color:var(--p3-muted)}#p3Main{display:grid;gap:var(--p3-gap);padding-top:12px}.p3-workspace{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:var(--p3-gap);align-items:start}.p3-workspace-main{display:grid;gap:var(--p3-gap);min-width:0}.p3-sidebar{display:grid;gap:var(--p3-gap);min-width:0;position:sticky;top:12px}.p3-hero{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:2px 4px}.p3-kicker{color:var(--p3-gold);font-size:10px;font-weight:800;letter-spacing:.09em}.p3-hero h1{margin:2px 0;font-size:clamp(23px,2.4vw,33px);letter-spacing:-.045em;line-height:1.13}.p3-hero h1 em{color:var(--p3-gold);font-style:normal}.p3-hero p{max-width:600px;margin:4px 0 0;color:var(--p3-muted);font-size:11px}.p3-contract{display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));gap:0;margin:0}.p3-contract div{min-width:82px;padding:0 9px;border-left:1px solid var(--p3-line)}.p3-contract dt{color:var(--p3-dim);font-size:8px}.p3-contract dd{margin:3px 0 0;font:700 10px/1.2 ui-monospace,Consolas,monospace}.p3-levels{padding:10px}.p3-strip-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 8px;font-size:12px;font-weight:800}.p3-strip-title small{color:var(--p3-muted);font-size:9px;font-weight:500}.p3-level-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.p3-level{position:relative;min-width:0;min-height:91px;padding:9px;overflow:hidden;border:1px solid var(--p3-line);border-radius:8px;background:rgba(4,11,19,.44)}.p3-level.resistance{border-color:rgba(255,89,109,.56);background:linear-gradient(145deg,rgba(88,25,39,.48),rgba(7,13,22,.82))}.p3-level.support{border-color:rgba(32,207,145,.48);background:linear-gradient(145deg,rgba(8,70,55,.42),rgba(7,14,22,.82))}.p3-level.spot{border-color:rgba(242,189,69,.82);background:radial-gradient(circle at 85% 15%,rgba(242,189,69,.18),transparent 50%),linear-gradient(145deg,#29200d,#10161d)}.p3-level-name{display:block;color:var(--p3-muted);font-size:10px;font-weight:900}.resistance .p3-level-name{color:#ff9ba7}.support .p3-level-name{color:#6ce8bb}.spot .p3-level-name{color:#ffe28b}.p3-level strong{display:block;margin-top:5px;overflow:hidden;font:800 clamp(14px,1.35vw,22px)/1 ui-monospace,Consolas,monospace;letter-spacing:-.065em;text-overflow:ellipsis;white-space:nowrap}.p3-level small{display:block;margin-top:6px;overflow:hidden;color:#b7c5d3;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.p3-level i{position:absolute;right:9px;bottom:7px;left:9px;display:block;height:2px;border-radius:2px;background:var(--p3-blue)}.resistance i{background:var(--p3-red)}.support i{background:var(--p3-green)}.spot i{background:var(--p3-gold)}.p3-chart-panel{padding:11px}.p3-chart-title,.p3-chart-tools,.p3-rsi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.p3-chart-title{align-items:flex-start;margin-bottom:9px}.p3-chart-title h2{margin:0;font-size:14px}.p3-chart-title p{margin:2px 0 0;color:var(--p3-muted);font-size:9px}.p3-badge{display:inline-flex;align-items:center;min-height:21px;border:1px solid var(--p3-line);border-radius:999px;padding:3px 7px;color:var(--p3-muted);font:800 8px ui-monospace,Consolas,monospace;white-space:nowrap}.p3-badge.pending{border-color:rgba(242,189,69,.54);color:#f8d67a}.p3-chart-tools{align-items:center;flex-wrap:wrap;margin-bottom:8px}.p3-timeframes,.p3-actions{display:flex;gap:4px;flex-wrap:wrap}.p3-actions{margin-left:auto}.p3-button,.p3-tf{min-height:31px;padding:5px 8px;border:1px solid var(--p3-line);border-radius:6px;background:#091727;color:var(--p3-muted);font:800 9px/1 Inter,"Segoe UI",sans-serif;cursor:pointer}.p3-tf.active{border-color:rgba(242,189,69,.66);background:rgba(242,189,69,.13);color:#ffdc85}.p3-button:hover,.p3-tf:hover{border-color:#50708c;color:var(--p3-text)}.p3-button:focus-visible,.p3-tf:focus-visible,.p3-snapshot:focus-visible,.p3-control:focus-within{outline:2px solid #fff;outline-offset:2px}.p3-chart-stage{position:relative;height:clamp(390px,48vw,630px);overflow:hidden;border:1px solid var(--p3-line);border-radius:9px;background:#06111d}.p3-chart-stage:fullscreen,.p3-chart-stage.pseudo-fullscreen{height:100vh;padding:10px;background:var(--p3-bg)}.p3-chart-host{position:absolute;inset:0;touch-action:none}.p3-smc-overlay{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}.p3-chart-edge{position:absolute;top:42px;right:77px;display:grid;gap:3px;max-width:130px;pointer-events:none}.p3-chart-edge span{overflow:hidden;padding:2px 4px;border-radius:3px;background:rgba(4,12,20,.82);color:var(--p3-blue);font:700 8px ui-monospace,Consolas,monospace;text-overflow:ellipsis;white-space:nowrap}.p3-chart-edge .resistance{color:#ff9ba7}.p3-chart-edge .support{color:#6ce8bb}.p3-chart-edge .spot{color:#ffe28b}.p3-chart-message{position:absolute;top:8px;left:8px;max-width:270px;padding:4px 6px;border:1px solid rgba(242,189,69,.25);border-radius:5px;background:rgba(3,9,15,.76);color:#c8d8e5;font-size:8px;pointer-events:none}.p3-chart-footer{display:flex;justify-content:space-between;gap:8px;margin-top:6px;color:var(--p3-muted);font-size:8px}.p3-chart-footer span:last-child{font-family:ui-monospace,Consolas,monospace}.p3-rsi{padding:10px}.p3-rsi-top{margin-bottom:8px}.p3-rsi-top strong{font-size:12px}.p3-rsi-top small{display:block;color:var(--p3-muted);font-size:8px}.p3-rsi-average{color:var(--p3-muted);font-size:9px}.p3-rsi-average b{margin-left:4px;color:#ffda80;font:800 18px/1 ui-monospace,Consolas,monospace}.p3-rsi-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.p3-rsi-card{min-width:0;padding:8px;border:1px solid var(--p3-line);border-radius:7px;background:rgba(4,12,21,.42)}.p3-rsi-card>span{display:block;color:#a8dbff;font-size:9px}.p3-rsi-card strong{display:block;margin-top:3px;overflow:hidden;font:800 clamp(12px,1.2vw,17px)/1 ui-monospace,Consolas,monospace;text-overflow:ellipsis}.p3-rsi-card small{display:block;margin-top:5px;overflow:hidden;color:var(--p3-muted);font-size:8px;text-overflow:ellipsis;white-space:nowrap}.p3-rsi-card.overbought{border-color:rgba(242,189,69,.55)}.p3-rsi-card.oversold{border-color:rgba(76,169,255,.55)}.p3-indicator-panel summary,.p3-details summary,.p3-snapshots summary{display:flex;align-items:center;justify-content:space-between;gap:9px;min-height:43px;padding:0 11px;cursor:pointer;list-style:none}.p3-indicator-panel summary::-webkit-details-marker,.p3-details summary::-webkit-details-marker,.p3-snapshots summary::-webkit-details-marker{display:none}.p3-indicator-panel summary strong,.p3-details summary strong,.p3-snapshots summary strong{font-size:11px}.p3-indicator-panel summary small,.p3-details summary small,.p3-snapshots summary small{display:block;color:var(--p3-muted);font-size:8px}.p3-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:0 11px 11px}.p3-control{display:flex;align-items:center;gap:5px;min-height:29px;padding:5px;border:1px solid var(--p3-line);border-radius:6px;color:var(--p3-muted);font-size:8px}.p3-control input{accent-color:var(--p3-gold)}.p3-summary{padding:12px}.p3-summary h2{margin:0;font-size:13px}.p3-summary p{margin:3px 0 10px;color:var(--p3-muted);font-size:8px}.p3-summary dl,.p3-details dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 9px;margin:0}.p3-summary dt,.p3-details dt{color:var(--p3-muted);font-size:9px}.p3-summary dd,.p3-details dd{max-width:160px;margin:0;overflow-wrap:anywhere;text-align:right;font:700 9px ui-monospace,Consolas,monospace}.p3-summary dd.resistance{color:#ff9ba7}.p3-summary dd.support{color:#6ce8bb}.p3-summary dd.spot{color:#ffe28b}.p3-signal{display:block;margin:7px 0 11px;color:#ff7383;font:900 22px/1 ui-monospace,Consolas,monospace}.p3-signal.SHORT,.p3-signal.LONG{color:var(--p3-gold)}.p3-details>div{padding:10px 11px 11px;border-top:1px solid var(--p3-line)}.p3-tech{margin:9px 0 0;color:#a7b9ca;font:8px/1.5 ui-monospace,Consolas,monospace;overflow-wrap:anywhere}.p3-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--p3-gap)}.p3-metric{min-width:0;padding:10px}.p3-metric span{color:var(--p3-muted);font-size:8px}.p3-metric strong{display:block;margin-top:4px;overflow:hidden;font:800 clamp(14px,1.4vw,21px)/1 ui-monospace,Consolas,monospace;letter-spacing:-.05em;text-overflow:ellipsis;white-space:nowrap}.p3-metric small{display:block;margin-top:5px;overflow:hidden;color:var(--p3-muted);font-size:8px;text-overflow:ellipsis;white-space:nowrap}.p3-snapshots{margin-top:0}.p3-snapshot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:0 11px 11px}.p3-snapshot{min-width:0;padding:0;overflow:hidden;border:1px solid var(--p3-line);border-radius:7px;background:#07121f;color:var(--p3-text);text-align:left;cursor:zoom-in}.p3-snapshot img{display:block;width:100%;aspect-ratio:1.65;object-fit:cover;background:#02070d}.p3-snapshot span{display:block;overflow:hidden;padding:5px;color:var(--p3-muted);font-size:8px;text-overflow:ellipsis;white-space:nowrap}.p3-empty{padding:0 11px 11px;color:var(--p3-muted);font-size:9px}.p3-modal{position:fixed;z-index:90;inset:0;display:grid;place-items:center;padding:18px;border:0;background:rgba(0,0,0,.84)}.p3-modal::backdrop{background:rgba(0,0,0,.84)}.p3-modal figure{max-width:min(1100px,95vw);max-height:92vh;margin:0}.p3-modal img{display:block;max-width:100%;max-height:80vh;border:1px solid #58728a;border-radius:8px;background:#030811}.p3-modal figcaption{margin-top:7px;color:#dde9f2;font-size:9px}.p3-modal button{position:fixed;top:14px;right:14px}.p3-footer{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding:11px 2px 0;border-top:1px solid var(--p3-line);color:var(--p3-muted);font-size:8px}.p3-footer a{color:#b9dafa;text-decoration:none}
@media(max-width:1200px){.p3-workspace{grid-template-columns:minmax(0,1fr) 285px}.p3-level{min-height:83px;padding:8px}.p3-level strong{font-size:16px}.p3-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1099px){.p3-workspace{grid-template-columns:1fr}.p3-sidebar{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}.p3-details{grid-column:1/-1}.p3-summary{min-height:0}}
@media(max-width:720px){.p3-shell{padding-inline:8px}.p3-topbar{flex-wrap:wrap;gap:7px;padding:8px 0;min-height:0}.p3-brand{flex:1}.p3-mark{width:36px;height:36px;font-size:16px}.p3-brand strong{font-size:12px}.p3-brand small{font-size:7px}.p3-tabs{order:3;flex-basis:100%;max-width:none;margin:0}.p3-tabs a{min-height:31px;font-size:10px}.p3-connection{padding:6px}.p3-connection small{display:none}.p3-connection strong{font-size:8px}.p3-hero{align-items:flex-start;padding:1px 2px}.p3-hero h1{font-size:22px}.p3-hero p{font-size:9px}.p3-contract{display:none}.p3-levels{padding:8px}.p3-strip-title{margin-bottom:6px;font-size:10px}.p3-strip-title small{font-size:7px}.p3-level-grid{gap:3px}.p3-level{min-height:59px;padding:5px 3px;border-radius:5px;text-align:center}.p3-level-name{font-size:8px}.p3-level strong{margin-top:4px;font-size:clamp(8px,2.55vw,11px);letter-spacing:-.08em}.p3-level small,.p3-level i{display:none}.p3-chart-panel{padding:8px}.p3-chart-title h2{font-size:12px}.p3-chart-title p{font-size:8px}.p3-badge{font-size:7px}.p3-chart-tools{display:block}.p3-timeframes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.p3-tf{min-width:0;min-height:30px;padding:4px 1px;font-size:9px}.p3-actions{justify-content:flex-end;margin-top:5px}.p3-button{min-height:28px;padding:5px 6px;font-size:8px}.p3-chart-stage{height:455px}.p3-chart-edge{top:40px;right:61px;max-width:105px}.p3-chart-footer{display:block;font-size:7px}.p3-chart-footer span+span{display:block;margin-top:2px}.p3-rsi{padding:8px}.p3-rsi-grid{gap:3px}.p3-rsi-card{padding:5px 3px;border-radius:5px;text-align:center}.p3-rsi-card>span{font-size:8px}.p3-rsi-card strong{font-size:clamp(9px,2.7vw,12px)}.p3-rsi-card small{overflow:hidden;margin-top:3px;font-size:7px;text-overflow:ellipsis}.p3-indicator-panel summary{min-height:40px;padding:0 9px}.p3-controls{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 8px 8px}.p3-sidebar{grid-template-columns:1fr;gap:8px}.p3-details{grid-column:auto}.p3-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.p3-snapshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.p3-footer{display:block;font-size:7px}.p3-footer span+span{display:block;margin-top:4px}}
@media(max-width:370px){.p3-level strong{font-size:8px}.p3-rsi-card strong{font-size:9px}.p3-chart-stage{height:420px}.p3-chart-message{max-width:230px}.p3-actions{gap:3px}.p3-button{padding-inline:4px}}
.p3-smc-overlay{z-index:3}.p3-chart-edge,.p3-chart-message{z-index:4}
:root{--rsi-00:#7f1d1d;--rsi-10:#991b1b;--rsi-20:#dc2626;--rsi-30:#f97316;--rsi-40:#f59e0b;--rsi-50:#d4d927;--rsi-60:#84cc16;--rsi-70:#22c55e;--rsi-80:#15803d;--rsi-90:#065f46}
.p3-rsi-card{--p3-rsi-color:var(--p3-muted);--p3-rsi-border:var(--p3-line);--p3-rsi-background:color-mix(in srgb,var(--p3-muted) 8%,transparent);border-color:var(--p3-rsi-border);background:var(--p3-rsi-background);transition:color .18s ease,border-color .18s ease,background-color .18s ease}.p3-rsi-card strong,.p3-rsi-average b{color:var(--p3-rsi-color);font-variant-numeric:tabular-nums}.p3-rsi-card:hover,.p3-rsi-card:focus-within{border-color:var(--p3-rsi-color);background:color-mix(in srgb,var(--p3-rsi-color) 16%,transparent)}.p3-rsi-card.is-stale,.p3-rsi-average.is-stale{filter:saturate(.62);opacity:.76}.p3-rsi-card.rsi-unavailable,.p3-rsi-average.rsi-unavailable{filter:none;opacity:1}.p3-rsi-data-state{margin-left:4px}.p3-rsi-data-state.stale{color:#ffda80;font-weight:700}
.p3-workspace{grid-template-columns:minmax(0,1fr)}.p3-snapshot{cursor:default}
:root{--font-ui:"IBM Plex Sans Thai","Noto Sans Thai",sans-serif;--font-number:"IBM Plex Mono",monospace}body:has(#phase3-root){font-family:var(--font-ui);font-size:15px;font-weight:400}.p3-tabs a,.p3-strip-title,.p3-level-name,.p3-rsi-card>span,.p3-metric>span,.p3-control,.p3-chart-title h2,.p3-rsi-top strong{font-weight:500}.p3-hero h1{font-size:32px;font-weight:700}.p3-chart-title h2,.p3-rsi-top strong,.p3-summary h2,.p3-snapshots summary strong{font-size:18px;font-weight:600}.p3-level strong,.p3-rsi-card strong,.p3-rsi-average b,.p3-metric strong,.p3-chart-edge,.p3-chart-footer,.p3-contract dd{font-family:var(--font-number);font-variant-numeric:tabular-nums}.p3-level strong{font-size:20px;font-weight:600}.p3-rsi-card strong{font-size:20px;font-weight:600}.p3-metric strong{font-size:22px;font-weight:600}.p3-level-name,.p3-rsi-card>span,.p3-metric>span{font-size:13px;font-weight:500}.p3-rsi-card small,.p3-metric small,.p3-hero p,.p3-chart-title p,.p3-chart-footer{font-size:12px;font-weight:400}@media(max-width:767px){body:has(#phase3-root){font-size:14px}.p3-hero h1{font-size:24px}.p3-level strong{font-size:clamp(11px,3vw,14px)}.p3-rsi-card strong{font-size:clamp(13px,3.4vw,17px)}}
.p3-chart-footer,.p3-chart-title p,.p3-rsi-top>span>small,.p3-chart-message{display:none}

/* CME levels: group the ladder around Spot so R1/S1 are immediately legible. */
.p3-level-groups{display:grid;grid-template-columns:minmax(0,1fr) minmax(175px,.38fr) minmax(0,1fr);gap:10px;align-items:stretch}
.p3-level-group{min-width:0;padding:9px;border:1px solid var(--p3-line);border-radius:9px;background:rgba(4,11,19,.45)}
.p3-level-group.resistance{border-color:rgba(255,89,109,.56);background:linear-gradient(145deg,rgba(88,25,39,.33),rgba(7,13,22,.82))}
.p3-level-group.support{border-color:rgba(32,207,145,.48);background:linear-gradient(145deg,rgba(8,70,55,.30),rgba(7,14,22,.82))}
.p3-level-group header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 1px 7px}
.p3-level-group header span{font-size:var(--text-sm);font-weight:700}.p3-level-group header small{color:var(--p3-muted);font-size:var(--text-xs)}
.p3-level-group.resistance header span{color:#ff9ba7}.p3-level-group.support header span{color:#6ce8bb}
.p3-level-list{display:grid;grid-template-columns:1fr;gap:6px}
.p3-level-empty{display:grid;min-height:55px;place-items:center;margin:0;padding:9px;border:1px dashed rgba(118,145,168,.48);border-radius:8px;color:var(--p3-muted);font-size:var(--text-xs);text-align:center}
.p3-level-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;min-width:0;min-height:47px;padding:7px 8px;overflow:hidden;border:1px solid var(--p3-line);border-radius:7px;background:rgba(3,10,17,.64)}
.p3-level-row.resistance{border-color:rgba(255,89,109,.42)}.p3-level-row.support{border-color:rgba(32,207,145,.38)}
.p3-level-row .p3-level-name{font-size:var(--text-sm);font-weight:800}.p3-level-row strong{overflow:hidden;font-family:var(--font-number);font-size:clamp(14px,1.25vw,18px);font-weight:700;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.p3-level-row small{color:#c3d0db;font-size:var(--text-xs);white-space:nowrap}
.p3-level-row i{position:absolute;bottom:0;left:0;display:block;height:2px;border-radius:0 2px 0 0}.p3-level-row.resistance i{background:var(--p3-red)}.p3-level-row.support i{background:var(--p3-green)}
.p3-spot-focus{display:grid;place-items:stretch}.p3-spot-card{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:12px;overflow:hidden;border:1px solid rgba(242,189,69,.82);border-radius:9px;background:radial-gradient(circle at 85% 15%,rgba(242,189,69,.20),transparent 50%),linear-gradient(145deg,#29200d,#10161d)}.p3-spot-card span{color:#ffe28b;font-size:var(--text-xs);font-weight:700}.p3-spot-card strong{margin-top:5px;font-family:var(--font-number);font-size:clamp(22px,2.1vw,31px);font-weight:700;letter-spacing:0;white-space:nowrap}.p3-spot-card small{margin-top:6px;overflow:hidden;color:#c3d0db;font-size:var(--text-xs);text-overflow:ellipsis;white-space:nowrap}
@media(max-width:767px){.p3-level-groups{grid-template-columns:1fr;gap:7px}.p3-spot-focus{order:-1}.p3-level-group{padding:8px}.p3-level-row{min-height:45px;padding:6px}.p3-level-row strong{font-size:clamp(13px,4vw,17px)}.p3-level-row small{font-size:10px}.p3-spot-card{min-height:74px;padding:10px;text-align:center}.p3-spot-card strong{font-size:26px}.p3-level-list{gap:4px}}

/* Phase 3C: shared typography and readability contract. */
:root{
  --font-ui:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
  --font-number:"IBM Plex Mono",ui-monospace,monospace;
  --text-xs:12px;--text-sm:13px;--text-base:15px;--text-md:16px;--text-lg:18px;--text-xl:22px;--text-2xl:28px;--text-3xl:34px;
  --line-tight:1.2;--line-normal:1.5;--line-relaxed:1.6;
  --p3-muted:#b7c5d3;--p3-dim:#8da2b5;
}
body:has(#phase3-root){font:400 var(--text-base)/var(--line-normal) var(--font-ui)}
.p3-brand,.p3-tabs,.p3-connection,.p3-panel,.p3-button,.p3-tf{font-family:var(--font-ui)}
.p3-hero h1{font-size:clamp(24px,2.4vw,38px);font-weight:700;line-height:var(--line-tight)}
.p3-hero p{font-size:var(--text-sm);line-height:var(--line-normal)}
.p3-strip-title{font-size:var(--text-lg);font-weight:700;line-height:var(--line-tight)}
.p3-strip-title small{font-size:var(--text-xs);line-height:var(--line-normal);color:var(--p3-muted)}
.p3-levels{padding:12px}.p3-level{min-height:106px;padding:11px}
.p3-level-name,.p3-rsi-card>span,.p3-metric>span{font-size:var(--text-sm);font-weight:600;line-height:var(--line-tight)}
.p3-level strong,.p3-rsi-card strong,.p3-rsi-average b,.p3-metric strong,.p3-contract dd,.p3-chart-edge,.p3-chart-footer,.p3-price-full,.p3-price-compact{
  font-family:var(--font-number);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:0;white-space:nowrap;
}
.p3-level strong{margin-top:6px;font-size:clamp(22px,1.55vw,25px);font-weight:700;line-height:var(--line-tight)}
.p3-level small{margin-top:6px;color:#c3d0db;font-size:12.5px;line-height:1.4}
.p3-price-compact{display:none}
.p3-chart-panel{padding:14px}.p3-chart-title h2,.p3-rsi-top strong,.p3-summary h2,.p3-snapshots summary strong{font-size:var(--text-lg);font-weight:700;line-height:var(--line-tight)}
.p3-chart-tools{gap:8px;margin-bottom:10px}.p3-timeframes,.p3-actions{gap:6px}
.p3-button,.p3-tf{min-width:42px;min-height:38px;padding:7px 10px;font-size:var(--text-sm);font-weight:600;line-height:1.2}
.p3-chart-edge span{font-size:11px;line-height:1.25}.p3-chart-stage{border-color:#38536a}
.p3-rsi{padding:13px}.p3-rsi-top{margin-bottom:10px}.p3-rsi-average{font-size:var(--text-sm)}.p3-rsi-average b{font-size:24px;font-weight:700}
.p3-rsi-card{padding:10px}.p3-rsi-card strong{margin-top:5px;font-size:22px;font-weight:700;line-height:var(--line-tight)}.p3-rsi-card small{margin-top:6px;color:#c3d0db;font-size:12px;line-height:1.4}
.p3-metric{padding:13px}.p3-metric strong{margin-top:6px;font-size:clamp(22px,1.45vw,25px);font-weight:700;line-height:var(--line-tight)}.p3-metric small{margin-top:6px;color:#c3d0db;font-size:12px;line-height:1.4}
.p3-indicator-panel summary,.p3-details summary,.p3-snapshots summary{min-height:48px}.p3-indicator-panel summary strong,.p3-details summary strong,.p3-snapshots summary strong{font-size:var(--text-sm);font-weight:700}.p3-indicator-panel summary small,.p3-details summary small,.p3-snapshots summary small{font-size:var(--text-xs);line-height:1.4}
.p3-control{min-height:36px;padding:7px;font-size:var(--text-xs);line-height:1.35;color:#c3d0db}.p3-summary{padding:14px}.p3-summary p,.p3-tech{font-size:var(--text-xs);line-height:1.5}.p3-summary dt,.p3-details dt,.p3-summary dd,.p3-details dd{font-size:var(--text-xs);line-height:1.4}.p3-footer{font-size:var(--text-xs);line-height:1.4}
@media(max-width:767px){
  body:has(#phase3-root){font-size:14px}.p3-hero h1{font-size:clamp(24px,7vw,28px)}.p3-hero p{font-size:var(--text-xs)}
  .p3-strip-title{font-size:var(--text-sm)}.p3-strip-title small{font-size:10px}.p3-levels{padding:9px}.p3-level-grid{gap:3px}.p3-level{min-height:70px;padding:6px 0;text-align:center}.p3-level-name{font-size:clamp(10px,2.7vw,13px);font-weight:700}.p3-level strong{margin-top:5px;font-size:clamp(10.5px,2.9vw,14px)}.p3-price-full{display:none}.p3-price-compact{display:inline}.p3-price-compact{letter-spacing:-.15em}.p3-level small,.p3-level i{display:none}
  .p3-chart-panel{padding:10px}.p3-chart-title h2{font-size:var(--text-md)}.p3-timeframes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;gap:3px}.p3-tf{min-width:0;min-height:40px;padding:6px 1px;font-size:clamp(11.5px,3vw,13px)}.p3-actions{margin-top:7px;gap:4px}.p3-button{min-height:40px;padding:7px 8px;font-size:12px}
  .p3-rsi{padding:10px}.p3-rsi-card{padding:7px 3px;text-align:center}.p3-rsi-card>span{font-size:clamp(9.5px,2.5vw,12px)}.p3-rsi-card strong{font-size:clamp(12px,3.2vw,17px)}.p3-rsi-card small{display:none}.p3-rsi-average{font-size:12px}.p3-rsi-average b{font-size:22px}
  .p3-metrics{gap:9px}.p3-metric{padding:11px}.p3-metric>span{font-size:12px}.p3-metric strong{font-size:clamp(19px,5vw,22px)}.p3-metric small{font-size:11.5px}.p3-control{min-height:40px;font-size:12px}.p3-summary p,.p3-tech,.p3-summary dt,.p3-details dt,.p3-summary dd,.p3-details dd{font-size:12px}
}

/* Phase 3D: usability and visual hierarchy refresh. */
:root{
  --p3-surface-raised:#0c1b2b;
  --p3-surface-soft:#07131f;
  --p3-line-strong:#31526c;
  --p3-focus:#ffd56f;
}
body:has(#phase3-root){background:#020810;color:#f3f7fb}
#phase3-root{background:radial-gradient(900px 430px at 82% -6%,rgba(38,105,150,.22),transparent 68%),linear-gradient(180deg,#071522 0,#030a12 56%,#02070c 100%)}
.p3-shell{max-width:1440px;padding-inline:18px}
.p3-topbar{position:sticky;z-index:30;top:0;min-height:72px;background:rgba(5,15,25,.88);border-bottom-color:rgba(79,115,143,.48);backdrop-filter:blur(16px) saturate(135%)}
.p3-mark{box-shadow:0 0 0 1px rgba(242,189,69,.08),0 8px 24px rgba(0,0,0,.28)}
.p3-tabs{max-width:310px}.p3-tabs a{min-height:38px;font-size:12px;transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.p3-tabs a:hover{color:#fff}.p3-tabs a.active{box-shadow:inset 0 0 0 1px rgba(255,216,119,.08)}
.p3-connection{min-height:42px;padding-inline:11px}
#p3Main{gap:14px;padding-top:15px}
.p3-panel{border-color:rgba(54,83,108,.82);background:linear-gradient(145deg,rgba(12,29,46,.98),rgba(5,15,25,.99));box-shadow:0 14px 34px rgba(0,0,0,.2)}
.p3-hero{min-height:72px;padding:7px 5px 10px}.p3-hero h1{margin:3px 0;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.035em}.p3-hero p{max-width:720px;color:#aebfce;font-size:13px}
.p3-kicker{font-size:11px;letter-spacing:.12em}.p3-contract div{padding-inline:12px}.p3-contract dt{font-size:9px}.p3-contract dd{font-size:11px}

.p3-levels{padding:15px}.p3-strip-title{margin:0 1px 11px;font-size:18px}
.p3-levels-meta{display:flex;align-items:center;gap:8px;font-size:11px!important}
.p3-levels-meta span{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid rgba(80,112,140,.55);border-radius:999px;background:rgba(4,13,22,.52);white-space:nowrap}
.p3-levels-meta span:last-child{border-color:rgba(242,189,69,.38);color:#f4d47e}
.p3-level-groups{grid-template-columns:minmax(0,1fr) minmax(190px,.42fr) minmax(0,1fr);gap:12px}
.p3-level-group{padding:11px;border-radius:11px}.p3-level-group header{margin:0 2px 9px}.p3-level-group header span{font-size:15px;font-weight:800}.p3-level-group header small{font-size:11px}
.p3-level-list{gap:7px}
.p3-level-row{min-height:55px;padding:8px 9px;border-color:rgba(74,101,124,.66);border-radius:8px;transition:transform .16s ease,border-color .16s ease,background-color .16s ease}
.p3-level-row:hover{transform:translateY(-1px);background:rgba(13,31,47,.9)}
.p3-level-row.resistance:hover{border-color:rgba(255,89,109,.72)}.p3-level-row.support:hover{border-color:rgba(32,207,145,.68)}
.p3-level-row .p3-level-name{font-size:13px}.p3-level-row strong{font-size:clamp(15px,1.25vw,19px)}
.p3-level-row small{justify-self:end;padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.055);font-size:11px}
.p3-level-row i{width:var(--level-confidence,0%);height:3px;box-shadow:0 0 10px currentColor;transition:width .25s ease}
.p3-spot-card{min-height:100%;padding:16px;border-radius:11px;box-shadow:inset 0 0 28px rgba(242,189,69,.07)}.p3-spot-card span{font-size:13px}.p3-spot-card strong{font-size:clamp(27px,2.2vw,34px)}.p3-spot-card small{font-size:11px;line-height:1.5;white-space:normal}

.p3-chart-panel{padding:15px}.p3-chart-title{margin-bottom:11px}.p3-chart-title h2{font-size:19px}.p3-chart-title p{display:block;margin-top:4px;color:#9fb3c5;font-size:11px}
.p3-chart-tools{margin-bottom:10px;padding:7px;border:1px solid rgba(49,82,108,.72);border-radius:10px;background:rgba(3,11,19,.5)}
.p3-timeframes,.p3-actions{gap:5px}.p3-button,.p3-tf{min-height:38px;border-radius:8px;background:#0a1928;color:#c5d3df;transition:transform .14s ease,border-color .14s ease,background-color .14s ease,color .14s ease}
.p3-button:hover,.p3-tf:hover{transform:translateY(-1px);border-color:#6388a5;background:#102338;color:#fff}.p3-tf.active{border-color:#d9a832;background:linear-gradient(180deg,rgba(242,189,69,.2),rgba(242,189,69,.1));color:#ffe08d;box-shadow:inset 0 -2px 0 #e9b53c}
.p3-button:focus-visible,.p3-tf:focus-visible,.p3-snapshot:focus-visible,.p3-control:focus-within{outline:3px solid var(--p3-focus);outline-offset:2px}
.p3-chart-stage{height:clamp(440px,44vw,580px);border-color:#3a586f;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)}

.p3-rsi{padding:15px}.p3-rsi-top{margin-bottom:11px}.p3-rsi-top strong{font-size:18px}.p3-rsi-top>span>small{display:block;margin-top:3px;color:#9fb3c5;font-size:11px}.p3-rsi-average{padding:5px 9px;border-radius:9px;background:rgba(255,255,255,.04)}
.p3-rsi-grid{gap:8px}.p3-rsi-card{min-height:86px;padding:11px;border-radius:9px}.p3-rsi-card>span{font-size:12px;font-weight:700}.p3-rsi-card strong{margin-top:7px;font-size:22px}.p3-rsi-card small{font-size:11px}
.p3-indicator-panel summary,.p3-details summary,.p3-snapshots summary{padding-inline:14px;transition:background-color .16s ease}.p3-indicator-panel summary:hover,.p3-details summary:hover,.p3-snapshots summary:hover{background:rgba(255,255,255,.025)}
.p3-indicator-panel[open],.p3-details[open],.p3-snapshots[open]{border-color:var(--p3-line-strong)}
.p3-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:0 14px 14px}.p3-control{min-height:40px;padding:8px 10px;border-radius:8px;background:rgba(3,11,19,.4);cursor:pointer}.p3-control:hover{border-color:#587996;color:#fff}.p3-control input{width:16px;height:16px;flex:0 0 auto}
.p3-metrics{gap:10px}.p3-metric{min-height:108px;padding:14px}.p3-metric>span{color:#aec0cf;font-size:12px}.p3-metric strong{margin-top:8px;font-size:clamp(21px,1.55vw,25px)}.p3-metric small{margin-top:8px;color:#8fa5b7;font-size:11px}
.p3-footer{margin-top:16px;padding:14px 2px 3px;font-size:11px}

@media(max-width:1100px){
  .p3-level-groups{grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);gap:9px}.p3-level-group{padding:9px}.p3-level-row{padding-inline:7px}.p3-level-row small{padding-inline:4px;font-size:10px}
  .p3-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  .p3-shell{padding-inline:11px}.p3-topbar{position:static;flex-wrap:wrap;gap:8px;padding:9px 0;background:transparent;backdrop-filter:none}.p3-brand{flex:1}.p3-tabs{order:3;flex-basis:100%;max-width:none;margin:0}.p3-connection small{display:none}
  #p3Main{gap:10px;padding-top:10px}.p3-hero{min-height:62px;align-items:flex-start;padding:4px 2px 7px}.p3-hero h1{font-size:clamp(25px,7vw,30px)}.p3-hero p{font-size:12px}.p3-contract{display:none}
  .p3-levels{padding:11px}.p3-strip-title{align-items:flex-start;font-size:16px}.p3-levels-meta{align-items:flex-end;flex-direction:column;gap:4px}.p3-levels-meta span{min-height:21px;padding:2px 6px;font-size:9px}.p3-levels-meta span:first-child{display:none}
  .p3-level-groups{grid-template-columns:1fr;gap:8px}.p3-spot-focus{order:-1}.p3-spot-card{min-height:88px;text-align:center}.p3-level-group{padding:10px}.p3-level-list{grid-template-columns:1fr;gap:6px}.p3-level-row{min-height:52px}
  .p3-chart-panel{padding:10px}.p3-chart-title p{font-size:10px}.p3-chart-tools{display:block;padding:6px}.p3-timeframes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.p3-tf{min-width:0;padding-inline:2px}.p3-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:6px 0 0}.p3-button{width:100%;min-width:0;padding-inline:3px}.p3-chart-stage{height:455px}
  .p3-rsi{padding:11px}.p3-rsi-grid{grid-template-columns:repeat(7,minmax(112px,1fr));overflow-x:auto;padding-bottom:7px;scroll-snap-type:x proximity;scrollbar-color:#385a74 transparent}.p3-rsi-card{min-height:82px;scroll-snap-align:start}.p3-rsi-card strong{font-size:20px}.p3-rsi-card small{display:block}
  .p3-controls{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 10px 10px}.p3-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.p3-metric{min-height:100px;padding:12px}
}
@media(max-width:480px){
  .p3-shell{padding-inline:8px}.p3-brand strong{font-size:12px}.p3-brand small{font-size:8px}.p3-tabs a{font-size:11px}.p3-connection{min-height:38px}.p3-connection strong{font-size:9px}
  .p3-hero h1{font-size:24px}.p3-hero p{line-height:1.45}.p3-strip-title{font-size:15px}.p3-levels-meta span:last-child{max-width:126px;line-height:1.3;text-align:right;white-space:normal}
  .p3-level-group header span{font-size:14px}.p3-level-group header small{font-size:10px}.p3-level-row{grid-template-columns:auto minmax(0,1fr);gap:5px;min-height:62px;padding:7px}.p3-level-row strong{font-size:clamp(13px,3.8vw,16px);text-align:right}.p3-level-row small{grid-column:1/-1;justify-self:start;font-size:10px}.p3-spot-card strong{font-size:27px}
  .p3-chart-title{align-items:center}.p3-chart-title h2{font-size:17px}.p3-chart-title p{display:none}.p3-badge{font-size:7px}.p3-button,.p3-tf{min-height:40px;font-size:11px}.p3-chart-stage{height:420px}
  .p3-rsi-top strong{font-size:16px}.p3-rsi-top>span>small{font-size:10px}.p3-rsi-average b{font-size:21px}.p3-controls{grid-template-columns:1fr 1fr}.p3-control{font-size:11px}
  .p3-metric{min-height:94px;padding:11px}.p3-metric strong{font-size:19px}.p3-footer{display:block}.p3-footer span+span{display:block;margin-top:5px}
}
@media(prefers-reduced-motion:reduce){
  .p3-tabs a,.p3-level-row,.p3-level-row i,.p3-button,.p3-tf,.p3-rsi-card{transition:none!important}.p3-level-row:hover,.p3-button:hover,.p3-tf:hover{transform:none}
}