:root {
  /* Colors */
  --color-primary: #007aff;
  --color-bg-light: #ffffff;
  --color-bg-off-white: whitesmoke;
  --color-text-main: #000000;
  --color-text-muted: #666666;
  --color-border: lightgrey;
  --color-hover: #f5f5f5;
  --color-selected: #e3f2fd;

  /* Shadows */
  --shadow-card: 0px 3px 5px rgba(255, 255, 255, 0.5);
  --shadow-button: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-button-outer:
    0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --shadow-button-hover:
    0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  --shadow-button-active: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-elevation-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-elevation-md: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-overlay: 0 -2px 10px rgba(0, 0, 0, 0.1);

  /* Button Gradients */
  --btn-gradient-top: #ffffff;
  --btn-gradient-bottom: #d4d4d4;
  --btn-hover-gradient-top: #ffffff;
  --btn-hover-gradient-bottom: #e8e8e8;
  --btn-active-gradient-top: #c4c4c4;
  --btn-active-gradient-bottom: #eeeeee;
  --btn-primary-gradient-top: #5bacf5;
  --btn-primary-gradient-bottom: #1a7fd8;
  --btn-primary-hover-top: #6db9f7;
  --btn-primary-hover-bottom: #2b8ee0;

  /* Borders */
  --border-glossy: 1px solid rgba(0, 0, 0, 0.2);
  --border-radius-btn: 6px;
  --border-radius-card: 8px;

  /* Spacing */
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 18px;
  --padding-sm: 8px;
  --padding-md: 10px 15px;
  --padding-lg: 15px;

  /* Transitions */
  --transition-fast: all 0.15s ease-out;
  --transition-normal: all 0.2s ease;
  --transition-smooth: all 0.2s ease-out;

  /* Overlay Effects */
  --overlay-white-semi: rgba(255, 255, 255, 0.95);
  --overlay-blue-radial: radial-gradient(
    ellipse at center,
    rgba(0, 122, 255, 0.5) 0%,
    rgba(0, 122, 255, 0.2) 50%,
    transparent 70%
  );
  --glossy-overlay: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0)
  );
  --glossy-overlay-strong: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );

  /* Component Sizes */
  --preview-options-height: 50px;
  --preview-controls-height: 60px;
  --carousel-option-width: 120px;
  --filter-preview-height: 120px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family:
    "Lucida Grande", "Lucida Sans Unicode", "Segoe UI", Tahoma, Verdana,
    sans-serif;
  line-height: 1.5;
  background-color: var(--color-bg-light);
  color: var(--color-text-main);
  height: 100vh;
  overflow: hidden;
}

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    linear-gradient(to bottom, #e8e8e8 0%, #d4d4d4 100%),
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQYV2NkYGD4z8DAwMgABXAGNgGwSgYYR7YRDYcZGABHAAX8EDoZgQAAAABJRU5ErkJggg==");
  background-repeat: repeat;
  overflow: hidden;
}

.page-content-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}

.beta-ribbon {
  position: absolute;
  top: 30px;
  right: -35px;
  background: linear-gradient(to bottom, #ff6b6b 0%, #ee5a52 100%);
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 40px;
  transform: rotate(45deg);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  z-index: 100;
  border-top: 1px solid #ff8383;
  border-bottom: 1px solid #d54941;
}

.body-container {
  max-width: 1100px;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-off-white);
  margin: 0 auto;
  padding: 25px 0;
}

@media (max-width: 1200px) {
  .beta-ribbon {
    display: none;
  }
}