:root {
      --green-50: #ecfdf5;
      --green-100: #d1fae5;
      --green-200: #a7f3d0;
      --green-300: #6ee7b7;
      --green-500: #10b981;
      --green-600: #059669;
      --green-700: #047857;
      --green-800: #065f46;
      /* Type scale – single source for balanced typography */
      --text-xs: 0.75rem;
      --text-sm: 0.875rem;
      --text-base: 1rem;
      --text-lg: 1.125rem;
      --text-xl: 1.25rem;
      --text-2xl: 1.5rem;
      --text-3xl: 1.75rem;
      --leading-tight: 1.25;
      --leading-snug: 1.375;
      --leading-normal: 1.5;
      --leading-relaxed: 1.625;
      --font-normal: 400;
      --font-medium: 500;
      --font-semibold: 600;
      --font-bold: 700;
    }
    * { box-sizing: border-box; }
    body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: linear-gradient(180deg, var(--green-50) 0%, #f8fafc 50%, #f1f5f9 100%); color: #1e293b; min-height: 100vh; padding: 0 1rem 2rem; font-size: var(--text-base); line-height: var(--leading-normal); font-weight: var(--font-normal); }
    a { color: var(--green-700); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .container { max-width: 680px; margin: 0 auto; }
    body.page-admin .container { max-width: 960px; }
    body.page-admin .welcome-banner { display: none !important; }
    h1 { margin-top: 0; font-size: var(--text-3xl); font-weight: var(--font-bold); line-height: var(--leading-tight); color: #0f172a; letter-spacing: -0.025em; }
    h2 { margin-top: 0; margin-bottom: 1rem; font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: var(--leading-snug); color: #334155; }
    .card { background: #fff; border-radius: 20px; padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.06); border: 1px solid var(--green-100); transition: box-shadow 0.2s, transform 0.2s; }
    .card:hover { box-shadow: 0 8px 24px rgba(5, 150, 105, 0.12); }
    .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; font-size: var(--text-base); font-weight: var(--font-semibold); line-height: var(--leading-normal); border: 1px solid rgba(0,0,0,0.15); border-radius: 12px; cursor: pointer; min-height: 48px; margin: 0.35rem 0.35rem 0.35rem 0; transition: transform 0.15s, box-shadow 0.15s; text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,0.4); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(60,45,20,0.25); }
    .btn:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,0.15); }
    .btn-primary { background: linear-gradient(180deg, #2ecc71 0%, #1a9c57 50%, #148a4a 100%); color: #fff; border: 1px solid #0e6b38; box-shadow: 0 3px 0 #0a5c2f, 0 6px 14px rgba(10, 92, 47, 0.4), inset 0 1px 0 rgba(255,255,255,0.3); text-shadow: 0 -1px 0 rgba(0,0,0,0.25); }
    .btn-primary:hover { box-shadow: 0 4px 0 #0a5c2f, 0 8px 18px rgba(10, 92, 47, 0.45), inset 0 1px 0 rgba(255,255,255,0.3); }
    .btn-danger { background: linear-gradient(180deg, #ef5350 0%, #d32f2f 50%, #b71c1c 100%); color: #fff; border: 1px solid #8e1515; box-shadow: 0 3px 0 #7a1212, 0 6px 14px rgba(122, 18, 18, 0.4), inset 0 1px 0 rgba(255,255,255,0.25); text-shadow: 0 -1px 0 rgba(0,0,0,0.25); }
    .btn-danger:hover { box-shadow: 0 4px 0 #7a1212, 0 8px 18px rgba(122, 18, 18, 0.45), inset 0 1px 0 rgba(255,255,255,0.25); }
    .btn-outline { background: linear-gradient(180deg, #f7f3ec 0%, #ebe6dc 100%); color: var(--green-700); border: 1px solid #a89878; box-shadow: 0 2px 0 rgba(80,60,30,0.15), inset 0 1px 0 rgba(255,255,255,0.6); }
    .btn-outline:hover { background: linear-gradient(180deg, #faf7f0 0%, #f0ebe3 100%); box-shadow: 0 3px 0 rgba(80,60,30,0.18), 0 4px 12px rgba(60,45,20,0.2), inset 0 1px 0 rgba(255,255,255,0.7); }
    .btn-block { width: 100%; margin: 0.5rem 0; }
    .btn-sm { min-height: 38px; padding: 0.5rem 1rem; font-size: var(--text-sm); font-weight: var(--font-semibold); border-radius: 10px; }
    /* Zero out base .btn margins inside card action containers */
    .maid-card-actions .btn { margin: 0 !important; }

    .form-group { margin-bottom: 1.1rem; }
    .form-group label { display: block; margin-bottom: 0.4rem; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #475569; line-height: var(--leading-snug); }
    .form-group input { width: 100%; padding: 0.7rem 0.9rem; font-size: var(--text-base); line-height: var(--leading-normal); border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
    .form-group input:hover { border-color: #cbd5e1; background: #fff; }
    .form-group input:focus { outline: none; border-color: var(--green-500); background: #fff; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15); }
    .nav { display: flex; flex-direction: column; position: relative; margin: 0 -1rem 0.5rem; background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #e2e8f0; overflow: visible; z-index: 1000; }
    .nav-bar { display: flex; align-items: center; padding: 0.35rem 1rem; min-height: 48px; flex-shrink: 0; position: relative; z-index: 1; }
    .nav a, .nav button { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.85rem; cursor: pointer; background: transparent; border: none; border-radius: 8px; color: #475569; text-decoration: none; font-size: var(--text-sm); font-weight: var(--font-medium); line-height: var(--leading-snug); transition: background 0.2s, color 0.2s; min-height: 38px; white-space: nowrap; }
    .nav a:hover, .nav button:hover { background: var(--green-50); color: var(--green-700); text-decoration: none; }
    .nav a.active { background: linear-gradient(180deg, #dcd5c8 0%, #e8e2d8 100%); color: var(--green-800); font-weight: var(--font-semibold); box-shadow: inset 0 2px 4px rgba(80,60,30,0.15); border: 1px solid #b8a88a; }
    .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 10px; background: transparent; color: #475569; cursor: pointer; flex-direction: column; gap: 5px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; flex-shrink: 0; }
    .nav-toggle:hover { background: linear-gradient(180deg, #e8e2d8 0%, #ddd6c8 100%); color: var(--green-700); box-shadow: inset 0 1px 3px rgba(80,60,30,0.12); }
    .nav-toggle-bar { display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; }
    .nav-brand { font-size: 0.75rem; font-weight: var(--font-semibold); color: #0f172a; padding: 0.25rem 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; flex: 1; justify-content: center; text-align: center; min-width: 0; }
    .nav-brand-img { height: 28px; width: auto; display: block; object-fit: contain; }
    .nav-brand-logo { height: 48px; width: auto; max-height: 95%; display: block; object-fit: contain; vertical-align: middle; }
    .nav-bar .nav-right-group { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
    .welcome-banner { background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(5, 150, 105, 0.04) 100%); border-bottom: 1px solid rgba(5, 150, 105, 0.15); padding: 0.85rem 1rem; margin-bottom: 1rem; }
    .welcome-banner-inner { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.85rem; max-width: 1200px; margin: 0 auto; }
    .welcome-banner-actions { align-self: flex-start; }
    .welcome-name { font-size: var(--text-lg); font-weight: var(--font-bold); color: #0f172a; margin: 0 0 0.15rem 0; line-height: 1.3; }
    .welcome-skills { font-size: var(--text-sm); font-weight: var(--font-medium); color: #0f172a; margin: 0.25rem 0 0; line-height: 1.35; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
    .welcome-banner-actions { display: flex; align-items: center; gap: 0.85rem; margin-left: auto; flex-shrink: 0; align-self: flex-start; }
    .welcome-banner-actions-maid { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
    .welcome-banner-actions .btn { padding: 0.35rem 0.75rem; font-size: var(--text-xs); font-weight: var(--font-semibold); min-height: 32px; border-radius: 8px; }
    .welcome-banner-actions .btn-edit-profile { border: 1px solid #a89878; background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 100%); color: var(--green-700); box-shadow: 0 2px 0 rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.6); }
    .welcome-banner-actions .btn-edit-profile:hover { box-shadow: 0 3px 0 rgba(80,60,30,0.15), 0 4px 10px rgba(60,45,20,0.2), inset 0 1px 0 rgba(255,255,255,0.7); }
    .welcome-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--green-200); flex-shrink: 0; }
    .welcome-greeting { font-size: var(--text-lg); font-weight: var(--font-bold); color: #0f172a; margin: 0 0 0.15rem 0; line-height: 1.3; }
    .welcome-role { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--green-700); margin: 0; }
    body.page-admin .welcome-banner { padding: 1rem 1.25rem; border-radius: 0 0 16px 16px; margin-bottom: 1.25rem; border: 1px solid rgba(5, 150, 105, 0.18); border-top: none; box-shadow: 0 4px 12px rgba(5, 150, 105, 0.06); }
    body.page-admin .welcome-banner-inner { padding: 0 0.25rem; }
    body.page-admin .welcome-avatar { width: 52px; height: 52px; border-width: 2px; border-color: var(--green-300); }
    body.page-admin .welcome-greeting { font-size: var(--text-xl); margin: 0 0 0.25rem 0; }
    body.page-admin .welcome-role { font-size: var(--text-sm); font-weight: var(--font-semibold); padding: 0.2rem 0.6rem; background: var(--green-100); color: var(--green-800); border-radius: 999px; display: inline-block; }
    .nav-drawer { display: none; border-top: 1px solid #e2e8f0; background: #fff; padding: 0; position: relative; z-index: 1; }
    .nav.nav-open .nav-drawer { display: flex; }
    .nav-drawer-inner { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 2.75rem 1rem 0.75rem 1rem; position: relative; width: 100%; box-sizing: border-box; }
    .nav-close { display: flex; position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; color: #64748b; background: transparent; border: none; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .nav-close:hover { background: linear-gradient(180deg, #e8e2d8 0%, #ddd6c8 100%); color: #0f172a; box-shadow: inset 0 1px 3px rgba(80,60,30,0.12); }
    .nav .nav-menu { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; flex: 1 1 auto; min-width: 0; padding: 0; }
    .nav .nav-menu a { padding: 0.5rem 0.75rem; min-height: 36px; border-radius: 8px; }
    .nav .nav-menu .nav-client-section { margin-left: 0.25rem; padding-left: 0.5rem; border-left: 1px solid #e2e8f0; }
    .nav .nav-spacer { flex: 1; min-width: 0.75rem; }
    .nav .nav-right { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; flex-shrink: 0; margin-left: 0; padding-left: 0.5rem; border-left: 1px solid #e2e8f0; }
    .nav .nav-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem 0.35rem 0.75rem; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; }
    .nav .nav-logout-btn { color: #64748b; font-size: var(--text-sm); font-weight: var(--font-medium); padding: 0; border-radius: 10px; border: 1px solid #b8a88a; background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 100%); margin-left: 0; width: 88px; height: 46px; min-width: 88px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; box-shadow: 0 2px 0 rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.5); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    .nav .nav-logout-btn:hover { background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%); color: #dc2626; border-color: #fecaca; box-shadow: 0 3px 0 rgba(120,30,30,0.2), inset 0 1px 0 rgba(255,255,255,0.4); }
    .nav .nav-notifications-wrap { position: relative; display: inline-flex; margin-right: 0.5rem; }
    .nav .nav-notifications-btn { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 46px; min-width: 88px; min-height: 46px; border-radius: 10px; border: 1px solid #b8a88a; background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 100%); color: #475569; cursor: pointer; transition: box-shadow 0.2s, color 0.2s; box-sizing: border-box; box-shadow: 0 2px 0 rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.5); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    .nav .nav-notifications-btn:hover { color: var(--green-700); box-shadow: 0 3px 0 rgba(80,60,30,0.15), 0 4px 10px rgba(60,45,20,0.2), inset 0 1px 0 rgba(255,255,255,0.6); }
    .nav .nav-notifications-btn svg { width: 32px; height: 32px; flex-shrink: 0; }
    .nav .nav-notifications-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.2); pointer-events: none; }
    .nav .nav-notifications-badge[data-count="0"], .nav .nav-notifications-badge:empty { display: none; }
    .nav .nav-notifications-dropdown { position: absolute; top: 100%; right: 0; margin-top: 0.35rem; width: 360px; max-width: calc(100vw - 2rem); max-height: 70vh; overflow: hidden; display: none; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(15,23,42,0.15); z-index: 10001; border: 1px solid #e2e8f0; }
    .nav .nav-notifications-dropdown.is-open { display: flex !important; }
    .nav .nav-notifications-dropdown .dropdown-head { padding: 0.85rem 1rem; border-bottom: 1px solid #e2e8f0; font-size: var(--text-base); font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
    .nav .nav-notifications-dropdown .dropdown-head svg { width: 20px; height: 20px; color: var(--green-600); }
    .nav .nav-notifications-dropdown .dropdown-list { overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; min-height: 80px; max-height: 400px; }
    .nav .nav-notifications-dropdown .dropdown-list .client-empty { margin: 0; padding: 0.75rem 0; font-size: var(--text-sm); color: #64748b; text-align: center; }
    .nav .nav-notifications-dropdown .client-notification { padding: 0.75rem 0.9rem; border-radius: 12px; border: 1px solid #e2e8f0; background: #f8fafc; font-size: var(--text-sm); }
    .nav .nav-notifications-dropdown .client-notification--featured { border-color: rgba(5,150,105,0.25); background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, #fff 100%); }
    .nav .nav-notifications-dropdown .client-notification-title { margin: 0 0 0.2rem; font-size: var(--text-sm); font-weight: 600; }
    .nav .nav-notifications-dropdown .client-notification-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; margin-bottom: 0.35rem; }
    .nav .nav-notifications-dropdown .client-notification-label { display: inline-flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
    .nav .nav-notifications-dropdown .client-notification-type { font-size: var(--text-xs); font-weight: 600; }
    .nav .nav-notifications-dropdown .client-notification-message { margin: 0; font-size: var(--text-xs); color: #475569; line-height: 1.4; }
    .nav .nav-notifications-dropdown .client-notification-time { font-size: 10px; color: #64748b; flex-shrink: 0; margin-left: auto; white-space: nowrap; }
    .nav .nav-notifications-dropdown .dropdown-footer { padding: 0.6rem 0.75rem; border-top: 1px solid #e2e8f0; flex-shrink: 0; }
    .nav .nav-notifications-dropdown .btn-inline { font-size: var(--text-xs); padding: 0.4rem 0.75rem; }
    .nav .nav-user .avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--green-200); flex-shrink: 0; }
    .nav .nav-user-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.05rem; min-width: 0; }
    .nav .nav-user-email { font-size: var(--text-sm); color: #334155; font-weight: var(--font-medium); max-width: 180px;  white-space: nowrap; line-height: var(--leading-tight); }
    .nav .nav-role { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-600); line-height: var(--leading-tight); }
    .nav-overlay { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 0; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
    .nav.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
    .nav.nav-open .nav-toggle .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.nav-open .nav-toggle .nav-toggle-bar:nth-child(2) { opacity: 0; }
    .nav.nav-open .nav-toggle .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--green-100); flex-shrink: 0; }
    .avatar-lg { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--green-100); }
    .profile-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: linear-gradient(135deg, var(--green-50) 0%, #fff 100%); border-radius: 14px; margin-bottom: 1rem; border: 1px solid var(--green-100); }
    .profile-card .avatar-wrap { flex-shrink: 0; }
    .profile-card .info { flex: 1; min-width: 0; }
    .profile-card .name { font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: var(--leading-snug); color: #0f172a; margin: 0 0 0.2rem 0; }
    .profile-card .meta { font-size: var(--text-sm); font-weight: var(--font-normal); color: #64748b; margin: 0; line-height: var(--leading-normal); }
    .page { display: none; animation: fadeIn 0.25s ease; }
    .page.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .muted { font-size: var(--text-sm); font-weight: var(--font-normal); color: #64748b; line-height: var(--leading-normal); }
    .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); padding: 0.85rem 1.5rem; border-radius: 12px; font-size: var(--text-sm); font-weight: var(--font-medium); line-height: var(--leading-normal); z-index: 1000; max-width: 90%; box-shadow: 0 8px 24px rgba(0,0,0,0.15); animation: toastIn 0.3s ease; }
    @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
    .toast.success { background: linear-gradient(135deg, #059669 0%, #047857 100%); color: #fff; }
    .toast.error { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: #fff; }
    table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-normal); border-radius: 12px; overflow: hidden; }
    th, td { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid #e2e8f0; }
    th { background: var(--green-50); font-weight: var(--font-semibold); font-size: var(--text-xs); color: #475569; }
    tr:hover { background: var(--green-50); }
    .avatar-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 0.5rem; }
    .cell-avatar { white-space: nowrap; }
/* Login page – full viewport, centered, modern (only when active) */
#page-login.page.active, #page-signup.page.active, #page-forgot-password.page.active, #page-reset-password.page.active, #page-admin-login.page.active { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 0; box-sizing: border-box; }
#page-login .login-inner, #page-signup .login-inner, #page-forgot-password .login-inner, #page-reset-password .login-inner, #page-admin-login .login-inner { width: 100%; max-width: 400px; margin: 0 auto; }
#page-signup .login-inner { max-width: 460px; }
#page-forgot-password .login-inner, #page-reset-password .login-inner { max-width: 400px; }
/* Signup page – premium, attractive layout */
#page-signup.page.active { padding: 0.75rem 0; 
  background: linear-gradient(160deg, #f0fdf4 0%, #f8fafc 25%, #f1f5f9 60%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}
#page-signup.page.active::before {
  content: "";
  position: absolute;
  top: -20%; right: -15%;
  width: 60%; height: 70%;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.12) 0%, transparent 65%);
  pointer-events: none;
}
#page-signup.page.active::after {
  content: "";
  position: absolute;
  bottom: -10%; left: -20%;
  width: 50%; height: 50%;
  background: radial-gradient(ellipse at center, rgba(5, 150, 105, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
#page-signup .login-inner { position: relative; z-index: 1; }
#page-signup .signup-hero {
  text-align: center;
  padding: 0 0 0.6rem;
}
#page-signup .signup-hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
#page-signup .signup-hero .back-link,
#page-signup .signup-hero .signup-home-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--green-700);
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--green-200);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#page-signup .signup-hero .back-link:hover,
#page-signup .signup-hero .signup-home-link:hover {
  background: #fff;
  border-color: var(--green-300);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12);
  text-decoration: none;
  color: var(--green-800);
}
#page-signup .signup-hero .logo {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  object-fit: contain;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.3), 0 0 0 4px rgba(255,255,255,0.8);
  border: none;
  display: block;
  margin: 0 auto 0.5rem;
}
#page-signup .signup-hero .signup-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  margin-bottom: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--green-800);
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, var(--green-50) 100%);
  border: 1.5px solid var(--green-200);
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.12);
}
#page-signup .signup-hero .signup-badge .badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-500);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
#page-signup .signup-hero h1 {
  font-size: 1.875rem;
  letter-spacing: -0.035em;
  margin: 0 0 0.2rem;
  color: #0f172a;
  font-weight: 800;
  line-height: 1.2;
}
#page-signup .signup-hero .tagline {
  font-size: var(--text-base);
  color: #64748b;
  max-width: 20em;
  margin: 0 auto;
  line-height: 1.5;
}
#page-signup .signup-card {
  background: #fff;
  border-radius: 28px;
  padding: 1.5rem 1.5rem;
  margin-bottom: 0;
  box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.06), 0 14px 34px -6px rgba(5, 150, 105, 0.15), 0 0 0 1px rgba(5, 150, 105, 0.06);
  border: 1px solid var(--green-100);
  transition: box-shadow 0.35s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}
#page-signup .signup-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-400), var(--green-600));
  opacity: 0.9;
}
#page-signup .signup-card:focus-within {
  box-shadow: 0 12px 24px -4px rgba(5, 150, 105, 0.12), 0 24px 48px -12px rgba(5, 150, 105, 0.18), 0 0 0 1px rgba(5, 150, 105, 0.1);
}
#page-signup .signup-card h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1.35rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid #f1f5f9;
  letter-spacing: -0.02em;
}
#page-signup .signup-role-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #334155;
  margin-bottom: 0.6rem;
  display: block;
  letter-spacing: 0.01em;
}
#page-signup .signup-role-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
#page-signup .signup-role-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  border: 1px solid #b8a88a;
  cursor: pointer;
  background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 100%);
  transition: all 0.25s ease;
  position: relative;
  box-shadow: 0 2px 0 rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}
#page-signup .signup-role-option:hover {
  box-shadow: 0 3px 0 rgba(80,60,30,0.15), 0 4px 12px rgba(60,45,20,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
  transform: translateX(2px);
}
#page-signup .signup-role-option:has(input:checked) {
  border: 2px solid var(--green-600);
  background: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 100%);
  box-shadow: 0 2px 0 rgba(5, 120, 80, 0.3), inset 0 1px 0 rgba(255,255,255,0.8);
}
#page-signup .signup-role-option:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-500);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}
#page-signup .signup-role-option input {
  width: 20px;
  height: 20px;
  accent-color: var(--green-600);
  margin: 0;
  flex-shrink: 0;
}
#page-signup .signup-role-option .role-title {
  font-weight: 700;
  color: #0f172a;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
#page-signup .signup-role-option .role-desc {
  font-size: var(--text-xs);
  color: #64748b;
  margin-top: 0.2rem;
  line-height: 1.4;
}
#page-signup .signup-role-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #475569;
  transition: all 0.25s ease;
}
#page-signup .signup-role-option:has(input:checked) .signup-role-icon {
  background: linear-gradient(135deg, var(--green-200) 0%, var(--green-100) 100%);
  color: var(--green-800);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
#page-signup .signup-form-section {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 2px solid #f1f5f9;
}
#page-signup .signup-form-section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #334155;
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
}
#page-signup .signup-form .form-group { margin-bottom: 1.1rem; }
#page-signup .signup-form .form-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.35rem;
  display: block;
}
#page-signup .signup-form input[type="email"],
#page-signup .signup-form input[type="text"],
#page-signup .signup-form input[type="password"],
#page-signup .signup-form input[type="tel"],
#page-signup .signup-form input[type="number"],
#page-signup .signup-form select {
  min-height: 50px;
  padding: 0.8rem 1.1rem;
  border-radius: 14px;
  border: 2px solid #e2e8f0;
  font-size: var(--text-base);
  transition: all 0.2s ease;
  background: #fafafa;
}
#page-signup .signup-form input:hover {
  border-color: #cbd5e1;
  background: #fff;
}
#page-signup .signup-form input:focus,
#page-signup .signup-form select:focus {
  outline: none;
  border-color: var(--green-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12);
}
#page-signup .signup-form select:hover {
  border-color: #cbd5e1;
  background: #fff;
}
.signup-maid-extra { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed #e2e8f0; }
.signup-maid-extra .signup-form-section-title { margin-bottom: 0.75rem; }
.signup-skills-group label .required { color: #b91c1c; }
.signup-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem; margin-top: 0.5rem; }
.signup-skill-option { display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 0.5rem; padding: 0.35rem 0.6rem; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 10px; font-size: var(--text-sm); font-weight: var(--font-medium); color: #334155; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.signup-skill-option:hover { background: var(--green-50); border-color: var(--green-200); }
.signup-skill-option:has(input:checked) { background: var(--green-50); border-color: var(--green-500); color: var(--green-800); }
.signup-skill-option input { margin: 0; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--green-600); }
.time-range-picker-wrap { margin-top: 1rem; }
.time-range-picker-label { display: block; margin-bottom: 0.5rem; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #475569; }
.time-range-picker { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
.time-range-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.time-range-field-label { min-width: 3rem; font-size: var(--text-sm); font-weight: 600; color: #334155; }
.time-range-inputs { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.time-range-select { min-height: 48px; padding: 0.6rem 0.75rem; font-size: 1rem; font-weight: 500; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23475569' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; }
.time-range-select:hover { border-color: #cbd5e1; }
.time-range-select:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15); }
.time-range-select#cw-work-start-hour, .time-range-select#cw-work-end-hour { min-width: 4rem; }
.time-range-select#cw-work-start-min, .time-range-select#cw-work-end-min { min-width: 4rem; }
#book-now-modal .time-range-select#book-now-start-hour,
#book-now-modal .time-range-select#book-now-end-hour { min-width: 4rem; }
#book-now-modal .time-range-select#book-now-start-min,
#book-now-modal .time-range-select#book-now-end-min { min-width: 4rem; }
.time-range-ampm { min-width: 4.5rem; }
.time-range-sep { font-size: 1.1rem; font-weight: 600; color: #64748b; }
.time-range-error { margin-top: 0.5rem; font-size: var(--text-sm); color: #dc2626; font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 400px) { .signup-skills { grid-template-columns: 1fr; } }
/* Signup service skills: compact, text beside checkbox */
#page-signup .signup-skills,
#page-signup .signup-maid-extra .signup-skills { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin-top: 0.5rem; }
#page-signup .signup-skill-option,
#page-signup .signup-maid-extra .signup-skill-option { display: inline-flex; align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 0.4rem; padding: 0.28rem 0.5rem; min-height: 0; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: var(--text-xs); font-weight: var(--font-medium); color: #334155; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
#page-signup .signup-skill-option input,
#page-signup .signup-maid-extra .signup-skill-option input { margin: 0; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--green-600); vertical-align: middle; }

#page-signup #signup-error {
  margin-bottom: 1rem;
  padding: 0.85rem 1.1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 14px;
  color: #b91c1c;
  font-size: var(--text-sm);
  font-weight: 500;
  display: none;
}
#page-signup #signup-error:not(:empty) { display: block; animation: fadeIn 0.25s ease; }
#page-signup .signup-submit {
  display: block;
  width: 100%;
  min-height: 56px;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.5rem 0 0;
  background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  letter-spacing: 0.02em;
  box-sizing: border-box;
}
#page-signup .signup-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(5, 150, 105, 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
#page-signup .signup-submit:active { transform: translateY(0); }
#page-signup .signup-free-section {
  display: block;
  width: 100%;
  margin: 1.25rem 0 0;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f8fafc 100%);
  border: 1px solid var(--green-100);
  border-radius: 16px;
  text-align: center;
  box-sizing: border-box;
}
#page-signup .signup-free-section .signup-free-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #0f172a;
  margin: 0 auto 0.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  line-height: 1.25rem;
  min-height: 1.25rem;
}
#page-signup .signup-free-section .signup-free-title .free-icon {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border-radius: 50%;
  background: var(--green-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
}
#page-signup .signup-free-section .signup-free-title .free-text {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}
#page-signup .signup-free-section .signup-free-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  font-weight: 500;
  color: #475569;
  line-height: 1.5;
  text-align: center;
}
#page-signup .signup-free-section .signup-free-list li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
#page-signup .signup-free-section .signup-free-list li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green-500);
  flex-shrink: 0;
}
#page-signup .signup-trust {
  margin-top: 0.75rem;
  text-align: center;
  font-size: var(--text-xs);
  color: #94a3b8;
}
#page-signup .signup-footer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  text-align: center;
  font-size: var(--text-sm);
  color: #64748b;
  border-top: 1px solid #f1f5f9;
}
#page-signup .signup-footer a {
  font-weight: 700;
  color: var(--green-700);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
#page-signup .signup-footer a:hover {
  text-decoration: none;
  color: var(--green-800);
  background: var(--green-50);
}
#page-signup .signup-card { animation: signupCardIn 0.5s ease; }
@keyframes signupCardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Signup onboarding wizards (step-by-step) */
#page-signup .signup-wizard {
  margin-top: 1.1rem;
  padding: 1.1rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(236, 253, 245, 0.65) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 10px 26px rgba(5, 150, 105, 0.08);
}
#page-signup .signup-wizard[hidden] { display: none !important; }
#page-signup .signup-wizard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; }
#page-signup .signup-wizard-title { margin: 0; font-size: var(--text-base); font-weight: var(--font-bold); color: #0f172a; letter-spacing: -0.01em; }
#page-signup .signup-wizard-stepcount { font-size: var(--text-xs); font-weight: var(--font-semibold); color: #64748b; }
#page-signup .signup-wizard-progress { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-bottom: 1.1rem; }
#page-signup .signup-wizard-progress > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--green-500), var(--green-600)); transition: width 0.25s ease; }
#page-signup .signup-wizard-step { display: none; }
#page-signup .signup-wizard-step.active { display: block; }
#page-signup .signup-wizard-hint { margin: -0.25rem 0 1rem; color: #64748b; font-size: var(--text-sm); line-height: var(--leading-snug); }
#page-signup .signup-wizard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
#page-signup .signup-wizard-actions .btn { margin: 0; min-height: 52px; border-radius: 14px; }
#page-signup .signup-wizard-actions .btn-secondary { background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 100%); border: 1px solid #b8a88a; color: #334155; font-weight: var(--font-semibold); box-shadow: 0 2px 0 rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.6); }
#page-signup .signup-wizard-actions .btn-secondary:hover { box-shadow: 0 3px 0 rgba(80,60,30,0.15), 0 4px 10px rgba(60,45,20,0.2), inset 0 1px 0 rgba(255,255,255,0.7); }
#page-signup .signup-wizard-skip { margin-top: 0.75rem; text-align: center; }
#page-signup .signup-wizard-skip button { background: transparent; border: none; color: var(--green-700); font-weight: var(--font-semibold); cursor: pointer; padding: 0.25rem 0.5rem; }
#page-signup .signup-wizard-skip button:hover { text-decoration: underline; }
#page-signup .signup-wizard-error { display: none; margin: 0 0 1rem; padding: 0.75rem 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; color: #b91c1c; font-size: var(--text-sm); font-weight: var(--font-medium); line-height: var(--leading-snug); }
#page-signup .signup-wizard-error:not(:empty) { display: block; }
#page-signup .signup-wizard-error.signup-success { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
#page-signup .signup-wizard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.1rem; }
#page-signup .signup-wizard-row .form-group { margin-bottom: 0; }
#page-signup .signup-email-row { display: flex; gap: 0.5rem; align-items: center; }
#page-signup .signup-email-row input { flex: 1; min-width: 0; }
#page-signup .signup-skip-btn { flex-shrink: 0; min-height: 48px; padding: 0 1rem; }
@media (max-width: 480px) {
  #page-signup .signup-wizard-row { grid-template-columns: 1fr; margin-bottom: 1.1rem; }
  #page-signup .signup-wizard-row .form-group { margin-bottom: 1.1rem; }
  #page-signup .signup-wizard-row .form-group:last-child { margin-bottom: 0; }
  #page-signup .signup-email-row { flex-wrap: wrap; }
}
#page-signup .form-group input[aria-invalid="true"] { border-color: #dc2626; background: #fef2f2; }
@media (max-width: 480px) {
  #page-signup .login-inner { padding: 1rem 0.75rem; }
  #page-signup .signup-card { padding: 1.5rem 1.25rem; border-radius: 24px; }
  #page-signup .signup-hero h1 { font-size: 1.5rem; }
  #page-signup .signup-hero .signup-badge { font-size: var(--text-xs); padding: 0.4rem 0.85rem; flex-wrap: wrap; justify-content: center; text-align: center; }
  #page-signup .signup-role-option { padding: 0.85rem 1rem; }
  #page-signup .signup-role-option:has(input:checked)::after { top: 0.6rem; right: 0.75rem; width: 22px; height: 22px; font-size: 0.7rem; }
  #page-signup .signup-role-icon { width: 40px; height: 40px; font-size: 1.2rem; }
  #page-signup .signup-free-section { padding: 0.9rem 1rem; }
  #page-signup .signup-free-section .signup-free-list { gap: 0.5rem 1rem; }
}
.login-hero { text-align: center; padding: 0 0 1.5rem; }
.login-hero .back-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 1rem; color: var(--green-700); font-size: var(--text-sm); font-weight: var(--font-medium); line-height: var(--leading-snug); text-decoration: none; transition: color 0.2s; -webkit-tap-highlight-color: transparent; }
.login-hero .back-link:hover { color: var(--green-800); text-decoration: none; }
#page-login .login-hero .signup-hero-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
#page-login .login-hero .signup-home-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; font-size: var(--text-sm); font-weight: 600; color: var(--green-700); background: rgba(255,255,255,0.85); border: 1px solid var(--green-200); border-radius: 999px; text-decoration: none; box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08); transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; }
#page-login .login-hero .signup-home-link:hover { background: #fff; border-color: var(--green-300); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12); text-decoration: none; color: var(--green-800); }
#page-admin-login .login-hero .signup-hero-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
#page-admin-login .login-hero .signup-home-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; font-size: var(--text-sm); font-weight: 600; color: var(--green-700); background: rgba(255,255,255,0.85); border: 1px solid var(--green-200); border-radius: 999px; text-decoration: none; box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08); transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; }
#page-admin-login .login-hero .signup-home-link:hover { background: #fff; border-color: var(--green-300); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12); text-decoration: none; color: var(--green-800); }
.login-hero .logo { width: 100px; height: 100px; border-radius: 20px; object-fit: contain; margin-bottom: 1rem; box-shadow: 0 4px 16px rgba(5, 150, 105, 0.2); border: 3px solid var(--green-100); display: block; margin-left: auto; margin-right: auto; }
.login-hero h1 { margin-bottom: 0.25rem; color: #0f172a; font-size: var(--text-3xl); font-weight: var(--font-bold); letter-spacing: -0.025em; line-height: var(--leading-tight); }
.login-hero .tagline { font-size: var(--text-base); font-weight: var(--font-normal); color: #64748b; line-height: var(--leading-normal); margin: 0; }
#page-login .login-card { background: #fff; border-radius: 20px; padding: 1.75rem; margin-bottom: 0; box-shadow: 0 4px 24px rgba(5, 150, 105, 0.08); border: 1px solid var(--green-100); transition: box-shadow 0.25s ease; }
#page-login .login-card:focus-within { box-shadow: 0 8px 32px rgba(5, 150, 105, 0.12); }
#page-login .login-card h2 { margin: 0 0 1rem; font-size: var(--text-xl); font-weight: var(--font-semibold); line-height: var(--leading-snug); color: #0f172a; }
#page-login .demo-pill { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.25rem; padding: 0.6rem 0.9rem; background: linear-gradient(135deg, var(--green-50) 0%, var(--green-100) 100%); border: 1px solid var(--green-200); border-radius: 12px; font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--green-800); line-height: var(--leading-snug); }
#page-login .demo-pill strong { font-weight: var(--font-semibold); color: var(--green-800); }
#page-login #login-error { display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; color: #b91c1c; font-size: var(--text-sm); font-weight: var(--font-medium); line-height: var(--leading-snug); }
#page-login #login-error:not(:empty) { display: block; animation: fadeIn 0.25s ease; }
#page-login #login-error.login-success { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
#page-admin-login #admin-login-error { display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; color: #b91c1c; font-size: var(--text-sm); font-weight: var(--font-medium); }
#page-admin-login #admin-login-error:not(:empty) { display: block; animation: fadeIn 0.25s ease; }
.admin-login-link { color: #64748b; font-weight: var(--font-medium); }
.admin-login-link:hover { color: var(--green-700); }
#page-login .form-group input { min-height: 52px; padding: 0.85rem 1rem; font-size: var(--text-base); line-height: var(--leading-normal); border-radius: 14px; }
#page-admin-login .form-group input { min-height: 52px; padding: 0.85rem 1rem; font-size: var(--text-base); border-radius: 14px; }
#page-login .btn-block { margin-top: 0.5rem; min-height: 52px; font-size: var(--text-base); font-weight: var(--font-semibold); line-height: var(--leading-normal); border-radius: 14px; }
    .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.35rem; }
    .status-dot.yes { background: var(--green-600); }
    .status-dot.no { background: #cbd5e1; }
    .action-grid { display: grid; gap: 0.5rem; }
    #page-maid .maid-status-section { display: flex; flex-direction: column; align-items: center; padding: 1rem 0 0.75rem; }
    #page-maid .maid-status-btn { width: 140px; height: 140px; border-radius: 50%; border: 2px solid #0e6b38; background: linear-gradient(180deg, #2ecc71 0%, #1a9c57 50%, #148a4a 100%); color: #fff; font-size: var(--text-base); font-weight: var(--font-bold); line-height: 1.25; text-align: center; cursor: pointer; box-shadow: 0 6px 0 #0a5c2f, 0 10px 20px rgba(10, 92, 47, 0.4), inset 0 2px 0 rgba(255,255,255,0.3); transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; display: flex; align-items: center; justify-content: center; padding: 1rem; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); }
    #page-maid .maid-status-btn:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 8px 0 #0a5c2f, 0 14px 28px rgba(10, 92, 47, 0.45), inset 0 2px 0 rgba(255,255,255,0.35); }
    #page-maid .maid-status-btn:active:not(:disabled) { transform: scale(0.98); box-shadow: 0 2px 0 #0a5c2f, inset 0 3px 8px rgba(0,0,0,0.2); }
    #page-maid .maid-status-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    #page-maid .maid-status-btn.maid-status-ended { background: linear-gradient(180deg, #78859a 0%, #5a6578 50%, #475569 100%); border-color: #3d4554; box-shadow: 0 4px 0 #3d4554, 0 8px 18px rgba(71, 85, 105, 0.4), inset 0 2px 0 rgba(255,255,255,0.2); }
    #page-maid .maid-status-label { display: block; max-width: 100%; word-break: break-word; }
    #page-maid .maid-status-hint { font-size: var(--text-sm); color: #64748b; margin: 0.5rem 0 0; text-align: center; }
    #page-maid .maid-actions-card { background: linear-gradient(180deg, rgba(5, 150, 105, 0.08) 0%, #ffffff 60%); border: 1px solid rgba(15, 118, 110, 0.2); box-shadow: 0 12px 32px rgba(15, 118, 110, 0.08); padding: 1.75rem; overflow: hidden; position: relative; }
    #page-maid .maid-actions-card::after { content: ""; position: absolute; inset: auto -40% -40% auto; width: 220px; height: 220px; background: radial-gradient(circle at center, rgba(16, 185, 129, 0.2), transparent 70%); pointer-events: none; }
    #page-maid .maid-actions-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
    #page-maid .maid-actions-head h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--font-bold); color: #0f172a; }
    #page-maid .maid-actions-head-main { display: flex; flex-direction: column; gap: 0.4rem; min-width: 220px; }
    #page-maid .maid-status-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(148, 163, 184, 0.15); color: #475569; border: 1px solid rgba(148, 163, 184, 0.35); width: fit-content; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
    #page-maid .maid-status-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.7; }
    #page-maid .maid-status-chip.is-idle { background: rgba(148, 163, 184, 0.15); border-color: rgba(148, 163, 184, 0.35); color: #475569; }
    #page-maid .maid-status-chip.is-ready { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); color: #1d4ed8; }
    #page-maid .maid-status-chip.is-enroute { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.4); color: #047857; }
    #page-maid .maid-status-chip.is-onshift { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.4); color: #b45309; }
    #page-maid .maid-status-chip.is-complete { background: rgba(99, 102, 241, 0.18); border-color: rgba(99, 102, 241, 0.45); color: #4c1d95; }
    #page-maid .maid-status-next { font-size: var(--text-sm); color: #475569; line-height: var(--leading-snug); margin: 0; max-width: 32rem; }
    #page-maid .maid-status-progress { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; min-width: 180px; }
    #page-maid .maid-status-step { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: 0.06em; color: #0f172a; text-transform: uppercase; }
    #page-maid .maid-status-progress-bar { width: 180px; height: 6px; background: rgba(148, 163, 184, 0.3); border-radius: 999px; overflow: hidden; position: relative; }
    #page-maid .maid-status-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, var(--green-500) 0%, #0ea5e9 100%); border-radius: inherit; transition: width 0.35s ease; }
    #page-maid .maid-actions-main { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: stretch; }
    #page-maid .maid-status-panel { flex: 1 1 260px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(236, 253, 245, 0.95) 100%); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: 16px; padding: 1.25rem 1rem 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); position: relative; overflow: hidden; }
    #page-maid .maid-status-panel::after { content: ""; position: absolute; inset: auto auto -60px -60px; width: 160px; height: 160px; background: radial-gradient(circle at center, rgba(16, 185, 129, 0.18), transparent 70%); }
    #page-maid .maid-status-ring { position: relative; z-index: 1; display: grid; place-items: center; }
    #page-maid .maid-status-ring::before { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at center, rgba(16, 185, 129, 0.25), transparent 70%); filter: blur(0); z-index: -1; transition: transform 0.3s ease; }
    #page-maid .maid-status-panel:hover .maid-status-ring::before { transform: scale(1.05); }
    #page-maid .maid-eta-display { background: rgba(14, 165, 233, 0.12); color: #0369a1; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: var(--text-xs); font-weight: var(--font-semibold); margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
    #page-maid .maid-actions-side { flex: 1 1 260px; display: flex; flex-direction: column; gap: 1rem; }
    #page-maid .maid-location-card { background: rgba(15, 118, 110, 0.06); border: 1px solid rgba(15, 118, 110, 0.18); border-radius: 14px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; }
    #page-maid .maid-location-header { display: flex; align-items: flex-start; gap: 0.75rem; }
    #page-maid .maid-location-icon { width: 36px; height: 36px; border-radius: 12px; background: rgba(16, 185, 129, 0.18); color: #0f766e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    #page-maid .maid-location-icon svg { width: 18px; height: 18px; }
    #page-maid .maid-location-title { margin: 0; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #0f172a; }
    #page-maid .maid-location-desc { margin: 0.2rem 0 0 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: #475569; }
    #page-maid .maid-location-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    #page-maid .maid-location-inputs label { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: #0f766e; }
    #page-maid .maid-location-inputs input { background: #fff; border: 1px solid rgba(15, 118, 110, 0.2); border-radius: 10px; padding: 0.6rem 0.65rem; font-size: var(--text-sm); font-weight: var(--font-medium); color: #0f172a; box-shadow: inset 0 1px 2px rgba(15, 118, 110, 0.08); }
    #page-maid .maid-location-inputs input:focus { outline: none; border-color: rgba(14, 116, 144, 0.6); box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.22); }
    #page-maid .maid-location-note { font-size: var(--text-xs); color: #475569; margin: 0; }
    #page-maid .maid-location-map-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(15, 118, 110, 0.2); background: #f1f5f9; min-height: 220px; }
    #page-maid .maid-location-map-wrap .leaflet-map { width: 100%; height: 220px; z-index: 0; }
    #page-maid .maid-location-map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.5rem; }
    #page-maid .maid-location-last-updated { font-size: var(--text-xs); color: #64748b; }
    #page-maid .maid-location-live-badge { font-size: var(--text-xs); font-weight: var(--font-semibold); color: #047857; display: inline-flex; align-items: center; gap: 0.25rem; }
    #page-maid .maid-emergency-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.85rem 1rem; font-size: var(--text-sm); font-weight: var(--font-semibold); border-radius: 12px; border: 1px solid #8e1515; background: linear-gradient(180deg, #ef5350 0%, #d32f2f 50%, #b71c1c 100%); color: #fff; box-shadow: 0 4px 0 #7a1212, 0 8px 20px rgba(122, 18, 18, 0.35), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 0.2s ease, box-shadow 0.2s ease; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); }
    #page-maid .maid-emergency-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #7a1212, 0 10px 24px rgba(122, 18, 18, 0.4), inset 0 1px 0 rgba(255,255,255,0.3); }
    #page-maid .maid-emergency-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
    #page-maid .maid-emergency-icon svg { width: 16px; height: 16px; }
    @media (max-width: 768px) {
      #page-maid .maid-actions-head { flex-direction: column; align-items: flex-start; }
      #page-maid .maid-status-progress { width: 100%; align-items: flex-start; }
      #page-maid .maid-status-progress-bar { width: 100%; }
      #page-maid .maid-actions-main { flex-direction: column; }
      #page-maid .maid-location-inputs { grid-template-columns: 1fr; }
      #page-maid .maid-emergency-btn { width: 100%; }
    }
    #page-maid .maid-assignment-list { display: flex; flex-direction: column; gap: 1rem; }
    #page-maid .maid-assignment-list:empty { display: none; }
    #page-maid .maid-assignment-list .maid-client-profile { margin-bottom: 0; }
    #page-maid .maid-client-card-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(226, 232, 240, 0.8); }
    #page-maid .maid-client-card-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.6rem; border-radius: 999px; }
    #page-maid .maid-client-card-chip.is-ready { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
    #page-maid .maid-client-card-chip.is-enroute { background: rgba(16, 185, 129, 0.15); color: #047857; }
    #page-maid .maid-client-card-chip.is-onshift { background: rgba(245, 158, 11, 0.18); color: #b45309; }
    #page-maid .maid-client-card-chip.is-complete { background: rgba(99, 102, 241, 0.18); color: #4c1d95; }
    #page-maid .maid-client-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    #page-maid .maid-client-card-actions .btn { min-height: 36px; padding: 0.4rem 0.75rem; font-size: var(--text-xs); font-weight: var(--font-semibold); }
    #page-maid .maid-client-profile { border-radius: 14px; overflow: visible; margin-bottom: 0; }
    #page-maid .maid-client-profile.maid-client-card--is-ready { background: linear-gradient(180deg, rgba(113, 113, 122, 0.12) 0%, #fff 40%); border: 1px solid rgba(82, 82, 91, 0.35); box-shadow: 0 2px 12px rgba(113, 113, 122, 0.12); }
    #page-maid .maid-client-profile.maid-client-card--is-enroute { background: linear-gradient(180deg, rgba(234, 88, 12, 0.14) 0%, #fff 40%); border: 1px solid rgba(194, 65, 12, 0.4); box-shadow: 0 2px 12px rgba(234, 88, 12, 0.14); }
    #page-maid .maid-client-profile.maid-client-card--is-onshift { background: linear-gradient(180deg, rgba(16, 185, 129, 0.14) 0%, #fff 40%); border: 1px solid rgba(4, 120, 87, 0.4); box-shadow: 0 2px 12px rgba(16, 185, 129, 0.14); }
    #page-maid .maid-client-profile.maid-client-card--is-complete { background: linear-gradient(180deg, rgba(239, 68, 68, 0.12) 0%, #fff 40%); border: 1px solid rgba(185, 28, 28, 0.35); box-shadow: 0 2px 12px rgba(239, 68, 68, 0.12); }
    #page-maid .maid-client-header { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.25rem 1rem; }
    #page-maid .maid-client-avatar-wrap img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: block; }
    #page-maid .maid-client-head { flex: 1; min-width: 0; }
    #page-maid .maid-client-card-circle-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
    #page-maid .maid-client-card-status-btn-wrap { position: relative; display: inline-flex; overflow: visible; }
    #page-maid .maid-client-card-status-btn-wrap .maid-status-tooltip {
      position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 10px;
      white-space: nowrap; font-size: 0.75rem; font-weight: 600; color: #fff; background: rgba(15, 23, 42, 0.95);
      padding: 0.4rem 0.65rem; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      pointer-events: none; opacity: 0; transition: opacity 0.2s ease-out; z-index: 10;
    }
    #page-maid .maid-client-card-status-btn-wrap:hover .maid-status-tooltip { opacity: 1; }
    #page-maid .maid-client-card-status-btn-wrap::before {
      content: ''; position: absolute; inset: -12px; border-radius: 999px; pointer-events: none; z-index: -1;
      opacity: 0; transition: opacity 0.3s ease;
    }
    #page-maid .maid-client-card-status-btn-wrap:has(.maid-status-coming:not(:disabled))::before {
      background: radial-gradient(circle, rgba(250,160,100,0.5) 0%, transparent 70%);
      animation: maid-status-glow-pulse 2s ease-in-out infinite;
    }
    #page-maid .maid-client-card-status-btn-wrap:has(.maid-status-start:not(:disabled))::before {
      background: radial-gradient(circle, rgba(80,220,160,0.5) 0%, transparent 70%);
      animation: maid-status-glow-pulse 2s ease-in-out infinite;
    }
    #page-maid .maid-client-card-status-btn-wrap:has(.maid-status-finish:not(:disabled))::before {
      background: radial-gradient(circle, rgba(255,120,120,0.5) 0%, transparent 70%);
      animation: maid-status-glow-pulse 2s ease-in-out infinite;
    }
    #page-maid .maid-client-card-status-btn-wrap:has(.maid-status-late:not(:disabled))::before {
      background: radial-gradient(circle, rgba(148,163,184,0.5) 0%, transparent 70%);
      animation: maid-status-glow-pulse 2s ease-in-out infinite;
    }
    @keyframes maid-status-glow-pulse {
      0%, 100% { opacity: 0.4; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.2); }
    }
    #page-maid .maid-client-card-status-btn {
      width: 128px;
      height: 128px;
      min-width: 128px;
      min-height: 128px;
      border-radius: 999px;
      border: 2px solid rgba(0,0,0,0.2);
      background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.08) 50%, rgba(0,0,0,0.05) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: #fff;
      font-size: 0.95rem;
      font-weight: var(--font-bold);
      line-height: 1.2;
      letter-spacing: -0.02em;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 8px 20px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.4);
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, filter 0.25s ease, opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    }
    #page-maid .maid-client-card-status-btn:hover:not(:disabled) {
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 6px 0 rgba(0,0,0,0.2), 0 12px 28px rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.45);
      filter: brightness(1.05);
    }
    #page-maid .maid-client-card-status-btn:active:not(:disabled) {
      transform: translateY(1px) scale(0.97);
      transition-duration: 0.1s;
      box-shadow: 0 1px 0 rgba(0,0,0,0.25), inset 0 3px 8px rgba(0,0,0,0.2);
    }
    #page-maid .maid-client-card-status-btn:focus-visible { outline: none; box-shadow: 0 18px 40px rgba(5, 150, 105, 0.4), 0 0 0 4px rgba(255,255,255,0.9), 0 0 0 12px rgba(5, 150, 105, 0.25); }
    #page-maid .maid-client-card-status-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.2); }
    #page-maid .maid-client-card-status-btn.maid-status-coming {
      background: linear-gradient(180deg, rgba(250,160,100,0.9) 0%, rgba(220,100,50,0.95) 50%, rgba(180,70,30,0.9) 100%);
      border-color: rgba(120,50,20,0.5);
      box-shadow: 0 4px 0 rgba(120,50,20,0.4), 0 8px 20px rgba(200,80,30,0.35), inset 0 2px 0 rgba(255,255,255,0.35);
    }
    #page-maid .maid-client-card-status-btn.maid-status-coming:hover:not(:disabled) {
      box-shadow: 0 6px 0 rgba(120,50,20,0.4), 0 12px 28px rgba(200,80,30,0.4), inset 0 2px 0 rgba(255,255,255,0.4);
    }
    #page-maid .maid-client-card-status-btn.maid-status-start {
      background: linear-gradient(180deg, rgba(80,220,160,0.95) 0%, rgba(20,160,100,0.95) 50%, rgba(10,120,70,0.95) 100%);
      border-color: rgba(5,80,45,0.5);
      box-shadow: 0 4px 0 rgba(5,80,45,0.4), 0 8px 20px rgba(5, 150, 105, 0.35), inset 0 2px 0 rgba(255,255,255,0.35);
    }
    #page-maid .maid-client-card-status-btn.maid-status-start:hover:not(:disabled) {
      box-shadow: 0 6px 0 rgba(5,80,45,0.4), 0 12px 28px rgba(5, 150, 105, 0.4), inset 0 2px 0 rgba(255,255,255,0.4);
    }
    #page-maid .maid-client-card-status-btn.maid-status-finish {
      background: linear-gradient(180deg, rgba(255,120,120,0.95) 0%, rgba(220,50,50,0.95) 50%, rgba(160,30,30,0.95) 100%);
      border-color: rgba(100,20,20,0.5);
      box-shadow: 0 4px 0 rgba(100,20,20,0.4), 0 8px 20px rgba(220, 38, 38, 0.35), inset 0 2px 0 rgba(255,255,255,0.35);
    }
    #page-maid .maid-client-card-status-btn.maid-status-finish:hover:not(:disabled) {
      box-shadow: 0 6px 0 rgba(100,20,20,0.4), 0 12px 28px rgba(220, 38, 38, 0.4), inset 0 2px 0 rgba(255,255,255,0.4);
    }
    #page-maid .maid-client-card-status-btn.maid-status-ended {
      border-width: 2px;
      border-color: rgba(50,55,65,0.6);
      background: linear-gradient(180deg, rgba(140,150,165,0.95) 0%, rgba(90,100,115,0.95) 50%, rgba(60,70,85,0.95) 100%);
      box-shadow: 0 4px 0 rgba(40,45,55,0.5), 0 8px 20px rgba(71, 85, 105, 0.3), inset 0 2px 0 rgba(255,255,255,0.25);
    }
    #page-maid .maid-client-card-status-btn.maid-status-late {
      border-width: 2px;
      border-color: rgba(50,55,65,0.6);
      background: linear-gradient(180deg, rgba(140,150,165,0.95) 0%, rgba(90,100,115,0.95) 50%, rgba(60,70,85,0.95) 100%);
      box-shadow: 0 4px 0 rgba(40,45,55,0.5), 0 8px 20px rgba(71, 85, 105, 0.3), inset 0 2px 0 rgba(255,255,255,0.25);
    }
    #page-maid .maid-client-card-status-btn .maid-status-label {
      display: block;
      max-width: 100%;
      word-break: break-word;
      font-size: 1.425rem;
      line-height: 1.2;
      text-align: center;
      white-space: normal;
      transition: transform 0.2s ease;
    }
    #page-maid .maid-client-card-status-btn:active:not(:disabled) .maid-status-label { transform: scale(0.98); }
    #page-maid .maid-status-panel-multi-hidden { display: none !important; }
    #page-maid .maid-client-subtitle { font-size: 0.7rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--green-600); margin: 0 0 0.25rem 0; }
    #page-maid .maid-client-name { font-size: var(--text-xl); font-weight: var(--font-bold); color: #0f172a; margin: 0 0 0.35rem 0; line-height: 1.25; }
    #page-maid .maid-client-meta { font-size: var(--text-xs); color: #64748b; margin: 0 0 0.6rem 0; }
    #page-maid .maid-client-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    #page-maid .maid-client-actions .btn-sm { padding: 0.4rem 0.85rem; font-size: var(--text-xs); font-weight: var(--font-semibold); min-height: 34px; border-radius: 8px; display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; transition: transform 0.2s; }
    #page-maid .maid-client-actions .btn-sm:hover { transform: translateY(-1px); }
    #page-maid .maid-client-actions .btn-sm svg { flex-shrink: 0; }
    #page-maid .maid-client-details { padding: 0.85rem 1.25rem 1.25rem; background: rgba(248, 250, 252, 0.8); border-top: 1px solid rgba(226, 232, 240, 0.8); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    #page-maid .maid-client-detail-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.75rem; background: #fff; border-radius: 10px; border: 1px solid #e2e8f0; min-width: 0; }
    #page-maid .maid-client-detail-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--green-50); color: var(--green-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    #page-maid .maid-client-detail-icon svg { width: 16px; height: 16px; }
    #page-maid .maid-client-detail-row > div { display: flex; flex-direction: column; gap: 0.1rem; }
    #page-maid .maid-client-detail-label { font-size: 0.65rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }
    #page-maid .maid-client-detail-value { font-size: var(--text-sm); font-weight: var(--font-semibold); color: #0f172a; }
    #page-maid .maid-client-detail-value a { color: var(--green-700); text-decoration: none; }
    #page-maid .maid-client-detail-value a:hover { text-decoration: underline; }
    #page-maid .maid-notifications-card .card-title { display: flex; align-items: center; gap: 0.5rem; }
    #page-maid .maid-notifications-card .card-title .icon-wrap { width: 36px; height: 36px; border-radius: 10px; background: var(--green-50); color: var(--green-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

    /* Complete Profile card (maid) – engaging + friendly */
    #page-maid .maid-profile-complete-card {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(255, 255, 255, 0.95) 55%, rgba(14, 165, 233, 0.08) 100%);
      border: 1px solid rgba(16, 185, 129, 0.25);
      box-shadow: 0 12px 36px rgba(5, 150, 105, 0.12);
      position: relative;
      overflow: hidden;
    }
    #page-maid .maid-profile-complete-card::after {
      content: "";
      position: absolute;
      inset: -80px -60px auto auto;
      width: 220px;
      height: 220px;
      background: radial-gradient(circle at center, rgba(16, 185, 129, 0.22), transparent 70%);
      pointer-events: none;
    }
    #page-maid .maid-profile-complete-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: nowrap; }
    #page-maid .maid-profile-complete-title { margin: 0; font-size: var(--text-lg); font-weight: var(--font-bold); color: #0f172a; }
    #page-maid .maid-profile-complete-sub { margin: 0.35rem 0 0; font-size: 0.8rem; color: #475569; line-height: var(--leading-snug); max-width: 34rem; }
    #page-maid .maid-profile-complete-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
    #page-maid .maid-profile-complete-kpi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.02rem; background: rgba(255,255,255,0.9); border: 1px solid rgba(226,232,240,0.9); border-radius: 8px; padding: 0.25rem 0.45rem; min-width: 2.75rem; }
    #page-maid .maid-profile-complete-percent { font-size: 0.85rem; font-weight: var(--font-bold); color: var(--green-800); line-height: 1; }
    #page-maid .maid-profile-complete-label { font-size: 0.5rem; font-weight: var(--font-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
    #page-maid .maid-complete-view-details-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.5rem; font-size: 0.7rem; font-weight: 600; border-radius: 8px; white-space: nowrap; height: fit-content; min-height: 1.75rem; }
    #page-maid .maid-profile-complete-progress { margin-top: 0.5rem; height: 10px; border-radius: 999px; background: rgba(148, 163, 184, 0.35); overflow: hidden; }
    #page-maid .maid-profile-complete-chevron { font-size: 0.55rem; transition: transform 0.2s ease; }
    #page-maid .maid-profile-complete-dropdown { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(226, 232, 240, 0.9); }
    #page-maid .maid-profile-complete-details-intro { margin: 0 0 0.5rem 0; font-size: var(--text-sm); font-weight: 600; color: #0f172a; }
    #page-maid .maid-profile-complete-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--green-500) 0%, #0ea5e9 100%); border-radius: inherit; transition: width 0.35s ease; }
    #page-maid .maid-profile-complete-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; }
    #page-maid .maid-profile-complete-list li {
      display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
      background: rgba(255,255,255,0.85);
      border: 1px solid rgba(226,232,240,0.9);
      border-radius: 14px;
      padding: 0.75rem 0.9rem;
    }
    #page-maid .maid-profile-complete-item { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
    #page-maid .maid-profile-complete-item strong { font-size: var(--text-sm); font-weight: var(--font-semibold); color: #0f172a; }
    #page-maid .maid-profile-complete-item span { font-size: var(--text-xs); color: #64748b; }
    #page-maid .maid-profile-complete-value { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: #0f172a; margin-top: 0.2rem; }
    /* Maid dashboard “Your profile” card (homepage-style) */
    #page-maid .maid-dashboard-profile-card { padding: 1.5rem; }
    #page-maid .maid-profile-actions-wrap { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
    #page-maid .maid-profile-actions-wrap .btn { min-height: 44px; padding: 0.5rem 1.25rem; border-radius: 12px; font-weight: 600; }
    #page-maid .maid-dashboard-profile-card-title { margin: 0 0 0.25rem 0; font-size: var(--text-lg); font-weight: var(--font-bold); color: #0f172a; }
    #page-maid .maid-dashboard-profile-card-title-wrap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    #page-maid .maid-profile-complete-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.5rem; font-size: 0.7rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: #047857; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); border-radius: 999px; }
    #page-maid .maid-profile-complete-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
    #page-maid #maid-my-profile-card-inner { max-width: 420px; }
    #page-maid #maid-my-profile-card-inner .maid-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(0,0,0,0.04); border: 1px solid rgba(226, 232, 240, 0.9); display: flex; flex-direction: column; }
    #page-maid #maid-my-profile-card-inner .maid-card-top { padding: 1.25rem 1.15rem 0; text-align: center; }
    #page-maid #maid-my-profile-card-inner .maid-avatar-wrap { width: 76px; height: 76px; margin: 0 auto 0.75rem; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(22, 163, 74, 0.18); }
    #page-maid #maid-my-profile-card-inner .maid-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
    #page-maid #maid-my-profile-card-inner .maid-name-row { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
    #page-maid #maid-my-profile-card-inner .maid-name { font-weight: 700; font-size: var(--text-base); color: #0f172a; margin: 0; }
    #page-maid #maid-my-profile-card-inner .verified-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--green-500), var(--green-600)); color: #fff; font-size: 0.65rem; font-weight: 700; }
    #page-maid #maid-my-profile-card-inner .maid-skills-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; margin-top: 0.35rem; }
    #page-maid #maid-my-profile-card-inner .maid-service-pill { display: inline-block; padding: 0.28rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: linear-gradient(135deg, var(--green-50), rgba(187, 247, 208, 0.5)); color: var(--green-800); border: 1px solid rgba(34, 197, 94, 0.25); }
    #page-maid #maid-my-profile-card-inner .maid-card-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.85rem; margin-top: 0.5rem; font-size: 0.75rem; color: #64748b; }
    #page-maid #maid-my-profile-card-inner .maid-card-meta .meta-value { font-weight: 700; color: #334155; }
    #page-maid #maid-my-profile-card-inner .maid-dashboard-details { padding: 1rem 1.15rem 1.25rem; background: rgba(248, 250, 252, 0.8); border-top: 1px solid rgba(226, 232, 240, 0.8); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    #page-maid #maid-my-profile-card-inner .maid-dashboard-details .profile-detail-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
    #page-maid #maid-my-profile-card-inner .profile-detail-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--green-50); color: var(--green-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    #page-maid #maid-my-profile-card-inner .profile-detail-icon svg { width: 18px; height: 18px; }
    #page-maid #maid-my-profile-card-inner .profile-detail-card > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
    #page-maid #maid-my-profile-card-inner .dt-label { font-size: 0.65rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
    #page-maid #maid-my-profile-card-inner .dt-value { font-size: var(--text-sm); font-weight: var(--font-semibold); color: #0f172a; }
    #page-maid #maid-my-profile-card-inner .maid-dashboard-edit-wrap { padding: 0 1.15rem 1.15rem; }
    #page-maid #maid-my-profile-card-inner .maid-dashboard-edit-wrap .btn { width: 100%; justify-content: center; min-height: 44px; border-radius: 12px; font-weight: 600; }
    /* View profile modal: same card style as dashboard */
    #page-maid #maid-view-profile-modal-body .maid-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(0,0,0,0.04); border: 1px solid rgba(226, 232, 240, 0.9); display: flex; flex-direction: column; }
    #page-maid #maid-view-profile-modal-body .maid-card-top { padding: 1.25rem 1.15rem 0; text-align: center; }
    #page-maid #maid-view-profile-modal-body .maid-avatar-wrap { width: 76px; height: 76px; margin: 0 auto 0.75rem; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(22, 163, 74, 0.18); }
    #page-maid #maid-view-profile-modal-body .maid-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
    #page-maid #maid-view-profile-modal-body .maid-name-row { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
    #page-maid #maid-view-profile-modal-body .maid-name { font-weight: 700; font-size: var(--text-base); color: #0f172a; margin: 0; }
    #page-maid #maid-view-profile-modal-body .verified-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--green-500), var(--green-600)); color: #fff; font-size: 0.65rem; font-weight: 700; }
    #page-maid #maid-view-profile-modal-body .maid-skills-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; margin-top: 0.35rem; }
    #page-maid #maid-view-profile-modal-body .maid-service-pill { display: inline-block; padding: 0.28rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: linear-gradient(135deg, var(--green-50), rgba(187, 247, 208, 0.5)); color: var(--green-800); border: 1px solid rgba(34, 197, 94, 0.25); }
    #page-maid #maid-view-profile-modal-body .maid-card-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.85rem; margin-top: 0.5rem; font-size: 0.75rem; color: #64748b; }
    #page-maid #maid-view-profile-modal-body .maid-card-meta .meta-value { font-weight: 700; color: #334155; }
    #page-maid #maid-view-profile-modal-body .maid-dashboard-details { padding: 1rem 1.15rem 1.25rem; background: rgba(248, 250, 252, 0.8); border-top: 1px solid rgba(226, 232, 240, 0.8); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    #page-maid #maid-view-profile-modal-body .maid-dashboard-details .profile-detail-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
    #page-maid #maid-view-profile-modal-body .profile-detail-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--green-50); color: var(--green-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    #page-maid #maid-view-profile-modal-body .profile-detail-icon svg { width: 18px; height: 18px; }
    #page-maid #maid-view-profile-modal-body .profile-detail-card > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
    #page-maid #maid-view-profile-modal-body .dt-label { font-size: 0.65rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
    #page-maid #maid-view-profile-modal-body .dt-value { font-size: var(--text-sm); font-weight: var(--font-semibold); color: #0f172a; }
    #page-maid .maid-profile-complete-status {
      flex-shrink: 0;
      font-size: 0.7rem;
      font-weight: var(--font-semibold);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.35rem 0.6rem;
      border-radius: 999px;
      border: 1px solid transparent;
    }
    #page-maid .maid-profile-complete-status.ok { background: rgba(16,185,129,0.18); color: #047857; border-color: rgba(16,185,129,0.35); }
    #page-maid .maid-profile-complete-status.missing { background: rgba(245,158,11,0.18); color: #b45309; border-color: rgba(245,158,11,0.35); }
    #page-maid .maid-profile-complete-status-clickable { cursor: pointer; }
    #page-maid .maid-profile-complete-status-clickable:hover { background: rgba(245,158,11,0.28); border-color: rgba(245,158,11,0.5); text-decoration: underline; }
    #page-maid .maid-profile-complete-status-clickable:focus { outline: none; box-shadow: 0 0 0 2px rgba(245,158,11,0.4); }
    #page-maid .maid-profile-complete-all-done { margin: 0; padding: 0.75rem 0; font-size: var(--text-sm); }
    #page-maid .maid-profile-complete-notification { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 12px; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #047857; }
    #page-maid .maid-profile-complete-notification svg { flex-shrink: 0; width: 20px; height: 20px; }
    #page-maid .maid-work-cancelled-card {
      position: relative; padding: 0.75rem 2.5rem 0.75rem 1rem; margin-bottom: 1rem;
      border-radius: 14px; border: 1px solid rgba(185, 28, 28, 0.35);
      background: linear-gradient(135deg, #fecaca 0%, #fef2f2 50%, #fee2e2 100%);
      box-shadow: 0 1px 4px rgba(220, 38, 38, 0.1);
    }
    #page-maid .maid-work-cancelled-card .maid-work-cancelled-message {
      margin: 0; font-size: var(--text-sm); font-weight: var(--font-medium); color: #991b1b; line-height: 1.4;
    }
    #page-maid .maid-work-cancelled-card .maid-work-cancelled-close {
      position: absolute; top: 0.5rem; right: 0.5rem;
      width: 28px; height: 28px; border: none; border-radius: 8px;
      background: rgba(220, 38, 38, 0.15); color: #b91c1c; font-size: 1.1rem; line-height: 1;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, color 0.2s;
    }
    #page-maid .maid-work-cancelled-card .maid-work-cancelled-close:hover {
      background: rgba(220, 38, 38, 0.25); color: #7f1d1d;
    }
    #page-maid .maid-latest-booking-card { position: relative; border-color: rgba(5, 150, 105, 0.35); background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, #fff 100%); }
    #page-maid .maid-latest-booking-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
    #page-maid .maid-latest-booking-title { margin: 0; font-size: var(--text-lg); font-weight: var(--font-bold); color: #0f172a; }
    #page-maid .maid-latest-booking-close { width: 32px; height: 32px; border: none; border-radius: 8px; background: rgba(100, 116, 139, 0.15); color: #64748b; font-size: 1.25rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, color 0.2s; }
    #page-maid .maid-latest-booking-close:hover { background: rgba(100, 116, 139, 0.25); color: #0f172a; }
    #page-maid .maid-latest-booking-message { margin: 0 0 0.5rem 0; font-size: var(--text-sm); color: #334155; line-height: var(--leading-snug); }
    #page-maid .maid-latest-booking-details { font-size: var(--text-sm); color: #475569; margin-bottom: 1rem; }
    #page-maid .maid-latest-booking-details p { margin: 0.25rem 0 0 0; }
    #page-maid .maid-latest-booking-details p:first-child { margin-top: 0; }
    #page-maid .maid-latest-booking-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; overflow-x: auto; }
    #page-maid .maid-latest-booking-actions .btn { min-height: 36px; padding: 0.4rem 0.75rem; font-size: var(--text-sm); }
    .maid-booking-actions-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.35rem; }
    .maid-booking-actions-row .btn { flex-shrink: 0; white-space: nowrap; }
    /* Client info modal: photo + name/location/work time/schedule (no phone) */
    .maid-booking-client-info-top { display: flex; gap: 1rem; align-items: flex-start; }
    .maid-booking-client-photo-wrap { flex-shrink: 0; width: 80px; height: 80px; border-radius: 12px; overflow: hidden; background: #f1f5f9; }
    .maid-booking-client-photo { width: 100%; height: 100%; object-fit: cover; }
    .maid-booking-client-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); color: #94a3b8; }
    .maid-booking-client-info-meta { flex: 1; min-width: 0; }
    #page-maid .maid-profile-complete-actions { margin-top: 1rem; display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
    .maid-profile-photo-section { margin-bottom: 1.25rem; }
    .maid-profile-photo-section label { display: block; margin-bottom: 0.5rem; font-weight: var(--font-semibold); color: #0f172a; }
    .maid-profile-photo-wrap { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
    .maid-profile-photo-preview { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: #f1f5f9; border: 2px solid #e2e8f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .maid-profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .maid-profile-photo-placeholder { font-size: var(--text-xs); color: #94a3b8; padding: 0.5rem; text-align: center; }
    .maid-profile-photo-actions { display: flex; flex-direction: column; gap: 0.35rem; }
    .maid-profile-photo-hint { font-size: var(--text-xs); display: block; }
    .maid-profile-doc-section { margin-bottom: 1.1rem; }
    .maid-profile-doc-section label { display: block; margin-bottom: 0.5rem; font-weight: var(--font-semibold); color: #0f172a; }
    .maid-profile-doc-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
    .maid-profile-doc-upload { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
    .maid-profile-doc-preview { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background: #f1f5f9; border: 2px solid #e2e8f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .maid-profile-doc-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .maid-profile-doc-placeholder { font-size: var(--text-xs); color: #94a3b8; padding: 0.5rem; text-align: center; }

    #page-maid .maid-notifications-card .client-notifications-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0; }
    #page-maid .maid-notifications-card .client-notification { padding: 1rem 1.1rem; border: 1px solid #e2e8f0; border-radius: 16px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; }
    #page-maid .maid-notifications-card .client-notification:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12); }
    #page-maid .maid-notifications-card .client-notification--featured { border-color: rgba(5, 150, 105, 0.2); background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(255, 255, 255, 0.9) 100%); box-shadow: 0 10px 28px rgba(5, 150, 105, 0.18); }
    #page-maid .maid-notifications-card .client-notification-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; width: 100%; }
    #page-maid .maid-notifications-card .client-notification-label { display: inline-flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
    #page-maid .maid-notifications-card .client-notification-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: rgba(5, 150, 105, 0.12); color: var(--green-700); }
    #page-maid .maid-notifications-card .client-notification-type { font-size: var(--text-sm); font-weight: 600; color: #0f172a; line-height: 1.3; }
    #page-maid .maid-notifications-card .client-notification-time { font-size: 0.7rem; color: #64748b; flex-shrink: 0; margin-left: auto; white-space: nowrap; }
    #page-maid .maid-notifications-card .client-notification-title { margin: 0 0 0.3rem; font-size: var(--text-base); font-weight: var(--font-semibold); color: #0f172a; line-height: var(--leading-snug); }
    #page-maid .maid-notifications-card .client-notification-message { margin: 0; font-size: var(--text-sm); color: #475569; line-height: 1.45; }
    #page-maid .maid-work-summary-card h2 { margin-bottom: 0.25rem; }
    #page-maid .maid-work-summary-note { font-size: var(--text-xs); margin: 0 0 0.75rem 0; }
    #page-maid .maid-work-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
    #page-maid .maid-work-summary-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.75rem 0.5rem; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 12px; border: 1px solid #e2e8f0; }
    #page-maid .maid-work-summary-value { font-size: 1.35rem; font-weight: var(--font-bold); color: var(--green-600); line-height: 1.2; }
    #page-maid .maid-work-summary-label { font-size: 0.7rem; color: #64748b; margin-top: 0.3rem; text-align: center; line-height: 1.2; }
    #page-maid .maid-work-summary-earnings { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border-radius: 12px; border: 1px dashed rgba(5, 150, 105, 0.4); background: rgba(236, 253, 245, 0.85); margin-bottom: 0.75rem; }
    #page-maid .maid-work-summary-earnings-label { margin: 0; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #0f172a; }
    #page-maid .maid-work-summary-earnings-note { margin: 0.15rem 0 0 0; font-size: var(--text-xs); color: #0f766e; }
    #page-maid .maid-work-summary-earnings-value { margin: 0; font-size: 1.5rem; font-weight: var(--font-bold); color: #065f46; letter-spacing: -0.01em; }
    #page-maid .maid-work-summary-payout { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.75rem; background: rgba(5, 150, 105, 0.08); border-radius: 10px; border: 1px solid var(--green-200); }
    #page-maid .maid-work-summary-payout-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: #334155; }
    #page-maid .maid-work-summary-payout-date { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--green-700); }
    #page-maid .maid-work-summary-actions { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e2e8f0; }
    /* Full Activity Report – admin-style (same for maid, client, admin) */
    #admin-activity-report-modal { z-index: 10003; }
    .maid-activity-report-modal .maid-activity-report-card { max-width: 560px; width: 95%; max-height: 85vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 50%, #d1fae5 100%); border: 1px solid var(--green-200); box-shadow: 0 20px 40px rgba(5, 150, 105, 0.12); border-radius: 16px; overflow: hidden; }
    .maid-activity-report-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 2px solid var(--green-200); background: linear-gradient(135deg, #059669 0%, #047857 100%); color: #fff; }
    .maid-activity-report-head h2 { margin: 0; font-size: 1.25rem; font-weight: var(--font-bold); color: #fff; letter-spacing: -0.02em; }
    .maid-activity-report-head .admin-modal-close { color: rgba(255,255,255,0.9); font-size: 1.5rem; background: rgba(255,255,255,0.15); border-radius: 8px; padding: 0.25rem 0.5rem; line-height: 1; border: none; cursor: pointer; }
    .maid-activity-report-head .admin-modal-close:hover { background: rgba(255,255,255,0.25); color: #fff; }
    .maid-activity-report-body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; background: rgba(236, 253, 245, 0.5); }
    .maid-activity-report-loading { margin: 0; text-align: center; padding: 1.5rem; color: var(--green-700); font-weight: var(--font-medium); }
    .maid-activity-report-empty { margin: 0; text-align: center; padding: 1.5rem; color: var(--green-700); }
    .maid-activity-report-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .maid-activity-report-date-header { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--green-800); margin: 0.75rem 0 0.35rem 0; padding: 0.4rem 0.75rem; background: rgba(5, 150, 105, 0.2); border-radius: 8px; border-left: 4px solid var(--green-600); }
    .maid-activity-report-date-header:first-child { margin-top: 0; }
    .maid-activity-report-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; background: #fff; border: 1px solid var(--green-200); border-radius: 12px; transition: background 0.2s, border-color 0.2s; box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08); }
    .maid-activity-report-item:hover { background: #f0fdf4; border-color: var(--green-300); box-shadow: 0 2px 8px rgba(5, 150, 105, 0.12); }
    .maid-activity-report-item .activity-type { flex-shrink: 0; font-size: var(--text-xs); font-weight: var(--font-bold); padding: 0.35rem 0.6rem; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.02em; }
    .maid-activity-report-item .activity-type.coming_up { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; border: 1px solid var(--green-300); }
    .maid-activity-report-item .activity-type.start_work { background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%); color: #0f766e; border: 1px solid #5eead4; }
    .maid-activity-report-item .activity-type.end_work { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #047857; border: 1px solid var(--green-200); }
    .maid-activity-report-item .activity-meta { flex: 1; min-width: 0; }
    .maid-activity-report-item .activity-client { font-weight: var(--font-bold); color: #064e3b; margin-bottom: 0.35rem; font-size: var(--text-sm); }
    .maid-activity-report-item .activity-phone { font-size: var(--text-xs); color: var(--green-700); margin-bottom: 0.35rem; }
    .maid-activity-report-item .activity-phone-link { color: var(--green-700); font-weight: var(--font-medium); text-decoration: none; }
    .maid-activity-report-item .activity-phone-link:hover { text-decoration: underline; color: var(--green-800); }
    .maid-activity-report-item .activity-detail-row { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--text-xs); margin-bottom: 0.2rem; }
    .maid-activity-report-item .activity-detail-label { color: #64748b; flex-shrink: 0; min-width: 4.5rem; }
    .maid-activity-report-item .activity-detail-value { color: #065f46; font-weight: var(--font-medium); }
    .maid-activity-report-item .activity-pressed-at { margin-top: 0.35rem; margin-bottom: 0.35rem; padding: 0.4rem 0.6rem; background: rgba(5, 150, 105, 0.12); border-radius: 8px; border-left: 3px solid var(--green-600); }
    .maid-activity-report-item .activity-pressed-label { display: block; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--green-700); margin-bottom: 0.15rem; }
    .maid-activity-report-item .activity-time { font-size: 1.1rem; font-weight: var(--font-bold); color: var(--green-800); }
    .maid-activity-report-item .activity-duration { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--green-800); margin-top: 0.2rem; }
    .maid-activity-report-item .activity-rating { font-size: var(--text-sm); font-weight: var(--font-semibold); color: #b45309; margin-top: 0.2rem; }
    .maid-activity-report-item .activity-date { font-size: var(--text-xs); color: var(--green-600); }

    @media (max-width: 480px) {
      #page-maid .maid-work-summary-grid { grid-template-columns: repeat(2, 1fr); }
      #page-maid .maid-work-summary-earnings { flex-direction: column; align-items: flex-start; }
      #page-maid .maid-client-header { flex-wrap: wrap; }
      #page-maid .maid-client-header .maid-client-head { text-align: left; }
      #page-maid .maid-client-card-circle-wrap { width: 100%; justify-content: center; margin-top: 0.5rem; }
      #page-maid .maid-client-card-status-btn { width: 168px; height: 168px; min-width: 168px; min-height: 168px; font-size: 1.2rem; padding: 1.02rem; }
      #page-maid .maid-client-actions { justify-content: flex-start; }
    }
    .btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none !important; }
    .loading-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: -0.2em; margin-right: 0.35rem; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Client dashboard – professional layout and typography (type scale) */
    #page-client { font-size: var(--text-base); line-height: var(--leading-normal); font-weight: var(--font-normal); color: #334155; }
    #page-client .page-header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e2e8f0; }
    #page-client .page-header h1 { font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: var(--leading-tight); letter-spacing: -0.025em; color: #0f172a; margin: 0 0 0.35rem 0; }
    #page-client .page-header .page-sub { font-size: var(--text-sm); font-weight: var(--font-normal); line-height: var(--leading-normal); color: #64748b; margin: 0; max-width: 36em; }
    #page-client .card { padding: 1.5rem; margin-bottom: 1.25rem; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1px solid #e2e8f0; background: #fff; transition: box-shadow 0.2s ease; }
    #page-client .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
    #page-client .card-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: var(--text-base); font-weight: var(--font-semibold); line-height: var(--leading-snug); letter-spacing: -0.01em; color: #0f172a; }
    #page-client .card-title .icon-wrap { width: 36px; height: 36px; border-radius: 10px; background: var(--green-50); color: var(--green-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    #page-client .card-title .icon-wrap svg { width: 20px; height: 20px; }
    #page-client .client-today-card { background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
    #page-client .client-today-card .card-title { margin-bottom: 0.65rem; }
    #page-client .client-today-card .card-title .icon-wrap { background: linear-gradient(135deg, var(--green-100) 0%, var(--green-200) 100%); color: var(--green-800); }
    #page-client .client-today-list { display: grid; gap: 1.25rem; }
    #page-client .client-maid-profile,
    #page-client .client-maid-card-item { background: linear-gradient(180deg, rgba(5, 150, 105, 0.06) 0%, #fff 35%); border-radius: 16px; border: 1px solid rgba(5, 150, 105, 0.2); box-shadow: 0 4px 20px rgba(5, 150, 105, 0.08); overflow: hidden; }
    #page-client .client-profile-header { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.5rem 1.5rem 1rem; }
    #page-client .client-profile-avatar-wrap { position: relative; flex-shrink: 0; }
    #page-client .client-profile-avatar-wrap img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.12); display: block; }
    #page-client .client-profile-verified-badge { position: absolute; bottom: -2px; right: -2px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%); color: #fff; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(5, 150, 105, 0.4); }
    #page-client .client-profile-head { flex: 1; min-width: 0; }
    #page-client .client-profile-subtitle { font-size: 0.7rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.12em; color: var(--green-600); margin: 0 0 0.25rem 0; }
    #page-client .client-profile-assigned-to { font-size: var(--text-sm); font-weight: var(--font-medium); color: #64748b; margin: 0 0 0.35rem 0; }
    #page-client .client-profile-name { font-size: var(--text-xl); font-weight: var(--font-bold); line-height: 1.25; letter-spacing: -0.03em; color: #0f172a; margin: 0 0 0.5rem 0; }
    #page-client .client-profile-head .skills-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.75rem 0; }
    #page-client .client-profile-head .skill-pill { padding: 0.25rem 0.6rem; border-radius: 8px; font-size: 0.7rem; font-weight: var(--font-semibold); background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0.06) 100%); color: var(--green-700); border: 1px solid rgba(5, 150, 105, 0.25); }
    #page-client .client-profile-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    #page-client .client-profile-actions .client-contact-btn { padding: 0.5rem 1rem; font-size: var(--text-sm); font-weight: var(--font-semibold); min-height: 38px; border-radius: 10px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; display: inline-flex; align-items: center; gap: 0.4rem; }
    #page-client .client-profile-actions .client-contact-btn:hover { transform: translateY(-1px); }
    #page-client .client-profile-actions .client-contact-btn svg { width: 18px; height: 18px; }
    /* View details: compact layout, same spacing between blocks */
    #page-client .client-profile-details { padding: 0.75rem 1.25rem 1.25rem; background: rgba(248, 250, 252, 0.8); border-top: 1px solid rgba(226, 232, 240, 0.8); }
    #page-client .client-profile-meta { font-size: var(--text-xs); font-weight: var(--font-medium); color: #94a3b8; margin: 0 0 0.5rem 0; }
    #page-client .client-profile-meta.client-assigned-time { margin-bottom: 0.5rem; font-size: var(--text-sm); font-weight: var(--font-bold); color: #0f172a; }
    #page-client .btn-cancel-maid { font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 0.4rem 0.85rem; min-height: 32px; border-radius: 8px; border: 1px solid #b91c1c; color: #dc2626; background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%); box-shadow: 0 2px 0 rgba(120,30,30,0.2), inset 0 1px 0 rgba(255,255,255,0.5); }
    #page-client .btn-cancel-maid:hover { background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%); box-shadow: 0 3px 0 rgba(120,30,30,0.25), 0 4px 10px rgba(180,50,50,0.2), inset 0 1px 0 rgba(255,255,255,0.6); }
    #page-client .client-profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    #page-client .client-profile-grid .profile-detail-card { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; background: #fff; border-radius: 10px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: box-shadow 0.2s, border-color 0.2s; }
    #page-client .client-profile-grid .profile-detail-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-color: var(--green-200); }
    #page-client .client-profile-grid .profile-detail-card .profile-detail-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--green-50); color: var(--green-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    #page-client .client-profile-grid .profile-detail-card .profile-detail-icon svg { width: 14px; height: 14px; }
    #page-client .client-profile-grid .profile-detail-card > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
    #page-client .client-profile-grid .profile-detail-card .dt-label { font-size: 0.575rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }
    #page-client .client-profile-grid .profile-detail-card .dt-value { font-size: 0.75rem; font-weight: var(--font-semibold); color: #0f172a; }
    #page-client .client-profile-grid .profile-detail-card a { color: var(--green-700); text-decoration: none; font-size: 0.75rem; }
    #page-client .client-profile-grid .profile-detail-card a:hover { text-decoration: underline; }
    #page-client .client-profile-grid .profile-detail-score .profile-detail-icon { background: linear-gradient(135deg, var(--green-100) 0%, var(--green-200) 100%); color: var(--green-700); }
    #page-client .client-profile-grid .dt-value-score { font-size: 0.8125rem; color: var(--green-700); }
    #page-client .client-profile-corner { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    #page-client .client-profile-corner .client-contact-btn { padding: 0.5rem 1rem; font-size: var(--text-sm); font-weight: var(--font-semibold); min-height: 38px; border-radius: 10px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
    #page-client .client-profile-corner .client-contact-btn:hover { transform: translateY(-1px); }
    #page-client .client-contact-btn svg { width: 18px; height: 18px; }
    #page-client .client-contact-btn.btn-outline { border: 1px solid #a89878; color: var(--green-700); background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 100%); box-shadow: 0 2px 0 rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.6); }
    #page-client .client-contact-btn.btn-outline:hover { box-shadow: 0 3px 0 rgba(80,60,30,0.15), 0 4px 10px rgba(60,45,20,0.2), inset 0 1px 0 rgba(255,255,255,0.7); }
    #page-client .client-status-highlight-wrap { margin-bottom: 1.25rem; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, var(--green-50) 0%, #fff 100%); border: 1px solid var(--green-200); border-radius: 14px; text-align: center; box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08); }
    #page-client .client-status-highlight-label { font-size: var(--text-xs); font-weight: var(--font-bold); line-height: var(--leading-tight); text-transform: uppercase; letter-spacing: 0.1em; color: var(--green-700); margin: 0 0 0.75rem 0; }
    #page-client .client-status-highlight { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; }
    #page-client .client-status-highlight .status-pill { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.75rem 1.25rem; border-radius: 12px; font-size: var(--text-base); font-weight: var(--font-semibold); line-height: var(--leading-snug); border: 1px solid var(--green-300); background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
    #page-client .client-status-highlight .status-pill .status-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--green-600); }
    #page-client .client-status-highlight .status-pill.status-pill--coming { border-color: rgba(180,70,30,0.55); background: rgba(250,160,100,0.22); color: #b45309; }
    #page-client .client-status-highlight .status-pill.status-pill--coming .status-icon { color: #b45309; }
    #page-client .client-status-highlight .status-pill.status-pill--late { border-color: rgba(146,64,14,0.55); background: rgba(254,215,170,0.3); color: #b45309; }
    #page-client .client-status-highlight .status-pill.status-pill--late .status-icon { color: #d97706; }
    #page-client .client-status-highlight .status-pill.status-pill--did-not-start { border-color: rgba(71,85,105,0.55); background: rgba(148,163,184,0.2); color: #475569; }
    #page-client .client-status-highlight .status-pill.status-pill--did-not-start .status-icon { color: #64748b; }
    #page-client .client-status-highlight .status-pill.status-pill--started { border-color: var(--green-300); background: rgba(16,185,129,0.14); color: #047857; }
    #page-client .client-status-highlight .status-pill.status-pill--started .status-icon { color: var(--green-600); }
    #page-client .client-status-highlight .status-pill.status-pill--work-done { border-color: rgba(220,50,50,0.55); background: rgba(254,202,202,0.5); color: #b91c1c; }
    #page-client .client-status-highlight .status-pill.status-pill--work-done .status-icon { color: #b91c1c; }
    #page-client .client-status-highlight .status-pill.status-pill--not-attended,
    #page-client .client-status-highlight .status-pill.status-pill--will-arrive { border-color: rgba(148,163,184,0.5); background: rgba(148,163,184,0.12); color: #475569; }
    #page-client .client-status-highlight .status-pill.status-pill--not-attended .status-icon,
    #page-client .client-status-highlight .status-pill.status-pill--will-arrive .status-icon { color: #64748b; }
    /* Today's status pills: pulsing animation (same effect as maid status buttons) */
    @keyframes client-status-pill-pulse {
      0%, 100% { transform: scale(1); filter: brightness(1); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
      50% { transform: scale(1.05); filter: brightness(1.12); box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 20px 4px var(--pill-glow, rgba(250,180,100,0.4)); }
    }
    #page-client .client-status-highlight .status-pill.status-pill--coming { --pill-glow: rgba(250,160,100,0.55); }
    #page-client .client-status-highlight .status-pill.status-pill--late { --pill-glow: rgba(217,119,6,0.45); }
    #page-client .client-status-highlight .status-pill.status-pill--started { --pill-glow: rgba(16,185,129,0.45); }
    #page-client .client-status-highlight .status-pill.status-pill--work-done { --pill-glow: rgba(254,202,202,0.6); }
    #page-client .client-status-highlight .status-pill.status-pill--not-attended,
    #page-client .client-status-highlight .status-pill.status-pill--will-arrive { --pill-glow: rgba(148,163,184,0.45); }
    /* Animate only active states: "Currently in Field Working" (started) and "On the Way" (coming) */
    @media (prefers-reduced-motion: no-preference) {
      #page-client .client-status-highlight .status-pill.status-pill--started,
      #page-client .client-status-highlight .status-pill.status-pill--coming,
      #page-client .client-status-highlight .status-pill.status-pill--late {
        animation: client-status-pill-pulse 2s ease-in-out infinite;
        will-change: transform;
      }
    }
    #page-client .client-card-status-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 10px; font-size: var(--text-sm); font-weight: var(--font-semibold); border: 1px solid var(--green-300); background: #fff; color: #0f172a; }
    #page-client .client-card-status-pill .status-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--green-600); }
    #page-client .client-card-status-pill--is-not-attended { border-color: rgba(148,163,184,0.5); background: rgba(148,163,184,0.12); color: #475569; }
    #page-client .client-card-status-pill--is-not-attended .status-icon { color: #64748b; }
    #page-client .client-card-status-pill--is-late { border-color: rgba(146,64,14,0.45); background: rgba(180,83,9,0.15); color: #b45309; }
    #page-client .client-card-status-pill--is-late .status-icon { color: #d97706; }
    #page-client .client-card-status-pill--is-did-not-start { border-color: rgba(71,85,105,0.45); background: rgba(100,116,139,0.15); color: #475569; }
    #page-client .client-card-status-pill--is-did-not-start .status-icon { color: #64748b; }
    #page-client .client-action-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.65rem; }
    #page-client .client-action-btn { min-width: 0; padding: 0.75rem 1rem; font-size: var(--text-base); font-weight: var(--font-semibold); line-height: var(--leading-normal); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 10px; transition: background 0.2s, border-color 0.2s, color 0.2s; font-family: inherit; }
    #page-client .client-action-btn .btn-icon { flex-shrink: 0; width: 20px; height: 20px; }
    #page-client #client-help-section .card-title { font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: var(--leading-snug); color: #0f172a; letter-spacing: -0.01em; }
    #page-client #client-help-section .card-title .icon-wrap { width: 36px; height: 36px; }
    .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 1rem; backdrop-filter: blur(6px); }
    /* Client info + Reject modals: above notification center (10001) when opened from it */
    #maid-booking-client-info-modal, #maid-reject-booking-modal { z-index: 10002; }
    #client-maid-profile-modal { z-index: 10001; }
    #book-now-modal { z-index: 10002; }
    .modal-card { background: #fff; border-radius: 16px; padding: 1.5rem; max-width: 420px; width: 100%; box-shadow: 0 24px 48px rgba(0,0,0,0.12); border: 1px solid #e2e8f0; }
    .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
    .modal-title { margin: 0 0 0.5rem 0; font-size: var(--text-xl); font-weight: var(--font-bold); line-height: var(--leading-tight); letter-spacing: -0.02em; color: #0f172a; }
    .modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; }
    #page-client .client-empty { text-align: center; padding: 1.75rem 1.25rem; font-size: var(--text-sm); font-weight: var(--font-medium); line-height: var(--leading-relaxed); color: #64748b; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; }
    #page-client .client-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
    #page-client .client-form-row .form-group { margin-bottom: 0; }
    #page-client .client-form-row .form-group label { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.3rem; color: #475569; }
    #page-client .client-form-row .form-group input { padding: 0.55rem 0.75rem; font-size: 0.875rem; }
    #page-client .client-monthly-wrap { margin-top: 1rem; }
    #page-client .client-summary-placeholder { text-align: center; padding: 1.5rem 1.25rem; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px; font-size: var(--text-sm); font-weight: var(--font-medium); line-height: var(--leading-relaxed); color: #64748b; }
    #page-client .client-summary-placeholder p { margin: 0; }
    #page-client .client-summary-loaded { display: none; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
    #page-client .client-summary-loaded.visible { display: block; }
    #page-client .client-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid #e2e8f0; gap: 0.75rem; font-size: var(--text-sm); line-height: var(--leading-normal); }
    #page-client .client-summary-row:last-child { border-bottom: none; }
    #page-client .client-summary-row .label { font-size: var(--text-sm); font-weight: var(--font-medium); color: #64748b; }
    #page-client .client-summary-row .value { font-size: var(--text-sm); font-weight: var(--font-semibold); color: #0f172a; }
    #page-client .client-summary-row.highlight { background: var(--green-50); }
    #page-client .client-summary-row.highlight .value { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--green-700); }
    #page-client .client-summary-loaded { padding: 0; }
    #page-client .client-history-summary { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; border-radius: 12px 12px 0 0; overflow: hidden; border-bottom: 1px solid #e2e8f0; }
    #page-client .client-history-summary .client-summary-row { flex: 1; min-width: 140px; border-radius: 0; border-bottom: none; border-right: 1px solid #e2e8f0; }
    #page-client .client-history-summary .client-summary-row:last-child { border-right: none; }
    #page-client .client-history-block { margin-top: 1rem; padding: 0; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
    #page-client #client-history-loaded .client-history-block:first-of-type { margin-top: 1rem; }
    #page-client .client-history-subtitle { margin: 0; padding: 0.75rem 1rem; font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: var(--leading-snug); color: #334155; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 0.5rem; }
    #page-client .client-history-subtitle .client-history-subtitle-icon { width: 18px; height: 18px; color: var(--green-600); flex-shrink: 0; }
    #page-client .client-notifications-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }
    #page-client .client-notification { padding: 1rem 1.1rem; border: 1px solid #e2e8f0; border-radius: 16px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; }
    #page-client .client-notification:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12); }
    #page-client .client-notification--featured { border-color: rgba(5, 150, 105, 0.2); background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(255, 255, 255, 0.9) 100%); box-shadow: 0 10px 28px rgba(5, 150, 105, 0.18); position: relative; overflow: hidden; }
    #page-client .client-notification--featured::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.18), transparent 55%); pointer-events: none; }
    #page-client .client-notification-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.45rem; }
    #page-client .client-notification-label { display: inline-flex; align-items: center; gap: 0.65rem; }
    #page-client .client-notification-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(5, 150, 105, 0.12); color: var(--green-700); }
    #page-client .client-notification-icon svg { width: 20px; height: 20px; }
    #page-client .client-notification--featured .client-notification-icon { background: rgba(5, 150, 105, 0.22); color: var(--green-800); }
    #page-client .client-notification-type { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: #0f172a; }
    #page-client .client-notification-time { font-size: var(--text-xs); color: #94a3b8; white-space: nowrap; }
    #page-client .client-notification-title { margin: 0 0 0.3rem; font-size: var(--text-base); font-weight: var(--font-semibold); color: #0f172a; line-height: var(--leading-snug); }
    #page-client .client-notification-message { margin: 0; font-size: var(--text-sm); color: #334155; line-height: var(--leading-normal); }
    #page-client .client-notifications-footer { display: flex; justify-content: center; }
    #page-client .client-notifications-footer .btn-inline { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.25rem; border-radius: 999px; border: 1px solid #b8a88a; background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 100%); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--green-700); box-shadow: 0 2px 0 rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.5); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    #page-client .client-notifications-footer .btn-inline:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(80,60,30,0.15), 0 5px 12px rgba(60,45,20,0.2), inset 0 1px 0 rgba(255,255,255,0.6); }
    #page-client .client-notifications-footer svg { width: 16px; height: 16px; }
    #page-client .client-payment-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 0; border-radius: 0; border: none; }
    #page-client .client-history-block .client-payment-table-wrap { border-radius: 0 0 12px 12px; }
    #page-client .client-payment-table { width: 100%; min-width: 260px; font-size: var(--text-sm); line-height: var(--leading-normal); border-collapse: collapse; }
    #page-client .client-payment-table th, #page-client .client-payment-table td { padding: 0.7rem 1rem; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
    #page-client .client-payment-table th { background: #f8fafc; font-size: var(--text-xs); font-weight: var(--font-semibold); color: #475569; text-align: left; }
    #page-client .client-payment-table td { font-size: var(--text-sm); font-weight: var(--font-normal); text-align: left; color: #334155; }
    #page-client .client-payment-table th:last-child, #page-client .client-payment-table td:last-child { text-align: right; white-space: nowrap; font-weight: var(--font-semibold); font-size: var(--text-sm); color: #0f172a; }
    #page-client .client-payment-table tr:last-child td { border-bottom: none; }
    #page-client .client-payment-table tr:hover { background: #f8fafc; }
    #page-client .client-payment-empty { margin: 0; padding: 1.25rem 1rem; text-align: center; font-size: var(--text-sm); font-weight: var(--font-normal); line-height: var(--leading-normal); color: #64748b; }
    #page-client #client-history-loaded .client-work-history-table { min-width: 320px; }
    #page-client #client-payment-section .card-title .icon-wrap { background: var(--green-50); color: var(--green-700); }
    #page-client #client-payment-section .client-muted { margin-bottom: 0.75rem; }
    #page-client #btn-load-history { border-radius: 10px; font-weight: 600; }
    @media (max-width: 480px) {
      #page-client .client-history-summary { flex-direction: column; }
      #page-client .client-history-summary .client-summary-row { border-right: none; border-bottom: 1px solid var(--green-100); min-width: 0; }
      #page-client .client-history-summary .client-summary-row:last-child { border-bottom: none; }
    }
    #page-client .client-muted { margin-bottom: 0.5rem; font-size: var(--text-sm); font-weight: var(--font-normal); line-height: var(--leading-normal); color: #64748b; }
    /* Find a maid – search form (UI-friendly) */
    #page-client .client-search-card { position: relative; padding: 2rem 1.75rem; border-radius: 24px; border: 1px solid rgba(5, 150, 105, 0.2); background: linear-gradient(165deg, #ffffff 0%, #f0fdf4 45%, #ecfdf5 100%); box-shadow: 0 4px 20px rgba(5, 150, 105, 0.08), 0 1px 3px rgba(0,0,0,0.04); overflow: hidden; }
    #page-client .client-search-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--green-600) 0%, var(--green-500) 50%, var(--green-300) 100%); }
    #page-client .client-search-card-header { margin-bottom: 1.75rem; }
    #page-client .client-search-title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: #0f172a; margin: 0 0 0.5rem 0; display: flex; align-items: center; gap: 0.75rem; letter-spacing: -0.02em; }
    #page-client .client-search-title .icon-wrap { background: linear-gradient(145deg, var(--green-100) 0%, var(--green-200) 100%); color: var(--green-700); padding: 0.6rem; border-radius: 14px; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15); }
    #page-client .client-search-subtitle { font-size: var(--text-base); color: #475569; margin: 0; line-height: 1.5; max-width: 36em; }
    #page-client .client-search-form-wrap { display: flex; flex-direction: column; gap: 1rem; }
    #page-client .client-search-filters { padding: 1.25rem; background: #fff; border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
    #page-client .client-search-section-label { display: block; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--green-700); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
    #page-client .client-search-section-label:not(:first-child) { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed #e2e8f0; }
    #page-client .client-search-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    #page-client .client-search-field label { display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #334155; margin-bottom: 0.35rem; }
    #page-client .client-search-field select,
    #page-client .client-search-field input[type="number"] { width: 100%; padding: 0.85rem 1rem; font-size: var(--text-base); border: 2px solid #e2e8f0; border-radius: 14px; background: #f8fafc; color: #1e293b; min-height: 50px; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 20px; padding-right: 2.75rem; }
    #page-client .client-search-field input[type="number"] { background-image: none; padding-right: 1rem; }
    #page-client .client-search-field input[type="number"]::placeholder { color: #94a3b8; }
    #page-client .client-search-field select:hover,
    #page-client .client-search-field input[type="number"]:hover { border-color: #cbd5e1; background-color: #fff; }
    #page-client .client-search-field select:focus,
    #page-client .client-search-field input[type="number"]:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.15); background-color: #fff; }
    #page-client .client-search-field-full { grid-column: 1 / -1; }
    #page-client .client-search-age-row { margin-top: 0; }
    #page-client .client-search-age-wrap { display: flex; align-items: center; gap: 0.5rem; }
    #page-client .client-search-age-wrap input { flex: 1; min-width: 0; }
    #page-client .client-search-age-sep { color: #64748b; font-weight: 600; flex-shrink: 0; }
    #page-client .client-service-pills { display: flex; flex-wrap: wrap; gap: 0.75rem; }
    #page-client .client-service-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.15rem; border-radius: 999px; font-size: var(--text-sm); font-weight: var(--font-medium); border: 2px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; }
    #page-client .client-service-pill:hover { border-color: var(--green-300); background: var(--green-50); color: var(--green-800); }
    #page-client .client-service-pill:has(input:checked) { border-color: var(--green-500); background: var(--green-100); color: var(--green-800); box-shadow: 0 0 0 1px var(--green-500); }
    #page-client .client-service-pill input { margin: 0; accent-color: var(--green-600); width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
    #page-client .client-elderly-care-block { margin-top: 0.75rem; padding: 0.85rem 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
    #page-client .client-elderly-care-heading { margin: 0 0 0.5rem 0; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--green-700); text-transform: uppercase; letter-spacing: 0.06em; }
    #page-client .client-elderly-care-tier { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
    #page-client .client-elderly-care-option { display: inline-flex; align-items: center; cursor: pointer; font-size: var(--text-sm); color: #475569; }
    #page-client .client-elderly-care-option input { margin: 0 0.4rem 0 0; accent-color: var(--green-600); }
    #page-client .client-search-btn { width: 100%; min-height: 56px; font-size: var(--text-base); font-weight: var(--font-bold); border-radius: 16px; gap: 0.6rem; letter-spacing: 0.02em; border: 1px solid #0e6b38; background: linear-gradient(180deg, #2ecc71 0%, #1a9c57 50%, #148a4a 100%); color: #fff; box-shadow: 0 4px 0 #0a5c2f, 0 8px 20px rgba(10, 92, 47, 0.4), inset 0 1px 0 rgba(255,255,255,0.3); text-shadow: 0 -1px 0 rgba(0,0,0,0.25); }
    #page-client .client-search-btn:hover { box-shadow: 0 5px 0 #0a5c2f, 0 10px 24px rgba(10, 92, 47, 0.45), inset 0 1px 0 rgba(255,255,255,0.35); }
    /* Hide any stray text nodes in search button – only icon and .client-search-btn-text should show */
    #page-client .client-search-btn { font-size: 0; }
    #page-client .client-search-btn .btn-icon,
    #page-client .client-search-btn .client-search-btn-text { font-size: var(--text-base); }
    #page-client .client-search-btn .btn-icon { flex-shrink: 0; }
    /* Available helpers section – compact, balanced */
    #page-client .client-helpers-section { margin-top: 0.25rem; margin-bottom: 1rem; }
    #page-client .client-helpers-section .client-search-card { margin-bottom: 1rem; }
    #page-client .client-maids-card { border-radius: 18px; padding: 1.25rem 1.35rem 1.25rem; }
    #page-client .client-maids-card .card-title .icon-wrap { background: var(--green-50); color: var(--green-700); }
    #page-client .client-maids-card-head { margin-bottom: 0.85rem; }
    #page-client .client-maids-card-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.2rem 0; font-size: var(--text-lg); font-weight: var(--font-bold); line-height: var(--leading-snug); letter-spacing: -0.02em; color: #0f172a; }
    #page-client .client-maids-card-sub { margin: 0; font-size: var(--text-sm); font-weight: var(--font-normal); line-height: var(--leading-normal); color: #64748b; max-width: 42em; }
    #page-client .client-maids-list { display: block; min-height: 80px; }
    #page-client .client-maids-list.client-maids-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem 1.35rem; align-items: start; min-height: 0; }
    #page-client .client-maids-explore-more { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; padding: 1.25rem 0 0; }
    #page-client .client-maids-explore-more .btn-explore-more { padding: 0.85rem 1.75rem; font-size: var(--text-base); font-weight: var(--font-semibold); border-radius: 14px; border: 1px solid #a89878; background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 100%); color: var(--green-700); cursor: pointer; transition: box-shadow 0.2s, transform 0.2s; box-shadow: 0 2px 0 rgba(80,60,30,0.15), inset 0 1px 0 rgba(255,255,255,0.6); }
    #page-client .client-maids-explore-more .btn-explore-more:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(80,60,30,0.18), 0 5px 14px rgba(60,45,20,0.2), inset 0 1px 0 rgba(255,255,255,0.7); }
    #page-client .client-maids-explore-more .btn-explore-more:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
    #page-client .client-maids-list .maid-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(0,0,0,0.04); border: 1px solid rgba(226, 232, 240, 0.9); display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; height: 100%; }
    #page-client .client-maids-list .maid-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--green-400), var(--green-500)); opacity: 0; transition: opacity 0.25s ease; }
    #page-client .client-maids-list .maid-card:hover { box-shadow: 0 12px 28px rgba(22, 163, 74, 0.1), 0 4px 12px rgba(0,0,0,0.04); transform: translateY(-3px); border-color: var(--green-200); }
    #page-client .client-maids-list .maid-card:hover::before { opacity: 1; }
    #page-client .client-maids-list .maid-card-top { padding: 1.25rem 1.15rem 0; text-align: center; position: relative; flex: 0 0 auto; }
    #page-client .client-maids-list .maid-card .maid-avatar-wrap { width: 76px; height: 76px; margin: 0 auto 0.75rem; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(22, 163, 74, 0.18); }
    #page-client .client-maids-list .maid-card .maid-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
    #page-client .client-maids-list .maid-name-row { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.25rem; min-height: 1.5em; }
    #page-client .client-maids-list .maid-card .maid-name { font-weight: 700; font-size: var(--text-base); color: #0f172a; margin: 0; line-height: 1.3; letter-spacing: -0.02em; }
    #page-client .client-maids-list .maid-card .verified-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%); color: #fff; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; }
    #page-client .client-maids-list .maid-skills-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; margin-top: 0.35rem; min-height: 1.25em; }
    #page-client .client-maids-list .maid-service-pill { display: inline-block; padding: 0.28rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: linear-gradient(135deg, var(--green-50) 0%, rgba(187, 247, 208, 0.5) 100%); color: var(--green-800); border: 1px solid rgba(34, 197, 94, 0.25); }
    #page-client .client-maids-list .maid-card-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.85rem; margin-top: 0.5rem; font-size: 0.75rem; color: #64748b; }
    #page-client .client-maids-list .maid-card-meta .meta-value { font-weight: 700; color: #334155; }
    #page-client .client-maids-list .maid-trust-wrap { width: 100%; margin-top: 0.75rem; padding: 0.6rem 0.75rem; background: rgba(248, 250, 252, 0.9); border-radius: 12px; border: 1px solid rgba(226, 232, 240, 0.9); display: flex; flex-direction: column; gap: 0.4rem; flex-shrink: 0; }
    #page-client .client-maids-list .maid-trust-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
    #page-client .client-maids-list .maid-trust-label { font-size: 0.7rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
    #page-client .client-maids-list .maid-trust-value { font-size: var(--text-sm); font-weight: 800; color: var(--green-700); flex-shrink: 0; letter-spacing: -0.02em; }
    #page-client .client-maids-list .maid-trust-value.maid-trust-unknown { color: #94a3b8; font-weight: 600; }
    #page-client .client-maids-list .maid-trust-bar { height: 8px; min-height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
    #page-client .client-maids-list .maid-trust-fill { height: 100%; min-width: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--green-400), var(--green-600)); transition: width 0.3s ease; }
    #page-client .client-maids-list .maid-card-body { padding: 1rem 1.15rem 1.15rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; background: linear-gradient(180deg, transparent 0%, rgba(240, 253, 244, 0.2) 100%); margin-top: 0.35rem; min-height: 0; border-top: 1px solid rgba(226, 232, 240, 0.6); }
    #page-client .client-maids-list .maid-card-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto; }
    #page-client .client-maids-list .maid-card-actions .btn { width: 100%; justify-content: center; font-size: 0.8125rem; font-weight: 600; min-height: 40px; border-radius: 12px; text-decoration: none; }
    #page-client .client-maids-list .maid-card-actions .btn-primary { box-shadow: 0 2px 0 #0a5c2f, 0 4px 10px rgba(10, 92, 47, 0.3), inset 0 1px 0 rgba(255,255,255,0.3); }
    #page-client .client-maids-list .maid-card-actions .btn-profile { color: var(--green-700); background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 100%); border: 1px solid #a89878; box-shadow: 0 2px 0 rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.5); }
    #page-client .client-maids-list .maid-card-actions .btn-profile:hover { box-shadow: 0 3px 0 rgba(80,60,30,0.15), 0 4px 10px rgba(60,45,20,0.2), inset 0 1px 0 rgba(255,255,255,0.6); text-decoration: none; }
    #page-client .client-maids-list .maid-card-actions .btn-booking-on-review { background: linear-gradient(180deg, #e8e2d8 0%, #ddd6c8 100%); color: #64748b; border: 1px solid #b8a88a; cursor: default; font-weight: 600; box-shadow: inset 0 2px 4px rgba(80,60,30,0.12); }
    #page-client .client-maids-list .maid-card-actions .btn-booking-on-review:hover { background: linear-gradient(180deg, #e8e2d8 0%, #ddd6c8 100%); color: #64748b; }
    #page-client .client-maids-list .maid-card-actions .maid-card-call-msg-row { display: flex; flex-direction: row; gap: 0.35rem; width: 100%; }
    #page-client .client-maids-list .maid-card-actions .maid-card-call-msg-row .maid-card-call,
    #page-client .client-maids-list .maid-card-actions .maid-card-call-msg-row .maid-card-msg { flex: 1 1 0; min-width: 0; width: auto; }
    #page-client .client-maids-empty-msg { padding: 1.5rem 1.25rem; text-align: center; font-size: var(--text-sm); color: #64748b; line-height: 1.6; border: 2px dashed #e2e8f0; border-radius: 14px; background: #f8fafc; margin: 0; max-width: 100%; }

    /* Search results modal card container */
    .client-search-results-card {
      max-width: 720px; width: 95%;
      max-height: 90vh;
      display: flex; flex-direction: column;
      border-radius: 16px; overflow: hidden;
    }
    .client-search-results-card .modal-head {
      flex-shrink: 0; padding: 1rem 1.25rem;
      border-bottom: 1px solid #e2e8f0;
      display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    }
    .client-search-results-card .modal-head .modal-title { margin: 0; font-size: var(--text-lg); font-weight: var(--font-bold); }
    .client-search-results-card .modal-body {
      flex: 1 1 auto; min-height: 0;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
    }

    /* === Search results popup cards === */
    .client-search-results-body { padding: 0.75rem; }
    .client-search-results-body.client-maids-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .client-search-results-body .maid-card { overflow: visible !important; height: auto !important; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.04); min-width: 0; }
    .client-search-results-body .maid-card-top { padding: 0.65rem 0.65rem 0; }
    .client-search-results-body .maid-card .maid-avatar-wrap { width: 48px; height: 48px; margin-bottom: 0.35rem; }
    .client-search-results-body .maid-card .maid-name { font-size: 0.8rem; font-weight: 600; line-height: 1.2; }
    .client-search-results-body .maid-skills-pills { margin-top: 0.2rem; gap: 0.2rem; flex-wrap: wrap; }
    .client-search-results-body .maid-service-pill { padding: 0.15rem 0.35rem; font-size: 0.6rem; }
    .client-search-results-body .maid-card-meta { margin-top: 0.25rem; font-size: 0.65rem; gap: 0.15rem 0.3rem; }
    .client-search-results-body .maid-trust-wrap { margin-top: 0.35rem; padding: 0.35rem 0.5rem; border-radius: 8px; gap: 0.25rem; }
    .client-search-results-body .maid-trust-label { font-size: 0.6rem; }
    .client-search-results-body .maid-trust-value { font-size: 0.65rem; }
    .client-search-results-body .maid-trust-bar { height: 5px; min-height: 5px; }
    .client-search-results-body .maid-card-body { padding: 0.5rem 0.65rem 0.65rem; margin-top: 0.2rem; }
    .client-search-results-body .maid-card-actions { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.35rem; }
    .client-search-results-body .maid-card-actions .btn {
      width: 100%; margin: 0; box-sizing: border-box;
      min-height: 32px; padding: 0.35rem 0.5rem;
      font-size: 0.7rem; font-weight: 600;
      border-radius: 8px;
    }
    .client-search-results-body .maid-card-actions .btn-assigned-disabled {
      background: linear-gradient(180deg, #fb923c 0%, #ea580c 50%, #c2410c 100%);
      color: #fff; border: 1px solid #c2410c; cursor: default;
      box-shadow: 0 2px 0 #9a3412, inset 0 1px 0 rgba(255,255,255,0.3);
      text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
      font-weight: 700; text-align: center; width: 100%;
      font-size: 0.7rem; white-space: nowrap; letter-spacing: -0.02em;
      display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    }
    .client-search-results-body .maid-card-actions .maid-card-call-msg-row {
      display: flex; flex-direction: row; gap: 0.3rem; width: 100%;
    }
    .client-search-results-body .maid-card-actions .maid-card-call-msg-row .maid-card-call,
    .client-search-results-body .maid-card-actions .maid-card-call-msg-row .maid-card-msg {
      flex: 1 1 0; min-width: 0; font-size: 0.65rem; padding: 0.3rem 0.35rem; width: auto;
    }
    .client-search-results-body .maid-card-actions .btn-profile { width: 100%; }
    .client-search-results-profile { padding: 1rem 1.25rem; overflow-y: auto; }
    .client-search-results-profile > p:first-child { margin-top: 0; }
    @media (max-width: 640px) {
      .client-search-results-profile { padding: 0.5rem 0.75rem 1rem; padding-top: 0.5rem; }
      .client-search-results-profile > p:first-child { position: sticky; top: 0; background: #fff; z-index: 1; padding: 0.4rem 0 0.5rem; margin: 0 0 0.5rem 0; border-bottom: 1px solid #e2e8f0; }
    }
    .client-search-back-link:hover { text-decoration: underline; color: var(--green-800); }
    #client-search-results-modal.client-search-profile-open { background: rgba(15,23,42,0.82) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }

    #page-client .client-maids-empty-msg strong { color: var(--green-700); font-weight: var(--font-semibold); }
    @media (min-width: 641px) and (max-width: 960px) {
      #page-client .client-maids-list.client-maids-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.25rem; }
    }


    /* Admin dashboard – balanced layout */
    #page-admin { padding: 0 0.25rem; }
    #page-admin .admin-page-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 0.75rem; border-radius: 14px; background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f0fdf4 100%); border: 1px solid rgba(5, 150, 105, 0.2); box-shadow: 0 2px 12px rgba(5, 150, 105, 0.08); }
    #page-admin .admin-page-header-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg, var(--green-100) 0%, var(--green-200) 100%); color: var(--green-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(5, 150, 105, 0.2); }
    #page-admin .admin-page-header-text { min-width: 0; }
    #page-admin .admin-page-title { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); color: #0f172a; letter-spacing: -0.025em; line-height: 1.2; }
    #page-admin .admin-page-welcome { margin: 0 0 0.35rem 0; font-size: var(--text-base); font-weight: var(--font-medium); color: #334155; line-height: 1.45; }
    #page-admin .admin-page-sub { margin: 0; font-size: var(--text-sm); color: #64748b; line-height: 1.5; max-width: 42em; }
    #page-admin .card { padding: 1rem 1.25rem; margin-bottom: 0.75rem; border-radius: 14px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); background: #fff; }
    #page-admin .card:last-child { margin-bottom: 0; }
    #page-admin .admin-card-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
    #page-admin .admin-card-header .card-title { margin: 0 0 0.35rem 0; font-size: var(--text-lg); font-weight: var(--font-semibold); color: #0f172a; display: flex; align-items: center; gap: 0.5rem; }
    #page-admin .admin-card-header .card-title .icon-wrap { width: 32px; height: 32px; border-radius: 10px; background: var(--green-50); color: var(--green-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    #page-admin .admin-card-header .card-title .icon-wrap svg { width: 20px; height: 20px; }
    #page-admin .admin-card-header .card-desc { margin: 0; font-size: var(--text-sm); color: #64748b; line-height: 1.45; flex: 1 1 100%; }
    #page-admin .admin-card-header .btn { flex-shrink: 0; margin: 0; min-height: 40px; padding: 0.5rem 1rem; font-size: var(--text-sm); }
    #page-admin .admin-card-header-text { min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1rem; }
    #page-admin .admin-card-header > .admin-card-header-actions { margin-left: auto; }
    #page-admin #admin-card-maids .admin-card-header > .admin-card-header-actions,
    #page-admin #admin-card-clients .admin-card-header > .admin-card-header-actions { margin-left: 0; flex: 1 1 auto; min-width: 0; justify-content: space-between; }
    #page-admin .admin-card-header-text > .admin-card-header-actions { margin-left: auto; }
    #page-admin .admin-card-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
    #page-admin .admin-card-header-actions .btn { margin: 0; }
    #page-admin .admin-notifications-row { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; width: 100%; }
    #page-admin .admin-notifications-date-row { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
    #page-admin .admin-notifications-date-row .admin-notifications-date-label { margin: 0; }
    #page-admin .admin-notifications-date-row .admin-notifications-date-input { flex: 0 1 auto; min-width: 0; }
    #page-admin .admin-notifications-date-row .admin-btn-load-refresh { margin-left: auto; flex-shrink: 0; }
    #page-admin .admin-date-presets-row { display: flex; align-items: center; gap: 0.35rem; }
    #page-admin .admin-activity-report-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.35rem; }
    #page-admin #admin-card-activity-report .admin-card-header-text > .admin-card-header-actions { margin-left: 0; }
    #page-admin #admin-activity-report-maid { flex: 1 1 auto; min-width: 14rem; }
    #page-admin .admin-notifications-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
    #page-admin .admin-notifications-date-label { margin: 0; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #475569; }
    #page-admin .admin-notifications-date-input { padding: 0.45rem 0.65rem; font-size: var(--text-sm); border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #0f172a; min-height: 40px; }
    #page-admin .admin-notifications-date-input:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2); }
    #page-admin #admin-card-notifications .admin-btn-load-refresh { min-height: 34px !important; height: 34px !important; padding: 0.35rem 0.6rem !important; font-size: 0.8125rem; font-weight: var(--font-semibold); width: auto; flex-shrink: 0; white-space: nowrap; margin-left: auto; box-sizing: border-box; }
    #page-admin .admin-date-presets { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0.35rem; }
    #page-admin .admin-date-preset { min-height: 34px; padding: 0.35rem 0.6rem; font-size: 0.8125rem; font-weight: var(--font-semibold); white-space: nowrap; margin: 0; }
    #page-admin .admin-date-preset.active { background: linear-gradient(180deg, #2ecc71 0%, #1a9c57 50%, #148a4a 100%) !important; border-color: #0e6b38 !important; color: #fff !important; box-shadow: 0 2px 0 #0a5c2f, inset 0 1px 0 rgba(255,255,255,0.3) !important; }
    #page-admin .admin-date-preset.active:hover { background: linear-gradient(180deg, #34d97a 0%, #1ea85c 50%, #169652 100%) !important; border-color: #0e6b38 !important; color: #fff !important; }
    @media (max-width: 360px) { #page-admin .admin-date-presets { flex-wrap: wrap; } }
    @media (max-width: 480px) { #page-admin .admin-notifications-row { flex-wrap: wrap; } }
    #page-admin #admin-card-notifications .card-desc { font-size: var(--text-sm); line-height: 1.5; color: #475569; }
    #page-admin .admin-detail-block { margin-top: 0; }
    #page-admin .admin-detail-block.table-wrap { margin-top: 0.5rem; border-radius: 12px; overflow-x: auto; overflow-y: visible; border: 1px solid #e2e8f0; -webkit-overflow-scrolling: touch; }
    #page-admin .admin-detail-block > .muted { padding: 1rem 0; margin: 0; }
    #page-admin .admin-detail-block .admin-summary-row { margin-bottom: 1rem; }
    #page-admin .table-wrap table th, #page-admin #admin-payments table th, #page-admin #admin-exceptions table th, #page-admin #admin-complaints table th, #page-admin #admin-emergencies table th, #page-admin #admin-clients table th { text-align: left; padding: 0.75rem 1rem; font-size: var(--text-xs); font-weight: var(--font-semibold); color: #475569; border-bottom: 2px solid #e2e8f0; background: #f8fafc; }
    #page-admin .table-wrap table td, #page-admin #admin-payments table td, #page-admin #admin-exceptions table td, #page-admin #admin-complaints table td, #page-admin #admin-emergencies table td, #page-admin #admin-clients table td { padding: 0.75rem 1rem; font-size: var(--text-sm); border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
    #page-admin .admin-active-booking-row { cursor: pointer; transition: background 0.15s ease; }
    #page-admin .admin-active-booking-row:hover { background: #f0fdf4; }
    #page-admin #admin-clients table { min-width: 520px; border-collapse: collapse; }
    #page-admin #admin-payments .table-wrap, #page-admin #admin-exceptions .table-wrap, #page-admin #admin-complaints .table-wrap, #page-admin #admin-emergencies .table-wrap { border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; }
    /* Admin dashboard – Key metrics (KYI) – compact */
    #page-admin .admin-overview-card { padding: 1rem 1rem; border-radius: 14px; border: 1px solid rgba(5, 150, 105, 0.18); background: linear-gradient(165deg, #ffffff 0%, #f0fdf4 35%, #ecfdf5 100%); box-shadow: 0 2px 12px rgba(5, 150, 105, 0.08); overflow: hidden; position: relative; margin-bottom: 1rem; }
    #page-admin .admin-overview-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--green-600) 0%, var(--green-500) 50%, var(--green-300) 100%); }
    #page-admin .admin-overview-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
    #page-admin .admin-overview-header-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, var(--green-100) 0%, var(--green-200) 100%); color: var(--green-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15); }
    #page-admin .admin-overview-header-icon svg { width: 20px; height: 20px; }
    #page-admin .admin-overview-title { margin: 0; font-size: var(--text-base); font-weight: var(--font-bold); color: #0f172a; letter-spacing: -0.02em; }
    #page-admin .admin-overview-subtitle { margin: 0; font-size: var(--text-xs); color: #64748b; font-weight: var(--font-medium); }
    #page-admin .admin-overview-content { display: flex; flex-direction: column; gap: 0.4rem; }
    #page-admin .admin-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: 0.35rem; }
    #page-admin .admin-kpi-row-title { font-size: 0.65rem; font-weight: var(--font-bold); color: #475569; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; padding-bottom: 0.15rem; border-bottom: 1px solid #e2e8f0; }
    #page-admin .admin-kpi { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; transition: box-shadow 0.2s ease, border-color 0.2s ease; }
    #page-admin .admin-kpi:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-color: var(--green-200); }
    #page-admin .admin-kpi-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    #page-admin .admin-kpi-icon svg { width: 14px; height: 14px; }
    #page-admin .admin-kpi-icon.people { background: linear-gradient(135deg, var(--green-50) 0%, var(--green-100) 100%); color: var(--green-700); }
    #page-admin .admin-kpi-icon.alert { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); color: #b91c1c; }
    #page-admin .admin-kpi-icon.money { background: linear-gradient(135deg, #f0fdf4 0%, var(--green-100) 100%); color: var(--green-700); }
    #page-admin .admin-kpi-body { min-width: 0; }
    #page-admin .admin-kpi-value { font-size: var(--text-base); font-weight: var(--font-bold); color: #0f172a; line-height: 1.2; letter-spacing: -0.01em; }
    #page-admin .admin-kpi-label { font-size: 0.65rem; font-weight: var(--font-semibold); color: #64748b; margin-top: 0.1rem; line-height: 1.2; }
    #page-admin .admin-kpi.admin-kpi-alert { border-color: #fecaca; background: linear-gradient(135deg, #fff 0%, #fef2f2 100%); }
    #page-admin .admin-kpi.admin-kpi-alert .admin-kpi-value { color: #b91c1c; }
    #page-admin .admin-kpi.admin-kpi-alert .admin-kpi-icon.alert { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); }
    #page-admin .admin-detail-block table { width: 100%; margin-top: 0.5rem; }
    #page-admin .admin-detail-block .admin-summary-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem; font-size: var(--text-sm); }
    #page-admin .admin-detail-block .admin-summary-row span { font-weight: var(--font-semibold); color: var(--green-800); }
    .admin-maids-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
    .admin-maids-tab { padding: 0.5rem 1rem; font-size: var(--text-sm); font-weight: var(--font-semibold); border: 1px solid #b8a88a; border-radius: 10px; background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 100%); color: #475569; cursor: pointer; transition: box-shadow 0.2s, color 0.2s; box-shadow: 0 2px 0 rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.5); }
    .admin-maids-tab:hover { box-shadow: 0 3px 0 rgba(80,60,30,0.15), 0 4px 10px rgba(60,45,20,0.2), inset 0 1px 0 rgba(255,255,255,0.6); color: var(--green-800); }
    #page-admin .admin-search-wrap { margin-bottom: 0.75rem; }
    #page-admin .admin-search-input { width: 100%; max-width: 280px; padding: 0.5rem 0.75rem; font-size: var(--text-sm); border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #0f172a; }
    #page-admin .admin-search-input::placeholder { color: #94a3b8; }
    #page-admin .admin-search-input:focus { outline: none; border-color: var(--green-400); box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2); }
    .admin-maids-tab.active { background: linear-gradient(180deg, #2ecc71 0%, #1a9c57 50%, #148a4a 100%); border: 1px solid #0e6b38; color: #fff; box-shadow: 0 2px 0 #0a5c2f, inset 0 1px 0 rgba(255,255,255,0.3); text-shadow: 0 -1px 0 rgba(0,0,0,0.25); }
    #admin-maids table { min-width: 720px; border-collapse: collapse; }
    #admin-maids table th { text-align: left; padding: 0.4rem 0.75rem; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #475569; border-bottom: 2px solid #e2e8f0; background: #f8fafc; }
    #admin-maids table td { padding: 0.4rem 0.75rem; font-size: var(--text-sm); border-bottom: 1px solid #e2e8f0; vertical-align: middle; line-height: 1.35; }
    #admin-maids .maid-row { cursor: pointer; transition: background 0.15s; }
    #admin-maids table td:nth-child(6) { font-size: 0.75rem; line-height: 1.3; color: #64748b; }
    #admin-maids .maid-row:hover { background: var(--green-50); }
    #admin-maids .cell-avatar .avatar-sm { width: 24px; height: 24px; margin-right: 0.4rem; }
    #admin-maids .maid-action-wrap { position: relative; display: inline-block; }
    #admin-maids .maid-action-trigger { width: 36px; height: 36px; padding: 0; border: 1px solid #b8a88a; border-radius: 10px; background: linear-gradient(180deg, #f5f0e8 0%, #e8e2d8 100%); color: #64748b; font-size: 1.25rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.2s, color 0.2s; box-shadow: 0 2px 0 rgba(80,60,30,0.1), inset 0 1px 0 rgba(255,255,255,0.5); }
    #admin-maids .maid-action-trigger:hover { color: #0f172a; box-shadow: 0 3px 0 rgba(80,60,30,0.12), 0 4px 8px rgba(60,45,20,0.15), inset 0 1px 0 rgba(255,255,255,0.6); }
    #admin-maids .maid-action-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 140px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.12); z-index: 50; padding: 0.35rem; display: none; }
    #admin-maids .maid-action-dropdown.open { display: block; z-index: 10002; }
    #admin-maids .maid-action-dropdown button { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; border: none; border-radius: 6px; background: transparent; color: #334155; cursor: pointer; transition: background 0.15s; }
    #admin-maids .maid-action-dropdown button:hover { background: var(--green-50); color: var(--green-800); }
    #admin-maids .maid-action-dropdown button[data-action="verify"] { color: var(--green-700); }
    #admin-maids .maid-action-dropdown button[data-action="unverify"] { color: #64748b; }
    @media (max-width: 768px) { #admin-maids .maid-action-dropdown { right: 0; left: auto; min-width: 130px; } }
    #admin-maids .maid-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
    #admin-maids .maid-actions .btn { padding: 0.4rem 0.85rem; font-size: 0.8125rem; font-weight: var(--font-semibold); border-radius: 8px; white-space: nowrap; }
    #admin-maids .maid-actions .btn-verify { background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%); color: #fff; border: none; }
    #admin-maids .maid-actions .btn-verify:hover { background: linear-gradient(135deg, var(--green-600) 0%, var(--green-700) 100%); }
    #admin-maids .maid-actions .btn-unverify { background: #fff; color: #64748b; border: 1.5px solid #cbd5e1; }
    #admin-maids .maid-actions .btn-unverify:hover { background: #f1f5f9; border-color: #94a3b8; color: #475569; }
    #admin-maids .maid-actions .btn-view { background: #f1f5f9; color: #475569; border: none; }
    #admin-maids .maid-actions .btn-view:hover { background: #e2e8f0; color: #0f172a; }
    #admin-maids .maid-action-dropdown button[data-action="delete"] { color: #b91c1c; }
    #admin-maids .maid-action-dropdown button[data-action="delete"]:hover { background: #fef2f2; color: #dc2626; }
    #admin-maids .maid-action-dropdown button[data-action="delete_photo"] { color: #b91c1c; }
    #admin-maids .maid-action-dropdown button[data-action="delete_photo"]:hover { background: #fef2f2; color: #dc2626; }
    #admin-maids .maid-action-dropdown button[data-action="edit"] { color: var(--green-700); }
    .admin-maids-selection-bar, .admin-clients-selection-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-size: var(--text-sm); }
    .admin-maids-selection-bar span, .admin-clients-selection-bar span { font-weight: var(--font-semibold); color: #475569; }
    .admin-maids-selection-bar .btn, .admin-clients-selection-bar .btn { padding: 0.35rem 0.75rem; font-size: 0.8125rem; margin-left: auto; }
    #admin-maids .admin-maid-row-select, #admin-clients .admin-client-row-select { width: 18px; height: 18px; cursor: pointer; accent-color: var(--green-600); }
    #admin-maids th.admin-maids-th-select, #admin-clients th.admin-clients-th-select { width: 40px; text-align: center; }
    #admin-maids td.admin-maids-td-select, #admin-clients td.admin-clients-td-select { text-align: center; vertical-align: middle; }
    #admin-clients .client-action-wrap { position: relative; display: inline-block; }
    #admin-clients .client-action-trigger { width: 36px; height: 36px; padding: 0; border: none; border-radius: 10px; background: transparent; color: #64748b; font-size: 1.25rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
    #admin-clients .client-action-trigger:hover { background: #e2e8f0; color: #0f172a; }
    #admin-clients .client-action-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 120px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.12); z-index: 50; padding: 0.35rem; display: none; }
    #admin-clients .client-action-dropdown.open { display: block; z-index: 10002; }
    #admin-clients .client-action-dropdown button { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; border: none; border-radius: 6px; background: transparent; color: #334155; cursor: pointer; transition: background 0.15s; }
    #admin-clients .client-action-dropdown button:hover { background: var(--green-50); color: var(--green-800); }
    #admin-clients .client-action-dropdown button[data-action="delete"] { color: #b91c1c; }
    #admin-clients .client-action-dropdown button[data-action="delete"]:hover { background: #fef2f2; color: #dc2626; }
    #admin-clients .client-action-dropdown button[data-action="edit"] { color: var(--green-700); }
    .admin-modal-content-wide { max-width: 520px; }
    .admin-edit-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin-bottom: 1rem; }
    .admin-edit-form-grid .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #334155; margin-bottom: 0.35rem; }
    .admin-edit-form-grid .form-group input, .admin-edit-form-grid .form-group select { width: 100%; padding: 0.5rem 0.75rem; font-size: var(--text-sm); border: 1px solid #e2e8f0; border-radius: 8px; }
    .admin-edit-full { grid-column: 1 / -1; }
    .admin-edit-bank-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
    .admin-edit-bank-row:last-child { margin-bottom: 0; }
    .admin-edit-bank-label { flex: 0 0 auto; min-width: 5.5em; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #334155; margin: 0; }
    .admin-edit-bank-row input { flex: 1; min-width: 0; }
    .admin-edit-photo-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
    .admin-edit-photo-preview { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; background: #f1f5f9; border: 1px solid #e2e8f0; }
    .admin-edit-photo-actions { display: flex; flex-direction: column; gap: 0.5rem; }
    .admin-edit-photo-actions input[type="file"] { font-size: var(--text-sm); }
    .admin-edit-photo-buttons-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
    .admin-edit-photo-buttons-row .btn { flex: 0 0 auto; }
    .btn-danger-outline { color: #dc2626; border-color: #dc2626; }
    .btn-danger-outline:hover { background: rgba(220, 38, 38, 0.08); }
    .admin-edit-doc-section { display: flex; flex-direction: column; gap: 0.75rem; }
    .admin-edit-doc-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
    .admin-edit-doc-label { font-size: var(--text-xs); font-weight: 600; color: #64748b; min-width: 2.5rem; }
    .admin-edit-doc-row .admin-edit-photo-preview { width: 48px; height: 48px; border-radius: 8px; }
    .admin-edit-doc-row .admin-edit-photo-buttons-row { flex: 1; min-width: 0; }
    #admin-view-photo-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,0.85); }
    #admin-view-photo-modal .admin-view-photo-backdrop { position: absolute; inset: 0; cursor: pointer; }
    #admin-view-photo-modal .admin-view-photo-content { position: relative; max-width: 95vw; max-height: 95vh; }
    #admin-view-photo-modal .admin-view-photo-content img { max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
    #admin-view-photo-modal .admin-view-photo-close { position: absolute; top: -36px; right: 0; background: #fff; color: #334155; border: none; width: 32px; height: 32px; border-radius: 8px; font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
    #admin-view-photo-modal .admin-view-photo-close:hover { background: #f1f5f9; }
    .admin-edit-skills { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; }
    .admin-edit-form-grid .admin-edit-skills .admin-edit-skill { display: inline-flex !important; flex-direction: row; align-items: center; gap: 0.2rem; margin-bottom: 0; font-size: var(--text-xs); font-weight: 500; color: #475569; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 6px; background: #f8fafc; border: 1px solid #e2e8f0; white-space: nowrap; }
    .admin-edit-skill { display: inline-flex; align-items: center; gap: 0.2rem; font-size: var(--text-xs); font-weight: 500; color: #475569; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 6px; background: #f8fafc; border: 1px solid #e2e8f0; white-space: nowrap; }
    .admin-edit-form-grid .admin-edit-skills .admin-edit-skill input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; accent-color: var(--green-600); cursor: pointer; margin: 0; }
    .admin-edit-skill input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; accent-color: var(--green-600); cursor: pointer; margin: 0; }
    .admin-edit-form-grid .admin-edit-skills .admin-edit-skill:has(input:checked) { background: var(--green-50); border-color: var(--green-500); color: var(--green-800); }
    .admin-edit-skill:has(input:checked) { background: var(--green-50); border-color: var(--green-500); color: var(--green-800); }
    .admin-edit-verified-row { display: flex; align-items: center; gap: 0.5rem; }
    .admin-edit-verified-row label { margin: 0; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #334155; cursor: pointer; }
    .admin-edit-verified-row input[type="checkbox"] { width: 13px; height: 13px; accent-color: var(--green-600); cursor: pointer; }
    .admin-edit-check-label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; cursor: pointer; }
    .admin-modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
    .admin-nav-anchors { display: flex; flex-wrap: nowrap; gap: 0.35rem 0.5rem; margin-bottom: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid #e2e8f0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    .admin-nav-link { padding: 0.35rem 0.65rem; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #475569; text-decoration: none; border-radius: 8px; transition: background 0.2s, color 0.2s; }
    .admin-nav-link:hover { background: var(--green-50); color: var(--green-800); }
    .admin-nav-link:focus { outline: none; box-shadow: 0 0 0 2px var(--green-400); }
    #page-admin [id^="admin-"] { scroll-margin-top: 0.5rem; }
    #page-admin .card .admin-empty-state { padding: 2rem 1.5rem; text-align: center; color: #64748b; font-size: var(--text-sm); border-radius: 12px; background: #f8fafc; border: 1px dashed #e2e8f0; }
    #page-admin .card .admin-empty-state strong { display: block; color: #334155; font-size: var(--text-base); margin-bottom: 0.35rem; }
    .btn-delete-user { padding: 0.35rem 0.75rem; font-size: 0.8125rem; font-weight: var(--font-semibold); border-radius: 8px; background: #fff; color: #b91c1c; border: 1.5px solid #fecaca; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
    .btn-delete-user:hover { background: #fef2f2; border-color: #f87171; color: #dc2626; }
    .admin-confirm-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
    .admin-confirm-modal { background: #fff; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); max-width: 400px; width: 100%; padding: 1.5rem; }
    .admin-confirm-modal h4 { margin: 0 0 0.5rem 0; font-size: var(--text-lg); color: #0f172a; }
    .admin-confirm-modal p { margin: 0 0 1rem 0; font-size: var(--text-sm); color: #64748b; line-height: 1.5; }
    .admin-confirm-modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
    .admin-confirm-modal-actions .btn { min-height: 40px; padding: 0.5rem 1rem; }
    #admin-notifications .notification-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 0.35rem; background: #fff; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
    #admin-notifications .notification-item .admin-notification-item-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-top: 0; }
    #admin-notifications .notification-item .admin-notification-item-icon.people,
    #admin-notifications .notification-item .admin-notification-item-icon.maid,
    #admin-notifications .notification-item .admin-notification-item-icon.check { background: linear-gradient(135deg, var(--green-50) 0%, var(--green-100) 100%); color: var(--green-700); }
    #admin-notifications .notification-item .admin-notification-item-icon.alert { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); color: #b91c1c; }
    #admin-notifications .notification-item .admin-notification-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
    #admin-notifications .notification-item .admin-notification-item-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; min-width: 0; }
    #admin-notifications .notification-item .admin-notification-item-title-wrap { min-width: 0; }
    #admin-notifications .notification-item .admin-notification-item-message { width: 100%; min-width: 0; font-size: 0.72rem; line-height: 1.3; word-wrap: break-word; }
    #admin-notifications .notification-item .admin-notification-item-message .muted { display: block; font-size: 0.72rem !important; }
    #admin-notifications .notification-item .admin-notification-item-time { flex-shrink: 0; }
    #admin-notifications .notification-item .admin-notification-force-approved-tag { display: inline-block; margin-left: 0.35rem; padding: 0.15rem 0.45rem; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--green-700); background: var(--green-100); border-radius: 6px; }
    #admin-notifications .notification-item .admin-notification-item-actions { margin-top: 0.25rem; display: flex; flex-wrap: nowrap; gap: 0.25rem; align-items: center; }
    #admin-notifications .notification-item .admin-notification-item-actions .btn,
    #admin-notifications .notification-item .admin-notification-item-actions a.btn { flex: 1 1 0; min-width: 0; white-space: nowrap; padding: 0.35rem 0.5rem; font-size: 0.75rem; text-decoration: none; text-align: center; }
    #admin-notifications .admin-notification-item-actions.admin-cancellation-actions { width: 100%; justify-content: flex-start; gap: 0.35rem; }
    #admin-notifications .btn-reject-cancellation { color: #b91c1c; border-color: #dc2626; background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%); }
    #admin-notifications .btn-reject-cancellation:hover { background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%); border-color: #b91c1c; }
    #admin-notifications .admin-call-client, #admin-notifications .admin-call-maid { background: linear-gradient(180deg, #fb923c 0%, #ea580c 50%, #c2410c 100%); color: #fff; border: 1px solid #9a3412; box-shadow: 0 2px 0 #7c2d12, 0 3px 8px rgba(194, 65, 12, 0.3), inset 0 1px 0 rgba(255,255,255,0.25); }
    #admin-notifications .admin-call-client:hover, #admin-notifications .admin-call-maid:hover { background: linear-gradient(180deg, #fdba74 0%, #f97316 50%, #ea580c 100%); }
    #admin-notifications .notification-item .admin-notification-item-actions .admin-call-client,
    #admin-notifications .notification-item .admin-notification-item-actions .admin-call-maid { flex: 0 0 auto; width: auto; min-width: 0; }
    #admin-notifications .notification-item:hover { background: var(--green-50); border-color: var(--green-100); }
    #admin-notifications .notification-item:last-child { margin-bottom: 0; }
    #admin-notifications .notification-item.maid-pending { border-left: 4px solid var(--green-500); }
    #admin-notifications .notification-item.complaint { border-left: 4px solid #f59e0b; }
    #admin-notifications .notification-item.emergency { border-left: 4px solid #ef4444; }
    #admin-notifications .notification-item.booking-request-rejected { border-left: 4px solid #dc2626; }
    #admin-notifications .notification-item.cancellation-rejected { border-left: 4px solid #dc2626; }
    #page-admin .admin-notifications-pagination { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
    #page-admin .admin-notifications-pagination .admin-notifications-page-info { font-size: var(--text-sm); color: #64748b; margin-right: 0.5rem; }
    #page-admin .admin-notifications-pagination .btn { min-height: 36px; padding: 0.4rem 0.75rem; font-size: var(--text-sm); }
    .badge-verified { display: inline-block; padding: 0.2rem 0.5rem; font-size: var(--text-xs); font-weight: var(--font-semibold); background: var(--green-100); color: var(--green-800); border-radius: 6px; }
    .badge-new { display: inline-block; padding: 0.2rem 0.5rem; font-size: var(--text-xs); font-weight: var(--font-semibold); background: #dbeafe; color: #1e40af; border-radius: 6px; }
    .admin-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; }
    .admin-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); }
    .admin-modal-content { position: relative; background: #fff; border-radius: 20px; max-width: 480px; width: 100%; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 48px rgba(0,0,0,0.2); border: 1px solid #e2e8f0; display: flex; flex-direction: column; }
    .admin-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid #e2e8f0; background: var(--green-50); flex-shrink: 0; }
    .admin-modal-header h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--font-bold); color: #0f172a; }
    .admin-modal-close { width: 40px; height: 40px; border: none; background: transparent; font-size: 1.5rem; line-height: 1; color: #64748b; cursor: pointer; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
    .admin-modal-close:hover { background: #e2e8f0; color: #0f172a; }
    .admin-modal-body { padding: 1.25rem 1.5rem; overflow-y: auto; font-size: var(--text-sm); }
    .admin-modal-body .detail-row { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
    .admin-modal-body .detail-label { font-weight: var(--font-semibold); color: #64748b; min-width: 7rem; }
    .admin-modal-body .detail-value { color: #0f172a; }


    
    /* Notification dropdown close button (visible only on mobile) */
    .nav .nav-notifications-dropdown .dropdown-head .dropdown-close-btn {
      display: none;
      width: 36px; height: 36px; border: none; background: transparent;
      font-size: 1.5rem; line-height: 1; color: #64748b; cursor: pointer;
      border-radius: 8px; align-items: center; justify-content: center;
      margin-left: auto; transition: background 0.2s, color 0.2s;
    }
    .nav .nav-notifications-dropdown .dropdown-head .dropdown-close-btn:hover {
      background: #e2e8f0; color: #0f172a;
    }


    /* ================================================================
       MOBILE OPTIMISATION — single source of truth (max-width: 640px)
       ================================================================ */
    @media (max-width: 640px) {

      /* ── Global resets ── */
      body { padding: 0 0.5rem 1.25rem; -webkit-tap-highlight-color: transparent;
        padding-left: max(0.5rem, env(safe-area-inset-left));
        padding-right: max(0.5rem, env(safe-area-inset-right));
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
        font-size: var(--text-sm);
      }
      .container { max-width: 100%; padding: 0; }
      h1 { font-size: var(--text-xl); margin-bottom: 0.25rem; }
      h2 { font-size: var(--text-base); margin-bottom: 0.6rem; }
      .muted { font-size: var(--text-xs); }

      /* ── Cards ── */
      .card { padding: 0.85rem 0.8rem; margin-bottom: 0.65rem; border-radius: 12px;
        box-shadow: 0 1px 4px rgba(5,150,105,0.05); }
      .card:hover { box-shadow: 0 1px 4px rgba(5,150,105,0.05); transform: none; }

      /* ── Buttons – compact, touch-friendly ── */
      .btn { min-height: 36px; padding: 0.45rem 0.85rem; font-size: var(--text-xs);
        margin: 0.2rem 0; border-radius: 8px;
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 1px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.3); }
      .btn:hover { transform: none; }
      .btn-primary { box-shadow: 0 2px 0 #0a5c2f, 0 3px 8px rgba(10,92,47,0.3), inset 0 1px 0 rgba(255,255,255,0.25); }
      .btn-danger { box-shadow: 0 2px 0 #7a1212, 0 3px 8px rgba(122,18,18,0.3), inset 0 1px 0 rgba(255,255,255,0.2); }
      .btn-block { width: 100%; margin: 0.3rem 0; }

      /* ── Form inputs ── */
      .form-group { margin-bottom: 0.7rem; }
      .form-group label { font-size: var(--text-xs); margin-bottom: 0.3rem; }
      .form-group input, .form-group select, .form-group textarea {
        padding: 0.55rem 0.7rem; min-height: 40px; font-size: 16px; border-radius: 10px; }

      /* ── Tables ── */
      table { font-size: var(--text-xs); }
      th, td { padding: 0.4rem 0.5rem; }
      .table-wrap, #admin-payments, #admin-exceptions, #admin-complaints,
      #admin-emergencies, #admin-maids, #admin-clients, #admin-notifications {
        overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.25rem; }

      /* ── Mobile: sticky header; popups start below header ── */
      :root { --mobile-header-height: 44px; }
      .nav { position: sticky; top: 0; z-index: 1000; margin: 0 -0.5rem 0.5rem; border-radius: 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding-top: env(safe-area-inset-top); }
      .nav-bar { padding: 0.2rem 0.5rem; padding-left: max(0.5rem, env(safe-area-inset-left)); padding-right: max(0.5rem, env(safe-area-inset-right)); min-height: 44px; gap: 0.25rem; }
      .nav-brand { font-size: 0.65rem; padding: 0.2rem 0.25rem; gap: 0.2rem; }
      .nav-brand-logo { height: 44px; max-height: 100%; }
      .nav .nav-logout-btn { width: 60px; height: 36px; min-width: 60px; min-height: 36px; font-size: 0.65rem; border-radius: 8px; }
      .nav .nav-notifications-btn { width: 60px; height: 36px; min-width: 60px; min-height: 36px; border-radius: 8px; }
      .nav .nav-notifications-btn svg { width: 20px; height: 20px; }
      .nav .nav-notifications-badge { min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; top: -3px; right: -3px; }
      .nav-bar .nav-right-group { gap: 0.25rem; }
      .nav-toggle { width: 38px; height: 38px; }
      .nav-drawer-inner { padding: 0.5rem 0.65rem 0.65rem; padding-top: 2.25rem; gap: 0.3rem 0.5rem; }
      .nav .nav-menu a { padding: 0.4rem 0.55rem; min-height: 36px; font-size: var(--text-xs); }
      .nav-close { width: 38px; height: 38px; }

      /* ── Welcome banner ── */
      .welcome-banner { padding: 0.4rem 0.55rem; margin-bottom: 0.4rem; }
      .welcome-banner-inner { gap: 0.4rem; flex-wrap: nowrap; align-items: flex-start; }
      .welcome-banner-text { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
      .welcome-avatar { width: 44px; height: 44px; border-width: 1.5px; }
      .welcome-greeting { font-size: var(--text-sm); margin-bottom: 0.02rem; }
      .welcome-name { font-size: var(--text-sm); margin: 0 0 0.1rem 0; }
      .welcome-role { font-size: 0.6rem; margin-bottom: 0; }
      .welcome-skills { font-size: 0.6rem; margin-top: 0.25rem; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
      .welcome-banner-actions { flex-wrap: wrap; gap: 0.5rem; align-self: flex-start; margin-top: 0; }
      .welcome-banner-actions .btn { padding: 0.22rem 0.45rem; font-size: 0.58rem; min-height: 22px; border-radius: 6px; }
      .welcome-banner-actions-maid { gap: 0.5rem; }

      /* ── Profile cards ── */
      .avatar-lg { width: 56px; height: 56px; }
      .profile-card { padding: 0.75rem; gap: 0.65rem; border-radius: 10px; margin-bottom: 0.6rem; }
      .profile-card .name { font-size: var(--text-sm); }
      .profile-card .meta { font-size: var(--text-xs); }

      /* ── Complete Profile card (maid) – mobile: title + KPI/btn on one row, then sub, then progress ── */
      #page-maid .maid-profile-complete-head { flex-wrap: nowrap; align-items: center; gap: 0.5rem; }
      #page-maid .maid-profile-complete-titlewrap { flex: 1 1 auto; min-width: 0; }
      #page-maid .maid-profile-complete-title { font-size: var(--text-base); margin: 0; }
      #page-maid .maid-profile-complete-right { flex-shrink: 0; gap: 0.35rem; }
      #page-maid .maid-profile-complete-kpi { padding: 0.18rem 0.35rem; min-width: 2.25rem; border-radius: 6px; }
      #page-maid .maid-profile-complete-percent { font-size: 0.7rem; font-weight: var(--font-bold); }
      #page-maid .maid-profile-complete-label { font-size: 0.42rem; }
      #page-maid .maid-complete-view-details-btn { min-height: 28px !important; padding: 0.25rem 0.5rem !important; font-size: 0.65rem !important; }
      #page-maid .maid-complete-toggle-label { font-size: 0.65rem; }
      #page-maid .maid-profile-complete-chevron { font-size: 0.45rem; }
      #page-maid .maid-profile-complete-sub { margin: 0.3rem 0 0; font-size: 0.7rem; line-height: 1.35; color: #475569; }
      #page-maid .maid-profile-complete-progress { margin-top: 0.4rem; }

      /* Complete Profile list items: compact for mobile */
      #page-maid .maid-profile-complete-list { margin: 0.5rem 0 0; gap: 0.25rem; }
      #page-maid .maid-profile-complete-list li { padding: 0.35rem 0.45rem; gap: 0.35rem; border-radius: 8px; }
      #page-maid .maid-profile-complete-item { gap: 0.08rem; }
      #page-maid .maid-profile-complete-item strong { font-size: 0.7rem; }
      #page-maid .maid-profile-complete-item span { font-size: 0.55rem; }
      #page-maid .maid-profile-complete-status { font-size: 0.5rem; padding: 0.15rem 0.35rem; }
      #page-maid .maid-dashboard-profile-card { padding: 0.85rem 0.75rem; }

      /* ── Toast ── */
      .toast { left: 0.75rem; right: 0.75rem; bottom: max(0.75rem, env(safe-area-inset-bottom));
        transform: none; max-width: none; padding: 0.65rem 1rem; font-size: var(--text-xs); border-radius: 10px; }

      /* ── Notification dropdown (bottom-sheet) ── */
      .nav .nav-notifications-dropdown {
        position: fixed !important; top: var(--mobile-header-height, 56px) !important;
        left: 0 !important; right: 0 !important; bottom: max(60px, env(safe-area-inset-bottom, 0px)) !important;
        width: 100vw !important; max-width: 100vw !important;
        max-height: none !important; height: calc(100vh - var(--mobile-header-height, 56px) - max(60px, env(safe-area-inset-bottom, 0px))) !important;
        margin: 0 !important; border-radius: 14px !important;
        z-index: 10001 !important; box-shadow: 0 4px 24px rgba(0,0,0,0.15) !important;
        -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0);
      }
      .nav .nav-notifications-dropdown .dropdown-head { padding: 0.65rem 0.85rem; font-size: var(--text-sm); }
      .nav .nav-notifications-dropdown .dropdown-head svg { width: 18px; height: 18px; }
      .nav .nav-notifications-dropdown .dropdown-list { max-height: none !important; flex: 1 1 auto !important; overflow-y: auto !important; padding: 0.5rem; padding-bottom: max(1rem, 60px + env(safe-area-inset-bottom, 0px)); gap: 0.4rem; }
      .nav .nav-notifications-dropdown .client-notification { padding: 0.55rem 0.7rem; border-radius: 10px; font-size: var(--text-xs); }
      .nav .nav-notifications-dropdown .client-notification-title { font-size: var(--text-xs); }
      .nav .nav-notifications-dropdown .client-notification-message { font-size: 0.65rem; }
      .nav .nav-notifications-dropdown .dropdown-head .dropdown-close-btn { display: inline-flex; }

      /* ── All modals: start just below header on mobile ── */
      .modal-overlay, .maid-activity-report-modal, .admin-modal, .admin-confirm-modal-backdrop {
        top: var(--mobile-header-height, 56px) !important; left: 0 !important; right: 0 !important; bottom: max(60px, env(safe-area-inset-bottom, 0px)) !important;
        padding: 0.75rem !important; align-items: flex-start !important; justify-content: flex-start !important;
      }
      #client-search-results-modal { padding-top: 0 !important; }
      #client-search-results-modal.client-search-profile-open {
        background: rgba(15,23,42,0.82) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
      }
      .modal-overlay .modal-card, .modal-overlay .maid-activity-report-card,
      .modal-overlay .client-search-results-card, .modal-overlay .admin-modal-content,
      .maid-activity-report-modal .maid-activity-report-card,
      .client-search-results-card, .admin-modal .admin-modal-content,
      .admin-confirm-modal-backdrop .admin-confirm-modal,
      #book-now-modal .modal-card, #client-view-profile-modal .modal-card,
      #maid-view-profile-modal .modal-card, #client-edit-profile-modal .modal-card,
      #maid-booking-client-info-modal .modal-card, #cancel-maid-modal .modal-card {
        max-width: 100% !important; width: 100% !important;
        max-height: calc(100vh - var(--mobile-header-height, 56px) - 1rem - 60px - env(safe-area-inset-bottom, 0px)) !important; border-radius: 14px !important;
        margin: 0 !important; overflow-y: auto !important;
      }
      /* Admin Edit modals: leave space above mobile nav bar */
      #admin-maid-edit-modal .admin-modal-content,
      #admin-client-edit-modal .admin-modal-content,
      #admin-add-helper-modal .admin-modal-content,
      #admin-add-client-modal .admin-modal-content,
      #maid-profile-modal .modal-card {
        max-height: calc(100vh - var(--mobile-header-height, 56px) - 1rem - 60px - env(safe-area-inset-bottom, 0px)) !important;
      }
      /* Maid Complete Profile modal: ~20% smaller for mobile */
      #maid-profile-modal .modal-card { padding: 0.75rem 0.8rem; }
      #maid-profile-modal .modal-head h2 { font-size: 0.9rem; }
      #maid-profile-modal .form-group { margin-bottom: 0.55rem; }
      #maid-profile-modal .form-group label { font-size: 0.6rem; margin-bottom: 0.25rem; }
      #maid-profile-modal .form-group input, #maid-profile-modal .form-group select { padding: 0.42rem 0.56rem; min-height: 32px; font-size: 13px; border-radius: 8px; }
      #maid-profile-modal .maid-profile-form-row { gap: 0.6rem 0.8rem; margin-bottom: 0.75rem; }
      #maid-profile-modal .maid-profile-photo-section { margin-bottom: 0.85rem; }
      #maid-profile-modal .maid-profile-photo-section label { font-size: 0.65rem; margin-bottom: 0.35rem; }
      #maid-profile-modal .maid-profile-photo-wrap { gap: 0.7rem; }
      #maid-profile-modal .maid-profile-photo-preview { width: 74px; height: 74px; }
      #maid-profile-modal .maid-profile-photo-placeholder { font-size: 0.6rem; }
      #maid-profile-modal .maid-profile-photo-hint { font-size: 0.6rem; }
      #maid-profile-modal .maid-profile-photo-actions .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.7rem; min-height: 30px; }
      #maid-profile-modal .form-group-label { font-size: 0.65rem; }
      #maid-profile-modal .form-sublabel { font-size: 0.6rem; }
      #maid-profile-modal .form-group .muted { font-size: 0.65rem; margin-top: 0.25rem; }
      #maid-profile-modal #btn-save-maid-profile { min-height: 36px; padding: 0.5rem 0.75rem; font-size: 0.8rem; }
      #maid-profile-modal .maid-profile-doc-section { margin-bottom: 0.55rem; }
      #maid-profile-modal .maid-profile-doc-section label { font-size: 0.65rem; margin-bottom: 0.35rem; }
      #maid-profile-modal .maid-profile-doc-row { gap: 0.6rem; }
      #maid-profile-modal .maid-profile-doc-preview { width: 64px; height: 64px; }
      #maid-profile-modal .maid-profile-doc-placeholder { font-size: 0.6rem; }
      #maid-profile-modal .maid-profile-doc-upload .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.7rem; min-height: 30px; }
      .modal-head { padding: 0 0 0.6rem; margin-bottom: 0.6rem; gap: 0.4rem; }
      .modal-card { padding: 1rem; }
      .admin-modal-header { padding: 0.75rem 1rem; }
      .admin-modal-header h3 { font-size: var(--text-sm); }
      .admin-modal-body { padding: 0.75rem 1rem; font-size: var(--text-xs); }
      .admin-modal-close { width: 34px; height: 34px; font-size: 1.25rem; }

      /* ── Admin Edit helper modal: compact for mobile ── */
      #admin-maid-edit-modal .form-group { margin-bottom: 0.4rem; }
      #admin-maid-edit-modal .admin-modal-header { padding: 0.5rem 0.75rem; }
      #admin-maid-edit-modal .admin-modal-header h3 { font-size: 0.9rem; }
      #admin-maid-edit-modal .admin-modal-body { padding: 0.5rem 0.75rem; }
      #admin-maid-edit-modal .admin-edit-form-grid { gap: 0.4rem 0.6rem; margin-bottom: 0.6rem; }
      #admin-maid-edit-modal .admin-edit-form-grid .form-group label { font-size: 0.7rem; margin-bottom: 0.2rem; }
      #admin-maid-edit-modal .admin-edit-form-grid .form-group input,
      #admin-maid-edit-modal .admin-edit-form-grid .form-group select { padding: 0.35rem 0.5rem; font-size: 0.8rem; min-height: 32px; border-radius: 6px; }
      #admin-maid-edit-modal .admin-edit-photo-wrap { gap: 0.5rem; }
      #admin-maid-edit-modal .admin-edit-photo-preview { width: 56px; height: 56px; border-radius: 10px; }
      #admin-maid-edit-modal .admin-edit-photo-actions { gap: 0.3rem; }
      #admin-maid-edit-modal .admin-edit-photo-buttons-row { gap: 0.3rem; }
      #admin-maid-edit-modal .admin-edit-photo-buttons-row .btn { padding: 0.25rem 0.4rem; font-size: 0.65rem; min-height: 28px; border-radius: 6px; }
      #admin-maid-edit-modal .admin-edit-photo-actions .muted { font-size: 0.65rem; }
      #admin-maid-edit-modal .admin-edit-bank-row { margin-bottom: 0.35rem; gap: 0.35rem; }
      #admin-maid-edit-modal .admin-edit-bank-label { font-size: 0.7rem; min-width: 4.5em; }
      #admin-maid-edit-modal .admin-edit-bank-row input { padding: 0.35rem 0.5rem; font-size: 0.8rem; }
      #admin-maid-edit-modal .admin-edit-skills { gap: 0.2rem 0.35rem; }
      #admin-maid-edit-modal .admin-edit-form-grid .admin-edit-skills .admin-edit-skill { font-size: 0.6rem; padding: 0.15rem 0.3rem; }
      #admin-maid-edit-modal .admin-edit-form-grid .admin-edit-skills .admin-edit-skill input[type="checkbox"] { width: 12px; height: 12px; }
      #admin-maid-edit-modal .admin-edit-verified-row label { font-size: 0.75rem; }
      #admin-maid-edit-modal .admin-edit-verified-row input[type="checkbox"] { width: 12px; height: 12px; }
      #admin-maid-edit-modal .form-group-label { font-size: 0.7rem; margin-bottom: 0.25rem; }
      #admin-maid-edit-modal .admin-modal-actions { margin-top: 0.6rem; padding-top: 0.6rem; gap: 0.5rem; }
      #admin-maid-edit-modal .admin-modal-actions .btn { min-height: 32px; padding: 0.4rem 0.65rem; font-size: 0.75rem; }
      #admin-maid-edit-modal .admin-edit-doc-section { gap: 0.5rem; }
      #admin-maid-edit-modal .admin-edit-doc-row { gap: 0.5rem; }
      #admin-maid-edit-modal .admin-edit-doc-row .admin-edit-photo-preview { width: 40px; height: 40px; }
      #admin-maid-edit-modal .admin-edit-doc-row .admin-edit-photo-buttons-row .btn { padding: 0.2rem 0.35rem; font-size: 0.6rem; min-height: 26px; }

      /* ── Activity report modal ── */
      .maid-activity-report-head { padding: 0.75rem 1rem !important; }
      .maid-activity-report-head h2 { font-size: var(--text-sm) !important; }
      .maid-activity-report-head .admin-modal-close { font-size: 1.2rem; padding: 0.2rem 0.4rem; }
      .maid-activity-report-body { padding: 0.65rem !important; gap: 0.5rem !important; }
      .maid-activity-report-date-header { font-size: var(--text-xs) !important; padding: 0.4rem 0.65rem !important; border-radius: 8px !important; }
      .maid-activity-report-item { padding: 0.65rem !important; border-radius: 8px !important; }
      .activity-type { font-size: 0.6rem !important; padding: 0.2rem 0.4rem !important; border-radius: 6px !important; }
      .activity-client, .activity-phone { font-size: 0.65rem !important; }
      .activity-pressed-at { font-size: 0.65rem !important; padding: 0.25rem 0.5rem !important; border-radius: 6px !important; }
      .activity-detail-label { font-size: 0.6rem !important; }
      .activity-detail-value { font-size: var(--text-xs) !important; }

      /* ── Search results card (bottom-sheet) ── */
      .client-search-results-card {
        width: 100vw !important; max-width: 100vw !important;
        max-height: calc(100vh - var(--mobile-header-height, 56px) - 1rem - 60px - env(safe-area-inset-bottom, 0px)) !important; border-radius: 14px 14px 0 0 !important;
      }
      .client-search-results-card .modal-head { padding: 0.65rem 0.85rem; }
      .client-search-results-card .modal-head .modal-title { font-size: var(--text-sm); }
      .client-search-results-body { padding: 0.6rem !important; }
      .client-search-results-body.client-maids-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }
      .client-search-results-body .maid-card-top { padding: 0.45rem 0.45rem 0; }
      .client-search-results-body .maid-card .maid-avatar-wrap { width: 36px; height: 36px; margin-bottom: 0.25rem; }
      .client-search-results-body .maid-card .maid-name { font-size: 0.65rem; line-height: 1.2; }
      .client-search-results-body .maid-service-pill { padding: 0.1rem 0.25rem; font-size: 0.5rem; }
      .client-search-results-body .maid-card-meta { font-size: 0.55rem; gap: 0.15rem 0.3rem; }
      .client-search-results-body .maid-trust-wrap { padding: 0.25rem 0.35rem; margin-top: 0.25rem; gap: 0.15rem; }
      .client-search-results-body .maid-trust-label { font-size: 0.5rem; }
      .client-search-results-body .maid-trust-value { font-size: 0.55rem; }
      .client-search-results-body .maid-trust-bar { height: 4px; min-height: 4px; }
      .client-search-results-body .maid-card-body { padding: 0.35rem 0.45rem 0.45rem; }
      .client-search-results-body .maid-card-actions { gap: 0.2rem; margin-top: 0.25rem; }
      .client-search-results-body .maid-card-actions .btn { min-height: 26px; padding: 0.25rem 0.35rem; font-size: 0.55rem; border-radius: 6px; }
      .client-search-results-body .maid-card-actions .btn-assigned-disabled { font-size: 0.55rem; padding: 0.25rem 0.3rem; min-height: 26px; }
      .client-search-results-body .maid-card-actions .maid-card-call-msg-row .maid-card-call,
      .client-search-results-body .maid-card-actions .maid-card-call-msg-row .maid-card-msg { font-size: 0.5rem; padding: 0.2rem 0.25rem; }
      .client-search-results-body .maid-skills-pills { margin-top: 0.15rem; gap: 0.15rem; }
      .client-search-results-body .maid-card { min-width: 0; overflow: hidden; }
      .client-search-results-body .maid-card .maid-name { overflow: hidden; word-break: break-word; line-height: 1.2; max-width: 100%; }

      /* ── Maid page ── */
      #page-maid .maid-status-btn { width: 100px; height: 100px; font-size: 0.65rem; }
      #page-maid .maid-client-header { padding: 0.75rem 0.75rem 0.6rem; gap: 0.6rem; }
      #page-maid .maid-client-avatar-wrap img { width: 56px; height: 56px; }
      #page-maid .maid-client-head .maid-client-name { font-size: var(--text-sm); }
      #page-maid .maid-client-card-status { padding-top: 0.5rem; margin-top: 0.5rem; gap: 0.5rem; }
      #page-maid .maid-client-card-chip { font-size: 0.6rem; padding: 0.2rem 0.45rem; }
      #page-maid .maid-client-card-actions .btn { min-height: 30px; padding: 0.3rem 0.5rem; font-size: 0.6rem; border-radius: 7px; }
      #page-maid .maid-work-summary-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
      #page-maid .maid-work-summary-earnings { flex-direction: column; align-items: flex-start; }
      #page-maid .maid-client-header { flex-wrap: wrap; }
      #page-maid .maid-client-card-circle-wrap { width: 100%; justify-content: center; margin-top: 0.4rem; }
      #page-maid .maid-client-card-status-btn { width: 187px; height: 187px; min-width: 187px; min-height: 187px; font-size: 1.32rem; padding: 1.08rem; }
      #page-maid .maid-client-card-status-btn-wrap .maid-status-tooltip { max-width: min(280px, calc(100vw - 2rem)); white-space: normal; text-align: center; left: 50%; transform: translateX(-50%); padding: 0.5rem 0.65rem; line-height: 1.35; }
      #page-maid .maid-client-actions { justify-content: flex-start; }
      #page-maid .maid-notifications-card .card-title { font-size: var(--text-sm); gap: 0.35rem; }
      #page-maid .maid-notifications-card .card-title .icon-wrap { width: 30px; height: 30px; border-radius: 8px; }
      #page-maid .maid-notifications-card .client-notification { padding: 0.65rem 0.75rem; border-radius: 12px; }
      #page-maid .maid-notifications-card .client-notification-icon { width: 30px; height: 30px; border-radius: 8px; }
      #page-maid .maid-notifications-card .client-notification-title { font-size: var(--text-xs); }
      #page-maid .maid-notifications-card .client-notification-message { font-size: 0.65rem; }
      #page-maid .maid-emergency-btn { padding: 0.65rem 0.75rem; font-size: var(--text-xs); border-radius: 10px; }
      #page-maid .maid-emergency-icon { width: 24px; height: 24px; }
      #page-maid .maid-emergency-icon svg { width: 14px; height: 14px; }
      /* View client info + Accept + Reject – fit within card, smaller on mobile */
      .maid-booking-actions-row, .maid-notification-booking-actions { display: flex; flex-wrap: nowrap; flex-direction: row; gap: 0.2rem; align-items: center; justify-content: flex-start; }
      .maid-booking-actions-row .btn, .maid-notification-booking-actions .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; padding: 0.25rem 0.35rem; font-size: 0.6rem; font-weight: 600; min-height: 28px; line-height: 1.2;  }
      #page-maid .maid-latest-booking-actions { display: flex; flex-wrap: nowrap; width: 100%; }
      #page-maid .maid-latest-booking-actions > div { display: flex; flex: 1 1 0; min-width: 0; gap: 0.2rem; }
      #page-maid .maid-latest-booking-actions .btn { flex: 1 1 0; min-width: 0; padding: 0.3rem 0.4rem; font-size: 0.65rem; min-height: 36px; -webkit-tap-highlight-color: transparent; }
      /* Accept = green, Reject = red in maid notification center */
      #page-maid .btn-accept-booking-request, #maid-notifications-dropdown .btn-accept-booking-request { background: linear-gradient(180deg, #2ecc71 0%, #1a9c57 50%, #148a4a 100%); color: #fff; border: 1px solid #0e6b38; box-shadow: 0 2px 0 #0a5c2f, 0 3px 8px rgba(10,92,47,0.3), inset 0 1px 0 rgba(255,255,255,0.25); }
      #page-maid .btn-reject-booking-request, #maid-notifications-dropdown .btn-reject-booking-request { background: linear-gradient(180deg, #ef5350 0%, #d32f2f 50%, #b71c1c 100%); color: #fff; border: 1px solid #8e1515; box-shadow: 0 2px 0 #7a1212, 0 3px 8px rgba(122,18,18,0.3), inset 0 1px 0 rgba(255,255,255,0.2); }
      #page-maid .btn-reject-booking-request:hover, #maid-notifications-dropdown .btn-reject-booking-request:hover { background: linear-gradient(180deg, #f44336 0%, #e53935 50%, #c62828 100%); }
      /* View info button: darker for visibility in maid notification center */
      #page-maid .btn-view-booking-client-info, #maid-notifications-dropdown .btn-view-booking-client-info { background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 100%); color: #1b5e20; border: 1px solid #4caf50; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
      #page-maid .btn-view-booking-client-info:hover, #maid-notifications-dropdown .btn-view-booking-client-info:hover { background: linear-gradient(180deg, #c8e6c9 0%, #a5d6a7 100%); border-color: #388e3c; }
      /* New booking request card – mobile optimised */
      #page-maid .maid-latest-booking-card { padding: 0.75rem 0.85rem; margin-bottom: 0.6rem; border-radius: 14px; }
      #page-maid .maid-latest-booking-head { margin-bottom: 0.5rem; gap: 0.4rem; }
      #page-maid .maid-latest-booking-title { font-size: var(--text-base); font-weight: 700; }
      #page-maid .maid-latest-booking-close { width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 10px; font-size: 1.1rem; -webkit-tap-highlight-color: transparent; }
      #page-maid .maid-latest-booking-message { font-size: var(--text-xs); margin-bottom: 0.35rem; line-height: 1.4; }
      #page-maid .maid-latest-booking-details { font-size: var(--text-xs); margin-bottom: 0.75rem; }
      #page-maid .maid-latest-booking-details p { margin: 0.2rem 0 0 0; }
      #page-maid .maid-latest-booking-details p strong { font-size: 0.7rem; }
      .maid-booking-client-info-top { flex-direction: column; align-items: center; gap: 0.75rem; }
      .maid-booking-client-photo-wrap { width: 72px; height: 72px; }
      .maid-booking-client-info-meta { width: 100%; }


      /* Today's assignment: four detail cards (Phone, Time, Schedule, Service) – compact on mobile */
      #page-maid .maid-client-details { padding: 0.4rem 0.5rem 0.6rem; gap: 0.35rem; }
      #page-maid .maid-client-detail-row { padding: 0.3rem 0.4rem; gap: 0.4rem; border-radius: 8px; min-width: 0; }
      #page-maid .maid-client-detail-row > div { min-width: 0; }
      #page-maid .maid-client-detail-icon { width: 26px; height: 26px; border-radius: 6px; }
      #page-maid .maid-client-detail-icon svg { width: 13px; height: 13px; }
      #page-maid .maid-client-detail-label { font-size: 0.55rem; }
      #page-maid .maid-client-detail-value { font-size: 0.65rem; font-weight: var(--font-semibold); word-break: break-word; line-height: 1.25; }

      /* ── Client page ── */
      #page-client { font-size: var(--text-sm); }
      #page-client .page-header { margin-bottom: 0.75rem; padding-bottom: 0.5rem; }
      #page-client .page-header h1 { font-size: var(--text-lg); }
      #page-client .page-header .page-sub { font-size: var(--text-xs); }
      #page-client .card { padding: 0.85rem 0.8rem; margin-bottom: 0.65rem; border-radius: 12px; }
      #page-client .card-title { font-size: var(--text-xs); margin-bottom: 0.5rem; gap: 0.35rem; }
      #page-client .card-title .icon-wrap { width: 28px; height: 28px; border-radius: 7px; }
      #page-client .card-title .icon-wrap svg { width: 14px; height: 14px; }
      #page-client .client-muted { font-size: var(--text-xs); margin-bottom: 0.35rem; }

      /* Client – find a helper – space-optimised for mobile */
      #page-client .client-search-card { padding: 0.65rem 0.7rem; border-radius: 12px; }
      #page-client .client-search-card-header { margin-bottom: 0.5rem; }
      #page-client .client-search-title { font-size: var(--text-sm); gap: 0.35rem; }
      #page-client .client-search-title .icon-wrap { padding: 0.28rem; border-radius: 6px; }
      #page-client .client-search-title .icon-wrap svg { width: 18px; height: 18px; }
      #page-client .client-search-subtitle { font-size: 0.65rem; line-height: 1.35; margin-bottom: 0; }
      #page-client .client-search-form-wrap { gap: 0.5rem; }
      #page-client .client-search-filters { padding: 0.45rem 0.55rem; border-radius: 10px; }
      #page-client .client-search-section-label { font-size: 0.55rem; margin-bottom: 0.3rem; }
      #page-client .client-search-section-label:not(:first-child) { margin-top: 0.45rem; padding-top: 0.4rem; }
      #page-client .client-search-row { grid-template-columns: 1fr; gap: 0.4rem; }
      #page-client .client-search-filters .client-search-row:first-of-type { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
      #page-client .client-search-field label { font-size: 0.65rem; margin-bottom: 0.2rem; }
      #page-client .client-search-field select,
      #page-client .client-search-field input[type="number"] { min-height: 36px; padding: 0.4rem 0.6rem; font-size: var(--text-xs); border-radius: 8px; border-width: 1.5px; }
      #page-client .client-search-age-wrap input { min-height: 36px; padding: 0.4rem 0.5rem; }
      #page-client .client-service-pills { gap: 0.3rem; }
      #page-client .client-service-pill { padding: 0.3rem 0.55rem; font-size: 0.65rem; border-width: 1.5px; }
      #page-client .client-service-pill input { width: 14px; height: 14px; }
      #page-client .client-elderly-care-block { padding: 0.5rem 0.65rem; margin-top: 0.5rem; }
      #page-client .client-elderly-care-heading { font-size: 0.55rem; margin-bottom: 0.35rem; }
      #page-client .client-elderly-care-tier { gap: 0.35rem 0.5rem; }
      #page-client .client-elderly-care-option { font-size: var(--text-xs); }
      #page-client .client-search-btn { min-height: 36px; padding: 0.4rem 0.75rem; border-radius: 8px; font-size: 0; gap: 0.4rem; }
      #page-client .client-search-btn .client-search-btn-text { font-size: 0.7rem; }
      #page-client .client-search-btn .btn-icon { width: 16px; height: 16px; }
      #page-client .client-helpers-section .client-search-card { margin-bottom: 0.6rem; }
      #page-client .client-maids-card { padding: 0.75rem 0.8rem; }
      #page-client .client-maids-card-head { margin-bottom: 0.5rem; }
      #page-client .client-maids-card-title { font-size: var(--text-sm); }
      #page-client .client-maids-card-sub { font-size: 0.65rem; }

      /* Client – today's status */
      #page-client .client-status-highlight-wrap { padding: 0.65rem 0.75rem; margin-bottom: 0.65rem; border-radius: 12px; }
      #page-client .client-status-highlight { gap: 0.35rem; }
      #page-client .client-status-highlight .status-pill { font-size: 0.65rem; padding: 0.4rem 0.65rem; border-radius: 8px; gap: 0.3rem; }
      #page-client .client-status-highlight .status-pill .status-icon { width: 16px; height: 16px; }

      /* Client – assigned helper section (intro + list) */
      #page-client .client-assigned-helper-section { margin-bottom: 1rem; }
      #page-client .client-assigned-card { padding: 0.75rem 0.65rem; }
      #page-client .client-assigned-card .card-title { font-size: var(--text-sm); margin-bottom: 0.25rem; }
      #page-client .client-assigned-subtitle { font-size: 0.65rem; margin: 0 0 0.5rem; line-height: 1.35; color: #64748b; }
      #page-client #client-assigned-list { gap: 0.75rem; }

      /* Client – assigned helper profile cards */
      #page-client .client-maid-card-item { border-radius: 12px; }
      #page-client .client-profile-header { flex-direction: column; text-align: center; align-items: center; gap: 0.35rem; padding: 0.6rem 0.55rem 0.5rem; }
      #page-client .client-profile-header .client-profile-avatar-wrap { display: flex; justify-content: center; width: 100%; order: -1; }
      #page-client .client-profile-avatar-wrap img { width: 56px; height: 56px; }
      #page-client .client-profile-name { font-size: var(--text-sm); margin-bottom: 0.2rem; }
      #page-client .client-profile-head .skills-pills { justify-content: center; gap: 0.18rem; margin-top: 0.12rem; flex-wrap: wrap; }
      #page-client .client-profile-head .maid-service-pill { font-size: 0.55rem; padding: 0.12rem 0.35rem; white-space: normal; word-break: break-word; max-width: 100%; }
      #page-client .client-profile-meta { text-align: center; font-size: var(--text-xs); margin-top: 0; }
      #page-client .client-profile-grid { grid-template-columns: 1fr !important; gap: 0.3rem; }
      #page-client .client-profile-grid .profile-detail-card { padding: 0.4rem 0.55rem; gap: 0.35rem; border-radius: 8px; }
      #page-client .client-profile-grid .profile-detail-icon { width: 26px; height: 26px; border-radius: 6px; }
      #page-client .client-profile-grid .profile-detail-icon svg { width: 13px; height: 13px; }
      #page-client .client-profile-grid .dt-label { font-size: 0.55rem; }
      #page-client .client-profile-grid .dt-value { font-size: 0.65rem; }
      #page-client .client-profile-details { padding: 0 0.55rem 0.65rem; }
      #page-client .client-profile-details .client-profile-grid { margin-top: 0.35rem; }
      #page-client .client-profile-details .client-profile-actions-row { margin-top: 0.5rem; }
      #page-client .client-profile-actions-row--top { gap: 0.25rem; margin-top: 0.3rem; flex-wrap: wrap; justify-content: center; }
      #page-client .client-profile-actions-row--top .client-profile-actions { gap: 0.25rem; flex-wrap: nowrap; flex-direction: row; }
      #page-client .client-profile-actions-row--top .client-profile-actions .btn,
      #page-client .client-profile-actions-row--top .client-profile-actions .client-maid-details-toggle,
      #page-client .client-profile-actions-row--top .client-profile-actions .client-contact-btn {
        min-height: 26px; height: 26px; padding: 0.25rem 0.4rem; font-size: 0.6rem; border-radius: 6px; gap: 0.2rem;
      }
      #page-client .client-profile-actions-row--top .client-profile-actions .client-maid-details-toggle { min-width: 4.5rem; }
      #page-client .client-profile-actions .client-contact-btn,
      #page-client .client-profile-corner .client-contact-btn { font-size: 0.6rem; padding: 0.25rem 0.4rem; min-height: 26px; border-radius: 6px; flex: 1; min-width: 2.5rem; }
      #page-client .client-profile-actions .client-contact-btn svg,
      #page-client .client-profile-corner .client-contact-btn svg { width: 12px; height: 12px; }
      #page-client .client-profile-actions { flex-direction: row; flex-wrap: nowrap; width: 100%; gap: 0.25rem; justify-content: center; }
      #page-client .client-profile-actions .client-contact-btn { width: auto; flex: 1; min-width: 2.5rem; justify-content: center; }
      #page-client .client-profile-corner { flex-direction: row; flex-wrap: nowrap; width: 100%; justify-content: center; gap: 0.25rem; }
      #page-client .client-profile-corner .client-contact-btn { width: auto; flex: 1; min-width: 2.5rem; justify-content: center; }
      #page-client .client-card-status-pill { padding: 0.3rem 0.55rem; font-size: 0.65rem; min-height: 28px; }
      #page-client .client-card-status-pill .status-icon { width: 14px; height: 14px; }
      #page-client .client-profile-subtitle { margin-bottom: 0.15rem; font-size: 0.65rem; }
      #page-client .client-profile-head .skills-pills { margin-bottom: 0; }

      /* Client – maid cards in grid – 2 per row on mobile */
      #page-client .client-maids-list.client-maids-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem 0.45rem; }
      #page-client .client-maids-list .maid-card { border-radius: 10px; }
      #page-client .client-maids-list .maid-card-top { padding: 0.5rem 0.45rem 0; }
      #page-client .client-maids-list .maid-card .maid-avatar-wrap { width: 44px; height: 44px; margin-bottom: 0.3rem; }
      #page-client .client-maids-list .maid-card .maid-name { font-size: 0.65rem; }
      #page-client .client-maids-list .maid-skills-pills { margin-top: 0.15rem; gap: 0.15rem; justify-content: center; }
      #page-client .client-maids-list .maid-service-pill { font-size: 0.5rem; padding: 0.1rem 0.25rem; }
      #page-client .client-maids-list .maid-card-meta { margin-top: 0.2rem; font-size: 0.55rem; gap: 0.2rem 0.35rem; }
      #page-client .client-maids-list .maid-trust-wrap { padding: 0.28rem 0.4rem; margin-top: 0.3rem; gap: 0.2rem; }
      #page-client .client-maids-list .maid-trust-label { font-size: 0.5rem; }
      #page-client .client-maids-list .maid-trust-value { font-size: 0.6rem; }
      #page-client .client-maids-list .maid-trust-bar { height: 4px; min-height: 4px; }
      #page-client .client-maids-list .maid-card-body { padding: 0.4rem 0.45rem 0.5rem; margin-top: 0.15rem; }
      #page-client .client-maids-list .maid-card-actions { flex-direction: column; gap: 0.25rem; align-items: stretch; }
      #page-client .client-maids-list .maid-card-actions .btn-assigned-disabled { width: 100%; flex: 0 0 auto; min-height: 28px; font-size: 0.6rem; font-weight: 700; border-radius: 6px; padding: 0.28rem 0.45rem; white-space: nowrap; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; }
      #page-client .client-maids-list .maid-card-actions .maid-card-call-msg-row { display: flex; flex-direction: row; gap: 0.2rem; width: 100%; }
      #page-client .client-maids-list .maid-card-actions .maid-card-call-msg-row .maid-card-call,
      #page-client .client-maids-list .maid-card-actions .maid-card-call-msg-row .maid-card-msg { flex: 1 1 0; min-width: 0; width: auto; }
      #page-client .client-maids-list .maid-card-actions .btn-profile { width: 100%; flex: none; min-width: 0; justify-content: center; text-decoration: none; }
      #page-client .client-maids-list .maid-card-actions .btn { min-height: 28px; font-size: 0.55rem; border-radius: 6px; padding: 0.28rem 0.4rem; }
      #page-client .client-maids-explore-more { padding: 0.5rem 0 0; }

      /* Client – notifications */
      #page-client .client-notification { padding: 0.55rem 0.65rem; border-radius: 10px; }
      #page-client .client-notification-icon { width: 26px; height: 26px; border-radius: 7px; }
      #page-client .client-notification-icon svg { width: 14px; height: 14px; }
      #page-client .client-notification-title { font-size: var(--text-xs); margin-bottom: 0.1rem; }
      #page-client .client-notification-message { font-size: 0.65rem; }
      #page-client .client-notification-time { font-size: 0.55rem; }
      #page-client .client-notification-type { font-size: 0.55rem; }
      #page-client .client-notifications-footer .btn-inline { font-size: var(--text-xs); padding: 0.4rem 0.85rem; }

      /* Client – payment & history – space-optimised */
      #page-client #client-payment-section .card-title { font-size: var(--text-sm); margin-bottom: 0.25rem; }
      #page-client #client-payment-section .card-title .icon-wrap { padding: 0.3rem; }
      #page-client #client-payment-section .card-title .icon-wrap svg { width: 16px; height: 16px; }
      #page-client #client-payment-section .client-muted { margin-bottom: 0.4rem; font-size: 0.65rem; line-height: 1.35; }
      #page-client .client-payment-actions { margin-bottom: 0.5rem !important; gap: 0.35rem !important; }
      #page-client .client-payment-actions .btn { min-height: 32px; padding: 0.35rem 0.6rem; font-size: 0.65rem; }
      #page-client .client-monthly-wrap { margin-top: 0 !important; }
      #page-client .client-history-summary .client-summary-row { padding: 0.45rem 0.6rem; font-size: 0.65rem; border-right: none; border-bottom: 1px solid var(--green-100); min-width: 0; }
      #page-client .client-history-summary .client-summary-row:last-child { border-bottom: none; }
      #page-client .client-history-summary .client-summary-row .label,
      #page-client .client-history-summary .client-summary-row .value { font-size: 0.65rem; }
      #page-client .client-history-summary .client-summary-row.highlight .value { font-size: 0.75rem; }
      #page-client .client-history-summary { flex-direction: column; }
      #page-client .client-history-block { margin-top: 0.4rem; border-radius: 8px; }
      #page-client #client-history-loaded .client-history-block:first-of-type { margin-top: 0.4rem; }
      #page-client .client-history-subtitle { padding: 0.4rem 0.55rem; font-size: 0.65rem; }
      #page-client .client-history-subtitle .client-history-subtitle-icon { width: 14px; height: 14px; }
      #page-client .client-payment-empty { padding: 0.5rem 0.6rem; font-size: 0.65rem; }
      #page-client .client-payment-table th, #page-client .client-payment-table td { padding: 0.3rem 0.4rem; font-size: 0.55rem; }
      #page-client .client-empty, #page-client .client-summary-placeholder { padding: 0.5rem 0.6rem; font-size: 0.65rem; }
      #page-client .client-maids-empty-msg { padding: 1rem 0.75rem; font-size: var(--text-xs); }
      /* Client – Help & Support – space-optimised */
      #page-client #client-help-section .card-title { font-size: var(--text-sm); margin-bottom: 0.25rem; }
      #page-client #client-help-section .card-title .icon-wrap { width: 28px; height: 28px; padding: 0.3rem; }
      #page-client #client-help-section .card-title .icon-wrap svg { width: 16px; height: 16px; }
      #page-client .client-action-buttons { grid-template-columns: 1fr; gap: 0.3rem; }
      #page-client .client-action-btn { font-size: 0.65rem; padding: 0.4rem 0.6rem; min-height: 36px; gap: 0.4rem; }
      #page-client .client-action-btn .btn-icon { width: 16px; height: 16px; }
      #page-client .client-form-row { grid-template-columns: 1fr; }

      /* ── Admin page ── */
      #page-admin .admin-page-header { flex-direction: row; align-items: center; padding: 0.6rem 0.75rem; gap: 0.5rem; border-radius: 12px; margin-bottom: 0.5rem; }
      #page-admin .admin-page-header-icon { width: 36px; height: 36px; border-radius: 10px; }
      #page-admin .admin-page-title { font-size: var(--text-lg); }
      #page-admin .admin-page-welcome { font-size: var(--text-xs); }
      #page-admin .admin-page-sub { font-size: 0.65rem; }
      body.page-admin .welcome-banner { padding: 0.65rem 0.75rem; }
      body.page-admin .welcome-greeting { font-size: var(--text-base); }
      body.page-admin .welcome-role { font-size: 0.6rem; padding: 0.15rem 0.45rem; }
      #page-admin .admin-nav-anchors { gap: 0.3rem 0.4rem; padding: 0.35rem 0; margin-bottom: 0.5rem; }
      #page-admin .admin-nav-link { padding: 0.4rem 0.65rem; font-size: var(--text-xs); font-weight: var(--font-semibold); border-radius: 8px; }
      #page-admin .admin-overview-card { padding: 0.65rem 0.7rem; border-radius: 12px; }
      #page-admin .admin-overview-header-icon { width: 32px; height: 32px; }
      #page-admin .admin-overview-header-icon svg { width: 16px; height: 16px; }
      #page-admin .admin-overview-title { font-size: var(--text-sm); }
      #page-admin .admin-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 0.3rem; }
      #page-admin .admin-kpi { padding: 0.3rem 0.4rem; border-radius: 8px; }
      #page-admin .admin-kpi-value { font-size: var(--text-sm); }
      #page-admin .admin-kpi-label { font-size: 0.6rem; }
      #page-admin .card { padding: 0.85rem 0.8rem; border-radius: 12px; }
      #page-admin .admin-card-header { gap: 0.65rem; align-items: flex-start; }
      #page-admin .admin-card-header .card-title { font-size: var(--text-sm); }
      #page-admin .admin-card-header .card-desc { font-size: var(--text-xs); }
      #page-admin #admin-card-notifications .card-desc { font-size: var(--text-sm); line-height: 1.45; }
      #page-admin .admin-card-header-actions { margin-top: 0.25rem; gap: 0.4rem; }
      #page-admin .admin-card-header .btn, #page-admin .admin-card-header-actions .btn { font-size: var(--text-xs); min-height: 34px; padding: 0.35rem 0.65rem; }
      #page-admin .admin-date-preset { min-height: 32px; padding: 0.3rem 0.5rem; font-size: 0.75rem; }
      #page-admin .admin-notifications-toolbar { gap: 0.4rem 0.5rem; }
      #page-admin .admin-notifications-date-input { min-height: 36px; font-size: var(--text-xs); padding: 0.35rem 0.5rem; }
      #page-admin .admin-maids-tabs { flex-wrap: nowrap; gap: 0.35rem; margin-bottom: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      #page-admin .admin-maids-tab { padding: 0.3rem 0.5rem; font-size: 0.65rem; white-space: nowrap; flex: 0 0 auto; }
      #page-admin .admin-search-input { font-size: var(--text-xs); padding: 0.4rem 0.6rem; max-width: 100%; }
      #page-admin .admin-kpi-row { grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
      #page-admin .admin-kpi { padding: 0.3rem 0.4rem; gap: 0.35rem; border-radius: 8px; }
      #page-admin .admin-kpi-icon { width: 24px; height: 24px; border-radius: 6px; }
      #page-admin .admin-kpi-icon svg { width: 12px; height: 12px; }
      #page-admin .admin-kpi-value { font-size: var(--text-sm); }
      #page-admin .admin-kpi-label { font-size: 0.6rem; }
      #page-admin .admin-kpi-row-title { font-size: 0.6rem; }
      .table-wrap table, #admin-payments table, #admin-exceptions table,
      #admin-complaints table, #admin-emergencies table { min-width: 280px; font-size: var(--text-xs); }
      .table-wrap th, .table-wrap td, #admin-payments th, #admin-payments td,
      #admin-exceptions th, #admin-exceptions td { padding: 0.4rem 0.5rem; }
      #page-admin .admin-detail-block.table-wrap { margin-top: 0.35rem; }

      /* Attendance exceptions on mobile: horizontal scroll so all columns visible (Yes/No included) */
      #page-admin #admin-exceptions .admin-exceptions-wrap,
      #page-admin #admin-exceptions .table-wrap.admin-exceptions-wrap { overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; margin: 0 -0.25rem; border-radius: 10px; border: 1px solid #e2e8f0; max-width: 100%; }
      #admin-exceptions .admin-exceptions-table { min-width: 480px; width: max-content; display: table; font-size: var(--text-sm); border-collapse: collapse; }
      #admin-exceptions .admin-exceptions-table thead { display: table-header-group; }
      #admin-exceptions .admin-exceptions-table tbody { display: table-row-group; }
      #admin-exceptions .admin-exceptions-table tr { display: table-row; }
      #admin-exceptions .admin-exceptions-table th { white-space: nowrap; padding: 0.5rem 0.6rem; font-size: var(--text-xs); font-weight: 600; color: #475569; background: #f8fafc; border-bottom: 2px solid #e2e8f0; text-align: left; }
      #admin-exceptions .admin-exceptions-table td { display: table-cell; padding: 0.5rem 0.6rem; border-bottom: 1px solid #e2e8f0; vertical-align: middle; white-space: nowrap; }
      #admin-exceptions .admin-exceptions-table td.cell-avatar { white-space: nowrap; }
      #admin-exceptions .admin-exceptions-table .avatar-sm { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-right: 0.35rem; }

      /* ── Login / Signup ── */
      #page-login .login-card, #page-admin-login .login-card { padding: 1.25rem 1rem; border-radius: 16px; }
      #page-login .form-group input { min-height: 48px; font-size: 16px; }
      #page-login .btn-block { min-height: 44px; }
      .login-hero { padding: 0 0 0.85rem; }
      .login-hero .logo { width: 72px; height: 72px; }
      .login-hero h1 { font-size: var(--text-xl); }
    }

    /* ── Tiny phones (≤380px) ── */
    @media (max-width: 380px) {
      .nav-brand { font-size: 0.65rem; }
      .nav .nav-logout-btn { width: 52px; min-width: 52px; font-size: 0.55rem; }
      .nav .nav-notifications-btn { width: 52px; min-width: 52px; }
      .nav a, .nav button { padding: 0.35rem 0.45rem; font-size: var(--text-xs); min-height: 34px; }
      .nav .nav-menu { gap: 0.25rem 0.3rem; }
      .btn { font-size: 0.65rem; padding: 0.4rem 0.65rem; min-height: 32px; }
      #page-client .client-search-title { font-size: var(--text-sm); }
      
#page-client .client-profile-grid .profile-detail-card { padding: 0.35rem 0.5rem; }
      /* View profile modal: compact for mobile */
      #client-maid-profile-modal .client-profile-modal-content { padding: 0 0.25rem; }
      #client-maid-profile-modal .modal-body { padding: 0.75rem 0.85rem !important; }
      #client-maid-profile-modal .client-profile-modal-content .profile-modal-avatar-wrap { margin-bottom: 0.5rem !important; }
      #client-maid-profile-modal .client-profile-modal-content h3 { font-size: 1rem !important; margin-bottom: 0.35rem !important; }
      #client-maid-profile-modal .client-profile-modal-content .maid-skills-pills { margin-bottom: 0.5rem !important; gap: 0.25rem; }
      #client-maid-profile-modal .client-profile-modal-content .maid-service-pill { padding: 0.2rem 0.4rem; font-size: 0.65rem; }
      #client-maid-profile-modal .client-profile-modal-content .maid-trust-bar { height: 6px !important; margin-bottom: 0.6rem !important; }
      #client-maid-profile-modal .client-profile-modal-content .profile-modal-trust { margin-bottom: 0.4rem !important; font-size: 0.8rem !important; }
      #client-maid-profile-modal .client-profile-modal-content .profile-modal-phone span { font-size: 0.8rem !important; }
      #client-maid-profile-modal .client-profile-modal-content .profile-modal-phone { padding: 0.35rem 0 !important; margin-bottom: 0.6rem !important; }
      #client-maid-profile-modal .client-profile-modal-content .profile-modal-meta { gap: 0.35rem !important; font-size: 0.8rem !important; }
      #client-maid-profile-modal .client-profile-modal-content .profile-phone-hint { font-size: 0.7rem !important; margin-top: 0.15rem !important; }
      #client-maid-profile-modal .client-profile-modal-content .profile-modal-actions { margin-top: 0.75rem !important; gap: 0.4rem !important; }
      #client-maid-profile-modal .client-profile-modal-content .btn { min-height: 40px !important; padding: 0.5rem 0.65rem !important; font-size: 0.8rem !important; }
      /* Same compact styles when profile shown in search results modal */
      #client-search-results-profile .client-profile-modal-content { padding: 0 0.25rem; }
      #client-search-results-profile .client-profile-modal-content .profile-modal-avatar-wrap { margin-bottom: 0.5rem !important; }
      #client-search-results-profile .client-profile-modal-content h3 { font-size: 1rem !important; margin-bottom: 0.35rem !important; }
      #client-search-results-profile .client-profile-modal-content .maid-skills-pills { margin-bottom: 0.5rem !important; gap: 0.25rem; }
      #client-search-results-profile .client-profile-modal-content .maid-service-pill { padding: 0.2rem 0.4rem; font-size: 0.65rem; }
      #client-search-results-profile .client-profile-modal-content .maid-trust-bar { height: 6px !important; margin-bottom: 0.6rem !important; }
      #client-search-results-profile .client-profile-modal-content .profile-modal-trust { margin-bottom: 0.4rem !important; font-size: 0.8rem !important; }
      #client-search-results-profile .client-profile-modal-content .profile-modal-phone span { font-size: 0.8rem !important; }
      #client-search-results-profile .client-profile-modal-content .profile-modal-phone { padding: 0.35rem 0 !important; margin-bottom: 0.6rem !important; }
      #client-search-results-profile .client-profile-modal-content .profile-modal-meta { gap: 0.35rem !important; font-size: 0.8rem !important; }
      #client-search-results-profile .client-profile-modal-content .profile-phone-hint { font-size: 0.7rem !important; margin-top: 0.15rem !important; }
      #client-search-results-profile .client-profile-modal-content .profile-modal-actions { margin-top: 0.75rem !important; gap: 0.4rem !important; }
      #client-search-results-profile .client-profile-modal-content .btn { min-height: 40px !important; padding: 0.5rem 0.65rem !important; font-size: 0.8rem !important; }
    }


    #page-admin .admin-requests-badge { display: none; margin-left: 0.35rem; padding: 0.15em 0.45em; font-size: 0.7rem; font-weight: var(--font-bold); line-height: 1; border-radius: 999px; background: #dc3545; color: #fff; vertical-align: middle; }
    #page-admin .admin-date-preset.active .admin-requests-badge { background: rgba(255,255,255,0.35); color: #fff; }

    #page-admin .admin-requests-badge.visible { display: inline !important; }


    /* Booking request sent alert (below Today's status) */
    #page-client .client-booking-sent-alert { margin-bottom: 1.25rem; padding: 1rem 1.25rem; display: flex; align-items: flex-start; gap: 1rem; flex-wrap: nowrap; background: linear-gradient(135deg, var(--green-50) 0%, #fff 100%); border: 1px solid var(--green-200); border-radius: 14px; box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08); }
    #page-client .client-booking-sent-alert .client-booking-sent-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(16, 185, 129, 0.2); color: var(--green-600); }
    #page-client .client-booking-sent-alert .client-booking-sent-body { flex: 1; min-width: 0; }
    #page-client .client-booking-sent-alert .client-booking-sent-title { margin: 0 0 0.35rem; font-size: var(--text-sm); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-700); }
    #page-client .client-booking-sent-alert .client-booking-sent-message { margin: 0; font-size: var(--text-base); font-weight: var(--font-medium); color: var(--green-800); line-height: 1.5; }