.wordmark-link { text-decoration: none; color: inherit; }

.account-wrap {
  padding-top: 0;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 720px;
}

@media (min-width: 900px) {
  .account-wrap { max-width: 1100px; }
}

@media (min-width: 721px) {
  /* Signed-in desktop hides .site-header entirely in favor of the sidebar
     (see body:has(#left-sidebar) .site-header in style.css), so without
     this the page content sits flush against the very top of the
     viewport -- match the top breathing room groups.html already uses
     (.groups-wrap's own padding-top) instead of leaving it at 0. */
  body:has(#left-sidebar) .account-wrap { padding-top: 30px; }
}

.account-layout {
  display: flex;
  flex-direction: column;
}

.account-main {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.account-section[hidden] { display: none; }
.account-native-header { display: none; }

.account-hub-identity {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--hairline);
  border-radius: 17px;
  background: var(--paper-dim);
}
.account-hub-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--yellow);
  color: #171717;
  font: 900 22px/1 var(--body);
}
.account-hub-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-hub-avatar .avatar-initial { font: inherit; }
.account-hub-identity-copy { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.account-hub-identity-copy strong {
  overflow: hidden;
  color: var(--ink);
  font: 900 17px/1.25 var(--body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-hub-identity-copy span {
  overflow: hidden;
  color: var(--ink-soft);
  font: 500 13px/1.3 var(--body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-hub-menu {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 17px;
  background: var(--paper-dim);
}
.account-hub-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  box-sizing: border-box;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
}
.account-hub-row:last-child { border-bottom: 0; }
.account-hub-row:hover { background: var(--paper); }
.account-hub-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.account-hub-icon svg { width: 23px; height: 23px; }
.account-hub-row-copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 3px; }
.account-hub-row-copy strong { font: 800 15px/1.2 var(--body); }
.account-hub-row-copy span { color: var(--ink-soft); font: 500 12.5px/1.35 var(--body); }
.account-hub-chevron { flex: 0 0 auto; color: var(--ink-soft); font: 400 25px/1 var(--body); }

.library-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#library-title { margin: 0; font-family: "Manrope", var(--body); font-weight: 700; letter-spacing: -0.45px; text-transform: none; }
.library-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.library-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer;
}
.library-export-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.library-export-btn:hover { border-color: var(--ink-soft); background: var(--paper-dim); }
.library-export-btn:disabled { opacity: .4; cursor: default; background: transparent; }
.library-list-sale-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1.5px solid var(--yellow);
  border-radius: 999px;
  background: var(--yellow);
  color: #121212;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 5px 14px -9px rgba(18, 18, 18, 0.65);
}
.library-list-sale-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.library-list-sale-btn:active { transform: translateY(0); }
.library-list-sale-btn.is-active { background: transparent; color: var(--ink); }
.library-list-sale-btn:disabled { opacity: 0.45; cursor: default; filter: none; transform: none; }
.library-list-sale-hint {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-left: 4px solid var(--yellow);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--yellow) 16%, transparent);
  color: var(--ink);
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 700;
}
@media (max-width: 520px) {
  .library-heading-row { align-items: flex-start; flex-wrap: wrap; }
  .library-heading-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .library-export-btn { min-height: 38px; padding: 8px 11px; }
  .library-list-sale-btn { min-height: 38px; padding: 8px 12px; font-size: 11px; }
}

