:root{--bg: #edf3f9;--bg-glow: #d6e9f8;--surface: #ffffff;--surface-2: #f5f9fc;--ink: #0f2236;--ink-2: #44586c;--ink-3: #7a8ca0;--line: #dde6ef;--accent: #0b72c2;--accent-2: #12a4b6;--accent-ink: #ffffff;--accent-soft: #dcecfa;--deep-1: #071f38;--deep-2: #0b4677;--deep-3: #0e86ad;--low: #1e7a5a;--mid: #a8721a;--high: #b3392c;--info-bg: #e3f0fb;--warn-bg: #fbf1e1;--bad-bg: #fbeae8;--muted-bg: #edf2f6;--row-hover: #f1f7fc;--shadow-sm: 0 1px 2px rgb(15 34 54 / .05);--shadow: 0 1px 2px rgb(15 34 54 / .04), 0 12px 32px -16px rgb(15 34 54 / .22);--shadow-lg: 0 40px 90px -24px rgb(3 16 32 / .6);--series-1: #2a78d6;--series-2: #eb6834;--good: #0ca30c;--warning: #fab219;--serious: #ec835a;--critical: #d03b3b;--grid: #e8ecf0;--heat-0: #cde2fb;--heat-1: #9ec5f4;--heat-2: #6da7ec;--heat-3: #3987e5;--heat-4: #256abf;--heat-5: #184f95;--heat-6: #0d366b;color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #08121d;--bg-glow: #0d2a44;--surface: #101c2a;--surface-2: #0c1723;--ink: #e6eef6;--ink-2: #b0bfcd;--ink-3: #7d8d9c;--line: #1e2e3e;--accent: #4aa8ec;--accent-2: #2cc4d4;--accent-ink: #06121d;--accent-soft: #12314d;--deep-1: #04101d;--deep-2: #082e50;--deep-3: #0b5f80;--low: #4cc292;--mid: #e0a947;--high: #f07b6c;--info-bg: #13304a;--warn-bg: #3a2c12;--bad-bg: #42201c;--muted-bg: #1a2734;--row-hover: #15222f;--shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -16px rgb(0 0 0 / .6);--series-1: #3987e5;--series-2: #d95926;--grid: #22323f;color-scheme:dark}}:root[data-theme=dark]{--bg: #08121d;--bg-glow: #0d2a44;--surface: #101c2a;--surface-2: #0c1723;--ink: #e6eef6;--ink-2: #b0bfcd;--ink-3: #7d8d9c;--line: #1e2e3e;--accent: #4aa8ec;--accent-2: #2cc4d4;--accent-ink: #06121d;--accent-soft: #12314d;--deep-1: #04101d;--deep-2: #082e50;--deep-3: #0b5f80;--low: #4cc292;--mid: #e0a947;--high: #f07b6c;--info-bg: #13304a;--warn-bg: #3a2c12;--bad-bg: #42201c;--muted-bg: #1a2734;--row-hover: #15222f;--shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -16px rgb(0 0 0 / .6);--series-1: #3987e5;--series-2: #d95926;--grid: #22323f;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(1100px 520px at 90% -10%,var(--bg-glow),transparent 65%),var(--bg);background-attachment:fixed;color:var(--ink);font-family:IBM Plex Sans Thai,system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .4s ease,color .4s ease}h1{font-family:Anuphan,IBM Plex Sans Thai,sans-serif;font-size:20px;margin:0}h2{font-family:Anuphan,IBM Plex Sans Thai,sans-serif}.muted{color:var(--ink-3)}.small{font-size:13px}.center{text-align:center;padding:48px 16px}.center-text{text-align:center;margin:0}.error{color:var(--high);margin:8px 0}::selection{background:var(--accent-soft)}button{font:inherit;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,filter .2s ease}button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:0;border-radius:10px;padding:10px 18px;font-weight:600;box-shadow:0 8px 20px -10px var(--accent)}button.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 24px -10px var(--accent)}button.primary:active:not(:disabled){transform:translateY(0)}button.primary.big{padding:13px 18px;font-size:16px;border-radius:12px}button.primary:disabled{opacity:.5;cursor:default}button.link{background:none;border:0;color:var(--accent);padding:4px 0}input,select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%;transition:border-color .15s ease,box-shadow .15s ease}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:34px;cursor:pointer;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%237a8ca0' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center}input:hover,select:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}label{display:grid;gap:5px;font-size:13px;font-weight:500;color:var(--ink-2)}.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:#ffffff24;border:1px solid rgb(255 255 255 / .22);box-shadow:inset 0 1px #fff3}.brand-mark img{filter:drop-shadow(0 2px 4px rgb(0 0 0 / .3)) brightness(1.25)}.brand-name{font-family:Anuphan,sans-serif;font-weight:700;font-size:18px;line-height:1.2;letter-spacing:.2px}.brand-sub{font-size:12.5px;opacity:.72}.brand.on-dark{color:#fff}.lamp{background:none;border:0;padding:0 4px;line-height:0}.lamp svg{overflow:visible}.lamp-wire{stroke:#ffffff8c;stroke-width:1.5}.lamp-shade{fill:#e8eef4;stroke:#b9c6d2;stroke-width:1}.lamp-bulb{fill:#8a96a2;transition:fill .25s ease}.lamp-glow{fill:#ffe27a;opacity:0;filter:blur(5px);transition:opacity .3s ease}.lamp.on .lamp-bulb{fill:#fff3b0}.lamp.on .lamp-glow{opacity:.9}.lamp-cord line{stroke:#ffffffb3;stroke-width:1.2}.lamp-cord circle{fill:#ffd23f}.lamp-cord.pulled{animation:cord-pull .5s cubic-bezier(.3,1.6,.5,1)}.lamp:hover .lamp-cord circle{fill:#fff}@keyframes cord-pull{30%{transform:translateY(7px)}}.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(900px 500px at 70% 0%,rgb(42 180 220 / .35),transparent 60%),linear-gradient(160deg,var(--deep-1),var(--deep-2) 60%,var(--deep-3))}.login-card{width:min(400px,100%);padding:28px;display:grid;gap:16px}.login-overlay .login-card{padding:34px 30px 26px;border-radius:22px;box-shadow:var(--shadow-lg);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:#ffffff59;color:var(--ink)}.login-drop{width:64px;height:64px;margin:-66px auto 0;border-radius:20px;display:grid;place-items:center;position:relative;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 14px 30px -10px var(--accent)}.login-drop img{filter:brightness(0) invert(1)}.login-drop:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:24px;border:2px solid var(--accent-2);opacity:0;animation:ripple 2.2s ease-out infinite}@keyframes ripple{0%{transform:scale(.9);opacity:.7}to{transform:scale(1.35);opacity:0}}.login-head{text-align:center;display:grid;gap:4px}.login-head h1{font-size:24px}.login-head p{margin:0}.masthead{position:relative;color:#fff;padding-bottom:54px;overflow:hidden;overflow:clip;background:radial-gradient(700px 260px at 85% -20%,rgb(60 200 230 / .35),transparent 65%),radial-gradient(500px 200px at 10% 120%,rgb(20 120 200 / .45),transparent 70%),linear-gradient(135deg,var(--deep-1),var(--deep-2) 58%,var(--deep-3))}.masthead-inner{max-width:1180px;margin:0 auto;padding:16px 16px 0;position:relative;z-index:1}.mast-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.mast-right{display:flex;align-items:center;gap:10px}.user-chip{display:flex;align-items:center;gap:10px;padding:4px;border-radius:999px;font-size:13px;background:#ffffff1a;border:1px solid rgb(255 255 255 / .16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.user-chip .who-text{display:grid;line-height:1.25;padding-right:4px}.user-chip .who-text small{opacity:.7;font-size:11.5px}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:11px;color:#04223a;background:linear-gradient(135deg,#8ee6f2,#3a9be0)}.btn-ghost{background:#ffffff1f;color:#fff;border:0;border-radius:999px;padding:6px 14px;font-size:13px}.btn-ghost:hover{background:#ffffff38}.mast-title{margin:26px 0 0;display:grid;gap:2px}.mast-title h1{font-size:clamp(22px,3vw,30px);color:#fff}.mast-title p{margin:0;color:#ffffffb3;font-size:14px}.waves{position:absolute;left:0;bottom:-1px;width:200%;height:56px;display:flex;pointer-events:none}.waves svg{width:50%;height:100%;flex:none}.waves.back{opacity:.35;animation:wave-drift 22s linear infinite reverse;bottom:6px}.waves.front{animation:wave-drift 16s linear infinite}.waves path{fill:var(--bg)}@keyframes wave-drift{to{transform:translate(-50%)}}.tabs{display:flex;gap:4px;margin:18px 0 0;padding:5px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;background:#ffffff14;border:1px solid rgb(255 255 255 / .14);border-radius:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.tabs::-webkit-scrollbar{display:none}.tabs button{background:none;border:0;color:#ffffffc7;padding:8px 16px;border-radius:10px;font-weight:500;white-space:nowrap}.tabs button:hover{color:#fff;background:#ffffff1a}.tabs button.on{background:#fff;color:var(--deep-1);font-weight:600;box-shadow:0 8px 18px -8px #00000080}.page{max-width:1180px;margin:-26px auto 0;padding:0 16px 56px;position:relative;z-index:2}.view{animation:rise .45s cubic-bezier(.2,.7,.2,1)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.controls{display:flex;flex-wrap:wrap;align-items:end;gap:14px;padding:14px 16px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.controls:empty{display:none}.controls label{min-width:180px}.range{padding-bottom:10px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px}.kpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}.kpi:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.kpi:hover{transform:translateY(-2px)}.kpi-label{font-size:13px;color:var(--ink-2)}.kpi-value{font-family:IBM Plex Mono,monospace;font-size:28px;font-weight:500;margin-top:4px;letter-spacing:-.5px}.kpi-sub{font-size:12px;color:var(--ink-3)}.kpi.high .kpi-value{color:var(--high)}.kpi.high:before{background:var(--high)}.kpi.mid .kpi-value{color:var(--mid)}.kpi.mid:before{background:var(--warning)}.kpi.low .kpi-value{color:var(--low)}.kpi.low:before{background:var(--low)}.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow-x:auto;box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}tbody tr:last-child td{border-bottom:0}th{font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface-2);position:sticky;top:0;letter-spacing:.2px}td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}.sep{border-left:1px solid var(--line)}tr.clickable{cursor:pointer}tr.clickable:hover,tbody tr:hover{background:var(--row-hover)}tr.dim td{color:var(--ink-3)}.tone-high{color:var(--high);font-weight:600}.tone-mid{color:var(--mid);font-weight:600}.tone-low{color:var(--low);font-weight:600}.area{display:flex;align-items:center;gap:8px;flex-wrap:wrap;white-space:normal;min-width:260px}.twig{color:var(--ink-3)}.code{font-family:IBM Plex Mono,monospace;font-size:12.5px;font-weight:500}.kind-MM{color:var(--accent)}.name{color:var(--ink-2)}.badge{font-size:11px;padding:2px 8px;border-radius:999px;white-space:nowrap;font-weight:500}.badge.info{background:var(--info-bg);color:var(--accent)}.badge.warn{background:var(--warn-bg);color:var(--mid)}.badge.bad{background:var(--bad-bg);color:var(--high)}.badge.muted{background:var(--muted-bg);color:var(--ink-3)}.note{margin-top:14px}.banner{background:var(--warn-bg);color:var(--mid);border-radius:12px;padding:11px 14px 11px 16px;margin:8px 0 14px;font-size:14px;border-left:4px solid var(--warning)}.loader{min-height:60vh;display:grid;place-items:center;align-content:center;gap:14px;color:var(--ink-3)}.loader:before{content:"";width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,var(--accent),var(--accent-2));animation:drip 1.1s ease-in-out infinite}@keyframes drip{50%{transform:rotate(-45deg) translate(4px,-4px) scale(.85);opacity:.6}}.import{display:grid;gap:12px}.import input[type=file]{width:auto}.import button.primary{justify-self:start}.overview{display:grid;gap:16px}.panel{padding:16px 18px}.panel h2{font-size:15px;margin:0 0 10px}.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}.grid-2.even{grid-template-columns:1fr 1fr}.priority li.clickable{cursor:pointer}.p-val.delta.up{color:var(--critical)}.p-val.delta.down{color:var(--good)}.hero{display:grid;grid-template-columns:1.1fr 2fr;gap:16px;padding:20px}.hero-main{display:grid;gap:6px;align-content:start}.hero-value{font-family:IBM Plex Mono,monospace;font-size:46px;font-weight:500;line-height:1.1}.hero-side{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mini{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:2px;align-content:start}.mini-value{font-family:IBM Plex Mono,monospace;font-size:24px;font-weight:500}.mini-value.small-num{font-size:19px}.delta{font-size:13px}.delta.up{color:var(--critical)}.delta.down{color:var(--good)}.status{justify-self:start;font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;border:1px solid currentColor}.status-good,.tone-good{color:var(--good)}.status-warning,.tone-warning{color:var(--mid)}.status-serious,.tone-serious{color:var(--serious)}.status-critical,.tone-critical{color:var(--critical)}.status-none,.tone-none{color:var(--ink-3)}.chart{position:relative}.chart svg{width:100%;height:auto;display:block}.grid{stroke:var(--grid);stroke-width:1}.axis{fill:var(--ink-3);font-size:11px}.crosshair{stroke:var(--ink-3);stroke-dasharray:3 3}.line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.line.s1,.dot.s1{stroke:var(--series-1)}.line.s2,.dot.s2{stroke:var(--series-2)}.line.s3,.dot.s3{stroke:var(--ink-3)}.line.s3{stroke-dasharray:4 3}.dot{fill:var(--surface);stroke-width:2}.direct{font-size:12px;font-weight:600;fill:var(--ink)}.legend{display:flex;gap:16px;font-size:13px;color:var(--ink-2);margin-bottom:4px}.swatch{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:4px}.swatch.s1{background:var(--series-1)}.swatch.s2{background:var(--series-2)}.swatch.s3{background:var(--ink-3)}.tooltip{position:absolute;top:28px;right:8px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;box-shadow:0 2px 8px #00000014}.priority{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}.priority li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center}.rank{font-family:IBM Plex Mono,monospace;color:var(--ink-3);text-align:right}.p-name{font-size:14px}.p-bar{height:6px;background:var(--muted-bg);border-radius:3px;margin-top:4px}.p-bar span{display:block;height:100%;background:var(--series-1);border-radius:3px}.p-val{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.ranking{display:grid;gap:6px}.rank-row{display:grid;grid-template-columns:120px 1fr 64px 92px 110px;gap:10px;align-items:center;background:none;border:0;padding:4px 6px;border-radius:6px;text-align:left;color:var(--ink)}.rank-row:hover{background:var(--row-hover)}.r-track{height:12px;background:var(--muted-bg);border-radius:0 4px 4px 0}.r-fill{display:block;height:100%;border-radius:0 4px 4px 0}.fill-good{background:var(--good)}.fill-warning{background:var(--warning)}.fill-serious{background:var(--serious)}.fill-critical{background:var(--critical)}.fill-none{background:var(--muted-bg)}.r-val{text-align:right;font-family:IBM Plex Mono,monospace}.r-status{font-size:13px;font-weight:600}.heat td.cell{text-align:center;font-size:12px;font-variant-numeric:tabular-nums;border:2px solid var(--surface)}.heat .cell-empty{background:transparent}.heat-0{background:var(--heat-0);color:#16212c}.heat-1{background:var(--heat-1);color:#16212c}.heat-2{background:var(--heat-2);color:#16212c}.heat-3{background:var(--heat-3);color:#fff}.heat-4{background:var(--heat-4);color:#fff}.heat-5{background:var(--heat-5);color:#fff}.heat-6{background:var(--heat-6);color:#fff}.heat-legend{display:flex;align-items:center;gap:2px;padding:10px 12px}.heat-legend i{display:inline-block;width:22px;height:10px}.steptest input.num-in{width:72px;text-align:right}.steptest td input:not(.num-in):not([type=checkbox]){min-width:140px}.steptest h2.sub{margin-top:18px}.week-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:4px 0 14px}.week-steps button{display:grid;gap:2px;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}.week-steps button.on{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}.steptest .chips{display:flex;flex-wrap:wrap;gap:4px;max-width:360px}.steptest .chip{font:inherit;font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer}.steptest .chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.steptest label.check{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}.steptest label.check input{width:auto;margin:0}.steptest .card-actions{display:flex;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}.steptest .table-wrap.flat{border:0;border-radius:0}.steptest .pad{padding:10px 14px;margin:0}.checklist{border:1px solid var(--line);border-radius:10px}.checklist>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:12px 14px}.checklist>summary::-webkit-details-marker{display:none}.checklist .cl-chips{display:flex;flex-wrap:wrap;gap:6px}.checklist .cl-open{margin-left:auto}.checklist .cl-open:after{content:" ▸"}.checklist[open] .cl-open:after{content:" ▾"}.checklist .cl-groups{padding:0 14px;border-top:1px solid var(--line)}.checklist .cl-groups p{margin:8px 0}.steptest .step-dma .banner{margin:10px 14px}.step-list{display:grid;gap:6px}.step-dma{border:1px solid var(--line);border-radius:10px;background:var(--surface)}.step-dma>summary{cursor:pointer;display:grid;grid-template-columns:1fr 70px 150px 220px;gap:10px;align-items:center;padding:10px 14px;list-style:none}.step-dma>summary::-webkit-details-marker{display:none}.step-dma>summary .s-name:before{content:"▸ ";color:var(--ink-3)}.step-dma[open]>summary .s-name:before{content:"▾ "}.step-dma[open]>summary{border-bottom:1px solid var(--line)}.step-dma .s-meta{text-align:right;font-family:IBM Plex Mono,monospace}.step-dma .s-meta.small{font-family:inherit}.step-table{width:100%;border-collapse:collapse;font-size:14px}.step-table th,.step-table td{padding:6px 14px;border-bottom:1px solid var(--line);text-align:left}.step-table .n{text-align:right}.step-table tr.worst td{background:var(--bad-bg)}.sbar{position:relative;display:block;min-width:160px;height:22px;background:var(--muted-bg);border-radius:4px;overflow:hidden}.sbar-fill{position:absolute;inset:0 auto 0 0;background:var(--series-2);border-radius:0 4px 4px 0}.sbar-fill.after{background:var(--series-1)}.sbar-val{position:relative;padding-left:6px;font-family:IBM Plex Mono,monospace;font-size:12px;line-height:22px;color:var(--ink)}@media(max-width:760px){.step-dma>summary{grid-template-columns:1fr auto}.week-steps{grid-template-columns:repeat(2,1fr)}.step-dma>summary .s-meta.small{grid-column:1 / -1;text-align:left}}.steptest tr.row-miss td{background:var(--bad-bg)}.dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat-card{padding:18px 20px;display:grid;gap:6px;align-content:start}.vol{margin:10px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}.vol>div{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}.vol dt{color:var(--ink-2)}.vol dd{margin:0;font-family:IBM Plex Mono,monospace}.vol .vol-loss dt,.vol .vol-loss dd{font-weight:600;color:var(--ink)}.cmp{width:100%;border-collapse:collapse;margin:6px 0;font-size:14px}.cmp th{font-weight:500;color:var(--ink-3);font-size:12px;text-align:left;padding:4px 0}.cmp td{padding:8px 0;border-top:1px solid var(--line)}.cmp .n{text-align:right;font-family:IBM Plex Mono,monospace}@media(max-width:900px){.dash-cards,.grid-2,.hero{grid-template-columns:1fr}.hero-side{grid-template-columns:1fr 1fr}.rank-row{grid-template-columns:90px 1fr 60px}.r-status,.r-month{display:none}}@media(max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}.kpi-value{font-size:21px}.controls label{min-width:0;flex:1 1 140px}}.panel{padding:18px 20px}.panel h2{font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:8px}.panel h2:before{content:"";width:4px;height:16px;border-radius:2px;background:linear-gradient(var(--accent),var(--accent-2))}.hero{padding:22px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent)}.hero-value{font-size:50px;letter-spacing:-1.5px}.mini{background:var(--surface-2);border-color:var(--line);border-radius:12px;transition:transform .2s ease,border-color .2s ease}.mini:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}.stat-card{transition:transform .2s ease}.stat-card:hover{transform:translateY(-2px)}.rank-row{transition:background-color .15s ease}.p-bar,.r-track{overflow:hidden}.p-bar span{background:linear-gradient(90deg,var(--accent),var(--accent-2))}.tooltip{border-radius:10px;box-shadow:var(--shadow)}.step-dma,.checklist{box-shadow:var(--shadow-sm)}.week-steps button{transition:border-color .15s ease,transform .15s ease}.week-steps button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}@media(max-width:640px){.user-chip .who-text{display:none}.mast-title{margin-top:18px}.hero-value{font-size:40px}}.panel .table-wrap{box-shadow:none}.legend{flex-wrap:wrap;gap:6px 14px}@media(max-width:640px){body{font-size:14px}.masthead{padding-bottom:44px}.masthead-inner{padding:12px 12px 0}.brand-mark{width:34px;height:34px;border-radius:10px}.brand-name{font-size:16px}.brand-sub{display:none}.mast-top{flex-wrap:nowrap}.mast-right{gap:4px}.brand-name,.btn-ghost{white-space:nowrap}.brand{gap:8px;min-width:0}.user-chip{padding:3px}.avatar{width:28px;height:28px;font-size:10px}.btn-ghost{padding:5px 10px;font-size:12px}.mast-title h1{font-size:22px}.tabs{margin-top:14px;width:100%}.tabs button{padding:7px 12px;font-size:14px}.page{padding:0 12px 40px;margin-top:-22px}.controls{padding:12px;gap:10px;border-radius:14px}.controls label{min-width:0;flex:1 1 140px}.range{padding-bottom:0;flex-basis:100%}.kpis{gap:10px}.kpi{padding:12px 14px;border-radius:14px}.kpi-value{font-size:20px}.kpi-label{font-size:12px}.card{border-radius:14px}.panel{padding:14px}.hero{padding:16px;gap:12px}.hero-side{grid-template-columns:1fr 1fr;gap:8px}.mini{padding:10px 12px}.mini-value{font-size:19px}.stat-card{padding:14px 16px}table{font-size:13px}th,td{padding:8px 10px}.area{min-width:200px}.rank-row{grid-template-columns:76px 1fr 56px;gap:8px;padding:4px 2px}.step-dma>summary{padding:10px 12px}.sbar{min-width:110px}.heat-legend{flex-wrap:wrap}input,select{font-size:16px}}@media(max-width:380px){.kpis{grid-template-columns:1fr 1fr}.kpi-value{font-size:18px}.hero-side{grid-template-columns:1fr}}@media(max-width:480px){.login-overlay .login-card{padding:30px 20px 22px;border-radius:20px}.login-head h1{font-size:22px}}.login-stage{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;overflow:clip;background:#061a30;color:#fff}.scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;transition:filter 1s ease,transform 1.2s ease}.login-stage.show-form .scene{filter:blur(3px) brightness(.8) saturate(1.1);transform:scale(1.05)}.stage-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:16px clamp(16px,4vw,40px);z-index:2}.stage-bottom{position:absolute;left:0;right:0;bottom:max(28px,5vh);display:grid;justify-items:center;gap:10px;z-index:2;padding:0 16px}.call-btn{border:0;border-radius:999px;padding:14px 26px;font-size:17px;font-weight:700;font-family:"Anuphan",inherit;color:#062440;background:linear-gradient(135deg,#ffe066,#ffc61a);box-shadow:0 12px 30px -8px #ffc61ab3,inset 0 -3px #0000001f;animation:call-pulse 1.6s ease-in-out infinite}.call-btn:hover{filter:brightness(1.05)}.skip-btn{background:none;border:0;color:#ffffffbf;font-size:13px;text-decoration:underline;text-underline-offset:3px}.stage-status{margin:0;padding:10px 18px;border-radius:999px;background:#061a3099;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-weight:600}@keyframes call-pulse{50%{transform:translateY(-3px) scale(1.04)}}.scene .sky-day{opacity:0}.scene .stars circle{fill:#fff;animation:twinkle 2.4s ease-in-out infinite}.scene .moon{fill:#f6f1d5;filter:drop-shadow(0 0 12px rgb(246 241 213 / .6))}.scene .sun{fill:#ffd84d;opacity:0;filter:drop-shadow(0 0 18px rgb(255 216 77 / .8))}.scene .cloud{fill:#ffffff24}.scene .cloud.c1{animation:drift 26s linear infinite}.scene .cloud.c2{animation:drift 34s linear infinite reverse}.scene .town{fill:#0a2846}.scene .windows rect{fill:#ffd76a;animation:twinkle 3s ease-in-out infinite}.scene .tower path:first-child{stroke:#0a2846;stroke-width:5;stroke-linecap:round}.scene .tower rect{fill:#0e3a63}.scene .tower .tower-drop{fill:#4cc3f0}.scene .crack{stroke:#06223d;stroke-width:3;fill:none;stroke-linejoin:round}.scene .road-crack{fill:#0e1319}.scene .seep{stroke:#7fd8f7;stroke-width:9;fill:none;stroke-linecap:round;stroke-dasharray:10 8;animation:seep .5s linear infinite}.scene .puddle{fill:#7fd8f7;opacity:.85;transform-box:fill-box;transform-origin:center;animation:puddle 1.4s ease-in-out infinite}.scene .flow{stroke:#ffffffb3;stroke-width:5;stroke-linecap:round;stroke-dasharray:22 34;opacity:0;animation:flow 1s linear infinite}.scene .clamp{transform:scale(0)}.scene .gush{animation:gush .18s ease-in-out infinite alternate}.scene .arc{stroke:#bdeefc;stroke-width:5;fill:none;stroke-linecap:round;stroke-dasharray:12 14;opacity:.85;animation:seep .45s linear infinite}.scene .drops circle{fill:#c9f2ff;opacity:0;animation:drop 1.3s cubic-bezier(.3,.6,.6,1) infinite}.scene .sparkles path{fill:#fff6b0;transform:scale(0);transform-box:fill-box;transform-origin:center}.scene .bubble-ok{transform:scale(0)}.scene .bubble-text{font:700 16px Anuphan,IBM Plex Sans Thai,sans-serif;fill:#0b3358}.scene .truck{transform:translate(-640px)}.scene .truck-text{font:700 9.5px Anuphan,IBM Plex Sans Thai,sans-serif;fill:#fff}.scene .cone{transform:scale(0)}.scene .sign-text{font:700 13px Anuphan,IBM Plex Sans Thai,sans-serif;fill:#fff}.scene .sign-text.small{font-size:9.5px;font-weight:600}.scene .chest-text{font:700 9px Anuphan,IBM Plex Sans Thai,sans-serif;fill:#fff}.scene .man{transform:translate(-100px);opacity:0}.scene .eye{transform-box:fill-box;transform-origin:center;animation:blink 3.5s infinite}.scene .hotspot{cursor:pointer;outline:none}.scene .hotspot .ring{fill:none;stroke:#fff;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:ring 1.8s ease-out infinite}.scene .hotspot .ring.r2{animation-delay:.9s}.scene .hotspot:focus-visible .ring{stroke:#ffd23f}.scene .hint{animation:hint-bob 1.4s ease-in-out infinite}.scene .hint rect,.scene .hint path{fill:#ffd23f}.scene .hint text{font:700 15px Anuphan,IBM Plex Sans Thai,sans-serif;fill:#062440}.scene.fix .truck{animation:truck-in .9s cubic-bezier(.2,.8,.3,1) forwards}.scene.fix .wheel{animation:spin .3s linear 3}.scene.fix .beacon{animation:beacon .5s steps(2) infinite}.scene.fix .cone{animation:pop .4s cubic-bezier(.3,1.6,.5,1) 1s forwards}.scene.fix .cone.sign{animation-delay:1.15s}.scene.fix .man{animation:walk 1.2s cubic-bezier(.25,.7,.4,1) .9s both}.scene.fix .man-bob{animation:bob .2s ease-in-out .9s 6 alternate,hop .45s ease-out 3.8s 2}.scene.fix .leg-f{animation:swing .4s ease-in-out .9s 3 alternate}.scene.fix .leg-b,.scene.fix .arm-b{animation:swing-b .4s ease-in-out .9s 3 alternate}.scene.fix .arm-f{animation:reach .3s ease-out 2.1s forwards,hammer .28s ease-in-out 2.4s 5 alternate,cheer .45s cubic-bezier(.3,1.5,.5,1) 3.8s forwards}.scene.fix .clamp{animation:pop .45s cubic-bezier(.3,1.6,.5,1) 2.9s forwards}.scene.fix .geyser{animation:shrink .7s ease-in 3.1s forwards}.scene.fix .drops,.scene.fix .seep,.scene.fix .crack{animation:fade-out .5s ease 3.2s forwards}.scene.fix .puddle{animation:puddle 1.4s ease-in-out infinite,dry 1s ease-in 3.3s forwards}.scene.fix .flow{animation:flow 1s linear infinite,fade-in .6s ease 3.7s forwards}.scene.fix .sky-day,.scene.fix .sun{animation:fade-in 1.4s ease 3.5s forwards}.scene.fix .stars,.scene.fix .moon,.scene.fix .windows{animation:fade-out 1.2s ease 3.5s forwards}.scene.fix .sparkles path{animation:sparkle .9s ease-out 3.55s both}.scene.fix .bubble-ok{animation:pop .5s cubic-bezier(.3,1.6,.5,1) 3.8s forwards}.scene.done .man,.scene.done .truck,.scene.done .cone{transform:none;opacity:1}.scene.done .arm-f{transform:rotate(-150deg)}.scene.done .clamp,.scene.done .bubble-ok{transform:none}.scene.done .geyser{transform:scaleY(0)}.scene.done .drops,.scene.done .seep,.scene.done .crack,.scene.done .stars,.scene.done .moon,.scene.done .windows{opacity:0}.scene.done .puddle{animation:none;transform:scale(0)}.scene.done .flow,.scene.done .sky-day,.scene.done .sun{opacity:1}@keyframes twinkle{50%{opacity:.35}}@keyframes drift{0%{transform:translate(-120px)}to{transform:translate(120px)}}@keyframes seep{to{stroke-dashoffset:-36}}@keyframes flow{to{stroke-dashoffset:-56}}@keyframes puddle{50%{transform:scaleX(1.12)}}@keyframes dry{to{transform:scale(0)}}@keyframes gush{0%{transform:scale(.97,.95)}to{transform:scale(1.03,1.04)}}@keyframes drop{0%{transform:translate(0);opacity:0}10%{opacity:1}40%{transform:translate(calc(var(--dx) * .45),var(--dy))}to{transform:translate(var(--dx),176px);opacity:.2}}@keyframes ring{0%{transform:scale(.8);opacity:.9}to{transform:scale(1.7);opacity:0}}@keyframes hint-bob{50%{transform:translateY(-6px)}}@keyframes blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}@keyframes walk{0%{transform:translate(-100px);opacity:0}15%{opacity:1}to{transform:translate(0);opacity:1}}@keyframes truck-in{0%{transform:translate(-640px)}80%{transform:translate(10px)}to{transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes beacon{50%{fill:#ffe14d}}@keyframes bob{to{transform:translateY(-3px)}}@keyframes hop{50%{transform:translateY(-16px)}}@keyframes swing{0%{transform:rotate(-22deg)}to{transform:rotate(22deg)}}@keyframes swing-b{0%{transform:rotate(22deg)}to{transform:rotate(-22deg)}}@keyframes reach{to{transform:rotate(-45deg)}}@keyframes hammer{0%{transform:rotate(-35deg)}to{transform:rotate(-70deg)}}@keyframes cheer{0%{transform:rotate(-45deg)}to{transform:rotate(-150deg)}}@keyframes pop{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes shrink{to{transform:scaleY(0)}}@keyframes fade-out{to{opacity:0}}@keyframes fade-in{to{opacity:1}}@keyframes sparkle{0%{transform:scale(0) rotate(0)}50%{transform:scale(1.4) rotate(45deg)}to{transform:scale(0) rotate(90deg)}}.login-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:16px;z-index:3;background:radial-gradient(60% 60% at 50% 50%,#061a3040,#061a3099);animation:fade-in-bg .6s ease both}.login-overlay .login-card{animation:card-pop .75s cubic-bezier(.2,1.3,.4,1) both}@keyframes fade-in-bg{0%{opacity:0}}@keyframes card-pop{0%{opacity:0;transform:translateY(90px) scale(.55)}60%{opacity:1}to{transform:none}}@media(prefers-reduced-motion:reduce){.scene *,.call-btn,.login-overlay,.login-overlay .login-card{animation:none!important}}@media(max-width:480px){.stage-top{padding:12px 14px}.call-btn{font-size:15px;padding:12px 20px}.stage-status{font-size:13px;text-align:center}}
