:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light;
  color: #213547;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Hide scrollbars globally */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbars for WebKit browsers (Chrome, Safari, Edge) */
:root::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}

/* Green dropdown highlight for select elements */
select:focus {
  outline: none !important;
  border-color: #4a6f4a !important;
  box-shadow: 0 0 0 2px rgba(74, 111, 74, 0.2) !important;
}

/* Green option highlight when hovering in dropdown */
select option:checked,
select option:hover {
  background-color: #4a6f4a !important;
  color: white !important;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

html {
  background-color: var(--bg-primary);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: var(--bg-primary);
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #ffffff;
  }
}

/* Modal animation styles */
@keyframes modalFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Foil effect for card names */
@keyframes rainbow-shift {
  0% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  50% {
    background-position: 100% 50%;
    filter: hue-rotate(180deg);
  }
  100% {
    background-position: 0% 50%;
    filter: hue-rotate(360deg);
  }
}

.foil-active-text {
  background: linear-gradient(125deg, #ff0000, #ffa500, #ffff00, #00ff00, #0000ff, #ee82ee);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-shift 8s linear infinite;
  font-weight: bold;
}
/* Theme Variables */
:root {
  /* Light theme colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-tertiary: #adb5bd;
  --border-color: #dee2e6;
  --hover-bg: #f8f9fa;
  --card-bg: #ffffff;
  --card-header-bg: #f9fafb;
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-suffix-bg: #f3f4f6;
  --button-secondary-bg: #f3f4f6;
  --button-secondary-hover: #e5e7eb;
  --info-box-bg: #eff6ff;
  --info-box-border: #bfdbfe;
  --stat-bg: #f9fafb;
  --success-bg: #f0fdf4;
  --success-border: #bbf7d0;
  --product-bg: #f9fafb;
  --product-hover-bg: #f3f4f6;
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-strong: rgba(0, 0, 0, 0.15);
}

[data-theme='dark'] {
  /* Dark theme colors */
  --bg-primary: #1a1d20;
  --bg-secondary: #242729;
  --bg-tertiary: #2e3236;
  --text-primary: #e8dcc0;
  --text-secondary: #b8d4b8;
  --text-tertiary: #8b9a8b;
  --border-color: #3d4246;
  --hover-bg: #2e3236;
  --card-bg: #242729;
  --card-header-bg: #2e3236;
  --input-bg: #1a1d20;
  --input-border: #3d4246;
  --input-suffix-bg: #2e3236;
  --button-secondary-bg: #2e3236;
  --button-secondary-hover: #3d4246;
  --info-box-bg: #1e3a4a;
  --info-box-border: #2d4a5a;
  --stat-bg: #2e3236;
  --success-bg: #1a3a2e;
  --success-border: #2d5a4a;
  --product-bg: #2e3236;
  --product-hover-bg: #3d4246;
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-strong: rgba(0, 0, 0, 0.5);
}

/* Global overflow prevention - only prevent horizontal scroll */
html,
body {
  max-width: 100%;
}

#root {
  max-width: 100%;
}

/* PERFORMANCE: BuildPage deck table hover effects using CSS instead of JS */
.deck-table-row {
  transition: background-color 0.2s ease;
}

.deck-table-row:hover {
  background-color: var(--hover-bg) !important;
}

.deck-table-group-header {
  transition: background-color 0.2s ease;
}

.deck-delete-button {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.deck-table-row:hover .deck-delete-button {
  opacity: 1;
}

.deck-create-button {
  transition: background-color 0.2s ease;
}

.deck-create-button:hover {
  background-color: #4a6f4a !important;
}

/* Deck card row styles */
.deck-card-row {
  display: flex;
  align-items: center; /* Changed back to center for proper alignment with hover background */
  padding: 3px 0; /* Slightly increased padding for better spacing */
  font-size: 10pt; /* Changed from 1rem to 10pt */
  border-bottom: none;
  min-height: 22px; /* Keep minimum height but allow expansion */
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Bulk edit hover state */
.deck-card-row:hover {
  background-color: rgba(0, 0, 0, 0.02);
  /* Don't add padding/margin on hover - causes column reflow in list view */
}

/* Bulk edit selected state */
.deck-card-row.bulk-selected {
  background-color: rgba(25, 118, 210, 0.08) !important;
}

.deck-card-row.bulk-edit-mode {
  cursor: pointer;
  padding: 3px 0; /* Match the regular row padding */
  border-radius: 3px;
  min-height: 22px; /* Remove fixed height, allow expansion */
  align-items: center; /* Center align for consistency */
  outline: none !important;
}

.deck-card-row.bulk-edit-mode:hover {
  background-color: rgba(25, 118, 210, 0.05);
  /* Don't add padding/margin on hover - causes column reflow in list view */
}
.deck-card-row .card-count {
  font-size: inherit;
  font-weight: 500;
  margin-right: 2px;
  padding-right: 2px;
  color: #444;
  line-height: 1.2; /* Add consistent line height */
  align-self: center; /* Center align with other elements */
}
.deck-card-row .card-name {
  font-size: inherit;
  font-weight: 500;
  margin-right: 8px; /* Increase margin to create more space between name and price */
  line-height: 1.2; /* Add consistent line height for better text wrapping */
  flex: 1; /* Allow the card name to take up available space */
  min-width: 0; /* Allow flex item to shrink below its content size */
  max-width: calc(100% - 180px); /* Increased to accommodate larger right group */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto; /* Enable automatic hyphenation */
  white-space: normal; /* Ensure text can wrap to multiple lines */
  color: #333; /* Visible text color for non-foil cards */
  align-self: center; /* Center align with other elements */
}

/* Non-foil cards need visible text */
.deck-card-row .card-name:not(.foil-active-text) {
  color: #333 !important;
}

/* Illegal cards get red text (higher specificity) */
.deck-card-row .card-name.illegal-card {
  color: #dc2626 !important;
  font-weight: bold;
}

.deck-card-row .card-mana {
  margin-right: 8px;
  display: flex;
  align-items: center; /* Center mana symbols */
}

/* Group for right-aligned price and mana column */
.card-right-group {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  max-width: 160px; /* Increased to accommodate right-aligned content */
  flex-shrink: 0;
  overflow: visible; /* Changed from hidden to allow content to display */
  box-sizing: border-box; /* Include padding and border in width calculations */
  margin-left: auto; /* Push entire group to the right */
}

/* Smooth wave animation */
@keyframes smooth-rainbow-wave {
  0% {
    background-position: -100% -100%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: -100% -100%;
  }
}

/* Ensure mana column aligns properly with text wrapping */
.deck-card-row .card-mana-column {
  min-width: 60px; /* Reduced from 70px to save space */
  max-width: 60px; /* Fixed width to prevent shrinking */
  display: flex;
  justify-content: center; /* Center align mana symbols horizontally */
  align-items: center; /* Center align mana symbols vertically */
  text-align: center;
  flex-shrink: 0;
}

.deck-card-row .card-price {
  min-width: 60px; /* Set minimum width for consistent alignment */
  max-width: 60px; /* Increased from 45px */
  font-size: 0.7rem;
  color: #666;
  align-self: center; /* Center align price vertically */
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0; /* Prevent shrinking */
}

/* Responsive and accessible base styles */
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

#root {
  /* No maximum width to allow full browser width */
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-primary);
  transition: background-color 0.3s ease;
}

/* Lock content to the left */
.content-container {
  margin: 0;
  width: 100%;
  max-width: none;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--card-bg);
  color: var(--text-primary);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.read-the-docs {
  color: var(--text-tertiary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  transition: color 0.3s ease;
}

h1,
h2 {
  text-align: left; /* Changed from center for deck name */
}

form,
.container {
  max-width: 500px;
  margin: 2rem 0;
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--shadow);
  padding: 2rem;
  box-sizing: border-box;
}

.deck-container {
  max-width: none;
  margin: 1rem 0;
  width: 100%;
  box-sizing: border-box;
  /* Ensure no overflow constraints that could interfere with sticky positioning */
}

.deck-layout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 100vw;
  width: 100%;
  min-height: 0; /* Prevent flex items from growing beyond viewport */
  /* Remove overflow-x: hidden to prevent interference with sticky positioning */
}

.deck-sidebar {
  flex: 0 0 280px;
  background: var(--color-surface);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  overflow: visible; /* Must be visible for sticky positioning to work */
  padding: 2rem; /* Full padding for content spacing */
  position: sticky;
  top: 48px; /* Reduced from 80px to align top with deck-main-content (80 - 32 = 48) */
  align-self: flex-start; /* Ensure it aligns to the top of its container */
  max-height: calc(100vh - 100px); /* Limit height to viewport minus navbar and padding */
  /* No internal scrolling - the sidebar should be sticky as a whole unit */
  z-index: 10; /* Ensure sidebar stays above other content */
  max-width: 280px; /* Prevent expansion beyond intended width */
  min-width: 250px; /* Ensure minimum usable width */
}

.deck-sidebar > div:first-child {
  margin-bottom: 8px !important;
}

/* Remove bottom margin from Display Options and dropdowns */
.deck-sidebar label,
.deck-sidebar .display-options,
.deck-sidebar select,
.deck-sidebar .card-group-sort-options {
  margin-bottom: 0 !important;
}

/* Reduce vertical space between Display Options and card preview */
.display-options {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

/* Style dropdowns for compactness */
.deck-sidebar select {
  padding: 4px 6px !important;
  font-size: 12px !important;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  margin-bottom: 0 !important;
}

.deck-main-content {
  flex: 1 1 0;
  background: var(--color-surface);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  padding: 0 2rem 2rem 2rem; /* No top padding - align with sidebar top */
  min-height: 600px;
  min-width: 0; /* Allow shrinking below content width */
  max-width: 100%; /* Prevent overflow */
  overflow-x: auto; /* Allow horizontal scrolling if needed */
  /* Remove overflow properties to allow natural scrolling for sticky positioning */
}

/* Dark mode enhancements */
[data-theme='dark'] .deck-sidebar,
[data-theme='dark'] .deck-main-content {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Dark mode: Cream color for card text */
[data-theme='dark'] .card-name,
[data-theme='dark'] .deck-card-row .card-name,
[data-theme='dark'] .card-type-name,
[data-theme='dark'] .card-type-count {
  color: #d4c5a0 !important;
}

/* Dark mode: Cream color for SVGs (mana symbols, type icons) */
/* Apply cream filter to all mana symbols by default */
[data-theme='dark'] .mana-symbol {
  filter: brightness(0) saturate(100%) invert(85%) sepia(15%) saturate(500%) hue-rotate(10deg)
    brightness(95%) contrast(85%) !important;
}

/* Dark mode: Keep dual/hybrid mana symbols with their original colors */
/* Dual mana symbols have 2-letter filenames: wu.svg, br.svg, ub.svg, etc. */
[data-theme='dark'] .mana-symbol[src*='/wu.svg'],
[data-theme='dark'] .mana-symbol[src*='/ub.svg'],
[data-theme='dark'] .mana-symbol[src*='/br.svg'],
[data-theme='dark'] .mana-symbol[src*='/rg.svg'],
[data-theme='dark'] .mana-symbol[src*='/gw.svg'],
[data-theme='dark'] .mana-symbol[src*='/wb.svg'],
[data-theme='dark'] .mana-symbol[src*='/ur.svg'],
[data-theme='dark'] .mana-symbol[src*='/bg.svg'],
[data-theme='dark'] .mana-symbol[src*='/rw.svg'],
[data-theme='dark'] .mana-symbol[src*='/gu.svg'],
[data-theme='dark'] .mana-symbol[src*='/2w.svg'],
[data-theme='dark'] .mana-symbol[src*='/2u.svg'],
[data-theme='dark'] .mana-symbol[src*='/2b.svg'],
[data-theme='dark'] .mana-symbol[src*='/2r.svg'],
[data-theme='dark'] .mana-symbol[src*='/2g.svg'],
[data-theme='dark'] .mana-symbol[src*='/wp.svg'],
[data-theme='dark'] .mana-symbol[src*='/up.svg'],
[data-theme='dark'] .mana-symbol[src*='/bp.svg'],
[data-theme='dark'] .mana-symbol[src*='/rp.svg'],
[data-theme='dark'] .mana-symbol[src*='/gp.svg'] {
  filter: none !important;
}

/* Type icons should use cream filter, but NOT dual/hybrid mana symbols */
[data-theme='dark']
  img[src*='/svgs/']:not(.mana-symbol):not([src*='/wu.svg']):not([src*='/ub.svg']):not(
    [src*='/br.svg']
  ):not([src*='/rg.svg']):not([src*='/gw.svg']):not([src*='/wb.svg']):not([src*='/ur.svg']):not(
    [src*='/bg.svg']
  ):not([src*='/rw.svg']):not([src*='/gu.svg']):not([src*='/2w.svg']):not([src*='/2u.svg']):not(
    [src*='/2b.svg']
  ):not([src*='/2r.svg']):not([src*='/2g.svg']):not([src*='/wp.svg']):not([src*='/up.svg']):not(
    [src*='/bp.svg']
  ):not([src*='/rp.svg']):not([src*='/gp.svg']) {
  filter: brightness(0) saturate(100%) invert(85%) sepia(15%) saturate(500%) hue-rotate(10deg)
    brightness(95%) contrast(85%) !important;
}

/* Dark mode: Cream color for prices and quantities */
[data-theme='dark'] .card-price,
[data-theme='dark'] .deck-card-row .card-price,
[data-theme='dark'] .card-count,
[data-theme='dark'] .deck-card-row .card-count {
  color: #d4c5a0 !important;
}

/* Dark mode: Subtle dark hover for card type headers */
[data-theme='dark'] .card-type-header.clickable-header:hover {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-bottom-color: #3d5e3d;
}

/* Dark mode: Ensure stats bar is fully opaque */
[data-theme='dark'] .deck-stats-sticky-bar,
[data-theme='dark'] div.deck-stats-sticky-bar {
  background: #242729 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dark mode: Grid view card backgrounds */
[data-theme='dark'] .grid-card-container {
  background-color: var(--color-surface) !important;
}

/* Hide scrollbars completely while maintaining scroll functionality */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

@media (max-width: 1024px) {
  .deck-sidebar {
    display: none; /* Hide sidebar on tablets too */
  }

  .deck-stats-bar {
    display: none; /* Hide stats bar on tablets and mobile */
  }

  .mobile-view-controls {
    /* display controlled by inline styles in component */
  }

  .deck-main-content {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .deck-layout {
    flex-direction: column;
    gap: 0 !important;
  }

  .deck-sidebar {
    display: none !important; /* Hide sidebar completely on mobile */
  }

  .deck-stats-bar {
    display: none !important; /* Hide stats bar on mobile */
  }

  .mobile-view-controls {
    /* display controlled by inline styles in component */
  }

  .deck-main-content {
    padding: 0.5rem !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .deck-title-bar {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .deck-main-content {
    padding: 1rem; /* Reduce padding on mobile */
    width: 100%;
    max-width: 100%;
  }
}

/* Mobile landscape mode - hide sidebar when in landscape on mobile devices */
@media (max-height: 600px) and (orientation: landscape) {
  .deck-sidebar {
    display: none !important;
  }

  .deck-stats-bar {
    display: none !important;
  }

  .mobile-view-controls {
    /* display controlled by inline styles in component */
  }

  .deck-main-content {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem !important;
  }

  .deck-layout {
    gap: 0 !important;
  }
}

/* Add responsive grid adjustments */
@media (max-width: 480px) {
  .deck-main-content {
    padding: 0.5rem;
  }

  /* Mobile grid optimization */
  .deck-main-content [style*='gridTemplateColumns'] {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Additional responsive breakpoints for better grid scaling */
@media (max-width: 900px) and (min-width: 769px) {
  .deck-main-content [style*='gridTemplateColumns'] {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  }
}

/* Ensure consistent alignment on very wide screens */
@media (min-width: 1630px) {
  .deck-card-row .card-right-group {
    max-width: 110px; /* Keep compact even on wide screens */
  }

  .deck-card-row .card-mana-column {
    min-width: 60px; /* Match our reduced width */
    max-width: 60px;
  }

  .deck-card-row .card-price {
    max-width: 45px;
  }
}

input:not([type='checkbox']),
button,
select,
textarea {
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 0;
  padding: 0.5rem;
  box-sizing: border-box;
  color: #000;
  /* width: 100%; REMOVED - add individually where needed */
}

button {
  background: #3d5e3d;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  min-height: 18px;
}
button:disabled {
  background: #aaa;
  cursor: not-allowed;
}
button:focus,
input:focus {
  outline: 2px solid #3d5e3d;
}

/* Quantity control buttons for deck cards */
.quantity-btn {
  min-height: 22px !important;
  height: 22px !important;
  width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #000 !important;
  background: #f5f5f5 !important;
  border: 1px solid #ccc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  transition:
    background-color 0.2s,
    border-color 0.2s !important;
  cursor: pointer !important;
  user-select: none !important;
}

.quantity-btn:hover {
  background: #e0e0e0 !important;
  border-color: #aaa !important;
}

.quantity-btn:active {
  background: #d0d0d0 !important;
  border-color: #999 !important;
}

/* Card grouping and sorting options styles */
.card-group-sort-options {
  background: #fff;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  border: 1px solid #eee;
}

.card-group-sort-options h3 {
  font-size: 14px;
  margin: 0 0 8px 0;
  padding: 0 0 4px 0;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  color: #333;
}

.card-group-sort-options select {
  margin-bottom: 8px;
  font-size: 12px;
  padding: 6px 8px;
  color: #000 !important; /* Force black text color */
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}

.card-group-sort-options label {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
  display: block;
}

/* Hide large standalone buttons in the Display Options section */
.card-group-sort-options > button:not(.toggle-button),
.card-group-sort-options > .btn-primary {
  display: none !important;
}

/* Card grid layout - vertical columns like Moxfield */
/* List view - single column layout */
.card-type-grid {
  column-count: 1; /* Single column for list view */
  column-gap: 16px;
  width: 100%;
  column-fill: balance;
  padding: 12px;
}

/* For grid view, use horizontal scrolling layout like stacks view */
.card-type-grid.grid-view-mode {
  column-count: unset;
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: flex-start;
}

/* Mobile ONLY: 2-column grid instead of horizontal scroll */
@media (max-width: 768px) {
  .card-type-grid.grid-view-mode {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: visible;
    overflow-y: visible;
  }

  .grid-view-mode .card-type-section {
    width: 100%;
    min-width: unset;
    flex-shrink: unset;
  }
}

@media (min-width: 769px) {
  .card-type-grid.grid-view-mode {
    gap: 16px;
    padding: 12px;
  }
}

@media (min-width: 1201px) {
  .card-type-grid.grid-view-mode {
    /* Keep horizontal scroll on all screen sizes */
  }
}

/* Card sections container - no column layout, let content flow naturally */
.card-sections-container {
  width: 100%;
  /* Removed column-count - stacks handle their own layout */
}

/* Card type section - no container, just logical grouping */
.card-type-section {
  width: 100%;
  break-inside: avoid; /* Prevent column breaks inside sections */
  page-break-inside: avoid; /* For older browsers */
  margin-bottom: 16px; /* Space between sections */
}

/* Grid view: fixed width sections for horizontal scrolling */
.grid-view-mode .card-type-section {
  width: 250px;
  min-width: 250px;
  flex-shrink: 0;
  margin-bottom: 0; /* No vertical margin in horizontal scroll */
}

/* Mobile override: full width sections */
@media (max-width: 768px) {
  .grid-view-mode .card-type-section {
    width: 100% !important;
    min-width: 100% !important;
    flex-shrink: unset !important;
    margin-bottom: 16px !important;
  }
}

/* Card type list - single column for list view on mobile, up to 3 columns on desktop */
.card-type-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* Tablet: 2 columns */
@media (min-width: 769px) and (max-width: 1200px) {
  .card-type-list {
    display: block; /* CSS columns don't work with flexbox */
    column-count: 2;
    column-gap: 16px;
  }

  /* Re-add spacing for list items since we removed flex gap */
  .card-type-list > * {
    margin-bottom: 4px;
    break-inside: avoid; /* Prevent items from breaking across columns */
  }
}

/* Desktop: 3 columns */
@media (min-width: 1201px) {
  .card-type-list {
    display: block; /* CSS columns don't work with flexbox */
    column-count: 3;
    column-gap: 16px;
  }

  /* Re-add spacing for list items since we removed flex gap */
  .card-type-list > * {
    margin-bottom: 4px;
    break-inside: avoid; /* Prevent items from breaking across columns */
  }
}

/* Grid view mode: single column vertical layout within each category */
.grid-view-mode .card-type-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  column-count: unset; /* Override column layout for grid view */
  width: 100%;
}

/* Mobile ONLY: 2-column grid for cards in grid view mode */
@media (max-width: 768px) {
  .grid-view-mode .card-type-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    column-count: unset;
  }

  /* Ensure grid cards fill their grid cells on mobile */
  .grid-view-mode .card-type-list .grid-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Card list container for simple list layout */
.card-list-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

/* Card type containers - styled like Moxfield with proper column breaking */
.card-type-container {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  display: block; /* Changed from flex to block for better column behavior */
  width: 100%;
  box-sizing: border-box;
  height: fit-content;
  break-inside: avoid; /* Prevent column breaks inside containers */
  page-break-inside: avoid; /* For older browsers */
  margin-bottom: 16px; /* Increased space between containers */
  border: 1px solid #f0f0f0; /* Add subtle border for better separation */
  transition: box-shadow 0.2s ease;
  overflow: hidden; /* Prevent content from overflowing container */
}

/* Enhanced styling for grid view card type containers */
.grid-view-mode .card-type-container {
  margin-bottom: 20px; /* More space between groups in grid view */
  border: 1px solid #e0e0e0; /* Slightly more visible border */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); /* Subtle shadow for better separation */
  -webkit-column-break-inside: avoid; /* Safari and Chrome */
}

/* Card type header styling (Moxfield style) */
.card-type-header {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
}

/* Clickable header styling for bulk edit mode */
.card-type-header.clickable-header {
  border-radius: 4px;
  transition: background-color 0.2s ease;
  user-select: none;
}

.card-type-header.clickable-header:hover {
  background-color: rgba(111, 169, 111, 0.08) !important;
  border-bottom-color: #3d5e3d;
}

.card-type-header.clickable-header:active {
  background-color: #e3f2fd;
}

.card-type-name {
  color: #333;
}

.card-type-count {
  color: #666;
  margin-left: 4px;
  font-size: 12px;
}

/* Card type color indicators */
.card-type-header::before {
  content: '';
  width: 4px;
  height: 16px;
  margin-right: 8px;
  background-color: #999; /* Default color */
  border-radius: 2px;
  display: inline-block;
}

/* Type-specific colors */
.card-type-header[data-type='Commander']::before {
  background-color: #8a5c97; /* Purple for commanders */
}

.card-type-header[data-type='Creature']::before {
  background-color: #5c8a97; /* Blue-teal for creatures */
}

.card-type-header[data-type='Sorcery']::before {
  background-color: #a34141; /* Red for sorceries */
}

.card-type-header[data-type='Instant']::before {
  background-color: #277b8c; /* Blue for instants */
}

.card-type-header[data-type='Artifact']::before {
  background-color: #7b7b7b; /* Gray for artifacts */
}

.card-type-header[data-type='Enchantment']::before {
  background-color: #917f28; /* Gold for enchantments */
}

.card-type-header[data-type='Land']::before {
  background-color: #487b3a; /* Green for lands */
}

/* Mana value and other grouping colors */
.card-type-header[data-type^='0 MV']::before {
  background-color: #666666; /* Dark gray for 0 mana */
}

.card-type-header[data-type^='1 MV']::before {
  background-color: #4287f5; /* Blue for 1 mana */
}

.card-type-header[data-type^='2 MV']::before {
  background-color: #42b0f5; /* Light blue for 2 mana */
}

.card-type-header[data-type^='3 MV']::before {
  background-color: #42f5e3; /* Teal for 3 mana */
}

.card-type-header[data-type^='4 MV']::before {
  background-color: #42f59e; /* Green-blue for 4 mana */
}

.card-type-header[data-type^='5 MV']::before {
  background-color: #5df542; /* Light green for 5 mana */
}

.card-type-header[data-type^='6 MV']::before {
  background-color: #bff542; /* Yellow-green for 6 mana */
}

.card-type-header[data-type^='7 MV']::before {
  background-color: #f5da42; /* Yellow for 7 mana */
}

.card-type-header[data-type^='8 MV']::before,
.card-type-header[data-type^='9 MV']::before {
  background-color: #f59e42; /* Orange for 8-9 mana */
}

.card-type-header[data-type^='10 MV']::before,
.card-type-header[data-type^='11 MV']::before,
.card-type-header[data-type^='12 MV']::before,
.card-type-header[data-type^='13 MV']::before,
.card-type-header[data-type^='14 MV']::before,
.card-type-header[data-type^='15 MV']::before {
  background-color: #f54242; /* Red for 10+ mana */
}

.card-type-header[data-type='Unknown MV']::before {
  background-color: #666666; /* Gray for unknown mana value */
}

/* Card list item styling for better readability */
.card-list-item {
  display: flex;
  align-items: flex-start; /* Align to top to allow vertical expansion */
  gap: 6px;
  padding: 2px;
  border-radius: 2px;
  transition: background-color 0.1s;
  width: 100%;
  margin-bottom: 2px;
  min-height: 20px; /* Minimum height but allow expansion */
  box-sizing: border-box;
}

.mana-cost {
  text-align: center;
}

.mana-symbol {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin-right: 2px;
  margin-left: 0;
  display: inline-block;
}

.card-list-item:hover {
  background-color: #f5f7fa;
}

/* Card quantity styling */
.card-quantity {
  min-width: 20px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}

.card-name {
  flex: 1;
  cursor: pointer;
  text-decoration: none;
  color: #3d5e3d;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
  /* max-width: 200px; Removed to allow deck rows to control their own width */
  padding: 0;
  transition: color 0.2s;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.2; /* Tighter line height for better appearance */
  hyphens: auto; /* Enable automatic hyphenation */
}

.card-name:hover {
  color: #4a6f4a;
  text-decoration: underline;
}

.card-price {
  margin-left: 8px;
  margin-right: 0;
  font-size: 12px;
  color: #47a147;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.card-price.no-price {
  color: #999;
  font-style: italic;
}

.card-price.basic-land-price {
  color: #6a8f6a;
  font-style: normal;
}

.card-price.foil-price {
  color: #222;
  font-weight: 600;
}

/* Digital-only card price */
.card-price.digital-price {
  color: #9c27b0;
  font-style: italic;
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.05), rgba(156, 39, 176, 0.05));
  border-radius: 3px;
  padding: 0 3px;
}

/* Special treatments for promo cards */
.card-price.promo-price {
  color: #ff6d00;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(255, 109, 0, 0.05), rgba(255, 109, 0, 0.05));
  border-radius: 3px;
  padding: 0 3px;
}

/* Etched finish cards */
.card-price.etched-price {
  color: #795548;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(121, 85, 72, 0.05), rgba(121, 85, 72, 0.05));
  border-radius: 3px;
  padding: 0 3px;
  text-shadow: 0 0 1px rgba(121, 85, 72, 0.3);
}

/* Textured/Boosterfun cards */
.card-price.special-finish-price {
  color: #e91e63;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.05), rgba(233, 30, 99, 0.05));
  border-radius: 3px;
  padding: 0 3px;
}

/* Special set types (duel decks, masters sets, etc.) */
.card-price.special-set-price {
  color: #009688;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(0, 150, 136, 0.05), rgba(0, 150, 136, 0.05));
  border-radius: 3px;
  padding: 0 3px;
}

/* Card mana cost styles */
.card-mana-cost {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  background-color: #f5f5f5;
  border-radius: 3px;
  padding: 1px 4px;
  display: inline-block;
  letter-spacing: 1px;
}

/* Card preview styles - floating preview removed */
/* Only keeping styles for the sidebar preview */

/* Nav styles removed - handled by Navbar component inline styles */

@media (max-width: 600px) {
  form,
  .container {
    padding: 1rem;
    max-width: 98vw;
    min-width: 0;
  }
  h1,
  h2 {
    font-size: 1.5rem;
  }
}

/* Toggle buttons for display options */
.toggle-button {
  padding: 6px 12px;
  min-height: 32px;
  font-size: 12px;
  font-weight: 500;
  width: auto;
  display: inline-block;
  border-radius: 4px;
  margin: 0;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.toggle-button.active {
  background-color: #3d5e3d;
  color: #fff;
}

.toggle-button.inactive {
  background-color: #e0e0e0;
  color: #333;
}

/* Bulk edit button styles */
.bulk-edit-button {
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 32px;
  width: 120px;
  margin-bottom: 0;
}

.bulk-edit-button.active {
  background-color: #3d5e3d;
  color: #fff;
  border-color: #4a6f4a;
}

.bulk-edit-button:hover {
  background-color: #e0e0e0;
}

.bulk-edit-button.active:hover {
  background-color: #4a6f4a;
}

/* Dark mode: Bulk Edit button styling */
[data-theme='dark'] .bulk-edit-button {
  background-color: #3d5e3d;
  color: #d4c5a0;
  border: 1px solid #4a6f4a;
}

[data-theme='dark'] .bulk-edit-button:hover {
  background-color: #4a6f4a;
}

[data-theme='dark'] .bulk-edit-button.active {
  background-color: #4a6f4a;
  color: #fff;
  border-color: #5a7f5a;
}

[data-theme='dark'] .bulk-edit-button.active:hover {
  background-color: #5a7f5a;
}

/* Bulk edit action buttons container */
.bulk-actions-container {
  position: sticky;
  top: 365px;
  z-index: 24;
  background: white;
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
  border: 1px solid #e0e0e0;
}

/* Remove padding from bulk edit button container div */
div[style*='background: white'][style*='padding: 8px 0px'][style*='display: flex'][style*='justify-content: center'] {
  padding: 0 !important;
}

/* Bulk select all button styling */
.bulk-select-all-text {
  margin-bottom: 6px !important;
}

.bulk-actions-counter {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
  text-align: center;
}

.bulk-actions-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 1fr;
}

.bulk-action-button {
  border: none;
  border-radius: 3px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  margin: 0;
}

.bulk-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.bulk-action-button.collection {
  background-color: #4caf50;
  color: #fff;
}

.bulk-action-button.collection:disabled {
  background-color: #e0e0e0;
  color: #999;
}

.bulk-action-button.wishlist {
  background-color: #ff9800;
  color: #fff;
}

.bulk-action-button.wishlist:disabled {
  background-color: #e0e0e0;
  color: #999;
}

.bulk-action-button.sideboard {
  background-color: #9c27b0;
  color: #fff;
}

.bulk-action-button.sideboard:disabled {
  background-color: #e0e0e0;
  color: #999;
}

.bulk-action-button.tech-ideas {
  background-color: #607d8b;
  color: #fff;
}

.bulk-action-button.tech-ideas:disabled {
  background-color: #e0e0e0;
  color: #999;
}

.bulk-action-button.utility {
  background-color: #6b7280;
  color: white;
}

.bulk-action-button.utility:hover {
  background-color: #4b5563;
}

/* Tooltip styles for card special characteristics */
.card-tooltip {
  position: relative;
  display: inline-block;
}

.card-tooltip .tooltiptext {
  visibility: hidden;
  width: 160px;
  background-color: rgba(51, 51, 51, 0.95);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 11px;
  pointer-events: none;
}

.card-tooltip .tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(51, 51, 51, 0.95) transparent transparent transparent;
}

.card-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Background pattern for special finish cards */
.card-list-item.special-finish {
  background-image: linear-gradient(
    45deg,
    rgba(233, 30, 99, 0.03) 25%,
    transparent 25%,
    transparent 50%,
    rgba(233, 30, 99, 0.03) 50%,
    rgba(233, 30, 99, 0.03) 75%,
    transparent 75%,
    transparent
  );
  background-size: 4px 4px;
}

.card-list-item.etched {
  background-image: linear-gradient(
    45deg,
    rgba(121, 85, 72, 0.03) 25%,
    transparent 25%,
    transparent 50%,
    rgba(121, 85, 72, 0.03) 50%,
    rgba(121, 85, 72, 0.03) 75%,
    transparent 75%,
    transparent
  );
  background-size: 4px 4px;
}

.card-list-item.promo {
  background-image: linear-gradient(
    45deg,
    rgba(255, 109, 0, 0.03) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 109, 0, 0.03) 50%,
    rgba(255, 109, 0, 0.03) 75%,
    transparent 75%,
    transparent
  );
  background-size: 4px 4px;
}

/* Enhanced hover effects for special cards */
.card-name.textured:hover,
.card-name.boosterfun:hover,
.card-name.etched:hover,
.card-name.promo:hover,
.card-name.special-set:hover,
.card-name.masterpiece:hover {
  text-shadow: 0 0 1px currentColor;
}

/* Modal styles */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px var(--shadow-strong);
  width: 90%;
  max-width: 500px;
}

.modal-content h2 {
  margin-top: 0;
  color: var(--text-primary);
}

.modal-content label {
  margin-top: 1rem;
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.modal-content input[type='date'],
.modal-content input[type='text'] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-sizing: border-box;
  background-color: var(--input-bg);
  color: var(--text-primary);
  font-size: 1rem;
}

.modal-content input[disabled] {
  background-color: var(--bg-secondary);
  cursor: not-allowed;
  color: var(--text-secondary);
}

.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 1rem;
}

.button-group button {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-primary);
}

