/* ========================================
   Quick Tier List - Styles
   ======================================== */

/* CSS Variables */
:root {
  /* Colors - Light Mode */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;

  /* Tier Colors */
  --tier-s: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --tier-a: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --tier-b: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
  --tier-c: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --tier-d: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

  /* UI Colors */
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --success: #22c55e;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-tier: 0 2px 4px rgba(0, 0, 0, 0.15);

  /* Sizing */
  --tier-label-width: 80px;
  --tier-height: 80px;
  --image-size: 64px;
  --border-radius: 8px;
  --border-radius-sm: 6px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
}

/* Dark Mode - System Preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="cyberpunk"]):not([data-theme="retro-arcade"]):not([data-theme="twitch"]):not([data-theme="pastel"]):not([data-theme="tangerine"]):not([data-theme="comfort-zone"]):not([data-theme="colorblind"]) {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #334155;
    --border-hover: #475569;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-tier: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
}

/* Force Dark Mode */
:root[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-color: #334155;
  --border-hover: #475569;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-tier: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Cyberpunk Theme */
:root[data-theme="cyberpunk"] {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-tertiary: #1a1a25;
  --text-primary: #00f0ff;
  --text-secondary: #ff00aa;
  --text-muted: #666680;
  --border-color: #2a2a3a;
  --border-hover: #ff00aa;

  /* Neon tier colors */
  --tier-s: linear-gradient(135deg, #ff0055 0%, #ff0088 100%);
  --tier-a: linear-gradient(135deg, #ff6600 0%, #ff9900 100%);
  --tier-b: linear-gradient(135deg, #ffee00 0%, #ffcc00 100%);
  --tier-c: linear-gradient(135deg, #00ff66 0%, #00cc88 100%);
  --tier-d: linear-gradient(135deg, #00ccff 0%, #0088ff 100%);

  /* Accent colors */
  --accent: #ff00aa;
  --accent-hover: #ff33bb;
  --warning: #ffee00;
  --warning-hover: #ffcc00;
  --danger: #ff0055;
  --danger-hover: #ff3377;
  --success: #00ff66;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 4px rgba(255, 0, 170, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 0, 170, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 0, 170, 0.2);
  --shadow-tier: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 0, 170, 0.3);
}

/* Retro Arcade Theme */
:root[data-theme="retro-arcade"] {
  --bg-primary: #0d0d1a;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #252540;
  --text-primary: #00ffff;
  --text-secondary: #ff00ff;
  --text-muted: #666699;
  --border-color: #333366;
  --border-hover: #00ffff;

  /* Neon tier colors */
  --tier-s: linear-gradient(135deg, #ff0040 0%, #ff0080 100%);
  --tier-a: linear-gradient(135deg, #ff8000 0%, #ffbf00 100%);
  --tier-b: linear-gradient(135deg, #ffff00 0%, #bfff00 100%);
  --tier-c: linear-gradient(135deg, #00ff40 0%, #00ff80 100%);
  --tier-d: linear-gradient(135deg, #0080ff 0%, #00bfff 100%);

  /* Accent colors */
  --accent: #ff00ff;
  --accent-hover: #ff66ff;
  --warning: #ffff00;
  --warning-hover: #ffff66;
  --danger: #ff0040;
  --danger-hover: #ff4080;
  --success: #00ff40;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 255, 255, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 255, 255, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 255, 0.2);
  --shadow-tier: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 0, 255, 0.3);
}

/* Twitch Purple Theme */
:root[data-theme="twitch"] {
  --bg-primary: #0e0e10;
  --bg-secondary: #18181b;
  --bg-tertiary: #1f1f23;
  --text-primary: #efeff1;
  --text-secondary: #adadb8;
  --text-muted: #7a7a8c;
  --border-color: #2f2f35;
  --border-hover: #9147ff;

  /* Purple-accented tier colors */
  --tier-s: linear-gradient(135deg, #9147ff 0%, #772ce8 100%);
  --tier-a: linear-gradient(135deg, #bf94ff 0%, #9147ff 100%);
  --tier-b: linear-gradient(135deg, #00c8af 0%, #00a89c 100%);
  --tier-c: linear-gradient(135deg, #1f69ff 0%, #0e49c5 100%);
  --tier-d: linear-gradient(135deg, #eb0400 0%, #bf0000 100%);

  /* Accent colors */
  --accent: #9147ff;
  --accent-hover: #a970ff;
  --warning: #ffca28;
  --warning-hover: #ffc107;
  --danger: #eb0400;
  --danger-hover: #ff4040;
  --success: #00c8af;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-tier: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 8px rgba(145, 71, 255, 0.2);
}

/* Pastel Theme */
:root[data-theme="pastel"] {
  --bg-primary: #fef7f0;
  --bg-secondary: #ffffff;
  --bg-tertiary: #fff5eb;
  --text-primary: #5c5470;
  --text-secondary: #8b7e97;
  --text-muted: #b4a7c1;
  --border-color: #e8dff0;
  --border-hover: #d4c4e3;

  /* Soft pastel tier colors */
  --tier-s: linear-gradient(135deg, #ffb5ba 0%, #ff9aa2 100%);
  --tier-a: linear-gradient(135deg, #ffdfba 0%, #ffc98b 100%);
  --tier-b: linear-gradient(135deg, #ffffba 0%, #fff59d 100%);
  --tier-c: linear-gradient(135deg, #baffc9 0%, #98fb98 100%);
  --tier-d: linear-gradient(135deg, #bae1ff 0%, #a0d2ff 100%);

  /* Accent colors */
  --accent: #c9b1ff;
  --accent-hover: #b794f6;
  --warning: #ffe066;
  --warning-hover: #ffd633;
  --danger: #ff9aa2;
  --danger-hover: #ff7a85;
  --success: #98fb98;

  --shadow-sm: 0 1px 3px rgba(92, 84, 112, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(92, 84, 112, 0.1), 0 2px 4px -2px rgba(92, 84, 112, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(92, 84, 112, 0.12), 0 4px 6px -4px rgba(92, 84, 112, 0.08);
  --shadow-tier: 0 2px 4px rgba(92, 84, 112, 0.12);
}

/* Tangerine Theme */
:root[data-theme="tangerine"] {
  --bg-primary: #fff6ec;
  --bg-secondary: #ffffff;
  --bg-tertiary: #ebe8e5;
  --text-primary: #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-muted: #9a9a9a;
  --border-color: #e8e8e8;
  --border-hover: #e6712d;

  /* Orange gradient tier colors */
  --tier-s: linear-gradient(135deg, #ff6b00 0%, #e55a00 100%);
  --tier-a: linear-gradient(135deg, #ff9500 0%, #e58500 100%);
  --tier-b: linear-gradient(135deg, #ffb340 0%, #e5a030 100%);
  --tier-c: linear-gradient(135deg, #ffd080 0%, #e5b860 100%);
  --tier-d: linear-gradient(135deg, #c8a080 0%, #a88860 100%);

  /* Accent colors */
  --accent: #e6712d;
  --accent-hover: #c45a1f;
  --warning: #f5a06a;
  --warning-hover: #f08a4a;
  --danger: #c44a1f;
  --danger-hover: #a33d18;
  --success: #4a9f4a;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  --shadow-tier: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Comfort Zone Theme */
:root[data-theme="comfort-zone"] {
  --bg-primary: #e8e0f0;
  --bg-secondary: #f5f0fa;
  --bg-tertiary: #ded4eb;
  --text-primary: #3d3050;
  --text-secondary: #6b5a7a;
  --text-muted: #9585a5;
  --border-color: #d0c4e0;
  --border-hover: #c85088;

  /* Tier colors from the image palette */
  --tier-s: linear-gradient(135deg, #c85088 0%, #a83d6f 100%);
  --tier-a: linear-gradient(135deg, #9b7bb8 0%, #7d5fa0 100%);
  --tier-b: linear-gradient(135deg, #7ec8c8 0%, #5eb0b0 100%);
  --tier-c: linear-gradient(135deg, #f5c88a 0%, #e8a850 100%);
  --tier-d: linear-gradient(135deg, #d0b8e0 0%, #b8a0d0 100%);

  /* Accent colors */
  --accent: #c85088;
  --accent-hover: #a83d6f;
  --warning: #f5c88a;
  --warning-hover: #e8a850;
  --danger: #d85070;
  --danger-hover: #c03858;
  --success: #5eb0b0;

  --shadow-sm: 0 1px 3px rgba(61, 48, 80, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(61, 48, 80, 0.12), 0 2px 4px -2px rgba(61, 48, 80, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(61, 48, 80, 0.15), 0 4px 6px -4px rgba(61, 48, 80, 0.1);
  --shadow-tier: 0 2px 4px rgba(61, 48, 80, 0.15);
}

/* Colorblind-Safe Theme */
:root[data-theme="colorblind"] {
  --bg-primary: #f5f5f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eeeeee;
  --text-primary: #212121;
  --text-secondary: #616161;
  --text-muted: #9e9e9e;
  --border-color: #e0e0e0;
  --border-hover: #bdbdbd;

  /* Colorblind-safe tier colors (using blue-orange scale, avoiding red-green) */
  --tier-s: linear-gradient(135deg, #0077bb 0%, #005588 100%);
  --tier-a: linear-gradient(135deg, #33bbee 0%, #009988 100%);
  --tier-b: linear-gradient(135deg, #ee7733 0%, #cc5500 100%);
  --tier-c: linear-gradient(135deg, #ee3377 0%, #cc1166 100%);
  --tier-d: linear-gradient(135deg, #bbbbbb 0%, #888888 100%);

  /* Accent colors */
  --accent: #0077bb;
  --accent-hover: #005588;
  --warning: #ee7733;
  --warning-hover: #cc5500;
  --danger: #ee3377;
  --danger-hover: #cc1166;
  --success: #009988;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  --shadow-tier: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Cyberpunk-specific enhancements */
:root[data-theme="cyberpunk"] body {
  background: linear-gradient(180deg, #0a0a0f 0%, #0f0a15 100%);
  font-family: 'Orbitron', sans-serif;
}

:root[data-theme="cyberpunk"] header h1 {
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5), 0 0 20px rgba(0, 240, 255, 0.3);
}

:root[data-theme="cyberpunk"] .tier-row {
  box-shadow: 0 0 2px rgba(255, 230, 0, 0.35), 0 0 4px rgba(255, 230, 0, 0.2);
}

:root[data-theme="cyberpunk"] .tier-label {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-tier), inset 0 0 20px rgba(255, 255, 255, 0.1);
}

:root[data-theme="cyberpunk"] .tier-content {
  border-color: #2a2a3a;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

:root[data-theme="cyberpunk"] .tier-content.drag-over {
  border-color: var(--accent);
  box-shadow: inset 0 0 20px rgba(255, 0, 170, 0.2), 0 0 10px rgba(255, 0, 170, 0.3);
}

:root[data-theme="cyberpunk"] .image-item {
  box-shadow: var(--shadow-sm), 0 0 6px rgba(0, 240, 255, 0.2);
}

:root[data-theme="cyberpunk"] .image-item:hover {
  box-shadow: var(--shadow-md), 0 0 12px rgba(255, 0, 170, 0.4);
}

:root[data-theme="cyberpunk"] .image-item.dragging {
  box-shadow: 0 0 0 2px var(--accent), 0 0 20px rgba(255, 0, 170, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);
}

:root[data-theme="cyberpunk"] .items-drop-zone {
  border-color: #2a2a3a;
  background: linear-gradient(180deg, #12121a 0%, #0f0f18 100%);
}

:root[data-theme="cyberpunk"] .items-drop-zone:hover {
  border-color: #3a3a4a;
}

:root[data-theme="cyberpunk"] .items-drop-zone.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(255, 0, 170, 0.3);
}

:root[data-theme="cyberpunk"] .btn {
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

:root[data-theme="cyberpunk"] .btn-secondary {
  background: #1a1a25;
  border: 1px solid #3a3a4a;
  color: #00f0ff;
}

:root[data-theme="cyberpunk"] .btn-secondary:hover:not(:disabled) {
  background: #2a2a35;
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

:root[data-theme="cyberpunk"] .btn-accent {
  background: linear-gradient(135deg, #ff00aa 0%, #cc0088 100%);
  box-shadow: 0 0 10px rgba(255, 0, 170, 0.4);
}

:root[data-theme="cyberpunk"] .btn-accent:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(255, 0, 170, 0.6);
}

:root[data-theme="cyberpunk"] .btn-success {
  background: linear-gradient(135deg, #00ff66 0%, #00cc55 100%);
  color: #0a0a0f;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.4);
}

:root[data-theme="cyberpunk"] .btn-success:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.6);
}

:root[data-theme="cyberpunk"] .btn-danger {
  background: linear-gradient(135deg, #ff0055 0%, #cc0044 100%);
  box-shadow: 0 0 10px rgba(255, 0, 85, 0.4);
}

:root[data-theme="cyberpunk"] .btn-danger:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(255, 0, 85, 0.6);
}

:root[data-theme="cyberpunk"] .modal {
  border: 1px solid #3a3a4a;
  box-shadow: 0 0 30px rgba(255, 0, 170, 0.3), var(--shadow-lg);
}

:root[data-theme="cyberpunk"] .theme-select {
  background: #12121a;
  border-color: #3a3a4a;
  color: #00f0ff;
}

:root[data-theme="cyberpunk"] .theme-select:hover {
  border-color: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

/* Retro Arcade-specific enhancements */
:root[data-theme="retro-arcade"] body {
  background: linear-gradient(180deg, #0d0d1a 0%, #1a0d1a 100%);
  font-family: 'Pixelify Sans', cursive;
}

:root[data-theme="retro-arcade"] header h1 {
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.3);
  letter-spacing: 0.1em;
}

:root[data-theme="retro-arcade"] .tier-row {
  box-shadow: 0 0 2px rgba(0, 255, 255, 0.4), 0 0 4px rgba(255, 0, 255, 0.2);
}

:root[data-theme="retro-arcade"] .tier-label {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-tier), inset 0 0 20px rgba(255, 255, 255, 0.1);
}

:root[data-theme="retro-arcade"] .tier-content {
  border-color: #333366;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

:root[data-theme="retro-arcade"] .tier-content.drag-over {
  border-color: var(--accent);
  box-shadow: inset 0 0 20px rgba(255, 0, 255, 0.2), 0 0 10px rgba(0, 255, 255, 0.3);
}

:root[data-theme="retro-arcade"] .image-item {
  box-shadow: var(--shadow-sm), 0 0 6px rgba(0, 255, 255, 0.2);
}

:root[data-theme="retro-arcade"] .image-item:hover {
  box-shadow: var(--shadow-md), 0 0 12px rgba(255, 0, 255, 0.4);
}

:root[data-theme="retro-arcade"] .btn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

:root[data-theme="retro-arcade"] .btn-secondary {
  background: #1a1a2e;
  border: 1px solid #333366;
  color: #00ffff;
}

:root[data-theme="retro-arcade"] .btn-secondary:hover:not(:disabled) {
  background: #252540;
  border-color: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

:root[data-theme="retro-arcade"] .btn-accent {
  background: linear-gradient(135deg, #ff00ff 0%, #cc00cc 100%);
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
}

:root[data-theme="retro-arcade"] .btn-accent:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.6);
}

:root[data-theme="retro-arcade"] .items-drop-zone {
  border-color: #333366;
  background: linear-gradient(180deg, #1a1a2e 0%, #0d0d1a 100%);
}

:root[data-theme="retro-arcade"] .items-drop-zone.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}

:root[data-theme="retro-arcade"] .theme-select {
  background: #1a1a2e;
  border-color: #333366;
  color: #00ffff;
}

:root[data-theme="retro-arcade"] .theme-select:hover {
  border-color: #00ffff;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

:root[data-theme="retro-arcade"] .upload-progress {
  background: rgba(26, 26, 46, 0.95);
  border: 1px solid #333366;
}

/* Twitch-specific enhancements */
:root[data-theme="twitch"] .tier-label {
  box-shadow: var(--shadow-tier), 0 0 6px rgba(145, 71, 255, 0.3);
}

:root[data-theme="twitch"] .tier-content.drag-over {
  border-color: var(--accent);
  box-shadow: inset 0 0 15px rgba(145, 71, 255, 0.15);
}

:root[data-theme="twitch"] .btn-secondary {
  background: #1f1f23;
  border: 1px solid #2f2f35;
  color: #efeff1;
}

:root[data-theme="twitch"] .btn-secondary:hover:not(:disabled) {
  background: #26262c;
  border-color: #9147ff;
}

:root[data-theme="twitch"] .btn-accent {
  background: linear-gradient(135deg, #9147ff 0%, #772ce8 100%);
}

:root[data-theme="twitch"] .btn-accent:hover:not(:disabled) {
  background: linear-gradient(135deg, #a970ff 0%, #9147ff 100%);
}

:root[data-theme="twitch"] .items-drop-zone {
  border-color: #2f2f35;
  background: #18181b;
}

:root[data-theme="twitch"] .items-drop-zone.drag-over {
  border-color: #9147ff;
  box-shadow: 0 0 10px rgba(145, 71, 255, 0.2);
}

:root[data-theme="twitch"] .theme-select {
  background: #18181b;
  border-color: #2f2f35;
  color: #efeff1;
}

:root[data-theme="twitch"] .theme-select:hover {
  border-color: #9147ff;
}

:root[data-theme="twitch"] .upload-progress {
  background: rgba(24, 24, 27, 0.95);
}

/* Pastel-specific enhancements */
:root[data-theme="pastel"] .tier-label {
  color: #5c5470;
  text-shadow: none;
}

:root[data-theme="pastel"] .tier-content.drag-over {
  border-color: #c9b1ff;
  background: #faf5ff;
}

:root[data-theme="pastel"] .btn-secondary {
  background: #fff5eb;
  border: 1px solid #e8dff0;
  color: #5c5470;
}

:root[data-theme="pastel"] .btn-secondary:hover:not(:disabled) {
  background: #ffe8d6;
  border-color: #d4c4e3;
}

:root[data-theme="pastel"] .btn-accent {
  background: linear-gradient(135deg, #c9b1ff 0%, #b794f6 100%);
  color: #5c5470;
}

:root[data-theme="pastel"] .btn-success {
  background: linear-gradient(135deg, #baffc9 0%, #98fb98 100%);
  color: #5c5470;
}

:root[data-theme="pastel"] .btn-danger {
  background: linear-gradient(135deg, #ffb5ba 0%, #ff9aa2 100%);
  color: #5c5470;
}

:root[data-theme="pastel"] .items-drop-zone {
  border-color: #e8dff0;
  background: #ffffff;
}

:root[data-theme="pastel"] .items-drop-zone.drag-over {
  border-color: #c9b1ff;
  background: #faf5ff;
}

:root[data-theme="pastel"] .theme-select {
  background: #ffffff;
  border-color: #e8dff0;
  color: #5c5470;
}

:root[data-theme="pastel"] .theme-select:hover {
  border-color: #d4c4e3;
}

:root[data-theme="pastel"] .upload-progress {
  background: rgba(255, 255, 255, 0.95);
}

/* Tangerine-specific enhancements */
:root[data-theme="tangerine"] header h1 {
  color: #1a1a1a;
}

:root[data-theme="tangerine"] .tier-content.drag-over {
  border-color: #e6712d;
  background: #fff5ee;
}

:root[data-theme="tangerine"] .btn {
  background: #e6712d;
  color: #ffffff;
}

:root[data-theme="tangerine"] .btn:hover:not(:disabled) {
  background: #c45a1f;
}

:root[data-theme="tangerine"] .items-drop-zone {
  border-color: #e8e8e8;
  background: #ffffff;
}

:root[data-theme="tangerine"] .items-drop-zone.drag-over {
  border-color: #c45a1f;
  background: #fff5ee;
}

:root[data-theme="tangerine"] .theme-select {
  background: #ffffff;
  border-color: #e8e8e8;
  color: #1a1a1a;
}

:root[data-theme="tangerine"] .theme-select:hover {
  border-color: #e6712d;
}

:root[data-theme="tangerine"] .upload-progress {
  background: rgba(255, 255, 255, 0.95);
}

/* Comfort Zone-specific enhancements */
:root[data-theme="comfort-zone"] .tier-content.drag-over {
  border-color: #c85088;
  background: #f8f0fc;
}

:root[data-theme="comfort-zone"] .btn-secondary {
  background: #ded4eb;
  border: 1px solid #d0c4e0;
  color: #3d3050;
}

:root[data-theme="comfort-zone"] .btn-secondary:hover:not(:disabled) {
  background: #d0c4e0;
  border-color: #c85088;
}

:root[data-theme="comfort-zone"] .btn-accent {
  background: linear-gradient(135deg, #c85088 0%, #a83d6f 100%);
}

:root[data-theme="comfort-zone"] .btn-success {
  background: linear-gradient(135deg, #7ec8c8 0%, #5eb0b0 100%);
  color: #ffffff;
}

:root[data-theme="comfort-zone"] .items-drop-zone {
  border-color: #d0c4e0;
  background: #f5f0fa;
}

:root[data-theme="comfort-zone"] .items-drop-zone.drag-over {
  border-color: #c85088;
  background: #f8f0fc;
}

:root[data-theme="comfort-zone"] .theme-select {
  background: #f5f0fa;
  border-color: #d0c4e0;
  color: #3d3050;
}

:root[data-theme="comfort-zone"] .theme-select:hover {
  border-color: #c85088;
}

:root[data-theme="comfort-zone"] .upload-progress {
  background: rgba(245, 240, 250, 0.95);
}

/* Colorblind-safe-specific enhancements */
:root[data-theme="colorblind"] body {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
}

:root[data-theme="colorblind"] .btn {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
}

:root[data-theme="colorblind"] .tier-label {
  font-weight: 800;
}

:root[data-theme="colorblind"] .tier-label.tier-s::after,
:root[data-theme="colorblind"] .tier-label.tier-a::after,
:root[data-theme="colorblind"] .tier-label.tier-b::after,
:root[data-theme="colorblind"] .tier-label.tier-c::after,
:root[data-theme="colorblind"] .tier-label.tier-d::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  width: 40px;
  border-radius: 2px;
}

:root[data-theme="colorblind"] .tier-label.tier-s::after {
  background: repeating-linear-gradient(90deg, #fff 0px, #fff 4px, transparent 4px, transparent 8px);
}

:root[data-theme="colorblind"] .tier-label.tier-a::after {
  background: #fff;
}

:root[data-theme="colorblind"] .tier-label.tier-b::after {
  background: repeating-linear-gradient(90deg, #fff 0px, #fff 2px, transparent 2px, transparent 4px);
}

:root[data-theme="colorblind"] .tier-label.tier-c::after {
  background: repeating-linear-gradient(45deg, #fff 0px, #fff 2px, transparent 2px, transparent 4px);
}

:root[data-theme="colorblind"] .tier-label.tier-d::after {
  background: transparent;
  border: 2px solid #fff;
  height: 0;
  width: 36px;
}

:root[data-theme="colorblind"] .tier-content.drag-over {
  border-color: #0077bb;
  background: #f0f7fc;
}

:root[data-theme="colorblind"] .btn-secondary {
  background: #eeeeee;
  border: 2px solid #bdbdbd;
  color: #212121;
}

:root[data-theme="colorblind"] .btn-secondary:hover:not(:disabled) {
  background: #e0e0e0;
  border-color: #9e9e9e;
}

:root[data-theme="colorblind"] .theme-select {
  background: #ffffff;
  border-color: #bdbdbd;
  border-width: 2px;
  color: #212121;
}

:root[data-theme="colorblind"] .theme-select:hover {
  border-color: #0077bb;
}

:root[data-theme="colorblind"] .upload-progress {
  background: rgba(255, 255, 255, 0.95);
}

/* ========================================
   Base Styles
   ======================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  padding: 24px;
  line-height: 1.5;
}

/* ========================================
   Container
   ======================================== */

.container {
  position: relative;
  width: 1152px;
  max-width: calc(100vw - 48px);
  margin: 0 auto;
  transition: margin var(--transition-normal);
}

.container.streamer-mode {
  margin-left: 24px;
  margin-right: auto;
}

.container.streamer-mode header h1 {
  text-align: left;
}

/* ========================================
   Header
   ======================================== */

header {
  margin-bottom: 32px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

.header-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* ========================================
   Tier Table
   ======================================== */

.tier-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.tier-row {
  display: flex;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.tier-label {
  width: var(--tier-label-width);
  min-width: var(--tier-label-width);
  min-height: var(--tier-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.125rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-tier);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  position: relative;
  z-index: 1;
}

.tier-label input {
  width: 100%;
  height: 100%;
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;
  cursor: text;
}

.tier-label input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.tier-label.tier-s { background: var(--tier-s); }
.tier-label.tier-a { background: var(--tier-a); }
.tier-label.tier-b { background: var(--tier-b); }
.tier-label.tier-c { background: var(--tier-c); }
.tier-label.tier-d { background: var(--tier-d); }

.tier-content {
  flex: 1;
  min-height: var(--tier-height);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-left: none;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  padding: 6px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.tier-content.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-secondary));
}

/* ========================================
   Image Items
   ======================================== */

.image-item {
  position: relative;
  height: var(--image-size);
  border-radius: var(--border-radius-sm);
  overflow: visible;
  cursor: grab;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.image-item.just-dropped {
  animation: dropBounce 0.3s ease-out;
}

@keyframes dropBounce {
  0% {
    transform: scale(1.05) translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  50% {
    transform: scale(0.98) translateY(2px);
  }
  100% {
    transform: scale(1) translateY(0);
    box-shadow: var(--shadow-sm);
  }
}

.image-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.image-item:active {
  cursor: grabbing;
}

.image-item.dragging {
  opacity: 0.85;
  transform: scale(1.12);
  box-shadow:
    0 0 0 2px var(--accent),
    0 8px 16px -4px rgba(0, 0, 0, 0.25),
    0 20px 40px -8px rgba(0, 0, 0, 0.3);
  z-index: 100;
}

.image-item img {
  height: 100%;
  width: auto;
  pointer-events: none;
  border-radius: var(--border-radius-sm);
}

.image-item .delete-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: white;
  border: 2px solid var(--bg-secondary);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-item:hover .delete-btn {
  opacity: 1;
  transform: scale(1);
}

.image-item .delete-btn:hover {
  background: var(--danger-hover);
}

.image-item.drop-left::before,
.image-item.drop-right::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  z-index: 10;
}

.image-item.drop-left::before {
  left: -5px;
}

.image-item.drop-right::after {
  right: -5px;
}

/* ========================================
   Items Section
   ======================================== */

.items-section {
  margin-bottom: 32px;
}

.items-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.items-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.items-controls {
  display: flex;
  gap: 8px;
}

.items-drop-zone {
  position: relative;
  min-height: 120px;
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  cursor: pointer;
}

.items-drop-zone:hover {
  border-color: var(--border-hover);
}

.items-drop-zone.drag-over {
  border-color: var(--accent);
  border-style: solid;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-secondary));
}

.drop-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  pointer-events: none;
}

.drop-placeholder.hidden {
  display: none;
}

.drop-icon {
  font-size: 2rem;
}

.drop-text {
  font-size: 0.875rem;
}

.items-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

/* ========================================
   Upload Progress
   ======================================== */

.upload-progress {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="cyberpunk"]):not([data-theme="retro-arcade"]):not([data-theme="twitch"]):not([data-theme="pastel"]):not([data-theme="tangerine"]):not([data-theme="comfort-zone"]):not([data-theme="colorblind"]) .upload-progress {
    background: rgba(30, 41, 59, 0.95);
  }
}

:root[data-theme="dark"] .upload-progress {
  background: rgba(30, 41, 59, 0.95);
}

:root[data-theme="cyberpunk"] .upload-progress {
  background: rgba(18, 18, 26, 0.95);
  border: 1px solid #3a3a4a;
}

.upload-progress[hidden] {
  display: none;
}

.progress-content {
  display: flex;
  justify-content: space-between;
  width: 200px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.progress-bar {
  width: 200px;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 300ms ease;
  width: 0%;
}

/* ========================================
   Buttons
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  box-shadow: var(--shadow-md);
}

.btn:active {
  box-shadow: var(--shadow-sm);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-small {
  padding: 6px 12px;
  font-size: 0.75rem;
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--border-color);
}

.btn-accent {
  background: var(--accent);
  color: white;
}

.btn-accent:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn-warning {
  background: var(--warning);
  color: white;
}

.btn-warning:hover:not(:disabled) {
  background: var(--warning-hover);
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-hover);
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #16a34a;
}

/* ========================================
   Actions Footer
   ======================================== */

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.actions-left,
.actions-right {
  display: flex;
  gap: 12px;
}

/* ========================================
   Modal
   ======================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow-lg), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease;
}

.modal-overlay.visible .modal {
  transform: scale(1) translateY(0);
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.modal-message {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 24px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ========================================
   Theme Selector
   ======================================== */

.theme-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.theme-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.theme-select {
  padding: 8px 32px 8px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.theme-select:hover {
  border-color: var(--border-hover);
}

.theme-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ========================================
   Resize Handle
   ======================================== */

.resize-handle {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  background: transparent;
  transition: background-color var(--transition-fast);
  border-radius: 4px;
}

.resize-handle:hover,
.resize-handle.resizing {
  background: var(--accent);
  opacity: 0.3;
}

.resize-handle.resizing {
  opacity: 0.5;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 640px) {
  body {
    padding: 16px;
  }

  header {
    flex-direction: column;
    gap: 12px;
  }

  header h1 {
    font-size: 1.75rem;
  }

  .header-toggle {
    position: static;
    transform: none;
  }

  .container {
    max-width: 100%;
  }

  :root {
    --tier-label-width: 60px;
    --tier-height: 64px;
    --image-size: 48px;
  }

  .actions {
    flex-direction: column;
  }

  .actions-left,
  .actions-right {
    width: 100%;
    flex-direction: column;
  }

  .actions .btn {
    width: 100%;
  }
}

/* ========================================
   Utility Classes
   ======================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}