/* ============================================================================
   Theme pack: boundbot  (dark; no light counterpart)

   ── The design in one paragraph ───────────────────────────────────────────
   tcgebinder wearing the BoundBot play UI's skin (boundBot viewer/styles.css,
   itself the trainer's look): a near-black BLUE ground (#05080d), neon CYAN
   (#2fd6ff) as the accent with MAGENTA (#ff4fd8) as the second hue, monospace
   type everywhere, small square-ish radii (3-4px), hairline blue-grey borders,
   a soft cyan glow on interactive chrome, faint CRT scanlines over the whole
   page and two corner radial washes (cyan top-left, magenta top-right). The
   point is that /play and the main site read as one product.

   ── How to read this file ─────────────────────────────────────────────────
   A SIBLING of base/theme.css (it was cloned from it): the ten surface groups
   below keep base's rules, retinted where base hard-codes a neutral grey. The
   boundBot-specific decoration lives in the final BOUNDBOT SIGNATURE group.

   ── Load order / cascade ──────────────────────────────────────────────────
   Linked LAST and UNLAYERED, like every pack — see styles/index.css.
   ========================================================================== */

:root {
  /* ══ PALETTE ══ (values lifted from boundBot viewer/styles.css :root) */
  --color-primary: #05080d;                 /* the page (bb --bg) */
  --color-bg: #c7e0e8;                      /* ⚠ FOREGROUND text (bb --text) */
  --color-text: #05080d;                    /* text ON light chips/inputs */
  --color-white: #ffffff;

  --color-surface: rgba(10, 15, 22, 0.94);  /* bb --surface */
  --color-surface-hover: rgba(13, 21, 33, 0.97); /* bb --surface-2 */
  --color-border: #15293c;                  /* bb --border */

  /* Accent = neon cyan. Filled buttons carry DARK label text in this pack
     (see SIGNATURE) because white on #2fd6ff fails contrast. */
  --color-accent: #2fd6ff;
  --color-accent-hover: #6be3ff;
  --color-accent-light: #8eeaff;

  /* Semantic / data colours — kept meaning, nudged onto bb's status hues. */
  --color-accent-warm: #ffd84d;
  --color-accent-green: #35e39c;
  --color-accent-green-dark: #1f9e6b;
  --color-accent-blue: #2fd6ff;
  --color-accent-partial: #ffd84d;
  --color-accent-unowned: #ff4d5e;
  --color-holo-pink: #ff4fd8;
  --color-danger: #ff4d5e;
  --color-danger-hover: #ff7a87;
  --color-warning: #ffd84d;

  --color-link: #2fd6ff;
  --color-link-glow: rgba(47, 214, 255, 0.16);

  --color-select-option-bg: #0d1521;

  /* Overlays — white ladder, but tinted toward bb's cool text colour so
     washes read blue-grey, not neutral grey. */
  --color-overlay-4: rgba(199, 224, 232, 0.04);
  --color-overlay-5: rgba(199, 224, 232, 0.05);
  --color-overlay-8: rgba(199, 224, 232, 0.08);
  --color-overlay-10: rgba(199, 224, 232, 0.1);
  --color-overlay-12: rgba(199, 224, 232, 0.12);
  --color-overlay-15: rgba(199, 224, 232, 0.15);
  --color-overlay-20: rgba(199, 224, 232, 0.2);
  --color-overlay-30: rgba(199, 224, 232, 0.3);
  --color-overlay-35: rgba(199, 224, 232, 0.35);
  --color-overlay-40: rgba(199, 224, 232, 0.4);
  --color-overlay-45: rgba(199, 224, 232, 0.45);
  --color-overlay-50: rgba(199, 224, 232, 0.5);
  --color-overlay-60: rgba(199, 224, 232, 0.6);
  --color-overlay-65: rgba(199, 224, 232, 0.65);
  --color-overlay-70: rgba(199, 224, 232, 0.7);
  --color-overlay-80: rgba(199, 224, 232, 0.8);

  /* Text emphasis — bb's muted (#5e7f8f) / faint (#3f5866) sit below these. */
  --color-text-dim: rgba(199, 224, 232, 0.66);
  --color-text-subtle: rgba(199, 224, 232, 0.8);
  --color-text-faded: rgba(199, 224, 232, 0.9);
  --color-text-bright: #e4f4f9;
  --color-text-dull: color-mix(in srgb, var(--color-bg) 62%, transparent);
  --color-text-ghost: color-mix(in srgb, var(--color-bg) 48%, transparent);

  --color-input-bg: #0d1521;
  --color-input-border: #1f4a63;            /* bb --border-strong */
  --color-input-placeholder: #5e7f8f;       /* bb --muted */

  --color-accent-soft: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-accent-shadow: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --color-accent-glow: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --color-accent-glow-strong: color-mix(in srgb, var(--color-accent) 45%, transparent);

  --color-backdrop: rgba(2, 4, 8, 0.78);
  --color-topbar-bg: rgba(10, 15, 22, 0.96);

  /* ══ TYPOGRAPHY ══ bb is monospace everywhere. Cascadia when installed,
     else Fira Code (already linked by index.html), so no extra font load. */
  --font-heading: 'Cascadia Code', 'Cascadia Mono', 'Fira Code', Consolas, ui-monospace, monospace;
  --font-body: 'Cascadia Code', 'Cascadia Mono', 'Fira Code', Consolas, ui-monospace, monospace;
  --font-data: 'Cascadia Code', 'Cascadia Mono', 'Fira Code', Consolas, ui-monospace, monospace;
  --font-drama: var(--font-heading);

  /* ══ RADIUS ══ NONE. bb's chrome is square; this pack drops every step to 0,
     pill and circle included — avatars, icon buttons and tab pills go square. */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-3xl: 0;
  --radius-4xl: 0;
  --radius-pill: 0;
  --radius-circle: 0;

  /* ══ ELEVATION ══ black drops; --shadow-accent is bb's --glow. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.65);
  --shadow-accent: 0 0 9px rgba(47, 214, 255, 0.4);

  --dur-fast: 0.1s;
  --dur-med: 0.15s;
  --dur-slow: 0.2s;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

  --color-toolbar-icon: #5e7f8f;
  --card-face-info-btn-bg: rgba(5, 8, 13, 0.8);
  --card-face-info-btn-color: var(--color-accent);

  --site-header-logo-filter: drop-shadow(0 0 6px rgba(47, 214, 255, 0.45));

  /* ══ COMPONENT TOKENS ══ */
  --auth-autofill-mask: #0d1521;
  --auth-input-focus-ring: 0 0 0 1px var(--color-accent), 0 0 9px rgba(47, 214, 255, 0.4);
  --book-ground: #0a0f16;
  --shelf-plank-color: #15293c;
  --shelf-plank-shadow: 0 2px 10px rgba(47, 214, 255, 0.12);
  --library-thead-bg: #0d1521;
  --library-instance-detail-pill-bg: rgba(10, 15, 22, 0.96);
  --library-item-bg-tint: rgba(5, 8, 13, 0.9);
  --tooltip-bg: rgba(13, 21, 33, 0.97);

  --deck-section-surface-bg: rgba(10, 15, 22, 0.9);
  --deck-card-shadow: var(--shadow-md);
  --advanced-card-search-total-results-bg: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 82%, transparent) 35%);

  /* Pack-local names for the signature group. */
  --bb-magenta: #ff4fd8;
  --bb-muted: #5e7f8f;
  --bb-faint: #3f5866;
  --bb-border-strong: #1f4a63;
  --bb-page-ink: #070b11;
}

