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

:root {
  --sidebar-w: 240px;
  --accent: #3a859f;
  --accent-light: #e8f4f8;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border: #e5e7eb;
  --bg: #f9fafb;
  --surface: #ffffff;
  --positive: #059669;
  --positive-bg: #ecfdf5;
  --negative: #dc2626;
  --negative-bg: #fef2f2;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 4px 12px rgba(0,0,0,.07);
}

html, body {
  height: 100%;
  font-family:'Inter' , system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 12px;
  overflow-y: auto;
}

.main {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  min-width: 0;
}

.brand {
  padding: 0 4px;
  margin-bottom: 20px;
}

.brand-logo {
  width: 140px;
  height: auto;
  display: block;
}

.search-wrap {
  position: relative;
  margin-bottom: 8px;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 7px 36px 7px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.search-input::placeholder {
  color: var(--text-tertiary);
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.search-kbd {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .12s, color .12s;
  cursor: pointer;
  position: relative;
}

.nav-item:hover {
  background: var(--bg);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--accent-light);
  color: var(--accent);
}

.nav-item.active svg {
  stroke: var(--accent);
}

.nav-item svg {
  flex-shrink: 0;
}

.nav-item span:not(.nav-badge) {
  flex: 1;
}

.nav-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--border);
  color: var(--text-secondary);
  line-height: 1.6;
}

.nav-badge.new {
  background: var(--accent-light);
  color: var(--accent);
}

.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: 8px;
  transition: background .12s;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 6px;
}

.user-profile:hover {
  background: var(--bg);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-email {
  font-size: 11.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chevron {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.home-header {
  margin-bottom: 28px;
}

.home-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.home-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, border-color .15s, transform .1s;
}

.home-tile:hover {
  box-shadow: var(--shadow);
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.home-tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-tile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.home-tile-title {
  font-size: 14px;
  font-weight: 600;
}

.home-tile-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.home-tile-arrow {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

.page-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  width: 100%;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--surface);
}

.btn-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.btn-filter:hover {
  background: var(--bg);
  border-color: #d1d5db;
}

.time-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
}

.time-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .12s;
}

.time-tab:hover {
  background: var(--bg);
}

.time-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.kpi-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}

.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.5px;
}

.kpi-delta {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 20px;
}

.kpi-delta.positive {
  color: var(--positive);
  background: var(--positive-bg);
}

.kpi-delta.negative {
  color: var(--negative);
  background: var(--negative-bg);
}

.section {
  margin-bottom: 28px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
}

.btn-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}

.btn-text:hover {
  text-decoration: underline;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
}

.quick-card:hover {
  border-color: #d1d5db;
  box-shadow: var(--shadow);
}

.quick-icon {
  width: 36px;
  height: 36px;
  background: var(--accent-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.quick-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.quick-title {
  font-size: 13.5px;
  font-weight: 600;
}

.quick-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.quick-arrow {
  color: var(--text-tertiary);
}

.campaign-list {
  display: flex;
  flex-direction: column;
}

.campaign-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.campaign-row:last-child {
  border-bottom: none;
}

.campaign-thumb {
  width: 44px;
  height: 36px;
  border-radius: 7px;
  flex-shrink: 0;
}

.campaign-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.campaign-name {
  font-size: 13.5px;
  font-weight: 600;
}

.campaign-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.campaign-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.campaign-stat {
  font-size: 13px;
  font-weight: 600;
}

.status-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
}

.status-pill.active {
  background: var(--positive-bg);
  color: var(--positive);
}

.status-pill.paused {
  background: #fef3c7;
  color: #d97706;
}

.status-pill.draft {
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.stat-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.stat-card {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.stat-card:last-child {
  border-bottom: none;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.stat-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.5px;
}

.stat-delta {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 20px;
}

.stat-delta.positive {
  color: var(--positive);
  background: var(--positive-bg);
}

.member-list {
  display: flex;
  flex-direction: column;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.member-row:last-child {
  border-bottom: none;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.member-name {
  font-size: 13px;
  font-weight: 600;
}

.member-since {
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.uc-page {
  width: 100%;
}

.uc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.uc-header-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.uc-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.uc-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.uc-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.uc-form-col {
  width: 340px;
  flex-shrink: 0;
}

.uc-layout:only-child .uc-form-col,
.uc-layout:not(:has(.uc-results-col)) .uc-form-col {
  width: 100%;
  max-width: 600px;
}

.uc-results-col {
  flex: 1;
  min-width: 0;
}

.uc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.uc-table-card {
  padding: 0;
  overflow: hidden;
}

.uc-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

.uc-alert.error {
  background: var(--negative-bg);
  color: var(--negative);
  border: 1px solid #fecaca;
}

.uc-field {
  margin-bottom: 18px;
}

.uc-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
}

.uc-label-hint {
  font-weight: 400;
  color: var(--text-tertiary);
  font-size: 12px;
}

.uc-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-family:'Inter' , monospace;
  color: var(--text-primary);
  background: var(--bg);
  resize: vertical;
  outline: none;
  line-height: 1.6;
  transition: border-color .15s, box-shadow .15s;
}

.uc-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
  background: #fff;
}

.uc-url-count {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 5px;
  text-align: right;
}

.uc-throttle-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.uc-tab {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}

.uc-tab:hover {
  background: var(--surface);
  border-color: #d1d5db;
}

.uc-tab.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.uc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}

.uc-btn:hover:not(:disabled) {
  background: #2d6a7f;
}

.uc-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.uc-export-form {
  margin-top: 10px;
}

.uc-btn-ghost {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}

.uc-btn-ghost:hover {
  background: var(--bg);
  border-color: #d1d5db;
}

.uc-summary {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.uc-summary-item {
  flex: 1;
  min-width: 70px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.uc-summary-item.green {
  border-color: #9dcbda;
  background: var(--accent-light);
}

.uc-summary-item.blue {
  border-color: #93c5fd;
  background: #eff6ff;
}

.uc-summary-item.orange {
  border-color: #fcd34d;
  background: #fffbeb;
}

.uc-summary-item.red {
  border-color: #fca5a5;
  background: #fef2f2;
}

.uc-summary-num {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.uc-summary-lbl {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 1px;
}

.uc-table-wrap {
  overflow-x: auto;
}

.uc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.uc-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg);
}

.uc-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.uc-table tr:last-child td {
  border-bottom: none;
}

.uc-table tr:hover td {
  background: #fafafa;
}

.uc-url-cell {
  min-width: 200px;
  max-width: 260px;
}

.uc-url-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  word-break: break-all;
  display: block;
}

.uc-url-link:hover {
  text-decoration: underline;
}

.uc-redirect-arrow {
  display: block;
  font-size: 11px;
  color: #d97706;
  margin-top: 3px;
  word-break: break-all;
}

.uc-error-msg {
  display: block;
  font-size: 11px;
  color: var(--negative);
  margin-top: 3px;
}

.uc-status-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: .2px;
}

.uc-status-ok {
  background: #dcfce7;
  color: #15803d;
}

.uc-status-redirect {
  background: #fef3c7;
  color: #b45309;
}

.uc-status-error {
  background: #fee2e2;
  color: #b91c1c;
}

.uc-status-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 5px;
}

