/* ══════════════════════════════════════════════════════════════════════════
   orderflow.css — "Order Flow" VIP suite (inside the Liquidity Radar page)
   Uses the app's existing theme tokens (--bg/--green/--red/--border2/--ccm …)
   so it tracks both the dark and light themes automatically.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── sub-tab bar : Overview | Order Flow ─────────────────────────────────── */
.of-subtabs{
  display:flex;gap:6px;align-items:center;
  margin:0 0 14px;padding:5px;border-radius:14px;
  background:var(--bg2);border:1px solid var(--border);
  width:max-content;max-width:100%;
}
.of-subtab{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ccm,ui-monospace,monospace);font-size:12px;font-weight:800;
  letter-spacing:.4px;color:var(--text2);
  background:transparent;border:0;border-radius:10px;
  padding:9px 16px;cursor:pointer;transition:all .16s ease;white-space:nowrap;
}
.of-subtab:hover{color:var(--text);background:var(--bg3);}
.of-subtab.on{
  color:#06121f;
  background:linear-gradient(135deg,var(--green),#38e5c4);
  box-shadow:0 4px 16px rgba(0,212,170,.28);
}
.of-subtab .of-bolt{width:14px;height:14px;fill:currentColor;}
.of-subtab .of-vippill{
  font-size:8.5px;font-weight:900;letter-spacing:.6px;
  padding:2px 6px;border-radius:6px;
  background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-bd);
}
.of-subtab.on .of-vippill{background:rgba(6,18,31,.18);color:#06121f;border-color:transparent;}

/* ── suite shell ─────────────────────────────────────────────────────────── */
.of-root{padding:0 4px 40px;animation:ofFade .22s ease;}
@keyframes ofFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.of-toolbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.of-tooltabs{display:flex;flex-wrap:wrap;gap:6px;}
.of-tooltab{
  position:relative;font-family:var(--ccm,monospace);font-size:11.5px;font-weight:700;
  color:var(--text2);background:var(--bg2);border:1px solid var(--border);
  border-radius:9px;padding:8px 13px;cursor:pointer;transition:all .15s ease;white-space:nowrap;
}
.of-tooltab:hover{color:var(--text);border-color:var(--border2);}
.of-tooltab.on{
  color:var(--green);border-color:var(--green-bd);
  background:var(--green-bg);box-shadow:inset 0 0 0 1px var(--green-bd);
}
.of-tooltab.soon{opacity:.72;}
.of-tooltab .of-soon{
  margin-left:6px;font-size:8px;font-weight:900;letter-spacing:.5px;
  color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-bd);
  padding:1px 5px;border-radius:5px;vertical-align:middle;
}

/* status pill */
.of-status{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ccm,monospace);font-size:11px;font-weight:700;color:var(--text2);
  background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:7px 12px;
}
.of-dot{width:8px;height:8px;border-radius:50%;background:var(--text2);flex:0 0 auto;}
.of-dot.ok{background:var(--green);box-shadow:0 0 8px var(--green);animation:ofPulse 1.4s ease-in-out infinite;}
.of-dot.c{background:var(--gold);box-shadow:0 0 8px var(--gold);animation:ofPulse 1s ease-in-out infinite;}
.of-dot.e{background:var(--red);box-shadow:0 0 8px var(--red);animation:ofPulse .7s ease-in-out infinite;}
@keyframes ofPulse{0%,100%{opacity:1}50%{opacity:.35}}
.of-eps{color:var(--green);font-weight:800;}

/* headline strip */
.of-headline{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;
  padding:12px 16px;margin-bottom:14px;border-radius:12px;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  border:1px solid var(--border);
}
.of-hpair{font-family:var(--ccm,monospace);font-size:14px;font-weight:900;color:var(--text);letter-spacing:.5px;}
.of-hmid{font-family:var(--ccm,monospace);font-size:22px;font-weight:900;color:var(--green);letter-spacing:-.5px;}
.of-hspread{font-family:var(--ccm,monospace);font-size:11px;color:var(--text2);}
.of-hsrc{
  margin-left:auto;font-family:var(--ccm,monospace);font-size:9px;font-weight:800;letter-spacing:1px;
  color:var(--text2);background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:4px 8px;
}

/* panels */
.of-panel{display:none;}
.of-panel.on{display:block;}

/* ── Live Order Book ─────────────────────────────────────────────────────── */
.of-lob-ctrls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:10px;}
.of-ctl{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ccm,monospace);font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--text2);
}
.of-ctl select{
  font-family:var(--ccm,monospace);font-size:11px;font-weight:700;color:var(--text);
  background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:6px 9px;cursor:pointer;
}
.of-lob-imbwrap{display:flex;align-items:center;gap:9px;margin-left:auto;min-width:190px;}
.of-imblbl{font-family:var(--ccm,monospace);font-size:10px;color:var(--text2);white-space:nowrap;}
.of-imblbl .up{color:var(--green);} .of-imblbl .dn{color:var(--red);}
.of-imbbar{flex:1;display:flex;height:6px;border-radius:4px;overflow:hidden;background:var(--bg3);min-width:90px;}
.of-imbbar .b{background:var(--green);transition:width .25s ease;}
.of-imbbar .a{background:var(--red);transition:width .25s ease;}

