:root{--card-w:120px}
  body{font-family:"Segoe UI", Roboto, "Noto Sans TC", Arial; margin:20px; background:#fafafa; color:#222}
  h1,h2{margin:8px 0}
  button{padding:6px 10px; border-radius:6px; border:1px solid #ccc; background:#fff; cursor:pointer}
  button:disabled{opacity:0.5; cursor:not-allowed}
  .controls{margin-bottom:12px}
  #feed{display:flex; flex-wrap:wrap; gap:12px}
  .entry{
    background:#fff; border:1px solid #e2e2e2; border-radius:10px; padding:10px; width:320px;
    box-shadow:0 2px 6px rgba(0,0,0,0.04);
    display:flex; flex-direction: column;
  }
  .entry h3{margin:0 0 8px 0; font-size:16px}
  .card-row{display:flex; flex-wrap:wrap; gap:8px}
  .card{
    width:var(--card-w); text-align:center;  border-radius:8px; padding:6px; border:1px solid #eee;
    box-shadow:0 1px 3px rgba(0,0,0,0.03);
  }
  .card img{width:100%; height:80px; object-fit:cover; border-radius:6px}
  .card small{display:block; margin-top:6px; font-size:12px; color:#555}
  /* modal */
  .modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index:999}
  .modal.hidden{display:none}
  .modal-box{background:#fff; border-radius:10px; padding:16px; width:92%; max-width:760px; max-height:90vh; overflow:auto; box-shadow:0 8px 30px rgba(0,0,0,0.2)}
  .grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
  .select-card{width:110px; padding:6px; border-radius:8px; border:1px solid #eee; text-align:center;}
  .select-card img{width:100%; height:70px; object-fit:cover; border-radius:6px}
  .select-card .need-checkbox{margin-top:6px}
  .select-card input[type=number]{width:60px; margin-top:6px}
  label{display:block; margin-top:8px}
  .actions{margin-top:12px; display:flex; justify-content: flex-end; gap:8px}
  .danger{background:#f44336; color:#fff; border-color:#d33}
  /* small helpers */
  .muted{font-size:13px; color:#666}
  .inline{display:inline-block; vertical-align:middle}
  /* step header */
  .step-header{font-weight:600; font-size:18px; margin-bottom:12px}
  /* nav buttons container */
  .nav-buttons{display:flex; justify-content: space-between; margin-top:20px}
  /* step container 只有 active 的才顯示 */
  .step { display: none; }
  .step.active { display: block; }
  

  /* 稀有度底色 */
.card.rarity-item, .select-card.rarity-item { background-color: #77c2ff !important; }
.card.rarity-n, .select-card.rarity-n { background-color: #b69f7e !important; }
.card.rarity-r, .select-card.rarity-r { background-color: silver !important; }
.card.rarity-sr, .select-card.rarity-sr { background-color: #e0906b !important; }
.card.rarity-ssr, .select-card.rarity-ssr { background-color: rgb(255, 234, 114) !important; }
.card.rarity-ur, .select-card.rarity-ur { background: linear-gradient(45deg,
  rgba(255, 0, 0, 0.4),   /* 紅色 */
  rgba(255, 165, 0, 0.4), /* 橙色 */
  rgba(255, 255, 0, 0.4), /* 黃色 */
  rgba(0, 128, 0, 0.4),   /* 綠色 */
  rgba(0, 0, 255, 0.4),   /* 藍色 */
  rgba(128, 0, 128, 0.4)  /* 紫色 */
) !important; }
.card.rarity-scene, .select-card.rarity-scene { background-color: #ebe2b3 !important; }