:root{
  --bg:#09090b;--panel:#111216;--panel2:#17181d;--line:#292b31;--text:#f5f5f6;--muted:#a6a8b0;
  --red:#e31f2b;--red2:#b90f1b;--green:#33c675;--amber:#ffb020;--blue:#4e8cff;--shadow:0 18px 45px rgba(0,0,0,.26);
  --radius:18px;--radius-sm:12px;
}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}body{background-image:radial-gradient(circle at 0 0,rgba(227,31,43,.15),transparent 24%),radial-gradient(circle at 100% 80%,rgba(255,255,255,.05),transparent 24%)}
.app-shell{min-height:100dvh;display:grid;grid-template-columns:260px 1fr}.sidebar{position:sticky;top:0;height:100dvh;background:linear-gradient(180deg,#0b0b0e,#111114);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20}.brand-wrap{padding:20px 18px 12px}.brand-img{width:100%;max-height:105px;object-fit:contain}.live-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);border:1px solid var(--line);padding:6px 9px;border-radius:999px}.live-badge .cloud-dot{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 10px var(--green);flex:0 0 auto}.live-badge strong{font-size:11px;font-weight:800;color:inherit}.live-badge[data-status="syncing"] .cloud-dot,.live-badge[data-status="connecting"] .cloud-dot{background:#ffb020;box-shadow:0 0 10px #ffb020}.live-badge[data-status="offline"] .cloud-dot{background:#ff5d66;box-shadow:0 0 10px #ff5d66}.live-badge[data-status="offline"]{border-color:#5c292d;color:#ff8a91}.nav{padding:8px 10px;display:grid;gap:5px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.nav-btn{width:100%;text-align:left;border:0;background:transparent;color:#d4d5da;padding:11px 12px;border-radius:11px;display:flex;align-items:center;gap:10px;transition:.2s}.nav-btn:hover{background:#1a1b20}.nav-btn.active{background:linear-gradient(90deg,var(--red),#8f1018);color:#fff;font-weight:750;box-shadow:0 8px 20px rgba(227,31,43,.2)}.nav-btn span{width:22px;text-align:center}.sidebar-footer{margin-top:auto;padding:14px 16px 18px;flex:0 0 auto;border-top:1px solid var(--line)}.shop-mini{color:var(--muted);font-size:12px;line-height:1.5;margin-bottom:10px}.install-btn{width:100%;border:1px solid #6e727d;background:#18191e;color:#fff;padding:9px;border-radius:10px}
.main{min-width:0}.topbar{height:82px;position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid rgba(41,43,49,.8);background:rgba(9,9,11,.88);backdrop-filter:blur(14px)}.topbar h1{font-size:23px;margin:0 0 3px}.topbar p{margin:0;color:var(--muted);font-size:13px}.top-actions{display:flex;align-items:center;gap:10px}.clock{padding:9px 12px;border:1px solid var(--line);background:var(--panel);border-radius:10px;font-weight:700}.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:#fff;font-size:20px}.mobile-only{display:none}.view{display:none;padding:26px;animation:fade .2s ease}.view.active{display:block}@keyframes fade{from{opacity:.3;transform:translateY(3px)}to{opacity:1;transform:none}}
.hero-card{min-height:240px;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid #3b181d;border-radius:24px;background:linear-gradient(125deg,#18191d 0%,#111216 55%,#300a0e 100%);box-shadow:var(--shadow);overflow:hidden;position:relative}.hero-card:after{content:"";position:absolute;right:-80px;top:-130px;width:330px;height:330px;border:1px solid rgba(227,31,43,.2);border-radius:50%;box-shadow:0 0 0 40px rgba(227,31,43,.03),0 0 0 80px rgba(227,31,43,.025)}.hero-card>div{position:relative;z-index:2;max-width:720px}.hero-card img{width:180px;height:180px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 15px 35px rgba(227,31,43,.25))}.eyebrow{color:#ff6a72;letter-spacing:.14em;font-size:12px;font-weight:800}.hero-card h2{font-size:35px;line-height:1.08;margin:10px 0 12px}.hero-card p{color:#c1c2c7;max-width:680px;line-height:1.6}.hero-actions{display:flex;gap:10px;margin-top:20px}.btn{border:0;border-radius:11px;padding:11px 16px;font-weight:800}.btn.primary{background:linear-gradient(135deg,var(--red),#b8131e);color:#fff;box-shadow:0 9px 24px rgba(227,31,43,.22)}.btn.primary:hover{filter:brightness(1.08)}.btn.secondary{background:#1b1c21;color:#fff;border:1px solid #33353c}.btn.danger-outline{background:transparent;color:#ff777e;border:1px solid #6d252b}.btn.wide{width:100%;padding:14px}.text-btn{border:0;background:none;color:#ff6972;font-weight:750;padding:5px}.text-btn.danger{color:#ff777e}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}.stat-card{padding:19px;border-radius:var(--radius);background:linear-gradient(180deg,#15161a,#111216);border:1px solid var(--line);box-shadow:0 8px 25px rgba(0,0,0,.12)}.stat-card span{display:block;color:var(--muted);font-size:13px}.stat-card strong{display:block;font-size:28px;margin:6px 0}.stat-card small{color:#7f828c}.dashboard-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}.panel{background:linear-gradient(180deg,#131419,#0f1013);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 28px rgba(0,0,0,.12);padding:18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-head h3{margin:0;font-size:17px}.muted{color:var(--muted);margin:4px 0 0;font-size:13px}.activity-list,.repair-queue,.list-stack{display:grid;gap:9px}.empty-state{color:#7f828c;padding:24px 8px;text-align:center}.activity-item,.queue-item,.list-item{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:11px 12px;background:#17181d;border:1px solid #24262c;border-radius:12px}.activity-item strong,.queue-item strong,.list-item strong{display:block;font-size:13px}.activity-item small,.queue-item small,.list-item small{display:block;color:var(--muted);margin-top:3px}.amount-positive{color:#65db96;font-weight:800}.amount-negative{color:#ff787f;font-weight:800}.status-pill{padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#252730;color:#d6d7dc;white-space:nowrap}.status-pill.Ready{background:rgba(51,198,117,.15);color:#70e9a6}.status-pill.Delivered{background:rgba(78,140,255,.15);color:#7fafFF}.status-pill.Received{background:rgba(255,176,32,.14);color:#ffc55c}.status-pill.Repairing{background:rgba(227,31,43,.16);color:#ff757d}
.pos-grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:16px}.products-panel{min-height:650px}.search-input{max-width:320px}.input{width:100%;background:#17181d;border:1px solid #33353d;color:#fff;border-radius:10px;padding:10px 11px;outline:none}.input:focus{border-color:#a52a32;box-shadow:0 0 0 3px rgba(227,31,43,.09)}textarea.input{resize:vertical}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:11px}.product-card{border:1px solid #2b2d34;background:#17181d;border-radius:14px;padding:14px;text-align:left;color:#fff;min-height:125px;display:flex;flex-direction:column;justify-content:space-between;transition:.18s}.product-card:hover{transform:translateY(-2px);border-color:#6a242a}.product-card .cat{font-size:11px;color:#ff6d75;text-transform:uppercase;letter-spacing:.07em}.product-card strong{font-size:14px}.product-card .price{font-size:19px;font-weight:850}.product-card small{color:var(--muted)}.cart-panel{position:sticky;top:100px;height:max-content}.cart-items{display:grid;gap:8px;max-height:330px;overflow:auto}.cart-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px;border:1px solid #292b32;background:#17181d;border-radius:11px}.cart-row strong{font-size:13px}.cart-row small{color:var(--muted)}.qty-controls{display:flex;align-items:center;gap:6px}.qty-controls button{width:26px;height:26px;border:1px solid #3b3d46;background:#111216;color:#fff;border-radius:7px}.cart-totals{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:13px 0}.cart-totals>div{display:flex;justify-content:space-between;margin:6px 0;color:#c7c8cc}.cart-totals .grand{font-size:19px;color:#fff;margin-top:10px}.field-grid{display:grid;gap:10px}.field-grid.two{grid-template-columns:1fr 1fr}.field-grid label,.form-stack label{display:grid;gap:6px;color:#b9bbc2;font-size:12px;font-weight:650}.form-stack{display:grid;gap:13px}
.split-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.split-header h2{margin:0}.filter-row{display:grid;grid-template-columns:1fr 220px;gap:10px;margin-bottom:14px}.full-search{margin-bottom:14px;max-width:450px}.table-card{overflow:auto;border:1px solid var(--line);border-radius:15px;background:#111216}.table-card.embedded{border:0;border-radius:10px}.data-table{width:100%;border-collapse:collapse;min-width:720px}.data-table th,.data-table td{padding:12px 13px;text-align:left;border-bottom:1px solid #26282f;font-size:13px}.data-table th{color:#8f929d;font-size:11px;text-transform:uppercase;letter-spacing:.05em;background:#15161a;position:sticky;top:0}.data-table tr:hover td{background:#15161a}.table-action{border:1px solid #393b45;background:#1a1b20;color:#fff;border-radius:8px;padding:6px 9px;font-size:12px}.stock-low{color:#ff767e;font-weight:800}.stock-ok{color:#78dea3;font-weight:800}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.reports-stats{margin-top:0}.summary-bars{display:grid;gap:12px}.summary-row{display:grid;grid-template-columns:110px 1fr 36px;align-items:center;gap:10px;font-size:12px}.bar-track{height:10px;background:#202127;border-radius:99px;overflow:hidden}.bar{height:100%;background:linear-gradient(90deg,var(--red),#ff6570);border-radius:99px}.admin-actions{display:grid;gap:10px}.file-btn{text-align:center}.notice{margin-top:18px;padding:14px;background:#17181d;border:1px solid #30323a;border-radius:12px;color:#aeb0b8;line-height:1.5;font-size:13px}
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}.modal-card{position:relative;width:min(720px,100%);max-height:92vh;overflow:auto;background:#111216;border:1px solid #34363e;border-radius:20px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.45)}.modal-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:9px;border:1px solid #34363e;background:#1a1b20;color:#fff;font-size:21px}.modal-card h2{margin:0 0 18px}.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.check-item{display:flex!important;align-items:center;gap:8px!important;padding:9px;border:1px solid #2c2e35;border-radius:9px;background:#17181d}.check-item input{accent-color:var(--red)}.toast{position:fixed;right:20px;bottom:20px;z-index:120;background:#17181d;border:1px solid #3b3d45;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s}.toast.show{transform:none;opacity:1}.print-area{display:none}
.receipt-preview{max-width:360px;margin:auto;background:#fff;color:#111;padding:18px;border-radius:8px}.receipt-preview .receipt-logo{display:block;width:180px;margin:0 auto 6px;filter:none}.receipt-preview h3{text-align:center;margin:5px 0}.receipt-preview p{text-align:center;font-size:12px;margin:3px 0}.receipt-preview hr{border:0;border-top:1px dashed #777;margin:10px 0}.receipt-line{display:flex;justify-content:space-between;gap:14px;font-size:12px;margin:5px 0}.receipt-line.total{font-size:16px;font-weight:800}.receipt-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.receipt-actions .btn{flex:1 1 150px}
.scanner-box{display:grid;gap:7px;margin:0 0 16px;padding:12px;border:1px solid #34363e;border-radius:12px;background:#17181d;font-weight:700}.scanner-box .input:focus{border-color:#e52b35;box-shadow:0 0 0 3px rgba(229,43,53,.16)}
.compact-camera-btn{margin-top:7px;width:100%;font-size:12px}.camera-scanner{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.9)}.camera-card{width:min(520px,100%);padding:20px;border:1px solid #444;border-radius:18px;background:#111216;text-align:center}.camera-card h2{margin-top:0}.camera-card video{display:block;width:100%;max-height:62vh;margin:12px 0;border:2px solid #e52b35;border-radius:12px;background:#000;object-fit:cover}.camera-card #cameraScanStatus{margin:10px 0;color:#c9cbd2}.camera-card .btn{width:100%}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.two-col{grid-template-columns:1fr}.pos-grid{grid-template-columns:1fr}.cart-panel{position:static}.products-panel{min-height:auto}}
@media(max-width:800px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;width:260px;transition:.25s;box-shadow:20px 0 60px rgba(0,0,0,.4)}.sidebar.open{left:0}.mobile-only{display:inline-grid;place-items:center}.topbar{padding:0 14px;height:72px}.topbar p{display:none}.view{padding:14px}.hero-card{padding:22px;min-height:220px}.hero-card h2{font-size:27px}.hero-card img{width:115px;height:115px}.filter-row{grid-template-columns:1fr}.stacked-mobile{align-items:stretch;flex-direction:column}.search-input{max-width:none}.split-header{align-items:flex-start;flex-direction:column}.split-header .btn{width:100%}}
@media(max-width:560px){.stats-grid{grid-template-columns:1fr 1fr;gap:9px}.stat-card{padding:14px}.stat-card strong{font-size:22px}.hero-card img{display:none}.hero-actions{display:grid}.field-grid.two{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-card{min-height:120px}.check-grid{grid-template-columns:1fr}.clock{display:none}.modal-card{padding:20px 14px}.two-col{gap:10px}.panel{padding:14px}}
@media print{body *{visibility:hidden!important}.print-area,.print-area *{visibility:visible!important}.print-area{display:block!important;position:absolute;left:0;top:0;width:58mm;background:#fff;color:#000;padding:2mm;font-family:Arial,sans-serif}.print-area img{max-width:38mm!important}.print-area .receipt-actions{display:none!important}}

/* Repair device/model catalog */
.repair-choice-grid{max-height:300px;overflow:auto;padding:8px;border:1px solid #292b32;border-radius:12px;background:#0d0e12}
.repair-choice-grid .check-item{min-height:42px}
#customDeviceFields[hidden]{display:none!important}

/* V3 staff authentication and role separation */
.app-shell.locked{display:none!important}
.login-screen{position:fixed;inset:0;z-index:200;height:100dvh;min-height:0;display:grid;place-items:center;overflow:auto;overscroll-behavior:none;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:radial-gradient(circle at 20% 10%,rgba(227,31,43,.22),transparent 32%),linear-gradient(145deg,#08080a,#101116 62%,#08080a)}
.login-card{width:min(430px,100%);max-height:calc(100dvh - 24px);overflow:auto;background:linear-gradient(180deg,#15161a,#0e0f12);border:1px solid #30323a;border-radius:24px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.login-brand{display:block;width:min(290px,85%);height:105px;object-fit:contain;margin:0 auto 20px}
.login-card h1{margin:8px 0 6px;font-size:28px;line-height:1.1}
.login-form{margin-top:22px}.login-note{margin-top:18px;padding:12px 14px;border-radius:12px;background:#17181d;border:1px solid #2f3138;color:#aeb0b8;font-size:12px;line-height:1.5}
.pin-input{letter-spacing:.18em;font-weight:800}
.staff-chip{display:flex;align-items:center;padding:7px 10px;border:1px solid #33353d;background:#15161a;border-radius:11px;min-width:130px}
.staff-chip strong,.staff-chip small{display:block}.staff-chip strong{font-size:12px}.staff-chip small{font-size:10px;color:#ff6d75;text-transform:uppercase;letter-spacing:.07em;margin-top:2px}
.logout-btn{border:1px solid #4a3034;background:#1b1517;color:#ff858c;border-radius:10px;padding:9px 11px;font-weight:800;font-size:12px}
.logout-btn:hover{background:#2a171b}
.role-pill{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#252730}
.role-admin{color:#ff7e85;background:rgba(227,31,43,.16)}.role-cashier{color:#77a9ff;background:rgba(78,140,255,.16)}.role-technician{color:#78e3a5;background:rgba(51,198,117,.16)}
.admin-staff-grid{margin-top:16px;grid-template-columns:1.35fr 1fr}
@media(max-width:800px){.staff-chip{min-width:0;padding:6px 8px}.staff-chip strong{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logout-btn{padding:8px}.top-actions{gap:6px}}
@media(max-width:560px){.staff-chip small{display:none}.staff-chip{max-width:105px}.logout-btn{font-size:0;width:38px;height:38px;padding:0}.logout-btn:after{content:'↪';font-size:18px}.login-card{padding:22px 18px}.login-card h1{font-size:24px}}


/* Login visibility + backend diagnostics */
body.authenticated .login-screen{display:none!important}
.login-cloud-status{margin-top:14px;padding:10px 12px;border-radius:10px;border:1px solid #34363e;background:#111216;color:#bfc1c8;font-size:12px;font-weight:700}
.login-cloud-status[data-status="online"]{border-color:rgba(51,198,117,.45);color:#78e3a5;background:rgba(51,198,117,.08)}
.login-cloud-status[data-status="syncing"],.login-cloud-status[data-status="connecting"]{border-color:rgba(255,176,32,.4);color:#ffc55c;background:rgba(255,176,32,.07)}
.login-cloud-status[data-status="offline"]{border-color:rgba(227,31,43,.5);color:#ff858c;background:rgba(227,31,43,.08)}
.login-error{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid rgba(227,31,43,.5);background:rgba(227,31,43,.1);color:#ff959b;font-size:12px;line-height:1.45}
#loginSubmitBtn:disabled{opacity:.6;cursor:not-allowed}


/* V4.2 viewport + strict role isolation */
body:not(.authenticated){overflow:hidden}
body.authenticated{overflow:auto}
.nav-btn[hidden],[data-go][hidden]{display:none!important}
body[data-role="cashier"] .nav-btn[data-view="purchases"],
body[data-role="cashier"] .nav-btn[data-view="expenses"],
body[data-role="cashier"] .nav-btn[data-view="reports"],
body[data-role="cashier"] .nav-btn[data-view="admin"],
body[data-role="technician"] .nav-btn[data-view="sale"],
body[data-role="technician"] .nav-btn[data-view="topup"],
body[data-role="technician"] .nav-btn[data-view="purchases"],
body[data-role="technician"] .nav-btn[data-view="expenses"],
body[data-role="technician"] .nav-btn[data-view="reports"],
body[data-role="technician"] .nav-btn[data-view="admin"]{display:none!important}

@media(max-height:720px){
  .login-card{padding:18px 20px;border-radius:18px}
  .login-brand{height:64px;margin-bottom:8px}
  .login-card h1{font-size:22px;margin:5px 0 4px}
  .login-form{margin-top:12px;gap:9px}
  .login-note{margin-top:10px;padding:8px 10px}
  .login-cloud-status{margin-top:9px;padding:8px 10px}
}
@media(max-width:560px){
  .login-screen{place-items:start center;padding-top:max(10px,env(safe-area-inset-top))}
  .login-card{width:100%;max-height:calc(100dvh - 20px);padding:16px 16px;margin:auto 0}
  .login-brand{height:62px;margin-bottom:8px}
  .login-card h1{font-size:21px}
  .login-form{margin-top:12px;gap:9px}
  .login-note{margin-top:10px;padding:8px 10px}
  .login-cloud-status{margin-top:9px;padding:8px 10px}
  .sidebar{height:100dvh;overflow:hidden}
  .brand-wrap{padding-top:max(12px,env(safe-area-inset-top))}
}

@media(max-width:800px){
  .modal{align-items:flex-start;overflow:auto;padding:10px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .modal-card{max-height:calc(100dvh - 20px);margin:0 auto}
}
@media(max-width:560px){.clock{display:none}}


/* V4.3: strict role isolation + always open at top */
html{scroll-behavior:auto!important;overflow-x:hidden}
body{min-height:100dvh;overflow-x:hidden}
.main{min-height:100dvh;overflow-x:hidden;scroll-margin-top:0}
.role-blocked{display:none!important}
body[data-role="cashier"] #view-purchases,
body[data-role="cashier"] #view-expenses,
body[data-role="cashier"] #view-reports,
body[data-role="cashier"] #view-admin,
body[data-role="technician"] #view-sale,
body[data-role="technician"] #view-topup,
body[data-role="technician"] #view-purchases,
body[data-role="technician"] #view-expenses,
body[data-role="technician"] #view-reports,
body[data-role="technician"] #view-admin{display:none!important}
.login-screen{align-items:start!important;justify-items:center!important;overflow-y:auto!important;overflow-x:hidden!important;padding-top:max(8px,env(safe-area-inset-top))!important}
.login-card{margin:0 auto 12px!important;max-height:none!important;overflow:visible!important}
.sidebar{overflow:hidden}
.nav{flex:1 1 auto;min-height:0;overflow-y:auto!important}
@media(max-width:800px){
  .topbar{top:0}
  .view{scroll-margin-top:72px}
  .login-card{width:min(430px,100%)!important}
}
@media(max-height:620px){
  .login-brand{height:48px!important;margin-bottom:4px!important}
  .login-card{padding:12px 16px!important}
  .login-note{display:none}
}

body.saving{cursor:progress}.save-recovery{position:fixed;inset:0;background:#000b;z-index:10000;display:grid;place-items:center;padding:24px}.save-recovery[hidden]{display:none}.save-recovery>div{max-width:500px;padding:32px;background:#18181c;color:white;border-radius:16px}