:root { --berry:#7a1036; --berry-dark:#5c0b29; --green:#245438; --text:#20241f; --muted:#697269; --border:#dfe4dd; --surface:#f5f7f3; }
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--text); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.5; }
a { color:inherit; }
.order-header { min-height:76px; padding:12px max(18px,calc((100vw - 980px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--border); background:#fff; }
.order-brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.order-brand > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--berry); color:#fff; font:700 25px/1 Georgia,serif; }
.order-brand strong,.order-brand small { display:block; }
.order-brand strong { font:700 18px/1.15 Georgia,serif; }
.order-brand small { margin-top:3px; color:#768078; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.order-header nav { display:flex; gap:9px; }
.button { min-height:44px; padding:0 18px; border:1px solid transparent; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--berry); color:#fff; font-weight:800; text-decoration:none; cursor:pointer; }
.button.outline { border-color:#ccd5ca; background:#fff; color:#303a31; }
.order-shell { width:min(920px,calc(100% - 28px)); margin:42px auto 80px; }
.order-card { overflow:hidden; border:1px solid var(--border); border-radius:24px; background:#fff; box-shadow:0 18px 50px rgba(36,66,44,.07); }
.order-top { padding:32px; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; border-bottom:1px solid var(--border); }
.eyebrow { margin:0 0 5px; color:var(--berry); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
h1 { margin:0; font:700 clamp(32px,6vw,48px)/1.08 Georgia,serif; }
.order-top p:last-child { margin:8px 0 0; color:var(--muted); }
.status { padding:8px 13px; border-radius:999px; background:#fff2d6; color:#79540b; white-space:nowrap; font-size:13px; font-weight:800; }
.status.confirmed,.status.assembling { background:#e8f2ff; color:#265b96; }
.status.ready,.status.completed { background:#e6f5ea; color:#21613a; }
.status.cancelled { background:#fae8e8; color:#922b2b; }
.status-progress { padding:24px 32px; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; border-bottom:1px solid var(--border); }
.status-progress span { position:relative; padding-top:22px; color:#8a928a; font-size:12px; text-align:center; }
.status-progress span::before { content:""; position:absolute; top:3px; left:50%; width:12px; height:12px; border-radius:50%; transform:translateX(-50%); background:#dce1dc; }
.status-progress span.done { color:var(--green); font-weight:800; }
.status-progress span.done::before { background:var(--green); }
.order-columns { padding:30px 32px; display:grid; grid-template-columns:1.35fr .65fr; gap:34px; }
h2 { margin:0 0 16px; font:700 25px/1.2 Georgia,serif; }
.order-items { display:grid; gap:0; border-top:1px solid var(--border); }
.order-item { padding:14px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; border-bottom:1px solid var(--border); }
.order-item strong,.order-item span { display:block; }
.order-item span { margin-top:3px; color:var(--muted); font-size:13px; }
.order-total { padding-top:16px; display:flex; justify-content:space-between; font-size:19px; }
.order-meta { display:grid; gap:16px; }
.order-meta div { padding:15px; border-radius:14px; background:#f4f7f2; }
.order-meta strong,.order-meta span { display:block; }
.order-meta span { margin-top:4px; color:#5e695f; font-size:14px; }
.admin-note { margin-top:18px; padding:15px; border-left:4px solid var(--berry); border-radius:8px; background:#f9eef2; }
.push-box { margin-top:20px; padding:22px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid #d7e3d4; border-radius:18px; background:#eff6ed; }
.push-box strong,.push-box span { display:block; }
.push-box span { margin-top:4px; color:#5e6b5f; font-size:14px; }
.orders-list { display:grid; gap:14px; }
.saved-order { padding:20px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; border:1px solid var(--border); border-radius:17px; background:#fff; }
.saved-order strong,.saved-order span { display:block; }
.saved-order span { margin-top:4px; color:var(--muted); font-size:14px; }
.saved-order-actions { display:flex; gap:8px; }
.empty-orders { padding:42px; border:1px solid var(--border); border-radius:20px; background:#fff; text-align:center; }
@media(max-width:700px){ .order-header nav .hide-mobile{display:none}.order-shell{margin-top:22px}.order-top{padding:24px 20px;flex-direction:column}.status-progress{padding:20px 10px}.status-progress span{font-size:10px}.order-columns{padding:24px 20px;grid-template-columns:1fr}.push-box{align-items:stretch;flex-direction:column}.push-box .button{width:100%}.saved-order{grid-template-columns:1fr}.saved-order-actions{flex-wrap:wrap} }