:root{
    --green:#064D36; --green-deep:#033526; --gold:#E7A91A;
    --white:#F7F5EF; --concrete:#D9DDDA; --graphite:#202522; --danger:#B3432B;
    --radius:14px; --nav-h:60px; --top-h:52px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; min-width:0;}
  html{height:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
  html,body{margin:0; padding:0; background:var(--concrete); font-family:'Inter',sans-serif; color:var(--graphite); font-size:15px; overflow:hidden;}
  h1,h2,h3{font-family:'Manrope',sans-serif;}
  /* Keep both bars in the viewport; only the main content scrolls. */
  .shell{max-width:480px; margin:0 auto; height:100vh; height:100dvh; min-height:0; background:var(--white); position:relative; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 0 40px rgba(3,53,38,0.25);}
  @media (min-width:560px){ body{padding:20px 0;} .shell{height:calc(100vh - 40px); height:calc(100dvh - 40px); border-radius:24px;} }
  .topbar{height:calc(var(--top-h) + env(safe-area-inset-top, 0px)); flex:0 0 auto; background:var(--green-deep); color:var(--white); display:flex; align-items:center; gap:9px; padding:env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); position:relative; z-index:20;}
  .topbar svg{flex:0 0 auto;}
  .topbar .brandtext{display:flex; flex-direction:column; line-height:1.05;}
  .topbar .brandtext b{font-family:'Manrope',sans-serif; font-weight:800; font-size:15px;}
  .topbar .brandtext span{font-size:8.5px; letter-spacing:1.1px; color:var(--gold); text-transform:uppercase;}
  .topbar .screen-title{margin-left:auto; font-size:12.5px; color:var(--concrete); opacity:0.85;}
  main{flex:1 1 0; min-height:0; padding:14px max(14px, env(safe-area-inset-right, 0px)) 20px max(14px, env(safe-area-inset-left, 0px)); overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; scroll-padding-block:14px 20px;}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px;}
  .section-head h1{font-size:19px; margin:0; font-weight:800;}
  .section-head p{font-size:12px; color:#5b625d; margin:2px 0 0;}
  .fab{display:flex; align-items:center; justify-content:center; gap:6px; background:var(--gold); color:var(--green-deep); border:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px; padding:10px 14px; border-radius:999px; cursor:pointer; box-shadow:0 4px 10px rgba(231,169,26,0.35); width:100%;}
  .fab.small{width:auto; padding:8px 12px; font-size:12.5px;}
  .fab:active{transform:scale(0.98);}
  .fab.ghost{background:var(--green); color:var(--white); box-shadow:none;}
  .card{background:var(--white); border:1px solid #E7E4DC; border-radius:var(--radius); padding:12px 13px; margin-bottom:9px;}
  .day-group{margin-bottom:16px;}
  .day-group .day-label{display:flex; align-items:center; justify-content:space-between; font-size:11.5px; font-weight:700; color:var(--green-deep); padding:4px 2px 7px; border-bottom:1px solid var(--concrete); margin-bottom:9px;}
  .day-label .sum{color:var(--gold); background:var(--green-deep); padding:2px 9px; border-radius:999px; font-size:11px;}
  .dr-card{border:1px solid #E7E4DC; border-radius:var(--radius); margin-bottom:10px; overflow:hidden; background:var(--white);}
  .dr-head{background:#EFF3EF; padding:9px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .dr-head .dr-title{font-size:12.5px; font-weight:700; color:var(--green-deep); line-height:1.3;}
  .dr-head .dr-title small{display:block; font-weight:500; color:#6b726d; font-size:10.5px;}
  .dr-head .dr-sum{font-size:12px; font-weight:800; color:var(--green-deep); white-space:nowrap;}
  .dr-body{padding:9px 12px 10px;}
  .we-block{padding:8px 0; border-top:1px solid #EFEDE6;}
  .we-block:first-child{border-top:none;}
  .task-line{font-size:12.5px; font-weight:700; color:var(--graphite); margin-bottom:1px;}
  .vol-line{font-size:11px; color:#5b625d; margin-bottom:6px;}
  .divider{border-top:1px solid #EFEDE6; margin:8px 0;}
  .w-line{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0 5px 8px; border-top:1px dashed #F3F1EA;}
  .w-line:first-of-type{border-top:none;}
  .w-name{font-weight:700; font-size:12.5px;}
  .role-tag{display:inline-block; font-size:9.5px; font-weight:600; color:var(--green-deep); background:#E2ECE6; padding:1.5px 6px; border-radius:6px; margin-left:5px; vertical-align:1px;}
  .w-amount{font-weight:800; color:var(--green-deep); font-size:12.5px; white-space:nowrap;}
  .chips{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px;}
  .chip{font-size:10px; background:var(--concrete); color:var(--graphite); padding:2.5px 7px; border-radius:999px;}
  .photos{display:flex; gap:6px; margin-top:2px; margin-bottom:6px;}
  .photo-box{flex:1; position:relative; border-radius:9px; overflow:hidden; background:#EFEDE6; aspect-ratio:4/3; max-width:130px;}
  .photo-box img{width:100%; height:100%; object-fit:cover; display:block;}
  .photo-box .ph-label{position:absolute; bottom:0; left:0; right:0; font-size:9px; color:var(--white); background:linear-gradient(transparent, rgba(3,53,38,0.75)); padding:8px 5px 3px; text-align:center; font-weight:600;}
  .icon-btn{border:none; background:transparent; color:#9AA19C; padding:3px; cursor:pointer; display:flex; align-items:center; flex:0 0 auto;}
  .icon-btn:active{color:var(--danger);}
  .list-card{display:flex; align-items:center; gap:11px;}
  .avatar{width:36px; height:36px; border-radius:10px; background:var(--green); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; flex:0 0 auto;}
  .list-main{flex:1; min-width:0;}
  .list-main .t1{font-weight:700; font-size:13.5px;}
  .list-main .t2{font-size:11px; color:#5b625d; margin-top:1px;}
  .list-right{text-align:right; flex:0 0 auto;}
  .status-badge{font-size:10px; font-weight:700; padding:2.5px 7px; border-radius:999px;}
  .status-ok{background:#E2ECE6; color:var(--green-deep);}
  .status-out{background:#FBEAD0; color:#8A5F0C;}
  .status-fix{background:#F4E1DB; color:var(--danger);}
  .empty-state{text-align:center; padding:34px 18px; color:#7c837e;}
  .empty-state svg{margin-bottom:10px; opacity:0.55;}
  .empty-state b{display:block; color:var(--graphite); font-size:13.5px; margin-bottom:4px; font-family:'Manrope',sans-serif;}
  .empty-state span{font-size:12px;}
  .tabbar{position:relative; height:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); background:var(--green-deep); display:flex; z-index:30; flex:0 0 auto; padding:0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);}
  .tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:none; border:none; color:#8FA79B; cursor:pointer; padding:7px 2px 5px; position:relative;}
  .tab span{font-size:9.5px; font-weight:600;}
  .tab.active{color:var(--gold);}
  .tab.active::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:22px; height:3px; background:var(--gold); border-radius:0 0 4px 4px;}
  .modal-backdrop{position:fixed; inset:0; background:rgba(3,53,38,0.55); z-index:50; display:flex; align-items:flex-end; justify-content:center;}
  .modal-backdrop.hidden{display:none;}
  .modal-sheet{width:100%; max-width:480px; background:var(--white); border-radius:18px 18px 0 0; max-height:90dvh; max-height:90vh; overflow-y:auto; overflow-x:hidden; padding:16px 16px calc(18px + env(safe-area-inset-bottom)); animation:slideup 0.16s ease-out;}
  @keyframes slideup{from{transform:translateY(20px); opacity:0.5;} to{transform:translateY(0); opacity:1;}}
  .modal-head{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
  .modal-head h2{font-size:15px; margin:0; font-weight:800; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .modal-close, .modal-back{border:none; background:var(--concrete); width:28px; height:28px; min-width:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--graphite); flex:0 0 auto;}
  label.field{display:block; font-size:11.5px; font-weight:600; color:var(--green-deep); margin:11px 0 5px;}
  input[type=text], input[type=number], select, textarea{width:100%; max-width:100%; border:1px solid #DCD8CD; background:#FCFBF8; border-radius:10px; padding:10px 11px; font-size:16px; font-family:'Inter',sans-serif; color:var(--graphite);}
  textarea{resize:vertical; min-height:56px;}
  input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:1px;}
  .field-row{display:flex; gap:8px; align-items:stretch;}
  .field-row > div:first-child{flex:1; min-width:0;}
  .unit-badge{flex:0 0 auto; background:var(--concrete); color:var(--graphite); font-size:12.5px; font-weight:700; border-radius:10px; padding:10px 12px; white-space:nowrap; display:flex; align-items:center;}
  .date-field{position:relative; border:1px solid #DCD8CD; background:#FCFBF8; border-radius:10px; padding:10px 11px; overflow:hidden; font-size:16px; width:100%;}
  .date-field span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;}
  .date-field input[type=date]{position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; padding:0; font-size:16px;}
  .chip-toggle{display:inline-flex; align-items:center; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid #DCD8CD; background:#FCFBF8; margin:0 6px 6px 0; cursor:pointer;}
  .chip-toggle.on{background:var(--green); border-color:var(--green); color:var(--white);}
  .photo-input{border:1.5px dashed #C9C4B6; border-radius:12px; padding:12px; text-align:center; font-size:12px; color:#7c837e; position:relative;}
  .photo-input.has-img{padding:0; border-style:solid; overflow:hidden; aspect-ratio:4/3;}
  .photo-input img{width:100%; height:100%; object-fit:cover; display:block;}
  .photo-input input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
  .two-col{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
  .btn-primary{width:100%; background:var(--green-deep); color:var(--white); border:none; border-radius:12px; padding:12px; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; margin-top:16px; cursor:pointer;}
  .btn-primary:active{background:var(--green);}
  .btn-primary[disabled]{opacity:0.45;}
  .btn-secondary{width:100%; background:transparent; color:var(--danger); border:none; padding:9px; font-size:12.5px; font-weight:600; cursor:pointer;}
  .helper{font-size:11px; color:#8a9088; margin-top:4px;}
  .stat-row{display:flex; gap:9px; margin-bottom:14px;}
  .stat-box{flex:1; background:var(--green-deep); color:var(--white); border-radius:var(--radius); padding:12px; min-width:0;}
  .stat-box b{display:block; font-family:'Manrope',sans-serif; font-size:17px; font-weight:800; color:var(--gold);}
  .stat-box span{font-size:10px; color:var(--concrete); opacity:0.85;}
  .swatch{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
  .swatch .sq{width:32px; height:32px; border-radius:8px; flex:0 0 auto; border:1px solid rgba(0,0,0,0.06);}
  .swatch .sw-name{font-size:12.5px; font-weight:600;}
  .swatch .sw-hex{font-size:10.5px; color:#7c837e;}
  .mini-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 0; border-top:1px solid #EFEDE6;}
  .mini-row:first-of-type{border-top:none;}
  .mini-row .mr-name{font-size:13px; font-weight:600;}
  .mini-row .mr-sub{font-size:10.5px; color:#7c837e; margin-top:1px;}
  .calc-card{background:#F5F3EC; border:1px solid #E7E2D2; border-radius:12px; padding:10px 12px; margin-top:10px;}
  .calc-row{display:flex; justify-content:space-between; font-size:12px; padding:2px 0; color:#4c5350;}
  .calc-row.total{font-weight:800; color:var(--green-deep); border-top:1px solid #E2DCC9; margin-top:4px; padding-top:5px; font-size:13px;}
  details.rating-card{border-top:1px solid #EFEDE6; padding:2px 0;}
  details.rating-card:first-of-type{border-top:none;}
  details.rating-card summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 0;}
  details.rating-card summary::-webkit-details-marker{display:none;}
  details.rating-card summary::after{content:'▾'; color:#9AA19C; font-size:10px; margin-left:2px; flex:0 0 auto;}
  details.rating-card[open] summary::after{content:'▴';}
  .rating-badge{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; flex:0 0 auto;}
  .rate-bad{background:#F4E1DB; color:var(--danger);}
  .rate-ok{background:#FBEAD0; color:#8A5F0C;}
  .rate-good{background:#E2ECE6; color:var(--green-deep);}
  .rate-vgood{background:var(--gold); color:var(--green-deep);}
  .rating-detail{padding:2px 2px 8px;}
  .rate-pending{background:#FBEAD0; color:#6C4908;}
  .rating-summary{flex-wrap:wrap;}
  .rating-summary .rating-badge{white-space:normal; max-width:100%; line-height:1.4;}
  .review-note{font-size:13px; line-height:1.5; color:#5b625d; margin:8px 0; overflow-wrap:anywhere;}
  .review-note.pending{color:#6C4908;}
  .review-action{display:block; width:100%; border:1px solid var(--green); border-radius:10px; padding:10px 12px; background:#EFF3EF; color:var(--green-deep); font-family:inherit; font-size:14px; font-weight:700; line-height:1.4; cursor:pointer; margin:8px 0;}
  .review-action:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
  .review-form p,.review-form label.field{font-size:14px; line-height:1.5;}
  .review-form .review-error{color:var(--danger); font-size:14px; line-height:1.5;}
  .personal-day-head,.personal-day-result{display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap;}
  .personal-day-head{margin-bottom:8px;}
  .personal-day-result .rating-badge{white-space:normal; line-height:1.4;}
  [hidden]{display:none!important;}
  input[type=password],input[type=search]{width:100%; max-width:100%; border:1px solid #DCD8CD; background:#FCFBF8; border-radius:10px; padding:10px 11px; font-size:16px; font-family:inherit; color:var(--graphite);}
  .staff-search-results{max-height:260px; overflow-y:auto; margin-top:10px; border:1px solid #DCD8CD; border-radius:10px;}
  .staff-search-option{display:block; width:100%; text-align:left; border:0; border-bottom:1px solid #E7E4DC; background:#FCFBF8; color:var(--graphite); padding:12px; font:inherit; cursor:pointer;}
  .staff-search-option:last-child{border-bottom:0;}
  .staff-search-option span{display:block; font-size:13px; margin-top:3px; color:#5b625d;}
  .staff-search-option[aria-pressed=true]{background:#E2ECE6; box-shadow:inset 4px 0 var(--green);}
  .staff-search-option:focus-visible{outline:2px solid var(--gold); outline-offset:-3px;}
  .login-card{margin:36px 0 20px; border-top:4px solid var(--gold); padding:22px 18px;}
  .login-card h1{font-size:24px; color:var(--green-deep); margin:0 0 8px;}
  .login-card p{font-size:14px; line-height:1.5; color:#5b625d;}
  .login-card label.field,.account-fields label.field{font-size:14px;}
  .form-error{font-size:14px; color:var(--danger); line-height:1.5; margin:8px 0;}
  .session-bar{font-size:13px; line-height:1.4; color:#5b625d; margin:0 0 12px; overflow-wrap:anywhere;}
  .logout-button{border:1px solid #8FA79B; border-radius:8px; padding:5px 8px; font:inherit; font-size:12px; background:transparent; color:var(--white); cursor:pointer;}
  .account-fields{margin-top:14px; border-top:1px solid #E7E4DC; padding-top:4px;}
  .performance-card{margin:14px 0; padding:16px; border-top:3px solid var(--green);}
  .performance-card h2{font-size:16px; line-height:1.4; margin:0 0 5px; color:var(--green-deep);}
  .performance-meta,.performance-note{font-size:13px; line-height:1.5; color:#5b625d; margin:0;}
  .performance-metrics{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0;}
  .performance-metric{background:#EFF3EF; border-radius:10px; padding:12px;}
  .performance-metric span{display:block; font-size:14px; line-height:1.4; color:#4c5350;}
  .performance-metric strong{display:block; font-family:'Manrope',sans-serif; font-size:20px; line-height:1.4; margin-top:5px; overflow-wrap:anywhere; color:var(--green-deep);}
  .performance-metric strong.negative{color:var(--danger);}
  .performance-status{border-left:4px solid var(--green); border-radius:8px; padding:12px; background:#E2ECE6; margin-bottom:10px;}
  .performance-status strong{display:block; font-size:14px; line-height:1.45;}
  .performance-status p{font-size:13px; line-height:1.5; margin:5px 0 0;}
  .performance-status.raise{background:var(--green-deep); border-color:var(--gold); color:var(--white);}
  .performance-status.raise strong{color:var(--gold);}
  .performance-status.review{background:#F4E1DB; border-color:var(--danger); color:#782A1B;}
  .performance-status.pending{background:#F2F1EC; border-color:#9AA19C; color:#4c5350;}
  .performance-status.incomplete{background:#FBEAD0; border-color:#8A5F0C; color:#6C4908;}
  .performance-status.awaiting{background:#FBEAD0; border-color:#8A5F0C; color:#6C4908;}
  .performance-rules{margin-top:12px; border-top:1px solid #E7E4DC; padding-top:8px;}
  .performance-rules summary{font-size:14px; line-height:1.4; color:var(--green-deep); cursor:pointer; padding:5px 0;}
  .performance-rules summary:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
  .performance-rules p{font-size:13px; line-height:1.5; color:#4c5350; margin:8px 0;}
  .performance-table{width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; margin-top:10px;}
  .performance-table th,.performance-table td{text-align:left; padding:8px 4px; border-bottom:1px solid #E7E4DC; overflow-wrap:anywhere; vertical-align:top;}
  .performance-table th{font-weight:600; color:#4c5350;}
  .performance-table th:last-child,.performance-table td:last-child{text-align:right;}
  .performance-table .rating-badge{display:inline-block; white-space:normal; font-size:12px; padding:3px 5px;}
  @media (max-width:360px){.performance-metrics{grid-template-columns:1fr;}}
  .reorder-col{display:flex; flex-direction:column; gap:2px;}
  .imgview-backdrop{position:fixed; inset:0; background:rgba(2,20,14,0.92); z-index:60; display:flex; align-items:center; justify-content:center;}
  .imgview-backdrop.hidden{display:none;}
  .imgview-backdrop img{max-width:92%; max-height:80vh; border-radius:6px;}
  .imgview-close{position:absolute; top:16px; right:16px; background:rgba(255,255,255,0.15); border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:17px;}

.cloud-bar{flex:0 0 auto;max-height:25%;overflow-y:auto;padding:8px 14px;font-size:12px;background:#E2ECE6;color:#033526;line-height:1.5;overflow-wrap:anywhere;}
.cloud-bar.error{background:#F4E1DB;color:#782A1B;}
.cloud-bar button{padding:7px 9px;margin:6px 6px 0 0;border:1px solid currentColor;border-radius:8px;background:white;color:inherit;font:inherit;cursor:pointer;}
[inert]{opacity:.72;}