@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800;900&display=swap";:root{color:#101828;font-synthesis:none;text-rendering:optimizelegibility;--green:#10b981;--green-dark:#047857;--blue:#2563eb;--amber:#d97706;--red:#dc2626;--border:#dfe5ec;--muted:#667085;--shadow:0 .4vw 1.4vw #0f172a0b;background:#f7f9fc;font-family:Noto Sans Thai,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;min-height:100%;margin:0}body{overflow:hidden}.app,.slide-enter{width:100%;height:100dvh}.slide-enter{animation:.42s both slide-in}.tv-shell{background:radial-gradient(circle at 92% 2%,#2563eb0b,#0000 22%),linear-gradient(#fff 0%,#f8fafc 100%);grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:clamp(8px,.65vw,14px);width:100%;height:100dvh;min-height:620px;padding:clamp(14px,1vw,24px) clamp(18px,1.6vw,36px) clamp(10px,.8vw,18px);display:grid;overflow:hidden}.tv-header{grid-template-columns:minmax(150px,.8fr) minmax(520px,3.1fr) minmax(430px,2fr);align-items:center;gap:clamp(18px,1.5vw,34px);min-height:clamp(82px,7vw,118px);display:grid}.brand{border-right:1px solid var(--border);flex-direction:column;justify-content:center;height:100%;padding-right:1.4vw;display:flex}.brand-mark{letter-spacing:-.075em;color:#0f172a;font-size:clamp(34px,3.1vw,64px);font-weight:900;line-height:.95}.brand-copy{letter-spacing:.22em;color:#4b6282;margin-top:.3em;font-size:clamp(11px,.78vw,17px);font-weight:600}.title-block{align-items:center;gap:clamp(14px,1.3vw,26px);min-width:0;display:flex}.title-icon{width:clamp(52px,4vw,76px);height:clamp(52px,4vw,76px);color:var(--green-dark);background:#eafbf4;border-radius:50%;flex:none;place-items:center;display:grid}.title-icon svg{stroke-width:2.3px;width:48%;height:48%}.title-block h1{letter-spacing:-.035em;color:#0f172a;margin:0;font-size:clamp(32px,3.2vw,66px);font-weight:900;line-height:1}.title-block p{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:.55em 0 0;font-size:clamp(12px,.95vw,21px);font-weight:500;overflow:hidden}.header-status{border-left:1px solid var(--border);grid-template-columns:minmax(210px,1fr) minmax(190px,.9fr);justify-self:stretch;align-items:center;gap:1.1vw;padding-left:1.6vw;display:grid}.clock-block{text-align:right;min-width:0}.clock-date{color:#475467;justify-content:flex-end;align-items:center;gap:.45em;font-size:clamp(11px,.82vw,18px);font-weight:600;display:flex}.clock-date svg{width:1em;height:1em}.clock-time{letter-spacing:-.04em;color:#0f172a;font-variant-numeric:tabular-nums;margin-top:.1em;font-size:clamp(36px,3.5vw,72px);font-weight:900;line-height:1}.connection-block{border-left:1px solid var(--border);padding-left:1.1vw}.connection-main{align-items:center;gap:.55em;font-size:clamp(12px,.95vw,20px);font-weight:800;display:flex}.connection-main.online{color:var(--green-dark)}.connection-main.warning{color:var(--amber)}.online-dot{background:currentColor;border-radius:50%;width:clamp(10px,.75vw,16px);height:clamp(10px,.75vw,16px);position:relative}.online-dot:after{content:"";border-radius:inherit;opacity:0;border:2px solid;animation:2.4s ease-out infinite online-pulse;position:absolute;inset:-45%}.connection-sub{color:var(--muted);align-items:center;gap:.4em;margin-top:.42em;font-size:clamp(9px,.67vw,14px);font-weight:500;line-height:1.35;display:flex}.connection-sub svg{width:1.05em;height:1.05em}.summary-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,.75vw,16px);display:grid}.summary-card{min-height:clamp(58px,4.9vw,90px);box-shadow:var(--shadow);border:1px solid;border-radius:clamp(15px,1.25vw,26px);align-content:center;place-items:center;padding:clamp(9px,.8vw,16px) 1vw;display:grid}.summary-card span{font-size:clamp(13px,1.05vw,23px);font-weight:800;line-height:1.1}.summary-card strong{font-variant-numeric:tabular-nums;margin-top:.17em;font-size:clamp(28px,2.45vw,52px);font-weight:900;line-height:1}.summary-card.mint{color:#047857;background:#effcf8;border-color:#d1fae5}.summary-card.amber{color:#b45309;background:#fff8eb;border-color:#ffedd5}.summary-card.blue{color:#1d4ed8;background:#eff6ff;border-color:#dbeafe}.summary-card.green{color:#047857;background:#effbf5;border-color:#d1fae5}.summary-card.slate{color:#344054;background:#f5f7fa;border-color:#e4e7ec}.summary-card.red{color:#dc2626;background:#fff1f2;border-color:#ffe4e6}.stale-banner{color:#92400e;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;justify-content:center;align-items:center;gap:.6em;min-height:clamp(28px,2.2vw,42px);font-size:clamp(10px,.8vw,16px);font-weight:700;display:flex}.stale-banner svg{width:1.05em;height:1.05em}.jobs-stage{min-height:0;overflow:hidden}.job-list{grid-template-rows:repeat(5,minmax(0,1fr));gap:clamp(8px,.56vw,12px);height:100%;min-height:0;display:grid}.page-enter{animation:.52s cubic-bezier(.2,.75,.24,1) both page-in}.job-row{border:1px solid var(--border);background:#ffffffed;border-radius:clamp(14px,1.1vw,23px);grid-template-columns:minmax(300px,1.65fr) minmax(600px,3.4fr) minmax(250px,1.25fr);align-items:center;gap:clamp(14px,1.2vw,26px);min-height:0;padding:clamp(12px,.82vw,17px) clamp(16px,1.2vw,26px);display:grid;overflow:hidden;box-shadow:0 2px 9px #0f172a06}.job-row.category-problem{background:linear-gradient(90deg,#fff7f7,#fff);border-color:#fca5a5;animation:3.2s ease-in-out infinite problem-breathe}.job-row.category-ready{background:linear-gradient(90deg,#f3fcf8,#fff);border-color:#a7f3d0}.job-row.category-completed{opacity:.86;background:linear-gradient(90deg,#f8fafc,#fff)}.job-identity{min-width:0}.job-no{color:#101828;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(17px,1.18vw,26px);font-weight:900;line-height:1.1;display:block;overflow:hidden}.category-problem .job-no{color:#b42318}.job-title{color:#1d2939;white-space:nowrap;text-overflow:ellipsis;margin-top:.28em;font-size:clamp(14px,.95vw,21px);font-weight:800;line-height:1.16;overflow:hidden}.job-customer{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:.28em;font-size:clamp(11px,.78vw,17px);font-weight:500;line-height:1.15;overflow:hidden}.job-progress{flex-direction:column;justify-content:center;align-self:stretch;min-width:0;display:flex}.stepper{grid-template-columns:repeat(6,1fr);align-items:start;width:100%;display:grid;position:relative}.stepper-track{background:#d9dee7;border-radius:999px;height:clamp(2px,.16vw,4px);position:absolute;top:clamp(13px,1vw,21px);left:8.4%;right:8.4%;overflow:hidden}.stepper-progress{border-radius:inherit;background:linear-gradient(90deg,#10b981,#10b981 48%,#2563eb 100%);height:100%;transition:width .5s;position:relative}.stepper-progress:after{content:"";background:linear-gradient(90deg,#0000,#ffffffe6,#0000);width:24%;animation:5s ease-in-out infinite progress-sheen;position:absolute;inset:0;transform:translate(-140%)}.step{z-index:1;color:#98a2b3;justify-items:center;gap:clamp(2px,.22vw,5px);min-width:0;display:grid;position:relative}.step-node{color:#98a2b3;background:#fff;border:2px solid #d0d5dd;border-radius:50%;place-items:center;width:clamp(32px,2.2vw,46px);height:clamp(32px,2.2vw,46px);display:grid;position:relative}.step-node svg{stroke-width:2.4px;width:48%;height:48%}.step.complete{color:#047857}.step.complete .step-node{background:var(--green);border-color:var(--green);color:#fff}.step.current{color:#175cd3;font-weight:800}.step.current .step-node{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 clamp(3px,.28vw,6px) #dbeafe}.step.current .step-node:after{content:"";border-radius:inherit;opacity:0;border:2px solid #60a5fa;animation:2.2s ease-out infinite current-step-pulse;position:absolute;inset:-38%}.step>span{text-align:center;color:currentColor;white-space:nowrap;width:100%;font-size:clamp(8px,.62vw,13px);font-weight:700}.latest-step{color:#475467;text-align:center;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(90deg,#eef6ff,#f5f9ff);border-radius:999px;align-self:center;width:86%;margin-top:clamp(6px,.42vw,9px);padding:clamp(5px,.34vw,7px) 1em;font-size:clamp(10px,.74vw,16px);font-weight:700;overflow:hidden}.category-problem .latest-step{color:#b42318;background:#fff1f2}.category-ready .latest-step{color:#027a48;background:#ecfdf3}.job-deadline{border-left:1px solid var(--border);flex-direction:column;justify-content:center;align-self:stretch;min-width:0;padding-left:clamp(14px,1.15vw,24px);display:flex}.status-pill{border-radius:999px;justify-content:center;align-self:flex-start;align-items:center;gap:.4em;min-width:clamp(92px,7.5vw,152px);padding:.32em .8em;font-size:clamp(11px,.82vw,17px);font-weight:800;line-height:1.2;display:inline-flex}.status-pill svg{width:1em;height:1em}.status-pill.waiting{color:#b45309;background:#fff3dd}.status-pill.working{color:#1d4ed8;background:#e8f1ff}.status-pill.ready{color:#047857;background:#dcfce7}.status-pill.completed{color:#475467;background:#eef2f6}.status-pill.problem{color:#b42318;background:#fee2e2}.due-date{color:#475467;white-space:nowrap;margin-top:.35em;font-size:clamp(9px,.68vw,14px);font-weight:600}.due-text{color:#039855;white-space:nowrap;margin-top:.12em;font-size:clamp(15px,1.12vw,24px);font-weight:900;line-height:1.15}.due-text.urgent{color:#e11d48}.due-text.overdue{color:#d92d20}.center-state{text-align:center;color:#475467;align-content:center;place-items:center;gap:.5em;height:100%;display:grid}.center-state .state-icon{color:#2563eb;stroke-width:1.4px;width:clamp(52px,4.4vw,88px);height:clamp(52px,4.4vw,88px)}.center-state.error .state-icon{color:#d92d20}.center-state h2{color:#1d2939;margin:0;font-size:clamp(24px,2vw,42px)}.center-state p{margin:0;font-size:clamp(14px,1vw,21px)}.spinning-soft{animation:3s linear infinite soft-spin}.tv-footer{color:#667085;grid-template-columns:1fr auto 1fr;align-items:center;min-height:clamp(22px,1.3vw,27px);font-size:clamp(8px,.64vw,13px);font-weight:600;display:grid}.footer-left,.footer-right{align-items:center;gap:.7em;display:flex}.footer-right{justify-content:flex-end}.footer-separator{color:#cbd5e1}.page-dots{justify-content:center;align-items:center;gap:clamp(5px,.45vw,9px);display:flex}.page-dots span{background:#cbd5e1;border-radius:50%;width:clamp(6px,.5vw,10px);height:clamp(6px,.5vw,10px);transition:transform .25s,background .25s}.page-dots span.active{background:#2563eb;transform:scale(1.22)}.fatal-state{place-items:center;height:100dvh;font-size:2rem;display:grid}@keyframes slide-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes page-in{0%{opacity:0;transform:translate(22px)}to{opacity:1;transform:translate(0)}}@keyframes online-pulse{0%{opacity:.6;transform:scale(.55)}70%,to{opacity:0;transform:scale(1.35)}}@keyframes current-step-pulse{0%{opacity:.6;transform:scale(.72)}75%,to{opacity:0;transform:scale(1.18)}}@keyframes progress-sheen{0%,58%{transform:translate(-140%)}85%,to{transform:translate(520%)}}@keyframes problem-breathe{0%,to{box-shadow:0 0 #dc262600}50%{box-shadow:0 0 1.1vw #dc262617}}@keyframes soft-spin{to{transform:rotate(360deg)}}@media (max-width:1100px){body{overflow:auto}.tv-shell{height:auto;min-height:100dvh;overflow:visible}.tv-header{grid-template-columns:1fr}.brand{border-right:0;flex-direction:row;align-items:baseline;gap:1rem}.header-status{border-left:0;grid-template-columns:1fr 1fr;padding-left:0}.summary-grid{grid-template-columns:repeat(3,1fr)}.job-list{flex-direction:column;display:flex}.job-row{grid-template-columns:1fr}.job-deadline{border-left:0;padding-left:0}.tv-footer{grid-template-columns:1fr;gap:.5rem}.footer-left,.footer-right{justify-content:center}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}