:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050b14;
  color: #eaf0f8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; padding-bottom: 92px; background: radial-gradient(circle at 80% -10%, #193b68 0, transparent 34rem), #050b14; }
body > header, body > main { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
body > header { padding: 56px 0 30px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.header-actions { display: flex; align-items: stretch; gap: 9px; }
h1 { margin: 4px 0 8px; font-size: clamp(2rem, 6vw, 4.7rem); letter-spacing: -0.055em; line-height: .95; }
.eyebrow { color: #7eb8ff; font-size: .75rem; letter-spacing: .17em; font-weight: 800; }
.subtitle { color: #9babc1; margin: 0; }
.panel { background: rgba(13, 24, 40, .82); border: 1px solid #243955; box-shadow: 0 18px 60px #0007; backdrop-filter: blur(12px); }
.controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; border-radius: 18px; padding: 18px; }
.search-area { min-width: 0; }
.search-and-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 205px) minmax(145px, 175px); gap: 10px; align-items: end; }
.search-field { min-width: 0; }
.set-field select, .sort-field select { min-height: 52px; border-radius: 14px; border-color: #3a5778; background: #0b1a2b; font-weight: 800; }
.search-shell { display: flex; align-items: center; min-height: 52px; border: 1px solid #3a5778; border-radius: 14px; padding: 0 12px; background: #07111f; }
.search-shell:focus-within { border-color: #55a5ff; box-shadow: 0 0 0 3px #2687ed2c; }
.search-shell input { border: 0; box-shadow: none; padding-inline: 9px; }
.search-shell input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.search-shell input::-ms-clear { display: none; }
.search-shell input:focus { border: 0; box-shadow: none; }
.search-icon { color: #75b7fa; font-size: 1.5rem; transform: rotate(-20deg); }
#clear-search { width: 30px; height: 30px; border-radius: 50%; padding: 0; background: #1d3149; color: #bdcadb; font-size: 1.15rem; }
.quick-keywords { display: flex; align-items: center; gap: 7px; margin-top: 11px; overflow-x: auto; }
.quick-keywords > span { flex: 0 0 auto; color: #7589a2; font-size: .63rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; margin-right: 3px; }
.quick-keywords button { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #29425f; border-radius: 999px; background: #132238; color: #91a5bc; font-size: .68rem; }
.quick-keywords button.active { border-color: #5aa7f5; background: #214d7c; color: #eef7ff; }
.controls-side { display: grid; grid-template-columns: minmax(170px, 210px) auto auto; grid-template-areas: "rate filters reset"; gap: 10px; align-items: start; }
.rate-field { grid-area: rate; }
.filter-toggle { grid-area: filters; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; border: 1px solid #355578; background: #172941; color: #d7e5f5; }
#reset-rate { grid-area: reset; min-height: 46px; margin-top: 18px; }
#filter-count { min-width: 21px; height: 21px; padding: 2px 6px; border-radius: 999px; background: #e73f51; color: #fff; font-size: .7rem; }
.active-filter-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.active-filter-row:empty { display: none; }
.active-filter { border-radius: 999px; padding: 7px 11px; background: #173b5f; color: #cde7ff; font-size: .7rem; }
.filter-panel { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(110px, 1fr)) auto; gap: 12px; padding-top: 15px; border-top: 1px solid #263b55; }
.filter-panel:not([hidden]) { display: grid; }
label > span { display: block; margin-bottom: 7px; color: #aebcd0; font-size: .78rem; font-weight: 700; }
input, select, button { font: inherit; }
input, select { width: 100%; border: 1px solid #304866; border-radius: 10px; background: #07111f; color: #f7faff; padding: 11px 12px; outline: none; }
input:focus, select:focus { border-color: #55a5ff; box-shadow: 0 0 0 3px #2687ed2c; }
.rate-input { display: flex; align-items: center; gap: 8px; }
.rate-input input { min-height: 46px; }
.rate-input b { color: #75dbaf; }
.rate-field small { color: #7e91aa; display: block; margin-top: 6px; }
button { border: 0; border-radius: 10px; padding: 11px 16px; cursor: pointer; font-weight: 800; }
button:disabled { opacity: .55; cursor: wait; }
.primary { background: #ef3c4e; color: white; box-shadow: 0 8px 26px #ef3c4e3d; }
.secondary { background: #1e3149; color: #cfdaea; }
.status-row { display: flex; justify-content: space-between; color: #8394aa; font-size: .85rem; padding: 14px 4px 6px; }
.result-sections { padding-bottom: 60px; }
.rarity-section { margin-top: 22px; }
.rarity-heading { display: flex; align-items: baseline; gap: 9px; margin: 0 3px 12px; padding-bottom: 9px; border-bottom: 1px solid #29425e; }
.rarity-heading h2 { margin: 0; color: #f3f7fc; font-size: 1.45rem; letter-spacing: -.03em; }
.rarity-heading > span { color: #76b9fb; font-size: .69rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.rarity-heading small { margin-left: auto; color: #71859e; font-size: .7rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 16px; }
.card-item { min-width: 0; display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 14px; border: 1px solid #1f334d; border-radius: 16px; background: linear-gradient(145deg, #0e1b2c, #08121f); cursor: pointer; transition: transform .16s ease, border-color .16s ease; }
.card-item { content-visibility: auto; contain-intrinsic-size: 118px; }
.card-item:hover { transform: translateY(-2px); border-color: #4775a8; }
.card-item:focus-visible { outline: 3px solid #398fe7; outline-offset: 2px; }
.image-button { appearance: none; background: transparent; padding: 0; align-self: start; }
.image-button img { width: 90px; border-radius: 7px; display: block; background: #122238; }
.card-copy { min-width: 0; }
.meta { display: flex; justify-content: space-between; gap: 8px; color: #86a4c8; font-size: .68rem; font-weight: 800; }
.rarity { color: #7be0b5; }
.name-en { font-size: .92rem; line-height: 1.3; margin: 8px 0 2px; overflow-wrap: anywhere; }
.name-ja { color: #8295ad; font-size: .7rem; line-height: 1.3; margin: 0 0 12px; min-height: 1.8em; overflow-wrap: anywhere; }
.details { color: #75b7f7; font-size: .65rem; line-height: 1.45; margin: 0 0 10px; overflow-wrap: anywhere; }
.prices { display: flex; flex-direction: column; }
.myr { color: #fff; font-size: 1.25rem; }
.jpy { color: #91a2b7; font-size: .77rem; }
.source { color: #75aff5; font-size: .72rem; text-decoration: none; }
.card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.add-to-cart { padding: 7px 10px; border: 1px solid #3875aa; border-radius: 9px; background: #183b60; color: #e9f5ff; font-size: .68rem; }
body > footer { width: min(1180px, calc(100% - 32px)); margin: -36px auto 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #6f8198; font-size: .72rem; }
body > footer a { color: #75aff5; }
body > footer p { margin: 0; text-align: right; }
.footer-brand { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.footer-brand strong { color: #cdeffc; font: 900 .78rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.footer-brand span { color: #65dcb0; font-size: .66rem; font-weight: 800; }

.card-dialog { width: min(920px, calc(100% - 28px)); max-height: min(840px, calc(100vh - 28px)); padding: 0; border: 1px solid #345174; border-radius: 22px; color: #edf4fc; background: linear-gradient(145deg, #101e31, #07101c); box-shadow: 0 30px 100px #000c; overflow: auto; }
.card-dialog::backdrop { background: #01050bd9; backdrop-filter: blur(8px); }
.dialog-close { position: sticky; z-index: 2; float: right; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; padding: 0; background: #20344d; color: #fff; font-size: 1.5rem; }
.dialog-layout { display: grid; grid-template-columns: minmax(260px, 330px) 1fr; gap: 30px; padding: 30px; }
.dialog-image-trigger { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.dialog-image-trigger img { display: block; width: 100%; border-radius: 16px; box-shadow: 0 18px 60px #0009; }
.dialog-image-trigger span { position: absolute; right: 8px; bottom: 8px; padding: 6px 8px; border: 1px solid #70dff3a8; border-radius: 3px; background: #04101bd9; color: #b9f5ff; font: 800 .56rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .82; transition: opacity .16s ease, transform .16s ease; }
.dialog-image-trigger:hover span, .dialog-image-trigger:focus-visible span { opacity: 1; transform: translateY(-2px); }
.dialog-image-trigger:focus-visible { outline: 2px solid #63d9f7; outline-offset: 4px; }
.dialog-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; }
.dialog-price-row strong { font-size: 1.8rem; }
.dialog-price-row span { color: #91a3b9; }
.dialog-meta { display: flex; justify-content: space-between; color: #7eb8ff; font-size: .76rem; font-weight: 900; letter-spacing: .08em; }
.printing-origin { margin-inline: auto 7px; padding: 4px 6px; border: 1px solid #f49a4d; border-radius: 2px; background: #4b260d; color: #ffd4a6; font: 900 .52rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; white-space: nowrap; }
.printing-origin[hidden] { display: none; }
.dialog-copy h2 { margin: 14px 0 2px; font-size: clamp(1.8rem, 4vw, 3.1rem); letter-spacing: -.04em; line-height: 1; }
#dialog-name-ja { color: #8fa1b8; margin: 7px 0 18px; }
#dialog-details { color: #74b8fa; font-size: .82rem; line-height: 1.6; }
.ability-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.ability-badge { border-radius: 999px; padding: 6px 10px; font-size: .72rem; font-weight: 900; }
.ability-badge.timing { background: #2b68a5; color: #e8f4ff; }
.ability-badge.keyword { background: #174d3c; color: #8ce9bd; }
.rules-panel { border: 1px solid #2b425e; border-left: 4px solid #e54152; border-radius: 14px; padding: 17px 18px; background: #07111e; }
.rules-label { margin: 0 0 12px; color: #ef6f7d; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
#dialog-effect p { margin: 0 0 12px; color: #dce6f3; font-size: .94rem; line-height: 1.65; }
#dialog-effect p:last-child { margin-bottom: 0; }
.dialog-source { display: inline-block; margin-top: 18px; color: #75b7fa; text-decoration: none; font-size: .82rem; }
.dialog-add-cart { width: 100%; margin-top: 14px; background: #ef3c4e; color: #fff; box-shadow: 0 8px 26px #ef3c4e35; }
.image-lightbox { box-sizing: border-box; width: min(640px, calc(100% - 20px)); max-height: calc(100dvh - 20px); padding: 12px; border: 1px solid #3c6388; background: radial-gradient(circle at 50% 20%, #15324a, #020811 70%); color: #edf4fc; box-shadow: 0 30px 100px #000e; overflow: auto; }
.image-lightbox::backdrop { background: #01040bed; backdrop-filter: blur(12px); }
.image-lightbox .dialog-close { position: sticky; z-index: 2; top: 0; right: 0; float: right; }
.image-lightbox-stage { display: grid; justify-items: center; gap: 10px; min-height: 0; margin: 0; padding: 6px; }
.image-lightbox-stage img { display: block; width: auto; max-width: 100%; max-height: calc(100dvh - 92px); object-fit: contain; filter: drop-shadow(0 18px 36px #000b); }
.image-lightbox-stage figcaption { color: #8ea9bd; font: 700 .65rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; text-align: center; }

.cart-bar { position: fixed; z-index: 10; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(520px, calc(100% - 24px)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid #4b83b8; border-radius: 16px; background: rgba(18, 48, 78, .96); color: #fff; box-shadow: 0 14px 45px #000b; backdrop-filter: blur(14px); text-align: left; }
.cart-bar[hidden] { display: none; }
.cart-bar-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #ef3c4e; font-size: 1.25rem; }
.cart-bar span:nth-child(2) { display: flex; flex-direction: column; }
.cart-bar strong { font-size: .9rem; }
.cart-bar small { color: #9db8d4; font-size: .66rem; margin-top: 2px; }
.cart-bar > b { font-size: 1.1rem; }
.cart-dialog { width: min(1120px, calc(100% - 24px)); max-height: min(860px, calc(100vh - 24px)); padding: 0; border: 1px solid #345174; border-radius: 24px; color: #edf4fc; background: #091522; box-shadow: 0 30px 100px #000c; overflow: auto; }
.cart-dialog::backdrop { background: #01050be6; backdrop-filter: blur(8px); }
.cart-header { position: sticky; z-index: 2; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 22px 24px 16px; background: linear-gradient(#0e2034 80%, transparent); }
.cart-header p { margin: 0 0 3px; color: #72b6fa; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.cart-header h2 { margin: 0; font-size: 1.8rem; letter-spacing: -.04em; }
.cart-header .dialog-close { position: static; float: none; }
.cart-items { display: grid; gap: 17px; padding: 8px 24px 18px; }
.cart-section { display: grid; gap: 8px; }
.cart-section-header { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 8px 11px 8px 13px; border: 1px solid #203b52; border-left: 3px solid var(--section-accent); background: linear-gradient(90deg, color-mix(in srgb, var(--section-accent) 10%, #081522), #081522 42%); }
.cart-section-header > div { min-width: 0; }
.cart-section-header h3 { margin: 0 0 3px; color: #eef8fd; font: 900 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.cart-section-header span { display: block; color: #718ba1; font: 700 .58rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.cart-section-header > strong { margin-left: 12px; color: color-mix(in srgb, var(--section-accent) 72%, white); font-size: .82rem; white-space: nowrap; }
.cart-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cart-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto minmax(88px, auto); align-items: center; gap: 12px; padding: 11px; border: 1px solid #203750; border-radius: 14px; background: #0d1c2d; }
.cart-card-trigger { border: 0; background: transparent; color: inherit; cursor: pointer; }
.cart-item-image { width: 54px; height: 76px; padding: 0; }
.cart-item-image img { display: block; width: 100%; height: 100%; border: 1px solid transparent; border-radius: 5px; object-fit: cover; background: #13243a; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.cart-item-copy { width: 100%; min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 5px 4px; text-align: left; }
.cart-item-copy > * { max-width: 100%; }
.cart-item-copy span { color: #74b8fa; font-size: .65rem; font-weight: 800; }
.cart-item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.cart-item-copy small, .cart-line-total small { color: #8396ad; font-size: .68rem; }
.cart-item-image:hover img, .cart-item-image:focus-visible img { border-color: #63d9f7; box-shadow: 0 0 16px #42cbea55; transform: translateY(-1px); }
.cart-item-copy:hover strong, .cart-item-copy:focus-visible strong { color: #91eaff; }
.cart-card-trigger:focus-visible { outline: 2px solid #63d9f7; outline-offset: 3px; }
.quantity-controls { display: grid; grid-template-columns: 30px 24px 30px; align-items: center; text-align: center; }
.quantity-controls button { width: 30px; height: 30px; padding: 0; border: 1px solid #365575; background: #142941; color: #eaf4ff; }
.quantity-controls b { font-size: .8rem; }
.cart-line-total { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cart-line-total strong { font-size: .9rem; }
.cart-summary { margin: 0 24px; padding: 18px; border: 1px solid #2b4867; border-radius: 16px; background: #10253b; }
.cart-summary > div { display: flex; justify-content: space-between; margin-bottom: 9px; color: #9aacc0; font-size: .78rem; }
.cart-summary > div strong { color: #e9f1f9; }
.cart-summary .cart-grand-total { align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px solid #32516f; color: #cbd8e6; font-weight: 800; }
.cart-summary .cart-grand-total strong { color: #fff; font-size: 1.75rem; }
.cart-summary > small { display: block; color: #6f87a0; text-align: right; }
.cart-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 24px 0; }
.cart-tools button { min-height: 47px; }
.clear-cart { display: block; margin: 8px auto 24px; background: transparent; color: #f27a87; }
.cart-empty { margin: 34px 12px; color: #8498af; text-align: center; line-height: 1.6; }
@media (max-width: 999px) {
  .cart-section-grid { grid-template-columns: 1fr; }
}
.list-dialog { width: min(680px, calc(100% - 24px)); max-height: min(820px, calc(100vh - 24px)); padding: 0; border: 1px solid #3c6388; color: #edf4fc; background: linear-gradient(145deg, #0d1e31, #040b13); box-shadow: 0 30px 100px #000c; overflow: auto; }
.list-dialog::backdrop { background: #01050be6; backdrop-filter: blur(8px); }
.list-dialog-header { position: sticky; z-index: 2; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 21px 24px 15px; background: linear-gradient(#0b1d30 82%, transparent); }
.list-dialog-header p { margin: 0 0 3px; color: #65cdec; font: 800 .62rem/1 ui-monospace, monospace; letter-spacing: .13em; }
.list-dialog-header h2 { margin: 0; font-size: 1.65rem; }
.list-dialog-header .dialog-close { position: static; float: none; }
.list-dialog-body { display: grid; gap: 13px; padding: 8px 24px 24px; }
.list-help { margin: 0; color: #8da1b8; font-size: .76rem; line-height: 1.55; }
.list-dialog textarea { width: 100%; resize: vertical; border: 1px solid #2d506f; border-radius: 3px; padding: 13px; outline: none; background: #030b14; color: #eef7ff; font: .76rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; box-shadow: inset 3px 0 #49c8ee; }
.list-dialog textarea:focus { border-color: #55cff5; box-shadow: inset 3px 0 #55cff5, 0 0 0 2px #55cff51c; }
.import-utilities, .export-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.import-utilities > *, .export-actions > * { flex: 1 1 130px; }
.export-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border: 1px solid #28455f; background: #050f1b; }
.export-mode-toggle:has(#export-mode-deck[hidden]) { grid-template-columns: 1fr; }
.export-mode-toggle button { display: flex; align-items: flex-start; flex-direction: column; min-height: 57px; padding: 10px 12px; border: 1px solid transparent; background: transparent; color: #8196ad; text-align: left; }
.export-mode-toggle button span { color: #c4d2e1; font-size: .78rem; }
.export-mode-toggle button small { margin-top: 3px; color: #6f849b; font: .6rem/1.2 ui-monospace, monospace; text-transform: uppercase; }
.export-mode-toggle button.active { border-color: #4dc5ea; background: linear-gradient(135deg, #123e5c, #0b263e); box-shadow: inset 3px 0 #55d3f5, 0 0 18px #29bde51b; }
.export-mode-toggle button.active span { color: #f3fbff; }
.export-mode-toggle button.active small { color: #72d9f5; }
.file-picker { display: grid; place-items: center; min-height: 40px; border: 1px solid #315171; border-radius: 3px; background: #102238; color: #cfdaea; cursor: pointer; font-size: .78rem; font-weight: 800; }
.file-picker input { display: none; }
.import-feedback { min-height: 48px; padding: 11px 12px; border: 1px solid #263f59; background: #081727; color: #91a6bd; font-size: .75rem; line-height: 1.5; }
.import-feedback strong { color: #75e1b4; }
.import-feedback.warning { border-color: #815766; color: #f1aab3; }
.printing-note { display: block; margin-top: 5px; color: #73cce9; }
.import-printing-panel { padding: 13px; border: 1px solid #2d5873; background: #06131f; }
.import-printing-panel[hidden] { display: none; }
.import-printing-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.import-printing-heading > div { display: grid; gap: 4px; }
.import-printing-heading > div > span { color: #5ccfee; font: 800 .57rem/1 ui-monospace, monospace; letter-spacing: .13em; }
.import-printing-heading strong { color: #eef8fc; font-size: .86rem; }
.import-printing-heading label { flex: 0 0 190px; }
.import-printing-heading label > span { margin-bottom: 4px; }
.import-printing-heading select { min-height: 38px; padding-block: 7px; font-size: .7rem; }
.import-printing-panel > p { margin: 10px 0; color: #7890a5; font-size: .68rem; line-height: 1.45; }
.import-printing-choices { display: grid; max-height: 245px; overflow: auto; border-top: 1px solid #1d3c52; }
.import-printing-choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 245px); align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid #172f42; }
.import-printing-choice > span { display: grid; min-width: 0; gap: 3px; }
.import-printing-choice strong { color: #dcecf6; font: 800 .7rem/1.2 ui-monospace, monospace; }
.import-printing-choice small { overflow: hidden; color: #7d93a8; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.import-printing-choice select { min-height: 36px; padding-block: 6px; font-size: .68rem; }
.unmatched-codes { display: block; margin-top: 4px; color: #ff8796; font-family: ui-monospace, monospace; }
.replace-cart { display: flex; align-items: center; gap: 9px; color: #b8c7d8; font-size: .78rem; }
.replace-cart input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: #38bfe8; }
.export-actions .primary { flex-grow: 1.35; }
.export-actions .export-image { border-color: #3bb6d7; background: #103a52; color: #dff9ff; }

@media (max-width: 840px) {
  header { align-items: stretch; flex-direction: column; padding-top: 34px; }
  .controls { grid-template-columns: 1fr; }
  .controls-side { grid-template-columns: minmax(170px, 1fr) auto auto; }
  .active-filter-row, .filter-panel { grid-column: 1; }
  .filter-panel { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  header, main { width: min(100% - 20px, 1180px); }
  .controls-side { grid-template-columns: 1fr 1fr; grid-template-areas: "rate rate" "filters reset"; }
  .filter-toggle, #reset-rate { width: 100%; min-height: 46px; margin-top: 0; }
  .search-and-set { grid-template-columns: minmax(0, 1fr) 108px; }
  .set-field select { padding-inline: 8px; font-size: .78rem; }
  .filter-panel { grid-template-columns: 1fr; }
  .status-row { display: block; }
  .status-row p { margin: 8px 2px; }
  .dialog-layout { grid-template-columns: 1fr; padding: 18px; }
  .dialog-visual { width: min(270px, 82%); margin-inline: auto; }
  .dialog-copy h2 { font-size: 2rem; }
  .cart-item { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 9px; }
  .cart-item-image { width: 48px; height: 67px; }
  .cart-line-total { grid-column: 2 / -1; flex-direction: row; justify-content: flex-end; align-items: baseline; gap: 8px; }
  .cart-header, .cart-items { padding-left: 14px; padding-right: 14px; }
  .cart-summary { margin-inline: 14px; }
  .cart-tools { grid-template-columns: 1fr; margin-inline: 14px; }
  .list-dialog-header, .list-dialog-body { padding-left: 16px; padding-right: 16px; }
  .import-printing-heading { align-items: stretch; flex-direction: column; }
  .import-printing-heading label { flex-basis: auto; }
  .import-printing-choice { grid-template-columns: 1fr; gap: 6px; }
}

/* Mobile-suit market terminal visual system */
:root {
  --void: #030811;
  --surface: #081322;
  --surface-2: #0c1b2d;
  --line: #243c58;
  --line-hot: #4b9ce2;
  --ice: #eef7ff;
  --muted: #8195ad;
  --cyan: #61baff;
  --signal: #ff4058;
  --mint: #69e1b0;
  font-family: Bahnschrift, "Arial Narrow", Inter, ui-sans-serif, system-ui, sans-serif;
}

html { background: var(--void); scroll-behavior: smooth; }
body {
  color: var(--ice);
  background:
    linear-gradient(rgba(41, 82, 122, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 82, 122, .10) 1px, transparent 1px),
    radial-gradient(circle at 78% -8%, rgba(38, 112, 178, .28), transparent 34rem),
    radial-gradient(circle at 5% 35%, rgba(12, 52, 89, .22), transparent 28rem),
    var(--void);
  background-size: 18px 18px, 18px 18px, auto, auto, auto;
}
body::before { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 0 63%, rgba(92, 179, 255, .035) 63% 63.2%, transparent 63.2%); }
body > header, body > main, body > footer { width: min(1240px, calc(100% - 40px)); }
body > header { position: relative; padding: 46px 0 28px; align-items: center; }
body > header::before { content: "BENI-BASE / SYS.01"; position: absolute; top: 18px; right: 0; color: #4f6983; font: 800 .58rem/1 monospace; letter-spacing: .16em; }
.brand-lockup { flex: 1; min-width: 0; }
.brand-row { display: flex; align-items: center; gap: 12px; }
.mecha-mark { width: 38px; height: 30px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; clip-path: polygon(14% 0, 86% 0, 100% 18%, 76% 100%, 24% 100%, 0 18%); background: #122a43; border-bottom: 2px solid var(--cyan); }
.mecha-mark i { display: block; width: 5px; background: var(--cyan); transform: skew(-16deg); }
.mecha-mark i:nth-child(1), .mecha-mark i:nth-child(3) { height: 13px; opacity: .65; }
.mecha-mark i:nth-child(2) { height: 22px; background: var(--signal); }
.eyebrow { margin: 0; color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .68rem; letter-spacing: .18em; }
.system-status { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: #71869e; font: 800 .58rem/1 monospace; letter-spacing: .11em; }
.system-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px #69e1b0aa; }
h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .26em; margin: 10px 0 8px; font-size: clamp(2.6rem, 6vw, 5.15rem); line-height: .88; letter-spacing: -.065em; text-transform: uppercase; }
h1 span { font-weight: 950; }
h1 b { color: transparent; font-weight: 900; -webkit-text-stroke: 1px #91a8bf; letter-spacing: -.055em; }
.subtitle { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; }
.subtitle strong { display: inline-block; margin-right: .8em; color: var(--mint); }
.subtitle span { color: var(--muted); }
button { min-height: 40px; border-radius: 4px; letter-spacing: .025em; transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(1px) scale(.985); }
.primary { min-height: 48px; padding-inline: 22px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); background: linear-gradient(135deg, #ff4b60, #d72842); box-shadow: 0 10px 30px #ef3c4e25; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
.panel { background: rgba(8, 19, 34, .92); border-color: var(--line); box-shadow: 0 22px 70px #0008, inset 0 1px #ffffff08; }
.controls { position: relative; border-radius: 4px; padding: 20px; clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); }
.controls::after { content: "SEARCH / FILTER ARRAY"; position: absolute; top: 6px; right: 14px; color: #3e5f7d; font: 700 .5rem/1 monospace; letter-spacing: .12em; }
label > span, .quick-keywords > span { color: #8699ae; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .61rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.search-shell, .set-field select, .sort-field select, input, select { border-radius: 3px; border-color: #294866; background: #040c16; }
.search-shell { min-height: 56px; box-shadow: inset 3px 0 var(--cyan); }
.search-shell:focus-within, input:focus, select:focus { border-color: var(--cyan); box-shadow: inset 3px 0 var(--cyan), 0 0 0 2px #55a5ff1e; }
.set-field select, .sort-field select { min-height: 56px; }
.quick-keywords { scrollbar-width: none; }
.quick-keywords button { border-radius: 3px; border-color: #29435e; background: #0c1b2c; color: #8ca1b8; }
.quick-keywords button.active { border-color: var(--cyan); background: #14385a; }
.filter-toggle, .secondary { border: 1px solid #315171; border-radius: 3px; background: #102238; }
.rate-input b { color: var(--mint); font-family: monospace; }
.active-filter { border: 1px solid #3475a9; border-radius: 3px; }
.filter-panel { border-top-color: #29415c; }
.status-row { align-items: center; margin-top: 10px; padding: 11px 4px; border-bottom: 1px solid #14283c; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .68rem; }
.status-row p { margin: 0; }
.status-row p:first-child { display: flex; align-items: center; gap: 10px; }
.status-row p span { color: var(--cyan); font-size: .57rem; letter-spacing: .14em; }
.status-row p b { color: #8196ad; font-weight: 500; }
.rarity-section { margin-top: 28px; }
.rarity-heading { position: sticky; z-index: 3; top: 0; align-items: center; margin: 0 0 13px; padding: 11px 3px 9px; border-bottom-color: #315271; background: linear-gradient(90deg, rgba(3, 8, 17, .98) 78%, rgba(3, 8, 17, .8)); backdrop-filter: blur(10px); }
.rarity-heading::before { content: ""; width: 5px; height: 20px; background: var(--signal); clip-path: polygon(0 0,100% 0,100% 72%,0 100%); }
.rarity-heading h2 { font-size: 1.38rem; letter-spacing: -.01em; }
.rarity-heading .rarity-section-badge { min-width: 64px; height: 30px; padding-inline: 13px 11px; font-size: 1rem; letter-spacing: .06em; }
.rarity-heading .rarity-section-badge::after { top: 5px; bottom: 5px; left: 5px; width: 3px; }
.rarity-heading > span { color: var(--cyan); font-family: monospace; }
.rarity-heading small { font-family: monospace; letter-spacing: .05em; }
.card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: stretch; gap: 12px; }
.card-item { position: relative; grid-template-columns: 88px 1fr; gap: 13px; height: 100%; min-height: 154px; padding: 12px; border-color: #3a5269; border-radius: 3px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); background: linear-gradient(145deg, rgba(13, 29, 47, .97), rgba(5, 14, 25, .97)); box-shadow: inset 0 0 0 1px #a8bfd00d, inset 0 1px #ffffff08; }
.card-item::after { content: ""; position: absolute; top: 0; right: 0; width: 35%; height: 2px; background: linear-gradient(90deg, transparent, #637b91); opacity: .75; }
.card-item:hover { transform: translateY(-3px); border-color: #6789a7; box-shadow: 0 12px 30px #0007, inset 0 0 0 1px #9bb5c71a, inset 0 1px #ffffff09; }
.card-item.in-cart { border-color: #55cff5; background: radial-gradient(circle at 12% 12%, rgba(65, 205, 244, .3), transparent 42%), linear-gradient(145deg, #124967, #08283f 68%, #071b2d); box-shadow: 0 0 24px #21bce03b, inset 0 0 42px #21bce01f, inset 0 0 0 1px #8ae9ff42, inset 0 1px #ffffff17; }
.card-item.in-cart::after { width: 72%; opacity: 1; background: linear-gradient(90deg, transparent, #70e4ff); box-shadow: 0 0 13px #42d5ff; }
.card-item.in-cart:hover { border-color: #8ae9ff; box-shadow: 0 12px 34px #0008, 0 0 30px #21bce039, inset 0 0 0 1px #8ae9ff35; }
.cart-quantity-badge { position: absolute; z-index: 2; left: 7px; bottom: 7px; display: grid; place-items: center; min-width: 40px; height: 27px; padding: 0 8px; border: 1px solid #ff8190; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); background: linear-gradient(135deg, #ed3b52, #a91531); color: #fff; box-shadow: 0 5px 18px #000a, 0 0 16px #ee405d59; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .76rem; font-weight: 900; letter-spacing: .04em; }
.cart-quantity-badge[hidden] { display: none; }
.cart-quick-remove { position: absolute; z-index: 3; left: 53px; bottom: 7px; min-width: 38px; min-height: 27px; height: 27px; padding: 0 8px; border: 1px solid #ff7183; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); background: #2a1420e8; color: #ff9aa7; box-shadow: 0 5px 16px #0009; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .68rem; font-weight: 900; opacity: 0; pointer-events: none; transform: translateX(-5px); transition: opacity .14s ease, transform .14s ease, background .14s ease; }
.cart-quick-remove[hidden] { display: none; }
.card-item.in-cart:hover .cart-quick-remove, .cart-quick-remove:focus-visible { opacity: 1; pointer-events: auto; transform: translateX(0); }
.cart-quick-remove:hover { transform: translateX(0); border-color: #ff9daa; background: #5c1a2b; color: #fff; }
.image-button img { width: 88px; border-radius: 2px; box-shadow: 0 6px 20px #0008; }
.card-copy { display: grid; grid-template-columns: minmax(64px, 1fr) auto; grid-template-rows: auto auto auto auto minmax(0, 1fr); column-gap: 8px; height: 100%; align-content: stretch; }
.card-copy > .meta, .card-copy > .name-en, .card-copy > .name-ja, .card-copy > .details { grid-column: 1 / -1; }
.card-copy > .prices { grid-column: 1; grid-row: 5; align-self: end; }
.card-copy > .card-actions { grid-column: 2; grid-row: 5; align-self: end; justify-content: flex-end; margin-top: 0; }
.meta { color: #80a7cb; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.rarity { position: relative; isolation: isolate; display: inline-grid; place-items: center; min-width: 34px; height: 18px; padding: 0 7px 0 9px; border: 1px solid #536a7d; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); background: linear-gradient(145deg, #1c2935, #0b131c); color: #b7c4cf; box-shadow: inset 0 0 0 1px #ffffff0a; font: 950 .58rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-shadow: 0 1px 2px #000; }
.rarity::after { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: 2px; background: currentColor; opacity: .7; box-shadow: 0 0 7px currentColor; }
.rarity[data-rarity="C"] { border-color: #4e6273; background: linear-gradient(145deg, #263542, #111b24); color: #b1bec8; }
.rarity[data-rarity="C+"], .rarity[data-rarity="C++"] { border-color: #6d8295; background: linear-gradient(135deg, #435564, #172530 62%, #263b48); color: #e1ecf2; box-shadow: inset 0 1px #ffffff25; }
.rarity[data-rarity="U"] { border-color: #38869a; background: linear-gradient(145deg, #123b48, #09222d); color: #82d9e9; }
.rarity[data-rarity="U+"] { border-color: #49c6b5; background: linear-gradient(135deg, #15594f, #092b33 65%, #164958); color: #a0ffe8; box-shadow: 0 0 10px #45d8c02c, inset 0 1px #b9fff72b; }
.rarity[data-rarity="R"] { border-color: #d24c69; background: linear-gradient(135deg, #671c37, #270e20 64%, #4c1533); color: #ff9cad; box-shadow: 0 0 10px #f0355929, inset 0 1px #ffbbca28; }
.rarity[data-rarity="R+"] { border-color: #ff648f; background: linear-gradient(120deg, #9b234c, #3b1239 48%, #6c1857); color: #ffd7e5; box-shadow: 0 0 12px #ff3d8242, inset 0 0 10px #ff73a32b; text-shadow: 0 0 5px #ff78a7, 0 1px 2px #000; }
.rarity[data-rarity="LR"] { border-color: #e2ae46; background: linear-gradient(135deg, #8b601a, #30200b 47%, #654515); color: #ffe8a4; box-shadow: 0 0 13px #e8ad3a38, inset 0 1px #fff0a94d; text-shadow: 0 0 5px #e9b84e, 0 1px 2px #000; }
.rarity[data-rarity="LR+"] { border-color: #f8ce69; background: linear-gradient(110deg, #765019, #147078 38%, #64316f 66%, #9b6e1f); background-size: 180% 100%; color: #fff8ca; box-shadow: 0 0 15px #55d7e34a, inset 0 0 9px #fff59a42; text-shadow: 0 0 6px #fff1a6, 0 1px 2px #000; animation: rarity-shift 4.5s ease-in-out infinite; }
.rarity[data-rarity="LR++"] { border-color: #dffcff; background: linear-gradient(110deg, #2e7fff, #8c3eff 23%, #ff3e9d 46%, #f4c84c 68%, #25cfc2 84%, #2e7fff); background-size: 240% 100%; color: #fff; box-shadow: 0 0 17px #8d7bff70, inset 0 0 10px #ffffff61; text-shadow: 0 0 7px #fff, 0 1px 2px #351149; animation: rarity-shift 3.2s linear infinite; }
.rarity[data-rarity="SP"] { min-width: 38px; border-color: #a8f4ff; background: linear-gradient(115deg, #0c4b79, #4d2c91 25%, #b12776 48%, #d98735 68%, #237f9b 86%, #0c4b79); background-size: 250% 100%; color: #fff; box-shadow: 0 0 18px #54dfff70, 0 0 5px #ff4e9f80, inset 0 0 12px #ffffff63; text-shadow: 0 0 8px #fff, 0 1px 2px #201140; animation: rarity-shift 2.8s linear infinite; }
.rarity[data-rarity="LK"] { border-color: #b783ff; background: linear-gradient(135deg, #4e258a, #1e123d 52%, #693f91); color: #ead8ff; box-shadow: 0 0 15px #a365ff55, inset 0 0 9px #d9b3ff36; text-shadow: 0 0 6px #bb84ff, 0 1px 2px #000; }
@keyframes rarity-shift { from { background-position: 0% 50%; } to { background-position: 240% 50%; } }
.name-en { margin-top: 4px; color: #f5f9fd; font-size: 1rem; }
.name-ja { margin-bottom: 8px; color: #7389a1; }
.details { color: #67a8df; }
.myr { font-size: 1.32rem; letter-spacing: -.02em; }
.jpy { font-family: monospace; }
.source { color: #6c9bc6; }
.price-history-trigger { display: grid; place-items: center; width: 34px; min-width: 34px; min-height: 34px; height: 34px; padding: 0; border: 1px solid #376b8d; border-radius: 3px; background: #0b2235; color: #6fdcff; }
.price-history-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.price-history-trigger:hover { border-color: var(--cyan); background: #123a55; color: #c5f5ff; box-shadow: 0 0 16px #3dcdf33d; }
.add-to-cart { min-width: 72px; border-color: #3d7bab; border-radius: 3px; background: #143a5c; white-space: nowrap; }
.add-to-cart:hover { border-color: var(--cyan); background: #1b4d77; }
.add-to-cart.has-cart-items { border-color: #52bde2; background: #125170; color: #fff; }
.card-item .add-to-cart:hover { transform: none; }
.card-item .add-to-cart:active { transform: scale(.96); }
.cart-quantity-badge.quantity-updated { animation: quantity-confirm .22s ease-out; }
@keyframes quantity-confirm {
  0% { transform: scale(.82); filter: brightness(1.7); }
  65% { transform: scale(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}
.dialog-add-cart.has-cart-items { background: linear-gradient(135deg, #1682a5, #0b6588); box-shadow: 0 8px 26px #19a9d735; }
.card-dialog, .cart-dialog, .list-dialog { border-radius: 4px; border-color: #3c6388; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); background: linear-gradient(145deg, #0d1e31, #040b13); }
.dialog-close { border: 1px solid #3b5e7e; border-radius: 3px; }
.dialog-image-trigger img { border-radius: 3px; }
.dialog-add-cart, .modal-add-button { border-radius: 3px; }
.dialog-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 18px 0 15px; padding: 4px; border: 1px solid #294760; border-radius: 3px; background: #040d17; }
.dialog-tabs button { min-height: 38px; border: 0; border-radius: 2px; background: transparent; color: #7f95aa; font: 800 .68rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; }
.dialog-tabs button[aria-selected="true"] { background: linear-gradient(135deg, #164869, #0d2e48); color: #dff8ff; box-shadow: inset 0 0 0 1px #43bfe56b; }
.rules-panel { border-radius: 3px; background: #040b13; }
.ability-badge { border-radius: 3px; }
.price-history-panel { min-width: 0; }
.history-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.history-heading p { margin: 0 0 3px; color: #6f91ad; font: 800 .58rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.history-heading h3 { margin: 0; color: #f3f9fd; font-size: 1.08rem; }
.history-heading > span { padding: 6px 8px; border: 1px solid #48c9ef; border-radius: 2px; background: #0e334c; color: #8aeaff; font: 900 .61rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.history-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 11px; }
.history-summary > div { min-width: 0; padding: 9px 10px; border: 1px solid #263f57; border-radius: 3px; background: #071523; }
.history-summary span { display: block; margin-bottom: 4px; color: #728aa0; font: 700 .55rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.history-summary strong { display: block; color: #eaf7fd; font-size: .75rem; line-height: 1.35; overflow-wrap: anywhere; }
.history-ranges { display: flex; justify-content: flex-end; gap: 5px; margin-bottom: 8px; }
.history-ranges button { min-width: 44px; min-height: 32px; height: 32px; padding: 0 8px; border: 1px solid #294b65; border-radius: 2px; background: #091827; color: #7593aa; font: 800 .59rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.history-ranges button.active { border-color: #51cff2; background: #12405d; color: #d8f8ff; }
.history-chart { min-height: 220px; padding: 7px 5px 0; border: 1px solid #25445d; border-radius: 3px; background: radial-gradient(circle at 50% 0, #12334a66, transparent 65%), #030b13; overflow: hidden; }
.history-chart svg { display: block; width: 100%; height: auto; min-height: 210px; }
.history-grid-line { stroke: #2e4c62; stroke-width: 1; stroke-dasharray: 4 6; }
.history-axis-label { fill: #71899e; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
.history-area { fill: url(#history-gradient); fill: #2fcdf31f; }
.history-line { fill: none; stroke: #58daf7; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px #35c9ef88); }
.history-point { fill: #ff5368; stroke: #ffd6dc; stroke-width: 2; }
.history-status { min-height: 1.5em; margin: 9px 1px 0; color: #7890a5; font: .64rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.cart-bar { border-radius: 4px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); background: rgba(12, 38, 62, .97); }
.cart-bar:hover { transform: translateX(-50%); border-color: var(--cyan); box-shadow: 0 14px 45px #000b, inset 0 0 0 1px #66d8ff24; }
.cart-bar:active { transform: translateX(-50%) scale(.99); }
.cart-bar-icon, .cart-item, .cart-summary, .quantity-controls button { border-radius: 3px; }
.cart-item { background: #0a1928; }
.cart-header { background: linear-gradient(#0b1d30 82%, transparent); }

@media (max-width: 840px) {
  body > header { padding-top: 42px; }
  body > header::before { left: 0; right: auto; }
  h1 { font-size: clamp(2.5rem, 10vw, 4.1rem); }
  .controls::after { display: none; }
}

@media (max-width: 520px) {
  body { background-size: 14px 14px, 14px 14px, auto, auto, auto; }
  body > header, body > main, body > footer { width: min(100% - 24px, 1240px); }
  body > header { gap: 18px; padding-top: 46px; }
  .brand-row { gap: 8px; }
  .mecha-mark { width: 32px; height: 26px; }
  .system-status { margin-left: auto; font-size: .48rem; }
  h1 { display: block; margin-top: 13px; font-size: clamp(2.7rem, 14vw, 4rem); line-height: .84; }
  h1 span, h1 b { display: block; }
  .subtitle { max-width: 36ch; font-size: .61rem; line-height: 1.6; }
  .primary { width: 100%; }
  .header-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .header-actions button { min-width: 0; padding-inline: 10px; font-size: .68rem; }
  .controls { padding: 14px; }
  .search-and-set { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .search-field { grid-column: 1 / -1; }
  .search-shell, .set-field select, .sort-field select { min-height: 52px; }
  .quick-keywords { margin-inline: -2px; padding-bottom: 2px; }
  .status-row { gap: 6px; }
  .status-row p:first-child { align-items: flex-start; flex-direction: column; gap: 3px; }
  .rarity-heading { top: 0; }
  .card-grid { grid-template-columns: 1fr; }
  .card-item { grid-template-columns: 86px minmax(0, 1fr); min-height: 150px; }
  .image-button img { width: 86px; }
  .history-summary { grid-template-columns: 1fr; }
  .history-chart { min-height: 190px; margin-inline: -2px; }
  .history-chart svg { min-height: 180px; }
}

/* Search command deck */
.controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 13px;
  padding: 16px;
  border-radius: 12px;
  clip-path: none;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(83, 205, 246, .7), transparent 26%) top left / 100% 1px no-repeat,
    rgba(7, 17, 30, .94);
}
.controls::after { content: "CARD SEARCH / 01"; top: 9px; right: 13px; }
.search-area { display: grid; gap: 11px; }
.search-and-set {
  grid-template-columns: minmax(300px, 1fr) minmax(170px, 230px) minmax(170px, 230px);
  gap: 8px;
  padding-top: 5px;
}
.search-field > span { color: #a7bdd0; }
.search-shell {
  min-height: 58px;
  border-color: #37607e;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(14, 46, 69, .44), transparent 38%), #030b14;
  box-shadow: inset 3px 0 var(--cyan), inset 0 1px #ffffff08;
}
.search-shell input { font-size: .94rem; }
.search-shell input::placeholder { color: #60778d; }
#clear-search { border-radius: 6px; background: #14273a; }
.set-field, .sort-field { min-width: 0; }
.set-field select, .sort-field select {
  min-height: 58px;
  border-radius: 8px;
  padding-right: 30px;
  background-color: #081522;
  font-size: .78rem;
}
.quick-keywords {
  min-height: 33px;
  margin: 0;
  padding: 0 2px;
}
.quick-keywords > span { margin-right: 7px; color: #607a92; }
.quick-keywords button {
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #0b1927;
  font-size: .66rem;
}
.quick-keywords button:hover { transform: none; border-color: #477497; background: #10263a; }
.quick-keywords button.active { background: #123d59; box-shadow: inset 0 0 0 1px #62d4f333; }
.controls-side {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px;
  border: 1px solid #1d354b;
  border-radius: 8px;
  background: linear-gradient(90deg, #0a1826, #07111c);
}
.rate-field {
  order: 1;
  display: grid;
  grid-template-columns: auto 88px auto auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.rate-field > span { margin: 0; white-space: nowrap; }
.rate-input { display: contents; }
.rate-input input { min-height: 38px; height: 38px; padding: 7px 9px; border-radius: 6px; text-align: center; }
.rate-input b { font-size: .72rem; }
.rate-field small { margin: 0 0 0 3px; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .62rem; }
#reset-rate {
  order: 2;
  min-height: 38px;
  margin: 0;
  padding: 8px 11px;
  border-color: transparent;
  background: transparent;
  color: #768ca2;
  font-size: .68rem;
}
#reset-rate:hover { transform: none; background: #122437; color: #c9d8e6; }
.filter-toggle {
  order: 3;
  min-height: 40px;
  margin: 0 0 0 auto;
  padding: 9px 15px;
  border-radius: 6px;
  background: #122a40;
  white-space: nowrap;
}
.active-filter-row { width: 100%; }
.filter-panel {
  width: 100%;
  padding: 15px 2px 2px;
  border-top-color: #203a50;
}
.mobile-search-dock {
  position: fixed;
  z-index: 20;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 8px;
  width: min(760px, calc(100% - 24px));
  padding: 8px;
  border: 1px solid #397497;
  border-radius: 11px;
  background: rgba(5, 15, 25, .94);
  box-shadow: 0 14px 42px #000c, inset 0 1px #ffffff10;
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 22px));
  transition: opacity .18s ease, transform .2s ease, visibility .2s;
}
.mobile-dock-visible .mobile-search-dock {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mobile-search-shell {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px 0 11px;
  border: 1px solid #315a76;
  border-radius: 7px;
  background: #030b14;
  box-shadow: inset 3px 0 var(--cyan);
}
.mobile-search-shell:focus-within { border-color: var(--cyan); box-shadow: inset 3px 0 var(--cyan), 0 0 0 2px #55a5ff20; }
.mobile-search-shell .search-icon { flex: 0 0 auto; font-size: 1.2rem; }
.mobile-search-shell input {
  min-width: 0;
  height: 46px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: .9rem;
}
.mobile-search-shell input:focus { border: 0; box-shadow: none; }
.mobile-search-shell input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
#mobile-clear-search {
  flex: 0 0 auto;
  width: 30px;
  min-height: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #172b3e;
  color: #bdcad8;
  font-size: 1.1rem;
}
.mobile-search-options {
  position: relative;
  width: 50px;
  min-height: 50px;
  padding: 0;
  border: 1px solid #3b789d;
  border-radius: 7px;
  background: linear-gradient(145deg, #153e59, #0b2639);
  color: #dff7ff;
  font-size: 1.15rem;
}
.mobile-filter-count {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #06101a;
  border-radius: 999px;
  background: var(--signal);
  color: #fff;
  font: 900 .58rem/1 ui-monospace, monospace;
}
.mobile-filter-count[hidden] { display: none; }
.mobile-dock-visible .rarity-heading { top: calc(72px + env(safe-area-inset-top)); }
.status-row, .result-sections { scroll-margin-top: calc(76px + env(safe-area-inset-top)); }

@media (max-width: 840px) {
  .search-and-set { grid-template-columns: minmax(0, 1fr) minmax(145px, .55fr); }
  .search-field { grid-column: 1 / -1; }
  .sort-field { grid-column: 2; }
  .controls-side { flex-wrap: wrap; }
  .filter-toggle { margin-left: auto; }
}

@media (max-width: 520px) {
  .controls { gap: 11px; padding: 11px; border-radius: 9px; }
  .search-and-set { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; padding-top: 0; }
  .search-shell { min-height: 55px; }
  .set-field select, .sort-field select { min-height: 49px; padding: 8px 24px 8px 9px; font-size: .7rem; }
  .quick-keywords { margin-inline: -1px; padding-bottom: 2px; }
  .quick-keywords > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .controls-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px auto;
    gap: 8px;
    padding: 9px;
  }
  .rate-field {
    grid-column: auto;
    grid-template-columns: auto minmax(62px, 1fr) auto;
    gap: 6px;
  }
  .rate-field > span { font-size: 0; }
  .rate-field > span::after { content: "JPY →"; font-size: .58rem; }
  .rate-field small { display: none; }
  #reset-rate, .filter-toggle { min-height: 40px; margin: 0; }
  #reset-rate { order: 2; width: 40px; padding: 0; border-color: #243e55; background: #0c1d2d; font-size: 0; }
  #reset-rate::before { content: "↺"; font-size: 1rem; }
  .filter-toggle { order: 3; width: auto; padding-inline: 11px; font-size: .68rem; }
  .mobile-search-dock {
    position: fixed;
    z-index: 20;
    top: max(8px, env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 7px;
    padding: 7px;
    border: 1px solid #397497;
    border-radius: 10px;
    background: rgba(5, 15, 25, .94);
    box-shadow: 0 12px 34px #000c, inset 0 1px #ffffff10;
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(-100% - 18px));
    transition: opacity .18s ease, transform .2s ease, visibility .2s;
  }
  .mobile-dock-visible .mobile-search-dock {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .mobile-search-shell {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 46px;
    padding: 0 7px 0 10px;
    border: 1px solid #315a76;
    border-radius: 7px;
    background: #030b14;
    box-shadow: inset 3px 0 var(--cyan);
  }
  .mobile-search-shell:focus-within { border-color: var(--cyan); box-shadow: inset 3px 0 var(--cyan), 0 0 0 2px #55a5ff20; }
  .mobile-search-shell .search-icon { flex: 0 0 auto; font-size: 1.2rem; }
  .mobile-search-shell input {
    min-width: 0;
    height: 44px;
    padding: 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: .88rem;
  }
  .mobile-search-shell input:focus { border: 0; box-shadow: none; }
  .mobile-search-shell input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
  #mobile-clear-search {
    flex: 0 0 auto;
    width: 30px;
    min-height: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #172b3e;
    color: #bdcad8;
    font-size: 1.1rem;
  }
  .mobile-search-options {
    position: relative;
    width: 48px;
    min-height: 48px;
    padding: 0;
    border: 1px solid #3b789d;
    border-radius: 7px;
    background: linear-gradient(145deg, #153e59, #0b2639);
    color: #dff7ff;
    font-size: 1.15rem;
  }
  .mobile-filter-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #06101a;
    border-radius: 999px;
    background: var(--signal);
    color: #fff;
    font: 900 .58rem/1 ui-monospace, monospace;
  }
  .mobile-filter-count[hidden] { display: none; }
  .mobile-dock-visible .rarity-heading { top: calc(68px + env(safe-area-inset-top)); }
  .status-row, .result-sections { scroll-margin-top: calc(72px + env(safe-area-inset-top)); }
}

/* Compact result cards for tablets and narrow devices. */
@media (max-width: 900px) {
  .card-item {
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    column-gap: 10px;
    row-gap: 0;
    min-height: 0;
    padding: 10px;
  }
  .image-button { grid-column: 1; grid-row: 1 / 5; }
  .image-button img { width: 74px; margin-inline: auto; }
  .card-copy { display: contents; }
  .card-copy > .meta,
  .card-copy > .name-en,
  .card-copy > .name-ja,
  .card-copy > .details { grid-column: 2; }
  .card-copy > .meta { grid-row: 1; }
  .card-copy > .name-en { grid-row: 2; }
  .card-copy > .name-ja { grid-row: 3; }
  .card-copy > .details { grid-row: 4; }
  .card-copy > .prices {
    grid-row: 5;
    grid-column: 1;
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    margin-top: 6px;
  }
  .card-copy > .card-actions {
    grid-row: 5;
    grid-column: 2;
    align-self: end;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 7px;
    width: 100%;
    margin-top: 6px;
  }
  .name-en {
    display: -webkit-box;
    min-height: 1.3em;
    margin-top: 3px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .name-ja {
    min-height: 1.3em;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .details {
    display: -webkit-box;
    min-height: 2.9em;
    margin-bottom: 2px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .myr { max-width: 80px; overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
  .jpy { min-width: 0; font-size: .59rem; white-space: nowrap; }
  .source {
    min-width: 0;
    overflow: hidden;
    font-size: .65rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .add-to-cart {
    min-width: 67px;
    padding-inline: 8px;
    white-space: nowrap;
  }
  .cart-quantity-badge {
    top: 90px;
    bottom: auto;
    left: 6px;
    min-width: 35px;
    height: 24px;
    padding-inline: 6px;
    font-size: .68rem;
  }
  .cart-quick-remove {
    top: 90px;
    bottom: auto;
    left: 43px;
    min-width: 33px;
    height: 24px;
    min-height: 24px;
    padding-inline: 5px;
  }
  body > footer { align-items: flex-start; flex-direction: column; gap: 7px; }
  body > footer p { text-align: left; line-height: 1.55; }
  .footer-brand { flex-wrap: wrap; white-space: normal; }
}

@media (max-width: 520px) {
  .card-item { grid-template-columns: 68px minmax(0, 1fr); }
  .image-button img { width: 60px; }
  .details {
    min-height: 1.45em;
    -webkit-line-clamp: 1;
  }
  .myr { max-width: 68px; font-size: .79rem; }
  .card-copy > .card-actions {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 6px;
  }
  .cart-quantity-badge {
    top: 70px;
    min-width: 32px;
    padding-inline: 5px;
  }
  .cart-quick-remove {
    top: 70px;
    left: 40px;
    min-width: 30px;
    padding-inline: 4px;
  }
}

@media (hover: none) {
  .card-item.in-cart .cart-quick-remove { opacity: 1; pointer-events: auto; transform: translateX(0); }
}

/* Phone dialogs use the screen as a workspace instead of a narrow desktop modal. */
@media (max-width: 700px) {
  .card-dialog, .cart-dialog {
    box-sizing: border-box;
    width: calc(100% - 8px);
    max-width: none;
    height: calc(100dvh - 8px);
    max-height: none;
    margin: 4px;
  }
  .card-dialog .dialog-layout { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  .card-dialog .dialog-visual {
    width: 100%;
    display: grid;
    grid-template-columns: clamp(126px, 38vw, 152px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 10px 14px;
    margin: 0;
  }
  .card-dialog .dialog-image-trigger { grid-row: 1 / span 2; width: 100%; }
  .card-dialog .dialog-price-row { align-items: flex-start; flex-direction: column; justify-content: flex-start; gap: 2px; margin-top: 42px; }
  .card-dialog .dialog-price-row strong { font-size: 1.5rem; }
  .card-dialog .dialog-add-cart { align-self: start; min-height: 44px; margin-top: 0; }
  .card-dialog .dialog-copy h2 { margin-top: 10px; font-size: 1.65rem; }
  .card-dialog .dialog-tabs { margin-top: 14px; }
  .cart-dialog .cart-item { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 9px; padding: 9px; }
  .cart-dialog .cart-item-image { grid-column: 1; grid-row: 1 / span 2; }
  .cart-dialog .cart-item-copy { grid-column: 2; grid-row: 1; }
  .cart-dialog .quantity-controls { grid-column: 3; grid-row: 1 / span 2; }
  .cart-dialog .cart-line-total { grid-column: 2; grid-row: 2; align-items: baseline; justify-content: flex-start; flex-direction: row; gap: 8px; }
  .image-lightbox { width: calc(100% - 8px); max-width: none; height: calc(100dvh - 8px); max-height: none; margin: 4px; }
  .image-lightbox-stage { height: calc(100% - 8px); align-content: center; padding: 8px 2px; }
  .image-lightbox-stage img { max-height: calc(100dvh - 78px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .rarity { animation: none !important; }
}

/* Printing archive: exact artwork identity without borrowing market prices. */
.catalog-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.catalog-switch button {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 11px;
  border: 1px solid #29445d;
  border-radius: 4px;
  background: #091827;
  color: #8ca3b7;
  text-align: left;
}
.catalog-switch button:hover { transform: none; border-color: #457495; background: #0d2234; }
.catalog-switch button.active { border-color: #61d8f5; background: linear-gradient(135deg, #113650, #0a2133); box-shadow: inset 3px 0 #61d8f5; color: #eefaff; }
.catalog-switch span { overflow: hidden; font-size: .72rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.catalog-switch small { overflow: hidden; color: #66849a; font: 700 .57rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.catalog-switch button.active small { color: #79b7ce; }
.filter-panel { grid-template-columns: repeat(6, minmax(108px, 1fr)) auto; }
.printing-origin.variant-count {
  border-color: #397ba7;
  background: #0c2a40;
  color: #8fddff;
}
.printing-variants {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #284968;
  background: linear-gradient(145deg, #071522, #091a2a);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.printing-variants[hidden] { display: none; }
.printing-variants-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.printing-variants-heading div { display: grid; gap: 2px; }
.printing-variants-heading span { color: #64c9f6; font: 800 .57rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; }
.printing-variants-heading strong { color: #eef7fd; font-size: .86rem; }
.printing-variants-heading small { color: #7897b0; font: 700 .62rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.printing-variant-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.dialog-copy { min-width: 0; }
.printing-variant {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 58px;
  padding: 5px;
  border: 1px solid #294660;
  border-radius: 3px;
  background: #0a1928;
  color: #e9f4fb;
  text-align: left;
}
.printing-variant:hover { border-color: #61c9f4; background: #0d2437; transform: none; }
.printing-variant.active { border-color: #68d9ff; box-shadow: inset 0 0 0 1px #68d9ff, 0 0 14px #1f9ac133; background: #0c2b42; }
.printing-variant.special { border-color: #8b6430; background: linear-gradient(135deg, #251b11, #101823); }
.printing-variant.special.active { border-color: #ffc66d; box-shadow: inset 0 0 0 1px #ffc66d, 0 0 16px #d58a3138; }
.printing-variant[data-printing-type="championship"] { border-color: #b3833f; background: linear-gradient(135deg, #332411, #17131a); }
.printing-variant[data-printing-type="beta"] { border-color: #8c6bad; background: linear-gradient(135deg, #241b35, #101724); }
.printing-variant img { width: 38px; height: 52px; border-radius: 2px; object-fit: cover; background: #102437; }
.printing-variant > span { display: grid; min-width: 0; gap: 4px; }
.printing-variant strong, .printing-variant small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.printing-variant strong { font: 900 .58rem/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.printing-variant small { color: #84a1b8; font-size: .58rem; }
.printing-variant-note { margin: 9px 0 0; color: #7f9bb1; font-size: .69rem; line-height: 1.4; }
.printing-variant-note.warning { color: #ffbe79; }
.dialog-tabs button:disabled { cursor: not-allowed; opacity: .38; }
.dialog-add-cart:disabled { cursor: not-allowed; border-color: #455464; background: #263442; color: #93a2ae; }
.dialog-source[hidden] { display: none; }

@media (max-width: 840px) {
  .filter-panel { grid-template-columns: 1fr 1fr; }
  .printing-variant-list { display: flex; min-width: 0; max-width: 100%; gap: 8px; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .printing-variant { flex: 0 0 132px; scroll-snap-align: start; }
}

@media (max-width: 520px) {
  .catalog-switch { display: flex; margin-inline: -1px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .catalog-switch button { flex: 0 0 144px; }
  .filter-panel { grid-template-columns: 1fr; }
  .printing-variants { margin-top: 12px; padding: 10px; }
  .printing-variants-heading { align-items: start; }
  .printing-variants-heading small { white-space: normal; text-align: right; }
  .printing-variant { flex-basis: 124px; }
}

@media (max-width: 700px) {
  .card-dialog .dialog-layout { box-sizing: border-box; width: 100%; grid-template-columns: minmax(0, 1fr); }
}

/* Pilot accounts and saved-list hangar */
.account-trigger {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 174px;
  min-height: 46px;
  padding: 6px 11px 6px 7px;
  border: 1px solid #34668c;
  border-radius: 3px;
  background: linear-gradient(135deg, #102b44, #091827);
  color: #eaf8ff;
  text-align: left;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.account-trigger:hover { transform: none; border-color: #63d9f7; background: linear-gradient(135deg, #143956, #0b2032); }
.account-avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #5bd7f4; background: #0a3249; color: #9bf0ff; font: 900 .8rem/1 ui-monospace, monospace; box-shadow: inset 0 0 12px #50d9f528; }
.account-trigger > span:last-child { display: grid; min-width: 0; gap: 3px; }
.account-trigger strong, .account-trigger small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-trigger strong { font-size: .68rem; letter-spacing: .035em; }
.account-trigger small { color: #7694aa; font: 700 .55rem/1 ui-monospace, monospace; }

.save-list-button {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 58px;
  padding: 9px 15px;
  border: 1px solid #48bad9;
  border-radius: 3px;
  background: linear-gradient(120deg, #0f526c, #11324d 65%, #0a2033);
  color: white;
  text-align: left;
  box-shadow: inset 0 0 24px #36cced15, 0 8px 24px #0004;
}
.save-list-button:hover { transform: none; border-color: #8eeaff; background: linear-gradient(120deg, #14657f, #153d59 65%, #0b263b); }
.save-list-button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #75e6fb; color: #91efff; font-size: 1.05rem; }
.save-list-button strong { font-size: .78rem; }
.save-list-button small { color: #8fbbcc; font: 700 .59rem/1.1 ui-monospace, monospace; }
.cart-tools { grid-template-columns: 1fr 1fr; }

.account-dialog, .save-list-dialog, .shared-list-dialog {
  padding: 0;
  border: 1px solid #3d688c;
  border-radius: 4px;
  color: #edf7ff;
  background: #07131f;
  box-shadow: 0 32px 110px #000e;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.account-dialog::backdrop, .save-list-dialog::backdrop, .shared-list-dialog::backdrop { background: #01050bec; backdrop-filter: blur(10px); }
.account-dialog { width: min(1040px, calc(100% - 28px)); max-height: min(820px, calc(100dvh - 28px)); overflow: auto; }
.account-dialog-close { z-index: 10; top: 15px; right: 15px; }
.account-auth-view { display: grid; grid-template-columns: minmax(360px, .93fr) minmax(390px, 1.07fr); min-height: 650px; }
.account-hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; padding: 54px; border-right: 1px solid #2d5270; background: radial-gradient(circle at 24% 18%, #11617c88, transparent 30%), linear-gradient(145deg, #0d3450, #071726 58%, #090e19); }
.account-hero::before, .account-hero::after { content: ""; position: absolute; pointer-events: none; }
.account-hero::before { width: 260px; height: 260px; right: -82px; top: -82px; border: 1px solid #63d7f338; border-radius: 50%; box-shadow: 0 0 0 34px #63d7f309, 0 0 0 70px #63d7f307; }
.account-hero::after { left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, #ef3f54 28%, transparent 28% 31%, #5edaf6 31% 68%, transparent 68%); }
.account-hero-grid { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(#58b9da 1px, transparent 1px), linear-gradient(90deg, #58b9da 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(135deg, black, transparent 64%); }
.account-kicker { position: relative; color: #6ddbf7; font: 900 .62rem/1.2 ui-monospace, monospace; letter-spacing: .16em; }
.account-emblem { position: relative; display: flex; align-items: center; gap: 8px; width: fit-content; margin: 34px 0 24px; }
.account-emblem i { display: block; width: 26px; height: 1px; background: #ef5264; }
.account-emblem b { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid #63d9f7; color: white; background: #0c3047; box-shadow: inset 0 0 28px #4bd3ef2d, 0 0 24px #20a8c52b; font: 900 1rem/1 ui-monospace, monospace; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.account-hero h2 { position: relative; margin: 0; font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: .98; letter-spacing: -.055em; }
.account-hero h2 span { color: #73dbf3; }
.account-hero > p { position: relative; max-width: 440px; margin: 22px 0 34px; color: #91a9bd; font-size: .84rem; line-height: 1.7; }
.account-feature-strip { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.account-feature-strip span { display: grid; gap: 5px; padding: 10px; border-top: 1px solid #31516a; color: #87a1b5; font: 700 .57rem/1.3 ui-monospace, monospace; }
.account-feature-strip b { color: #ed5b6b; font-size: .62rem; }
.account-auth-panel { display: grid; place-items: center; min-width: 0; padding: 54px; background: linear-gradient(145deg, #0b1c2c, #050b12); }
#account-auth-content, .account-unavailable { width: min(100%, 390px); }
.account-auth-heading > span, .account-unavailable > span, .save-list-heading > span, .hangar-heading > div > span, .shared-list-heading > span { color: #67d5f3; font: 900 .59rem/1 ui-monospace, monospace; letter-spacing: .15em; }
.account-auth-heading h2, .account-unavailable h2 { margin: 9px 0 7px; font-size: 1.8rem; letter-spacing: -.035em; }
.account-auth-heading p, .account-unavailable p { margin: 0 0 24px; color: #8299ad; font-size: .78rem; line-height: 1.55; }
.account-unavailable code { display: block; margin-top: 8px; padding: 10px 12px; border: 1px solid #294965; background: #071522; color: #8ce8fa; font-size: .69rem; }
.auth-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 24px; padding: 4px; border: 1px solid #284761; background: #071522; }
.auth-mode-toggle button { min-height: 40px; border-radius: 2px; background: transparent; color: #7890a4; font-size: .72rem; }
.auth-mode-toggle button:hover { transform: none; color: #dceaf4; }
.auth-mode-toggle button.active { background: #14435e; color: #f0fbff; box-shadow: inset 0 -2px #63ddf8; }
.auth-form { display: grid; gap: 16px; }
.auth-form[hidden] { display: none; }
.auth-form label > span, .save-list-dialog label > span { color: #9eb1c2; font: 800 .64rem/1 ui-monospace, monospace; letter-spacing: .06em; }
.auth-form input, .save-list-dialog input, .save-list-dialog select, .save-list-dialog textarea, #detail-list-description { border-radius: 3px; border-color: #32516d; background: #06111c; }
.auth-form input { min-height: 49px; }
.password-field { display: grid; grid-template-columns: 1fr auto; border: 1px solid #32516d; background: #06111c; }
.password-field:focus-within { border-color: #55a5ff; box-shadow: 0 0 0 3px #2687ed2c; }
.password-field input { border: 0; box-shadow: none; }
.password-field button { border-radius: 0; background: transparent; color: #65cce9; font-size: .65rem; }
.password-field button:hover { transform: none; color: white; }
.auth-form-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.auth-form-meta > span { color: #6d879a; font-size: .62rem; }
.remember-session { display: flex; align-items: center; gap: 8px; color: #8096aa; font-size: .68rem; }
.remember-session input { width: 15px; min-height: 15px; padding: 0; accent-color: #35bfdc; }
#forgot-password, .auth-back, .account-text-button { padding: 0; background: transparent; color: #6ccdec; font-size: .68rem; }
#forgot-password:hover, .auth-back:hover, .account-text-button:hover { transform: none; color: white; }
.resend-verification { justify-self: start; padding: 3px 0; background: transparent; color: #6dd8f2; font-size: .66rem; }
.resend-verification:hover { transform: none; color: white; }
.account-primary { min-height: 48px; border: 1px solid #55d5ef; border-radius: 3px; background: linear-gradient(135deg, #137a9b, #105572); color: white; box-shadow: 0 8px 25px #1599bb26; }
.account-primary:hover { border-color: #9bedff; background: linear-gradient(135deg, #188eaf, #12617f); }
.auth-feedback { min-height: 1.2em; margin: 0; color: #8298aa; font-size: .69rem; line-height: 1.45; }
.auth-feedback[data-kind="error"] { color: #ff8795; }
.auth-feedback[data-kind="success"] { color: #72e0b1; }

.account-lists-view, .account-detail-view { min-height: 650px; padding-bottom: 30px; background: radial-gradient(circle at 94% 0, #123c5940, transparent 26rem), #07131f; }
.account-dashboard-header, .list-detail-header { position: sticky; z-index: 4; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 78px; padding: 14px 54px; border-bottom: 1px solid #284761; background: #091a2af3; backdrop-filter: blur(14px); }
.pilot-identity { display: flex; align-items: center; min-width: 0; gap: 11px; }
.pilot-identity > span { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #5ad7f4; color: #91edff; background: #10354b; font: 900 .8rem/1 ui-monospace, monospace; }
.pilot-identity div { display: grid; min-width: 0; gap: 4px; }
.pilot-identity small { color: #5fb8d3; font: 900 .56rem/1 ui-monospace, monospace; letter-spacing: .13em; }
.pilot-identity strong { overflow: hidden; color: #dfeaf3; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-actions, .list-detail-actions { display: flex; align-items: center; gap: 10px; }
.dashboard-actions .secondary, .list-detail-actions .secondary { border: 1px solid #315876; border-radius: 3px; font-size: .67rem; }
.hangar-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 42px 54px 25px; }
.hangar-heading h2 { margin: 8px 0 6px; font-size: 2rem; letter-spacing: -.045em; }
.hangar-heading p { margin: 0; color: #7f96aa; font-size: .78rem; }
.hangar-stat { display: grid; justify-items: end; }
.hangar-stat strong { color: #8eeafd; font: 900 2rem/1 ui-monospace, monospace; }
.hangar-stat span { margin-top: 5px; color: #5f8098; font: 900 .55rem/1 ui-monospace, monospace; letter-spacing: .14em; }
.saved-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 54px; }
.saved-list-card { min-width: 0; border: 1px solid #28465f; background: linear-gradient(145deg, #0b2032, #081522); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.saved-list-card:hover { border-color: #4d9dbc; box-shadow: 0 8px 30px #0005, inset 3px 0 #50cee9; }
.saved-list-open { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 104px; padding: 16px; border-radius: 0; background: transparent; color: inherit; text-align: left; }
.saved-list-open:hover { transform: none; }
.saved-list-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #3e7a9c; color: #82e0f7; background: #0b3047; font-size: 1.2rem; }
.saved-list-copy, .saved-list-value { display: grid; min-width: 0; gap: 5px; }
.saved-list-copy small { color: #62c3df; font: 900 .55rem/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.saved-list-copy strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.saved-list-copy span { color: #758ca0; font-size: .65rem; }
.saved-list-value { justify-items: end; padding-left: 10px; }
.saved-list-value strong { font-size: .9rem; white-space: nowrap; }
.saved-list-value small { color: #6c8295; font-size: .55rem; }
.saved-list-card footer { width: 100%; margin: 0; display: flex; align-items: center; justify-content: space-between; padding: 9px 15px; border-top: 1px solid #1f3b51; color: #58748a; font: 700 .57rem/1 ui-monospace, monospace; }
.saved-list-card footer button { padding: 5px 7px; border-radius: 2px; background: transparent; color: #6dcde9; font-size: .59rem; }
.saved-list-card footer button:hover { transform: none; background: #11364d; color: white; }
.saved-list-empty { width: min(480px, calc(100% - 40px)); margin: 30px auto; padding: 42px; border: 1px dashed #345976; background: #0a1b2a; text-align: center; }
.saved-list-empty > div { display: grid; place-items: center; width: 54px; height: 54px; margin: auto; border: 1px solid #54cce8; color: #7fe5fa; font-size: 1.4rem; }
.saved-list-empty h3 { margin: 18px 0 7px; }
.saved-list-empty p { margin: 0 auto 20px; color: #7890a4; font-size: .76rem; line-height: 1.5; }
.hangar-loading, .saved-list-error { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 180px; color: #708ba0; font-size: .72rem; }
.hangar-loading i { width: 18px; height: 18px; border: 2px solid #254962; border-top-color: #63d8f3; border-radius: 50%; animation: hangar-spin .8s linear infinite; }
@keyframes hangar-spin { to { transform: rotate(360deg); } }
.saved-list-error { flex-direction: column; color: #ec8290; }

.list-detail-header { padding-right: 65px; }
.account-back { padding: 8px 0; background: transparent; color: #75d4ee; font-size: .7rem; }
.account-back:hover { transform: none; color: white; }
.danger-quiet { border: 1px solid #743b48; border-radius: 3px; background: #27141d; color: #f08b97; font-size: .67rem; }
.danger-quiet:hover { border-color: #ec6474; background: #461c29; }
.revoke-share { color: #f4b47c; }
.list-detail-title { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 34px 54px 12px; }
.list-detail-title > div { min-width: 0; }
.list-detail-title span { color: #63d1ef; font: 900 .58rem/1 ui-monospace, monospace; letter-spacing: .14em; }
.list-detail-title input { min-width: min(560px, 62vw); margin: 5px 0 3px; padding: 2px 0; border: 0; background: transparent; color: white; box-shadow: none; font-size: 2rem; font-weight: 900; letter-spacing: -.04em; }
.list-detail-title p { margin: 0; color: #718a9e; font-size: .65rem; }
#detail-list-description { display: block; width: calc(100% - 108px); margin: 0 54px 18px; resize: vertical; color: #b8c6d2; font-size: .73rem; }
.detail-price-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 54px 23px; border: 1px solid #294961; background: #081827; }
.detail-price-strip > div { display: grid; gap: 4px; padding: 15px 17px; border-right: 1px solid #294961; }
.detail-price-strip > div:last-child { border-right: 0; }
.detail-price-strip small { color: #64869e; font: 900 .53rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.detail-price-strip strong { font-size: 1rem; }
.detail-price-strip span { color: #70899d; font-size: .61rem; }
.detail-price-strip .price-up strong { color: #75e0b4; }
.detail-price-strip .price-down strong { color: #ff8290; }
.seller-checkout-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; margin: -7px 54px 22px; padding: 13px 14px; border: 1px solid #31536b; background: linear-gradient(100deg, #0c2638, #091925); box-shadow: inset 3px 0 #64d9f4; }
.seller-checkout-panel[hidden] { display: none; }
.seller-checkout-copy { display: grid; min-width: 0; gap: 4px; }
.seller-checkout-copy > span, .sale-status-control > span { color: #68d5f1; font: 900 .53rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.seller-checkout-copy strong { font-size: .76rem; }
.seller-checkout-copy small { overflow: hidden; color: #7690a4; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.sale-status-control { display: grid; gap: 5px; }
.sale-status-control select { min-width: 112px; min-height: 34px; padding: 5px 25px 5px 9px; font-size: .63rem; text-transform: capitalize; }
.seller-checkout-panel > button { min-height: 39px; border-color: #34617d; border-radius: 3px; font-size: .63rem; }
.detail-list-items { display: grid; gap: 14px; padding: 0 54px; }
.detail-item-section { border: 1px solid #243f56; background: #081725; }
.detail-item-section > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid #243f56; background: #0b2032; }
.detail-item-section > header div { display: flex; align-items: baseline; gap: 9px; }
.detail-item-section > header span { color: #69d1ee; font: 900 .61rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.detail-item-section > header strong, .detail-item-section > header small { color: #6f8a9f; font-size: .59rem; }
.detail-item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px; border-right: 1px solid #1d3549; border-bottom: 1px solid #1d3549; }
.detail-card-open { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; padding: 0; background: transparent; color: inherit; text-align: left; }
.detail-card-open:hover { transform: none; }
.detail-card-open img { width: 38px; height: 53px; border: 1px solid #31526a; border-radius: 2px; object-fit: cover; background: #0d2638; }
.detail-card-open span { display: grid; min-width: 0; gap: 3px; }
.detail-card-open small, .detail-card-open em { overflow: hidden; color: #6caecc; font: 700 .55rem/1.1 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.detail-card-open strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.detail-card-open em { color: #71879a; font-style: normal; }
.detail-quantity { display: flex; align-items: center; border: 1px solid #2e526c; }
.detail-quantity button { width: 27px; height: 29px; padding: 0; border-radius: 0; background: #10283a; color: #8dddf2; }
.detail-quantity button:hover { transform: none; background: #19445d; }
.detail-quantity b { min-width: 30px; color: white; font-size: .63rem; text-align: center; }
.detail-line-price { min-width: 68px; font-size: .68rem; text-align: right; }
.list-detail-footer { display: flex; align-items: center; gap: 15px; padding: 23px 54px 5px; }
.list-detail-footer small { color: #6c8295; font-size: .62rem; }
.detail-list-empty { padding: 35px; color: #72899c; text-align: center; }

.save-list-dialog { width: min(580px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 36px 40px 38px; overflow: auto; background: radial-gradient(circle at 100% 0, #12506a55, transparent 18rem), #081725; }
.save-list-dialog > .dialog-close { top: 14px; right: 14px; }
.save-list-heading h2 { margin: 9px 0 5px; font-size: 1.8rem; letter-spacing: -.04em; }
.save-list-heading p { margin: 0 0 24px; color: #7d94a8; font-size: .74rem; line-height: 1.55; }
#save-list-form { display: grid; gap: 17px; }
.save-list-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.save-rate-preview { display: flex; align-items: center; min-height: 43px; padding: 0 12px; border: 1px solid #2d4b63; background: #0a1c2b; color: #7c95a8; font-size: .73rem; }
.save-rate-preview strong { margin-left: 5px; color: #7ee1b6; }
.save-list-dialog textarea { width: 100%; resize: vertical; color: white; padding: 12px; }
.save-list-dialog label span small { color: #607d92; font-weight: 600; }
.save-list-summary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #294861; background: #07131f; }
.save-list-summary span { display: grid; gap: 4px; padding: 12px; border-right: 1px solid #294861; color: #6d879b; font-size: .58rem; text-align: center; }
.save-list-summary span:last-child { border-right: 0; }
.save-list-summary b { color: #eaf8ff; font-size: .73rem; }
.save-list-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.save-list-actions button { min-height: 52px; border-radius: 3px; font-size: .68rem; }

.shared-list-dialog { width: min(760px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 35px; overflow: auto; }
.shared-list-heading h2 { margin: 8px 0 5px; font-size: 2rem; letter-spacing: -.045em; }
.shared-list-heading p { margin: 0; color: #71899d; font-size: .7rem; }
.shared-list-total { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; margin: 22px 0 14px; padding: 15px; border: 1px solid #31516b; background: #0b2133; }
.shared-list-total span, .shared-list-total small { color: #7891a4; font-size: .64rem; }
.shared-list-total strong { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 1.15rem; }
.shared-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.shared-list-items article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; min-width: 0; padding: 8px; border: 1px solid #233f55; background: #091926; }
.shared-list-items img { width: 42px; height: 58px; object-fit: cover; }
.shared-list-items article > span { display: grid; min-width: 0; gap: 3px; }
.shared-list-items small, .shared-list-items em { color: #6c9db8; font: 700 .53rem/1.1 ui-monospace, monospace; }
.shared-list-items em { color: #6d8192; font-style: normal; }
.shared-list-items article span strong { overflow: hidden; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.shared-list-items article > b, .shared-list-items article > strong { font-size: .66rem; white-space: nowrap; }
.shared-list-note { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; border-left: 3px solid #61d4ef; background: #0c2638; }
.shared-list-note b { color: #8beaff; font-size: .68rem; }
.shared-list-note span { color: #7890a3; font-size: .63rem; }
.shared-list-heading > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shared-sale-status { padding: 6px 9px; border: 1px solid #3c6a82; border-radius: 999px; background: #102b3c; color: #86dff3; font: 900 .56rem/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.shared-sale-status[data-status="reserved"] { border-color: #946e36; background: #332818; color: #f4c673; }
.shared-sale-status[data-status="sold"], .shared-sale-status[data-status="paid"] { border-color: #477660; background: #153025; color: #7be0b0; }
.shared-checkout { margin-top: 17px; border: 1px solid #35617c; background: linear-gradient(145deg, #0b2639, #071621); box-shadow: inset 3px 0 #57d8f5; }
.shared-checkout > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid #294c64; }
.shared-checkout > header div { display: grid; gap: 5px; }
.shared-checkout > header span { color: #68d8f4; font: 900 .53rem/1 ui-monospace, monospace; letter-spacing: .13em; }
.shared-checkout > header strong { font-size: .88rem; }
.shared-checkout > header > b { color: #fff; font-size: 1.15rem; }
.shared-payment-grid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 17px; }
.shared-payment-qr { align-self: start; padding: 9px; border: 1px solid #3d647c; background: #fff; cursor: zoom-in; text-align: center; }
.shared-payment-qr img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.shared-payment-qr small { display: block; margin-top: 7px; color: #315063; font-size: .57rem; }
.shared-payment-details { display: grid; align-content: start; gap: 14px; min-width: 0; }
.shared-payment-details dl { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.shared-payment-details dt { color: #668aa2; font: 800 .57rem/1.35 ui-monospace, monospace; text-transform: uppercase; }
.shared-payment-details dd { overflow-wrap: anywhere; margin: 0; color: #d8e7f0; font-size: .7rem; line-height: 1.35; }
.shared-payment-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.shared-payment-actions button, .shared-payment-actions a { min-height: 34px; padding: 9px 11px; border: 1px solid #39708d; border-radius: 3px; background: #103148; color: #92e9fb; font: 800 .61rem/1 Arial, sans-serif; text-decoration: none; }
.shared-payment-actions button:hover, .shared-payment-actions a:hover { transform: none; border-color: #75e5fa; background: #17445d; color: white; }
.shared-payment-warning { display: flex; gap: 10px; margin: 0 17px 17px; padding: 11px 12px; border-left: 3px solid #f0b85a; background: #2b2415; }
.shared-payment-warning b { flex: 0 0 auto; color: #f3c36f; font-size: .64rem; }
.shared-payment-warning span { color: #b9ad91; font-size: .62rem; line-height: 1.45; }

.seller-checkout-dialog { width: min(720px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 35px 40px 38px; overflow: auto; background: radial-gradient(circle at 100% 0, #124f6855, transparent 22rem), #071522; }
.seller-checkout-dialog::backdrop { background: #01050bec; backdrop-filter: blur(10px); }
.checkout-dialog-heading > span { color: #67d8f4; font: 900 .58rem/1 ui-monospace, monospace; letter-spacing: .14em; }
.checkout-dialog-heading h2 { margin: 9px 0 6px; font-size: 1.8rem; letter-spacing: -.04em; }
.checkout-dialog-heading p { max-width: 620px; margin: 0 0 22px; color: #7d95a8; font-size: .72rem; line-height: 1.55; }
#seller-checkout-form { display: grid; gap: 16px; }
.checkout-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; padding: 13px; border: 1px solid #346079; background: #0b2537; }
.checkout-toggle input { width: 18px; height: 18px; margin-top: 1px; accent-color: #54d4f1; }
.checkout-toggle > span { display: grid; gap: 5px; }
.checkout-toggle b { color: #e6f6fd; font-size: .72rem; }
.checkout-toggle small { color: #7691a4; font-size: .62rem; line-height: 1.4; }
.checkout-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seller-checkout-dialog label:not(.checkout-toggle):not(.file-picker) { display: grid; gap: 6px; color: #7c99ad; font: 800 .61rem/1 ui-monospace, monospace; }
.seller-checkout-dialog label span small { color: #5f7b8f; font-weight: 600; }
.seller-checkout-dialog input, .seller-checkout-dialog textarea, .seller-checkout-dialog select { width: 100%; color: #eef8fd; font: 600 .71rem/1.35 Arial, sans-serif; }
.seller-checkout-dialog textarea { resize: vertical; }
.payment-qr-editor { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 17px; padding: 14px; border: 1px solid #2b4a60; background: #081927; }
.payment-qr-preview { display: grid; place-items: center; align-content: center; width: 132px; aspect-ratio: 1; border: 1px dashed #4b7087; background: #0c2738; color: #69d6f1; }
.payment-qr-preview img { width: 100%; height: 100%; padding: 5px; object-fit: contain; background: white; }
.payment-qr-preview span { font: 900 1.3rem/1 ui-monospace, monospace; }
.payment-qr-preview small { margin-top: 8px; color: #668297; font-size: .56rem; }
.payment-qr-editor > div:last-child { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.payment-qr-editor strong { width: 100%; font-size: .75rem; }
.payment-qr-editor p { width: 100%; margin: 0 0 4px; color: #758ea2; font-size: .63rem; line-height: 1.45; }
.payment-qr-editor .file-picker { padding: 9px 12px; border: 1px solid #39708e; background: #0f3045; color: #8ce6f9; font-size: .61rem; }
.payment-qr-editor .account-text-button { padding: 9px 4px; color: #ef8793; }
.checkout-privacy-note { display: flex; gap: 10px; padding: 11px 12px; border-left: 3px solid #eab057; background: #292215; }
.checkout-privacy-note b { color: #f0c06c; font-size: .65rem; }
.checkout-privacy-note span { color: #b6aa8e; font-size: .62rem; line-height: 1.45; }
.checkout-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.checkout-dialog-actions button { min-height: 46px; border-radius: 3px; }
.checkout-dialog-actions .danger-quiet { margin-right: auto; }

.export-checkout-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; border: 1px solid #356078; background: #0b2537; }
.export-checkout-option input { width: 17px; height: 17px; accent-color: #51d6f3; }
.export-checkout-option span { display: grid; gap: 4px; }
.export-checkout-option b { color: #dff5fc; font-size: .68rem; }
.export-checkout-option small { color: #7390a3; font-size: .59rem; line-height: 1.4; }

.app-toast { position: fixed; z-index: 1000; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 16px; max-width: calc(100% - 24px); padding: 13px 15px; border: 1px solid #4d91af; background: #0b2638f5; color: #e9f8ff; box-shadow: 0 14px 48px #000c; opacity: 0; transform: translate(-50%, 14px); transition: opacity .18s ease, transform .18s ease; backdrop-filter: blur(12px); }
.app-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.app-toast span { font-size: .7rem; }
.app-toast button { padding: 5px 7px; border-radius: 2px; background: #15536d; color: #93ecff; font-size: .66rem; white-space: nowrap; }

@media (max-width: 980px) {
  .account-auth-view { grid-template-columns: 1fr 1fr; }
  .account-hero, .account-auth-panel { padding: 38px; }
  .saved-list-grid { grid-template-columns: 1fr; }
  .detail-item-grid { grid-template-columns: 1fr; }
  .detail-list-item { border-right: 0; }
}

@media (max-width: 760px) {
  .header-actions { grid-template-columns: 1fr 1fr; }
  .account-trigger { grid-column: 1 / -1; min-width: 0; }
  .account-dialog { inset: 0; width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; margin: 0; border: 0; clip-path: none; }
  .account-auth-view { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; min-height: 100dvh; }
  .account-hero { justify-content: flex-start; min-height: 220px; padding: 28px 24px; border-right: 0; border-bottom: 1px solid #2d5270; }
  .account-emblem { margin: 19px 0 12px; }
  .account-emblem b { width: 44px; height: 44px; }
  .account-hero h2 { max-width: 86%; font-size: 1.9rem; }
  .account-hero > p { margin: 13px 0 0; font-size: .71rem; line-height: 1.45; }
  .account-feature-strip { display: none; }
  .account-auth-panel { place-items: start stretch; min-height: calc(100dvh - 220px); padding: 30px 24px 42px; }
  #account-auth-content, .account-unavailable { width: 100%; }
  .account-lists-view, .account-detail-view { min-height: 100dvh; }
  .account-dashboard-header, .list-detail-header { padding: 12px 50px 12px 15px; }
  .dashboard-actions .secondary { width: 40px; overflow: hidden; padding-inline: 11px; font-size: 0; }
  .dashboard-actions .secondary::before { content: "+"; font-size: 1rem; }
  .hangar-heading { align-items: center; padding: 29px 17px 18px; }
  .hangar-heading h2 { font-size: 1.6rem; }
  .hangar-heading p { max-width: 270px; }
  .saved-list-grid { padding: 0 15px; }
  .saved-list-open { grid-template-columns: 38px minmax(0, 1fr); min-height: 96px; }
  .saved-list-value { grid-column: 2; align-items: baseline; justify-items: start; grid-template-columns: auto auto; padding-left: 0; }
  .saved-list-value small { margin-left: 7px; }
  .list-detail-header { align-items: start; min-height: 92px; padding-right: 48px; }
  .list-detail-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
  .list-detail-actions button { padding: 8px 7px; font-size: .57rem !important; }
  .list-detail-title { align-items: stretch; flex-direction: column; padding: 24px 16px 10px; }
  .list-detail-title input { min-width: 0; width: 100%; font-size: 1.55rem; }
  #detail-list-description { width: calc(100% - 32px); margin-inline: 16px; }
  .detail-price-strip { grid-template-columns: 1fr 1fr; margin: 0 16px 17px; }
  .detail-price-strip > div:nth-child(2) { border-right: 0; }
  .detail-price-strip > div:last-child { grid-column: 1 / -1; border-top: 1px solid #294961; }
  .detail-list-items { padding: 0 16px; }
  .seller-checkout-panel { grid-template-columns: minmax(0, 1fr) auto; margin: -3px 16px 17px; }
  .seller-checkout-copy { grid-column: 1 / -1; }
  .seller-checkout-copy small { white-space: normal; line-height: 1.35; }
  .seller-checkout-panel > button { width: 100%; }
  .sale-status-control { grid-column: 1 / -1; }
  .sale-status-control select { width: 100%; }
  .list-detail-footer { align-items: flex-start; flex-direction: column; padding: 20px 16px; }
  .save-list-dialog { inset: 0; width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; margin: 0; padding: 44px 20px 32px; border: 0; clip-path: none; }
  .save-list-actions { grid-template-columns: 1fr; }
  .save-list-actions .account-primary { grid-row: 1; }
  .shared-list-dialog { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; padding: 45px 15px 25px; border: 0; clip-path: none; }
  .shared-list-items { grid-template-columns: 1fr; }
  .shared-payment-grid { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 13px; }
  .shared-payment-details dl { grid-template-columns: 1fr; gap: 4px; }
  .shared-payment-details dd { margin-bottom: 5px; }
  .shared-payment-warning { align-items: flex-start; flex-direction: column; }
  .seller-checkout-dialog { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; padding: 44px 18px 30px; border: 0; clip-path: none; }
}

@media (max-width: 430px) {
  .account-hero { min-height: 208px; }
  .account-hero > p { max-width: 92%; }
  .account-auth-panel { padding-top: 25px; }
  .auth-form-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hangar-stat { display: none; }
  .saved-list-open { padding: 13px 12px; }
  .saved-list-icon { width: 36px; height: 36px; }
  .save-list-fields { grid-template-columns: 1fr; }
  .save-list-summary { grid-template-columns: 1fr; }
  .save-list-summary span { display: flex; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid #294861; text-align: left; }
  .save-list-summary span:last-child { border-bottom: 0; }
  .detail-list-item { grid-template-columns: minmax(0, 1fr) auto; }
  .detail-line-price { grid-column: 2; font-size: .62rem; }
  .detail-quantity { grid-row: 1 / 3; grid-column: 2; }
  .detail-line-price { display: none; }
  .checkout-field-grid { grid-template-columns: 1fr; }
  .payment-qr-editor { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 11px; }
  .payment-qr-preview { width: 104px; }
  .shared-payment-grid { grid-template-columns: 1fr; }
  .shared-payment-qr { width: min(220px, 100%); margin: auto; }
  .checkout-dialog-actions { align-items: stretch; flex-direction: column; }
  .checkout-dialog-actions button { width: 100%; }
  .checkout-dialog-actions .danger-quiet { order: 2; }
}

/* Primary module navigation */
body > .module-nav { width: min(1240px, calc(100% - 40px)); margin: -3px auto 22px; }
.module-nav { position: sticky; z-index: 8; top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 5px; border: 1px solid #294966; background: rgba(4, 12, 21, .92); box-shadow: 0 12px 35px #0008; backdrop-filter: blur(16px); }
.module-nav button { display: flex; align-items: center; justify-content: center; gap: 11px; min-width: 0; min-height: 58px; border: 1px solid transparent; background: transparent; color: #71879d; text-align: left; }
.module-nav button:hover { transform: none; border-color: #284b66; background: #0b2032; color: #cce8f5; }
.module-nav button.active { border-color: #47c6e7; background: linear-gradient(135deg, #123f5c, #0a2539); color: #f0fbff; box-shadow: inset 3px 0 #56d7f5, 0 0 24px #31bcdc1c; }
.module-nav button > span:last-child { display: grid; min-width: 0; gap: 4px; }
.module-nav strong { font: 900 .75rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.module-nav small { color: #6f8ba0; font-size: .62rem; }
.module-nav button.active small { color: #7fcce0; }
.module-nav-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #345774; color: #6ccce6; background: #071725; font: 900 .85rem/1 ui-monospace, monospace; }
.module-nav button.active .module-nav-icon { border-color: #64dcf5; color: #fff; box-shadow: 0 0 13px #54d9f344; }
body[data-module="deck"] .cart-bar, body[data-module="deck"] .mobile-search-dock, body[data-module="deck"] .market-header-action, body[data-module="deck"] #refresh { display: none !important; }

/* Deck Lab */
.deck-lab { padding-bottom: 52px; }
.deck-lab-hero { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 30px; margin: 6px 0 20px; padding: 31px 34px; border: 1px solid #2e536e; overflow: hidden; background: radial-gradient(circle at 85% 15%, #174c6655, transparent 24rem), linear-gradient(135deg, #0d2537, #07111d 58%, #17101c); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.deck-lab-hero::after { content: "DECK-LAB / SYS.02"; position: absolute; top: 13px; right: 18px; color: #496c83; font: 800 .52rem/1 monospace; letter-spacing: .18em; }
.deck-lab-hero > div:first-child { min-width: 0; }
.deck-lab-hero > div:first-child > span, .deck-panel-heading span, .deck-console-top > div > span, .deck-dialog-kicker { color: #62d4ef; font: 900 .58rem/1 ui-monospace, monospace; letter-spacing: .16em; }
.deck-lab-hero h2 { margin: 9px 0 8px; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.05em; }
.deck-lab-hero p { max-width: 700px; margin: 0; color: #88a0b4; font-size: .78rem; line-height: 1.55; }
.deck-lab-rule-chip { flex: 0 0 auto; display: grid; grid-template-columns: 9px auto; min-width: 235px; padding: 15px 18px; border: 1px solid #375e78; background: #071825c9; }
.deck-lab-rule-chip i { grid-row: 1 / 4; align-self: stretch; width: 4px; background: #63dcb0; box-shadow: 0 0 10px #63dcb077; }
.deck-lab-rule-chip span { color: #6a8ba2; font: 800 .52rem/1 monospace; letter-spacing: .12em; }
.deck-lab-rule-chip strong { margin-top: 5px; color: #effbff; font-size: 1.15rem; }
.deck-lab-rule-chip small { margin-top: 3px; color: #7890a4; font-size: .6rem; }
.deck-mobile-switch { display: none; }
.deck-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 430px); align-items: start; gap: 14px; }
.deck-catalog-panel, .deck-console { min-width: 0; border-radius: 0; background: rgba(6, 17, 29, .96); }
.deck-catalog-panel { padding: 18px; }
.deck-panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid #223d53; }
.deck-panel-heading h3 { margin: 6px 0 0; font-size: 1.25rem; }
.deck-panel-heading p { margin: 0; color: #7891a5; font: 700 .62rem/1 monospace; }
.deck-catalog-tools { position: sticky; z-index: 6; top: 70px; margin: -3px -3px 0; padding: 7px; border: 1px solid #294b65; background: #071522f2; box-shadow: 0 12px 28px #0008; backdrop-filter: blur(14px); }
.deck-search-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 7px; }
.deck-search-row label, .deck-filter-grid label, .deck-console-top label { display: grid; min-width: 0; gap: 5px; }
.deck-search-row label > span, .deck-filter-grid label > span, .deck-console-top label > span { color: #6e879c; font: 800 .52rem/1 monospace; letter-spacing: .11em; text-transform: uppercase; }
.deck-search > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.deck-search > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 43px; border: 1px solid #31526d; background: #030a12; box-shadow: inset 3px 0 #55d0ef; }
.deck-search > div:focus-within { border-color: #62dcf7; }
.deck-search b { padding-left: 12px; color: #68d9f4; }
.deck-search input { width: 100%; min-height: 41px; padding: 8px 9px; border: 0; box-shadow: none; background: transparent; }
.deck-search input:focus { box-shadow: none; }
.deck-search button { min-width: 38px; min-height: 38px; padding: 0; border: 0; background: transparent; color: #7890a5; }
.deck-search button:hover { transform: none; color: #fff; }
.deck-filter-drawer { position: relative; }
.deck-filter-drawer summary { display: grid; grid-template-columns: auto auto 12px; align-items: center; gap: 7px; min-height: 43px; padding: 8px 12px; border: 1px solid #31526d; background: #0c2639; color: #b4cad9; cursor: pointer; list-style: none; font: 850 .6rem/1 ui-monospace, monospace; text-transform: uppercase; white-space: nowrap; }
.deck-filter-drawer summary::-webkit-details-marker { display: none; }
.deck-filter-drawer summary:hover, .deck-filter-drawer[open] summary { border-color: #5ad5f1; background: #123e58; color: #f2fcff; }
.deck-filter-drawer summary b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: #ef4359; color: white; font-size: .55rem; }
.deck-filter-drawer summary i { color: #62d6f0; font-size: .72rem; font-style: normal; transition: transform .18s ease; }
.deck-filter-drawer[open] summary i { transform: rotate(180deg); }
.deck-filter-popover { position: absolute; z-index: 12; top: calc(100% + 7px); right: 0; width: min(540px, calc(100vw - 48px)); padding: 12px; border: 1px solid #3b6682; background: #071522f7; box-shadow: 0 24px 70px #000d; backdrop-filter: blur(18px); }
.deck-filter-popover header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; padding-bottom: 10px; border-bottom: 1px solid #29465b; }
.deck-filter-popover header > div { display: grid; gap: 3px; }
.deck-filter-popover header strong { color: #edfaff; font-size: .72rem; }
.deck-filter-popover header small { color: #71899d; font-size: .54rem; }
.deck-filter-popover header button { min-height: 31px; padding: 5px 9px; border: 1px solid #31536d; background: #0b263a; color: #88cfe1; font-size: .55rem; }
.deck-filter-popover header button:hover { transform: none; border-color: #5ad5f1; color: white; }
.deck-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.deck-filter-grid select { width: 100%; min-height: 41px; padding: 7px 9px; font-size: .64rem; }
.deck-card-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: stretch; gap: 10px; margin-top: 13px; }
.deck-result-card { position: relative; display: grid; grid-template-columns: 100px minmax(0, 1fr) 42px; align-items: center; gap: 11px; min-width: 0; min-height: 158px; padding: 9px; border: 1px solid #29445c; background: linear-gradient(145deg, #0d2133, #07131f); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.deck-result-card:hover { border-color: #4c91ad; background: linear-gradient(145deg, #11304a, #081827); }
.deck-result-card.in-deck { border-color: #54cce9; background: radial-gradient(circle at 10% 20%, #1b779744, transparent 55%), linear-gradient(145deg, #12334c, #081927); box-shadow: inset 3px 0 #59d8f5, 0 0 18px #28bede22; }
.deck-result-image { position: relative; width: 100px; min-height: 138px; height: 138px; padding: 0; border: 0; background: #06111b; overflow: hidden; }
.deck-result-image:hover { transform: none; }
.deck-result-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.deck-result-image b { position: absolute; left: 3px; bottom: 3px; min-width: 27px; padding: 4px 6px; background: #ec4055e8; color: #fff; font: 900 .62rem/1 monospace; animation: quantity-confirm .22s ease-out; }
.deck-result-info { display: grid; min-width: 0; align-content: center; gap: 5px; }
.deck-result-info > span { color: #68bfe0; font: 800 .58rem/1.2 monospace; }
.deck-result-info > strong { display: -webkit-box; min-height: 2.45em; overflow: hidden; color: #eef8fc; font-size: .88rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.deck-result-info > small { display: -webkit-box; min-height: 2.7em; overflow: hidden; color: #7897ad; font-size: .65rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.deck-result-info > em { color: #73cfe8; font-size: .68rem; font-style: normal; font-weight: 800; }
.deck-result-controls { align-self: stretch; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 5px; }
.deck-result-controls button { width: 42px; min-width: 42px; min-height: 54px; padding: 0; font-size: 1.12rem; }
.deck-result-add { border: 1px solid #38769a; background: #123a55; color: #dffaff; }
.deck-result-add:hover { transform: none; border-color: #65ddf7; background: #176180; }
.deck-result-remove { border: 1px solid #9a4053; background: #4b1723; color: #ffabb6; }
.deck-result-remove:hover { transform: none; border-color: #ff7182; background: #7b2031; color: white; }
.deck-result-controls button:active:not(:disabled) { transform: scale(.94); }
.deck-result-controls button:disabled { cursor: default; }
.deck-result-add:disabled { border-color: #3e5968; background: #102733; color: #6c8794; }
.deck-result-remove:disabled { visibility: hidden; }
.deck-result-note { min-height: 1em; margin: 13px 2px 0; color: #708ba0; font: .6rem/1.5 monospace; }

.deck-console { position: sticky; top: 73px; max-height: calc(100dvh - 86px); border-color: #355b76; overflow: auto; box-shadow: 0 20px 60px #0008; scrollbar-width: thin; }
.deck-console-top { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; padding: 16px; border-bottom: 1px solid #28475e; background: #0a1d2ef5; backdrop-filter: blur(12px); }
.deck-console-top > div { display: grid; min-width: 0; gap: 5px; }
.deck-console-top input { width: 100%; min-height: 39px; padding: 6px 9px; color: #fff; font-size: 1rem; font-weight: 900; }
.deck-console-top select { min-height: 39px; padding: 7px; font-size: .65rem; }
.deck-action-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 10px 16px; }
.deck-action-row button { min-width: 0; min-height: 38px; padding: 7px; border: 1px solid #2f526e; background: #0c2235; color: #a8c0d3; font: 800 .58rem/1 monospace; text-transform: uppercase; }
.deck-action-row button:hover { transform: none; border-color: #56cce9; color: white; }
.deck-action-row .deck-save { border-color: #43bddc; background: #12516d; color: #eafbff; }
.deck-validation { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 16px 10px; padding: 10px; border: 1px solid #6e5562; background: #21131c; }
.deck-validation[data-state="legal"] { border-color: #317b64; background: #0e2c25; }
.deck-validation[data-state="empty"] { border-color: #34526a; background: #0a1928; }
.deck-validation-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #d15a6b; color: #ff7a8a; background: #351620; font: 950 .9rem/1 monospace; }
.deck-validation[data-state="legal"] .deck-validation-mark { border-color: #56d1a5; color: #7aefc3; background: #153c31; }
.deck-validation > div { display: grid; min-width: 0; gap: 3px; }
.deck-validation strong { color: #f3f8fb; font-size: .67rem; }
.deck-validation small { overflow: hidden; color: #899bad; font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.deck-validation button { min-height: 32px; padding: 5px 7px; border: 0; background: transparent; color: #72cde6; font-size: .57rem; }
.deck-validation button:hover { transform: none; color: white; }
.deck-progress-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; padding: 0 16px 11px; }
.deck-progress-grid > div { min-width: 0; padding: 8px; border: 1px solid #263f55; background: #071522; }
.deck-progress-grid span { display: block; color: #6f879b; font: 700 .48rem/1 monospace; text-transform: uppercase; }
.deck-progress-grid strong { display: block; margin: 5px 0 6px; color: #e8f7fd; font: 900 .68rem/1 monospace; }
.deck-progress-grid i { display: block; height: 3px; background: #1b3447; overflow: hidden; }
.deck-progress-grid i b { display: block; width: 0; height: 100%; background: #55d3f2; box-shadow: 0 0 7px #55d3f2; transition: width .2s ease; }
.deck-progress-grid i b.over { background: #ef4c61; }
.deck-view-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 0 16px 10px; padding: 3px; border: 1px solid #2a465d; background: #050d16; }
.deck-view-toggle button { min-height: 34px; border: 0; background: transparent; color: #71899e; font: 800 .55rem/1 monospace; text-transform: uppercase; }
.deck-view-toggle button:hover { transform: none; }
.deck-view-toggle button.active { background: #123a53; color: #e7faff; box-shadow: inset 0 0 0 1px #43bddd66; }
.deck-zone-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin: 0 16px; border-bottom: 1px solid #28465d; }
.deck-zone-tabs button { min-width: 0; min-height: 37px; padding: 7px 5px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #71899e; font: 800 .55rem/1 monospace; text-transform: uppercase; }
.deck-zone-tabs button:hover { transform: none; color: #d8f3fc; }
.deck-zone-tabs button.active { border-bottom-color: #58d8f5; color: #e9fbff; }
.deck-zone-tabs span { margin-left: 4px; color: #60cde8; }
.deck-lines { min-height: 190px; padding: 8px 16px 15px; }
.deck-line-group { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px 5px; color: #6ecfe8; font: 900 .5rem/1 monospace; letter-spacing: .12em; }
.deck-line-group b { display: grid; place-items: center; min-width: 22px; height: 19px; background: #102f44; }
.deck-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 0; padding: 6px; border-top: 1px solid #1c3447; background: #081725; }
.deck-line-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; min-height: 51px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.deck-line-card:hover { transform: none; }
.deck-line-card img { width: 38px; height: 51px; object-fit: cover; border: 1px solid #2d5269; }
.deck-line-card span { display: grid; min-width: 0; gap: 3px; }
.deck-line-card small { color: #62b9db; font: 800 .49rem/1 monospace; }
.deck-line-card strong { overflow: hidden; color: #edf7fb; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.deck-line-card em { color: #6f869a; font-size: .52rem; font-style: normal; }
.deck-line-controls { display: grid; grid-template-columns: 27px 32px 27px; align-items: center; }
.deck-line-controls button { min-width: 27px; min-height: 29px; height: 29px; padding: 0; border: 1px solid #31536b; background: #0d2b40; color: #8bdcf0; }
.deck-line-controls button:hover { transform: none; border-color: #65d8ef; }
.deck-line-controls b { display: grid; place-items: center; height: 29px; background: #050e18; color: #f3fbff; font: 900 .58rem/1 monospace; }
.deck-line-move { grid-column: 1 / -1; justify-self: end; min-height: 24px; margin-top: -3px; padding: 2px 6px; border: 0; background: transparent; color: #6dbbd3; font-size: .5rem; }
.deck-line-move:hover { transform: none; color: white; }
.deck-zone-empty { display: grid; place-items: center; gap: 6px; padding: 33px 10px; color: #6d8498; text-align: center; }
.deck-zone-empty b { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #35617a; color: #72d8ef; background: #0b293d; }
.deck-zone-empty strong { color: #9db1c1; font-size: .68rem; }
.deck-zone-empty span { font-size: .56rem; }
.deck-stats-view { display: grid; gap: 9px; padding: 0 16px 15px; }
.deck-stats-view > section { padding: 11px; border: 1px solid #263f54; background: #071521; }
.deck-stats-view header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #6cbfd9; font: 800 .5rem/1 monospace; letter-spacing: .1em; }
.deck-stats-view header strong { color: #7e93a5; font-size: .48rem; }
.deck-stat-bars { display: grid; gap: 7px; }
.deck-stat-bars > div { display: grid; grid-template-columns: 62px minmax(0, 1fr) 22px; align-items: center; gap: 6px; }
.deck-stat-bars span, .deck-stat-bars strong { color: #91a5b5; font: 800 .51rem/1 monospace; }
.deck-stat-bars strong { text-align: right; }
.deck-stat-bars i { display: block; height: 6px; background: #172d3d; }
.deck-stat-bars i b { display: block; height: 100%; background: var(--stat-color); box-shadow: 0 0 8px color-mix(in srgb, var(--stat-color) 60%, transparent); }
.deck-color-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.deck-color-chips > span { display: grid; grid-template-columns: 7px auto auto; align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid #2b475d; background: #0a1c2b; font: 700 .51rem/1 monospace; }
.deck-color-chips i { width: 7px; height: 7px; border-radius: 50%; background: var(--chip-color); box-shadow: 0 0 7px var(--chip-color); }
.deck-color-chips b { color: #a8bbc9; }
.deck-color-chips strong { color: #e5f1f6; }
.deck-cost-curve { display: grid; grid-template-columns: repeat(9, 1fr); align-items: end; gap: 5px; height: 105px; }
.deck-cost-curve > div { display: grid; grid-template-rows: 82px 17px; align-items: end; gap: 4px; height: 100%; text-align: center; }
.deck-cost-curve > div > b { position: relative; display: block; min-height: 0; background: linear-gradient(#55d8f5, #1d7092); box-shadow: 0 0 9px #38bede33; }
.deck-cost-curve > div > b span { position: absolute; top: -15px; left: 0; width: 100%; color: #bdd6e2; font: 700 .45rem/1 monospace; }
.deck-cost-curve small { color: #72899c; font: 700 .48rem/1 monospace; }
.deck-console-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid #28445a; background: #091a28; }
.deck-console-footer > div { display: grid; min-width: 0; gap: 3px; }
.deck-console-footer span { color: #6e879a; font: 700 .48rem/1 monospace; text-transform: uppercase; }
.deck-console-footer strong { color: #eef9fd; font-size: .9rem; }
.deck-console-footer small { color: #678094; font-size: .5rem; }
.deck-console-footer button { max-width: 132px; min-height: 39px; padding: 7px 9px; border: 1px solid #3a7899; background: #113c56; color: #dff9ff; font-size: .56rem; }

.deck-mini-dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 30px; border: 1px solid #39627f; background: linear-gradient(145deg, #0b2032, #050c14); color: #eef7fb; box-shadow: 0 30px 100px #000d; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.deck-mini-dialog::backdrop { background: #01050be8; backdrop-filter: blur(8px); }
.deck-mini-dialog h2 { margin: 8px 0 11px; font-size: 1.75rem; }
.deck-mini-dialog > p { color: #839aaf; font-size: .72rem; line-height: 1.55; }
.deck-mini-dialog textarea { width: 100%; resize: vertical; }
.validation-summary { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; padding: 12px; border: 1px solid #74525e; background: #24141c; }
.validation-summary[data-state="legal"] { border-color: #347b66; background: #102b24; }
.validation-summary > b { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid currentColor; color: #ff7586; }
.validation-summary[data-state="legal"] > b { color: #70e7ba; }
.validation-summary span { display: grid; gap: 4px; }
.validation-summary strong { font-size: .8rem; }
.validation-summary small { color: #8297aa; font-size: .6rem; }
.deck-mini-dialog ul { display: grid; gap: 7px; margin: 17px 0; padding: 0; list-style: none; }
.deck-mini-dialog li { padding: 9px 10px 9px 28px; border: 1px solid #283f52; background: #07131e; color: #b6c5d0; font-size: .68rem; line-height: 1.45; }
.deck-mini-dialog li::before { content: "◇"; float: left; margin-left: -19px; color: #62d3ef; }
.deck-transfer-dialog { width: min(680px, calc(100% - 24px)); }
.deck-transfer-dialog .import-feedback { margin: 10px 0; }
.deck-transfer-dialog .primary { width: 100%; margin-top: 12px; }
.deck-export-actions { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 6px; margin-top: 11px; }
.deck-export-actions button { min-width: 0; padding-inline: 8px; font-size: .58rem; }

@media (max-width: 1060px) {
  .deck-workbench { grid-template-columns: minmax(0, 1fr) 370px; }
  .deck-card-results { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .deck-filter-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .deck-lab-hero { align-items: stretch; flex-direction: column; padding: 26px; }
  .deck-lab-rule-chip { min-width: 0; width: 100%; }
  .deck-lab { padding-bottom: 104px; }
  .deck-mobile-switch { position: fixed; z-index: 20; right: 50%; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: min(480px, calc(100% - 20px)); margin: 0; padding: 5px; border: 1px solid #37627f; background: #06121ef2; box-shadow: 0 15px 45px #000d, 0 0 25px #2bbddd1c; backdrop-filter: blur(16px); transform: translateX(50%); }
  .deck-mobile-switch button { display: grid; justify-items: center; gap: 4px; min-height: 49px; padding: 7px; border: 1px solid transparent; background: transparent; color: #7890a4; font: 800 .59rem/1 monospace; text-transform: uppercase; }
  .deck-mobile-switch button.active { border-color: #43bedf; background: #123a53; color: white; }
  .deck-mobile-switch button > span { font-size: .62rem; }
  .deck-mobile-switch small { color: #68849a; font: 700 .49rem/1 monospace; text-transform: none; }
  .deck-mobile-switch button.active small { color: #8adff2; }
  .deck-mobile-switch b { color: #fff; }
  .deck-workbench { display: block; }
  .deck-console { position: static; max-height: none; }
  body[data-deck-pane="build"] .deck-catalog-panel { display: none; }
  body:not([data-deck-pane="build"]) .deck-console { display: none; }
  .deck-catalog-tools { top: 68px; }
  .deck-card-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck-console-top { top: 0; }
}

@media (max-width: 520px) {
  body > .module-nav { width: 100%; margin: 0 0 12px; }
  .module-nav { top: 0; gap: 2px; padding: 3px; border-inline: 0; }
  .module-nav button { min-height: 54px; gap: 6px; padding: 6px; }
  .module-nav-icon { width: 25px; height: 25px; }
  .module-nav strong { font-size: .61rem; letter-spacing: .04em; }
  .module-nav small { display: none; }
  .deck-lab { width: min(100% - 18px, 1240px) !important; }
  .deck-lab-hero { margin-top: 0; padding: 22px 18px; }
  .deck-lab-hero::after { display: none; }
  .deck-lab-hero h2 { font-size: 2.15rem; }
  .deck-lab-hero p { font-size: .69rem; }
  .deck-catalog-panel { padding: 10px; }
  .deck-panel-heading { align-items: start; flex-direction: column; gap: 7px; }
  .deck-catalog-tools { top: 60px; margin-inline: -4px; padding: 5px; }
  .deck-search-row { grid-template-columns: minmax(0, 1fr) auto; }
  .deck-filter-drawer summary { min-width: 47px; padding-inline: 12px; }
  .deck-filter-drawer summary > span { width: 18px; overflow: hidden; white-space: nowrap; }
  .deck-filter-popover { right: -1px; width: calc(100vw - 28px); max-height: calc(100dvh - 145px); overflow: auto; }
  .deck-filter-grid { grid-template-columns: 1fr 1fr; }
  .deck-card-results { grid-template-columns: 1fr; gap: 6px; }
  .deck-result-card { grid-template-columns: 88px minmax(0, 1fr) 44px; min-height: 139px; }
  .deck-result-image { width: 88px; height: 121px; min-height: 121px; }
  .deck-result-controls button { width: 44px; min-width: 44px; min-height: 46px; }
  .deck-console-top { grid-template-columns: minmax(0, 1fr) 98px; padding: 12px; }
  .deck-action-row { padding-inline: 12px; }
  .deck-validation { margin-inline: 12px; }
  .deck-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 12px; }
  .deck-view-toggle, .deck-zone-tabs { margin-inline: 12px; }
  .deck-lines, .deck-stats-view { padding-inline: 12px; }
  .deck-console-footer { grid-template-columns: 1fr; padding-inline: 12px; }
  .deck-console-footer button { max-width: none; width: 100%; }
  .deck-mini-dialog { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; padding: 48px 16px 25px; border: 0; clip-path: none; }
  .deck-export-actions { grid-template-columns: 1fr 1fr; }
  .deck-export-actions .primary { grid-column: 1 / -1; }
}

/* Market filter command popover */
.controls { position: relative; overflow: visible; }
.search-and-set { grid-template-columns: minmax(260px, 1fr) auto; }
.search-and-set > .filter-toggle { position: relative; grid-area: auto; align-self: end; min-height: 58px; margin: 0; padding-inline: 16px; border: 1px solid #39708f; background: linear-gradient(145deg, #123b55, #0a2335); color: #e3f8ff; }
.search-and-set > .filter-toggle:hover, .search-and-set > .filter-toggle[aria-expanded="true"] { transform: none; border-color: #5bd7f2; background: #154d69; box-shadow: 0 0 18px #32bddb2b; }
.controls-side { justify-content: flex-start; }
.active-filter.sort-chip { border-color: #765e9b; background: #2c2144; color: #dac9ff; }
body > .market-filter-popover {
  position: fixed;
  z-index: 40;
  top: var(--market-filter-top, 80px);
  left: var(--market-filter-left, 12px);
  display: flex;
  flex-direction: column;
  width: min(900px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--market-filter-top, 80px) - 12px);
  padding: 0;
  border: 1px solid #3d6b87;
  background: linear-gradient(145deg, #0a2031f8, #050e18fa);
  box-shadow: 0 26px 90px #000e, 0 0 30px #24b8d522;
  backdrop-filter: blur(18px);
  overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
body > .market-filter-popover:not([hidden]) { display: flex; }
.market-filter-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; border-bottom: 1px solid #315068; background: linear-gradient(90deg, #0e3148, #091826); }
.market-filter-header > div { display: grid; min-width: 0; gap: 4px; }
.market-filter-header span { color: #62d5ef; font: 900 .5rem/1 monospace; letter-spacing: .16em; }
.market-filter-header strong { color: #f1fbff; font-size: .92rem; }
.market-filter-header small { color: #7691a5; font-size: .59rem; }
.market-filter-header > button { flex: 0 0 auto; width: 36px; min-height: 36px; padding: 0; border: 1px solid #375b73; background: #0c2639; color: #d4edf6; font-size: 1.2rem; }
.market-filter-header > button:hover { transform: none; border-color: #60d6ef; background: #16445d; }
.market-filter-scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 0; padding: 12px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.market-filter-group { min-width: 0; padding: 11px; border: 1px solid #263f53; background: #071522; }
.market-filter-group > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.market-filter-group > header strong { color: #cce3ee; font: 850 .61rem/1 monospace; letter-spacing: .08em; text-transform: uppercase; }
.market-filter-group > header small { color: #638297; font: 700 .51rem/1 monospace; }
.market-filter-sets, .market-sort-field { grid-column: 1 / -1; }
.market-filter-options { display: flex; flex-wrap: wrap; gap: 6px; max-height: 116px; overflow: auto; scrollbar-width: thin; }
.market-filter-options.compact { max-height: 78px; }
.market-filter-options button { min-height: 30px; padding: 6px 9px; border: 1px solid #2d4b60; border-radius: 3px; background: #0b2030; color: #86a1b4; font: 750 .55rem/1.1 ui-monospace, monospace; }
.market-filter-options button:hover { transform: none; border-color: #4b8ba7; background: #103047; color: #e5f7ff; }
.market-filter-options button.active { border-color: #62d7f1; background: linear-gradient(135deg, #17617e, #12374f); color: #fff; box-shadow: inset 2px 0 #8be9fb, 0 0 12px #37bcd62c; }
#color-filter-options button[data-value="Blue"].active { border-color: #55adff; background: #164c79; }
#color-filter-options button[data-value="Green"].active { border-color: #61d18c; background: #174b34; }
#color-filter-options button[data-value="Red"].active { border-color: #f46c7d; background: #5a2030; }
#color-filter-options button[data-value="White"].active { border-color: #d8e9f5; background: #44515d; }
#color-filter-options button[data-value="Purple"].active { border-color: #b58af5; background: #452b67; }
.market-sort-field { display: grid; gap: 6px; padding: 11px; border: 1px solid #2c4860; background: #091a29; }
.market-sort-field > span { margin: 0; color: #cce3ee; font: 850 .61rem/1 monospace; letter-spacing: .08em; text-transform: uppercase; }
.market-sort-field select { min-height: 42px; border-radius: 4px; background-color: #07131f; font-size: .67rem; }
.market-sort-field > small { color: #6e879a; font-size: .55rem; }
.market-filter-footer { display: grid; grid-template-columns: minmax(110px, .38fr) minmax(170px, 1fr); gap: 7px; padding: 10px 12px 12px; border-top: 1px solid #315068; background: #081825; }
.market-filter-footer button { min-height: 42px; border-radius: 3px; }
.market-filter-footer .primary { background: #14627f; box-shadow: none; }

@media (max-width: 840px) {
  .search-and-set { grid-template-columns: minmax(0, 1fr) auto; }
  .search-and-set > .search-field { grid-column: auto; }
  .market-filter-scroll { grid-template-columns: 1fr; }
  .market-filter-sets, .market-sort-field { grid-column: auto; }
}

@media (max-width: 520px) {
  .search-and-set { grid-template-columns: minmax(0, 1fr) 49px; }
  .search-and-set > .filter-toggle { width: 49px; min-width: 49px; padding: 0; font-size: 0; }
  .search-and-set > .filter-toggle::before { content: "☷"; font-size: 1rem; }
  .search-and-set > .filter-toggle #filter-count { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #06101a; font-size: .56rem; }
  .controls-side { grid-template-columns: minmax(0, 1fr) 40px; }
  body > .market-filter-popover { width: calc(100vw - 16px); max-height: calc(100dvh - var(--market-filter-top, 72px) - 8px); }
  .market-filter-header { padding: 12px; }
  .market-filter-header small { line-height: 1.35; }
  .market-filter-scroll { gap: 7px; padding: 8px; }
  .market-filter-group { padding: 9px; }
  .market-filter-options { max-height: 104px; }
  .market-filter-options.compact { max-height: 74px; }
  .market-filter-options button { min-height: 34px; padding: 7px 9px; }
  .market-filter-footer { padding: 8px; }
}