:root { --c-attack:#c0392b; --c-skill:#27ae60; --c-power:#2980b9; --c-curse:#8e44ad; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Microsoft YaHei", sans-serif; background:#1a1a1a; color:#eee; }
#app { max-width: 720px; margin: 0 auto; padding: 12px; }
.card { border-left: 5px solid #555; background:#2a2a2a; border-radius:8px; padding:10px; margin:8px 0; }
.type-attack { border-left-color: var(--c-attack); }
.type-skill  { border-left-color: var(--c-skill); }
.type-power  { border-left-color: var(--c-power); }
.type-curse  { border-left-color: var(--c-curse); }
.cost-badge { display:inline-block; min-width:24px; text-align:center; background:#f39c12; color:#000; border-radius:50%; padding:2px 6px; font-weight:bold; }
.card-grid { display:grid; grid-template-columns: 1fr; gap:8px; }
.name { font-weight:bold; font-size:16px; }
.desc { color:#bbb; font-size:13px; margin-top:4px; }
input,select,button { font-size:15px; padding:8px; border-radius:6px; border:1px solid #444; background:#333; color:#eee; }
button { cursor:pointer; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.toolbar > * { flex:1 1 auto; }
nav.tabs { display:flex; gap:8px; margin-bottom:12px; overflow-x:auto; }
nav.tabs button { white-space:nowrap; }
.tabs button.on { background:#f39c12; color:#000; }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal { background:#2a2a2a; border-left:5px solid #555; border-radius:10px; padding:16px; max-width:480px; width:100%; max-height:80vh; overflow:auto; }
.modal small { color:#888; font-weight:normal; }
.thumb { width:48px; height:48px; object-fit:cover; border-radius:6px; vertical-align:middle; margin-right:8px; }
.big-img { max-width:160px; float:right; border-radius:8px; margin:0 0 8px 12px; }
.flashcard { background:#2a2a2a; border-left:5px solid #555; border-radius:10px; padding:20px; min-height:200px; }