.hero-art {
  position: relative;
  min-width: 0;
  aspect-ratio: 1.07;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 70% 33%, #264879 0, #172c4b 44%, #111e33 80%);
  color: #fff;
  container-type: inline-size;
}
.art-orbit { position: absolute; border: 1px solid #ffffff0c; border-radius: 50%; z-index: -1; }
.orbit-one { width: 95%; height: 100%; left: 25%; top: -30%; }
.orbit-two { width: 125%; height: 125%; left: 10%; top: -42%; }
.art-label { position: absolute; top: 7%; left: 7%; right: 7%; display: flex; align-items: center; gap: 9px; font-size: 1.35cqw; letter-spacing: 1.5px; color: #becfe7; }
.art-dot { width: 5px; height: 5px; background: #77a9ff; border-radius: 50%; }
.art-label-line { height: 1px; width: 46px; margin-left: auto; background: #788fa34a; }
.terminal { position: absolute; top: 20%; left: 5.5%; width: 87%; padding: 2.4% 1.9% 0; background: linear-gradient(140deg, #465268, #111821 18%, #121822 93%, #526074); border: 1px solid #6e7b8e; border-radius: 13px; box-shadow: 0 24px 40px #030b175c; transform: perspective(1000px) rotateY(-7deg) rotateX(2deg) rotateZ(-2deg); z-index: 2; }
.terminal-camera { position: absolute; top: 1.4%; left: 50%; width: 4px; height: 4px; background: #5d6876; border-radius: 50%; }
.terminal-screen { border: 1px solid #242e3c; border-radius: 5px; background: #f7f9fc; color: #253752; overflow: hidden; }
.pos-top { display: flex; align-items: center; justify-content: space-between; height: 6.5cqw; padding: 0 2.3cqw; background: #fff; border-bottom: 1px solid #e1e7f0; }
.pos-top > span:first-child { display: flex; align-items: center; gap: 5px; font-size: 1.7cqw; font-weight: 700; letter-spacing: 0.3px; }
.pos-top img { width: 3.2cqw; height: 3.2cqw; }
.pos-top b { font-weight: 600; color: #3974d9; }
.pos-service { display: flex; align-items: center; gap: 6px; font-size: 1.2cqw; color: #6b7d93; }
.pos-service i { width: 5px; height: 5px; background: #5da980; border-radius: 50%; }
.pos-body { display: flex; }
.pos-sidebar { width: 7cqw; padding: 2.8cqw 1.3cqw 2cqw; flex-shrink: 0; display: flex; flex-direction: column; gap: 2.2cqw; align-items: center; border-right: 1px solid #e1e7f0; background: #f0f4fa; }
.pos-sidebar > span { display: grid; place-items: center; width: 4.3cqw; height: 4.3cqw; color: #6f8199; }
.pos-sidebar .selected { background: #245ce8; border-radius: 5px; color: #fff; box-shadow: 0 3px 6px #215bea24; }
.pos-sidebar svg { width: 2.3cqw; height: 2.3cqw; }
.pos-sidebar .sidebar-avatar { margin-top: auto; width: 3.5cqw; height: 3.5cqw; border-radius: 50%; font-size: 1.25cqw; background: #dce5f2; font-weight: 600; }
.pos-floor { padding: 2.7cqw; flex: 1; min-width: 0; }
.floor-title { display: flex; align-items: center; justify-content: space-between; }
.floor-title strong { font-size: 2.3cqw; font-weight: 600; }
.floor-title small { display: block; font-size: 1.3cqw; color: #8593a5; margin-top: 0.5cqw; }
.floor-plus { color: #2f64b5; border-radius: 4px; background: #e6edfb; padding: 0.3cqw 0.8cqw; font-size: 2.3cqw; }
.floor-legend { display: flex; gap: 2cqw; margin-top: 2.1cqw; font-size: 1.13cqw; color: #75849a; }
.floor-legend span { display: flex; align-items: center; gap: 0.6cqw; }
.floor-legend i { display: block; width: 0.9cqw; height: 0.9cqw; border-radius: 50%; }
.dot-blue { background: #8bb2f8; }
.dot-mint { background: #92cbb8; }
.dot-amber { background: #d7bb7c; }
.floor-tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.7cqw 3.7cqw; padding: 3.2cqw 1.5cqw; }
.dining-table { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 11.3cqw; border-radius: 7px; border: 1px solid; z-index: 1; }
.dining-table::before, .dining-table::after { content: ''; position: absolute; z-index: -1; width: 45%; height: 0.9cqw; left: 28%; background: inherit; border: 1px solid; border-color: inherit; border-radius: 3px 3px 0 0; top: -1.2cqw; }
.dining-table::after { top: auto; bottom: -1.2cqw; transform: rotate(180deg); }
.dining-table b { font-size: 2.3cqw; font-weight: 600; }
.dining-table small { font-size: 1.25cqw; margin-top: 0.4cqw; }
.dining-table > span { font-size: 1.35cqw; margin-top: 1.1cqw; opacity: 0.75; }
.in-service { background: #e2edff; border-color: #b7d0f9; color: #2d609e; }
.available { background: #e7f4ed; border-color: #bfdfcf; color: #487b68; }
.check-ready { background: #f7eddb; border-color: #e6d4ac; color: #876c37; }
.floor-bottom { display: flex; align-items: center; gap: 2.6cqw; font-size: 1.2cqw; padding-top: 1.2cqw; }
.floor-bottom > span:first-child { color: #3571c2; background: #e8effa; border-radius: 4px; padding: 0.7cqw 1cqw; }
.floor-bottom i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #437bd4; margin-right: 3px; }
.terminal-chin { text-align: center; font-size: 1.1cqw; color: #91a0b5; height: 3cqw; padding-top: 1cqw; letter-spacing: 1.7px; }
.terminal-stand { position: absolute; width: 22%; height: 18%; left: 33%; top: 70%; background: linear-gradient(100deg, #344356, #647180 48%, #394655 75%); transform: skew(-7deg); clip-path: polygon(15% 0, 90% 0, 100% 100%, 0 100%); }
.terminal-base { position: absolute; width: 40%; height: 2.6%; left: 24%; top: 85%; border-radius: 50% 50% 20% 20%; border-top: 2px solid #728297; background: #49596a; box-shadow: 0 17px 25px #020d207a; }
.floating-report { position: absolute; z-index: 3; width: 41%; right: 4.5%; bottom: 9%; padding: 3cqw; background: #fff; color: #1c3152; border: 1px solid #fff; border-radius: 9px; transform: rotate(3deg); box-shadow: 0 14px 40px #07132c45; }
.report-head { display: flex; align-items: center; gap: 1.2cqw; }
.report-icon { display: grid; place-items: center; width: 4.5cqw; height: 4.5cqw; background: #eff4ff; color: #3574e5; border-radius: 5px; }
.report-icon svg { width: 2.8cqw; height: 2.8cqw; }
.report-head > span:nth-child(2) { font-size: 1.1cqw; font-weight: 700; letter-spacing: 0.4px; }
.report-head small { display: block; color: #8190a6; font-size: 1.2cqw; font-weight: 400; margin-top: 0.6cqw; letter-spacing: 0; }
.report-head > svg { width: 2.3cqw; height: 2.3cqw; margin-left: auto; color: #6d85ad; }
.report-total { margin-top: 3cqw; }
.report-total > span { display: flex; align-items: center; justify-content: space-between; font-size: 1.25cqw; color: #6c7c92; }
.report-total small { font-size: 0.95cqw; color: #8794a5; }
.report-total strong { display: block; font-size: 4.8cqw; margin-top: 0.9cqw; font-weight: 600; letter-spacing: -1px; }
.report-total strong span { color: #91a0b8; font-size: 3.4cqw; }
.mini-bars { display: flex; align-items: flex-end; gap: 1.2cqw; height: 9.5cqw; margin-top: 2cqw; padding-bottom: 0.5cqw; border-bottom: 1px solid #e7edf5; background: repeating-linear-gradient(to bottom, white, white 31%, #f1f5fa 32%, white 33%); }
.mini-bars i { flex: 1; background: #c3d6fd; height: var(--bar); border-radius: 2px 2px 0 0; }
.mini-bars i:nth-child(n+6) { background: #6292f2; }
.mini-bars i:last-child { background: #275fe7; }
.report-hours { display: flex; justify-content: space-between; font-size: 0.9cqw; color: #8391a7; margin-top: 0.9cqw; }
.art-caption { position: absolute; bottom: 3%; left: 7%; right: 7%; display: flex; justify-content: space-between; align-items: center; font-size: 1.1cqw; color: #c2cde0; }
.art-caption small { font-size: 0.95cqw; color: #95a6bd; }
.workflow-art { position: relative; min-width: 0; aspect-ratio: 1.5; border-radius: 8px; overflow: hidden; background: #eaf0ee; color: #243955; container-type: inline-size; }
.workflow-kicker { position: absolute; top: 25px; left: 28px; font-size: 8px; letter-spacing: 1.3px; font-weight: 600; color: #617873; }
.order-card { position: absolute; z-index: 2; top: 22%; left: 7%; width: 53%; background: white; border: 1px solid #dce6e0; border-radius: 6px; box-shadow: 0 12px 22px #1e39300c; transform: rotate(-2deg); padding: 3cqw; }
.order-card-title { display: flex; align-items: center; gap: 1.3cqw; padding-bottom: 2.5cqw; border-bottom: 1px solid #edf0f3; }
.order-card-title > svg { width: 3cqw; height: 3cqw; color: #367ce0; }
.order-card-title b { font-size: 2.4cqw; font-weight: 600; }
.order-card-title > span { font-size: 1.4cqw; color: #748299; margin-left: auto; background: #f0f4f8; border-radius: 3px; padding: 0.8cqw; }
.order-line { display: flex; align-items: flex-start; gap: 2cqw; padding-top: 3cqw; }
.order-line > b { display: grid; place-items: center; font-size: 1.7cqw; font-weight: 400; background: #f0f4f8; border-radius: 3px; width: 3.2cqw; height: 3.2cqw; }
.order-line > span { font-size: 1.9cqw; line-height: 1.8; }
.order-line small { display: block; font-size: 1.3cqw; color: #7b8797; }
.order-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #edf0f3; margin-top: 3cqw; padding-top: 2cqw; font-size: 1.5cqw; color: #49816c; }
.order-card-footer svg { width: 2.5cqw; height: 2.5cqw; }
.kitchen-card { position: absolute; width: 36%; top: 35%; right: 5%; background: #213c35; color: #fff; border-radius: 6px; padding: 3cqw; box-shadow: 0 10px 20px #244a3322; transform: rotate(3deg); }
.kitchen-card > div { display: flex; align-items: center; gap: 1cqw; font-size: 1.1cqw; color: #bfddd0; letter-spacing: 0.8px; }
.kitchen-dot { width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: #8ec7ad; }
.kitchen-card > strong { display: block; font-size: 3cqw; margin-top: 2.4cqw; font-weight: 600; }
.kitchen-status { display: inline-block; margin-top: 1.5cqw; background: #39574c; color: #d7ebdf; padding: 0.8cqw 1cqw; border-radius: 3px; font-size: 1.4cqw; }
.kitchen-card p { font-size: 1.7cqw; line-height: 1.9; margin-top: 2.4cqw; }
.kitchen-card > small { display: block; color: #bdcfc6; font-size: 1.2cqw; margin-top: 2.4cqw; padding-top: 1.7cqw; border-top: 1px solid #ffffff1a; }
.flow-connector { position: absolute; left: 57%; top: 28%; display: flex; align-items: center; color: #97b6a7; transform: rotate(17deg); }
.flow-connector span { width: 4cqw; border-top: 1px dashed; }
.flow-connector svg { width: 4cqw; height: 4cqw; }
.illustration-note { position: absolute; bottom: 19px; left: 28px; font-size: 8px; color: #6e827c; }
.retail-art { background: #f0ece4; }
.retail-art .workflow-kicker, .retail-art .illustration-note { color: #837c6c; }
.catalog-card { position: absolute; top: 23%; left: 6%; width: 68%; padding: 3cqw; background: white; border: 1px solid #e5dfd4; border-radius: 6px; transform: rotate(-2deg); box-shadow: 0 8px 25px #4a3c200a; }
.catalog-title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 2cqw; border-bottom: 1px solid #eee; }
.catalog-title b { font-size: 2.5cqw; font-weight: 600; }
.catalog-title > span { font-size: 1.5cqw; color: #8f836d; }
.catalog-row { display: flex; align-items: center; gap: 2cqw; margin-top: 2cqw; }
.product-swatch { display: grid; place-items: center; width: 6.5cqw; height: 6.5cqw; font-family: WebSys Serif, Georgia, serif; font-style: italic; font-size: 3cqw; border-radius: 4px; }
.swatch-coffee { background: #efe3d5; color: #8b6453; }
.swatch-tea { background: #ddebd9; color: #6c805b; }
.swatch-mug { background: #e5e6eb; color: #7c7d89; }
.catalog-row b { font-size: 1.9cqw; font-weight: 600; }
.catalog-row small { display: block; font-size: 1.4cqw; color: #88929e; margin-top: 0.6cqw; font-weight: 400; }
.catalog-row > strong { margin-left: auto; text-align: right; font-size: 2.2cqw; font-weight: 600; }
.barcode-card { position: absolute; right: 5%; bottom: 20%; width: 30%; background: #fdfbf7; border: 1px solid #e1d8c8; border-radius: 7px; padding: 3cqw 2cqw; box-shadow: 0 8px 20px #59422113; transform: rotate(4deg); text-align: center; }
.barcode-card > svg { width: 4cqw; height: 4cqw; color: #8c795c; }
.barcode-card b { display: block; font-size: 1.6cqw; margin: 1.2cqw 0; }
.barcode { height: 5cqw; width: 85%; margin: 2cqw auto; background: repeating-linear-gradient(90deg, #364050 0px, #364050 1px, transparent 1px, transparent 3px, #364050 3px, #364050 6px, transparent 6px, transparent 8px, #364050 8px, #364050 9px, transparent 9px, transparent 11px); }
.barcode-card small { display: block; font-size: 1.15cqw; color: #958670; line-height: 1.6; }
.reports-art { background: #e9eef7; }
.reports-art .workflow-kicker, .reports-art .illustration-note { color: #7687a3; }
.locations-report { position: absolute; top: 21%; left: 10%; right: 10%; border: 1px solid #d2ddef; border-radius: 7px; background: #fff; padding: 3.5cqw; box-shadow: 0 10px 24px #1837610c; transform: rotate(-1.5deg); }
.locations-title { display: flex; align-items: center; gap: 1.5cqw; }
.locations-title img { width: 3.5cqw; height: 3.5cqw; }
.locations-title b { font-size: 2cqw; font-weight: 600; }
.locations-title > span { font-size: 1.3cqw; color: #7f90a6; margin-left: auto; }
.report-summary { display: flex; align-items: center; justify-content: space-between; margin: 3.8cqw 0 3cqw; }
.report-summary > span { font-size: 1.8cqw; }
.report-summary small { display: block; font-size: 1.2cqw; color: #8090a3; margin-top: 0.7cqw; }
.report-summary > b { font-size: 3.6cqw; font-weight: 600; }
.location-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.4cqw; font-size: 1.7cqw; margin-top: 2.5cqw; }
.location-line > strong { font-weight: 600; }
.location-line > i { position: relative; width: 100%; height: 2cqw; border-radius: 2px; background: #eff3f9; overflow: hidden; }
.location-line > i::after { position: absolute; content: ''; width: var(--width); height: 100%; left: 0; top: 0; background: #7097e9; }
.location-line + .location-line > i::after { background: #a2bcea; }
.report-access { display: flex; align-items: center; gap: 1cqw; font-size: 1.2cqw; color: #7f90a6; margin-top: 3cqw; padding-top: 2cqw; border-top: 1px solid #edf0f6; }
.report-access svg { width: 2.6cqw; height: 2.6cqw; }
@media (max-width: 1150px) {
  .hero-art { aspect-ratio: 0.94; }
  .terminal { top: 25%; }
  .terminal-stand { top: 67%; }
  .terminal-base { top: 83%; }
  .floating-report { bottom: 11%; }
}
@media (max-width: 900px) {
  .hero-art { aspect-ratio: 0.73; }
  .art-label { top: 10%; font-size: 1.7cqw; }
  .terminal { top: 28%; left: 4%; width: 92%; }
  .terminal-stand { top: 63%; height: 13%; }
  .terminal-base { top: 75%; }
  .floating-report { bottom: 11%; right: 7%; width: 49%; padding: 4cqw; }
  .report-total strong { font-size: 5.5cqw; }
  .report-head > span:nth-child(2) { font-size: 1.35cqw; }
  .report-head small { font-size: 1.5cqw; }
  .report-total > span { font-size: 1.65cqw; }
  .report-total small { font-size: 1.25cqw; }
  .art-caption { bottom: 4%; flex-direction: column; align-items: flex-start; gap: 7px; font-size: 1.65cqw; }
  .art-caption small { font-size: 1.35cqw; }
  .workflow-art { aspect-ratio: 1.5; }
}
@media (max-width: 650px) {
  .hero-art { aspect-ratio: 1.04; border-radius: 8px; }
  .art-label { top: 7%; font-size: 1.55cqw; }
  .terminal { top: 20%; left: 5.5%; width: 87%; }
  .terminal-stand { top: 71%; height: 15%; }
  .terminal-base { top: 85%; }
  .floating-report { width: 43%; right: 4.5%; bottom: 11%; padding: 3cqw; }
  .report-total strong { font-size: 4.8cqw; }
  .report-total > span { font-size: 1.3cqw; }
  .report-total small { font-size: 1.1cqw; }
  .report-head > span:nth-child(2) { font-size: 1.1cqw; }
  .report-head small { font-size: 1.2cqw; }
  .art-caption { flex-direction: row; align-items: center; gap: 0; bottom: 3%; font-size: 1.15cqw; }
  .art-caption small { font-size: 1.05cqw; }
  .workflow-art { aspect-ratio: 1.22; }
  .workflow-kicker { left: 18px; top: 20px; font-size: 6.5px; letter-spacing: 1px; }
  .order-card { top: 24%; left: 6%; width: 55%; padding: 4cqw; }
  .order-line { padding-top: 4cqw; }
  .order-line > span { font-size: 2.15cqw; }
  .order-line small { font-size: 1.5cqw; }
  .order-card-title b { font-size: 2.7cqw; }
  .kitchen-card { top: 39%; right: 4%; width: 37%; padding: 3.5cqw; }
  .kitchen-card > div { font-size: 1.2cqw; }
  .kitchen-card p { font-size: 1.9cqw; }
  .kitchen-card > small { font-size: 1.3cqw; }
  .illustration-note { left: 18px; bottom: 18px; font-size: 6.5px; }
  .catalog-card { top: 26%; padding: 4cqw; }
  .catalog-title b { font-size: 3cqw; }
  .catalog-row { margin-top: 3cqw; }
  .catalog-row b { font-size: 2.1cqw; }
  .catalog-row small { font-size: 1.6cqw; }
  .barcode-card { bottom: 22%; width: 32%; }
  .barcode-card b { font-size: 1.8cqw; }
  .barcode-card small { font-size: 1.4cqw; }
  .locations-report { top: 25%; left: 7%; right: 7%; padding: 5cqw; }
  .locations-title b { font-size: 2.5cqw; }
  .report-summary { margin: 4cqw 0; }
  .report-summary > span { font-size: 2.1cqw; }
  .location-line { font-size: 2cqw; margin-top: 3.5cqw; }
  .report-access { font-size: 1.4cqw; }
}