/* RO.I additions: bot SVG avatars, wallet, converter, trading, connector & academy helpers */
.bot-svg{display:inline-block;width:48px;height:48px;flex:0 0 48px;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.bot-svg svg{display:block;width:100%;height:100%}
.bot-svg.lg{width:72px;height:72px;flex-basis:72px;border-radius:20px}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--soft)}
.seg button{border:0;background:transparent;color:var(--muted);font-weight:800;padding:9px 16px;border-radius:9px;cursor:pointer;font:inherit;font-weight:800}
.seg button.active{background:var(--accent);color:#04120f}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chips button{border:1px solid var(--line);background:var(--soft);color:var(--text);padding:8px 14px;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;font-size:13px}
.chips button.active,.chips button:hover{border-color:var(--accent);color:var(--accent)}
.conv-card{max-width:760px}
.conv-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end;margin:14px 0}
.conv-row .swap{height:46px;width:46px;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--accent);font-size:20px;cursor:pointer}
.big-result{font-size:34px;font-weight:900;letter-spacing:-.02em;margin:6px 0;word-break:break-word}
.rate-line{color:var(--muted);font-size:13px}
.wallet-hero{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.wallet-hero .bal{font-size:34px;font-weight:900}
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:14px 0}
.filter-bar select,.form select,.mini-converter select,.form input[list]{background:var(--soft);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit}
.mini-converter{flex-wrap:wrap;gap:8px}
.bot-meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.bot-meta span{font-size:11px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:999px;padding:4px 10px}
.pos-actions{display:flex;gap:8px;flex-wrap:wrap}
.pos-actions .btn{padding:8px 14px}
.side-switch button.buy.active{background:#16a34a;color:#fff}.side-switch button.sell.active{background:#dc2626;color:#fff}
.tf-row button,.timeframe button{cursor:pointer}
.snap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.snap-grid div{background:var(--soft);border-radius:10px;padding:8px 10px}.snap-grid small{display:block;color:var(--muted);font-size:11px}.snap-grid b{font-size:14px}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.terms-list{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.7}
.terms-list li::marker{color:var(--accent)}
.lesson-body p{line-height:1.7}
.lesson-points{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}
.lesson-points li{background:var(--soft);border-radius:10px;padding:10px 12px;font-weight:600}
.lesson-points li:before{content:"✓ ";color:var(--accent);font-weight:900}
.progress-bar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden;margin-top:10px}
.progress-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.lesson-list button{display:flex;width:100%;gap:10px;align-items:center;text-align:left;background:var(--soft);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:12px;margin:6px 0;cursor:pointer;font:inherit}
.lesson-list button.done{border-color:var(--accent)}
.lesson-list button b{flex:1}
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.ticket{border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0}
.ticket small{color:var(--muted)}
@media(max-width:640px){.conv-row{grid-template-columns:1fr}.conv-row .swap{justify-self:center;transform:rotate(90deg)}.snap-grid{grid-template-columns:1fr 1fr}.big-result{font-size:26px}.mobile-nav{grid-template-columns:repeat(5,1fr)!important}}

/* ── Layout fix: the content column must be allowed to shrink, otherwise wide children
      (market chips, tables) stretch the whole page and cause sideways scrolling ── */
