:root{--bg:#f5f7fb;--card:#fff;--text:#161927;--muted:#667085;--line:#e5e7eb;--p:#281668;--p2:#e63946;--gold:#f5a623;--green:#16a34a;--red:#dc2626;--side:#07040a;--side2:#251023;--shadow:0 24px 70px rgba(20,20,35,.12)}
body.dark{--bg:#060407;--card:#120d14;--text:#fff7ed;--muted:#cdbfb5;--line:#342638;--p:#4a26b8;--p2:#ff4f5f;--gold:#ffc247;--green:#35d07f;--red:#ff5b5b;--shadow:0 28px 80px rgba(0,0,0,.55)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 0%,rgba(230,57,70,.13),transparent 25%),radial-gradient(circle at 0% 0%,rgba(40,22,104,.18),transparent 28%),var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
button,input,select,textarea{font-family:inherit}label{display:block;font-size:12px;font-weight:800;color:var(--muted);margin:10px 0 6px}input,select,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text)}textarea{min-height:84px;resize:vertical}
.btn{border:0;border-radius:14px;padding:11px 15px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;font-weight:900;cursor:pointer;box-shadow:0 12px 28px rgba(40,22,104,.18)}.btn.secondary{background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:none}.btn.green{background:var(--green)}.btn.red{background:var(--red)}.btn.orange{background:var(--gold);color:#19121a}.full{width:100%}.small{font-size:12px;color:var(--muted)}.muted{color:var(--muted)}.center{text-align:center}.right{text-align:right}.logo{max-width:210px;max-height:76px;object-fit:contain}.darklogo{background:#080808;border-radius:14px;padding:8px}
.login{min-height:100vh;display:grid;grid-template-columns:1.12fr .88fr}.login-left{background:linear-gradient(135deg,#050206,#241028 60%,#47170c);color:#fff;padding:50px;display:flex;flex-direction:column;justify-content:space-between}.brandbox{display:inline-flex;gap:14px;align-items:center;padding:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);border-radius:24px}.hero h1{font-size:48px;line-height:1.05;margin:0 0 12px}.hero p{font-size:18px;color:#eadbd4;max-width:650px}.features{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:720px}.feature{padding:16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}.login-right{display:flex;align-items:center;justify-content:center;padding:28px}.login-card{width:min(500px,100%);background:var(--card);border:1px solid var(--line);border-radius:30px;padding:30px;box-shadow:var(--shadow)}.demo{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.app{display:none;min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:300px;overflow:auto;background:linear-gradient(180deg,var(--side),var(--side2));padding:18px;color:#f8eee8;border-right:1px solid rgba(255,255,255,.10)}.sidelogo{text-align:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:22px;padding:12px;margin-bottom:14px}.user{display:flex;gap:12px;align-items:center;padding:13px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);margin-bottom:14px}.avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;background:#ddd;border:2px solid rgba(255,255,255,.35)}.nav button{width:100%;border:0;background:transparent;color:#eadbd4;text-align:left;padding:12px;border-radius:14px;margin:3px 0;font-weight:800;cursor:pointer}.nav button.active,.nav button:hover{background:linear-gradient(90deg,var(--p),var(--p2));color:#fff}
.main{margin-left:300px;padding:22px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.section{display:none}.section.active{display:block}.card{background:linear-gradient(145deg,var(--card),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.num{font-size:30px;font-weight:950;margin:8px 0}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.quick{display:flex;gap:8px;flex-wrap:wrap}.notice{padding:14px;border-radius:16px;background:rgba(40,22,104,.10);border:1px dashed var(--p)}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.formgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table th{font-size:11px;text-transform:uppercase;color:var(--muted)}.badge{display:inline-block;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:850}.pending{background:#fff7ed;color:#c2410c}.done{background:#ecfdf3;color:#027a48}.progress{background:#eff8ff;color:#175cd3}.reject{background:#fef2f2;color:#b42318}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.70);z-index:99;align-items:center;justify-content:center;padding:18px}.modal.show{display:flex}.modal-card{width:min(1120px,100%);max-height:90vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:var(--shadow)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.close{font-size:30px;cursor:pointer;color:var(--muted)}
.report-hero{background:linear-gradient(135deg,var(--p),var(--p2));color:white;border-radius:28px;padding:24px;box-shadow:var(--shadow);margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:18px}.report-hero h2{margin:0;font-size:30px}.report-hero p{margin:8px 0 0;color:#f4e9ff}.metric{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}.metric .label{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase}.metric .value{font-size:30px;font-weight:950;margin:8px 0}.metric .trend{font-size:12px;color:var(--green);font-weight:800}.chart-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow);min-height:260px}.bars{display:flex;align-items:end;gap:14px;height:170px;padding-top:10px;border-bottom:1px solid var(--line)}.bar-wrap{flex:1;text-align:center}.bar{height:var(--h);background:linear-gradient(180deg,var(--p2),var(--p));border-radius:12px 12px 4px 4px;min-height:12px}.bar-label{font-size:12px;color:var(--muted);margin-top:8px}.bar-value{font-size:12px;font-weight:800;margin-bottom:6px}.donut{width:180px;height:180px;border-radius:50%;background:conic-gradient(var(--green) 0 var(--complete),var(--p2) var(--complete) 100%);display:grid;place-items:center;margin:auto}.donut-inner{width:118px;height:118px;border-radius:50%;background:var(--card);display:grid;place-items:center;text-align:center}.donut-inner b{font-size:28px}.progress-list{display:grid;gap:12px}.progress-row{display:grid;grid-template-columns:140px 1fr 60px;gap:10px;align-items:center}.track{height:10px;background:var(--line);border-radius:99px;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,var(--p),var(--p2));border-radius:99px}.activity-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.activity-item{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(124,58,237,.06)}.rank{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--line)}.rank-no{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--p),var(--p2));color:white;font-weight:900}
.invoice-preview{background:#fff;color:#151535;padding:34px;max-width:900px;margin:auto;font-family:Segoe UI,Arial,sans-serif}.inv-head{display:flex;justify-content:space-between;align-items:flex-start}.inv-title{text-align:right}.inv-title h1{font-family:Georgia,serif;font-size:46px;letter-spacing:4px;margin:0;color:#0f0b35}.inv-title p{letter-spacing:4px;color:#888;margin:4px 0}.inv-line{height:5px;background:linear-gradient(90deg,#e63547,#f6b12d);margin:28px 0 0}.inv-meta{display:grid;grid-template-columns:repeat(4,1fr);background:#f7f7fb;border-bottom:1px solid #e5e5ef;padding:14px 18px;color:#777}.inv-meta b{color:#151535}.inv-top{display:flex;justify-content:space-between;margin:26px 0}.inv-to small,.inv-total small{letter-spacing:4px;color:#888;font-weight:800}.inv-to h2{font-family:Georgia,serif;color:#171044;margin:10px 0 8px}.inv-total{text-align:right}.inv-total h2{font-size:34px;color:#e63946;margin:10px 0}.section-title{letter-spacing:4px;color:#5b39d8;font-weight:900;margin:28px 0 12px}.inv-table{width:100%;border-collapse:collapse;border-radius:14px;overflow:hidden}.inv-table th{background:#27136f;color:white;text-align:left;padding:16px}.inv-table th:last-child{text-align:center;width:120px}.inv-table td{padding:11px 16px}.inv-table td:last-child{text-align:center;font-weight:700}.pay-grid{display:grid;grid-template-columns:1fr .75fr 1fr;gap:28px;margin:38px 0}.pay-box,.sum-box{border:1px solid #e5e5ef;border-radius:16px;overflow:hidden}.pay-box h3{margin:0;padding:18px 22px;letter-spacing:2px}.pay-row,.sum-row{display:flex;justify-content:space-between;padding:11px 22px;border-top:1px dashed #e5e5ef}.sum-total{background:#2d1684;color:#ffc247;font-size:26px;font-weight:900}.inv-foot{display:flex;justify-content:space-between;align-items:end;background:#f7f7fb;margin-top:30px;padding:24px 30px}.sign{text-align:right;font-family:Georgia,serif;font-weight:900;color:#171044}

.payroll-head{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-radius:28px;padding:24px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}
.payroll-head h2{margin:0;font-size:30px}.payroll-head p{margin:8px 0 0;color:#f8e9ef}
.payroll-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}
.payroll-total{font-size:34px;font-weight:950;margin:8px 0}.money-green{color:var(--green)}.money-red{color:var(--red)}.money-gold{color:var(--gold)}
.breakup-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.breakup-item{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(40,22,104,.05)}.breakup-item b{display:block;margin-bottom:4px}.reason-list{display:grid;gap:10px}.reason{display:grid;grid-template-columns:120px 1fr 90px;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:10px 0}.reason:last-child{border-bottom:0}.reason small{color:var(--muted)}.payroll-status{display:inline-flex;gap:6px;align-items:center;padding:7px 12px;border-radius:999px;background:#ecfdf3;color:#027a48;font-weight:900;font-size:12px}
@media(max-width:1050px){.payroll-head{display:block}.breakup-grid{grid-template-columns:1fr}.reason{grid-template-columns:1fr}}


.dash-hero{background:linear-gradient(135deg,var(--p),var(--p2));color:white;border-radius:30px;padding:24px;margin-bottom:18px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:18px;align-items:center;position:relative;overflow:hidden}
.dash-hero:after{content:"";position:absolute;right:-55px;top:-55px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.13)}
.dash-hero h2{margin:0;font-size:30px}.dash-hero p{margin:8px 0 0;color:#fff0f3}.dash-hero .hero-chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:10px 14px;border-radius:999px;font-weight:900;position:relative;z-index:1}
.dash-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.dash-card:after{content:"";position:absolute;right:-34px;top:-34px;width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--p2));opacity:.10}.dash-card small{color:var(--muted);font-weight:800;text-transform:uppercase}.dash-card .big{font-size:32px;font-weight:950;margin:8px 0}.dash-card .sub{font-size:12px;color:var(--muted)}
.action-tile{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(40,22,104,.04);cursor:pointer}.action-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--p),var(--p2));color:white;font-weight:900}
.payroll-hero{background:linear-gradient(135deg,#1d1160,#e63946);color:#fff;border-radius:30px;padding:24px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:18px}
.payroll-hero h2{margin:0;font-size:30px}.payroll-hero p{margin:8px 0 0;color:#ffe9ee}.payroll-pill{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:9px 13px;border-radius:999px;font-size:12px;font-weight:900}
.pay-kpi{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}.pay-kpi small{color:var(--muted);font-weight:800;text-transform:uppercase}.pay-kpi .amt{font-size:30px;font-weight:950;margin:8px 0}.green-text{color:var(--green)}.red-text{color:var(--red)}.gold-text{color:var(--gold)}
.rule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.rule-box{border:1px solid var(--line);border-radius:18px;padding:15px;background:rgba(40,22,104,.045)}.rule-box b{display:block;margin-bottom:5px}.rule-box span{font-size:12px;color:var(--muted)}
.pay-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.pay-detail{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(230,57,70,.045)}.pay-detail b{display:block;margin-bottom:4px}.pay-detail .money{font-size:22px;font-weight:950}
.payroll-table th{white-space:nowrap}.payroll-table td{white-space:nowrap}.pay-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;background:#ecfdf3;color:#027a48;font-size:12px;font-weight:900}
@media(max-width:1050px){.dash-hero,.payroll-hero{display:block}.rule-grid,.pay-detail-grid{grid-template-columns:1fr}}


.qr-box{border:1px solid #e5e5ef;border-radius:16px;padding:16px;text-align:center;background:#fff}
.qr-box img{width:140px;height:140px;object-fit:contain;border:1px solid #eee;border-radius:12px;padding:8px;background:#fff}
.pay-note{font-size:12px;color:#666;line-height:1.5;margin-top:10px}

@media print{body{background:#fff}.invoice-preview{max-width:100%;padding:20px}.no-print{display:none!important}}
@media(max-width:1050px){.login{grid-template-columns:1fr}.login-left{display:none}.sidebar{position:static;width:100%}.main{margin-left:0}.grid4,.grid3,.grid2,.formgrid,.formgrid3,.pay-grid,.activity-grid{grid-template-columns:1fr}.topbar{display:block}.top-actions{margin-top:12px}}


/* V22 Mobile App / PWA Layout */
.mobile-bottom-nav,.mobile-fab,.mobile-fab-menu{display:none}
@media(max-width:768px){
  body{padding-bottom:86px;background:var(--bg)}
  .login{display:block;min-height:100vh}
  .login-left{display:block;padding:28px 20px;min-height:330px}
  .hero h1{font-size:34px}
  .hero p{font-size:15px}
  .features{grid-template-columns:1fr 1fr;gap:10px}
  .feature{font-size:13px;padding:12px}
  .login-right{padding:18px}
  .login-card{border-radius:26px;padding:22px}
  .demo{grid-template-columns:1fr 1fr}
  .sidebar{position:fixed;left:-310px;top:0;bottom:0;width:286px;z-index:80;transition:.28s ease;box-shadow:20px 0 80px rgba(0,0,0,.35)}
  .sidebar.mobile-open{left:0}
  .main{margin-left:0;padding:14px}
  .topbar{position:sticky;top:0;z-index:40;background:rgba(245,247,251,.86);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;padding:12px;margin-bottom:14px}
  body.dark .topbar{background:rgba(18,13,20,.86)}
  .topbar h2{font-size:20px;margin:0}
  .top-actions{gap:6px}
  .top-actions .search{display:none}
  .top-actions .btn{padding:9px 11px;font-size:12px}
  .grid4,.grid3,.grid2,.formgrid,.formgrid3{grid-template-columns:1fr!important;gap:12px}
  .card,.dash-card,.pay-kpi,.chart-card,.metric{border-radius:20px;padding:15px}
  .dash-hero,.payroll-hero,.report-hero{display:block;border-radius:24px;padding:18px}
  .dash-hero h2,.payroll-hero h2,.report-hero h2{font-size:22px}
  .dash-hero p,.payroll-hero p,.report-hero p{font-size:13px}
  .quick{display:grid;grid-template-columns:1fr 1fr}
  .action-tile{display:block;text-align:center;padding:12px}
  .action-icon{margin:0 auto 8px}
  .table{font-size:12px;min-width:720px}
  .table-wrap{margin:0 -4px;padding-bottom:8px}
  .modal{padding:10px}
  .modal-card{border-radius:22px;padding:16px;max-height:88vh}
  .invoice-preview{padding:18px;min-width:720px}
  .pay-grid{grid-template-columns:1fr!important}
  .inv-meta{grid-template-columns:1fr 1fr}
  .inv-top,.inv-head,.inv-foot{display:block}
  .inv-title{text-align:left;margin-top:14px}
  .inv-total{text-align:left}
  .mobile-bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:10px;height:64px;z-index:90;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 50px rgba(20,20,35,.20);overflow:hidden}
  body.dark .mobile-bottom-nav{background:rgba(18,13,20,.92)}
  .mobile-bottom-nav button{border:0;background:transparent;color:var(--muted);font-weight:850;font-size:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .mobile-bottom-nav button span{font-size:10px}
  .mobile-bottom-nav button.mob-active{color:var(--p2);background:rgba(230,57,70,.08)}
  .mobile-fab{display:grid;place-items:center;position:fixed;right:18px;bottom:88px;width:54px;height:54px;border-radius:50%;border:0;z-index:91;background:linear-gradient(135deg,var(--p),var(--p2));color:white;font-size:26px;font-weight:900;box-shadow:0 15px 40px rgba(40,22,104,.35)}
  .mobile-fab-menu{position:fixed;right:18px;bottom:150px;z-index:92;display:none;gap:8px;flex-direction:column}
  .mobile-fab-menu.show{display:flex}
  .mobile-fab-menu button{border:1px solid var(--line);background:var(--card);color:var(--text);padding:11px 14px;border-radius:15px;font-weight:850;box-shadow:var(--shadow)}
  .mobile-menu-btn{display:inline-flex!important}
}
@media(min-width:769px){
  .mobile-menu-btn{display:none!important}
}


/* V23 fixed role-wise mobile footer */
@media(max-width:768px){
  .mobile-bottom-nav{
    grid-template-columns:repeat(var(--nav-count,5),1fr)!important;
    height:70px!important;
    border-radius:26px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.82))!important;
    box-shadow:0 20px 55px rgba(40,22,104,.24)!important;
  }
  body.dark .mobile-bottom-nav{
    background:linear-gradient(145deg,rgba(18,13,20,.96),rgba(32,20,36,.90))!important;
  }
  .mobile-bottom-nav button{
    position:relative;
    border-radius:18px;
    margin:7px 3px;
    transition:.2s ease;
  }
  .mobile-bottom-nav button .ico{
    width:28px;height:28px;border-radius:12px;
    display:grid;place-items:center;
    font-size:17px;
    margin-bottom:1px;
  }
  .mobile-bottom-nav button span{font-size:10px;font-weight:900}
  .mobile-bottom-nav button.mob-active{
    background:linear-gradient(135deg,var(--p),var(--p2))!important;
    color:white!important;
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(230,57,70,.28);
  }
  .mobile-bottom-nav button.mob-active .ico{
    background:rgba(255,255,255,.18);
  }
  .mobile-fab{
    right:20px!important;
    bottom:92px!important;
    background:linear-gradient(135deg,var(--gold),var(--p2))!important;
    color:#fff!important;
  }
  .mobile-fab-menu{
    right:18px!important;
    bottom:154px!important;
    min-width:210px;
  }
  .mobile-fab-menu button{
    text-align:left;
    background:linear-gradient(145deg,var(--card),rgba(255,255,255,.05))!important;
    border:1px solid var(--line)!important;
  }
}


/* V24 Professional mobile footer */
.mobile-bottom-nav.hide-on-login,.mobile-fab.hide-on-login,.mobile-fab-menu.hide-on-login{display:none!important}
@media(max-width:768px){
  .mobile-bottom-nav{
    height:74px!important;
    padding:6px!important;
    gap:4px;
    border-radius:28px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,247,251,.88))!important;
    border:1px solid rgba(40,22,104,.10)!important;
  }
  body.dark .mobile-bottom-nav{
    background:linear-gradient(145deg,rgba(18,13,20,.96),rgba(38,25,42,.92))!important;
  }
  .mobile-bottom-nav button{
    margin:0!important;
    border-radius:20px!important;
    gap:3px!important;
  }
  .mobile-bottom-nav button .ico{
    width:30px!important;
    height:30px!important;
    border-radius:14px!important;
    background:rgba(40,22,104,.08);
  }
  body.dark .mobile-bottom-nav button .ico{
    background:rgba(255,255,255,.08);
  }
  .mobile-bottom-nav svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:2.2;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mobile-bottom-nav button span{
    font-size:10px!important;
    letter-spacing:.01em;
  }
  .mobile-bottom-nav button.mob-active{
    background:linear-gradient(135deg,var(--p),var(--p2))!important;
    color:#fff!important;
  }
  .mobile-bottom-nav button.mob-active .ico{
    background:rgba(255,255,255,.18)!important;
  }
  .mobile-fab{
    border:3px solid rgba(255,255,255,.75)!important;
    box-shadow:0 18px 42px rgba(230,57,70,.32)!important;
  }
}


/* V25 Mobile visibility fixes */
@media(max-width:768px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .app{padding-bottom:100px}
  .main{width:100%;max-width:100vw;overflow-x:hidden;padding-bottom:105px!important}
  .section{width:100%;max-width:100%;overflow:visible}
  .card,.dash-card,.pay-kpi,.chart-card,.metric,.payroll-card{max-width:100%;overflow:hidden}
  .topbar{width:100%;max-width:100%;overflow:visible}
  .top-actions{display:flex!important;flex-wrap:wrap!important;width:100%}
  .top-actions .btn{flex:0 0 auto}
  .quick{grid-template-columns:1fr!important}
  .action-tile{width:100%;display:flex!important;text-align:left!important}
  .table-wrap{width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:12px}
  .table{min-width:760px}
  .payroll-table{min-width:940px!important}
  .invoice-preview{min-width:680px!important}
  .modal-card{width:100%;max-width:100%;overflow-x:hidden}
  .modal-card .table-wrap{overflow-x:auto!important}
  .formgrid,.formgrid3{display:grid!important;grid-template-columns:1fr!important}
  .mobile-bottom-nav{left:6px!important;right:6px!important;bottom:6px!important;width:auto!important;max-width:calc(100vw - 12px)!important}
  .mobile-bottom-nav button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:54px}
  .mobile-fab{bottom:84px!important}
  .mobile-fab-menu{bottom:146px!important;right:10px!important;max-width:calc(100vw - 20px)}
  .mobile-fab-menu button{width:100%;white-space:normal}
  .sidebar{max-width:86vw}
}
@media(max-width:390px){
  .mobile-bottom-nav button .ico{width:26px!important;height:26px!important}
  .mobile-bottom-nav svg{width:16px!important;height:16px!important}
  .mobile-bottom-nav button span{font-size:9px!important;max-width:48px}
  .mobile-bottom-nav{height:68px!important}
}


/* V26 Premium Professional Login */
.pro-login{position:relative;overflow:hidden;background:#07040a}
.login-bg-orb{position:absolute;border-radius:50%;filter:blur(8px);opacity:.45;pointer-events:none}
.orb-one{width:360px;height:360px;background:#e63946;left:-120px;top:-120px}
.orb-two{width:420px;height:420px;background:#281668;right:-150px;bottom:-150px}
.pro-login-left{position:relative;z-index:1;background:linear-gradient(135deg,rgba(5,2,6,.95),rgba(36,16,40,.92) 60%,rgba(71,23,12,.92));overflow:hidden}
.pro-login-left:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,transparent 1px);background-size:28px 28px;opacity:.16;pointer-events:none}
.pro-brand{position:relative;z-index:1;box-shadow:0 20px 60px rgba(0,0,0,.20)}
.pro-hero{position:relative;z-index:1}.login-badge{display:inline-block;margin-bottom:14px;background:linear-gradient(135deg,var(--gold),#fff1b8);color:#1a1320;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:950;letter-spacing:.04em}
.pro-hero h1{max-width:720px}.hero-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.hero-points span{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);font-size:13px;font-weight:800;color:#fff}
.pro-features{position:relative;z-index:1}.pro-features .feature b{font-size:15px}.pro-features .feature span{font-size:12px;color:#eadbd4}
.pro-login-right{position:relative;z-index:1;background:radial-gradient(circle at 50% 0%,rgba(230,57,70,.10),transparent 35%),rgba(245,247,251,.82);backdrop-filter:blur(12px)}
body.dark .pro-login-right{background:radial-gradient(circle at 50% 0%,rgba(230,57,70,.14),transparent 35%),rgba(8,5,10,.86)}
.pro-login-card{border-radius:34px;padding:34px;border:1px solid rgba(40,22,104,.12);box-shadow:0 30px 90px rgba(40,22,104,.20);position:relative;overflow:hidden}
.pro-login-card:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--p),var(--p2),var(--gold))}
.login-logo-wrap{margin-bottom:12px}.login-title h2{font-size:30px;margin:8px 0 4px}.login-title p{margin:0 0 12px}
.pass-wrap{display:flex;gap:8px}.pass-wrap input{flex:1}.pass-wrap button{width:74px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:14px;font-weight:900;cursor:pointer}
.login-main-btn{margin-top:18px;padding:14px;font-size:15px}.login-helper{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:13px 0 16px;font-size:12px;color:var(--muted)}.login-helper a{color:var(--p2);font-weight:900;text-decoration:none}
.role-title{font-size:12px;font-weight:950;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:8px 0}.pro-demo{grid-template-columns:repeat(5,1fr);gap:8px}.pro-demo .btn{padding:10px 8px;font-size:12px}.secure-note{margin-top:16px;padding:12px;border-radius:16px;background:rgba(40,22,104,.06);border:1px solid var(--line);font-size:12px;color:var(--muted);text-align:center}
@media(max-width:1050px){.pro-demo{grid-template-columns:repeat(2,1fr)}.pro-demo button:last-child{grid-column:1/-1}}
@media(max-width:768px){.pro-login-left{min-height:auto;padding:26px 18px}.pro-brand{width:100%}.pro-hero h1{font-size:31px}.hero-points{gap:7px}.hero-points span{font-size:11px;padding:7px 9px}.pro-features{display:none}.pro-login-right{padding:16px}.pro-login-card{padding:24px;border-radius:28px}.login-title h2{font-size:25px}.login-helper{display:block;line-height:1.9}.pro-demo{grid-template-columns:1fr 1fr}.secure-note{font-size:11px}}


/* V28 Office Location Login Tracking */
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}.status-online{background:#16a34a}.status-offline{background:#dc2626}.status-warning{background:#f5a623}
.location-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(22,163,74,.10);color:#027a48;font-size:12px;font-weight:900}.location-pill.out{background:#fff7ed;color:#c2410c}.location-pill.block{background:#fef2f2;color:#b42318}
.office-alert{padding:14px;border-radius:18px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-weight:800;margin:12px 0}.location-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:768px){.location-grid{grid-template-columns:1fr}}


/* V29 User Theme + Extra Utilities */
.theme-preview-box{border:1px solid var(--line);border-radius:22px;padding:18px;background:linear-gradient(145deg,var(--card),rgba(255,255,255,.04));box-shadow:var(--shadow)}
.theme-swatch{height:44px;border-radius:16px;background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 12px 28px rgba(40,22,104,.18)}
.utility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.utility-box{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(40,22,104,.045)}.utility-box b{display:block;margin-bottom:5px}
.btn.soft{background:rgba(40,22,104,.08)!important;color:var(--text)!important;border:1px solid var(--line);box-shadow:none}
@media(max-width:768px){.utility-grid{grid-template-columns:1fr}}


/* V30 Faster Premium UI + Professional Package Builder */
.card,.dash-card,.pay-kpi,.chart-card,.metric,.login-card{will-change:auto;backface-visibility:hidden}
.card:hover,.dash-card:hover,.action-tile:hover{transform:translateY(-1px);transition:.16s ease}
.btn{transition:.16s ease}.btn:active{transform:scale(.98)}
.main{animation:fadeInFast .18s ease}@keyframes fadeInFast{from{opacity:.7;transform:translateY(3px)}to{opacity:1;transform:none}}
.pkg-hero{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-radius:30px;padding:24px;margin-bottom:18px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:16px;align-items:center}
.pkg-hero h2{margin:0;font-size:30px}.pkg-hero p{margin:8px 0 0;color:#fff1f3}.pkg-chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:9px 13px;border-radius:999px;font-size:12px;font-weight:900}
.pkg-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}
.pkg-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.pkg-item{border:1px solid var(--line);border-radius:20px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));position:relative;overflow:hidden}
.pkg-item:after{content:"";position:absolute;right:-30px;top:-30px;width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--p2));opacity:.09}
.pkg-title{font-size:18px;font-weight:950;margin-bottom:5px}.pkg-price{font-size:26px;font-weight:950;color:var(--p2);margin:8px 0}.pkg-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.pkg-tag{font-size:11px;font-weight:850;border-radius:999px;padding:5px 8px;background:rgba(40,22,104,.08);color:var(--text)}
.pkg-form-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.pkg-section-title{font-weight:950;margin:16px 0 8px;color:var(--p2)}
.service-builder{display:grid;gap:10px;margin-top:10px}.service-row{display:grid;grid-template-columns:1.2fr .7fr .7fr 44px;gap:10px;align-items:end;border:1px solid var(--line);border-radius:18px;padding:12px;background:rgba(40,22,104,.035)}
.remove-service{height:42px;border:0;border-radius:14px;background:#fef2f2;color:#b42318;font-weight:950;cursor:pointer}
.package-summary{border:1px solid var(--line);border-radius:20px;padding:16px;background:rgba(22,163,74,.06)}.summary-line{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:9px 0}.summary-line:last-child{border-bottom:0}
@media(max-width:900px){.pkg-hero{display:block}.pkg-list{grid-template-columns:1fr}.service-row{grid-template-columns:1fr 1fr}.remove-service{width:100%}}
@media(max-width:768px){.pkg-hero h2{font-size:23px}.service-row{grid-template-columns:1fr}.pkg-card{padding:15px}}


/* V31 Enterprise Dashboard + Graphs */
.exec-hero{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-radius:32px;padding:26px;margin-bottom:18px;box-shadow:var(--shadow);display:grid;grid-template-columns:1.3fr .7fr;gap:18px;align-items:center;position:relative;overflow:hidden}
.exec-hero:before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12)}
.exec-hero h2{margin:0;font-size:32px}.exec-hero p{margin:8px 0 0;color:#fff1f3}.exec-chip{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:9px 13px;border-radius:999px;font-size:12px;font-weight:900}
.exec-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1}.exec-mini div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:13px}.exec-mini b{display:block;font-size:22px}
.pro-kpi{background:linear-gradient(145deg,var(--card),rgba(255,255,255,.04));border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}.pro-kpi:after{content:"";position:absolute;right:-28px;top:-28px;width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--p2));opacity:.10}.pro-kpi .k-label{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.04em}.pro-kpi .k-value{font-size:31px;font-weight:950;margin:8px 0}.pro-kpi .k-trend{font-size:12px;color:var(--green);font-weight:900}.spark{height:34px;display:flex;gap:4px;align-items:end;margin-top:10px}.spark i{flex:1;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,var(--p2),var(--p));height:var(--h)}
.graph-card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:var(--shadow);min-height:290px}.graph-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.graph-head h3{margin:0}.graph-badge{font-size:11px;font-weight:900;border-radius:999px;padding:6px 9px;background:rgba(40,22,104,.08);color:var(--text)}
.line-chart{height:190px;position:relative;border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 8px 0;margin-top:14px}.line-chart svg{width:100%;height:100%;overflow:visible}.line-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px}
.bar-chart{display:flex;align-items:end;gap:12px;height:190px;border-bottom:1px solid var(--line);padding-top:12px}.bar-col{flex:1;text-align:center}.bar-col .bar{height:var(--h);border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,var(--p2),var(--p));min-height:10px;box-shadow:0 8px 18px rgba(40,22,104,.18)}.bar-col small{display:block;margin-top:7px;color:var(--muted);font-size:11px}.bar-col b{font-size:12px}
.donut-pro{width:174px;height:174px;border-radius:50%;background:conic-gradient(var(--green) 0 var(--done),var(--p2) var(--done) var(--pending),var(--gold) var(--pending) 100%);display:grid;place-items:center;margin:18px auto}.donut-core{width:112px;height:112px;border-radius:50%;background:var(--card);display:grid;place-items:center;text-align:center}.donut-core b{font-size:28px}
.legend-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}.legend-row span{font-size:12px;color:var(--muted)}.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px}
.rank-list{display:grid;gap:10px}.rank-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:18px;padding:12px;background:rgba(40,22,104,.035)}.rank-num{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;font-weight:950}.rank-card .track{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:6px}.rank-card .fill{height:100%;background:linear-gradient(90deg,var(--p),var(--p2))}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.insight{border:1px solid var(--line);border-radius:18px;padding:14px;background:linear-gradient(145deg,var(--card),rgba(22,163,74,.035))}.insight b{display:block;margin-bottom:5px}.insight span{font-size:12px;color:var(--muted)}
@media(max-width:1050px){.exec-hero{grid-template-columns:1fr}.insight-grid{grid-template-columns:1fr}.exec-mini{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.exec-hero h2{font-size:24px}.exec-mini{grid-template-columns:1fr}.graph-card{min-height:auto}.bar-chart{gap:7px}.line-chart{height:160px}}


/* V32 Face + Location Attendance */
.face-box{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow)}
.face-camera{width:100%;max-width:420px;border-radius:20px;background:#000;min-height:260px;object-fit:cover;border:1px solid var(--line)}
.face-preview{width:86px;height:86px;border-radius:18px;object-fit:cover;border:2px solid var(--line);background:#f2f4f7}
.verify-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.verify-status{display:grid;gap:10px}.verify-line{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:8px 0}.verify-line b{font-size:13px}.verified-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;background:#ecfdf3;color:#027a48}.verified-badge.warn{background:#fff7ed;color:#c2410c}.verified-badge.block{background:#fef2f2;color:#b42318}
.face-thumb{width:46px;height:46px;border-radius:12px;object-fit:cover;border:1px solid var(--line);background:#eee}
@media(max-width:768px){.verify-grid{grid-template-columns:1fr}.face-camera{min-height:220px}.verify-line{display:block}}


/* FINAL Enterprise Professional Polish */
:root{
  --premium-bg:#f7f9ff;
  --premium-card:#ffffff;
  --premium-text:#07122f;
  --premium-blue:#2563eb;
  --premium-purple:#7c3aed;
  --premium-pink:#ec4899;
  --premium-green:#22c55e;
  --premium-orange:#f97316;
}
body{letter-spacing:-.01em}
.sidebar{
  background:
    radial-gradient(circle at 70% 20%,rgba(124,58,237,.38),transparent 32%),
    radial-gradient(circle at 20% 80%,rgba(236,72,153,.20),transparent 30%),
    linear-gradient(180deg,#081352,#100a3a 52%,#0b102c)!important;
}
.sidelogo{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important}
.nav button{font-size:14px;letter-spacing:.01em}
.nav button.active,.nav button:hover{
  background:linear-gradient(90deg,#6d28d9,#2563eb,#ec4899)!important;
  box-shadow:0 12px 32px rgba(124,58,237,.30);
}
.main{background:linear-gradient(180deg,#f8fbff,#ffffff 45%,#f7f9ff);min-height:100vh}
.topbar{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
  border:1px solid rgba(226,232,240,.85);
  border-radius:24px;
  padding:12px 16px;
  box-shadow:0 16px 45px rgba(15,23,42,.06);
}
body.dark .topbar{background:rgba(18,13,20,.78)}
.exec-hero,.dash-hero{
  background:
    radial-gradient(circle at 90% 20%,rgba(255,255,255,.18),transparent 26%),
    linear-gradient(135deg,#1e1b4b 0%,#4c1d95 42%,#2563eb 73%,#ec4899 100%)!important;
  border-radius:32px!important;
}
.pro-kpi,.dash-card,.card,.graph-card{
  border:1px solid rgba(226,232,240,.92)!important;
  box-shadow:0 18px 55px rgba(15,23,42,.07)!important;
}
.pro-kpi:hover,.graph-card:hover,.card:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 70px rgba(15,23,42,.10)!important;
}
.action-tile{
  background:linear-gradient(145deg,#fff,rgba(239,246,255,.80))!important;
  border:1px solid #e5e7eb!important;
}
.action-icon{
  background:linear-gradient(135deg,#7c3aed,#2563eb,#ec4899)!important;
}
.final-watermark{
  position:fixed;right:14px;bottom:14px;z-index:1;
  font-size:10px;color:rgba(100,116,139,.55);font-weight:800;
}
@media(max-width:768px){
  .topbar{border-radius:20px}
  .main{padding-bottom:105px!important}
}


/* FINAL Role Selection Login - Simple Full Page */
.flourish-login-simple{
  min-height:100vh!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  background:#02070b!important;
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:28px;
}
.flourish-login-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 35%,rgba(20,185,95,.20),transparent 34%),
    radial-gradient(circle at 82% 12%,rgba(0,180,255,.12),transparent 24%),
    linear-gradient(135deg,#02070b 0%,#04120e 52%,#010409 100%);
}
.flourish-wave{position:absolute;inset:auto;pointer-events:none;opacity:.42}
.wave-a{right:-120px;top:-80px;width:520px;height:520px;border-radius:50%;border:1px solid rgba(34,197,94,.34);box-shadow:0 0 0 12px rgba(34,197,94,.03),0 0 0 28px rgba(34,197,94,.025),0 0 0 48px rgba(34,197,94,.018)}
.wave-b{left:-180px;bottom:-170px;width:560px;height:560px;border-radius:50%;border:1px solid rgba(0,180,120,.26);box-shadow:0 0 0 16px rgba(0,180,120,.035),0 0 0 36px rgba(0,180,120,.02),0 0 0 70px rgba(0,180,120,.016)}
.fl-login-wrap{position:relative;z-index:2;width:min(620px,100%);display:flex;flex-direction:column;align-items:center}
.fl-login-brand{text-align:center;margin-bottom:24px}.fl-login-logo{max-width:260px;max-height:120px;object-fit:contain;margin-bottom:8px}.fl-login-brand h1{font-family:Georgia,serif;margin:0;font-size:30px;background:linear-gradient(90deg,#22c55e,#04c8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.fl-login-brand p{margin:8px 0 0;color:#d9fbe6;font-size:16px;letter-spacing:.08em}
.fl-login-card{width:100%;background:rgba(9,19,18,.78);backdrop-filter:blur(20px);border:1px solid rgba(34,197,94,.55);border-radius:28px;padding:30px;box-shadow:0 35px 100px rgba(0,0,0,.46),0 0 60px rgba(34,197,94,.10)}
.fl-card-head{text-align:center;margin-bottom:18px}.fl-card-head h2{margin:0;font-size:34px;color:#fff}.fl-card-head p{margin:9px 0 0;color:#b8c7c2}
.role-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 18px}.role-card{border:1px solid rgba(148,163,184,.26);background:rgba(255,255,255,.045);color:#fff;border-radius:18px;padding:13px 14px;text-align:left;cursor:pointer;display:grid;grid-template-columns:38px 1fr;gap:2px 10px;align-items:center;transition:.18s ease}.role-card .role-ico{grid-row:1/3;width:38px;height:38px;border-radius:14px;background:rgba(34,197,94,.13);display:grid;place-items:center}.role-card b{font-size:15px}.role-card small{color:#aebeb8}.role-card:hover{transform:translateY(-2px);border-color:#22c55e;background:rgba(34,197,94,.10);box-shadow:0 14px 36px rgba(34,197,94,.12)}.role-card.active{border-color:#22c55e;background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(6,182,212,.12));box-shadow:0 18px 50px rgba(34,197,94,.14)}.role-card.wide{grid-column:1/-1}
.fl-login-card label{color:#d7eee5!important;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.fl-input{display:flex;align-items:center;gap:10px;border:1px solid rgba(148,163,184,.32);background:rgba(0,0,0,.20);border-radius:16px;padding:0 12px}.fl-input:focus-within{border-color:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.10)}.fl-input input{border:0!important;background:transparent!important;color:#fff!important;padding:14px 4px!important}.fl-input button{border:0;background:transparent;color:#c9d8d2;font-weight:800;cursor:pointer}
.fl-login-card select{background:rgba(0,0,0,.20)!important;color:#fff!important;border-color:rgba(148,163,184,.32)!important}
.fl-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0 18px}.remember{display:flex!important;align-items:center;gap:8px;margin:0!important;text-transform:none!important;letter-spacing:0!important}.remember input{width:auto}.fl-row a{color:#22c55e;text-decoration:none;font-weight:850}
.fl-login-btn{height:52px;border-radius:16px!important;background:linear-gradient(135deg,#16a34a,#22c55e,#06b6d4)!important;font-size:16px!important;box-shadow:0 18px 45px rgba(34,197,94,.22)!important}.fl-login-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.fl-secure{text-align:center;color:#b8c7c2;margin-top:16px;font-size:13px}.fl-copy{margin-top:24px;color:#9fb2ab;text-align:center}
#loginScreen.flourish-login-simple ~ .mobile-bottom-nav,#loginScreen.flourish-login-simple ~ .mobile-fab,#loginScreen.flourish-login-simple ~ .mobile-fab-menu{display:none!important}
@media(max-width:680px){.flourish-login-simple{padding:16px}.fl-login-card{padding:20px;border-radius:24px}.role-select-grid{grid-template-columns:1fr}.role-card.wide{grid-column:auto}.fl-card-head h2{font-size:28px}.fl-login-brand h1{font-size:24px}.fl-row{display:block;line-height:2}.fl-login-logo{max-width:220px}}


/* Final login click fix */
.fl-login-card, .role-card, #loginBtn, #togglePass, #forgotLink{position:relative;z-index:20}
.role-card, #loginBtn, #togglePass, #forgotLink{pointer-events:auto!important}


/* FINAL working login visibility */
body:not(.app-logged-in) #loginScreen.flourish-login-simple{display:flex}
#appScreen{display:none}


/* HARD FIX: hide login after successful login */
body.app-logged-in #loginScreen{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
body.app-logged-in #appScreen{display:block!important;visibility:visible!important;opacity:1!important}
body:not(.app-logged-in) #appScreen{display:none!important}
body:not(.app-logged-in) #loginScreen{display:flex!important}


/* User login credential creation */
.credential-section{margin-top:14px;border:1px solid var(--line);border-radius:20px;padding:16px;background:rgba(34,197,94,.055)}
.credential-section h3{margin:0 0 8px}.credential-section .small{display:block;margin-bottom:8px}
.login-created-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;background:#ecfdf3;color:#027a48;font-size:12px;font-weight:900}


/* Create button click fix */
#saveEmp,#saveClient{pointer-events:auto!important;position:relative;z-index:50}
.modal-card input,.modal-card select,.modal-card textarea,.modal-card button{pointer-events:auto!important}


/* Package autofill notice */
.notice{line-height:1.45}


/* Super Admin Attendance Filters */
.att-filter-card{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow);margin-bottom:16px}
.att-filter-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end}
.att-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.att-summary{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.05)}
.att-summary b{display:block;font-size:24px;margin-top:6px}
.face-photo-big{width:72px;height:72px;border-radius:16px;object-fit:cover;border:2px solid var(--line);background:#f1f5f9;cursor:pointer}
.att-detail-line{font-size:12px;color:var(--muted);line-height:1.55}
@media(max-width:1050px){.att-filter-grid,.att-summary-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.att-filter-grid,.att-summary-grid{grid-template-columns:1fr}.face-photo-big{width:56px;height:56px}}


/* Expense paid option */
.paid-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;background:#ecfdf3;color:#027a48;font-size:12px;font-weight:900}
.payment-box{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(22,163,74,.06);margin-top:12px}


/* Sales CRM filter dashboard */
.sales-filter-card{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow);margin-bottom:16px}
.sales-filter-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end}
.sales-summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:14px 0}
.sales-summary{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.04)}
.sales-summary b{display:block;font-size:24px;margin-top:6px}
.lead-update-box{font-size:12px;color:var(--muted);line-height:1.55}
@media(max-width:1050px){.sales-filter-grid,.sales-summary-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.sales-filter-grid,.sales-summary-grid{grid-template-columns:1fr}}


/* Payroll rules engine */
.rule-engine-card{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow);margin-bottom:16px}
.rule-grid-pay{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rule-pay-box{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.045)}
.rule-pay-box b{display:block;margin-bottom:5px}
.deduction-list{display:grid;gap:10px}
.deduction-row{border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(239,68,68,.045)}
.release-row{border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(34,197,94,.055)}
@media(max-width:1050px){.rule-grid-pay{grid-template-columns:1fr}}


/* Announcement System Fixed */
.ann-top-banner{border:1px solid rgba(245,158,11,.35);background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(124,58,237,.08));border-radius:22px;padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow)}
.ann-top-banner b{display:block;margin:5px 0}.ann-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.ann-card{border:1px solid var(--line);border-radius:20px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow)}
.ann-type{display:inline-flex;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;background:rgba(40,22,104,.08)}
.ann-type.Holiday{background:#ecfdf3;color:#027a48}.ann-type.Notice{background:#eff6ff;color:#1d4ed8}.ann-type.WFH{background:#fff7ed;color:#c2410c}.ann-type.Important{background:#fef2f2;color:#b42318}
.ann-target{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
#addAnnBtn,#saveAnn{position:relative;z-index:60;pointer-events:auto!important}
@media(max-width:768px){.ann-grid{grid-template-columns:1fr}}


/* Hard fixed announcement click */
#addAnnBtn,#saveAnn,#saveAnnFinal{
  pointer-events:auto!important;
  position:relative!important;
  z-index:999!important;
  cursor:pointer!important;
}


/* FINAL: Announcement modal overlay fix */
body.modal-open #addAnnBtn,
.modal.active ~ #addAnnBtn,
body.announcement-modal-open #addAnnBtn{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.modal-open{overflow:hidden}
#saveAnnFinal,#saveAnn{display:inline-flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}


/* Smart Work Calendar */
.calendar-hero{background:linear-gradient(135deg,var(--p),var(--p2));color:white;border-radius:28px;padding:22px;margin-bottom:16px;box-shadow:var(--shadow)}
.calendar-toolbar{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.day-card{min-height:138px;border:1px solid var(--line);border-radius:18px;padding:10px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.035));box-shadow:0 10px 30px rgba(15,23,42,.04)}
.day-num{font-weight:950;color:var(--p2);margin-bottom:8px}
.work-pill{display:block;border-radius:12px;padding:7px 8px;margin:5px 0;font-size:11px;background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.18);cursor:pointer}
.work-pill.Completed{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25)}
.work-pill.Working{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.25)}
.work-pill.Submitted,.work-pill.Approval{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.25)}
.service-chip-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.service-chip{border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:rgba(40,22,104,.05);font-size:12px;font-weight:850}
.work-flow{display:flex;gap:8px;flex-wrap:wrap}.work-flow span{border-radius:999px;padding:7px 10px;background:rgba(40,22,104,.08);font-size:12px;font-weight:850}
.calendar-submit-box{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(34,197,94,.055);margin-top:12px}
@media(max-width:1100px){.calendar-toolbar{grid-template-columns:1fr 1fr}.month-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.calendar-toolbar,.month-grid{grid-template-columns:1fr}.day-card{min-height:auto}}


/* Smart Work Calendar Fixed */
.calendar-hero{background:linear-gradient(135deg,var(--p),var(--p2));color:white;border-radius:28px;padding:22px;margin-bottom:16px;box-shadow:var(--shadow)}
.calendar-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.day-card{min-height:138px;border:1px solid var(--line);border-radius:18px;padding:10px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.035));box-shadow:0 10px 30px rgba(15,23,42,.04)}
.day-num{font-weight:950;color:var(--p2);margin-bottom:8px}
.work-pill{display:block;border-radius:12px;padding:7px 8px;margin:5px 0;font-size:11px;background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.18);cursor:pointer}
.work-pill.Completed{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25)}
.work-pill.Working{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.25)}
.work-pill.Submitted,.work-pill.Approval{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.25)}
.service-chip-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.service-chip{border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:rgba(40,22,104,.05);font-size:12px;font-weight:850}
.calendar-submit-box{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(34,197,94,.055);margin-top:12px}
#addCalendarWorkFinal,#autoGenerateChartFinal,#saveWorkCalendarFinal,#generateChartFinal{position:relative;z-index:50;pointer-events:auto!important}
@media(max-width:1100px){.month-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.month-grid{grid-template-columns:1fr}.day-card{min-height:auto}}


