:root{
  color-scheme:dark;
  --bg:#10151b;
  --bg-deep:#0a0e13;
  --panel:#1a222b;
  --panel-2:#202a35;
  --panel-3:#26323e;
  --panel-inset:#121820;
  --text:#e7edf3;
  --muted:#99a8b6;
  --faint:#6e7c89;
  --line:#34424f;
  --line-bright:#526474;
  --accent:#8ba8c5;
  --accent-strong:#b8d0e6;
  --accent-bg:#263b4d;
  --gold:#d9bc72;
  --good:#79c99a;
  --warn:#e4b56c;
  --bad:#ed8585;
  --shadow:0 10px 30px rgba(0,0,0,.22);
  --header-grad:linear-gradient(#283541,#1b252e);
  --frame-grad:linear-gradient(180deg,#202a35,#18212a);
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#dfe5ea;
  --bg-deep:#cbd3da;
  --panel:#f7f9fb;
  --panel-2:#eef2f5;
  --panel-3:#e4eaef;
  --panel-inset:#ffffff;
  --text:#1b2630;
  --muted:#596b7a;
  --faint:#7c8b97;
  --line:#aebbc6;
  --line-bright:#8799a7;
  --accent:#3e6484;
  --accent-strong:#284c6a;
  --accent-bg:#d8e5ef;
  --gold:#765d21;
  --good:#28764c;
  --warn:#946419;
  --bad:#a43e3e;
  --shadow:0 8px 24px rgba(20,30,40,.12);
  --header-grad:linear-gradient(#f8fafb,#e8edf1);
  --frame-grad:linear-gradient(180deg,#f7f9fb,#edf2f5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow:hidden;
  background:var(--bg-deep);
  color:var(--text);
  font-family:Tahoma,"Segoe UI",sans-serif;
  font-size:13px;
  line-height:1.35;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.app{height:100%;display:flex;flex-direction:column;background:var(--bg)}
.titlebar{
  flex:0 0 66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 16px;
  border-bottom:1px solid var(--line-bright);
  background:var(--header-grad);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  z-index:10;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
h1,h2,h3,p{margin:0}
h1{font-size:18px;letter-spacing:.02em}
.brand-subtitle{color:var(--muted);font-size:11px;margin-top:2px}
.title-actions{display:flex;align-items:center;gap:8px}
.freshness-badge{
  min-height:32px;
  display:flex;align-items:center;gap:7px;
  padding:6px 10px;
  border:1px solid var(--line);
  background:var(--panel-inset);
  color:var(--muted);
  white-space:nowrap;
  cursor:help;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.freshness-badge.good .status-dot{background:var(--good)}
.freshness-badge.warn .status-dot{background:var(--warn)}
.freshness-badge.bad .status-dot{background:var(--bad)}
.square-button,.small-button{
  border:1px solid var(--line);
  background:var(--panel-2);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.square-button{width:32px;height:32px}
.small-button{padding:5px 9px}
.square-button:hover,.small-button:hover,.tree-button:hover,.detail-tab:hover{
  border-color:var(--line-bright);background:var(--panel-3)
}
.main-shell{
  flex:1;min-height:0;
  display:grid;
  grid-template-rows:minmax(300px,1fr) minmax(300px,42vh);
  gap:7px;padding:7px;
}
.upper-workspace{
  min-height:0;
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  gap:7px;
}
.frame{
  min-width:0;min-height:0;
  border:1px solid var(--line-bright);
  background:var(--frame-grad);
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.025);
}
.frame-title{
  height:28px;display:flex;align-items:center;
  padding:0 9px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-strong);
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.08);
}
.browse-pane{display:flex;flex-direction:column}
.search-box{
  position:relative;
  padding:9px 9px 6px;
}
.search-box input{
  width:100%;height:32px;
  border:1px solid var(--line-bright);
  background:var(--panel-inset);
  padding:0 32px 0 9px;
  outline:none;
}
.search-box input:focus{border-color:var(--accent)}
.clear-button{
  position:absolute;right:13px;top:12px;
  width:25px;height:25px;border:0;background:transparent;
  color:var(--muted);font-size:18px;line-height:20px
}
.browse-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:0 9px 8px;
  border-bottom:1px solid var(--line)
}
.subtle{color:var(--muted);font-size:11px}
.browse-tree{flex:1;min-height:0;overflow:auto;padding:5px}
.tree-section{margin-bottom:3px}
.tree-summary{
  display:flex;align-items:center;gap:6px;
  padding:6px 7px;
  font-weight:700;color:var(--accent-strong);
  cursor:pointer;user-select:none
}
.tree-summary::before{content:"▸";width:11px;color:var(--faint)}
details[open]>.tree-summary::before{content:"▾"}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
.tree-children{margin-left:11px;border-left:1px solid var(--line);padding-left:5px}
.tree-button{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid transparent;background:transparent;
  padding:5px 7px;text-align:left;color:var(--text)
}
.tree-button.active{
  background:var(--accent-bg);border-color:var(--accent);
  color:var(--accent-strong)
}
.tree-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-count{color:var(--faint);font-size:10px}
.tree-subgroup{margin:2px 0 4px}
.tree-subgroup>.tree-summary{font-weight:400;color:var(--text);padding:5px 7px}
.tree-category-list,.tree-effect-list{padding:1px 0 4px}
.loading-line,.empty-message{padding:18px;text-align:center;color:var(--muted)}

.results-pane{display:flex;flex-direction:column}
.results-heading{
  flex:0 0 64px;
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  padding:8px 10px;
  border-bottom:1px solid var(--line)
}
.results-context{min-width:0}
.breadcrumb{color:var(--gold);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.results-heading h2{
  font-size:16px;margin:2px 0 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.results-tools{display:flex;align-items:end;gap:8px}
.compact-field{display:flex;flex-direction:column;gap:2px}
.compact-field span{font-size:10px;color:var(--muted)}
.compact-field select{
  border:1px solid var(--line);background:var(--panel-inset);
  padding:4px 26px 4px 6px
}
.market-table-header,.market-row{
  display:grid;
  grid-template-columns:minmax(280px,2.5fr) 62px 100px 80px 76px 76px 70px;
  align-items:center;gap:8px
}
.market-table-header{
  flex:0 0 28px;
  padding:0 9px;
  border-bottom:1px solid var(--line);
  background:var(--panel-inset);
  color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em
}
.results-list{flex:1;min-height:0;overflow:auto;background:var(--panel-inset)}
.market-row{
  min-height:43px;padding:5px 9px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  outline:none
}
.market-row:hover,.market-row:focus,.market-row.active{background:var(--accent-bg)}
.market-row.active{box-shadow:inset 3px 0 var(--accent)}
.market-item-main{min-width:0}
.market-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.market-secondary{
  margin-top:2px;color:var(--muted);font-size:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.numeric{text-align:right;font-variant-numeric:tabular-nums}
.change.pos{color:var(--good)} .change.neg{color:var(--bad)}
.set-row,.category-row{
  min-height:43px;padding:7px 10px;
  border-bottom:1px solid var(--line);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.set-row:hover,.category-row:hover{background:var(--accent-bg)}
.set-title,.category-title{font-weight:700}
.set-meta,.category-meta{font-size:10px;color:var(--muted);margin-top:2px}
.results-footer{
  flex:0 0 35px;
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 8px;border-top:1px solid var(--line)
}

.detail-pane{display:flex;flex-direction:column;overflow:hidden}
.detail-topline{
  flex:0 0 73px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:8px 12px;
  border-bottom:1px solid var(--line)
}
.selected-market{min-width:0}
.eyebrow{
  color:var(--gold);font-size:10px;text-transform:uppercase;letter-spacing:.06em
}
.selected-market h2{
  margin:2px 0;font-size:17px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.selected-meta{
  color:var(--muted);font-size:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.quick-metrics{display:flex;gap:20px;flex-shrink:0}
.quick-metric{min-width:88px;display:flex;flex-direction:column}
.quick-metric span{font-size:10px;color:var(--muted);text-transform:uppercase}
.quick-metric strong{font-size:15px;margin:1px 0;font-variant-numeric:tabular-nums}
.quick-metric small{font-size:9px;color:var(--muted)}
.detail-tabs{
  flex:0 0 31px;display:flex;align-items:end;
  padding:0 8px;border-bottom:1px solid var(--line);
  background:var(--panel-inset)
}
.detail-tab{
  height:27px;padding:0 14px;
  border:1px solid transparent;border-bottom:0;
  background:transparent;color:var(--muted)
}
.detail-tab.active{
  color:var(--text);background:var(--panel);
  border-color:var(--line);position:relative;top:1px
}
.detail-body{flex:1;min-height:0;overflow:hidden}
.tab-panel{display:none;height:100%;overflow:auto}
.tab-panel.active{display:block}
.window-table{
  width:100%;
  display:grid;
  grid-template-columns:70px repeat(7,minmax(85px,1fr));
  align-content:start;
  font-variant-numeric:tabular-nums
}
.window-row{display:contents}
.window-cell{
  min-height:31px;display:flex;align-items:center;
  padding:5px 8px;border-bottom:1px solid var(--line)
}
.window-head .window-cell{
  background:var(--panel-inset);color:var(--muted);
  font-size:10px;text-transform:uppercase
}
.window-cell.numeric{justify-content:flex-end}
.tab-toolbar{
  height:38px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:5px 9px;border-bottom:1px solid var(--line)
}
.segmented{display:flex;gap:3px}
.segmented button{
  border:1px solid var(--line);background:var(--panel-inset);
  padding:4px 9px
}
.segmented button.active{background:var(--accent-bg);border-color:var(--accent)}
.legend-group{display:flex;gap:14px}
.legend{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px}
.swatch{display:inline-block;width:12px;height:2px}
.swatch.price{background:var(--accent-strong)}
.swatch.supply{background:var(--good)}
.swatch.bids{background:var(--warn)}
.chart{height:calc(100% - 38px);min-height:190px;padding:6px 8px 8px}
.chart svg{width:100%;height:100%;display:block}
.grid-line{stroke:var(--line);stroke-width:1}
.x-grid-line{stroke:var(--line);stroke-width:1;opacity:.45}
.axis-tick{stroke:var(--line-bright);stroke-width:1}
.axis-label{fill:var(--muted);font-size:10px;font-family:Tahoma,"Segoe UI",sans-serif}
.line-price{fill:none;stroke:var(--accent-strong);stroke-width:2}
.line-supply{fill:none;stroke:var(--good);stroke-width:2}
.line-bids{fill:none;stroke:var(--warn);stroke-width:2}
.chart-marker{stroke-width:2.5}
.chart-marker.line-price{fill:var(--panel);stroke:var(--accent-strong)}
.chart-marker.line-supply{fill:var(--panel);stroke:var(--good)}
.chart-marker.line-bids{fill:var(--panel);stroke:var(--warn)}
.chart-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.members-table{font-size:11px}
.member-row{
  display:grid;grid-template-columns:minmax(240px,1.8fr) 70px 120px minmax(280px,2fr);
  gap:8px;padding:6px 9px;border-bottom:1px solid var(--line);align-items:center
}
.member-row.header{
  position:sticky;top:0;background:var(--panel-inset);
  color:var(--muted);font-size:10px;text-transform:uppercase;z-index:1
}
.raw-id{font-family:Consolas,"Courier New",monospace;color:var(--muted);font-size:10px}
.details-grid{
  display:grid;grid-template-columns:170px minmax(0,1fr);
  align-content:start
}
.detail-key,.detail-value{padding:6px 9px;border-bottom:1px solid var(--line)}
.detail-key{color:var(--muted);background:var(--panel-inset)}
.detail-value.code{font-family:Consolas,"Courier New",monospace;font-size:10px;word-break:break-all}
@media(max-width:1050px){
  body{overflow:auto}
  .app{height:auto;min-height:100%}
  .main-shell{display:block}
  .upper-workspace{display:block}
  .browse-pane{min-height:420px;margin-bottom:7px}
  .results-pane{min-height:560px;margin-bottom:7px}
  .detail-pane{min-height:480px}
  .market-table-header,.market-row{
    grid-template-columns:minmax(260px,2fr) 58px 92px 72px 70px 70px 65px
  }
}
@media(max-width:720px){
  .titlebar{height:auto;min-height:66px;align-items:flex-start;padding:10px}
  .title-actions{flex-direction:column;align-items:flex-end}
  .freshness-badge{white-space:normal;max-width:290px;text-align:right}
  .market-table-header{display:none}
  .market-row{
    grid-template-columns:1fr auto;
    gap:3px 10px;padding:8px
  }
  .market-row>span:nth-child(n+3){display:none}
  .quick-metrics{display:none}
  .window-table{grid-template-columns:65px repeat(3,minmax(80px,1fr))}
  .window-cell:nth-child(5),.window-cell:nth-child(6),
  .window-cell:nth-child(7),.window-cell:nth-child(8){display:none}
}