:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --green: #10b981;
  --red: #ef4444;
  --orange: #f59e0b;
  --purple: #8b5cf6;
  --grad: linear-gradient(135deg,#4f46e5,#8b5cf6);
  --grad-green: linear-gradient(135deg,#10b981,#4f46e5);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}

/* ---- GRADIENT TEXT ---- */
.grad{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:50px;font-family:inherit;font-weight:600;font-size:.95rem;cursor:pointer;border:none;transition:all .25s;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(59,130,246,.35);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(59,130,246,.45);}
.btn-primary:disabled{opacity:.55;transform:none;cursor:not-allowed;}
.btn-checkout{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;box-shadow:0 4px 14px rgba(245,158,11,.35);}
.btn-checkout:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(245,158,11,.45);}
.btn-checkout:disabled{opacity:.55;transform:none;cursor:not-allowed;}
.full-width{width:100%;justify-content:center;}

/* ---- FORM ---- */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:7px;font-weight:500;}
.form-group input, .form-group select{width:100%;padding:12px 14px;background:#ffffff;border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:inherit;font-size:.95rem;outline:none;transition:border .2s;color-scheme:light;}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{border-color:var(--primary);box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px;}
.form-group select option{background:#ffffff;color:var(--text);padding:12px;}
.form-group textarea{width:100%;padding:12px 14px;background:#ffffff;border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:inherit;font-size:.95rem;outline:none;transition:border .2s;resize:vertical;color-scheme:light;}

/* ===================== LOGIN ===================== */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:20px;}
.login-bg-blob{position:absolute;border-radius:50%;filter:blur(100px);z-index:0;opacity:.35;}
.blob1{width:500px;height:500px;background:#3b82f6;top:-150px;left:-150px;}
.blob2{width:400px;height:400px;background:#8b5cf6;bottom:-100px;right:-100px;}
.login-card{position:relative;z-index:1;background:#ffffff;border:1px solid var(--border);border-radius:28px;padding:48px 40px;width:100%;max-width:420px;text-align:center;box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.02);}
.login-logo{font-size:1.6rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;}
.login-logo i{font-size:2rem;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.login-badge{display:inline-block;padding:5px 16px;background:rgba(16,185,129,.1);color:var(--green);border:1px solid rgba(16,185,129,.2);border-radius:20px;font-size:.8rem;font-weight:600;margin-bottom:24px;}
.login-title{font-size:1.8rem;font-weight:800;margin-bottom:8px;}
.login-sub{color:var(--muted);font-size:.9rem;margin-bottom:28px;}
.phone-input-wrap{display:flex;align-items:center;background:#ffffff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border .2s;}
.phone-input-wrap:focus-within{border-color:var(--primary);}
.phone-prefix{padding:12px 14px;color:var(--muted);font-weight:600;font-size:.95rem;border-right:1px solid var(--border);background:#f8fafc;}
.phone-input-wrap input{border:none;border-radius:0;background:transparent;padding:12px 14px;flex:1;}
.phone-input-wrap input:focus{border-color:transparent;}
.login-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:var(--red);border-radius:10px;padding:10px 14px;font-size:.85rem;margin-bottom:16px;text-align:left;}
.back-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px;color:var(--muted);font-size:.85rem;text-decoration:none;transition:color .2s;}
.back-link:hover{color:var(--text);}

/* ===================== APP ===================== */
.emp-app{display:flex;flex-direction:column;min-height:100vh;}
.emp-topbar{display:flex;align-items:center;gap:12px;padding:14px 20px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;}
.emp-logo{font-size:1.2rem;font-weight:800;display:flex;align-items:center;gap:8px;}
.emp-logo i{font-size:1.4rem;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.emp-user-info{display:flex;align-items:center;gap:10px;margin-left:auto;}
.emp-avatar{width:36px;height:36px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;flex-shrink:0;color:#fff;}
.emp-name{font-size:.9rem;font-weight:600;line-height:1.2;}
.emp-role{font-size:.75rem;color:var(--muted);}
.logout-btn{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.2);padding:8px 14px;border-radius:20px;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s;margin-left:8px;}
.logout-btn:hover{background:rgba(239,68,68,.2);}
.logout-btn.locked{background:rgba(100,100,100,.1);color:var(--muted,#9ca3af);border-color:rgba(100,100,100,.2);cursor:not-allowed;opacity:.7;}
.logout-btn.locked:hover{background:rgba(100,100,100,.15);}
.logout-btn.locked::before{content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900;margin-right:4px;font-size:.8rem;}

/* BOTTOM NAV */
.emp-nav{display:flex;background:rgba(255,255,255,.95);border-top:1px solid var(--border);position:fixed;bottom:0;left:0;right:0;z-index:100;}
.emp-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:none;border:none;color:var(--muted);font-family:inherit;font-size:.75rem;font-weight:500;cursor:pointer;transition:color .2s;}
.emp-nav-btn i{font-size:1.2rem;}
.emp-nav-btn.active{color:var(--primary);}
.emp-nav-btn.active i{filter:drop-shadow(0 0 6px rgba(79,70,229,.35));}

/* MAIN */
.emp-main{flex:1;padding:20px 16px 90px;max-width:640px;margin:0 auto;width:100%;}
.emp-tab{display:none;animation:fadeUp .35s ease;}
.emp-tab.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

/* CARDS */
.emp-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;margin-bottom:18px;}
.emp-card h3{font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.emp-card h3 i{color:var(--primary);}

/* GREETING */
.greeting-card{background:var(--grad);color:#ffffff !important;border-radius:20px;padding:24px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;}
.greeting-card, .greeting-card *{color:#ffffff !important;}
.greeting-card > div:first-child{flex:1;min-width:0;word-break:break-word;}
.greeting-text{font-size:.85rem;opacity:.8;margin-bottom:4px;}
.greeting-name{font-size:1.6rem;font-weight:800;margin-bottom:6px;}
.greeting-branch{font-size:.85rem;opacity:.75;display:flex;align-items:center;gap:6px;}
.greeting-icon{font-size:3rem;opacity:.25;}

/* MINI STATS */
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
.mini-stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 8px;text-align:center;}
.mini-stat i{font-size:1.2rem;color:var(--primary);margin-bottom:8px;display:block;}
.mini-num{display:block;font-size:1.15rem;font-weight:800;line-height:1;}
.mini-label{display:block;font-size:.68rem;color:var(--muted);margin-top:4px;}

/* CALENDAR */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-day-label{text-align:center;font-size:.7rem;color:var(--muted);padding:4px 0;font-weight:600;}
.cal-day{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600;background:#f1f5f9;color:var(--muted);}
.cal-day.present{background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.2);}
.cal-day.today{background:rgba(79,70,229,.12);color:var(--primary);border:1px solid rgba(79,70,229,.3);box-shadow:0 0 8px rgba(79,70,229,.15);}
.cal-day.today.present{background:rgba(16,185,129,.18);color:var(--green);border-color:var(--green);}
.cal-day.absent{background:rgba(239,68,68,.06);color:rgba(239,68,68,.6);}
.cal-day.leave{background:rgba(139,92,246,0.12);color:var(--purple);border:1px solid rgba(139,92,246,0.2);}
.cal-day.empty{background:transparent;}

/* TABLE */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive::-webkit-scrollbar {
  height: 4px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg,#3b82f6,#8b5cf6);
  border-radius: 10px;
}

.emp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem;}
.emp-table th{text-align:center;padding:14px 16px;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.6px;border-bottom:2px solid var(--border);background:rgba(0,0,0,0.015);}
.emp-table td{text-align:center;padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle;}
.emp-table tr:hover td{background:rgba(0,0,0,.01);}
.emp-table tr:last-child td{border-bottom:none;}
.emp-empty{text-align:center;color:var(--muted);padding:24px!important;}
.badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;white-space:nowrap;vertical-align:middle;}
.badge-green{background:rgba(16,185,129,.12);color:var(--green);}
.badge-blue{background:rgba(59,130,246,.12);color:var(--primary);}
.badge-red{background:rgba(239,68,68,.1);color:var(--red);}
.badge-orange{background:rgba(245,158,11,.12);color:var(--orange);}

/* FACE SCANNER */
.emp-scanner{position:relative;width:180px;height:180px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;background:#f8fafc;border-radius:20px;overflow:hidden;border:2px solid var(--border);}
.scan-ring{position:absolute;width:150px;height:150px;border-radius:50%;border:2px solid rgba(79,70,229,.3);}
.scan-icon{font-size:4.5rem;color:rgba(0,0,0,.04);z-index:1;}
.scan-bar{position:absolute;width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--primary),transparent);top:0;animation:scanDown 2s infinite linear;opacity:0;}
@keyframes scanDown{0%{top:0;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{top:100%;opacity:0;}}
.emp-scanner.scanning .scan-bar{opacity:1;}
.emp-scanner.scanning .scan-ring{border-color:var(--primary);animation:pring 1s infinite;}
.emp-scanner.success .scan-ring{border-color:var(--green);}
.emp-scanner.fail .scan-ring{border-color:var(--red);}
@keyframes pring{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.4);}50%{box-shadow:0 0 0 10px rgba(59,130,246,0);}}
#empWebcam{position:absolute;width:100%;height:100%;object-fit:cover;border-radius:18px;opacity:0;transition:opacity .4s;}
#empWebcam.active{opacity:1;}

/* GPS PILL */
.gps-pill{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:20px;background:#ffffff;border:1px solid var(--border);font-size:.83rem;color:var(--muted);}
.gps-pill.ok{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.25);color:var(--green);}
.gps-pill.fail{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:var(--red);}

/* CHECK-IN MSG */
.checkin-msg{margin-top:12px;padding:12px 14px;border-radius:12px;font-size:.87rem;display:none;}
.checkin-msg.ok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);color:var(--green);display:block;}
.checkin-msg.fail{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:var(--red);display:block;}
.checkin-msg.info{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);color:#93c5fd;display:block;}

/* PAYROLL SUMMARY */
.payroll-summary-card{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(59,130,246,.1));border:1px solid rgba(16,185,129,.2);border-radius:20px;padding:24px;margin-bottom:18px;}
.ps-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.ps-title{font-size:.85rem;color:var(--muted);}
.ps-month{font-size:.95rem;font-weight:600;margin-top:2px;}
.ps-icon{font-size:2rem;color:var(--green);opacity:.4;}
.ps-amount{font-size:2.4rem;font-weight:800;color:var(--green);margin-bottom:16px;}
.ps-breakdown{display:flex;flex-wrap:wrap;gap:8px;}
.ps-chip{padding:5px 12px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:20px;font-size:.78rem;color:var(--muted);}
.ps-chip span{color:var(--text);font-weight:600;}

/* SLIP CARD */
.slip-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;}
.slip-card-left{}
.slip-card-name{font-weight:600;margin-bottom:3px;}
.slip-card-meta{font-size:.8rem;color:var(--muted);}
.slip-card-right{text-align:right;}
.slip-card-net{font-size:1.1rem;font-weight:800;color:var(--green);}
.slip-card-print{background:rgba(59,130,246,.1);color:var(--primary);border:1px solid rgba(59,130,246,.2);padding:6px 14px;border-radius:20px;font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:6px;}
.slip-card-print:hover{background:rgba(59,130,246,.2);}

/* TOAST */
.emp-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(10px);background:#ffffff;border:1px solid var(--border);border-radius:14px;padding:12px 20px;font-size:.88rem;z-index:1000;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,0.06);}
.emp-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.emp-toast.success{border-color:rgba(16,185,129,.3);color:var(--green);}
.emp-toast.error{border-color:rgba(239,68,68,.3);color:var(--red);}

/* ======= RESPONSIVE ======= */

/* Tablet */
@media(max-width:768px){
  .login-card{padding:36px 24px;}
  .login-title{font-size:1.5rem;}

  .emp-topbar{padding:12px 14px;gap:8px;}
  .emp-logo span{display:none;}
  .emp-name{font-size:.82rem;}
  .emp-role{display:none;}
  .logout-btn span{display:none;}
  .logout-btn{padding:8px 10px;}

  .emp-main{padding:16px 12px 88px;}
  .emp-card{padding:16px;}

  .greeting-card{padding:18px;}
  .greeting-name{font-size:1.3rem;}
  .greeting-icon{font-size:2.2rem;}

  .mini-stats{gap:8px;}
  .mini-stat{padding:12px 6px;}
  .mini-num{font-size:1.1rem;}
  .mini-label{font-size:.68rem;}

  /* Table layout preserved natively via .table-responsive wrapper */

  /* Slip card stack */
  .slip-card{flex-direction:column;align-items:flex-start;gap:10px;}
  .slip-card-right{display:flex;align-items:center;gap:12px;width:100%;justify-content:space-between;}

  .ps-amount{font-size:1.9rem;}
}

/* Mobile landscape & portrait tables (640px and down) */
@media(max-width:640px){
  .emp-table {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-x: visible !important;
  }
  .emp-table tbody {
    display: block !important;
    width: 100% !important;
  }
  .emp-table thead {
    display: none !important;
  }
  .emp-table tr {
    display: block !important;
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }
  .emp-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 0.88rem !important;
    white-space: normal !important;
  }
  .emp-table td:last-child {
    border-bottom: none !important;
  }
  .emp-table td::before {
    content: attr(data-label) !important;
    color: var(--muted) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
  }
  .emp-table td.emp-empty {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 24px !important;
    border: none !important;
  }
  .emp-table td.emp-empty::before {
    display: none !important;
  }
}

