*{box-sizing:border-box}html,body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#101828;background:#f6f7f9}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.hidden{display:none!important}.topbar{height:82px;background:#fff;border-bottom:1px solid #eaecf0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(14px,4vw,48px);position:sticky;top:0;z-index:40}.brand img{width:230px;max-height:66px;object-fit:contain}.top-actions{display:flex;gap:10px;align-items:center}.ghost,.primary{border-radius:11px;padding:10px 15px;border:1px solid #e4e7ec;background:#fff;font-weight:750;cursor:pointer}.primary{background:#ed1b2f;color:#fff;border-color:#ed1b2f}.auth-wrap{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:30px 16px;background:radial-gradient(circle at 80% 10%,rgba(237,27,47,.10),transparent 30%),#fafafa}.auth-card{width:min(100%,470px);background:#fff;border:1px solid #eaecf0;border-radius:24px;padding:32px;box-shadow:0 20px 60px rgba(16,24,40,.09)}.auth-logo{width:205px;display:block;margin:0 auto 20px}.auth-card h1{font-size:30px;margin:0;text-align:center}.auth-card>p{text-align:center;color:#667085;line-height:1.55;margin:9px 0 22px}.tabs{display:grid;grid-template-columns:1fr 1fr;background:#f2f4f7;border-radius:12px;padding:4px;margin-bottom:20px}.tab{border:0;background:transparent;padding:11px;border-radius:9px;font-weight:750}.tab.active{background:#fff;color:#e6001b;box-shadow:0 2px 9px #00000010}.oauth-btn{width:100%;padding:15px;border:0;border-radius:12px;background:#ed1b2f;color:#fff;font-weight:800;cursor:pointer}.secure-note{display:flex;gap:10px;margin-top:17px;padding:12px;background:#fff5f6;border:1px solid #ffd8dd;border-radius:11px;color:#667085;font-size:12px}.auth-status{margin-top:13px;font-size:12px;color:#667085;text-align:center}.auth-status.error{color:#b42318}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.feature-row div{padding:11px 6px;border-radius:11px;background:#fafafa;text-align:center;font-size:10px;color:#667085}.feature-row b{display:block;color:#e6001b;font-size:17px}.app{min-height:100vh;background:#f5f6f8}.app-shell{max-width:1320px;margin:auto;padding:18px clamp(12px,3vw,32px) 94px}.accountbar{display:flex;justify-content:space-between;gap:14px;align-items:center;background:#fff;border:1px solid #eaecf0;border-radius:16px;padding:13px 16px;margin-bottom:14px}.account-left{display:flex;align-items:center;gap:10px}.account-meta small,.balance small{display:block;color:#667085;font-size:11px}.account-meta strong{display:block;font-size:16px}.balance{text-align:right}.balance strong{font-size:19px}.account-select{border:1px solid #e4e7ec;border-radius:9px;padding:8px;background:#fff;max-width:190px}.market-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:4px;margin-bottom:13px}.market-tabs button{white-space:nowrap;border:1px solid #e4e7ec;background:#fff;border-radius:999px;padding:9px 14px;font-weight:700;cursor:pointer}.market-tabs .active{background:#171a21;color:#fff;border-color:#171a21}.trade-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.72fr);gap:15px}.panel{background:#fff;border:1px solid #eaecf0;border-radius:18px;padding:16px}.chart-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.chart-head h2{font-size:17px;margin:0}.live{color:#079455;font-size:12px;font-weight:800}.chart{height:335px;margin-top:12px;border-radius:13px;background:linear-gradient(#fff,#fbfbfc);border:1px solid #f0f1f3;overflow:hidden}.chart svg{width:100%;height:100%}.digits{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:11px}.digit{background:#f8f9fb;border:1px solid #eaecf0;border-radius:9px;text-align:center;padding:8px 2px}.digit b{display:block}.digit small{font-size:9px;color:#667085}.digit.hot{border-color:#12b76a;background:#ecfdf3}.digit.cold{border-color:#f04438;background:#fef3f2}.trade-form h3{margin:0 0 13px}.field{margin:11px 0}.field label{display:block;font-size:11px;color:#667085;margin-bottom:5px}.field input,.field select{width:100%;padding:11px;border:1px solid #dfe3e8;border-radius:10px;background:#fff}.quick{display:flex;gap:6px;flex-wrap:wrap}.quick button{border:1px solid #e4e7ec;background:#fff;border-radius:8px;padding:6px 9px;cursor:pointer}.trade-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.higher,.lower{border:0;border-radius:12px;padding:14px 7px;color:#fff;font-weight:850;cursor:pointer}.higher{background:#079455}.lower{background:#ed1b2f}.quote-box{margin-top:12px;padding:11px;border:1px solid #eaecf0;border-radius:11px;background:#fafafa;font-size:12px;min-height:52px}.quote-box b{display:block;font-size:14px;color:#101828}.status{font-size:11px;color:#667085;margin-top:10px;line-height:1.4}.status.error{color:#b42318}.status.ok{color:#067647}.bottom-nav{display:none}.page-title{display:flex;justify-content:space-between;align-items:end;margin:4px 0 14px}.page-title h1{font-size:25px;margin:0}.page-title p{margin:3px 0 0;color:#667085;font-size:13px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.stat-card,.market-card,.history-card,.profile-card,.scanner-card{background:#fff;border:1px solid #eaecf0;border-radius:16px;padding:16px}.stat-card small{color:#667085}.stat-card strong{display:block;font-size:24px;margin-top:4px}.market-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.market-card{cursor:pointer}.market-card:hover{border-color:#f5a3ad}.market-card h3{margin:0 0 5px;font-size:15px}.market-card p{margin:0;color:#667085;font-size:12px}.market-card .price{font-size:18px;font-weight:800;margin-top:13px}.table-wrap{background:#fff;border:1px solid #eaecf0;border-radius:16px;overflow:auto}.table{width:100%;border-collapse:collapse;min-width:680px}.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid #f0f1f3;font-size:12px}.table th{color:#667085;background:#fafafa}.pill{display:inline-block;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800}.pill.win{background:#ecfdf3;color:#067647}.pill.loss{background:#fef3f2;color:#b42318}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.profile-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f0f1f3;font-size:13px}.profile-row span{color:#667085}.scanner-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:14px}.signal{font-size:38px;font-weight:900;margin:8px 0}.confidence{height:9px;background:#f2f4f7;border-radius:999px;overflow:hidden}.confidence i{display:block;height:100%;background:#ed1b2f;width:0}.notice{padding:12px;border-radius:11px;background:#fff8e6;border:1px solid #fedf89;color:#7a2e0e;font-size:12px;line-height:1.45}.empty{padding:32px;text-align:center;color:#667085}.modal{position:fixed;inset:0;background:#10182888;z-index:100;display:grid;place-items:center;padding:16px}.modal-card{width:min(100%,420px);background:#fff;border-radius:20px;padding:22px;box-shadow:0 20px 60px #0004}.modal-card h2{margin:0 0 7px}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.result-win{color:#067647}.result-loss{color:#b42318}
@media(max-width:920px){.trade-grid,.scanner-grid{grid-template-columns:1fr}.market-list,.cards{grid-template-columns:repeat(2,1fr)}.chart{height:300px}.profile-grid{grid-template-columns:1fr}}
@media(max-width:620px){.topbar{height:76px;padding:0 12px}.brand img{width:200px}.top-actions .ghost{display:none}.app-shell{padding:10px 9px 82px}.accountbar{border-radius:13px;padding:10px;align-items:flex-start}.account-left{display:block}.account-select{margin-top:5px;max-width:160px;padding:6px}.account-meta strong,.balance strong{font-size:14px}.panel{padding:11px;border-radius:14px}.chart{height:245px}.digits{gap:3px}.digit{padding:6px 1px;border-radius:6px;font-size:10px}.digit small{font-size:7px}.bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;height:66px;background:#fff;border-top:1px solid #e6e8ec;z-index:50}.bottom-nav a{display:grid;place-items:center;text-align:center;font-size:9px;color:#667085;padding:5px 1px}.bottom-nav a b{font-size:17px;font-weight:500;line-height:1}.bottom-nav a.active{color:#e6001b;font-weight:800}.market-list,.cards{grid-template-columns:1fr}.page-title h1{font-size:21px}.auth-wrap{min-height:calc(100vh - 62px);padding:14px 10px;align-items:start}.auth-card{padding:23px 16px;border-radius:18px}.auth-logo{width:175px}.auth-card h1{font-size:26px}.feature-row{gap:4px}.feature-row div{font-size:9px;padding:9px 2px}.trade-actions{position:sticky;bottom:72px;z-index:8}.chart-head h2{font-size:14px}.chart-head select{max-width:150px;font-size:11px}.modal{align-items:end;padding:0}.modal-card{border-radius:20px 20px 0 0;width:100%}}

/* Login page UX pass: Login/Sign Up are the OAuth actions */
.auth-actions{margin-bottom:0;background:#f2f4f7;padding:4px}
.auth-actions .tab{min-height:52px;font-size:16px;cursor:pointer;color:#101828;transition:.18s ease}
.auth-actions .tab.active{background:#ed1b2f;color:#fff;box-shadow:0 5px 16px rgba(237,27,47,.22)}
.auth-actions .tab:not(.active):hover{background:#fff}
.auth-actions .tab:disabled{opacity:.65;cursor:wait}
.auth-status.hidden{display:none!important}
@media(min-width:621px){.auth-card{width:min(100%,520px);padding:38px}.auth-logo{width:245px}.auth-card h1{font-size:32px}.auth-actions .tab{min-height:56px;font-size:17px}}
@media(max-width:620px){.auth-wrap{padding:12px 10px 24px}.auth-card{width:100%;max-width:460px;padding:22px 16px}.auth-logo{width:200px;margin-bottom:18px}.auth-card h1{font-size:25px}.auth-card>p{font-size:15px;margin-bottom:20px}.auth-actions .tab{min-height:52px;font-size:16px}.feature-row{margin-top:20px}}

/* Locked DerivEdge trading dashboard responsive pass */
.dashboard-page{background:#f6f7f9}.dashboard-page .topbar{height:70px}.dashboard-page .brand img{width:190px}.dashboard-shell{max-width:1180px;padding-top:12px}.dashboard-page .accountbar{border-radius:12px;margin-bottom:10px}.dashboard-page .market-tabs{justify-content:center}.dashboard-page .market-tabs button{border-radius:8px;min-width:130px}.dashboard-page .market-tabs .active{background:#ed1b2f;border-color:#ed1b2f}.dashboard-grid{grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr)}.chart-panel{min-width:0}.timeframes{display:flex;gap:7px;margin:10px 0 0}.timeframes button{border:0;background:#f2f4f7;border-radius:7px;padding:7px 12px;font-size:11px;font-weight:800}.timeframes button.active{background:#ed1b2f;color:#fff}.input-suffix{position:relative}.input-suffix input{padding-right:48px!important}.input-suffix span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;color:#667085}.trade-fields-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:920px){.dashboard-shell{max-width:820px}.dashboard-grid{grid-template-columns:1fr}.dashboard-page .trade-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.dashboard-page .trade-form h3,.dashboard-page .quick,.dashboard-page .quote-box,.dashboard-page .trade-actions,.dashboard-page .status{grid-column:1/-1}.dashboard-page .trade-fields-row{grid-column:1/-1}.dashboard-page .chart{height:330px}}
@media(max-width:620px){.dashboard-page .topbar{height:62px}.dashboard-page .brand img{width:145px}.dashboard-page .top-actions{gap:5px}.dashboard-page .top-actions .ghost:not(#logout){display:none}.dashboard-page .top-actions #logout{display:block;padding:7px 9px;font-size:10px}.dashboard-shell{padding:7px 7px 78px}.dashboard-page .accountbar{padding:8px 9px;margin-bottom:7px;align-items:center}.dashboard-page .account-left{display:flex;align-items:center;min-width:0}.dashboard-page .account-meta small{display:none}.dashboard-page .account-meta strong{font-size:11px;white-space:nowrap}.dashboard-page .account-select{max-width:118px;margin:0;padding:5px;font-size:9px}.dashboard-page .balance small{display:none}.dashboard-page .balance strong{font-size:13px}.dashboard-page .market-tabs{margin:0 -1px 7px;justify-content:flex-start;gap:4px}.dashboard-page .market-tabs button{min-width:auto;flex:1;padding:8px 7px;font-size:10px}.dashboard-page .panel{padding:9px;border-radius:11px}.dashboard-page .chart-head{align-items:flex-start}.dashboard-page .chart-head h2{font-size:13px}.dashboard-page .live{font-size:10px}.dashboard-page .chart-head select{max-width:135px;padding:6px;border-radius:7px}.dashboard-page .timeframes{margin-top:7px;gap:4px}.dashboard-page .timeframes button{padding:6px 10px}.dashboard-page .chart{height:238px;margin-top:7px}.dashboard-page .digits{gap:2px;margin-top:7px}.dashboard-page .digit{padding:5px 0}.dashboard-page .trade-form{display:block;margin-top:7px}.dashboard-page .trade-form h3{font-size:14px;margin-bottom:5px}.dashboard-page .trade-fields-row{grid-template-columns:1fr 1fr;gap:7px}.dashboard-page .field{margin:6px 0}.dashboard-page .field input,.dashboard-page .field select{padding:9px}.dashboard-page .quick{display:none}.dashboard-page .quote-box{margin-top:7px;padding:8px;min-height:42px}.dashboard-page .trade-actions{position:sticky;bottom:70px;margin-top:8px}.dashboard-page .higher,.dashboard-page .lower{padding:13px 5px}.dashboard-page .status{margin:6px 0 0}.bottom-nav{height:64px}.bottom-nav a{font-size:9px}.bottom-nav a b{font-size:16px}}


/* =====================================================================
   DERIVEDGE DASHBOARD - CASHIER ACTIONS
   ===================================================================== */

.account-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cashier-btn {
    border: 1px solid #ed1b2f;
    border-radius: 10px;
    background: #ffffff;
    color: #ed1b2f;
    padding: 9px 13px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease,
        color 160ms ease;
}

.cashier-btn:hover {
    transform: translateY(-1px);
    background: #ed1b2f;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(237, 27, 47, 0.22);
}

@media (max-width: 620px) {
    .dashboard-page .accountbar {
        flex-wrap: wrap;
    }

    .dashboard-page .account-actions {
        order: 3;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-left: 0;
    }

    .dashboard-page .cashier-btn {
        padding: 8px 7px;
        font-size: 10px;
    }
}


/* =====================================================================
   LOCKED TRADING UI — MOBILE DESIGN ADAPTED TO DESKTOP/TABLET/MOBILE
   ===================================================================== */
.locked-trade-page{--de-red:#ff1f32;--de-green:#00ad7c;--de-border:#e7e9ee;--de-muted:#667085;background:#f7f8fa}
.locked-dashboard{max-width:1440px;padding-top:14px}
.locked-topbar{height:76px}
.locked-topbar .brand img{width:205px}
.theme-toggle{width:42px;height:42px;border:1px solid var(--de-border);border-radius:12px;background:#fff;cursor:pointer;font-size:18px}
.locked-accountbar{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(170px,220px);gap:14px;padding:12px 14px}
.account-switcher{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.account-live-dot{width:10px;height:10px;border-radius:50%;flex:none;animation:deBlink 1.35s ease-in-out infinite}
.account-live-dot.demo{background:var(--de-red);box-shadow:0 0 0 5px rgba(255,31,50,.10)}
.account-live-dot.real{background:var(--de-green);box-shadow:0 0 0 5px rgba(0,173,124,.10)}
@keyframes deBlink{0%,100%{opacity:1}50%{opacity:.28}}
.locked-accountbar .account-select{margin:0;max-width:220px;font-weight:900;font-size:15px;border:0;background:transparent}
.locked-accountbar .balance-card{padding:8px 14px;border:1px solid var(--de-border);border-radius:12px;background:#fff;text-align:right}
.locked-accountbar .balance-card small{display:block;color:var(--de-muted);font-size:10px}
.locked-accountbar .balance-card strong{display:block;font-size:20px}
.locked-accountbar .account-actions{margin:0}
.locked-accountbar .cashier-btn{min-width:94px}
.locked-accountbar .deposit-btn{background:var(--de-red);color:#fff}
.locked-contract-tabs{display:grid!important;grid-template-columns:repeat(3,1fr);width:100%;gap:8px;margin:10px 0}
.locked-contract-tabs button{width:100%;min-width:0!important;padding:14px;border-radius:12px!important;font-size:14px}
.market-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;margin-bottom:10px}
.market-selector{min-width:260px;max-width:440px;padding:11px 14px;border:1px solid var(--de-border);border-radius:11px;background:#fff;font-weight:800}
.market-toolbar .timeframes{margin:0}
.locked-chart-panel{padding:14px;margin-bottom:10px}
.locked-chart-head{display:flex;align-items:center;justify-content:space-between}
.locked-chart-head h2{margin:0;font-size:17px}
.locked-chart-head .live{display:block;color:var(--de-green);font-size:11px;margin-top:3px;font-weight:800}
.spot-price{font-size:24px;color:var(--de-red)}
.locked-chart{height:430px;margin-top:12px;border:1px solid var(--de-border);border-radius:12px;background:linear-gradient(#fff,#fff),linear-gradient(90deg,#f2f4f7 1px,transparent 1px);overflow:hidden}
.locked-chart svg{width:100%;height:100%}
.chart-grid-lines line{stroke:#eef0f3;stroke-width:1}
.current-price-line{stroke:#ff1f32;stroke-width:1;stroke-dasharray:5 4}
.chart-price-label{fill:#ff1f32;font-size:16px;font-weight:800}
.digit-frequency-panel{padding:12px 14px;margin-bottom:10px}
.locked-digits{display:grid;grid-template-columns:repeat(10,minmax(58px,1fr));gap:10px}
.digit-ring{border:0;background:transparent;cursor:pointer;display:grid;justify-items:center;gap:5px;padding:3px}
.digit-ring .ring{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--de-red) calc(var(--pct)*1%),#eceef2 0)}
.digit-ring .ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.digit-ring b{position:relative;z-index:1;font-size:18px}
.digit-ring small{font-weight:800;color:#475467}
.digit-ring.selected .ring{box-shadow:0 0 0 4px rgba(255,31,50,.14)}
.digit-ring.selected b,.digit-ring.selected small{color:var(--de-red)}
.digit-ring.hot .ring{background:conic-gradient(var(--de-green) calc(var(--pct)*1%),#eceef2 0)}
.locked-trade-ticket{padding:16px}
.ticket-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ticket-topline h3{margin:0}
.ticket-topline span{font-size:12px;font-weight:800;color:var(--de-red)}
.ticket-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.locked-trade-ticket .quick{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}
.locked-trade-ticket .quick button{padding:11px;border:1px solid var(--de-border);border-radius:10px;background:#fff;font-weight:800}
.locked-trade-ticket .quick button.active{background:var(--de-red);border-color:var(--de-red);color:#fff}
.locked-trade-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;position:static!important}
.locked-trade-actions button{min-height:76px;border:0;border-radius:14px;color:#fff;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer}
.locked-trade-actions .higher{background:linear-gradient(135deg,#00a977,#00bf8b)}
.locked-trade-actions .lower{background:linear-gradient(135deg,#f3132b,#ff4050)}
.locked-trade-actions span{font-size:22px;font-weight:900}
.locked-trade-actions strong{font-size:13px;font-weight:800;text-align:right}
.locked-trade-page.dark-app{background:#0e1116;color:#f8fafc}
.dark-app .topbar,.dark-app .accountbar,.dark-app .panel,.dark-app .balance-card,.dark-app .market-selector,.dark-app .theme-toggle,.dark-app .quick button,.dark-app .digit-ring .ring::after,.dark-app .bottom-nav{background:#151a21;color:#f8fafc;border-color:#2b3440}
.dark-app .locked-chart{background:#11161c;border-color:#2b3440}
.dark-app .chart-grid-lines line{stroke:#242c36}
.dark-app .field input,.dark-app .field select,.dark-app .account-select{background:#151a21;color:#f8fafc;border-color:#2b3440}
.dark-app .digit-ring small,.dark-app .status,.dark-app .balance-card small{color:#cbd5e1}

@media(max-width:920px){
    .locked-dashboard{max-width:900px}
    .locked-chart{height:360px}
    .ticket-grid{grid-template-columns:repeat(2,1fr)}
    .locked-digits{gap:5px}
    .digit-ring .ring{width:48px;height:48px}
}
@media(max-width:620px){
    .locked-topbar{height:64px}
    .locked-topbar .brand img{width:150px}
    .theme-toggle{width:34px;height:34px;border-radius:9px}
    .locked-dashboard{padding:7px 7px 78px}
    .locked-accountbar{grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:8px}
    .locked-accountbar .account-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;width:100%}
    .locked-accountbar .balance-card{grid-column:2;grid-row:1;padding:6px 8px;min-width:108px}
    .locked-accountbar .balance-card strong{font-size:14px}
    .locked-accountbar .account-select{max-width:120px;font-size:12px}
    .locked-contract-tabs{gap:4px;margin:7px 0}
    .locked-contract-tabs button{padding:10px 4px!important;font-size:11px!important}
    .market-toolbar{display:block;padding:8px;margin-bottom:7px}
    .market-selector{width:100%;max-width:none;min-width:0;padding:10px;font-size:12px}
    .market-toolbar .timeframes{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:7px}
    .market-toolbar .timeframes button{padding:7px 2px}
    .locked-chart-panel{padding:8px;margin-bottom:7px}
    .locked-chart-head h2{font-size:13px}
    .spot-price{font-size:16px}
    .locked-chart{height:280px;margin-top:8px}
    .digit-frequency-panel{padding:8px 5px;margin-bottom:7px;overflow-x:auto}
    .locked-digits{grid-template-columns:repeat(10,44px);gap:3px;min-width:467px}
    .digit-ring .ring{width:38px;height:38px}
    .digit-ring .ring::after{inset:4px}
    .digit-ring b{font-size:14px}
    .digit-ring small{font-size:9px}
    .locked-trade-ticket{padding:10px}
    .ticket-grid{grid-template-columns:1fr 1fr;gap:7px}
    .locked-trade-ticket .quick{grid-template-columns:repeat(6,1fr);gap:4px}
    .locked-trade-ticket .quick button{padding:8px 2px;font-size:10px}
    .locked-trade-actions{gap:7px}
    .locked-trade-actions button{min-height:66px;padding:10px}
    .locked-trade-actions span{font-size:17px}
    .locked-trade-actions strong{font-size:10px;max-width:92px}
}


/* EXACT LOCKED MOBILE REFERENCE PASS */
@media (max-width: 620px) {
    body.locked-trade-page { overflow-x: hidden; }

    .locked-topbar {
        position: relative; z-index: 20; height: 66px; padding: 8px 12px;
    }
    .locked-topbar .brand img {
        width: 174px; max-height: 48px; object-fit: contain;
    }
    .locked-topbar .top-actions > a { display: none; }

    .locked-dashboard { padding: 8px 8px 86px; }

    .locked-accountbar {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 7px;
        padding: 8px 10px;
        overflow: visible;
    }
    .locked-accountbar .account-switcher { min-width: 0; }
    .locked-accountbar .account-select {
        width: 100%; max-width: 130px; font-size: 13px; font-weight: 900;
    }
    .locked-accountbar .balance-card {
        grid-column: 2; grid-row: 1;
        min-width: 118px; padding: 6px 9px; text-align: left;
    }
    .locked-accountbar .balance-card small { font-size: 9px; }
    .locked-accountbar .balance-card strong {
        font-size: 15px; white-space: nowrap;
    }
    .locked-accountbar .account-actions {
        grid-column: 1/-1; grid-row: 2;
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 7px; width: 100%;
    }

    .locked-contract-tabs { margin: 8px 0; gap: 5px; }
    .locked-contract-tabs button {
        min-height: 48px; font-size: 13px !important; font-weight: 900;
    }

    .market-toolbar { margin: 0 0 8px; padding: 9px; }
    .market-selector {
        height: 48px; font-size: 13px; font-weight: 900;
    }
    .market-toolbar .timeframes { margin-top: 8px; }
    .market-toolbar .timeframes button {
        min-height: 42px; font-size: 12px; font-weight: 900;
    }

    .locked-chart-panel { padding: 9px; margin: 0 0 8px; }
    .locked-chart-head { min-height: 48px; }
    .locked-chart { height: 330px; border-radius: 11px; }

    /* The 0-9 digit percentage section is mandatory and always visible. */
    .digit-frequency-panel {
        display: block !important;
        visibility: visible !important;
        min-height: 94px;
        margin: 0 0 8px;
        padding: 9px 4px 7px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .locked-digits {
        display: grid !important;
        grid-template-columns: repeat(10,48px);
        gap: 4px;
        min-width: 516px;
    }
    .digit-ring {
        display: grid !important; width: 48px; padding: 1px;
    }
    .digit-ring .ring { width: 42px; height: 42px; }
    .digit-ring b { font-size: 15px; font-weight: 900; }
    .digit-ring small {
        display: block !important;
        font-size: 9px; font-weight: 900; line-height: 1.2;
    }

    .locked-trade-ticket { margin-top: 0; padding: 12px 10px; }
    .ticket-grid { grid-template-columns: 1fr 1fr; }
    .locked-trade-actions {
        position: static !important;
        grid-template-columns: 1fr 1fr;
    }
    .bottom-nav { z-index: 50; }
}

@media (min-width: 621px) {
    .locked-chart-panel,
    .digit-frequency-panel,
    .locked-trade-ticket { width: 100%; }

    .digit-frequency-panel {
        display: block !important;
        visibility: visible !important;
    }
    .locked-digits {
        grid-template-columns: repeat(10,minmax(62px,1fr));
    }
}


/* =====================================================================
   FINAL RECHECK — DIGIT FREQUENCY STRIP
   Matches supplied reference: all 10 digits fit in one row; circular
   progress moves with the live percentage; digit + percentage are inside
   the circle; selected barrier gets the small pointer below it.
   ===================================================================== */

.digit-frequency-panel {
    overflow: visible !important;
}

.locked-digits {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    gap: clamp(4px, .8vw, 12px) !important;
    min-width: 0 !important;
    width: 100% !important;
    align-items: start;
}

.digit-ring {
    --ring-color: #9b8bc4;
    --digit-progress: 0;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: grid !important;
    place-items: center !important;
    gap: 3px !important;
    cursor: pointer;
}

.digit-ring .ring {
    width: clamp(34px, 5.2vw, 58px) !important;
    height: clamp(34px, 5.2vw, 58px) !important;
    border-radius: 50%;
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background:
        conic-gradient(
            from -25deg,
            var(--ring-color) calc(var(--digit-progress) * 1%),
            #e8e9ef 0
        ) !important;
    transition: background .28s ease, transform .18s ease, box-shadow .18s ease;
}

.digit-ring .ring::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #fff;
    z-index: 0;
}

.digit-value,
.digit-percent {
    position: relative;
    z-index: 1;
    line-height: 1;
    pointer-events: none;
}

.digit-value {
    font-size: clamp(14px, 2vw, 21px);
    font-weight: 900;
    color: #101828;
}

.digit-percent {
    margin-top: 2px;
    font-size: clamp(6px, .8vw, 9px);
    font-weight: 900;
    color: var(--ring-color);
}

.digit-ring.highest { --ring-color: #00b985; }
.digit-ring.lowest  { --ring-color: #ff2638; }
.digit-ring.accent  { --ring-color: #7447ff; }

.digit-ring.selected .ring {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(255, 177, 0, .12) !important;
}

.barrier-pointer {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid transparent;
    margin-top: 1px;
}

.digit-ring.selected .barrier-pointer {
    border-top-color: #ffad00;
}

.dark-app .digit-ring .ring::after {
    background: #151a21 !important;
}

.dark-app .digit-value {
    color: #fff;
}

/* Mobile reference: ten circles remain visible together — no horizontal scroll. */
@media (max-width: 620px) {
    .digit-frequency-panel {
        display: block !important;
        visibility: visible !important;
        min-height: 72px !important;
        padding: 9px 5px 6px !important;
        overflow: visible !important;
    }

    .locked-digits {
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
        gap: 2px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .digit-ring .ring {
        width: min(8.4vw, 34px) !important;
        height: min(8.4vw, 34px) !important;
    }

    .digit-ring .ring::after {
        inset: 3.5px !important;
    }

    .digit-value {
        font-size: 12px !important;
    }

    .digit-percent {
        font-size: 5.8px !important;
        margin-top: 1px !important;
    }

    .barrier-pointer {
        border-left-width: 4px;
        border-right-width: 4px;
        border-top-width: 6px;
    }
}