:root {
  --bg: #070b14;
  --bg-soft: #0a101c;
  --surface: rgba(17, 27, 44, 0.88);
  --surface-solid: #111b2c;
  --surface-raised: #17243a;
  --surface-soft: rgba(255, 255, 255, 0.035);
  --line: rgba(172, 195, 226, 0.14);
  --line-strong: rgba(172, 195, 226, 0.25);
  --text: #f4f7fb;
  --muted: #aeb9cb;
  --muted-2: #748198;
  --mint: #62e6c8;
  --blue: #8ea8ff;
  --violet: #b787f7;
  --amber: #f4c66a;
  --rose: #ff7b8a;
  --success: #63d69a;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --sidebar: 248px;
  --topbar: 78px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 78% -15%, rgba(100, 130, 255, 0.11), transparent 31rem),
    linear-gradient(180deg, #080d17 0%, #070b14 55%, #080c15 100%);
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

::selection {
  color: #07130f;
  background: var(--mint);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #07130f;
  background: var(--mint);
  font-weight: 800;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.initial-boot-screen {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  color: var(--text);
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(98, 230, 200, .12), transparent 24rem),
    var(--bg);
}

.initial-boot-screen > strong { font-size: 22px; letter-spacing: -.02em; }
.initial-boot-screen > span:last-child { color: var(--muted); font-size: 13px; }
.initial-boot-mark { position: relative; width: 46px; height: 46px; border: 2px solid rgba(98, 230, 200, .28); border-radius: 14px; animation: initial-boot-pulse .9s ease-in-out infinite alternate; }
.initial-boot-mark i { position: absolute; width: 9px; height: 9px; border-radius: 3px; background: var(--mint); }
.initial-boot-mark i:nth-child(1) { top: 9px; left: 9px; }
.initial-boot-mark i:nth-child(2) { top: 9px; right: 9px; }
.initial-boot-mark i:nth-child(3) { right: 9px; bottom: 9px; }
body.is-booting .app-shell,
body.is-booting .ambient { visibility: hidden; }
body:not(.is-booting) .initial-boot-screen { display: none; }
@keyframes initial-boot-pulse { to { border-color: rgba(98, 230, 200, .72); transform: scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .initial-boot-mark { animation: none; }
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 26rem;
  height: 26rem;
  border-radius: 999px;
  filter: blur(90px);
  opacity: 0.07;
  pointer-events: none;
}

.ambient-one {
  top: 12%;
  right: -12rem;
  background: var(--violet);
}

.ambient-two {
  bottom: -14rem;
  left: 28%;
  background: var(--mint);
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar);
  flex-direction: column;
  padding: 24px 16px 18px;
  border-right: 1px solid var(--line);
  background: rgba(7, 11, 20, 0.9);
  backdrop-filter: blur(24px);
}

.brand {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 35%),
    conic-gradient(from 210deg, #4ddabe, #607cff, #b36feb, #f2bd62, #4ddabe);
  box-shadow: 0 10px 30px rgba(98, 230, 200, 0.14);
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 10px;
  background: #0b1321;
}

.brand-mark i {
  position: absolute;
  z-index: 1;
  display: block;
  width: 18px;
  height: 4px;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--mint), var(--blue));
  transform-origin: center;
}

.brand-mark i:nth-child(1) { transform: rotate(0deg); }
.brand-mark i:nth-child(2) { transform: rotate(60deg); }
.brand-mark i:nth-child(3) { transform: rotate(120deg); }

.brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.15;
}

.brand-copy strong {
  overflow: hidden;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy small {
  margin-top: 5px;
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 36px;
}

.nav-label {
  margin: 0 12px 8px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-label-spaced {
  margin-top: 28px;
}

.nav-item {
  position: relative;
  display: grid;
  min-height: 46px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: 160ms ease;
}

.nav-item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.nav-item.is-active {
  border-color: rgba(98, 230, 200, 0.14);
  color: var(--text);
  background: linear-gradient(90deg, rgba(98, 230, 200, 0.12), rgba(98, 230, 200, 0.035));
}

.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -17px;
  width: 3px;
  height: 24px;
  border-radius: 0 10px 10px 0;
  background: var(--mint);
  box-shadow: 0 0 16px rgba(98, 230, 200, 0.5);
}

.nav-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  font-size: 18px;
}

.nav-count {
  min-width: 24px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.nav-item.community-coming-soon:disabled {
  border-color: transparent;
  color: var(--muted);
  background: transparent;
  cursor: not-allowed;
  opacity: 0.78;
}

.nav-item.community-coming-soon:disabled:hover {
  color: var(--muted);
  background: transparent;
}

.nav-coming-soon {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 1px solid rgba(98, 230, 200, 0.24);
  border-radius: 999px;
  color: var(--mint);
  background: rgba(98, 230, 200, 0.07);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar-footer {
  display: grid;
  gap: 12px;
}

.sync-status,
.owner-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}

.sync-status span:nth-child(2),
.owner-card span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.sync-status strong,
.owner-card strong {
  font-size: 12px;
  font-weight: 700;
}

.sync-status small,
.owner-card small {
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 10px;
}

.status-orb {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(98, 230, 200, 0.1), 0 0 12px rgba(98, 230, 200, 0.35);
}

.owner-card {
  width: 100%;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.owner-card:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.045);
}

.avatar,
.avatar-button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgba(142, 168, 255, 0.22);
  border-radius: 11px;
  color: #dce5ff;
  background: linear-gradient(145deg, #26365d, #1a2240);
  font-size: 13px;
  font-weight: 800;
}

.private-pill {
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--mint);
  background: rgba(98, 230, 200, 0.1);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.main {
  min-height: 100vh;
  margin-left: var(--sidebar);
}

.topbar {
  position: sticky;
  z-index: 15;
  top: 0;
  display: flex;
  height: var(--topbar);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(24px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 20, 0.76);
  backdrop-filter: blur(22px);
}

.global-search {
  display: flex;
  width: min(520px, 50vw);
  height: 46px;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--muted-2);
  background: rgba(255, 255, 255, 0.035);
  transition: 160ms ease;
}

.global-search:focus-within {
  border-color: rgba(142, 168, 255, 0.55);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 0 4px rgba(142, 168, 255, 0.08);
}

.global-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 13px;
}

.global-search input::placeholder {
  color: var(--muted-2);
}

kbd {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: 6px;
  color: var(--muted-2);
  background: rgba(255, 255, 255, 0.035);
  font-family: inherit;
  font-size: 10px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.global-language-menu {
  position: relative;
}

.global-language-menu > summary {
  display: flex;
  min-width: 82px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  list-style: none;
}

.global-language-menu > summary::-webkit-details-marker {
  display: none;
}

.global-language-menu[open] > summary,
.global-language-menu > summary:hover {
  border-color: rgba(98, 230, 200, 0.42);
  background: rgba(98, 230, 200, 0.08);
}

.global-language-current-flag,
.global-language-option-flag {
  display: block;
  width: 28px;
  aspect-ratio: 3 / 2;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
}

.global-language-current-flag svg,
.global-language-option-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.global-language-chevron {
  color: var(--muted-2);
  transition: transform 160ms ease;
}

.global-language-menu[open] .global-language-chevron {
  transform: rotate(180deg);
}

.global-language-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: 242px;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #101a2a;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
}

.global-language-popover > button {
  display: grid;
  min-height: 52px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.global-language-popover > button::after {
  content: "";
  width: 7px;
  height: 7px;
  border: 2px solid var(--muted-2);
  border-radius: 50%;
}

.global-language-popover > button:hover,
.global-language-popover > button[aria-checked="true"] {
  border-color: rgba(98, 230, 200, 0.28);
  color: var(--text);
  background: rgba(98, 230, 200, 0.08);
}

.global-language-popover > button[aria-checked="true"]::after {
  border-color: var(--mint);
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(98, 230, 200, 0.13);
}

.global-language-popover > button > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.global-language-popover strong {
  font-size: 12px;
}

.global-language-popover small {
  color: var(--muted-2);
  font-size: 9px;
}

.sync-chip {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 11px;
}

.icon-button,
.avatar-button {
  border: 1px solid var(--line);
  cursor: pointer;
}

.icon-button {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
}

.icon-button:hover,
.avatar-button:hover {
  color: var(--text);
  border-color: var(--line-strong);
  filter: brightness(1.1);
}

.notification-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.notification-button:disabled:hover {
  color: var(--muted);
  border-color: var(--line);
  filter: none;
}

.view {
  width: min(100%, 1540px);
  min-width: 0;
  min-height: calc(100vh - var(--topbar) - 72px);
  margin: 0 auto;
  padding: 42px clamp(24px, 4vw, 56px) 56px;
}

.view-header {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.view-title h1 {
  margin: 5px 0 8px;
  font-size: clamp(28px, 3.3vw, 42px);
  font-weight: 720;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.view-title,
.hero-copy,
.hero-copy > * {
  min-width: 0;
}

.view-title p,
.hero-copy h2,
.hero-copy p {
  overflow-wrap: anywhere;
}

.view-title p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mint);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  color: #07130f;
  background: linear-gradient(135deg, #7bf2d7, #5ed7c4);
  box-shadow: 0 12px 30px rgba(98, 230, 200, 0.14);
}

.button.secondary {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}

.button.ghost {
  min-height: 38px;
  padding: 0 12px;
  color: var(--muted);
  background: transparent;
}

.button.ghost:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  min-height: 254px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(130deg, rgba(98, 230, 200, 0.09), transparent 36%),
    linear-gradient(315deg, rgba(142, 168, 255, 0.12), transparent 42%),
    var(--surface);
  box-shadow: var(--shadow);
}

.hero-panel::before {
  content: "";
  position: absolute;
  top: -80px;
  right: 21%;
  width: 220px;
  height: 390px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 60px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 60%);
  transform: rotate(26deg);
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 4vw, 48px);
}

.hero-copy h2 {
  max-width: 680px;
  margin: 10px 0 13px;
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 690;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.hero-copy h2 span {
  color: var(--mint);
}

.hero-copy p {
  max-width: 570px;
  margin: 0 0 25px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hero-progress {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 28px;
  border-left: 1px solid var(--line);
  background: rgba(5, 10, 18, 0.28);
}

.progress-ring {
  position: relative;
  display: grid;
  width: 148px;
  height: 148px;
  place-items: center;
}

.progress-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-ring circle {
  fill: none;
  stroke-width: 8;
}

.progress-ring .track { stroke: rgba(255, 255, 255, 0.07); }
.progress-ring .value {
  stroke: url(#ring-gradient);
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(98, 230, 200, 0.25));
}

.progress-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-copy strong {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.progress-copy small {
  margin-top: 2px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-progress > p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.stat-card {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.stat-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--stat-color, var(--blue));
  filter: blur(30px);
  opacity: 0.11;
}

.stat-card span {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stat-card strong {
  display: block;
  margin-top: 10px;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

.stat-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  gap: 16px;
  margin-top: 16px;
}

.panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.panel-header,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.panel-header {
  margin-bottom: 22px;
}

.panel-header h3,
.section-heading h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.panel-header p,
.section-heading p {
  margin: 5px 0 0;
  color: var(--muted-2);
  font-size: 11px;
}

.text-link {
  border: 0;
  color: var(--mint);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}

.set-progress-list {
  display: grid;
  gap: 18px;
}

.set-progress-item {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(140px, 1fr) 46px;
  align-items: center;
  gap: 14px;
}

.set-name strong {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-name small {
  display: block;
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.progress-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.065);
}

.progress-bar i {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--blue));
  box-shadow: 0 0 16px rgba(98, 230, 200, 0.2);
}

.set-progress-item > strong {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.value-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(244, 198, 106, 0.075), transparent 55%),
    var(--surface);
}

.value-card .value-label {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.value-card .value-total {
  display: block;
  margin: 12px 0 4px;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
}

.value-card > p {
  margin: 0;
  color: var(--muted-2);
  font-size: 10px;
}

.sparkline {
  width: 100%;
  height: 68px;
  margin: 18px 0 8px;
}

.sparkline path.line {
  fill: none;
  stroke: var(--amber);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.sparkline path.area {
  fill: url(#spark-gradient);
}

.value-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(244, 198, 106, 0.13);
  border-radius: 10px;
  color: #d4c7aa;
  background: rgba(244, 198, 106, 0.045);
  font-size: 10px;
  line-height: 1.5;
}

.recent-section {
  margin-top: 34px;
}

.section-heading {
  margin-bottom: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.collection-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.collection-card:hover {
  border-color: rgba(142, 168, 255, 0.28);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  transform: translateY(-3px);
}

.card-grid-overlays {
  position: absolute;
  z-index: 7;
  top: 12px;
  left: 12px;
  display: flex;
  max-width: calc(100% - 72px);
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.card-grid-info-button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(180, 202, 232, .3);
  border-radius: 10px;
  color: #eaf3ff;
  background: rgba(5, 12, 22, .86);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26);
  cursor: pointer;
  font: 900 14px/1 system-ui, sans-serif;
  pointer-events: auto;
  backdrop-filter: blur(9px);
}

.card-grid-info-button:hover,
.card-grid-info-button:focus-visible {
  border-color: rgba(98, 230, 200, .58);
  color: var(--mint);
  outline: 0;
}

.card-grid-price-badge {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  overflow: hidden;
  border: 1px solid rgba(98, 230, 200, .28);
  border-radius: 10px;
  color: #dffdf5;
  background: rgba(5, 20, 20, .86);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
  pointer-events: none;
  backdrop-filter: blur(9px);
}

.card-grid-price-badge strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-grid-price-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.card-grid-price-copy small {
  overflow: hidden;
  color: var(--amber);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-grid-price-badge.is-stale,
.card-grid-price-badge.is-stale-refreshing {
  border-color: rgba(244, 198, 106, .38);
  color: #fff0c2;
  background: rgba(34, 27, 14, .9);
}

.card-grid-price-badge.is-stale-refreshing {
  box-shadow: 0 0 0 1px rgba(244, 198, 106, .08), 0 6px 18px rgba(0, 0, 0, .24);
}

.card-price-language-flag {
  display: block;
  width: 22px;
  aspect-ratio: 3 / 2;
  flex: 0 0 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 3px;
  background: #fff;
}

.card-price-language-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.card-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.card-visual {
  position: relative;
  display: grid;
  width: calc(100% - 20px);
  aspect-ratio: 8 / 11;
  margin: 10px 10px 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 34%, var(--art-light), transparent 26%),
    linear-gradient(145deg, var(--art-a), var(--art-b));
  isolation: isolate;
}

.card-placeholder {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
}

.card-placeholder::before,
.card-placeholder::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.13);
  pointer-events: none;
}

.card-placeholder::before {
  width: 72%;
  height: 52%;
  border-radius: 50%;
  box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.035), 0 0 50px rgba(255, 255, 255, 0.035);
  transform: rotate(-24deg);
}

.card-placeholder::after {
  inset: -60% -70%;
  border: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.18) 48%, rgba(183, 135, 247, 0.14) 51%, transparent 58%);
  transform: translateX(-35%) rotate(8deg);
  transition: transform 650ms ease;
}

.collection-card:hover .card-placeholder::after {
  transform: translateX(35%) rotate(8deg);
}

.tcgdex-card-image {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  color: transparent;
  opacity: 0;
  background: transparent;
  transition: opacity 180ms ease, filter 180ms ease;
}

.card-visual.image-loaded > .tcgdex-card-image {
  opacity: 1;
}

.tcgdex-card-image[hidden] {
  display: none;
}

#view-content.is-catalog-refreshing {
  cursor: progress;
}

.collection-card:hover .tcgdex-card-image {
  filter: saturate(1.04) brightness(1.03);
}

.art-fire { --art-a: #311921; --art-b: #7b2935; --art-light: rgba(255, 153, 109, 0.46); }
.art-electric { --art-a: #3a3213; --art-b: #8b6d16; --art-light: rgba(255, 230, 112, 0.52); }
.art-psychic { --art-a: #241b47; --art-b: #61356e; --art-light: rgba(200, 133, 255, 0.48); }
.art-dark { --art-a: #121828; --art-b: #263a55; --art-light: rgba(109, 158, 210, 0.4); }
.art-grass { --art-a: #132f29; --art-b: #236746; --art-light: rgba(110, 235, 164, 0.4); }
.art-water { --art-a: #13283c; --art-b: #23628b; --art-light: rgba(116, 210, 255, 0.45); }

.art-glyph {
  position: relative;
  z-index: 1;
  display: grid;
  width: 44%;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 42% 58% 56% 44% / 48% 42% 58% 52%;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.08), 0 16px 30px rgba(0, 0, 0, 0.15);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 300;
  transform: rotate(-7deg);
  backdrop-filter: blur(4px);
}

.art-glyph span {
  transform: rotate(7deg);
}

.card-set-label,
.card-number-label {
  position: absolute;
  z-index: 2;
  left: 12px;
  color: rgba(255, 255, 255, 0.63);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-set-label { top: 12px; }
.card-number-label { bottom: 12px; }

.owned-badge {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(98, 230, 200, 0.21);
  border-radius: 999px;
  color: #b6f7e8;
  background: rgba(7, 23, 22, 0.74);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 800;
}

.owned-badge.missing {
  border-color: rgba(255, 255, 255, 0.13);
  color: var(--muted);
  background: rgba(7, 11, 20, 0.72);
}

/* Cards com preco/informacoes reservam uma faixa propria para os controles. */
.collection-card:has(> .card-grid-overlays) .card-visual {
  margin-top: 56px;
  overflow: visible;
}

.collection-card:has(> .card-grid-overlays) .owned-badge {
  top: -44px;
  right: -10px;
  min-height: 34px;
  padding: 6px 9px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
  font-size: 12px;
  line-height: 1;
}

.card-body {
  min-height: 100px;
  padding: 15px 15px 14px;
}

.card-body h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.015em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card-body p {
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.catalog-variant-card {
  border-color: rgba(98, 230, 200, .16);
}

.catalog-variant-label {
  display: inline-flex;
  max-width: 58%;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid rgba(98, 230, 200, .18);
  border-radius: 999px;
  color: var(--mint);
  background: rgba(98, 230, 200, .055);
  font-size: 8px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rarity {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rarity::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(244, 198, 106, 0.4);
}

.card-actions {
  position: absolute;
  z-index: 4;
  right: 13px;
  bottom: 12px;
  display: flex;
  gap: 6px;
}

.mini-action {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: #131e30;
  cursor: pointer;
}

.mini-action:hover,
.mini-action.is-active {
  border-color: rgba(98, 230, 200, 0.3);
  color: var(--mint);
  background: #17283a;
}

.catalog-toolbar {
  position: relative;
  z-index: 8;
  top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -2px 0 22px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(12, 19, 32, 0.88);
  backdrop-filter: blur(18px);
}

.filter-chips {
  display: flex;
  min-width: 0;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}

.filter-chip:hover,
.filter-chip.is-active {
  border-color: rgba(98, 230, 200, 0.28);
  color: var(--text);
  background: rgba(98, 230, 200, 0.09);
}

.toolbar-meta {
  flex: 0 0 auto;
  color: var(--muted-2);
  font-size: 10px;
  white-space: nowrap;
}

.online-catalog-pagination {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 26px 16px 10px;
}

.online-catalog-pagination p {
  margin: 0;
  color: #ffb2bd;
  font-size: 12px;
  text-align: center;
}

.online-catalog-pagination .button {
  min-width: 220px;
}

.empty-state {
  display: grid;
  min-height: 360px;
  place-items: center;
  padding: 38px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
  text-align: center;
}

.empty-state-inner {
  max-width: 390px;
}

.empty-symbol {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--blue);
  background: var(--surface-soft);
  font-size: 26px;
}

.empty-state h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 20px;
}

.empty-state p {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 1.65;
}

.notice-panel {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(142, 168, 255, 0.18);
  border-radius: 14px;
  background: rgba(142, 168, 255, 0.055);
}

.notice-panel > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--blue);
  background: rgba(142, 168, 255, 0.1);
}

.notice-panel strong {
  display: block;
  font-size: 12px;
}

.notice-panel p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.setting-card {
  display: flex;
  min-height: 130px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.setting-card h3 {
  margin: 0 0 7px;
  font-size: 14px;
}

.setting-card p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.setting-value {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--mint);
  background: rgba(98, 230, 200, 0.06);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.browser-connector-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 20px;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(98, 230, 200, 0.08), transparent 38%),
    linear-gradient(145deg, rgba(16, 27, 46, 0.98), rgba(9, 16, 29, 0.98));
}

.connector-heading,
.connector-actions,
.connector-devices > div,
.connector-devices li,
.connector-failures > div,
.connector-failures li {
  display: flex;
  align-items: center;
}

.connector-heading {
  justify-content: space-between;
  gap: 24px;
}

.connector-heading h3 {
  margin-top: 5px;
  font-size: 18px;
}

.connector-heading p {
  max-width: 720px;
}

.connector-presence {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.connector-presence i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-2);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.03);
}

.connector-presence.is-connected { color: var(--mint); border-color: rgba(98, 230, 200, 0.22); }
.connector-presence.is-connected i { background: var(--mint); box-shadow: 0 0 0 4px rgba(98, 230, 200, 0.08); }
.connector-presence.is-checking i { background: var(--amber); animation: connector-pulse 1.4s ease-in-out infinite; }
.connector-presence.is-missing { color: #ff9ba8; border-color: rgba(255, 142, 156, 0.2); }
.connector-presence.is-missing i { background: #ff8e9c; }

.connector-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
}

.connector-metrics span {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 15px 16px;
  background: rgba(8, 15, 27, 0.96);
}

.connector-metrics small,
.connector-devices small,
.connector-failures small {
  color: var(--muted-2);
  font-size: 9px;
}

.connector-metrics strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connector-actions {
  flex-wrap: wrap;
  gap: 10px;
}

.connector-disclosure,
.connector-alert,
.connector-inline-error {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid rgba(142, 168, 255, 0.15);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(142, 168, 255, 0.045);
  font-size: 10px;
  line-height: 1.55;
}

.connector-disclosure p { max-width: none; }
.connector-alert { color: #ffd0d6; border-color: rgba(255, 142, 156, 0.22); background: rgba(255, 142, 156, 0.06); }
.connector-alert { flex-direction: column; gap: 4px; }
.connector-inline-error { color: #ffb5bf; border-color: rgba(255, 142, 156, 0.18); }

.connector-devices {
  display: grid;
  gap: 11px;
}

.connector-failures {
  display: grid;
  gap: 11px;
}

.connector-failures > div {
  justify-content: space-between;
  gap: 16px;
}

.connector-failures ul {
  display: grid;
  gap: 8px;
  max-height: 360px;
  margin: 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.connector-failures li {
  gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 142, 156, 0.17);
  border-radius: 11px;
  background: rgba(255, 142, 156, 0.045);
}

.connector-failures li > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 3px; }
.connector-failures li > span:nth-child(2) strong { overflow-wrap: anywhere; font-size: 11px; }

.connector-failure-mark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  color: #ffb5bf;
  background: rgba(255, 142, 156, 0.09);
  font-weight: 850;
}

.connector-failure-state {
  max-width: 190px;
  color: #ffc7a8;
  font-size: 9px;
  font-weight: 750;
  text-align: right;
}

.connector-devices > div {
  justify-content: space-between;
  gap: 16px;
}

.connector-devices ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.connector-devices li {
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(5, 11, 21, 0.58);
}

.connector-device-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--mint);
  background: rgba(98, 230, 200, 0.08);
}

.connector-devices li > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 3px; }
.connector-devices li > span:nth-child(2) strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.connector-device-state { color: var(--mint); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.connector-empty { justify-content: center; color: var(--muted); }

@keyframes connector-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.08); }
}

.password-setting-card {
  grid-column: 1 / -1;
}

.settings-password-form {
  display: grid;
  width: min(100%, 640px);
  grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.settings-password-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.settings-password-form input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  color: var(--text);
  background: #0d1727;
}

.settings-password-form input:focus {
  border-color: rgba(142, 168, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(142, 168, 255, 0.08);
}

.google-auth-setting-card {
  grid-column: 1 / -1;
}

.settings-google-form {
  display: grid;
  width: min(100%, 430px);
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.settings-google-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.settings-google-form input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  color: var(--text);
  background: #0d1727;
}

.app-footer {
  display: flex;
  width: min(100%, 1540px);
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 9px;
}

.mobile-header,
.mobile-nav {
  display: none;
}

dialog {
  color: var(--text);
}

dialog::backdrop {
  background: rgba(2, 5, 10, 0.72);
  backdrop-filter: blur(8px);
}

.card-dialog {
  width: min(950px, calc(100vw - 40px));
  max-height: min(820px, calc(100vh - 40px));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: #0d1523;
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.55);
}

.dialog-close {
  position: sticky;
  z-index: 8;
  top: 14px;
  float: right;
  display: grid;
  width: 40px;
  height: 40px;
  margin: 14px 14px -54px 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(7, 11, 20, 0.72);
  cursor: pointer;
  backdrop-filter: blur(12px);
  font-size: 22px;
}

.detail-layout {
  display: grid;
  min-height: 610px;
  grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1.18fr);
}

.detail-art-wrap {
  display: grid;
  min-height: 610px;
  place-items: center;
  padding: 52px;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 42%, rgba(142, 168, 255, 0.13), transparent 48%),
    #0a111d;
}

.detail-art-wrap .card-visual {
  width: min(100%, 320px);
  margin: 0;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.detail-info {
  padding: 56px 48px 40px;
}

.detail-info h2 {
  margin: 10px 0 8px;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.04em;
}

.detail-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 20px 0 28px;
}

.tag {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 9px;
}

.detail-own-box,
.price-reference {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.026);
}

.detail-own-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.detail-own-box strong,
.price-reference strong {
  display: block;
  font-size: 13px;
}

.detail-own-box p,
.price-reference p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.detail-section {
  margin-top: 26px;
}

.detail-section h3 {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.full-art-review {
  padding: 14px;
  border: 1px solid rgba(98, 230, 200, 0.18);
  border-radius: 14px;
  background: rgba(98, 230, 200, 0.045);
}

.full-art-review p {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 10px;
}

.full-art-review .button.is-active {
  color: var(--mint);
  border-color: rgba(98, 230, 200, 0.48);
  background: rgba(98, 230, 200, 0.1);
}

.copy-list {
  display: grid;
  gap: 8px;
}

.copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.copy-row strong {
  font-size: 10px;
}

.copy-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 9px;
}

.copy-row > span:last-child {
  color: var(--mint);
  font-size: 9px;
}

.price-reference {
  margin-top: 16px;
}

.price-reference .price-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.price-reference .price {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.external-button {
  width: 100%;
  margin-top: 10px;
}

.form-dialog {
  width: min(600px, calc(100vw - 32px));
  padding: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: #0f1827;
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.55);
}

.form-dialog.lot-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(900px, calc(100vh - 32px));
  overflow-y: auto;
}

.form-dialog form {
  margin: 0;
}

.dialog-heading h2 {
  margin: 8px 0 6px;
  font-size: 25px;
  letter-spacing: -0.03em;
}

