/* ============================================================
   FACTOR TERMINAL — self-custody trading UI (Robinhood green/black)
   Depends on :root vars + fonts from styles.css
   ============================================================ */

.terminal-body{ overflow-x: hidden; }

/* ---- top bar extras ---- */
.term-topbar{ gap: 18px; flex-wrap: wrap; row-gap: 8px; }
.term-tag{ font-size: 10px; letter-spacing: 0.24em; color: #000; background: var(--blue); padding: 2px 7px; margin-left: 4px; }
.term-head-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.net-chip{ font-size: 10.5px; color: var(--blue); letter-spacing: 0.08em; }
.mode-chip{ font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-soft); border: 1px solid var(--rule-dark); padding: 3px 9px; }
.mode-chip.live{ color: #000; background: var(--red); border-color: var(--red); font-weight: 600; }
.addr-chip, .lock-btn{
  font-family: var(--mono); font-size: 11px; background: none; border: 1px solid var(--rule-dark);
  color: var(--ink-soft); padding: 4px 10px; cursor: pointer;
}
.addr-chip:hover, .lock-btn:hover{ border-color: var(--blue); color: var(--blue); }

/* ---- risk banner ---- */
.risk-banner{
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(255,80,0,0.13); border-bottom: 1px solid rgba(255,80,0,0.5);
  padding: 10px 20px; font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft);
}
.rb-icon{ color: var(--red); font-size: 15px; line-height: 1.2; }
.rb-text{ flex: 1; line-height: 1.5; }
.rb-text strong{ color: var(--ink); }
.rb-x{ background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }

/* ---- main 3-col grid ---- */
.term-main{
  display: grid; grid-template-columns: 300px 1fr 320px; gap: 1px;
  background: var(--rule); min-height: calc(100vh - 52px);
}
.panel{ background: var(--paper); padding: 16px 16px 22px; min-width: 0; }
.panel-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-head h2{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--ink-soft); font-weight: 500; }
.panel-foot{ font-size: 10.5px; color: var(--muted); margin-top: 12px; letter-spacing: 0.04em; }
.sub-h{ font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--muted); margin: 22px 0 10px; border-top: 1px solid var(--rule); padding-top: 14px; display: flex; align-items: center; gap: 10px; }

