@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700&display=swap');

:root {
  --bg-primary: #0b0f19;
  --bg-card: rgba(22, 28, 45, 0.7);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(16, 185, 129, 0.4);
  
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  
  --accent-green: #10b981;
  --accent-green-dark: #059669;
  --accent-green-light: #34d399;
  --accent-cyan: #06b6d4;
  --accent-gradient: linear-gradient(135deg, #10b981 0%, #059669 50%, #06b6d4 100%);
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-glow: 0 0 25px rgba(16, 185, 129, 0.18);
  
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Background Ambient Glow */
body::before {
  content: '';
  position: fixed;
  top: -20%;
  left: 20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(0,0,0,0) 70%);
  z-index: -1;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  bottom: -20%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, rgba(0,0,0,0) 70%);
  z-index: -1;
  pointer-events: none;
}

/* Navigation */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
  background: rgba(11, 15, 25, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: var(--transition);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
}

.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
  background: var(--bg-glass);
}

/* Main Container */
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}

/* Hero Section */
.hero {
  text-align: center;
  margin-bottom: 3.5rem;
}

.hero h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p {
  color: var(--text-secondary);
  font-size: 1.15rem;
  max-width: 650px;
  margin: 0 auto 2rem;
}

/* Controls Bar (Fixed to Top on Scroll) */
.controls-bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
  background: rgba(11, 15, 25, 0.85);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 73px;
  z-index: 90;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.controls-row-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

/* Sort Controls */
.sort-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-glass);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

.sort-box:focus-within {
  border-color: var(--accent-green);
  box-shadow: var(--shadow-glow);
}

.sort-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  user-select: none;
}

.sort-label svg {
  stroke: var(--accent-green);
}

.sort-select {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  font-family: inherit;
}

.sort-select option {
  background: #0f172a;
  color: var(--text-primary);
}

.overlay-mode-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-glass);
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid var(--border-color);
}

.mode-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  padding-left: 0.4rem;
}

.mode-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.mode-btn.active {
  background: var(--accent-green);
  color: #0b0f19;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 250px;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition);
}

.search-input:focus {
  border-color: var(--accent-green);
  box-shadow: var(--shadow-glow);
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
  overflow: hidden;
}

.tag-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.tag-btn:hover, .tag-btn.active {
  background: var(--accent-green);
  color: #0b0f19;
  border-color: var(--accent-green);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

/* Grid Layout */
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.75rem;
  width: 100%;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--border-highlight);
  box-shadow: var(--shadow-glow);
}

.card-image-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #111827;
}

/* Checkerboard Background for Transparent Overlays (Default) */
.card-image-wrap.transparent-bg {
  background-color: #e5e5f7;
  background-image: repeating-linear-gradient(45deg, #c4c4cd 25%, transparent 25%, transparent 75%, #c4c4cd 75%, #c4c4cd), repeating-linear-gradient(45deg, #c4c4cd 25%, #e5e5f7 25%, #e5e5f7 75%, #c4c4cd 75%, #c4c4cd);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

.card-image-wrap.transparent-bg .card-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  transition: transform 0.4s ease;
}

.card-image-wrap.transparent-bg:hover .card-img {
  transform: scale(1.02);
}

/* Book Text Mode Preview for Transparent Overlays */
.card-image-wrap.transparent-bg.book-text-mode {
  background-color: #f6f5f0 !important;
  background-image: none !important;
}

.card-image-wrap.transparent-bg.book-text-mode::before {
  content: "CHAPTER 1\A Mr. Sherlock Holmes\A\A In the year 1878 I took my degree of Doctor of Medicine at the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second Afghan war had broken out. On landing at Bombay, I learned that my corps had advanced through the passes, and was already deep in the enemy's country. I followed, however, with many other officers who were in the same situation, and succeeded in reaching Candahar in safety, where I found my regiment, and at once entered upon my new duties.\A\A The campaign brought honours and promotion to many, but for me it had nothing but misfortune and disaster. I was removed from my brigade and attached to the Berkshires, with whom I served at the fatal battle of Maiwand. There I was struck on the shoulder by a Jezail bullet, which shattered the bone and grazed the subclavian artery. I should have fallen into the hands of the murderous Ghazis had it not been for the devotion and courage shown by Murray, my orderly, who threw me across a pack-horse, and succeeded in bringing me safely to the British lines.\A\A Worn with pain, and weak from the prolonged hardships which I had undergone, I was removed, with a great train of wounded sufferers, to the base hospital at Peshawur. Here I rallied, and had already improved so far as to be able to walk about the wards, when I was struck down by enteric fever, that curse of our Indian possessions. For months my life was despaired of, and when at last I came to myself and became convalescent, I was so weak and emaciated that a medical board determined that not a day should be lost in sending me back to England...";
  position: absolute;
  inset: 10px;
  font-family: 'Georgia', 'Garamond', 'Times New Roman', serif;
  font-size: 0.62rem;
  line-height: 1.38;
  color: #111827;
  overflow: hidden;
  opacity: 0.92;
  pointer-events: none;
  white-space: pre-wrap;
  user-select: none;
  z-index: 1;
}

.card-image-wrap.transparent-bg.book-text-mode .card-img {
  position: relative;
  z-index: 2;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card-img {
  transform: scale(1.04);
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11, 15, 25, 0.9) 100%);
  opacity: 0;
  transition: var(--transition);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}