/* SMART WORK CALENDAR WORKING FINAL */
#sec_workcalendar{min-height:500px}
.calendar-hero-final{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-radius:30px;padding:24px;margin-bottom:16px;box-shadow:var(--shadow)}
.calendar-hero-final h2{margin:0 0 8px;font-size:28px}
.calendar-actions-final{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.calendar-kpis-final{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.calendar-kpi-final{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--card);box-shadow:var(--shadow)}
.calendar-kpi-final b{display:block;font-size:26px;margin-top:6px}
.month-grid-final{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.day-card-final{min-height:132px;border:1px solid var(--line);border-radius:18px;padding:10px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:0 12px 32px rgba(15,23,42,.05)}
.day-num-final{font-weight:950;color:var(--p2);margin-bottom:8px}
.work-pill-final{display:block;margin:6px 0;padding:7px 8px;border-radius:12px;font-size:11px;cursor:pointer;background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.20)}
.work-pill-final.Working{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.28)}
.work-pill-final.Submitted,.work-pill-final.Approval{background:rgba(124,58,237,.14);border-color:rgba(124,58,237,.30)}
.work-pill-final.Completed{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.28)}
.service-chip-list-final{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.service-chip-final{border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:rgba(40,22,104,.05);font-size:12px;font-weight:850}
.calendar-submit-box-final{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(34,197,94,.055);margin:10px 0}
#addCalendarWorkFinal2,#autoGenerateChartFinal2,#saveWorkCalendarFinal2,#generateChartFinal2,#submitWorkFinal2,#sendApprovalFinal2{position:relative;z-index:100;pointer-events:auto!important}
@media(max-width:1050px){.calendar-kpis-final{grid-template-columns:1fr 1fr}.month-grid-final{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.calendar-kpis-final,.month-grid-final{grid-template-columns:1fr}.day-card-final{min-height:auto}}


/* Smart Calendar Modal Button Hide Fix */
body.smart-calendar-modal-open #addCalendarWorkFinal2,
body.smart-calendar-modal-open #autoGenerateChartFinal2,
body.smart-calendar-modal-open #calendarRefreshFinal2{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.smart-calendar-modal-open{overflow:hidden}
#saveWorkCalendarFinal2,#generateChartFinal2,#submitWorkFinal2,#sendApprovalFinal2{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  position:relative!important;
  z-index:999!important;
}


/* Leave Date Range + WFH */
.leave-policy-box{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(37,99,235,.06);margin:12px 0}
.wfh-badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:900}
.leave-range-chip{display:inline-flex;border-radius:999px;padding:6px 10px;background:rgba(40,22,104,.08);font-size:12px;font-weight:900}


