:root {
            --primary: #F59E0B;          
            --primary-hover: #D97706;    
            --primary-light: #FEF3C7;    
            --secondary: #0F172A;        
            --secondary-hover: #1E293B;  
            --accent-green: #F59E0B;     
            --accent-green-light: #D1FAE5;
            --accent-red: #EF4444;
            --accent-red-light: #FEE2E2;
            --bg-body: #0F172A;          
            --bg-app: #F8FAFC;           
            --card-bg: #FFFFFF;
            --text-main: #0F172A;
            --text-muted: #64748B;
            --text-light: #94A3B8;
            --border: #E2E8F0;
            --radius-lg: 24px;
            --radius-md: 16px;
            --radius-sm: 10px;
            --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
            --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: var(--bg-body);
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        body { display: flex; justify-content: center; align-items: center; }

        .app-shell {
            width: 100vw;
            height: 100dvh;
            background-color: var(--bg-app);
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        @media (min-width: 880px) {
            .app-shell {
                width: 430px;
                height: 92vh;
                max-height: 932px;
                border-radius: 40px;
                border: 8px solid #1E293B;
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            }
        }

        /* TOAST NOTIFICATION CONTAINER */
        #toast-container {
            position: absolute;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 999;
            width: 90%;
            max-width: 360px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }

        .toast {
            background: var(--secondary);
            color: #FFFFFF;
            padding: 12px 16px;
            border-radius: var(--radius-md);
            font-size: 0.85rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            animation: slideDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), fadeOut 0.3s ease 2.7s forwards;
            pointer-events: auto;
            border-left: 4px solid var(--primary);
        }
        .toast.success { border-left-color: var(--accent-green); }
        .toast.error { border-left-color: var(--accent-red); }
        .toast i { font-size: 1.1rem; }

        @keyframes slideDown {
            from { transform: translateY(-30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-20px); }
        }

        .screen {
            display: none;
            flex-direction: column;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0; left: 0;
            background-color: var(--bg-app);
            z-index: 1;
            overflow-y: auto;
        }

        .screen.active { display: flex; z-index: 2; }

        .auth-header { padding: 24px 20px 12px 20px; text-align: center; }
        .auth-logo { display: flex; align-items: center; justify-content: center; gap: 8px; }
        .auth-logo img { height: 72px; object-fit: contain; border-radius: 50%; }
        .auth-subtitle { color: var(--text-muted); font-size: 0.88rem; margin-top: 6px; font-weight: 500; }

        .auth-body { padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .section-title { font-size: 0.85rem; font-weight: 700; color: var(--secondary); margin-bottom: 6px; }

        .role-selector { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
        .role-card { background: var(--card-bg); border: 2px solid var(--border); border-radius: var(--radius-md); padding: 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; }
        .role-card.selected { border-color: var(--primary); background-color: var(--primary-light); }
        .role-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-app); color: var(--secondary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
        .role-card.selected .role-icon { background: var(--primary); color: #FFFFFF; }
        .role-info h3 { font-size: 1rem; font-weight: 700; color: var(--secondary); }
        .role-info p { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

        .form-group { margin-bottom: 14px; }
        .form-label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--secondary); margin-bottom: 6px; }
        .input-wrapper { position: relative; display: flex; align-items: center; }
        .input-wrapper i { position: absolute; left: 14px; color: var(--text-light); font-size: 1rem; }
        .form-input, .form-select, .form-textarea { width: 100%; padding: 12px 14px 12px 42px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--text-main); background: var(--card-bg); outline: none; box-sizing: border-box; }
        .form-file-input { padding: 10px 14px 10px 42px; background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 0.85rem; width: 100%; cursor: pointer; box-sizing: border-box; }
        .form-textarea { padding-left: 14px; height: 80px; resize: none; }
        .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary); }

        .tag-select-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
        .tag-chip { padding: 8px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; background: var(--card-bg); border: 1.5px solid var(--border); color: var(--text-muted); cursor: pointer; user-select: none; }
        .tag-chip.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary-hover); }

        .btn { width: 100%; padding: 14px; border: none; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow-sm); text-decoration: none; box-sizing: border-box; }
        .btn-primary { background-color: var(--primary); color: var(--secondary); }
        .btn-secondary { background-color: var(--secondary); color: #FFFFFF; }
        .btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--secondary); }
        .btn-danger { background-color: var(--accent-red); color: #FFFFFF; }

        .auth-switch-link { text-align: center; margin-top: 14px; font-size: 0.85rem; color: var(--text-muted); }
        .auth-switch-link a { color: var(--primary-hover); font-weight: 700; text-decoration: none; }

        .app-header { padding: 10px 16px; background: var(--card-bg); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
        .app-logo img { height: 52px; object-fit: contain; border-radius: 50%; border: solid #F59E0B 1px; }
        .user-badge { display: flex; align-items: center; gap: 6px; background: var(--bg-app); padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; color: var(--secondary); border: 1px solid var(--border); }

        .app-main { flex: 1; padding: 14px; overflow-y: auto; position: relative; display: flex; flex-direction: column; }

        .bottom-nav { background: var(--card-bg); border-top: 1px solid var(--border); display: flex; justify-content: space-around; padding: 10px 0 16px 0; }
        .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--text-muted); font-size: 0.7rem; font-weight: 600; cursor: pointer; gap: 4px; width: 33%; }
        .nav-item i { font-size: 1.2rem; }
        .nav-item.active { color: var(--primary-hover); }

        .card-container { flex: 1; display: flex; flex-direction: column; }

        .profile-card, .feed-card-item {
            background: var(--card-bg);
            padding: 18px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            margin-bottom: 14px;
            text-align: left;
            position: relative;
            box-shadow: var(--shadow-sm);
        }

        .profile-header-title { font-size: 1.3rem; font-weight: 800; color: var(--secondary); margin: 0; }
        .role-badge-pill { display: inline-block; background: var(--primary-light); color: var(--primary-hover); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 12px; margin-top: 6px; }
        .location-tag { font-size: 0.85rem; color: var(--text-muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
        .bio-text { font-size: 0.88rem; color: var(--text-main); margin-top: 6px; line-height: 1.4; white-space: pre-line; }

        .view-tags-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .tag-display { background: var(--bg-app); border: 1px solid var(--border); padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; color: var(--secondary); }

        /* FILTER BAR STYLE */
        .filter-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 12px;
            margin-bottom: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            box-shadow: var(--shadow-sm);
        }

        .filter-row {
            display: flex;
            gap: 8px;
        }

        .filter-select {
            flex: 1;
            width: 100%;
            padding: 10px 36px 10px 14px;
            border: 1.5px solid var(--border);
            border-radius: var(--radius-sm);
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--secondary);
            background-color: var(--card-bg);
            
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;

            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230F172A%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E");
            background-repeat: no-repeat;
            background-position: right 14px top 50%;
            background-size: 10px auto;

            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .filter-select:hover {
            border-color: var(--primary);
        }

        .filter-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
        }

        .filter-select option {
            background: var(--card-bg);
            color: var(--text-main);
            font-weight: 500;
            padding: 10px;
        }

        .swipe-stack {
            position: relative;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .swipe-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 20px;
            width: 100%;
            box-sizing: border-box;
            box-shadow: var(--shadow-md);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 380px;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .swipe-actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 16px;
            width: 100%;
        }

        .action-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            cursor: pointer;
            box-shadow: var(--shadow-md);
            transition: transform 0.15s ease;
        }
        .action-btn:active { transform: scale(0.9); }
        .btn-pass { background: var(--accent-red-light); color: var(--accent-red); }
        .btn-like { background: var(--accent-green-light); color: var(--accent-green); }

        .like-icon-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            background: var(--bg-app);
            border: 1px solid var(--border);
            border-radius: 50%;
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-light);
            font-size: 1.1rem;
            transition: all 0.2s ease;
            z-index: 5;
        }
        .like-icon-btn.liked {
            color: var(--accent-red);
            background: var(--accent-red-light);
            border-color: var(--accent-red);
        }

        .empty-feed {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
        }
        .empty-feed i {
            font-size: 3rem;
            color: var(--text-light);
            margin-bottom: 12px;
        }

        /* MODAL STYLES */
        .modal-backdrop {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(4px);
            z-index: 100;
            display: none;
            justify-content: center;
            align-items: center;
            padding: 16px;
        }
        .modal-backdrop.active { display: flex; }
        .modal-content {
            background: var(--card-bg);
            width: 100%;
            max-width: 400px;
            max-height: 85vh;
            border-radius: var(--radius-lg);
            padding: 24px;
            overflow-y: auto;
            position: relative;
            box-shadow: var(--shadow-md);
        }
        .modal-close-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            background: var(--bg-app);
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: var(--text-muted);
            cursor: pointer;
        }

        /* CONFIRM MODAL */
        .confirm-box {
            text-align: center;
        }
        .confirm-box i {
            font-size: 2.5rem;
            color: var(--accent-red);
            margin-bottom: 12px;
        }
        .confirm-box h3 {
            margin: 0 0 8px 0;
            color: var(--secondary);
            font-size: 1.1rem;
        }
        .confirm-box p {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 20px;
        }
        .confirm-actions {
            display: flex;
            gap: 10px;
        }

        .avatar-img {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary);
        }

        .avatar-placeholder {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: var(--bg-app);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--text-light);
        }
        .custom-file-upload {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 12px 18px;
            background: var(--bg-app, #1E293B);
            color: var(--text-main, #F8FAFC);
            border: 1.5px dashed var(--border, #334155);
            border-radius: 12px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 600;
            transition: all 0.2s ease;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
        }

        .custom-file-upload:hover {
            border-color: var(--primary, #38BDF8);
            background: rgba(56, 189, 248, 0.05);
            color: var(--primary, #38BDF8);
        }

        .custom-file-upload i {
            font-size: 1.1rem;
        }

        .form-file-input-hidden {
            display: none !important;
        }