:root{
  --cream:#F6EFE2; --paper:#FBF7EF; --espresso:#2E2118; --espresso-soft:#5A473A;
  --line:#E0D2B8; --amber:#B8722A; --amber-dark:#8B5A22; --amber-soft:#EFD9B8;
  --sage:#5E8355; --sage-soft:#DCE9D6; --rose:#B0453C; --rose-soft:#F3DAD6;
  --slate:#4F6478; --slate-soft:#DCE5EC; --shadow:0 2px 10px rgba(46,33,24,0.08);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--cream);color:var(--espresso);font-family:'Work Sans',sans-serif;-webkit-font-smoothing:antialiased;}
.app{max-width:640px;margin:0 auto;padding-bottom:110px;}

/* Topbar */
.topbar{background:var(--espresso);color:var(--cream);padding:18px 18px 22px;border-radius:0 0 22px 22px;position:relative;overflow:hidden;}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:14px;background:radial-gradient(circle at 10px 0, transparent 9px, var(--espresso) 10px) repeat-x;background-size:20px 14px;transform:translateY(1px);}
.topbar-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.brand-eyebrow{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-soft);opacity:.85;}
.brand-title{font-family:'Fraunces',serif;font-weight:600;font-size:26px;line-height:1.05;margin:2px 0 0;}
.brand-date{font-family:'Space Mono',monospace;font-size:11px;color:var(--amber-soft);margin-top:6px;}
.icon-cluster{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.icon-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:270px;}
.icon-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:var(--cream);border-radius:10px;padding:7px 9px;font-size:10.5px;font-family:'Space Mono',monospace;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap;line-height:1.2;}
.icon-btn:active{transform:scale(0.96);}
.role-btn{background:var(--amber);color:#241505;border:1px solid var(--amber);border-radius:10px;padding:7px 10px;font-size:10.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap;}
.role-btn.elevated{background:var(--slate);color:#fff;border-color:var(--slate);}

/* Identity bar */
.identity-bar{margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:12px;padding:9px 12px;font-size:12.5px;}
.identity-bar.prompt{background:rgba(176,69,60,0.25);border-color:rgba(176,69,60,0.4);}
.identity-bar .id-info{color:var(--cream);line-height:1.35;}
.identity-bar .id-info b{color:var(--amber-soft);}
.identity-bar button{background:var(--amber);color:#241505;border:none;border-radius:8px;padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;}

/* Divisi tabs */
.divisi-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 16px 0;}
.divisi-tab{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:10px 4px 8px;text-align:center;cursor:pointer;transition:transform .12s ease;}
.divisi-tab:active{transform:scale(0.96);}
.divisi-tab .ic{font-size:20px;display:block;}
.divisi-tab .lb{font-size:11.5px;font-weight:600;margin-top:4px;display:block;color:var(--espresso-soft);}
.divisi-tab.active{background:var(--espresso);border-color:var(--espresso);}
.divisi-tab.active .lb{color:var(--cream);}

/* Shift pills */
.shift-row{display:flex;gap:8px;padding:14px 16px 0;}
.shift-pill{flex:1;text-align:center;padding:9px 6px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-size:12.5px;font-weight:600;color:var(--espresso-soft);cursor:pointer;position:relative;}
.shift-pill.active{background:var(--amber);border-color:var(--amber);color:#241505;}
.shift-pill .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sage);margin-right:5px;position:relative;top:-1px;}
.shift-pill.incomplete .dot{background:var(--rose);}
.shift-pill.empty .dot{background:var(--line);}

/* Ticket */
.ticket{margin:16px;background:var(--paper);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);}
.ticket-head{padding:16px 18px 14px;border-bottom:1px dashed var(--line);position:relative;}
.ticket-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.ticket-title{font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin:0 0 10px;}
.manage-link{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--slate);border:1px solid var(--slate-soft);background:var(--slate-soft);border-radius:8px;padding:5px 8px;cursor:pointer;white-space:nowrap;}
.progress-wrap{display:flex;align-items:center;gap:10px;}
.progress-track{flex:1;height:9px;background:var(--amber-soft);border-radius:6px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--amber-dark));border-radius:6px;transition:width .25s ease;}
.progress-count{font-family:'Space Mono',monospace;font-size:12px;color:var(--espresso-soft);white-space:nowrap;}
.petugas-row{padding:12px 18px 0;}
.petugas-row input,.petugas-row select{width:100%;border:1px solid var(--line);background:var(--cream);border-radius:10px;padding:9px 12px;font-size:13.5px;color:var(--espresso);font-family:inherit;}
.petugas-row label{font-size:11px;font-family:'Space Mono',monospace;color:var(--espresso-soft);text-transform:uppercase;letter-spacing:.06em;}
.item-list{padding:6px 6px 4px;}
.item{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--line);align-items:flex-start;}
.item:last-child{border-bottom:none;}
.check{width:26px;height:26px;min-width:26px;border-radius:8px;border:2px solid var(--line);background:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:transparent;margin-top:1px;transition:all .12s ease;}
.check.done{background:var(--sage);border-color:var(--sage);color:#fff;}
.item-body{flex:1;}
.item-no{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--amber-dark);margin-right:6px;}
.item-text{font-size:14px;line-height:1.42;color:var(--espresso);cursor:pointer;}
.item.done .item-text{color:var(--espresso-soft);text-decoration:line-through;text-decoration-color:var(--sage);text-decoration-thickness:1.5px;}
.note-toggle{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--amber-dark);margin-top:5px;cursor:pointer;display:inline-block;}
.note-box{margin-top:6px;display:none;}
.note-box.open{display:block;}
.note-box textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--cream);padding:8px 10px;font-family:inherit;font-size:13px;resize:vertical;min-height:44px;}
.item-controls{display:flex;align-items:center;gap:10px;margin-top:5px;flex-wrap:wrap;}
.assign-select{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--slate);background:var(--slate-soft);border:1px solid var(--slate-soft);border-radius:7px;padding:3px 6px;max-width:160px;}
.assign-select.unassigned{color:var(--espresso-soft);background:var(--cream);border-color:var(--line);}
.summary-section{padding:16px 18px 18px;border-top:1px dashed var(--line);background:var(--amber-soft);}
.summary-title{font-family:'Fraunces',serif;font-weight:600;font-size:15.5px;margin:0 0 12px;color:var(--espresso);}
.summary-field{margin-bottom:10px;}
.summary-field label{display:block;font-size:11.5px;font-family:'Space Mono',monospace;color:var(--espresso-soft);margin-bottom:4px;}
.summary-field input{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:9px 11px;font-size:13.5px;color:var(--espresso);font-family:inherit;}
.stamp{position:absolute;top:14px;right:16px;border:2.5px solid var(--sage);color:var(--sage);font-family:'Space Mono',monospace;font-weight:700;font-size:11px;letter-spacing:.08em;padding:5px 9px;border-radius:8px;transform:rotate(6deg);opacity:0;transition:opacity .2s ease;pointer-events:none;background:rgba(255,255,255,0.6);}
.stamp.show{opacity:1;}

