.order-page{min-height:100vh;background:var(--color-bg-alt)}.order-header{padding:var(--space-6);background:var(--color-bg);border-bottom:1px solid var(--color-border-light)}.back-link{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;color:var(--color-primary);transition:all .2s ease}.back-link:hover{gap:var(--space-3)}.back-link svg{width:18px;height:18px}.page-loading{padding:var(--space-8) var(--space-6);display:flex;justify-content:center}.page-loading .loading-card{text-align:center;padding:var(--space-8)}.order-error{padding:var(--space-8) var(--space-6);display:flex;justify-content:center}.error-card{background:#fff;border:2px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-8);text-align:center;max-width:400px}.error-icon{font-size:3rem;margin-bottom:var(--space-4)}.error-card h2{font-size:var(--text-xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-2)}.error-card p{color:var(--color-text-muted);margin-bottom:var(--space-6)}.order-container{display:grid;grid-template-columns:350px 1fr;gap:var(--space-6);max-width:1100px;margin:0 auto;padding:var(--space-6)}.package-summary{position:sticky;top:var(--space-6);height:fit-content}.summary-card{background:#fff;border:2px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-6)}.summary-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}.platform-badge{width:52px;height:52px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;flex-shrink:0}.platform-badge svg{width:28px;height:28px;color:#fff}.summary-header h2{font-size:var(--text-lg);font-weight:700;color:var(--color-text);margin-bottom:2px}.platform-name{font-size:var(--text-sm);color:var(--color-text-muted)}.summary-description{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border-light)}.summary-includes h4{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-3)}.summary-includes ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}.summary-includes li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-sm)}.include-icon{font-size:var(--text-base);flex-shrink:0}.include-text{color:var(--color-text-muted)}.include-text strong{color:var(--color-text);font-weight:600}.include-text small{display:block;font-size:12px;color:var(--color-text-muted);margin-top:2px}.summary-price{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-6);padding-top:var(--space-4);border-top:2px solid var(--color-border)}.price-label{font-size:var(--text-base);font-weight:600;color:var(--color-text)}.price-value{font-size:var(--text-2xl);font-weight:800;color:var(--color-text)}.order-steps{display:flex;flex-direction:column;gap:var(--space-6)}.progress-bar{display:flex;justify-content:center;gap:var(--space-8);padding:var(--space-4);background:#fff;border-radius:var(--radius-xl);border:1px solid var(--color-border-light)}.progress-step{display:flex;align-items:center;gap:var(--space-2);opacity:.4;transition:opacity .3s ease}.progress-step.active,.progress-step.completed{opacity:1}.step-number{width:28px;height:28px;border-radius:50%;background:var(--color-border);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;color:var(--color-text-muted);transition:all .3s ease}.progress-step.active .step-number{background:var(--gradient-brand);color:#fff}.progress-step.completed .step-number{background:var(--color-success);color:#fff}.step-label{font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted)}.progress-step.active .step-label{color:var(--color-text)}.step-content{animation:fadeIn .3s ease}.step-content.hidden{display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.step-card{background:#fff;border:2px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-6)}.step-card h3{font-size:var(--text-xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-2)}.step-card>p{color:var(--color-text-muted);margin-bottom:var(--space-6)}.username-input-group{display:flex;align-items:center;background:var(--color-bg-alt);border:2px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);transition:border-color .2s ease}.username-input-group:focus-within{border-color:var(--color-primary)}.input-prefix{font-size:var(--text-lg);font-weight:600;color:var(--color-text-muted);margin-right:var(--space-2)}.username-input-group input{flex:1;border:none;background:transparent;font-size:var(--text-lg);color:var(--color-text);outline:none}.username-input-group input::placeholder{color:var(--color-text-muted)}.error-message{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);margin-bottom:var(--space-4)}.input-note{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}.input-note svg{width:16px;height:16px}.loading-card{text-align:center;padding:var(--space-8)}.loading-spinner{width:48px;height:48px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;margin:0 auto var(--space-4);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.account-verified{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background:#f0fdf4;border:1px solid #86efac;border-radius:var(--radius-xl);margin-bottom:var(--space-6)}.account-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid #ffffff}.account-info{flex:1}.verified-badge{font-size:12px;font-weight:600;color:#16a34a}.account-info h4{font-size:var(--text-lg);font-weight:700;color:var(--color-text)}.change-account-btn{padding:var(--space-2) var(--space-4);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);cursor:pointer;transition:all .2s ease}.change-account-btn:hover{border-color:var(--color-text-muted);color:var(--color-text)}.post-selection-container{display:flex;flex-direction:column;gap:var(--space-6)}.post-selection-section{padding-top:var(--space-4);border-top:1px solid var(--color-border-light)}.post-selection-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.post-selection-header h4{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:600;color:var(--color-text)}.post-selection-header span{font-size:var(--text-sm);color:var(--color-text-muted)}.post-selection-note{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4);padding:var(--space-2) var(--space-3);background:var(--color-bg-alt);border-radius:var(--radius-lg)}.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--space-3)}.post-item{position:relative;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;border:3px solid transparent;transition:all .2s ease}.post-item:hover{transform:scale(1.05)}.post-item.selected{border-color:var(--color-primary)}.post-item img{width:100%;height:100%;object-fit:cover}.post-item .post-check{position:absolute;top:6px;right:6px;width:24px;height:24px;background:var(--color-primary);border-radius:50%;display:none;align-items:center;justify-content:center;color:#fff;font-size:14px}.post-item.selected .post-check{display:flex}.post-quantity-display{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;font-size:11px;font-weight:600;text-align:center;padding:4px;display:none}.post-item.selected .post-quantity-display{display:block}.no-posts-message{text-align:center;padding:var(--space-6);color:var(--color-text-muted);background:var(--color-bg-alt);border-radius:var(--radius-lg)}.order-summary{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6)}.order-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-bg-alt);border-radius:var(--radius-lg)}.order-item-icon{font-size:var(--text-lg)}.order-item-info{flex:1}.order-item-title{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}.order-item-detail{font-size:12px;color:var(--color-text-muted)}.order-item-quantity{font-size:var(--text-sm);font-weight:700;color:var(--color-primary)}.order-total{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);background:var(--gradient-brand);border-radius:var(--radius-xl);color:#fff;margin-bottom:var(--space-4)}.order-total span{font-size:var(--text-base)}.order-total strong{font-size:var(--text-xl);font-weight:800}.payment-trust{text-align:center;font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-4)}.btn-full{width:100%;justify-content:center}.btn-large{padding:var(--space-5) var(--space-6);font-size:var(--text-lg)}@media(max-width:900px){.order-container{grid-template-columns:1fr}.package-summary{position:static;order:-1}.progress-bar{gap:var(--space-4)}.step-label{display:none}}