.library-stats-card {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--hairline);
  background: var(--paper-dim);
  border-radius: 12px;
  margin-top: 16px;
  overflow: hidden;
}
:root[data-theme="dark"] .library-stats-card { background: #2e2e2e; }
.library-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border-right: 1px solid var(--hairline);
}
.library-stat:last-child { border-right: none; }
.library-stat-label {
  font-family: "Manrope", var(--body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
}
.library-stat-value {
  font-family: "Manrope", var(--body);
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .library-stat { flex: 1 1 33%; padding: 12px; }
}

@media (max-width: 720px) {
  .account-wrap {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 22px 22px 100px;
  }
  .account-section > .mobile-page-eyebrow { margin-bottom: 5px; }
  .account-section > h2,
  #library-title {
    font-family: var(--body);
    font-size: 34px;
    line-height: 39px;
    font-weight: 800;
    letter-spacing: -1.1px;
    text-transform: none;
  }
  .account-section > h2 { margin-bottom: 20px; }
  .account-section[data-section-panel="billing"] .field-group,
  .account-section[data-section-panel="add"] .field-group {
    padding: 18px;
    margin-bottom: 14px;
    border: 1px solid var(--hairline);
    border-radius: 17px;
    background: var(--paper-dim);
  }
  .library-stats-card { border-radius: 16px; }
  .account-hub > h2 { margin-bottom: 18px; }
  .account-hub-identity { margin: 20px 20px 16px; padding: 18px; }
  .account-hub-menu { margin: 0 20px 50px; padding: 0 16px; }
  .account-hub-row { min-height: 78px; padding: 13px 0; }
  .account-hub-row-copy strong { font-size: 16px; line-height: 21px; }
  .account-hub-row-copy span { font-size: 12px; line-height: 17px; font-weight: 600; }

  body.account-native-subpage { padding-bottom: 0; }
  body.account-native-subpage .site-header,
  body.account-native-subpage #bottom-tab-bar { display: none; }
  body.account-native-subpage .account-wrap { padding: 0; }
  body.account-native-subpage .account-main { gap: 0; }
  body.account-native-subpage .account-section { min-height: 100vh; min-height: 100dvh; }
  .account-native-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 82px;
    align-items: center;
    min-height: calc(58px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 8px 0;
    border-bottom: 1px solid var(--hairline);
    background: var(--paper);
  }
  .account-native-header > a,
  .account-native-header > button,
  .account-native-header > span {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 46px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--blue);
    font: 800 14px/1 var(--body);
    text-decoration: none;
  }
  .account-native-header > a { justify-content: flex-start; font-size: 31px; font-weight: 400; }
  .account-native-header > .profile-cancel-link { font-size: 14px; font-weight: 800; }
  .account-native-header > button { justify-content: flex-end; cursor: pointer; }
  .account-native-header > #account-hub-back-btn { justify-content: flex-start; color: var(--ink); font-size: 31px; font-weight: 400; }
  .account-native-header > strong {
    overflow: hidden;
    color: var(--ink);
    font: 900 18px/23px var(--body);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .account-native-content { padding: 22px 22px 50px; }
  .account-native-section > .mobile-page-eyebrow,
  .account-native-section > .account-desktop-section-title,
  .account-hub > h2 { display: none; }
  .account-section[data-section-panel="billing"] > .field-group {
    margin-right: 20px;
    margin-left: 20px;
  }
  .selling-fees-content { padding: 20px 20px 52px; }
  .selling-fees-hero {
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    text-align: center;
  }
  .selling-fees-hero-icon { width: 58px; height: 58px; flex-basis: 58px; }
  .selling-fees-hero h3 { font-size: 24px; line-height: 29px; }
  .selling-fees-explainer { padding: 18px; }
  .selling-fees-explainer h3 { font-size: 20px; line-height: 25px; }

  .profile-edit-content { display: flex; flex-direction: column; gap: 24px; }
  .profile-avatar-picker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: center;
    border: 0;
    background: none;
    color: var(--blue);
    font: 700 14px/1 var(--body);
    cursor: pointer;
  }
  .profile-avatar-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    background: var(--yellow);
    color: #171717;
    font: 900 34px/1 var(--body);
  }
  .profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
  .profile-avatar-preview .avatar-initial { font: inherit; }
  .profile-avatar-camera {
    position: absolute;
    top: 64px;
    right: calc(50% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: var(--paper-dim);
    color: var(--ink);
  }
  .profile-avatar-camera svg { width: 17px; height: 17px; }
  .profile-field { display: flex; flex-direction: column; gap: 8px; }
  .profile-field > span:first-child,
  .profile-field > label {
    color: var(--ink-soft);
    font: 900 11px/1.2 var(--body);
    letter-spacing: .7px;
    text-transform: uppercase;
  }
  .profile-field input,
  .profile-username-field {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--hairline);
    border-radius: 13px;
    background: var(--paper-dim);
    color: var(--ink);
    font: 600 16px/1.3 var(--body);
  }
  .profile-field > input { padding: 12px 14px; }
  .profile-username-field { display: flex; align-items: center; padding: 0 14px; }
  .profile-username-field > span { color: var(--ink-soft); }
  .profile-username-field input { min-width: 0; min-height: 48px; padding: 0 4px; border: 0; background: transparent; }
  .profile-field small { color: var(--ink-soft); font: 600 12px/1.45 var(--body); }
  .profile-verify-btn,
  .profile-code-row button {
    min-height: 42px;
    border: 1.5px solid var(--yellow);
    border-radius: 21px;
    background: transparent;
    color: var(--ink);
    font: 900 13px/1 var(--body);
    cursor: pointer;
  }
  .profile-verified-state { color: #1B8A55; font: 800 12px/1.3 var(--body); }
  .profile-code-row { display: flex; gap: 8px; }
  .profile-code-row[hidden] { display: none; }
  .profile-code-row input { flex: 1 1 auto; min-width: 0; padding: 0 12px; }
  .profile-code-row button { flex: 0 0 auto; padding: 0 15px; background: var(--yellow); color: #171717; }
  .profile-save-status { min-height: 18px; margin: 0; color: var(--ink-soft); font: 700 13px/1.4 var(--body); text-align: center; }

  .seller-setup-content { display: flex; flex-direction: column; gap: 16px; padding: 20px 20px 52px; }
  .seller-setup-hero,
  .seller-requirements-card,
  .seller-payment-card {
    border: 1px solid var(--hairline);
    border-radius: 18px;
    background: var(--paper-dim);
  }
  .seller-setup-hero { padding: 22px; text-align: center; }
  .seller-setup-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 9px;
    border-radius: 50%;
    background: var(--yellow);
    color: #171717;
    font: 900 25px/1 var(--body);
  }
  .seller-setup-hero-icon.is-ready { background: #1B8A55; color: #fff; }
  .seller-setup-hero h2 { margin: 0; font: 900 24px/29px var(--body); text-transform: none; }
  .seller-setup-hero p { margin: 9px 0 0; color: var(--ink-soft); font: 600 14px/20px var(--body); }
  .seller-requirements-card { overflow: hidden; padding: 0 16px; }
  .seller-requirement-row {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 82px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .seller-requirement-row:last-child { border-bottom: 0; }
  .seller-requirement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--ink-soft);
    font: 900 11px/1 var(--body);
  }
  .seller-requirement-row > span:nth-child(2) { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 3px; }
  .seller-requirement-row strong { color: var(--ink); font: 900 15px/20px var(--body); }
  .seller-requirement-row small { color: var(--ink-soft); font: 600 12px/17px var(--body); }
  .seller-requirement-row input {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    margin-top: 7px;
    padding: 9px 11px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font-size: 16px;
  }
  .seller-requirement-row > button {
    min-width: 64px;
    min-height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--yellow);
    border-radius: 20px;
    background: transparent;
    color: var(--ink);
    font: 900 13px/1 var(--body);
    cursor: pointer;
  }
  .seller-requirement-row.is-complete .seller-requirement-icon { border-color: #1B8A55; color: #1B8A55; }
  .seller-requirement-row.is-complete > button { min-width: 40px; border: 0; color: #1B8A55; font-size: 19px; }
  .seller-membership-note { margin: 0; padding: 0 8px; color: var(--ink-soft); font: 600 12px/17px var(--body); text-align: center; }
  .seller-payment-card { padding: 17px; }
  .seller-payment-card > div { display: flex; flex-direction: column; gap: 3px; }
  .seller-payment-card strong { font: 900 15px/20px var(--body); }
  .seller-payment-card small,
  .seller-payment-card p { color: var(--ink-soft); font: 600 12px/18px var(--body); }
  .seller-payment-card p { margin: 12px 0; }
  .seller-payment-card .primary-btn { width: 100%; min-height: 50px; border-radius: 25px; }
}

.library-tabs {
  display: flex;
  gap: 22px;
  margin: 20px 0 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline);
}
.library-tab {
  font-family: "Manrope", var(--body);
  font-weight: 700;
  font-size: 13.5px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  padding: 0 1px 10px;
  cursor: pointer;
  margin-bottom: -1px;
}
.library-tab.active { font-weight: 800; color: var(--ink); border-bottom-color: var(--yellow); }
.library-tab span { font-weight: 600; color: var(--ink-soft); }
.library-tab.active span { color: inherit; }

/* Same look as .library-tab, but a distinct class -- these sit inside the
   volume-detail view and must not be matched by the top-level library-tab
   click handler (that handler is unscoped and would otherwise treat every
   .library-tab on the page as one of the five top-level All/My Volumes/
   Selling/Pending/Sold buttons). */
.volume-view-tab {
  font-family: "Manrope", var(--body);
  font-weight: 700;
  font-size: 13.5px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  padding: 0 1px 10px;
  cursor: pointer;
  margin-bottom: -1px;
}
.volume-view-tab.active { font-weight: 800; color: var(--ink); border-bottom-color: var(--yellow); }

/* ---------- Filters row: title/era selects + select-all on one compact
   line, replacing the old two-column toolbar that pushed filters to the
   far right and made the summary line/select-all float independently. */
.library-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.library-filter-row .select-all-label { margin-left: auto; }
.library-filter-btn { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.library-filter-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--paper-dim);
}

/* Filter/sort dialog -- same fixed-backdrop/centered-modal pattern as
   .verify-required-backdrop/.verify-required-modal below. */
.library-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 18, 18, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.library-filter-backdrop.is-open { opacity: 1; pointer-events: auto; }
.library-filter-modal {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 22px 24px 24px;
  box-shadow: 0 20px 50px -12px rgba(18, 18, 18, 0.5);
  transform: scale(0.96) translateY(6px);
  transition: transform 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.library-filter-backdrop.is-open .library-filter-modal { transform: scale(1) translateY(0); }
.library-filter-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.library-filter-modal-head h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 19px;
  margin: 0;
}
.library-filter-close {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.library-filter-close:hover { color: var(--ink); }
.library-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-soft);
}
.library-filter-field select { width: 100%; box-sizing: border-box; }
.library-filter-actions { display: flex; gap: 10px; margin-top: 4px; }
.library-filter-actions .pill,
.library-filter-actions .primary-btn { flex: 1; text-align: center; }
.library-filter-actions .pill {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.library-filter-actions .pill:hover { filter: brightness(0.97); }
.library-search-wrap {
  position: relative;
  flex: 1 1 200px;
  min-width: 160px;
}
.library-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
}
.library-search-wrap input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  font-size: 13px;
  font-weight: 600;
}

