Spaces:
Paused
Paused
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: #f8fafc; | |
| color: #1e293b; | |
| padding: 16px; | |
| max-width: 480px; | |
| margin: 0 auto; | |
| } | |
| .status-badge { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .status-offline { background: #fee2e2; color: #991b1b; } | |
| .status-connecting { background: #fef3c7; color: #92400e; } | |
| .status-online { background: #d1fae5; color: #065f46; } | |
| .card { | |
| background: #fff; | |
| border-radius: 12px; | |
| padding: 16px; | |
| margin: 12px 0; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| } | |
| .card h3 { | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| color: #64748b; | |
| margin-bottom: 8px; | |
| letter-spacing: 0.05em; | |
| } | |
| .btn { | |
| display: block; | |
| width: 100%; | |
| padding: 14px; | |
| border-radius: 10px; | |
| border: none; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| margin: 8px 0; | |
| } | |
| .btn-primary { background: #2563eb; color: #fff; } | |
| .btn-danger { background: #dc2626; color: #fff; } | |
| .btn:disabled { opacity: 0.5; cursor: not-allowed; } | |
| .metric { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 8px 0; | |
| border-bottom: 1px solid #e2e8f0; | |
| } | |
| .metric:last-child { border-bottom: none; } | |
| .metric-label { color: #64748b; font-size: 14px; } | |
| .metric-value { font-weight: 600; font-size: 14px; } | |
| .job-card { | |
| background: #f1f5f9; | |
| border-radius: 8px; | |
| padding: 12px; | |
| margin: 8px 0; | |
| } | |
| .job-card .job-type { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: #475569; | |
| text-transform: uppercase; | |
| } | |
| .receipt-card { | |
| background: #ecfdf5; | |
| border-radius: 8px; | |
| padding: 12px; | |
| margin: 8px 0; | |
| font-family: monospace; | |
| font-size: 12px; | |
| word-break: break-all; | |
| } | |
| #log { | |
| background: #0f172a; | |
| color: #e2e8f0; | |
| border-radius: 8px; | |
| padding: 12px; | |
| font-family: monospace; | |
| font-size: 12px; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| margin-top: 16px; | |
| } | |