/* --- THEME VARIABLES (LIGHT THEME) --- */
        :root {
            --bg-body: #f1f5f9; /* Light Gray/Off-White Background */
            --bg-card: #ffffff; /* White for Cards */
            --bg-nav: #ffffff;
            --text-primary: #0f172a; /* Dark Text */
            --text-secondary: #64748b; /* Muted Dark Text */
            --accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%); /* Purple/Pink Gradient (Kept) */
            --heading-gradient: linear-gradient(to right, #c084fc, #f472b6, #fb923c); /* Kept */
            --border-radius: 20px;
            --border-color: #e2e8f0; /* Light Border */
        }

        /* --- GLOBAL STYLES --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none; 
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        body {
            font-family: 'Segoe UI', 'Noto Sans Malayalam', 'Roboto', sans-serif;
            background: var(--bg-body);
            color: var(--text-primary);
            overflow-x: hidden;
            padding-top: 0; /* REMOVED FIXED HEADER PADDING */
            padding-bottom: 40px;
        }

        /* --- HEADER CONTAINER (Non-Fixed) --- */
        .header-container {
            width: 100%;
            z-index: 1000;
            background: var(--bg-body);
            border-bottom: 1px solid var(--border-color);
            /* Removed fixed positioning and related styles */
            box-shadow: 0 5px 15px -5px rgba(0,0,0,0.05); 
        }

        /* --- APP BAR --- */
        .app-bar {
            background: var(--bg-body); 
            color: var(--text-primary); 
            padding: 20px 20px 10px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        /* NEW: Main Title Row for "Electo App ഡ്യൂട്ടി ഗൈഡ് 2025" */
        .main-title-row {
            display: flex;
            align-items: baseline; /* Align by baseline for cleaner text alignment */
            justify-content: center;
            gap: 8px; 
            margin-bottom: 5px;
            white-space: nowrap; /* Keep content on one line */
            overflow: hidden;
        }

        /* Gradient Text Title (Matches 'Categories' style) */
        .app-bar h1 {
            font-size: 28px;
            font-weight: 900;
            letter-spacing: 0.5px;
            margin-bottom: 0; /* Ensure no extra space */
            background: var(--heading-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
            flex-shrink: 0; /* Prevent shrinking */
        }
        
        .guide-title {
            font-size: 22px; /* Adjusted size to fit well */
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .app-bar .subtitle {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
            font-weight: 500;
            line-height: 1.4;
            white-space: nowrap; /* Keep on one line */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* --- TOP NAVIGATION --- */
        .top-nav {
            background: var(--bg-nav);
            padding: 15px 0;
            border-bottom: 1px solid var(--border-color);
            /* Removed transition */
        }
        
        .top-nav-scroll-wrapper {
             display: grid;
             grid-template-columns: repeat(5, 1fr); 
             gap: 12px;
             padding: 0 15px;
             max-width: 800px;
             margin: 0 auto;
             /* Removed transition */
        }

        /* --- SCROLLED STATE (Removed all scrolled state logic) --- */
        /* body.scrolled .app-bar, body.scrolled .top-nav-scroll-wrapper, etc., are removed */


        /* --- NAV ITEMS --- */
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 5px;
            border: 1px solid var(--border-color);
            background: #f8fafc; /* Very light background for buttons */
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            border-radius: 16px;
            width: 100%;
            text-align: center;
            transition: transform 0.2s, background 0.2s;
        }

        .nav-icon {
            font-size: 22px;
            margin-bottom: 2px;
            filter: grayscale(100%); /* Muted icons by default */
            transition: filter 0.3s;
            color: var(--text-secondary); /* Ensure icon color is secondary text color */
        }

        /* Active Tab Style - Modern Gradient */
        .nav-item.active {
            background: var(--accent-gradient);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
            transform: translateY(-2px);
        }
        .nav-item.active .nav-icon {
            filter: grayscale(0%);
            color: white;
        }
        
        /* --- BUTTONS --- */
        .yt-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin: 15px 0;
            background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
            color: white;
            padding: 16px 20px;
            border-radius: 24px;
            text-decoration: none;
            font-weight: 700;
            font-size: 15px;
            box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .yt-icon { margin-right: 12px; fill: white; }

        .yt-corner-container {
            display: flex;
            justify-content: flex-end;
            margin-top: 5px;
            margin-bottom: 20px;
        }

        .yt-corner-btn {
            background: #fef2f2; /* Very Light Red */
            color: #b91c1c; /* Dark Red Text */
            border: 1px solid #fca5a5; /* Light Red Border */
            text-decoration: none;
            display: flex;
            align-items: center;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
        }
        .yt-corner-btn svg {
             fill: #b91c1c !important; /* Ensure icon is dark red */
        }

        /* --- CONTENT AREAS --- */
        .content {
            padding: 20px;
            max-width: 900px;
            margin: 0 auto;
            min-height: 60vh;
        }

        .tab-content { display: none; }
        .tab-content.active { display: block; animation: slideUp 0.4s ease-out; }

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

        /* --- DEV BADGE --- */
        .dev-badge-container {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 10px;
        }

        .dev-badge {
            background: var(--bg-card); /* White */
            color: var(--text-secondary);
            border-radius: 30px;
            padding: 6px 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1px solid var(--border-color);
        }

        .dev-info { text-align: right; font-size: 10px; line-height: 1.3; font-weight: 600; }
        .dev-avatar {
            width: 36px; height: 36px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: bold; font-size: 12px;
            border: 2px solid var(--bg-body);
        }
        .dev-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

        /* --- CARDS (Light Theme) --- */
        .card {
            background: var(--bg-card); /* White */
            border-radius: var(--border-radius);
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.05); /* Lighter shadow */
            border: 1px solid var(--border-color);
        }
        
        .card-title { 
            font-size: 18px; 
            font-weight: 700; 
            color: var(--text-primary); 
            margin-bottom: 15px; 
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Checklists */
        .checklist { list-style: none; padding: 0; }
        .checklist li {
            background: #f8fafc; /* Very light inner background */
            margin: 10px 0;
            padding: 12px 15px;
            border-radius: 12px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            border-left: 4px solid #3b82f6; /* Blue accent (Kept) */
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-secondary);
        }
        .checklist li::before { content: "✓"; color: #3b82f6; font-weight: bold; flex-shrink: 0; }
        
        /* Links in text */
        a { color: #2563eb; text-decoration: none; } /* Darker blue link */

        /* Alerts - Adapted for Light Mode */
        .alert-card { padding: 16px; border-radius: 16px; margin-bottom: 20px; border: 1px solid transparent; }
        
        .alert-card.important { 
            background: #fee2e2; /* Light Red */
            border-color: #fca5a5;
            color: #b91c1c; /* Darker Red Text */
        }
        .alert-card.info { 
            background: #dbeafe; /* Light Blue */
            border-color: #93c5fd;
            color: #1e40af; /* Darker Blue Text */
        }
        .alert-card.warning { 
            background: #fef3c7; /* Light Yellow */
            border-color: #fdba74;
            color: #92400e; /* Darker Orange Text */
        }
        
        .alert-title { font-weight: 700; margin-bottom: 8px; font-size: 15px; color: inherit !important; }
        .alert-body { font-size: 14px; line-height: 1.5; color: inherit; opacity: 0.9; }

        /* --- OFFICER ROLES (Adapted for Light Theme) --- */
        .officer-role-card {
            background: var(--bg-card); /* White */
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 16px;
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
        }
        /* Add a subtle glow behind roles (Kept) */
        .officer-role-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 4px; height: 100%;
        }
        #role-po-card::before { background: #ef4444; }
        #role-p1-card::before { background: #3b82f6; }
        #role-p2-card::before { background: #f59e0b; }
        #role-p3-card::before { background: #10b981; }

        .officer-role-card h3 { margin-bottom: 15px; font-size: 18px; margin-left: 10px; color: var(--text-primary); }
        .officer-role-card li { margin-bottom: 8px; font-size: 14px; color: var(--text-secondary); }
        #role-po-card h3 { color: #b91c1c; } /* Dark Red */
        #role-p1-card h3 { color: #1e40af; } /* Dark Blue */
        #role-p2-card h3 { color: #92400e; } /* Dark Orange */
        #role-p3-card h3 { color: #065f46; } /* Dark Green */

        /* --- GRIDS (Modern Tiles - Adapted for Light Theme) --- */
        .icon-grid, .simple-forms-grid, .flexible-grid { 
            display: grid; 
            gap: 16px; 
            margin-bottom: 20px; 
        }
        .icon-grid { grid-template-columns: repeat(2, 1fr); }
        .simple-forms-grid { grid-template-columns: repeat(3, 1fr); }
        .flexible-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
        
        /* New Grid for Filled Forms - 2 columns for better image preview */
         .filled-forms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }


        .grid-item, .form-btn-link {
            background: var(--bg-card); /* White */
            border: 1px solid var(--border-color);
            padding: 20px 10px;
            border-radius: 20px;
            text-align: center;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 130px;
            transition: transform 0.2s, background 0.2s;
            text-decoration: none;
            color: var(--text-primary);
        }

        .grid-item:active, .form-btn-link:active {
            transform: scale(0.96);
            background: #f1f5f9; /* Light Gray on press */
        }
        
        /* Make Icons Pop */
        .grid-icon, .form-btn-icon { 
            font-size: 40px; 
            margin-bottom: 12px; 
            display: inline-block;
            filter: none; /* Remove drop shadow */
        }
        
        .grid-label, .form-btn-link span { 
            font-size: 13px; 
            font-weight: 600; 
            color: var(--text-secondary); 
            line-height: 1.4;
        }

        .form-section-title {
            font-size: 13px;
            font-weight: 800;
            color: #8b5cf6; /* Purple accent (Kept) */
            margin: 30px 0 15px 0;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding-left: 5px;
            border-left: 3px solid #8b5cf6;
        }

        /* --- PACKETS (Adapted for Light Theme) --- */
        .packet-section { 
            background: var(--bg-card); /* White */
            border-radius: 20px; 
            margin-bottom: 20px; 
            overflow: hidden; 
            border: 1px solid var(--border-color);
        }
        .packet-header { 
            background: #f1f5f9; /* Light Grey Header */
            padding: 15px 20px; 
            font-size: 16px; 
            font-weight: 700; 
            display: flex; align-items: center; gap: 10px; 
            border-bottom: 1px solid var(--border-color);
            color: var(--text-primary); /* Dark Text */
        }
        .packet-content { padding: 20px; }
        .packet-list li { 
            border-bottom: 1px dashed #e2e8f0; /* Light dash separator */
            color: var(--text-secondary); 
            padding: 12px 0;
        }
        .packet-note { 
            background: #fffbe3; /* Light Yellow Note */
            color: #78350f; /* Dark Brown Text */
            border: 1px solid #fcd34d; 
            border-radius: 12px; 
            padding: 12px; 
            margin-top: 15px; 
            font-size: 13px; 
        }
        /* Packet 2 Specific Header Color - Light Theme adaptation (Darker text) */
        #packet-2 .packet-header {
             background: #fef3c7; /* Light Orange/Yellow */
             color: #9a3412;
             border-color: #fdbf74;
        }
        /* Packet 3 Specific Header Color - Light Theme adaptation (Darker text) */
        #packet-3 .packet-header {
             background: #dcfce7; /* Light Green */
             color: #065f46;
             border-color: #6ee7b7;
        }
        /* Packet 4 Specific Header Color - Light Theme adaptation (Darker text) */
         #packet-4 .packet-header {
             background: #fee2e2; /* Light Red */
             color: #991b1b;
             border-color: #fca5a5;
        }
        /* Packet 5 Specific Header Color - Light Theme adaptation (Darker text) */
        #packet-5 .packet-header {
             background: #ede9fe; /* Light Purple */
             color: #581c87;
             border-color: #c4b5fd;
        }
		.footer {
            text-align: center;
            margin-top: 40px;
            padding: 30px 20px;
            border-top: 3px solid transparent;
            border-image: linear-gradient(90deg, #667eea, #764ba2, #667eea);
            border-image-slice: 1;
            position: relative;
            z-index: 1;
        }
        
        .footer p {
            color: #666;
            font-size: 16px;
            margin: 0;
        }
        
        .footer strong {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-size: 20px;
        }
        /* --- MODAL (Adapted for Light Theme) --- */
        .modal-overlay { 
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0, 0, 0, 0.7); /* Darker backdrop for better contrast */
            backdrop-filter: blur(5px);
            display: none; align-items: center; justify-content: center; 
            z-index: 2000; opacity: 0; transition: opacity 0.3s ease; 
        }
        .modal-overlay.open { display: flex; opacity: 1; }
        .modal-container { 
            background: #ffffff; /* Light Modal */
            border-radius: 24px; width: 90%; max-width: 600px; max-height: 85vh; 
            overflow: hidden; 
            border: 1px solid #d1d5db;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25); 
            transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        }
        .modal-overlay.open .modal-container { transform: scale(1); }
        .modal-header { 
            background: #f8fafc; /* Very Light Header */
            color: var(--text-primary); padding: 18px 20px; 
            font-size: 18px; font-weight: 700; 
            display: flex; justify-content: space-between; align-items: center; 
            border-bottom: 1px solid var(--border-color);
        }
        .modal-close { background: none; border: none; color: #64748b; font-size: 28px; cursor: pointer; }
        .modal-body { padding: 20px; overflow-y: auto; max-height: calc(85vh - 65px); color: var(--text-secondary); }
        .modal-content-hidden { display: none; }
        
        /* New: Styling for image inside modal */
        .modal-image-container {
            padding: 0; /* Remove padding for full image bleed */
        }
        .modal-image-container img {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 0 0 24px 24px; /* Maintain container corner radius */
        }


        @media (min-width: 600px) {
             .icon-grid { grid-template-columns: repeat(3, 1fr); }
        }