:root {
  --primary:#2563eb; --primary-dark:#1d4ed8; --primary-soft:#dbeafe;
  --bg-main:#f8fafc; --bg-card:#fff; --bg-elevated:#f1f5f9;
  --text-primary:#0f172a; --text-secondary:#475569; --text-muted:#94a3b8;
  --success:#10b981; --warning:#d97706; --danger:#b42318;
  --border:#e2e8f0; --radius:10px; --radius-lg:16px;
  --shadow:0 4px 6px -1px rgb(0 0 0 / 5%),0 2px 4px -2px rgb(0 0 0 / 5%);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg-main); color:var(--text-primary); font:14px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
button:focus-visible,a:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
[hidden] { display:none !important; }
.navbar { background:var(--bg-card); border-bottom:1px solid var(--border); }
.navbar-content { max-width:1080px; margin:auto; height:58px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; color:var(--text-primary); white-space:nowrap; }
.brand-icon { width:30px; height:30px; display:grid; place-items:center; background:var(--primary); color:white; border-radius:9px; font-size:17px; }
.version-tag { font-size:10px; color:var(--text-muted); background:var(--bg-elevated); padding:2px 5px; border-radius:4px; }
.navbar-note { font-size:12px; color:var(--text-secondary); }
.container { max-width:1080px; margin:0 auto; padding:30px 24px 18px; }
.search-card,.panel,.result-panel { background:white; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.search-card { padding:24px; margin-bottom:20px; }
.search-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:21px; letter-spacing:-.3px; }
.search-heading p { margin-top:4px; font-size:13px; color:var(--text-secondary); }
.currency-tag { white-space:nowrap; color:var(--primary); background:#eff6ff; border:1px solid #dbeafe; font-size:11px; padding:4px 9px; border-radius:6px; }
.search-form { display:flex; gap:10px; }
input { min-width:0; border:1px solid #cbd5e1; background:white; border-radius:var(--radius); color:var(--text-primary); outline:none; }
input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgb(37 99 235 / 12%); }
#query { flex:1; width:100%; padding:11px 13px; font-size:14px; }
.primary-button { background:var(--primary); border:0; border-radius:var(--radius); color:white; padding:10px 22px; font-weight:600; white-space:nowrap; }
.primary-button:hover { background:var(--primary-dark); }
.primary-button:disabled { opacity:.65; cursor:wait; }
.examples { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:12px; font-size:11px; color:var(--text-muted); }
.examples button { border:1px solid var(--border); background:var(--bg-main); color:var(--text-secondary); padding:3px 8px; border-radius:5px; font-size:11px; }
.examples button:hover { border-color:#93c5fd; color:var(--primary); }
#search-status:not(:empty) { padding-top:12px; font-size:12px; color:var(--text-secondary); }
#search-status.error { color:var(--danger); }
.result-panel { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; padding:24px; margin-bottom:20px; }
.card-preview { align-self:start; text-align:center; }
#card-image { display:block; width:100%; height:auto; aspect-ratio:488/680; object-fit:contain; border-radius:4.75% / 3.5%; filter:drop-shadow(1px 2px 4px rgb(0 0 0 / 25%)); }
#image-fallback { padding:80px 0; color:var(--text-muted); background:var(--bg-elevated); border-radius:10px; }
.secondary-button { font-size:11px; border:1px solid var(--border); border-radius:6px; padding:4px 10px; background:white; color:var(--text-secondary); margin-top:12px; }
.card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:1px 0 18px; }
#card-name { font-size:20px; font-weight:700; line-height:1.4; word-break:break-word; }
.chinese-name { color:var(--text-secondary); font-size:14px; margin-top:4px; }
.set-info { color:#72839b; font-size:12px; margin-top:6px; }
.source-link { white-space:nowrap; font-size:11px; padding-top:4px; }
.price-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:space-between; padding:10px 0; border-top:1px solid var(--border); }
.price-heading h3,.section-heading h3 { font-size:13px; font-weight:600; }
.price-heading span { font-size:10px; color:#72839b; }
.price-table-scroll { width:100%; overflow-x:auto; border:1px solid #d5dfeb; border-radius:10px; background:white; scrollbar-color:#cbd5e1 #f8fafc; }
.price-table-scroll:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.price-table { border-collapse:separate; border-spacing:0; table-layout:fixed; width:100%; min-width:648px; font-size:12px; }
.language-col { width:54px; }
.finish-col { width:72px; }
.condition-col { width:48px; }
.price-table th,.price-table td { border-right:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; padding:10px; }
.price-table tr > :last-child { border-right:0; }
.price-table thead th { text-align:center; color:var(--text-secondary); font-size:11px; font-weight:600; white-space:nowrap; }
.table-groups th { height:32px; padding:7px 8px; background:#edf3fa; }
.table-platforms th { height:34px; padding:7px 8px; background:#f8fafc; }
.column-subtitle { display:block; font-size:10px; color:#72839b; font-weight:400; margin-top:2px; }
.price-table .market-column { border-right:2px solid #cbd5e1; background:#f4f8ff; }
.quote-row td,.quote-row th { height:60px; vertical-align:middle; }
.attribute-cell,.finish-cell { text-align:center; font-size:11px; white-space:nowrap; background:#fbfcfe; color:var(--text-secondary); }
.finish-cell { font-weight:600; }
.condition-cell { font-size:10px; font-weight:600; color:#72839b; }
.quote-cell { text-align:right; color:var(--success); white-space:nowrap; }
.price-amount { display:inline-block; font-size:17px; line-height:1.6; font-weight:650; font-variant-numeric:tabular-nums; color:inherit; text-align:right; white-space:nowrap; }
.quote-row:hover td,.quote-row:hover th { background:#f1f6fd; }
.foil-row .quote-cell,.foil-row .finish-cell { color:var(--warning); }
.etched-row .quote-cell,.etched-row .finish-cell { color:#8b5cf6; }
.price-state { font-size:11px; font-weight:400; color:var(--text-muted); text-align:right; }
.price-table tfoot td,.price-table tfoot th { height:42px; border-bottom:0; padding:8px 10px; background:#fafbfd; vertical-align:middle; }
.price-table tfoot th { font-size:10px; font-weight:500; text-align:center; color:#72839b; }
.price-note { font-size:10px; color:#72839b; line-height:1.5; display:flex; justify-content:flex-end; flex-wrap:wrap; align-items:center; gap:4px; }
.price-note.error { color:var(--danger); }
.retry-button { color:var(--primary); font-size:10px; border:0; background:transparent; padding:0 3px; }
.table-scroll-hint { font-size:10px; color:#72839b; text-align:right; padding-top:7px; }
.price-explanation { color:#72839b; font-size:10px; line-height:1.7; padding:12px 3px 0; }
.panel { padding:20px 24px; margin-bottom:20px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.section-heading span { color:var(--text-muted); font-size:11px; }
.version-controls { display:flex; align-items:center; gap:12px; margin:12px 0; }
#version-filter { padding:7px 10px; width:240px; max-width:75%; font-size:12px; }
#version-count { color:var(--text-muted); font-size:11px; }
.versions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:390px; overflow:auto; padding:2px; }
.version-button { display:flex; align-items:center; gap:10px; text-align:left; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:8px; color:var(--text-secondary); min-width:0; }
.version-button:hover { border-color:#93c5fd; background:#f8fbff; }
.version-button[aria-pressed="true"] { border-color:var(--primary); background:#eff6ff; color:var(--primary); }
.version-button img { width:34px; height:47px; border-radius:3px; object-fit:cover; flex-shrink:0; }
.version-info { min-width:0; }
.version-info strong { display:block; font-size:12px; }
.version-info span { display:block; font-size:10px; color:#72839b; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.empty-state { text-align:center; color:var(--text-muted); padding:60px 15px 70px; }
.empty-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 16px; border:1px solid #dce5f0; border-radius:16px; background:#eff6ff; color:#93b4ee; font-size:29px; }
.empty-state h2 { font-size:16px; color:var(--text-secondary); margin-bottom:7px; }
.empty-state p { font-size:12px; line-height:1.9; }
.candidate-button { display:block; border:1px solid var(--border); border-radius:7px; background:var(--bg-main); padding:8px 12px; margin-top:8px; width:100%; text-align:left; color:var(--text-secondary); }
footer { text-align:center; color:#94a3b8; font-size:10px; line-height:1.8; padding:18px 5px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:980px) {
  .result-panel { grid-template-columns:150px minmax(0,1fr); gap:18px; }
  .card-details { display:contents; }
  .card-heading { align-self:start; border-bottom:0; padding:0; }
  .price-heading,.price-table-scroll,.table-scroll-hint,.price-explanation { grid-column:1/-1; }
  .price-heading { padding-bottom:0; }
  .price-explanation { padding-top:0; }
}
@media (max-width:760px) {
  .container { padding:18px 14px; }
  .navbar-content { padding:0 14px; }
  .navbar-note { display:none; }
  .search-card { padding:18px; }
  h1 { font-size:18px; }
  .currency-tag { display:none; }
  .result-panel { grid-template-columns:150px minmax(0,1fr); gap:18px; padding:18px; }
  .card-details { display:contents; }
  .card-heading { align-self:start; border-bottom:0; padding:0; display:block; }
  #card-name { font-size:18px; }
  .source-link { display:inline-block; margin-top:10px; }
  .price-table tbody tr > :first-child,.price-table .table-groups > :first-child { position:sticky; left:0; z-index:1; }
  .price-table tbody tr > :nth-child(2),.price-table .table-groups > :nth-child(2) { position:sticky; left:54px; z-index:1; border-right:1px solid #b8c9df; box-shadow:2px 0 3px rgb(27 51 83 / 3%); }
  .versions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel { padding:18px; }
}
@media (max-width:400px) {
  .search-form { gap:7px; }
  .primary-button { padding:10px 12px; font-size:12px; }
  #query { font-size:12px; }
  .result-panel { grid-template-columns:122px minmax(0,1fr); gap:14px; padding:14px; }
  #card-name { font-size:16px; }
  .price-amount { font-size:16px; }
}