*{box-sizing:border-box}
:root{
  --bg:#070708;--panel:#0c0c0f;--panel2:#111114;--panel3:#17171c;
  --line:#232329;--line2:#303038;--text:#e7e7ea;--muted:#8a8a92;
  --blue:#2e6df6;--green:#0fac96;--red:#d8384e;--red2:#ef4255;
  --ask:#ef6d74;--shadow:0 18px 55px rgba(0,0,0,.5);
}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
button,input,select{font:inherit}button{color:inherit}.hidden{display:none!important}

.app-shell{
  height:100vh;
  display:grid;
  grid-template-columns:60px 1fr;
  background:#070708;
}

.left-rail{
  background:#070708;
  border-right:1px solid #1c1c21;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px 5px 7px;
  gap:5px;
}
.rail-brand{width:32px;height:30px;display:flex;flex-direction:column;align-items:center;gap:4px}
.rail-brand span{font-size:6px;color:#5c5c64}
.rail-brand-mark{width:28px;height:19px;position:relative}
.rail-brand-mark:before,.rail-brand-mark:after{content:"";position:absolute;left:2px;right:2px;height:4px;border-left:3px solid #dddde2;border-right:3px solid #dddde2}
.rail-brand-mark:before{top:1px;border-top:3px solid #dddde2}.rail-brand-mark:after{bottom:1px;border-bottom:3px solid #dddde2}
.rail-brand.bottom{height:24px}
.rail-btn{width:38px;height:38px;border:1px solid transparent;background:transparent;color:#babac1;border-radius:7px;font-size:18px;cursor:pointer}
.rail-btn:hover,.rail-btn.active{background:#12131a;border-color:#2c3442}
.rail-btn.active{box-shadow:inset 3px 0 var(--blue);color:#eef3ff}
.rail-btn.green{color:#13bba0}
.rail-divider{width:32px;height:1px;background:#24242a;margin:2px 0}
.rail-label{align-self:flex-start;margin:4px 0 0 4px;font-size:6px;color:#55555d}
.panel-label{margin-top:8px}
.rail-spacer{flex:1}
.demo-badge{width:43px;height:22px;border-radius:4px;background:linear-gradient(180deg,#7f52ef,#5c39be);font-size:8px;font-weight:700;display:grid;place-items:center}

.workspace{
  min-width:0;min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 500px;
  grid-template-rows:minmax(0,1fr) 244px;
  gap:10px;
  padding:10px 10px 10px 0;
}

.chart-panel{
  min-width:0;min-height:0;
  display:grid;
  grid-template-rows:49px minmax(0,1fr);
  background:#0b0b0e;
  border-radius:10px 10px 0 0;
  overflow:hidden;
}
.top-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;border-bottom:1px solid #1f1f24;background:#0d0d10
}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px}
.tf-btn,.tool-btn,.layout-btn,.layout-name{
  height:31px;border:0;background:transparent;color:#c0c0c7;border-radius:5px;cursor:pointer
}
.tf-btn{font-size:12px;padding:0 3px}
.tool-btn{min-width:30px;font-size:18px}
.tool-label{font-size:12px;color:#b8b8c0}
.separator{width:1px;height:22px;background:#2b2b31}
.tf-btn:hover,.tool-btn:hover,.layout-btn:hover,.layout-name:hover{background:#17171c}
.layout-btn{width:30px}.layout-btn span{display:block;width:20px;height:20px;border:1px solid #c4c4ca;border-radius:3px}
.layout-name{font-size:11px}

.chart-area{position:relative;overflow:hidden;background:#09090b}
.drawing-tools{
  position:absolute;z-index:10;left:7px;top:52px;width:45px;
  display:grid;justify-items:center;gap:5px
}
.draw{width:37px;height:37px;border:0;background:transparent;color:#b6b6bd;border-radius:6px;font-size:18px;cursor:pointer}
.draw:hover,.draw.active{background:#17171c;color:#fff}
.draw-separator{width:27px;height:1px;background:#2b2b30;margin:1px 0}
.symbol-bar{position:absolute;z-index:8;left:62px;top:9px}
.symbol-menu{width:39px;height:39px;border:0;background:#24252b;color:#b7b7bf;border-radius:5px;font-size:18px;cursor:pointer}
.symbol-bar{display:flex}
.symbol-copy{margin-left:10px}
.symbol-line{display:flex;align-items:center;gap:5px;font-size:12px;color:#bfbfc6}
.symbol-line strong{font-size:13px}
.status-dot{width:12px;height:12px;border-radius:50%;background:#1d7b6d;box-shadow:0 0 0 5px rgba(29,123,109,.22)}
.ohlc-line{display:flex;gap:5px;margin-top:3px;color:#a9a9b1;font-size:9px}
.ohlc-line b{font-weight:600;color:#e05f66}
.volume-title{margin-top:7px;font-size:10px;color:#b1b1b9}
.volume-title b{color:#f04f5b}

#chartCanvas,#overlayCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#overlayCanvas{z-index:5;cursor:crosshair}
.price-tag{
  position:absolute;right:15px;z-index:9;min-width:104px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;border-radius:2px;font-size:11px
}
.price-tag.ask{background:#ef6d74}
.price-tag.bid{background:#3269ed}
.chart-logo{
  position:absolute;left:80px;bottom:86px;z-index:7;width:40px;height:40px;
  border-radius:50%;background:#121217;border:1px solid #34343a;
  display:grid;place-items:center;font-weight:900;font-size:12px
}
.chart-footer{
  position:absolute;z-index:8;left:61px;right:10px;bottom:4px;height:36px;
  border-top:1px solid #24242a;display:flex;align-items:center;justify-content:space-between
}
.range-links{display:flex;gap:14px}
.range-links button{border:0;background:transparent;color:#b6b6bd;font-size:9px;cursor:pointer}
.time-tools{display:flex;align-items:center;gap:12px;font-size:9px;color:#aaaab1}
.auto-pill{padding:7px 5px;border-radius:6px;background:#31313a}

.right-stack{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 170px;gap:10px}
.watchlist,.order-ticket{background:#0c0c0f;border:1px solid #111115;border-radius:10px;overflow:hidden}
.watchlist{display:grid;grid-template-rows:48px 34px 1fr}
.watch-top{display:grid;grid-template-columns:72px 1fr 90px 40px;gap:8px;align-items:center;padding:0 10px;border-bottom:1px solid #222228}
.watch-toggle{display:flex;gap:5px}
.watch-toggle button{width:34px;height:34px;border:1px solid #25252c;background:#17171d;color:#aaaab2;border-radius:6px;cursor:pointer}
.watch-toggle .active{background:#142657;color:#dce6ff;border-color:#253a70}
.search-box{height:34px;background:#17171d;border-radius:7px;display:flex;align-items:center;gap:7px;padding:0 10px}
.search-box span{color:#777780}.search-box input{width:100%;border:0;background:transparent;color:#dddde2;outline:none;font-size:10px}
.watch-top select{height:34px;border:0;background:#17171d;color:#d2d2d7;border-radius:7px;padding:0 9px;font-size:9px}
.star{width:36px;height:34px;border:0;background:#17171d;border-radius:7px;font-size:18px;cursor:pointer}
.watch-head,.watch-row{display:grid;grid-template-columns:1.6fr .8fr .8fr .45fr;align-items:center}
.watch-head{padding:0 10px;color:#777780;font-size:9px}
.watch-body{overflow-y:auto}
.watch-row{min-height:46px;padding:0 10px;border-top:1px solid #15151a;font-size:9px;cursor:pointer}
.watch-row:hover{background:#121217}
.watch-symbol{display:flex;align-items:center;gap:8px}.watch-flag{font-size:12px}
.watch-price{color:#11b99e}.watch-spread{color:#aaaab2}.watch-menu{text-align:right;color:#dddde3;font-size:14px}

.order-ticket{padding:9px 10px 10px;display:grid;grid-template-rows:33px 30px 1fr}
.ticket-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #202026}
.ticket-head>div:first-child{display:flex;align-items:center;gap:6px}
.btc-icon{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#8b5b17;color:#fff;font-size:10px}
.ticket-head strong{font-size:10px}
.ticket-tabs{display:flex;gap:6px}
.ticket-tabs button{height:28px;border:0;background:#15151a;color:#b7b7bf;border-radius:5px;padding:0 12px;font-size:9px;cursor:pointer}
.ticket-tabs button.active{background:#17171d;color:#eee;border:1px solid #303038}
.ticket-margin{display:flex;align-items:center;justify-content:center;color:#a5a5ad;font-size:9px}
.ticket-margin strong{margin-left:4px}
.ticket-row{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:8px;align-items:end}
.side{height:51px;border:0;border-radius:6px;color:#fff;display:flex;flex-direction:column;justify-content:center;cursor:pointer}
.side strong{font-size:13px}.side span{font-size:7px;margin-top:2px}
.side.sell{background:#d93349}.side.buy{background:#0f9c85}
.lot-box{height:51px;background:#17171d;border-radius:6px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center}
.lot-box button{height:100%;border:0;background:transparent;color:#a9a9b1;font-size:18px;cursor:pointer}
.lot-box>div{text-align:center}.lot-box strong{display:block;font-size:11px}.lot-box span{display:block;font-size:7px;color:#777780;margin-top:3px}

.bottom-panel{
  grid-column:1/3;background:#0b0b0e;border-radius:0 0 10px 10px;overflow:hidden;
  display:grid;grid-template-rows:62px 1fr
}
.bottom-toolbar{display:grid;grid-template-columns:440px 1fr 110px 45px;align-items:center;border-bottom:1px solid #313138}
.bottom-tabs{display:flex;height:100%}
.bottom-tabs button{height:100%;border:0;background:transparent;color:#bdbdc5;padding:0 20px;font-size:11px;cursor:pointer;border-bottom:2px solid transparent}
.bottom-tabs button.active{color:#4f81ff;border-bottom-color:#4f81ff}
.bottom-tabs span{display:inline-grid;place-items:center;background:#1d1d22;border-radius:4px;min-width:17px;height:16px;font-size:7px;margin-left:5px}
.more-btn{font-size:22px!important}
.account-metrics{display:grid;grid-template-columns:repeat(6,1fr);height:100%}
.account-metrics>div{display:flex;flex-direction:column;justify-content:center;padding:0 9px}
.account-metrics span{font-size:8px;color:#777780}.account-metrics strong{font-size:10px;margin-top:3px}
.close-all,.grid-button{height:100%;border:0;background:transparent;color:#dddde3;cursor:pointer}
.close-all{font-size:10px}.grid-button{font-size:18px}
.bottom-content{min-height:0;overflow:hidden}
.bottom-view{display:none;height:100%}.bottom-view.active{display:block}

.enter-layout{
  height:100%;
  display:grid;
  grid-template-columns:170px 240px 240px 60px 240px 1fr;
  gap:12px;padding:0 18px 15px 35px
}
.ready-text{display:flex;align-items:flex-start;padding-top:15px}
.ready-text strong{font-size:24px;line-height:1.4;color:#d6d6db}
.connect-card{
  background:linear-gradient(180deg,#1b1a20,#141318);
  border-radius:0 0 10px 10px;padding:25px 26px;
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:inset 0 0 0 1px #24242a
}
.connect-icon{font-size:28px;color:#b8b8c0;margin-bottom:auto}
.connect-card strong{font-size:14px}
.connect-card span{font-size:8px;color:#777780;margin-top:7px;line-height:1.45}
.connect-card button{margin-top:13px;height:30px;border:1px solid #303038;background:#16161a;color:#bdbdc5;border-radius:5px;font-size:8px;cursor:pointer}
.connect-card.compact{background:linear-gradient(180deg,#17161b,#101013)}
.or-text{display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}
.faq{border-left:1px solid #292930;padding:4px 0 0 35px}
.faq-title{color:#777780;font-size:8px;margin-bottom:12px}
.faq button{display:block;border:0;background:transparent;color:#4d7cf4;font-size:9px;text-align:left;padding:5px 0;cursor:pointer}

table{width:100%;border-collapse:collapse;font-size:9px}
th{height:30px;text-align:left;padding:0 12px;color:#777780;font-weight:500;border-bottom:1px solid #222228}
td{height:34px;padding:0 12px;border-bottom:1px solid #15151a;color:#c5c5cc}
.side-pill{display:inline-flex;padding:3px 6px;border-radius:4px;font-size:7px}
.side-pill.buy{background:rgba(16,191,162,.1);color:#10bfa2}
.side-pill.sell{background:rgba(239,66,85,.1);color:#ef4255}
.row-action{height:22px;border:1px solid #303038;background:#15151a;border-radius:4px;color:#aaaab2;font-size:7px;cursor:pointer}

.drawer{
  position:fixed;right:20px;top:70px;width:320px;max-height:70vh;
  background:#0d0d10;border:1px solid #2c2c33;border-radius:9px;z-index:100;
  box-shadow:var(--shadow);overflow:hidden
}
.drawer-head{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #222228}
.drawer-head strong{font-size:11px}.drawer-head button{border:0;background:transparent;color:#888890;font-size:18px;cursor:pointer}
.drawer-body{padding:10px;overflow:auto;max-height:calc(70vh - 42px)}
.drawer-item{padding:9px;border-bottom:1px solid #1d1d22;font-size:9px}
.drawer-item span{display:block;color:#777780;font-size:7px;margin-top:3px}
.toast-stack{position:fixed;right:20px;bottom:20px;z-index:120;display:grid;gap:7px}
.toast{width:280px;background:#101014;border:1px solid #2d2d34;border-radius:7px;padding:10px 12px;box-shadow:var(--shadow)}
.toast strong{font-size:9px}.toast p{margin:3px 0 0;color:#888891;font-size:7px}

@media(max-width:1250px){
  .workspace{grid-template-columns:minmax(0,1fr) 400px}
  .bottom-toolbar{grid-template-columns:350px 1fr 95px 40px}
  .account-metrics>div:nth-child(n+5){display:none}
  .enter-layout{grid-template-columns:150px 200px 200px 45px 200px 1fr}
}

/* ===== R7 BOTTOM WORKSPACE ===== */
.enter-layout{grid-template-columns:180px 1fr 1fr 58px 1fr minmax(310px,1.25fr);gap:12px;padding:0 18px 15px 24px}
.ready-text{display:flex;flex-direction:column;align-items:flex-start;padding-top:15px}
.ready-text strong{font-size:25px;line-height:1.35;color:#e0e0e5}
.ready-text span{font-size:8px;color:#696972;line-height:1.5;margin-top:10px;max-width:140px}
.connect-card{position:relative;border:1px solid #26262d;background:linear-gradient(180deg,#1c1b21 0%,#141318 100%);border-radius:0 0 10px 10px;padding:19px 20px 16px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;color:inherit;overflow:hidden}
.connect-card.interactive{cursor:pointer;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.connect-card.interactive:hover{border-color:#3a3a45;background:linear-gradient(180deg,#222128 0%,#17161c 100%);transform:translateY(-1px)}
.connect-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#3e3e49,transparent)}
.connect-card-top{display:flex;align-items:center;justify-content:space-between}
.connect-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:#24242b;color:#c2c2ca;border:1px solid #33333c}
.card-kicker{font-size:6px;letter-spacing:.8px;color:#62626a}
.connect-card-copy{margin-top:auto;padding-top:18px}
.connect-card-copy strong{display:block;font-size:14px}
.connect-card-copy span{display:block;font-size:8px;color:#777780;line-height:1.5;margin-top:6px}
.connect-card-action{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:10px;border-top:1px solid #292930;color:#bdbdc5;font-size:8px}
.connect-card-action b{font-size:13px;font-weight:400}
.connect-card.compact{background:linear-gradient(180deg,#17161b,#101013)}
.or-text{display:flex;align-items:center;justify-content:center;font-size:14px;color:#e2e2e6}
.faq{border-left:1px solid #292930;padding:4px 0 0 26px;min-width:0}
.faq-title{color:#777780;font-size:8px;margin-bottom:9px}
.faq-link{display:block;width:100%;border:0;background:transparent;color:#4d7cf4;font-size:9px;text-align:left;padding:5px 0;cursor:pointer;white-space:normal}
.faq-link:hover{color:#7ca0ff;text-decoration:underline}
.demo-account-card{margin-top:12px;padding:10px;border:1px solid #25252c;background:#111116;border-radius:6px}
.demo-account-card>div:first-child{display:flex;align-items:center;gap:8px}
.demo-dot{width:7px;height:7px;border-radius:50%;background:#0fac96;box-shadow:0 0 7px rgba(15,172,150,.45)}
.demo-account-card strong{display:block;font-size:9px}
.demo-account-card span{display:block;color:#72727b;font-size:7px;margin-top:2px}
.demo-account-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.demo-account-stats span{font-size:7px;color:#6d6d76}
.demo-account-stats b{color:#c5c5cc;font-weight:600;margin-left:3px}
.green-text{color:#0fac96!important}
.connect-modal,.faq-modal{position:fixed;inset:0;z-index:160;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);display:grid;place-items:center}
.connect-modal-card,.faq-modal-card{width:min(620px,calc(100vw - 40px));background:#0e0e12;border:1px solid #2b2b33;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.7);padding:16px}
.faq-modal-card{width:min(520px,calc(100vw - 40px))}
.connect-modal-head{display:flex;justify-content:space-between;align-items:flex-start}
.connect-modal-head small{color:#6c83d5;font-size:7px;letter-spacing:1px}
.connect-modal-head h3{margin:4px 0 0;font-size:18px}
.connect-modal-head button{border:0;background:transparent;color:#777780;font-size:20px;cursor:pointer}
.provider-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:15px}
.provider-item{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;min-height:64px;border:1px solid #25252d;background:#141419;border-radius:7px;padding:9px;cursor:pointer}
.provider-item:hover{border-color:#3c3c48;background:#18181e}
.provider-logo{width:38px;height:38px;border-radius:8px;background:#202029;border:1px solid #303039;display:grid;place-items:center;font-weight:800;font-size:10px;color:#dddde3}
.provider-item strong{font-size:10px}
.provider-item span{display:block;font-size:7px;color:#777780;margin-top:3px}
.provider-arrow{color:#696972}
.provider-form{margin-top:12px}
.provider-back{border:0;background:transparent;color:#6488ed;font-size:8px;cursor:pointer;padding:0 0 10px}
.selected-provider{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #25252c;border-radius:7px;background:#121217;margin-bottom:10px}
.selected-provider>div:last-child{display:flex;flex-direction:column}
.selected-provider strong{font-size:10px}.selected-provider span{font-size:7px;color:#777780;margin-top:2px}
.provider-form label{display:block;margin-bottom:9px}
.provider-form label span{display:block;font-size:7px;color:#777780;margin-bottom:4px}
.provider-form input,.provider-form select{width:100%;height:36px;border:1px solid #2b2b33;background:#121217;color:#e2e2e6;border-radius:6px;padding:0 10px;outline:none;font-size:9px}
.provider-security{display:flex;gap:8px;padding:9px;border:1px solid #25252c;background:#111116;border-radius:6px;margin-top:4px}
.provider-security p{margin:0;color:#777780;font-size:7px;line-height:1.45}
.connect-submit{width:100%;height:38px;border:0;border-radius:6px;background:#2f69ec;color:#fff;font-weight:700;font-size:9px;cursor:pointer;margin-top:10px}
.faq-answer{margin-top:13px;color:#b8b8c0;font-size:9px;line-height:1.7;padding:12px;border:1px solid #25252c;background:#111116;border-radius:7px}
@media(max-width:1300px){.enter-layout{grid-template-columns:160px 1fr 1fr 44px 1fr minmax(280px,1fr)}}


/* ===== R8 PHASE 1 BROKER WORKSPACE ===== */
.phase1-workspace{
  height:100%;
  display:grid;
  grid-template-columns:1.2fr 1fr 1.1fr 1.25fr .95fr;
  gap:10px;
  padding:10px 12px 12px;
  background:#0b0b0e;
}

.phase-account-card,
.phase-risk-card,
.phase-conditions-card,
.phase-activity-card,
.phase-support-card{
  min-width:0;
  border:1px solid #26262d;
  background:linear-gradient(180deg,#15151a 0%,#111116 100%);
  border-radius:8px;
  padding:11px;
  overflow:hidden;
  position:relative;
}

.phase-account-card:before,
.phase-risk-card:before,
.phase-conditions-card:before,
.phase-activity-card:before,
.phase-support-card:before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#35353f,transparent);
}

.phase-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.phase-card-head>div{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.phase-kicker{
  font-size:6px;
  color:#6e6e77;
  letter-spacing:.8px;
  margin-bottom:4px;
}

.phase-card-head strong{
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.phase-status,.support-online{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:6px;
  color:#0fac96;
  white-space:nowrap;
}

.phase-status i,.support-online i,.phase-live-dot{
  width:6px;height:6px;border-radius:50%;
  background:#0fac96;
  box-shadow:0 0 7px rgba(15,172,150,.45);
}

.account-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:12px;
}

.account-hero>div,
.risk-main>div{
  border:1px solid #222229;
  background:#101015;
  border-radius:6px;
  padding:9px;
}

.account-hero span,
.risk-main span,
.account-meta span,
.risk-lines span,
.conditions-grid span,
.session-row span,
.support-meta span{
  display:block;
  color:#707079;
  font-size:6px;
}

.account-hero strong{
  display:block;
  font-size:13px;
  margin-top:4px;
}

.account-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-top:8px;
}

.account-meta>div{
  padding:7px 5px;
  border-top:1px solid #222229;
}

.account-meta strong{
  display:block;
  margin-top:3px;
  font-size:7px;
  color:#bdbdc5;
}

.phase-actions{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:5px;
  margin-top:8px;
}

.phase-actions button,
.phase-wide-btn,
.support-actions button{
  height:28px;
  border:1px solid #2b2b33;
  background:#141419;
  border-radius:5px;
  color:#aaaab2;
  font-size:7px;
  cursor:pointer;
}

.phase-actions button:hover,
.phase-wide-btn:hover,
.support-actions button:hover{
  color:#fff;
  border-color:#3e3e49;
}

.phase-actions .primary-action{
  background:#173f38;
  border-color:#21544b;
  color:#96dfd0;
}

.risk-badge{
  font-size:6px;
  padding:3px 6px;
  border-radius:4px;
  background:rgba(15,172,150,.10);
  color:#0fac96;
}
.risk-badge.medium{background:rgba(217,166,64,.10);color:#d9a640}
.risk-badge.high{background:rgba(239,66,85,.10);color:#ef4255}

.risk-main{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:12px;
}

.risk-main strong{
  display:block;
  margin-top:4px;
  font-size:11px;
}

.risk-progress{
  height:5px;
  background:#1c1c22;
  border-radius:4px;
  overflow:hidden;
  margin:10px 0 8px;
}

.risk-progress span{
  display:block;
  width:8%;
  height:100%;
  background:linear-gradient(90deg,#0b8f7c,#13bea2);
  border-radius:4px;
  transition:width .25s ease;
}

.risk-lines{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}

.risk-lines>div{
  padding:6px 4px;
  border-top:1px solid #202026;
}

.risk-lines strong{
  display:block;
  margin-top:3px;
  font-size:8px;
}

.phase-wide-btn{
  width:100%;
  margin-top:8px;
}

.conditions-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:12px;
}

.conditions-grid>div{
  border:1px solid #222229;
  background:#101015;
  border-radius:6px;
  padding:8px;
}

.conditions-grid strong{
  display:block;
  font-size:9px;
  margin-top:3px;
}

.conditions-grid small{
  display:block;
  color:#5d5d66;
  font-size:6px;
  margin-top:3px;
}

.session-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  border-top:1px solid #202026;
  margin-top:9px;
  padding-top:8px;
}

.session-row strong,
.support-meta strong{
  display:block;
  font-size:8px;
  margin-top:3px;
}

.phase-activity-list{
  margin-top:10px;
  display:grid;
  gap:4px;
}

.phase-activity-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:7px;
  border:1px solid #202027;
  background:#101015;
  border-radius:5px;
}

.phase-activity-item strong{
  display:block;
  font-size:7px;
}

.phase-activity-item span{
  display:block;
  color:#686871;
  font-size:6px;
  margin-top:2px;
}

.phase-activity-item time{
  color:#777780;
  font-size:6px;
  white-space:nowrap;
}

.phase-icon-btn{
  width:24px;height:24px;
  border:1px solid #282830;
  background:#121217;
  border-radius:5px;
  color:#888891;
  cursor:pointer;
}

.phase-support-card p{
  color:#85858e;
  font-size:7px;
  line-height:1.55;
  margin:13px 0 0;
}

.support-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-top:12px;
}

.support-meta{
  margin-top:12px;
  padding-top:9px;
  border-top:1px solid #202026;
}

.green-text{color:#0fac96!important}

@media(max-width:1350px){
  .phase1-workspace{
    grid-template-columns:1.15fr 1fr 1.05fr 1.2fr;
  }
  .phase-support-card{display:none}
}


/* =========================================================
   R9 — TRADELOCKER-NATIVE PHASE 1 BOTTOM WORKSPACE
   Flat panes, thin dividers, no dashboard-card visual language
   ========================================================= */

.tl-phase-workspace{
  height:100%;
  display:grid;
  grid-template-columns:180px 1fr 1fr 1fr minmax(330px,1.28fr);
  background:#0b0b0e;
  padding:0 14px 14px 22px;
  gap:0;
}

.tl-ready{
  min-width:0;
  padding:15px 18px 12px 5px;
  display:flex;
  flex-direction:column;
  border-right:1px solid #292930;
}

.tl-eyebrow{
  font-size:6px;
  letter-spacing:1px;
  color:#5e5e67;
  margin-bottom:7px;
}

.tl-ready>strong{
  font-size:24px;
  line-height:1.35;
  font-weight:650;
  color:#d9d9de;
  letter-spacing:-.35px;
}

.tl-ready-status{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:6px;
  color:#74747d;
  font-size:7px;
}

.tl-ready-status i,
.tl-live-line i{
  width:6px;height:6px;border-radius:50%;
  background:#0fac96;
  box-shadow:0 0 8px rgba(15,172,150,.45);
  flex:none;
}

.tl-phase-tile{
  min-width:0;
  position:relative;
  height:100%;
  border:0;
  border-right:1px solid #292930;
  background:
    radial-gradient(circle at 50% 0%,rgba(80,80,96,.08),transparent 38%),
    linear-gradient(180deg,#17161b 0%,#121116 100%);
  color:inherit;
  padding:18px 22px 14px;
  text-align:left;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:background .16s ease;
}

.tl-phase-tile:hover{
  background:
    radial-gradient(circle at 50% 0%,rgba(110,110,130,.12),transparent 42%),
    linear-gradient(180deg,#1b1a20 0%,#151419 100%);
}

.tl-phase-tile:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:#202027;
}

.tl-tile-icon{
  width:42px;height:42px;
  display:grid;
  place-items:center;
  font-size:26px;
  color:#aaaab5;
  margin-bottom:auto;
  opacity:.92;
}

.tl-tile-copy{
  margin-top:18px;
}

.tl-tile-copy>span{
  display:block;
  font-size:6px;
  letter-spacing:.9px;
  color:#5f5f68;
  margin-bottom:5px;
}

.tl-tile-copy strong{
  display:block;
  font-size:14px;
  font-weight:600;
  color:#dedee3;
}

.tl-tile-copy small{
  display:block;
  max-width:190px;
  font-size:7px;
  line-height:1.5;
  color:#6f6f78;
  margin-top:6px;
}

.tl-tile-footer{
  min-height:27px;
  margin-top:13px;
  padding-top:9px;
  border-top:1px solid #27272e;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:7px;
  color:#84848d;
}

.tl-tile-footer b{
  color:#b2b2bb;
  font-size:13px;
  font-weight:400;
}

.tl-info-panel{
  min-width:0;
  padding:13px 0 0 26px;
  display:flex;
  flex-direction:column;
}

.tl-info-head{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.tl-info-head span{
  font-size:6px;
  color:#5f5f68;
  letter-spacing:.9px;
}

.tl-info-head strong{
  font-size:11px;
  color:#d3d3d9;
  font-weight:600;
}

.tl-account-lines{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:11px;
  border-top:1px solid #27272e;
  border-left:1px solid #27272e;
}

.tl-account-lines button{
  min-height:43px;
  border:0;
  border-right:1px solid #27272e;
  border-bottom:1px solid #27272e;
  background:#0f0f13;
  color:inherit;
  padding:7px 9px;
  text-align:left;
  cursor:pointer;
}

.tl-account-lines button:hover{
  background:#141419;
}

.tl-account-lines span{
  display:block;
  font-size:6px;
  color:#686871;
}

.tl-account-lines strong{
  display:block;
  margin-top:4px;
  font-size:9px;
  color:#c4c4cb;
  font-weight:600;
}

.tl-info-links{
  display:flex;
  flex-wrap:wrap;
  gap:0 13px;
  margin-top:9px;
}

.tl-info-links button{
  border:0;
  background:transparent;
  padding:4px 0;
  color:#4f7ff5;
  font-size:7px;
  cursor:pointer;
}

.tl-info-links button:hover{
  color:#78a0ff;
  text-decoration:underline;
}

.tl-live-line{
  margin-top:auto;
  min-height:28px;
  border-top:1px solid #27272e;
  display:grid;
  grid-template-columns:8px 1fr auto;
  align-items:center;
  gap:6px;
  color:#696972;
  font-size:6px;
}

.tl-live-line b{
  font-size:7px;
  font-weight:600;
  color:#a9a9b1;
}

@media(max-width:1350px){
  .tl-phase-workspace{
    grid-template-columns:160px 1fr 1fr 1fr minmax(290px,1.15fr);
    padding-left:15px;
  }
  .tl-phase-tile{padding-left:16px;padding-right:16px}
  .tl-info-panel{padding-left:18px}
}




/* =========================================================
   R12 — TRADELOCKER-INSPIRED PREMIUM PHASE 1
   Spacious tiles, restrained violet illumination, plain info rail
   ========================================================= */

.tl-premium-phase{
  height:100%;
  display:grid;
  grid-template-columns:190px 1fr 1fr 1fr minmax(350px,1.25fr);
  gap:14px;
  padding:12px 18px 14px 28px;
  background:#0b0b0e;
}

.tl-intro{
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:8px 7px 4px 4px;
}

.tl-intro-kicker{
  font-size:6px;
  letter-spacing:1.1px;
  color:#5d5d66;
  margin-bottom:9px;
}

.tl-intro>strong{
  font-size:24px;
  line-height:1.42;
  letter-spacing:-.3px;
  font-weight:650;
  color:#d9d9df;
}

.tl-intro-status{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:6px;
  color:#777781;
  font-size:7px;
}

.tl-intro-status i,
.tl-links-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#12b99a;
  box-shadow:0 0 7px rgba(18,185,154,.35);
  flex:none;
}

.tl-large-tile{
  position:relative;
  min-width:0;
  height:100%;
  overflow:hidden;
  border:1px solid #292930;
  border-radius:9px;
  background:
    linear-gradient(180deg,#1a1920 0%,#16151b 32%,#121116 100%);
  color:inherit;
  text-align:left;
  padding:18px 24px 16px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 12px 34px rgba(0,0,0,.16);
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}

.tl-large-tile:hover{
  transform:translateY(-1px);
  border-color:#393945;
  background:
    linear-gradient(180deg,#1d1c24 0%,#18171e 32%,#131218 100%);
}

.tl-tile-glow{
  position:absolute;
  top:-78px;
  left:-38px;
  width:230px;
  height:190px;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(92,75,169,.40) 0%,
      rgba(76,60,143,.24) 33%,
      rgba(53,42,101,.10) 56%,
      transparent 76%
    );
  filter:blur(2px);
}

.tl-large-tile:nth-of-type(3) .tl-tile-glow{
  background:
    radial-gradient(
      ellipse at center,
      rgba(102,80,188,.44) 0%,
      rgba(78,60,150,.25) 35%,
      rgba(49,38,96,.10) 58%,
      transparent 77%
    );
}

.tl-large-tile:nth-of-type(4) .tl-tile-glow{
  background:
    radial-gradient(
      ellipse at center,
      rgba(80,70,151,.32) 0%,
      rgba(65,52,126,.18) 37%,
      rgba(45,36,87,.08) 59%,
      transparent 78%
    );
}

.tl-large-icon{
  position:relative;
  z-index:1;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:auto;
}

.tl-large-icon:after{
  content:"";
  position:absolute;
  width:78px;
  height:78px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(105,87,189,.16),transparent 68%);
}

.tl-large-icon img{
  position:relative;
  z-index:1;
  width:43px;
  height:43px;
  opacity:.96;
  filter:drop-shadow(0 0 5px rgba(122,104,200,.18));
}

.tl-large-copy{
  position:relative;
  z-index:1;
  margin-top:20px;
}

.tl-large-copy>span{
  display:block;
  margin-bottom:6px;
  color:#696972;
  font-size:6px;
  letter-spacing:1px;
}

.tl-large-copy strong{
  display:block;
  color:#e2e2e7;
  font-size:14px;
  font-weight:620;
  letter-spacing:-.1px;
}

.tl-large-copy small{
  display:block;
  margin-top:7px;
  max-width:210px;
  color:#74747d;
  font-size:7px;
  line-height:1.5;
}

.tl-large-foot{
  position:relative;
  z-index:1;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid #2a2930;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#85858e;
  font-size:7px;
}

.tl-large-foot b{
  color:#b8b8c0;
  font-size:14px;
  line-height:1;
  font-weight:400;
}

.tl-links-panel{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:10px 0 2px 22px;
  border-left:1px solid #292930;
}

.tl-links-head{
  display:flex;
  flex-direction:column;
}

.tl-links-head span{
  color:#66666f;
  font-size:6px;
  letter-spacing:1px;
}

.tl-links-head strong{
  margin-top:5px;
  color:#d8d8de;
  font-size:11px;
  font-weight:600;
}

.tl-links-list{
  margin-top:11px;
  display:grid;
  grid-template-columns:1fr;
  align-content:start;
}

.tl-links-list button{
  width:max-content;
  max-width:100%;
  border:0;
  background:transparent;
  color:#4e7ef4;
  text-align:left;
  padding:5px 0;
  font-size:8px;
  cursor:pointer;
  white-space:normal;
}

.tl-links-list button:hover{
  color:#769cff;
  text-decoration:underline;
}

.tl-links-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:9px;
  border-top:1px solid #25252b;
  border-bottom:1px solid #25252b;
}

.tl-links-meta>div{
  padding:8px 0;
}

.tl-links-meta>div+div{
  padding-left:13px;
  border-left:1px solid #25252b;
}

.tl-links-meta span{
  display:block;
  color:#64646d;
  font-size:6px;
}

.tl-links-meta strong{
  display:block;
  margin-top:4px;
  color:#c8c8cf;
  font-size:8px;
  font-weight:600;
}

.tl-links-status{
  min-height:30px;
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:6px;
  color:#6a6a73;
  font-size:6px;
}

@media(max-width:1350px){
  .tl-premium-phase{
    grid-template-columns:165px 1fr 1fr 1fr minmax(305px,1.1fr);
    gap:10px;
    padding-left:18px;
  }
  .tl-large-tile{
    padding-left:18px;
    padding-right:18px;
  }
  .tl-links-panel{
    padding-left:16px;
  }
}


/* ===== R13 INSTRUMENT SWITCHING ===== */
.watch-row.selected{
  background:#132452;
  box-shadow:inset 2px 0 #4e79f2;
}
.watch-row.selected .watch-symbol strong{
  color:#f1f4fb;
}
.watch-row.selected .watch-price{
  color:#16bea2;
}
.watch-row:focus-visible{
  outline:1px solid #4e79f2;
  outline-offset:-1px;
}
.chart-area.instrument-switched{
  animation:instrumentContextFlash .18s ease-out;
}
@keyframes instrumentContextFlash{
  0%{filter:brightness(1.08)}
  100%{filter:brightness(1)}
}


/* =========================================================
   R14 — BOTTOM GEOMETRY CORRECTION
   Mirrors the reference proportions instead of stretching cards.
   ========================================================= */

/* Shorter lower dock, more chart real estate */
.workspace{
  grid-template-rows:minmax(0,1fr) 220px;
}

/* Compact tab / account toolbar */
.bottom-panel{
  grid-template-rows:48px minmax(0,1fr);
}

.bottom-toolbar{
  grid-template-columns:minmax(650px,1.18fr) minmax(570px,.92fr) 92px 38px;
  min-width:0;
  background:#0c0c0f;
}

.bottom-tabs{
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.bottom-tabs::-webkit-scrollbar{display:none}

.bottom-tabs button{
  flex:0 0 auto;
  padding:0 13px;
  font-size:8px;
  white-space:nowrap;
}

.bottom-tabs span{
  min-width:14px;
  height:14px;
  font-size:6px;
}

.account-metrics span{font-size:6px}
.account-metrics strong{font-size:8px;margin-top:2px}
.account-metrics>div{padding:0 7px}
.close-all{font-size:8px}
.grid-button{font-size:15px}

/* Exact-style lower composition */
.tl14-enter{
  height:100%;
  display:grid;
  grid-template-columns:170px 240px 240px 28px 240px minmax(320px,1fr);
  gap:14px;
  align-items:start;
  padding:16px 18px 10px 34px;
  background:#0b0b0e;
}

.tl14-intro{
  height:142px;
  display:flex;
  flex-direction:column;
  padding:3px 4px 0 0;
}

.tl14-intro>strong{
  font-size:22px;
  line-height:1.42;
  letter-spacing:-.25px;
  font-weight:620;
  color:#d5d5db;
}

.tl14-account-status{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:6px;
  color:#72727b;
  font-size:6px;
}

.tl14-account-status i,
.tl14-live-status i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#13b89a;
  box-shadow:0 0 6px rgba(19,184,154,.35);
}

.tl14-card{
  position:relative;
  height:142px;
  min-width:0;
  overflow:hidden;
  border:1px solid #29292f;
  border-radius:8px;
  background:linear-gradient(180deg,#19181e 0%,#151419 100%);
  color:#e4e4e8;
  text-align:left;
  padding:20px 24px 17px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.022),
    0 3px 7px rgba(0,0,0,.22);
}

.tl14-card:hover{
  border-color:#3a3942;
  background:linear-gradient(180deg,#1c1b21 0%,#17161c 100%);
}

.tl14-glow{
  position:absolute;
  left:-28px;
  top:-45px;
  width:165px;
  height:125px;
  background:radial-gradient(
    ellipse at center,
    rgba(89,73,166,.37) 0%,
    rgba(70,57,132,.19) 40%,
    rgba(44,36,83,.07) 61%,
    transparent 78%
  );
  pointer-events:none;
}

.card-risk .tl14-glow{
  background:radial-gradient(
    ellipse at center,
    rgba(102,78,185,.40) 0%,
    rgba(78,60,146,.20) 40%,
    rgba(49,38,91,.07) 62%,
    transparent 79%
  );
}

.card-conditions{
  background:
    linear-gradient(110deg,#1b1b20 0%,#16161b 48%,#121216 100%);
}

.card-conditions .tl14-glow{
  opacity:.55;
  background:radial-gradient(
    ellipse at center,
    rgba(104,104,122,.19) 0%,
    rgba(73,73,87,.10) 45%,
    transparent 75%
  );
}

.tl14-icon{
  position:relative;
  z-index:1;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
}

.tl14-icon img{
  width:34px;
  height:34px;
  opacity:.95;
  filter:drop-shadow(0 0 4px rgba(120,104,194,.14));
}

.tl14-card>strong{
  position:relative;
  z-index:1;
  font-size:12px;
  font-weight:620;
  color:#e4e4e8;
}

.tl14-spacer{
  height:142px;
}

.tl14-links{
  height:142px;
  min-width:0;
  padding:3px 0 0 24px;
  border-left:1px solid #27272d;
  overflow:hidden;
}

.tl14-links-title{
  display:block;
  color:#6e6e76;
  font-size:7px;
  margin-bottom:7px;
}

.tl14-links button{
  display:block;
  max-width:100%;
  border:0;
  background:transparent;
  padding:4px 0;
  color:#4e79ec;
  font-size:7.5px;
  text-align:left;
  cursor:pointer;
  white-space:normal;
}

.tl14-links button:hover{
  color:#7397f7;
  text-decoration:underline;
}

.tl14-live-status{
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid #25252a;
  display:flex;
  align-items:center;
  gap:6px;
  color:#696971;
  font-size:6px;
}

/* compact auxiliary views */
.tl14-balance-view{
  height:100%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:stretch;
}
.tl14-balance-view>div{
  padding:18px;
  border-right:1px solid #202026;
}
.tl14-balance-view span{
  display:block;
  color:#707079;
  font-size:7px;
}
.tl14-balance-view strong{
  display:block;
  margin-top:5px;
  font-size:14px;
  color:#e0e0e5;
}

/* Keep selected instrument behavior visible from R13 */
.watch-row.selected{
  background:#132452;
  box-shadow:inset 2px 0 #4e79f2;
}

@media(max-width:1450px){
  .tl14-enter{
    grid-template-columns:150px 210px 210px 22px 210px minmax(270px,1fr);
    gap:10px;
    padding-left:22px;
  }
  .tl14-card,.tl14-intro,.tl14-spacer,.tl14-links{
    height:136px;
  }
  .tl14-card{
    padding-left:19px;
    padding-right:19px;
  }
}

@media(max-width:1200px){
  .bottom-toolbar{
    grid-template-columns:minmax(560px,1fr) 390px 80px 34px;
  }
  .account-metrics>div:nth-child(n+5){display:none}
  .tl14-enter{
    grid-template-columns:135px 185px 185px 16px 185px minmax(230px,1fr);
    gap:8px;
    padding-left:14px;
  }
}


/* =========================================================
   R15 — TRADELOCKER RIGHT WATCHLIST / ORDER TICKET MATCH
   ========================================================= */

/* Keep the order ticket compact so watchlist gets the height */
.right-stack{
  grid-template-rows:minmax(0,1fr) 116px;
  gap:8px;
}

/* Dense watchlist like the reference */
.watchlist{
  grid-template-rows:42px 28px minmax(0,1fr);
  border-radius:8px;
  background:#0c0c0f;
}

.watch-top{
  grid-template-columns:68px minmax(120px,1fr) 82px 36px;
  gap:6px;
  padding:0 8px;
}

.watch-toggle{
  gap:4px;
}

.watch-toggle button{
  width:31px;
  height:31px;
  border-radius:5px;
  font-size:12px;
}

.search-box{
  height:31px;
  padding:0 9px;
}

.search-box input{
  font-size:8px;
}

.watch-top select{
  height:31px;
  padding:0 7px;
  font-size:7px;
}

.star{
  width:33px;
  height:31px;
  font-size:16px;
}

/* 7 data columns + menu */
.watch-head,
.watch-row{
  grid-template-columns:
    minmax(92px,1.42fr)
    minmax(58px,.78fr)
    minmax(58px,.78fr)
    minmax(40px,.48fr)
    minmax(63px,.72fr)
    minmax(42px,.52fr)
    22px;
  column-gap:6px;
}

.watch-head{
  padding:0 9px;
  font-size:6.5px;
  color:#7e7e87;
  border-bottom:1px solid #1e1e24;
}

.watch-head span:nth-child(n+2){
  text-align:center;
}

.watch-body{
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#2c2c34 transparent;
}

.watch-body::-webkit-scrollbar{
  width:4px;
}
.watch-body::-webkit-scrollbar-thumb{
  background:#2c2c34;
  border-radius:4px;
}

.watch-row{
  min-height:31px;
  height:31px;
  padding:0 9px;
  border-top:0;
  border-bottom:1px solid #17171c;
  font-size:6.7px;
}

.watch-row:hover{
  background:#11141a;
}

.watch-row.selected{
  background:#14285b;
  box-shadow:inset 2px 0 #3f72f4;
}

.watch-symbol{
  min-width:0;
  gap:6px;
}

.watch-symbol strong{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:6.8px;
}

.watch-flag{
  width:13px;
  text-align:center;
  flex:none;
  font-size:8px;
}

.watch-price,
.watch-spread,
.watch-margin,
.watch-leverage{
  text-align:center;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.watch-spread,
.watch-margin,
.watch-leverage{
  color:#b1b1b9;
}

.watch-more{
  width:20px;
  height:25px;
  padding:0;
  border:0;
  background:transparent;
  color:#c3c3ca;
  font-size:12px;
  cursor:pointer;
  border-radius:3px;
}

.watch-more:hover{
  background:#22232a;
}

/* Reference-like compact order ticket */
.order-ticket{
  min-height:0;
  padding:6px 8px 7px;
  grid-template-rows:31px 24px minmax(0,1fr);
  border-radius:8px;
  background:#0d0d10;
}

.ticket-head{
  min-height:0;
}

.ticket-head>div:first-child{
  gap:5px;
  min-width:85px;
}

.btc-icon{
  width:18px;
  height:18px;
  font-size:8px;
}

.ticket-head strong{
  font-size:7.5px;
}

.ticket-tabs{
  gap:4px;
}

.ticket-tabs button{
  height:25px;
  padding:0 9px;
  border-radius:4px;
  font-size:6.5px;
}

.ticket-tabs button.active{
  background:#18181d;
  border-color:#32323a;
}

.ticket-margin{
  font-size:6.7px;
}

.ticket-row{
  grid-template-columns:1fr 1.18fr 1fr;
  gap:7px;
  align-items:center;
}

.side{
  height:43px;
  border-radius:5px;
}

.side strong{
  font-size:10.5px;
}

.side span{
  font-size:5.5px;
  margin-top:1px;
}

.lot-box{
  height:43px;
  border-radius:5px;
  grid-template-columns:32px 1fr 32px;
}

.lot-box button{
  font-size:15px;
}

.lot-box strong{
  font-size:8.5px;
}

.lot-box span{
  font-size:5.5px;
  margin-top:2px;
}

/* More room at common desktop widths */
@media(min-width:1400px){
  .workspace{
    grid-template-columns:minmax(0,1fr) 545px;
  }
}

@media(max-width:1250px){
  .watch-head,
  .watch-row{
    grid-template-columns:
      minmax(78px,1.35fr)
      minmax(48px,.72fr)
      minmax(48px,.72fr)
      36px
      53px
      36px
      18px;
    column-gap:4px;
  }
  .watch-row,.watch-head{
    padding-left:6px;
    padding-right:6px;
  }
}


/* =========================================================
   R16 — TRADEVAULT BRANDING
   Remove TradeLocker-like bracket brand marks.
   ========================================================= */
.tradevault-rail-brand{
  width:42px;
  min-height:48px;
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:2px;
  padding:1px 0 0;
  cursor:pointer;
  border-radius:6px;
}

.tradevault-rail-brand:hover{
  background:#111318;
}

.tradevault-rail-brand img{
  width:34px;
  height:34px;
  display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.tradevault-rail-brand span{
  font-size:5.5px;
  font-weight:750;
  letter-spacing:.9px;
  color:#b6bdc7;
}

.rail-account-btn{
  width:38px;
  height:38px;
  border:1px solid transparent;
  background:transparent;
  border-radius:7px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.rail-account-btn:hover{
  background:#12151a;
  border-color:#292f37;
}

.rail-account-avatar{
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#202833,#151a21);
  border:1px solid #303946;
  color:#d9dee5;
  font-size:8px;
  font-weight:700;
}

/* Disable the obsolete TradeLocker-like bracket motif if any old node survives. */
.rail-brand-mark{
  display:none!important;
}


/* =========================================================
   R17 MOBILE MODE
   Isolated under max-width: 767px so desktop R16 is unchanged.
   ========================================================= */

.mobile-only,
.mobile-card-desc{
  display:none;
}

@media (max-width:767px){

  :root{
    --mobile-black:#000000;
    --mobile-panel:#101116;
    --mobile-panel-2:#15161c;
    --mobile-line:#292b33;
    --mobile-muted:#9296a3;
    --mobile-blue:#2878ff;
    --mobile-green:#08aa8d;
    --mobile-red:#dc3548;
  }

  html,body{
    width:100%;
    min-height:100%;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
    background:#000;
    overscroll-behavior-y:none;
  }

  body{
    -webkit-text-size-adjust:100%;
    touch-action:manipulation;
  }

  .mobile-only{
    display:flex;
  }

  .app-shell{
    display:block;
    width:100%;
    min-height:100dvh;
    height:auto;
    background:#000;
    overflow:visible;
  }

  /* Hide desktop-only chrome */
  .left-rail{
    display:none!important;
  }

  /* -------------------------------------------------------
     App install / brand banner
     ------------------------------------------------------- */
  .mobile-app-banner{
    min-height:106px;
    padding:22px 18px 17px;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid #23252b;
    background:#000;
  }

  body.mobile-install-hidden .mobile-app-banner{
    display:none!important;
  }

  .mobile-app-identity{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
  }

  .mobile-app-logo{
    width:48px;
    height:48px;
    flex:0 0 48px;
    border:1px solid #464b56;
    border-radius:11px;
    background:#080a0d;
    display:grid;
    place-items:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }

  .mobile-app-logo img{
    width:38px;
    height:38px;
    display:block;
  }

  .mobile-app-identity strong{
    display:block;
    color:#f2f3f5;
    font-size:19px;
    font-weight:620;
    line-height:1.1;
  }

  .mobile-app-identity span{
    display:block;
    margin-top:4px;
    color:#8c8f99;
    font-size:14px;
  }

  .mobile-app-actions{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .mobile-get-btn{
    min-width:76px;
    height:42px;
    border:0;
    border-radius:22px;
    background:#1599f4;
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
  }

  .mobile-close-btn{
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:#171a20;
    color:#3e8cff;
    font-size:29px;
    line-height:1;
    font-weight:300;
    cursor:pointer;
  }

  /* -------------------------------------------------------
     Primary mobile navigation
     ------------------------------------------------------- */
  .mobile-primary-nav{
    position:sticky;
    top:0;
    z-index:80;
    width:100%;
    height:72px;
    display:grid;
    grid-template-columns:minmax(88px,1.08fr) minmax(84px,1fr) minmax(84px,1fr) 64px 48px;
    align-items:stretch;
    background:linear-gradient(180deg,#0f1116,#090a0e);
    border-bottom:1px solid #272a32;
    box-shadow:0 7px 20px rgba(0,0,0,.26);
  }

  body.mobile-install-hidden .mobile-primary-nav{
    top:0;
  }

  .mobile-nav-tab{
    position:relative;
    min-width:0;
    border:0;
    background:transparent;
    color:#8f93a0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:11px;
    cursor:pointer;
  }

  .mobile-nav-tab .mobile-nav-icon{
    font-size:18px;
    line-height:18px;
    color:#9398a6;
  }

  .mobile-nav-tab>b{
    position:absolute;
    right:12px;
    top:28px;
    color:#d9dbe1;
    font-size:14px;
    font-weight:400;
  }

  .mobile-nav-tab.active{
    color:#f0f2f6;
    background:linear-gradient(180deg,rgba(27,58,112,.12),rgba(35,86,185,.11));
  }

  .mobile-nav-tab.active:after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:0;
    height:3px;
    border-radius:3px 3px 0 0;
    background:var(--mobile-blue);
    box-shadow:0 0 8px rgba(40,120,255,.35);
  }

  .mobile-nav-tab.active .mobile-nav-icon{
    color:#4b92ff;
  }

  .mobile-pnl-box{
    align-self:center;
    justify-self:center;
    min-width:54px;
    min-height:46px;
    padding:5px 6px;
    border-radius:7px;
    background:#14161b;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid #1d2027;
  }

  .mobile-pnl-box span{
    font-size:10px;
    color:#e3e4e7;
  }

  .mobile-pnl-box strong{
    margin-top:2px;
    font-size:10px;
    font-weight:500;
    color:#d8d9de;
  }

  .mobile-brand-button{
    position:relative;
    width:43px;
    height:43px;
    align-self:center;
    justify-self:center;
    border:1px solid #242831;
    border-radius:7px;
    background:#05070a;
    display:grid;
    place-items:center;
    cursor:pointer;
  }

  .mobile-brand-button img{
    width:34px;
    height:34px;
  }

  .mobile-brand-button i{
    position:absolute;
    width:6px;
    height:6px;
    right:3px;
    top:3px;
    border-radius:50%;
    background:#0fc29e;
    box-shadow:0 0 5px rgba(15,194,158,.35);
  }

  /* -------------------------------------------------------
     Workspace modes
     ------------------------------------------------------- */
  .workspace{
    display:block;
    width:100%;
    min-width:0;
    min-height:0;
    height:auto;
    padding:0;
    overflow:visible;
    background:#000;
  }

  body[data-mobile-screen="chart"] .chart-panel{
    display:grid!important;
  }

  body[data-mobile-screen="chart"] .right-stack{
    display:block!important;
  }

  body[data-mobile-screen="chart"] .right-stack .watchlist{
    display:none!important;
  }

  body[data-mobile-screen="chart"] .right-stack .order-ticket{
    display:grid!important;
  }

  body[data-mobile-screen="chart"] .bottom-panel{
    display:none!important;
  }

  body[data-mobile-screen="markets"] .chart-panel,
  body[data-mobile-screen="markets"] .bottom-panel{
    display:none!important;
  }

  body[data-mobile-screen="markets"] .right-stack{
    display:block!important;
  }

  body[data-mobile-screen="markets"] .right-stack .watchlist{
    display:grid!important;
  }

  body[data-mobile-screen="markets"] .right-stack .order-ticket{
    display:none!important;
  }

  body[data-mobile-screen="trades"] .chart-panel,
  body[data-mobile-screen="trades"] .right-stack{
    display:none!important;
  }

  body[data-mobile-screen="trades"] .bottom-panel{
    display:grid!important;
  }

  /* -------------------------------------------------------
     MOBILE CHART SCREEN
     ------------------------------------------------------- */
  .chart-panel{
    width:100%;
    min-width:0;
    min-height:0;
    border-radius:0;
    background:#08090c;
    grid-template-rows:58px minmax(480px,calc(100dvh - 360px));
    overflow:visible;
  }

  .top-toolbar{
    height:58px;
    padding:0 14px;
    background:#101116;
    border-bottom:1px solid #383a42;
  }

  .toolbar-left{
    gap:7px;
  }

  .toolbar-right{
    gap:5px;
  }

  .tf-btn{
    font-size:15px;
    min-width:42px;
  }

  .tool-btn{
    min-width:36px;
    font-size:21px;
  }

  .tool-label,
  .top-toolbar .separator:nth-of-type(3),
  #redoBtn{
    display:none;
  }

  .layout-btn{
    width:36px;
  }

  .layout-btn span{
    width:23px;
    height:23px;
  }

  .layout-name{
    max-width:115px;
    font-size:14px;
  }

  #cameraBtn{
    font-size:20px;
  }

  .chart-area{
    width:100%;
    min-height:480px;
    height:calc(100dvh - 360px);
    background:#090a0d;
    border-bottom:1px solid #373a42;
  }

  .drawing-tools{
    left:14px;
    top:17px;
    width:48px;
    gap:7px;
    z-index:12;
  }

  .draw{
    width:43px;
    height:43px;
    font-size:22px;
    border-radius:6px;
  }

  .draw-separator{
    width:36px;
  }

  .symbol-bar{
    left:72px;
    right:8px;
    top:15px;
    display:flex;
    align-items:flex-start;
  }

  .symbol-menu{
    display:none;
  }

  .symbol-copy{
    margin-left:0;
  }

  .symbol-line{
    font-size:15px;
    gap:4px;
  }

  .symbol-line strong{
    font-size:16px;
  }

  .status-dot{
    width:12px;
    height:12px;
  }

  .ohlc-line{
    margin-top:7px;
    display:block;
    font-size:13px;
    color:#10bc9c;
  }

  .ohlc-line span{
    display:none;
  }

  .ohlc-line #changeVal{
    display:inline;
    color:#10bc9c!important;
  }

  .ohlc-line:before{
    content:attr(data-mobile-close);
  }

  .volume-title{
    display:none;
  }

  #chartCanvas,#overlayCanvas{
    inset:0;
  }

  .price-tag{
    right:7px;
    min-width:92px;
    height:26px;
    font-size:13px;
  }

  .chart-logo{
    left:72px;
    bottom:91px;
    width:44px;
    height:44px;
    border-radius:50%;
    font-size:0;
    background:#0c0f14 url("assets/tradevault-mark.svg") center/34px 34px no-repeat;
  }

  .chart-footer{
    left:62px;
    right:0;
    bottom:0;
    height:55px;
    padding:0 9px 0 10px;
    border-top:1px solid #3b3e46;
    background:#0c0e12;
  }

  .range-links{
    min-width:95px;
    display:flex;
    align-items:center;
  }

  .range-links button{
    display:none;
  }

  .range-links:before{
    content:"Date Range ⌄";
    font-size:12px;
    color:#c6c8cf;
  }

  .time-tools{
    gap:10px;
    font-size:11px;
    color:#c0c3cb;
  }

  .auto-pill{
    padding:9px 7px;
    border-radius:7px;
  }

  /* -------------------------------------------------------
     MOBILE ORDER TICKET UNDER CHART
     ------------------------------------------------------- */
  .right-stack{
    width:100%;
    min-width:0;
    min-height:0;
    background:#000;
  }

  .order-ticket{
    width:100%;
    min-height:172px;
    padding:14px 12px 16px;
    border:0;
    border-radius:0;
    background:#000;
    grid-template-rows:42px 38px 62px;
    box-shadow:none;
  }

  .ticket-head{
    align-items:center;
    border-bottom:0;
  }

  .ticket-head>div:first-child{
    display:none;
  }

  .ticket-tabs{
    width:100%;
    display:grid;
    grid-template-columns:1.35fr 1fr .8fr .8fr 44px;
    gap:7px;
  }

  .ticket-tabs button{
    height:37px;
    padding:0 7px;
    border:1px solid #292c33;
    background:#111319;
    border-radius:6px;
    font-size:12px;
  }

  .ticket-tabs button.active{
    border-color:#363a43;
    background:#111318;
  }

  .ticket-margin{
    justify-content:center;
    font-size:11px;
    color:#969ba7;
  }

  .ticket-row{
    grid-template-columns:1fr 1.9fr 1fr;
    gap:8px;
    align-items:center;
  }

  .side{
    height:58px;
    border-radius:7px;
  }

  .side strong{
    font-size:15px;
  }

  .side span{
    font-size:9px;
  }

  .lot-box{
    height:58px;
    grid-template-columns:44px 1fr 44px;
    border-radius:7px;
  }

  .lot-box button{
    font-size:22px;
  }

  .lot-box strong{
    font-size:15px;
  }

  .lot-box span{
    font-size:9px;
  }

  /* -------------------------------------------------------
     MOBILE MARKETS SCREEN
     ------------------------------------------------------- */
  .watchlist{
    width:100%;
    min-height:calc(100dvh - 72px);
    border:0;
    border-radius:0;
    background:#000;
    grid-template-rows:78px 48px auto;
    box-shadow:none;
  }

  .watch-top{
    grid-template-columns:64px minmax(0,1fr) minmax(92px,.9fr) 54px;
    gap:8px;
    padding:15px 15px 12px;
    background:#000;
    border-bottom:1px solid #2b2d34;
  }

  .watch-toggle{
    gap:4px;
  }

  .watch-toggle button{
    width:31px;
    height:48px;
    border-radius:7px;
    font-size:17px;
  }

  .watch-toggle button:first-child{
    width:38px;
  }

  .search-box{
    height:48px;
    border-radius:7px;
    background:#17181e;
    padding:0 12px;
  }

  .search-box span{
    font-size:22px;
  }

  .search-box input{
    font-size:16px;
  }

  .watch-top select{
    height:48px;
    border-radius:7px;
    background:#17181e;
    font-size:15px;
    padding:0 12px;
  }

  .star{
    width:54px;
    height:48px;
    border-radius:7px;
    font-size:25px;
    background:#17181e;
  }

  .watch-head,
  .watch-row{
    grid-template-columns:minmax(130px,1.45fr) minmax(76px,.86fr) minmax(76px,.86fr) minmax(55px,.55fr) 26px;
    column-gap:5px;
  }

  .watch-head{
    height:48px;
    padding:0 16px;
    border-bottom:0;
    font-size:14px;
    color:#8d909b;
  }

  .watch-head span:nth-child(5),
  .watch-head span:nth-child(6){
    display:none;
  }

  .watch-head span:last-child{
    display:block;
  }

  .watch-body{
    overflow:visible;
  }

  .watch-row{
    min-height:73px;
    height:73px;
    padding:0 16px;
    border:0;
    font-size:14px;
  }

  .watch-row.selected{
    background:#15316f;
    box-shadow:none;
  }

  .watch-symbol{
    gap:8px;
  }

  .watch-symbol strong{
    font-size:14px;
  }

  .watch-flag{
    width:22px;
    font-size:15px;
  }

  .watch-price{
    font-size:14px;
  }

  .watch-spread{
    font-size:14px;
  }

  .watch-margin,
  .watch-leverage{
    display:none;
  }

  .watch-more{
    width:26px;
    height:34px;
    font-size:22px;
    color:#e1e2e5;
  }

  /* -------------------------------------------------------
     MOBILE TRADES / ACCOUNT SCREEN
     ------------------------------------------------------- */
  .bottom-panel{
    width:100%;
    min-width:0;
    min-height:calc(100dvh - 72px);
    height:auto;
    border-radius:0;
    background:#000;
    grid-template-rows:auto 52px minmax(0,1fr);
    overflow:visible;
  }

  .mobile-account-summary{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    padding:16px 15px 13px;
    background:#000;
  }

  .mobile-account-summary>div{
    min-width:0;
    min-height:83px;
    padding:12px 11px;
    border-radius:7px;
    background:#15161c;
    border:1px solid #17191f;
  }

  .mobile-account-summary span{
    display:block;
    color:#9296a2;
    font-size:12px;
  }

  .mobile-account-summary strong{
    display:block;
    margin-top:8px;
    color:#f0f1f3;
    font-size:15px;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .bottom-toolbar{
    display:block;
    min-height:52px;
    height:52px;
    background:#000;
    border-bottom:1px solid #555860;
    overflow:hidden;
  }

  .bottom-tabs{
    width:100%;
    height:52px;
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .bottom-tabs::-webkit-scrollbar{
    display:none;
  }

  .bottom-tabs button{
    flex:0 0 auto;
    height:52px;
    padding:0 15px;
    border-bottom:3px solid transparent;
    font-size:14px;
  }

  .bottom-tabs button.active{
    color:#3781ff;
    border-bottom-color:#e6e8ed;
  }

  .bottom-tabs span{
    min-width:24px;
    height:24px;
    margin-left:6px;
    border-radius:6px;
    background:#17191f;
    font-size:12px;
  }

  .account-metrics,
  .close-all,
  .grid-button{
    display:none!important;
  }

  .bottom-content{
    min-height:0;
    height:auto;
    overflow:visible;
    background:#000;
  }

  .bottom-view{
    min-height:calc(100dvh - 220px);
    height:auto;
  }

  .tl14-enter{
    display:block;
    height:auto;
    padding:42px 24px 46px;
    background:#000;
  }

  .tl14-intro{
    width:100%;
    height:auto;
    padding:0 10px;
    display:block;
    text-align:center;
  }

  .tl14-intro>strong{
    font-size:29px;
    line-height:1.25;
    letter-spacing:-.35px;
  }

  .tl14-account-status{
    margin:15px auto 0;
    justify-content:center;
    font-size:10px;
  }

  .tl14-card{
    width:calc(100% - 28px);
    height:168px;
    margin:30px auto 0;
    padding:26px 24px;
    border-radius:12px;
    display:grid;
    grid-template-columns:86px 1fr 22px;
    grid-template-rows:auto auto;
    column-gap:14px;
    align-items:center;
    background:linear-gradient(110deg,#1b1c22 0%,#15161b 72%);
    border:1px solid #30323a;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 8px 24px rgba(0,0,0,.20);
  }

  .tl14-card:after{
    content:"›";
    grid-column:3;
    grid-row:1/3;
    align-self:center;
    justify-self:end;
    color:#a5aab8;
    font-size:36px;
    font-weight:200;
    line-height:1;
    z-index:2;
  }

  .tl14-glow{
    left:-35px;
    top:-35px;
    width:190px;
    height:190px;
    opacity:.66;
  }

  .card-conditions .tl14-glow{
    opacity:.20;
  }

  .tl14-icon{
    grid-column:1;
    grid-row:1/3;
    width:72px;
    height:72px;
    align-self:center;
    justify-self:center;
  }

  .tl14-icon img{
    width:58px;
    height:58px;
  }

  .tl14-card>strong{
    grid-column:2;
    grid-row:1;
    align-self:end;
    font-size:20px;
  }

  .mobile-card-desc{
    display:block;
    grid-column:2;
    grid-row:2;
    align-self:start;
    margin-top:8px;
    max-width:310px;
    color:#9498a5;
    font-size:14px;
    line-height:1.35;
    z-index:2;
  }

  .tl14-spacer{
    display:none;
  }

  .tl14-links{
    width:calc(100% - 28px);
    height:auto;
    margin:42px auto 0;
    padding:25px 0 0;
    border-left:0;
    border-top:1px solid #31333a;
    overflow:visible;
  }

  .tl14-links-title{
    margin-bottom:14px;
    color:#b8bbc2;
    font-size:14px;
  }

  .tl14-links button{
    width:100%;
    min-height:41px;
    padding:9px 0;
    color:#4d85ff;
    font-size:13px;
  }

  .tl14-live-status{
    margin-top:18px;
    min-height:38px;
    font-size:10px;
  }

  /* Mobile tabular views: horizontal data surface, not crushed tables */
  .bottom-view:not(#enterView){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .bottom-view table{
    min-width:760px;
    font-size:11px;
  }

  .bottom-view th{
    height:42px;
    padding:0 12px;
  }

  .bottom-view td{
    height:46px;
    padding:0 12px;
  }

  .tl14-balance-view{
    min-width:620px;
  }

  /* -------------------------------------------------------
     Drawers / toasts on mobile
     ------------------------------------------------------- */
  .drawer{
    left:12px;
    right:12px;
    top:auto;
    bottom:18px;
    width:auto;
    max-height:68dvh;
    border-radius:12px;
  }

  .toast-stack{
    left:12px;
    right:12px;
    bottom:18px;
  }

  .toast{
    width:100%;
  }
}

/* Narrow iPhone widths */
@media (max-width:390px){
  .mobile-primary-nav{
    grid-template-columns:minmax(80px,1.05fr) minmax(77px,.96fr) minmax(77px,.96fr) 58px 44px;
  }

  .mobile-app-banner{
    padding-left:14px;
    padding-right:14px;
  }

  .mobile-get-btn{
    min-width:68px;
  }

  .mobile-account-summary{
    gap:6px;
    padding-left:10px;
    padding-right:10px;
  }

  .mobile-account-summary>div{
    padding-left:9px;
    padding-right:9px;
  }

  .mobile-account-summary span{
    font-size:10px;
  }

  .mobile-account-summary strong{
    font-size:13px;
  }

  .watch-head,
  .watch-row{
    grid-template-columns:minmax(118px,1.4fr) minmax(67px,.82fr) minmax(67px,.82fr) 47px 23px;
    padding-left:11px;
    padding-right:11px;
  }

  .tl14-enter{
    padding-left:14px;
    padding-right:14px;
  }

  .tl14-card{
    width:100%;
    grid-template-columns:72px 1fr 18px;
    column-gap:10px;
    padding-left:18px;
    padding-right:18px;
  }

  .tl14-icon{
    width:60px;
    height:60px;
  }

  .tl14-icon img{
    width:50px;
    height:50px;
  }

  .tl14-card>strong{
    font-size:18px;
  }

  .mobile-card-desc{
    font-size:12.5px;
  }

  .tl14-links{
    width:100%;
  }
}


/* =========================================================
   R18 — OFFICIAL TRADINGVIEW CHART + TRADEVAULT ACCENT
   The custom canvas stays underneath as an automatic fallback.
   ========================================================= */
:root{
  --tvault-accent:#d5a642;
  --tvault-accent-strong:#e5bd63;
  --tvault-accent-soft:rgba(213,166,66,.13);
  --tvault-accent-border:rgba(213,166,66,.46);
}

.tv-embed-host{
  position:absolute;
  inset:0;
  z-index:30;
  width:100%;
  height:100%;
  background:#09090b;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}

body.tv-chart-ready .tv-embed-host{
  opacity:1;
  pointer-events:auto;
}

/* Once TradingView is ready it becomes the chart itself. */
body.tv-chart-ready .chart-panel{
  grid-template-rows:minmax(0,1fr);
}

body.tv-chart-ready .top-toolbar,
body.tv-chart-ready .drawing-tools,
body.tv-chart-ready .symbol-bar,
body.tv-chart-ready #chartCanvas,
body.tv-chart-ready #overlayCanvas,
body.tv-chart-ready .price-tag,
body.tv-chart-ready .chart-logo,
body.tv-chart-ready .chart-footer{
  display:none!important;
}

body.tv-chart-ready .chart-area{
  min-height:0;
  height:100%;
}

/* Official widget container */
.tv-embed-host .tradingview-widget-container{
  width:100%;
  height:100%;
  background:#09090b;
}

.tv-embed-host .tradingview-widget-container__widget{
  width:100%;
  height:calc(100% - 23px);
}

.tv-embed-host .tradingview-widget-copyright{
  height:23px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 8px;
  background:#09090b;
  border-top:1px solid #17191e;
  font:10px/1.2 Arial,sans-serif;
  color:#6e737d;
}

.tv-embed-host .tradingview-widget-copyright a{
  color:#8d949f;
  text-decoration:none;
}

.tv-embed-host .tradingview-widget-copyright a:hover{
  color:#c8cdd4;
}

/* Small branding changes so shell is TradeVault, not TradeLocker-blue */
.watch-row.selected{
  background:linear-gradient(90deg,rgba(213,166,66,.18),rgba(213,166,66,.075));
  box-shadow:inset 2px 0 var(--tvault-accent);
}

.bottom-tabs button.active{
  color:var(--tvault-accent-strong);
  border-bottom-color:var(--tvault-accent);
}

.watch-toggle button.active{
  color:#f1d895;
  border-color:var(--tvault-accent-border);
  background:var(--tvault-accent-soft);
}

@media (max-width:767px){
  .mobile-primary-nav{
    height:73px;
  }

  .mobile-nav-tab.active{
    color:#f6f2e8;
    background:linear-gradient(180deg,rgba(213,166,66,.05),rgba(213,166,66,.085));
  }

  .mobile-nav-tab.active:after{
    background:var(--tvault-accent);
    box-shadow:0 0 8px rgba(213,166,66,.25);
  }

  .mobile-nav-tab.active .mobile-nav-icon{
    color:var(--tvault-accent-strong);
  }

  .mobile-brand-button{
    border-color:#34312a;
  }

  /* TradingView owns the complete portrait chart UI. */
  body.tv-chart-ready .chart-panel{
    display:block!important;
    width:100%;
    height:auto;
    min-height:0;
  }

  body.tv-chart-ready .chart-area{
    width:100%;
    height:calc(100dvh - 372px);
    min-height:505px;
    border-bottom:1px solid #2c2f35;
  }

  body.tv-chart-ready .tv-embed-host{
    position:absolute;
    inset:0;
  }

  body[data-mobile-screen="chart"].tv-chart-ready .right-stack{
    display:block!important;
  }

  /* Markets should read like the supplied mobile reference. */
  body[data-mobile-screen="markets"] .watch-row.selected{
    background:linear-gradient(90deg,rgba(213,166,66,.23),rgba(135,99,26,.18));
    box-shadow:inset 3px 0 var(--tvault-accent);
  }

  .watch-toggle button.active{
    background:#211d14;
    color:#f1d895;
  }

  /* Trades screen tab line becomes branded but keeps reference geometry. */
  .bottom-tabs button.active{
    color:#e5bd63;
    border-bottom-color:#e5bd63;
  }

  .mobile-app-logo{
    border-color:#4b4434;
  }

  .mobile-get-btn{
    background:linear-gradient(180deg,#d9ac4d,#bd8730);
    color:#11100d;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  }
}

@media (max-width:390px){
  body.tv-chart-ready .chart-area{
    height:calc(100dvh - 360px);
    min-height:490px;
  }
}

/* Flask shell bridge */
.drawer-action{width:100%;height:42px;border:1px solid #34343b;background:#17171d;color:#f2f2f4;border-radius:8px;cursor:pointer;font-weight:700;margin-top:8px}
.drawer-action:hover{background:#202027;border-color:#555560}