:root {
  --black: #060606;
  --white: #e8e8e3;
  --gray: #777;
  --dim: #444;
  --accent: #c8ff00;
  --border: #1a1a1a;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
::selection { background:var(--accent); color:var(--black); }
body { font-family:var(--sans); background:var(--black); color:var(--white); padding:16px 24px; }

.header-fixed { position:sticky; top:0; z-index:10; background:var(--black); padding-bottom:8px; }
.top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.top h1 { font-size:1.4em; font-weight:700; letter-spacing:-.03em; }
.logo { font-family:var(--mono); font-weight:700; font-size:1.15rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--white); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--white); }
.logo span { color:var(--accent); }

.btn-export { background:none; border:1px solid var(--gray); color:var(--white); font-family:var(--mono); font-size:.85em; padding:5px 14px; cursor:pointer; text-transform:uppercase; letter-spacing:.06em; text-decoration:none; }
.btn-export:hover { color:var(--accent); border-color:var(--accent); }
.section { margin-bottom:16px; }
.usd-rate { color:var(--accent); }
.section-label { font-family:var(--mono); font-size:.65em; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); }
.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }


.filters { display:flex; gap:1px; }
.filters select, .filters input { background:#0a0a0a; border:1px solid var(--border); border-bottom:none; color:var(--white); font-family:var(--mono); font-size:.75em; padding:8px 12px; outline:none; }
.filters select { width:180px; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23777'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:24px; cursor:pointer; }
.filters select:focus, .filters input:focus { border-color:var(--accent); }
.filters input { flex:1; }

.feed { background:#0a0a0a; border:1px solid var(--border); font-family:var(--mono); font-size:.75em; line-height:1.8; color:var(--gray); position:relative; }
.feed .row { display:flex; gap:16px; padding:4px 12px; border-bottom:1px solid #111; align-items:center; overflow:hidden; }
.feed .row.even { background:#0d0d0d; }
.feed .row:hover { color:var(--white); background:#111; }
.feed-hdr { display:flex; gap:16px; padding:8px 12px; color:var(--dim); border-bottom:1px solid var(--border); background:#0a0a0a; font-family:var(--mono); font-size:.75em; }
.feed .hdr .sortable:hover { color:var(--accent); }
.col-src { width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.col-src a { color:var(--gray); text-decoration:none; border-bottom:1px solid var(--border); }
.col-src a:hover { color:var(--accent); border-color:var(--accent); }
.col-cat { width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dim); text-align:right; }
.col-prod { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--white); }
.col-price { width:100px; text-align:right; color:var(--accent); white-space:nowrap; }
.col-price small, .col-usd small { font-size:.55em; vertical-align:baseline; }
.col-usd { width:90px; text-align:right; color:var(--gray); white-space:nowrap; }

@media (max-width: 1100px) {
  .col-cat { display:none; }
}

@media (max-width: 600px) {
  body { padding:10px 12px; }
  .top { flex-direction:column; gap:8px; }
  .toolbar { flex-wrap:wrap; gap:6px; }
  .filters { flex-direction:column; }
  .filters select { width:100%; }
  .col-src { display:none; }
  .col-cat { display:none; }
  .col-usd { display:none; }
  .col-price { width:80px; }
  .col-price { width:80px; }
  .col-usd { width:70px; }
}

.sources { font-family:var(--mono); font-size:.7em; line-height:2; }
.sources a { color:var(--gray); text-decoration:none; border-bottom:1px solid var(--border); }
.sources a:hover { color:var(--accent); border-color:var(--accent); }
.sources .src-cat { color:var(--dim); margin-right:8px; }