.library-table-head { display: none; }
@media (min-width: 721px) {
  .library-table-head {
    display: grid;
    grid-template-columns: 28px 52px minmax(160px, 1fr) 100px 36px;
    gap: 12px;
    align-items: center;
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 4px;
  }
  .library-table-head span {
    font-family: var(--body);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3px;
    color: var(--ink-soft);
  }
  /* Higher specificity than the unconditional display:grid above --
     without this, toggling [hidden] via JS (see account.js's My Volumes
     tab switch) has no visible effect at this breakpoint. */
  .library-table-head[hidden] { display: none; }
}

/* No boxed panel background/border -- account sections flow directly on
   the page background, separated by whitespace (.account-main's gap and
   .field-group's margin) instead of borders and boxes. */
.panel {
  padding: 0;
}
#signed-out-notice { padding: 24px 0; }

.panel h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 24px;
  letter-spacing: 0.3px;
  margin: 0 0 28px;
}

/* One field-group per logical subsection (Username, Seller Verification,
   Contact Methods, etc.) -- generous margin is what separates them, not a
   divider line or a border, so the page stays clean at any width. */
.field-group { margin-bottom: 40px; }
.field-group:last-child { margin-bottom: 0; }

.field-label {
  display: block;
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--ink);
}
.fee-schedule-intro p { margin-top: 10px; }
.fee-schedule-intro p:first-child { margin-top: 4px; }

.fee-schedule-table {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  margin-top: 12px;
  font-family: var(--body);
  font-size: 13.5px;
}
.fee-schedule-table td {
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-soft);
}
.fee-schedule-table td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fee-schedule-table tr:last-child td { border-bottom: none; }

.selling-fees-content {
  display: grid;
  gap: 18px;
  max-width: 680px;
}
.selling-fees-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border-radius: 20px;
  background: var(--yellow);
  color: #171717;
}
.selling-fees-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.selling-fees-hero-icon svg { width: 31px; height: 31px; }
.selling-fees-kicker {
  display: block;
  margin-bottom: 4px;
  font: 900 11px/1.2 var(--body);
  letter-spacing: 1.25px;
}
.selling-fees-hero h3,
.selling-fees-explainer h3 {
  margin: 0;
  font: 900 26px/1.1 var(--body);
  text-transform: none;
}
.selling-fees-hero p {
  max-width: 520px;
  margin: 8px 0 0;
  font: 700 14px/1.5 var(--body);
}
.selling-fees-explainer {
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--paper-dim);
}
.selling-fees-explainer > p {
  margin: 9px 0 0;
  color: var(--ink-soft);
  font: 600 14px/1.5 var(--body);
}
.selling-fees-explainer .selling-fees-note { font-size: 12px; }
.selling-fees-table {
  max-width: none;
  margin: 20px 0;
}
.selling-fees-table caption {
  padding-bottom: 7px;
  color: var(--ink);
  font: 900 12px/1.3 var(--body);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .55px;
}
.selling-fees-table td { padding: 9px 0; }
.selling-fees-payment-btn { width: 100%; min-height: 50px; border-radius: 25px; }
.selling-fees-return-link {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font: 800 13px/1.4 var(--body);
  text-align: center;
}
.selling-fees-return-link[hidden] { display: none; }

.seller-fees-list { margin-top: 12px; max-width: 420px; }
.seller-fee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.seller-fee-row:last-child { border-bottom: none; }
.seller-fee-row-title {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
}
.seller-fee-row-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--body);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.seller-fee-status {
  font-family: var(--body);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 999px;
}
.seller-fee-status-paid { background: rgba(27, 138, 85, 0.14); color: #1B8A55; }
.seller-fee-status-pending { background: rgba(255, 64, 55, 0.12); color: var(--red); }

.field-hint {
  display: block;
  font-weight: 500;
  text-transform: none;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
  color: var(--ink-soft);
}

.username-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.username-row input { width: auto; flex: 1; max-width: 260px; }
.username-row .primary-btn { margin-top: 0; }

textarea, input, select {
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  border: 1.5px solid var(--ink);
  background: var(--paper-dim);
  color: var(--ink);
  padding: 10px 12px;
  width: 100%;
  border-radius: 10px;
}
textarea:focus, input:focus, select:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.primary-btn,
.account-main .pill {
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  box-shadow: none;
  padding: 11px 20px;
  cursor: pointer;
  border-radius: 10px;
  margin-top: 10px;
}
.primary-btn:hover,
.account-main .pill:hover { filter: brightness(1.3); transform: none; box-shadow: none; }
.primary-btn:active,
.account-main .pill:active { transform: none; }
.primary-btn:disabled,
.account-main .pill:disabled { opacity: 0.4; cursor: default; }

.button-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.button-row .primary-btn,
.button-row .pill { margin-top: 0; }

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--paper-dim);
  color: var(--ink);
  cursor: pointer;
}
.icon-btn:hover { background: var(--yellow); }
.icon-btn:active { filter: brightness(0.95); }

