/* AllScience — Research Analytics Page Styles */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.analytics-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.analytics-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 14, 23, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1.5rem;
  height: 56px;
}

[data-theme="light"] .analytics-topbar {
  background: rgba(248, 250, 252, 0.92);
}

.analytics-topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.analytics-topbar .topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text);
  text-decoration: none;
}

.analytics-topbar .topbar-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.analytics-topbar .topbar-nav a {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition);
}

.analytics-topbar .topbar-nav a:hover { color: var(--color-text); }
.analytics-topbar .topbar-nav a.active { color: var(--color-primary); }

.analytics-topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.analytics-topbar .topbar-user {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.analytics-content {
  margin-top: 56px;
  padding: 2rem 1.5rem 3rem;
  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ── Page Header ─────────────────────────────────────────────────────────── */
.analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.analytics-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
}

.time-range-selector {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.time-range-selector button {
  background: transparent;
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.375rem 0.875rem;
  cursor: pointer;
  transition: all var(--transition);
}

.time-range-selector button:last-child { border-right: none; }

.time-range-selector button:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
}

.time-range-selector button.active {
  background: var(--color-primary);
  color: #fff;
}

/* ── Summary Cards ───────────────────────────────────────────────────────── */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.summary-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.summary-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary-glow);
}

.summary-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.summary-card-icon.projects { background: rgba(59, 130, 246, 0.12); color: var(--color-primary); }
.summary-card-icon.words { background: rgba(6, 214, 160, 0.12); color: var(--color-accent); }
.summary-card-icon.pubs { background: rgba(245, 158, 11, 0.12); color: var(--color-warning); }
.summary-card-icon.score { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }

.summary-card-body { flex: 1; min-width: 0; }

.summary-card-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.summary-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.summary-card-trend {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.summary-card-trend.up { color: var(--color-success); }
.summary-card-trend.down { color: var(--color-danger); }

/* ── Chart Sections ──────────────────────────────────────────────────────── */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.chart-panel {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.chart-panel.full-width {
  grid-column: 1 / -1;
}

.chart-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.chart-panel-header h3 {
  font-size: 1rem;
  font-weight: 600;
}

.chart-panel-header .chart-legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.chart-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.25rem;
}

.chart-canvas-wrap {
  position: relative;
  width: 100%;
}

.chart-canvas-wrap canvas {
  width: 100%;
  display: block;
}

/* ── Top Projects Table ──────────────────────────────────────────────────── */
.projects-table-wrap {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 2rem;
}

.projects-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.projects-table-header h3 {
  font-size: 1rem;
  font-weight: 600;
}

.projects-table {
  width: 100%;
  border-collapse: collapse;
}

.projects-table th,
.projects-table td {
  text-align: left;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
}

.projects-table th {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border);
}

.projects-table td {
  border-bottom: 1px solid var(--color-border);
}

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

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

.project-name-cell {
  font-weight: 500;
  color: var(--color-text);
}

.review-score-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
}

.review-score-badge.high { background: rgba(16, 185, 129, 0.15); color: var(--color-success); }
.review-score-badge.mid { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.review-score-badge.low { background: rgba(239, 68, 68, 0.15); color: var(--color-danger); }

/* ── Skeleton overrides ──────────────────────────────────────────────────── */
.skeleton-card-analytics {
  height: 90px;
}

.skeleton-chart {
  height: 260px;
  border-radius: var(--radius-md);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .analytics-topbar .topbar-nav { display: none; }
  .analytics-content { padding: 1.25rem 1rem 2rem; }

  .analytics-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .summary-cards {
    grid-template-columns: 1fr;
  }

  .chart-grid {
    grid-template-columns: 1fr;
  }

  .time-range-selector {
    width: 100%;
  }

  .time-range-selector button {
    flex: 1;
    text-align: center;
  }

  .projects-table th:nth-child(3),
  .projects-table td:nth-child(3),
  .projects-table th:nth-child(4),
  .projects-table td:nth-child(4) {
    display: none;
  }
}

/* ── Donut center label ──────────────────────────────────────────────────── */
.donut-center-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.donut-center-label .donut-total {
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
  line-height: 1.2;
}

.donut-center-label .donut-subtitle {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Chart Interactive Tooltips ─────────────────────────────────────────── */
.chart-tooltip {
  position: fixed;
  z-index: 6000;
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 0.625rem 0.875rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  max-width: 220px;
}

.chart-tooltip-visible {
  opacity: 1;
  transform: translateY(0);
}

.chart-tooltip-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted, #8896ab);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.125rem;
}

.chart-tooltip-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
}

