/* Live Room — only the bits NOT covered by the Trade-tab stylesheet
   (login, lobby, leaderboard drawer, news banner). The trading area itself
   is styled entirely by trade-style.css so it matches the Trade tab exactly. */

:root{ --lr-gold:#e8b84b; --lr-mint:#39d6b0; --lr-line:#2a2f3a; --lr-panel:#1e2430; --lr-muted:#9aa0a6; }

.hidden{display:none !important}
.muted{color:var(--lr-muted)}
.msg{min-height:18px;color:var(--lr-muted);font-size:13px;margin-top:8px}
.msg a{color:#9ac1ff}

/* top bar */
.lr-topbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  padding:10px 18px;background:#161a22;border-bottom:1px solid var(--lr-line)}
.lr-brand{font-family:"Baloo 2",sans-serif;font-weight:700;letter-spacing:.3px;color:#e6e6e6}
.lr-brand .lr-tag{color:var(--lr-gold);font-size:11px;border:1px solid var(--lr-gold);padding:2px 6px;border-radius:6px;margin-left:8px}
.lr-top-right{font-size:13px;color:var(--lr-muted)}
.lr-top-right a{color:var(--lr-gold)}

/* login + lobby views */
.lr-view{flex:1 1 auto;display:block;padding:24px;overflow:auto}
.lr-centered{display:flex;justify-content:center;align-items:flex-start}
.lr-card{background:var(--lr-panel);border:1px solid var(--lr-line);border-radius:14px;padding:24px;max-width:460px;width:100%}
.lr-card h2{margin:0 0 6px;font-family:"Baloo 2",sans-serif}
.lr-auth-card input{width:100%;padding:12px;margin:10px 0;background:#0f141f;border:1px solid var(--lr-line);border-radius:10px;color:#e6e6e6;font-size:16px}
.lr-btn{cursor:pointer;border:none;border-radius:10px;padding:12px 16px;font-weight:700;font-size:15px;width:100%;font-family:"Baloo 2",sans-serif}
.lr-btn-primary{background:var(--lr-gold);color:#1a1205}
.lr-btn-ghost{background:transparent;color:var(--lr-muted);margin-top:8px}
.lr-btn:disabled{opacity:.5;cursor:not-allowed}
.seg{display:flex;gap:6px;background:#0f141f;border:1px solid var(--lr-line);border-radius:10px;padding:4px;margin:4px 0 10px}
.seg-btn{flex:1;background:transparent;border:none;color:var(--lr-muted);padding:8px;border-radius:7px;cursor:pointer;font-weight:700;font-size:14px}
.seg-btn.active{background:var(--lr-gold);color:#1a1205}
.lobby-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.lobby-item{display:flex;justify-content:space-between;align-items:center;padding:14px;border:1px solid var(--lr-line);border-radius:10px;background:#0f141f;cursor:pointer}
.lobby-item .st{font-size:12px;padding:2px 8px;border-radius:20px}
.st.live{background:rgba(38,166,154,.16);color:#26a69a}
.st.scheduled{background:rgba(232,184,75,.16);color:var(--lr-gold)}
.lobby-when{font-size:12px;color:var(--lr-gold)}

/* room shell fills the viewport under the top bar (trade-style body is flex col) */
#view-room{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;width:100%}

/* news banner */
.news-banner{margin:8px 14px 0;padding:9px 12px;border-radius:8px;background:rgba(58,134,255,.12);
  border:1px solid rgba(58,134,255,.32);color:#bcd8ff;font-size:14px;flex:0 0 auto}

/* leaderboard drawer */
.lb-drawer{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end;background:rgba(4,6,12,.55)}
.lb-drawer-panel{width:min(360px,90%);height:100%;background:var(--lr-panel);border-left:1px solid var(--lr-line);
  padding:16px;overflow:auto;box-shadow:-14px 0 40px rgba(0,0,0,.4)}
.lb-drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.lb-drawer-head h3{margin:0;font-family:"Teko",sans-serif;font-size:24px;letter-spacing:.5px}
.leaderboard{display:flex;flex-direction:column;gap:6px}
.lb-row{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:8px;border-radius:8px;background:#0f141f}
.lb-row.me{outline:1px solid var(--lr-gold)}
.lb-rank{font-weight:800;color:var(--lr-muted);text-align:center;font-family:"Teko",sans-serif}
.lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-name .member{color:var(--lr-gold);font-size:11px}
.lb-eq{font-weight:700}
.lb-row .up{color:#26a69a}.lb-row .down{color:#ef5350}

/* order modal: market-only tweaks */
.order-qty-hint{font-size:12px;color:var(--lr-muted);margin:4px 0 2px}

/* positions cell coloring (Trade tab styles the table; these add side/pnl colors) */
.side-tag{font-weight:700}
.side-tag.BUY{color:#26a69a}
.side-tag.SELL{color:#ef5350}
#positions-body td.up{color:#26a69a}
#positions-body td.down{color:#ef5350}
.btn-exit{padding:5px 12px;font-size:12px;border-radius:8px}
#positions-body td{white-space:nowrap}