/* Mobile portrait */
@media(max-width:480px){
  .login-card{padding:28px 18px;border-radius:20px;}
  .login-title{font-size:1.3rem;}
  .login-badge{font-size:.75rem;}

  .mini-stats{grid-template-columns:repeat(2,1fr) !important;}
  .mini-stat{padding:10px 4px;}
  .mini-num{font-size:1rem;}

  .greeting-name{font-size:1.1rem;}
  .greeting-icon{display:none;}

  .emp-scanner{width:150px;height:150px;}
  .scan-ring{width:120px;height:120px;}
  .scan-icon{font-size:3.5rem;}

  .ps-amount{font-size:1.6rem;}
  .ps-breakdown{gap:6px;}
  .ps-chip{font-size:.72rem;padding:4px 10px;}

  .calendar-grid{gap:3px;}
  .cal-day{font-size:.7rem;border-radius:6px;}

  .emp-nav-btn span{font-size:.68rem;}
  .emp-nav-btn{padding:10px 6px;}
}

/* Date picker range-info stacked view (400px and down) */
@media(max-width:400px){
  .range-info {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* Very small screens */
@media(max-width:360px){
  .mini-stats{grid-template-columns:repeat(2,1fr) !important;}
  .mini-label{display:none;}
  .emp-main{padding:12px 8px 84px;}
}

/* MODAL (EMPLOYEE) */
.emp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.emp-modal-overlay.active {
  display: flex;
}
.emp-modal {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 24px;
  width: 100%;
  max-width: 440px;
  animation: slideUp 0.3s ease;
  overflow: hidden;
  box-shadow: var(--shadow);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.emp-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.emp-modal-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.emp-modal-header button { background: none; border: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; }

.emp-modal-body { padding: 24px; }
.emp-modal-footer {
  padding: 16px 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--border);
  background: #f8fafc;
}

.emp-btn-primary {
  background: var(--grad);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}
.emp-btn-ghost {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
}

/* CUSTOM DATE PICKER */
.range-picker-container {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.picker-month {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.picker-nav-btn {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.picker-nav-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
 
.picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.picker-day-label {
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
  padding: 4px 0;
}
.picker-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s;
  position: relative;
  z-index: 1;
}
.picker-day:hover:not(.empty) { background: rgba(79, 70, 229, 0.1); }
.picker-day.selected { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4); }
.picker-day.in-range { background: rgba(79, 70, 229, 0.12); border-radius: 0; }
.picker-day.range-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.picker-day.range-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.picker-day.today { color: var(--primary); font-weight: 800; }
.picker-day.empty { cursor: default; }
.picker-day.disabled { opacity: 0.2; cursor: not-allowed; }
 
.range-info {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.range-pill {
  flex: 1;
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
}
.range-pill span { display: block; color: var(--muted); font-size: 0.7rem; margin-bottom: 2px; }
.range-pill b { color: var(--text); }
.picker-day.occupied { background: rgba(239,68,68,0.1); color: rgba(239,68,68,0.5); cursor: not-allowed; text-decoration: line-through; }

/* --- EYE-CATCHING CUSTOM WARNING ALERT --- */
.warning-alert-modal {
  border: 3px solid #ef4444 !important;
  box-shadow: 0 24px 48px rgba(239, 68, 68, 0.22) !important;
  text-align: center;
  position: relative;
  overflow: visible !important;
  background: #ffffff;
  max-width: 480px !important;
  animation: warningShake 0.45s ease-in-out !important;
}
.warning-alert-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  margin: -38px auto 0;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
  animation: pulseWarning 1.5s infinite ease-in-out;
}
@keyframes pulseWarning {
  0% { transform: scale(1); box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4); }
  50% { transform: scale(1.08); box-shadow: 0 8px 32px rgba(239, 68, 68, 0.6), 0 0 0 12px rgba(239, 68, 68, 0.15); }
  100% { transform: scale(1); box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4); }
}
@keyframes warningShake {
  0% { transform: translateY(20px) scale(0.95); }
  50% { transform: translateY(-5px) scale(1.02); }
  65% { transform: translateX(-4px) rotate(-1.2deg); }
  80% { transform: translateX(4px) rotate(1.2deg); }
  100% { transform: translateY(0) scale(1); }
}

/* ============================================================
   RANDOM LIVENESS PROMPT MODAL
   ============================================================ */

/* Fullscreen urgent overlay — red emergency feel */
#livenessPromptOverlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 0, 0, 0.92);
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#livenessPromptOverlay.active {
  display: flex;
  animation: lpOverlayIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes lpOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Flashing red border around entire screen */
#livenessPromptOverlay.active::before {
  content: '';
  position: fixed;
  inset: 0;
  border: 6px solid #ef4444;
  z-index: 10000;
  pointer-events: none;
  animation: lpBorderPulse 0.8s infinite alternate;
}
@keyframes lpBorderPulse {
  from { opacity: 1; border-color: #ef4444; box-shadow: inset 0 0 40px rgba(239,68,68,0.3); }
  to   { opacity: 0.4; border-color: #f59e0b; box-shadow: inset 0 0 80px rgba(245,158,11,0.2); }
}

/* Modal card */
.lp-card {
  background: #ffffff;
  border-radius: 28px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(239, 68, 68, 0.5), 0 0 0 2px rgba(239, 68, 68, 0.3);
  animation: lpCardIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 10001;
}
@keyframes lpCardIn {
  from { transform: scale(0.7) translateY(40px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Card urgency shake (repeating) */
.lp-card.lp-shaking {
  animation: lpCardIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), lpShake 0.5s ease-in-out 0.5s 3;
}
@keyframes lpShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px) rotate(-1deg); }
  40%     { transform: translateX(8px) rotate(1deg); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}

/* Red gradient header */
.lp-header {
  background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
  padding: 28px 24px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lp-header::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  top: -80px;
  right: -60px;
}
.lp-header::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  bottom: -40px;
  left: -30px;
}

/* Alert icon with ring pulse */
.lp-alert-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 3px solid rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  margin: 0 auto 14px;
  position: relative;
  z-index: 1;
  animation: lpIconPulse 1s infinite;
}
@keyframes lpIconPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
  50%     { transform: scale(1.1); box-shadow: 0 0 0 16px rgba(255,255,255,0); }
}
.lp-header-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
}
.lp-header-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  position: relative;
  z-index: 1;
}

