:root {
            --primary: #0f172a;
            --primary-light: #334155;
            --accent: #2563eb;
            --bg: #f8fafc;
            --surface: #ffffff;
            --text: #0f172a;
            --text-light: #64748b;
            --border: #e2e8f0;
            --danger: #ef4444;
            --warning: #f59e0b;
            --success: #10b981;
            --radius: 12px;
            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --nav-height: 65px;
            --motion-fast: 170ms;
            --motion-base: 260ms;
            --motion-stagger: 44ms;
            --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
        }

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html {
            scroll-behavior: smooth;
        }

        @keyframes app-fade-up {
            from {
                opacity: 0;
                transform: translate3d(0, 10px, 0);
            }

            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes app-view-in {
            from {
                opacity: 0;
                transform: translate3d(0, 8px, 0);
            }

            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes app-shimmer {
            from {
                transform: translateX(-120%);
            }

            to {
                transform: translateX(120%);
            }
        }

        .view-panel.is-view-entering {
            animation: app-view-in var(--motion-base) var(--motion-ease) both;
        }

        .motion-item {
            animation: app-fade-up var(--motion-base) var(--motion-ease) both;
            animation-delay: calc(var(--stagger-index, 0) * var(--motion-stagger));
        }

        .motion-item-fast {
            animation-duration: var(--motion-fast);
        }

        /* --- SEARCHABLE DROPDOWN UI --- */
        .owner-search-wrap {
            position: relative;
        }

        .owner-search-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .owner-search-row .input-modern {
            margin: 0;
        }

        .owner-search-btn {
            width: 42px;
            min-width: 42px;
            height: 42px;
            padding: 0;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .owner-search-btn.is-loading svg {
            animation: spin 0.9s linear infinite;
        }

        .owner-search-btn svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }

        .owner-results {
            max-height: 180px;
            overflow-y: auto;
            border: 1px solid #e2e8f0;
            border-top: none;
            border-radius: 0 0 12px 12px;
            background: white;
            position: absolute;
            width: 100%;
            z-index: 50;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .owner-item {
            padding: 10px 14px;
            cursor: pointer;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
        }

        .owner-item:hover {
            background: #eff6ff;
            color: var(--accent);
        }

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

        /* --- PROFESSIONAL SEGMENTED CONTROL (iOS Style) --- */
        /* --- PROFESSIONAL SEGMENTED CONTROL (Left Aligned & Equal Width) --- */
        .ios-segment-track {
            display: grid;
            grid-template-columns: 1fr 1fr;
            /* Exact 50/50 split */
            gap: 4px;
            background: #f1f5f9;
            padding: 4px;
            border-radius: 10px;
            border: 1px solid #e2e8f0;

            /* UI POSITIONING FIX */
            width: 100%;
            max-width: 380px;
            /* Limits width on Desktop */
            margin-top: 12px;
            margin-left: 0;
            /* Forces Left Alignment */
            margin-right: auto;
        }

        .ios-segment-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 12px;
            /* Taller touch area */
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
            outline: none;
            white-space: nowrap;
            background: transparent;
            color: #64748b;
        }

        /* Hover State */
        .ios-segment-btn:not(.active):hover {
            background: rgba(0, 0, 0, 0.03);
            color: #475569;
        }

        /* Active State */
        .ios-segment-btn.active {
            background: #ffffff;
            color: #0f172a;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
            font-weight: 700;
        }

        /* Icon Styling */
        .ios-segment-btn svg {
            width: 15px;
            height: 15px;
            fill: currentColor;
            opacity: 0.7;
            margin-top: -1px;
            /* Optical alignment */
        }

        .ios-segment-btn.active svg {
            opacity: 1;
            color: var(--accent);
        }

        .selected-owner-tag .btn-icon {
            background: white;
            color: #ef4444;
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            border: 1px solid #fecaca;
            transition: all 0.2s;
        }

        .selected-owner-tag .btn-icon:hover {
            background: #fef2f2;
            transform: scale(1.1);
        }

        .skeleton {
            background-color: #e2e8f0;
            background-image: linear-gradient(90deg,
                    #e2e8f0 0px,
                    #f1f5f9 40px,
                    #e2e8f0 80px);
            background-size: 200px 100%;
            background-repeat: no-repeat;
            display: inline-block;
            border-radius: 4px;
            animation: skeleton-loading 1.5s infinite linear;
        }

        @keyframes skeleton-loading {
            0% {
                background-position: -200px 0;
            }

            100% {
                background-position: calc(200px + 100%) 0;
            }
        }

        .biz-skeleton-card {
            background: white;
            border-radius: 16px;
            border: 1px solid #f1f5f9;
            padding: 0;
            overflow: hidden;
            height: 300px;
            display: flex;
            flex-direction: column;
        }

        /* --- FAB BUTTON VISIBILITY FIX --- */
        /* Show FAB for everyone (logic handled in JS) */
        .fab-add {
            display: flex !important;
        }

        .fab-add.hidden {
            display: none !important;
        }

        /* --- CROPPER FIXES --- */
        .crop-container {
            height: 300px;
            background: #0f172a;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
        }

        /* Ensure image doesn't overflow */
        .crop-container img {
            display: block;
            max-width: 100%;
        }

        .tool-btn {
            width: 40px;
            height: 40px;
            background: #334155;
            border: 1px solid #475569;
            color: white;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.2s;
        }

        .tool-btn:hover {
            background: var(--accent);
            border-color: var(--accent);
        }

        .tool-btn svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            /* OPTIMIZATION: Prevent accidental pull-to-refresh on mobile */
            overscroll-behavior: none;
        }

        /* UTILS */
        .hidden {
            display: none !important;
        }

        .flex {
            display: flex;
        }

        .flex-col {
            flex-direction: column;
        }

        .items-center {
            align-items: center;
        }

        .justify-between {
            justify-content: space-between;
        }

        .gap-2 {
            gap: 0.5rem;
        }

        .gap-4 {
            gap: 1rem;
        }

        .text-sm {
            font-size: 0.875rem;
        }

        .text-xs {
            font-size: 0.75rem;
        }

        .text-light {
            color: var(--text-light);
        }

        .text-bold {
            font-weight: 600;
        }

        .w-full {
            width: 100%;
        }

        .text-danger {
            color: var(--danger);
        }

        .text-success {
            color: var(--success);
            font-weight: 600;
        }

        del {
            text-decoration: line-through;
            color: var(--danger);
            margin-right: 4px;
            opacity: 0.7;
        }

        /* LOADER */
        #app-loader {
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, 0.85);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .loader-spinner {
            width: 45px;
            height: 45px;
            border: 4px solid #e2e8f0;
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            100% {
                transform: rotate(360deg);
            }
        }

        /* --- 1. FIXED NOTIFICATION BADGES --- */
        /* Desktop Badge */
        .badge-count-desktop {
            background-color: #ef4444;
            color: white;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 99px;
            /* Pill shape */
            margin-left: auto;
            min-width: 20px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
        }

        /* Mobile Badge (Floating) */
        .b-nav-item {
            position: relative;
        }

        /* Needed for absolute positioning */

        .badge-count-mobile {
            position: absolute;
            top: 4px;
            right: 25%;
            /* Positions it nicely over the icon */
            background-color: #ef4444;
            color: white;
            font-size: 0.6rem;
            font-weight: 700;
            padding: 2px 5px;
            border-radius: 99px;
            min-width: 16px;
            text-align: center;
            border: 2px solid #fff;
            /* White ring to separate from icon */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        /* --- 2. MODERN ROUNDED BUTTONS --- */
        .btn-rounded {
            border-radius: 50px;
            /* Full pill shape */
            padding: 8px 20px;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: none;
            cursor: pointer;
            transition: transform 0.1s, box-shadow 0.2s;
        }

        .btn-rounded.btn-accept .inline-icon,
        .btn-rounded.btn-reject .inline-icon {
            width: 1.05rem;
            height: 1.05rem;
            margin-right: 0.38rem;
            vertical-align: -0.16em;
        }

        .btn-rounded:active {
            transform: scale(0.96);
        }

        .btn-accept {
            background: #10b981;
            color: white;
            box-shadow: 0 4px 10px -3px rgba(16, 185, 129, 0.4);
        }

        .btn-reject {
            background: white;
            color: #ef4444;
            border: 1px solid #fecaca;
        }

        /* --- 3. MODERN STATUS BADGES --- */
        .status-pill {
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .pill-approved {
            background: #dcfce7;
            color: #166534;
            border: 1px solid #bbf7d0;
        }

        .pill-rejected {
            background: #fef2f2;
            color: #991b1b;
            border: 1px solid #fecaca;
        }

        .pill-pending {
            background: #ffedd5;
            color: #9a3412;
            border: 1px solid #fed7aa;
        }

        .pill-partial {
            background: #fff7ed;
            color: #c2410c;
            border: 1px solid #ffcc80;
        }

        /* BUTTONS & INPUTS */
        .btn {
            padding: 0.75rem 1rem;
            border-radius: var(--radius);
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
            font-size: 0.95rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            text-decoration: none;
        }

        .btn:active {
            transform: scale(0.98);
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-accent {
            background: var(--accent);
            color: white;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text);
        }

        .btn-danger {
            background: #fee2e2;
            color: var(--danger);
        }

        .btn-success {
            background: #dcfce7;
            color: var(--success);
        }

        .btn-sm {
            padding: 0.4rem 0.8rem;
            font-size: 0.85rem;
        }

        .btn-icon {
            padding: 0.5rem;
            border-radius: 50%;
            background: #f1f5f9;
            color: var(--text);
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .btn-icon svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
            display: block;
        }

        input,
        select,
        textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 1rem;
            background: var(--surface);
            outline: none;
            transition: border-color 0.2s;
        }

        input:focus,
        select:focus,
        textarea:focus {
            border-color: var(--accent);
            ring: 2px solid var(--accent);
        }

        /* LAYOUT */
        #app-container {
            display: flex;
            flex: 1;
            overflow: hidden;
            height: 100%;
        }

        aside {
            width: 260px;
            background: var(--surface);
            border-right: 1px solid var(--border);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            z-index: 20;
        }

        .sidebar-nav-scroll {
            height: 420px;
            max-height: calc(100vh - 270px);
            min-height: 220px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 2px;
            margin-bottom: 0.5rem;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .sidebar-nav-scroll::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }

        .nav-item {
            padding: 0.8rem 1rem;
            margin-bottom: 0.5rem;
            border-radius: var(--radius);
            cursor: pointer;
            color: var(--text-light);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transition: background 0.2s;
        }

        .nav-item svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
            flex: 0 0 18px;
        }

        .nav-item:hover {
            background: #f8fafc;
        }

        .nav-item.active {
            background: #eff6ff;
            color: var(--accent);
            font-weight: 600;
        }

        main {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            position: relative;
            scroll-behavior: auto;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            padding-bottom: 80px;
            overflow-anchor: none;
            /* OPTIMIZATION: Smooth momentum scrolling on iOS */
            -webkit-overflow-scrolling: touch;
        }

        /* OPTIMIZATION: Skip rendering/layout for off-screen view sections */
        #view-business, #view-reports,
        #view-requests, #view-locations, #view-surnames, #view-user-mgmt {
            content-visibility: auto;
            contain-intrinsic-size: auto 500px;
        }

        #view-directory {
            content-visibility: visible;
            contain-intrinsic-size: auto;
        }

        .loc-disabled {
            opacity: 0.55;
            background-color: #f1f5f9 !important;
            cursor: not-allowed;
        }

        .directory-toolbar {
            padding: 0.8rem;
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }

        .directory-input {
            font-size: 0.9rem;
            padding: 0.6rem;
        }

        .directory-surname-filter {
            width: 100%;
        }

        .directory-search-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .directory-search-input {
            flex: 1;
        }

        .directory-search-btn {
            height: 42px;
            padding: 0 16px;
            border-radius: 10px;
            font-weight: 600;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .directory-search-icon {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }

        .directory-filter-row {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .directory-source-status {
            margin-top: 2px;
            min-height: 16px;
            font-weight: 600;
        }

        .directory-filter-select {
            flex: 1;
            padding: 0.4rem;
            font-size: 0.85rem;
        }

        .directory-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
            overflow-anchor: none;
            align-items: stretch;
            align-content: start;
            grid-auto-flow: row;
        }

        .dir-loading-sentinel {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 72px;
            gap: 8px;
            margin-bottom: 1rem;
            padding: 6px 0;
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.18s ease, transform 0.18s ease;
            overflow-anchor: none;
        }

        .dir-loading-sentinel.hidden {
            opacity: 0;
            transform: translateY(4px);
        }

        .dir-loader-spinner {
            width: 30px;
            height: 30px;
            border-width: 3px;
        }

        .dir-loading-hint {
            color: #94a3b8;
            font-size: 0.82rem;
            text-align: center;
            line-height: 1.2;
            min-height: 1.2em;
        }

        .biz-loading-sentinel {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 56px;
            gap: 8px;
            margin-bottom: 60px;
            padding: 8px 0;
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.16s ease, transform 0.16s ease;
            overflow-anchor: none;
        }

        .biz-loader-spinner {
            width: 26px;
            height: 26px;
            border-width: 3px;
        }

        .biz-loading-hint {
            color: #94a3b8;
            font-size: 0.82rem;
            text-align: center;
            line-height: 1.2;
            min-height: 1.2em;
        }

        .req-loading-sentinel {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 60px;
            gap: 8px;
            margin-top: 2px;
            margin-bottom: 44px;
            padding: 8px 0;
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.16s ease, transform 0.16s ease;
            overflow-anchor: none;
        }

        .req-loading-sentinel.hidden {
            opacity: 0;
            transform: translateY(4px);
        }

        .req-loader-spinner {
            width: 26px;
            height: 26px;
            border-width: 3px;
        }

        .req-loading-hint {
            color: #94a3b8;
            font-size: 0.82rem;
            text-align: center;
            line-height: 1.2;
            min-height: 1.2em;
        }

        .dir-loading-state {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 3rem;
        }

        .dir-loading-text {
            color: #64748b;
            font-size: 0.9rem;
            margin-top: 0;
            text-align: center;
        }

        .dir-empty-state {
            grid-column: 1 / -1;
            text-align: center;
            padding: 3rem;
        }

        .dir-skeleton-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 16px;
            min-height: 220px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow: hidden;
            position: relative;
        }

        .dir-skeleton-line {
            height: 12px;
            border-radius: 6px;
            background: #e2e8f0;
            position: relative;
            overflow: hidden;
        }

        .dir-skeleton-line.wide {
            width: 82%;
            height: 18px;
        }

        .dir-skeleton-line.mid {
            width: 58%;
        }

        .dir-skeleton-line.short {
            width: 34%;
        }

        .dir-skeleton-line::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(226, 232, 240, 0) 0%, rgba(248, 250, 252, 0.95) 50%, rgba(226, 232, 240, 0) 100%);
            animation: app-shimmer 1.15s linear infinite;
        }

        .dir-empty-icon {
            width: 44px;
            height: 44px;
            margin: 0 auto 0.5rem;
            color: #94a3b8;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .dir-empty-icon svg {
            width: 42px;
            height: 42px;
            fill: currentColor;
        }

        .dir-empty-title {
            font-weight: 600;
            color: #1e293b;
            font-size: 1rem;
            margin-bottom: 0.25rem;
        }

        .dir-empty-subtitle {
            color: #94a3b8;
            font-size: 0.85rem;
        }

        .dir-card {
            contain: content;
            content-visibility: visible;
            contain-intrinsic-size: auto;
            will-change: auto;
            width: 100%;
            height: 100%;
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
        }

        .dir-virtual-slot {
            width: 100%;
            min-width: 0;
            align-self: stretch;
            display: flex;
            height: 100%;
        }

        .dir-virtual-slot>.dir-card,
        #directory-grid>.dir-card {
            animation: none !important;
            transform: none !important;
            will-change: auto !important;
            content-visibility: visible !important;
            contain-intrinsic-size: auto !important;
            width: 100%;
            height: 100%;
            margin-bottom: 0;
            flex: 1 1 auto;
        }

        .dir-card-head {
            border-bottom: 1px solid var(--border);
            padding-bottom: 0.5rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
        }

        .dir-title-wrap {
            display: flex;
            align-items: baseline;
            gap: 0.4rem;
            min-width: 0;
        }

        .dir-surname {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--primary);
        }

        .dir-family-actions {
            flex-shrink: 0;
        }

        .dir-manage-btn {
            color: var(--accent);
            background: #eff6ff;
        }

        .dir-manage-btn svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }

        .dir-super-btn {
            margin-left: 5px;
            background: #f0fdf4;
            color: #166534;
            width: 36px;
            height: 36px;
        }

        .dir-address-row {
            margin-bottom: 0.5rem;
            align-items: center;
        }

        .dir-address-text {
            line-height: 1.4;
        }

        .dir-address-edit {
            color: var(--primary);
            padding: 2px;
            background: rgba(37, 99, 235, 0.1);
            border-radius: 4px;
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .dir-address-edit svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }

        .dir-member-row {
            margin-top: 0.5rem;
            border-top: 1px solid #f1f5f9;
            padding-top: 0.5rem;
        }

        .dir-member-top {
            display: flex;
            justify-content: space-between;
            gap: 0.75rem;
            align-items: flex-start;
        }

        .dir-member-main {
            flex: 1;
            min-width: 0;
        }

        .dir-member-name {
            font-weight: 600;
            font-size: 0.95rem;
            color: #0f172a;
            line-height: 1.3;
        }

        .dir-role-wrap {
            margin-top: 2px;
        }

        .dir-role-badge {
            font-size: 0.6rem;
            background: #166534;
            color: #fff;
            padding: 1px 6px;
            border-radius: 4px;
            letter-spacing: 0.5px;
            font-weight: 600;
        }

        .dir-member-age {
            margin-top: 2px;
        }

        .dir-member-contact {
            margin-top: 4px;
            display: inline-block;
            font-weight: 500;
            color: #2563eb;
        }

        .dir-member-admin-actions {
            margin-left: auto;
            flex-shrink: 0;
        }

        .dir-member-admin-actions .action-btn {
            width: 30px;
            height: 30px;
        }

        .dir-member-details {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-top: 6px;
            line-height: 1.4;
        }

        .dir-occ-tag {
            font-weight: 600;
            color: var(--primary);
        }

        .dir-work-mobile {
            width: 100%;
        }

        .dir-virtual-spacer {
            grid-column: 1 / -1;
            width: 100%;
            min-height: 1px;
            pointer-events: none;
            overflow-anchor: none;
        }

        .dir-credit {
            grid-column: 1 / -1;
            text-align: center;
            padding: 1.5rem 0;
            opacity: 0.6;
            font-size: 0.75rem;
        }

        /* CARDS */
        .card {
            background: var(--surface);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid var(--border);
        }

        .member-row {
            padding: 1rem 0;
            border-bottom: 1px solid #f1f5f9;
        }

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

        .info-pill {
            background: #f1f5f9;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            display: inline-block;
            margin-right: 4px;
            margin-top: 4px;
            color: var(--text-light);
            font-weight: 500;
        }

        /* BOTTOM NAV - SCROLLABLE UPDATE */
        .bottom-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            /* Increased opacity */
            backdrop-filter: blur(12px);
            border-top: 1px solid var(--border);
            height: var(--nav-height);
            z-index: 50;

            /* SCROLL LOGIC */
            justify-content: flex-start;
            /* Align left to allow scroll */
            overflow-x: auto;
            /* Enable horizontal scrolling */
            gap: 0;
            padding: 0 10px;
            /* Side padding */
            padding-bottom: env(safe-area-inset-bottom);
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);

            /* Hide Scrollbar */
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .biz-card,
        .card:not(.dir-card),
        .owner-item {
            /* Tells browser to not render contents if off-screen */
            content-visibility: auto;
            contain-intrinsic-size: 150px;
            /* Remove shadow on mobile scroll to prevent lag */
            transform: translateZ(0);
            will-change: transform;
        }

        @media (hover: hover) {
            .biz-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            .view-panel.is-view-entering,
            .motion-item,
            .dir-skeleton-line::after,
            .img-loader,
            .img-loader::after {
                animation: none !important;
            }
        }

        .bottom-nav::-webkit-scrollbar {
            display: none;
        }

        .b-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* Fixed width for consistent scrolling */
            flex: 0 0 72px;
            height: 100%;
            color: var(--text-light);
            font-size: 0.65rem;
            /* Slightly smaller text */
            gap: 4px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            /* For badges */
        }

        .b-nav-item.active {
            color: var(--accent);
            font-weight: 700;
            background: linear-gradient(to top, #eff6ff 0%, transparent 100%);
            /* Subtle highlight */
        }

        .b-nav-item svg {
            width: 22px;
            height: 22px;
            fill: currentColor;
        }

        /* ACTION BUTTONS */
        .action-btn {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.1s, background 0.2s;
        }

        .action-btn:active {
            transform: scale(0.95);
        }

        .action-btn svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        .btn-edit {
            background: #f1f5f9;
            color: var(--primary);
        }

        .btn-edit:active {
            background: #e2e8f0;
        }

        .btn-delete {
            background: #fee2e2;
            color: #ef4444;
        }

        .btn-logout {
            background-color: #fee2e2;
            color: #ef4444;
            border: 1px solid #fecaca;
            font-weight: 600;
            padding: 0.75rem 1rem;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
            width: 100%;
            margin-top: auto;
        }

        .btn-logout:hover {
            background-color: #ef4444;
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.2);
        }

        .btn-logout svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
            transform: rotate(180deg);
        }

        /* --- PROFESSIONAL SPLIT LAYOUT (FIXED) --- */
        #auth-screen {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: flex;
            background-color: #f1f5f9;
            /* Mobile Background */
            overflow: hidden;
        }

        /* LEFT SIDE: Branding (Desktop) */
        .auth-hero {
            display: none;
            /* Hidden on mobile */
            flex: 1.3;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            position: relative;
            flex-direction: column;
            justify-content: center;
            padding: 5rem;
            color: white;
            z-index: 2;
        }

        /* Hero Abstract Shapes */
        .auth-hero::before {
            content: '';
            position: absolute;
            top: -10%;
            right: -10%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
            border-radius: 50%;
        }

        .auth-hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30%;
            background: linear-gradient(to top, #0f172a, transparent);
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 10;
            max-width: 600px;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            line-height: 1.1;
            background: linear-gradient(to right, #fff, #cbd5e1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-text {
            font-size: 1.25rem;
            color: #94a3b8;
            line-height: 1.6;
            margin-bottom: 3rem;
        }

        /* RIGHT SIDE: Form Container */
        .auth-form-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* FIX: Changed from 'center' to 'flex-start' to prevent top clipping */
            justify-content: flex-start;
            padding: 20px;
            position: relative;
            width: 100%;
            background: #f8fafc;
            overflow-y: auto;
            /* Enables scrolling */
            height: 100%;
        }

        /* --- MOBILE HEADER (NEW) --- */
        .mobile-header-bg {
            display: block;
            /* Visible on mobile */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 220px;
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            border-bottom-left-radius: 40px;
            border-bottom-right-radius: 40px;
            z-index: 0;
        }

        .auth-card-modern {
            width: 100%;
            max-width: 400px;
            background: #ffffff;
            border-radius: 24px;
            padding: 2.5rem;
            position: relative;
            z-index: 10;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            margin-top: auto;
            margin-bottom: auto;
            flex-shrink: 0;
            /* Prevents card from getting squashed */
        }

        /* Logo Styling */
        .logo-wrapper {
            width: 70px;
            height: 70px;
            background: #fff;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            margin: 0 auto 1.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 20;
        }

        .auth-headings {
            text-align: center;
            margin-bottom: 2rem;
        }

        .auth-h1 {
            font-size: 1.75rem;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            letter-spacing: -0.5px;
        }

        .auth-sub {
            color: #64748b;
            font-size: 0.95rem;
            margin-top: 5px;
        }

        /* --- INPUTS --- */
        .input-group-modern {
            margin-bottom: 1.25rem;
        }

        .label-modern {
            display: block;
            font-size: 0.85rem;
            font-weight: 600;
            color: #334155;
            margin-bottom: 0.5rem;
            margin-left: 4px;
        }

        /* Allow textareas to grow based on 'rows' attribute */
        textarea.input-modern {
            height: auto !important;
            padding-top: 14px;
            padding-bottom: 14px;
            min-height: 52px;
        }

        .input-modern {
            width: 100%;
            height: 52px;
            padding: 0 16px;
            font-size: 1rem;
            border: 2px solid #f1f5f9;
            border-radius: 12px;
            background: #f8fafc;
            color: #0f172a;
            transition: 0.2s;
        }

        .input-modern:focus {
            border-color: #2563eb;
            background: #fff;
            outline: none;
        }

        /* The actual checkbox input */
        .chk-input {
            width: 20px;
            height: 20px;
            accent-color: #2563eb;
            cursor: pointer;
        }

        /* --- BUTTONS --- */
        .btn-modern {
            width: 100%;
            height: 54px;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: white;
            border: none;
            border-radius: 14px;
            font-size: 1.05rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
            transition: transform 0.1s;
        }

        .btn-modern:active {
            transform: scale(0.98);
        }

        /* --- DESKTOP TWEAKS --- */
        @media (min-width: 1024px) {
            .auth-hero {
                display: flex;
            }

            .mobile-header-bg {
                display: none;
            }

            /* Hide mobile blue header on desktop */
            .auth-form-container {
                background: #fff;
            }

            /* Clean white right side on desktop */
            .auth-card-modern {
                box-shadow: none;
                padding: 0;
                max-width: 380px;
            }

            /* Seamless form on desktop */
            .logo-wrapper {
                display: none;
            }

            /* Hide logo box on desktop (moved to hero or text) */
            .auth-h1 {
                font-size: 2rem;
            }
        }

        .btn-danger-soft {
            background-color: #fef2f2;
            color: #ef4444;
            border: 1px solid #fecaca;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }

        /* --- BIRTHDAY TICKER STYLES --- */
        .birthday-wrap {
            width: 100%;
            /* Soft Grey Background - Easy on eyes */
            background: #f1f5f9;

            /* Dark Text for contrast */
            color: #334155;

            /* Subtle Border to define edges */
            border: 1px solid #e2e8f0;
            padding: 10px 0;
            margin-bottom: 20px;
            border-radius: 12px;
            overflow: hidden;
            white-space: nowrap;
            position: relative;
        }

        .birthday-content {
            display: inline-block;
            padding-left: 100%;
            animation: bday-ticker 20s linear infinite;
            font-weight: 700;
            font-size: 0.95rem;
            letter-spacing: 0.5px;
        }

        @keyframes bday-ticker {
            0% {
                transform: translate3d(0, 0, 0);
            }

            100% {
                transform: translate3d(-100%, 0, 0);
            }
        }

        #modal-contact {
            z-index: 2300 !important;
        }

        .btn-danger-soft:hover {
            background-color: #ef4444;
            color: white;
            border-color: #ef4444;
        }

        .btn-danger-soft svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }

        /* ADMIN CONTROLS */
        .admin-controls {
            background: white;
            padding: 12px;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .search-row {
            width: 100%;
        }

        .filter-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        @media (max-width: 640px) {
            .filter-row {
                grid-template-columns: 1fr;
            }
        }

        .input-pro {
            width: 100%;
            padding: 10px 14px;
            font-size: 0.95rem;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background-color: #f8fafc;
            color: #0f172a;
            outline: none;
            transition: all 0.2s;
            height: 44px;
        }

        .input-pro:focus {
            background-color: #fff;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        select.input-pro {
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 1rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
            padding-right: 2.5rem;
            cursor: pointer;
        }

        /* MODALS */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 2000;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            backdrop-filter: blur(4px);
            opacity: 0;
            pointer-events: none;
            transition: 0.2s;
        }

        .modal-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-content {
            background: var(--surface);
            width: 100%;
            max-width: 500px;
            max-height: 85vh;
            border-radius: 20px 20px 0 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        }

        .modal-overlay.open .modal-content {
            transform: translateY(0);
        }

        /* RESPONSIVE TABS: Wide on Mobile, Compact on Desktop */
        .tab-responsive {
            display: flex;
            width: 100%;
            max-width: 320px;
            /* Default (Desktop) */
            background: #f1f5f9;
            padding: 4px;
            border-radius: 10px;
            margin-bottom: 15px;
        }

        @media (max-width: 767px) {
            .tab-responsive {
                max-width: 100% !important;
                /* Wide on Mobile */
            }
        }

        /* MEDIA QUERIES */
        @media (min-width: 768px) {
            .modal-overlay {
                align-items: center;
            }

            .modal-content {
                border-radius: var(--radius);
                transform: scale(0.95);
                width: 90%;
            }

            .modal-overlay.open .modal-content {
                transform: scale(1);
            }

            aside {
                display: flex;
            }

            .bottom-nav {
                display: none;
            }

            main {
                padding: 2rem;
            }
        }

        /* --- MOBILE OPTIMIZATIONS --- */
        @media (max-width: 767px) {
            aside {
                display: none;
            }

            .bottom-nav {
                display: flex;
            }

            /* Fix: Ensure content isn't hidden behind bottom nav */
            main {
                padding: 1rem;
                padding-bottom: 120px !important;
            }

            /* Fix: Directory cards should take full width on mobile */
            #directory-grid {
                grid-template-columns: 1fr !important;
            }

            /* Fix: Login screen spacing */
            .auth-form-container {
                padding-top: 40px;
                padding-bottom: 40px;
            }

            .mobile-header-bg {
                height: 280px;
                /* Taller blue background for better look */
                border-bottom-left-radius: 30px;
                border-bottom-right-radius: 30px;
            }

            .auth-card-modern {
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
                /* Restore shadow on mobile */
            }
        }

        /* Add this NEW class for responsive rows inside cards */
        .responsive-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
        }

        /* On very small screens, ensure text has space */
        .member-info {
            flex: 1;
            min-width: 0;
            /* Allows text truncation if needed */
            word-wrap: break-word;
        }

        .bottom-nav.member-mode .b-nav-item {
            flex: 1 !important;
            /* Grow to fill empty space */
            max-width: none !important;
            /* Remove the 72px restriction */
        }

        /* --- AUTO-SCALE FOR SMALL MOBILES ONLY --- */
        /* Only apply if width is Mobile (<768px) AND Height is short (<750px) */
        @media only screen and (max-width: 767px) and (max-height: 750px) {

            /* 1. Shrink the main card padding */
            .auth-card-modern {
                padding: 1.5rem !important;
                max-width: 100%;
            }

            /* 2. Smaller Logo */
            .logo-wrapper {
                width: 50px;
                height: 50px;
                font-size: 1.8rem;
                margin-bottom: 1rem;
            }

            /* 3. Smaller Headings */
            .auth-headings {
                margin-bottom: 1.2rem;
            }

            .auth-h1 {
                font-size: 1.4rem;
            }

            .auth-sub {
                font-size: 0.8rem;
            }

            /* 4. Compact Inputs & Buttons */
            .input-modern,
            .btn-modern {
                height: 44px;
                /* Shorter height */
                font-size: 0.95rem;
            }

            .input-group-modern {
                margin-bottom: 0.8rem;
            }

            /* Less gap */
            .label-modern {
                margin-bottom: 0.2rem;
                font-size: 0.8rem;
            }

            /* 6. Adjust Top Background */
            .mobile-header-bg {
                height: 160px;
            }

            /* 7. Ensure form aligns to top for scrolling */
            .auth-form-container {
                justify-content: flex-start;
                padding-top: 40px;
                padding-left: 15px;
                padding-right: 15px;
            }
        }

        /* --- MODERN ADD BUTTON (Clean & Professional) --- */
        .btn-add-modern {
            width: 100%;
            margin-top: 1rem;
            padding: 14px;
            background: #ffffff;
            color: #334155;
            /* Dark Slate Gray */
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            /* Subtle depth */
        }

        .btn-add-modern:hover {
            border-color: #2563eb;
            /* Royal Blue Border */
            color: #2563eb;
            /* Royal Blue Text */
            background: #eff6ff;
            /* Very light blue tint */
            transform: translateY(-1px);
            box-shadow: 0 4px 10px -3px rgba(37, 99, 235, 0.2);
            /* Soft Blue Glow */
        }

        .btn-add-modern:active {
            transform: scale(0.98);
            background: #e2e8f0;
        }

        /* --- ADD THIS AT THE BOTTOM OF YOUR STYLE TAG --- */
        @media (max-width: 767px) {
            .auth-form-container {
                justify-content: flex-start;
                /* Aligns content to top */
                padding-top: 60px;
                /* Push down slightly so it looks good */
                padding-bottom: 40px;
                /* Space at bottom for scrolling */
            }

            /* Ensure the absolute background stays behind */
            .mobile-header-bg {
                position: absolute;
                /* Keep it pinned to top of container */
                top: 0;
            }
        }

        #modal-reject {
            z-index: 2200 !important;
        }

        #modal-req-details {
            z-index: 2100 !important;
        }

        .input-pro-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 1rem;
        }

        .contact-link {
            color: var(--accent);
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 0;
            cursor: pointer;
        }

        /* --- IOS-LIKE TOAST BANNER --- */
        #toast {
            --toast-dx: 0px;
            --toast-dy: 0px;
            --toast-drag-opacity: 1;
            position: fixed;
            top: calc(env(safe-area-inset-top, 0px) + 10px);
            left: 50%;
            transform: translate3d(calc(-50% + var(--toast-dx)), calc(-18px + var(--toast-dy)), 0) scale(0.98);
            opacity: 0;
            z-index: 12000;

            width: min(95vw, 520px);
            max-width: calc(100vw - 12px);
            min-height: 50px;
            padding: 9px 12px 10px;
            border-radius: 15px;

            display: flex;
            align-items: center;
            gap: 9px;

            color: #0f172a;
            font-size: 0.84rem;
            font-weight: 600;
            letter-spacing: 0;
            line-height: 1.18;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            background: rgba(255, 255, 255, 0.84);
            border: 1px solid rgba(15, 23, 42, 0.12);
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(22px) saturate(185%);
            -webkit-backdrop-filter: blur(22px) saturate(185%);

            pointer-events: none;
            user-select: none;
            touch-action: none;
            will-change: transform, opacity;
            transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.2s ease,
                box-shadow 0.2s ease;
        }

        #toast.show {
            transform: translate3d(calc(-50% + var(--toast-dx)), var(--toast-dy), 0) scale(1);
            opacity: var(--toast-drag-opacity);
            pointer-events: auto;
        }

        #toast.dragging {
            transition: none;
        }

        #toast.swipe-out {
            transition: transform 0.18s ease, opacity 0.16s ease;
        }

        #toast .toast-icon-box {
            width: 24px;
            height: 24px;
            flex: 0 0 24px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #0f172a;
            background: rgba(148, 163, 184, 0.18);
            border: 1px solid rgba(148, 163, 184, 0.32);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
        }

        #toast .toast-icon-box svg {
            width: 15px;
            height: 15px;
            display: block;
            fill: currentColor;
        }

        #toast .toast-text {
            min-width: 0;
            flex: 1 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.84rem;
            font-weight: 600;
            color: inherit;
            letter-spacing: -0.004em;
        }

        #toast .toast-content {
            min-width: 0;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        #toast .toast-meta {
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 0.66rem;
            line-height: 1;
        }

        #toast .toast-app {
            font-weight: 600;
            color: #475569;
            letter-spacing: 0.012em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 65%;
            text-transform: none;
        }

        #toast .toast-time {
            font-weight: 500;
            color: #334155;
            opacity: 0.86;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0;
        }

        .inline-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1em;
            height: 1em;
            vertical-align: -0.14em;
            margin-right: 0.32em;
        }

        .inline-icon svg {
            width: 100%;
            height: 100%;
            fill: currentColor;
        }

        @media (max-width: 480px) {
            #toast {
                top: calc(env(safe-area-inset-top, 0px) + 8px);
                font-size: 0.8rem;
                padding: 8px 10px 9px;
                min-height: 42px;
                border-radius: 14px;
                width: min(96vw, 480px);
                max-width: calc(100vw - 10px);
                white-space: nowrap;
            }

            #toast .toast-icon-box {
                width: 22px;
                height: 22px;
                flex: 0 0 22px;
            }

            #toast .toast-icon-box svg {
                width: 14px;
                height: 14px;
            }

            #toast .toast-meta {
                font-size: 0.62rem;
            }

            #toast .toast-text {
                font-size: 0.8rem;
            }
        }

        /* Member list - responsive & mobile friendly */
        .responsive-row {
            display: flex;
            gap: 12px;
            justify-content: space-between;
            align-items: flex-start;
            padding: 10px 12px;
            border-bottom: 1px solid var(--muted, #e6e6e6);
            background: var(--card-bg, #fff);
        }

        .member-info {
            flex: 1;
            min-width: 0;
            /* allows truncation */
        }

        .name-row {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }

        .name {
            font-weight: 700;
            font-size: 1.05rem;
            margin-bottom: 2px;
            white-space: normal;
            /* Allow wrapping */
            word-wrap: break-word;
            /* Break long words */
            line-height: 1.2;
        }

        .text-light.text-sm.small {
            font-weight: 400;
            font-size: .85rem;
            color: var(--muted, #6b6b6b);
        }

        /* =========================
   HOME ADDRESS – CLEAN CARD
   ========================= */
        .address-card {
            background: var(--bg);
            padding: 12px 14px;
            margin-bottom: 12px;

            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, 0.06);

            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        /* Title */
        .address-title {
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.2px;
            color: #555;
        }

        /* Address text */
        .address-text {
            font-size: 0.9rem;
            line-height: 1.45;
            color: #222;
            word-break: break-word;
        }

        /* Mobile refinement */
        @media (max-width: 640px) {
            .address-card {
                padding: 10px 12px;
                border-radius: 8px;
            }

            .address-title {
                font-size: 0.78rem;
            }

            .address-text {
                font-size: 0.88rem;
                line-height: 1.4;
            }
        }


        /* mobile-safe mobile contact line */
        .text-xs.text-light {
            margin-bottom: 6px;
            font-size: .78rem;
            color: var(--muted, #8a8a8a);
            white-space: normal;
            /* Allow wrapping */
            word-break: break-word;
        }

        /* badges & pills */
        .badge {
            display: inline-block;
            padding: 4px 6px;
            border-radius: 6px;
            font-size: 0.65rem;
        }

        .badge-rejected {
            color: var(--danger);
            border: 1px solid rgba(255, 0, 0, .08);
        }

        .info-pill {
            background: #f1f5f9;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            display: inline-block;
            margin-right: 4px;
            margin-top: 4px;
            color: var(--text-light);
            font-weight: 500;
            /* ADD THESE 2 LINES: */
            white-space: normal;
            word-break: break-word;
        }

        /* action buttons */
        .flex.gap-2 {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .action-btn {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            border: 1px solid transparent;
            background: transparent;
            cursor: pointer;
            transition: transform .12s ease, background .12s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .action-btn svg {
            width: 18px;
            height: 18px;
            display: block;
        }

        .action-btn:active {
            transform: translateY(1px);
        }

        /* delete variant (if your deleteBtn has a class) */
        .action-btn.btn-delete {
            background: var(--danger, #d9534f);
            color: #fff;
            border-color: transparent;
        }

        /* --- IMAGE DIALOG (New Professional View) --- */
        #modal-image-view {
            align-items: center !important;
            /* Force center on all devices */
            backdrop-filter: blur(8px);
            /* Blur background behind dialog */
            background: rgba(15, 23, 42, 0.75);
            /* Darker dim */
        }

        .image-dialog-card {
            background: #ffffff;
            width: 95%;
            max-width: 900px;
            height: 85vh;
            /* Fixed height for dialog feel */
            max-height: 800px;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            position: relative;
            animation: dialog-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes dialog-pop {
            0% {
                transform: scale(0.95);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Header */
        .img-dialog-header {
            padding: 14px 20px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            z-index: 10;
        }

        /* Dark Body for Image Contrast */
        .img-dialog-body {
            flex: 1;
            background: #0f172a;
            /* Dark Slate */
            background-image: radial-gradient(#1e293b 1px, transparent 1px);
            background-size: 20px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            /* Clips zoomed image */
            position: relative;
            user-select: none;
        }

        /* Footer Toolbar */
        .img-dialog-footer {
            padding: 16px 20px;
            border-top: 1px solid #e2e8f0;
            background: #fff;
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        /* Professional Tool Buttons */
        .btn-tool {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 10px;
            border: 1px solid #cbd5e1;
            background: white;
            color: #475569;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .btn-tool:hover {
            background: #f1f5f9;
            color: #0f172a;
            border-color: #94a3b8;
            transform: translateY(-1px);
        }

        .btn-tool:active {
            transform: translateY(0);
        }

        .btn-tool.primary {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .btn-tool.primary:hover {
            background: #1e293b;
        }

        .btn-tool svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }

        /* ================================
   MOBILE UI – CLEAN & PROFESSIONAL
   ================================ */
        @media (max-width: 640px) {

            /* Main card */
            .responsive-row {
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding: 10px 12px;
                margin-bottom: 8px;

                background: #fff;
                border: 1px solid rgba(0, 0, 0, 0.08);
                border-radius: 8px;
                /* reduced curve */
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
                /* flat shadow */
            }

            /* Member info container */
            .member-info {
                flex: 1;
                min-width: 0;
            }

            /* Name & age stacked */
            .name-row {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 2px;
            }

            .name {
                font-size: 1.05rem;
                font-weight: 700;
                line-height: 1.15;
                white-space: normal;
            }

            .text-sm.small {
                font-size: 0.78rem;
                opacity: 0.75;
                line-height: 1.2;
            }

            /* Mobile number */
            .text-xs.text-light {
                font-size: 0.75rem;
                line-height: 1.2;
                margin-top: 2px;
                color: #7a7a7a;
                white-space: normal;
            }

            /* Badge */
            .badge {
                margin-top: 2px;
                font-size: 0.6rem;
                padding: 3px 6px;
                border-radius: 6px;
            }

            /* Pills */
            .info-pill {
                font-size: 0.72rem;
                padding: 4px 8px;
                border-radius: 999px;
            }

            /* Work info wrap */
            .member-info>div:last-child {
                display: flex;
                gap: 6px;
                flex-wrap: wrap;
                margin-top: 6px;
            }

            /* ACTION BAR (bottom) */
            .actions {
                display: flex;
                justify-content: flex-end;
                gap: 8px;
                padding-top: 8px;
                margin-top: 6px;
                border-top: 1px dashed rgba(0, 0, 0, 0.08);
            }

            /* Buttons */
            .action-btn {
                width: 44px;
                height: 44px;
                border-radius: 10px;
                background: rgba(0, 0, 0, 0.04);
                border: 1px solid rgba(0, 0, 0, 0.06);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .action-btn svg {
                width: 20px;
                height: 20px;
            }

        }

        /* Edit address button */
        .edit-address-btn {
            gap: 6px;
            padding: 0 10px;
            width: auto;
        }

        /* Text next to icon */
        .edit-address-btn .edit-text {
            font-size: 0.75rem;
            font-weight: 500;
            white-space: nowrap;
        }

        /* =========================
   ACTION BUTTON – GLOBAL
   ========================= */
        .action-btn {
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.08);
        }

        .action-btn:hover {
            background: rgba(0, 0, 0, 0.07);
        }

        .action-btn:active {
            background: rgba(0, 0, 0, 0.1);
        }


        /* Mobile: keep it compact */
        @media (max-width:640px) {
            .edit-address-btn {
                height: 36px;
                padding: 0 8px;
                border-radius: 8px;
            }

            .edit-address-btn .edit-text {
                font-size: 0.72rem;
            }
        }

        /* --- PROFESSIONAL UPLOAD ZONE --- */
        .upload-zone {
            border: 2px dashed #cbd5e1;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: #f8fafc;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 160px;
        }

        .upload-zone:hover {
            border-color: var(--accent);
            background: #eff6ff;
        }

        .upload-icon {
            width: 40px;
            height: 40px;
            fill: #94a3b8;
            transition: fill 0.2s;
        }

        .upload-zone:hover .upload-icon {
            fill: var(--accent);
        }

        .upload-text {
            color: #64748b;
            font-size: 0.9rem;
            font-weight: 500;
        }

        /* --- CROPPER TOOLBAR --- */
        .crop-toolbar {
            display: flex;
            gap: 15px;
            /* Better spacing */
            justify-content: center;
            margin-top: 15px;
            background: #1e293b;
            padding: 10px 20px;
            border-radius: 50px;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            z-index: 100;
            /* Ensure visible */
        }

        .tool-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.1);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .tool-btn:hover {
            background: var(--accent);
            border-color: var(--accent);
            transform: translateY(-2px);
        }

        .tool-btn svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
            display: block;
            /* Fix rendering */
        }

        /* Hide default file input */
        .hidden-input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            overflow: hidden;
            z-index: -1;
        }

        /* Edit Preview Image */
        .current-img-preview {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            margin-bottom: 10px;
        }

        /* --- TOAST TYPE COLORS --- */
        #toast.success {
            background: rgba(236, 253, 245, 0.9);
            border-color: rgba(16, 185, 129, 0.36);
            color: #065f46;
        }

        #toast.error {
            background: rgba(254, 242, 242, 0.92);
            border-color: rgba(239, 68, 68, 0.34);
            color: #7f1d1d;
        }

        #toast.info {
            background: rgba(239, 246, 255, 0.92);
            border-color: rgba(59, 130, 246, 0.34);
            color: #1e3a8a;
        }

        #toast.warning {
            background: rgba(255, 247, 237, 0.92);
            border-color: rgba(245, 158, 11, 0.36);
            color: #92400e;
        }

        #toast.success .toast-icon-box {
            background: rgba(16, 185, 129, 0.18);
            border-color: rgba(16, 185, 129, 0.32);
            color: #047857;
        }

        #toast.error .toast-icon-box {
            background: rgba(239, 68, 68, 0.16);
            border-color: rgba(239, 68, 68, 0.3);
            color: #b91c1c;
        }

        #toast.info .toast-icon-box {
            background: rgba(59, 130, 246, 0.16);
            border-color: rgba(59, 130, 246, 0.3);
            color: #1d4ed8;
        }

        #toast.warning .toast-icon-box {
            background: rgba(245, 158, 11, 0.18);
            border-color: rgba(245, 158, 11, 0.32);
            color: #b45309;
        }

        /* --- BUSINESS DIRECTORY STYLES --- */
        /* --- MODERN BUSINESS CARD UI --- */
        .biz-card {
            background: #ffffff;
            border-radius: 16px;
            /* Softer corners */
            overflow: hidden;
            border: 1px solid #f1f5f9;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
            display: flex;
            flex-direction: column;
            position: relative;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            contain-intrinsic-size: 320px;
            content-visibility: auto;
        }

        /* Hover Effect (Desktop) */
        @media (hover: hover) {
            .biz-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.08);
                border-color: #e2e8f0;
            }
        }

        /* --- PROFESSIONAL DIFF GRID (Mobile Friendly) --- */
        .diff-wrapper {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px;
            margin-top: 10px;
        }

        .diff-header-main {
            font-size: 0.7rem;
            font-weight: 800;
            color: #64748b;
            text-transform: uppercase;
            margin-bottom: 12px;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .diff-grid {
            display: grid;
            grid-template-columns: 1fr;
            /* Mobile: Stacked */
            gap: 16px;
            position: relative;
        }

        /* Desktop: Side by Side */
        @media (min-width: 640px) {
            .diff-grid {
                grid-template-columns: 1fr 1fr;
                gap: 24px;
                align-items: stretch;
            }

            /* Vertical divider line for desktop */
            .diff-grid::after {
                content: '';
                position: absolute;
                top: 10px;
                bottom: 10px;
                left: 50%;
                width: 1px;
                background: #e2e8f0;
                transform: translateX(-50%);
            }
        }

        .diff-card {
            background: #ffffff;
            border-radius: 10px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .diff-card.old {
            border: 1px dashed #cbd5e1;
            background: #fdfdfd;
        }

        .diff-card.new {
            border: 1px solid #86efac;
            background: #f0fdf4;
            box-shadow: 0 4px 6px -2px rgba(22, 163, 74, 0.1);
        }

        .diff-badge {
            font-size: 0.65rem;
            font-weight: 800;
            padding: 4px 8px;
            border-radius: 6px;
            display: inline-block;
            margin-bottom: 10px;
            width: fit-content;
        }

        .diff-badge.old {
            background: #f1f5f9;
            color: #64748b;
            border: 1px solid #e2e8f0;
        }

        .diff-badge.new {
            background: #166534;
            color: #fff;
            border: 1px solid #166534;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        /* --- TEXT CLAMPING (See More/Less) --- */
        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .see-more-btn {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--accent);
            cursor: pointer;
            margin-top: 4px;
            display: inline-block;
        }

        .see-more-btn:hover {
            text-decoration: underline;
        }

        /* --- YOUTUBE STYLE SKELETON LOADER --- */
        .skeleton-card {
            background: white;
            border-radius: 16px;
            border: 1px solid #f1f5f9;
            padding: 0;
            overflow: hidden;
            height: 340px;
            display: flex;
            flex-direction: column;
        }

        .sk-img {
            width: 100%;
            height: 160px;
            /* Match biz-img-container aspect */
            background: #e2e8f0;
            animation: shimmer 1.5s infinite linear;
        }

        .sk-content {
            padding: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .sk-line {
            height: 14px;
            background: #e2e8f0;
            border-radius: 4px;
            animation: shimmer 1.5s infinite linear;
        }

        .sk-line.short {
            width: 40%;
        }

        .sk-line.medium {
            width: 70%;
        }

        .sk-line.long {
            width: 90%;
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
                background-color: #f1f5f9;
            }

            50% {
                background-color: #e2e8f0;
            }

            100% {
                background-position: 200% 0;
                background-color: #f1f5f9;
            }
        }

        /* Image Styling in Diff */
        .diff-img {
            width: 100%;
            height: 140px;
            /* Fixed height for consistency */
            object-fit: contain;
            /* Show full card */
            background: #0f172a;
            /* Dark background for contrast */
            border-radius: 6px;
            border: 1px solid #e2e8f0;
        }

        .diff-text-val {
            font-size: 0.95rem;
            font-weight: 600;
            color: #0f172a;
            word-break: break-word;
        }

        .diff-text-val.old-txt {
            text-decoration: line-through;
            color: #ef4444;
            opacity: 0.7;
            font-weight: 400;
        }

        /* --- COMPARISON UI (Diff View) --- */
        .diff-container {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            overflow: hidden;
            margin-top: 12px;
        }

        .diff-header {
            background: #f1f5f9;
            padding: 8px 12px;
            font-size: 0.75rem;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid #e2e8f0;
        }

        .diff-row {
            display: flex;
            flex-direction: column;
            padding: 12px;
            border-bottom: 1px dashed #e2e8f0;
            gap: 8px;
        }

        .diff-row:last-child {
            border-bottom: none;
        }

        .diff-label {
            font-size: 0.75rem;
            color: #94a3b8;
            font-weight: 600;
            text-transform: uppercase;
            min-width: 80px;
        }

        .diff-val-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
        }

        .val-box {
            flex: 1;
            min-width: 120px;
            padding: 8px;
            border-radius: 6px;
            font-size: 0.9rem;
        }

        .val-old {
            background: #fff1f2;
            border: 1px solid #fecaca;
            color: #991b1b;
            text-decoration: line-through;
            opacity: 0.8;
        }

        .val-new {
            background: #ecfdf5;
            border: 1px solid #6ee7b7;
            color: #065f46;
            font-weight: 600;
        }

        .diff-tag {
            font-size: 0.6rem;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 4px;
            margin-bottom: 4px;
            display: inline-block;
        }

        /* Style for the clone being dragged (Mobile Feel) */
        .sortable-fallback {
            opacity: 0.9 !important;
            background: #ffffff !important;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
            transform: scale(1.02);
            /* Slightly grow to indicate grab */
            border: 2px solid var(--accent);
            cursor: grabbing !important;
        }

        /* Hide original element while dragging */
        .sortable-ghost {
            opacity: 0.2;
            background: #e2e8f0;
            border: 2px dashed #cbd5e1;
        }

        @media (max-width: 640px) {
            .diff-val-group {
                flex-direction: column;
                /* ⬅️ STACK */
                gap: 8px;
            }

            .val-box {
                width: 100%;
            }

            .val-old {
                text-decoration: none;
                /* optional – cleaner */
                opacity: 1;
            }
        }

        /* Image Area */
        .biz-img-container {
            width: 100%;
            aspect-ratio: 1.75/1;
            /* Standard Business Card Ratio */
            background: #f8fafc;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid #f1f5f9;
            cursor: zoom-in;
        }

        .diff-image-group {
            display: flex;
            gap: 16px;
            align-items: center;
        }

        /* ===== MOBILE IMAGE FIX ===== */
        @media (max-width: 640px) {
            .diff-image-group {
                flex-direction: column;
                /* ⬅️ STACK */
                align-items: stretch;
            }

            .diff-image-group img {
                width: 100%;
                height: auto;
                max-height: 200px;
                object-fit: contain;
            }
        }


        /* Fix for Action Buttons in Lists */
        .card .btn-rounded {
            height: auto !important;
            /* Remove fixed 40px/38px height */
            min-height: 32px;
            /* Minimum touch target */
            padding: 6px 14px !important;
            /* Balanced padding */
            font-size: 0.8rem !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1.2;
            /* Fix vertical alignment */
        }

        .card .btn-sm {
            height: auto !important;
            padding: 6px 12px !important;
            font-size: 0.8rem !important;
            line-height: 1.2;
        }

        /* Ensure SVG icons inside these buttons are centered */
        .card .btn-rounded svg,
        .card .btn-sm svg {
            margin-right: 0;
            width: 18px;
            height: 18px;
        }

        .biz-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .biz-card:hover .biz-img {
            transform: scale(1.05);
        }

        /* Content Area */
        .biz-content {
            padding: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .biz-name {
            font-size: 1.05rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 6px;
            line-height: 1.3;
        }

        /* --- IMAGE LOADER (Youtube Style) --- */
        .img-loader {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
            background-size: 220% 100%;
            animation: shimmer 1.5s infinite linear;
            z-index: 1;
        }

        .biz-img-container.no-image {
            cursor: default;
        }

        .biz-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: relative;
            z-index: 2;
            opacity: 0;
            /* Start hidden */
            transition: opacity 0.3s ease-in;
        }

        /* Class added via JS when loaded */
        .biz-img.loaded {
            opacity: 1;
        }

        /* --- FIXED TEXT & SEE MORE STYLES --- */

        /* 1. Justify the Description Text */
        .biz-desc {
            font-size: 0.85rem;
            color: #64748b;
            line-height: 1.5em;
            /* 1.5 * 3 lines = 4.5em height */
            margin-bottom: 0;
            /* Remove margin so wrapper handles it */
            /* <--- REQUESTED FIX */
            white-space: pre-wrap;
            /* Preserves logic */
        }

        /* 2. Wrapper to hold the text and button together */
        .desc-wrapper {
            position: relative;
            margin-bottom: 12px;
        }

        /* 3. Collapsed State logic */
        .desc-wrapper.collapsed .biz-desc {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            max-height: 4.5em;
            /* Enforce 3 lines height */
        }

        /* 4. See More Button (The Magic Overlay) */
        .see-more-btn {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--accent);
            cursor: pointer;
            margin-top: 4px;
            display: block;
            text-align: right;
            /* Default: Right aligned below text */
        }

        /* 5. When collapsed, move button to Bottom-Right of the 3rd line */
        .desc-wrapper.collapsed .see-more-btn {
            position: absolute;
            bottom: 0;
            right: 0;
            background: rgb(255, 255, 255);
            /* Fade effect so it blends nicely over text */
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 25%);
            padding-left: 24px;
            /* Space for the fade */
            margin-top: 0;
        }

        /* --- MOBILE HEADER: WRAPPED TEXT (Clean & Professional) --- */
        @media (max-width: 767px) {
            .header-profile-card {
                /* Align items to top so the Logout button doesn't float in the middle if name is 2 lines */
                align-items: flex-start !important;
                padding: 1rem !important;
                /* Slightly more breathing room */
            }

            .profile-info {
                /* Ensure text takes available width but respects padding */
                width: 100%;
                padding-right: 12px;
                /* Gap between Name and Logout Button */
            }

            #page-title {
                /* Enable Wrapping */
                white-space: normal !important;
                word-wrap: break-word;
                overflow: visible;
                text-overflow: clip;

                /* Typography tweak for multi-line */
                line-height: 1.3;
                font-size: 1rem;
                /* Readable size */
                margin-bottom: 2px;
            }

            #user-role {
                /* Ensure role stays below the full name */
                margin-top: 4px;
            }

            .btn-logout-header {
                /* Keep button size consistent */
                margin-top: 2px;
                /* Optical alignment with the first line of text */
            }
        }

        /* --- FIX: Text Wrapping --- */
        .biz-desc,
        .text-wrap-fix {
            white-space: normal !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            word-break: break-word !important;
            line-height: 1.5;
        }

        /* Ensure modal content doesn't squeeze */
        .diff-content-box {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
        }

        /* Footer Area */
        .biz-footer {
            margin-top: auto;
            padding-top: 12px;
            border-top: 1px dashed #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .owner-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75rem;
            color: #94a3b8;
            font-weight: 500;
        }

        .contact-pill {
            background: #eff6ff;
            color: var(--accent);
            padding: 6px 12px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            gap: 5px;
            border: 1px solid transparent;
        }

        .contact-pill:hover {
            background: #dbeafe;
            border-color: #bfdbfe;
        }

        /* --- ACTION BUTTONS (SVG) --- */
        .biz-actions {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 8px;
            z-index: 10;
        }

        .icon-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #475569;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.2s;
        }

        .icon-btn:hover {
            transform: scale(1.1);
        }

        .icon-btn.edit:hover {
            color: var(--accent);
        }

        .icon-btn.delete:hover {
            color: #ef4444;
            background: #fef2f2;
        }

        /* --- DRAG HANDLE (Mobile Friendly) --- */
        .drag-handle-btn {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
            /* Shows hand cursor */
            z-index: 10;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            color: #64748b;
            touch-action: none;
            /* Crucial for mobile dragging */
        }

        .drag-handle-btn:active {
            cursor: grabbing;
            background: #fff;
            color: var(--primary);
        }

        /* Sortable Ghost State */
        .sortable-ghost {
            opacity: 0.5;
            background: #f1f5f9;
            border: 2px dashed var(--accent);
        }

        .biz-reorder-modal {
            width: min(880px, calc(100vw - 24px));
            height: min(88vh, 840px);
            max-height: 88vh;
            padding: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .biz-reorder-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
        }

        .biz-reorder-toolbar {
            padding: 10px 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            border-bottom: 1px solid #eef2f7;
            background: #ffffff;
        }

        .biz-reorder-search-block {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .biz-reorder-search-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .biz-reorder-search-row .input-pro {
            margin: 0;
        }

        .biz-reorder-search-btn {
            width: 42px;
            min-width: 42px;
            height: 42px;
            padding: 0;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .biz-reorder-search-btn.is-loading svg {
            animation: spin 0.9s linear infinite;
        }

        .biz-reorder-search-btn svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }

        .biz-reorder-search-status {
            min-height: 0;
            line-height: 1.2;
            color: #475569;
            font-weight: 600;
            padding: 0;
            border: none;
            border-radius: 0;
            background: transparent;
        }

        .biz-reorder-search-status:empty {
            display: none;
        }

        .biz-reorder-control-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px 10px;
            flex-wrap: wrap;
        }

        .biz-reorder-stats {
            display: flex;
            align-items: center;
            gap: 8px;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .biz-reorder-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 10px;
            border-radius: 999px;
            border: 1px solid #dbe7f4;
            background: #eff6ff;
            color: #1e3a8a;
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1;
        }

        .biz-reorder-chip strong {
            font-size: 0.78rem;
            color: #0f172a;
        }

        .biz-reorder-chip-muted {
            background: #f8fafc;
            color: #475569;
            border-color: #e2e8f0;
        }

        .biz-reorder-movebar {
            --biz-reorder-control-h: 42px;
            --biz-reorder-selected-w: 320px;
            --biz-reorder-input-w: 100px;
            --biz-reorder-move-btn-w: 96px;
            min-width: 0;
            display: flex;
            align-items: stretch;
            gap: 8px;
            flex-wrap: nowrap;
            justify-content: flex-start;
            width: 100%;
            max-width: 540px;
            flex: 1 1 540px;
        }

        .biz-reorder-selected {
            width: auto;
            min-width: 0;
            max-width: none;
            flex: 1 1 auto;
            height: var(--biz-reorder-control-h);
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0 11px;
            border: 1px solid #dbe7f4;
            border-radius: 10px;
            background: #f8fbff;
            font-weight: 700;
            color: #334155;
            line-height: 1.2;
            overflow: hidden;
        }

        .biz-reorder-selected-text {
            display: block;
            min-width: 0;
            flex: 1 1 auto;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
        }

        .biz-reorder-jump-controls {
            display: flex;
            align-items: stretch;
            gap: 8px;
            flex-wrap: nowrap;
            flex: 0 0 auto;
        }

        .biz-reorder-jump-controls .input-pro {
            margin: 0;
            width: var(--biz-reorder-input-w) !important;
            min-width: var(--biz-reorder-input-w);
            max-width: var(--biz-reorder-input-w);
            height: var(--biz-reorder-control-h) !important;
            box-sizing: border-box;
            padding: 0 10px;
            border-radius: 10px;
            line-height: 1.2;
        }

        .biz-reorder-jump-controls .btn {
            width: var(--biz-reorder-move-btn-w);
            min-width: var(--biz-reorder-move-btn-w);
            max-width: var(--biz-reorder-move-btn-w);
            height: var(--biz-reorder-control-h);
            padding: 0 12px;
            border-radius: 10px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .biz-reorder-list-wrap {
            padding: 8px 12px 14px;
            flex: 1;
            min-height: 0;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            background: #f8fafc;
        }

        .biz-reorder-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .biz-reorder-empty {
            text-align: center;
            color: #94a3b8;
            font-size: 0.86rem;
            border: 1px dashed #bfdbfe;
            border-radius: 12px;
            padding: 24px 18px;
            background: #fff;
        }

        .biz-reorder-empty-title {
            font-size: 0.96rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 6px;
        }

        .biz-reorder-empty-hint {
            font-size: 0.82rem;
            color: #64748b;
        }

        .biz-reorder-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 132px;
            border: 1px solid #dbeafe;
            border-radius: 12px;
            background: #ffffff;
            padding: 18px;
        }

        .biz-reorder-loading .loader-spinner {
            width: 30px;
            height: 30px;
            border-width: 3px;
        }

        .biz-reorder-loading-title {
            font-size: 0.92rem;
            font-weight: 700;
            color: #0f172a;
        }

        .biz-reorder-loading-hint {
            font-size: 0.8rem;
            color: #64748b;
        }

        .biz-reorder-row {
            display: grid;
            grid-template-columns: 36px 42px minmax(0, 1fr);
            gap: 8px;
            align-items: center;
            padding: 10px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
        }

        .biz-reorder-row:focus-visible {
            outline: 2px solid #93c5fd;
            outline-offset: 1px;
        }

        .biz-reorder-row.selected {
            border-color: #60a5fa;
            background: #eff6ff;
        }

        .biz-reorder-handle {
            width: 36px;
            height: 36px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            background: #f8fafc;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
            touch-action: none;
        }

        .biz-reorder-handle:active {
            cursor: grabbing;
        }

        .biz-reorder-rank {
            font-weight: 700;
            color: #0f172a;
            font-size: 0.85rem;
            justify-self: start;
        }

        .biz-reorder-body {
            min-width: 0;
        }

        .biz-reorder-name {
            font-size: 0.92rem;
            font-weight: 700;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .biz-reorder-meta {
            margin-top: 3px;
            font-size: 0.78rem;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .biz-reorder-foot {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
            border-top: 1px solid var(--border);
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06);
            position: sticky;
            bottom: 0;
            z-index: 6;
        }

        .biz-reorder-foot .btn {
            min-width: 0;
            width: 100%;
            height: 42px;
            border-radius: 10px;
            font-weight: 700;
        }

        #btn-biz-reorder-save[disabled] {
            background: #cbd5e1;
            color: #334155;
            border: 1px solid #94a3b8;
            opacity: 1;
        }

        .fam-reorder-modal {
            width: min(760px, calc(100vw - 24px));
            max-height: 86vh;
            padding: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .fam-reorder-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-bottom: 1px solid var(--border);
            background: #f8fafc;
        }

        .fam-reorder-list-wrap {
            padding: 10px 12px;
            overflow: auto;
            min-height: 220px;
            max-height: calc(86vh - 154px);
            -webkit-overflow-scrolling: touch;
        }

        .fam-reorder-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .fam-reorder-empty {
            text-align: center;
            color: #94a3b8;
            font-size: 0.86rem;
            border: 1px dashed #cbd5e1;
            border-radius: 10px;
            padding: 18px;
            background: #fff;
        }

        .fam-reorder-row {
            display: grid;
            grid-template-columns: 42px 24px minmax(0, 1fr);
            gap: 6px;
            align-items: center;
            padding: 10px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
        }

        .fam-reorder-row:focus-visible {
            outline: 2px solid #93c5fd;
            outline-offset: 1px;
        }

        .fam-reorder-handle {
            width: 36px;
            height: 36px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            background: #f8fafc;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
            touch-action: none;
        }

        .fam-reorder-handle:active {
            cursor: grabbing;
        }

        .fam-reorder-rank {
            font-weight: 700;
            color: #0f172a;
            font-size: 0.85rem;
            justify-self: start;
        }

        .fam-reorder-body {
            min-width: 0;
        }

        .fam-reorder-name-row {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .fam-reorder-name {
            font-size: 0.92rem;
            font-weight: 700;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fam-reorder-head-tag {
            flex-shrink: 0;
            font-size: 0.62rem;
            font-weight: 700;
            color: #166534;
            background: #dcfce7;
            border: 1px solid #86efac;
            border-radius: 999px;
            padding: 2px 7px;
            letter-spacing: 0.4px;
        }

        .fam-reorder-meta {
            margin-top: 3px;
            font-size: 0.78rem;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fam-reorder-foot {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 12px 14px;
            border-top: 1px solid var(--border);
            background: #fff;
            flex-wrap: wrap;
        }

        .fam-reorder-foot .btn {
            min-width: 132px;
        }

        /* Floating Add Button (FAB) */
        .fab-add {
            position: fixed !important;
            top: auto !important;
            left: auto !important;
            bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom));
            right: max(16px, env(safe-area-inset-right));
            width: 56px;
            height: 56px;
            background: var(--accent);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
            cursor: pointer;
            z-index: 120;
            transition: transform 0.2s;
            border: none;
        }

        .fab-add:active {
            transform: scale(0.9);
        }

        .fab-add svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        @media (min-width: 768px) {
            .fab-add {
                bottom: 24px;
                right: 24px;
            }
        }

        @media (max-width: 768px) {
            .biz-reorder-control-row {
                gap: 10px;
            }

            .biz-reorder-stats {
                justify-content: flex-start;
            }

            .biz-reorder-movebar {
                width: 100%;
                justify-content: flex-start;
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                max-width: none;
                flex: 1 1 auto;
            }

            .biz-reorder-jump-controls {
                width: auto;
                flex: 0 0 auto;
            }

            .biz-reorder-movebar {
                --biz-reorder-selected-w: 236px;
                --biz-reorder-input-w: 92px;
                --biz-reorder-move-btn-w: 88px;
            }

            .biz-reorder-foot {
                padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
                grid-template-columns: 1fr;
            }

            .biz-reorder-foot .btn {
                min-width: 0;
            }

            .fam-reorder-modal {
                width: calc(100vw - 16px);
                max-height: 86vh;
            }

            .fam-reorder-head {
                padding: 10px 12px;
            }

            .fam-reorder-list-wrap {
                padding: 8px 10px;
                max-height: calc(86vh - 174px);
            }

            .fam-reorder-foot {
                padding: 10px 12px;
                gap: 8px;
            }

            .fam-reorder-foot .btn {
                flex: 1 1 140px;
                min-width: 0;
            }
        }

        /* SVG Icon Button Utility */
        .icon-btn-svg {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s;
        }

        .icon-btn-svg:active {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(0.95);
        }

        .icon-btn-svg svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        /* --- HEADER PROFILE CARD (Centered with Spacing) --- */
        .header-profile-card {
            margin-bottom: 1rem;
            background: var(--surface);
            padding: 0.8rem 1rem;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            /* Vertically centers the text block and button */
            justify-content: space-between;
            gap: 15px;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--border);
        }

        .profile-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* Centers the block vertically */
            flex: 1;
            min-width: 0;
        }

        #page-title {
            font-size: 1rem;
            font-weight: 700;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
            color: var(--primary);
        }

        #user-role {
            font-size: 0.7rem;
            color: var(--text-light);
            margin: 0;
            margin-top: 4px;
            /* Added spacing above role */
            white-space: nowrap;
            font-weight: 500;
            line-height: 1;
        }

        .btn-logout-header {
            background: #fee2e2;
            color: #ef4444;
            border: 1px solid #fecaca;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 0.5rem 0.9rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            flex-shrink: 0;
            white-space: nowrap;
            transition: all 0.2s;
            height: fit-content;
        }

        .btn-logout-header svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
            transform: rotate(180deg);
        }

        /* --- MOBILE OPTIMIZATION --- */
        @media (max-width: 480px) {
            .header-profile-card {
                padding: 0.75rem;
            }

            .logout-text-label {
                display: none;
            }

            .btn-logout-header {
                padding: 0.6rem;
            }
        }

        /* --- REGISTER MEMBER CARD STYLE --- */
        .reg-member-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
            transition: transform 0.1s;
        }

        /* --- SUCCESS VIEW SPECIFIC --- */
        #reg-success-view {
            margin: auto;
            /* Forces centering within the flex container */
            text-align: center;
            max-width: 380px;
            width: 90%;
            background: #ffffff;
            padding: 3rem 2rem;
            border-radius: 24px;
            box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
        }

        /* --- CONTINUOUS SUCCESS ANIMATION --- */
        @keyframes pulse-green {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(22, 101, 52, 0.7);
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 15px rgba(22, 101, 52, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(22, 101, 52, 0);
            }
        }

        .success-circle {
            width: 80px;
            height: 80px;
            background: #dcfce7;
            color: #166534;
            border-radius: 50%;
            margin: 0 auto 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            /* Apply the continuous animation */
            animation: pulse-green 2s infinite;
        }

        .success-check {
            font-size: 40px;
            color: #166534;
            display: block;
        }

        #dob-warning {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #991b1b;
            padding: 1rem;
            border-radius: var(--radius);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* --- PERFORMANCE OPTIMIZATIONS --- */

        /* 1. Hardware Acceleration for Main Scroll Area */
        main,
        .modal-content {
            -webkit-overflow-scrolling: touch;
            /* Smooth scroll on iOS */
            will-change: scroll-position;
            /* Hint to browser */
        }

        /* 2. Skip rendering off-screen cards */
        .card:not(.dir-card),
        #admin-req-card-list>div {
            content-visibility: auto;
            /* The Magic Property */
            contain-intrinsic-size: 150px;
            /* Estimated height of a card to prevent scrollbar jumping */
        }

        #directory-grid>.dir-card {
            content-visibility: visible;
            contain-intrinsic-size: auto;
        }

        /* 3. Disable Heavy Blur on Low-End Devices */
        .bottom-nav,
        .modal-overlay,
        .icon-btn {
            /* REMOVE THIS: backdrop-filter: blur(12px); */
            /* USE THIS: High opacity background instead of blur for speed */
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        /* 4. Optimize Shadows */
        .card,
        .btn {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            /* Lighter shadow = faster render */
        }

        /* Stable scrolling for business/requests (prevents intrinsic-size jump) */
        #business-grid>.biz-card,
        #my-requests-list>div,
        #admin-req-card-list>div {
            content-visibility: visible !important;
            contain-intrinsic-size: auto !important;
            transform: none !important;
            will-change: auto !important;
        }