:root {
    /* Light Mode Defaults */
    --background: 0 0% 98%;
    --foreground: 285 33% 15%;
    --card: 0 0% 100%;
    --card-foreground: 285 33% 15%;
    --primary: 275 80% 65%;
    --muted: 285 20% 90%;
    --muted-foreground: 285 10% 40%;
    --accent: 275 80% 90%;
    --border: 285 20% 85%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
}
.dark {
    /* Dark Mode Overrides */
    --background: 285 33% 15%;
    --foreground: 285 10% 85%;
    --card: 285 30% 20%;
    --card-foreground: 285 10% 85%;
    --primary: 275 80% 65%;
    --muted: 285 33% 23%;
    --muted-foreground: 285 5% 65%;
    --accent: 285 33% 23%;
    --border: 285 30% 25%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
}
body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: radial-gradient(ellipse at 50% 20%, hsl(var(--accent)), transparent 70%);
}
@keyframes slow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-slow-spin {
  animation: slow-spin 20s linear infinite;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0; /* Скрываем элемент до начала анимации */
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 10px 40px -10px hsla(275, 80%, 65%, 0.2);
}

/* Анимации для тоста */
#toast {
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes timer-shrink {
    from { width: 100%; }
    to { width: 0%; }
}

/* Стили для плавающей панели */
.navbar {
    position: fixed;
    z-index: 101;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Позиции панели */
.nav-bottom { bottom: 2rem; left: 50%; transform: translateX(-50%); border-radius: 9999px; flex-direction: row; width: 33vw; min-width: fit-content; justify-content: space-evenly; }
.nav-top { top: 2rem; left: 50%; transform: translateX(-50%); border-radius: 9999px; flex-direction: row; width: 33vw; min-width: fit-content; justify-content: space-evenly; }
.nav-left { left: 2rem; top: 50%; transform: translateY(-50%); border-radius: 2rem; flex-direction: column; height: 33vh; min-height: fit-content; justify-content: space-evenly; }
.nav-right { right: 2rem; top: 50%; transform: translateY(-50%); border-radius: 2rem; flex-direction: column; height: 33vh; min-height: fit-content; justify-content: space-evenly; }

/* Разделитель меняет ориентацию */
.nav-separator { background-color: hsl(var(--border)); opacity: 0.5; transition: all 0.3s; }
.nav-bottom .nav-separator { width: 1px; height: 1.5rem; margin: 0 0.5rem; }
.nav-top .nav-separator { width: 1px; height: 1.5rem; margin: 0 0.5rem; }
.nav-left .nav-separator { width: 1.5rem; height: 1px; margin: 0.5rem 0; }
.nav-right .nav-separator { width: 1.5rem; height: 1px; margin: 0.5rem 0; }

/* Анимации открытия и закрытия */
@keyframes zoomIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes zoomOut {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

/* Стили для развернутой карточки */
.card-expanded {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90vw !important;
    max-width: 1000px !important;
    height: 85vh !important;
    z-index: 100 !important;
    margin: 0 !important;
    border-radius: 1.5rem !important;
    overflow-y: auto;
    cursor: default;
    background-color: hsl(var(--card)) !important;
    padding: 2rem !important; /* Отступ для контента */
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5) !important;
    border: 1px solid hsl(var(--border)) !important;
    animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.card-closing {
    animation: zoomOut 0.2s ease-in forwards !important;
}

.card-expanded .content-full {
    display: block !important;
    animation: fadeInUp 0.5s ease-out forwards;
}
.interactive-link:hover {
    background-color: hsl(var(--muted) / 0.7) !important;
}

/* Custom Scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.6);
}

/* Gradient for the main title that respects theme changes */
.main-title-gradient {
    background-image: linear-gradient(to bottom, hsl(var(--foreground)), hsl(var(--muted-foreground)));
}