:root { color-scheme: dark; --bg:#0c0f16; --card:#1b2230; --text:#f7f9ff; --muted:#c5d1e0; --cyan:#36d5ff; --gold:#ffd25a; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; min-width:320px; min-height:100dvh; color:var(--text); background:radial-gradient(circle at 80% 0%,rgba(31,126,255,.12),transparent 32rem),var(--bg); }
button,select,a { font:inherit; }
button:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.shop-screen { width:min(1320px,100%); min-height:100dvh; margin:0 auto; padding:max(20px,env(safe-area-inset-top)) 12px max(32px,env(safe-area-inset-bottom)); }
.back-link { min-height:48px; padding-left:4px; display:inline-flex; align-items:center; color:var(--cyan); font-weight:850; text-decoration:none; }
.shop-heading { margin:8px 4px 14px; }
.eyebrow,.shop-updated { display:none; }
h1 { margin:0; font-size:2rem; line-height:1; letter-spacing:-.035em; }
.shop-tools { display:flex; align-items:center; gap:6px; }
.category-scroll { min-width:0; padding:0 4px 4px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.category-scroll::-webkit-scrollbar { display:none; }
.category-button { flex:0 0 auto; min-height:40px; padding:0 16px; border:0; border-radius:20px; color:var(--text); background:var(--card); font-weight:750; cursor:pointer; }
.category-button[aria-pressed="true"] { color:#061019; background:var(--cyan); }
.filter-control { flex:0 0 44px; width:44px; height:44px; position:relative; overflow:hidden; border-radius:14px; background:var(--card); }
.filter-control::after { content:"≡"; position:absolute; inset:0; display:grid; place-items:center; font-size:1.45rem; pointer-events:none; }
.filter-control select { width:100%; height:100%; opacity:0; cursor:pointer; }
.shop-notice { margin:10px 4px 0; padding:12px; border-radius:12px; color:var(--muted); background:var(--card); font-size:.82rem; }
.shop-grid { margin-top:10px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.shop-card { min-width:0; margin:6px; overflow:hidden; border:1px solid rgba(255,255,255,.06); border-radius:14px; color:var(--text); background:var(--card); box-shadow:0 5px 16px rgba(0,0,0,.2); cursor:pointer; }
.shop-image { width:100%; height:170px; display:block; object-fit:cover; background:#151a24; }
.shop-name { min-height:54px; margin:0; padding:10px 12px 4px; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:1rem; line-height:1.2; }
.shop-price-row { min-height:40px; padding:3px 12px 12px; display:flex; align-items:center; gap:8px; }
.shop-price { color:var(--gold); font-size:.94rem; font-weight:850; }
.shop-regular { color:var(--muted); font-size:.76rem; text-decoration:line-through; }
.empty-message,.status-message { color:var(--muted); text-align:center; }
.empty-message { padding:20vh 16px; }
.status-message { min-height:20px; margin:18px 0 0; }
.skeleton { min-height:270px; background:linear-gradient(105deg,#171e2a 25%,#252f3e 42%,#171e2a 62%); background-size:220% 100%; animation:shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position-x:-220%; } }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

.item-dialog { width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:max(20px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); border:0; color:var(--text); background:var(--bg); }
.item-dialog::backdrop { background:rgba(0,0,0,.76); }
.dialog-bar { height:48px; display:flex; align-items:center; justify-content:space-between; }
.dialog-back,.favorite-button { border:0; color:var(--cyan); background:transparent; font-weight:850; cursor:pointer; }
.favorite-button { width:48px; height:48px; border-radius:15px; color:var(--gold); background:var(--card); font-size:2rem; }
.detail-image { width:100%; height:330px; margin-top:8px; display:block; object-fit:contain; background:#151a24; }
.detail-content h2 { margin:18px 0 0; font-size:1.75rem; line-height:1.08; }
.detail-description { margin:8px 0 0; color:var(--muted); line-height:1.5; }
.detail-list { margin:18px 0 0; padding:16px; border-radius:16px; background:var(--card); }
.detail-list dt { margin-top:14px; color:var(--cyan); font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.detail-list dt:first-child { margin-top:0; }
.detail-list dd { margin:4px 0 0; color:var(--text); }
.favorite-note { margin:14px 0 0; padding:14px; border-radius:14px; color:var(--muted); background:var(--card); font-size:.88rem; line-height:1.45; }

@media (min-width:700px) {
  .shop-screen { padding:32px 28px 48px; }
  .shop-heading { margin:22px 4px 24px; display:flex; align-items:end; justify-content:space-between; gap:30px; }
  .eyebrow { margin:0 0 8px; display:block; color:var(--cyan); font-size:.74rem; font-weight:900; letter-spacing:.16em; }
  h1 { font-size:4rem; }
  .shop-updated { margin:0 0 4px; display:block; color:var(--muted); font-size:.85rem; }
  .shop-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .shop-card { margin:0; }
  .shop-image { height:210px; }
}
@media (min-width:1080px) {
  .shop-screen { padding:38px 48px 64px; }
  .shop-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin-top:20px; }
  .shop-card { transition:transform 170ms ease,border-color 170ms ease; }
  .shop-card:hover { transform:translateY(-5px); border-color:rgba(54,213,255,.28); }
  .shop-image { height:220px; }
  .item-dialog { width:min(1040px,calc(100% - 64px)); height:auto; max-height:calc(100% - 64px); margin:auto; padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:26px; overflow:auto; }
  .detail-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:28px; align-items:start; }
  .detail-image { height:560px; margin:0; border-radius:20px; }
  .detail-content h2 { margin-top:0; font-size:2.5rem; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }