/* Container */
.app-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-4);
}
/* Header */
.header {
  margin-bottom: var(--spacing-8);
  text-align: center;
  position: relative;
}
.header::after {
  content: '';
  position: absolute;
  bottom: -var(--spacing-4);
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--border-radius-full);
}
.header__title {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-2);
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}
.header__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}
.header__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--spacing-4);
}
/* Theme Toggle */
.theme-toggle {
  position: relative;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-full);
  padding: var(--spacing-2);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
}
.theme-toggle:hover {
  background: var(--color-bg-tertiary);
  transform: translateY(-2px);
}
.theme-toggle .material-icons {
  font-size: 20px;
  color: var(--color-text-primary);
  transition: all var(--transition-normal);
}
/* Theme Icon Visibility */
[data-theme="light"] .theme-toggle__icon--dark,
[data-theme="dark"] .theme-toggle__icon--light {
  display: none;
}
[data-theme="light"] .theme-toggle__icon--light,
[data-theme="dark"] .theme-toggle__icon--dark {
  display: block;
}
/* Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-medium);
}
.toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}
/* Loading States */
.loading-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
  z-index: var(--z-modal);
  display: none;
  color: var(--color-text-primary);
}
.loading-indicator.active {
  display: flex;
}
/* Upload Progress */
.upload-progress {
  position: fixed;
  bottom: var(--spacing-6);
  right: var(--spacing-6);
  background: var(--color-bg-primary);
  padding: var(--spacing-4);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease,
    transform 0.3s ease,
    width 0.3s ease;
}
.upload-progress.active {
  opacity: 1;
  transform: translateY(0);
}
.upload-progress__title {
  margin-bottom: var(--spacing-2);
  color: var(--color-text-secondary);
}
/* Theme Toggle Animation */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.theme-toggle--animating .material-icons {
  animation: rotate 0.3s ease-in-out;
}
/* Dark Mode Specific Styles */
[data-theme="dark"] {
  .toolbar {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
  }
  .theme-toggle {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
  }
  .theme-toggle:hover {
    background: var(--color-bg-primary);
  }
  .upload-progress {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
  }
}
/* Responsive Design */
@media (max-width: 900px) {
  .toolbar {
    flex-direction: column;
  }
  .toolbar__actions {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 600px) {
  .app-container {
    padding: var(--spacing-2);
  }
  .header__title {
    font-size: var(--font-size-3xl);
  }
  .upload-progress {
    left: var(--spacing-4);
    right: var(--spacing-4);
    bottom: var(--spacing-4);
  }
}
/* Print Styles */
@media print {
  .toolbar,
  .upload-zone,
  .loading-indicator,
  .upload-progress,
  .theme-toggle {
    display: none !important;
  }
  .header::after {
    display: none;
  }
  .header__title {
    color: black;
    -webkit-text-fill-color: initial;
    background: none;
  }
}