[hidden] { display: none !important; }
.utility-page { display: block; height: auto; min-height: 100vh; overflow: auto; }
.utility-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 1rem 1.5rem; gap: 1rem; }
.utility-header .wordmark { font-size: 23px; text-decoration: none; }
.utility-header nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.utility-main { max-width: 1280px; margin: 0 auto; padding: 1.7rem; }
.utility-main h1 { font: 400 36px 'Source Serif 4',Georgia,serif; margin-bottom: .6rem; }
.utility-intro { font-size: 13px; color: var(--muted); line-height: 1.7; margin: .8rem 0; }
.utility-intro a { text-decoration: underline; }
.utility-filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: end; gap: .8rem; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.utility-main label { font-size: 12px; color: var(--muted); }
.utility-main label .field { display: block; margin-top: .35rem; }
.utility-tools { display: flex; align-items: end; gap: .7rem; flex-wrap: wrap; margin: 1rem 0; }
.utility-table-wrap { overflow-x: auto; }
.utility-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.utility-table th { color: var(--muted); font-weight: 500; text-align: left; }
.utility-table th,.utility-table td { padding: .7rem .6rem; border-bottom: 1px solid var(--line); }
.live-layout { display: grid; grid-template-columns: minmax(0,1fr) 21rem; gap: 1.2rem; align-items: start; }
.live-side { display: grid; gap: 1rem; }
.live-side .pm-stats dd { font-size: 15px; }
@media (max-width: 900px) { .utility-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } .live-layout { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .utility-main { padding: 1rem; } .utility-filters { grid-template-columns: 1fr; } }
/* One accent for the primary lobby actions in each theme. */
:root, :root[data-theme="light"] { --action-fill: #8A6A1F; --action-hover: #755A1A; }
:root[data-theme="black"] { --action-fill: #2F6FEB; --action-hover: #245FCF; }
:root[data-theme="navy"] { --action-fill: #5D66E8; --action-hover: #5059D1; }
.btn.btn-primary, .btn.btn-gold, #lobby-screen .btn-primary, #lobby-screen .btn-gold { background: var(--action-fill); color: #fff; }
.btn.btn-primary:hover, .btn.btn-gold:hover, #lobby-screen .btn-primary:hover, #lobby-screen .btn-gold:hover { background: var(--action-hover); }
.arena-row { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; }
#arena-panel .btn { margin-top: .8rem; }
#trading-screen.is-algorithmic #order-entry-panel { display: none !important; }
#trading-screen.is-algorithmic .positions-panel { min-height: 26rem; }
#trading-screen.is-algorithmic .trading-grid { grid-template-columns: minmax(0, 7fr) minmax(15rem, 2.3fr) minmax(17rem, 2.4fr); }
#trading-screen > header { height: auto; min-height: 3rem; padding-top: .45rem; padding-bottom: .45rem; gap: .5rem; flex-wrap: wrap; }
#trading-screen > header > div { flex-wrap: wrap; gap: .6rem; }
.simple-builder { overflow-y: auto; min-height: 18rem; }
.simple-help { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: .8rem; }
.simple-block { padding: 1rem; margin-bottom: 1rem; background: var(--card-soft); border: 1px solid var(--line-strong); border-radius: 12px; }
.simple-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; }
.simple-title h3 { font-size: 16px; font-weight: 600; }
.simple-title label { font-size: 12px; color: var(--muted); }
.simple-condition { margin: .7rem 0; padding: .7rem; background: var(--card); border: 1px solid var(--line); border-radius: 9px; }
.simple-rule-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; }
.simple-rule-grid label, .simple-block > label { display: block; font-size: 10px; color: var(--muted); }
.simple-rule-grid .field, .simple-block > label .field { font-size: 12px; margin-top: .2rem; }
.simple-operand { display: contents; }
.simple-condition > button { margin-top: .6rem; }
.simple-order-settings { margin: .8rem 0; }
@media (max-width: 1100px) { #trading-screen.is-algorithmic .trading-grid { grid-template-columns: minmax(0, 6fr) minmax(13rem, 2.5fr) minmax(15rem, 3fr); } }
@media (max-width: 650px) { .simple-rule-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.support-card { max-width: 32rem; padding: 1.2rem 1.4rem; margin-top: 2rem; background: var(--lobby-card); border: 1px solid var(--line-strong); border-radius: 16px; }
.support-card h2 { font-size: 17px; font-weight: 600; margin-bottom: .45rem; }
.support-card p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.support-card .btn { margin-top: .9rem; }
.support-dialog { padding: 1.6rem; width: min(92vw, 32rem); color: var(--ink); background: var(--menu); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 24px 70px rgba(var(--shadow-rgb), .25); }
.support-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(6px); }
.support-dialog p, .support-dialog li { font-size: 13px; line-height: 1.65; color: var(--muted); }
.support-dialog ul { list-style: disc; padding-left: 1.3rem; margin: .8rem 0; }
.support-dialog-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.challenge-settings { display: grid; gap: .7rem; padding: .9rem; background: var(--card-soft); border: 1px solid var(--line); border-radius: 12px; }
.challenge-settings .field { width: 100%; font-size: 12px; }
.session-details > summary { cursor: pointer; font-size: 12px; color: var(--muted); line-height: 1.6; }
.session-details[open] > summary { margin-bottom: .6rem; }
.code-box > span { flex-wrap: wrap; }
#room-mode-chip { white-space: normal; text-align: center; line-height: 1.4; }
#mode-badge { display: inline-block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-option:disabled { opacity: .55; cursor: wait; }
.challenge-settings label { font-size: 11px; display: block; margin-bottom: .25rem; color: var(--muted); }
.challenge-two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.setup-status { font-size: 11px; line-height: 1.5; color: var(--muted); }
.pm-screen { color: var(--ink); background: var(--body-bg); }
.pm-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; background: var(--topbar); border-bottom: 1px solid var(--line); }
.pm-header h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: 25px; line-height: 1.2; }
.pm-header p { font-size: 11px; color: var(--muted); margin-top: .3rem; }
.pm-content { padding: 1.2rem 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.2rem; align-items: start; overflow-y: auto; min-height: 0; }
.pm-panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.pm-panel h2 { font-size: 14px; font-weight: 600; margin-bottom: .75rem; }
.pm-round-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .9rem; font-size: 12px; }
.pm-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .85rem 0; }
.pm-toolbar .btn { font-size: 12px; }
.pm-help { font-size: 12px; line-height: 1.6; color: var(--muted); }
.pm-table-wrap { overflow-x: auto; }
.pm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pm-table th, .pm-table td { text-align: right; padding: .4rem .55rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pm-table th:first-child { text-align: left; }
.pm-table thead th { color: var(--muted); font-size: 11px; font-weight: 500; }
.pm-table tbody th { font-weight: 500; }
.pm-asset-name { display: block; font-size: 10px; color: var(--muted); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.pm-weight { width: 6rem; text-align: right; padding: 5px 7px; }
.pm-save-bar { display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .8rem 0 0; font-size: 12px; }
.pm-save-bar .btn { width: auto; }
.pm-status { font-size: 12px; color: var(--muted); min-height: 2.4rem; line-height: 1.5; margin-top: .7rem; }
.pm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.pm-stats dt { font-size: 10px; color: var(--muted); }
.pm-stats dd { font-size: 17px; margin-top: .2rem; }
.pm-chart { display: block; width: 100%; height: 145px; margin: .8rem 0; }
.pm-standing { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 12px; padding: .55rem .65rem; margin-top: .35rem; }
.pm-side { display: grid; gap: 1rem; }
.pm-fields { min-width: 0; border: 0; padding: 0; margin: 0; }
.pm-screen .btn:disabled { opacity: .45; cursor: not-allowed; }
.pm-exit { color: var(--muted); }
@media (max-width: 900px) {
  .pm-content { grid-template-columns: 1fr; padding: .8rem; }
  .pm-side { grid-template-columns: 1fr 1fr; }
  .pm-header { padding: 1rem; }
}
@media (max-width: 560px) {
  .pm-side { grid-template-columns: 1fr; }
  .pm-asset-name { max-width: 7rem; }
  .pm-table th, .pm-table td { padding: .35rem; }
  .pm-table [data-pm-column="year"], .pm-table [data-pm-value="year"] { display: none; }
  .pm-weight { width: 4.8rem; }
  .support-card { margin-top: 1.3rem; }
}

/* Trading workspaces: independently scrolling panels and readable depth/tape. */
#trading-screen .trading-grid { grid-template-columns:minmax(0,1fr) minmax(15rem,18rem) minmax(18rem,21rem); grid-template-rows:minmax(26rem,1.8fr) minmax(15rem,1fr); grid-template-areas:"chart book side" "ind activity side"; }
#trading-screen.is-algorithmic .trading-grid { grid-template-columns:minmax(0,1fr) minmax(15rem,18rem) minmax(17rem,20rem); grid-template-rows:minmax(25rem,1.5fr) minmax(18rem,1fr); }
#trading-screen.is-algorithmic .positions-panel { min-height:23rem; }
.area-activity { grid-area:activity; min-height:0; overflow:hidden; }
.market-context { display:flex; align-items:center; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; padding:.45rem 1rem; border-bottom:1px solid var(--line); color:var(--muted); font-size:10.5px; }
.market-context strong { font-weight:500; color:var(--ink); }
.activity-heading { display:flex; align-items:baseline; justify-content:space-between; gap:.4rem; flex-wrap:wrap; }
.activity-stats { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin:.5rem 0; }
.activity-stats dt { color:var(--muted); font-size:9.5px; }
.activity-stats dd { color:var(--ink); font-size:12px; font-weight:600; }
.market-print { display:grid; grid-template-columns:1.15fr .8fr 1fr .9fr; gap:.3rem; padding:.25rem 0; font-size:10px; border-bottom:1px solid var(--line); }
.market-print > span:nth-last-child(-n+2) { text-align:right; }
.market-print-head { color:var(--faint); font-size:9px; }
.market-tape { overflow-y:auto; min-height:3rem; flex:1; }
.activity-note { font-size:9px; color:var(--muted); line-height:1.4; margin-top:.4rem; }
.ticket-help { color:var(--muted); font-size:10px; line-height:1.5; }
.ticket-presets { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.ticket-presets > span { font-size:10px; color:var(--muted); margin-right:auto; }
.lvl[data-book-price] { width:100%; text-align:inherit; cursor:pointer; border:0; background-color:transparent; }
.lvl[data-book-price]:hover { outline:1px solid var(--line-hover); }
.pm-save-bar { position:sticky; bottom:0; background:var(--card); border-top:1px solid var(--line); padding:.8rem .3rem; z-index:2; }
.pm-round-bar { position:sticky; top:0; z-index:3; background:var(--card); padding:.6rem 0; }
@media (max-width:1179px) {
 #trading-screen .trading-grid,#trading-screen.is-algorithmic .trading-grid { grid-template-columns:minmax(0,1fr) minmax(17rem,.8fr); grid-template-rows:24rem 29rem 21rem; grid-template-areas:"chart chart" "book side" "ind activity"; }
 #trading-screen .area-side { overflow-y:auto; }
}
@media (max-width:699px) {
 #trading-screen .trading-grid,#trading-screen.is-algorithmic .trading-grid { grid-template-columns:minmax(0,1fr); grid-template-rows:22rem auto 30rem 23rem 23rem; grid-template-areas:"chart" "side" "book" "activity" "ind"; }
 #trading-screen .area-side { overflow:visible; }
 #trading-screen .positions-panel { min-height:23rem; }
 #trading-screen > header .wordmark { font-size:15px; }
 #trading-screen .area-chart > div:first-child > div { flex-wrap:wrap; }
 #mode-badge { max-width:calc(100vw - 3rem); }
}