*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app{max-width:1400px;margin:0 auto}.app-header h1{text-align:center;color:#fff;text-shadow:2px 2px 4px #0003;margin-bottom:20px;font-size:2rem}.mock-banner{text-align:center;color:#333;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffc107e6;border-radius:20px;width:auto;margin-bottom:20px;margin-left:auto;margin-right:auto;padding:6px 12px;font-size:.8rem;font-weight:500;display:inline-block}.content-wrapper{transition:opacity .3s;position:relative}.content-wrapper.refreshing{opacity:.6;pointer-events:none}.loading-spinner{text-align:center;background:#fff;border-radius:12px;max-width:300px;margin:20px auto;padding:50px}.spinner{border:4px solid #f3f3f3;border-top-color:#667eea;border-radius:50%;width:40px;height:40px;margin:0 auto 15px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cards-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:20px;display:grid}.refresh-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#000000d9;border:1px solid #fff3;border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:20px 30px;animation:.3s fadeInScale;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 40px #0000004d}@keyframes fadeInScale{0%{opacity:0;transform:translate(-50%,-50%)scale(.9)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.refresh-spinner{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}.refresh-text{color:#fff;letter-spacing:.5px;font-size:.9rem;font-weight:500}@media (width<=768px){.cards-grid{grid-template-columns:1fr}.refresh-overlay{padding:15px 25px}.refresh-spinner{width:30px;height:30px}.refresh-text{font-size:.8rem}}.monitoring-card{background:#fff;border-radius:12px;transition:transform .3s;overflow:hidden;box-shadow:0 10px 30px #0003}.monitoring-card:hover{transform:translateY(-5px)}.card-header{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:space-between;align-items:center;padding:20px;display:flex}.card-info h3{margin-bottom:8px;font-size:.9rem;font-weight:500}.count-number{font-size:1.8rem;font-weight:700}.card-arrow{font-size:1.2rem;transition:transform .3s}.card-arrow.expanded{transform:rotate(180deg)}.card-content{max-height:500px;overflow-y:auto}.empty-table{text-align:center;color:#ccc;padding:30px;font-size:.8rem}.orders-table-container{overflow-x:auto}.orders-table{border-collapse:collapse;width:100%;font-size:.8rem}.orders-table thead{background:#f7f7f7;border-bottom:1px solid #e0e0e0}.orders-table th{text-align:left;color:#333;padding:10px;font-weight:600}.orders-table td{color:#555;border-bottom:1px solid #f0f0f0;padding:8px 10px}.orders-table tbody tr:hover{background:#f9f9f9}.settings-panel{background:#fffffff2;border-radius:40px;width:auto;margin-bottom:20px;margin-left:auto;margin-right:auto;padding:8px 20px;display:inline-block;box-shadow:0 2px 8px #0000001a}.settings-controls{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.auto-refresh-control{align-items:center;display:flex}.switch{width:40px;height:20px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#ccc;border-radius:20px;transition:all .3s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:14px;height:14px;transition:all .3s;position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:#667eea}input:checked+.slider:before{transform:translate(20px)}.interval-selector select{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:20px;padding:4px 8px;font-size:.8rem}.manual-refresh-btn{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:20px;justify-content:center;align-items:center;width:32px;height:32px;padding:4px 10px;font-size:1rem;transition:all .3s;display:flex}.manual-refresh-btn:hover:not(:disabled){background:#5a67d8;transform:rotate(180deg)}.manual-refresh-btn.refreshing{animation:1s linear infinite btnSpin}@keyframes btnSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.manual-refresh-btn:disabled{opacity:.6;cursor:not-allowed}.last-update{color:#999;font-family:monospace;font-size:.7rem}.mock-indicator{cursor:help;opacity:.6;font-size:1rem}