.chart-tooltip-extra {
  font-size: 0.6875rem;
  color: var(--color-text-dim, #5a6a80);
  margin-top: 0.125rem;
}

[data-theme="light"] .chart-tooltip {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ── Analytics Export & Sharing ─────────────────────────────────── */
.analytics-export-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.analytics-export-btn {
  background: transparent;
  border: 1px solid var(--color-border, #2a3a52);
  color: var(--color-text, #e2e8f0);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3rem 0.625rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.analytics-export-btn:hover {
  border-color: var(--color-primary, #3b82f6);
  color: var(--color-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
}
.analytics-share-btn {
  margin-left: 0.25rem;
  border-color: var(--color-primary, #3b82f6);
  color: var(--color-primary, #3b82f6);
}
.analytics-share-btn:hover {
  background: var(--color-primary, #3b82f6);
  color: #fff;
}

/* Print mode for analytics */
@media print {
  .analytics-topbar,
  .analytics-export-bar,
  .time-range-selector { display: none !important; }

  .analytics-content {
    margin-top: 0;
    padding: 0;
    max-width: 100%;
  }

  .summary-cards { grid-template-columns: repeat(4, 1fr); }
  .chart-grid { grid-template-columns: 1fr 1fr; }

  .summary-card, .chart-panel, .projects-table-wrap {
    border-color: #ccc;
    box-shadow: none;
    break-inside: avoid;
  }

  body { background: #fff; color: #000; }
  .summary-card-label, .chart-panel-header h3, .projects-table th { color: #333; }
  .summary-card-value { color: #000; }
}

@media (max-width: 768px) {
  .analytics-export-bar { gap: 0.25rem; }
  .analytics-export-btn { font-size: 0.6875rem; padding: 0.25rem 0.5rem; }
}

/* ── Custom Dashboard Builder ─────────────────────────────────── */
.adb-customize-btn {
  background: transparent;
  border: 1px solid var(--color-primary, #3b82f6);
  color: var(--color-primary, #3b82f6);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4rem 0.875rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.adb-customize-btn:hover {
  background: var(--color-primary, #3b82f6);
  color: #fff;
}

.adb-section {
  margin-bottom: 2rem;
}

.adb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.adb-toolbar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
}

.adb-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.adb-edit-toggle {
  border-color: var(--color-border, #2a3a52);
  color: var(--color-text-muted, #8896ab);
}

.adb-edit-toggle:hover {
  border-color: var(--color-primary, #3b82f6);
  color: var(--color-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
}

/* Grid */
.adb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1rem;
}

/* Widget card */
.adb-widget {
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}

.adb-widget:hover {
  border-color: var(--color-primary-glow, rgba(59, 130, 246, 0.4));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.adb-widget-2x1 {
  grid-column: span 2;
}

/* Widget header */
.adb-widget-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-border, #2a3a52);
  min-height: 40px;
}

.adb-widget-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adb-drag-handle {
  cursor: grab;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.875rem;
  user-select: none;
  display: none;
}

.adb-remove-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #8896ab);
  font-size: 1.125rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  transition: color 0.15s;
  display: none;
}

.adb-remove-btn:hover {
  color: var(--color-danger, #ef4444);
}

/* Widget content */
.adb-widget-content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Edit mode */
.adb-editing .adb-widget {
  border-style: dashed;
  border-color: var(--color-primary, #3b82f6);
}

.adb-editing .adb-drag-handle {
  display: inline;
}

.adb-editing .adb-remove-btn {
  display: inline;
}

/* Dragging state */
.adb-widget-dragging {
  opacity: 0.4;
  transform: scale(0.96);
}

.adb-drag-over {
  border-color: var(--color-accent, #06d6a0) !important;
  box-shadow: 0 0 0 2px rgba(6, 214, 160, 0.3);
}

/* Add placeholder */
.adb-add-placeholder {
  border: 2px dashed var(--color-border, #2a3a52);
  border-radius: var(--radius-md, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  cursor: pointer;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s;
}

.adb-add-placeholder:hover {
  border-color: var(--color-primary, #3b82f6);
  color: var(--color-primary, #3b82f6);
}

/* Widget Picker Modal */
.adb-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.adb-picker-card {
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: var(--radius-md, 10px);
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.adb-picker-card:hover {
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.adb-picker-icon {
  margin-bottom: 0.5rem;
  color: var(--color-primary, #3b82f6);
}

.adb-picker-icon svg {
  width: 32px;
  height: 32px;
}

.adb-picker-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  margin-bottom: 0.25rem;
}

.adb-picker-size {
  font-size: 0.6875rem;
  color: var(--color-text-muted, #8896ab);
}

/* Empty state */
.adb-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted, #8896ab);
}

.adb-empty-state p {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}

.adb-add-btn {
  background: var(--color-primary, #3b82f6);
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.adb-add-btn:hover {
  background: #2563eb;
}

/* Widget content styles */
.adb-widget-stat {
  text-align: center;
}

.adb-stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  line-height: 1.2;
}

.adb-stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted, #8896ab);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
}

.adb-stat-secondary {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #2a3a52);
}

.adb-stat-secondary .adb-stat-number {
  font-size: 1.25rem;
}

.adb-streak-icon {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

/* Bar chart rows */
.adb-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.adb-bar-row:last-child { margin-bottom: 0; }

.adb-bar-label {
  font-size: 0.75rem;
  color: var(--color-text-muted, #8896ab);
  min-width: 60px;
  text-align: right;
}

.adb-bar-track {
  flex: 1;
  height: 8px;
  background: var(--color-border, #2a3a52);
  border-radius: 4px;
  overflow: hidden;
}

.adb-bar-fill {
  height: 100%;
  background: var(--color-primary, #3b82f6);
  border-radius: 4px;
  transition: width 0.3s;
}

.adb-bar-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  min-width: 28px;
}

/* Mini bar chart */
.adb-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding-bottom: 1.25rem;
  position: relative;
}

.adb-mini-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}

.adb-mini-bar {
  width: 100%;
  max-width: 32px;
  background: var(--color-primary, #3b82f6);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.3s;
}

.adb-mini-bar-lbl {
  font-size: 0.625rem;
  color: var(--color-text-muted, #8896ab);
  position: absolute;
  bottom: 0;
}

/* Progress rings */
.adb-rings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.adb-ring-item {
  text-align: center;
}

.adb-ring-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted, #8896ab);
  margin-top: 0.25rem;
}

/* Review summary row */
.adb-review-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1rem;
}

.adb-review-pct,
.adb-review-pending {
  text-align: center;
}

/* Activity list */
.adb-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.adb-activity-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border, #2a3a52);
  font-size: 0.8125rem;
  color: var(--color-text, #e2e8f0);
}

.adb-activity-list li:last-child { border-bottom: none; }

.adb-activity-list strong {
  color: var(--color-primary, #3b82f6);
}

.adb-activity-time {
  color: var(--color-text-muted, #8896ab);
  font-size: 0.6875rem;
  float: right;
}

.adb-widget-empty {
  text-align: center;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.8125rem;
}

/* ── Light Theme Overrides ────────────────────────────────────── */
[data-theme="light"] .adb-toolbar-title {
  color: #1e293b;
}

[data-theme="light"] .adb-widget {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .adb-widget:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .adb-widget-header {
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .adb-widget-title {
  color: #1e293b;
}

[data-theme="light"] .adb-stat-number {
  color: #1e293b;
}

[data-theme="light"] .adb-stat-secondary {
  border-top-color: #e2e8f0;
}

[data-theme="light"] .adb-bar-track {
  background: #e2e8f0;
}

[data-theme="light"] .adb-bar-value {
  color: #1e293b;
}

[data-theme="light"] .adb-activity-list li {
  border-bottom-color: #e2e8f0;
  color: #1e293b;
}

[data-theme="light"] .adb-picker-card {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .adb-picker-card:hover {
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .adb-picker-name {
  color: #1e293b;
}

[data-theme="light"] .adb-add-placeholder {
  border-color: #cbd5e1;
  color: #64748b;
}

[data-theme="light"] .adb-editing .adb-widget {
  border-color: #3b82f6;
}

/* ── Responsive: Dashboard Builder ────────────────────────────── */
@media (max-width: 1024px) {
  .adb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .adb-grid {
    grid-template-columns: 1fr;
  }

  .adb-widget-2x1 {
    grid-column: span 1;
  }

  .adb-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .adb-picker-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .adb-mini-bars {
    height: 80px;
  }
}

/* ── Goal Tracking ─────────────────────────────────────────────── */
.goal-tracking-section {
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: var(--radius-md, 10px);
  padding: 1.25rem;
  margin-bottom: 2rem;
}

.gt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.gt-header h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  margin: 0;
}

.gt-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gt-set-btn,
.gt-history-btn {
  background: transparent;
  border: 1px solid var(--color-border, #2a3a52);
  color: var(--color-text, #e2e8f0);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.375rem 0.875rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.gt-set-btn {
  border-color: var(--color-primary, #3b82f6);
  color: var(--color-primary, #3b82f6);
}

.gt-set-btn:hover {
  background: var(--color-primary, #3b82f6);
  color: #fff;
}

.gt-history-btn:hover {
  border-color: var(--color-primary, #3b82f6);
  color: var(--color-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
}

/* Goals grid */
.gt-goals-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.gt-empty {
  width: 100%;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.875rem;
}

.gt-empty strong {
  color: var(--color-primary, #3b82f6);
}

/* Goal card */
.gt-goal-card {
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: var(--radius-md, 10px);
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1 1 280px;
  max-width: 100%;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gt-goal-card:hover {
  border-color: var(--color-primary-glow, rgba(59, 130, 246, 0.4));
}

.gt-goal-card.gt-goal-complete {
  border-color: var(--color-success, #10b981);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

.gt-goal-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm, 6px);
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-primary, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gt-goal-info {
  flex: 1;
  min-width: 0;
}

.gt-goal-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  margin-bottom: 0.375rem;
}

/* Progress bar */
.gt-goal-progress {
  width: 100%;
  height: 6px;
  background: var(--color-border, #2a3a52);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.375rem;
}

.gt-goal-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease, background-color 0.3s;
}

.gt-goal-fill.gt-fill-gray  { background: #6b7280; }
.gt-goal-fill.gt-fill-amber { background: #f59e0b; }
.gt-goal-fill.gt-fill-green { background: #10b981; }
.gt-goal-fill.gt-goal-complete { background: #10b981; }

.gt-goal-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-muted, #8896ab);
}

.gt-goal-pct {
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
}

/* Sparkline */
.gt-goal-spark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.gt-goal-sparkline {
  display: block;
}

/* Remove button */
.gt-goal-remove {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  background: transparent;
  border: none;
  color: var(--color-text-muted, #8896ab);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.gt-goal-card:hover .gt-goal-remove {
  opacity: 1;
}

.gt-goal-remove:hover {
  color: var(--color-danger, #ef4444);
}

/* Streak widget */
.gt-streak-widget {
  display: inline-flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.gt-streak-main {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
}

.gt-streak-count {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f59e0b;
}

.gt-streak-label {
  font-weight: 400;
  color: var(--color-text-muted, #8896ab);
}

.gt-streak-best {
  font-size: 0.75rem;
  color: var(--color-text-muted, #8896ab);
}

/* Streak calendar */
.gt-streak-calendar {
  display: grid;
  grid-template-columns: repeat(14, 16px);
  gap: 3px;
  margin-top: 0.25rem;
}

.gt-streak-day {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--color-border, #2a3a52);
  transition: background 0.15s;
}

.gt-streak-day.gt-streak-active {
  background: var(--color-success, #10b981);
}

/* ── Goal Tracking: Light Theme ───────────────────────────────── */
[data-theme="light"] .goal-tracking-section {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .gt-header h2 {
  color: #1e293b;
}

[data-theme="light"] .gt-set-btn {
  border-color: #3b82f6;
  color: #3b82f6;
}

[data-theme="light"] .gt-set-btn:hover {
  background: #3b82f6;
  color: #fff;
}

[data-theme="light"] .gt-history-btn {
  border-color: #e2e8f0;
  color: #475569;
}

[data-theme="light"] .gt-history-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

[data-theme="light"] .gt-goal-card {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .gt-goal-label {
  color: #1e293b;
}

[data-theme="light"] .gt-goal-progress {
  background: #e2e8f0;
}

[data-theme="light"] .gt-goal-pct {
  color: #1e293b;
}

[data-theme="light"] .gt-streak-main {
  color: #1e293b;
}

[data-theme="light"] .gt-streak-day {
  background: #e2e8f0;
}

[data-theme="light"] .gt-goal-remove:hover {
  color: #ef4444;
}

/* ── Goal Tracking: Responsive ────────────────────────────────── */
@media (max-width: 640px) {
  .gt-goals-grid {
    flex-direction: column;
  }

  .gt-goal-card {
    flex: 1 1 100%;
  }

  .gt-streak-calendar {
    grid-template-columns: repeat(7, 16px);
  }

  .gt-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Goal Tracking: Print ─────────────────────────────────────── */
@media print {
  .goal-tracking-section {
    border-color: #ccc;
    box-shadow: none;
    break-inside: avoid;
  }

  .gt-set-btn,
  .gt-history-btn,
  .gt-goal-remove { display: none; }
}

/* ── Report Generator ────────────────────────────────────────── */
.rg-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-card);
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.rg-trigger-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.rg-trigger-btn svg { flex-shrink: 0; }

.rg-builder { display: flex; flex-direction: column; gap: 1rem; }

.rg-steps {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
}

.rg-step {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-dim);
  padding-bottom: 0.375rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.rg-step-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.rg-step-done { color: var(--color-success); }

.rg-step-content { display: flex; flex-direction: column; gap: 0.75rem; }

.rg-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.rg-input {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.875rem;
}

.rg-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.rg-textarea {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.875rem;
  resize: vertical;
}

.rg-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.rg-date-range {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.rg-range-btn {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}

.rg-range-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.rg-range-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.rg-custom-dates {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rg-date-input { max-width: 160px; }

.rg-select-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.rg-link-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.rg-link-btn:hover { opacity: 0.8; }

.rg-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}

.rg-widget-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-card);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.rg-widget-card:hover { border-color: var(--color-primary); }

.rg-widget-card-selected {
  border-color: var(--color-primary);
  background: rgba(59, 130, 246, 0.06);
}

.rg-widget-card input[type="checkbox"] { margin: 0; accent-color: var(--color-primary); }

.rg-widget-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
}

.rg-widget-preview {
  display: block;
  height: 28px;
  overflow: hidden;
  opacity: 0.6;
}

.rg-preview-frame {
  max-height: 320px;
  overflow-y: auto;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: #1a202c;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.rg-report-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #3b82f6;
}

.rg-report-section {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.rg-report-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
  text-align: center;
  color: #94a3b8;
  font-size: 0.75rem;
}

.rg-export-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rg-export-btn {
  flex: 1 1 auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-card);
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}

.rg-export-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.rg-nav-bar {
  display: flex;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.rg-nav-btn {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}

.rg-nav-btn:hover { border-color: var(--color-text); color: var(--color-text); }

.rg-nav-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.rg-nav-primary:hover { opacity: 0.9; background: var(--color-primary); color: #fff; }

/* ── Report Generator: Light Theme ───────────────────────────── */
[data-theme="light"] .rg-trigger-btn {
  background: #fff;
  border-color: #d1d5db;
}

[data-theme="light"] .rg-preview-frame {
  border-color: #d1d5db;
}

[data-theme="light"] .rg-widget-card {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .rg-widget-card-selected {
  background: rgba(59, 130, 246, 0.04);
}

[data-theme="light"] .rg-export-btn {
  background: #fff;
  border-color: #d1d5db;
  color: #374151;
}

/* ── Report Generator: Responsive ────────────────────────────── */
@media (max-width: 768px) {
  .rg-widget-grid {
    grid-template-columns: 1fr 1fr;
  }

  .rg-export-bar {
    flex-direction: column;
  }

  .rg-export-btn { flex: 1 1 100%; }

  .rg-steps { gap: 0.75rem; }

  .rg-step { font-size: 0.6875rem; }

  .rg-preview-frame {
    max-height: 240px;
    padding: 0.75rem;
  }

  .rg-custom-dates {
    flex-direction: column;
    align-items: stretch;
  }

  .rg-date-input { max-width: 100%; }
}

@media (max-width: 480px) {
  .rg-widget-grid { grid-template-columns: 1fr; }
}

/* ── Report Generator: Print ─────────────────────────────────── */
@media print {
  .rg-trigger-btn,
  .rg-export-bar,
  .rg-nav-bar { display: none; }

  .rg-preview-frame {
    max-height: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }
}

/* ── Productivity Heatmap ───────────────────────────────────────── */
.heatmap-section {
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
  position: relative;
}

.heatmap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.heatmap-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  margin: 0;
}

.heatmap-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.heatmap-year-select {
  background: var(--color-bg, #0f1726);
  color: var(--color-text, #e2e8f0);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
  cursor: pointer;
}

.heatmap-view-toggle {
  display: flex;
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 6px;
  overflow: hidden;
}

.heatmap-toggle-btn {
  background: transparent;
  color: var(--color-text-muted, #8896ab);
  border: none;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.heatmap-toggle-btn.active {
  background: var(--color-primary, #3b82f6);
  color: #fff;
}

.heatmap-container {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.heatmap-day-labels {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 22px;
}

.heatmap-day-label {
  height: 13px;
  line-height: 13px;
  font-size: 9px;
  color: var(--color-text-dim, #5a6a80);
  text-align: right;
  padding-right: 4px;
}

.heatmap-body {
  flex: 1;
  min-width: 0;
}

.heatmap-month-labels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 15px;
  gap: 1px;
  margin-bottom: 3px;
  height: 18px;
}

.heatmap-month-label {
  font-size: 9px;
  color: var(--color-text-dim, #5a6a80);
  white-space: nowrap;
}

.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  grid-auto-flow: column;
  grid-auto-columns: 13px;
  gap: 2px;
}

.heatmap-cell {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  transition: outline 0.1s;
  cursor: default;
}

.heatmap-cell-empty {
  visibility: hidden;
}

.heatmap-level-0 { background: rgba(255,255,255,0.04); }
.heatmap-level-1 { background: #0e4429; }
.heatmap-level-2 { background: #006d32; }
.heatmap-level-3 { background: #26a641; }
.heatmap-level-4 { background: #39d353; }

.heatmap-cell[data-date]:hover {
  outline: 2px solid var(--color-text-muted, #8896ab);
  outline-offset: -1px;
}

/* ── Heatmap Legend ────────────────────────────────────────────── */
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 0.75rem;
  justify-content: flex-end;
}

.heatmap-legend-label {
  font-size: 0.6875rem;
  color: var(--color-text-dim, #5a6a80);
  padding: 0 4px;
}

.heatmap-legend-box {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  cursor: default;
}

/* ── Heatmap Stats ─────────────────────────────────────────────── */
.heatmap-stats {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.heatmap-stat-card {
  flex: 1;
  min-width: 120px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  text-align: center;
}

.heatmap-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  line-height: 1.2;
}

.heatmap-stat-unit {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted, #8896ab);
}

.heatmap-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted, #8896ab);
  margin-top: 0.25rem;
}

/* ── Heatmap Tooltip ───────────────────────────────────────────── */
.heatmap-tooltip {
  position: absolute;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 0.75rem;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.12s;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.heatmap-tooltip.visible {
  opacity: 1;
}

/* ── Quarter View ──────────────────────────────────────────────── */
.heatmap-quarter-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.heatmap-quarter-btn {
  background: transparent;
  color: var(--color-text-muted, #8896ab);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.heatmap-quarter-btn.active {
  background: var(--color-primary, #3b82f6);
  color: #fff;
  border-color: var(--color-primary, #3b82f6);
}

.heatmap-quarter-grid {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.heatmap-quarter-month-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted, #8896ab);
  margin-bottom: 0.5rem;
}

.heatmap-quarter-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.heatmap-quarter-cell {
  width: 18px;
  height: 18px;
  border-radius: 3px;
}

/* ── Light Theme Overrides ─────────────────────────────────────── */
[data-theme="light"] .heatmap-section {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .heatmap-level-0 { background: #ebedf0; }
[data-theme="light"] .heatmap-level-1 { background: #9be9a8; }
[data-theme="light"] .heatmap-level-2 { background: #40c463; }
[data-theme="light"] .heatmap-level-3 { background: #30a14e; }
[data-theme="light"] .heatmap-level-4 { background: #216e39; }

[data-theme="light"] .heatmap-stat-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .heatmap-tooltip {
  background: #1e293b;
  color: #f1f5f9;
}

[data-theme="light"] .heatmap-year-select {
  background: #fff;
  color: #1e293b;
  border-color: #cbd5e1;
}

/* ── Heatmap Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .heatmap-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .heatmap-grid {
    grid-auto-columns: 11px;
    grid-template-rows: repeat(7, 11px);
    gap: 1px;
  }

  .heatmap-cell {
    width: 11px;
    height: 11px;
  }

  .heatmap-month-labels {
    grid-auto-columns: 13px;
  }

  .heatmap-stats {
    gap: 0.5rem;
  }

  .heatmap-stat-card {
    min-width: 90px;
    padding: 0.5rem 0.75rem;
  }

  .heatmap-stat-value {
    font-size: 1.125rem;
  }

  .heatmap-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .heatmap-quarter-grid {
    flex-direction: column;
  }

  .heatmap-quarter-cell {
    width: 15px;
    height: 15px;
  }
}

/* ── Session Logger ─────────────────────────────────────────────────────── */
.sl-section {
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.sl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.sl-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
}

.sl-header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sl-active-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  animation: sl-pulse 1.4s ease-in-out infinite;
}

@keyframes sl-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

.sl-elapsed {
  font-size: 0.875rem;
  font-weight: 600;
  color: #10b981;
  font-variant-numeric: tabular-nums;
}

.sl-start-btn,
.sl-end-btn {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.sl-start-btn {
  background: #10b981;
  color: #fff;
}

.sl-start-btn:hover {
  background: #059669;
  transform: translateY(-1px);
}

.sl-end-btn {
  background: #ef4444;
  color: #fff;
}

.sl-end-btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.sl-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.sl-summary-card {
  flex: 1 1 120px;
  min-width: 120px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  text-align: center;
}

.sl-summary-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary, #3b82f6);
  margin-bottom: 0.2rem;
}

.sl-summary-label {
  font-size: 0.6875rem;
  color: var(--color-text-muted, #8896ab);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sl-table-wrap {
  overflow-x: auto;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--color-border, #2a3a52);
}

.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.sl-table th,
.sl-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  white-space: nowrap;
  color: var(--color-text, #e2e8f0);
}

.sl-table thead th {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--color-border, #2a3a52);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #8896ab);
}

.sl-th-sort {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.sl-th-sort:hover {
  color: var(--color-primary, #3b82f6);
}

.sl-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
}

.sl-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.sl-rating {
  display: inline-flex;
  gap: 1px;
}

.sl-star {
  color: var(--color-text-dim, #5a6a80);
  font-size: 0.875rem;
}

.sl-star-filled {
  color: #f59e0b;
}

.sl-pagination {
  display: flex;
  gap: 0.375rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.sl-page-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sl-page-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text, #e2e8f0);
}

.sl-page-btn.active {
  background: var(--color-primary, #3b82f6);
  color: #fff;
  border-color: var(--color-primary, #3b82f6);
}

.sl-export-btn {
  padding: 0.4rem 1rem;
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.sl-export-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text, #e2e8f0);
}

.sl-weekly-chart {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Session Logger — Light theme ───────────────────────────────────────── */
[data-theme="light"] .sl-section {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .sl-summary-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .sl-table thead th {
  background: #f1f5f9;
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .sl-table tbody tr {
  border-bottom-color: #f1f5f9;
}

[data-theme="light"] .sl-table tbody tr:hover {
  background: #f8fafc;
}

[data-theme="light"] .sl-table-wrap {
  border-color: #e2e8f0;
}

[data-theme="light"] .sl-page-btn {
  border-color: #e2e8f0;
}

[data-theme="light"] .sl-export-btn {
  border-color: #e2e8f0;
}

/* ── Session Logger — Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .sl-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .sl-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sl-summary-row {
    flex-direction: column;
  }

  .sl-summary-card {
    flex: 1 1 100%;
  }
}

/* ── Writing Streaks ───────────────────────────────────────────────────── */
.ws-section {
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 12px;
  margin-top: 1.5rem;
  overflow: hidden;
}

.ws-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
.ws-header:hover {
  background: rgba(255, 255, 255, 0.03);
}
.ws-header-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
}
.ws-toggle-btn {
  background: none;
  border: none;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
.ws-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ws-body {
  padding: 0 1.5rem 1.5rem;
}

/* Current streak — large centered display */
.ws-current {
  text-align: center;
  padding: 1.5rem 0 1rem;
  position: relative;
}
.ws-streak-num {
  font-size: 4.5rem;
  font-weight: 800;
  color: #f97316;
  line-height: 1;
  display: inline-block;
}
.ws-streak-fire {
  font-size: 2.5rem;
  display: inline-block;
  vertical-align: top;
  margin-left: 4px;
  animation: ws-pulse 1.5s ease-in-out infinite;
}
.ws-streak-label {
  font-size: 1.1rem;
  color: var(--color-text-muted, #8896ab);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.ws-motivation {
  font-style: italic;
  color: #f59e0b;
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

/* Stats row — horizontal stat cards */
.ws-stats-row {
  display: flex;
  gap: 0.65rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}
.ws-stat {
  flex: 1;
  min-width: 90px;
  text-align: center;
  padding: 0.7rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid var(--color-border, #2a3a52);
}
.ws-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  white-space: nowrap;
}
.ws-stat-label {
  font-size: 0.7rem;
  color: var(--color-text-dim, #5a6a80);
  margin-top: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Mini calendar — 30 day grid */
.ws-mini-cal-label {
  font-size: 0.8rem;
  color: var(--color-text-muted, #8896ab);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.ws-mini-cal {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.ws-cal-day {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  transition: transform 0.15s;
}
.ws-cal-day:hover {
  transform: scale(1.4);
}
.ws-cal-day.ws-active {
  background: #22c55e;
}
.ws-cal-day.ws-today {
  box-shadow: 0 0 0 2px var(--color-bg-card, #1a2233), 0 0 0 3.5px #f97316;
}

/* Milestone badges */
.ws-milestones {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.ws-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.6rem;
  border-radius: 10px;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  min-width: 80px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ws-badge:hover {
  transform: translateY(-2px);
}
.ws-badge.ws-locked {
  opacity: 0.3;
  filter: grayscale(0.85);
}
.ws-badge-emoji {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}
.ws-badge-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  text-align: center;
}
.ws-badge-days {
  font-size: 0.65rem;
  color: var(--color-text-dim, #5a6a80);
  margin-top: 0.1rem;
}

/* Progress bar to next milestone */
.ws-progress-next {
  margin-top: 0.5rem;
}
.ws-progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--color-border, #2a3a52);
  border-radius: 4px;
  overflow: hidden;
}
.ws-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f97316, #f59e0b);
  border-radius: 4px;
  transition: width 0.6s ease;
}
.ws-progress-text {
  font-size: 0.8rem;
  color: var(--color-text-muted, #8896ab);
  margin-top: 0.35rem;
}

/* Pulse animation for fire emoji */
@keyframes ws-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ── Writing Streaks — Light Theme ─────────────────────────────────────── */
[data-theme="light"] .ws-section {
  background: #ffffff;
  border-color: #e2e8f0;
}
[data-theme="light"] .ws-header:hover {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .ws-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .ws-stat {
  background: rgba(0, 0, 0, 0.02);
  border-color: #e2e8f0;
}
[data-theme="light"] .ws-cal-day {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .ws-cal-day.ws-today {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #f97316;
}
[data-theme="light"] .ws-badge {
  background: rgba(0, 0, 0, 0.02);
}

/* ── Writing Streaks — Responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
  .ws-header { padding: 0.75rem 1rem; }
  .ws-body { padding: 0 1rem 1rem; }
  .ws-streak-num { font-size: 3rem; }
  .ws-streak-fire { font-size: 1.75rem; }
  .ws-stats-row { gap: 0.5rem; }
  .ws-stat { min-width: 70px; padding: 0.5rem 0.35rem; }
  .ws-stat-value { font-size: 1.1rem; }
  .ws-milestones { gap: 0.5rem; }
  .ws-badge { min-width: 65px; padding: 0.5rem 0.4rem; }
  .ws-badge-emoji { font-size: 1.4rem; }
}

/* ── Analytics Export Dashboard ─────────────────────────────────────── */
.aed-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-primary, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.aed-trigger-btn:hover {
  background: var(--color-primary-hover, #2563eb);
  transform: translateY(-1px);
}

.aed-container { display: flex; flex-direction: column; gap: 1.25rem; }

.aed-section-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #8896ab);
}

.aed-format-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.aed-format-card {
  padding: 1rem;
  background: var(--color-bg-card, #1a2233);
  border: 2px solid var(--color-border, #2a3a52);
  border-radius: 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.aed-format-card:hover { border-color: var(--color-primary, #3b82f6); }

.aed-format-active {
  border-color: var(--color-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
}

.aed-format-icon { font-size: 1.5rem; margin-bottom: 0.375rem; }
.aed-format-name { font-weight: 600; font-size: 0.875rem; color: var(--color-text, #e2e8f0); }
.aed-format-desc { font-size: 0.75rem; color: var(--color-text-muted, #8896ab); margin-top: 0.25rem; }

.aed-date-range { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.aed-range-btn {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.2s;
}

.aed-range-btn:hover { border-color: var(--color-primary, #3b82f6); color: var(--color-text, #e2e8f0); }

.aed-range-active {
  background: var(--color-primary, #3b82f6);
  color: #fff;
  border-color: var(--color-primary, #3b82f6);
}

.aed-custom-dates {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.aed-date-input {
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 0.375rem;
  background: var(--color-bg-card, #1a2233);
  color: var(--color-text, #e2e8f0);
  font-size: 0.8125rem;
}

.aed-date-sep { color: var(--color-text-muted, #8896ab); font-size: 0.8125rem; }

.aed-widget-actions { display: flex; gap: 0.5rem; }

.aed-select-all {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.75rem;
  cursor: pointer;
}

.aed-select-all:hover { border-color: var(--color-primary, #3b82f6); color: var(--color-text, #e2e8f0); }

.aed-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.aed-widget-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.2s;
}

.aed-widget-item:hover { border-color: var(--color-primary, #3b82f6); }
.aed-widget-icon { font-size: 1rem; }
.aed-widget-name { font-size: 0.8125rem; color: var(--color-text, #e2e8f0); }

.aed-options { display: flex; flex-wrap: wrap; gap: 1rem; }

.aed-option {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text, #e2e8f0);
  cursor: pointer;
}

.aed-preview { margin-top: 0.25rem; }

.aed-preview-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.aed-preview-card {
  text-align: center;
  padding: 0.75rem 0.5rem;
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 0.5rem;
}

.aed-preview-value { font-size: 1.25rem; font-weight: 700; color: var(--color-primary, #3b82f6); }
.aed-preview-label { font-size: 0.6875rem; color: var(--color-text-muted, #8896ab); margin-top: 0.125rem; }

.aed-progress { text-align: center; }

.aed-progress-bar {
  height: 6px;
  background: var(--color-border, #2a3a52);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.375rem;
}

.aed-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-primary, #3b82f6);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.aed-progress-label { font-size: 0.75rem; color: var(--color-text-muted, #8896ab); }

.aed-export-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--color-primary, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.aed-export-btn:hover { background: var(--color-primary-hover, #2563eb); }

/* ── Export Dashboard — Light theme ────────────────────────────────── */
[data-theme="light"] .aed-format-card { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .aed-format-active { background: rgba(59, 130, 246, 0.06); border-color: #3b82f6; }
[data-theme="light"] .aed-widget-item { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .aed-preview-card { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .aed-date-input { background: #fff; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .aed-progress-bar { background: #e2e8f0; }

/* ── Export Dashboard — Responsive ─────────────────────────────────── */
@media (max-width: 768px) {
  .aed-format-cards { grid-template-columns: 1fr; }
  .aed-widget-grid { grid-template-columns: 1fr; }
  .aed-preview-cards { grid-template-columns: repeat(2, 1fr); }
  .aed-date-range { flex-direction: column; }
  .aed-range-btn { width: 100%; text-align: center; }
}

/* ── Focus Timer (Pomodoro) ─────────────────────────────────────────── */
.ft-section {
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 1rem;
  padding: 2rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.ft-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  margin: 0 0 0.25rem;
}

.ft-timer-ring {
  position: relative;
  width: 200px;
  height: 200px;
}

.ft-timer-svg { display: block; }

.ft-ring-bg {
  fill: none;
  stroke: var(--color-border, #2a3a52);
  stroke-width: 8;
}

.ft-ring-progress {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
}

.ft-timer-text {
  font-size: 2.25rem;
  font-weight: 700;
  fill: var(--color-text, #e2e8f0);
  font-family: 'Inter', monospace, sans-serif;
}

.ft-pulse .ft-ring-progress {
  animation: ftPulse 2s ease-in-out infinite;
}

@keyframes ftPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Mode pills */
.ft-mode-pills {
  display: flex;
  gap: 0.5rem;
}

.ft-mode-pill {
  padding: 0.375rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-border, #2a3a52);
  background: transparent;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.ft-mode-pill:hover { border-color: var(--color-text-muted, #8896ab); }

.ft-mode-active.ft-pill-focus  { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #ef4444; }
.ft-mode-active.ft-pill-short  { background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #10b981; }
.ft-mode-active.ft-pill-long   { background: rgba(59, 130, 246, 0.15); border-color: #3b82f6; color: #3b82f6; }

/* Controls */
.ft-controls {
  display: flex;
  gap: 0.625rem;
}

.ft-ctrl-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border, #2a3a52);
  background: transparent;
  color: var(--color-text, #e2e8f0);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ft-ctrl-btn:hover { background: rgba(255,255,255,0.05); }

.ft-ctrl-primary {
  background: var(--color-primary, #3b82f6);
  border-color: var(--color-primary, #3b82f6);
  color: #fff;
}

.ft-ctrl-primary:hover { background: var(--color-primary-hover, #2563eb); }

/* Session dots */
.ft-session-dots {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
}

.ft-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-border, #2a3a52);
  background: transparent;
  transition: background 0.3s, border-color 0.3s;
}

.ft-dot-filled {
  background: var(--color-primary, #3b82f6);
  border-color: var(--color-primary, #3b82f6);
}

/* Settings */
.ft-settings {
  width: 100%;
  max-width: 360px;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.8125rem;
}

.ft-settings summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-text, #e2e8f0);
}

.ft-setting-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.ft-setting-row label { flex: 0 0 90px; }

.ft-setting-row input[type="range"] {
  flex: 1;
  accent-color: var(--color-primary, #3b82f6);
}

.ft-setting-row span {
  flex: 0 0 28px;
  text-align: right;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
}

/* Daily stats */
.ft-daily-stats {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 420px;
}

.ft-stat-card {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 0.75rem;
  padding: 0.75rem;
  text-align: center;
}

.ft-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
}

.ft-stat-label {
  font-size: 0.6875rem;
  color: var(--color-text-muted, #8896ab);
  margin-top: 0.125rem;
}

/* History chart */
.ft-history-chart {
  width: 100%;
  max-width: 420px;
}

.ft-history-chart h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted, #8896ab);
  margin: 0 0 0.5rem;
}

.ft-history-bar {
  fill: var(--color-primary, #3b82f6);
  opacity: 0.8;
}

.ft-history-bar:hover { opacity: 1; }

.ft-history-label {
  font-size: 9px;
  fill: var(--color-text-dim, #5a6a80);
}

/* ── Focus Timer — Light theme ─────────────────────────────────────── */
[data-theme="light"] .ft-section { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .ft-ring-bg { stroke: #e2e8f0; }
[data-theme="light"] .ft-timer-text { fill: #1e293b; }
[data-theme="light"] .ft-mode-pill { border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .ft-ctrl-btn { border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .ft-ctrl-btn:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .ft-dot { border-color: #cbd5e1; }
[data-theme="light"] .ft-stat-card { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .ft-history-label { fill: #94a3b8; }

/* ── Focus Timer — Header ──────────────────────────────────────────── */
.ft-header {
  width: 100%;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* ── Focus Timer — Timer Wrap ─────────────────────────────────────── */
.ft-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* ── Focus Timer — Ring (140×140) ─────────────────────────────────── */
.ft-ring {
  width: 140px;
  height: 140px;
}

/* ── Focus Timer — Time Display ───────────────────────────────────── */
.ft-time-display {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-text, #e2e8f0);
  font-family: 'Inter', monospace, sans-serif;
  letter-spacing: 0.04em;
  margin-top: -0.25rem;
}

/* ── Focus Timer — Mode Label ─────────────────────────────────────── */
.ft-mode-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted, #8896ab);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Focus Timer — Button Variants ────────────────────────────────── */
.ft-btn-start {
  background: var(--color-primary, #3b82f6);
  border-color: var(--color-primary, #3b82f6);
  color: #fff;
}
.ft-btn-start:hover { background: var(--color-primary-hover, #2563eb); }

.ft-btn-pause {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}
.ft-btn-pause:hover { background: #d97706; }

.ft-btn-reset {
  background: transparent;
  border-color: var(--color-border, #2a3a52);
  color: var(--color-text-muted, #8896ab);
}
.ft-btn-reset:hover { border-color: var(--color-text-muted, #8896ab); }

/* ── Focus Timer — Presets ────────────────────────────────────────── */
.ft-presets {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.ft-preset-btn {
  padding: 0.3125rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border, #2a3a52);
  background: transparent;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.ft-preset-btn:hover {
  border-color: var(--color-text-muted, #8896ab);
  color: var(--color-text, #e2e8f0);
}

.ft-preset-btn.ft-preset-active {
  background: rgba(139, 92, 246, 0.15);
  border-color: #8b5cf6;
  color: #8b5cf6;
}

/* ── Focus Timer — Stats Row ──────────────────────────────────────── */
.ft-stats {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  max-width: 480px;
  justify-content: center;
}

.ft-stat {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 0.75rem;
  padding: 0.625rem 0.5rem;
  text-align: center;
  min-width: 80px;
}

/* ── Focus Timer — Session Log ────────────────────────────────────── */
.ft-log {
  width: 100%;
  max-width: 420px;
}

.ft-log h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted, #8896ab);
  margin: 0 0 0.5rem;
}

.ft-log-empty {
  font-size: 0.8125rem;
  color: var(--color-text-dim, #5a6a80);
  text-align: center;
  padding: 1rem 0;
}

.ft-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ft-log-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.8125rem;
}

.ft-log-item:last-child { border-bottom: none; }

.ft-log-type {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 60px;
  text-align: center;
}

.ft-log-focus {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.ft-log-break {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.ft-log-long {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.ft-log-duration {
  color: var(--color-text, #e2e8f0);
  font-weight: 600;
  flex: 1;
}

.ft-log-time {
  color: var(--color-text-dim, #5a6a80);
  font-size: 0.75rem;
}

/* ── Focus Timer — Pulse animation ────────────────────────────────── */
@keyframes ft-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

/* ── Focus Timer — Light Theme overrides ──────────────────────────── */
[data-theme="light"] .ft-header h3 { color: #1e293b; }
[data-theme="light"] .ft-time-display { color: #1e293b; }
[data-theme="light"] .ft-mode-label { color: #64748b; }
[data-theme="light"] .ft-preset-btn { border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .ft-preset-btn:hover { border-color: #94a3b8; color: #1e293b; }
[data-theme="light"] .ft-preset-btn.ft-preset-active { background: rgba(139, 92, 246, 0.1); border-color: #8b5cf6; color: #7c3aed; }
[data-theme="light"] .ft-stat { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .ft-log-item { border-bottom-color: #f1f5f9; }
[data-theme="light"] .ft-log-duration { color: #1e293b; }
[data-theme="light"] .ft-log-time { color: #94a3b8; }
[data-theme="light"] .ft-log-empty { color: #94a3b8; }
[data-theme="light"] .ft-btn-reset { border-color: #e2e8f0; color: #64748b; }

/* ── Focus Timer — Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .ft-timer-ring { width: 160px; height: 160px; }
  .ft-timer-svg { width: 160px; height: 160px; }
  .ft-mode-pills { flex-wrap: wrap; justify-content: center; }
  .ft-daily-stats { flex-direction: column; }
  .ft-controls { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 640px) {
  .ft-section { padding: 1.25rem; }
  .ft-time-display { font-size: 2rem; }
  .ft-presets { gap: 0.375rem; }
  .ft-preset-btn { padding: 0.25rem 0.625rem; font-size: 0.6875rem; }
  .ft-stats { flex-wrap: wrap; gap: 0.5rem; }
  .ft-stat { min-width: 70px; padding: 0.5rem 0.375rem; }
  .ft-stat-value { font-size: 1.125rem; }
  .ft-log-item { gap: 0.5rem; font-size: 0.75rem; }
  .ft-log-type { min-width: 50px; font-size: 0.625rem; }
  .ft-timer-wrap { gap: 0.25rem; }
  .ft-ring { width: 120px; height: 120px; }
}

/* ── Analytics Comparison Period ──────────────────────────────────── */
.cp-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--color-primary, #6366f1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  margin-left: 12px;
}
.cp-trigger-btn:hover {
  background: #4f46e5;
  box-shadow: 0 2px 8px rgba(99,102,241,0.35);
}

.cp-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

.cp-content {
  background: #1e1e2e;
  color: #e2e8f0;
  border-radius: 14px;
  width: 640px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  padding: 0;
}

.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #2d2d44;
}
.cp-header h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #e2e8f0;
}
.cp-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
.cp-close-btn:hover { color: #e2e8f0; }

.cp-body { padding: 20px 24px 24px; }

.cp-period-picker {
  background: #262640;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.cp-period-picker h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #c4b5fd;
}

.cp-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.cp-preset-btn {
  padding: 5px 12px;
  font-size: 0.8rem;
  border: 1px solid #3b3b5c;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s;
}
.cp-preset-btn:hover { border-color: var(--color-primary, #6366f1); color: #e2e8f0; }
.cp-preset-active {
  background: var(--color-primary, #6366f1);
  color: #fff;
  border-color: var(--color-primary, #6366f1);
}

.cp-date-row {
  display: flex;
  gap: 12px;
}
.cp-date-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: #94a3b8;
  flex: 1;
}
.cp-date-row input[type="date"] {
  padding: 6px 10px;
  border: 1px solid #3b3b5c;
  border-radius: 6px;
  background: #1e1e2e;
  color: #e2e8f0;
  font-size: 0.85rem;
}

.cp-run-btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: var(--color-primary, #6366f1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.cp-run-btn:hover { background: #4f46e5; }

.cp-results { margin-top: 20px; }
.cp-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cp-compare-card {
  background: #262640;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.cp-compare-card h5 {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
}
.cp-card-values {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 8px;
}
.cp-val-col { display: flex; flex-direction: column; align-items: center; }
.cp-val-label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; }
.cp-val-num { font-size: 1.35rem; font-weight: 700; color: #e2e8f0; }

.cp-delta { font-size: 0.8rem; color: #94a3b8; margin-bottom: 6px; }
.cp-delta-up { font-size: 0.8rem; color: #22c55e; font-weight: 600; margin-bottom: 6px; }
.cp-delta-down { font-size: 0.8rem; color: #ef4444; font-weight: 600; margin-bottom: 6px; }

.cp-mini-chart { display: flex; justify-content: center; margin-top: 4px; }
.cp-error { color: #ef4444; text-align: center; font-size: 0.85rem; }

/* ── Comparison Period — Light Theme ─────────────────────────────── */
[data-theme="light"] .cp-content { background: #ffffff; color: #1e293b; }
[data-theme="light"] .cp-header { border-bottom-color: #e2e8f0; }
[data-theme="light"] .cp-header h3 { color: #1e293b; }
[data-theme="light"] .cp-close-btn { color: #64748b; }
[data-theme="light"] .cp-close-btn:hover { color: #1e293b; }
[data-theme="light"] .cp-period-picker { background: #f8fafc; }
[data-theme="light"] .cp-period-picker h4 { color: #6366f1; }
[data-theme="light"] .cp-preset-btn { border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .cp-preset-btn:hover { color: #1e293b; }
[data-theme="light"] .cp-date-row input[type="date"] { background: #fff; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .cp-compare-card { background: #f8fafc; }
[data-theme="light"] .cp-compare-card h5 { color: #64748b; }
[data-theme="light"] .cp-val-num { color: #1e293b; }

/* ── Comparison Period — Responsive ──────────────────────────────── */
@media (max-width: 640px) {
  .cp-content { width: 100%; border-radius: 10px; }
  .cp-results-grid { grid-template-columns: 1fr; }
  .cp-date-row { flex-direction: column; }
  .cp-trigger-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
}

/* ── Goal Setting ──────────────────────────────────────────── */
.gs-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 8px;
  background: rgba(99,102,241,0.1);
  color: var(--color-primary, #6366f1);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  margin-left: 12px;
}
.gs-trigger-btn:hover {
  background: rgba(99,102,241,0.2);
  border-color: var(--color-primary, #6366f1);
}

/* Dashboard */
.gs-dashboard {
  margin: 16px 0;
}
.gs-dashboard-title {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0 0 12px 0;
}
.gs-goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.gs-goal-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(30,41,59,0.7);
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 12px;
  padding: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gs-goal-card:hover {
  border-color: rgba(99,102,241,0.4);
  box-shadow: 0 2px 12px rgba(99,102,241,0.08);
}
.gs-goal-card.gs-goal-complete {
  border-color: rgba(34,197,94,0.4);
  box-shadow: 0 2px 12px rgba(34,197,94,0.1);
}
.gs-progress-ring {
  flex-shrink: 0;
}
.gs-ring-svg {
  display: block;
}
.gs-goal-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gs-goal-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-goal-value {
  font-size: 0.75rem;
  color: #94a3b8;
}
.gs-goal-pct {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 500;
}
.gs-goal-complete .gs-goal-label { color: #22c55e; }
.gs-goal-complete .gs-goal-pct { color: #22c55e; }

/* Config Panel Overlay */
.gs-config-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.gs-config-panel {
  background: #1e293b;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 14px;
  padding: 24px 28px;
  width: 420px;
  max-width: 94vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.gs-config-panel h3 {
  margin: 0 0 18px 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #e2e8f0;
}

/* Config Rows */
.gs-config-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.1);
}
.gs-config-row:last-of-type { border-bottom: none; }
.gs-config-label {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: #cbd5e1;
}
.gs-config-unit {
  font-size: 0.75rem;
  color: #64748b;
  min-width: 70px;
}

/* Toggle */
.gs-toggle {
  padding: 4px 12px;
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  min-width: 44px;
}
.gs-toggle-active {
  background: var(--color-primary, #6366f1);
  border-color: var(--color-primary, #6366f1);
  color: #fff;
}

/* Target Input */
.gs-target-input {
  width: 72px;
  padding: 5px 8px;
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 6px;
  background: rgba(15,23,42,0.6);
  color: #e2e8f0;
  font-size: 0.85rem;
  text-align: right;
}
.gs-target-input:focus {
  outline: none;
  border-color: var(--color-primary, #6366f1);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}

/* Config Actions */
.gs-config-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.gs-save-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary, #6366f1);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.gs-save-btn:hover { opacity: 0.85; }
.gs-cancel-btn {
  padding: 8px 20px;
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.15s;
}
.gs-cancel-btn:hover { color: #e2e8f0; }

/* Streak Display */
.gs-streak-display {
  margin: 16px 0;
}
.gs-streak-display h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0 0 10px 0;
}
.gs-streak-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gs-streak-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(30,41,59,0.7);
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 130px;
}
.gs-streak-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
}
.gs-streak-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: #f97316;
}
.gs-streak-best {
  font-size: 0.7rem;
  color: #64748b;
}

/* Completion Toast */
.gs-completion-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-popover);
  padding: 14px 22px;
  background: #1e293b;
  border: 1px solid rgba(34,197,94,0.4);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 0.9rem;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s, transform 0.35s;
  pointer-events: none;
}
.gs-completion-toast.gs-toast-visible {
  opacity: 1;
  transform: translateY(0);
}
.gs-toast-icon {
  margin-right: 6px;
  font-size: 1.1rem;
}

/* ── Goal Setting — Light Theme ────────────────────────────── */
[data-theme="light"] .gs-trigger-btn {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.3);
}
[data-theme="light"] .gs-dashboard-title { color: #1e293b; }
[data-theme="light"] .gs-goal-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}
[data-theme="light"] .gs-goal-label { color: #334155; }
[data-theme="light"] .gs-goal-value { color: #64748b; }
[data-theme="light"] .gs-config-panel {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .gs-config-panel h3 { color: #1e293b; }
[data-theme="light"] .gs-config-label { color: #334155; }
[data-theme="light"] .gs-target-input {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}
[data-theme="light"] .gs-streak-display h4 { color: #1e293b; }
[data-theme="light"] .gs-streak-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}
[data-theme="light"] .gs-streak-label { color: #64748b; }
[data-theme="light"] .gs-completion-toast {
  background: #fff;
  border-color: rgba(34,197,94,0.35);
  color: #1e293b;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}
[data-theme="light"] .gs-cancel-btn { color: #64748b; }

/* ── Goal Setting — Responsive ─────────────────────────────── */
@media (max-width: 640px) {
  .gs-goal-grid { grid-template-columns: 1fr; }
  .gs-config-panel { padding: 18px; width: 100%; border-radius: 10px; }
  .gs-trigger-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
  .gs-streak-grid { flex-direction: column; }
  .gs-completion-toast { left: 12px; right: 12px; bottom: 12px; }
}

/* ── Word Frequency ──────────────────────────────────────── */
.wf-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary, #6366f1);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
  transition: background 0.2s, box-shadow 0.2s;
}
.wf-trigger-btn:hover {
  background: #4f46e5;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}

.wf-panel {
  position: fixed;
  top: 0;
  right: -480px;
  width: 460px;
  height: 100vh;
  background: #1e1e2e;
  color: #e2e8f0;
  box-shadow: -4px 0 24px rgba(0,0,0,0.4);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  overflow-y: auto;
}
.wf-panel-open { right: 0; }

.wf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #334155;
  font-size: 16px;
  font-weight: 700;
}
.wf-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.wf-close-btn:hover { color: #e2e8f0; }

.wf-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #334155;
}
.wf-tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.wf-tab:hover { color: #e2e8f0; }
.wf-tab-active {
  color: var(--color-primary, #6366f1);
  border-bottom-color: var(--color-primary, #6366f1);
}

.wf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid #334155;
  align-items: center;
}
.wf-filters label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #94a3b8;
}
.wf-filter-input {
  padding: 4px 8px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12px;
}
.wf-filter-input:focus {
  outline: none;
  border-color: var(--color-primary, #6366f1);
}
.wf-filter-select {
  padding: 4px 8px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12px;
}

.wf-cloud-canvas {
  display: block;
  width: 100%;
  height: 400px;
  background: #0f172a;
  border-radius: 8px;
  margin: 12px 0;
}

.wf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.wf-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid #334155;
  color: #94a3b8;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wf-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #1e293b;
}
.wf-table tbody tr:hover { background: rgba(99,102,241,0.06); }
.wf-table-sortable {
  cursor: pointer;
  user-select: none;
}
.wf-table-sortable:hover { color: #e2e8f0; }
.wf-sort-icon { font-size: 9px; opacity: 0.5; margin-left: 2px; }

.wf-stop-words {
  padding: 12px 20px;
  border-top: 1px solid #334155;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.wf-stop-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #334155;
  color: #cbd5e1;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
}
.wf-stop-remove {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.wf-stop-remove:hover { color: #ef4444; }

.wf-export-row {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #334155;
}
.wf-export-row button {
  flex: 1;
  padding: 8px 0;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.wf-export-row button:hover {
  background: #1e293b;
  border-color: var(--color-primary, #6366f1);
}

/* ── Word Frequency — Light theme ─────────────────────────── */
[data-theme="light"] .wf-panel { background: #fff; color: #1e293b; box-shadow: -4px 0 24px rgba(0,0,0,0.1); }
[data-theme="light"] .wf-header { border-bottom-color: #e2e8f0; }
[data-theme="light"] .wf-close-btn { color: #64748b; }
[data-theme="light"] .wf-tabs { border-bottom-color: #e2e8f0; }
[data-theme="light"] .wf-tab { color: #64748b; }
[data-theme="light"] .wf-tab:hover { color: #1e293b; }
[data-theme="light"] .wf-filters { border-bottom-color: #e2e8f0; }
[data-theme="light"] .wf-filters label { color: #64748b; }
[data-theme="light"] .wf-filter-input,
[data-theme="light"] .wf-filter-select { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .wf-cloud-canvas { background: #f8fafc; }
[data-theme="light"] .wf-table th { border-bottom-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .wf-table td { border-bottom-color: #f1f5f9; }
[data-theme="light"] .wf-table tbody tr:hover { background: rgba(99,102,241,0.04); }
[data-theme="light"] .wf-stop-words { border-top-color: #e2e8f0; }
[data-theme="light"] .wf-stop-tag { background: #f1f5f9; color: #475569; }
[data-theme="light"] .wf-export-row { border-top-color: #e2e8f0; }
[data-theme="light"] .wf-export-row button { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .wf-export-row button:hover { background: #f1f5f9; }

/* ── Word Frequency — Responsive ──────────────────────────── */
@media (max-width: 640px) {
  .wf-panel { width: 100%; right: -100%; }
  .wf-filters { flex-direction: column; gap: 8px; }
  .wf-cloud-canvas { height: 260px; }
  .wf-trigger-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
}

/* ── Session Replay ─────────────────────────────────────────── */
.sr-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 8px;
  background: rgba(99,102,241,0.10);
  color: #a5b4fc;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  margin-left: 10px;
  transition: background 0.2s, border-color 0.2s;
}
.sr-trigger-btn:hover {
  background: rgba(99,102,241,0.20);
  border-color: rgba(99,102,241,0.55);
}

.sr-panel {
  position: fixed;
  top: 0;
  right: -480px;
  width: 470px;
  height: 100vh;
  background: #0f172a;
  border-left: 1px solid rgba(148,163,184,0.12);
  box-shadow: -4px 0 24px rgba(0,0,0,0.35);
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
.sr-panel-open {
  right: 0;
}

.sr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(148,163,184,0.10);
}
.sr-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #f1f5f9;
}
.sr-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.sr-close-btn:hover { color: #f1f5f9; }

.sr-body {
  padding: 12px 20px 20px;
  flex: 1;
}

.sr-session-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 16px;
  border: 1px solid rgba(148,163,184,0.10);
  border-radius: 8px;
}

.sr-session-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(148,163,184,0.06);
  transition: background 0.15s;
}
.sr-session-item:last-child { border-bottom: none; }
.sr-session-item:hover { background: rgba(99,102,241,0.08); }
.sr-session-item strong { color: #e2e8f0; font-size: 0.85rem; }
.sr-session-item span { color: #64748b; font-size: 0.75rem; }
.sr-session-active {
  background: rgba(99,102,241,0.15);
  border-left: 3px solid #6366f1;
}

.sr-timeline-wrap {
  position: relative;
  margin-bottom: 8px;
  border: 1px solid rgba(148,163,184,0.10);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15,23,42,0.6);
}

.sr-canvas {
  display: block;
  width: 100%;
  height: 200px;
}

.sr-position-marker {
  position: absolute;
  top: 0;
  width: 2px;
  height: calc(100% - 20px);
  background: #f43f5e;
  pointer-events: none;
  display: none;
  transition: left 0.08s linear;
}

.sr-phase-legend {
  display: flex;
  gap: 14px;
  padding: 6px 0 12px;
  flex-wrap: wrap;
}
.sr-phase-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: #94a3b8;
}
.sr-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.sr-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(148,163,184,0.10);
  border-bottom: 1px solid rgba(148,163,184,0.10);
  margin-bottom: 14px;
}

.sr-play-btn, .sr-pause-btn {
  padding: 6px 14px;
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 6px;
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.sr-play-btn:hover, .sr-pause-btn:hover {
  background: rgba(99,102,241,0.28);
}

.sr-speed-group {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.sr-speed-btn {
  padding: 4px 10px;
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 5px;
  background: transparent;
  color: #94a3b8;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sr-speed-btn:hover { background: rgba(148,163,184,0.10); color: #e2e8f0; }
.sr-speed-active {
  background: rgba(99,102,241,0.20);
  border-color: rgba(99,102,241,0.45);
  color: #a5b4fc;
}

.sr-stats {
  margin-bottom: 14px;
}
.sr-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(148,163,184,0.06);
  font-size: 0.82rem;
}
.sr-stat-row span { color: #94a3b8; }
.sr-stat-row strong { color: #e2e8f0; }

.sr-export-btn {
  width: 100%;
  padding: 9px 0;
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 7px;
  background: rgba(148,163,184,0.06);
  color: #94a3b8;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sr-export-btn:hover { background: rgba(148,163,184,0.14); color: #e2e8f0; }

/* ── Session Replay — Light Theme ────────────────────────── */
[data-theme="light"] .sr-trigger-btn { background: rgba(99,102,241,0.06); color: #4f46e5; border-color: rgba(99,102,241,0.25); }
[data-theme="light"] .sr-trigger-btn:hover { background: rgba(99,102,241,0.12); }
[data-theme="light"] .sr-panel { background: #ffffff; border-left-color: #e2e8f0; box-shadow: -4px 0 24px rgba(0,0,0,0.08); }
[data-theme="light"] .sr-header { border-bottom-color: #e2e8f0; }
[data-theme="light"] .sr-header h3 { color: #1e293b; }
[data-theme="light"] .sr-close-btn { color: #64748b; }
[data-theme="light"] .sr-close-btn:hover { color: #1e293b; }
[data-theme="light"] .sr-session-list { border-color: #e2e8f0; }
[data-theme="light"] .sr-session-item { border-bottom-color: #f1f5f9; }
[data-theme="light"] .sr-session-item:hover { background: rgba(99,102,241,0.04); }
[data-theme="light"] .sr-session-item strong { color: #1e293b; }
[data-theme="light"] .sr-session-item span { color: #64748b; }
[data-theme="light"] .sr-session-active { background: rgba(99,102,241,0.08); }
[data-theme="light"] .sr-timeline-wrap { border-color: #e2e8f0; background: #f8fafc; }
[data-theme="light"] .sr-phase-item { color: #64748b; }
[data-theme="light"] .sr-controls { border-color: #e2e8f0; }
[data-theme="light"] .sr-play-btn, [data-theme="light"] .sr-pause-btn { background: rgba(99,102,241,0.06); color: #4f46e5; border-color: rgba(99,102,241,0.25); }
[data-theme="light"] .sr-speed-btn { border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .sr-speed-active { background: rgba(99,102,241,0.08); color: #4f46e5; border-color: rgba(99,102,241,0.3); }
[data-theme="light"] .sr-stat-row span { color: #64748b; }
[data-theme="light"] .sr-stat-row strong { color: #1e293b; }
[data-theme="light"] .sr-stat-row { border-bottom-color: #f1f5f9; }
[data-theme="light"] .sr-export-btn { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .sr-export-btn:hover { background: #f1f5f9; }

/* ── Session Replay — Responsive ────────────────────────── */
@media (max-width: 640px) {
  .sr-panel { width: 100%; right: -100%; }
  .sr-canvas { height: 160px; }
  .sr-trigger-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
  .sr-controls { flex-wrap: wrap; }
  .sr-speed-group { margin-left: 0; margin-top: 6px; }
}

/* ── Writing Patterns ─────────────────────────────────────── */
.wp-trigger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; margin-left: 8px;
  background: rgba(99,102,241,0.12); color: var(--color-primary, #6366f1);
  border: 1px solid rgba(99,102,241,0.25); border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.wp-trigger-btn:hover { background: rgba(99,102,241,0.22); border-color: rgba(99,102,241,0.45); }
.wp-trigger-btn svg { flex-shrink: 0; }

.wp-panel {
  position: fixed; top: 0; right: -420px; width: 410px; height: 100vh;
  background: #0f1117; border-left: 1px solid rgba(255,255,255,0.08);
  z-index: var(--z-sidebar); display: flex; flex-direction: column;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.4);
  overflow-y: auto;
}
.wp-panel-open { right: 0; }

.wp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wp-header h3 { margin: 0; font-size: 15px; font-weight: 600; color: #e2e8f0; }
.wp-close-btn {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.wp-close-btn:hover { color: #fff; }

.wp-tabs {
  display: flex; gap: 2px; padding: 10px 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wp-tab {
  padding: 7px 14px; font-size: 12px; font-weight: 500;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.45); cursor: pointer; transition: color .15s, border-color .15s;
}
.wp-tab:hover { color: rgba(255,255,255,0.7); }
.wp-tab-active { color: var(--color-primary, #6366f1); border-bottom-color: var(--color-primary, #6366f1); }

.wp-chart-wrap { padding: 14px 18px; }
.wp-canvas { width: 100%; height: 220px; display: block; border-radius: 6px; }

.wp-insight-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px 18px;
}
.wp-insight-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.wp-insight-icon { font-size: 20px; }
.wp-insight-text { font-size: 12px; color: rgba(255,255,255,0.5); }
.wp-insight-value { font-size: 18px; font-weight: 700; color: #e2e8f0; }

.wp-filters {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; flex-wrap: wrap;
}
.wp-filter-label { font-size: 11px; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 4px; }
.wp-filter-input {
  padding: 4px 8px; font-size: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; color: #e2e8f0; outline: none;
}
.wp-filter-input:focus { border-color: var(--color-primary, #6366f1); }
.wp-filter-apply {
  padding: 4px 12px; font-size: 12px; font-weight: 500;
  background: var(--color-primary, #6366f1); color: #fff; border: none;
  border-radius: 6px; cursor: pointer;
}
.wp-filter-apply:hover { opacity: 0.85; }

.wp-export-btn {
  margin: 10px 18px 18px; padding: 9px 0; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; color: #e2e8f0; cursor: pointer; text-align: center;
  transition: background .15s;
}
.wp-export-btn:hover { background: rgba(255,255,255,0.1); }

.wp-edit-ratio { padding: 0 18px 8px; }
.wp-edit-ratio-label { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.wp-edit-ratio-bar {
  display: flex; height: 22px; border-radius: 6px; overflow: hidden;
  font-size: 10px; font-weight: 600; color: #fff;
}
.wp-edit-ratio-new { background: var(--color-primary, #6366f1); display: flex; align-items: center; justify-content: center; }
.wp-edit-ratio-rev { background: #22c55e; display: flex; align-items: center; justify-content: center; }
.wp-edit-ratio-detail { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 4px; }

/* ── Writing Patterns — Light Theme ───────────────────────── */
[data-theme="light"] .wp-trigger-btn { background: rgba(99,102,241,0.07); border-color: rgba(99,102,241,0.18); color: #4f46e5; }
[data-theme="light"] .wp-trigger-btn:hover { background: rgba(99,102,241,0.14); }
[data-theme="light"] .wp-panel { background: #ffffff; border-left-color: #e2e8f0; box-shadow: -4px 0 24px rgba(0,0,0,0.08); }
[data-theme="light"] .wp-header { border-bottom-color: #f1f5f9; }
[data-theme="light"] .wp-header h3 { color: #1e293b; }
[data-theme="light"] .wp-close-btn { color: #94a3b8; }
[data-theme="light"] .wp-close-btn:hover { color: #334155; }
[data-theme="light"] .wp-tabs { border-bottom-color: #f1f5f9; }
[data-theme="light"] .wp-tab { color: #94a3b8; }
[data-theme="light"] .wp-tab:hover { color: #475569; }
[data-theme="light"] .wp-tab-active { color: #4f46e5; border-bottom-color: #4f46e5; }
[data-theme="light"] .wp-insight-card { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .wp-insight-text { color: #64748b; }
[data-theme="light"] .wp-insight-value { color: #1e293b; }
[data-theme="light"] .wp-filter-input { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .wp-export-btn { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .wp-export-btn:hover { background: #f1f5f9; }
[data-theme="light"] .wp-edit-ratio-label { color: #64748b; }
[data-theme="light"] .wp-edit-ratio-detail { color: #94a3b8; }
[data-theme="light"] .wp-filter-label { color: #64748b; }

/* ── Writing Patterns — Responsive ────────────────────────── */
@media (max-width: 640px) {
  .wp-panel { width: 100%; right: -100%; }
  .wp-canvas { height: 160px; }
  .wp-trigger-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
  .wp-insight-cards { grid-template-columns: 1fr; }
  .wp-filters { flex-direction: column; align-items: stretch; }
}

/* ── Export Scheduler ────────────────────────────────────────── */
.es-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-primary, #6366f1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
  transition: background 0.2s;
}
.es-trigger-btn:hover { background: #4f46e5; }

.es-panel {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  height: 100vh;
  background: #1e1e2e;
  border-left: 1px solid #2e2e3e;
  z-index: var(--z-overlay);
  overflow-y: auto;
  transition: right 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
}
.es-panel-open { right: 0; }

.es-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.es-header h3 { color: #f1f5f9; margin: 0; font-size: 18px; }
.es-close-btn {
  background: none; border: none; color: #94a3b8; font-size: 22px; cursor: pointer;
}
.es-close-btn:hover { color: #f1f5f9; }

.es-add-btn {
  width: 100%;
  padding: 10px;
  background: var(--color-primary, #6366f1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 0.2s;
}
.es-add-btn:hover { background: #4f46e5; }

.es-form {
  background: #262637;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.es-form-row {
  margin-bottom: 12px;
}
.es-form-row label {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 4px;
}
.es-form-input, .es-form-select {
  width: 100%;
  padding: 8px 10px;
  background: #1e1e2e;
  border: 1px solid #3e3e4e;
  border-radius: 6px;
  color: #f1f5f9;
  font-size: 13px;
  box-sizing: border-box;
}
.es-form-input:focus, .es-form-select:focus {
  outline: none;
  border-color: var(--color-primary, #6366f1);
}

.es-metrics-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.es-metric-check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  font-size: 12px;
  cursor: pointer;
}
.es-metric-check input { accent-color: var(--color-primary, #6366f1); }

.es-save-btn, .es-cancel-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  margin-right: 8px;
}
.es-save-btn { background: var(--color-primary, #6366f1); color: #fff; }
.es-save-btn:hover { background: #4f46e5; }
.es-cancel-btn { background: #3e3e4e; color: #cbd5e1; }
.es-cancel-btn:hover { background: #4e4e5e; }

.es-schedule-list { margin-bottom: 20px; }

.es-schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #262637;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}
.es-schedule-info { display: flex; flex-direction: column; gap: 2px; }
.es-schedule-name { color: #f1f5f9; font-size: 14px; font-weight: 600; }
.es-schedule-freq {
  display: inline-block;
  padding: 2px 8px;
  background: #3e3e4e;
  color: #94a3b8;
  border-radius: 4px;
  font-size: 11px;
  width: fit-content;
}
.es-schedule-next { color: #64748b; font-size: 11px; }

.es-schedule-actions { display: flex; gap: 6px; align-items: center; }

.es-toggle {
  padding: 4px 10px;
  border: 1px solid #3e3e4e;
  border-radius: 4px;
  background: #1e1e2e;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.es-toggle-active {
  background: #22c55e;
  color: #fff;
  border-color: #22c55e;
}

.es-run-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  background: var(--color-primary, #6366f1);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}
.es-run-btn:hover { background: #4f46e5; }

.es-edit-btn {
  padding: 4px 10px;
  border: 1px solid #3e3e4e;
  border-radius: 4px;
  background: none;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
}
.es-edit-btn:hover { color: #f1f5f9; }

.es-del-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  background: none;
  color: #ef4444;
  font-size: 14px;
  cursor: pointer;
}
.es-del-btn:hover { color: #dc2626; }

.es-history h4 { color: #94a3b8; font-size: 13px; margin: 0 0 10px; }

.es-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #2e2e3e;
  font-size: 12px;
  color: #cbd5e1;
}

.es-download-link {
  color: var(--color-primary, #6366f1);
  text-decoration: none;
  font-size: 12px;
}
.es-download-link:hover { text-decoration: underline; }

/* ── Export Scheduler — Light Theme ──────────────────────────── */
[data-theme="light"] .es-panel { background: #ffffff; border-left-color: #e2e8f0; }
[data-theme="light"] .es-header h3 { color: #1e293b; }
[data-theme="light"] .es-close-btn { color: #64748b; }
[data-theme="light"] .es-close-btn:hover { color: #1e293b; }
[data-theme="light"] .es-form { background: #f8fafc; }
[data-theme="light"] .es-form-row label { color: #64748b; }
[data-theme="light"] .es-form-input, [data-theme="light"] .es-form-select {
  background: #fff; border-color: #e2e8f0; color: #1e293b;
}
[data-theme="light"] .es-cancel-btn { background: #e2e8f0; color: #475569; }
[data-theme="light"] .es-schedule-item { background: #f8fafc; }
[data-theme="light"] .es-schedule-name { color: #1e293b; }
[data-theme="light"] .es-schedule-freq { background: #e2e8f0; color: #64748b; }
[data-theme="light"] .es-schedule-next { color: #94a3b8; }
[data-theme="light"] .es-toggle { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .es-edit-btn { border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .es-edit-btn:hover { color: #1e293b; }
[data-theme="light"] .es-history-item { border-bottom-color: #e2e8f0; color: #475569; }

/* ── Export Scheduler — Responsive ──────────────────────────── */
@media (max-width: 640px) {
  .es-panel { width: 100%; right: -100%; }
  .es-trigger-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
  .es-schedule-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .es-schedule-actions { width: 100%; justify-content: flex-start; }
  .es-metrics-checkboxes { grid-template-columns: 1fr; }
}

/* ── Productivity Score — Trigger ──────────────────────────── */
.ps-trigger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; margin-left: 8px;
  background: transparent; color: #e2e8f0;
  border: 1px solid #2a3a52; border-radius: 8px;
  font-size: 0.82rem; cursor: pointer; transition: all 0.2s;
}
.ps-trigger-btn:hover { border-color: #6366f1; color: #6366f1; }

/* ── Productivity Score — Panel ────────────────────────────── */
.ps-panel {
  position: fixed; top: 0; right: -440px; width: 420px; height: 100%;
  background: #0f1724; border-left: 1px solid #2a3a52;
  z-index: var(--z-overlay); overflow-y: auto; transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.4);
}
.ps-panel-open { right: 0; }
.ps-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; border-bottom: 1px solid #2a3a52;
}
.ps-header h3 { margin: 0; font-size: 1.05rem; color: #e2e8f0; }
.ps-close-btn {
  background: none; border: none; color: #8896ab; font-size: 1.4rem;
  cursor: pointer; padding: 2px 6px; line-height: 1;
}
.ps-close-btn:hover { color: #e2e8f0; }
.ps-body { padding: 20px; }

/* ── Gauge ──────────────────────────────────────────────────── */
.ps-gauge-wrap {
  position: relative; display: flex; justify-content: center;
  align-items: center; margin: 0 auto 8px; width: 160px; height: 160px;
}
.ps-gauge-svg { display: block; }
.ps-gauge-arc {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1);
}
.ps-gauge-score {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 2.4rem; font-weight: 700; color: #e2e8f0;
}
.ps-gauge-rating {
  text-align: center; font-size: 0.95rem; font-weight: 600;
  margin-bottom: 20px;
}

/* ── Breakdown ──────────────────────────────────────────────── */
.ps-breakdown { margin-bottom: 20px; }
.ps-breakdown h4 { margin: 0 0 10px; font-size: 0.9rem; color: #8896ab; }
.ps-component {
  background: #1a2233; border: 1px solid #2a3a52; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 8px;
}
.ps-comp-header { display: flex; justify-content: space-between; align-items: center; }
.ps-comp-label { font-size: 0.82rem; color: #c9d1d9; }
.ps-comp-score { font-size: 0.95rem; font-weight: 700; }
.ps-comp-detail { font-size: 0.75rem; color: #5a6a80; margin: 4px 0 8px; }
.ps-comp-bar {
  height: 6px; background: #2a3a52; border-radius: 3px; overflow: hidden;
}
.ps-comp-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

/* ── Trend Chart ────────────────────────────────────────────── */
.ps-trend-wrap { margin-bottom: 20px; }
.ps-trend-wrap h4 { margin: 0 0 10px; font-size: 0.9rem; color: #8896ab; }
.ps-canvas { width: 100%; background: #1a2233; border: 1px solid #2a3a52; border-radius: 8px; }

/* ── Personal Best ──────────────────────────────────────────── */
.ps-best {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.ps-best h4 { margin: 0; font-size: 0.9rem; color: #8896ab; width: 100%; }
.ps-best-score { font-size: 1.6rem; font-weight: 700; color: #22c55e; }
.ps-best-date { font-size: 0.8rem; color: #5a6a80; }

/* ── Tips ────────────────────────────────────────────────────── */
.ps-tips { margin-bottom: 20px; }
.ps-tips h4 { margin: 0 0 10px; font-size: 0.9rem; color: #8896ab; }
.ps-tip-item {
  background: #1a2233; border: 1px solid #2a3a52; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 6px; font-size: 0.82rem; color: #c9d1d9;
}

/* ── Export Button ───────────────────────────────────────────── */
.ps-export-btn {
  width: 100%; padding: 10px; background: #6366f1; color: #fff;
  border: none; border-radius: 8px; font-size: 0.85rem; cursor: pointer;
  transition: background 0.2s;
}
.ps-export-btn:hover { background: #4f46e5; }

/* ── Productivity Score — Light Theme ─────────────────────── */
[data-theme="light"] .ps-trigger-btn { color: #475569; border-color: #e2e8f0; }
[data-theme="light"] .ps-trigger-btn:hover { color: #6366f1; border-color: #6366f1; }
[data-theme="light"] .ps-panel { background: #ffffff; border-left-color: #e2e8f0; box-shadow: -4px 0 24px rgba(0,0,0,0.08); }
[data-theme="light"] .ps-header { border-bottom-color: #e2e8f0; }
[data-theme="light"] .ps-header h3 { color: #1e293b; }
[data-theme="light"] .ps-close-btn { color: #94a3b8; }
[data-theme="light"] .ps-close-btn:hover { color: #1e293b; }
[data-theme="light"] .ps-gauge-score { color: #1e293b; }
[data-theme="light"] .ps-breakdown h4,
[data-theme="light"] .ps-trend-wrap h4,
[data-theme="light"] .ps-best h4,
[data-theme="light"] .ps-tips h4 { color: #64748b; }
[data-theme="light"] .ps-component { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .ps-comp-label { color: #334155; }
[data-theme="light"] .ps-comp-detail { color: #94a3b8; }
[data-theme="light"] .ps-comp-bar { background: #e2e8f0; }
[data-theme="light"] .ps-canvas { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .ps-best-date { color: #94a3b8; }
[data-theme="light"] .ps-tip-item { background: #f8fafc; border-color: #e2e8f0; color: #334155; }

/* ── Productivity Score — Responsive ──────────────────────── */
@media (max-width: 640px) {
  .ps-panel { width: 100%; right: -100%; }
  .ps-trigger-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
  .ps-gauge-wrap { width: 130px; height: 130px; }
  .ps-gauge-score { font-size: 2rem; }
}

/* ── Daily Journal ────────────────────────────────────────── */
.dj-trigger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding: 6px 14px;
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; color: #e2e8f0; font-size: 0.85rem;
  cursor: pointer; transition: all 0.2s ease;
}
.dj-trigger-btn:hover { color: #a78bfa; border-color: #a78bfa; }

.dj-panel {
  position: fixed; top: 0; right: -380px; width: 360px; height: 100vh;
  background: #1a1b2e; border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -4px 0 24px rgba(0,0,0,0.4); z-index: var(--z-popover);
  transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto; display: flex; flex-direction: column;
}
.dj-panel-open { right: 0; }

.dj-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dj-header h3 { margin: 0; font-size: 1rem; color: #f1f5f9; }
.dj-close-btn {
  background: none; border: none; color: #64748b; font-size: 1.5rem;
  cursor: pointer; line-height: 1;
}
.dj-close-btn:hover { color: #f1f5f9; }

.dj-body { padding: 16px 20px; flex: 1; }
.dj-label { display: block; color: #94a3b8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 12px 0 6px; }

.dj-mood-selector { display: flex; gap: 8px; margin-bottom: 12px; }
.dj-mood-btn {
  width: 42px; height: 42px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04); font-size: 1.3rem; cursor: pointer;
  transition: all 0.15s ease; display: flex; align-items: center; justify-content: center;
}
.dj-mood-btn:hover { border-color: #a78bfa; background: rgba(167,139,250,0.1); }
.dj-mood-btn.active { border-color: #a78bfa; background: rgba(167,139,250,0.2); box-shadow: 0 0 12px rgba(167,139,250,0.3); }

.dj-textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: #e2e8f0; font-size: 0.875rem; resize: vertical; min-height: 80px;
  font-family: inherit; transition: border-color 0.2s;
  box-sizing: border-box;
}
.dj-textarea:focus { outline: none; border-color: #a78bfa; }

.dj-wc { font-size: 0.7rem; color: #64748b; margin: 4px 0 8px; text-align: right; }

.dj-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.dj-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 12px; font-size: 0.75rem;
  background: rgba(167,139,250,0.15); color: #c4b5fd;
}
.dj-tag-rm { background: none; border: none; color: #c4b5fd; cursor: pointer; font-size: 0.85rem; padding: 0; line-height: 1; }
.dj-tag-rm:hover { color: #ef4444; }

.dj-tag-input {
  width: 100%; padding: 7px 10px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: #e2e8f0; font-size: 0.8rem; margin-bottom: 12px;
  box-sizing: border-box;
}
.dj-tag-input:focus { outline: none; border-color: #a78bfa; }

.dj-save-btn {
  width: 100%; padding: 10px; border: none; border-radius: 8px;
  background: #7c3aed; color: #fff; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.dj-save-btn:hover { background: #6d28d9; }

.dj-streak {
  text-align: center; padding: 10px; margin-bottom: 10px;
  background: rgba(255,255,255,0.04); border-radius: 10px;
  color: #e2e8f0; font-size: 0.9rem;
}
.dj-streak-fire { font-size: 1.2rem; }

.dj-mood-chart { margin-bottom: 12px; text-align: center; }

.dj-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 16px 0; }

.dj-search {
  width: 100%; padding: 8px 12px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: #e2e8f0; font-size: 0.8rem; margin-bottom: 12px;
  box-sizing: border-box;
}
.dj-search:focus { outline: none; border-color: #a78bfa; }

.dj-entries-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.dj-entry-card {
  padding: 12px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}
.dj-entry-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dj-entry-mood { font-size: 1.2rem; }
.dj-entry-date { font-size: 0.75rem; color: #64748b; flex: 1; }
.dj-entry-del {
  background: none; border: none; color: #64748b; font-size: 1rem;
  cursor: pointer; line-height: 1; padding: 0;
}
.dj-entry-del:hover { color: #ef4444; }
.dj-entry-preview { margin: 0; font-size: 0.8rem; color: #cbd5e1; line-height: 1.4; }
.dj-entry-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dj-entry-tag {
  padding: 2px 8px; border-radius: 10px; font-size: 0.7rem;
  background: rgba(99,102,241,0.15); color: #a5b4fc; cursor: pointer;
}
.dj-entry-tag:hover { background: rgba(99,102,241,0.3); }

.dj-export-btn {
  width: 100%; padding: 8px; margin-top: 12px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; background: transparent; color: #94a3b8;
  font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.dj-export-btn:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }

/* ── Daily Journal — Light Theme ──────────────────────────── */
[data-theme="light"] .dj-trigger-btn { color: #475569; border-color: #e2e8f0; }
[data-theme="light"] .dj-trigger-btn:hover { color: #7c3aed; border-color: #7c3aed; }
[data-theme="light"] .dj-panel { background: #ffffff; border-left-color: #e2e8f0; box-shadow: -4px 0 24px rgba(0,0,0,0.08); }
[data-theme="light"] .dj-header { border-bottom-color: #e2e8f0; }
[data-theme="light"] .dj-header h3 { color: #1e293b; }
[data-theme="light"] .dj-close-btn { color: #94a3b8; }
[data-theme="light"] .dj-close-btn:hover { color: #1e293b; }
[data-theme="light"] .dj-textarea { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .dj-tag-input,
[data-theme="light"] .dj-search { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .dj-streak { background: #f8fafc; color: #1e293b; }
[data-theme="light"] .dj-entry-card { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .dj-entry-preview { color: #334155; }
[data-theme="light"] .dj-mood-btn { border-color: #e2e8f0; background: #f8fafc; }
[data-theme="light"] .dj-divider { background: #e2e8f0; }

/* ── Daily Journal — Responsive ───────────────────────────── */
@media (max-width: 640px) {
  .dj-panel { width: 100%; right: -100%; }
  .dj-trigger-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
  .dj-mood-btn { width: 36px; height: 36px; font-size: 1.1rem; }
}

/* ── Heatmap Calendar ────────────────────────────────────────── */
.hm-trigger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent; color: #94a3b8;
  font-size: 0.8rem; cursor: pointer;
  transition: all 0.2s ease; margin-left: 6px;
}
.hm-trigger-btn:hover { color: #39d353; border-color: #39d353; }
.hm-trigger-btn.hm-active { color: #39d353; border-color: #39d353; background: rgba(57,211,83,0.08); }

.hm-widget {
  background: #0d1117; border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 20px 24px; margin: 16px 0;
  animation: hmFadeIn 0.25s ease;
}
@keyframes hmFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.hm-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.hm-title {
  margin: 0; font-size: 1rem; font-weight: 600; color: #e6edf3;
}

.hm-grid-wrap {
  overflow-x: auto; position: relative; padding-bottom: 8px;
}
.hm-grid-wrap::-webkit-scrollbar { height: 6px; }
.hm-grid-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.hm-svg { display: block; }

.hm-cell {
  stroke: rgba(255,255,255,0.04); stroke-width: 1;
  transition: stroke 0.15s ease, stroke-width 0.15s ease;
  cursor: pointer;
}
.hm-cell:hover {
  stroke: rgba(255,255,255,0.3); stroke-width: 1.5;
}

.hm-month-label {
  fill: #8b949e; font-size: 10px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hm-day-label {
  fill: #8b949e; font-size: 10px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hm-tooltip {
  position: absolute; z-index: 100;
  background: #1b1f23; color: #e6edf3;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; padding: 6px 10px;
  font-size: 0.72rem; white-space: nowrap;
  pointer-events: none; transform: translateX(-50%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.hm-stats {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.hm-stat {
  flex: 1; min-width: 100px; text-align: center;
  background: rgba(255,255,255,0.03); border-radius: 8px;
  padding: 10px 8px;
}
.hm-stat-value {
  font-size: 1.25rem; font-weight: 700; color: #e6edf3;
  line-height: 1.2;
}
.hm-stat-label {
  font-size: 0.7rem; color: #8b949e; margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.03em;
}

.hm-legend {
  display: flex; align-items: center; gap: 4px;
  margin-top: 12px; justify-content: flex-end;
}
.hm-legend-text {
  font-size: 0.7rem; color: #8b949e; margin: 0 4px;
}
.hm-legend-cell {
  width: 12px; height: 12px; border-radius: 2px;
  display: inline-block;
}

/* ── Heatmap Calendar — Light Theme ──────────────────────────── */
[data-theme="light"] .hm-trigger-btn { color: #475569; border-color: #e2e8f0; }
[data-theme="light"] .hm-trigger-btn:hover { color: #216e39; border-color: #216e39; }
[data-theme="light"] .hm-trigger-btn.hm-active { color: #216e39; border-color: #216e39; background: rgba(33,110,57,0.08); }
[data-theme="light"] .hm-widget { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .hm-title { color: #1f2328; }
[data-theme="light"] .hm-cell { stroke: rgba(0,0,0,0.06); }
[data-theme="light"] .hm-cell:hover { stroke: rgba(0,0,0,0.3); }
[data-theme="light"] .hm-month-label { fill: #656d76; }
[data-theme="light"] .hm-day-label { fill: #656d76; }
[data-theme="light"] .hm-tooltip { background: #ffffff; color: #1f2328; border-color: #d0d7de; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
[data-theme="light"] .hm-stat { background: #f6f8fa; }
[data-theme="light"] .hm-stat-value { color: #1f2328; }
[data-theme="light"] .hm-stat-label { color: #656d76; }
[data-theme="light"] .hm-stats { border-top-color: #d0d7de; }
[data-theme="light"] .hm-legend-text { color: #656d76; }

/* ── Heatmap Calendar — Responsive ───────────────────────────── */
@media (max-width: 640px) {
  .hm-widget { padding: 14px 12px; margin: 10px 0; }
  .hm-trigger-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
  .hm-grid-wrap { -webkit-overflow-scrolling: touch; }
  .hm-cell { stroke-width: 0.5; }
  .hm-stats { gap: 8px; }
  .hm-stat { min-width: 80px; padding: 8px 6px; }
  .hm-stat-value { font-size: 1rem; }
  .hm-stat-label { font-size: 0.65rem; }
}

/* ── Collaboration Stats ───────────────────────────────────── */
.cs-trigger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; margin-left: 8px;
  font-size: 0.85rem; font-weight: 500;
  color: #8896ab; background: transparent;
  border: 1px solid #2a3a52; border-radius: 8px;
  cursor: pointer; transition: all 0.2s ease;
}
.cs-trigger-btn:hover { color: #3b82f6; border-color: #3b82f6; }
.cs-trigger-btn.cs-active { color: #3b82f6; border-color: #3b82f6; background: rgba(59,130,246,0.08); }

.cs-section {
  background: #1a2233; border: 1px solid #2a3a52;
  border-radius: 12px; padding: 20px 24px;
  margin: 16px 0; animation: csFadeIn 0.3s ease;
}
@keyframes csFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.cs-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #2a3a52;
}
.cs-header h3 { margin: 0; font-size: 1.15rem; color: #e2e8f0; }
.cs-collapse-hint { font-size: 0.75rem; color: #5a6a80; }

.cs-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px;
}
.cs-summary-card {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(59,130,246,0.06); border: 1px solid #2a3a52;
  border-radius: 10px; padding: 14px 10px; text-align: center;
}
.cs-summary-icon { font-size: 1.5rem; margin-bottom: 6px; }
.cs-summary-value { font-size: 1.4rem; font-weight: 700; color: #e2e8f0; }
.cs-summary-label { font-size: 0.75rem; color: #8896ab; margin-top: 4px; }

.cs-leaderboard {
  margin-bottom: 20px; padding: 14px; background: rgba(255,255,255,0.02);
  border: 1px solid #2a3a52; border-radius: 10px;
}
.cs-leaderboard h4 { color: #e2e8f0; font-size: 0.95rem; }
.cs-leader-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(42,58,82,0.5);
}
.cs-leader-item:last-child { border-bottom: none; }
.cs-leader-rank { font-size: 0.8rem; color: #5a6a80; width: 20px; text-align: center; }
.cs-leader-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.cs-leader-name { font-size: 0.85rem; color: #e2e8f0; width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-leader-bar-wrap {
  flex: 1; height: 8px; background: rgba(59,130,246,0.1);
  border-radius: 4px; overflow: hidden;
}
.cs-leader-bar { height: 100%; background: #3b82f6; border-radius: 4px; transition: width 0.5s ease; }
.cs-leader-count { font-size: 0.8rem; color: #8896ab; min-width: 36px; text-align: right; }

.cs-timeline-wrap {
  margin-bottom: 20px; padding: 14px; background: rgba(255,255,255,0.02);
  border: 1px solid #2a3a52; border-radius: 10px;
}
.cs-timeline-wrap h4 { color: #e2e8f0; font-size: 0.95rem; }
.cs-timeline-canvas { width: 100%; border-radius: 6px; }

.cs-heatmap {
  margin-bottom: 20px; padding: 14px; background: rgba(255,255,255,0.02);
  border: 1px solid #2a3a52; border-radius: 10px;
}
.cs-heatmap h4 { color: #e2e8f0; font-size: 0.95rem; }
.cs-heatmap-grid { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.cs-heatmap-row { display: flex; align-items: center; gap: 2px; }
.cs-heatmap-label { font-size: 0.65rem; color: #5a6a80; flex-shrink: 0; text-align: center; }
.cs-heatmap-hour { font-size: 0.6rem; }
.cs-heatmap-cell {
  width: 14px; height: 14px; border-radius: 2px;
  flex-shrink: 0; cursor: pointer; transition: transform 0.15s;
}
.cs-heatmap-cell:hover { transform: scale(1.4); z-index: 1; }

.cs-projects {
  padding: 14px; background: rgba(255,255,255,0.02);
  border: 1px solid #2a3a52; border-radius: 10px;
}
.cs-projects h4 { color: #e2e8f0; font-size: 0.95rem; }
.cs-project-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid rgba(42,58,82,0.5);
}
.cs-project-item:last-child { border-bottom: none; }
.cs-project-name { flex: 1; font-size: 0.85rem; color: #e2e8f0; font-weight: 500; }
.cs-project-stat { font-size: 0.8rem; color: #8896ab; white-space: nowrap; }

/* ── Collaboration Stats — Light Theme ─────────────────────── */
[data-theme="light"] .cs-trigger-btn { color: #475569; border-color: #e2e8f0; }
[data-theme="light"] .cs-trigger-btn:hover { color: #3b82f6; border-color: #3b82f6; }
[data-theme="light"] .cs-trigger-btn.cs-active { color: #3b82f6; border-color: #3b82f6; background: rgba(59,130,246,0.08); }
[data-theme="light"] .cs-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .cs-header { border-bottom-color: #d0d7de; }
[data-theme="light"] .cs-header h3 { color: #1f2328; }
[data-theme="light"] .cs-summary-card { background: rgba(59,130,246,0.04); border-color: #d0d7de; }
[data-theme="light"] .cs-summary-value { color: #1f2328; }
[data-theme="light"] .cs-summary-label { color: #656d76; }
[data-theme="light"] .cs-leaderboard { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .cs-leaderboard h4 { color: #1f2328; }
[data-theme="light"] .cs-leader-name { color: #1f2328; }
[data-theme="light"] .cs-leader-count { color: #656d76; }
[data-theme="light"] .cs-timeline-wrap { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .cs-timeline-wrap h4 { color: #1f2328; }
[data-theme="light"] .cs-heatmap { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .cs-heatmap h4 { color: #1f2328; }
[data-theme="light"] .cs-heatmap-label { color: #656d76; }
[data-theme="light"] .cs-projects { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .cs-projects h4 { color: #1f2328; }
[data-theme="light"] .cs-project-name { color: #1f2328; }
[data-theme="light"] .cs-project-stat { color: #656d76; }

/* ── Collaboration Stats — Responsive ──────────────────────── */
@media (max-width: 640px) {
  .cs-section { padding: 14px 12px; margin: 10px 0; }
  .cs-trigger-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
  .cs-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cs-summary-value { font-size: 1.1rem; }
  .cs-leader-name { width: 80px; }
  .cs-heatmap-grid { -webkit-overflow-scrolling: touch; }
  .cs-heatmap-cell { width: 10px; height: 10px; }
  .cs-project-item { flex-wrap: wrap; gap: 6px; }
  .cs-project-name { width: 100%; }
}

/* ── Word Cloud — Section ─────────────────────────────────── */
.wc-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #e2e8f0;
  background: transparent;
  border: 1px solid #2a3a52;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.wc-trigger-btn:hover { color: #6366f1; border-color: #6366f1; }
.wc-trigger-btn.wc-active { color: #6366f1; border-color: #6366f1; background: rgba(99,102,241,0.1); }

.wc-section {
  background: #1a2233;
  border: 1px solid #2a3a52;
  border-radius: 10px;
  padding: 18px 20px;
  margin: 16px 0;
  animation: wcFadeIn 0.3s ease;
}
@keyframes wcFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.wc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #2a3a52;
}
.wc-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
}
.wc-collapse-btn {
  background: none;
  border: none;
  color: #8896ab;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.wc-collapse-btn:hover { color: #e2e8f0; background: rgba(255,255,255,0.05); }

/* ── Word Cloud — Canvas ──────────────────────────────────── */
.wc-canvas-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.wc-canvas {
  background: #0f1729;
  border-radius: 8px;
  border: 1px solid #2a3a52;
  max-width: 450px;
  width: 100%;
}

/* ── Word Cloud — Tooltip ─────────────────────────────────── */
.wc-tooltip {
  position: absolute;
  padding: 5px 10px;
  background: rgba(15,23,41,0.95);
  color: #e2e8f0;
  font-size: 0.78rem;
  border-radius: 4px;
  border: 1px solid #6366f1;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}

/* ── Word Cloud — Controls ────────────────────────────────── */
.wc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}
.wc-slider-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}
.wc-slider-group label {
  font-size: 0.78rem;
  color: #8896ab;
  font-weight: 500;
}
.wc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: #2a3a52;
  outline: none;
  cursor: pointer;
}
.wc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  border: 2px solid #1a2233;
}
.wc-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  border: 2px solid #1a2233;
}
.wc-refresh-btn {
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #e2e8f0;
  background: rgba(99,102,241,0.12);
  border: 1px solid #6366f1;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.wc-refresh-btn:hover { background: rgba(99,102,241,0.25); }

/* ── Word Cloud — Frequency List ──────────────────────────── */
.wc-freq-list {
  margin-bottom: 14px;
}
.wc-freq-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  transition: background 0.15s;
}
.wc-freq-item:hover { background: rgba(255,255,255,0.03); border-radius: 4px; }
.wc-freq-word {
  width: 110px;
  font-size: 0.8rem;
  color: #e2e8f0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
.wc-freq-bar {
  flex: 1;
  height: 6px;
  background: #1e293b;
  border-radius: 3px;
  overflow: hidden;
}
.wc-freq-count {
  width: 32px;
  text-align: right;
  font-size: 0.75rem;
  color: #8896ab;
  flex-shrink: 0;
}

/* ── Word Cloud — Export Row ──────────────────────────────── */
.wc-export-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Word Cloud — Light Theme ─────────────────────────────── */
[data-theme="light"] .wc-trigger-btn { color: #475569; border-color: #e2e8f0; }
[data-theme="light"] .wc-trigger-btn:hover { color: #6366f1; border-color: #6366f1; }
[data-theme="light"] .wc-trigger-btn.wc-active { color: #6366f1; border-color: #6366f1; background: rgba(99,102,241,0.08); }
[data-theme="light"] .wc-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .wc-header { border-bottom-color: #d0d7de; }
[data-theme="light"] .wc-header h3 { color: #1f2328; }
[data-theme="light"] .wc-collapse-btn { color: #656d76; }
[data-theme="light"] .wc-collapse-btn:hover { color: #1f2328; background: rgba(0,0,0,0.04); }
[data-theme="light"] .wc-canvas { background: #f0f2f5; border-color: #d0d7de; }
[data-theme="light"] .wc-tooltip { background: rgba(255,255,255,0.95); color: #1f2328; border-color: #6366f1; }
[data-theme="light"] .wc-slider-group label { color: #656d76; }
[data-theme="light"] .wc-slider { background: #d0d7de; }
[data-theme="light"] .wc-slider::-webkit-slider-thumb { border-color: #ffffff; }
[data-theme="light"] .wc-slider::-moz-range-thumb { border-color: #ffffff; }
[data-theme="light"] .wc-refresh-btn { color: #475569; background: rgba(99,102,241,0.06); border-color: #d0d7de; }
[data-theme="light"] .wc-refresh-btn:hover { background: rgba(99,102,241,0.12); }
[data-theme="light"] .wc-freq-word { color: #1f2328; }
[data-theme="light"] .wc-freq-bar { background: #e5e7eb; }
[data-theme="light"] .wc-freq-count { color: #656d76; }
[data-theme="light"] .wc-freq-item:hover { background: rgba(0,0,0,0.02); }

/* ── Word Cloud — Responsive ──────────────────────────────── */
@media (max-width: 640px) {
  .wc-section { padding: 14px 12px; margin: 10px 0; }
  .wc-trigger-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
  .wc-controls { flex-direction: column; gap: 10px; }
  .wc-slider-group { min-width: 100%; }
  .wc-canvas { max-width: 100%; }
  .wc-freq-word { width: 80px; }
  .wc-export-row { flex-direction: column; }
  .wc-export-row .wc-refresh-btn { width: 100%; text-align: center; }
}

/* ── Citation Tracker ────────────────────────────────────────── */
.ctrk-section {
  background: var(--color-bg-card, #1a2233);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 16px 0;
  animation: ctrkFadeIn 0.3s ease;
}

@keyframes ctrkFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ctrk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border, #2a3a52);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.ctrk-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  margin: 0;
}

.ctrk-collapse-btn {
  background: none;
  border: none;
  color: var(--color-text-muted, #8896ab);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.ctrk-collapse-btn:hover {
  color: var(--color-text, #e2e8f0);
  background: rgba(255,255,255,0.06);
}

/* Summary cards */
.ctrk-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.ctrk-summary-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ctrk-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.ctrk-summary-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.ctrk-summary-label {
  font-size: 0.75rem;
  color: var(--color-text-muted, #8896ab);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ctrk-summary-primary .ctrk-summary-value { color: #6366f1; }
.ctrk-summary-accent .ctrk-summary-value { color: #06d6a0; }
.ctrk-summary-warning .ctrk-summary-value { color: #f59e0b; }
.ctrk-summary-success .ctrk-summary-value { color: #10b981; }

/* Chart */
.ctrk-chart-wrap {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--color-border, #2a3a52);
}

.ctrk-chart {
  width: 100%;
  display: block;
}

/* Sort bar */
.ctrk-sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.8rem;
  color: var(--color-text-muted, #8896ab);
}

.ctrk-sort-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border, #2a3a52);
  color: var(--color-text-muted, #8896ab);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.2s;
}

.ctrk-sort-btn:hover { color: var(--color-text, #e2e8f0); border-color: #6366f1; }
.ctrk-sort-btn.active { color: #6366f1; border-color: #6366f1; background: rgba(99,102,241,0.1); }

/* Paper list */
.ctrk-papers {
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 14px;
}

.ctrk-paper-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}

.ctrk-paper-item:hover { background: rgba(255,255,255,0.03); }
.ctrk-paper-item:last-child { border-bottom: none; }

.ctrk-paper-title {
  flex: 1;
  font-size: 0.85rem;
  color: var(--color-text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ctrk-paper-year {
  font-size: 0.72rem;
  background: rgba(99,102,241,0.15);
  color: #818cf8;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.ctrk-paper-citations {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  min-width: 48px;
  text-align: right;
}

.ctrk-paper-sparkline { display: inline-flex; align-items: center; }
.ctrk-paper-sparkline svg { vertical-align: middle; }

.ctrk-paper-growth {
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 36px;
  text-align: center;
}

.ctrk-growth-up { color: #10b981; }
.ctrk-growth-down { color: #ef4444; }

/* Update & remove controls */
.ctrk-update-wrap {
  display: flex;
  gap: 4px;
  align-items: center;
}

.ctrk-update-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--color-border, #2a3a52);
  color: var(--color-text, #e2e8f0);
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.ctrk-update-btn {
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.3);
  color: #818cf8;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.72rem;
  transition: background 0.2s;
}

.ctrk-update-btn:hover { background: rgba(99,102,241,0.25); }

.ctrk-remove-btn {
  background: none;
  border: none;
  color: var(--color-text-dim, #5a6a80);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.ctrk-remove-btn:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

/* Add form */
.ctrk-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ctrk-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--color-border, #2a3a52);
  color: var(--color-text, #e2e8f0);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  flex: 1;
  min-width: 100px;
  transition: border-color 0.2s;
}

.ctrk-input:focus { outline: none; border-color: #6366f1; }
.ctrk-input::placeholder { color: var(--color-text-dim, #5a6a80); }

/* Export */
.ctrk-export-row {
  display: flex;
  gap: 8px;
}

.ctrk-export-btn {
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.25);
  color: #818cf8;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s;
}

.ctrk-export-btn:hover { background: rgba(99,102,241,0.2); border-color: #6366f1; }

/* ── Citation Tracker — Light Theme ──────────────────────────── */
[data-theme="light"] .ctrk-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .ctrk-header { border-bottom-color: #d0d7de; }
[data-theme="light"] .ctrk-header h3 { color: #1f2328; }
[data-theme="light"] .ctrk-collapse-btn { color: #656d76; }
[data-theme="light"] .ctrk-collapse-btn:hover { color: #1f2328; background: rgba(0,0,0,0.04); }
[data-theme="light"] .ctrk-summary-card { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .ctrk-summary-label { color: #656d76; }
[data-theme="light"] .ctrk-chart-wrap { background: #f0f2f5; border-color: #d0d7de; }
[data-theme="light"] .ctrk-sort-btn { background: #f6f8fa; border-color: #d0d7de; color: #656d76; }
[data-theme="light"] .ctrk-sort-btn:hover { color: #1f2328; }
[data-theme="light"] .ctrk-paper-item { border-bottom-color: #e5e7eb; }
[data-theme="light"] .ctrk-paper-item:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .ctrk-paper-title { color: #1f2328; }
[data-theme="light"] .ctrk-paper-citations { color: #1f2328; }
[data-theme="light"] .ctrk-input { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .ctrk-update-input { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .ctrk-export-btn { background: rgba(99,102,241,0.06); border-color: #d0d7de; }
[data-theme="light"] .ctrk-export-btn:hover { background: rgba(99,102,241,0.12); }
[data-theme="light"] .ctrk-remove-btn { color: #656d76; }

/* ── Citation Tracker — Responsive ───────────────────────────── */
@media (max-width: 640px) {
  .ctrk-section { padding: 14px 12px; margin: 10px 0; }
  .ctrk-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ctrk-summary-value { font-size: 1.2rem; }
  .ctrk-paper-item { flex-wrap: wrap; gap: 6px; }
  .ctrk-paper-title { min-width: 100%; }
  .ctrk-add-form { flex-direction: column; }
  .ctrk-add-form .ctrk-input { width: 100%; }
  .ctrk-update-wrap { display: none; }
  .ctrk-export-row { flex-direction: column; }
  .ctrk-export-btn { width: 100%; text-align: center; }
}

/* ── Export Report ──────────────────────────────────────────── */
.xrpt-trigger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 8px; border: 1px solid #6366f1;
  background: rgba(99,102,241,0.12); color: #a5b4fc;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.xrpt-trigger-btn:hover { background: rgba(99,102,241,0.22); border-color: #818cf8; }

.xrpt-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}

.xrpt-modal {
  width: 520px; max-width: 94vw; max-height: 88vh; overflow-y: auto;
  background: #161820; border: 1px solid #2d333b; border-radius: 14px;
  padding: 24px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.xrpt-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #2d333b;
}

.xrpt-title {
  font-size: 1.15rem; font-weight: 700; color: #e6edf3;
}

.xrpt-close-btn {
  background: none; border: none; color: #7d8590; font-size: 1.5rem;
  cursor: pointer; line-height: 1; padding: 0 4px;
  transition: color 0.2s;
}
.xrpt-close-btn:hover { color: #e6edf3; }

.xrpt-sections {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 16px;
}

.xrpt-section-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.88rem; color: #c9d1d9; cursor: pointer;
  padding: 6px 10px; border-radius: 6px;
  transition: background 0.15s;
}
.xrpt-section-check:hover { background: rgba(99,102,241,0.08); }
.xrpt-section-check input[type="checkbox"] { accent-color: #6366f1; }

.xrpt-format-row {
  display: flex; gap: 8px; margin-bottom: 14px;
}

.xrpt-format-btn {
  flex: 1; padding: 7px 0; border-radius: 7px; border: 1px solid #2d333b;
  background: transparent; color: #7d8590; font-size: 0.84rem;
  font-weight: 600; cursor: pointer; text-align: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.xrpt-format-btn:hover { color: #c9d1d9; border-color: #444c56; }
.xrpt-format-btn.xrpt-active {
  background: rgba(99,102,241,0.15); color: #a5b4fc; border-color: #6366f1;
}

.xrpt-date-row {
  display: flex; gap: 12px; margin-bottom: 16px;
}
.xrpt-date-row label {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  font-size: 0.82rem; color: #7d8590;
}
.xrpt-date-row input[type="date"] {
  padding: 6px 10px; border-radius: 6px; border: 1px solid #2d333b;
  background: #0d1117; color: #c9d1d9; font-size: 0.85rem;
}

.xrpt-preview {
  min-height: 120px; max-height: 260px; overflow: auto;
  background: #0d1117; border: 1px solid #2d333b; border-radius: 8px;
  margin-bottom: 16px; padding: 10px;
}

.xrpt-generate-btn {
  width: 100%; padding: 10px 0; border-radius: 8px; border: none;
  background: #6366f1; color: #fff; font-size: 0.92rem;
  font-weight: 700; cursor: pointer; transition: background 0.2s;
}
.xrpt-generate-btn:hover { background: #4f46e5; }

/* ── Export Report — Light Theme ───────────────────────────── */
[data-theme="light"] .xrpt-trigger-btn { background: rgba(99,102,241,0.06); color: #4f46e5; border-color: #c7c8f2; }
[data-theme="light"] .xrpt-trigger-btn:hover { background: rgba(99,102,241,0.14); }
[data-theme="light"] .xrpt-overlay { background: rgba(0,0,0,0.35); }
[data-theme="light"] .xrpt-modal { background: #ffffff; border-color: #d0d7de; box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
[data-theme="light"] .xrpt-header { border-bottom-color: #d0d7de; }
[data-theme="light"] .xrpt-title { color: #1f2328; }
[data-theme="light"] .xrpt-close-btn { color: #656d76; }
[data-theme="light"] .xrpt-close-btn:hover { color: #1f2328; }
[data-theme="light"] .xrpt-section-check { color: #1f2328; }
[data-theme="light"] .xrpt-section-check:hover { background: rgba(99,102,241,0.06); }
[data-theme="light"] .xrpt-format-btn { border-color: #d0d7de; color: #656d76; }
[data-theme="light"] .xrpt-format-btn:hover { color: #1f2328; }
[data-theme="light"] .xrpt-format-btn.xrpt-active { background: rgba(99,102,241,0.1); color: #4f46e5; border-color: #6366f1; }
[data-theme="light"] .xrpt-date-row input[type="date"] { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .xrpt-preview { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .xrpt-generate-btn { background: #4f46e5; }
[data-theme="light"] .xrpt-generate-btn:hover { background: #4338ca; }

/* ── Export Report — Responsive ────────────────────────────── */
@media (max-width: 640px) {
  .xrpt-modal { padding: 16px; border-radius: 10px; }
  .xrpt-sections { grid-template-columns: 1fr; }
  .xrpt-format-row { flex-wrap: wrap; }
  .xrpt-format-btn { flex: none; width: calc(33.3% - 6px); }
  .xrpt-date-row { flex-direction: column; gap: 8px; }
  .xrpt-preview { max-height: 180px; }
}

/* ── Session Heatmap ────────────────────────────────────────── */
.shm-section {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
}

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

.shm-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e6edf3;
  margin: 0;
}

.shm-view-toggle {
  display: flex;
  gap: 4px;
  background: #161b22;
  border-radius: 8px;
  padding: 3px;
}

.shm-view-btn {
  padding: 5px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #8b949e;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.shm-view-btn:hover {
  color: #c9d1d9;
}

.shm-view-btn.shm-active {
  background: #21262d;
  color: #e6edf3;
}

.shm-canvas-wrap {
  overflow-x: auto;
  padding: 8px 0;
}

.shm-canvas {
  display: block;
  cursor: crosshair;
}

.shm-tooltip {
  position: fixed;
  z-index: var(--z-popover);
  display: none;
  background: #1c2129;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: #c9d1d9;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  max-width: 220px;
}

.shm-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  justify-content: flex-end;
}

.shm-legend-label {
  font-size: 0.75rem;
  color: #8b949e;
  margin: 0 4px;
}

.shm-legend-cell {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.shm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #21262d;
}

.shm-stat-item {
  text-align: center;
}

.shm-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e6edf3;
  margin-bottom: 2px;
}

.shm-stat-label {
  font-size: 0.75rem;
  color: #8b949e;
  line-height: 1.3;
}

/* ── Session Heatmap — Light Theme ──────────────────────────── */
[data-theme="light"] .shm-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .shm-title { color: #1f2328; }
[data-theme="light"] .shm-view-toggle { background: #f6f8fa; }
[data-theme="light"] .shm-view-btn { color: #656d76; }
[data-theme="light"] .shm-view-btn:hover { color: #1f2328; }
[data-theme="light"] .shm-view-btn.shm-active { background: #ffffff; color: #1f2328; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
[data-theme="light"] .shm-tooltip { background: #ffffff; border-color: #d0d7de; color: #1f2328; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
[data-theme="light"] .shm-legend-label { color: #656d76; }
[data-theme="light"] .shm-stats { border-top-color: #d0d7de; }
[data-theme="light"] .shm-stat-value { color: #1f2328; }
[data-theme="light"] .shm-stat-label { color: #656d76; }

/* ── Session Heatmap — Responsive ───────────────────────────── */
@media (max-width: 640px) {
  .shm-section { padding: 16px; }
  .shm-header { flex-direction: column; gap: 10px; align-items: flex-start; }
  .shm-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .shm-canvas-wrap { margin: 0 -8px; padding: 8px; }
  .shm-stat-value { font-size: 1rem; }
}

/* ── Goal Streaks ──────────────────────────────────────────── */
.gsk-section {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
}
.gsk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.gsk-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #e6edf3;
  margin: 0;
}
.gsk-reset-btn {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.gsk-reset-btn:hover { color: #e6edf3; border-color: #8b949e; }
.gsk-sub-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e6edf3;
  margin: 20px 0 12px;
}
.gsk-goal-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
.gsk-goal-group { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.gsk-goal-label {
  font-size: 0.75rem;
  color: #8b949e;
}
.gsk-goal-input {
  background: #0d1117;
  border: 1px solid #30363d;
  color: #e6edf3;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
}
.gsk-goal-input:focus { outline: none; border-color: #3b82f6; }
.gsk-rings-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 20px;
}
.gsk-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
}
.gsk-ring { width: 100%; height: 100%; }
.gsk-ring-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.gsk-ring-pct { font-size: 1.3rem; font-weight: 700; color: #e6edf3; }
.gsk-ring-label { font-size: 0.65rem; color: #8b949e; }
.gsk-streak-display {
  text-align: center;
  margin: 16px 0;
}
.gsk-streak-number {
  font-size: 3rem;
  font-weight: 800;
  color: #e6edf3;
  line-height: 1;
}
.gsk-streak-label {
  display: block;
  font-size: 0.85rem;
  color: #8b949e;
  margin-top: 4px;
}
.gsk-streak-fire {
  font-size: 2rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.gsk-streak-active .gsk-streak-fire {
  animation: gsk-flame 0.6s ease-in-out infinite alternate;
}
@keyframes gsk-flame {
  0%   { transform: scale(1) rotate(-3deg); opacity: 0.85; }
  100% { transform: scale(1.15) rotate(3deg); opacity: 1; }
}
.gsk-sparkline-wrap {
  margin: 16px 0;
}
.gsk-sparkline-wrap svg {
  width: 100%;
  height: 60px;
}
.gsk-sparkline-label {
  display: block;
  font-size: 0.7rem;
  color: #8b949e;
  margin-top: 4px;
  text-align: center;
}
.gsk-milestones {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.gsk-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px;
  border-radius: 8px;
  border: 1px solid #30363d;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gsk-milestone:hover { transform: translateY(-2px); }
.gsk-locked { opacity: 0.35; filter: grayscale(1); }
.gsk-unlocked { background: rgba(59,130,246,0.08); border-color: #3b82f6; }
.gsk-milestone-icon { font-size: 1.5rem; margin-bottom: 4px; }
.gsk-milestone-name { font-size: 0.65rem; color: #8b949e; line-height: 1.3; }
.gsk-bests {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gsk-best-item {
  text-align: center;
  padding: 12px;
  background: #0d1117;
  border-radius: 8px;
}
.gsk-best-value { display: block; font-size: 1.3rem; font-weight: 700; color: #e6edf3; }
.gsk-best-label { display: block; font-size: 0.7rem; color: #8b949e; margin-top: 4px; }
.gsk-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #30363d;
}
.gsk-stat-item { text-align: center; }
.gsk-stat-value { display: block; font-size: 1.1rem; font-weight: 600; color: #e6edf3; }
.gsk-stat-label { display: block; font-size: 0.7rem; color: #8b949e; margin-top: 2px; }

/* ── Goal Streaks — Light Theme ────────────────────────────── */
[data-theme="light"] .gsk-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .gsk-title { color: #1f2328; }
[data-theme="light"] .gsk-sub-title { color: #1f2328; }
[data-theme="light"] .gsk-reset-btn { border-color: #d0d7de; color: #656d76; }
[data-theme="light"] .gsk-reset-btn:hover { color: #1f2328; border-color: #1f2328; }
[data-theme="light"] .gsk-goal-label { color: #656d76; }
[data-theme="light"] .gsk-goal-input { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .gsk-ring-pct { color: #1f2328; }
[data-theme="light"] .gsk-ring-label { color: #656d76; }
[data-theme="light"] .gsk-streak-number { color: #1f2328; }
[data-theme="light"] .gsk-streak-label { color: #656d76; }
[data-theme="light"] .gsk-milestone { border-color: #d0d7de; }
[data-theme="light"] .gsk-unlocked { background: rgba(59,130,246,0.06); }
[data-theme="light"] .gsk-milestone-name { color: #656d76; }
[data-theme="light"] .gsk-best-item { background: #f6f8fa; }
[data-theme="light"] .gsk-best-value { color: #1f2328; }
[data-theme="light"] .gsk-best-label { color: #656d76; }
[data-theme="light"] .gsk-stats { border-top-color: #d0d7de; }
[data-theme="light"] .gsk-stat-value { color: #1f2328; }
[data-theme="light"] .gsk-stat-label { color: #656d76; }
[data-theme="light"] .gsk-sparkline-label { color: #656d76; }

/* ── Goal Streaks — Responsive ─────────────────────────────── */
@media (max-width: 640px) {
  .gsk-section { padding: 16px; }
  .gsk-goal-row { flex-direction: column; gap: 10px; }
  .gsk-rings-row { flex-direction: column; align-items: center; gap: 16px; }
  .gsk-milestones { grid-template-columns: repeat(3, 1fr); }
  .gsk-bests { grid-template-columns: 1fr; }
  .gsk-stats { grid-template-columns: repeat(2, 1fr); }
  .gsk-streak-number { font-size: 2.2rem; }
}

/* ── Productivity Score ──────────────────────────────────── */
.psc-section { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 24px; margin-top: 24px; }
.psc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.psc-title { font-size: 1.15rem; font-weight: 600; color: #e6edf3; margin: 0; }
.psc-reset-btn { background: none; border: 1px solid #30363d; border-radius: 6px; color: #8b949e; font-size: 0.8rem; padding: 4px 12px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.psc-reset-btn:hover { color: #e6edf3; border-color: #e6edf3; }

.psc-gauge-wrap { display: flex; flex-direction: column; align-items: center; position: relative; margin-bottom: 20px; }
.psc-gauge { display: block; }
.psc-gauge-score { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); font-size: 2.4rem; font-weight: 700; }
.psc-gauge-label { font-size: 0.85rem; color: #8b949e; margin-top: 4px; }

.psc-breakdown { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.psc-break-row { display: flex; align-items: center; gap: 10px; }
.psc-break-label { flex: 0 0 160px; font-size: 0.82rem; color: #8b949e; }
.psc-break-bar { flex: 1; height: 8px; background: #21262d; border-radius: 4px; overflow: hidden; }
.psc-break-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.psc-break-value { flex: 0 0 36px; text-align: right; font-size: 0.85rem; font-weight: 600; }

.psc-trend-wrap { position: relative; margin-bottom: 22px; }
.psc-trend-wrap h4 { font-size: 0.95rem; color: #e6edf3; margin: 0 0 10px 0; }
.psc-trend-canvas { width: 100%; height: auto; display: block; border-radius: 8px; background: #0d1117; }
.psc-trend-tooltip { display: none; position: absolute; background: #30363d; color: #e6edf3; font-size: 0.78rem; padding: 4px 8px; border-radius: 4px; pointer-events: none; white-space: nowrap; z-index: 5; transform: translateX(-50%); }

.psc-weights { margin-bottom: 22px; }
.psc-weights h4 { font-size: 0.95rem; color: #e6edf3; margin: 0 0 10px 0; }
.psc-weight-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.psc-weight-label { flex: 0 0 130px; font-size: 0.82rem; color: #8b949e; }
.psc-weight-slider { flex: 1; accent-color: #6366f1; cursor: pointer; }
.psc-weight-val { flex: 0 0 44px; text-align: right; font-size: 0.82rem; color: #e6edf3; font-weight: 600; }

.psc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; border-top: 1px solid #30363d; padding-top: 18px; }
.psc-stat-item { text-align: center; }
.psc-stat-value { font-size: 1.5rem; font-weight: 700; color: #e6edf3; }
.psc-stat-label { font-size: 0.75rem; color: #8b949e; margin-top: 2px; }

/* ── Productivity Score — Light ──────────────────────────── */
[data-theme="light"] .psc-section { background: #fff; border-color: #d0d7de; }
[data-theme="light"] .psc-title { color: #1f2328; }
[data-theme="light"] .psc-reset-btn { border-color: #d0d7de; color: #656d76; }
[data-theme="light"] .psc-reset-btn:hover { color: #1f2328; border-color: #1f2328; }
[data-theme="light"] .psc-gauge-label { color: #656d76; }
[data-theme="light"] .psc-break-label { color: #656d76; }
[data-theme="light"] .psc-break-bar { background: #f6f8fa; }
[data-theme="light"] .psc-trend-wrap h4 { color: #1f2328; }
[data-theme="light"] .psc-trend-canvas { background: #f6f8fa; }
[data-theme="light"] .psc-trend-tooltip { background: #d0d7de; color: #1f2328; }
[data-theme="light"] .psc-weights h4 { color: #1f2328; }
[data-theme="light"] .psc-weight-label { color: #656d76; }
[data-theme="light"] .psc-weight-val { color: #1f2328; }
[data-theme="light"] .psc-stat-value { color: #1f2328; }
[data-theme="light"] .psc-stat-label { color: #656d76; }
[data-theme="light"] .psc-stats { border-top-color: #d0d7de; }

/* ── Productivity Score — Responsive ─────────────────────── */
@media (max-width: 640px) {
  .psc-section { padding: 16px; }
  .psc-break-row { flex-wrap: wrap; }
  .psc-break-label { flex: 0 0 100%; }
  .psc-weight-row { flex-wrap: wrap; }
  .psc-weight-label { flex: 0 0 100%; }
  .psc-stats { grid-template-columns: repeat(2, 1fr); }
  .psc-gauge-score { font-size: 1.8rem; }
}

/* ── Writing Patterns Radar ───────────────────────────────── */
.wpat-section {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
}
.wpat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.wpat-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #e6edf3;
  margin: 0;
}
.wpat-sub-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #8b949e;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wpat-radar-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.wpat-radar-canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
.wpat-tooltip {
  display: none;
  position: absolute;
  background: #30363d;
  color: #e6edf3;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}
.wpat-hourly { margin-bottom: 24px; }
.wpat-hour-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 80px;
}
.wpat-hour-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.wpat-hour-bar {
  width: 100%;
  min-height: 2px;
  background: #30363d;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s;
}
.wpat-hour-bar.wpat-peak {
  background: #58a6ff;
}
.wpat-hour-label {
  font-size: 0.6rem;
  color: #484f58;
  margin-top: 4px;
}
.wpat-day-chart { margin-bottom: 24px; }
.wpat-day-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
}
.wpat-day-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.wpat-day-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s;
}
.wpat-day-label {
  font-size: 0.72rem;
  color: #8b949e;
  margin-top: 6px;
}
.wpat-insights { margin-bottom: 24px; }
.wpat-insight {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.88rem;
  color: #c9d1d9;
  border-bottom: 1px solid rgba(48,54,61,0.5);
}
.wpat-insight:last-child { border-bottom: none; }
.wpat-insight-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.wpat-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border-top: 1px solid #30363d;
  padding-top: 20px;
}
.wpat-stat-item { text-align: center; }
.wpat-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #e6edf3;
}
.wpat-stat-label {
  font-size: 0.72rem;
  color: #8b949e;
  margin-top: 4px;
}

/* ── Writing Patterns Radar — Light theme ─────────────────── */
[data-theme="light"] .wpat-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .wpat-title { color: #1f2328; }
[data-theme="light"] .wpat-sub-title { color: #656d76; }
[data-theme="light"] .wpat-tooltip { background: #d0d7de; color: #1f2328; }
[data-theme="light"] .wpat-hour-bar { background: #eaeef2; }
[data-theme="light"] .wpat-hour-bar.wpat-peak { background: #0969da; }
[data-theme="light"] .wpat-hour-label { color: #8c959f; }
[data-theme="light"] .wpat-day-label { color: #656d76; }
[data-theme="light"] .wpat-insight { color: #1f2328; border-bottom-color: rgba(208,215,222,0.5); }
[data-theme="light"] .wpat-stats { border-top-color: #d0d7de; }
[data-theme="light"] .wpat-stat-value { color: #1f2328; }
[data-theme="light"] .wpat-stat-label { color: #656d76; }

/* ── Writing Patterns Radar — Responsive ──────────────────── */
@media (max-width: 640px) {
  .wpat-section { padding: 16px; }
  .wpat-stats { grid-template-columns: repeat(2, 1fr); }
  .wpat-hour-bars { height: 60px; }
  .wpat-day-bars { height: 60px; }
  .wpat-hour-label { font-size: 0.5rem; }
}

/* ── Comparative Periods ─────────────────────────────────── */
.cpr-section {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 24px;
  margin-top: 24px;
}
.cpr-header { margin-bottom: 16px; }
.cpr-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e6edf3;
  margin: 0;
}
.cpr-preset-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cpr-preset-select {
  flex: 1;
  max-width: 280px;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #0d1117;
  color: #e6edf3;
  font-size: 0.85rem;
  cursor: pointer;
}
.cpr-refresh-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #e6edf3;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.cpr-refresh-btn:hover { background: #30363d; }
.cpr-period-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.cpr-period {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 260px;
}
.cpr-period-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #8b949e;
  min-width: 56px;
}
.cpr-period-sep {
  font-size: 0.78rem;
  color: #484f58;
}
.cpr-date-input {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #0d1117;
  color: #e6edf3;
  font-size: 0.82rem;
}
.cpr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.cpr-card {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}
.cpr-card-label {
  font-size: 0.72rem;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.cpr-card-values {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 6px;
}
.cpr-val-a {
  font-size: 1.15rem;
  font-weight: 700;
  color: #58a6ff;
}
.cpr-val-b {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f78166;
}
.cpr-delta {
  font-size: 0.78rem;
  font-weight: 600;
}
.cpr-delta-up { color: #3fb950; }
.cpr-delta-down { color: #f85149; }
.cpr-delta-same { color: #8b949e; }
.cpr-sparklines { margin-bottom: 20px; }
.cpr-spark-row { position: relative; }
.cpr-spark-legend {
  font-size: 0.75rem;
  color: #8b949e;
  margin-bottom: 6px;
}
.cpr-spark-svg { display: block; width: 100%; }
.cpr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.cpr-table th {
  text-align: left;
  padding: 8px 10px;
  color: #8b949e;
  border-bottom: 1px solid #30363d;
  font-weight: 600;
}
.cpr-table td {
  padding: 6px 10px;
  color: #e6edf3;
  border-bottom: 1px solid rgba(48,54,61,0.4);
}

/* ── Comparative Periods — Light theme ───────────────────── */
[data-theme="light"] .cpr-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .cpr-title { color: #1f2328; }
[data-theme="light"] .cpr-preset-select { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .cpr-refresh-btn { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .cpr-refresh-btn:hover { background: #eaeef2; }
[data-theme="light"] .cpr-period-label { color: #656d76; }
[data-theme="light"] .cpr-period-sep { color: #8c959f; }
[data-theme="light"] .cpr-date-input { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .cpr-card { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .cpr-card-label { color: #656d76; }
[data-theme="light"] .cpr-val-a { color: #0969da; }
[data-theme="light"] .cpr-val-b { color: #cf222e; }
[data-theme="light"] .cpr-delta-up { color: #1a7f37; }
[data-theme="light"] .cpr-delta-down { color: #cf222e; }
[data-theme="light"] .cpr-delta-same { color: #656d76; }
[data-theme="light"] .cpr-spark-legend { color: #656d76; }
[data-theme="light"] .cpr-table th { color: #656d76; border-bottom-color: #d0d7de; }
[data-theme="light"] .cpr-table td { color: #1f2328; border-bottom-color: rgba(208,215,222,0.5); }

/* ── Comparative Periods — Responsive ────────────────────── */
@media (max-width: 640px) {
  .cpr-section { padding: 16px; }
  .cpr-cards { grid-template-columns: 1fr; }
  .cpr-period-row { flex-direction: column; gap: 12px; }
  .cpr-period { flex-wrap: wrap; }
  .cpr-card-values { gap: 10px; }
}

/* ── Writing Streak Tracker ─────────────────────────────── */
.wst-section {
  margin-top: 1.5rem;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  overflow: hidden;
}

.wst-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.wst-header:hover { background: rgba(255,255,255,0.04); }

.wst-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e6edf3;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wst-icon { font-size: 1.2rem; }

.wst-chevron {
  font-size: 0.75rem;
  color: #8b949e;
  transition: transform 0.2s;
}

.wst-body { padding: 0 20px 20px; }

/* Stats cards */
.wst-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.wst-stat-card {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.wst-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #58a6ff;
  line-height: 1.2;
}

.wst-stat-label {
  font-size: 0.75rem;
  color: #8b949e;
  margin-top: 4px;
  font-weight: 500;
}

.wst-stat-unit {
  font-size: 0.6875rem;
  color: #484f58;
  margin-top: 2px;
}

.wst-flame { margin-left: 4px; }

/* Grid wrapper for horizontal scroll on mobile */
.wst-grid-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

/* Month labels row */
.wst-month-row {
  display: grid;
  grid-template-columns: 32px repeat(53, 13px);
  gap: 2px;
  margin-bottom: 4px;
  min-width: fit-content;
}

.wst-day-spacer { width: 32px; }

.wst-month-label {
  font-size: 0.625rem;
  color: #8b949e;
  white-space: nowrap;
}

/* Grid layout */
.wst-grid {
  display: flex;
  gap: 4px;
  min-width: fit-content;
}

.wst-day-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 32px;
  flex-shrink: 0;
}

.wst-day-label {
  height: 13px;
  font-size: 0.5625rem;
  color: #8b949e;
  display: flex;
  align-items: center;
}

.wst-weeks {
  display: flex;
  gap: 2px;
}

.wst-week {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wst-cell {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  outline: 1px solid rgba(27,31,35,0.06);
}

.wst-level-0 { background: #161b22; outline-color: rgba(255,255,255,0.04); }
.wst-level-1 { background: #0e4429; }
.wst-level-2 { background: #006d32; }
.wst-level-3 { background: #26a641; }
.wst-level-4 { background: #39d353; }

.wst-cell[data-date]:hover {
  outline: 2px solid #58a6ff;
  outline-offset: -1px;
}

/* Legend */
.wst-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 10px;
}

.wst-legend-label {
  font-size: 0.625rem;
  color: #8b949e;
  margin: 0 2px;
}

.wst-legend-cell {
  width: 11px;
  height: 11px;
}

/* Tooltip */
.wst-tooltip {
  position: absolute;
  z-index: var(--z-popover);
  background: #1c2128;
  border: 1px solid #444c56;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: #e6edf3;
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ── Writing Streak Tracker — Light theme ───────────────── */
[data-theme="light"] .wst-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .wst-header:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .wst-title { color: #1f2328; }
[data-theme="light"] .wst-chevron { color: #656d76; }
[data-theme="light"] .wst-stat-card { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .wst-stat-value { color: #0969da; }
[data-theme="light"] .wst-stat-label { color: #656d76; }
[data-theme="light"] .wst-stat-unit { color: #8c959f; }
[data-theme="light"] .wst-month-label { color: #656d76; }
[data-theme="light"] .wst-day-label { color: #656d76; }
[data-theme="light"] .wst-level-0 { background: #ebedf0; outline-color: rgba(27,31,35,0.06); }
[data-theme="light"] .wst-level-1 { background: #9be9a8; }
[data-theme="light"] .wst-level-2 { background: #40c463; }
[data-theme="light"] .wst-level-3 { background: #30a14e; }
[data-theme="light"] .wst-level-4 { background: #216e39; }
[data-theme="light"] .wst-cell[data-date]:hover { outline-color: #0969da; }
[data-theme="light"] .wst-legend-label { color: #656d76; }
[data-theme="light"] .wst-tooltip { background: #ffffff; border-color: #d0d7de; color: #1f2328; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

/* ── Writing Streak Tracker — Responsive ────────────────── */
@media (max-width: 640px) {
  .wst-section { margin-top: 1rem; }
  .wst-body { padding: 0 12px 14px; }
  .wst-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wst-stat-value { font-size: 1.25rem; }
  .wst-grid-wrapper { margin: 0 -12px; padding: 0 12px; }
}

/* ── Word Count Forecast ───────────────────────────────────── */
.wcf-section {
  margin-top: 1.5rem;
  background: #161d2a;
  border: 1px solid #2a3a52;
  border-radius: 12px;
  overflow: hidden;
}
.wcf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.wcf-header:hover { background: rgba(255,255,255,0.04); }
.wcf-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  color: #e2e8f0;
}
.wcf-icon { font-size: 1.15rem; }
.wcf-chevron { color: #8896ab; font-size: 0.75rem; transition: transform 0.2s; }
.wcf-body { padding: 0 20px 20px; }

/* Progress bar */
.wcf-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.wcf-progress-bar-wrap {
  flex: 1 1 200px;
  height: 10px;
  background: #1e2a3d;
  border-radius: 5px;
  overflow: hidden;
}
.wcf-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #06d6a0);
  border-radius: 5px;
  transition: width 0.4s ease;
}
.wcf-progress-text { font-size: 0.85rem; color: #8896ab; white-space: nowrap; }

/* Status badges */
.wcf-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.wcf-badge-ontrack { background: rgba(16,185,129,0.15); color: #10b981; }
.wcf-badge-behind { background: rgba(239,68,68,0.15); color: #ef4444; }
.wcf-badge-ahead { background: rgba(59,130,246,0.15); color: #3b82f6; }
.wcf-badge-complete { background: rgba(6,214,160,0.15); color: #06d6a0; }

/* Stats grid */
.wcf-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.wcf-stat-card {
  background: #1a2233;
  border: 1px solid #2a3a52;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
}
.wcf-stat-value { font-size: 1.2rem; font-weight: 700; color: #e2e8f0; margin-bottom: 2px; }
.wcf-stat-label { font-size: 0.75rem; color: #8896ab; }
.wcf-trend-up { color: #10b981; }
.wcf-trend-down { color: #ef4444; }
.wcf-trend-stable { color: #8896ab; }

/* Chart */
.wcf-chart-wrapper { margin-bottom: 16px; }
.wcf-chart-container { width: 100%; min-height: 260px; }
.wcf-chart-svg { display: block; }
.wcf-chart-empty { text-align: center; padding: 40px 0; color: #5a6a80; font-size: 0.9rem; }
.wcf-grid-line { stroke: #2a3a52; stroke-width: 0.5; }
.wcf-axis-label { fill: #5a6a80; font-size: 10px; font-family: inherit; }
.wcf-target-line { stroke: #f59e0b; stroke-width: 1.5; stroke-dasharray: 6 3; opacity: 0.7; }
.wcf-target-label { fill: #f59e0b; font-size: 10px; font-family: inherit; }
.wcf-actual-line { fill: none; stroke: #3b82f6; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wcf-projected-line { fill: none; stroke: #06d6a0; stroke-width: 2; stroke-dasharray: 8 4; opacity: 0.8; }
.wcf-confidence-band { fill: rgba(6,214,160,0.1); stroke: none; }
.wcf-milestone { fill: #8b5cf6; stroke: #161d2a; stroke-width: 1.5; }
.wcf-milestone-label { fill: #8b5cf6; font-size: 9px; font-weight: 600; font-family: inherit; }
.wcf-today-line { stroke: #e2e8f0; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.4; }
.wcf-today-label { fill: #8896ab; font-size: 9px; font-family: inherit; }

/* Settings */
.wcf-settings-container { border-top: 1px solid #2a3a52; padding-top: 16px; }
.wcf-settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.wcf-label { flex: 0 0 160px; font-size: 0.85rem; color: #8896ab; }
.wcf-input {
  flex: 1;
  background: #1a2233;
  border: 1px solid #2a3a52;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.85rem;
  color: #e2e8f0;
  outline: none;
  transition: border-color 0.15s;
}
.wcf-input:focus { border-color: #3b82f6; }
.wcf-btn {
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.wcf-btn:hover { opacity: 0.88; }
.wcf-btn-primary { background: #3b82f6; color: #fff; }
.wcf-btn-secondary { background: #2a3a52; color: #e2e8f0; }

/* ── Word Count Forecast — Light theme ───────────────────── */
[data-theme="light"] .wcf-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .wcf-header:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .wcf-title { color: #1f2328; }
[data-theme="light"] .wcf-chevron { color: #656d76; }
[data-theme="light"] .wcf-progress-bar-wrap { background: #ebedf0; }
[data-theme="light"] .wcf-progress-text { color: #656d76; }
[data-theme="light"] .wcf-stat-card { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .wcf-stat-value { color: #1f2328; }
[data-theme="light"] .wcf-stat-label { color: #656d76; }
[data-theme="light"] .wcf-grid-line { stroke: #d0d7de; }
[data-theme="light"] .wcf-axis-label { fill: #656d76; }
[data-theme="light"] .wcf-today-label { fill: #656d76; }
[data-theme="light"] .wcf-milestone { stroke: #ffffff; }
[data-theme="light"] .wcf-confidence-band { fill: rgba(6,214,160,0.08); }
[data-theme="light"] .wcf-settings-container { border-color: #d0d7de; }
[data-theme="light"] .wcf-input { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .wcf-btn-secondary { background: #d0d7de; color: #1f2328; }

/* ── Word Count Forecast — Responsive ────────────────────── */
@media (max-width: 640px) {
  .wcf-section { margin-top: 1rem; }
  .wcf-body { padding: 0 12px 14px; }
  .wcf-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wcf-stat-value { font-size: 1rem; }
  .wcf-settings-row { flex-direction: column; align-items: stretch; }
  .wcf-label { flex: none; }
  .wcf-chart-container { min-height: 200px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Daily Goals Dashboard (_dgd)
   ══════════════════════════════════════════════════════════════════════════ */
.dgd-section {
  margin-top: 1.5rem;
  border: 1px solid var(--color-border, #2a3a52);
  border-radius: 10px;
  background: var(--color-bg-card, #1a2233);
  overflow: hidden;
}
.dgd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.dgd-header:hover { background: rgba(255,255,255,0.03); }
.dgd-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text, #e2e8f0);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dgd-icon { font-size: 1.15rem; }
.dgd-chevron {
  font-size: 0.75rem;
  color: var(--color-text-muted, #8896ab);
  transition: transform 0.2s;
}
.dgd-body { padding: 0 18px 18px; }

/* Goal cards grid */
.dgd-goals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.dgd-goal-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.dgd-goal-card:hover {
  border-color: rgba(255,255,255,0.12);
}
.dgd-goal-complete {
  border-color: rgba(16,185,129,0.35);
  box-shadow: 0 0 12px rgba(16,185,129,0.1);
}

/* Progress ring */
.dgd-goal-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dgd-ring-svg { display: block; }
.dgd-ring-progress {
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.dgd-ring-label {
  position: absolute;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
}
.dgd-ring-label-sm { font-size: 0.8rem; }

/* Goal info */
.dgd-goal-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dgd-goal-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text, #e2e8f0);
}
.dgd-goal-values {
  font-size: 0.78rem;
  color: var(--color-text-muted, #8896ab);
}
.dgd-goal-streak {
  font-size: 0.72rem;
  color: #f59e0b;
  font-weight: 600;
}

/* 7-day history dots */
.dgd-goal-history {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}
.dgd-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dgd-dot-green { background: #10b981; }
.dgd-dot-yellow { background: #f59e0b; }
.dgd-dot-gray { background: #3a4a5e; }

/* Overall score */
.dgd-overall {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
.dgd-overall-ring { position: relative; display: flex; align-items: center; justify-content: center; }
.dgd-overall-text {
  font-weight: 700;
  font-size: 0.95rem;
  color: #8b5cf6;
}

/* Toolbar */
.dgd-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.dgd-btn {
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.dgd-btn:hover { opacity: 0.88; }
.dgd-btn-primary { background: #3b82f6; color: #fff; }
.dgd-btn-secondary { background: #2a3a52; color: #e2e8f0; }

/* Settings panel */
.dgd-settings {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  margin-top: 6px;
}
.dgd-settings-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text, #e2e8f0);
  margin-bottom: 10px;
}
.dgd-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.dgd-label {
  flex: 0 0 110px;
  font-size: 0.82rem;
  color: var(--color-text-muted, #8896ab);
}
.dgd-input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--color-text, #e2e8f0);
  font-size: 0.85rem;
}
.dgd-settings-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Confetti animation */
.dgd-confetti {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 20%;
  animation: dgdConfettiFall 1.2s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}
@keyframes dgdConfettiFall {
  0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateY(80px) scale(0.3) rotate(360deg); }
}

/* ── Daily Goals Dashboard — Light theme ───────────────────── */
[data-theme="light"] .dgd-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .dgd-header:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .dgd-title { color: #1f2328; }
[data-theme="light"] .dgd-chevron { color: #656d76; }
[data-theme="light"] .dgd-goal-card { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .dgd-goal-name { color: #1f2328; }
[data-theme="light"] .dgd-goal-values { color: #656d76; }
[data-theme="light"] .dgd-ring-label { color: #1f2328; }
[data-theme="light"] .dgd-dot-gray { background: #d0d7de; }
[data-theme="light"] .dgd-overall { border-color: #d0d7de; }
[data-theme="light"] .dgd-settings { border-color: #d0d7de; }
[data-theme="light"] .dgd-settings-title { color: #1f2328; }
[data-theme="light"] .dgd-input { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .dgd-btn-secondary { background: #d0d7de; color: #1f2328; }
[data-theme="light"] .dgd-ring-svg circle:first-child { stroke: rgba(0,0,0,0.06); }

/* ── Daily Goals Dashboard — Responsive ────────────────────── */
@media (max-width: 640px) {
  .dgd-section { margin-top: 1rem; }
  .dgd-body { padding: 0 12px 14px; }
  .dgd-goals-grid { grid-template-columns: 1fr; gap: 10px; }
  .dgd-goal-card { flex-direction: row; padding: 12px; gap: 12px; }
  .dgd-goal-info { text-align: left; }
  .dgd-settings-row { flex-direction: column; align-items: stretch; }
  .dgd-label { flex: none; }
}

/* ── Export All Stats — Dark theme (default) ───────────────── */
.eas-section {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  margin-top: 1.25rem;
  overflow: hidden;
}
.eas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.eas-header:hover { background: rgba(255,255,255,0.04); }
.eas-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1rem;
  color: #e6edf3;
}
.eas-icon { font-size: 1.15rem; }
.eas-chevron {
  font-size: 0.7rem;
  color: #8b949e;
  transition: transform 0.25s ease;
}
.eas-body {
  padding: 0 18px 18px;
}
.eas-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.eas-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eas-label {
  font-size: 0.85rem;
  color: #8b949e;
  min-width: 80px;
  flex-shrink: 0;
}
.eas-select {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
.eas-select:focus { outline: none; border-color: #58a6ff; }
.eas-input {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  padding: 6px 10px;
  font-size: 0.85rem;
}
.eas-input:focus { outline: none; border-color: #58a6ff; }
.eas-range-sep { color: #8b949e; font-size: 0.85rem; }
.eas-toggles-row { align-items: flex-start; }
.eas-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.eas-toggle-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: #c9d1d9;
  cursor: pointer;
}
.eas-toggle-cb {
  accent-color: #58a6ff;
  cursor: pointer;
}
.eas-preview {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
.eas-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8b949e;
  user-select: none;
}
.eas-preview-header:hover { background: rgba(255,255,255,0.03); }
.eas-preview-chevron {
  font-size: 0.65rem;
  transition: transform 0.25s ease;
}
.eas-preview-content {
  padding: 0 14px 12px;
}
.eas-preview-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #21262d;
  font-size: 0.82rem;
  color: #c9d1d9;
}
.eas-preview-section:last-of-type { border-bottom: none; }
.eas-preview-stats {
  display: flex;
  gap: 12px;
  font-size: 0.78rem;
  color: #8b949e;
}
.eas-preview-meta {
  font-size: 0.78rem;
  color: #8b949e;
}
.eas-size-estimates {
  display: flex;
  gap: 16px;
  padding: 10px 0 2px;
  border-top: 1px solid #21262d;
  margin-top: 6px;
  font-size: 0.78rem;
  color: #58a6ff;
}
.eas-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.eas-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.eas-btn:hover { transform: translateY(-1px); }
.eas-btn:active { transform: translateY(0); }
.eas-btn-primary {
  background: #238636;
  color: #ffffff;
}
.eas-btn-primary:hover { background: #2ea043; }
.eas-btn-secondary {
  background: #21262d;
  color: #c9d1d9;
}
.eas-btn-secondary:hover { background: #30363d; }

/* ── Export All Stats — Light theme ────────────────────────── */
[data-theme="light"] .eas-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .eas-header:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .eas-title { color: #1f2328; }
[data-theme="light"] .eas-chevron { color: #656d76; }
[data-theme="light"] .eas-label { color: #656d76; }
[data-theme="light"] .eas-select { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .eas-input { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .eas-range-sep { color: #656d76; }
[data-theme="light"] .eas-toggle-label { color: #1f2328; }
[data-theme="light"] .eas-preview { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .eas-preview-header { color: #656d76; }
[data-theme="light"] .eas-preview-header:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .eas-preview-section { color: #1f2328; border-color: #d8dee4; }
[data-theme="light"] .eas-preview-stats { color: #656d76; }
[data-theme="light"] .eas-preview-meta { color: #656d76; }
[data-theme="light"] .eas-size-estimates { color: #0969da; border-color: #d8dee4; }
[data-theme="light"] .eas-btn-secondary { background: #d0d7de; color: #1f2328; }
[data-theme="light"] .eas-btn-secondary:hover { background: #bbc0c6; }

/* ── Export All Stats — Responsive ─────────────────────────── */
@media (max-width: 640px) {
  .eas-section { margin-top: 1rem; }
  .eas-body { padding: 0 12px 14px; }
  .eas-control-row { flex-direction: column; align-items: stretch; }
  .eas-label { min-width: unset; }
  .eas-toggles { flex-direction: column; gap: 6px; }
  .eas-preview-stats { flex-direction: column; gap: 2px; }
  .eas-size-estimates { flex-direction: column; gap: 4px; }
  .eas-actions { flex-direction: column; }
  .eas-btn { text-align: center; }
}

/* ── Session Replay Summary ──────────────────────────────── */
.srs-section {
  --srs-accent: #58a6ff;
  --srs-bar: #30363d;
  --srs-muted: #8b949e;
  margin-top: 1.5rem;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  overflow: hidden;
}
.srs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.srs-header:hover { background: rgba(255,255,255,0.03); }
.srs-title { font-weight: 600; font-size: 0.95rem; color: #e6edf3; }
.srs-chevron { color: #8b949e; transition: transform 0.2s; font-size: 0.75rem; transform: rotate(180deg); }
.srs-body { padding: 0 16px 16px; }
.srs-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.srs-filter-label { color: #8b949e; font-size: 0.82rem; }
.srs-filter-select {
  background: #161b22;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.82rem;
}
.srs-peak-row { display: flex; gap: 10px; margin-bottom: 14px; }
.srs-peak-card {
  flex: 1;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 10px 12px;
  text-align: center;
}
.srs-peak-label { font-size: 0.72rem; color: #8b949e; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.srs-peak-value { font-size: 1.05rem; font-weight: 600; color: #e6edf3; }
.srs-chart-wrap { margin-bottom: 14px; overflow-x: auto; }
.srs-chart-title { font-size: 0.78rem; color: #8b949e; margin-bottom: 6px; }
.srs-hourly-chart { display: block; }
.srs-list { display: flex; flex-direction: column; gap: 6px; }
.srs-item { background: #161b22; border: 1px solid #30363d; border-radius: 6px; overflow: hidden; }
.srs-item-compared { border-color: #58a6ff; }
.srs-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}
.srs-item-header:hover { background: rgba(255,255,255,0.02); }
.srs-item-date { font-size: 0.82rem; color: #e6edf3; white-space: nowrap; min-width: 130px; }
.srs-item-meta { display: flex; gap: 10px; flex: 1; font-size: 0.78rem; color: #8b949e; align-items: center; flex-wrap: wrap; }
.srs-item-chevron { color: #8b949e; font-size: 0.7rem; }
.srs-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.6;
}
.srs-badge-excellent { background: rgba(63,185,80,0.15); color: #3fb950; }
.srs-badge-good { background: rgba(88,166,255,0.15); color: #58a6ff; }
.srs-badge-average { background: rgba(210,153,34,0.15); color: #d2992a; }
.srs-badge-poor { background: rgba(248,81,73,0.15); color: #f85149; }
.srs-item-detail { padding: 0 12px 12px; border-top: 1px solid #21262d; }
.srs-sparkline-wrap { margin: 10px 0; }
.srs-sparkline { display: block; }
.srs-detail-label { font-size: 0.72rem; color: #8b949e; margin-bottom: 4px; }
.srs-detail-stats { display: flex; gap: 16px; margin-bottom: 10px; font-size: 0.82rem; color: #c9d1d9; flex-wrap: wrap; }
.srs-stat-label { color: #8b949e; }
.srs-quality-breakdown { margin-bottom: 10px; }
.srs-qb-row { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: #c9d1d9; margin-bottom: 4px; }
.srs-qb-row > span:first-child { width: 80px; color: #8b949e; flex-shrink: 0; }
.srs-qb-row > span:last-child { width: 28px; text-align: right; flex-shrink: 0; }
.srs-qb-bar { flex: 1; height: 6px; background: #21262d; border-radius: 3px; overflow: hidden; }
.srs-qb-fill { height: 100%; background: var(--srs-accent); border-radius: 3px; transition: width 0.3s; }
.srs-item-actions { display: flex; gap: 8px; }
.srs-btn-compare, .srs-btn-delete {
  padding: 4px 10px;
  border: 1px solid #30363d;
  border-radius: 5px;
  background: #21262d;
  color: #c9d1d9;
  font-size: 0.75rem;
  cursor: pointer;
}
.srs-btn-compare:hover { border-color: #58a6ff; color: #58a6ff; }
.srs-btn-delete:hover { border-color: #f85149; color: #f85149; }
.srs-compare { margin-bottom: 14px; background: #161b22; border: 1px solid #58a6ff; border-radius: 6px; padding: 12px; }
.srs-compare-title { font-size: 0.82rem; font-weight: 600; color: #e6edf3; margin-bottom: 8px; }
.srs-compare-table { width: 100%; font-size: 0.78rem; border-collapse: collapse; color: #c9d1d9; }
.srs-compare-table th { text-align: left; padding: 4px 8px; color: #8b949e; border-bottom: 1px solid #21262d; font-weight: 500; }
.srs-compare-table td { padding: 4px 8px; border-bottom: 1px solid #21262d; }
.srs-empty { text-align: center; color: #8b949e; padding: 24px 0; font-size: 0.85rem; }

/* ── Session Replay Summary — Light theme ────────────────── */
[data-theme="light"] .srs-section { background: #ffffff; border-color: #d0d7de; --srs-accent: #0969da; --srs-bar: #d0d7de; --srs-muted: #656d76; }
[data-theme="light"] .srs-header:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .srs-title { color: #1f2328; }
[data-theme="light"] .srs-chevron { color: #656d76; }
[data-theme="light"] .srs-filter-select { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .srs-peak-card { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .srs-peak-value { color: #1f2328; }
[data-theme="light"] .srs-item { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .srs-item-compared { border-color: #0969da; }
[data-theme="light"] .srs-item-header:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .srs-item-date { color: #1f2328; }
[data-theme="light"] .srs-item-meta { color: #656d76; }
[data-theme="light"] .srs-item-detail { border-color: #d8dee4; }
[data-theme="light"] .srs-detail-stats { color: #1f2328; }
[data-theme="light"] .srs-qb-row { color: #1f2328; }
[data-theme="light"] .srs-qb-bar { background: #d0d7de; }
[data-theme="light"] .srs-btn-compare, [data-theme="light"] .srs-btn-delete { background: #d0d7de; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .srs-compare { background: #f6f8fa; border-color: #0969da; }
[data-theme="light"] .srs-compare-title { color: #1f2328; }
[data-theme="light"] .srs-compare-table { color: #1f2328; }
[data-theme="light"] .srs-compare-table th { color: #656d76; border-color: #d8dee4; }
[data-theme="light"] .srs-compare-table td { border-color: #d8dee4; }

/* ── Session Replay Summary — Responsive ─────────────────── */
@media (max-width: 640px) {
  .srs-section { margin-top: 1rem; }
  .srs-body { padding: 0 12px 14px; }
  .srs-peak-row { flex-direction: column; }
  .srs-item-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .srs-item-meta { gap: 6px; }
  .srs-detail-stats { flex-direction: column; gap: 2px; }
  .srs-compare-table { font-size: 0.72rem; }
}

/* ── Distraction Log — Dark theme (default) ────────────────────────────── */
.dl-section { margin-top: 1.5rem; background: #161b22; border: 1px solid #21262d; border-radius: 10px; overflow: hidden; }
.dl-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; user-select: none; }
.dl-header:hover { background: rgba(255,255,255,0.03); }
.dl-title { font-weight: 700; font-size: 1rem; color: #e6edf3; }
.dl-chevron { color: #8b949e; font-size: 0.7rem; transition: transform 0.25s; }
.dl-body { padding: 0 18px 18px; }
.dl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dl-btn { border: none; border-radius: 6px; padding: 6px 14px; font-size: 0.8rem; cursor: pointer; font-weight: 600; transition: background 0.15s; }
.dl-btn-primary { background: #238636; color: #fff; }
.dl-btn-primary:hover { background: #2ea043; }
.dl-btn-secondary { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; }
.dl-btn-secondary:hover { background: #30363d; }
.dl-filters { display: flex; gap: 4px; margin-left: auto; }
.dl-filter-btn { background: transparent; border: 1px solid #30363d; color: #8b949e; border-radius: 5px; padding: 4px 10px; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; }
.dl-filter-btn:hover { border-color: #58a6ff; color: #58a6ff; }
.dl-filter-active { background: #0d1117; border-color: #58a6ff; color: #58a6ff; }
.dl-form { background: #0d1117; border: 1px solid #30363d; border-radius: 8px; padding: 14px; margin-bottom: 14px; }
.dl-form-row { margin-bottom: 10px; }
.dl-form-label { display: block; font-size: 0.75rem; color: #8b949e; margin-bottom: 4px; font-weight: 500; }
.dl-form-select, .dl-form-input { width: 100%; background: #161b22; border: 1px solid #30363d; border-radius: 6px; padding: 6px 10px; color: #c9d1d9; font-size: 0.82rem; box-sizing: border-box; }
.dl-form-select:focus, .dl-form-input:focus { border-color: #58a6ff; outline: none; }
.dl-quick-row { display: flex; gap: 6px; flex-wrap: wrap; }
.dl-quick-btn { background: #21262d; border: 1px solid #30363d; color: #c9d1d9; border-radius: 5px; padding: 4px 12px; font-size: 0.78rem; cursor: pointer; transition: all 0.15s; }
.dl-quick-btn:hover { border-color: #58a6ff; color: #58a6ff; }
.dl-form-actions { display: flex; gap: 8px; margin-top: 12px; }
.dl-summary-row { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dl-stat-card { flex: 1; min-width: 100px; background: #0d1117; border: 1px solid #21262d; border-radius: 8px; padding: 12px; text-align: center; }
.dl-stat-value { font-size: 1.4rem; font-weight: 700; color: #e6edf3; }
.dl-stat-label { font-size: 0.72rem; color: #8b949e; margin-top: 2px; }
.dl-stat-impact .dl-stat-value { color: #f85149; }
.dl-charts-row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.dl-chart-panel { flex: 1; min-width: 200px; background: #0d1117; border: 1px solid #21262d; border-radius: 8px; padding: 14px; }
.dl-chart-title { font-size: 0.78rem; font-weight: 600; color: #8b949e; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.dl-donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dl-donut-svg { display: block; transform: rotate(-90deg); }
.dl-donut-svg text { transform: rotate(90deg); transform-origin: center; }
.dl-donut-empty { color: #484f58; font-size: 0.82rem; text-align: center; padding: 20px 0; }
.dl-section { --dl-donut-bg: #1e293b; --dl-text: #e2e8f0; }
.dl-legend { display: flex; flex-direction: column; gap: 4px; }
.dl-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: #c9d1d9; }
.dl-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dl-legend-val { color: #8b949e; margin-left: 2px; }
.dl-trend-chart { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.dl-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; }
.dl-trend-val { font-size: 0.68rem; color: #8b949e; }
.dl-trend-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.dl-trend-bar { width: 100%; background: #58a6ff; border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.3s; }
.dl-trend-label { font-size: 0.65rem; color: #484f58; }
.dl-entries-title { font-size: 0.78rem; font-weight: 600; color: #8b949e; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.dl-empty { text-align: center; color: #484f58; padding: 20px 0; font-size: 0.82rem; }
.dl-entry { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: #0d1117; border: 1px solid #21262d; border-radius: 6px; margin-bottom: 6px; gap: 8px; }
.dl-entry-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dl-entry-cat { font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; color: #fff; font-weight: 600; white-space: nowrap; }
.dl-entry-dur { font-size: 0.8rem; color: #e6edf3; font-weight: 600; white-space: nowrap; }
.dl-entry-notes { font-size: 0.76rem; color: #8b949e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.dl-entry-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dl-entry-time { font-size: 0.7rem; color: #484f58; white-space: nowrap; }
.dl-entry-del { background: none; border: none; color: #f85149; font-size: 1rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1; }
.dl-entry-del:hover { background: rgba(248,81,73,0.15); }

/* ── Distraction Log — Light theme ─────────────────────────────────────── */
[data-theme="light"] .dl-section { background: #ffffff; border-color: #d0d7de; }
[data-theme="light"] .dl-header:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .dl-title { color: #1f2328; }
[data-theme="light"] .dl-chevron { color: #656d76; }
[data-theme="light"] .dl-btn-secondary { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .dl-filter-btn { border-color: #d0d7de; color: #656d76; }
[data-theme="light"] .dl-filter-btn:hover { border-color: #0969da; color: #0969da; }
[data-theme="light"] .dl-filter-active { background: #f6f8fa; border-color: #0969da; color: #0969da; }
[data-theme="light"] .dl-form { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .dl-form-select, [data-theme="light"] .dl-form-input { background: #fff; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .dl-form-select:focus, [data-theme="light"] .dl-form-input:focus { border-color: #0969da; }
[data-theme="light"] .dl-quick-btn { background: #fff; border-color: #d0d7de; color: #1f2328; }
[data-theme="light"] .dl-quick-btn:hover { border-color: #0969da; color: #0969da; }
[data-theme="light"] .dl-stat-card { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .dl-stat-value { color: #1f2328; }
[data-theme="light"] .dl-stat-impact .dl-stat-value { color: #cf222e; }
[data-theme="light"] .dl-chart-panel { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .dl-chart-title { color: #656d76; }
[data-theme="light"] .dl-legend-item { color: #1f2328; }
[data-theme="light"] .dl-legend-val { color: #656d76; }
[data-theme="light"] .dl-trend-bar { background: #0969da; }
[data-theme="light"] .dl-trend-label { color: #656d76; }
[data-theme="light"] .dl-entry { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .dl-entry-dur { color: #1f2328; }
[data-theme="light"] .dl-entry-notes { color: #656d76; }
[data-theme="light"] .dl-entry-time { color: #656d76; }
[data-theme="light"] .dl-entry-del { color: #cf222e; }
[data-theme="light"] .dl-entry-del:hover { background: rgba(207,34,46,0.1); }
[data-theme="light"] .dl-donut-empty { color: #656d76; }
[data-theme="light"] .dl-empty { color: #656d76; }
[data-theme="light"] .dl-section { --dl-donut-bg: #e1e4e8; --dl-text: #1f2328; }

/* ── Distraction Log — Responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
  .dl-section { margin-top: 1rem; }
  .dl-body { padding: 0 12px 14px; }
  .dl-toolbar { flex-direction: column; align-items: stretch; }
  .dl-filters { margin-left: 0; justify-content: center; }
  .dl-summary-row { flex-direction: column; }
  .dl-charts-row { flex-direction: column; }
  .dl-donut-wrap { flex-direction: column; align-items: center; }
  .dl-entry { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dl-entry-right { align-self: flex-end; }
  .dl-entry-notes { max-width: 100%; }
}

/* ── Vocabulary Growth Tracker ──────────────────────────────────────────── */

/* Floating trigger button */
.vgt-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-sidebar);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #0d9488, #06d6a0);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(6, 214, 160, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.vgt-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(6, 214, 160, 0.5);
}

/* Panel overlay */
.vgt-panel {
  position: fixed;
  top: 0;
  right: -480px;
  width: 460px;
  max-width: 96vw;
  height: 100vh;
  z-index: var(--z-sidebar);
  background: #111827;
  border-left: 1px solid #1e3a4a;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.vgt-panel.vgt-visible {
  right: 0;
}

/* Panel header */
.vgt-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #1e3a4a;
  background: #0d1320;
  flex-shrink: 0;
}
.vgt-panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: #06d6a0;
  letter-spacing: 0.02em;
}
.vgt-panel-close {
  background: none;
  border: none;
  color: #8896ab;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.vgt-panel-close:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Scrollable body */
.vgt-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
}

/* Stat cards row */
.vgt-stats-row {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.vgt-stat-card {
  flex: 1;
  background: #1a2332;
  border: 1px solid #1e3a4a;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.vgt-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #06d6a0;
  line-height: 1.2;
}
.vgt-stat-label {
  font-size: 0.7rem;
  color: #8896ab;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Chart sections */
.vgt-chart-section {
  margin-bottom: 16px;
}
.vgt-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vgt-chart-wrap {
  background: #0f1924;
  border: 1px solid #1e3a4a;
  border-radius: 8px;
  padding: 12px 8px;
  overflow: hidden;
}
.vgt-chart-svg,
.vgt-dist-svg {
  width: 100%;
  height: auto;
  color: #8896ab;
}
.vgt-chart-label {
  font-size: 9px;
  fill: #5a6a80;
}
.vgt-dist-val {
  font-size: 11px;
  font-weight: 700;
  fill: #cbd5e1;
}
.vgt-dist-label {
  font-size: 9px;
  fill: #5a6a80;
}
.vgt-chart-empty {
  text-align: center;
  color: #5a6a80;
  font-size: 0.82rem;
  padding: 22px 10px;
}

/* Recent words list */
.vgt-word-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vgt-word-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #1a2332;
  border: 1px solid #1e3a4a;
  border-radius: 6px;
  font-size: 0.82rem;
}
.vgt-word-text {
  color: #e2e8f0;
  font-weight: 500;
}
.vgt-word-syl {
  color: #0891b2;
  font-size: 0.72rem;
  font-weight: 600;
}
.vgt-empty-msg {
  color: #5a6a80;
  justify-content: center;
  font-style: italic;
}

/* Action buttons */
.vgt-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.vgt-btn {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.vgt-btn:active { transform: scale(0.97); }
.vgt-btn-snapshot {
  background: linear-gradient(135deg, #0d9488, #06d6a0);
  color: #fff;
}
.vgt-btn-snapshot:hover { background: linear-gradient(135deg, #0f766e, #059669); }
.vgt-btn-export {
  background: #1e3a4a;
  color: #06d6a0;
  border: 1px solid #0d9488;
}
.vgt-btn-export:hover { background: #1a3040; }

/* ── Vocabulary Growth Tracker — Light theme ────────────────────────────── */
[data-theme="light"] .vgt-trigger {
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.3);
}
[data-theme="light"] .vgt-panel {
  background: #ffffff;
  border-left-color: #d0d7de;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .vgt-panel-header {
  background: #f6f8fa;
  border-bottom-color: #d0d7de;
}
[data-theme="light"] .vgt-panel-title { color: #0d9488; }
[data-theme="light"] .vgt-panel-close { color: #656d76; }
[data-theme="light"] .vgt-panel-close:hover { color: #cf222e; background: rgba(207,34,46,0.08); }
[data-theme="light"] .vgt-stat-card { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .vgt-stat-value { color: #0d9488; }
[data-theme="light"] .vgt-stat-label { color: #656d76; }
[data-theme="light"] .vgt-section-title { color: #1f2328; }
[data-theme="light"] .vgt-chart-wrap { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .vgt-chart-svg,
[data-theme="light"] .vgt-dist-svg { color: #656d76; }
[data-theme="light"] .vgt-chart-label { fill: #656d76; }
[data-theme="light"] .vgt-dist-val { fill: #1f2328; }
[data-theme="light"] .vgt-dist-label { fill: #656d76; }
[data-theme="light"] .vgt-chart-empty { color: #656d76; }
[data-theme="light"] .vgt-word-item { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .vgt-word-text { color: #1f2328; }
[data-theme="light"] .vgt-word-syl { color: #0891b2; }
[data-theme="light"] .vgt-empty-msg { color: #656d76; }
[data-theme="light"] .vgt-btn-snapshot { background: linear-gradient(135deg, #0d9488, #06d6a0); color: #fff; }
[data-theme="light"] .vgt-btn-export { background: #f6f8fa; color: #0d9488; border-color: #0d9488; }
[data-theme="light"] .vgt-btn-export:hover { background: #eef2f6; }

/* ── Vocabulary Growth Tracker — Responsive ─────────────────────────────── */
@media (max-width: 640px) {
  .vgt-panel { width: 100vw; max-width: 100vw; }
  .vgt-trigger { bottom: 16px; right: 16px; width: 42px; height: 42px; }
  .vgt-stats-row { flex-direction: column; }
  .vgt-actions { flex-direction: column; }
}

/* ── Writing Heatmap Calendar ─────────────────────────────────────────── */

/* Trigger button */
.whc-trigger {
  position: fixed;
  bottom: 24px;
  right: 180px;
  z-index: var(--z-popover);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #059669, #34d399);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.whc-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(5, 150, 105, 0.55);
}

/* Panel */
.whc-panel {
  position: fixed;
  bottom: 80px;
  right: 24px;
  z-index: var(--z-popover);
  width: 860px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 120px);
  background: #151921;
  border: 1px solid #2a3a52;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header */
.whc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #2a3a52;
}
.whc-title {
  font-size: 1rem;
  font-weight: 700;
  color: #34d399;
}
.whc-close {
  background: none;
  border: none;
  color: #8896ab;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.whc-close:hover { color: #e2e8f0; }

/* Year navigation */
.whc-year-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 20px 6px;
}
.whc-year-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e2e8f0;
  min-width: 60px;
  text-align: center;
}
.whc-year-btn {
  background: none;
  border: 1px solid #2a3a52;
  color: #8896ab;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: background 0.15s, color 0.15s;
}
.whc-year-btn:hover { background: #1e293b; color: #34d399; }

/* Calendar wrap */
.whc-calendar-wrap {
  padding: 12px 20px;
  overflow-x: auto;
  display: flex;
  justify-content: center;
}
.whc-svg {
  display: block;
}

/* SVG cell styling */
.whc-cell {
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 1;
  transition: stroke 0.15s;
  cursor: pointer;
}
.whc-cell:hover {
  stroke: #34d399;
  stroke-width: 2;
}

/* SVG text labels */
.whc-day-label {
  font-size: 10px;
  fill: #5a6a80;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.whc-month-label {
  font-size: 10px;
  fill: #8896ab;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Legend */
.whc-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 20px 10px;
}
.whc-legend-label {
  font-size: 0.7rem;
  color: #5a6a80;
  margin: 0 4px;
}
.whc-legend-box {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  display: inline-block;
}

/* Stats row */
.whc-stats-row {
  display: flex;
  gap: 10px;
  padding: 6px 20px 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.whc-stat-card {
  background: #1a2233;
  border: 1px solid #2a3a52;
  border-radius: 10px;
  padding: 10px 16px;
  text-align: center;
  flex: 1 1 0;
  min-width: 120px;
}
.whc-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #34d399;
}
.whc-stat-label {
  font-size: 0.7rem;
  color: #8896ab;
  margin-top: 2px;
}

/* Actions */
.whc-actions {
  display: flex;
  gap: 10px;
  padding: 6px 20px 14px;
  justify-content: center;
}
.whc-btn-record {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #059669, #34d399);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.15s;
}
.whc-btn-record:hover { opacity: 0.85; }
.whc-btn-export {
  padding: 8px 20px;
  border: 1px solid #059669;
  border-radius: 8px;
  background: transparent;
  color: #34d399;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.whc-btn-export:hover { background: rgba(5, 150, 105, 0.1); }

/* Tooltip */
.whc-tooltip {
  position: absolute;
  background: #0f1219;
  color: #e2e8f0;
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #2a3a52;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ── Writing Heatmap Calendar — Light theme ───────────────────────────── */
[data-theme="light"] .whc-trigger {
  background: linear-gradient(135deg, #059669, #34d399);
  color: #fff;
}
[data-theme="light"] .whc-panel {
  background: #ffffff;
  border-color: #d0d7de;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .whc-header {
  border-bottom-color: #d0d7de;
}
[data-theme="light"] .whc-title { color: #059669; }
[data-theme="light"] .whc-close { color: #656d76; }
[data-theme="light"] .whc-close:hover { color: #1f2328; }
[data-theme="light"] .whc-year-label { color: #1f2328; }
[data-theme="light"] .whc-year-btn { border-color: #d0d7de; color: #656d76; }
[data-theme="light"] .whc-year-btn:hover { background: #f6f8fa; color: #059669; }
[data-theme="light"] .whc-day-label { fill: #656d76; }
[data-theme="light"] .whc-month-label { fill: #656d76; }
[data-theme="light"] .whc-legend-label { color: #656d76; }
[data-theme="light"] .whc-stat-card { background: #f6f8fa; border-color: #d0d7de; }
[data-theme="light"] .whc-stat-value { color: #059669; }
[data-theme="light"] .whc-stat-label { color: #656d76; }
[data-theme="light"] .whc-btn-record { background: linear-gradient(135deg, #059669, #34d399); color: #fff; }
[data-theme="light"] .whc-btn-export { background: #f6f8fa; color: #059669; border-color: #059669; }
[data-theme="light"] .whc-btn-export:hover { background: #eef2f6; }
[data-theme="light"] .whc-tooltip { background: #ffffff; color: #1f2328; border-color: #d0d7de; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
[data-theme="light"] .whc-cell { stroke: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .whc-cell:hover { stroke: #059669; }

/* ── Writing Heatmap Calendar — Responsive ────────────────────────────── */
@media (max-width: 640px) {
  .whc-panel { width: 100vw; max-width: 100vw; }
  .whc-trigger { bottom: 16px; right: 130px; width: 42px; height: 42px; }
  .whc-stats-row { flex-direction: column; }
  .whc-actions { flex-direction: column; }
}

/* ── Session Comparison Chart ──────────────────────────────────────────── */
.scc-trigger {
  position: fixed;
  bottom: 24px;
  right: 190px;
  z-index: var(--z-sidebar);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.scc-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5);
}

.scc-panel {
  position: fixed;
  top: 0;
  right: -520px;
  width: 500px;
  max-width: 96vw;
  height: 100vh;
  z-index: var(--z-sidebar);
  background: #0f172a;
  border-left: 1px solid #2a3a52;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.scc-panel.scc-visible {
  right: 0;
}

.scc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #2a3a52;
  flex-shrink: 0;
}
.scc-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #e2e8f0;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.scc-close-btn {
  background: none;
  border: none;
  color: #8896ab;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
  transition: color 0.2s;
}
.scc-close-btn:hover { color: #e2e8f0; }

.scc-picker {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #1e293b;
}
.scc-picker-label {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: #8896ab;
}
.scc-session-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.scc-session-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.scc-session-row:hover { background: #1e293b; }

.scc-checkbox {
  accent-color: #6366f1;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.scc-session-info {
  font-size: 0.82rem;
  color: #c8d1dc;
}

.scc-compare-btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.scc-compare-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.scc-chart-area {
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: center;
}
.scc-hint {
  color: #8896ab;
  font-size: 0.85rem;
  text-align: center;
  padding: 2rem 0;
}

.scc-svg { display: block; }
.scc-grid-line { stroke: #2a3a52; stroke-width: 0.5; }
.scc-bar { transition: opacity 0.2s; }
.scc-bar:hover { opacity: 0.8; }
.scc-bar-label { fill: #c8d1dc; font-size: 9px; }
.scc-metric-label { fill: #8896ab; font-size: 11px; }
.scc-legend-text { fill: #c8d1dc; font-size: 11px; }

.scc-table-area {
  padding: 0 1.25rem 1.5rem;
}
.scc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.scc-table th,
.scc-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid #1e293b;
  color: #c8d1dc;
}
.scc-table th {
  font-weight: 600;
  color: #818cf8;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.scc-metric-name { font-weight: 500; color: #e2e8f0; }
.scc-best-value {
  color: #6366f1;
  font-weight: 700;
}
.scc-winner-cell { text-align: center; }
.scc-winner-badge {
  display: inline-block;
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Session Comparison — Light Theme ──────────────────────────────────── */
[data-theme="light"] .scc-panel { background: #ffffff; border-left-color: #d0d7de; box-shadow: -4px 0 24px rgba(0,0,0,0.08); }
[data-theme="light"] .scc-header { border-bottom-color: #d0d7de; }
[data-theme="light"] .scc-close-btn { color: #656d76; }
[data-theme="light"] .scc-close-btn:hover { color: #1f2328; }
[data-theme="light"] .scc-picker { border-bottom-color: #e8ecf0; }
[data-theme="light"] .scc-picker-label { color: #656d76; }
[data-theme="light"] .scc-session-row:hover { background: #f6f8fa; }
[data-theme="light"] .scc-session-info { color: #1f2328; }
[data-theme="light"] .scc-hint { color: #656d76; }
[data-theme="light"] .scc-grid-line { stroke: #d0d7de; }
[data-theme="light"] .scc-bar-label { fill: #1f2328; }
[data-theme="light"] .scc-metric-label { fill: #656d76; }
[data-theme="light"] .scc-legend-text { fill: #1f2328; }
[data-theme="light"] .scc-table th,
[data-theme="light"] .scc-table td { border-bottom-color: #e8ecf0; color: #1f2328; }
[data-theme="light"] .scc-table th { color: #6366f1; }
[data-theme="light"] .scc-metric-name { color: #1f2328; }
[data-theme="light"] .scc-winner-badge { background: rgba(99,102,241,0.1); color: #6366f1; border-color: rgba(99,102,241,0.2); }

/* ── Session Comparison — Responsive ───────────────────────────────────── */
@media (max-width: 640px) {
  .scc-panel { width: 100vw; max-width: 100vw; }
  .scc-trigger { bottom: 16px; right: 190px; width: 42px; height: 42px; }
  .scc-table { font-size: 0.75rem; }
  .scc-table th, .scc-table td { padding: 0.35rem 0.4rem; }
}