* { box-sizing: border-box; margin: 0; padding: 0; }
    body {
        background: #0a0a0f;
        color: #e8e8f0;
        font-family: var(--ui-font-family);
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 20px;
    }
    .setup-card {
        background: #1a1a2e;
        border: 2px solid #ffd700;
        border-radius: 16px;
        padding: 40px;
        max-width: 600px;
        width: 100%;
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.15);
    }
    h1 { font-family: var(--ui-font-family); font-size: 16px; color: #ffd700; text-align: center; margin-bottom: 8px; }
    .subtitle { text-align: center; color: #888; font-size: 15px; margin-bottom: 32px; }
    .step { display: none; }
    .step.active { display: block; }
    .step-title { font-family: var(--ui-font-family); font-size: 10px; color: #ffd700; margin-bottom: 16px; }
    .step-desc { color: #aaa; font-size: 15px; margin-bottom: 20px; line-height: 1.6; }
    label { display: block; font-size: 14px; color: #ccc; margin-bottom: 6px; margin-top: 16px; }
    input[type=text], input[type=password], input[type=number], select { width: 100%; padding: 12px 16px; background: #0d0d1e; border: 1px solid #2a2a4e; border-radius: 8px; color: #e8e8f0; font-size: 15px; outline: none; }
    input:focus { border-color: #ffd700; }
    .weather-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; align-items: start; }
    .weather-row input[type=text] { min-width: 0; }
    .weather-actions { margin-top: 8px; }
    .weather-actions button { width: 100%; white-space: nowrap; padding-left: 16px; padding-right: 16px; }
    .secret-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; align-items: start; }
    .secret-row input { min-width: 0; }
    @media (max-width: 560px) {
        .weather-row { grid-template-columns: minmax(0, 1fr) 100px; }
    }
    .btn-row { display: flex; justify-content: space-between; margin-top: 28px; gap: 12px; }
    button { padding: 12px 28px; border: 2px solid #ffd700; background: #1a1a2e; color: #ffd700; font-family: var(--ui-font-family); font-size: 10px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
    button:hover { background: #ffd700; color: #0a0a0f; }
    button.secondary { border-color: #555; color: #888; }
    button.secondary:hover { background: #333; color: #fff; }
    .status-box { margin-top: 16px; padding: 14px; border-radius: 8px; font-size: 15px; }
    .status-box.success { background: rgba(76,175,80,0.15); border: 1px solid #4caf50; color: #81c784; }
    .status-box.error { background: rgba(244,67,54,0.15); border: 1px solid #f44336; color: #ef9a9a; }
    .status-box.info { background: rgba(33,150,243,0.15); border: 1px solid #2196f3; color: #90caf9; }
    .agent-list-preview { max-height: 200px; overflow-y: auto; margin-top: 12px; }
    .agent-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1a1a2e; font-size: 15px; }
    .agent-row .emoji { font-size: 18px; }
    .agent-row .name { color: #e8e8f0; }
    .agent-row .role { color: #888; font-size: 13px; }
    .progress-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
    .dot { width: 10px; height: 10px; border-radius: 50%; background: #2a2a4e; transition: background 0.3s; }
    .dot.active { background: #ffd700; }
    .dot.done { background: #4caf50; }
    .note { background: #0d0d1e; border: 1px solid #2a2a4e; border-radius: 8px; padding: 16px; margin-top: 12px; font-size: 13px; color: #999; line-height: 1.6; }
    .note b { color: #ffd700; }