:root {
  color-scheme: light dark;
  --g0: #6b7280; --g1: #4b5563; --g2: #15803d; --g3: #2563eb; --g4: #dc2626; --g5: #9333ea; --g6: #ca8a04;
  --ic1: #fff0d2; --ic2: #ffc15a;
  --bg: #f3f4f6; --card: #ffffff; --ink: #111827; --muted: #6b7280; --line: #e5e7eb;
  --brand: #1f2937; --accent: #d97706; --accent-ink: #ffffff; --ok: #15803d; --bad: #b91c1c; --info: #1d4ed8;
  --radius: 0.75rem;
}
@media (prefers-color-scheme: dark) {
  :root { --g0: #9ca3af; --g1: #f3f4f6; --g2: #4ade80; --g3: #60a5fa; --g4: #f87171; --g5: #c084fc; --g6: #facc15; --ic1: #3a3326; --ic2: #d89a2e; --bg: #0f1115; --card: #1a1d24; --ink: #f3f4f6; --muted: #9ca3af; --line: #2a2f3a; --brand: #0b0d11; --accent: #f59e0b; --accent-ink: #111; --ok: #4ade80; --bad: #f87171; --info: #60a5fa; }
}
* { box-sizing: border-box; }
html { font-size: 17px; }
@media (min-width: 700px) { html { font-size: 18px; } }
@media (min-width: 1280px) { html { font-size: 19px; } }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.5 system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]), select, textarea { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 0.625rem; padding: 0.4375rem 0.625rem; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
select option { background: var(--card); color: var(--ink); }
input[type=checkbox] { width: 1.125rem; height: 1.125rem; accent-color: var(--accent); flex: none; }
a { color: var(--info); }
header.top { background: var(--brand); color: #fff; position: sticky; top: 0; z-index: 5; }
header.top .bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; max-width: 61.25rem; margin: 0 auto; }
header.top .logo { font-weight: 700; flex: 1; }
header.top .who { font-size: 0.875rem; opacity: .85; }
nav.tabs { display: flex; gap: 0.25rem; overflow-x: auto; padding: 0 0.75rem 0.5rem; max-width: 61.25rem; margin: 0 auto; scrollbar-width: none; }
nav.tabs a { color: #d1d5db; text-decoration: none; padding: 0.375rem 0.75rem; border-radius: 62.44rem; white-space: nowrap; font-size: 0.9375rem; }
nav.tabs a.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
main { max-width: 68.75rem; margin: 0 auto; padding: 0.75rem 0.875rem 4.375rem; }
h1 { font-size: 1.25rem; margin: 0.125rem 0 0.625rem; }
h2 { font-size: 1rem; margin: 0.875rem 0 0.375rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.625rem 0.875rem; margin-bottom: 0.625rem; }
.card.click { cursor: pointer; }
.card.click:hover { border-color: var(--accent); }
.row { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.muted { color: var(--muted); font-size: 0.875rem; }
.big { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.pos { color: var(--ok); } .neg { color: var(--bad); }
.badge { display: inline-block; font-size: 0.75rem; padding: 1px 0.5rem; border-radius: 62.44rem; background: var(--line); color: var(--ink); }
.badge.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge.warn { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.badge.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.badge.info { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
.btn { border: 1px solid var(--line); background: var(--card); padding: 0.5rem 0.875rem; border-radius: 0.625rem; cursor: pointer; min-height: 2.5rem; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.btn.small { padding: 0.25rem 0.625rem; min-height: 2rem; font-size: 0.875rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
label.f { display: block; margin: 0.625rem 0; font-size: 0.875rem; color: var(--muted); }
label.f > input, label.f > select, label.f > textarea, label.f > span > input { display: block; width: 100%; margin-top: 0.25rem; padding: 0.5625rem 0.625rem; border: 1px solid var(--line); border-radius: 0.625rem; background: var(--card); color: var(--ink); font-size: 1rem; }
label.f.inline { display: flex; align-items: center; gap: 0.5rem; }
label.f.inline > input { width: auto; margin: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
@media (max-width: 520px) { .two { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip { background: var(--line); border-radius: 62.44rem; padding: 0.125rem 0.625rem; font-size: 0.875rem; }
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr)); gap: 0.5rem; max-height: 20rem; overflow: auto; padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--bg); }
.pick label { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0.625rem; border-radius: 0.625rem; cursor: pointer; background: var(--card); border: 1px solid var(--line); min-width: 0; line-height: 1.25; }
.pick label:hover { border-color: var(--accent); }
.pick label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.pick label .nm { display: flex; flex-direction: column; min-width: 0; }
.pick label .nm b { font-weight: 600; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick label .nm small { color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.pickbar input { flex: 1; min-width: 8.75rem; }
.pickcount { font-size: 0.8125rem; color: var(--muted); }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: 0.5rem 0.375rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-weight: 500; font-size: 0.8125rem; }
td.num, th.num { text-align: right; }
.tabs2 { display: flex; gap: 0.375rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.tabs2 button { border: 1px solid var(--line); background: var(--card); padding: 0.375rem 0.875rem; border-radius: 62.44rem; cursor: pointer; }
.tabs2 button.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.empty { text-align: center; color: var(--muted); padding: 1.875rem 0; }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
@media (min-width: 640px) { .modal-back { align-items: center; } }
.modal { background: var(--card); width: 100%; max-width: 32.5rem; max-height: 92vh; overflow: auto; border-radius: 1rem 1rem 0 0; padding: 1.125rem; }
@media (min-width: 640px) { .modal { border-radius: 1rem; } }
.modal h3 { margin: 0 0 0.5rem; }
.actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.875rem; flex-wrap: wrap; }
#toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(5rem); background: var(--ink); color: var(--card); padding: 0.625rem 1.125rem; border-radius: 62.44rem; opacity: 0; transition: .25s; z-index: 50; max-width: 90vw; }
#toast.show { transform: translateX(-50%); opacity: 1; }
#toast.err { background: var(--bad); color: #fff; }
.login { max-width: 22.5rem; margin: 14vh auto 0; padding: 0 1rem; }
.pw { font: 700 1.375rem/1.4 ui-monospace, monospace; letter-spacing: 0.125rem; background: var(--line); padding: 0.625rem; border-radius: 0.625rem; text-align: center; user-select: all; }
.split { background: var(--bg); border-radius: 0.625rem; padding: 0.625rem 0.75rem; font-size: 0.9375rem; }
.split div { display: flex; justify-content: space-between; padding: 0.125rem 0; }
header.top .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
header.top .btn:hover { border-color: var(--accent); }

/* ---- 小圖示 ---- */
.ic { display: inline-flex; width: 1.3em; height: 1.3em; vertical-align: -0.3em; margin-right: .35em; flex: none; }
.ic svg { width: 100%; height: 100%; }
nav.tabs a .ic { width: 1.2em; height: 1.2em; margin-right: .3em; vertical-align: -0.25em; }
nav.tabs a.on .ic { --ic1: #fff7e6; --ic2: #ffffff; }
.badge .ic { width: 1.1em; height: 1.1em; margin-right: .2em; vertical-align: -0.22em; }
.btn.small .ic { width: 1.1em; height: 1.1em; margin-right: .25em; }
.btn.primary .ic { --ic1: #fff7e6; --ic2: #ffffff; }
.empty .ic.big { display: flex; width: 3.5rem; height: 3.5rem; margin: 0 auto 0.5rem; opacity: .8; }
a.card .ic { width: 1.7em; height: 1.7em; margin-right: .5em; vertical-align: -0.5em; }
header.top .logo .ic { width: 1.5em; height: 1.5em; vertical-align: -0.4em; }
.login h1 .ic { width: 1.4em; height: 1.4em; vertical-align: -0.3em; }
.badge.g { padding-left: 0.375rem; }

.ver { text-align: center; font-size: 0.75rem; padding: 1rem 0 1.5rem; }

/* 物品等級顏色：特殊灰、一般白、高級綠、稀有藍、英雄紅、傳說紫、神話黃 */
.badge.g { background: transparent; border: 1px solid currentColor; font-weight: 600; }
.badge.g-0 { color: var(--g0); } .badge.g-1 { color: var(--g1); } .badge.g-2 { color: var(--g2); } .badge.g-3 { color: var(--g3); }
.badge.g-4 { color: var(--g4); } .badge.g-5 { color: var(--g5); } .badge.g-6 { color: var(--g6); }
.itm { font-weight: 600; }
.gt-0 { color: var(--g0); } .gt-1 { color: var(--g1); } .gt-2 { color: var(--g2); } .gt-3 { color: var(--g3); }
.gt-4 { color: var(--g4); } .gt-5 { color: var(--g5); } .gt-6 { color: var(--g6); }

/* 分潤單卡片：物品是主角，左邊用等級色條 */
.ocard { border-left: 0.25rem solid var(--line); }
.otitle { font-size: 1.125rem; line-height: 1.3; }
.otitle .itm { font-weight: 700; }
.osub { margin-top: 0.375rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; font-size: 0.875rem; }
.holder { display: inline-flex; align-items: center; background: var(--line); border-radius: 62.44rem; padding: 1px 0.625rem 1px 0.375rem; font-weight: 600; }
.holder.me { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); }
.holder .ic { width: 1.1em; height: 1.1em; margin-right: .25em; }
.holderbox { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--bg); border: 1px solid var(--line); border-radius: 0.625rem; padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
.gb-0 { border-left-color: var(--g0); } .gb-1 { border-left-color: var(--g1); } .gb-2 { border-left-color: var(--g2); } .gb-3 { border-left-color: var(--g3); }
.gb-4 { border-left-color: var(--g4); } .gb-5 { border-left-color: var(--g5); } .gb-6 { border-left-color: var(--g6); }

/* ---- 緊湊排版 ---- */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20.62rem, 1fr)); gap: 0.5rem; align-items: start; }
.cardgrid > .card { margin: 0; }
.ocard { padding: 0.5rem 0.75rem; }
.otitle { font-size: 1rem; }
.otitle .itm { font-weight: 700; }
.osub { margin-top: 0.1875rem; gap: 0.125rem 0.625rem; font-size: 0.8125rem; }
.ocard .badge { font-size: 0.6875rem; padding: 0 0.4375rem; }
.holder { padding: 0 0.5rem 0 0.25rem; font-size: 0.8125rem; }
.holderbox { padding: 0.3125rem 0.625rem; margin: 0.375rem 0; }
.btn { min-height: 2.125rem; padding: 0.3125rem 0.75rem; font-size: 0.9375rem; }
.btn.small { min-height: 1.75rem; padding: 0.125rem 0.5625rem; font-size: 0.8125rem; }
label.f { margin: 0.375rem 0; }
label.f > input, label.f > select, label.f > textarea, label.f > span > input { padding: 0.4375rem 0.5625rem; margin-top: 0.125rem; }
table th, table td { padding-top: 0.3125rem; padding-bottom: 0.3125rem; }
.pick label { padding: 0.3125rem 0.5rem; }
.tabs2 { margin-bottom: 0.5rem; }

/* 上方分頁：排滿就換行，不再需要左右滑才看得到後面的 */
nav.tabs { flex-wrap: wrap; overflow: visible; gap: 0.125rem 0.1875rem; padding: 0 0.625rem 0.375rem; }
nav.tabs a { padding: 0.25rem 0.625rem; font-size: 0.875rem; }

/* ---- 各種螢幕：手機、平板、電腦都好按、好讀 ---- */
main { max-width: 80rem; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
header.top .bar, nav.tabs { max-width: 80rem; }
.btn { min-height: 2.5rem; padding: .4rem .95rem; font-size: 1rem; }
.btn.small { min-height: 2.1rem; padding: .2rem .7rem; font-size: .9rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 1rem; padding: .5rem .65rem; }
label.f { font-size: .9rem; margin: .5rem 0; }
label.f > input, label.f > select, label.f > textarea, label.f > span > input { padding: .55rem .65rem; font-size: 1rem; }
table { font-size: 1rem; } th, td { padding: .5rem .4rem; }
th { font-size: .85rem; }
.otitle { font-size: 1.15rem; } .osub { font-size: .9rem; gap: .2rem .8rem; } .ocard { padding: .6rem .85rem; }
.holder { font-size: .9rem; } .ocard .badge { font-size: .8rem; padding: 0 .5rem; }
.badge { font-size: .8rem; } .muted { font-size: .9rem; } .chip { font-size: .9rem; }
h1 { font-size: 1.4rem; } h2 { font-size: 1.1rem; }
nav.tabs a { font-size: .95rem; padding: .35rem .75rem; }
.tabs2 button { padding: .4rem 1rem; font-size: 1rem; }
.pick { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); max-height: 22rem; }
.pick label { padding: .45rem .6rem; } .pick label .nm b { font-size: 1rem; } .pick label .nm small { font-size: .8rem; }
.modal { max-width: 40rem; padding: 1.1rem 1.2rem; }
input[type=checkbox] { width: 1.3rem; height: 1.3rem; }
.card { padding: .75rem 1rem; }
@media (pointer: coarse) {
  .btn { min-height: 2.9rem; } .btn.small { min-height: 2.5rem; padding: .3rem .8rem; }
  nav.tabs a { padding: .5rem .85rem; }
  .pick label { min-height: 2.8rem; }
  input[type=checkbox] { width: 1.5rem; height: 1.5rem; }
}
@media (max-width: 640px) {
  .modal { max-height: 94vh; border-radius: 1rem 1rem 0 0; }
  .cardgrid { grid-template-columns: 1fr; }
  header.top .who { display: none; }
}
@media (min-width: 900px) { .grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }

/* 有顏色的下拉選單 */
.suggest { position: fixed; z-index: 60; background: var(--card); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.35); overflow-y: auto; padding: 0.25rem; }
.sg-row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.75rem; border-radius: 0.5rem; cursor: pointer; font-weight: 600; }
.sg-row:hover, .sg-row.on { background: rgba(127,127,127,.18); }
.sg-note { font-weight: 500; font-size: 0.8em; opacity: .85; white-space: nowrap; }