.dialog-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.form-grid-spaced {
  margin-top: 14px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.form-grid input,
.form-grid select,
.full-form-label textarea {
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  color: var(--text);
  background: #111d2f;
}

.form-grid input,
.form-grid select {
  height: 45px;
}

.full-form-label textarea {
  min-height: 76px;
  padding-top: 11px;
  padding-bottom: 11px;
  resize: vertical;
}

.extras-fieldset {
  margin: 18px 0 0;
  padding: 13px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.extras-fieldset legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.extras-options {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.extras-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
  font-size: 9px;
}

.extras-options input {
  accent-color: var(--mint);
}

.grading-fields[hidden] {
  display: none;
}

.form-dialog details {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.form-dialog summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 26px;
}

.toast {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  display: flex;
  max-width: min(400px, calc(100vw - 32px));
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid rgba(98, 230, 200, 0.25);
  border-radius: 13px;
  color: #dafcf3;
  background: rgba(14, 34, 34, 0.94);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: 200ms ease;
  font-size: 11px;
}

.toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.toast > button {
  min-height: 32px;
  margin-left: auto;
  padding: 0 11px;
  border: 1px solid rgba(218, 252, 243, .3);
  border-radius: 9px;
  color: #fff;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

/* Organização v4: coleções, Master Sets e fichários */
.nav-list { overflow-y: auto; scrollbar-width: thin; }
.view-header-actions, .detail-own-actions, .entity-actions, .lot-inline-actions, .binder-pagination { display: flex; align-items: center; gap: 8px; }
.quick-settings-button { flex: 0 0 auto; }
.specialized-view-meta { display: flex; justify-content: flex-end; margin: -8px 0 18px; color: var(--muted-2); font-size: 10px; }
.organization-loading { display:flex; align-items:center; gap:9px; margin:-8px 0 16px; color:var(--muted); font-size:10px; }
.compact-dialog { width: min(620px, calc(100vw - 28px)); }
.organizer-grid { display: grid; gap: 16px; }
.organizer-card, .master-set-card, .binder-shell, .binder-pool {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(25,39,59,.82), rgba(12,19,32,.94));
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
}
.organizer-card { padding: 22px; }
.organizer-card > header, .binder-shell > header, .binder-pool > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.organizer-card h2, .master-set-card h2, .binder-shell h2 { margin: 5px 0 6px; font: 500 24px/1.1 Georgia, serif; }
.organizer-card p, .master-set-card p { margin: 0; color: var(--muted); font-size: 11px; }
.entity-actions button, .lot-inline-actions button, .binder-pagination button {
  min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.035); cursor: pointer; font-size: 10px;
}
.entity-actions button.collection-open-action { color: var(--mint); border-color: rgba(98,230,200,.28); background: rgba(98,230,200,.08); }
.entity-actions button.danger, .lot-inline-actions button.danger { color: #ffabb6; border-color: rgba(255,120,140,.22); }
.organizer-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 20px 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--line); }
.organizer-summary span { min-height: 76px; padding: 14px; background: #111c2d; }
.organizer-summary strong, .organizer-summary small { display: block; }
.organizer-summary strong { font-size: 16px; }
.organizer-summary small { margin-top: 5px; color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.coverage-track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.coverage-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--mint),#8ea8ff); }
.organizer-card details { margin-top: 17px; }
.organizer-card summary { color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 750; }
.organizer-lot-list { display: grid; gap: 8px; margin-top: 13px; }
.organizer-lot-row { display: grid; grid-template-columns: minmax(180px,1fr) auto minmax(150px,220px) auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5,10,19,.35); }
.organizer-lot-row strong, .organizer-lot-row small { display: block; }
.organizer-lot-row strong { font-size: 11px; }.organizer-lot-row small { margin-top: 4px; color: var(--muted-2); font-size: 9px; }
.organizer-lot-row select { min-height: 34px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: #101a2a; font-size: 10px; }
.lot-quantity { color: var(--mint); font-weight: 800; }
.master-set-list { display: grid; gap: 13px; }
.master-set-card { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 20px; }
.master-set-orbit { display: grid; width: 72px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--mint) var(--progress), rgba(255,255,255,.07) 0); position: relative; }
.master-set-orbit::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#101a2a; }.master-set-orbit strong { position:relative; z-index:1; font-size:13px; }
.master-set-card .coverage-track { margin-top: 12px; }
.binder-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.binder-pool { margin-bottom: 14px; padding: 14px; }
.binder-pool header strong, .binder-pool header small { display:block; }.binder-pool header small { color:var(--muted-2); font-size:9px; }
.binder-pool > div { display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding-bottom:4px; }
.binder-pool-card { width:74px; flex:0 0 74px; padding:5px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:#101a2a; cursor:grab; }
.binder-pool-card.is-selected { border-color:var(--mint); box-shadow:0 0 0 2px rgba(98,230,200,.12); }
.binder-pool-card .card-visual { width:100%; margin:0; border-radius:7px; }.binder-pool-card > span { display:block; overflow:hidden; margin-top:5px; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.binder-shell { padding: clamp(15px,3vw,26px); background: radial-gradient(circle at 50% 0,rgba(126,91,61,.2),transparent 40%),#15100d; border-color:rgba(205,164,112,.22); }
.binder-pagination span { color:#d8c6ad; font-size:10px; }
.binder-page { display:grid; grid-template-columns:repeat(var(--binder-columns),minmax(0,1fr)); gap:clamp(8px,1.6vw,16px); margin-top:20px; padding:clamp(10px,2vw,20px); border:1px solid rgba(205,164,112,.2); border-radius:18px; background:linear-gradient(135deg,#211912,#100d0b); box-shadow:inset 0 0 45px rgba(0,0,0,.38); }
.binder-slot { position:relative; display:grid; aspect-ratio:8/11; place-items:center; min-width:0; overflow:hidden; border:1px solid rgba(232,207,172,.2); border-radius:12px; background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(0,0,0,.14)); box-shadow:inset 0 0 16px rgba(0,0,0,.25); }
.binder-slot::after { content:""; position:absolute; inset:5px; pointer-events:none; border:1px solid rgba(255,255,255,.06); border-radius:9px; }
.binder-slot > button { width:100%; height:100%; padding:4px; border:0; background:transparent; cursor:pointer; }.binder-slot .card-visual { width:100%; height:100%; margin:0; border-radius:8px; }
.binder-slot > span:not(.binder-slot-empty):not(.binder-slot-state):not(.binder-slot-name):not(.michi-slot-art) { position:absolute; z-index:5; right:6px; bottom:6px; left:6px; overflow:hidden; padding:4px 5px; border-radius:6px; color:white; background:rgba(5,8,12,.75); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.binder-slot-empty { color:rgba(232,207,172,.25); font-size:28px; cursor:pointer; }.binder-slot-empty:hover,.binder-slot-empty:focus-visible { color:var(--mint); }.binder-hint { margin:14px 0 0; color:#a9967e; font-size:10px; text-align:center; }
.muted-copy { color:var(--muted); font-size:10px; }
.copy-row-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.copy-row-actions select, .copy-row-actions button { min-height:31px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#101a2a; font-size:9px; }
.copy-row-actions select { max-width:150px; }.copy-row-actions button { padding:0 9px; cursor:pointer; }.copy-row-actions button.danger { color:#ffabb6; }

@media (max-width: 760px) {
  .view-header-actions { width:100%; justify-content:flex-end; }
  .organizer-card > header { flex-direction:column; }
  .organizer-card > header .entity-actions { width:100%; flex-wrap:wrap; justify-content:flex-start; }
  .organizer-summary { grid-template-columns:repeat(2,1fr); }
  .organizer-lot-row { grid-template-columns:1fr auto; }
  .organizer-lot-row select { grid-column:1/-1; }.lot-inline-actions { justify-content:flex-end; }
  .master-set-card { grid-template-columns:64px 1fr; }.master-set-card > .entity-actions { grid-column:1/-1; justify-content:flex-end; }
  .binder-page { gap:7px; padding:8px; }.binder-toolbar { align-items:flex-start; flex-direction:column; }
}

.login-view {
  position: relative;
  display: grid;
  min-height: calc(100vh - 160px);
  place-items: center;
  padding: 32px 0;
}

.login-card {
  width: min(100%, 440px);
  padding: clamp(28px, 5vw, 42px);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(98, 230, 200, 0.055), transparent 36%),
    var(--surface);
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 46px;
}

.login-card h1 {
  margin: 10px 0 10px;
  font-size: clamp(30px, 5vw, 40px);
  letter-spacing: -0.045em;
}

.login-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.login-form {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.login-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.login-form input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: 0;
  color: var(--text);
  background: #0d1727;
}

.login-form input:focus {
  border-color: rgba(142, 168, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(142, 168, 255, 0.08);
}

.login-form .button {
  width: 100%;
  margin-top: 6px;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--muted-2);
  font-size: 9px;
  text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
  height: 1px;
  flex: 1;
  content: "";
  background: var(--line);
}

.google-login-button {
  width: 100%;
  justify-content: center;
}

.google-login-mark {
  display: inline-grid;
  width: 22px;
  height: 22px;
  margin-right: 7px;
  place-items: center;
  border-radius: 50%;
  color: #172033;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.login-security {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 9px;
  line-height: 1.5;
}

.login-legal {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--muted-2);
  font-size: 9px;
}

.login-legal a { color: inherit; }
.login-legal a:hover { color: var(--mint); }

.login-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 10px;
}

.login-error {
  margin: 14px 0 0 !important;
  padding: 11px 13px;
  border: 1px solid rgba(255, 125, 125, 0.25);
  border-radius: 10px;
  color: #ffb7b7 !important;
  background: rgba(255, 90, 90, 0.07);
  font-size: 10px !important;
}

.login-back {
  position: absolute;
  bottom: 22px;
}

.is-login .sidebar,
.is-login .topbar,
.is-login .mobile-header,
.is-login .mobile-nav,
.is-login .app-footer {
  display: none;
}

.is-login .main {
  margin-left: 0;
}

.is-login .view {
  min-height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
}

.mobile-only { display: none; }

@media (max-width: 1180px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  :root { --topbar: 68px; }

  .sidebar,
  .topbar {
    display: none;
  }

  .mobile-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    height: var(--topbar);
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    background: rgba(7, 11, 20, 0.86);
    backdrop-filter: blur(20px);
  }

  .mobile-header .brand { padding: 0; }
  .mobile-header .brand-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 12px; }

  .global-search.mobile-only {
    display: flex;
    width: 100%;
    margin-bottom: 14px;
  }

  .main { margin-left: 0; }
  .view { min-height: calc(100vh - 140px); padding: 30px 20px 100px; }
  .app-footer { display: none; }

  .mobile-nav {
    position: fixed;
    z-index: 30;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: grid;
    height: 66px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: rgba(12, 19, 32, 0.93);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(22px);
  }

  .mobile-nav button {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    border: 0;
    border-radius: 12px;
    color: var(--muted-2);
    background: transparent;
    cursor: pointer;
  }

  .mobile-nav button.is-active {
    color: var(--mint);
    background: rgba(98, 230, 200, 0.075);
  }

  .mobile-nav button span { height: 20px; font-size: 17px; }
  .mobile-nav button small { overflow: hidden; max-width: 100%; font-size: 9px; text-overflow: ellipsis; }

  .dashboard-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .connector-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .password-setting-card { flex-direction: column; }
  .settings-password-form { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .google-auth-setting-card { flex-direction: column; }
  .settings-google-form { width: 100%; }
  .mobile-only { display: inline-flex; }
}

@media (max-width: 720px) {
  .settings-password-form { grid-template-columns: 1fr; }
  .settings-google-form { grid-template-columns: 1fr; }
  .connector-heading { align-items: flex-start; flex-direction: column; }
  .connector-metrics { grid-template-columns: 1fr; }
  .connector-actions .button { width: 100%; }
  .connector-devices li { align-items: flex-start; flex-wrap: wrap; }
  .connector-devices li .button { width: 100%; }
  .view-header { align-items: flex-start; flex-direction: column; }
  .view-header .button { width: 100%; }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-copy { padding: 28px 24px; }
  .hero-progress { display: flex; align-items: center; justify-content: flex-start; gap: 18px; padding: 22px 24px; border-top: 1px solid var(--line); border-left: 0; }
  .progress-ring { width: 88px; height: 88px; flex: 0 0 88px; }
  .progress-copy strong { font-size: 25px; }
  .hero-progress > p { margin: 0; text-align: left; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .catalog-toolbar { top: 78px; align-items: flex-start; flex-direction: column; }
  .filter-chips { width: 100%; }
  .toolbar-meta { padding: 0 4px 3px; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-art-wrap { min-height: auto; padding: 52px 70px 36px; border-right: 0; border-bottom: 1px solid var(--line); }
  .detail-art-wrap .card-visual { width: min(100%, 280px); }
  .detail-info { padding: 30px 24px 34px; }
  .card-dialog { width: 100vw; max-width: none; max-height: calc(100vh - 18px); margin: auto 0 0; border-radius: 22px 22px 0 0; }
}

@media (max-width: 520px) {
  .view { padding-right: 14px; padding-left: 14px; }
  .view-title h1 { font-size: 29px; }
  .stat-grid { gap: 10px; }
  .stat-card { min-height: 104px; padding: 16px; }
  .stat-card strong { font-size: 24px; }
  .panel { padding: 19px; }
  .hero-actions { display: grid; width: 100%; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .set-progress-item { grid-template-columns: 1fr 42px; gap: 8px; }
  .set-progress-item .progress-bar { grid-column: 1 / -1; grid-row: 2; }
  .card-body { min-height: 96px; padding: 12px; }
  .card-actions { right: 10px; bottom: 10px; }
  .mini-action { width: 29px; height: 29px; }
  .form-dialog { width: 100vw; max-width: none; margin: auto 0 0; padding: 24px 18px; border-radius: 20px 20px 0 0; }
  .form-grid { grid-template-columns: 1fr; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .button { width: 100%; }
  .detail-art-wrap { padding-right: 62px; padding-left: 62px; }
  .setting-card { flex-direction: column; }
  .toast { right: 16px; bottom: 92px; left: 16px; }
}

@media (max-width: 370px) {
  .card-grid { grid-template-columns: 1fr; }
  .brand-copy small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .collection-card:hover,
  .button:hover {
    transform: none;
  }
}

/* Master Sets com progresso canônico e por variante */

.master-variant-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.master-variant-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(12, 20, 33, .78);
}

.master-variant-controls > label {
  display: grid;
  min-width: 180px;
  gap: 4px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 700;
}

.master-variant-controls select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: #101a2a;
}

.master-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .22);
}

.master-mode-switch button {
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 8px;
  font-weight: 750;
  cursor: pointer;
}

.master-mode-switch button.is-active {
  color: #07130f;
  background: var(--mint);
}

.master-card.is-partial {
  border-color: rgba(244, 198, 106, .3);
}

.master-card.is-partial .card-visual {
  opacity: .74;
  filter: saturate(.82) brightness(.88);
}

.master-card-state.is-partial,
.master-card.is-partial .master-card-state {
  border-color: rgba(244, 198, 106, .28);
  color: var(--amber);
}

.master-variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 34px;
  padding: 0 8px 9px;
}

.master-variant-chip,
.master-qualifier-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(4, 9, 16, .62);
  font-size: 6px;
  line-height: 1.2;
}

.master-variant-chip b {
  overflow: hidden;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-variant-chip small {
  color: inherit;
  font-size: 6px;
}

.master-variant-chip.is-owned {
  border-color: rgba(98, 230, 200, .3);
  color: var(--mint);
}

.master-variant-chip.is-missing {
  color: #9ca7b7;
  opacity: .72;
}

.master-variant-chip.is-review,
.master-qualifier-chip {
  border-style: dashed;
  color: var(--amber);
}

.master-variant-loading,
.master-variant-data-note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 8px 0;
  padding: 9px 12px;
  border: 1px solid rgba(142, 168, 255, .15);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(142, 168, 255, .05);
  font-size: 8px;
}

.master-card-grid.is-variant-mode {
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
}

/* Fichário físico: capa/página 1, depois aberturas em pares */

.binder-fixed-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  color: #dfcdb3;
  text-align: right;
}

.binder-fixed-meta strong {
  font-size: 11px;
}

.binder-fixed-meta span,
.binder-template-badge {
  color: #9f8d75;
  font-size: 8px;
}

.binder-template-badge {
  display: inline-flex;
  margin-top: 7px;
  padding: 4px 7px;
  border: 1px solid rgba(232, 207, 172, .16);
  border-radius: 999px;
}

.binder-legacy-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px dashed rgba(244, 198, 106, .3);
  border-radius: 10px;
  color: var(--amber);
  font-size: 8px;
}

.binder-legacy-notice span {
  color: #b4a58f;
}

.binder-stage {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
}

.binder-edge-control {
  display: grid;
  width: 58px;
  min-height: 108px;
  padding: 8px 5px;
  border: 1px solid rgba(232, 207, 172, .18);
  border-radius: 13px;
  place-content: center;
  place-items: center;
  gap: 7px;
  color: #dec9aa;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
}

.binder-edge-control span {
  font-size: 22px;
  line-height: 1;
}

.binder-edge-control small {
  font-size: 7px;
  line-height: 1.25;
  text-align: center;
}

.binder-edge-control:hover:not(:disabled),
.binder-edge-control:focus-visible {
  border-color: rgba(98, 230, 200, .4);
  color: var(--mint);
  background: rgba(98, 230, 200, .07);
}

.binder-edge-control:disabled {
  cursor: not-allowed;
  opacity: .3;
}

.binder-edge-control.is-add {
  border-style: dashed;
}

.binder-stage.is-single .binder-spread {
  grid-template-columns: minmax(0, 1fr);
  max-width: min(540px, max(300px, calc((100vh - 270px) * .76)));
}

.binder-stage.is-open .binder-spread {
  max-width: min(1050px, max(520px, calc((100vh - 270px) * 1.44)));
}

.binder-stage.is-single .binder-spread::before {
  display: none;
}

.binder-stage.is-single .binder-sheet {
  border-radius: 12px;
}

.binder-stage .binder-spread {
  max-height: min(690px, calc(100vh - 250px));
}

.binder-stage .binder-sheet {
  min-height: 0;
}

.binder-stage .binder-page {
  max-height: min(600px, calc(100vh - 325px));
}

/* Wizard de modelos e bloqueio de formato */

.binder-fixed-format,
.binder-template-field {
  grid-column: 1 / -1;
}

.binder-fixed-format {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid rgba(98, 230, 200, .18);
  border-radius: 11px;
  background: rgba(98, 230, 200, .045);
}

.binder-fixed-format span,
.binder-fixed-format small {
  color: var(--muted-2);
  font-size: 8px;
}

.binder-template-field {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.binder-template-field > legend {
  padding: 0 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.binder-template-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.binder-template-options label {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: #101a2a;
  cursor: pointer;
}

.binder-template-options label:has(input:checked) {
  border-color: rgba(98, 230, 200, .46);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(98, 230, 200, .07);
}

.binder-template-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.binder-template-options label:has(input:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.binder-template-options strong {
  font-size: 9px;
}

.binder-template-options small {
  color: var(--muted-2);
  font-size: 7px;
}

.binder-template-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.binder-template-specific {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.binder-template-specific[hidden],
.binder-template-config[hidden] {
  display: none;
}

.binder-template-preview {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(142, 168, 255, .18);
  border-radius: 10px;
  background: rgba(142, 168, 255, .05);
}

.binder-template-preview strong {
  font-size: 10px;
}

.binder-template-preview span,
.binder-template-preview small {
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1.45;
}

.binder-template-preview-loading,
.binder-template-update-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.binder-template-preview-error {
  color: #ffc1c7 !important;
}

.binder-template-confirm {
  margin-top: 9px;
}

/* Modal de slot: ações explícitas e busca paginada */

.binder-picker-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 96px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  background: rgba(17, 27, 44, .82);
}

.binder-picker-card:hover,
.binder-picker-card:focus-within {
  border-color: rgba(98, 230, 200, .32);
  background: rgba(24, 39, 61, .96);
}

.binder-picker-card.is-unavailable {
  opacity: .62;
}

.binder-picker-card-info {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.binder-picker-card-info .card-visual {
  width: 58px;
  height: auto;
  margin: 0;
  border-radius: 6px;
}

.binder-picker-card-actions {
  display: grid;
  width: 104px;
  gap: 6px;
}

.binder-picker-card-actions button {
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(98, 230, 200, .25);
  border-radius: 8px;
  color: var(--mint);
  background: rgba(98, 230, 200, .07);
  font-size: 7px;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
}

.binder-picker-card-actions button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.binder-picker-card-actions .binder-picker-add-collection {
  border-color: rgba(142, 168, 255, .25);
  color: #bdcaff;
  background: rgba(142, 168, 255, .06);
}

.binder-picker-loading,
.binder-picker-error,
.binder-picker-more {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 8px;
  border-radius: 9px;
  color: var(--muted);
  background: rgba(255, 255, 255, .025);
  font-size: 8px;
}

.binder-picker-skeleton {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.binder-picker-skeleton i {
  min-height: 88px;
  border-radius: 11px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .035) 20%, rgba(255, 255, 255, .09) 40%, rgba(255, 255, 255, .035) 60%);
  background-size: 220% 100%;
  animation: binder-skeleton 1.2s linear infinite;
}

@keyframes binder-skeleton {
  to { background-position-x: -220%; }
}

.binder-picker-error {
  color: #ffc1c7;
}

.binder-picker-error button {
  min-height: 30px;
  border: 1px solid currentColor;
  border-radius: 8px;
  color: inherit;
  background: transparent;
}

.binder-collection-dialog {
  width: min(700px, calc(100vw - 28px));
}

.binder-acquire-language {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.binder-acquire-language > legend {
  margin-bottom: 7px;
  color: var(--muted-2);
  font-size: 9px;
}

.binder-acquire-language > .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.binder-acquire-language .drawer-language-choice {
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(13, 23, 38, .72);
  cursor: pointer;
}

.binder-acquire-language .drawer-variant-warning {
  grid-column: 1 / -1;
}

.binder-template-update-content {
  min-height: 90px;
  margin: 10px 0;
}

.binder-template-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.binder-template-diff-grid section,
.binder-template-diff-empty {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(16, 26, 42, .72);
}

.binder-template-diff-grid strong,
.binder-template-diff-empty strong,
.binder-template-diff-empty span {
  display: block;
  font-size: 9px;
}

.binder-template-diff-grid ul,
.binder-template-diff-grid p {
  max-height: 170px;
  margin: 7px 0 0;
  padding-left: 17px;
  overflow: auto;
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1.5;
}

.binder-template-diff-grid p {
  padding-left: 0;
}

.binder-template-diff-empty span {
  margin-top: 5px;
  color: var(--muted-2);
}

@media (max-width: 1080px) {
  .master-variant-controls {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .master-variant-controls .filter-chips {
    flex-basis: 100%;
  }

  .binder-stage {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 6px;
  }

  .binder-edge-control {
    width: 46px;
  }
}

@media (max-width: 760px) {
  .master-variant-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .master-variant-summary > :last-child {
    grid-column: 1 / -1;
  }

  .binder-template-options,
  .binder-template-config,
  .binder-template-specific,
  .binder-template-diff-grid {
    grid-template-columns: 1fr;
  }

  .binder-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .binder-stage .binder-spread {
    grid-column: 1 / -1;
    grid-row: 1;
    max-height: none;
  }

  .binder-edge-control {
    width: 100%;
    min-height: 44px;
    grid-auto-flow: column;
    gap: 8px;
  }

  .binder-edge-control.is-previous {
    grid-column: 1;
    grid-row: 2;
  }

  .binder-edge-control.is-next {
    grid-column: 2;
    grid-row: 2;
  }

  .binder-edge-control span {
    font-size: 17px;
  }

  .binder-fixed-meta {
    justify-items: start;
    text-align: left;
  }

  .binder-picker-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .binder-picker-skeleton {
    grid-template-columns: 1fr;
  }

  .binder-picker-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

@media (max-width: 480px) {
  .master-variant-controls,
  .master-mode-switch {
    display: grid;
    grid-template-columns: 1fr;
  }

  .master-variant-controls > label {
    min-width: 0;
  }

  .binder-template-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .binder-picker-skeleton i {
    animation: none;
  }
}

/* Overrides finais: o cartão do picker agora é um artigo com duas ações. */
.binder-picker-card {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 96px;
  cursor: default;
}

.binder-picker-card-info {
  grid-template-columns: 58px minmax(0, 1fr);
}

/* Complete/Master Sets, stepper e painel lateral de inventário */

.set-goal-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(4, 9, 16, .58);
}

.set-goal-switch button {
  min-height: 36px;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}

.set-goal-switch button.is-active {
  color: #06130f;
  background: var(--mint);
  box-shadow: 0 7px 18px rgba(98, 230, 200, .13);
}

.master-set-list {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.master-set-card {
  position: relative;
  grid-template-columns: 118px minmax(0, 1fr) 56px;
  min-height: 174px;
  padding: 12px;
  overflow: hidden;
}

.master-set-card-copy {
  display: block;
  min-width: 0;
}

.master-set-card-copy h2,
.master-set-card-copy p,
.master-set-card-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.master-set-card-copy h2 {
  font-size: 19px;
}

.master-set-card-copy small {
  display: block;
  margin-top: 8px;
  color: var(--muted-2);
  font-size: 8px;
}

.master-set-art {
  position: relative;
  display: grid;
  width: 118px;
  height: 148px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  color: rgba(255, 255, 255, .22);
  background:
    radial-gradient(circle at 50% 32%, rgba(98, 230, 200, .17), transparent 38%),
    linear-gradient(145deg, #18283d, #0a111d);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-align: center;
}

.master-set-art > img:not(.master-set-symbol) {
  position: absolute;
  z-index: 2;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  opacity: 0;
  transition: opacity 160ms ease;
}

.master-set-art > img.master-set-symbol {
  position: absolute;
  z-index: 3;
  right: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 7px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 160ms ease;
  background: rgba(5, 10, 18, .8);
}

.master-set-art.logo-loaded > img[data-set-image-role="primary"],
.master-set-art.primary-loaded > img[data-set-image-role="primary"],
.master-set-art.symbol-loaded > img[data-set-image-role="symbol"] {
  opacity: 1;
}
.master-set-art.primary-symbol-loaded > img[data-set-image-role="symbol"] { opacity: 0; }

.master-set-card .master-set-orbit {
  width: 50px;
}

.complete-set-rule {
  align-self: center;
  color: var(--mint);
  font-size: 9px;
}

.complete-set-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card-quantity-stepper {
  display: grid;
  grid-template-columns: 34px minmax(42px, 1fr) 34px;
  align-items: center;
  gap: 4px;
  min-height: 35px;
  margin: 0 8px 9px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(5, 10, 18, .72);
}

.card-quantity-stepper button,
.card-quantity-stepper input {
  width: 100%;
  height: 29px;
  min-width: 0;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  background: rgba(255, 255, 255, .045);
  font: 800 11px/1 system-ui, sans-serif;
  text-align: center;
}

.card-quantity-stepper button {
  color: var(--mint);
  cursor: pointer;
  font-size: 17px;
}

.card-quantity-stepper button:first-child {
  color: #ffb3bd;
}

.card-quantity-stepper button:disabled,
.card-quantity-stepper input:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.card-quantity-stepper input {
  appearance: textfield;
  -moz-appearance: textfield;
}

.card-quantity-stepper input::-webkit-inner-spin-button,
.card-quantity-stepper input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.card-quantity-stepper.is-addition-blocked {
  border-color: rgba(244, 198, 106, .2);
}

.collection-card > .card-quantity-stepper {
  margin: 0 12px 12px;
}

.collection-card .card-actions {
  bottom: 56px;
}

.master-card .card-quantity-stepper {
  grid-template-columns: 30px minmax(36px, 1fr) 30px;
}

.card-dialog {
  width: min(480px, 100vw);
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  border-width: 0 0 0 1px;
  border-radius: 0;
  overscroll-behavior: contain;
  box-shadow: -26px 0 80px rgba(0, 0, 0, .48);
}

.card-dialog[open] {
  animation: card-drawer-enter 180ms ease-out;
}

@keyframes card-drawer-enter {
  from { opacity: .6; clip-path: inset(0 0 0 24px); }
  to { opacity: 1; clip-path: inset(0); }
}

.card-drawer-layout {
  display: block;
  min-height: 100%;
}

.card-drawer-art {
  min-height: 265px;
  padding: 34px 56px 24px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.card-drawer-art .card-visual {
  width: 154px;
  border-radius: 10px;
}

.card-drawer-layout .detail-info {
  padding: 24px 26px 36px;
}

.card-drawer-layout .detail-info h2 {
  margin-top: 7px;
  font-size: 27px;
}

.card-drawer-layout .detail-tags {
  margin: 14px 0;
}

.drawer-current-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(98, 230, 200, .16);
  border-radius: 11px;
  background: rgba(98, 230, 200, .04);
}

.drawer-current-price span,
.drawer-current-price small {
  color: var(--muted-2);
  font-size: 8px;
}

.drawer-current-price strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--mint);
  font-size: 18px;
}

.drawer-current-price.is-estimate {
  border-color: rgba(244, 198, 106, .22);
  background: rgba(244, 198, 106, .045);
}

.drawer-current-price.is-estimate strong {
  color: var(--amber);
}

.card-drawer-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #101a2a;
}

.card-drawer-form label,
.drawer-variant-lock {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 700;
}

.card-drawer-form select,
.card-drawer-form input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  color: var(--text);
  background: #0b1422;
  padding: 8px 9px;
}

.card-drawer-form select:focus,
.card-drawer-form input:focus {
  border-color: rgba(98, 230, 200, .48);
  box-shadow: 0 0 0 3px rgba(98, 230, 200, .07);
}

.drawer-paid-price,
.drawer-variant-lock,
.drawer-variant-warning,
.drawer-form-actions {
  grid-column: 1 / -1;
}

.drawer-form-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.drawer-form-actions .button {
  min-width: 0;
}

.drawer-variant-lock {
  padding: 10px;
  border: 1px dashed rgba(142, 168, 255, .22);
  border-radius: 9px;
}

.drawer-variant-lock strong {
  color: var(--text);
  font-size: 10px;
}

.drawer-variant-lock small {
  color: var(--muted-2);
  font-size: 7px;
}

.drawer-variant-warning {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 190, 92, .24);
  border-radius: 9px;
  color: #ffd391;
  background: rgba(255, 190, 92, .07);
  font-size: 8px;
  line-height: 1.55;
}

.drawer-copy-details {
  margin-top: 16px;
}

.drawer-copy-details:not([open]) > :not(summary) {
  display: none;
}

.drawer-copy-details summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
}

@media (max-width: 760px) {
  .master-set-list {
    grid-template-columns: 1fr;
  }

  .master-set-card {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 142px;
  }

  .master-set-art {
    width: 92px;
    height: 116px;
  }

  .master-set-card .master-set-orbit {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 42px;
  }

  .complete-set-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .set-goal-switch,
  .view-header-actions .set-goal-switch {
    width: 100%;
  }

  .card-dialog {
    width: 100vw;
  }
}

@media (max-width: 430px) {
  .card-drawer-form {
    grid-template-columns: 1fr;
  }

  .card-drawer-form > * {
    grid-column: 1;
  }

  .drawer-form-actions {
    grid-template-columns: 1fr;
  }

  .card-drawer-art {
    min-height: 235px;
    padding: 28px 46px 18px;
  }
}

@media (max-width: 720px) {
  .binder-picker-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .binder-picker-card-info {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .binder-picker-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

/* Janelas virtuais reutilizáveis para grids longos de cartas. */

.virtualized-grid {
  position: relative;
  overflow-anchor: none;
}

.virtual-list-spacer {
  position: relative;
  grid-column: 1 / -1 !important;
  min-width: 0;
  pointer-events: none;
  overflow-anchor: none;
}

.virtual-list-leading-offset {
  min-width: 0;
  height: 1px;
  pointer-events: none;
  overflow-anchor: none;
}

.virtual-list-leading-offset[hidden] {
  display: none;
}

.virtual-list-sentinel {
  position: absolute;
  right: 0;
  left: 0;
  display: block;
  height: 2px;
  pointer-events: none;
}

.virtual-list-spacer.is-top .virtual-list-sentinel {
  bottom: 0;
}

.virtual-list-spacer.is-bottom .virtual-list-sentinel {
  top: 0;
}

.virtual-list-fallback {
  position: absolute;
  z-index: 2;
  left: 50%;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  background: #101a2a;
  cursor: pointer;
  pointer-events: auto;
  transform: translateX(-50%);
}

.virtual-list-spacer.is-top .virtual-list-fallback {
  bottom: 8px;
}

.virtual-list-spacer.is-bottom .virtual-list-fallback {
  top: 8px;
}

/* Catálogo, coleções e inclusão detalhada */
.catalog-card-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.catalog-card-grid .collection-card .card-body {
  min-height: 96px;
  padding: 13px 13px 11px;
}

.catalog-card-grid .collection-card > .card-quantity-stepper {
  margin: 0 10px 10px;
}

.card-dialog::backdrop {
  background: rgba(2, 6, 12, 0.42);
  backdrop-filter: blur(2px);
}

.card-dialog {
  width: min(600px, 100vw);
  background: #111d2d;
  box-shadow: -30px 0 90px rgba(0, 0, 0, 0.38);
}

.card-drawer-layout .detail-info {
  padding: 28px 32px 42px;
}

.card-drawer-layout .detail-info h2 {
  margin-top: 8px;
  font-size: clamp(30px, 4vw, 36px);
  line-height: 1.05;
}

.card-drawer-layout .detail-subtitle {
  font-size: 15px;
}

.card-drawer-layout .detail-tags .tag {
  min-height: 28px;
  padding: 6px 9px;
  font-size: 12px;
}

.card-drawer-art {
  min-height: 360px;
  padding: 42px 70px 30px;
  background:
    radial-gradient(circle at 50% 42%, rgba(98, 230, 200, 0.12), transparent 48%),
    linear-gradient(180deg, #132235, #0f1a29);
}

.card-drawer-art .card-visual {
  width: 224px;
  border-color: rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.42), 0 0 38px rgba(98, 230, 200, 0.08);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.card-drawer-art .card-visual::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -35%;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 37%, rgba(255, 255, 255, 0.03) 43%, rgba(135, 246, 224, 0.3) 49%, rgba(156, 178, 255, 0.18) 53%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateX(-42%) rotate(7deg);
  animation: drawer-card-shine 5.8s ease-in-out infinite;
}

.card-drawer-art .card-visual:hover {
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48), 0 0 44px rgba(98, 230, 200, 0.14);
  transform: perspective(900px) rotateX(1deg) rotateY(-2deg) translateY(-3px);
}

@keyframes drawer-card-shine {
  0%, 58%, 100% { transform: translateX(-42%) rotate(7deg); opacity: 0; }
  70% { opacity: 0.86; }
  84% { transform: translateX(42%) rotate(7deg); opacity: 0; }
}

.drawer-current-price {
  margin-bottom: 18px;
  padding: 15px 16px;
  border-radius: 13px;
}

.drawer-current-price span,
.drawer-current-price small {
  font-size: 12px;
}

.drawer-current-price strong {
  font-size: 24px;
}

.card-drawer-form {
  gap: 14px;
  padding: 20px;
  border-color: rgba(142, 168, 255, 0.2);
  border-radius: 17px;
  background: #162438;
}

.card-drawer-form > label {
  gap: 8px;
  color: #aebbd0;
  font-size: 13px;
}

.card-drawer-form > label > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.card-drawer-form > label > span b,
.drawer-fieldset legend > span {
  display: inline-grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border: 1px solid rgba(98, 230, 200, 0.28);
  border-radius: 50%;
  color: var(--mint);
  background: rgba(98, 230, 200, 0.08);
  font-size: 12px;
}

.card-drawer-form select,
.card-drawer-form input {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #0e1929;
  font-size: 15px;
}

.drawer-fieldset {
  min-width: 0;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  border: 0;
}

.drawer-fieldset legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #d9e2f1;
  font-size: 14px;
  font-weight: 800;
}

.drawer-variant-picker > p {
  margin: -3px 0 12px 30px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.drawer-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.drawer-choice,
.drawer-language-choice {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  color: var(--muted);
  background: #0f1b2b;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.drawer-choice:hover,
.drawer-language-choice:hover {
  border-color: rgba(98, 230, 200, 0.3);
  transform: translateY(-1px);
}

.drawer-choice.is-selected,
.drawer-choice:has(input:checked),
.drawer-language-choice.is-selected,
.drawer-language-choice:has(input:checked) {
  border-color: rgba(98, 230, 200, 0.55);
  color: var(--text);
  background: rgba(98, 230, 200, 0.1);
  box-shadow: inset 0 0 0 1px rgba(98, 230, 200, 0.08);
}

.drawer-choice input,
.drawer-language-choice input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0;
}

.drawer-choice:focus-within,
.drawer-language-choice:focus-within {
  outline: 2px solid rgba(98, 230, 200, 0.7);
  outline-offset: 2px;
}

.drawer-choice > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.drawer-choice strong {
  font-size: 14px;
}

.drawer-choice small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-language-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.drawer-language-choice {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px 6px;
  text-align: center;
}

.drawer-language-flag {
  display: block;
  width: 38px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.28);
}

.drawer-language-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.drawer-language-choice strong {
  font-size: 13px;
  line-height: 1.15;
}

.drawer-language-choice small {
  overflow: hidden;
  width: 100%;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-language-choice.is-unavailable {
  cursor: not-allowed;
  filter: grayscale(0.72);
  opacity: 0.5;
}

.drawer-language-choice.is-unavailable:hover {
  border-color: rgba(255, 255, 255, 0.1);
  transform: none;
}

.drawer-language-choice.is-unavailable:has(input:checked) {
  border-color: rgba(244, 198, 106, 0.5);
  color: var(--muted);
  background: rgba(244, 198, 106, 0.07);
  box-shadow: none;
}

.drawer-language-choice.is-user-declared {
  border-style: dashed;
  border-color: rgba(244, 198, 106, 0.34);
}

.drawer-language-choice.is-user-declared:hover,
.drawer-language-choice.is-user-declared:has(input:checked) {
  border-color: rgba(244, 198, 106, 0.72);
  background: rgba(244, 198, 106, 0.08);
}

.drawer-language-choice.is-user-declared small {
  color: #f4c66a;
}

.drawer-paid-price {
  grid-column: 1 / -1;
}

.drawer-add-quantity {
  padding-top: 2px;
}

.drawer-quantity-stepper {
  display: grid;
  width: min(100%, 280px);
  grid-template-columns: 50px minmax(80px, 1fr) 50px;
  gap: 7px;
}

.drawer-quantity-stepper button {
  min-height: 46px;
  border: 1px solid rgba(98, 230, 200, 0.24);
  border-radius: 11px;
  color: var(--mint);
  background: #0e1929;
  cursor: pointer;
  font-size: 22px;
}

.drawer-quantity-stepper button:first-child {
  border-color: rgba(255, 179, 189, 0.2);
  color: #ffb3bd;
}

.drawer-quantity-stepper button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.drawer-quantity-stepper input {
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.drawer-form-actions {
  grid-template-columns: 1fr;
  margin-top: 2px;
}

.drawer-form-actions .drawer-submit {
  min-height: 50px;
  font-size: 15px;
}

.drawer-variant-warning {
  font-size: 12px;
}

.drawer-copy-details summary {
  padding: 4px 0;
  font-size: 13px;
}

@media (max-width: 1180px) {
  .catalog-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .catalog-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .card-drawer-art {
    min-height: 315px;
    padding: 34px 58px 24px;
  }

  .card-drawer-art .card-visual {
    width: 202px;
  }
}

@media (max-width: 430px) {
  .card-drawer-layout .detail-info {
    padding: 24px 18px 36px;
  }

  .card-drawer-form {
    padding: 16px;
  }

  .drawer-choice-grid {
    grid-template-columns: 1fr;
  }

  .drawer-language-choice small {
    display: none;
  }

  .drawer-language-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .drawer-quantity-stepper {
    width: 100%;
  }
}

@media (max-width: 370px) {
  .catalog-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-drawer-art .card-visual,
  .card-drawer-art .card-visual:hover,
  .drawer-choice,
  .drawer-language-choice {
    animation: none;
    transform: none;
  }

  .card-drawer-art .card-visual::after {
    animation: none;
    opacity: 0.12;
    transform: none;
  }
}
.sidebar-collections{display:grid;gap:3px;margin:2px 10px 10px 34px;padding-left:10px;border-left:1px solid rgba(244,198,106,.18)}
.sidebar-collections button{appearance:none;border:0;background:transparent;color:var(--muted);text-align:left;padding:6px 8px;border-radius:8px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-collections button:hover,.sidebar-collections button:focus-visible{color:var(--text);background:rgba(255,255,255,.05)}
.sidebar-collections button.is-active{color:var(--text);background:rgba(98,230,200,.09);box-shadow:inset 2px 0 0 var(--mint)}
.binder-list-card{display:block;width:100%;color:inherit;text-align:left;cursor:pointer}.binder-list-card h3{margin:8px 0 5px;font-size:1.15rem}.binder-list-card strong{display:block;margin-top:16px;color:var(--mint)}
.master-filters,.binder-page-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px;padding:14px;border:1px solid var(--border);border-radius:16px;background:rgba(15,19,29,.75)}
.master-filters input,.master-filters select,.binder-page-tools select{min-height:40px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);padding:8px 12px}.master-set-card{width:100%;color:inherit;text-align:left;cursor:pointer}.binder-slot{position:relative}.binder-slot-remove{position:absolute;top:5px;right:5px;z-index:3;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(20,13,18,.9);color:#ffb7bd;cursor:pointer}.binder-page-tools button{min-height:38px;border:1px solid var(--border);border-radius:10px;background:var(--surface-raised);color:var(--text);padding:7px 11px;cursor:pointer}.binder-page-tools .danger{color:#ffb7bd}
@media(max-width:760px){.sidebar-collections{display:none}.master-filters>*{width:100%}.binder-page-tools{align-items:stretch}.binder-page-tools label{display:flex;justify-content:space-between;align-items:center}}

/* Protótipo funcional: catálogo local, fila e preços */

.button:disabled,
.button[disabled] {
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.52;
  transform: none;
}

code {
  color: #c9d4e7;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

.compact-button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 9px;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog-notice {
  margin-top: -4px;
}

.load-more-wrap {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 32px 0 4px;
}

.load-more-wrap small {
  color: var(--muted-2);
  font-size: 10px;
}

.sync-safety-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(98, 230, 200, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(100deg, rgba(98, 230, 200, 0.075), transparent 48%),
    rgba(12, 25, 31, 0.72);
}

.safety-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(98, 230, 200, 0.25);
  border-radius: 11px;
  color: var(--mint);
  background: rgba(98, 230, 200, 0.08);
  font-size: 18px;
}

.sync-safety-banner strong {
  display: block;
  font-size: 12px;
}

.sync-safety-banner p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.safety-state {
  padding: 6px 9px;
  border: 1px solid rgba(98, 230, 200, 0.22);
  border-radius: 999px;
  color: #b6f7e8;
  background: rgba(98, 230, 200, 0.07);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sync-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
}

.sync-panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(150deg, rgba(142, 168, 255, 0.035), transparent 34%),
    var(--surface);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.14);
}

.featured-sync-panel {
  border-color: rgba(98, 230, 200, 0.19);
  background:
    radial-gradient(circle at 95% 0%, rgba(98, 230, 200, 0.09), transparent 35%),
    linear-gradient(150deg, rgba(142, 168, 255, 0.04), transparent 38%),
    var(--surface);
}

.worker-status-panel {
  grid-column: 1 / -1;
}

.worker-status-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.worker-status-rules {
  margin-top: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.source-pause-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(244, 198, 106, 0.3);
  border-radius: 13px;
  color: #ffe0a1;
  background: rgba(244, 198, 106, 0.075);
}

.source-pause-alert > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(244, 198, 106, 0.35);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

.source-pause-alert strong {
  display: block;
  font-size: 11px;
}

.source-pause-alert p,
.worker-status-note {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.worker-status-note {
  margin-top: 14px;
}

.sync-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sync-panel-head h2 {
  margin: 8px 0 7px;
  font-size: 18px;
  letter-spacing: -0.025em;
}

.sync-panel-head p {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.sync-state {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sync-state.running {
  border-color: rgba(142, 168, 255, 0.3);
  color: #cad5ff;
  background: rgba(142, 168, 255, 0.09);
}

.sync-state.complete,
.sync-state.success {
  border-color: rgba(98, 230, 200, 0.27);
  color: #b6f7e8;
  background: rgba(98, 230, 200, 0.08);
}

.sync-state.paused {
  border-color: rgba(244, 198, 106, 0.28);
  color: #ffe0a1;
  background: rgba(244, 198, 106, 0.08);
}

.sync-state.error {
  border-color: rgba(255, 123, 138, 0.3);
  color: #ffc1c9;
  background: rgba(255, 123, 138, 0.08);
}

.sync-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
}

.sync-metrics > div {
  min-width: 0;
  padding: 14px;
  background: rgba(9, 16, 27, 0.96);
}

.sync-metrics span,
.sync-rule-grid small,
.sync-next span,
.current-query > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sync-metrics strong {
  display: block;
  overflow: hidden;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-metrics .metric-date {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
  white-space: normal;
}

.sync-progress-block {
  margin-top: 20px;
}

.sync-progress-block > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 9px;
}

.sync-progress-block > div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-progress-block > div strong {
  flex: 0 0 auto;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sync-progress-track {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
}

.sync-progress-track.large {
  height: 9px;
  margin: 14px 0 20px;
}

.sync-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--blue));
  box-shadow: 0 0 18px rgba(98, 230, 200, 0.28);
  transition: width 260ms ease;
}

.sync-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
}

.sync-controls > span {
  flex: 1 1 180px;
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1.45;
}

.sync-run-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}