.card:hover .card-overlay {
  opacity: 1;
}

.card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card Meta & Stats */
.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  gap: 0.5rem;
}

.card-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

.card-stats {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.stat-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.78rem;
  padding: 0.15rem 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.stat-item svg {
  stroke: var(--accent-green);
}

/* Card Tags & Chips */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
  align-items: center;
}

.card-tag-chip {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  line-height: 1.2;
}

.card-tag-chip:hover {
  background: var(--accent-green);
  color: #0b0f19;
  border-color: var(--accent-green);
  transform: translateY(-1px);
}

.card-tags-more {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  cursor: help;
}

.card-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
}

.btn-primary {
  flex: 1;
  background: var(--accent-gradient);
  color: #0b0f19;
  font-weight: 700;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.btn-primary:hover {
  opacity: 0.95;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

/* Sections */
.section {
  display: none;
}

.section.active {
  display: block;
}

/* Form Styles */
.form-card {
  max-width: 650px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  backdrop-filter: blur(12px);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.form-control {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--accent-green);
  box-shadow: var(--shadow-glow);
}

/* Category Pills Selector */
.category-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.cat-pill, .tag-btn {
  background: var(--bg-glass) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: 9999px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  outline: none !important;
}

.cat-pill:hover, .tag-btn:hover {
  border-color: var(--accent-green) !important;
  color: var(--text-primary) !important;
  background: rgba(16, 185, 129, 0.15) !important;
}

.cat-pill.active, .tag-btn.active {
  background: var(--accent-green) !important;
  color: #0b0f19 !important;
  font-weight: 600 !important;
  border-color: var(--accent-green) !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4) !important;
}

/* Upload Mode Toggle & Dropzone */
.toggle-mode-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.toggle-mode-btn {
  flex: 1;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.55rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.toggle-mode-btn.active {
  background: var(--accent-green);
  color: #0b0f19;
  font-weight: 600;
  border-color: var(--accent-green);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

.dropzone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  background: rgba(15, 23, 42, 0.4);
  cursor: pointer;
  transition: var(--transition);
}

.dropzone:hover, .dropzone.dragover {
  border-color: var(--accent-green);
  background: rgba(16, 185, 129, 0.08);
}

.dropzone-prompt svg {
  stroke: var(--accent-cyan);
}

.dropzone-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.dropzone-preview img {
  width: 70px;
  height: 93px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.preview-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.preview-meta strong {
  color: var(--text-primary);
  font-size: 0.95rem;
  word-break: break-all;
}

.preview-meta span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.btn-remove {
  align-self: flex-start;
  background: none;
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ef4444;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  margin-top: 0.3rem;
  transition: var(--transition);
}

.btn-remove:hover {
  background: #ef4444;
  color: white;
}

.legal-box {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 2rem;
  margin-top: 1.5rem;
  color: var(--text-secondary);
}

.legal-box h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: auto;
}

/* License & Attribution Badges */
.card-attribution {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.license-tag {
  display: inline-block;
  background: rgba(6, 182, 212, 0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(6, 182, 212, 0.3);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
}

.card-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.card-download-btn {
  flex: 1 1 0%;
  min-width: 0;
  padding: 0.55rem 0.5rem;
  font-size: 0.82rem;
  gap: 0.35rem;
  white-space: nowrap;
}

.btn-card-icon, .btn-suggest-change, .btn-copy-link {
  width: 34px;
  height: 34px;
  min-width: 34px;
  max-width: 34px;
  padding: 0;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  box-sizing: border-box;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  user-select: none;
}

.btn-card-icon:hover, .btn-suggest-change:hover, .btn-copy-link:hover {
  background: rgba(16, 185, 129, 0.2);
  color: var(--text-primary);
  border-color: var(--accent-green);
  transform: translateY(-1px);
}

.btn-copy-link.copied {
  background: var(--accent-green);
  color: #0b0f19;
  border-color: var(--accent-green);
}

/* Drawer Action Tabs */
.drawer-action-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.drawer-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.55rem 0.2rem;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  white-space: nowrap;
}

.drawer-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.drawer-tab-btn.active {
  background: var(--accent-green);
  color: #0b0f19;
  font-weight: 700;
}

.drawer-tab-btn.dmca-tab.active {
  background: #ef4444;
  color: #ffffff;
}

.drawer-tab-btn.dmca-tab:not(.active):hover {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
}

/* Replace Dropzone in Drawer */
.replace-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: var(--transition);
  margin-top: 0.35rem;
}

.replace-dropzone:hover, .replace-dropzone.dragover {
  border-color: var(--accent-green);
  background: rgba(16, 185, 129, 0.06);
}

#replace-dropzone-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

#replace-dropzone-prompt svg {
  stroke: var(--accent-green);
}

@keyframes card-glow-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8); border-color: var(--accent-green); }
  50% { box-shadow: 0 0 35px 8px rgba(16, 185, 129, 0.5); border-color: var(--accent-green); }
  100% { box-shadow: var(--shadow-glow); border-color: var(--border-highlight); }
}