.of-lob-heads{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;
  font-family:var(--ccm,monospace);font-size:9.5px;font-weight:800;letter-spacing:.6px;color:var(--text2);
  padding:0 10px 6px;border-bottom:1px solid var(--border);
}
.of-lob-heads .r{text-align:right;}

.of-lob-book{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:6px;overflow:hidden;
}
.of-asks,.of-bids{display:flex;flex-direction:column;}

.of-row{
  position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;align-items:center;
  height:22px;padding:0 10px;font-family:var(--ccm,monospace);font-size:11px;overflow:hidden;
}
.of-row .of-bar{
  position:absolute;top:1px;bottom:1px;right:0;border-radius:4px;z-index:0;opacity:.16;transition:width .18s ease;
}
.of-row.ask .of-bar{background:var(--red);}
.of-row.bid .of-bar{background:var(--green);}
.of-row .of-p,.of-row .of-s,.of-row .of-c{position:relative;z-index:1;}
.of-row .of-p{font-weight:800;}
.of-row.ask .of-p{color:var(--red);}
.of-row.bid .of-p{color:var(--green);}
.of-row .of-s{text-align:right;color:var(--text);}
.of-row .of-c{text-align:right;color:var(--text2);}
.of-row.wall .of-s{color:var(--gold);font-weight:900;}
.of-row.wall .of-bar{opacity:.30;}
/* flash on size change */
.of-row.f-up{animation:ofFlashUp .5s ease;}
.of-row.f-dn{animation:ofFlashDn .5s ease;}
@keyframes ofFlashUp{0%{background:rgba(0,212,170,.28)}100%{background:transparent}}
@keyframes ofFlashDn{0%{background:rgba(255,71,87,.28)}100%{background:transparent}}

.of-lob-mid{
  display:flex;align-items:center;justify-content:center;gap:14px;
  height:34px;margin:3px 0;border-radius:8px;
  background:var(--bg3);border:1px solid var(--border);
}
.of-lob-mid #ofMidPx{font-family:var(--ccm,monospace);font-size:15px;font-weight:900;color:var(--green);}
.of-midspread{font-family:var(--ccm,monospace);font-size:10px;color:var(--text2);}

.of-empty{
  padding:26px 10px;text-align:center;color:var(--text2);
  font-family:var(--ccm,monospace);font-size:11px;
}

/* ── "arriving next module" cards ────────────────────────────────────────── */
.of-soon-card{
  text-align:center;max-width:520px;margin:40px auto;padding:34px 26px;
  background:var(--bg2);border:1px dashed var(--border2);border-radius:16px;
}
.of-soon-ic{width:46px;height:46px;margin:0 auto 14px;color:var(--gold);opacity:.9;}
.of-soon-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;}
.of-soon-card h3{font-size:16px;font-weight:800;color:var(--text);margin:0 0 8px;}
.of-soon-card p{font-size:12.5px;line-height:1.6;color:var(--text2);margin:0;}

/* ── VIP lock ────────────────────────────────────────────────────────────── */
.of-locked{
  position:relative;overflow:hidden;text-align:center;
  max-width:560px;margin:36px auto;padding:46px 30px;
  background:var(--bg2);border:1px solid var(--border);border-radius:20px;
}
.of-locked-glow{
  position:absolute;inset:-40% -10% auto;height:220px;pointer-events:none;
  background:radial-gradient(circle at 50% 0,rgba(0,212,170,.20),transparent 60%);
}
.of-lock-ic{width:54px;height:54px;margin:0 auto 16px;color:var(--gold);position:relative;}
.of-lock-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;}
.of-locked h2{font-size:20px;font-weight:900;color:var(--text);margin:0 0 10px;position:relative;}
.of-locked p{font-size:13px;line-height:1.65;color:var(--text2);margin:0 auto 22px;max-width:440px;position:relative;}
.of-unlock-btn{
  position:relative;font-family:var(--ccm,monospace);font-size:13px;font-weight:900;letter-spacing:.5px;
  color:#06121f;background:linear-gradient(135deg,var(--gold),var(--gold2));
  border:0;border-radius:11px;padding:13px 30px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:0 6px 22px rgba(245,179,1,.32);
}
.of-unlock-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(245,179,1,.42);}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .of-headline{gap:10px;padding:10px 12px;}
  .of-hmid{font-size:18px;}
  .of-lob-imbwrap{margin-left:0;width:100%;}
  .of-toolbar{flex-direction:column;align-items:stretch;}
  .of-status{align-self:flex-start;}
  .of-row{height:24px;font-size:11.5px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   Tool 3 — Liquidity Walls
   ═════════════════════════════════════════════════════════════════════════ */
.of-wall-ctrls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:12px;}
.of-seg{display:inline-flex;background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.of-seg span{
  font-family:var(--ccm,monospace);font-size:11px;font-weight:700;color:var(--text2);
  padding:6px 11px;cursor:pointer;transition:all .14s ease;
}
.of-seg span:hover{color:var(--text);}
.of-seg span.on{color:#06121f;background:var(--green);}
.of-wall-note{font-family:var(--ccm,monospace);font-size:10px;color:var(--text2);opacity:.8;margin-left:auto;max-width:340px;line-height:1.4;}

/* stat cards */
.of-wall-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
.of-stat{
  background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:11px 13px;
  display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden;
}
.of-stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--border2);}
.of-stat.bid::before{background:var(--green);}
.of-stat.ask::before{background:var(--red);}
.of-stat-l{font-family:var(--ccm,monospace);font-size:9.5px;font-weight:700;letter-spacing:.5px;color:var(--text2);text-transform:uppercase;}
.of-stat-b{font-family:var(--ccm,monospace);font-size:17px;font-weight:900;color:var(--text);}
.of-stat.bid .of-stat-b{color:var(--green);} .of-stat.ask .of-stat-b{color:var(--red);}
.of-stat-s{font-family:var(--ccm,monospace);font-size:10px;color:var(--text2);}

