/* Native desktop density scaling. Never scale an ancestor of a canvas: pointer and drawing coordinates stay exact. */
@media(min-width:1600px){
  :root{--desktop-rail:clamp(72px,3.25vw,108px);--desktop-topbar:clamp(64px,3vw,96px);--desktop-gap:clamp(16px,.7vw,26px);--desktop-radius:clamp(6px,.32vw,11px)}
  .rail{width:var(--desktop-rail)}
  .brand{height:var(--desktop-topbar)}
  .brand img{width:clamp(40px,1.85vw,64px);height:clamp(40px,1.85vw,64px)}
  .rail nav{gap:clamp(7px,.32vw,12px);padding:clamp(14px,.65vw,24px) clamp(8px,.36vw,14px)}
  .rail-item{width:calc(var(--desktop-rail) - clamp(16px,.72vw,28px));height:clamp(58px,2.65vw,92px);gap:clamp(5px,.25vw,9px);font-size:clamp(10px,.45vw,16px);border-radius:var(--desktop-radius)}
  .rail-item i{font-size:clamp(17px,.75vw,27px)}
  .topbar{left:var(--desktop-rail);height:var(--desktop-topbar);padding:0 clamp(20px,.95vw,36px)}
  .app{margin-left:var(--desktop-rail);padding-top:var(--desktop-topbar)}
  .wordmark strong{font-size:clamp(15px,.66vw,24px)}
  .wordmark span,.account-button small,.market-pulse small{font-size:clamp(9px,.4vw,14px);margin-top:clamp(3px,.14vw,5px)}
  .market-pulse{padding-left:clamp(14px,.62vw,23px)}
  .market-pulse b,.account-button b{font-size:clamp(11px,.49vw,18px)}
  .pulse-dot{top:clamp(6px,.26vw,10px);width:clamp(6px,.27vw,10px);height:clamp(6px,.27vw,10px)}
  .top-actions{gap:clamp(9px,.42vw,16px)}
  .mode-badge{padding:clamp(6px,.28vw,10px) clamp(9px,.42vw,16px);font-size:clamp(9px,.4vw,14px)}
  .icon-button{width:clamp(34px,1.5vw,54px);height:clamp(34px,1.5vw,54px)}
  .account-button{height:clamp(44px,2vw,70px);gap:clamp(9px,.42vw,16px)}
  .avatar{width:clamp(32px,1.45vw,52px);height:clamp(32px,1.45vw,52px)}
  .page,.ai-page{width:100%;max-width:3600px;padding:clamp(30px,1.55vw,58px) clamp(34px,1.75vw,66px) clamp(60px,3vw,112px)}
  .page-head{margin-bottom:clamp(24px,1.1vw,42px)}
  .eyebrow{margin-bottom:clamp(7px,.32vw,12px);font-size:clamp(9px,.4vw,15px);letter-spacing:clamp(1.8px,.09vw,3.4px)}
  .page-head h1{margin-bottom:clamp(6px,.28vw,11px);font-size:clamp(25px,1.05vw,40px)}
  .page-head p:last-child{font-size:clamp(11px,.48vw,18px)}
  .head-actions{gap:clamp(8px,.36vw,14px)}
  .button{height:clamp(38px,1.65vw,62px);padding:0 clamp(15px,.7vw,26px);gap:clamp(7px,.32vw,12px);font-size:clamp(11px,.48vw,18px);border-radius:var(--desktop-radius)}
  .button.small{height:clamp(30px,1.35vw,50px);padding:0 clamp(10px,.47vw,18px);font-size:clamp(9px,.4vw,15px)}
  .link-button{font-size:clamp(10px,.44vw,16px)}
  .panel{border-radius:var(--desktop-radius)}
  .panel-head{min-height:clamp(52px,2.35vw,88px);padding:0 clamp(16px,.75vw,28px)}
  .panel-head h2{font-size:clamp(13px,.57vw,21px)}
  .panel-head p{margin-top:clamp(3px,.14vw,5px);font-size:clamp(9px,.4vw,15px)}
  .panel-body,.order-form{padding:clamp(16px,.75vw,28px)}
  .panel-stack,.content-grid,.trade-layout,.strategy-layout{gap:var(--desktop-gap)}
  .market-strip{gap:clamp(9px,.48vw,18px);margin-bottom:clamp(18px,.84vw,32px)}
  .ticker-tile{padding:clamp(12px,.58vw,22px);border-radius:var(--desktop-radius)}
  .ticker-tile b{font-size:clamp(11px,.48vw,18px)}
  .ticker-tile strong{margin:clamp(8px,.36vw,14px) 0 clamp(4px,.18vw,7px);font-size:clamp(15px,.66vw,24px)}
  .ticker-tile small{font-size:clamp(9px,.4vw,15px)}
  .professional-chart{height:clamp(720px,36vw,1380px)}
  .chart-toolbar{min-height:clamp(46px,2.05vw,76px);padding:clamp(6px,.28vw,11px) clamp(8px,.38vw,14px);gap:clamp(7px,.32vw,12px)}
  .chart-tool-strip{gap:clamp(3px,.14vw,6px)}
  .chart-tool,.chart-action{height:clamp(32px,1.45vw,54px);gap:clamp(6px,.28vw,10px);border-radius:clamp(4px,.2vw,7px)}
  .chart-tool{padding:0 clamp(8px,.38vw,14px);font-size:clamp(8px,.36vw,13px)}
  .chart-tool i{width:clamp(12px,.55vw,20px)}
  .chart-indicator-picker{width:clamp(300px,14vw,520px);height:clamp(32px,1.45vw,54px);border-radius:clamp(4px,.2vw,7px)}
  .chart-indicator-picker>input{font-size:clamp(10px,.44vw,16px)}
  .chart-indicator-picker select{width:clamp(170px,8vw,300px);padding:0 clamp(7px,.34vw,13px);font-size:clamp(8px,.36vw,14px)}
  .chart-action{width:clamp(32px,1.45vw,54px);flex-basis:clamp(32px,1.45vw,54px);font-size:clamp(9px,.4vw,15px)}
  .chart-controls,.segmented{gap:clamp(4px,.18vw,7px)}
  .chart-controls button,.segmented button{height:clamp(28px,1.28vw,48px);padding:0 clamp(9px,.42vw,16px);font-size:clamp(9px,.4vw,15px)}
  .market-chart-metrics>div{padding:clamp(10px,.48vw,18px) clamp(13px,.62vw,24px)}
  .market-chart-metrics small{font-size:clamp(8px,.36vw,14px)}
  .market-chart-metrics b{margin-top:clamp(4px,.18vw,7px);font-size:clamp(10px,.44vw,17px)}
  .market-workspace{margin-top:var(--desktop-gap)}
  .market-workspace-tabs{min-height:clamp(58px,2.65vw,98px);padding:clamp(8px,.38vw,14px) clamp(10px,.48vw,18px);gap:clamp(8px,.38vw,14px)}
  .market-workspace-tabs button{height:clamp(40px,1.85vw,68px);min-width:clamp(150px,7.2vw,270px);padding:0 clamp(18px,.85vw,32px);gap:clamp(8px,.38vw,14px);font-size:clamp(11px,.5vw,19px);border-radius:var(--desktop-radius)}
  .position-order-layout{grid-template-columns:clamp(370px,16vw,600px) minmax(0,1fr);min-height:clamp(430px,19vw,720px)}
  .workspace-balance{font-size:clamp(9px,.4vw,15px)}
  .field{gap:clamp(6px,.28vw,10px);margin-bottom:clamp(12px,.56vw,21px)}
  .field-row{gap:clamp(10px,.46vw,18px)}
  .field label{font-size:clamp(9px,.4vw,15px)}
  .field>label:not(.risk-checkbox){min-height:clamp(18px,.8vw,30px)}
  .input-wrap{height:clamp(38px,1.7vw,64px);border-radius:clamp(4px,.2vw,7px)}
  .input-wrap input,.input-wrap select{padding:0 clamp(10px,.48vw,18px);font-size:clamp(11px,.48vw,18px)}
  .input-wrap span{padding-right:clamp(10px,.48vw,18px);font-size:clamp(9px,.4vw,15px)}
  .live-risk-settings{padding:clamp(20px,.92vw,34px)}
  .live-risk-settings :is(.input-wrap,.risk-checkbox,.emergency-risk-field .button){height:clamp(38px,1.7vw,64px);min-height:clamp(38px,1.7vw,64px)}
  .live-risk-settings .field>small{min-height:clamp(30px,1.35vw,50px)}
  .live-risk-settings .risk-latched{margin:calc(clamp(20px,.92vw,34px) * -1) calc(clamp(20px,.92vw,34px) * -1) clamp(20px,.92vw,34px);padding-inline:clamp(20px,.92vw,34px)}
  .range-row{grid-template-columns:1fr clamp(48px,2.2vw,82px);gap:clamp(8px,.38vw,14px)}
  .range-value{height:clamp(30px,1.35vw,50px);font-size:clamp(9px,.4vw,15px)}
  .side-toggle{gap:clamp(7px,.32vw,12px);margin-bottom:clamp(14px,.65vw,24px)}
  .side-toggle button{height:clamp(36px,1.62vw,60px);font-size:clamp(11px,.48vw,18px)}
  .order-estimate{padding:clamp(11px,.52vw,20px);margin:clamp(12px,.56vw,21px) 0;gap:clamp(7px,.32vw,12px)}
  .order-estimate div{font-size:clamp(9px,.4vw,15px)}
  .tabs{gap:clamp(4px,.18vw,7px);padding:0 clamp(15px,.7vw,26px)}
  .tabs button{height:clamp(45px,2vw,76px);padding:0 clamp(13px,.6vw,23px);font-size:clamp(10px,.44vw,17px)}
  .data-table th{padding:clamp(10px,.48vw,18px) clamp(14px,.65vw,25px);font-size:clamp(9px,.4vw,15px)}
  .data-table td{padding:clamp(12px,.56vw,21px) clamp(14px,.65vw,25px);font-size:clamp(10px,.44vw,17px)}
  .coin{width:clamp(25px,1.15vw,43px);height:clamp(25px,1.15vw,43px);font-size:clamp(9px,.4vw,15px)}
  .side-pill,.status-pill{padding:clamp(4px,.18vw,7px) clamp(7px,.32vw,12px);font-size:clamp(8px,.36vw,14px)}
  .empty{padding:clamp(54px,2.5vw,96px) clamp(20px,.95vw,36px)}
  .empty i{font-size:clamp(28px,1.25vw,48px);margin-bottom:clamp(12px,.56vw,21px)}
  .empty b{font-size:clamp(12px,.52vw,20px)}
  .empty p{font-size:clamp(10px,.44vw,17px)}
  .modal{padding:clamp(25px,1.15vw,44px);border-radius:var(--desktop-radius)}
  .modal h2{font-size:clamp(17px,.75vw,28px)}
  .modal p,.toast{font-size:clamp(10px,.44vw,17px)}
  .toast{min-width:clamp(240px,11vw,410px);max-width:clamp(350px,16vw,600px);padding:clamp(12px,.56vw,21px) clamp(14px,.65vw,25px)}
  .editor-layout{grid-template-columns:minmax(0,1fr) clamp(320px,14vw,520px)}
  .editor-view-tabs{min-height:clamp(46px,2.05vw,76px);padding:clamp(6px,.28vw,11px) clamp(16px,.75vw,28px);gap:clamp(6px,.28vw,11px)}
  .editor-view-tabs button{height:clamp(32px,1.45vw,54px);padding:0 clamp(12px,.56vw,21px);gap:clamp(7px,.32vw,12px);font-size:clamp(9px,.4vw,15px)}
  .editor-view-tabs button i{font-size:clamp(9px,.4vw,15px)}
  .editor-view-tabs button small{min-width:clamp(30px,1.35vw,50px);font-size:clamp(7px,.32vw,12px)}
  .condition-area,.backtest-settings{padding:clamp(16px,.75vw,28px)}
  .editor-toolbar{gap:clamp(7px,.32vw,12px)}
  .editor-toolbar .input-wrap{height:clamp(30px,1.35vw,50px);width:clamp(120px,5.8vw,215px)}
  .syntax-strip{min-height:clamp(34px,1.55vw,58px);gap:clamp(7px,.32vw,12px);margin-bottom:clamp(12px,.56vw,21px)}
  .syntax-strip code,.syntax-strip span{font-size:clamp(9px,.4vw,15px)}
  .code-editor{height:clamp(104px,4.8vw,180px);padding:clamp(11px,.52vw,20px);font-size:clamp(10px,.44vw,17px)}
  .code-editor.unified{height:clamp(320px,14vw,540px);font-size:clamp(11px,.48vw,18px)}
  .editor-field>span{padding:clamp(9px,.42vw,16px) clamp(11px,.52vw,20px);font-size:clamp(10px,.44vw,17px)}
  .editor-field small{padding:clamp(7px,.32vw,12px) clamp(10px,.48vw,18px);font-size:clamp(8px,.36vw,14px)}
  .backtest-settings h3{font-size:clamp(12px,.52vw,20px);margin-bottom:clamp(15px,.7vw,26px)}
  .library-grid{gap:clamp(7px,.32vw,12px);padding:clamp(10px,.48vw,18px)}
  .library-grid button{min-height:clamp(62px,2.85vw,106px);padding:clamp(9px,.42vw,16px)}
  .library-grid span{font-size:clamp(9px,.4vw,15px)}
  .library-grid code{font-size:clamp(8px,.36vw,14px)}
  .ai-page{max-width:3600px}
  .ai-layout{grid-template-columns:clamp(245px,11vw,420px) minmax(430px,1fr) clamp(320px,14vw,540px);gap:var(--desktop-gap)}
  .ai-chat-panel{height:calc(100vh - var(--desktop-topbar) - clamp(87px,4vw,150px));min-height:clamp(620px,29vw,1060px);grid-template-rows:clamp(54px,2.45vw,90px) minmax(0,1fr) auto}
  .ai-skill{min-height:clamp(68px,3.1vw,116px);padding:clamp(11px,.52vw,20px) clamp(9px,.42vw,16px);grid-template-columns:clamp(30px,1.4vw,50px) 1fr clamp(12px,.55vw,20px);gap:clamp(8px,.38vw,14px)}
  .ai-skill b,.ai-message-content,.ai-composer textarea,.ai-config-form textarea{font-size:clamp(10px,.44vw,17px)}
  .ai-skill small,.ai-chat-head small,.ai-context-row label,.ai-compose-actions small,.ai-provider-state,.ai-provider-fields>label:not(.ai-provider-clear),.ai-tool-row small,.ai-audit-row small{font-size:clamp(8px,.36vw,14px)}
  .ai-chat-head b{font-size:clamp(11px,.48vw,18px)}
  .ai-messages{padding:clamp(18px,.84vw,32px);gap:clamp(16px,.75vw,28px)}
  .ai-message-content{padding:clamp(12px,.56vw,21px) clamp(13px,.62vw,23px)}
  .ai-config-form{padding:clamp(13px,.62vw,23px);max-height:clamp(560px,26vw,950px)}
  .chart-stage{grid-template-columns:clamp(43px,1.95vw,72px) minmax(0,1fr)}
  .chart-drawing-rail{gap:clamp(3px,.14vw,5px);padding:clamp(5px,.22vw,9px) clamp(4px,.18vw,7px)}
  .chart-rail-button{width:clamp(34px,1.5vw,55px);height:clamp(34px,1.5vw,55px);font-size:clamp(11px,.48vw,18px)}
  .chart-tool-menu{left:clamp(42px,1.9vw,70px);width:clamp(310px,14vw,520px);padding:clamp(7px,.32vw,12px);max-height:min(780px,calc(100vh - 220px))}
  .chart-tool-menu header{height:clamp(31px,1.4vw,52px);padding:0 clamp(7px,.32vw,12px)}
  .chart-tool-menu header b{font-size:clamp(9px,.4vw,15px)}
  .chart-tool-menu-grid{gap:clamp(3px,.14vw,5px)}
  .chart-tool-option{min-height:clamp(34px,1.55vw,58px);padding:clamp(6px,.28vw,10px) clamp(8px,.38vw,14px);gap:clamp(8px,.36vw,14px);font-size:clamp(8px,.36vw,14px)}
  .chart-tool-option i{width:clamp(14px,.62vw,23px)}
  .chart-tool-status{gap:clamp(7px,.32vw,12px);font-size:clamp(8px,.36vw,14px)}
  .chart-tool-status b{font-size:clamp(9px,.4vw,15px)}
  .chart-tool-status button{width:clamp(27px,1.22vw,45px);height:clamp(27px,1.22vw,45px)}
  .chart-tool-style-modal{width:min(clamp(610px,28vw,980px),100%)}
  .custom-chart-period-modal{width:min(clamp(650px,30vw,1050px),100%)}
  .chart-color-input{height:clamp(38px,1.7vw,64px);padding:0 clamp(9px,.42vw,16px);gap:clamp(9px,.42vw,16px)}
  .chart-color-input input{width:clamp(28px,1.28vw,48px);height:clamp(25px,1.15vw,43px)}
  .chart-color-input code,.custom-chart-period-item small{font-size:clamp(8px,.36vw,14px)}
  .chart-tool-apply-last{font-size:clamp(9px,.4vw,15px)}
  .custom-chart-period-item{min-height:clamp(40px,1.8vw,68px);padding:clamp(7px,.32vw,12px) clamp(9px,.42vw,16px)}
  .custom-chart-period-item b{font-size:clamp(10px,.44vw,17px)}
  .chart-object-manager{min-height:clamp(39px,1.75vw,66px);padding:clamp(5px,.22vw,9px) clamp(8px,.38vw,14px);gap:clamp(8px,.36vw,14px)}
  .chart-object-manager-title{gap:clamp(5px,.22vw,9px)}
  .chart-object-manager-title b{font-size:clamp(8px,.36vw,14px)}
  .chart-object-manager-title small,.chart-object-empty{font-size:clamp(7px,.32vw,12px)}
  .chart-object-list{gap:clamp(5px,.22vw,9px)}
  .chart-object-item{height:clamp(28px,1.28vw,48px);min-width:clamp(125px,5.8vw,220px);max-width:clamp(230px,10.5vw,400px);grid-template-columns:clamp(20px,.9vw,34px) clamp(15px,.68vw,26px) minmax(0,1fr);padding:0 clamp(7px,.32vw,12px) 0 clamp(5px,.22vw,9px)}
  .chart-object-item b{font-size:clamp(7px,.32vw,12px)}
  .chart-object-item small{font-size:clamp(6px,.28vw,11px)}
  .chart-tool-advanced-fields{margin:clamp(13px,.6vw,23px) 0;padding:clamp(11px,.52vw,20px)}
  .chart-tool-level-head b{font-size:clamp(9px,.4vw,15px)}
  .chart-tool-level-head small{font-size:clamp(7px,.32vw,12px)}
  .chart-tool-level-list{gap:clamp(5px,.22vw,9px);max-height:clamp(255px,11.8vw,450px)}
  .chart-tool-level-row{grid-template-columns:clamp(64px,3vw,112px) minmax(90px,1fr) minmax(105px,1.1fr);gap:clamp(7px,.32vw,12px)}
  .chart-tool-level-row .input-wrap,.chart-tool-level-row .chart-color-input,.chart-tool-level-visible{height:clamp(34px,1.52vw,57px)}
  .chart-tool-level-visible{font-size:clamp(8px,.36vw,14px)}
  .chart-drawing-legend{left:clamp(12px,.55vw,21px);gap:clamp(2px,.09vw,4px);max-width:calc(100% - clamp(90px,4.2vw,160px))}
  .chart-drawing-legend-row{height:clamp(22px,1vw,38px);gap:clamp(2px,.09vw,4px);font-size:clamp(10px,.44vw,16px);line-height:clamp(22px,1vw,38px)}
  .chart-drawing-legend-row b{font-size:clamp(10px,.44vw,16px)}
  .chart-drawing-legend-row button{width:clamp(17px,.78vw,29px);height:clamp(18px,.82vw,31px);font-size:clamp(9px,.4vw,15px)}
}