.uc-index-yes, .uc-index-no, .uc-index-unknown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.uc-index-yes {
  color: #059669;
}

.uc-index-no {
  color: var(--negative);
}

.uc-noindex-reason {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.uc-meta-cell {
  max-width: 180px;
  color: var(--text-secondary);
  font-size: 12px;
}

.uc-canonical-diff {
  color: #d97706;
  cursor: help;
}

.uc-canonical-self {
  color: var(--text-tertiary);
  font-size: 11px;
}

.uc-loading {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(249,250,251,.85);
  backdrop-filter: blur(4px);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.uc-loading.visible {
  display: flex;
}

.uc-loading-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 40px;
  box-shadow: var(--shadow);
  text-align: center;
  max-width: 360px;
  width: 100%;
}

.uc-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 16px;
}

.uc-loading-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.uc-loading-sub {
  font-size: 13px;
  color: var(--text-secondary);
}

.tools-teaser {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #e8f4f8, #f5f3ff);
  border: 1px solid #c2dde6;
  border-radius: var(--radius);
  margin-top: 4px;
}

.tools-teaser-icon {
  width: 36px;
  height: 36px;
  background: var(--surface);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.tools-teaser-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.tools-teaser-sub {
  display: block;
  font-size: 12px;
  color: #818cf8;
}

.placeholder-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 120px);
  text-align: center;
  gap: 10px;
  color: var(--text-secondary);
}

.placeholder-icon {
  font-size: 40px;
}

.placeholder-page h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.placeholder-page p {
  font-size: 14px;
}

.ga-page {
  width: 100%;
}

.ga-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.ga-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ga-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ga-header-icon {
  width: 46px;
  height: 46px;
  background: var(--accent-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.ga-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.ga-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.ga-alert {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 18px;
}

.ga-alert.success {
  background: var(--positive-bg);
  color: var(--positive);
  border: 1px solid #a7f3d0;
}

.ga-alert.error {
  background: var(--negative-bg);
  color: var(--negative);
  border: 1px solid #fecaca;
}

.ga-range-tabs {
  display: flex;
  gap: 3px;
}

.ga-range-tab {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all .12s;
}

.ga-range-tab:hover {
  background: var(--bg);
}

.ga-range-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.ga-account-badge {
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
}

.ga-select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
}

.ga-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}

.ga-btn-primary:hover {
  background: #2d6a7f;
}

.ga-btn-primary.ga-btn-lg {
  padding: 13px 24px;
  font-size: 15px;
}

.ga-btn-ghost {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--surface);
  transition: all .12s;
}

.ga-btn-ghost:hover {
  background: var(--bg);
  color: var(--negative);
  border-color: #fca5a5;
}

.ga-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.ga-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.ga-card-full {
  margin-top: 20px;
}

.ga-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ga-card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
}

.ga-card-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.ga-field {
  margin-bottom: 16px;
}

.ga-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.ga-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.ga-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
  background: #fff;
}

.ga-field-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 5px;
}

.ga-setup-guide {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.ga-guide-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ga-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ga-step {
  display: flex;
  gap: 14px;
}

.ga-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ga-step strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.ga-step p {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 4px;
}

.ga-step code {
  font-size: 11.5px;
  background: var(--border);
  padding: 1px 5px;
  border-radius: 4px;
}

.ga-step-note {
  color: var(--accent) !important;
}

.ga-connect-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.ga-connect-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px 40px;
  text-align: center;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow);
}

.ga-connect-icon {
  width: 64px;
  height: 64px;
  background: var(--accent-light);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin: 0 auto 20px;
}

.ga-connect-card h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.ga-connect-card p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}

.ga-link-small {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-tertiary);
  text-decoration: none;
}

.ga-link-small:hover {
  color: var(--accent);
}

.ga-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}

.ga-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ga-kpi-icon {
  width: 30px;
  height: 30px;
  background: var(--accent-light);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 2px;
}

.ga-kpi-label {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.ga-kpi-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.ga-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.ga-table-wrap {
  overflow-x: auto;
}

.ga-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ga-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.ga-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.ga-table tr:last-child td {
  border-bottom: none;
}

.ga-table tr:hover td {
  background: var(--bg);
}

.ga-num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.ga-campaign-name {
  font-weight: 500;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ga-table tbody tr[style*="cursor:pointer" ]:hover {
  background: var(--bg);
}

.ga-status-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.ga-status-pill.enabled {
  background: var(--positive-bg);
  color: var(--positive);
}

.ga-status-pill.paused {
  background: #fef3c7;
  color: #d97706;
}

.ga-empty {
  font-size: 13.5px;
  color: var(--text-tertiary);
  padding: 24px 0;
  text-align: center;
}

.ga-datepicker {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ga-date-input {
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s;
  width: 130px;
}

.ga-date-input:focus {
  outline: none;
  border-color: var(--accent);
}

.ga-date-sep {
  color: var(--text-tertiary);
  font-size: 13px;
}

.ga-date-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--positive);
  cursor: pointer;
  transition: all .12s;
}

.ga-date-apply:hover {
  background: var(--positive-bg);
  border-color: var(--positive);
}

.ga-date-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-tertiary);
  text-decoration: none;
  transition: all .12s;
}

.ga-date-clear:hover {
  background: var(--negative-bg);
  border-color: var(--negative);
  color: var(--negative);
}

.ga-status-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}

.ga-status-tab {
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .12s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ga-status-tab:hover {
  background: var(--bg);
}

.ga-status-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.ga-status-tab .ga-tab-count {
  font-size: 11px;
  font-weight: 600;
  background: rgba(0,0,0,.1);
  border-radius: 10px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

.ga-status-tab.active .ga-tab-count {
  background: rgba(255,255,255,.25);
}

.nav-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-tertiary);
  padding: 14px 10px 4px;
}

.ms-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 20px;
}

.li-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 20px;
}

.li-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.li-daterange-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.li-date-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface);
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}

.li-date-input:focus {
  border-color: var(--accent);
  background: var(--surface);
}

.li-date-arrow {
  color: var(--text-tertiary);
  font-size: 13px;
}

.li-date-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}

.li-date-apply:hover {
  background: #2d6a7f;
}

.li-date-clear {
  font-size: 11px;
  color: var(--text-tertiary);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
}

.li-date-clear:hover {
  color: var(--text-secondary);
  background: var(--border);
}

.li-compare-label {
  font-size: 11.5px;
  color: #999;
  margin-left: 4px;
  white-space: nowrap;
}

.li-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 5px;
  padding: 2px 6px;
  border-radius: 20px;
}

.li-delta.positive {
  color: #16a34a;
  background: #dcfce7;
}

.li-delta.negative {
  color: #dc2626;
  background: #fee2e2;
}

.li-delta.neutral {
  color: #6b7280;
  background: #f3f4f6;
}

.li-delta-sm {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 10px;
  margin-left: 4px;
  vertical-align: middle;
  white-space: nowrap;
}