.save-status {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  margin-left: 10px;
  color: var(--ink-soft);
}

.billing-status {
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.membership-benefit-eyebrow {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font: 800 11px/1 var(--body);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.membership-benefit-title {
  margin: 0 0 8px;
  color: var(--ink);
  font: 900 24px/1.15 var(--body);
  letter-spacing: -0.5px;
}
.membership-benefit-copy {
  max-width: 560px;
  margin: 0 0 16px;
  color: var(--ink-soft);
  font: 600 14px/1.55 var(--body);
}
.membership-benefit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.membership-benefit-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--yellow) 24%, transparent);
  color: var(--ink);
  font: 800 12px/1.2 var(--body);
}
.membership-benefit-list span::before { content: "✓"; }

.payment-hold-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 2px solid var(--red);
  background: rgba(255, 64, 55, 0.08);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.payment-hold-banner strong { color: var(--red); }

.listing-form { display: flex; flex-direction: column; gap: 14px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.form-grid label, .full-width {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-soft);
}

.my-listings { display: flex; flex-direction: column; }

/* These three set an unconditional `display` themselves, which (being an
   author rule) otherwise beats the browser's own [hidden]{display:none}
   default -- account.js's My Volumes tab switch toggles .hidden on exactly
   these elements, so without this override that toggle would silently do
   nothing. */
.library-filter-row[hidden],
.my-listings[hidden],
.volumes-grid[hidden] { display: none; }

/* ---------- My Volumes tab: grid of volume cards + a drill-down list ---------- */
.volumes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.volumes-grid:has(> p.field-hint) { grid-template-columns: 1fr; }
.volume-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  background: var(--paper-dim);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--body);
}
:root[data-theme="dark"] .volume-card { background: #2e2e2e; }
.volume-card:hover { border-color: var(--ink-soft); }
.volume-card-title {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--ink);
  text-wrap: balance;
}
.volume-card-years {
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.volume-card-fraction {
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.volume-card-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
  margin-top: 2px;
}
.volume-card-bar-fill { height: 100%; background: var(--yellow); }
.volume-card-percent {
  font-weight: 700;
  font-size: 11px;
  color: var(--ink-soft);
}
.volume-card-value {
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.volume-goal-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.volume-goal-label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
}
.volume-goal-input {
  width: 48px;
  padding: 6px 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
}
.volume-goal-dash { color: var(--ink-soft); font-weight: 700; }
.volume-goal-form .pill {
  padding: 6px 14px;
  font-size: 12.5px;
  margin-top: 0;
}
.volume-detail-tabs { margin: 4px 0 16px; }

.volume-detail-back {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-bottom: 8px;
}
.volume-detail-back:hover { color: var(--ink); }
.volume-detail-title {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 22px;
  margin: 0 0 2px;
}
.volume-detail-sub {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.volume-detail-issue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.volume-detail-issue-grid > .field-hint { grid-column: 1 / -1; }
.volume-detail-issue-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.volume-detail-issue-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--paper-dim);
  border-radius: 10px;
}
.volume-detail-issue-number {
  font-family: var(--body);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.volume-detail-issue-meta {
  font-family: var(--body);
  font-weight: 650;
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.volume-detail-section-head {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 22px 0 8px;
}
.volume-detail-section-head[hidden] { display: none; }
.volume-detail-section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 8px;
}
.volume-detail-section-head-row .volume-detail-section-head { margin: 0; }
.volume-share-dropdown a.menu-item { text-decoration: none; display: block; }
.volume-all-issues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.volume-issue-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper-dim);
  opacity: 0.5;
}
:root[data-theme="dark"] .volume-issue-tile { background: #2e2e2e; }
.volume-issue-tile.owned {
  opacity: 1;
  border-color: var(--yellow);
}
.volume-issue-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--hairline);
}
.volume-issue-number {
  font-family: var(--body);
  font-weight: 800;
  font-size: 12px;
  color: var(--ink);
}
.volume-issue-year {
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-soft);
}

/* Rows read as a plain, divided list -- a hairline between rows instead of
   a bordered box around each one, which is what made the library feel
   heavy/boxy on a narrow phone screen. */
.my-listing-row {
  border-bottom: 1px solid var(--hairline);
  padding: 16px 4px;
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}
/* content-visibility adds paint containment, which would clip the actions
   dropdown at this row's edge. Lift only the active row out of containment
   so long libraries keep the rendering benefit everywhere else. */
