*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,"Microsoft YaHei",sans-serif;background:#f5f6fa;color:#333;max-width:500px;margin:0 auto;min-height:100vh;}
.page{display:none;padding:0;min-height:100vh;}
.page.active{display:block;}
input{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:15px;outline:none;}
input:focus{border-color:#667eea;}
button{cursor:pointer;border:none;border-radius:8px;font-size:15px;padding:12px 20px;}
.btn-primary{background:#667eea;color:white;}
.btn-small{padding:8px 14px;font-size:13px;background:#667eea;color:white;white-space:nowrap;}
.msg{text-align:center;padding:8px;border-radius:6px;margin-top:8px;font-size:13px;display:none;}
.msg.error{display:block;background:#f8d7da;color:#721c24;}
.msg.success{display:block;background:#d4edda;color:#155724;}

/* 登录页 */
.login-box{padding:40px 24px;text-align:center;}
.logo{font-size:48px;margin-bottom:8px;}
.login-box h2{font-size:20px;color:#444;margin-bottom:20px;}
.user-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.user-item{padding:10px 20px;background:white;border:2px solid #e0e0e0;border-radius:10px;font-size:15px;cursor:pointer;transition:all .15s;}
.user-item:hover,.user-item:active{border-color:#667eea;color:#667eea;}
.admin-link,.back-link{text-align:center;padding:20px;color:#999;font-size:13px;cursor:pointer;}
.back-link{margin-top:12px;}

/* 打卡页 */
header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:white;border-bottom:1px solid #eee;}
.header-left{display:flex;align-items:center;gap:10px;font-weight:bold;font-size:15px;}
.badge{font-size:12px;color:#667eea;border:1px solid #667eea;padding:3px 8px;border-radius:12px;cursor:pointer;}
.header-right{display:flex;align-items:center;gap:12px;font-size:13px;color:#999;}
.logout{color:#e74c3c;cursor:pointer;}
.back{color:#667eea;cursor:pointer;}
.header-center{font-weight:bold;font-size:15px;}

.clock-body{padding:24px 20px;text-align:center;}
.time-display{font-size:48px;font-weight:bold;font-family:'Courier New',monospace;color:#333;}
.date-display{font-size:15px;color:#999;margin-top:4px;margin-bottom:20px;}

.location-box{background:white;border-radius:12px;padding:12px 16px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.loc-row{display:flex;justify-content:space-between;align-items:center;}
#loc-text{font-size:13px;color:#666;text-align:left;flex:1;margin-right:8px;word-break:break-all;}
.btn-loc{padding:6px 12px;font-size:12px;background:#f0f2f5;border-radius:6px;white-space:nowrap;}
.btn-loc:active{background:#e0e0e0;}

.status-box{background:white;border-radius:12px;padding:20px;margin-bottom:24px;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.status-empty{color:#999;font-size:14px;}
.status-in{color:#27ae60;}
.status-in .label{font-size:14px;margin-bottom:4px;}
.status-in .time{font-size:22px;font-weight:bold;}
.status-in .loc{font-size:12px;color:#999;margin-top:4px;}
.status-out{color:#333;}
.status-out .label{font-size:14px;margin-bottom:4px;}
.status-out .time-range{font-size:15px;margin:4px 0;}
.status-out .hours{font-size:36px;font-weight:bold;color:#667eea;}
.status-out .hours-label{font-size:13px;color:#999;}

.clock-btn-wrap{padding:0 20px;}
.btn-clock{width:100%;padding:20px;font-size:20px;font-weight:bold;border-radius:16px;transition:all .15s;box-shadow:0 4px 12px rgba(0,0,0,.1);}
.btn-clock:active{transform:scale(.96);}
.btn-clock-in{background:linear-gradient(135deg,#667eea,#764ba2);color:white;}
.btn-clock-out{background:linear-gradient(135deg,#e67e22,#d35400);color:white;}

/* 本月页 */
.month-summary{display:flex;gap:8px;padding:16px;background:white;margin:0 16px 12px;border-radius:10px;}
.month-summary .item{flex:1;text-align:center;}
.month-summary .num{font-size:22px;font-weight:bold;color:#667eea;}
.month-summary .label{font-size:12px;color:#999;margin-top:2px;}
.month-controls{padding:0 16px;margin-bottom:12px;display:flex;gap:8px;}
.month-list{padding:0 16px;}
.day-item{background:white;border-radius:10px;padding:12px 16px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.day-item .left .day-date{font-weight:bold;font-size:14px;}
.day-item .left .day-time{font-size:12px;color:#999;margin-top:2px;}
.day-item .right{font-weight:bold;color:#667eea;font-size:16px;}
.day-item .right .empty{color:#ccc;}

/* 管理后台 */
.admin-tabs{display:flex;background:white;border-bottom:1px solid #eee;}
.admin-tab{flex:1;padding:12px;text-align:center;border:none;background:none;font-size:14px;color:#666;border-bottom:2px solid transparent;border-radius:0;}
.admin-tab.active{color:#667eea;border-bottom-color:#667eea;}
.admin-page{display:none;padding:16px;}
.admin-page.active{display:block;}
.admin-section-title{font-weight:bold;font-size:15px;color:#444;margin-bottom:12px;}
.add-user-row{display:flex;gap:8px;margin-bottom:12px;}
.add-user-row input{flex:1;padding:8px 10px;font-size:13px;}

#user-list .user-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:white;border-radius:8px;margin-bottom:6px;}
#user-list .user-item .name{font-weight:bold;font-size:14px;}
#user-list .user-item .actions{display:flex;gap:6px;}
#user-list .user-item .actions button{font-size:12px;padding:4px 10px;border-radius:4px;}
.btn-edit{background:#f0f2f5;color:#666;}
.btn-del{background:#fee2e2;color:#dc2626;}
.btn-del-sm{font-size:11px;padding:3px 8px;border-radius:4px;background:#fee2e2;color:#dc2626;margin-left:8px;}

#admin-today-list .item{background:white;border-radius:8px;padding:12px 16px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;}
#admin-today-list .item .name{font-weight:bold;font-size:14px;}
#admin-today-list .item .detail{font-size:12px;color:#999;margin-top:2px;}
#admin-today-list .item .hours{font-weight:bold;color:#27ae60;}

#admin-report-stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
#admin-report-stats .stat-card{flex:1;min-width:100px;background:white;padding:12px;border-radius:8px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.04);}
#admin-report-stats .stat-card .num{font-size:18px;font-weight:bold;color:#667eea;}
#admin-report-stats .stat-card .label{font-size:12px;color:#999;margin-top:2px;}

#admin-report-list .item{background:white;border-radius:6px;padding:8px 12px;margin-bottom:4px;font-size:13px;display:flex;justify-content:space-between;align-items:center;}
#admin-report-list .item .h{font-weight:bold;color:#667eea;}