:root { --brand:#e02e24; --ink:#242424; --muted:#858585; --line:#e8e8e8; --green:#168454; --amber:#a55b00; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f3f3f3; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button { font:inherit; }
.orders-header {
    position:sticky; top:0; z-index:30; display:grid; grid-template-columns:48px 1fr 48px;
    width:min(760px,100%); height:52px; margin:auto; align-items:center; color:white; background:var(--brand);
}
.orders-header strong { text-align:center; font-size:16px; }
.orders-header a { display:grid; height:48px; place-items:center; color:white; text-decoration:none; font-size:25px; }
.orders-page { width:min(760px,100%); min-height:calc(100vh - 52px); margin:auto; padding-bottom:36px; background:#f5f5f5; }
.user-summary { display:grid; grid-template-columns:48px 1fr auto; gap:11px; padding:18px 16px; align-items:center; color:white; background:#c82720; }
.user-summary > div { display:grid; width:46px; height:46px; place-items:center; color:#7d211b; border-radius:50%; background:#ffe2d8; font-weight:900; }
.user-summary p { margin:0; min-width:0; }
.user-summary span,.user-summary strong,.user-summary code { display:block; }
.user-summary span { color:#ffc9c4; font-size:9px; }
.user-summary strong { margin-top:2px; font-size:15px; }
.user-summary code { margin-top:3px; overflow:hidden; color:#ffd9d6; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.user-summary a { padding:7px 11px; color:#8b211b; border-radius:5px; background:#ffe86d; text-decoration:none; font-size:11px; font-weight:800; }
.order-tabs { position:sticky; top:52px; z-index:20; display:grid; grid-template-columns:repeat(4,1fr); background:white; border-bottom:1px solid var(--line); }
.order-tabs button { position:relative; height:47px; color:#666; border:0; background:white; font-size:12px; }
.order-tabs button.active { color:var(--brand); font-weight:800; }
.order-tabs button.active::after { content:""; position:absolute; left:32%; right:32%; bottom:0; height:3px; border-radius:3px; background:var(--brand); }
.order-list { display:grid; gap:9px; padding:10px; }
.order-card { overflow:hidden; border-radius:8px; background:white; }
.order-card-head { display:flex; padding:11px 12px; align-items:center; justify-content:space-between; border-bottom:1px solid #f1f1f1; }
.order-card-head code { color:#888; font-size:9px; }
.order-status { color:var(--amber); font-size:11px; font-weight:800; }
.order-status.paid { color:var(--green); }
.order-status.closed { color:#888; }
.order-product { display:grid; grid-template-columns:74px 1fr auto; gap:10px; padding:12px; background:#fafafa; }
.order-product { color:inherit; text-decoration:none; }
.order-product img { width:74px; height:74px; object-fit:cover; border-radius:6px; background:#eee; }
.product-copy { min-width:0; }
.product-copy strong { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:13px; line-height:1.4; }
.product-copy span { display:block; margin-top:7px; color:#999; font-size:9px; }
.order-price { align-self:end; color:var(--brand); font-size:15px; font-weight:900; }
.team-progress { display:grid; grid-template-columns:1fr auto; gap:8px; padding:11px 12px; align-items:center; border-bottom:1px solid #f2f2f2; }
.team-progress p { margin:0; color:#777; font-size:10px; }
.team-progress p strong { display:block; margin-bottom:4px; color:#333; font-size:12px; }
.team-progress button { padding:6px 9px; color:#555; border:1px solid #ddd; border-radius:5px; background:white; font-size:10px; }
.order-actions { display:flex; gap:7px; padding:10px 12px; justify-content:flex-end; }
.order-actions button { min-width:74px; padding:8px 10px; border:1px solid #ddd; border-radius:5px; background:white; font-size:11px; }
.order-actions button.primary { color:white; border-color:var(--brand); background:var(--brand); }
.order-actions button.refund { color:#a84d00; border-color:#ffd091; background:#fff9ed; }
.order-skeleton { height:210px; border-radius:8px; background:linear-gradient(100deg,#e9e9e9 20%,#f7f7f7 40%,#e9e9e9 60%); background-size:200%; animation:shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position-x:-200%; } }
.empty-orders { margin:12px; padding:70px 20px; text-align:center; border-radius:8px; background:white; }
.empty-orders b,.empty-orders span { display:block; }
.empty-orders span { margin:8px 0 18px; color:#999; font-size:11px; }
.empty-orders a { display:inline-block; padding:9px 18px; color:white; border-radius:5px; background:var(--brand); text-decoration:none; font-size:12px; }
.load-more { display:block; margin:8px auto; padding:9px 22px; color:#666; border:1px solid #ddd; border-radius:5px; background:white; }
.load-more[hidden],.empty-orders[hidden] { display:none; }
.modal { position:fixed; inset:0; z-index:80; display:none; place-items:center; padding:18px; background:rgba(0,0,0,.55); }
.modal.open { display:grid; }
.modal-panel { position:relative; width:min(400px,100%); max-height:88vh; padding:25px; overflow-y:auto; text-align:center; border-radius:8px; background:white; }
.modal-close { position:absolute; top:8px; right:9px; width:34px; height:34px; color:#888; border:0; background:transparent; font-size:24px; }
.modal-panel > span { color:var(--brand); font-size:9px; font-weight:800; }
.modal-panel h2 { margin:5px 0 8px; font-size:21px; }
.modal-panel > strong { display:block; color:var(--brand); font-size:34px; }
.modal-panel dl { margin:18px 0; text-align:left; border:1px solid var(--line); border-radius:7px; }
.modal-panel dl div { display:grid; grid-template-columns:75px 1fr; gap:8px; padding:10px; }
.modal-panel dl div + div { border-top:1px solid var(--line); }
.modal-panel dt { color:#888; font-size:10px; }
.modal-panel dd { margin:0; overflow-wrap:anywhere; text-align:right; font-size:10px; }
.modal-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:8px; }
.modal-actions button { padding:11px; border:0; border-radius:5px; background:#eee; }
.modal-actions button:last-child { color:white; background:var(--brand); }
.team-panel { text-align:left; }
.team-panel > span,.team-panel > h2 { display:block; text-align:center; }
.team-summary { padding:12px; border:1px solid var(--line); border-radius:7px; background:#fafafa; }
.team-summary strong,.team-summary span { display:block; }
.team-summary span { margin-top:4px; color:#888; font-size:10px; }
.member-list { display:grid; gap:7px; margin-top:12px; }
.member-item { display:grid; grid-template-columns:34px 1fr auto; gap:8px; padding:9px; align-items:center; border:1px solid var(--line); border-radius:7px; }
.member-item b { display:grid; width:32px; height:32px; place-items:center; color:#7e312a; border-radius:50%; background:#ffe2d8; font-size:10px; }
.member-item strong,.member-item small { display:block; }
.member-item strong { font-size:11px; }
.member-item small { margin-top:3px; color:#999; font-size:8px; }
.member-item em { color:#777; font-size:9px; font-style:normal; }
.member-item em.paid { color:var(--green); }
.team-copy { width:100%; margin-top:13px; padding:10px; color:white; border:0; border-radius:5px; background:var(--brand); }
.toast { position:fixed; left:50%; bottom:34px; z-index:100; max-width:82vw; padding:10px 17px; color:white; border-radius:20px; background:#222; opacity:0; pointer-events:none; transform:translate(-50%,18px); transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { background:#b9231c; }
.toast.success { background:#157548; }
@media (min-width:761px) { body { padding:18px 0; } .orders-header { border-radius:8px 8px 0 0; } .orders-page { box-shadow:0 14px 35px rgba(0,0,0,.08); } }