.li-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #888;
  text-decoration: none;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}

.li-back-btn:hover {
  background: var(--border);
  color: var(--text);
}

.li-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.li-detail-full {
  grid-column: 1 / -1;
}

.li-perf-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding-top: 4px;
}

@media (max-width: 1100px) {
 .li-perf-grid  {
 grid-template-columns: repeat(3, 1fr);
}
}

.li-perf-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  background: #fafafa;
  border-radius: 8px;
}

.li-settings-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.li-setting-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  align-items: center;
}

.li-setting-row:last-child {
  border-bottom: none;
}

.li-setting-row--top {
  align-items: flex-start;
}

.li-setting-row dt {
  width: 140px;
  min-width: 140px;
  color: #888;
  font-weight: 500;
}

.li-setting-row dd {
  margin: 0;
  color: var(--text);
  font-weight: 500;
  flex: 1;
}

.li-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.li-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.li-campaign-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

.li-campaign-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.li-ai-card {
  border: 1.5px solid #c2dde6;
  background: #fafbff;
}

.li-ai-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.li-ai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.li-ai-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.li-profile-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  background: #fff;
  cursor: pointer;
  outline: none;
  max-width: 200px;
  transition: border-color .15s;
}

.li-profile-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.li-profile-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid #c2dde6;
}

.li-ai-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  border: 1px solid var(--border);
  color: #555;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.li-ai-refresh-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.li-ai-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}

.li-ai-generate-btn:hover {
  opacity: .88;
}

.li-ai-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px;
  text-align: center;
}

.li-ai-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 13px;
  border: 1px solid #fecaca;
}

.li-ai-setup {
  padding: 4px 0;
}

.li-ai-setup-desc {
  font-size: 13.5px;
  color: #6b7280;
  margin-bottom: 12px;
  line-height: 1.6;
}

.li-ai-setup-desc a {
  color: var(--accent);
}

.li-ai-setup-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.li-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.li-suggestion-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .15s;
}

.li-suggestion-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
}

.li-suggestion-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.li-suggestion-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.li-suggestion-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.li-prio-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
}

.li-prio-high {
  background: #fee2e2;
  color: #b91c1c;
}

.li-prio-mid {
  background: #fff3cd;
  color: #92400e;
}

.li-prio-low {
  background: #f0fdf4;
  color: #166534;
}

.li-cat-label {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
  text-transform: capitalize;
}

.li-suggestion-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin: 0;
}

.li-suggestion-body {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}

.li-suggestion-effect {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: #059669;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f0fdf4;
  line-height: 1.5;
  margin-top: 2px;
}

.li-suggestion-effect svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.settings-section {
  margin-bottom: 28px;
}

.settings-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
}

.settings-field {
  margin-bottom: 16px;
}

.settings-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.settings-field textarea,.settings-field input[type=text],.settings-field input[type=number] {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  font-size: 13.5px;
  color: #111;
  background: #fff;
  outline: none;
  font-family: inherit;
}

.settings-field textarea:focus,.settings-field input:focus {
  border-color: #3a859f;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.settings-hint {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 5px;
}

.settings-benchmark-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.settings-benchmark-sep {
  color: #9ca3af;
  font-size: 13px;
  text-align: center;
}

.settings-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f3f4f6;
}

.settings-save-btn {
  padding: 9px 20px;
  background: #3a859f;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.settings-save-btn:hover {
  opacity: .88;
}

.settings-reset-btn {
  padding: 9px 16px;
  background: #fff;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
}

.settings-reset-btn:hover {
  background: #f9fafb;
}

.mp-model-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mp-model-table thead tr {
  background: #f8fafc;
  border-bottom: 2px solid #e5e7eb;
}

.mp-model-table th {
  padding: 10px 14px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.mp-model-table th:first-child {
  text-align: left;
}

.mp-model-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  text-align: center;
}

.mp-model-table td:first-child {
  text-align: left;
}

.mp-model-row:hover td {
  background: #fafbff;
}

.mp-model-recommended td {
  background: #fefff5;
}

.mp-model-recommended:hover td {
  background: #f7fbf0;
}

.mp-model-older td {
  opacity: .7;
}

.mp-model-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-primary);
}

.mp-model-id {
  display: block;
  font-size: 10.5px;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 3px;
  font-family: monospace;
}

.mp-model-badge {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

.mp-model-badge--green {
  background: #dcfce7;
  color: #15803d;
}

.mp-model-badge--blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.mp-model-badge--gray {
  background: #f3f4f6;
  color: #9ca3af;
}

.mp-speed {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.mp-speed--5 {
  color: #15803d;
}

.mp-speed--4 {
  color: #0284c7;
}

.mp-speed--2 {
  color: #b45309;
}

.mp-cost {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .05em;
}

.mp-cost--low {
  color: #15803d;
}

.mp-cost--mid {
  color: #b45309;
}

.mp-cost--high {
  color: #dc2626;
}

.mp-cost-detail {
  font-size: 10.5px;
  color: #9ca3af;
  margin-top: 2px;
}

.mp-stars {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.mp-stars::before {
  content: attr(data-rendered);
}

.mp-limit {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-block;
}

.mp-limit--high {
  background: #dcfce7;
  color: #15803d;
}

.mp-limit--mid {
  background: #fef3c7;
  color: #92400e;
}

.mp-limit--low {
  background: #fee2e2;
  color: #991b1b;
}

.settings-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.settings-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}

.settings-new-btn:hover {
  opacity: .88;
}

.settings-profiles-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-profile-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  transition: box-shadow .15s;
}

.settings-profile-row:hover {
  box-shadow: var(--shadow-sm);
}

.settings-profile-info {
  flex: 1;
  min-width: 0;
}

.settings-profile-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-profile-default-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: var(--accent-light);
  color: var(--accent);
}

.settings-profile-meta {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 3px;
  line-height: 1.5;
}

.settings-profile-persona {
  font-size: 12.5px;
  color: #6b7280;
  margin: 5px 0 0;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-profile-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.settings-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: #f3f4f6;
  color: #374151;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s;
}

.settings-profile-btn:hover {
  background: #e5e7eb;
}

.settings-profile-btn--danger {
  color: #dc2626;
}

.settings-profile-btn--danger:hover {
  background: #fee2e2;
}

.li-suggestion-card--done {
  opacity: .55;
}

.li-suggestion-card--done .li-suggestion-title {
  text-decoration: line-through;
}

.li-suggestion-done-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
}

.li-done-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.li-done-btn:hover {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

.li-execute-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  background: #e8f0fe;
  color: #0a66c2;
  border: 1px solid #bfdbfe;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.li-execute-btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.li-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}

.li-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  width: 100%;
  max-width: 420px;
  padding: 24px;
}

.li-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.li-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.li-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.li-modal-close:hover {
  color: var(--text-primary);
  background: #f3f4f6;
}

.li-modal-body {
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}

.li-modal-action-preview {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  font-size: 14px;
  font-weight: 600;
  color: #15803d;
}

