:root {
            --brand-purple: #4c08bd; 
            --christmas-red: #d42426;
            --christmas-green: #165b33;
            --christmas-cream: #f8f2e6;
            --christmas-gold: #fbb034;
            --cell-grey: #34495e;
            --cell-green: #27ae60;
            --cell-past: #57606f; /* Колір архівних днів */
            --font-main: 'Open Sans', sans-serif;
            --font-brand: 'Montserrat', sans-serif;
            --font-decor: 'Pacifico', cursive;
            --font-holiday: 'Mountains of Christmas', cursive;
        }

        [x-cloak] { display: none !important; }

        body {
            margin: 0; font-family: var(--font-main);
            background: linear-gradient(180deg, #0b1026 0%, #2b32b2 100%);
            color: white; overflow-x: hidden; min-height: 100vh;
            display: flex; flex-direction: column; position: relative;
            user-select: none; -webkit-user-select: none; cursor: default;
        }
        
        img { pointer-events: none; -webkit-user-drag: none; }
        header img { pointer-events: auto; }
        #tsparticles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

        header {
            background-color: var(--brand-purple); padding: 8px 20px; 
            display: flex; justify-content: center; position: relative; z-index: 100;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.1); height: 50px;
        }
        .header-content { width: 100%; max-width: 800px; display: flex; justify-content: flex-start; align-items: center; }
        .logo-link { display: inline-block; cursor: pointer; transition: transform 0.2s; text-decoration: none; pointer-events: auto; }
        .logo-link:hover { transform: scale(1.05); }
        .header-logo-img { height: 35px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }

        .landscape { position: fixed; bottom: 0; left: 0; width: 100%; height: 250px; z-index: 2; pointer-events: none; }
        .snowdrifts { position: absolute; bottom: 0; width: 100%; height: 100%; fill: #e6f3f8; }
        .trees-layer { position: absolute; bottom: 30px; width: 100%; display: flex; justify-content: space-between; padding: 0 5%; box-sizing: border-box; opacity: 0.9; }
        .tree { fill: #1e5128; width: 60px; height: 100px; transform-origin: bottom center; animation: sway 5s ease-in-out infinite; }
        .tree:nth-child(2n) { fill: #143d1e; animation-duration: 7s; height: 120px; width: 70px; }
        .tree:nth-child(3n) { fill: #2a6f35; animation-duration: 6s; height: 80px; width: 50px; }
        @keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2deg); } }

        main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 40px 20px 120px 20px; position: relative; z-index: 10; }

        h1.calendar-title {
            font-family: var(--font-decor); font-size: 3.5rem; margin: 0 0 10px 0; text-align: center; line-height: 1.2;
            transform: rotate(-2deg); color: #ff4757; -webkit-text-stroke: 2px white; text-shadow: 4px 4px 0px rgba(0,0,0,0.2);
        }
        .slogan { font-size: 1.1rem; background: rgba(0, 0, 0, 0.3); padding: 8px 20px; border-radius: 30px; margin-bottom: 30px; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.1); }

        .auth-container {
            background: var(--christmas-cream); padding: 20px 30px; border-radius: 15px;
            display: flex; flex-direction: column; align-items: center; gap: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4); margin-bottom: 40px;
            border: 3px solid var(--christmas-red); color: #333; min-width: 300px; pointer-events: auto;
        }
        .user-info { text-align: center; }
        .user-email { font-weight: 700; color: var(--brand-purple); }
        .logout-btn { background: none; border: none; text-decoration: underline; color: #888; cursor: pointer; font-size: 0.9rem; }
        .logout-btn:hover { color: var(--christmas-red); }

        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 15px; max-width: 800px; width: 100%; }
        .grid.blur { filter: blur(5px); pointer-events: none; opacity: 0.6; }

        .cell {
            background-color: var(--cell-grey); border-radius: 10px; height: 80px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            cursor: pointer; transition: transform 0.2s, background 0.2s; position: relative; box-shadow: 0 4px 0 rgba(0,0,0,0.2); pointer-events: auto; 
        }
        .cell-number { font-size: 1.5rem; font-weight: 700; color: rgba(255,255,255,0.8); margin-bottom: 5px; }
        .cell-icon { font-size: 1rem; opacity: 0.6; }
        
        /* СТАН: МИНУЛЕ (Тепер активне!) */
        .cell.past { 
            background-color: var(--cell-past); 
            opacity: 0.85; 
            cursor: pointer; /* Можна клікати */
            border: 2px solid #7f8c8d;
        } 
        .cell.past .cell-icon::after { content: '📜'; filter: grayscale(0.5); } /* Іконка архіву */
        .cell.past:hover { transform: translateY(-3px); filter: brightness(1.2); }
        
        /* СТАН: МАЙБУТНЄ (Заблоковано) */
        .cell.future { opacity: 0.6; cursor: not-allowed; pointer-events: none; } 
        .cell.future .cell-icon::after { content: '🔒'; }
        
        /* СТАН: СЬОГОДНІ */
        .cell.today { background-color: var(--cell-green); transform: scale(1.1); z-index: 5; box-shadow: 0 0 15px rgba(39, 174, 96, 0.6); animation: pulse 2s infinite; }
        .cell.today .cell-number { color: white; } 
        .cell.today .cell-icon::after { content: '🎁'; opacity: 1; font-size: 1.2rem; }
        .cell.today:hover { transform: scale(1.15); }
        
        /* СТАН: ВІДКРИТО */
        .cell.today.opened, .cell.past.opened { 
            background-color: var(--cell-green); 
            animation: none; 
            cursor: default; 
            border: 2px solid #2ecc71;
        } 
        .cell.today.opened .cell-icon::after, .cell.past.opened .cell-icon::after { 
            content: '✓'; font-weight: bold; filter: none;
        }
        
        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(39, 174, 96, 0); } 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); } }

        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
        .modal-overlay.active { opacity: 1; pointer-events: all; }
        .modal { background: var(--christmas-cream); color: #333; padding: 40px 30px; width: 90%; max-width: 420px; border-radius: 15px; text-align: center; position: relative; transform: scale(0.8) translateY(50px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 5px solid var(--christmas-red); box-shadow: 0 0 0 5px white, 0 0 0 8px var(--christmas-red), 0 30px 80px rgba(0,0,0,0.7); }
        .modal-overlay.active .modal { transform: scale(1) translateY(0); }
        .modal::before { content: '🎅'; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); font-size: 4rem; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2)); z-index: 10; }
        .modal::after { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 2px dashed rgba(212, 36, 38, 0.3); pointer-events: none; border-radius: 10px; }
        .modal-title { font-family: var(--font-holiday); font-size: 2.2rem; margin: 15px 0 15px 0; color: var(--christmas-red); text-shadow: 1px 1px 0px rgba(0,0,0,0.1); }
        .modal-message { font-size: 1.1rem; line-height: 1.6; margin-bottom: 25px; color: #555; font-weight: 600; }
        .prize-box { background: white; padding: 15px; border-radius: 10px; margin-bottom: 25px; border: 2px solid var(--christmas-green); color: var(--christmas-green); font-weight: 800; font-size: 1.2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        .close-btn { background: linear-gradient(135deg, var(--christmas-red), #b91c1e); color: white; border: none; padding: 12px 40px; border-radius: 30px; font-weight: bold; cursor: pointer; font-size: 1.1rem; transition: transform 0.2s, box-shadow 0.2s; font-family: var(--font-brand); text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 5px 0 #8a1516; }
        .close-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #8a1516; }

        @media (max-width: 600px) { h1.calendar-title { font-size: 2.5rem; } .grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; } .cell { height: 70px; } }