/* Countdown ring */
.lp-body {
  padding: 24px;
  text-align: center;
  background: #fff;
}

.lp-countdown-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.lp-countdown-ring {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 12px;
}
.lp-countdown-ring svg {
  transform: rotate(-90deg);
  width: 110px;
  height: 110px;
}
.lp-countdown-ring .lp-ring-bg {
  fill: none;
  stroke: #f1f5f9;
  stroke-width: 8;
}
.lp-countdown-ring .lp-ring-progress {
  fill: none;
  stroke: url(#lpGradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.lp-countdown-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lp-timer-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: #ef4444;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: lpTimerPulse 1s infinite;
}
@keyframes lpTimerPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.7; }
}
.lp-timer-label {
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lp-desc {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.5;
  margin-bottom: 6px;
  font-weight: 500;
}
.lp-penalty-warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  color: #ef4444;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}

/* In-modal liveness scanner */
.lp-scanner-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.lp-scanner-wrap.active { display: flex; }

.lp-scanner {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ef4444;
  background: #0f172a;
  box-shadow: 0 0 0 6px rgba(239,68,68,0.15), 0 8px 24px rgba(239,68,68,0.3);
  animation: lpScannerPulse 1.2s infinite;
}
@keyframes lpScannerPulse {
  0%,100% { box-shadow: 0 0 0 6px rgba(239,68,68,0.15), 0 8px 24px rgba(239,68,68,0.3); }
  50%     { box-shadow: 0 0 0 14px rgba(239,68,68,0), 0 8px 32px rgba(239,68,68,0.5); }
}
#lpWebcam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s;
  border-radius: 50%;
}
#lpWebcam.active { opacity: 1; }

