*{margin:0;padding:0;box-sizing:border-box;}
:root{
  /* ShopBook24 Premium Palette */
  --bg:#F8F4EF;--bg2:#FDF8F3;--bg3:#FFF5EA;
  --sidebar:#0F0500;--sidebar2:#1A0A00;
  --primary:#D4600A;--primary-h:#B8500A;--primary-l:#FBEADB;
  --gold:#E8A820;--gold-l:#FDF6DC;
  --text:#1A0A00;--text2:#6B4C32;--text3:#A87D5A;
  --border:#ECD9C2;--border2:#DFC4A0;--card:#FFFFFF;
  --ok:#0F7A40;--ok-bg:#E4F5EE;
  --err:#C0281E;--err-bg:#FDECEA;
  --warn:#9A6800;--warn-bg:#FDF3DC;
  --info:#1248A0;--info-bg:#E4EEF9;
  --sw:260px;
  --radius:16px;--radius-sm:10px;
  --shadow:0 2px 12px rgba(180,100,20,0.08);
  --shadow-md:0 4px 24px rgba(180,100,20,0.12);
  --shadow-lg:0 8px 40px rgba(180,100,20,0.16);
}
body{font-family:'Nunito','Noto Sans',sans-serif;background:var(--bg);color:var(--text);min-block-size:100vh;overflow-x:hidden;}

/* ══════════════════════════════════════════
   LOGIN / AUTH SCREEN — Full Redesign
   ══════════════════════════════════════════ */
#login-screen{position:fixed;inset:0;z-index:999;display:flex;background:#0D0500;visibility:hidden;opacity:0;transition:opacity 0.3s ease, visibility 0.3s ease;pointer-events:none;}
#login-screen.hidden{visibility:hidden;opacity:0;pointer-events:none;}
#login-screen.visible{visibility:visible;opacity:1;pointer-events:auto;}

/* Left panel — rich visual brand side */
.ls-left{
  flex:1;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#0D0500 0%,#1E0A00 35%,#2D1200 65%,#1A0800 100%);
  display:flex;flex-direction:column;padding:0;
  justify-content:center;align-items:center;
}
/* animated mesh bg */
.ls-left-mesh{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(212,104,15,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(232,168,32,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(180,60,0,0.08) 0%, transparent 70%);
}
/* floating orb animations */
.ls-orb{position:absolute;border-radius:50%;filter:blur(60px);animation:orbFloat 8s ease-in-out infinite;}
.ls-orb-1{inline-size:300px;block-size:300px;background:rgba(212,104,15,0.15);inset-block-start:-80px;inset-inline-end:-60px;animation-delay:0s;}
.ls-orb-2{inline-size:200px;block-size:200px;background:rgba(232,168,32,0.10);inset-block-end:100px;inset-inline-start:-40px;animation-delay:-3s;}
.ls-orb-3{inline-size:150px;block-size:150px;background:rgba(255,100,0,0.08);inset-block-start:50%;inset-inline-start:30%;animation-delay:-5s;}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-30px) scale(1.05);}}

