:root {
  --paper: #f2f4f7; --surface: #ffffff; --ink: #0e1726; --muted: #566275; --line: #d3d9e2;
  --brand: #1f4fd8; --brand-hover: #1740b0; --on-brand: #ffffff;
  --gold: #f4c430; --on-gold: #1a1400; --danger: #b42318; --ok: #17784a;
  --focus: #1f4fd8;
  --font-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  /* Arte dos quadros: azul e neon próprios de cada jogo, iguais no tema claro e no escuro (o quadro é sempre escuro). */
  --neon-pokemon: #3fd8ff; --neon-magic: #8f8cff; --neon-yugioh: #4d9bff; --neon-onepiece: #2ef2d0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b111a; --surface: #141d2a; --ink: #e8edf5; --muted: #9aa7ba; --line: #263244;
    --brand: #7d9dff; --brand-hover: #a3b9ff; --on-brand: #0b111a; --danger: #ff8a7d; --ok: #5fd397; --focus: #a3b9ff;
  }
}
* { box-sizing: border-box; }
*[hidden] { display: none !important; }
html { font-size: 17px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.55; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 .8rem; }
a { color: var(--brand); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 0; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

/* Cabeçalho */
.demo-bar { background: var(--ink); color: var(--paper); font-size: .85rem; padding: .35rem 0; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 3.6rem; flex-wrap: wrap; }
.logo { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--ink); text-decoration: none; margin-right: auto; display: inline-flex; align-items: center; gap: .5rem; }
.logo-mark { width: 1.1rem; height: 1.5rem; border: 2px solid var(--ink); border-radius: 3px; background: var(--gold); display: inline-block; transform: rotate(-8deg); }
.nav { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--brand); }
.nav a.btn { color: var(--on-brand); padding: .5rem 1rem; min-height: 0; border: 2px solid var(--brand); }
.nav a.btn:hover { border-color: var(--brand-hover); }