.my-listing-row.menu-open {
  position: relative;
  z-index: 30;
  content-visibility: visible;
}
.my-listing-row:first-child { padding-top: 4px; }
.my-listing-row-main {
  display: grid;
  grid-template-columns: 28px 52px minmax(160px, 1fr) 100px 36px;
  grid-template-areas: "checkbox thumb comic price menu";
  gap: 12px;
  align-items: center;
}
@media (max-width: 720px) {
  .my-listing-row-main {
    position: relative;
    grid-template-columns: 24px 52px 1fr auto;
    grid-template-areas: "checkbox thumb comic price";
    column-gap: 10px;
    padding-right: 32px;
  }
}
/* Mark-as-sold is now a modal (.mark-sold-modal, text-align reset to left
   here since .verify-required-modal defaults to center) instead of an
   inline row form -- see account.js's openMarkSoldModal(). */
.mark-sold-modal { text-align: left; }
.mark-sold-price {
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.mark-sold-claim-copy {
  margin: -4px 0 18px;
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.45;
}
.mark-sold-claim-copy strong { color: var(--ink); font-weight: 900; }
.mark-sold-savings-amount { color: #1B8A55; font-weight: 800; }
.mark-sold-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-soft);
}
.mark-sold-form input { width: 100%; box-sizing: border-box; margin-top: 2px; }
.mark-sold-form .field-hint { margin: 8px 0 0; }
.mark-sold-form .primary-btn { width: 100%; box-sizing: border-box; text-align: center; }
.mark-sold-form .save-status { display: block; margin: 10px 0 0; }
.mark-sold-actions { display: flex; gap: 10px; margin-top: 18px; }
.mark-sold-actions .primary-btn { flex: 1 1 0; width: auto; margin: 0; }
.mark-sold-secondary {
  flex: 1 1 0;
  min-height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 800 13px/1 var(--body);
  cursor: pointer;
}
.mark-sold-secondary:hover { background: var(--paper); }

.my-listing-row img {
  width: 44px; height: 64px; object-fit: cover; background: var(--paper-dim);
  border-radius: 6px;
  flex-shrink: 0;
}
.my-listing-thumb { cursor: pointer; }
.my-listing-thumb.is-processing { filter: blur(8px); opacity: 0.82; }
.my-listing-thumb-wrap {
  grid-area: thumb;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.my-listing-info { grid-area: comic; min-width: 0; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.my-listing-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 7px;
  min-width: 0;
  font-family: "Manrope", var(--body);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.15px;
  color: #2a2a2a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root[data-theme="dark"] .my-listing-title { color: var(--ink); }
.my-listing-title-text { min-width: 0; overflow-wrap: break-word; }
.my-listing-key-reason {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-soft);
}
.my-listing-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-soft);
}
.my-listing-meta-grade,
.my-listing-meta-fmv {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-listing-meta-fmv { font-variant-numeric: tabular-nums; }
.cert-link { color: var(--blue); text-decoration: underline; }
.cert-link:hover { color: var(--ink); }

.my-listing-price-col {
  grid-area: price;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.my-listing-price-label {
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
}
.my-listing-price {
  font-family: var(--body);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-bottom: 1.5px dotted var(--ink-soft);
  border-radius: 2px;
}
.my-listing-price:hover { border-bottom-color: var(--ink); background: var(--paper-dim); }
.my-listing-not-for-sale {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-soft);
}

/* Click-to-edit affordance -- plain text with a hint of underline so it
   reads as interactive without looking like a form field until clicked. */
.editable-field {
  cursor: pointer;
  border-bottom: 1.5px dotted var(--ink-soft);
  border-radius: 2px;
}
.editable-field:hover { border-bottom-color: var(--ink); background: var(--paper-dim); }
.editable-field-control {
  font-family: var(--body);
  font-weight: inherit;
  font-size: inherit;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 1px 5px;
  background: var(--paper-dim);
  max-width: 100%;
}
.my-listing-title .editable-field-control { font-weight: 800; }

.sold-tag {
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10px;
  background: var(--red);
  color: #fff;
  border-radius: 5px;
  padding: 2px 7px;
}
.for-sale-tag {
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10px;
  background: var(--blue);
  color: #fff;
  border-radius: 5px;
  padding: 2px 7px;
}
.pending-tag {
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10px;
  background: var(--ink-soft);
  color: #fff;
  border-radius: 5px;
  padding: 2px 7px;
}

.row-menu { position: relative; grid-area: menu; justify-self: end; flex-shrink: 0; }
@media (max-width: 720px) {
  .row-menu { position: absolute; top: 0; right: 0; justify-self: auto; }
}
.row-menu-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 8px;
  cursor: pointer;
}
.row-menu-btn:hover, .row-menu-btn[aria-expanded="true"] { background: var(--paper-dim); color: var(--ink); }

