.skip-link { position: fixed; top: .6rem; left: .6rem; z-index: 3000; transform: translateY(-180%); padding: .7rem 1rem; border-radius: 10px; background: var(--aqua); color: #06171d; font-weight: 900; }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: .65rem; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(1480px, calc(100% - 1.2rem)); margin: .65rem auto 0; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 20px; background: rgba(9,16,24,.9); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.brand-block { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.brand-block img { flex: 0 0 auto; border-radius: 14px; object-fit: cover; }
.brand-block h1 { margin: .05rem 0; font-size: clamp(1.15rem, 2.3vw, 1.7rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-block p { margin: 0; font-size: .86rem; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; }
.page-shell { width: min(1480px, calc(100% - 1.2rem)); margin: 1rem auto 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.snapshot-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .8rem; }
.metric { padding: 1rem; display: grid; gap: .35rem; min-height: 108px; }
.metric strong { font-size: clamp(1.45rem, 3vw, 2.1rem); }
.horizontal-strip { min-width: 0; max-width: 100%; display: flex; gap: .85rem; overflow-x: auto; padding: .15rem .1rem .55rem; scroll-snap-type: x proximity; }
.strip-card { flex: 0 0 310px; scroll-snap-align: start; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); }
.strip-card.leading, .strip-card.won { border-color: rgba(98,212,157,.5); box-shadow: 0 0 0 1px rgba(98,212,157,.18); }
.strip-card.outbid, .strip-card.lost { border-color: rgba(255,125,125,.5); box-shadow: 0 0 0 1px rgba(255,125,125,.16); }
.strip-card img { width: 100%; height: 170px; display: block; object-fit: contain; object-position: center; background: var(--surface-3); }
.strip-content { padding: .85rem; display: grid; gap: .6rem; }
.strip-content h3 { margin: 0; font-size: 1rem; }
.catalog-heading { align-items: end; }
.catalog-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; flex-wrap: wrap; }
.catalog-tools { display: grid; grid-template-columns: 2fr repeat(3, minmax(150px, .7fr)); gap: .75rem; align-items: end; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: .9rem; }
.item-card { overflow: hidden; border: 1px solid var(--border); border-radius: 17px; background: linear-gradient(180deg, #14202c, #0d1721); display: flex; flex-direction: column; }
.item-card.leading, .item-card.won { border-color: rgba(98,212,157,.5); box-shadow: 0 0 0 1px rgba(98,212,157,.18), var(--shadow); }
.item-card.outbid, .item-card.lost { border-color: rgba(255,125,125,.5); box-shadow: 0 0 0 1px rgba(255,125,125,.16), var(--shadow); }
.item-image { position: relative; height: 190px; overflow: hidden; background: var(--surface-3); }
.item-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: var(--surface-3); }
.item-image::after { content: ""; position: absolute; inset: 0 0 auto; height: 78px; background: linear-gradient(180deg, rgba(3,8,14,.72), rgba(3,8,14,.18), transparent); pointer-events: none; }
.item-image .badges { position: absolute; inset: .7rem .7rem auto; z-index: 2; display: flex; justify-content: space-between; align-items: start; gap: .45rem; pointer-events: none; }
.item-image .badge { color: #fff; border-color: rgba(255,255,255,.7); background: rgba(7,13,21,.82); text-shadow: 0 1px 2px rgba(0,0,0,.9); box-shadow: 0 4px 14px rgba(0,0,0,.38); }
.item-image .badge.live, .item-image .badge.leading, .item-image .badge.won { color: #eafff2; background: rgba(9,115,63,.9); border-color: rgba(172,255,207,.85); }
.item-image .badge.outbid, .item-image .badge.lost, .item-image .badge.closed { color: #fff2f2; background: rgba(176,36,48,.92); border-color: rgba(255,196,196,.9); }
.item-image .badge.premium { color: #fff7df; background: rgba(143,91,8,.92); border-color: rgba(255,225,154,.9); }
.item-body { flex: 1; display: grid; gap: .7rem; padding: .9rem; }
.item-title-line { display: flex; justify-content: space-between; gap: .65rem; align-items: start; }
.item-title-line h3 { margin: 0; font-size: 1.05rem; }
.lot { flex: 0 0 auto; color: var(--muted); font-size: .76rem; }
.item-description { color: var(--muted); font-size: .88rem; line-height: 1.45; min-height: 2.55rem; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.price-cell { padding: .7rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(0,0,0,.17); }
.price-cell strong { display: block; margin-top: .2rem; font-size: 1.08rem; }
.item-actions { display: grid; grid-template-columns: 1fr auto; gap: .55rem; margin-top: auto; }
.watch-button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.item-actions .wide { grid-column: 1 / -1; }
.auth-columns { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.2rem; }
.auth-columns form { padding: .95rem; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.025); }
.auth-columns h3 { margin: .15rem 0 0; }
.check-row { display: flex; align-items: start; gap: .65rem; color: #dde7f2; font-size: .9rem; }
.check-row input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.item-dialog { width: min(980px, calc(100vw - 2rem)); }
.item-detail-grid { display: grid; grid-template-columns: minmax(320px, .95fr) minmax(300px, 1.05fr); gap: 1rem; align-items: start; }
.item-detail-grid > img { width: 100%; max-width: 100%; max-height: 520px; object-fit: contain; object-position: center; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); }
.image-slider { display: grid; gap: .65rem; min-width: 0; max-width: 100%; overflow: hidden; }
.image-slider-main { position: relative; overflow: hidden; width: 100%; max-width: 100%; height: clamp(320px, 52vh, 560px); border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.image-slider-main img { width: 100%; max-width: 100%; height: 100%; max-height: 100%; object-fit: contain; object-position: center; display: block; }
.image-slider-control { position: absolute; top: 50%; z-index: 2; width: 42px; height: 42px; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(8,14,22,.72); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.image-slider-control.prev { left: .65rem; }
.image-slider-control.next { right: .65rem; }
.image-slider-count { position: absolute; right: .65rem; bottom: .65rem; padding: .25rem .55rem; border-radius: 999px; background: rgba(8,14,22,.78); color: #fff; font-size: .82rem; font-weight: 800; }
.image-slider-thumbs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .15rem; }
.image-thumb { flex: 0 0 72px; width: 72px; height: 58px; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.image-thumb.active { border-color: var(--gold); }
.image-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.bid-panel { padding: .9rem; border: 1px solid var(--border); border-radius: 15px; background: rgba(228,173,71,.07); }
.bid-history { max-height: 260px; overflow: auto; }
.account-tabs { display: flex; gap: .45rem; flex-wrap: wrap; }
.account-section { display: grid; gap: .75rem; }
.payment-option { padding: .9rem; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); }
.tutorial-dialog { width: min(860px, calc(100vw - 2rem)); }
.tutorial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .85rem; }
.tutorial-step { display: grid; gap: .45rem; padding: 1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); }
.tutorial-step span { width: 2rem; height: 2rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--gold); color: #1b1303; font-weight: 900; }
.tutorial-step strong { font-size: 1.05rem; }
.tutorial-step p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.empty-state { padding: 2rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 14px; }
:root[data-theme="light"] .site-header { background: rgba(255,255,255,.92); }
:root[data-theme="light"] .strip-card,
:root[data-theme="light"] .item-card { background: linear-gradient(180deg, #ffffff, #f6f9fc); }
:root[data-theme="light"] .strip-card img,
:root[data-theme="light"] .item-image,
:root[data-theme="light"] .image-slider-main,
:root[data-theme="light"] .item-detail-grid > img,
:root[data-theme="light"] .image-thumb { background: #edf3f8; }
:root[data-theme="light"] .item-description,
:root[data-theme="light"] .check-row { color: var(--text); }
:root[data-theme="light"] .price-cell { background: rgba(20,32,51,.035); }
:root[data-theme="light"] .auth-columns form,
:root[data-theme="light"] .bid-panel { background: rgba(217,155,40,.08); }
:root[data-theme="light"] .payment-option { background: #f8fbfe; }
:root[data-theme="light"] .tutorial-step { background: #f8fbfe; }
@media (max-width: 1050px) { .snapshot-grid { grid-template-columns: repeat(3, 1fr); } .catalog-tools { grid-template-columns: repeat(2,1fr); } .search-field { grid-column: 1 / -1; } }
@media (max-width: 760px) { .site-header { position: relative; top: 0; align-items: flex-start; } .header-actions { justify-content: flex-start; } .snapshot-grid { grid-template-columns: repeat(2,1fr); } .auth-columns, .item-detail-grid { grid-template-columns: minmax(0, 1fr); } .image-slider-main { height: clamp(280px, 48vh, 500px); } .strip-card { flex-basis: 270px; } }
@media (max-width: 560px) { .site-header { flex-direction: column; } .brand-block h1 { white-space: normal; } .snapshot-grid, .catalog-tools, .price-grid { grid-template-columns: 1fr; } .search-field { grid-column: auto; } .item-actions { grid-template-columns: 1fr; } .item-actions .wide { grid-column: auto; } }