/* Shared, readable typography across GudangKripto Learning Hub and Pro. */
:root{--font-family-ui:'Inter',Arial,sans-serif;--font-body:14px;--font-data:13px;--font-label:12px;--font-button:14px;--text-primary:#eaecef;--text-secondary:#a2abb2;--text-tertiary:#929da5}
html{font-size:14px;text-size-adjust:100%;-webkit-text-size-adjust:100%}body{font-family:var(--font-family-ui);font-size:var(--font-body);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input,select,textarea,output{font-family:var(--font-family-ui)}button,input,select,textarea{font-size:var(--font-button);line-height:1.45}button{font-weight:500}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-ui);font-weight:600}small{font-size:var(--font-label);line-height:1.5}svg text{font-family:var(--font-family-ui)}input[type=number],output,table,.price,.book-row,.summary,.estimates,.account{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1,'lnum' 1}.eyebrow{font-size:var(--font-label);font-weight:600;letter-spacing:1.1px;line-height:1.6}
/* Pro: use a compact exchange-style hierarchy without reducing legibility. */
.pro-app{color:var(--text-primary)}.pro-app header{height:70px;gap:22px}.pro-app header>a:not(.brand){font-size:14px}.pro-app .brand b{font-size:24px}.pro-app .demo{font-size:12px;font-weight:500;letter-spacing:.3px;padding:7px 10px}.pro-app #reset{font-size:13px;padding:8px 12px}.pro-app .ticker{height:auto;min-height:48px;gap:16px;flex-wrap:wrap;padding-block:8px;font-size:12px;color:var(--text-secondary)}.pro-app .ticker>span:first-child{font-size:12px;letter-spacing:.3px;font-weight:500}.pro-app .feed-switch button,.pro-app #pauseMarket,.pro-app #marketSpeed,.pro-app .ticker>a,.pro-app .connection{font-size:12px;line-height:1.45}.pro-app .feed-switch button{padding:5px 9px}.pro-app .connection{letter-spacing:0}.pro-app .summary{height:82px;gap:25px;padding-inline:18px}.pro-app .summary .pair b{font-size:16px}.pro-app .summary small{font-size:12px;font-weight:400;color:var(--text-secondary);margin-bottom:4px}.pro-app .summary b{font-size:14px;font-weight:500}.pro-app .summary .last strong{font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.3px}.pro-app .summary .last small{font-size:12px}.pro-app .dim{color:var(--text-secondary)}.pro-app .chartbar{height:44px;gap:1px;overflow-x:auto;scrollbar-width:thin;flex-wrap:nowrap}.pro-app .chartbar>*{flex-shrink:0}.pro-app .chartbar button,.pro-app .chartbar #ma,.pro-app .chartbar #viewTradingView{font-size:12px;padding:8px 7px;white-space:nowrap}.pro-app .chartbar #zoomIn,.pro-app .chartbar #zoomOut{font-size:18px}.pro-app .chartbar .timeframes{margin-right:auto}.pro-app .chart-title{height:auto;min-height:48px;padding-block:10px;gap:6px 16px;line-height:1.5;font-size:12px;color:var(--text-secondary)}.pro-app #ohlc{font-size:12px;color:var(--text-secondary)}.pro-app .chart-caption{font-size:12px;color:var(--text-secondary);line-height:1.65;flex-wrap:wrap;padding:10px 14px;gap:4px 12px}.pro-app .chart-caption #tickTime{color:var(--text-secondary);font-size:12px}.pro-app .crosshair-label{font-size:12px;line-height:1.6}.pro-app .tv-credit{font-size:12px;line-height:1.5;height:26px;color:#8db2bc;padding:4px 12px}.pro-app #tradingViewMount{height:calc(100% - 26px)}.pro-app .price-controls{font-size:12px;gap:7px;line-height:1.5}.pro-app .price-controls>span{color:var(--text-secondary)}.pro-app .price-controls button{font-size:12px;padding:7px 9px}.pro-app .price-controls input{font-size:13px;width:120px;padding:8px}.pro-app h2,.pro-app .account h2{font-size:14px;line-height:1.5;font-weight:600}.pro-app h2>span{font-size:12px;font-weight:400;letter-spacing:0}.pro-app .book-panel h2{font-size:14px;padding:12px 14px}.pro-app .book-head{font-size:12px;line-height:1.4;color:var(--text-secondary);padding:0 14px;margin-bottom:8px}.pro-app .book-row,.pro-app button.book-row{font-family:var(--font-family-ui);font-size:13px;font-weight:400;line-height:1.5;height:26px;padding-inline:14px;letter-spacing:0}.pro-app #trades .book-row{font-size:12px;height:26px}.pro-app .book-price{padding:10px 14px;gap:8px;flex-wrap:wrap}.pro-app .book-price b{font-size:20px;font-weight:600}.pro-app .book-price small{font-size:12px;color:var(--text-secondary)}.pro-app .book-wait{font-size:13px;color:var(--text-secondary)}.pro-app .bottom-tabs{gap:24px}.pro-app .bottom-tabs button{font-size:14px;line-height:1.5;padding-block:14px;color:var(--text-secondary)}.pro-app .bottom-tabs button.active{color:var(--text-primary);font-weight:600}.pro-app .table-wrap table{font-size:13px;line-height:1.55}.pro-app .table-wrap th{font-size:12px;font-weight:500;color:var(--text-secondary);padding:13px 14px}.pro-app .table-wrap td{font-size:13px;padding:14px;line-height:1.65}.pro-app .pos-action,.pro-app #cancelOrder{font-size:12px;font-weight:500;padding:7px 10px}.pro-app .empty{font-size:13px;line-height:1.8;color:var(--text-secondary)}.pro-app .empty strong{font-size:14px;color:#c7d0d6}.pro-app .mode-row{gap:12px;padding:16px}.pro-app .mode-row label{font-size:12px;line-height:1.5;color:var(--text-secondary)}.pro-app .mode-row select{font-size:14px;padding:9px 10px}.pro-app .order-tabs button{font-size:14px;font-weight:600;padding-block:12px}.pro-app .ticket{padding:18px 16px 14px}.pro-app label{font-size:12px;font-weight:400;line-height:1.5;color:var(--text-secondary)}.pro-app .ticket label>input:not([type=checkbox]),.pro-app input:not([type=checkbox]):not([type=range]),.pro-app select{font-size:14px;line-height:1.5;padding:11px 12px}.pro-app .ticket label>input:not([type=checkbox]){margin-block:7px 18px}.pro-app input::placeholder{color:#9aa3ac;opacity:1}.pro-app .allocation-label{font-size:12px;line-height:1.5;color:var(--text-secondary)}.pro-app .available{font-size:12px;line-height:1.6;color:var(--text-secondary);gap:8px;flex-wrap:wrap;margin:21px 0}.pro-app .check{font-size:14px;color:var(--text-primary)}.pro-app .estimates{font-size:12px;line-height:1.5;gap:11px;color:var(--text-secondary)}.pro-app .estimates b{font-size:13px;font-weight:500;color:#d1d9df}.pro-app .trade-button{font-size:14px;font-weight:600;line-height:1.5;padding:12px 14px}.pro-app .ticket-note{font-size:12px;line-height:1.65;color:var(--text-secondary);margin-top:10px}.pro-app #status{font-size:13px;line-height:1.65;padding:13px 16px}.pro-app .account{padding:18px 16px}.pro-app .account>div{font-size:12px;line-height:1.6;color:var(--text-secondary);margin-bottom:12px}.pro-app .account b{font-size:13px;font-weight:500}.pro-app .account>small{font-size:12px;line-height:1.6;color:var(--text-secondary)}.pro-app .parameters summary{font-size:13px;line-height:1.6;color:#c1cbd2}.pro-app .parameters p,.pro-app .parameters small,.pro-app .parameters label{font-size:12px;line-height:1.65;color:var(--text-secondary)}.pro-app .parameters button{font-size:13px;padding:9px}.pro-app footer{font-size:12px;line-height:1.6;gap:12px 24px;flex-wrap:wrap;padding:10px 20px;color:var(--text-secondary)}.pro-app footer>span:first-child{font-size:12px;letter-spacing:.4px}
/* Learning pages share the same body, label, and button scale. */
.landing-app nav,.landing-app .navcta,.landing-app .back-button,.landing-app .primary,.landing-app .textlink{font-size:14px;line-height:1.5}.landing-app .intro{font-size:18px;line-height:1.75}.landing-app .hero-meta,.landing-app .ribbon,.landing-app .ribbon a,.landing-app .demo-badge,.landing-app .visual-label b,.landing-app .visual-bottom{font-size:12px;line-height:1.65}.landing-app .subtext,.landing-app .section-heading>p:last-child,.landing-app .lesson-list p,.landing-app .faq details p{font-size:15px;line-height:1.75;color:var(--text-secondary)}.landing-app .market-top p,.landing-app .slider-label,.landing-app .leverage-line,.landing-app .notional,.landing-app .ticket>p{font-size:14px;line-height:1.6}.landing-app .range-label,.landing-app .pair small,.landing-app .chart-note,.landing-app .advanced,.landing-app .result-row p,.landing-app .result-row strong,.landing-app .direction span,.landing-app .tooltip p{font-size:12px;line-height:1.65}.landing-app .chart-note,.landing-app .range-label{color:var(--text-secondary)}.landing-app .scenario,.landing-app .scenario button{font-size:12px;line-height:1.5}.landing-app .result-message{font-size:14px;line-height:1.7}.landing-app .result-row button,.landing-app .allfaq{font-size:14px;line-height:1.5}.landing-app .lesson-list>a>span{font-size:12px}.landing-app footer,.landing-app footer small,.landing-app footer>div span{font-size:12px;line-height:1.7}.hub-app{font-size:14px;line-height:1.65}.hub-app .brand,.hub-app .pill,.hub-app .download,.hub-app .back-button,.hub-app .heroNote>span,.hub-app .label,.hub-app .tag,.hub-app .term span{font-size:12px;line-height:1.6}.hub-app nav button,.hub-app .primary,.hub-app button,.hub-app input,.hub-app select{font-size:14px;line-height:1.5}.hub-app small,.hub-app .stats span,.hub-app .metricGrid span,.hub-app .estimate span,.hub-app .footnote,.hub-app footer,.hub-app #faqList a,.hub-app .sourceList small{font-size:12px;line-height:1.7}.hub-app #status,.hub-app .term p,.hub-app .sourceList a{font-size:14px;line-height:1.7}.hub-app .term h3{font-size:18px;line-height:1.4}.hub-app #faqList summary{font-size:16px;line-height:1.6}.hub-app #faqList p{font-size:14px;line-height:1.8}.hub-app table{font-size:13px;line-height:1.6}.hub-app th{font-size:12px}.hub-app .muted,.hub-app li,.hub-app .learnGrid p,.hub-app .formulas p{color:var(--text-secondary)}
/* Preserve readability at narrower widths; scroll dense tools and tables. */
@media(min-width:1500px){.pro-app main{grid-template-columns:minmax(0,1fr) 340px}.pro-app .market-grid{grid-template-columns:minmax(0,1fr) 280px}}
@media(min-width:1700px){.pro-app main{grid-template-columns:minmax(0,1fr) 360px}.pro-app .market-grid{grid-template-columns:minmax(0,1fr) 300px}.pro-app .book-row,.pro-app button.book-row{height:27px}}
@media(max-width:1200px) and (min-width:851px){.pro-app main{grid-template-columns:minmax(0,1fr) 300px}.pro-app .market-grid{grid-template-columns:minmax(0,1fr) 250px}.pro-app .summary{gap:18px}.pro-app .demo{font-size:12px}.pro-app header{gap:16px}.pro-app .brand img{width:155px}}
@media(max-width:850px){.pro-app header{height:auto;min-height:70px;gap:12px 18px;flex-wrap:wrap}.pro-app .ticker{gap:10px 14px;padding:10px 16px}.pro-app .ticker .connection{margin-left:0}.pro-app .summary{height:auto;min-height:82px}.pro-app .market-grid{grid-template-columns:minmax(0,1fr) 250px}.pro-app .price-controls>span{width:auto}.pro-app .book-row,.pro-app button.book-row{font-size:13px}.landing-app header{gap:14px;flex-wrap:wrap;height:auto;min-height:80px;padding-block:16px}.landing-app .hero-meta{gap:14px;flex-wrap:wrap}.landing-app .hero-actions{gap:20px}.landing-app .intro{font-size:16px}}
@media(max-width:560px){.pro-app main{grid-template-columns:1fr}.pro-app .market-grid{grid-template-columns:1fr}.pro-app .brand img{width:145px}.pro-app .brand b{font-size:24px}.pro-app header>a:not(.brand){font-size:14px}.pro-app .demo{font-size:12px}.pro-app .summary .pair b{font-size:14px}.pro-app .summary .last strong{font-size:20px}.pro-app .summary small{font-size:12px}.pro-app .summary{gap:16px;flex-wrap:wrap;overflow:visible}.pro-app .summary>div:nth-child(3){margin-left:0}.pro-app .book-panel{gap:0 14px;padding:12px}.pro-app .book-panel .book-row,.pro-app .book-panel button.book-row{font-size:12px;line-height:1.5;height:26px;padding:0 4px}.pro-app .book-panel h2{padding:0 4px 10px}.pro-app .chartbar{overflow-x:auto;min-height:46px}.pro-app .chartbar #ma{display:block;font-size:12px}.pro-app .chartbar #fullscreen,.pro-app .chartbar #viewTradingView{font-size:12px;padding:8px 7px}.pro-app .chart-title{font-size:12px;min-height:54px}.pro-app #ohlc{font-size:12px}.pro-app .bottom-tabs{gap:22px}.pro-app .bottom-tabs button{font-size:14px}.pro-app .ticket label>input:not([type=checkbox]){font-size:16px}.pro-app .mode-row select{font-size:16px}.pro-app .price-controls input{font-size:16px}.pro-app .chart-caption{font-size:12px}.pro-app .crosshair-label{font-size:12px;right:70px}.pro-app footer,.pro-app footer>span:first-child{font-size:12px}.landing-app .slider-label{flex-wrap:wrap}.landing-app .hero-meta{font-size:12px;letter-spacing:0}.landing-app .direction span{font-size:12px}.landing-app .lesson-list h3{font-size:18px}.landing-app .section-heading>p:last-child{font-size:14px}.landing-app .faq summary{font-size:16px;line-height:1.6}.landing-app .ribbon{font-size:12px;line-height:1.65}.landing-app footer>div{flex-wrap:wrap}.hub-app .hero p{font-size:14px}.hub-app .stats span{font-size:12px}.hub-app .brand,.hub-app .download{font-size:12px}.hub-app .metricGrid{grid-template-columns:1fr 1fr}}
/* Keep SVG scale labels at a readable 12 CSS pixels as the chart resizes. */
.pro-app #proChart text{font-size:var(--chart-font-size,16px)}

header .back-button{width:36px;min-width:36px;height:36px;padding:8px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;flex-shrink:0}header .back-button:hover{background:#22252a}