.row-menu-dropdown {
  position: absolute;
  top: 36px;
  right: 0;
  min-width: 180px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 8px 24px -6px rgba(18, 18, 18, 0.2);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
}
.menu-item {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--ink);
  padding: 9px 10px;
  cursor: pointer;
  border-radius: 6px;
}
.menu-item:hover { background: var(--paper-dim); }
.menu-item-list-sale { background: var(--yellow); color: #121212; font-weight: 900; }
.menu-item-list-sale:hover { background: var(--yellow); color: #121212; filter: brightness(1.05); }
.menu-item-danger { color: var(--red); }
.menu-item-danger:hover { background: var(--red); color: #fff; }

.select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.select-all-label input,
.row-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
  cursor: pointer;
}
.sale-selection-mode .select-all-label {
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--yellow) 22%, transparent);
}
.sale-selection-mode .row-checkbox { accent-color: var(--yellow); }
.sale-selection-target { background: color-mix(in srgb, var(--yellow) 5%, transparent); }
.sale-selection-unavailable .row-checkbox-wrap { opacity: 0.28; }

/* Floating card, not a static bar in the page flow -- appears only while
   rows are selected (see account.js's updateBulkActionControls). Follows
   the same fixed-position-above-the-tab-bar pattern as style.css's
   .scan-job-card. */
.bulk-action-bar[hidden] { display: none; }
.bulk-action-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  /* Above .bottom-tab-bar's z-index:200 (same precedent as style.css's
     .comment-drawer) -- a drawer should always pop up over the bottom nav,
     never tuck underneath it, even on the full-width scan-status.html
     variant of this bar (#scan-results-bar reuses this class). */
  z-index: 210;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 44px 14px 16px;
  border-radius: 16px;
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 28px -10px rgba(18, 18, 18, 0.45);
}
@media (min-width: 721px) {
  .bulk-action-bar { left: 232px; right: 24px; bottom: 24px; max-width: 420px; margin: 0; }
}
/* Inverted relative to the page's own theme -- deliberately, so the floating
   bar pops against whatever's behind it instead of blending into the page's
   own paper/ink tokens. Light mode borrows the dark palette and vice versa;
   see the :root[data-theme="dark"] override below for the other half. */
:root[data-theme="dark"] .bulk-action-bar {
  background: #FFFFFF;
  border: 1px solid rgba(18, 18, 18, 0.14);
}
/* Drag-to-dismiss affordance -- same shape/purpose as style.css's
   .comment-drawer-grabber, colored for whichever card this bar is
   currently showing (see the inverted light/dark treatment above). */
.bulk-action-grabber {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 auto 8px;
  flex-shrink: 0;
}
:root[data-theme="dark"] .bulk-action-grabber { background: rgba(18, 18, 18, 0.3); }
.bulk-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bulk-action-count {
  font-family: var(--body);
  font-weight: 800;
  font-size: 13px;
  color: #FFFFFF;
}
:root[data-theme="dark"] .bulk-action-count { color: #121212; }
.bulk-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--body);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.2px;
  border: 1.5px solid #FFFFFF;
  background: #FFFFFF;
  color: #121212;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  flex: 1;
}
:root[data-theme="dark"] .bulk-pill {
  border-color: #121212;
  background: #121212;
  color: #FFFFFF;
}
.bulk-pill-primary,
:root[data-theme="dark"] .bulk-pill-primary {
  border-color: var(--yellow);
  background: var(--yellow);
  color: #121212;
}
.bulk-pill:hover { filter: brightness(1.15); }
.bulk-pill:active { transform: scale(0.98); }
.bulk-pill:disabled { opacity: 0.5; cursor: default; }

/* Its own solid red button, not a borderless ghost icon -- weighted the
   same as the two pills beside it now that all three sit on one row. */
.bulk-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.bulk-icon-btn:active { transform: scale(0.96); }
.bulk-icon-btn:disabled { opacity: 0.5; cursor: default; }
.bulk-icon-btn-danger { background: var(--red); color: #121212; }
.bulk-icon-btn-danger:hover { filter: brightness(1.1); }

/* Corner dismiss, same gesture as .verify-required-close elsewhere on this
   page -- sits inside the padding reserved on .bulk-action-bar above. */
.bulk-action-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.bulk-action-close:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"] .bulk-action-close { color: rgba(18, 18, 18, 0.6); }
:root[data-theme="dark"] .bulk-action-close:hover { color: #121212; background: rgba(18, 18, 18, 0.08); }

.row-checkbox-wrap { grid-area: checkbox; display: flex; align-items: center; padding-right: 2px; }

/* ---------- Verification-required dialog ---------- */
/* Shown instead of a bare alert() whenever listing for sale is blocked by
   require_seller_verification (see main.py/account.js's
   showVerificationRequiredDialog) -- email and phone for every seller, with
   Stripe ID verification additionally required over $250. Same modal pattern as
   listing.css's .claim-modal / messages.css's .compose-modal. */
.verify-required-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 18, 18, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.verify-required-backdrop.is-open { opacity: 1; pointer-events: auto; }

.verify-required-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 30px 24px 24px;
  text-align: center;
  box-shadow: 0 20px 50px -12px rgba(18, 18, 18, 0.5);
  transform: scale(0.96) translateY(6px);
  transition: transform 0.18s ease;
}
.verify-required-backdrop.is-open .verify-required-modal { transform: scale(1) translateY(0); }

.verify-required-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 15px;
}
.verify-required-close:hover { color: var(--ink); }