/* ============================================================================
   TOPBAR  (.app-topbar / .app-primary-* — styles.css)
   ⚠ TWINNED with #tcgbSiteHeader in public/site-header.js. That header is not
   pack-aware and carries the CLASSIC look as literal var() FALLBACKS, which is
   what the tokenless /play sidecar pages render. Since stage 9 the standalone
   pages (/admin) link this sheet, so its :root above DOES reach
   the injected bar through those var() reads and restyles it for free — no rule
   in this section is involved. The single exception is the logo bloom, a
   `filter` rather than a colour: see --site-header-logo-filter in :root.
   ========================================================================== */

/* ABSENT — the frosted bar. classic blurs the page behind .app-topbar; base
   has no backdrop-filter anywhere. --color-topbar-bg is raised to 0.94 instead,
   so the bar is a flat plate rather than a thin one over a smear. */

/* ABSENT — the home logo's purple bloom (two drop-shadow filters, brighter
   while the tab is active). The logo is a PNG and reads perfectly flat. */

/* ABSENT — the nav-tab hover lift + accent shadow, and with it the
   .primary-home-tab-wrap cancellation that only existed to undo the lift for
   the bare hit area over the logo. The structural rule already shifts the tab's
   background and border on hover, which IS base's hover. */

/* Zoom stepper field: a flat 2px ring instead of classic's 8px accent bloom. */
.optionsColsInput:focus {
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

/* Notification badge: a solid accent pill (classic uses a two-stop gradient). */
.notification-badge {
  background: var(--color-accent);
}

/* Topbar dropdowns: neutral elevation. --shadow-md is redefined above, so this
   is the same declaration as classic's and a completely different shadow. */
.notification-dropdown,
.options-dropdown {
  box-shadow: var(--shadow-md);
}

/* ============================================================================
   AUTH  (.auth-view — styles-auth.css)
   ========================================================================== */

/* ABSENT — the full-page accent bloom over a vertical fade. styles-auth.css
   already paints `background-color: var(--color-primary)`, so dropping the
   background-image leaves exactly the flat ground base wants. */

/* ABSENT — the hover lift on the provider buttons and the primary button. */

/* ABSENT — the primary button's accent glow. */

/* The "or" divider hairlines. Not decoration to drop: the ::before/::after
   boxes are pure geometry in the structure sheet and have no fill of their own,
   so without this they are invisible. */
.auth-view .auth-or::before,
.auth-view .auth-or::after {
  background: var(--color-overlay-15);
}

/* ============================================================================
   DIALOGS  (.new-binder-dialog / .deck-data-dialog / .advanced-card-search-*
             — styles-dialogs.css)
   ========================================================================== */

/* Modal shells. classic frosts them and rings them in a 30px accent bloom;
   base swaps both for one soft neutral drop. Their fills are already 95%
   opaque in the structure sheet, so nothing is lost by not blurring. */
.new-binder-dialog,
.deck-data-dialog {
  box-shadow: var(--shadow-lg);
}

/* ABSENT — the ::backdrop blur behind them. The scrim colour is
   --color-backdrop, a token, and stays. */

/* Select chevrons. The gutter and placement are structural; only the artwork
   is skin, and without it the selects have no arrow at all. Same glyph as
   classic — these selects are dark-filled in this pack too. */
.new-binder-dialog select,
.advanced-card-search-category-select,
.advanced-card-search-filter-select,
.advanced-card-search-filter-content .search-filter-set-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232fd6ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* Advanced search: the bar that marks the draggable resize edge. Flat accent,
   no 14px halo — but it still has to be painted, it is the bar itself. */
.advanced-card-search-dialog::before {
  background: var(--color-accent);
}

/* Advanced search: an active toolbar toggle keeps its inset accent ring. This
   is state, not decoration — a solid 1px line rather than classic's 50% haze. */
.advanced-card-search-view-toggle-wrap.is-active .advanced-card-search-filters-btn,
.advanced-card-search-bookmark-toggle-wrap.is-active .advanced-card-search-filters-btn {
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* ============================================================================
   FRIENDS  (.friend-* / .user-avatar-chip — styles-friends.css)
   ========================================================================== */

/* Friend card: a 1px lift (classic lifts 2px). Kept because the row is a card
   and the lift is its only affordance; halved because base is quiet. */
.friend-row-wrap:hover {
  transform: translateY(-1px);
}

/* Unfriend: the quiet danger pill. Entirely literal colour — no token names
   this red — so the whole treatment has to be stated. Flat: no hover lift, and
   the fill deepens by a few percent rather than glowing. */
.friend-drawer .btn-danger {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #ff7d8a;
}
.friend-drawer .btn-danger:hover {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.55);
}

/* ============================================================================
   HOME  (.home-view / .home-dash — styles-home.css)
   ========================================================================== */

/* ABSENT — the ambient accent glow bloomed in from above the fold, on both
   .home-view and (below) .profile-view. It is the single most "neon" thing in
   classic and the first thing base drops. */

/* ABSENT — the landing shell's three-layer gradient, and the old hero's
   bleed-through binder art and scrim (.home-landing::before / ::after). Those
   two pseudo-elements are already switched off by `content: none` in the
   structure sheet, so classic only carries them to stay in step; base does not
   carry dead paint. */

/* ABSENT — the v2 hero's accent bloom. styles-home.css gives .home-hero-v2
   `background-color: var(--color-primary)`, so the hero is simply the page
   colour: one flat plane, edge to edge, which is the whole idea. */

/* Primary CTA: a solid accent pill that deepens on hover. classic uses a
   two-stop gradient that lifts and scales into an accent halo. */
.home-view .home-hero-cta {
  background: var(--color-accent);
}
.home-view .home-hero-cta:hover {
  background: var(--color-accent-hover);
}

/* Fanned hero cards: five flat card faces under one soft neutral drop. classic
   paints five radial gradients; the rotations and offsets are geometry and stay
   structural in both packs. Without a fill these boxes are invisible. */
.home-view .home-hero-card {
  box-shadow: var(--shadow-lg);
}
.home-view .home-hero-card.hc1 { background: #0b2a38; }
.home-view .home-hero-card.hc2 { background: #2e0f2a; }
.home-view .home-hero-card.hc3 { background: #0c2e22; }
.home-view .home-hero-card.hc4 { background: #33250e; }
.home-view .home-hero-card.hc5 { background: #331019; }

/* Feature cards and the workflow/FAQ panels: a flat overlay wash where classic
   runs a 165° glass gradient. The hover brightens the wash; the border shift is
   structural, and classic's 3px lift and drop shadow are gone. */
.home-view .home-feature-card {
  background: var(--color-overlay-5);
}
.home-view .home-feature-card:hover {
  background: var(--color-overlay-8);
}
.home-view .home-workflows,
.home-view .home-faq {
  background: var(--color-overlay-4);
}

/* Screenshot mattes. ⚠ The WHOLE background stack is here, placement included —
   same reason as classic: the base rule uses the `background` shorthand, so
   leaving the modifiers' `background-size: cover` in layer(structure) would let
   this sheet's implied `background-size: auto` out-rank it. */
.home-view .home-screenshot-placeholder {
  background: var(--color-overlay-5);
}
.home-view .home-screenshot-placeholder.home-screenshot-master-set {
  background-image: url("/img/masterSet.webp"), linear-gradient(var(--color-overlay-8), var(--color-overlay-8));
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
}
.home-view .home-screenshot-placeholder.home-screenshot-collection {
  background-image: url("/img/collection.webp"), linear-gradient(var(--color-overlay-8), var(--color-overlay-8));
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
}

/* Dashboard. Avatars are solid accent discs (classic: gradients under an accent
   drop), the stat tiles a flat wash, and the primary button's glow and lift are
   gone — styles.css already handles its hover fill. */
.home-dash .dash-avatar {
  background: var(--color-accent);
}
.home-dash .dash-stat {
  background: var(--color-overlay-5);
}
.home-view .dash-disc-av,
.home-dash .dash-feed-av {
  background: var(--color-accent);
}

/* ABSENT — .dash-btn-primary's accent glow and hover lift, and .dash-disc's
   2px hover lift. Discover cards get their feedback from the structural border
   and background shift. */

/* ============================================================================
   PROFILE  (.profile-view / .profile-card / .profile-dialog
             — styles-profile.css)
   ========================================================================== */

/* ABSENT — the page's ambient accent glow (see HOME above). */

/* Hero, cards and dialogs: one flat wash and one neutral drop, where classic
   runs a glass gradient plus an accent bloom in the hero's corner. */
.profile-view .profile-hero {
  background: var(--color-overlay-5);
  box-shadow: var(--shadow-sm);
}
.profile-card {
  background: var(--color-overlay-5);
  box-shadow: var(--shadow-sm);
}
.profile-dialog {
  background-image: linear-gradient(var(--color-overlay-5), var(--color-overlay-5));
  box-shadow: var(--shadow-lg);
}

/* ABSENT — the hero's dot texture and the diagonal mask that fades it in.
   Texture is the opposite of flat. */

/* ABSENT — the frosted .profile-tabbar and the blurred .profile-dialog-backdrop.
   The tabbar's overlay fill is structural and stands alone. */

/* Avatar ring: a solid accent ring instead of classic's conic sweep, and it
   brightens rather than swelling and blooming on hover. */
.profile-view .profile-hero-avatar-ring {
  background: var(--color-accent);
}
.profile-view .profile-hero-avatar-ring:hover {
  background: linear-gradient(135deg, var(--color-accent-hover), var(--bb-magenta));
}

/* The "Edit" scrim that fades in over the avatar. Not decoration to drop: it is
   the scrim, and it sits over an arbitrary card image. */
.profile-view .profile-avatar-edit-scrim {
  background: rgba(0, 0, 0, 0.55);
}

/* Active tab: a solid accent pill, no glow. */
.profile-view .profile-tab.active {
  background: var(--color-accent);
}

/* Field focus: the same flat 2px ring as the topbar stepper and the auth
   fields, so every focus in the app is one shape. */
.profile-field input:focus,
.profile-view .friends-search-row input:focus {
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

/* Primary buttons: solid accent, deepening on hover. No gradient, no glow. */
.profile-view .btn-primary,
.profile-view .friends-search-row button.btn-primary {
  background: var(--color-accent);
}
.profile-view .btn-primary:hover,
.profile-view .friends-search-row button.btn-primary:hover {
  background: var(--color-accent-hover);
}

/* Danger surfaces: literal reds that no token names, so they must be stated.
   Same quiet pill as the FRIENDS unfriend button above — the drawer's own
   button matches both selectors, and the two blocks state identical values so
   their order does not matter. */
.profile-danger-card { border-color: rgba(220, 38, 38, 0.25); }
.profile-dialog-danger { border-color: rgba(220, 38, 38, 0.35); }
.profile-view .btn-danger {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #ff7d8a;
}
.profile-view .btn-danger:hover {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.55);
}

/* ============================================================================
   BOOKSHELF  (.bookshelf / .book-* — styles-bookshelf.css)
   The binder tiles on the home dashboard and the collection Binders tab.
   ========================================================================== */

/* The shelf plank (the fading hairline + its drop) is no longer a rule here:
   it is drawn by styles-bookshelf.css from the --shelf-plank-color /
   --shelf-plank-shadow pair this pack declares at the top of the file. */

/* A pulled-out book floats on a neutral drop. classic adds a 28px bloom in the
   binder's own colour; base keeps the elevation and drops the bloom.
   ⚠ Only the SHADOW is here. The lift (`transform: translateY(-12px)`) stays in
   styles-bookshelf.css because the prefers-reduced-motion block cancels it, and
   a layered cancellation cannot out-rank an unlayered pack rule. */
.book:hover .book-body, .book:focus-within .book-body, .book.is-open .book-body {
  box-shadow: var(--shadow-lg);
}
/* …except the ghost "new binder" book, which is a dashed outline and stays
   flat. Stated here because the shadow above is unlayered and would out-rank a
   structural cancellation. */
.book-new:hover .book-body, .book-new:focus-within .book-body, .book-new.is-creating .book-body {
  box-shadow: none;
}

/* The spine's completion fill: ONE stop of the binder's own colour where
   classic ramps two. --bc is DATA (JS sets it per binder), so only the shape of
   the fill is skin. */
.book-spine-fill {
  background: color-mix(in srgb, var(--bc) 50%, transparent);
}

/* ABSENT — the 100%-binder crown's warm bloom (a drop-shadow filter). The
   glyph keeps its colour, loses its halo. */

/* Privacy dot on the spine: the binder's colour lifted toward white so it reads
   against the dark ground. */
.book-spine-dot { border-color: color-mix(in srgb, var(--bc) 80%, white 10%); }
.book-spine-dot.is-public { background: color-mix(in srgb, var(--bc) 80%, white 10%); }

/* Cover art plate: ONE flat wash of the binder's colour over the neutral stock,
   where classic stacks two radial blooms on a slate fade. Written as a
   two-identical-stop gradient because the structural property is
   `background-image`, and using it is load-bearing:
   ⚠ `background-image`, NOT the `background` shorthand. `.book-cover-art.has-bg`
   sets background-size/position in the structure sheet for binders that have
   real cover art, and an unlayered shorthand here would reset both past it. */
.book-cover-art {
  background-image: linear-gradient(
    color-mix(in srgb, var(--bc) 26%, #17171C),
    color-mix(in srgb, var(--bc) 26%, #17171C));
}

/* The privacy badge and the settings gear sit ON the cover art, so they carry a
   near-black scrim in BOTH base packs — they have to read over arbitrary card
   images, not over the page. */
.book-cover-badge,
.book-cover-gear {
  background: rgba(0, 0, 0, 0.55);
}

/* KEPT, at half classic's angle: the gear turns as you reach for it. A rotation
   is mechanical feedback on a mechanical glyph, not a neon flourish — the rule
   base drops is the SCALE transform, not every transform. */
.book-cover-gear:hover { transform: rotate(30deg); }

/* Cover progress bar: flat, in the binder's colour. */
.book-cover-bar i {
  background: var(--bc);
}

/* Colour swatches. classic pops them 15% larger on hover; base has no scale
   hovers, so the swatch simply comes up to full opacity — the same signal the
   structure sheet already uses for the SELECTED swatch (`.book-swatch.on`).
   The custom swatch stays a rainbow wheel: seven literal hues that no token
   names, and it is the control's whole meaning. That conic gradient
   deliberately overrides `.book-swatch { background: var(--sw) }` in the
   structure sheet, and still does — unlayered beats layered at equal
   specificity. */
.book-swatch:hover { opacity: 1; }
.book-swatch-custom {
  background: conic-gradient(#ff5757, #ffd54a, #5ccf6a, #4aa3ff, #b06bff, #ff8fcf, #ff5757);
}

/* Primary face button (Save / Create): solid accent. */
.book-face-btn.primary {
  background: var(--color-accent);
}

/* Delete: the same quiet danger pill as FRIENDS and PROFILE above.
   ⚠ This rule's border-color (0,2,0, unlayered) deliberately out-ranks
   `.book-face-btn:hover` (0,2,0, layered), reproducing the source order the
   structure sheet expects: the pill keeps its red border while hovered, and
   only its own :hover below deepens it. */
.book-face-btn.danger {
  color: #ff7d8a;
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.1);
}
.book-face-btn.danger:hover {
  border-color: rgba(220, 38, 38, 0.55);
  background: rgba(220, 38, 38, 0.18);
}

/* KEPT — the ghost book's plus sign turns a quarter turn as it opens. Same
   reasoning as the gear above. */
.book-new:hover .book-spine-plus, .book-new:focus-within .book-spine-plus {
  transform: rotate(90deg);
}

/* ============================================================================
   DECKSHELF  (.deck-shelf / .deckbox-* — styles-deckshelf.css)
   The deck boxes standing on the shelf planks on the library's Decks tab.

   No RULES, only materials — styles-deckshelf.css reads all seventeen tokens
   below with token-based fallbacks. Base's identity holds here exactly as it
   does on the bookshelf: the same geometry, a neutral grey ladder instead of
   classic's violet-tinted one, and no coloured bloom on the lift.
   ========================================================================== */

:root {
  /* The four printed materials — a flatter, cooler ladder than classic's; the
     hue is gone but the step between the four faces is not, because that step
     is what makes the box read as three-dimensional. */
  --deckbox-shell: #0d1521;
  --deckbox-lid: #102033;
  --deckbox-top: #15293c;
  --deckbox-side: #070b11;

  /* Hairlines. The highlight is dimmer and the shade fractionally deeper than
     classic's — base leans on form, not sparkle. */
  --deckbox-seam: rgba(0, 0, 0, 0.6);
  --deckbox-hi: rgba(255, 255, 255, 0.07);
  --deckbox-lo: rgba(0, 0, 0, 0.32);

  /* The acetate sweep over the leader window, at roughly two thirds of
     classic's strength. */
  --deckbox-gloss: linear-gradient(112deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) 22%, transparent 44%, transparent 76%, rgba(255, 255, 255, 0.05));

  /* Chip fill. (The settings gear is the binder cover's .book-cover-gear and
     takes its scrim from that rule above.) */
  --deckbox-chip-bg: rgba(0, 0, 0, 0.38);

  /* Elevation: the same pool on the plank, the same rest drop. */
  --deckbox-contact: rgba(0, 0, 0, 0.5);
  --deckbox-rest-shadow: var(--shadow-md);

  /* The four foregrounds. Base's --color-accent-light is a neutral #A6ACB8, so
     "complete" reads as a lighter chip rather than a coloured one — which is
     why styles-deckshelf.css also prefixes the complete count with a check
     glyph. Colour alone was never going to carry it in a hueless pack. */
  --deckbox-count-complete: var(--color-accent);
  --deckbox-privacy-public: var(--color-accent-light);
  --deckbox-privacy-private: var(--color-text-faded);
  --deckbox-new-plus: var(--color-accent-light);
}

/* The seventeenth token. classic mixes --box-color into its lift bloom, which
   forces the declaration onto .deckbox (a var() inside a custom property is
   substituted on the element it is declared on, and --box-color only exists
   there). Base has no bloom to mix — but the placement is kept identical
   across the four packs so the block reads the same everywhere. */
.deckbox {
  --deckbox-lift-shadow: var(--shadow-lg);
}

/* ============================================================================
   DECK  (.deck-view / .deck-* — styles-deck.css)
   ========================================================================== */

/* Section toolbar buttons and empty card slots lift a hair on hover. Kept at
   1px — these are the affordance on otherwise featureless boxes — and the card
   slot comes down from classic's 2px to match. */
.deck-section-add-btn:hover:not(:disabled),
.deck-section-move-btn-wrap:hover:has(.deck-section-move-btn:not(:disabled)),
.deck-section-delete-btn-wrap:hover:has(.deck-section-delete-btn:not(:disabled)),
.deck-card-slot:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* Drop target: a 2px accent ring drawn outside the border, on cards, slots and
   whole sections. Functional, not decorative — it is how a drag says "here" —
   so it survives the flattening unchanged.
   ⚠ `.card-slot.card-drop-target` is the BINDER grid's slot; the group is
   declared together so both grids light up identically. */
.deck-card-stack.deck-card-drop-target,
.deck-card-slot.deck-card-drop-target,
.deck-card-slot.deck-card-slot-add-active,
.deck-section.deck-card-drop-target,
.card-slot.card-drop-target {
  box-shadow: 0 0 0 2px var(--color-accent);
}

/* ============================================================================
   BINDER PAGES + SLOTS  (section.page / .card-slot / .card-image / the
   data-tooltip system / the card-preview modal — styles-binder-misc.css)
   ========================================================================== */

/* The page itself: near-black card stock, one step off pure black.
   The four-layer dot screen prints over it — STRUCTURAL, in
   styles-binder-misc.css, identical under every pack. base does not (and
   cannot) opt out: the binder-paper texture is not a theme's to decide.
   The stock colour IS base's to decide, and this is the whole of it.
   ⚠ `background-color` only, and NEVER the `background` shorthand: this sheet
   is unlayered, so a shorthand here would reset the structural
   background-image/size/position and erase the dots (same discipline as the
   bookshelf cover art). */
section.page {
  background-color: var(--bb-page-ink);
}

/* Every page-layout class re-states the same stock COLOUR. JS puts `page` and
   the layout class on the SAME element (binder-render-ui.js sets
   pageSection.className to "page <layout>"), so this duplicates the fill above
   — kept because the structure sheet expects it, and dropping it would be a
   silent change if the two classes ever came apart. Stock only: the dot screen
   is structural and rides on `section.page`. */
section.page-1by1,
section.page-2by2,
section.page-4by3,
section.page-4by4,
section.page-5by4,
section.page-3by3 {
  background-color: var(--bb-page-ink);
}

/* The bifold spread itself (styles.css): the same stock, on a single neutral
   drop rather than classic's two-layer "paper on a table". Its dot screen is
   structural too (styles.css), so the spread and the pages inside it carry the
   same texture here as everywhere. The spread's BORDER stays structural — its
   colour is --bifold-border-color, the binder's own colour, which JS sets per
   binder; that is data, not palette. */
.bifoldContainer {
  background-color: var(--bb-page-ink);
  box-shadow: var(--shadow-lg);
}

/* Drop-target ring while a search result is dragged onto a slot. Functional,
   like the deck rings above.
   ⚠ The slot's own `background-color` tint stayed in the structure sheet on
   purpose: `section.page.page-first-and-empty .card-slot` (0,3,1) out-ranks it
   today and blanks the slot, and an unlayered fill here would defeat that
   layered cancellation. */
div.card-slot.binder-card-slot-add-active {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

/* Holo foil — KEPT, and kept in full, sweep included. This is the one place
   base does not flatten: the foil is a rendering of the CARD, not of the app's
   chrome. A flat card game would be a different product.
   ⚠ WHICH cards get it is decided in JS — scripts/cards/holo-detection.js adds
   `.is-holo-card`. Only the ARTWORK is skin; the layer's `opacity` ramp stays
   structural, because that is the JS-driven reveal, not the look. */
.holo-overlay-layer {
  background-image:
    linear-gradient(115deg, transparent 30%, var(--color-input-border) 48%, transparent 66%),
    radial-gradient(circle at 14% 10%, var(--color-holo-pink-faded), transparent 46%),
    radial-gradient(circle at 82% 88%, var(--color-holo-blue), transparent 44%);
  mix-blend-mode: screen;
  background-size: 250% 250%, 160% 160%, 150% 150%;
  background-position: -140% 0%, 0% 0%, 100% 100%;
}
.is-holo-card:hover .holo-overlay-layer {
  animation: holoShineSweep 5s linear infinite;
}
@keyframes holoShineSweep {
  0%   { background-position: -140% 0%, 0% 0%, 100% 100%; }
  100% { background-position: 180% 0%, 100% 0%, 0% 100%; }
}

/* A hovered empty slot reveals a "Search" prompt over a scrim. The REVEAL
   (opacity 0 → 1) stays structural; the scrim has to be painted here. */
div.card-slot.card-slot-empty:hover .card-image::before {
  background-color: var(--color-backdrop);
}

/* ABSENT — the slot action buttons' hover lift and accent glow (Details /
   Replace / Owned / Remove / Move-all / Scale), and with them the
   `box-shadow: none` that classic needs for a DISABLED move-all button (a
   disabled button still matches :hover, so classic has to cancel its own glow;
   base has no glow to cancel). styles-binder-misc.css already switches their
   border to the accent on hover, which is the whole hover here.
   The :active press is kept: it is the button reporting the click. */
div.card-slot .remove-btn:active,
div.card-slot .search-btn:active,
div.card-slot .owned-btn:active,
div.card-slot .custom-scale-btn:active,
div.card-slot .move-all-left-btn:active,
div.card-slot .move-all-right-btn:active,
div.card-slot .details-btn:active {
  transform: translateY(1px);
}

/* Page controls (Add page / Move page / Delete page) — same decision, same
   reasons. `.page-add-option` rides along because the structure sheet always
   grouped it with them; that class is not rendered today. */
section.page .page-controls .page-remove-btn:active,
section.page .page-controls .page-move-btn:active,
section.page .page-controls .page-add-btn:active,
section.page .page-add-option:active {
  transform: translateY(1px);
}

/* ABSENT — frosted glass, everywhere it appears: the binder bottom bar, the
   search action dialog, the subtype dialog, the card-preview info panel and
   details pane, the preview close button, and the two ::backdrop blurs. It is
   classic's signature chrome treatment and base has no equivalent — it has the
   opposite. The two surfaces whose structural fill is only 85% opaque are made
   solid below, because 85% translucency over card art without a blur behind it
   reads as a smudge rather than as glass. */
.binder-bottom-bar,
.card-preview-details {
  background-color: var(--color-primary);
}

/* The subtype dialog: neutral elevation where classic puts a 30px accent halo. */
.search-subtype-dialog {
  box-shadow: var(--shadow-lg);
}

/* ABSENT — the preview close button's 1.1× hover swell. styles-binder-misc.css
   already shifts its fill and border on hover. */

/* ============================================================================
   LIBRARY  (.library-* — styles-library.css)
   The Collection surface: tab bar, cards table, instance panels, deck tiles.
   ========================================================================== */

/* ABSENT — the collection tabs' 1px hover lift and the active tab's accent text
   halo. A tab bar is a fixed row; nothing in it should move, and the active tab
   already has a structural underline. */

/* ABSENT — the card select button's lift and accent glow, on both its grid and
   its table flavour, and therefore also classic's
   `.library-cards-table__col-select .library-card-select-btn:hover` rule, which
   exists only to cancel that lift inside a table row. Same for the remove
   button and the instance-card face buttons: the structure sheet shifts their
   fill and border, which is base's hover.
   The :active presses are kept — same reasoning as the binder slot buttons, but
   as an opacity dip rather than classic's 0.95 scale.
   DEAD SELECTOR DROPPED from this group: `.library-item-settings-btn:active`,
   the old Decks-tab tile gear — see the note below. The remaining three are
   Cards-tab buttons that are still rendered. */
.library-card-select-btn:active,
.library-card-remove-btn:active,
.library-instance-card__top-btn:active {
  opacity: 0.7;
}

/* DEAD RULES DELETED: the Decks-tab tile hover (.library-item-card:hover /
   .library-deck:hover). The Decks tab draws deck BOXES now
   (styles-deckshelf.css + the DECKSHELF token block above); nothing renders
   those classes any more. */

/* Instance panel pills: an active pill keeps its 1px ring in its own accent.
   State, not decoration — solid rings here where classic uses 40–45% hazes. The
   fills and borders stay structural: they are colour-mixes of
   --library-tag-*-accent over --library-instance-detail-pill-bg, both tokens. */
.library-instance-details-panel__state-pill--active {
  box-shadow: 0 0 0 1px var(--color-accent);
}
.library-instance-details-panel__tag-pill--active[data-tag='pack'] {
  box-shadow: 0 0 0 1px var(--library-tag-pack-accent);
}
.library-instance-details-panel__tag-pill--active[data-tag='gift'] {
  box-shadow: 0 0 0 1px var(--library-tag-gift-accent);
}
.library-instance-details-panel__tag-pill--active[data-tag='trade'] {
  box-shadow: 0 0 0 1px var(--library-tag-trade-accent);
}
.library-instance-details-panel__tag-pill--active[data-tag='paid'] {
  box-shadow: 0 0 0 1px var(--library-tag-paid-accent);
}

/* ============================================================================
   BOUNDBOT SIGNATURE  — the decoration that makes this pack read as /play.
   Everything above is base's structure retinted; this group is new and is
   deliberately loud: square geometry, neon edges, terminal type.
   ========================================================================== */

:root {
  /* Corner brackets: two cyan L-ticks (top-left, bottom-right). A background
     LAYER list, so a rule writes `background: var(--bb-ticks), <its fill>` and
     keeps its own fill underneath. */
  --bb-tick: rgba(47, 214, 255, 0.85);
  --bb-ticks:
    linear-gradient(var(--bb-tick), var(--bb-tick)) left top / 14px 2px no-repeat,
    linear-gradient(var(--bb-tick), var(--bb-tick)) left top / 2px 14px no-repeat,
    linear-gradient(var(--bb-tick), var(--bb-tick)) right bottom / 14px 2px no-repeat,
    linear-gradient(var(--bb-tick), var(--bb-tick)) right bottom / 2px 14px no-repeat;
  --bb-panel: rgba(10, 15, 22, 0.92);
  --bb-glow-strong: 0 0 6px rgba(47, 214, 255, 0.55), 0 0 18px rgba(47, 214, 255, 0.25);
  --bb-chroma: -1px 0 rgba(255, 79, 216, 0.75), 1px 0 rgba(47, 214, 255, 0.75);

  /* ══ STATE COLOURS — one meaning each, used the same way everywhere ═════
       CYAN    = you can act on it   (buttons, links, focus, active nav/tabs)
       MAGENTA = people / you        (handles, tags, avatars, notifications)
       GREEN   = have / done / up    (owned, complete, gains, success, public)
       YELLOW  = want / partial / heads-up (wishlist, in progress, pending,
                 warnings, money you spent)
       RED     = missing / down / destructive (unowned, losses, errors,
                 delete/remove, traded away)
     Each colour has: text hue, soft fill, edge, glow. */
  --bb-green: #35e39c;
  --bb-green-fill: rgba(53, 227, 156, 0.1);
  --bb-green-edge: rgba(53, 227, 156, 0.6);
  --bb-green-glow: 0 0 8px rgba(53, 227, 156, 0.45);
  --bb-yellow: #ffd84d;
  --bb-yellow-fill: rgba(255, 216, 77, 0.1);
  --bb-yellow-edge: rgba(255, 216, 77, 0.6);
  --bb-yellow-glow: 0 0 8px rgba(255, 216, 77, 0.4);
  --bb-red: #ff4d5e;
  --bb-red-fill: rgba(255, 77, 94, 0.1);
  --bb-red-edge: rgba(255, 77, 94, 0.6);
  --bb-red-glow: 0 0 8px rgba(255, 77, 94, 0.45);
}

/* ── GEOMETRY ── square, everywhere. Unlayered, so this beats every layered
   structural rule; !important also beats inline styles and the few literal
   radii in this sheet and in styles-home.css. */
*, *::before, *::after { border-radius: 0 !important; }

/* ── GROUND ── near-black blue, faint cyan grid floor, bb's two corner washes. */
html {
  background:
    radial-gradient(1100px 700px at 18% -12%, rgba(47, 214, 255, 0.07), transparent 60%),
    radial-gradient(900px 600px at 105% 8%, rgba(255, 79, 216, 0.06), transparent 60%),
    linear-gradient(rgba(47, 214, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(47, 214, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--color-primary);
  background-attachment: fixed;
  scrollbar-color: #1f4a63 transparent;
  caret-color: var(--color-accent);
}
::-webkit-scrollbar-thumb { background: #1f4a63; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* CRT scanlines — fixed, click-through. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
  opacity: 0.4;
}

::selection { background: rgba(255, 79, 216, 0.4); color: #fff; }

/* ── TYPE ── big headings get a chromatic-aberration edge; section titles are
   bb's panel-title voice: uppercase, tracked, cyan `//` prefix. */
h1,
.profile-view .profile-hero-name,
.home-dash .dash-who h1 {
  letter-spacing: 0.01em;
  text-shadow: var(--bb-chroma);
}
h2, h3,
.profile-card-title,
.deck-section-title,
.library-friends-binders-heading,
.home-dash .dash-sec-head h2,
.home-dash .dash-sec-head h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.home-view h2::before,
.home-dash h2::before,
.home-dash h3::before,
.profile-card-title::before,
.profile-card h3::before,
.deck-section-title::before,
.library-friends-binders-heading::before {
  content: "// ";
  color: var(--color-accent);
  text-shadow: 0 0 8px rgba(47, 214, 255, 0.6);
}
label,
.profile-field label,
.profile-card-sub {
  letter-spacing: 0.06em;
}

/* ── TOP BAR ── hard cyan baseline with a bloom under it. */
.app-topbar {
  border-bottom: 1px solid rgba(47, 214, 255, 0.45);
  box-shadow: 0 1px 0 rgba(47, 214, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.6);
}
.topbar-icon-circle-wrap {
  background-color: rgba(13, 21, 33, 0.9);
  border-color: var(--bb-border-strong);
  color: var(--bb-muted);
}
.topbar-icon-circle-wrap:hover,
.app-primary-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: var(--shadow-accent);
}
.app-primary-tab.active,
.primary-home-tab-wrap .app-primary-tab.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: var(--bb-glow-strong), inset 0 0 0 1px rgba(47, 214, 255, 0.35);
  text-shadow: 0 0 8px rgba(47, 214, 255, 0.5);
}
.header-theme-picker-circle[aria-pressed="true"] {
  border-color: var(--color-accent);
  box-shadow: var(--bb-glow-strong);
}

/* ── PANELS ── hairline + cyan corner brackets. */
.profile-view .profile-hero,
.profile-card,
.home-view .home-feature-card,
.home-view .home-feature-story,
.home-view .home-landing,
.home-dash .dash-panel,
.home-dash .dash-chart-panel,
.deck-section,
.friend-drawer,
.notification-dropdown,
.options-dropdown {
  background: var(--bb-ticks), var(--bb-panel);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 0 0 1px rgba(47, 214, 255, 0.03), var(--shadow-md);
}
.home-view .home-landing { background: var(--bb-ticks), transparent; }

/* Dialogs: a 2px cyan crown + brackets. */
.new-binder-dialog,
.deck-data-dialog,
.binder-settings-dialog,
.profile-dialog,
.advanced-card-search-dialog {
  border: 1px solid var(--bb-border-strong);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 -2px 14px rgba(47, 214, 255, 0.25), var(--shadow-lg);
}

/* ── STAT TILES ── cyan side bar, glowing tabular numbers. */
.profile-view .profile-stat-chip,
.home-dash .dash-stat,
.library-total-item {
  background: var(--bb-panel);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
}
/* The home tiles that pick a history chart: cyan frame + glow on hover / while selected. */
.home-dash .dash-stat-btn:hover,
.home-dash .dash-stat-btn[aria-pressed="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 12px rgba(47, 214, 255, 0.25);
}
.profile-view .profile-stat-chip strong,
.profile-view .profile-stat-chip b,
.home-dash .dash-stat-value,
.home-dash .num {
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(47, 214, 255, 0.45);
}

/* Tags / ids: magenta, bb's second hue. */
.profile-view .profile-hero-tag,
.home-dash .dash-announce-tag,
.deckbox-tag {
  background: rgba(255, 79, 216, 0.1);
  border: 1px solid rgba(255, 79, 216, 0.6);
  color: var(--bb-magenta);
  text-shadow: 0 0 6px rgba(255, 79, 216, 0.45);
}

/* ── AVATARS ── square frames: cyan border, glow, magenta offset shadow. */
.profile-view .profile-hero-avatar-ring,
.user-avatar-chip,
.home-dash .dash-avatar {
  background: linear-gradient(135deg, var(--color-accent), var(--bb-magenta));
  box-shadow: 0 0 12px rgba(47, 214, 255, 0.45), 4px 4px 0 rgba(255, 79, 216, 0.7);
}
.user-avatar-chip-sm { box-shadow: 0 0 8px rgba(47, 214, 255, 0.45), 2px 2px 0 rgba(255, 79, 216, 0.7); }

/* ── TABS / SEGMENTS ── a square strip; the active cell is solid cyan. */
.profile-view .profile-tabbar,
.profile-segmented,
.library-tab-bar {
  background: rgba(5, 8, 13, 0.85);
  border: 1px solid var(--bb-border-strong);
}
.profile-view .profile-tab,
.profile-seg,
.library-tab,
.book-mini-seg {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.profile-view .profile-tab.active,
.profile-seg.active,
.profile-seg[aria-pressed="true"],
.library-tab.active {
  background: var(--color-accent);
  color: var(--color-primary);
  box-shadow: var(--bb-glow-strong);
  text-shadow: none;
}

/* ── BUTTONS ── terminal keys: uppercase, tracked, square. Primary is outlined
   neon and INVERTS to solid cyan on hover. */
.btn,
button.btn,
.home-dash .dash-btn,
.book-face-btn,
.home-view .home-hero-cta,
.home-view .home-hero-cta-secondary {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.btn-primary,
.auth-view .btn-primary,
.profile-view .btn-primary,
.profile-view .friends-search-row button.btn-primary,
.home-dash .dash-btn-primary,
.home-view .home-hero-cta,
.book-face-btn.primary {
  background: rgba(47, 214, 255, 0.1);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  text-shadow: 0 0 6px rgba(47, 214, 255, 0.45);
  box-shadow: 0 0 10px rgba(47, 214, 255, 0.25), inset 0 0 10px rgba(47, 214, 255, 0.12);
}
.btn-primary:hover,
.auth-view .btn-primary:hover,
.profile-view .btn-primary:hover,
.profile-view .friends-search-row button.btn-primary:hover,
.home-dash .dash-btn-primary:hover,
.home-view .home-hero-cta:hover,
.book-face-btn.primary:hover {
  background: var(--color-accent);
  color: var(--color-primary);
  text-shadow: none;
  box-shadow: var(--bb-glow-strong), 3px 3px 0 rgba(255, 79, 216, 0.75);
}

.btn-secondary,
.btn-ghost,
.home-dash .dash-btn-ghost,
.home-view .home-hero-cta-secondary {
  background: rgba(13, 21, 33, 0.9);
  border: 1px solid var(--bb-border-strong);
  color: var(--color-text-subtle);
  box-shadow: none;
}
.btn-secondary:hover,
.btn-ghost:hover,
.home-dash .dash-btn-ghost:hover,
.home-view .home-hero-cta-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: var(--shadow-accent);
}

.btn-danger,
.friend-drawer .btn-danger,
.profile-view .btn-danger,
.book-face-btn.danger {
  background: rgba(255, 93, 110, 0.08);
  border: 1px solid rgba(255, 93, 110, 0.6);
  color: #ff5d6e;
  text-shadow: 0 0 6px rgba(255, 93, 110, 0.4);
}
.btn-danger:hover,
.friend-drawer .btn-danger:hover,
.profile-view .btn-danger:hover,
.book-face-btn.danger:hover {
  background: #ff5d6e;
  color: var(--color-primary);
  text-shadow: none;
  box-shadow: 0 0 12px rgba(255, 93, 110, 0.5);
}

/* Small filled accent chips keep the fill but take dark ink. */
.notification-badge,
.home-dash .dash-badge,
.home-dash .dash-mini.is-accent,
.advanced-card-search-info-btn:hover,
.advanced-card-search-binder-slot-add-btn:hover,
.library-instance-card__top-btn:hover {
  color: var(--color-primary);
}
.notification-badge { background: var(--bb-magenta); box-shadow: 0 0 8px rgba(255, 79, 216, 0.6); }

/* ── INPUTS ── recessed terminal fields. */
/* Form controls do not inherit font by default; without this the binder's
   page-name inputs and a few dialog fields fall back to the system sans. */
input, select, textarea, button { font-family: inherit; }
.bifoldContainer .page-name-input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  border: 1px solid var(--bb-border-strong);
  background-color: rgba(5, 8, 13, 0.95);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  background-color: rgba(5, 8, 13, 0.9);
  border-color: var(--bb-border-strong);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
  box-shadow: var(--bb-glow-strong);
}
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--color-accent); }

/* ── LIBRARY TABLE ── uppercase grid headers, cyan row hover. */
.library-cards-table th {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-muted);
  border-bottom: 1px solid var(--color-accent);
}
.library-cards-table__row:hover { background: rgba(47, 214, 255, 0.06); }
.library-instance-details-panel__tag-pill--active,
.library-instance-details-panel__state-pill[aria-pressed="true"] {
  background: rgba(47, 214, 255, 0.14);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── CARDS ON PAGES ── cyan bloom on hover; drop targets pulse magenta. */
div.card-slot:hover .card-image,
.library-card:hover,
.deck-card-slot:hover:not(:disabled) {
  box-shadow: 0 0 0 1px var(--color-accent), var(--bb-glow-strong);
}
.deck-card-stack.deck-card-drop-target,
.deck-card-slot.deck-card-drop-target,
.deck-section.deck-card-drop-target,
.card-slot.card-drop-target {
  box-shadow: 0 0 0 2px var(--bb-magenta), 0 0 14px rgba(255, 79, 216, 0.5);
}

/* ── HOME ── hero headline set like a terminal (a -0.03em display face turns
   into a five-line wall in monospace). */
.home-view .home-hero-v2 h1 {
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.home-view .home-hero-accent { text-shadow: 0 0 16px rgba(47, 214, 255, 0.45), var(--bb-chroma); }
.home-view .home-hero-card { border: 1px solid rgba(47, 214, 255, 0.25); }

/* Links: cyan, underline on hover with a glow. */
a { text-underline-offset: 3px; }
a:hover { text-shadow: 0 0 8px rgba(47, 214, 255, 0.5); }

/* ============================================================================
   STATE COLOURS — applied by meaning (see the legend in :root).
   GREEN have/done/up · YELLOW want/partial/heads-up · RED missing/down/destroy
   ========================================================================== */

:root {
  /* Dashboard chart palette: series 1 stays cyan (neutral data); good/bad and
     the save banners speak the state colours. */
  --chart-1: #2fd6ff;
  --chart-2: #ff4fd8;
  --chart-3: #35e39c;
  --chart-4: #ffd84d;
  --chart-5: #9b7bff;
  --chart-other: rgba(199, 224, 232, 0.28);
  --chart-track: rgba(47, 214, 255, 0.12);
  --chart-grid: rgba(47, 214, 255, 0.08);
  --chart-good: var(--bb-green);
  --chart-bad: var(--bb-red);
  --save-banner-success-bg: rgba(5, 8, 13, 0.96);
  --save-banner-success-color: var(--bb-green);
  --save-banner-pending-bg: rgba(5, 8, 13, 0.96);
  --save-banner-pending-color: var(--bb-yellow);
  --deckbox-count-complete: var(--bb-green);
  --deckbox-privacy-public: var(--bb-green);
  --deckbox-privacy-private: var(--bb-red);
}

/* ── GREEN · have / done / up ─────────────────────────────────────────────── */
.library-cards-table td[data-library-col="owned"] {
  color: var(--bb-green);
  font-variant-numeric: tabular-nums;
}
.library-cards-table th[data-column-key="owned"] { color: var(--bb-green); }
.home-dash #homeStatValue,
#homeStatGain.is-up,
.library-cards-table td.library-cards-table__cell--market-better,
.library-cards-table td.library-cards-table__cell--paid-better,
#bottomBarBinderCurrentMarketValueValue,
#bottomBarBinderTotalMarketValueValue,
.book-cover-value b {
  color: var(--bb-green);
  text-shadow: var(--bb-green-glow);
}
#libraryMarketTotal { color: var(--bb-green); border-color: var(--bb-green-edge); }
.library-instance-details-panel__state-pill--active[data-state="owned"],
.advanced-card-search-library-btn--owned,
.friend-request-accept-btn,
.home-dash .dash-mini.is-accent {
  background: var(--bb-green-fill);
  border-color: var(--bb-green-edge);
  color: var(--bb-green);
  box-shadow: var(--bb-green-glow);
  text-shadow: none;
}
.advanced-card-search-library-btn--owned:hover,
.friend-request-accept-btn:hover,
.home-dash .dash-mini.is-accent:hover {
  background: var(--bb-green);
  color: var(--color-primary);
}
div.card-slot.card-owned .owned-btn {
  background: var(--bb-green);
  border-color: var(--bb-green);
  color: var(--color-primary);
  box-shadow: var(--bb-green-glow);
}
.book.is-complete .book-cover-progress-row b,
.chart-meter-pct,
#homeStatCompletion,
#bottomBarBinderPercentageValue { color: var(--bb-green); }
.book.is-complete .book-body { box-shadow: 0 0 0 1px var(--bb-green-edge), var(--bb-green-glow); }
.book-cover-bar i,
.chart-meter-fill { background: var(--bb-green); box-shadow: var(--bb-green-glow); }
.chart-meter-track { background: rgba(53, 227, 156, 0.12); }
.book-crown { color: var(--bb-yellow); filter: drop-shadow(0 0 6px rgba(255, 216, 77, 0.6)); }
.book-cover-badge.is-public,
.deckbox-privacy.is-public {
  color: var(--bb-green);
  border-color: var(--bb-green-edge);
}
.book-spine-dot.is-public { background: var(--bb-green); border-color: var(--bb-green); box-shadow: var(--bb-green-glow); }
.gift-badge { background: var(--bb-green-fill); border: 1px solid var(--bb-green-edge); color: var(--bb-green); }
#saveBanner { border: 1px solid var(--bb-green-edge); box-shadow: var(--bb-green-glow); }
#homeStatsStates [data-key="owned"].chart-stack-seg,
#homeStatsStates [data-key="owned"].chart-legend-dot { background: var(--bb-green); box-shadow: var(--bb-green-glow); }

/* ── YELLOW · want / partial / heads-up / money spent ─────────────────────── */
.library-cards-table td[data-library-col="wishlist"] {
  color: var(--bb-yellow);
  font-variant-numeric: tabular-nums;
}
.library-cards-table th[data-column-key="wishlist"] { color: var(--bb-yellow); }
.library-instance-details-panel__state-pill--active[data-state="wishlist"],
.advanced-card-search-library-btn--wishlist,
#advancedCardSearchAddToWishlistBtn,
.home-dash .dash-badge,
.trade-badge {
  background: var(--bb-yellow-fill);
  border-color: var(--bb-yellow-edge);
  color: var(--bb-yellow);
  box-shadow: var(--bb-yellow-glow);
  text-shadow: none;
}
.advanced-card-search-library-btn--wishlist:hover,
#advancedCardSearchAddToWishlistBtn:hover {
  background: var(--bb-yellow);
  color: var(--color-primary);
}
.trade-badge { border-style: solid; border-width: 1px; }
.library-instance-card--wishlist { box-shadow: inset 0 0 0 1px var(--bb-yellow-edge); }
.deck-card-stack.card-partial .deck-card-stack-image-wrap { box-shadow: 0 0 0 1px var(--bb-yellow-edge), var(--bb-yellow-glow); }
.book:not(.is-complete):not(.is-empty) .book-cover-progress-row b { color: var(--bb-yellow); }
.deckbox-count:not(.is-complete) { color: var(--bb-yellow); }
/* Spend: what you paid is yellow; Cost Remaining is still-to-spend, also yellow. */
.home-dash #homeStatSpend,
#bottomBarBinderAmountPaidValueValue,
#bottomBarBinderCostRemainingValue,
.library-instance-details-panel__money-row--paid .library-instance-details-panel__money-display,
.library-cards-table__tag-text--paid {
  color: var(--bb-yellow);
  text-shadow: var(--bb-yellow-glow);
}
#libraryPaidTotal { color: var(--bb-yellow); border-color: var(--bb-yellow-edge); }
.library-cards-table td.library-cards-table__col-money:not(.library-cards-table__cell--market) { color: var(--bb-yellow); }
#saveSavingBanner { border: 1px solid var(--bb-yellow-edge); box-shadow: var(--bb-yellow-glow); }
.notification-dropdown .friend-request-item { border-left: 2px solid var(--bb-yellow); }
#homeStatsStates [data-key="wishlist"].chart-stack-seg,
#homeStatsStates [data-key="wishlist"].chart-legend-dot { background: var(--bb-yellow); box-shadow: var(--bb-yellow-glow); }

/* ── RED · missing / down / destructive ───────────────────────────────────── */
#homeStatGain.is-down,
.library-cards-table td.library-cards-table__cell--market-worse,
.library-cards-table td.library-cards-table__cell--paid-worse,
.profile-dialog-error {
  color: var(--bb-red);
  text-shadow: var(--bb-red-glow);
}
.library-cards-table td[data-library-col="traded"],
.library-cards-table th[data-column-key="traded"],
.library-cards-table__tag-text--trade { color: var(--bb-red); }
.library-instance-details-panel__state-pill--active[data-state="traded"] {
  background: var(--bb-red-fill);
  border-color: var(--bb-red-edge);
  color: var(--bb-red);
  box-shadow: var(--bb-red-glow);
}
.library-instance-card--traded { box-shadow: inset 0 0 0 1px var(--bb-red-edge); }
.library-instance-details-panel--traded { border-color: var(--bb-red-edge); }
/* Unowned slots in binders and decks: a thin red frame on top of the app's own
   greyscale, so "missing" reads at a glance. */
div.card-slot.card-unowned:not(.card-slot-empty) .card-image,
.deck-card-stack.card-unowned .deck-card-stack-image-wrap {
  box-shadow: 0 0 0 1px var(--bb-red-edge);
}
.book-cover-badge:not(.is-public) { color: var(--bb-red); border-color: var(--bb-red-edge); }
.book-spine-dot:not(.is-public) { border-color: var(--bb-red-edge); }
.friend-pill,
.friend-drawer__toggle--active {
  background: var(--bb-red-fill);
  border-color: var(--bb-red-edge);
  color: var(--bb-red);
}
.profile-danger-card,
.profile-dialog-danger { border-color: var(--bb-red-edge); box-shadow: inset 0 0 0 1px rgba(255, 77, 94, 0.08), var(--bb-red-glow); }
.profile-danger-card { background: linear-gradient(var(--bb-red), var(--bb-red)) left top / 14px 2px no-repeat, linear-gradient(var(--bb-red), var(--bb-red)) left top / 2px 14px no-repeat, linear-gradient(var(--bb-red), var(--bb-red)) right bottom / 14px 2px no-repeat, linear-gradient(var(--bb-red), var(--bb-red)) right bottom / 2px 14px no-repeat, var(--bb-panel); }
#homeStatsStates [data-key="traded"].chart-stack-seg,
#homeStatsStates [data-key="traded"].chart-legend-dot { background: var(--bb-red); box-shadow: var(--bb-red-glow); }

/* Every destructive control: outlined red, inverts to solid red on hover. */
.btn-danger,
.danger-btn,
.friend-drawer .btn-danger,
.profile-view .btn-danger,
.book-face-btn.danger,
.library-select-action-btn.danger-btn,
.binder-settings-delete-btn,
#deleteAccountBtn,
#deleteAccountConfirmBtn,
#deleteBinderConfirmBtn,
#deckSettingsDeleteBtn,
#deleteDeckConfirmBtn {
  background: var(--bb-red-fill);
  border: 1px solid var(--bb-red-edge);
  color: var(--bb-red);
  text-shadow: 0 0 6px rgba(255, 77, 94, 0.4);
  box-shadow: none;
}
.btn-danger:hover,
.danger-btn:hover,
.friend-drawer .btn-danger:hover,
.profile-view .btn-danger:hover,
.book-face-btn.danger:hover,
.library-select-action-btn.danger-btn:hover,
.binder-settings-delete-btn:hover,
#deleteAccountBtn:hover,
#deleteAccountConfirmBtn:hover,
#deleteBinderConfirmBtn:hover,
#deckSettingsDeleteBtn:hover,
#deleteDeckConfirmBtn:hover {
  background: var(--bb-red);
  border-color: var(--bb-red);
  color: var(--color-primary);
  text-shadow: none;
  box-shadow: var(--bb-red-glow);
}
/* Small remove / delete / dismiss icons: neutral at rest, red on hover. */
div.card-slot .remove-btn:hover,
section.page .page-controls .page-remove-btn:hover,
.deck-card-remove-btn:hover,
.library-card-remove-btn:hover,
.library-cards-table__remove-btn:hover,
.library-instance-card__top-btn.library-instance-card__delete-btn:hover,
.advanced-card-search-filter-pill-remove:hover,
.notification-dismiss-btn:hover,
.friend-request-decline-btn:hover {
  background: var(--bb-red);
  border-color: var(--bb-red);
  color: var(--color-primary);
  box-shadow: var(--bb-red-glow);
}

/* Empty counts stay quiet: a 0 / — in Owned, Wishlist or Traded is not a state. */
.library-cards-table td.is-zero[data-library-col] {
  color: var(--bb-faint);
  text-shadow: none;
}

/* ── COLLAGE (library Cards tab) — badges speak the state colours ─────────── */
.library-collage__tile:hover,
.library-collage__tile:focus-visible {
  box-shadow: 0 0 0 1px var(--color-accent), var(--bb-glow-strong);
}
.library-collage__tile.is-expanded { box-shadow: 0 0 0 2px var(--color-accent), var(--bb-glow-strong); }
.library-collage__tile.is-selected { box-shadow: 0 0 0 2px var(--bb-magenta), 0 0 14px rgba(255, 79, 216, 0.5); }
.library-collage__owned {
  background: rgba(5, 8, 13, 0.88);
  border: 1px solid var(--bb-green-edge);
  color: var(--bb-green);
  text-shadow: var(--bb-green-glow);
}
.library-collage__indicator--wishlist {
  background: rgba(5, 8, 13, 0.88);
  border: 1px solid var(--bb-yellow-edge);
}
.library-collage__indicator--wishlist .fa-heart { color: var(--bb-yellow); filter: drop-shadow(0 0 4px rgba(255, 216, 77, 0.6)); }
.library-collage__indicator--traded {
  background: rgba(5, 8, 13, 0.88);
  border: 1px solid var(--bb-red-edge);
}
.library-collage__indicator--traded .fa-right-left { color: var(--bb-red); filter: drop-shadow(0 0 4px rgba(255, 77, 94, 0.6)); }
.library-collage__tile--not-owned { box-shadow: inset 0 0 0 1px var(--bb-red-edge); }
.library-collage__detail { border: 1px solid var(--color-border); border-top: 2px solid var(--color-accent); }