:root {
  --transition-fast: 0.2s ease-out;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 50px; 
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --font-size-sm: 0.85rem;
  --font-size-md: 0.95rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.3rem;
  --site-icon-size: 58px;
  --site-name-font-size: 0.9rem;
  --site-card-gap: 18px;
  --site-card-margin-bottom: 8px;
  --site-card-min-height: calc(var(--site-icon-size) + (var(--site-name-font-size) * 1.3 * 2) + var(--site-card-margin-bottom));
  --side-panel-width: 320px;
  --ui-blur-amount: 10px;
  --progress-percentage: 0deg;
  --slider-progress-percent: 0%;
}

[data-theme="light"] {
  --color-background: #f5f5f5;
  --color-surface-dim: #ffffff;
  --color-surface-bright: #ffffff;
  --color-surface-hover: #eeeeeed7;
  --color-selected: #e0e0e0;
  --color-text-on-surface: #212121;
  --color-text-secondary: #757575;
  --color-primary: #4285f4;
  --color-on-primary: #ffffff;
  --color-secondary: #e0e0e0;
  --color-on-secondary: #212121;
  --color-danger: #d32f2f;
  --color-on-danger: #ffffff;
  --color-border: #e0e0e0;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-overlay-backdrop: rgba(0, 0, 0, 0.6);
  --color-pinned-sites-section: rgba(245, 245, 245, 0.75);
  /* Blurred surface colors - High Contrast */
  --color-surface-bright-blurred: rgba(255, 255, 255, 0.55);
  --color-surface-dim-blurred: rgba(245, 245, 245, 0.60);
  --color-selected-blurred: rgba(255, 255, 255, 0.45);
  --border-blurred: rgba(255, 255, 255, 0.5);
  --color-surface-hover-blurred: rgba(255, 255, 255, 0.30);
  --color-side-panel-blurred: rgba(255, 255, 255, 0.70);
}

[data-theme="dark"] {
  --color-background: #121212;
  --color-surface-dim: #1e1e1e;
  --color-surface-bright: #2c2c2c;
  --color-surface-hover: #3a3a3a;
  --color-selected: #333333f1;
  --color-text-on-surface: #e0e0e0;
  --color-text-secondary: #a0a0a0;
  --color-primary: #8ab4f8;
  --color-on-primary: #121212;
  --color-secondary: #424242;
  --color-on-secondary: #e0e0e0;
  --color-danger: #ef9a9a;
  --color-on-danger: #121212;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-overlay-backdrop: rgba(0, 0, 0, 0.8);
  --color-pinned-sites-section: rgba(30, 30, 30, 0.75);
  /* Blurred surface colors - High Contrast */
  --color-surface-bright-blurred: rgba(30, 30, 30, 0.60);
  --color-surface-dim-blurred: rgba(20, 20, 20, 0.65);
  --color-selected-blurred: rgba(50, 50, 50, 0.40);
  --border-blurred: rgba(255, 255, 255, 0.15);
  --color-surface-hover-blurred: rgba(60, 60, 60, 0.35);
  --color-side-panel-blurred: rgba(18, 18, 18, 0.70);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--color-text-on-surface);
  overflow: hidden;
  position: relative;
  background-color: var(--color-background);
  transition: background-color var(--transition-slow);
}

.app-container {
  width: 100%;
  height: 100%;
  position: relative;
  transition: width 0.4s ease-in-out;
}

.background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.background-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.background-media.active {
  opacity: 1;
}

.main-content {
  flex: 1;
  position: relative;
  padding: var(--spacing-md);
  z-index: 5;
  height: 100%;
}