*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { font-family: 'Roboto', sans-serif; }

/* ══════════════════════════════════════
   FULL-PAGE WRAPPER
══════════════════════════════════════ */
.lp-wrap { height: 100vh; display: flex; }

/* ══════════════════════════════════════
   LEFT PANEL  — 60%
══════════════════════════════════════ */
.lp-brand {
    flex: 0 0 60%;
    background:
        radial-gradient(ellipse at 85% 4%, rgba(233,30,99,.6) 0%, transparent 46%),
        linear-gradient(155deg, #0c001e 0%, #250040 28%, #6a004e 62%, #be0060 100%);
    position: relative;
    overflow: visible;
    z-index: 1;
}
.lp-brand::after {
    content: '';
    position: absolute;
    width: 320px; height: 320px; border-radius: 50%;
    background: rgba(255,255,255,.03);
    bottom: -90px; left: 35%; pointer-events: none; z-index: 0;
}

/* ── two-column row inside each slide ── */
.lp-slide-row {
    display: flex; width: 100%; height: 100%;
}

/* ── Slide 1: text column ── */
.lp-brand-text {
    flex: 0 0 46%;
    display: flex; flex-direction: column; justify-content: center;
    padding: 36px 14px 36px 52px;
    overflow-y: auto; scrollbar-width: none; min-width: 0;
    position: relative; z-index: 1;
}
.lp-brand-text::-webkit-scrollbar { display: none; }

/* ── Slide 1: dashboard image column ── */
.lp-dash-col {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 16px 8px; min-width: 0;
    overflow: hidden; position: relative; z-index: 2;
}
.lp-dash-img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center center;
    display: block;
}

.lp-logo-wrap { align-self: flex-start; margin-bottom: 18px; }
.lp-logo { height: 50px; width: auto; display: block; }

.lp-brand-head { align-self: flex-start; margin-bottom: 18px; }
.lp-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(233,30,99,.18);
    border: 1px solid rgba(233,30,99,.45);
    color: #f9a8d4;
    font-size: .72rem; font-weight: 600; letter-spacing: .5px;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(233,30,99,.25);
}

.lp-brand-text h1 {
    color: #fff; font-size: 1.52rem; font-weight: 800;
    line-height: 1.2; letter-spacing: -.3px; margin-bottom: 7px;
}
.lp-tagline {
    color: rgba(255,255,255,.6); font-size: .76rem;
    line-height: 1.6; margin-bottom: 14px;
}

