.account-page { --account-bg:#f4f7f9; --account-panel:#fff; --account-text:#1f2935; --account-muted:#667386; --account-line:#e0e6eb; --account-orange:#ec5a27; --account-green:#15995a; --account-red:#dc3f47; margin:0; background:var(--account-bg); color:var(--account-text); }
.account-top { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:70px; border-bottom:1px solid var(--account-line); background:rgba(255,255,255,.96); padding:10px max(18px,calc((100% - 980px)/2)); backdrop-filter:blur(12px); }
.account-brand { display:flex; align-items:center; gap:10px; min-width:0; }.account-brand img { width:62px; max-height:38px; object-fit:contain; }.account-brand span { display:grid; min-width:0; }.account-brand strong { color:var(--account-orange); font-size:15px; white-space:nowrap; }.account-brand small { color:var(--account-muted); font-size:11px; }.account-top nav { display:flex; align-items:center; gap:14px; }.account-top nav>a,.account-top .logout-form button { border:0; background:transparent; color:var(--account-text); padding:8px 0; font-size:14px; font-weight:700; }.account-top .logout-form { margin:0; }
.account-shell { width:min(980px,calc(100% - 28px)); margin:0 auto; padding:34px 0 64px; }.account-heading { margin-bottom:22px; }.account-heading h1 { margin:0 0 7px; font-size:34px; line-height:1.2; }.account-heading p { margin:0; color:var(--account-muted); font-size:16px; }
.account-order-switcher { display:flex; gap:8px; overflow:auto; margin-bottom:14px; padding-bottom:4px; }.account-order-switcher a { flex:0 0 auto; display:grid; gap:3px; min-width:125px; border:1px solid var(--account-line); border-radius:10px; background:#fff; padding:10px 13px; }.account-order-switcher a.active { border-color:var(--account-orange); background:#fff4ef; }.account-order-switcher span { color:var(--account-muted); font-size:11px; }
.account-region-panel,.account-order-panel { border:1px solid var(--account-line); border-radius:14px; background:var(--account-panel); box-shadow:0 10px 35px rgba(42,62,79,.06); padding:24px; }.account-region-panel { margin-bottom:18px; }.account-region-panel>header,.account-order-panel>header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }.account-region-panel h2,.account-order-panel h2 { margin:0; font-size:25px; }.account-region-panel header>div>span { display:inline-block; margin-top:7px; border-radius:7px; background:#fff1eb; color:#b9411c; padding:5px 8px; font-size:12px; font-weight:700; }.account-region-panel header>p { display:grid; gap:2px; margin:0; color:var(--account-muted); text-align:right; font-size:12px; }.account-region-panel header>p strong { color:var(--account-orange); font-size:16px; }
.region-progress-copy { margin:21px 0 12px; color:var(--account-muted); }.region-progress-copy strong { color:var(--account-text); font-size:19px; }.account-region-panel>progress { width:100%; height:12px; border:0; border-radius:99px; overflow:hidden; accent-color:var(--account-green); }.account-region-panel>progress::-webkit-progress-bar { background:#e7ebee; border-radius:99px; }.account-region-panel>progress::-webkit-progress-value { background:var(--account-green); border-radius:99px; }.region-progress-count { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-top:8px; }.region-progress-count>strong { font-size:31px; color:var(--account-green); }.region-progress-count>strong span { color:var(--account-text); font-size:18px; }.region-progress-count>span { color:var(--account-muted); font-size:14px; }
.counting-notice { display:flex; gap:12px; margin-top:20px; border-radius:11px; background:#f3f5f7; padding:15px; }.counting-notice>i { color:var(--account-muted); font-size:22px; }.counting-notice.is-counted { background:#edf9f2; }.counting-notice.is-counted>i,.counting-notice.is-counted strong { color:var(--account-green); }.counting-notice p { margin:4px 0 0; color:var(--account-muted); font-size:13px; line-height:1.5; }
.account-order-panel>header { padding-bottom:17px; border-bottom:1px solid var(--account-line); }.account-order-panel header p { margin:5px 0 0; color:var(--account-muted); font-size:13px; }.account-status { border-radius:7px; padding:6px 9px; background:#eef2f5; color:var(--account-muted); font-size:13px; font-weight:800; white-space:nowrap; }.status-deposit_paid,.status-full_paid { background:#e8f7ef; color:var(--account-green); }.status-requested,.status-processing,.status-refunded { background:#fff0f1; color:var(--account-red); }
.account-order-facts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:18px 0; }.account-order-facts>div { display:grid; gap:6px; padding:0 18px; border-left:1px solid var(--account-line); }.account-order-facts>div:first-child { border-left:0; padding-left:0; }.account-order-facts span { color:var(--account-muted); font-size:12px; }.account-order-facts strong { font-size:15px; }
.account-timeline { display:grid; grid-template-columns:repeat(4,1fr); margin:30px 0 24px; padding:0; list-style:none; }.account-timeline li { position:relative; display:grid; justify-items:center; gap:8px; color:#8a95a3; text-align:center; }.account-timeline li:before { content:""; position:absolute; z-index:0; top:15px; right:50%; width:100%; height:2px; background:#d9dfe5; }.account-timeline li:first-child:before { display:none; }.account-timeline i { position:relative; z-index:1; display:grid; place-items:center; width:32px; height:32px; border:3px solid #cfd6dd; border-radius:50%; background:#fff; font-style:normal; }.account-timeline li.done { color:var(--account-text); }.account-timeline li.done:before,.account-timeline li.done i { background:var(--account-orange); border-color:var(--account-orange); color:#fff; }.account-timeline li.current i { border-color:var(--account-orange); color:var(--account-orange); }.account-timeline span { display:grid; gap:2px; font-size:13px; font-weight:700; }.account-timeline small { color:var(--account-muted); font-weight:400; }
.fulfillment-roadmap { margin:6px 0 24px; border-top:1px solid var(--account-line); padding-top:20px; }.fulfillment-roadmap>header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }.fulfillment-roadmap h3 { margin:0; font-size:17px; }.fulfillment-roadmap header p { margin:5px 0 0; max-width:620px; color:var(--account-muted); font-size:12px; }.fulfillment-roadmap header>span { border-radius:7px; background:#eef2f5; padding:5px 8px; color:var(--account-muted); font-size:12px; font-weight:800; white-space:nowrap; }.fulfillment-roadmap ol { display:grid; grid-template-columns:repeat(5,1fr); margin:20px 0 0; padding:0; list-style:none; }.fulfillment-roadmap li { position:relative; display:grid; justify-items:center; gap:7px; color:#8a95a3; text-align:center; font-size:12px; }.fulfillment-roadmap li:before { content:""; position:absolute; top:15px; right:50%; width:100%; height:2px; background:#d9dfe5; }.fulfillment-roadmap li:first-child:before { display:none; }.fulfillment-roadmap li i { position:relative; z-index:1; display:grid; place-items:center; width:32px; height:32px; border:2px solid #cfd6dd; border-radius:50%; background:#fff; }.fulfillment-roadmap li.done { color:var(--account-text); }.fulfillment-roadmap li.done:before,.fulfillment-roadmap li.done i { border-color:var(--account-green); background:var(--account-green); color:#fff; }.fulfillment-roadmap li.current i { border-color:var(--account-orange); color:var(--account-orange); }.fulfillment-roadmap li span { display:grid; }.fulfillment-roadmap small { color:var(--account-muted); font-size:10px; }
.account-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.account-actions form { margin:0; }.account-primary,.account-secondary,.account-refund { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; border-radius:9px; padding:0 16px; font-size:15px; font-weight:800; cursor:pointer; }.account-primary { border:1px solid var(--account-orange); background:var(--account-orange); color:#fff; }.account-secondary { border:1px solid #aeb8c3; background:#fff; color:var(--account-text); }.account-refund { border:1px solid var(--account-red); background:#fff; color:var(--account-red); }.account-cancel-box { grid-column:1/-1; display:grid; gap:12px; padding:16px; border:1px solid var(--account-line); border-radius:11px; background:#fafbfc; }.account-cancel-box>strong { font-size:15px; }.account-cancel-box>p { margin:0; color:var(--account-muted); font-size:13px; line-height:1.55; }.account-cancel-box .account-refund,.account-cancel-box .account-secondary { justify-self:stretch; }
.account-extra { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; border-top:1px solid var(--account-line); padding-top:16px; }.account-extra[hidden] { display:none; }.account-extra>div { display:grid; gap:4px; }.account-extra span { color:var(--account-muted); font-size:12px; }.account-extra strong { overflow-wrap:anywhere; font-size:13px; }
.refund-help { display:flex; gap:12px; margin-top:18px; border-radius:11px; background:#fff1f1; padding:15px; }.refund-help>i { color:var(--account-red); font-size:21px; }.refund-help strong { color:#bb3039; }.refund-help p { margin:5px 0 0; color:var(--account-muted); font-size:13px; line-height:1.55; }
.refund-journey { margin:22px 0; border-radius:11px; background:#fff5f5; padding:18px; }.refund-journey h3 { margin:0 0 16px; color:var(--account-red); }.refund-journey>div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.refund-journey span { border-top:3px solid #d9dfe5; padding-top:8px; color:var(--account-muted); text-align:center; font-size:12px; }.refund-journey span.done { border-color:var(--account-red); color:var(--account-red); font-weight:800; }.refund-journey p { margin:15px 0 0; color:var(--account-muted); font-size:13px; }
.account-empty { display:grid; place-items:center; min-height:65dvh; text-align:center; }.account-empty img { width:150px; height:180px; object-fit:contain; }.account-empty h1,.account-empty p { margin:6px 0; }.account-empty p { color:var(--account-muted); }.account-empty a { margin-top:12px; border-radius:9px; background:var(--account-orange); color:#fff; padding:12px 20px; font-weight:800; }
@media(max-width:640px) { .account-top { min-height:64px; padding:8px 16px; }.account-brand img { width:55px; }.account-brand strong { font-size:13px; }.account-brand small { font-size:10px; }.account-top nav>a { display:none; }.account-shell { width:calc(100% - 24px); padding:28px 0 48px; }.account-heading h1 { font-size:30px; }.account-region-panel,.account-order-panel { padding:18px; border-radius:12px; }.account-region-panel>header { gap:8px; }.account-region-panel h2 { font-size:24px; }.region-progress-copy { font-size:14px; }.region-progress-count { align-items:flex-start; flex-direction:column; gap:2px; }.region-progress-count>strong { font-size:30px; }.account-order-facts { grid-template-columns:1fr 1fr; gap:14px 0; }.account-order-facts>div { padding:0 12px; }.account-order-facts>div:nth-child(odd) { border-left:0; padding-left:0; }.account-order-facts>div:nth-child(n+3) { border-top:1px solid var(--account-line); padding-top:13px; }.account-timeline { margin-left:-8px; margin-right:-8px; }.account-timeline span { font-size:11px; }.account-timeline small { font-size:10px; }.account-actions { grid-template-columns:1fr; } }
@media(max-width:380px) { .account-brand span strong { max-width:155px; overflow:hidden; text-overflow:ellipsis; }.account-region-panel>header { flex-direction:column; }.account-region-panel header>p { text-align:left; }.account-timeline span { font-size:10px; } }
@media(max-width:640px) { .account-extra { grid-template-columns:1fr; } }
@media(max-width:640px) { .fulfillment-roadmap>header { flex-direction:column; gap:8px; }.fulfillment-roadmap ol { grid-template-columns:1fr; gap:0; }.fulfillment-roadmap li { grid-template-columns:34px 1fr; justify-items:start; align-items:center; min-height:48px; text-align:left; }.fulfillment-roadmap li:before { top:-24px; left:15px; width:2px; height:48px; }.fulfillment-roadmap li:first-child:before { display:none; }.fulfillment-roadmap li i { grid-column:1; }.fulfillment-roadmap li span { grid-column:2; } }
@media(prefers-reduced-motion:reduce) { .account-page * { scroll-behavior:auto!important; transition:none!important; } }
.account-payment-next { display: grid; gap: 14px; padding: 20px; margin: 20px 0; background: var(--accent-soft, #fff0e8); border: 1px solid var(--line, #eadfd5); border-radius: 12px; }
.account-payment-next h3 { margin: 0 0 6px; font-size: 18px; }
.account-payment-next p { margin: 0; line-height: 1.65; font-size: 14px; color: #71645b; }
.account-payment-next .account-primary { justify-self: start; }
.account-payment-refresh { font-size: 13px; color: #a73613; }
.account-payment-refresh button { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }