:root{--ink:#0f172a;--text:#1e293b;--muted:#64748b;--line:#e2e8f0;--indigo:#4f46e5;--blue:#2563eb;--cyan:#06b6d4;--green:#059669;--green-dark:#047857;--red:#dc2626;--amber:#d97706;--grad:linear-gradient(120deg, #4f46e5, #2563eb 55%, #0891b2);--grad-green:linear-gradient(120deg, #059669, #10b981);--shadow-sm:0 1px 2px #0f172a0d, 0 1px 3px #0f172a0f;--shadow-md:0 6px 18px -6px #253c782e, 0 2px 6px #0f172a0f;--shadow-lg:0 18px 40px -12px #253c7847, 0 4px 12px #0f172a14;--radius:16px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--text);-webkit-font-smoothing:antialiased;background:#eef1f8;margin:0;font-family:Be Vietnam Pro,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(720px 420px at 12% -6%,#6366f133,#0000 60%),radial-gradient(680px 420px at 88% 0,#06b6d429,#0000 60%),radial-gradient(900px 600px at 50% 115%,#10b9811a,#0000 60%),linear-gradient(#f2f5fc,#eef1f8);animation:22s ease-in-out infinite alternate bgDrift;position:fixed;inset:0}@keyframes bgDrift{0%{transform:translate(0,0)scale(1)}to{transform:translateY(-14px)scale(1.03)}}.app{max-width:1180px;margin:0 auto;padding:22px 16px 64px;animation:.45s both appIn}@keyframes appIn{0%{opacity:0}to{opacity:1}}header{background:var(--grad);color:#fff;box-shadow:var(--shadow-lg);border-radius:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;display:flex;position:relative;overflow:hidden}header:after{content:"";pointer-events:none;background:radial-gradient(420px 200px at 85% -30%,#ffffff47,#0000 65%);position:absolute;inset:0}header h1{letter-spacing:-.4px;text-shadow:0 1px 2px #0f172a2e;margin:0;font-size:27px;font-weight:800}header p{color:#ffffffd9;margin:5px 0 0;font-size:13.5px}header .primary{color:var(--indigo);z-index:1;background:#fff;border:none;border-radius:12px;padding:11px 18px;font-weight:700;position:relative;box-shadow:0 6px 16px #0f172a38}header .primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px #0f172a42}header .msg{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff29;border:1px solid #ffffff59}.sync-badge{background:#ffffff24;border:1px solid #ffffff40;border-radius:999px;align-items:center;gap:7px;padding:4px 11px;font-size:13px;font-weight:600;display:inline-flex;color:#d1fae5!important;margin-top:9px!important}.sync-badge:before{content:"";background:#34d399;border-radius:50%;flex:none;width:8px;height:8px;animation:1.8s ease-in-out infinite pulseDot}@keyframes pulseDot{0%,to{box-shadow:0 0 #34d3998c}50%{box-shadow:0 0 0 6px #34d39900}}nav{z-index:40;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);background:#ffffffc7;border:1px solid #e2e8f0e6;border-radius:999px;flex-wrap:wrap;gap:8px;width:fit-content;max-width:100%;margin:16px 0 20px;padding:8px;display:flex;position:sticky;top:10px}nav button{cursor:pointer;color:#475569;background:0 0;border:1px solid #0000;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;transition:all .22s cubic-bezier(.4,0,.2,1)}nav button:hover{color:var(--indigo);background:#eef2ff;transform:translateY(-1px)}nav button.active{background:var(--grad);color:#fff;box-shadow:0 6px 14px -4px #4f46e58c}button{border:1px solid var(--line);cursor:pointer;color:var(--text);background:#fff;border-radius:10px;padding:8px 14px;font-family:inherit;font-size:14px;transition:all .18s}button:hover{box-shadow:var(--shadow-sm);border-color:#c7d2fe;transform:translateY(-1px)}button:active{transform:translateY(0)scale(.97)}button.primary{background:var(--grad);color:#fff;border:none;font-weight:700;position:relative;overflow:hidden;box-shadow:0 6px 14px -5px #4f46e599}button.primary:after{content:"";background:linear-gradient(105deg,#0000,#ffffff73,#0000);width:55%;height:100%;transition:left .55s;position:absolute;top:0;left:-80%;transform:skew(-20deg)}button.primary:hover:after{left:130%}button.primary:hover{box-shadow:0 10px 20px -6px #4f46e5a6}button.danger{color:var(--red);background:#fff7f7;border-color:#fecaca}button.danger:hover{background:#fef2f2;border-color:#fca5a5}button:disabled{opacity:.55;cursor:wait;transform:none}.small-btn{white-space:nowrap;border-radius:9px;padding:7px 14px;font-size:13px}:focus-visible{outline-offset:2px;outline:3px solid #6366f173}input,select,textarea{width:100%;color:var(--text);background:#fff;border:1.5px solid #cbd5e1;border-radius:10px;padding:9px 11px;font-family:inherit;font-size:14px;transition:border-color .18s,box-shadow .18s}input:hover,select:hover,textarea:hover{border-color:#a5b4fc}input:focus,select:focus,textarea:focus{border-color:var(--indigo);outline:none;box-shadow:0 0 0 4px #6366f129}label{color:#334155;flex-direction:column;gap:6px;font-size:13px;font-weight:600;display:flex}label.full{margin-top:14px}h2{color:var(--ink);letter-spacing:-.2px;margin:22px 0 10px;font-size:19px;font-weight:800}h3{color:var(--ink);margin:13px 0 7px;font-size:15.5px;font-weight:700}.muted{color:var(--muted);font-size:13px}.bad-text{color:var(--red);font-weight:700}.warn-text{color:var(--amber);font-weight:700}.ok-text{color:var(--green-dark);font-weight:700}table{border-collapse:collapse;width:100%;box-shadow:var(--shadow-md);background:#fff;border-radius:14px;font-size:14px;overflow:hidden}th{text-align:left;color:#3730a3;text-transform:none;background:linear-gradient(#eef2ff,#e4e9fb);padding:11px 12px;font-size:13px}td{vertical-align:middle;border-top:1px solid #eef1f6;padding:7px 12px}tbody tr{transition:background .15s}tbody tr:hover{background:#f5f7ff}.msg{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:10px;padding:10px 13px;animation:.3s both msgIn}.msg.error{background:#fef2f2;border-color:#fecaca}@keyframes msgIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.row{flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0;display:flex}.row.end{justify-content:flex-end}.grow{flex:1;min-width:260px}.chips{flex-wrap:wrap;gap:7px;display:flex}.chip{border-radius:999px;padding:7px 15px;font-weight:600;transition:all .2s}.chip.active{background:var(--grad);color:#fff;border-color:#0000;box-shadow:0 5px 12px -4px #4f46e58c}.dash-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.dash-head h2{align-items:center;gap:8px;margin:0;display:flex}.order-grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px;display:grid}.order-card{box-shadow:var(--shadow-sm);background:#fff;border:1px solid #e7ebf3;border-radius:18px;padding:18px 20px 16px;transition:transform .25s cubic-bezier(.34,1.4,.64,1),box-shadow .25s,border-color .25s;animation:.55s cubic-bezier(.22,.9,.3,1) both cardIn;position:relative;overflow:hidden}.order-card:before{content:"";background:var(--grad);height:5px;position:absolute;top:0;left:0;right:0}.order-card.complete:before{background:var(--grad-green)}.order-card.cancelled{opacity:.55}.order-card.cancelled:before{background:#94a3b8}.order-card:hover{box-shadow:var(--shadow-lg);border-color:#c7d2fe;transform:translateY(-4px)}@keyframes cardIn{0%{opacity:0;transform:translateY(16px)scale(.985)}to{opacity:1;transform:none}}.oc-head{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.oc-title{color:var(--ink);letter-spacing:-.2px;font-size:17.5px;font-weight:800}.oc-sub{color:var(--muted);margin-top:3px;font-size:13px}.oc-right{flex-direction:column;align-items:flex-end;gap:5px;display:flex}.due{color:#475569;white-space:nowrap;background:#f1f5f9;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600}.due.near{color:#b45309;background:#fffbeb;border:1px solid #fde68a}.due.over{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;animation:1.6s ease-in-out infinite duePulse}@keyframes duePulse{0%,to{box-shadow:0 0 #dc262659}50%{box-shadow:0 0 0 5px #dc262600}}.oc-pct{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:21px;font-weight:800;line-height:1}.order-card.complete .oc-pct{background:var(--grad-green);-webkit-background-clip:text;background-clip:text}.oc-foot{justify-content:space-between;align-items:center;gap:10px;margin-top:13px;display:flex}.bar{background:#e5eaf3;border-radius:999px;min-width:90px;height:10px;margin:4px 0;overflow:hidden}.bar-fill{background:var(--grad-green);border-radius:999px;height:100%;transition:width .5s cubic-bezier(.22,.9,.3,1)}.bar.slim{height:7px;margin:10px 0 12px}.bar.big{height:16px}.ticks{flex-wrap:wrap;gap:9px;margin-top:13px;display:flex}.tick{cursor:pointer;color:#475569;background:#fbfcfe;border:1.5px solid #dbe2ee;border-radius:999px;align-items:center;gap:9px;padding:8px 14px 8px 8px;font-size:13.5px;font-weight:600;transition:all .22s cubic-bezier(.34,1.4,.64,1);display:inline-flex}.tick:hover{border-color:var(--indigo);transform:translateY(-2px);box-shadow:0 6px 12px -6px #4f46e566}.tick:active{transform:scale(.96)}.tick-box{color:#fff;background:#fff;border:2px solid #c3cedd;border-radius:8px;flex:none;justify-content:center;align-items:center;width:23px;height:23px;font-size:14px;font-weight:900;transition:all .22s;display:inline-flex}.tick.on{border-color:var(--green);color:var(--green-dark);background:linear-gradient(120deg,#ecfdf5,#d1fae5);box-shadow:0 4px 10px -4px #05966973}.tick.on .tick-box{background:var(--grad-green);border-color:#0000;animation:.35s cubic-bezier(.34,1.8,.64,1) both tickPop}@keyframes tickPop{0%{transform:scale(.4)rotate(-14deg)}60%{transform:scale(1.25)rotate(4deg)}to{transform:scale(1)rotate(0)}}.tick-main{text-align:left;flex-direction:column;align-items:flex-start;line-height:1.25;display:flex}.tick-main small{opacity:.78;font-size:11.5px;font-weight:500}.tick-main small.sub-ok{color:var(--green-dark);opacity:1;font-weight:700}.progress-row{align-items:center;gap:12px;margin-top:14px;display:flex}.progress-row .muted{white-space:nowrap;font-weight:600}.progress-row b{color:var(--indigo);text-align:right;min-width:40px;font-size:14px}.progress-row input[type=range]{appearance:none;cursor:pointer;background:#e6eaf2;border:none;border-radius:999px;flex:1;height:8px;padding:0;transition:box-shadow .2s}.progress-row input[type=range]:hover{box-shadow:0 0 0 4px #6366f11f}.progress-row input[type=range]::-webkit-slider-thumb{appearance:none;border:3px solid var(--indigo);background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .18s cubic-bezier(.34,1.6,.64,1),box-shadow .18s;box-shadow:0 3px 8px #4f46e566}.progress-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18);box-shadow:0 5px 12px #4f46e580}.progress-row input[type=range]:active::-webkit-slider-thumb{transform:scale(1.28)}.progress-row input[type=range]::-moz-range-thumb{border:3px solid var(--indigo);background:#fff;border-radius:50%;width:20px;height:20px;box-shadow:0 3px 8px #4f46e566}.progress-row input[type=range]::-moz-range-track{background:#e6eaf2;border-radius:999px;height:8px}.progress-row input[type=range]::-moz-range-progress{background:var(--grad);border-radius:999px;height:8px}.modal-bg{z-index:50;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);overscroll-behavior:contain;background:#0a0f1e8c;height:100dvh;padding:26px 12px;animation:.22s both fadeIn;display:flex;position:fixed;inset:0;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{width:100%;max-width:860px;max-height:94dvh;box-shadow:var(--shadow-lg);background:#fff;border-radius:18px;margin:auto;padding:18px 20px;animation:.34s cubic-bezier(.22,1.1,.36,1) both modalIn;overflow-y:auto}.modal.small{max-width:560px}.modal h2{margin-top:0}@keyframes modalIn{0%{opacity:0;transform:translateY(22px)scale(.975)}to{opacity:1;transform:none}}.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;display:grid}.modal table input{width:92px}.modal table{animation:.35s both msgIn}.stepper{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;display:flex}.step{border:1.5px solid var(--line);color:#475569;background:#f8fafc;border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;transition:all .25s}.step.current{background:var(--grad);color:#fff;border-color:#0000;box-shadow:0 6px 14px -5px #4f46e599}.step.done{color:var(--green-dark);background:#ecfdf5;border-color:#a7f3d0}.step-arrow{color:#94a3b8;font-weight:700}.cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;display:grid}.card{box-shadow:var(--shadow-sm);border-top:4px solid var(--indigo);background:#fff;border-radius:14px;padding:16px}.card.ok{border-top-color:var(--green)}.card.bad{border-top-color:var(--red)}.card.warn{border-top-color:var(--amber)}.card-value{font-size:28px;font-weight:800}.card-label{color:var(--muted);margin-top:2px;font-size:13px}.badge{color:#4338ca;white-space:nowrap;background:#eef2ff;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:600}.toolbar{flex-direction:column;gap:10px;margin-bottom:12px;display:flex}.toolbar>input{max-width:420px}.actions{white-space:nowrap}.actions button{margin-right:6px}.notes{white-space:pre-wrap;max-width:220px}.alerts{flex-direction:column;gap:8px;display:flex}.alert{border-radius:12px;padding:12px 14px;font-size:14px;animation:.3s both msgIn}.alert.danger{background:#fef2f2;border:1px solid #fecaca}.alert.warning{background:#fffbeb;border:1px solid #fde68a}.alert.info{background:#eff6ff;border:1px solid #bfdbfe}.file-btn{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;padding:8px 14px;font-size:14px}.cols{word-break:break-word;background:#fff;border-radius:10px;padding:10px 12px;font-size:13px}.sheet ol{line-height:1.7}.checklist{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;display:grid}label.check{background:#f8fafc;border-radius:8px;flex-direction:row;align-items:center;padding:8px 10px;font-weight:400}label.check input{width:auto}.kho-order{box-shadow:var(--shadow-sm);background:#fff;border-radius:14px;margin-bottom:14px;padding:14px 16px}.kho-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.kho-state{font-weight:700}.step-label{color:#175cd3;margin-top:2px;font-size:13px;font-weight:600}.progress-box{box-shadow:var(--shadow-sm);background:#fff;border-radius:14px;margin-top:14px;padding:16px}.progress-head{justify-content:space-between;margin-bottom:6px;font-size:16px;display:flex}.progress-head b{color:var(--green-dark);font-size:22px}.panels{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;margin-top:14px;display:grid}.panel{box-shadow:var(--shadow-sm);background:#fff;border-radius:14px;padding:16px}.panel h3{margin-top:0}.order-line{border-top:1px solid #f1f5f9;justify-content:space-between;gap:10px;padding:6px 0;font-size:14px;display:flex}.order-line span{color:var(--muted);text-align:right}.check-table{font-size:13px}.ck{white-space:nowrap}.row-cancelled{opacity:.45}@media (width<=560px){.order-grid{grid-template-columns:1fr}header{border-radius:16px;padding:18px}header h1{font-size:23px}nav{border-radius:16px;width:100%}.modal{padding:18px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.oc-head{align-items:stretch}.date-block{color:#fff;text-align:center;background:linear-gradient(160deg,#4f46e5,#06b6d4);border-radius:14px;flex-direction:column;flex:none;justify-content:center;align-items:center;width:78px;padding:8px 4px;display:flex;box-shadow:0 6px 14px #4f46e540}.date-block.near{background:linear-gradient(160deg,#f59e0b,#f97316);box-shadow:0 6px 14px #f59e0b4d}.date-block.today{background:linear-gradient(160deg,#f97316,#ef4444);box-shadow:0 6px 14px #ef44444d}.date-block.over{background:linear-gradient(160deg,#ef4444,#b91c1c);animation:1.6s ease-in-out infinite pulse-red;box-shadow:0 6px 14px #b91c1c59}.date-block.done{background:linear-gradient(160deg,#10b981,#059669);box-shadow:0 6px 14px #10b98140}.date-block.off,.date-block.none{box-shadow:none;background:linear-gradient(160deg,#94a3b8,#64748b)}.db-dow{text-transform:uppercase;letter-spacing:.4px;opacity:.92;font-size:11px;font-weight:700}.db-day{font-size:31px;font-weight:800;line-height:1.08}.db-my{opacity:.92;font-size:11px;font-weight:600}.oc-main{flex-direction:column;flex:1;align-items:flex-start;gap:3px;min-width:0;display:flex}.due-chip{color:#4338ca;background:#eef2ff;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800}.due-chip.near{color:#92400e;background:#fef3c7}.due-chip.today{color:#9a3412;background:#ffedd5}.due-chip.over{color:#b91c1c;background:#fee2e2}.due-chip.done{color:#065f46;background:#d1fae5}.due-chip.off,.due-chip.none{color:#64748b;background:#e2e8f0}.modal.flow{flex-direction:column;display:flex;overflow:hidden}.modal-scroll{flex:1;min-height:0;padding-right:4px;overflow-y:auto}.modal-foot{border-top:1px solid #eceef4;flex:none;margin-top:10px;padding-top:12px}