:root{color:#243042;background:#f5f7fb;font-family:Inter,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}.page{max-width:1180px;margin:0 auto;padding:28px 28px 56px}.gate{min-height:100vh;display:grid;place-items:center;padding:24px}.gate-card{width:min(440px,100%);background:#fff;border:1px solid #d7eee8;border-radius:18px;padding:28px}.gate-card h1,.login-card h2{margin:0 0 8px}.gate-card p{color:#5f6b7a}.role-grid{display:grid;gap:10px;margin-top:18px}.role-choice,.text-back{border:1px solid #d5e4df;background:#fff;color:#0f766e;border-radius:12px;padding:12px 14px;font-weight:600;cursor:pointer;text-align:left}.text-back{border:none;padding:0 0 12px;background:none}.demo-hint,.saved-note{color:#0f766e;font-size:13px}.punch-actions{display:flex;gap:10px;margin-bottom:16px}.punch-cell{display:grid;gap:2px}.punch-cell small,.map-link{color:#0f766e;font-size:12px}.people-form{margin:16px 0}.people-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}.people-list li{display:flex;justify-content:space-between;gap:12px;background:#fff;border-radius:12px;padding:12px 14px}.day-edit{margin-top:12px}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}.brand p{margin:2px 0 0;color:#8b97a8;font-size:13px}.logo{width:52px;height:52px;border-radius:14px;object-fit:cover;background:#fff;border:1px solid #e6eef2;flex:none}.logo.fallback{display:grid;place-items:center;background:#14b8a6;color:#fff;font-weight:700;font-size:22px}.edit-button,.ghost{border-radius:10px;padding:9px 14px;cursor:pointer}.edit-button{border:1px solid #14b8a6;background:#fff;color:#0f9f8f;font-weight:600}.header-actions{display:flex;align-items:center;gap:10px;flex:none}.print-button{border:1px solid #14b8a6;background:#14b8a6;color:#fff;border-radius:10px;padding:9px 16px;cursor:pointer;font-weight:600}.print-button:disabled,.edit-button:disabled,.ghost:disabled{opacity:.6;cursor:default}.print-period,.print-title{display:none}.banner,.form-error{background:#fff1f2;color:#be123c;border-radius:10px;padding:10px 12px;margin:0 0 16px;font-size:14px}.summary{background:#fff;border:1.5px solid #63e0cb;border-radius:16px;padding:22px 28px 26px}.summary.is-loading{opacity:.72}.tabs{display:flex;gap:22px;margin-bottom:26px}.tab{border:none;border-bottom:2px solid transparent;background:none;color:#9aa3af;padding:0 0 8px;cursor:pointer;font-size:15px}.tab.active{color:#14b8a6;border-bottom-color:#14b8a6;font-weight:600}.summary-body{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:28px}.stats{display:flex;flex-wrap:wrap;gap:28px 42px}.stat-top{display:flex;align-items:center;gap:8px}.stat-value{font-size:34px;font-weight:600;letter-spacing:-.04em;line-height:1;color:#243042}.change{font-size:12px;font-weight:600;white-space:nowrap}.change.up{color:#1f9d62}.change.down{color:#e35d6a}.change.flat{color:#98a2b3}.stat-label{margin-top:8px;color:#98a2b3;font-size:13px}.chart-block{position:relative;width:132px;height:132px}.chart-callout{position:absolute;top:2px;left:86px;color:#7b8798;font-size:12px;white-space:nowrap}.chart-callout span{position:relative}.chart-callout span:before{content:"";position:absolute;left:-18px;top:7px;width:14px;height:1px;background:#c5ced8}.donut{width:132px;height:132px}.legend{display:grid;grid-template-columns:auto auto;gap:12px 28px;list-style:none;margin:0;padding:0}.legend li{display:flex;align-items:center;gap:8px;color:#6b7280;font-size:13px;white-space:nowrap}.legend i{width:10px;height:10px;border-radius:2px}.as-of{margin:26px 0 14px;color:#98a2b3;font-size:14px}.as-of-who{margin-left:10px;color:#1d4f91;font-weight:600}.employee-search{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:#5f6b7a;font-size:13px;font-weight:600}.employee-search input{width:min(360px,100%);border:1px solid #d5e4df;background:#fff;border-radius:12px;padding:10px 14px;color:#1c3340;font-weight:500;outline:none}.employee-search input:focus{border-color:#14b8a6;box-shadow:0 0 0 3px #14b8a626}.table-card{position:relative;padding-left:16px}.table-card:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:4px;background:#c4b5fd}.table-scroll{overflow:auto;max-height:640px}table{width:100%;border-collapse:collapse;min-width:980px}th{position:sticky;top:0;z-index:1;background:#f5f7fb;text-align:left;color:#9aa6b6;font-size:13px;font-weight:500;padding:8px 14px 14px;border-bottom:1px solid #e6ebf2;white-space:nowrap}td{padding:16px 14px;border-bottom:1px solid #eef2f6;color:#3d4b5f;font-size:14px;vertical-align:middle;background:#fff}.sno{color:#8b97a8;width:56px}.who{display:flex;align-items:center;gap:12px}.avatar{width:38px;height:38px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}.name-button{display:block;border:none;background:none;padding:0;font-weight:600;color:#1d4f91;cursor:pointer;text-align:left}.name-button:hover{text-decoration:underline}.emp-meta{display:flex;align-items:center;gap:8px;margin-top:5px}.work-date{color:#8b97a8;font-size:12px}.pill{display:inline-flex;align-items:center;border-radius:8px;padding:3px 8px;font-size:11px;font-weight:600;color:#fff;line-height:1.2}.pill.on_time{background:#10b981}.pill.late{background:#f59e0b;color:#fff}.pill.absence{background:#ef4444}.pill.not_present{background:#64748b}.pill.on_leave{background:#6366f1}.code{font-variant-numeric:tabular-nums;letter-spacing:.01em}.empty{text-align:center;color:#8b97a8;padding:36px 14px}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#1c273659;display:grid;place-items:center;padding:20px;z-index:5}.dialog{width:min(440px,100%);background:#fff;border-radius:16px;padding:22px;box-shadow:0 20px 50px #1c273629}.dialog h2{margin:0;font-size:18px}.dialog-copy{margin:8px 0 18px;color:#6b7280;font-size:13px}.field{display:grid;gap:6px;margin-bottom:14px;color:#4b5568;font-size:13px;font-weight:600}.field input,.field select{border:1px solid #d9e1ea;border-radius:10px;padding:10px 12px;color:#243042;font-weight:500}.logo.preview{width:64px;height:64px;margin-bottom:12px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.ghost{border:1px solid #d9e1ea;background:#fff;color:#4b5568}.month-sheet{display:grid;gap:16px}.sheet-back{justify-self:start;border:none;background:none;color:#1d4f91;padding:0;font-size:14px;font-weight:600;cursor:pointer}.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.kpi-card{background:#fff;border:1px solid #e6ebf2;border-radius:16px;padding:16px 18px 14px;border-top:3px solid #10b981}.kpi-card strong{display:block;font-size:32px;line-height:1;letter-spacing:-.04em;color:#243042}.kpi-card span{display:block;margin-top:8px;color:#98a2b3;font-size:13px}.kpi-card.late{border-top-color:#f59e0b}.kpi-card.absent{border-top-color:#ef4444}.kpi-card.leave{border-top-color:#6366f1}.insight-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.panel{background:#fff;border:1px solid #e6ebf2;border-radius:16px;padding:18px 20px}.panel h2,.day-title,.sheet-months h2{margin:0;color:#243042;font-size:16px;font-weight:600}.employee-chart{position:static;width:148px;height:148px;margin-top:12px}.employee-chart .donut{width:148px;height:148px}.summary-list{display:grid;gap:14px;margin:16px 0 0}.summary-list div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eef2f6}.summary-list dt{color:#6b7280;font-size:14px}.summary-list dd{margin:0;color:#243042;font-size:18px;font-weight:600}.section-label{margin:0 0 12px;color:#98a2b3;font-size:13px;font-weight:600}.profile-meta{margin:4px 0 0;color:#5f6b7a;font-size:14px}.day-toolbar{align-items:center}.sheet-months h2{min-width:148px;text-align:center}.status-filter{display:flex;align-items:center;gap:8px;color:#5f6b7a;font-size:13px;font-weight:600}.status-filter select{border:1px solid #d5e4df;background:#fff;border-radius:12px;padding:10px 12px;color:#1c3340;font:inherit;font-weight:500}.day-scroll{max-height:none;overflow:visible}.day-table{min-width:0}.sheet-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}.sheet-nav{border:1px solid #d5e4df;background:#fff;color:#0f766e;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer}.sheet-nav:disabled,.sheet-back:disabled{opacity:.45;cursor:default}.sheet-months{display:flex;align-items:center;gap:10px}.employee-line{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(110px,1fr));gap:8px 18px;align-items:center;margin:0 0 8px;padding:8px 14px 16px;border-bottom:1px solid #e6ebf2;color:#3d4b5f;font-size:14px}.employee-line-name{color:#1d4f91;font-weight:600}.employee-line-label{display:block;margin-bottom:4px;color:#9aa6b6;font-size:13px;font-weight:500}.sheet-print{display:none}.sheet-scroll{overflow:auto;max-width:100%}.sheet-table{min-width:max-content}.sheet-table th,.sheet-table td{text-align:center;white-space:nowrap;min-width:92px}.sheet-sticky{position:sticky;left:0;z-index:2;text-align:left;min-width:148px;background:#fff;font-weight:600}.sheet-table thead .sheet-sticky,.sheet-table thead th{background:#f5f7fb}.sheet-table thead .sheet-sticky{z-index:3}.punch-in{color:#0f766e}.punch-out{color:#9a6700}.has-punch{font-variant-numeric:tabular-nums}.empty-punch{color:#c5ced6}@media(max-width:900px){.kpi-row{grid-template-columns:1fr 1fr}.insight-row{grid-template-columns:1fr}.sheet-toolbar{align-items:flex-start;flex-direction:column}}@media print{@page{size:A4 landscape;margin:8mm 10mm}@page employee{size:A4 portrait;margin:8mm}html,body{background:#fff;color:#1c2430}.page{max-width:none;margin:0;padding:0}.page.has-sheet{page:employee}.header-actions,.tabs,.chart-block,.legend,.banner,.backdrop,.avatar,.sheet-back,.sheet-nav,.status-filter,.chart-panel,.employee-search,.table-card:before{display:none!important}.has-sheet .header{break-after:avoid;margin-bottom:3mm}.has-sheet .logo{width:12mm;height:12mm}.has-sheet .month-sheet{gap:2mm}.has-sheet .insight-row{display:block}.has-sheet .summary-list{display:flex;gap:8mm;margin:1mm 0 0}.has-sheet .summary-list div{border:none;padding:0;gap:2mm}.has-sheet .summary-list dd{font-size:10pt}.has-sheet .profile-card,.has-sheet .section-label{margin:0}.has-sheet .profile-card{padding:0}.has-sheet .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm}.has-sheet .kpi-card{padding:2mm 3mm}.has-sheet .kpi-card strong{font-size:14pt}.has-sheet .panel{border:none;padding:0 0 2mm}.has-sheet .day-table th,.has-sheet .day-table td{padding:.45mm 1.5mm;font-size:8pt;line-height:1.15}.sheet-sticky{position:static}.employee-line,.sheet-date{print-color-adjust:exact;-webkit-print-color-adjust:exact}.header{display:flex;align-items:center;gap:14px;margin:0 0 8mm;padding-bottom:4mm;border-bottom:2px solid #14b8a6}.logo{width:18mm;height:18mm;border-radius:3mm;print-color-adjust:exact;-webkit-print-color-adjust:exact}.brand h1{font-size:20pt;line-height:1.1}.screen-kicker{display:none}.print-title,.print-period{display:block;margin-top:1mm;color:#1c2430;font-size:11pt}.print-title{color:#4b5568;font-weight:500}.print-period{font-weight:600}.summary{border:none;border-radius:0;padding:0 0 4mm;break-after:avoid}.summary-body{display:block}.stats{display:flex;gap:10mm}.stat-value{font-size:14pt}.stat-label,.change{font-size:8pt}.as-of{display:none}.table-card{padding:0}.table-scroll{max-height:none;overflow:visible}table{min-width:0;width:100%}thead{display:table-header-group}tr,td,th{break-inside:avoid}th{position:static;background:#eef6f4;color:#1c2430;font-size:8pt;font-weight:700;padding:2.5mm 1.5mm;print-color-adjust:exact;-webkit-print-color-adjust:exact}td{font-size:8pt;padding:2mm 1.5mm;background:#fff}.sheet-print th,.sheet-print td{min-width:0;font-size:8pt;padding:1.15mm 1.5mm;text-align:left}.emp-name{font-size:8.5pt}.pill{print-color-adjust:exact;-webkit-print-color-adjust:exact}}@media(max-width:900px){.summary-body{grid-template-columns:1fr}.header{align-items:flex-start}.chart-callout{left:108px}}