*{ box-sizing:border-box; }
html, body{ margin:0; width:100%; height:100%; overflow:hidden; font-family: “Noto Sans TC”, sans-serif; }
body{
background: linear-gradient( 135deg, #f7f7fb, #eef5ff, #fdf7ff );
}
.page{
width:100%; height:100dvh;
}
.hidden{ display:none !important; }
.login-panel{
width:min( 90vw, 420px );
padding:40px;
}
#loginPage{
display:flex; justify-content:center; align-items:center;
}
.glass-panel{
backdrop-filter: blur(30px);
background: rgba( 255, 255, 255, .18 );
border: 1px solid rgba( 255, 255, 255, .4 );
border-radius:32px;
box-shadow: 0 20px 60px rgba( 0, 0, 0, .12 );
}
.input{
width:100%;
padding:16px;
margin-top:14px;
border:none;
border-radius:16px;
}
.btn{
width:100%;
margin-top:20px;
padding:16px;
border:none;
border-radius:18px;
cursor:pointer;
}
.topbar{
height:70px;
display:flex;
align-items:center;
justify-content: space-between;
padding:0 20px;
}
.logout-btn{
border:none;
padding:10px 18px;
border-radius:14px;
}
.scanner-wrapper{
height: calc( 100dvh - 70px );
display:flex;
justify-content:center;
align-items:center;
}
.scan-frame{
position:relative;
width:min( 90vw, 500px );
}
.scan-line{
position:absolute;
left:0;
width:100%;
height:4px;
z-index:999;
background: linear-gradient( 90deg, transparent, #00d4ff, transparent );
animation: scan 2s linear infinite;
}
@keyframes scan{
from{ top:0; }
to{ top:280px; }
}
.loading{
position:fixed;
inset:0;
z-index:9999;
display:flex;
justify-content:center;
align-items:center;
backdrop-filter: blur(20px);
background: rgba( 255, 255, 255, .25 );
}
.glass-card{
padding:30px;
border-radius:24px;
background: rgba( 255, 255, 255, .4 );
}
.spinner{
width:40px;
height:40px;
margin:auto;
border:4px solid #ddd;
border-top-color:#666;
border-radius:50%;
animation: spin 1s linear infinite;
}
@keyframes spin{
to{ transform: rotate(360deg); }
}
.popup{
position:fixed;
top:30px;
left:50%;
transform: translateX(-50%);
padding: 18px 26px;
border-radius: 18px;
backdrop-filter: blur(20px);
z-index:99999;
}
.success{
background: rgba( 76, 175, 80, .85 );
color:white;
}
.error{
background: rgba( 244, 67, 54, .85 );
color:white;
}