.lp-scan-status {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

/* Buttons */
.lp-btn-scan {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 20px rgba(239,68,68,0.4);
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: lpBtnGlow 1.5s infinite alternate;
}
@keyframes lpBtnGlow {
  from { box-shadow: 0 6px 20px rgba(239,68,68,0.4); transform: translateY(0); }
  to   { box-shadow: 0 10px 32px rgba(239,68,68,0.65); transform: translateY(-2px); }
}
.lp-btn-scan:disabled {
  opacity: 0.6;
  transform: none;
  animation: none;
  cursor: not-allowed;
}

/* Miss result overlay */
.lp-result {
  padding: 20px 24px 28px;
  text-align: center;
  display: none;
}
.lp-result.active { display: block; }
.lp-result-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}
.lp-result-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.lp-result-msg {
  font-size: 0.87rem;
  color: var(--muted);
  line-height: 1.5;
}
.lp-result.success .lp-result-title { color: var(--green); }
.lp-result.missed  .lp-result-title { color: var(--red); }

/* Dismiss button */
.lp-btn-dismiss {
  margin-top: 16px;
  padding: 10px 28px;
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 50px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  transition: all 0.2s;
}
.lp-btn-dismiss:hover { background: #e2e8f0; }

/* Screenshake for entire body when prompt fires */
@keyframes lpBodyAlarm {
  0%,100% { transform: translateX(0); }
  10%,30%,50%,70%,90% { transform: translateX(-6px); }
  20%,40%,60%,80% { transform: translateX(6px); }
}
body.lp-alarming {
  animation: lpBodyAlarm 0.5s ease-in-out;
}