body{font-family:-apple-system,sans-serif;margin:0;background-color:var(--bg-primary);color:var(--text-primary);padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;min-height:100vh}.main-wrapper{width:100%;max-width:600px;min-height:100vh;background:var(--bg-primary);border-left:1px solid var(--border-primary);border-right:1px solid var(--border-primary);display:flex;flex-direction:column}.container{padding:var(--sp-5);flex:1}.empty-state{text-align:center;margin-top:var(--sp-11);color:var(--text-tertiary)}.empty-state .material-icons{font-size:60px;margin-bottom:15px;opacity:.5}@keyframes spin{to{transform:rotate(360deg)}}.order-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--sp-5);margin-bottom:var(--sp-5);border:1px solid var(--border-primary);animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.order-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.order-number{font-weight:var(--fw-bold);font-size:var(--fs-xl);color:var(--accent);letter-spacing:1px}.order-date{font-size:var(--fs-sm);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--sp-1)}.status-stepper{display:flex;align-items:center;justify-content:center;gap:0;margin:var(--sp-3) 0;padding:10px;background:var(--bg-tertiary);border-radius:var(--radius-md)}.step{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);flex:1}.step-icon{width:28px;height:28px;border-radius:50%;background:var(--bg-secondary);border:2px solid var(--border-secondary);display:flex;align-items:center;justify-content:center;transition:var(--dur-slow)}.step-icon .material-icons{font-size:var(--fs-base);color:var(--text-tertiary)}.step.active .step-icon{background:var(--accent);border-color:var(--accent)}.step.active .step-icon .material-icons{color:#fff}.step.done .step-icon{background:var(--success);border-color:var(--success)}.step.done .step-icon .material-icons{color:#fff}.step-label{font-size:10px;font-weight:var(--fw-extra);text-transform:uppercase;color:var(--text-tertiary);text-align:center}.step.active .step-label,.step.done .step-label{color:var(--text-primary)}.step-line{width:20px;height:2px;background:var(--border-secondary);margin-bottom:var(--sp-4)}.step-line.done{background:var(--success)}.items-list{padding:var(--sp-3);background:var(--bg-tertiary);border-radius:var(--radius-md);margin-bottom:15px}.item-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:var(--fs-base)}.item-qty{color:var(--accent);font-weight:700;margin-right:var(--sp-2)}.item-details{font-size:var(--fs-xs);color:var(--text-tertiary);font-style:italic}.order-total{text-align:right;font-weight:var(--fw-bold);font-size:var(--fs-lg);color:var(--text-primary)}.btn-cancel{width:100%;padding:14px;background:transparent;border:2px solid var(--accent);border-radius:var(--radius-md);color:var(--accent);font-weight:var(--fw-extra);font-size:var(--fs-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-3);transition:var(--dur-std)}.btn-cancel:active{background:var(--accent);color:#fff}.btn-home{width:auto;padding:10px var(--sp-5);background:var(--bg-card);border:1.5px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);font-weight:var(--fw-bold);cursor:pointer;margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--fs-sm)}.btn-explore-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px var(--sp-5);margin-top:14px;background:var(--accent);color:var(--bg-1);border:none;border-radius:var(--radius-md);font-weight:var(--fw-bold);font-size:var(--fs-sm);cursor:pointer;transition:transform var(--dur-fast),box-shadow var(--dur-fast);box-shadow:0 3px 10px #ff3b3033}.btn-explore-cta:hover{transform:translateY(-1px);box-shadow:0 5px 16px #ff3b304d}.btn-explore-cta:active{transform:scale(.97)}.btn-explore-cta .material-icons{font-size:var(--fs-md);line-height:1;vertical-align:middle}.nav-btn{color:var(--text-placeholder);cursor:pointer;width:50px;height:50px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;transition:var(--dur-slow);border-radius:var(--radius-md)}.nav-btn .material-icons{font-size:var(--fs-2xl)}.nav-btn.active{color:var(--accent)}.cancel-detail{font-size:var(--fs-sm);color:var(--text-secondary);margin-top:6px}.cancel-detail strong{color:var(--accent)}.refund-badge{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--success);background:#34c7591a;padding:var(--sp-1) 10px;border-radius:var(--radius-md);margin-top:6px}.order-notes-client{font-size:var(--fs-sm);color:var(--text-secondary, #d4a000);background:#ffcc001a;border:1px dashed #ffcc00;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);margin:var(--sp-2) 0;display:flex;align-items:center;gap:6px}.items-toggle-btn{background:none;border:none;color:var(--accent);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;padding:6px 0;display:flex;align-items:center;gap:var(--sp-1)}.items-hidden{display:none}.section-title{font-size:var(--fs-sm);font-weight:var(--fw-extra);text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);margin:var(--sp-5) 0 10px}@media(min-width:768px){.main-wrapper{max-width:900px}.container{padding:25px var(--sp-8)}}@media(min-width:1024px){.header{display:none!important}.container{padding:30px 50px;max-width:1100px;margin:0 auto}#orders-content{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}.section-title,#orders-loading,#active-order-section,.empty-state{grid-column:1 / -1}#live-tracking-banner{max-width:1100px;margin-left:auto!important;margin-right:auto!important}}#history-section{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}#history-section>.section-title,#history-section>.empty-state,#history-section>#empty-orders-state,#history-section>#orders-loading,#history-section>.loading-state,#history-section>.error-state,#history-section>.pagination,#history-section>#btn-load-more{grid-column:1 / -1}@media(min-width:768px){#history-section{grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}}@media(min-width:1200px){#history-section{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}}