/* Bottom bar */
.bottombar{position:fixed;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;background:var(--paper);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;box-shadow:0 -4px 16px rgba(46,33,24,0.10);z-index:40;}
.btn{flex:1;border:none;border-radius:12px;padding:13px 8px;font-weight:700;font-size:13.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;}
.btn:active{transform:scale(0.97);}
.btn-save{background:var(--espresso);color:var(--cream);}
.btn-wa{background:#3E8C5A;color:#fff;}
.btn-wa svg{width:15px;height:15px;fill:#fff;}
.save-status{position:fixed;left:0;right:0;bottom:78px;max-width:640px;margin:0 auto;text-align:center;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;pointer-events:none;z-index:39;transition:opacity .2s;}
.toast{position:fixed;left:50%;bottom:130px;transform:translateX(-50%) translateY(10px);background:var(--espresso);color:var(--cream);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:all .25s ease;pointer-events:none;z-index:60;white-space:nowrap;max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(46,33,24,0.55);display:none;align-items:flex-end;z-index:100;}
.modal-overlay.show{display:flex;}
.modal{background:var(--paper);width:100%;max-width:640px;margin:0 auto;max-height:86vh;border-radius:20px 20px 0 0;padding:18px;overflow-y:auto;}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.modal-head h3{font-family:'Fraunces',serif;margin:0;font-size:19px;}
.modal-close{background:var(--cream);border:1px solid var(--line);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:15px;color:var(--espresso-soft);}
.hist-item{border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:9px;background:var(--cream);}
.hist-item-top{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;}
.hist-item-meta{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--espresso-soft);margin-top:4px;display:flex;justify-content:space-between;align-items:center;}
.hist-badge{font-family:'Space Mono',monospace;font-size:10px;padding:2px 7px;border-radius:999px;}
.hist-badge.ok{background:var(--sage-soft);color:var(--sage);}
.hist-badge.warn{background:var(--rose-soft);color:var(--rose);}
.hist-del{background:var(--rose-soft);color:var(--rose);border:none;border-radius:7px;padding:3px 8px;font-size:10.5px;font-family:'Space Mono',monospace;cursor:pointer;}
.empty-state{text-align:center;padding:30px 10px;color:var(--espresso-soft);font-size:13px;line-height:1.5;}
.role-option{border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;}
.role-option-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.role-option-head b{font-size:14.5px;}
.role-option-desc{font-size:12px;color:var(--espresso-soft);margin-bottom:10px;line-height:1.4;}
.role-pin-row{display:flex;gap:8px;}
.role-pin-row input{flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-family:'Space Mono',monospace;font-size:14px;letter-spacing:.1em;}
.role-pin-row button{background:var(--espresso);color:var(--cream);border:none;border-radius:9px;padding:9px 16px;font-weight:700;font-size:13px;cursor:pointer;}
.role-active-tag{font-family:'Space Mono',monospace;font-size:10px;background:var(--sage-soft);color:var(--sage);padding:2px 8px;border-radius:999px;}
.pin-settings{margin-top:6px;padding-top:14px;border-top:1px dashed var(--line);}
.pin-settings label{display:block;font-size:11px;font-family:'Space Mono',monospace;color:var(--espresso-soft);margin-bottom:4px;margin-top:10px;}
.pin-settings input{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-family:'Space Mono',monospace;font-size:13px;}
.pin-settings button{margin-top:12px;width:100%;background:var(--slate);color:#fff;border:none;border-radius:9px;padding:10px;font-weight:700;cursor:pointer;}
.manage-row{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--line);border-radius:11px;padding:9px 10px;margin-bottom:8px;background:var(--cream);}
.manage-row textarea{flex:1;border:none;background:transparent;font-size:13.5px;resize:vertical;min-height:36px;color:var(--espresso);font-family:inherit;}
.manage-row textarea:focus{outline:1px solid var(--amber);border-radius:6px;}
.manage-del{background:var(--rose-soft);color:var(--rose);border:none;border-radius:7px;padding:6px 9px;font-size:12px;cursor:pointer;white-space:nowrap;}
.manage-del[disabled]{opacity:.35;cursor:not-allowed;}
.add-item-row{display:flex;gap:8px;margin-top:10px;}
.add-item-row input{flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13.5px;}
.add-item-row button{background:var(--amber);color:#241505;border:none;border-radius:9px;padding:9px 14px;font-weight:700;cursor:pointer;}
.manage-note{font-size:11.5px;color:var(--espresso-soft);margin-bottom:10px;line-height:1.4;}
.selfie-preview{width:100%;aspect-ratio:1/1;max-width:220px;margin:0 auto 14px;border-radius:16px;border:2px dashed var(--line);background:var(--cream);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.selfie-preview img{width:100%;height:100%;object-fit:cover;}
.selfie-preview .placeholder{font-size:34px;opacity:.4;}
.selfie-btn-row{display:flex;gap:8px;}
.selfie-btn-row button{flex:1;border:none;border-radius:10px;padding:12px;font-weight:700;font-size:13px;cursor:pointer;}
.loglist-row{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px;margin-bottom:8px;background:var(--cream);}
.loglist-row img{width:52px;height:52px;border-radius:9px;object-fit:cover;flex-shrink:0;}
.loglist-row .loglist-noimg{width:52px;height:52px;border-radius:9px;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.loglist-info{flex:1;}
.loglist-name{font-weight:700;font-size:13px;}
.loglist-meta{font-size:10.5px;font-family:'Space Mono',monospace;color:var(--espresso-soft);margin-top:2px;}
.date-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.date-nav button{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:8px 12px;cursor:pointer;font-weight:700;}
.date-nav .date-label{flex:1;text-align:center;font-family:'Space Mono',monospace;font-size:12.5px;font-weight:700;}

/* Dashboard */
.period-toggle{display:flex;gap:6px;margin-bottom:14px;}
.period-toggle button{flex:1;padding:8px;border-radius:9px;border:1.5px solid var(--line);background:var(--paper);font-size:12.5px;font-weight:600;cursor:pointer;color:var(--espresso-soft);font-family:inherit;}
.period-toggle button.active{background:var(--espresso);border-color:var(--espresso);color:var(--cream);}
.filters{display:flex;gap:6px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none;}
.filters::-webkit-scrollbar{display:none;}
.filter-chip{flex-shrink:0;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12px;font-weight:600;color:var(--espresso-soft);cursor:pointer;white-space:nowrap;font-family:inherit;}
.filter-chip.active{background:var(--espresso);border-color:var(--espresso);color:var(--cream);}
.section-hd{display:flex;align-items:center;justify-content:space-between;margin:22px 4px 12px;}
.section-title{font-family:'Fraunces',serif;font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px;}
.section-count{font-family:'Space Mono',monospace;font-size:11px;color:var(--espresso-soft);}
.today-summary{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:16px;box-shadow:0 2px 10px rgba(46,33,24,0.06);}
.ts-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.ts-title{font-family:'Fraunces',serif;font-weight:700;font-size:16px;}
.ts-badge{font-family:'Space Mono',monospace;font-size:10.5px;padding:3px 9px;border-radius:999px;background:var(--amber-soft);color:var(--amber-dark);font-weight:700;}
.ts-badge.ok{background:var(--sage-soft);color:var(--sage);}
.ts-badge.warn{background:var(--rose-soft);color:var(--rose);}
.ts-num{font-family:'Fraunces',serif;font-size:32px;font-weight:700;line-height:1;margin-bottom:8px;}
.ts-num small{font-size:14px;color:var(--espresso-soft);font-weight:400;font-family:'Work Sans',sans-serif;}
.ts-bar-track{height:8px;background:var(--line);border-radius:6px;overflow:hidden;margin-bottom:8px;}
.ts-bar-fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--amber-dark));border-radius:6px;transition:width .3s ease;}
.ts-note{font-size:12px;color:var(--espresso-soft);line-height:1.4;}
.div-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px;}
.div-mini{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:11px 13px;}
.div-mini-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.div-mini-name{font-size:13px;font-weight:700;}
.div-mini-pct{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;}
.div-mini-meta{font-family:'Space Mono',monospace;font-size:10px;color:var(--espresso-soft);margin-top:4px;}
.div-mini-track{height:5px;background:var(--line);border-radius:6px;overflow:hidden;}
.div-mini-fill{height:100%;border-radius:6px;}
.activity-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;position:relative;}
.activity-card.done{border-left:4px solid var(--sage);}
.activity-card.partial{border-left:4px solid var(--amber);}
.ac-row{display:flex;gap:12px;}
.ac-photo{width:52px;height:52px;border-radius:11px;object-fit:cover;flex-shrink:0;background:var(--line);}
.ac-photo-placeholder{width:52px;height:52px;border-radius:11px;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.ac-info{flex:1;min-width:0;}
.ac-name{font-weight:700;font-size:14px;margin-bottom:2px;}
.ac-meta{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--espresso-soft);line-height:1.5;}
.ac-score{text-align:right;flex-shrink:0;}
.ac-pct{font-family:'Fraunces',serif;font-weight:700;font-size:20px;line-height:1;}
.ac-pct-lbl{font-family:'Space Mono',monospace;font-size:9.5px;color:var(--espresso-soft);margin-top:3px;}
.ac-status-tag{display:inline-block;font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;margin-top:4px;}
.ac-status-tag.done{background:var(--sage-soft);color:var(--sage);}
.ac-status-tag.partial{background:var(--amber-soft);color:var(--amber-dark);}
.ac-expand{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:none;}
.ac-expand.open{display:block;}
.ac-expand-toggle{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--amber-dark);cursor:pointer;margin-top:8px;display:inline-block;}
.mini-list{margin:0;padding:0;list-style:none;}
.mini-list li{font-size:12px;padding:6px 0;border-bottom:1px solid var(--line);line-height:1.4;display:flex;gap:8px;}
.mini-list li:last-child{border-bottom:none;}
.mini-list .ml-icon{flex-shrink:0;}
.mini-list .ml-text{flex:1;color:var(--espresso-soft);}
.mini-list .ml-note{color:var(--espresso);font-style:italic;}
.gap-list{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;}
.gap-list-title{font-weight:700;font-size:13.5px;margin-bottom:10px;color:var(--rose);}
.gap-item{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);gap:8px;}
.gap-item:last-child{border-bottom:none;}
.gap-item-left{flex:1;min-width:0;}
.gap-item-name{font-weight:600;font-size:13px;}
.gap-item-meta{font-size:10.5px;color:var(--espresso-soft);font-family:'Space Mono',monospace;margin-top:2px;}
.gap-item-last{font-size:10px;font-family:'Space Mono',monospace;padding:3px 8px;border-radius:999px;background:var(--rose-soft);color:var(--rose);white-space:nowrap;font-weight:700;}
.gap-item-last.ok{background:var(--sage-soft);color:var(--sage);}
.gap-item-last.medium{background:var(--amber-soft);color:var(--amber-dark);}
.staff-recap{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;}
.sr-row{padding:11px 0;border-bottom:1px solid var(--line);}
.sr-row:last-child{border-bottom:none;}
.sr-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;}
.sr-name{font-weight:600;font-size:13.5px;}
.sr-meta{font-size:10.5px;color:var(--espresso-soft);font-family:'Space Mono',monospace;margin-top:2px;}
.sr-pct{font-family:'Space Mono',monospace;font-weight:700;font-size:13px;white-space:nowrap;}
.sr-bar-track{height:6px;background:var(--line);border-radius:6px;overflow:hidden;}
.sr-bar-fill{height:100%;border-radius:6px;transition:width .3s;}