:root{--ground:#f5f6f4;--surface:#fff;--ink:#17211e;--muted:#55615c;--border:#e6e9e7;--border-strong:#dde2df;--primary:#0f766e;--primary-tint:#e3f2ef;--warning:#9a4a07;--warning-tint:#fdefd9;--warning-border:#f0d3a6;--missed:#c2410c;--na:#c9cfcc}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--ground);color:var(--ink);margin:0;font-family:IBM Plex Sans Thai,system-ui,sans-serif;font-size:16px;line-height:1.45}.screen{max-width:480px;padding:max(20px, env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));flex-direction:column;gap:16px;margin:0 auto;display:flex}.screen.center{justify-content:center;min-height:100dvh}h1{margin:0;font-size:26px;font-weight:700;line-height:1.25}h2{margin:0 0 8px;font-size:16px;font-weight:600}p{color:var(--muted);margin:0}small{color:var(--muted);font-size:13px}section{flex-direction:column;gap:8px;display:flex}section>h2{margin-bottom:0}button{border:1px solid var(--border-strong);background:var(--surface);min-height:44px;color:var(--ink);font:inherit;cursor:pointer;border-radius:12px;padding:0 14px;font-weight:600}button:disabled{opacity:.55;cursor:default}button.primary{background:var(--primary);border-color:var(--primary);color:#fff}button.text{color:var(--primary);text-align:left;background:0 0;border:0;padding:0}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.hidden{display:none}.empty{padding:12px 0}.notice{background:var(--warning-tint);border:1px solid var(--warning-border);color:var(--warning);border-radius:12px;padding:8px 12px;font-size:14px}.notice.success{background:var(--primary-tint);border-color:var(--primary-tint);color:var(--primary)}.error{color:#9a3412;background:#fdece4;border-radius:12px;padding:8px 12px;font-size:14px}.accent{color:var(--primary)}.branch{min-height:44px;font-size:14px}.today-date{color:var(--ink);font-size:20px;font-weight:600;line-height:1.3}.progress-group{flex:none;gap:6px;display:flex}.today-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.percent{background:var(--primary);color:#fff;border-radius:16px;flex-direction:column;flex:none;justify-content:center;align-items:center;width:76px;height:76px;display:flex}.percent strong{font-size:22px;line-height:1.1}.percent small{color:#fff}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}.card-main{text-align:left;background:0 0;border:0;border-radius:0;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:12px 14px;font-weight:400;display:flex}.card-text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.card-text strong{font-weight:600}.card-side{color:var(--muted);flex:none;align-items:center;gap:4px;display:flex}.count{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}.bar{background:var(--border);border-radius:3px;height:6px;margin-top:6px;display:block;overflow:hidden}.bar span{background:var(--primary);height:100%;display:block}.card-actions{gap:8px;padding:0 14px 12px;display:flex}.card-actions button{flex:1}.roster-tools{gap:8px;display:flex}.roster-tools label{flex-direction:column;flex:1;gap:4px;font-size:14px;font-weight:600;display:flex}input[type=date],select{border:1px solid var(--border-strong);background:var(--surface);width:100%;min-width:0;min-height:44px;color:var(--ink);font:inherit;border-radius:10px;padding:0 10px}.roster-row{background:var(--surface);border:1px solid var(--border);border-radius:14px;align-items:center;gap:10px;padding:10px 12px;display:flex}.roster-row.empty-slot{background:var(--warning-tint);border-color:var(--warning-border)}.roster-row label{flex-direction:column;flex:1;min-width:0;display:flex}.roster-row label strong{font-weight:600}.roster-row select{flex:0 0 46%}.run-photos button{justify-content:center;align-items:center;gap:8px;display:inline-flex}.thumb-wrap{flex-direction:column;align-items:center;display:flex}.thumb-wrap button{min-height:32px;font-size:13px}button.danger{background:var(--missed);border-color:var(--missed);color:#fff}button.danger-text{color:var(--missed);min-height:44px}.area-editor{border-top:1px solid var(--border);flex-direction:column;gap:14px;padding:2px 14px 14px;display:flex}.add-row{flex-direction:column;gap:4px;padding-top:10px;display:flex}.add-row label{font-size:14px;font-weight:600}.add-row input{flex:1;min-width:0}.add-row .row button{flex:none}.screen>.add-row{padding-top:0}.area-editor input,.add-row input,.editor input,.editor textarea{border:1px solid var(--border-strong);width:100%;min-height:44px;font:inherit;background:var(--surface);color:var(--ink);border-radius:10px;padding:8px 10px}.shift-block{border-top:1px solid var(--border);padding-top:10px}.task-list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.task-list li{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:8px;display:flex}.task-row{text-align:left;background:0 0;border:0;border-radius:0;flex-direction:column;flex:200px;align-items:flex-start;gap:2px;min-width:0;padding:8px 0;font-weight:400;display:flex}.editor{flex-direction:column;gap:10px;width:100%;padding:10px 0;display:flex}.editor label{flex-direction:column;flex:1;gap:4px;min-width:0;font-size:14px;font-weight:600;display:flex}.editor label.check,.days label.check{flex-direction:row;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:400}.editor input[type=checkbox]{flex:none;width:22px;height:22px;min-height:0}.days{border:0;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;display:flex}.days legend{padding:0;font-size:14px;font-weight:600}.days label.check{flex:none}.field{flex-direction:column;gap:4px;margin-top:8px;font-size:14px;font-weight:600;display:flex}.role-bar{z-index:5;background:var(--primary-tint);color:var(--primary);justify-content:space-between;align-items:center;gap:8px;padding:0 16px;font-size:13px;font-weight:600;display:flex;position:sticky;top:0}.role-bar.previewing{background:var(--warning-tint);color:var(--warning)}.role-bar button{color:inherit;flex:none;font-size:13px;text-decoration:underline}.date-nav{align-items:center;gap:8px;display:flex}.date-nav input{flex:1;min-width:0}.date-nav button{flex:none}.check-head{align-items:flex-start;gap:8px;display:flex}.icon{flex:none;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:inline-flex}.icon.warn{color:var(--warning);background:var(--warning-tint);border-color:var(--warning-border)}.icon.on{background:var(--na);border-color:var(--na)}.tasks{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.task{background:var(--surface);border:1px solid var(--border);border-radius:14px;align-items:flex-start;gap:10px;padding:10px;display:flex}.task.na .task-label{color:var(--muted);text-decoration:line-through}.tick{width:44px;height:44px;color:var(--muted);flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.tick.on{background:var(--primary);border-color:var(--primary);color:#fff}.tick.photo{color:var(--warning);background:var(--warning-tint);border-color:var(--warning-border)}.task-body{flex-direction:column;flex:1;gap:4px;min-width:0;padding-top:2px;display:flex}.task-label{overflow-wrap:anywhere}.badges{flex-wrap:wrap;gap:4px;display:flex}.badges:empty{display:none}.badge{border-radius:18px;padding:1px 8px;font-size:12px;font-weight:600}.badge.time{background:var(--primary-tint);color:var(--primary)}.badge.warn{background:var(--warning-tint);color:var(--warning)}.badge.late{color:var(--missed);background:#fdece4}.task-tools{flex:none;gap:6px;display:flex}.thumbs{flex-wrap:wrap;gap:6px;margin-top:4px;display:flex}.thumb{flex-direction:column;gap:2px;width:64px;text-decoration:none;display:flex}.thumb img{object-fit:cover;background:var(--border);border-radius:10px;width:64px;height:64px;display:block}.thumb.removed{text-align:center;border:1px dashed var(--na);height:64px;color:var(--muted);border-radius:10px;justify-content:center;align-items:center;font-size:12px}.reason{flex-direction:column;gap:6px;margin-top:4px;display:flex}.reason label{font-size:14px;font-weight:600}.reason input{border:1px solid var(--border-strong);width:100%;min-height:44px;font:inherit;border-radius:10px;padding:0 10px}.row{gap:6px;display:flex}.row button{flex:1}.check-foot{padding:10px 0 calc(4px + env(safe-area-inset-bottom));background:var(--ground);flex-wrap:wrap;gap:8px;display:flex;position:sticky;bottom:0}.check-foot button{flex:140px}.link-text{color:var(--ink);overflow-wrap:anywhere;font-weight:600}.sr-only{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.settings{grid-template-columns:320px minmax(0,1fr);min-height:100dvh;font-size:15px;display:grid}.settings input,.settings select,.settings textarea{border:1px solid var(--border-strong);width:100%;min-width:0;min-height:40px;font:inherit;background:var(--surface);color:var(--ink);border-radius:10px;padding:6px 10px}.settings input[type=checkbox]{flex:none;width:20px;height:20px;min-height:0}.settings button{min-height:40px}.settings-side{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;align-self:start;gap:14px;height:100dvh;padding:20px;display:flex;position:sticky;top:0;overflow-y:auto}.settings-title{align-items:center;gap:10px;display:flex}.settings-title h1{font-size:22px}.settings-title .icon{width:40px;height:40px}.settings-scope{grid-template-columns:1fr 1fr;gap:8px;display:grid}.settings-scope label{flex-direction:column;gap:4px;min-width:0;font-size:13px;font-weight:600;display:flex}.settings-side nav{flex-direction:column;flex:1;min-height:0;display:flex}.settings-side nav h2{flex:none}.area-nav{flex:1;min-height:0;overflow-y:auto}.settings-side{overflow:hidden}.settings-title,.settings-scope,.add-area{flex:none}.area-nav{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.area-nav button{text-align:left;background:0 0;border:0;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:8px 10px;font-weight:500;display:flex}.area-nav button:hover{background:var(--ground)}.area-nav button.selected{background:var(--primary-tint);color:var(--primary);font-weight:600}.area-nav button.selected small{color:var(--primary)}.area-nav small{flex:none}.add-area{border-top:1px solid var(--border);flex-direction:column;gap:4px;padding-top:12px;display:flex}.add-area label{font-size:13px;font-weight:600}.add-area div{gap:6px;display:flex}.add-area button{flex:none}.settings-main{flex-direction:column;gap:16px;min-width:0;max-width:1200px;padding:24px 32px 48px;display:flex}.area-head{grid-template-columns:minmax(200px,420px) auto auto 1fr;align-items:center;gap:4px 10px;display:grid}.area-head label{grid-column:1/-1;font-size:13px;font-weight:600}.area-head>:last-child{justify-self:end}.confirm{gap:6px;display:inline-flex}.settings button.danger-text{min-height:40px;padding:0 6px}.shift-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;gap:10px;padding:16px}.shift-panel>header{justify-content:space-between;align-items:center;gap:12px;display:flex}.shift-panel h2{margin:0}.task-table{border-collapse:collapse;width:100%}.task-table th{text-align:left;color:var(--muted);border-bottom:1px solid var(--border-strong);white-space:nowrap;padding:6px 10px;font-size:13px;font-weight:600}.task-table td{border-bottom:1px solid var(--border);vertical-align:middle;padding:8px 10px}.task-table td:first-child{overflow-wrap:anywhere;width:50%}.task-table td small{display:block}.task-table td .badge{display:inline-block}.task-table tbody tr:hover{background:var(--ground)}.task-actions{white-space:nowrap;text-align:right}.task-actions>button:first-child{margin-right:6px}.add-task{align-self:flex-start}.task-form{background:var(--ground);border-radius:12px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;padding:12px;display:grid}.task-form .wide{grid-column:1/-1}.task-form>label{flex-direction:column;gap:4px;min-width:0;font-size:13px;font-weight:600;display:flex}.task-form-options{flex-wrap:wrap;align-items:center;gap:8px 24px;display:flex}.task-form-options .check,.task-form .days .check,.task-form-options .inline{align-items:center;gap:8px;display:flex}.task-form-options .inline input{width:72px}.task-form .days{align-items:center;min-width:0}.task-form-actions{justify-content:flex-end;gap:8px;display:flex}.shift-form{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}.shift-form label{flex-direction:column;gap:4px;font-size:13px;font-weight:600;display:flex}.shift-form label:first-of-type{flex:200px}.role-bar~.settings{min-height:calc(100dvh - 44px)}.role-bar~.settings .settings-side{height:calc(100dvh - 44px);top:44px}.roster-desktop{flex-direction:column;gap:14px;padding:20px 24px 40px;font-size:15px;display:flex}.roster-desktop button{min-height:40px}.roster-desktop select{border-radius:8px;min-height:36px;padding:0 4px;font-size:14px}.roster-bar{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.roster-bar .icon{width:40px;height:40px}.roster-bar>select{width:auto;min-height:40px}.segment{border:1px solid var(--border-strong);border-radius:12px;display:inline-flex;overflow:hidden}.segment button{border:0;border-radius:0}.segment button.selected{background:var(--primary);color:#fff}.period{align-items:center;gap:8px;display:inline-flex}.period strong{text-align:center;min-width:170px}.roster-grid-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;max-height:calc(100dvh - 210px);overflow:auto}.roster-grid{border-collapse:separate;border-spacing:0;width:100%}.roster-grid th,.roster-grid td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:4px;font-size:13px}.roster-grid thead th{z-index:2;background:var(--surface);text-align:center;min-width:120px;font-weight:600;line-height:1.25;position:sticky;top:0}.roster-grid.roster-grid thead th.weekend{background:#eef1ef}.roster-grid td.weekend{background:#f5f6f4}.roster-grid .area-col{z-index:1;background:var(--surface);text-align:left;overflow-wrap:anywhere;min-width:170px;max-width:220px;font-size:14px;font-weight:600;position:sticky;left:0}.roster-grid thead .area-col{z-index:3}.roster-grid .area-col small{font-weight:400;display:block}.roster-grid .fill-col{background:var(--primary-tint);min-width:120px}.roster-grid.roster-grid td.empty-slot{background:var(--warning-tint)}.roster-grid td.past{background:var(--ground)}.roster-grid td.past select{opacity:.6}.month .roster-grid thead th:not(.area-col):not(.fill-col){min-width:104px}.screen.wide{max-width:760px}.staff-form{background:var(--surface);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:10px;padding:14px;display:flex}.staff-form label,.staff-filters label{flex-direction:column;gap:4px;font-size:14px;font-weight:600;display:flex}.staff-form input,.staff-form select,.staff-filters select{border:1px solid var(--border-strong);background:var(--surface);width:100%;min-height:44px;color:var(--ink);font:inherit;border-radius:10px;padding:0 10px}.staff-form input:disabled{background:var(--ground);color:var(--muted)}.staff-form small{font-weight:400}.staff-filters{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.staff-filters label:first-child{flex:160px}.staff-filters label.check{flex-direction:row;align-items:center;min-height:44px;font-weight:400}.staff-filters input[type=checkbox]{width:22px;height:22px}.staff-row{background:var(--surface);border:1px solid var(--border);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;display:flex}.staff-row.inactive{background:var(--ground)}.staff-info{overflow-wrap:anywhere;flex-direction:column;flex:240px;min-width:0;display:flex}.staff-actions{gap:6px;display:flex}.login-hint{text-align:center;font-size:13px}.screen.center button.text{text-align:center}.prompt-card{background:var(--primary-tint);border-radius:14px;flex-direction:column;gap:8px;padding:12px 14px;display:flex}.guide-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;gap:10px;padding:14px}.guide-card h2{margin:0;font-size:18px}.guide-card h3{margin:6px 0 0;font-size:15px;font-weight:600}.guide-steps,.guide-list{color:var(--ink);flex-direction:column;gap:6px;margin:0;padding-left:22px;display:flex}.face-keys{border-top:1px solid var(--border);flex-direction:column;gap:8px;padding-top:10px;display:flex}.face-key{justify-content:space-between;align-items:center;display:flex}.print-sheet{display:none}@media print{@page{size:A4;margin:15mm}body{background:#fff;font-size:12pt}#root{display:none}.print-sheet{color:#000;display:block}.print-sheet header{margin-bottom:14pt}.print-sheet h1{font-size:18pt}.print-sheet p{color:#000}.print-sheet section{margin-bottom:14pt;display:block}.print-sheet h2{break-after:avoid;margin-bottom:6pt;font-size:13pt}.print-sheet table{border-collapse:collapse;width:100%}.print-sheet thead{display:table-header-group}.print-sheet tr{break-inside:avoid}.print-sheet th,.print-sheet td{text-align:left;vertical-align:top;border:1px solid #666;padding:4pt 6pt;font-size:10.5pt}.print-sheet th{white-space:nowrap;font-weight:600}.print-sheet td:not(:nth-child(2)){white-space:nowrap}.print-sheet td:nth-child(2){width:100%}.print-sheet strong{font-weight:600}.print-sheet small{color:#000;white-space:pre-line;font-size:9.5pt;display:block}}