/* Payroll Branch Analytics */
.branch-analytics-card{border:1px solid var(--line);border-radius:24px;padding:18px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.045));box-shadow:var(--shadow);margin-bottom:16px}
.branch-filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}
.branch-analytics-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:14px 0}
.branch-analytics-kpi{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.045)}
.branch-analytics-kpi small{color:var(--muted);font-weight:900}
.branch-analytics-kpi b{display:block;font-size:23px;margin-top:7px}
.branch-graph-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.branch-bar-chart{display:flex;align-items:end;gap:18px;height:180px;border-bottom:1px solid var(--line);padding:16px}
.branch-bar-item{flex:1;text-align:center}
.branch-bar{height:var(--h);min-height:8px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,var(--p2),var(--p))}
.branch-bar.exp{background:linear-gradient(180deg,#ef4444,#f97316)}
.branch-bar.profit{background:linear-gradient(180deg,#22c55e,#16a34a)}
@media(max-width:1100px){.branch-analytics-kpis{grid-template-columns:1fr 1fr 1fr}.branch-graph-grid,.branch-filter-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.branch-analytics-kpis,.branch-graph-grid,.branch-filter-grid{grid-template-columns:1fr}}


/* Sidebar Theme Presets */
.theme-preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.theme-preset-card{border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--card);cursor:pointer;text-align:center;font-weight:900;transition:.16s ease}
.theme-preset-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.theme-color-strip{height:42px;border-radius:13px;margin-bottom:8px}
.theme-custom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.sidebar-preview-final{border-radius:24px;padding:16px;color:#fff;min-height:300px;background:linear-gradient(180deg,var(--side),var(--side2));box-shadow:var(--shadow)}
.sidebar-preview-final .pv-brand{background:rgba(255,255,255,.12);border-radius:16px;padding:14px;font-weight:950;margin-bottom:12px}
.sidebar-preview-final .pv-item{background:rgba(255,255,255,.10);border-radius:14px;padding:12px;margin:8px 0;font-weight:900}
.sidebar-preview-final .pv-item.active{background:linear-gradient(90deg,var(--p),var(--p2))}
@media(max-width:900px){.theme-preset-grid,.theme-custom-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.theme-preset-grid,.theme-custom-grid{grid-template-columns:1fr}}


/* FINAL Sidebar Color Control */
.sidebar{
  background:linear-gradient(180deg,var(--side,#07040a),var(--side2,#251023))!important;
}
.nav button.active,.nav button:hover{
  background:linear-gradient(90deg,var(--p,#281668),var(--p2,#e63946))!important;
}
.sidebar-color-panel{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.045));box-shadow:var(--shadow);margin-bottom:16px}
.color-preset-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.side-preset{border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--card);cursor:pointer;text-align:center;font-weight:900}
.side-preset:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.side-preset-strip{height:38px;border-radius:12px;margin-bottom:7px}
.side-color-live{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.sidebar-mini-preview{border-radius:24px;padding:16px;color:#fff;background:linear-gradient(180deg,var(--side),var(--side2));min-height:260px}
.sidebar-mini-preview .brand{background:rgba(255,255,255,.13);border-radius:16px;padding:12px;font-weight:950;margin-bottom:12px}
.sidebar-mini-preview .item{border-radius:14px;padding:10px;margin:8px 0;background:rgba(255,255,255,.10);font-weight:900}
.sidebar-mini-preview .item.active{background:linear-gradient(90deg,var(--p),var(--p2))}
@media(max-width:900px){.color-preset-row,.side-color-live{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.color-preset-row,.side-color-live{grid-template-columns:1fr}}


/* FINAL Light/Dark Mode + Professional Background Effects */
:root{
  --bg:#f6f8ff;
  --bg2:#eef4ff;
  --card:#ffffff;
  --text:#111827;
  --muted:#667085;
  --line:#e5e7eb;
}
body.dark{
  --bg:#050816;
  --bg2:#111827;
  --card:#0f172a;
  --text:#f8fafc;
  --muted:#cbd5e1;
  --line:rgba(148,163,184,.25);
}
body{
  background:
    radial-gradient(circle at 18% 12%,rgba(124,58,237,.16),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(14,165,233,.14),transparent 30%),
    radial-gradient(circle at 55% 88%,rgba(34,197,94,.10),transparent 24%),
    linear-gradient(135deg,var(--bg),var(--bg2))!important;
  color:var(--text)!important;
}
body.dark{
  background:
    radial-gradient(circle at 20% 10%,rgba(124,58,237,.25),transparent 30%),
    radial-gradient(circle at 86% 18%,rgba(6,182,212,.18),transparent 32%),
    radial-gradient(circle at 50% 90%,rgba(16,185,129,.14),transparent 28%),
    linear-gradient(135deg,#020617,#0f172a 54%,#111827)!important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(rgba(100,116,139,.06) 1px, transparent 1px),
    linear-gradient(90deg,rgba(100,116,139,.06) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 82%);
}
body.dark::before{background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px, transparent 1px)}
.main{
  background:transparent!important;
  position:relative;
}
.main::before,.main::after{
  content:"";
  position:fixed;
  border-radius:50%;
  filter:blur(28px);
  opacity:.34;
  pointer-events:none;
  z-index:-1;
  animation:floatBgFinal 9s ease-in-out infinite alternate;
}
.main::before{width:260px;height:260px;right:6%;top:18%;background:rgba(124,58,237,.22)}
.main::after{width:220px;height:220px;left:30%;bottom:10%;background:rgba(14,165,233,.18);animation-delay:1.2s}
@keyframes floatBgFinal{from{transform:translateY(0) translateX(0)}to{transform:translateY(-22px) translateX(18px)}}
.card,.graph-card,.pro-kpi,.dash-card,.login-card,.branch-analytics-card,.sidebar-color-panel{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(18px);
  color:var(--text)!important;
  border-color:var(--line)!important;
}
body.dark .card,body.dark .graph-card,body.dark .pro-kpi,body.dark .dash-card,body.dark .login-card,body.dark .branch-analytics-card,body.dark .sidebar-color-panel{
  background:rgba(15,23,42,.82)!important;
}
.table th,.table td,input,select,textarea{
  color:var(--text)!important;
}
input,select,textarea{
  background:rgba(255,255,255,.72)!important;
  border-color:var(--line)!important;
}
body.dark input,body.dark select,body.dark textarea{
  background:rgba(15,23,42,.78)!important;
}
.topbar{
  background:rgba(255,255,255,.76)!important;
  backdrop-filter:blur(20px);
}
body.dark .topbar{
  background:rgba(15,23,42,.74)!important;
}
.theme-toggle-active{
  box-shadow:0 0 0 4px rgba(124,58,237,.12),0 18px 38px rgba(15,23,42,.10)!important;
}

/* WFH rejected deduction rule */
.wfh-safe-badge{display:inline-flex;border-radius:999px;padding:6px 10px;background:#ecfdf3;color:#027a48;font-size:12px;font-weight:900}
.wfh-risk-badge{display:inline-flex;border-radius:999px;padding:6px 10px;background:#fff7ed;color:#c2410c;font-size:12px;font-weight:900}
.wfh-deduct-badge{display:inline-flex;border-radius:999px;padding:6px 10px;background:#fef2f2;color:#b42318;font-size:12px;font-weight:900}


/* Smart Reminder Center */
.reminder-hero{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-radius:28px;padding:22px;margin-bottom:16px;box-shadow:var(--shadow)}
.reminder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.reminder-kpi{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--card);box-shadow:var(--shadow)}
.reminder-kpi b{display:block;font-size:26px;margin-top:6px}
.reminder-card-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.reminder-card{border:1px solid var(--line);border-radius:20px;padding:15px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow)}
.reminder-priority{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900}
.reminder-priority.Urgent{background:#fef2f2;color:#b42318}.reminder-priority.High{background:#fff7ed;color:#c2410c}.reminder-priority.Normal{background:#eff6ff;color:#1d4ed8}.reminder-priority.Low{background:#ecfdf3;color:#027a48}
.reminder-status{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900;background:rgba(40,22,104,.08)}
.reminder-overdue{border-color:#fca5a5;background:linear-gradient(145deg,var(--card),rgba(239,68,68,.07))}
.reminder-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.reminder-top-alert{border:1px solid rgba(239,68,68,.25);background:linear-gradient(135deg,rgba(239,68,68,.10),rgba(245,158,11,.08));border-radius:18px;padding:13px;margin-bottom:12px}
@media(max-width:1000px){.reminder-grid,.reminder-card-list{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.reminder-grid,.reminder-card-list{grid-template-columns:1fr}}


/* Role-wise Notifications */
.notify-filter-card{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow);margin-bottom:16px}
.notify-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0}
.notify-kpi{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.045)}
.notify-kpi b{display:block;font-size:24px;margin-top:5px}
.notify-row{border:1px solid var(--line);border-radius:16px;padding:12px;margin:8px 0;background:rgba(40,22,104,.035)}
.notify-meta{font-size:12px;color:var(--muted);line-height:1.5}
.notify-type{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900;background:rgba(40,22,104,.08)}
.notify-type.Task{background:#eff6ff;color:#1d4ed8}.notify-type.Sales{background:#ecfdf3;color:#027a48}.notify-type.Payroll{background:#fff7ed;color:#c2410c}.notify-type.Client{background:#f5f3ff;color:#6d28d9}.notify-type.Reminder{background:#fef2f2;color:#b42318}
@media(max-width:800px){.notify-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.notify-kpis{grid-template-columns:1fr}}


/* Company Rules & Regulations Engine */
.rules-hero{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-radius:28px;padding:22px;margin-bottom:16px;box-shadow:var(--shadow)}
.rules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.rules-kpi{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--card);box-shadow:var(--shadow)}
.rules-kpi b{display:block;font-size:25px;margin-top:5px}
.rule-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rule-card{border:1px solid var(--line);border-radius:20px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow)}
.rule-card.disabled{opacity:.55}
.rule-tag{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900;background:rgba(40,22,104,.08);margin:2px}
.rule-priority.High{background:#fef2f2;color:#b42318}.rule-priority.Medium{background:#fff7ed;color:#c2410c}.rule-priority.Low{background:#ecfdf3;color:#027a48}
.rule-target{font-size:12px;color:var(--muted);line-height:1.5;margin-top:8px}
.policy-alert{border:1px solid rgba(124,58,237,.25);background:linear-gradient(135deg,rgba(124,58,237,.10),rgba(14,165,233,.08));border-radius:18px;padding:13px;margin-bottom:12px}
@media(max-width:1000px){.rules-grid,.rule-card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.rules-grid,.rule-card-grid{grid-template-columns:1fr}}


/* Profile Settings Restored */
.profile-settings-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.profile-card-final{border:1px solid var(--line);border-radius:24px;padding:18px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow)}
.profile-preview-box{display:flex;gap:16px;align-items:center;margin:12px 0 18px;padding:14px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.045)}
.profile-preview-img{width:82px;height:82px;border-radius:24px;object-fit:cover;border:2px solid var(--line);background:#f1f5f9}
.profile-mini-info b{font-size:20px}.profile-mini-info span{color:var(--muted);font-size:13px}
.profile-save-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.profile-theme-box{border:1px dashed var(--line);border-radius:18px;padding:14px;margin-top:14px}
@media(max-width:900px){.profile-settings-grid{grid-template-columns:1fr}}


/* Quick Actions Click Fix */
.action-tile,.quick-action,.quick-card,.qa-card,[data-section]{
  cursor:pointer!important;
  user-select:none;
}
.action-tile:hover,.quick-action:hover,.quick-card:hover,.qa-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 48px rgba(15,23,42,.12)!important;
}
.action-tile:active,.quick-action:active,.quick-card:active,.qa-card:active{
  transform:translateY(0);
}


/* Employee Document Submission */
.docs-hero{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-radius:28px;padding:22px;margin-bottom:16px;box-shadow:var(--shadow)}
.docs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.docs-kpi{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--card);box-shadow:var(--shadow)}
.docs-kpi b{display:block;font-size:25px;margin-top:5px}
.doc-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.doc-card{border:1px solid var(--line);border-radius:20px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow)}
.doc-status{display:inline-flex;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}
.doc-status.Pending{background:#fff7ed;color:#c2410c}.doc-status.Approved{background:#ecfdf3;color:#027a48}.doc-status.Resubmit{background:#fef2f2;color:#b42318}
.doc-file-preview{border:1px dashed var(--line);border-radius:16px;padding:10px;margin-top:8px;background:rgba(40,22,104,.035);font-size:12px;word-break:break-word}
@media(max-width:900px){.docs-grid,.doc-card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.docs-grid,.doc-card-grid{grid-template-columns:1fr}}


/* Super Admin CRUD Management */
.crud-action-row{display:flex;gap:7px;flex-wrap:wrap}
.crud-action-row .btn{padding:8px 10px;font-size:12px;border-radius:12px}
.super-crud-panel{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow);margin-bottom:16px}
.crud-badge{display:inline-flex;border-radius:999px;padding:6px 10px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:900}


/* Branch + Package Edit Delete Fix */
.super-manage-btns{display:flex;gap:7px;flex-wrap:wrap}
.super-manage-btns .btn{padding:8px 10px;font-size:12px;border-radius:12px}


/* Professional Package Builder Edit/Delete */
.package-builder-manage{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.package-builder-manage .btn{padding:8px 10px;font-size:12px;border-radius:12px}
.package-manage-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(40,22,104,.04);margin:10px 0}


/* Super Admin User Login Management */
.user-login-hero{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-radius:28px;padding:22px;margin-bottom:16px;box-shadow:var(--shadow)}
.user-login-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.user-login-kpi{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--card);box-shadow:var(--shadow)}
.user-login-kpi b{display:block;font-size:25px;margin-top:5px}
.login-role-badge{display:inline-flex;border-radius:999px;padding:6px 10px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:900}
.login-status-badge{display:inline-flex;border-radius:999px;padding:6px 10px;background:#ecfdf3;color:#027a48;font-size:12px;font-weight:900}
.login-status-badge.disabled{background:#fef2f2;color:#b42318}
@media(max-width:900px){.user-login-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.user-login-grid{grid-template-columns:1fr}}


/* Employee Full View/Edit */
.emp-full-profile{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:start}
.emp-photo-box{border:1px solid var(--line);border-radius:24px;padding:14px;text-align:center;background:rgba(40,22,104,.04)}
.emp-photo-box img{width:120px;height:120px;border-radius:28px;object-fit:cover;border:2px solid var(--line)}
.emp-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.emp-info-item{border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(255,255,255,.045)}
.emp-info-item small{display:block;color:var(--muted);font-weight:900;margin-bottom:5px}
.emp-action-row{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:900px){.emp-full-profile{grid-template-columns:1fr}.emp-info-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.emp-info-grid{grid-template-columns:1fr}}


/* Client Credential Vault */
.cred-hero{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-radius:28px;padding:22px;margin-bottom:16px;box-shadow:var(--shadow)}
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.cred-kpi{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--card);box-shadow:var(--shadow)}
.cred-kpi b{display:block;font-size:25px;margin-top:5px}
.cred-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cred-card{border:1px solid var(--line);border-radius:20px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow)}
.cred-platform{display:inline-flex;border-radius:999px;padding:6px 10px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:900}
.cred-perm{display:inline-flex;border-radius:999px;padding:5px 8px;background:rgba(40,22,104,.08);font-size:11px;font-weight:900;margin:2px}
.cred-secret{font-family:ui-monospace,monospace;background:rgba(15,23,42,.08);padding:6px 8px;border-radius:10px;display:inline-block}
body.dark .cred-secret{background:rgba(255,255,255,.08)}
.cred-filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;margin:12px 0}
@media(max-width:900px){.cred-grid,.cred-card-grid,.cred-filter-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cred-grid,.cred-card-grid,.cred-filter-grid{grid-template-columns:1fr}}


/* Multi Platform Credentials */
.multi-cred-row{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(40,22,104,.04);margin:10px 0}
.multi-cred-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}
.multi-cred-num{display:inline-flex;width:30px;height:30px;border-radius:12px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;align-items:center;justify-content:center;font-weight:950}


/* Grouped Client Credential Profile */
.group-client-card{border:1px solid var(--line);border-radius:24px;padding:18px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow);margin-bottom:16px}
.group-client-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.platform-list-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.platform-profile-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.045)}
.platform-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.platform-meta{font-size:12px;color:var(--muted);line-height:1.5;margin-top:8px}
.client-platform-count{display:inline-flex;border-radius:999px;padding:7px 11px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:900}
@media(max-width:900px){.platform-list-grid{grid-template-columns:1fr}}

