:root {
        /* Facebook Blue Colors */
        --primary-color: #1877F2; 
        --primary-dark: #145dbf;
        /* Red Color for Button */
        --btn-red: #e74c3c;
        --btn-red-dark: #c0392b;
        
        --bg-body: #f0f2f5;
        --bg-white: #fff;
        --border-color: #ddd;
        --text-dark: #1c1e21;
        --text-light: #606770;
        --side-margin: 20px;
    }

    * { box-sizing: border-box; }

    body {
        font-family: 'Inter', sans-serif;
        margin: 0;
        padding: 0;
        background: var(--bg-body);
        color: var(--text-dark);
        line-height: 1.6;
    }

    /* --- Navigation --- */
    nav.main-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px var(--side-margin);
        background: var(--bg-white);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 100;
        height: 60px;
    }

    .logo { font-weight: 700; font-size: 1.2rem; color: var(--primary-color); }
    .nav-controls select, .nav-controls button {
        padding: 6px 10px;
        margin-left: 5px;
        border-radius: 6px;
        border: 1px solid #ccd0d5;
        font-size: 0.9rem;
    }
    .btn-go { background: var(--primary-color); color: #fff; border: none; cursor: pointer; font-weight: 600; }
    .btn-go:hover { background: var(--primary-dark); }

    /* --- Layout Container --- */
    .container {
        max-width: 1100px;
        margin: 15px auto;
        padding: 0 var(--side-margin);
    }

    /* --- Action Buttons --- */
    .action-bar {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 15px;
    }
    .btn-action {
        padding: 8px 16px;
        background: var(--btn-red); /* CHANGED: Red background */
        color: #fff;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
        font-size: 0.9rem;
    }
    .btn-action:hover { background: var(--btn-red-dark); }

    /* --- Calendar Widget --- */
    .calendar-card {
        background: var(--bg-white);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        margin-bottom: 40px;
    }

    .cal-header {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px;
        background: var(--primary-color);
        color: #fff;
        position: relative;
    }
    .cal-header h2 { margin: 0; font-size: 1.6rem; }
    
    .arrow-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255,255,255,0.2);
        border: none;
        color: #fff;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 18px;
        display: flex; 
        align-items: center; 
        justify-content: center;
        text-decoration: none;
        transition: background 0.2s;
    }
    .arrow-btn:hover { background: rgba(255,255,255,0.4); }
    .arrow-left { left: 15px; }
    .arrow-right { right: 15px; }

    .days-row {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        background: #f0f2f5;
        border-bottom: 1px solid var(--border-color);
    }
    .day-name {
        text-align: center;
        padding: 12px 0;
        font-weight: 700;
        border-right: 1px solid var(--border-color);
        font-size: 0.85rem;
        color: var(--text-light);
        text-transform: uppercase;
    }
    .day-name:last-child { border-right: none; }

    .grid-body {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }
    .grid-cell {
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        padding: 9px;
        /* CHANGED: Reduced height to 15px */
        min-height: 15px; 
        background: var(--bg-white);
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .grid-cell:nth-child(7n) { border-right: none; }

    .date-num { 
        font-weight: 600; 
        font-size: 1rem; 
        margin-bottom: 4px; 
        color: var(--text-dark);
    }

    .user-note {
        flex-grow: 1;
        font-size: 0.9rem;
        color: #1d2129;
        outline: none;
        white-space: pre-wrap;
    }

    /* --- Content Section --- */
    .content-section {
        background: #fff;
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        margin-bottom: 40px;
    }
    .content-section h1 { color: var(--primary-color); font-size: 2rem; margin-top: 0; }
    .content-section h2 { color: var(--text-dark); font-size: 1.5rem; margin-top: 30px; }
    .content-section h3 { font-size: 1.2rem; color: var(--text-dark); margin-top: 25px; }
    .content-section p { color: var(--text-light); margin-bottom: 15px; font-size: 1.05rem; }
    .content-section ul { list-style: none; padding: 0; }
    .content-section li { margin-bottom: 12px; color: var(--text-dark); font-size: 1.05rem; }
    .content-section li strong { color: var(--primary-color); }
    
    .checkmark { color: var(--primary-color); font-weight: bold; margin-right: 10px; }

    @media (max-width: 768px) {
        /* CHANGED: Updated mobile height to 15px as well */
        .grid-cell { min-height: 15px; padding: 4px; }
        .date-num { font-size: 0.8rem; }
        .container { padding: 0 15px; }
        .content-section { padding: 20px; }
        .arrow-btn { width: 30px; height: 30px; }
        .cal-header h2 { font-size: 1.3rem; }
    }
            /* --- New Styles for Pro Mode & Holidays --- */
        
        /* Pro Mode: Dark Red Header for Sunday */
        .day-name.pro-mode-header {
            color: #8b0000 !important; /* Dark Red */
            font-weight: 800;
        }

        /* Pro Mode: Light Transparent Red for Sunday Cells */
        .grid-cell.pro-mode-cell {
            background-color: rgba(255, 0, 0, 0.08) !important; /* Light transparent red */
            border-color: rgba(255, 0, 0, 0.2);
        }

        /* Holiday Mode: Background for Holiday Dates */
        .grid-cell.holiday-highlight {
            background-color: #e3f2fd !important; /* Light Blue for Holidays */
            position: relative;
        }
        
        /* Holiday Text styling */
        .holiday-name-tag {
            display: block;
            font-size: 0.65rem;
            color: #1565c0; /* Dark Blue text */
            margin-top: 4px;
            font-weight: 700;
            line-height: 1.1;
            text-align: center;
            background-color: rgba(255,255,255,0.7);
            border-radius: 4px;
            padding: 2px;
        }

        /* --- Action Bar & Button Styling --- */
        .action-bar {
            display: flex;
            align-items: center; /* Vertically align */
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }

        /* Spacer to push buttons to the right */
        .spacer {
            flex-grow: 1;
        }
        
        .btn-action {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            color: white;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: transform 0.1s;
        }

        .btn-action:active {
            transform: scale(0.98);
        }
        
        /* PDF Button (Orange/Default) */
        #btn-pdf {
            background-color: #ff9800;
        }

        /* Pro Mode (Red) */
        .btn-action.btn-pro {
            background-color: #d32f2f; 
        }
        
        /* Holiday Buttons (Blue) */
        .btn-action.btn-holiday {
            background-color: #1976d2; 
            font-size: 0.9rem; /* Larger font for Flags */
            padding: 8px 16px;
        }

        .spinner {
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
            margin-left: 5px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Ensure PDF captures background colors */
        @media print {
            .grid-cell.pro-mode-cell, .grid-cell.holiday-highlight {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
        /* Logo Link Styling */
        .logo a {
            text-decoration: none;
            color: inherit;
        }
        
         /* --- COPY OF CRITICAL STYLES FROM style.css --- */
        :root {
            --primary-color: #1877F2; 
            --primary-dark: #145dbf;
            --btn-red: #e74c3c;
            --btn-red-dark: #c0392b;
            --bg-body: #f0f2f5;
            --bg-white: #fff;
            --border-color: #ddd;
            --text-dark: #1c1e21;
            --text-light: #606770;
            --side-margin: 20px;
        }

        /* --- New Styles for Pro Mode & Holidays --- */
        .day-name.pro-mode-header { color: #8b0000 !important; font-weight: 800; }
        .grid-cell.pro-mode-cell { background-color: rgba(255, 0, 0, 0.08) !important; border-color: rgba(255, 0, 0, 0.2); }
        .grid-cell.holiday-highlight { background-color: #e3f2fd !important; position: relative; }
        .holiday-name-tag {
            display: block; font-size: 0.65rem; color: #1565c0; margin-top: 4px;
            font-weight: 700; line-height: 1.1; text-align: center;
            background-color: rgba(255,255,255,0.7); border-radius: 4px; padding: 2px;
        }

        /* --- Action Bar & Buttons --- */
        .action-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }
        .spacer { flex-grow: 1; }
        
        .btn-action {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: transform 0.1s;
        }
        .btn-action:active { transform: scale(0.98); }
        
        #btn-pdf { background-color: #ff9800; } /* Orange */
        .btn-action.btn-pro { background-color: #d32f2f; } /* Red */
        .btn-action.btn-holiday { background-color: #1976d2; } /* Blue */

        .spinner {
            display: inline-block; width: 12px; height: 12px;
            border: 2px solid rgba(255,255,255,0.3); border-radius: 50%;
            border-top-color: #fff; animation: spin 1s ease-in-out infinite; margin-left: 5px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        @media print {
            .grid-cell.pro-mode-cell, .grid-cell.holiday-highlight {
                -webkit-print-color-adjust: exact; print-color-adjust: exact;
            }
        }
        .logo a { text-decoration: none; color: inherit; }

        /* =========================================
           MOBILE FIXES (Max-width: 768px)
           ========================================= */
        @media (max-width: 768px) {
            /* 1. Navigation Tweaks */
            nav.main-nav {
                flex-direction: column;
                height: auto;
                padding: 10px;
                gap: 10px;
            }
            .nav-controls {
                width: 100%;
                display: flex;
                justify-content: center;
            }
            .nav-controls form {
                display: flex;
                width: 100%;
                gap: 5px;
            }
            .nav-controls select { flex: 1; } /* Selectors share width */

            /* 2. Action Bar Layout Fix */
            .action-bar {
                gap: 8px; /* Tighter gap */
            }
            
            /* Hide the spacer so buttons stack naturally */
            .action-bar .spacer { display: none; }

            /* Download PDF: Full Width, First */
            #btn-pdf {
                width: 100%;
                order: 1; /* Force to top */
                margin-bottom: 5px;
                padding: 12px; /* Easier to tap */
                font-size: 1rem;
            }

            /* Pro & Holiday Buttons: Share Row, Second */
            .btn-action.btn-pro, 
            .btn-action.btn-holiday {
                order: 2; /* Force to bottom row */
                flex: 1; /* Grow to fill space evenly */
                font-size: 0.8rem; /* Slightly smaller text to fit */
                padding: 10px 4px;
                white-space: nowrap; /* Prevent text wrapping */
                min-width: 80px; /* Prevent crushing */
            }

            /* 3. Grid Adjustments */
            .container { padding: 0 10px; }
            .cal-header h2 { font-size: 1.2rem; }
            .grid-cell { min-height: 50px; } /* Ensure cells have height */
        }
        
         /* UPDATED: Height set to 95px */
    .grid-cell {
        min-height: 95px !important; 
    }

    /* UPDATED: Removed bottom padding */
    .calendar-card {
        padding-bottom: 0 !important; 
    }

    /* RESTORED & FIXED: Content Section Styles */
    .content-section {
        background: #fff;
        padding: 30px; /* Aligns comfortably inside the container */
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        margin-top: 30px; /* Space between calendar and text */
        margin-bottom: 40px;
        border: 1px solid #ddd; /* Matches calendar border */
    }
    .content-section h1 { color: #1877F2; font-size: 2rem; margin-top: 0; }
    .content-section h2 { color: #1c1e21; font-size: 1.5rem; margin-top: 30px; }
    .content-section h3 { font-size: 1.2rem; color: #1c1e21; margin-top: 25px; }
    .content-section p { color: #606770; margin-bottom: 15px; font-size: 1.05rem; }
    .content-section ul { list-style: none; padding: 0; }
    .content-section li { margin-bottom: 12px; color: #1c1e21; font-size: 1.05rem; }
    .content-section li strong { color: #1877F2; }
    .checkmark { color: #1877F2; font-weight: bold; margin-right: 10px; }

    /* Footer Styles */
    .site-footer {
        background: #f0f2f5;
        border-top: 1px solid #ddd;
        padding: 20px 0;
        margin-top: 40px;
        text-align: center;
        font-size: 0.9rem;
        color: #606770;
    }
    .site-footer a {
        color: #1877F2;
        text-decoration: none;
        margin-left: 10px;
    }
    .site-footer a:hover {
        text-decoration: underline;
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
        .content-section { padding: 20px; }
    }