.lp-feats { list-style: none; margin-bottom: 14px; }
.lp-feats li {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; margin-bottom: 6px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
}
.lp-fi {
    width: 40px; height: 40px; flex-shrink: 0;
    background: rgba(255,255,255,.15); border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px;
}
.lp-feat-text strong { display: block; color: #fff; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.lp-feat-text span   { color: rgba(255,255,255,.55); font-size: .68rem; }

.lp-stats {
    display: flex; align-items: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px; padding: 8px 10px; margin-bottom: 12px;
}
.lp-stat        { flex: 1; text-align: center; }
.lp-stat strong { display: block; color: #fff; font-size: .85rem; font-weight: 700; }
.lp-stat span   { color: rgba(255,255,255,.48); font-size: .62rem; }
.lp-stat-sep    { width: 1px; height: 24px; background: rgba(255,255,255,.18); }

.lp-store-lbl { color: rgba(255,255,255,.45); font-size: .67rem; letter-spacing: .3px; margin-bottom: 7px; }
.lp-store-row { display: flex; align-items: center; gap: 8px; }
.lp-store-btn {
    display: flex; align-items: center; gap: 8px;
    background: #111827; color: #fff;
    border-radius: 9px; padding: 7px 13px;
    text-decoration: none !important;
    border: 1px solid #374151;
    transition: background .2s, transform .15s;
}
.lp-store-btn:hover { background: #1f2937; transform: translateY(-1px); }
.lp-store-icon { font-size: 18px; color: #fff; flex-shrink: 0; }
.lp-store-txt span   { display: block; font-size: .56rem; color: rgba(255,255,255,.65); line-height: 1.2; }
.lp-store-txt strong { display: block; font-size: .8rem; font-weight: 600; color: #fff; line-height: 1.3; }

/* ── full-panel carousel slides ── */
.ms-slide {
    position: absolute; inset: 0;
    opacity: 0; transform: translateX(20px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
}
.ms-slide.ms-active { opacity: 1; transform: translateX(0); pointer-events: auto; }

/* ── Slide 2: PM text column ── */
.lp-pm-slide {
    background: linear-gradient(155deg, #f0f7ff 0%, #daeef9 30%, #c2e4f5 65%, #a8d8ee 100%);
}
.lp-pm-text {
    flex: 0 0 50%;
    display: flex; flex-direction: column; justify-content: center;
    padding: 30px 14px 30px 44px;
    overflow-y: auto; scrollbar-width: none; min-width: 0;
}
.lp-pm-text::-webkit-scrollbar { display: none; }
.lp-pm-logo-wrap { margin-bottom: 10px; }
.lp-pm-logo { height: 44px; width: auto; display: block; }

.lp-pm-heading {
    color: #0d3d52; font-size: 1.6rem; font-weight: 900;
    letter-spacing: -.5px; margin-bottom: 4px; line-height: 1;
}
.lp-pm-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 50%;
    background: #0d3d52; color: #fff;
    text-align: center; line-height: 1.2;
    font-size: .58rem; margin-bottom: 8px;
    box-shadow: 0 4px 16px rgba(13,61,82,.3);
}
.lp-pm-badge strong { display: block; font-size: 1rem; font-weight: 900; }
.lp-pm-sub {
    color: #1a5570; font-size: .95rem; font-weight: 600;
    line-height: 1.4; margin-bottom: 14px;
}
.lp-pm-sub span { color: #2a8898; }

.lp-pm-feats { list-style: none; margin-bottom: 14px; }
.lp-pm-feats li {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; margin-bottom: 6px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(13,61,82,.12);
    border-radius: 10px;
}
.lp-pm-fi {
    width: 36px; height: 36px; flex-shrink: 0;
    background: #0d3d52; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px;
}
.lp-pm-feats strong { display: block; color: #0d3d52; font-size: .82rem; font-weight: 700; line-height: 1.3; }
.lp-pm-feats span   { color: #4a7a8a; font-size: .72rem; }

/* ── Slide 2: PM image column ── */
.lp-pm-img-col {
    flex: 1; overflow: hidden; min-width: 0;
}
.lp-pm-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    display: block;
}

/* carousel dots — centered at the bottom of the left panel */
.lp-mock-dots {
    position: absolute; bottom: 18px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px;
    z-index: 10;
}
.ms-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.4); cursor: pointer;
    transition: all .22s;
}
.ms-dot.ms-dot-active { background: #fff; width: 18px; border-radius: 3px; }

/* ══════════════════════════════════════
   RIGHT PANEL
══════════════════════════════════════ */
.lp-right {
    flex: 1;
    background: #f4f5f7;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 28px 16px;
    position: relative; z-index: 3;
}
.lp-card {
    width: 92%; max-width: 440px;
    background: #fff; border-radius: 20px; padding: 44px 36px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
    border: 1px solid #eef0f4;
}
.lp-card h2 {
    color: #111827; font-size: 1.65rem; font-weight: 800;
    letter-spacing: -.4px; text-align: center; margin-bottom: 4px;
}
.lp-card-sub { color: #9ca3af; font-size: .81rem; text-align: center; margin-bottom: 28px; }

.lp-field { margin-bottom: 16px; }
.lp-lbl { display: block; color: #374151; font-size: .7rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 5px; }
.lp-iw { position: relative; }
.lp-in-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 13px; z-index: 3; pointer-events: none; }

.lp-card .lp-iw input,
.lp-card .lp-iw input.form-control {
    display: block !important; width: 100% !important;
    padding: 13px 14px !important;
    background: #f9fafb !important; border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important; color: #111827 !important;
    font-size: .875rem !important; font-family: 'Roboto', sans-serif !important;
    outline: none !important; box-shadow: none !important;
    transition: border-color .18s, box-shadow .18s !important;
    -webkit-appearance: none !important; appearance: none !important;
}
.lp-card .lp-iw-icon input,
.lp-card .lp-iw-icon input.form-control { padding-left: 40px !important; }
.lp-card .lp-iw input:focus,
.lp-card .lp-iw input.form-control:focus {
    border-color: #e91e63 !important;
    box-shadow: 0 0 0 3px rgba(233,30,99,.08) !important;
    background: #fff !important;
}
.lp-card .lp-iw input::placeholder { color: #d1d5db !important; }
.lp-card .lp-iw input:-webkit-autofill,
.lp-card .lp-iw input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f9fafb inset !important;
    -webkit-text-fill-color: #111827 !important;
    transition: background-color 9999s ease 0s;
}
.lp-eye {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; cursor: pointer; font-size: 13px; z-index: 3;
    transition: color .18s; line-height: 1;
}
.lp-eye:hover { color: #e91e63; }
.lp-card .lp-iw input[type="password"],
.lp-card .lp-iw input#password { padding-right: 38px !important; }

.lp-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 22px; }
.lp-row label { display: flex; align-items: center; gap: 7px; color: #6b7280; font-size: .81rem; cursor: pointer; }
.lp-row input[type="checkbox"] { accent-color: #e91e63; width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
a.lp-fp { color: #e91e63 !important; font-size: .81rem; text-decoration: none !important; transition: opacity .18s; }
a.lp-fp:hover { opacity: .7; }

.lp-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px; background: #e91e63; color: #fff;
    border: none; border-radius: 10px;
    font-size: .92rem; font-weight: 600; letter-spacing: .3px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(233,30,99,.3); transition: all .2s;
}
.lp-btn:hover { background: #c2185b; box-shadow: 0 6px 22px rgba(233,30,99,.42); transform: translateY(-1px); }
.lp-btn:active { transform: none; }
.lp-btn:disabled { opacity: .55; transform: none; cursor: not-allowed; box-shadow: none; }

#login-error-text { font-size: .8rem; font-weight: 500; text-align: center; margin-top: 8px; }
#otp-error-msg    { font-size: .8rem; font-weight: 500; margin-top: 6px; text-align: center; }

.lp-otp-info { text-align: center; padding: 4px 0 12px; }
.lp-otp-info .oi { font-size: 1.75rem; line-height: 1; margin-bottom: 6px; }
.lp-otp-info h4  { color: #111827; font-size: .9rem; font-weight: 600; margin-bottom: 3px; }
.lp-otp-info p   { color: #9ca3af; font-size: .76rem; }
#resend_otp_section { text-align: center; font-size: .78rem; color: #9ca3af; margin-top: 6px; }
#resend-link { text-decoration: none !important; cursor: pointer; }

.lp-ok { display: flex; align-items: center; gap: 10px; background: #f0fdf4; border: 1px solid #86efac; border-radius: 9px; padding: 10px 14px; color: #166534; font-size: .84rem; font-weight: 500; }
.lp-ok img { width: 26px; flex-shrink: 0; }

.lp-fp-title { display: flex; align-items: center; gap: 10px; color: #111827; font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
.lp-back { display: inline-flex; align-items: center; gap: 5px; background: #fce4ec; border: 1px solid #f48fb1; color: #c2185b !important; text-decoration: none !important; border-radius: 7px; padding: 4px 10px; font-size: .75rem; cursor: pointer; transition: background .18s; flex-shrink: 0; }
.lp-back:hover { background: #f8bbd9; }
.lp-fp-sub { color: #9ca3af; font-size: .78rem; margin-bottom: 18px; }

.lp-or { position: relative; text-align: center; color: #9ca3af; font-size: .74rem; margin: 15px 0 12px; }
.lp-or::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e5e7eb; }
.lp-or span { position: relative; background: #fff; padding: 0 12px; }

.lp-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 13px; }
.lp-soc-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 9px; color: #374151; font-size: .81rem; font-weight: 500; cursor: pointer; font-family: 'Roboto', sans-serif; transition: border-color .18s, box-shadow .18s; }
.lp-soc-btn:hover { border-color: #d1d5db; box-shadow: 0 2px 8px rgba(0,0,0,.07); }

.lp-contact { text-align: center; font-size: .77rem; color: #9ca3af; }
.lp-contact a { color: #e91e63 !important; text-decoration: none !important; font-weight: 500; }
.lp-contact a:hover { opacity: .8; }

/* colorful Google Play icon */
.lp-gplay-icon {
    background: linear-gradient(135deg, #00d4ff 0%, #00c853 30%, #ffd600 65%, #ff1744 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* right panel logo */
.lp-right-logo { margin-bottom: 18px; text-align: center; }
.lp-right-logo-img { height: 44px; width: auto; display: inline-block; }

/* support strip */
.lp-support {
    width: 92%; max-width: 440px; margin-top: 12px;
    background: #fff; border: 1px solid #eef0f4;
    border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.lp-support-top {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.lp-support-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #e91e63; font-size: 14px;
}
.lp-support-title { color: #111827; font-size: .8rem; font-weight: 600; }
.lp-support-title span { color: #9ca3af; font-size: .72rem; font-weight: 400; margin-left: 4px; }
.lp-support-actions { display: flex; gap: 8px; }
.lp-support-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 10px; border-radius: 9px;
    background: #f9fafb; border: 1px solid #e5e7eb;
    color: #374151; font-size: .72rem; font-weight: 500;
    text-decoration: none !important; white-space: nowrap; overflow: hidden;
    transition: background .18s, color .18s, border-color .18s;
}
.lp-support-btn i { font-size: 11px; color: #e91e63; flex-shrink: 0; }
.lp-support-btn:hover { background: #fce4ec; border-color: #f48fb1; color: #e91e63; }
.lp-support-btn:hover i { color: #e91e63; }

.lp-footer { color: #9ca3af; font-size: .67rem; margin-top: 10px; text-align: center; }
.lp-footer a { color: #6b7280; text-decoration: none; }
.lp-footer a:hover { color: #e91e63; }


/* ══════════════════════════════════════
   Slide-1: CRM Analytics Widget Cards
══════════════════════════════════════ */
.lp-crm-col { overflow: visible !important; }

.crm-scene {
    position: relative;
    width: 460px; height: 478px;
    flex-shrink: 0;
    transform-origin: center center;
}
.crm-card {
    position: absolute;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 28px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
    padding: 13px 14px;
}

/* ── Card positions (9 cards, no overlaps) ──
   Row 1 (top):    C1  C2  C3
   Row 2 (tall):   C4      C5
   Row 3 (bottom): C6  C7  C8  C9
*/
.crm-c1 { top:0;     left:0;     width:112px; }
.crm-c2 { top:0;     left:126px; width:210px; }
.crm-c3 { top:0;     right:0;    width:110px; text-align:center; }
.crm-c4 { top:134px; left:0;     width:196px; min-height:218px; }
.crm-c5 { top:148px; right:0;    width:254px; min-height:218px; }
.crm-c6 { bottom:0;  left:0;     width:108px; }
.crm-c7 { bottom:0;  left:116px; width:108px; }
.crm-c8 { bottom:0;  left:232px; width:110px; }
.crm-c9 { bottom:0;  right:0;    width:110px; }

/* ── shared typography ── */
.crm-card-hdg { font-size:.76rem; font-weight:700; color:#111827; margin-bottom:9px; }
.crm-kpi-num  { font-size:1.2rem; font-weight:800; color:#111827; line-height:1.1; }
.crm-kpi-lbl  { font-size:.6rem; color:#9ca3af; margin-top:2px; }
.crm-delta    { font-size:.58rem; font-weight:500; margin-top:5px; }
.crm-up       { color:#10b981; }

/* ── KPI icon pill ── */
.crm-kpi-icon {
    width:30px; height:30px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; margin-bottom:7px;
}
.crm-icon-blue  { background:#dbeafe; color:#2563eb; }
.crm-icon-green { background:#dcfce7; color:#16a34a; }
.crm-icon-amber { background:#fef3c7; color:#d97706; }
.crm-icon-teal  { background:#ccfbf1; color:#0d9488; }

/* ── Card 2: Total Sales ── */
.crm-c2-head {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:4px;
}
.crm-yr-badge {
    background:#fce7f3; color:#db2777;
    font-size:.54rem; font-weight:700;
    padding:2px 7px; border-radius:10px;
}
.crm-sales-val { font-size:1.3rem; font-weight:800; color:#111827; line-height:1; margin-bottom:6px; }
.crm-spark     { width:100%; height:22px; display:block; margin-bottom:4px; }

/* ── Card 3: Conversion Ring ── */
.crm-ring-wrap {
    position:relative; width:60px; height:60px;
    margin:0 auto 6px;
}
.crm-ring-svg { width:60px; height:60px; display:block; }
.crm-ring-val {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-size:.72rem; font-weight:800; color:#111827; line-height:1;
}

/* ── Card 4: Sales Pipeline ── */
.crm-pipe-row {
    display:flex; align-items:center; gap:6px;
    margin-bottom:8px;
}
.crm-pipe-lbl { font-size:.58rem; color:#6b7280; width:44px; flex-shrink:0; }
.crm-pipe-bar { flex:1; height:5px; background:#f3f4f6; border-radius:3px; overflow:hidden; }
.crm-pipe-fill { height:100%; border-radius:3px; }
.crm-pipe-val { font-size:.6rem; font-weight:600; color:#374151; flex-shrink:0; min-width:26px; text-align:right; }
.crm-pipe-foot {
    display:flex; justify-content:space-between; align-items:center;
    padding-top:9px; border-top:1px solid #f3f4f6; margin-top:4px;
    font-size:.58rem; color:#9ca3af;
}
.crm-pipe-foot strong { color:#e91e63; font-size:.68rem; }

/* ── Card 5: Top Performance ── */
.crm-top-row {
    display:flex; align-items:center; gap:6px;
    padding:5px 6px; border-radius:8px; margin-bottom:5px;
}
.crm-top-gold   { background:#fffbeb; }
.crm-top-silver { background:#f8fafc; }
.crm-top-bronze { background:#faf5ff; }
.crm-medal    { font-size:13px; flex-shrink:0; line-height:1; }
.crm-top-info { flex:1; min-width:0; }
.crm-top-name { font-size:.6rem; font-weight:600; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-top-sub  { font-size:.54rem; color:#9ca3af; }
.crm-top-amt  { font-size:.62rem; font-weight:700; color:#e91e63; flex-shrink:0; }
.crm-best-month {
    font-size:.57rem; color:#9ca3af;
    padding-top:7px; border-top:1px solid #f3f4f6; margin-top:6px;
}
.crm-best-month strong { color:#374151; }

/* ── Card 7: Campaigns ── */
.crm-camp-row { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.crm-camp-icon {
    width:28px; height:28px; border-radius:7px;
    background:#fce7f3; color:#db2777;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; flex-shrink:0;
}
.crm-camp-rate {
    font-size:.6rem; font-weight:600; color:#16a34a;
    background:#dcfce7; padding:4px 6px;
    border-radius:7px; text-align:center;
}

/* ── CRM Responsive scaling ── */
@media (max-width:1420px) { .crm-scene { transform:scale(.9);  } }
@media (max-width:1220px) { .crm-scene { transform:scale(.78); } }
@media (max-width:1060px) { .crm-scene { transform:scale(.66); } }

/* ══════════════════════════════════════
   Slide-2: PM Mobile App Widget Cards
══════════════════════════════════════ */
.lp-pm-widget-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}
.pm-scene {
    position: relative;
    width: 420px; height: 480px;
    flex-shrink: 0;
    transform-origin: center center;
}
.pm-card {
    position: absolute;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(13,61,82,.11), 0 1px 5px rgba(13,61,82,.06);
    padding: 13px 14px;
}

/* ── positions ── */
.pm-c1 { top:0;     left:0;     width:114px; }
.pm-c2 { top:0;     left:130px; width:170px; }
.pm-c3 { top:0;     right:0;    width:108px; }
.pm-c4 { top:150px; left:0;     width:198px; min-height:200px; }
.pm-c5 { top:150px; right:0;    width:214px; min-height:200px; }
.pm-c6 { bottom:0;  left:195px; width:104px; text-align:center; }
.pm-c7 { bottom:0;  right:0;    width:118px; }

/* ── shared ── */
.pm-card-hdg { font-size:.76rem; font-weight:700; color:#0d3d52; margin-bottom:9px; }
.pm-kpi-num  { font-size:1.18rem; font-weight:800; color:#0d3d52; line-height:1.1; }
.pm-kpi-lbl  { font-size:.6rem; color:#9ca3af; margin-top:3px; }
.pm-kpi-icon {
    width:30px; height:30px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; margin-bottom:7px;
}
.pm-icon-teal { background:#ccfbf1; color:#0d9488; }
.pm-icon-gold { background:#fef3c7; color:#d97706; }

/* ── Card 2: Featured Project ── */
.pm-feat-name { font-size:.8rem; font-weight:700; color:#0d3d52; margin-bottom:2px; }
.pm-feat-meta { font-size:.56rem; color:#9ca3af; margin-bottom:8px; }
.pm-prog-wrap { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.pm-prog-bar  { flex:1; height:6px; background:#e0f2f0; border-radius:3px; overflow:hidden; }
.pm-prog-fill { height:100%; background:#0d9488; border-radius:3px; }
.pm-prog-pct  { font-size:.62rem; font-weight:700; color:#0d3d52; flex-shrink:0; }
.pm-status-badge {
    display:inline-block; background:#0d3d52; color:#fff;
    font-size:.55rem; font-weight:600; padding:3px 9px; border-radius:10px;
}

/* ── Card 3: Attendance ── */
.pm-att-row { display:flex; align-items:center; gap:8px; padding:5px 0; }
.pm-att-ic  { font-size:16px; flex-shrink:0; }
.pm-att-present .pm-att-ic { color:#4d7c56; }
.pm-att-absent  .pm-att-ic { color:#b91c1c; }
.pm-att-num { font-size:1rem; font-weight:800; color:#0d3d52; line-height:1; }
.pm-att-lbl { font-size:.57rem; color:#9ca3af; }
.pm-att-sep { height:1px; background:#f3f4f6; margin:3px 0; }

/* ── Card 4: Project list ── */
.pm-plist-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:9px; }
.pm-dot {
    width:8px; height:8px; border-radius:50%;
    flex-shrink:0; margin-top:4px;
}
.pm-dot-orange { background:#f59e0b; }
.pm-dot-teal   { background:#0d9488; }
.pm-dot-purple { background:#8b5cf6; }
.pm-dot-blue   { background:#3b82f6; }
.pm-plist-info  { flex:1; min-width:0; }
.pm-plist-name  { font-size:.63rem; font-weight:600; color:#0d3d52; margin-bottom:3px; }
.pm-plist-date  { font-size:.56rem; color:#9ca3af; }
.pm-plist-prog  { display:flex; align-items:center; gap:5px; }
.pm-plist-prog > div {
    flex:1; height:4px; background:#e0f2f0; border-radius:2px; overflow:hidden;
}
.pm-plist-prog > div > div { height:100%; border-radius:2px; }
.pm-plist-prog > span { font-size:.54rem; color:#0d9488; font-weight:600; flex-shrink:0; }
.pm-mini-badge {
    display:inline-block; font-size:.53rem; font-weight:600;
    padding:2px 6px; border-radius:6px;
}
.pm-badge-ns { background:#fef3c7; color:#b45309; }
.pm-badge-fo { background:#ede9fe; color:#7c3aed; }

/* ── Card 5: Job Hours ── */
.pm-jh-project { display:flex; align-items:center; gap:5px; font-size:.62rem; font-weight:600; color:#0d3d52; margin-bottom:2px; }
.pm-jh-job     { font-size:.54rem; color:#9ca3af; margin-bottom:7px; }
.pm-jh-table   { width:100%; }
.pm-jh-head, .pm-jh-row, .pm-jh-total {
    display:grid; grid-template-columns:1fr 1fr 36px;
    gap:2px; padding:4px 0; font-size:.57rem;
}
.pm-jh-head  { color:#9ca3af; font-weight:600; border-bottom:1px solid #f3f4f6; padding-bottom:5px; margin-bottom:1px; }
.pm-jh-row   { color:#374151; border-bottom:1px solid #f9fafb; }
.pm-jh-total { font-weight:700; color:#0d3d52; border-top:1px solid #f3f4f6; margin-top:2px; padding-top:5px; }
.pm-jh-h     { font-weight:700; color:#0d9488; text-align:right; }

/* ── Card 7: Check-In / Out ── */
.pm-ci-pair { display:flex; gap:6px; margin-bottom:7px; }
.pm-ci-block { flex:1; }
.pm-ci-lbl  { font-size:.5rem; font-weight:700; letter-spacing:.5px; margin-bottom:2px; }
.pm-ci-in  .pm-ci-lbl { color:#0d9488; }
.pm-ci-out .pm-ci-lbl { color:#e91e63; }
.pm-ci-time { font-size:.72rem; font-weight:800; color:#0d3d52; }
.pm-ci-total { font-size:.57rem; color:#9ca3af; text-align:center; padding-top:6px; border-top:1px solid #f3f4f6; }

/* ── PM Responsive scaling ── */
@media (max-width:1380px) { .pm-scene { transform:scale(.88); } }
@media (max-width:1160px) { .pm-scene { transform:scale(.76); } }
@media (max-width:1020px) { .pm-scene { transform:scale(.65); } }

@media (max-width: 960px) {
    .lp-brand { display: none; }
    html, body { overflow: auto; }
    .lp-wrap  { height: auto; min-height: 100vh; }
    .lp-right { padding: 24px 16px; }
    .lp-card  { padding: 32px 22px; border-radius: 16px; width: 100%; }
}