.agent-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 10px; }
.agent-card { position: relative; width: 100%; display: grid; justify-items: center; gap: 6px; text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 14px 6px 10px; background: white; color: var(--ink); cursor: pointer; font: inherit; }
.agent-card.selected { border-color: var(--sea); background: #f0faf6; box-shadow: inset 0 0 0 1px var(--sea); }
.agent-logo { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; }
.agent-logo svg { width: 34px; height: 34px; }
.agent-card strong { font-size: 13.5px; }
.agent-logo.claude { background: #d97757; }
.agent-logo.openai { background: #101820; }
.agent-logo.gemini { background: linear-gradient(135deg,#4285f4,#9b72cb); }
.agent-logo.llama { background: #0a66c2; }
.agent-logo.deepseek { background: #4d6bfe; }
.agent-logo.grok { background: #101010; }
.agent-body { display: grid; gap: 2px; min-width: 0; }
.agent-body strong { font-size: 14px; }
.agent-model { font-size: 10.5px; color: var(--muted); }
.agent-body .tag { font-size: 11px; color: var(--muted); }
.agent-offer { font-size: 11.5px; color: var(--sea); font-weight: 700; margin: 0; }
.agent-offer small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; margin-top: 1px; }
.agent-reason { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.agent-card .check { position: absolute; top: 12px; right: 12px; color: transparent; font-size: 14px; }
.agent-card.selected .check { color: var(--sea); }
.budget-box { border: 1px dashed var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; background: #fbfdfb; }
.budget-box label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.budget-field { display: flex; align-items: center; gap: 8px; }
.budget-field span { font-weight: 700; color: var(--sea); }
.budget-field input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 14px; }
.budget-field button { border: 1px solid var(--line); background: white; border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 12px; cursor: pointer; color: var(--muted); }
.budget-box small { display: block; margin-top: 6px; color: var(--muted); font-size: 10.5px; }
@media (max-width: 430px) { .agent-list { grid-template-columns: repeat(2, 1fr); } .agent-logo { width: 56px; height: 56px; } }
.market-quote { margin: 0 0 13px; color: var(--sea); font-size: 11px; }
.small-btn { margin: 0 0 10px; padding: 9px 12px; font-size: 12.5px; }
.backtest-results { margin: 0 0 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: #fbfdfb; font-size: 12px; }
.backtest-results p { margin: 4px 0; color: var(--ink); }
.mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.mode-tab { border: 1px solid var(--line); background: white; border-radius: 9px; padding: 8px 4px; font: inherit; font-size: 12px; cursor: pointer; color: var(--muted); }
.mode-tab.selected { border-color: var(--sea); background: #f0faf6; color: var(--sea); font-weight: 600; }
.mode-note { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.mode-fields { display: grid; gap: 6px; margin-bottom: 6px; }