.card.card-highlight {
  animation: card-glow-pulse 2.5s ease-out;
  border-color: var(--accent-green) !important;
}

/* Toast notification */
.toast-notice {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #0f172a;
  color: #f3f4f6;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-green);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 2000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.toast-notice.show {
  transform: translateY(0);
  opacity: 1;
}

/* Bulk Queue List & Cards */
.bulk-item-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: var(--transition);
}

.bulk-item-card:hover {
  border-color: var(--border-highlight);
}

.bulk-item-thumb {
  width: 65px;
  height: 87px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.bulk-item-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bulk-item-fields input {
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
}

/* Suggest Change Slide-In Drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.suggest-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  background: #0f172a;
  border-left: 1px solid var(--border-color);
  z-index: 1001;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.suggest-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.btn-close-drawer {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.btn-close-drawer:hover {
  color: white;
  background: var(--bg-glass);
}

.drawer-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.suggest-target-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--bg-glass);
  padding: 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.suggest-target-card img {
  width: 50px;
  height: 67px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.suggest-target-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.suggest-target-info strong {
  color: var(--text-primary);
  font-size: 0.95rem;
}

.suggest-target-info span {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ==========================================================================
   Responsive Media Queries & Mobile Optimizations
   ========================================================================== */

/* Tablet & Smaller Screens (<= 768px) */
@media (max-width: 768px) {
  .container {
    padding: 1.5rem 1rem;
  }

  .navbar {
    padding: 0.85rem 1.25rem;
    top: 0;
  }

  .nav-brand {
    font-size: 1.18rem;
    gap: 0.5rem;
  }

  .nav-links {
    gap: 0.6rem;
  }

  .nav-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.65rem;
  }

  .hero {
    margin-bottom: 2rem;
  }

  .hero h1 {
    font-size: 2.1rem;
    margin-bottom: 0.75rem;
  }

  .hero p {
    font-size: 1rem;
    margin-bottom: 1.25rem;
  }

  /* Controls Bar */
  .controls-bar {
    top: 60px;
    padding: 0.85rem 1rem;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
  }

  .controls-row-top {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .search-box {
    min-width: 0;
    width: 100%;
  }

  .search-input {
    font-size: 16px; /* Prevent iOS zoom-in */
    padding: 0.7rem 0.75rem 0.7rem 2.6rem;
  }

  .sort-box {
    width: 100%;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
  }

  .sort-select {
    font-size: 0.85rem;
  }

  .overlay-mode-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.3rem 0.6rem;
  }

  /* Horizontal Scrollable Category Chips */
  .category-tags {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.2rem 0.25rem 0.4rem 0.25rem;
    margin: 0 -0.25rem;
    gap: 0.45rem;
  }

  .category-tags::-webkit-scrollbar {
    display: none;
  }

  .category-tags .tag-btn {
    flex-shrink: 0;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.8rem !important;
  }

  /* Grid Layout */
  .wallpaper-grid {
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 1rem;
  }

  .card-body {
    padding: 0.85rem;
    gap: 0.4rem;
  }

  .card-title {
    font-size: 0.95rem;
  }

  .card-meta {
    font-size: 0.78rem;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .card-category-badge {
    font-size: 0.75rem;
    max-width: 100%;
  }

  .card-stats {
    gap: 0.4rem;
  }

  .stat-item {
    font-size: 0.74rem;
    padding: 0.12rem 0.35rem;
  }

  .card-tags {
    gap: 0.3rem;
  }

  .card-tag-chip {
    font-size: 0.7rem;
    padding: 0.14rem 0.42rem;
  }

  .card-footer {
    padding-top: 0.6rem;
    gap: 0.35rem;
  }

  .card-download-btn {
    padding: 0.5rem 0.4rem;
    font-size: 0.8rem;
    gap: 0.3rem;
  }

  .btn-card-icon, .btn-suggest-change, .btn-copy-link {
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    flex: 0 0 32px;
    font-size: 0.82rem;
  }

  /* Forms & Modals */
  .form-card {
    padding: 1.75rem 1.25rem;
  }

  .legal-box {
    padding: 1.5rem 1.25rem;
  }
}

/* Mobile Devices (<= 640px) */
@media (max-width: 640px) {
  .container {
    padding: 1.25rem 0.75rem;
  }

  .navbar {
    padding: 0.75rem 0.85rem;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .nav-brand {
    font-size: 1.1rem;
  }

  .nav-brand svg {
    width: 20px;
    height: 20px;
  }

  .nav-links {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
    padding-top: 0.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-link {
    font-size: 0.8rem;
    padding: 0.35rem 0.55rem;
    text-align: center;
    flex: 1;
  }

  .hero {
    margin-bottom: 1.5rem;
  }

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

  .hero p {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  /* Controls Bar on Mobile */
  .controls-bar {
    top: 92px;
    padding: 0.7rem 0.75rem;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-sm);
  }

  .wallpaper-grid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 0.75rem;
  }

  .card-body {
    padding: 0.75rem 0.65rem;
    gap: 0.35rem;
  }

  .card-title {
    font-size: 0.9rem;
  }

  .card-meta {
    font-size: 0.74rem;
  }

  .card-category-badge {
    font-size: 0.72rem;
  }

  .card-stats {
    gap: 0.3rem;
  }

  .stat-item {
    font-size: 0.7rem;
    padding: 0.1rem 0.3rem;
  }

  .card-footer {
    padding-top: 0.5rem;
    gap: 0.25rem;
  }

  .card-download-btn {
    padding: 0.45rem 0.3rem;
    font-size: 0.76rem;
    gap: 0.25rem;
  }

  .card-download-btn svg {
    width: 12px;
    height: 12px;
  }

  .btn-card-icon, .btn-suggest-change, .btn-copy-link {
    width: 30px;
    height: 30px;
    min-width: 30px;
    max-width: 30px;
    flex: 0 0 30px;
    font-size: 0.78rem;
  }

  /* Full Screen Slide-in Drawer */
  .suggest-drawer {
    max-width: 100vw;
    width: 100%;
  }

  .drawer-header {
    padding: 1rem 1.15rem;
  }

  .drawer-header h3 {
    font-size: 1.1rem;
  }

  .drawer-body {
    padding: 1.15rem 1rem;
    gap: 1rem;
  }

  .drawer-action-tabs {
    gap: 0.25rem;
    padding: 3px;
  }

  .drawer-tab-btn {
    font-size: 0.72rem;
    padding: 0.45rem 0.15rem;
  }

  /* Form & Cropper on Mobile */
  .form-card {
    padding: 1.25rem 0.85rem;
    border-radius: var(--radius-md);
  }

  .form-control {
    font-size: 16px; /* Prevent iOS Safari auto-zoom */
    padding: 0.7rem 0.85rem;
  }

  .category-pills {
    gap: 0.35rem;
  }

  .cat-pill {
    padding: 0.42rem 0.75rem !important;
    font-size: 0.78rem !important;
  }

  .toggle-mode-btn {
    padding: 0.45rem 0.6rem;
    font-size: 0.78rem;
  }

  .dropzone {
    padding: 1.25rem 0.75rem;
  }

  .dropzone-prompt svg {
    width: 32px;
    height: 32px;
  }

  .dropzone-prompt p {
    font-size: 0.88rem;
  }

  .cropper-canvas-wrap {
    max-height: 340px;
    padding: 8px;
    touch-action: none;
  }

  #cropper-canvas {
    max-width: 100%;
    height: auto;
    touch-action: none;
  }

  /* Bulk Item Cards */
  .bulk-item-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.85rem;
  }

  .bulk-item-thumb {
    width: 75px;
    height: 100px;
    align-self: center;
  }

  /* Toast notification on mobile */
  .toast-notice {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: calc(100% - 2rem);
    font-size: 0.82rem;
    padding: 0.65rem 1rem;
    justify-content: center;
    text-align: center;
  }

  /* Legal section links */
  .legal-box {
    padding: 1.25rem 0.85rem;
    gap: 1.25rem;
  }

  .legal-box a.btn-primary {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
  }
}

/* Extra Small Mobile Devices (<= 360px) */
@media (max-width: 360px) {
  .wallpaper-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.6rem;
  }

  .card-body {
    padding: 0.6rem 0.5rem;
  }

  .card-title {
    font-size: 0.85rem;
  }

  .card-footer {
    gap: 0.2rem;
  }

  .card-download-btn {
    font-size: 0.72rem;
    padding: 0.4rem 0.25rem;
  }

  .btn-card-icon, .btn-suggest-change, .btn-copy-link {
    width: 28px;
    height: 28px;
    min-width: 28px;
    max-width: 28px;
    flex: 0 0 28px;
    font-size: 0.75rem;
  }

  .drawer-action-tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
  }
}