/* frontend/css/main.css — AgentsMD.pro */
/* Базовые стили для формы и результата */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg: #ffffff;
  --color-bg-2: #f8f8f7;
  --color-bg-3: #f0efec;
  --color-text: #1a1a18;
  --color-text-2: #666660;
  --color-text-3: #9c9c96;
  --color-border: rgba(0,0,0,0.10);
  --color-border-2: rgba(0,0,0,0.18);
  --color-accent: #1a1a18;
  --color-accent-hover: #333330;
  --color-error: #d4321c;
  --color-success: #1d7a4a;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a18;
    --color-bg-2: #222220;
    --color-bg-3: #2a2a28;
    --color-text: #f0efe8;
    --color-text-2: #a0a09a;
    --color-text-3: #666660;
    --color-border: rgba(255,255,255,0.10);
    --color-border-2: rgba(255,255,255,0.18);
    --color-accent: #f0efe8;
    --color-accent-hover: #d0cfc8;
  }
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); color: var(--color-text); background: var(--color-bg); line-height: 1.6; }

/* ---- Layout ---- */
.container { max-width: 760px; margin: 0 auto; padding: 0 1.25rem 4rem; }

/* ---- Header ---- */
.header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; border-bottom: 1px solid var(--color-border); margin-bottom: 2rem; }
.logo { font-size: 18px; font-weight: 600; color: var(--color-text); text-decoration: none; letter-spacing: -0.02em; }
.logo-dot { color: var(--color-text-3); }
.auth-status { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-2); }
.auth-email { color: var(--color-text); }

/* ---- Auth block ---- */
.auth-block { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.auth-block p { font-size: 13px; color: var(--color-text-2); margin-bottom: 0.75rem; }
.auth-form { display: flex; gap: 8px; }
.auth-form input { flex: 1; }
.auth-message { font-size: 12px; margin-top: 6px; color: var(--color-text-2); }

/* ---- Usage counter ---- */
.usage-counter { font-size: 13px; color: var(--color-text-2); margin-bottom: 1rem; padding: 6px 12px; background: var(--color-bg-2); border-radius: var(--radius-sm); display: inline-block; }

/* ---- Hero ---- */
.hero { margin-bottom: 2rem; }
.hero h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 0.5rem; }
.hero-sub { font-size: 15px; color: var(--color-text-2); max-width: 520px; }

/* ---- Templates ---- */
.templates-section { margin-bottom: 1.5rem; }
.templates-label { font-size: 12px; color: var(--color-text-3); margin-bottom: 8px; }
.templates-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.template-chip { font-size: 13px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--color-border-2); background: var(--color-bg); color: var(--color-text); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.template-chip:hover { background: var(--color-bg-3); border-color: var(--color-text-3); }

/* ---- Form ---- */
.form-card { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group:last-child { margin-bottom: 0; }
label { display: block; font-size: 13px; font-weight: 500; color: var(--color-text); margin-bottom: 6px; }
.required { color: var(--color-error); }
textarea, input[type="text"], input[type="email"], select {
  width: 100%; padding: 9px 12px; font-size: 14px; font-family: var(--font);
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border-2); border-radius: var(--radius-sm);
  outline: none; transition: border-color 0.15s;
}
textarea:focus, input:focus, select:focus { border-color: var(--color-text-2); }
textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.char-count { font-size: 11px; color: var(--color-text-3); text-align: right; margin-top: 4px; }
.form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 1.25rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* ---- Buttons ---- */
.btn-primary {
  display: block; width: 100%; padding: 11px 20px; font-size: 15px; font-weight: 500;
  background: var(--color-accent); color: var(--color-bg); border: none;
  border-radius: var(--radius-md); cursor: pointer; transition: background 0.15s;
  position: relative;
}
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary { padding: 8px 16px; font-size: 13px; background: transparent; color: var(--color-text); border: 1px solid var(--color-border-2); border-radius: var(--radius-sm); cursor: pointer; }
.btn-secondary:hover { background: var(--color-bg-3); }
.btn-link { background: none; border: none; color: var(--color-text-2); font-size: 13px; cursor: pointer; text-decoration: underline; padding: 0; }
.loader { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Error ---- */
.error-message { margin-top: 10px; font-size: 13px; color: var(--color-error); }

/* ---- API Key block ---- */
.api-key-block { border: 1px solid var(--color-border-2); border-radius: var(--radius-md); margin-bottom: 1.5rem; overflow: hidden; }
.api-key-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; user-select: none; background: var(--color-bg-2); }
.api-key-header:hover { background: var(--color-bg-3); }
.api-key-label { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.api-key-summary { font-size: 12px; color: var(--color-text-3); flex: 1; }
.api-key-chevron { font-size: 10px; color: var(--color-text-3); transition: transform 0.2s; }
.api-key-chevron.open { transform: rotate(180deg); }
.api-key-body { padding: 12px 14px; border-top: 1px solid var(--color-border); background: var(--color-bg); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.status-dot--empty { background: var(--color-text-3); }
.status-dot--ok { background: var(--color-success); }
.provider-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.provider-tab { padding: 5px 14px; font-size: 13px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-2); background: transparent; color: var(--color-text-2); cursor: pointer; }
.provider-tab.active { background: var(--color-accent); color: var(--color-bg); border-color: transparent; }
.api-key-hint { font-size: 12px; color: var(--color-text-3); margin-bottom: 8px; }
.api-key-hint a { color: var(--color-text-2); }
.api-key-hint code { font-family: var(--font-mono); font-size: 11px; background: var(--color-bg-3); padding: 1px 4px; border-radius: 3px; }
.api-key-input-row { display: flex; gap: 8px; }
.api-key-input-row input { flex: 1; font-family: var(--font-mono); font-size: 13px; }
.api-key-message { font-size: 12px; margin-top: 6px; color: var(--color-success); }

/* ---- Footer ---- */
.footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-3); }
.footer a { color: var(--color-text-2); text-decoration: none; }
.footer a:hover { color: var(--color-text); }

