We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/floriansmeyers/SFLOW-AIRunner-MCP-PRD'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
/* ========================================
DESIGN SYSTEM - Corporate Light Blue
======================================== */
:root {
/* Backgrounds - Light Theme */
--bg-primary: #f8fafc;
--bg-secondary: #ffffff;
--bg-tertiary: #f1f5f9;
--bg-elevated: #e2e8f0;
/* Text - Dark for Light Theme */
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
/* Accent Colors - Corporate Blue */
--accent-blue: #2563eb;
--accent-blue-hover: #1d4ed8;
--accent-cyan: #0891b2;
/* Semantic Colors */
--success: #059669;
--warning: #d97706;
--error: #dc2626;
--info: #4f46e5;
/* Run Type Colors */
--manual-color: #d97706;
--scheduled-color: #2563eb;
--webhook-color: #7c3aed;
/* Borders */
--border-default: #e2e8f0;
--border-hover: #cbd5e1;
--border-focus: #2563eb;
/* Typography */
--font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
/* Spacing */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
}
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: var(--spacing-lg);
background: var(--bg-primary);
color: var(--text-primary);
-webkit-tap-highlight-color: rgba(59,130,246,0.2);
min-height: 100vh;
}
h1 {
color: var(--text-primary);
margin-bottom: var(--spacing-lg);
font-weight: 600;
letter-spacing: -0.5px;
}
h2 {
color: var(--text-primary);
font-weight: 600;
font-size: 18px;
margin: 0 0 var(--spacing-md) 0;
}
.container { max-width: 1400px; margin: 0 auto; padding: 0 10px; }
/* ========================================
CARDS - Sharp, Dark
======================================== */
.card {
background: var(--bg-secondary);
border: 1px solid var(--border-default);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.card:hover { border-color: var(--border-hover); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
/* ========================================
TABLES - Dark Headers, Accent Border
======================================== */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -10px;
padding: 0 10px;
}
table { width: 100%; border-collapse: collapse; min-width: 600px; }
th, td {
padding: var(--spacing-md) 12px;
text-align: left;
border-bottom: 1px solid var(--border-default);
font-size: 14px;
}
th {
background: var(--bg-tertiary);
font-weight: 600;
white-space: nowrap;
color: var(--text-secondary);
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
border-bottom: 2px solid var(--accent-blue);
}
td { color: var(--text-primary); }
tr:hover td { background: var(--bg-tertiary); }
/* ========================================
STATUS BADGES - Sharp Left Border
======================================== */
.status {
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.status.enabled { background: rgba(16, 185, 129, 0.15); color: var(--success); border-left: 3px solid var(--success); }
.status.disabled { background: rgba(239, 68, 68, 0.15); color: var(--error); border-left: 3px solid var(--error); }
.status.pending { background: rgba(245, 158, 11, 0.15); color: var(--warning); border-left: 3px solid var(--warning); }
.status.running { background: rgba(6, 182, 212, 0.15); color: var(--accent-cyan); border-left: 3px solid var(--accent-cyan); }
.status.finished { background: rgba(16, 185, 129, 0.15); color: var(--success); border-left: 3px solid var(--success); }
.status.error { background: rgba(239, 68, 68, 0.15); color: var(--error); border-left: 3px solid var(--error); }
/* Run type badges */
.badge-manual { background: rgba(245, 158, 11, 0.15); color: var(--manual-color); border-left: 3px solid var(--manual-color); }
.badge-scheduled { background: rgba(59, 130, 246, 0.15); color: var(--scheduled-color); border-left: 3px solid var(--scheduled-color); }
.badge-webhook { background: rgba(139, 92, 246, 0.15); color: var(--webhook-color); border-left: 3px solid var(--webhook-color); }
/* ========================================
BUTTONS - Sharp, Uppercase
======================================== */
.refresh-btn {
background: var(--accent-blue);
color: white;
border: none;
padding: 12px 20px;
cursor: pointer;
min-height: 44px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.15s ease;
}
.refresh-btn:hover { background: var(--accent-blue-hover); }
.view-btn {
background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-default);
padding: 8px 14px;
cursor: pointer;
font-size: 12px;
min-height: 36px;
font-weight: 500;
transition: all 0.15s ease;
}
.view-btn:hover { background: var(--bg-elevated); border-color: var(--border-hover); }
.delete-btn {
background: transparent;
color: var(--error);
border: 1px solid var(--error);
padding: 8px 14px;
cursor: pointer;
font-size: 12px;
min-height: 36px;
font-weight: 500;
transition: all 0.15s ease;
}
.delete-btn:hover { background: var(--error); color: white; }
/* ========================================
TABS - Underline Style
======================================== */
.tabs {
display: flex;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-lg);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 1px;
border-bottom: 1px solid var(--border-default);
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
padding: var(--spacing-md) var(--spacing-lg);
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 14px;
white-space: nowrap;
min-height: 44px;
flex-shrink: 0;
font-weight: 500;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all 0.15s ease;
}
.tab:hover { color: var(--text-primary); }
.tab.active {
color: var(--accent-blue);
border-bottom-color: var(--accent-blue);
}
.section { display: none; }
.section.active { display: block; }
.cron {
font-family: var(--font-mono);
background: var(--bg-tertiary);
color: var(--accent-cyan);
padding: 2px 8px;
font-size: 12px;
}
.output-summary {
font-size: 13px;
color: var(--text-secondary);
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ========================================
MODAL - Dark Theme
======================================== */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 1000;
}
.modal.active { display: flex; align-items: center; justify-content: center; }
.modal-content {
background: var(--bg-secondary);
border: 1px solid var(--border-default);
width: 90%;
max-width: 900px;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.modal-header {
padding: var(--spacing-lg);
border-bottom: 1px solid var(--border-default);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-tertiary);
}
.modal-header h3 { margin: 0; color: var(--text-primary); font-weight: 600; }
.modal-close {
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: var(--text-secondary);
padding: 5px 10px;
min-width: 44px;
min-height: 44px;
transition: color 0.15s ease;
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: var(--spacing-lg); overflow-y: auto; flex: 1; }
.modal-section { margin-bottom: var(--spacing-lg); }
.modal-section h4 {
margin: 0 0 var(--spacing-sm) 0;
color: var(--text-secondary);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.modal-section pre {
background: var(--bg-tertiary);
padding: var(--spacing-md);
overflow-x: auto;
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
font-size: 13px;
line-height: 1.5;
color: var(--text-primary);
font-family: var(--font-mono);
}
.modal-section .result-text {
background: rgba(59, 130, 246, 0.1);
border-left: 3px solid var(--accent-blue);
padding: var(--spacing-md);
font-size: 14px;
line-height: 1.6;
color: var(--text-primary);
}
.modal-section .error-text {
background: rgba(239, 68, 68, 0.1);
border-left: 3px solid var(--error);
padding: var(--spacing-md);
color: var(--text-primary);
}
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); }
.meta-item { background: var(--bg-tertiary); padding: 12px; }
.meta-item label {
font-size: 10px;
text-transform: uppercase;
color: var(--text-muted);
display: block;
margin-bottom: 4px;
letter-spacing: 0.5px;
}
.meta-item span { font-size: 14px; font-weight: 500; color: var(--text-primary); }
/* ========================================
LIVE INDICATOR
======================================== */
.live-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(6, 182, 212, 0.15);
color: var(--accent-cyan);
border-left: 3px solid var(--accent-cyan);
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.live-dot { width: 8px; height: 8px; background: var(--accent-cyan); border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.output-live {
background: #0d1117;
color: #c9d1d9;
font-family: var(--font-mono);
padding: var(--spacing-md);
max-height: 400px;
overflow-y: auto;
font-size: 13px;
line-height: 1.5;
border: 1px solid var(--border-default);
}
.output-live::-webkit-scrollbar { width: 8px; }
.output-live::-webkit-scrollbar-track { background: var(--bg-primary); }
.output-live::-webkit-scrollbar-thumb { background: var(--bg-elevated); }
.spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid var(--bg-elevated);
border-top-color: var(--accent-blue);
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-right: 6px;
vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ========================================
QUICK RUN FORM
======================================== */
.quick-run {
background: var(--bg-secondary);
border: 1px solid var(--border-default);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.quick-run h3 {
margin: 0 0 var(--spacing-md) 0;
font-size: 14px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.quick-run-form { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.quick-run-input {
flex: 1 1 200px;
padding: 12px var(--spacing-md);
border: 1px solid var(--border-default);
background: var(--bg-tertiary);
color: var(--text-primary);
font-size: 14px;
transition: all 0.15s ease;
}
.quick-run-input::placeholder { color: var(--text-muted); }
.quick-run-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.quick-run-btn {
background: var(--accent-blue);
color: white;
border: none;
padding: 12px var(--spacing-lg);
cursor: pointer;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
min-height: 44px;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.15s ease;
}
.quick-run-btn:hover { background: var(--accent-blue-hover); }
.quick-run-btn:disabled { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }
/* ========================================
SETTINGS
======================================== */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }
.settings-section {
background: var(--bg-tertiary);
padding: var(--spacing-lg);
border: 1px solid var(--border-default);
}
.settings-section h3 {
margin: 0 0 var(--spacing-md) 0;
font-size: 14px;
color: var(--text-primary);
border-bottom: 2px solid var(--accent-blue);
padding-bottom: var(--spacing-sm);
text-transform: uppercase;
letter-spacing: 1px;
}
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--spacing-sm); }
.tool-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm);
background: var(--bg-secondary);
border: 1px solid var(--border-default);
cursor: pointer;
transition: all 0.15s ease;
}
.tool-item:hover { border-color: var(--accent-blue); }
.tool-item.enabled { border-color: var(--success); background: rgba(16, 185, 129, 0.1); }
.tool-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent-blue); }
.tool-item label { cursor: pointer; font-size: 13px; flex: 1; color: var(--text-primary); }
.tool-item .tool-icon { font-size: 18px; }
.mcp-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.mcp-item {
display: flex;
gap: var(--spacing-sm);
align-items: center;
padding: var(--spacing-sm);
background: var(--bg-secondary);
border: 1px solid var(--border-default);
}
.mcp-item input {
flex: 1;
padding: var(--spacing-sm);
border: 1px solid var(--border-default);
background: var(--bg-tertiary);
color: var(--text-primary);
font-size: 14px;
}
.mcp-item .remove-btn {
background: transparent;
color: var(--error);
border: 1px solid var(--error);
padding: var(--spacing-sm) 12px;
cursor: pointer;
transition: all 0.15s ease;
}
.mcp-item .remove-btn:hover { background: var(--error); color: white; }
.add-mcp-btn {
background: var(--accent-blue);
color: white;
border: none;
padding: var(--spacing-sm) var(--spacing-md);
cursor: pointer;
margin-top: var(--spacing-sm);
font-weight: 500;
transition: all 0.15s ease;
}
.add-mcp-btn:hover { background: var(--accent-blue-hover); }
.save-settings-btn {
background: var(--success);
color: white;
border: none;
padding: 12px 30px;
cursor: pointer;
font-size: 14px;
margin-top: var(--spacing-lg);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.15s ease;
}
.save-settings-btn:hover { background: #059669; }
.settings-saved { color: var(--success); margin-left: var(--spacing-md); font-weight: 500; opacity: 0; transition: opacity 0.3s; }
.settings-saved.show { opacity: 1; }
/* ========================================
COST OVERVIEW
======================================== */
.cost-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.cost-card {
background: var(--bg-secondary);
border: 1px solid var(--border-default);
padding: var(--spacing-lg);
transition: border-color 0.15s ease;
}
.cost-card:hover { border-color: var(--border-hover); }
.cost-card.highlight {
background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
border-color: var(--accent-blue);
border-left: 4px solid var(--accent-blue);
}
.cost-card h4 {
margin: 0 0 var(--spacing-xs) 0;
font-size: 11px;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
letter-spacing: 1px;
}
.cost-card .value { font-size: 28px; font-weight: 700; margin: 0; color: var(--text-primary); }
.cost-card .subtext { font-size: 12px; color: var(--text-muted); margin-top: var(--spacing-xs); }
.cost-card.highlight h4 { color: var(--accent-blue); }
.cost-card.highlight .subtext { color: var(--text-secondary); }
.cost-card.highlight .value { color: var(--accent-blue); }
.token-bar { height: 4px; background: var(--bg-tertiary); margin-top: var(--spacing-sm); overflow: hidden; }
.token-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan)); }
/* ========================================
MARKDOWN CONTENT
======================================== */
.markdown-content { line-height: 1.6; color: var(--text-primary); }
.markdown-content h1, .markdown-content h2, .markdown-content h3 { margin-top: 1em; margin-bottom: 0.5em; font-weight: 600; color: var(--text-primary); }
.markdown-content h1 { font-size: 1.5em; }
.markdown-content h2 { font-size: 1.3em; }
.markdown-content h3 { font-size: 1.1em; }
.markdown-content p { margin: 0.5em 0; }
.markdown-content ul, .markdown-content ol { margin: 0.5em 0; padding-left: 1.5em; }
.markdown-content li { margin: 0.3em 0; }
.markdown-content a { color: var(--accent-blue); text-decoration: none; }
.markdown-content a:hover { text-decoration: underline; }
.markdown-content code { background: var(--bg-tertiary); padding: 2px 6px; font-size: 0.9em; font-family: var(--font-mono); color: var(--accent-cyan); }
.markdown-content pre { background: var(--bg-tertiary); padding: 12px; overflow-x: auto; margin: 0.5em 0; }
.markdown-content pre code { background: none; padding: 0; color: var(--text-primary); }
.markdown-content blockquote { border-left: 3px solid var(--accent-blue); margin: 0.5em 0; padding-left: 1em; color: var(--text-secondary); }
.markdown-content strong { font-weight: 600; }
.markdown-content hr { border: none; border-top: 1px solid var(--border-default); margin: 1em 0; }
/* ========================================
EXECUTION TRACE
======================================== */
.execution-trace { display: flex; flex-direction: column; gap: 12px; }
.trace-block { padding: 12px 16px; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; }
.trace-block.text { background: rgba(59, 130, 246, 0.1); border-left: 3px solid var(--accent-blue); color: var(--text-primary); }
.trace-block.tool-use { background: rgba(245, 158, 11, 0.1); border-left: 3px solid var(--warning); color: var(--text-primary); }
.trace-block.tool-result { background: rgba(16, 185, 129, 0.1); border-left: 3px solid var(--success); color: var(--text-primary); }
.trace-block.tool-result.error { background: rgba(239, 68, 68, 0.1); border-left: 3px solid var(--error); }
.trace-block.result { background: rgba(6, 182, 212, 0.1); border-left: 3px solid var(--accent-cyan); color: var(--text-primary); }
.trace-block.thinking { background: rgba(139, 92, 246, 0.1); border-left: 3px solid var(--info); opacity: 0.8; color: var(--text-primary); }
.trace-block .block-header {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: var(--spacing-sm);
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.trace-block .block-header svg { width: 14px; height: 14px; }
.tool-header { display: flex; align-items: center; gap: var(--spacing-sm); font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--warning); }
.tool-header svg { width: 16px; height: 16px; fill: currentColor; }
.tool-params { background: rgba(0,0,0,0.2); padding: var(--spacing-sm); overflow-x: auto; }
.tool-input-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.tool-input-key { color: var(--text-muted); font-weight: 500; }
.tool-input-value { word-break: break-all; white-space: pre-wrap; color: var(--text-primary); }
.tool-input-value.long { max-height: 100px; overflow-y: auto; }
.trace-content { white-space: pre-wrap; word-break: break-word; }
.trace-content pre { margin: 0; background: rgba(0,0,0,0.2); padding: var(--spacing-sm); overflow-x: auto; }
.tool-result-details summary.block-header { cursor: pointer; margin-bottom: 0; }
.tool-result-details[open] summary.block-header { margin-bottom: var(--spacing-sm); }
#live-output { max-height: 400px; overflow-y: auto; }
#live-output::-webkit-scrollbar { width: 8px; }
#live-output::-webkit-scrollbar-track { background: var(--bg-primary); }
#live-output::-webkit-scrollbar-thumb { background: var(--bg-elevated); }
#live-output::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* ========================================
MCP SERVER CARDS
======================================== */
.mcp-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.mcp-card {
background: var(--bg-secondary);
border: 1px solid var(--border-default);
padding: 14px;
transition: all 0.15s ease;
}
.mcp-card:hover { border-color: var(--border-hover); }
.mcp-card.enabled { background: rgba(16, 185, 129, 0.1); border-color: var(--success); }
.mcp-card.needs-config { background: rgba(245, 158, 11, 0.1); border-color: var(--warning); }
.mcp-card-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.mcp-card-header input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent-blue); }
.mcp-card-name { font-weight: 600; font-size: 14px; flex: 1; color: var(--text-primary); }
.mcp-card-status { font-size: 10px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.mcp-card-status.ready { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.mcp-card-status.needs-vars { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.mcp-card-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: var(--spacing-sm); line-height: 1.4; }
.mcp-env-vars { margin-top: var(--spacing-sm); padding-top: var(--spacing-sm); border-top: 1px solid var(--border-default); }
.mcp-env-var { margin-bottom: var(--spacing-sm); }
.mcp-env-var label { display: block; font-size: 10px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; font-family: var(--font-mono); text-transform: uppercase; }
.mcp-env-var input {
width: 100%;
padding: 6px var(--spacing-sm);
border: 1px solid var(--border-default);
background: var(--bg-tertiary);
color: var(--text-primary);
font-size: 12px;
}
.mcp-env-var input.has-value { border-color: var(--success); }
.mcp-loading { text-align: center; padding: var(--spacing-lg); color: var(--text-muted); }
.mcp-empty { text-align: center; padding: var(--spacing-lg); color: var(--text-muted); font-size: 13px; }
/* MCP Card Config and Toggle */
.mcp-card-title { font-weight: 600; font-size: 14px; flex: 1; color: var(--text-primary); }
.mcp-card-config { margin-top: var(--spacing-sm); padding-top: var(--spacing-sm); border-top: 1px solid var(--border-default); }
.mcp-var-row { margin-bottom: var(--spacing-sm); }
.mcp-var-row label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; font-family: var(--font-mono); }
.mcp-card-toggle { margin-top: var(--spacing-sm); padding-top: var(--spacing-sm); border-top: 1px solid var(--border-default); display: flex; align-items: center; gap: var(--spacing-sm); }
/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
background-color: var(--bg-elevated); transition: .3s; border-radius: 22px;
}
.toggle-slider:before {
position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
background-color: white; transition: .3s; border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider { background-color: var(--success); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }
/* ========================================
TOAST NOTIFICATIONS
======================================== */
.toast-container {
position: fixed;
top: var(--spacing-lg);
right: var(--spacing-lg);
z-index: 9999;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
pointer-events: none;
}
.toast {
background: var(--bg-elevated);
border-left: 3px solid var(--accent-blue);
padding: var(--spacing-md);
min-width: 300px;
max-width: 400px;
animation: slideIn 0.3s ease;
pointer-events: auto;
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--error); }
.toast-warning { border-left-color: var(--warning); }
.toast-message { flex: 1; color: var(--text-primary); font-size: 14px; }
.toast-close {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 18px;
padding: 0;
line-height: 1;
}
.toast-close:hover { color: var(--text-primary); }
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
.toast.hiding { animation: slideOut 0.3s ease forwards; }
/* ========================================
CONFIRMATION MODAL
======================================== */
.confirm-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 2000;
align-items: center;
justify-content: center;
}
.confirm-modal.active { display: flex; }
.confirm-content {
background: var(--bg-secondary);
border: 1px solid var(--border-default);
padding: var(--spacing-lg);
max-width: 400px;
width: 90%;
}
.confirm-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--spacing-sm) 0;
}
.confirm-message {
color: var(--text-secondary);
font-size: 14px;
margin-bottom: var(--spacing-lg);
line-height: 1.5;
}
.confirm-buttons {
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
}
.confirm-btn {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.confirm-btn-cancel {
background: var(--bg-tertiary);
border: 1px solid var(--border-default);
color: var(--text-primary);
}
.confirm-btn-cancel:hover { background: var(--bg-elevated); }
.confirm-btn-danger {
background: var(--error);
border: none;
color: white;
}
.confirm-btn-danger:hover { background: #dc2626; }
/* ========================================
RUN CARDS (Manual Runs Section)
======================================== */
.run-cards { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.run-card {
background: var(--bg-tertiary);
border: 1px solid var(--border-default);
padding: var(--spacing-md);
cursor: pointer;
transition: all 0.15s ease;
}
.run-card:hover { border-color: var(--border-hover); background: var(--bg-elevated); }
.run-card--manual { border-left: 3px solid var(--manual-color); }
.run-card--scheduled { border-left: 3px solid var(--scheduled-color); }
.run-card--webhook { border-left: 3px solid var(--webhook-color); }
.run-card__prompt {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.run-card__icon {
color: var(--text-muted);
font-family: var(--font-mono);
font-weight: bold;
}
.run-card__text {
flex: 1;
color: var(--text-primary);
font-size: 14px;
line-height: 1.4;
word-break: break-word;
}
.run-card__meta {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.run-card__time {
color: var(--text-muted);
font-size: 12px;
}
.run-card__stats {
color: var(--text-muted);
font-size: 12px;
margin-left: auto;
}
/* ========================================
RESPONSIVE - TABLET
======================================== */
@media (max-width: 768px) {
body { padding: 12px; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
.card { padding: var(--spacing-md); margin-bottom: var(--spacing-md); }
.cost-overview { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); }
.cost-card { padding: var(--spacing-md); }
.cost-card .value { font-size: 22px; }
.mcp-cards-grid { grid-template-columns: 1fr; }
.tool-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
/* ========================================
RESPONSIVE - MOBILE
======================================== */
@media (max-width: 480px) {
body { padding: var(--spacing-sm); }
h1 { font-size: 20px; margin-bottom: 12px; }
h2 { font-size: 14px; }
.container { padding: 0 var(--spacing-xs); }
.cost-overview { grid-template-columns: 1fr; gap: var(--spacing-sm); }
.cost-card { padding: 12px; }
.cost-card .value { font-size: 24px; }
.cost-card h4 { font-size: 10px; }
.quick-run { padding: var(--spacing-md); }
.quick-run h3 { font-size: 12px; margin-bottom: var(--spacing-sm); }
.quick-run-form { flex-direction: column; }
.quick-run-btn { width: 100%; }
.tabs { gap: 0; margin-bottom: var(--spacing-md); }
.tab { padding: var(--spacing-sm) var(--spacing-md); font-size: 12px; }
.card { padding: 12px; }
th, td { padding: var(--spacing-sm); font-size: 12px; }
.refresh-btn { width: 100%; margin-bottom: var(--spacing-sm); }
.view-btn, .delete-btn { padding: var(--spacing-sm); font-size: 11px; }
.tool-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xs); }
.tool-item { padding: var(--spacing-xs); }
.tool-item label { font-size: 11px; }
.meta-grid { grid-template-columns: 1fr; }
.settings-section { padding: var(--spacing-md); }
.settings-section h3 { font-size: 12px; padding-bottom: var(--spacing-xs); margin-bottom: var(--spacing-sm); }
.save-settings-btn { width: 100%; padding: 14px var(--spacing-lg); }
.modal-content { width: 100%; height: 100%; max-height: 100%; margin: 0; }
.modal-header { padding: var(--spacing-md); position: sticky; top: 0; background: var(--bg-tertiary); z-index: 10; }
.modal-header h3 { font-size: 14px; }
.modal-close { font-size: 32px; }
.modal-body { padding: var(--spacing-md); }
.trace-block { padding: var(--spacing-sm) 12px; font-size: 11px; }
.mcp-card { padding: 12px; }
.mcp-card-name { font-size: 12px; }
.toast-container { top: var(--spacing-sm); right: var(--spacing-sm); left: var(--spacing-sm); }
.toast { min-width: auto; width: 100%; }
}
/* ========================================
RESPONSIVE - SMALL MOBILE
======================================== */
@media (max-width: 360px) {
.tab { padding: var(--spacing-xs) var(--spacing-sm); font-size: 11px; }
.cost-card .value { font-size: 20px; }
.tool-grid { grid-template-columns: 1fr 1fr; }
}