@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--bg-app:#0b0f17;--bg-card:#151c2c;--text-main:#f3f4f6;--text-muted:#9ca3af;--primary:#00a8ff;--primary-hover:#0097e6;--accent:#00e8c6;--danger:#ff4757;--success:#2ed573;--warning:#ffa502;--border:#ffffff0f;--font-main:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;font-family:var(--font-main);-webkit-tap-highlight-color:transparent;margin:0;padding:0}::-webkit-scrollbar{display:none}*{scrollbar-width:none;-ms-overflow-style:none}body{color:var(--text-main);background-color:#05070a;justify-content:center;align-items:center;min-height:100vh;display:flex;overflow-x:hidden}.app-container{background:radial-gradient(circle at top, #111a2e 0%, var(--bg-app) 100%);flex-direction:column;width:100%;max-width:480px;min-height:100vh;display:flex;position:relative}@media (width>=481px){.app-container{border:6px solid #1e293b;border-radius:36px;height:850px;min-height:90vh;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}}.header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#0b0f17cc;justify-content:space-between;align-items:center;padding:24px 20px;display:flex;position:sticky;top:0}.logo-wrap{align-items:center;gap:10px;display:flex}.logo-ico{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;font-weight:800;display:flex;box-shadow:0 4px 10px #00a8ff4d}.logo-txt{letter-spacing:-.02em;font-size:18px;font-weight:700}.logo-txt span{color:var(--primary)}.main-content{flex-direction:column;flex:1;gap:20px;padding:20px;display:flex;overflow-y:auto}.grid-opcoes{grid-template-columns:1fr;gap:16px;margin-top:10px;display:grid}.opcao-card{background:var(--bg-card);border:1px solid var(--border);text-align:left;cursor:pointer;border-radius:20px;flex-direction:column;align-items:flex-start;padding:24px;transition:all .25s;display:flex;position:relative;overflow:hidden}.opcao-card:before{content:"";opacity:0;background:linear-gradient(135deg,#00a8ff14,#00e8c614);width:100%;height:100%;transition:opacity .25s;position:absolute;top:0;left:0}.opcao-card:hover{border-color:#00a8ff4d;transform:translateY(-2px);box-shadow:0 8px 24px #0003}.opcao-card:hover:before{opacity:1}.opcao-icon{background:#ffffff0a;border-radius:14px;justify-content:center;align-items:center;width:60px;height:60px;margin-bottom:16px;font-size:32px;display:flex}.opcao-title{margin-bottom:6px;font-size:20px;font-weight:600}.opcao-desc{color:var(--text-muted);font-size:14px;line-height:1.4}.form-group{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}label{color:var(--text-muted);font-size:14px;font-weight:500}input,select,textarea{border:1px solid var(--border);width:100%;color:var(--text-main);background:#111622;border-radius:12px;outline:none;padding:14px 16px;font-size:15px;transition:border-color .2s}input:focus,select:focus,textarea:focus{border-color:var(--primary);background:#131a29}.tamanho-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px;display:grid}.tamanho-opcao{border:1px solid var(--border);text-align:center;cursor:pointer;background:#111622;border-radius:12px;padding:14px;font-size:15px;font-weight:600;transition:all .2s}.tamanho-opcao.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px #00a8ff4d}.btn{cursor:pointer;border:none;border-radius:14px;justify-content:center;align-items:center;gap:10px;width:100%;padding:16px;font-size:16px;font-weight:600;transition:all .2s;display:flex}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-hover));color:#fff;box-shadow:0 6px 20px #00a8ff40}.btn-primary:active{transform:scale(.98)}.btn-secondary{border:1px solid var(--border);color:var(--text-main);background:0 0}.btn-secondary:hover{background:#ffffff08}.status-card{background:var(--bg-card);border:1px solid var(--border);border-radius:24px;flex-direction:column;gap:20px;padding:24px;display:flex}.status-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding-bottom:14px;display:flex}.status-badge{text-transform:uppercase;border-radius:20px;padding:6px 12px;font-size:13px;font-weight:600}.badge-solicitado{color:var(--warning);background:#ffa50026}.badge-agendado{color:var(--primary);background:#00a8ff26}.badge-entregue{color:var(--success);background:#2ed57326}.badge-retirada{color:var(--danger);background:#ff475726}.timeline{justify-content:space-between;margin:20px 0;padding:0 10px;display:flex;position:relative}.timeline:before{content:"";z-index:1;background:#ffffff0d;height:3px;position:absolute;top:14px;left:20px;right:20px}.timeline-progress{background:var(--primary);z-index:1;height:3px;transition:width .4s;position:absolute;top:14px;left:20px}.timeline-step{z-index:2;flex-direction:column;align-items:center;gap:8px;width:60px;display:flex}.step-dot{border:2px solid var(--border);width:30px;height:30px;color:var(--text-muted);background:#111622;border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;transition:all .3s;display:flex}.timeline-step.active .step-dot{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 12px #00a8ff66}.timeline-step.completed .step-dot{background:var(--success);border-color:var(--success);color:#fff}.step-label{color:var(--text-muted);text-align:center;font-size:11px;font-weight:500}.timeline-step.active .step-label{color:var(--text-main);font-weight:600}.pedido-detalhes{background:#ffffff05;border-radius:16px;flex-direction:column;gap:12px;padding:16px;display:flex}.detalhe-item{justify-content:space-between;font-size:14px;display:flex}.detalhe-label{color:var(--text-muted)}.detalhe-val{text-align:right;max-width:60%;font-weight:500}.loading-spinner{border:3px solid #fff3;border-top-color:#fff;border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;color:var(--text-muted);padding:40px 20px;font-size:15px}