:root{
  /* colours sampled directly from the MT5 Android screenshots */
  --bg:#000;
  --bar:#000;
  --text:#fff;
  --muted:#9FA0A4;      /* times, logins, meta            */
  --muted2:#A3A6AB;     /* secondary numbers              */
  --muted3:#979899;     /* L:/H: on quotes                */
  --idle:#A6A8AC;       /* price with no tick direction   */
  --blue:#4080E5;       /* tab indicator / accent         */
  --blue2:#5C95E8;      /* buy, profit, links             */
  --blue-btn:#3D85F5;   /* REGISTER button                */
  --bid:#EC3B3B;
  --ask:#5C99E9;
  --up-chg:#5C95E8;
  --dn-chg:#EC3B3E;
  --bull:#26C6B8;
  --bear:#E33A37;
  --tag:#00BFA5;
  --bar-win:#3AB24F;    /* green left bar  */
  --bar-loss:#EC701A;   /* orange left bar */
  --profit:#5C95E8;
  --loss:#EC3B3E;
  --line:#3A3B3D;       /* row separators  */
  --dots:#444549;       /* dotted leaders  */
  --pill:#3A3A3A;
  --exness:#FFCC00;
  --demo:#4CAF50;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  /* density tokens — matched to the native MT5 Android screenshots */
  --bar-h:48px;
  --nav-h:50px;
  --icon:22px;
  --pad-x:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;color:var(--text);font-family:Roboto,"Noto Sans",Arial,sans-serif;overflow:hidden}
body{touch-action:manipulation}
button,input,select{font:inherit;color:inherit}
button{border:0;background:none;padding:0}
.i24{width:22px;height:22px;display:block}