.sync-run-progress strong {
  display: block;
  font-size: 36px;
  letter-spacing: -0.05em;
  line-height: 1;
}

.sync-run-progress span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
}

.sync-next {
  text-align: right;
}

.sync-next strong {
  color: var(--mint);
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.sync-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.sync-rule-grid > span {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.02);
}

.sync-rule-grid strong {
  display: block;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speed-toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}

.speed-toggle.is-disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.speed-toggle input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  accent-color: var(--mint);
}

.speed-toggle strong,
.speed-toggle small {
  display: block;
}

.speed-toggle strong {
  font-size: 10px;
}

.speed-toggle small {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 8px;
}

.current-query {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(142, 168, 255, 0.17);
  border-radius: 11px;
  background: rgba(142, 168, 255, 0.045);
}

.current-query code {
  display: block;
  overflow: hidden;
  color: #dce4ff;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-queue-section {
  margin-top: 34px;
}

.queue-counter {
  color: var(--muted);
  font-size: 9px;
}

.queue-list {
  display: grid;
  gap: 7px;
}

.queue-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 100px 92px;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(18, 28, 46, 0.76);
}

.queue-item.processing {
  border-color: rgba(142, 168, 255, 0.28);
  background: rgba(142, 168, 255, 0.06);
}

.queue-item.done {
  border-color: rgba(98, 230, 200, 0.14);
}

.queue-index {
  color: var(--muted-2);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.queue-copy {
  min-width: 0;
}

.queue-copy strong,
.queue-copy code {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-copy strong {
  font-size: 10px;
}

.queue-copy code {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 8px;
}

.queue-price {
  text-align: right;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.queue-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
}

.queue-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-2);
}

.queue-item.processing .queue-status {
  color: var(--blue);
}

.queue-item.processing .queue-status i {
  background: var(--blue);
  box-shadow: 0 0 10px rgba(142, 168, 255, 0.6);
  animation: queue-pulse 1.2s ease-in-out infinite;
}

.queue-item.done .queue-status {
  color: var(--mint);
}

.queue-item.done .queue-status i {
  background: var(--mint);
}

@keyframes queue-pulse {
  50% { opacity: 0.35; transform: scale(0.72); }
}

.price-list {
  display: grid;
  gap: 9px;
}

.price-filter-panel {
  display: grid;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.price-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.price-filter-row > span {
  min-width: 58px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.price-status-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.price-status-badge.fresh { color: var(--mint); border-color: rgba(98, 230, 200, 0.24); }
.price-status-badge.stale,
.price-status-badge.stale-refreshing,
.price-status-badge.partial { color: var(--amber); border-color: rgba(244, 198, 106, 0.24); }
.price-status-badge.failed,
.price-status-badge.suspicious { color: #ff8e9c; border-color: rgba(255, 142, 156, 0.25); }
.price-status-badge.no-offers { color: var(--blue); border-color: rgba(142, 168, 255, 0.24); }

.lot-meta {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1.5;
}

.backend-cache-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-2);
  font-size: 8px;
}

.backend-cache-note i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-2);
}

.backend-cache-note.available i { background: var(--mint); }
.backend-cache-note.checking i { background: var(--amber); }

.price-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(190px, 0.65fr) auto;
  align-items: center;
  gap: 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.price-card-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
}

.price-thumb {
  display: block;
  width: 45px;
  flex: 0 0 45px;
}

.price-thumb .card-visual {
  width: 45px;
  margin: 0;
  border-radius: 6px;
}

.price-thumb .card-placeholder {
  display: none;
}

.price-card-identity > span:last-child {
  min-width: 0;
}

.price-card-identity strong,
.price-card-identity small,
.price-reference-copy strong,
.price-reference-copy small {
  display: block;
}

.price-card-identity strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-card-identity small,
.price-reference-copy small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 8px;
}

.price-reference-copy strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.price-reference-copy a {
  display: inline-block;
  margin-top: 5px;
  color: var(--blue);
  font-size: 8px;
  text-decoration: none;
}

.price-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.manual-query-box {
  margin-top: 22px;
  padding: 15px;
  border: 1px solid rgba(142, 168, 255, 0.2);
  border-radius: 12px;
  background: rgba(142, 168, 255, 0.05);
}

.manual-query-box > span {
  display: block;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.manual-query-box code {
  display: block;
  margin: 8px 0 12px;
  color: #e1e7ff;
  font-size: 12px;
  line-height: 1.5;
}

.full-form-label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.full-form-label input {
  width: 100%;
  height: 45px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  color: var(--text);
  background: #111d2f;
}

.form-grid input[readonly] {
  color: var(--muted);
  cursor: default;
}

.form-footnote {
  margin: 14px 0 0;
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1.55;
}

.detail-price-actions {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.detail-loading-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -12px 0 18px;
  color: var(--muted);
  font-size: 9px;
}

.tiny-spinner {
  width: 11px;
  height: 11px;
  border: 2px solid rgba(142, 168, 255, 0.2);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: tiny-spin 800ms linear infinite;
}

@keyframes tiny-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1180px) {
  .sync-layout {
    grid-template-columns: 1fr;
  }

  .worker-status-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-row {
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.7fr);
  }

  .price-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .sync-safety-banner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .safety-state {
    grid-column: 2;
    justify-self: start;
  }

  .sync-panel {
    padding: 20px;
  }

  .sync-panel-head {
    flex-direction: column;
  }

  .sync-metrics {
    grid-template-columns: 1fr;
  }

  .worker-status-rules {
    grid-template-columns: 1fr;
  }

  .sync-metrics > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .sync-metrics span {
    margin: 0;
  }

  .sync-metrics strong {
    text-align: right;
  }

  .sync-rule-grid {
    grid-template-columns: 1fr;
  }

  .queue-item {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .queue-price {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }

  .queue-status {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .price-row {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .price-row-actions {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .sync-safety-banner {
    padding: 14px;
  }

  .sync-run-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .sync-next {
    text-align: left;
  }

  .sync-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .sync-controls .button {
    width: 100%;
  }

  .queue-item {
    padding: 10px;
  }

  .price-row-actions {
    flex-direction: column;
  }

  .price-row-actions .button {
    width: 100%;
  }

  .inline-actions {
    flex-direction: column;
  }

  .inline-actions .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .queue-item.processing .queue-status i,
  .tiny-spinner {
    animation: none;
  }
}

/* Coleções, Master Sets e fichários */

.organizer-price-meta {
  margin: 10px 2px 0 !important;
  color: var(--muted-2) !important;
  font-size: 10px !important;
}

.master-set-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: #101a2a;
  font-size: 10px;
}

.checkbox-field input {
  width: 17px;
  height: 17px;
  margin: 0;
}

.binder-pool > header input {
  width: min(300px, 45vw);
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: #101a2a;
}

.binder-pool-card > small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.binder-slot-actions {
  position: absolute;
  z-index: 8;
  top: 5px;
  right: 5px;
  left: 5px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.binder-slot-actions button {
  width: auto;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  color: #e8cfac;
  background: rgba(20, 13, 18, .9);
  font-size: 8px;
  cursor: pointer;
  pointer-events: auto;
}

.binder-slot-actions .binder-slot-remove {
  position: static;
  padding: 0;
  color: #ffb7bd;
}

.binder-slot.is-back .card-visual {
  filter: saturate(.5) brightness(.58);
  transform: scaleX(-1);
}

@media (max-width: 760px) {
  .master-set-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .binder-pool > header {
    align-items: stretch;
    flex-direction: column;
  }

  .binder-pool > header input {
    width: 100%;
  }
}

/* Master Set compacto e fichário aberto */

.master-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  align-items: start;
}

.master-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(18, 29, 47, .96), rgba(12, 19, 32, .96));
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.master-card:hover,
.master-card:focus-within {
  border-color: rgba(142, 168, 255, .36);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .23);
  transform: translateY(-2px);
}

.master-card-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.master-card .card-visual {
  width: calc(100% - 12px);
  margin: 6px 6px 0;
  border-radius: 9px;
  transition: opacity 180ms ease, filter 180ms ease;
}

.master-card.is-missing .card-visual {
  opacity: .42;
  filter: saturate(.65) brightness(.76);
}

.master-card.is-missing:hover .card-visual,
.master-card.is-missing:focus-within .card-visual {
  opacity: .54;
  filter: saturate(.74) brightness(.82);
}

.master-card-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 8px 8px 0;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(5, 10, 18, .62);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
}

.master-card-state.is-owned {
  border-color: rgba(98, 230, 200, .22);
  color: var(--mint);
  background: rgba(98, 230, 200, .07);
}

.master-card-state.is-missing {
  color: #b4bdcb;
}

.master-card-copy {
  display: block;
  min-width: 0;
  padding: 7px 9px 10px;
}

.master-card-copy strong,
.master-card-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-card-copy strong {
  font-size: 11px;
  line-height: 1.35;
}

.master-card-copy small {
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 8px;
}

.binder-shell {
  position: relative;
  padding: clamp(12px, 1.8vw, 20px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -18%, rgba(202, 154, 98, .18), transparent 40%),
    linear-gradient(145deg, #1b140f, #100d0c 68%);
}

.binder-shell > header {
  align-items: center;
  margin-bottom: 12px;
}

.binder-shell > header h2 {
  font-size: clamp(20px, 2.2vw, 28px);
}

.binder-shell > header p {
  max-width: 68ch;
  color: #a9967e;
}

.binder-pagination {
  flex: 0 0 auto;
}

.binder-pagination button,
.binder-format-buttons button,
.binder-sheet.is-placeholder button {
  min-height: 34px;
  border: 1px solid rgba(232, 207, 172, .18);
  border-radius: 9px;
  color: #e4d3ba;
  background: rgba(255, 255, 255, .045);
  cursor: pointer;
}

.binder-pagination button:disabled,
.binder-page-tools button:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.binder-page-tools {
  gap: 7px;
  margin-bottom: 10px;
  padding: 9px;
  border-color: rgba(232, 207, 172, .14);
  background: rgba(7, 7, 9, .38);
}

.binder-page-tools label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #b6a489;
  font-size: 9px;
}

.binder-format-buttons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.binder-format-buttons > span {
  margin-right: 3px;
  color: #b6a489;
  font-size: 9px;
}

.binder-format-buttons button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 9px;
}

.binder-format-buttons button.is-active {
  border-color: rgba(98, 230, 200, .5);
  color: var(--mint);
  background: rgba(98, 230, 200, .1);
}

.binder-spread {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px;
  border: 1px solid rgba(232, 207, 172, .16);
  border-radius: 17px;
  background: #0d0b0b;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .32), inset 0 0 32px rgba(0, 0, 0, .4);
  isolation: isolate;
}

.binder-spread::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 12px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .65), rgba(255, 255, 255, .035) 48%, rgba(0, 0, 0, .72));
  box-shadow: 0 0 14px rgba(0, 0, 0, .82);
  transform: translateX(-50%);
}

.binder-sheet {
  position: relative;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(232, 207, 172, .14);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .03), transparent 12%),
    linear-gradient(145deg, #241b15, #14100e 62%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .3);
}

.binder-sheet:first-child {
  border-radius: 12px 4px 4px 12px;
}

.binder-sheet:last-child {
  border-radius: 4px 12px 12px 4px;
}

.binder-sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 7px;
  color: #d8c6ad;
  font-size: 9px;
}

.binder-sheet > header small {
  overflow: hidden;
  color: #8e806e;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.binder-sheet.is-placeholder {
  display: grid;
  min-height: 280px;
  place-items: center;
  border-style: dashed;
  color: #a9967e;
  text-align: center;
}

.binder-sheet.is-placeholder > div {
  display: grid;
  max-width: 210px;
  gap: 7px;
  justify-items: center;
}

.binder-sheet.is-placeholder strong,
.binder-sheet.is-placeholder span {
  display: block;
}

.binder-sheet.is-placeholder span {
  color: #776b5c;
  font-size: 9px;
  line-height: 1.5;
}

.binder-sheet.is-placeholder button {
  padding: 7px 10px;
  font-size: 9px;
}

.binder-sheet .binder-page {
  display: grid;
  grid-template-columns: repeat(var(--binder-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--binder-rows), auto);
  --michi-art-grid-gap: clamp(4px, .65vw, 8px);
  --michi-art-gap: calc(var(--michi-art-grid-gap) + 2px);
  gap: var(--michi-art-grid-gap);
  margin: 0;
  padding: clamp(5px, .7vw, 8px);
  border-radius: 11px;
  background: rgba(4, 4, 5, .32);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .32);
}

.binder-sheet .binder-slot {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 63 / 88;
  overflow: hidden;
  border: 1px solid rgba(232, 207, 172, .16);
  border-radius: clamp(5px, .55vw, 8px);
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .18));
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .3);
}

.binder-sheet .binder-slot::after {
  inset: 3px;
  border-radius: max(3px, calc(.55vw - 2px));
}

.binder-slot-card {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.binder-slot-card .card-visual {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: max(3px, calc(.55vw - 2px));
  transition: opacity 180ms ease, filter 180ms ease;
}

.binder-slot.is-wanted .binder-slot-card .card-visual,
.binder-slot.is-missing .binder-slot-card .card-visual {
  opacity: .42;
  filter: saturate(.62) brightness(.72);
}

.binder-slot.is-wanted:hover .binder-slot-card .card-visual,
.binder-slot.is-wanted:focus-within .binder-slot-card .card-visual,
.binder-slot.is-missing:hover .binder-slot-card .card-visual,
.binder-slot.is-missing:focus-within .binder-slot-card .card-visual {
  opacity: .55;
  filter: saturate(.72) brightness(.79);
}

.binder-slot .binder-slot-state {
  position: absolute;
  z-index: 6;
  top: 5px;
  left: 5px;
  max-width: calc(100% - 10px);
  padding: 3px 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: #d3d9e3;
  background: rgba(5, 8, 13, .82);
  font-size: clamp(6px, .55vw, 8px);
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.binder-slot .binder-slot-state.is-owned {
  border-color: rgba(98, 230, 200, .33);
  color: var(--mint);
}

.binder-slot .binder-slot-state.is-wanted {
  border-color: rgba(244, 198, 106, .33);
  color: var(--amber);
}

.binder-slot .binder-slot-name {
  position: absolute;
  z-index: 5;
  right: 4px;
  bottom: 4px;
  left: 4px;
  padding: 3px 4px;
  overflow: hidden;
  border-radius: 5px;
  color: white;
  background: rgba(5, 8, 12, .78);
  font-size: clamp(6px, .55vw, 8px);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.binder-slot .binder-slot-actions {
  z-index: 9;
  top: auto;
  right: 4px;
  bottom: 24px;
  left: 4px;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 150ms ease;
}

.binder-slot:hover .binder-slot-actions,
.binder-slot:focus-within .binder-slot-actions {
  opacity: 1;
}

.binder-slot .binder-slot-actions button {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  font-size: 10px;
}

.binder-slot-empty {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 8px;
  border: 0;
  place-content: center;
  place-items: center;
  gap: 5px;
  color: rgba(232, 207, 172, .46);
  background: transparent;
  cursor: pointer;
}

.binder-slot-empty strong {
  font-size: clamp(7px, .65vw, 9px);
  font-weight: 650;
}

.binder-slot-empty span {
  font-size: clamp(15px, 1.5vw, 22px);
  line-height: 1;
}

.binder-slot-empty:hover,
.binder-slot-empty:focus-visible {
  color: var(--mint);
  background: rgba(98, 230, 200, .045);
}

.binder-hint {
  margin: 10px 0 0;
}

/* Escolha explícita de formato no formulário */

.binder-format-field {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.binder-format-field > legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.binder-format-field > legend small {
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 500;
}

.binder-format-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.binder-format-option {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  gap: 5px;
  color: var(--muted);
  background: #101a2a;
  cursor: pointer;
}

.binder-format-option:has(input:checked) {
  border-color: rgba(98, 230, 200, .48);
  box-shadow: 0 0 0 2px rgba(98, 230, 200, .08);
  color: var(--text);
}

.binder-format-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.binder-format-option:has(input:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.binder-format-option strong {
  font-size: 10px;
}

.binder-format-option small {
  color: var(--muted-2);
  font-size: 7px;
}

.binder-format-preview {
  display: grid;
  grid-template-columns: repeat(var(--preview-columns), 1fr);
  grid-template-rows: repeat(var(--preview-rows), 1fr);
  width: 100%;
  max-width: 62px;
  aspect-ratio: 4 / 3;
  gap: 2px;
  padding: 4px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .24);
}

.binder-format-preview i {
  min-width: 0;
  border: 1px solid rgba(232, 207, 172, .28);
  border-radius: 2px;
  background: rgba(232, 207, 172, .08);
}

/* Modal do slot: apenas coleção ou desejos */

.binder-picker-dialog {
  width: min(900px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 32px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  color: var(--text);
  background: #0c1421;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .62);
}

.binder-picker-dialog::backdrop {
  background: rgba(2, 6, 12, .78);
  backdrop-filter: blur(8px);
}

.binder-picker-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 14px;
}

.binder-picker-heading h2 {
  margin: 5px 0 4px;
  font: 500 clamp(24px, 3vw, 34px) / 1 Georgia, serif;
}

.binder-picker-heading p {
  margin: 0;
  color: var(--muted-2);
  font-size: 9px;
}

.binder-picker-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 22px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, .2);
}

.binder-picker-tabs button[hidden] {
  display: none;
}

.binder-picker-tabs button {
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.binder-picker-tabs button[aria-selected="true"] {
  color: #07130f;
  background: var(--mint);
  box-shadow: 0 7px 18px rgba(98, 230, 200, .16);
}

.binder-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 22px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted-2);
  background: #101a2a;
}

.binder-picker-search:focus-within {
  border-color: rgba(142, 168, 255, .5);
  box-shadow: 0 0 0 3px rgba(142, 168, 255, .08);
}

.binder-picker-search input {
  width: 100%;
  min-height: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
}

.binder-picker-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 240px;
  max-height: min(470px, calc(100vh - 300px));
  padding: 0 22px 12px;
  overflow: auto;
  overscroll-behavior: contain;
}

.binder-picker-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 90px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  background: rgba(17, 27, 44, .82);
  cursor: pointer;
  text-align: left;
}

.binder-picker-card:hover:not(:disabled),
.binder-picker-card:focus-visible {
  border-color: rgba(98, 230, 200, .42);
  background: rgba(24, 39, 61, .96);
}

.binder-picker-card:disabled,
.binder-picker-card.is-unavailable {
  cursor: not-allowed;
  opacity: .52;
}

.binder-picker-visual-state {
  max-width: 110px;
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1.35;
}

.binder-picker-card .card-visual {
  width: 58px;
  height: auto;
  margin: 0;
  border-radius: 6px;
}

.binder-picker-card-copy {
  display: block;
  min-width: 0;
}

.binder-picker-card-copy strong,
.binder-picker-card-copy small,
.binder-picker-card-copy em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.binder-picker-card-copy strong {
  font-size: 10px;
}

.binder-picker-card-copy small {
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 7px;
}

.binder-picker-card-copy em {
  margin-top: 5px;
  color: #c8d2df;
  font-size: 8px;
  font-style: normal;
}

.binder-picker-card-action {
  max-width: 82px;
  color: var(--mint);
  font-size: 7px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
  text-transform: uppercase;
}

.binder-picker-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 220px;
  place-content: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

.binder-picker-empty span {
  color: var(--muted-2);
  font-size: 9px;
}

