/* The sales panel follows the supplied Shopee composition; motion tells the order story. */
html{scroll-behavior:auto}
.fulfillment-story{position:relative;isolation:isolate;overflow:clip}
.fulfillment-story .hero{padding-bottom:24px}
.commerce-stage{height:555px}
.monitor-scene{width:70%;left:9%;top:30px;transform:rotate(-2deg);transition:filter .4s}
.monitor-scene:hover{filter:drop-shadow(0 9px 14px #07528b13)}
.shopee-dashboard{aspect-ratio:1.95;background:#f4f6f8;color:#42474b;font-family:Arial,sans-serif;display:flex;flex-direction:column;text-align:left;container-type:inline-size}
.shopee-header{position:relative;background:#ee4d2d;height:34%;flex-shrink:0;color:#fff;text-align:center;padding:2cqw 2.5cqw 0}
.shopee-nav{display:flex;align-items:center;justify-content:space-between;gap:1cqw;font-size:1.1cqw;line-height:1.3}
.shopee-nav>span:first-child{width:31%;text-align:left;white-space:nowrap}
.shopee-nav>span:first-child b{margin:0 .6cqw;font-size:1.7cqw;font-weight:400}
.shopee-wordmark{display:flex;align-items:center;gap:.7cqw;font-size:3cqw;letter-spacing:-.06em}
.shopee-wordmark .icon{width:3.8cqw;height:3.8cqw}
.shopee-filter{font-size:1cqw;border:1px solid #ffffff60;padding:.6cqw .9cqw;border-radius:.3cqw;margin-left:5cqw}
.shopee-title{display:block;font-size:2.7cqw;margin-top:2.8cqw;font-weight:600;letter-spacing:-.015em}
.shopee-date{display:none}
.shopee-total-card{position:absolute;left:29%;right:29%;top:12.9cqw;border-radius:.7cqw;background:#fff;padding:1.1cqw .7cqw 1cqw;box-shadow:0 1.6cqw 2.8cqw #33333314;z-index:1}
.shopee-dashboard .sales-total{margin:0;color:#ee4d2d;font:700 5.5cqw/1.15 Arial,sans-serif;letter-spacing:-.045em;white-space:nowrap;font-variant-numeric:tabular-nums}
.shopee-dashboard .sales-added{display:block;color:#198459;font:400 1.15cqw/1.5 Arial,sans-serif;margin-top:.45cqw}
.shopee-panels{padding:5.3cqw 2cqw 1cqw;display:grid;grid-template-columns:24fr 43fr 30fr;gap:1cqw;flex:1;min-height:0}
.shopee-panels>div{background:#fff;min-width:0;box-shadow:0 .2cqw .9cqw #0a223307}
.shopee-panels h3{font-family:Arial,sans-serif;font-size:1.45cqw;font-weight:500;letter-spacing:0;margin:0;padding:1.5cqw 1.35cqw;line-height:1.2;color:#41464b;white-space:nowrap}
.shopee-metrics{display:flex;flex-direction:column}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);flex:1}
.metrics-grid>div{border-top:1px solid #f0f1f3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.8cqw .4cqw;gap:1cqw}
.metrics-grid>div:nth-child(even){border-left:1px solid #f0f1f3}
.metrics-grid span{font-size:1.15cqw;color:#ee4d2d;line-height:1.2}
.metrics-grid strong{font-size:1.6cqw;font-weight:400;font-variant-numeric:tabular-nums}
.shopee-trend{padding:0 .8cqw}
.shopee-trend h3{padding-left:.55cqw}
.shopee-chart-legend{display:flex;justify-content:space-between;font-size:1cqw;color:#77818b;padding:.8cqw .5cqw 1cqw}
.shopee-chart-legend i,.shopee-chart-legend b{display:inline-block;vertical-align:middle;width:1.4cqw;height:.3cqw;background:#ee4d2d;margin-right:.5cqw}
.shopee-chart-legend b{background:#b2eadf}
.shopee-chart-wrap{display:flex;align-items:stretch;gap:.8cqw}
.shopee-chart-y{display:flex;flex-direction:column;justify-content:space-between;padding:.6cqw 0 1.1cqw;font-size:1cqw;color:#727c85;text-align:right;width:2.8cqw;flex-shrink:0}
.shopee-dashboard .sales-chart{width:calc(100% - 3.6cqw);height:auto;margin:0;overflow:visible}
.shopee-dashboard .chart-grid{stroke:#e8edf1;stroke-dasharray:none}
.shopee-dashboard .chart-line{stroke:#ee4d2d;stroke-width:3;fill:none;stroke-linejoin:round;stroke-linecap:round}
.chart-yesterday{stroke:#b2eadf;stroke-width:2;fill:none}
.shopee-dashboard .chart-tip{fill:#ee4d2d;stroke:#fff;stroke-width:2}
.shopee-dashboard .chart-axis{font-size:1cqw;margin:.1cqw .1cqw 0 3.7cqw;color:#7a828a}
.shopee-product{display:flex;align-items:center;gap:.7cqw;min-height:4.7cqw;padding:.8cqw 1cqw;border-top:1px solid #f2f3f5;font-size:1.06cqw}
.shopee-product:nth-child(even){background:#fbfbfc}
.shopee-product>b{font-weight:400;color:#ee4d2d;width:1cqw}
.shopee-product>.icon{width:2.8cqw;height:2.8cqw;color:#19618c;flex-shrink:0}
.shopee-product>span{flex:1;line-height:1.25}
.shopee-product small{display:block;font-size:.82cqw;color:#83929b;margin-top:.35cqw}
.shopee-product>strong{font-size:.97cqw;white-space:nowrap;color:#ee4d2d;font-weight:400}
.shopee-panel-note{font-size:.9cqw;color:#7b8992;text-align:center;padding:1cqw 0 .8cqw}
.commerce-stage .parcel-art{width:31%;right:-1%;bottom:73px}
.commerce-stage .stage-seller{left:3%}
.commerce-stage .stage-cofeos{right:3%}
.sale-pop-first{top:4px;left:0}
.sale-pop-second{top:78px;right:-2%}
.sale-pop,.commerce-stage:hover .sale-pop{animation:none;translate:none}

/* A measured SVG route joins two real layout anchors, without intercepting input. */
.handoff-layer{position:absolute;inset:0;pointer-events:none;z-index:5;visibility:hidden}
.story-ready .handoff-layer{visibility:visible}
.handoff-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.handoff-track{stroke:#ebad783b;stroke-width:1.5;stroke-dasharray:4 7;fill:none}
.handoff-line{stroke:#e97824;stroke-width:2;fill:none;stroke-linecap:round}
.handoff-value{position:absolute;left:0;top:0;display:flex;align-items:center;gap:11px;padding:12px 17px;border:1px solid #f2ba8e;border-radius:14px;background:#fffaf5;box-shadow:0 9px 30px #b5713020;color:#ac4e0b;opacity:0;white-space:nowrap;will-change:transform}
.handoff-value>.icon{width:24px;height:24px;color:#e06517}
.handoff-value small{display:block;font-size:.625rem;color:#a56337;line-height:1.35}
.handoff-value strong{display:block;font-size:1rem;line-height:1.5;font-variant-numeric:tabular-nums}
.handoff-arrow{font-style:normal;margin-left:5px;font-size:1.2rem}
.fulfillment-story .operation{padding-top:98px}
.operation-visual{isolation:auto}
.operation-ticket{z-index:6;background:#fff;transition:border-color .35s,box-shadow .35s;min-height:73px}
.operation-ticket.is-received{border-color:#a5d9c0;box-shadow:0 12px 35px #14754c14}
.operation-ticket .ticket-code{color:#24764e;font-weight:600;white-space:nowrap}
.warehouse-scene{position:relative;width:114%;margin:0 -7%;aspect-ratio:4/3;isolation:isolate}
.warehouse-scene .warehouse-art{display:block;width:100%;height:auto;margin:0;filter:drop-shadow(0 22px 20px #164e730b);animation:none;transition:none;transform:none;translate:none;scale:none}
.operation-visual:hover .warehouse-art{transform:none}
.warehouse-scene .warehouse-glow{left:0;top:28%;height:70%;z-index:-1}
.conveyor-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.45}
.conveyor-parcel{position:absolute;left:0;top:0;width:19%;height:auto;aspect-ratio:1;will-change:transform;opacity:0;pointer-events:none;z-index:2}
.conveyor-parcel img{display:block;width:100%;height:auto;filter:drop-shadow(2px 5px 3px #173e5e18)}
.conveyor-parcel>span{position:absolute;left:50%;top:0;transform:translate(-50%,-5%);padding:5px 9px;font-size:.6875rem;line-height:1.2;font-weight:600;white-space:nowrap;color:#07528b;background:#fffffff5;border:1px solid #d5e6f2;border-radius:7px;box-shadow:0 4px 12px #07395612}
.dispatch-receipt{position:absolute;left:65%;top:91%;display:flex;align-items:center;gap:10px;z-index:4;padding:12px 15px;border-radius:13px;border:1px solid #bfe3ce;background:#f4fff8;box-shadow:0 8px 25px #13754718;white-space:nowrap;color:#148350;pointer-events:none;opacity:0}
.dispatch-check{display:grid;place-items:center;width:32px;height:32px;background:#e1f5e8;border-radius:50%}
.dispatch-check .icon{width:21px;height:21px}
.dispatch-value{display:block;font:600 1.25rem/1.3 'DM Sans',sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dispatch-receipt div>span{display:block;font-size:.625rem;margin-top:3px;color:#3a7f5b}
.operations-track{margin-top:43px}
.operation-live-note{margin-top:16px}
.fulfillment-story:not(.story-ready) .parcel-one{opacity:1;left:63%;top:53%}
.fulfillment-story:not(.story-ready) .dispatch-receipt{opacity:1}
@media(min-width:768px) and (max-width:1100px){.commerce-stage{height:500px}.monitor-scene{width:74%;left:6%;top:40px}.commerce-stage .parcel-art{bottom:80px}.sale-pop-second{right:0;top:75px;min-width:0}.sale-pop-second div>span{max-width:150px}.dispatch-receipt{padding:10px 12px;gap:7px}.dispatch-value{font-size:1.05rem}.dispatch-receipt div>span{font-size:.5625rem}}
@media(min-width:768px) and (max-width:900px){.commerce-stage{height:445px}.sale-pop-second{top:68px}.sale-pop strong{font-size:.75rem}.sale-pop div>span{font-size:.625rem}.warehouse-scene{width:calc(100% + 32px);margin-inline:-16px}.dispatch-receipt{left:62%}}
@media(max-width:767px){
  .fulfillment-story .hero{padding-bottom:26px}.commerce-stage{width:calc(100% - 24px);height:330px;margin-top:25px}.monitor-scene{left:2%;width:91%;top:47px;transform:rotate(-2deg)}
  .commerce-stage .parcel-art{width:31%;right:-1%;bottom:56px}.commerce-stage .stage-side{display:none}
  .sale-pop-first{top:6px;left:3%;min-width:0}.sale-pop-second{top:auto;bottom:60px;left:3%;right:auto;min-width:0}.sale-pop-second div>span{max-width:none}
  .shopee-header{padding-top:1.6cqw}.shopee-title{margin-top:2.4cqw}.shopee-total-card{top:12.7cqw}.shopee-panels{padding-top:5.5cqw}.shopee-product{min-height:4.6cqw}.shopee-panel-note{font-size:1.15cqw}
  .fulfillment-story .operation{padding-top:82px;gap:39px}.operation-ticket{max-width:300px;min-height:68px}.operation-ticket .ticket-code{font-size:.6875rem}.warehouse-scene{width:100%;margin:12px 0 0}.conveyor-parcel{width:20%}.conveyor-parcel>span{padding:4px 6px;font-size:.5rem;border-radius:5px}
  .dispatch-receipt{left:61%;top:95%;padding:9px 10px;gap:7px;border-radius:10px}.dispatch-check{width:23px;height:23px}.dispatch-check .icon{width:17px;height:17px}.dispatch-value{font-size:1rem}.dispatch-receipt div>span{font-size:.5rem;margin-top:1px}
  .handoff-value{padding:9px 12px;gap:8px;border-radius:11px}.handoff-value>.icon{width:20px;height:20px}.handoff-value small{font-size:.5625rem}.handoff-value strong{font-size:.875rem}.handoff-arrow{font-size:1rem}
  .operations-track{margin-top:44px}.operation-live-note{font-size:.6875rem;padding-inline:7px}
}
@media(min-width:500px) and (max-width:767px){.commerce-stage{height:418px;max-width:550px}.commerce-stage .parcel-art{bottom:52px}.sale-pop-second{bottom:70px}.warehouse-scene{width:106%;margin-inline:-3%}}
@media(max-width:374px){.commerce-stage{height:290px}.commerce-stage .parcel-art{bottom:49px}.sale-pop-second{bottom:52px}.commerce-stage .stage-side strong{font-size:.625rem}.dispatch-receipt{padding:8px;gap:5px;left:61%}.dispatch-value{font-size:.875rem}.dispatch-check{width:20px;height:20px}.dispatch-receipt div>span{font-size:.4375rem}.conveyor-parcel>span{font-size:.4375rem}.handoff-value{padding:8px 10px}.operation-ticket{padding:13px 12px;gap:9px}}
@media(prefers-reduced-motion:reduce){.handoff-layer,.conveyor-motion{display:none}.monitor-scene:hover{filter:none}.operation-ticket{transition:none}.conveyor-parcel{will-change:auto}.dispatch-receipt{opacity:1}}