.button-group button.active {
  background-color: #3d5e3d;
  color: white;
  border-color: #3d5e3d;
}

.modal-content .btn {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.modal-content .btn-primary {
  background-color: #3d5e3d;
  color: white;
}

/* ALL FOIL EFFECTS REMOVED */

/* SMOOTH RAINBOW FOIL EFFECT - Matching reference gif */

/* Keep only the basic card preview structure */
.card-preview-container {
  position: relative;
  display: inline-block;
  border-radius: 14px; /* Match the card image border radius */
  overflow: hidden; /* Clip the foil overlay to the rounded corners */
  z-index: 1; /* Normal layering within sidebar context */
}

.card-preview-container img {
  border-radius: 14px;
  position: relative;
  z-index: 1;
  display: block;
}

/* Fresh foil overlay for card previews */
.fresh-foil-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px; /* Match the card image border radius */
  pointer-events: none;
  z-index: 2;
  transform: none !important; /* Disable any scaling to prevent overlay extending beyond card boundaries */
}

/* End of foil effects section */

/* All foil animations removed for testing */

/* Bulk edit checkbox styling */
.bulk-edit-checkbox {
  margin: 0 6px 0 0 !important;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #f0f0f0 !important;
  border: 1px solid #ccc !important;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  outline: none !important;
  box-shadow: none !important;
}

.bulk-edit-checkbox:checked {
  background-color: #3d5e3d !important;
  border-color: #3d5e3d !important;
}

.bulk-edit-checkbox:checked::after {
  content: '✓';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 10px;
  font-weight: bold;
}

.bulk-edit-checkbox:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove input margins that might affect checkboxes */
input[type='checkbox'] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Select All container styling */
.bulk-select-all-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 0 auto;
  padding: 0;
}

.bulk-select-all-container input[type='checkbox'] {
  margin-right: 6px !important;
  margin-bottom: 0 !important;
}

/* Ensure all child containers in sidebar don't create scrollbars */
/* .deck-sidebar * {
  overflow: visible !important; DISABLED - causes foil overlays to extend beyond card boundaries
} */

/* ==================================
   THEME-AWARE COMPONENT STYLES
   ================================== */

/* Input elements */
input:not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']),
textarea,
select {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

/* Research page specific theming */
[data-research-page='sidebar'] {
  background-color: var(--bg-primary) !important;
}

[data-research-page='list'] {
  background-color: var(--bg-secondary) !important;
}

[data-research-page='detail'] {
  background-color: var(--bg-primary) !important;
}

/* Build page theming */
[data-build-page] {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Tables */
table {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

thead {
  background-color: var(--bg-secondary);
}

tbody tr {
  border-color: var(--border-color);
}

tbody tr:hover {
  background-color: var(--hover-bg);
}

/* Modal theming */
[data-research-page='modal'],
[data-build-page='modal'],
.modal,
.modal-content {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* Button theming */
[data-research-page='button'],
[data-build-page='button'],
.btn,
button:not(.theme-toggle) {
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}

/* Empty states and messages */
.empty-state,
.no-results,
.loading-message {
  color: var(--text-secondary);
}

/* Card list items */
.card-list-item,
.deck-card,
[data-research-page='result-card'] {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
  transition: background-color 0.3s;
}

.card-list-item:hover,
.deck-card:hover {
  background-color: var(--hover-bg);
}

/* Shopping Cart / Wishlist */
.wishlist-container,
.shopping-cart-container,
[data-page='wishlist'],
[data-page='cart'] {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.wishlist-card,
.cart-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.wishlist-header,
.cart-header {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

/* Deck list and build page */
[data-build-page] {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.deck-list-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  transition: all 0.3s;
}

.deck-list-item:hover {
  background-color: var(--hover-bg);
  border-color: var(--accent-green);
}

/* Form elements in modals */
.modal input,
.modal textarea,
.modal select,
[data-research-page='modal'] input,
[data-research-page='modal'] textarea,
[data-research-page='modal'] select,
[data-build-page='modal'] input,
[data-build-page='modal'] textarea,
[data-build-page='modal'] select {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
}

/* Scrollbar theming */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

*::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 5px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Dividers */
hr {
  border-color: var(--border-color);
}

/* Code/pre blocks */
code,
pre {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
/**
 * Mobile Optimization - Clean Version
 * 
 * Minimal !important usage - only where necessary to override inline styles
 * Media query specificity handles most overrides naturally
 */

/* ============================================
   MOBILE-ONLY STYLES (768px and below)
   ============================================ */

@media (max-width: 768px) {
  /* ========== PREVENT ZOOM ON iOS ========== */
  body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }

  input:not([data-deck-view-search]),
  textarea:not([data-deck-view-search]),
  select:not([data-deck-view-search]) {
    font-size: 16px;
  }

  /* ========== TOUCH BEHAVIOR ========== */
  .deck-card-row,
  .grid-card,
  .stack-card {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  .deck-card-row img,
  .grid-card img,
  .stack-card img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;
  }

  [draggable='true'] {
    -webkit-user-select: none;
    user-select: none;
  }

  /* ========== SMOOTH SCROLLING ========== */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* ========== MOBILE LAYOUT ========== */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
  }

  #root,
  .container:not(nav),
  .main-container {
    padding: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    margin: 0;
  }

  /* ========== TYPOGRAPHY ========== */
  h1 {
    font-size: 1.75rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.25rem;
  }

  /* ========== DECK VIEW ========== */
  .deck-stats-sticky-bar {
    display: none !important;
  }

  .deck-container {
    padding-bottom: 0;
  }

  .deck-title-bar {
    padding: 0.5rem;
    width: 100%;
  }

  /* Unfreeze sticky elements */
  .deck-main-content > div[style*='position: sticky'],
  .deck-main-content > div[style*='position: fixed'] {
    position: relative !important;
  }

  /* ========== HAMBURGER MENU ========== */
  nav > div[style*='position: fixed'] {
    background: linear-gradient(180deg, #2c3e2e 0%, #3d5240 100%) !important;
    width: 100%;
    padding: 1rem;
  }

  nav > div[style*='position: fixed'] a,
  nav > div[style*='position: fixed'] button {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* ========== TABLES ========== */
  table {
    display: block;
    overflow-x: auto;
  }

  /* ========== TOAST NOTIFICATIONS ========== */
  .Toastify__toast-container {
    width: auto;
    max-width: 85vw;
    padding: 4px;
    bottom: 16px;
  }

  .Toastify__toast {
    min-height: auto;
    padding: 8px 12px;
    margin-bottom: 4px;
    font-size: 13px;
    border-radius: 6px;
  }

  /* ========== VISIBILITY ========== */
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
}

/* ============================================
   MOBILE PORTRAIT - Portrait-specific overrides
   ============================================ */

@media (max-width: 768px) and (orientation: portrait) {
  /* Critical: Ensure containers use border-box and don't overflow */
  * {
    box-sizing: border-box;
  }

  html,
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  /* Reduce padding to prevent content cutoff */
  .deck-main-content {
    padding: 0 12px 2rem 12px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Ensure deck container doesn't add extra width */
  .deck-container {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Portrait: 2-column grid with proper spacing */
  .grid-view-mode .card-type-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
  }

  /* Ensure cards fill grid cells properly */
  .grid-view-mode .card-type-list .grid-card {
    width: 100%;
    max-width: 100%;
  }

  /* Ensure sections are full width */
  .card-type-section {
    width: 100%;
    max-width: 100%;
  }
}

/* ============================================
   MOBILE LANDSCAPE 
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
  /* Typography */
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.25rem;
  }

  /* Compact padding */
  .container {
    padding: 5px;
  }

  /* Scrollable modals */
  .modal {
    max-height: 85vh;
  }

  /* ========== NAVBAR - LANDSCAPE ========== */
  nav > div > div:not(:first-child):not(:last-child) {
    display: none !important; /* Must override inline display */
  }

  nav {
    min-height: 56px;
    padding: 0.5rem 1.25rem;
  }

  /* ========== DECK VIEW GRID LAYOUT ========== */
  .deck-view-edit.deck-container {
    padding: 0 12px 12px 12px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    margin: 0;
    display: grid !important; /* Override inline flex */
    grid-template-columns: 30% 70%;
    grid-template-rows: auto auto auto auto auto;
    gap: 6px;
    height: calc(100vh - 70px);
    max-height: calc(100vh - 70px);
    align-items: start;
  }

  /* Grid positioning - left column */
  .deck-title-landscape {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 4px 0;
  }

  .deck-title-landscape input[type='text'] {
    font-size: 1.1rem;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .deck-tags-landscape {
    grid-column: 1;
    grid-row: 2;
    gap: 3px;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: 45px;
    margin: 0;
    padding: 2px 0;
  }

  .deck-tags-landscape span {
    font-size: 7px;
    padding: 2px 3px;
  }

  .deck-tags-landscape button {
    font-size: 6px;
    padding: 0 2px;
  }

  .mobile-search-container {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    margin: 0;
    padding: 4px 0;
  }

  .mobile-search-container input[type='text'] {
    font-size: 10px;
    padding: 6px 8px;
    width: 100%;
  }

  .mobile-search-container + div {
    grid-column: 1;
    grid-row: 4 / 6;
    margin: 0;
    margin-top: 2px;
    padding: 6px;
    background: var(--color-surface);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: start;
    overflow-y: auto;
  }

  /* Buttons and controls */
  .mobile-view-controls button {
    padding: 10px 12px;
    font-size: 13px;
  }

  .mobile-group-sort-controls select {
    padding: 8px 10px;
    font-size: 13px;
  }

  .mobile-group-sort-controls label {
    font-size: 12px;
  }

  .mobile-search-container + div button {
    font-size: 10px;
    padding: 8px 6px;
    min-height: 36px;
  }

  .mobile-search-container + div select {
    font-size: 10px;
    padding: 6px 4px;
    min-height: 36px;
  }

  .mobile-search-container + div label {
    font-size: 9px;
  }

  /* Grid positioning - right column */
  .deck-layout {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .deck-sidebar {
    display: none !important; /* Must override component display */
  }

  .deck-main-content {
    width: 100%;
    height: 100%;
    min-height: unset; /* Critical: removes 600px constraint */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
  }

  .deck-main-content h2 {
    font-size: 1rem;
    margin: 6px 0 4px 0;
  }

  .deck-main-content h3 {
    font-size: 1rem;
    margin: 0.5rem 0 0.25rem 0;
  }

  /* ========== GRID VIEW ========== */
  .grid-view-mode .card-type-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
  }

  .grid-view-mode .card-type-section {
    width: 100%;
  }

  .grid-view-mode .card-type-list .grid-card {
    width: 100%;
    max-width: 100%;
  }

  /* ========== TOKENS ========== */
  .tokens-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) !important; /* Override inline */
    gap: 4px !important; /* Override inline */
    margin-bottom: 1rem;
  }

  /* ========== CARD DISPLAY ========== */
  .deck-card-row {
    padding: 4px 6px;
    font-size: 11px;
  }

  .card-type-grid {
    column-count: 1;
  }
}
/* AuthForm Component Styles - Constant Lists Theme */

._authForm_4cpdp_3 {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(61, 94, 61, 0.15);
  border: 2px solid rgba(111, 169, 111, 0.3);
  backdrop-filter: blur(10px);
}

._authForm_4cpdp_3 h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #2d3e2d;
  font-weight: 600;
}

._formGroup_4cpdp_21 {
  margin-bottom: 1rem;
}

._formGroup_4cpdp_21 label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333333;
}

._formGroup_4cpdp_21 input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #ddd;
  border-radius: 6px;
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

._formGroup_4cpdp_21 input:focus {
  outline: none;
  border-color: #6fa96f;
  box-shadow: 0 0 0 3px rgba(111, 169, 111, 0.15);
}

._formGroup_4cpdp_21 input::placeholder {
  color: #999;
  opacity: 1;
}

._authButton_4cpdp_55 {
  width: 100%;
  padding: 0.75rem;
  background: #3d5e3d;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(61, 94, 61, 0.2);
}

._authButton_4cpdp_55:hover {
  background: #4a6f4a;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(61, 94, 61, 0.3);
}

._authButton_4cpdp_55:disabled {
  background: #a8b5a8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

._errorMessage_4cpdp_82 {
  color: #dc3545;
  font-size: 14px;
  margin-bottom: 1rem;
  text-align: center;
}

._successMessage_4cpdp_89 {
  color: #28a745;
  font-size: 14px;
  margin-bottom: 1rem;
  text-align: center;
}

._authLink_4cpdp_96 {
  text-align: center;
  margin-top: 1rem;
}

._authLink_4cpdp_96 a {
  color: #3d5e3d;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

._authLink_4cpdp_96 a:hover {
  color: #4a6f4a;
  text-decoration: underline;
}

._loadingSpinner_4cpdp_113 {
  text-align: center;
  margin: 1rem 0;
}

._passwordStrength_4cpdp_118 {
  font-size: 12px;
  margin-bottom: 8px;
  font-weight: 500;
}

._passwordStrength_4cpdp_118._weak_4cpdp_124 {
  color: #dc3545;
}

._passwordStrength_4cpdp_118._medium_4cpdp_128 {
  color: #fd7e14;
}

._passwordStrength_4cpdp_118._strong_4cpdp_132 {
  color: #28a745;
}

._passwordRequirements_4cpdp_136 {
  font-size: 12px;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: rgba(111, 169, 111, 0.08);
  border: 1px solid rgba(111, 169, 111, 0.2);
  border-radius: 8px;
}

._requirement_4cpdp_145 {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
}

._requirement_4cpdp_145:last-child {
  margin-bottom: 0;
}

._requirement_4cpdp_145._met_4cpdp_156 {
  color: #28a745;
}

._requirement_4cpdp_145._unmet_4cpdp_160 {
  color: #666666;
}

._checkmark_4cpdp_164 {
  display: inline-block;
  width: 16px;
  text-align: center;
  margin-right: 6px;
  font-weight: bold;
}

._passwordMatch_4cpdp_172 {
  font-size: 12px;
  margin-bottom: 1rem;
}
._met_4cpdp_156 {
  color: #28a745;
  font-size: 12px;
  margin-bottom: 4px;
}

._unmet_4cpdp_160 {
  color: #666666;
  font-size: 12px;
  margin-bottom: 4px;
}

._strengthContainer_4cpdp_188 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 13px;
  font-weight: 500;
}

._strongPassword_4cpdp_197 {
  color: #28a745;
  font-weight: 600;
}

._mediumPassword_4cpdp_202 {
  color: #fd7e14;
  font-weight: 600;
}

._weakPassword_4cpdp_207 {
  color: #dc3545;
  font-weight: 600;
}

._tooShort_4cpdp_212 {
  color: #999;
  font-weight: 600;
}

/* Dark Mode Styles */
[data-theme='dark'] ._authForm_4cpdp_3 {
  background: rgba(30, 30, 30, 0.95);
  border-color: rgba(111, 169, 111, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme='dark'] ._authForm_4cpdp_3 h2 {
  color: #6fa96f;
}

[data-theme='dark'] ._formGroup_4cpdp_21 label {
  color: #e0e0e0;
}

[data-theme='dark'] ._formGroup_4cpdp_21 input {
  background: #1a1a1a;
  border-color: #444;
  color: #e0e0e0;
}

[data-theme='dark'] ._formGroup_4cpdp_21 input:focus {
  border-color: #6fa96f;
  box-shadow: 0 0 0 3px rgba(111, 169, 111, 0.25);
}

[data-theme='dark'] ._formGroup_4cpdp_21 input::placeholder {
  color: #666;
}

[data-theme='dark'] ._passwordRequirements_4cpdp_136 {
  background-color: rgba(111, 169, 111, 0.15);
  border-color: rgba(111, 169, 111, 0.3);
}

[data-theme='dark'] ._requirement_4cpdp_145._unmet_4cpdp_160 {
  color: #999;
}

[data-theme='dark'] ._unmet_4cpdp_160 {
  color: #999;
}

[data-theme='dark'] ._authLink_4cpdp_96 a {
  color: #6fa96f;
}

[data-theme='dark'] ._authLink_4cpdp_96 a:hover {
  color: #8bc18b;
}

/* Account Type Selection Styles */
._accountTypeSection_4cpdp_269 {
  margin: 32px 0;
  padding: 20px 0;
  border-top: 2px solid rgba(111, 169, 111, 0.2);
  border-bottom: 2px solid rgba(111, 169, 111, 0.2);
}

._accountTypeHeading_4cpdp_276 {
  font-size: 18px;
  font-weight: 600;
  color: #2d3e2d;
  margin: 0 0 16px 0;
  text-align: center;
}

._accountTypeToggle_4cpdp_284 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

._accountTypeButton_4cpdp_290 {
  background: #ffffff;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

._accountTypeButton_4cpdp_290:hover {
  border-color: #6fa96f;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(111, 169, 111, 0.2);
}

._accountTypeButton_4cpdp_290._active_4cpdp_306 {
  border-color: #6fa96f;
  background: rgba(111, 169, 111, 0.1);
  box-shadow: 0 0 0 3px rgba(111, 169, 111, 0.15);
}

._accountTypeIcon_4cpdp_312 {
  font-size: 32px;
  margin-bottom: 8px;
}

._accountTypeLabel_4cpdp_317 {
  font-size: 14px;
  font-weight: 600;
  color: #2d3e2d;
  margin-bottom: 4px;
}

._accountTypeDesc_4cpdp_324 {
  font-size: 12px;
  color: #666;
  line-height: 1.3;
}

._tierSection_4cpdp_330 {
  margin: 24px 0;
}

._tierHeading_4cpdp_334 {
  font-size: 18px;
  font-weight: 600;
  color: #2d3e2d;
  margin: 0 0 16px 0;
  text-align: center;
}

/* Dark theme for account type */
[data-theme='dark'] ._accountTypeHeading_4cpdp_276,
[data-theme='dark'] ._tierHeading_4cpdp_334 {
  color: #6fa96f;
}

[data-theme='dark'] ._accountTypeButton_4cpdp_290 {
  background: #1a1a1a;
  border-color: #444;
}

[data-theme='dark'] ._accountTypeButton_4cpdp_290:hover {
  border-color: #6fa96f;
}

[data-theme='dark'] ._accountTypeButton_4cpdp_290._active_4cpdp_306 {
  background: rgba(111, 169, 111, 0.2);
  border-color: #6fa96f;
}

[data-theme='dark'] ._accountTypeLabel_4cpdp_317 {
  color: #e0e0e0;
}

[data-theme='dark'] ._accountTypeDesc_4cpdp_324 {
  color: #999;
}
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: var(--toastify-toast-width);
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: var(--toastify-toast-padding);
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: var(--toastify-toast-shadow);
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: unset;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Oracle Tags Integration Styles */

._oracleTagsIntegration_9f0ib_3 {
  margin: 10px 0 20px 0; /* Set top margin to 10px, keep bottom margin */
  padding: 16px;
  background-color: rgb(15, 26, 15);
  border-radius: 12px;
  border: 2px solid #2d4a2d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  /* Remove fixed height and overflow to let parent handle scrolling */
  display: flex;
  flex-direction: column;
  /* Prevent any layout reflow that could affect parent containers */
  contain: layout style !important;
  /* Lock position to prevent shifting */
  position: relative !important;
}

/* Hide scrollbar for WebKit browsers */
._oracleTagsIntegration_9f0ib_3::-webkit-scrollbar {
  display: none;
}

._oracleTagsIntegration_9f0ib_3._loading_9f0ib_25,
._oracleTagsIntegration_9f0ib_3._error_9f0ib_26,
._oracleTagsIntegration_9f0ib_3._noTags_9f0ib_27 {
  text-align: center;
  padding: 24px 16px;
}

._oracleTagsHeader_9f0ib_32 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0; /* Removed bottom margin */
  flex-shrink: 0; /* Prevent header from shrinking */
  position: sticky;
  top: 0;
  background: transparent; /* Remove background to match main content */
  z-index: 1;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.5);
}

._oracleTagsHeader_9f0ib_32 ._oracleTagsTitle_9f0ib_46 {
  color: #ffffff !important; /* White color for better visibility against gradient */
}

._oracleTagsHeader_9f0ib_32 ._oracleTagsIcon_9f0ib_50 {
  color: #ffffff !important; /* White color for better visibility against gradient */
}

._oracleTagsIcon_9f0ib_50 {
  font-size: 18px;
  color: #fbbf24; /* Gold/yellow for the lightning bolt */
}

._oracleTagsTitle_9f0ib_46 {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9; /* Light color for title against dark background */
}

._oracleTagsContent_9f0ib_65 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  align-items: start;
  flex: 1; /* Take up remaining space */
  overflow-y: auto; /* Allow scrolling within content area */
  min-height: 0; /* Allow content to shrink below its natural size */
  /* Hide scrollbar for WebKit browsers */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for WebKit browsers */
._oracleTagsContent_9f0ib_65::-webkit-scrollbar {
  display: none;
}

._oracleTagsIntegration_9f0ib_3::-webkit-scrollbar-track,
._oracleTagsContent_9f0ib_65::-webkit-scrollbar-track {
  background: rgba(203, 213, 225, 0.3);
  border-radius: 3px;
}

._oracleTagsIntegration_9f0ib_3::-webkit-scrollbar-thumb,
._oracleTagsContent_9f0ib_65::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.5);
  border-radius: 3px;
}

._oracleTagsIntegration_9f0ib_3::-webkit-scrollbar-thumb:hover,
._oracleTagsContent_9f0ib_65::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.7);
}

