/* =====================================================
   DuniaHunt Professional Theme v2.0
   Field-Employee Lead Capture CRM — Sharp Angular Edition
   ===================================================== */

/* ── DESIGN TOKENS ── */
:root {
    /* Brand — Emerald */
    --dh-primary:        #16a34a;
    --dh-primary-dark:   #15803d;
    --dh-primary-light:  #22c55e;
    --dh-primary-ultra:  #f0fdf4;
    --dh-primary-pale:   #bbf7d0;

    /* Semantic */
    --dh-red:            #ef4444;
    --dh-red-dark:       #dc2626;
    --dh-yellow:         #f59e0b;
    --dh-yellow-dark:    #d97706;
    --dh-blue:           #3b82f6;
    --dh-blue-dark:      #2563eb;
    --dh-purple:         #8b5cf6;
    --dh-teal:           #14b8a6;

    /* Neutral scale */
    --dh-black:          #0f172a;
    --dh-text:           #1e293b;
    --dh-text-2:         #334155;
    --dh-muted:          #64748b;
    --dh-muted-light:    #94a3b8;
    --dh-border:         #e2e8f0;
    --dh-border-light:   #f1f5f9;
    --dh-bg:             #f8fafc;
    --dh-bg-2:           #f1f5f9;
    --dh-white:          #ffffff;

    /* Sidebar */
    --dh-sidebar-bg:     #061008;
    --dh-sidebar-w:      260px;
    --dh-header-h:       60px;

    /* Elevation */
    --dh-shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
    --dh-shadow:     0 1px 3px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
    --dh-shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --dh-shadow-lg:  0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
    --dh-shadow-card:0 2px 8px rgba(0,0,0,0.07);

    /* Geometry — brand zero-radius */
    --dh-radius:        0px;
    --dh-radius-sm:     0px;

    /* Transition */
    --tx: 0.14s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── ZERO BORDER-RADIUS RULE ── */
*, *::before, *::after {
    box-sizing: border-box;
    border-radius: 0 !important;
}

/* ── BASE ── */
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--dh-bg);
    color: var(--dh-text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── APP SHELL ── */
.dh-app { display: flex; min-height: 100vh; }

/* ═══════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════ */
.dh-sidebar {
    width: var(--dh-sidebar-w);
    min-height: 100vh;
    background-image: linear-gradient(180deg, #061008 0%, #071510 65%, #060c08 100%);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    z-index: 1000;
    border-right: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}

/* ── LOGO ── */
.dh-sidebar-logo {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.dh-sidebar-logo .logo-dots { display: flex; gap: 5px; margin-bottom: 10px; }
.dh-sidebar-logo .logo-dots span { width: 7px; height: 7px; }
.dh-sidebar-logo .logo-dots .dot-r { background: #f87171; }
.dh-sidebar-logo .logo-dots .dot-y { background: #fbbf24; }
.dh-sidebar-logo .logo-dots .dot-b { background: #60a5fa; }

.dh-sidebar-logo .logo-icon {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--dh-primary) 0%, var(--dh-primary-dark) 100%);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(22,163,74,0.40);
    font-size: 1.05rem; color: #fff; font-weight: 900;
}
.dh-sidebar-logo .logo-title {
    font-size: 1.35rem; font-weight: 900; color: #fff;
    letter-spacing: -0.5px; line-height: 1;
    text-transform: uppercase;
}
.dh-sidebar-logo .logo-title .green { color: #4ade80; }
.dh-sidebar-logo .logo-tagline {
    font-size: 0.58rem; color: rgba(255,255,255,0.28);
    letter-spacing: 2.8px; text-transform: uppercase;
    margin-top: 4px; font-weight: 500;
}

/* ── NAV ── */
.dh-nav {
    flex: 1; padding: 8px 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.dh-nav::-webkit-scrollbar { width: 2px; }
.dh-nav::-webkit-scrollbar-track { background: transparent; }
.dh-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); }

.dh-nav-section {
    padding: 14px 18px 4px;
    font-size: 0.585rem; color: rgba(255,255,255,0.22);
    text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
.dh-nav-section::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(255,255,255,0.05);
}

.dh-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 18px 9px 16px;
    color: rgba(255,255,255,0.58);
    text-decoration: none;
    font-size: 0.84rem; font-weight: 500;
    transition: var(--tx);
    cursor: pointer; border: none; background: none;
    width: 100%; text-align: left;
    border-left: 3px solid transparent;
    letter-spacing: 0.1px;
}
.dh-nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.9);
    border-left-color: rgba(74,222,128,0.35);
}
.dh-nav-item.active {
    background: linear-gradient(90deg, rgba(22,163,74,0.18) 0%, rgba(22,163,74,0.04) 100%);
    color: #4ade80;
    border-left-color: #4ade80;
    font-weight: 600;
}
.dh-nav-item .nav-icon {
    font-size: 0.95rem; width: 18px; text-align: center; flex-shrink: 0;
    opacity: 0.7;
    display: flex; align-items: center; justify-content: center;
}
.dh-nav-item.active .nav-icon { opacity: 1; }

/* ── SIDEBAR USER ── */
.dh-sidebar-user {
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 10px;
    background: rgba(0,0,0,0.22);
    flex-shrink: 0;
}
.dh-sidebar-user .user-avatar {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--dh-primary) 0%, var(--dh-primary-dark) 100%);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.8rem; color: #fff; flex-shrink: 0;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(22,163,74,0.3);
}
.dh-sidebar-user .user-info { flex: 1; min-width: 0; }
.dh-sidebar-user .user-name {
    font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.88);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-sidebar-user .user-role {
    font-size: 0.64rem; color: rgba(255,255,255,0.32);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.dh-sidebar-user .logout-btn {
    background: none; border: 1px solid transparent;
    color: rgba(255,255,255,0.28); cursor: pointer;
    font-size: 0.82rem; padding: 5px 7px;
    transition: var(--tx); display: flex; align-items: center;
}
.dh-sidebar-user .logout-btn:hover {
    color: #f87171; border-color: rgba(248,113,113,0.3);
    background: rgba(248,113,113,0.08);
}

/* ═══════════════════════════════════════════════════
   MAIN AREA
═══════════════════════════════════════════════════ */
.dh-main {
    margin-left: var(--dh-sidebar-w);
    flex: 1; display: flex; flex-direction: column;
    min-height: 100vh;
}

/* ── TOP HEADER ── */
.dh-header {
    height: var(--dh-header-h);
    background: var(--dh-white);
    border-bottom: 1px solid var(--dh-border);
    display: flex; align-items: center;
    padding: 0 28px;
    position: sticky; top: 0; z-index: 100;
    gap: 16px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 3px 8px rgba(0,0,0,0.02);
}
.dh-header-title {
    font-size: 0.92rem; font-weight: 700; color: var(--dh-black);
    flex: 1; letter-spacing: -0.1px;
    display: flex; align-items: center; gap: 8px;
}
.dh-header-title i { color: var(--dh-primary); font-size: 1rem; }

.dh-header-badge {
    background: var(--dh-primary-ultra); color: var(--dh-primary);
    font-size: 0.65rem; font-weight: 700; padding: 3px 9px;
    border: 1px solid var(--dh-primary-pale);
    letter-spacing: 0.6px; text-transform: uppercase;
}
.dh-header-right {
    display: flex; align-items: center; gap: 4px;
}
.dh-header-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid transparent; cursor: pointer;
    color: var(--dh-muted); transition: var(--tx); font-size: 1rem;
}
.dh-header-btn:hover {
    background: var(--dh-bg-2); border-color: var(--dh-border);
    color: var(--dh-text);
}
.dh-header-divider {
    width: 1px; height: 24px;
    background: var(--dh-border); margin: 0 4px;
}
.dh-header-date {
    font-size: 0.74rem; color: var(--dh-muted); font-weight: 500;
    white-space: nowrap;
}
.dh-header-role-tag {
    font-size: 0.66rem; font-weight: 700;
    padding: 4px 10px;
    text-transform: uppercase; letter-spacing: 0.7px;
    border: 1px solid;
}
.dh-header-role-tag.employee    { color: var(--dh-primary); background: var(--dh-primary-ultra); border-color: var(--dh-primary-pale); }
.dh-header-role-tag.company  { color: var(--dh-blue-dark); background: #eff6ff; border-color: #bfdbfe; }
.dh-header-role-tag.platform { color: var(--dh-purple); background: #f5f3ff; border-color: #ddd6fe; }
.dh-header-avatar {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--dh-primary) 0%, var(--dh-primary-dark) 100%);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.78rem; color: #fff;
    text-transform: uppercase; cursor: pointer;
    transition: var(--tx);
}
.dh-header-avatar:hover { opacity: 0.85; }

/* ── PAGE ── */
.dh-page { padding: 28px; flex: 1; }

/* ═══════════════════════════════════════════════════
   AUTH LAYOUT — Split Screen
═══════════════════════════════════════════════════ */
.dh-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: var(--dh-white);
}

/* Left brand panel */
.dh-auth-brand {
    flex: 0 0 400px;
    background-image: linear-gradient(160deg, #061008 0%, #0a1e0d 55%, #061a15 100%);
    display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start;
    padding: 48px 44px;
    position: relative; overflow: hidden;
}
/* subtle grid overlay */
.dh-auth-brand::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(74,222,128,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74,222,128,0.025) 1px, transparent 1px);
    background-size: 36px 36px;
}
/* glow orb */
.dh-auth-brand::after {
    content: '';
    position: absolute; bottom: -80px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(22,163,74,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.dh-auth-brand .brand-inner {
    position: relative; z-index: 1; width: 100%;
}
.dh-auth-brand .brand-dots { display: flex; gap: 5px; margin-bottom: 18px; }
.dh-auth-brand .brand-dots span { width: 8px; height: 8px; }
.dh-auth-brand .brand-dots .dot-r { background: #f87171; }
.dh-auth-brand .brand-dots .dot-y { background: #fbbf24; }
.dh-auth-brand .brand-dots .dot-b { background: #60a5fa; }

.dh-auth-brand .brand-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--dh-primary) 0%, var(--dh-primary-dark) 100%);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 6px 20px rgba(22,163,74,0.40);
    font-size: 1.4rem; color: #fff;
}
.dh-auth-brand .brand-name {
    font-size: 2.2rem; font-weight: 900; color: #fff;
    line-height: 1; letter-spacing: -0.6px;
    text-transform: uppercase; margin-bottom: 6px;
}
.dh-auth-brand .brand-name .green { color: #4ade80; }
.dh-auth-brand .brand-tagline {
    font-size: 0.67rem; color: rgba(255,255,255,0.28);
    letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 40px; font-weight: 500;
}
.dh-auth-brand .brand-features { display: flex; flex-direction: column; gap: 18px; }
.dh-auth-brand .brand-feature { display: flex; align-items: flex-start; gap: 14px; }
.dh-auth-brand .brand-feature .feat-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; color: #4ade80;
}
.dh-auth-brand .brand-feature .feat-text {}
.dh-auth-brand .brand-feature .feat-title {
    font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.8);
    line-height: 1.3;
}
.dh-auth-brand .brand-feature .feat-desc {
    font-size: 0.72rem; color: rgba(255,255,255,0.32);
    margin-top: 2px;
}
.dh-auth-brand .brand-footer {
    margin-top: 48px; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.07);
    font-size: 0.7rem; color: rgba(255,255,255,0.2);
    font-weight: 500;
}

/* Right form panel */
.dh-auth-right {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 48px 40px;
    background: var(--dh-white);
}
.dh-auth-card { width: 100%; max-width: 400px; }
.dh-auth-logo { text-align: center; margin-bottom: 28px; }
.dh-auth-logo .logo-big {
    font-size: 1.8rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: -0.5px;
}
.dh-auth-logo .logo-big .g { color: var(--dh-primary); }
.dh-auth-logo .logo-big .b { color: var(--dh-black); }
.dh-auth-logo .dots { display: none; }
.dh-auth-logo .tagline {
    font-size: 0.67rem; color: var(--dh-muted);
    letter-spacing: 2px; text-transform: uppercase; margin-top: 4px;
}