/* Menu do cliente no cabeçalho (fica fora do .nav para o painel branco não herdar a cor clara dos links) */
.user-menu { position: relative; }
.user-menu-button { font: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .4rem .9rem; border: 2px solid currentColor; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; }
.user-menu-button:hover, .user-menu.is-current .user-menu-button { border-color: var(--brand); }
.user-menu-button[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }
.user-menu-panel { position: absolute; z-index: 20; top: calc(100% + .4rem); right: 0; width: min(18rem, calc(100vw - 2rem)); padding: .5rem; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 0 .8rem 1.6rem #07102055; }
.user-menu-who { display: flex; flex-direction: column; margin: 0; padding: .4rem .6rem .6rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.user-menu-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.user-menu-list a, .user-menu-logout { font: inherit; display: block; width: 100%; min-height: 2.75rem; padding: .6rem; border: 0; border-radius: 4px; background: transparent; color: var(--ink); text-align: left; text-decoration: none; font-weight: 500; cursor: pointer; }
.user-menu-list a:hover, .user-menu-logout:hover { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.user-menu-logout { border-top: 1px solid var(--line); border-radius: 0 0 4px 4px; margin-top: .3rem; }

/* Ícone do usuário: círculo com um dos ícones do catálogo ou a inicial do nome (as cores vêm de --avatar-bg e --avatar-fg) */
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--avatar-bg, var(--gold)); color: var(--avatar-fg, var(--on-gold)); font-family: var(--font-head); font-weight: 700; line-height: 1; overflow: hidden; }
.avatar svg { width: 62%; height: 62%; display: block; }
.avatar-sm { width: 1.9rem; height: 1.9rem; font-size: .95rem; }
.avatar-md { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
.avatar-lg { width: 4rem; height: 4rem; font-size: 1.8rem; }
.user-menu-button .avatar { box-shadow: 0 0 0 2px #f6f1e4cc; }
.user-menu-head { display: flex; align-items: center; gap: .7rem; padding: .3rem .4rem .4rem; border-bottom: 1px solid var(--line); }
.user-menu-head .user-menu-who { padding: 0; border-bottom: 0; min-width: 0; }
.user-menu-level { margin-top: .15rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Botões e formulários */
.btn { font: inherit; font-weight: 600; cursor: pointer; border: 2px solid var(--ink); background: var(--brand); color: var(--on-brand); border-color: var(--brand); padding: .65rem 1.1rem; border-radius: 6px; text-decoration: none; display: inline-block; min-height: 2.75rem; }
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-quiet:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
label { display: block; font-weight: 600; margin-bottom: .25rem; }
.hint { color: var(--muted); font-size: .88rem; font-weight: 400; }
input, select, textarea { font: inherit; width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); min-height: 2.75rem; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
textarea { min-height: 6rem; resize: vertical; }
.field { margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.check input { width: 1.3rem; min-height: 1.3rem; margin-top: .2rem; }
.msg { padding: .7rem .9rem; border-radius: 6px; border: 2px solid var(--line); background: var(--surface); margin: .8rem 0; }
.msg.error { border-color: var(--danger); color: var(--danger); }
.msg.ok { border-color: var(--ok); color: var(--ok); }
.msg:empty { display: none; }

/* Página inicial */
.hero { padding: 2.2rem 0 1.2rem; max-width: 46rem; }
.hero p { color: var(--muted); font-size: 1.1rem; }
.home-page { padding-top: 1.5rem; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(16rem, .9fr); align-items: center; gap: 2rem; min-height: 22rem; padding: clamp(1.5rem, 5vw, 3.5rem); border-radius: 8px; overflow: hidden; color: #fff; background: linear-gradient(120deg, #101b2d, #1f4fd8); }
.home-hero-copy { max-width: 38rem; }
.home-eyebrow { margin: 0 0 .7rem; color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.home-hero h1 { max-width: 18ch; margin-bottom: .8rem; font-size: clamp(2.25rem, 5.4vw, 4.1rem); }
.home-hero-copy > p:not(.home-eyebrow) { max-width: 34rem; margin-bottom: 1.4rem; color: #e0e8fa; font-size: 1.08rem; }
.home-cta { border-color: var(--gold); background: var(--gold); color: var(--on-gold); }
.home-cta:hover { border-color: #ffda54; background: #ffda54; }
.home-hero-art { position: relative; display: grid; place-items: center; min-height: 15rem; }
.home-lead { width: min(100%, 16rem); }
.home-lead-card { width: 100%; }
.home-lead-label { margin: 0 0 .45rem; color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.home-lead-card .tile { border-color: var(--gold); box-shadow: 0 1rem 2rem #07102066; }
.home-lead-empty { margin: 0; color: #e0e8fa; text-align: center; }
.home-featured { padding: 2.4rem 0 1rem; }
.home-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 1rem; }
.home-section-heading h2 { margin-bottom: .45rem; }
.home-section-heading .hint { max-width: 42rem; margin: 0; }
.home-all-link { flex: 0 0 auto; font-weight: 600; text-decoration: none; }
.home-all-link:hover { text-decoration: underline; }
.featured-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); padding: .7rem 0 1.5rem; }
.home-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .5rem 0 3rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.home-bottom h2 { margin-bottom: .4rem; }
.home-bottom p { margin: 0; color: var(--muted); }
.store-hero { max-width: 54rem; padding: 3rem 0 2.2rem; }
.store-hero h1 { margin-bottom: .8rem; }
.store-hero > p:not(.store-eyebrow) { max-width: 46rem; color: var(--muted); font-size: 1.1rem; }
.store-eyebrow, .store-category-label { color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.store-status { display: inline-block; margin-top: .4rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .9rem; font-weight: 600; }
.store-plans { padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--line); }
.store-plans > .hint { max-width: 48rem; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: 1.25rem; }
.store-category { min-height: 11rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.store-category h3 { margin: .5rem 0; }
.store-category p { margin: 0; color: var(--muted); }
.store-next { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 3rem; padding: 1.25rem; border-radius: 6px; background: var(--surface); }
.store-next h2 { margin-bottom: .35rem; }
.store-next p { margin: 0; }
.catalog-layout { display: grid; grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.filter-sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.filter-sidebar h2 { margin-bottom: 1rem; }
.filter-sidebar .field { margin-bottom: .85rem; }
.filter-sidebar .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.filter-sidebar input, .filter-sidebar select { min-width: 0; padding: .5rem; font-size: .9rem; }
.filter-range { min-width: 0; margin: 0 0 .85rem; padding: 0; border: 0; }
.filter-range legend { font-weight: 600; margin-bottom: .3rem; }
.filter-unavailable { padding: .7rem; background: var(--paper); border-radius: 4px; color: var(--muted); font-size: .85rem; }
.filter-reset { width: 100%; }
.catalog-results { min-width: 0; }
.catalog-results .toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin: 0 0 .5rem; }
.catalog-results .field { flex: 0 1 12rem; margin: 0; }
.search { flex: 1 1 14rem; min-width: 12rem; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; padding-bottom: 2rem; }
.pagination[hidden] { display: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; padding-bottom: 3rem; }
.empty { padding: 2rem 0; color: var(--muted); }
/* Subabas de jogos do catálogo: a aba ativa usa o dourado da etiqueta de slab. O recuo negativo deixa espaço para o contorno de foco sem cortar. */
.level-card { display: flex; gap: 1rem; align-items: flex-start; margin: .5rem 0 1.2rem; padding: 1rem; background: var(--surface); border: 2px solid var(--ink); border-radius: 6px; }
.level-body { min-width: 0; flex: 1; }
.level-body h2 { margin-bottom: .5rem; }
.level-bar { height: .7rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.level-fill { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 999px; transition: width .4s ease; }
.level-counts { margin: .3rem 0 .5rem; padding-left: 1.1rem; font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .level-fill { transition: none; } }
.account-tabs { margin-bottom: 1rem; }
.wish-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: .5rem 0 0; }
.account-item { display: flex; flex-direction: column; gap: .5rem; }
.account-item-note { margin: 0; }
.settings-form { max-width: 28rem; }
.settings-form input[readonly] { background: var(--paper); color: var(--muted); }
.game-tabs { display: flex; gap: .5rem; overflow-x: auto; margin: 0 -.4rem; padding: .4rem; scrollbar-width: thin; }
.game-tab { font: inherit; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-height: 2.75rem; padding: .45rem .9rem; border: 2px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.game-tab:hover { border-color: var(--ink); }
.game-tab[aria-selected="true"] { border-color: var(--ink); background: var(--gold); color: var(--on-gold); }
.game-tab-name { font-weight: 600; }
.game-tab-count { color: var(--muted); font-family: var(--font-num, inherit); font-size: .85rem; font-variant-numeric: tabular-nums; }
.game-tab[aria-selected="true"] .game-tab-count { color: var(--on-gold); }
.game-tabs-note { margin: .1rem 0 1.25rem; }

/* Etiqueta de slab: o elemento marcante */
.tile { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.tile.has-video { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); }
.video-feature { position: absolute; z-index: 1; top: .7rem; right: .7rem; border: 2px solid var(--ink); border-radius: 4px; padding: .25rem .55rem; color: var(--on-gold); background: var(--gold); font-size: .8rem; font-weight: 700; }
.tile:hover .tile-title { text-decoration: underline; }
.slab { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; background: var(--gold); color: var(--on-gold); padding: .4rem .7rem; border-bottom: 2px solid var(--ink); }
.slab-grade { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.slab-game { font-size: .82rem; font-weight: 600; text-align: right; }
.art { --neon: var(--neon-pokemon); position: relative; aspect-ratio: 5 / 6; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: hidden; container-type: size;
  background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--neon) 26%, #071331) 0%, #071331 72%); }
.art[data-game="pokemon"] { --neon: var(--neon-pokemon); }
.art[data-game="magic"] { --neon: var(--neon-magic); }
.art[data-game="yugioh"] { --neon: var(--neon-yugioh); }
.art[data-game="onepiece"] { --neon: var(--neon-onepiece); }
/* Grade de luz ao fundo, como o menu de um jogo de duelo; é desenho original, sem personagem nem logotipo. */
.art::before { content: ""; position: absolute; inset: 0; background-image:
  linear-gradient(color-mix(in srgb, var(--neon) 16%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb, var(--neon) 16%, transparent) 1px, transparent 1px);
  background-size: 18px 18px; }
/* Moldura no formato de carta (5:7): é ela que dá o realce à carta ou ao nome. */
.art-frame { position: relative; width: min(100%, calc(100cqh * 5 / 7)); aspect-ratio: 5 / 7; display: flex; align-items: flex-end; padding: .6rem; overflow: hidden;
  background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--neon) 14%, transparent) 50%, transparent 62%), linear-gradient(160deg, #0d2557, #060d22); border: 2px solid var(--neon); border-radius: 8px;
  box-shadow: 0 0 0 1px #071331, 0 0 12px color-mix(in srgb, var(--neon) 70%, transparent), 0 0 30px color-mix(in srgb, var(--neon) 35%, transparent), inset 0 0 16px color-mix(in srgb, var(--neon) 28%, transparent); }
.art-frame::after { content: ""; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--neon) 55%, transparent); border-radius: 5px; pointer-events: none; }
/* Com foto, quatro faixas por dentro da borda levam as cores de cada ponta da carta (preenchidas por tintFrame). */
.art-edge { position: absolute; pointer-events: none; z-index: 1; }
.art-edge-top, .art-edge-bottom { left: 0; right: 0; height: 4px; }
.art-edge-left, .art-edge-right { top: 0; bottom: 0; width: 4px; }
.art-edge-top { top: 0; background: var(--edge-top); }
.art-edge-bottom { bottom: 0; background: var(--edge-bottom); }
.art-edge-left { left: 0; background: var(--edge-left); }
.art-edge-right { right: 0; background: var(--edge-right); }
.row-thumb .art-edge { display: none; }
.art-name { position: relative; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; line-height: 1.1; color: #eaf4ff; text-shadow: 0 0 8px color-mix(in srgb, var(--neon) 80%, transparent); overflow-wrap: anywhere; }
.art-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; min-height: 0; border: 0; border-radius: 0; }
.tile-body { padding: .75rem .8rem .9rem; }
.tile-title { font-weight: 600; margin: 0 0 .5rem; font-size: 1rem; }
.tile-meta { color: var(--muted); font-size: .82rem; margin: .25rem 0 .5rem; }
.price { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.tile-foot { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .9rem; margin-top: .3rem; }
.time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.time.soon { color: var(--danger); }
.flag { display: inline-block; font-size: .8rem; font-weight: 600; border: 2px solid var(--ok); color: var(--ok); border-radius: 4px; padding: 0 .35rem; margin-left: .4rem; }
.flag.lose { border-color: var(--danger); color: var(--danger); }

/* Página do anúncio */
.lot { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 2rem; padding: 1.5rem 0 3rem; align-items: start; }
.lot .tile { cursor: default; }
.lot .art { aspect-ratio: 5 / 7; }
.lot-gallery { min-width: 0; }
.card-media { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.card-media h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.card-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.card-photo, .card-video { min-width: 0; margin: 0; }
.card-photo img { display: block; width: 100%; aspect-ratio: 5 / 6; object-fit: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.card-gallery figcaption, .media-preview-item figcaption { margin-top: .3rem; color: var(--muted); font-size: .85rem; }
.card-video { grid-column: 1 / -1; }
.card-video video { display: block; width: 100%; max-height: 24rem; background: var(--ink); border-radius: 4px; }
.lot-price { font-family: var(--font-head); font-size: 2.6rem; font-weight: 700; line-height: 1; margin: .2rem 0; }
.lot-time { font-size: 1.15rem; margin-bottom: 1rem; }
.bidbox { border: 2px solid var(--ink); border-radius: 6px; background: var(--surface); padding: 1rem; margin: 1rem 0; }
.bidbox .field-row { grid-template-columns: 1fr auto; align-items: end; }
.market-reference { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 1rem; margin: 1rem 0; }
.market-reference h2 { font-size: 1.15rem; }
.market-reference p:last-child { margin-bottom: 0; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem 1rem; margin: 1rem 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bids { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.bids li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.bids .amt { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Lista densa (modo padrão do catálogo) */
.view-toggle { display: flex; flex: 0 0 auto; }
.view-toggle .btn { border-radius: 0; padding: .55rem 1rem; }
.view-toggle .btn:first-child { border-radius: 6px 0 0 6px; }
.view-toggle .btn:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.view-toggle .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rows { border: 2px solid var(--ink); border-radius: 0 0 6px 6px; background: var(--surface); margin-bottom: 3rem; overflow-x: auto; }
.row { display: grid; grid-template-columns: 3rem minmax(10rem, 2.4fr) 6.5rem 5.5rem 3.5rem 8rem 7rem; min-width: 46rem; gap: .75rem; align-items: center; padding: .6rem .85rem; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
a.row:hover { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
a.row:hover .row-title { text-decoration: underline; }
.row-head { background: var(--ink); color: var(--paper); font-size: .85rem; font-weight: 600; border: 2px solid var(--ink); border-radius: 6px 6px 0 0; border-bottom: 0; overflow-x: auto; }
.row-head[hidden] { display: none; }
.row-head .num, .row-bids, .row-price, .row-time { text-align: right; }
.row-thumb { display: block; width: 3rem; border: 1px solid var(--ink); border-radius: 3px; overflow: hidden; }
.row-thumb .art { aspect-ratio: 5 / 7; padding: 0; }
.row-thumb .art-frame { border-width: 1px; border-radius: 0; padding: 0; box-shadow: none; }
.row-thumb .art-frame::after { display: none; }
.row-main { min-width: 0; }
.row-title { display: block; font-weight: 600; }
.row-sub { display: block; color: var(--muted); font-size: .85rem; }
.row-grade { justify-self: start; background: var(--gold); color: var(--on-gold); border: 1px solid var(--ink); border-radius: 3px; padding: 0 .5rem; font-weight: 600; font-size: .85rem; }
.row-bids { font-variant-numeric: tabular-nums; }
.row-price { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.row-note { display: block; font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--ok); }
.row-time { font-variant-numeric: tabular-nums; }

/* Faixa de números da página do anúncio */
.lot-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); border: 2px solid var(--ink); border-radius: 6px; background: var(--surface); margin: .5rem 0 1rem; }
.stat { padding: .6rem .9rem; border-right: 1px solid var(--line); min-width: 0; }
.stat:last-child { border-right: 0; }
.stat-label { color: var(--muted); font-size: .85rem; }
.stat .lot-price { margin: 0; font-size: 2rem; }
.stat-value, .stat .lot-time { font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
/* Celular: o preço ocupa a linha inteira (R$ 1.250,50 não cabe numa coluna) e lances e prazo dividem a de baixo. */
@media (max-width: 480px) {
  .lot-stats { grid-template-columns: 1fr 1fr; }
  .lot-stats .stat:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
  .stat-value, .stat .lot-time { font-size: 1.6rem; }
}

/* Formulários de página inteira */
.narrow { max-width: 38rem; padding: 2rem 0 3rem; }
.card-upload { margin: 1.5rem 0; padding: 1rem; border: 2px solid var(--line); border-radius: 6px; background: var(--surface); }
.card-upload h2 { margin-top: 0; font-size: 1.2rem; }
.media-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0 1rem; }
.media-preview-item { min-width: 0; margin: 0; }
.media-preview-item img { display: block; width: 100%; aspect-ratio: 5 / 6; object-fit: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.source-guides { border-top: 1px solid var(--line); padding-top: 1rem; margin: 1.5rem 0; }
.source-guides h2 { font-size: 1.2rem; }
.source-guides ul { margin: .5rem 0; padding-left: 1.2rem; }
.source-guides li { margin-bottom: .3rem; }
.card-lookup, .shipping-fields { margin: 1.2rem 0 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.card-lookup h2, .shipping-fields h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.card-lookup-action { display: flex; align-items: end; }
.card-lookup-results { display: grid; gap: .5rem; margin: .5rem 0 0; padding-left: 1.5rem; }
.card-lookup-results:empty { display: none; }
.card-lookup-results .btn { width: 100%; text-align: left; }
.terms { max-height: 11rem; overflow: auto; border: 2px solid var(--line); border-radius: 6px; padding: .8rem; background: var(--surface); font-size: .92rem; margin-bottom: .8rem; }
.list-section { margin-bottom: 2rem; }
.row-item { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; padding: 1.2rem 0 2rem; }

@media (max-width: 760px) {
  /* No celular o menu quebra de linha e o botão fica à esquerda: o painel abre para a direita, dentro da tela. */
  .site-header { position: relative; }
  .user-menu { position: static; }
  .user-menu-panel { top: 100%; left: 1rem; right: 1rem; width: auto; }
  .home-hero { grid-template-columns: 1fr; gap: .5rem; }
  .home-hero-art { min-height: 13rem; }
  .home-section-heading { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .home-bottom { align-items: flex-start; flex-direction: column; }
  .lot { grid-template-columns: 1fr; }
  .card-gallery { gap: .5rem; }
  .media-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-layout { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; max-height: none; }
  .field-row { grid-template-columns: 1fr; }
  .filter-sidebar .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-next { align-items: flex-start; flex-direction: column; }
  .search { min-width: 100%; }
  .catalog-results .field { flex: 1 1 10rem; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Rodapé com dados da empresa e páginas de texto */
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .75rem 2rem; }
.footer-company p { margin: .15rem 0; overflow-wrap: anywhere; }
.footer-links { display: flex; flex-direction: column; gap: .35rem; }
.footer-note { grid-column: 1 / -1; margin: 0; }
.prose { max-width: 46rem; padding-top: 1rem; }
.prose h2 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose [hidden] { display: none; }
.withdrawal { margin-top: .5rem; }
.withdrawal summary { cursor: pointer; font-weight: 600; }
.withdrawal form { display: grid; gap: .5rem; margin-top: .6rem; max-width: 28rem; }
.withdrawal textarea { font: inherit; width: 100%; box-sizing: border-box; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* Resumo e históricos de Minha conta */
.account-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.account-stat { display: flex; flex-direction: column; gap: .15rem; border: 2px solid var(--line); border-radius: 6px; padding: .6rem .8rem; background: var(--surface); }
.account-stat-value { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; overflow-wrap: anywhere; }
.account-stat-label { color: var(--muted); font-size: .88rem; }
.account-history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.account-history-item { border: 1px solid var(--line); border-radius: 6px; padding: .8rem; background: var(--surface); }
.account-history-item p { margin: .25rem 0; }
.account-page { max-width: 54rem; margin: 0 auto; padding: 1.5rem 0 3rem; }
.account-page .list-section { margin: 1.5rem 0 2rem; }
.account-page .list-section h2 { margin-bottom: .65rem; }
.account-admin-link { display: inline-block; margin-left: .75rem; }
.account-review-list { display: grid; gap: 1rem; }
.account-review { padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.account-review h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.account-review p { margin: .25rem 0; }
.account-review time { color: var(--muted); font-size: .9rem; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }

/* Endereço de entrega: formulário da compra, resumo depois do pagamento e vendas da loja */
.delivery-form, .delivery-summary { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.delivery-form h3, .delivery-summary h3 { margin: 0 0 .4rem; }
.delivery-form .field-row > .field { min-width: 0; }
.delivery-form [aria-invalid="true"] { border-color: var(--danger); }
.delivery-address { margin: .4rem 0 .6rem; line-height: 1.5; overflow-wrap: anywhere; }
.sale-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: .4rem 0 0; }

/* Código de rastreio */
.tracking-code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 1.25rem; letter-spacing: .04em; margin: .2rem 0 .6rem; overflow-wrap: anywhere; }
.tracking-link { display: inline-block; margin: 0; }
.tracking-form { margin: .8rem 0 0; }
.tracking-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.tracking-row input { flex: 1 1 12rem; min-width: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; }
.tracking-row input[aria-invalid="true"] { border-color: var(--danger); }

/* Estimativa de frete por CEP */
.estimate-form { margin: .8rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.estimate-form > label { font-weight: 600; }
.estimate-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.estimate-row input { flex: 1 1 9rem; min-width: 0; max-width: 14rem; }
.estimate-row input[aria-invalid="true"] { border-color: var(--danger); }
.estimate-list { list-style: none; margin: .6rem 0 .2rem; padding: 0; }
.estimate-list li { margin: .2rem 0; }
.avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .6rem; margin: 0 0 .5rem; padding: 0; border: 0; min-width: 0; }
.avatar-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .3rem; border: 2px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; text-align: center; font-weight: 500; }
.avatar-option:hover { border-color: var(--ink); }
.avatar-option:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--gold) 28%, var(--surface)); }
.avatar-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.avatar-option-name { font-size: .8rem; line-height: 1.2; }
.avatar-option.is-locked { cursor: not-allowed; background: var(--paper); }
.avatar-option.is-locked:hover { border-color: var(--line); }
.avatar-option.is-locked .avatar { opacity: .45; filter: grayscale(.6); }
.avatar-option-lock { font-size: .75rem; font-weight: 600; color: var(--muted); }
/* Avaliação do vendedor */
.review-panel { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.review-panel h2 { font-size: 1.15rem; }
.rating-field { margin: 0 0 .75rem; padding: 0; border: 0; min-width: 0; }
.rating-field legend { padding: 0; font-weight: 600; margin-bottom: .3rem; }
.rating-scale { display: flex; gap: .4rem; flex-wrap: wrap; }
.rating-option { display: inline-flex; min-width: 2.6rem; justify-content: center; padding: .35rem .7rem; border: 2px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; font-weight: 600; }
.rating-option:hover { border-color: var(--ink); }
.rating-option:has(input:checked) { border-color: var(--ink); background: var(--gold); color: var(--on-gold); }
.rating-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.review { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.review-scores { margin: 0 0 .3rem; font-size: .9rem; color: var(--muted); }
.review-text { margin: 0 0 .3rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.rating-overall { font-family: var(--font-head); font-size: 1.6rem; }
.review-form .hint { display: block; }
.review-form .btn { margin-top: .5rem; }