@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --base:#12161A; --panel:#191F25; --raised:#212A31; --rule:#2C363E; --hair:#232C33;
  --ink:#E6EBEF; --dim:#8B98A3; --faint:#5D6A75;
  --views:#6FA8D6; --saves:#E0A24A; --good:#6FBF8E; --warn:#D3806A; --mark:#9C9BD8;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--base); color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:72px;
}
.num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px;}
.hide{display:none !important;}

/* ---- header ---- */
header.top{border-bottom:1px solid var(--rule);margin-bottom:26px;}
.top-in{max-width:1180px;margin:0 auto;padding:20px 22px 16px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;}
h1.brand{font-size:25px;font-weight:700;letter-spacing:-0.02em;margin:0;}
.brand-sub{color:var(--dim);font-size:13px;margin:3px 0 0;}
nav.tabs{display:flex;gap:6px;flex-wrap:wrap;}

/* ---- controls ---- */
button,select,input,textarea{font:inherit;}
.btn{background:var(--raised);color:var(--ink);border:1px solid var(--rule);
  padding:8px 14px;border-radius:5px;font-size:13.5px;cursor:pointer;}
.btn:hover{border-color:#41505b;}
.btn:focus-visible{outline:2px solid var(--views);outline-offset:2px;}
.btn.on{background:var(--views);border-color:var(--views);color:#0E1519;font-weight:600;}
.btn.pri{background:var(--views);border-color:var(--views);color:#0E1519;font-weight:600;}
.btn.ghost{background:transparent;}
.btn.danger:hover{border-color:var(--warn);color:var(--warn);}
.btn.sm{padding:5px 10px;font-size:12.5px;}

.in{width:100%;background:#0E1317;border:1px solid var(--rule);color:var(--ink);
  padding:8px 10px;border-radius:4px;font-size:13.5px;}
.in:focus{outline:none;border-color:var(--views);}
textarea.in{min-height:70px;resize:vertical;}
select.in{appearance:none;background-image:none;}
label.lab{display:block;font-size:12px;color:var(--dim);margin:0 0 5px;}
.field{margin-bottom:13px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.flex-end{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;}

/* ---- panels ---- */
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:20px;}
.sec{margin-top:20px;}
h2.h{font-size:13px;font-weight:600;color:var(--dim);margin:0 0 12px;}
.note{font-size:12.5px;color:var(--faint);line-height:1.55;}
.two{display:grid;grid-template-columns:344px 1fr;gap:22px;align-items:start;}
@media(max-width:860px){.two{grid-template-columns:1fr;}}

/* ---- filter bar ---- */
.filters{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--rule);}
.chip{font-size:12px;padding:3px 9px;border:1px solid var(--rule);border-radius:20px;
  color:var(--dim);background:none;cursor:pointer;}
.chip:hover{border-color:#41505b;color:var(--ink);}
.chip.on{background:var(--views);border-color:var(--views);color:#0E1519;font-weight:600;}

/* ---- grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:18px;}
.card{background:var(--panel);border:1px solid var(--rule);border-left-width:3px;border-radius:6px;
  overflow:hidden;cursor:pointer;text-align:left;padding:0;color:inherit;display:block;width:100%;}
.card:hover{border-color:#41505b;}
.card:focus-visible{outline:2px solid var(--views);outline-offset:2px;}
.st-listed{border-left-color:var(--views);}
.st-sold{border-left-color:var(--good);}
.st-draft{border-left-color:var(--faint);}
.shot{aspect-ratio:4/3;background:#0D1114;display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-size:12.5px;overflow:hidden;}
.shot img{width:100%;height:100%;object-fit:cover;display:block;}
.cbody{padding:13px 14px 14px;}
.cname{font-size:15px;font-weight:600;letter-spacing:-0.01em;margin:0 0 2px;}
.cmeta{color:var(--dim);font-size:12px;display:flex;justify-content:space-between;gap:10px;}
.readout{display:flex;gap:18px;margin-top:11px;padding-top:11px;border-top:1px solid var(--rule);}
.ro-v{font-size:19px;font-weight:600;}
.ro-l{font-size:11px;color:var(--dim);margin-top:1px;}

/* ---- tags ---- */
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.tag{font-size:11px;padding:2px 7px;border:1px solid var(--rule);border-radius:3px;color:var(--dim);}
.tag button{background:none;border:0;color:var(--faint);cursor:pointer;margin-left:4px;padding:0;}
.tag button:hover{color:var(--warn);}

/* ---- tables ---- */
table.tab{width:100%;border-collapse:collapse;font-size:13px;}
.tab th{text-align:right;font-weight:500;color:var(--dim);font-size:11.5px;
  padding:0 0 7px;border-bottom:1px solid var(--rule);white-space:nowrap;}
.tab th:first-child,.tab td:first-child{text-align:left;}
.tab td{padding:8px 0;border-bottom:1px solid var(--hair);text-align:right;}
.tab tr:last-child td{border-bottom:0;}
.tab td.act{width:26px;}
.x{background:none;border:0;color:var(--faint);cursor:pointer;padding:2px 4px;font-size:15px;line-height:1;}
.x:hover{color:var(--warn);}
.scroll{overflow-x:auto;}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(106px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:5px;overflow:hidden;margin-bottom:18px;}
.stat{background:var(--panel);padding:12px 13px;}
.stat .v{font-size:20px;font-weight:600;letter-spacing:-0.01em;}
.stat .l{font-size:11px;color:var(--dim);margin-top:2px;}

/* ---- misc ---- */
.empty{border:1px dashed var(--rule);border-radius:6px;padding:44px 24px;text-align:center;color:var(--dim);}
.back{background:none;border:0;color:var(--dim);cursor:pointer;font-size:13px;padding:0;margin-bottom:14px;}
.back:hover{color:var(--ink);}
.hero{border-radius:5px;overflow:hidden;background:#0D1114;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;}
.hero img{width:100%;height:100%;object-fit:cover;}
.parts{font-size:13px;margin-top:18px;}
.parts div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--hair);}
.parts span:first-child{color:var(--dim);flex:none;}
.parts span:last-child{text-align:right;}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--dim);margin-top:8px;}
.key{width:18px;height:2px;display:inline-block;vertical-align:middle;margin-right:6px;}
.err{color:var(--warn);font-size:12.5px;margin:10px 0 0;}
.ok{color:var(--good);font-size:12.5px;margin:10px 0 0;}

/* ---- login ---- */
.login{max-width:340px;margin:14vh auto 0;padding:0 22px;}
.login h1{font-size:24px;font-weight:700;margin:0 0 4px;letter-spacing:-0.02em;}
.login p{color:var(--dim);font-size:13.5px;margin:0 0 20px;}

/* ---- chart ---- */
.chart{width:100%;overflow:visible;}
.chart text{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:var(--faint);}
.chart .gridline{stroke:var(--hair);stroke-width:1;}
.chart .axis{stroke:var(--rule);stroke-width:1;}
.chart .evline{stroke:var(--mark);stroke-width:1;stroke-dasharray:3 3;opacity:.75;}
.chart .evlabel{fill:var(--mark);font-size:9.5px;}
.chart .dot{stroke:var(--panel);stroke-width:1.5;}