@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap";:root{--bg-deep: #f4f4f5;--bg-surface: #ffffff;--panel-border: rgba(0, 0, 0, .06);--text-main: #09090b;--text-muted: #52525b;--text-subtle: #a1a1aa;--accent-primary: #2563eb;--accent-secondary: #000000;--accent-gradient: linear-gradient(135deg, #1d4ed8, #3b82f6);--status-success: #10b981;--status-success-bg: #d1fae5;--status-warning: #f59e0b;--status-warning-bg: #fef3c7;--status-error: #ef4444;--status-error-bg: #fee2e2;--font-sans: "Inter", sans-serif;--font-display: "Outfit", sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-lg: 24px;--radius-md: 16px;--radius-sm: 8px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);--shadow-md: 0 8px 30px rgba(0, 0, 0, .08);--shadow-lg: 0 24px 60px rgba(0, 0, 0, .12)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;background-color:var(--bg-deep);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}::selection{background:#2563eb33;color:var(--text-main)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#0003}.bg-gradient{position:fixed;inset:0;z-index:-1;background-image:radial-gradient(circle at 0% 0%,rgba(59,130,246,.08),transparent 40%),radial-gradient(circle at 100% 100%,rgba(139,92,246,.06),transparent 40%)}.bg-pattern{position:fixed;inset:0;z-index:-1;background-image:linear-gradient(rgba(0,0,0,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.02) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse at 50% 30%,black 50%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,black 50%,transparent 90%)}.brand-corner{position:absolute;top:24px;right:32px;font-family:var(--font-display);font-weight:700;font-size:.85rem;letter-spacing:.15em;color:var(--text-muted);text-transform:uppercase;display:flex;align-items:center;gap:8px}.brand-corner:before{content:"";display:block;width:16px;height:2px;background:var(--text-main)}.app-container{display:flex;flex-direction:column;height:100vh;max-width:1080px;margin:0 auto;padding:60px 32px 32px;gap:32px;position:relative}.header-wrapper{text-align:left;animation:fadeDown .8s cubic-bezier(.16,1,.3,1)}.header-title{font-family:var(--font-display);font-size:4.5rem;font-weight:900;letter-spacing:-.04em;color:var(--text-main);line-height:1;margin-bottom:12px;display:flex;align-items:center;gap:16px}.badge-tag{font-family:var(--font-mono);font-size:.85rem;font-weight:600;background:#000;color:#fff;padding:6px 16px;border-radius:999px;letter-spacing:0;transform:translateY(-8px)}.header-subtitle{font-size:1.1rem;color:var(--text-muted);font-weight:400;max-width:600px;line-height:1.5}.dashboard-grid{display:grid;grid-template-columns:1fr 360px;gap:32px;flex:1;min-height:0}.main-column{display:flex;flex-direction:column;gap:24px;min-height:0}.side-column{display:flex;flex-direction:column;gap:24px}.clean-card{background:var(--bg-surface);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) both}.connection-panel{gap:20px}.conn-header{display:flex;justify-content:space-between;align-items:center}.conn-title{font-family:var(--font-display);font-size:1rem;font-weight:700}.status-indicator{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.8rem;font-weight:600;background:#00000008;padding:4px 12px;border-radius:999px;border:1px solid var(--panel-border)}.dot{width:8px;height:8px;border-radius:50%}.dot--connected{background:var(--status-success)}.dot--connecting{background:var(--status-warning);animation:pulse 1s infinite alternate}.dot--disconnected{background:var(--text-subtle)}.btn-primary{width:100%;padding:16px;border-radius:var(--radius-md);border:none;background:var(--text-main);color:#fff;font-family:var(--font-sans);font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1)}.btn-primary:not(:disabled):hover{transform:translateY(-2px);background:var(--accent-primary);box-shadow:0 8px 24px #2563eb40}.btn-primary:disabled{opacity:.6;cursor:not-allowed;background:var(--text-subtle)}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--panel-border);border:1px solid var(--panel-border);border-radius:var(--radius-lg);overflow:hidden;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) both}.stat-box{background:var(--bg-surface);padding:24px;display:flex;flex-direction:column;gap:8px;transition:background .3s ease}.stat-box:hover{background:#f8fafc}.stat-box-label{font-family:var(--font-sans);font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.stat-box-value{font-family:var(--font-display);font-size:2.8rem;font-weight:800;line-height:1;letter-spacing:-.02em}.val-sent{color:var(--status-success)}.val-failed{color:var(--status-error)}.val-pending{color:var(--text-muted)}.val-total{color:var(--text-main)}.progress-tracker{display:flex;flex-direction:column;gap:16px}.progress-header{display:flex;justify-content:space-between;align-items:baseline}.progress-title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:12px}.progress-pct{font-family:var(--font-mono);font-size:1.2rem;font-weight:700;color:var(--accent-primary)}.progress-bar-container{height:12px;background:var(--bg-deep);border-radius:999px;overflow:hidden;border:1px solid var(--panel-border)}.progress-bar-fill{height:100%;background:var(--accent-gradient);border-radius:999px;transition:width .8s cubic-bezier(.16,1,.3,1)}.controls-panel{display:flex;gap:12px}.btn-action{flex:1;padding:16px;border-radius:var(--radius-md);border:1px solid var(--panel-border);background:var(--bg-surface);font-family:var(--font-sans);font-size:.95rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease;box-shadow:var(--shadow-sm)}.btn-start{background:var(--accent-primary);color:#fff;border:none}.btn-start:hover:not(:disabled){background:#1d4ed8;transform:translateY(-2px);box-shadow:0 8px 24px #2563eb40}.btn-pause{color:var(--status-warning)}.btn-pause:hover{background:var(--status-warning-bg);border-color:var(--status-warning)}.btn-stop{color:var(--status-error)}.btn-stop:hover{background:var(--status-error-bg);border-color:var(--status-error)}.btn-reset{color:var(--text-main)}.btn-reset:hover{background:var(--bg-deep)}.btn-action:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.log-console{flex:1;padding:0;margin-top:8px;border:1px solid var(--panel-border);box-shadow:none}.log-console-header{padding:16px 24px;border-bottom:1px solid var(--panel-border);display:flex;justify-content:space-between;align-items:center;background:#fafafa}.log-console-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text-main)}.log-count{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);background:var(--bg-deep);padding:4px 10px;border-radius:999px;border:1px solid var(--panel-border)}.log-body{flex:1;overflow-y:auto;padding:20px 24px;font-family:var(--font-mono);font-size:.85rem;line-height:1.6;display:flex;flex-direction:column;gap:8px;background:#fff}.log-line{display:flex;gap:16px;color:var(--text-muted);animation:fadeUp .3s ease-out;padding:4px 8px;border-radius:4px;border-left:2px solid transparent}.log-time{opacity:.6;flex-shrink:0;font-size:.8rem}.log-msg{flex:1}.log-line--sent{color:var(--text-main);border-left-color:var(--status-success);background:var(--status-success-bg)}.log-line--fail{color:var(--status-error);border-left-color:var(--status-error)}.log-line--info{color:var(--accent-primary);border-left-color:var(--accent-primary)}.qr-modal-overlay{position:fixed;inset:0;background:#ffffffd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:999;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.qr-modal{background:#fff;border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:40px;text-align:center;max-width:440px;width:90%;box-shadow:var(--shadow-lg);animation:scaleUp .4s cubic-bezier(.16,1,.3,1);position:relative}.qr-close{position:absolute;top:24px;right:24px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0000000d;border:none;font-size:1.2rem;cursor:pointer;transition:all .2s}.qr-close:hover{background:#0000001a;color:#000}.qr-modal h2{font-family:var(--font-display);font-size:1.8rem;margin-bottom:8px;color:var(--text-main);font-weight:800}.qr-modal p{font-size:1rem;color:var(--text-muted);margin-bottom:32px;line-height:1.5}.qr-container{background:#fff;padding:24px;border-radius:var(--radius-md);display:inline-block;border:1px solid var(--panel-border);box-shadow:var(--shadow-sm);position:relative}.qr-container canvas{display:block;width:260px;height:260px}.countdown-badge{display:inline-flex;align-items:center;padding:4px 10px;background:#2563eb1a;color:var(--accent-primary);border-radius:999px;font-family:var(--font-mono);font-size:.8rem;font-weight:700}@keyframes fadeDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}.side-column{flex-direction:row;flex-wrap:wrap}.connection-panel,.controls-panel{flex:1;min-width:300px}.log-console{height:400px;flex:none}.header-title{font-size:3rem}}@media(max-width:500px){.app-container{padding:40px 16px 24px;gap:24px}.stats-grid{grid-template-columns:1fr}.controls-panel{flex-direction:column}.brand-corner{display:none}}