:root{
  --blue:#1a73e8;--blue-dk:#0f4c9e;--blue-lt:#e8f0fe;
  --orange:#ff9900;--yellow:#ffd814;--green:#1a8a3a;--red:#c0392b;
  --g1:#f6f6f6;--g2:#e8e8e8;--g3:#b0b0b0;--g4:#555;--dark:#111820;
  --sh:0 2px 8px rgba(0,0,0,.1);--sh2:0 4px 20px rgba(0,0,0,.13);--sh3:0 8px 32px rgba(0,0,0,.16);
  --r:8px;--rl:12px;
  --nav-h:56px;--bot-h:60px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',sans-serif;background:#f0f2f5;color:var(--dark);overflow-x:hidden}

body.dark-mode{
  --blue-lt:#112240;
  --g1:#0b1220;
  --g2:#1f2937;
  --g3:#94a3b8;
  --g4:#cbd5e1;
  --dark:#e5e7eb;
  --sh:0 2px 10px rgba(0,0,0,.45);
  --sh2:0 6px 24px rgba(0,0,0,.45);
  --sh3:0 10px 36px rgba(0,0,0,.55);
  background:#0b1220;
  color:#e5e7eb;
}

body.dark-mode #loginScreen,
body.dark-mode .lcard,
body.dark-mode .utype,
body.dark-mode .cat-card,
body.dark-mode .pc,
body.dark-mode .sidebar,
body.dark-mode .pbar,
body.dark-mode .pcard,
body.dark-mode .modal,
body.dark-mode .cart-panel,
body.dark-mode .m-fav,
body.dark-mode .m-close {
  background:#111827;
  color:#e5e7eb;
  border-color:#334155;
}

body.dark-mode .form-control,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background:#0f172a;
  color:#e5e7eb;
  border-color:#334155;
}

body.dark-mode .subnav{background:#0f172a}
body.dark-mode .topbar{background:#0b1b34}