@media (min-width:821px){
  .chart-indicator-picker select,
  .chart-indicator-picker select option,
  .chart-indicator-picker select optgroup,
  .chart-indicator-picker>input,
  .chart-indicator-option-group span,
  .chart-tool-menu header b,
  .chart-tool-option{font-size:clamp(12px,.52vw,20px)}
  .chart-drawing-legend-row{height:clamp(24px,1.08vw,41px);font-size:clamp(12px,.52vw,20px);line-height:clamp(24px,1.08vw,41px)}
  .chart-drawing-legend-row b{font-size:clamp(12px,.52vw,20px)}
  .chart-drawing-legend-row button{width:clamp(19px,.86vw,33px);height:clamp(20px,.9vw,34px);font-size:clamp(11px,.48vw,18px)}
  .chart-drawing-legend-row [data-drawing-settings]{font-size:clamp(12px,.52vw,20px)}
  .chart-drawing-legend-row [data-drawing-remove]{font-size:clamp(13px,.56vw,22px)}
}

@media (min-width:821px){
  .chart-tool-style-modal{width:min(clamp(820px,38vw,1320px),100%)}
  .chart-tool-setting-section{margin-top:clamp(12px,.56vw,21px);padding:clamp(12px,.56vw,21px)}
  .chart-tool-setting-section>header{min-height:clamp(30px,1.35vw,50px);margin-bottom:clamp(10px,.46vw,18px);gap:clamp(8px,.36vw,14px)}
  .chart-tool-setting-section>header>b{font-size:clamp(11px,.48vw,18px)}
  .chart-tool-section-toggle,.chart-tool-option-toggle{font-size:clamp(10px,.44vw,17px)}
  .chart-tool-advanced-options{gap:clamp(8px,.36vw,14px);margin-bottom:clamp(10px,.46vw,18px);padding:clamp(9px,.42vw,16px)}
  .chart-tool-advanced-options>.field>span{font-size:clamp(9px,.4vw,15px)}
  .chart-tool-option-toggle{min-height:clamp(38px,1.7vw,64px);padding:0 clamp(9px,.42vw,16px)}
  .chart-tool-parameter-grid{gap:clamp(9px,.42vw,16px)}
  .chart-tool-parameter-grid>.chart-tool-option-toggle{min-height:clamp(38px,1.7vw,64px)}
  .chart-tool-level-row{grid-template-columns:clamp(70px,3.2vw,120px) minmax(100px,1fr) minmax(125px,1.15fr) clamp(92px,4.2vw,155px) clamp(105px,4.8vw,180px)}
  .chart-tool-level-row select{font-size:clamp(10px,.44vw,17px)}
}