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

  color-scheme: light;
  color: #213547;
  background-color: #ffffff;

  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;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: #ffffff;
}

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;
    background-color: #ffffff;
  }
  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: block !important; /* Show mobile controls when sidebar is hidden */
  }
  
  .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: block !important; /* Show mobile controls on mobile */
  }

  .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%;
  }
}

/* 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 - Global Styles
 * 
 * Applied only on mobile devices (max-width: 768px)
 * Desktop functionality remains untouched
 */

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

@media (max-width: 768px) {
  
  /* ========== BASE LAYOUT ========== */
  * {
    box-sizing: border-box !important;
  }

  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    font-size: 16px; /* Prevent zoom on iOS */
    -webkit-text-size-adjust: 100%;
  }

  /* Ensure full width on mobile - but NOT nav */
  #root,
  .container:not(nav),
  .main-container,
  [data-search-modal],
  [data-card-actions-modal] {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* ========== TYPOGRAPHY ========== */
  h1 {
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.25rem !important;
  }

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

  /* Center menu items and remove odd button styling */
  nav > div[style*="position: fixed"] a,
  nav > div[style*="position: fixed"] button {
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* ========== TOUCH TARGETS ========== */
  /* DISABLED - User prefers component-level sizing */
  /* 
  button:not([aria-label="Menu"]):not([data-view-mode]):not([data-modal]):not(.close-button):not([data-search-helper]),
  a.btn:not([data-modal]),
  input[type="button"]:not([data-modal]),
  input[type="submit"]:not([data-modal]),
  .button:not([data-modal]),
  .btn:not([data-modal]) {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
    font-size: 16px;
  }
  
  select:not([data-modal]) {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 14px;
  }
  */

  /* ========== FORMS ========== */
  /* Only prevent zoom on iOS - exempt modal search inputs */
  input:not([data-deck-view-search]),
  textarea:not([data-deck-view-search]),
  select:not([data-deck-view-search]) {
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Touch-friendly form inputs - but NOT search modal */
  input:not([data-deck-view-search]):not([data-modal]),
  textarea:not([data-deck-view-search]):not([data-modal]),
  select:not([data-deck-view-search]):not([data-modal]) {
    min-height: 44px;
    padding: 10px;
  }

  /* ========== DECK VIEW - GLOBAL MOBILE STYLES ========== */
  /* Hide sticky deck stats bar at bottom on mobile */
  .deck-stats-sticky-bar {
    display: none !important;
  }

  /* Remove bottom padding from deck container */
  .deck-container {
    padding-bottom: 0 !important;
  }

  /* ========== MODALS ========== */
  /* CardActionsModal now handles its own mobile styles via CSS modules */
  /* Removed global modal overrides that were causing conflicts */

  /* CardActionsModal mobile overrides moved to CardActionsModal.module.css */

  /* ========== TABLES ========== */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ========== CARD GRIDS ========== */
  .card-grid,
  .grid,
  [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Make card images more compact on mobile */
  .card-grid img,
  .grid img,
  [class*="CardGrid"] img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Reduce card padding/spacing in list view */
  [class*="cardRow"],
  [class*="card-row"] {
    padding: 8px !important;
    gap: 8px !important;
  }

  /* ========== FLEXBOX LAYOUTS ========== */
  /* Stack flex items on mobile ONLY for specific containers */
  .mobile-stack,
  [data-mobile-stack="true"] {
    flex-direction: column !important;
  }

  /* ========== SPACING ========== */
  /* Reduce spacing on mobile */
  .mt-4, .my-4 { margin-top: 1rem !important; }
  .mb-4, .my-4 { margin-bottom: 1rem !important; }
  .pt-4, .py-4 { padding-top: 1rem !important; }
  .pb-4, .py-4 { padding-bottom: 1rem !important; }

  /* ========== SCROLLING ========== */
  /* Smooth scrolling for overflows */
  * {
    -webkit-overflow-scrolling: touch !important;
  }

  /* ========== IMAGES ========== */
  img:not(nav img):not([alt="Constant Lists"]) {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ========== PREVENT TEXT SELECTION ON DRAG ========== */
  /* Makes drag-and-drop feel more native */
  [draggable="true"] {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }

  /* ========== DECK VIEW - GLOBAL MOBILE STYLES ========== */
  /* Compact deck title bar */
  .deck-title-bar {
    padding: 0.5rem !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .deck-title-bar input[type="text"] {
    font-size: 1.25rem !important;
    max-width: 100% !important;
  }

  /* UNFREEZE bottom stats bar on mobile - let it scroll naturally */
  .deck-main-content > div[style*="position: sticky"],
  .deck-main-content > div[style*="position: fixed"] {
    position: relative !important;
    bottom: auto !important;
  }

  /* Hide card printing artwork comparison on mobile */
  .deck-main-content > div > div[style*="gridTemplateColumns"] {
    display: none !important;
  }

  /* CardActionsModal mobile overrides moved to CardActionsModal.module.css */

  /* ========== BUILD PAGE DECK CARDS ========== */
  /* Force all deck metadata on one line */
  .deck-table-row {
    padding: 0.75rem 0.5rem !important;
  }

  .deck-table-row > div {
    white-space: nowrap !important;
  }

  /* ========== HIDE DESKTOP-ONLY ELEMENTS ========== */
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }
}

/* ============================================
   TABLET STYLES (769px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 15px !important;
  }

  /* Reduce columns on tablet */
  .card-grid,
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   MOBILE LANDSCAPE (max-height: 500px)
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce header sizes in landscape */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  
  /* Reduce padding to maximize content area */
  .container {
    padding: 5px !important;
  }
  
  /* Make modals scrollable in landscape */
  .modal {
    max-height: 85vh !important;
  }
}
/* AuthForm Component Styles - Constant Lists Theme */

._authForm_a7di3_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_a7di3_3 h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #2d3e2d;
  font-weight: 600;
}

._formGroup_a7di3_21 {
  margin-bottom: 1rem;
}

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

._formGroup_a7di3_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_a7di3_21 input:focus {
  outline: none;
  border-color: #6fa96f;
  box-shadow: 0 0 0 3px rgba(111, 169, 111, 0.15);
}

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

._authButton_a7di3_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_a7di3_55:hover {
  background: #4a6f4a;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(61, 94, 61, 0.3);
}

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

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

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

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

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

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

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

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

._passwordStrength_a7di3_118._weak_a7di3_124 {
  color: #dc3545;
}

._passwordStrength_a7di3_118._medium_a7di3_128 {
  color: #fd7e14;
}

._passwordStrength_a7di3_118._strong_a7di3_132 {
  color: #28a745;
}

._passwordRequirements_a7di3_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_a7di3_145 {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
}

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

._requirement_a7di3_145._met_a7di3_156 {
  color: #28a745;
}

._requirement_a7di3_145._unmet_a7di3_160 {
  color: #666666;
}

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

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

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

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

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

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

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

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

/* Dark Mode Styles */
[data-theme="dark"] ._authForm_a7di3_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_a7di3_3 h2 {
  color: #6fa96f;
}

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

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

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

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

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

[data-theme="dark"] ._requirement_a7di3_145._unmet_a7di3_160 {
  color: #999;
}

[data-theme="dark"] ._unmet_a7di3_160 {
  color: #999;
}

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

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

/* Account Type Selection Styles */
._accountTypeSection_a7di3_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_a7di3_276 {
  font-size: 18px;
  font-weight: 600;
  color: #2d3e2d;
  margin: 0 0 16px 0;
  text-align: center;
}

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

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

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

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

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

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

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

._tierSection_a7di3_330 {
  margin: 24px 0;
}

._tierHeading_a7di3_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_a7di3_276,
[data-theme="dark"] ._tierHeading_a7di3_334 {
  color: #6fa96f;
}

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

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

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

[data-theme="dark"] ._accountTypeLabel_a7di3_317 {
  color: #e0e0e0;
}

[data-theme="dark"] ._accountTypeDesc_a7di3_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_14xxl_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_14xxl_3::-webkit-scrollbar {
  display: none;
}

._oracleTagsIntegration_14xxl_3._loading_14xxl_25,
._oracleTagsIntegration_14xxl_3._error_14xxl_26,
._oracleTagsIntegration_14xxl_3._noTags_14xxl_27 {
  text-align: center;
  padding: 24px 16px;
}

._oracleTagsHeader_14xxl_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_14xxl_32 ._oracleTagsTitle_14xxl_46 {
  color: #ffffff !important; /* White color for better visibility against gradient */
}

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

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

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

._oracleTagsContent_14xxl_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_14xxl_65::-webkit-scrollbar {
  display: none;
}

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

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

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

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

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

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

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

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

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

._oracleTag_14xxl_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_14xxl_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_14xxl_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_14xxl_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_14xxl_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_14xxl_205 {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

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

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

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

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

/* Responsive design */
@media (max-width: 768px) {
  ._oracleTagsIntegration_14xxl_3 {
    margin: 16px 0;
    padding: 12px;
    max-height: 250px; /* Smaller max height on mobile */
  }
  
  ._oracleTagsContent_14xxl_65 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  ._oracleTagsList_14xxl_136 {
    gap: 4px;
  }
  
  ._oracleTag_14xxl_3 {
    font-size: 10px;
    padding: 3px 6px;
    min-height: 20px;
  }
  
  ._oracleTagsTitle_14xxl_46 {
    font-size: 14px;
  }
}

/* Dark mode support (if your app uses it) */
@media (prefers-color-scheme: dark) {
  ._oracleTagsIntegration_14xxl_3 {
    background-color: rgb(15, 26, 15);
    border-color: #475569;
  }
  
  ._oracleTagsTitle_14xxl_46 {
    color: #f1f5f9;
  }
  
  ._categoryName_14xxl_122 {
    color: #94a3b8;
  }
  
  ._categoryCount_14xxl_130 {
    color: #64748b;
  }
  
  ._searchHint_14xxl_205 {
    color: #94a3b8;
  }
  
  ._oracleTagsFooter_14xxl_194 {
    border-top-color: #475569;
  }
}

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

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

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

/* Loading state variations */
._oracleTagsIntegration_14xxl_3._loading_14xxl_25 ._oracleTagsHeader_14xxl_32 {
  opacity: 0.7;
}

._oracleTagsIntegration_14xxl_3._error_14xxl_26 ._oracleTagsHeader_14xxl_32 {
  color: #dc2626;
}

._oracleTagsIntegration_14xxl_3._noTags_14xxl_27 ._oracleTagsHeader_14xxl_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_kdklo_2 {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  padding: 2rem 1rem;
}

._legalContent_kdklo_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_kdklo_8 h1 {
  color: #7cb97c;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 3px solid #3d5e3d;
  padding-bottom: 1rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

._legalContainer_kdklo_2[data-theme="light"] ._legalContent_kdklo_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_kdklo_2[data-theme="light"] ._legalContent_kdklo_8 h1 {
  color: #2d5e2d;
  border-bottom: 3px solid #3d5e3d;
}

._legalContainer_kdklo_2[data-theme="light"] ._lastUpdated_kdklo_26 {
  color: #666;
}

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

._legalContainer_kdklo_2[data-theme="light"] ._legalContent_kdklo_8 h3 {
  color: #3d5e3d;
}

._legalContainer_kdklo_2[data-theme="light"] ._legalContent_kdklo_8 p,
._legalContainer_kdklo_2[data-theme="light"] ._legalContent_kdklo_8 ul,
._legalContainer_kdklo_2[data-theme="light"] ._legalContent_kdklo_8 li {
  color: #333;
}

._legalContainer_kdklo_2[data-theme="light"] ._legalContent_kdklo_8 strong {
  color: #2d5e2d;
}

._legalContainer_kdklo_2[data-theme="light"] ._legalContent_kdklo_8 a {
  color: #2d5e2d;
}

._legalContainer_kdklo_2[data-theme="light"] ._legalContent_kdklo_8 a:hover {
  border-bottom-color: #2d5e2d;
}

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

._legalContainer_kdklo_2[data-theme="light"] ._acknowledgment_kdklo_87 p {
  color: #2d5e2d;
}

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

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

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

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

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

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

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

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

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

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

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

  ._acknowledgment_kdklo_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_1gbb8_2 {
  padding: 20px;
  max-width: 100%;
  min-height: 100vh;
  background: var(--bg-primary);
}

._tradeManagementContainer_1gbb8_2 ._container_1gbb8_9 {
  background: transparent;
}

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

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

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

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

._tradeColumn_1gbb8_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_1gbb8_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_1gbb8_48:hover {
  border-color: var(--text-secondary);
  box-shadow: 0 2px 6px var(--shadow-strong);
  transform: translateY(-1px);
}

._columnActions_1gbb8_65, ._tradeActions_1gbb8_65 {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

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

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

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

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

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

._tradeCardModal_1gbb8_87 ._closeButton_1gbb8_101 {
  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_1gbb8_87 ._closeButton_1gbb8_101:hover {
  color: var(--text-primary);
}

._tradeCardModal_1gbb8_87 ._formGroup_1gbb8_119 {
  margin-bottom: 15px;
}

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

._tradeCardModal_1gbb8_87 ._formGroup_1gbb8_119 input[type="checkbox"] {
  margin-right: 8px;
}

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

._searchDropdown_1gbb8_139 {
  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_1gbb8_154 {
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
}

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

._searchDropdownItem_1gbb8_154:hover,
._searchDropdownItem_1gbb8_154._selected_1gbb8_166 {
  background-color: var(--hover-bg);
}

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

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

/* User Column Styles */
._userColumn_1gbb8_183 {
  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_1gbb8_193 {
  margin-bottom: 15px;
}

._userNameInput_1gbb8_197 {
  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_1gbb8_208 {
  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_1gbb8_208:hover {
  color: var(--text-secondary);
}

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

._cardListItem_1gbb8_232 {
  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_1gbb8_232:hover {
  background-color: var(--hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px var(--shadow);
}

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

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

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

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

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

._userTotal_1gbb8_287 {
  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_1gbb8_65 {
  margin-top: 30px;
  text-align: center;
  border-top: 1px solid var(--border-color);
  padding-top: 25px;
}

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

._tradeDifference_1gbb8_304 ._differenceAmount_1gbb8_309 {
  font-weight: bold;
}

._tradeDifference_1gbb8_304._positive_1gbb8_313 {
  color: #28a745;
}

._tradeDifference_1gbb8_304._negative_1gbb8_317 {
  color: #dc3545;
}

._tradeDifference_1gbb8_304._balanced_1gbb8_321 {
  color: var(--text-secondary);
}

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

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

._previewPlaceholder_1gbb8_341 {
  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_1gbb8_357 {
    flex-direction: column !important;
  }
  
  /* Full width preview on mobile */
  ._tradePreviewColumn_1gbb8_362 {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 20px;
    position: sticky !important;
    top: 60px !important;
    z-index: 100 !important;
  }
  
  /* Full width user columns */
  ._userColumn_1gbb8_183 {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* Reduce padding on mobile */
  ._tradeManagementContainer_1gbb8_2 {
    padding: 10px !important;
  }

  ._tradeColumn_1gbb8_32 {
    padding: 15px !important;
  }

  /* Make card rows more touch-friendly */
  ._cardRow_1gbb8_388 {
    padding: 12px 8px !important;
    min-height: 50px !important;
  }

  /* Larger, more touch-friendly buttons */
  ._cardRow_1gbb8_388 button {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px !important;
  }

  /* Stack card info vertically if needed */
  ._cardRow_1gbb8_388 > div {
    flex-wrap: wrap !important;
  }

  /* Make card name more prominent on mobile */
  ._cardName_1gbb8_170 {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* Adjust dropdown width for mobile */
  ._printingDropdown_1gbb8_412 {
    left: 5px !important;
    right: 5px !important;
    width: calc(100vw - 10px) !important;
    max-width: none !important;
  }

  /* Mobile-friendly search */
  ._searchBar_1gbb8_420 {
    width: 100% !important;
  }

  /* Stack buttons vertically on mobile */
  ._buttonGroup_1gbb8_425 {
    flex-direction: column !important;
    gap: 10px !important;
  }

  ._buttonGroup_1gbb8_425 button {
    width: 100% !important;
  }

  /* Hide or minimize less important info on mobile */
  ._collectorNumber_1gbb8_435 {
    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_1gbb8_357 {
    flex-direction: column !important;
  }

  ._tradePreviewColumn_1gbb8_362 {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
}

/* Mobile landscape */
@media (max-width: 900px) and (orientation: landscape) {
  ._tradePreviewColumn_1gbb8_362 {
    width: 40% !important;
  }

  ._userColumn_1gbb8_183 {
    width: 48% !important;
  }

  ._tradeLayout_1gbb8_357 {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
}

/* Loading States */
._loadingSpinner_1gbb8_479 {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: _spin_1gbb8_1 1s linear infinite;
}

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

/* Enhanced Button Styles */
._btn_1gbb8_81 {
  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_1gbb8_506 {
  background-color: #3d5e3d;
  color: white;
  border-color: #3d5e3d;
}

._btnPrimary_1gbb8_506:hover {
  background-color: #4a6f4a;
  border-color: #4a6f4a;
}

._btnSecondary_1gbb8_517 {
  background-color: #6c757d;
  color: white;
  border-color: #6c757d;
}

._btnSecondary_1gbb8_517:hover {
  background-color: #545b62;
  border-color: #545b62;
}

._btnSuccess_1gbb8_528 {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: 1px solid rgba(111, 169, 111, 0.3);
}

._btnSuccess_1gbb8_528:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: rgba(111, 169, 111, 0.5);
}

/* Foil Indicator */
._foilIndicator_1gbb8_540 {
  color: #ffd700;
  text-shadow: 0 0 2px rgba(255, 215, 0, 0.5);
}

/* Card Row Styles */
._cardRow_1gbb8_388 {
  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_1gbb8_388:hover {
  background-color: var(--hover-bg);
}

._cardRowActive_1gbb8_564 {
  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_1gbb8_573 {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: #3b82f6;
}

._printingSelect_1gbb8_573 option {
  background-color: var(--input-bg);
  color: var(--text-primary);
}

._cardName_1gbb8_170 {
  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_1gbb8_170:hover {
  color: #3d5e3d !important;
  text-decoration: underline;
}

._cardNameFoil_1gbb8_603 {
  color: #d4af37;
}

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

._printingDropdown_1gbb8_412 {
  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_1gbb8_623::-webkit-scrollbar,
._tradeContainerUser2_1gbb8_624::-webkit-scrollbar {
  display: none;
}

._tradeContainerUser1_1gbb8_623::-webkit-scrollbar-track,
._tradeContainerUser2_1gbb8_624::-webkit-scrollbar-track {
  background: transparent;
}

._tradeContainerUser1_1gbb8_623::-webkit-scrollbar-thumb,
._tradeContainerUser2_1gbb8_624::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Auto-save indicator animation */
._saveIndicator_1gbb8_639 {
  font-size: 12px;
  color: #4caf50;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: _fadeInOut_1gbb8_1 2s ease-in-out;
}

@keyframes _fadeInOut_1gbb8_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_1gbb8_1 {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

._saveIndicator_1gbb8_639 {
  font-size: 12px;
  color: #4caf50;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: _fadeOut_1gbb8_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_1cf0k_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_1cf0k_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_1cf0k_24 {
  background: radial-gradient(ellipse 800px 600px at 30% 50%, rgba(34, 60, 34, 0.4) 0%, transparent 50%);
  animation: _breathe_1cf0k_1 20s ease-in-out infinite;
  z-index: 1;
}

._fogMid_1cf0k_30 {
  background: radial-gradient(ellipse 1000px 700px at 70% 40%, rgba(45, 65, 45, 0.3) 0%, transparent 50%);
  animation: _breathe_1cf0k_1 25s ease-in-out infinite reverse;
  animation-delay: -10s;
  z-index: 2;
}

._fogFront_1cf0k_37 {
  background: radial-gradient(ellipse 600px 800px at 50% 60%, rgba(56, 76, 56, 0.25) 0%, transparent 50%);
  animation: _breathe_1cf0k_1 30s ease-in-out infinite;
  animation-delay: -5s;
  z-index: 3;
}

@keyframes _breathe_1cf0k_1 {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* Vignette - Frame the darkness */
._vignette_1cf0k_56 {
  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_1cf0k_68 {
  position: relative;
  z-index: 10;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

._heroContent_1cf0k_79 {
  text-align: center;
  margin-bottom: 3rem;
  animation: _fadeInUp_1cf0k_1 1.5s ease-out;
}

@keyframes _fadeInUp_1cf0k_1 {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._siteTitle_1cf0k_96 {
  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_1cf0k_110 {
  width: 200px;
  height: 1px;
  background: linear-gradient(to right, transparent, #8a9d8a, transparent);
  margin: 2rem auto;
  opacity: 0.6;
}

._siteTagline_1cf0k_118 {
  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_1cf0k_130 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 900px;
  width: 100%;
  animation: _fadeInUp_1cf0k_1 1.5s ease-out 0.3s both;
}

._navCard_1cf0k_139 {
  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_1cf0k_139::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_1cf0k_139:hover {
  border-color: rgba(138, 157, 138, 0.6);
  background: rgba(20, 30, 20, 0.8);
  transform: translateY(-4px);
}

._navCard_1cf0k_139:hover::before {
  opacity: 1;
}

._navCard_1cf0k_139 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_1cf0k_139 p {
  font-size: 0.9rem;
  color: #6a7a6a;
  font-style: italic;
  margin: 0;
  letter-spacing: 1px;
  text-align: center;
}

._cardGlow_1cf0k_191 {
  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_1cf0k_139:hover ._cardGlow_1cf0k_191 {
  opacity: 1;
}

/* Featured Card in Fog */
._featuredCardContainer_1cf0k_208 {
  position: fixed;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  z-index: 3;
  width: 350px;
  height: 488px;
  pointer-events: none;
}

._featuredCard_1cf0k_208 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: _fadeInOut_1cf0k_1 7s ease-in-out forwards;
  filter: drop-shadow(0 0 30px rgba(138, 157, 138, 0.3));
  border-radius: 16px;
}

@keyframes _fadeInOut_1cf0k_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_1cf0k_249 {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem 2rem;
}

._section_1cf0k_257 {
  margin-bottom: 3rem;
}

._sectionTitle_1cf0k_261 {
  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_1cf0k_274 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

._deckItem_1cf0k_282 {
  position: relative;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

._deckItem_1cf0k_282:hover {
  transform: translateY(-8px);
}

._deckImageContainer_1cf0k_292 {
  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_1cf0k_292 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

._deckItem_1cf0k_282:hover ._deckImage_1cf0k_292 {
  transform: scale(1.05);
}

._deckOverlay_1cf0k_316 {
  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_1cf0k_282:hover ._deckOverlay_1cf0k_316 {
  opacity: 0.3;
}

._deckDetails_1cf0k_331 {
  padding: 1.5rem 0;
}

._deckName_1cf0k_335 {
  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_1cf0k_344 {
  font-size: 0.85rem;
  color: #6a7a6a;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Community Section - Dark and minimal */
._communitySection_1cf0k_352 {
  border-top: 1px solid rgba(138, 157, 138, 0.1);
  padding-top: 2rem;
}

._communityGrid_1cf0k_357 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

._communityCard_1cf0k_363 {
  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_1cf0k_363:hover {
  border-color: rgba(138, 157, 138, 0.3);
  background: rgba(20, 30, 20, 0.6);
}

._communityCard_1cf0k_363._disabled_1cf0k_375 {
  opacity: 0.5;
}

._communityCard_1cf0k_363._disabled_1cf0k_375:hover {
  border-color: rgba(138, 157, 138, 0.15);
  background: rgba(15, 25, 15, 0.4);
}

._communityTitle_1cf0k_384 {
  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_1cf0k_394 {
  font-size: 0.85rem;
  color: #7a8a7a;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  font-style: italic;
}

._linkButton_1cf0k_402 {
  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_1cf0k_402: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_1cf0k_424 {
  opacity: 0.4;
  cursor: not-allowed;
}

._disabledButton_1cf0k_424:hover {
  background: transparent;
  border-color: #8a9d8a;
  color: #a8b5a8;
  box-shadow: none;
}

._communityCard_1cf0k_363 {
  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_1cf0k_363:hover {
  border-color: rgba(138, 157, 138, 0.3);
  background: rgba(20, 30, 20, 0.6);
}

._communityCard_1cf0k_363._disabled_1cf0k_375 {
  opacity: 0.5;
}

._communityCard_1cf0k_363._disabled_1cf0k_375:hover {
  border-color: rgba(138, 157, 138, 0.15);
  background: rgba(15, 25, 15, 0.4);
}

._communityTitle_1cf0k_384 {
  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_1cf0k_394 {
  font-size: 0.95rem;
  color: #7a8a7a;
  line-height: 1.8;
  margin: 0 0 2rem 0;
  font-style: italic;
}

._linkButton_1cf0k_402 {
  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_1cf0k_402: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_1cf0k_424 {
  opacity: 0.4;
  cursor: not-allowed;
}

._disabledButton_1cf0k_424:hover {
  background: transparent;
  border-color: #8a9d8a;
  color: #a8b5a8;
  box-shadow: none;
}

/* Bottom fade */
._bottomFade_1cf0k_510 {
  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_1cf0k_208 {
    display: none;
  }
}

@media (max-width: 768px) {
  ._siteTitle_1cf0k_96 {
    font-size: 3rem;
    letter-spacing: 6px;
  }

  ._siteTagline_1cf0k_118 {
    font-size: 0.95rem;
  }

  ._navGrid_1cf0k_130 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  ._navCard_1cf0k_139 {
    padding: 2rem 1.5rem;
  }

  ._recentDecks_1cf0k_274 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  ._communityGrid_1cf0k_357 {
    grid-template-columns: 1fr;
  }

  ._sectionTitle_1cf0k_261 {
    font-size: 1.5rem;
    letter-spacing: 4px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  ._fogLayer_1cf0k_13,
  ._navCard_1cf0k_139,
  ._deckItem_1cf0k_282,
  ._communityCard_1cf0k_363,
  ._heroContent_1cf0k_79 {
    animation: none;
    transition: none;
  }

  ._fogBack_1cf0k_24,
  ._fogMid_1cf0k_30,
  ._fogFront_1cf0k_37 {
    animation: none;
  }
}
._scryfallStatusBanner_dhww2_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_dhww2_1 0.3s ease-out;
}

@keyframes _slideDown_dhww2_1 {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

._bannerContent_dhww2_24 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

._bannerIcon_dhww2_33 {
  font-size: 24px;
  flex-shrink: 0;
  animation: _pulse_dhww2_1 2s ease-in-out infinite;
}

@keyframes _pulse_dhww2_1 {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

._bannerMessage_dhww2_50 {
  flex: 1;
}

._bannerMessage_dhww2_50 strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

._bannerMessage_dhww2_50 p {
  margin: 0;
  font-size: 14px;
  opacity: 0.95;
  line-height: 1.4;
}

._bannerDismiss_dhww2_68 {
  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_dhww2_68:hover {
  background: rgba(255, 255, 255, 0.3);
}

._bannerDismiss_dhww2_68:active {
  background: rgba(255, 255, 255, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
  ._bannerContent_dhww2_24 {
    padding: 10px 15px;
    gap: 10px;
  }

  ._bannerIcon_dhww2_33 {
    font-size: 20px;
  }

  ._bannerMessage_dhww2_50 strong {
    font-size: 14px;
  }

  ._bannerMessage_dhww2_50 p {
    font-size: 12px;
  }

  ._bannerDismiss_dhww2_68 {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
}
/* Store Page Styles */

._storePage_61bm4_3 {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow: hidden;
}

._storeContent_61bm4_10 {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 1.5rem;
  padding: 1.5rem;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
}

._storeSidebar_61bm4_21 {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

._storeMain_61bm4_31 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
._storeHeader_61bm4_39 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 2px solid #e5e7eb;
  background: white;
}

._storeTitle_61bm4_48 h1 {
  font-size: 2rem;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

._storeSubtitle_61bm4_54 {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
}

._cartButton_61bm4_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_61bm4_60:hover:not(:disabled) {
  background: #4a6f4a;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(61, 94, 61, 0.3);
}

._cartButton_61bm4_60:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._cartInfo_61bm4_87 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._cartText_61bm4_93 {
  font-size: 0.875rem;
  font-weight: 600;
}

._cartCount_61bm4_98 {
  background: #ef4444;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 700;
}

._cartTotal_61bm4_106 {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Filters */
._storeFilters_61bm4_112 {
  background: #f9fafb;
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._searchBox_61bm4_121 {
  width: 100%;
}

._searchInput_61bm4_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_61bm4_125:focus {
  outline: none;
  border-color: #3b82f6;
}

._filterRow_61bm4_139 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._filterLabel_61bm4_145 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

._filterSelect_61bm4_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_61bm4_154:focus {
  outline: none;
  border-color: #3b82f6;
}

._foilCheckbox_61bm4_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_61bm4_170 input[type="checkbox"] {
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
}

._colorIdentityFilter_61bm4_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_61bm4_202 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: background 0.2s;
}

._colorOption_61bm4_202:hover {
  background: #f3f4f6;
}

._colorOption_61bm4_202 input[type="checkbox"] {
  margin: 0;
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  vertical-align: middle;
}

._colorOption_61bm4_202 input[type="checkbox"]:focus {
  outline: none;
}

/* Scope to store page only */
._storePage_61bm4_3 ._manaSymbol_61bm4_231 {
  width: 1rem;
  height: 1rem;
  display: inline-block;
}

._clearFilters_61bm4_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_61bm4_237:hover {
  background: #dc2626;
}

/* Inventory Grid */
._inventoryScroll_61bm4_255 {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 2rem 1rem 1rem;
}

._inventoryGrid_61bm4_261 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  align-items: start;
}

._inventoryCard_61bm4_268 {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
  display: block;
  height: fit-content;
}

._inventoryCard_61bm4_268:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6;
}

._cardImageContainer_61bm4_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_61bm4_284 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  border-radius: 8px 8px 0 0;
}

._rarityIndicator_61bm4_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_61bm4_323 {
  background: #1f2937;
}

._rarityUncommon_61bm4_327 {
  background: #9ca3af;
}

._rarityRare_61bm4_331 {
  background: #d97706;
}

._rarityMythic_61bm4_335 {
  background: #dc2626;
}

._raritySpecial_61bm4_339 {
  background: #7c3aed;
}

._storePage_61bm4_3 ._foilIndicator_61bm4_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_61bm4_1 2s ease-in-out infinite;
  z-index: 2;
}

@keyframes _foilPulse_61bm4_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

._foilOverlay_61bm4_381 {
  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_61bm4_1 3s linear infinite;
  opacity: 1;
  mix-blend-mode: screen;
  z-index: 1;
}

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

._cardPriceBadge_61bm4_421 {
  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_61bm4_436 {
  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_61bm4_450 {
  padding: 0.75rem;
  margin: 0;
}

._cardMeta_61bm4_455 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
}

._cardSet_61bm4_463 {
  color: #6b7280;
  font-weight: 500;
}

._cardRarity_61bm4_468 {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.625rem;
}

._rarityCommon_61bm4_323 { background: #9ca3af; color: white; }
._rarityUncommon_61bm4_327 { background: #6b7280; color: white; }
._rarityRare_61bm4_331 { background: #fbbf24; color: #78350f; }
._rarityMythic_61bm4_335 { background: #ef4444; color: white; }
._raritySpecial_61bm4_339 { background: #8b5cf6; color: white; }

._cardCondition_61bm4_482,
._cardStock_61bm4_483 {
  font-size: 0.7rem;
  color: #6b7280;
  margin-bottom: 0.125rem;
}

._cardCondition_61bm4_482 strong,
._cardStock_61bm4_483 strong {
  color: #1f2937;
}

._storePage_61bm4_3 ._cardActions_61bm4_494 {
  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_61bm4_421 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #059669;
  flex-shrink: 0;
  margin: 0;
}

._addToCartBtn_61bm4_515 {
  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_61bm4_515:hover:not(:disabled) {
  background: #2d4a2d;
}

._addToCartBtn_61bm4_515:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._storePage_61bm4_3 ._cartQuantityControls_61bm4_544 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  padding: 0;
  border-radius: 6px;
  flex-shrink: 0;
  height: 2rem;
}

._storePage_61bm4_3 ._qtyBtn_61bm4_555 {
  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_61bm4_555:hover:not(:disabled) {
  background: #2d4a2d;
}

._qtyBtn_61bm4_555:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._qtyDisplay_61bm4_583 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  min-width: 1.5rem;
  text-align: center;
  line-height: 2rem;
}

/* Loading and Error States */
._storeLoading_61bm4_593,
._storeError_61bm4_594 {
  text-align: center;
  padding: 4rem 2rem;
}

._loadingSpinner_61bm4_599 {
  width: 3rem;
  height: 3rem;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: _spin_61bm4_1 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes _spin_61bm4_1 {
  to { transform: rotate(360deg); }
}

._storeError_61bm4_594 h2 {
  color: #ef4444;
  margin-bottom: 1rem;
}

._storeError_61bm4_594 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_61bm4_630 {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;
}

/* Responsive */
@media (max-width: 768px) {
  ._storePage_61bm4_3 {
    padding: 1rem;
  }

  ._storeHeader_61bm4_39 {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  ._cartButton_61bm4_60 {
    width: 100%;
    justify-content: center;
  }

  ._filterRow_61bm4_139 {
    flex-direction: column;
  }

  ._filterSelect_61bm4_154,
  ._foilCheckbox_61bm4_170 {
    width: 100%;
  }

  ._clearFilters_61bm4_237 {
    width: 100%;
    margin-left: 0;
  }

  ._inventoryGrid_61bm4_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_zjsix_1 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

._header_zjsix_7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

._header_zjsix_7 h1 {
  color: var(--text-primary);
  font-size: 2rem;
  margin: 0;
}

._addButton_zjsix_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_zjsix_20:hover {
  background-color: var(--success-hover, #218838);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

._loading_zjsix_38 {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
  font-size: 1.2rem;
}

/* Tabs */
._tabs_zjsix_46 {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--border-color);
}

._tab_zjsix_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_zjsix_46:hover {
  color: var(--text-primary);
  background-color: var(--hover-bg);
}

._tab_zjsix_46._active_zjsix_72 {
  color: var(--success-color, #28a745);
  border-bottom-color: var(--success-color, #28a745);
}

/* Content */
._content_zjsix_78 {
  min-height: 400px;
}

._empty_zjsix_82 {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

._empty_zjsix_82 p {
  margin: 0.5rem 0;
  font-size: 1.1rem;
}

/* Friends List */
._friendsList_zjsix_94,
._requestsList_zjsix_95 {
  display: grid;
  gap: 1rem;
}

._friendCard_zjsix_100,
._requestCard_zjsix_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_zjsix_100:hover,
._requestCard_zjsix_101:hover {
  box-shadow: 0 4px 12px var(--shadow);
  border-color: var(--success-color);
}

._friendInfo_zjsix_118 {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex: 1;
}

._friendAvatar_zjsix_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_zjsix_139 {
  flex: 1;
}

._friendDetails_zjsix_139 h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.2rem;
}

._email_zjsix_149 {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0.25rem 0;
}

._date_zjsix_155 {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0.25rem 0;
}

._message_zjsix_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_zjsix_171 {
  color: var(--warning-color, #ffc107);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

/* Actions */
._friendActions_zjsix_179,
._requestActions_zjsix_180 {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

._viewButton_zjsix_186,
._acceptButton_zjsix_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_zjsix_186:hover,
._acceptButton_zjsix_187:hover {
  background-color: var(--success-hover, #218838);
  transform: translateY(-1px);
}

._removeButton_zjsix_204,
._rejectButton_zjsix_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_zjsix_204:hover,
._rejectButton_zjsix_205:hover {
  background-color: var(--danger-hover, #c82333);
  transform: translateY(-1px);
}

/* Modal */
._modalOverlay_zjsix_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_zjsix_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_zjsix_223 h2 {
  margin: 0 0 1.5rem 0;
  color: var(--text-primary);
}

._modal_zjsix_223 form {
  background-color: transparent;
  max-width: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  width: auto;
}

._formGroup_zjsix_264 {
  margin-bottom: 1.5rem;
}

._formGroup_zjsix_264 label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
}

._formGroup_zjsix_264 input,
._formGroup_zjsix_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_zjsix_264 input:focus,
._formGroup_zjsix_264 textarea:focus {
  outline: none;
  border-color: var(--success-color);
}

._formGroup_zjsix_264 textarea {
  resize: vertical;
}

._modalActions_zjsix_300 {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

._cancelButton_zjsix_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_zjsix_307:hover {
  background-color: var(--hover-bg);
}

._sendButton_zjsix_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_zjsix_322:hover:not(:disabled) {
  background-color: #3d5c3d;
}

._sendButton_zjsix_322:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Deck Suggestions */
._suggestionsList_zjsix_343 {
  display: grid;
  gap: 1rem;
}

._suggestionCard_zjsix_348 {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s;
}

._suggestionCard_zjsix_348:hover {
  box-shadow: 0 4px 12px var(--shadow);
  border-color: var(--primary-color, #007bff);
}

._suggestionHeader_zjsix_361 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

._suggesterAvatar_zjsix_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_zjsix_382 {
  flex: 1;
}

._suggesterInfo_zjsix_382 h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.1rem;
}

._suggesterInfo_zjsix_382 small {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

._suggestionActions_zjsix_397 {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

._deckName_zjsix_403 {
  font-weight: 600;
  color: var(--primary-color, #007bff);
  margin-bottom: 0.5rem;
}

._suggestionMessage_zjsix_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_zjsix_419 {
  margin: 1rem 0;
}

._changeSection_zjsix_423 {
  margin-bottom: 1rem;
}

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

._addHeader_zjsix_431 {
  color: var(--success-color, #28a745);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

._removeHeader_zjsix_438 {
  color: var(--danger-color, #dc3545);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

._cardList_zjsix_445 {
  list-style: none;
  padding: 0;
  margin: 0 0 0 1rem;
}

._cardList_zjsix_445 li {
  color: var(--text-secondary);
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

._cardList_zjsix_445 li::before {
  content: "•";
  margin-right: 0.5rem;
  color: var(--text-secondary);
}

._moreIndicator_zjsix_463 {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.85rem;
  margin-left: 1rem;
}

._more_zjsix_463 {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.85rem;
}

._viewDeckButton_zjsix_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_zjsix_476:hover {
  background-color: var(--primary-hover, #0056b3);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
  ._container_zjsix_1 {
    padding: 1rem;
  }

  ._header_zjsix_7 {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  ._friendCard_zjsix_100,
  ._requestCard_zjsix_101,
  ._suggestionCard_zjsix_348 {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  ._friendActions_zjsix_179,
  ._requestActions_zjsix_180,
  ._suggestionActions_zjsix_397 {
    flex-direction: column;
  }

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

  ._tabs_zjsix_46 {
    overflow-x: auto;
  }

  ._tab_zjsix_46 {
    flex-shrink: 0;
  }
}
._container_1bodg_1 {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

._loading_1bodg_7, ._error_1bodg_7 {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
  font-size: 1.1rem;
}

._error_1bodg_7 {
  color: #dc3545;
}

/* Header */
._header_1bodg_19 {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--border-color);
}

._backButton_1bodg_27 {
  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_1bodg_27:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

._profileInfo_1bodg_44 {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: space-between;
}

._avatar_1bodg_51 {
  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_1bodg_67 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._profileDetails_1bodg_73 h1 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.8rem;
}

._email_1bodg_79 {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0 0 0.25rem 0;
}

._friendsSince_1bodg_85 {
  color: var(--text-tertiary);
  font-size: 0.85rem;
  margin: 0;
}

._stats_1bodg_91 {
  display: flex;
  gap: 2rem;
  margin-left: auto;
}

._stat_1bodg_91 {
  text-align: center;
}

._statValue_1bodg_101 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

._statLabel_1bodg_108 {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tabs */
._tabs_1bodg_116 {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--border-color);
}

._tab_1bodg_116 {
  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_1bodg_116:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

._tab_1bodg_116._active_1bodg_141 {
  color: #4a6f4a;
  border-bottom-color: #4a6f4a;
}

/* Content */
._content_1bodg_147 {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  border: 1px solid var(--border-color);
  min-height: 400px;
}

/* Filters */
._viewToggle_1bodg_156 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

._groupingSelect_1bodg_165 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

._groupingSelect_1bodg_165 label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

._groupingDropdown_1bodg_177 {
  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_1bodg_177:hover {
  background: var(--hover-bg);
  border-color: #4a6f4a;
}

._groupingDropdown_1bodg_177:focus {
  outline: none;
  border-color: #4a6f4a;
}

._viewButton_1bodg_198 {
  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_1bodg_198:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

._viewButtonActive_1bodg_214 {
  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_1bodg_225 {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

._searchInput_1bodg_232 {
  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_1bodg_232:focus {
  outline: none;
  border-color: #4a6f4a;
}

._filterSelect_1bodg_249 {
  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_1bodg_249:focus {
  outline: none;
  border-color: #4a6f4a;
}

/* Dropdown Filters */
._dropdown_1bodg_266 {
  position: relative;
  display: inline-block;
}

._dropdownButton_1bodg_271 {
  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_1bodg_271:hover {
  background: var(--hover-bg);
  border-color: #4a6f4a;
}

._arrowDown_1bodg_293 {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

._arrowUp_1bodg_298 {
  font-size: 0.7rem;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

._dropdownContent_1bodg_304 {
  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_1bodg_1 0.2s ease;
}

@keyframes _slideDown_1bodg_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._checkboxGroup_1bodg_329 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._checkboxLabel_1bodg_335 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9rem;
  user-select: none;
}

._checkboxLabel_1bodg_335 input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #4a6f4a;
}

._checkboxLabel_1bodg_335 span {
  text-transform: capitalize;
}

._checkboxLabel_1bodg_335:hover {
  color: #4a6f4a;
}

/* Card Grid */
._cardGrid_1bodg_361 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

._card_1bodg_361 {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

._card_1bodg_361:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px var(--shadow-strong);
  border-color: #4a6f4a;
}

._cardImageWrapper_1bodg_382 {
  position: relative;
  width: 100%;
}

._cardImage_1bodg_382 {
  width: 100%;
  display: block;
  aspect-ratio: 5/7;
  object-fit: cover;
}

._foilOverlay_1bodg_394 {
  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_1bodg_1 3s linear infinite;
  opacity: 1;
  mix-blend-mode: screen;
  z-index: 1;
}

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

._priorityOverlay_1bodg_434 {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

._priorityBadgeOverlay_1bodg_441 {
  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_1bodg_441._high_1bodg_452 {
  background-color: #dc3545;
  color: #fff;
}

._priorityBadgeOverlay_1bodg_441._medium_1bodg_457 {
  background-color: #ffc107;
  color: #1a1a1a;
}

._priorityBadgeOverlay_1bodg_441._low_1bodg_462 {
  background-color: #28a745;
  color: #fff;
}

/* Wishlist match badge (heart emoji) - shows on their trade binder when I want it */
._wishlistMatchBadge_1bodg_468 {
  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_1bodg_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_1bodg_491 {
  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_1bodg_1 2s ease-in-out infinite;
  cursor: help;
}

@keyframes _pulse_1bodg_1 {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Gefeilliaid System™ Trade Button */
._gefeilliaidButton_1bodg_520 {
  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_1bodg_361:hover ._gefeilliaidButton_1bodg_520 {
  opacity: 1;
  transform: translateY(0);
}

._gefeilliaidButton_1bodg_520: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_1bodg_520:active {
  transform: scale(0.98);
}

._cardPlaceholder_1bodg_557 {
  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_1bodg_572 {
  padding: 1rem;
}

._cardName_1bodg_576 {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

._cardSet_1bodg_583 {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

._quantity_1bodg_589 {
  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_1bodg_600 {
  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_1bodg_612 {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

._empty_1bodg_612 p {
  font-size: 1.1rem;
  margin: 0;
}

/* Coming Soon */
._comingSoon_1bodg_624 {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

._comingSoon_1bodg_624 p {
  font-size: 1.2rem;
  margin: 0;
}

/* Wishlist Grid */
._wishlistGrid_1bodg_636 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem 0;
}

._wishlistCard_1bodg_643 {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.2s;
}

._wishlistCard_1bodg_643:hover {
  border-color: #4a6f4a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

._wishlistCardInfo_1bodg_656 h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  font-size: 1.1rem;
}

._wishlistCardInfo_1bodg_656 ._set_1bodg_662 {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0.25rem 0;
}

._wishlistCardInfo_1bodg_656 ._collector_1bodg_668 {
  color: var(--text-tertiary);
  font-size: 0.8rem;
  margin: 0.25rem 0;
}

._wishlistCardInfo_1bodg_656 ._quantity_1bodg_589 {
  color: var(--text-primary);
  font-size: 0.9rem;
  margin: 0.5rem 0;
  font-weight: 500;
}

._priority_1bodg_434 {
  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_1bodg_434._high_1bodg_452 {
  background-color: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

._priority_1bodg_434._medium_1bodg_457 {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

._priority_1bodg_434._low_1bodg_462 {
  background-color: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

._wishlistCardInfo_1bodg_656 ._notes_1bodg_600 {
  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_1bodg_716 {
  overflow-x: auto;
}

._listTable_1bodg_720 {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
}

._listTable_1bodg_720 thead {
  background: var(--hover-bg);
  border-bottom: 2px solid var(--border-color);
}

._listTable_1bodg_720 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_1bodg_720 tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}

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

._listTable_1bodg_720 td {
  padding: 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

._listTable_1bodg_720 ._cardNameCell_1bodg_758 {
  color: var(--text-primary);
  font-weight: 500;
}

._listTable_1bodg_720 ._notesCell_1bodg_763 {
  color: var(--text-tertiary);
  font-style: italic;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._foilCell_1bodg_772 {
  text-align: center;
}

._foilBadge_1bodg_776 {
  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_1bodg_441 {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

._priorityBadge_1bodg_441._high_1bodg_452 {
  background-color: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

._priorityBadge_1bodg_441._medium_1bodg_457 {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

._priorityBadge_1bodg_441._low_1bodg_462 {
  background-color: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

/* Responsive */
@media (max-width: 768px) {
  ._container_1bodg_1 {
    padding: 1rem;
  }
  
  ._header_1bodg_19 {
    padding: 1.5rem;
  }
  
  ._profileInfo_1bodg_44 {
    flex-direction: column;
    text-align: center;
  }
  
  ._stats_1bodg_91 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  ._tabs_1bodg_116 {
    overflow-x: auto;
  }
  
  ._tab_1bodg_116 {
    white-space: nowrap;
  }
  
  ._filters_1bodg_225 {
    flex-direction: column;
  }
  
  ._searchInput_1bodg_232 {
    min-width: 100%;
  }
  
  ._cardGrid_1bodg_361 {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }
}

/* Group Sections */
._group_1bodg_165 {
  margin-bottom: 2rem;
}

._groupHeader_1bodg_859 {
  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_1dq31_1 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

._header_1dq31_7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

._header_1dq31_7 h1 {
  color: var(--text-primary);
  font-size: 2rem;
  margin: 0;
}

._subtitle_1dq31_20 {
  color: var(--text-secondary);
  margin: 0.5rem 0 0 0;
  font-size: 1rem;
}

._addButton_1dq31_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_1dq31_26:hover {
  background-color: var(--success-hover, #218838);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

._loading_1dq31_44 {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
  font-size: 1.2rem;
}

/* View Toggle */
._viewToggle_1dq31_52 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

._groupingSelect_1dq31_61 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

._groupingSelect_1dq31_61 label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

._groupingDropdown_1dq31_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_1dq31_73:hover {
  background: var(--hover-bg);
  border-color: #4a6f4a;
}

._groupingDropdown_1dq31_73:focus {
  outline: none;
  border-color: #4a6f4a;
}

._viewButton_1dq31_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_1dq31_94:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

._viewButtonActive_1dq31_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_1dq31_122 {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

._searchInput_1dq31_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_1dq31_129:focus {
  outline: none;
  border-color: #4a6f4a;
}

/* Dropdown Filters */
._dropdown_1dq31_147 {
  position: relative;
  display: inline-block;
}

._dropdownButton_1dq31_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_1dq31_152:hover {
  background: var(--hover-bg);
  border-color: #4a6f4a;
}

._arrowDown_1dq31_174 {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

._arrowUp_1dq31_179 {
  font-size: 0.7rem;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

._dropdownContent_1dq31_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_1dq31_1 0.2s ease;
}

@keyframes _slideDown_1dq31_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._checkboxGroup_1dq31_210 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._checkboxLabel_1dq31_216 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9rem;
  user-select: none;
}

._checkboxLabel_1dq31_216 input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #4a6f4a;
}

._checkboxLabel_1dq31_216 span {
  text-transform: capitalize;
}

._checkboxLabel_1dq31_216:hover {
  color: #4a6f4a;
}

/* Group Sections */
._groupSection_1dq31_242 {
  margin-bottom: 2rem;
}

._groupHeader_1dq31_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_1dq31_258 {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Card Grid */
._cardGrid_1dq31_265 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

._card_1dq31_265 {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

._card_1dq31_265:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px var(--shadow-strong);
  border-color: #4a6f4a;
}

._cardImageWrapper_1dq31_286 {
  position: relative;
  width: 100%;
}

._cardImage_1dq31_286 {
  width: 100%;
  display: block;
  aspect-ratio: 5/7;
  object-fit: cover;
}

._foilOverlay_1dq31_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_1dq31_1 3s linear infinite;
  opacity: 1;
  mix-blend-mode: screen;
  z-index: 1;
}

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

._priorityOverlay_1dq31_338 {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

._priorityBadgeOverlay_1dq31_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_1dq31_345._high_1dq31_358 {
  background-color: #dc3545;
  color: #fff;
}

._priorityBadgeOverlay_1dq31_345._medium_1dq31_363 {
  background-color: #ffc107;
  color: #1a1a1a;
}

._priorityBadgeOverlay_1dq31_345._low_1dq31_368 {
  background-color: #28a745;
  color: #fff;
}

._removeButtonOverlay_1dq31_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_1dq31_265:hover ._removeButtonOverlay_1dq31_373 {
  opacity: 1;
}

._removeButtonOverlay_1dq31_373:hover {
  background: #c82333;
  transform: scale(1.1);
}

/* Quantity overlay controls (top left stack) */
._quantityOverlay_1dq31_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_1dq31_265:hover ._quantityOverlay_1dq31_405 {
  opacity: 1;
}

._quantityCircle_1dq31_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_1dq31_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_1dq31_438:hover {
  background: rgba(0, 0, 0, 1);
  border-color: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

._quantityButton_1dq31_438:focus {
  outline: none;
}

._quantityButton_1dq31_438:active {
  outline: none;
}

._collectionIndicator_1dq31_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_1dq31_474[data-status="exact-match"] {
  background-color: #22c55e; /* Green - exact match */
}

._collectionIndicator_1dq31_474[data-status="different-version"] {
  background-color: #eab308; /* Yellow - different printing */
}

._collectionIndicator_1dq31_474[data-status="not-owned"],
._collectionIndicator_1dq31_474[data-status="not-collected"] {
  background-color: #ef4444; /* Red - not in collection */
}

._foilToggleButton_1dq31_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_1dq31_498:hover {
  border-color: rgba(255, 255, 255, 1);
}

._foilToggleButton_1dq31_498:focus {
  outline: none;
}

._foilToggleButton_1dq31_498:active {
  outline: none;
}

._foilToggleButton_1dq31_498._foilActive_1dq31_531 {
  background: linear-gradient(135deg, #b87a7a, #b89a7a, #b8b87a, #7ab87a, #7a9ab8, #8a7ab8, #b87ab8);
  background-size: 200% 200%;
  animation: _rainbow_1dq31_1 3s ease infinite;
}

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

/* Price badge (bottom left) */
._priceBadge_1dq31_544 {
  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_1dq31_265:hover ._priceBadge_1dq31_544 {
  opacity: 1;
}

._cardPlaceholder_1dq31_564 {
  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_1dq31_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_1dq31_338._high_1dq31_358 {
  background-color: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

._priority_1dq31_338._medium_1dq31_363 {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

._priority_1dq31_338._low_1dq31_368 {
  background-color: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

._clickablePriority_1dq31_605 {
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
}

._clickablePriority_1dq31_605:hover {
  transform: scale(1.05);
  opacity: 0.85;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

._clickablePriority_1dq31_605:active {
  transform: scale(0.95);
}

/* List View */
._listView_1dq31_623 {
  overflow-x: auto;
}

._listTable_1dq31_627 {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
}

._listTable_1dq31_627 thead {
  background: var(--hover-bg);
  border-bottom: 2px solid var(--border-color);
}

._listTable_1dq31_627 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_1dq31_627 tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}

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

._listTable_1dq31_627 td {
  padding: 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

._listTable_1dq31_627 ._cardNameCell_1dq31_665 {
  color: var(--text-primary);
  font-weight: 500;
}

._listTable_1dq31_627 ._notesCell_1dq31_670 {
  color: var(--text-tertiary);
  font-style: italic;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._foilCell_1dq31_679 {
  text-align: center;
}

._foilBadge_1dq31_683 {
  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_1dq31_683._foilActive_1dq31_531 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1a1a;
}

._foilBadge_1dq31_683._foilInactive_1dq31_703 {
  background: rgba(156, 163, 175, 0.2);
  color: rgba(156, 163, 175, 0.6);
}

._foilBadge_1dq31_683:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

._priorityBadge_1dq31_345 {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

._priorityBadge_1dq31_345._high_1dq31_358 {
  background-color: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

._priorityBadge_1dq31_345._medium_1dq31_363 {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

._priorityBadge_1dq31_345._low_1dq31_368 {
  background-color: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

._removeButton_1dq31_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_1dq31_373:hover {
  background: #c82333;
}

/* Empty State */
._empty_1dq31_753 {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

._empty_1dq31_753 p {
  font-size: 1.1rem;
  margin: 0.5rem 0;
}

/* Modal */
._modalOverlay_1dq31_765 {
  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_1dq31_765 {
  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_1dq31_765 h2 {
  margin: 0 0 1.5rem 0;
  color: var(--text-primary);
  font-size: 1.5rem;
}

._formGroup_1dq31_796 {
  margin-bottom: 1.5rem;
  position: relative;
}

._formGroup_1dq31_796 label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.95rem;
}

._input_1dq31_809,
._select_1dq31_810,
._textarea_1dq31_811 {
  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_1dq31_809:focus,
._select_1dq31_810:focus,
._textarea_1dq31_811:focus {
  outline: none;
  border-color: #4a6f4a;
}

._textarea_1dq31_811 {
  resize: vertical;
  min-height: 80px;
}

._searching_1dq31_835 {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.5rem;
  font-style: italic;
}

._searchResults_1dq31_842 {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-top: 0.5rem;
  background: var(--bg-primary);
}

._searchResult_1dq31_842 {
  padding: 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}

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

._searchResult_1dq31_842:hover {
  background: var(--hover-bg);
}

._resultInfo_1dq31_866 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._resultInfo_1dq31_866 strong {
  color: var(--text-primary);
  font-size: 1rem;
}

._resultSet_1dq31_877 {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

._selectedCard_1dq31_882 {
  padding: 1rem;
  background: var(--hover-bg);
  border: 1px solid #4a6f4a;
  border-radius: 6px;
  margin-bottom: 1rem;
}

._selectedCard_1dq31_882 p {
  margin: 0.25rem 0;
  color: var(--text-primary);
}

._cardSet_1dq31_895 {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

._modalActions_1dq31_900 {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

._cancelButton_1dq31_907 {
  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_1dq31_907:hover {
  background: var(--hover-bg);
}

._addButtonModal_1dq31_922 {
  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_1dq31_922:hover:not(:disabled) {
  background: #3d5e3d;
}

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

/* Responsive */
@media (max-width: 768px) {
  ._container_1dq31_1 {
    padding: 1rem;
  }
  
  ._header_1dq31_7 {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  ._filters_1dq31_122 {
    flex-direction: column;
  }
  
  ._searchInput_1dq31_129 {
    min-width: 100%;
  }
  
  ._cardGrid_1dq31_265 {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }
  
  ._viewToggle_1dq31_52 {
    flex-wrap: wrap;
  }
  
  ._groupingSelect_1dq31_61 {
    width: 100%;
    margin-left: 0;
  }
  
  ._modal_1dq31_765 {
    padding: 1.5rem;
  }
}
._container_krbra_1 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
  min-height: 100vh;
  background: #1a1a1a;
  color: #fff;
}

._header_krbra_10 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

._header_krbra_10 h1 {
  margin: 0 0 8px 0;
  font-size: 2rem;
  font-weight: 700;
  color: #ffcc00;
}

._subtitle_krbra_24 {
  color: #9e9e9e;
  margin: 0;
  font-size: 0.95rem;
}

._backButton_krbra_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_krbra_30:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #666;
}

._loading_krbra_46, ._empty_krbra_46 {
  text-align: center;
  padding: 60px 20px;
  color: #9e9e9e;
}

._spinner_krbra_52 {
  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_krbra_52 1s linear infinite;
}

@keyframes _spin_krbra_52 {
  to { transform: rotate(360deg); }
}

/* Warning Box */
._warning_krbra_67 {
  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_krbra_67 strong {
  display: block;
  color: #ff9800;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

._warning_krbra_67 p {
  color: #ccc;
  margin: 0 0 16px 0;
}

/* Toolbar */
._toolbar_krbra_88 {
  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_krbra_100 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  flex: 1;
}

._select_krbra_108 {
  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_krbra_108:hover {
  border-color: #666;
}

._select_krbra_108:focus {
  outline: none;
  border-color: #ffcc00;
}

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

._priceInput_krbra_128 label {
  font-size: 0.85rem;
  color: #9e9e9e;
}

._pricingGroup_krbra_139 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

._priceInputInline_krbra_146 {
  display: flex;
  gap: 8px;
  align-items: center;
}

._checkboxLabel_krbra_152 {
  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_krbra_152:hover {
  border-color: #666;
}

._roundingCheckbox_krbra_171,
._checkboxLabel_krbra_152 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_krbra_152 span {
  white-space: nowrap;
}

[data-theme="light"] ._checkboxLabel_krbra_152 {
  color: #212529;
  background: #ffffff;
  border-color: #dee2e6;
}

[data-theme="light"] ._checkboxLabel_krbra_152:hover {
  border-color: #adb5bd;
}

[data-theme="light"] ._roundingCheckbox_krbra_171,
[data-theme="light"] ._checkboxLabel_krbra_152 input[type="checkbox"] {
  accent-color: #2d5e2d;
  border-color: #ccc;
  background: #fff;
}

._input_krbra_212 {
  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_krbra_212:hover {
  border-color: #666;
}

._input_krbra_212:focus {
  outline: none;
  border-color: #ffcc00;
}

._actions_krbra_233 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

._selectAllButton_krbra_239, ._pushButton_krbra_239, ._primaryButton_krbra_239, ._secondaryButton_krbra_239 {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

._selectAllButton_krbra_239 {
  background: transparent;
  border: 1px solid #444;
  color: #fff;
}

._selectAllButton_krbra_239:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #666;
}

._pushButton_krbra_239 {
  background: #ffcc00;
  color: #000;
}

._pushButton_krbra_239:hover:not(:disabled) {
  background: #ffd700;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
}

._pushButton_krbra_239:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

._updatePriceButton_krbra_277 {
  background: #2196f3;
  color: #fff;
}

._updatePriceButton_krbra_277:hover:not(:disabled) {
  background: #1976d2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

._updatePriceButton_krbra_277:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

._deallocateButton_krbra_294 {
  background: #f44336;
  color: #fff;
}

._deallocateButton_krbra_294:hover:not(:disabled) {
  background: #d32f2f;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

._deallocateButton_krbra_294:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

._allocatedNote_krbra_311 {
  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_krbra_239 {
  background: #ffcc00;
  color: #000;
}

._primaryButton_krbra_239:hover {
  background: #ffd700;
}

._secondaryButton_krbra_239 {
  background: transparent;
  border: 1px solid #444;
  color: #fff;
}

._secondaryButton_krbra_239:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #666;
}

/* Collection Grid */
._collection_krbra_344 {
  margin-top: 30px;
}

._grid_krbra_348 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

._card_krbra_354 {
  background: #1a1a1a;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

._card_krbra_354:hover {
  border-color: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

._card_krbra_354._selected_krbra_370 {
  border-color: #ffcc00;
  background: rgba(255, 204, 0, 0.05);
}

._card_krbra_354._allocated_krbra_311 {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.03);
}

._card_krbra_354._allocated_krbra_311._selected_krbra_370 {
  border-color: #ffcc00;
  background: rgba(255, 204, 0, 0.05);
}

._cardCheckbox_krbra_385 {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

._cardCheckbox_krbra_385 input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #ffcc00;
}

._shopifyBadge_krbra_399 {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 28px;
  height: 32px;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 1;
}

._shopifyBadge_krbra_399 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

._card_krbra_354:hover ._shopifyBadge_krbra_399 {
  opacity: 1;
}

._cardInfo_krbra_421 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._cardName_krbra_427 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 32px;
}

._foilBadge_krbra_437 {
  background: linear-gradient(135deg, #ffd700, #ffcc00, #ff8c00);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

._cardDetails_krbra_446 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: #9e9e9e;
}

._quantity_krbra_454 {
  font-size: 0.9rem;
  color: #4caf50;
  font-weight: 600;
}

._marketPrice_krbra_460 {
  font-size: 0.95rem;
  color: #4caf50;
  font-weight: 600;
  padding: 4px 0;
}

[data-theme="light"] ._marketPrice_krbra_460 {
  color: #2e7d32;
}

._calculatedPrice_krbra_471 {
  font-size: 0.95rem;
  color: #3b82f6;
  font-weight: 600;
  padding: 4px 0;
}

[data-theme="light"] ._calculatedPrice_krbra_471 {
  color: #1d4ed8;
}

._pricingHint_krbra_482 {
  font-size: 0.75rem;
  color: #9e9e9e;
  font-weight: 400;
}

[data-theme="light"] ._pricingHint_krbra_482 {
  color: #6c757d;
}

._sku_krbra_492 {
  font-size: 0.8rem;
  color: #666;
  font-family: 'Courier New', monospace;
}

/* Light Mode Overrides */
[data-theme="light"] ._container_krbra_1 {
  background: #f5f5f5;
  color: #212529;
}

[data-theme="light"] ._header_krbra_10 h1 {
  color: #2d5e2d;
}

[data-theme="light"] ._subtitle_krbra_24 {
  color: #6c757d;
}

[data-theme="light"] ._backButton_krbra_30 {
  background: #ffffff;
  border-color: #dee2e6;
  color: #212529;
}

[data-theme="light"] ._backButton_krbra_30:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

[data-theme="light"] ._loading_krbra_46,
[data-theme="light"] ._empty_krbra_46 {
  color: #6c757d;
}

[data-theme="light"] ._spinner_krbra_52 {
  border-color: rgba(45, 94, 45, 0.1);
  border-top-color: #2d5e2d;
}

[data-theme="light"] ._warning_krbra_67 {
  background: rgba(255, 152, 0, 0.1);
  border-color: rgba(255, 152, 0, 0.3);
}

[data-theme="light"] ._warning_krbra_67 strong {
  color: #e65100;
}

[data-theme="light"] ._warning_krbra_67 p {
  color: #424242;
}

[data-theme="light"] ._toolbar_krbra_88 {
  background: #ffffff;
  border: 1px solid #dee2e6;
}

[data-theme="light"] ._select_krbra_108 {
  background: #ffffff;
  border-color: #ced4da;
  color: #212529;
}

[data-theme="light"] ._select_krbra_108:hover {
  border-color: #adb5bd;
}

[data-theme="light"] ._select_krbra_108:focus {
  border-color: #2d5e2d;
}

[data-theme="light"] ._priceInput_krbra_128 label {
  color: #6c757d;
}

[data-theme="light"] ._input_krbra_212 {
  background: #ffffff;
  border-color: #ced4da;
  color: #212529;
}

[data-theme="light"] ._input_krbra_212:hover {
  border-color: #adb5bd;
}

[data-theme="light"] ._input_krbra_212:focus {
  border-color: #2d5e2d;
}

[data-theme="light"] ._selectAllButton_krbra_239 {
  background: #ffffff;
  border-color: #dee2e6;
  color: #212529;
}

[data-theme="light"] ._selectAllButton_krbra_239:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

[data-theme="light"] ._pushButton_krbra_239 {
  background: #2d5e2d;
  color: #ffffff;
}

[data-theme="light"] ._pushButton_krbra_239:hover:not(:disabled) {
  background: #3d6e3d;
  box-shadow: 0 4px 12px rgba(45, 94, 45, 0.3);
}

[data-theme="light"] ._updatePriceButton_krbra_277 {
  background: #1976d2;
  color: #ffffff;
}

[data-theme="light"] ._updatePriceButton_krbra_277:hover:not(:disabled) {
  background: #1565c0;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

[data-theme="light"] ._deallocateButton_krbra_294 {
  background: #d32f2f;
  color: #ffffff;
}

[data-theme="light"] ._deallocateButton_krbra_294:hover:not(:disabled) {
  background: #c62828;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}

[data-theme="light"] ._allocatedNote_krbra_311 {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.4);
  color: #2e7d32;
}

[data-theme="light"] ._primaryButton_krbra_239 {
  background: #2d5e2d;
  color: #ffffff;
}

[data-theme="light"] ._primaryButton_krbra_239:hover {
  background: #3d6e3d;
}

[data-theme="light"] ._secondaryButton_krbra_239 {
  background: #ffffff;
  border-color: #dee2e6;
  color: #212529;
}

[data-theme="light"] ._secondaryButton_krbra_239:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

[data-theme="light"] ._card_krbra_354 {
  background: #ffffff;
  border-color: #dee2e6;
}

[data-theme="light"] ._card_krbra_354:hover {
  border-color: #adb5bd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] ._card_krbra_354._selected_krbra_370 {
  border-color: #2d5e2d;
  background: rgba(45, 94, 45, 0.05);
}

[data-theme="light"] ._card_krbra_354._allocated_krbra_311 {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.05);
}

[data-theme="light"] ._card_krbra_354._allocated_krbra_311._selected_krbra_370 {
  border-color: #2d5e2d;
  background: rgba(45, 94, 45, 0.05);
}

[data-theme="light"] ._checkbox_krbra_152 input[type="checkbox"] {
  accent-color: #2d5e2d;
}

[data-theme="light"] ._cardName_krbra_427 {
  color: #212529;
}

[data-theme="light"] ._foilBadge_krbra_437 {
  background: linear-gradient(135deg, #ffd700, #ffcc00, #ff8c00);
}

[data-theme="light"] ._cardDetails_krbra_446 {
  color: #6c757d;
}

[data-theme="light"] ._quantity_krbra_454 {
  color: #2e7d32;
}

[data-theme="light"] ._sku_krbra_492 {
  color: #9e9e9e;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  ._container_krbra_1 {
    padding: 20px 12px;
  }
  
  ._header_krbra_10 {
    flex-direction: column;
    gap: 16px;
  }
  
  ._header_krbra_10 h1 {
    font-size: 1.5rem;
  }
  
  ._backButton_krbra_30 {
    width: 100%;
  }
  
  ._toolbar_krbra_88 {
    flex-direction: column;
    align-items: stretch;
  }
  
  ._filters_krbra_100 {
    flex-direction: column;
  }
  
  ._select_krbra_108, ._input_krbra_212 {
    width: 100%;
  }
  
  ._actions_krbra_233 {
    flex-direction: column;
  }
  
  ._selectAllButton_krbra_239, ._pushButton_krbra_239 {
    width: 100%;
  }
  
  ._grid_krbra_348 {
    grid-template-columns: 1fr;
  }
}
._container_do0w6_1 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

._header_do0w6_7 {
  margin-bottom: 40px;
}

._header_do0w6_7 h1 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}

._subtitle_do0w6_18 {
  font-size: 16px;
  color: #9ca3af;
  margin: 0;
}

._loading_do0w6_24 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 20px;
  color: #fff;
}

._spinner_do0w6_34 {
  width: 40px;
  height: 40px;
  border: 4px solid #333;
  border-top-color: #ffcc00;
  border-radius: 50%;
  animation: _spin_do0w6_34 1s linear infinite;
}

@keyframes _spin_do0w6_34 {
  to { transform: rotate(360deg); }
}

._error_do0w6_47 {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
}

._error_do0w6_47 h2 {
  color: #ef4444;
  margin: 0 0 12px 0;
}

._error_do0w6_47 p {
  color: #9ca3af;
  margin: 0 0 24px 0;
}

._error_do0w6_47 button {
  background: #ffcc00;
  color: #000;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

._error_do0w6_47 button:hover {
  background: #e6b800;
}

._contentGrid_do0w6_80 {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
}

@media (max-width: 968px) {
  ._contentGrid_do0w6_80 {
    grid-template-columns: 1fr;
  }
}

/* Quick Actions */
._quickActions_do0w6_93 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._quickActions_do0w6_93 h2 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px 0;
}

._actionButton_do0w6_106 {
  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_do0w6_106:hover {
  background: #0f0f0f;
  border-color: #ffcc00;
  transform: translateY(-2px);
}

._actionIcon_do0w6_125 {
  font-size: 32px;
  flex-shrink: 0;
}

._actionContent_do0w6_130 {
  flex: 1;
}

._actionTitle_do0w6_134 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

._actionDesc_do0w6_141 {
  font-size: 14px;
  color: #9ca3af;
}

/* Shopify Widget */
._shopifyWidget_do0w6_147 {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  overflow: hidden;
}

._widgetHeader_do0w6_154 {
  background: #0f0f0f;
  border-bottom: 1px solid #333;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._widgetHeader_do0w6_154 h2 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

._connectedBadge_do0w6_170 {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

._disconnectedState_do0w6_179 {
  padding: 40px 24px;
  text-align: center;
}

._shopifyIcon_do0w6_184 {
  font-size: 64px;
  margin-bottom: 16px;
}

._disconnectedState_do0w6_179 h3 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px 0;
}

._disconnectedState_do0w6_179 p {
  font-size: 16px;
  color: #9ca3af;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

._featureList_do0w6_203 {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  text-align: left;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

._featureList_do0w6_203 li {
  font-size: 14px;
  color: #9ca3af;
  padding: 8px 0;
  border-bottom: 1px solid #333;
}

._featureList_do0w6_203 li:last-child {
  border-bottom: none;
}

._connectButton_do0w6_224 {
  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_do0w6_224:hover {
  background: #e6b800;
  transform: translateY(-2px);
}

._connectedState_do0w6_241 {
  padding: 24px;
}

._storeInfo_do0w6_245 {
  background: #0f0f0f;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

._infoRow_do0w6_253 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

._infoRow_do0w6_253:not(:last-child) {
  border-bottom: 1px solid #333;
}

._infoLabel_do0w6_264 {
  font-size: 14px;
  color: #9ca3af;
}

._infoValue_do0w6_269 {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

._statusActive_do0w6_275 {
  font-size: 14px;
  font-weight: 600;
  color: #10b981;
}

._salesGrid_do0w6_281 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  ._salesGrid_do0w6_281 {
    grid-template-columns: 1fr;
  }
}

._salesStat_do0w6_294 {
  background: #0f0f0f;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px;
}

._statLabel_do0w6_301 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  margin-bottom: 8px;
}

._statValue_do0w6_310 {
  font-size: 24px;
  font-weight: 700;
  color: #ffcc00;
  margin-bottom: 4px;
}

._statCommission_do0w6_317 {
  font-size: 14px;
  color: #10b981;
}

._viewDetails_do0w6_322 {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

._viewDetails_do0w6_322:hover {
  text-decoration: underline;
}

._widgetActions_do0w6_332 {
  display: flex;
  gap: 12px;
}

@media (max-width: 640px) {
  ._widgetActions_do0w6_332 {
    flex-direction: column;
  }
}

._primaryBtn_do0w6_343 {
  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_do0w6_343:hover {
  background: #e6b800;
}

._secondaryBtn_do0w6_360 {
  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_do0w6_360:hover {
  background: #0f0f0f;
  border-color: #ffcc00;
}

._viewSalesBtn_do0w6_378 {
  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_do0w6_378:hover {
  background: #2563eb;
}

._salesList_do0w6_396 {
  background: #0f0f0f;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

._salesList_do0w6_396 h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px 0;
}

._salesTable_do0w6_411 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._salesTableHeader_do0w6_417 {
  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_do0w6_431 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background: #1a1a1a;
  font-size: 14px;
  color: #fff;
}

._salesTableRow_do0w6_431:last-child {
  border-radius: 0 0 6px 6px;
}

._salesTableRow_do0w6_431:hover {
  background: #0f0f0f;
}

@media (max-width: 640px) {
  ._salesTableHeader_do0w6_417,
  ._salesTableRow_do0w6_431 {
    grid-template-columns: 1fr 0.8fr 0.8fr 0.8fr 0.6fr;
    gap: 8px;
    padding: 10px;
    font-size: 12px;
  }
}

/* Account Billing Page Styles */
._container_1moyw_2 {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

._pageTitle_1moyw_8 {
  font-size: 32px;
  font-weight: bold;
  color: var(--text-primary, #fff);
  margin-bottom: 32px;
  text-align: center;
}

._loading_1moyw_16,
._error_1moyw_17 {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: var(--text-secondary, #888);
}

._error_1moyw_17 {
  color: var(--error-color, #f44336);
}

/* Notice Card */
._noticeCard_1moyw_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_1moyw_39 {
  font-size: 32px;
  flex-shrink: 0;
}

._noticeContent_1moyw_44 {
  flex: 1;
}

._noticeTitle_1moyw_48 {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color, #ffcc00);
  margin: 0 0 8px 0;
}

._noticeContent_1moyw_44 p {
  margin: 0;
  color: var(--text-primary, #fff);
  line-height: 1.5;
}

/* Card Styles */
._card_1moyw_62 {
  background: var(--card-bg, #1a1a1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

._cardTitle_1moyw_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_1moyw_80 {
  color: var(--text-primary, #fff);
  margin: 12px 0;
  font-size: 16px;
}

._accountInfo_1moyw_80 strong {
  color: var(--primary-color, #ffcc00);
  margin-right: 8px;
}

/* Status Badge */
._statusBadge_1moyw_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_1moyw_92[data-status="trial"] {
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
  border: 2px solid #2196f3;
}

._statusBadge_1moyw_92[data-status="active"] {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border: 2px solid #4caf50;
}

._statusBadge_1moyw_92[data-status="past_due"] {
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
  border: 2px solid #ff9800;
}

._statusBadge_1moyw_92[data-status="cancelled"] {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
  border: 2px solid #f44336;
}

/* Plan Info */
._planInfo_1moyw_128 {
  margin-top: 20px;
}

._planHeader_1moyw_132 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

._planHeader_1moyw_132 h3 {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-primary, #fff);
  margin: 0;
}

._planPrice_1moyw_146 {
  font-size: 36px;
  font-weight: bold;
  color: var(--primary-color, #ffcc00);
}

._planPrice_1moyw_146 span {
  font-size: 16px;
  color: var(--text-secondary, #888);
}

/* Trial Info */
._trialInfo_1moyw_158 {
  background: rgba(33, 150, 243, 0.1);
  border-left: 4px solid #2196f3;
  padding: 16px;
  border-radius: 4px;
  margin-top: 16px;
}

._trialInfo_1moyw_158 p {
  margin: 8px 0;
  color: var(--text-primary, #fff);
}

._trialNote_1moyw_171 {
  font-size: 14px;
  color: var(--text-secondary, #888);
}

/* Plan Details */
._planDetails_1moyw_177 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._detailRow_1moyw_183 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--card-bg-secondary, #0f0f0f);
  border-radius: 6px;
}

._detailLabel_1moyw_192 {
  color: var(--text-secondary, #888);
  font-size: 14px;
}

._detailValue_1moyw_197 {
  color: var(--text-primary, #fff);
  font-weight: bold;
  font-size: 16px;
}

/* Connection Status */
._connectionStatus_1moyw_204 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._connectionIcon_1moyw_210 {
  font-size: 32px;
  flex-shrink: 0;
}

._connectionStatus_1moyw_204 p {
  margin: 4px 0;
  color: var(--text-primary, #fff);
}

._connectionDate_1moyw_220 {
  font-size: 14px;
  color: var(--text-secondary, #888);
}

/* Upgrade Section */
._upgradeSection_1moyw_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_1moyw_226 h3 {
  font-size: 24px;
  color: var(--text-primary, #fff);
  margin: 0 0 12px 0;
}

._upgradeSection_1moyw_226 p {
  font-size: 16px;
  color: var(--text-secondary, #888);
  margin: 0 0 24px 0;
}

/* Buttons */
._primaryButton_1moyw_248,
._secondaryButton_1moyw_249,
._dangerButton_1moyw_250 {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

._primaryButton_1moyw_248 {
  background: var(--primary-color, #ffcc00);
  color: #000;
}

._primaryButton_1moyw_248:hover {
  background: var(--primary-color-hover, #ffd700);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
}

._secondaryButton_1moyw_249 {
  background: var(--card-bg-secondary, #2a2a2a);
  color: var(--text-primary, #fff);
  border: 2px solid var(--border-color, #444);
  margin-top: 12px;
}

._secondaryButton_1moyw_249:hover:not(:disabled) {
  border-color: var(--primary-color, #ffcc00);
  transform: translateY(-2px);
}

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

._dangerButton_1moyw_250 {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
  border: 2px solid #f44336;
}

._dangerButton_1moyw_250:hover:not(:disabled) {
  background: rgba(244, 67, 54, 0.2);
  transform: translateY(-2px);
}

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

/* Actions */
._actions_1moyw_305 {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  ._container_1moyw_2 {
    padding: 20px 16px;
  }

  ._pageTitle_1moyw_8 {
    font-size: 24px;
  }

  ._planHeader_1moyw_132 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  ._actions_1moyw_305 {
    flex-direction: column;
  }

  ._primaryButton_1moyw_248,
  ._secondaryButton_1moyw_249,
  ._dangerButton_1moyw_250 {
    width: 100%;
  }
  
  ._salesGrid_1moyw_338 {
    grid-template-columns: 1fr !important;
  }
}

/* Sales Summary Styles */
._salesGrid_1moyw_338 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

._salesStat_1moyw_351 {
  background: var(--card-bg-secondary, #0f0f0f);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border-color, #333);
}

._salesLabel_1moyw_359 {
  font-size: 14px;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

._salesValue_1moyw_367 {
  font-size: 28px;
  font-weight: bold;
  color: var(--primary-color, #ffcc00);
}

._unbilledNotice_1moyw_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_1moyw_383 {
  font-size: 14px;
  color: var(--text-secondary, #888);
}

._commissionNote_1moyw_388 {
  background: var(--card-bg-secondary, #0f0f0f);
  border-radius: 6px;
  padding: 16px;
  border-left: 4px solid var(--primary-color, #ffcc00);
}

._commissionNote_1moyw_388 p {
  margin: 0;
  color: var(--text-primary, #fff);
  font-size: 14px;
  line-height: 1.6;
}
._container_b1neu_1 {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  background: #1a1a1a;
  min-height: 100vh;
}

._header_b1neu_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_b1neu_9 h1 {
  color: #fff;
  font-size: 2rem;
  margin: 0 0 20px 0;
  font-weight: 600;
  text-align: center;
}

._businessInfo_b1neu_26 {
  margin: 15px 0;
}

._businessName_b1neu_30 {
  font-size: 1.5rem;
  color: #8a9d8a;
  font-weight: 600;
  margin: 0;
}

._welcomeMessage_b1neu_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_b1neu_37 p {
  color: #ccc;
  line-height: 1.6;
  margin: 10px 0;
}

._welcomeMessage_b1neu_37 strong {
  color: #fff;
}

._welcomeMessage_b1neu_37 em {
  color: #999;
  font-size: 0.95rem;
}

._form_b1neu_61 {
  background: #2a2a2a;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #333;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

._section_b1neu_71 {
  margin-bottom: 40px;
  padding-bottom: 30px;
  padding-top: 30px;
  border-bottom: 1px solid #333;
  border-top: 1px solid #444;
}

._section_b1neu_71:first-of-type {
  padding-top: 0;
  border-top: none;
}

._section_b1neu_71:last-of-type {
  border-bottom: none;
}

._section_b1neu_71 h2 {
  color: #8a9d8a;
  font-size: 1.5rem;
  margin: 0 0 20px 0;
  font-weight: 600;
  text-align: center;
}

._field_b1neu_96 {
  margin-bottom: 20px;
}

._field_b1neu_96 label {
  display: block;
  color: #ddd;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

._field_b1neu_96 input[type="text"],
._field_b1neu_96 input[type="email"],
._field_b1neu_96 select,
._field_b1neu_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_b1neu_96 input:focus,
._field_b1neu_96 select:focus,
._field_b1neu_96 textarea:focus {
  outline: none;
  border-color: #8a9d8a;
}

._field_b1neu_96 select {
  cursor: pointer;
}

._field_b1neu_96 textarea {
  resize: vertical;
  min-height: 80px;
}

._field_b1neu_96 input::placeholder,
._field_b1neu_96 textarea::placeholder {
  color: #666;
}

._checkboxGroup_b1neu_144 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}

._checkboxGroup_b1neu_144 label {
  display: flex;
  align-items: center;
  color: #ddd;
  font-weight: normal;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

._checkboxGroup_b1neu_144 label:hover {
  background: rgba(138, 157, 138, 0.05);
}

._checkboxGroup_b1neu_144 input[type="checkbox"] {
  margin-right: 4px !important;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #8a9d8a;
  flex-shrink: 0;
}

._submitSection_b1neu_175 {
  margin-top: 40px;
  text-align: center;
  padding-top: 30px;
  border-top: 2px solid #333;
}

._submitButton_b1neu_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_b1neu_182:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(138, 157, 138, 0.4);
}

._submitButton_b1neu_182:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._disclaimer_b1neu_205 {
  color: #888;
  font-size: 0.85rem;
  margin-top: 20px;
  line-height: 1.5;
}

._successCard_b1neu_212 {
  background: #2a2a2a;
  padding: 60px 40px;
  border-radius: 12px;
  border: 1px solid #333;
  text-align: center;
  margin-top: 40px;
}

._successIcon_b1neu_221 {
  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_b1neu_212 h1 {
  color: #fff;
  font-size: 2rem;
  margin: 0 0 20px 0;
}

._successCard_b1neu_212 p {
  color: #ccc;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 15px 0;
  text-align: center;
}

._successCard_b1neu_212 a {
  color: #8a9d8a;
  text-decoration: none;
  font-weight: 500;
}

._successCard_b1neu_212 a:hover {
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
  ._container_b1neu_1 {
    padding: 20px 10px;
  }

  ._header_b1neu_9 {
    padding: 20px 15px;
  }

  ._header_b1neu_9 h1 {
    font-size: 1.5rem;
  }

  ._businessName_b1neu_30 {
    font-size: 1.2rem;
  }

  ._form_b1neu_61 {
    padding: 20px 15px;
  }

  ._section_b1neu_71 h2 {
    font-size: 1.2rem;
  }

  ._welcomeMessage_b1neu_37 {
    padding: 15px;
  }

  ._submitButton_b1neu_182 {
    padding: 14px 40px;
    font-size: 1rem;
  }
}