*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #f8fafc;--color-surface: #ffffff;--color-border: #e2e8f0;--color-border-hover: #cbd5e1;--color-text: #0f172a;--color-text-secondary: #64748b;--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-primary-soft: rgba(59, 130, 246, .08);--color-success: #22c55e;--color-success-soft: #dcfce7;--color-error: #ef4444;--color-error-soft: #fef2f2;--color-warning: #f59e0b;--color-warning-soft: #fef3c7;--radius: 8px;--radius-lg: 12px;--radius-full: 100px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--font-mono: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace}[data-theme=dark]{--color-bg: #0f172a;--color-surface: #1e293b;--color-border: #334155;--color-border-hover: #475569;--color-text: #f1f5f9;--color-text-secondary: #94a3b8;--color-primary: #60a5fa;--color-primary-hover: #3b82f6;--color-primary-soft: rgba(96, 165, 250, .12);--color-success: #4ade80;--color-success-soft: rgba(74, 222, 128, .12);--color-error: #f87171;--color-error-soft: rgba(248, 113, 113, .12);--color-warning: #fbbf24;--color-warning-soft: rgba(251, 191, 36, .12);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased}.app-container{max-width:700px;margin:0 auto;padding:32px 20px 64px}.app-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.app-header-text h1{font-size:1.4rem;font-weight:700;letter-spacing:-.025em;color:var(--color-text)}.app-header-text p{color:var(--color-text-secondary);font-size:.82rem;margin-top:2px}.btn-header-action{font-size:.75rem;padding:0 10px;height:32px;color:var(--color-text-secondary);border:1px solid var(--color-border);background:transparent;border-radius:var(--radius)}.btn-header-action:hover:not(:disabled){color:var(--color-error);border-color:var(--color-error);background:var(--color-error-soft)}button,.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:.85rem;font-weight:500;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:all .15s ease}button:hover:not(:disabled){background:var(--color-bg);border-color:var(--color-border-hover)}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary);font-weight:600}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn-logout{font-size:.78rem;padding:5px 10px;color:var(--color-text-secondary)}.btn-rerun{font-size:.78rem;padding:5px 12px;color:var(--color-text-secondary)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}.config-card{margin-bottom:0}.config-card .form-group:last-child{margin-bottom:0}.tabs{display:flex;gap:0;margin-top:20px;border-bottom:1px solid var(--color-border)}.tab{padding:10px 18px;font-size:.82rem;font-weight:500;border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease;position:relative;bottom:-1px}.tab:hover:not(:disabled){color:var(--color-text);background:transparent;border-color:transparent;border-bottom-color:var(--color-border-hover)}.tab--active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.tab--active:hover:not(:disabled){color:var(--color-primary);border-bottom-color:var(--color-primary)}.tab-content{margin-top:16px}.flow-tab-layout{display:flex;flex-direction:column;gap:16px}.form-group{margin-bottom:14px}.form-group label{display:block;font-size:.72rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}.form-group input,.form-group select{display:block;width:100%;padding:9px 12px;font-size:.875rem;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}.form-group input:disabled,.form-group select:disabled{background:var(--color-bg);opacity:.7}.form-error{color:var(--color-error);font-size:.78rem;margin-top:4px}.env-details{font-size:.75rem;color:var(--color-text-secondary);margin-top:5px;font-family:var(--font-mono)}.step-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:14px 16px;margin-bottom:8px;transition:border-color .2s ease}.step-card--success{border-left:3px solid var(--color-success)}.step-card--fail{border-left:3px solid var(--color-error)}.step-card--in-progress{border-left:3px solid var(--color-primary)}.step-card-header{display:flex;justify-content:space-between;align-items:center}.step-card-header h3{font-size:.85rem;font-weight:600}.step-status{font-size:.75rem;font-weight:600}.step-status--idle{color:var(--color-text-secondary)}.step-status--in-progress{color:var(--color-primary)}.step-status--success{color:var(--color-success)}.step-status--fail{color:var(--color-error)}.step-status--skipped{color:var(--color-text-secondary)}.step-duration{font-size:.72rem;color:var(--color-text-secondary);margin-top:3px}.step-detail{margin-top:8px}.step-http-status{font-size:.72rem;color:var(--color-text-secondary);margin-bottom:4px}.step-response{background:var(--color-bg);padding:8px 10px;border-radius:var(--radius);overflow:auto;font-size:.75rem;font-family:var(--font-mono);max-height:180px}.step-error{background:var(--color-error-soft);color:var(--color-error);padding:8px 10px;border-radius:var(--radius);font-size:.8rem;margin-top:8px}.step-correlation-id{font-size:.72rem;font-family:var(--font-mono);color:var(--color-text-secondary);margin-bottom:4px}.flow-results{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}.flow-results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.flow-results-header h2{font-size:1rem;font-weight:600;color:var(--color-text)}.flow-total{font-size:.8rem;font-weight:500;color:var(--color-text-secondary);margin-top:10px;text-align:right}.flow-error{background:var(--color-error-soft);color:var(--color-error);padding:10px 14px;border-radius:var(--radius);font-size:.82rem;margin-top:10px}.flow-correlation-id{font-size:.72rem;font-family:var(--font-mono);color:var(--color-text-secondary);margin-top:6px;text-align:right}.auth-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:20px}.auth-error h2{font-size:1.2rem;margin-bottom:8px}.auth-error p{color:var(--color-text-secondary);margin-bottom:20px}.loading{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--color-text-secondary);font-size:.875rem}.auth-section{margin-bottom:0;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:14px}.auth-section-label{display:block;font-size:.8rem;font-weight:600;color:var(--color-text);margin-bottom:4px}.auth-section-subtitle{display:block;font-size:.7rem;color:var(--color-text-secondary);font-family:var(--font-mono);margin-bottom:8px}.auth-toggle-container{margin-bottom:10px}.auth-toggle{display:flex;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:3px;gap:2px}.auth-toggle-btn{flex:1;padding:5px 10px;font-size:.75rem;font-weight:500;border:none;border-radius:6px;background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.auth-toggle-btn--active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}.auth-toggle-btn:hover:not(:disabled):not(.auth-toggle-btn--active){color:var(--color-text)}.auth-panel-wrapper{position:relative;overflow:hidden}.auth-panel{transition:opacity .2s ease,max-height .25s ease,transform .2s ease;transform-origin:top}.auth-panel--visible{opacity:1;max-height:500px;transform:translateY(0)}.auth-panel--hidden{opacity:0;max-height:0;transform:translateY(-6px);pointer-events:none;overflow:hidden}.auth-hint{font-size:.75rem;color:var(--color-text-secondary);margin-bottom:10px;line-height:1.4}.btn-fetch-token{width:100%;margin-top:4px}.auth-error-msg{color:var(--color-error);font-size:.78rem;margin-top:6px}.auth-success-msg{color:var(--color-success);font-size:.78rem;margin-top:6px}.auth-token-readonly{font-size:.72rem!important;color:var(--color-text-secondary)!important;background:var(--color-bg)!important;font-family:var(--font-mono)!important}.auth-token-display{margin-top:10px;padding:8px 10px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);display:flex;align-items:center;gap:8px}.auth-token-label{font-size:.68rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.auth-token-value{font-size:.7rem;color:var(--color-text-secondary);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-fetch-token{width:100%;margin-top:4px;padding:7px 12px;font-size:.78rem;font-weight:500;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-primary);cursor:pointer;transition:all .15s ease}.btn-fetch-token:hover:not(:disabled){background:var(--color-primary-soft);border-color:var(--color-primary)}.btn-fetch-token:disabled{opacity:.5;cursor:not-allowed;color:var(--color-text-secondary)}.event-discovery-group{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:14px;margin-bottom:14px}.event-discovery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.event-discovery-label{font-size:.8rem;font-weight:600;color:var(--color-text)}.event-discovery-hint{font-size:.7rem;color:var(--color-text-secondary);font-style:italic}.event-discovery-group .form-group{margin-bottom:10px}.event-discovery-group .form-group:last-child{margin-bottom:0}.event-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.event-selector-header label{display:block;font-size:.72rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:0}.btn-refresh,.btn-icon-refresh{font-size:.72rem;padding:3px 8px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease}.btn-refresh:hover:not(:disabled),.btn-icon-refresh:hover:not(:disabled){background:var(--color-bg);color:var(--color-text);border-color:var(--color-border-hover)}.btn-refresh:disabled,.btn-icon-refresh:disabled{opacity:.5;cursor:not-allowed}.event-selector select,.event-selector input{display:block;width:100%;padding:9px 12px;font-size:.875rem;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);transition:border-color .15s ease;font-family:inherit}.event-selector select:focus,.event-selector input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}.event-selector select:disabled,.event-selector input:disabled{background:var(--color-bg);opacity:.7}.event-selector-hint{font-size:.72rem;color:var(--color-text-secondary);margin-bottom:5px;font-style:italic}.event-selector-loading{font-size:.72rem;color:var(--color-primary);margin-bottom:5px}.event-selector-error{font-size:.72rem;color:var(--color-error);margin-bottom:5px}.flow-type-selector{margin-bottom:16px}.flow-type-label{display:block;font-size:.8rem;font-weight:600;color:var(--color-text);margin-bottom:8px}.flow-type-options{display:flex;gap:8px}.flow-type-option{flex:1;display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;transition:all .15s ease;background:var(--color-surface)}.flow-type-option:hover{border-color:var(--color-border-hover);background:var(--color-bg)}.flow-type-option.active{border-color:var(--color-primary);background:var(--color-primary-soft)}.flow-type-option input[type=radio]{margin-top:2px;accent-color:var(--color-primary)}.flow-type-content{display:flex;flex-direction:column;gap:1px}.flow-type-name{font-size:.82rem;font-weight:600;color:var(--color-text)}.flow-type-description{font-size:.7rem;color:var(--color-text-secondary);line-height:1.4}.status-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}.status-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.status-panel-header h2{font-size:1rem;font-weight:600;color:var(--color-text)}.status-empty{text-align:center;padding:28px 16px;color:var(--color-text-secondary);font-size:.85rem;line-height:1.5}.status-loading{text-align:center;padding:20px;color:var(--color-primary);font-size:.82rem}.status-error{background:var(--color-error-soft);color:var(--color-error);padding:8px 12px;border-radius:var(--radius);font-size:.8rem}.status-device-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:12px 14px;margin-bottom:16px}.status-device-header{display:flex;justify-content:space-between;align-items:center}.status-device-label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em}.status-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--radius-full);font-size:.7rem;font-weight:600;letter-spacing:.01em}.status-badge--success{background:var(--color-success-soft);color:#166534}.status-badge--warning{background:var(--color-warning-soft);color:#92400e}.status-badge--neutral{background:var(--color-bg);color:var(--color-text-secondary);border:1px solid var(--color-border)}.status-subscriptions-header{margin-bottom:10px}.status-subscriptions-header h3{font-size:.85rem;font-weight:600;color:var(--color-text)}.status-empty-subs{text-align:center;padding:16px;color:var(--color-text-secondary);font-size:.8rem;background:var(--color-bg);border-radius:var(--radius);border:1px dashed var(--color-border)}.status-table-wrapper{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius)}.status-table{width:100%;border-collapse:collapse;font-size:.8rem}.status-table thead{background:var(--color-bg)}.status-table th{padding:7px 12px;text-align:left;font-size:.68rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--color-border)}.status-table td{padding:9px 12px;border-bottom:1px solid var(--color-border);vertical-align:middle}.status-table tr:last-child td{border-bottom:none}.status-table tr:hover{background:var(--color-primary-soft)}.status-table-mono{font-family:var(--font-mono);font-size:.75rem}.status-table-actions{text-align:right;white-space:nowrap}.type-badge{display:inline-flex;padding:1px 7px;border-radius:var(--radius-full);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.type-badge--live{background:#dbeafe;color:#1e40af}.type-badge--drop{background:#f3e8ff;color:#6b21a8}.btn-delete-sub{padding:3px 7px;font-size:.75rem;border:1px solid transparent;background:transparent;cursor:pointer;border-radius:var(--radius);transition:all .15s ease;color:var(--color-text-secondary)}.btn-delete-sub:hover:not(:disabled){background:var(--color-error-soft);border-color:#fecaca;color:var(--color-error)}.confirm-delete{display:inline-flex;align-items:center;gap:5px;font-size:.72rem}.confirm-delete-text{color:var(--color-error);font-weight:500}.btn-confirm-yes{padding:2px 7px;font-size:.68rem;background:var(--color-error);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500}.btn-confirm-yes:hover:not(:disabled){background:#dc2626;border-color:transparent}.btn-confirm-no{padding:2px 7px;font-size:.68rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;cursor:pointer;font-weight:500}.btn-confirm-no:hover:not(:disabled){background:var(--color-bg)}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInSubtle{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.fade-in{animation:fadeIn .25s ease both}.step-animate{animation:slideUp .3s ease both}.step-card--in-progress{animation:pulse 1.5s ease-in-out infinite}.tab-pane{transition:opacity .2s ease,transform .2s ease}.tab-pane--active{opacity:1;transform:translateY(0);pointer-events:auto}.tab-pane--hidden{opacity:0;position:absolute;top:-9999px;left:-9999px;pointer-events:none}.tab-content{position:relative}.status-device-card{animation:fadeIn .2s ease both}.status-subscriptions{animation:fadeIn .25s ease .05s both}.status-table tr{animation:fadeInSubtle .2s ease both}.status-table tr:nth-child(1){animation-delay:0ms}.status-table tr:nth-child(2){animation-delay:40ms}.status-table tr:nth-child(3){animation-delay:80ms}.status-table tr:nth-child(4){animation-delay:.12s}.status-table tr:nth-child(5){animation-delay:.16s}.status-table tr:nth-child(6){animation-delay:.2s}.status-table tr:nth-child(7){animation-delay:.24s}.status-table tr:nth-child(8){animation-delay:.28s}.status-table tr:nth-child(9){animation-delay:.32s}.status-table tr:nth-child(10){animation-delay:.36s}.flow-results{animation:slideUp .3s ease both}.status-panel,.flow-error,.status-error{animation:fadeIn .2s ease both}.confirm-delete{animation:fadeIn .15s ease both}.btn-primary{transition:all .15s ease,transform .1s ease}.btn-primary:active:not(:disabled){transform:scale(.97)}.status-badge{animation:fadeIn .3s ease .1s both}.status-loading{animation:pulse 1.2s ease-in-out infinite}.config-card{animation:fadeIn .3s ease both}.card{animation:fadeIn .25s ease both}.form-group{transition:opacity .2s ease,max-height .25s ease}.sandbox-toggle{display:flex;align-items:center;gap:6px;margin-bottom:14px}.toggle-row{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.82rem}.toggle-row input[type=checkbox]{width:auto;margin:0;accent-color:var(--color-primary)}.toggle-label{font-size:.82rem;font-weight:500;color:var(--color-text);text-transform:none;letter-spacing:0}.toggle-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--color-border);color:var(--color-text-secondary);font-size:.6rem;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-info-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);width:220px;padding:8px 10px;background:var(--color-text);color:var(--color-surface);font-size:.7rem;font-weight:400;line-height:1.4;border-radius:var(--radius);white-space:normal;z-index:10;animation:fadeIn .15s ease both}.btn-advanced-toggle{padding:0;border:none;background:transparent;font-size:.72rem;font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:color .15s ease}.btn-advanced-toggle:hover:not(:disabled){color:var(--color-text);background:transparent;border:none}.btn-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease;font-size:1rem;line-height:1}.btn-theme-toggle:hover:not(:disabled){color:var(--color-text);border-color:var(--color-border-hover);background:var(--color-bg)}.app-header-actions{display:flex;align-items:center;gap:6px}[data-theme=dark] .status-badge--success{background:#4ade8026;color:#86efac}[data-theme=dark] .status-badge--warning{background:#fbbf2426;color:#fde68a}[data-theme=dark] .type-badge--live{background:#60a5fa26;color:#93c5fd}[data-theme=dark] .type-badge--drop{background:#c084fc26;color:#d8b4fe}[data-theme=dark] .toggle-info-tip{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}