.li-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.li-modal-steps {
  margin-top: 14px;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.model-btn {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: monospace;
  font-weight: 500;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  transition: background .12s, border-color .12s;
}

.model-btn:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.model-btn--active {
  background: var(--accent-light);
  color: var(--accent);
  border-color: #9dcbda;
}

.sc-page {
  max-width: 1300px;
}

.sc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sc-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sc-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sc-header-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sc-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text-primary);
}

.sc-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.sc-range-tabs {
  display: flex;
  gap: 4px;
}

.sc-range-tab {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all .12s;
}

.sc-range-tab:hover {
  color: var(--text-primary);
  border-color: #d1d5db;
}

.sc-range-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s;
}

.sc-btn:hover {
  opacity: .88;
}

.sc-btn-google {
  background: #4285F4;
}

.sc-btn-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid #c8e6c9;
  cursor: pointer;
  transition: all .12s;
}

.sc-btn-check:hover {
  background: #c8e6c9;
}

.sc-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: all .12s;
}

.sc-btn-ghost:hover {
  color: var(--text-primary);
  border-color: #d1d5db;
  background: var(--bg);
}

.sc-alert {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-size: 13.5px;
}

.sc-alert.success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.sc-alert.error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.sc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
}

.sc-card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.sc-card-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}

.sc-card-help {
  background: #fafbff;
}

.sc-help-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.sc-help-steps {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.sc-code {
  background: var(--bg);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
  color: var(--text-primary);
  word-break: break-all;
}

.sc-link {
  color: var(--accent);
  text-decoration: none;
}

.sc-link:hover {
  text-decoration: underline;
}

.sc-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
}

.sc-field {
  margin-bottom: 18px;
}

.sc-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.sc-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.sc-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.sc-center-card {
  max-width: 440px;
  margin: 40px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow);
  text-align: center;
}

.sc-connect-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e8f5e9;
  color: #2e7d32;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.sc-connect-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.sc-connect-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 24px;
}

.sc-property-wrap {
  max-width: 720px;
}

.sc-section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.sc-section-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.sc-property-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-property-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sc-property-card {
  cursor: pointer;
  display: block;
}

.sc-property-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1.5px solid var(--border);
  transition: all .12s;
}

.sc-property-card:hover .sc-property-inner {
  border-color: var(--accent);
  background: var(--accent-light);
}

.sc-property-radio:checked + .sc-property-inner {
  border-color: var(--accent);
  background: var(--accent-light);
}

.sc-property-icon {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.sc-property-url {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  display: block;
}

.sc-property-perm {
  font-size: 12px;
  color: var(--text-tertiary);
}

.sc-date-label {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.sc-inline-clear {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-left: 2px;
}

.sc-summary-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.sc-summary-card {
  flex: 1;
  min-width: 130px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-summary-card--status {
  flex: 2;
  min-width: 200px;
}

.sc-summary-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.sc-summary-lbl {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.sc-status-dist {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}

.sc-dist-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
}

.sc-dist-ok {
  background: #ecfdf5;
  color: #065f46;
}

.sc-dist-redirect {
  background: #fffbeb;
  color: #92400e;
}

.sc-dist-error {
  background: #fef2f2;
  color: #991b1b;
}

.sc-dist-unknown {
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.sc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.sc-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sc-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sc-filter-tab {
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all .12s;
}

.sc-filter-tab:hover {
  color: var(--text-primary);
  border-color: #d1d5db;
}

.sc-filter-tab.active {
  background: var(--accent-light);
  color: var(--accent);
  border-color: #9dcbda;
}

.sc-search-wrap {
  position: relative;
}

.sc-search-wrap svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.sc-search-input {
  padding: 6px 10px 6px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text-primary);
  background: var(--surface);
  outline: none;
  width: 200px;
  transition: border-color .15s, box-shadow .15s;
}

.sc-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
  width: 250px;
}

.sc-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sc-table thead th {
  padding: 11px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}

.sc-th-url {
  width: 45%;
  min-width: 260px;
}

.sc-th-status {
  width: 100px;
}

.sc-th-num {
  text-align: right !important;
  width: 90px;
}

.sc-sortable:hover {
  color: var(--text-primary);
}

.sc-sortable::after {
  content:' ↕';
  font-size: 10px;
  opacity: .4;
}

.sc-sorted-asc::after {
  content:' ↑';
  opacity: .8;
  color: var(--accent);
}

.sc-sorted-desc::after {
  content:' ↓';
  opacity: .8;
  color: var(--accent);
}

.sc-table tbody tr[data-hidden] {
  display: none;
}

.sc-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}

.sc-table tbody tr:last-child {
  border-bottom: none;
}

.sc-table tbody tr:hover {
  background: #fafbff;
}

.sc-table tbody td {
  padding: 10px 14px;
  vertical-align: middle;
}

.sc-url-cell {
  max-width: 0;
}

.sc-url-link {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent);
  text-decoration: none;
  font-size: 12.5px;
}

.sc-url-link:hover {
  text-decoration: underline;
}

.sc-redirect-hint {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--text-primary);
}

.sc-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}

.sc-status-ok {
  background: #ecfdf5;
  color: #065f46;
}

.sc-status-redirect {
  background: #fffbeb;
  color: #92400e;
}

.sc-status-error {
  background: #fef2f2;
  color: #991b1b;
}

.sc-status-unknown {
  background: var(--bg);
  color: var(--text-tertiary);
  border: 1px solid var(--border);
}

.sc-position {
  font-variant-numeric: tabular-nums;
}

.sc-pos-top3 {
  color: #059669;
  font-weight: 600;
}

.sc-pos-top10 {
  color: #2563eb;
  font-weight: 500;
}

.sc-table-footer {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 10px;
  text-align: right;
}

.sc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sc-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.sc-modal-backdrop.visible {
  display: flex;
}

.sc-modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}

.sc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.sc-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.sc-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 4px;
  display: flex;
}

.sc-modal-close:hover {
  background: var(--hover);
  color: var(--text-primary);
}

.sc-modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}

.sc-modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
}

.sc-modal-tab:hover {
  color: var(--text-primary);
}

.sc-modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.sc-modal-tab-count {
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.sc-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.sc-modal-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 10px;
}

.sc-modal-textarea {
  width: 100%;
  height: 200px;
  font-size: 12.5px;
  font-family: monospace;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface);
}

.sc-modal-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.sc-modal-url-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sc-modal-link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sc-modal-link-btn:hover {
  opacity: .75;
}

.sc-modal-url-count {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: auto;
}

.sc-modal-table-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.sc-modal-search-wrap {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  background: var(--surface);
}

.sc-modal-search {
  border: none;
  background: none;
  font-size: 12.5px;
  color: var(--text-primary);
  width: 100%;
  outline: none;
}

.sc-modal-url-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.sc-modal-url-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12.5px;
}

.sc-modal-url-row:last-child {
  border-bottom: none;
}

.sc-modal-url-row:hover {
  background: var(--hover);
}

.sc-modal-url-check {
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.sc-modal-url-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  font-family: monospace;
  font-size: 11.5px;
}

