:root { --bg:#13100f; --panel:#211b18; --panel2:#2d2520; --text:#f4eadb; --muted:#b9a996; --line:#4b3d34; --accent:#d89a35; --bad:#e06a5f; --good:#8fcf7a; }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, Segoe UI, Arial, sans-serif; background:radial-gradient(circle at top,#302218,var(--bg)); color:var(--text); }
header { padding:24px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.25); }
h1 { margin:0; font-size:clamp(24px,4vw,42px); letter-spacing:.5px; }
header p { margin:.5rem 0 0; color:var(--muted); }
.layout { display:grid; grid-template-columns:260px minmax(0,1fr) 330px; gap:16px; padding:16px; }
.panel { background:rgba(33,27,24,.95); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.sticky { position:sticky; top:16px; align-self:start; }
label { display:block; font-size:.85rem; color:var(--muted); margin:12px 0 6px; }
select,input,button { width:100%; border-radius:10px; border:1px solid var(--line); background:#171311; color:var(--text); padding:10px; }
button { cursor:pointer; background:linear-gradient(#3d2b1d,#271d18); border-color:#6a4a25; font-weight:700; }
button:hover { outline:2px solid rgba(216,154,53,.35); }
.btn-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.small { font-size:.85rem; color:var(--muted); }
.filters { display:grid; gap:8px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.card { background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.card h3 { margin:0; font-size:1.05rem; }
.meta { display:flex; gap:8px; flex-wrap:wrap; }
.badge { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:4px 8px; font-size:.78rem; color:var(--muted); background:#1a1513; }
.cost { color:var(--accent); border-color:#7b5727; }
.stats { display:flex; gap:6px; flex-wrap:wrap; }
.stat { background:#171311; border:1px solid var(--line); border-radius:8px; padding:4px 7px; font-size:.8rem; }
.abilities { color:#dccfc0; font-size:.88rem; line-height:1.35; border-top:1px dashed var(--line); padding-top:8px; white-space:pre-wrap; }
.summary-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:12px 0; }
.total-stat { background:#171311; border:1px solid var(--line); border-radius:10px; padding:8px; text-align:center; }
.total-stat strong { display:block; color:var(--accent); font-size:1.2rem; }
.warning { color:var(--bad); font-weight:700; }
.ok { color:var(--good); font-weight:700; }
.selected { display:grid; gap:8px; }
.pick { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; background:#171311; border:1px solid var(--line); border-radius:10px; padding:8px; }
.pick button { width:auto; padding:6px 9px; background:#2b1816; border-color:#7b332d; }
.build-abilities { display:grid; gap:8px; }
.ability-pick { display:grid; gap:3px; background:#171311; border:1px solid var(--line); border-radius:10px; padding:8px; }
.ability-pick strong { color:var(--accent); font-size:.86rem; }
.ability-pick span { color:#dccfc0; font-size:.88rem; line-height:1.35; }
textarea { width:100%; min-height:130px; border-radius:10px; border:1px solid var(--line); background:#171311; color:var(--text); padding:10px; margin-top:10px; }
@media (max-width:1050px) { .layout { grid-template-columns:1fr; } .sticky { position:static; } }