/* ---- Modal ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1.25rem; }
.modal { background: var(--color-bg); border-radius: var(--radius-lg); padding: 2rem; max-width: 400px; width: 100%; text-align: center; }
.modal-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.modal-title { font-size: 18px; font-weight: 600; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.modal-sub { font-size: 14px; color: var(--color-text-2); margin-bottom: 1.5rem; }
.modal-cta { display: block; margin-bottom: 0.75rem; text-decoration: none; text-align: center; }

/* ---- Result page ---- */
.result-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 1.25rem; }
.btn-action { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; background: var(--color-bg-2); color: var(--color-text); border: 1px solid var(--color-border-2); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: background 0.15s; }
.btn-action:hover { background: var(--color-bg-3); }
.btn-new { background: var(--color-accent); color: var(--color-bg); border-color: transparent; margin-left: auto; }
.btn-new:hover { background: var(--color-accent-hover); color: var(--color-bg); }
.remaining-badge { font-size: 12px; color: var(--color-text-3); margin-right: auto; }
.result-meta { font-size: 12px; color: var(--color-text-3); }
.result-card { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem 2rem; overflow: hidden; }
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--color-accent); color: var(--color-bg); font-size: 13px; padding: 8px 18px; border-radius: 99px; z-index: 200; }
.loading-placeholder { color: var(--color-text-3); font-size: 14px; }

/* ---- Markdown body ---- */
.markdown-body { font-size: 14px; line-height: 1.7; color: var(--color-text); }
.markdown-body h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 1rem; }
.markdown-body h2 { font-size: 1.1rem; font-weight: 600; margin: 1.75rem 0 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--color-border); }
.markdown-body h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
.markdown-body p { margin: 0 0 0.75rem; }
.markdown-body ul, .markdown-body ol { margin: 0 0 0.75rem 1.25rem; }
.markdown-body li { margin-bottom: 0.25rem; }
.markdown-body code { font-family: var(--font-mono); font-size: 12px; background: var(--color-bg-3); padding: 1px 5px; border-radius: 3px; }
.markdown-body pre { background: var(--color-bg-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1rem 1.25rem; overflow-x: auto; margin: 0.75rem 0 1rem; }
.markdown-body pre code { background: none; padding: 0; font-size: 13px; color: inherit; }
@media (prefers-color-scheme: dark) {
  .markdown-body pre { background: #161b22; border-color: #30363d; }
  .markdown-body pre code { color: #e6edf3; }
}
.markdown-body table { width: 100%; border-collapse: collapse; margin: 0.75rem 0 1rem; font-size: 13px; }
.markdown-body th { text-align: left; padding: 6px 12px; background: var(--color-bg-3); border: 1px solid var(--color-border); font-weight: 500; }
.markdown-body td { padding: 6px 12px; border: 1px solid var(--color-border); }
.markdown-body blockquote { border-left: 3px solid var(--color-border-2); margin: 0.75rem 0; padding: 0.25rem 0 0.25rem 1rem; color: var(--color-text-2); }
.markdown-body strong { font-weight: 600; }
.markdown-body a { color: var(--color-text); }

/* ════════════════════════════════════════════
   V2: Step 2 Brief + Progress + Mode Selector
   ════════════════════════════════════════════ */

/* ---- Step 2 header ---- */
.step2-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.step2-title-group { flex: 1; display: flex; align-items: center; gap: 0.5rem; }
.step2-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
.optional-badge { font-size: 11px; color: var(--color-text-3); background: var(--color-bg-3); border: 1px solid var(--color-border); padding: 2px 8px; border-radius: 99px; }
.back-btn { background: none; border: none; color: var(--color-text-2); font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; }
.back-btn:hover { color: var(--color-text); }
.skip-btn { font-size: 13px; color: var(--color-text-3); text-decoration: none; }
.skip-btn:hover { color: var(--color-text-2); }

/* ---- Brief cards ---- */
.brief-card { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1rem; }
.brief-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-3); margin-bottom: 1rem; }
.brief-group { margin-bottom: 0.85rem; }
.brief-group:last-child { margin-bottom: 0; }
.brief-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 0.35rem; color: var(--color-text-2); }
.brief-group textarea, .brief-group input[type="text"], .brief-group select { width: 100%; }
.brief-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 500px) { .brief-row { grid-template-columns: 1fr; } }