._oracleTagsColumn_9f0ib_101 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0; /* Prevent column overflow */
}

._oracleTagsCategory_9f0ib_108 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  break-inside: avoid; /* Prevent category breaks across columns */
}

._categoryHeader_9f0ib_115 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

._categoryName_9f0ib_122 {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._categoryCount_9f0ib_130 {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

._oracleTagsList_9f0ib_136 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

._oracleTag_9f0ib_3 {
  background: var(--tag-bg, #f1f5f9);
  border: 1.5px solid var(--tag-border, #64748b);
  color: var(--tag-text, #334155);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  min-height: 26px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

._oracleTag_9f0ib_3:hover {
  /* AGGRESSIVE LAYOUT FIX: Minimal hover effects to prevent any layout shifts */
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  /* Removed all box-shadow and opacity changes that might cause reflow */
}

._oracleTag_9f0ib_3:active {
  /* AGGRESSIVE LAYOUT FIX: No active state changes to prevent click issues */
  filter: brightness(0.95);
  transform: translateY(0);
}

/* AGGRESSIVE CLICK FIX: Ensure buttons always capture pointer events */
._oracleTag_9f0ib_3 {
  pointer-events: auto !important;
  cursor: pointer !important;
  /* Ensure button doesn't shift during interaction */
  position: relative !important;
  will-change: auto !important;
  /* Prevent any layout reflow during interaction */
  contain: layout style !important;
  /* Ensure stable height */
  min-height: 24px !important;
  max-height: 24px !important;
  /* Disable user selection to prevent text selection interfering with clicks */
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

._oracleTagsFooter_9f0ib_194 {
  margin-top: 0; /* Removed top margin */
  text-align: center;
  border-top: 1px solid #475569;
  padding-top: 12px;
  flex-shrink: 0; /* Prevent footer from shrinking */
  background: transparent; /* Remove background to match main content */
  position: sticky;
  bottom: 0;
}

._searchHint_9f0ib_205 {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

/* Loading states */
._loadingSpinner_9f0ib_212 {
  margin: 16px auto;
  width: 24px;
  height: 24px;
  border: 2px solid #e2e8f0;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: _spin_9f0ib_1 1s linear infinite;
}

@keyframes _spin_9f0ib_1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

._errorMessage_9f0ib_231 {
  color: #dc2626;
  font-size: 12px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
}

._noTagsMessage_9f0ib_241 {
  color: #64748b;
  font-size: 12px;
  margin-top: 8px;
  font-style: italic;
}

/* Responsive design */
@media (max-width: 768px) {
  ._oracleTagsIntegration_9f0ib_3 {
    margin: 16px 0;
    padding: 12px;
    max-height: 250px; /* Smaller max height on mobile */
  }

  ._oracleTagsContent_9f0ib_65 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  ._oracleTagsList_9f0ib_136 {
    gap: 4px;
  }

  ._oracleTag_9f0ib_3 {
    font-size: 10px;
    padding: 3px 6px;
    min-height: 20px;
  }

  ._oracleTagsTitle_9f0ib_46 {
    font-size: 14px;
  }
}

/* Dark mode support (if your app uses it) */
@media (prefers-color-scheme: dark) {
  ._oracleTagsIntegration_9f0ib_3 {
    background-color: rgb(15, 26, 15);
    border-color: #475569;
  }

  ._oracleTagsTitle_9f0ib_46 {
    color: #f1f5f9;
  }

  ._categoryName_9f0ib_122 {
    color: #94a3b8;
  }

  ._categoryCount_9f0ib_130 {
    color: #64748b;
  }

  ._searchHint_9f0ib_205 {
    color: #94a3b8;
  }

  ._oracleTagsFooter_9f0ib_194 {
    border-top-color: #475569;
  }
}

/* Tag appearance - no animation to prevent layout shift */
._oracleTag_9f0ib_3 {
  /* Animation removed to prevent background image resizing */
}

/* Hover effects for categories */
._oracleTagsCategory_9f0ib_108:hover ._categoryName_9f0ib_122 {
  color: #475569;
  transition: color 0.2s ease;
}

/* Focus states for accessibility */
._oracleTag_9f0ib_3:focus {
  outline: 2px solid var(--tag-border, #64748b);
  outline-offset: 2px;
}

/* Loading state variations */
._oracleTagsIntegration_9f0ib_3._loading_9f0ib_25 ._oracleTagsHeader_9f0ib_32 {
  opacity: 0.7;
}

._oracleTagsIntegration_9f0ib_3._error_9f0ib_26 ._oracleTagsHeader_9f0ib_32 {
  color: #dc2626;
}

._oracleTagsIntegration_9f0ib_3._noTags_9f0ib_27 ._oracleTagsHeader_9f0ib_32 {
  opacity: 0.8;
}
.folder-tree {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--background-color, #1a1a1a);
  border-right: 1px solid var(--border-color, #333);
  overflow: hidden;
}

/* Light mode overrides */
[data-theme='light'] .folder-tree {
  --background-color: #f5f5f5;
  --border-color: #ddd;
  --text-color: #1a1a1a;
  --text-secondary: #666;
  --hover-background: rgba(0, 0, 0, 0.05);
  --selected-background: rgba(74, 157, 74, 0.15);
  --button-background: #fff;
  --button-hover-background: #e8e8e8;
  --scrollbar-thumb: #ccc;
  --scrollbar-thumb-hover: #999;
}

.folder-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #333);
}

.folder-tree-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color, #e0e0e0);
}

.create-folder-button {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--border-color, #444);
  background: var(--button-background, #2a2a2a);
  color: var(--text-color, #e0e0e0);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.create-folder-button:hover {
  background: var(--button-hover-background, #3a3a3a);
  border-color: var(--primary-color, #4a9d4a);
}

.folder-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
}

.folder-tree-item {
  user-select: none;
}

.folder-children {
  margin: 0;
  padding: 0;
}

.folder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background-color 0.15s;
  position: relative;
  min-height: 28px;
}

.folder-row:hover {
  background-color: var(--hover-background, rgba(255, 255, 255, 0.05));
}

.folder-row.selected {
  background-color: var(--selected-background, rgba(74, 157, 74, 0.2));
  border-left: 3px solid var(--primary-color, #4a9d4a);
}

.folder-row.hovered {
  background-color: var(--hover-background, rgba(255, 255, 255, 0.08));
}

.folder-row.all-decks {
  font-weight: 600;
  border-bottom: 1px solid var(--border-color, #333);
  margin-bottom: 4px;
}

.expand-button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary, #999);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: color 0.15s;
  flex-shrink: 0;
}

.expand-button:hover {
  color: var(--text-color, #e0e0e0);
}

.expand-spacer {
  width: 20px;
  flex-shrink: 0;
}

.folder-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.folder-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-color, #e0e0e0);
  font-size: 14px;
}

.deck-count-badge,
.subfolder-count-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.deck-count-badge {
  background-color: var(--primary-color, #4a9d4a);
  color: white;
}

.subfolder-count-badge {
  background-color: var(--secondary-color, #5a6d7a);
  color: white;
  margin-left: 4px;
}

.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary, #999);
}

.empty-state p {
  margin: 0 0 16px 0;
  font-size: 14px;
}

.empty-state button {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid var(--border-color, #444);
  background: var(--button-background, #2a2a2a);
  color: var(--text-color, #e0e0e0);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.empty-state button:hover {
  background: var(--button-hover-background, #3a3a3a);
  border-color: var(--primary-color, #4a9d4a);
}

.folder-context-menu {
  position: fixed;
  z-index: 10000;
  background: var(--context-menu-background, #2a2a2a);
  border: 1px solid var(--border-color, #444);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 4px 0;
  min-width: 180px;
}

[data-theme='light'] .folder-context-menu {
  background: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.folder-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-color, #e0e0e0);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.15s;
}

[data-theme='light'] .folder-context-menu button {
  color: #333;
}

.folder-context-menu button:hover {
  background-color: var(--hover-background, rgba(255, 255, 255, 0.1));
}

[data-theme='light'] .folder-context-menu button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.folder-context-menu button.danger {
  color: var(--danger-color, #e74c3c);
}

.folder-context-menu button.danger:hover {
  background-color: rgba(231, 76, 60, 0.1);
}

.folder-tree-footer {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--border-color, #333);
  background: var(--background-color, #1a1a1a);
}

.text-button {
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--primary-color, #4a9d4a);
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.text-button:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Scrollbar styling */
.folder-list::-webkit-scrollbar {
  width: 8px;
}

.folder-list::-webkit-scrollbar-track {
  background: var(--background-color, #1a1a1a);
}

.folder-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #444);
  border-radius: 4px;
}

.folder-list::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #555);
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.modal-content {
  background: var(--modal-background, #2a2a2a);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Light mode overrides */
[data-theme='light'] .modal-content {
  --modal-background: #fff;
  --text-color: #1a1a1a;
  --border-color: #ddd;
  --input-background: #f5f5f5;
  --input-border: #ccc;
  background: var(--modal-background);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme='light'] .close-button {
  background: rgba(0, 0, 0, 0.05);
  color: #666;
}

[data-theme='light'] .close-button:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1a1a1a;
}

[data-theme='light'] .create-folder-modal form,
[data-theme='light'] .modal-body {
  background: #fff;
}

[data-theme='light'] .form-group label {
  color: #1a1a1a;
}

[data-theme='light'] .form-group input[type='text'],
[data-theme='light'] .form-group textarea,
[data-theme='light'] .form-group select {
  background: #f5f5f5;
  border-color: #ccc;
  color: #1a1a1a;
}

[data-theme='light'] .form-group select option {
  background: #fff;
  color: #1a1a1a;
}

[data-theme='light'] .icon-option {
  background: #f5f5f5;
  border-color: #ddd;
}

[data-theme='light'] .char-count {
  color: #666;
}

/* Override global index CSS for modal labels */
.create-folder-modal .modal-body label {
  margin-top: 0;
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
}

.close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0, 0, 0, 0.3);
  color: #999;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.close-button:hover {
  background: rgba(0, 0, 0, 0.5);
  color: #e8e8e8;
}

.modal-header {
  display: none;
}

.create-folder-modal form {
  margin: 0;
  padding: 0;
  background: #2a2a2a;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #2a2a2a;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #e8e8e8;
}

.form-group .required {
  color: #e74c3c;
}

.form-group input[type='text'],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #1e1e1e;
  color: #e8e8e8;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.form-group select option {
  background: #1e1e1e;
  color: #e8e8e8;
}

.form-group input[type='text']:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #4a9d4a;
}

.form-group input.error,
.form-group textarea.error,
.form-group select.error {
  border-color: #e74c3c;
}

.form-group textarea {
  resize: vertical;
  min-height: 50px;
}

.char-count {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #999;
  text-align: right;
}

.error-message {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #e74c3c;
}

.submit-error {
  padding: 12px;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid #e74c3c;
  border-radius: 4px;
  margin-top: 16px;
  color: #e74c3c;
}

.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.color-option {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.selected {
  border-color: #fff;
  box-shadow:
    0 0 0 2px var(--modal-background, #2a2a2a),
    0 0 8px rgba(255, 255, 255, 0.3);
}

.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.icon-option {
  width: 36px;
  height: 36px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #1e1e1e;
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
\n\n.icon-option img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icon-option:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.05);
  border-color: #555;
}

.icon-option.selected {
  border-color: #4a9d4a;
  background: rgba(74, 157, 74, 0.15);
  box-shadow: 0 0 8px rgba(74, 157, 74, 0.3);
}

.folder-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 6px;
}

.preview-icon {
  font-size: 26px;
  line-height: 1;
}

.preview-name {
  font-size: 15px;
  font-weight: 500;
  color: #e8e8e8;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid var(--border-color, #444);
  background: var(--modal-background, #2a2a2a);
}

[data-theme='light'] .modal-footer {
  background: #fff;
  border-top-color: #ddd;
}

/* Override global CSS bleed for modal labels */
.create-folder-modal .form-group label,
.modal-content label {
  margin-top: 0 !important;
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.cancel-button,
.submit-button {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.cancel-button {
  background: transparent;
  color: #aaa;
  border: 1px solid #555;
}

.cancel-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #e8e8e8;
  border-color: #666;
}

.submit-button {
  background: #4a9d4a;
  color: white;
  border: 1px solid transparent;
}

.submit-button:hover:not(:disabled) {
  background: #3d8a3d;
}

.cancel-button:disabled,
.submit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scrollbar styling */
.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: #2a2a2a;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Responsive */
@media (max-width: 640px) {
  .modal-content {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .modal-overlay {
    padding: 0;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.share-folder-modal {
  background: #2a2a2a;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  color: #e8e8e8;
}

.share-folder-modal h2 {
  margin: 0 0 8px 0;
  font-size: 22px;
  color: #e8e8e8;
}

.share-modal-folder-name {
  margin: 0 0 20px 0;
  color: #999;
  font-size: 14px;
}

.close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.close-button:hover {
  color: #e8e8e8;
}

.error-message {
  background: #4a2525;
  color: #ffaaaa;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 14px;
}

/* Share Link Section */
.share-link-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.share-link-section label {
  font-weight: 600;
  font-size: 14px;
  color: #e8e8e8;
  margin-bottom: -8px;
}

.link-input-group {
  display: flex;
  gap: 8px;
}

.share-url-input {
  flex: 1;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
  color: #e8e8e8;
  font-family: 'Courier New', monospace;
}

.share-url-input:focus {
  outline: none;
  border-color: #4a9eff;
}

.copy-button {
  background: #3d5e3d;
  color: #e8e8e8;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.copy-button:hover {
  background: #4a7a4a;
}

.copy-button:active {
  transform: scale(0.98);
}

.share-info {
  background: #1e1e1e;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.share-info-item {
  font-size: 13px;
  color: #aaa;
}

.share-info-item strong {
  color: #e8e8e8;
  margin-right: 6px;
}

.revoke-button {
  background: #5e3d3d;
  color: #e8e8e8;
  border: none;
  border-radius: 4px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}

.revoke-button:hover {
  background: #7a4a4a;
}

.revoke-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Share Settings Section */
.share-settings-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #e8e8e8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-group input[type='checkbox'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}

.form-group input[type='text'],
.form-group input[type='password'],
.form-group select {
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
  color: #e8e8e8;
}

.form-group input[type='text']:focus,
.form-group input[type='password']:focus,
.form-group select:focus {
  outline: none;
  border-color: #4a9eff;
}

.form-group select {
  cursor: pointer;
}

.help-text {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.generate-button {
  background: #3d5e3d;
  color: #e8e8e8;
  border: none;
  border-radius: 4px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}

.generate-button:hover {
  background: #4a7a4a;
}

.generate-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.generate-button:active {
  transform: scale(0.98);
}
/* Light Mode Overrides */
[data-theme='light'] .share-folder-modal {
  background: #ffffff;
  color: #333;
}

[data-theme='light'] .share-folder-modal h2 {
  color: #333;
}

[data-theme='light'] .share-modal-folder-name {
  color: #666;
}

[data-theme='light'] .close-button {
  color: #666;
}

[data-theme='light'] .close-button:hover {
  color: #333;
}

[data-theme='light'] .error-message {
  background: #ffe6e6;
  color: #cc0000;
}

[data-theme='light'] .share-link-section label {
  color: #333;
}

[data-theme='light'] .share-url-input {
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #333;
}

[data-theme='light'] .share-url-input:focus {
  border-color: #4a9eff;
}

[data-theme='light'] .copy-button {
  background: #3d5e3d;
  color: #ffffff;
}

[data-theme='light'] .copy-button:hover {
  background: #4a7a4a;
}

[data-theme='light'] .share-info {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
}

[data-theme='light'] .share-info-item {
  color: #666;
}

[data-theme='light'] .share-info-item strong {
  color: #333;
}

[data-theme='light'] .revoke-button {
  background: #d9534f;
  color: #ffffff;
}

[data-theme='light'] .revoke-button:hover {
  background: #c9302c;
}

[data-theme='light'] .form-group label {
  color: #333;
}

[data-theme='light'] .form-group input[type='text'],
[data-theme='light'] .form-group input[type='password'],
[data-theme='light'] .form-group select {
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #333;
}

[data-theme='light'] .form-group input[type='text']:focus,
[data-theme='light'] .form-group input[type='password']:focus,
[data-theme='light'] .form-group select:focus {
  border-color: #4a9eff;
}

[data-theme='light'] .help-text {
  color: #666;
}

[data-theme='light'] .generate-button {
  background: #3d5e3d;
  color: #ffffff;
}

[data-theme='light'] .generate-button:hover {
  background: #4a7a4a;
}
.collection-loading-screen {
  background-color: var(--color-background);
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Fog effect */
.fog-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.fog {
  position: absolute;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.03) 75%,
    transparent 100%
  );
  animation: fog-drift linear infinite;
}

.fog-1 {
  top: 0;
  animation-duration: 30s;
  opacity: 0.4;
}

.fog-2 {
  top: 0;
  animation-duration: 45s;
  animation-delay: -15s;
  opacity: 0.3;
}

.fog-3 {
  top: 0;
  animation-duration: 60s;
  animation-delay: -30s;
  opacity: 0.2;
}

@keyframes fog-drift {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

/* Content */
.loading-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
}

/* Logo */
.logo-container {
  position: relative;
  animation: pulse 2s ease-in-out infinite;
}

.site-logo {
  width: 180px;
  height: 180px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* Text */
.loading-text {
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
  min-width: 250px;
  text-align: center;
}

.loading-dots {
  display: inline-block;
  width: 1.5rem;
  text-align: left;
}

.card-count {
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin: 0;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
  .site-logo {
    width: 140px;
    height: 140px;
  }

  .loading-text {
    font-size: 1.25rem;
  }
}
/* Dark Theme (Default) */
._legalContainer_d5lu8_2 {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  padding: 2rem 1rem;
}

._legalContent_d5lu8_8 {
  max-width: 900px;
  margin: 0 auto;
  background-color: rgba(20, 20, 20, 0.95);
  border: 1px solid #3d5e3d;
  border-radius: 8px;
  padding: 3rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

._legalContent_d5lu8_8 h1 {
  color: #7cb97c;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 3px solid #3d5e3d;
  padding-bottom: 1rem;
}

._lastUpdated_d5lu8_26 {
  color: #999;
  font-style: italic;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

._legalContent_d5lu8_8 section {
  margin-bottom: 2.5rem;
}

._legalContent_d5lu8_8 h2 {
  color: #7cb97c;
  font-size: 1.75rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-left: 4px solid #3d5e3d;
  padding-left: 1rem;
}

._legalContent_d5lu8_8 h3 {
  color: #9dc69d;
  font-size: 1.3rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

._legalContent_d5lu8_8 p {
  color: #ddd;
  line-height: 1.8;
  margin-bottom: 1rem;
  font-size: 1rem;
}

._legalContent_d5lu8_8 ul {
  color: #ddd;
  line-height: 1.8;
  margin-bottom: 1rem;
  padding-left: 2rem;
}

._legalContent_d5lu8_8 li {
  margin-bottom: 0.75rem;
}

._legalContent_d5lu8_8 strong {
  color: #7cb97c;
  font-weight: 600;
}

._legalContent_d5lu8_8 a {
  color: #7cb97c;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

._legalContent_d5lu8_8 a:hover {
  border-bottom-color: #7cb97c;
}

._acknowledgment_d5lu8_87 {
  background-color: rgba(61, 94, 61, 0.1);
  border: 2px solid #3d5e3d;
  border-radius: 4px;
  padding: 1.5rem;
  margin-top: 3rem;
}

._acknowledgment_d5lu8_87 h2 {
  border-left: none;
  padding-left: 0;
  margin-top: 0;
}

._acknowledgment_d5lu8_87 p {
  font-weight: 600;
  color: #7cb97c;
  margin-bottom: 0;
}

/* Light Theme */
._legalContainer_d5lu8_2[data-theme='light'] {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

._legalContainer_d5lu8_2[data-theme='light'] ._legalContent_d5lu8_8 {
  background-color: rgba(255, 255, 255, 0.98);
  border: 1px solid #6fa96f;
  box-shadow: 0 4px 20px rgba(61, 94, 61, 0.15);
}

._legalContainer_d5lu8_2[data-theme='light'] ._legalContent_d5lu8_8 h1 {
  color: #2d5e2d;
  border-bottom: 3px solid #3d5e3d;
}

._legalContainer_d5lu8_2[data-theme='light'] ._lastUpdated_d5lu8_26 {
  color: #666;
}

._legalContainer_d5lu8_2[data-theme='light'] ._legalContent_d5lu8_8 h2 {
  color: #2d5e2d;
  border-left: 4px solid #3d5e3d;
}

._legalContainer_d5lu8_2[data-theme='light'] ._legalContent_d5lu8_8 h3 {
  color: #3d5e3d;
}

._legalContainer_d5lu8_2[data-theme='light'] ._legalContent_d5lu8_8 p,
._legalContainer_d5lu8_2[data-theme='light'] ._legalContent_d5lu8_8 ul,
._legalContainer_d5lu8_2[data-theme='light'] ._legalContent_d5lu8_8 li {
  color: #333;
}

._legalContainer_d5lu8_2[data-theme='light'] ._legalContent_d5lu8_8 strong {
  color: #2d5e2d;
}

._legalContainer_d5lu8_2[data-theme='light'] ._legalContent_d5lu8_8 a {
  color: #2d5e2d;
}

._legalContainer_d5lu8_2[data-theme='light'] ._legalContent_d5lu8_8 a:hover {
  border-bottom-color: #2d5e2d;
}

._legalContainer_d5lu8_2[data-theme='light'] ._acknowledgment_d5lu8_87 {
  background-color: rgba(61, 94, 61, 0.08);
  border: 2px solid #3d5e3d;
}

._legalContainer_d5lu8_2[data-theme='light'] ._acknowledgment_d5lu8_87 p {
  color: #2d5e2d;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  ._legalContainer_d5lu8_2 {
    padding: 1rem 0.5rem;
  }

  ._legalContent_d5lu8_8 {
    padding: 1.5rem;
    border-radius: 0;
  }

  ._legalContent_d5lu8_8 h1 {
    font-size: 2rem;
  }

  ._legalContent_d5lu8_8 h2 {
    font-size: 1.5rem;
  }

  ._legalContent_d5lu8_8 h3 {
    font-size: 1.2rem;
  }

  ._legalContent_d5lu8_8 p,
  ._legalContent_d5lu8_8 ul {
    font-size: 0.95rem;
  }

  ._legalContent_d5lu8_8 ul {
    padding-left: 1.5rem;
  }
}

@media (max-width: 480px) {
  ._legalContent_d5lu8_8 {
    padding: 1rem;
  }

  ._legalContent_d5lu8_8 h1 {
    font-size: 1.75rem;
  }

  ._legalContent_d5lu8_8 h2 {
    font-size: 1.3rem;
  }

  ._legalContent_d5lu8_8 h3 {
    font-size: 1.1rem;
  }

  ._acknowledgment_d5lu8_87 {
    padding: 1rem;
  }
}
/* Override parent flex container that forces column layout */
._contentContainer_1xbks_2:has(._tradePageContainer_1xbks_2) {
  display: block !important;
  align-items: stretch !important;
}

/* Trade page layout - Constant Mists Theme with Dark Mode */
._tradePageContainer_1xbks_2 {
  min-height: 100vh;
  padding: 40px 20px;
  position: relative;
  background: var(--bg-primary);
  display: block !important;
}

._tradePageContent_1xbks_16 {
  position: relative;
  max-width: 1800px !important;
  width: 100% !important;
  margin: 0 auto;
  padding: 0 40px;
  display: block !important;
  box-sizing: border-box;
}

._tradePageHeader_1xbks_26 {
  margin-bottom: 40px;
}

._tradePageHeader_1xbks_26 h1 {
  color: var(--text-primary);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

._createTradeBtn_1xbks_38 {
  background: #3d5e3d;
  color: white;
  border: 1px solid var(--border-color);
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

._createTradeBtn_1xbks_38:hover {
  background: #4a6f4a;
  border-color: var(--border-color);
}

/* Trade status sections */
._tradeStatusSection_1xbks_56 {
  margin-bottom: 50px;
  width: 100% !important;
  display: block !important;
}

._statusHeader_1xbks_62 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
}

._statusHeader_1xbks_62 h2 {
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

._statusBadge_1xbks_78 {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._statusBadge_1xbks_78._proposed_1xbks_87 {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

._statusBadge_1xbks_78._inProgress_1xbks_93 {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

._statusBadge_1xbks_78._completed_1xbks_99 {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Trade cards grid - side by side layout */
._tradesGrid_1xbks_106 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 280px)) !important;
  gap: 20px;
  width: 100% !important;
  grid-auto-flow: row;
  justify-content: start;
}

/* Drag and drop styles */
._tradeCard_1xbks_116._dragging_1xbks_116 {
  opacity: 0.5;
  cursor: grabbing;
}

._tradeStatusSection_1xbks_56._dragOver_1xbks_121 {
  background-color: var(--hover-bg);
  border-radius: 8px;
}

/* Individual trade card */
._tradeCard_1xbks_116 {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 2px 6px var(--shadow);
}

._tradeCard_1xbks_116:hover {
  transform: translateY(-4px);
  border-color: var(--text-secondary);
  box-shadow: 0 6px 16px var(--shadow-strong);
}

/* Delete button - top right corner */
._tradeDeleteBtn_1xbks_145 {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  padding: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 100;
  opacity: 0.4;
  line-height: 1;
  width: auto;
  min-width: auto;
  color: var(--text-secondary);
}

._tradeDeleteBtn_1xbks_145:hover {
  opacity: 1;
  transform: scale(1.15);
  color: #dc3545;
}

._tradeCardHeader_1xbks_169 {
  margin-bottom: 12px;
  padding-right: 35px; /* More space for delete button */
}

._tradeName_1xbks_174 {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._tradeDate_1xbks_184 {
  display: none; /* Hidden per user request */
}

/* Compact trade details box */
._tradeDetails_1xbks_189 {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: 5px;
  border: 1px solid var(--border-color);
}

._tradeParticipant_1xbks_198 {
  flex: 1;
  text-align: center;
}

._participantName_1xbks_203 {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._participantCards_1xbks_213 {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
}

._participantCards_1xbks_213 strong {
  color: var(--text-primary);
  font-size: 13px;
}

._tradeDivider_1xbks_224 {
  width: 1px;
  background: var(--border-color);
  margin: 0 8px;
}

/* Empty state */
._emptyState_1xbks_231 {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 14px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 2px dashed var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
  ._tradePageContainer_1xbks_2 {
    padding: 20px 12px;
  }

  ._tradePageHeader_1xbks_26 h1 {
    font-size: 2rem;
  }

  ._tradesGrid_1xbks_106 {
    grid-template-columns: 1fr;
  }
}
._cardPreviewContainer_10o69_1 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 242px; /* Match sidebar width */
  aspect-ratio: 5 / 7; /* MTG card aspect ratio */
  z-index: 1; /* Normal layering within sidebar context */
  border-radius: 14px; /* Fixed pixel value for consistent corner coverage */
  overflow: hidden; /* Clip image to rounded corners */
  background-color: #1a1a1a; /* Dark background fills any gaps */
}

._cardPreviewImage_10o69_13 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill container while maintaining aspect ratio */
  border-radius: 14px; /* Match container */
  transform: scale(1.02); /* Slight scale to fully cover corners */
  display: block;
}

._freshFoilOverlay_10o69_25 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.5) 0%,
    rgba(255, 154, 0, 0.5) 10%,
    rgba(208, 222, 33, 0.5) 20%,
    rgba(79, 220, 74, 0.5) 30%,
    rgba(63, 218, 216, 0.5) 40%,
    rgba(47, 201, 226, 0.5) 50%,
    rgba(28, 127, 238, 0.5) 60%,
    rgba(95, 21, 242, 0.5) 70%,
    rgba(186, 12, 248, 0.5) 80%,
    rgba(251, 7, 217, 0.5) 90%,
    rgba(255, 0, 0, 0.5) 100%
  );
  background-size: 200% 200%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  animation: _foil-shimmer_10o69_1 3s linear infinite;
}

@keyframes _foil-shimmer_10o69_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

._fixedPreview_10o69_65 {
  /* position: fixed; */
  z-index: 1000;
  pointer-events: none;
}

/* Debug styles removed - FOIL text overlay no longer needed */
._tradeProgressTracker_1gz8u_1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
  flex-shrink: 0;
}

._progressStep_1gz8u_9 {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  padding: 6px 16px;
  border-radius: 6px;
  border: 2px solid var(--step-color);
  background-color: var(--card-bg);
  min-width: 120px;
  height: 36px;
}

/* Proposed - Red */
._progressStep_1gz8u_9:nth-child(1) {
  --step-color: #dc3545;
}

/* In Progress - Yellow */
._progressStep_1gz8u_9:nth-child(2) {
  --step-color: #ffc107;
}

/* Completed - Green */
._progressStep_1gz8u_9:nth-child(3) {
  --step-color: #28a745;
}

/* Active state - filled with color */
._progressStep_1gz8u_9._active_1gz8u_40 {
  background-color: var(--step-color);
}

._progressStep_1gz8u_9._active_1gz8u_40 ._stepLabel_1gz8u_44 {
  color: white;
}

/* Completed state - also filled */
._progressStep_1gz8u_9._completed_1gz8u_49 {
  background-color: var(--step-color);
}

._progressStep_1gz8u_9._completed_1gz8u_49 ._stepLabel_1gz8u_44 {
  color: white;
}

/* Inactive/future steps - white background with border */
._progressStep_1gz8u_9:not(._active_1gz8u_40):not(._completed_1gz8u_49) {
  opacity: 0.6;
}

._progressStep_1gz8u_9:not(._active_1gz8u_40):not(._completed_1gz8u_49) ._stepLabel_1gz8u_44 {
  color: var(--text-primary);
}

._progressStep_1gz8u_9:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

._stepLabel_1gz8u_44 {
  font-size: 13px;
  white-space: nowrap;
  font-weight: 700;
  color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
  ._tradeProgressTracker_1gz8u_1 {
    height: 50px;
    margin-left: 0;
    margin-top: 15px;
    width: 100%;
  }

  ._progressStep_1gz8u_9 {
    min-width: 0;
    padding: 0 12px;
  }

  ._stepNumber_1gz8u_93 {
    font-size: 14px;
  }

  ._stepLabel_1gz8u_44 {
    font-size: 12px;
  }
}
._foilOverlay_1698r_1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.5) 0%,
    rgba(255, 154, 0, 0.5) 10%,
    rgba(208, 222, 33, 0.5) 20%,
    rgba(79, 220, 74, 0.5) 30%,
    rgba(63, 218, 216, 0.5) 40%,
    rgba(47, 201, 226, 0.5) 50%,
    rgba(28, 127, 238, 0.5) 60%,
    rgba(95, 21, 242, 0.5) 70%,
    rgba(186, 12, 248, 0.5) 80%,
    rgba(251, 7, 217, 0.5) 90%,
    rgba(255, 0, 0, 0.5) 100%
  );
  background-size: 200% 200%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  animation: _foil-shimmer_1698r_1 3s linear infinite;
  border-radius: 8px;
}

@keyframes _foil-shimmer_1698r_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Trade Management Page Styles - Dark Mode Support */
._tradeManagementContainer_hbguz_2 {
  padding: 20px;
  max-width: 100%;
  min-height: 100vh;
  background: var(--bg-primary);
}

._tradeManagementContainer_hbguz_2 ._container_hbguz_9 {
  background: transparent;
}

._tradeManagementContainer_hbguz_2 h1 {
  color: var(--text-primary);
}

._backLink_hbguz_17 {
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: all 0.2s ease;
}

._backLink_hbguz_17:hover {
  color: #3d5e3d;
  border-bottom-color: #3d5e3d;
}

/* Legacy styles for existing functionality */
._tradeColumns_hbguz_32 {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 20px;
}

._tradeColumn_hbguz_32 {
  flex: 1;
  border: 2px solid var(--border-color);
  padding: 20px;
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: 0 4px 12px var(--shadow);
}

._cardItem_hbguz_48 {
  padding: 12px;
  margin-bottom: 8px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

._cardItem_hbguz_48:hover {
  border-color: var(--text-secondary);
  box-shadow: 0 2px 6px var(--shadow-strong);
  transform: translateY(-1px);
}

._columnActions_hbguz_65,
._tradeActions_hbguz_66 {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

._statusPending_hbguz_72 {
  color: #ffa500;
  font-weight: bold;
}

._statusConfirmed_hbguz_77 {
  color: #28a745;
  font-weight: bold;
}

._btnDanger_hbguz_82 {
  background-color: #dc3545;
  color: white;
}

/* NEW: Enhanced Trade Card Modal Styles */
._tradeCardModal_hbguz_88 {
  max-width: 600px !important;
  max-height: 80vh !important;
}

._tradeCardModal_hbguz_88 ._modalHeader_hbguz_93 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}

._tradeCardModal_hbguz_88 ._closeButton_hbguz_102 {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._tradeCardModal_hbguz_88 ._closeButton_hbguz_102:hover {
  color: var(--text-primary);
}

._tradeCardModal_hbguz_88 ._formGroup_hbguz_120 {
  margin-bottom: 15px;
}

._tradeCardModal_hbguz_88 ._formGroup_hbguz_120 label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: var(--text-primary);
}

._tradeCardModal_hbguz_88 ._formGroup_hbguz_120 input[type='checkbox'] {
  margin-right: 8px;
}

/* Search Container Styles */
._searchContainer_hbguz_136 {
  position: relative;
}

._searchDropdown_hbguz_140 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--card-bg);
  border: 2px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px var(--shadow-strong);
}

._searchDropdownItem_hbguz_155 {
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
}

._searchDropdownItem_hbguz_155:last-child {
  border-bottom: none;
}

._searchDropdownItem_hbguz_155:hover,
._searchDropdownItem_hbguz_155._selected_hbguz_167 {
  background-color: var(--hover-bg);
}

._searchDropdownItem_hbguz_155 ._cardName_hbguz_171 {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

._searchDropdownItem_hbguz_155 ._cardDetails_hbguz_177 {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* User Column Styles */
._userColumn_hbguz_184 {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  background: var(--card-bg);
  box-shadow: 0 4px 12px var(--shadow);
}

._userNameHeader_hbguz_194 {
  margin-bottom: 15px;
}

._userNameInput_hbguz_198 {
  font-size: 18px;
  font-weight: bold;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 8px;
  width: 100%;
}

._userNameDisplay_hbguz_209 {
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
  color: var(--text-primary);
  font-size: 1.3rem;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
}

._userNameDisplay_hbguz_209:hover {
  color: var(--text-secondary);
}

/* Card List Styles */
._cardList_hbguz_227 {
  flex: 1;
  min-height: 400px;
  margin-bottom: 20px;
}

._cardListItem_hbguz_233 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

._cardListItem_hbguz_233:hover {
  background-color: var(--hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px var(--shadow);
}

._cardListItemInfo_hbguz_252 ._cardName_hbguz_171 {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

._cardListItemInfo_hbguz_252 ._cardDetails_hbguz_177 {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  gap: 12px;
}

._cardListItemRemove_hbguz_265 {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

._cardListItemRemove_hbguz_265:hover {
  background-color: rgba(220, 53, 69, 0.1);
}

._emptyState_hbguz_280 {
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  margin-top: 50px;
  padding: 20px;
}

._userTotal_hbguz_288 {
  border-top: 2px solid var(--border-color);
  padding-top: 15px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: var(--text-primary);
}

/* Trade Actions Styles */
._tradeActions_hbguz_66 {
  margin-top: 30px;
  text-align: center;
  border-top: 1px solid var(--border-color);
  padding-top: 25px;
}

._tradeDifference_hbguz_305 {
  margin-bottom: 15px;
  font-size: 16px;
}

._tradeDifference_hbguz_305 ._differenceAmount_hbguz_310 {
  font-weight: bold;
}

._tradeDifference_hbguz_305._positive_hbguz_314 {
  color: #28a745;
}

._tradeDifference_hbguz_305._negative_hbguz_318 {
  color: #dc3545;
}

._tradeDifference_hbguz_305._balanced_hbguz_322 {
  color: var(--text-secondary);
}

/* Preview Container Styles */
._previewContainer_hbguz_327 {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 15px;
  background-color: var(--bg-secondary);
  margin-bottom: 20px;
  min-height: 300px;
}

._previewContainer_hbguz_327 h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--text-primary);
}

._previewPlaceholder_hbguz_342 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
}

/* ============================================
   MOBILE RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  /* Stack layout vertically on mobile */
  ._tradeLayout_hbguz_358 {
    flex-direction: column !important;
  }

  /* Full width preview on mobile */
  ._tradePreviewColumn_hbguz_363 {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 20px;
    position: sticky !important;
    top: 60px !important;
    z-index: 100 !important;
  }

  /* Full width user columns */
  ._userColumn_hbguz_184 {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* Reduce padding on mobile */
  ._tradeManagementContainer_hbguz_2 {
    padding: 10px !important;
  }

  ._tradeColumn_hbguz_32 {
    padding: 15px !important;
  }

  /* Make card rows more touch-friendly */
  ._cardRow_hbguz_389 {
    padding: 12px 8px !important;
    min-height: 50px !important;
  }

  /* Larger, more touch-friendly buttons */
  ._cardRow_hbguz_389 button {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px !important;
  }

  /* Stack card info vertically if needed */
  ._cardRow_hbguz_389 > div {
    flex-wrap: wrap !important;
  }

  /* Make card name more prominent on mobile */
  ._cardName_hbguz_171 {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* Adjust dropdown width for mobile */
  ._printingDropdown_hbguz_413 {
    left: 5px !important;
    right: 5px !important;
    width: calc(100vw - 10px) !important;
    max-width: none !important;
  }

  /* Mobile-friendly search */
  ._searchBar_hbguz_421 {
    width: 100% !important;
  }

  /* Stack buttons vertically on mobile */
  ._buttonGroup_hbguz_426 {
    flex-direction: column !important;
    gap: 10px !important;
  }

  ._buttonGroup_hbguz_426 button {
    width: 100% !important;
  }

  /* Hide or minimize less important info on mobile */
  ._collectorNumber_hbguz_436 {
    display: none !important;
  }

  /* Make drag handles more visible on mobile */
  [draggable='true'] {
    cursor: grab !important;
    touch-action: none !important;
  }

  [draggable='true']:active {
    cursor: grabbing !important;
  }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
  ._tradeLayout_hbguz_358 {
    flex-direction: column !important;
  }

  ._tradePreviewColumn_hbguz_363 {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
}

/* Mobile landscape */
@media (max-width: 900px) and (orientation: landscape) {
  ._tradePreviewColumn_hbguz_363 {
    width: 40% !important;
  }

  ._userColumn_hbguz_184 {
    width: 48% !important;
  }

  ._tradeLayout_hbguz_358 {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
}

/* Loading States */
._loadingSpinner_hbguz_480 {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: _spin_hbguz_1 1s linear infinite;
}

@keyframes _spin_hbguz_1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Enhanced Button Styles */
._btn_hbguz_82 {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

._btnPrimary_hbguz_511 {
  background-color: #3d5e3d;
  color: white;
  border-color: #3d5e3d;
}

._btnPrimary_hbguz_511:hover {
  background-color: #4a6f4a;
  border-color: #4a6f4a;
}

._btnSecondary_hbguz_522 {
  background-color: #6c757d;
  color: white;
  border-color: #6c757d;
}

._btnSecondary_hbguz_522:hover {
  background-color: #545b62;
  border-color: #545b62;
}

._btnSuccess_hbguz_533 {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: 1px solid rgba(111, 169, 111, 0.3);
}

._btnSuccess_hbguz_533:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: rgba(111, 169, 111, 0.5);
}

/* Foil Indicator */
._foilIndicator_hbguz_545 {
  color: #ffd700;
  text-shadow: 0 0 2px rgba(255, 215, 0, 0.5);
}

/* Card Row Styles */
._cardRow_hbguz_389 {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  cursor: default;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  background-color: transparent;
  border-radius: 4px;
  padding: 0;
  outline: none;
  gap: 8px;
}

._cardRow_hbguz_389:hover {
  background-color: var(--hover-bg);
}

._cardRowActive_hbguz_569 {
  border: 1px solid var(--text-secondary) !important;
  background-color: var(--bg-secondary) !important;
  border-radius: 4px 4px 0 0 !important;
  padding: 2px !important;
  outline: 2px solid var(--text-secondary) !important;
  outline-offset: 1px !important;
}

._printingSelect_hbguz_578 {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: #3b82f6;
}

._printingSelect_hbguz_578 option {
  background-color: var(--input-bg);
  color: var(--text-primary);
}

._cardName_hbguz_171 {
  font-weight: bold;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: block;
  padding: 4px 0;
  user-select: none;
  transition: color 0.2s ease;
  color: var(--text-primary);
}

._cardName_hbguz_171:hover {
  color: #3d5e3d !important;
  text-decoration: underline;
}

._cardNameFoil_hbguz_608 {
  color: #d4af37;
}

._cardNameNormal_hbguz_612 {
  color: var(--text-primary);
}

._printingDropdown_hbguz_413 {
  position: fixed;
  background-color: var(--card-bg);
  border: 1px solid #3d5e3d;
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--shadow-strong);
  z-index: 9999;
  max-height: 300px;
  overflow-y: auto;
}

/* Hide scrollbars for trade containers */
._tradeContainerUser1_hbguz_628::-webkit-scrollbar,
._tradeContainerUser2_hbguz_629::-webkit-scrollbar {
  display: none;
}

._tradeContainerUser1_hbguz_628::-webkit-scrollbar-track,
._tradeContainerUser2_hbguz_629::-webkit-scrollbar-track {
  background: transparent;
}

._tradeContainerUser1_hbguz_628::-webkit-scrollbar-thumb,
._tradeContainerUser2_hbguz_629::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Auto-save indicator animation */
._saveIndicator_hbguz_644 {
  font-size: 12px;
  color: #4caf50;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: _fadeInOut_hbguz_1 2s ease-in-out;
}

@keyframes _fadeInOut_hbguz_1 {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  15% {
    opacity: 1;
    transform: translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Auto-save indicator animation */
@keyframes _fadeOut_hbguz_1 {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

._saveIndicator_hbguz_644 {
  font-size: 12px;
  color: #4caf50;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: _fadeOut_hbguz_1 2s forwards;
}
.shared-folder-view {
  min-height: 100vh;
  background: #1a1a1a;
  color: #e8e8e8;
  padding: 20px;
}

/* Light mode overrides */
[data-theme='light'] .shared-folder-view {
  background: #f5f5f5;
  color: #1a1a1a;
}

[data-theme='light'] .loading-state,
[data-theme='light'] .error-state,
[data-theme='light'] .password-prompt {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme='light'] .error-state h2,
[data-theme='light'] .password-prompt h2,
[data-theme='light'] .folder-title-section h1 {
  color: #1a1a1a;
}

[data-theme='light'] .password-prompt input {
  background: #f5f5f5;
  border-color: #ccc;
  color: #1a1a1a;
}

[data-theme='light'] .shared-folder-header,
[data-theme='light'] .subfolders-section,
[data-theme='light'] .subfolder-card {
  background: #fff;
}

[data-theme='light'] .decks-table {
  background: #fff;
}

[data-theme='light'] .decks-table thead {
  background: #f5f5f5;
}

[data-theme='light'] .decks-table th {
  color: #666;
}

[data-theme='light'] .decks-table td {
  color: #1a1a1a;
  border-top-color: #e0e0e0;
}

[data-theme='light'] .decks-table tbody tr:hover {
  background: #f5f5f5;
}

[data-theme='light'] .subfolder-card:hover {
  background: #f5f5f5;
}

[data-theme='light'] .shared-folder-owner,
[data-theme='light'] .shared-folder-description,
[data-theme='light'] .subfolder-stats,
[data-theme='light'] .stat-label {
  color: #666;
}

[data-theme='light'] .stat-value {
  color: #1a1a1a;
}

.loading-state,
.error-state,
.password-prompt {
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
  padding: 40px;
  background: #2a2a2a;
  border-radius: 12px;
}

.error-state h2,
.password-prompt h2 {
  color: #e8e8e8;
  margin-bottom: 16px;
}

.error-state p,
.password-prompt p {
  color: #999;
  margin-bottom: 20px;
}

.password-prompt form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.password-prompt input {
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 12px;
  font-size: 15px;
  color: #e8e8e8;
}

.password-prompt input:focus {
  outline: none;
  border-color: #4a9eff;
}

.password-prompt button {
  background: #3d5e3d;
  color: #e8e8e8;
  border: none;
  border-radius: 4px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.password-prompt button:hover {
  background: #4a7a4a;
}

.shared-folder-header {
  max-width: 1200px;
  margin: 0 auto 24px;
  background: #2a2a2a;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.folder-title-section {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.shared-folder-icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}

.folder-title-section h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  color: #e8e8e8;
}

.shared-folder-description {
  color: #999;
  margin: 0 0 8px 0;
  font-size: 14px;
}

.shared-folder-owner {
  color: #666;
  margin: 0;
  font-size: 13px;
}

.folder-stats {
  display: flex;
  gap: 32px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #e8e8e8;
}

.stat-label {
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.subfolders-section,
.decks-section {
  max-width: 1200px;
  margin: 0 auto 24px;
}

.subfolders-section h2,
.decks-section h2 {
  font-size: 18px;
  color: #e8e8e8;
  margin-bottom: 12px;
}

.subfolders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.subfolder-card {
  background: #2a2a2a;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition:
    transform 0.2s,
    background-color 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
}

.subfolder-card:hover {
  background: #333;
  transform: translateY(-2px);
}

.subfolder-card.selected {
  background: #333;
  border-color: #4a9eff;
}

.subfolder-icon {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

/* Light Mode Overrides */
[data-theme='light'] .subfolder-card {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
}

[data-theme='light'] .subfolder-card:hover {
  background: #ebebeb;
}

[data-theme='light'] .subfolder-card.selected {
  background: #e3f2fd;
  border-color: #90caf9;
}

[data-theme='light'] .subfolder-info h3 {
  color: #333;
}

[data-theme='light'] .subfolder-stats {
  color: #666;
}

.subfolder-info h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #e8e8e8;
}

.subfolder-stats {
  margin: 0;
  font-size: 13px;
  color: #999;
}

.decks-table {
  background: #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
}

.decks-table table {
  width: 100%;
  border-collapse: collapse;
}

.decks-table thead {
  background: #1e1e1e;
}

.decks-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.decks-table td {
  padding: 12px 16px;
  border-top: 1px solid #333;
  color: #e8e8e8;
  font-size: 14px;
}

.decks-table tbody tr:hover {
  background: #333;
}

.decks-table tbody tr {
  cursor: pointer;
  transition: background-color 0.2s;
}

.decks-table tbody tr:active {
  background: #3a3a3a;
}

.deck-name {
  font-weight: 600;
  color: #4a9eff;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shared-folder-view .color-identity {
  display: flex;
  gap: 4px;
  align-items: center;
}

.shared-folder-view .mana-symbol {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.shared-folder-view .empty-state {
  max-width: 600px;
  margin: 60px auto;
  text-align: center;
  padding: 40px 20px;
  background: #2a2a2a;
  border-radius: 8px;
}

.shared-folder-view .empty-state p {
  color: #999;
  font-size: 16px;
}

/* Light mode support for shared folder page */
[data-theme='light'] .shared-folder-view {
  background: #f5f5f5;
}

[data-theme='light'] .shared-folder-view .shared-folder-header {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme='light'] .shared-folder-view .shared-folder-header h1,
[data-theme='light'] .shared-folder-view .folder-title-section h1 {
  color: #1a1a1a;
}

[data-theme='light'] .shared-folder-view .shared-folder-description {
  color: #666;
}

[data-theme='light'] .shared-folder-view .shared-folder-owner {
  color: #999;
}

[data-theme='light'] .shared-folder-view .stat-value {
  color: #1a1a1a;
}

[data-theme='light'] .shared-folder-view .stat-label {
  color: #666;
}

[data-theme='light'] .shared-folder-view .subfolders-section h2,
[data-theme='light'] .shared-folder-view .decks-section h2 {
  color: #1a1a1a;
}

[data-theme='light'] .shared-folder-view .subfolder-card {
  background: #fff;
  border: 1px solid #ddd;
}

[data-theme='light'] .shared-folder-view .subfolder-card:hover {
  background: #f9f9f9;
  border-color: #4a9eff;
}

[data-theme='light'] .shared-folder-view .subfolder-card.selected {
  background: #f0f7ff;
  border-color: #4a9eff;
}

[data-theme='light'] .shared-folder-view .subfolder-info h3 {
  color: #1a1a1a;
}

[data-theme='light'] .shared-folder-view .subfolder-stats {
  color: #666;
}

[data-theme='light'] .shared-folder-view .decks-table {
  background: #fff;
  border: 1px solid #ddd;
}

[data-theme='light'] .shared-folder-view .decks-table thead {
  background: #f5f5f5;
}

[data-theme='light'] .shared-folder-view .decks-table th {
  color: #666;
}

[data-theme='light'] .shared-folder-view .decks-table td {
  color: #1a1a1a;
  border-top-color: #e8e8e8;
}

[data-theme='light'] .shared-folder-view .decks-table tbody tr:hover {
  background: #f9f9f9;
}

[data-theme='light'] .shared-folder-view .deck-name {
  color: #0066cc;
}

[data-theme='light'] .shared-folder-view .empty-state {
  background: #fff;
  border: 1px solid #ddd;
}

[data-theme='light'] .shared-folder-view .empty-state p {
  color: #666;
}

[data-theme='light'] .shared-folder-view .shared-folder-footer {
  border-top-color: #e8e8e8;
}

[data-theme='light'] .shared-folder-view .shared-folder-footer p {
  color: #666;
}

[data-theme='light'] .shared-folder-view .powered-by {
  color: #999;
}

.shared-folder-footer {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 16px;
  text-align: center;
  border-top: 1px solid #333;
}

.shared-folder-footer p {
  margin: 8px 0;
  color: #999;
  font-size: 14px;
}

.powered-by {
  font-size: 12px;
  color: #666;
}

@media (max-width: 768px) {
  .shared-folder-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .folder-stats {
    width: 100%;
    justify-content: space-around;
  }

  .subfolders-grid {
    grid-template-columns: 1fr;
  }

  .decks-table {
    overflow-x: auto;
  }

  .decks-table table {
    min-width: 600px;
  }
}
/* HomePage - Dramatic Minimal Dark Theme */
/* "Every breath of fog remembers a death" */

._homepage_1njes_4 {
  min-height: 100vh;
  background: radial-gradient(ellipse at center, #0a120a 0%, #000000 100%);
  position: relative;
  overflow-x: hidden;
  color: #8a9d8a;
}

/* Layered Fog - Living, breathing atmosphere */
._fogLayer_1njes_13 {
  position: fixed;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  pointer-events: none;
  transition: transform 0.3s ease-out;
  mix-blend-mode: screen;
}

._fogBack_1njes_24 {
  background: radial-gradient(
    ellipse 800px 600px at 30% 50%,
    rgba(34, 60, 34, 0.4) 0%,
    transparent 50%
  );
  animation: _breathe_1njes_1 20s ease-in-out infinite;
  z-index: 1;
}

._fogMid_1njes_34 {
  background: radial-gradient(
    ellipse 1000px 700px at 70% 40%,
    rgba(45, 65, 45, 0.3) 0%,
    transparent 50%
  );
  animation: _breathe_1njes_1 25s ease-in-out infinite reverse;
  animation-delay: -10s;
  z-index: 2;
}

._fogFront_1njes_45 {
  background: radial-gradient(
    ellipse 600px 800px at 50% 60%,
    rgba(56, 76, 56, 0.25) 0%,
    transparent 50%
  );
  animation: _breathe_1njes_1 30s ease-in-out infinite;
  animation-delay: -5s;
  z-index: 3;
}

@keyframes _breathe_1njes_1 {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* Vignette - Frame the darkness */
._vignette_1njes_69 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 4;
}

/* Hero Section - Dramatic entrance */
._heroSection_1njes_81 {
  position: relative;
  z-index: 10;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

._heroContent_1njes_92 {
  text-align: center;
  margin-bottom: 3rem;
  animation: _fadeInUp_1njes_1 1.5s ease-out;
}

@keyframes _fadeInUp_1njes_1 {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._siteTitle_1njes_109 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 5rem;
  font-weight: 300;
  color: #c8d5c8;
  text-transform: uppercase;
  letter-spacing: 12px;
  margin: 0;
  text-shadow:
    0 0 40px rgba(138, 157, 138, 0.5),
    0 0 80px rgba(138, 157, 138, 0.3);
  opacity: 0.95;
}

._titleUnderline_1njes_123 {
  width: 200px;
  height: 1px;
  background: linear-gradient(to right, transparent, #8a9d8a, transparent);
  margin: 2rem auto;
  opacity: 0.6;
}

._siteTagline_1njes_131 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  color: #6a7a6a;
  letter-spacing: 2px;
  margin: 0;
  opacity: 0.8;
}

/* Navigation Cards - Minimal gates */
._navGrid_1njes_143 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 900px;
  width: 100%;
  animation: _fadeInUp_1njes_1 1.5s ease-out 0.3s both;
}

._navCard_1njes_152 {
  position: relative;
  padding: 3rem 2rem;
  background: rgba(15, 25, 15, 0.6);
  border: 1px solid rgba(138, 157, 138, 0.2);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

._navCard_1njes_152::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(138, 157, 138, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

._navCard_1njes_152:hover {
  border-color: rgba(138, 157, 138, 0.6);
  background: rgba(20, 30, 20, 0.8);
  transform: translateY(-4px);
}

._navCard_1njes_152:hover::before {
  opacity: 1;
}

._navCard_1njes_152 h3 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: #c8d5c8;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
  text-align: center;
}

._navCard_1njes_152 p {
  font-size: 0.9rem;
  color: #6a7a6a;
  font-style: italic;
  margin: 0;
  letter-spacing: 1px;
  text-align: center;
}

._cardGlow_1njes_204 {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(138, 157, 138, 0.15) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

._navCard_1njes_152:hover ._cardGlow_1njes_204 {
  opacity: 1;
}

/* Featured Card in Fog */
._featuredCardContainer_1njes_221 {
  position: fixed;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  z-index: 3;
  width: 350px;
  height: 488px;
  pointer-events: none;
}

._featuredCard_1njes_221 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: _fadeInOut_1njes_1 7s ease-in-out forwards;
  filter: drop-shadow(0 0 30px rgba(138, 157, 138, 0.3));
  border-radius: 16px;
}

@keyframes _fadeInOut_1njes_1 {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  20% {
    opacity: 0.6;
    transform: scale(1);
  }
  80% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Content Sections */
._contentSections_1njes_262 {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem 2rem;
}

._section_1njes_270 {
  margin-bottom: 3rem;
}

._sectionTitle_1njes_274 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 2rem;
  font-weight: 300;
  color: #a8b5a8;
  text-transform: uppercase;
  letter-spacing: 6px;
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* Recent Decks - Minimal arsenal */
._recentDecks_1njes_287 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

._deckItem_1njes_295 {
  position: relative;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

._deckItem_1njes_295:hover {
  transform: translateY(-8px);
}

._deckImageContainer_1njes_305 {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  overflow: hidden;
  background: rgba(10, 18, 10, 0.8);
  border: 1px solid rgba(138, 157, 138, 0.2);
}

._deckImage_1njes_305 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

._deckItem_1njes_295:hover ._deckImage_1njes_305 {
  transform: scale(1.05);
}

._deckOverlay_1njes_329 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  opacity: 0.6;
  transition: opacity 0.4s ease;
}

._deckItem_1njes_295:hover ._deckOverlay_1njes_329 {
  opacity: 0.3;
}

._deckDetails_1njes_344 {
  padding: 1.5rem 0;
}

._deckName_1njes_348 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.3rem;
  font-weight: 300;
  color: #c8d5c8;
  letter-spacing: 2px;
  margin: 0 0 0.5rem 0;
}

._deckMeta_1njes_357 {
  font-size: 0.85rem;
  color: #6a7a6a;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Community Section - Dark and minimal */
._communitySection_1njes_365 {
  border-top: 1px solid rgba(138, 157, 138, 0.1);
  padding-top: 2rem;
}

._communityGrid_1njes_370 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

._communityCard_1njes_376 {
  padding: 1.5rem 1.25rem;
  background: rgba(15, 25, 15, 0.4);
  border: 1px solid rgba(138, 157, 138, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

._communityCard_1njes_376:hover {
  border-color: rgba(138, 157, 138, 0.3);
  background: rgba(20, 30, 20, 0.6);
}

._communityCard_1njes_376._disabled_1njes_388 {
  opacity: 0.5;
}

._communityCard_1njes_376._disabled_1njes_388:hover {
  border-color: rgba(138, 157, 138, 0.15);
  background: rgba(15, 25, 15, 0.4);
}

._communityTitle_1njes_397 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 300;
  color: #a8b5a8;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
}

._communityText_1njes_407 {
  font-size: 0.85rem;
  color: #7a8a7a;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  font-style: italic;
}

._linkButton_1njes_415 {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  background: transparent;
  border: 1px solid #8a9d8a;
  color: #a8b5a8;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

._linkButton_1njes_415:hover {
  background: rgba(138, 157, 138, 0.1);
  border-color: #a8b5a8;
  color: #c8d5c8;
  box-shadow: 0 0 20px rgba(138, 157, 138, 0.2);
}

._disabledButton_1njes_437 {
  opacity: 0.4;
  cursor: not-allowed;
}

._disabledButton_1njes_437:hover {
  background: transparent;
  border-color: #8a9d8a;
  color: #a8b5a8;
  box-shadow: none;
}

._communityCard_1njes_376 {
  padding: 3rem 2rem;
  background: rgba(15, 25, 15, 0.4);
  border: 1px solid rgba(138, 157, 138, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

._communityCard_1njes_376:hover {
  border-color: rgba(138, 157, 138, 0.3);
  background: rgba(20, 30, 20, 0.6);
}

._communityCard_1njes_376._disabled_1njes_388 {
  opacity: 0.5;
}

._communityCard_1njes_376._disabled_1njes_388:hover {
  border-color: rgba(138, 157, 138, 0.15);
  background: rgba(15, 25, 15, 0.4);
}

._communityTitle_1njes_397 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.3rem;
  font-weight: 300;
  color: #a8b5a8;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 1.5rem 0;
}

._communityText_1njes_407 {
  font-size: 0.95rem;
  color: #7a8a7a;
  line-height: 1.8;
  margin: 0 0 2rem 0;
  font-style: italic;
}

._linkButton_1njes_415 {
  display: inline-block;
  padding: 0.875rem 2.5rem;
  background: transparent;
  border: 1px solid #8a9d8a;
  color: #a8b5a8;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

._linkButton_1njes_415:hover {
  background: rgba(138, 157, 138, 0.1);
  border-color: #a8b5a8;
  color: #c8d5c8;
  box-shadow: 0 0 20px rgba(138, 157, 138, 0.2);
}

._disabledButton_1njes_437 {
  opacity: 0.4;
  cursor: not-allowed;
}

._disabledButton_1njes_437:hover {
  background: transparent;
  border-color: #8a9d8a;
  color: #a8b5a8;
  box-shadow: none;
}

/* Bottom fade */
._bottomFade_1njes_523 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, #000000 0%, transparent 100%);
  pointer-events: none;
  z-index: 9;
}

/* Responsive Design */
@media (max-width: 1200px) {
  ._featuredCardContainer_1njes_221 {
    display: none;
  }
}

@media (max-width: 768px) {
  ._siteTitle_1njes_109 {
    font-size: 3rem;
    letter-spacing: 6px;
  }

  ._siteTagline_1njes_131 {
    font-size: 0.95rem;
  }

  ._navGrid_1njes_143 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  ._navCard_1njes_152 {
    padding: 2rem 1.5rem;
  }

  ._recentDecks_1njes_287 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  ._communityGrid_1njes_370 {
    grid-template-columns: 1fr;
  }

  ._sectionTitle_1njes_274 {
    font-size: 1.5rem;
    letter-spacing: 4px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  ._fogLayer_1njes_13,
  ._navCard_1njes_152,
  ._deckItem_1njes_295,
  ._communityCard_1njes_376,
  ._heroContent_1njes_92 {
    animation: none;
    transition: none;
  }

  ._fogBack_1njes_24,
  ._fogMid_1njes_34,
  ._fogFront_1njes_45 {
    animation: none;
  }
}
._scryfallStatusBanner_bf30t_1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: _slideDown_bf30t_1 0.3s ease-out;
}

@keyframes _slideDown_bf30t_1 {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

._bannerContent_bf30t_24 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

._bannerIcon_bf30t_33 {
  font-size: 24px;
  flex-shrink: 0;
  animation: _pulse_bf30t_1 2s ease-in-out infinite;
}

@keyframes _pulse_bf30t_1 {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

._bannerMessage_bf30t_51 {
  flex: 1;
}

._bannerMessage_bf30t_51 strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

._bannerMessage_bf30t_51 p {
  margin: 0;
  font-size: 14px;
  opacity: 0.95;
  line-height: 1.4;
}

._bannerDismiss_bf30t_69 {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

._bannerDismiss_bf30t_69:hover {
  background: rgba(255, 255, 255, 0.3);
}

._bannerDismiss_bf30t_69:active {
  background: rgba(255, 255, 255, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
  ._bannerContent_bf30t_24 {
    padding: 10px 15px;
    gap: 10px;
  }

  ._bannerIcon_bf30t_33 {
    font-size: 20px;
  }

  ._bannerMessage_bf30t_51 strong {
    font-size: 14px;
  }

  ._bannerMessage_bf30t_51 p {
    font-size: 12px;
  }

  ._bannerDismiss_bf30t_69 {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
}
/* Store Page Styles */

._storePage_9g9jo_3 {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow: hidden;
}

._storeContent_9g9jo_10 {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 1.5rem;
  padding: 1.5rem;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
}

._storeSidebar_9g9jo_21 {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

._storeMain_9g9jo_31 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
._storeHeader_9g9jo_39 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 2px solid #e5e7eb;
  background: white;
}

._storeTitle_9g9jo_48 h1 {
  font-size: 2rem;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

._storeSubtitle_9g9jo_54 {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
}

._cartButton_9g9jo_60 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #3d5e3d;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  width: auto;
}

._cartButton_9g9jo_60:hover:not(:disabled) {
  background: #4a6f4a;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(61, 94, 61, 0.3);
}

._cartButton_9g9jo_60:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._cartInfo_9g9jo_87 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._cartText_9g9jo_93 {
  font-size: 0.875rem;
  font-weight: 600;
}

._cartCount_9g9jo_98 {
  background: #ef4444;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 700;
}

._cartTotal_9g9jo_106 {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Filters */
._storeFilters_9g9jo_112 {
  background: #f9fafb;
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._searchBox_9g9jo_121 {
  width: 100%;
}

._searchInput_9g9jo_125 {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  transition: border-color 0.2s;
}

._searchInput_9g9jo_125:focus {
  outline: none;
  border-color: #3b82f6;
}

._filterRow_9g9jo_139 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._filterLabel_9g9jo_145 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

._filterSelect_9g9jo_154 {
  padding: 0.5rem 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
  width: 100%;
}

._filterSelect_9g9jo_154:focus {
  outline: none;
  border-color: #3b82f6;
}

._foilCheckbox_9g9jo_170 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

._foilCheckbox_9g9jo_170 input[type='checkbox'] {
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
}

._colorIdentityFilter_9g9jo_190 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.875rem;
  flex-wrap: wrap;
}

._colorOption_9g9jo_202 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: background 0.2s;
}

._colorOption_9g9jo_202:hover {
  background: #f3f4f6;
}

._colorOption_9g9jo_202 input[type='checkbox'] {
  margin: 0;
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  vertical-align: middle;
}

._colorOption_9g9jo_202 input[type='checkbox']:focus {
  outline: none;
}

/* Scope to store page only */
._storePage_9g9jo_3 ._manaSymbol_9g9jo_231 {
  width: 1rem;
  height: 1rem;
  display: inline-block;
}

._clearFilters_9g9jo_237 {
  padding: 0.5rem 0.75rem;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
}

._clearFilters_9g9jo_237:hover {
  background: #dc2626;
}

/* Inventory Grid */
._inventoryScroll_9g9jo_255 {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 2rem 1rem 1rem;
}

._inventoryGrid_9g9jo_261 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  align-items: start;
}

._inventoryCard_9g9jo_268 {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
  display: block;
  height: fit-content;
}

._inventoryCard_9g9jo_268:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6;
}

._cardImageContainer_9g9jo_284 {
  position: relative;
  width: 100%;
  height: 240px;
  background: #f3f4f6;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  flex-shrink: 0;
}

._cardImage_9g9jo_284 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  border-radius: 8px 8px 0 0;
}

._rarityIndicator_9g9jo_305 {
  position: absolute;
  top: 28px;
  left: 8px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.5rem;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
  border: 2px solid white;
}

._rarityCommon_9g9jo_323 {
  background: #1f2937;
}

._rarityUncommon_9g9jo_327 {
  background: #9ca3af;
}

._rarityRare_9g9jo_331 {
  background: #d97706;
}

._rarityMythic_9g9jo_335 {
  background: #dc2626;
}

._raritySpecial_9g9jo_339 {
  background: #7c3aed;
}

._storePage_9g9jo_3 ._foilIndicator_9g9jo_343 {
  position: absolute;
  top: 48px;
  left: 12.9px;
  width: 9px;
  height: 9px;
  min-width: 9px;
  min-height: 9px;
  max-width: 9px;
  max-height: 9px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    #ff0000 0%,
    #ff7f00 16.67%,
    #ffff00 33.33%,
    #00ff00 50%,
    #0000ff 66.67%,
    #8b00ff 83.33%,
    #ff0000 100%
  );
  border: 1px solid #ffffff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.5),
    inset 0 0 3px rgba(255, 255, 255, 0.8);
  animation: _foilPulse_9g9jo_1 2s ease-in-out infinite;
  z-index: 2;
}

@keyframes _foilPulse_9g9jo_1 {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

._foilOverlay_9g9jo_384 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.4) 0%,
    rgba(255, 154, 0, 0.4) 10%,
    rgba(208, 222, 33, 0.4) 20%,
    rgba(79, 220, 74, 0.4) 30%,
    rgba(63, 218, 216, 0.4) 40%,
    rgba(47, 201, 226, 0.4) 50%,
    rgba(28, 127, 238, 0.4) 60%,
    rgba(95, 21, 242, 0.4) 70%,
    rgba(186, 12, 248, 0.4) 80%,
    rgba(251, 7, 217, 0.4) 90%,
    rgba(255, 0, 0, 0.4) 100%
  );
  background-size: 200% 200%;
  animation: _foilShimmer_9g9jo_1 3s linear infinite;
  opacity: 1;
  mix-blend-mode: screen;
  z-index: 1;
}

@keyframes _foilShimmer_9g9jo_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

._cardPriceBadge_9g9jo_424 {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  z-index: 3;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

._recentlyPulledBadge_9g9jo_439 {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

._cardInfo_9g9jo_453 {
  padding: 0.75rem;
  margin: 0;
}

._cardMeta_9g9jo_458 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
}

._cardSet_9g9jo_466 {
  color: #6b7280;
  font-weight: 500;
}

._cardRarity_9g9jo_471 {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.625rem;
}

._rarityCommon_9g9jo_323 {
  background: #9ca3af;
  color: white;
}
._rarityUncommon_9g9jo_327 {
  background: #6b7280;
  color: white;
}
._rarityRare_9g9jo_331 {
  background: #fbbf24;
  color: #78350f;
}
._rarityMythic_9g9jo_335 {
  background: #ef4444;
  color: white;
}
._raritySpecial_9g9jo_339 {
  background: #8b5cf6;
  color: white;
}

._cardCondition_9g9jo_500,
._cardStock_9g9jo_501 {
  font-size: 0.7rem;
  color: #6b7280;
  margin-bottom: 0.125rem;
}

._cardCondition_9g9jo_500 strong,
._cardStock_9g9jo_501 strong {
  color: #1f2937;
}

._storePage_9g9jo_3 ._cardActions_9g9jo_512 {
  padding: 0.5rem 0.75rem;
  margin: 0;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  height: auto;
}

._cardPrice_9g9jo_424 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #059669;
  flex-shrink: 0;
  margin: 0;
}

._addToCartBtn_9g9jo_533 {
  padding: 0.35rem 0.75rem;
  height: 2rem;
  background: #3d5e3d;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  max-width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

._addToCartBtn_9g9jo_533:hover:not(:disabled) {
  background: #2d4a2d;
}

._addToCartBtn_9g9jo_533:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._storePage_9g9jo_3 ._cartQuantityControls_9g9jo_562 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  padding: 0;
  border-radius: 6px;
  flex-shrink: 0;
  height: 2rem;
}

._storePage_9g9jo_3 ._qtyBtn_9g9jo_573 {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  background: #3d5e3d;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

._qtyBtn_9g9jo_573:hover:not(:disabled) {
  background: #2d4a2d;
}

._qtyBtn_9g9jo_573:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._qtyDisplay_9g9jo_601 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  min-width: 1.5rem;
  text-align: center;
  line-height: 2rem;
}

/* Loading and Error States */
._storeLoading_9g9jo_611,
._storeError_9g9jo_612 {
  text-align: center;
  padding: 4rem 2rem;
}

._loadingSpinner_9g9jo_617 {
  width: 3rem;
  height: 3rem;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: _spin_9g9jo_1 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes _spin_9g9jo_1 {
  to {
    transform: rotate(360deg);
  }
}

._storeError_9g9jo_612 h2 {
  color: #ef4444;
  margin-bottom: 1rem;
}

._storeError_9g9jo_612 button {
  padding: 0.75rem 1.5rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1rem;
}

._noResults_9g9jo_650 {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;
}

/* Responsive */
@media (max-width: 768px) {
  ._storePage_9g9jo_3 {
    padding: 1rem;
  }

  ._storeHeader_9g9jo_39 {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  ._cartButton_9g9jo_60 {
    width: 100%;
    justify-content: center;
  }

  ._filterRow_9g9jo_139 {
    flex-direction: column;
  }

  ._filterSelect_9g9jo_154,
  ._foilCheckbox_9g9jo_170 {
    width: 100%;
  }

  ._clearFilters_9g9jo_237 {
    width: 100%;
    margin-left: 0;
  }

  ._inventoryGrid_9g9jo_261 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }
}
/* Cart Page Styles */

._cart-page_gmbrr_3 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Header */
._cart-header_gmbrr_10 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e5e7eb;
}

._cart-header_gmbrr_10 h1 {
  font-size: 2rem;
  color: #1f2937;
  margin: 0;
}

._continue-shopping-link_gmbrr_25 {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

._continue-shopping-link_gmbrr_25:hover {
  color: #2563eb;
}

/* Empty Cart */
._cart-empty_gmbrr_40 {
  text-align: center;
  padding: 4rem 2rem;
}

._cart-empty_gmbrr_40 h1 {
  color: #1f2937;
  margin-bottom: 1rem;
}

._cart-empty_gmbrr_40 p {
  color: #6b7280;
  margin-bottom: 2rem;
}

._continue-shopping-btn_gmbrr_55 {
  padding: 0.75rem 2rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

._continue-shopping-btn_gmbrr_55:hover {
  background: #2563eb;
}

/* Cart Layout */
._cart-layout_gmbrr_72 {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
}

/* Cart Items */
._cart-items_gmbrr_79 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._cart-item_gmbrr_79 {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 100px 1fr auto auto auto;
  gap: 1.5rem;
  align-items: center;
  transition: box-shadow 0.2s;
  position: relative;
}

._cart-item_gmbrr_79:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

._cart-item-image_gmbrr_102 {
  position: relative;
  width: 100px;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}

._cart-item-image_gmbrr_102 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._foil-indicator_gmbrr_117 {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  padding: 0.125rem 0.5rem;
  border-radius: 8px;
  font-size: 0.75rem;
}

._cart-item-details_gmbrr_127 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._cart-item-details_gmbrr_127 h3 {
  font-size: 1.125rem;
  color: #1f2937;
  margin: 0;
}

._cart-item-meta_gmbrr_139 {
  font-size: 0.875rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._separator_gmbrr_147 {
  color: #d1d5db;
}

._foil-text_gmbrr_151 {
  color: #f59e0b;
  font-weight: 600;
}

._cart-item-price_gmbrr_156 {
  font-size: 0.875rem;
  color: #6b7280;
}

._cart-item-quantity_gmbrr_161 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

._cart-item-quantity_gmbrr_161 label {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  font-weight: 600;
}

._quantity-controls_gmbrr_175 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f3f4f6;
  padding: 0.5rem;
  border-radius: 8px;
}

._qty-btn_gmbrr_184 {
  width: 2rem;
  height: 2rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

._qty-btn_gmbrr_184:hover:not(:disabled) {
  background: #2563eb;
}

._qty-btn_gmbrr_184:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._qty-input_gmbrr_206 {
  width: 3rem;
  text-align: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

._stock-note_gmbrr_216 {
  font-size: 0.75rem;
  color: #6b7280;
}

._cart-item-total_gmbrr_221 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #059669;
  min-width: 100px;
  text-align: right;
}

._remove-item-btn_gmbrr_229 {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

._remove-item-btn_gmbrr_229:hover {
  background: #dc2626;
}

._cart-actions_gmbrr_252 {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
}

._clear-cart-btn_gmbrr_258 {
  padding: 0.5rem 1rem;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

._clear-cart-btn_gmbrr_258:hover {
  background: #dc2626;
}

/* Order Summary */
._order-summary_gmbrr_275 {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  height: fit-content;
  position: sticky;
  top: 2rem;
}

._order-summary_gmbrr_275 h2 {
  font-size: 1.5rem;
  color: #1f2937;
  margin: 0 0 1.5rem 0;
}

._summary-line_gmbrr_291 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  color: #6b7280;
}

._summary-divider_gmbrr_298 {
  height: 1px;
  background: #e5e7eb;
  margin: 1.5rem 0;
}

._summary-total_gmbrr_304 {
  display: flex;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1.5rem;
}

._checkout-disabled-notice_gmbrr_313 {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

._checkout-disabled-notice_gmbrr_313 strong {
  color: #92400e;
  display: block;
  margin-bottom: 0.5rem;
}

._checkout-disabled-notice_gmbrr_313 p {
  color: #78350f;
  margin: 0;
}

._checkout-btn_gmbrr_333 {
  width: 100%;
  padding: 1rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 1rem;
}

._checkout-btn_gmbrr_333:hover:not(:disabled) {
  background: #2563eb;
}

._checkout-btn_gmbrr_333:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._payment-icons_gmbrr_356 {
  text-align: center;
  padding: 1rem 0;
  border-top: 1px solid #e5e7eb;
}

._payment-note_gmbrr_362 {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

._payment-methods_gmbrr_369 {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.5rem;
}

._affiliate-section_gmbrr_376 {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}

._affiliate-section_gmbrr_376 h3 {
  font-size: 1rem;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

._affiliate-note_gmbrr_388 {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

._affiliate-btn_gmbrr_394 {
  width: 100%;
  padding: 0.75rem;
  background: #8b5cf6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

._affiliate-btn_gmbrr_394:hover:not(:disabled) {
  background: #7c3aed;
}

._affiliate-btn_gmbrr_394:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 1024px) {
  ._cart-layout_gmbrr_72 {
    grid-template-columns: 1fr;
  }

  ._order-summary_gmbrr_275 {
    position: static;
  }
}

@media (max-width: 768px) {
  ._cart-page_gmbrr_3 {
    padding: 1rem;
  }

  ._cart-header_gmbrr_10 {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  ._cart-item_gmbrr_79 {
    grid-template-columns: 80px 1fr;
    gap: 1rem;
  }

  ._cart-item-image_gmbrr_102 {
    width: 80px;
    height: 112px;
  }

  ._cart-item-details_gmbrr_127 {
    grid-column: 1 / -1;
  }

  ._cart-item-quantity_gmbrr_161,
  ._cart-item-total_gmbrr_221 {
    grid-column: 1 / -1;
    text-align: left;
  }

  ._cart-item-quantity_gmbrr_161 {
    align-items: flex-start;
  }

  ._remove-item-btn_gmbrr_229 {
    top: 0.5rem;
    right: 0.5rem;
  }
}
._container_1qpb5_1 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

._header_1qpb5_7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

._header_1qpb5_7 h1 {
  color: var(--text-primary);
  font-size: 2rem;
  margin: 0;
}

._addButton_1qpb5_20 {
  background-color: var(--success-color, #28a745);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._addButton_1qpb5_20:hover {
  background-color: var(--success-hover, #218838);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

._loading_1qpb5_38 {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
  font-size: 1.2rem;
}

/* Tabs */
._tabs_1qpb5_46 {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--border-color);
}

._tab_1qpb5_46 {
  background: none;
  border: none;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  position: relative;
  bottom: -2px;
}

._tab_1qpb5_46:hover {
  color: var(--text-primary);
  background-color: var(--hover-bg);
}

._tab_1qpb5_46._active_1qpb5_72 {
  color: var(--success-color, #28a745);
  border-bottom-color: var(--success-color, #28a745);
}

/* Content */
._content_1qpb5_78 {
  min-height: 400px;
}

._empty_1qpb5_82 {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

._empty_1qpb5_82 p {
  margin: 0.5rem 0;
  font-size: 1.1rem;
}

/* Friends List */
._friendsList_1qpb5_94,
._requestsList_1qpb5_95 {
  display: grid;
  gap: 1rem;
}

._friendCard_1qpb5_100,
._requestCard_1qpb5_101 {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}

._friendCard_1qpb5_100:hover,
._requestCard_1qpb5_101:hover {
  box-shadow: 0 4px 12px var(--shadow);
  border-color: var(--success-color);
}

._friendInfo_1qpb5_118 {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex: 1;
}

._friendAvatar_1qpb5_125 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success-color, #28a745), var(--primary-color, #007bff));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  flex-shrink: 0;
}

._friendDetails_1qpb5_139 {
  flex: 1;
}

._friendDetails_1qpb5_139 h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.2rem;
}

._email_1qpb5_149 {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0.25rem 0;
}

._date_1qpb5_155 {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0.25rem 0;
}

._message_1qpb5_161 {
  color: var(--text-primary);
  font-style: italic;
  margin: 0.5rem 0;
  padding: 0.5rem;
  background-color: var(--hover-bg);
  border-radius: 6px;
  border-left: 3px solid var(--success-color);
}

._pending_1qpb5_171 {
  color: var(--warning-color, #ffc107);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

/* Actions */
._friendActions_1qpb5_179,
._requestActions_1qpb5_180 {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

._viewButton_1qpb5_186,
._acceptButton_1qpb5_187 {
  background-color: var(--success-color, #28a745);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

._viewButton_1qpb5_186:hover,
._acceptButton_1qpb5_187:hover {
  background-color: var(--success-hover, #218838);
  transform: translateY(-1px);
}

._removeButton_1qpb5_204,
._rejectButton_1qpb5_205 {
  background-color: var(--danger-color, #dc3545);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

._removeButton_1qpb5_204:hover,
._rejectButton_1qpb5_205:hover {
  background-color: var(--danger-hover, #c82333);
  transform: translateY(-1px);
}

/* Modal */
._modalOverlay_1qpb5_223 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1.5rem;
}

._modal_1qpb5_223 {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  max-height: 90vh;
  overflow-y: auto;
}

._modal_1qpb5_223 h2 {
  margin: 0 0 1.5rem 0;
  color: var(--text-primary);
}

._modal_1qpb5_223 form {
  background-color: transparent;
  max-width: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  width: auto;
}

._formGroup_1qpb5_264 {
  margin-bottom: 1.5rem;
}

._formGroup_1qpb5_264 label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
}

._formGroup_1qpb5_264 input,
._formGroup_1qpb5_264 textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--input-bg);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

._formGroup_1qpb5_264 input:focus,
._formGroup_1qpb5_264 textarea:focus {
  outline: none;
  border-color: var(--success-color);
}

._formGroup_1qpb5_264 textarea {
  resize: vertical;
}

._modalActions_1qpb5_300 {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

._cancelButton_1qpb5_307 {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

._cancelButton_1qpb5_307:hover {
  background-color: var(--hover-bg);
}

._sendButton_1qpb5_322 {
  background-color: #4a6f4a;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

._sendButton_1qpb5_322:hover:not(:disabled) {
  background-color: #3d5c3d;
}

._sendButton_1qpb5_322:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Deck Suggestions */
._suggestionsList_1qpb5_343 {
  display: grid;
  gap: 1rem;
}

._suggestionCard_1qpb5_348 {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s;
}

._suggestionCard_1qpb5_348:hover {
  box-shadow: 0 4px 12px var(--shadow);
  border-color: var(--primary-color, #007bff);
}

._suggestionHeader_1qpb5_361 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

._suggesterAvatar_1qpb5_368 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color, #007bff), var(--success-color, #28a745));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  flex-shrink: 0;
}

._suggesterInfo_1qpb5_382 {
  flex: 1;
}

._suggesterInfo_1qpb5_382 h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.1rem;
}

._suggesterInfo_1qpb5_382 small {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

._suggestionActions_1qpb5_397 {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

._deckName_1qpb5_403 {
  font-weight: 600;
  color: var(--primary-color, #007bff);
  margin-bottom: 0.5rem;
}

._suggestionMessage_1qpb5_409 {
  color: var(--text-primary);
  font-style: italic;
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: var(--hover-bg);
  border-radius: 6px;
  border-left: 3px solid var(--primary-color, #007bff);
}

._suggestionChanges_1qpb5_419 {
  margin: 1rem 0;
}

._changeSection_1qpb5_423 {
  margin-bottom: 1rem;
}

._changeSection_1qpb5_423:last-child {
  margin-bottom: 0;
}

._addHeader_1qpb5_431 {
  color: var(--success-color, #28a745);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

._removeHeader_1qpb5_438 {
  color: var(--danger-color, #dc3545);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

._cardList_1qpb5_445 {
  list-style: none;
  padding: 0;
  margin: 0 0 0 1rem;
}

._cardList_1qpb5_445 li {
  color: var(--text-secondary);
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

._cardList_1qpb5_445 li::before {
  content: '•';
  margin-right: 0.5rem;
  color: var(--text-secondary);
}

._moreIndicator_1qpb5_463 {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.85rem;
  margin-left: 1rem;
}

._more_1qpb5_463 {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.85rem;
}

._viewDeckButton_1qpb5_476 {
  background-color: var(--primary-color, #007bff);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 1rem;
}

._viewDeckButton_1qpb5_476:hover {
  background-color: var(--primary-hover, #0056b3);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
  ._container_1qpb5_1 {
    padding: 1rem;
  }

  ._header_1qpb5_7 {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  ._friendCard_1qpb5_100,
  ._requestCard_1qpb5_101,
  ._suggestionCard_1qpb5_348 {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  ._friendActions_1qpb5_179,
  ._requestActions_1qpb5_180,
  ._suggestionActions_1qpb5_397 {
    flex-direction: column;
  }

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

  ._tabs_1qpb5_46 {
    overflow-x: auto;
  }

  ._tab_1qpb5_46 {
    flex-shrink: 0;
  }
}
._container_kcjbp_1 {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

._loading_kcjbp_7,
._error_kcjbp_8 {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
  font-size: 1.1rem;
}

._error_kcjbp_8 {
  color: #dc3545;
}

/* Header */
._header_kcjbp_20 {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--border-color);
}

._backButton_kcjbp_28 {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  transition: all 0.2s;
}

._backButton_kcjbp_28:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

._profileInfo_kcjbp_45 {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: space-between;
}

._avatar_kcjbp_52 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3d5e3d 0%, #5a7a5a 100%);
  color: #e8dcc0;
  font-size: 2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--border-color);
  flex-shrink: 0;
  overflow: hidden;
}

._avatarImage_kcjbp_68 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._profileDetails_kcjbp_74 h1 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.8rem;
}

._email_kcjbp_80 {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0 0 0.25rem 0;
}

._friendsSince_kcjbp_86 {
  color: var(--text-tertiary);
  font-size: 0.85rem;
  margin: 0;
}

._stats_kcjbp_92 {
  display: flex;
  gap: 2rem;
  margin-left: auto;
}

._stat_kcjbp_92 {
  text-align: center;
}

._statValue_kcjbp_102 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

._statLabel_kcjbp_109 {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tabs */
._tabs_kcjbp_117 {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--border-color);
}

._tab_kcjbp_117 {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

._tab_kcjbp_117:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

._tab_kcjbp_117._active_kcjbp_142 {
  color: #4a6f4a;
  border-bottom-color: #4a6f4a;
}

/* Content */
._content_kcjbp_148 {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  border: 1px solid var(--border-color);
  min-height: 400px;
}

/* Filters */
._viewToggle_kcjbp_157 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

._groupingSelect_kcjbp_166 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

._groupingSelect_kcjbp_166 label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

._groupingDropdown_kcjbp_178 {
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

._groupingDropdown_kcjbp_178:hover {
  background: var(--hover-bg);
  border-color: #4a6f4a;
}

._groupingDropdown_kcjbp_178:focus {
  outline: none;
  border-color: #4a6f4a;
}

._viewButton_kcjbp_199 {
  padding: 0.5rem 1.5rem;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

._viewButton_kcjbp_199:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

._viewButtonActive_kcjbp_215 {
  padding: 0.5rem 1.5rem;
  background: #4a6f4a;
  border: 1px solid #4a6f4a;
  border-radius: 6px;
  color: #e8dcc0;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
}

._filters_kcjbp_226 {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

._searchInput_kcjbp_233 {
  flex: 1;
  min-width: 250px;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 1rem;
  transition: border-color 0.2s;
}

._searchInput_kcjbp_233:focus {
  outline: none;
  border-color: #4a6f4a;
}

._filterSelect_kcjbp_250 {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.2s;
}

._filterSelect_kcjbp_250:focus {
  outline: none;
  border-color: #4a6f4a;
}

/* Dropdown Filters */
._dropdown_kcjbp_267 {
  position: relative;
  display: inline-block;
}

._dropdownButton_kcjbp_272 {
  padding: 0.5rem 1rem;
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  min-width: 120px;
  justify-content: space-between;
}

._dropdownButton_kcjbp_272:hover {
  background: var(--hover-bg);
  border-color: #4a6f4a;
}

._arrowDown_kcjbp_294 {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

._arrowUp_kcjbp_299 {
  font-size: 0.7rem;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

._dropdownContent_kcjbp_305 {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1rem;
  z-index: 1000;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: _slideDown_kcjbp_1 0.2s ease;
}

@keyframes _slideDown_kcjbp_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._checkboxGroup_kcjbp_330 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._checkboxLabel_kcjbp_336 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9rem;
  user-select: none;
}

._checkboxLabel_kcjbp_336 input[type='checkbox'] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #4a6f4a;
}

._checkboxLabel_kcjbp_336 span {
  text-transform: capitalize;
}

._checkboxLabel_kcjbp_336:hover {
  color: #4a6f4a;
}

/* Card Grid */
._cardGrid_kcjbp_362 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

._card_kcjbp_362 {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

._card_kcjbp_362:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px var(--shadow-strong);
  border-color: #4a6f4a;
}

._cardImageWrapper_kcjbp_383 {
  position: relative;
  width: 100%;
}

._cardImage_kcjbp_383 {
  width: 100%;
  display: block;
  aspect-ratio: 5/7;
  object-fit: cover;
}

._foilOverlay_kcjbp_395 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.4) 0%,
    rgba(255, 154, 0, 0.4) 10%,
    rgba(208, 222, 33, 0.4) 20%,
    rgba(79, 220, 74, 0.4) 30%,
    rgba(63, 218, 216, 0.4) 40%,
    rgba(47, 201, 226, 0.4) 50%,
    rgba(28, 127, 238, 0.4) 60%,
    rgba(95, 21, 242, 0.4) 70%,
    rgba(186, 12, 248, 0.4) 80%,
    rgba(251, 7, 217, 0.4) 90%,
    rgba(255, 0, 0, 0.4) 100%
  );
  background-size: 200% 200%;
  animation: _foilShimmer_kcjbp_1 3s linear infinite;
  opacity: 1;
  mix-blend-mode: screen;
  z-index: 1;
}

@keyframes _foilShimmer_kcjbp_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

._priorityOverlay_kcjbp_435 {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

._priorityBadgeOverlay_kcjbp_442 {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

._priorityBadgeOverlay_kcjbp_442._high_kcjbp_453 {
  background-color: #dc3545;
  color: #fff;
}

._priorityBadgeOverlay_kcjbp_442._medium_kcjbp_458 {
  background-color: #ffc107;
  color: #1a1a1a;
}

._priorityBadgeOverlay_kcjbp_442._low_kcjbp_463 {
  background-color: #28a745;
  color: #fff;
}

/* Wishlist match badge (heart emoji) - shows on their trade binder when I want it */
._wishlistMatchBadge_kcjbp_469 {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(220, 53, 69, 0.95);
  color: white;
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.5);
  z-index: 3;
  animation: _pulse_kcjbp_1 2s ease-in-out infinite;
  cursor: help;
  white-space: nowrap;
}

/* Trade match badge (handshake emoji) - shows on their wishlist when I have it */
._tradeMatchBadge_kcjbp_492 {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(40, 167, 69, 0.95);
  color: white;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.5);
  z-index: 3;
  animation: _pulse_kcjbp_1 2s ease-in-out infinite;
  cursor: help;
}

@keyframes _pulse_kcjbp_1 {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Gefeilliaid System™ Trade Button */
._gefeilliaidButton_kcjbp_522 {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(106, 17, 203, 0.4);
  z-index: 4;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

._card_kcjbp_362:hover ._gefeilliaidButton_kcjbp_522 {
  opacity: 1;
  transform: translateY(0);
}

._gefeilliaidButton_kcjbp_522:hover {
  background: linear-gradient(135deg, #7b1fd6 0%, #3685ff 100%);
  box-shadow: 0 6px 16px rgba(106, 17, 203, 0.6);
  transform: scale(1.05);
}

._gefeilliaidButton_kcjbp_522:active {
  transform: scale(0.98);
}

._cardPlaceholder_kcjbp_559 {
  width: 100%;
  aspect-ratio: 5/7;
  background: var(--hover-bg);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
}

._cardInfo_kcjbp_574 {
  padding: 1rem;
}

._cardName_kcjbp_578 {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

._cardSet_kcjbp_585 {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

._quantity_kcjbp_591 {
  display: inline-block;
  background: #4a6f4a;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

._notes_kcjbp_602 {
  margin-top: 0.75rem;
  padding: 0.5rem;
  background: var(--bg-primary);
  border-left: 3px solid #4a6f4a;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Empty State */
._empty_kcjbp_614 {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

._empty_kcjbp_614 p {
  font-size: 1.1rem;
  margin: 0;
}

/* Coming Soon */
._comingSoon_kcjbp_626 {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

._comingSoon_kcjbp_626 p {
  font-size: 1.2rem;
  margin: 0;
}

/* Wishlist Grid */
._wishlistGrid_kcjbp_638 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem 0;
}

._wishlistCard_kcjbp_645 {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.2s;
}

._wishlistCard_kcjbp_645:hover {
  border-color: #4a6f4a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

._wishlistCardInfo_kcjbp_658 h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.1rem;
}

._wishlistCardInfo_kcjbp_658 ._set_kcjbp_664 {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0.25rem 0;
}

._wishlistCardInfo_kcjbp_658 ._collector_kcjbp_670 {
  color: var(--text-tertiary);
  font-size: 0.8rem;
  margin: 0.25rem 0;
}

._wishlistCardInfo_kcjbp_658 ._quantity_kcjbp_591 {
  color: var(--text-primary);
  font-size: 0.9rem;
  margin: 0.5rem 0;
  font-weight: 500;
}

._priority_kcjbp_435 {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

._priority_kcjbp_435._high_kcjbp_453 {
  background-color: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

._priority_kcjbp_435._medium_kcjbp_458 {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

._priority_kcjbp_435._low_kcjbp_463 {
  background-color: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

._wishlistCardInfo_kcjbp_658 ._notes_kcjbp_602 {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}

/* List View */
._listView_kcjbp_718 {
  overflow-x: auto;
}

._listTable_kcjbp_722 {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
}

._listTable_kcjbp_722 thead {
  background: var(--hover-bg);
  border-bottom: 2px solid var(--border-color);
}

._listTable_kcjbp_722 th {
  padding: 1rem;
  text-align: left;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._listTable_kcjbp_722 tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}

._listTable_kcjbp_722 tbody tr:hover {
  background: var(--hover-bg);
}

._listTable_kcjbp_722 td {
  padding: 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

._listTable_kcjbp_722 ._cardNameCell_kcjbp_760 {
  color: var(--text-primary);
  font-weight: 500;
}

._listTable_kcjbp_722 ._notesCell_kcjbp_765 {
  color: var(--text-tertiary);
  font-style: italic;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._foilCell_kcjbp_774 {
  text-align: center;
}

._foilBadge_kcjbp_778 {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1a1a;
  font-weight: 700;
  border-radius: 4px;
  font-size: 0.85rem;
}

._priorityBadge_kcjbp_442 {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

._priorityBadge_kcjbp_442._high_kcjbp_453 {
  background-color: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

._priorityBadge_kcjbp_442._medium_kcjbp_458 {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

._priorityBadge_kcjbp_442._low_kcjbp_463 {
  background-color: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

/* Responsive */
@media (max-width: 768px) {
  ._container_kcjbp_1 {
    padding: 1rem;
  }

  ._header_kcjbp_20 {
    padding: 1.5rem;
  }

  ._profileInfo_kcjbp_45 {
    flex-direction: column;
    text-align: center;
  }

  ._stats_kcjbp_92 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._tabs_kcjbp_117 {
    overflow-x: auto;
  }

  ._tab_kcjbp_117 {
    white-space: nowrap;
  }

  ._filters_kcjbp_226 {
    flex-direction: column;
  }

  ._searchInput_kcjbp_233 {
    min-width: 100%;
  }

  ._cardGrid_kcjbp_362 {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }
}

/* Group Sections */
._group_kcjbp_166 {
  margin-bottom: 2rem;
}

._groupHeader_kcjbp_861 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
}
._container_t8iow_1 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

._header_t8iow_7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

._header_t8iow_7 h1 {
  color: var(--text-primary);
  font-size: 2rem;
  margin: 0;
}

._subtitle_t8iow_20 {
  color: var(--text-secondary);
  margin: 0.5rem 0 0 0;
  font-size: 1rem;
}

._addButton_t8iow_26 {
  background-color: var(--success-color, #28a745);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._addButton_t8iow_26:hover {
  background-color: var(--success-hover, #218838);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

._loading_t8iow_44 {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
  font-size: 1.2rem;
}

/* View Toggle */
._viewToggle_t8iow_52 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

._groupingSelect_t8iow_61 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

._groupingSelect_t8iow_61 label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

._groupingDropdown_t8iow_73 {
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

._groupingDropdown_t8iow_73:hover {
  background: var(--hover-bg);
  border-color: #4a6f4a;
}

._groupingDropdown_t8iow_73:focus {
  outline: none;
  border-color: #4a6f4a;
}

._viewButton_t8iow_94 {
  padding: 0.5rem 1.5rem;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

._viewButton_t8iow_94:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

._viewButtonActive_t8iow_110 {
  padding: 0.5rem 1.5rem;
  background: #4a6f4a;
  border: 1px solid #4a6f4a;
  border-radius: 6px;
  color: #e8dcc0;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Filters */
._filters_t8iow_122 {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

._searchInput_t8iow_129 {
  flex: 1;
  min-width: 250px;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 1rem;
  transition: border-color 0.2s;
}

._searchInput_t8iow_129:focus {
  outline: none;
  border-color: #4a6f4a;
}

/* Dropdown Filters */
._dropdown_t8iow_147 {
  position: relative;
  display: inline-block;
}

._dropdownButton_t8iow_152 {
  padding: 0.5rem 1rem;
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  min-width: 120px;
  justify-content: space-between;
}

._dropdownButton_t8iow_152:hover {
  background: var(--hover-bg);
  border-color: #4a6f4a;
}

._arrowDown_t8iow_174 {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

._arrowUp_t8iow_179 {
  font-size: 0.7rem;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

._dropdownContent_t8iow_185 {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1rem;
  z-index: 1000;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: _slideDown_t8iow_1 0.2s ease;
}

@keyframes _slideDown_t8iow_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._checkboxGroup_t8iow_210 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._checkboxLabel_t8iow_216 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9rem;
  user-select: none;
}

._checkboxLabel_t8iow_216 input[type='checkbox'] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #4a6f4a;
}

._checkboxLabel_t8iow_216 span {
  text-transform: capitalize;
}

._checkboxLabel_t8iow_216:hover {
  color: #4a6f4a;
}

/* Group Sections */
._groupSection_t8iow_242 {
  margin-bottom: 2rem;
}

._groupHeader_t8iow_246 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
}

._groupCount_t8iow_258 {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Card Grid */
._cardGrid_t8iow_265 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

._card_t8iow_265 {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

._card_t8iow_265:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px var(--shadow-strong);
  border-color: #4a6f4a;
}

._cardImageWrapper_t8iow_286 {
  position: relative;
  width: 100%;
}

._cardImage_t8iow_286 {
  width: 100%;
  display: block;
  aspect-ratio: 5/7;
  object-fit: cover;
}

._foilOverlay_t8iow_298 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.4) 0%,
    rgba(255, 154, 0, 0.4) 10%,
    rgba(208, 222, 33, 0.4) 20%,
    rgba(79, 220, 74, 0.4) 30%,
    rgba(63, 218, 216, 0.4) 40%,
    rgba(47, 201, 226, 0.4) 50%,
    rgba(28, 127, 238, 0.4) 60%,
    rgba(95, 21, 242, 0.4) 70%,
    rgba(186, 12, 248, 0.4) 80%,
    rgba(251, 7, 217, 0.4) 90%,
    rgba(255, 0, 0, 0.4) 100%
  );
  background-size: 200% 200%;
  animation: _foilShimmer_t8iow_1 3s linear infinite;
  opacity: 1;
  mix-blend-mode: screen;
  z-index: 1;
}

@keyframes _foilShimmer_t8iow_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

._priorityOverlay_t8iow_338 {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

._priorityBadgeOverlay_t8iow_345 {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
  border: none;
  font-family: inherit;
}

._priorityBadgeOverlay_t8iow_345._high_t8iow_358 {
  background-color: #dc3545;
  color: #fff;
}

._priorityBadgeOverlay_t8iow_345._medium_t8iow_363 {
  background-color: #ffc107;
  color: #1a1a1a;
}

._priorityBadgeOverlay_t8iow_345._low_t8iow_368 {
  background-color: #28a745;
  color: #fff;
}

._removeButtonOverlay_t8iow_373 {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 3;
  opacity: 0;
}

._card_t8iow_265:hover ._removeButtonOverlay_t8iow_373 {
  opacity: 1;
}

._removeButtonOverlay_t8iow_373:hover {
  background: #c82333;
  transform: scale(1.1);
}

/* Quantity overlay controls (top left stack) */
._quantityOverlay_t8iow_405 {
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  grid-template-columns: 16px 16px;
  grid-template-rows: 24px 16px 16px;
  gap: 2px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s;
}

._card_t8iow_265:hover ._quantityOverlay_t8iow_405 {
  opacity: 1;
}

._quantityCircle_t8iow_422 {
  grid-column: 1 / 3;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

._quantityButton_t8iow_438 {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  outline: none;
}

._quantityButton_t8iow_438:hover {
  background: rgba(0, 0, 0, 1);
  border-color: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

._quantityButton_t8iow_438:focus {
  outline: none;
}

._quantityButton_t8iow_438:active {
  outline: none;
}

._collectionIndicator_t8iow_474 {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

._collectionIndicator_t8iow_474[data-status='exact-match'] {
  background-color: #22c55e; /* Green - exact match */
}

._collectionIndicator_t8iow_474[data-status='different-version'] {
  background-color: #eab308; /* Yellow - different printing */
}

._collectionIndicator_t8iow_474[data-status='not-owned'],
._collectionIndicator_t8iow_474[data-status='not-collected'] {
  background-color: #ef4444; /* Red - not in collection */
}

._foilToggleButton_t8iow_498 {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  outline: none;
}

._foilToggleButton_t8iow_498:hover {
  border-color: rgba(255, 255, 255, 1);
}

._foilToggleButton_t8iow_498:focus {
  outline: none;
}

._foilToggleButton_t8iow_498:active {
  outline: none;
}

._foilToggleButton_t8iow_498._foilActive_t8iow_531 {
  background: linear-gradient(
    135deg,
    #b87a7a,
    #b89a7a,
    #b8b87a,
    #7ab87a,
    #7a9ab8,
    #8a7ab8,
    #b87ab8
  );
  background-size: 200% 200%;
  animation: _rainbow_t8iow_1 3s ease infinite;
}

@keyframes _rainbow_t8iow_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Price badge (bottom left) */
._priceBadge_t8iow_559 {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s;
}

._card_t8iow_265:hover ._priceBadge_t8iow_559 {
  opacity: 1;
}

._cardPlaceholder_t8iow_579 {
  width: 100%;
  aspect-ratio: 5/7;
  background: var(--hover-bg);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
}

._priority_t8iow_338 {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

._priority_t8iow_338._high_t8iow_358 {
  background-color: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

._priority_t8iow_338._medium_t8iow_363 {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

._priority_t8iow_338._low_t8iow_368 {
  background-color: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

._clickablePriority_t8iow_620 {
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
}

._clickablePriority_t8iow_620:hover {
  transform: scale(1.05);
  opacity: 0.85;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

._clickablePriority_t8iow_620:active {
  transform: scale(0.95);
}

/* List View */
._listView_t8iow_638 {
  overflow-x: auto;
}

._listTable_t8iow_642 {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
}

._listTable_t8iow_642 thead {
  background: var(--hover-bg);
  border-bottom: 2px solid var(--border-color);
}

._listTable_t8iow_642 th {
  padding: 1rem;
  text-align: left;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._listTable_t8iow_642 tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}

._listTable_t8iow_642 tbody tr:hover {
  background: var(--hover-bg);
}

._listTable_t8iow_642 td {
  padding: 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

._listTable_t8iow_642 ._cardNameCell_t8iow_680 {
  color: var(--text-primary);
  font-weight: 500;
}

._listTable_t8iow_642 ._notesCell_t8iow_685 {
  color: var(--text-tertiary);
  font-style: italic;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._foilCell_t8iow_694 {
  text-align: center;
}

._foilBadge_t8iow_698 {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-weight: 700;
  border-radius: 4px;
  font-size: 0.85rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

._foilBadge_t8iow_698._foilActive_t8iow_531 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1a1a;
}

._foilBadge_t8iow_698._foilInactive_t8iow_718 {
  background: rgba(156, 163, 175, 0.2);
  color: rgba(156, 163, 175, 0.6);
}

._foilBadge_t8iow_698:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

._priorityBadge_t8iow_345 {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

._priorityBadge_t8iow_345._high_t8iow_358 {
  background-color: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

._priorityBadge_t8iow_345._medium_t8iow_363 {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

._priorityBadge_t8iow_345._low_t8iow_368 {
  background-color: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

._removeButton_t8iow_373 {
  padding: 0.4rem 0.8rem;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

._removeButton_t8iow_373:hover {
  background: #c82333;
}

/* Empty State */
._empty_t8iow_768 {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

._empty_t8iow_768 p {
  font-size: 1.1rem;
  margin: 0.5rem 0;
}

/* Modal */
._modalOverlay_t8iow_780 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

._modal_t8iow_780 {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

._modal_t8iow_780 h2 {
  margin: 0 0 1.5rem 0;
  color: var(--text-primary);
  font-size: 1.5rem;
}

._formGroup_t8iow_811 {
  margin-bottom: 1.5rem;
  position: relative;
}

._formGroup_t8iow_811 label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.95rem;
}

._input_t8iow_824,
._select_t8iow_825,
._textarea_t8iow_826 {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s;
}

._input_t8iow_824:focus,
._select_t8iow_825:focus,
._textarea_t8iow_826:focus {
  outline: none;
  border-color: #4a6f4a;
}

._textarea_t8iow_826 {
  resize: vertical;
  min-height: 80px;
}

._searching_t8iow_850 {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.5rem;
  font-style: italic;
}

._searchResults_t8iow_857 {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-top: 0.5rem;
  background: var(--bg-primary);
}

._searchResult_t8iow_857 {
  padding: 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}

._searchResult_t8iow_857:last-child {
  border-bottom: none;
}

._searchResult_t8iow_857:hover {
  background: var(--hover-bg);
}

._resultInfo_t8iow_881 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._resultInfo_t8iow_881 strong {
  color: var(--text-primary);
  font-size: 1rem;
}

._resultSet_t8iow_892 {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

._selectedCard_t8iow_897 {
  padding: 1rem;
  background: var(--hover-bg);
  border: 1px solid #4a6f4a;
  border-radius: 6px;
  margin-bottom: 1rem;
}

._selectedCard_t8iow_897 p {
  margin: 0.25rem 0;
  color: var(--text-primary);
}

._cardSet_t8iow_910 {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

._modalActions_t8iow_915 {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

._cancelButton_t8iow_922 {
  padding: 0.75rem 1.5rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

._cancelButton_t8iow_922:hover {
  background: var(--hover-bg);
}

._addButtonModal_t8iow_937 {
  padding: 0.75rem 1.5rem;
  background: #4a6f4a;
  color: #e8dcc0;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._addButtonModal_t8iow_937:hover:not(:disabled) {
  background: #3d5e3d;
}

._addButtonModal_t8iow_937:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
  ._container_t8iow_1 {
    padding: 1rem;
  }

  ._header_t8iow_7 {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  ._filters_t8iow_122 {
    flex-direction: column;
  }

  ._searchInput_t8iow_129 {
    min-width: 100%;
  }

  ._cardGrid_t8iow_265 {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }

  ._viewToggle_t8iow_52 {
    flex-wrap: wrap;
  }

  ._groupingSelect_t8iow_61 {
    width: 100%;
    margin-left: 0;
  }

  ._modal_t8iow_780 {
    padding: 1.5rem;
  }
}
._container_1kwyq_1 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
  min-height: 100vh;
  background: #1a1a1a;
  color: #fff;
}

._header_1kwyq_10 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

._header_1kwyq_10 h1 {
  margin: 0 0 8px 0;
  font-size: 2rem;
  font-weight: 700;
  color: #ffcc00;
}

._subtitle_1kwyq_24 {
  color: #9e9e9e;
  margin: 0;
  font-size: 0.95rem;
}

._backButton_1kwyq_30 {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid #444;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s;
}

._backButton_1kwyq_30:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #666;
}

._loading_1kwyq_46,
._empty_1kwyq_47 {
  text-align: center;
  padding: 60px 20px;
  color: #9e9e9e;
}

._spinner_1kwyq_53 {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border: 3px solid rgba(255, 204, 0, 0.1);
  border-top-color: #ffcc00;
  border-radius: 50%;
  animation: _spin_1kwyq_53 1s linear infinite;
}

@keyframes _spin_1kwyq_53 {
  to {
    transform: rotate(360deg);
  }
}

/* Warning Box */
._warning_1kwyq_70 {
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

._warning_1kwyq_70 strong {
  display: block;
  color: #ff9800;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

._warning_1kwyq_70 p {
  color: #ccc;
  margin: 0 0 16px 0;
}

/* Toolbar */
._toolbar_1kwyq_91 {
  background: #1a1a1a;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

._filters_1kwyq_103 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  flex: 1;
}

._select_1kwyq_111 {
  padding: 10px 14px;
  background: #2a2a2a;
  border: 1px solid #444;
  color: #fff;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

._select_1kwyq_111:hover {
  border-color: #666;
}

._select_1kwyq_111:focus {
  outline: none;
  border-color: #ffcc00;
}

._priceInput_1kwyq_131 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._priceInput_1kwyq_131 label {
  font-size: 0.85rem;
  color: #9e9e9e;
}

._pricingGroup_1kwyq_142 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

._priceInputInline_1kwyq_149 {
  display: flex;
  gap: 8px;
  align-items: center;
}

._checkboxLabel_1kwyq_155 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: #fff;
  cursor: pointer;
  user-select: none;
  padding: 10px 14px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  transition: all 0.2s ease;
}

._checkboxLabel_1kwyq_155:hover {
  border-color: #666;
}

._roundingCheckbox_1kwyq_174,
._checkboxLabel_1kwyq_155 input[type='checkbox'] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
  accent-color: #ffcc00;
  margin: 0;
  flex-shrink: 0;
  opacity: 1;
  appearance: auto;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  position: relative;
  border: 2px solid #666;
  border-radius: 4px;
  background: #1a1a1a;
}

._checkboxLabel_1kwyq_155 span {
  white-space: nowrap;
}

[data-theme='light'] ._checkboxLabel_1kwyq_155 {
  color: #212529;
  background: #ffffff;
  border-color: #dee2e6;
}

[data-theme='light'] ._checkboxLabel_1kwyq_155:hover {
  border-color: #adb5bd;
}

[data-theme='light'] ._roundingCheckbox_1kwyq_174,
[data-theme='light'] ._checkboxLabel_1kwyq_155 input[type='checkbox'] {
  accent-color: #2d5e2d;
  border-color: #ccc;
  background: #fff;
}

._input_1kwyq_215 {
  padding: 10px 14px;
  background: #2a2a2a;
  border: 1px solid #444;
  color: #fff;
  border-radius: 6px;
  font-size: 0.95rem;
  min-width: 200px;
  flex: 1;
  transition: all 0.2s;
}

._input_1kwyq_215:hover {
  border-color: #666;
}

._input_1kwyq_215:focus {
  outline: none;
  border-color: #ffcc00;
}

._actions_1kwyq_236 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

._selectAllButton_1kwyq_242,
._pushButton_1kwyq_243,
._primaryButton_1kwyq_244,
._secondaryButton_1kwyq_245 {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._selectAllButton_1kwyq_242 {
  background: transparent;
  border: 1px solid #444;
  color: #fff;
}

._selectAllButton_1kwyq_242:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #666;
}

._pushButton_1kwyq_243 {
  background: #ffcc00;
  color: #000;
}

._pushButton_1kwyq_243:hover:not(:disabled) {
  background: #ffd700;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
}

._pushButton_1kwyq_243:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

._updatePriceButton_1kwyq_283 {
  background: #2196f3;
  color: #fff;
}

._updatePriceButton_1kwyq_283:hover:not(:disabled) {
  background: #1976d2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

._updatePriceButton_1kwyq_283:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

._deallocateButton_1kwyq_300 {
  background: #f44336;
  color: #fff;
}

._deallocateButton_1kwyq_300:hover:not(:disabled) {
  background: #d32f2f;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

._deallocateButton_1kwyq_300:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

._allocatedNote_1kwyq_317 {
  padding: 10px 20px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 6px;
  color: #4caf50;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

._primaryButton_1kwyq_244 {
  background: #ffcc00;
  color: #000;
}

._primaryButton_1kwyq_244:hover {
  background: #ffd700;
}

._secondaryButton_1kwyq_245 {
  background: transparent;
  border: 1px solid #444;
  color: #fff;
}

._secondaryButton_1kwyq_245:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #666;
}

/* Collection Grid */
._collection_1kwyq_350 {
  margin-top: 30px;
}

._grid_1kwyq_354 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

._card_1kwyq_360 {
  background: #1a1a1a;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

._card_1kwyq_360:hover {
  border-color: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

._card_1kwyq_360._selected_1kwyq_376 {
  border-color: #ffcc00;
  background: rgba(255, 204, 0, 0.05);
}

._card_1kwyq_360._allocated_1kwyq_317 {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.03);
}

._card_1kwyq_360._allocated_1kwyq_317._selected_1kwyq_376 {
  border-color: #ffcc00;
  background: rgba(255, 204, 0, 0.05);
}

._cardCheckbox_1kwyq_391 {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

._cardCheckbox_1kwyq_391 input[type='checkbox'] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #ffcc00;
}

._shopifyBadge_1kwyq_405 {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 28px;
  height: 32px;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 1;
}

._shopifyBadge_1kwyq_405 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

._card_1kwyq_360:hover ._shopifyBadge_1kwyq_405 {
  opacity: 1;
}

._cardInfo_1kwyq_427 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._cardName_1kwyq_433 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 32px;
}

._foilBadge_1kwyq_443 {
  background: linear-gradient(135deg, #ffd700, #ffcc00, #ff8c00);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

._cardDetails_1kwyq_452 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: #9e9e9e;
}

._quantity_1kwyq_460 {
  font-size: 0.9rem;
  color: #4caf50;
  font-weight: 600;
}

._marketPrice_1kwyq_466 {
  font-size: 0.95rem;
  color: #4caf50;
  font-weight: 600;
  padding: 4px 0;
}

[data-theme='light'] ._marketPrice_1kwyq_466 {
  color: #2e7d32;
}

._calculatedPrice_1kwyq_477 {
  font-size: 0.95rem;
  color: #3b82f6;
  font-weight: 600;
  padding: 4px 0;
}

[data-theme='light'] ._calculatedPrice_1kwyq_477 {
  color: #1d4ed8;
}

._pricingHint_1kwyq_488 {
  font-size: 0.75rem;
  color: #9e9e9e;
  font-weight: 400;
}

[data-theme='light'] ._pricingHint_1kwyq_488 {
  color: #6c757d;
}

._sku_1kwyq_498 {
  font-size: 0.8rem;
  color: #666;
  font-family: 'Courier New', monospace;
}

/* Light Mode Overrides */
[data-theme='light'] ._container_1kwyq_1 {
  background: #f5f5f5;
  color: #212529;
}

[data-theme='light'] ._header_1kwyq_10 h1 {
  color: #2d5e2d;
}

[data-theme='light'] ._subtitle_1kwyq_24 {
  color: #6c757d;
}

[data-theme='light'] ._backButton_1kwyq_30 {
  background: #ffffff;
  border-color: #dee2e6;
  color: #212529;
}

[data-theme='light'] ._backButton_1kwyq_30:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

[data-theme='light'] ._loading_1kwyq_46,
[data-theme='light'] ._empty_1kwyq_47 {
  color: #6c757d;
}

[data-theme='light'] ._spinner_1kwyq_53 {
  border-color: rgba(45, 94, 45, 0.1);
  border-top-color: #2d5e2d;
}

[data-theme='light'] ._warning_1kwyq_70 {
  background: rgba(255, 152, 0, 0.1);
  border-color: rgba(255, 152, 0, 0.3);
}

[data-theme='light'] ._warning_1kwyq_70 strong {
  color: #e65100;
}

[data-theme='light'] ._warning_1kwyq_70 p {
  color: #424242;
}

[data-theme='light'] ._toolbar_1kwyq_91 {
  background: #ffffff;
  border: 1px solid #dee2e6;
}

[data-theme='light'] ._select_1kwyq_111 {
  background: #ffffff;
  border-color: #ced4da;
  color: #212529;
}

[data-theme='light'] ._select_1kwyq_111:hover {
  border-color: #adb5bd;
}

[data-theme='light'] ._select_1kwyq_111:focus {
  border-color: #2d5e2d;
}

[data-theme='light'] ._priceInput_1kwyq_131 label {
  color: #6c757d;
}

[data-theme='light'] ._input_1kwyq_215 {
  background: #ffffff;
  border-color: #ced4da;
  color: #212529;
}

[data-theme='light'] ._input_1kwyq_215:hover {
  border-color: #adb5bd;
}

[data-theme='light'] ._input_1kwyq_215:focus {
  border-color: #2d5e2d;
}

[data-theme='light'] ._selectAllButton_1kwyq_242 {
  background: #ffffff;
  border-color: #dee2e6;
  color: #212529;
}

[data-theme='light'] ._selectAllButton_1kwyq_242:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

[data-theme='light'] ._pushButton_1kwyq_243 {
  background: #2d5e2d;
  color: #ffffff;
}

[data-theme='light'] ._pushButton_1kwyq_243:hover:not(:disabled) {
  background: #3d6e3d;
  box-shadow: 0 4px 12px rgba(45, 94, 45, 0.3);
}

[data-theme='light'] ._updatePriceButton_1kwyq_283 {
  background: #1976d2;
  color: #ffffff;
}

[data-theme='light'] ._updatePriceButton_1kwyq_283:hover:not(:disabled) {
  background: #1565c0;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

[data-theme='light'] ._deallocateButton_1kwyq_300 {
  background: #d32f2f;
  color: #ffffff;
}

[data-theme='light'] ._deallocateButton_1kwyq_300:hover:not(:disabled) {
  background: #c62828;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}

[data-theme='light'] ._allocatedNote_1kwyq_317 {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.4);
  color: #2e7d32;
}

[data-theme='light'] ._primaryButton_1kwyq_244 {
  background: #2d5e2d;
  color: #ffffff;
}

[data-theme='light'] ._primaryButton_1kwyq_244:hover {
  background: #3d6e3d;
}

[data-theme='light'] ._secondaryButton_1kwyq_245 {
  background: #ffffff;
  border-color: #dee2e6;
  color: #212529;
}

[data-theme='light'] ._secondaryButton_1kwyq_245:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

[data-theme='light'] ._card_1kwyq_360 {
  background: #ffffff;
  border-color: #dee2e6;
}

[data-theme='light'] ._card_1kwyq_360:hover {
  border-color: #adb5bd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme='light'] ._card_1kwyq_360._selected_1kwyq_376 {
  border-color: #2d5e2d;
  background: rgba(45, 94, 45, 0.05);
}

[data-theme='light'] ._card_1kwyq_360._allocated_1kwyq_317 {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.05);
}

[data-theme='light'] ._card_1kwyq_360._allocated_1kwyq_317._selected_1kwyq_376 {
  border-color: #2d5e2d;
  background: rgba(45, 94, 45, 0.05);
}

[data-theme='light'] ._checkbox_1kwyq_155 input[type='checkbox'] {
  accent-color: #2d5e2d;
}

[data-theme='light'] ._cardName_1kwyq_433 {
  color: #212529;
}

[data-theme='light'] ._foilBadge_1kwyq_443 {
  background: linear-gradient(135deg, #ffd700, #ffcc00, #ff8c00);
}

[data-theme='light'] ._cardDetails_1kwyq_452 {
  color: #6c757d;
}

[data-theme='light'] ._quantity_1kwyq_460 {
  color: #2e7d32;
}

[data-theme='light'] ._sku_1kwyq_498 {
  color: #9e9e9e;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  ._container_1kwyq_1 {
    padding: 20px 12px;
  }

  ._header_1kwyq_10 {
    flex-direction: column;
    gap: 16px;
  }

  ._header_1kwyq_10 h1 {
    font-size: 1.5rem;
  }

  ._backButton_1kwyq_30 {
    width: 100%;
  }

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

  ._filters_1kwyq_103 {
    flex-direction: column;
  }

  ._select_1kwyq_111,
  ._input_1kwyq_215 {
    width: 100%;
  }

  ._actions_1kwyq_236 {
    flex-direction: column;
  }

  ._selectAllButton_1kwyq_242,
  ._pushButton_1kwyq_243 {
    width: 100%;
  }

  ._grid_1kwyq_354 {
    grid-template-columns: 1fr;
  }
}
._container_1ah01_1 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

._header_1ah01_7 {
  margin-bottom: 40px;
}

._header_1ah01_7 h1 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}

._subtitle_1ah01_18 {
  font-size: 16px;
  color: #9ca3af;
  margin: 0;
}

._loading_1ah01_24 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 20px;
  color: #fff;
}

._spinner_1ah01_34 {
  width: 40px;
  height: 40px;
  border: 4px solid #333;
  border-top-color: #ffcc00;
  border-radius: 50%;
  animation: _spin_1ah01_34 1s linear infinite;
}

@keyframes _spin_1ah01_34 {
  to {
    transform: rotate(360deg);
  }
}

._error_1ah01_49 {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
}

._error_1ah01_49 h2 {
  color: #ef4444;
  margin: 0 0 12px 0;
}

._error_1ah01_49 p {
  color: #9ca3af;
  margin: 0 0 24px 0;
}

._error_1ah01_49 button {
  background: #ffcc00;
  color: #000;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

._error_1ah01_49 button:hover {
  background: #e6b800;
}

._contentGrid_1ah01_82 {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
}

@media (max-width: 968px) {
  ._contentGrid_1ah01_82 {
    grid-template-columns: 1fr;
  }
}

/* Quick Actions */
._quickActions_1ah01_95 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._quickActions_1ah01_95 h2 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px 0;
}

._actionButton_1ah01_108 {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

._actionButton_1ah01_108:hover {
  background: #0f0f0f;
  border-color: #ffcc00;
  transform: translateY(-2px);
}

._actionIcon_1ah01_127 {
  font-size: 32px;
  flex-shrink: 0;
}

._actionContent_1ah01_132 {
  flex: 1;
}

._actionTitle_1ah01_136 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

._actionDesc_1ah01_143 {
  font-size: 14px;
  color: #9ca3af;
}

/* Shopify Widget */
._shopifyWidget_1ah01_149 {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  overflow: hidden;
}

._widgetHeader_1ah01_156 {
  background: #0f0f0f;
  border-bottom: 1px solid #333;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._widgetHeader_1ah01_156 h2 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

._connectedBadge_1ah01_172 {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

._disconnectedState_1ah01_181 {
  padding: 40px 24px;
  text-align: center;
}

._shopifyIcon_1ah01_186 {
  font-size: 64px;
  margin-bottom: 16px;
}

._disconnectedState_1ah01_181 h3 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px 0;
}

._disconnectedState_1ah01_181 p {
  font-size: 16px;
  color: #9ca3af;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

._featureList_1ah01_205 {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  text-align: left;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

._featureList_1ah01_205 li {
  font-size: 14px;
  color: #9ca3af;
  padding: 8px 0;
  border-bottom: 1px solid #333;
}

._featureList_1ah01_205 li:last-child {
  border-bottom: none;
}

._connectButton_1ah01_226 {
  background: #ffcc00;
  color: #000;
  border: none;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._connectButton_1ah01_226:hover {
  background: #e6b800;
  transform: translateY(-2px);
}

._connectedState_1ah01_243 {
  padding: 24px;
}

._storeInfo_1ah01_247 {
  background: #0f0f0f;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

._infoRow_1ah01_255 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

._infoRow_1ah01_255:not(:last-child) {
  border-bottom: 1px solid #333;
}

._infoLabel_1ah01_266 {
  font-size: 14px;
  color: #9ca3af;
}

._infoValue_1ah01_271 {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

._statusActive_1ah01_277 {
  font-size: 14px;
  font-weight: 600;
  color: #10b981;
}

._salesGrid_1ah01_283 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  ._salesGrid_1ah01_283 {
    grid-template-columns: 1fr;
  }
}

._salesStat_1ah01_296 {
  background: #0f0f0f;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px;
}

._statLabel_1ah01_303 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  margin-bottom: 8px;
}

._statValue_1ah01_312 {
  font-size: 24px;
  font-weight: 700;
  color: #ffcc00;
  margin-bottom: 4px;
}

._statCommission_1ah01_319 {
  font-size: 14px;
  color: #10b981;
}

._viewDetails_1ah01_324 {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

._viewDetails_1ah01_324:hover {
  text-decoration: underline;
}

._widgetActions_1ah01_334 {
  display: flex;
  gap: 12px;
}

@media (max-width: 640px) {
  ._widgetActions_1ah01_334 {
    flex-direction: column;
  }
}

._primaryBtn_1ah01_345 {
  flex: 1;
  background: #ffcc00;
  color: #000;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._primaryBtn_1ah01_345:hover {
  background: #e6b800;
}

._secondaryBtn_1ah01_362 {
  flex: 1;
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._secondaryBtn_1ah01_362:hover {
  background: #0f0f0f;
  border-color: #ffcc00;
}

._viewSalesBtn_1ah01_380 {
  background: #3b82f6;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  width: 100%;
  transition: all 0.2s;
}

._viewSalesBtn_1ah01_380:hover {
  background: #2563eb;
}

._salesList_1ah01_398 {
  background: #0f0f0f;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

._salesList_1ah01_398 h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px 0;
}

._salesTable_1ah01_413 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._salesTableHeader_1ah01_419 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background: #1a1a1a;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
}

._salesTableRow_1ah01_433 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background: #1a1a1a;
  font-size: 14px;
  color: #fff;
}

._salesTableRow_1ah01_433:last-child {
  border-radius: 0 0 6px 6px;
}

._salesTableRow_1ah01_433:hover {
  background: #0f0f0f;
}

@media (max-width: 640px) {
  ._salesTableHeader_1ah01_419,
  ._salesTableRow_1ah01_433 {
    grid-template-columns: 1fr 0.8fr 0.8fr 0.8fr 0.6fr;
    gap: 8px;
    padding: 10px;
    font-size: 12px;
  }
}
/* Account Billing Page Styles */
._container_1bd4h_2 {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

._pageTitle_1bd4h_8 {
  font-size: 32px;
  font-weight: bold;
  color: var(--text-primary, #fff);
  margin-bottom: 32px;
  text-align: center;
}

._loading_1bd4h_16,
._error_1bd4h_17 {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: var(--text-secondary, #888);
}

._error_1bd4h_17 {
  color: var(--error-color, #f44336);
}

/* Notice Card */
._noticeCard_1bd4h_29 {
  display: flex;
  gap: 16px;
  background: rgba(255, 204, 0, 0.1);
  border: 2px solid rgba(255, 204, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

._noticeIcon_1bd4h_39 {
  font-size: 32px;
  flex-shrink: 0;
}

._noticeContent_1bd4h_44 {
  flex: 1;
}

._noticeTitle_1bd4h_48 {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color, #ffcc00);
  margin: 0 0 8px 0;
}

._noticeContent_1bd4h_44 p {
  margin: 0;
  color: var(--text-primary, #fff);
  line-height: 1.5;
}

/* Card Styles */
._card_1bd4h_62 {
  background: var(--card-bg, #1a1a1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

._cardTitle_1bd4h_70 {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary, #fff);
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color, #333);
}

/* Account Info */
._accountInfo_1bd4h_80 {
  color: var(--text-primary, #fff);
  margin: 12px 0;
  font-size: 16px;
}

._accountInfo_1bd4h_80 strong {
  color: var(--primary-color, #ffcc00);
  margin-right: 8px;
}

/* Status Badge */
._statusBadge_1bd4h_92 {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

._statusBadge_1bd4h_92[data-status='trial'] {
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
  border: 2px solid #2196f3;
}

._statusBadge_1bd4h_92[data-status='active'] {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border: 2px solid #4caf50;
}

._statusBadge_1bd4h_92[data-status='past_due'] {
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
  border: 2px solid #ff9800;
}

._statusBadge_1bd4h_92[data-status='cancelled'] {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
  border: 2px solid #f44336;
}

/* Plan Info */
._planInfo_1bd4h_128 {
  margin-top: 20px;
}

._planHeader_1bd4h_132 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

._planHeader_1bd4h_132 h3 {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-primary, #fff);
  margin: 0;
}

._planPrice_1bd4h_146 {
  font-size: 36px;
  font-weight: bold;
  color: var(--primary-color, #ffcc00);
}

._planPrice_1bd4h_146 span {
  font-size: 16px;
  color: var(--text-secondary, #888);
}

/* Trial Info */
._trialInfo_1bd4h_158 {
  background: rgba(33, 150, 243, 0.1);
  border-left: 4px solid #2196f3;
  padding: 16px;
  border-radius: 4px;
  margin-top: 16px;
}

._trialInfo_1bd4h_158 p {
  margin: 8px 0;
  color: var(--text-primary, #fff);
}

._trialNote_1bd4h_171 {
  font-size: 14px;
  color: var(--text-secondary, #888);
}

/* Plan Details */
._planDetails_1bd4h_177 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._detailRow_1bd4h_183 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--card-bg-secondary, #0f0f0f);
  border-radius: 6px;
}

._detailLabel_1bd4h_192 {
  color: var(--text-secondary, #888);
  font-size: 14px;
}

._detailValue_1bd4h_197 {
  color: var(--text-primary, #fff);
  font-weight: bold;
  font-size: 16px;
}

/* Connection Status */
._connectionStatus_1bd4h_204 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._connectionIcon_1bd4h_210 {
  font-size: 32px;
  flex-shrink: 0;
}

._connectionStatus_1bd4h_204 p {
  margin: 4px 0;
  color: var(--text-primary, #fff);
}

._connectionDate_1bd4h_220 {
  font-size: 14px;
  color: var(--text-secondary, #888);
}

/* Upgrade Section */
._upgradeSection_1bd4h_226 {
  text-align: center;
  padding: 40px;
  background: var(--card-bg, #1a1a1a);
  border: 2px solid var(--primary-color, #ffcc00);
  border-radius: 12px;
  margin-top: 24px;
}

._upgradeSection_1bd4h_226 h3 {
  font-size: 24px;
  color: var(--text-primary, #fff);
  margin: 0 0 12px 0;
}

._upgradeSection_1bd4h_226 p {
  font-size: 16px;
  color: var(--text-secondary, #888);
  margin: 0 0 24px 0;
}

/* Buttons */
._primaryButton_1bd4h_248,
._secondaryButton_1bd4h_249,
._dangerButton_1bd4h_250 {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

._primaryButton_1bd4h_248 {
  background: var(--primary-color, #ffcc00);
  color: #000;
}

._primaryButton_1bd4h_248:hover {
  background: var(--primary-color-hover, #ffd700);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
}

._secondaryButton_1bd4h_249 {
  background: var(--card-bg-secondary, #2a2a2a);
  color: var(--text-primary, #fff);
  border: 2px solid var(--border-color, #444);
  margin-top: 12px;
}

._secondaryButton_1bd4h_249:hover:not(:disabled) {
  border-color: var(--primary-color, #ffcc00);
  transform: translateY(-2px);
}

._secondaryButton_1bd4h_249:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._dangerButton_1bd4h_250 {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
  border: 2px solid #f44336;
}

._dangerButton_1bd4h_250:hover:not(:disabled) {
  background: rgba(244, 67, 54, 0.2);
  transform: translateY(-2px);
}

._dangerButton_1bd4h_250:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Actions */
._actions_1bd4h_305 {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  ._container_1bd4h_2 {
    padding: 20px 16px;
  }

  ._pageTitle_1bd4h_8 {
    font-size: 24px;
  }

  ._planHeader_1bd4h_132 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  ._actions_1bd4h_305 {
    flex-direction: column;
  }

  ._primaryButton_1bd4h_248,
  ._secondaryButton_1bd4h_249,
  ._dangerButton_1bd4h_250 {
    width: 100%;
  }

  ._salesGrid_1bd4h_338 {
    grid-template-columns: 1fr !important;
  }
}

/* Sales Summary Styles */
._salesGrid_1bd4h_338 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

._salesStat_1bd4h_351 {
  background: var(--card-bg-secondary, #0f0f0f);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border-color, #333);
}

._salesLabel_1bd4h_359 {
  font-size: 14px;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

._salesValue_1bd4h_367 {
  font-size: 28px;
  font-weight: bold;
  color: var(--primary-color, #ffcc00);
}

._unbilledNotice_1bd4h_373 {
  background: rgba(33, 150, 243, 0.1);
  border: 1px solid rgba(33, 150, 243, 0.3);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: var(--text-primary, #fff);
  text-align: center;
}

._unbilledNote_1bd4h_383 {
  font-size: 14px;
  color: var(--text-secondary, #888);
}

._commissionNote_1bd4h_388 {
  background: var(--card-bg-secondary, #0f0f0f);
  border-radius: 6px;
  padding: 16px;
  border-left: 4px solid var(--primary-color, #ffcc00);
}

._commissionNote_1bd4h_388 p {
  margin: 0;
  color: var(--text-primary, #fff);
  font-size: 14px;
  line-height: 1.6;
}
._container_bblfq_1 {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  background: #1a1a1a;
  min-height: 100vh;
}

._header_bblfq_9 {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  border-radius: 12px;
  border: 1px solid #333;
}

._header_bblfq_9 h1 {
  color: #fff;
  font-size: 2rem;
  margin: 0 0 20px 0;
  font-weight: 600;
  text-align: center;
}

._businessInfo_bblfq_26 {
  margin: 15px 0;
}

._businessName_bblfq_30 {
  font-size: 1.5rem;
  color: #8a9d8a;
  font-weight: 600;
  margin: 0;
}

._welcomeMessage_bblfq_37 {
  text-align: left;
  margin-top: 25px;
  padding: 20px;
  background: rgba(138, 157, 138, 0.1);
  border-left: 4px solid #8a9d8a;
  border-radius: 4px;
}

._welcomeMessage_bblfq_37 p {
  color: #ccc;
  line-height: 1.6;
  margin: 10px 0;
}

._welcomeMessage_bblfq_37 strong {
  color: #fff;
}

._welcomeMessage_bblfq_37 em {
  color: #999;
  font-size: 0.95rem;
}

._form_bblfq_61 {
  background: #2a2a2a;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #333;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

._section_bblfq_71 {
  margin-bottom: 40px;
  padding-bottom: 30px;
  padding-top: 30px;
  border-bottom: 1px solid #333;
  border-top: 1px solid #444;
}

._section_bblfq_71:first-of-type {
  padding-top: 0;
  border-top: none;
}

._section_bblfq_71:last-of-type {
  border-bottom: none;
}

._section_bblfq_71 h2 {
  color: #8a9d8a;
  font-size: 1.5rem;
  margin: 0 0 20px 0;
  font-weight: 600;
  text-align: center;
}

._field_bblfq_96 {
  margin-bottom: 20px;
}

._field_bblfq_96 label {
  display: block;
  color: #ddd;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

._field_bblfq_96 input[type='text'],
._field_bblfq_96 input[type='email'],
._field_bblfq_96 select,
._field_bblfq_96 textarea {
  width: 100%;
  padding: 12px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.3s;
}

._field_bblfq_96 input:focus,
._field_bblfq_96 select:focus,
._field_bblfq_96 textarea:focus {
  outline: none;
  border-color: #8a9d8a;
}

._field_bblfq_96 select {
  cursor: pointer;
}

._field_bblfq_96 textarea {
  resize: vertical;
  min-height: 80px;
}

._field_bblfq_96 input::placeholder,
._field_bblfq_96 textarea::placeholder {
  color: #666;
}

._checkboxGroup_bblfq_144 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}

._checkboxGroup_bblfq_144 label {
  display: flex;
  align-items: center;
  color: #ddd;
  font-weight: normal;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

._checkboxGroup_bblfq_144 label:hover {
  background: rgba(138, 157, 138, 0.05);
}

._checkboxGroup_bblfq_144 input[type='checkbox'] {
  margin-right: 4px !important;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #8a9d8a;
  flex-shrink: 0;
}

._submitSection_bblfq_175 {
  margin-top: 40px;
  text-align: center;
  padding-top: 30px;
  border-top: 2px solid #333;
}

._submitButton_bblfq_182 {
  background: linear-gradient(135deg, #8a9d8a 0%, #6a7a6a 100%);
  color: white;
  border: none;
  padding: 16px 60px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(138, 157, 138, 0.3);
}

._submitButton_bblfq_182:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(138, 157, 138, 0.4);
}

._submitButton_bblfq_182:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._disclaimer_bblfq_207 {
  color: #888;
  font-size: 0.85rem;
  margin-top: 20px;
  line-height: 1.5;
}

._successCard_bblfq_214 {
  background: #2a2a2a;
  padding: 60px 40px;
  border-radius: 12px;
  border: 1px solid #333;
  text-align: center;
  margin-top: 40px;
}

._successIcon_bblfq_223 {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #8a9d8a 0%, #6a7a6a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: white;
  margin: 0 auto 30px;
  font-weight: bold;
}

._successCard_bblfq_214 h1 {
  color: #fff;
  font-size: 2rem;
  margin: 0 0 20px 0;
}

._successCard_bblfq_214 p {
  color: #ccc;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 15px 0;
  text-align: center;
}

._successCard_bblfq_214 a {
  color: #8a9d8a;
  text-decoration: none;
  font-weight: 500;
}

._successCard_bblfq_214 a:hover {
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
  ._container_bblfq_1 {
    padding: 20px 10px;
  }

  ._header_bblfq_9 {
    padding: 20px 15px;
  }

  ._header_bblfq_9 h1 {
    font-size: 1.5rem;
  }

  ._businessName_bblfq_30 {
    font-size: 1.2rem;
  }

  ._form_bblfq_61 {
    padding: 20px 15px;
  }

  ._section_bblfq_71 h2 {
    font-size: 1.2rem;
  }

  ._welcomeMessage_bblfq_37 {
    padding: 15px;
  }

  ._submitButton_bblfq_182 {
    padding: 14px 40px;
    font-size: 1rem;
  }
}