.sc-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.sc-modal-selected-info {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
}

.sc-modal-cancel {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
}

.sc-modal-cancel:hover {
  background: var(--hover);
}

.sc-modal-speed-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-modal-speed-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.sc-modal-speed-select {
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
}

.sc-loading {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.sc-loading.visible {
  display: flex;
}

.sc-loading-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px 40px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sc-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: #2e7d32;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.sc-loading-title {
  font-size: 15px;
  font-weight: 600;
}

.sc-loading-sub {
  font-size: 13px;
  color: var(--text-secondary);
}

.sc-progress-wrap {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 10px;
  margin: 16px 0 8px;
  overflow: hidden;
}

.sc-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 10px;
  transition: width .25s ease;
}

.sc-loading-count {
  font-size: 12.5px;
  color: var(--text-secondary);
  text-align: center;
}

.usr-page {
  max-width: 900px;
}

.usr-header {
  margin-bottom: 22px;
}

.usr-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.usr-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 3px;
}

.usr-alert {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-size: 13.5px;
}

.usr-alert--success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.usr-alert--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.usr-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.usr-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.usr-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.usr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.usr-table thead th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.usr-row {
  border-bottom: 1px solid var(--border);
}

.usr-row:last-child {
  border-bottom: none;
}

.usr-row td {
  padding: 12px 16px;
  vertical-align: middle;
}

.usr-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.usr-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.usr-you-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--accent-light);
  color: var(--accent);
}

.usr-email-cell {
  color: var(--text-secondary);
  font-size: 13px;
}

.usr-date-cell {
  color: var(--text-tertiary);
  font-size: 12px;
}

.usr-empty-row {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  padding: 24px !important;
}

.usr-env-note {
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.usr-role-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}

.usr-role--super {
  background: #f3e8ff;
  color: #7c3aed;
}

.usr-role--admin {
  background: var(--accent-light);
  color: var(--accent);
}

.usr-role--user {
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.usr-actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.usr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
}

.usr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-bottom: 18px;
}

.usr-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.usr-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.usr-label-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.usr-input {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}

.usr-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.usr-input--error {
  border-color: var(--negative);
}

.usr-field-error {
  font-size: 12px;
  color: var(--negative);
}

.usr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}

.usr-btn--primary {
  background: var(--accent);
  color: #fff;
}

.usr-btn--primary:hover {
  opacity: .88;
}

.usr-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.usr-btn--ghost:hover {
  background: var(--bg);
  color: var(--text-primary);
}

.usr-btn--danger {
  background: #fef2f2;
  color: var(--negative);
  border: 1px solid #fecaca;
}

.usr-btn--danger:hover {
  background: #fee2e2;
}

.usr-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.usr-modal-backdrop.visible {
  display: flex;
}

.usr-modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  margin: 16px;
}

.usr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}

.usr-modal-title {
  font-size: 15px;
  font-weight: 600;
}

.usr-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: all .12s;
}

.usr-modal-close:hover {
  background: var(--bg);
  color: var(--text-primary);
}

.usr-modal-body {
  padding: 18px 22px;
}

.usr-modal-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.usr-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
}

.sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 6px 2px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.sidebar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 11px;
  color: var(--text-tertiary);
}

.sidebar-logout {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: all .12s;
  flex-shrink: 0;
}

.sidebar-logout:hover {
  background: var(--bg);
  color: var(--negative);
}

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  font-family:'Inter' , system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.login-wrap {
  width: 100%;
  max-width: 380px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.login-brand-logo {
  height: 28px;
  width: auto;
  display: block;
}

.login-brand-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.3px;
}

.login-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
}

.login-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.login-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.login-alert {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-size: 13px;
}

.login-alert--success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.login-alert--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.login-field {
  margin-bottom: 16px;
}

.login-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.login-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.login-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.login-input--error {
  border-color: var(--negative);
}

.login-field-error {
  display: block;
  font-size: 12px;
  color: var(--negative);
  margin-top: 5px;
}

.login-pw-wrap {
  position: relative;
}

.login-pw-wrap .login-input {
  padding-right: 38px;
}

.login-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 2px;
  display: flex;
  align-items: center;
}

.login-pw-toggle:hover {
  color: var(--text-secondary);
}

.login-btn {
  width: 100%;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .15s;
}

.login-btn:hover:not(:disabled) {
  opacity: .88;
}

.login-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.login-footer {
  font-size: 12px;
  color: var(--text-tertiary);
}

.hidden {
  display: none !important;
}

.usr-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}

.usr-tool-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .15s, background .15s;
}

.usr-tool-check:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.usr-tool-check input[type="checkbox" ] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}

.usr-tools-all {
  display: inline-block;
  font-size: 12px;
  color: var(--positive);
  background: var(--positive-bg);
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.usr-tools-none {
  display: inline-block;
  font-size: 12px;
  color: var(--negative);
  background: var(--negative-bg);
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.usr-tools-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.usr-tool-pill {
  font-size: 11.5px;
  background: var(--accent-light);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.seo-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}

.seo-add-btn:hover {
  opacity: .88;
}

.seo-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}

.seo-btn-ghost:hover {
  background: var(--bg);
}

.seo-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.seo-label {
  font-size: 13px;
  font-weight: 500;
}

.seo-label-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.seo-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
  transition: border-color .15s;
}

.seo-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.seo-textarea--error {
  border-color: var(--negative);
}

.seo-field-error {
  font-size: 12px;
  color: var(--negative);
}

.seo-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.seo-search-wrap {
  position: relative;
  flex: 1;
  max-width: 360px;
}

.seo-search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--surface);
  transition: border-color .15s;
}

.seo-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.seo-count {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-left: auto;
}

.seo-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
}

.seo-filter-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.seo-filter-toggle.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

