/* styles incl. payroll table */*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',Arial,sans-serif;background:#f4f5f6;color:#222}
.safe-top{height:env(safe-area-inset-top);background:#111}
.app-header{position:sticky;top:0;display:grid;grid-template-columns:48px 1fr auto;gap:8px;align-items:center;padding:10px 12px;background:#222;color:#fff}
.brand-text{font-weight:700;font-size:20px}
.btn{border:none;border-radius:10px;padding:10px 14px;background:#e9eaee}.btn.primary{background:#111;color:#fff}.btn.tiny{padding:6px 10px}
.time-strip{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;background:#fff;border-bottom:1px solid #e6e6e6}
.site-badge{background:#f2f3f5;border:1px solid #d9dbe1;color:#333;padding:6px 10px;border-radius:8px;font-weight:700}
.clock{font-size:28px;font-weight:800}.date{font-size:13px;color:#666}
.pill{background:#222;color:#fff;padding:6px 10px;border-radius:8px;font-size:12px;font-weight:700}.pill-outline{background:#f2f3f5;color:#333;border:1px solid #d9dbe1}
.main{padding:16px 16px 96px}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.big-card{display:grid;align-content:center;justify-items:center;gap:10px;height:180px;border-radius:12px;border:none;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.05),0 6px 18px rgba(0,0,0,.06)}
.big-card.start{background:#FFD438}.big-card.end{background:#e9eaee;color:#666}
.big-card .title{font-size:28px;font-weight:800}.big-card .sub{font-size:14px;opacity:.9}
.icon{width:64px;height:64px}.sun{background:radial-gradient(circle at 50% 50%,#fff 0 16px,transparent 17px),conic-gradient(from 0deg,#fff 0 360deg);-webkit-mask:conic-gradient(#000 0 360deg),radial-gradient(circle at 50% 50%,transparent 0 16px,#000 17px);mask:conic-gradient(#000 0 360deg),radial-gradient(circle at 50% 50%,transparent 0 16px,#000 17px);border-radius:50%}
.moon{background:radial-gradient(circle at 42% 38%,#fff 0 28px,transparent 28px),radial-gradient(circle at 60% 42%,#e7e9ee 0 24px,transparent 24px);border-radius:50%}
.log h2{font-size:16px;color:#444;margin:24px 4px 8px}.log-list{list-style:none;padding:0;margin:0}.log-list li{background:#fff;border:1px solid #ececec;border-radius:10px;padding:12px;margin-bottom:8px;display:flex;justify-content:space-between;gap:8px;font-size:14px}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#111;padding:8px 0;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.nav-item{display:grid;justify-items:center;gap:6px;text-decoration:none;color:#cfd2d8}.nav-item.active{color:#FFD438}.nav-label{font-size:12px}
.login-view{display:grid;place-items:center;padding:24px}
.login-card{width:min(520px,92vw);background:#fff;border-radius:16px;padding:24px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
label{display:grid;gap:6px;margin-bottom:12px;font-size:14px}input{height:44px;border:1px solid #d8dbe2;border-radius:12px;padding:0 12px;font-size:16px}
.err{background:#ffefef;color:#7a0c0c;border:1px solid #f3b9b9;padding:8px 12px;border-radius:8px;margin-top:8px}.hint{font-size:12px;color:#666}
/* payroll table */
.payroll{margin-top:20px}.pay-head{display:flex;justify-content:space-between;align-items:center}.table-wrap{overflow-x:auto;background:#fff;border-radius:12px;border:1px solid #ececec}
table{width:100%;border-collapse:collapse}thead th{background:#f7f8fa;font-weight:700;font-size:12px;padding:10px;border-bottom:1px solid #ececec;white-space:nowrap}tbody td{padding:10px;border-bottom:1px solid #f1f1f1;font-size:13px;text-align:right}tbody td:first-child,thead th:first-child{text-align:left}
.pay-summary{margin:10px 0;font-size:14px;color:#333}