.verify-required-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
}

.verify-required-title {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 21px;
  letter-spacing: -0.3px;
  margin: 0 0 10px;
}

.verify-required-body {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

.verify-required-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

/* ---------- Delete-confirmation dialog ---------- */
/* Same verify-required-modal chrome, but two buttons instead of one link
   (see account.js's confirmDelete). */
.confirm-delete-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-delete-actions .pill,
.confirm-delete-actions .primary-btn { flex: 1; margin-top: 0; }
/* Overrides style.css's global .pill -- that one keeps its thick border and
   hard-edged comic shadow for the homepage/library chrome, but a modal
   button reads as a plain UI control, not a comic-panel prop. */
.confirm-delete-actions .pill {
  border: 1px solid var(--hairline);
  box-shadow: none;
  background: var(--paper);
}
.confirm-delete-actions .pill:hover { transform: none; box-shadow: none; filter: brightness(0.97); }
.confirm-delete-actions .pill:active { transform: none; box-shadow: none; }
.confirm-delete-danger { background: var(--red); }

/* ---------- Sale celebration -- shown right after a listing is marked
   sold (see account.js's showSaleCelebration). Sits above every other
   modal (z-index higher than .verify-required-backdrop's 220) since the
   mark-sold modal is already closed by the time this opens. ---------- */
.sale-celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  background: rgba(18, 18, 18, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.sale-celebration-overlay.is-open { opacity: 1; pointer-events: auto; }

.sale-celebration-burst {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(48px, 14vw, 108px);
  line-height: 1;
  color: var(--yellow);
  -webkit-text-stroke: 3px #121212;
  text-shadow: 5px 5px 0 var(--red);
  text-align: center;
  transform: scale(0) rotate(-6deg);
  opacity: 0;
  animation: sale-burst-pop 2.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
}
@keyframes sale-burst-pop {
  0% { transform: scale(0) rotate(-6deg); opacity: 0; }
  15% { transform: scale(1.15) rotate(-6deg); opacity: 1; }
  30% { transform: scale(1) rotate(-3deg); opacity: 1; }
  70% { transform: scale(1) rotate(-3deg); opacity: 1; }
  100% { transform: scale(0.9) rotate(-3deg); opacity: 0; }
}

.sale-celebration-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 26px 24px;
  text-align: center;
  box-shadow: 0 20px 50px -12px rgba(18, 18, 18, 0.5);
  opacity: 0;
  transform: translateY(10px);
  animation: sale-card-in 0.4s ease 0.5s forwards;
}
@keyframes sale-card-in {
  to { opacity: 1; transform: translateY(0); }
}

.sale-celebration-listing {
  font-family: var(--body);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.sale-celebration-message {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: -0.2px;
  color: var(--ink);
  margin: 0 0 16px;
}
.sale-celebration-count,
.sale-celebration-savings {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.sale-celebration-savings { color: #1B8A55; font-weight: 700; }
.sale-celebration-count-number {
  display: inline-block;
  font-size: 1.7em;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  vertical-align: middle;
}
.sale-celebration-dismiss { width: 100%; box-sizing: border-box; }

/* Deleting or listing a comic uses three short hand-lettered impacts, so it
   reads like stacked WHAM!/POW!/BANG! lettering from a vintage comic panel
   instead of a long sentence squeezed through a condensed typeface. */
.delete-celebration-burst,
.list-celebration-burst {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  font-family: "Bangers", var(--display);
  font-size: clamp(66px, 18vw, 136px);
  line-height: 0.68;
  letter-spacing: 0.015em;
  text-shadow: none;
  -webkit-text-stroke: 2px #121212;
  paint-order: stroke fill;
}
.celebration-burst-word {
  display: block;
  text-shadow: 2px 3px 0 rgba(18, 18, 18, 0.86);
}
.celebration-burst-word:nth-child(1) {
  color: #F45B45;
  transform: rotate(-8deg) translateX(-10%);
}
.celebration-burst-word:nth-child(2) {
  color: var(--yellow);
  transform: rotate(3deg) translateX(8%);
}
.celebration-burst-word:nth-child(3) {
  color: #58B94D;
  transform: rotate(-3deg) translateX(-4%);
}
.sale-confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 301;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sale-celebration-burst,
  .sale-celebration-card { animation: none; opacity: 1; transform: none; }
}