:root{color:#252525;font-synthesis:none;background:#eceeea;font-family:Noto Sans Thai,Sarabun,Inter,system-ui,sans-serif}:root[data-theme=dark]{color:#f3f1ec;background:#151515}*{box-sizing:border-box}body{background:inherit;min-width:320px;margin:0}button{font:inherit}.app-shell{min-height:100dvh;padding-bottom:calc(84px + env(safe-area-inset-bottom))}.page-shell{width:min(100%,720px);margin:0 auto;padding:18px 16px 24px;position:relative;overflow:hidden}.page-shell:before,.page-shell:after{z-index:-1;content:"";filter:blur(10px);pointer-events:none;border-radius:50%;width:250px;height:250px;position:absolute}.page-shell:before{background:#ffb05a42;top:-130px;right:-110px}.page-shell:after{background:#9fa5aa2c;bottom:50px;left:-140px}.hero{color:#fff;background:linear-gradient(135deg,#313131 0%,#555554 55%,#f4882d 170%);border:1px solid #ffffff24;border-radius:28px;justify-content:space-between;align-items:flex-start;min-height:152px;padding:22px;display:flex;box-shadow:0 18px 40px #17171724}.dashboard-header{justify-content:space-between;align-items:center;gap:10px;min-height:52px;padding:4px 1px 2px;display:flex}.dashboard-header h1{color:#262626;letter-spacing:-.055em;white-space:nowrap;margin:0;font-size:clamp(1.08rem,5.2vw,1.55rem)}.period-control{background:#f8f8f6c7;border:1px solid #dadbd8;border-radius:15px;grid-template-columns:26px minmax(96px,auto) 26px;align-items:center;padding:3px;display:grid;box-shadow:0 5px 16px #2020200b}.period-control button{color:#4b4b49;cursor:pointer;background:0 0;border:0;border-radius:10px;place-items:center;min-height:30px;display:grid}.period-control button:disabled{color:#c7c8c5;cursor:default}.period-control .period-current{color:#2f2f2d;white-space:nowrap;grid-template-columns:1fr auto;gap:5px;padding:0 7px;font-size:.72rem;font-weight:800}.hero-brand{align-items:center;gap:13px;min-width:0;display:flex}.app-logo{border-radius:16px;flex:none;width:50px;height:50px;box-shadow:0 6px 18px #0000002e}.eyebrow{color:#e97721;letter-spacing:.105em;margin:0 0 5px;font-size:.7rem;font-weight:800}.hero .eyebrow{color:#ffc38e}h1,h2,p{margin-top:0}h1{letter-spacing:-.055em;margin-bottom:5px;font-size:clamp(1.75rem,8vw,2.3rem);line-height:1}.hero-month{color:#f1ede8c7;margin:0;font-size:.9rem}.live-chip{color:#fff;letter-spacing:.1em;background:#ffffff14;border:1px solid #ffffff20;border-radius:99px;align-items:center;gap:6px;padding:7px 9px;font-size:.65rem;font-weight:800;display:inline-flex}.live-chip i{background:#9cf3bd;border-radius:50%;width:7px;height:7px;animation:1.8s infinite pulse;box-shadow:0 0 0 3px #9cf3bd26}.updated{color:#757575;align-items:center;gap:5px;margin:12px 4px 18px;font-size:.73rem;display:flex}.icon{flex:none}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.metric-card{-webkit-backdrop-filter:blur(18px)saturate(1.25);min-height:151px;animation:.58s cubic-bezier(.2,.8,.2,1) both rise;animation-delay:var(--delay);border:1px solid #fffa;border-radius:22px;flex-direction:column;justify-content:space-between;padding:16px;display:flex;overflow:hidden;box-shadow:0 12px 30px #2121210c}.metric-card.is-clickable{cursor:pointer;transition:transform .18s,box-shadow .18s}.metric-card.is-clickable:active{transform:scale(.97)}.card-label{color:#3e3e3e;letter-spacing:-.01em;font-size:.78rem;font-weight:800}.metric-value{color:#1c1c1c;font-variant-numeric:tabular-nums;letter-spacing:-.07em;margin:4px 0;font-size:clamp(2rem,10vw,3.1rem);font-weight:800;line-height:.94;display:block}.metric-card small{color:#5c5c5c;font-size:.65rem;line-height:1.3;display:block}.tone-total{background:linear-gradient(145deg,#fff 5%,#ebebe9 100%)}.tone-defend{background:linear-gradient(145deg,#ffd6af,#ffad67);grid-template-rows:auto minmax(0,1fr) auto;display:grid;container-type:inline-size}.tone-defend .metric-value{color:#6e2508;font-variant-numeric:tabular-nums;letter-spacing:.035em;text-align:center;white-space:nowrap;place-items:center;width:100%;height:100%;margin:0;font-size:clamp(3.45rem,33cqw,4.8rem);font-weight:950;line-height:.82;display:grid}.tone-due{background:linear-gradient(145deg,#f6f7f5,#e5e7e4)}.tone-awaiting{background:linear-gradient(145deg,#f7efd9,#edd28c)}.tone-sla{background:linear-gradient(145deg,#f29242,#e46f1c)}.tone-sla .card-label,.tone-sla .metric-value,.tone-sla small{color:#fff}.tone-waive{background:linear-gradient(145deg,#e4dfe2,#c7b7bf)}.due-content{margin:7px 0}.due-values{grid-template-columns:1fr 1fr;gap:7px;display:grid}.due-values>div{border-radius:12px;min-width:0;padding:8px 7px}.due-values span{text-transform:uppercase;white-space:nowrap;align-items:center;gap:4px;font-size:.6rem;font-weight:850;display:flex}.due-values span i{border-radius:50%;width:6px;height:6px}.due-values strong{font-variant-numeric:tabular-nums;letter-spacing:-.075em;margin-top:4px;font-size:clamp(1.55rem,7.5vw,2.25rem);line-height:1;display:block}.due-in{color:#126739;background:#dbf4e4}.due-in span i,.due-bar-in{background:#22a861}.due-out{color:#b7372f;background:#ffe1de}.due-out span i,.due-bar-out{background:#e24b43}.due-bar{background:#d5d9d5;border-radius:99px;gap:2px;height:5px;margin-top:8px;display:flex;overflow:hidden}.due-bar i{min-width:0;display:block}.status{text-align:center;color:#707070;padding:46px 16px}.error{color:#a3331f}.bottom-nav{z-index:5;left:50%;bottom:max(10px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(18px)saturate(1.2);background:#f9f9f7d9;border:1px solid #ffffffa6;border-radius:23px;grid-template-columns:repeat(3,1fr);width:min(100% - 24px,520px);padding:6px;display:grid;position:fixed;transform:translate(-50%);box-shadow:0 12px 36px #22222223}.bottom-nav button{color:#7b7b79;cursor:pointer;background:0 0;border:0;border-radius:17px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:55px;transition:background .2s,color .2s,transform .2s;display:flex}.bottom-nav button span{font-size:.67rem;font-weight:750}.bottom-nav button.active{color:#fff;background:#363635;box-shadow:0 5px 12px #1e1e1e2c}.bottom-nav button:active{transform:scale(.95)}.empty-panel,.more-view{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:calc(100dvh - 145px);display:flex}.empty-icon{color:#3b2a1c;background:#f5a35d;border-radius:24px;place-items:center;width:70px;height:70px;margin-bottom:16px;display:grid;box-shadow:0 12px 25px #ee86342b}.empty-panel h2,.more-view h2{letter-spacing:-.045em;margin:0 0 5px;font-size:1.65rem}.empty-panel>p:last-child{color:#757575;margin:0}.more-view{text-align:left;padding-top:16px;display:block}.section-title{margin:12px 4px 22px}.settings-card{-webkit-backdrop-filter:blur(16px);background:#ffffff9c;border:1px solid #ffffffa8;border-radius:20px;align-items:center;gap:13px;min-height:78px;margin-bottom:10px;padding:13px;display:flex;box-shadow:0 8px 24px #2222220b}.setting-icon{color:#484847;background:#eeeeec;border-radius:15px;place-items:center;width:43px;height:43px;display:grid}.setting-copy{flex:1}.setting-copy strong{font-size:.9rem;display:block}.setting-copy small{color:#737371;margin-top:2px;font-size:.73rem;display:block}.muted{opacity:.74}.ios-switch{cursor:pointer;background:#c4c6c4;border:0;border-radius:99px;width:51px;height:31px;padding:3px;transition:background .24s;position:relative}.ios-switch span{background:#fff;border-radius:50%;width:25px;height:25px;transition:transform .24s cubic-bezier(.2,.85,.25,1.2);display:block;box-shadow:0 2px 5px #1114}.ios-switch.is-on{background:#e97b26}.ios-switch.is-on span{transform:translate(20px)}.modal-backdrop{z-index:20;padding:14px 12px max(14px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(5px);background:#1515158a;justify-content:center;align-items:flex-end;animation:.2s both fade-in;display:flex;position:fixed;inset:0}.month-sheet-backdrop{z-index:30;-webkit-backdrop-filter:blur(5px);background:#15151575;justify-content:center;align-items:flex-end;padding:0;animation:.2s both fade-in;display:flex;position:fixed;inset:0}.month-sheet{width:min(100%,600px);padding:10px 16px max(18px, env(safe-area-inset-bottom));background:#f8f8f6;border-radius:26px 26px 0 0;animation:.34s cubic-bezier(.2,.9,.25,1) both sheet-rise;box-shadow:0 -14px 40px #00000024}.sheet-handle{background:#c5c6c3;border-radius:99px;width:36px;height:4px;margin:0 auto 13px}.sheet-title{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.sheet-title h2{color:#292929;letter-spacing:-.035em;margin:0;font-size:1.12rem}.sheet-title button{color:#555552;cursor:pointer;background:#e8e9e6;border:0;border-radius:10px;place-items:center;width:31px;height:31px;font-size:1.4rem;display:grid}.month-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.month-options button{color:#474744;cursor:pointer;background:#fff;border:1px solid #e1e2df;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;min-height:61px;animation:.35s ease-out both sheet-option;display:flex}.month-options button span{font-size:.75rem;font-weight:800}.month-options button small{color:#8a8a86;margin-top:2px;font-size:.62rem}.month-options button.selected{color:#a44c0e;background:#fbe4d0;border-color:#ec7e29;box-shadow:0 5px 13px #e7792924}.month-options button:nth-child(2){animation-delay:35ms}.month-options button:nth-child(3){animation-delay:70ms}.month-options button:nth-child(4){animation-delay:.105s}.month-options button:nth-child(5){animation-delay:.14s}.month-options button:nth-child(6){animation-delay:.175s}.month-options button:nth-child(7){animation-delay:.21s}.month-options button:nth-child(8){animation-delay:.245s}.month-options button:nth-child(9){animation-delay:.28s}.team-modal{background:#f8f8f6;border:1px solid #ffffffb3;border-radius:28px;width:min(100%,600px);max-height:min(80dvh,680px);padding:25px 16px 18px;animation:.38s cubic-bezier(.2,.9,.25,1) both modal-rise;position:relative;overflow:auto;box-shadow:0 24px 60px #0000004a}.modal-close{color:#fff;cursor:pointer;background:#e95048;border:0;border-radius:12px;place-items:center;width:34px;height:34px;font-size:1.65rem;font-weight:500;line-height:1;display:grid;position:absolute;top:13px;right:13px;box-shadow:0 5px 12px #b62e2740}.modal-back{color:#60605d;cursor:pointer;background:0 0;border:0;border-radius:9px;align-items:center;gap:2px;margin:1px 0 10px;padding:5px 7px 5px 2px;font-size:.74rem;font-weight:800;display:inline-flex}.modal-heading{padding:2px 44px 0 3px}.modal-heading h2{color:#292929;letter-spacing:-.045em;margin:0 0 4px;font-size:1.5rem}.modal-heading>p:last-child{color:#737371;margin:0;font-size:.78rem}.team-legend{flex-wrap:wrap;gap:6px;margin:17px 2px 12px;display:flex}.team-legend span{border-radius:7px;padding:4px 7px;font-size:.61rem;font-weight:800}.legend-in{color:#126739;background:#dbf4e4}.legend-out{color:#b7372f;background:#ffe1de}.legend-defend{color:#94420a;background:#ffe2c4}.team-list{gap:8px;display:grid}.zone-list{gap:10px;margin-top:18px;display:grid}.zone-sla-card{color:#4b2a13;cursor:pointer;text-align:left;background:linear-gradient(135deg,#fff7ef,#ffe3c3);border:1px solid #f0c493;border-radius:20px;justify-content:space-between;align-items:center;gap:12px;min-height:106px;padding:17px;transition:transform .18s,box-shadow .18s;display:flex;box-shadow:0 9px 20px #be6d1b14}.zone-sla-card:active{box-shadow:none;transform:scale(.98)}.zone-sla-card>div:first-child>span,.zone-sla-card small{font-size:.66rem;display:block}.zone-sla-card>div:first-child>span{color:#9e5b24;font-weight:800}.zone-sla-card>div:first-child>strong{color:#4b2a13;letter-spacing:-.04em;margin:2px 0;font-size:1.25rem;display:block}.zone-sla-card small{color:#8c684c}.zone-sla-value{color:#bc5613;align-items:center;gap:5px;display:flex}.zone-sla-value b{font-variant-numeric:tabular-nums;letter-spacing:-.07em;font-size:1.7rem}.sla-detail{margin-top:17px;animation:.28s ease-out both detail-slide}.zone-summary{color:#fff;background:linear-gradient(135deg,#eb751d,#bd4b08);border-radius:20px;padding:17px;box-shadow:0 10px 23px #b5501028}.zone-summary span,.zone-summary small{display:block}.zone-summary span{color:#ffe1c6;font-size:.72rem;font-weight:800}.zone-summary strong{font-variant-numeric:tabular-nums;letter-spacing:-.08em;margin:5px 0 3px;font-size:2.65rem;line-height:1;display:block}.zone-summary small{color:#fff0df;font-size:.7rem}.formula-note{color:#72726f;margin:12px 3px 9px;font-size:.68rem}.sla-team-list{gap:8px;display:grid}.sla-team-row{background:#fff;border:1px solid #e5e5e1;border-radius:16px;justify-content:space-between;align-items:center;gap:8px;padding:11px;display:flex}.sla-team-row>div:first-child{min-width:0}.sla-team-row>div:first-child strong,.sla-team-row>div:first-child small{display:block}.sla-team-row>div:first-child strong{color:#333;overflow-wrap:anywhere;font-size:.76rem;line-height:1.25}.sla-team-row>div:first-child small{color:#858581;margin-top:2px;font-size:.61rem}.sla-team-values{text-align:center;grid-template-columns:repeat(2,auto) minmax(59px,auto);align-items:center;gap:4px;display:grid}.sla-team-values>span{border-radius:8px;min-width:35px;padding:4px 3px;font-size:.53rem;font-weight:800;display:grid}.sla-team-values>span b{margin-top:1px;font-size:.8rem}.sla-team-values>strong{color:#be5611;font-variant-numeric:tabular-nums;letter-spacing:-.06em;font-size:1.06rem}.team-row{background:#fff;border:1px solid #e5e5e1;border-radius:17px;gap:10px;padding:12px;display:grid}.team-name{color:#333;overflow-wrap:anywhere;min-width:0;font-size:.83rem;line-height:1.25}.team-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;display:grid}.team-stat{text-align:center;border-radius:10px;min-width:0;padding:7px 4px 6px}.team-stat span{white-space:nowrap;font-size:.55rem;font-weight:800;display:block}.team-stat b{font-variant-numeric:tabular-nums;letter-spacing:-.04em;margin-top:2px;font-size:1.15rem;display:block}.stat-in{color:#126739;background:#dbf4e4}.stat-out{color:#b7372f;background:#ffe1de}.stat-defend{color:#94420a;background:#ffe2c4}.modal-status{text-align:center;color:#707070;padding:32px 10px}:root[data-theme=dark] .page-shell:before{background:#f4862f32}:root[data-theme=dark] .page-shell:after{background:#aaa7a222}:root[data-theme=dark] .hero{background:linear-gradient(135deg,#191919,#323231 65%,#bc5712 175%);box-shadow:0 18px 42px #0008}:root[data-theme=dark] .dashboard-header h1{color:#f3f1ec}:root[data-theme=dark] .period-control{background:#282827d1;border-color:#ffffff12;box-shadow:0 5px 16px #0005}:root[data-theme=dark] .period-control button{color:#d9d7d1}:root[data-theme=dark] .period-control button:disabled{color:#5c5c59}:root[data-theme=dark] .updated,:root[data-theme=dark] .empty-panel>p:last-child,:root[data-theme=dark] .setting-copy small{color:#b9b8b4}:root[data-theme=dark] .metric-card{border-color:#ffffff12;box-shadow:0 13px 30px #00000040}:root[data-theme=dark] .tone-total{background:linear-gradient(145deg,#353534,#242424)}:root[data-theme=dark] .tone-defend{background:linear-gradient(145deg,#7f4823,#5e2d15)}:root[data-theme=dark] .tone-due{background:linear-gradient(145deg,#343837,#252927)}:root[data-theme=dark] .tone-awaiting{background:linear-gradient(145deg,#685630,#493c20)}:root[data-theme=dark] .tone-sla{background:linear-gradient(145deg,#c85f18,#8f3906)}:root[data-theme=dark] .tone-waive{background:linear-gradient(145deg,#5e4a54,#413239)}:root[data-theme=dark] .card-label,:root[data-theme=dark] .metric-value{color:#fff}:root[data-theme=dark] .tone-defend .metric-value{color:#ffe2c8}:root[data-theme=dark] .metric-card small{color:#d6d3cd}:root[data-theme=dark] .due-in{color:#d3f8df;background:#1d5639}:root[data-theme=dark] .due-out{color:#ffe0dd;background:#652f2a}:root[data-theme=dark] .due-bar{background:#4a4b49}:root[data-theme=dark] .bottom-nav{background:#252524e8;border-color:#ffffff10;box-shadow:0 12px 36px #0008}:root[data-theme=dark] .bottom-nav button{color:#aaa9a4}:root[data-theme=dark] .bottom-nav button.active{color:#25170d;background:#ed7d27}:root[data-theme=dark] .settings-card{background:#292928a6;border-color:#ffffff0d;box-shadow:0 8px 24px #0004}:root[data-theme=dark] .setting-icon{color:#ffb274;background:#3b3b3a}:root[data-theme=dark] .team-modal{background:#242423;border-color:#ffffff13}:root[data-theme=dark] .month-sheet{background:#242423}:root[data-theme=dark] .sheet-handle{background:#5b5b58}:root[data-theme=dark] .sheet-title h2{color:#f3f1ec}:root[data-theme=dark] .sheet-title button{color:#dedbd5;background:#383837}:root[data-theme=dark] .month-options button{color:#e6e4de;background:#30302f;border-color:#ffffff0e}:root[data-theme=dark] .month-options button small{color:#aaa9a4}:root[data-theme=dark] .month-options button.selected{color:#ffd5b5;background:#5c351a;border-color:#e87824}:root[data-theme=dark] .modal-heading h2,:root[data-theme=dark] .team-name{color:#f4f2ed}:root[data-theme=dark] .modal-heading>p:last-child,:root[data-theme=dark] .modal-status{color:#b8b7b2}:root[data-theme=dark] .team-row{background:#30302f;border-color:#ffffff0e}:root[data-theme=dark] .modal-back{color:#d4d2cc}:root[data-theme=dark] .zone-sla-card{color:#ffe0c2;box-shadow:none;background:linear-gradient(135deg,#4e301a,#673614);border-color:#8c4719}:root[data-theme=dark] .zone-sla-card>div:first-child>span,:root[data-theme=dark] .zone-sla-card small{color:#f2bb88}:root[data-theme=dark] .zone-sla-card>div:first-child>strong{color:#fff0e2}:root[data-theme=dark] .zone-sla-value{color:#ffc18a}:root[data-theme=dark] .formula-note{color:#b9b7b1}:root[data-theme=dark] .sla-team-row{background:#30302f;border-color:#ffffff0e}:root[data-theme=dark] .sla-team-row>div:first-child strong{color:#f2f0eb}:root[data-theme=dark] .sla-team-row>div:first-child small{color:#b4b2ac}:root[data-theme=dark] .stat-in,:root[data-theme=dark] .legend-in{color:#d3f8df;background:#1d5639}:root[data-theme=dark] .stat-out,:root[data-theme=dark] .legend-out{color:#ffe0dd;background:#652f2a}:root[data-theme=dark] .stat-defend,:root[data-theme=dark] .legend-defend{color:#ffe1bd;background:#704016}@keyframes rise{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pulse{50%{opacity:.45;transform:scale(.85)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-rise{0%{opacity:0;transform:translateY(34px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes detail-slide{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes sheet-rise{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes sheet-option{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width>=560px){.page-shell{padding:30px 24px}.hero{min-height:174px;padding:27px}.app-logo{border-radius:18px;width:58px;height:58px}.metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.metric-card{min-height:165px;padding:18px}.modal-backdrop,.month-sheet-backdrop{align-items:center;padding:24px}.month-sheet{border-radius:26px}.team-modal{padding:28px 23px 22px}.team-row{grid-template-columns:minmax(180px,1fr) minmax(255px,1.15fr);align-items:center}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}