/* Мистическая тема для Свет Арканов */

:root {
    --primary: #1a0033;
    --secondary: #4a148c;
    --accent: #9c27b0;
    --gold: #ffd700;
    --text: #e0e0e0;
    --text-dim: #b0b0b0;
    --card-bg: rgba(74, 20, 140, 0.2);
    --card-border: rgba(156, 39, 176, 0.3);
    --glow: rgba(156, 39, 176, 0.6);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--primary);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Звездный фон */
.stars-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1a0033 0%, #000000 100%);
    z-index: -1;
}

.stars-bg::before,
.stars-bg::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 200px white,
        200px 100px white,
        300px 300px white,
        400px 150px white,
        150px 400px white,
        250px 250px white,
        350px 50px white,
        50px 350px white,
        450px 250px white,
        180px 80px white,
        280px 380px white,
        380px 180px white,
        80px 280px white,
        320px 120px white,
        120px 320px white;
    animation: twinkle 3s infinite;
}

.stars-bg::after {
    animation-delay: 1.5s;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Контейнер приложения */
.app-container {
    min-height: 100vh;
    padding: 20px;
    padding-bottom: 40px;
}

/* Splash Screen */
.splash-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    animation: fadeIn 0.5s ease-in;
}

.logo-container {
    text-align: center;
}

.mystical-circle {
    width: 150px;
    height: 150px;
    margin: 0 auto 30px;
    position: relative;
    border: 2px solid var(--accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.inner-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    animation: pulse 2s infinite 0.5s;
}

.rotating-symbols {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    animation: rotate 4s linear infinite;
}

@keyframes pulse {
    0%, 100% { 
        box-shadow: 0 0 20px var(--glow);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 40px var(--glow);
        transform: scale(1.05);
    }
}

@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.app-title {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.app-subtitle {
    color: var(--text-dim);
    font-size: 16px;
}

/* Утилиты */
.hidden {
    display: none !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Главный экран */
.main-screen {
    animation: fadeIn 0.5s ease-in;
}

.app-header {
    margin-bottom: 30px;
}

.greeting {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

.balance-info {
    display: flex;
    gap: 20px;
    font-size: 16px;
}

.balance-item {
    background: var(--card-bg);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--card-border);
}

/* Сетка карточек */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

/* Мистические карточки */
.mystical-card {
    position: relative;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.mystical-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px var(--glow);
}

.mystical-card:active {
    transform: translateY(-2px);
}

.card-icon {
    font-size: 48px;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px var(--glow));
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.card-description {
    font-size: 14px;
    color: var(--text-dim);
}

.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mystical-card:hover .card-glow {
    opacity: 0.3;
}

/* Экраны */
.screen {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.screen-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.back-btn {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text);
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-btn:hover {
    background: var(--secondary);
    border-color: var(--accent);
}

.screen-header h2 {
    font-size: 24px;
    font-weight: 600;
}

/* Date Picker */
.date-picker-container {
    margin-bottom: 30px;
}

.mystical-label {
    display: block;
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--gold);
}

.date-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mystical-input {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    color: var(--text);
    padding: 15px;
    border-radius: 12px;
    font-size: 18px;
    text-align: center;
    width: 80px;
    transition: all 0.3s ease;
}

.mystical-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--glow);
}

.date-separator {
    font-size: 24px;
    color: var(--text-dim);
}

/* Кнопки */
.mystical-button {
    position: relative;
    width: 100%;
    padding: 18px 30px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.mystical-button.primary {
    background: linear-gradient(135deg, var(--secondary), var(--accent));
    color: white;
    box-shadow: 0 5px 20px var(--glow);
}

.mystical-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--glow);
}

.mystical-button.primary:active {
    transform: translateY(0);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.mystical-button:hover .btn-glow {
    left: 100%;
}

.hint-text {
    text-align: center;
    margin-top: 20px;
    color: var(--text-dim);
    font-size: 14px;
}

/* Адаптивность */
@media (max-width: 480px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .mystical-input {
        width: 70px;
        padding: 12px;
        font-size: 16px;
    }
}