.seo-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.seo-filter-panel {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.seo-filter-panel.hidden {
  display: none;
}

.seo-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.seo-filter-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.seo-filter-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.seo-filter-input {
  width: 72px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  background: var(--surface);
  color: var(--text-primary);
  transition: border-color .15s;
}

.seo-filter-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.seo-filter-sep {
  font-size: 12px;
  color: var(--text-tertiary);
}

.seo-filter-reset {
  padding: 6px 12px;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  color: #b91c1c;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s;
  align-self: flex-end;
}

.seo-filter-reset:hover {
  background: #fee2e2;
}

.seo-filter-reset.hidden {
  display: none;
}

.seo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.seo-table thead th {
  padding: 11px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.seo-th-url {
  width: 26%;
}

.seo-th-meta {
  width: 33%;
}

.seo-th-actions {
  width: 120px;
}

.seo-row {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}

.seo-row:last-child {
  border-bottom: none;
}

.seo-row:hover {
  background: #fafbff;
}

.seo-row td {
  padding: 12px 14px;
  vertical-align: top;
}

.seo-url-cell {
  max-width: 0;
}

.seo-url-link {
  display: block;
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seo-url-link:hover {
  text-decoration: underline;
}

.seo-ai-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  background: var(--accent);
  color: #fff;
  padding: 1px 6px;
  border-radius: 20px;
  margin-left: 5px;
  vertical-align: middle;
}

.seo-fetched-at {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

.seo-row-error {
  font-size: 11.5px;
  color: var(--negative);
  margin-top: 4px;
}

.seo-gsc-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.seo-gsc-stats span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.seo-meta-cell {
  vertical-align: top;
}

.seo-meta-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 5px;
}

.seo-meta-title--ai {
  color: #2d6a7f;
}

.seo-meta-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.seo-not-fetched {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.seo-cc {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 20px;
  margin-left: 5px;
  vertical-align: middle;
}

.seo-cc-ok {
  background: var(--positive-bg);
  color: var(--positive);
}

.seo-cc-warn {
  background: #fef3c7;
  color: #92400e;
}

.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.focus-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.focus-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.focus-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.focus-card-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.focus-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.focus-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
}

.focus-icon-btn:hover {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--accent);
}

.focus-icon-btn--delete:hover {
  color: var(--negative);
  border-color: var(--negative);
  background: #fef2f2;
}

.focus-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.focus-kw-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.focus-stats {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.focus-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.focus-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.focus-stat-lbl {
  font-size: 11px;
  color: var(--text-tertiary);
}

.focus-stat--present .focus-stat-val {
  color: var(--positive);
}

.focus-stat--opportunity .focus-stat-val {
  color: #d97706;
}

.focus-stat--notfound .focus-stat-val {
  color: var(--negative);
}

.focus-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
}

.focus-view-btn:hover {
  background: #c2dde6;
}

.focus-action-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.focus-rescan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .15s;
}

.focus-rescan-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.focus-rescan-btn:disabled, .focus-rescan-btn:disabled * {
  opacity: .5;
  cursor: not-allowed;
}

.focus-progress-wrap {
  flex: 1;
  max-width: 260px;
  height: 6px;
  background: var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.focus-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 20px;
  transition: width .2s;
}

.focus-progress-label {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.focus-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.focus-tab {
  padding: 8px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}

.focus-tab:hover {
  color: var(--text-primary);
}

.focus-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}

.focus-tab-count {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.focus-tab.active .focus-tab-count {
  background: var(--accent-light);
  color: var(--accent);
}

.focus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.focus-table thead th {
  padding: 11px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.focus-row {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}

.focus-row:last-child {
  border-bottom: none;
}

.focus-row:hover {
  background: #fafbff;
}

.focus-row td {
  padding: 11px 14px;
  vertical-align: top;
}

.focus-url-cell {
  max-width: 0;
}

.focus-status-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
  margin-top: 3px;
}

.focus-status--present {
  background: var(--positive-bg);
  color: var(--positive);
}

.focus-status--opportunity {
  background: #fef3c7;
  color: #92400e;
}

.focus-status--notfound {
  background: #fee2e2;
  color: #b91c1c;
}

.focus-status--pending {
  background: var(--bg);
  color: var(--text-tertiary);
  border: 1px solid var(--border);
}

.focus-status--error {
  background: #fee2e2;
  color: #b91c1c;
}

.focus-badges-cell {
  vertical-align: top;
}

.focus-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px;
}

.focus-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid transparent;
}

.focus-badge--found {
  background: var(--positive-bg);
  color: var(--positive);
  border-color: #bbf7d0;
}

.focus-badge--missing {
  background: var(--bg);
  color: var(--text-tertiary);
  border-color: var(--border);
}

.focus-density {
  font-size: 11px;
  color: var(--text-tertiary);
}

.focus-ai-cell {
  vertical-align: top;
}

.focus-ai-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.focus-ai-context {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.focus-ai-suggestion {
  font-size: 12.5px;
  color: #2d6a7f;
  line-height: 1.45;
  margin: 0;
  font-weight: 500;
}

.focus-ai-ts {
  font-size: 11px;
  color: var(--text-tertiary);
}

.focus-actions-cell {
  vertical-align: top;
  white-space: nowrap;
}

.seo-actions-cell {
  white-space: nowrap;
  vertical-align: middle;
}

.seo-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  margin-right: 4px;
  transition: background .12s, color .12s;
}

.seo-action-btn:hover {
  background: var(--bg);
  color: var(--text-primary);
}

.seo-action-btn--ai {
  color: var(--accent);
  border-color: #9dcbda;
  background: var(--accent-light);
}

.seo-action-btn--ai:hover {
  background: #c2dde6;
}

.seo-action-btn--clear {
  color: var(--text-tertiary);
}

.seo-action-btn--danger {
  color: var(--negative);
  border-color: #fecaca;
}

.seo-action-btn--danger:hover {
  background: var(--negative-bg);
}

.seo-action-btn--disabled {
  opacity: .4;
  cursor: not-allowed;
}

.seo-empty-row {
  text-align: center;
  padding: 32px !important;
  color: var(--text-tertiary);
  font-size: 13px;
}

@keyframes seo-spin {
 to  {
 transform: rotate(360deg);
}
}

.seo-spin {
  animation: seo-spin .8s linear infinite;
}

.ga-chat-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  overflow: hidden;
  padding: 0;
}

.ga-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.ga-chat-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ga-chat-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ga-chat-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ga-chat-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.ga-chat-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 2px 0 0;
}

.ga-chat-stats {
  display: flex;
  align-items: center;
  gap: 0;
}

.ga-chat-stat {
  display: flex;
  flex-direction: column;
  padding: 0 14px;
}

.ga-chat-stat-label {
  font-size: 10.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.ga-chat-stat-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.ga-chat-stat-sep {
  width: 1px;
  height: 28px;
  background: var(--border);
}

.ga-chat-clear-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.ga-chat-clear-btn:hover {
  background: var(--bg);
  color: var(--negative);
  border-color: #fecaca;
}

.ga-btn-chat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s;
}

.ga-btn-chat:hover {
  background: #c2dde6;
}

.ga-chat-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.ga-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ga-chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 20px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.ga-chat-welcome-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.ga-chat-welcome-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.ga-chat-welcome-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 28px;
  line-height: 1.6;
}

.ga-chat-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.ga-chat-starter {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  text-align: left;
  line-height: 1.4;
}

.ga-chat-starter:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.ga-chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 820px;
}

.ga-chat-msg--user {
  align-self: flex-end;
  flex-direction: row;
}

.ga-chat-msg--assistant {
  align-self: flex-start;
  flex-direction: row;
}

.ga-chat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ga-chat-avatar--ai {
  background: var(--accent-light);
  color: var(--accent);
}

.ga-chat-avatar--user {
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.ga-chat-bubble {
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 680px;
  word-break: break-word;
}

.ga-chat-msg--user .ga-chat-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ga-chat-msg--assistant .ga-chat-bubble {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.ga-chat-bubble--error {
  background: var(--negative-bg) !important;
  color: var(--negative) !important;
  border-color: #fecaca !important;
}

.ga-chat-bubble--typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
}

.ga-chat-bubble--typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: ga-chat-bounce .9s infinite ease-in-out;
}

.ga-chat-bubble--typing span:nth-child(2) {
  animation-delay: .15s;
}

