html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; background: rgb(245, 245, 245); color: rgb(51, 51, 51); font-family: Avenir, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { border: 0; background: none; cursor: pointer; }
input { outline: none; }

#app { width: 100%; height: 100vh; min-height: 100vh; overflow: hidden auto; }

.order-page { padding: 4vw 2.66667vw; background-color: rgb(245, 245, 245); min-height: 177.867vw; }

.page-header { text-align: center; margin-bottom: 5.33333vw; display: flex; align-items: center; justify-content: center; position: relative; }
.back-home-btn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6.4vw; height: 6.4vw; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 4vw; color: rgb(51, 51, 51); }
.page-title { font-size: 4.8vw; color: rgb(51, 51, 51); margin: 0; font-weight: 600; }

.search-section { margin-bottom: 4vw; }
.search-container { display: flex; gap: 2.13333vw; max-width: 80vw; margin: 0 auto; }
.search-input { flex: 1 1 0%; height: 10.6667vw; padding: 0 3.2vw; border: 1px solid rgb(235, 237, 240); border-radius: 1.06667vw; font-size: 3.73333vw; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); box-sizing: border-box; }
.search-input::placeholder { color: rgb(153, 153, 153); }
.search-btn { height: 10.6667vw; padding: 0 4.26667vw; background-color: rgb(139, 23, 19); color: rgb(255, 255, 255); border: none; border-radius: 1.06667vw; font-size: 3.73333vw; font-weight: 500; transition: background-color 0.3s; }
.search-btn:hover { background-color: rgb(107, 6, 2); }
.search-btn:active { transform: scale(0.98); }

.order-list { max-width: 106.667vw; margin: 0 auto; }
.order-empty { padding: 6vw 0; text-align: center; color: rgb(153, 153, 153); font-size: 3.73333vw; }

.order-item { background-color: rgb(255, 255, 255); border-radius: 2.66667vw; padding: 4.26667vw 4.8vw; margin-bottom: 2.66667vw; box-shadow: rgba(0, 0, 0, 0.06) 0 0.26667vw 1.6vw; }
.order-no-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 2.13333vw; margin-bottom: 2.4vw; border-bottom: 1px solid rgb(245, 245, 245); }
.order-no-label, .order-no-value { font-size: 3.46667vw; color: rgb(193, 193, 193); }

.order-info-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.66667vw; }
.order-product { font-size: 7.46667vw; font-weight: 800; color: rgb(51, 51, 51); }
.order-status-badge { font-size: 3.46667vw; padding: 1.06667vw 2.66667vw; border-radius: 2.66667vw; font-weight: 600; white-space: nowrap; letter-spacing: 1px; }
.status-processing { background: rgb(255, 243, 224); color: rgb(230, 81, 0); }
.status-success { background: rgb(232, 245, 233); color: rgb(46, 125, 50); }

.order-user-row, .order-time-row { display: flex; align-items: center; padding: 1.33333vw 0; }
.order-label { font-size: 4vw; color: rgb(189, 189, 189); margin-right: 2.66667vw; }
.order-value { font-size: 4vw; color: rgb(51, 51, 51); font-weight: 700; }

.order-actions { display: flex; flex-direction: row; justify-content: center; align-items: stretch; gap: 2.13333vw; padding-top: 2.93333vw; border-top: 1px solid rgb(245, 245, 245); margin-top: 2.4vw; }
.icon-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vw; padding: 0; flex: 1 1 0%; border: none; background: none; cursor: pointer; transition: 0.2s; }
.icon-btn svg { width: 9.6vw; height: 9.6vw; padding: 2.13333vw; border-radius: 50%; flex-shrink: 0; }
.icon-btn span { font-size: 4vw; font-weight: 500; line-height: 1; }
.icon-btn:active { transform: scale(0.95); }

.cancel-order-btn.icon-btn { color: rgb(153, 153, 153); }
.cancel-order-btn.icon-btn svg { background: rgb(240, 240, 240); }
.cancel-order-btn.icon-btn:active svg { background: rgb(224, 224, 224); }

.pay-now-btn.icon-btn { color: rgb(238, 90, 36); }
.pay-now-btn.icon-btn svg { background: rgba(238, 90, 36, 0.8); }
.pay-now-btn.icon-btn:active svg { background: rgba(238, 90, 36, 0.8); }

.report-btn.icon-btn { color: rgb(238, 90, 36); }
.report-btn.icon-btn svg { background: rgba(238, 90, 36, 0.8); }
.report-btn.icon-btn:active svg { background: rgba(238, 90, 36, 0.8); }

.refund-btn.icon-btn { color: rgb(153, 153, 153); }
.refund-btn.icon-btn svg { background: rgb(240, 240, 240); }
.refund-btn.icon-btn:active svg { background: rgb(224, 224, 224); }

.swipe-hint { text-align: center; margin-bottom: 5.33333vw; opacity: 0.7; transition: opacity 0.3s; }
.swipe-hint span { font-size: 3.46667vw; color: rgb(102, 102, 102); }
.swipe-hint:hover { opacity: 1; }