body{margin:0;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0b;--bg-secondary: #111113;--bg-card: #161618;--bg-hover: #1c1c1f;--bg-input: #0e0e10;--border: #232326;--border-light: #1a1a1c;--text-primary: #ececef;--text-secondary: #9898a0;--text-muted: #5c5c63;--accent: #ececef;--accent-hover: #ffffff;--success: #34d399;--danger: #f87171;--warning: #fbbf24;--radius: 8px;--radius-lg: 12px}body{font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);min-height:100vh;color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased}#root{padding:32px 48px;max-width:none;text-align:left}.container{max-width:1400px;margin:0 auto}header{display:flex;justify-content:space-between;align-items:center;padding:0 0 28px;margin-bottom:28px;border-bottom:1px solid var(--border-light)}header h1{color:var(--text-primary);font-size:1.125rem;font-weight:500}.subtitle{color:var(--text-muted);font-size:.75rem;margin-top:4px}.dashboard-grid{display:grid;grid-template-columns:380px 1fr;gap:24px;align-items:start}section{background:var(--bg-secondary);padding:24px;border-radius:var(--radius-lg);border:1px solid var(--border-light)}.create-section{position:sticky;top:24px}h2{color:var(--text-primary);margin-bottom:20px;font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.02em}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}.form-group{display:flex;flex-direction:column;margin-bottom:8px}.form-section-label{font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-top:20px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-light)}.form-group label{margin-bottom:6px;font-size:.7rem;color:var(--text-secondary)}.form-group input,.form-group select{padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:.8rem;background:var(--bg-input);color:var(--text-primary);transition:all .2s ease;height:38px}.form-group input::placeholder{color:var(--text-muted);opacity:.7}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--text-muted);background:var(--bg-card)}.region-selector-btn{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:.8rem;background:var(--bg-input);color:var(--text-primary);cursor:pointer;transition:all .2s ease;text-align:left;height:38px}.region-selector-btn:hover:not(:disabled){border-color:var(--text-muted);background:var(--bg-card)}.region-selector-btn:disabled{opacity:.6;cursor:not-allowed}.region-flag{font-size:1.1rem;line-height:1}.region-name{flex:1;color:var(--text-primary)}.region-arrow{color:var(--text-muted);font-size:1rem;transition:transform .2s ease}.region-selector-btn:hover .region-arrow{transform:translate(2px)}.region-loading{color:var(--text-muted)}.region-modal{max-width:420px}.region-modal h2{text-transform:none;font-size:1rem;margin-bottom:16px}.region-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;margin:0 -8px;padding:0 8px}.region-option{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border-light);border-radius:var(--radius);background:var(--bg-card);cursor:pointer;transition:all .15s ease;text-align:left;width:100%}.region-option:hover{border-color:var(--border);background:var(--bg-hover)}.region-option.selected{border-color:var(--success);background:#34d39914}.region-option-flag{font-size:1.5rem;line-height:1}.region-option-info{flex:1;display:flex;flex-direction:column;gap:2px}.region-option-city{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:500;color:var(--text-primary)}.region-option-country{font-size:.65rem;color:var(--text-muted)}.best-badge{font-size:.5rem;font-weight:600;padding:2px 5px;border-radius:3px;background:#34d39926;color:var(--success);text-transform:uppercase;letter-spacing:.02em}.region-latencies{display:flex;gap:6px}.latency-chip{font-size:.55rem;font-weight:500;padding:3px 6px;border-radius:4px;font-family:monospace;min-width:52px;text-align:center}.latency-chip.latency-excellent{background:#34d3991f;color:#34d399}.latency-chip.latency-good{background:#fbbf241f;color:#fbbf24}.latency-chip.latency-fair{background:#9ca3af1f;color:#9ca3af}.latency-chip{display:flex;align-items:center;gap:4px}.exchange-logo{width:10px;height:10px;flex-shrink:0;object-fit:contain}.latency-legend{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-light)}.legend-title{font-size:.6rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em}.legend-item{display:flex;align-items:center;gap:6px;font-size:.65rem;color:var(--text-secondary)}.legend-logo{width:12px;height:12px;object-fit:contain}.legend-location{color:var(--text-muted);font-size:.55rem}.region-check{color:var(--success);font-size:.9rem;font-weight:600;margin-left:4px}.btn{padding:9px 16px;border:none;border-radius:var(--radius);font-size:.7rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn-primary{background:var(--accent);color:var(--bg-primary);width:100%;padding:12px 16px;margin-top:16px}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(248,113,113,.25);padding:7px 12px;font-size:.65rem}.btn-danger:hover{background:#f871711a}.btn-info{background:transparent;color:var(--text-secondary);border:1px solid var(--border);padding:7px 12px;font-size:.65rem}.btn-info:hover{background:var(--bg-hover)}.main-content{display:flex;flex-direction:column;gap:20px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-header h2{margin-bottom:0}.filter-controls{display:flex;gap:10px}.filter-controls select{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:.65rem;color:var(--text-secondary);background:var(--bg-card);cursor:pointer}.stats-section{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0;background:transparent;border:none}.stat-card{background:var(--bg-secondary);padding:20px;border-radius:var(--radius-lg);border:1px solid var(--border-light)}.stat-label{font-size:.6rem;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em}.stat-value{font-size:1.75rem;font-weight:500;color:var(--text-primary)}.droplets-section{padding:24px}.droplets-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.droplet-card{border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:18px;background:var(--bg-card);transition:all .2s ease}.droplet-card:hover{border-color:var(--border);background:var(--bg-hover)}.droplet-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.droplet-name{font-size:.85rem;font-weight:500;color:var(--text-primary);margin-bottom:4px}.droplet-id{font-size:.6rem;color:var(--text-muted);font-family:monospace}.status-badge{padding:4px 10px;border-radius:100px;font-size:.55rem;font-weight:500;text-transform:uppercase}.status-creating,.status-configuring{background:#fbbf241a;color:var(--warning)}.status-active,.status-ready{background:#34d3991a;color:var(--success)}.status-stopped{background:#5c5c6326;color:var(--text-muted)}.status-error{background:#f871711a;color:var(--danger)}.droplet-info{margin:12px 0}.info-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border-light)}.info-row:last-child{border-bottom:none}.info-label{color:var(--text-muted);font-size:.65rem}.info-value{color:var(--text-secondary);font-size:.65rem}.ip-address{background:var(--bg-primary);padding:10px 12px;border-radius:var(--radius);font-family:monospace;margin:12px 0;text-align:center;font-size:.75rem;color:var(--text-secondary);border:1px solid var(--border-light)}.droplet-actions{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-light)}.droplet-actions button{flex:1}.empty-state{text-align:center;padding:80px 24px;grid-column:1 / -1}.empty-state-icon{font-size:.75rem;margin-bottom:12px;color:var(--text-muted)}.empty-state-text{color:var(--text-muted);font-size:.75rem}.toast{position:fixed;bottom:-100px;right:32px;background:var(--bg-secondary);color:var(--text-primary);padding:14px 20px;border-radius:var(--radius);box-shadow:0 12px 40px #00000080;transition:bottom .3s ease;z-index:1000;font-size:.75rem;border:1px solid var(--border)}.toast.show{bottom:32px}.toast.success{border-color:#34d39966}.toast.error{border-color:#f8717166}.modal{position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#000c;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}.modal-content{background-color:var(--bg-secondary);padding:28px;border-radius:var(--radius-lg);width:90%;max-width:400px;position:relative;border:1px solid var(--border)}.close{position:absolute;top:18px;right:18px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;line-height:0;color:var(--text-muted);cursor:pointer;border-radius:4px;transition:all .15s ease}.close:hover{color:var(--text-primary);background:var(--bg-hover)}.confirm-modal h2{text-transform:none;font-size:1rem;margin-bottom:16px}.confirm-text{color:var(--text-secondary);font-size:.75rem;margin-bottom:20px}.checkbox-label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}.checkbox-label:hover{border-color:var(--text-muted)}.checkbox-label input[type=checkbox]{display:none}.checkmark{width:18px;height:18px;min-width:18px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);display:flex;align-items:center;justify-content:center}.checkbox-label input[type=checkbox]:checked+.checkmark{background:var(--success);border-color:var(--success)}.checkbox-label input[type=checkbox]:checked+.checkmark:after{content:"";width:5px;height:9px;border:solid var(--bg-primary);border-width:0 2px 2px 0;transform:rotate(45deg);margin-bottom:2px}.checkbox-text{color:var(--text-primary);font-size:.75rem}.confirm-hint{color:var(--text-muted);font-size:.65rem;margin-top:12px;margin-bottom:24px}.confirm-actions{display:flex;gap:10px}.confirm-actions .btn{flex:1}.confirm-actions .btn-primary{margin-top:0}@media(max-width:1024px){.dashboard-grid{grid-template-columns:1fr}.create-section{position:static}.stats-section{grid-template-columns:repeat(2,1fr)}#root{padding:24px}}@media(max-width:768px){#root{padding:20px}.form-row{grid-template-columns:1fr}header{flex-direction:column;align-items:flex-start;gap:16px}.droplets-container{grid-template-columns:1fr}.input-with-button{flex-direction:column;gap:8px}.btn-create-agent{padding:10px 16px}.agent-key-display{flex-direction:column;align-items:stretch;gap:10px}.btn-copy{text-align:center}}.wallet-btn{background:#2a2a2d;border:1px solid #232326;border-radius:8px;color:#9898a0;padding:10px 20px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease}.wallet-btn:hover:not(:disabled){background:#353538;border-color:#4a4a50;color:#ececef;transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.wallet-btn:active:not(:disabled){transform:translateY(0);box-shadow:none}.wallet-btn:disabled{opacity:.5;cursor:not-allowed;color:#5c5c63}.wallet-btn-connected{color:#34d399;font-family:monospace;padding:10px 16px;border-color:#34d39933}.wallet-btn-connected:hover{background:#34d3991a;border-color:#34d39966;color:#6ee7b7;box-shadow:0 4px 12px #34d39926}.wallet-connected{display:flex;align-items:center;gap:12px}.wallet-connected .wallet-address{background:#34d3991a;border:1px solid rgba(52,211,153,.3);color:var(--success);padding:8px 14px;border-radius:var(--radius);font-size:.75rem;font-family:monospace}.btn-disconnect{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:8px 14px;font-size:.7rem}.btn-disconnect:hover{border-color:var(--danger);color:var(--danger);background:#f871711a}.connected-badge{display:inline-block;background:#34d39926;color:var(--success);padding:1px 5px;border-radius:3px;font-size:.5rem;margin-left:6px;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle;line-height:1.2}appkit-button,appkit-connect-button{--wui-color-accent-100: #34d399;--wui-color-fg-100: #9898a0;--wui-color-bg-100: #2a2a2d;--wui-color-bg-125: #353538;--wui-color-gray-glass-005: rgba(35, 35, 38, .5);--wui-color-gray-glass-010: rgba(35, 35, 38, .7)}.input-with-button{display:flex;gap:10px;align-items:stretch;width:100%;max-width:100%;overflow:hidden}.input-with-button input{flex:1 1 0;min-width:0;width:100%}.btn-create-agent{background:transparent;border:1px solid var(--border);color:var(--text-secondary);padding:0 14px;border-radius:var(--radius);font-size:.65rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s ease;flex-shrink:0}.btn-create-agent:hover:not(:disabled){background:var(--bg-hover);border-color:var(--text-muted);color:var(--text-primary)}.btn-create-agent:active:not(:disabled){background:var(--bg-card)}.btn-create-agent:disabled{opacity:.5;cursor:not-allowed}.agent-modal{max-width:480px}.agent-modal h2{text-transform:none;font-size:1rem;margin-bottom:12px}.agent-modal-text{color:var(--text-secondary);font-size:.75rem;margin-bottom:16px;line-height:1.5}.agent-key-display{display:flex;align-items:center;gap:12px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:16px}.agent-key-display code{flex:1;font-size:.65rem;color:var(--success);word-break:break-all;font-family:monospace;line-height:1.4;min-width:0}.btn-copy{background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);padding:8px 14px;border-radius:var(--radius);font-size:.65rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.btn-copy:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-muted);transform:translateY(-1px)}.btn-copy:active{transform:translateY(0)}.btn-copy.copied{background:#34d39926;border-color:var(--success);color:var(--success)}.agent-modal .checkbox-label{margin-bottom:16px}.agent-modal .confirm-actions{margin-top:0}.btn-create-account{width:100%;background:transparent;border:1px solid var(--border);color:var(--text-secondary);padding:10px 16px;border-radius:var(--radius);font-size:.7rem;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:8px}.btn-create-account:hover:not(:disabled){background:var(--bg-hover);border-color:var(--text-muted);color:var(--text-primary)}.btn-create-account:disabled{opacity:.5;cursor:not-allowed}.extended-credentials{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:12px}.credential-row{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--border-light);gap:12px}.credential-row:last-child{border-bottom:none}.credential-label{color:var(--text-muted);font-size:.6rem;white-space:nowrap;flex-shrink:0}.credential-row code{color:var(--success);font-size:.55rem;font-family:monospace;word-break:break-all;text-align:right}.btn-copy.full-width{width:100%;margin-bottom:12px}