.ai-main { padding: 0; overflow: hidden; flex-direction: row; background: #f6f7f9; }
#aiRoot { display: grid; grid-template-columns: 252px minmax(0, 1fr); width: 100%; min-height: 100%; }
.ai-project-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border-right: 1px solid var(--line); }
.ai-project-head { padding: 20px 16px 14px; border-bottom: 1px solid var(--line2); }
.ai-project-head h2 { font-size: 18px; margin: 0; }
.ai-project-head .search { width: 100%; margin-top: 12px; }
.ai-project-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.ai-project { position: relative; border: 1px solid transparent; background: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; align-items: center; gap: 9px; padding: 11px 9px; border-radius: 11px; text-align: left; cursor: pointer; color: var(--ink); }
.ai-project:hover { background: #f7f8fa; border-color: var(--line2); } .ai-project.on { background: var(--accent-soft); border-color: #dfe5ff; }
.ai-project.on::before { content: ""; position: absolute; inset: 9px auto 9px -1px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.ai-project b, .ai-project small { display: block; } .ai-project small { color: var(--muted); margin-top: 3px; }
.ai-project-mark { font-size: 9px; min-width: 34px; text-align: center; color: var(--accent); background: var(--accent-soft); padding: 4px; border-radius: 6px; font-weight: 700; }
.ai-project.on .ai-project-mark { background: #fff; }
.ai-project-v { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.ai-workspace { min-width: 0; padding: 22px 24px 32px; overflow: auto; }
.ai-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ai-top h1 { margin: 4px 0; font-size: 28px; line-height: 1.18; letter-spacing: -.02em; }
.ai-demo-banner { margin: 16px 0 0; padding: 10px 13px; border: 1px solid #e9c45d; background: #fff9e9; color: #765000; border-radius: 10px; font-size: 12px; }
.ai-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin: 18px 0; overflow-x: auto; scrollbar-width: thin; }
.ai-tabs button { border: 0; background: none; color: var(--muted); padding: 11px 2px 10px; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; }
.ai-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.ai-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ai-kpi { min-height: 112px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 5px; }
.ai-kpi > span, .ai-kpi small { color: var(--muted); font-size: 12px; } .ai-kpi b { font-family: inherit; font-size: clamp(21px, 2vw, 27px); line-height: 1.05; letter-spacing: -.025em; font-weight: 650; font-variant-numeric: tabular-nums; }
.ai-kpi.warn small { color: var(--warn); }
.ai-grid2 { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .75fr); align-items: stretch; gap: 14px; margin-top: 14px; }
.ai-grid2 > .card { min-height: 282px; padding: 18px; }
.ai-chart { min-width: 0; }
.ai-chart h3, .ai-grid2 h3, .ai-settings h3, .ai-prompt-add h3 { margin: 0 0 12px; }
.ai-chart > .row { align-items: flex-start; flex-wrap: wrap; }
.ai-chart > .row .small { margin-left: auto; }
.ai-chart-bars { position: relative; height: 205px; display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); align-items: end; gap: 12px; padding: 18px 12px 0; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent 50px, #f0f2f5 51px); }
.ai-chart-bars > div { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; }
.ai-chart-bars i { width: clamp(30px, 24%, 46px); max-width: 46px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #3451d1, #7f91eb); box-shadow: 0 5px 14px rgba(52, 81, 209, .16); }
.ai-chart-bars b { font-size: 12px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; } .ai-chart-bars span { font-size: 11px; color: var(--muted); }
.ai-source-list { display: flex; flex-direction: column; }
.ai-source-list > div { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; column-gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line2); }
.ai-source-list > div:last-child { border-bottom: 0; }
.ai-source-list small { grid-column: 2; color: var(--muted); }
.ai-source-dot { width: 9px; height: 9px; border-radius: 50%; background: #6574c9; } .ai-source-dot.webb24 { background: #d5932d; }
.ai-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 14px; }
.ai-section-head h2 { font-size: 18px; margin: 0 0 3px; }
.ai-section-head p { margin: 0; color: var(--muted); max-width: 720px; }
.ai-section-meta { display: flex; flex-direction: column; align-items: flex-end; min-width: max-content; color: var(--muted); font-size: 11px; }
.ai-section-meta b { color: var(--ink); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.ai-filterbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.ai-filter-label { margin-right: 4px; color: var(--muted); font-size: 12px; }
.ai-table-wrap { overflow: auto; margin-bottom: 0; }
.ai-table { width: 100%; min-width: 900px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.ai-table th { padding: 12px 14px; background: #fafbfc; border-bottom: 1px solid var(--line); color: #4b5563; font-size: 11px; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: .025em; }
.ai-table td { padding: 13px 14px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.ai-table tbody tr:last-child td { border-bottom: 0; }
.ai-table tbody tr:hover td { background: #fbfcff; }
.ai-table th:not(:first-child), .ai-table td:not(:first-child) { width: 96px; text-align: center; }
.ai-table th:first-child, .ai-table td:first-child { width: 320px; }
.ai-table td:first-child { min-width: 320px; max-width: 460px; }
.ai-table td:first-child b { font-size: 13px; line-height: 1.35; }
.ai-table td:first-child small { display: block; color: var(--muted); margin-top: 4px; }
.ai-answer-btn { border: 0; background: none; padding: 5px; cursor: pointer; border-radius: 8px; }
.ai-answer-btn:hover { background: #f0f2f7; }
.ai-cell { display: inline-grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 0 5px; min-width: 76px; font-variant-numeric: tabular-nums; }
.ai-cell small { grid-column: 1 / -1; margin-top: 2px; font: 10px/1.2 Onest, sans-serif; color: var(--muted); }
.ai-cell.yes { color: #147a45; } .ai-cell.no { color: var(--muted); } .ai-cell.nc { color: var(--warn); font-weight: 700; }
.ai-cell em { font-style: normal; font-size: 10px; color: var(--accent); background: var(--accent-soft); padding: 2px 4px; border-radius: 5px; }
.ai-empty { min-height: 220px; background: #fff; border: 1px dashed var(--line); border-radius: 12px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); }
.ai-empty b { color: var(--ink); font-size: 18px; }
.ai-source-ranking { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ai-rank-row { display: grid; grid-template-columns: 36px minmax(220px, 1fr) 100px 120px; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line2); }
.ai-rank-row:last-child { border-bottom: 0; }
.ai-rank-row.own { background: #f8f9ff; }
.ai-rank-no, .ai-prompt-no { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #f0f2f5; color: var(--muted); font-size: 12px; font-weight: 600; }
.ai-rank-row.own .ai-rank-no { background: var(--accent); color: #fff; }
.ai-rank-bar, .ai-visibility-track { height: 6px; margin-top: 9px; border-radius: 99px; background: #eceef2; overflow: hidden; }
.ai-rank-bar i, .ai-visibility-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3451d1, #7f91eb); }
.ai-rank-metric { display: flex; flex-direction: column; align-items: flex-end; }
.ai-rank-metric b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ai-rank-metric span { color: var(--muted); font-size: 10px; }
.ai-competitor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ai-competitor-card { padding: 16px; }
.ai-competitor-card.own { border-color: #cdd6ff; box-shadow: inset 0 3px 0 var(--accent); }
.ai-competitor-name { display: block; font-size: 15px; }
.ai-competitor-status { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.ai-competitor-card strong { font-size: 22px; }
.ai-competitor-foot { display: flex; justify-content: space-between; margin-top: 12px; color: var(--muted); }
.ai-competitor-foot b { color: var(--ink); }
.ai-prompt-add { margin-bottom: 12px; padding: 16px; } .ai-prompt-add textarea { width: 100%; resize: vertical; margin-bottom: 8px; }
.ai-prompt-add .row .input { flex: 1; }
.ai-prompt-list { overflow: hidden; }
.ai-prompt-row { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-bottom: 1px solid var(--line2); }
.ai-prompt-row:last-child { border-bottom: 0; }
.ai-prompt-row b { display: block; font-size: 13px; line-height: 1.4; }
.ai-group-pill { display: inline-flex; margin-top: 5px; padding: 3px 7px; border-radius: 6px; background: #f0f2f5; color: var(--muted); font-size: 10px; }
.ai-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ai-form-grid label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; }
.ai-form-grid .wide { grid-column: 1 / -1; }
.ai-settings-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr); align-items: start; gap: 14px; }
.ai-settings-main, .ai-settings-sources { padding: 18px; }
.ai-source-checks { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.ai-source-checks label { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 9px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; }
.ai-source-checks b, .ai-source-checks small { display: block; }
.ai-source-checks small { margin-top: 2px; color: var(--muted); }
.ai-answer-drawer { width: min(760px, 94vw); }
.ai-answer-text { white-space: pre-wrap; line-height: 1.6; background: #f7f8fa; padding: 12px; border-radius: 10px; max-height: 42vh; overflow: auto; }
.ai-answer-sources { padding-left: 0; list-style: none; } .ai-answer-sources li { margin: 8px 0; }
.ai-answer-sources span, .ai-answer-sources small { display: block; } .ai-answer-sources small { color: var(--muted); overflow-wrap: anywhere; }
.ai-new-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ai-run-dialog { width: min(560px, 94vw); }
.ai-run-summary { margin: 14px 0; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; border: 1px solid var(--line); border-radius: 10px; background: #f7f8fa; }
.ai-run-summary b { text-align: right; font-variant-numeric: tabular-nums; }
.ai-run-dialog .warn { margin-top: 10px; padding: 10px 12px; border-radius: 9px; background: var(--warn-soft); }

@media (max-width: 760px) {
  #aiRoot { grid-template-columns: 1fr; }
  .ai-project-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .ai-project-head { padding: 14px 12px 12px; }
  .ai-project-list { display: grid; grid-template-columns: minmax(0, 1fr); max-height: 150px; overflow: auto; padding: 8px; }
  .ai-workspace { padding: 14px 12px 90px; }
  .ai-top { flex-direction: column; gap: 12px; } .ai-top > .row { width: 100%; flex-wrap: nowrap; }
  .ai-top > .row .btn { flex: 1; justify-content: center; }
  .ai-top h1 { font-size: 24px; }
  .ai-demo-banner { margin-top: 14px; line-height: 1.45; }
  .ai-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 14px 0 18px; padding: 3px; overflow: visible; border: 0; border-radius: 10px; background: #eceef2; }
  .ai-tabs button { min-width: 0; padding: 8px 4px; overflow: hidden; text-overflow: ellipsis; border: 0; border-radius: 7px; font-size: 12px; }
  .ai-tabs button.on { color: var(--ink); background: #fff; border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
  .ai-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ai-kpi { min-height: 106px; padding: 13px 14px; }
  .ai-kpi b { font-size: 23px; }
  .ai-grid2 { grid-template-columns: 1fr; }
  .ai-grid2 > .card { min-height: 0; padding: 15px; }
  .ai-chart > .row .small { width: 100%; margin-left: 0; }
  .ai-chart-bars { height: 200px; gap: 6px; padding-left: 2px; padding-right: 2px; }
  .ai-form-grid { grid-template-columns: 1fr; } .ai-form-grid .wide { grid-column: auto; }
  .ai-new-sources { grid-template-columns: 1fr; }
  .ai-section-head { align-items: flex-start; }
  .ai-section-meta { align-items: flex-end; }
  .ai-filter-label { width: 100%; }
  .ai-rank-row { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 13px; }
  .ai-rank-metric { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .ai-competitor-grid { grid-template-columns: 1fr; }
  .ai-settings-grid { grid-template-columns: 1fr; }
  .ai-prompt-row { align-items: flex-start; padding: 13px; }
  .ai-run-summary { grid-template-columns: 1fr; gap: 2px; }
  .ai-run-summary b { text-align: left; margin-bottom: 6px; }
}

@media (max-width: 360px) {
  .ai-kpis { grid-template-columns: 1fr; }
}