@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
  --bg-top:#f7fbff;
  --bg-mid:#eef4ff;
  --bg-bottom:#f8fafc;
  --ink:#0f172a;
  --muted:#64748b;
  --line:rgba(148,163,184,.18);
  --glass:rgba(255,255,255,.78);
  --glass-strong:rgba(255,255,255,.9);
  --shadow-soft:0 20px 60px rgba(15,23,42,.08);
  --shadow-card:0 18px 42px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.62);
  --shadow-hover:0 24px 56px rgba(37,99,235,.12);
}
*{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.5) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:999px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}
body{
  font-family:'Inter',sans-serif;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(59,130,246,.16), transparent 22%),
    radial-gradient(circle at 92% 10%, rgba(14,165,233,.11), transparent 18%),
    radial-gradient(circle at 82% 78%, rgba(16,185,129,.10), transparent 20%),
    linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 46%,var(--bg-bottom) 100%);
}
.hidden{display:none!important}
button,input,select,textarea{transition:all .22s ease}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0) scale(.985)}
input,select,textarea{
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(59,130,246,.65)!important;
  box-shadow:0 0 0 4px rgba(59,130,246,.08), inset 0 1px 1px rgba(15,23,42,.02)!important;
}
header{
  background:rgba(255,255,255,.72)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-color:rgba(226,232,240,.75)!important;
  box-shadow:0 14px 38px rgba(15,23,42,.05);
}
#app-sidebar{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-right-color:rgba(226,232,240,.82)!important;
  box-shadow:0 28px 80px rgba(15,23,42,.16);
}
#sidebar-overlay{
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
#view-login .bg-white,
#view-opening .bg-white,
#view-operator .bg-white,
#view-admin .bg-white,
#receipt-modal .bg-white,
#close-shift-modal .bg-white,
#user-detail-modal .bg-white,
#toast-box{
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-color:rgba(226,232,240,.7)!important;
  box-shadow:var(--shadow-card);
}
#view-login{
  background:
    radial-gradient(circle at 18% 18%, rgba(59,130,246,.18), transparent 20%),
    radial-gradient(circle at 82% 20%, rgba(14,165,233,.15), transparent 18%),
    linear-gradient(180deg, #020617 0%, #0f172a 100%)!important;
}
#view-login .bg-white{
  position:relative;
  overflow:hidden;
}
#view-login .bg-white::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.18), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events:none;
}
#view-login .bg-white > *{position:relative;z-index:1}
#menu-toggle,
#header-logout{
  background:rgba(255,255,255,.75)!important;
  border-color:rgba(226,232,240,.85)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
#app-sidebar button,
#view-admin button,
#view-operator button,
#view-opening button,
#view-login button{
  will-change:transform;
}
#app-sidebar button{
  position:relative;
  overflow:hidden;
}
#app-sidebar button::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 10%,rgba(255,255,255,.22) 38%,transparent 60%);
  transform:translateX(-130%);
  transition:transform .6s ease;
}
#app-sidebar button:hover::after{transform:translateX(130%)}
#app-sidebar button.bg-blue-600,
#view-admin .bg-blue-600,
#view-operator .bg-blue-600,
#view-opening .bg-blue-600,
#view-login .bg-blue-600{
  box-shadow:0 16px 34px rgba(37,99,235,.22)!important;
}
#view-operator .premium-balance-card{
  position:relative;
  overflow:hidden;
}
#view-operator .premium-balance-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(255,255,255,.36), transparent 38%);
  pointer-events:none;
}
#view-operator .premium-balance-brl{
  background:linear-gradient(135deg, rgba(236,253,245,.96), rgba(209,250,229,.72))!important;
  border-color:rgba(16,185,129,.16)!important;
}
#view-operator .premium-balance-bob{
  background:linear-gradient(135deg, rgba(239,246,255,.96), rgba(219,234,254,.74))!important;
  border-color:rgba(59,130,246,.16)!important;
}
#view-admin .premium-summary-card{
  position:relative;
  overflow:hidden;
}
#view-admin .premium-summary-card::before{
  content:"";
  position:absolute;
  width:140px;height:140px;right:-40px;top:-50px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.35), transparent 70%);
}
#view-admin .premium-summary-brl{
  background:linear-gradient(135deg, rgba(236,253,245,.96), rgba(209,250,229,.72))!important;
  border-color:rgba(16,185,129,.16)!important;
}
#view-admin .premium-summary-bob{
  background:linear-gradient(135deg, rgba(239,246,255,.96), rgba(219,234,254,.74))!important;
  border-color:rgba(59,130,246,.16)!important;
}
#ranking-list > button{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78))!important;
  border-color:rgba(226,232,240,.9)!important;
  box-shadow:var(--shadow-card);
}
#ranking-list > button:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}
table thead{
  background:rgba(248,250,252,.82)!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
table tbody tr{
  border-bottom:1px solid rgba(226,232,240,.56);
}
main{position:relative;z-index:1}
main::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 16%);
}
#receipt-modal img{
  background:linear-gradient(180deg, rgba(248,250,252,.8), rgba(255,255,255,1));
}
.floating-orb{
  position:fixed;
  border-radius:999px;
  filter:blur(80px);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}
.floating-orb.one{width:260px;height:260px;left:-50px;top:80px;background:rgba(59,130,246,.18)}
.floating-orb.two{width:280px;height:280px;right:-70px;top:140px;background:rgba(14,165,233,.14)}
.floating-orb.three{width:220px;height:220px;right:12%;bottom:6%;background:rgba(16,185,129,.11)}
.card-shine{
  position:relative;
  overflow:hidden;
}
.card-shine::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.26) 42%, transparent 62%);
  transform:translateX(-140%);
  transition:transform .8s ease;
}
.card-shine:hover::after{transform:translateX(140%)}
@media (max-width:768px){
  header{backdrop-filter:blur(14px)}
  #app-sidebar{width:88vw}
  #view-admin .rounded-3xl{border-radius:24px!important}
  #view-admin .rounded-2xl{border-radius:18px!important}
  #view-admin .text-2xl{font-size:1.35rem;line-height:1.2}
}