/* ===== 1. THEME & GLOBAL STYLES ===== */
        :root {
            /* Our Color Palette (Green, Black, Gray) */
            --color-primary: #10B981;     /* A modern, vibrant green (Tailwind Emerald 500) */
            --color-primary-dark: #059669; /* A darker green for hover */
            --color-bg: #121212;         /* Pure black (or very dark gray) background */
            --color-surface: #1e1e1e;     /* Dark gray for "cards" and surfaces */
            --color-border: #333333;     /* Muted gray for borders */
            --color-text-primary: #f5f5f5; /* Off-white for main text */
            --color-text-secondary: #a3a3a3;/* Lighter gray for secondary text */
            --color-danger: #ef4444;     /* A bright red for notifications */
            --color-gold: #FFD700;
            --color-silver: #C0C0C0;
            --color-bronze: #CD7F32;
            
            /* Font styles */
            --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            
            /* Sizing */
            --border-radius-sm: 5px;
            --border-radius-md: 8px;
            --bottom-nav-height: 60px;
        }

        /* Global reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Set base font size to 62.5% to make 1rem = 10px */
        html {
            font-size: 62.5%;
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-sans);
            background-color: var(--color-bg);
            color: var(--color-text-primary);
            font-size: 1.6rem; /* Default to 16px */
            line-height: 1.6;
            padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        }

        .container {
            width: 90%;
            max-width: 1080px;
            margin: 0 auto;
        }

        /* Re-usable "card" style */
        .card {
            background-color: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--border-radius-md);
            margin-bottom: 2.4rem;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
        }

        a {
            color: var(--color-primary);
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }

        img {
            max-width: 100%;
            display: block;
        }

        textarea, button, input {
            font-family: var(--font-sans);
            font-size: 1.6rem;
        }
        
        /* Utility class to hide elements */
        .hidden {
            display: none;
        }


        /* ===== 2. HEADER & NAVIGATION ===== */
        .main-header {
            background-color: var(--color-surface);
            border-bottom: 1px solid var(--color-border);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 5;
            backdrop-filter: blur(5px);
            transition: opacity 0.24s ease, transform 0.24s ease !important;
            opacity: 1;
            transform: translateY(0);
        }
        
        .main-header.hidden {
            opacity: 0;
            transform: translateY(-100%);
            pointer-events: none;
            transition: opacity 0.24s ease, transform 0.24s ease !important;
            display: block !important;
            visibility: visible !important;
        }

        .main-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            color: var(--color-primary);
            font-size: 2.2rem;
            font-weight: 700;
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 1.2rem;
        }
        
        .nav-link {
            color: var(--color-text-secondary);
            font-weight: 500;
            padding: 0.8rem;
            border-radius: var(--border-radius-sm);
            transition: all 0.2s ease;
        }
        .nav-link:hover {
            color: var(--color-text-primary);
            background-color: #2a2a2a;
            text-decoration: none;
        }
        .nav-link.active {
            color: var(--color-primary);
            font-weight: 600;
        }

        /* ===== 3. MAIN CONTENT & POSTS ===== */
        .main-content {
            padding: 2.4rem 0;
        }

        /* Create Post Box */
        .create-post-textarea {
            width: 100%;
            background-color: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--border-radius-sm);
            padding: 1.5rem;
            color: var(--color-text-primary);
            min-height: 80px;
            resize: vertical;
            border: none;
            display: block;
        }
        .create-post-textarea:focus {
            outline: none;
        }

        .create-post-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--color-border);
            display: flex; /* NEW */
            justify-content: space-between; /* NEW */
            align-items: center; /* NEW */
        }
        
        /* NEW: Image Upload Styles */
        .image-upload-btn {
            background: none;
            border: none;
            color: var(--color-text-secondary);
            cursor: pointer;
            padding: 0.8rem;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .image-upload-btn:hover {
            background-color: #2a2a2a;
            color: var(--color-primary);
        }
        .image-upload-btn svg {
            width: 2.2rem;
            height: 2.2rem;
            fill: currentColor;
        }
        .image-preview-container {
            position: relative;
            max-width: 150px;
            margin: 0 1rem 0 auto; /* Aligns to the left of the post button */
        }
        .image-preview {
            width: 100%;
            height: auto;
            border-radius: var(--border-radius-sm);
            border: 1px solid var(--color-border);
        }
        .remove-image-btn {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: var(--color-danger);
            color: white;
            border: 2px solid var(--color-bg);
            border-radius: 50%;
            width: 2.4rem;
            height: 2.4rem;
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .create-post-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* The Feed */
        .feed {
            margin-top: 2.4rem;
        }

        .post {
            /* .card styles are applied */
        }
        
        /* NEW: Post Image */
        .post-image {
            width: 100%;
            height: auto;
            max-height: 70vh;
            object-fit: contain;
            border-bottom: 1px solid var(--color-border);
            background: #000;
        }

        .post-header {
            padding: 1.2rem 1.6rem;
            display: flex;
            gap: 1.2rem;
            align-items: center;
            border-bottom: 1px solid var(--color-border);
            justify-content: space-between;
        }
        
        .post-header-actions {
            display: flex;
            gap: 0.8rem;
            align-items: center;
        }
        
        .post-edit-btn {
            background: none;
            border: none;
            color: var(--color-primary);
            cursor: pointer;
            font-size: 1.8rem;
            padding: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            opacity: 0.6;
        }
        .post-edit-btn:hover {
            opacity: 1;
            transform: scale(1.1);
        }
        
        .post-delete-btn {
            background: none;
            border: none;
            color: var(--color-danger);
            cursor: pointer;
            font-size: 2rem;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            opacity: 0.6;
        }
        .post-delete-btn:hover {
            opacity: 1;
            transform: scale(1.1);
        }
        
        .post-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            background-color: var(--color-primary);
        }

        /* AI Coach Avatar */
        .post-avatar.coach-avatar,
        .comment-avatar.coach-avatar {
            background-color: var(--color-primary-dark);
            border: 2px solid var(--color-primary);
            box-shadow: 0 0 10px 0px var(--color-primary);
        }

        .post-author {
            font-weight: 700;
            color: var(--color-text-primary);
            display: block;
            line-height: 1;
            /* NEW: For aligning badge */
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
        }
        
        /* ===== NEW: STREAK BADGE ON POST ===== */
        .author-badge {
            display: inline-block;
            width: 1.6rem;
            height: 1.6rem;
            border-radius: 50%;
            background-color: var(--color-text-secondary); /* Default for no badge */
            border: 1px solid var(--color-border);
            position: relative;
        }
        /* Tiers */
        .badge_7_day { background-color: var(--color-silver); }
        .badge_14_day { background-color: var(--color-primary); }
        .badge_21_day { background-color: var(--color-bronze); }
        .badge_28_day { background-color: var(--color-silver); }
        .badge_35_day { background-color: var(--color-gold); }
        .badge_42_day { background-color: #e5e5e5; }
        .badge_49_day { background-color: #b0c4de; }
        .badge_56_day { background: linear-gradient(135deg, #6a11cb, #2575fc); }
        .badge_90_day { background: linear-gradient(135deg, #ff00cc, #3333ff); }
        .badge_120_day { background: linear-gradient(135deg, #f7971e, #ffd200); }
        .badge_150_day { background: linear-gradient(135deg, #00c6ff, #0072ff); }
        .badge_180_day { background-color: #E5E4E2; border: 1px solid var(--color-gold); }
        .badge_210_day { background: linear-gradient(135deg, #11998e, #38ef7d); }
        .badge_240_day { background: linear-gradient(135deg, #eaafc8, #654ea3); }
        .badge_270_day { background: linear-gradient(135deg, #ff4e50, #f9d423); }
        .badge_300_day { background: linear-gradient(135deg, #232526, #414345); }
        .badge_330_day { background: linear-gradient(135deg, #8e2de2, #4a00e0); }
        .badge_365_day {
            background: linear-gradient(270deg, #ff0000, #ff7b00, #ffff00, #00ff00, #007bff, #a300ff);
            background-size: 200% 200%;
            animation: rainbow-bg 3s ease infinite;
        }
        
        /* Prestige Borders */
        .badge-prestige-1 { /* Year 2: Silver */
            border: 2px solid var(--color-silver);
            box-shadow: 0 0 4px var(--color-silver);
        }
        .badge-prestige-2 { /* Year 3: Gold */
            border: 2px solid var(--color-gold);
            box-shadow: 0 0 6px var(--color-gold);
        }
        .badge-prestige-3 { /* Year 4+: Rainbow */
            border: 2px solid transparent;
            background-clip: padding-box;
            border-image: linear-gradient(270deg, #ff0000, #00ff00, #007bff, #a300ff) 1;
            animation: rainbow-border 3s ease infinite;
        }
        
        @keyframes rainbow-bg {
            0%{background-position:0% 50%}
            50%{background-position:100% 50%}
            100%{background-position:0% 50%}
        }
        @keyframes rainbow-border {
            0%{border-image-source: linear-gradient(270deg, #ff0000, #00ff00, #007bff, #a300ff)}
            50%{border-image-source: linear-gradient(90deg, #ff0000, #00ff00, #007bff, #a300ff)}
            100%{border-image-source: linear-gradient(270deg, #ff0000, #00ff00, #007bff, #a300ff)}
        }
        

        .post-time {
            font-size: 1.3rem;
            color: var(--color-text-secondary);
            line-height: 1;
        }

        .post-body {
            padding: 1.6rem;
            font-size: 1.7rem;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .post-body p { margin-bottom: 1rem; }
        .post-body p:last-child { margin-bottom: 0; }

        .post-footer {
            padding: 0.8rem 1.6rem;
            border-top: 1px solid var(--color-border);
            background-color: #242424;
            display: flex;
            gap: 1.6rem;
        }

        .post-action {
            font-weight: 600;
            font-size: 1.4rem;
            color: var(--color-text-secondary);
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
        }
        .post-action:hover {
            color: var(--color-primary);
            text-decoration: none;
        }

        /* ===== 4. BUTTONS & CONTROLS ===== */
        .btn-primary {
            background-color: var(--color-primary);
            color: #ffffff;
            border: none;
            padding: 1rem 1.8rem;
            border-radius: var(--border-radius-sm);
            font-size: 1.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .btn-primary:hover {
            background-color: var(--color-primary-dark);
        }
        .btn-primary:disabled {
            background-color: #333;
            color: #777;
            cursor: not-allowed;
        }
        /* NEW: Button failure state */
        .btn-primary.btn-danger {
            background-color: var(--color-danger);
            color: white;
        }

        .btn-secondary {
            background-color: #333;
            color: var(--color-text-primary);
            padding: 0.8rem 1.2rem;
            border-radius: var(--border-radius-sm);
            font-weight: 500;
            transition: background-color 0.2s ease;
            border: none;
            cursor: pointer;
        }
        .btn-secondary:hover {
            background-color: #444;
            text-decoration: none;
        }

        /* ===== 5. MODAL STYLES ===== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            display: none;
            justify-content: center;
            align-items: flex-start;  
            z-index: 9999 !important;
            overflow-y: auto;
            padding-top: 5vh;
        }
        
        .modal-overlay[style*="display: flex"] {
            display: flex !important;
        }

        .modal-content {
            background-color: var(--color-surface);
            padding: 3rem;
            border-radius: var(--border-radius-md);
            border: 1px solid var(--color-border);
            width: 90%;
            max-width: 500px;
            margin-bottom: 10vh;
        }
        .modal-content.modal-content-lg {
            max-width: 700px; /* Wider modal for trophy case */
        }

        .modal-content h2 {
            color: var(--color-text-primary);
            margin-bottom: 1rem;
            text-align: center;
        }
        .modal-content h3 {
            color: var(--color-primary);
            font-size: 1.8rem;
            margin-top: 2rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--color-border);
            padding-bottom: 0.5rem;
        }
        .modal-content p {
            color: var(--color-text-secondary);
            text-align: center;
            margin-bottom: 2rem;
            font-size: 1.5rem;
        }

        .modal-input {
            width: 100%;
            background-color: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--border-radius-sm);
            padding: 1.2rem;
            font-family: var(--font-sans);
            color: var(--color-text-primary);
            font-size: 1.6rem;
            margin-bottom: 1.5rem;
        }
        .modal-input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 2px var(--color-primary);
        }

        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 2rem;
        }
        
        /* Activity panel */
        #notifications-panel .modal-content {
             padding: 1.5rem;
         }
        #notifications-panel h2 {
            font-size: 2.2rem;
            margin-bottom: 2rem;
        }
        #notifications-list {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 60vh;
            overflow-y: auto;
        }
        .notification-item {
            background-color: #2a2a2a;
            border-radius: var(--border-radius-sm);
            margin-bottom: 1rem;
            border: 1px solid var(--color-border);
        }
        .notification-item.unread {
            border-color: rgba(16, 185, 129, 0.28);
            box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08);
        }
        .notification-item a {
            display: block;
            padding: 1.2rem 1.6rem;
            text-decoration: none;
        }
        .notification-item a:hover {
            background-color: #333;
        }
        .notification-post-content {
            color: var(--color-text-primary);
            font-size: 1.5rem;
            display: block;
            margin-bottom: 0;
            line-height: 1.45;
        }
        .notification-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.8rem;
            flex-wrap: wrap;
            margin-bottom: 0.8rem;
        }
        .notification-type {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.35rem 0.8rem;
            border-radius: 999px;
            border: 1px solid var(--color-border);
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--color-text-secondary);
            background: rgba(255, 255, 255, 0.03);
        }
        .notification-type-reaction {
            color: var(--color-primary);
            border-color: rgba(16, 185, 129, 0.28);
            background: rgba(16, 185, 129, 0.1);
        }
        .notification-type-comment {
            color: #93c5fd;
            border-color: rgba(147, 197, 253, 0.28);
            background: rgba(59, 130, 246, 0.1);
        }
        .notification-time {
            font-size: 1.2rem;
            color: var(--color-text-secondary);
        }
        .notification-empty-state {
            list-style: none;
            padding: 1.6rem;
            text-align: center;
            color: var(--color-text-secondary);
            border: 1px dashed var(--color-border);
            border-radius: 1.2rem;
            background: rgba(255, 255, 255, 0.02);
        }
        .notification-error-state {
            color: var(--color-danger);
        }
        /* ===== 6. MULTIPLE REACTIONS & COMMENT STYLES ===== */
        .reactions-bar {
            display: flex;
            gap: 0.8rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .reaction-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.6rem 1rem;
            border-radius: 20px;
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--color-text-secondary);
            background: transparent;
            border: 1px solid var(--color-border);
            transition: all 0.2s ease;
            cursor: pointer;
            text-decoration: none;
            min-height: 3.8rem;
        }

        .reaction-btn:hover {
            background: #2a2a2a;
            border-color: var(--color-primary);
            transform: scale(1.05);
            text-decoration: none;
        }

        .reaction-btn.active {
            border-color: var(--color-primary);
            background: rgba(16, 185, 129, 0.1);
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
        }

        .reaction-emoji {
            font-size: 1.6rem;
            line-height: 1;
        }

        .reaction-count {
            font-size: 1.3rem;
        }

        /* Color variants for different reactions */
        .reaction-btn[data-reaction="fistbump"].active {
            border-color: #10B981;
            background: rgba(16, 185, 129, 0.15);
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
        }
        .reaction-btn[data-reaction="fire"].active {
            border-color: #FB923C;
            background: rgba(251, 146, 60, 0.15);
            box-shadow: 0 0 10px rgba(251, 146, 60, 0.3);
        }
        .reaction-btn[data-reaction="flex"].active {
            border-color: #A855F7;
            background: rgba(168, 85, 247, 0.15);
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
        }
        .reaction-btn[data-reaction="high5"].active {
            border-color: #06B6D4;
            background: rgba(6, 182, 212, 0.15);
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
        }
        .reaction-btn[data-reaction="heart"].active {
            border-color: #EC4899;
            background: rgba(236, 72, 153, 0.15);
            box-shadow: 0 0 10px rgba(236, 72, 153, 0.3);
        }

        .post-footer-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1.2rem;
            flex-wrap: wrap;
            margin-bottom: 1.2rem;
        }

        .post-encouragement-panel {
            border: 1px solid rgba(16, 185, 129, 0.18);
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(17, 24, 39, 0.65));
            padding: 1.2rem;
        }

        .post-encouragement-header,
        .post-reactions-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1.2rem;
            flex-wrap: wrap;
        }

        .post-encouragement-title {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--color-primary);
        }

        .post-encouragement-total,
        .post-encouragement-count {
            font-size: 1.2rem;
            color: var(--color-text-secondary);
            font-weight: 600;
            white-space: nowrap;
        }

        .post-encouragement-summary {
            margin: 0.8rem 0 1.2rem;
            color: var(--color-text-secondary);
            font-size: 1.3rem;
        }

        /* Positivity reminder */
        .positivity-reminder {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(168, 85, 247, 0.1));
            border: 1px solid var(--color-border);
            border-radius: var(--border-radius-md);
            padding: 1.2rem 1.6rem;
            margin-bottom: 2.4rem;
            text-align: center;
            font-size: 1.5rem;
            color: var(--color-text-secondary);
        }
        .positivity-reminder span {
            color: var(--color-primary);
            font-weight: 600;
        }

        .comment-section {
            padding: 0 1.6rem 1.6rem 1.6rem;
            border-top: 1px solid var(--color-border);
            display: none;  
        }

        .comment-list {
            margin-bottom: 1.6rem;
            max-height: 300px;
            overflow-y: auto;
        }

        .comment-item {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.2rem;
            font-size: 1.4rem;
        }
        .comment-item:last-child {
            margin-bottom: 0;
        }

        .comment-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--color-primary);
            flex-shrink: 0;
        }
        
        .comment-content {
            background-color: #2a2a2a;
            padding: 0.8rem 1.2rem;
            border-radius: var(--border-radius-md);
            width: 100%;
        }
        
        /* AI Coach Comment Style */
        .comment-item.coach-comment .comment-content {
            background-color: #1e1e1e;
            border: 1px solid var(--color-primary-dark);
            box-shadow: 0 0 8px 0px rgba(16, 185, 129, 0.3);
        }
        .comment-item.coach-comment .comment-author {
            color: var(--color-primary);
        }

        .comment-author {
            font-weight: 600;
            color: var(--color-text-primary);
            font-size: 1.3rem;
        }

        .comment-text {
            color: var(--color-text-primary);
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        .comment-time {
            font-size: 1.2rem;
            color: var(--color-text-secondary);
            margin-left: 0.5rem;
        }

        .comment-create {
            display: flex;
            gap: 0.8rem;
        }

        .comment-input {
            flex-grow: 1;
            background-color: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--border-radius-sm);
            padding: 0.8rem 1.2rem;
            color: var(--color-text-primary);
            font-size: 1.4rem;
        }
        .comment-input:focus {
            outline: none;
            border-color: var(--color-primary);
        }

        .comment-submit-btn {
            background-color: var(--color-primary);
            color: white;
            border: none;
            border-radius: var(--border-radius-sm);
            padding: 0 1.5rem;
            cursor: pointer;
            font-weight: 500;
            font-size: 1.4rem;
            min-height: 4rem;
        }
        .comment-submit-btn:hover {
            background-color: var(--color-primary-dark);
        }

        /* ===== 7. BOTTOM NAVIGATION ===== */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
            background-color: var(--color-surface);
            border-top: 1px solid var(--color-border);
            display: flex;
            justify-content: space-around;
            z-index: 40;
            transition: opacity 0.24s ease, transform 0.24s ease;
            opacity: 1;
            transform: translateY(0);
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        
        .bottom-nav.hidden {
            opacity: 0;
            transform: translateY(100%);
            pointer-events: none;
            transition: opacity 0.24s ease, transform 0.24s ease;
            display: flex !important;
            visibility: visible !important;
        }
        .bottom-nav-btn {
            background: none;
            border: none;
            color: var(--color-text-secondary);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-family: var(--font-sans);
            padding: 0.5rem 1rem;
            cursor: pointer;
            border-radius: var(--border-radius-sm);
            transition: all 0.2s ease;
            position: relative;  
            flex: 1;
            height: 100%;
            min-width: 0;
        }
        .bottom-nav-btn svg {
            width: 2.4rem;
            height: 2.4rem;
            fill: currentColor;
            margin-bottom: 0.2rem;
        }
        .bottom-nav-btn span {
            text-align: center;
            line-height: 1.1;
        }
        .bottom-nav-btn:hover {
            color: var(--color-text-primary);
            background-color: #2a2a2a;
        }
        .bottom-nav-btn.active {
            color: var(--color-primary);
        }
        
        /* Notification Badge */
        .notification-badge {
            position: absolute;
            top: 5px;
            right: calc(50% - 25px);
            background-color: var(--color-danger);
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50%;
            width: 1.8rem;
            height: 1.8rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid var(--color-surface);
            display: none;
        }
        
        
        /* ===== 8. CHECKLIST STYLES ===== */
        #checklist-container {
            /* Hidden by default, shown by JS */
        }
        
        .checklist-header-card {
            padding: 1.4rem;
            text-align: center;
        }
        
        .checklist-header-card h2 {
            color: var(--color-text-primary);
            font-size: 2.4rem;
            margin-bottom: 0.5rem;
        }
        
        .checklist-header-card p {
            color: var(--color-text-secondary);
            font-size: 1.5rem;
            margin-bottom: 1.2rem;
        }
        
        .checklist-progress-overview {
            display: grid;
            gap: 1.2rem;
        }

        .checklist-progress-summary-row {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: space-between;
            gap: 0.8rem 1.2rem;
        }

        .checklist-progress-summary {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-text-primary);
        }

        .checklist-progress-caption {
            font-size: 1.2rem;
            color: var(--color-text-secondary);
        }

        .checklist-pillars-progress {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 0.9rem;
        }

        .checklist-pillars-progress-loading {
            margin: 0;
            color: var(--color-text-secondary);
            font-size: 1.3rem;
            text-align: left;
        }

        .checklist-pillar-chip {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 1rem 1.1rem;
            border-radius: 1.2rem;
            border: 1px solid var(--color-border);
            background: rgba(255, 255, 255, 0.03);
            min-height: 5.6rem;
        }

        .checklist-pillar-chip.complete {
            border-color: rgba(16, 185, 129, 0.35);
            background: rgba(16, 185, 129, 0.12);
        }

        .checklist-pillar-chip-icon {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.04);
            position: relative;
        }

        .checklist-pillar-chip.complete .checklist-pillar-chip-icon {
            border-color: rgba(16, 185, 129, 0.35);
            background: linear-gradient(135deg, #34d399, #10b981);
        }

        .checklist-pillar-chip.complete .checklist-pillar-chip-icon::before {
            content: "";
            width: 0.55rem;
            height: 0.95rem;
            border-right: 2px solid #062f24;
            border-bottom: 2px solid #062f24;
            transform: translateY(-0.08rem) rotate(45deg);
        }

        .checklist-pillar-chip-copy {
            min-width: 0;
            display: grid;
            gap: 0.2rem;
        }

        .checklist-pillar-chip-copy strong {
            font-size: 1.3rem;
            color: var(--color-text-primary);
            line-height: 1.2;
        }

        .checklist-pillar-chip-copy span {
            font-size: 1.15rem;
            color: var(--color-text-secondary);
        }
        
        .checklist-category-card {
            /* Uses .card style */
        }
        
        .checklist-category-header {
            padding: 1.2rem 1.6rem;
            border-bottom: 1px solid var(--color-border);
        }
        
        .checklist-category-header h3 {
            color: var(--color-text-primary);
            font-size: 2rem;
        }
        
        .task-list {
            list-style: none;
            padding: 1.6rem;
        }
        
        .task-list-item {
            display: grid;
            grid-template-columns: 2.2rem minmax(0, 1fr);
            align-items: flex-start; /* Align to top for multi-line */
            font-size: 1.7rem;
            padding: 0.8rem 0;
            border-bottom: 1px solid var(--color-border);
            column-gap: 1.2rem;
        }
        .task-list-item:last-child {
            border-bottom: none;
        }
        
        .task-list-item input[type="checkbox"] {
            /* Use a custom checkbox style */
            appearance: none;
            width: 2.2rem;
            height: 2.2rem;
            border: 2px solid var(--color-border);
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.2s ease;
            margin-top: 0.1rem; /* Align with text */
        }

        .task-list-content {
            min-width: 0;
            display: grid;
            gap: 0.8rem;
        }
        
        .task-list-item input[type="checkbox"]:hover {
            border-color: var(--color-primary);
        }
        
        .task-list-item input[type="checkbox"]:checked {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            background-size: 1.6rem;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        .task-list-item label {
            display: block;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .task-list-item input[type="checkbox"]:checked + .task-list-content label {
            color: var(--color-text-secondary);
            text-decoration: line-through;
        }
        
        .custom-task-input-group {
            width: 100%;
            display: flex;
            gap: 0.8rem;
        }
        
        .custom-task-input {
            flex-grow: 1;
            background-color: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--border-radius-sm);
            padding: 0.8rem 1.2rem;
            color: var(--color-text-primary);
            font-size: 1.4rem;
        }
        .custom-task-input:focus {
            outline: none;
            border-color: var(--color-primary);
        }
        
        .custom-task-save-btn {
            background-color: var(--color-primary);
            color: white;
            border: none;
            border-radius: var(--border-radius-sm);
            padding: 0 1.5rem;
            cursor: pointer;
            font-weight: 500;
            font-size: 1.4rem;
        }
        .custom-task-save-btn:hover {
            background-color: var(--color-primary-dark);
        }
        
        
        /* ===== 9. TROPHY CASE & REWARD STYLES ===== */
        
        .trophy-case-stats {
            display: flex;
            justify-content: space-around;
            text-align: center;
            background-color: var(--color-bg);
            padding: 2rem;
            border-radius: var(--border-radius-md);
            margin-bottom: 2rem;
        }
        
        .trophy-case-stats div {
            flex: 1;
        }
        
        .trophy-case-stats .stat-value {
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--color-primary);
            line-height: 1.2;
        }
        
        .trophy-case-stats .stat-label {
            font-size: 1.4rem;
            color: var(--color-text-secondary);
        }
        
        .badge-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 1.6rem;
        }
        
        .badge-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .badge-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--color-border); /* Default locked color */
            border: 2px solid var(--color-border);
            margin-bottom: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.4rem;
            color: var(--color-text-secondary);
            position: relative;
        }
        
        .badge-icon.unlocked {
            color: white;
            /* JS will add specific background/gradient classes */
        }
        
        .badge-item .badge-name {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--color-text-secondary); /* Default locked color */
        }
        
        .badge-item .badge-icon.unlocked + .badge-name {
            color: var(--color-text-primary);
        }
        
        .badge-item .badge-description {
            font-size: 1.2rem;
            color: var(--color-text-secondary);
        }

        /* Daily Reward Modal */
        #daily-reward-modal {
            background-color: transparent;
            backdrop-filter: blur(2px);
            align-items: center;
            justify-content: center;
            padding-top: 0;
            /* Short-lived modal, clicks go through */
            pointer-events: none;  
        }

        #daily-reward-modal .modal-content {
            background-color: rgba(30, 30, 30, 0.95);
            text-align: center;
            border: 2px solid var(--color-primary);
            box-shadow: 0 0 20px 0px var(--color-primary);
            animation: reward-fade-in-out 3s ease-in-out forwards;
        }

        #daily-reward-modal .reward-icon {
            font-size: 6rem;
            line-height: 1;
            margin-bottom: 1rem;
        }
        
        #daily-reward-modal h2 {
            color: var(--color-primary);
            font-size: 2.8rem;
        }
        
        #daily-reward-modal p {
            font-size: 1.8rem;
            color: var(--color-text-primary);
            margin-bottom: 0;
        }
        
        @keyframes reward-fade-in-out {
            0% { opacity: 0; transform: scale(0.8); }
            15% { opacity: 1; transform: scale(1.05); }
            85% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0.8); }
        }
        
        /* ===== 10. NEW: MEMBERS PAGE ===== */
        #members-section {
            /* Uses .card style */
        }
        
        .members-list {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 70vh;
            overflow-y: auto;
        }
        
        .member-item {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            padding: 1.2rem 1.6rem;
            border-bottom: 1px solid var(--color-border);
        }
        .member-item:last-child {
            border-bottom: none;
        }
        
        .member-item .post-avatar {
            flex-shrink: 0;
        }
        
        .member-info {
            flex-grow: 1;
            overflow: hidden; /* For text-overflow */
        }
        
        .member-name {
            font-weight: 700;
            font-size: 1.7rem;
            color: var(--color-text-primary);
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
        }
        
        .member-last-post {
            font-size: 1.4rem;
            color: var(--color-text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .member-streak {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--color-primary);
            flex-shrink: 0;
        }
        
        .member-follow-btn {
            padding: 0.6rem 1.2rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            font-size: 1.3rem;
            flex-shrink: 0;
            transition: all 0.2s;
        }
        
        .member-follow-btn.follow {
            background-color: var(--color-primary);
            color: white;
        }
        
        .member-follow-btn.follow:hover {
            background-color: var(--color-primary-dark);
        }
        
        .member-follow-btn.unfollow {
            background-color: #3a3a3a;
            color: var(--color-text-primary);
            border: 1px solid var(--color-border);
        }
        
        .member-follow-btn.unfollow:hover {
            background-color: #444;
        }
        
        .section-eyebrow {
            text-transform: uppercase;
            letter-spacing: 0.16em;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: 0.8rem;
        }

        .section-card-header {
            padding: 1.8rem 1.8rem 0;
        }

        .section-card-header h2,
        .section-card-header h3 {
            margin: 0;
            color: var(--color-text-primary);
            font-size: 2.2rem;
        }

        .section-card-header p,
        .leaderboard-summary {
            color: var(--color-text-secondary);
            font-size: 1.4rem;
            margin-top: 0.8rem;
        }

        .home-overview-grid {
            display: grid;
            gap: 1.6rem;
            margin-bottom: 2.4rem;
        }

        .home-hero-card,
        .home-action-card,
        .profile-hero-card {
            padding: 2.2rem;
            background:
                radial-gradient(circle at top right, rgba(16, 185, 129, 0.15), transparent 42%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
        }

        .home-hero-card h2,
        .profile-hero-card h2 {
            font-size: 3rem;
            line-height: 1.15;
            margin-bottom: 1.2rem;
        }

        .home-hero-card p,
        .profile-hero-card p,
        .home-action-card p {
            color: var(--color-text-secondary);
            font-size: 1.5rem;
            margin: 0;
        }

        .home-hero-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8rem;
            margin-top: 1.6rem;
        }

        .home-hero-pills span,
        .checklist-stat-chip {
            border: 1px solid rgba(16, 185, 129, 0.25);
            background: rgba(16, 185, 129, 0.08);
            color: var(--color-text-primary);
            border-radius: 999px;
            padding: 0.8rem 1.2rem;
            font-size: 1.3rem;
            font-weight: 600;
        }

        .home-action-card h3 {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .home-action-list {
            list-style: none;
            display: grid;
            gap: 1rem;
            margin-top: 1.2rem;
        }

        .home-action-list li {
            padding: 1rem 1.2rem;
            border-radius: 1.2rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--color-border);
            color: var(--color-text-primary);
            font-size: 1.45rem;
        }

        .create-post {
            border-color: rgba(16, 185, 129, 0.22);
        }

        .create-post-textarea {
            min-height: 120px;
            font-size: 1.65rem;
            line-height: 1.6;
        }

        .feed {
            display: grid;
            gap: 1.8rem;
        }

        .post {
            border-color: rgba(255, 255, 255, 0.06);
        }

        .post-header {
            padding: 1.4rem 1.8rem;
        }

        .post-body {
            padding: 1.8rem;
            font-size: 1.65rem;
            line-height: 1.65;
        }

        .post-footer {
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .post-action {
            padding: 0.6rem 0;
        }

        .checklist-header-card,
        .section-shell-card {
            padding: 2rem;
        }

        .checklist-header-card {
            text-align: left;
            background:
                linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.04)),
                var(--color-surface);
        }

        .checklist-header-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1.4rem;
        }

        .checklist-stat-chip {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.2rem;
            border-radius: 1.2rem;
            min-width: 140px;
        }

        .checklist-stat-label {
            color: var(--color-text-secondary);
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .checklist-guidance-card,
        .checklist-action-card {
            padding: 1.4rem 1.6rem;
        }

        .guidance-grid {
            display: grid;
            gap: 1.2rem;
        }

        .guidance-item {
            display: flex;
            gap: 1rem;
            padding: 1.2rem 1.4rem;
            border-radius: 1.2rem;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid var(--color-border);
        }

        .guidance-icon {
            font-size: 2rem;
            line-height: 1;
            flex-shrink: 0;
        }

        .guidance-item strong {
            display: block;
            font-size: 1.45rem;
            margin-bottom: 0.4rem;
        }

        .guidance-item p,
        .checklist-action-card p {
            color: var(--color-text-secondary);
            font-size: 1.35rem;
            margin: 0;
        }

        .checklist-grid {
            display: grid;
            gap: 1.6rem;
        }

        .checklist-category-card {
            margin-bottom: 0;
            overflow: visible;
        }

        .checklist-category-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1.2rem;
            padding: 1.4rem 1.6rem 1.2rem;
        }

        .checklist-category-copy {
            min-width: 0;
            flex: 1;
            display: grid;
            gap: 0.5rem;
        }

        .checklist-category-title-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.8rem;
        }

        .checklist-category-header h3 {
            margin: 0;
        }

        .checklist-category-subtitle {
            color: var(--color-text-secondary);
            font-size: 1.35rem;
            margin: 0;
        }

        .checklist-category-meta {
            margin: 0;
            font-size: 1.2rem;
            color: var(--color-text-secondary);
        }

        .checklist-category-status {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.45rem 0.9rem;
            border-radius: 999px;
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            border: 1px solid var(--color-border);
            background: rgba(255, 255, 255, 0.03);
            color: var(--color-text-secondary);
        }

        .checklist-category-status::before {
            content: "";
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 999px;
            background: currentColor;
            opacity: 0.55;
        }

        .checklist-category-status.complete {
            border-color: rgba(16, 185, 129, 0.35);
            background: rgba(16, 185, 129, 0.12);
            color: var(--color-primary);
        }

        .task-list {
            padding: 0 1.4rem 1.4rem;
        }

        .task-list-item {
            gap: 0.8rem;
            padding: 1rem 0;
            font-size: 1.5rem;
        }

        .task-list-item label {
            line-height: 1.45;
        }

        .leaderboard-tabs {
            display: flex;
            gap: 0.8rem;
            overflow-x: auto;
            padding-bottom: 0.4rem;
            margin-bottom: 1rem;
        }

        .leaderboard-tab-btn {
            padding: 0.9rem 1.2rem;
            border: 1px solid var(--color-border);
            background: transparent;
            color: var(--color-text-secondary);
            cursor: pointer;
            font-weight: 600;
            border-radius: 999px;
            white-space: nowrap;
            transition: all 0.2s ease;
        }

        .leaderboard-tab-btn.active,
        .leaderboard-tab-btn:hover {
            background: rgba(16, 185, 129, 0.12);
            color: var(--color-primary);
            border-color: rgba(16, 185, 129, 0.35);
        }

        .leaderboard-list {
            max-height: none;
        }

        .activity-feed {
            display: grid;
            gap: 1rem;
        }

        .activity-item {
            padding: 1.2rem 1.4rem;
            background: #252525;
            border-radius: 1.2rem;
            border: 1px solid var(--color-border);
            cursor: pointer;
            transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
        }

        .activity-item:hover {
            transform: translateY(-2px);
            background: #2d2d2d;
            border-color: rgba(16, 185, 129, 0.24);
        }

        .member-item {
            gap: 1.4rem;
            padding: 1.4rem 0;
        }

        .member-item + .member-item {
            border-top: 1px solid var(--color-border);
        }

        .member-item:last-child {
            border-bottom: none;
        }

        .member-last-post {
            white-space: normal;
        }

        .profile-hero-card {
            margin: 2rem;
            border-radius: 1.8rem;
            border: 1px solid rgba(16, 185, 129, 0.2);
        }

        .profile-shell {
            padding-bottom: 2rem;
        }

        .profile-values-grid,
        .profile-dashboard-grid,
        .profile-overview-grid,
        .impact-metrics-grid {
            display: grid;
            gap: 1.2rem;
        }

        .profile-value-card,
        .profile-streak-card,
        .profile-impact-card,
        .profile-panel {
            background: #252525;
            border: 1px solid var(--color-border);
            border-radius: 1.6rem;
            padding: 1.6rem;
        }

        .profile-value-card {
            display: grid;
            gap: 0.5rem;
        }

        .profile-value-card strong {
            color: var(--color-primary);
            font-size: 1.4rem;
        }

        .profile-value-card span {
            color: var(--color-text-secondary);
            font-size: 1.25rem;
            line-height: 1.45;
        }

        .profile-overview-grid {
            margin: 0 2rem 2rem;
        }

        .profile-streak-card {
            margin: 0 2rem 1.6rem !important;
        }

        .profile-shell > h2 {
            margin: 0 2rem 1.6rem !important;
            color: var(--color-text-primary);
            font-size: 2.2rem;
        }

        .profile-streak-card h3,
        .profile-impact-card h3,
        .profile-panel h3 {
            margin: 0;
            font-size: 2rem;
            color: var(--color-text-primary);
        }

        .profile-streak-value {
            font-size: 4rem;
            font-weight: 700;
            color: var(--color-primary);
            margin: 1rem 0;
        }

        .profile-card-copy {
            color: var(--color-text-secondary);
            font-size: 1.35rem;
            margin: 0;
        }

        .profile-dashboard-grid {
            margin: 0 2rem 2.4rem;
        }

        .profile-dashboard-section {
            margin: 0 2rem 2.4rem !important;
        }

        .profile-panel-header {
            margin-bottom: 1.2rem;
        }

        .profile-section-heading {
            margin: 0 2rem 1.6rem;
        }

        .profile-section-heading h2 {
            margin: 0;
            font-size: 2.2rem;
            color: var(--color-text-primary);
        }

        .profile-inline-form {
            display: flex;
            align-items: flex-end;
            gap: 1rem;
        }

        .profile-field {
            min-width: 0;
        }

        .profile-field label,
        .profile-preview-label {
            display: block;
            margin-bottom: 0.6rem;
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--color-text-primary);
        }

        .profile-helper {
            margin-top: 0.6rem;
            font-size: 1.2rem;
            color: var(--color-text-secondary);
        }

        .profile-input,
        .profile-textarea {
            width: 100%;
            padding: 1rem 1.2rem !important;
            background: #1c1c1c !important;
            border: 1px solid #404040 !important;
            border-radius: 1.2rem !important;
            color: var(--color-text-primary) !important;
            font-size: 1.4rem !important;
            font-family: inherit;
        }

        .profile-textarea {
            min-height: 12rem;
            resize: vertical;
        }

        .profile-input:focus,
        .profile-textarea:focus {
            outline: none;
            border-color: rgba(16, 185, 129, 0.5) !important;
        }

        .profile-inline-action {
            white-space: nowrap;
        }

        .profile-primary-action {
            width: 100%;
        }

        .profile-photo-row {
            display: flex;
            align-items: center;
            gap: 1.6rem;
        }

        .profile-photo-preview,
        .profile-photo-placeholder {
            width: 9.2rem !important;
            height: 9.2rem !important;
            border-radius: 50% !important;
            flex-shrink: 0;
        }

        .profile-photo-placeholder {
            background: #333 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #666 !important;
            font-size: 3rem !important;
        }

        .profile-photo-actions {
            min-width: 0;
            display: grid;
            gap: 0.8rem;
        }

        .profile-style-grid {
            display: grid;
            gap: 1.4rem;
        }

        .profile-color-row {
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .profile-color-input {
            width: 5.2rem !important;
            min-width: 5.2rem;
            height: 4.2rem !important;
            border: none;
            border-radius: 1rem !important;
            background: transparent;
            cursor: pointer;
        }

        .profile-preview-block {
            margin-top: 1.8rem !important;
        }

        .profile-post-preview {
            margin: 0;
            border-radius: 1.4rem !important;
            overflow: hidden;
        }

        .profile-preview-avatar {
            background: #444 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #888 !important;
        }

        .profile-bookmarks {
            display: grid;
            gap: 1rem;
        }

        .profile-empty-state {
            text-align: center;
            padding: 1.6rem !important;
        }

        .profile-actions-row {
            display: flex;
            gap: 1rem;
            margin: 0 2rem;
        }

        .profile-danger-btn {
            background: #dc2626 !important;
            color: #fff !important;
        }

        .profile-badge-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 1rem;
        }

        .profile-badge-card,
        .recognition-card,
        .impact-metric-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--color-border);
            border-radius: 1.2rem;
            padding: 1.2rem;
        }

        .profile-badge-card strong,
        .recognition-card strong,
        .impact-metric-card strong {
            display: block;
            color: var(--color-text-primary);
            margin-bottom: 0.4rem;
        }

        .profile-badge-card span,
        .recognition-card span,
        .impact-metric-card span {
            color: var(--color-text-secondary);
            font-size: 1.3rem;
        }

        .impact-metric-value {
            font-size: 2.4rem;
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: 0.4rem;
        }

        .recognition-pathways {
            display: grid;
            gap: 1rem;
        }

        .recognition-card.unlocked {
            border-color: rgba(16, 185, 129, 0.35);
            background: rgba(16, 185, 129, 0.08);
        }

        .recognition-progress {
            margin-top: 0.8rem;
            height: 0.8rem;
            border-radius: 999px;
            background: #1a1a1a;
            overflow: hidden;
        }

        .recognition-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--color-primary), #34d399);
            border-radius: inherit;
        }

        @media (min-width: 700px) {
            .home-overview-grid,
            .profile-overview-grid,
            .profile-dashboard-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .guidance-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .teammates-layout {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
                gap: 1.6rem;
                margin-bottom: 2rem;
            }
        }

        @media (min-width: 860px) {
            .checklist-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .guidance-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (min-width: 1100px) {
            .checklist-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 699px) {
            .container {
                width: 94%;
            }

            .main-content {
                padding: 1.2rem 0;
            }

            .home-hero-card h2,
            .profile-hero-card h2 {
                font-size: 2.4rem;
            }

            .main-header {
                padding: 0.8rem 0;
            }

            .card {
                margin-bottom: 1.6rem;
                border-radius: 1.4rem;
            }

            .section-card-header {
                padding: 1.6rem 1.6rem 0;
            }

            .checklist-header-card,
            .section-shell-card,
            .checklist-guidance-card,
            .checklist-action-card,
            .home-hero-card,
            .home-action-card {
                padding: 1.6rem;
            }

            .checklist-progress-summary-row {
                align-items: flex-start;
                flex-direction: column;
            }

            .create-post-footer {
                flex-direction: column;
                align-items: stretch;
                gap: 1rem;
            }

            .create-post-actions {
                justify-content: space-between;
            }

            .post-header {
                padding: 1.2rem 1.4rem;
                align-items: flex-start;
            }

            .post-body {
                padding: 1.4rem;
                font-size: 1.55rem;
                line-height: 1.55;
            }

            .post-footer,
            .comment-section {
                padding-left: 1.4rem;
                padding-right: 1.4rem;
            }

            .post-encouragement-header,
            .post-reactions-row,
            .post-footer-actions {
                align-items: stretch;
            }

            .reaction-btn {
                padding: 0.65rem 0.9rem;
            }

            .comment-create {
                flex-direction: column;
            }

            .comment-submit-btn {
                width: 100%;
                min-height: 4.2rem;
            }

            .bottom-nav {
                justify-content: flex-start;
                overflow-x: auto;
                gap: 0.2rem;
                padding-left: 0.4rem;
                padding-right: 0.4rem;
            }

            .bottom-nav-btn {
                flex: 0 0 7rem;
                height: 100%;
                padding: 0.5rem 0.4rem;
            }

            .bottom-nav-btn svg {
                width: 2rem;
                height: 2rem;
            }

            .bottom-nav-btn span {
                font-size: 1rem;
            }

            .profile-hero-card,
            .profile-overview-grid,
            .profile-dashboard-grid {
                margin-left: 1.2rem;
                margin-right: 1.2rem;
            }

            .profile-dashboard-section,
            .profile-section-heading,
            .profile-streak-card,
            .profile-shell > h2,
            .profile-actions-row {
                margin-left: 1.2rem !important;
                margin-right: 1.2rem !important;
            }

            .profile-streak-card,
            .profile-panel {
                padding: 1.4rem !important;
                border-radius: 1.4rem !important;
            }

            .profile-inline-form,
            .profile-photo-row,
            .profile-color-row,
            .profile-actions-row {
                flex-direction: column;
                align-items: stretch !important;
            }

            .profile-inline-action,
            .profile-photo-actions .btn-primary,
            .profile-photo-actions .btn-secondary {
                width: 100%;
            }

            .profile-photo-preview,
            .profile-photo-placeholder {
                margin: 0 auto;
            }

            .profile-values-grid {
                grid-template-columns: 1fr !important;
            }

            .profile-value-card-wide {
                grid-column: auto !important;
            }

            .profile-dashboard-grid {
                gap: 1rem !important;
            }

            .member-item {
                flex-wrap: wrap;
            }

            .member-follow-btn,
            .member-streak {
                margin-left: 5.4rem;
            }

            #notifications-panel .modal-content {
                width: min(100%, calc(100vw - 2.4rem));
                padding: 1.4rem;
            }
        }