/* Credential Filter + Collapsible Client Profile */
.cred-filter-panel{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow);margin-bottom:16px}
.cred-filter-grid-final{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}
.group-client-card.collapsed .platform-list-grid{display:none}
.group-client-title{cursor:pointer;display:flex;align-items:center;gap:10px}
.group-client-title:hover{color:var(--p2)}
.client-toggle-icon{width:28px;height:28px;border-radius:10px;background:rgba(40,22,104,.08);display:inline-flex;align-items:center;justify-content:center;font-weight:950}
.client-edit-platform-box{border:1px dashed var(--line);border-radius:18px;padding:14px;margin:10px 0;background:rgba(40,22,104,.035)}
@media(max-width:900px){.cred-filter-grid-final{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cred-filter-grid-final{grid-template-columns:1fr}}


/* Bulk Credential Permission */
.bulk-perm-box{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(40,22,104,.04);margin:12px 0}
.bulk-employee-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.04)}
.bulk-employee-item{border:1px solid var(--line);border-radius:12px;padding:9px;background:var(--card);font-size:12px}
.bulk-employee-item label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
@media(max-width:900px){.bulk-employee-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bulk-employee-list{grid-template-columns:1fr}}


/* Calendar Month Navigation Fix */
.calendar-month-control{border:1px solid var(--line);border-radius:22px;padding:14px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow);margin-bottom:14px}
.calendar-month-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end}
.calendar-month-title{font-size:22px;font-weight:950;color:var(--p2)}
.month-nav-btns{display:flex;gap:8px;flex-wrap:wrap}
.future-work-badge{display:inline-flex;border-radius:999px;padding:6px 10px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:900}
.day-card-final.other-month{opacity:.45}
@media(max-width:900px){.calendar-month-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.calendar-month-grid{grid-template-columns:1fr}}


