/* VGS Comm — app.css
   Extraído literalmente de index.html (migração para tokens em andamento).
   Fonte visual: docs/layout-suggestions/vgs-comm-retro-trade/proposta.html */
      .dark-only { display: block; }
  .light-only { display: none; }
  [data-theme="light"] .dark-only { display: none; }
  [data-theme="light"] .light-only { display: block; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: var(--font-body);
    line-height: var(--lh-body);
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    position: relative;
  }
    ::selection { background: var(--accent); color: #fff; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
  button { cursor: pointer; font: inherit; transition: all 0.2s ease; }
  select, input[type=text] {
    font: inherit;
    background: var(--surface-2);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: var(--r-sm);
    padding: .48rem .65rem;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
  }
  select:focus, input[type=text]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.25), inset 0 1px 2px rgba(0,0,0,0.15);
  }
  input[type=datetime-local] {
    background: var(--surface-2);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: var(--r-sm);
    padding: .48rem .65rem;
    font: inherit;
    font-size: .85rem;
    outline: none;
  }
  input[type=datetime-local]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,92,246,0.25); }
  input[type=file] { color: var(--text-muted); font-size: .82rem; max-width: 100%; }
  input[type=file]::file-selector-button {
    background: var(--surface-2); color: var(--text); border: 2px solid var(--border);
    border-radius: var(--r-sm); padding: .45rem .8rem; font: inherit; font-size: .82rem; font-weight: 600;
    margin-right: .6rem; cursor: pointer; transition: all .2s ease;
  }
  input[type=file]::file-selector-button:hover { border-color: var(--accent); }
  .btn {
    background: linear-gradient(135deg, var(--cta-from), var(--cta-to));
    border: 2px solid rgba(255,255,255,.25);
    color: #fff;
    padding: .48rem .95rem;
    border-radius: var(--r-sm);
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--shadow-hard-sm);
  }
  .btn:hover { filter: brightness(1.12); transform: translate(-1px,-1px); box-shadow: var(--shadow-hard); }
  .btn:active { transform: translate(2px,2px); box-shadow: none; }
  .btn.ghost {
    background: var(--surface-2);
    border: 2px solid var(--border);
    color: var(--text);
    box-shadow: var(--shadow-hard-sm);
  }
  .btn.ghost:hover {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
  }
  .btn.danger {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--bad);
    box-shadow: var(--shadow-hard-sm);
  }
  .btn.danger:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: var(--bad);
  }
  .btn:disabled { opacity: .5; cursor: default; transform: none; filter: none; box-shadow: none; }

  /* ---------- layout (desktop) ---------- */
  .app { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.5rem; max-width: 1500px; margin: 0 auto; padding: 0 1rem; min-height: 100vh; }
  .top-logo { position: fixed; top: 12px; left: 18px; z-index: 45; }
  .top-logo img { height: 40px; width: auto; }
  .util-rail { position: fixed; top: 12px; right: 14px; z-index: 45; display: flex; flex-direction: column; gap: .45rem; }
  .util-btn {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border);
    border-top: 2px solid var(--border-strong);
    color: var(--text);
    box-shadow: var(--shadow-hard-sm);
  }
  .util-btn:hover { color: var(--accent-text); border-color: var(--accent); }
  .util-btn svg { width: 18px; height: 18px; }
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(50px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1.8rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
    z-index: 40;
    padding: 0 .5rem;
  }
  .bar-item {
    flex: 0 0 auto;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0;
    transition: color 0.15s ease;
  }
  .bar-item svg { width: 20px; height: 20px; }
  .bar-item:hover { color: var(--text); }
  .bar-item.active { color: var(--accent-text); }
  .bar-item .notif-badge { position: absolute; top: 4px; left: calc(50% + 4px); margin: 0; }
  .feed { padding: 148px 0 100px; }
  .feed .page { max-width: 720px; margin: 0 auto; }
  .right-panel { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 70px 0 90px; }
  .page-title { font-family: var(--font-display); font-size: 1.15rem; line-height: var(--lh-tight); font-weight: 700; margin-bottom: 1rem; }

  /* ---------- post (gallery card) ---------- */
  .post {
    background: var(--surface);
    border: 2px solid var(--border);
    border-top: 2px solid var(--border-strong);
    border-radius: var(--r-sm);
    margin-bottom: 1.4rem;
    overflow: hidden;
    box-shadow: var(--shadow-hard);
  }
  .post-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .post-head .meta b { font-size: .9rem; display: block; }
  .post-head .meta small { color: var(--text-muted); }
  .post-img { width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1/1; object-fit: cover; display: block; background: #000; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .post-img.placeholder { display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 800; color: rgba(255,255,255,.85); background: linear-gradient(135deg, #4c1d95, #831843); }
  .post-actions { display: flex; gap: .25rem; padding: .55rem .9rem 0; flex-wrap: wrap; align-items: center; }
  .icon-action {
    display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: none; color: var(--text-muted);
    padding: .35rem .5rem; border-radius: var(--r-sm); cursor: pointer;
    font: inherit; font-size: .8rem; font-weight: 600;
    transition: color .15s ease, background .15s ease;
  }
  .icon-action svg { width: 20px; height: 20px; flex: none; }
  .icon-action:hover { color: var(--text); background: var(--surface-2); }
  .icon-action.liked { color: var(--accent-2); }
  .icon-action.liked svg { fill: currentColor; }
  .icon-action.danger:hover { color: var(--bad); }
  .post-comments { padding: .3rem .9rem .85rem; border-top: 1px solid var(--border); margin-top: .6rem; }
  .comment { font-size: .86rem; padding: .3rem 0; border-bottom: 1px solid var(--border); word-break: break-word; }
  .comment:last-of-type { border-bottom: none; }
  .comment b { color: var(--accent-text); }
  .comment small { display: block; margin-top: .15rem; color: var(--text-muted); font-size: .68rem; }
  .post-caption { padding: .5rem .9rem .9rem; font-size: .9rem; }
  .post-caption .owned { color: var(--ok); font-size: .8rem; }
  .post-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
  .post-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--r-sm); background: #000; border: 2px solid var(--border); cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
  .post-thumb:hover { transform: scale(1.03); border-color: var(--accent); }
  .post-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.72); }
  .post-modal-card { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; }
  .post-modal-card .post { margin-bottom: 0; }
  .post-modal-close { position: absolute; top: .55rem; right: .55rem; z-index: 1; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; font-size: 1.1rem; line-height: 1; }

  /* ---------- panel cards / profile ---------- */
  .card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-top: 2px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 1.15rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--shadow-hard);
  }
  .card h3 { font-family: var(--font-display); font-size: .85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .8rem; }
  .profile { display: flex; gap: .8rem; align-items: center; }
  .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-hard-sm); border: 2px solid var(--border-strong); }
  .avatar.initials { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.1rem; }
  .avatar.sm { width: 38px; height: 38px; font-size: .85rem; }
  .avatar-link { cursor: pointer; border-radius: 50%; display: inline-flex; flex-shrink: 0; transition: box-shadow .15s ease; }
  .avatar-link:hover, .avatar-link:focus-visible { box-shadow: 0 0 0 2px var(--accent-text); outline: none; }
  .avatar.xs { width: 28px; height: 28px; font-size: .65rem; }
  .avatar-btn { cursor: pointer; border-radius: 50%; transition: opacity .15s ease, transform .1s ease; }
  .avatar-btn:hover { opacity: .82; transform: scale(1.05); }
  .who b { display: block; }
  .status { color: var(--text-muted); font-size: .8rem; }
  .status.playing { color: var(--ok); }
  .user-row { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; }
  .user-row .grow { flex: 1; min-width: 0; }
  .user-row .grow b { font-size: .88rem; display: block; }
  .user-link { cursor: pointer; color: var(--accent-text); }
  .user-link:hover { text-decoration: underline; }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; box-shadow: 0 0 10px var(--ok); }
  .badge {
    display: inline-block;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-top: 2px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: .15rem .6rem;
    font-size: .72rem;
    margin: .15rem .15rem 0 0;
    box-shadow: var(--shadow-hard-sm);
  }
  .userchip { cursor: pointer; user-select: none; }
  .userchip.selected {
    background: linear-gradient(135deg, var(--cta-from), var(--cta-to));
    color: #fff;
    border-color: transparent;
    border-top-color: rgba(255,255,255,0.4);
  }
  .badge-x {
    background: none; border: none; color: var(--text-muted);
    font-size: .9rem; line-height: 1; margin-left: .3rem;
    padding: 0 .15rem; cursor: pointer; vertical-align: middle;
  }
  .badge-x:hover { color: var(--bad); }
  .post-caption .tag { cursor: pointer; color: var(--accent-text); font-weight: 600; }
  .composer-preview { margin-top: .6rem; aspect-ratio: auto; max-height: 240px; object-fit: contain; }

  /* ---------- chat ---------- */
  .chat-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
  .chat-messages { display: flex; flex-direction: column; gap: .5rem; max-height: 55vh; overflow-y: auto; padding: .5rem 0; }
  .msg {
    max-width: 75%;
    padding: .5rem .85rem;
    border-radius: var(--r-sm);
    font-size: .88rem;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-top: 2px solid var(--border-strong);
    align-self: flex-start;
    word-break: break-word;
    white-space: pre-wrap;
    box-shadow: var(--shadow-hard-sm);
  }
  .msg.mine {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--cta-from), var(--cta-to));
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    box-shadow: var(--shadow-hard-sm);
  }
  .msg small { display: block; margin-top: .3rem; font-size: .68rem; opacity: .7; }
  .chat-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .75rem;
    border-radius: var(--r-sm);
    background: none;
    cursor: pointer;
    text-align: left;
    border: 1px solid transparent;
    color: var(--text);
    width: 100%;
    text-align: left;
    transition: all 0.2s ease;
  }
  .chat-item:hover {
    background: var(--surface-2);
    border-color: var(--border);
    border-top-color: var(--border-strong);
    box-shadow: var(--shadow-hard-sm);
  }
  .chat-item .preview { color: var(--text-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
  .empty { color: var(--text-muted); font-size: .85rem; }
  .hidden { display: none !important; }
  .result-ok { color: var(--ok); } .result-bad { color: var(--bad); }

  /* ---------- FAB (camera / upload) ---------- */
  .fab {
    align-self: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cta-from), var(--cta-to));
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    box-shadow: var(--shadow-hard-sm);
  }
  .fab-menu {
    position: fixed;
    bottom: 62px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 49;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(92vw, 330px);
  }
  .fab-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .12rem;
    padding: .72rem 1rem;
    border-radius: var(--r-sm);
    border: 2px solid var(--border);
    border-top: 2px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    box-shadow: var(--shadow-hard);
  }
  .fab-option:hover { border-color: var(--accent); transform: translateY(-1px); }
  .fab-option b { font-size: .95rem; }
  .fab-option small { color: var(--text-muted); font-size: .78rem; }
  .shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .7rem; }
  .shelf-item { background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
  .shelf-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: #000; }
  .shelf-item .ph { width: 100%; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; font-weight: 800; color: rgba(255,255,255,.85); background: linear-gradient(135deg, #4c1d95, #831843); text-align: center; padding: .3rem; }
  .shelf-item .cap { padding: .35rem .45rem .1rem; font-size: .74rem; }
  .shelf-actions { padding: .2rem .4rem .45rem; }
  .shelf-actions .btn { width: 100%; padding: .3rem .35rem; font-size: .68rem; display: flex; align-items: center; justify-content: center; gap: .3rem; }
  .shelf-actions svg { flex-shrink: 0; }
  .shelf-entry { display: flex; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }
  .shelf-thumb { width: 68px; flex-shrink: 0; }
  .shelf-thumb img, .shelf-thumb .ph { width: 68px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-sm); display: block; background: #000; }
  .shelf-thumb .ph { display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.9); background: linear-gradient(135deg, #4c1d95, #831843); text-align: center; padding: .2rem; }
  .shelf-body { flex: 1; min-width: 0; }
  .stars { font-size: 1.25rem; line-height: 1; letter-spacing: .12rem; margin: .25rem 0; }
  .stars .star { color: var(--border-strong); }
  .stars .star.on { color: var(--warn); }
  .stars.editable .star { cursor: pointer; transition: transform .1s; }
  .stars.editable .star:hover { transform: scale(1.15); }
  .review-input { width: 100%; margin-top: .3rem; background: var(--surface-2); color: var(--text); border: 2px solid var(--border); border-radius: var(--r-sm); padding: .45rem .6rem; font: inherit; font-size: .82rem; resize: vertical; min-height: 44px; }
  .review-view { margin-top: .3rem; font-size: .84rem; white-space: pre-wrap; word-break: break-word; }
  .event-card .post-img { aspect-ratio: 16/9; max-width: none; margin: 0; }
  .upcoming-row { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .35rem; }
  .upcoming-card { flex: 0 0 178px; background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
  .upcoming-card img, .upcoming-card .ph { width: 100%; height: 88px; object-fit: cover; display: block; background: #000; }
  .upcoming-card .ph { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: #fff; text-align: center; padding: .3rem; background: linear-gradient(135deg, #4c1d95, #831843); }
  .upc-body { padding: .45rem .55rem; }
  .upc-body b { font-size: .84rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .upc-body small { display: block; color: var(--text-muted); font-size: .72rem; }
  .catalog-row { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .catalog-row .grow { flex: 1; min-width: 120px; }
  .catalog-row .grow b { font-size: .88rem; display: block; }
  .catalog-row .btn { padding: .4rem .7rem; font-size: .8rem; min-height: 34px; }
  .catalog-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-wrap: wrap; }
  .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
  .icon-btn svg { width: 16px; height: 16px; flex: none; }
  .want-active { background: transparent; border: 2px solid var(--accent); color: var(--accent-text); box-shadow: none; }
  .want-active:hover { filter: none; box-shadow: 0 0 0 3px rgba(139,92,246,.15); }
  .lib-toolbar { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: end; }
  .lib-toolbar select { width: 100%; min-width: 150px; }
  .lib-toolbar .filter-chip { min-width: 118px; justify-content: center; }
  .form-grid { display: grid; grid-template-columns: 2fr 1.4fr 1fr .6fr auto; gap: .5rem; align-items: end; }
  .form-grid > div > input { width: 100%; }
  .notif-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: .35rem; border-radius: var(--r-sm); background: var(--cta-to); color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; vertical-align: middle; }
  .util-btn .notif-badge { position: absolute; top: -3px; right: -3px; margin: 0; }
  .notif-item { display: flex; gap: .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--border); }
  .notif-item.unread { font-weight: 600; }
  .notif-item .grow { flex: 1; min-width: 0; }
  .wish-row { display: flex; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--border); }
  .wish-row img, .wish-row .ph { width: 46px; height: 60px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; background: #000; }
  .wish-row .ph { display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700; color: #fff; text-align: center; background: linear-gradient(135deg, #4c1d95, #831843); }
  .wish-row .grow { flex: 1; min-width: 0; }
  .fab-result {
    background: var(--surface);
    border: 2px solid var(--border);
    border-top: 2px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 1.1rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--shadow-hard);
  }

  /* ---------- login ---------- */
  .login-wrap { display: flex; align-items: center; justify-content: center; height: 100vh; }
  .login-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-top: 2px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 2.5rem;
    text-align: center;
    max-width: 380px;
    box-shadow: var(--shadow-hard);
  }
  .login-card h1 { font-family: var(--font-display); color: var(--accent-text); margin-bottom: .5rem; }
  .login-card p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .9rem; }
  .login-card a.btn { display: inline-block; text-decoration: none; padding: .7rem 1.4rem; }
  .login-card .providers { display: flex; flex-direction: column; gap: .6rem; }
  .provider-btn {
    display: flex; align-items: center; justify-content: center; gap: .65rem;
    background: var(--surface-2); color: var(--text); border: 2px solid var(--border);
    border-radius: var(--r-sm); padding: .7rem 1.1rem; font-size: .88rem; font-weight: 600;
    text-decoration: none; transition: all .2s ease;
  }
  .provider-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
  .provider-btn svg { width: 18px; height: 18px; flex: none; }
  .login-divider { display: flex; align-items: center; gap: .8rem; color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; margin: 1.2rem 0; }
  .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
  .login-form { display: flex; flex-direction: column; gap: .65rem; text-align: left; }
  .login-form input {
    width: 100%; background: var(--surface-2); color: var(--text); border: 2px solid var(--border);
    border-radius: var(--r-sm); padding: .65rem .8rem; font: inherit; font-size: .9rem; outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15); transition: all .2s ease;
  }
  .login-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,92,246,0.25), inset 0 1px 2px rgba(0,0,0,0.15); }
  .login-form .btn { width: 100%; padding: .7rem; margin-top: .2rem; }
  .login-alt { text-align: center; font-size: .82rem; }
  .login-alt a { color: var(--accent-text); text-decoration: none; }
  .login-alt a:hover { text-decoration: underline; }
  .login-error { margin-top: .9rem; padding: .55rem .7rem; border-radius: var(--r-sm); background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #f87171; font-size: .82rem; }

  /* ---------- library menu (iFood-like category strip) ---------- */
  .lib-menu { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0 .7rem; scrollbar-width: none; }
  .lib-menu::-webkit-scrollbar { display: none; }
  .lib-menu button {
    flex: 0 0 auto; display: flex; align-items: center; gap: .45rem;
    background: var(--surface-2); border: 2px solid var(--border); color: var(--text-muted);
    border-radius: var(--r-sm); padding: .5rem .95rem; font-size: .82rem; font-weight: 600;
    white-space: nowrap; transition: all .2s ease;
  }
  .lib-menu button svg { width: 16px; height: 16px; flex: none; }
  .lib-menu button:hover { border-color: var(--accent); color: var(--text); }
  .lib-menu button.active {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, var(--cta-from), var(--cta-to));
    box-shadow: 0 4px 14px rgba(139,92,246,.35);
  }
  .suggestions { margin-top: .4rem; display: flex; flex-direction: column; gap: .2rem; background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--r-sm); padding: .35rem; max-height: 240px; overflow-y: auto; }
  .suggestion { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; background: none; border: none; color: var(--text); padding: .45rem .6rem; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: .84rem; }
  .suggestion:hover { background: var(--border); }
  .suggestion .status { font-size: .72rem; }

  /* ---------- mobile ---------- */
  @media (max-width: 900px) {
    .app { display: block; padding: 0 .75rem; }
    .right-panel { display: none; } /* its content moves into Settings */
    .feed { padding: 54px 0 100px; }
    .top-logo { display: none; }
    .util-rail { top: 8px; right: 8px; flex-direction: row; gap: .3rem; }
    .util-btn { width: 30px; height: 30px; }
    .util-btn svg { width: 15px; height: 15px; }
    .bottom-bar { gap: 0; justify-content: space-around; padding: 0 .2rem; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .bar-item { flex: 1; width: auto; min-height: 44px; }
    .page { padding-top: .2rem; }
    input, select, textarea { font-size: 16px; }
    .lib-toolbar { grid-template-columns: 1fr; }
    .lib-toolbar .filter-chip { width: 100%; }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-grid .span-2 { grid-column: span 2; }
    .form-grid .add-game-btn { width: 100%; }
    .catalog-actions { width: 100%; justify-content: flex-end; }
    .cover-label { display: none; }
  }

/* ---------- identidade pixel (passo 2b) ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.10) 0 1px, transparent 1px 4px);
}
[data-theme="light"] body::before { display: none; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* ============================================================
   SHELL PIXEL-RETRO (passo 3) — header, layout, nav lateral, right rail
   ============================================================ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.site-header { position:sticky; top:0; z-index:45; background:var(--bg-deep); border-bottom:2px solid var(--border); }
.site-header__inner { display:flex; align-items:center; gap:var(--sp-4); max-width:1440px; margin:0 auto; padding:10px 16px; }
.brand { display:flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; font-family:var(--font-display); font-size:var(--fs-sm); white-space:nowrap; }
.search { flex:1; max-width:440px; display:flex; align-items:center; gap:8px; background:var(--surface); border:2px solid var(--border); padding:0 12px; }
.search input { flex:1; min-height:36px; background:none; border:0; outline:none; font-size:var(--fs-sm); color:var(--text); }
.search input::placeholder { color:var(--text-faint); }
.search svg { width:16px; height:16px; color:var(--text-faint); flex:none; }
.header-actions { display:flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.icon-btn { position:relative; display:inline-grid; place-items:center; width:40px; height:40px; background:var(--surface); border:2px solid var(--border); border-radius:var(--r-sm); color:var(--text-muted); cursor:pointer; transition:color var(--t-fast), border-color var(--t-fast); }
.icon-btn:hover { color:var(--text); border-color:var(--border-strong); }
.icon-btn svg { width:20px; height:20px; }
.icon-btn .notif-badge { position:absolute; top:-6px; right:-6px; margin:0; }

.layout { display:grid; grid-template-columns:240px minmax(0,1fr) 320px; grid-template-areas:"nav main rail"; gap:var(--sp-5); max-width:1440px; margin:0 auto; padding:var(--sp-4) var(--sp-4) var(--sp-6); align-items:start; }
.layout .feed { grid-area:main; padding:0; min-width:0; }
.layout .feed .page { max-width:none; margin:0; }

.side-nav { grid-area:nav; position:sticky; top:76px; display:flex; flex-direction:column; gap:var(--sp-4); }
.nav-list { list-style:none; display:flex; flex-direction:column; gap:2px; }
.nav-link { display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:44px; padding:var(--sp-2) var(--sp-3); background:none; border:0; border-left:3px solid transparent; color:var(--text-muted); font:inherit; font-size:var(--fs-sm); text-align:left; cursor:pointer; }
.nav-link:hover { color:var(--text); background:var(--surface); }
.nav-link[aria-current="page"], .nav-link.active { color:var(--accent-text); border-left-color:var(--accent); background:var(--accent-soft); }
.nav-link svg { width:20px; height:20px; flex:none; }

.right-rail { grid-area:rail; display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
#sidebarSlot { display:flex; flex-direction:column; gap:var(--sp-4); }

.panel { background:var(--surface); border:2px solid var(--border); box-shadow:var(--shadow-hard-sm); }
.panel__head { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3); border-bottom:2px solid var(--border); }
.panel__head h3 { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.panel__head svg { width:16px; height:16px; color:var(--accent-text); flex:none; }
.panel__body { padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); }
.steps { display:flex; flex-direction:column; gap:var(--sp-2); }
.step { display:flex; gap:var(--sp-2); align-items:flex-start; font-size:var(--fs-xs); color:var(--text-muted); }
.step b { font-family:var(--font-display); font-size:.625rem; color:var(--accent-text); }

.site-footer { border-top:2px solid var(--border); margin-top:var(--sp-5); padding:var(--sp-4); }
.site-footer__inner { max-width:1440px; margin:0 auto; display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; font-size:var(--fs-xs); color:var(--text-faint); }

@media (min-width:900px) {
  .bottom-bar { display:none; }
  .fab-menu { left:auto; right:24px; bottom:24px; transform:none; }
}
@media (max-width:1199px) {
  .layout { grid-template-columns:220px minmax(0,1fr); grid-template-areas:"nav main" "nav rail"; }
  .right-rail { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); align-content:start; }
  #sidebarSlot { display:contents; }
}
@media (max-width:899px) {
  .layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"main" "rail"; padding:var(--sp-3) var(--sp-3) 96px; }
  .side-nav { display:none; }
  .right-rail { display:flex; }
  #sidebarSlot { display:flex; }
  .brand span { display:none; }
  .search { display:none; }
  .header-actions .btn { display:none; }
  .header-actions { gap:4px; }
  .layout .feed { padding-bottom:96px; }
}

/* ---------- abas do feed (passo 4) ---------- */
.tabs { display:flex; gap:var(--sp-1); border-bottom:2px solid var(--border); margin-bottom:var(--sp-4); }
.tab { appearance:none; background:none; border:0; border-bottom:3px solid transparent; min-height:40px; padding:var(--sp-2) var(--sp-4); cursor:pointer; color:var(--text-muted); font-family:var(--font-display); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.03em; }
.tab:hover { color:var(--text); }
.tab[aria-selected="true"] { color:var(--accent-text); border-bottom-color:var(--accent); }
#page-home[data-feed="friends"] [data-kind="event"],
#page-home[data-feed="friends"] [data-kind="wish"],
#page-home[data-feed="events"] [data-kind="post"],
#page-home[data-feed="events"] [data-kind="wish"],
#page-home[data-feed="events"] [data-kind="game"],
#page-home[data-feed="trades"] [data-kind="post"],
#page-home[data-feed="trades"] [data-kind="game"],
#page-home[data-feed="trades"] [data-kind="event"] { display:none; }

/* ---------- dialogs do leilão e do match (passo 6) ---------- */
dialog.auction { border:2px solid var(--border-strong); background:var(--surface); color:var(--text); padding:0; max-width:760px; width:calc(100% - 2rem); box-shadow:8px 8px 0 0 rgba(0,0,0,.5); }
dialog.auction::backdrop { background:rgba(4,4,10,.78); }
.dialog__head { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4); border-bottom:2px solid var(--border); }
.dialog__head h2 { font-family:var(--font-display); font-size:var(--fs-md); line-height:var(--lh-tight); }
.dialog__head > svg { width:22px; height:22px; flex:none; }
.dialog__body { padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-4); max-height:70vh; overflow:auto; }
.dialog__foot { display:flex; justify-content:flex-end; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-top:2px solid var(--border); }
.dialog__close { margin-left:auto; }
.stats { display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.stat { display:flex; flex-direction:column; gap:2px; }
.stat__label { font-family:var(--font-display); font-size:.625rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); }
.stat__value { font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:700; }
.disclaimer { display:flex; gap:var(--sp-3); padding:var(--sp-3); border:2px solid var(--info); background:var(--info-soft); font-size:var(--fs-xs); line-height:1.5; }
.disclaimer > svg { width:20px; height:20px; flex:none; color:var(--info); }
.disclaimer b { display:block; margin-bottom:2px; font-family:var(--font-display); font-size:.625rem; text-transform:uppercase; letter-spacing:.03em; color:var(--info); }
.offer { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); border:2px solid var(--border); background:var(--surface-2); }
.offer--best { border-color:var(--ok); }
.offer__value { margin-left:auto; text-align:right; }
.field { display:flex; flex-direction:column; gap:var(--sp-1); }
.field label { font-family:var(--font-display); font-size:.625rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.input-currency { display:flex; align-items:center; border:2px solid var(--border); background:var(--surface-2); }
.input-currency span { padding:0 var(--sp-3); font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-muted); border-right:2px solid var(--border); }
.input-currency input { flex:1; min-height:40px; padding:0 var(--sp-3); background:none; border:0; outline:none; font-family:var(--font-mono); color:var(--text); }
.summary { display:flex; flex-direction:column; gap:var(--sp-2); border:2px solid var(--border); background:var(--surface-2); padding:var(--sp-3); }
.summary div { display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-sm); }

/* ---------- ajustes de rail/lateral ---------- */
#sideProfile { margin-top: var(--sp-1); }
#sideProfile .card { margin-bottom: 0; }
#onlineRail .user-row { padding: var(--sp-1) 0; }