:root {
  color-scheme: dark;
  font-family: Inter, "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #161719;
  --panel: #202226;
  --panel2: #292c31;
  --line: #454a52;
  --text: #f4f1e8;
  --muted: #aaa79f;
  --accent: #d8b66b;
  --danger: #bb5c59;
  --ok: #739b73;
  --spell: #6f668d;
  --gear: #596b79;
  --weapon: #795b51;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.boot { padding: 24px; color: var(--muted); }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display:flex; gap:8px; align-items:center; padding:10px 12px; background:#101113; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.brand { font-weight:800; letter-spacing:.04em; margin-right:auto; }
.role { font-size:11px; padding:2px 7px; border:1px solid var(--line); border-radius:999px; color:var(--muted); }
.view-select { max-width:150px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:5px; }
.tabs { display:flex; border-bottom:1px solid var(--line); background:#17191c; position:sticky; top:43px; z-index:19; }
.tab { flex:1; border:0; background:transparent; color:var(--muted); padding:9px 6px; border-bottom:2px solid transparent; }
.tab.active { color:var(--text); border-color:var(--accent); }
.main { padding:10px; }
.card-panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:10px; }
.section-title { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 8px; }
.char-grid { display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:start; }
.char-name { width:100%; padding:7px 8px; background:#15171a; border:1px solid var(--line); border-radius:6px; color:var(--text); font-weight:700; }
.preset-row { display:flex; gap:6px; }
.preset-row select { min-width:0; flex:1; background:#15171a; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:6px; }
.small-btn { border:1px solid var(--line); background:#25282d; color:var(--text); border-radius:6px; padding:5px 8px; }
.small-btn:hover { border-color:#6c727c; }
.danger-btn { color:#ffc8c6; border-color:#744; }
.stats { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:8px; }
.stat { background:#15171a; border:1px solid var(--line); border-radius:8px; padding:6px; text-align:center; }
.stat label { display:block; color:var(--muted); font-size:10px; }
.stat input { width:100%; text-align:center; border:0; outline:0; color:var(--text); background:transparent; font-weight:800; font-size:17px; }
.textarea-label { display:block; color:var(--muted); font-size:11px; margin:8px 0 4px; }
textarea { width:100%; min-height:52px; resize:vertical; background:#15171a; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:7px; }
.zone-row { display:grid; gap:6px; }
.hand-grid { grid-template-columns:repeat(2,1fr); }
.belt-grid { grid-template-columns:repeat(4,1fr); }
.backpack-grid { grid-template-columns:repeat(5,1fr); }
.slot { min-height:78px; border:1px dashed #5a6069; border-radius:8px; background:#191b1e; padding:4px; position:relative; transition:.12s ease; }
.slot::before { content:attr(data-label); position:absolute; top:3px; left:5px; font-size:9px; color:#686d75; pointer-events:none; }
.slot.dragover, .slot.move-target { border-color:var(--accent); background:#25231d; }
.slot.reserved { display:flex; align-items:center; justify-content:center; color:#777; font-size:10px; background:#202124; }
.item-card { min-height:66px; border:1px solid #777; border-radius:7px; padding:18px 6px 5px; background:#e8e4da; color:#111; position:relative; user-select:none; cursor:grab; overflow:hidden; }
.item-card:active { cursor:grabbing; }
.item-card.weapon { background:#eadbd4; }
.item-card.gear { background:#dbe5eb; }
.item-card.consumable { background:#dce9da; }
.item-card.spell { background:#e3ddef; }
.item-card.treasure { background:#eee6c8; }
.item-card.wound { background:#edcecc; border-color:#a34a47; }
.item-title { font-weight:800; font-size:11px; line-height:1.15; }
.item-desc { margin-top:3px; font-size:9px; line-height:1.2; color:#333; white-space:pre-line; max-height:30px; overflow:hidden; }
.badge { position:absolute; top:3px; right:4px; font-size:8px; background:#222; color:#fff; border-radius:999px; padding:1px 4px; }
.slot-badge { right:auto; left:4px; background:#665b43; }
.item-actions { position:absolute; bottom:3px; right:3px; display:flex; gap:3px; }
.icon-btn { border:0; background:rgba(0,0,0,.1); color:#222; border-radius:4px; font-size:10px; padding:1px 4px; }
.capacity { color:var(--muted); font-size:11px; margin-left:auto; }
.section-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.section-head .section-title { margin:0; }
.library-tools { display:flex; gap:6px; margin-bottom:8px; }
.library-tools input { flex:1; background:#15171a; border:1px solid var(--line); border-radius:6px; color:var(--text); padding:7px; }
.library-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.library-grid .item-card { min-height:88px; }
.empty { color:var(--muted); text-align:center; padding:18px 8px; }
.rule-list { margin:0; padding-left:18px; color:#ddd8cd; }
.rule-list li { margin-bottom:6px; }
.party-list { display:flex; flex-direction:column; gap:6px; }
.party-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#181a1d; }
.party-name { font-weight:700; }
.party-summary { font-size:11px; color:var(--muted); }
.toast { position:fixed; bottom:12px; left:12px; right:12px; background:#2d3035; border:1px solid #666; border-radius:8px; padding:9px 10px; z-index:50; box-shadow:0 8px 24px #0008; }
.modal-backdrop { position:fixed; inset:0; background:#000b; display:flex; align-items:center; justify-content:center; z-index:100; padding:12px; }
.modal { width:min(460px,100%); max-height:90vh; overflow:auto; background:#202226; border:1px solid var(--line); border-radius:12px; padding:12px; }
.modal h3 { margin:0 0 10px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.form-field label { display:block; color:var(--muted); font-size:11px; margin-bottom:3px; }
.form-field input, .form-field select, .form-field textarea { width:100%; background:#15171a; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:7px; }
.form-field.full { grid-column:1/-1; }
.modal-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:10px; }
.hint { color:var(--muted); font-size:11px; line-height:1.35; }
.selected-note { font-size:11px; color:var(--accent); margin-bottom:7px; }
@media (max-width:420px) {
  .backpack-grid { grid-template-columns:repeat(2,1fr); }
  .belt-grid { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:repeat(3,1fr); }
}