/* brand area */
.ls-brand-wrap{position:relative;z-index:1;padding:32px 40px;flex-shrink:0;text-align:center;}
.ls-logo-pill{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(212,104,15,0.15),rgba(232,168,32,0.12));border:1.5px solid rgba(212,104,15,0.4);border-radius:50px;padding:10px 18px 10px 12px;margin-block-end:20px;box-shadow:0 4px 20px rgba(212,104,15,0.15);margin-inline:auto;}
.ls-logo-sq{inline-size:36px;block-size:36px;background:linear-gradient(135deg,#D4680F,#FF9240);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 12px rgba(212,104,15,0.3);}
.ls-logo-pill span{font-size:14px;font-weight:800;color:#FFD4A0;letter-spacing:.4px;}
.ls-hero-title{font-family:'Sora',sans-serif;font-size:40px;font-weight:800;color:#FFE8D0;line-height:1.2;letter-spacing:-1px;margin-block-end:12px;}
.ls-hero-title em{background:linear-gradient(135deg,#FFB366,#FFD4A0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal;}
.ls-hero-sub{font-size:15px;color:#FFD4A0;line-height:1.6;max-inline-size:360px;font-weight:500;margin:0 auto;}

/* feature list */
.ls-feat-list{position:relative;z-index:1;padding:40px;flex:1;display:flex;flex-direction:column;justify-content:center;}
.ls-feat-item{display:flex;align-items:flex-start;gap:14px;margin-block-end:20px;opacity:1;transition:all 0.3s ease;}
.ls-feat-item:hover{transform:translateX(8px);}
.ls-feat-item:last-child{margin-block-end:0;}
.ls-feat-dot{inline-size:48px;block-size:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;background:rgba(255,255,255,0.08);border:1.5px solid rgba(212,104,15,0.3);box-shadow:0 4px 16px rgba(212,104,15,0.25);}
.ls-feat-dot.orange{background:linear-gradient(135deg,rgba(212,104,15,0.25),rgba(255,146,64,0.15));border-color:rgba(212,104,15,0.5);box-shadow:0 4px 16px rgba(212,104,15,0.25);}
.ls-feat-dot.gold{background:linear-gradient(135deg,rgba(232,168,32,0.25),rgba(232,168,32,0.15));border-color:rgba(232,168,32,0.5);box-shadow:0 4px 16px rgba(232,168,32,0.25);}
.ls-feat-dot.green{background:linear-gradient(135deg,rgba(30,122,80,0.25),rgba(30,122,80,0.15));border-color:rgba(30,122,80,0.5);box-shadow:0 4px 16px rgba(30,122,80,0.25);}
.ls-feat-dot.blue{background:linear-gradient(135deg,rgba(21,88,160,0.25),rgba(21,88,160,0.15));border-color:rgba(21,88,160,0.5);box-shadow:0 4px 16px rgba(21,88,160,0.25);}
.ls-feat-body strong{display:block;font-size:15px;font-weight:800;color:#FFE8D0;margin-block-end:4px;letter-spacing:-0.2px;}
.ls-feat-body span{font-size:13px;color:#FFD4A0;line-height:1.5;font-weight:500;}
.ls-feat-body p{font-size:13px;color:#FFD4A0;line-height:1.5;font-weight:500;margin:0;}

/* bottom stats strip */
.ls-stats-strip{position:relative;z-index:1;padding:32px 40px;display:flex;gap:32px;justify-content:center;}
.ls-stat{border-inline-start:2.5px solid rgba(255,212,160,0.5);padding-inline-start:16px;}
.ls-stat-num{font-family:'Sora',sans-serif;font-size:24px;font-weight:800;background:linear-gradient(135deg,#FFD4A0,#FFE8D0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ls-stat-lbl{font-size:12px;color:#FFD4A0;margin-block-start:4px;font-weight:600;}

/* ── RIGHT PANEL ── */
.ls-right{
  inline-size:560px;flex-shrink:0;
  background:linear-gradient(135deg,#fff 0%,#FDFCFB 100%);
  display:flex;flex-direction:column;
  overflow-y:auto;
  position:relative;
  box-shadow:-8px 0 40px rgba(0,0,0,0.08);
  justify-content:center;
}

/* form container */
.ls-form-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px 52px 48px;}

/* Welcome Section */
.ls-welcome-section{
  text-align:center;margin-block-end:48px;
}
.ls-welcome-icon{font-size:64px;margin-block-end:20px;display:block;}
.ls-welcome-title{
  font-family:'Sora',sans-serif;
  font-size:32px;font-weight:900;
  color:#1A0A00;
  margin-block-end:12px;
  line-height:1.1;
  letter-spacing:-0.5px;
}
.ls-welcome-subtitle{
  font-size:15px;
  color:#999;
  line-height:1.6;
  margin:0;
}

/* Large Google Button */
.ls-btn-lg{
  padding:20px 24px !important;
  font-size:17px !important;
  border-radius:16px !important;
  margin-block-end:24px !important;
  box-shadow:0 8px 32px rgba(212,104,15,0.2) !important;
}
.ls-btn-lg:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 12px 48px rgba(212,104,15,0.28) !important;
}

/* Trust Badge */
.ls-trust-badge{
  background:linear-gradient(135deg,#F8F8F8,#FAFAF9);
  border:1.5px solid #E8E8E4;
  border-radius:14px;
  padding:20px 20px;
  margin-block-end:32px;
}
.ls-trust-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14px;
  color:#666;
  line-height:1.5;
  margin-block-end:12px;
}
.ls-trust-row:last-child{margin-block-end:0;}
.ls-trust-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  inline-size:22px;
  block-size:22px;
  background:#D4680F;
  color:#fff;
  border-radius:50%;
  flex-shrink:0;
  font-size:12px;
  font-weight:800;
}

/* top strip on right */
.ls-right-top{
  padding:26px 44px 0;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.ls-right-logo{font-family:'Sora',sans-serif;font-size:19px;font-weight:800;color:#1A0A00;letter-spacing:-0.6px;}
.ls-right-logo em{color:#D4680F;font-style:normal;font-weight:900;}
.ls-right-version{font-size:11px;background:linear-gradient(135deg,#FFE8D0,#FFD4A0);color:#D4680F;padding:4px 11px;border-radius:20px;font-weight:800;letter-spacing:0.5px;}

/* step animations */
@keyframes stepSlideIn{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}}
@keyframes stepSlideBack{from{opacity:0;transform:translateX(-24px);}to{opacity:1;transform:none;}}
.ls-step{inline-size:100%;}
.ls-step.anim-in{animation:stepSlideIn .3s cubic-bezier(.25,.46,.45,.94);}
.ls-step.anim-back{animation:stepSlideBack .3s cubic-bezier(.25,.46,.45,.94);}

/* step header */
.ls-step-badge{display:inline-flex;align-items:center;gap:6px;background:#FBE9D6;color:#D4680F;font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;margin-block-end:14px;letter-spacing:.3px;}
.ls-step-h{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:#1A0A00;margin-block-end:12px;line-height:1.2;letter-spacing:-0.3px;}
.ls-step-desc{font-size:14px;color:#888;margin-block-end:28px;line-height:1.65;}
.ls-step-desc strong{color:#D4680F;font-weight:800;}

/* input fields */
.ls-field{margin-block-end:14px;}
.ls-field-label{font-size:11.5px;font-weight:800;color:#666;text-transform:uppercase;letter-spacing:.6px;margin-block-end:7px;display:block;}
.ls-field-inner{position:relative;}
.ls-field-icon{position:absolute;inset-inline-start:14px;inset-block-start:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;z-index:1;}
.ls-field-prefix{position:absolute;inset-inline-start:14px;inset-block-start:50%;transform:translateY(-50%);font-size:13.5px;font-weight:800;color:#666;pointer-events:none;z-index:1;background:#fff;padding-inline-end:8px;border-inline-end:1.5px solid #ddd;margin-inline-end:8px;}
.ls-inp{
  inline-size:100%;padding:13px 16px;
  border:1.5px solid #ddd;border-radius:12px;
  font-size:14px;font-family:'Nunito',sans-serif;
  color:#1A0A00;background:#fff;
  transition:all .22s;-webkit-appearance:none;appearance:none;
}
.ls-inp:focus{outline:none;border-color:#D4680F;box-shadow:0 0 0 5px rgba(212,104,15,0.09);}
.ls-inp.has-icon{padding-inline-start:46px;}
.ls-inp.has-prefix{padding-inline-start:88px;}
.ls-inp.err{border-color:#C0321E!important;background:#FFF9F9;box-shadow:0 0 0 4px rgba(192,50,30,0.07);}
.ls-inp:disabled{background:#f5f5f5;color:#999;cursor:not-allowed;}
.ls-field-err{font-size:12px;color:#C0321E;font-weight:700;margin-block-start:6px;display:none;align-items:center;gap:5px;}
.ls-field-err.show{display:flex;}

/* buttons */
.ls-btn{
  inline-size:100%;padding:15px;border-radius:13px;
  font-size:15px;font-weight:800;cursor:pointer;border:none;
  font-family:'Nunito',sans-serif;
  transition:all .22s;
  display:flex;align-items:center;justify-content:center;gap:10px;
  position:relative;overflow:hidden;
}
.ls-btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .18s;}
.ls-btn:hover::after{background:rgba(255,255,255,0.07);}
.ls-btn-p{background:linear-gradient(135deg,#D4680F 0%,#E8820A 100%);color:#fff;box-shadow:0 6px 20px rgba(212,104,15,0.35);font-weight:700;}
.ls-btn-p:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(212,104,15,0.45);}
.ls-btn-p:active{transform:translateY(-1px);box-shadow:0 4px 12px rgba(212,104,15,0.25);}
.ls-btn-p:disabled{background:linear-gradient(135deg,#e8d8c8,#d4c8b8);box-shadow:none;cursor:not-allowed;transform:none;}
.ls-btn-g{background:#fff;color:#1A0A00;border:1.5px solid #ddd;font-weight:700;}
.ls-btn-g:hover{border-color:#D4680F;background:#fafaf9;box-shadow:0 8px 24px rgba(0,0,0,0.12);transform:translateY(-2px);}
.ls-btn-outline{background:transparent;color:#D4680F;border:2px solid #EDD9C0;}
.ls-btn-outline:hover{background:#FBE9D6;border-color:#D4680F;}

/* divider */
.ls-divider{display:flex;align-items:center;gap:14px;margin:18px 0;}
.ls-divider span{font-size:12px;font-weight:700;color:#999;white-space:nowrap;}
.ls-divider::before,.ls-divider::after{content:'';flex:1;block-size:1px;background:#ddd;}

/* OTP inputs */
.otp-row{display:flex;gap:11px;margin-block-end:8px;}
.otp-box{
  flex:1;block-size:64px;
  border:1.5px solid #ddd;border-radius:14px;
  font-size:26px;font-weight:800;text-align:center;
  font-family:'Sora',sans-serif;color:#1A0A00;
  background:#fff;transition:all .22s;
  caret-color:#D4680F;
}
.otp-box:focus{outline:none;border-color:#D4680F;box-shadow:0 0 0 5px rgba(212,104,15,0.09);}
.otp-box.filled{border-color:#D4680F;background:#FBE9D6;color:#D4680F;}
.otp-box.verified{border-color:#1E7A50;background:#E6F5EE;color:#1E7A50;}
.otp-box.err{border-color:#C0321E;background:#FFF0EE;animation:shake .35s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* phone display badge */
.phone-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:#f5f5f5;border:1.5px solid #ddd;
  border-radius:12px;padding:10px 16px;margin-block-end:22px;
  font-size:14px;font-weight:700;color:#1A0A00;inline-size:100%;
}
.phone-badge-icon{font-size:18px;}
.phone-badge-edit{margin-inline-start:auto;font-size:12px;color:#D4680F;cursor:pointer;font-weight:700;border:none;background:none;font-family:'Nunito',sans-serif;}

/* resend */
.ls-resend{text-align:center;font-size:13px;color:#999;margin:14px 0;}
.ls-resend-btn{background:none;border:none;color:#D4680F;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;font-size:13px;}
.ls-resend-btn:disabled{color:#ccc;cursor:default;}

/* OTP hint */
.otp-hint{
  background:#fef9f0;
  border:1.5px solid #ddd;border-radius:12px;
  padding:11px 16px;margin-block-end:18px;
  display:flex;align-items:center;gap:12px;
}
.otp-hint-label{font-size:12px;font-weight:700;color:#A07010;}
.otp-hint-code{font-family:'Sora',sans-serif;font-size:24px;font-weight:800;color:#D4680F;letter-spacing:6px;}

/* step counter */
.ls-step-counter{display:flex;align-items:center;gap:8px;margin-block-end:22px;}
.ls-sc-dot{inline-size:28px;block-size:5px;border-radius:10px;background:#ddd;transition:all .3s;}
.ls-sc-dot.active{background:#D4680F;inline-size:40px;}
.ls-sc-dot.done{background:#1E7A50;}

/* role cards */
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block-end:18px;}
.role-card{
  border:1.5px solid #ddd;border-radius:14px;
  padding:18px 14px;cursor:pointer;
  transition:all .22s;text-align:center;
  background:#fff;position:relative;overflow:hidden;
}
.role-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,104,15,0),rgba(212,104,15,0));transition:all .22s;}
.role-card:hover{border-color:#D4680F;transform:translateY(-2px);box-shadow:0 6px 20px rgba(212,104,15,0.12);}
.role-card.selected{border-color:#D4680F;background:linear-gradient(135deg,#FBE9D6,#FFF0E4);}
.role-card.selected::before{background:linear-gradient(135deg,rgba(212,104,15,0.05),rgba(212,104,15,0));}
.role-check{position:absolute;inset-block-start:10px;inset-inline-end:10px;inline-size:20px;block-size:20px;background:#D4680F;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:11px;color:#fff;}
.role-card.selected .role-check{display:flex;}
.role-icon{font-size:28px;margin-block-end:9px;}
.role-name{font-size:13.5px;font-weight:800;color:#1A0A00;margin-block-end:3px;}
.role-desc{font-size:11.5px;color:#999;line-height:1.45;}

/* success screen */
.ls-success-wrap{text-align:center;padding:20px 0;}
.ls-success-ring{
  inline-size:90px;block-size:90px;border-radius:50%;
  background:linear-gradient(135deg,#E6F5EE,#C8EDD8);
  border:3px solid #A8D5B5;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:40px;margin-block-end:20px;
  animation:successPop .5s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes successPop{from{transform:scale(0.3);opacity:0;}to{transform:scale(1);opacity:1;}}
.ls-success-name{font-family:'Sora',sans-serif;font-size:26px;font-weight:800;color:#1A0A00;margin-block-end:6px;}
.ls-success-sub{font-size:14px;color:#999;margin-block-end:28px;}
.ls-progress-track{block-size:5px;background:#ddd;border-radius:10px;overflow:hidden;margin-block-end:12px;}
.ls-progress-fill{block-size:100%;background:linear-gradient(90deg,#D4680F,#E8A820);border-radius:10px;transition:width .35s ease;}
.ls-loading-text{font-size:13px;color:#999;font-weight:600;}

/* back btn */
.ls-back{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;
  color:#999;font-size:13px;font-weight:700;
  cursor:pointer;font-family:'Nunito',sans-serif;
  padding:0;margin-block-end:22px;
  transition:color .18s;
}
.ls-back:hover{color:#D4680F;}
.ls-back-arrow{inline-size:26px;block-size:26px;background:#f5f5f5;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;}

/* footer */
.ls-footer-text{font-size:12px;color:#999;text-align:center;margin-block-start:24px;line-height:1.7;font-weight:500;}
.ls-footer-text a{color:#D4680F;font-weight:700;text-decoration:none;}
.ls-footer-text strong{color:#1A0A00;font-weight:700;}

/* switch link */
.ls-switch{text-align:center;font-size:13.5px;color:#999;margin-block-start:18px;}
.ls-switch button{background:none;border:none;color:#D4680F;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;font-size:13.5px;}

/* google btn icon */
.g-icon{inline-size:20px;block-size:20px;flex-shrink:0;}

/* spinner */
.ls-spin{display:inline-block;inline-size:18px;block-size:18px;border:3px solid rgba(255,255,255,0.35);border-block-start-color:#fff;border-radius:50%;animation:lsSpin .65s linear infinite;}
@keyframes lsSpin{to{transform:rotate(360deg)}}

/* mobile */
@media(max-width:880px){
  .ls-left{display:none;}
  .ls-right{inline-size:100%;min-block-size:100vh;}
  .ls-form-wrap{
    padding:28px 32px;
    justify-content:flex-start;
    padding-block-start:max(60px, calc(env(safe-area-inset-top, 0px) + 28px));
    padding-block-end:max(40px, calc(env(safe-area-inset-bottom, 0px) + 28px));
  }
}
@media(max-width:480px){
  .ls-form-wrap{
    padding:20px 20px;
    padding-block-start:max(40px, calc(env(safe-area-inset-top, 0px) + 20px));
    padding-block-end:max(32px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  }
  .ls-welcome-section{margin-block-end:28px;}
  .ls-welcome-title{font-size:24px;}
  .ls-welcome-icon{font-size:48px;margin-block-end:14px;}
  .ls-welcome-subtitle{font-size:13px;}
  .ls-trust-badge{padding:14px;}
  .ls-trust-row{font-size:13px;}
  .ls-btn-lg{padding:16px 20px!important;font-size:15px!important;}
  .otp-box{block-size:52px;font-size:20px;border-radius:10px;}
  /* OTP row: 4 boxes fit better with slightly smaller gap on tiny screens */
  .otp-row{gap:8px;}
  /* Role cards: maintain 2 columns but allow text wrap */
  .role-card{padding:14px 10px;}
  .role-name{font-size:12.5px;}
  .role-desc{font-size:11px;}
}

/* ── APP WRAPPER ── */
#app{display:flex;min-block-size:100vh;visibility:hidden;opacity:0;transition:opacity 0.5s ease, visibility 0.5s ease;pointer-events:none;}
#app.show{visibility:visible;opacity:1;pointer-events:auto;}

/* ── SIDEBAR ── */
#sidebar{inline-size:min(var(--sw), 85vw);background:linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar2) 100%);display:flex;flex-direction:column;flex-shrink:0;position:fixed;inset-block-start:0;inset-inline-start:0;block-size:100vh;overflow-y:auto;z-index:120;transition:transform .25s;--sb-icon-size:18px;--sb-icon-stroke:42px;}
.sb-logo{padding:20px 18px 14px;border-block-end:1px solid rgba(255,255,255,0.06);}
.sb-brand{font-family:'Sora',sans-serif;font-size:22px;font-weight:800;color:#FFF6ED;letter-spacing:-1px;}
.sb-brand em{color:var(--gold);font-style:normal;}
.sb-v{font-size:10px;background:rgba(255,200,100,.15);color:rgba(255,200,100,.7);padding:2px 7px;border-radius:20px;margin-inline-start:4px;}
/* v15 — Fixed: Misc Expenses tab added, yearly plan price fixed (₹3,999), trial banner dismiss padding fixed, version label corrected, d-misc wired to dashboard */
.sb-biz{margin:10px 12px 10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:10px 12px;}
.sb-biz-name{font-size:13px;font-weight:700;color:rgba(255,230,190,.9);}
.sb-biz-sub{font-size:10.5px;color:rgba(255,190,120,.5);margin-block-start:1px;}
.sb-nav{padding:6px 0;flex:1;}
.sb-sec{font-size:9px;font-weight:700;letter-spacing:1.7px;color:rgba(255,190,120,.36);padding:12px 18px 4px;text-transform:uppercase;}
.sb-item{display:flex;align-items:center;gap:11px;padding:10px 14px 10px 18px;min-block-size:40px;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;color:rgba(255,220,180,.66);font-size:13.5px;font-weight:600;line-height:1.16;border-inline-start:3px solid transparent;user-select:none;}
.sb-item:hover{background:rgba(255,255,255,.06);color:rgba(255,236,208,.97);transform:translateX(1px);}
.sb-item.active{background:linear-gradient(90deg,rgba(212,104,15,.28) 0%,rgba(212,104,15,.18) 100%);color:#FFD9AB;border-inline-start-color:var(--primary);}
.sb-item .sb-label{flex:1;min-inline-size:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-icon{font-size:var(--sb-icon-size);inline-size:20px;block-size:20px;text-align:center;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:rgba(255,210,160,.86);}
.sb-icon ion-icon{display:block;font-size:var(--sb-icon-size);inline-size:var(--sb-icon-size);block-size:var(--sb-icon-size);--ionicon-stroke-width:var(--sb-icon-stroke);}
.sb-item:hover .sb-icon,.sb-item.active .sb-icon{color:currentColor;}
.sb-badge{margin-inline-start:auto;background:var(--err);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:20px;}
.sb-user{margin:0 12px 12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;}
.sb-user-av{inline-size:32px;block-size:32px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0;}
.sb-user-name{font-size:12px;font-weight:700;color:rgba(255,230,190,.9);}
.sb-user-role{font-size:10px;color:rgba(255,190,120,.5);}
.sb-logout{margin-block-start:auto;padding:12px 18px;border-block-start:1px solid rgba(255,255,255,0.06);}
.logout-btn{inline-size:100%;padding:9px;background:rgba(192,50,30,.15);border:1px solid rgba(192,50,30,.3);border-radius:9px;color:rgba(255,120,100,.8);font-size:13px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif;transition:all .18s;}
.logout-btn:hover{background:rgba(192,50,30,.3);}
#sb-toggle{display:none;position:fixed;inset-block-start:max(6px, calc(env(safe-area-inset-top, 0px) + 6px));inset-inline-start:10px;z-index:130;background:var(--sidebar);border:none;border-radius:10px;inline-size:42px;block-size:42px;cursor:pointer;font-size:20px;color:#FFD4A0;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.3);}

/* ── MAIN ── */
#main{margin-inline-start:var(--sw);flex:1;min-block-size:100vh;display:flex;flex-direction:column;}
.topbar{background:var(--card);border-block-end:1.5px solid var(--border);padding:13px 26px;display:flex;align-items:center;justify-content:space-between;position:sticky;inset-block-start:0;z-index:60;gap:12px;padding-block-start:max(13px, calc(env(safe-area-inset-top, 0px) + 4px));}
.tb-title{font-family:'Sora',sans-serif;font-size:17px;font-weight:700;color:var(--text);}
.tb-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tb-date{font-size:12px;background:var(--primary-l);padding:6px 13px;border-radius:20px;font-weight:700;color:var(--primary);}
.tb-search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;padding:0 12px;block-size:36px;}
.tb-search input{border:none;background:transparent;font-size:13px;font-family:'Nunito',sans-serif;color:var(--text);inline-size:170px;}
.tb-search input:focus{outline:none;}
.content{padding:22px 26px;flex:1;}
.section{display:none;animation:fadeIn .2s ease;}.section.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── CARDS ── */
.card{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:18px 22px;margin-block-end:16px;}
.card-title{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:var(--text);margin-block-end:14px;display:flex;align-items:center;justify-content:space-between;}
.card-title span{display:flex;align-items:center;gap:7px;}

/* ── STAT CARDS ── */
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-block-end:18px;}
.sc{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:16px 18px;}
.sc-icon{font-size:20px;margin-block-end:7px;}
.sc-label{font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;margin-block-end:5px;}
.sc-value{font-family:'Sora',sans-serif;font-size:21px;font-weight:800;color:var(--text);}
.sc-sub{font-size:11px;color:var(--text3);margin-block-start:3px;}
.sc.orange{background:var(--primary);border-color:var(--primary-h);}
.sc.orange .sc-label{color:rgba(255,230,200,.7);}
.sc.orange .sc-value{color:#fff;}
.sc.orange .sc-sub{color:rgba(255,230,200,.7);}
.sc.green{background:var(--ok-bg);border-color:#A8D5B5;}.sc.green .sc-value{color:var(--ok);}
.sc.red{background:var(--err-bg);border-color:#F5C6C6;}.sc.red .sc-value{color:var(--err);}

/* ── TABLE ── */
.tbl{inline-size:100%;border-collapse:collapse;font-size:13px;}
.tbl th{background:#F9F1E8;color:var(--text2);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;padding:9px 13px;text-align:start;border-block-end:2px solid var(--border);white-space:nowrap;}
.tbl td{padding:10px 13px;border-block-end:1px solid var(--border);color:var(--text);vertical-align:middle;}
.tbl tr:last-child td{border-block-end:none;}
.tbl tr:hover td{background:#FFF4E8;}
.tbl-wrap{overflow-x:auto;}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;}
.b-ok{background:var(--ok-bg);color:var(--ok);}
.b-err{background:var(--err-bg);color:var(--err);}
.b-warn{background:var(--warn-bg);color:var(--warn);}
.b-info{background:var(--info-bg);color:var(--info);}
.b-neu{background:#F0E8DE;color:var(--text2);}
.b-gold{background:var(--gold-l);color:#7A5500;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .16s;font-family:'Nunito',sans-serif;white-space:nowrap;}
.btn:active{transform:scale(.97);}
.btn-p{background:var(--primary);color:#fff;}.btn-p:hover{background:var(--primary-h);}
.btn-s{background:var(--primary-l);color:var(--primary);border:1.5px solid var(--border);}.btn-s:hover{background:#F0D8C0;}
.btn-ok{background:var(--ok-bg);color:var(--ok);border:1px solid #A8D5B5;}
.btn-err{background:var(--err-bg);color:var(--err);border:1px solid #F5C6C6;}
.btn-ghost{background:transparent;color:var(--text2);border:1.5px solid var(--border);}.btn-ghost:hover{background:var(--bg);}
.btn-wa{background:#25D366;color:#fff;}.btn-wa:hover{background:#128C7E;}
.btn-warn{background:var(--warn-bg);color:var(--warn);border:1px solid #D4B060;}.btn-warn:hover{background:#F5E4A0;}
.btn-sm{padding:5px 11px;font-size:11.5px;border-radius:7px;}

/* ── FORMS ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.fg{display:flex;flex-direction:column;gap:5px;}
.fg label{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;}
.fg input,.fg select,.fg textarea{padding:9px 12px;border:1.5px solid var(--border);border-radius:9px;font-size:13.5px;font-family:'Nunito',sans-serif;color:var(--text);background:#FDFAF7;transition:border .18s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--primary);}
.fg textarea{resize:vertical;min-block-size:70px;}
.form-actions{display:flex;gap:9px;justify-content:flex-end;margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--border);}

/* ── MODAL ── */
.mo{display:none;position:fixed;inset:0;background:rgba(15,5,0,.6);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
.mo.open{display:flex;}
.mo-box{background:var(--card);border-radius:18px;padding:24px 26px;inline-size:500px;max-inline-size:96vw;max-block-size:92vh;overflow-y:auto;position:relative;animation:slideUp .2s ease;}
.mo-lg{inline-size:660px;}.mo-xl{inline-size:800px;}
@keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.mo-box h2{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:var(--text);margin-block-end:18px;padding-block-end:12px;border-block-end:1.5px solid var(--border);}
.mo-close{position:absolute;inset-block-start:14px;inset-inline-end:14px;background:var(--bg);border:none;inline-size:28px;block-size:28px;border-radius:50%;cursor:pointer;font-size:15px;color:var(--text2);display:flex;align-items:center;justify-content:center;}

/* ── PAGE HEADER ── */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-block-end:18px;gap:12px;flex-wrap:wrap;}
.ph h1{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;color:var(--text);}
.ph p,.ph .ph-p{font-size:12px;color:var(--text3);margin-block-start:2px;}
.ph-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* ── AVATAR ── */
.av{inline-size:32px;block-size:32px;border-radius:50%;background:var(--primary-l);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:var(--primary);flex-shrink:0;}

/* ── CHART WRAPPER ── */
.chart-wrap{position:relative;block-size:220px;inline-size:100%;}
.chart-wrap-sm{position:relative;block-size:160px;inline-size:100%;}

/* ── SALE ITEM ROW ── */
.sir{display:grid;grid-template-columns:2.4fr .8fr 1.1fr .9fr 30px;gap:7px;align-items:center;padding:9px 0;border-block-end:1px dashed var(--border);}
.sir:last-child{border-block-end:none;}
.sir-inp{padding:8px 9px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-family:'Nunito',sans-serif;color:var(--text);background:#FDFAF7;inline-size:100%;}
.sir-inp:focus{outline:none;border-color:var(--primary);}
.sir-del{background:var(--err-bg);color:var(--err);border:none;inline-size:28px;block-size:28px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.sir-inp.err{border-color:var(--err)!important;background:var(--err-bg)!important;animation:inputShake .3s ease;}
@keyframes inputShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* Hide native number input spinners on qty/price — cleaner on mobile */
.qty-inp::-webkit-inner-spin-button,
.qty-inp::-webkit-outer-spin-button,
.price-inp::-webkit-inner-spin-button,
.price-inp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.qty-inp,.price-inp{-moz-appearance:textfield;appearance:textfield;}

/* ── ANALYSIS CARDS ── */
.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.prog-bar{block-size:6px;background:var(--border);border-radius:10px;overflow:hidden;margin-block-start:5px;}
.prog-fill{block-size:100%;background:var(--primary);border-radius:10px;transition:width .5s;}
.prog-fill.ok{background:var(--ok);}

/* ── WA BILL PREVIEW ── */
.wa-preview{background:#E5DDD5;border-radius:14px;padding:16px;font-family:'Nunito',sans-serif;}
.wa-bubble{background:#fff;border-radius:12px;padding:14px 16px;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.1);}
.wa-bubble::before{content:'';position:absolute;inset-block-start:0;inset-inline-start:-8px;inline-size:0;block-size:0;border-style:solid;border-width:0 10px 10px 0;border-color:transparent #fff transparent transparent;}
.wa-header{background:linear-gradient(135deg,#1A0D05,#D4680F);color:#fff;border-radius:8px;padding:10px 12px;margin-block-end:10px;text-align:center;}
.wa-header-name{font-size:15px;font-weight:800;letter-spacing:.5px;}
.wa-header-sub{font-size:10px;opacity:.8;margin-block-start:2px;}
.wa-divider{border:none;border-block-start:1px dashed rgba(0,0,0,.12);margin:8px 0;}
.wa-row{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;}
.wa-row strong{font-weight:700;}
.wa-item{padding:5px 0;border-block-end:1px dotted rgba(0,0,0,.08);}
.wa-item:last-child{border-block-end:none;}
.wa-item-name{font-size:12.5px;font-weight:700;color:#1A0D05;}
.wa-item-detail{font-size:11px;color:#7A5A42;margin-block-start:1px;}
.wa-total{background:#D4680F;color:#fff;border-radius:8px;padding:9px 12px;margin-block-start:8px;display:flex;justify-content:space-between;align-items:center;}
.wa-total-label{font-size:12px;font-weight:700;opacity:.9;}
.wa-total-amt{font-size:16px;font-weight:800;}
.wa-footer{text-align:center;font-size:10.5px;color:#7A5A42;margin-block-start:8px;padding-block-start:6px;border-block-start:1px dashed rgba(0,0,0,.1);}
.wa-time{text-align:end;font-size:10px;color:rgba(0,0,0,.4);margin-block-start:4px;}

/* ── TOAST ── */
#toast{position:fixed;inset-block-end:22px;inset-inline-end:22px;background:#1F0E02;color:#FFD4A0;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:700;z-index:999;opacity:0;transform:translateY(8px);transition:all .28s;pointer-events:none;max-inline-size:300px;}
#toast.show{opacity:1;transform:none;}
#toast.err{background:var(--err);color:#fff;}
@media(max-width:600px){
  #toast{
    inset-block-end:calc(82px + env(safe-area-inset-bottom, 0px));
    inset-inline-end:12px;
    inset-inline-start:12px;
    max-inline-size:calc(100vw - 24px);
    text-align:center;
  }
}

/* ── HELP SECTION ── */
.help-item{border-block-end:1px solid var(--border);cursor:pointer;user-select:none;}
.help-item:last-child{border-block-end:none;}
.help-q{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 4px;font-size:13.5px;font-weight:700;color:var(--text);transition:color .15s;}
.help-item:hover .help-q{color:var(--primary);}
.help-arrow{font-size:11px;color:var(--text3);transition:transform .22s;flex-shrink:0;}
.help-arrow.open{transform:rotate(180deg);color:var(--primary);}
.help-a{display:none;font-size:13px;color:var(--text2);line-height:1.8;padding:4px 4px 14px;animation:fadeIn .18s ease;}
.help-a.open{display:block;}
@media(max-width:700px){#help-grid{grid-template-columns:1fr!important;}#help-contact-strip{grid-template-columns:repeat(2,1fr)!important;}#storage-diagram-grid{grid-template-columns:1fr!important;}#storage-diagram-grid>*:nth-child(2),#storage-diagram-grid>*:nth-child(4){display:none!important;}#play-store-steps{grid-template-columns:1fr 1fr!important;}}
@media(max-width:480px){#help-contact-strip{grid-template-columns:repeat(2,1fr)!important;}#play-store-steps{grid-template-columns:1fr!important;}}

/* ── CONFIRMATION MODAL ── */
#mo-confirm{display:none;position:fixed;inset:0;background:rgba(15,5,0,.65);z-index:9999;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:16px;}
#mo-confirm.open{display:flex;}
#mo-confirm-box{background:#fff;border-radius:18px;padding:28px 26px;inline-size:360px;max-inline-size:min(94vw, 360px);text-align:center;animation:slideUp .2s ease;box-shadow:0 16px 60px rgba(0,0,0,0.2);margin:auto;}
#mo-confirm-icon{font-size:42px;margin-block-end:12px;}
#mo-confirm-title{font-family:'Sora',sans-serif;font-size:17px;font-weight:800;color:var(--text);margin-block-end:8px;}
#mo-confirm-msg{font-size:13px;color:var(--text2);line-height:1.65;margin-block-end:22px;}
#mo-confirm-actions{display:flex;gap:10px;justify-content:center;}
#mo-confirm-actions .btn{min-inline-size:110px;justify-content:center;}

/* ── FLOATING WHATSAPP BUTTON ── */
#float-wa{position:fixed;inset-block-end:max(80px, calc(env(safe-area-inset-bottom,0px) + 24px));inset-inline-end:18px;z-index:140;inline-size:52px;block-size:52px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,0.45);cursor:pointer;transition:transform .2s,box-shadow .2s;text-decoration:none;border:3px solid rgba(255,255,255,0.9);}
#float-wa:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(37,211,102,0.5);}
#float-wa ion-icon{font-size:26px;color:#fff;}
#float-wa .float-wa-tooltip{position:absolute;inset-inline-end:60px;background:#1A0A00;color:#FFD4A0;font-size:12px;font-weight:700;padding:6px 12px;border-radius:9px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;}
#float-wa:hover .float-wa-tooltip{opacity:1;}
@media(max-width:600px){
  #float-wa{
    display:flex;
    inline-size:50px;
    block-size:50px;
    inset-inline-end:14px;
    inset-block-end:max(76px, calc(env(safe-area-inset-bottom,0px) + 74px));
  }
}
@media(max-height:500px){
  #float-wa{
    inline-size:46px;
    block-size:46px;
    inset-inline-end:max(12px, env(safe-area-inset-right, 0px));
    inset-block-end:max(12px, env(safe-area-inset-bottom, 0px));
  }
}
.empty{text-align:center;padding:44px 20px;color:var(--text3);}
.empty .ei{font-size:42px;margin-block-end:10px;}
.empty h3{font-size:14px;font-weight:700;color:var(--text2);margin-block-end:5px;}

.badge.b-info{background:var(--info-bg);color:var(--info);}
/* ── EXPENSE TABS ── */
.exp-tab{padding:8px 16px;border-radius:9px;border:none;font-size:13px;font-weight:700;cursor:pointer;background:transparent;color:var(--text2);font-family:'Nunito',sans-serif;transition:all .2s;}
.exp-tab.exp-tab-active{background:#fff;color:var(--primary);box-shadow:0 1px 4px rgba(0,0,0,.08);}
@media(max-width:600px){.exp-tab{padding:7px 11px;font-size:12px;}}
/* ── PERIOD BUTTONS (Reports / Analysis) ── */
.period-btn{padding:5px 10px;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;font-size:11.5px;font-weight:700;color:var(--text2);cursor:pointer;font-family:'Nunito',sans-serif;transition:all .18s;}
.period-btn.period-btn-active{background:var(--primary-l);border-color:var(--border2);color:var(--primary);}
@media(max-width:700px){
  #settings-grid{grid-template-columns:1fr!important;}
  .settings-sub-grid{grid-template-columns:1fr!important;}
  .settings-sub-divider{display:none!important;}
  .settings-sub-left{padding:16px 0 0!important;}
  .settings-sub-right{padding:16px 0 0!important;border-radius:0!important;}
}
/* ── Print ── */
@media print{
  #sidebar,#topbar,#mobile-nav,#sb-toggle,#sb-overlay,.no-print,#float-wa{display:none!important;}
  #main{margin-inline-start:0!important;margin-inline-start:0!important;}
  body{background:#fff!important;padding:0!important;margin:0!important;}
  .mo{position:static!important;background:none!important;display:block!important;backdrop-filter:none!important;}
  .mo-box{box-shadow:none!important;overflow:visible!important;max-block-size:none!important;max-block-size:none!important;border-radius:0!important;padding:0!important;inline-size:100%!important;inline-size:100%!important;animation:none!important;}
  .mo-box::before{display:none!important;}
  #bill-panel-wa{display:none!important;}
  #bill-panel-preview{display:block!important;}
  #bill-print-view{padding:0!important;}
  #branded-bill-wrap{border-radius:0!important;box-shadow:none!important;}
  @page{margin:8mm;size:A4 portrait;}
}

/* ── Login screen — hide left panel on tablets/mobile — consolidated above at 880px ── */

/* ── Business health strip: collapse to 3+2 on tablet, all stacked on mobile ── */
@media(max-width:960px){
  #d-health-strip > div{grid-template-columns:repeat(3,1fr)!important;}
}
@media(max-width:600px){
  #d-health-strip > div{grid-template-columns:repeat(2,1fr)!important;border-radius:10px;}
  #d-health-strip > div > div{border-inline-end:none!important;border-block-end:1px solid var(--border)!important;}
}
/* ── Capital Tracker responsive ── */
@media(max-width:960px){
  #d-capital-content > div:first-child{grid-template-columns:repeat(2,1fr)!important;}
  #d-capital-content > div:first-child > div{border-inline-end:none!important;border-block-end:1px solid var(--border)!important;}
}
@media(max-width:480px){
  #d-capital-content > div:first-child{grid-template-columns:1fr 1fr!important;}
}
/* 5-column spending grid responsive */
@media(max-width:960px){
  #d-spend-grid{grid-template-columns:repeat(3,1fr)!important;}
}
@media(max-width:600px){
  #d-spend-grid{grid-template-columns:repeat(2,1fr)!important;}
}

/* ── Dashboard Hero responsive ── */
@media(max-width:960px){
  #sec-dashboard > div:first-child{flex-direction:column;gap:14px;}
  #sec-dashboard > div:first-child > div:last-child{text-align:start;}
}
@media(max-width:600px){
  #sec-dashboard > div:first-child > div:nth-child(2){flex-wrap:wrap;gap:12px;}
  #sec-dashboard > div:first-child > div:nth-child(2) > div[style*="inline-size:1px"]{display:none;}
}

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET (≤960px)
   ══════════════════════════════════════════ */
@media(max-width:960px){
  .sg{grid-template-columns:repeat(2,1fr);}
  #sidebar{transform:translateX(-100%);z-index:200;}
  #sidebar.open{transform:none;}
  #sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:199;backdrop-filter:blur(2px);}
  #sb-overlay.show{display:block;}
  #main{margin-inline-start:0;}
  #sb-toggle{display:flex;}
  .topbar{padding:13px 14px 13px 64px;gap:8px;}
  .tb-right{gap:6px;}
  .tb-search{display:none;}
  .tb-date{display:none;}
  .content{padding:14px 14px 112px;}
  .analysis-grid{grid-template-columns:1fr;}
  /* dashboard charts stack */
  #sec-dashboard .content > div[style*="grid-template-columns:1.6fr"]{display:flex;flex-direction:column;gap:14px;}
  #sec-dashboard .content > div[style*="grid-template-columns:1fr 1fr"]{display:flex;flex-direction:column;gap:14px;}
}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤600px)
   ══════════════════════════════════════════ */
@media(max-width:600px){
  /* ── Grid & layout ── */
  .sg{grid-template-columns:1fr 1fr;gap:10px;}
  .sc{padding:12px 14px;}
  .sc-value{font-size:17px;}
  .form-grid{grid-template-columns:1fr;}
  /* .sir layout defined below with nth-child(4) fix */

  /* ── Content ── */
  .content{padding:12px 12px 100px;}
  .card{padding:14px 14px;border-radius:12px;}
  /* ── Page headers ── */
  .ph{flex-direction:column;align-items:flex-start;gap:10px;}
  .ph-r{flex-wrap:wrap;gap:6px;inline-size:100%;}
  .ph-r input,.ph-r select{flex:1;min-inline-size:0;}
  .ph h1{font-size:18px;}

  /* ── Topbar ── */
  .topbar{padding:10px 12px 10px 62px;padding-block-start:max(10px, calc(env(safe-area-inset-top, 0px) + 4px));align-items:center;min-block-size:52px;}
  .tb-title{font-size:15px;line-height:1.2;flex:1;min-inline-size:0;max-inline-size:calc(100vw - 170px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tb-right{justify-content:flex-end;max-inline-size:45vw;}
  #lang-toggle-btn span{display:none;}
  #lang-toggle-btn{padding:0;inline-size:36px;block-size:36px;justify-content:center;flex-shrink:0;}
  #sync-indicator{padding:6px 10px!important;font-size:11px!important;min-block-size:36px;}

  /* ── Tables → horizontal scroll ── */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tbl{min-inline-size:500px;}
  .tbl th,.tbl td{padding:8px 10px;font-size:12px;}

  /* ── Modals ── */
  .mo-box{inline-size:96vw!important;padding:18px 16px;border-radius:16px;max-block-size:94vh;}
  .mo{align-items:flex-end;padding-block-end:0;}
  .mo-box{border-end-start-radius:0!important;border-end-end-radius:0!important;animation:slideUpMo .25s ease;}
  @keyframes slideUpMo{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}

  /* ── New sale items header — hide on mobile (2-col layout is self-labelled) ── */
  #s-items-header{display:none!important;}

  /* ── SIR 2-col layout: give qty/price/total meaningful layout ── */
  .sir{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .sir > *:nth-child(1){grid-column:1 / -1;} /* product name full width */
  .sir > *:nth-child(4){grid-column:1 / 2;} /* total amount left */
  .sir > *:nth-child(5){grid-column:2 / 3;justify-self:end;align-self:center;} /* delete btn right */

  /* ── New sale form ── */
  #sec-newsale > div[style*="grid-template-columns:1.3fr"]{display:flex;flex-direction:column;gap:14px;}

  /* ── Dashboard charts ── */
  div[style*="grid-template-columns:1.6fr 1fr"]{display:flex!important;flex-direction:column;gap:14px;}
  div[style*="grid-template-columns:1fr 1fr"]:not(.role-grid):not(.otp-row){display:flex!important;flex-direction:column;gap:14px;}
  div[style*="grid-template-columns:1.2fr 0.8fr"]{display:flex!important;flex-direction:column;gap:14px;}
  div[style*="grid-template-columns:1.3fr 0.7fr"]{display:flex!important;flex-direction:column;gap:14px;}

  /* ── Stat card adjustments ── */
  .sg[style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr 1fr!important;}
  .sg[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr 1fr!important;}

  /* ── Analysis section ── */
  #sec-analysis .sg{grid-template-columns:1fr 1fr;}

  /* ── Reports ── */
  #sec-reports .sg{grid-template-columns:1fr 1fr;}

  /* ── Sales history topbar buttons ── */
  #sec-sales .ph-r{gap:5px;}

  /* ── Product grid ── */
  #prod-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;}

  /* ── Mill orders card ── */
  #mill-orders-list .card > div{flex-direction:column!important;}
  #mill-orders-list .card > div > div:last-child{flex-direction:row!important;flex-wrap:wrap;}

  /* ── Bill preview ── */
  #branded-bill-wrap{border-radius:0!important;}

  /* ── Form actions ── */
  .form-actions{flex-wrap:wrap;gap:8px;}
  .form-actions .btn{flex:1;min-inline-size:120px;justify-content:center;}

  /* ── Topbar right ── */
  .tb-right > *:not(#sync-indicator):not(#lang-toggle-btn){display:none;}

  /* ── Dashboard hero cards → single column ── */
  div[style*="grid-template-columns:1fr 1fr 1fr"]{display:flex!important;flex-direction:column;gap:10px;}

  /* ── Dashboard spending grid → 2 columns ── */
  div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr!important;display:grid!important;}

  /* ── Dashboard hero card font sizes ── */
  div[style*="font-size:32px"]{font-size:24px!important;}

  /* ── Dashboard quick-action buttons → 2×3 grid ── */
  #dash-quick-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;}
  #dash-quick-actions > button{min-inline-size:0!important;padding:10px 12px!important;flex:none!important;}

  /* ── Analysis big-4 numbers → 2×2 grid ── */
  #an-big4{grid-template-columns:1fr 1fr!important;}

  /* ── Analysis ph-r: stack like reports ── */
  #analysis-ph-r{flex-direction:column;align-items:stretch;gap:8px;}
  #analysis-ph-r > div[style*="display:flex;gap:5px"]{inline-size:100%;}
  #analysis-ph-r > div[style*="display:flex;gap:5px"] button{flex:1;font-size:11px!important;padding:6px 4px!important;}
  #analysis-ph-r > div[style*="display:flex;align-items:center"]{inline-size:100%;}
  #analysis-ph-r input[type="date"]{flex:1;min-inline-size:0;}

  /* ── Analysis big numbers → 2 columns (legacy selector kept for safety) ── */
  div[style*="grid-template-columns:repeat(4,1fr);gap:12px"]{grid-template-columns:1fr 1fr!important;display:grid!important;}

  /* ── Expense breakdown → 2 columns ── */
  div[style*="grid-template-columns:repeat(4,1fr);gap:8px"]{grid-template-columns:1fr 1fr!important;display:grid!important;}

  /* ── Profit/Loss big 3 → single column ── */
  div[style*="grid-template-columns:1fr 1fr 1fr;gap:12px"]{display:flex!important;flex-direction:column;gap:10px;}

  /* ── Business health strip → 2 columns ── */
  div[style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:1fr 1fr!important;display:grid!important;}
  div[style*="grid-template-columns:repeat(5,1fr)"] > div{border-inline-end:none!important;border-block-end:1px solid var(--border)!important;}

  /* ── Modal safe area — handled in 'Better modal backdrop on mobile' above ── */

  /* ── Touch-friendly delete buttons ── */
  .sir-del{inline-size:36px;block-size:36px;font-size:18px;}
  .btn-sm{padding:8px 14px;font-size:12px;min-block-size:36px;}

  /* ── Collection rate text wrap ── */
  div[style*="Collection Rate"]{font-size:11px!important;}

  /* ── Purchase tabs on mobile wrap ── */
  #sec-purchases > div > div[style*="display:flex;gap:4px"]{flex-wrap:wrap!important;}
  #sec-purchases .exp-tab{flex:1;min-inline-size:calc(50% - 6px);text-align:center;font-size:12px!important;padding:8px 6px!important;}

  /* ── Page header on mobile ── */
  .ph{flex-wrap:wrap;gap:10px;}
  .ph h1{font-size:18px!important;}
  .ph p{font-size:12px!important;}
  .ph-r{flex-wrap:wrap;gap:6px;}
  .ph-r .btn{font-size:12px;padding:8px 14px;}

  /* ── Stat cards single column on very small ── */

  /* ── Section padding ── */
  .section{padding-block:0 100px!important;padding-inline:0!important;}

  /* ── Card padding mobile ── */
  .card{padding:14px 12px!important;}
  .card-title{font-size:13px!important;flex-wrap:wrap;gap:8px;}

  /* ── Exp tab wrapping ── */
  .exp-tab{font-size:12px!important;padding:8px 10px!important;}

  /* ── Mill orders mobile ── */
  #mill-orders-list .card{padding:12px!important;}
  #mill-orders-list .card > div{flex-direction:column!important;}
  #mill-orders-list .card > div > div:last-child{flex-direction:row!important;flex-wrap:wrap;gap:6px;margin-block-start:10px;}
  #mill-orders-list .btn-sm{flex:1;min-inline-size:80px;justify-content:center;}

  /* ── Payment history table mobile ── */
  #ph-tbody td{font-size:11px!important;padding:8px 6px!important;}

  /* ── Form grid single col on small ── */
  .form-grid{grid-template-columns:1fr!important;}

  /* ── Transport calc preview ── */
  #transport-calc-preview{font-size:13px;}

  /* ── Analysis charts ── */
  canvas{max-inline-size:100%!important;}

  /* ── Touch target improvements ── */
  .mo-close{inline-size:36px!important;block-size:36px!important;font-size:16px!important;}
  .btn{min-block-size:40px;}
  .btn-sm{min-block-size:36px;}
  #sidebar{--sb-icon-size:17px;--sb-icon-stroke:40px;}
  .sb-item{padding:12px 14px 12px 18px!important;font-size:13px;gap:10px;min-block-size:42px;}

  /* ── SIR delete button bigger touch target ── */
  .sir-del{inline-size:36px;block-size:36px;font-size:18px;}

  /* ── Mobile modal bottom sheet — padding handled per-box above ── */

  /* ── Staff cards grid → single col on mobile ── */
  #staff-cards-grid{grid-template-columns:1fr!important;}

  /* ── Reports 5-col expense strip → 2+3 wrapping grid ── */
  #r-expense-strip{grid-template-columns:1fr 1fr!important;}

  /* ── Reports ph-r: stack period buttons + date range ── */
  #reports-ph-r{flex-direction:column;align-items:stretch;gap:8px;}
  #reports-ph-r > div[style*="display:flex;gap:5px"]{inline-size:100%;}
  #reports-ph-r > div[style*="display:flex;gap:5px"] button{flex:1;font-size:11px!important;padding:6px 4px!important;}
  #reports-ph-r > div[style*="display:flex;align-items:center"]{inline-size:100%;}
  #reports-ph-r input[type="date"]{flex:1;min-inline-size:0;}

  /* ── Paylog filter bar: shop select full width ── */
  #paylog-shop-filter{min-inline-size:0!important;inline-size:100%!important;}

  /* ── Force all .sg inline repeat(3) and repeat(4) grids to 2-col on mobile ── */
  .sg[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr 1fr!important;}
  .sg[style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr 1fr!important;}

  /* ── Backup section 2-col grids → 1-col on mobile ── */
  #backup-status-grid,#backup-actions-grid{display:flex!important;flex-direction:column;gap:14px;}

  /* ── Reports period-filter buttons → wrap & full-width ── */
  #sec-reports .ph-r > div[style*="display:flex"]{flex-wrap:wrap!important;}
  #sec-reports .ph-r button{flex:1;min-inline-size:calc(50% - 4px);text-align:center;}

  /* ── ph-r inputs/selects fill remaining space ── */
  .ph-r input[type="text"],.ph-r input[type="date"],.ph-r select{flex:1;min-inline-size:0;inline-size:100%;}

  /* ── Card-title action area wraps on small cards ── */
  .card-title{flex-wrap:wrap;gap:8px;}

  /* ── Analysis KPI cards — tighter padding & overflow-safe values ── */
  #an-big4>div{padding:14px 12px!important;border-radius:13px!important;}
  #an-rev,#an-coll,#an-out,#an-avg{font-size:18px!important;word-break:break-word;overflow-wrap:break-word;}
  /* ── P&L big 3 values — prevent overflow on small phones ── */
  #an-exp-total,#an-purchase,#an-net-profit{font-size:18px!important;word-break:break-word;overflow-wrap:break-word;}
  /* ── Expense breakdown tile values ── */
  #an-rent,#an-staff,#an-transport,#an-labour,#an-misc{font-size:14px!important;}
  /* ── Collection efficiency — tighter layout ── */
  div[style*="Collection Efficiency"]{padding:12px 14px!important;gap:12px!important;}
  #an-eff-pct{font-size:14px!important;}
  #an-eff-lbl{font-size:11px!important;white-space:nowrap;}

  /* ── Reports income boxes — tighter padding & overflow-safe values ── */
  #sec-reports div[style*="grid-template-columns:repeat(4,1fr)"]>div{padding:14px 12px!important;border-radius:12px!important;}
  #r-total,#r-coll,#r-out,#r-cost{font-size:18px!important;word-break:break-word;overflow-wrap:break-word;}
  /* ── Reports expense strip + net profit values ── */
  #r-rent,#r-staff,#r-transport,#r-labour,#r-misc,#r-profit{font-size:14px!important;}
  /* ── Reports expense+profit row: tighter padding on mobile ── */
  #sec-reports div[style*="padding:18px 20px"]{padding:14px 12px!important;}
  /* ── Reports top buyers + best products: stack on mobile ── */
  #sec-reports div[style*="grid-template-columns:1fr 1fr;gap:14px"]{display:flex!important;flex-direction:column;gap:12px!important;}
  /* ── Reports help-contact strip: single col ── */
  #help-contact-strip{grid-template-columns:1fr!important;gap:10px!important;}
  #help-grid{grid-template-columns:1fr!important;gap:12px!important;}
}

/* ── Very small screens (360px and below) ── */
@media(max-width:360px){
  .sg{grid-template-columns:1fr!important;}
  .sc-value{font-size:15px!important;}
  .ph h1{font-size:16px!important;}
  .ls-step-h{font-size:20px!important;}
  .topbar{padding:8px 10px 8px 54px;padding-block-start:max(8px, calc(env(safe-area-inset-top, 0px) + 4px));align-items:center;min-block-size:48px;}
  .tb-title{font-size:14px;max-inline-size:calc(100vw - 110px);}
  .tb-right{max-inline-size:96px;gap:4px;}
  #sync-indicator{padding:6px 8px!important;min-block-size:34px;}
  #sync-text{display:none;}
  #lang-toggle-btn{inline-size:34px;block-size:34px;}
}

/* ══════════════════════════════════════════
   MOBILE BOTTOM NAV BAR
   ══════════════════════════════════════════ */
#mobile-nav{
  display:none;
  position:fixed;
  inset-block-end:max(8px, env(safe-area-inset-bottom, 0px));
  inset-inline-start:10px;
  inset-inline-end:10px;
  block-size:60px;
  background:rgba(15,5,0,0.94);
  border:1px solid rgba(255,212,160,0.12);
  border-radius:18px;
  z-index:150;
  padding-inline:6px;
  align-items:center;
  justify-content:space-around;
  box-shadow:0 14px 32px rgba(0,0,0,0.32);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.mn-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:6px 8px;border-radius:14px;cursor:pointer;
  color:rgba(255,200,140,0.5);transition:all .18s;flex:1;
  -webkit-tap-highlight-color:transparent;
}
.mn-item ion-icon{font-size:22px;}
.mn-item span{font-size:9.5px;font-weight:700;letter-spacing:.2px;}
.mn-item.active{color:#FFD4A0;background:linear-gradient(180deg,rgba(212,104,15,0.24),rgba(212,104,15,0.16));box-shadow:inset 0 0 0 1px rgba(255,212,160,0.06);}
.mn-item.active ion-icon{color:var(--primary);}
.mn-more-dot{inline-size:5px;block-size:5px;border-radius:50%;background:var(--primary);position:absolute;inset-block-start:6px;inset-inline-end:6px;}

@media(max-width:600px){
  #mobile-nav{display:flex;}
  /* hide search & backup in topbar on mobile — they're redundant/inaccessible */
  .tb-search{display:none!important;}
  .topbar .no-print{display:none!important;}
}
@media(max-width:360px){
  #mobile-nav{
    inset-inline-start:8px;
    inset-inline-end:8px;
    border-radius:16px;
  }
  .mn-item span{font-size:8.5px;}
}

/* ── Sidebar overlay is defined in the responsive block above ── */

/* ══════════════════════════════════════════
   GLOBAL MOBILE UX IMPROVEMENTS
   ══════════════════════════════════════════ */
/* Remove 300ms tap delay on all interactive elements */
button, a, [role="button"], .sb-item, .mn-item, .role-card, .exp-tab {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Smooth momentum scrolling everywhere */
*, *::before, *::after {
  -webkit-overflow-scrolling: touch;
}
/* Prevent text selection on tap for UI elements */
.btn, .sb-item, .mn-item, .topbar, #mobile-nav {
  user-select: none;
  -webkit-user-select: none;
}
/* Better input appearance on iOS */
input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
/* Restore border-radius for all input types — not just date/number/select */
input[type="date"],
input[type="number"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
select,
textarea {
  border-radius: 9px;
}
/* Safe area support for notched phones */
@supports (padding: max(0px)) {
  #mobile-nav {
    block-size: 60px;
    inset-block-end: max(8px, env(safe-area-inset-bottom, 0px));
  }
  .content {
    padding-block-end: max(118px, calc(78px + env(safe-area-inset-bottom, 0px)));
  }
}
/* Improved mobile bottom nav active state */
.mn-item { position: relative; overflow: hidden; }
.mn-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(212,104,15,0);
  transition: background 0.15s;
  border-radius: 10px;
}
.mn-item:active::after { background: rgba(212,104,15,0.15); }

/* Better modal backdrop on mobile */
@media(max-width:600px) {
  .mo { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  /* Smooth bottom-sheet handle indicator */
  .mo-box::before {
    content: '';
    display: block;
    inline-size: 36px;
    block-size: 4px;
    background: var(--border2);
    border-radius: 4px;
    margin: 0 auto 16px;
    flex-shrink: 0;
  }
  /* Bottom-sheet modal: account for home bar */
  .mo-box {
    padding-block-end: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)) !important;
  }
}

/* Tablet sidebar improvements */
@media(max-width:960px) {
  #sidebar { transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1); }
  #sb-overlay { transition: opacity 0.28s ease; opacity: 0; }
  #sb-overlay.show { opacity: 1; }
}

/* Mobile topbar refinements */
@media(max-width:600px) {
  .topbar { box-shadow: 0 1px 8px rgba(180,100,20,0.06); }
  #sb-toggle { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
}

/* Smooth scroll for the whole app */
html { scroll-behavior: smooth; }

/* Better focus rings for accessibility */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Prevent horizontal overflow on mobile */
@media(max-width:600px) {
  body { overflow-x: hidden; }
  #main { overflow-x: hidden; }
  .topbar, .card, .sc, .mo-box, #mobile-nav, #float-wa { will-change: transform; }
}

/* Bill action buttons — mobile friendly */
#bill-action-btns{flex-wrap:wrap;}
#bill-action-btns .btn{flex:1;min-inline-size:calc(50% - 5px);justify-content:center;}
@media(max-width:600px){
  #bill-action-btns .btn{min-inline-size:calc(50% - 4px);font-size:12px;padding:9px 8px;}
  #bill-action-btns{gap:6px;}
}
@media(max-width:360px){
  #bill-action-btns .btn{min-inline-size:100%;font-size:11.5px;}
}

/* ══════════════════════════════════════════
   SUBSCRIPTION PAGE
   ══════════════════════════════════════════ */
.sub-hero{background:linear-gradient(135deg,#0F0500 0%,#1E0A00 50%,#2D1200 100%);border-radius:20px;padding:36px 32px;margin-block-end:20px;position:relative;overflow:hidden;}
.sub-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(212,104,15,0.18) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 10% 20%,rgba(232,168,32,0.10) 0%,transparent 70%);}
.sub-hero-inner{position:relative;z-index:1;}
.sub-hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(232,168,32,0.18);border:1.5px solid rgba(232,168,32,0.4);border-radius:50px;padding:5px 14px 5px 8px;margin-block-end:16px;}
.sub-hero-badge-dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(232,168,32,0.6);}
.sub-hero-badge span{font-size:12px;font-weight:800;color:var(--gold);letter-spacing:.4px;}
.sub-hero h2{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:#FFE8D0;line-height:1.2;margin-block-end:10px;letter-spacing:-.5px;}
.sub-hero h2 em{background:linear-gradient(135deg,#FFD073,#FFA040);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal;}
.sub-hero p{font-size:14px;color:rgba(255,212,160,0.65);line-height:1.7;max-inline-size:540px;}
.sub-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-block-end:20px;}
.sub-plan{background:#fff;border-radius:18px;padding:24px 22px;border:2px solid var(--border);position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s;}
.sub-plan:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.sub-plan.popular{border-color:var(--primary);box-shadow:0 8px 32px rgba(212,104,15,0.15);}
.sub-plan-ribbon{position:absolute;inset-block-start:16px;inset-inline-end:-28px;background:linear-gradient(135deg,var(--primary),#E88030);color:#fff;font-size:10px;font-weight:800;letter-spacing:.5px;padding:5px 36px;transform:rotate(38deg);box-shadow:0 2px 8px rgba(212,104,15,0.3);}
.sub-plan-icon{font-size:32px;margin-block-end:10px;}
.sub-plan-name{font-family:'Sora',sans-serif;font-size:14px;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;margin-block-end:4px;}
.sub-plan-price{font-family:'Sora',sans-serif;font-size:42px;font-weight:800;color:var(--text);line-height:1;margin-block-end:2px;}
.sub-plan-price sup{font-size:20px;font-weight:700;vertical-align:super;line-height:0;}
.sub-plan-period{font-size:13px;color:var(--text3);font-weight:600;margin-block-end:14px;}
.sub-plan-saving{display:inline-flex;align-items:center;gap:5px;background:var(--ok-bg);color:var(--ok);font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:20px;margin-block-end:16px;border:1px solid #A8D5B5;}
.sub-plan-divider{block-size:1.5px;background:var(--border);margin-block:16px;}
.sub-feat-list{display:flex;flex-direction:column;gap:9px;}
.sub-feat-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text2);line-height:1.45;}
.sub-feat-check{inline-size:18px;block-size:18px;border-radius:50%;background:var(--ok-bg);border:1.5px solid #A8D5B5;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;color:var(--ok);font-weight:800;margin-block-start:1px;}
.sub-feat-check.gold{background:var(--gold-l);border-color:var(--gold);color:#7A5500;}
.sub-plan-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-block-start:20px;inline-size:100%;padding:13px;border-radius:12px;border:none;cursor:pointer;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;transition:all .2s;}
.sub-plan-btn.primary{background:linear-gradient(135deg,var(--primary),#E88030);color:#fff;box-shadow:0 6px 20px rgba(212,104,15,0.3);}
.sub-plan-btn.primary:hover{box-shadow:0 10px 32px rgba(212,104,15,0.45);transform:translateY(-2px);}
.sub-plan-btn.secondary{background:var(--primary-l);color:var(--primary);border:2px solid var(--border2);}
.sub-plan-btn.secondary:hover{background:#F0D8C0;}
.sub-how{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-block-end:20px;}
.sub-step{background:#fff;border-radius:14px;padding:18px 16px;border:1.5px solid var(--border);text-align:center;position:relative;}
.sub-step-num{inline-size:32px;block-size:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#E88030);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 4px 12px rgba(212,104,15,0.3);}
.sub-step-icon{font-size:24px;margin-block-end:8px;}
.sub-step h4{font-size:13px;font-weight:800;color:var(--text);margin-block-end:5px;}
.sub-step p{font-size:11.5px;color:var(--text3);line-height:1.55;}
.sub-step-arrow{position:absolute;inset-inline-end:-10px;inset-block-start:50%;transform:translateY(-50%);font-size:16px;color:var(--border2);z-index:1;}
.sub-compare{background:#fff;border-radius:16px;border:1.5px solid var(--border);overflow:hidden;margin-block-end:20px;}
.sub-compare-inner{min-inline-size:0;}
.sub-compare-head{display:grid;grid-template-columns:2fr 1fr 1fr;background:linear-gradient(135deg,#0F0500,#1E0A00);}
.sub-compare-head > div{padding:14px 18px;font-size:12px;font-weight:800;color:rgba(255,212,160,0.8);text-transform:uppercase;letter-spacing:.6px;}
.sub-compare-head > div:last-child{background:rgba(212,104,15,0.25);color:#FFD4A0;}
.sub-compare-row{display:grid;grid-template-columns:2fr 1fr 1fr;border-block-end:1px solid var(--border);}
.sub-compare-row:last-child{border-block-end:none;}
.sub-compare-row:nth-child(even){background:#FDFAF7;}
.sub-compare-row > div{padding:11px 18px;font-size:13px;color:var(--text2);display:flex;align-items:center;gap:6px;}
.sub-compare-row > div:first-child{font-weight:600;color:var(--text);}
.sub-compare-row > div:last-child{background:rgba(212,104,15,0.04);}
.sub-ck{color:var(--ok);font-size:16px;font-weight:800;}
.sub-xk{color:var(--text3);font-size:16px;}
.sub-faq{background:#fff;border-radius:16px;border:1.5px solid var(--border);overflow:hidden;margin-block-end:20px;}
.sub-faq-item{border-block-end:1px solid var(--border);cursor:pointer;}
.sub-faq-item:last-child{border-block-end:none;}
.sub-faq-q{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;font-size:13.5px;font-weight:700;color:var(--text);transition:color .15s;}
.sub-faq-item:hover .sub-faq-q{color:var(--primary);}
.sub-faq-a{display:none;padding:0 20px 14px;font-size:13px;color:var(--text2);line-height:1.8;animation:fadeIn .2s ease;}
.sub-faq-a.open{display:block;}
.sub-faq-arr{font-size:11px;color:var(--text3);transition:transform .22s;flex-shrink:0;}
.sub-faq-arr.open{transform:rotate(180deg);color:var(--primary);}
.sub-current-badge{background:linear-gradient(135deg,var(--gold-l),#FFF6E0);border:2px solid var(--gold);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px;margin-block-end:20px;}
.sub-current-badge-icon{font-size:32px;}
.sub-current-badge-body h3{font-size:14px;font-weight:800;color:var(--text);margin-block-end:2px;}
.sub-current-badge-body p{font-size:12.5px;color:var(--text3);}
@media(max-width:700px){
  .sub-plans{grid-template-columns:1fr;}
  .sub-how{grid-template-columns:1fr 1fr;}
  .sub-step-arrow{display:none;}
  .sub-hero{padding:24px 18px;}
  .sub-hero h2{font-size:22px;}
  .sub-compare-head > div,.sub-compare-row > div{padding:10px 12px;font-size:12px;}
  /* Settings subscription card stacks on mobile */
  .settings-sub-grid{grid-template-columns:1fr!important;}
  .settings-sub-grid .settings-sub-divider{display:none!important;}
  .settings-sub-left,.settings-sub-right{padding:16px 0!important;}
}
@media(max-width:480px){
  .sub-plan-price{font-size:34px;}
  .sub-compare{overflow-x:auto;}
  .sub-compare-inner{min-inline-size:420px;}
}
/* GST row visibility — use HTML hidden attribute + JS control */
#s-gst-row { display: flex; flex-direction: column; }
#s-gst-row[hidden] { display: none !important; }

/* ══════════════════════════════════════
   SUBSCRIPTION / TRIAL CSS
══════════════════════════════════════ */
#trial-banner{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:9990;
  background:linear-gradient(90deg,#8B4513,#D4680F);
  color:#fff;padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:'Sora',sans-serif;font-size:13.5px;font-weight:600;
  box-shadow:0 2px 16px rgba(212,96,10,0.35);
  transform:translateY(-100%);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
#trial-banner.show{transform:translateY(0);}
#trial-banner .tb-left{display:flex;align-items:center;gap:10px}
#trial-banner .tb-days{
  background:rgba(255,255,255,0.22);border-radius:8px;
  padding:3px 10px;font-size:13px;font-weight:800;white-space:nowrap;
}
#trial-banner .tb-btn{
  background:#fff;color:#D4680F;border:none;border-radius:8px;
  padding:6px 16px;font-size:13px;font-weight:800;cursor:pointer;
  white-space:nowrap;transition:transform .15s,box-shadow .15s;
  font-family:'Sora',sans-serif;
}
#trial-banner .tb-btn:hover{transform:scale(1.04);box-shadow:0 4px 14px rgba(0,0,0,0.2);}
#trial-banner .tb-close{background:none;border:none;color:rgba(255,255,255,0.7);font-size:20px;cursor:pointer;padding:0 4px;line-height:1;}

/* ── Paywall overlay ── */
#paywall{
  position:fixed;inset:0;z-index:99995;
  background:linear-gradient(135deg,#1A0A00 0%,#2D1200 50%,#1A0A00 100%);
  display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;
}
#paywall.hidden{display:none!important;}
.pw-card{
  background:#FDF8F3;border-radius:24px;max-inline-size:520px;inline-size:100%;
  box-shadow:0 24px 80px rgba(0,0,0,0.5);overflow:hidden;animation:pwSlideIn .5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes pwSlideIn{from{opacity:0;transform:translateY(40px) scale(0.95)}to{opacity:1;transform:none}}
.pw-head{
  background:linear-gradient(135deg,#0F0500,#2D1200,#4A1E00);
  padding:32px 28px 24px;text-align:center;color:#fff;
  position:relative;overflow:hidden;
}
.pw-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 70% 40%,rgba(212,104,15,0.25) 0%,transparent 70%);}
.pw-head .pw-icon{inline-size:48px;block-size:48px;margin:0 auto 12px;display:block;object-fit:contain;position:relative;z-index:1;}
.pw-head h2{font-family:'Sora',sans-serif;font-size:22px;font-weight:800;margin:0 0 6px;position:relative;z-index:1;color:#FFE8D0;}
.pw-head p{font-size:14px;opacity:.85;margin:0;position:relative;z-index:1;color:rgba(255,212,160,0.75);}
.pw-expired-badge{
  display:inline-block;background:rgba(232,168,32,0.2);
  border-radius:20px;padding:4px 14px;font-size:12px;font-weight:700;
  margin-block-end:12px;border:1px solid rgba(232,168,32,0.5);
  color:var(--gold);position:relative;z-index:1;
}
.pw-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:24px 24px 0;}
.pw-plan{
  border:2px solid var(--border);border-radius:16px;padding:18px 14px;
  text-align:center;cursor:pointer;transition:all .2s;background:#fff;
  position:relative;
}
.pw-plan:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 8px 24px rgba(212,96,10,0.15);}
.pw-plan.selected{border-color:var(--primary);background:var(--primary-l);box-shadow:0 0 0 3px rgba(212,104,15,0.15);}
.pw-plan .pw-badge{
  position:absolute;inset-block-start:-10px;inset-inline-start:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,#D4680F,#E8A820);color:#fff;
  font-size:10px;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap;
}
.pw-plan-name{font-family:'Sora',sans-serif;font-size:13px;font-weight:700;color:var(--text2);margin-block-end:6px;}
.pw-plan-price{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:var(--primary);}
.pw-plan-price span{font-size:14px;color:var(--text3);font-weight:500;}
.pw-plan-save{font-size:11px;color:var(--ok);font-weight:700;margin-block-start:4px;}
.pw-features{padding:16px 24px;display:flex;flex-direction:column;gap:7px;}
.pw-feature{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text2);}
.pw-feature .pf-icon{font-size:16px;flex-shrink:0;}
.pw-pay-btn{
  margin:0 24px 20px;display:block;inline-size:calc(100% - 48px);
  background:linear-gradient(135deg,#D4680F,#E88030);color:#fff;
  border:none;border-radius:14px;padding:16px;
  font-family:'Sora',sans-serif;font-size:16px;font-weight:800;cursor:pointer;
  transition:transform .15s,box-shadow .15s;
  box-shadow:0 6px 20px rgba(212,104,15,0.35);
}
.pw-pay-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(212,104,15,0.45);}
.pw-pay-btn:active{transform:scale(0.98);}
.pw-pay-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.pw-secure{text-align:center;font-size:11px;color:var(--text3);padding-block-end:16px;display:flex;align-items:center;justify-content:center;gap:5px;}
.pw-logout-link{text-align:center;padding:4px 24px 22px;}
.pw-logout-link button{font-size:12px;color:var(--text3);cursor:pointer;text-decoration:underline;background:none;border:none;padding:4px 2px;font-family:'Nunito',sans-serif;}
.pw-logout-link button:disabled{opacity:.55;cursor:not-allowed;text-decoration:none;}
.pw-logout-link button:focus{outline:2px solid var(--primary);outline-offset:2px;}

.restore-overlay{position:fixed;inset:0;z-index:99997;background:rgba(0,0,0,0.72);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .18s ease;}
.restore-dialog{background:#fff;border-radius:20px;padding:28px;max-inline-size:420px;inline-size:100%;box-shadow:0 24px 80px rgba(0,0,0,0.42);animation:pwSlideIn .28s ease;}
.restore-title{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;color:var(--text);margin-block-end:6px;}
.restore-copy{font-size:13px;color:var(--text2);line-height:1.55;margin-block-end:16px;}
.restore-label{display:block;font-size:12px;font-weight:800;color:var(--text2);margin-block-end:7px;}
.restore-input{inline-size:100%;padding:12px 14px;border:2px solid var(--border);border-radius:10px;font-size:14px;font-family:'Nunito',sans-serif;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;}
.restore-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(212,104,15,.12);}
.restore-input.invalid{border-color:var(--err);box-shadow:0 0 0 3px rgba(192,40,30,.10);}
.restore-error{min-block-size:18px;font-size:12px;color:var(--err);margin-block:5px 12px;}
.restore-plan-row{display:flex;gap:8px;margin-block-end:14px;}
.restore-plan-btn{flex:1;padding:10px;border:2px solid var(--primary);border-radius:9px;background:#fff;font-size:13px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;color:var(--primary);transition:background .15s,color .15s,transform .15s;}
.restore-plan-btn.active{background:var(--primary);color:#fff;}
.restore-plan-btn:disabled{opacity:.6;cursor:not-allowed;}
.restore-note{font-size:11px;color:var(--text3);line-height:1.5;margin-block-end:14px;}
.restore-actions{display:flex;gap:10px;}
.restore-cancel,.restore-submit{border-radius:10px;padding:12px;font-size:14px;font-weight:800;cursor:pointer;font-family:'Sora',sans-serif;transition:opacity .15s,transform .15s;}
.restore-cancel{flex:1;border:2px solid var(--border);background:#fff;color:var(--text2);}
.restore-submit{flex:2;border:none;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;}
.restore-cancel:hover,.restore-submit:hover,.restore-plan-btn:hover{transform:translateY(-1px);}
.restore-cancel:disabled,.restore-submit:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.restore-spinner{inline-size:15px;block-size:15px;border-radius:50%;border:2px solid rgba(255,255,255,.5);border-block-start-color:#fff;animation:spin .75s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Subscription success animation ── */
@keyframes subSuccess{0%{transform:scale(0.5);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.sub-success-icon{animation:subSuccess .6s cubic-bezier(0.34,1.56,0.64,1) forwards;}


/* ── Inline SVG icon fallback — works without CDN ── */
.sb-icon .sb-svg-icon{display:block;inline-size:var(--sb-icon-size,18px);block-size:var(--sb-icon-size,18px);}
.sb-icon .sb-svg-icon svg{inline-size:100%;block-size:100%;display:block;}
.sb-svg-icon svg{inline-size:1em;block-size:1em;display:inline-block;vertical-align:middle;}
.mn-item .sb-svg-icon{inline-size:22px;block-size:22px;}
.mn-item .sb-svg-icon svg{inline-size:100%;block-size:100%;}
#float-wa .sb-svg-icon svg{inline-size:26px;block-size:26px;color:#fff;}
#sb-toggle .sb-svg-icon{inline-size:24px;block-size:24px;}
#sb-toggle .sb-svg-icon svg{inline-size:100%;block-size:100%;}

/* ── Hover utilities — replaces inline onmouseover/onmouseout ── */
.qa-btn:hover{box-shadow:var(--shadow-md)!important;}
.exp-cat-rent:hover{box-shadow:0 4px 16px rgba(122,48,153,.15)!important;}
.exp-cat-staff:hover{box-shadow:0 4px 16px rgba(26,90,144,.15)!important;}
.exp-cat-transport:hover{box-shadow:0 4px 16px rgba(138,74,16,.15)!important;}
.exp-cat-labour:hover{box-shadow:0 4px 16px rgba(26,122,64,.15)!important;}
.exp-cat-misc:hover{box-shadow:0 4px 16px rgba(180,100,20,.15)!important;}
.help-card-wa:hover{box-shadow:0 4px 20px rgba(37,211,102,0.2)!important;}
.help-card-email:hover{box-shadow:0 4px 20px rgba(18,72,160,0.15)!important;}
.help-card-phone:hover{box-shadow:0 4px 20px rgba(140,60,160,0.15)!important;}
.help-card-web:hover{box-shadow:var(--shadow-md)!important;}
.skip-offline-btn:hover{box-shadow:0 4px 16px rgba(212,104,15,0.2)!important;transform:translateY(-2px);}
.logout-cancel-btn:hover{background:#FBF6F0!important;}
.logout-confirm-btn:hover{background:#A02818!important;}