@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;700&display=swap');
        :root {
            --p:#1E3A8A; --p2:#2563EB; --a:#F59E0B; --w:#10B981;
            --bg:#F1F5F9; --danger:#EF4444; --card:#ffffff;
            --text:#1F2937; --text2:#374151; --text3:#6B7280; --text4:#9CA3AF;
            --sh:0 4px 15px rgba(0,0,0,0.08); --sh2:0 10px 30px rgba(0,0,0,0.12);
            --rad:18px; --rads:12px; --border:#E5E7EB; --border2:#F3F4F6;
            --input-bg:#F9FAFB; --card-gradient:linear-gradient(145deg,#f8f8f8,#e2e2e2);
        }
        *{box-sizing:border-box;margin:0;padding:0;}
        /* 🔒 FIXED: body used to hard-code direction:rtl, which — being a normal
           author rule on the <body> tag — always outranks the direction that a
           browser derives from the <html dir="..."> attribute i18n.js sets. So
           switching the language to English (dir="ltr") never actually flipped
           the writing direction, text-input caret, or list ordering; only the
           handful of elements with an explicit inline direction:ltr (email/OTP
           inputs) looked right. Direction now simply follows <html dir>: rtl by
           default (matches the Urdu-first initial paint, before i18n.js runs),
           ltr only when <html dir="ltr"> is set.
           ROLLBACK: put "direction:rtl;" back inline in the body rule below and
           delete the html[dir="ltr"] body rule. */
        body{font-family:'Noto Nastaliq Urdu',sans-serif;direction:rtl;background:var(--bg);color:var(--text);overflow-x:hidden;transition:background-color .25s ease,color .25s ease;}
        html[dir="ltr"] body{direction:ltr;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
        .page{display:none;min-height:100vh;}
        .page.active{display:block;animation:gwsPageIn .38s cubic-bezier(.22,.9,.32,1);}
        .tab-content{display:none;}
        .tab-content.active{display:block;animation:gwsTabIn .3s cubic-bezier(.22,.9,.32,1);}
        @keyframes gwsPageIn{
          from{opacity:0;transform:translateY(14px) scale(.985);}
          to{opacity:1;transform:translateY(0) scale(1);}
        }
        @keyframes gwsTabIn{
          from{opacity:0;transform:translateY(8px);}
          to{opacity:1;transform:translateY(0);}
        }
        @keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
        @keyframes livePulse{0%,100%{box-shadow:0 0 0 2px rgba(16,185,129,.3);}50%{box-shadow:0 0 0 5px rgba(16,185,129,.0);}}

        /* HEADER */
        .hdr{color:white;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;}
        .hdr-title{font-weight:bold;font-size:17px;}
        .hdr-btn{background:rgba(255,255,255,0.18);border:none;color:white;font-size:16px;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
        .hdr.dark{background:linear-gradient(160deg,#0f172a,#1e3a8a);}

        /* BOTTOM NAV */
        .bottom-nav{position:fixed;bottom:0;left:0;right:0;background:white;display:flex;border-top:1px solid var(--border);z-index:200;box-shadow:0 -4px 15px rgba(0,0,0,.08);}
        .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 5px 14px;cursor:pointer;transition:.25s cubic-bezier(.22,.9,.32,1);border:none;background:none;font-family:inherit;}
        .nav-item i{font-size:22px;color:#4B5563;margin-bottom:4px;transition:.25s cubic-bezier(.22,.9,.32,1);}
        .nav-item span{font-size:11px;color:#374151;font-weight:bold;transition:.25s;}
        .nav-item.active i,.nav-item.active span{color:var(--p);}
        .nav-item.active{background:#EFF6FF;}
        .nav-item.active i{transform:translateY(-2px) scale(1.08);}
        .nav-item:active{transform:scale(.93);}

        /* CARDS */
        /* 🔒 FIXED: .card/.job-card/.svc-box/.bid-popup/.stat-card/.wrating-card each
           hardcoded their own slightly different border-radius (20px/14px/14px/16px/
           16px/14px) even though --rad already existed and was already used by the
           promo/ref/loyalty/dash-earn banner cards. That mismatch across otherwise
           visually-related containers is part of what reads as an inconsistent,
           "unorganized" layout. All now use the same --rad token; nothing else
           (colors, shadows, spacing) changed. ROLLBACK: restore the pixel values
           named above on each of those six rules. */
        .card{background:var(--card-gradient);border-radius:var(--rad);padding:16px;margin:12px;box-shadow:8px 8px 20px rgba(0,0,0,0.12),-6px -6px 16px rgba(255,255,255,0.9),inset 1px 1px 3px rgba(255,255,255,0.6);}

        /* INPUTS */
        .inp{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--rads);font-family:inherit;font-size:14px;background:var(--input-bg);transition:.3s;color:var(--text);}
        .inp:focus{outline:none;border-color:var(--p2);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.1);}
        .inp:disabled{background:#E5E7EB;cursor:not-allowed;color:#6B7280;}
        .inp-group{margin-bottom:14px;}
        .inp-label{font-size:13px;font-weight:bold;color:var(--text2);margin-bottom:6px;display:block;}

        /* BUTTONS */
        .btn{width:100%;padding:15px;border:none;border-radius:var(--rads);font-family:inherit;font-size:15px;font-weight:bold;cursor:pointer;transition:all .3s;display:block;text-align:center;}
        .btn:active:not(:disabled){transform:scale(.97);}
        .btn:disabled{opacity:.6;cursor:not-allowed;}
        .btn-primary{background:var(--p);color:white;}
        .btn-success{background:var(--w);color:white;}
        .btn-danger{background:var(--danger);color:white;}
        .btn-accent{background:var(--a);color:var(--p);}
        .btn-sm{padding:9px 16px;font-size:13px;width:auto;display:inline-block;border-radius:10px;}

        /* BADGES */
        .badge{padding:5px 10px;border-radius:20px;font-size:11px;font-weight:bold;color:white;display:inline-block;}

        /* JOB CARDS */
        .job-card{background:white;border-right:5px solid var(--a);padding:16px;border-radius:var(--rad);margin-bottom:12px;box-shadow:var(--sh);cursor:pointer;transition:.2s;}
        .job-card:hover{box-shadow:var(--sh2);transform:translateY(-1px);}
        .job-card.green{border-right-color:var(--w);background:#F0FDF4;}

        /* SERVICE GRID */
        .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
        /* 🏠 customer home — the bell at the top, a card per service, the community card, line icons in the bottom bar */
        .gws-hdr-btn{position:relative;flex-shrink:0;width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
        .gws-hdr-btn:active{transform:scale(.94);}
        .gws-hdr-btn .bell-badge{top:-6px;right:-6px;border-color:#1E40AF;}
        .gsv-sec{margin:16px 12px 4px;}
        .gsv-head{display:flex;flex-direction:column;gap:2px;margin:0 4px 10px;}
        .gsv-head span{font-size:17px;font-weight:800;color:var(--text);}
        .gsv-head small{font-size:12px;color:var(--text3);}
        .gsv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
        .gsv-card{position:relative;overflow:hidden;background:var(--card);border-radius:22px;padding:14px 14px 0;min-height:158px;cursor:pointer;border:1px solid rgba(15,23,42,.06);box-shadow:0 8px 22px rgba(15,23,42,.08);transition:transform .18s ease,box-shadow .18s ease;text-align:start;}
        .gsv-card:active{transform:scale(.97);box-shadow:0 4px 12px rgba(15,23,42,.08);}
        .gsv-name{position:relative;z-index:1;font-size:16px;font-weight:800;color:var(--text);line-height:1.35;}
        .gsv-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;}
        .gsv-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#2563EB;color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;}
        .gsv-meta{position:relative;z-index:1;font-size:11px;color:var(--text3);margin-top:5px;}
        .gsv-blob{position:absolute;bottom:-28px;inset-inline-end:-28px;width:116px;height:116px;border-radius:50%;opacity:.12;}
        .gsv-art{position:absolute;bottom:2px;inset-inline-end:2px;width:96px;height:96px;}
        .gsv-art svg{display:block;width:100%;height:100%;}
        .gsv-empty{grid-column:1/-1;text-align:center;color:var(--text3);font-size:13px;padding:24px 0;}
        .gsv-search{display:flex;align-items:center;gap:8px;background:var(--input-bg);border:1px solid var(--border);border-radius:14px;padding:10px 14px;margin-bottom:12px;}
        .gsv-search i{color:var(--text3);font-size:14px;}
        .gsv-search input{border:none;background:transparent;outline:none;font-family:inherit;font-size:14px;width:100%;color:var(--text);}
        /* the home's big cards: services · monthly packages · renovation · community */
        .ghm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 12px 16px;}
        .ghm-card{position:relative;overflow:hidden;background:var(--card);border-radius:24px;padding:16px 16px 0;min-height:198px;cursor:pointer;border:1px solid rgba(15,23,42,.06);box-shadow:0 10px 26px rgba(15,23,42,.08);text-align:start;transition:transform .18s ease;}
        .ghm-card:active{transform:scale(.97);}
        .ghm-t{position:relative;z-index:1;font-size:18px;font-weight:800;line-height:1.3;color:var(--text);}
        .ghm-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
        .ghm-art{position:absolute;bottom:4px;inset-inline-end:4px;width:118px;height:118px;}
        .ghm-art svg{display:block;width:100%;height:100%;}
        .ghm-wide{grid-column:1/-1;min-height:150px;}
        .ghm-wide .ghm-art{width:132px;height:132px;bottom:6px;}
        /* 📋 bookings: a card per order status */
        .gbk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px;}
        .gbk-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border:2px solid transparent;border-radius:14px;background:var(--bk-bg);color:var(--bk-fg);cursor:pointer;font-family:inherit;transition:transform .15s ease;}
        .gbk-card:active{transform:scale(.95);}
        .gbk-card.on{border-color:var(--bk-fg);box-shadow:0 6px 16px rgba(15,23,42,.14);}
        .gbk-n{font-size:20px;font-weight:800;line-height:1.15;}
        .gbk-l{font-size:11px;font-weight:700;line-height:1.3;text-align:center;}
        .nav-svg{width:23px;height:23px;margin-bottom:4px;color:#4B5563;transition:.25s cubic-bezier(.22,.9,.32,1);}
        .nav-item.active .nav-svg{color:var(--p);transform:translateY(-2px) scale(1.08);}
        .svc-box{background:white;border-radius:var(--rad);padding:16px 8px;text-align:center;box-shadow:var(--sh);cursor:pointer;transition:.25s;border:1.5px solid transparent;}
        .svc-box:hover{border-color:var(--p2);transform:translateY(-2px);}
        .svc-box:active{transform:scale(.95);}
        .svc-box i{font-size:28px;display:block;margin-bottom:8px;}
        .svc-box .svc-name{font-size:12px;font-weight:bold;color:var(--text);}

        /* CHIPS */
        .chip-wrap{display:flex;flex-wrap:wrap;gap:8px;}
        .chip{padding:9px 15px;background:#F3F4F6;border-radius:20px;font-size:13px;cursor:pointer;font-weight:bold;transition:.2s;border:1.5px solid transparent;}
        .chip.on{background:var(--p);color:white;border-color:var(--p);}

        /* PROFILE PHOTO */
        .prof-photo-wrap{position:relative;width:90px;height:90px;margin:0 auto;}
        .prof-photo{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid var(--a);background:#fff;}
        .prof-photo-edit{position:absolute;bottom:0;right:0;background:var(--a);color:var(--p);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;border:2px solid white;}

        /* UPLOAD BOX */
        .upload-box{border:2px dashed #9CA3AF;text-align:center;padding:18px;border-radius:14px;cursor:pointer;background:#F9FAFB;transition:.3s;font-size:13px;}
        .upload-box:hover{border-color:var(--p2);background:#EFF6FF;}
        .upload-box i{font-size:28px;color:var(--p);display:block;margin-bottom:8px;}

        /* MODAL */
        #modal{display:none;position:fixed;z-index:9999;inset:0;background:rgba(0,0,0,.8);align-items:flex-end;justify-content:center;backdrop-filter:blur(3px);animation:gwsFadeBg .25s ease;}
        #modal.center{align-items:center;}
        .modal-box{background:white;border-radius:24px 24px 0 0;width:100%;max-height:92vh;overflow-y:auto;padding:25px 20px 35px;position:relative;animation:gwsModalUp .32s cubic-bezier(.22,.9,.32,1);}
        #modal.center .modal-box{border-radius:20px;max-width:420px;animation:gwsModalPop .28s cubic-bezier(.22,.9,.32,1);}
        @keyframes gwsFadeBg{from{opacity:0;}to{opacity:1;}}
        @keyframes gwsModalUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
        @keyframes gwsModalPop{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
        .modal-close{position:absolute;top:15px;left:18px;font-size:26px;cursor:pointer;color:#9CA3AF;background:none;border:none;}

        /* NOTIFICATION */
        #notif-box{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#1F2937;color:white;padding:14px 22px;border-radius:14px;z-index:99999;display:none;text-align:center;min-width:260px;max-width:90%;font-weight:bold;box-shadow:0 10px 25px rgba(0,0,0,.25);border-bottom:4px solid var(--w);}
        #bid-stack{position:fixed;top:75px;left:50%;transform:translateX(-50%);z-index:10000;width:92%;max-width:400px;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
        .bid-popup{background:white;padding:18px;border-radius:var(--rad);box-shadow:var(--sh2);border-right:5px solid var(--w);pointer-events:auto;}

        /* STATUS TABS */
        .status-tabs{display:flex;gap:8px;overflow-x:auto;padding:15px 15px 5px;scrollbar-width:none;}
        .status-tabs::-webkit-scrollbar{display:none;}
        .stab{padding:9px 16px;border-radius:20px;border:1.5px solid var(--border);background:white;font-size:12px;font-weight:bold;cursor:pointer;white-space:nowrap;transition:.2s;font-family:inherit;color:#6B7280;}
        .stab.on{background:var(--p);color:white;border-color:var(--p);}

        /* PROMO CARD */
        .promo-card{background:linear-gradient(135deg,var(--p),var(--p2));color:white;border-radius:var(--rad);padding:20px;margin:0 15px 15px;position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(30,58,138,.3);}
        .promo-card::after{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:rgba(255,255,255,.08);border-radius:50%;}
        .promo-card::before{content:'';position:absolute;bottom:-20px;left:-20px;width:80px;height:80px;background:rgba(255,255,255,.06);border-radius:50%;}

        /* GREETING */
        .greet-card{background:linear-gradient(135deg,var(--p),#3B82F6);color:white;padding:22px 20px 18px;}
        .search-bar{display:flex;align-items:center;background:rgba(255,255,255,.15);border-radius:12px;padding:12px 15px;gap:10px;margin-top:15px;border:1px solid rgba(255,255,255,.25);}
        .search-bar input{background:none;border:none;color:white;font-family:inherit;font-size:14px;flex:1;outline:none;}
        .search-bar input::placeholder{color:rgba(255,255,255,.7);}

        /* PROFILE PAGE */
        .prof-hdr{background:linear-gradient(135deg,var(--p),#2563EB);padding:30px 20px 35px;text-align:center;color:white;}
        .prof-info-card{background:white;border-radius:20px 20px 0 0;margin-top:-20px;padding:22px 20px;}
        .prof-menu-item{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border2);cursor:pointer;}
        .prof-menu-item:last-child{border-bottom:none;}
        .prof-menu-left{display:flex;align-items:center;gap:14px;}
        .prof-menu-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;}
        .toggle-sw{width:44px;height:24px;background:#E5E7EB;border-radius:12px;position:relative;cursor:pointer;transition:.3s;flex-shrink:0;}
        .toggle-sw.on{background:var(--w);}
        .toggle-sw::after{content:'';width:18px;height:18px;background:white;border-radius:50%;position:absolute;top:3px;left:3px;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
        .toggle-sw.on::after{left:calc(100% - 21px);}

        /* ADMIN */
        .admin-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px;}
        .stat-card{background:linear-gradient(145deg,#f8f8f8,#e2e2e2);border-radius:var(--rad);padding:16px;box-shadow:6px 6px 14px rgba(0,0,0,0.1),-4px -4px 10px rgba(255,255,255,0.9);text-align:center;}
        .stat-num{font-size:28px;font-weight:bold;color:var(--p);}
        .stat-lbl{font-size:12px;color:#6B7280;margin-top:4px;}
        .admin-tabs{display:flex;gap:8px;overflow-x:auto;padding:10px 15px;scrollbar-width:none;}
        .admin-tabs::-webkit-scrollbar{display:none;}

        /* ADMIN WORKER RATING CARDS */
        .wrating-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
        .wrating-card{background:white;border-radius:var(--rad);padding:14px 12px;box-shadow:var(--sh);border:1.5px solid var(--border2);cursor:pointer;transition:.2s;text-align:center;}
        .wrating-card:hover{border-color:var(--p2);transform:translateY(-2px);}
        .wrating-card.top{border-color:#F59E0B;background:#FFFBEB;}
        .wrating-card.low{border-color:#EF4444;background:#FEF2F2;}
        .wrating-card img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--a);margin-bottom:8px;}
        .wrating-card .wrc-name{font-size:13px;font-weight:bold;color:var(--text);margin-bottom:4px;}
        .wrating-card .wrc-svc{font-size:10px;color:#9CA3AF;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .wrating-card .wrc-stars{color:#F59E0B;font-size:15px;letter-spacing:1px;margin-bottom:2px;}
        .wrating-card .wrc-meta{font-size:11px;color:#6B7280;}
        .wrating-card .wrc-no-rating{font-size:12px;color:#9CA3AF;margin-top:4px;}
        .review-item{padding:14px 0;border-bottom:1px solid var(--border2);}
        .review-item:last-child{border-bottom:none;}
        .review-stars{color:#F59E0B;font-size:14px;letter-spacing:1px;}
        .review-text{font-size:13px;color:var(--text2);margin:6px 0 4px;font-style:italic;}
        .review-meta{font-size:11px;color:#9CA3AF;}
        .atab{padding:9px 16px;border-radius:20px;border:1.5px solid var(--border);background:white;font-size:12px;font-weight:bold;cursor:pointer;white-space:nowrap;transition:.2s;font-family:inherit;color:#6B7280;}
        .atab.on{background:#0F172A;color:white;border-color:#0F172A;}
        .admin-table{width:100%;border-collapse:collapse;font-size:13px;text-align:right;}
        .admin-table th{background:#F8FAFC;color:var(--text2);padding:12px 10px;border-bottom:2px solid var(--border);font-weight:bold;}
        .admin-table td{border-bottom:1px solid var(--border2);padding:11px 10px;}
        .admin-table tr:hover td{background:#F9FAFB;}

        /* RADIO */
        .radio-group{display:flex;justify-content:space-around;background:#F3F4F6;padding:14px;border-radius:12px;margin:10px 0;}
        .radio-group label{cursor:pointer;font-weight:bold;color:var(--p);display:flex;align-items:center;gap:8px;font-size:14px;}

        /* CHAT */
        .chat-wrap{height:260px;overflow-y:auto;background:#F8FAFC;border-radius:12px;padding:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px;}
        .chat-msg{max-width:80%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5;}
        .chat-msg.me{background:var(--p);color:white;align-self:flex-end;border-bottom-right-radius:4px;}
        .chat-msg.them{background:white;color:var(--text);align-self:flex-start;border-bottom-left-radius:4px;box-shadow:var(--sh);}
        .chat-row{display:flex;gap:8px;}
        .chat-row input{flex:1;padding:12px;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:14px;outline:none;}
        .chat-row button{padding:12px 18px;background:var(--p);color:white;border:none;border-radius:10px;cursor:pointer;font-size:16px;}

        /* MISC */
        .sec-title{font-size:15px;font-weight:bold;color:var(--text);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
        .empty-state{text-align:center;padding:40px 20px;color:#9CA3AF;}
        .empty-state i{font-size:48px;margin-bottom:15px;display:block;}
        .media-prev{width:100%;max-height:180px;object-fit:cover;border-radius:12px;margin-top:10px;display:block;}
        .loc-btn{position:absolute;left:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--p2);font-size:20px;cursor:pointer;}
        .qr-box{text-align:center;padding:20px;background:#F8FAFC;border-radius:14px;border:2px dashed var(--border);}
        .call-link{display:block;background:var(--w);color:white;padding:13px;border-radius:12px;text-align:center;text-decoration:none;font-weight:bold;margin-top:10px;box-shadow:0 4px 12px rgba(16,185,129,.3);}
        .pb-80{padding-bottom:85px;}
        .spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px;}
        @keyframes spin{to{transform:rotate(360deg);}}

        /* NOTIFICATION BELL */
        .bell-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;}
        .bell-badge{position:absolute;top:-5px;right:-6px;background:var(--danger);color:white;font-size:9px;font-weight:bold;min-width:17px;height:17px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 3px;border:2px solid white;line-height:1;}

        /* NOTIFICATION PANEL */
        #notif-panel{position:fixed;inset:0;z-index:9998;display:none;pointer-events:none;}
        #notif-panel.open{display:block;pointer-events:auto;}
        #notif-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);}
        #notif-drawer{position:absolute;bottom:0;left:0;right:0;background:white;border-radius:24px 24px 0 0;max-height:82vh;overflow-y:auto;padding-bottom:90px;animation:fadeUp .3s ease;}
        #notif-drawer-hdr{padding:18px 20px 14px;border-bottom:1px solid var(--border2);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:white;z-index:1;}
        .notif-item{padding:14px 20px;border-bottom:1px solid #F9FAFB;display:flex;gap:12px;align-items:flex-start;cursor:pointer;transition:.2s;}
        .notif-item:active{background:#F8FAFC;}
        .notif-item.unread{background:#EFF6FF;}
        .notif-icon-wrap{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
        .notif-text-wrap{flex:1;min-width:0;}
        .notif-title{font-size:13px;font-weight:bold;color:var(--text);margin-bottom:3px;}
        .notif-body{font-size:12px;color:#6B7280;line-height:1.5;}
        .notif-time{font-size:11px;color:#9CA3AF;margin-top:4px;}
        .notif-dot{width:8px;height:8px;border-radius:50%;background:var(--p2);margin-top:6px;flex-shrink:0;}

        /* REFERRAL */
        .ref-card{background:linear-gradient(135deg,#1E3A8A,#2563EB);border-radius:var(--rad);padding:20px;margin:0 15px 14px;color:white;box-shadow:0 6px 20px rgba(37,99,235,.25);}
        .ref-code-box{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border-radius:12px;padding:12px 16px;margin:12px 0;}
        .ref-code-txt{font-size:20px;font-weight:bold;letter-spacing:3px;flex:1;font-family:monospace;}
        .ref-copy-btn{background:rgba(255,255,255,.25);border:none;color:white;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;transition:.2s;}
        .ref-copy-btn:active{transform:scale(.93);}
        .ref-share-row{display:flex;gap:8px;margin-top:10px;}
        .ref-share-btn{flex:1;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:10px;color:white;padding:10px;font-size:12px;cursor:pointer;text-align:center;transition:.2s;}
        .ref-share-btn:active{background:rgba(255,255,255,.3);}
        .ref-stat-row{display:flex;gap:10px;margin-top:12px;}
        .ref-stat{flex:1;background:rgba(255,255,255,.12);border-radius:10px;padding:10px;text-align:center;}
        .ref-stat-val{font-size:20px;font-weight:bold;}
        .ref-stat-lbl{font-size:10px;opacity:.8;margin-top:2px;}
        .ref-input-toggle{font-size:12px;color:var(--p2);cursor:pointer;text-decoration:underline;display:block;text-align:center;margin-top:6px;}

        /* LOYALTY */
        .loyalty-card{border-radius:var(--rad);padding:18px 20px;margin:0 12px 14px;color:white;box-shadow:0 6px 20px rgba(0,0,0,.15);}
        .loyalty-tier-vip{background:linear-gradient(135deg,#2563EB,#1D4ED8);}
        .loyalty-tier-gold{background:linear-gradient(135deg,#D97706,#B45309);}
        .loyalty-tier-platinum{background:linear-gradient(135deg,#7C3AED,#5B21B6);}
        .loyalty-prog-wrap{height:8px;background:rgba(255,255,255,.3);border-radius:4px;margin:10px 0 6px;overflow:hidden;}
        .loyalty-prog-fill{height:100%;background:rgba(255,255,255,.9);border-radius:4px;transition:width .5s ease;}
        .vip-home-banner{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);border:1.5px solid #BFDBFE;border-radius:14px;padding:12px 16px;margin:12px 15px 0;}
        .vip-home-banner.gold{background:linear-gradient(135deg,#FFFBEB,#FEF3C7);border-color:#FDE68A;}
        .vip-home-banner.plat{background:linear-gradient(135deg,#F5F3FF,#EDE9FE);border-color:#DDD6FE;}
        .vip-crown{font-size:28px;flex-shrink:0;}
        .vip-tier-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:bold;background:var(--p);color:white;margin-bottom:4px;}
        .vip-tier-badge.gold{background:#D97706;}
        .vip-tier-badge.plat{background:#7C3AED;}

        /* EARNINGS */
        .earn-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
        .earn-stat{background:#F0FDF4;border-radius:14px;padding:14px 10px;text-align:center;border:1px solid #BBF7D0;}
        .earn-stat.accent{background:#FFFBEB;border-color:#FDE68A;}
        .earn-stat.blue{background:#EFF6FF;border-color:#BFDBFE;}
        .earn-stat-val{font-size:17px;font-weight:bold;color:var(--text);margin-bottom:3px;}
        .earn-stat-lbl{font-size:10px;color:#9CA3AF;}
        .earn-month-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:white;border-radius:12px;margin-bottom:8px;box-shadow:var(--sh);cursor:pointer;transition:.2s;border:1.5px solid transparent;}
        .earn-month-row:hover{border-color:var(--p2);}
        .earn-month-row.active{border-color:var(--p);background:#EFF6FF;}
        .earn-bar-wrap{height:6px;background:#E5E7EB;border-radius:3px;flex:1;margin:0 12px;overflow:hidden;}
        .earn-bar-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--p2));border-radius:3px;transition:width .4s ease;}
        .earn-job-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border2);font-size:13px;}
        .earn-job-row:last-child{border-bottom:none;}
        .dash-earn-card{background:linear-gradient(135deg,#10B981,#059669);border-radius:var(--rad);padding:18px 20px;margin:0 15px 15px;color:white;box-shadow:0 6px 18px rgba(16,185,129,.3);cursor:pointer;}
        .dash-earn-row{display:flex;justify-content:space-between;align-items:center;}
        .dash-earn-big{font-size:26px;font-weight:bold;}
        .dash-earn-sub{font-size:12px;opacity:.8;margin-top:2px;}

        /* STAR RATING */
        .stars-row{display:flex;gap:6px;justify-content:center;margin:16px 0 8px;direction:ltr;}
        .star-btn{font-size:36px;background:none;border:none;cursor:pointer;color:#E5E7EB;transition:color .15s,transform .15s;line-height:1;padding:0;}
        .star-btn.on{color:#F59E0B;}
        .star-btn:active{transform:scale(.88);}
        .rating-chip{display:inline-flex;align-items:center;gap:4px;background:#FFF7ED;border:1px solid #FED7AA;color:#92400E;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:bold;}
        .rating-chip i{color:#F59E0B;}
        .worker-rating-bar{display:flex;align-items:center;gap:8px;margin-top:6px;}
        .worker-rating-bar .stars-mini{color:#F59E0B;font-size:13px;letter-spacing:1px;}
        .worker-rating-bar .rating-val{font-size:13px;font-weight:bold;color:var(--text);}
        .worker-rating-bar .rating-cnt{font-size:11px;color:#9CA3AF;}

        /* LIVE TRACKING PAGE */
        #live_tracking_page { position:fixed;top:0;left:0;right:0;bottom:0;z-index:500; }
        #tracking_info_panel { transition: transform .3s cubic-bezier(.4,0,.2,1); }

        /* CHAT ENHANCEMENTS */
        .chat-wrap { max-height:340px;overflow-y:auto;padding:10px;background:#F8FAFC;border-radius:12px;margin-bottom:10px;scroll-behavior:smooth; }
        .chat-msg { padding:10px 14px;border-radius:16px;max-width:78%;margin-bottom:8px;font-size:14px;line-height:1.5;word-break:break-word; }
        .chat-msg.me { background:var(--p);color:white;margin-right:auto;border-bottom-right-radius:4px; }
        .chat-msg.them { background:white;color:var(--text);margin-left:auto;border-bottom-left-radius:4px;box-shadow:var(--sh); }
        .chat-row { display:flex;gap:6px;align-items:center; }
        .chat-row input { flex:1;padding:11px 14px;border:1.5px solid var(--border);border-radius:22px;font-family:inherit;font-size:14px;outline:none;background:#F9FAFB; }
        .chat-row input:focus { border-color:var(--p2); }

        /* WORKER BELL BADGE */
        #w-bell-badge { position:absolute;top:-4px;left:-4px;min-width:18px;height:18px;background:#EF4444;border-radius:50%;font-size:10px;font-weight:bold;color:white;display:flex;align-items:center;justify-content:center;border:2px solid rgba(16,185,129,.8);padding:0 3px; }

        /* COMMUNITY */
        /* 🔒 FIXED (2nd pass): the ⋮ button's wrapper is always the LAST item in its
           flex row, and the last item in a flex row always sits at the row's
           inline-end edge — physically the RIGHT edge of the screen in English
           (LTR), the LEFT edge in Urdu (RTL). The menu needs to hang off that same
           edge and grow back toward the row's inline-start (inward, over the card)
           in BOTH languages, which means it must always be pinned with
           inset-inline-end:0 — never inset-inline-start.
           The previous attempt here used inset-inline-start:0, which happens to
           equal physical left:0 in LTR (no change from the original bug — still
           grew off the right edge in English) and flips to physical right:0 in RTL
           (a regression: it used to work in Urdu with plain left:0, and swapping to
           inset-inline-start actually anchored the wrong side there too). Matching
           .comm-reaction-picker below (which was already inset-inline-end and
           correct) fixes both languages with one rule.
           ROLLBACK: change inset-inline-end back to plain left (and it will only be
           correct in Urdu/RTL again, broken in English/LTR — the original bug). */
        .comm-post-menu {
          position:absolute;
          top:100%;inset-inline-end:0;
          background:white;
          border:1px solid var(--border);
          border-radius:14px;
          box-shadow:0 8px 24px rgba(0,0,0,.12);
          z-index:500;
          min-width:180px;
          overflow:hidden;
          animation:fadeUp .15s ease;
        }
        .comm-reaction-picker {
          position:absolute;
          bottom:100%;inset-inline-end:0;
          margin-bottom:8px;
          background:white;
          border:1px solid var(--border);
          border-radius:30px;
          padding:6px 8px;
          display:none;
          gap:5px;
          box-shadow:0 8px 24px rgba(0,0,0,.15);
          z-index:500;
          opacity:0;
          transform:translateY(8px) scale(.85);
          transform-origin:bottom right;
          transition:opacity .18s ease, transform .18s ease;
        }
        .comm-reaction-picker.open {
          opacity:1;
          transform:translateY(0) scale(1);
        }
        .comm-reaction-picker button { position:relative; }
        .comm-menu-item {
          padding:11px 16px;
          font-size:13px;
          cursor:pointer;
          display:flex;
          align-items:center;
          gap:10px;
          color:var(--text2);
          transition:background .1s;
          border-bottom:1px solid #F9FAFB;
          font-family:inherit;
        }
        .comm-menu-item:last-child { border-bottom:none; }
        .comm-menu-item:active { background:#F3F4F6; }
        .comm-hashtag-btn {
          padding:6px 14px;
          border-radius:20px;
          border:none;
          background:#F3F4F6;
          color:var(--text2);
          font-size:12px;
          cursor:pointer;
          font-family:inherit;
          font-weight:bold;
          white-space:nowrap;
          transition:all .15s;
          flex-shrink:0;
        }
        .comm-hashtag-btn:active { transform:scale(.94); }
        .comm-post-wrap { transition:opacity .2s; }
        .comm-post-wrap:hover { box-shadow:0 4px 16px rgba(0,0,0,.1) !important; }

        /* ====== EMBOSSED LOGIN DESIGN ====== */
        .emboss-page {
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(145deg, #c4c8d0, #a8acb8);
          padding: 20px;
          position: relative;
        }
        .emboss-page::before {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.5) 0%, transparent 60%),
                      radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.12) 0%, transparent 50%);
          pointer-events: none;
        }
        .emboss-circle {
          width: 340px;
          height: 340px;
          border-radius: 50%;
          background: linear-gradient(145deg, #ffffff, #f4f4f6);
          box-shadow:
            18px 18px 38px rgba(0,0,0,0.28),
            -12px -12px 25px rgba(255,255,255,0.9),
            inset 2px 2px 4px rgba(255,255,255,0.9),
            inset -3px -3px 6px rgba(0,0,0,0.05);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 30px 40px;
          text-align: center;
          position: relative;
          overflow: hidden;
        }
        .emboss-circle-lg {
          width: 360px;
          height: 420px;
          border-radius: 50%/45%;
        }
        .emboss-title {
          font-size: 24px;
          font-weight: bold;
          color: #2d2d2d;
          margin-bottom: 18px;
          font-family: 'Noto Nastaliq Urdu', sans-serif;
          text-shadow: 1px 1px 2px rgba(255,255,255,0.8), -1px -1px 1px rgba(0,0,0,0.1);
        }
        .emboss-inp {
          width: 100%;
          padding: 11px 14px;
          border: none;
          border-radius: 30px;
          font-family: 'Noto Nastaliq Urdu', sans-serif;
          font-size: 13px;
          margin-bottom: 12px;
          background: linear-gradient(145deg, #ececec, #f8f8f8);
          box-shadow:
            inset 4px 4px 8px rgba(0,0,0,0.12),
            inset -3px -3px 6px rgba(255,255,255,0.9);
          color: #333;
          outline: none;
          transition: all 0.3s;
          text-align: center;
        }
        .emboss-inp:focus {
          box-shadow:
            inset 5px 5px 10px rgba(0,0,0,0.15),
            inset -3px -3px 6px rgba(255,255,255,0.95),
            0 0 0 2px rgba(30,58,138,0.2);
        }
        .emboss-inp::placeholder { color: #999; font-size: 12px; }
        .emboss-btn {
          width: 100%;
          padding: 12px;
          border: none;
          border-radius: 30px;
          font-family: 'Noto Nastaliq Urdu', sans-serif;
          font-size: 14px;
          font-weight: bold;
          cursor: pointer;
          background: linear-gradient(145deg, #e0e0e0, #c8c8c8);
          box-shadow:
            5px 5px 12px rgba(0,0,0,0.18),
            -4px -4px 10px rgba(255,255,255,0.9);
          color: #2d2d2d;
          transition: all 0.2s;
          margin-top: 4px;
          letter-spacing: 0.5px;
        }
        .emboss-btn:active {
          box-shadow:
            inset 3px 3px 8px rgba(0,0,0,0.15),
            inset -2px -2px 6px rgba(255,255,255,0.8);
          transform: scale(0.98);
        }
        .emboss-btn.primary {
          background: linear-gradient(145deg, #1e3a8a, #3b6fd4);
          color: white;
          font-weight: 900;
          letter-spacing: 1px;
          box-shadow:
            6px 6px 14px rgba(30,58,138,0.45),
            -3px -3px 8px rgba(255,255,255,0.5),
            inset 0 1px 0 rgba(255,255,255,0.2);
        }
        .emboss-btn.success {
          background: linear-gradient(145deg, #047857, #10b981);
          color: white;
          font-weight: 900;
          letter-spacing: 1px;
          box-shadow:
            6px 6px 14px rgba(4,120,87,0.45),
            -3px -3px 8px rgba(255,255,255,0.5),
            inset 0 1px 0 rgba(255,255,255,0.2);
        }
        .emboss-btn.dark {
          background: linear-gradient(145deg, #0f172a, #1e293b);
          color: white;
          box-shadow:
            5px 5px 12px rgba(15,23,42,0.4),
            -3px -3px 8px rgba(255,255,255,0.35);
        }
        .emboss-icon-wrap {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28px;
          margin-bottom: 10px;
          background: linear-gradient(145deg, #f0f0f0, #d8d8d8);
          box-shadow:
            6px 6px 14px rgba(0,0,0,0.15),
            -4px -4px 10px rgba(255,255,255,0.95);
        }
        .emboss-back-btn {
          position: absolute;
          top: 16px;
          right: 16px;
          background: linear-gradient(145deg, #f0f0f0, #d8d8d8);
          border: none;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #555;
          font-size: 14px;
          box-shadow:
            2px 2px 4px rgba(0,0,0,0.10),
            -2px -2px 4px rgba(255,255,255,0.7);
          transition: all 0.2s;
        }
        .emboss-back-btn:active {
          box-shadow:
            inset 2px 2px 5px rgba(0,0,0,0.12),
            inset -2px -2px 4px rgba(255,255,255,0.8);
        }
        .emboss-subtitle {
          font-size: 12px;
          color: #777;
          margin-bottom: 16px;
          line-height: 1.4;
        }
        .emboss-link {
          font-size: 12px;
          color: #2563eb;
          cursor: pointer;
          margin-top: 10px;
          text-decoration: underline;
          display: block;
        }
        .emboss-otp-inp {
          text-align: center;
          font-size: 24px;
          letter-spacing: 6px;
          font-weight: bold;
          padding: 14px;
        }
        .emboss-resend-box {
          background: rgba(239,68,68,0.08);
          border-radius: 12px;
          padding: 10px;
          margin-bottom: 10px;
          text-align: center;
          font-size: 12px;
          color: #dc2626;
          width: 100%;
        }
        /* Responsive for smaller screens */
        @media (max-width: 380px) {
          .emboss-circle { width: 300px; height: 300px; padding: 25px 30px; }
          .emboss-circle-lg { width: 310px; height: 370px; }
        }

        /* =========================================================
           DARK THEME — COMPREHENSIVE
           ========================================================= */
        html[data-theme="dark"] {
          --bg:#0B1220;
          --card:#141B2E;
          --text:#E5E7EB;
          --text2:#CBD5E1;
          --text3:#94A3B8;
          --text4:#64748B;
          --border:#1E293B;
          --border2:#1E293B;
          --sh:0 4px 18px rgba(0,0,0,0.55);
          --sh2:0 12px 34px rgba(0,0,0,0.6);
          --card-gradient:linear-gradient(145deg,#161f36,#0f1626);
          --input-bg:#0f1525;
          --prj-h:#93C5FD;   /* 🏗️ renovation headings / links (navy in the light theme) */
        }
        html[data-theme="dark"] body {
          background: var(--bg) !important;
          color: var(--text) !important;
        }
        html[data-theme="dark"] ::selection { background:#2563EB;color:#fff; }

        /* "White glow" fix: neumorphic light-highlight shadows never dimmed for dark mode.
           Matches only within box-shadow syntax (px immediately before the rgba) so plain
           text/background colors using the same rgba value are never affected. */
        html[data-theme="dark"] [style*="px rgba(255,255,255,0.9)" i],
        html[data-theme="dark"] [style*="px rgba(255,255,255,0.8)" i],
        html[data-theme="dark"] [style*="px rgba(255,255,255,0.7)" i],
        html[data-theme="dark"] [style*="px rgba(255,255,255,0.6)" i],
        html[data-theme="dark"] [style*="px rgba(255,255,255,0.5)" i],
        html[data-theme="dark"] [style*="px rgba(255,255,255,0.4)" i] {
          box-shadow: 0 6px 16px rgba(0,0,0,0.5) !important;
        }

        /* Light card/panel gradients -> dark elevated surfaces */
        html[data-theme="dark"] [style*="linear-gradient(145deg,#f8f8f8,#e2e2e2)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#ffffff,#f4f4f6)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#f0f0f0,#d8d8d8)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#f8f8f8,#d5d5d5)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#ececec,#f8f8f8)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#f8f8f8,#ececec)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#f5f5f5,#e8e8e8)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#d5d8de,#c0c4cc)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#d8d8d8,#e8e8e8)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#d8ede8,#c2ddd6)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#f5f5f5,#e0e0e0)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#f8f8f8,#e0e0e0)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#f8f8f8,#e8e8e8)" i],
        html[data-theme="dark"] [style*="linear-gradient(145deg,#fffbeb,#fef3c7)" i] {
          background: linear-gradient(145deg,#161f36,#0f1626) !important;
          box-shadow: 0 8px 22px rgba(0,0,0,0.55), inset 1px 1px 2px rgba(255,255,255,0.03) !important;
        }
        html[data-theme="dark"] [style*="linear-gradient(145deg,#e0e7ff,#c7d2fe)" i] {
          background: linear-gradient(145deg,#312e81,#3730a3) !important;
        }

        /* Blue page headers (Home/Booking/Profile) -> dark navy, matching the app's existing (previously unused) .hdr.dark scheme */
        html[data-theme="dark"] [style*="background:linear-gradient(160deg,#1e3a8a,#2563eb)" i] {
          background: linear-gradient(160deg,#0f172a,#1e3a8a) !important;
        }

        /* Home search bar -> dark input surface */
        html[data-theme="dark"] [style*="background:rgba(255,255,255,0.95)" i] {
          background: var(--input-bg) !important;
        }
        html[data-theme="dark"] #home_search {
          color: var(--text) !important;
        }
        html[data-theme="dark"] #home_search::placeholder {
          color: var(--text3) !important;
        }

        html[data-theme="dark"] [style*="background:#F8FAFC" i] {
          background: #141B2E !important;
        }
        html[data-theme="dark"] [style*="background:#EFF6FF" i] {
          background: #141B2E !important;
        }
        html[data-theme="dark"] [style*="background:#F0FDF4" i] {
          background: #141B2E !important;
        }
        html[data-theme="dark"] [style*="background:#F5F3FF" i] {
          background: #141B2E !important;
        }
        html[data-theme="dark"] [style*="background:#FEF3C7" i] {
          background: #141B2E !important;
        }
        html[data-theme="dark"] [style*="background:#EDE9FE" i] {
          background: #241b3d !important;
        }
        html[data-theme="dark"] [style*="background:#F0F9FF" i] {
          background: #0f2438 !important;
        }
        html[data-theme="dark"] [style*="background:#F0FDFA" i] {
          background: #0f2a26 !important;
        }
        html[data-theme="dark"] [style*="background:#FEF9F0" i] {
          background: #2b2510 !important;
        }

        /* Light secondary-button backgrounds (Cancel buttons etc.) -> dark surface */
        html[data-theme="dark"] [style*="background:#F3F4F6" i] {
          background: #1E293B !important;
        }

        /* Body backgrounds */
        html[data-theme="dark"] body,
        html[data-theme="dark"] .page,
        html[data-theme="dark"] .tab-content,
        html[data-theme="dark"] [style*="background:#eef0f5" i] {
          background-color: #0B1220 !important;
        }

        /* Text colors on light cards -> dark text */
        html[data-theme="dark"] [style*="color:#1F2937" i],
        html[data-theme="dark"] [style*="color:#374151" i],
        html[data-theme="dark"] [style*="color:#111827" i] {
          color: #E5E7EB !important;
        }
        html[data-theme="dark"] [style*="color:#9CA3AF" i],
        html[data-theme="dark"] [style*="color:#6B7280" i] {
          color: #94A3B8 !important;
        }

        /* Inputs */
        html[data-theme="dark"] .inp {
          background: #0f1525 !important;
          color: #E5E7EB !important;
          border-color: #1E293B !important;
        }
        html[data-theme="dark"] .inp::placeholder { color: #475569 !important; }
        html[data-theme="dark"] #bf_area_list,
        html[data-theme="dark"] #bf_task_list { background: #141B2E !important; border-color: #1E293B !important; box-shadow: 0 10px 28px rgba(0,0,0,.6) !important; }
        html[data-theme="dark"] #bf_area_list > div,
        html[data-theme="dark"] #bf_task_list > div { border-bottom-color: #1E293B !important; }
        html[data-theme="dark"] #bf_area_list > div:not([style*="color:var(--p)"]),
        html[data-theme="dark"] #bf_task_list > div { color: #E5E7EB !important; }
        html[data-theme="dark"] #bf_area_list > div[style*="color:var(--p)"],
        html[data-theme="dark"] #bf_area_list > div[style*="color:var(--p)"] i { color: #60A5FA !important; }
        html[data-theme="dark"] #bf_area_list > div[style*="background:#EFF6FF" i],
        html[data-theme="dark"] #bf_task_list > div[style*="background:#EFF6FF" i] { background: rgba(37,99,235,.2) !important; }
        html[data-theme="dark"] #bf_task_list span[style*="color:#1e3a8a" i] { color: #93C5FD !important; }
        html[data-theme="dark"] #bf_task_list span[style*="color:#9A3412" i] { color: #FDBA74 !important; }
        html[data-theme="dark"] .inp:focus { box-shadow: 0 0 0 3px rgba(37,99,235,.25) !important; border-color: #2563EB !important; }
        html[data-theme="dark"] .inp-label { color: #94A3B8 !important; }
        html[data-theme="dark"] hr { border-color: #1E293B !important; }

        /* Bottom nav */
        html[data-theme="dark"] .bottom-nav {
          background: linear-gradient(145deg,#141B2E,#0B1220) !important;
          border-top-color: #1E293B !important;
          box-shadow: 0 -2px 18px rgba(0,0,0,0.55) !important;
        }
        html[data-theme="dark"] .nav-item span { color: #94A3B8; }
        html[data-theme="dark"] .nav-item i { color: #94A3B8; }
        html[data-theme="dark"] .nav-item.active { background: rgba(37,99,235,0.12) !important; }
        html[data-theme="dark"] .nav-item.active i,
        html[data-theme="dark"] .nav-item.active span { color: #60A5FA !important; }
        html[data-theme="dark"] .nav-svg { color: #94A3B8; }
        html[data-theme="dark"] .nav-item.active .nav-svg { color: #60A5FA; }
        html[data-theme="dark"] .gsv-card { border-color: #1E293B; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
        html[data-theme="dark"] .gsv-blob { opacity: .2; }
        html[data-theme="dark"] .ghm-card { border-color: #1E293B; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
        html[data-theme="dark"] .gbk-card { background: color-mix(in srgb, var(--bk-fg) 24%, #0B1220); color: #E5E7EB; }
        html[data-theme="dark"] .gbk-card.on { border-color: color-mix(in srgb, var(--bk-fg) 55%, #ffffff); }
        html[data-theme="dark"] .gpk-card { background: linear-gradient(135deg,#0f2a26,#12233a) !important; border-color: #1E293B !important; }
        html[data-theme="dark"] .gpk-card .gpk-h,
        html[data-theme="dark"] .gpk-card b[style*="color:#047857" i] { color: #34D399 !important; }

        /* Buttons */
        html[data-theme="dark"] .emboss-btn,
        html[data-theme="dark"] .btn,
        html[data-theme="dark"] .stab,
        html[data-theme="dark"] .atab {
          box-shadow: 0 6px 16px rgba(0,0,0,0.5) !important;
        }
        html[data-theme="dark"] .stab { background: #141B2E !important; border-color: #1E293B !important; color: #94A3B8 !important; }
        html[data-theme="dark"] .stab.on { background: #2563EB !important; border-color: #2563EB !important; color: white !important; }
        html[data-theme="dark"] .atab { background: #141B2E !important; border-color: #1E293B !important; color: #94A3B8 !important; }
        html[data-theme="dark"] .atab.on { background: #2563EB !important; border-color: #2563EB !important; color: white !important; }

        html[data-theme="dark"] .prof-menu-item { border-color: #1E293B !important; }
        html[data-theme="dark"] .prof-menu-item:hover { background: rgba(37,99,235,0.08) !important; }

        /* Job cards */
        html[data-theme="dark"] .job-card { background: #141B2E !important; border-right-color: var(--a) !important; }
        html[data-theme="dark"] .job-card.green { background: rgba(16,185,129,0.08) !important; }

        /* Service boxes */
        html[data-theme="dark"] .svc-box { background: #141B2E !important; border-color: transparent !important; }
        html[data-theme="dark"] .svc-box:hover { border-color: #2563EB !important; }
        html[data-theme="dark"] .svc-box .svc-name { color: #E5E7EB !important; }

        /* Chips */
        html[data-theme="dark"] .chip { background: #1E293B !important; color: #CBD5E1 !important; }
        html[data-theme="dark"] .chip.on { background: #2563EB !important; color: white !important; border-color: #2563EB !important; }

        /* Status tabs backgrounds */
        html[data-theme="dark"] .status-tabs { background: #0B1220 !important; }

        /* Profile */
        html[data-theme="dark"] .prof-info-card { background: #141B2E !important; }
        html[data-theme="dark"] .prof-photo { border-color: #F59E0B !important; }

        /* Upload box */
        html[data-theme="dark"] .upload-box { background: #0f1525 !important; border-color: #475569 !important; color: #94A3B8 !important; }
        html[data-theme="dark"] .upload-box:hover { border-color: #2563EB !important; background: rgba(37,99,235,0.08) !important; }

        /* Embossed pages */
        html[data-theme="dark"] .emboss-page { background: linear-gradient(145deg, #0f1525, #0a0f1a) !important; }
        html[data-theme="dark"] .emboss-page::before {
          background: radial-gradient(ellipse at 30% 20%, rgba(37,99,235,0.08) 0%, transparent 60%),
                      radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.3) 0%, transparent 50%) !important;
        }
        html[data-theme="dark"] .emboss-circle {
          background: linear-gradient(145deg, #141B2E, #0f1626) !important;
          box-shadow: 18px 18px 38px rgba(0,0,0,0.5), -12px -12px 25px rgba(255,255,255,0.02), inset 2px 2px 4px rgba(255,255,255,0.03), inset -3px -3px 6px rgba(0,0,0,0.2) !important;
        }
        /* کسٹمر Sign Up باکس worker والے صفحات کی طرح .emboss-circle استعمال نہیں کرتا
           (اس کا اپنا الگ inline style ہے) — اسی لیے یہاں الگ سے وہی dark background شامل کیا */
        html[data-theme="dark"] #c_signup_box {
          background: linear-gradient(145deg, #141B2E, #0f1626) !important;
          box-shadow: 18px 18px 38px rgba(0,0,0,0.5), -12px -12px 25px rgba(255,255,255,0.02), inset 2px 2px 4px rgba(255,255,255,0.03), inset -3px -3px 6px rgba(0,0,0,0.2) !important;
        }
        /* Login باکس بھی وہی مسئلہ — الگ سے وہی dark background شامل کیا */
        html[data-theme="dark"] #c_login_box {
          background: linear-gradient(145deg, #141B2E, #0f1626) !important;
          box-shadow: 18px 18px 38px rgba(0,0,0,0.5), -12px -12px 25px rgba(255,255,255,0.02), inset 2px 2px 4px rgba(255,255,255,0.03), inset -3px -3px 6px rgba(0,0,0,0.2) !important;
        }
        /* Forgot Password باکس بھی اسی خاندان کا صفحہ ہے، وہی مسئلہ */
        html[data-theme="dark"] #c_forgot_box {
          background: linear-gradient(145deg, #141B2E, #0f1626) !important;
          box-shadow: 18px 18px 38px rgba(0,0,0,0.5), -12px -12px 25px rgba(255,255,255,0.02), inset 2px 2px 4px rgba(255,255,255,0.03), inset -3px -3px 6px rgba(0,0,0,0.2) !important;
        }
        html[data-theme="dark"] .emboss-title { color: #E5E7EB !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.5), -1px -1px 1px rgba(255,255,255,0.03) !important; }
        html[data-theme="dark"] .emboss-inp {
          background: linear-gradient(145deg, #0f1525, #161f36) !important;
          box-shadow: inset 4px 4px 8px rgba(0,0,0,0.3), inset -3px -3px 6px rgba(255,255,255,0.02) !important;
          color: #E5E7EB !important;
        }
        html[data-theme="dark"] .emboss-inp::placeholder { color: #475569 !important; }
        html[data-theme="dark"] .emboss-inp:focus { box-shadow: inset 5px 5px 10px rgba(0,0,0,0.35), inset -3px -3px 6px rgba(255,255,255,0.03), 0 0 0 2px rgba(37,99,235,0.3) !important; }
        html[data-theme="dark"] .emboss-subtitle { color: #94A3B8 !important; }
        html[data-theme="dark"] .emboss-icon-wrap {
          background: linear-gradient(145deg, #1E293B, #0f172a) !important;
          box-shadow: 6px 6px 14px rgba(0,0,0,0.3), -4px -4px 10px rgba(255,255,255,0.02) !important;
        }
        html[data-theme="dark"] .emboss-back-btn {
          background: linear-gradient(145deg, #1E293B, #0f172a) !important;
          box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -2px -2px 4px rgba(255,255,255,0.02) !important;
          color: #94A3B8 !important;
        }
        html[data-theme="dark"] .emboss-link { color: #60A5FA !important; }

        /* Earnings cards */
        html[data-theme="dark"] .earn-stat { background: rgba(16,185,129,0.08) !important; border-color: rgba(16,185,129,0.2) !important; }
        html[data-theme="dark"] .earn-stat-val { color: #E5E7EB !important; }
        html[data-theme="dark"] .earn-month-row { background: #141B2E !important; }
        html[data-theme="dark"] .earn-bar-wrap { background: #1E293B !important; }
        html[data-theme="dark"] .toggle-sw { background: #374151 !important; }
        html[data-theme="dark"] .earn-stat.accent { background: rgba(245,158,11,0.08) !important; border-color: rgba(245,158,11,0.2) !important; }
        html[data-theme="dark"] [style*="background:#E5E7EB" i] {
          background: #1E293B !important;
        }
        html[data-theme="dark"] [style*="background:#F9FAFB" i] {
          background: #141B2E !important;
        }
        html[data-theme="dark"] [style*="background:#FEF2F2" i] {
          background: #2d1618 !important;
        }
        html[data-theme="dark"] [style*="background:#FFF7ED" i] {
          background: #2b2510 !important;
        }
        html[data-theme="dark"] [style*="background:#FFFBEB" i] {
          background: #2b2510 !important;
        }

        /* Admin table */
        html[data-theme="dark"] .admin-table th { background: #0f1525 !important; color: #CBD5E1 !important; border-color: #1E293B !important; }
        html[data-theme="dark"] .admin-table td { border-color: #1E293B !important; color: #CBD5E1 !important; }
        html[data-theme="dark"] .admin-table tr:hover td { background: rgba(37,99,235,0.05) !important; }

        /* Stat cards */
        html[data-theme="dark"] .stat-card { background: linear-gradient(145deg,#161f36,#0f1626) !important; box-shadow: 6px 6px 14px rgba(0,0,0,0.3), -4px -4px 10px rgba(255,255,255,0.02) !important; }
        html[data-theme="dark"] .stat-num { color: #60A5FA !important; }
        html[data-theme="dark"] .stat-lbl { color: #94A3B8 !important; }

        /* Promo card */
        html[data-theme="dark"] .promo-card { box-shadow: 0 8px 20px rgba(30,58,138,.4) !important; }

        /* Search bars */
        html[data-theme="dark"] [style*="background:white"][style*="border-radius:30px"] { background: #141B2E !important; }

        /* Rating stars background */
        html[data-theme="dark"] .rating-chip { background: rgba(245,158,11,0.08) !important; border-color: rgba(245,158,11,0.2) !important; }

        /* Worker rating cards */
        html[data-theme="dark"] .wrating-card { background: #141B2E !important; border-color: #1E293B !important; }
        html[data-theme="dark"] .wrating-card .wrc-name { color: #E5E7EB !important; }
        html[data-theme="dark"] .wrating-card.top { background: rgba(245,158,11,0.08) !important; }
        html[data-theme="dark"] .wrating-card.low { background: rgba(239,68,68,0.08) !important; }

        /* Chat */
        html[data-theme="dark"] .chat-wrap { background: #0f1525 !important; }
        html[data-theme="dark"] .chat-msg.them { background: #141B2E !important; color: #E5E7EB !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }
        html[data-theme="dark"] .chat-row input { background: #0f1525 !important; border-color: #1E293B !important; color: #E5E7EB !important; }

        /* QR box */
        html[data-theme="dark"] .qr-box { background: #0f1525 !important; border-color: #1E293B !important; }

        /* Community page */
        html[data-theme="dark"] #community_page [style*="background:linear-gradient(145deg,#f8f8f8,#ececec)"] { background: linear-gradient(145deg,#161f36,#0f1626) !important; }
        html[data-theme="dark"] .comm-post-menu { background: #141B2E !important; border-color: #1E293B !important; }
        html[data-theme="dark"] .comm-reaction-picker { background: #141B2E !important; border-color: #1E293B !important; }
        html[data-theme="dark"] .comm-menu-item { color: #CBD5E1 !important; border-color: #1E293B !important; }
        html[data-theme="dark"] .comm-menu-item:active { background: #1E293B !important; }
        html[data-theme="dark"] .comm-hashtag-btn { background: #1E293B !important; color: #CBD5E1 !important; }

        /* Notification drawer */
        html[data-theme="dark"] #notif-drawer { background: linear-gradient(145deg,#141B2E,#0f1626) !important; border-color: #1E293B !important; }
        html[data-theme="dark"] #notif-drawer-hdr { background: linear-gradient(145deg,#141B2E,#0f1626) !important; border-color: #1E293B !important; }
        html[data-theme="dark"] .notif-item { border-color: #1E293B !important; }
        html[data-theme="dark"] .notif-item.unread { background: rgba(37,99,235,0.08) !important; }
        html[data-theme="dark"] .notif-title { color: #E5E7EB !important; }
        html[data-theme="dark"] .notif-body { color: #94A3B8 !important; }

        /* Bid popup */
        html[data-theme="dark"] .bid-popup { background: #141B2E !important; box-shadow: var(--sh2) !important; }

        /* Tracking */
        html[data-theme="dark"] #tracking_info_panel { background: linear-gradient(145deg,#141B2E,#0f1626) !important; }
        html[data-theme="dark"] #tracking_worker_name { color: #E5E7EB !important; }

        /* Modals */
        html[data-theme="dark"] #lang_modal [style*="background:var(--card"],
        html[data-theme="dark"] #theme_modal [style*="background:var(--card"] { background: #141B2E !important; }
        html[data-theme="dark"] #lang_modal h3,
        html[data-theme="dark"] #theme_modal h3 { color: #60A5FA !important; }
        html[data-theme="dark"] #lang_modal button[id^="lang_btn"],
        html[data-theme="dark"] #theme_modal button[id^="theme_btn"] { background: #0f1525 !important; border-color: #1E293B !important; color: #E5E7EB !important; }

        /* Modal box global */
        html[data-theme="dark"] .modal-box { background: linear-gradient(145deg,#141B2E,#0f1626) !important; color: #E5E7EB !important; }
        html[data-theme="dark"] .modal-close { color: #94A3B8 !important; }

        /* Disabled inputs */
        html[data-theme="dark"] .inp:disabled { background: #1E293B !important; color: #475569 !important; }

        /* Radio group */
        html[data-theme="dark"] .radio-group { background: #1E293B !important; }
        html[data-theme="dark"] .radio-group label { color: #60A5FA !important; }

        /* General transition for smooth theme switching */
        html[data-theme="dark"] body,
        html[data-theme="dark"] .inp,
        html[data-theme="dark"] .emboss-btn,
        html[data-theme="dark"] .prof-menu-item,
        html[data-theme="dark"] .card,
        html[data-theme="dark"] .job-card,
        html[data-theme="dark"] .svc-box,
        html[data-theme="dark"] .stab,
        html[data-theme="dark"] .atab,
        html[data-theme="dark"] .modal-box {
          transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
        }

        /* VIP banners dark */
        html[data-theme="dark"] .vip-home-banner { background: linear-gradient(135deg,rgba(37,99,235,0.08),rgba(29,78,216,0.04)) !important; border-color: rgba(37,99,235,0.2) !important; }
        html[data-theme="dark"] .vip-home-banner.gold { background: linear-gradient(135deg,rgba(245,158,11,0.08),rgba(254,243,199,0.04)) !important; }
        html[data-theme="dark"] .vip-home-banner.plat { background: linear-gradient(135deg,rgba(124,58,237,0.08),rgba(237,233,254,0.04)) !important; }

        /* Loyalty cards */
        html[data-theme="dark"] .loyalty-card { box-shadow: 0 6px 20px rgba(0,0,0,.3) !important; }

        /* Ref card */
        html[data-theme="dark"] .ref-card { box-shadow: 0 6px 20px rgba(37,99,235,.3) !important; }

        /* Scrollbar dark */
        html[data-theme="dark"] ::-webkit-scrollbar { width: 6px; }
        html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0B1220; }
        html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #1E293B; border-radius: 3px; }
        html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #334155; }

        /* 🏠 start page (brand look) */
        .ghp{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;display:flex;flex-direction:column;align-items:center;
          padding:max(16px,env(safe-area-inset-top)) 20px max(12px,env(safe-area-inset-bottom));
          background:radial-gradient(120% 70% at 50% 30%,#173c9e 0%,#0b1d52 38%,#050c24 70%,#02040d 100%);color:#fff;}
        .ghp-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none;}
        .ghp-blob1{width:260px;height:260px;background:#2563EB;top:-90px;right:-80px;}
        .ghp-blob2{width:220px;height:220px;background:#0EA5E9;bottom:60px;left:-110px;opacity:.22;}
        .ghp-lang{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;z-index:5;height:38px;padding:0 14px;border-radius:999px;cursor:pointer;
          display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.85);font-size:13px;font-weight:700;font-family:inherit;}
        .ghp-lang i{font-size:13px;opacity:.8;}
        .ghp-main{position:relative;z-index:2;flex:1;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,16px);min-height:0;}
        .ghp-hero{display:flex;justify-content:center;width:100%;}
        .ghp-img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;display:block;width:min(88vw,360px);max-height:min(42vh,330px);height:auto;object-fit:contain;}
        .ghp-slogan{margin:0;font-size:15px;font-weight:600;color:rgba(255,255,255,.78);text-align:center;letter-spacing:.3px;}
        .ghp-cta{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(10px,3vh,26px);}
        .ghp-book{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 22px;border-radius:999px;cursor:pointer;font-family:inherit;color:#fff;
          border:1px solid rgba(255,255,255,.22);background:linear-gradient(135deg,#1D4ED8 0%,#2563EB 55%,#0EA5E9 100%);
          box-shadow:0 12px 30px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s ease;-webkit-tap-highlight-color:transparent;}
        .ghp-book:active{transform:scale(.97);}
        .ghp-book span{font-size:17px;font-weight:800;line-height:1.6;}
        .ghp-book .fa-calendar-check{font-size:17px;opacity:.95;}
        .ghp-join{background:none;border:none;cursor:pointer;font-family:inherit;color:rgba(255,255,255,.62);font-size:13px;line-height:1.8;padding:6px 10px;-webkit-tap-highlight-color:transparent;}
        .ghp-join b{color:#7DD3FC;font-weight:800;text-decoration:underline;text-underline-offset:4px;}
        html:not([dir="ltr"]) .ghp-join b{text-decoration:none;}
        .ghp-arr{flex-shrink:0;font-size:12px;opacity:.6;}
        html:not([dir="ltr"]) .ghp-arr{transform:scaleX(-1);}
        .ghp-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;row-gap:6px;width:100%;padding-top:10px;flex-shrink:0;}
        .ghp-foot span{color:rgba(255,255,255,.5);font-size:11px;cursor:pointer;white-space:nowrap;}
        .ghp-foot em{font-style:normal;color:rgba(255,255,255,.22);font-size:10px;margin:0 8px;}