* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f0f2f5; color: #1a1a2e; }

.layout { display: grid; grid-template-columns: 340px 1fr; min-height: 100vh; }

/* Sidebar */
.sidebar { background: #1a1a2e; color: #e8e8f0; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.logo { font-size: 17px; font-weight: 700; color: #fff; }
.logo span { color: #6c63ff; }
.sidebar label { font-size: 11px; font-weight: 600; color: #9090b0; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; display: block; }
textarea { width: 100%; height: 160px; background: #0d0d1a; border: 1px solid #2a2a4a; border-radius: 8px; color: #e8e8f0; font-size: 13px; padding: 12px; resize: vertical; font-family: inherit; line-height: 1.6; }
textarea::placeholder { color: #4a4a6a; }
textarea:focus { outline: none; border-color: #6c63ff; }
.btn { width: 100%; padding: 11px; background: #6c63ff; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.btn:hover { background: #5a52e0; }
.btn:disabled { background: #2a2a4a; color: #5a5a7a; cursor: not-allowed; }
.hint { font-size: 11px; color: #4a4a6a; line-height: 1.6; }

/* Main */
.main { display: flex; flex-direction: column; overflow: hidden; }

/* Tabs */
.tabs { display: flex; gap: 2px; padding: 16px 24px 0; background: #fff; border-bottom: 2px solid #e8e8f0; }
.tab { padding: 10px 18px; font-size: 13px; font-weight: 500; color: #9090b0; cursor: pointer; border-radius: 6px 6px 0 0; border: none; background: none; transition: color 0.15s; }
.tab:hover { color: #1a1a2e; }
.tab.active { color: #6c63ff; font-weight: 700; background: #f5f4ff; border-bottom: 2px solid #6c63ff; margin-bottom: -2px; }

.tab-content { padding: 24px; overflow-y: auto; flex: 1; }
.pane { display: none; }
.pane.active { display: block; }

/* Section headers */
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.section-header h2 { font-size: 16px; font-weight: 700; }
.section-header .sub { font-size: 12px; color: #9090b0; }

/* Run cards */
.runs-list { display: flex; flex-direction: column; gap: 10px; }
.run-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
.run-header { padding: 14px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.run-header:hover { background: #fafafa; }
.run-id { font-size: 11px; color: #9090b0; font-weight: 600; min-width: 32px; }
.run-info { flex: 1; }
.run-queries { font-size: 13px; font-weight: 500; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.run-meta { font-size: 11px; color: #9090b0; margin-top: 2px; }
.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.badge-pending    { background: #f0f0f0; color: #707090; }
.badge-processing { background: #fff3cd; color: #856404; }
.badge-done       { background: #d1f0e0; color: #1a6640; }
.badge-error      { background: #fde8e8; color: #a02020; }
.progress-bar { height: 3px; background: #f0f0f0; }
.progress-fill { height: 100%; background: #6c63ff; transition: width 0.3s; }
.run-detail { padding: 0 18px 18px; border-top: 1px solid #f0f0f0; }
.step-info { font-size: 12px; color: #6060a0; padding: 8px 0; font-style: italic; }
.query-block { margin-top: 14px; }
.query-title { font-size: 12px; font-weight: 700; color: #6c63ff; margin-bottom: 8px; padding: 5px 10px; background: #f5f4ff; border-radius: 6px; }
.platforms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.platform-card { background: #f8f9fa; border-radius: 8px; padding: 10px; border: 1px solid #e8e8f0; }
.platform-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.platform-name.perplexity   { color: #20b2aa; }
.platform-name.grok         { color: #e67e22; }
.platform-name.gemini       { color: #db2777; }
.platform-name.serp         { color: #3498db; }
.platform-name.openai       { color: #166534; }
.platform-text { font-size: 12px; color: #3a3a5a; line-height: 1.6; max-height: 180px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.platform-error { font-size: 12px; color: #a02020; font-style: italic; }
.serp-item { font-size: 12px; padding: 3px 0; border-bottom: 1px solid #eee; }
.serp-item:last-child { border: none; }
.serp-item a { color: #1a73e8; text-decoration: none; font-weight: 500; }
.serp-item a:hover { text-decoration: underline; }
.serp-snippet { color: #666; font-size: 11px; margin-top: 1px; }

/* Instrument 1 — domains table */
.toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 50;
  background: #f0effc;
  padding: 10px 16px; margin: 0 -32px 16px -32px;
  border-bottom: 1px solid #dddaf7;
}
.toolbar select, .toolbar input { padding: 7px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; color: #1a1a2e; background: #fff; }
.toolbar .btn-sm { width: auto; padding: 7px 14px; font-size: 13px; }

/* ── Мультивыбор кластеров ───────────────────────────────────────────────── */
.cluster-multiselect { position: relative; flex-shrink: 0; }

.cms-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; background: #fff;
  border: 1px solid #ddd; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #1a1a2e;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: border-color .15s, background .15s, color .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.cms-btn:hover { border-color: #6c63ff; }
.cms-btn.active { border-color: #6c63ff; background: #f5f4ff; color: #4a42d0; }
.cms-btn .cms-chevron { font-size: 9px; color: #9090b0; transition: transform .2s; }
.cms-btn.open .cms-chevron { transform: rotate(180deg); }
.cms-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: #6c63ff; color: #fff; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}

.cms-panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  z-index: 500; background: #fff;
  border: 1px solid #e0deff; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(108,99,255,.18);
  min-width: 250px; max-width: 360px; overflow: hidden;
}
.cms-scroll { max-height: 260px; overflow-y: auto; padding: 6px 0; }
.cms-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer; font-size: 13px; color: #1a1a2e;
  transition: background .1s; border-left: 3px solid transparent;
}
.cms-row:hover { background: #f5f4ff; }
.cms-row.checked { color: #4a42d0; font-weight: 500; border-left-color: #6c63ff; background: #f5f4ff; }
.cms-box {
  width: 17px; height: 17px; border: 2px solid #d0cfe8; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .12s; background: #fff;
}
.cms-row.checked .cms-box { background: #6c63ff; border-color: #6c63ff; }
.cms-box-tick { color: #fff; font-size: 10px; font-weight: 900; opacity: 0; }
.cms-row.checked .cms-box-tick { opacity: 1; }
.cms-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cms-footer {
  display: flex; gap: 8px; padding: 10px 16px;
  border-top: 1px solid #f0eefc; background: #fafaff;
}
.cms-btn-clear {
  flex: 1; padding: 7px 10px; border: 1px solid #ddd; border-radius: 7px;
  background: #fff; font-size: 12px; color: #666; cursor: pointer;
  transition: border-color .15s;
}
.cms-btn-clear:hover { border-color: #aaa; }
.cms-btn-apply {
  flex: 2; padding: 7px 10px; background: #6c63ff; border: none;
  border-radius: 7px; font-size: 13px; font-weight: 600; color: #fff;
  cursor: pointer; transition: background .15s;
}
.cms-btn-apply:hover { background: #5a52e0; }

.cluster-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 6px; }

.domains-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
.domains-table th { background: #f5f4ff; text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; color: #6060a0; text-transform: uppercase; letter-spacing: 0.6px; cursor: pointer; user-select: none; }
.domains-table th:hover { background: #ebe9ff; }
.domains-table th .sort-arrow { margin-left: 4px; opacity: 0.4; }
.col-tip { font-size: 11px; color: #a0a0c0; cursor: help; margin-left: 2px; vertical-align: middle; pointer-events: all; }
.col-tip:hover { color: #6c63ff; }
.coverage-toggle { font-size: 10px; font-weight: 700; color: #fff; background: #6c63ff; border-radius: 3px; padding: 1px 5px; cursor: pointer; margin-left: 4px; vertical-align: middle; pointer-events: all; user-select: none; }
.coverage-toggle:hover { background: #5a52e0; }
.domains-table th.sorted .sort-arrow { opacity: 1; }
.domains-table td { padding: 9px 14px; font-size: 13px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.domains-table tr:last-child td { border-bottom: none; }
.domains-table tr:hover td { background: #fafafa; }

.domain-link { font-weight: 500; color: #1a1a2e; text-decoration: none; }
.domain-link:hover { color: #6c63ff; text-decoration: underline; }
.cat-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.cat-ugc        { background: #d1f0e0; color: #1a6640; }
.cat-competitor { background: #fde8e8; color: #a02020; }
.cat-media      { background: #dbeafe; color: #1d4ed8; }
.cat-other      { background: #f0f0f0; color: #606070; }

/* Platform text tags */
.plat-tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; margin-right: 3px; }
.plat-tag.perplexity   { background: #e0f7f5; color: #0e8a84; }
.plat-tag.grok         { background: #fef3e2; color: #b35a00; }
.plat-tag.gemini       { background: #fce7f3; color: #9d174d; }
.plat-tag.serp         { background: #dbeafe; color: #1d4ed8; }
.plat-tag.openai       { background: #dcfce7; color: #166534; }

/* Platform toggle buttons */
.plat-toggles { display: flex; gap: 6px; }
.plat-toggle { padding: 6px 12px; border-radius: 20px; border: 1.5px solid #ddd; background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; color: #9090b0; }
.plat-toggle:hover { border-color: #bbb; color: #555; }
.plat-toggle.active.perplexity   { background: #e0f7f5; border-color: #20b2aa; color: #0e8a84; }
.plat-toggle.active.grok         { background: #fef3e2; border-color: #e67e22; color: #b35a00; }
.plat-toggle.active.gemini       { background: #fce7f3; border-color: #db2777; color: #9d174d; }
.plat-toggle.active.serp         { background: #dbeafe; border-color: #3498db; color: #1d4ed8; }
.plat-toggle.active.openai       { background: #dcfce7; border-color: #16a34a; color: #166534; }

.pos-good { color: #1a6640; font-weight: 600; }
.pos-mid  { color: #856404; }
.pos-low  { color: #9090b0; }
.cat-select { font-size: 11px; padding: 3px 6px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; }
.coverage-bar { background: #e8e8f0; border-radius: 3px; height: 6px; min-width: 60px; }
.coverage-fill { background: #6c63ff; height: 100%; border-radius: 3px; }

/* Row number column */
.domains-table th.col-num,
.domains-table td.col-num { width: 40px; min-width: 40px; text-align: center; color: #b0b0c8; font-size: 11px; padding-left: 8px; padding-right: 8px; }

/* Load more button */
.load-more-wrap { display: flex; justify-content: center; padding: 16px 0 8px; }
.load-more-btn { width: auto; padding: 9px 28px; font-size: 13px; background: #f5f4ff; color: #6c63ff; border: 1.5px solid #c8c4ff; }
.load-more-btn:hover { background: #ebe9ff; border-color: #6c63ff; }
.load-more-rest { font-weight: 400; color: #9090b0; font-size: 12px; }

/* Instrument 2 — queries visibility */
.queries-list { display: flex; flex-direction: column; gap: 10px; }
.query-card { background: #fff; border-radius: 10px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
.query-platforms { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.plat-count-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1.5px solid; }
.plat-count-badge .count { font-size: 13px; font-weight: 700; }
.plat-count-badge.perplexity   { background: #e0f7f5; border-color: #20b2aa; color: #0e8a84; }
.plat-count-badge.grok         { background: #fef3e2; border-color: #e67e22; color: #b35a00; }
.plat-count-badge.gemini       { background: #fce7f3; border-color: #db2777; color: #9d174d; }
.plat-count-badge.serp         { background: #dbeafe; border-color: #3498db; color: #1d4ed8; }
.plat-count-badge.openai       { background: #dcfce7; border-color: #16a34a; color: #166534; }
.query-totals { font-size: 11px; color: #9090b0; margin-top: 10px; }

/* Instrument 3 — cited pages table */
.pages-table td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.page-cell { max-width: 300px; }
.queries-cell { max-width: 360px; }
.page-url-link { display: inline-flex; align-items: baseline; gap: 2px; text-decoration: none; line-height: 1.4; }
.page-url-link:hover .page-domain { color: #6c63ff; }
.page-url-link:hover .page-path { color: #6c63ff; }
.page-domain { font-size: 13px; font-weight: 600; color: #1a1a2e; white-space: nowrap; }
.page-path { font-size: 12px; color: #6060a0; }
.page-title-text { font-size: 11px; color: #9090b0; margin-top: 3px; line-height: 1.4; font-style: italic; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Query chips */
.query-chips { display: flex; flex-direction: column; gap: 4px; }
.query-chip-wrap { display: flex; flex-direction: column; }
.query-chip { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; padding: 4px 9px; background: #f5f4ff; color: #5050a0; border: 1px solid #dddaff; border-radius: 12px; cursor: pointer; user-select: none; max-width: 320px; transition: background 0.12s; }
.query-chip:hover { background: #ebe9ff; border-color: #b8b2ff; }
.query-chip-open { background: #6c63ff; color: #fff; border-color: #6c63ff; }
.query-chip-open:hover { background: #5a52e0; }
.chip-arrow { font-size: 9px; flex-shrink: 0; opacity: 0.7; }
.query-chip-more { display: inline-block; font-size: 11px; padding: 3px 9px; background: #ebebeb; color: #707090; border: 1px solid #d0d0d0; border-radius: 12px; font-weight: 600; cursor: default; }

/* Expandable query detail panel */
.query-detail-panel { margin-top: 5px; margin-left: 4px; padding: 8px 10px; background: #fafafe; border-radius: 8px; border: 1px solid #e0deff; display: flex; flex-direction: column; gap: 6px; }
.query-detail-row { display: flex; align-items: flex-start; gap: 8px; }
.query-detail-pos { font-size: 10px; color: #9090b0; flex-shrink: 0; margin-top: 3px; font-weight: 600; }
.query-detail-snippet { font-size: 12px; color: #3a3a5a; line-height: 1.5; flex: 1; }

/* Mentions count */
.mentions-count { font-size: 15px; font-weight: 700; color: #1a1a2e; text-align: right; white-space: nowrap; }

/* ── Response Modal ──────────────────────────────────────────────────────── */
.resp-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,10,30,0.55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.resp-overlay.open { display: flex; }

.resp-modal {
  background: #f5f4ff; border-radius: 16px;
  width: min(780px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
  overflow: hidden;
}
.resp-modal-head {
  padding: 18px 22px 14px; background: #fff;
  border-bottom: 1px solid #e8e6ff;
  display: flex; align-items: flex-start; gap: 12px;
}
.resp-modal-query {
  flex: 1; font-size: 14px; font-weight: 600; color: #1a1a2e; line-height: 1.45;
}
.resp-modal-close {
  width: 30px; height: 30px; border: none; background: #eeeeff;
  border-radius: 50%; font-size: 18px; cursor: pointer; color: #5050a0;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.15s;
}
.resp-modal-close:hover { background: #dddaff; color: #1a1a2e; }

.resp-modal-body {
  padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
}

.response-card {
  border-left: 4px solid #ccc; padding: 12px 16px;
  background: #fff; border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.response-card-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.response-date { font-size: 11px; color: #9090b0; }
.response-cited-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  background: #d1f0e0; color: #1a6640; border-radius: 10px; white-space: nowrap;
}
.response-card-text {
  font-size: 13px; color: #2a2a4a; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
}
.response-others-note {
  font-size: 11px; color: #9090b0; font-style: italic; padding: 2px 4px;
}

.resp-loading {
  padding: 40px; text-align: center; font-size: 14px; color: #6060a0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.resp-loading .spinner { border-color: #c8c4ff; border-top-color: transparent; width: 18px; height: 18px; }
.resp-empty { padding: 40px; text-align: center; font-size: 14px; color: #9090b0; font-style: italic; }

/* View toggle (По страницам / По запросам) */
.view-toggle-group { display: flex; gap: 0; border: 1px solid #d0ceff; border-radius: 7px; overflow: hidden; }
.view-toggle-btn { padding: 6px 13px; font-size: 12px; font-weight: 500; color: #6060a0; background: #fff; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; }
.view-toggle-btn:hover { background: #f0eeff; }
.view-toggle-btn.active { background: #6c63ff; color: #fff; }

/* Query group (По запросам) */
.qgroup-list { display: flex; flex-direction: column; gap: 8px; }
.qgroup-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
.qgroup-header { display: flex; align-items: center; gap: 10px; padding: 13px 18px; cursor: pointer; user-select: none; }
.qgroup-header:hover { background: #fafafa; }
.qgroup-arrow { font-size: 13px; color: #6c63ff; min-width: 12px; }
.qgroup-text { flex: 1; font-size: 13px; font-weight: 500; color: #1a1a2e; }
.qgroup-stats { font-size: 11px; color: #9090b0; white-space: nowrap; }
.qgroup-pages { border-top: 1px solid #f0eeff; padding: 8px 0; }
.qgroup-page { display: flex; align-items: flex-start; gap: 10px; padding: 8px 18px; }
.qgroup-page:hover { background: #fafafe; }
.qgroup-page-num { font-size: 11px; color: #c0c0d0; min-width: 18px; text-align: right; padding-top: 2px; }
.qgroup-page-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qgroup-page-title { font-size: 11px; color: #7070a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qgroup-page-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qgroup-pos { font-size: 11px; color: #9090b0; }

/* LLM Queries Table */
.llm-table { width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.07); font-size:13px; }
.llm-table thead tr { background:#f5f4ff; }
.llm-table thead th { padding:12px 16px; font-size:12px; font-weight:700; color:#6c63ff; text-transform:uppercase; letter-spacing:0.5px; border-bottom:2px solid #e8e7ff; }
.llm-table tbody tr { border-bottom:1px solid #f0f0f8; }
.llm-table tbody tr:last-child { border-bottom:none; }
.llm-cluster-row { cursor:pointer; }
.llm-cluster-row:hover { background:#fafaff; }
.llm-query-row { background:#fbfbff; }
.llm-query-row:hover { background:#f5f4ff; }
.llm-icon-btn { background:none; border:none; cursor:pointer; font-size:14px; color:#c0b0c0; padding:1px 5px; border-radius:4px; margin-left:4px; line-height:1; vertical-align:middle; opacity:0; transition:opacity 0.15s,color 0.15s; }
.llm-cluster-row:hover .llm-icon-btn,
.llm-query-row:hover .llm-icon-btn { opacity:1; }
.llm-icon-btn:hover { color:#6c63ff; background:#ede9ff; }
.llm-icon-del:hover { color:#e05555 !important; background:#fff0f0 !important; }
.llm-arrow { transition:transform 0.2s; }

/* Cluster badge */
.cluster-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; background: #ede9ff; color: #6c63ff; white-space: nowrap; flex-shrink: 0; }

/* Query card header with cluster */
.query-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.query-card-text { flex: 1; font-size: 13px; font-weight: 500; color: #1a1a2e; line-height: 1.5; }

/* Cluster card textarea */
.cluster-queries-ta { width: 100%; background: #fafafa; border: 1px solid #e0e0ef; border-radius: 6px; color: #1a1a2e; font-size: 13px; padding: 10px 12px; resize: vertical; font-family: inherit; line-height: 1.6; }
.cluster-queries-ta:focus { outline: none; border-color: #6c63ff; background: #fff; }
.cluster-name-input:hover { border-color: #c8c4ff !important; background: #fafafa !important; }

/* Shared */
.empty { text-align: center; color: #9090b0; padding: 60px 0; font-size: 14px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #856404; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { text-align: center; color: #9090b0; padding: 40px; }

/* ── Dashboard ────────────────────────────────────────────────────────────── */
.dash-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.dash-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 12px; padding: 20px 24px; flex: 1; min-width: 220px; box-shadow: 0 1px 4px rgba(0,0,0,0.07); border: 1px solid #ebebf5; }
.dash-card-icon { font-size: 28px; }
.dash-card-value { font-size: 26px; font-weight: 800; line-height: 1; }
.dash-card-label { font-size: 12px; font-weight: 600; color: #6060a0; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.dash-card-sub { font-size: 11px; color: #9090b0; margin-top: 2px; }

.dash-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.dash-section { background: #fff; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.07); border: 1px solid #ebebf5; }
.section-title { font-size: 14px; font-weight: 700; margin: 0; }

.dash-plat-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.plat-stat-row { display: flex; align-items: center; gap: 10px; }
.plat-stat-bar-wrap { flex: 1; height: 8px; background: #f0f0f8; border-radius: 4px; overflow: hidden; }
.plat-stat-bar { height: 100%; border-radius: 4px; transition: width 0.4s; }
.plat-stat-nums { font-size: 12px; color: #606070; white-space: nowrap; min-width: 110px; text-align: right; }

.top-domain-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f5f5fb; }
.top-domain-row:last-child { border-bottom: none; }
.top-domain-num { font-size: 11px; color: #aaa; min-width: 16px; text-align: right; }
.top-domain-name { font-size: 13px; color: #1a1a2e; text-decoration: none; min-width: 130px; flex: 1; }
.top-domain-name:hover { color: #6c63ff; text-decoration: underline; }
.top-domain-bar-wrap { flex: 1; height: 6px; background: #f0f0f8; border-radius: 3px; overflow: hidden; max-width: 100px; }
.top-domain-bar { height: 100%; background: #6c63ff; border-radius: 3px; }
.top-domain-count { font-size: 12px; font-weight: 700; color: #6c63ff; min-width: 28px; text-align: right; }

.dash-plat-tops { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.plat-top-block { flex: 1; min-width: 260px; }
.plat-top-header { margin-bottom: 10px; }