/* CardForge UI Enhancements
   Added to support improved user flows and UI/UX
   Updated: 2025-07-06
*/

/* Tabbed Sections */

/* Stepper Tabs */
.cf-stepper {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--mood-accent-color, #4a4a6a);
  margin-bottom: 1rem;

  background: var(--aura-bg-color, #1a1a2e);
  padding-top: 0.25rem;
}
.step-btn {
  background: transparent;
  border: none;
  padding: 0.5rem 1rem;
  color: var(--mood-secondary-color, #a0a0c0);
  font-family: inherit;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.step-btn:hover {
  color: var(--mood-primary-color, #e1e1ff);
}
.step-btn.active {
  color: var(--mood-primary-color, #e1e1ff);
  border-color: var(--mood-primary-color, #e1e1ff);
}
.cardforge-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.cardforge-dialog.active {
  display: flex;
}

.cardforge-dialog-content {
  background-color: var(--aura-bg-color, #1a1a2e);
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 8px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  transform: translateY(-20px);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cardforge-dialog.active .cardforge-dialog-content {
  transform: translateY(0);
  opacity: 1;
}

.cardforge-dialog h3 {
  margin-top: 0;
  color: var(--mood-primary-color, #e1e1ff);
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* Message Notifications */
.cardforge-message-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
}

.cardforge-message {
  padding: 12px 16px;
  border-radius: 6px;
  background-color: var(--aura-bg-color, #1a1a2e);
  border-left: 4px solid var(--mood-accent-color, #4a4a6a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  animation: slide-in 0.3s ease-out;
}

.cardforge-message-success {
  border-left-color: #4CAF50;
}

.cardforge-message-error {
  border-left-color: #F44336;
}

.cardforge-message-info {
  border-left-color: #2196F3;
}

.message-icon {
  margin-right: 10px;
  font-size: 18px;
}

.message-text {
  flex: 1;
}

/* ===== MODULAR SYSTEM STYLING ===== */

.modular-system {
  margin-bottom: 2rem;
}

/* ===== PRESETS SECTION ===== */

.presets-section {
  background: var(--aura-bg-secondary, #2a2a3e);
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.presets-title {
  color: var(--mood-primary-color, #00d4ff);
  font-size: 1.2em;
  font-weight: 600;
  margin: 0 0 1rem 0;
  text-align: center;
}

.presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.preset-btn {
  background: var(--aura-bg-color, #1a1a2e);
  border: 2px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 8px;
  padding: 1rem 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  font-family: inherit;
  color: var(--mood-text-primary, #e1e1ff);
}

.preset-btn:hover {
  border-color: var(--mood-primary-color, #00d4ff);
  background: var(--aura-bg-secondary, #2a2a3e);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.preset-btn.active {
  border-color: var(--mood-primary-color, #00d4ff);
  background: var(--mood-primary-color, #00d4ff);
  color: var(--aura-bg-color, #1a1a2e);
}

.preset-preview {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.preset-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  position: relative;
}

/* Preset Icon Styles */
.hero-classic-icon {
  background: linear-gradient(135deg, var(--mood-primary-color, #00d4ff) 0%, var(--aura-cyan) 100%);
  border-radius: 50%;
}

.split-modern-icon {
  background: linear-gradient(90deg, var(--aura-violet) 0%, var(--aura-violet) 50%, var(--mood-accent-color, #4a4a6a) 50%, var(--mood-accent-color, #4a4a6a) 100%);
  border-radius: 2px;
}

.minimal-glow-icon {
  background: var(--aura-bg-secondary, #2a2a3e);
  border: 2px solid var(--mood-primary-color, #00d4ff);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

.fullbleed-cinematic-icon {
  background: linear-gradient(135deg, var(--aura-red) 0%, var(--aura-orange) 100%);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.fullbleed-cinematic-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.framed-ornate-icon {
  background: var(--aura-bg-color, #1a1a2e);
  border: 3px solid var(--mood-primary-color, #00d4ff);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--aura-bg-secondary, #2a2a3e), 0 0 6px rgba(0, 212, 255, 0.3);
}

.preset-label {
  font-size: 0.9em;
  font-weight: 600;
  color: inherit;
  margin: 0;
}

.preset-desc {
  font-size: 0.75em;
  color: var(--mood-text-secondary, #a0a0c0);
  margin: 0;
  line-height: 1.2;
}

/* Tabbed Sections */

/* Stepper Tabs */
.cf-stepper {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--mood-accent-color, #4a4a6a);
  margin-bottom: 1rem;

  background: var(--aura-bg-color, #1a1a2e);
  padding-top: 0.25rem;
}
.step-btn {
  background: transparent;
  border: none;
  padding: 0.5rem 1rem;
  color: var(--mood-secondary-color, #a0a0c0);
  font-family: inherit;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.step-btn:hover {
  color: var(--mood-primary-color, #e1e1ff);
}
.step-btn.active {
  color: var(--mood-primary-color, #e1e1ff);
  border-color: var(--mood-primary-color, #e1e1ff);
}
.cardforge-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.cardforge-dialog.active {
  display: flex;
}

.cardforge-dialog-content {
  background-color: var(--aura-bg-color, #1a1a2e);
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 8px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  transform: translateY(-20px);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cardforge-dialog.active .cardforge-dialog-content {
  transform: translateY(0);
  opacity: 1;
}

.cardforge-dialog h3 {
  margin-top: 0;
  color: var(--mood-primary-color, #e1e1ff);
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* Message Notifications */
.cardforge-message-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
}

.cardforge-message {
  padding: 12px 16px;
  border-radius: 6px;
  background-color: var(--aura-bg-color, #1a1a2e);
  border-left: 4px solid var(--mood-accent-color, #4a4a6a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  animation: slide-in 0.3s ease-out;
}

.cardforge-message-success {
  border-left-color: #4CAF50;
}

.cardforge-message-error {
  border-left-color: #F44336;
}

.cardforge-message-info {
  border-left-color: #2196F3;
}

.message-icon {
  margin-right: 10px;
  font-size: 18px;
}

.message-text {
  flex: 1;
}

/* ===== MODULAR SYSTEM STYLING ===== */

.modular-system {
  margin-bottom: 2rem;
}

/* ===== PRESETS SECTION ===== */

.presets-section {
  background: var(--aura-bg-secondary, #2a2a3e);
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.presets-title {
  color: var(--mood-primary-color, #00d4ff);
  font-size: 1.2em;
  font-weight: 600;
  margin: 0 0 1rem 0;
  text-align: center;
}

.presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.preset-btn {
  background: var(--aura-bg-color, #1a1a2e);
  border: 2px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 8px;
  padding: 1rem 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  font-family: inherit;
  color: var(--mood-text-primary, #e1e1ff);
}

.preset-btn:hover {
  border-color: var(--mood-primary-color, #00d4ff);
  background: var(--aura-bg-secondary, #2a2a3e);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.preset-btn.active {
  border-color: var(--mood-primary-color, #00d4ff);
  background: var(--mood-primary-color, #00d4ff);
  color: var(--aura-bg-color, #1a1a2e);
}

.preset-preview {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.preset-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  position: relative;
}

/* Preset Icon Styles */
.hero-classic-icon {
  background: linear-gradient(135deg, var(--mood-primary-color, #00d4ff) 0%, var(--aura-cyan) 100%);
  border-radius: 50%;
}

.split-modern-icon {
  background: linear-gradient(90deg, var(--aura-violet) 0%, var(--aura-violet) 50%, var(--mood-accent-color, #4a4a6a) 50%, var(--mood-accent-color, #4a4a6a) 100%);
  border-radius: 2px;
}

.minimal-glow-icon {
  background: var(--aura-bg-secondary, #2a2a3e);
  border: 2px solid var(--mood-primary-color, #00d4ff);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

.fullbleed-cinematic-icon {
  background: linear-gradient(135deg, var(--aura-red) 0%, var(--aura-orange) 100%);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.fullbleed-cinematic-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.framed-ornate-icon {
  background: var(--aura-bg-color, #1a1a2e);
  border: 3px solid var(--mood-primary-color, #00d4ff);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--aura-bg-secondary, #2a2a3e), 0 0 6px rgba(0, 212, 255, 0.3);
}

.preset-label {
  font-size: 0.9em;
  font-weight: 600;
  color: inherit;
  margin: 0;
}

.preset-desc {
  font-size: 0.75em;
  color: var(--mood-text-secondary, #a0a0c0);
  margin: 0;
  line-height: 1.2;
}

.preset-btn.active .preset-desc {
  color: var(--aura-bg-secondary, #2a2a3e);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .presets-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
  }
  
  .preset-btn {
    padding: 0.75rem 0.5rem;
  }
  
  .preset-icon {
    width: 28px;
    height: 28px;
  }
}

/* ===== MODULAR SYSTEM UI STYLING ===== */
.modular-system-container {
  margin: 20px 0;
  padding: 16px;
  background: var(--aura-bg-color, #1a1a2e);
  border-radius: 8px;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
}

.modular-tier {
  margin-bottom: 24px;
}

.modular-tier:last-child {
  margin-bottom: 0;
}

.tier-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mood-text-primary, #ffffff);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tier-title::before {
  content: "";
  width: 4px;
  height: 16px;
  background: var(--mood-accent-color, #4a4a6a);
  border-radius: 2px;
}

/* TIER 1: LAYOUT OPTIONS */
.tier-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.tier-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: var(--aura-bg-secondary, #2a2a4e);
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.tier-option:hover {
  border-color: var(--mood-accent-color, #4a4a6a);
  background: var(--aura-bg-hover, #3a3a5e);
}

.tier-option.selected {
  border-color: var(--mood-primary-color, #00d4ff);
  background: var(--aura-bg-active, #1a4a5e);
}

.option-preview {
  width: 40px;
  height: 30px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-icon {
  width: 32px;
  height: 24px;
  background: var(--mood-text-secondary, #cccccc);
  border-radius: 2px;
  position: relative;
}

/* Layout icon styles */
.hero-icon {
  background: linear-gradient(to bottom, var(--mood-primary-color, #00d4ff) 0%, var(--mood-primary-color, #00d4ff) 40%, var(--mood-text-secondary, #cccccc) 40%);
}

.raw-icon {
  background: linear-gradient(135deg, var(--aura-violet) 0%, var(--aura-cyan) 100%);
  border-radius: 2px;
}

.fullbleed-icon {
  background: linear-gradient(135deg, var(--aura-red) 0%, var(--aura-orange) 100%);
  border-radius: 0;
  position: relative;
}

.fullbleed-icon::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--aura-red), var(--aura-orange));
  border-radius: 0;
  z-index: -1;
}

.split-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: var(--mood-primary-color, #00d4ff);
  border-radius: 2px 0 0 2px;
}

.minimal-icon {
  height: 16px;
  background: var(--mood-text-secondary, #cccccc);
}

.overlay-icon {
  background: var(--mood-primary-color, #00d4ff);
  opacity: 0.8;
}

.stack-icon::before,
.stack-icon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 6px;
  background: var(--mood-primary-color, #00d4ff);
  border-radius: 1px;
}

.stack-icon::before {
  top: 2px;
}

.stack-icon::after {
  bottom: 2px;
}

.frame-icon {
  border: 3px solid var(--mood-primary-color, #00d4ff);
  background: transparent;
}

/* TIER 2: ALIGNMENT ICONS */
.alignment-icon {
  width: 32px;
  height: 24px;
  background: var(--mood-text-secondary, #cccccc);
  border-radius: 2px;
  position: relative;
}

.left-align-icon::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: var(--mood-primary-color, #00d4ff);
  border-radius: 1px;
}

.center-align-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 16px;
  background: var(--mood-primary-color, #00d4ff);
  border-radius: 1px;
}

.right-align-icon::before {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: var(--mood-primary-color, #00d4ff);
  border-radius: 1px;
}

/* TIER 3: WEIGHT ICONS */
.weight-icon {
  width: 24px;
  height: 24px;
  background: var(--aura-glow);
  border-radius: 4px;
  position: relative;
}

.weight-icon.top-heavy::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 6px;
  background: var(--mood-primary);
  border-radius: 3px;
}

.weight-icon.top-heavy::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  height: 4px;
  background: var(--mood-primary-color, #00d4ff);
  border-radius: 1px;
}

.balanced-icon::before {
  top: 4px;
}

.balanced-icon::after {
  bottom: 4px;
}

.bottom-heavy-icon::before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  height: 8px;
  background: var(--mood-primary-color, #00d4ff);
  border-radius: 1px;
}

/* Grid adjustments for alignment and weight */
.alignment-grid {
  grid-template-columns: repeat(3, 1fr);
}

.weight-grid {
  grid-template-columns: repeat(3, 1fr);
}

.option-label {
  font-size: 12px;
  color: var(--mood-text-secondary, #cccccc);
  font-weight: 500;
}

.tier-option.selected .option-label {
  color: var(--mood-primary-color, #00d4ff);
}

/* TIER 4: PALETTE OPTIONS */
.palette-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.palette-families {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 12px;
}

.palette-family {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: var(--aura-bg-secondary, #2a2a4e);
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.palette-family:hover {
  border-color: var(--mood-accent-color, #4a4a6a);
  background: var(--aura-bg-hover, #3a3a5e);
}

.palette-family.selected {
  border-color: var(--mood-primary-color, #00d4ff);
  background: var(--aura-bg-active, #1a4a5e);
}

.palette-preview {
  width: 40px;
  height: 24px;
  border-radius: 4px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}

/* Palette preview colors */
.neon-preview {
  background: linear-gradient(45deg, #00d4ff, #ff00ff, #00ff88);
}

.earth-preview {
  background: linear-gradient(45deg, #8B4513, #228B22, #DAA520);
}

.ocean-preview {
  background: linear-gradient(45deg, #006994, #0099cc, #66ccff);
}

.sunset-preview {
  background: linear-gradient(45deg, #ff6b35, #f7931e, #ffcd3c);
}

.monochrome-preview {
  background: linear-gradient(45deg, #333333, #666666, #999999);
}

.palette-label {
  font-size: 12px;
  color: var(--mood-text-secondary, #cccccc);
  font-weight: 500;
}

.palette-family.selected .palette-label {
  color: var(--mood-primary-color, #00d4ff);
}

/* Variant toggles */
.variant-toggles {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.variant-toggle {
  padding: 8px 16px;
  background: var(--aura-bg-secondary, #2a2a4e);
  border: 2px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variant-toggle:hover {
  border-color: var(--mood-accent-color, #4a4a6a);
  background: var(--aura-bg-hover, #3a3a5e);
}

.variant-toggle.selected {
  border-color: var(--mood-primary-color, #00d4ff);
  background: var(--aura-bg-active, #1a4a5e);
}

.variant-label {
  font-size: 12px;
  color: var(--mood-text-secondary, #cccccc);
  font-weight: 500;
}

.variant-toggle.selected .variant-label {
  color: var(--mood-primary-color, #00d4ff);
}

/* Responsive design */
@media (max-width: 768px) {
  .tier-options-grid,
  .palette-families {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .modular-system-container {
    padding: 12px;
  }
  
  .tier-option,
  .palette-family {
    padding: 8px 4px;
  }
}

.message-text {
  flex: 1;
}

.cardforge-message.fade-out {
  animation: fade-out 0.5s ease-out forwards;
}

@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Gallery Styling */
.cardforge-gallery-container {
  margin-top: 30px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.cardforge-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.gallery-card {
  background-color: var(--aura-bg-color, #1a1a2e);
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.gallery-card-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-bottom: 1px solid var(--mood-accent-color, #4a4a6a);
}

.gallery-card-content {
  padding: 10px;
}

.gallery-card-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 5px 0;
}

.gallery-card-subtitle {
  font-size: 14px;
  color: var(--mood-secondary-color, #a0a0c0);
  margin: 0;
}

.gallery-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--mood-secondary-color, #a0a0c0);
}

/* Auth Status Message */
.cardforge-auth-message {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 14px;
}

/* Card List Improvements */
.cardforge-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}

.cardforge-list li {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
}

.cardforge-list li:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.card-list-thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 10px;
  object-fit: cover;
}

.card-list-info {
  flex: 1;
}

.card-list-title {
  font-weight: bold;
  margin: 0;
}

.card-list-subtitle {
  font-size: 12px;
  color: var(--mood-secondary-color, #a0a0c0);
  margin: 0;
}

/* My Cards sidebar styling */



/* Front face styling */

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-avatar {
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.card-badge, .card-rarity, .card-achievement {
  display: inline-block;
  padding: 2px 6px;
  margin: 4px 4px 4px 0;
  background: var(--mood-primary-color);
  color: #fff;
  border-radius: 4px;
  font-size: 0.85rem;
}
.stat-bar {
  display: flex;
  align-items: center;
  margin: 6px 0;
}
.stat-label {
  flex: 1;
  font-size: 0.8rem;
  color: var(--mood-secondary-color);
}
.stat-progress { /* updated by Cascade: honor width */
    flex: 0 0 auto; /* override default flex-grow */
  
  height: 8px;
  background: var(--mood-primary-color);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* My Cards sidebar styling */
.cardforge-list-item {
  justify-content: space-between;
}
.card-list.cf-section { display:none; }
.card-list-actions {
  display: flex;
  gap: 8px;
}
.card-list-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--mood-secondary-color);
}
.card-list-actions button:hover {
  color: var(--mood-primary-color);
}

.cf-section.active { display:block; }

/* Legacy card theme styles removed; see cardforge-card.css for updated variants */
/* High-specificity overrides */







/* Stats Editor Styles */

/* My Cards Sidebar Styles */
.my-card-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.my-card-thumb {
  width: 40px;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.stat-row input[name="stat-name"],
.stat-row input[name="stat-value"] {
  padding: 6px;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 4px;
  background: var(--aura-bg-color, #1a1a2e);
  color: var(--mood-primary-color, #e1e1ff);
  font-family: inherit;
}
.remove-stat {
  background: transparent;
  border: none;
  color: var(--mood-secondary-color, #a0a0c0);
  font-size: 1.2rem;
  cursor: pointer;
}
.remove-stat:hover {
  color: var(--mood-primary-color, #e1e1ff);
}
.add-stat-btn {
  background: var(--mood-accent-color, #4a4a6a);
  color: var(--aura-bg-color, #1a1a2e);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
}
.add-stat-btn:hover {
  background: var(--mood-primary-color, #e1e1ff);
}

/* Social Links Editor Styles */
.social-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.social-row input[name="social-name"],
.social-row input[name="social-url"] {
  padding: 6px;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 4px;
  background: var(--aura-bg-color, #1a1a2e);
  color: var(--mood-primary-color, #e1e1ff);
  font-family: inherit;
}
.remove-social {
  background: transparent;
  border: none;
  color: var(--mood-secondary-color, #a0a0c0);
  font-size: 1.2rem;
  cursor: pointer;
}
.remove-social:hover {
  color: var(--mood-primary-color, #e1e1ff);
}
.add-social-btn {
  background: var(--mood-accent-color, #4a4a6a);
  color: var(--aura-bg-color, #1a1a2e);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
}
.add-social-btn:hover {
  background: var(--mood-primary-color, #e1e1ff);
}

/* Image Picker Modal Styles */

/* Choose Image Button */
.choose-image-btn {
  background: var(--mood-accent-color, #4a4a6a);
  color: var(--aura-bg-color, #1a1a2e);
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
  display: inline-block;
}
.choose-image-btn:hover {
  background: var(--mood-primary-color, #e1e1ff);
}

/* Modal Message */
.modal-message {
  color: var(--mood-primary-color, #e1e1ff);
  font-size: 0.9rem;
  margin: 16px 0;
  text-align: center;
}

/* Image Picker Modal Styles */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.image-modal .image-modal-content {
  background: var(--aura-bg-color, #1a1a2e);
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 8px;
  padding: 16px;
  width: 90%;
  max-width: 600px;
  color: var(--mood-primary-color, #e1e1ff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.image-modal .modal-close {
  align-self: flex-end;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--mood-secondary-color, #a0a0c0);
}
.image-modal .image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin: 12px 0;
  overflow-y: auto;
  max-height: 300px;
}
.image-modal .image-grid img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
}
.image-modal .image-grid img:hover {
  border-color: var(--mood-primary-color, #e1e1ff);
}
.image-modal .modal-pagination {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.image-modal .modal-pagination button {
  background: var(--mood-accent-color, #4a4a6a);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.image-modal .custom-url {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.image-modal .custom-url input {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 4px;
  background: var(--aura-bg-color, #1a1a2e);
  color: var(--mood-primary-color, #e1e1ff);
}
.image-modal .custom-url button {
  align-self: flex-start;
  background: var(--mood-primary-color, #e1e1ff);
  color: var(--aura-bg-color, #1a1a2e);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
/* Stats Editor Styles */
/* My Cards Sidebar Styles */
.my-card-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.my-card-thumb {
  width: 40px;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.stat-row input[name="stat-name"],
.stat-row input[name="stat-value"] {
  padding: 6px;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 4px;
  background: var(--aura-bg-color, #1a1a2e);
  color: var(--mood-primary-color, #e1e1ff);
  font-family: inherit;
}
.remove-stat {
  background: transparent;
  border: none;
  color: var(--mood-secondary-color, #a0a0c0);
  font-size: 1.2rem;
  cursor: pointer;
}
.remove-stat:hover {
  color: var(--mood-primary-color, #e1e1ff);
}
.add-stat-btn {
  background: var(--mood-accent-color, #4a4a6a);
  color: var(--aura-bg-color, #1a1a2e);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
}
.add-stat-btn:hover {
  background: var(--mood-primary-color, #e1e1ff);
}

/* Social Links Editor Styles */
.social-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.social-row input[name="social-name"],
.social-row input[name="social-url"] {
  padding: 6px;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 4px;
  background: var(--aura-bg-color, #1a1a2e);
  color: var(--mood-primary-color, #e1e1ff);
  font-family: inherit;
}
.remove-social {
  background: transparent;
  border: none;
  color: var(--mood-secondary-color, #a0a0c0);
  font-size: 1.2rem;
  cursor: pointer;
}
.remove-social:hover {
  color: var(--mood-primary-color, #e1e1ff);
}
.add-social-btn {
  background: var(--mood-accent-color, #4a4a6a);
  color: var(--aura-bg-color, #1a1a2e);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
}
.add-social-btn:hover {
  background: var(--mood-primary-color, #e1e1ff);
}

/* Equal-height 3-column layout for CardForge */
#cardforge-main-container {
  display: flex;
  gap: 1rem;
  align-items: flex-start; /* Use flex-start to allow children to have natural height */
}
.cardforge-editor,
.cardforge-sidebar,
.cardforge-preview {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  /* Ensure full height */
}

/* Social Links Display on Card */
.social-links {
  display: flex;
  gap: 12px;
  margin: 16px 0 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.social-link:hover {
  background: var(--mood-primary-color, #5AE4FF);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(90, 228, 255, 0.3);
}

.social-link .social-icon {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  transition: all 0.2s ease;
}

/* Theme-specific adjustments */
.theme-neofantasy .social-link {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-neofantasy .social-link:hover {
  background: var(--mood-accent-color, #8b5cf6);
  box-shadow: 0 0 15px var(--mood-accent-color, #8b5cf6);
}

/* NEW: Visual Preset Picker - Independent System */
.visual-preset-group {
  margin-top: 1.5rem;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.preset-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--aura-bg-secondary, #2a2a3e);
}

.preset-option:hover {
  border-color: var(--mood-accent-color, #4a4a6a);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.preset-option.selected {
  border-color: var(--mood-primary-color, #e1e1ff);
  background: var(--mood-accent-color, #4a4a6a);
  box-shadow: 0 0 20px rgba(225, 225, 255, 0.3);
}

.preset-thumbnail {
  width: 80px;
  height: 100px;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
}

.mini-card-preview {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  background: var(--aura-bg-color, #1a1a2e);
}

.mini-card-preview .card-header {
  width: 100%;
  height: 20px;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.mini-card-preview .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mini-card-preview .card-badge {
  width: 60%;
  height: 8px;
  border-radius: 2px;
}

.mini-card-preview .card-text {
  width: 100%;
  height: 6px;
  border-radius: 2px;
  opacity: 0.7;
}

.preset-label {
  font-size: 0.75rem;
  color: var(--mood-primary-color, #e1e1ff);
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Preset-specific styling */
.preset-cyberpunk .card-header {
  background: linear-gradient(45deg, #00ffff, #ff00ff);
}

.preset-cyberpunk .card-badge {
  background: #00ffff;
}

.preset-cyberpunk .card-text {
  background: #ff00ff;
}

.preset-fantasy .card-header {
  background: linear-gradient(45deg, #8b5cf6, #a855f7);
}

.preset-fantasy .card-badge {
  background: #f3e8ff;
}

.preset-fantasy .card-text {
  background: #e1d4ff;
}

.preset-corporate .card-header {
  background: linear-gradient(45deg, #1f2937, #374151);
}

.preset-corporate .card-badge {
  background: #60a5fa;
}

.preset-corporate .card-text {
  background: #9ca3af;
}

.preset-retro .card-header {
  background: linear-gradient(45deg, #fbbf24, #f59e0b);
}

.preset-retro .card-badge {
  background: #fb7185;
}

.preset-retro .card-text {
  background: #34d399;
}

/* Responsive design for preset picker */
@media (max-width: 768px) {
  .preset-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .preset-option {
    padding: 0.5rem;
  }
  
  .preset-thumbnail {
    width: 60px;
    height: 80px;
  }
}

/* NEW: Visual Layout Picker - Independent System */
.visual-layout-group {
  margin-top: 1.5rem;
}

.visual-layout-group .layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.layout-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--aura-bg-secondary, #2a2a3e);
}

.layout-option:hover {
  border-color: var(--mood-accent-color, #4a4a6a);
  transform: translateY(-2px);
}

/* LEGACY LAYOUT CSS REMOVED - WILL BE REPLACED WITH MODULAR SYSTEM */

/* ALL LEGACY CARD DESIGN CSS REMOVED - WILL BE REPLACED WITH MODULAR SYSTEM */

/* COMPLETE LEGACY CARD DESIGN CSS CLEANUP - ALL REMOVED FOR MODULAR SYSTEM */

/* Card Flip - Fixed positioning and removed fixed height constraints */
.card-preview-canvas {
  perspective: 1000px;
}

.card-inner {
  display: grid; /* Use grid to stack faces and auto-size height */
  width: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card-inner.flipped {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  /* Both faces occupy the same grid cell, making the container size to the tallest */
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  backface-visibility: hidden;
  transform-origin: center center;
}

.card-back {
  transform: rotateY(180deg);
}

/* ===== COLLAPSIBLE TIER SYSTEM ===== */

/* Collapsible Tier Container */
.collapsible-tier {
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 8px;
  margin-bottom: 1rem;
  background: var(--aura-bg-color, #1a1a2e);
  overflow: hidden;
  transition: all 0.3s ease;
}

.collapsible-tier:hover {
  border-color: var(--mood-primary-color, #e1e1ff);
}

/* Tier Header (Always Visible) */
.tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  cursor: pointer;
  background: var(--mood-accent-color, #4a4a6a);
  transition: background-color 0.2s ease;
}

.tier-header:hover {
  background: var(--mood-primary-color, #e1e1ff);
}

.tier-header:hover .tier-title,
.tier-header:hover .current-selection-text {
  color: var(--aura-bg-color, #1a1a2e);
}

.tier-title {
  margin: 0;
  font-size: 1rem;
  color: var(--aura-bg-color, #1a1a2e);
  font-weight: 600;
}

/* Current Selection Display */
.tier-current-selection {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: center;
}

.current-palette-preview,
.current-layout-preview,
.current-container-preview,
.current-effect-preview,
.current-weight-preview {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Layout Preview Icons */
.current-layout-preview {
  background: var(--mood-accent-color, #4a4a6a);
  position: relative;
}

.hero-layout-preview::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 6px;
  background: var(--mood-primary-color, #e1e1ff);
  border-radius: 1px;
}

.hero-layout-preview::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  height: 8px;
  background: var(--mood-secondary-color, #a0a0c0);
  border-radius: 1px;
}

.split-layout-preview::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: 7px;
  background: var(--mood-primary-color, #e1e1ff);
  border-radius: 1px;
}

.split-layout-preview::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  width: 7px;
  background: var(--mood-secondary-color, #a0a0c0);
  border-radius: 1px;
}

.minimal-layout-preview::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--mood-primary-color, #e1e1ff);
  border-radius: 50%;
}

/* Container Preview Icons */
.current-container-preview {
  background: var(--mood-accent-color, #4a4a6a);
  position: relative;
}

.masked-container-preview::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--mood-primary-color, #e1e1ff);
  border-radius: 50%;
  border: 1px solid var(--mood-secondary-color, #a0a0c0);
}

.framed-container-preview::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: var(--mood-primary-color, #e1e1ff);
  border: 1px solid var(--mood-secondary-color, #a0a0c0);
  border-radius: 2px;
}

.raw-container-preview::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: var(--mood-primary-color, #e1e1ff);
  border-radius: 1px;
}

/* Effect Preview Icons */
.current-effect-preview {
  background: var(--mood-accent-color, #4a4a6a);
  position: relative;
}

.none-effect-preview::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--mood-primary-color, #e1e1ff);
  border-radius: 50%;
}

.filters-effect-preview::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: linear-gradient(45deg, var(--mood-primary-color, #e1e1ff), var(--mood-secondary-color, #a0a0c0));
  border-radius: 2px;
  opacity: 0.8;
}

.borders-effect-preview::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: transparent;
  border: 2px solid var(--mood-primary-color, #e1e1ff);
  border-radius: 2px;
}

.overlays-effect-preview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, transparent 30%, var(--mood-primary-color, #e1e1ff) 70%);
  border-radius: 4px;
  opacity: 0.6;
}

/* Weight Preview Icons */
.current-weight-preview {
  background: var(--mood-accent-color, #4a4a6a);
  position: relative;
}

.top-heavy-weight-preview::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  right: 4px;
  height: 8px;
  background: var(--mood-primary-color, #e1e1ff);
  border-radius: 2px 2px 0 0;
}

.top-heavy-weight-preview::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 6px;
  right: 6px;
  height: 4px;
  background: var(--mood-secondary-color, #a0a0c0);
  border-radius: 0 0 1px 1px;
}

.balanced-weight-preview::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  height: 4px;
  background: var(--mood-primary-color, #e1e1ff);
  border-radius: 1px;
}

.balanced-weight-preview::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  height: 4px;
  background: var(--mood-primary-color, #e1e1ff);
  border-radius: 1px;
}

.bottom-heavy-weight-preview::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  right: 6px;
  height: 4px;
  background: var(--mood-secondary-color, #a0a0c0);
  border-radius: 1px 1px 0 0;
}

.bottom-heavy-weight-preview::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 4px;
  right: 4px;
  height: 8px;
  background: var(--mood-primary-color, #e1e1ff);
  border-radius: 0 0 2px 2px;
}

.current-selection-text {
  font-size: 0.9rem;
  color: var(--aura-bg-color, #1a1a2e);
  font-weight: 500;
}

/* Expand/Collapse Icon */
.tier-expand-icon {
  font-size: 0.8rem;
  color: var(--aura-bg-color, #1a1a2e);
  transition: transform 0.3s ease;
}

.collapsible-tier.expanded .tier-expand-icon {
  transform: rotate(180deg);
}

/* Tier Content (Collapsible) */
.tier-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background: var(--aura-bg-color, #1a1a2e);
}

.collapsible-tier.expanded .tier-content {
  max-height: 800px; /* Increased for complex 3-level hierarchies */
  padding: 1rem;
  overflow-y: auto; /* Allow scrolling if content exceeds max-height */
}

/* Palette Levels */
.palette-level {
  margin-bottom: 1.5rem;
}

/* ===== TIER 2: CONTENT ALIGNMENT (3-LEVEL HIERARCHY) ===== */

/* Alignment Section Container */
.alignment-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Alignment Levels */
.alignment-level {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.level-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--aura-text-color, #e0e0e0);
  margin: 0 0 0.75rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.variant-subtitle {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--aura-accent-color, #00d4ff);
  margin: 0 0 0.5rem 0;
  opacity: 0.8;
}

/* Alignment Type Grid */
.alignment-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* Weight Options */
.weight-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.weight-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.weight-option:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: var(--aura-accent-color, #00d4ff);
  transform: translateY(-2px);
}

.weight-option.selected {
  background: rgba(0, 212, 255, 0.2);
  border-color: var(--aura-accent-color, #00d4ff);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.weight-label {
  font-size: 0.75rem;
  color: var(--aura-text-color, #e0e0e0);
  margin-top: 0.5rem;
  text-align: center;
}

/* Style Options */
.style-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.style-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.style-option:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: var(--aura-accent-color, #00d4ff);
  transform: translateY(-2px);
}

.style-option.selected {
  background: rgba(0, 212, 255, 0.2);
  border-color: var(--aura-accent-color, #00d4ff);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.style-label {
  font-size: 0.75rem;
  color: var(--aura-text-color, #e0e0e0);
  margin-top: 0.5rem;
  text-align: center;
}

/* ===== ALIGNMENT PREVIEW ICONS ===== */

/* Current Selection Preview */
.current-alignment-preview {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  margin-right: 0.5rem;
  position: relative;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(0, 212, 255, 0.1));
  border: 1px solid rgba(0, 212, 255, 0.5);
}

.center-alignment-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--aura-accent-color, #00d4ff);
  border-radius: 2px;
}

.left-alignment-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--aura-accent-color, #00d4ff);
  border-radius: 2px;
}

.right-alignment-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--aura-accent-color, #00d4ff);
  border-radius: 2px;
}

/* Alignment Type Icons */
.alignment-icon {
  width: 32px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  position: relative;
  margin-bottom: 0.5rem;
}

.left-align-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--aura-accent-color, #00d4ff);
  border-radius: 2px;
}

.center-align-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--aura-accent-color, #00d4ff);
  border-radius: 2px;
}

.right-align-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--aura-accent-color, #00d4ff);
  border-radius: 2px;
}

/* ===== WEIGHT DISTRIBUTION PREVIEWS ===== */

.weight-preview {
  width: 32px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  position: relative;
  margin-bottom: 0.5rem;
}

/* Top Heavy Previews */
.left-top-heavy-preview::after,
.center-top-heavy-preview::after,
.right-top-heavy-preview::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 16px;
  height: 8px;
  background: var(--aura-accent-color, #00d4ff);
  border-radius: 2px;
}

.left-top-heavy-preview::after { left: 2px; }
.center-top-heavy-preview::after { left: 50%; transform: translateX(-50%); }
.right-top-heavy-preview::after { right: 2px; }

/* Balanced Previews */
.left-balanced-preview::after,
.center-balanced-preview::after,
.right-balanced-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 8px;
  background: var(--aura-accent-color, #00d4ff);
  border-radius: 2px;
}

.left-balanced-preview::after { left: 2px; }
.center-balanced-preview::after { left: 50%; transform: translate(-50%, -50%); }
.right-balanced-preview::after { right: 2px; }

/* Bottom Heavy Previews */
.left-bottom-heavy-preview::after,
.center-bottom-heavy-preview::after,
.right-bottom-heavy-preview::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 16px;
  height: 8px;
  background: var(--aura-accent-color, #00d4ff);
  border-radius: 2px;
}

.left-bottom-heavy-preview::after { left: 2px; }
.center-bottom-heavy-preview::after { left: 50%; transform: translateX(-50%); }
.right-bottom-heavy-preview::after { right: 2px; }

/* ===== STYLE VARIANT PREVIEWS ===== */

.style-preview {
  width: 32px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  position: relative;
  margin-bottom: 0.5rem;
}

/* Minimal Style */
.minimal-style-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 2px;
  background: var(--aura-accent-color, #00d4ff);
}

/* Padded Style */
.padded-style-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 8px;
  background: var(--aura-accent-color, #00d4ff);
  border-radius: 2px;
  border: 2px solid rgba(0, 212, 255, 0.3);
}

/* Compact Style */
.compact-style-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 12px;
  background: var(--aura-accent-color, #00d4ff);
  border-radius: 1px;
}

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

@media (max-width: 768px) {
  .alignment-type-grid,
  .weight-options,
  .style-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  
  .alignment-level {
    padding: 0.75rem;
  }
  
  .weight-option,
  .style-option {
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {
  .alignment-type-grid,
  .weight-options,
  .style-options {
    grid-template-columns: 1fr;
  }
}

.palette-level:last-child {
  margin-bottom: 0;
}

.level-title {
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
  color: var(--mood-secondary-color, #a0a0c0);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Enhanced Selection States */
.palette-family.selected,
.variant-toggle.selected {
  background: var(--mood-primary-color, #e1e1ff);
  color: var(--aura-bg-color, #1a1a2e);
  border-color: var(--mood-primary-color, #e1e1ff);
}

.palette-family.selected .palette-label,
.variant-toggle.selected .variant-label {
  color: var(--aura-bg-color, #1a1a2e);
  font-weight: 600;
}

/* Improved Hover States */
.palette-family:hover,
.variant-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .tier-header {
    padding: 0.75rem;
  }
  
  .tier-current-selection {
    gap: 0.25rem;
  }
  
  .current-selection-text {
    font-size: 0.8rem;
  }
  
  .collapsible-tier.expanded .tier-content {
    padding: 0.75rem;
  }
}

/* ===================================
   RIGHT COLUMN REDESIGN
   =================================== */

/* Right column */
.right-column {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--aura-bg-color, #1a1a2e);
  border-radius: 12px;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  width: 100%;
  box-sizing: border-box;
}

/* Card Preview Zone (Always Visible) - Fixed math */
#card-preview-container {
  position: sticky;
  top: 20px;
  z-index: 10;
  background: var(--aura-bg-color, #1a1a2e);
  border-radius: 8px;
  padding: 0.75rem;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  display: flex;
  flex-direction: column;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.preview-header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--mood-text-primary, #e1e1ff);
}

.preview-controls {
  display: flex;
  gap: 0.5rem;
}

.preview-controls .glass-button {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.preview-controls .glass-button i {
  font-size: 0.8rem;
}



/* Scrollable Zones Container - Reduced height to prevent clipping */
.tools-zone,
.my-cards-zone {
  background: var(--aura-bg-secondary, #2a2a3e);
  border-radius: 8px;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  display: flex;
  flex-direction: column;
  /* Removed flex:1 and overflow-y: auto to prevent internal scrolling */
}

.tools-zone.collapsed,
.my-cards-zone.collapsed {
  flex: 0 0 auto;
}

/* Zone Headers */
.zone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--aura-bg-color, #1a1a2e);
  border-bottom: 1px solid var(--mood-accent-color, #4a4a6a);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.zone-header:hover {
  background: var(--aura-bg-hover, #3a3a5e);
}

.zone-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--mood-text-primary, #e1e1ff);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.zone-header h3 i {
  font-size: 0.9rem;
  color: var(--mood-primary-color, #00d4ff);
}

.zone-toggle {
  background: none;
  border: none;
  color: var(--mood-text-secondary, #a0a0c0);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.zone-toggle:hover {
  background: var(--aura-bg-hover, #3a3a5e);
  color: var(--mood-text-primary, #e1e1ff);
}

.zone-toggle i {
  transition: transform 0.2s ease;
}

.zone-toggle.collapsed i {
  transform: rotate(180deg);
}

/* Zone Content */
.zone-content {
  flex: 1;
  /* overflow-y: auto; */ /* Removed to prevent internal scrollbars */
  padding: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--mood-primary-color, #00d4ff) var(--aura-bg-color, #1a1a2e);
}

/* Webkit Scrollbar Styling */
.zone-content::-webkit-scrollbar {
  width: 6px;
}

.zone-content::-webkit-scrollbar-track {
  background: var(--aura-bg-color, #1a1a2e);
  border-radius: 3px;
}

.zone-content::-webkit-scrollbar-thumb {
  background: var(--mood-primary-color, #00d4ff);
  border-radius: 3px;
}

.zone-content::-webkit-scrollbar-thumb:hover {
  background: var(--aura-cyan, #00b8e6);
}

/* Collapsed Zone Content */
.zone-content.collapsed {
  display: none;
}



/* Responsive Behavior - CLEANED UP */
@media (max-width: 1200px) {
  .right-column {
    height: auto;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .right-column {
    padding: 0.5rem;
    gap: 0.5rem;
  }
}

/* Tools Zone Styling */
.tool-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tool-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--aura-bg-color, #1a1a2e);
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 6px;
  color: var(--mood-text-primary, #e1e1ff);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-size: 0.9rem;
  position: relative;
}

.tool-btn:hover:not(:disabled) {
  background: var(--aura-bg-hover, #3a3a5e);
  border-color: var(--mood-primary-color, #00d4ff);
  transform: translateY(-1px);
}

.tool-btn:active:not(:disabled) {
  transform: translateY(0);
}

.tool-btn i {
  font-size: 1rem;
  color: var(--mood-primary-color, #00d4ff);
  flex-shrink: 0;
}

.tool-btn span {
  flex: 1;
}

.tool-btn.coming-soon {
  opacity: 0.6;
  cursor: not-allowed;
}

.coming-soon-label {
  position: absolute;
  top: -8px;
  right: 8px;
  background: var(--mood-primary-color, #00d4ff);
  color: var(--aura-bg-color, #1a1a2e);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 500;
}

/* My Cards Zone Styling */
.my-cards-search {
  margin-bottom: 1rem;
}

.search-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-group i {
  position: absolute;
  left: 0.75rem;
  color: var(--mood-text-secondary, #a0a0c0);
  font-size: 0.9rem;
  z-index: 1;
}

.search-input-group input {
  width: 100%;
  padding: 0.75rem 0.75rem 0.75rem 2.5rem;
  background: var(--aura-bg-color, #1a1a2e);
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 6px;
  color: var(--mood-text-primary, #e1e1ff);
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.search-input-group input:focus {
  outline: none;
  border-color: var(--mood-primary-color, #00d4ff);
}

.search-input-group input::placeholder {
  color: var(--mood-text-secondary, #a0a0c0);
}

/* My Cards List */
.my-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.my-cards-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--mood-text-secondary, #a0a0c0);
}

.my-cards-empty i {
  font-size: 2rem;
  color: var(--mood-primary-color, #00d4ff);
  margin-bottom: 1rem;
  opacity: 0.5;
}

.my-cards-empty p {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: var(--mood-text-primary, #e1e1ff);
}

.my-cards-empty small {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* My Card Item (for future implementation) */
.my-card-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--aura-bg-color, #1a1a2e);
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.my-card-item:hover {
  background: var(--aura-bg-hover, #3a3a5e);
  border-color: var(--mood-primary-color, #00d4ff);
  transform: translateY(-1px);
}

.my-card-thumbnail {
  width: 40px;
  height: 56px;
  background: var(--aura-bg-secondary, #2a2a3e);
  border-radius: 4px;
  flex-shrink: 0;
  overflow: hidden;
}

.my-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-card-info {
  flex: 1;
  min-width: 0;
}

.my-card-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--mood-text-primary, #e1e1ff);
  margin: 0 0 0.25rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-card-meta {
  font-size: 0.75rem;
  color: var(--mood-text-secondary, #a0a0c0);
  margin: 0;
}

.my-card-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.my-card-item:hover .my-card-actions {
  opacity: 1;
}

.my-card-action {
  background: none;
  border: none;
  color: var(--mood-text-secondary, #a0a0c0);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 3px;
  transition: all 0.2s ease;
  font-size: 0.8rem;
}

.my-card-action:hover {
  background: var(--aura-bg-hover, #3a3a5e);
  color: var(--mood-primary-color, #00d4ff);
}

/* DUPLICATE RESPONSIVE CSS REMOVED - Using consolidated version above */

/* Fix for grid overflow - override grid.css overflow: hidden */
.grid-container {
  overflow: visible !important;
}

/* Sticky wrapper for card preview section */
.sticky-preview-wrapper {
  position: sticky;
  top: 80px;
  z-index: 10;
  background: var(--aura-bg-color, #1a1a2e);
  border-radius: 8px;
  padding: 0.75rem;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
}