.phone{height:100%;max-width:430px;margin:auto;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;position:relative}
.topbar{min-height:calc(var(--bar-h) + var(--safe-t));padding:var(--safe-t) 0 0;display:flex;align-items:center;background:var(--bar);flex:none;position:relative;z-index:2}
.icon-btn{width:42px;height:var(--bar-h);display:grid;place-items:center;color:#fff;flex:none}
.icon-btn svg{width:22px;height:22px}
.top-mid{flex:1;min-width:0;padding-left:0}
/* native MT5: 15px white title; History uses a 12px caption over 15px grey filter */
.top-title{font-size:15px;font-weight:500;letter-spacing:.1px;line-height:20px;color:#fff}
.top-sub{font-size:15px;color:#A4A5A8;font-weight:400;line-height:19px;margin-top:-1px}
.top-mid.has-sub .top-title{font-size:12px;font-weight:500;line-height:15px}
.top-actions{display:flex;align-items:center;padding-right:0;flex:none}
.top-actions button{width:44px;height:var(--bar-h);display:grid;place-items:center;color:#fff;position:relative}
.top-actions button svg{width:22px;height:22px;fill:currentColor}
.top-actions button .pngic{width:22px;height:22px}
/* The supplied MT5 reference uses the split clock and split-toggle artwork in colour.
   Render those source PNGs directly rather than masking them to a single toolbar colour. */
.top-actions .top-colored-icon{width:24px;height:24px;display:block;object-fit:contain}
.top-actions .top-tool-icon{width:24px;height:22px}
.top-actions button#btnIndicators svg{fill:none}
.top-actions button#btnIndicators svg path:nth-child(1){fill:currentColor}
.topbar.chart-mode .top-mid{display:none}
.topbar.chart-mode .top-actions{width:74%;margin-left:auto;display:grid;grid-template-columns:repeat(5,1fr);flex:none}
.topbar.chart-mode .top-actions button{width:auto;height:var(--bar-h)}
.top-actions .tf-chip{width:auto!important;padding:0 6px;font-size:14px;font-weight:500;letter-spacing:.2px}
.cal-badge{position:absolute;right:6px;bottom:8px;min-width:12px;height:12px;border-radius:6px;background:#2196F3;color:#fff;font:700 8px/12px Roboto,Arial;padding:0 3px}
.mqid{font:500 9px/14px Roboto,Arial;border:1px solid #6d6d6d;color:#cfcfcf;padding:0 3px;border-radius:2px;letter-spacing:.3px;margin-right:2px}

.content{flex:1;min-height:0;position:relative;overflow:hidden;background:#000}
.view{display:none;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.view.active{display:block}
.hidden{display:none!important}

/* Quotes — compact two-line row like native MT5 */
.quote-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  column-gap:12px;
  min-height:64px;
  padding:7px var(--pad-x);
  align-items:center;
}
.quote-row:active{background:#0d0d0d}
.quote-change{font-size:12px;line-height:15px;font-variant-numeric:tabular-nums}
.quote-change .pts{color:var(--muted)}
.quote-change.pos .pct{color:var(--up-chg)}
.quote-change.neg .pct{color:var(--dn-chg)}
.quote-sym{font-size:15px;font-weight:500;line-height:20px;margin-top:1px;color:#fff}
.quote-meta{font-size:12px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:5px}
.quote-meta .spr-ic{width:11px;height:11px;opacity:.8}
.quote-px{text-align:right;font-variant-numeric:tabular-nums;min-width:0}
/* MT5 enlarges the last two significant digits; 3- and 5-decimal symbols
   put the final "pipette" digit up as a small superscript. */
.quote-px .px{display:block;font:400 17px/22px Roboto,Arial;letter-spacing:-.2px;white-space:nowrap}
.quote-px .px b{font-size:21px;font-weight:400}
.quote-px .px sup{font-size:11px;line-height:0;vertical-align:super}
.quote-px small{display:block;color:var(--muted3);font:12px/15px Roboto,Arial;margin-top:1px;white-space:nowrap}
.quote-px.red .px{color:var(--bid)}
.quote-px.blue .px{color:var(--ask)}
.quote-px.idle .px{color:var(--idle)}

/* Chart */
.chart-view{overflow:hidden;display:none;flex-direction:column;background:#000}
.chart-view.active{display:flex}
.chart-stage{position:relative;flex:1;min-height:0;background:#000}
#chart{width:100%;height:100%;display:block}
.chart-meta{position:absolute;left:7px;top:6px;z-index:3;pointer-events:auto;text-shadow:0 1px 3px #000}
.chart-symrow{display:flex;align-items:center;gap:6px}
.chart-symrow button{display:inline-flex;align-items:center;gap:2px;color:#2196F3;font-size:14px;font-weight:500}
.chart-symrow .caret{font-size:10px;margin-left:1px;transform:translateY(-1px)}
#tfChipInline{color:#fff;font-weight:400;font-size:14px}
.chart-desc{color:#fff;font-size:13px;margin-top:1px;line-height:17px}
.chart-status{color:#fff;font-size:13px;margin-top:0;line-height:17px}
/*
 * One-click trading strip, measured off the native MT5 crop:
 *   strip ~40dp; SELL/BUY ~28% each; middle volume stepper the rest.
 */
.oneclick{display:flex;align-items:stretch;height:40px;flex:none;background:#000}
.oneclick.hidden{display:none}
.oc-side{
  position:relative;flex:0 0 28.3%;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 0 5px;color:#fff;background:#EA4C4B;transition:background .12s;
}
.oc-side.up{background:#3787EB}
.oc-lab{position:absolute;left:5px;top:2px;font-size:10px;font-weight:400;line-height:13px;letter-spacing:.2px}
.oc-px{display:block;width:100%;text-align:center;font:400 17px/19px Roboto,Arial;font-variant-numeric:tabular-nums}
.oc-px b{font-size:20px;font-weight:400}
.oc-px sup{font-size:11px;line-height:0;vertical-align:super}
.oc-vol{
  flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:#000;color:#fff;
  font:400 15px/1 Roboto,Arial;font-variant-numeric:tabular-nums;
  border-top:1px solid #32353C;border-bottom:1px solid #32353C;
}
.oc-vol button{width:20px;height:40px;display:grid;place-items:center;color:#fff;flex:none}
.oc-vol button svg{width:14px;height:9px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the toolbar toggle dims when one-click trading is off */
.top-actions button.off svg{opacity:.45}
.crosshair{position:absolute;inset:0 58px 22px 0;pointer-events:none}
.crosshair:before,.crosshair:after{content:"";position:absolute;background:rgba(200,200,200,.5)}
.crosshair:before{left:0;right:0;height:1px;top:var(--cy,50%)}
.crosshair:after{top:0;bottom:0;width:1px;left:var(--cx,50%)}
.trade-tabs{display:flex}
.trade-tabs button{flex:1;height:36px;color:#9E9FA4;position:relative;font-size:13px;font-weight:500;letter-spacing:.3px}
.trade-tabs button.on{color:#fff}
.trade-tabs button:active{background:#0D0D0D}
.trade-tabs button.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue)}
.ord-status{font-size:12px;font-weight:400;color:var(--muted2);letter-spacing:.2px;text-transform:uppercase;flex:none}
.hist-item.selected:before,.hist-item.sl:before{background:#FB8C00}
.hist-item.tp:before{background:#43A047}

/* dotted leaders */
.dot-list{padding:7px var(--pad-x) 0}
.dot-row{display:flex;align-items:center;gap:8px;min-height:26px;font-size:15px}
.dot-row .k{color:#fff;flex:none;font-weight:700}
/* dot pitch and diameter taken straight off the device screenshot */
.dot-row .dots{
  flex:1;align-self:stretch;
  background-image:radial-gradient(circle at center, var(--dots) 1.2px, transparent 1.35px);
  background-size:8px 100%;
  background-repeat:repeat-x;
  background-position:left center;
}
.dot-row .v{flex:none;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.1px}
.dot-row .v.neg{color:var(--loss)}
.dot-row .v.pos{color:var(--profit)}
.hairline{height:1px;background:var(--line);margin-top:5px}
/* grey section band above Positions / Orders */
.sect-band{display:flex;align-items:center;justify-content:space-between;height:28px;
  padding:0 var(--pad-x);background:#2C2D2F;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  color:#9EA3AA;font-size:14px;font-weight:700}
.sect-band .more{width:20px;height:5px;fill:#9FA4AC;flex:none}
/* open position: two lines left, large P/L centred on the right, no edge bar */
.pos-item{display:flex;align-items:center;gap:10px;min-height:50px;padding:6px var(--pad-x);
  border-bottom:1px solid var(--line)}
.pos-item:active{background:#0d0d0d}
.pos-main{flex:1;min-width:0}
.pos-pnl{flex:none;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.pos-pnl.neg{color:var(--loss)}
.pos-pnl.pos{color:var(--profit)}
.hist-px .arw{color:var(--muted2)}
/* floating P/L under the Trade title */
.top-sub.neg{color:var(--loss)}
.top-sub.pos{color:var(--profit)}
.top-mid.has-sub .top-sub{font-size:15px;font-weight:700}
.top-mid.has-sub .top-title{font-size:11px;font-weight:500;line-height:15px}

/* History */
.history-tabs{display:flex;background:#000;flex:none;position:sticky;top:0;z-index:1}
.history-tabs button{flex:1;height:36px;color:#9E9FA4;position:relative;font-size:13px;font-weight:500;letter-spacing:.3px}
.history-tabs button.on{color:#fff}
.history-tabs button:active{background:#0D0D0D}
.history-tabs button.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue)}
.hist-sum{padding:8px var(--pad-x) 6px}
.hist-item{position:relative;min-height:46px;padding:5px var(--pad-x) 6px var(--pad-x);border-bottom:1px solid var(--line)}
.hist-item:active{background:#0d0d0d}
.hist-item.has-bar{padding-left:18px}
.hist-item.has-bar:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.hist-item.loss:before{background:var(--bar-loss)}
.hist-item.win:before{background:var(--bar-win)}
.hist-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hist-title{font-size:15px;font-weight:700;line-height:19px;color:#fff}
.hist-title .buy{color:var(--blue2)}
.hist-title .sell{color:var(--loss)}
.hist-time{font-size:12px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.hist-sub{margin-top:1px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hist-px{font-size:15px;font-weight:700;color:var(--muted2);font-variant-numeric:tabular-nums}
.hist-pnl{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.hist-pnl.neg{color:var(--loss)}
.hist-pnl.pos{color:var(--profit)}
.hist-login{font-size:12px;font-weight:400;color:var(--muted);margin-top:1px}

.empty{padding:48px 18px;text-align:center;color:var(--muted);font-size:14px}

/* Messages */
.msg-row{display:flex;gap:11px;padding:10px var(--pad-x);align-items:flex-start}
.msg-avatar{width:40px;height:40px;border-radius:50%;background:#1E9BE0;display:grid;place-items:center;flex:none;color:#fff}
.msg-avatar svg{width:18px;height:18px;fill:#fff}
.msg-copy{min-width:0;flex:1}
.msg-copy .msg-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.msg-copy b{display:block;font-size:15px;font-weight:500;color:#fff}
.msg-copy p{margin:2px 0 0;color:#B6B6B6;font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-copy time{flex:none;font-size:12px;color:var(--muted)}
.unread-dot{width:7px;height:7px;border-radius:50%;background:var(--blue2);margin-top:16px;flex:none}
/* the auth buttons sit at the very bottom of the screen, not under the list */
#view-messages.active{display:flex;flex-direction:column}
.msg-auth{margin-top:auto;padding:10px 10px 12px;display:flex;gap:8px;flex:none}
.btn-register{flex:1;height:40px;border-radius:20px;background:var(--blue-btn);color:#fff;font-weight:500;letter-spacing:.4px;font-size:14px}
.btn-signin{width:82px;height:40px;border-radius:20px;background:#2C4873;color:#5396EA;font-weight:500;letter-spacing:.4px;font-size:14px}

/* Secondary pages */
.page-block{padding:6px 0 20px}
.page-row{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 var(--pad-x);border-bottom:1px solid #161616;font-size:14px}
.page-row .hint{color:#8a8a8a;font-size:12px}
.page-h{padding:12px var(--pad-x) 5px;font-size:11px;color:#8a8a8a;text-transform:uppercase;letter-spacing:.7px}
.switch{width:32px;height:17px;border-radius:9px;background:#424242;position:relative}
.switch.on{background:#2196F3}
.switch:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;top:2px;left:2px}
.switch.on:after{left:17px}
.news-item{padding:10px var(--pad-x);border-bottom:1px solid #171717}
.news-item b{display:block;font-size:13px;font-weight:500}
.news-item span{display:block;margin-top:3px;color:#8a8a8a;font-size:11px}
.journal-line{padding:7px var(--pad-x);font-size:11px;color:#bdbdbd;font-family:Roboto,monospace;border-bottom:1px solid #141414}
.about-hero{padding:22px var(--pad-x) 10px;text-align:center}
.about-hero .logo-sq{width:48px;height:48px;margin:0 auto 8px;background:#1A1A1A;border-radius:10px;display:grid;place-items:center;color:#2196F3;font-weight:700;font-size:16px}
.cal-row{display:grid;grid-template-columns:58px 1fr 48px;gap:7px;padding:8px var(--pad-x);border-bottom:1px solid #171717;align-items:center}
.cal-time{color:#8a8a8a;font-size:11px}
.cal-imp{width:7px;height:7px;border-radius:50%;background:#E53935;display:inline-block;margin-right:5px}

/* Nav — native MT5 is ~50dp with 22dp icons and 11px labels */
.bottom-nav{height:calc(var(--nav-h) + var(--safe-b));padding:4px 0 var(--safe-b);background:#000;display:grid;grid-template-columns:repeat(5,1fr);flex:none}
.nav-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#FDFDFD;gap:2px;font-size:11px;font-weight:500;min-width:0}
.nav-item.active{color:var(--blue2)}
.nav-svg{width:22px;height:22px;display:block}
/* nav icons are stroked, so do NOT force a fill here - the svg's own
   fill="none" must survive, otherwise every outline turns into a blob */
.nav-svg svg{width:22px;height:22px;display:block}

/* PNG icon kit rendered as a mask so it inherits currentColor.
   White by default, blue on the active tab - exactly like the vector icons. */
.pngic{
  display:inline-block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.nav-svg .pngic{width:22px;height:22px}
.nav-trade{color:#FDFDFD}
.nav-trade.active{color:var(--blue2)}
.nav-trade .nav-balance{background:var(--pill);color:#A8A8A8;border-radius:9px;padding:0 8px;font-size:11px;font-weight:700;line-height:18px;height:18px;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item.active .nav-balance{background:var(--pill);color:#EEE}
/* running P/L replaces the balance while a position is open */
.nav-balance.neg,.nav-item.active .nav-balance.neg{background:#3B1D1F;color:var(--loss)}
.nav-balance.pos,.nav-item.active .nav-balance.pos{background:#16293E;color:var(--profit)}
.badge,.drawer-badge{display:inline-grid;place-items:center;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:#E53935;color:#fff;font:700 9px/14px Roboto,Arial}
.badge{position:absolute;right:10px;top:1px}
.drawer-badge{margin-left:auto;min-width:20px;height:20px;border-radius:10px;font:500 12px/20px Roboto,Arial;background:#E24A4A}

/* Drawer — Exness screenshot */
.drawer{position:fixed;z-index:40;left:0;top:0;bottom:0;width:min(320px,88vw);background:#000;transform:translateX(-105%);transition:.2s ease;display:flex;flex-direction:column;padding-top:var(--safe-t);box-shadow:4px 0 24px rgba(0,0,0,.55)}
.drawer.open{transform:none}
.drawer-head{padding:14px 10px 12px 26px;background:#000;display:grid;grid-template-columns:28px 1fr 24px;gap:18px;align-items:flex-start;position:relative;overflow:hidden;min-height:96px;border-bottom:1px solid #2A2B2D}
.exness-mark{width:28px;height:28px;background:#FCDE03;color:#111;font:700 5.5px/28px Arial,sans-serif;text-align:center;letter-spacing:-.2px;flex:none;border-radius:1px}
.drawer-account{display:flex;flex-direction:column;min-width:0;padding-top:1px}
.drawer-account b{font-size:15px;font-weight:500;line-height:19px;white-space:nowrap;color:#fff}
.acct-line{font-size:13px;color:#9FA0A4;margin-top:1px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.manage-link{align-self:flex-start;color:#2E86F0;font-size:14px;font-weight:500;margin-top:10px;line-height:19px}
.head-edit{width:24px;height:24px;display:grid;place-items:center;color:#fff;margin-top:2px;position:relative;z-index:2}
.head-edit svg{width:16px;height:16px}
.demo-ribbon{position:absolute;right:-24px;top:8px;background:#3DA44A;color:#fff;font:500 11px/1 Roboto,Arial;padding:4px 26px;transform:rotate(45deg);transform-origin:center;letter-spacing:.2px}
.drawer-scroll{overflow:auto;padding:8px 0 16px}
.drawer-item{display:flex;align-items:center;gap:20px;width:100%;height:40px;text-align:left;padding:0 22px;font-size:14px;font-weight:500;color:#fff}
.drawer-item:active{background:#111}
.di{width:18px;height:18px;display:grid;place-items:center;color:#fff;flex:none}
.di svg{width:18px;height:18px;fill:currentColor}
.ads-pill{margin-left:8px;font-size:11px;color:#2E86F0;background:transparent;border:1px solid #2E86F0;border-radius:10px;padding:0 8px;line-height:18px;font-weight:500;flex:none}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35;opacity:0;pointer-events:none;transition:.2s}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:60;left:50%;bottom:0;width:min(430px,100%);background:#1C1C1C;border-radius:12px 12px 0 0;transform:translate(-50%,110%);transition:.22s;padding:6px 0 calc(10px + var(--safe-b));max-height:86vh;overflow:auto}
.sheet.open{transform:translate(-50%,0)}
.sheet-title{padding:8px 16px 6px;font-size:11px;color:#9E9E9E;text-transform:uppercase;letter-spacing:.6px}
.sheet-opt{width:100%;min-height:44px;padding:10px 16px;text-align:left;font-size:15px}
.sheet-opt:active{background:#2A2A2A}
.sheet-opt.on{color:#2196F3}
.sheet-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:7px 12px}
.toast{position:fixed;z-index:90;left:50%;bottom:calc(58px + var(--safe-b));transform:translate(-50%,16px);background:#323232;color:#fff;padding:8px 14px;border-radius:4px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.field{padding:7px 0}
.field label{display:block;color:#9E9E9E;font-size:11px;margin-bottom:4px}
.field input,.field select{width:100%;height:36px;border:1px solid #333;background:#111;color:#EEE;padding:0 10px;border-radius:2px}
.primary{background:#1E88E5;border-radius:2px;padding:10px 12px;color:#fff;font-weight:500}
.danger{background:#E53935;border-radius:2px;padding:10px 12px;color:#fff;font-weight:500}

.acct-card{margin:10px var(--pad-x);padding:12px;border:1px solid #2A2A2A;border-radius:4px;display:flex;gap:10px;align-items:center}
.acct-card .mark{width:36px;height:36px;background:#FFCC00;color:#111;font:700 7px/36px Arial;text-align:center}
.acct-card b{display:block;font-size:14px;font-weight:500}
.acct-card span{display:block;color:#9E9E9E;font-size:11px;margin-top:2px}

@media(min-width:900px){
  body{background:#050505}
  .phone{height:min(860px,100%);margin-top:max(0px,calc((100vh - min(860px,100%))/2));border-radius:12px;box-shadow:0 0 0 1px #222,0 24px 80px #000}
}