/* Sunday Paid Off Payroll Rule */
.sunday-paid-badge{display:inline-flex;border-radius:999px;padding:6px 10px;background:#ecfdf3;color:#027a48;font-size:12px;font-weight:900}
.payroll-rule-note{border:1px solid rgba(34,197,94,.25);background:linear-gradient(135deg,rgba(34,197,94,.10),rgba(14,165,233,.06));border-radius:18px;padding:13px;margin:12px 0}


/* Client Menu Cleanup + Report Download */
.report-download-panel{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow);margin-bottom:16px}
.report-download-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
@media print{.sidebar,.topbar,.bottomnav,.report-download-actions,.btn{display:none!important}.main{margin:0!important;padding:0!important}.card{box-shadow:none!important}}


/* Package Separate Edit Final */
.pkg-separate-manage{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pkg-separate-manage .btn{padding:8px 10px;font-size:12px;border-radius:12px}
.package-edit-highlight{border:1px solid rgba(37,99,235,.25);border-radius:16px;padding:10px;background:rgba(37,99,235,.055);margin-top:8px}


/* Package Card Actions Final */
.package-card-actions-final{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.package-card-actions-final .btn{
  padding:8px 11px;
  font-size:12px;
  border-radius:12px;
}
.package-card-footer-final{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}
.package-card-wrapper-final{
  position:relative;
}


/* Package Card Footer Actions Professional */
.package-card-footer-actions-final{
  margin-top:18px;
  padding:14px 0 0;
  border-top:1px solid var(--line);
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  align-items:center;
}
.package-card-footer-actions-final .btn{
  padding:9px 12px;
  font-size:12px;
  border-radius:13px;
  min-width:auto;
}
.package-card-footer-actions-final .btn.secondary{
  background:rgba(255,255,255,.85);
}
body.dark .package-card-footer-actions-final .btn.secondary{
  background:rgba(15,23,42,.85);
}
.package-card-footer-meta-final{
  width:100%;
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}
.package-card-action-holder-final{
  width:100%;
}
[data-package-actions-final],
.package-manage-card,
.package-edit-highlight{
  display:none!important;
}


/* Employee Documents Grouped View */
.docs-filter-panel-final{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow);margin-bottom:16px}
.docs-filter-grid-final{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}
.emp-doc-profile-card-final{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(40,22,104,.04));box-shadow:var(--shadow);margin-bottom:12px}
.emp-doc-head-final{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;cursor:pointer}
.emp-doc-head-final:hover h3{color:var(--p2)}
.emp-doc-toggle-final{width:30px;height:30px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(40,22,104,.08);font-weight:950}
.emp-doc-list-final{display:none;margin-top:14px}
.emp-doc-profile-card-final.open .emp-doc-list-final{display:block}
.emp-doc-kpis-final{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.emp-doc-kpis-final span{display:inline-flex;border-radius:999px;padding:6px 10px;background:rgba(40,22,104,.08);font-size:12px;font-weight:900}
.doc-mini-row-final{border:1px solid var(--line);border-radius:16px;padding:12px;margin:8px 0;background:rgba(255,255,255,.045)}
@media(max-width:900px){.docs-filter-grid-final{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.docs-filter-grid-final{grid-template-columns:1fr}}


/* Strict Role Access UI */
.role-access-note-final{
  border:1px solid rgba(37,99,235,.22);
  border-radius:18px;
  padding:12px 14px;
  background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(14,165,233,.05));
  margin-bottom:12px;
  font-size:13px;
  color:var(--muted);
}
body.role-client .admin-only-final,
body.role-employee .admin-only-final,
body.role-sales .admin-only-final,
body.role-manager .super-only-final{
  display:none!important;
}


/* Notification Clear All */
.clear-notification-note{border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(40,22,104,.045);margin:10px 0;color:var(--muted);font-size:13px}


/* Professional Client Dashboard 3D */
.client-pro-hero-final{position:relative;overflow:hidden;border-radius:32px;padding:26px;color:#fff;background:linear-gradient(135deg,#281668,#7c3aed 45%,#06b6d4);box-shadow:0 28px 70px rgba(40,22,104,.28)}
.client-pro-hero-final:before{content:"";position:absolute;width:260px;height:260px;right:-60px;top:-80px;border-radius:50%;background:rgba(255,255,255,.25)}
.client-pro-hero-final h1{font-size:34px;margin:0 0 8px;letter-spacing:-.03em}
.client-pro-kpis-final{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.client-pro-kpi-final{border:1px solid rgba(255,255,255,.45);border-radius:24px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(255,255,255,.55));backdrop-filter:blur(18px);box-shadow:0 22px 52px rgba(15,23,42,.12);transition:.18s ease}
.client-pro-kpi-final:hover{transform:perspective(900px) rotateX(3deg) translateY(-4px)}
body.dark .client-pro-kpi-final{background:linear-gradient(145deg,rgba(15,23,42,.86),rgba(15,23,42,.55))}
.client-pro-kpi-final .icon{width:46px;height:46px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;margin-bottom:10px;background:linear-gradient(135deg,var(--p),var(--p2))}
.client-pro-kpi-final b{display:block;font-size:28px;letter-spacing:-.03em}
.client-pro-layout-final{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.client-pro-card-final{border:1px solid var(--line);border-radius:28px;padding:18px;background:linear-gradient(145deg,var(--card),rgba(124,58,237,.045));box-shadow:0 24px 60px rgba(15,23,42,.10)}
.client-chart-bars-final{display:flex;align-items:end;gap:12px;height:220px;padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(124,58,237,.08),rgba(14,165,233,.04))}
.client-chart-bar-final{flex:1;border-radius:16px 16px 8px 8px;min-height:22px;background:linear-gradient(180deg,#8b5cf6,#06b6d4);box-shadow:0 12px 28px rgba(124,58,237,.22);position:relative}
.client-chart-bar-final:nth-child(2n){background:linear-gradient(180deg,#22c55e,#14b8a6)}
.client-chart-bar-final:nth-child(3n){background:linear-gradient(180deg,#f97316,#e11d48)}
.client-chart-bar-final span{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);font-weight:900}
.client-donut-final{width:210px;height:210px;border-radius:50%;margin:auto;background:conic-gradient(#7c3aed 0 45%,#06b6d4 45% 70%,#22c55e 70% 88%,#f97316 88% 100%);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 22px rgba(255,255,255,.65),0 24px 50px rgba(15,23,42,.12)}
body.dark .client-donut-final{box-shadow:inset 0 0 0 22px rgba(15,23,42,.75),0 24px 50px rgba(0,0,0,.25)}
.client-donut-final div{text-align:center;background:var(--card);border-radius:50%;width:118px;height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.client-work-timeline-final{display:grid;gap:10px}
.client-work-item-final{border:1px solid var(--line);border-radius:18px;padding:13px;background:rgba(255,255,255,.055);display:flex;justify-content:space-between;gap:12px}
.client-status-pill-final{border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;background:#eff6ff;color:#1d4ed8}
.client-status-pill-final.Completed{background:#ecfdf3;color:#027a48}.client-status-pill-final.Pending{background:#fff7ed;color:#c2410c}
@media(max-width:1000px){.client-pro-kpis-final{grid-template-columns:1fr 1fr}.client-pro-layout-final{grid-template-columns:1fr}}
@media(max-width:560px){.client-pro-kpis-final{grid-template-columns:1fr}.client-pro-hero-final h1{font-size:26px}}


/* Sales + Employee 3D Professional Dashboard */
.staff-pro-hero-final{position:relative;overflow:hidden;border-radius:32px;padding:26px;color:#fff;background:linear-gradient(135deg,#111827,#4f46e5 48%,#ec4899);box-shadow:0 28px 70px rgba(79,70,229,.28)}
.staff-pro-hero-final.sales{background:linear-gradient(135deg,#064e3b,#0ea5e9 48%,#f97316)}
.staff-pro-hero-final:before{content:"";position:absolute;width:280px;height:280px;right:-70px;top:-95px;border-radius:50%;background:rgba(255,255,255,.20)}
.staff-pro-hero-final h1{font-size:34px;margin:0 0 8px;letter-spacing:-.03em}
.staff-pro-kpis-final{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.staff-pro-kpi-final{border:1px solid rgba(255,255,255,.45);border-radius:24px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.54));backdrop-filter:blur(18px);box-shadow:0 22px 52px rgba(15,23,42,.12);transition:.18s ease}
.staff-pro-kpi-final:hover{transform:perspective(900px) rotateX(3deg) translateY(-4px)}
body.dark .staff-pro-kpi-final{background:linear-gradient(145deg,rgba(15,23,42,.88),rgba(15,23,42,.58))}
.staff-pro-kpi-final .icon{width:46px;height:46px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;margin-bottom:10px;background:linear-gradient(135deg,#7c3aed,#06b6d4)}
.staff-pro-kpi-final:nth-child(2) .icon{background:linear-gradient(135deg,#22c55e,#14b8a6)}
.staff-pro-kpi-final:nth-child(3) .icon{background:linear-gradient(135deg,#f97316,#e11d48)}
.staff-pro-kpi-final:nth-child(4) .icon{background:linear-gradient(135deg,#2563eb,#a855f7)}
.staff-pro-kpi-final b{display:block;font-size:28px;letter-spacing:-.03em}
.staff-pro-layout-final{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.staff-pro-card-final{border:1px solid var(--line);border-radius:28px;padding:18px;background:linear-gradient(145deg,var(--card),rgba(124,58,237,.045));box-shadow:0 24px 60px rgba(15,23,42,.10)}
.staff-bar-chart-final{display:flex;align-items:end;gap:12px;height:220px;padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(124,58,237,.08),rgba(14,165,233,.04))}
.staff-bar-final{flex:1;border-radius:16px 16px 8px 8px;min-height:24px;background:linear-gradient(180deg,#8b5cf6,#06b6d4);position:relative;box-shadow:0 12px 28px rgba(124,58,237,.20)}
.staff-bar-final:nth-child(2n){background:linear-gradient(180deg,#22c55e,#14b8a6)}
.staff-bar-final:nth-child(3n){background:linear-gradient(180deg,#f97316,#e11d48)}
.staff-bar-final span{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);font-weight:900}
.staff-ring-final{width:210px;height:210px;border-radius:50%;margin:auto;background:conic-gradient(#22c55e 0 var(--pct),#e5e7eb var(--pct) 100%);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 22px rgba(255,255,255,.68),0 24px 50px rgba(15,23,42,.12)}
body.dark .staff-ring-final{box-shadow:inset 0 0 0 22px rgba(15,23,42,.78),0 24px 50px rgba(0,0,0,.25)}
.staff-ring-final div{text-align:center;background:var(--card);border-radius:50%;width:118px;height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.staff-list-final{display:grid;gap:10px}
.staff-item-final{border:1px solid var(--line);border-radius:18px;padding:13px;background:rgba(255,255,255,.055);display:flex;justify-content:space-between;gap:12px}
.staff-status-final{border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;background:#eff6ff;color:#1d4ed8}
.staff-status-final.Completed,.staff-status-final.Converted{background:#ecfdf3;color:#027a48}.staff-status-final.Pending{background:#fff7ed;color:#c2410c}
@media(max-width:1000px){.staff-pro-kpis-final{grid-template-columns:1fr 1fr}.staff-pro-layout-final{grid-template-columns:1fr}}
@media(max-width:560px){.staff-pro-kpis-final{grid-template-columns:1fr}.staff-pro-hero-final h1{font-size:26px}}


/* Super Admin + Branch Manager 3D Dashboard */
.admin3d-hero-final{position:relative;overflow:hidden;border-radius:34px;padding:28px;color:#fff;background:linear-gradient(135deg,#12002f,#6d28d9 45%,#06b6d4);box-shadow:0 32px 80px rgba(109,40,217,.30)}
.admin3d-hero-final.manager{background:linear-gradient(135deg,#0f172a,#2563eb 48%,#22c55e)}
.admin3d-hero-final:before{content:"";position:absolute;width:300px;height:300px;right:-80px;top:-100px;border-radius:50%;background:rgba(255,255,255,.18)}
.admin3d-hero-final:after{content:"";position:absolute;width:180px;height:180px;left:45%;bottom:-90px;border-radius:50%;background:rgba(249,115,22,.24)}
.admin3d-hero-final h1{font-size:36px;margin:0 0 8px;letter-spacing:-.035em}
.admin3d-kpis-final{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:18px 0}
.admin3d-kpi-final{border:1px solid rgba(255,255,255,.45);border-radius:24px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.55));backdrop-filter:blur(18px);box-shadow:0 24px 58px rgba(15,23,42,.12);transition:.2s ease}
.admin3d-kpi-final:hover{transform:perspective(950px) rotateX(4deg) translateY(-5px)}
body.dark .admin3d-kpi-final{background:linear-gradient(145deg,rgba(15,23,42,.90),rgba(15,23,42,.58))}
.admin3d-kpi-final .icon{width:48px;height:48px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:21px;margin-bottom:10px;background:linear-gradient(135deg,#7c3aed,#06b6d4)}
.admin3d-kpi-final:nth-child(2) .icon{background:linear-gradient(135deg,#22c55e,#14b8a6)}
.admin3d-kpi-final:nth-child(3) .icon{background:linear-gradient(135deg,#f97316,#e11d48)}
.admin3d-kpi-final:nth-child(4) .icon{background:linear-gradient(135deg,#2563eb,#a855f7)}
.admin3d-kpi-final:nth-child(5) .icon{background:linear-gradient(135deg,#0f766e,#84cc16)}
.admin3d-kpi-final b{display:block;font-size:27px;letter-spacing:-.03em}
.admin3d-layout-final{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
.admin3d-card-final{border:1px solid var(--line);border-radius:28px;padding:18px;background:linear-gradient(145deg,var(--card),rgba(124,58,237,.045));box-shadow:0 26px 64px rgba(15,23,42,.10)}
.admin3d-bars-final{display:flex;align-items:end;gap:12px;height:235px;padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(124,58,237,.08),rgba(14,165,233,.04))}
.admin3d-bar-final{flex:1;border-radius:16px 16px 8px 8px;min-height:24px;background:linear-gradient(180deg,#8b5cf6,#06b6d4);position:relative;box-shadow:0 12px 28px rgba(124,58,237,.22)}
.admin3d-bar-final:nth-child(2n){background:linear-gradient(180deg,#22c55e,#14b8a6)}
.admin3d-bar-final:nth-child(3n){background:linear-gradient(180deg,#f97316,#e11d48)}
.admin3d-bar-final:nth-child(4n){background:linear-gradient(180deg,#2563eb,#a855f7)}
.admin3d-bar-final span{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);font-weight:900;white-space:nowrap}
.admin3d-donut-final{width:220px;height:220px;border-radius:50%;margin:auto;background:conic-gradient(#22c55e 0 var(--pct),#7c3aed var(--pct) 76%,#f97316 76% 90%,#06b6d4 90% 100%);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 22px rgba(255,255,255,.68),0 24px 50px rgba(15,23,42,.13)}
body.dark .admin3d-donut-final{box-shadow:inset 0 0 0 22px rgba(15,23,42,.78),0 24px 50px rgba(0,0,0,.28)}
.admin3d-donut-final div{text-align:center;background:var(--card);border-radius:50%;width:122px;height:122px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.admin3d-list-final{display:grid;gap:10px}
.admin3d-item-final{border:1px solid var(--line);border-radius:18px;padding:13px;background:rgba(255,255,255,.055);display:flex;justify-content:space-between;gap:12px}
.admin3d-pill-final{border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;background:#eff6ff;color:#1d4ed8}
.admin3d-pill-final.good{background:#ecfdf3;color:#027a48}.admin3d-pill-final.warn{background:#fff7ed;color:#c2410c}.admin3d-pill-final.bad{background:#fef2f2;color:#b42318}
@media(max-width:1200px){.admin3d-kpis-final{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.admin3d-kpis-final{grid-template-columns:1fr 1fr}.admin3d-layout-final{grid-template-columns:1fr}}
@media(max-width:560px){.admin3d-kpis-final{grid-template-columns:1fr}.admin3d-hero-final h1{font-size:27px}}


/* Client Only Reports */
.client-report-hero-final{border-radius:30px;padding:24px;color:#fff;background:linear-gradient(135deg,#281668,#7c3aed 50%,#06b6d4);box-shadow:0 28px 70px rgba(40,22,104,.25);margin-bottom:16px}
.client-report-grid-final{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.client-report-kpi-final{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(124,58,237,.045));box-shadow:0 18px 46px rgba(15,23,42,.10)}
.client-report-kpi-final b{display:block;font-size:27px;margin-top:6px}
.client-report-layout-final{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.client-report-card-final{border:1px solid var(--line);border-radius:26px;padding:18px;background:var(--card);box-shadow:0 22px 52px rgba(15,23,42,.10)}
.client-report-bar-wrap-final{display:flex;align-items:end;gap:12px;height:210px;padding:18px;border-radius:20px;background:linear-gradient(180deg,rgba(124,58,237,.08),rgba(14,165,233,.04))}
.client-report-bar-final{flex:1;border-radius:14px 14px 8px 8px;min-height:24px;background:linear-gradient(180deg,#8b5cf6,#06b6d4);position:relative}
.client-report-bar-final:nth-child(2n){background:linear-gradient(180deg,#22c55e,#14b8a6)}
.client-report-bar-final:nth-child(3n){background:linear-gradient(180deg,#f97316,#e11d48)}
.client-report-bar-final span{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:900;color:var(--muted)}
.client-report-row-final{border:1px solid var(--line);border-radius:16px;padding:12px;margin:8px 0;background:rgba(255,255,255,.045)}
@media(max-width:1000px){.client-report-grid-final{grid-template-columns:1fr 1fr}.client-report-layout-final{grid-template-columns:1fr}}
@media(max-width:560px){.client-report-grid-final{grid-template-columns:1fr}}


/* Employee/Sales My Payroll */
.my-payroll-hero-final{border-radius:30px;padding:24px;color:#fff;background:linear-gradient(135deg,#281668,#7c3aed 48%,#06b6d4);box-shadow:0 28px 70px rgba(40,22,104,.25);margin-bottom:16px}
.my-payroll-grid-final{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.my-payroll-kpi-final{border:1px solid var(--line);border-radius:22px;padding:16px;background:linear-gradient(145deg,var(--card),rgba(124,58,237,.045));box-shadow:0 18px 46px rgba(15,23,42,.10)}
.my-payroll-kpi-final b{display:block;font-size:27px;margin-top:6px}
.my-payroll-layout-final{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.my-payroll-card-final{border:1px solid var(--line);border-radius:26px;padding:18px;background:var(--card);box-shadow:0 22px 52px rgba(15,23,42,.10)}
.payroll-row-final{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0}
.payroll-row-final:last-child{border-bottom:0}
.payroll-positive-final{color:#027a48;font-weight:900}
.payroll-negative-final{color:#b42318;font-weight:900}
.salary-slip-final{background:#fff;color:#111;border-radius:18px;padding:20px;border:1px solid #ddd}
@media(max-width:900px){.my-payroll-grid-final,.my-payroll-layout-final{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.my-payroll-grid-final,.my-payroll-layout-final{grid-template-columns:1fr}}


/* Professional Payroll Dashboard 3D */
.payroll-pro-hero-final{position:relative;overflow:hidden;border-radius:32px;padding:26px;color:#fff;background:linear-gradient(135deg,#281668,#7c3aed 48%,#06b6d4);box-shadow:0 30px 75px rgba(40,22,104,.28);margin-bottom:16px}
.payroll-pro-hero-final:before{content:"";position:absolute;width:280px;height:280px;right:-70px;top:-95px;border-radius:50%;background:rgba(255,255,255,.18)}
.payroll-pro-hero-final h2{font-size:34px;margin:0 0 8px;letter-spacing:-.03em}
.payroll-pro-kpis-final{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.payroll-pro-kpi-final{border:1px solid rgba(255,255,255,.42);border-radius:24px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.55));backdrop-filter:blur(18px);box-shadow:0 22px 52px rgba(15,23,42,.12);transition:.18s ease}
.payroll-pro-kpi-final:hover{transform:perspective(900px) rotateX(3deg) translateY(-4px)}
body.dark .payroll-pro-kpi-final{background:linear-gradient(145deg,rgba(15,23,42,.88),rgba(15,23,42,.58))}
.payroll-pro-kpi-final .icon{width:46px;height:46px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;margin-bottom:10px;background:linear-gradient(135deg,#7c3aed,#06b6d4)}
.payroll-pro-kpi-final:nth-child(2) .icon{background:linear-gradient(135deg,#22c55e,#14b8a6)}
.payroll-pro-kpi-final:nth-child(3) .icon{background:linear-gradient(135deg,#f97316,#e11d48)}
.payroll-pro-kpi-final:nth-child(4) .icon{background:linear-gradient(135deg,#2563eb,#a855f7)}
.payroll-pro-kpi-final b{display:block;font-size:27px;letter-spacing:-.03em}
.payroll-pro-layout-final{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.payroll-pro-card-final{border:1px solid var(--line);border-radius:28px;padding:18px;background:linear-gradient(145deg,var(--card),rgba(124,58,237,.045));box-shadow:0 24px 58px rgba(15,23,42,.10)}
.payroll-pro-bars-final{display:flex;align-items:end;gap:12px;height:230px;padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(124,58,237,.08),rgba(14,165,233,.04))}
.payroll-pro-bar-final{flex:1;border-radius:16px 16px 8px 8px;min-height:24px;background:linear-gradient(180deg,#8b5cf6,#06b6d4);position:relative;box-shadow:0 12px 28px rgba(124,58,237,.22)}
.payroll-pro-bar-final:nth-child(2n){background:linear-gradient(180deg,#22c55e,#14b8a6)}
.payroll-pro-bar-final:nth-child(3n){background:linear-gradient(180deg,#f97316,#e11d48)}
.payroll-pro-bar-final span{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);font-weight:900;white-space:nowrap}
.payroll-pro-ring-final{width:220px;height:220px;border-radius:50%;margin:auto;background:conic-gradient(#22c55e 0 var(--pct),#e5e7eb var(--pct) 100%);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 22px rgba(255,255,255,.68),0 24px 50px rgba(15,23,42,.13)}
body.dark .payroll-pro-ring-final{box-shadow:inset 0 0 0 22px rgba(15,23,42,.78),0 24px 50px rgba(0,0,0,.28)}
.payroll-pro-ring-final div{text-align:center;background:var(--card);border-radius:50%;width:122px;height:122px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.payroll-rule-list-final{display:grid;gap:10px}
.payroll-rule-item-final{border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(255,255,255,.055)}
.payroll-rule-item-final b{display:block;color:var(--p2)}
.payroll-pro-row-final{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0}
.payroll-pro-row-final:last-child{border-bottom:0}
@media(max-width:1000px){.payroll-pro-kpis-final{grid-template-columns:1fr 1fr}.payroll-pro-layout-final{grid-template-columns:1fr}}
@media(max-width:560px){.payroll-pro-kpis-final{grid-template-columns:1fr}.payroll-pro-hero-final h2{font-size:26px}}


/* Remove Salary Slip From Payroll */
#mySalarySlipFinal,
.salary-slip-final,
#printMySalarySlipFinal,
#downloadMySalarySlipFinal{
  display:none!important;
}


/* Package Auto View Edit Delete Buttons */
.pkg-auto-actions-final{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}
.pkg-auto-actions-final .btn{
  padding:9px 12px;
  border-radius:13px;
  font-size:12px;
}
.pkg-auto-footer-final{
  font-size:12px;
  color:var(--muted);
  width:100%;
  margin-top:4px;
}


/* Create Package Button Fixed */
.package-builder-services-final{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:12px 0;
}
.package-service-row-final{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:rgba(40,22,104,.04);
}
@media(max-width:700px){.package-builder-services-final{grid-template-columns:1fr}}


/* Professional Profile Settings 3D */
.profile3d-hero-final{position:relative;overflow:hidden;border-radius:34px;padding:28px;color:#fff;background:linear-gradient(135deg,#12002f,#6d28d9 48%,#06b6d4);box-shadow:0 32px 80px rgba(109,40,217,.30);margin-bottom:18px}
.profile3d-hero-final:before{content:"";position:absolute;width:300px;height:300px;right:-80px;top:-100px;border-radius:50%;background:rgba(255,255,255,.18)}
.profile3d-head-final{display:flex;gap:18px;align-items:center;position:relative;z-index:1}
.profile3d-avatar-final{width:96px;height:96px;border-radius:28px;object-fit:cover;border:3px solid rgba(255,255,255,.7);background:rgba(255,255,255,.18)}
.profile3d-hero-final h2{font-size:34px;margin:0 0 8px;letter-spacing:-.03em}
.profile3d-kpis-final{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.profile3d-kpi-final{border:1px solid rgba(255,255,255,.42);border-radius:24px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.55));backdrop-filter:blur(18px);box-shadow:0 22px 52px rgba(15,23,42,.12);transition:.18s ease}
.profile3d-kpi-final:hover{transform:perspective(900px) rotateX(3deg) translateY(-4px)}
body.dark .profile3d-kpi-final{background:linear-gradient(145deg,rgba(15,23,42,.88),rgba(15,23,42,.58))}
.profile3d-kpi-final .icon{width:46px;height:46px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;margin-bottom:10px;background:linear-gradient(135deg,#7c3aed,#06b6d4)}
.profile3d-kpi-final:nth-child(2) .icon{background:linear-gradient(135deg,#22c55e,#14b8a6)}
.profile3d-kpi-final:nth-child(3) .icon{background:linear-gradient(135deg,#f97316,#e11d48)}
.profile3d-kpi-final:nth-child(4) .icon{background:linear-gradient(135deg,#2563eb,#a855f7)}
.profile3d-kpi-final b{display:block;font-size:25px;letter-spacing:-.03em}
.profile3d-layout-final{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.profile3d-card-final{border:1px solid var(--line);border-radius:28px;padding:18px;background:linear-gradient(145deg,var(--card),rgba(124,58,237,.045));box-shadow:0 24px 58px rgba(15,23,42,.10)}
.profile3d-card-final h3{margin-top:0}
.profile3d-row-final{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0}
.profile3d-row-final:last-child{border-bottom:0}
.profile3d-actions-final{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.profile3d-tabs-final{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}
.profile3d-tab-final{border:1px solid var(--line);border-radius:999px;padding:9px 13px;background:var(--card);font-weight:900;cursor:pointer}
.profile3d-tab-final.active{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff}
.profile3d-progress-final{height:12px;border-radius:999px;background:rgba(148,163,184,.25);overflow:hidden}
.profile3d-progress-final span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#06b6d4,#7c3aed)}
.theme-dot-final{display:inline-flex;width:36px;height:36px;border-radius:14px;margin:4px;border:2px solid var(--line);cursor:pointer}
@media(max-width:950px){.profile3d-kpis-final,.profile3d-layout-final{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.profile3d-kpis-final,.profile3d-layout-final{grid-template-columns:1fr}.profile3d-head-final{flex-direction:column;align-items:flex-start}.profile3d-hero-final h2{font-size:26px}}