.ga-chat-bubble--typing span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes ga-chat-bounce {
 0%,60%,100%  {
 transform: translateY(0);
}
 30%  {
 transform: translateY(-6px);
}
/* Input area */
 .ga-chat-input-wrap  {
 flex-shrink: 0;
 padding: 14px 24px 18px;
 border-top: 1px solid var(--border);
 background: var(--surface);
}
 .ga-chat-input-row  {
 display: flex;
 align-items: flex-end;
 gap: 10px;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 8px 8px 8px 14px;
 transition: border-color .15s;
}
 .ga-chat-input-row:focus-within  {
 border-color: var(--accent);
}
 .ga-chat-input  {
 flex: 1;
 border: none;
 background: transparent;
 resize: none;
 outline: none;
 font-size: 13.5px;
 color: var(--text-primary);
 line-height: 1.5;
 max-height: 160px;
 font-family: inherit;
 padding: 4px 0;
}
 .ga-chat-input::placeholder  {
 color: var(--text-tertiary);
}
 .ga-chat-send-btn  {
 width: 36px;
 height: 36px;
 border-radius: 8px;
 background: var(--accent);
 color: #fff;
 border: none;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 flex-shrink: 0;
 transition: background .12s;
}
 .ga-chat-send-btn:hover  {
 background: #4338ca;
}
 .ga-chat-send-btn:disabled  {
 background: var(--border);
 cursor: not-allowed;
}
 .ga-chat-hint  {
 font-size: 11px;
 color: var(--text-tertiary);
 margin: 0;
}
 .ga-chat-hint-row  {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin: 6px 0 0 2px;
}
 .ga-chat-new-btn  {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 font-size: 11.5px;
 color: var(--text-secondary);
 text-decoration: none;
 padding: 3px 8px;
 border-radius: 6px;
 border: 1px solid var(--border);
 background: var(--bg-secondary);
 transition: background .12s, color .12s;
 white-space: nowrap;
 cursor: pointer;
}
 .ga-chat-new-btn:hover  {
 background: var(--border);
 color: var(--text-primary);
/* ── Campaign picker ────────────────────────────────────────────────────── */
 .ga-chat-picker  {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 40px 24px;
 overflow-y: auto;
}
 .ga-chat-picker-card  {
 background: var(--surface);
 border: 1.5px solid var(--border);
 border-radius: 16px;
 padding: 32px 36px;
 width: 100%;
 max-width: 480px;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 0;
}
 .ga-chat-picker-icon  {
 width: 52px;
 height: 52px;
 border-radius: 14px;
 background: #fef9c3;
 color: #ca8a04;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 16px;
}
 .ga-chat-picker-title  {
 font-size: 18px;
 font-weight: 600;
 color: var(--text-primary);
 margin: 0 0 6px;
}
 .ga-chat-picker-desc  {
 font-size: 13px;
 color: var(--text-secondary);
 margin: 0 0 22px;
}
 .ga-chat-picker-select-wrap  {
 width: 100%;
 margin-bottom: 14px;
}
 .ga-chat-picker-select  {
 width: 100%;
 padding: 10px 14px;
 border: 1.5px solid var(--border);
 border-radius: 10px;
 background: var(--bg);
 color: var(--text-primary);
 font-size: 13.5px;
 outline: none;
 cursor: pointer;
 transition: border-color .15s;
 appearance: none;
 -webkit-appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
 background-repeat: no-repeat;
 background-position: right 12px center;
 padding-right: 36px;
}
 .ga-chat-picker-select:focus  {
 border-color: var(--accent);
}
 .ga-chat-picker-info  {
 width: 100%;
 display: flex;
 flex-direction: column;
 gap: 6px;
 background: var(--bg);
 border-radius: 10px;
 padding: 12px 14px;
 margin-bottom: 18px;
}
 .ga-chat-picker-info-row  {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 12.5px;
}
 .ga-chat-picker-info-row span  {
 color: var(--text-secondary);
}
 .ga-chat-picker-info-row strong  {
 color: var(--text-primary);
}
 .ga-chat-picker-btn  {
 display: flex;
 align-items: center;
 gap: 7px;
 padding: 11px 28px;
 border-radius: 10px;
 border: none;
 background: var(--accent);
 color: #fff;
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
 transition: background .12s;
 width: 100%;
 justify-content: center;
 margin-top: 20px;
}
 .ga-chat-picker-btn:hover  {
 background: #4338ca;
}
 .ga-chat-picker-btn:disabled  {
 background: var(--border);
 color: var(--text-tertiary);
 cursor: not-allowed;
/* Picker multi-step */
 .ga-picker-steps  {
 display: flex;
 align-items: center;
 gap: 0;
 margin-bottom: 24px;
}
 .ga-picker-step-dot  {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 background: var(--bg);
 border: 2px solid var(--border);
 color: var(--text-tertiary);
 font-size: 12px;
 font-weight: 600;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 transition: all .2s;
}
 .ga-picker-step-dot.active  {
 background: var(--accent);
 border-color: var(--accent);
 color: #fff;
}
 .ga-picker-step-line  {
 flex: 1;
 height: 2px;
 background: var(--border);
 min-width: 30px;
}
 .ga-picker-panel  {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0;
}
 .ga-picker-label  {
 font-size: 12.5px;
 color: var(--text-secondary);
 font-weight: 500;
 align-self: flex-start;
 margin-bottom: 8px;
 margin-top: 4px;
/* Edit type options */
 .ga-picker-options  {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 width: 100%;
 margin-bottom: 16px;
}
 .ga-picker-option  {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 padding: 14px 10px;
 border: 1.5px solid var(--border);
 border-radius: 12px;
 background: var(--bg);
 cursor: pointer;
 transition: all .15s;
 text-align: center;
}
 .ga-picker-option:hover  {
 border-color: var(--accent);
 background: var(--accent-light);
}
 .ga-picker-option.active  {
 border-color: var(--accent);
 background: var(--accent-light);
}
 .ga-picker-option-icon  {
 font-size: 22px;
}
 .ga-picker-option-label  {
 font-size: 13px;
 font-weight: 600;
 color: var(--text-primary);
}
 .ga-picker-option-desc  {
 font-size: 11px;
 color: var(--text-secondary);
/* AI info block */
 .ga-picker-ai-info  {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 12px 14px;
 background: var(--accent-light);
 border-radius: 10px;
 color: var(--accent);
 font-size: 12.5px;
 line-height: 1.5;
 width: 100%;
 margin-bottom: 16px;
}
 .ga-picker-ai-info svg  {
 flex-shrink: 0;
 margin-top: 1px;
/* Loading / error */
 .ga-picker-loading  {
 display: flex;
 align-items: center;
 gap: 8px;
 color: var(--text-secondary);
 font-size: 13px;
 padding: 16px 0;
}
 .ga-picker-error  {
 color: var(--negative);
 font-size: 12.5px;
 padding: 8px 0;
/* Detail rows */
 .ga-picker-detail-row  {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 6px 10px;
 background: var(--bg);
 border-radius: 8px;
 font-size: 12.5px;
 margin-bottom: 4px;
 width: 100%;
}
 .ga-picker-detail-row span  {
 color: var(--text-secondary);
}
 .ga-picker-detail-row strong  {
 color: var(--text-primary);
/* Keyword action buttons */
 .ga-picker-actions  {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 width: 100%;
 margin-bottom: 4px;
}
 .ga-picker-action-btn  {
 flex: 1;
 padding: 8px 10px;
 border-radius: 8px;
 border: 1.5px solid var(--border);
 background: var(--bg);
 color: var(--text-secondary);
 font-size: 12.5px;
 cursor: pointer;
 transition: all .12s;
 white-space: nowrap;
}
 .ga-picker-action-btn:hover  {
 border-color: var(--accent);
 color: var(--accent);
 background: var(--accent-light);
}
 .ga-picker-action-btn.active  {
 border-color: var(--accent);
 color: var(--accent);
 background: var(--accent-light);
 font-weight: 600;
/* Input */
 .ga-chat-picker-input  {
 width: 100%;
 padding: 9px 12px;
 border: 1.5px solid var(--border);
 border-radius: 9px;
 background: var(--bg);
 color: var(--text-primary);
 font-size: 13px;
 outline: none;
 transition: border-color .15s;
 box-sizing: border-box;
}
 .ga-chat-picker-input:focus  {
 border-color: var(--accent);
/* Back button */
 .ga-picker-back-btn  {
 background: none;
 border: none;
 color: var(--text-tertiary);
 font-size: 12px;
 cursor: pointer;
 padding: 6px 0;
 margin-top: 8px;
 transition: color .12s;
}
 .ga-picker-back-btn:hover  {
 color: var(--text-secondary);
/* Result state */
 .ga-picker-result  {
 font-size: 14px;
 font-weight: 500;
 line-height: 1.6;
 text-align: center;
 padding: 8px 0;
}
 .ga-picker-result--ok  {
 color: #16a34a;
}
 .ga-picker-result--error  {
 color: var(--negative);
/* Spin animation */
 @keyframes ga-spin  {
 to  {
 transform: rotate(360deg);
}
}
 .ga-spin  {
 animation: ga-spin .8s linear infinite;
/* ── Chat mode selection ──────────────────────────────────────────────────── */
 .ga-chat-mode-screen  {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 40px 24px;
 overflow-y: auto;
}
 .ga-chat-mode-intro  {
 font-size: 18px;
 font-weight: 600;
 color: var(--text-primary);
 margin: 0 0 28px;
 text-align: center;
}
 .ga-chat-mode-grid  {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 14px;
 width: 100%;
 max-width: 680px;
}
 .ga-chat-mode-card  {
 display: flex;
 align-items: center;
 gap: 16px;
 padding: 18px 20px;
 border: 1.5px solid var(--border);
 border-radius: 14px;
 background: var(--surface);
 cursor: pointer;
 text-decoration: none;
 transition: border-color .15s, box-shadow .15s, transform .12s;
 color: var(--text-primary);
 position: relative;
}
 .ga-chat-mode-card:hover  {
 border-color: var(--accent);
 box-shadow: 0 4px 16px rgba(79,70,229,.1);
 transform: translateY(-1px);
}
 .ga-chat-mode-card-icon  {
 width: 46px;
 height: 46px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
 .ga-chat-mode-card-icon--ask  {
 background: #eff6ff;
 color: #3b82f6;
}
 .ga-chat-mode-card-icon--edit  {
 background: #fef9c3;
 color: #ca8a04;
}
 .ga-chat-mode-card-icon--create  {
 background: #dcfce7;
 color: #16a34a;
}
 .ga-chat-mode-card-icon--analyze  {
 background: var(--accent-light);
 color: var(--accent);
}
 .ga-chat-mode-card-title  {
 font-size: 14px;
 font-weight: 600;
 color: var(--text-primary);
 margin-bottom: 3px;
}
 .ga-chat-mode-card-desc  {
 font-size: 12px;
 color: var(--text-secondary);
 line-height: 1.45;
}
 .ga-chat-mode-card-arrow  {
 color: var(--border);
 position: absolute;
 right: 18px;
 top: 50%;
 transform: translateY(-50%);
 transition: color .15s;
}
 .ga-chat-mode-card:hover .ga-chat-mode-card-arrow  {
 color: var(--accent);
/* Mode back link */
 .ga-chat-mode-back  {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 6px 11px;
 border-radius: 7px;
 border: 1px solid var(--border);
 background: transparent;
 color: var(--text-secondary);
 font-size: 12px;
 cursor: pointer;
 text-decoration: none;
 transition: background .12s, color .12s;
}
 .ga-chat-mode-back:hover  {
 background: var(--bg);
 color: var(--text-primary);
/* ── Confirmation modal ──────────────────────────────────────────────────── */
 .ga-chat-modal-backdrop  {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,.45);
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
}
 .ga-chat-modal  {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 16px;
 width: 100%;
 max-width: 440px;
 box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
 .ga-chat-modal-header  {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 20px 22px 16px;
 border-bottom: 1px solid var(--border);
}
 .ga-chat-modal-icon  {
 color: var(--accent);
}
 .ga-chat-modal-title  {
 font-size: 16px;
 font-weight: 600;
 color: var(--text-primary);
 margin: 0;
}
 .ga-chat-modal-body  {
 padding: 18px 22px;
 display: flex;
 flex-direction: column;
 gap: 8px;
}
 .ga-modal-row  {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 8px 12px;
 border-radius: 8px;
 background: var(--bg);
}
 .ga-modal-row--highlight  {
 background: var(--accent-light);
}
 .ga-modal-label  {
 font-size: 12px;
 color: var(--text-secondary);
}
 .ga-modal-val  {
 font-size: 13px;
 color: var(--text-primary);
 text-align: right;
}
 .ga-chat-modal-footer  {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 10px;
 padding: 14px 22px 18px;
 border-top: 1px solid var(--border);
}
 .ga-chat-modal-cancel  {
 padding: 8px 16px;
 border-radius: 8px;
 border: 1px solid var(--border);
 background: transparent;
 color: var(--text-secondary);
 font-size: 13px;
 cursor: pointer;
 transition: background .12s;
}
 .ga-chat-modal-cancel:hover  {
 background: var(--bg);
}
 .ga-chat-modal-confirm  {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 9px 18px;
 border-radius: 8px;
 border: none;
 background: var(--accent);
 color: #fff;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
 transition: background .12s;
}
 .ga-chat-modal-confirm:hover  {
 background: #4338ca;
}
 .ga-chat-modal-confirm:disabled  {
 opacity: .6;
 cursor: not-allowed;
/* ── Scrollbar ── */
 ::-webkit-scrollbar  {
 width: 6px;
}
 ::-webkit-scrollbar-track  {
 background: transparent;
}
 ::-webkit-scrollbar-thumb  {
 background: var(--border);
 border-radius: 10px;
}
 ::-webkit-scrollbar-thumb:hover  {
 background: #d1d5db;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}