:root {
  --bg: #f4f7ff;
  --card: #ffffff;
  --primary: #5b8def;
  --ok: #2e9f6e;
  --bad: #c65a5a;
  --text: #1f2a44;
  --font-size: 20px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: var(--font-size); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 16px; background:#fff; position:sticky; top:0; z-index:3; box-shadow:0 2px 4px rgba(0,0,0,.08); }
.top-actions { display:flex; flex-wrap:wrap; gap:8px; }
button { border:none; background:var(--primary); color:#fff; padding:12px 14px; border-radius:12px; font-size:1rem; cursor:pointer; min-height:48px; }
button:hover, button:focus-visible { outline:3px solid #ffcf6a; outline-offset:2px; }
#app { padding: 14px; max-width: 1080px; margin: 0 auto; }
.grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); }
.card { background:var(--card); border-radius:16px; padding:14px; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.menu-btn { min-height:130px; font-size:1.1rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; background:#fff; color:var(--text); border:2px solid #d5e2ff; }
.menu-btn img { width:42px; height:42px; }
.visual { font-size:3rem; text-align:center; min-height:72px; display:flex; justify-content:center; align-items:center; }
.visual img { width:96px; height:96px; object-fit:cover; border-radius:12px; }
.options { display:grid; gap:10px; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
.option { background:#fff; color:var(--text); border:2px solid #d5e2ff; }
.feedback { font-weight:700; padding:10px; border-radius:12px; margin-top:10px; }
.ok { background:#e7f8ef; color:var(--ok); }
.bad { background:#fdecec; color:var(--bad); }
.drop-zone { min-height:130px; border:2px dashed #aac2ff; border-radius:12px; padding:8px; background:#fff; }
.draggable { background:#fff; border:1px solid #bbceff; padding:8px; border-radius:10px; margin:6px; display:inline-block; cursor:grab; touch-action:none; }
.dialog-inner { min-width: min(94vw, 840px); padding: 12px; }
label { display:block; margin: 8px 0; }
input, select, textarea { width:100%; padding:10px; border-radius:8px; border:1px solid #b7c7ef; }
input[type="checkbox"] { width:auto; padding:0; border:0; accent-color: var(--primary); transform: scale(1.3); }
.small { font-size:.9rem; opacity:.9; }
.score { font-size:1.1rem; font-weight:700; }
.list { max-height: 220px; overflow:auto; border:1px solid #d5e2ff; border-radius:8px; padding:8px; }
.inline { display:flex; gap:8px; flex-wrap:wrap; }
body.font-small { --font-size: 17px; }
body.font-medium { --font-size: 20px; }
body.font-large { --font-size: 24px; }
body.motion-off * { animation:none !important; transition:none !important; }

.mem-card.picked { border-color:#5b8def; background:#eef3ff; }
.mem-card.matched { border-color:#2e9f6e; background:#e7f8ef; opacity:.9; }
.sort-item { cursor: grab; }
.sort-item:active { cursor: grabbing; }
#sortList { align-items:stretch; }


.large-visual { min-height: 110px; }
.large-visual .visual,
.large-visual img { width: 120px; height: 120px; }
.large-visual span[aria-hidden="true"] { font-size: 4.2rem; line-height: 1; }
.mem-card.large-visual { min-height: 130px; padding: 14px; }
.mem-card.large-visual span:not([aria-hidden="true"]) { font-size: 1.5rem; font-weight: 700; }
.draggable.large-visual { min-width: 150px; min-height: 110px; padding: 10px 12px; font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.draggable.large-visual img { width: 56px; height: 56px; border-radius: 10px; }
.draggable.large-visual span[aria-hidden="true"] { font-size: 2.4rem; }
.oddone-card.large-visual { min-height: 150px; padding: 14px; }
.oddone-card.large-visual span[aria-hidden="true"] { font-size: 4.2rem; display: block; }
.oddone-card.large-visual img { width: 110px; height: 110px; margin: 0 auto; display: block; }


.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #d5e2ff; border-radius:10px; padding:10px 12px; background:#fff; }
.toggle-text { display:inline-flex; align-items:center; gap:8px; font-weight:600; }

/* 分类卡片进一步放大 */
.draggable.large-visual { min-width: 180px; min-height: 132px; font-size: 1.35rem; padding: 14px; gap: 10px; }
.draggable.large-visual img { width: 84px; height: 84px; border-radius: 12px; }
.draggable.large-visual span[aria-hidden="true"] { font-size: 3.3rem; }


#bank .draggable.large-visual { min-width: 200px; min-height: 170px; font-size: 1.4rem; padding: 16px 14px; gap: 12px; flex-direction: column; }
#bank .draggable.large-visual img { width: 120px; height: 120px; border-radius: 14px; }
#bank .draggable.large-visual span[aria-hidden="true"] { font-size: 4.8rem; line-height: 1; }