.binder-picker-note {
  margin: 0;
  padding: 11px 22px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .master-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
  }

  .binder-shell {
    padding: 11px;
  }

  .binder-sheet {
    padding: 6px;
  }

  .binder-sheet .binder-page {
    --michi-art-grid-gap: 4px;
    gap: 4px;
    padding: 4px;
  }

  .binder-slot .binder-slot-actions {
    opacity: 1;
  }

  .binder-slot .binder-slot-actions button {
    min-width: 21px;
    height: 21px;
  }

  .binder-picker-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .master-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .master-card-copy {
    padding: 6px 7px 8px;
  }

  .master-card-state {
    margin: 6px 6px 0;
    font-size: 7px;
  }

  .binder-shell > header,
  .binder-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .binder-pagination {
    justify-content: space-between;
  }

  .binder-page-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .binder-page-tools > *,
  .binder-page-tools label,
  .binder-format-buttons {
    width: 100%;
  }

  .binder-format-buttons {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto repeat(4, minmax(0, 1fr));
  }

  .binder-spread {
    grid-template-columns: 1fr;
    max-width: 540px;
    padding: 6px;
  }

  .binder-spread::before {
    display: none;
  }

  .binder-spread > .binder-sheet:nth-child(2) {
    display: none;
  }

  .binder-sheet:first-child {
    border-radius: 11px;
  }

  .binder-sheet .binder-page {
    --michi-art-grid-gap: 6px;
    gap: 6px;
    padding: 6px;
  }

  .binder-format-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .binder-picker-dialog {
    width: 100vw;
    max-width: none;
    max-height: calc(100vh - 10px);
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }

  .binder-picker-heading {
    padding: 17px 16px 12px;
  }

  .binder-picker-tabs,
  .binder-picker-search {
    margin-right: 16px;
    margin-left: 16px;
  }

  .binder-picker-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .binder-picker-tabs button {
    min-height: 46px;
    padding: 7px 8px;
    font-size: 9px;
  }

  .binder-picker-results {
    max-height: calc(100vh - 290px);
    padding-right: 16px;
    padding-left: 16px;
  }

  .binder-picker-card {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 82px;
  }

  .binder-picker-card .card-visual {
    width: 52px;
  }

  .binder-picker-card-action {
    grid-column: 2;
    max-width: none;
    text-align: left;
  }

  .binder-picker-note {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (max-width: 430px) {
  .master-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .binder-sheet .binder-page {
    --michi-art-grid-gap: 3px;
    gap: 3px;
    padding: 3px;
  }

  .binder-slot .binder-slot-state {
    top: 3px;
    left: 3px;
    max-width: calc(100% - 6px);
    padding: 2px 3px;
  }

  .binder-slot .binder-slot-name {
    right: 3px;
    bottom: 3px;
    left: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .master-card,
  .master-card .card-visual,
  .binder-slot-card .card-visual,
  .binder-slot .binder-slot-actions {
    transition: none;
  }

  .binder-picker-skeleton i {
    animation: none;
  }
}

/* Camada final para o novo artigo do seletor (depois dos estilos legados). */
.binder-picker-card {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 96px;
  cursor: default;
}

.binder-picker-card-info {
  grid-template-columns: 58px minmax(0, 1fr);
}

@media (max-width: 720px) {
  .binder-picker-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .binder-picker-card-info {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .binder-picker-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

/* Camada final dos Complete/Master Sets; deve permanecer após os estilos legados. */
.set-language-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: rgba(12, 20, 32, 0.72);
}
.set-language-tabs > button { display: flex; min-width: 0; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 7px 10px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; }
.set-language-tabs > button:hover,.set-language-tabs > button:focus-visible { border-color: rgba(98, 230, 200, .28); color: var(--text); }
.set-language-tabs > button.is-active { border-color: rgba(98, 230, 200, .48); color: var(--text); background: rgba(98, 230, 200, .12); box-shadow: 0 8px 20px rgba(34, 203, 174, .08); }
.set-language-tabs > button > span:last-child { display: grid; min-width: 0; gap: 1px; text-align: left; }
.set-language-tabs strong { font-size: 12px; }
.set-language-tabs small { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.set-language-tab-flag { display: block; width: 30px; aspect-ratio: 3 / 2; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; background: #fff; }
.set-language-tab-flag svg { display: block; width: 100%; height: 100%; }
.set-market-badge { align-self: flex-start; margin: 1px 0 2px; padding: 3px 7px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; color: var(--muted); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.set-market-badge.is-exclusive { border-color: rgba(244, 198, 106, .35); color: #f4c66a; background: rgba(244, 198, 106, .07); }
.set-market-badge.is-unavailable { border-style: dashed; border-color: rgba(255, 255, 255, .18); color: var(--muted); background: rgba(255, 255, 255, .035); }
.set-market-badge.is-fallback { border-color: rgba(98, 230, 200, .35); color: var(--accent); background: rgba(98, 230, 200, .08); }
.master-checklist-fallback-note { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; padding: 10px 12px; border: 1px solid rgba(98, 230, 200, .2); border-radius: 11px; color: var(--muted); background: rgba(98, 230, 200, .05); font-size: 9px; line-height: 1.45; }
.master-checklist-fallback-note .set-market-badge { flex: 0 0 auto; margin: 0; }
.master-set-card.is-metadata-only .master-set-progress { opacity: .56; }
.master-set-list { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.master-set-card { display: grid; min-width: 0; min-height: 390px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 190px minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; overflow: hidden; text-align: left; }
.master-set-card .master-set-art { width: 100%; height: 190px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; }
.master-set-card .master-set-art > img:not(.master-set-symbol) { inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); object-fit: contain; }
.master-set-card .master-set-art > .master-set-symbol { right: 11px; bottom: 11px; width: 34px; height: 34px; padding: 5px; }
.master-set-card .master-set-art.has-no-logo > .master-set-symbol,
.master-set-card .master-set-art.logo-failed > .master-set-symbol { inset: 34px; width: calc(100% - 68px); height: calc(100% - 68px); padding: 10px; border-radius: 14px; background: rgba(5, 10, 18, .5); }
.master-set-card .master-set-art.logo-failed > [data-set-image-role="primary"] { display: none; }
.master-set-card-copy { display: flex; min-width: 0; padding: 17px 18px 18px; flex-direction: column; }
.master-set-card-copy h2 { display: -webkit-box; min-height: 44px; margin: 6px 0 7px; overflow: hidden; font-size: 21px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.master-set-progress { position: relative; display: grid; height: 54px; align-items: center; margin-top: auto; padding: 0 23px; }
.master-set-progress .coverage-track { width: 100%; height: 8px; margin: 0; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.master-set-card .master-set-progress .master-set-orbit { position: absolute; z-index: 2; left: 50%; width: 48px; height: 48px; transform: translateX(-50%); }
.master-card-grid, .master-card-grid.is-variant-mode { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 1540px) {
  .master-set-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .master-card-grid, .master-card-grid.is-variant-mode { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1360px) {
  .master-card-grid, .master-card-grid.is-variant-mode { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .master-set-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .master-card-grid, .master-card-grid.is-variant-mode { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .master-card-grid, .master-card-grid.is-variant-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .set-language-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .master-set-list { grid-template-columns: 1fr; }
  .master-card-grid, .master-card-grid.is-variant-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 370px) {
  .master-card-grid, .master-card-grid.is-variant-mode { grid-template-columns: 1fr; }
}

/* No agrupamento, a arte identifica a carta e cada modelo físico possui seu próprio controle. */
.master-card-grid.is-grouped-mode {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.master-grouped-card {
  display: grid;
  grid-template-columns: minmax(150px, .94fr) minmax(0, 1.06fr);
  align-self: stretch;
  min-height: 0;
}

.master-grouped-visual {
  min-width: 0;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(21, 34, 54, .94), rgba(12, 20, 33, .92));
}

.master-grouped-card .master-card-open {
  display: flex;
  height: 100%;
  min-height: 100%;
  flex-direction: column;
}

.master-grouped-card .master-card-open .card-visual {
  width: calc(100% - 12px);
  margin: 6px 6px 0;
}

.master-grouped-card .master-card-copy {
  margin-top: auto;
}

.master-grouped-card .master-card-state {
  align-self: flex-start;
  max-width: calc(100% - 16px);
  white-space: normal;
}

.master-grouped-variants {
  display: flex;
  min-width: 0;
  padding: 6px;
  flex-direction: column;
  gap: 4px;
}

.master-grouped-variant {
  display: grid;
  min-width: 0;
  padding: 3px 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(5, 10, 18, .5);
}

.master-grouped-variant.is-owned {
  border-color: rgba(98, 230, 200, .26);
  background: rgba(98, 230, 200, .055);
}

.master-grouped-variant-open {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  gap: 1px;
  padding: 0 1px 2px;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.master-grouped-variant-open strong,
.master-grouped-variant-open small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-grouped-variant-open strong {
  overflow: visible;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.master-grouped-variant-open small {
  color: var(--muted-2);
  font-size: 7.5px;
}

.master-grouped-variant.is-missing .master-grouped-variant-open small {
  display: none;
}

.master-grouped-variant.is-owned .master-grouped-variant-open small {
  color: var(--mint);
}

.master-grouped-variant .card-quantity-stepper {
  grid-template-columns: 22px minmax(32px, 1fr) 22px;
  min-height: 24px;
  margin: 0;
  padding: 2px;
}

.master-grouped-variant .card-quantity-stepper button,
.master-grouped-variant .card-quantity-stepper input {
  height: 22px;
  font-size: 10px;
}

.master-grouped-variant .card-quantity-stepper button {
  font-size: 14px;
}

.master-grouped-variant-empty {
  display: grid;
  min-height: 104px;
  place-content: center;
  gap: 4px;
  padding: 12px;
  border: 1px dashed rgba(244, 198, 106, .24);
  border-radius: 10px;
  color: var(--amber);
}

.master-grouped-variant-empty strong {
  font-size: 10px;
}

.master-grouped-variant-empty small {
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1.45;
}

.master-variant-card .master-card-open {
  text-align: center;
}

.master-variant-card .master-card-state {
  margin-right: auto;
  margin-left: auto;
}

.master-variant-card-copy {
  text-align: center;
}

.master-variant-card-copy strong {
  font-size: 12px;
}

.master-variant-card-copy .master-variant-model {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
}

.master-variant-card-copy .master-variant-number,
.master-variant-card-copy .master-variant-data-state {
  text-align: center;
}

.collection-model-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(12, 20, 33, .78);
}

.collection-model-toolbar > span {
  color: var(--muted-2);
  font-size: 9px;
  text-align: right;
}

.collection-model-card .card-open,
.collection-model-card-copy {
  text-align: center;
}

.collection-model-card-copy .collection-model-name,
.collection-model-card-copy .collection-model-languages {
  display: block;
  text-align: center;
}

.collection-model-card-copy .collection-model-name {
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}

.collection-model-card-copy .collection-model-languages {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}

@media (max-width: 720px) {
  .collection-model-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .collection-mode-switch {
    width: 100%;
  }

  .collection-mode-switch button {
    flex: 1 1 50%;
  }

  .collection-model-toolbar > span {
    text-align: left;
  }
}

@media (max-width: 1540px) {
  .master-card-grid.is-grouped-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .master-card-grid.is-grouped-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .master-card-grid.is-grouped-mode { grid-template-columns: 1fr; }
  .master-grouped-card { grid-template-columns: minmax(136px, .9fr) minmax(0, 1.1fr); }
}

/* Fichários v5: criação essencial, abertura física e seletor centrado na arte. */
#organizer-dialog:has(#organizer-kind[value="binder"]) { width:min(820px,calc(100vw - 32px));max-height:min(900px,calc(100vh - 32px)); }
#organizer-form .organizer-name-field{order:1}#organizer-form .binder-template-field{order:2}#organizer-form #organizer-collection-field{order:3}#organizer-form .binder-format-field,#organizer-form .binder-fixed-format{order:4}
.binder-template-field{padding:16px;border-color:rgba(98,230,200,.16);background:linear-gradient(145deg,rgba(16,27,44,.92),rgba(8,15,26,.9))}
.binder-template-field>legend,.binder-format-field>legend{font-size:12px}.binder-template-options label,.binder-format-option{min-height:92px;padding:13px;align-content:start}.binder-template-options strong,.binder-format-option strong{font-size:12px}.binder-template-options small,.binder-format-option small{font-size:9px;line-height:1.4}
.binder-template-config{grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr);align-items:end;margin-top:14px}.binder-template-guidance{margin:0;color:var(--muted-2);font-size:10px;line-height:1.55}.binder-template-preview[hidden],.binder-template-config[hidden]{display:none}
.binder-shell{padding:clamp(10px,1.3vw,16px)}.binder-shell>header{margin-bottom:8px}.binder-stage{grid-template-columns:52px minmax(0,1fr) 52px;gap:7px}
.binder-stage.is-open .binder-spread,.binder-stage.is-cover .binder-spread{max-width:min(1280px,calc(100vw - 390px));max-height:calc(100vh - 205px)}.binder-stage.is-cover .binder-spread{grid-template-columns:repeat(2,minmax(0,1fr))}.binder-stage.is-cover .binder-spread::before{display:block}
.binder-inside-cover{display:grid;min-height:390px;place-items:center;align-content:center;gap:16px;background:radial-gradient(circle at 72% 48%,rgba(202,154,98,.1),transparent 30%),linear-gradient(105deg,#17100c,#251a13 76%,#100c0a)}
.binder-inside-cover>div{display:grid;width:min(58%,260px);aspect-ratio:4/3;place-items:center;border:1px solid rgba(232,207,172,.1);border-radius:18px;color:rgba(232,207,172,.2);box-shadow:inset 0 0 50px rgba(0,0,0,.35);text-transform:uppercase;letter-spacing:.16em}.binder-inside-cover p{margin:0;color:rgba(232,207,172,.28);font-size:10px}
.binder-sheet>header strong{overflow:hidden;color:#ead8bd;font-size:clamp(10px,.8vw,13px);text-overflow:ellipsis;white-space:nowrap}.binder-stage .binder-page{max-height:calc(100vh - 275px)}
.binder-slot.is-wanted .binder-slot-card .card-visual,.binder-slot.is-missing .binder-slot-card .card-visual{opacity:.7;filter:saturate(.78) brightness(.82)}.binder-slot .binder-slot-actions{right:5px;bottom:24px;left:auto;justify-content:flex-end}
.binder-picker-dialog{width:min(1120px,calc(100vw - 32px))}.binder-picker-dialog::backdrop{background:rgba(2,6,12,.62);backdrop-filter:blur(4px)}
.binder-picker-results{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;max-height:min(570px,calc(100vh - 275px));padding:2px 22px 16px}.binder-picker-card{display:block;min-width:0;min-height:0;padding:5px;border-radius:12px;background:rgba(17,27,44,.72);cursor:pointer}.binder-picker-card .card-visual{width:100%;height:auto;margin:0;aspect-ratio:63/88;border-radius:8px}.binder-picker-card.is-unavailable{opacity:.32}.binder-picker-card .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.binder-picker-results>.virtual-list-spacer,.binder-picker-results>.binder-picker-more,.binder-picker-results>.binder-picker-loading,.binder-picker-results>.binder-picker-error,.binder-picker-results>.binder-picker-empty{grid-column:1/-1}
.binder-picker-more [data-binder-picker-remote-sentinel]{display:block;width:100%;height:1px}
@media(max-width:1100px){.binder-stage.is-open .binder-spread,.binder-stage.is-cover .binder-spread{max-width:100%}.binder-picker-results{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:720px){.binder-template-options,.binder-format-options{grid-template-columns:repeat(2,minmax(0,1fr))}.binder-template-config{grid-template-columns:1fr}.binder-picker-results{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.binder-picker-card{display:block}}
/* Spec 009 · fichários, capas visuais e comunidade */
.binder-slot-name{display:none!important}
.binder-slot .binder-slot-actions{top:5px!important;right:5px!important;bottom:auto!important;left:auto!important;display:flex!important;flex-direction:column!important;gap:5px!important;opacity:0;transform:translateY(-3px);transition:opacity .18s ease,transform .18s ease}
.binder-slot:hover .binder-slot-actions,.binder-slot:focus-within .binder-slot-actions{opacity:1;transform:none}
.binder-slot .binder-slot-actions button{width:28px!important;height:28px!important;min-width:28px!important;border-radius:9px!important;background:rgba(6,12,22,.9)!important;border:1px solid rgba(207,221,255,.28)!important;color:#eef4ff!important;font-size:14px!important;font-weight:800!important;backdrop-filter:blur(8px)}
.binder-slot .binder-slot-actions .binder-slot-info{order:0;color:#6de9d2!important}
.binder-slot .binder-slot-actions .binder-slot-remove{order:1;color:#ffb0bd!important}
.binder-slot-card .card-visual{height:100%;width:100%}
.binder-slot-card .card-visual img{height:100%;width:100%;object-fit:fill}

.binder-slot-drawer-context{margin:18px 0;padding:16px;border:1px solid rgba(95,226,201,.26);border-radius:16px;background:linear-gradient(145deg,rgba(20,42,55,.72),rgba(12,23,39,.9))}
.binder-slot-drawer-heading{display:grid;gap:4px;margin-bottom:13px}.binder-slot-drawer-heading strong{font-size:15px}
.binder-slot-drawer-context dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.binder-slot-drawer-context dl div{padding:10px;border:1px solid rgba(160,183,218,.14);border-radius:11px;background:rgba(5,11,21,.42)}
.binder-slot-drawer-context dt{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8fa1bb}.binder-slot-drawer-context dd{margin:4px 0 0;font-weight:700;color:#f3f7ff}
.binder-slot-drawer-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}

.organization-visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.organization-visual-card{min-width:0;overflow:hidden;border:1px solid rgba(139,166,204,.2);border-radius:20px;background:linear-gradient(150deg,rgba(19,33,53,.97),rgba(10,18,31,.98));box-shadow:0 18px 42px rgba(0,0,0,.2)}
.organization-cover-button{position:relative;display:block;width:100%;height:250px;padding:0;overflow:hidden;border:0;border-bottom:1px solid rgba(139,166,204,.18);border-radius:0;background:radial-gradient(circle at 35% 24%,rgba(94,226,201,.17),transparent 38%),#0b1423;cursor:pointer}
.organization-cover-art{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden}.organization-cover-art .card-visual{height:92%;width:auto;aspect-ratio:63/88;filter:drop-shadow(0 14px 18px rgba(0,0,0,.42));transition:transform .25s ease}.organization-cover-button:hover .card-visual{transform:translateY(-3px) scale(1.025)}
.organization-cover-art .card-visual img{width:100%;height:100%;object-fit:contain}.organization-cover-art.is-empty{flex-direction:column;gap:8px;color:#8294ae}.organization-cover-art.is-empty i{font-size:42px}.organization-cover-art.is-empty small{font-size:12px}
.organization-visibility{position:absolute;top:13px;right:13px;padding:7px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(5,11,20,.84);color:#e9f2ff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.organization-visibility.is-public{color:#62e3ca}.organization-visibility.is-friends{color:#c4b5ff}
.organization-card-body{display:grid;gap:10px;padding:18px}.organization-card-body h2,.organization-card-body h3{margin:0;color:#f5f8ff;font-size:23px}.organization-card-body>p{min-height:38px;margin:0;color:#9cabc1;line-height:1.45}
.organization-card-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid rgba(139,166,204,.15);border-radius:12px}.collection-visual-card .organization-card-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.organization-card-stats span{display:grid;gap:3px;padding:10px 8px;border-right:1px solid rgba(139,166,204,.12);text-align:center}.organization-card-stats span:last-child{border-right:0}.organization-card-stats strong{font-size:14px;color:#f2f6ff}.organization-card-stats small{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#788aa5}
.organization-card-actions{display:flex;flex-wrap:wrap;gap:8px}.organization-card-actions button{min-height:36px;padding:7px 11px;border:1px solid rgba(139,166,204,.23);border-radius:10px;background:#111d30;color:#dce7f7;cursor:pointer}.organization-card-actions .danger{color:#ff9cac;border-color:rgba(255,100,125,.25)}

.organizer-cover-field{position:relative;grid-column:1/-1}.organizer-cover-selected{display:flex;align-items:center;gap:10px;min-height:54px;margin-top:8px;padding:8px 10px;border:1px solid rgba(139,166,204,.22);border-radius:12px;background:#0c1728;color:#a9b8cc}.organizer-cover-selected>button{margin-left:auto;border:0;background:transparent;color:#ff9cac;font-size:20px}.organizer-cover-mini{width:34px;height:47px;flex:none}.organizer-cover-mini .card-visual,.organizer-cover-mini img{width:100%;height:100%;object-fit:contain}
.organizer-cover-results{position:absolute;z-index:20;top:100%;right:0;left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:280px;padding:8px;overflow:auto;border:1px solid rgba(139,166,204,.28);border-radius:14px;background:#091321;box-shadow:0 20px 40px rgba(0,0,0,.45)}.organizer-cover-results[hidden]{display:none}.organizer-cover-results>button{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;gap:2px 9px;align-items:center;padding:7px;border:1px solid transparent;border-radius:10px;background:#101d30;color:#edf4ff;text-align:left}.organizer-cover-results>button:hover{border-color:#5fe2c9}.organizer-cover-results>button>span{grid-row:1/3;width:38px;height:53px}.organizer-cover-results .card-visual,.organizer-cover-results img{width:100%;height:100%;object-fit:contain}.organizer-cover-results small{color:#8d9db4}.organizer-cover-empty{padding:16px;color:#8d9db4}

.wishlist-card .collection-count{color:#6de9d2}.wishlist-card .wishlist-source-counts{font-size:11px;color:#aab9ce}

.community-profile-panel,.community-section{margin:18px 0;padding:20px;border:1px solid rgba(139,166,204,.2);border-radius:18px;background:linear-gradient(145deg,rgba(18,32,52,.94),rgba(9,17,30,.96))}.community-profile-panel{display:grid;grid-template-columns:minmax(240px,1fr) minmax(360px,1.3fr);gap:22px;align-items:end}.community-profile-panel h2{margin:5px 0 8px;font-size:25px}.community-profile-panel p{margin:0;color:#95a6bd}.community-profile-form,.community-filter-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:10px;align-items:end}.community-profile-form label,.community-filter-bar label{display:grid;gap:6px;color:#a8b6ca;font-size:12px}.community-profile-form select,.community-filter-bar input{width:100%;min-height:44px;border:1px solid rgba(139,166,204,.23);border-radius:11px;background:#0b1627;color:#eef4ff;padding:0 12px}.community-filter-bar{margin:18px 0;padding:14px;border:1px solid rgba(139,166,204,.17);border-radius:16px;background:rgba(10,19,33,.8)}
.community-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:180px;color:#9aabc1}.trade-discovery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.trade-discovery-card{display:grid;grid-template-columns:145px 1fr;min-height:210px;overflow:hidden;border:1px solid rgba(139,166,204,.2);border-radius:18px;background:#101d30}.trade-discovery-card>.organization-cover-art{min-height:210px;border-right:1px solid rgba(139,166,204,.15);background:#0a1422}.trade-discovery-card>.organization-cover-art .card-visual{height:88%;max-width:125px}.trade-discovery-card>div{display:grid;align-content:center;gap:8px;padding:16px}.trade-discovery-card h3{margin:0;font-size:21px}.trade-discovery-card p{margin:0;color:#9baac0}.trade-card-meta{display:flex;gap:12px;color:#aebdd0;font-size:12px}
.community-card-actions{display:flex;flex-wrap:wrap;gap:7px}.community-card-actions button{min-height:34px;padding:6px 10px;border:1px solid rgba(139,166,204,.23);border-radius:9px;background:#111f34;color:#dce7f8;cursor:pointer}.community-card-actions .danger{color:#ff9cac}
.people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.person-card{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px;border:1px solid rgba(139,166,204,.17);border-radius:14px;background:#0d192b}.person-avatar{display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(94,226,201,.35);border-radius:50%;background:#172a43;color:#6ee4cd;font-weight:900}.person-card>div:nth-child(2){display:grid;gap:3px}.person-card small{color:#8799b2}.person-card .community-card-actions{grid-column:1/-1}
.chat-layout{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:620px;overflow:hidden;border:1px solid rgba(139,166,204,.2);border-radius:20px;background:#0a1423}.conversation-list{overflow:auto;border-right:1px solid rgba(139,166,204,.16);background:#0b1626}.conversation-row{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:14px;border:0;border-bottom:1px solid rgba(139,166,204,.1);background:transparent;color:#edf4ff;text-align:left;cursor:pointer}.conversation-row:hover,.conversation-row.is-active{background:rgba(77,208,185,.1)}.conversation-row>span:nth-child(2){display:grid;gap:4px;min-width:0}.conversation-row small{overflow:hidden;color:#8698b0;text-overflow:ellipsis;white-space:nowrap}.conversation-row>b{display:grid;min-width:22px;height:22px;place-items:center;border-radius:999px;background:#62e2ca;color:#07111d;font-size:11px}.chat-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0}.chat-panel>header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 18px;border-bottom:1px solid rgba(139,166,204,.14)}.chat-panel>header>div{display:flex;gap:8px;align-items:center}.chat-panel>header>div:first-child{display:grid}.chat-panel>header small{color:#889ab2}.chat-panel>header button{padding:7px 9px;border:1px solid rgba(139,166,204,.2);border-radius:9px;background:#111e31;color:#dce8f7}.message-list{display:flex;flex-direction:column;gap:9px;padding:18px;overflow:auto}.chat-message{align-self:flex-start;max-width:min(72%,620px);padding:10px 12px;border:1px solid rgba(139,166,204,.18);border-radius:4px 14px 14px;background:#15243a}.chat-message.is-mine{align-self:flex-end;border-color:rgba(91,226,201,.28);border-radius:14px 4px 14px 14px;background:#16362f}.chat-message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.chat-message time{display:block;margin-top:5px;color:#8293aa;font-size:9px;text-align:right}.chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px;border-top:1px solid rgba(139,166,204,.14)}.chat-compose textarea{resize:none;border:1px solid rgba(139,166,204,.23);border-radius:12px;background:#0c1829;color:#f0f5fc;padding:10px 12px}.chat-empty{display:grid;grid-row:1/-1;place-content:center;justify-items:center;text-align:center;color:#92a3ba}.chat-empty>span{font-size:42px;color:#61e3ca}.community-safety-copy{padding:16px;border:1px solid rgba(255,199,104,.25);border-radius:14px;background:rgba(83,57,16,.22);color:#e9edf5;line-height:1.65}.community-safety-confirm{margin-top:16px}

@media(max-width:1180px){.organization-visual-grid,.trade-discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.community-profile-panel{grid-template-columns:1fr}.trade-discovery-card{grid-template-columns:125px 1fr}.chat-layout{grid-template-columns:260px minmax(0,1fr)}}
@media(max-width:760px){.binder-slot .binder-slot-actions{opacity:1;transform:none}.organization-visual-grid,.binder-card-grid,.collections-grid,.trade-discovery-grid,.people-grid{grid-template-columns:1fr}.organization-cover-button{height:220px}.organization-card-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-visual-card .organization-card-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.community-profile-panel,.community-section{padding:15px}.community-profile-form,.community-filter-bar{grid-template-columns:1fr}.trade-discovery-card{grid-template-columns:112px 1fr}.chat-layout{grid-template-columns:1fr;min-height:680px}.conversation-list{display:flex;max-width:100%;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(139,166,204,.16)}.conversation-row{min-width:250px;border-right:1px solid rgba(139,166,204,.1)}.chat-panel{min-height:520px}.chat-message{max-width:88%}.binder-slot-drawer-context dl{grid-template-columns:1fr}.organizer-cover-results{grid-template-columns:1fr}}

.approved-interest-block,
.outgoing-interests {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(139, 166, 204, .16);
}

.approved-interest-block > h3 {
  margin: 0 0 11px;
  color: #eef5ff;
  font-size: 15px;
}

.outgoing-interests > summary {
  margin-bottom: 12px;
  color: #b8c6d8;
  cursor: pointer;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(98, 226, 202, .26);
  border-radius: 999px;
  color: #6ee4cd;
  background: rgba(98, 226, 202, .08);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.trade-binder-dialog {
  width: min(1080px, calc(100vw - 28px));
  max-height: min(860px, calc(100vh - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 166, 204, .28);
  border-radius: 22px;
  color: #eef5ff;
  background: #081321;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .62);
}

.trade-binder-dialog::backdrop {
  background: rgba(2, 7, 14, .78);
  backdrop-filter: blur(6px);
}

.trade-binder-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(139, 166, 204, .16);
}

.trade-binder-dialog-heading h2 {
  margin: 5px 0 4px;
  font-size: 28px;
}

.trade-binder-dialog-heading p {
  margin: 0;
  color: #8fa1b8;
}

.trade-binder-content {
  max-height: calc(100vh - 155px);
  padding: 18px 22px 24px;
  overflow: auto;
}

.trade-binder-preview-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: #96a8bf;
  font-size: 12px;
}

.trade-binder-preview-meta strong {
  color: #eaf2fc;
}

.trade-binder-preview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.trade-binder-preview-card {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(139, 166, 204, .16);
  border-radius: 13px;
  background: #0e1b2d;
}

.trade-binder-preview-art {
  display: grid;
  aspect-ratio: 63 / 88;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: #08121f;
}

.trade-binder-preview-art .card-visual,
.trade-binder-preview-art .card-visual img,
.trade-binder-preview-art > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.trade-binder-preview-card > div:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.trade-binder-preview-card strong,
.trade-binder-preview-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-binder-preview-card small,
.trade-binder-preview-card span {
  color: #8fa1b8;
  font-size: 10px;
}

.trade-binder-card-placeholder {
  color: #71839d;
  font-size: 34px;
}

@media (max-width: 900px) {
  .trade-binder-preview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .trade-binder-dialog { width: calc(100vw - 14px); max-height: calc(100vh - 14px); }
  .trade-binder-dialog-heading { padding: 16px; }
  .trade-binder-content { padding: 14px 14px 20px; }
  .trade-binder-preview-meta { display: grid; }
  .trade-binder-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Catálogo de descoberta: confirmação explícita e desejo manual idempotente. */
.catalog-discovery-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.catalog-discovery-card > .card-visual { flex: none; }
.catalog-discovery-card > .card-body { flex: 1; }

.catalog-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 7px;
  padding: 0 10px 10px;
}

.catalog-card-actions .catalog-add-button {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
}

.catalog-heart-button {
  display: grid;
  width: 40px;
  min-height: 38px;
  place-items: center;
  border: 1px solid rgba(139, 166, 204, .24);
  border-radius: 10px;
  color: #b8c5d8;
  background: #0c1727;
  cursor: pointer;
  font-size: 20px;
}

.catalog-heart-button.is-active {
  border-color: rgba(255, 116, 143, .4);
  color: #ff829a;
  background: rgba(255, 88, 122, .1);
}

.collection-addition-tile {
  display: grid;
  min-height: 100%;
  border-style: dashed;
  background: linear-gradient(145deg, rgba(98, 230, 200, .08), rgba(14, 25, 42, .86));
}

.collection-addition-tile > button {
  display: grid;
  min-height: 100%;
  padding: 24px 16px;
  place-content: center;
  justify-items: center;
  gap: 9px;
  border: 0;
  color: #eff7ff;
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.addition-tile-symbol {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(98, 230, 200, .38);
  border-radius: 50%;
  color: var(--mint);
  background: rgba(98, 230, 200, .09);
  font-size: 30px;
}

.collection-addition-tile strong { font-size: 17px; }
.collection-addition-tile small { max-width: 180px; color: #91a2b9; line-height: 1.45; }

.wishlist-card-actions {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  padding: 0 10px 10px;
}

.wishlist-card-actions > span {
  margin-right: auto;
  color: #92a4bc;
  font-size: 10px;
}

.wishlist-card-actions > button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(139, 166, 204, .22);
  border-radius: 9px;
  color: #dbe6f5;
  background: #0c1727;
  cursor: pointer;
  font-weight: 850;
}

.wishlist-card-actions > button.danger { color: #ff9bad; }

/* Seletor visual reutilizado por Desejos, Coleções e Trocas. */
.catalog-picker-dialog,
.trades-add-dialog {
  width: min(1060px, calc(100vw - 28px));
  max-height: min(880px, calc(100dvh - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 166, 204, .3);
  border-radius: 22px;
  color: #eef5ff;
  background: #081321;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .62);
}

.catalog-picker-dialog::backdrop,
.trades-add-dialog::backdrop { background: rgba(2, 7, 14, .78); backdrop-filter: blur(6px); }

.catalog-picker-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(139, 166, 204, .16);
}

.catalog-picker-heading h2 { margin: 5px 0 3px; font-size: 28px; }
.catalog-picker-heading p { margin: 0; color: #91a2b8; }

.catalog-picker-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 14px 20px;
  padding: 0 13px;
  border: 1px solid rgba(139, 166, 204, .24);
  border-radius: 12px;
  color: #83e8d4;
  background: #0c192a;
}

.catalog-picker-search input {
  min-height: 46px;
  border: 0;
  outline: 0;
  color: #f1f6fc;
  background: transparent;
}

.catalog-picker-results {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
  max-height: min(650px, calc(100dvh - 230px));
  padding: 2px 20px 20px;
  overflow: auto;
}

.catalog-picker-results.is-embedded { max-height: none; padding: 0; overflow: visible; }

.catalog-picker-pagination {
  grid-column: 1 / -1;
  width: 100%;
}

.catalog-picker-card {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(139, 166, 204, .18);
  border-radius: 13px;
  color: #eef4fc;
  background: #0e1b2d;
  cursor: pointer;
  text-align: left;
}

.catalog-picker-card:hover,
.catalog-picker-card.is-selected { border-color: rgba(98, 230, 200, .56); background: rgba(98, 230, 200, .08); }
.catalog-picker-card .card-visual { width: 100%; margin: 0; }
.catalog-picker-card > span { display: grid; min-width: 0; gap: 3px; }
.catalog-picker-card strong,
.catalog-picker-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-picker-card small { color: #8ea0b8; font-size: 10px; }
.catalog-picker-card .catalog-picker-price {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px solid rgba(98, 230, 200, .28);
  border-radius: 9px;
  color: #dffdf5;
  background: rgba(5, 20, 20, .8);
}
.catalog-picker-card .catalog-picker-price b { overflow: hidden; font-size: 11px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.catalog-picker-price-flag { display: block; width: 20px; aspect-ratio: 3 / 2; flex: 0 0 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.3); border-radius: 3px; background: #fff; }
.catalog-picker-price-flag svg { display: block; width: 100%; height: 100%; }
.catalog-picker-note { margin: 0; padding: 10px 20px 14px; border-top: 1px solid rgba(139, 166, 204, .13); color: #8295ae; font-size: 11px; }
.catalog-picker-empty { display: grid; min-height: 180px; grid-column: 1 / -1; place-content: center; gap: 5px; color: #90a2ba; text-align: center; }
.catalog-picker-empty strong { color: #eaf2fc; }

.trades-add-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 14px 20px 0;
  padding: 4px;
  border: 1px solid rgba(139, 166, 204, .18);
  border-radius: 13px;
  background: #091523;
}

.trades-add-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  color: #9babc0;
  background: transparent;
  cursor: pointer;
}

.trades-add-tabs button[aria-selected="true"] { color: #07131c; background: var(--mint); font-weight: 850; }
.trades-add-results { max-height: min(610px, calc(100dvh - 300px)); padding: 0 20px 20px; overflow: auto; }
.trades-lot-list { display: grid; gap: 9px; }
.trades-lot-card { display: grid; grid-template-columns: 74px minmax(0, 1fr) 190px; gap: 13px; align-items: center; padding: 10px; border: 1px solid rgba(139, 166, 204, .18); border-radius: 14px; background: #0d1a2b; }
.trades-lot-visual { display: block; width: 64px; }
.trades-lot-visual .card-visual { width: 64px; margin: 0; border-radius: 8px; }
.trades-lot-card > div:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.trades-lot-card p { margin: 2px 0; color: #acbdd1; font-size: 12px; }
.trades-lot-card small,
.trades-lot-card > div:nth-child(2) > span { color: #8396af; font-size: 10px; }
.trades-transfer-control { display: grid; grid-template-columns: minmax(70px, 1fr) auto; gap: 7px; align-items: end; }
.trades-transfer-control label { display: grid; gap: 4px; color: #91a3ba; font-size: 10px; }
.trades-transfer-control input { width: 100%; min-height: 39px; border: 1px solid rgba(139, 166, 204, .22); border-radius: 9px; color: #eef4fc; background: #091522; padding: 0 9px; }

/* Filtro multi-cidade persistido para Trocas próximas. */
.discovery-city-selector { margin: 18px 0; padding: 18px; border: 1px solid rgba(139, 166, 204, .2); border-radius: 18px; background: linear-gradient(145deg, rgba(18, 32, 52, .94), rgba(9, 17, 30, .96)); }
.discovery-city-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.discovery-city-heading h2 { margin: 5px 0; font-size: 22px; }
.discovery-city-heading p { margin: 0; color: #91a3ba; }
.discovery-city-heading > span { padding: 7px 10px; border: 1px solid rgba(98, 230, 200, .26); border-radius: 999px; color: var(--mint); font-size: 10px; }
.discovery-city-chips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 35px; margin-top: 15px; align-items: center; }
.discovery-city-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 7px 6px 10px; border: 1px solid rgba(98, 230, 200, .28); border-radius: 999px; color: #dff9f4; background: rgba(98, 230, 200, .08); font-size: 11px; }
.discovery-city-chip button { display: grid; width: 20px; height: 20px; place-items: center; border: 0; border-radius: 50%; color: #dff9f4; background: rgba(255, 255, 255, .08); cursor: pointer; }
.discovery-city-search { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 12px; padding: 0 12px; border: 1px solid rgba(139, 166, 204, .23); border-radius: 11px; color: var(--mint); background: #0b1627; }
.discovery-city-search input { min-height: 44px; border: 0; outline: 0; color: #eef4ff; background: transparent; }
.discovery-city-suggestions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px; padding: 8px; border: 1px solid rgba(139, 166, 204, .18); border-radius: 12px; background: #091522; }
.discovery-city-suggestions button { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid rgba(139, 166, 204, .14); border-radius: 9px; color: #edf4fc; background: #0f1d30; cursor: pointer; text-align: left; }
.discovery-city-suggestions button:hover { border-color: rgba(98, 230, 200, .4); }
.discovery-city-suggestions small { color: #8295ae; }

/* Os dois modos do Master Set usam cartões e controles com a mesma cadência. */
.master-card-grid.is-grouped-mode .master-grouped-card,
.master-card-grid.is-variant-mode .master-variant-card { min-height: 330px; }
.master-card-grid.is-variant-mode { align-items: stretch; grid-auto-rows: 1fr; }
.master-grouped-variants { justify-content: flex-start; }
.master-grouped-variant { height: 61px; min-height: 61px; max-height: 61px; grid-template-rows: 27px 28px; align-content: center; overflow: hidden; }
.master-grouped-variant-open strong { display: -webkit-box; max-height: 27px; overflow: hidden; font-size: 12px; line-height: 1.1; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.master-variant-card { display: flex; width: 100%; min-height: 100%; height: 100%; flex-direction: column; }
.master-variant-card .master-card-open { flex: 1; }
.master-variant-card > .card-quantity-stepper { margin-top: auto; }
.master-variant-card-copy strong { display: -webkit-box; min-height: 30px; max-height: 30px; overflow: hidden; place-content: center; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.master-variant-card-copy .master-variant-model { display: -webkit-box; min-height: 30px; max-height: 30px; overflow: hidden; place-content: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

@media (max-width: 1040px) {
  .catalog-picker-results { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .discovery-city-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .catalog-picker-dialog,
  .trades-add-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  .catalog-picker-heading { padding: 16px; }
  .catalog-picker-results { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2px 12px 16px; }
  .catalog-picker-search,
  .trades-add-tabs { margin-right: 12px; margin-left: 12px; }
  .trades-add-results { padding: 0 12px 16px; }
  .trades-lot-card { grid-template-columns: 56px minmax(0, 1fr); }
  .trades-lot-visual,
  .trades-lot-visual .card-visual { width: 50px; }
  .trades-transfer-control { grid-column: 1 / -1; }
  .discovery-city-heading { display: grid; }
  .discovery-city-suggestions { grid-template-columns: 1fr; }
}

/* Busca universal, filtros e ordenação de cada pasta do usuário. */
.collection-filter-bar {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 12px;
  margin: 18px 0 12px;
  padding: 15px;
  border: 1px solid rgba(139, 166, 204, .2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(15, 29, 48, .96), rgba(8, 18, 32, .98));
  box-shadow: 0 16px 38px rgba(0, 0, 0, .14);
}

.collection-filter-primary {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(210px, 260px);
  gap: 10px;
}

.collection-universal-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0 13px;
  border: 1px solid rgba(98, 230, 200, .28);
  border-radius: 12px;
  color: var(--mint);
  background: rgba(5, 15, 27, .72);
}

.collection-universal-search:focus-within {
  border-color: rgba(98, 230, 200, .72);
  box-shadow: 0 0 0 3px rgba(98, 230, 200, .1);
}

.collection-universal-search input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 0;
  outline: 0;
  color: #f1f7ff;
  background: transparent;
}

.collection-sort-field,
.collection-filter-field {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
}

.collection-sort-field select,
.collection-filter-field select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 34px 0 11px;
  border: 1px solid rgba(139, 166, 204, .2);
  border-radius: 10px;
  color: #e8f1fb;
  background: #0a1728;
}

.collection-filter-facets {
  display: grid;
  grid-template-columns: repeat(7, minmax(115px, 1fr)) repeat(2, auto);
  gap: 8px;
  align-items: end;
}

.collection-filter-toggle {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(139, 166, 204, .2);
  border-radius: 10px;
  color: #aab9cc;
  background: #0a1728;
  cursor: pointer;
  white-space: nowrap;
}

.collection-filter-toggle:hover,
.collection-filter-toggle.is-active {
  border-color: rgba(98, 230, 200, .55);
  color: #e9fffa;
  background: rgba(98, 230, 200, .12);
}

.collection-filter-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-top: 11px;
  border-top: 1px solid rgba(139, 166, 204, .13);
  color: #91a3b9;
  font-size: 11px;
}

.collection-filter-summary strong { color: #eff7ff; font-size: 13px; }
.collection-active-filters { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; }
.collection-active-filters button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 260px;
  min-height: 28px;
  padding: 4px 8px 4px 10px;
  overflow: hidden;
  border: 1px solid rgba(98, 230, 200, .28);
  border-radius: 999px;
  color: #dff9f4;
  background: rgba(98, 230, 200, .08);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collection-active-filters button:hover { background: rgba(98, 230, 200, .15); }
.collection-active-filters button span { font-size: 15px; line-height: 1; }
.collection-clear-filters {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(139, 166, 204, .2);
  border-radius: 9px;
  color: #d9e5f3;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.collection-clear-filters:disabled { opacity: .38; cursor: default; }
.master-card-search { flex: 1 1 260px; min-width: 200px; }
.master-card-search input { width: 100%; min-height: 42px; }

@media (max-width: 1540px) {
  .collection-filter-facets { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
}

@media (max-width: 900px) {
  .collection-filter-primary { grid-template-columns: 1fr; }
  .collection-filter-facets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-filter-summary { grid-template-columns: 1fr auto; }
  .collection-active-filters { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 560px) {
  .collection-filter-bar { padding: 11px; border-radius: 14px; }
  .collection-filter-facets { grid-template-columns: 1fr; }
  .collection-filter-summary { grid-template-columns: 1fr; }
  .collection-active-filters { grid-column: auto; grid-row: auto; }
  .collection-clear-filters { width: 100%; }
}

/* Camada final de contenção dos fichários: vale igualmente para 2x2, 3x3, 4x3 e 4x4. */
.binder-stage,
.binder-spread,
.binder-sheet,
.binder-sheet > header,
.binder-sheet .binder-page,
.binder-sheet .binder-slot,
.binder-slot-card,
.binder-slot-card .card-visual,
.binder-slot-card .card-visual picture,
.binder-slot-card .card-visual img {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}

.binder-stage,
.binder-spread,
.binder-sheet,
.binder-sheet .binder-page {
  overflow: hidden;
}

.binder-sheet .binder-page {
  width: 100%;
  grid-template-columns: repeat(var(--binder-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--binder-rows), auto);
  align-items: start;
  justify-items: stretch;
}

.binder-sheet .binder-slot {
  width: 100%;
  height: auto;
  aspect-ratio: 63 / 88;
  contain: layout paint;
  isolation: isolate;
}

.binder-slot-card {
  display: grid;
  overflow: hidden;
  place-items: center;
}

.binder-slot-card .card-visual,
.binder-slot-card .card-visual picture {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
}

.binder-slot-card .card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Ações finais do slot: Informação em cima e remover abaixo, no canto inferior esquerdo. */
.binder-slot .binder-slot-actions {
  top: auto !important;
  right: auto !important;
  bottom: 5px !important;
  left: 5px !important;
  display: flex !important;
  width: auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  transform: translateY(3px);
}

.binder-slot:hover .binder-slot-actions,
.binder-slot:focus-within .binder-slot-actions {
  transform: none;
}

.binder-slot .binder-slot-actions .binder-slot-info { order: 0 !important; }
.binder-slot .binder-slot-actions .binder-slot-remove {
  position: static !important;
  inset: auto !important;
  order: 1 !important;
}

/* Popup informativo independente do drawer de inclusão. */
#card-info-dialog {
  width: min(1160px, calc(100vw - 48px));
  height: min(800px, calc(100dvh - 48px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 166, 204, .28);
  border-radius: 22px;
  color: var(--text);
  background: linear-gradient(145deg, #101e31, #0a1422 76%);
  box-shadow: 0 36px 110px rgba(0, 0, 0, .62), 0 0 0 1px rgba(98, 230, 200, .05);
  overscroll-behavior: contain;
}

#card-info-dialog[open] { display: grid; grid-template-rows: minmax(0, 1fr); }
#card-info-dialog::backdrop { background: rgba(2, 6, 12, .66); backdrop-filter: blur(5px); }
#card-info-dialog > .dialog-close {
  position: absolute;
  z-index: 20;
  top: 14px;
  right: 14px;
  float: none;
  margin: 0;
}

.card-information-content {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.card-information-layout {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(350px, .86fr) minmax(0, 1.14fr);
}

.card-information-art,
.card-information-visual {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: clamp(30px, 4vh, 44px);
  overflow: hidden;
  place-items: center;
  border-right: 1px solid var(--line);
  background: radial-gradient(circle at 50% 42%, rgba(98, 230, 200, .16), transparent 48%), linear-gradient(160deg, #14263b, #0c1726);
}

.card-information-art .card-visual,
.card-information-visual .card-visual {
  width: min(100%, 350px);
  max-height: 100%;
  margin: 0;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .46));
}

.card-information-art .card-visual img,
.card-information-visual .card-visual img { width: 100%; height: 100%; object-fit: contain; }

.card-information-body,
.card-information-details,
.card-information-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 24px 28px 24px;
  overflow: hidden;
  flex-direction: column;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.card-information-header {
  position: static;
  z-index: 4;
  top: auto;
  margin: -24px -28px 12px;
  padding: 22px 58px 12px 28px;
  border-bottom: 1px solid rgba(139, 166, 204, .13);
  background: linear-gradient(180deg, #0d1828 78%, rgba(13, 24, 40, .94));
}

.card-information-header h2 { margin: 3px 0; font-size: clamp(27px, 2.4vw, 36px); }
.card-information-header p { margin: 0; color: var(--muted); }
.card-information-meta,
.card-information-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}
.card-information-meta > *,
.card-information-facts > * { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(7, 15, 27, .5); }
.card-information-meta dt,
.card-information-facts dt { color: #8fa1bb; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.card-information-meta dd,
.card-information-facts dd { margin: 3px 0 0; overflow-wrap: anywhere; color: #f3f7ff; font-size: 12px; font-weight: 700; line-height: 1.25; }
.card-information-context-fact { border-color: rgba(139, 166, 204, .22) !important; background: rgba(17, 29, 47, .68) !important; }
.card-information-context-fact.is-wide { grid-column: 1 / -1; }
.card-information-actions {
  position: static;
  z-index: 4;
  bottom: auto;
  display: flex;
  gap: 9px;
  margin: auto -28px -24px;
  padding: 12px 28px 17px;
  border-top: 1px solid rgba(139, 166, 204, .13);
  background: linear-gradient(0deg, rgba(8, 17, 29, .98) 78%, rgba(8, 17, 29, .9));
}

/* Drawer detalhado: duas colunas em desktop, um único scroll interno e ações ancoradas. */
#card-dialog {
  position: fixed;
  inset: 0 0 0 auto;
  box-sizing: border-box;
  width: min(940px, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#card-dialog > .dialog-close {
  position: absolute;
  z-index: 30;
  top: 12px;
  right: 12px;
  float: none;
  margin: 0;
}

#card-dialog > #dialog-content,
#card-dialog .card-drawer-layout {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#card-dialog .card-drawer-layout {
  display: grid;
  grid-template-columns: minmax(290px, .78fr) minmax(0, 1.22fr);
}

#card-dialog .card-drawer-art {
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: clamp(46px, 7vh, 78px) clamp(30px, 4vw, 52px);
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  place-items: center;
}

#card-dialog .card-drawer-art .card-visual {
  width: min(100%, 300px);
  max-height: 100%;
  margin: 0;
}

.drawer-art-current-price {
  display: flex;
  width: min(100%, 300px);
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(98, 230, 200, .24);
  border-radius: 11px;
  background: rgba(5, 20, 24, .82);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  backdrop-filter: blur(10px);
}

.drawer-art-current-price.is-estimate {
  border-color: rgba(244, 198, 106, .3);
  background: rgba(34, 27, 14, .78);
}

.drawer-art-current-price.is-stale {
  border-color: rgba(244, 198, 106, .38);
  background: rgba(34, 27, 14, .86);
}

.drawer-art-price-flag {
  display: block;
  width: 30px;
  aspect-ratio: 3 / 2;
  flex: 0 0 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 5px;
  background: #fff;
}

.drawer-art-price-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.drawer-art-current-price > span:last-child {
  display: grid;
  min-width: 0;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
}

.drawer-art-current-price small,
.drawer-art-current-price em {
  overflow: hidden;
  color: var(--muted-2);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-art-current-price strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--mint);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.drawer-art-current-price.is-estimate strong,
.drawer-art-current-price.is-stale strong { color: var(--amber); }

#card-dialog .detail-info {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 24px 30px 30px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#card-dialog .detail-info > .eyebrow {
  display: block;
  padding-right: 44px;
}

#card-dialog .detail-info h2 { margin: 5px 0 2px; font-size: clamp(27px, 3vw, 34px); }
#card-dialog .detail-subtitle { margin: 0 0 8px; font-size: 13px; }
#card-dialog .detail-tags { margin: 9px 0; }
#card-dialog .drawer-current-price { margin-bottom: 10px; padding: 10px 12px; }
#card-dialog .drawer-current-price span,
#card-dialog .drawer-current-price small { font-size: 10px; }
#card-dialog .drawer-current-price strong { font-size: 20px; }
#card-dialog .card-drawer-form { gap: 9px; padding: 13px; border-radius: 14px; }
#card-dialog .card-drawer-form > label { gap: 5px; font-size: 11px; }
#card-dialog .card-drawer-form select,
#card-dialog .card-drawer-form input { min-height: 38px; padding: 7px 9px; font-size: 13px; }
#card-dialog .drawer-fieldset legend { margin-bottom: 6px; font-size: 12px; }
#card-dialog .drawer-variant-picker > p { margin: -2px 0 7px 30px; font-size: 10px; }
#card-dialog .drawer-choice-grid { gap: 6px; }
#card-dialog .drawer-choice { min-height: 44px; padding: 7px 9px; }
#card-dialog .drawer-choice strong { font-size: 12px; }
#card-dialog .drawer-choice small { font-size: 9px; }
#card-dialog .drawer-language-choice { min-height: 64px; padding: 6px 4px; }
#card-dialog .drawer-language-flag { width: 30px; }
#card-dialog .drawer-language-choice strong { font-size: 11px; }
#card-dialog .drawer-language-choice small { font-size: 8px; }
#card-dialog .drawer-quantity-stepper { width: 100%; grid-template-columns: 40px minmax(60px, 1fr) 40px; }
#card-dialog .drawer-quantity-stepper button { min-height: 38px; }
#card-dialog .drawer-form-actions {
  position: sticky;
  z-index: 8;
  bottom: -13px;
  margin: 2px -13px -13px;
  padding: 9px 13px 13px;
  background: linear-gradient(0deg, #162438 82%, rgba(22, 36, 56, .94));
}
#card-dialog .drawer-form-actions .drawer-submit { min-height: 43px; }

html:has(#card-dialog[open]),
body:has(#card-dialog[open]),
html:has(#card-info-dialog[open]),
body:has(#card-info-dialog[open]) { overflow: hidden; }

@media (max-width: 860px) {
  #card-dialog { width: min(600px, 100%); }
  #card-dialog .card-drawer-layout { display: block; overflow-y: auto; }
  #card-dialog .card-drawer-art { height: 305px; min-height: 305px; gap: 8px; padding: 22px 48px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  #card-dialog .card-drawer-art .card-visual { width: 155px; }
  #card-dialog .drawer-art-current-price { width: min(100%, 260px); min-height: 38px; padding: 5px 8px; }
  #card-dialog .detail-info { height: auto; min-height: calc(100dvh - 305px); overflow: visible; }
  .card-information-layout { grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); }
}

@media (max-width: 640px) {
  #card-info-dialog { width: 100vw; height: calc(100dvh - 8px); margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .card-information-layout { display: block; overflow-y: auto; }
  .card-information-art,
  .card-information-visual { height: 300px; min-height: 300px; padding: 28px 58px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .card-information-art .card-visual,
  .card-information-visual .card-visual { width: 190px; }
  .card-information-body,
  .card-information-details,
  .card-information-panel { height: auto; overflow: visible; padding: 24px 18px 28px; }
  .card-information-header { top: 0; margin: -24px -18px 16px; padding: 24px 56px 12px 18px; }
  .card-information-actions { bottom: 0; margin: 16px -18px -28px; padding: 12px 18px 18px; }
}

@media (max-height: 820px) and (min-width: 861px) {
  #card-dialog .card-drawer-art { padding-top: 38px; padding-bottom: 38px; }
  #card-dialog .card-drawer-art .card-visual { width: min(100%, 245px); }
  #card-dialog .detail-info { padding-top: 16px; padding-bottom: 20px; }
  #card-dialog .drawer-choice { min-height: 40px; }
}

@media (max-height: 899px) and (min-width: 641px) {
  .card-information-body,
  .card-information-details,
  .card-information-panel { overflow-y: auto; }
  .card-information-header { position: sticky; top: -24px; }
  .card-information-actions { position: sticky; bottom: -24px; margin-top: 14px; }
}

/* Spec 012 · geometria estável dos sets, fichário ampliado e informações navegáveis. */
.master-card-grid.is-variant-mode {
  align-items: start;
  grid-auto-rows: auto;
}

.master-card-grid.is-variant-mode .master-variant-card {
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
}

.master-card-grid.is-variant-mode .master-variant-card .master-card-open {
  flex: 0 0 auto;
}

.master-card-grid.is-variant-mode .master-variant-card > .card-quantity-stepper {
  margin-top: 0;
}

.master-card-grid.is-grouped-mode {
  align-items: start;
}

.master-card-grid.is-grouped-mode .master-grouped-card {
  grid-template-columns: minmax(178px, 1.16fr) minmax(112px, .84fr);
  align-self: start;
  height: auto;
  min-height: 0;
}

.master-grouped-card .master-card-open,
.master-grouped-card .master-grouped-visual {
  height: auto;
  min-height: 0;
}

.master-grouped-card .master-card-open .card-visual {
  width: calc(100% - 14px);
  margin: 7px 7px 0;
}

.master-grouped-card .master-card-copy {
  padding: 8px 10px 11px;
}

.master-grouped-card .master-card-copy strong {
  overflow: visible;
  font-size: 14px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.master-grouped-card .master-card-copy small {
  margin-top: 4px;
  overflow: visible;
  color: #9fb0c7;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.master-grouped-variants {
  padding: 6px;
  gap: 5px;
}

.master-grouped-variant {
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  grid-template-rows: 23px 24px;
  padding: 2px 4px;
}

.master-grouped-variant-open strong { max-height: 24px; font-size: 12px; }
.master-grouped-variant .card-quantity-stepper { min-height: 22px; padding: 1px; }
.master-grouped-variant .card-quantity-stepper button,
.master-grouped-variant .card-quantity-stepper input { height: 20px; }

.master-variant-card-copy strong { font-size: 13px; }
.master-variant-card-copy .master-variant-model { font-size: 14px; }

.master-variant-controls {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(139, 166, 204, .19);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(17, 30, 49, .94), rgba(8, 16, 28, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 10px 28px rgba(0, 0, 0, .13);
}

.master-card-search {
  position: relative;
  display: block;
  min-width: 0;
}

.master-card-search::before {
  content: "⌕";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 15px;
  color: var(--mint);
  font-size: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.master-card-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 42px;
  border: 1px solid rgba(139, 166, 204, .24);
  border-radius: 12px;
  outline: 0;
  color: #f4f8ff;
  background: #091522;
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, .22);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.master-card-search input::placeholder { color: #788ba5; opacity: 1; }
.master-card-search input:hover { border-color: rgba(139, 166, 204, .38); background: #0b1827; }
.master-card-search input:focus { border-color: rgba(98, 230, 200, .62); box-shadow: 0 0 0 3px rgba(98, 230, 200, .1), inset 0 1px 8px rgba(0, 0, 0, .2); }

.card-information-search-link {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.card-information-search-link span { min-width: 0; overflow-wrap: anywhere; }
.card-information-search-link i { color: var(--mint); font-size: .78em; font-style: normal; opacity: .72; transition: transform .16s ease, opacity .16s ease; }
.card-information-search-link:hover,
.card-information-search-link:focus-visible { color: var(--mint); outline: 0; text-decoration: underline; text-underline-offset: 3px; }
.card-information-search-link:hover i,
.card-information-search-link:focus-visible i { opacity: 1; transform: translate(2px, -2px); }
.card-information-search-link.is-title { font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.card-information-search-link.is-inline { display: inline-flex; color: #c3cfde; }
.card-information-header p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.card-information-number { display: block; margin-top: 4px; color: #9db0c9; font-size: 10px; font-weight: 650; }
.card-information-meta > div { transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.card-information-meta > div:has(.card-information-search-link):hover { border-color: rgba(98, 230, 200, .3); background: rgba(12, 28, 43, .82); transform: translateY(-1px); }

.drawer-binder-acquire-context {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(98, 230, 200, .28);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(98, 230, 200, .09), rgba(20, 39, 57, .7));
}
.drawer-binder-acquire-context span { color: var(--mint); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.drawer-binder-acquire-context strong { color: #f1fbf9; font-size: 13px; }
.drawer-binder-acquire-context small { color: #9fb2c8; font-size: 10px; line-height: 1.4; }

@media (min-width: 961px) {
  #view-content.is-binder-open .binder-shell { padding: 6px 8px 7px; }
  #view-content.is-binder-open .binder-shell > header { display: none; }
  #view-content.is-binder-open .binder-stage { grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 8px; }
  #view-content.is-binder-open .binder-stage .binder-spread {
    --binder-viewport-ratio: 1.43;
    width: min(100%, calc((100cqh - 24px) * var(--binder-viewport-ratio)));
    padding: 5px;
    gap: 3px;
  }
  #view-content.is-binder-open .binder-shell[data-binder-format="4x3"] .binder-spread { --binder-viewport-ratio: 1.89; }
  #view-content.is-binder-open .binder-sheet { padding: 6px; }
  #view-content.is-binder-open .binder-sheet > header { min-height: 18px; margin-bottom: 4px; }
  #view-content.is-binder-open .binder-sheet .binder-page { --michi-art-grid-gap: 4px; gap: 4px; padding: 4px; }
}

#view-content.is-binder-open .binder-edge-control {
  width: 58px;
  min-height: 128px;
  padding: 12px 6px;
  gap: 9px;
  border-color: rgba(232, 207, 172, .25);
  border-radius: 19px;
  color: #f2dcc0;
  background: linear-gradient(155deg, rgba(62, 45, 33, .84), rgba(19, 15, 14, .92));
  box-shadow: 0 14px 32px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
#view-content.is-binder-open .binder-edge-control span { font-size: 29px; font-weight: 400; }
#view-content.is-binder-open .binder-edge-control small { font-size: 10px; font-weight: 800; letter-spacing: .02em; }
#view-content.is-binder-open .binder-edge-control.is-previous:hover:not(:disabled),
#view-content.is-binder-open .binder-edge-control.is-previous:focus-visible { transform: translateX(-3px); }
#view-content.is-binder-open .binder-edge-control.is-next:hover:not(:disabled),
#view-content.is-binder-open .binder-edge-control.is-next:focus-visible { transform: translateX(3px); }
#view-content.is-binder-open .binder-edge-control:hover:not(:disabled),
#view-content.is-binder-open .binder-edge-control:focus-visible { border-color: rgba(98, 230, 200, .52); color: var(--mint); background: linear-gradient(155deg, rgba(31, 67, 63, .74), rgba(16, 27, 31, .94)); box-shadow: 0 18px 38px rgba(0, 0, 0, .3), 0 0 0 3px rgba(98, 230, 200, .07); }

@media (max-width: 1180px) {
  .master-variant-controls { grid-template-columns: 1fr; }
  .master-variant-controls .master-mode-switch { justify-self: start; }
  .master-variant-controls .filter-chips { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .master-card-grid.is-grouped-mode .master-grouped-card { grid-template-columns: minmax(138px, 1.05fr) minmax(104px, .95fr); }
  #view-content.is-binder-open .binder-edge-control { width: 100%; min-height: 50px; border-radius: 14px; grid-auto-flow: column; }
  #view-content.is-binder-open .binder-edge-control span { font-size: 23px; }
}

@media (min-width: 721px) and (max-width: 960px) {
  #view-content.is-binder-open .binder-stage {
    grid-template-columns: 58px minmax(0, 1fr) 58px;
  }
}

@media (max-width: 430px) {
  #card-dialog .detail-info { padding-right: 16px; padding-left: 16px; }
  #card-dialog .card-drawer-form { grid-template-columns: 1fr; }
  #card-dialog .card-drawer-form > * { grid-column: 1; }
  .card-information-meta,
  .card-information-facts { grid-template-columns: 1fr; }
}

/* Contratos finais de geometria e acessibilidade dos painéis compactos. */
.binder-slot {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.binder-slot img { object-fit: contain; }

.binder-slot-controls {
  bottom: 5px;
  left: 5px;
}

.card-dialog { max-height: 100dvh; }

@media (min-width: 861px) {
  .card-dialog .card-drawer-layout {
    display: grid;
    grid-template-columns: minmax(290px, .78fr) minmax(0, 1.22fr);
  }
}

.card-drawer-body {
  min-height: 0;
  overflow-y: auto;
}

#card-dialog .card-drawer-header {
  position: sticky;
  z-index: 7;
  top: -24px;
  margin: -24px -30px 10px;
  padding: 24px 48px 3px 30px;
  border-bottom: 1px solid rgba(139, 166, 204, .13);
  background: linear-gradient(180deg, #0d1828 86%, rgba(13, 24, 40, .94));
}

#card-dialog .card-drawer-actions { position: sticky; }

.catalog-card-information {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.card-information-section { margin-top: 11px; }
.card-information-section h3 { margin: 0 0 7px; font-size: 13px; }
.card-information-section .detail-tags { margin: 0; gap: 5px; }
.card-information-section .tag { padding: 5px 8px; font-size: 9px; }
.card-information-pricing { display: grid; gap: 9px; margin-top: 11px; padding: 11px; border: 1px solid rgba(98,230,200,.2); border-radius: 13px; background: linear-gradient(145deg,rgba(8,24,31,.76),rgba(9,18,31,.82)); }
.card-information-pricing > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-information-pricing h3 { margin: 0; font-size: 14px; }
.card-information-pricing p { margin: 3px 0 0; color: #8fa1b8; font-size: 9px; line-height: 1.35; }
.card-information-price-loading { flex: none; color: var(--mint); font-size: 9px; }
.card-information-conditions { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
.card-information-condition { display: grid; min-width: 0; min-height: 47px; place-content: center; gap: 3px; padding: 5px; border: 1px solid rgba(139,166,204,.2); border-radius: 9px; color: #b8c5d7; background: #0b1727; cursor: pointer; text-align: center; }
.card-information-condition:hover,.card-information-condition:focus-visible { border-color: rgba(98,230,200,.5); outline: 0; }
.card-information-condition.is-selected { border-color: rgba(98,230,200,.75); color: #edfffb; background: rgba(98,230,200,.14); box-shadow: 0 0 0 1px rgba(98,230,200,.12) inset; }
.card-information-condition strong { font-size: 10px; }
.card-information-condition span { overflow: hidden; color: inherit; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.card-information-price-result,.card-information-price-empty { min-height: 58px; border: 1px solid rgba(139,166,204,.15); border-radius: 10px; background: rgba(4,12,22,.62); }
.card-information-price-result { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: center; padding: 9px 11px; }
.card-information-price-amount { display: flex; align-items: center; gap: 8px; }
.card-information-price-amount > strong { color: var(--mint); font-size: clamp(20px,2vw,27px); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-information-price-flag { display: block; width: 27px; aspect-ratio: 3 / 2; flex: 0 0 27px; overflow: hidden; border: 1px solid rgba(255,255,255,.32); border-radius: 4px; background: #fff; }
.card-information-price-flag svg { display: block; width: 100%; height: 100%; }
.card-information-price-result > div:last-child { display: grid; min-width: 0; gap: 2px; }
.card-information-price-result b { font-size: 11px; }
.card-information-price-result span,.card-information-price-result small { overflow: hidden; color: #91a3ba; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.card-information-price-empty { display: grid; place-content: center start; gap: 3px; padding: 9px 11px; }
.card-information-price-empty strong { font-size: 11px; }
.card-information-price-empty span { color: #8fa1b8; font-size: 9px; line-height: 1.35; }

@media (max-width: 640px) {
  .card-information-conditions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.duplicate-identity-copy { display: grid; gap: 6px; }
.duplicate-identity-copy .duplicate-model { font-size: 14px; color: var(--text); }
.duplicate-identity-copy .duplicate-total { font-weight: 800; color: var(--accent); }

/* Geometria desktop do fichário: o palco usa exatamente o espaço restante da viewport.
   A largura da abertura deriva da altura disponível e do formato físico; a altura continua
   automática, preservando 63:88 em todos os slots sem cortar a última fileira. */
@media (min-width: 961px) {
  #view-content.is-binder-open {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100dvh - var(--topbar));
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow: hidden;
  }

  #view-content.is-binder-open > .view-header {
    display: none;
  }

  #view-content.is-binder-open > .view-header .view-title h1 {
    margin: 2px 0 4px;
    font-size: clamp(28px, 2.2vw, 36px);
  }

  #view-content.is-binder-open > .view-header .view-title p { margin: 0; }

  #view-content.is-binder-open > .binder-toolbar {
    min-width: 0;
    margin-bottom: 5px;
  }

  #view-content.is-binder-open > .binder-toolbar .filter-chips {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  #view-content.is-binder-open > .binder-shell {
    display: flex;
    height: 100%;
    min-height: 0;
    padding: 6px 8px 7px;
    flex-direction: column;
  }

  #view-content.is-binder-open .binder-shell > header {
    flex: 0 0 auto;
    margin-bottom: 3px;
  }

  #view-content.is-binder-open .binder-shell > header h2 { margin: 2px 0; font-size: clamp(22px, 1.8vw, 29px); }
  #view-content.is-binder-open .binder-shell > header .eyebrow { font-size: 8px; }

  #view-content.is-binder-open .binder-stage {
    container-type: size;
    min-height: 0;
    flex: 1 1 auto;
  }

  #view-content.is-binder-open .binder-stage .binder-spread {
    --binder-viewport-ratio: 1.43;
    width: min(100%, calc((100dvh - 350px) * var(--binder-viewport-ratio)));
    width: min(100%, calc((100cqh - 24px) * var(--binder-viewport-ratio)));
    max-width: none !important;
    max-height: none !important;
    align-self: center;
    justify-self: center;
  }

  #view-content.is-binder-open .binder-shell[data-binder-format="4x3"] .binder-spread {
    --binder-viewport-ratio: 1.89;
  }

  #view-content.is-binder-open .binder-stage .binder-page {
    max-height: none !important;
  }

  #view-content.is-binder-open .binder-hint {
    display: none;
  }
}
/* Coleção Selada: carteira de produtos lacrados com catálogo de fonte autorizada. */
.sealed-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 22px 0 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-solid);
}

.sealed-summary > div {
  display: grid;
  align-content: center;
  min-height: 84px;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
}

.sealed-summary > div:last-child { border-right: 0; }
.sealed-summary small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.sealed-summary strong { margin-top: 6px; color: var(--text); font-size: clamp(18px, 1.7vw, 25px); }
.sealed-summary .is-positive strong { color: var(--accent); }
.sealed-summary .is-negative strong { color: #ff8d9d; }
.sealed-summary-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.sealed-toolbar {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) repeat(2, minmax(130px, 190px));
  align-items: end;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
}

.sealed-mode-switch {
  display: flex;
  align-self: stretch;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
}

.sealed-mode-switch button {
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-weight: 750;
}

.sealed-mode-switch button.is-active { color: #062824; background: var(--accent); }
.sealed-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.sealed-toolbar input,
.sealed-toolbar select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--bg);
  font: inherit;
  font-size: 13px;
}

.sealed-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 30px;
}

.sealed-product-card {
  display: grid;
  grid-template-rows: 230px minmax(145px, auto) auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-solid);
  box-shadow: 0 16px 34px rgb(0 0 0 / 12%);
}

.sealed-add-product-card {
  display: grid;
  min-height: 432px;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 28px 20px;
  border: 1px dashed rgb(98 230 200 / 42%);
  border-radius: 16px;
  color: var(--text);
  background: linear-gradient(145deg, rgb(98 230 200 / 8%), rgb(12 22 38 / 88%));
  box-shadow: 0 16px 34px rgb(0 0 0 / 10%);
  text-align: center;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.sealed-add-product-card:hover,
.sealed-add-product-card:focus-visible {
  border-color: var(--accent);
  background: linear-gradient(145deg, rgb(98 230 200 / 14%), rgb(12 22 38 / 96%));
  transform: translateY(-2px);
}
.sealed-add-product-card > span {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid rgb(98 230 200 / 52%);
  border-radius: 50%;
  color: var(--accent);
  background: rgb(98 230 200 / 8%);
  font-size: 35px;
  font-weight: 300;
}
.sealed-add-product-card > strong { font-size: 17px; }
.sealed-add-product-card > small { max-width: 170px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.sealed-product-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  background: radial-gradient(circle at 50% 35%, rgb(89 222 199 / 13%), transparent 42%), linear-gradient(145deg, #132239, #0c1626);
}

.sealed-product-visual img {
  width: auto;
  height: auto;
  max-width: calc(100% - 30px);
  max-height: calc(100% - 30px);
  object-fit: contain;
  object-position: center;
}
.sealed-product-visual.is-placeholder { padding: 16px; }
.sealed-product-placeholder {
  display: grid;
  width: min(76%, 220px);
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px solid rgb(142 171 211 / 18%);
  border-radius: 24px;
  color: var(--muted);
  background: radial-gradient(circle, rgb(111 145 193 / 16%), transparent 65%);
}
.sealed-product-placeholder > span { font-size: 34px; opacity: .72; }
.sealed-product-placeholder > small { max-width: 150px; font-size: 10px; line-height: 1.35; text-align: center; }
.sealed-product-card-copy { min-width: 0; padding: 14px 15px 10px; }
.sealed-product-card-copy > span { color: var(--accent); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.sealed-product-card-copy h2 { margin: 7px 0 4px; overflow: hidden; color: var(--text); font-size: 16px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.sealed-product-card-copy > p { min-height: 30px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.sealed-product-card-copy dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0 0; }
.sealed-product-card.is-owned .sealed-product-card-copy dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sealed-product-card-copy dl div { min-width: 0; }
.sealed-product-card-copy dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.sealed-product-card-copy dd { margin: 3px 0 0; overflow: hidden; color: var(--text); font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.sealed-product-card > .button { min-height: 42px; margin: 0 14px 14px; }

.sealed-empty,
.sealed-loading {
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 36px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}

.sealed-empty > span { font-size: 42px; }
.sealed-empty h2 { margin: 10px 0 6px; color: var(--text); font-size: 21px; }
.sealed-empty p { max-width: 660px; margin: 0; line-height: 1.6; }
.sealed-empty .button { margin-top: 18px; }
.sealed-loading { align-content: center; gap: 12px; }
.sealed-loading > span { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }

.sealed-drawer {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  width: min(860px, 100vw) !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 0 !important;
  color: var(--text);
  background: #0c1728;
}

.sealed-drawer::backdrop { background: rgb(3 8 16 / 76%); backdrop-filter: blur(5px); }
.sealed-drawer > .dialog-close { z-index: 3; top: 16px; right: 16px; }
.sealed-drawer-layout { display: grid; grid-template-columns: minmax(280px, 42%) minmax(0, 1fr); height: 100dvh; }
.sealed-drawer-art { display: grid; min-width: 0; padding: 72px 28px 36px; border-right: 1px solid var(--line); background: linear-gradient(155deg, #172a43, #0d192a); }
.sealed-product-visual.is-drawer { width: 100%; height: 100%; max-height: 720px; align-self: center; background: transparent; }
.sealed-product-visual.is-drawer img { max-width: calc(100% - 16px); max-height: calc(100% - 16px); }
.sealed-drawer-main { min-width: 0; overflow-y: auto; padding: 38px 34px 28px; }
.sealed-drawer-main > h2 { margin: 7px 44px 4px 0; font-size: clamp(27px, 2.4vw, 38px); line-height: 1.08; }
.sealed-drawer-main > p { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.sealed-lot-form { padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface-solid) 90%, transparent); }
.sealed-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.sealed-lot-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.sealed-lot-form input,
.sealed-lot-form select,
.sealed-lot-form textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--bg); font: inherit; font-size: 12px; }
.sealed-lot-form textarea { min-height: 58px; resize: vertical; }
.sealed-notes { margin-top: 11px; }
.sealed-form-help { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.sealed-form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.sealed-form-actions .button { min-height: 44px; }

html:has(.sealed-drawer[open]),
body:has(.sealed-drawer[open]) { overflow: hidden; }

@media (max-width: 1500px) {
  .sealed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sealed-toolbar { grid-template-columns: auto minmax(230px, 1fr) repeat(2, minmax(120px, 160px)); }
}

@media (max-width: 1180px) {
  .sealed-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sealed-summary > div:nth-child(3) { border-right: 0; }
  .sealed-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sealed-mode-switch, .sealed-search { grid-column: span 3; }
  .sealed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .sealed-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sealed-summary > div { border-bottom: 1px solid var(--line); }
  .sealed-summary > div:nth-child(2n) { border-right: 0; }
  .sealed-toolbar { grid-template-columns: 1fr 1fr; }
  .sealed-mode-switch, .sealed-search { grid-column: span 2; }
  .sealed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sealed-product-card { grid-template-rows: 190px minmax(140px, auto) auto; }
  .sealed-add-product-card { min-height: 386px; }
  .sealed-drawer { overflow-y: auto; }
  .sealed-drawer-layout { display: block; height: auto; min-height: 100dvh; }
  .sealed-drawer-art { height: 260px; padding: 40px 24px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sealed-drawer-main { overflow: visible; padding: 25px 18px; }
}

@media (max-width: 500px) {
  .sealed-grid { grid-template-columns: 1fr; }
  .sealed-product-card { grid-template-rows: 240px minmax(130px, auto) auto; }
  .sealed-add-product-card { min-height: 426px; }
  .sealed-form-grid { grid-template-columns: 1fr; }
}
/* Michi Method: editor de geometria. Nenhuma arte de carta é renderizada aqui. */
.michi-page-shell{display:grid;gap:22px}.michi-safety-banner{display:flex;align-items:center;gap:18px;padding:16px 18px;border:1px solid rgba(95,226,201,.24);border-radius:16px;background:rgba(95,226,201,.06)}.michi-safety-banner strong{color:var(--accent,#65e2ca);white-space:nowrap}.michi-safety-banner span{color:var(--muted,#9ba8bc);font-size:.9rem}.michi-model-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.michi-model-card{display:grid;grid-template-columns:minmax(190px,.72fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:18px;padding:18px;border:1px solid var(--line,#263348);border-radius:18px;background:var(--panel,#111d30);min-height:300px}.michi-model-preview{grid-row:1/3;display:grid;place-items:center;padding:12px;border-radius:14px;background:linear-gradient(145deg,rgba(101,226,202,.06),rgba(126,148,255,.06))}.michi-model-copy{min-width:0}.michi-model-copy h3{margin:8px 0;font-size:1.45rem}.michi-model-copy p{color:var(--muted,#9ba8bc);line-height:1.55}.michi-model-copy small{color:var(--muted,#9ba8bc)}.michi-model-actions{display:flex;flex-wrap:wrap;gap:8px;align-self:end}.michi-model-actions .button{min-height:38px;padding:8px 12px}.michi-layout-page{display:grid;grid-template-columns:repeat(var(--michi-columns),minmax(0,1fr));grid-template-rows:repeat(var(--michi-rows),minmax(0,1fr));gap:8px;width:min(100%,560px);aspect-ratio:calc(var(--michi-columns) * .72)/var(--michi-rows)}.michi-layout-page.is-compact{width:min(100%,260px);gap:4px}.michi-layout-slot{min-width:0;min-height:0;border:1px solid rgba(192,207,231,.42);border-radius:9px;background:rgba(4,11,22,.46);color:#dce6f5;display:grid;place-items:center;padding:6px;text-align:center;overflow:hidden}.michi-layout-slot span{font-size:clamp(.55rem,.8vw,.76rem);line-height:1.15;overflow-wrap:anywhere}.michi-layout-slot.type-label{border-color:rgba(101,226,202,.6);background:rgba(101,226,202,.1);font-weight:800}.michi-layout-slot.type-note{align-items:start;text-align:left;border-style:dashed}.michi-layout-slot.type-divider{border-style:dashed;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 7px,rgba(255,255,255,.06) 7px 8px)}button.michi-layout-slot{cursor:pointer;font:inherit}.michi-layout-slot.is-selected{border-color:var(--accent,#65e2ca);box-shadow:0 0 0 2px rgba(101,226,202,.2) inset;background:rgba(101,226,202,.14)}.michi-search{display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line,#263348);border-radius:14px;background:var(--panel,#111d30)}.michi-search input{width:100%;min-height:48px;border:0!important;background:transparent!important;color:inherit}.michi-dialog{width:min(1180px,calc(100vw - 32px));max-height:min(900px,calc(100vh - 32px));padding:0;overflow:hidden}.michi-dialog form{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;max-height:inherit}.michi-dialog-heading{padding:22px 26px 12px}.michi-form-fields{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;padding:0 26px 16px}.michi-form-fields .michi-wide{grid-column:1/-1}.michi-builder-toolbar{display:flex;justify-content:space-between;gap:12px;padding:12px 26px;border-block:1px solid var(--line,#263348)}.michi-page-tabs,.michi-toolbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.michi-page-tabs button,.michi-preset-grid button{border:1px solid var(--line,#263348);border-radius:10px;background:rgba(255,255,255,.025);color:inherit;padding:9px 12px;cursor:pointer}.michi-page-tabs button.is-active{border-color:var(--accent,#65e2ca);background:rgba(101,226,202,.12);color:var(--accent,#65e2ca)}.michi-builder-layout{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:0;overflow:hidden}.michi-builder-settings{display:grid;align-content:start;gap:11px;padding:18px;border-right:1px solid var(--line,#263348);overflow:auto}.michi-builder-settings label{display:grid;gap:6px;font-size:.78rem}.michi-builder-settings input,.michi-builder-settings select{width:100%}.michi-builder-settings p{font-size:.72rem;color:var(--muted,#9ba8bc);line-height:1.45}.michi-preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.michi-builder-preview{overflow:auto;padding:24px;display:grid;place-items:center;background:rgba(3,8,16,.36)}.michi-paper{width:min(650px,100%);aspect-ratio:210/297;padding:22px;display:grid;grid-template-rows:auto 1fr;gap:14px;border:1px solid rgba(207,219,239,.36);border-radius:10px;background:#f7f4ed;color:#101722;box-shadow:0 18px 55px rgba(0,0,0,.35)}.michi-paper.is-landscape{aspect-ratio:297/210}.michi-paper header{display:flex;justify-content:space-between;gap:12px}.michi-paper .michi-layout-page{width:100%;height:100%;aspect-ratio:auto}.michi-paper .michi-layout-slot{border-color:rgba(16,23,34,.45);background:rgba(16,23,34,.035);color:#101722}.michi-dialog-actions{padding:14px 26px;border-top:1px solid var(--line,#263348)}.michi-rights-note{margin-right:auto;max-width:440px;color:var(--muted,#9ba8bc);font-size:.75rem}
@media(max-width:1100px){.michi-model-list{grid-template-columns:1fr}.michi-builder-layout{grid-template-columns:1fr}.michi-builder-settings{grid-template-columns:repeat(3,minmax(0,1fr));border-right:0;border-bottom:1px solid var(--line,#263348)}.michi-builder-settings>p{grid-column:1/-1}.michi-form-fields{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.michi-safety-banner{align-items:flex-start;flex-direction:column}.michi-model-card{grid-template-columns:1fr}.michi-model-preview{grid-row:auto}.michi-form-fields,.michi-builder-settings{grid-template-columns:1fr}.michi-builder-toolbar{align-items:flex-start;flex-direction:column}.michi-rights-note{display:none}}

/* Estúdio Michi: composição segura de uma única arte através de slots do fichário. */
.michi-art-launch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(232, 207, 172, .26);
  border-radius: 11px;
  color: #f1dfc4;
  background: rgba(22, 15, 12, .88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  backdrop-filter: blur(9px);
}
.michi-art-launch:hover,
.michi-art-launch:focus-visible { border-color: rgba(98, 230, 200, .58); color: var(--mint); }
.michi-studio-tools {
  position: absolute;
  z-index: 12;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}
.michi-inline-selection {
  position: relative;
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  width: max-content;
  margin: 10px 12px 0 auto;
  padding: 7px;
  border: 1px solid rgba(98, 230, 200, .38);
  border-radius: 13px;
  background: rgba(8, 18, 27, .96);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .35);
}
.michi-inline-selection > span { display: grid; gap: 1px; min-width: 120px; padding-inline: 5px 9px; }
.michi-inline-selection strong { color: var(--mint); font-size: 11px; }
.michi-inline-selection small { color: var(--muted); font-size: 8px; }
.michi-inline-selection .button { min-height: 34px; padding: 7px 10px; font-size: 9px; white-space: nowrap; }
.binder-shell.is-michi-workspace:has(> .michi-studio-tools) > header { padding-right: 360px; }
.binder-shell:not(.is-michi-workspace):has(> .binder-print-tools) > header { padding-right: 190px; }
.binder-slot.is-michi-selection-unavailable { opacity: .42; filter: saturate(.6); pointer-events: none; }
.binder-slot .michi-slot-selector {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 6px;
  place-items: start end;
  border: 2px solid rgba(98, 230, 200, .42);
  border-radius: inherit;
  color: #06130f;
  background: rgba(98, 230, 200, .055);
  cursor: pointer;
}
.binder-slot .michi-slot-selector:hover,
.binder-slot .michi-slot-selector:focus-visible { border-color: var(--mint); background: rgba(98, 230, 200, .13); outline: none; }
.binder-slot .michi-slot-selector span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid rgba(98, 230, 200, .72);
  border-radius: 50%;
  color: #06130f;
  background: rgba(8, 18, 27, .78);
  font-size: 13px;
  font-weight: 900;
}
.binder-slot.is-michi-selected .michi-slot-selector { border-color: var(--mint); background: rgba(98, 230, 200, .22); box-shadow: 0 0 0 3px rgba(98, 230, 200, .18) inset; }
.binder-slot.is-michi-selected .michi-slot-selector span { color: #062219; background: var(--mint); }

.binder-slot > .michi-slot-art {
  position: absolute;
  z-index: 1;
  /* Fill the same outer rectangle as a card. Absolute positioning otherwise
     starts at the slot padding box and leaves a visibly smaller 1px frame. */
  inset: -1px;
  display: block;
  overflow: hidden;
  padding: 0;
  border-radius: inherit;
  background: #0b0a09;
  pointer-events: none;
}
.binder-slot > .michi-slot-art.is-continuous,
.binder-slot > .michi-slot-art.is-repeat,
.binder-slot > .michi-slot-art.is-joined { border-radius: inherit; }
.binder-slot > .michi-slot-art.is-joined { right: auto; bottom: auto; }
.binder-slot.has-michi-art {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.binder-slot.has-michi-art::after { display: none; }
.binder-slot.has-michi-joined-art {
  z-index: 1;
  contain: layout;
  overflow: visible;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.binder-slot.has-michi-joined-art::after { display: none; }
.binder-slot.is-michi-joined-anchor > .michi-slot-art.is-joined { overflow: hidden; }
.binder-slot > .michi-slot-art > img,
.binder-slot > .michi-slot-art > .michi-slot-art-coordinate > img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  object-position: center;
  transform: translateZ(0);
}
.michi-slot-art-coordinate {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}
.binder-slot.has-michi-art .binder-slot-card { position: relative; z-index: 2; }
.binder-slot > .binder-slot-art-preview {
  position: absolute;
  z-index: 2;
  inset: -1px;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
}
.binder-slot > .binder-slot-art-preview:hover { box-shadow: inset 0 0 0 2px rgba(98, 230, 200, .42); }
.binder-slot > .binder-slot-art-preview:focus-visible { outline: 2px solid var(--mint); outline-offset: -3px; }

#michi-slot-art-dialog {
  width: min(980px, calc(100vw - 36px));
  max-width: none;
  max-height: min(850px, calc(100dvh - 36px));
  padding: 0;
  overflow: hidden;
  color: var(--text);
  background: linear-gradient(145deg, #101d30, #0a1422 78%);
}
#michi-slot-art-dialog[open] { display: grid; }
#michi-slot-art-dialog::backdrop { background: rgba(2, 6, 12, .72); backdrop-filter: blur(6px); }
#michi-slot-art-dialog > form {
  display: grid;
  min-height: 0;
  max-height: inherit;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
#michi-slot-art-dialog > form.is-managing .michi-art-layout { grid-template-columns: 1fr; }
#michi-slot-art-dialog > form.is-managing .michi-art-controls,
#michi-slot-art-dialog > form.is-managing .michi-art-preview-panel > strong,
#michi-slot-art-dialog > form.is-managing .michi-art-preview-copy,
#michi-slot-art-dialog > form.is-managing .michi-art-preview,
#michi-slot-art-dialog > form.is-managing #michi-slot-art-status { display: none; }
.michi-art-heading { padding: 22px 68px 15px 24px; border-bottom: 1px solid var(--line); }
.michi-art-heading h2 { margin-top: 6px; font-size: 28px; }
.michi-art-layout {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(300px, .83fr) minmax(340px, 1.17fr);
  overflow: hidden;
}
.michi-art-controls,
.michi-art-preview-panel { min-width: 0; min-height: 0; overflow-y: auto; padding: 20px 22px; }
.michi-art-controls { display: grid; align-content: start; gap: 15px; border-right: 1px solid var(--line); }
.michi-art-controls label,
.michi-art-controls fieldset { display: grid; gap: 7px; margin: 0; color: var(--muted); font-size: 10px; font-weight: 750; }
.michi-art-controls fieldset { padding: 12px; border: 1px solid var(--line); border-radius: 13px; }
.michi-art-controls legend { padding: 0 5px; }
.michi-art-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 9px;
  list-style: none;
  border: 1px solid rgba(139, 166, 204, .18);
  border-radius: 14px;
  background: rgba(5, 12, 22, .48);
}
.michi-art-flow li {
  display: grid;
  min-width: 0;
  gap: 6px;
  align-content: start;
  justify-items: center;
  padding: 8px 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
  opacity: .58;
  transition: border-color .16s ease, color .16s ease, background .16s ease, opacity .16s ease;
}
.michi-art-flow li > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(139, 166, 204, .35);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
}
.michi-art-flow li > div { display: grid; min-width: 0; gap: 2px; }
.michi-art-flow strong { color: inherit; font-size: 8px; line-height: 1.2; }
.michi-art-flow small { overflow-wrap: anywhere; color: inherit; font-size: 7px; font-weight: 500; line-height: 1.3; }
.michi-art-flow li.is-complete { color: #a8eadb; opacity: .9; }
.michi-art-flow li.is-complete > span { border-color: rgba(98, 230, 200, .55); color: #052019; background: var(--mint); }
.michi-art-flow li.is-current {
  border-color: rgba(98, 230, 200, .55);
  color: var(--text);
  background: rgba(98, 230, 200, .08);
  opacity: 1;
}
.michi-art-flow li.is-current > span { border-color: var(--mint); color: var(--mint); box-shadow: 0 0 0 3px rgba(98, 230, 200, .1); }
.michi-art-join-control {
  display: grid;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid rgba(98, 230, 200, .22);
  border-radius: 12px;
  background: rgba(98, 230, 200, .045);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.michi-art-join-control:has(.michi-art-join-toggle[aria-pressed="true"]) {
  border-color: rgba(98, 230, 200, .7);
  background: rgba(98, 230, 200, .1);
  box-shadow: 0 0 0 2px rgba(98, 230, 200, .08) inset;
}
.michi-art-join-control > small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.45;
}
.michi-art-join-toggle.button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: rgba(98, 230, 200, .34);
  color: var(--text);
  background: rgba(98, 230, 200, .045);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.michi-art-join-toggle > span { color: var(--mint); font-size: 16px; transition: transform .16s ease; }
.michi-art-join-toggle strong { color: inherit; font-size: 11px; }
.michi-art-join-toggle:hover:not(:disabled) {
  border-color: var(--mint);
  background: rgba(98, 230, 200, .11);
  transform: translateY(-1px);
}
.michi-art-join-toggle:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}
.michi-art-join-toggle[aria-pressed="true"] {
  border-color: var(--mint);
  color: #052019;
  background: var(--mint);
  box-shadow: 0 7px 18px rgba(49, 206, 172, .2);
}
.michi-art-join-toggle[aria-pressed="true"] > span { color: currentColor; transform: rotate(45deg); }
.michi-art-join-toggle:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.michi-art-controls select,
.michi-art-controls input[type="file"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: #0a1422;
  font: inherit;
}
.michi-art-upload {
  position: relative;
  min-height: 210px;
  padding: 28px 20px;
  place-content: center;
  place-items: center;
  border: 1px dashed rgba(98, 230, 200, .48);
  border-radius: 15px;
  text-align: center;
  background: rgba(98, 230, 200, .035);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.michi-art-upload:hover,
.michi-art-upload.is-dragging { border-color: var(--mint); background: rgba(98, 230, 200, .11); transform: translateY(-1px); }
.michi-art-upload.has-image { min-height: 62px; padding: 12px; }
.michi-art-upload.has-image strong { display: block; }
.michi-art-upload.has-image strong > span,
.michi-art-upload.has-image > span { display: none; }
.michi-art-upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.michi-art-upload strong { display: grid; gap: 8px; color: var(--text); font-size: 12px; }
.michi-art-upload strong > span { color: var(--mint); font-size: 25px; }
.michi-art-upload > span { color: var(--muted-2); font-size: 9px; line-height: 1.45; }
.michi-art-position-editor { display: grid; gap: 10px; min-height: 0; }
.michi-art-position-editor[hidden] { display: none; }
.michi-art-position-viewport {
  position: relative;
  display: grid;
  width: 100%;
  max-height: min(34dvh, 330px);
  aspect-ratio: var(--michi-editor-width, 63) / var(--michi-editor-height, 88);
  place-items: center;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(98, 230, 200, .48);
  border-radius: 12px;
  background: repeating-conic-gradient(#17202a 0 25%, #101821 0 50%) 50% / 16px 16px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.michi-art-position-viewport.is-tall { width: auto; height: min(34dvh, 330px); max-width: 100%; }
.michi-art-position-viewport.is-dragging { cursor: grabbing; border-color: var(--mint); }
.michi-art-position-viewport img { position: absolute; display: block; width: auto; height: auto; max-width: none; max-height: none; object-fit: contain; pointer-events: none; will-change: left, top, width, height; }
.michi-art-position-viewport > span { position: absolute; z-index: 2; bottom: 7px; left: 50%; padding: 4px 8px; border-radius: 999px; color: #fff; background: rgba(0, 0, 0, .68); font-size: 8px; transform: translateX(-50%); pointer-events: none; white-space: nowrap; }
.michi-art-zoom-controls { display: grid; grid-template-columns: 34px minmax(110px, 1fr) 34px auto auto; gap: 7px; align-items: end; }
.michi-art-zoom-controls button { min-height: 34px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: rgba(255, 255, 255, .035); cursor: pointer; }
.michi-art-zoom-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; }
.michi-art-zoom-controls input { width: 100%; min-height: 24px; padding: 0; }
.michi-art-zoom-controls output { min-width: 38px; padding-bottom: 8px; color: var(--mint); font-size: 9px; text-align: center; }
.michi-art-slot-grid {
  display: grid;
  grid-template-columns: repeat(var(--michi-art-columns), minmax(0, 1fr));
  gap: 6px;
}
.michi-art-slot-grid button {
  display: grid;
  min-height: 47px;
  padding: 5px;
  place-items: center;
  border: 1px solid rgba(139, 166, 204, .2);
  border-radius: 8px;
  color: #b9c6d8;
  background: rgba(255, 255, 255, .025);
  font: inherit;
  cursor: pointer;
}
.michi-art-slot-grid button span { font-size: 11px; font-weight: 800; }
.michi-art-slot-grid button small { color: var(--muted); font-size: 7px; }
.michi-art-slot-grid button.is-selected { border-color: var(--mint); color: var(--mint); background: rgba(98, 230, 200, .12); box-shadow: 0 0 0 2px rgba(98, 230, 200, .1) inset; }
.michi-art-slot-grid button.is-occupied { border-style: dashed; opacity: .48; cursor: not-allowed; }

.michi-art-preview-panel { display: grid; align-content: start; gap: 10px; background: rgba(5, 11, 20, .24); }
.michi-art-preview-panel > strong { font-size: 13px; }
.michi-art-preview-copy { margin: -3px 0 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.michi-art-preview {
  display: grid;
  width: min(100%, calc(min(36dvh, 360px) * var(--michi-art-page-ratio, .716)));
  height: auto;
  max-width: 100%;
  grid-template-columns: repeat(var(--michi-art-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--michi-art-rows), auto);
  --michi-art-grid-gap: 4px;
  --michi-art-gap: 6px;
  gap: var(--michi-art-grid-gap);
  justify-self: center;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(232, 207, 172, .2);
  border-radius: 13px;
  background: #120f0d;
}
.michi-art-preview > span {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 63 / 88;
  overflow: hidden;
  border: 1px solid rgba(232, 207, 172, .13);
  border-radius: 5px;
  background: rgba(255, 255, 255, .025);
}
.michi-art-preview > span.is-context {
  border-style: dashed;
  border-color: rgba(139, 166, 204, .14);
  background: rgba(7, 14, 24, .42);
}
.michi-art-preview > span.is-target {
  border-color: rgba(98, 230, 200, .66);
  background: rgba(98, 230, 200, .075);
  box-shadow: 0 0 0 2px rgba(98, 230, 200, .08) inset;
}
.michi-art-preview > span.is-target::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(98, 230, 200, .42) inset;
  content: "";
  pointer-events: none;
}
.michi-art-preview > span.has-michi-joined-art {
  z-index: 1;
  overflow: visible;
  border-color: transparent;
  background: transparent;
}
.michi-art-preview > span > .michi-slot-art { position: absolute; z-index: 1; inset: 0; display: block; overflow: hidden; }
.michi-art-preview > span > .michi-slot-art.is-joined { right: auto; bottom: auto; }
.michi-art-preview > span.is-michi-joined-anchor > .michi-slot-art.is-joined { border-radius: 5px; }
.michi-art-preview > span > .michi-slot-art img { position: absolute; display: block; max-width: none; max-height: none; object-position: center; }
.michi-art-preview-target {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  padding: 7px;
  place-items: center;
  color: rgba(168, 234, 219, .78);
  font-size: 7px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}
.michi-art-preview-occupancy {
  position: absolute;
  z-index: 5;
  top: 4px;
  left: 4px;
  max-width: calc(100% - 8px);
  padding: 3px 5px;
  overflow: hidden;
  border: 1px solid rgba(241, 196, 106, .5);
  border-radius: 999px;
  color: #f5d995;
  background: rgba(15, 11, 7, .82);
  font-size: 6px;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.michi-art-preview > span > i { position: absolute; z-index: 3; right: 3px; bottom: 2px; color: rgba(255, 255, 255, .72); font-size: 7px; font-style: normal; text-shadow: 0 1px 3px #000; }
.michi-art-preview > span.is-context > i {
  z-index: 1;
  inset: 50% auto auto 50%;
  color: rgba(185, 198, 216, .42);
  font-size: 9px;
  text-shadow: none;
  transform: translate(-50%, -50%);
}
.michi-art-preview.is-joining > span.is-michi-join-eligible { isolation: isolate; }
.michi-art-join-slot {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 5px;
  place-items: start end;
  border: 2px dashed rgba(98, 230, 200, .7);
  border-radius: inherit;
  color: var(--mint);
  background: transparent;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.michi-art-join-slot > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(98, 230, 200, .82);
  border-radius: 50%;
  color: #052019;
  background: rgba(8, 18, 27, .84);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .34);
  font-size: 12px;
  font-weight: 900;
  opacity: .72;
  transform: scale(.82);
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.michi-art-preview.is-joining > span.is-michi-join-eligible > .michi-art-join-slot {
  animation: michi-art-join-eligible 1.35s ease-in-out infinite;
}
.michi-art-preview.is-joining > span.is-michi-join-eligible > .michi-art-join-slot:hover {
  border-color: var(--mint);
  background: rgba(98, 230, 200, .055);
  box-shadow: 0 0 0 2px rgba(98, 230, 200, .18) inset;
}
.michi-art-join-slot:focus-visible {
  border-style: solid;
  outline: 2px solid #fff;
  outline-offset: -5px;
  box-shadow: 0 0 0 4px rgba(98, 230, 200, .72) inset;
}
.michi-art-preview > span.is-michi-join-selected > .michi-art-join-slot {
  border-style: solid;
  border-color: var(--mint);
  background: rgba(98, 230, 200, .075);
  box-shadow: 0 0 0 3px rgba(98, 230, 200, .22) inset, 0 0 18px rgba(49, 206, 172, .2);
  animation: none;
}
.michi-art-preview > span.is-michi-join-selected > .michi-art-join-slot > span {
  border-color: var(--mint);
  background: var(--mint);
  opacity: 1;
  transform: scale(1);
}
.michi-art-preview > span.is-michi-join-incomplete > .michi-art-join-slot {
  border-color: #f1c46a;
  color: #f1c46a;
  background: rgba(241, 196, 106, .055);
  box-shadow: 0 0 0 3px rgba(241, 196, 106, .19) inset;
  animation: michi-art-join-incomplete .9s ease-in-out infinite;
}
.michi-art-preview > span.is-michi-join-incomplete > .michi-art-join-slot > span {
  border-color: #f1c46a;
  color: #171006;
  background: #f1c46a;
}
.michi-art-preview .michi-art-join-slot:focus-visible { animation: none; }
@keyframes michi-art-join-eligible {
  0%, 100% { box-shadow: 0 0 0 0 rgba(98, 230, 200, .06) inset; }
  50% { box-shadow: 0 0 0 3px rgba(98, 230, 200, .17) inset; }
}
@keyframes michi-art-join-incomplete {
  0%, 100% { box-shadow: 0 0 0 2px rgba(241, 196, 106, .16) inset; }
  50% { box-shadow: 0 0 0 4px rgba(241, 196, 106, .3) inset; }
}
.michi-art-preview > em { grid-column: 1 / -1; align-self: center; color: var(--muted); font-size: 10px; font-style: normal; text-align: center; }
#michi-slot-art-status { min-height: 17px; margin: 0; color: var(--muted); font-size: 10px; text-align: center; }
.michi-art-existing { display: grid; gap: 7px; margin-top: 3px; }
.michi-art-existing[hidden] { display: none; }
.michi-art-existing > strong { margin-bottom: 2px; font-size: 11px; }
.michi-art-existing article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .025); }
.michi-art-existing img { width: 42px; height: 42px; border-radius: 7px; object-fit: contain; background: rgba(0, 0, 0, .24); }
.michi-art-existing span { display: grid; gap: 2px; min-width: 0; }
.michi-art-existing b { font-size: 10px; }
.michi-art-existing small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.michi-art-existing-actions { display: flex; gap: 6px; align-items: center; }
.michi-art-existing .button { min-height: 32px; padding: 6px 9px; font-size: 9px; }
.michi-art-legacy-warning { margin: 0; padding: 10px 12px; border: 1px solid rgba(241, 196, 106, .42); border-radius: 11px; color: #e8d5ab; background: rgba(241, 196, 106, .08); font-size: 9px; line-height: 1.5; }
.michi-art-legacy-warning[hidden] { display: none; }
.michi-art-legacy-warning strong { color: #f1c46a; }
.michi-art-empty { margin: 0; color: var(--muted); font-size: 10px; }
.michi-art-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 13px 20px; border-top: 1px solid var(--line); }
.michi-art-actions > span { margin-right: auto; max-width: 430px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.michi-art-delete-current.button {
  border-color: rgba(244, 114, 136, .34);
  color: #f3a8b4;
  background: rgba(244, 114, 136, .045);
  box-shadow: none;
}
.michi-art-delete-current.button:hover:not(:disabled) { border-color: rgba(244, 114, 136, .68); background: rgba(244, 114, 136, .1); }
.michi-art-delete-current.button[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .michi-art-join-control,
  .michi-art-join-toggle,
  .michi-art-join-toggle > span,
  .michi-art-join-slot,
  .michi-art-join-slot > span { transition: none; }
  .michi-art-preview.is-joining > span.is-michi-join-eligible > .michi-art-join-slot,
  .michi-art-preview > span.is-michi-join-incomplete > .michi-art-join-slot { animation: none; }
}

@media (max-width: 1150px) {
  .michi-studio-tools { position: relative; width: max-content; max-width: 100%; margin: 10px 12px 0 auto; flex-wrap: wrap; justify-content: flex-end; }
  .binder-shell:has(> .michi-studio-tools) > header { padding-right: 0; }
}

@media (max-width: 760px) {
  .michi-studio-tools,
  .michi-inline-selection { position: static; width: 100%; max-width: none; margin: 0 0 10px; }
  .michi-studio-tools .michi-art-launch { width: 100%; justify-content: center; }
  .michi-inline-selection { flex-wrap: wrap; }
  .michi-inline-selection > span { flex: 1 1 100%; }
  .binder-shell:has(> .michi-studio-tools) > header,
  .binder-shell:has(> .michi-inline-selection) > header { padding-right: 0; }
  #michi-slot-art-dialog { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .michi-art-layout { display: block; overflow-y: auto; }
  .michi-art-controls,
  .michi-art-preview-panel { overflow: visible; }
  .michi-art-controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .michi-art-options { grid-template-columns: 1fr; }
  .michi-art-position-viewport { max-height: 280px; }
  .michi-art-zoom-controls { grid-template-columns: 34px minmax(100px, 1fr) 34px auto; }
  .michi-art-zoom-controls button:last-child { grid-column: 1 / -1; }
  .michi-art-preview {
    width: min(100%, calc(min(34dvh, 300px) * var(--michi-art-page-ratio, .716)));
    height: auto;
  }
  .michi-art-actions > span { display: none; }
}

/* Aparência persistente dos fichários: página, sleeve e proporção física real. */
.organizer-page-color-field {
  display: grid;
  grid-column: 1 / -1;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(139, 166, 204, .2);
  border-radius: 12px;
  background: rgba(9, 19, 33, .62);
}
.organizer-page-color-field[hidden] { display: none; }
.organizer-page-color-field > span { color: #c7d3e3; font-size: 11px; font-weight: 800; }
.organizer-page-color-field > div { display: flex; align-items: center; gap: 10px; }
.organizer-page-color-field input[type="color"] { width: 54px; height: 38px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #0b1627; cursor: pointer; }
.organizer-page-color-field small { color: var(--muted); font-size: 9px; line-height: 1.45; }

.binder-sheet[style*="--binder-page-color"] {
  background:
    linear-gradient(105deg, rgba(255,255,255,.11), transparent 14%),
    linear-gradient(145deg, color-mix(in srgb, var(--binder-page-color) 88%, white 12%), color-mix(in srgb, var(--binder-page-color) 74%, black 26%) 62%);
  box-shadow: inset 0 0 32px color-mix(in srgb, var(--binder-page-color) 48%, black 52%), 0 10px 28px rgba(0,0,0,.22);
}
.binder-sheet[data-page-tone="light"] > header,
.binder-sheet[data-page-tone="light"] > header strong { color: #17120f; text-shadow: 0 1px rgba(255,255,255,.35); }
.binder-sheet[data-page-tone="light"] > header small { color: rgba(17,14,12,.7); }
.binder-sheet[style*="--binder-page-color"] .binder-page { background: color-mix(in srgb, var(--binder-page-color) 68%, black 32%); }

.binder-sheet .binder-page {
  grid-template-rows: repeat(var(--binder-rows), auto);
  align-content: start;
}
.binder-sheet .binder-slot {
  width: 100%;
  height: auto;
  aspect-ratio: 63 / 88;
}
.binder-page-heading { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.binder-page-heading strong,
.binder-page-heading small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.binder-page-actions {
  display: inline-flex;
  min-width: 0;
  max-width: 72%;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.binder-page-reference-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid rgba(98,230,200,.28);
  border-radius: 8px;
  background: rgba(7,18,27,.72);
  color: #b9f7e9;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}
.binder-page-reference-button:hover,
.binder-page-reference-button:focus-visible { border-color: var(--mint); background: rgba(98,230,200,.14); outline: none; }
.binder-sheet .binder-slot > .binder-slot-card {
  position: absolute;
  z-index: 2;
  inset: -1px;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  padding: 0 !important;
}
.binder-slot-card .card-visual,
.binder-slot-card .card-visual picture {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
}
.binder-slot-card .card-visual { aspect-ratio: auto; }
.binder-slot-card .card-visual img { width: 100%; height: 100%; border-radius: inherit; }
.binder-slot-card .card-visual img { object-fit: fill; object-position: center; }
.binder-slot.has-sleeve .binder-slot-card {
  padding: clamp(2px, .3vw, 4px) !important;
  background: var(--binder-sleeve-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--binder-sleeve-color) 78%, white 22%), inset 0 0 9px rgba(255,255,255,.17);
}
.binder-slot.has-sleeve .binder-slot-card .card-visual { border-radius: max(2px, calc(.55vw - 3px)); }
.binder-slot.has-michi-art > .michi-slot-art img { object-fit: fill; }
.binder-slot-state.is-visual { border-color: rgba(174,136,255,.42); color: #decfff; background: rgba(41,25,72,.88); }
.binder-slot .binder-slot-actions .binder-slot-replace { order: 1 !important; color: #f5d18a !important; }
.binder-slot .binder-slot-actions .binder-slot-remove { order: 2 !important; }

.binder-sleeve-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
  padding: 11px;
  border: 1px solid rgba(98,230,200,.2);
  border-radius: 13px;
  background: rgba(7, 19, 30, .7);
}
.binder-sleeve-editor h3 { margin: 0; font-size: 13px; }
.binder-sleeve-editor p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.binder-sleeve-editor label { display: grid; justify-items: center; gap: 3px; color: var(--muted); font-size: 8px; }
.binder-sleeve-editor input[type="color"] { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #0b1627; cursor: pointer; }
.card-information-art .card-visual,
.card-information-visual .card-visual { width: min(100%, 430px); }

@media (max-width: 720px) {
  .binder-sleeve-editor { grid-template-columns: 1fr auto; }
  .binder-sleeve-editor > div { grid-column: 1 / -1; }
  .binder-sleeve-editor .button { min-width: 0; padding-inline: 9px; }
}

/* ColeçãoTCG: contexto compacto, filtros persistentes e páginas públicas. */
.compact-context-header {
  position: sticky;
  z-index: 8;
  top: 0;
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  background: linear-gradient(180deg, var(--bg) 76%, transparent);
}
.compact-context-copy { display: flex; align-items: center; }
.compact-back-button { min-height: 36px; padding: 0 11px; }
.collection-filter-bar { position: relative; top: auto; max-height: none; overflow: visible; }
.wishlist-filter-bar .collection-filter-facets { grid-template-columns: repeat(4, minmax(135px, 1fr)); }

.roadmap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.roadmap-card { min-height: 180px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(17,35,57,.95), rgba(8,19,33,.98)); }
.roadmap-card h2 { margin: 20px 0 8px; font-size: clamp(19px, 2vw, 27px); }
.roadmap-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.roadmap-status { display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; border: 1px solid rgba(98,230,200,.34); border-radius: 999px; color: var(--mint); background: rgba(98,230,200,.08); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.roadmap-status.is-research { border-color: rgba(151,135,255,.4); color: #d5ccff; background: rgba(151,135,255,.1); }
.setting-card-actions, .binder-sleeve-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.binder-sleeve-editor { grid-template-columns: minmax(0,1fr) auto auto; }
.binder-sleeve-editor .button.is-active { border-color: var(--mint); color: #061c1a; background: var(--mint); }
.sealed-product-visual img { max-width: 100%; max-height: 100%; object-fit: contain !important; object-position: center !important; transform: none !important; }
.organizer-cover-pagination { display: flex; grid-column: 1 / -1; justify-content: space-between; gap: 8px; padding-top: 5px; }
.organizer-cover-pagination button { min-height: 34px; flex: 1; padding: 6px 10px; border: 1px solid rgba(139,166,204,.25); border-radius: 9px; color: #dce8f8; background: #101d30; cursor: pointer; }
.organizer-cover-pagination button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 760px) {
  .roadmap-grid { grid-template-columns: 1fr; }
  .compact-context-header { position: relative; top: auto; }
  .collection-filter-bar { top: 0; max-height: none; }
  .wishlist-filter-bar .collection-filter-facets { grid-template-columns: 1fr; }
  .binder-sleeve-editor { grid-template-columns: 1fr; }
}

/* Fluxos principais compactos: os controles começam no topo útil da página. */
.global-search[hidden] { display: none !important; }
.topbar-actions { margin-left: auto; }

.catalog-filter-panel {
  position: relative;
  z-index: 8;
  top: auto;
  margin: 0 0 22px;
}
.collection-filter-primary { align-items: stretch; }
.catalog-filter-primary {
  grid-template-columns: minmax(280px, 1fr) minmax(210px, 260px) auto;
}
.collection-universal-search,
.catalog-search-host { min-width: 0; min-height: 48px; }
.collection-sort-field {
  position: relative;
  display: block;
  min-height: 48px;
  align-self: stretch;
}
.collection-sort-field > span {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 12px;
  pointer-events: none;
  line-height: 1;
}
.collection-sort-field select {
  height: 100%;
  min-height: 48px;
  padding-top: 13px;
}
.catalog-search-host .global-search {
  width: 100%;
  max-width: none;
  height: 48px;
  border-color: rgba(98, 230, 200, .3);
  background: rgba(5, 15, 27, .76);
}
.catalog-quick-filters {
  width: auto;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}
.catalog-quick-filters .filter-chip {
  min-height: 38px;
  padding-inline: 14px;
}
.catalog-filter-facets {
  grid-template-columns: repeat(8, minmax(105px, 1fr));
  gap: 6px;
}
.catalog-filter-footer { display: grid; gap: 8px; }
.catalog-filter-summary { margin: 0; padding-top: 9px; }
.catalog-clear-filters {
  min-height: 42px;
  align-self: end;
  padding: 0 11px;
  border: 1px solid rgba(139, 166, 204, .22);
  border-radius: 9px;
  color: #dce7f5;
  background: transparent;
  cursor: pointer;
}
.catalog-clear-filters:hover { border-color: rgba(98, 230, 200, .48); color: #effffb; }

.view > .collection-filter-bar:first-child { top: auto; margin-top: 0; }
.collections-only-grid { margin-top: 0; align-items: stretch; }
.organization-card-actions { width: 100%; flex-wrap: nowrap; }
.organization-card-actions .organization-card-open { min-width: 0; flex: 1 1 auto; }
.organization-card-actions .organization-card-icon { width: 42px; flex: 0 0 42px; padding: 0; font-size: 17px; }
.organization-card-actions button:disabled { opacity: .35; cursor: not-allowed; }
.collection-create-card,
.binder-create-card { min-height: 520px; }
.collection-create-card > button,
.binder-create-card > button {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 520px;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 28px;
  border: 1px dashed rgba(98, 230, 200, .36);
  border-radius: inherit;
  color: #eaf7f5;
  background: radial-gradient(circle at 50% 42%, rgba(98, 230, 200, .12), transparent 34%), rgba(8, 20, 33, .72);
  cursor: pointer;
  text-align: center;
}
.collection-create-card > button:hover,
.collection-create-card > button:focus-visible,
.binder-create-card > button:hover,
.binder-create-card > button:focus-visible { border-color: rgba(98, 230, 200, .72); background-color: rgba(14, 36, 48, .86); }
.collection-create-symbol {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(98, 230, 200, .45);
  border-radius: 50%;
  color: var(--mint);
  font-size: 30px;
}
.collection-create-card strong,
.binder-create-card strong { font-size: 20px; }
.collection-create-card small,
.binder-create-card small { max-width: 220px; color: var(--muted); line-height: 1.5; }
.master-filters-first { margin-top: 0; }

@media (max-width: 1080px) {
  .catalog-filter-primary { grid-template-columns: 1fr; }
  .catalog-quick-filters { justify-content: flex-start; }
  .catalog-filter-facets { grid-template-columns: repeat(4, minmax(125px, 1fr)); }
}

@media (max-width: 760px) {
  .catalog-filter-panel,
  .view > .collection-filter-bar:first-child { position: relative; top: auto; }
  .catalog-filter-facets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-quick-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-quick-filters .filter-chip { width: 100%; }
  .catalog-clear-filters { width: 100%; }
  .organization-card-actions { flex-wrap: wrap; }
  .organization-card-actions .organization-card-open { flex-basis: 100%; }
  .collection-create-card,
  .collection-create-card > button,
  .binder-create-card,
  .binder-create-card > button { min-height: 320px; }
}

@media (max-width: 480px) {
  .catalog-filter-facets,
  .catalog-quick-filters { grid-template-columns: 1fr; }
}

/* Galeria pública de fichários Michi: visualização, sem ações de edição ou cópia. */
.public-michi-page-shell { display: grid; gap: 18px; }
.public-michi-binder-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 390px), 430px)); justify-content: start; gap: 14px; }
.public-michi-binder-card { width: 100%; max-width: 430px; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-solid); }
.public-michi-binder-card > header { padding: 14px 16px 9px; }
.public-michi-binder-card h2 { margin: 5px 0 3px; font-size: 19px; }
.public-michi-binder-card h2 button { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.public-michi-binder-card h2 button:hover,
.public-michi-binder-card h2 button:focus-visible { color: var(--mint); outline: none; }
.public-michi-binder-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.public-michi-match { display: inline-flex; margin-top: 10px; padding: 5px 8px; border: 1px solid rgba(98,230,200,.26); border-radius: 999px; color: #aaf4e3; background: rgba(98,230,200,.08); font-size: 9px; }
.michi-discovery-toolbar { display: grid; gap: 10px; }
.michi-coverage-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.michi-coverage-filters button { min-height: 34px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.michi-coverage-filters button:hover,
.michi-coverage-filters button:focus-visible { border-color: rgba(98,230,200,.42); color: var(--text); }
.michi-coverage-filters button.is-active { border-color: rgba(98,230,200,.5); color: #aaf4e3; background: rgba(98,230,200,.11); box-shadow: 0 0 0 2px rgba(98,230,200,.04) inset; }
.michi-coverage-filters > span { margin-left: 3px; color: var(--muted-2); font-size: 9px; }
.public-michi-result-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 0; }
.public-michi-result-badges:empty { display: none; }
.public-michi-coverage { display: inline-flex; align-items: baseline; gap: 3px; margin-top: 10px; padding: 5px 8px; border: 1px solid rgba(142,168,255,.28); border-radius: 999px; color: #c8d4ff; background: rgba(142,168,255,.08); font-size: 9px; }
.public-michi-coverage.is-complete { border-color: rgba(98,230,200,.36); color: #aaf4e3; background: rgba(98,230,200,.1); }
.public-michi-coverage.is-visual { color: var(--muted); }
.picker-search-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 9px; }
.picker-search-tools > label { min-width: 0; }
.scanner-trigger { min-height: 48px; white-space: nowrap; }
.scanner-trigger.is-loading { cursor: wait; opacity: .72; }
.scanner-trigger.is-loading > span { display: inline-block; animation: scanner-trigger-pulse .8s ease-in-out infinite alternate; }
.catalog-scanner-trigger { min-width: 142px; min-height: 48px; align-self: stretch; }
@keyframes scanner-trigger-pulse { to { opacity: .35; transform: scale(.86); } }
@media (max-width: 900px) {
  .catalog-filter-primary { grid-template-columns: 1fr; }
  .catalog-scanner-trigger { width: 100%; }
}
@media (max-width: 620px) {
  .picker-search-tools { grid-template-columns: 1fr; }
  .picker-search-tools .scanner-trigger { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .scanner-trigger.is-loading > span { animation: none; }
}
.public-michi-binder-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.public-michi-binder-card > footer button { padding: 0; border: 0; color: #aaf4e3; background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
.public-michi-card-actions { display: inline-flex; align-items: center; gap: 12px; }
.public-michi-preview-stage { display: flex; min-width: 0; align-items: center; gap: 5px; padding: 6px 7px 10px; }
.public-michi-pages { position: relative; display: grid; min-width: 0; flex: 1 1 auto; place-items: center; gap: 6px; }
.public-michi-pages.is-spread { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.public-michi-page { width: min(300px, 100%); min-width: 0; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: var(--public-michi-page, #17130f); }
.public-michi-pages.is-spread .public-michi-page { width: 100%; }
.public-michi-page.is-openable { cursor: pointer; transition: border-color .16s ease, transform .16s ease; }
.public-michi-page.is-openable:hover,
.public-michi-page.is-openable:focus-visible { border-color: rgba(98,230,200,.58); outline: none; transform: translateY(-1px); }
.public-michi-page > header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: rgba(255,255,255,.82); font-size: 9px; }
.public-michi-page > div { display: grid; grid-template-columns: repeat(var(--public-michi-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--public-michi-rows), minmax(0, 1fr)); gap: 4px; aspect-ratio: calc(var(--public-michi-columns) * 63) / calc(var(--public-michi-rows) * 88); }
.public-michi-slot { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; color: inherit; background: rgba(5,7,11,.42); font: inherit; }
button.public-michi-slot { cursor: zoom-in; }
button.public-michi-slot:hover,
button.public-michi-slot:focus-visible { z-index: 5; border-color: var(--mint); outline: 2px solid rgba(98,230,200,.3); outline-offset: -2px; }
.public-michi-slot > .card-visual {
  position: absolute;
  inset: -1px;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: inherit;
  aspect-ratio: auto;
}
.public-michi-slot .card-visual img { width: 100%; height: 100%; object-fit: fill; }
.public-michi-slot > .michi-slot-art { position: absolute; inset: -1px; overflow: hidden; border-radius: inherit; pointer-events: none; }
.public-michi-slot > .michi-slot-art.is-joined { right: auto; bottom: auto; }
.public-michi-slot.has-art { border-color: transparent; background: transparent; box-shadow: none; }
.public-michi-slot.has-michi-joined-art { z-index: 1; contain: layout; overflow: visible; border-color: transparent; background: transparent; }
.public-michi-slot.is-michi-joined-anchor > .michi-slot-art.is-joined { overflow: hidden; }
.public-michi-empty-page { display: grid; width: 100%; min-height: 220px; place-items: center; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); }
.public-michi-preview-arrow { display: grid; width: 29px; height: 54px; flex: 0 0 29px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #eaf2ff; background: rgba(8,17,29,.88); cursor: pointer; }
.public-michi-preview-arrow span { font-size: 24px; line-height: 1; }
.public-michi-preview-arrow:hover:not(:disabled),
.public-michi-preview-arrow:focus-visible { border-color: var(--mint); color: var(--mint); outline: none; }
.public-michi-preview-arrow:disabled { opacity: .24; cursor: default; }
.public-michi-preview-loading { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; border-radius: 10px; background: rgba(4,10,18,.56); backdrop-filter: blur(2px); }

.public-michi-reader-dialog { width: min(1260px, calc(100vw - 24px)); max-width: none; max-height: min(920px, calc(100dvh - 24px)); padding: 0; overflow: hidden; border: 1px solid rgba(139,166,204,.3); border-radius: 22px; color: var(--text); background: #081321; box-shadow: 0 30px 90px rgba(0,0,0,.62); }
.public-michi-reader-dialog::backdrop { background: rgba(2,7,14,.8); backdrop-filter: blur(7px); }
.public-michi-reader-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.public-michi-reader-heading h2 { margin: 5px 0 3px; font-size: 27px; }
.public-michi-reader-heading p { margin: 0; color: var(--muted); }
.public-michi-reader-content { position: relative; max-height: calc(100dvh - 125px); padding: 16px 18px 18px; overflow: auto; }
.public-michi-reader-description { max-width: 760px; margin: 0 auto 12px; color: var(--muted); text-align: center; }
.public-michi-reader-stage { display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; align-items: center; gap: 10px; }
.public-michi-reader-pages { display: grid; width: 100%; min-width: 0; place-items: center; gap: 9px; }
.public-michi-reader-pages.is-spread { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.public-michi-reader-pages .public-michi-page { width: min(520px, 100%); }
.public-michi-reader-pages.is-spread .public-michi-page { width: 100%; }
.public-michi-reader-arrow { display: grid; width: 54px; min-height: 112px; place-items: center; align-content: center; gap: 7px; padding: 8px 4px; border: 1px solid rgba(232,207,172,.22); border-radius: 14px; color: #ead8bd; background: rgba(24,17,13,.72); cursor: pointer; }
.public-michi-reader-arrow span { font-size: 24px; }
.public-michi-reader-arrow small { font-size: 8px; }
.public-michi-reader-arrow:hover:not(:disabled),
.public-michi-reader-arrow:focus-visible { border-color: var(--mint); color: var(--mint); outline: none; }
.public-michi-reader-arrow:disabled { opacity: .22; cursor: default; }
.public-michi-reader-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.public-michi-reader-footer strong { color: #aaf4e3; }
.public-michi-reader-loading { position: absolute; z-index: 12; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(4,10,18,.52); backdrop-filter: blur(2px); }

@media (max-width: 900px) {
  .public-michi-binder-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 390px)); }
  .public-michi-reader-stage { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 5px; }
  .public-michi-reader-arrow { width: 40px; min-height: 86px; }
  .public-michi-reader-arrow small { display: none; }
}
@media (max-width: 600px) {
  .public-michi-binder-list { grid-template-columns: minmax(0, 1fr); }
  .public-michi-binder-card { max-width: none; }
  .public-michi-preview-stage { gap: 3px; padding-inline: 4px; }
  .public-michi-preview-arrow { width: 25px; flex-basis: 25px; }
  .public-michi-page { padding: 4px; }
  .public-michi-page > header { font-size: 7px; }
  .public-michi-page > div { gap: 2px; }
  .public-michi-reader-content { padding: 10px 6px 14px; }
  .public-michi-reader-stage { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 3px; }
  .public-michi-reader-arrow { width: 32px; min-height: 72px; padding: 4px 2px; }
  .public-michi-reader-pages { gap: 3px; }
  .public-michi-reader-pages.is-spread { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Impressão/zoom públicos e geometria idêntica entre arte e carta. */
.public-michi-page { position: relative; }
.public-michi-page > div { --michi-art-gap: 6px; }
.public-michi-slot > .card-visual picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.public-michi-page-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.public-michi-print-toolbar {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: 0 0 13px;
  padding: 9px 11px;
  border: 1px solid rgba(139, 166, 204, .18);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(7, 17, 30, .72);
  font-size: 11px;
}
.public-michi-print-toolbar > span { margin-right: auto; }
.public-michi-page.is-print-selecting .public-michi-slot:not(.is-print-selectable) { opacity: .36; }
.public-michi-slot.is-print-selectable { cursor: pointer; }
.public-michi-slot.is-print-selectable:hover,
.public-michi-slot.is-print-selectable:focus-visible {
  z-index: 22;
  border-color: var(--mint);
  outline: 2px solid rgba(98, 230, 200, .32);
  outline-offset: -2px;
}
.public-michi-slot.is-print-selected {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(98, 230, 200, .32) inset;
}
.public-michi-slot-print-mark {
  position: absolute;
  z-index: 24;
  top: 5px;
  right: 5px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(98, 230, 200, .7);
  border-radius: 50%;
  color: #061814;
  background: rgba(4, 20, 23, .88);
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}
.public-michi-slot.is-print-selected .public-michi-slot-print-mark { background: var(--mint); }
.public-michi-art-dialog {
  width: min(1040px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 166, 204, .32);
  border-radius: 20px;
  color: var(--text);
  background: #081321;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .7);
}
.public-michi-art-dialog[open] { display: flex; flex-direction: column; }
.public-michi-art-dialog.is-single-slot-art { width: min(560px, calc(100vw - 24px)); }
.public-michi-art-dialog::backdrop { background: rgba(2, 7, 14, .84); backdrop-filter: blur(7px); }
.public-michi-art-heading { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.public-michi-art-heading > div:first-child { min-width: 0; }
.public-michi-art-heading-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.public-michi-art-edit { min-height: 40px; padding: 8px 13px; white-space: nowrap; }
.public-michi-art-edit[hidden] { display: none; }
.public-michi-art-heading h2 { margin: 5px 0 2px; font-size: 25px; }
.public-michi-art-heading p { margin: 0; color: var(--muted); }
.public-michi-art-canvas { display: grid; min-height: 0; max-height: calc(100dvh - 126px); flex: 0 1 auto; place-items: center; padding: 18px; overflow: auto; background: radial-gradient(circle, rgba(98, 230, 200, .08), transparent 54%), #050d18; }
.public-michi-art-canvas img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 190px);
  object-fit: contain;
}
.public-michi-art-dialog.is-single-slot-art .public-michi-art-canvas img { width: min(420px, 100%); }

/* A lista de desejos usa a mesma cadência da coleção, em uma única linha quando há espaço. */
.wishlist-filter-bar .collection-filter-facets { grid-template-columns: repeat(8, minmax(105px, 1fr)); gap: 6px; }

/* Produtos de proporções variadas permanecem inteiros dentro de um canvas previsível. */
.sealed-product-visual.is-card {
  --sealed-card-media-inset: 15px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.sealed-product-visual.is-card img {
  position: absolute;
  inset: var(--sealed-card-media-inset);
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 30px) !important;
  max-height: calc(100% - 30px) !important;
  margin: auto;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* O catalogo troca o estado inicial curto pela grade virtual depois do
   bootstrap. Reservar somente a faixa do rodape impede que ele apareca por um
   quadro e saia da viewport, sem mudar filtros, cards ou a grade pronta. */
#view-content:has(> .catalog-filter-panel) {
  min-block-size: calc(100vh - var(--topbar));
}

@supports (height: 100dvh) {
  #view-content:has(> .catalog-filter-panel) {
    min-block-size: calc(100dvh - var(--topbar));
  }
}

@media (max-width: 1540px) {
  .wishlist-filter-bar .collection-filter-facets { grid-template-columns: repeat(4, minmax(125px, 1fr)); }
}

@media (max-width: 600px) {
  .public-michi-page > div { --michi-art-gap: 4px; }
  .public-michi-print-toolbar { align-items: stretch; flex-direction: column; }
  .public-michi-print-toolbar > span { margin-right: 0; }
  .public-michi-slot-print-mark { top: 3px; right: 3px; width: 18px; height: 18px; font-size: 10px; }
  .wishlist-filter-bar .collection-filter-facets { grid-template-columns: 1fr; }
  .sealed-product-visual.is-card { --sealed-card-media-inset: 12px; }
  .sealed-product-visual.is-card img {
    max-width: calc(100% - 24px) !important;
    max-height: calc(100% - 24px) !important;
  }
}

/* Mobile 360-430: controles compactos, cards menores e drawers contidos. */
[data-action="toggle-mobile-filters"],
.mobile-filter-toggle,
.filter-disclosure-toggle {
  display: none;
}

@media (max-width: 960px) {
  .view {
    min-height: calc(100dvh - var(--topbar));
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav {
    right: 8px;
    bottom: 8px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: 8px;
    height: auto;
    min-height: 64px;
    padding: 5px;
  }

  .mobile-nav button {
    min-height: 48px;
    padding: 3px 1px;
  }

  .mobile-nav button small {
    max-width: 100%;
    font-size: clamp(8px, 2.2vw, 9px);
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  /* A busca e os atalhos permanecem expostos; os filtros avancados usam disclosure. */
  .collection-filter-bar,
  .catalog-filter-panel {
    gap: 7px;
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 14px;
  }

  .collection-filter-primary,
  .catalog-filter-primary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .collection-universal-search,
  .catalog-search-host,
  .catalog-search-host .global-search {
    min-height: 42px;
  }

  .collection-universal-search input,
  .catalog-search-host .global-search,
  .collection-sort-field,
  .collection-sort-field select {
    min-height: 42px;
    height: 42px;
  }

  .collection-filter-primary > .collection-universal-search,
  .catalog-filter-primary > .catalog-search-host {
    grid-column: 1;
    grid-row: 1;
  }

  .collection-filter-primary > .collection-sort-field,
  .catalog-filter-primary > .collection-sort-field {
    grid-column: 1 / -1;
  }

  [data-action="toggle-mobile-filters"],
  .mobile-filter-toggle,
  .filter-disclosure-toggle {
    display: inline-flex;
    min-width: 84px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid rgba(98, 230, 200, .34);
    border-radius: 11px;
    color: #dffbf5;
    background: rgba(98, 230, 200, .08);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
  }

  .collection-filter-primary > [data-action="toggle-mobile-filters"],
  .catalog-filter-primary > [data-action="toggle-mobile-filters"],
  .collection-filter-primary > .mobile-filter-toggle,
  .catalog-filter-primary > .mobile-filter-toggle,
  .collection-filter-primary > .filter-disclosure-toggle,
  .catalog-filter-primary > .filter-disclosure-toggle {
    grid-column: 2;
    grid-row: 1;
  }

  [data-action="toggle-mobile-filters"]:focus-visible,
  .mobile-filter-toggle:focus-visible,
  .filter-disclosure-toggle:focus-visible {
    border-color: var(--mint);
    outline: 2px solid rgba(98, 230, 200, .24);
    outline-offset: 2px;
  }

  [data-action="toggle-mobile-filters"][aria-expanded="true"],
  .is-mobile-open > [data-action="toggle-mobile-filters"],
  .is-mobile-open .mobile-filter-toggle,
  .is-mobile-open .filter-disclosure-toggle {
    border-color: rgba(98, 230, 200, .62);
    background: rgba(98, 230, 200, .15);
  }

  .collection-filter-bar > [data-mobile-filter-panel],
  .catalog-filter-panel > [data-mobile-filter-panel],
  .collection-filter-bar > .mobile-filter-body,
  .catalog-filter-panel > .mobile-filter-body,
  .collection-filter-bar > .filter-disclosure-content,
  .catalog-filter-panel > .filter-disclosure-content {
    display: none;
  }

  .collection-filter-bar.is-mobile-open > [data-mobile-filter-panel],
  .catalog-filter-panel.is-mobile-open > [data-mobile-filter-panel],
  .collection-filter-bar.is-mobile-open > .mobile-filter-body,
  .catalog-filter-panel.is-mobile-open > .mobile-filter-body,
  .collection-filter-bar.is-mobile-open > .filter-disclosure-content,
  .catalog-filter-panel.is-mobile-open > .filter-disclosure-content,
  details.collection-filter-bar[open] > .mobile-filter-body,
  details.catalog-filter-panel[open] > .mobile-filter-body {
    display: grid;
    max-height: min(58dvh, 420px);
    gap: 7px;
    padding-top: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .collection-filter-facets,
  .catalog-filter-facets,
  .wishlist-filter-bar .collection-filter-facets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .collection-filter-field,
  .collection-sort-field {
    gap: 3px;
    font-size: 8px;
  }

  .collection-filter-field select,
  .collection-filter-toggle,
  .catalog-clear-filters,
  .collection-clear-filters {
    min-height: 38px;
  }

  /* Fallback para o markup anterior: uma faixa rolavel substitui as muitas linhas. */
  .collection-filter-bar:not(:has([data-mobile-filter-panel])) .collection-filter-facets,
  .catalog-filter-panel:not(:has([data-mobile-filter-panel])) .catalog-filter-facets {
    display: flex;
    align-items: end;
    gap: 6px;
    padding-bottom: 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  .collection-filter-bar:not(:has([data-mobile-filter-panel])) .collection-filter-facets > *,
  .catalog-filter-panel:not(:has([data-mobile-filter-panel])) .catalog-filter-facets > * {
    min-width: 0;
    flex: 0 0 138px;
    scroll-snap-align: start;
  }

  .catalog-quick-filters {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 5px;
    padding-bottom: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .catalog-quick-filters::-webkit-scrollbar { display: none; }

  .catalog-quick-filters .filter-chip {
    width: auto;
    min-width: max-content;
    min-height: 34px;
    flex: 1 0 max-content;
    padding-inline: 10px;
    font-size: 9px;
  }

  .collection-filter-summary,
  .catalog-filter-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
    padding-top: 7px;
  }

  .collection-active-filters {
    grid-column: auto;
    grid-row: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .collection-active-filters button { flex: 0 0 auto; }

  /* A camera fica fora do fluxo mobile enquanto a experiencia e revista. */
  .catalog-scanner-trigger,
  .picker-search-tools > .scanner-trigger {
    display: none;
  }

  .picker-search-tools { grid-template-columns: minmax(0, 1fr); }

  /* Duas cartas por linha em celulares comuns, com chrome interno reduzido. */
  .catalog-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .catalog-card-grid .collection-card {
    border-radius: 13px;
  }

  .catalog-card-grid .collection-card:has(> .card-grid-overlays) > .card-visual {
    width: calc(100% - 12px);
    margin: 42px 6px 0;
    border-radius: 10px;
  }

  .catalog-card-grid .card-grid-overlays {
    top: 6px;
    left: 6px;
    max-width: calc(100% - 68px);
    gap: 4px;
  }

  .catalog-card-grid .card-grid-info-button {
    position: relative;
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 9px;
    font-size: 12px;
  }

  .catalog-card-grid .card-grid-info-button::after {
    content: "";
    position: absolute;
    inset: -6px;
  }

  .catalog-card-grid .card-grid-price-badge {
    min-height: 30px;
    gap: 3px;
    padding: 4px 6px;
    border-radius: 9px;
  }

  .catalog-card-grid .card-grid-price-badge strong { font-size: 10px; }
  .catalog-card-grid .card-grid-price-copy small,
  .catalog-card-grid .card-grid-price-badge .card-price-language-flag { display: none; }

  .catalog-card-grid .collection-card:has(> .card-grid-overlays) .owned-badge {
    top: -35px;
    right: -6px;
    min-height: 30px;
    padding: 4px 6px;
    border-radius: 9px;
    font-size: 9px;
  }

  /* No celular, posse continua no stepper: o selo duplicado deixa a faixa
     superior livre para o preço. O catálogo também omite apenas "Faltando". */
  .catalog-card-grid .collection-inventory-card .owned-badge,
  .collection-card-grid .collection-model-card .owned-badge,
  .collection-card-grid .collection-grouped-card .owned-badge,
  .catalog-card-grid .catalog-discovery-card .owned-badge.missing {
    display: none;
  }

  .catalog-card-grid .collection-inventory-card .card-grid-overlays,
  .collection-card-grid .collection-model-card .card-grid-overlays,
  .collection-card-grid .collection-grouped-card .card-grid-overlays,
  .catalog-card-grid .catalog-discovery-card:has(.owned-badge.missing) .card-grid-overlays,
  .catalog-card-grid .wishlist-card-price-overlay {
    max-width: calc(100% - 12px);
  }

  .catalog-card-grid .collection-card > .card-body {
    min-height: 74px;
    padding: 8px 8px 7px;
  }

  .catalog-card-grid .card-body h3 {
    font-size: 11px;
    line-height: 1.25;
  }

  .catalog-card-grid .card-body p {
    margin-top: 4px;
    font-size: 8px;
  }

  .catalog-card-grid .card-meta {
    gap: 5px;
    margin-top: 7px;
  }

  .catalog-card-grid .catalog-card-actions {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 5px;
    padding: 0 6px 7px;
  }

  .catalog-card-grid .catalog-card-actions .catalog-add-button,
  .catalog-card-grid .catalog-heart-button {
    min-height: 44px;
  }

  .catalog-card-grid .catalog-card-actions .catalog-add-button {
    padding-inline: 6px;
    font-size: 10px;
  }

  /* Colecoes viram linhas visuais compactas, sem perder estatisticas ou acoes. */
  .organization-visual-grid.collections-only-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 10px;
  }

  .collections-only-grid .collection-visual-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 170px;
    border-radius: 15px;
  }

  .collections-only-grid .collection-visual-card > .organization-cover-button {
    width: 92px;
    height: 100%;
    min-height: 170px;
    border-right: 1px solid rgba(139, 166, 204, .18);
    border-bottom: 0;
  }

  .collections-only-grid .organization-cover-art .card-visual {
    width: 76px;
    height: auto;
    max-height: 118px;
    margin: 0;
  }

  .collections-only-grid .organization-visibility {
    top: 7px;
    right: 6px;
    max-width: calc(100% - 12px);
    padding: 4px 6px;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .collections-only-grid .organization-card-body {
    align-content: start;
    gap: 5px;
    padding: 10px;
  }

  .collections-only-grid .organization-card-body .eyebrow { font-size: 7px; }

  .collections-only-grid .organization-card-body h2,
  .collections-only-grid .organization-card-body h3 {
    overflow: hidden;
    font-size: 17px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .collections-only-grid .organization-card-body > p {
    min-height: 0;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .collections-only-grid .organization-card-stats span {
    min-width: 0;
    gap: 1px;
    padding: 5px 3px;
  }

  .collections-only-grid .organization-card-stats strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .collections-only-grid .organization-card-stats small {
    overflow: hidden;
    font-size: 6px;
    line-height: 1.15;
    text-overflow: ellipsis;
  }

  .collections-only-grid .coverage-track { height: 4px; }

  .collections-only-grid .organization-card-actions {
    width: 100%;
    flex-wrap: nowrap;
    gap: 5px;
    padding-bottom: 1px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .collections-only-grid .organization-card-actions .organization-card-open {
    min-width: 72px;
    min-height: 44px;
    flex: 1 0 72px;
    padding-inline: 8px;
  }

  .collections-only-grid .organization-card-actions .organization-card-icon {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
  }

  .collections-only-grid .collection-create-card {
    min-height: 80px;
    border-radius: 15px;
  }

  .collections-only-grid .collection-create-card > button {
    min-height: 80px;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    place-content: center stretch;
    justify-items: start;
    column-gap: 11px;
    row-gap: 3px;
    padding: 12px 14px;
    text-align: left;
  }

  .collections-only-grid .collection-create-symbol {
    width: 44px;
    height: 44px;
    grid-row: 1 / span 2;
    font-size: 22px;
  }

  .collections-only-grid .collection-create-card strong { font-size: 16px; }
  .collections-only-grid .collection-create-card small { max-width: none; font-size: 9px; line-height: 1.3; }

  /* Adicionar carta: composicao de uma tela, com scroll interno apenas se faltar altura. */
  #card-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  #card-dialog > .dialog-close {
    top: 8px;
    right: 8px;
  }

  #card-dialog .card-drawer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 116px minmax(0, 1fr);
    overflow: hidden;
  }

  #card-dialog .card-drawer-art {
    display: grid;
    width: 100%;
    height: 116px;
    min-height: 116px;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 48px 8px 10px;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  #card-dialog .card-drawer-art .card-visual {
    width: 68px;
    max-height: 96px;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    border-radius: 7px;
  }

  #card-dialog .drawer-art-current-price {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    grid-column: 2;
    grid-row: 1;
    gap: 7px;
    margin: 0;
    padding: 6px 8px;
  }

  #card-dialog .drawer-art-current-price > span:last-child {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  #card-dialog .drawer-art-current-price strong {
    grid-row: auto;
    grid-column: auto;
    font-size: 14px;
  }

  #card-dialog .drawer-art-current-price em { display: none; }

  #card-dialog .detail-info {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 8px 10px max(10px, env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
  }

  #card-dialog .card-drawer-header {
    position: static;
    margin: 0 0 6px;
    padding: 0 44px 0 0;
    border-bottom: 0;
    background: transparent;
  }

  #card-dialog .card-drawer-header .eyebrow { font-size: 8px; }

  #card-dialog .detail-info h2 {
    display: -webkit-box;
    overflow: hidden;
    margin: 2px 0 1px;
    font-size: 20px;
    line-height: 1.08;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #card-dialog .detail-subtitle {
    margin-bottom: 4px;
    font-size: 9px;
  }

  #card-dialog .detail-tags {
    gap: 4px;
    margin: 4px 0;
  }

  #card-dialog .detail-tags .tag {
    min-height: 20px;
    padding: 3px 6px;
    font-size: 8px;
  }

  #card-dialog .detail-loading-note,
  #card-dialog .drawer-binder-acquire-context {
    margin-top: 4px;
    padding: 5px 7px;
    font-size: 8px;
  }

  #card-dialog .card-drawer-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "variant variant"
      "condition collection"
      "price price"
      "language language"
      "quantity quantity"
      "warning warning"
      "actions actions";
    gap: 6px 7px;
    padding: 8px;
    border-radius: 12px;
  }

  #card-dialog .card-drawer-form > .drawer-variant-picker { grid-area: variant; }
  #card-dialog .card-drawer-form > label:nth-of-type(1) { grid-area: condition; }
  #card-dialog .card-drawer-form > label:nth-of-type(2) { grid-area: collection; }
  #card-dialog .card-drawer-form > .drawer-paid-price { grid-area: price; }
  #card-dialog .card-drawer-form > .drawer-language-picker { grid-area: language; }
  #card-dialog .card-drawer-form > .drawer-add-quantity { grid-area: quantity; }
  #card-dialog .card-drawer-form > .drawer-variant-warning { grid-area: warning; }
  #card-dialog .card-drawer-form > .drawer-form-actions { grid-area: actions; }

  #card-dialog .card-drawer-form > label {
    gap: 3px;
    font-size: 9px;
  }

  #card-dialog .card-drawer-form > label > span,
  #card-dialog .drawer-fieldset legend {
    gap: 5px;
  }

  #card-dialog .card-drawer-form > label > span b,
  #card-dialog .drawer-fieldset legend > span {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    font-size: 9px;
  }

  #card-dialog .card-drawer-form select,
  #card-dialog .card-drawer-form input {
    min-height: 40px;
    padding: 6px 7px;
    border-radius: 9px;
    font-size: 11px;
  }

  #card-dialog .drawer-fieldset legend {
    margin-bottom: 4px;
    font-size: 10px;
  }

  #card-dialog .drawer-variant-picker > p { display: none; }

  #card-dialog .drawer-choice-grid,
  #card-dialog .drawer-language-grid {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: minmax(0, auto);
    grid-auto-flow: column;
    justify-content: start;
    gap: 5px;
    padding: 1px 1px 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  #card-dialog .drawer-choice-grid { grid-auto-columns: minmax(138px, 1fr); }
  #card-dialog .drawer-language-grid { grid-auto-columns: 66px; }

  #card-dialog .drawer-choice,
  #card-dialog .drawer-language-choice {
    min-height: 40px;
    scroll-snap-align: start;
  }

  #card-dialog .drawer-choice {
    gap: 5px;
    padding: 5px 7px;
  }

  #card-dialog .drawer-choice strong { font-size: 10px; }
  #card-dialog .drawer-choice small { font-size: 7px; }

  #card-dialog .drawer-language-choice {
    min-height: 44px;
    gap: 2px;
    padding: 4px 3px;
  }

  #card-dialog .drawer-language-flag { width: 24px; }
  #card-dialog .drawer-language-choice strong { font-size: 9px; }
  #card-dialog .drawer-language-choice small { display: none; }

  #card-dialog .drawer-add-quantity { padding-top: 0; }

  #card-dialog .drawer-quantity-stepper {
    grid-template-columns: 34px minmax(42px, 1fr) 34px;
    gap: 4px;
  }

  #card-dialog .drawer-quantity-stepper button { min-height: 36px; }

  #card-dialog .drawer-form-actions {
    bottom: -8px;
    margin: 0 -8px -8px;
    padding: 6px 8px max(8px, env(safe-area-inset-bottom, 0px));
  }

  #card-dialog .drawer-form-actions .drawer-submit {
    min-height: 44px;
    font-size: 12px;
  }

  #card-dialog .drawer-copy-details { margin-top: 6px; }
  #card-dialog .drawer-copy-details summary { padding-block: 5px; font-size: 9px; }
}

@media (min-width: 431px) and (max-width: 760px) {
  .catalog-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 339px) {
  .catalog-card-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .catalog-card-grid .catalog-discovery-card { width: min(100%, 232px); }
}

@media (max-width: 430px) and (max-height: 700px) {
  #card-dialog .card-drawer-layout { grid-template-rows: 92px minmax(0, 1fr); }

  #card-dialog .card-drawer-art {
    height: 92px;
    min-height: 92px;
    grid-template-columns: 58px minmax(0, 1fr);
    padding-block: 6px;
  }

  #card-dialog .card-drawer-art .card-visual {
    width: 54px;
    max-height: 76px;
  }

  #card-dialog .drawer-art-current-price { min-height: 42px; }
}

/* Pedido de autenticacao contextual: pequeno, central e utilizavel por toque. */
#auth-required-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  max-width: 440px;
  max-height: calc(100dvh - 24px);
  margin: auto;
  gap: 14px;
  padding: 26px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(139, 166, 204, .3);
  border-radius: 20px;
  color: var(--text);
  background: linear-gradient(150deg, #132137, #091321 82%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58);
}

#auth-required-dialog[open] { display: grid; }

#auth-required-dialog::backdrop {
  background: rgba(2, 6, 12, .76);
  backdrop-filter: blur(6px);
}

#auth-required-dialog > form,
#auth-required-dialog > .auth-required-card {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: 0;
}

#auth-required-dialog > .dialog-close,
#auth-required-dialog .auth-required-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
}

#auth-required-dialog .dialog-heading,
#auth-required-dialog .auth-required-heading {
  min-width: 0;
  padding-right: 38px;
}

#auth-required-dialog h2 {
  margin: 0 0 7px;
  font-size: clamp(21px, 5vw, 27px);
  line-height: 1.12;
}

#auth-required-dialog p,
#auth-required-dialog .auth-required-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

#auth-required-dialog > .login-error { color: #ffadb9; }

#auth-required-dialog > .auth-required-note {
  padding-top: 11px;
  border-top: 1px solid rgba(139, 166, 204, .16);
  font-size: 10px;
}

#auth-required-dialog .auth-required-actions,
#auth-required-dialog .dialog-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 4px;
}

#auth-required-dialog button,
#auth-required-dialog .button,
#auth-required-dialog .google-login-button {
  min-height: 44px;
}

#auth-required-dialog .google-login-button {
  width: 100%;
  justify-content: center;
}

.account-required-view {
  display: grid;
  width: min(620px, 100%);
  min-height: min(460px, calc(100dvh - 190px));
  margin: 0 auto;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: clamp(24px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 22%, rgba(98, 230, 200, .1), transparent 38%), var(--surface-solid);
  text-align: center;
}

.account-required-view h1,
.account-required-view p { margin: 0; }
.account-required-view p { max-width: 520px; color: var(--muted); line-height: 1.55; }
.account-required-symbol { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(98, 230, 200, .42); border-radius: 50%; color: var(--mint); font-size: 24px; }
.account-required-view-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.account-required-view-actions .button { min-height: 44px; }

.public-dashboard-hero { grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr); }
.public-dashboard-points { display: grid; align-content: center; gap: 8px; }
.public-dashboard-points > span { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid rgba(139, 166, 204, .18); border-radius: 13px; background: rgba(5, 15, 27, .58); }
.public-dashboard-points small { color: var(--muted); }
.filter-chip.requires-account { border-style: dashed; }
.filter-chip.requires-account span { color: var(--mint); }

@media (max-width: 760px) {
  .collection-filter-bar:not(.is-mobile-open) .collection-sort-field,
  .catalog-filter-panel:not(.is-mobile-open) .catalog-sort-field {
    display: none;
  }

  .account-required-view {
    min-height: min(420px, calc(100dvh - 174px));
    gap: 9px;
    padding: 24px 16px;
    border-radius: 16px;
  }
  .account-required-view h1 { font-size: 25px; }
  .account-required-view-actions { display: grid; width: 100%; }
  .public-dashboard-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
  .public-dashboard-hero .hero-copy h2 { font-size: clamp(25px, 8vw, 36px); }
  .public-dashboard-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .public-dashboard-points > span { min-width: 0; padding: 9px 7px; }
  .public-dashboard-points strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .public-dashboard-points small { font-size: 7px; }

  .catalog-card-grid .card-grid-info-button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .collections-only-grid .collection-create-card,
  .collections-only-grid .collection-create-card > button {
    height: 78px;
    min-height: 78px;
    max-height: 78px;
  }
  .collections-only-grid .collection-create-card > button { padding-block: 7px; }
  .collections-only-grid .collection-create-card small { display: none; }
}

@media (max-width: 430px) {
  #auth-required-dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    gap: 12px;
    padding: 20px 16px max(16px, env(safe-area-inset-bottom, 0px));
    border-radius: 17px;
  }

  #auth-required-dialog > form,
  #auth-required-dialog > .auth-required-card {
    gap: 12px;
    padding: 0;
  }

  #auth-required-dialog .auth-required-actions,
  #auth-required-dialog .dialog-actions {
    width: 100%;
  }

  #auth-required-dialog button,
  #auth-required-dialog .button { width: 100%; }

  #auth-required-dialog > .dialog-close,
  #auth-required-dialog .auth-required-close {
    width: 44px !important;
    max-width: 44px;
    min-width: 44px;
    height: 44px;
  }
}

/* Mobile fit pass: binders, pickers, information panels and forms. */
@media (max-width: 760px) {
  html:has(dialog[open]),
  body:has(dialog[open]) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  dialog {
    box-sizing: border-box;
    max-width: 100vw;
    max-height: 100dvh;
  }

  /* Binder library: one dense, readable row per binder. */
  .organization-visual-grid.binder-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin-top: 9px;
  }

  .binder-card-grid .binder-visual-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 166px;
    border-radius: 15px;
  }

  .binder-card-grid .binder-visual-card > .organization-cover-button {
    width: 88px;
    height: 100%;
    min-height: 166px;
    border-right: 1px solid rgba(139, 166, 204, .18);
    border-bottom: 0;
  }

  .binder-card-grid .organization-cover-art .card-visual {
    width: 72px;
    height: auto;
    max-height: 112px;
    margin: 0;
  }

  .binder-card-grid .organization-cover-art.is-empty i { font-size: 25px; }
  .binder-card-grid .organization-cover-art.is-empty small { display: none; }

  .binder-card-grid .organization-visibility {
    top: 6px;
    right: 5px;
    max-width: calc(100% - 10px);
    padding: 4px 6px;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .binder-card-grid .organization-card-body {
    align-content: start;
    gap: 4px;
    padding: 9px;
  }

  .binder-card-grid .organization-card-body .eyebrow { font-size: 7px; }

  .binder-card-grid .organization-card-body h2,
  .binder-card-grid .organization-card-body h3 {
    overflow: hidden;
    font-size: 17px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .binder-card-grid .organization-card-body > p {
    min-height: 0;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .binder-card-grid .organization-card-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 9px;
  }

  .binder-card-grid .organization-card-stats span {
    min-width: 0;
    gap: 1px;
    padding: 5px 2px;
  }

  .binder-card-grid .organization-card-stats strong {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .binder-card-grid .organization-card-stats small {
    overflow: hidden;
    font-size: 6px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .binder-card-grid .organization-card-actions {
    width: 100%;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .binder-card-grid .organization-card-actions::-webkit-scrollbar { display: none; }

  .binder-card-grid .organization-card-actions button {
    min-width: max-content;
    min-height: 44px;
    flex: 0 0 auto;
    padding: 6px 8px;
    font-size: 9px;
  }

  .binder-card-grid .organization-card-actions .primary { flex: 1 0 54px; }

  .binder-card-grid .binder-create-card,
  .binder-card-grid .binder-create-card > button {
    height: 78px;
    min-height: 78px;
    max-height: 78px;
  }

  .binder-card-grid .binder-create-card { border-radius: 15px; }

  .binder-card-grid .binder-create-card > button {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    place-content: center stretch;
    justify-items: start;
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 13px;
    text-align: left;
  }

  .binder-card-grid .binder-create-card .collection-create-symbol {
    width: 44px;
    height: 44px;
    grid-row: 1 / span 2;
    font-size: 21px;
  }

  .binder-card-grid .binder-create-card strong { font-size: 15px; }
  .binder-card-grid .binder-create-card small { max-width: none; font-size: 8px; line-height: 1.25; }

  /* Open binder: a single physical page uses the available phone width. */
  #view-content.is-binder-open {
    min-width: 0;
    padding-top: 6px;
    overflow-x: clip;
  }

  #view-content.is-binder-open > .view-header { display: none; }

  #view-content.is-binder-open > .binder-toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: row;
    gap: 6px;
    margin-bottom: 6px;
    padding: 1px 0 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  #view-content.is-binder-open > .binder-toolbar::-webkit-scrollbar { display: none; }

  #view-content.is-binder-open > .binder-toolbar > .filter-chips,
  #view-content.is-binder-open > .binder-toolbar > .entity-actions { display: contents; }

  #view-content.is-binder-open > .binder-toolbar button {
    width: auto;
    min-width: max-content;
    min-height: 44px;
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 9px;
    white-space: nowrap;
  }

  #view-content.is-binder-open > .binder-shell {
    min-width: 0;
    padding: 5px;
    overflow: hidden;
    border-radius: 13px;
  }

  #view-content.is-binder-open .michi-studio-tools,
  #view-content.is-binder-open .binder-print-tools {
    position: static;
    display: grid;
    width: 100%;
    max-width: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 5px;
    margin: 0 0 5px;
  }

  #view-content.is-binder-open .michi-studio-tools .michi-art-launch {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    justify-content: center;
    padding: 6px 8px;
    font-size: 9px;
  }

  #view-content.is-binder-open .binder-shell > header {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: row;
    gap: 6px;
    margin-bottom: 4px;
    padding: 0 3px;
  }

  #view-content.is-binder-open .binder-shell > header > div:first-child { min-width: 0; }
  #view-content.is-binder-open .binder-shell > header .eyebrow { display: none; }

  #view-content.is-binder-open .binder-shell > header h2 {
    overflow: hidden;
    margin: 0;
    font-size: 16px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-content.is-binder-open .binder-template-badge {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-content.is-binder-open .binder-fixed-meta {
    min-width: max-content;
    margin-left: auto;
    justify-items: end;
    text-align: right;
  }

  #view-content.is-binder-open .binder-fixed-meta strong { font-size: 9px; }
  #view-content.is-binder-open .binder-fixed-meta span { font-size: 7px; }

  #view-content.is-binder-open .binder-stage {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  #view-content.is-binder-open .binder-stage .binder-spread {
    width: 100%;
    max-width: none;
    max-height: none;
    padding: 4px;
    overflow: hidden;
    border-radius: 12px;
  }

  #view-content.is-binder-open .binder-sheet {
    width: 100%;
    padding: 4px;
    border-radius: 9px;
  }

  #view-content.is-binder-open .binder-sheet > header {
    min-height: 18px;
    gap: 4px;
    margin-bottom: 3px;
  }

  #view-content.is-binder-open .binder-page-heading { gap: 0; }
  #view-content.is-binder-open .binder-page-heading strong { font-size: 8px; }
  #view-content.is-binder-open .binder-page-heading small { font-size: 6px; }

  #view-content.is-binder-open .binder-page-reference-button {
    min-height: 26px;
    padding: 3px 6px;
    font-size: 0;
  }

  #view-content.is-binder-open .binder-page-reference-button > span { font-size: 12px; }

  #view-content.is-binder-open .binder-sheet .binder-page {
    --michi-art-grid-gap: 2px;
    gap: 2px;
    max-height: none;
    padding: 2px;
    border-radius: 7px;
  }

  #view-content.is-binder-open .binder-sheet .binder-slot {
    border-radius: 4px;
  }

  #view-content.is-binder-open .binder-slot-state {
    top: 3px;
    left: 3px;
    display: grid;
    width: 17px;
    height: 17px;
    max-width: 17px;
    min-height: 17px;
    padding: 0;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    font-size: 0;
    line-height: 1;
  }

  #view-content.is-binder-open .binder-slot-state::after { font-size: 9px; font-weight: 900; }
  #view-content.is-binder-open .binder-slot-state.is-owned::after { content: "\2713"; }
  #view-content.is-binder-open .binder-slot-state.is-wanted::after { content: "\2661"; }
  #view-content.is-binder-open .binder-slot-state.is-missing::after { content: "\2212"; }
  #view-content.is-binder-open .binder-slot-state.is-visual::after { content: "P"; font-size: 7px; }

  #view-content.is-binder-open .binder-slot .binder-slot-actions {
    top: 3px !important;
    right: 3px !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 30px !important;
    opacity: 1;
    transform: none;
  }

  #view-content.is-binder-open .binder-slot .binder-slot-replace,
  #view-content.is-binder-open .binder-slot .binder-slot-remove { display: none !important; }

  #view-content.is-binder-open .binder-slot .binder-slot-actions .binder-slot-info {
    position: relative;
    display: grid !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    place-items: center;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  #view-content.is-binder-open .binder-slot .binder-slot-actions .binder-slot-info::after {
    content: "";
    position: absolute;
    inset: -7px;
  }

  #view-content.is-binder-open .binder-slot-empty { padding: 3px; gap: 2px; }
  #view-content.is-binder-open .binder-slot-empty strong { font-size: 6px; }
  #view-content.is-binder-open .binder-slot-empty span { font-size: 13px; }

  #view-content.is-binder-open .binder-edge-control {
    position: absolute;
    z-index: 35;
    top: 50%;
    display: grid;
    width: 38px;
    min-height: 48px;
    padding: 0;
    place-items: center;
    border-radius: 12px;
    background: rgba(15, 22, 28, .9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
  }

  #view-content.is-binder-open .binder-edge-control.is-previous { left: 3px; }
  #view-content.is-binder-open .binder-edge-control.is-next { right: 3px; }
  #view-content.is-binder-open .binder-edge-control span { font-size: 20px; }
  #view-content.is-binder-open .binder-edge-control small { display: none; }
  #view-content.is-binder-open .binder-edge-control:disabled { pointer-events: none; }
  #view-content.is-binder-open .binder-hint { display: none; }

  /* Card picker: fixed chrome plus one flexible, scrollable results pane. */
  #binder-slot-dialog {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  #binder-slot-dialog[open] {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }

  #binder-slot-dialog .binder-picker-heading {
    min-height: 58px;
    gap: 8px;
    padding: 9px 10px 7px;
  }

  #binder-slot-dialog .binder-picker-heading > div { min-width: 0; }
  #binder-slot-dialog .binder-picker-heading .eyebrow { font-size: 7px; }

  #binder-slot-dialog .binder-picker-heading h2 {
    overflow: hidden;
    margin: 2px 0;
    font: 600 19px/1.05 inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #binder-slot-dialog .binder-picker-heading p {
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #binder-slot-dialog .dialog-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  #binder-slot-dialog .binder-picker-tabs {
    display: flex;
    min-width: 0;
    margin: 0 8px;
    padding: 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  #binder-slot-dialog .binder-picker-tabs::-webkit-scrollbar { display: none; }

  #binder-slot-dialog .binder-picker-tabs button {
    min-width: max-content;
    min-height: 42px;
    flex: 1 0 auto;
    padding: 6px 10px;
    font-size: 8px;
    white-space: nowrap;
  }

  #binder-slot-dialog .picker-search-tools { min-width: 0; }

  #binder-slot-dialog .binder-picker-search {
    min-width: 0;
    margin: 6px 8px;
    padding-inline: 10px;
  }

  #binder-slot-dialog .binder-picker-search input { min-height: 40px; }

  #binder-slot-dialog .binder-picker-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 5px;
    min-height: 0;
    max-height: none;
    padding: 2px 8px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: auto;
  }

  #binder-slot-dialog .binder-picker-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 63 / 88;
    padding: 3px;
    overflow: hidden;
    border-radius: 8px;
    box-sizing: border-box;
  }

  #binder-slot-dialog .binder-picker-card .card-visual {
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 6px;
  }

  #binder-slot-dialog .binder-picker-card .card-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #binder-slot-dialog .binder-picker-visual-state {
    position: absolute;
    right: 5px;
    bottom: 5px;
    left: 5px;
    max-width: none;
    padding: 4px;
    border-radius: 6px;
    color: #f3f7ff;
    background: rgba(5, 11, 20, .86);
    font-size: 7px;
    text-align: center;
  }

  #binder-slot-dialog .binder-picker-note {
    min-height: 30px;
    margin: 0;
    padding: 7px 9px max(7px, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    border-top: 1px solid rgba(139, 166, 204, .13);
    font-size: 8px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Card information: compact preview, two-column facts and internal scroll. */
  #card-info-dialog {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  #card-info-dialog > .dialog-close {
    top: 7px;
    right: 7px;
    width: 44px;
    height: 44px;
  }

  #card-info-dialog .card-information-content { height: 100%; }

  #card-info-dialog .card-information-layout {
    display: grid;
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 132px minmax(0, 1fr);
    overflow: hidden;
  }

  #card-info-dialog .card-information-art,
  #card-info-dialog .card-information-visual {
    width: 100%;
    height: 132px;
    min-height: 0;
    padding: 7px 52px 7px 10px;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  #card-info-dialog .card-information-art .card-visual,
  #card-info-dialog .card-information-visual .card-visual {
    width: auto;
    height: 118px;
    max-width: 100%;
    max-height: 118px;
    margin: 0;
  }

  #card-info-dialog .card-information-body,
  #card-info-dialog .card-information-details,
  #card-info-dialog .card-information-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 8px 10px 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: auto;
  }

  #card-info-dialog .card-information-header {
    position: sticky;
    z-index: 8;
    top: -8px;
    margin: -8px -10px 7px;
    padding: 8px 48px 7px 10px;
  }

  #card-info-dialog .card-information-header .eyebrow { font-size: 7px; }

  #card-info-dialog .card-information-header h2 {
    display: -webkit-box;
    overflow: hidden;
    margin: 2px 0;
    font-size: 19px;
    line-height: 1.08;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #card-info-dialog .card-information-header p { font-size: 9px; }

  #card-info-dialog .card-information-meta,
  #card-info-dialog .card-information-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  #card-info-dialog .card-information-meta > *,
  #card-info-dialog .card-information-facts > * {
    padding: 6px 7px;
    border-radius: 9px;
  }

  #card-info-dialog .card-information-meta dt,
  #card-info-dialog .card-information-facts dt { font-size: 7px; }

  #card-info-dialog .card-information-meta dd,
  #card-info-dialog .card-information-facts dd {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.2;
  }

  #card-info-dialog .card-information-number { margin-top: 2px; font-size: 8px; }

  #card-info-dialog .card-information-section,
  #card-info-dialog .card-information-pricing { margin-top: 7px; }

  #card-info-dialog .card-information-section h3,
  #card-info-dialog .card-information-pricing h3 { margin-bottom: 4px; font-size: 11px; }

  #card-info-dialog .card-information-section p { margin: 0; font-size: 9px; line-height: 1.35; }

  #card-info-dialog .card-information-pricing {
    gap: 6px;
    padding: 7px;
    border-radius: 10px;
  }

  #card-info-dialog .card-information-pricing > header p { display: none; }

  #card-info-dialog .card-information-conditions {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 3px;
  }

  #card-info-dialog .card-information-condition {
    min-height: 40px;
    gap: 1px;
    padding: 3px 1px;
    border-radius: 7px;
  }

  #card-info-dialog .card-information-condition strong { font-size: 8px; }
  #card-info-dialog .card-information-condition span { font-size: 7px; }

  #card-info-dialog .card-information-price-result,
  #card-info-dialog .card-information-price-empty { min-height: 46px; }

  #card-info-dialog .card-information-price-result { gap: 7px; padding: 6px 7px; }
  #card-info-dialog .card-information-price-amount > strong { font-size: 16px; }
  #card-info-dialog .card-information-price-result b { font-size: 9px; }
  #card-info-dialog .card-information-price-result span,
  #card-info-dialog .card-information-price-result small { font-size: 7px; }
  #card-info-dialog .card-information-price-empty { padding: 6px 7px; }
  #card-info-dialog .card-information-price-empty strong { font-size: 9px; }
  #card-info-dialog .card-information-price-empty span { font-size: 8px; }

  #card-info-dialog .binder-sleeve-editor {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    margin-top: 7px;
    padding: 7px;
    border-radius: 10px;
  }

  #card-info-dialog .binder-sleeve-editor > div:first-child { grid-column: 1 / -1; }
  #card-info-dialog .binder-sleeve-editor h3 { font-size: 10px; }
  #card-info-dialog .binder-sleeve-editor p { display: none; }
  #card-info-dialog .binder-sleeve-modes { flex-wrap: nowrap; gap: 4px; overflow-x: auto; }
  #card-info-dialog .binder-sleeve-editor .button { min-height: 40px; padding: 5px 7px; font-size: 8px; }

  #card-info-dialog .card-information-actions {
    position: sticky;
    z-index: 9;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 5px;
    margin: 8px -10px 0;
    padding: 6px 10px max(7px, env(safe-area-inset-bottom, 0px));
  }

  #card-info-dialog .card-information-actions .button {
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
    font-size: 9px;
  }

  #card-info-dialog .card-information-actions .binder-info-remove {
    color: #ffacb8;
    border-color: rgba(255, 108, 132, .34);
  }

  /* Every form dialog owns its scroll; the page and final actions stay stable. */
  dialog.form-dialog {
    width: 100vw;
    max-width: none;
    max-height: 100dvh;
    margin: auto 0 0;
    padding: 0;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
  }

  dialog.form-dialog[open] { display: block; }

  dialog.form-dialog > form {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-height: 100dvh;
    padding: 14px 14px 0;
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
  }

  dialog.form-dialog .dialog-heading { flex: 0 0 auto; }
  dialog.form-dialog .dialog-heading .eyebrow { font-size: 7px; }

  dialog.form-dialog .dialog-heading h2 {
    margin: 4px 0 3px;
    font-size: 20px;
    line-height: 1.08;
  }

  dialog.form-dialog .dialog-heading p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 8px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  dialog.form-dialog .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
  }

  dialog.form-dialog .form-grid label { gap: 4px; font-size: 8px; }

  dialog.form-dialog .form-grid input,
  dialog.form-dialog .form-grid select,
  dialog.form-dialog .full-form-label input {
    height: 42px;
    min-height: 42px;
    padding-inline: 9px;
    font-size: 11px;
  }

  dialog.form-dialog .full-form-label {
    gap: 4px;
    margin-top: 9px;
    font-size: 8px;
  }

  dialog.form-dialog .full-form-label textarea {
    min-height: 60px;
    padding: 8px 9px;
    font-size: 11px;
    resize: vertical;
  }

  dialog.form-dialog .extras-fieldset {
    margin-top: 10px;
    padding: 8px;
  }

  dialog.form-dialog .extras-options { gap: 5px; }
  dialog.form-dialog .extras-options label { padding: 6px 8px; font-size: 8px; }
  dialog.form-dialog .form-footnote { margin-top: 8px; font-size: 8px; line-height: 1.35; }

  dialog.form-dialog .dialog-actions {
    position: sticky;
    z-index: 10;
    bottom: 0;
    display: grid;
    width: auto;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    flex-direction: row;
    gap: 6px;
    margin: 11px -14px 0;
    padding: 7px 14px max(9px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(139, 166, 204, .16);
    background: linear-gradient(0deg, #0f1827 82%, rgba(15, 24, 39, .95));
  }

  dialog.form-dialog .dialog-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 7px 8px;
    font-size: 10px;
  }

  /* New collection: essential fields first, optional cover kept compact. */
  #organizer-dialog[data-kind="collection"] > form { max-height: min(100dvh, 620px); }

  #organizer-dialog[data-kind="collection"] .form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(112px, .72fr);
  }

  #organizer-dialog[data-kind="collection"] .organizer-name-field {
    grid-column: 1;
    order: 1;
  }

  #organizer-dialog[data-kind="collection"] #organizer-visibility-field {
    grid-column: 2;
    order: 2;
  }

  #organizer-dialog[data-kind="collection"] #organizer-cover-field {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 124px;
    align-items: end;
    gap: 4px 6px;
    order: 3;
  }

  #organizer-dialog[data-kind="collection"] #organizer-cover-field > span:first-child { grid-column: 1 / -1; }
  #organizer-dialog[data-kind="collection"] #organizer-cover-search { grid-column: 1; }

  #organizer-dialog[data-kind="collection"] .organizer-cover-selected {
    min-width: 0;
    min-height: 42px;
    grid-column: 2;
    margin: 0;
    padding: 4px 6px;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #organizer-dialog[data-kind="collection"] .organizer-cover-mini { width: 26px; height: 36px; }
  #organizer-dialog[data-kind="collection"] .organizer-cover-mini + span { display: none; }
  #organizer-dialog[data-kind="collection"] .organizer-cover-selected > button { min-width: 32px; min-height: 32px; }

  #organizer-dialog[data-kind="collection"] .organizer-cover-results {
    top: calc(100% + 4px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: min(42dvh, 280px);
  }

  /* Binder onboarding keeps all four common sizes visible on a regular phone. */
  #organizer-dialog[data-kind="binder"] .binder-format-field {
    padding: 7px;
  }

  #organizer-dialog[data-kind="binder"] .binder-format-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  #organizer-dialog[data-kind="binder"] .binder-format-option {
    min-height: 72px;
    gap: 3px;
    padding: 6px 3px;
  }

  #organizer-dialog[data-kind="binder"] .binder-format-option strong { font-size: 10px; }
  #organizer-dialog[data-kind="binder"] .binder-format-option small { display: none; }
  #organizer-dialog[data-kind="binder"] .binder-format-preview { height: 32px; }

  /* Shared catalog/trade pickers use the same contained dialog geometry. */
  #catalog-picker-dialog,
  #trades-add-dialog {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  #catalog-picker-dialog[open] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  #trades-add-dialog[open] {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }

  #catalog-picker-dialog .catalog-picker-heading,
  #trades-add-dialog .catalog-picker-heading {
    min-height: 58px;
    padding: 9px 10px 7px;
  }

  #catalog-picker-dialog .catalog-picker-heading h2,
  #trades-add-dialog .catalog-picker-heading h2 { margin: 2px 0; font-size: 19px; }

  #catalog-picker-dialog .catalog-picker-heading p,
  #trades-add-dialog .catalog-picker-heading p { font-size: 8px; }

  #catalog-picker-dialog .picker-search-tools,
  #trades-add-dialog > .catalog-picker-search { min-width: 0; }

  #catalog-picker-dialog .catalog-picker-search,
  #trades-add-dialog .catalog-picker-search {
    margin: 6px 8px;
    padding-inline: 10px;
  }

  #catalog-picker-dialog .catalog-picker-search input,
  #trades-add-dialog .catalog-picker-search input { min-height: 40px; }

  #catalog-picker-dialog .catalog-picker-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 0;
    max-height: none;
    gap: 5px;
    padding: 2px 8px 8px;
    overflow-y: auto;
  }

  #catalog-picker-dialog .catalog-picker-card { gap: 4px; padding: 4px; border-radius: 8px; }
  #catalog-picker-dialog .catalog-picker-card > span { gap: 1px; }
  #catalog-picker-dialog .catalog-picker-card strong { font-size: 9px; }
  #catalog-picker-dialog .catalog-picker-card small { font-size: 7px; }
  #catalog-picker-dialog .catalog-picker-price { display: none; }

  #catalog-picker-dialog .catalog-picker-note,
  #trades-add-dialog .catalog-picker-note {
    min-height: 30px;
    padding: 7px 9px max(7px, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #trades-add-dialog .trades-add-tabs { margin: 5px 8px 0; }
  #trades-add-dialog .trades-add-tabs button { min-height: 40px; padding: 5px; font-size: 8px; }
  #trades-add-dialog .trades-add-results { min-height: 0; max-height: none; padding: 0 8px 8px; overflow-y: auto; }
  #trades-add-dialog .trades-lot-list { gap: 6px; }
  #trades-add-dialog .trades-lot-card { gap: 7px; padding: 7px; }

  #trade-binder-dialog {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  #trade-binder-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  #trade-binder-dialog .trade-binder-dialog-heading { padding: 10px; }
  #trade-binder-dialog .trade-binder-dialog-heading h2 { margin: 2px 0; font-size: 19px; }
  #trade-binder-dialog .trade-binder-dialog-heading p { font-size: 8px; }
  #trade-binder-dialog .trade-binder-content { min-height: 0; max-height: none; padding: 8px; overflow-y: auto; }

  .public-michi-binder-card > footer button {
    min-width: 72px;
    min-height: 40px;
    padding: 7px 10px;
    border: 1px solid rgba(98, 230, 200, .24);
    border-radius: 9px;
    background: rgba(98, 230, 200, .07);
  }

  #public-michi-reader-dialog .public-michi-reader-heading > .dialog-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  #card-info-dialog .card-information-meta .card-information-search-link {
    position: relative;
  }

  #card-info-dialog .card-information-meta .card-information-search-link::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
}

@media (max-width: 430px) and (max-height: 700px) {
  #card-info-dialog .card-information-layout { grid-template-rows: 96px minmax(0, 1fr); }

  #card-info-dialog .card-information-art,
  #card-info-dialog .card-information-visual {
    height: 96px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #card-info-dialog .card-information-art .card-visual,
  #card-info-dialog .card-information-visual .card-visual {
    height: 86px;
    max-height: 86px;
  }
}

@media (max-width: 350px) {
  .binder-card-grid .binder-visual-card {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .binder-card-grid .binder-visual-card > .organization-cover-button { width: 78px; }
  .binder-card-grid .organization-cover-art .card-visual { width: 64px; }
  .binder-card-grid .organization-card-actions button { padding-inline: 6px; font-size: 8px; }
  #binder-slot-dialog .binder-picker-results,
  #catalog-picker-dialog .catalog-picker-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #organizer-dialog[data-kind="binder"] .binder-format-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Navegação secundária móvel e listas de imagens com custo previsível. */
.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-more-button {
  letter-spacing: 1px;
}

.mobile-more-dialog {
  position: fixed;
  inset: auto 0 0;
  width: min(520px, 100vw);
  height: min(88dvh, 700px);
  max-width: none;
  max-height: calc(100dvh - 8px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 166, 204, .3);
  border-radius: 20px 20px 0 0;
  color: var(--text);
  background: #0a1626;
  box-shadow: 0 -24px 70px rgba(0, 0, 0, .56);
}

.mobile-more-dialog::backdrop {
  background: rgba(2, 7, 14, .74);
  backdrop-filter: blur(5px);
}

.mobile-more-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.mobile-more-heading {
  position: relative;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(139, 166, 204, .18);
}

.mobile-more-heading h2 { margin: 3px 0 1px; font-size: 21px; }
.mobile-more-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.mobile-more-heading .dialog-close { position: static; flex: 0 0 44px; }

.mobile-more-scroll {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 15px;
  padding: 11px 12px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.mobile-more-section { display: grid; gap: 7px; }
.mobile-more-section h3 { margin: 0 4px; color: #83e8d4; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.mobile-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

.mobile-more-item {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(139, 166, 204, .2);
  border-radius: 12px;
  color: #edf5ff;
  background: #0f1d30;
  cursor: pointer;
  text-align: left;
}

.mobile-more-item:hover,
.mobile-more-item:focus-visible,
.mobile-more-item.is-active {
  border-color: rgba(98, 230, 200, .55);
  background: rgba(98, 230, 200, .1);
}

.mobile-more-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: var(--mint); background: rgba(98, 230, 200, .1); font-size: 15px; }
.mobile-more-item > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.mobile-more-item strong,
.mobile-more-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-more-item strong { font-size: 10px; }
.mobile-more-item small { color: #8ea0b8; font-size: 8px; }
.mobile-more-item b { min-width: 22px; padding: 3px 5px; border-radius: 999px; color: #07131c; background: var(--mint); font-size: 8px; text-align: center; }
.mobile-more-item:disabled { opacity: .48; cursor: default; }
.mobile-more-section.is-coming-soon .mobile-more-item { min-height: 50px; }

.trades-add-results.is-card-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.trades-add-results.is-lot-grid {
  display: grid;
  gap: 9px;
}

.catalog-picker-results,
.trades-add-results,
.binder-picker-results {
  overscroll-behavior: contain;
}

@media (max-width: 1040px) {
  .trades-add-results.is-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .mobile-more-dialog {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    margin: 0;
  }
}

html.is-mobile-more-scroll-locked,
body.is-mobile-more-scroll-locked,
html:has(#mobile-more-dialog[open]),
body:has(#mobile-more-dialog[open]) {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 760px) {
  .mobile-header { gap: 10px; padding-inline: 16px; }
  .mobile-header-actions { margin-left: auto; }
  .mobile-header-actions .icon-button { width: 40px; min-width: 40px; height: 40px; }
  .trades-add-results.is-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .trades-add-results.is-lot-grid { gap: 6px; }
}

@media (max-width: 350px) {
  .mobile-header { padding-inline: 12px; }
  .mobile-header-actions { gap: 5px; }
  .mobile-header-actions .icon-button { width: 38px; min-width: 38px; height: 38px; }
  .trades-add-results.is-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Composicao leve durante a rolagem tactil. Blurs em camadas fixas obrigam o
   navegador a reamostrar a pagina inteira a cada quadro; fundos opacos mantem
   o mesmo contraste sem esse custo. Cada item virtual tambem delimita sua
   propria area de layout e pintura. */
@media (max-width: 960px) {
  .ambient { display: none; }

  .mobile-header {
    background: #070b14;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mobile-nav {
    background: #0c1320;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .virtualized-grid > :where(
    .collection-card,
    .master-set-card,
    .master-card,
    .sealed-product-card,
    .price-row,
    .organization-visual-card,
    .binder-picker-card,
    .catalog-picker-card,
    .trades-lot-card
  ) {
    contain: layout paint style;
  }

  .card-grid-info-button,
  .card-grid-price-badge,
  .owned-badge {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .collection-card,
  .tcgdex-card-image,
  .sealed-add-product-card {
    transition: none;
  }

  .collection-card:hover,
  .sealed-add-product-card:hover,
  .sealed-add-product-card:focus-visible {
    box-shadow: none;
    transform: none;
  }

  .collection-card:hover .tcgdex-card-image { filter: none; }
}

/* Slots do fichário: a arte permanece limpa até a pessoa pedir as ações. */
#view-content.is-binder-open .binder-slot .binder-slot-actions {
  top: auto !important;
  right: auto !important;
  bottom: 4px !important;
  left: 4px !important;
  display: flex !important;
  width: auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}

#view-content.is-binder-open .binder-slot:hover .binder-slot-actions,
#view-content.is-binder-open .binder-slot:focus-within .binder-slot-actions {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

#view-content.is-binder-open .binder-slot.is-actions-revealed .binder-slot-actions,
#view-content.is-binder-open .binder-slot.is-actions-revealed:hover .binder-slot-actions,
#view-content.is-binder-open .binder-slot.is-actions-revealed:focus-within .binder-slot-actions {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

#view-content.is-binder-open .binder-slot .binder-slot-actions .binder-slot-info,
#view-content.is-binder-open .binder-slot .binder-slot-actions .binder-slot-remove {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  order: initial !important;
  place-items: center;
}

#view-content.is-binder-open .binder-slot .binder-slot-state { pointer-events: none; }
#view-content.is-binder-open .binder-slot-card { touch-action: pan-y pinch-zoom; }

@media (max-width: 760px) {
  #view-content.is-binder-open .binder-slot .binder-slot-state {
    display: none !important;
  }

  #view-content.is-binder-open .binder-slot .binder-slot-actions .binder-slot-info,
  #view-content.is-binder-open .binder-slot .binder-slot-actions .binder-slot-remove {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    font-size: 11px !important;
  }
}

/* Complete/Master Sets e Colecao Selada: densidade propria para telefones.
   Estes contratos ficam no fim da cascata para neutralizar os cards desktop
   (390 px de altura) sem alterar sua geometria em telas maiores. */
@media (max-width: 760px) {
  /* Lista de sets: busca, serie e estados cabem em duas linhas curtas. */
  .master-filters.master-filters-first {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 34%);
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    padding: 7px;
    border-radius: 12px;
  }

  .master-filters.master-filters-first > input,
  .master-filters.master-filters-first > select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 7px 9px;
    font-size: 10px;
  }

  .master-filters.master-filters-first > .filter-chips {
    grid-column: 1 / -1;
    width: 100%;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
  }

  .master-filters.master-filters-first .filter-chip {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 8px;
    white-space: nowrap;
  }

  /* Um set vira uma linha compacta, preservando logo, progresso e texto. */
  .master-set-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .master-set-card {
    display: grid;
    min-height: 128px;
    max-height: 148px;
    grid-template-columns: 94px minmax(0, 1fr);
    grid-template-rows: minmax(128px, auto);
    align-items: stretch;
  }

  .master-set-card .master-set-art {
    width: 94px;
    height: 100%;
    min-height: 128px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 0;
  }

  .master-set-card .master-set-art > img:not(.master-set-symbol) {
    inset: 9px;
    width: calc(100% - 18px);
    height: calc(100% - 18px);
  }

  .master-set-card .master-set-art > .master-set-symbol {
    right: 6px;
    bottom: 6px;
    width: 24px;
    height: 24px;
    padding: 3px;
  }

  .master-set-card .master-set-art.has-no-logo > .master-set-symbol,
  .master-set-card .master-set-art.logo-failed > .master-set-symbol {
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    padding: 5px;
    border-radius: 9px;
  }

  .master-set-card-copy {
    min-height: 0;
    padding: 8px 9px;
  }

  .master-set-card-copy > .eyebrow {
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .master-set-card-copy .set-market-badge {
    max-width: 100%;
    margin-block: 2px 0;
    padding: 2px 5px;
    overflow: hidden;
    font-size: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .master-set-card-copy h2 {
    min-height: 0;
    margin: 3px 0;
    font-size: 15px;
    line-height: 1.12;
    -webkit-line-clamp: 1;
  }

  .master-set-card-copy p { font-size: 8px; }
  .master-set-card-copy small { display: none; }

  .master-set-progress {
    display: grid;
    height: 29px;
    min-height: 29px;
    margin-top: auto;
    padding: 0 17px 0 0;
  }

  .master-set-progress .coverage-track { height: 5px; }

  .master-set-card .master-set-progress .master-set-orbit {
    top: 50%;
    right: 0;
    left: auto;
    width: 29px;
    height: 29px;
    transform: translateY(-50%);
  }

  .master-set-card .master-set-progress .master-set-orbit::after { inset: 4px; }
  .master-set-card .master-set-progress .master-set-orbit strong { font-size: 7px; }

  /* Detalhe do set: titulo, metricas e filtros sem empurrar as cartas para
     fora da primeira tela. As metricas continuam acessiveis por gesto lateral. */
  #view-content:has(.master-set-summary) > .view-header {
    gap: 5px;
    margin-bottom: 7px;
  }

  #view-content:has(.master-set-summary) > .view-header .view-title .eyebrow { font-size: 7px; }

  #view-content:has(.master-set-summary) > .view-header .view-title h1 {
    margin: 2px 0;
    font-size: 21px;
    line-height: 1.06;
  }

  #view-content:has(.master-set-summary) > .view-header .view-title p { display: none; }

  #view-content:has(.master-set-summary) > .view-header .view-header-actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 34%);
    gap: 6px;
  }

  #view-content:has(.master-set-summary) > .view-header .set-goal-switch {
    width: auto;
    min-width: 0;
  }

  #view-content:has(.master-set-summary) > .view-header .set-goal-switch button,
  #view-content:has(.master-set-summary) > .view-header .view-header-actions > .button {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 6px 7px;
    font-size: 8px;
  }

  #view-content:has(.master-set-summary) > .view-header .set-goal-switch { padding: 2px; }

  .master-set-summary,
  .complete-set-summary,
  .master-variant-summary {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: minmax(108px, 36vw);
    grid-auto-flow: column;
    gap: 1px;
    margin: 7px 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .master-set-summary::-webkit-scrollbar { display: none; }

  .master-set-summary > span {
    min-height: 56px;
    padding: 8px;
  }

  .master-set-summary > span strong { font-size: 12px; }
  .master-set-summary > span small { margin-top: 3px; font-size: 6px; line-height: 1.25; }

  .master-variant-controls {
    display: grid;
    grid-template-columns: minmax(126px, .9fr) minmax(0, 1.1fr);
    gap: 5px;
    margin: 7px 0;
    padding: 7px;
    border-radius: 12px;
  }

  .master-variant-controls .master-mode-switch {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
  }

  .master-variant-controls .master-mode-switch button {
    min-width: 0;
    min-height: 38px;
    padding: 5px;
    font-size: 7px;
    line-height: 1.1;
  }

  .master-variant-controls .master-card-search {
    min-width: 0;
    grid-column: 2;
  }
  .master-variant-controls .master-card-search::before { left: 11px; font-size: 15px; }

  .master-variant-controls .master-card-search input {
    min-height: 40px;
    padding: 0 33px;
    font-size: 9px;
  }

  .master-variant-controls > .filter-chips {
    grid-column: 1 / -1;
    width: 100%;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
  }

  .master-variant-controls > .filter-chips .filter-chip {
    min-height: 36px;
    padding-inline: 9px;
    font-size: 8px;
    white-space: nowrap;
  }

  #view-content .master-variant-controls ~ .catalog-toolbar {
    top: 0;
    min-height: 0;
    align-items: center;
    flex-direction: row;
    margin: 0 0 7px;
    padding: 5px 7px;
    border-radius: 9px;
  }

  #view-content .master-variant-controls ~ .catalog-toolbar .toolbar-meta {
    width: 100%;
    padding: 0;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .master-card-grid,
  .master-card-grid.is-variant-mode { gap: 6px; }

  .master-card-grid.is-grouped-mode { gap: 7px; }

  .master-card-grid.is-grouped-mode .master-grouped-card {
    grid-template-columns: minmax(112px, 42%) minmax(0, 1fr);
  }

  .master-card-grid.is-grouped-mode .master-grouped-card .master-card-copy {
    padding: 6px 7px 8px;
  }

  .master-card-grid.is-grouped-mode .master-grouped-card .master-card-copy strong { font-size: 10px; }
  .master-card-grid.is-grouped-mode .master-grouped-card .master-card-copy small { font-size: 7px; }

  /* Carteira selada: metricas e filtros compactos, cards em duas colunas e
     imagem sempre integral (contain), inclusive para caixas horizontais. */
  .sealed-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(108px, 1fr));
    gap: 1px;
    margin: 7px 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 12px;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .sealed-summary::-webkit-scrollbar { display: none; }

  .sealed-summary > div {
    min-height: 58px;
    padding: 8px 9px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .sealed-summary > div:nth-child(2n) { border-right: 1px solid var(--line); }
  .sealed-summary > div:last-of-type { border-right: 0; }
  .sealed-summary small { font-size: 7px; line-height: 1.25; }
  .sealed-summary strong { margin-top: 3px; font-size: 13px; }
  .sealed-summary-note { display: none; }

  .sealed-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 4px 6px;
    margin-bottom: 9px;
    padding: 7px;
    border-radius: 12px;
  }

  .sealed-toolbar .sealed-search {
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .sealed-toolbar .sealed-mode-switch {
    min-width: 0;
    grid-column: span 1;
    align-self: end;
    gap: 2px;
    padding: 2px;
  }

  .sealed-toolbar .sealed-mode-switch button {
    min-width: 0;
    min-height: 42px;
    padding: 4px;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sealed-toolbar > label:not(.sealed-search) {
    min-width: 0;
    gap: 2px;
    font-size: 7px;
  }

  .sealed-toolbar > label:not(.sealed-search) > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sealed-toolbar input,
  .sealed-toolbar select {
    min-width: 0;
    min-height: 42px;
    padding: 0 7px;
    font-size: 9px;
  }

  .sealed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  .sealed-product-card {
    grid-template-rows: 146px minmax(92px, auto) auto;
    border-radius: 12px;
    box-shadow: none;
  }

  .sealed-product-visual {
    min-height: 0;
    padding: 5px;
  }

  .sealed-product-visual img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .sealed-product-card-copy { padding: 8px 8px 6px; }
  .sealed-product-card-copy > span { font-size: 6px; }

  .sealed-product-card-copy h2 {
    margin: 4px 0 2px;
    font-size: 11px;
    line-height: 1.2;
  }

  .sealed-product-card-copy > p {
    min-height: 0;
    overflow: hidden;
    font-size: 7px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sealed-product-card-copy dl {
    gap: 4px;
    margin-top: 7px;
  }

  .sealed-product-card.is-owned .sealed-product-card-copy dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sealed-product-card-copy dt { font-size: 6px; }
  .sealed-product-card-copy dd { margin-top: 2px; font-size: 8px; }

  .sealed-product-card > .button {
    min-height: 44px;
    margin: 0 7px 7px;
    padding-inline: 5px;
    font-size: 9px;
  }

  .sealed-add-product-card {
    min-height: 289px;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 12px;
  }

  .sealed-add-product-card > span { width: 44px; height: 44px; font-size: 24px; }
  .sealed-add-product-card > strong { font-size: 12px; }
  .sealed-add-product-card > small { max-width: 130px; font-size: 8px; }
}

@media (max-width: 350px) {
  .master-set-card {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .master-set-card .master-set-art { width: 86px; }
  .master-set-card-copy h2 { font-size: 14px; }
  .sealed-grid { gap: 5px; }
  .sealed-product-card { grid-template-rows: 132px minmax(90px, auto) auto; }
  .sealed-add-product-card { min-height: 275px; }
}