:root{color:#121826;background:#f5f7fa;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}button{font:inherit}.page{display:flex;flex-direction:column;gap:24px;margin:0 auto;max-width:1120px;min-height:100svh;padding:28px 20px 40px}.page-center{align-items:center;justify-content:center}.loading-text{color:#687386;font-size:15px;font-weight:800}.top-bar,.brand-row,.header-actions,.status-panel,.action-row,.section-title-row{align-items:center;display:flex}.top-bar{gap:16px;justify-content:space-between}.brand-row{gap:16px;justify-content:space-between;width:100%}.brand-row-compact{justify-content:flex-start;width:auto}.brand-home{background:transparent;border:0;cursor:pointer;display:grid;padding:0;text-align:left}h1,h2,h3,p{margin:0}h1{color:#121826;font-size:32px;font-weight:900}h2{color:#121826;font-size:20px;font-weight:900}h3{color:#121826;font-size:15px;font-weight:900}.brand-row p,.auth-content p,.empty-text{color:#687386;font-size:15px;font-weight:700}.header-actions{flex-wrap:wrap;gap:10px;justify-content:flex-end}.language-toggle{background:#e3e7ef;border-radius:8px;display:grid;gap:4px;grid-template-columns:1fr 1fr;padding:4px}.language-toggle button{background:transparent;border:0;border-radius:6px;color:#687386;cursor:pointer;font-size:14px;font-weight:900;min-height:42px;min-width:90px;padding:0 14px}.language-toggle button[aria-pressed=true]{background:#fff;color:#121826;box-shadow:0 1px 4px #1218261a}.auth-panel{background:#fff;border:1px solid #d9dee7;border-radius:8px;padding:24px}.auth-panel{display:grid;gap:28px;max-width:640px;width:min(100%,640px)}.auth-content{display:grid;gap:16px}.dashboard{display:grid;gap:18px}.view-tabs{background:#e3e7ef;border-radius:8px;display:grid;gap:4px;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px}.view-tabs button{background:transparent;border:0;border-radius:6px;color:#687386;cursor:pointer;font-weight:900;min-height:42px;padding:0 14px}.view-tabs button[aria-selected=true]{background:#fff;color:#121826;box-shadow:0 1px 4px #1218261a}.attendance-panel,.records-panel,.team-list-panel{background:#fff;border:1px solid #d9dee7;border-radius:8px;display:grid;gap:18px;padding:22px}.attendance-hero{align-items:flex-start;display:flex;gap:18px;justify-content:space-between}.primary-time{min-width:160px;text-align:right}.primary-time span,.time-summary-item span{color:#687386;display:block;font-size:12px;font-weight:900;margin-bottom:6px;text-transform:uppercase}.primary-time strong{color:#166a4d;display:block;font-size:30px;font-weight:900}.time-summary{border-top:1px solid #d9dee7;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:18px}.time-summary-item{min-width:0}.time-summary-item strong{color:#121826;display:block;font-size:22px;font-weight:900;overflow-wrap:anywhere}.time-summary-item-accent strong{color:#b45309}.supporting-meta{color:#687386;display:flex;flex-wrap:wrap;font-size:13px;font-weight:800;gap:6px 14px}.section-subtitle{color:#687386;font-size:13px;font-weight:800;margin-top:4px}.icon-button{align-items:center;background:#fff;border:1px solid #d9dee7;border-radius:8px;cursor:pointer;display:inline-flex;flex-direction:column;gap:5px;height:46px;justify-content:center;padding:0;width:46px}.icon-button:hover{border-color:#166a4d}.icon-button-plain{background:#f8fafc;position:relative}.hamburger-line,.close-line{background:#121826;border-radius:999px;display:block;height:2px;width:18px}.close-line{left:13px;position:absolute;top:22px}.close-line-left{transform:rotate(45deg)}.close-line-right{transform:rotate(-45deg)}.team-status-dot{border-radius:999px;display:block;height:10px;width:10px}.team-status-dot-offDuty{background:#8a94a6}.team-status-dot-working{background:#166a4d}.team-status-dot-onBreak{background:#b45309}.team-list{border-top:1px solid #d9dee7;display:grid}.team-list-row{align-items:center;border-bottom:1px solid #d9dee7;display:grid;grid-template-areas:"member status break work clock";gap:14px;grid-template-columns:minmax(180px,1.4fr) auto auto auto minmax(104px,auto);min-height:70px;padding:14px 0}.team-member-cell{align-items:center;display:grid;gap:10px;grid-area:member;grid-template-columns:auto minmax(0,1fr);min-width:0}.team-member-cell strong,.team-member-cell span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team-member-cell strong{color:#121826;font-size:15px;font-weight:900}.team-member-cell span,.team-break-state,.team-clock-time{color:#687386;font-size:13px;font-weight:800}.team-work-time{color:#121826;font-size:15px;font-weight:900;grid-area:work;white-space:nowrap}.team-break-state{grid-area:break}.team-clock-time{grid-area:clock}.status-pill{border-radius:999px;display:inline-flex;font-size:12px;font-weight:900;grid-area:status;justify-content:center;min-width:72px;padding:7px 10px;white-space:nowrap}.status-pill-offDuty{background:#e3e7ef;color:#4b5565}.status-pill-working{background:#dcfce7;color:#166a4d}.status-pill-onBreak{background:#ffedd5;color:#b45309}.status-panel{background:#f8fafc;border:1px solid #d9dee7;border-radius:8px;gap:16px;justify-content:space-between;padding:18px}.eyebrow{color:#687386;display:block;font-size:12px;font-weight:900;margin-bottom:6px;text-transform:uppercase}.status-text{color:#121826;display:block;font-size:28px;font-weight:900}.member-name{color:#687386;display:block;font-size:13px;font-weight:800;margin-top:4px}.status-badge{align-items:center;border:1px solid #d9dee7;border-radius:999px;color:#687386;display:inline-flex;flex:0 0 auto;font-size:13px;font-weight:900;gap:8px;min-height:36px;padding:0 12px}.status-badge span{background:#166a4d;border-radius:999px;display:block;height:8px;width:8px}.status-badge-loading span,.status-badge-syncing span{background:#b45309}.status-badge-failed span{background:#c2410c}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-row{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}.button{align-items:center;border:0;border-radius:8px;cursor:pointer;display:inline-flex;font-weight:900;justify-content:center;min-height:44px;padding:0 16px}.button:disabled{background:#e3e7ef;color:#8a94a6;cursor:not-allowed}.button-full{width:100%}.button-small{font-size:13px;min-height:34px;padding:0 12px}.button-primary{background:#166a4d;color:#fff}.button-primary:not(:disabled):hover{background:#0f513a}.button-secondary{background:#2358d3;color:#fff}.button-secondary:not(:disabled):hover{background:#193fa0}.button-neutral{background:#121826;color:#fff}.button-neutral:not(:disabled):hover{background:#2b3345}.button-ghost{background:#e3e7ef;color:#121826}.button-danger{background:#c2410c;color:#fff}.action-button{min-height:56px}.error-panel{align-items:center;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;color:#9a3412;display:flex;gap:16px;justify-content:space-between;padding:16px}.error-panel strong{display:block;font-size:15px;font-weight:900;margin-bottom:4px}.error-panel p{font-size:14px;font-weight:750;line-height:1.45}.section-title-row{justify-content:space-between}.menu-layer{inset:0;position:fixed;z-index:20}.menu-backdrop{background:#12182657;border:0;cursor:pointer;inset:0;position:absolute}.side-menu{background:#fff;box-shadow:-16px 0 40px #1218262e;display:grid;gap:20px;align-content:start;height:100%;margin-left:auto;max-width:440px;min-width:min(100%,360px);overflow:auto;padding:22px;position:relative;width:36vw}.menu-header{align-items:center;display:flex;justify-content:space-between}.menu-section{display:grid;gap:12px;min-width:0}.menu-nav{display:grid;gap:8px}.menu-nav button{background:#f8fafc;border:1px solid #d9dee7;border-radius:8px;color:#121826;cursor:pointer;font-weight:900;min-height:46px;text-align:left;padding:0 14px}.menu-section .language-toggle{width:100%}.menu-actions{display:grid;gap:10px;margin-top:4px}.timeline{display:grid;gap:0}.timeline-item{align-items:center;border-top:1px solid #d9dee7;display:grid;gap:12px;grid-template-columns:auto 1fr;min-height:64px}.timeline-dot{background:#166a4d;border-radius:999px;height:10px;width:10px}.timeline-item strong,.timeline-item span{display:block}.timeline-item strong{color:#121826;font-size:15px;font-weight:900}.timeline-item span{color:#687386;font-size:13px;font-weight:700;margin-top:3px}.empty-text{padding:20px 0 4px}@media(max-width:860px){.brand-row,.status-panel{align-items:stretch;flex-direction:column}.header-actions{justify-content:flex-end}.time-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.team-list-row{align-items:center;grid-template-areas:"member status" "break break" "work clock";grid-template-columns:minmax(0,1fr) auto}.side-menu{width:min(100%,420px)}}@media(max-width:560px){.page{gap:14px;padding:18px 14px 32px}.auth-panel,.attendance-panel,.records-panel,.team-list-panel{padding:18px}h1{font-size:28px;line-height:1.05}.brand-row-compact{min-width:0}.brand-row-compact p{font-size:13px;margin-top:4px}.top-bar{align-items:flex-start;flex-direction:row}.view-tabs{gap:3px;padding:3px}.view-tabs button{min-height:40px;padding:0 10px}.action-row{grid-template-columns:1fr}.attendance-hero{display:grid}.primary-time{min-width:0;text-align:left}.time-summary{grid-template-columns:1fr}.team-list-row{align-items:center;grid-template-areas:"member status" "break break" "work clock";grid-template-columns:minmax(0,1fr) auto}.team-break-state,.team-work-time,.team-clock-time{grid-column:auto}.team-break-state,.team-clock-time{justify-self:start}.language-toggle{width:100%}.language-toggle button{min-width:0}.error-panel{align-items:stretch;flex-direction:column}.side-menu{min-width:100%;padding:18px;width:100%}}