.term-input{
  font-family: var(--mono); font-size: 13px; padding: 8px 10px; width: 100%;
  background: var(--panel); border: 1px solid var(--rule-dark); color: var(--ink);
}
.term-input:focus-visible{ outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
.term-input.big{ font-size: 20px; padding: 12px; }
.mini-btn{ font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; background: none; border: 1px solid var(--rule-dark); color: var(--ink-soft); padding: 5px 9px; cursor: pointer; }
.mini-btn:hover{ border-color: var(--blue); color: var(--blue); }
.mini-btn.danger:hover{ border-color: var(--red); color: var(--red); }
.mini-btn.ghost{ border: none; color: var(--muted); margin-left: auto; padding: 2px 4px; }

/* ---- markets ---- */
.markets .term-input{ flex: 1; }
.mkt-list{ display: flex; flex-direction: column; max-height: calc(100vh - 190px); overflow-y: auto; }
.mkt-cat{ display:flex; align-items:center; gap:9px; width:100%; padding:11px 4px 9px; background:none; border:none;
  border-bottom:1px solid var(--rule-dark); cursor:pointer; text-align:left; }
.mkt-cat.static{ cursor:default; margin-top:6px; }
.cat-caret{ font-size:9px; color:var(--blue); transition:transform .15s; display:inline-block; }
.mkt-cat:not(.open) .cat-caret{ transform:rotate(-90deg); }
.cat-name{ font-size:11px; letter-spacing:0.14em; color:var(--blue); }
.mkt-cat.static .cat-name{ color:var(--muted); }
.cat-count{ margin-left:auto; font-size:10.5px; color:var(--muted); }
.mkt-cat:not(.static):hover .cat-name{ color:#2EDB33; }
.mkt-row{
  display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px;
  background: none; border: none; border-bottom: 1px solid var(--rule); padding: 9px 4px;
  cursor: pointer; text-align: left; color: var(--ink); transition: background .1s;
}
.mkt-row:hover{ background: var(--hover); }
.mkt-row.active{ background: rgba(0,200,5,0.09); box-shadow: inset 2px 0 0 var(--blue); }
.mr-tk{ font-size: 12.5px; font-weight: 500; }
.mr-pre{ color: var(--muted); }
.mr-nm{ font-family: var(--sans); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-px{ font-size: 11.5px; color: var(--ink-soft); }

/* ---- trade / chart ---- */
.trade-head{ display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--rule); padding-bottom: 14px; margin-bottom: 14px; }
.th-tk{ font-family: var(--serif); font-size: 30px; font-weight: 500; }
.th-tk .mr-pre{ color: var(--muted); font-size: 0.6em; }
.th-nm{ display: block; font-family: var(--sans); font-size: 12px; color: var(--muted); margin-top: 2px; }
.th-right{ text-align: right; }
.th-px{ font-family: var(--mono); font-size: 24px; color: var(--blue); }
.th-src{ display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.chart-frame{ border: 1px solid var(--rule); background: var(--panel); padding: 12px; position: relative; }
.chart-frame svg{ display: block; width: 100%; }
.full-chart{ display: inline-block; margin-top: 8px; font-size: 11px; color: var(--blue); text-decoration: none; }
.full-chart:hover{ text-decoration: underline; }
.chart-cap{ font-size: 10.5px; color: var(--muted); margin: 8px 0 18px; }

/* ---- ticket ---- */
.ticket{ border: 1px solid var(--rule-dark); background: var(--panel); padding: 16px; }
.side-toggle{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
.side-btn{ font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; padding: 10px; background: none; border: 1px solid var(--rule-dark); color: var(--ink-soft); cursor: pointer; font-weight: 600; }
.side-btn.buy.active{ background: var(--blue); color: #000; border-color: var(--blue); }
.side-btn.sell.active{ background: var(--red); color: #000; border-color: var(--red); }
.fld{ display: block; margin-bottom: 14px; }
.fld-l{ display: block; font-size: 10px; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 6px; }
.fld-bal{ display: block; font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.fld-bal.good{ color: var(--blue); } .fld-bal.bad{ color: var(--red); }
.fld-row{ display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; }
.fld.small{ margin-bottom: 0; }
.quote-box{ border: 1px solid var(--rule); padding: 8px 12px; }
.q-l{ display: block; font-size: 9.5px; letter-spacing: 0.12em; color: var(--muted); }
.q-v{ display: block; font-size: 16px; color: var(--ink); margin-top: 3px; }
.q-min{ display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.route-line{ font-size: 10px; color: var(--muted); margin: 12px 0; min-height: 12px; letter-spacing: 0.03em; }

.live-gate{ margin: 14px 0; }
.live-toggle{ display: flex; align-items: center; gap: 10px; cursor: pointer; }
.live-toggle input{ position: absolute; opacity: 0; }
.lt-track{ width: 38px; height: 20px; border-radius: 12px; background: var(--rule-dark); position: relative; transition: background .15s; flex-shrink: 0; }
.lt-dot{ position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-soft); transition: transform .15s; }
.live-toggle input:focus-visible + .lt-track{ outline: 2px solid var(--blue); outline-offset: 2px; }
.live-toggle input:checked + .lt-track{ background: var(--red); }
.live-toggle input:checked + .lt-track .lt-dot{ transform: translateX(18px); background: #000; }
.lt-l{ font-size: 11px; color: var(--ink-soft); }
.confirm-in{ margin-top: 10px; border-color: var(--red); }

.act-btn{
  width: 100%; font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 12px; background: var(--blue); color: #000; border: none; cursor: pointer; transition: background .15s;
}
.act-btn:hover{ background: #2EDB33; }
.act-btn:disabled{ background: var(--rule-dark); color: var(--muted); cursor: not-allowed; }
.act-btn.live{ background: var(--red); }
.act-btn.live:hover{ background: #FF6A28; }
.act-btn.live:disabled{ background: var(--rule-dark); color: var(--muted); }
.act-btn.primary{ background: var(--blue); }
.act-btn.danger{ background: var(--red); color: #000; }
.ticket-msg{ font-family: var(--mono); font-size: 11.5px; margin-top: 12px; line-height: 1.7; color: var(--ink-soft); word-break: break-word; }
.ticket-msg.ok{ color: var(--blue); } .ticket-msg.warn{ color: var(--ochre); } .ticket-msg.bad{ color: var(--red); }
.ticket-msg a{ color: var(--blue); }

/* ---- wallet ---- */
.bal-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.bal{ background: var(--panel); padding: 12px; }
.bal-k{ display: block; font-size: 10px; letter-spacing: 0.1em; color: var(--muted); }
.bal-v{ display: block; font-size: 18px; color: var(--ink); margin-top: 4px; }
.wallet-actions{ display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.pos-list, .hist-list{ display: flex; flex-direction: column; }
.empty{ font-size: 11px; color: var(--muted); padding: 8px 0; }
.pos-row{ display: flex; justify-content: space-between; background: none; border: none; border-bottom: 1px solid var(--rule); padding: 8px 2px; cursor: pointer; color: var(--ink); font-size: 12.5px; }
.pos-row:hover{ background: var(--hover); }
.pos-row .mr-pre{ color: var(--muted); }
.hist-row{ display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--rule); font-size: 11px; text-decoration: none; align-items: center; }
.hist-row:hover{ background: var(--hover); }
.hk-buy{ color: var(--blue); } .hk-sell{ color: var(--red); } .hk-app{ color: var(--muted); }
.hk-amt{ color: var(--ink-soft); text-align: right; }
.hk-h{ color: var(--muted); }

/* ---- overlays ---- */
.ov[hidden]{ display: none !important; }
.ov{ position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.82); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.ov-card{ background: var(--surface); border: 1px solid var(--surface-brd); border-top: 2px solid var(--blue); outline: 1px solid rgba(0,200,5,0.45); outline-offset: 4px; max-width: 560px; width: 100%; padding: clamp(24px, 4vw, 42px); position: relative; box-shadow: 0 30px 90px -18px rgba(0,0,0,0.92), 0 0 52px -8px rgba(0,200,5,0.16); }
.ov-card.narrow{ max-width: 440px; }
.ov-x{ position: absolute; top: 14px; right: 14px; background: none; border: 1px solid var(--rule-dark); color: var(--ink-soft); font-size: 15px; width: 28px; height: 28px; cursor: pointer; line-height: 1; }
.ov-x:hover{ border-color: var(--blue); color: var(--blue); }
.ov-series{ font-size: 10px; letter-spacing: 0.22em; color: var(--blue); }
.ov-title{ font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3.4vw, 32px); margin: 8px 0 12px; }
.ov-sub{ color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.ov-sub em{ color: var(--ink); font-style: italic; }
.ov-sub a{ color: var(--blue); }
.ov-fine{ font-size: 11px; color: var(--muted); margin-top: 12px; min-height: 14px; }

.ob-tabs{ display: flex; gap: 6px; margin-bottom: 16px; }
.ob-tab{ font-family: var(--mono); font-size: 12px; padding: 8px 16px; background: none; border: 1px solid var(--rule-dark); color: var(--muted); cursor: pointer; }
.ob-tab.active{ background: var(--blue); color: #000; border-color: var(--blue); font-weight: 600; }
.ob-pane{ margin-bottom: 8px; }
.gen-out{ margin-top: 14px; }
.kv{ border: 1px solid var(--rule); padding: 10px 12px; margin-bottom: 10px; }
.kv-k{ display: block; font-size: 9.5px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 5px; }
.kv-v{ font-size: 12px; word-break: break-all; color: var(--ink); }
.kv.secret{ border-color: rgba(0,200,5,0.35); background: rgba(0,200,5,0.05); }
.kv-v.seed{ color: var(--blue); line-height: 1.7; }
.ack{ display: flex; align-items: flex-start; gap: 8px; font-family: var(--sans); font-size: 12px; color: var(--ink-soft); margin-top: 8px; cursor: pointer; }
.ob-pw{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
@media (max-width: 480px){ .ob-pw{ grid-template-columns: 1fr; } }
.ob-progress{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.obp-bar, .obp-bar#unpBar{ height: 4px; background: var(--blue); width: 0; transition: width .1s; flex: 1; }
.ob-progress{ background: var(--rule); }
.obp-t{ font-size: 10px; color: var(--muted); white-space: nowrap; padding-right: 6px; }
.link-btn{ background: none; border: none; color: var(--muted); font-size: 11px; text-decoration: underline dotted; cursor: pointer; margin-top: 14px; }
.link-btn:hover{ color: var(--red); }
.addr-box{ border: 1px solid var(--rule-dark); background: var(--panel); padding: 12px; font-size: 12px; word-break: break-all; color: var(--ink); margin-bottom: 14px; }
.secret-box{ border-color: rgba(255,80,0,0.4); background: rgba(255,80,0,0.05); }
.modal-btns{ display: flex; align-items: center; gap: 16px; }
.modal-btns .act-btn{ width: auto; padding: 10px 22px; }

/* ---- responsive ---- */
@media (max-width: 1000px){
  .term-main{ grid-template-columns: 1fr; }
  .panel{ border-bottom: 1px solid var(--rule); }
  .mkt-list{ max-height: 320px; }
  .topnav{ display: none; }
}