:root{
  --bg:#131417; --panel:#191b20; --panel2:#212429; --line:#2c3037;
  --fg:#d5d2cb; --dim:#82858c; --accent:#c07d3e; --accent-hi:#e0a166;
  --ok:#7f9e5c; --bad:#c0564b;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-hi); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1040px; margin:0 auto; padding:0 22px}

header{border-bottom:1px solid var(--line); background:#0e0f12}
.head{display:flex; align-items:baseline; gap:14px; padding:20px 0 18px}
.head h1{font-size:20px; margin:0; letter-spacing:-.01em}
.head .sub{color:var(--dim); font-size:13px}
.head .spacer{flex:1}
.btn{
  font:500 13px/1 var(--sans); color:var(--fg); background:var(--panel2);
  border:1px solid var(--line); border-radius:6px; padding:9px 14px;
  cursor:pointer; transition:.13s;
}
.btn:hover{border-color:var(--accent); color:var(--accent-hi)}
.btn.primary{background:#2a2018; border-color:#4a341f}
.btn.primary:hover{background:#332619}

.tools{display:flex; gap:10px; padding:16px 0; flex-wrap:wrap; align-items:center}
input,select,textarea{
  font:400 14px/1.4 var(--sans); color:var(--fg); background:#0f1013;
  border:1px solid var(--line); border-radius:6px; padding:9px 11px; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:#5c5f66}
.grow{flex:1; min-width:200px}

.count{color:var(--dim); font-size:12.5px; font-family:var(--mono)}

.grid{display:grid; gap:12px; padding-bottom:60px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:16px 18px; transition:.13s;
}
.card:hover{border-color:#3b4048}
.card .top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.card h3{margin:0; font-size:16px; font-weight:600}
.card .by{color:var(--dim); font-size:13px}
.card .chip{
  font-family:var(--mono); font-size:11px; color:var(--accent-hi);
  border:1px solid #4a341f; background:#241c14; border-radius:20px; padding:2px 9px;
}
.card .desc{color:#a9a7a1; font-size:14px; margin:9px 0 0}
.card .meta{
  display:flex; gap:16px; margin-top:12px; color:var(--dim);
  font-family:var(--mono); font-size:11.5px; flex-wrap:wrap; align-items:center;
}
.card .meta .spacer{flex:1}

.slots{display:flex; gap:8px; margin-top:11px; flex-wrap:wrap}
.slot{
  font-family:var(--mono); font-size:11px; border:1px solid var(--line);
  border-radius:5px; padding:5px 9px; background:#15171b; color:var(--dim);
}
.slot b{color:var(--fg); font-weight:500}
.slot.set{border-color:#4a341f; color:var(--accent-hi)}
.slot.set b{color:var(--accent-hi)}

details.vals{margin-top:12px}
details.vals summary{
  cursor:pointer; color:var(--dim); font-size:12.5px; font-family:var(--mono);
  list-style:none; user-select:none;
}
details.vals summary::-webkit-details-marker{display:none}
details.vals summary:before{content:"+ "; color:var(--accent)}
details.vals[open] summary:before{content:"- "}
details.vals summary:hover{color:var(--fg)}
table{width:100%; border-collapse:collapse; margin-top:10px; font-family:var(--mono); font-size:12px}
th{text-align:left; color:var(--dim); font-weight:500; padding:5px 8px; border-bottom:1px solid var(--line)}
td{padding:5px 8px; border-bottom:1px solid #202329; color:#b8b6b0}
td.num{text-align:right; color:var(--accent-hi)}
td.was{text-align:right; color:#6a6d74; text-decoration:line-through}

.empty{color:var(--dim); text-align:center; padding:70px 20px}

dialog{
  border:1px solid var(--line); border-radius:10px; background:var(--panel);
  color:var(--fg); padding:0; width:min(560px,92vw);
}
dialog::backdrop{background:rgba(0,0,0,.62)}
.dlg-head{padding:16px 20px; border-bottom:1px solid var(--line); font-weight:600}
.dlg-body{padding:18px 20px; display:grid; gap:11px}
.dlg-body label{font-size:12px; color:var(--dim); font-family:var(--mono)}
.dlg-body input,.dlg-body textarea,.dlg-body select{width:100%}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.dlg-foot{padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end}
.note{color:var(--dim); font-size:12px}
.msg{font-size:13px; font-family:var(--mono)}
.msg.ok{color:var(--ok)} .msg.bad{color:var(--bad)}

footer{border-top:1px solid var(--line); color:var(--dim); font-size:12.5px; padding:18px 0 40px}