.dash{grid-template-columns:240px minmax(0,1fr)}
.main,.screen-shell{min-width:0}
.grid2>*,.lb-grid>*,.learning-grid>*,.trade-layout>*,.stats>*,.metric-strip>*{min-width:0}
@media(min-width:981px){.grid2{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:980px){.dash{grid-template-columns:minmax(0,1fr)}.grid2{grid-template-columns:minmax(0,1fr)}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.stats{grid-template-columns:minmax(0,1fr)}.quick-actions button b{font-size:10px}}
.liquidity-rate{min-width:0}
a[role=button]{cursor:pointer}
a[role=button]:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.table-wrap{max-width:100%}
.toast{max-width:min(92vw,420px)}
.wk-bars>div{min-width:0}
@media(max-width:620px){.wk-bars{gap:4px}.wk-bars small,.wk-bars em{font-size:8px;letter-spacing:-.02em}}
.mini-converter{grid-template-columns:minmax(0,1fr) auto}
.mini-converter input{min-width:0;width:100%}
.mini-converter b{grid-column:1/-1;text-align:left}

/* ══════════ Visibility & contrast fixes ══════════
   1) Safety net: even if scripts fail, anything tagged .reveal becomes visible after 1.5s */
@keyframes revealSafety{to{opacity:1;transform:none}}
.reveal{animation:revealSafety .01s linear 1.5s forwards}

/* 2) Buttons: an older light/blue theme used !important and overrode the dark theme
      (primary = dark text on blue, secondary = white box with pale text). Dark/teal theme wins now. */
.btn{background:var(--accent)!important;color:#03100e!important}
.btn:hover{background:#2cf7e2!important;box-shadow:0 10px 24px rgba(16,232,208,.28)}
.btn.secondary{background:#171a1a!important;color:#e8eceb!important;border:1px solid #303534}
.btn.secondary:hover{background:#202424!important;box-shadow:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* 3) Login / sign-up panel is a white card: give it its own light colour scope so typed text,
      titles and labels are dark (they were near-white on white). */
.auth-panel{--text:#1d2127;--muted:#5d6672;--line:#d9dde3;--soft:#f2f4f7;color:var(--text)}

/* Live MT5 bot console and broker account snapshots */
.bot-live-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 18px;margin:0 0 14px;border:1px solid #3d3830;border-radius:13px;background:#181613;color:#c6b998;font-size:10px}
.bot-live-banner>div{display:grid;gap:5px}.bot-live-banner span{color:#777b75}.bot-live-banner.ready{border-color:#23544b;background:#10201d;color:#b8eee4}
.bot-market-controls{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(170px,.8fr);gap:14px;align-items:end;margin:14px 0}
.bot-market-controls .form{gap:7px}.bot-market-controls label,.bot-current-quote small{color:#7b8581;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.bot-current-quote{display:grid;gap:5px;padding:11px 13px;border:1px solid #25322e;background:#0c1110;border-radius:10px}.bot-current-quote b{font-size:18px}.bot-current-quote span{font-size:9px;color:#69736f}
.bot-market-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.live-bot-card{display:flex;flex-direction:column;gap:10px;min-width:0}.live-bot-card h2{margin:2px 0 0;font-size:17px}.live-bot-card>p{margin:0;font-size:10px}.bot-profile-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#12312c;border:1px solid #24594f;color:#9df5e8;font-size:10px;font-weight:900}
.bot-rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.bot-rule-grid>div{display:grid;gap:4px;padding:9px;border:1px solid #242b29;border-radius:9px;background:#0e1211;min-width:0}.bot-rule-grid small{color:#6d7773;font-size:8px}.bot-rule-grid b{font-size:10px;overflow-wrap:anywhere}
.bot-instance-status{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 0 0;border-top:1px solid #252b29;font-size:9px}.bot-instance-status span:last-child{margin-left:auto;color:#6d7773}.bot-error{color:#ff9292!important;font-size:10px}.bot-event-note{color:#8f9994;font-size:9px}.bot-profile-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid #252b29}.bot-profile-footer span{font-size:9px;color:#77817d}.bot-journal{padding:0;overflow:hidden}.section-heading{margin:20px 0 10px}.section-heading h2{margin:4px 0}
.connection-details{margin-top:12px;overflow:hidden}.connection-details h2{margin:6px 0;font-size:18px}.connection-details h3{margin:20px 0 8px;font-size:12px}.connection-details .row{align-items:flex-start}.connection-account-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:15px}.connection-account-metrics>div{display:grid;gap:6px;padding:12px;border:1px solid #252b29;border-radius:10px;background:#0c1110;min-width:0}.connection-account-metrics small{color:#6f7975;font-size:8px;text-transform:uppercase}.connection-account-metrics b{font-size:15px;overflow-wrap:anywhere}
@media(max-width:900px){.bot-market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bot-market-controls{grid-template-columns:1fr 1fr}.bot-current-quote{grid-column:1/-1}}
@media(max-width:620px){.bot-market-grid,.bot-market-controls,.connection-account-metrics{grid-template-columns:1fr}.bot-current-quote{grid-column:auto}.bot-live-banner{align-items:flex-start;flex-direction:column}.bot-instance-status span:last-child{margin-left:0}.connection-row{align-items:flex-start}.connection-row>.status-badge{margin-left:auto}.connection-details .row{flex-direction:column}.bot-profile-footer{align-items:flex-start;flex-direction:column}.bot-profile-footer .btn{width:100%}}
.auth-panel .field input,.auth-panel .field input:-webkit-autofill{color:#1d2127!important;-webkit-text-fill-color:#1d2127;background:#fff!important;caret-color:#1d2127}
.auth-panel .field label{color:#5d6672}
.auth-panel .auth-title{color:#14171c}
.auth-panel .auth-footer button{color:#14171c}
.auth-panel .checkbox{color:#4a525d}
.auth-panel .pill{background:#14171c;color:#cfd6d3}

/* 4) Readability: labels, captions and figures were 8-9px grey on near-black */
.nav-caption{color:#8a9691}
.metric-strip span,.admin-metric span,.admin-metric small,.banner-stat span,.liquidity-rate span,.liquidity-rate small,.academy-progress span,.order-estimate span{font-size:10.5px;color:#8a9691}
.metric-strip b{font-size:19px}
.disc{font-size:11.5px;color:#8a9691}
.form label{font-size:11px;color:#9aa6a1}
.table th{font-size:10.5px;color:#8a9691}
.table td{font-size:13px;color:#e1e6e4}
.table td small,.activity-row small,.timeline-copy span,.notification-row small,.notification-row em,.connection-brand span,.connection-brand small,.kyc-timeline small,.adapter-checks small{color:#8a9691}
.notification-row small,.timeline-copy span,.kyc-timeline small,.adapter-checks small,.connection-brand span,.connection-brand small{font-size:11.5px}
.notification-row b,.timeline-copy b,.kyc-timeline b,.adapter-checks b{font-size:13px}
.notification-row.read{opacity:.8}
.chart-legend,.chart-labels,.chart-footer{font-size:10.5px;color:#8a9691}
.market-chip small,.conversion,.signal-stat span,.lb-stats,.bot-meta span{font-size:11.5px}
.status-badge,.type-chip{font-size:10px}
.side-switch button,.timeframe button{font-size:11px}
.academy-card ul{font-size:12px;color:#a3aea9}
.strategy-banner p,.liquidity-hero p,.learning-hero p,.adapter-hero p,.admin-note p{font-size:12.5px;color:#9aa6a1}
.lesson-index{color:#34443f}
.empty-state{color:#9aa6a1}
input::placeholder,textarea::placeholder{color:#7f8b86!important;opacity:1}
.asset{background:#171b1a;border-color:#252b29}
.asset small{color:#8a9691}
.asset .tick .money small{color:#8a9691}
.lesson-list .lesson-index{position:static;color:var(--accent);font-size:15px;font-weight:800;min-width:22px;text-align:center}

/* ───── v10: sign-in options, verification codes, fees ───── */
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--line)}
.social-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.social-row #googleSlot{grid-column:1/-1;display:flex;justify-content:center}
.social-row #googleSlot:empty{display:none}
.social-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--soft);color:var(--text);font:inherit;font-weight:700;cursor:pointer}
.social-btn:hover{border-color:var(--accent)}
.g-logo{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;color:#4285f4;font-size:13px}
.otp-block{margin:6px 0 14px}
.otp-input{width:100%;text-align:center;font-size:30px;letter-spacing:.5em;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--soft);color:var(--text);font-weight:800}
.otp-input:focus{outline:2px solid var(--accent)}
.otp-resend{text-align:center;margin-top:8px}
.demo-code{margin:10px 0;padding:10px 12px;border-radius:12px;background:rgba(244,197,28,.12);border:1px dashed var(--gold,#f4c51c);font-size:13px;line-height:1.5}
.demo-code b{font-size:20px;letter-spacing:.2em;margin:0 6px}
.demo-code button{border:0;background:var(--gold,#f4c51c);color:#111;border-radius:8px;padding:4px 10px;font-weight:800;cursor:pointer}
.limit-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0}
.limit-box div{background:var(--soft);border-radius:12px;padding:10px 12px}.limit-box span{display:block;font-size:11px;color:var(--muted)}.limit-box b{display:block;font-size:18px}.limit-box small{color:var(--muted);font-size:11px}
.fee-table{display:grid;gap:6px;margin:10px 0;background:var(--soft);border-radius:12px;padding:10px 12px}
.fee-table>div{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fee-table span{color:var(--muted);font-size:13px}.fee-table em{font-style:normal;text-align:right}
.fee-table .net{border-top:1px solid var(--line);padding-top:8px;font-weight:800}
.sec-list{list-style:none;padding:0;margin:10px 0}.sec-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.sec-list li span{color:var(--muted)}
.kyc-form .field select,.kyc-form select{width:100%}