:root{
  --ink:#4d3a14;
  --muted:#8b7544;
  --cream:#fffdf4;
  --paper:#fffaf0;
  --sun:#f2c94c;
  --sun-deep:#dba91d;
  --sun-soft:#fff0ad;
  --line:#ead9a6;
  --brown:#755315;
  --shadow:0 18px 50px rgba(111,82,19,.12);
  --radius:28px;
  --rarity-n:#8a7a5d;
  --rarity-r:#4e8e6b;
  --rarity-sr:#4984bd;
  --rarity-ssr:#9b63c5;
  --rarity-ur:#d38318;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 10%,rgba(255,231,132,.45),transparent 34%),
    radial-gradient(circle at 90% 20%,rgba(255,243,184,.55),transparent 30%),
    linear-gradient(180deg,#fffdf5 0%,#fff8df 52%,#fffdf6 100%);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
button,input,select{font:inherit}
button{color:inherit;touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(219,169,29,.28);outline-offset:2px}
img{max-width:100%;display:block}
.sun-glow{position:fixed;border-radius:50%;filter:blur(4px);pointer-events:none;z-index:-1}
.sun-glow-a{width:260px;height:260px;right:-90px;top:170px;background:rgba(242,201,76,.16)}
.sun-glow-b{width:190px;height:190px;left:-70px;bottom:120px;background:rgba(255,220,104,.17)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,244,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(224,197,117,.45)}
.header-inner{max-width:1260px;margin:auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand-mark{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#f9d969,#e9b92f);box-shadow:0 8px 22px rgba(199,144,12,.22);font-weight:900;font-size:20px}
.brand-copy{display:flex;flex-direction:column;line-height:1.1}
.brand-copy strong{font-size:17px;letter-spacing:.04em}
.brand-copy small{font-size:11px;color:var(--muted);margin-top:5px}
.header-actions{display:flex;gap:8px;align-items:center}
.soft-button,.primary-button,.ghost-button,.icon-button{border:0;cursor:pointer;font-weight:800;transition:.18s ease}
.soft-button{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:14px;background:#fff9e4;border:1px solid var(--line);box-shadow:0 5px 15px rgba(111,82,19,.06)}
.soft-button:hover{transform:translateY(-1px);background:#fff3c7}
.soft-button.accent{background:var(--sun);border-color:var(--sun-deep)}
.icon-button{width:40px;height:40px;border-radius:14px;background:#fff9e4;border:1px solid var(--line);letter-spacing:2px}
.page{max-width:1260px;margin:auto;padding:28px 24px 48px}
.hero{min-height:330px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:36px;align-items:center;padding:46px 52px;border:1px solid rgba(221,183,65,.46);border-radius:38px;background:
  linear-gradient(120deg,rgba(255,255,255,.92),rgba(255,247,204,.9)),
  repeating-linear-gradient(90deg,transparent 0 30px,rgba(191,145,21,.03) 30px 31px);
box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:370px;height:370px;border:1px solid rgba(204,153,22,.14);border-radius:50%;right:-90px;bottom:-170px;box-shadow:0 0 0 35px rgba(255,255,255,.18),0 0 0 70px rgba(237,195,66,.08);pointer-events:none;z-index:0}
.hero-copy,.hero-orbit{position:relative;z-index:1}
.eyebrow,.section-kicker{margin:0 0 8px;font-size:11px;letter-spacing:.18em;font-weight:900;color:#a87913}
.hero h1{font-size:clamp(32px,4.2vw,56px);line-height:1.12;margin:0;letter-spacing:-.035em;max-width:800px}
.hero-subtitle{margin:18px 0 0;color:var(--muted);font-size:16px;line-height:1.8}
.hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.primary-button{padding:12px 18px;border-radius:14px;background:linear-gradient(135deg,#f5d35e,#e7b92d);color:#4b3508;box-shadow:0 9px 20px rgba(196,142,13,.2)}
.primary-button:hover{transform:translateY(-1px);filter:saturate(1.08)}
.primary-button:disabled{cursor:not-allowed;opacity:.45;transform:none;box-shadow:none}
.ghost-button{padding:11px 17px;border-radius:14px;background:#fffdf6;border:1px solid var(--line)}
.ghost-button:hover{background:#fff4c6}
.hero-orbit{min-height:260px;position:relative;z-index:1}
.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:145px;height:145px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#fffdf5;border:8px solid #f6d65f;box-shadow:0 20px 35px rgba(126,91,15,.18),inset 0 0 0 2px #fff}
.orbit-center span{font-size:62px;font-weight:900;line-height:.85;color:#b77d08}
.orbit-center small{font-weight:900;letter-spacing:.18em;color:#8d6b22;margin-top:12px}
.orbit-card{position:absolute;width:96px;height:128px;border-radius:18px;border:1px solid #e4c469;background:#fffdf6;box-shadow:0 16px 30px rgba(102,75,16,.13);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;overflow:hidden}
.orbit-card:before{content:"";position:absolute;inset:8px;border-radius:13px;background:linear-gradient(155deg,#fff5c2,#efc442);z-index:-1}
.orbit-card b{font-size:23px}.orbit-card span{font-size:12px;color:var(--muted);margin-top:4px}.orbit-one{left:10%;top:18%;transform:rotate(-11deg)}.orbit-two{right:7%;bottom:8%;transform:rotate(9deg)}
.spark{position:absolute;color:#c08b14;font-size:28px}.spark-a{right:21%;top:11%}.spark-b{left:26%;bottom:10%;font-size:20px}
.overview{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.metric-card{min-height:112px;border-radius:24px;padding:20px;background:rgba(255,255,255,.8);border:1px solid rgba(226,199,116,.55);display:flex;align-items:center;gap:14px;box-shadow:0 9px 24px rgba(112,82,19,.07)}
.metric-icon{width:42px;height:42px;border-radius:14px;background:#fff1b6;display:grid;place-items:center;font-weight:900;color:#9b6d07}
.metric-card div{display:flex;flex-direction:column;min-width:0}.metric-card small{color:var(--muted);font-size:12px}.metric-card strong{font-size:25px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric-emphasis{background:linear-gradient(135deg,#f4d05b,#f8e6a3);border-color:#e0b63a}
.metric-emphasis .metric-icon{background:#fff8dd}
.milestone-strip{padding:22px 24px;border-radius:26px;background:#5b4519;color:#fff8dc;box-shadow:0 14px 30px rgba(67,49,13,.18);margin-bottom:18px}
.milestone-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:18px}.milestone-heading h2{margin:0;font-size:22px}.milestone-heading .section-kicker{color:#efd370}.milestone-heading>span{font-size:12px;color:#eadba9}
.milestone-track{height:10px;background:rgba(255,255,255,.13);border-radius:999px;overflow:hidden;margin:18px 0 8px}.milestone-track div{height:100%;width:0;background:linear-gradient(90deg,#f1c84b,#fff2a7);border-radius:inherit;transition:width .3s ease}
.milestone-foot{display:flex;justify-content:space-between;font-size:12px;color:#eadba9}.milestone-foot b{color:#fff}
.workspace{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:start}
.category-panel,.collection-panel{border:1px solid rgba(223,192,97,.55);background:rgba(255,255,255,.78);box-shadow:0 12px 32px rgba(104,77,17,.08)}
.category-panel{position:sticky;top:82px;border-radius:26px;padding:18px}
.panel-title{display:flex;justify-content:space-between;align-items:center;font-weight:900;margin-bottom:12px}.panel-title button{border:0;background:transparent;color:#a47b1d;cursor:pointer;font-size:11px;font-weight:800}
.category-nav{display:grid;gap:6px}
.category-button{width:100%;border:0;border-radius:13px;background:transparent;padding:10px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font-weight:800;text-align:left}
.category-button span:last-child{font-size:11px;color:var(--muted);background:#fff5c8;padding:3px 7px;border-radius:999px}
.category-button:hover{background:#fff8df}.category-button.active{background:#f3d366;color:#4c3606;box-shadow:inset 0 0 0 1px #dbad28}.category-button.active span:last-child{background:#fff8dc;color:#6d5012}
.category-divider{height:1px;background:var(--line);margin:8px 0}
.rule-note{margin-top:16px;border-radius:16px;padding:13px;background:#fff5c9;border:1px dashed #d5ac3b}.rule-note b{font-size:12px}.rule-note p{font-size:11px;line-height:1.65;color:#79632f;margin:6px 0 0}
.collection-panel{border-radius:30px;padding:20px;min-height:500px}
.collection-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:12px;align-items:center;padding-bottom:18px;border-bottom:1px solid rgba(227,204,135,.7)}
.search-field,.mini-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fffdf7;border-radius:14px;padding:0 12px}.search-field input,.mini-search input{border:0;background:transparent;width:100%;padding:11px 0;outline:none;color:var(--ink)}
.rarity-filter{display:flex;gap:5px;flex-wrap:wrap}.rarity-chip{border:1px solid var(--line);background:#fffdf7;border-radius:999px;padding:8px 10px;font-size:11px;font-weight:900;cursor:pointer}.rarity-chip.active{background:#5b4519;color:#fff8dc;border-color:#5b4519}
.owned-filter{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;white-space:nowrap}.owned-filter input{accent-color:#d5a719}
.collection-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:22px 2px 14px}.collection-heading h2{margin:0;font-size:26px}.collection-heading>span{font-size:12px;color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.record-card{background:#fffdf8;border:1px solid #eadcb4;border-radius:20px;padding:10px;box-shadow:0 7px 18px rgba(99,73,15,.05);min-width:0;transition:.18s ease;position:relative}
.record-card:hover{transform:translateY(-3px);box-shadow:0 13px 25px rgba(99,73,15,.1);border-color:#dfc261}
.record-card.owned{box-shadow:0 0 0 2px rgba(237,195,65,.18),0 10px 20px rgba(99,73,15,.08)}
.record-image-wrap{height:210px;border-radius:14px;background:#f8f1dc;display:grid;place-items:center;overflow:hidden;position:relative}.record-image{width:100%;height:100%;object-fit:contain}.record-image-wrap:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.72);border-radius:inherit;pointer-events:none}
.record-meta{padding:10px 2px 8px}.record-code-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.record-code{font-weight:900;font-size:16px}.rarity-badge{font-size:10px;font-weight:900;padding:4px 7px;border-radius:999px;color:#fff;min-width:35px;text-align:center}.rarity-N{background:var(--rarity-n)}.rarity-R{background:var(--rarity-r)}.rarity-SR{background:var(--rarity-sr)}.rarity-SSR{background:var(--rarity-ssr)}.rarity-UR{background:linear-gradient(135deg,#c8780f,#f2c14d)}
.record-category{font-size:11px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.counter{display:grid;grid-template-columns:34px 1fr 34px;gap:6px;align-items:center}.counter button{border:0;width:34px;height:34px;border-radius:11px;cursor:pointer;font-size:18px;font-weight:900}.counter .minus{background:#f2ead4;color:#745f2d}.counter .plus{background:#efd064;color:#543c08}.counter input{width:100%;height:34px;border:1px solid var(--line);background:#fffdf6;border-radius:11px;text-align:center;font-weight:900;color:var(--ink)}
.special-card .record-image-wrap{background:#fff3b9}.special-card .record-code{font-size:14px}.special-card .record-category{white-space:normal;min-height:28px}
.reward-card{background:linear-gradient(145deg,#fffdf7,#fff2b7);border-style:dashed}.reward-card.locked{opacity:.72}.reward-visual{height:160px;border-radius:14px;background:radial-gradient(circle at 50% 28%,#fff 0 18%,transparent 19%),linear-gradient(135deg,#f4d566,#fff0a8);display:grid;place-content:center;text-align:center}.reward-visual span{font-size:38px}.reward-visual small{font-weight:900;margin-top:8px;color:#6d5011}.reward-count{display:flex;justify-content:space-between;align-items:center;background:#fff9df;border-radius:11px;padding:9px 10px;font-size:12px}.reward-count b{font-size:15px}.lock-label{font-size:10px;color:#8c7440;margin-top:7px}
.empty-state{text-align:center;padding:70px 20px;color:var(--muted)}.empty-state span{font-size:44px}.empty-state h3{color:var(--ink);margin-bottom:4px}.empty-state p{margin:0;font-size:13px}
.site-footer{max-width:1260px;margin:0 auto;padding:0 24px 36px;display:flex;justify-content:space-between;color:#9a875a;font-size:12px}
.app-dialog{border:0;padding:0;background:transparent;width:min(1180px,calc(100vw - 24px));max-height:92vh;color:var(--ink)}.app-dialog::backdrop{background:rgba(57,43,14,.48);backdrop-filter:blur(5px)}
body.dialog-open{overflow:hidden}.app-dialog.dialog-fallback-open{display:block;position:fixed;inset:0;width:100%;max-width:none;max-height:none;margin:0;padding:12px;overflow:auto;background:rgba(57,43,14,.48);z-index:1000}.app-dialog.dialog-fallback-open .dialog-shell{margin:auto}
.dialog-shell{background:#fffdf5;border:1px solid #e4c76f;border-radius:28px;padding:22px;box-shadow:0 30px 80px rgba(44,32,8,.3);max-height:92vh;overflow:auto}.compact-shell{width:min(620px,100%);margin:auto}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:14px;border-bottom:1px solid #ebdcae}.dialog-header h2{margin:0;font-size:27px}.dialog-close{border:1px solid var(--line);background:#fff8dd;width:38px;height:38px;border-radius:13px;cursor:pointer;font-size:24px;line-height:1}
.gallery-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:16px 0}.segmented{display:flex;gap:6px;flex-wrap:wrap;background:#f7efd7;border-radius:14px;padding:5px}.segmented button{border:0;background:transparent;border-radius:10px;padding:9px 12px;font-weight:800;cursor:pointer;font-size:12px}.segmented button.active{background:#fffdf8;box-shadow:0 3px 12px rgba(87,63,10,.11)}
.dialog-summary{font-size:12px;color:var(--muted);margin-bottom:12px}.gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.gallery-card{border:1px solid #eadcb4;border-radius:16px;padding:7px;background:#fff;position:relative;overflow:hidden}.gallery-card img{width:100%;height:190px;object-fit:contain;background:#f8f2df;border-radius:11px}.gallery-card.missing img{filter:grayscale(.88);opacity:.42}.missing-overlay{position:absolute;inset:7px 7px 36px;display:grid;place-items:center;background:rgba(88,66,20,.18);border-radius:11px;font-size:12px;font-weight:900;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.3)}.gallery-label{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:7px 2px 0;font-size:11px}.gallery-label b{font-size:12px}.gallery-label span{color:var(--muted)}
.exchange-rule-banner{display:flex;gap:14px;align-items:center;background:#fff1b7;border:1px solid #e8c552;border-radius:18px;padding:13px 16px;margin:16px 0}.exchange-rule-banner>span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#5b4519;color:#fff8dc;font-size:25px;font-weight:900}.exchange-rule-banner p{margin:0;font-size:12px;line-height:1.6;color:#765b1d}.exchange-rule-banner b{color:#4e390c}
.exchange-layout{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:12px}.exchange-column{border:1px solid #eadcb4;border-radius:20px;padding:14px;background:#fffaf0;min-width:0}.exchange-step{display:flex;gap:10px;align-items:center;margin-bottom:10px}.exchange-step>span{width:30px;height:30px;border-radius:10px;background:#efd05f;display:grid;place-items:center;font-weight:900}.exchange-step div{display:flex;flex-direction:column}.exchange-step b{font-size:13px}.exchange-step small{font-size:10px;color:var(--muted);margin-top:2px}.exchange-arrow{display:grid;place-items:center;font-size:28px;color:#a47a17}
.target-tools{display:grid;grid-template-columns:1fr 104px;gap:8px}.target-tools select{border:1px solid var(--line);background:#fffdf7;border-radius:13px;padding:0 9px;color:var(--ink)}
.exchange-choice-grid{height:390px;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:start;margin-top:10px;padding-right:2px}.exchange-choice{border:1px solid #eadcb4;background:#fff;border-radius:14px;padding:6px;cursor:pointer;text-align:left;min-width:0;position:relative}.exchange-choice:hover{border-color:#d5ab31}.exchange-choice.selected{border-color:#bf8e0c;box-shadow:0 0 0 2px rgba(224,178,44,.25);background:#fff8dc}.exchange-choice:disabled{cursor:not-allowed;opacity:.4}.exchange-choice img{width:100%;height:115px;object-fit:contain;background:#f7f0dc;border-radius:9px}.exchange-choice b{display:block;font-size:12px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.exchange-choice small{display:block;color:var(--muted);font-size:9px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.exchange-available{position:absolute;right:9px;top:9px;background:#5b4519;color:#fff8dc;border-radius:999px;padding:3px 6px;font-size:9px;font-weight:900}
.exchange-confirm{margin-top:14px;border-radius:18px;background:#5b4519;color:#fff8dd;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.exchange-preview{font-size:12px;line-height:1.6}.exchange-preview b{color:#ffe58b}.exchange-preview .flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.exchange-preview .chip{padding:7px 10px;background:rgba(255,255,255,.11);border-radius:10px}.exchange-history{margin-top:14px;border:1px solid #e8d8aa;border-radius:16px;padding:11px 13px;background:#fffaf0}.exchange-history summary{cursor:pointer;font-weight:900;font-size:12px;display:flex;justify-content:space-between}.history-item{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 0;border-bottom:1px dashed #e8d8aa;font-size:11px}.history-item small{color:var(--muted)}.danger-text{color:#9b3e2f;margin-top:10px}
.data-intro{color:var(--muted);font-size:13px;line-height:1.7}.data-actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.data-action{border:1px solid var(--line);background:#fff9e5;border-radius:16px;padding:18px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center}.data-action:hover{background:#fff1b8}.data-action>span{font-size:26px}.data-action b{margin-top:7px}.data-action small{color:var(--muted);margin-top:4px}.data-status{min-height:22px;font-size:12px;color:var(--muted);margin-top:12px}
.confirm-shell{width:min(430px,100%);margin:auto;text-align:center;padding:30px}.confirm-symbol{width:54px;height:54px;border-radius:18px;background:#f2cf5a;display:grid;place-items:center;margin:0 auto 12px;font-size:28px;font-weight:900}.confirm-shell h2{margin:0}.confirm-shell p{color:var(--muted);line-height:1.7;font-size:13px}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#49360d;color:#fff8dc;padding:11px 16px;border-radius:13px;font-size:12px;font-weight:800;box-shadow:0 12px 34px rgba(0,0,0,.23);opacity:0;pointer-events:none;transition:.25s ease;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.record-image-wrap{height:225px}
  .overview{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .page{padding:18px 14px 40px}.header-inner{padding:10px 14px}.brand-copy small{display:none}.soft-button{padding:9px 11px}.soft-button span{display:none}
  .hero{grid-template-columns:1fr;padding:30px 24px;min-height:auto}.hero-orbit{display:none}.hero h1{font-size:34px}.hero-subtitle{font-size:14px}
  .workspace{grid-template-columns:1fr}.category-panel{position:static;padding:12px;overflow:hidden}.panel-title,.rule-note{display:none}.category-nav{display:flex;overflow:auto;gap:7px;padding-bottom:2px}.category-button{width:auto;flex:0 0 auto;padding:9px 11px}.category-button span:last-child{display:none}.category-divider{width:1px;height:28px;flex:0 0 1px;margin:3px 2px}
  .collection-toolbar{grid-template-columns:1fr auto}.rarity-filter{grid-column:1/-1;order:3}.owned-filter{justify-self:end}
  .exchange-layout{grid-template-columns:1fr}.exchange-arrow{transform:rotate(90deg);height:26px}.exchange-choice-grid{height:330px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-card img{height:170px}
}
@media(max-width:600px){
  .site-header .soft-button{font-size:0;width:40px;height:40px;padding:0;justify-content:center}.site-header .soft-button:before{font-size:17px}.site-header #openGalleryBtn:before{content:"▦"}.site-header #openExchangeBtn:before{content:"⇄"}
  .overview{grid-template-columns:1fr 1fr;gap:8px}.metric-card{min-height:92px;padding:13px;gap:9px}.metric-icon{width:34px;height:34px}.metric-card strong{font-size:18px}.metric-card small{font-size:10px}
  .milestone-strip{padding:18px}.milestone-heading{align-items:flex-start}.milestone-heading>span{max-width:130px;text-align:right}.milestone-heading h2{font-size:19px}
  .collection-panel{padding:13px;border-radius:22px}.collection-heading h2{font-size:22px}.collection-toolbar{grid-template-columns:1fr}.owned-filter{justify-self:start}.rarity-filter{grid-column:auto}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.record-card{padding:7px;border-radius:16px}.record-image-wrap{height:190px}.record-meta{padding:8px 2px 6px}.record-code{font-size:14px}.counter{grid-template-columns:31px 1fr 31px;gap:4px}.counter button{width:31px;height:31px}.counter input{height:31px}
  .dialog-shell{padding:14px;border-radius:22px}.dialog-header h2{font-size:23px}.gallery-toolbar{align-items:stretch;flex-direction:column}.segmented{overflow:auto;flex-wrap:nowrap}.segmented button{white-space:nowrap}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gallery-card img{height:190px}
  .exchange-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));height:320px}.exchange-choice img{height:100px}.exchange-confirm{align-items:stretch;flex-direction:column}.exchange-confirm .primary-button{width:100%}
  .data-actions-grid{grid-template-columns:1fr}.data-action{flex-direction:row;gap:12px;text-align:left;align-items:center}.data-action>span{width:36px}.data-action small{margin-left:auto}
  .site-footer{padding:0 14px 28px}
}
@media(max-width:390px){.record-image-wrap{height:165px}.gallery-card img{height:165px}.exchange-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.exchange-choice-grid>.empty-state,.gallery-grid>.empty-state{grid-column:1/-1;width:100%;padding:42px 12px}