@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Cairo',sans-serif;direction:rtl;background:#f4f6f8;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:0}
.phone{background:#fff;width:100%;max-width:420px;min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column}
.screen{display:none;flex-direction:column;min-height:100vh;background:#fff}
.screen.active{display:flex;animation:screenIn .22s cubic-bezier(.25,.8,.25,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* TOP BAR */
.top{padding:44px 18px 18px;flex-shrink:0;background:#1B2E35;border-bottom:none}
.top.green,.top.sales-top,.top.sup-top,.top.exp-top,.top.rep-top{background:#1B2E35;border-bottom:none}
.top.blue{background:#1a3a5c;border-bottom:none}
.top.slim{padding:36px 18px 14px}
/* auth PIN / staff-select keep teal */
#sc-pin .top,#sc-staff-select .top{background:#006D77!important;border-bottom:none!important}
#sc-pin .top h1,#sc-pin .top-sub,#sc-staff-select .top h1,#sc-staff-select .top-sub{color:#fff!important}
#sc-pin .back-btn,#sc-staff-select .back-btn{background:rgba(255,255,255,.2)!important;color:#fff!important}
.top-row{display:flex;justify-content:space-between;align-items:center}
.top h1{color:#fff;font-size:18px;font-weight:700}
.top-sub{color:rgba(255,255,255,.65);font-size:10px;margin-top:2px}
.back-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:6px 12px;color:#fff;font-family:'Cairo',sans-serif;font-size:11px;cursor:pointer;transition:background .15s}
.back-btn:active{background:rgba(255,255,255,.35)}
/* tabs & filter buttons on teal header */
.tabs{background:rgba(0,0,0,.18);border-radius:10px;padding:3px;gap:3px;margin-top:12px}
.tab{flex:1;padding:7px;border-radius:8px;border:none;font-family:'Cairo',sans-serif;font-size:11px;font-weight:600;cursor:pointer;background:transparent;color:rgba(255,255,255,.65)}
.tab.on{background:#fff;color:#006D77;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.rfb{padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.35);font-family:'Cairo',sans-serif;font-size:11px;cursor:pointer;background:rgba(255,255,255,.15);color:rgba(255,255,255,.9);white-space:nowrap}
.rfb.on{background:#fff;color:#006D77;border-color:#fff}

/* BODY */
.body{padding:14px;overflow-y:auto;flex:1;padding-bottom:24px}

/* BOTTOM NAV */
.bnav{display:flex;background:#f5f6f8;flex-shrink:0;padding:0 4px;border-top:1px solid #ebebeb}
.bn{flex:1;padding:8px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;border:none;background:none;border-radius:12px;margin:4px 2px;transition:background .18s}
.bn span{font-size:9px;color:#bbb;transition:color .18s}
.bn.on{background:#DFF3F5}
.bn.on span{color:#006D77;font-weight:600}
.bn svg{stroke:#bbb;transition:stroke .18s}
.bn.on svg{stroke:#006D77}

/* CARDS */
.card{background:#fff;border-radius:16px;border:1px solid #f2f2f2;padding:16px;margin-bottom:12px;animation:fadeUp .35s ease both;box-shadow:0 2px 10px rgba(0,0,0,.06)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.card:nth-child(1){animation-delay:.03s}.card:nth-child(2){animation-delay:.07s}.card:nth-child(3){animation-delay:.11s}.card:nth-child(4){animation-delay:.15s}.card:nth-child(5){animation-delay:.19s}.card:nth-child(6){animation-delay:.23s}
@keyframes flamePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.streak-flame{display:inline-block;animation:flamePulse 1.4s ease-in-out infinite}
.streak-card{background:linear-gradient(135deg,#FFF8E1,#FFF3CD);border:0.5px solid #FECF5D}
.streak-bar{height:6px;background:#f0eee8;border-radius:4px;overflow:hidden;margin-top:8px}
.streak-bar-fill{height:100%;background:linear-gradient(90deg,#FF9800,#F44336);border-radius:4px;transition:width .4s ease}
.card-title{font-size:12px;font-weight:600;color:#006D77;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.card-title.blue{color:#1a3a5c}

/* INPUTS */
.lbl{font-size:11px;color:#888;margin-bottom:5px;display:block}
.inp{width:100%;padding:11px 13px;border-radius:10px;border:1px solid #e0e0d8;font-family:'Cairo',sans-serif;font-size:13px;color:#333;margin-bottom:10px;direction:rtl;outline:none;background:#fff;transition:border-color .18s,box-shadow .18s}
.inp:focus{border-color:#006D77;border-width:1.5px;box-shadow:0 0 0 3px rgba(27,94,63,.12)}
.inp.blue:focus{border-color:#1a3a5c;box-shadow:0 0 0 3px rgba(26,58,92,.12)}
.sel{width:100%;padding:11px 13px;border-radius:10px;border:0.5px solid #ddd;font-family:'Cairo',sans-serif;font-size:13px;color:#333;margin-bottom:10px;direction:rtl;outline:none;background:#fff}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.btn{width:100%;padding:13px;border-radius:12px;background:#006D77;color:#fff;border:none;font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(27,94,63,.25)}
.btn:active{transform:scale(.97)}
.btn.success{background:#005A63!important}
@keyframes btnSuccess{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
.btn.success{animation:btnSuccess .3s ease}
.btn.blue{background:#1a3a5c}
.btn.gray{background:#f0f0ec;color:#666}
.btn.red{background:#FCEBEB;color:#A32D2D}
.btn.sm{padding:9px;font-size:12px}

/* PILLS & TAGS */
.pill{font-size:10px;padding:3px 9px;border-radius:10px;font-weight:600}
.pg{background:#E0F4F6;color:#004A52}
.pa{background:#FAEEDA;color:#633806}
.pr{background:#FCEBEB;color:#A32D2D}
.tag{font-size:10px;padding:2px 7px;border-radius:8px}
.tg{background:#E0F4F6;color:#004A52}
.tr{background:#FCEBEB;color:#A32D2D}
.ta{background:#FAEEDA;color:#854F0B}
.tb{background:#E6F1FB;color:#0C447C}

/* RECORDS */
.rec{background:#fff;border-radius:12px;border:0.5px solid #e5e5e0;overflow:hidden;margin-bottom:8px}
.rec-main{padding:11px 13px;display:flex;justify-content:space-between;align-items:center}
.rec-info .rn{font-size:13px;font-weight:600;color:#1a1a1a}
.rec-info .rm{font-size:10px;color:#aaa;margin-top:2px}
.rec-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.rec-acts{display:flex;border-top:0.5px solid #f0f0ec}
.ra{flex:1;padding:8px;border:none;background:transparent;font-family:'Cairo',sans-serif;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px}
.ra:active{background:#f5f5f5}
.ra.edit{color:#185FA5;border-left:0.5px solid #f0f0ec}
.ra.del{color:#A32D2D}
.ra.view{color:#006D77;border-left:0.5px solid #f0f0ec}

/* SUM BOX */
.sum{background:#EBF8FA;border-radius:12px;border:0.5px solid #A7D8DC;padding:12px 14px;margin-bottom:12px}
.sum-title{font-size:11px;font-weight:600;color:#005A63;margin-bottom:8px}
.sum-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:0.5px solid #A7D8DC}
.sum-row:last-child{border-bottom:none}
.sl{font-size:11px;color:#555}
.sg{font-size:12px;font-weight:600;color:#005A63}
.sr{font-size:12px;font-weight:600;color:#A32D2D}
.sa{font-size:12px;font-weight:600;color:#854F0B}

/* ALERTS */
.al{border-radius:10px;padding:9px 12px;display:flex;align-items:flex-start;gap:7px;margin-bottom:7px;font-size:11px;line-height:1.6}
.al-w{background:#FAEEDA;border:0.5px solid #FAC775;color:#633806}
.al-r{background:#FCEBEB;border:0.5px solid #F7C1C1;color:#791F1F}
.al-g{background:#E0F4F6;border:0.5px solid #A7D8DC;color:#004A52}
.al-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:4px}

/* PROGRESS */
.prog-bg{height:8px;background:#f0f0ec;border-radius:4px;overflow:hidden;margin-bottom:5px}
.prog-fill{height:100%;background:#006D77;border-radius:4px;transition:width .4s}

/* FILTER */
.fwrap{background:#fff;border-radius:12px;border:0.5px solid #e5e5e0;padding:11px;margin-bottom:12px}
.fsearch{display:flex;align-items:center;gap:8px;background:#f7f7f5;border-radius:10px;padding:8px 12px;border:0.5px solid #e0e0d8;margin-bottom:8px}
.fsearch input{border:none;outline:none;font-family:'Cairo',sans-serif;font-size:12px;color:#333;background:transparent;width:100%;direction:rtl}
.fbrow{display:flex;gap:5px;flex-wrap:wrap}
.fb{padding:4px 11px;border-radius:20px;border:0.5px solid #e0e0d8;font-family:'Cairo',sans-serif;font-size:11px;cursor:pointer;background:#fff;color:#888;white-space:nowrap}
.fb.on{background:#006D77;color:#fff;border-color:#006D77}
.fb.on-b{background:#1a3a5c;color:#fff;border-color:#1a3a5c}

/* TABS */
.tabs{display:flex;background:rgba(0,0,0,.15);border-radius:10px;padding:3px;gap:3px;margin-top:12px}
.tab{flex:1;padding:7px;border-radius:8px;border:none;font-family:'Cairo',sans-serif;font-size:11px;font-weight:600;cursor:pointer;background:transparent;color:rgba(255,255,255,.65)}
.tab.on{background:#fff;color:#006D77}

/* REMAIN */
.remain{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:10px;margin-bottom:10px;background:#f7f7f5;border:0.5px solid #e0e0d8}
.remain.paid{background:#E0F4F6;border-color:#A7D8DC}
.remain.partial{background:#FAEEDA;border-color:#FAC775}

/* MODALS */
.mover{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);align-items:flex-end;justify-content:center;z-index:100;transition:background .25s}
.mover.show{display:flex;background:rgba(0,0,0,.5)}
.mover.show .modal{animation:slideUp .28s cubic-bezier(.32,1,.46,1)}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.modal{background:#fff;border-radius:20px 20px 0 0;padding:18px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto}
.modal h3{font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:14px;text-align:center}
.mbtns{display:flex;gap:8px;margin-top:8px}
.mb{flex:1;padding:11px;border-radius:10px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;cursor:pointer;border:none}
.mb-c{background:#f5f5f5;color:#666}
.mb-s{background:#006D77;color:#fff}
.mb-b{background:#1a3a5c;color:#fff}
.mb-d{background:#FCEBEB;color:#A32D2D}
.drow{display:flex;justify-content:space-between;padding:8px 0;border-bottom:0.5px solid #f0f0ec}
.drow:last-child{border-bottom:none}
.dl{font-size:12px;color:#888}
.dv{font-size:12px;font-weight:600;color:#1a1a1a}

/* PIN */
.pin-dots{display:flex;gap:12px;justify-content:center;margin:20px 0}
.pin-dot{width:16px;height:16px;border-radius:50%;background:#e0e0d8;transition:background .15s}
.pin-dot.on{background:#006D77}
.pin-dot.on-b{background:#1a3a5c}
@keyframes pinShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.pin-dots.shake{animation:pinShake .45s ease}
@keyframes rippleAnim{to{transform:scale(1);opacity:0}}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;padding:0 20px}
.pp{padding:18px;border-radius:14px;border:0.5px solid #e5e5e0;background:#fff;font-family:'Cairo',sans-serif;font-size:20px;font-weight:600;color:#1a1a1a;cursor:pointer;text-align:center}
.pp:active{background:#f0f0ec;transform:scale(.95)}
.pp.del{font-size:14px;color:#888}

/* LOGIN — keyframes */
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes logoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.04)}}
@keyframes logoGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 30px rgba(0,201,167,.25),0 0 0 0 rgba(0,201,167,.0)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 55px rgba(0,201,167,.55),0 0 90px rgba(0,201,167,.15)}}
@keyframes orbDrift{0%{transform:translate(0,0) scale(1)}25%{transform:translate(18px,-22px) scale(1.07)}50%{transform:translate(32px,6px) scale(0.93)}75%{transform:translate(8px,22px) scale(1.06)}100%{transform:translate(0,0) scale(1)}}
@keyframes orbDrift2{0%{transform:translate(0,0)}33%{transform:translate(-22px,16px)}66%{transform:translate(12px,-12px)}100%{transform:translate(0,0)}}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(0) rotate(0deg)}45%,55%{opacity:1;transform:scale(1) rotate(180deg)}}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes liveRing{0%,100%{box-shadow:0 0 0 0 rgba(78,245,200,.6)}70%{box-shadow:0 0 0 6px rgba(78,245,200,0)}}
/* LOGIN — base */
.login-hero{padding:52px 24px 58px;text-align:center;flex-shrink:0;position:relative;overflow:hidden}
.login-hero.ph-hero{background:linear-gradient(135deg,#063323,#006D77,#008b78,#004f5a,#07301f);background-size:400% 400%;animation:gradShift 9s ease infinite}
.login-hero.st-hero{background:linear-gradient(155deg,#0a1e35 0%,#1a3a5c 55%,#2a5298 100%)}
/* orbs */
.lh-dec{position:absolute;border-radius:50%;background:rgba(255,255,255,.06)}
.lh-dec1{width:220px;height:220px;top:-80px;right:-60px;animation:orbDrift 11s ease-in-out infinite}
.lh-dec2{width:160px;height:160px;bottom:-60px;left:-50px;animation:orbDrift2 14s ease-in-out infinite}
.lh-dec3{width:80px;height:80px;top:30px;left:20px;animation:orbDrift 8s ease-in-out infinite 2s}
.lh-dec4{width:55px;height:55px;bottom:28%;right:6%;animation:orbDrift2 10s ease-in-out infinite 1s}
.lh-dec5{width:28px;height:28px;top:22%;left:14%;background:rgba(255,255,255,.1);animation:orbDrift 7s ease-in-out infinite 3s}
.lh-dec6{width:260px;height:260px;bottom:-120px;left:50%;margin-left:-130px;background:radial-gradient(circle,rgba(0,201,167,.13),transparent 70%);animation:gradShift 6s ease infinite}
/* sparkle dots */
.lh-spark{position:absolute;border-radius:50%;background:#4df5c8}
.lh-spark:nth-child(1){width:5px;height:5px;top:28%;left:20%;animation:sparkle 2.8s ease-in-out infinite}
.lh-spark:nth-child(2){width:4px;height:4px;top:58%;right:16%;animation:sparkle 3.4s ease-in-out infinite .7s}
.lh-spark:nth-child(3){width:6px;height:6px;top:42%;left:7%;animation:sparkle 3s ease-in-out infinite 1.5s}
.lh-spark:nth-child(4){width:3px;height:3px;bottom:32%;right:24%;animation:sparkle 3.8s ease-in-out infinite .3s}
.lh-spark:nth-child(5){width:5px;height:5px;top:18%;right:28%;animation:sparkle 2.5s ease-in-out infinite 1.1s}
.lh-spark:nth-child(6){width:4px;height:4px;bottom:40%;left:18%;animation:sparkle 4s ease-in-out infinite 2s}
/* logo */
.login-hero h1{color:#fff;font-size:26px;font-weight:700;margin-bottom:6px;position:relative;z-index:1;animation:fadeSlideUp .6s ease .1s both}
.login-hero p{color:rgba(255,255,255,.65);font-size:12px;position:relative;z-index:1;animation:fadeSlideUp .6s ease .25s both}
.logo-ring{width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;margin:0 auto 16px;animation:logoFloat 3.2s ease-in-out infinite,logoGlow 3.2s ease-in-out infinite}
/* stat badge */
.lh-stat-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:6px 15px;margin-bottom:14px;animation:badgeFloat 3s ease-in-out infinite,fadeSlideUp .5s ease both;font-size:11px;color:#fff;font-weight:600;position:relative;z-index:1}
.lh-stat-dot{width:7px;height:7px;border-radius:50%;background:#4df5c8;animation:liveRing 1.5s ease-in-out infinite;flex-shrink:0}
/* feature cards */
.lh-feat-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.09);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 16px;opacity:0;animation:fadeSlideUp .55s ease forwards;transition:background .25s,transform .2s}
.lh-feat-card:hover{background:rgba(255,255,255,.16);transform:translateX(-3px)}
.lh-feat-card:nth-child(1){animation-delay:.3s}
.lh-feat-card:nth-child(2){animation-delay:.48s}
.lh-feat-card:nth-child(3){animation-delay:.65s}
.login-body{background:#f5f5f3;border-radius:24px 24px 0 0;margin-top:-24px;position:relative;z-index:2;padding:22px 18px 24px;flex:1;overflow-y:auto;animation:fadeSlideUp .5s ease .15s both}
.auth-tabs{display:flex;background:#ebebea;border-radius:12px;padding:3px;gap:3px;margin-bottom:18px}
.auth-tab{flex:1;padding:9px;border-radius:10px;border:none;font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.auth-tab.on{background:#006D77;color:#fff;box-shadow:0 2px 8px rgba(27,94,63,.3)}
.auth-tab.off{background:transparent;color:#888}
.staff-sep{display:flex;align-items:center;gap:10px;margin:14px 0;color:#ccc;font-size:11px}
.staff-sep::before,.staff-sep::after{content:'';flex:1;height:0.5px;background:#e5e5e0}
.staff-entry-btn{width:100%;padding:14px 16px;border-radius:16px;border:1.5px solid #dde5ef;background:linear-gradient(135deg,#f0f4fa,#e8eef8);font-family:'Cairo',sans-serif;cursor:pointer;display:flex;align-items:center;gap:12px;text-align:right;transition:all .18s;position:relative;overflow:hidden}
.staff-entry-btn:active{transform:scale(.98)}
.staff-entry-btn::after{content:'←';position:absolute;left:16px;color:#1a3a5c;font-size:16px;font-weight:700}
.seb-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#1a3a5c,#2a5298);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 4px 12px rgba(26,58,92,.3)}
.seb-title{font-size:14px;font-weight:700;color:#1a3a5c}
.seb-sub{font-size:11px;color:#7a8fa6;margin-top:2px}
.inp-login{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid #e8e8e4;font-family:'Cairo',sans-serif;font-size:13px;color:#333;margin-bottom:10px;direction:rtl;outline:none;background:#fff;transition:border-color .18s,box-shadow .18s}
.inp-login:focus{border-color:#006D77;box-shadow:0 0 0 3px rgba(27,94,63,.1)}
.inp-login.blue:focus{border-color:#1a3a5c;box-shadow:0 0 0 3px rgba(26,58,92,.1)}

/* SHIFT */
.top.staff-teal{background:linear-gradient(135deg,#004a52 0%,#006D77 50%,#007A85 100%)}
.st-live-time{font-size:10px;color:rgba(255,255,255,.6);margin-top:1px}
.shift-tabs{display:flex;gap:6px;margin-bottom:12px}
.shift-tab{flex:1;padding:9px 6px;border-radius:12px;border:0.5px solid #e0e0d8;font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;cursor:pointer;background:#f7f7f5;color:#888;text-align:center;transition:all .18s}
.shift-tab.on{background:#006D77;color:#fff;border-color:#006D77;box-shadow:0 3px 10px rgba(0,109,119,.35)}
/* Net hero */
.st-net-hero{background:linear-gradient(135deg,#005A63,#006D77,#008080);border-radius:16px;padding:16px 18px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 18px rgba(0,109,119,.25)}
.st-net-hero-lbl{font-size:10px;color:rgba(255,255,255,.65);margin-bottom:4px;font-weight:600}
.st-net-hero-val{font-size:28px;font-weight:700;color:#fff;letter-spacing:-0.5px}
.st-shift-badge{font-size:12px;color:#fff;font-weight:700;background:rgba(255,255,255,.15);border-radius:8px;padding:4px 10px;text-align:center}
/* teal overrides for blue elements */
.card-title.blue{color:#006D77}
.inp.blue:focus{border-color:#006D77;box-shadow:0 0 0 3px rgba(0,109,119,.12)}
.btn.blue{background:#006D77}
.sel.blue{border-color:#A7D8DC}
/* Close shift */
.close-shift{width:100%;padding:17px;border-radius:16px;background:linear-gradient(135deg,#005A63,#006D77,#007A85);color:#fff;border:none;font-family:'Cairo',sans-serif;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;box-shadow:0 6px 20px rgba(0,109,119,.4);transition:opacity .15s,transform .12s}
.close-shift:active{opacity:.88;transform:scale(.98)}
.shift-ok{background:linear-gradient(135deg,#006D77,#007A85);border-radius:16px;padding:24px;text-align:center;margin-bottom:12px;color:#fff}

/* PROFIT FLASH */
.pf{border-radius:14px;padding:14px 16px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.pf.pos{background:linear-gradient(135deg,#006D77,#007A85)}
.pf.neg{background:linear-gradient(135deg,#7f1d1d,#991b1b)}
.pf.zero{background:linear-gradient(135deg,#374151,#4B5563)}

/* BAR CHART */
.brow{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.blbl{font-size:10px;color:#888;width:50px;text-align:right;flex-shrink:0}
.bwrap{flex:1;background:#f0f0ec;border-radius:4px;height:9px;overflow:hidden}
.bfill{height:100%;border-radius:4px}
.bval{font-size:10px;color:#555;width:60px;text-align:left;flex-shrink:0}

/* TOGGLE */
/* OFFLINE BANNER */
#offline-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:999;background:#854F0B;color:#fff;font-size:11px;font-weight:600;text-align:center;padding:7px;font-family:'Cairo',sans-serif}
#offline-banner.show{display:block}
.toggle{position:relative;display:inline-block;width:44px;height:24px}
.toggle input{opacity:0;width:0;height:0}
.tslider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;transition:.3s;border-radius:24px}
.tslider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.3s;border-radius:50%}
.toggle input:checked+.tslider{background:#006D77}
.toggle input:checked+.tslider:before{transform:translateX(20px)}

/* REP FILTER */
.rfb{padding:5px 12px;border-radius:20px;border:0.5px solid rgba(255,255,255,.3);font-family:'Cairo',sans-serif;font-size:11px;cursor:pointer;background:rgba(255,255,255,.2);color:#fff;white-space:nowrap}
.rfb.on{background:#fff;color:#006D77;border-color:#fff}

.sec{font-size:11px;font-weight:600;color:#888;margin-bottom:8px}
.empty{text-align:center;padding:28px 16px;color:#bbb;font-size:12px;line-height:1.8}
.empty-icon{font-size:32px;display:block;margin-bottom:6px;opacity:.5}
.pay-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:0.5px solid #f5f5f5}
.pay-row:last-child{border-bottom:none}
.add-pay{display:flex;gap:6px;margin-top:8px}
.pay-inp{flex:1;padding:8px 10px;border-radius:8px;border:0.5px solid #ddd;font-family:'Cairo',sans-serif;font-size:12px;direction:rtl;outline:none}
.pay-btn{padding:8px 12px;border-radius:8px;background:#006D77;color:#fff;border:none;font-family:'Cairo',sans-serif;font-size:12px;cursor:pointer}

/* TOAST */
#toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-80px);background:#1a1a1a;color:#fff;padding:11px 20px;border-radius:20px;font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;z-index:1001;max-width:300px;text-align:center;direction:rtl;box-shadow:0 8px 24px rgba(0,0,0,.25);display:block;opacity:0;transition:transform .3s cubic-bezier(.32,1,.46,1),opacity .3s ease;pointer-events:none;white-space:nowrap}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* CLOUD STATUS */
.cloud-bar{display:flex;align-items:center;gap:8px;background:#EBF8FA;border-radius:10px;padding:9px 12px;margin-bottom:14px;font-size:11px;color:#005A63;border:0.5px solid #A7D8DC}
.cdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* KPIS */
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.kpi{background:rgba(255,255,255,.13);border-radius:12px;padding:10px 12px}
.kpi .kl{font-size:9px;color:rgba(255,255,255,.65);margin-bottom:3px}
.kpi .kv{font-size:18px;font-weight:600;color:#fff}

/* ===== DESKTOP SIDEBAR ===== */
.dsk-sidebar{display:none;flex-direction:column;width:220px;min-width:220px;background:#1B2E35;height:100vh;flex-shrink:0;overflow-y:auto;border-left:1px solid #142228}
.dsk-logo{padding:22px 16px 16px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px}
.dsk-logo-txt{color:#fff;font-size:15px;font-weight:700;line-height:1.2}
.dsk-phname{margin:10px 8px 2px;padding:8px 12px;background:rgba(0,201,167,.15);border-radius:8px;color:rgba(255,255,255,.85);font-size:11px;font-weight:600}
.dsk-nav{flex:1;padding:10px 8px}
.dsk-nb{width:100%;padding:9px 12px;border-radius:10px;border:none;background:transparent;color:rgba(255,255,255,.65);font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin-bottom:2px;direction:rtl;transition:background .15s,color .15s}
.dsk-nb:hover{background:rgba(255,255,255,.08);color:#fff}
.dsk-nb.on{background:rgba(0,201,167,.18);color:#00C9A7}
.dsk-sep{height:1px;background:rgba(255,255,255,.1);margin:6px 8px}
.dsk-foot{padding:8px 8px 20px;border-top:1px solid rgba(255,255,255,.1)}
.dsk-user{padding:8px 14px;color:rgba(255,255,255,.4);font-size:11px}
.nb-ico{font-size:16px;flex-shrink:0}

@media(min-width:768px){
  /* ===== APP SCREENS ===== */
  body:not(.auth-mode){align-items:flex-start;padding:0}
  body:not(.auth-mode) .phone{max-width:100%;flex-direction:row;height:100vh;overflow:hidden}
  body:not(.auth-mode) .dsk-sidebar{display:flex}
  body:not(.auth-mode) .screen.active{flex:1;min-width:0;height:100vh;overflow:hidden;min-height:0}
  body:not(.auth-mode) .bnav{display:none!important}
  body:not(.auth-mode) .body{overflow-y:auto;padding:20px 28px 28px;background:#fff}
  body:not(.auth-mode) .top{background:#1B2E35;border-bottom:none}
  body:not(.auth-mode) .top{padding:16px 28px;flex-shrink:0}
  body:not(.auth-mode) .top.slim{padding:14px 28px}
  body:not(.auth-mode) .kpi-grid{grid-template-columns:repeat(4,1fr)}

  /* ===== LOGIN SPLIT LAYOUT ===== */
  body.auth-mode{align-items:stretch;padding:0}
  body.auth-mode .phone{max-width:100%;height:100vh;overflow:hidden;flex-direction:row}
  body.auth-mode .screen.active{display:flex;flex-direction:row;width:100%;min-height:100vh;animation:none}
  body.auth-mode .login-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 48px;border-radius:0}
  body.auth-mode .login-hero .lh-features{display:flex;flex-direction:column;gap:14px;margin-top:32px;width:100%;max-width:320px}
  body.auth-mode .login-body{width:440px;min-width:440px;height:100vh;overflow-y:auto;border-radius:0;margin-top:0;padding:48px 40px;display:flex;flex-direction:column;justify-content:center;background:#fff;box-shadow:-8px 0 40px rgba(0,0,0,.1)}
  body.auth-mode .login-body .cloud-bar{display:none}
  body.auth-mode .logo-ring{width:110px;height:110px}
  body.auth-mode .logo-ring svg{width:68px;height:68px}
  body.auth-mode .login-hero h1{font-size:34px;margin-bottom:8px}
  body.auth-mode .login-hero p{font-size:14px}
  .hkpi-grid{grid-template-columns:repeat(4,1fr)!important}
  .today-kpi-grid{grid-template-columns:repeat(4,1fr)!important}
  .qa-grid{grid-template-columns:repeat(6,1fr)!important}
}

/* ===== SUMMARY COLLAPSIBLE CARDS ===== */
.sum-card{background:#fff;border-radius:16px;border:1px solid #f2f2f2;overflow:hidden;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,.06);animation:fadeUp .35s ease both}
.sum-card-hdr{padding:16px;display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.sum-card-hdr:active{background:#f9f9f9}
.sum-card-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.sci-teal{background:#E0F4F6}
.sci-amber{background:#FFF8E1}
.sum-card-meta{flex:1;min-width:0}
.sum-card-lbl{font-size:10px;color:#999;margin-bottom:2px;font-weight:500}
.sum-card-val{font-size:22px;font-weight:700;color:#1a1a1a}
.sum-card-sub{font-size:10px;color:#aaa;margin-top:2px}
.sum-card-arr{width:28px;height:28px;border-radius:50%;background:#f5f5f5;display:flex;align-items:center;justify-content:center;transition:transform .25s;flex-shrink:0}
.sum-card-body{padding:0 16px 16px;border-top:0.5px solid #f0f0ec;display:none}
.sum-card-body.open{display:block;animation:fadeUp .2s ease}
.skpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.skpi{border-radius:12px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.skpi-lbl{font-size:10px;margin-bottom:4px;font-weight:600}
.skpi-val{font-size:16px;font-weight:800}
.sk-teal{background:#E6F5F3;border:1px solid #c4e7e2}.sk-teal .skpi-lbl{color:#005A63}.sk-teal .skpi-val{color:#006D77}
.sk-red{background:#FEF2F2;border:1px solid #fecaca}.sk-red .skpi-lbl{color:#A32D2D}.sk-red .skpi-val{color:#A32D2D}
.sk-blue{background:#EEF4FF;border:1px solid #c3d5fb}.sk-blue .skpi-lbl{color:#1d4ed8}.sk-blue .skpi-val{color:#2563EB}
.sk-amber{background:#FFF8EC;border:1px solid #fde5a4}.sk-amber .skpi-lbl{color:#92400E}.sk-amber .skpi-val{color:#C27803}
.tgt-section{margin-top:14px;background:#f8f9fa;border-radius:12px;padding:12px 14px}
.tgt-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tgt-lbl{font-size:11px;font-weight:600;color:#555}
.tgt-pct{font-size:20px;font-weight:700;color:#006D77}
.tgt-bar{height:8px;background:#e5e5e0;border-radius:4px;overflow:hidden;margin-bottom:6px}
.tgt-fill{height:100%;background:linear-gradient(90deg,#006D77,#00B4C5);border-radius:4px;transition:width .5s ease}
.tgt-footer{display:flex;justify-content:space-between}
.tgt-done{font-size:10px;color:#006D77;font-weight:600}
.tgt-goal{font-size:10px;color:#aaa}
.net-banner{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#006D77,#007A85);border-radius:12px;padding:12px 16px;color:#fff;margin-top:12px}

/* ===== DASHBOARD ANALYTICS STYLES ===== */
.hkpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hkpi{text-align:center;background:rgba(255,255,255,.13);border-radius:12px;padding:10px 6px;backdrop-filter:blur(4px)}
.hkpi-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto 5px;font-size:14px}
.hkpi-v{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hkpi-l{font-size:9px;color:rgba(255,255,255,.6);margin-top:2px}

.today-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.today-kpi{border-radius:12px;padding:12px 10px}
.tkpi-label{font-size:10px;margin-bottom:4px}
.tkpi-val{font-size:16px;font-weight:700}
.green-kpi{background:#EBF8FA;border:0.5px solid #A7D8DC}.green-kpi .tkpi-label{color:#005A63}.green-kpi .tkpi-val{color:#005A63}
.red-kpi{background:#FCEBEB;border:0.5px solid #F7C1C1}.red-kpi .tkpi-label{color:#A32D2D}.red-kpi .tkpi-val{color:#A32D2D}
.blue-kpi{background:#E6F1FB;border:0.5px solid #BFD9F2}.blue-kpi .tkpi-label{color:#0C447C}.blue-kpi .tkpi-val{color:#0C447C}
.amber-kpi{background:#FAEEDA;border:0.5px solid #FAC775}.amber-kpi .tkpi-label{color:#854F0B}.amber-kpi .tkpi-val{color:#854F0B}

.net-today-banner{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#006D77,#007A85);border-radius:12px;padding:12px 16px;color:#fff}

.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qa-btn{border:none;border-radius:12px;padding:13px 8px;font-family:'Cairo',sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:600;transition:transform .12s;width:100%;position:relative;overflow:hidden}
.qa-btn:active{transform:scale(.95)}
.green-qa{background:#E0F4F6;color:#005A63;border:0.5px solid #A7D8DC}
.red-qa{background:#FCEBEB;color:#A32D2D;border:0.5px solid #F7C1C1}
.blue-qa{background:#E6F1FB;color:#0C447C;border:0.5px solid #BFD9F2}

/* ===== KPI HERO DASHBOARD ===== */
.kpi-hero{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.kpi-tile{border-radius:16px;padding:16px 14px 14px;cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 10px rgba(0,0,0,.07);-webkit-tap-highlight-color:transparent;border:1px solid transparent}
.kpi-tile:active{transform:scale(.97);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.kpi-ico{font-size:22px;line-height:1}
.kpi-val{font-size:18px;font-weight:800;line-height:1.2;margin-top:3px}
.kpi-lbl{font-size:10px;font-weight:600;margin-top:1px;opacity:.7}
/* tile variants — pastel backgrounds, colored text */
.kpi-green{background:#E6F5F3;border-color:#c4e7e2}
.kpi-green .kpi-val{color:#006D77}.kpi-green .kpi-lbl{color:#006D77}
.kpi-teal{background:#EAF7F4;border-color:#b8e0da}
.kpi-teal .kpi-val{color:#005A63}.kpi-teal .kpi-lbl{color:#005A63}
.kpi-blue{background:#EEF4FF;border-color:#c3d5fb}
.kpi-blue .kpi-val{color:#2563EB}.kpi-blue .kpi-lbl{color:#2563EB}
.kpi-amber{background:#FFF8EC;border-color:#fde5a4}
.kpi-amber .kpi-val{color:#C27803}.kpi-amber .kpi-lbl{color:#C27803}

/* ===== PRINT ===== */
@media print{
  .top,.bnav,.dsk-sidebar,#fab-wrap,#fab-overlay,#toast,#offline-banner,#trial-banner,#update-banner{display:none!important}
  .screen{display:block!important;min-height:unset}
  .screen.active{display:block!important;animation:none}
  .card{break-inside:avoid;box-shadow:none!important;border:0.5px solid #ccc!important}
  body{background:#fff;padding:0}
  .phone{max-width:100%;box-shadow:none;background:#fff}
  .body{overflow:visible!important;padding:12px!important}
}

.support-card{background:linear-gradient(135deg,#f8fffe 0%,#f4f8ff 100%);border:0.5px solid #dde8f0}
.support-btn{border:none;border-radius:14px;padding:18px 12px;font-family:'Cairo',sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;transition:transform .12s,box-shadow .12s;position:relative;overflow:hidden}
.support-btn:active{transform:scale(.97)}
.tech-btn{background:linear-gradient(135deg,#f0f4fa,#e8eef8);border:1px solid #dde5ef}
.feedback-btn{background:linear-gradient(135deg,#EBF8FA,#e8f5ee);border:1px solid #A7D8DC}

/* ===== VOICE INPUT ===== */
.voice-btn{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#006D77,#007A85);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(0,109,119,.3);transition:transform .12s}
.voice-btn:active{transform:scale(.9)}
.voice-btn svg{stroke:#fff}
.v-mic-ring{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#006D77,#007A85);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 4px 20px rgba(0,109,119,.35);transition:box-shadow .3s}
.v-mic-ring.listening{animation:voicePulse 1.2s ease-in-out infinite}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(0,109,119,.5),0 4px 20px rgba(0,109,119,.35)}60%{box-shadow:0 0 0 18px rgba(0,109,119,0),0 4px 20px rgba(0,109,119,.35)}}
.v-input-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.v-input-row .inp{margin-bottom:0;flex:1}
.fb-type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.fb-type-btn{border:1.5px solid #e5e5e0;border-radius:12px;padding:10px;font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:#666;transition:all .15s;text-align:center}
.fb-type-btn.on{border-color:#006D77;background:#E0F4F6;color:#006D77}

/* ===== ADVISOR ===== */
#adv-content ul{padding-right:18px;margin:8px 0}
#adv-content li{margin-bottom:6px;line-height:1.7;font-size:12px}
#adv-content strong{color:#006D77}
#adv-content p{margin-bottom:10px;font-size:12px;line-height:1.8}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ===== ONBOARDING WIZARD ===== */
.ob-feat-row{background:#EBF8FA;border-radius:12px;padding:12px 16px;font-size:13px;color:#005A63;font-weight:600;display:flex;align-items:center;gap:12px;text-align:right}
.ob-cta{width:100%;padding:14px;border-radius:14px;background:linear-gradient(135deg,#006D77,#007A85);color:#fff;border:none;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,109,119,.3);transition:transform .12s}
.ob-cta:active{transform:scale(.97)}
.ob-target-btn{border:1.5px solid #dde;border-radius:12px;padding:13px 10px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;cursor:pointer;background:#fff;color:#333;transition:all .15s}
.ob-target-btn.on,.ob-target-btn:active{border-color:#006D77;background:#EBF8FA;color:#006D77}
.ob-progress-wrap{height:4px;background:#e0f0f3;border-radius:4px;overflow:hidden;margin-bottom:4px}
.ob-bar-fill{height:4px;background:linear-gradient(90deg,#006D77,#00C9A7);border-radius:4px;transition:width .4s ease;width:0}
.ob-dot{width:8px;height:8px;border-radius:50%;background:#dde;transition:all .3s}
.ob-dot.active{background:#006D77;width:20px;border-radius:4px}
.ob-dot.done{background:#00C9A7}

/* ===== TRIAL BANNER ===== */
.trial-banner{position:fixed;top:0;left:0;right:0;z-index:997;display:flex;align-items:center;justify-content:space-between;padding:4px 12px;font-family:'Cairo',sans-serif;font-size:11px;font-weight:600;gap:8px;min-height:30px}
.trial-ok{background:#1B4048;color:#fff;border-bottom:1px solid rgba(0,201,167,.2)}
.trial-warn{background:#6b3b07;color:#fff;border-bottom:1px solid rgba(250,199,117,.2)}
.trial-txt{flex:1;font-size:11px;line-height:1.4}
.trial-upgrade-btn{background:rgba(0,201,167,.25);border:1px solid rgba(0,201,167,.5);border-radius:8px;color:#00C9A7;font-family:'Cairo',sans-serif;font-size:10px;font-weight:700;padding:3px 10px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.trial-upgrade-btn:active{opacity:.8}
/* push screens down when trial banner is visible */
.trial-banner[style*="flex"] ~ .phone .screen.active,
body.has-trial-banner .phone .screen.active{padding-top:30px}
/* desktop: RTL sidebar is on the RIGHT — exclude it from banner */
@media(min-width:768px){.trial-banner{right:220px;left:0}}

/* ===== PAYROLL ===== */
.pay-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.pay-hero-card{border-radius:12px;padding:14px 10px;text-align:center}
.pay-staff-row{padding:14px;border-radius:14px;margin-bottom:10px;border:1px solid #f0f0ec;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.pay-staff-name{font-size:14px;font-weight:700;color:#1a1a1a}
.pay-staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.pay-staff-cell{background:#f7f7f5;border-radius:8px;padding:6px 8px;text-align:center}
.pay-staff-cell-lbl{font-size:9px;color:#aaa;margin-bottom:2px}
.pay-staff-cell-val{font-size:12px;font-weight:700;color:#333}
.pay-net-row{display:flex;justify-content:space-between;align-items:center;background:#EBF8FA;border-radius:10px;padding:10px 14px;border:0.5px solid #A7D8DC}
.pay-rate-btn{background:#EBF8FA;border:0.5px solid #A7D8DC;border-radius:8px;padding:4px 10px;color:#006D77;font-family:'Cairo',sans-serif;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.pay-rate-btn:active{opacity:.8}
.pay-adj-btn{background:rgba(0,109,119,.12);border:none;border-radius:8px;padding:4px 10px;color:#006D77;font-family:'Cairo',sans-serif;font-size:10px;font-weight:600;cursor:pointer;white-space:nowrap}
.pay-adj-btn:active{opacity:.8}