docs: consolidate documentation into organized structure

- Move 12 markdown files from root to docs/ subdirectories
- Organize documentation by category:
  • docs/troubleshooting/ (1 file)  - Technical troubleshooting guides
  • docs/deployment/      (4 files) - Deployment and security documentation
  • docs/guides/          (3 files) - Feature-specific guides
  • docs/planning/        (4 files) - Planning and improvement proposals

Root directory cleanup:
- Reduced from 16 to 4 markdown files in root
- Only essential project files remain:
  • CLAUDE.md (AI instructions)
  • README.md (Main project readme)
  • CLEANUP_PLAN.md (Current cleanup plan)
  • SRC_STRUCTURE_IMPROVEMENTS.md (Structure improvements)

This improves:
✅ Documentation discoverability
✅ Logical organization by purpose
✅ Clean root directory
✅ Better maintainability

resources/css/components/alert.css

@@ -0,0 +1,99 @@
+/* Alert Component
+   ========================================================================== */
+
+.alert {
+  position: relative;
+  display: flex;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-4, 1rem);
+  margin-block-end: var(--space-4, 1rem);
+  border-radius: var(--radius-md, 0.375rem);
+  border: 1px solid transparent;
+}
+
+/* Alert Variants */
+.alert--info {
+  background-color: oklch(from var(--color-info, #0ea5e9) l c h / 0.1);
+  border-color: oklch(from var(--color-info, #0ea5e9) l c h / 0.3);
+  color: var(--color-info-dark, #0369a1);
+}
+
+.alert--success {
+  background-color: oklch(from var(--color-success, #10b981) l c h / 0.1);
+  border-color: oklch(from var(--color-success, #10b981) l c h / 0.3);
+  color: var(--color-success-dark, #047857);
+}
+
+.alert--warning {
+  background-color: oklch(from var(--color-warning, #f59e0b) l c h / 0.1);
+  border-color: oklch(from var(--color-warning, #f59e0b) l c h / 0.3);
+  color: var(--color-warning-dark, #b45309);
+}
+
+.alert--danger {
+  background-color: oklch(from var(--color-danger, #dc2626) l c h / 0.1);
+  border-color: oklch(from var(--color-danger, #dc2626) l c h / 0.3);
+  color: var(--color-danger-dark, #991b1b);
+}
+
+/* Alert Icon */
+.alert__icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* Alert Content */
+.alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.alert__title {
+  font-weight: 600;
+  margin-block-end: var(--space-1, 0.25rem);
+}
+
+.alert__message {
+  font-size: var(--font-size-sm, 0.875rem);
+  line-height: 1.5;
+}
+
+/* Alert Close Button */
+.alert__close {
+  position: absolute;
+  top: var(--space-2, 0.5rem);
+  right: var(--space-2, 0.5rem);
+  padding: var(--space-1, 0.25rem);
+  background: transparent;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  opacity: 0.5;
+  cursor: pointer;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.alert__close:hover {
+  opacity: 1;
+}
+
+.alert--dismissible {
+  padding-inline-end: var(--space-10, 2.5rem);
+}
+
+/* Alert Animation */
+@keyframes alert-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.alert {
+  animation: alert-slide-in 0.2s ease-out;
+}

resources/css/components/badge.css

@@ -0,0 +1,71 @@
+/* Badge Component
+   ========================================================================== */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: var(--radius-sm, 0.25rem);
+  transition: background-color 0.15s ease-in-out;
+}
+
+/* Badge Sizes */
+.badge--sm {
+  padding: 0.125rem var(--space-1, 0.25rem);
+  font-size: 0.625rem;
+}
+
+.badge--md {
+  /* Default size - already defined above */
+}
+
+.badge--lg {
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  font-size: var(--font-size-sm, 0.875rem);
+}
+
+/* Badge Variants */
+.badge--default {
+  background-color: var(--color-surface-secondary, #f3f4f6);
+  color: var(--color-text-primary, #1a1a1a);
+}
+
+.badge--primary {
+  background-color: var(--color-primary, #3b82f6);
+  color: white;
+}
+
+.badge--success {
+  background-color: var(--color-success, #10b981);
+  color: white;
+}
+
+.badge--warning {
+  background-color: var(--color-warning, #f59e0b);
+  color: white;
+}
+
+.badge--danger {
+  background-color: var(--color-danger, #dc2626);
+  color: white;
+}
+
+.badge--info {
+  background-color: var(--color-info, #0ea5e9);
+  color: white;
+}
+
+/* Badge Pill Variant */
+.badge--pill {
+  border-radius: 9999px;
+  padding-inline: var(--space-3, 0.75rem);
+}
+
+/* Badge with Icon Support */
+.badge__icon {
+  margin-inline-end: var(--space-1, 0.25rem);
+}

resources/css/components/button-group.css

@@ -0,0 +1,71 @@
+/* Button Group Component
+   ========================================================================== */
+
+.btn-group {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.btn-group > .btn {
+  position: relative;
+  flex: 0 1 auto;
+}
+
+/* Remove border radius for middle buttons */
+.btn-group > .btn:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.btn-group > .btn:first-child:not(:last-child) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.btn-group > .btn:last-child:not(:first-child) {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+/* Focus state layering */
+.btn-group > .btn:focus {
+  z-index: 1;
+}
+
+/* Vertical Button Group */
+.btn-group--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.btn-group--vertical > .btn {
+  width: 100%;
+}
+
+.btn-group--vertical > .btn:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.btn-group--vertical > .btn:first-child:not(:last-child) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.btn-group--vertical > .btn:last-child:not(:first-child) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+/* Button Group Sizes */
+.btn-group--sm > .btn {
+  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
+  font-size: var(--font-size-sm, 0.875rem);
+}
+
+.btn-group--md > .btn {
+  /* Default size - inherits from .btn */
+}
+
+.btn-group--lg > .btn {
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  font-size: var(--font-size-lg, 1.125rem);
+}

resources/css/components/container.css

@@ -0,0 +1,43 @@
+/* Container Component
+   ========================================================================== */
+
+.container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: var(--space-4, 1rem);
+}
+
+/* Container Sizes */
+.container--sm {
+  max-width: 640px;
+}
+
+.container--default {
+  max-width: 1024px;
+}
+
+.container--lg {
+  max-width: 1280px;
+}
+
+.container--xl {
+  max-width: 1536px;
+}
+
+/* Fluid Container (no max-width) */
+.container--fluid {
+  max-width: none;
+}
+
+/* Responsive Container */
+@media (min-width: 640px) {
+  .container {
+    padding-inline: var(--space-6, 1.5rem);
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    padding-inline: var(--space-8, 2rem);
+  }
+}

resources/css/components/forms.css

@@ -0,0 +1,179 @@
+/* Form Components
+   ========================================================================== */
+
+/* Form Group Container */
+.form-group {
+  margin-block-end: var(--space-4, 1rem);
+}
+
+/* Form Labels */
+.form-label {
+  display: block;
+  margin-block-end: var(--space-2, 0.5rem);
+  font-size: var(--font-size-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--color-text-primary, #1a1a1a);
+}
+
+.form-label--required::after {
+  content: " *";
+  color: var(--color-danger, #dc2626);
+}
+
+/* Form Input */
+.form-input {
+  display: block;
+  width: 100%;
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  font-size: var(--font-size-base, 1rem);
+  line-height: 1.5;
+  color: var(--color-text-primary, #1a1a1a);
+  background-color: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: var(--radius-md, 0.375rem);
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-input:focus {
+  outline: 0;
+  border-color: var(--color-primary, #3b82f6);
+  box-shadow: 0 0 0 3px oklch(from var(--color-primary, #3b82f6) l c h / 0.2);
+}
+
+.form-input::placeholder {
+  color: var(--color-text-tertiary, #9ca3af);
+  opacity: 1;
+}
+
+.form-input:disabled {
+  background-color: var(--color-surface-secondary, #f3f4f6);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.form-input--error {
+  border-color: var(--color-danger, #dc2626);
+}
+
+.form-input--error:focus {
+  border-color: var(--color-danger, #dc2626);
+  box-shadow: 0 0 0 3px oklch(from var(--color-danger, #dc2626) l c h / 0.2);
+}
+
+/* Form Select */
+.form-select {
+  display: block;
+  width: 100%;
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  font-size: var(--font-size-base, 1rem);
+  line-height: 1.5;
+  color: var(--color-text-primary, #1a1a1a);
+  background-color: var(--color-surface, #ffffff);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right var(--space-3, 0.75rem) center;
+  background-size: 16px 12px;
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: var(--radius-md, 0.375rem);
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  appearance: none;
+}
+
+.form-select:focus {
+  outline: 0;
+  border-color: var(--color-primary, #3b82f6);
+  box-shadow: 0 0 0 3px oklch(from var(--color-primary, #3b82f6) l c h / 0.2);
+}
+
+.form-select--error {
+  border-color: var(--color-danger, #dc2626);
+}
+
+/* Form Textarea */
+.form-textarea {
+  display: block;
+  width: 100%;
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  font-size: var(--font-size-base, 1rem);
+  line-height: 1.5;
+  color: var(--color-text-primary, #1a1a1a);
+  background-color: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: var(--radius-md, 0.375rem);
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  resize: vertical;
+}
+
+.form-textarea:focus {
+  outline: 0;
+  border-color: var(--color-primary, #3b82f6);
+  box-shadow: 0 0 0 3px oklch(from var(--color-primary, #3b82f6) l c h / 0.2);
+}
+
+.form-textarea--error {
+  border-color: var(--color-danger, #dc2626);
+}
+
+/* Checkbox Group */
+.form-checkbox-group {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2, 0.5rem);
+  margin-block-end: var(--space-4, 1rem);
+}
+
+.form-checkbox {
+  width: 1rem;
+  height: 1rem;
+  margin-block-start: 0.25rem;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.form-checkbox:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.form-checkbox-label {
+  font-size: var(--font-size-base, 1rem);
+  color: var(--color-text-primary, #1a1a1a);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Radio Group */
+.form-radio-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2, 0.5rem);
+  margin-block-end: var(--space-3, 0.75rem);
+}
+
+.form-radio {
+  width: 1rem;
+  height: 1rem;
+  margin-block-start: 0.25rem;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.form-radio:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.form-radio-label {
+  font-size: var(--font-size-base, 1rem);
+  color: var(--color-text-primary, #1a1a1a);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Form Error Message */
+.form-error {
+  display: block;
+  margin-block-start: var(--space-2, 0.5rem);
+  font-size: var(--font-size-sm, 0.875rem);
+  color: var(--color-danger, #dc2626);
+}

resources/css/components/image-manager.css

@@ -0,0 +1,915 @@
+/* ==========================================================================
+   Image Manager Components
+   ========================================================================== */
+
+/* Upload Area Styles
+   ========================================================================== */
+
+.image-upload-area {
+    position: relative;
+    border: 2px dashed var(--color-border-subtle);
+    border-radius: var(--border-radius-lg);
+    background: var(--color-surface-subtle);
+    transition: all 0.2s ease;
+    min-height: 200px;
+}
+
+.image-upload-area:hover,
+.image-upload-area:focus-within {
+    border-color: var(--color-primary);
+    background: var(--color-surface-elevated);
+}
+
+.image-upload-area--drag-over {
+    border-color: var(--color-success);
+    background: var(--color-success-subtle);
+    transform: scale(1.02);
+}
+
+.upload-area__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-xl);
+    text-align: center;
+    gap: var(--space-md);
+}
+
+.upload-area__icon {
+    color: var(--color-text-subtle);
+    opacity: 0.6;
+}
+
+.upload-area__text h3 {
+    margin: 0 0 var(--space-xs) 0;
+    color: var(--color-text-primary);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+}
+
+.upload-area__text p {
+    margin: 0;
+    color: var(--color-text-subtle);
+    font-size: var(--font-size-sm);
+}
+
+.upload-area__button {
+    background: var(--color-primary);
+    color: var(--color-primary-contrast);
+    border: none;
+    border-radius: var(--border-radius-md);
+    padding: var(--space-sm) var(--space-lg);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.upload-area__button:hover {
+    background: var(--color-primary-hover);
+    transform: translateY(-1px);
+}
+
+.upload-area__preview {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    border-top: 1px solid var(--color-border-subtle);
+}
+
+.preview-item {
+    position: relative;
+    aspect-ratio: 1;
+    border-radius: var(--border-radius-md);
+    overflow: hidden;
+    background: var(--color-surface-elevated);
+}
+
+.preview-item__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.preview-item__info {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+    padding: var(--space-xs);
+    color: white;
+    font-size: var(--font-size-xs);
+}
+
+.preview-item__name {
+    font-weight: var(--font-weight-medium);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.preview-item__size {
+    opacity: 0.8;
+    font-size: var(--font-size-xs);
+}
+
+.upload-area__progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--color-surface-elevated);
+    border-top: 1px solid var(--color-border-subtle);
+    padding: var(--space-md);
+    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
+}
+
+.progress-bar {
+    background: var(--color-background-muted);
+    border-radius: var(--border-radius-full);
+    height: 8px;
+    overflow: hidden;
+    margin-bottom: var(--space-xs);
+}
+
+.progress-bar__fill {
+    background: var(--color-primary);
+    height: 100%;
+    border-radius: var(--border-radius-full);
+    transition: width 0.3s ease;
+    width: 0%;
+}
+
+.progress-text {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-subtle);
+    text-align: center;
+}
+
+/* Image Gallery Styles
+   ========================================================================== */
+
+.image-gallery {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+}
+
+.gallery__controls {
+    display: flex;
+    gap: var(--space-md);
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.gallery__search-wrapper {
+    position: relative;
+    flex: 1;
+    min-width: 200px;
+}
+
+.gallery__search {
+    width: 100%;
+    padding: var(--space-sm) var(--space-md);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--border-radius-md);
+    font-size: var(--font-size-base);
+    background: var(--color-surface);
+}
+
+.gallery__search:focus {
+    border-color: var(--color-primary);
+    outline: none;
+    box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
+}
+
+.gallery__search-clear {
+    position: absolute;
+    right: var(--space-sm);
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    font-size: var(--font-size-lg);
+    color: var(--color-text-subtle);
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius-sm);
+}
+
+.gallery__search-clear:hover {
+    background: var(--color-surface-subtle);
+    color: var(--color-text-primary);
+}
+
+.gallery__sort-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.gallery__sort {
+    padding: var(--space-sm) var(--space-md);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--border-radius-md);
+    background: var(--color-surface);
+    font-size: var(--font-size-base);
+}
+
+.gallery__grid {
+    display: grid;
+    grid-template-columns: repeat(var(--columns, 4), 1fr);
+    gap: var(--space-lg);
+    grid-auto-rows: min-content;
+}
+
+@media (max-width: 1200px) {
+    .gallery__grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .gallery__grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--space-md);
+    }
+}
+
+@media (max-width: 480px) {
+    .gallery__grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.gallery__item {
+    position: relative;
+    border-radius: var(--border-radius-lg);
+    overflow: hidden;
+    background: var(--color-surface);
+    box-shadow: var(--shadow-sm);
+    transition: all 0.2s ease;
+}
+
+.gallery__item:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.gallery__item--selected {
+    box-shadow: 0 0 0 3px var(--color-primary);
+}
+
+.gallery__item-inner {
+    display: flex;
+    flex-direction: column;
+}
+
+.gallery__item-image {
+    position: relative;
+    aspect-ratio: 4/3;
+    overflow: hidden;
+}
+
+.gallery__item-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.2s ease;
+}
+
+.gallery__item:hover .gallery__item-image img {
+    transform: scale(1.05);
+}
+
+.gallery__item-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.gallery__item:hover .gallery__item-overlay {
+    opacity: 1;
+}
+
+.gallery__item-actions {
+    display: flex;
+    gap: var(--space-sm);
+}
+
+.action-btn {
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: var(--border-radius-full);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: var(--font-size-base);
+}
+
+.action-btn:hover {
+    background: white;
+    transform: scale(1.1);
+}
+
+.action-btn.select-btn {
+    background: var(--color-primary);
+    color: white;
+}
+
+.action-btn.delete-btn:hover {
+    background: var(--color-danger);
+    color: white;
+}
+
+.gallery__item-info {
+    padding: var(--space-md);
+}
+
+.gallery__item-name {
+    font-weight: var(--font-weight-medium);
+    margin-bottom: var(--space-xs);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gallery__item-meta {
+    display: flex;
+    gap: var(--space-sm);
+    font-size: var(--font-size-xs);
+    color: var(--color-text-subtle);
+}
+
+.meta-item {
+    background: var(--color-surface-subtle);
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--border-radius-sm);
+}
+
+.gallery__pagination {
+    display: flex;
+    justify-content: center;
+    padding: var(--space-lg) 0;
+}
+
+.gallery__load-more {
+    background: var(--color-primary);
+    color: var(--color-primary-contrast);
+    border: none;
+    border-radius: var(--border-radius-md);
+    padding: var(--space-md) var(--space-xl);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.gallery__load-more:hover:not(:disabled) {
+    background: var(--color-primary-hover);
+    transform: translateY(-1px);
+}
+
+.gallery__load-more:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.gallery__loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-xl);
+    color: var(--color-text-subtle);
+}
+
+.gallery__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-xxl);
+    text-align: center;
+    color: var(--color-text-subtle);
+}
+
+.empty-state__icon {
+    margin-bottom: var(--space-lg);
+    opacity: 0.5;
+}
+
+.gallery__empty h3 {
+    margin: 0 0 var(--space-sm) 0;
+    color: var(--color-text-primary);
+}
+
+.gallery__empty p {
+    margin: 0;
+    font-size: var(--font-size-base);
+}
+
+.gallery__error {
+    margin: var(--space-md) 0;
+}
+
+.error-message {
+    background: var(--color-danger-subtle);
+    border: 1px solid var(--color-danger);
+    border-radius: var(--border-radius-md);
+    padding: var(--space-md);
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.error-icon {
+    font-size: var(--font-size-lg);
+}
+
+.error-text {
+    flex: 1;
+    color: var(--color-danger-contrast);
+}
+
+.error-close {
+    background: none;
+    border: none;
+    font-size: var(--font-size-lg);
+    color: var(--color-danger-contrast);
+    cursor: pointer;
+    opacity: 0.7;
+}
+
+.error-close:hover {
+    opacity: 1;
+}
+
+/* Image Modal Styles
+   ========================================================================== */
+
+.image-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    display: none;
+}
+
+.image-modal--open {
+    display: block;
+}
+
+.image-modal__backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(4px);
+}
+
+.image-modal__container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: var(--color-surface);
+    animation: modalSlideIn 0.3s ease;
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.image-modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-lg);
+    border-bottom: 1px solid var(--color-border-subtle);
+    background: var(--color-surface-elevated);
+}
+
+.image-modal__title {
+    margin: 0;
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    margin-right: var(--space-md);
+}
+
+.image-modal__actions {
+    display: flex;
+    gap: var(--space-sm);
+}
+
+.modal-btn {
+    border: none;
+    border-radius: var(--border-radius-md);
+    padding: var(--space-sm);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+}
+
+.modal-btn--primary {
+    background: var(--color-primary);
+    color: var(--color-primary-contrast);
+}
+
+.modal-btn--secondary {
+    background: var(--color-surface-subtle);
+    color: var(--color-text-primary);
+}
+
+.modal-btn--danger {
+    background: var(--color-danger-subtle);
+    color: var(--color-danger);
+}
+
+.modal-btn--ghost {
+    background: transparent;
+    color: var(--color-text-subtle);
+}
+
+.modal-btn--small {
+    width: auto;
+    height: auto;
+    padding: var(--space-xs) var(--space-sm);
+    font-size: var(--font-size-sm);
+}
+
+.modal-btn--success {
+    background: var(--color-success) !important;
+    color: var(--color-success-contrast) !important;
+}
+
+.modal-btn:hover {
+    opacity: 0.8;
+    transform: translateY(-1px);
+}
+
+.modal-close {
+    background: transparent;
+    border: none;
+    color: var(--color-text-subtle);
+    cursor: pointer;
+    padding: var(--space-sm);
+}
+
+.image-modal__content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+.image-modal__image-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-background-muted);
+    position: relative;
+    overflow: hidden;
+}
+
+.image-modal__image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: var(--border-radius-md);
+}
+
+.image-modal__loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-md);
+}
+
+.image-modal__sidebar {
+    width: 400px;
+    background: var(--color-surface-elevated);
+    border-left: 1px solid var(--color-border-subtle);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+@media (max-width: 1024px) {
+    .image-modal__content {
+        flex-direction: column;
+    }
+
+    .image-modal__sidebar {
+        width: 100%;
+        max-height: 40%;
+        border-left: none;
+        border-top: 1px solid var(--color-border-subtle);
+    }
+}
+
+.image-modal__metadata,
+.image-modal__alt-text,
+.image-modal__variants {
+    padding: var(--space-lg);
+    border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.image-modal__metadata h3,
+.image-modal__alt-text h3,
+.image-modal__variants h3 {
+    margin: 0 0 var(--space-md) 0;
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+}
+
+.metadata-grid {
+    display: grid;
+    gap: var(--space-sm);
+}
+
+.metadata-item {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-sm);
+    align-items: center;
+}
+
+.metadata-item label {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-subtle);
+    font-weight: var(--font-weight-medium);
+}
+
+.metadata-value {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-primary);
+}
+
+.metadata-value--hash {
+    font-family: var(--font-mono);
+    word-break: break-all;
+    background: var(--color-surface-subtle);
+    padding: var(--space-xs);
+    border-radius: var(--border-radius-sm);
+}
+
+.alt-text-input {
+    width: 100%;
+    min-height: 80px;
+    padding: var(--space-sm);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--border-radius-md);
+    font-size: var(--font-size-sm);
+    font-family: inherit;
+    resize: vertical;
+    background: var(--color-surface);
+}
+
+.alt-text-input:focus {
+    border-color: var(--color-primary);
+    outline: none;
+    box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
+}
+
+.alt-text-actions {
+    margin-top: var(--space-sm);
+}
+
+.variants-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.variant-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-sm);
+    background: var(--color-surface-subtle);
+    border-radius: var(--border-radius-md);
+}
+
+.variant-info strong {
+    display: block;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+}
+
+.variant-dimensions {
+    font-size: var(--font-size-xs);
+    color: var(--color-text-subtle);
+}
+
+.variant-link {
+    color: var(--color-primary);
+    text-decoration: none;
+    padding: var(--space-xs);
+    border-radius: var(--border-radius-sm);
+    transition: background 0.2s ease;
+}
+
+.variant-link:hover {
+    background: var(--color-primary-alpha-10);
+}
+
+.no-variants {
+    text-align: center;
+    color: var(--color-text-subtle);
+    font-style: italic;
+    margin: 0;
+}
+
+.image-error {
+    text-align: center;
+    padding: var(--space-xl);
+    color: var(--color-text-subtle);
+}
+
+.image-error__icon {
+    font-size: 3rem;
+    margin-bottom: var(--space-md);
+}
+
+.image-error h3 {
+    margin: 0 0 var(--space-sm) 0;
+    color: var(--color-text-primary);
+}
+
+.image-error p {
+    margin: 0 0 var(--space-lg) 0;
+}
+
+/* Notification Styles
+   ========================================================================== */
+
+.notification {
+    position: fixed;
+    top: var(--space-lg);
+    right: var(--space-lg);
+    z-index: 1100;
+    max-width: 400px;
+    background: var(--color-surface-elevated);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--shadow-lg);
+    opacity: 0;
+    transform: translateX(100%);
+    transition: all 0.3s ease;
+}
+
+.notification--visible {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.notification--success {
+    border-left: 4px solid var(--color-success);
+}
+
+.notification--error {
+    border-left: 4px solid var(--color-danger);
+}
+
+.notification--info {
+    border-left: 4px solid var(--color-primary);
+}
+
+.notification__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-md);
+}
+
+.notification__message {
+    flex: 1;
+    margin-right: var(--space-sm);
+}
+
+.notification__close {
+    background: none;
+    border: none;
+    font-size: var(--font-size-lg);
+    color: var(--color-text-subtle);
+    cursor: pointer;
+    padding: var(--space-xs);
+    border-radius: var(--border-radius-sm);
+}
+
+.notification__close:hover {
+    background: var(--color-surface-subtle);
+}
+
+/* Loading Spinner
+   ========================================================================== */
+
+.loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--color-border-subtle);
+    border-top: 3px solid var(--color-primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Modal Open State
+   ========================================================================== */
+
+body.modal-open {
+    overflow: hidden;
+}
+
+/* Focus Styles
+   ========================================================================== */
+
+.image-upload-area:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+.gallery__item:focus-within {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+/* Reduced Motion
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+    .image-modal__container,
+    .notification,
+    .gallery__item,
+    .upload-area__button,
+    .modal-btn,
+    .action-btn {
+        transition: none;
+        animation: none;
+    }
+
+    .loading-spinner {
+        animation: none;
+        border: 3px solid var(--color-primary);
+    }
+}
+
+/* Print Styles
+   ========================================================================== */
+
+@media print {
+    .image-modal,
+    .notification,
+    .gallery__item-overlay,
+    .upload-area__button {
+        display: none !important;
+    }
+}