/* body : rail + two columns */
.of-wall-body{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:stretch;}
.of-wall-rail{
  position:relative;min-height:340px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,71,87,.05),transparent 45%,transparent 55%,rgba(0,212,170,.05));
  border:1px solid var(--border);overflow:hidden;
}
.of-rail-mid{position:absolute;left:0;right:0;top:50%;height:0;border-top:1px dashed var(--border2);}
.of-rail-mid span{
  position:absolute;right:3px;top:-8px;font-family:var(--ccm,monospace);font-size:8px;font-weight:800;
  color:var(--text2);background:var(--bg);padding:0 3px;border-radius:3px;
}
.of-rail-tick{position:absolute;left:0;height:5px;border-radius:0 3px 3px 0;transform:translateY(-50%);transition:top .4s ease,width .4s ease;}
.of-rail-tick.ask{background:var(--red);opacity:.55;}
.of-rail-tick.bid{background:var(--green);opacity:.55;}
.of-rail-tick.inst{opacity:1;box-shadow:0 0 8px currentColor;height:6px;}
.of-rail-tick.inst.ask{background:var(--red);}
.of-rail-tick.inst.bid{background:var(--green);}
.of-rail-tick.susp{background:var(--gold)!important;opacity:.5;}
.of-rail-tick.fade{opacity:.28;}

.of-wall-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.of-wall-col{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:8px;min-width:0;}
.of-wall-h{font-family:var(--ccm,monospace);font-size:10px;font-weight:800;letter-spacing:.5px;padding:4px 6px 8px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.of-wall-h.ask{color:var(--red);} .of-wall-h.bid{color:var(--green);}
.of-wall-list{display:flex;flex-direction:column;gap:3px;}

.of-wrow{
  position:relative;display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;
  padding:7px 9px;border-radius:8px;font-family:var(--ccm,monospace);font-size:11px;overflow:hidden;
  background:var(--bg3);
}
.of-wrow .of-wbar{position:absolute;left:0;top:0;bottom:0;z-index:0;opacity:.14;border-radius:8px;transition:width .4s ease;}
.of-wrow.ask .of-wbar{background:var(--red);} .of-wrow.bid .of-wbar{background:var(--green);}
.of-wrow.inst .of-wbar{opacity:.26;}
.of-wrow.fade{opacity:.55;}
.of-wrow>span{position:relative;z-index:1;}
.of-wpx{font-weight:800;}
.of-wrow.ask .of-wpx{color:var(--red);} .of-wrow.bid .of-wpx{color:var(--green);}
.of-wusd{font-weight:900;color:var(--text);}
.of-wdist{color:var(--text2);font-size:10px;text-align:right;}
.of-wage{color:var(--text2);font-size:10px;text-align:right;}
.of-wtag{
  grid-column:1/-1;justify-self:start;font-size:8.5px;font-weight:900;letter-spacing:.5px;
  padding:1px 6px;border-radius:5px;margin-top:2px;
}
.of-wtag.inst{color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-bd);}
.of-wtag.rest{color:var(--text2);background:var(--bg4);}
.of-wtag.new{color:var(--green);background:var(--green-bg);border:1px solid var(--green-bd);}
.of-wtag.fade{color:var(--text2);background:transparent;border:1px dashed var(--border2);}
.of-wtag.susp{color:#ffb020;background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.35);}

@media (max-width:720px){
  .of-wall-stats{grid-template-columns:repeat(2,1fr);}
  .of-wall-body{grid-template-columns:1fr;}
  .of-wall-rail{min-height:120px;order:2;}
  .of-wall-cols{grid-template-columns:1fr;}
}