/* ---- Mode selector ---- */
.mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.5rem; }
.mode-option { display: block; cursor: pointer; }
.mode-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.mode-card { border: 1.5px solid var(--color-border-2); border-radius: var(--radius-md); padding: 1rem; transition: all 0.15s; }
.mode-option:hover .mode-card { border-color: var(--color-accent); }
.mode-option input:checked + .mode-card { border-color: var(--color-accent); background: var(--color-bg-3); }
.mode-card-title { font-size: 14px; font-weight: 600; margin-bottom: 0.25rem; }
.mode-card-desc { font-size: 12px; color: var(--color-text-3); }

/* ---- Progress panel ---- */
.progress-card { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2rem; }
.progress-title { font-size: 15px; font-weight: 600; margin-bottom: 1.5rem; letter-spacing: -0.02em; }
.progress-stages { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.progress-stage { display: flex; align-items: center; gap: 0.75rem; font-size: 13px; color: var(--color-text-3); }
.progress-stage.ps-active { color: var(--color-text); }
.progress-stage.ps-done { color: var(--color-success); }
.progress-stage.ps-error { color: var(--color-error); }
.ps-icon { font-size: 14px; width: 18px; text-align: center; }
.ps-active .ps-icon { animation: spin 1s linear infinite; display: inline-block; }
.progress-note { font-size: 12px; color: var(--color-text-3); }

/* ---- Result v2: orchestrated file tabs ---- */
.file-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 0.75rem; }
.file-tab { font-size: 12px; padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-2); background: var(--color-bg-2); color: var(--color-text-2); cursor: pointer; font-family: var(--font-mono); transition: all 0.15s; }
.file-tab:hover { background: var(--color-bg-3); }
.file-tab.active { background: var(--color-accent); color: var(--color-bg); border-color: transparent; }
.btn-action--primary { background: var(--color-accent); color: var(--color-bg); border-color: transparent; }
.btn-action--primary:hover { background: var(--color-accent-hover); color: var(--color-bg); }

/* ── What is this? button & modal ── */
.what-is-btn { margin-top: 0.75rem; background: none; border: 1.5px solid var(--color-border-2); color: var(--color-text-2); font-size: 13px; padding: 6px 16px; border-radius: 99px; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.what-is-btn:hover { border-color: var(--color-accent); color: var(--color-text); }
.whatis-modal { max-width: 520px; text-align: left; padding: 2rem; max-height: 85vh; overflow-y: auto; position: relative; }
.whatis-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 18px; color: var(--color-text-3); cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; }
.whatis-close:hover { background: var(--color-bg-2); color: var(--color-text); }
.whatis-section { display: flex; flex-direction: column; gap: 1.1rem; }
.whatis-step { display: flex; gap: 0.85rem; align-items: flex-start; }
.whatis-num { flex-shrink: 0; width: 24px; height: 24px; background: var(--color-accent); color: var(--color-bg); border-radius: 50%; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.whatis-step strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 0.3rem; }
.whatis-step p { font-size: 13px; color: var(--color-text-2); line-height: 1.55; margin: 0; }
.whatis-step code { font-family: var(--font-mono); font-size: 11px; background: var(--color-bg-3); padding: 1px 4px; border-radius: 3px; }
.whatis-step em { font-style: italic; color: var(--color-text-3); }

/* ── Hero counter ── */
.hero-counter { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; justify-content: center; }
.hero-counter-num { font-size: 1.5rem; font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.hero-counter-label { font-size: 12px; color: var(--color-text-3); letter-spacing: 0.02em; text-transform: uppercase; }