@media (max-width: 820px) {
    .dh-auth-brand { display: none; }
    .dh-auth-wrap {
        background: linear-gradient(160deg, #061008 0%, var(--dh-primary) 55%, #1a3a5a 100%);
    }
    .dh-auth-right { padding: 24px 20px; }
    .dh-auth-card { max-width: 420px; }
    .dh-auth-logo .logo-big { display: block; }
    .dh-auth-logo .dots { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
    .dh-auth-logo .dots span { width: 8px; height: 8px; }
}

/* ═══════════════════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════════════════ */
.dh-stat-card {
    background: var(--dh-white);
    padding: 22px 22px 18px;
    box-shadow: var(--dh-shadow);
    border-left: 4px solid transparent;
    border: 1px solid var(--dh-border);
    border-left-width: 4px;
    transition: var(--tx);
    position: relative;
    overflow: hidden;
}
.dh-stat-card:hover {
    box-shadow: var(--dh-shadow-md);
    transform: translateY(-2px);
}
.dh-stat-card.green { border-left-color: var(--dh-primary); }
.dh-stat-card.red   { border-left-color: var(--dh-red); }
.dh-stat-card.yellow{ border-left-color: var(--dh-yellow); }
.dh-stat-card.blue  { border-left-color: var(--dh-blue); }
.dh-stat-card.purple{ border-left-color: var(--dh-purple); }

.dh-stat-card .stat-icon {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; margin-bottom: 14px;
}
.dh-stat-card.green  .stat-icon { background: var(--dh-primary-ultra); color: var(--dh-primary); }
.dh-stat-card.red    .stat-icon { background: #fef2f2; color: var(--dh-red); }
.dh-stat-card.yellow .stat-icon { background: #fffbeb; color: var(--dh-yellow); }
.dh-stat-card.blue   .stat-icon { background: #eff6ff; color: var(--dh-blue); }
.dh-stat-card.purple .stat-icon { background: #f5f3ff; color: var(--dh-purple); }

.dh-stat-card .stat-val {
    font-size: 2.1rem; font-weight: 800; color: var(--dh-black);
    line-height: 1; letter-spacing: -1.5px;
}
.dh-stat-card .stat-lbl {
    font-size: 0.7rem; color: var(--dh-muted); margin-top: 6px;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px;
}
.dh-stat-card .stat-trend {
    font-size: 0.71rem; font-weight: 600; margin-top: 6px;
    display: flex; align-items: center; gap: 3px;
}
.dh-stat-card .stat-trend.up   { color: var(--dh-primary); }
.dh-stat-card .stat-trend.down { color: var(--dh-red); }

/* ═══════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════ */
.dh-card {
    background: var(--dh-white);
    box-shadow: var(--dh-shadow);
    border: 1px solid var(--dh-border);
}
.dh-card-header {
    padding: 14px 22px;
    border-bottom: 1px solid var(--dh-border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--dh-white);
}
.dh-card-title {
    font-size: 0.84rem; font-weight: 700; color: var(--dh-black);
    text-transform: uppercase; letter-spacing: 0.4px;
    display: flex; align-items: center; gap: 7px;
}
.dh-card-title i { font-size: 0.9rem; color: var(--dh-primary); }
.dh-card-body { padding: 20px 22px; }

/* ═══════════════════════════════════════════════════
   LEAD / BIZ CARDS
═══════════════════════════════════════════════════ */
.dh-lead-card {
    background: var(--dh-white);
    padding: 16px 18px;
    box-shadow: var(--dh-shadow-xs);
    border: 1px solid var(--dh-border);
    border-left: 4px solid var(--dh-border);
    transition: var(--tx);
    cursor: pointer;
}
.dh-lead-card:hover {
    box-shadow: var(--dh-shadow-md);
    border-left-color: var(--dh-primary);
    transform: translateX(3px);
}
.dh-lead-card .lead-name { font-size: 0.9rem; font-weight: 700; color: var(--dh-black); }
.dh-lead-card .lead-meta {
    font-size: 0.77rem; color: var(--dh-muted); margin-top: 3px;
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.dh-lead-card .lead-meta i { font-size: 0.75rem; }
.dh-lead-card .lead-footer {
    display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
/* Business Hunt Cards */
.dh-biz-card {
    background: var(--dh-white);
    padding: 16px 18px;
    box-shadow: var(--dh-shadow-xs);
    transition: var(--tx);
    border: 1px solid var(--dh-border);
    border-left: 4px solid var(--dh-primary);
    display: flex; flex-direction: column;
}
.dh-biz-card:hover {
    box-shadow: var(--dh-shadow-md);
    border-color: var(--dh-primary-pale);
    border-left-color: var(--dh-primary-dark);
    transform: translateY(-2px);
}
.dh-biz-card.captured {
    border-left-color: #94a3b8;
    opacity: 0.85;
}
.dh-biz-card.captured:hover { border-left-color: #64748b; }
.dh-biz-card .biz-name  { font-size: 0.9rem; font-weight: 800; color: var(--dh-black); line-height: 1.3; }
.dh-biz-card .biz-addr  { font-size: 0.75rem; color: var(--dh-muted); margin-top: 4px; }
.dh-biz-card .biz-chip  {
    font-size: 0.67rem; padding: 2px 8px;
    background: var(--dh-primary-ultra); color: var(--dh-primary);
    font-weight: 700; border: 1px solid var(--dh-primary-pale);
}
.dh-biz-card .biz-rating { font-size: 0.78rem; font-weight: 700; color: #d97706; }
.dh-biz-card .biz-captured { background: #fef2f2; color: var(--dh-red); border-color: #fecaca; }

/* ═══════════════════════════════════════════════════
   STATUS BADGES
═══════════════════════════════════════════════════ */
.status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.67rem; font-weight: 700;
    padding: 2px 8px;
    letter-spacing: 0.5px; white-space: nowrap;
    text-transform: uppercase;
    border-left: 2px solid currentColor;
}
.status-badge::before {
    content: '';
    width: 5px; height: 5px;
    background: currentColor;
    flex-shrink: 0;
}
.status-new        { background: #dbeafe; color: #1d4ed8; }
.status-contacted  { background: #fef9c3; color: #92400e; }
.status-followup   { background: #ffedd5; color: #9a3412; }
.status-demo       { background: #f3e8ff; color: #6b21a8; }
.status-proposal   { background: #e0f2fe; color: #075985; }
.status-closedwon  { background: var(--dh-primary-ultra); color: var(--dh-primary-dark); }
.status-closedlost { background: #fef2f2; color: #991b1b; }
.status-pending    { background: #fef9c3; color: #92400e; }
.status-approved   { background: var(--dh-primary-ultra); color: var(--dh-primary-dark); }
.status-rejected   { background: #fef2f2; color: #991b1b; }
.status-active     { background: var(--dh-primary-ultra); color: var(--dh-primary-dark); }
.status-inactive   { background: #f1f5f9; color: #64748b; }
.status-suspended  { background: #fff7ed; color: #9a3412; }

/* ═══════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════ */
.dh-form-label {
    font-size: 0.73rem; font-weight: 600; color: var(--dh-text-2);
    margin-bottom: 5px; display: block;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.dh-input {
    width: 100%; padding: 8px 12px;
    border: 1.5px solid var(--dh-border);
    font-size: 0.875rem; color: var(--dh-text);
    background: var(--dh-white);
    transition: var(--tx);
    outline: none; font-family: inherit;
    box-shadow: var(--dh-shadow-xs);
}
.dh-input:hover:not(:focus) { border-color: #cbd5e1; }
.dh-input:focus {
    border-color: var(--dh-primary);
    box-shadow: 0 0 0 3px rgba(22,163,74,0.10);
}
.dh-input::placeholder { color: var(--dh-muted-light); }
.dh-select { cursor: pointer; }
.dh-input-with-icon { position: relative; }
.dh-input-with-icon .dh-input { padding-left: 36px; }
.dh-input-with-icon i {
    position: absolute; left: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--dh-muted); font-size: 0.9rem; pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════ */
.dh-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer; border: 1.5px solid transparent;
    transition: var(--tx); text-decoration: none; white-space: nowrap;
    font-family: inherit; letter-spacing: 0.2px;
}
.dh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dh-btn i { font-size: 0.88rem; }

.dh-btn-primary {
    background: var(--dh-primary); color: #fff;
    border-color: var(--dh-primary-dark);
    box-shadow: 0 2px 4px rgba(22,163,74,0.22);
}
.dh-btn-primary:hover:not(:disabled) {
    background: var(--dh-primary-dark);
    box-shadow: 0 4px 10px rgba(22,163,74,0.28);
    transform: translateY(-1px);
}
.dh-btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: none; }

.dh-btn-secondary {
    background: var(--dh-white); color: var(--dh-text-2);
    border-color: var(--dh-border);
    box-shadow: var(--dh-shadow-xs);
}
.dh-btn-secondary:hover:not(:disabled) {
    background: var(--dh-bg-2); border-color: #cbd5e1; color: var(--dh-text);
}
.dh-btn-danger {
    background: var(--dh-red); color: #fff;
    border-color: var(--dh-red-dark);
    box-shadow: 0 2px 4px rgba(239,68,68,0.2);
}
.dh-btn-danger:hover:not(:disabled) { background: var(--dh-red-dark); transform: translateY(-1px); }
.dh-btn-warning {
    background: var(--dh-yellow); color: #fff;
    border-color: var(--dh-yellow-dark);
}
.dh-btn-warning:hover:not(:disabled) { background: var(--dh-yellow-dark); }
.dh-btn-success { background: var(--dh-primary); color: #fff; border-color: var(--dh-primary-dark); }
.dh-btn-success:hover:not(:disabled) { background: var(--dh-primary-dark); }
.dh-btn-ghost {
    background: transparent; color: var(--dh-muted); border-color: transparent;
}
.dh-btn-ghost:hover:not(:disabled) { background: var(--dh-bg-2); color: var(--dh-text); }

.dh-btn-sm  { padding: 5px 11px; font-size: 0.77rem; }
.dh-btn-xs  { padding: 3px 8px;  font-size: 0.72rem; }

.dh-action-group { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; }
.dh-btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 8px; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; border: 1.5px solid;
    transition: var(--tx); white-space: nowrap; min-width: 32px;
}

/* ═══════════════════════════════════════════════════
   TABLE — Premium data grid
═══════════════════════════════════════════════════ */
.dh-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.84rem;
}
.dh-table thead { border-bottom: 2px solid var(--dh-border); }
.dh-table th {
    padding: 11px 16px;
    text-align: left; font-size: 0.67rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--dh-muted);
    background: var(--dh-bg-2);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.dh-table th:first-child {
    border-left: 3px solid var(--dh-primary);
    border-top-left-radius: 8px;
}
.dh-table th:last-child { border-top-right-radius: 8px; }
.dh-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--dh-border-light);
    color: var(--dh-text); vertical-align: middle;
}
.dh-table tbody tr {
    transition: background var(--tx), box-shadow var(--tx);
}
.dh-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--dh-bg) 50%, white);
}
.dh-table tbody tr:hover td {
    background: color-mix(in srgb, var(--dh-primary-ultra) 78%, white);
}
.dh-table tbody tr:last-child td { border-bottom: none; }

/* ═══════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════ */
.dh-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.58);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000; padding: 20px;
    backdrop-filter: blur(4px);
}
.dh-modal {
    background: var(--dh-white);
    width: 100%; max-width: 540px;
    max-height: 92vh; overflow-y: auto;
    box-shadow: var(--dh-shadow-lg);
    animation: modalIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 3px solid var(--dh-primary);
    border-radius: 14px;
    overflow: hidden;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(-14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.dh-modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--dh-border);
    display: flex; align-items: center; justify-content: space-between;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.92) 100%);
}
.dh-modal-title {
    font-size: 0.98rem; font-weight: 800; color: var(--dh-black);
    display: flex; align-items: center; gap: 8px;
}
.dh-modal-title i { color: var(--dh-primary); }
.dh-modal-close {
    background: var(--dh-white); border: 1px solid var(--dh-border);
    font-size: 0.9rem; cursor: pointer; color: var(--dh-muted);
    width: 34px; height: 34px; padding: 0; transition: var(--tx);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
}
.dh-modal-close:hover { background: var(--dh-red); color: #fff; border-color: var(--dh-red); }
.dh-modal-body {
    padding: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
}
.dh-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--dh-border);
    display: flex; justify-content: flex-end; gap: 8px;
    background: linear-gradient(180deg, var(--dh-bg) 0%, #f8fafc 100%);
    position: sticky;
    bottom: 0;
}
.dh-section-label {
    font-size: 0.67rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.9px;
    color: var(--dh-muted);
    border-bottom: 1px solid var(--dh-border);
    padding-bottom: 6px; margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════ */
.dh-alert {
    padding: 11px 14px;
    font-size: 0.84rem;
    display: flex; align-items: flex-start; gap: 10px;
    border-left: 4px solid currentColor;
    border-radius: 10px;
    box-shadow: var(--dh-shadow-xs);
}
.dh-alert i { font-size: 0.95rem; flex-shrink: 0; margin-top: 1px; }
.dh-alert-danger   { background: #fef2f2; color: #991b1b; border-color: var(--dh-red); }
.dh-alert-success  { background: var(--dh-primary-ultra); color: var(--dh-primary-dark); border-color: var(--dh-primary); }
.dh-alert-info     { background: #eff6ff; color: #1e40af; border-color: var(--dh-blue); }
.dh-alert-warning  { background: #fffbeb; color: #92400e; border-color: var(--dh-yellow); }
.dh-alert-dismiss {
    margin-left: auto;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.28);
    cursor: pointer;
    color: inherit;
    opacity: 0.75;
    font-size: 0.85rem;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: var(--tx);
}
.dh-alert-dismiss:hover {
    opacity: 1;
    background: rgba(255,255,255,0.6);
}

/* ═══════════════════════════════════════════════════
   SPINNER
═══════════════════════════════════════════════════ */
.dh-spinner-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 72px 20px; flex-direction: column; gap: 14px;
}
.dh-spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--dh-border);
    border-top-color: var(--dh-primary);
    animation: spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.dh-spinner-label {
    font-size: 0.78rem; color: var(--dh-muted); font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════ */
.dh-empty {
    text-align: center; padding: 56px 20px;
    border: 2px dashed var(--dh-border);
    background: var(--dh-white);
}
.dh-empty .empty-icon {
    font-size: 2.6rem; margin-bottom: 14px;
    opacity: 0.25; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.dh-empty .empty-title { font-size: 0.95rem; font-weight: 700; color: var(--dh-black); }
.dh-empty .empty-desc { font-size: 0.82rem; color: var(--dh-muted); margin-top: 6px; }

/* ═══════════════════════════════════════════════════
   TIMELINE
═══════════════════════════════════════════════════ */
.dh-timeline { position: relative; padding-left: 20px; }
.dh-timeline::before {
    content: ''; position: absolute; left: 7px; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, var(--dh-primary-pale) 0%, var(--dh-border) 100%);
}
.dh-tl-item { position: relative; padding: 0 0 20px 20px; }
.dh-tl-item::before {
    content: ''; position: absolute;
    left: -6px; top: 4px; width: 12px; height: 12px;
    background: var(--dh-white); border: 2px solid var(--dh-primary);
    outline: 3px solid var(--dh-white);
}
.dh-tl-item .tl-time {
    font-size: 0.7rem; color: var(--dh-muted); margin-bottom: 4px;
    font-weight: 600; display: flex; align-items: center; gap: 5px;
}
.dh-tl-item .tl-text {
    font-size: 0.84rem; color: var(--dh-text);
    background: var(--dh-bg); padding: 9px 13px;
    border-left: 3px solid var(--dh-primary-pale);
}

/* ═══════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════ */
.dh-tabs { display: flex; border-bottom: 2px solid var(--dh-border); margin-bottom: 20px; }
.dh-tab {
    padding: 10px 18px; font-size: 0.82rem; font-weight: 600;
    color: var(--dh-muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: var(--tx); background: none;
    border-top: none; border-left: none; border-right: none;
    white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.dh-tab:hover { color: var(--dh-text); }
.dh-tab.active { color: var(--dh-primary); border-bottom-color: var(--dh-primary); }
.dh-tab i { font-size: 0.85rem; }

/* ═══════════════════════════════════════════════════
   REMINDERS PAGE
═══════════════════════════════════════════════════ */
/* Page header */
.rem-page-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.rem-page-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    background: var(--dh-primary-ultra); color: var(--dh-primary);
    border: 2px solid var(--dh-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
/* Summary chips in header */
.rem-summary-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.rem-sum-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; font-size: 0.76rem; font-weight: 700;
    border: 1.5px solid; letter-spacing: .03em;
}
.rem-chip-red    { background: #fef2f2; color: var(--dh-red);    border-color: var(--dh-red); }
.rem-chip-yellow { background: #fffbeb; color: #b45309;          border-color: var(--dh-yellow); }
.rem-chip-muted  { background: var(--dh-bg); color: var(--dh-muted); border-color: var(--dh-border); }

/* Section headers */
.rem-section-hdr {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.8rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; margin-bottom: 12px; padding: 0 2px;
}
.rem-section-count {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 0.7rem; font-weight: 800;
    background: currentColor; color: #fff;
    /* trick: counter chip same colour as text */
    box-shadow: none;
}
.rem-section-count { background: currentColor; color: #fff; }
.rem-hdr-today   { color: var(--dh-red); }
.rem-hdr-upcoming{ color: #b45309; }
.rem-hdr-overdue { color: var(--dh-muted); }
/* make the number chip contrast */
.rem-hdr-today   .rem-section-count { background: var(--dh-red);    color: #fff; }
.rem-hdr-upcoming .rem-section-count{ background: var(--dh-yellow);  color: #fff; }
.rem-hdr-overdue  .rem-section-count{ background: var(--dh-muted);   color: #fff; }

/* ═══════════════════════════════════════════════════
   REMINDER CARD
═══════════════════════════════════════════════════ */
.dh-reminder-card {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-left: 4px solid var(--dh-yellow);
    box-shadow: var(--dh-shadow-xs);
    transition: box-shadow .15s, transform .15s;
}
.dh-reminder-card:hover  { box-shadow: var(--dh-shadow); transform: translateY(-1px); }
.dh-reminder-card.today  { border-left-color: var(--dh-red); }
.dh-reminder-card.overdue{ border-left-color: var(--dh-muted); opacity: .85; }

.rem-card-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; padding: 14px 16px 12px;
}
.rem-card-body { flex: 1; min-width: 0; }
.rem-card-actions {
    display: flex; gap: 8px; padding: 0 16px 14px;
    border-top: 1px solid var(--dh-border); padding-top: 12px;
}

.dh-reminder-card .rem-lead {
    font-size: 0.88rem; font-weight: 700; color: var(--dh-primary);
    cursor: pointer; display: inline-flex; align-items: center; gap: 2px;
    margin-bottom: 4px;
}
.dh-reminder-card .rem-lead:hover { color: var(--dh-primary-dark); text-decoration: underline; }
.dh-reminder-card .rem-lead i { font-size: 1rem; }
.dh-reminder-card .rem-time {
    font-size: 0.76rem; color: var(--dh-muted); margin-top: 2px;
    display: flex; align-items: center; gap: 5px;
}
.dh-reminder-card .rem-notes {
    font-size: 0.8rem; color: var(--dh-text-2); margin-top: 8px;
    padding: 7px 10px; background: var(--dh-bg);
    border-left: 2px solid var(--dh-border);
    display: flex; align-items: flex-start; gap: 6px;
}
.dh-reminder-card .rem-notes i { margin-top: 1px; flex-shrink: 0; color: var(--dh-muted); }

/* ═══════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════ */
.dh-pager {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 22px; border-top: 1px solid var(--dh-border);
    font-size: 0.8rem; color: var(--dh-muted); background: var(--dh-bg);
}
.dh-pager-btns { display: flex; gap: 4px; }

/* ═══════════════════════════════════════════════════
   FILTER BAR
═══════════════════════════════════════════════════ */
.dh-filter-bar {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-top: 3px solid var(--dh-primary);
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: var(--dh-shadow-xs);
}

/* ═══════════════════════════════════════════════════
   UTILITY BADGES & CHIPS
═══════════════════════════════════════════════════ */
.dh-badge {
    display: inline-flex; align-items: center;
    font-size: 0.67rem; font-weight: 700;
    padding: 2px 8px;
    background: var(--dh-bg-2); color: var(--dh-muted);
    border: 1px solid var(--dh-border);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.dh-badge-green  { background: var(--dh-primary-ultra); color: var(--dh-primary-dark); border-color: var(--dh-primary-pale); }
.dh-badge-red    { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.dh-badge-blue   { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.dh-badge-yellow { background: #fffbeb; color: #92400e; border-color: #fde68a; }

/* ═══════════════════════════════════════════════════
   INFO STRIP
═══════════════════════════════════════════════════ */
.dh-info-strip {
    display: flex; align-items: center; gap: 20px;
    padding: 9px 18px;
    background: var(--dh-primary-ultra);
    border-bottom: 1px solid var(--dh-primary-pale);
    font-size: 0.74rem; color: var(--dh-primary-dark); font-weight: 500;
}
.dh-info-strip i { font-size: 0.85rem; }

/* ═══════════════════════════════════════════════════
   DETAIL PAGES
═══════════════════════════════════════════════════ */
.dh-detail-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.dh-detail-title {
    font-size: 1.5rem; font-weight: 800; color: var(--dh-black);
    margin: 0; letter-spacing: -0.5px; line-height: 1.2;
}
.dh-detail-meta { font-size: 0.82rem; color: var(--dh-muted); margin-top: 4px; }

/* ═══════════════════════════════════════════════════
   DIVIDER
═══════════════════════════════════════════════════ */
.dh-divider { height: 1px; background: var(--dh-border); margin: 16px 0; }

/* ═══════════════════════════════════════════════════
   CUSTOM SCROLLBAR
═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ═══════════════════════════════════════════════════
   FILTER GRID UTILITY — responsive columns
═══════════════════════════════════════════════════ */
.dh-filter-grid {
    display: grid;
    gap: 10px;
    align-items: flex-end;
}
/* Column presets */
.dh-filter-grid-4 { grid-template-columns: 1.5fr 1fr 1fr auto; }
.dh-filter-grid-5 { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
.dh-filter-grid-6 { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr auto; }

@media (max-width: 992px) {
    .dh-filter-grid-6 { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 768px) {
    .dh-filter-grid-4,
    .dh-filter-grid-5,
    .dh-filter-grid-6 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .dh-filter-grid-4,
    .dh-filter-grid-5,
    .dh-filter-grid-6 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   FORM GRID UTILITIES — responsive multi-col form rows
═══════════════════════════════════════════════════ */
.dh-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.dh-form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
/* Key / Value / Delete row (extra info, custom attributes) */
.dh-form-grid-kv {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
/* Compact attribute row with 30px delete column */
.dh-form-grid-kv-sm {
    display: grid;
    grid-template-columns: 1fr 1fr 30px;
    gap: 6px;
    align-items: center;
}
/* Radius/Search row: input + button */
.dh-radius-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
}
/* Hunt leads map+sidebar layout */
.dh-hunt-map-layout {
    display: flex;
    gap: 0;
    border: 1px solid var(--dh-border);
    overflow: hidden;
    height: 600px;
}
.dh-hunt-map-sidebar {
    width: 340px;
    flex-shrink: 0;
    overflow-y: auto;
    border-left: 1px solid var(--dh-border);
    background: var(--dh-white);
}

@media (max-width: 576px) {
    .dh-form-grid-2 { grid-template-columns: 1fr; }
    .dh-form-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .dh-form-grid-3 { grid-template-columns: 1fr; }
    /* KV row on tiny screens: key+delete stay in row 1, value spans row 2 */
    .dh-form-grid-kv { grid-template-columns: 1fr auto; }
    .dh-form-grid-kv > :nth-child(1) { grid-column: 1;      grid-row: 1; }
    .dh-form-grid-kv > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .dh-form-grid-kv > :nth-child(3) { grid-column: 2;      grid-row: 1; }
    .dh-form-grid-kv-sm { grid-template-columns: 1fr 30px; }
    .dh-form-grid-kv-sm > :nth-child(1) { grid-column: 1;      grid-row: 1; }
    .dh-form-grid-kv-sm > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .dh-form-grid-kv-sm > :nth-child(3) { grid-column: 2;      grid-row: 1; }
}

/* ═══════════════════════════════════════════════════
   MOBILE HAMBURGER — hidden on desktop
═══════════════════════════════════════════════════ */
.dh-hamburger {
    display: none;
    align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    background: none; border: 1px solid var(--dh-border);
    color: var(--dh-text); cursor: pointer;
    font-size: 1.15rem; transition: var(--tx);
}
.dh-hamburger:hover { background: var(--dh-bg-2); }

/* ═══════════════════════════════════════════════════
   SIDEBAR OVERLAY — mobile backdrop
═══════════════════════════════════════════════════ */
.dh-sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 1050;
    cursor: pointer;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── Hamburger ── */
    .dh-hamburger { display: flex; }

    /* ── Sidebar — off-screen by default, slides in ── */
    .dh-sidebar {
        width: var(--dh-sidebar-w);
        transform: translateX(-110%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1100;
    }
    .dh-sidebar.open { transform: translateX(0); }

    /* ── Main area — full width ── */
    .dh-main { margin-left: 0; }

    /* ── Page padding ── */
    .dh-page { padding: 14px 12px; }

    /* ── Header ── */
    .dh-header { padding: 0 10px; gap: 8px; }
    .dh-header-date, .dh-header-divider { display: none; }
    .dh-header-title { font-size: 0.84rem; }

    /* ── Modals → full-width bottom sheet ── */
    .dh-modal-overlay { padding: 0; align-items: flex-end; }
    .dh-modal { max-width: 100%; max-height: 94dvh; }

    /* ── Tables → horizontal scroll ── */
    .dh-card-body:has(.dh-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dh-table { min-width: 560px; }
    .dh-table th { position: relative; top: auto; } /* disable sticky headers inside scroll container */

    /* ── Filter grids → 2-col on mobile, 1-col on xs ── */
    .rpt-filter-row { grid-template-columns: 1fr 1fr; }

    /* ── Lead detail ── */
    .lead-detail-header { flex-direction: column; }
    .lead-detail-header .ldh-right { width: 100%; justify-content: flex-start; }

    /* ── Journey action bar ── */
    .journey-action-bar { flex-direction: column; align-items: flex-start; }
    .jab-stats { width: 100%; }
    .jab-actions { width: 100%; flex-wrap: wrap; }

    /* ── Action groups → wrap on mobile ── */
    .dh-action-group { flex-wrap: wrap; }

    /* ── Workflow pipeline → horizontal scroll ── */
    .wf-pipeline { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }

    /* ── Company leads map ── */
    .cl-map-layout { flex-direction: column; height: auto; }
    .cl-map-sidebar { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid var(--dh-border); }
    .cl-map-canvas  { height: 280px; }

    /* ── Create-lead modal form grid ── */
    .cl-form-grid { grid-template-columns: 1fr; }
    .cl-span2 { grid-column: 1; }

    /* ── Detail page header ── */
    .dh-detail-header { flex-direction: column; }

    /* ── Tabs → horizontal scroll ── */
    .dh-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
    .dh-tab { flex-shrink: 0; }

    /* ── Dashboard grids ── */
    .dash-content-grid { grid-template-columns: 1fr; }

    /* ── Touch targets ── */
    .dh-btn    { min-height: 40px; }
    .dh-btn-sm { min-height: 36px; }
    .dh-nav-item { padding: 11px 18px 11px 16px; }

    /* ── Card header ── */
    .dh-card-header { flex-wrap: wrap; }

    /* ── List/report/dash page header: full-width CTA buttons ── */
    .list-page-header > .dh-btn,
    .list-page-header > div > .dh-btn,
    .report-page-header > .dh-btn,
    .dash-page-header > .dh-btn { width: 100%; justify-content: center; }

    /* ── Employee dashboard ── */
    .employee-dash-grid  { grid-template-columns: 1fr; }
    .employee-dash-hero  { flex-direction: column; align-items: flex-start; }
    .employee-dash-hero-actions { width: 100%; }

    /* ── Agent management row ── */
    .ag-row { grid-template-columns: 52px 1fr; }
    .ag-contact, .ag-tags, .ag-wf-cell, .ag-row-actions {
        grid-column: 1 / -1;
        border-top: 1px solid var(--dh-border-light);
        padding-top: 8px;
    }
    .ag-kpi-strip { grid-template-columns: 1fr 1fr; }

    /* ── Agent performance main grid ── */
    .ap-main-grid { grid-template-columns: 1fr; }

    /* ── Reports grid ── */
    .report-grid { grid-template-columns: 1fr; }

    /* ── Search/filter rows ── */
    .dh-search-row { flex-direction: column; align-items: stretch; }
    .dh-search-row .search-field { min-width: 0; }

    /* ── Pagination ── */
    .dh-pager { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* ── Info strip ── */
    .dh-info-strip { flex-wrap: wrap; gap: 6px 14px; font-size: 0.72rem; }

    /* ── Status chip row ── */
    .rem-summary-bar { gap: 6px; }

    /* ── Reminder card actions ── */
    .rem-card-actions { flex-wrap: wrap; }

    /* ── Hunt leads map: stack vertically on mobile ── */
    .dh-hunt-map-layout { flex-direction: column; height: auto; }
    .dh-hunt-map-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--dh-border); max-height: 260px; }

    /* ── Map container heights ── */
    #leads-map-container { height: 320px !important; }
}

/* ── Extra-small screens ── */
@media (max-width: 480px) {
    .dh-page { padding: 10px 10px; }

    /* Stats: 1 column on very small */
    .dh-stat-card .stat-val { font-size: 1.7rem; }

    /* Employee KPI 2-col */
    .employee-kpi-row { grid-template-columns: 1fr 1fr; }

    /* Report KPIs 2-col */
    .report-kpi-grid { grid-template-columns: 1fr 1fr; }
    .rpt-kpi-row { grid-template-columns: 1fr 1fr; }
    .ap-kpi-row  { grid-template-columns: 1fr 1fr; }

    /* Filter row 1-col on xs */
    .rpt-filter-row { grid-template-columns: 1fr; }

    /* Lead detail title smaller */
    .dh-detail-title { font-size: 1.2rem; }
    .ldh-biz-name    { font-size: 1rem !important; }

    /* Dash hero */
    .dash-page-title, .report-page-title { font-size: 1.1rem; }

    /* Tab bar font */
    .dh-tab { padding: 8px 12px; font-size: 0.78rem; }

    /* Modal footer buttons full width */
    .dh-modal-footer { flex-direction: column-reverse; }
    .dh-modal-footer .dh-btn { width: 100%; justify-content: center; }
}

@media print {
    .dh-sidebar, .dh-header { display: none; }
    .dh-main { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════
   SEARCH ROW / FILTER BAR
═══════════════════════════════════════════════════ */
.dh-search-row {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    margin-bottom: 16px;
}
.dh-search-row .search-field { flex: 1; min-width: 160px; }

/* ═══════════════════════════════════════════════════
   HR DIVIDER
═══════════════════════════════════════════════════ */
hr.divider {
    border: none; border-top: 1px solid var(--dh-border);
    margin: 14px 0;
}

/* ═══════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════ */
.dh-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; color: var(--dh-muted);
    margin-bottom: 16px;
}
.dh-breadcrumb a { color: var(--dh-primary); text-decoration: none; font-weight: 600; }
.dh-breadcrumb a:hover { text-decoration: underline; }
.dh-breadcrumb span { color: var(--dh-text); }

/* ═══════════════════════════════════════════════════
   NAV BUTTON (Navigate to Location)
═══════════════════════════════════════════════════ */
.dh-nav-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px;
    background: var(--dh-primary); color: #fff;
    border: 1.5px solid var(--dh-primary-dark);
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: var(--tx); white-space: nowrap;
    box-shadow: 0 2px 6px rgba(22,163,74,0.22);
}
.dh-nav-btn:hover {
    background: var(--dh-primary-dark);
    box-shadow: 0 4px 12px rgba(22,163,74,0.30);
    transform: translateY(-1px);
    color: #fff; text-decoration: none;
}
.dh-nav-btn i { font-size: 0.88rem; }

/* ═══════════════════════════════════════════════════
   MY LEADS — STATUS FILTER CHIPS
═══════════════════════════════════════════════════ */
.dh-status-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: var(--dh-white);
    border: 1.5px solid var(--dh-border);
    font-size: 0.75rem; font-weight: 600;
    cursor: pointer; color: var(--dh-text-2);
    transition: var(--tx);
}
.dh-status-chip:hover {
    border-color: var(--chip-color, var(--dh-primary));
    color: var(--chip-color, var(--dh-primary));
    background: color-mix(in srgb, var(--chip-color, #16a34a) 8%, white);
}
.dh-status-chip.active {
    background: color-mix(in srgb, var(--chip-color, #16a34a) 12%, white);
    border-color: var(--chip-color, var(--dh-primary));
    color: var(--chip-color, var(--dh-primary));
    font-weight: 700;
}
.dh-status-chip .chip-dot {
    width: 7px; height: 7px;
    background: var(--chip-color, var(--dh-muted));
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   MY LEADS — COLORED LEAD CARDS
═══════════════════════════════════════════════════ */
.dh-lead-card.lead-card-colored {
    border: 1px solid var(--dh-border);
    border-left: none;
    padding: 0;
    overflow: hidden;
    transition: var(--tx);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.dh-lead-card.lead-card-colored:hover {
    box-shadow: var(--dh-shadow-md);
    transform: translateY(-2px);
}
.lead-color-bar {
    height: 4px;
    background: var(--lead-color, var(--dh-primary));
    flex-shrink: 0;
}
.lead-card-inner {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.lead-trust-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; font-weight: 700;
    padding: 2px 8px;
    background: var(--dh-primary-ultra); color: var(--dh-primary);
    border: 1px solid var(--dh-primary-pale);
}
.lead-trust-badge i { font-size: 0.75rem; }

/* collapsible detail section */
.lead-details-collapse {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 0;
}
.lead-details-collapse.open {
    max-height: 200px;
    opacity: 1;
}

/* expand toggle button */
.lead-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border: 1px solid var(--dh-border);
    background: var(--dh-bg);
    color: var(--dh-muted);
    cursor: pointer; font-size: 0.72rem;
    transition: var(--tx);
    flex-shrink: 0;
    border-radius: 4px;
    font-family: inherit;
    padding: 0;
}
.lead-toggle-btn:hover {
    background: var(--dh-primary-ultra);
    color: var(--dh-primary);
    border-color: var(--dh-primary-pale);
}

/* push action row to bottom */
.lead-spacer { flex: 1; }

/* distance badge shown when Near Me is active */
.lead-dist-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.68rem; font-weight: 700;
    padding: 2px 8px;
    background: #dcfce7; color: #16a34a;
    border: 1px solid #86efac;
    border-radius: 999px;
    white-space: nowrap; flex-shrink: 0;
}
.lead-dist-badge i { font-size: 0.65rem; }

/* Near Me filter strip */
.near-me-strip {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-left: 3px solid var(--dh-primary);
    flex-wrap: wrap;
}
.near-me-strip.active {
    background: var(--dh-primary-ultra);
    border-left-color: var(--dh-primary);
}

/* ── View toggle (Cards / Map) ── */
.dh-view-toggle {
    display: flex;
    border: 1px solid var(--dh-border);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.dh-view-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--dh-white);
    color: var(--dh-muted);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: var(--tx);
}
.dh-view-btn + .dh-view-btn { border-left: 1px solid var(--dh-border); }
.dh-view-btn:hover { background: var(--dh-bg); color: var(--dh-text); }
.dh-view-btn.active { background: var(--dh-primary); color: #fff; }

/* ── Leads map wrapper ── */
.leads-map-wrap {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0;
}
.leads-map-info {
    font-size: .78rem; color: var(--dh-muted);
    padding: 8px 14px;
    border-bottom: 1px solid var(--dh-border-light);
    background: var(--dh-bg);
}
.leads-map-no-data {
    font-size: .82rem; color: var(--dh-muted);
    padding: 12px 14px;
    border-bottom: 1px solid var(--dh-border-light);
}

/* ── Quick Action buttons ── */
.lead-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    border-top: 1px solid var(--dh-border-light);
    padding-top: 10px; margin-top: 4px;
}
.lead-action-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 0.73rem; font-weight: 600;
    background: var(--dh-bg); color: var(--dh-text-2);
    border: 1px solid var(--dh-border);
    cursor: pointer; text-decoration: none;
    transition: var(--tx); white-space: nowrap;
    font-family: inherit;
}
.lead-action-btn:hover {
    background: var(--dh-primary-ultra);
    color: var(--dh-primary); border-color: var(--dh-primary-pale);
    text-decoration: none;
}
.lead-action-btn i { font-size: 0.75rem; }

/* ═══════════════════════════════════════════════════
   LEAD DETAIL — STATUS HEADER BAR
═══════════════════════════════════════════════════ */
.lead-detail-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 16px 20px;
    margin-bottom: 16px;
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-left: 5px solid var(--lead-status-color, var(--dh-primary));
    box-shadow: var(--dh-shadow-xs);
}
.lead-detail-header .ldh-left { flex: 1; min-width: 0; }
.lead-detail-header .ldh-biz-name {
    font-size: 1.2rem; font-weight: 800; color: var(--dh-black);
    letter-spacing: -0.3px; line-height: 1.2; margin-bottom: 4px;
}
.lead-detail-header .ldh-meta {
    font-size: 0.78rem; color: var(--dh-muted);
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.lead-detail-header .ldh-meta .sep { color: var(--dh-border); }
.lead-detail-header .ldh-right {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
}

/* ── Info table cell label ── */
.info-lbl {
    color: var(--dh-muted); padding: 5px 0;
    width: 80px; font-size: 0.8rem; vertical-align: top;
}

/* ═══════════════════════════════════════════════════
   WORKFLOW PIPELINE
═══════════════════════════════════════════════════ */
.wf-pipeline {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0;
}
.wf-stage {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--dh-bg); border: 1px solid var(--dh-border);
    cursor: pointer; transition: var(--tx);
    position: relative; font-size: 0.78rem; font-weight: 600;
    color: var(--dh-muted); margin-right: -1px;
}
.wf-stage:hover {
    background: var(--dh-primary-ultra);
    color: var(--dh-primary); border-color: var(--dh-primary-pale);
    z-index: 1;
}
.wf-stage-done {
    background: color-mix(in srgb, var(--dh-primary) 6%, white);
    color: var(--dh-primary-dark); border-color: var(--dh-primary-pale);
}
.wf-stage-active {
    background: var(--dh-primary); color: #fff;
    border-color: var(--dh-primary-dark);
    z-index: 2;
    box-shadow: 0 2px 8px rgba(22,163,74,0.28);
}
.wf-stage-active:hover { background: var(--dh-primary-dark); color: #fff; }
.wf-stage-dot {
    width: 8px; height: 8px; flex-shrink: 0;
    background: currentColor; opacity: 0.5;
}
.wf-stage-active .wf-stage-dot { opacity: 1; background: rgba(255,255,255,0.85); }
.wf-stage-name { white-space: nowrap; }

/* ── Link-style button ── */
.dh-link-btn {
    background: none; border: none;
    color: var(--dh-muted); font-size: inherit;
    cursor: pointer; padding: 0; font-family: inherit;
    text-decoration: underline; transition: var(--tx);
}
.dh-link-btn:hover { color: var(--dh-red); }

/* ═══════════════════════════════════════════════════
   VISIT CARDS
═══════════════════════════════════════════════════ */
.visit-card {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-left: 4px solid var(--dh-blue);
    padding: 14px 16px;
    box-shadow: var(--dh-shadow-xs);
}
.visit-card-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.visit-photo-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.78rem; font-weight: 600;
    color: var(--dh-blue); text-decoration: none;
    padding: 4px 10px;
    border: 1px solid #bfdbfe; background: #eff6ff;
    transition: var(--tx);
}
.visit-photo-link:hover {
    background: var(--dh-blue); color: #fff; border-color: var(--dh-blue);
    text-decoration: none;
}
.visit-photo-link i { font-size: 0.8rem; }

/* ── History old stage ── */
.history-stage-old {
    background: var(--dh-bg-2); color: var(--dh-muted);
    padding: 1px 6px;
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════
   LEAD JOURNEY — ACTION BAR
═══════════════════════════════════════════════════ */
.journey-action-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-top: 3px solid var(--dh-primary);
    margin-bottom: 12px;
    box-shadow: var(--dh-shadow-xs);
}
.jab-stats { display: flex; align-items: stretch; }
.jab-stat {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 4px 20px;
    border-right: 1px solid var(--dh-border);
}
.jab-stat:first-child { padding-left: 0; }
.jab-stat:last-child  { border-right: none; }
.jab-num {
    font-size: 1.35rem; font-weight: 800; color: var(--dh-black);
    line-height: 1; letter-spacing: -0.8px;
}
.jab-lbl {
    font-size: 0.62rem; color: var(--dh-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.6px; margin-top: 3px;
    white-space: nowrap;
}
.jab-actions { display: flex; gap: 8px; align-items: center; }

/* ═══════════════════════════════════════════════════
   LEAD JOURNEY — TIMELINE
═══════════════════════════════════════════════════ */
.journey-timeline {
    padding: 10px 20px 6px;
    position: relative;
}
.journey-timeline::before {
    content: '';
    position: absolute;
    left: 37px;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
        var(--dh-primary) 0%,
        var(--dh-primary-pale) 40%,
        var(--dh-border) 80%,
        transparent 100%);
    z-index: 0;
}
.jt-date-sep {
    display: flex; align-items: center;
    padding-left: 50px;
    margin: 14px 0 10px;
    position: relative; z-index: 1;
}
.jt-date-sep span {
    font-size: 0.64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.9px;
    color: var(--dh-primary-dark);
    background: var(--dh-primary-ultra);
    border: 1px solid var(--dh-primary-pale);
    padding: 3px 11px;
    white-space: nowrap;
}
.jt-event {
    display: flex; align-items: flex-start;
    gap: 12px; margin-bottom: 10px;
    position: relative; z-index: 1;
}
.jt-node {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid; color: #fff; font-size: 0.82rem;
    box-shadow: 0 0 0 3px var(--dh-white), 0 0 0 5px rgba(0,0,0,0.06);
    position: relative; z-index: 2;
}
.jt-card {
    flex: 1; min-width: 0;
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-left: 3px solid var(--jt-color, var(--dh-primary));
    padding: 10px 14px; margin-bottom: 2px;
    box-shadow: var(--dh-shadow-xs);
    transition: box-shadow 0.15s ease;
}
.jt-card:hover { box-shadow: var(--dh-shadow); }
.jt-etype {
    font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.9px;
    color: var(--jt-color, var(--dh-muted));
    margin-bottom: 7px;
}
.jt-transition {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-bottom: 8px;
}
.jt-pill {
    display: inline-flex; align-items: center;
    font-size: 0.73rem; font-weight: 700;
    padding: 3px 11px;
    background: color-mix(in srgb, var(--pc, #16a34a) 10%, white);
    color: var(--pc, #16a34a);
    border: 1.5px solid color-mix(in srgb, var(--pc, #16a34a) 28%, transparent);
    white-space: nowrap;
}
.jt-pill.jt-pill-old {
    opacity: 0.5;
    text-decoration: line-through;
}
.jt-arr { color: var(--dh-muted); font-size: 0.75rem; display: flex; align-items: center; }
.jt-notes {
    font-size: 0.82rem; color: var(--dh-text);
    background: var(--dh-bg); padding: 7px 11px;
    border-left: 2px solid var(--dh-border);
    margin-bottom: 8px; line-height: 1.55;
}
.jt-notes.jt-notes-empty { color: var(--dh-muted); font-style: italic; }
.jt-photo-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.73rem; font-weight: 600;
    color: var(--dh-primary); text-decoration: none;
    padding: 4px 11px;
    background: var(--dh-primary-ultra);
    border: 1px solid var(--dh-primary-pale);
    transition: var(--tx); margin-bottom: 8px;
}
.jt-photo-btn:hover { background: var(--dh-primary-pale); color: var(--dh-primary-dark); text-decoration: none; }
.jt-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.69rem; color: var(--dh-muted); font-weight: 500;
}
.jt-actor-avatar {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.58rem; font-weight: 800; flex-shrink: 0;
}
.jt-dot-sep { opacity: 0.35; }

/* ═══════════════════════════════════════════════════
   WORKFLOW VERTICAL STEPPER (in left sidebar)
═══════════════════════════════════════════════════ */
.wf-v-pipeline {
    display: flex; flex-direction: column;
    position: relative; gap: 0;
}
.wf-v-pipeline::before {
    content: '';
    position: absolute;
    left: 13px; top: 14px; bottom: 14px;
    width: 2px; background: var(--dh-border); z-index: 0;
}
.wf-v-stage {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 4px; cursor: pointer;
    position: relative; z-index: 1; transition: var(--tx);
}
.wf-v-stage:hover .wf-v-name { color: var(--dh-primary); }
.wf-v-dot {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--dh-border);
    background: var(--dh-white); color: var(--dh-muted);
    font-size: 0.7rem; font-weight: 700;
    position: relative; z-index: 2; transition: var(--tx);
    box-shadow: 0 0 0 3px var(--dh-white);
}
.wf-v-stage.done .wf-v-dot  { background: var(--dh-primary-pale); border-color: var(--dh-primary); color: var(--dh-primary-dark); }
.wf-v-stage.active .wf-v-dot {
    background: var(--dh-primary); border-color: var(--dh-primary-dark); color: #fff;
    box-shadow: 0 0 0 3px var(--dh-white), 0 0 0 5px var(--dh-primary-pale);
}
.wf-v-label { display: flex; flex-direction: column; gap: 2px; }
.wf-v-name { font-size: 0.82rem; font-weight: 600; color: var(--dh-text-2); transition: var(--tx); }
.wf-v-stage.done  .wf-v-name  { color: var(--dh-primary); }
.wf-v-stage.active .wf-v-name { color: var(--dh-primary-dark); font-weight: 700; }
.wf-v-current-tag {
    font-size: 0.58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--dh-primary-dark);
    background: var(--dh-primary-ultra);
    border: 1px solid var(--dh-primary-pale);
    padding: 1px 6px; line-height: 1.4; align-self: flex-start;
}

/* ═══════════════════════════════════════════════════
   JOURNEY — DISTANCE BADGE
═══════════════════════════════════════════════════ */
.jt-distance-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.69rem; font-weight: 700;
    color: var(--dc, #16a34a);
    background: color-mix(in srgb, var(--dc, #16a34a) 9%, white);
    border: 1.5px solid color-mix(in srgb, var(--dc, #16a34a) 26%, transparent);
    padding: 3px 10px;
    margin-top: 6px; margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════
   VISIT MODAL — GPS SECTION
═══════════════════════════════════════════════════ */
.visit-gps-section {
    background: var(--dh-bg);
    border: 1px solid var(--dh-border);
    border-left: 3px solid var(--dh-primary);
    padding: 11px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.vgs-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 700;
    color: var(--dh-text-2);
}
.vgs-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.68rem; font-weight: 700;
    padding: 3px 10px; letter-spacing: 0.3px;
    margin-left: auto;
}
.vgs-pill-idle   { background: var(--dh-bg-2); color: var(--dh-muted); border: 1px solid var(--dh-border); }
.vgs-pill-loading { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.vgs-pill-ok     { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.vgs-pill-denied { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.vgs-distance {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; padding: 7px 11px;
    background: color-mix(in srgb, var(--dc, #16a34a) 7%, white);
    border: 1px solid color-mix(in srgb, var(--dc, #16a34a) 22%, transparent);
    color: var(--dc, #16a34a);
}
.vgs-dist-value { font-weight: 700; flex: 1; }
.vgs-dist-tag {
    font-size: 0.67rem; font-weight: 800;
    padding: 2px 9px; text-transform: uppercase; letter-spacing: 0.6px;
}
.vgs-ok     { background: #dcfce7; color: #15803d; }
.vgs-amber  { background: #fef3c7; color: #92400e; }
.vgs-orange { background: #ffedd5; color: #9a3412; }
.vgs-red    { background: #fee2e2; color: #dc2626; }
.vgs-no-lead-gps {
    font-size: 0.73rem; color: var(--dh-muted);
    display: flex; align-items: center; gap: 6px;
    padding: 5px 0;
}

/* ═══════════════════════════════════════════════════
   VISIT MODAL — PHOTO UPLOAD SECTION
═══════════════════════════════════════════════════ */
.visit-photo-section {
    display: flex; flex-direction: column; gap: 8px;
}
.vp-add-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; cursor: pointer;
    border: 2px dashed var(--dh-primary-pale);
    background: var(--dh-primary-ultra);
    color: var(--dh-primary-dark);
    padding: 18px 16px; text-align: center;
    transition: var(--tx);
}
.vp-add-btn:hover { border-color: var(--dh-primary); background: var(--dh-primary-pale); }
.vp-add-btn i { font-size: 1.6rem; }
.vp-add-btn span { font-size: 0.82rem; font-weight: 700; }
.vp-add-btn small { font-size: 0.68rem; color: var(--dh-muted); font-weight: 500; }
.vp-file-info {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 13px;
    background: var(--dh-bg);
    border: 1px solid var(--dh-border);
}
.vp-file-icon { font-size: 1.4rem; color: var(--dh-primary); flex-shrink: 0; }
.vp-file-details { flex: 1; min-width: 0; }
.vp-file-name {
    font-size: 0.8rem; font-weight: 700; color: var(--dh-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vp-file-size { font-size: 0.68rem; color: var(--dh-muted); margin-top: 2px; }
.vp-remove-btn {
    background: none; border: none; cursor: pointer;
    color: var(--dh-muted); font-size: 1rem; padding: 2px;
    display: flex; align-items: center;
    transition: color 0.15s;
}
.vp-remove-btn:hover { color: #dc2626; }
.vp-change-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 600; cursor: pointer;
    color: var(--dh-primary); padding: 4px 0;
    transition: color 0.15s;
}
.vp-change-btn:hover { color: var(--dh-primary-dark); }
.vp-uploading {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.75rem; color: var(--dh-muted);
    padding: 6px 0;
}

/* ═══════════════════════════════════════════════════
   AGENT REPORTS
═══════════════════════════════════════════════════ */
.report-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.report-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.report-title-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dh-primary);
    background: var(--dh-primary-ultra);
    color: var(--dh-primary);
    font-size: 1.15rem;
    flex-shrink: 0;
}
.report-page-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--dh-black);
    margin: 0 0 2px;
}
.report-page-subtitle {
    color: var(--dh-muted);
    font-size: 0.875rem;
    margin: 0;
}
.report-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.report-period-btn {
    border: 1px solid var(--dh-border);
    background: var(--dh-white);
    color: var(--dh-text-2);
    font-size: 0.76rem;
    font-weight: 700;
    padding: 7px 14px;
    min-width: 92px;
    transition: var(--tx);
}
.report-period-btn:hover {
    background: var(--dh-bg-2);
    color: var(--dh-text);
}
.report-period-btn.active {
    background: var(--dh-primary);
    border-color: var(--dh-primary-dark);
    color: #fff;
}
.report-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dh-muted);
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    box-shadow: var(--dh-shadow-xs);
    margin-bottom: 20px;
}
.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.report-kpi-card {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-top: 3px solid var(--dh-primary);
    box-shadow: var(--dh-shadow-xs);
    padding: 16px;
}
.report-kpi-card.green { border-top-color: var(--dh-primary); }
.report-kpi-card.emerald { border-top-color: #22c55e; }
.report-kpi-card.red { border-top-color: #ef4444; }
.report-kpi-card.amber { border-top-color: #f59e0b; }
.report-kpi-card.violet { border-top-color: #8b5cf6; }
.report-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.report-kpi-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--dh-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.report-kpi-value {
    font-size: 2.15rem;
    font-weight: 900;
    color: var(--dh-black);
    line-height: 1;
}
.report-kpi-unit {
    font-size: 1rem;
}
.report-kpi-meta {
    font-size: 0.72rem;
    color: var(--dh-muted);
    margin-top: 8px;
}
.report-kpi-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dh-bg);
    color: var(--dh-primary);
    font-size: 1rem;
    flex-shrink: 0;
}
.report-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 16px;
    margin-bottom: 24px;
}
.report-side-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.report-panel {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    box-shadow: var(--dh-shadow-xs);
    padding: 18px;
}
.report-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--dh-black);
    margin-bottom: 16px;
}
.report-panel-title i {
    color: var(--dh-primary);
}
.report-empty-text {
    color: var(--dh-muted);
    font-size: 0.8rem;
    margin: 0;
}
.report-bar-item {
    margin-bottom: 11px;
}
.report-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}
.report-bar-label {
    font-size: 0.78rem;
    color: var(--dh-text);
}
.report-bar-value {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--dh-black);
    white-space: nowrap;
}
.report-bar-track {
    background: var(--dh-bg);
    height: 8px;
    border: 1px solid var(--dh-border);
    overflow: hidden;
}
.report-bar-fill {
    height: 100%;
    transition: width .4s ease;
}
.report-truncate {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.report-trend-panel {
    padding-bottom: 14px;
}
.report-trend-wrap {
    overflow-x: auto;
    padding-bottom: 4px;
}
.report-trend-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--dh-muted);
    margin-top: 6px;
}

/* ═══════════════════════════════════════════════════
   DASHBOARDS
═══════════════════════════════════════════════════ */
.dash-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.dash-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dash-title-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dh-primary);
    background: var(--dh-primary-ultra);
    color: var(--dh-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.dash-page-header.company .dash-title-icon {
    border-color: var(--dh-blue);
    background: #eff6ff;
    color: var(--dh-blue);
}
.dash-page-header.platform .dash-title-icon {
    border-color: var(--dh-yellow);
    background: #fffbeb;
    color: var(--dh-yellow-dark);
}
.dash-page-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--dh-black);
    margin: 0 0 2px;
}
.dash-page-subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--dh-muted);
}
.dash-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    font-size: 0.76rem;
    font-weight: 700;
    border: 1px solid var(--dh-border);
    background: var(--dh-white);
    color: var(--dh-text-2);
    box-shadow: var(--dh-shadow-xs);
}
.dash-quick-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.dash-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 16px;
}
.dash-panel {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    box-shadow: var(--dh-shadow-xs);
}
.dash-panel-wide {
    min-width: 0;
}
.dash-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--dh-border);
}
.dash-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--dh-black);
}
.dash-panel-title i {
    color: var(--dh-primary);
}
.dash-panel-link {
    font-size: 0.8rem;
    color: var(--dh-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.dash-panel-link:hover {
    color: var(--dh-primary-dark);
}
.dash-panel-body {
    padding: 18px 20px;
}
.dash-panel-body.padless-top {
    padding-top: 0;
}
.dash-panel-body.stack-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dash-mini-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dh-border);
}
.dash-mini-row:last-child {
    border-bottom: none;
}
.dash-mini-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--dh-primary-ultra);
    color: var(--dh-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   LIST PAGES
═══════════════════════════════════════════════════ */
.list-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.list-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.list-title-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dh-primary);
    background: var(--dh-primary-ultra);
    color: var(--dh-primary);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.list-page-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--dh-black);
    margin: 0 0 2px;
}
.list-page-subtitle {
    margin: 0;
    color: var(--dh-muted);
    font-size: 0.875rem;
}
.list-filter-card {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    box-shadow: var(--dh-shadow-xs);
    padding: 14px 18px;
}

@media (max-width: 576px) {
    .list-title-icon {
        width: 40px;
        height: 40px;
    }
    .list-page-title {
        font-size: 1.22rem;
    }
    .list-page-header .dh-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 992px) {
    .dash-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .dash-title-icon {
        width: 40px;
        height: 40px;
    }
    .dash-page-title {
        font-size: 1.25rem;
    }
    .dash-page-badge {
        width: 100%;
        justify-content: center;
    }
    .dash-quick-actions .dh-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (max-width: 992px) {
    .report-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .report-title-icon {
        width: 40px;
        height: 40px;
    }
    .report-page-title {
        font-size: 1.28rem;
    }
    .report-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
    .report-period-btn {
        min-width: 0;
        flex: 1 1 calc(50% - 8px);
    }
}

/* ══════════════════════════════════════════════════════════
   AGENT DASHBOARD — Redesigned Hero
   ══════════════════════════════════════════════════════════ */
.employee-dash-hero {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap;
    gap: 14px;
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-left: 4px solid var(--dh-primary);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.employee-dash-hero-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.employee-dash-hero-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.employee-dash-avatar {
    width: 50px; height: 50px; flex-shrink: 0;
    background: var(--dh-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.2rem; letter-spacing: -.5px;
    border: 2px solid var(--dh-primary-dark);
}
.employee-dash-greeting {
    font-size: 1.15rem; font-weight: 800; color: var(--dh-black); line-height: 1.2;
}
.employee-dash-sub {
    font-size: .78rem; color: var(--dh-muted); margin-top: 4px;
    display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
}
.employee-dash-sub i { font-size: .75rem; }

/* KPI row */
.employee-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.employee-kpi {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    padding: 16px 14px;
    display: flex; flex-direction: column; gap: 4px;
    position: relative; overflow: hidden;
}
.employee-kpi::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 3px;
}
.employee-kpi.green::before  { background: #16a34a; }
.employee-kpi.blue::before   { background: #3b82f6; }
.employee-kpi.gold::before   { background: #f59e0b; }
.employee-kpi.purple::before { background: #8b5cf6; }
.employee-kpi.teal::before   { background: #06b6d4; }
.employee-kpi.red::before    { background: #ef4444; }
.employee-kpi-icon {
    font-size: 1.1rem; margin-bottom: 6px;
}
.employee-kpi.green .employee-kpi-icon  { color: #16a34a; }
.employee-kpi.blue  .employee-kpi-icon  { color: #3b82f6; }
.employee-kpi.gold  .employee-kpi-icon  { color: #f59e0b; }
.employee-kpi.purple .employee-kpi-icon { color: #8b5cf6; }
.employee-kpi.teal  .employee-kpi-icon  { color: #06b6d4; }
.employee-kpi.red   .employee-kpi-icon  { color: #ef4444; }
.employee-kpi-val { font-size: 1.6rem; font-weight: 900; color: var(--dh-black); line-height: 1; }
.employee-kpi-lbl { font-size: .7rem; font-weight: 700; color: var(--dh-muted); text-transform: uppercase; letter-spacing: .04em; }
.employee-kpi-sub { font-size: .68rem; color: var(--dh-muted); margin-top: 2px; }

/* Dashboard grid */
.employee-dash-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 16px; margin-bottom: 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .employee-dash-grid { grid-template-columns: 1fr; }
}
.employee-dash-stack { display: flex; flex-direction: column; gap: 14px; }
.employee-dash-panel {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    overflow: hidden;
}
.employee-dash-panel-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dh-border);
    background: var(--dh-bg);
}
.employee-dash-panel-title { font-weight: 700; font-size: .875rem; color: var(--dh-text); display: flex; align-items: center; gap: 6px; }
.employee-dash-panel-link  { font-size: .75rem; color: var(--dh-primary); font-weight: 600; text-decoration: none; }
.employee-dash-panel-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   AGENT PERFORMANCE PAGE
   ══════════════════════════════════════════════════════════ */
.employee-perf-hero {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-left: 4px solid var(--dh-primary);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.employee-perf-avatar {
    width: 52px; height: 52px; flex-shrink: 0;
    background: var(--dh-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.3rem;
    border: 3px solid var(--dh-primary-dark);
}
.employee-perf-name { font-size: 1.3rem; font-weight: 800; color: var(--dh-black); margin: 0; }
.employee-perf-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.employee-perf-meta span { font-size: .78rem; color: var(--dh-muted); display: flex; align-items: center; gap: 4px; }
.employee-perf-role-badge {
    font-size: .65rem; font-weight: 700;
    padding: 2px 8px;
    background: var(--dh-primary-ultra);
    color: var(--dh-primary);
    border: 1px solid var(--dh-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* KPI row */
.employee-perf-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.employee-perf-kpi {
    padding: 16px 14px;
    border: 1px solid var(--dh-border);
    background: var(--dh-white);
    text-align: center; position: relative; overflow: hidden;
}
.employee-perf-kpi::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
}
.employee-perf-kpi.blue::after   { background: #3b82f6; }
.employee-perf-kpi.green::after  { background: #16a34a; }
.employee-perf-kpi.red::after    { background: #ef4444; }
.employee-perf-kpi.amber::after  { background: #f59e0b; }
.employee-perf-kpi.emerald::after { background: #10b981; }
.employee-perf-kpi.purple::after { background: #8b5cf6; }
.employee-perf-kpi-icon { font-size: 1.3rem; margin-bottom: 6px; }
.employee-perf-kpi.blue   .employee-perf-kpi-icon { color: #3b82f6; }
.employee-perf-kpi.green  .employee-perf-kpi-icon { color: #16a34a; }
.employee-perf-kpi.red    .employee-perf-kpi-icon { color: #ef4444; }
.employee-perf-kpi.amber  .employee-perf-kpi-icon { color: #f59e0b; }
.employee-perf-kpi.emerald .employee-perf-kpi-icon { color: #10b981; }
.employee-perf-kpi.purple .employee-perf-kpi-icon { color: #8b5cf6; }
.employee-perf-kpi-val { font-size: 1.7rem; font-weight: 900; color: var(--dh-black); line-height: 1; }
.employee-perf-kpi-lbl { font-size: .68rem; font-weight: 700; color: var(--dh-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

/* Performance grid */
.employee-perf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px; margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════
   AGENT PERFORMANCE PAGE  (ap-*)
   ══════════════════════════════════════════════════════════ */

/* Hero */
.ap-hero {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    border-left: 5px solid var(--dh-primary);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.ap-hero-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.ap-hero-right { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ap-back-btn { flex-shrink: 0; }

.ap-avatar {
    width: 60px; height: 60px; flex-shrink: 0;
    background: var(--dh-primary); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 900; letter-spacing: -.5px;
    box-shadow: 0 0 0 3px var(--dh-primary-ultra);
}
.ap-name { font-size: 1.35rem; font-weight: 800; color: var(--dh-black); line-height: 1.2; }
.ap-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.ap-meta-item { font-size: .8rem; color: var(--dh-muted); display: flex; align-items: center; gap: 3px; }
.ap-role-badge {
    font-size: .65rem; font-weight: 700; letter-spacing: .06em;
    padding: 2px 9px; text-transform: uppercase;
    background: var(--dh-primary-ultra);
    color: var(--dh-primary);
    border: 1px solid var(--dh-primary);
}

/* Period bar */
.ap-period-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 20px;
}
.ap-period-label {
    font-size: .67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--dh-muted); margin-right: 4px;
}
.ap-period-btn {
    padding: 5px 14px; font-size: .8rem; font-weight: 600;
    border: 1px solid var(--dh-border);
    background: var(--dh-white); color: var(--dh-text);
    cursor: pointer; transition: all .15s ease;
}
.ap-period-btn:hover { border-color: var(--dh-primary); color: var(--dh-primary); }
.ap-period-btn.active {
    background: var(--dh-primary);
    border-color: var(--dh-primary);
    color: #fff;
}

/* KPI row */
.ap-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.ap-kpi {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    padding: 16px;
    display: flex; align-items: center; gap: 14px;
    transition: box-shadow .15s, transform .15s;
}
.ap-kpi:hover { box-shadow: 0 3px 10px rgba(0,0,0,.07); transform: translateY(-1px); }
.ap-kpi-icon {
    width: 46px; height: 46px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; border-radius: 10px;
}
.ap-kpi-body { min-width: 0; }
.ap-kpi-val { font-size: 1.75rem; font-weight: 900; color: var(--dh-black); line-height: 1; }
.ap-kpi-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dh-muted); margin-top: 4px; }

/* Main two-column grid */
.ap-main-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}
.ap-side-stack { display: flex; flex-direction: column; gap: 14px; }

/* Panels */
.ap-panel {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    overflow: hidden;
    margin-bottom: 20px;
}
.ap-panel-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dh-border);
    background: var(--dh-bg);
}
.ap-panel-title { font-weight: 700; font-size: .875rem; color: var(--dh-black); display: flex; align-items: center; gap: 6px; }
.ap-panel-meta  { font-size: .72rem; color: var(--dh-muted); font-weight: 600; }
.ap-panel-body  { padding: 16px; }
.ap-panel-link  { font-size: .78rem; color: var(--dh-primary); font-weight: 600; text-decoration: none; }
.ap-panel-link:hover { text-decoration: underline; }

/* Bar rows */
.ap-bar-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.ap-bar-row:last-child { margin-bottom: 0; }
.ap-bar-lbl {
    display: flex; align-items: center; gap: 6px;
    width: 105px; flex-shrink: 0;
    font-size: .8rem; color: var(--dh-text);
}
.ap-bar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ap-bar-track {
    flex: 1; height: 8px;
    background: var(--dh-bg-2);
    border: 1px solid var(--dh-border);
    border-radius: 4px;
    overflow: hidden;
}
.ap-bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; min-width: 2px; }
.ap-bar-stat {
    display: flex; gap: 4px; align-items: baseline;
    font-size: .8rem; min-width: 56px; justify-content: flex-end;
}
.ap-bar-pct { font-size: .7rem; color: var(--dh-muted); }

/* Compact bar (categories/cities) */
.ap-bar-compact { align-items: center; }
.ap-bar-name {
    font-size: .78rem; color: var(--dh-text);
    width: 85px; flex-shrink: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-bar-cnt { font-size: .8rem; min-width: 18px; text-align: right; }

/* Table helpers */
.dh-tr-link { cursor: pointer; }
.ap-cat-tag {
    font-size: .72rem; font-weight: 600;
    background: var(--dh-primary-ultra);
    color: var(--dh-primary);
    padding: 2px 7px;
}
.ap-stage-tag {
    font-size: .72rem; color: var(--dh-text);
    background: var(--dh-bg);
    padding: 2px 7px;
    border: 1px solid var(--dh-border);
}

/* Responsive */
@media (max-width: 1024px) {
    .ap-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .ap-kpi-row { grid-template-columns: 1fr 1fr; }
    .ap-avatar  { width: 48px; height: 48px; font-size: 1.1rem; }
    .ap-name    { font-size: 1.1rem; }
}

/* ══════════════════════════════════════════════════════════
   FREELANCER APPLICATIONS PAGE  (fl-*)
   ══════════════════════════════════════════════════════════ */
.fl-stat-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 700;
    padding: 4px 10px;
    border: 1px solid currentColor;
}
.fl-stat-pill.yellow { color: #b45309; background: #fffbeb; border-color: #f59e0b; }
.fl-stat-pill.green  { color: #15803d; background: #f0fdf4; border-color: #86efac; }
.fl-stat-pill.red    { color: #b91c1c; background: #fef2f2; border-color: #fca5a5; }

.fl-section-hdr {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--dh-muted);
    margin: 20px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dh-border);
}
.fl-section-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.fl-section-count {
    margin-left: 2px;
    font-size: .7rem; font-weight: 700;
    background: var(--dh-bg); color: var(--dh-muted);
    padding: 1px 7px;
    border: 1px solid var(--dh-border);
}

.fl-table-wrap {
    background: var(--dh-white);
    border: 1px solid var(--dh-border);
    overflow-x: auto;
    margin-bottom: 8px;
}

.fl-name-cell {
    display: flex; align-items: center; gap: 10px;
}
.fl-avatar {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: .85rem;
}

.fl-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 700;
    padding: 3px 9px;
    text-transform: uppercase; letter-spacing: .04em;
}
.fl-badge-active {
    background: #f0fdf4; color: #15803d; border: 1px solid #86efac;
}
.fl-badge-deactivated {
    background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5;
}
.fl-badge-pending {
    background: #fffbeb; color: #b45309; border: 1px solid #fcd34d;
}
.fl-badge-rejected {
    background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db;
}

/* Search + filter bar */
.fl-filter-bar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px; flex-wrap: wrap;
}
.fl-search-wrap {
    position: relative; flex: 1; min-width: 220px; max-width: 380px;
}
.fl-search-icon {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%); color: var(--dh-muted, #9ca3af); font-size: .9rem;
}
.fl-search-input {
    padding-left: 32px !important; padding-right: 28px !important;
    width: 100%; box-sizing: border-box;
}
.fl-search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--dh-muted, #9ca3af); font-size: 1rem; line-height: 1; padding: 0;
}
.fl-search-clear:hover { color: #374151; }
.fl-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
}
.fl-tab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 6px; font-size: .8rem; font-weight: 500;
    background: none; border: 1px solid #e5e7eb; cursor: pointer;
    color: #6b7280; transition: all .15s;
}
.fl-tab:hover { background: #f3f4f6; color: #111827; }
.fl-tab.active {
    background: var(--dh-primary, #e85d04); color: #fff;
    border-color: var(--dh-primary, #e85d04);
}
.fl-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: rgba(255,255,255,.25); border-radius: 999px;
    font-size: .7rem; font-weight: 700;
}
.fl-tab:not(.active) .fl-tab-count { background: #e5e7eb; color: #374151; }

/* dh-btn-warning */
.dh-btn-warning {
    background: #f59e0b; color: #fff; border-color: #d97706;
}
.dh-btn-warning:hover { background: #d97706; }

/* alert success inline */
.dh-alert {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; font-size: .875rem; font-weight: 500;
    border: 1px solid;
}
.dh-alert-success { background: #f0fdf4; color: #15803d; border-color: #86efac; }
.dh-alert-close {
    margin-left: auto; background: none; border: none;
    font-size: 1.1rem; cursor: pointer; color: inherit; line-height: 1;
}

/* ═══════════════════════════════════════════════════
   COMPANY LEADS — view toggle, map, create-lead modal
   ═══════════════════════════════════════════════════ */

/* View toggle (Table | Map) */
.cl-view-toggle {
    display: flex;
    border: 1px solid var(--dh-border, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
}
.cl-vbtn {
    padding: 6px 14px; font-size: .8rem; font-weight: 600;
    background: none; border: none; cursor: pointer; color: #6b7280;
    display: flex; align-items: center; gap: 5px; transition: all .15s; white-space: nowrap;
}
.cl-vbtn:not(:last-child) { border-right: 1px solid var(--dh-border, #e5e7eb); }
.cl-vbtn.active            { background: var(--dh-primary, #e85d04); color: #fff; }
.cl-vbtn:not(.active):hover { background: #f3f4f6; }

/* Map layout */
.cl-map-wrap   { border: 1px solid var(--dh-border, #e5e7eb); border-radius: 8px; overflow: hidden; }
.cl-map-layout { display: flex; height: 560px; overflow: hidden; }

/* Map sidebar */
.cl-map-sidebar     { width: 270px; flex-shrink: 0; border-right: 1px solid var(--dh-border, #e5e7eb); display: flex; flex-direction: column; background: #fff; }
.cl-map-sidebar-hdr { padding: 11px 14px; border-bottom: 1px solid var(--dh-border, #e5e7eb); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl-map-lead-list   { overflow-y: auto; flex: 1; }
.cl-map-lead-card   {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 9px 13px; border-bottom: 1px solid #f1f5f9;
    cursor: pointer; transition: background .12s;
}
.cl-map-lead-card:hover    { background: #f8fafc; }
.cl-map-lead-card.selected { background: var(--dh-primary-ultra, #fff5f0); border-left: 3px solid var(--dh-primary, #e85d04); }
.cl-map-lead-num {
    width: 22px; height: 22px; flex-shrink: 0;
    background: var(--dh-primary, #e85d04); color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800; margin-top: 2px;
}

/* Map canvas */
.cl-map-canvas { flex: 1; height: 100%; z-index: 0; }

/* Map detail panel */
.cl-map-detail-panel {
    padding: 14px 18px;
    border-top: 1px solid var(--dh-border, #e5e7eb);
    background: #fff;
}

/* Create Lead slide-over modal */
.cl-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1050;
    display: flex; justify-content: flex-end;
}
.cl-modal-panel {
    width: 520px; max-width: 100vw; height: 100vh;
    background: var(--dh-card-bg, #fff);
    display: flex; flex-direction: column;
    box-shadow: -6px 0 32px rgba(0, 0, 0, .16);
    animation: clSlideIn .22s ease-out;
}
@keyframes clSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.cl-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--dh-border, #e5e7eb);
    flex-shrink: 0;
}
.cl-modal-icon {
    width: 38px; height: 38px;
    background: var(--dh-primary-ultra, #fff5f0); color: var(--dh-primary, #e85d04);
    border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.cl-modal-title { font-size: 1rem; font-weight: 800; color: var(--dh-black, #111); }
.cl-modal-sub   { font-size: .78rem; color: var(--dh-muted, #9ca3af); margin-top: 1px; }
.cl-modal-close {
    background: none; border: none; cursor: pointer; color: var(--dh-muted, #9ca3af);
    font-size: 1rem; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: background .12s;
}
.cl-modal-close:hover { background: #f3f4f6; color: #111; }
.cl-modal-body   { flex: 1; overflow-y: auto; padding: 20px 22px; }
.cl-modal-footer {
    padding: 14px 22px; border-top: 1px solid var(--dh-border, #e5e7eb);
    display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0;
}

/* Create Lead form grid */
.cl-form-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cl-form-group { display: flex; flex-direction: column; gap: 5px; }
.cl-span2      { grid-column: span 2; }

/* Spinner inline */
.cl-spin { display: inline-block; animation: clSpinRot .65s linear infinite; margin-right: 4px; }
@keyframes clSpinRot { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════
   COMPANY REPORTS — rpt-* classes
   ═══════════════════════════════════════════════════ */

/* Header */
.rpt-header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.rpt-date-chip { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; color:var(--dh-muted); background:var(--dh-bg-2,#f8fafc); padding:6px 12px; border:1px solid var(--dh-border); }

/* Filter card */
.rpt-filter-card { background:var(--dh-white,#fff); border:1px solid var(--dh-border); padding:16px 18px; margin-bottom:20px; }
.rpt-period-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rpt-period-label { font-size:.67rem; font-weight:700; color:var(--dh-muted); text-transform:uppercase; letter-spacing:.6px; white-space:nowrap; }
.rpt-period-strip { display:flex; flex-wrap:wrap; gap:4px; }
.rpt-period-btn { padding:5px 14px; font-size:.78rem; font-weight:600; border:1px solid var(--dh-border); background:none; cursor:pointer; color:var(--dh-muted); border-radius:20px; transition:all .15s; }
.rpt-period-btn:hover { background:var(--dh-bg-2); color:var(--dh-text); }
.rpt-period-btn.active { background:var(--dh-primary); border-color:var(--dh-primary); color:#fff; }
.rpt-filter-divider { height:1px; background:var(--dh-border); margin:12px 0; }
.rpt-filter-row { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; align-items:flex-end; }
.rpt-filter-field { display:flex; flex-direction:column; gap:4px; }
.rpt-filter-actions { display:flex; gap:6px; }

/* Tabs */
.rpt-tabs { display:flex; gap:0; border-bottom:2px solid var(--dh-border); margin-bottom:22px; flex-wrap:wrap; }
.rpt-tab { padding:10px 18px; font-size:.84rem; font-weight:600; background:none; border:none; cursor:pointer; color:var(--dh-muted); display:flex; align-items:center; gap:6px; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .15s; }
.rpt-tab:hover { color:var(--dh-text); background:var(--dh-bg-2); }
.rpt-tab.active { color:var(--dh-primary); border-bottom-color:var(--dh-primary); }
.rpt-tab-badge { background:var(--dh-primary-ultra); color:var(--dh-primary); font-size:.65rem; font-weight:700; padding:1px 7px; border-radius:999px; border:1px solid var(--dh-primary); }

/* KPI row */
.rpt-kpi-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin-bottom:22px; }
.rpt-kpi-card { background:var(--dh-white,#fff); border:1px solid var(--dh-border); padding:16px; display:flex; align-items:center; gap:14px; }
.rpt-kpi-icon { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.1rem; border-radius:8px; }
.rpt-kpi-body { flex:1; min-width:0; }
.rpt-kpi-val { font-size:2rem; font-weight:900; color:var(--dh-black); line-height:1; }
.rpt-kpi-lbl { font-size:.67rem; font-weight:700; color:var(--dh-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }
.rpt-kpi-unit { font-size:1rem; font-weight:700; }

/* Panels */
.rpt-panel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-bottom:22px; }
.rpt-panel { background:var(--dh-white,#fff); border:1px solid var(--dh-border); padding:18px; }
.rpt-panel-hdr { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.rpt-panel-icon { width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.9rem; border-radius:6px; }
.rpt-panel-title { font-size:.9rem; font-weight:800; color:var(--dh-black); flex:1; }
.rpt-empty-text { color:var(--dh-muted); font-size:.82rem; margin:0; }

/* Bar items */
.rpt-bar-item { margin-bottom:11px; }
.rpt-bar-hdr { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.rpt-bar-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rpt-bar-label { font-size:.78rem; color:var(--dh-text); flex:1; }
.rpt-bar-val { font-size:.76rem; font-weight:700; color:var(--dh-black); white-space:nowrap; }
.rpt-bar-pct { color:var(--dh-muted); font-weight:400; }
.rpt-bar-track { background:var(--dh-bg-2,#f1f5f9); height:7px; border:1px solid var(--dh-border); overflow:hidden; }
.rpt-bar-fill { height:100%; transition:width .45s ease; }
.rpt-truncate { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Activity trend */
.rpt-trend-card { background:var(--dh-white,#fff); border:1px solid var(--dh-border); padding:18px; margin-bottom:22px; }
.rpt-trend-hint { font-size:.75rem; color:var(--dh-muted); margin-left:auto; }
.rpt-trend-wrap { overflow-x:auto; padding-bottom:4px; }
.rpt-trend-axis { display:flex; justify-content:space-between; font-size:.65rem; color:var(--dh-muted); margin-top:4px; padding:0 12px; }

/* Pipeline funnel */
.rpt-funnel-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.rpt-funnel-num { width:28px; height:28px; flex-shrink:0; border-radius:6px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; }
.rpt-pipeline-grid { display:grid; gap:16px; margin-bottom:0; }

/* Employee cards */
.rpt-employee-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:20px; }
.rpt-employee-card { background:var(--dh-white,#fff); border:1px solid var(--dh-border); padding:16px 16px 14px 20px; position:relative; overflow:hidden; }
.rpt-employee-rank-bar { position:absolute; top:0; left:0; width:4px; height:100%; }
.rpt-employee-top { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.rpt-employee-avatar { width:42px; height:42px; background:var(--dh-primary-ultra); color:var(--dh-primary); border:2px solid var(--dh-primary); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; flex-shrink:0; text-transform:uppercase; border-radius:8px; }
.rpt-medal { font-size:1.1rem; flex-shrink:0; }
.rpt-employee-metrics { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:4px; margin-bottom:10px; }
.rpt-employee-metric { text-align:center; padding:7px 4px; background:var(--dh-bg-2); border:1px solid var(--dh-border); }
.rpt-metric-lbl { display:block; font-size:.58rem; color:var(--dh-muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.rpt-metric-val { display:block; font-size:1.05rem; font-weight:900; color:var(--dh-black); }
.rpt-employee-bar-row { margin-bottom:6px; }

/* ═══════════════════════════════════════════════════
   AGENT MANAGEMENT — ag-* classes
   ═══════════════════════════════════════════════════ */

/* Page header */
.ag-page-hdr { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.ag-page-title { font-size:1.45rem; font-weight:900; color:var(--dh-black); margin:0 0 4px; }
.ag-page-sub { font-size:.82rem; color:var(--dh-muted); margin:0; }

/* KPI strip */
.ag-kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.ag-kpi-card { background:var(--dh-white,#fff); border:1px solid var(--dh-border); padding:16px 18px; display:flex; align-items:center; gap:14px; }
.ag-kpi-icon { width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.1rem; border-radius:8px; }
.ag-kpi-body { flex:1; }
.ag-kpi-val { font-size:2rem; font-weight:900; color:var(--dh-black); line-height:1; }
.ag-kpi-lbl { font-size:.67rem; font-weight:700; color:var(--dh-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; }

/* Filter bar */
.ag-filter-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.ag-search-wrap { position:relative; flex:1; min-width:200px; }
.ag-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--dh-muted); font-size:.85rem; pointer-events:none; }
.ag-search-input { padding-left:34px !important; }
.ag-filter-select { width:auto; min-width:130px; flex-shrink:0; }

/* List */
.ag-list-header { font-size:.78rem; color:var(--dh-muted); margin-bottom:10px; padding:0 2px; }
.ag-list { display:flex; flex-direction:column; gap:6px; }

/* Employee row */
.ag-row { background:var(--dh-white,#fff); border:1px solid var(--dh-border); display:grid; grid-template-columns:52px 1fr 180px 150px 220px 180px; align-items:center; gap:14px; padding:14px 18px; transition:border-color .13s, box-shadow .13s; }
.ag-row:hover { border-color:var(--dh-primary); box-shadow:0 2px 14px rgba(22,163,74,.1); }
.ag-row-inactive { opacity:.72; }

/* Avatar */
.ag-avt { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.2rem; flex-shrink:0; }

/* Identity */
.ag-identity { min-width:0; }
.ag-name { font-weight:800; font-size:.95rem; color:var(--dh-black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.ag-email { font-size:.74rem; color:var(--dh-muted); display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Contact */
.ag-contact { display:flex; flex-direction:column; gap:5px; }
.ag-contact-item { display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--dh-text); white-space:nowrap; }
.ag-contact-item i { color:var(--dh-muted); font-size:.75rem; flex-shrink:0; }

/* Tags */
.ag-tags { display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.ag-role-tag { font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:2px 9px; border:1px solid; border-radius:4px; white-space:nowrap; }
.ag-tag-employee { background:#eff6ff; color:#2563eb; border-color:#bfdbfe; }
.ag-tag-free  { background:#fdf4ff; color:#9333ea; border-color:#e9d5ff; }
.ag-status-tag { font-size:.72rem; font-weight:700; padding:2px 9px; border:1px solid; border-radius:4px; display:flex; align-items:center; gap:5px; white-space:nowrap; }
.ag-tag-active   { background:#f0fdf4; color:#16a34a; border-color:#bbf7d0; }
.ag-tag-inactive { background:#f8fafc; color:#94a3b8; border-color:#e2e8f0; }
.ag-status-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.ag-extra-tag { font-size:.65rem; font-weight:600; padding:2px 8px; border:1px solid #fde68a; background:#fefce8; color:#92400e; border-radius:4px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-extra-more { background:#f1f5f9; color:var(--dh-muted); border-color:var(--dh-border); }

/* Workflow cell */
.ag-wf-cell { display:flex; align-items:center; gap:8px; min-width:0; }
.ag-wf-pill { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:700; color:var(--dh-primary); background:var(--dh-primary-ultra); padding:4px 10px; border:1px solid var(--dh-primary-pale); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:4px; }
.ag-wf-empty { font-size:.77rem; color:var(--dh-muted); font-style:italic; white-space:nowrap; }
.ag-wf-assign-btn { flex-shrink:0; font-size:.73rem; font-weight:700; padding:4px 10px; border:1px solid var(--dh-border); background:var(--dh-white); color:var(--dh-text); cursor:pointer; border-radius:4px; transition:all .12s; white-space:nowrap; }
.ag-wf-assign-btn:hover { background:var(--dh-primary); border-color:var(--dh-primary); color:#fff; }

/* Row actions */
.ag-row-actions { display:flex; gap:6px; justify-content:flex-end; }
.ag-act-btn { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:600; padding:6px 12px; border:1px solid var(--dh-border); background:var(--dh-white); color:var(--dh-muted); text-decoration:none; transition:all .12s; border-radius:4px; white-space:nowrap; }
.ag-act-btn:hover { background:var(--dh-primary-ultra); border-color:var(--dh-primary); color:var(--dh-primary); }

@media (max-width:900px) {
  .ag-row { grid-template-columns:52px 1fr; grid-template-rows:auto auto auto; }
  .ag-contact, .ag-tags, .ag-wf-cell, .ag-row-actions { grid-column:1/-1; border-top:1px solid var(--dh-border-light); padding-top:8px; }
  .ag-kpi-strip { grid-template-columns:1fr 1fr; }
}


/* =====================================================
   LANDING PAGE STYLES
   Public marketing page — /home
   ===================================================== */

/* ── Reset for landing ── */
.lp-nav, .lp-hero, .lp-logos, .lp-section, .lp-cta, .lp-footer {
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── NAV ── */
.lp-nav {
    position: sticky; top: 0; z-index: 999;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f0;
}
.lp-nav-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; gap: 24px;
    padding: 14px 24px;
}
.lp-logo {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; flex-shrink: 0;
}
.lp-logo-dots {
    display: flex; gap: 3px; align-items: center;
}
.lp-logo-dots span {
    width: 7px; height: 7px; border-radius: 50%;
}
.lp-logo-icon {
    font-size: 1.3rem; color: #16a34a;
}
.lp-logo-text {
    font-size: 1.15rem; font-weight: 800; color: #0f172a; letter-spacing: -.5px;
}
.lp-logo-text .g { color: #16a34a; }
.lp-nav-links {
    display: flex; align-items: center; gap: 6px; margin-left: auto;
}
.lp-nav-link {
    font-size: .875rem; font-weight: 500; color: #475569;
    text-decoration: none; padding: 6px 12px; border-radius: 8px;
    transition: color .2s, background .2s;
}
.lp-nav-link:hover { color: #16a34a; background: #f0fdf4; }
.lp-btn-ghost {
    font-size: .875rem; font-weight: 600; color: #1e293b;
    text-decoration: none; padding: 8px 18px;
    border: 1.5px solid #e2e8f0; border-radius: 10px;
    transition: border-color .2s, background .2s;
}
.lp-btn-ghost:hover { border-color: #16a34a; background: #f0fdf4; color: #16a34a; text-decoration: none; }
.lp-btn-primary {
    font-size: .875rem; font-weight: 700; color: #fff;
    text-decoration: none; padding: 9px 20px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    border-radius: 10px; border: none;
    box-shadow: 0 2px 8px rgba(22,163,74,.3);
    transition: opacity .2s, transform .1s, box-shadow .2s;
    display: inline-flex; align-items: center; gap: 6px;
}
.lp-btn-primary:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(22,163,74,.4); color: #fff; text-decoration: none; }
.lp-mobile-cta { display: none; }

/* ── HERO ── */
.lp-hero {
    background: linear-gradient(160deg, #f0fdf4 0%, #ffffff 55%, #eff6ff 100%);
    padding: 80px 24px 60px;
    position: relative; overflow: hidden;
}
.lp-hero::before {
    content: '';
    position: absolute; top: -100px; right: -80px;
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(22,163,74,.07) 0%, transparent 70%);
    pointer-events: none;
}
.lp-hero-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.lp-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 700; color: #16a34a;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    padding: 5px 12px; border-radius: 20px;
    margin-bottom: 20px; text-transform: uppercase; letter-spacing: .5px;
}
.lp-hero-title {
    font-size: 3rem; font-weight: 900; color: #0f172a;
    line-height: 1.1; letter-spacing: -1px; margin: 0 0 20px;
}
.lp-hero-accent {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lp-hero-sub {
    font-size: 1.05rem; color: #475569; line-height: 1.7;
    margin: 0 0 32px; max-width: 480px;
}
.lp-hero-actions {
    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px;
}
.lp-btn-lg { padding: 13px 26px; font-size: .95rem; border-radius: 12px; }
.lp-hero-stats {
    display: flex; align-items: center; gap: 20px;
}
.lp-stat-val { font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.lp-stat-lbl { font-size: .75rem; color: #94a3b8; font-weight: 500; }
.lp-stat-divider { width: 1px; height: 32px; background: #e2e8f0; }
.lp-hero-visual { position: relative; }
.lp-hero-svg { width: 100%; border-radius: 20px; filter: drop-shadow(0 20px 60px rgba(0,0,0,.10)); }

/* Floating cards */
.lp-float {
    position: absolute;
    display: flex; align-items: center; gap: 8px;
    background: #fff; border-radius: 12px;
    padding: 10px 16px;
    font-size: .8rem; font-weight: 600; color: #1e293b;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    white-space: nowrap;
    animation: lp-float-bob 3s ease-in-out infinite;
}
.lp-float-1 { top: 8%;  left: -8%; animation-delay: 0s; }
.lp-float-2 { bottom: 22%; right: -10%; animation-delay: .8s; }
.lp-float-3 { bottom: 6%; left: -6%; animation-delay: 1.6s; }
@keyframes lp-float-bob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* ── LOGOS BAR ── */
.lp-logos {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 22px 24px;
}
.lp-logos-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.lp-logos-label {
    font-size: .75rem; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0;
}
.lp-logos-row { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.lp-logo-item {
    font-size: .875rem; font-weight: 700; color: #cbd5e1;
    letter-spacing: .5px; text-transform: uppercase;
}

/* ── SECTIONS ── */
.lp-section { padding: 88px 24px; }
.lp-section--alt { background: #f8fafc; }
.lp-section-inner { max-width: 1200px; margin: 0 auto; }
.lp-section-hdr { text-align: center; margin-bottom: 56px; }
.lp-section-title {
    font-size: 2.2rem; font-weight: 900; color: #0f172a;
    letter-spacing: -.5px; margin: 12px 0 16px;
}
.lp-section-sub { font-size: 1rem; color: #64748b; margin: 0 auto; max-width: 520px; }

/* ── FEATURES GRID ── */
.lp-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.lp-feat-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px 24px;
    transition: transform .2s, box-shadow .2s;
}
.lp-feat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,.10);
}
.lp-feat-card--green { border-top: 3px solid #16a34a; }
.lp-feat-card--blue  { border-top: 3px solid #3b82f6; }
.lp-feat-card--purple{ border-top: 3px solid #7c3aed; }
.lp-feat-card--teal  { border-top: 3px solid #14b8a6; }
.lp-feat-card--yellow{ border-top: 3px solid #f59e0b; }
.lp-feat-card--red   { border-top: 3px solid #ef4444; }

.lp-feat-illo { height: 112px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.lp-feat-illo svg { height: 100%; max-width: 140px; }
.lp-feat-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; margin-bottom: 14px;
}
.lp-feat-title { font-size: 1rem; font-weight: 800; color: #0f172a; margin: 0 0 10px; }
.lp-feat-desc  { font-size: .875rem; color: #475569; line-height: 1.6; margin: 0 0 16px; }
.lp-feat-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.lp-feat-list li { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #475569; }
.lp-feat-list li i { color: #16a34a; font-size: .75rem; flex-shrink: 0; }

/* ── HOW IT WORKS ── */
.lp-steps {
    display: flex; align-items: flex-start; gap: 0;
    justify-content: center; flex-wrap: wrap;
}
.lp-step {
    flex: 1; min-width: 180px; max-width: 220px;
    text-align: center; padding: 0 12px;
}
.lp-step-num {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff; font-weight: 900; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; box-shadow: 0 4px 14px rgba(22,163,74,.3);
}
.lp-step-illo { height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.lp-step-illo svg { height: 100%; max-width: 120px; }
.lp-step-title { font-size: .95rem; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.lp-step-desc  { font-size: .82rem; color: #64748b; line-height: 1.6; }
.lp-step-arrow {
    display: flex; align-items: center; padding: 0 4px; margin-top: 50px;
    color: #cbd5e1; font-size: 1.4rem;
}

/* ── PRICING ── */
.lp-pricing-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    align-items: start;
}
.lp-price-card {
    background: #fff; border: 1.5px solid #e2e8f0;
    border-radius: 20px; padding: 32px 28px;
    position: relative;
    transition: transform .2s, box-shadow .2s;
}
.lp-price-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.10); }
.lp-price-card--featured {
    border: 2px solid #16a34a;
    background: #f0fdf4;
    transform: scale(1.03);
    box-shadow: 0 20px 60px rgba(22,163,74,.18);
}
.lp-price-card--featured:hover { transform: scale(1.03) translateY(-4px); }
.lp-price-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: #16a34a; color: #fff;
    font-size: .72rem; font-weight: 700; padding: 4px 14px; border-radius: 20px;
    letter-spacing: .5px; white-space: nowrap;
}
.lp-price-icon { font-size: 1.8rem; color: #16a34a; margin-bottom: 12px; }
.lp-price-name { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.lp-price-amount { font-size: 2.6rem; font-weight: 900; color: #0f172a; line-height: 1; margin-bottom: 8px; }
.lp-price-currency { font-size: 1.3rem; vertical-align: super; font-weight: 700; color: #64748b; }
.lp-price-period { font-size: .9rem; font-weight: 500; color: #94a3b8; }
.lp-price-desc { font-size: .845rem; color: #64748b; margin-bottom: 20px; line-height: 1.5; }
.lp-price-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 9px; }
.lp-price-features li { display: flex; align-items: center; gap: 8px; font-size: .845rem; color: #374151; }
.lp-price-features li i { color: #16a34a; font-size: .75rem; flex-shrink: 0; }
.lp-price-btn {
    display: block; text-align: center; padding: 11px 20px;
    border-radius: 10px; font-weight: 700; font-size: .9rem;
    text-decoration: none; transition: all .2s;
}
.lp-btn-ghost.lp-price-btn { border: 1.5px solid #e2e8f0; color: #1e293b; }
.lp-btn-ghost.lp-price-btn:hover { border-color: #16a34a; background: #f0fdf4; color: #16a34a; }
.lp-btn-primary.lp-price-btn { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; border: none; }
.lp-btn-primary.lp-price-btn:hover { opacity: .9; color: #fff; }

/* ── CTA BANNER ── */
.lp-cta {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 60%, #166534 100%);
    padding: 80px 24px;
    position: relative; overflow: hidden;
}
.lp-cta-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; flex-wrap: wrap; position: relative; z-index: 1;
}
.lp-cta-title {
    font-size: 2rem; font-weight: 900; color: #fff; margin: 0 0 10px;
}
.lp-cta-sub { font-size: 1rem; color: rgba(255,255,255,.8); margin: 0; max-width: 460px; }
.lp-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.lp-cta-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: #16a34a; font-weight: 700; font-size: .9rem;
    padding: 13px 24px; border-radius: 12px; text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    transition: transform .2s, box-shadow .2s;
}
.lp-cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); color: #16a34a; text-decoration: none; }
.lp-cta-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    border: 2px solid rgba(255,255,255,.5); color: #fff;
    font-weight: 700; font-size: .9rem;
    padding: 11px 22px; border-radius: 12px; text-decoration: none;
    transition: background .2s, border-color .2s;
}
.lp-cta-btn-ghost:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.8); color: #fff; text-decoration: none; }
.lp-cta-blob { position: absolute; width: 320px; height: 320px; pointer-events: none; }
.lp-cta-blob-1 { top: -80px; right: -40px; }
.lp-cta-blob-2 { bottom: -100px; left: -60px; }

/* ── FOOTER ── */
.lp-footer {
    background: #0f172a; padding: 56px 24px 32px;
}
.lp-footer-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.lp-footer-brand { max-width: 260px; }
.lp-footer-tagline { font-size: .8rem; color: #64748b; font-style: italic; margin: 0 0 12px; }
.lp-footer-copy { font-size: .78rem; color: #475569; margin: 0; }
.lp-footer-links { display: flex; gap: 48px; }
.lp-footer-col { display: flex; flex-direction: column; gap: 10px; }
.lp-footer-col-title { font-size: .78rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.lp-footer-link { font-size: .875rem; color: #64748b; text-decoration: none; transition: color .2s; }
.lp-footer-link:hover { color: #22c55e; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .lp-features-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-pricing-grid  { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .lp-price-card--featured { transform: none; }
    .lp-hero-inner    { grid-template-columns: 1fr; }
    .lp-hero-visual   { display: none; }
    .lp-hero          { padding: 60px 24px 50px; }
    .lp-hero-title    { font-size: 2.4rem; }
}
@media (max-width: 768px) {
    .lp-nav-links { display: none; }
    .lp-mobile-cta { display: inline-flex; margin-left: auto; }
    .lp-features-grid { grid-template-columns: 1fr; }
    .lp-hero-title  { font-size: 2rem; }
    .lp-section-title { font-size: 1.7rem; }
    .lp-cta-inner   { flex-direction: column; text-align: center; }
    .lp-cta-actions { justify-content: center; }
    .lp-footer-inner { flex-direction: column; }
    .lp-steps       { flex-direction: column; align-items: center; }
    .lp-step-arrow  { display: none; }
    .lp-hero-stats  { flex-wrap: wrap; gap: 12px; }
}


/* =====================================================
   PUBLIC FORM PAGES  (/apply, /company-register)
   ===================================================== */

/* ── Page shell ── */
.pub-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.pub-page-nav {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 32px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    position: sticky; top: 0; z-index: 50;
}
.pub-page-nav-logo {
    display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.pub-page-nav-logo .lp-logo-dots { display: flex; gap: 3px; }
.pub-page-nav-logo .lp-logo-dots span { width: 7px; height: 7px; border-radius: 50%; }
.pub-page-nav-logo .lp-logo-icon { font-size: 1.2rem; color: #16a34a; }
.pub-page-nav-logo .lp-logo-text { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.pub-page-nav-logo .lp-logo-text .g { color: #16a34a; }
.pub-nav-actions { display: flex; align-items: center; gap: 10px; }
.pub-nav-link {
    font-size: .82rem; font-weight: 500; color: #64748b;
    text-decoration: none; padding: 6px 12px; border-radius: 8px;
    transition: color .2s, background .2s;
}
.pub-nav-link:hover { color: #16a34a; background: #f0fdf4; }
.pub-nav-link-btn {
    font-size: .82rem; font-weight: 700; color: #16a34a;
    text-decoration: none; padding: 7px 16px;
    border: 1.5px solid #16a34a; border-radius: 8px;
    transition: background .2s, color .2s;
}
.pub-nav-link-btn:hover { background: #16a34a; color: #fff; text-decoration: none; }

/* ── Split body ── */
.pub-form-body {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 57px);
}

/* ── Left illustration panel ── */
.pub-form-panel {
    flex: 0 0 420px;
    background-image: linear-gradient(160deg, #061008 0%, #0a1e0d 55%, #061a15 100%);
    padding: 52px 44px;
    display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden;
}
.pub-form-panel::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(74,222,128,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74,222,128,.025) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
}
.pub-form-panel::after {
    content: '';
    position: absolute; bottom: -80px; right: -80px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(22,163,74,.18) 0%, transparent 70%);
    pointer-events: none;
}
.pub-panel-inner { position: relative; z-index: 1; }
.pub-panel-illo { margin: 0 auto 28px; display: block; max-width: 240px; }
.pub-panel-title {
    font-size: 1.5rem; font-weight: 900; color: #fff;
    line-height: 1.2; letter-spacing: -.4px; margin-bottom: 8px;
}
.pub-panel-subtitle {
    font-size: .82rem; color: rgba(255,255,255,.45);
    margin-bottom: 32px; line-height: 1.6;
}
.pub-panel-benefits { display: flex; flex-direction: column; gap: 16px; }
.pub-panel-benefit {
    display: flex; align-items: flex-start; gap: 12px;
}
.pub-panel-benefit-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    background: rgba(74,222,128,.09);
    border: 1px solid rgba(74,222,128,.2);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; color: #4ade80;
}
.pub-panel-benefit-title { font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.85); }
.pub-panel-benefit-desc  { font-size: .72rem; color: rgba(255,255,255,.32); margin-top: 1px; }
.pub-panel-trust {
    margin-top: 36px; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex; align-items: center; gap: 10px;
    font-size: .72rem; color: rgba(255,255,255,.25); font-weight: 500;
}
.pub-panel-trust i { color: #4ade80; font-size: .85rem; }

/* ── Right form area ── */
.pub-form-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 40px;
    overflow-y: auto;
}
.pub-form-card { width: 100%; max-width: 520px; }
.pub-form-card--narrow { max-width: 420px; }

/* ── Form header ── */
.pub-form-hdr { text-align: center; margin-bottom: 28px; }
.pub-form-hdr-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff;
    margin: 0 auto 14px;
    box-shadow: 0 6px 20px rgba(22,163,74,.3);
}
.pub-form-hdr-title {
    font-size: 1.5rem; font-weight: 900; color: #0f172a;
    letter-spacing: -.4px; margin: 0 0 6px;
}
.pub-form-hdr-sub {
    font-size: .845rem; color: #64748b; margin: 0;
}
.pub-form-hdr-sub a { color: #16a34a; font-weight: 600; text-decoration: none; }
.pub-form-hdr-sub a:hover { text-decoration: underline; }

/* ── Section dividers ── */
.pub-form-section {
    display: flex; align-items: center; gap: 10px;
    margin: 20px 0 14px;
}
.pub-form-section-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: #16a34a; color: #fff;
    font-size: .72rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pub-form-section-label {
    font-size: .72rem; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .5px;
}
.pub-form-section-line { flex: 1; height: 1px; background: #e2e8f0; }

/* ── Input with icon ── */
.pub-input-wrap { position: relative; }
.pub-input-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: .9rem; pointer-events: none;
    z-index: 1;
}
.pub-input-wrap .dh-input { padding-left: 36px; }
.pub-input-wrap.has-toggle .dh-input { padding-right: 40px; }
.pub-input-toggle {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: #94a3b8; font-size: .9rem; padding: 4px;
    transition: color .2s;
}
.pub-input-toggle:hover { color: #475569; }

/* ── Password strength ── */
.pub-pwd-strength { margin-top: 6px; }
.pub-pwd-strength-bar {
    height: 4px; border-radius: 2px; background: #e2e8f0;
    overflow: hidden; margin-bottom: 4px;
}
.pub-pwd-strength-fill {
    height: 100%; border-radius: 2px;
    transition: width .3s, background .3s;
}
.pub-pwd-strength-text { font-size: .72rem; font-weight: 600; }

/* ── Field helpers ── */
.pub-field-ok  { font-size: .72rem; color: #16a34a; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.pub-field-err { font-size: .72rem; color: #ef4444; margin-top: 4px; display: flex; align-items: center; gap: 4px; }

/* ── Submit button ── */
.pub-submit-btn {
    width: 100%; padding: 13px 20px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff; font-weight: 700; font-size: .95rem;
    border: none; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 16px rgba(22,163,74,.35);
    transition: opacity .2s, transform .1s, box-shadow .2s;
    margin-top: 20px;
}
.pub-submit-btn:hover:not(:disabled) {
    opacity: .93; transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(22,163,74,.4);
}
.pub-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* ── Success state ── */
.pub-success {
    text-align: center; padding: 20px 0;
}
.pub-success-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, #16a34a, #15803d);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #fff;
    margin: 0 auto 20px;
    box-shadow: 0 8px 28px rgba(22,163,74,.35);
    animation: pub-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pub-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.pub-success-title { font-size: 1.4rem; font-weight: 900; color: #0f172a; margin: 0 0 10px; }
.pub-success-desc  { font-size: .9rem; color: #64748b; line-height: 1.7; margin: 0 0 24px; }
.pub-success-steps {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 12px; padding: 16px 20px;
    text-align: left; margin-bottom: 24px;
}
.pub-success-step {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .82rem; color: #475569; padding: 6px 0;
}
.pub-success-step:not(:last-child) { border-bottom: 1px solid #f1f5f9; }
.pub-success-step i { color: #16a34a; margin-top: 2px; flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .pub-form-panel { display: none; }
    .pub-form-right { padding: 32px 20px; }
    .pub-form-card, .pub-form-card--narrow { max-width: 480px; }
    .pub-page-nav { padding: 12px 20px; }
}
@media (max-width: 480px) {
    .pub-form-right { padding: 20px 16px; }
    .pub-form-hdr-title { font-size: 1.25rem; }
}


/* =====================================================
   APPLICATION FLOW SECTION  (#flow)
   ===================================================== */

.lp-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* ── Individual step ── */
.lp-flow-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 48px 0;
}
.lp-flow-step--left  .lp-flow-text     { order: 1; }
.lp-flow-step--left  .lp-flow-illo-wrap { order: 2; }
.lp-flow-step--right .lp-flow-text     { order: 2; }
.lp-flow-step--right .lp-flow-illo-wrap { order: 1; }

/* ── Illustration wrapper ── */
.lp-flow-illo-wrap {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    border: 1px solid #e2e8f0;
    background: #fff;
}
.lp-flow-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Text block ── */
.lp-flow-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    font-size: 1rem; font-weight: 900;
    letter-spacing: -.5px;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px rgba(22,163,74,.3);
}
.lp-flow-title {
    font-size: 1.35rem; font-weight: 800; color: #0f172a;
    letter-spacing: -.3px; line-height: 1.25;
    margin: 0 0 12px;
}
.lp-flow-desc {
    font-size: .88rem; color: #475569; line-height: 1.75;
    margin: 0 0 20px;
}
.lp-flow-desc strong { color: #0f172a; }

/* ── Chips ── */
.lp-flow-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.lp-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .75rem; font-weight: 600;
    border: 1px solid transparent;
}
.lp-chip--green  { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.lp-chip--blue   { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.lp-chip--purple { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.lp-chip--yellow { background: #fef3c7; color: #d97706; border-color: #fde68a; }
.lp-chip--red    { background: #fef2f2; color: #ef4444; border-color: #fecaca; }
.lp-chip--teal   { background: #f0fdfa; color: #0d9488; border-color: #99f6e4; }

/* ── Connector between steps ── */
.lp-flow-connector {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    padding: 4px 0;
}
.lp-flow-connector-line {
    width: 2px; height: 32px;
    background: linear-gradient(to bottom, #bbf7d0, #16a34a);
}
.lp-flow-connector-icon {
    font-size: 1.4rem; color: #16a34a;
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .lp-flow-step {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 0;
    }
    .lp-flow-step--left  .lp-flow-text,
    .lp-flow-step--left  .lp-flow-illo-wrap,
    .lp-flow-step--right .lp-flow-text,
    .lp-flow-step--right .lp-flow-illo-wrap { order: unset; }
    .lp-flow-step--left  .lp-flow-illo-wrap { order: -1; }
    .lp-flow-step--right .lp-flow-illo-wrap { order: -1; }
}


/* =====================================================
   APPLICATION FLOW — ANIMATION LAYER
   Scroll-reveal + SVG micro-animations
   ===================================================== */

/* ── Keyframes ─────────────────────────────────────── */
@keyframes lp-slide-left  { from { opacity:0; transform:translateX(-52px); } to { opacity:1; transform:translateX(0); } }
@keyframes lp-slide-right { from { opacity:0; transform:translateX( 52px); } to { opacity:1; transform:translateX(0); } }
@keyframes lp-fade-up     { from { opacity:0; transform:translateY(18px);  } to { opacity:1; transform:translateY(0); } }
@keyframes lp-pop-in      { 0%   { opacity:0; transform:scale(.4) rotate(-8deg); } 65% { transform:scale(1.12); } 100% { opacity:1; transform:scale(1) rotate(0); } }
@keyframes lp-line-grow   { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes lp-icon-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes lp-shimmer     { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes lp-bounce-pin  { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes lp-stroke-draw { from { stroke-dashoffset:var(--dash-len,60); } to { stroke-dashoffset:0; } }
@keyframes lp-wo-blink    { 0%,100% { fill:#fef3c7; } 50% { fill:#fde68a; } }
@keyframes lp-glow-pulse  { 0%,100% { filter:drop-shadow(0 0 3px rgba(22,163,74,.2)); } 50% { filter:drop-shadow(0 0 10px rgba(22,163,74,.65)); } }

/* ── Animation-ready gate (JS adds .flow-anim-ready) ── */
/* Whole step + connector: start invisible */
#flow.flow-anim-ready .lp-flow-step,
#flow.flow-anim-ready .lp-flow-connector { opacity: 0; }

/* Section header children: start invisible */
#flow.flow-anim-ready .lp-flow-section-hdr > * { opacity: 0; }

/* Chip list items: start invisible */
#flow.flow-anim-ready .lp-flow-chips .lp-chip { opacity: 0; }

/* ── On visible: restore opacity (children handle own animations) ── */
#flow.flow-anim-ready .lp-flow-step.is-visible,
#flow.flow-anim-ready .lp-flow-connector.is-visible { opacity: 1; }

/* ── Section header reveal ── */
#flow.flow-anim-ready .lp-flow-section-hdr.is-visible > *                { animation: lp-fade-up .6s cubic-bezier(.22,1,.36,1) both; }
#flow.flow-anim-ready .lp-flow-section-hdr.is-visible > *:nth-child(2)   { animation-delay: .12s; }
#flow.flow-anim-ready .lp-flow-section-hdr.is-visible > *:nth-child(3)   { animation-delay: .24s; }

/* ── Step --right: illustration slides from left, text from right ── */
#flow.flow-anim-ready .lp-flow-step--right.is-visible .lp-flow-illo-wrap { animation: lp-slide-left  .72s cubic-bezier(.22,1,.36,1) both; }
#flow.flow-anim-ready .lp-flow-step--right.is-visible .lp-flow-text      { animation: lp-slide-right .72s cubic-bezier(.22,1,.36,1) .15s both; }

/* ── Step --left: text slides from left, illustration from right ── */
#flow.flow-anim-ready .lp-flow-step--left.is-visible .lp-flow-text       { animation: lp-slide-left  .72s cubic-bezier(.22,1,.36,1) both; }
#flow.flow-anim-ready .lp-flow-step--left.is-visible .lp-flow-illo-wrap  { animation: lp-slide-right .72s cubic-bezier(.22,1,.36,1) .15s both; }

/* ── Step number badge pops in ── */
#flow.flow-anim-ready .lp-flow-step.is-visible .lp-flow-num {
    opacity: 0;
    animation: lp-pop-in .5s cubic-bezier(.22,1,.36,1) .35s both;
}

/* ── Chips stagger in ── */
#flow.flow-anim-ready .lp-flow-step.is-visible .lp-chip:nth-child(1) { animation: lp-fade-up .38s ease .45s both; }
#flow.flow-anim-ready .lp-flow-step.is-visible .lp-chip:nth-child(2) { animation: lp-fade-up .38s ease .55s both; }
#flow.flow-anim-ready .lp-flow-step.is-visible .lp-chip:nth-child(3) { animation: lp-fade-up .38s ease .65s both; }
#flow.flow-anim-ready .lp-flow-step.is-visible .lp-chip:nth-child(4) { animation: lp-fade-up .38s ease .75s both; }

/* ── Connector: line draws downward → icon bounces ── */
#flow.flow-anim-ready .lp-flow-connector.is-visible .lp-flow-connector-line {
    transform-origin: top center;
    animation: lp-line-grow .4s ease .1s both;
}
#flow.flow-anim-ready .lp-flow-connector.is-visible .lp-flow-connector-icon {
    animation: lp-icon-bounce 1.8s ease-in-out .55s infinite;
}

/* ── SVG micro-animations (always-on, declarative) ── */

/* Step 1 — "Workflow Set" chip shimmer */
.flow-svg-s1 .workflow-chip { animation: lp-shimmer 2.5s ease-in-out 1.2s infinite; }

/* Step 2 — map pins bounce with stagger */
.flow-svg-s2 .pin-1 { animation: lp-bounce-pin 2.8s ease-in-out  0.0s infinite; }
.flow-svg-s2 .pin-2 { animation: lp-bounce-pin 2.8s ease-in-out  0.4s infinite; }
.flow-svg-s2 .pin-3 { animation: lp-bounce-pin 2.8s ease-in-out  0.8s infinite; }
.flow-svg-s2 .pin-4 { animation: lp-bounce-pin 2.8s ease-in-out  1.2s infinite; }

/* Step 3 — pipeline arrow shimmer */
.flow-svg-s3 .pipeline-arrow { animation: lp-shimmer 1.8s ease-in-out .5s infinite; }

/* Step 4 — conversion arrow draw (fires when step enters viewport) */
.flow-svg-s4 .convert-arrow {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
}
#flow.flow-anim-ready .lp-flow-step.is-visible .flow-svg-s4 .convert-arrow {
    --dash-len: 50;
    animation: lp-stroke-draw .7s ease .6s both;
}
.flow-svg-s4 .convert-check {
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
}
#flow.flow-anim-ready .lp-flow-step.is-visible .flow-svg-s4 .convert-check {
    --dash-len: 22;
    animation: lp-stroke-draw .45s ease 1.15s both;
}
/* Customer card glow once visible */
#flow.flow-anim-ready .lp-flow-step.is-visible .flow-svg-s4 .customer-card {
    animation: lp-glow-pulse 2.2s ease-in-out 1.6s infinite;
}

/* Step 5 — "In Progress" badge blinks */
.flow-svg-s5 .wo-progress { animation: lp-wo-blink 2s ease-in-out 0.3s infinite; }

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    #flow.flow-anim-ready .lp-flow-step,
    #flow.flow-anim-ready .lp-flow-connector,
    #flow.flow-anim-ready .lp-flow-section-hdr > *,
    #flow.flow-anim-ready .lp-flow-chips .lp-chip { animation: none !important; opacity: 1 !important; }
    #flow.flow-anim-ready .lp-flow-step.is-visible .lp-flow-num { animation: none !important; opacity: 1 !important; }
    .flow-svg-s1 .workflow-chip,
    .flow-svg-s2 .pin-1, .flow-svg-s2 .pin-2, .flow-svg-s2 .pin-3, .flow-svg-s2 .pin-4,
    .flow-svg-s3 .pipeline-arrow,
    .flow-svg-s4 .convert-arrow, .flow-svg-s4 .convert-check, .flow-svg-s4 .customer-card,
    .flow-svg-s5 .wo-progress { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
}

/* =====================================================
   JOB CARDS SECTION  (#jobs)
   ===================================================== */

.lp-jobs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.lp-job-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    padding: 0 0 24px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.lp-job-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
}
.lp-job-illo {
    width: 100%; overflow: hidden;
    background: #f8fafc;
}
.lp-job-illo svg {
    width: 100%; height: auto; display: block;
}
.lp-job-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    margin: 18px 20px 10px;
}
.lp-job-title {
    font-size: 1rem; font-weight: 800; color: #0f172a;
    margin: 0 20px 8px; letter-spacing: -.2px;
}
.lp-job-desc {
    font-size: .82rem; color: #64748b; line-height: 1.65;
    margin: 0 20px;
}
.lp-job-card--custom { border: 1.5px solid #99f6e4; background: #f0fdfa; }

.lp-jobs-cta {
    text-align: center; margin-top: 48px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.lp-jobs-cta p {
    font-size: .9rem; color: #64748b; margin: 0;
}

@media (max-width: 900px) {
    .lp-jobs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .lp-jobs-grid { grid-template-columns: 1fr; }
}


/* =====================================================
   IMPACT STATS BAR
   ===================================================== */

.lp-impact {
    background: linear-gradient(135deg, #061008 0%, #0a1e0d 60%, #061a15 100%);
    padding: 40px 32px;
    border-top: 1px solid rgba(74,222,128,.08);
    border-bottom: 1px solid rgba(74,222,128,.08);
}
.lp-impact-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 0; flex-wrap: wrap;
}
.lp-impact-stat {
    flex: 1; min-width: 160px;
    text-align: center; padding: 8px 16px;
}
.lp-impact-num {
    font-size: 2.4rem; font-weight: 900; color: #fff;
    letter-spacing: -1px; line-height: 1;
    margin-bottom: 6px;
}
.lp-impact-unit { font-size: 1.4rem; color: #4ade80; }
.lp-impact-lbl  { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 3px; }
.lp-impact-sub  { font-size: .72rem; color: rgba(255,255,255,.28); }
.lp-impact-divider {
    width: 1px; height: 52px;
    background: rgba(255,255,255,.08);
    flex-shrink: 0;
}
@media (max-width: 760px) {
    .lp-impact-inner { justify-content: center; gap: 8px; }
    .lp-impact-divider { display: none; }
    .lp-impact-stat { min-width: 140px; }
    .lp-impact-num { font-size: 1.8rem; }
}


/* =====================================================
   MOBILE APP SHOWCASE
   ===================================================== */

.lp-section--dark {
    background: linear-gradient(175deg, #0f172a 0%, #0a1e0d 50%, #0f172a 100%);
}
.lp-section--dark .lp-section-inner { max-width: 1200px; margin: 0 auto; padding: 80px 48px; }

.lp-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* ── Phone mockups cluster ── */
.lp-mobile-phones {
    position: relative;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-phone {
    position: absolute;
    width: 165px;
    border-radius: 28px;
    background: #0f172a;
    border: 2px solid #334155;
    box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
    overflow: visible;
}
.lp-phone-notch {
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 52px; height: 14px;
    background: #0f172a;
    border-radius: 0 0 10px 10px;
    z-index: 2;
    border: 2px solid #334155;
    border-top: none;
}
.lp-phone-screen {
    width: 100%;
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
}
.lp-phone-svg { display: block; width: 100%; height: auto; }

.lp-phone--back {
    transform: translateX(-70px) translateY(10px) rotate(-8deg);
    z-index: 1;
    opacity: .8;
}
.lp-phone--front {
    transform: translateX(0px) translateY(0px) rotate(0deg);
    z-index: 3;
    width: 175px;
    border-color: #4ade80;
    box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(74,222,128,.2), 0 0 40px rgba(22,163,74,.15);
}
.lp-phone--right {
    transform: translateX(72px) translateY(10px) rotate(8deg);
    z-index: 2;
    opacity: .8;
}

/* ── Text side ── */
.lp-mobile-text { padding-left: 16px; }
.lp-badge--light {
    background: rgba(74,222,128,.1);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,.2);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px;
    font-size: .72rem; font-weight: 700; letter-spacing: .3px;
    margin-bottom: 16px;
}
.lp-mobile-title {
    font-size: 2rem; font-weight: 900; color: #fff;
    letter-spacing: -.5px; line-height: 1.15;
    margin: 0 0 16px;
}
.lp-mobile-desc {
    font-size: .9rem; color: rgba(255,255,255,.5);
    line-height: 1.75; margin: 0 0 28px;
}
.lp-mobile-features {
    display: flex; flex-direction: column; gap: 18px;
    margin-bottom: 32px;
}
.lp-mobile-feat {
    display: flex; align-items: flex-start; gap: 14px;
}
.lp-mobile-feat-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    background: rgba(74,222,128,.08);
    border: 1px solid rgba(74,222,128,.18);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; color: #4ade80;
}
.lp-mobile-feat > div { display: flex; flex-direction: column; gap: 3px; }
.lp-mobile-feat strong { font-size: .86rem; font-weight: 700; color: rgba(255,255,255,.85); }
.lp-mobile-feat span   { font-size: .78rem; color: rgba(255,255,255,.35); line-height: 1.5; }
.lp-mobile-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
    .lp-mobile-grid { grid-template-columns: 1fr; gap: 48px; }
    .lp-mobile-phones { height: 360px; }
    .lp-phone--back  { transform: translateX(-55px) translateY(8px) rotate(-7deg); }
    .lp-phone--right { transform: translateX(55px) translateY(8px) rotate(7deg); }
    .lp-section--dark .lp-section-inner { padding: 56px 24px; }
    .lp-mobile-text { padding-left: 0; }
    .lp-mobile-title { font-size: 1.6rem; }
}
@media (max-width: 520px) {
    .lp-mobile-phones { height: 260px; }
    .lp-phone { width: 120px; border-radius: 20px; }
    .lp-phone--front { width: 130px; }
    .lp-phone--back  { transform: translateX(-42px) translateY(6px) rotate(-7deg); }
    .lp-phone--right { transform: translateX(42px) translateY(6px) rotate(7deg); }
}


/* =====================================================
   TESTIMONIALS
   ===================================================== */

.lp-testi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.lp-testi-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px 28px 24px;
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s;
    position: relative;
}
.lp-testi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.lp-testi-card--featured {
    background: linear-gradient(135deg, #f0fdf4, #fff);
    border-color: #bbf7d0;
    box-shadow: 0 4px 20px rgba(22,163,74,.1);
}
.lp-testi-quote {
    font-size: 4rem; line-height: .8;
    color: #16a34a; font-weight: 900;
    opacity: .2; margin-bottom: 4px;
    font-family: Georgia, serif;
}
.lp-testi-card--featured .lp-testi-quote { opacity: .35; }
.lp-testi-text {
    font-size: .88rem; color: #334155;
    line-height: 1.75; flex: 1;
    margin: 0 0 16px;
}
.lp-testi-stars {
    display: flex; gap: 3px; margin-bottom: 16px;
    color: #f59e0b; font-size: .85rem;
}
.lp-testi-author {
    display: flex; align-items: center; gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}
.lp-testi-card--featured .lp-testi-author { border-top-color: #dcfce7; }
.lp-testi-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    flex-shrink: 0; overflow: hidden;
}
.lp-testi-avatar svg { width: 100%; height: 100%; display: block; }
.lp-testi-name { font-size: .86rem; font-weight: 700; color: #0f172a; }
.lp-testi-role { font-size: .74rem; color: #64748b; margin-top: 2px; }

@media (max-width: 740px) {
    .lp-testi-grid { grid-template-columns: 1fr; }
}


/* =====================================================
   FAQ
   ===================================================== */

.lp-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
    align-items: start;
}
.lp-faq-col { display: flex; flex-direction: column; gap: 16px; }
.lp-faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.lp-faq-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.lp-faq-q {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 16px 20px;
    font-size: .88rem; font-weight: 700; color: #0f172a;
    line-height: 1.4;
    cursor: default;
}
.lp-faq-icon { color: #16a34a; flex-shrink: 0; margin-top: 2px; font-size: .7rem; }
.lp-faq-a {
    padding: 0 20px 16px 38px;
    font-size: .83rem; color: #475569;
    line-height: 1.7; margin: 0;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

@media (max-width: 760px) {
    .lp-faq-grid { grid-template-columns: 1fr; }
}