/* ========== Admin Panel Styles ========== */

/* ===== Design Tokens — Light (default, inherited from :root) ===== */
/* Overrides / additions specific to admin panel */
:root {
  /* Spacing scale (4px base, 8px grid for major) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Typography scale */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 30px;

  /* Font stacks */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Microsoft JhengHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Courier New', monospace;

  /* Semantic status colors (light) */
  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.1);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.1);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.1);
  --info: #2563eb;
  --info-soft: rgba(37, 99, 235, 0.1);

  /* Neutral palette — aligned with redesign.css but admin-scoped names */
  --bg-app: var(--bg);
  --bg-surface: var(--bg-secondary);
  --bg-muted: var(--bg-tertiary);
  --border-default: var(--border);
  --border-subtle: var(--border-subtle);
  --text-primary: var(--text);
  --text-secondary: var(--text-secondary);
  --text-tertiary: var(--text-tertiary);
  --text-muted: var(--text-muted);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* Content max-width */
  --admin-content-max: 1600px;
}

/* Dark theme overrides for admin-specific tokens */
[data-theme="dark"] {
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.15);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.15);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.15);
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Global: scrollbar, selection, motion
   ============================================================ */
.admin-app *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.admin-app *::-webkit-scrollbar-track {
  background: transparent;
}
.admin-app *::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
}
.admin-app *::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
.admin-app * {
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-strong, #0891b2);
}
[data-theme="dark"] ::selection {
  background: rgba(6, 182, 212, 0.25);
  color: var(--text-inverse, #fff);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.admin-app {
  min-height: 100vh;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
}

.admin-layout {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  transition: transform 0.25s var(--ease, ease);
}
[data-theme="dark"] .admin-sidebar {
  background: var(--bg-card, #0f0f0f);
  border-right-color: var(--border-default);
}
.admin-sidebar-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 56px;
  box-sizing: border-box;
}
.admin-sidebar-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--logo-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-sidebar-logo svg { width: 20px; height: 20px; color: var(--logo-primary, #fff); }
.admin-sidebar-title {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.admin-sidebar-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

.admin-sidebar-nav {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-nav-group {
  margin-top: var(--space-4);
}
.admin-nav-group:first-child {
  margin-top: 0;
}
.admin-nav-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3) var(--space-1);
  line-height: 1;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  height: 40px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  position: relative;
  line-height: 1;
  font-weight: 500;
}
.admin-nav-item:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.admin-nav-item:hover svg {
  color: var(--accent);
}
.admin-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.admin-nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.admin-nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.75;
  color: currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
.admin-nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: var(--text-inverse, #fff);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

.admin-sidebar-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.admin-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1);
}
.admin-sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-inverse, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
}
.admin-sidebar-user-info {
  flex: 1;
  min-width: 0;
}
.admin-sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-sidebar-user-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.3;
}
.admin-sidebar-footer a,
.admin-sidebar-footer button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  height: 36px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  text-decoration: none;
  font-weight: 500;
}
.admin-sidebar-footer a:hover,
.admin-sidebar-footer button:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.admin-sidebar-footer svg { width: 16px; height: 16px; }

/* ---- Main content ---- */
.admin-main {
  flex: 1;
  margin-left: 240px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-topbar {
  height: 56px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--bg-app);
  position: sticky;
  top: 0;
  z-index: 30;
}
.admin-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}
.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
.admin-breadcrumb a,
.admin-breadcrumb span {
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  font-size: var(--text-sm);
}
.admin-breadcrumb a:hover {
  color: var(--accent);
}
.admin-breadcrumb .admin-breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
}
.admin-breadcrumb-separator {
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.admin-mobile-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.admin-mobile-menu-btn:hover { background: var(--bg-muted); }
.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.admin-icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.admin-icon-btn:hover {
  background: var(--bg-muted);
  border-color: var(--border-default);
}
.admin-icon-btn svg { width: 16px; height: 16px; }

.admin-user-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px 4px 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  height: 36px;
  box-sizing: border-box;
  color: var(--text-primary);
}
.admin-user-chip:hover { background: var(--bg-muted); }
.admin-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-inverse, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
}

/* ---- Language switcher dropdown ---- */
.admin-lang-switcher {
  position: relative;
}
.admin-lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  z-index: 100;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.admin-lang-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.admin-lang-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: left;
  transition: background 0.15s ease;
  font-family: inherit;
  font-weight: 500;
}
.admin-lang-option:hover { background: var(--bg-muted); }
.admin-lang-option.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.admin-lang-option.active::before {
  content: '✓';
  margin-right: var(--space-2);
  font-size: var(--text-xs);
}

.admin-content {
  flex: 1;
  padding: var(--space-6);
  max-width: var(--admin-content-max);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---- Dashboard stats ---- */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.dashboard-card,
.stat-card,
.biz-kpi-card,
.traffic-card,
.admin-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dashboard-card:hover,
.stat-card:hover,
.biz-kpi-card:hover,
.traffic-card:hover {
  border-color: var(--border-strong);
}

.stat-card {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.stat-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.stat-icon.purple { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.stat-icon.green { background: var(--success-soft); color: var(--success); }
.stat-icon.amber { background: var(--warning-soft); color: var(--warning); }
.stat-icon.cyan { background: var(--accent-soft); color: var(--accent); }
.stat-icon.indigo { background: var(--info-soft); color: var(--info); }
.stat-icon.rose { background: var(--danger-soft); color: var(--danger); }
.stat-icon.emerald { background: var(--success-soft); color: var(--success); }
.stat-icon svg { width: 20px; height: 20px; }
.stat-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.admin-grid-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-6);
  align-items: stretch;
}
.admin-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* ---- Panel card (dashboard section) ---- */
.admin-panel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.admin-panel-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.admin-panel-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.admin-panel-body { padding: var(--space-5);
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- Admin table ---- */
.admin-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---- Unified Page Header ---- */
.admin-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.admin-page-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.admin-page-heading {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.admin-page-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}
.admin-page-count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.admin-page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ---- Unified Toolbar ---- */
.admin-toolbar,
.admin-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--bg-card);
}
.admin-toolbar {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.admin-toolbar-left,
.admin-toolbar-right,
.admin-table-actions-left,
.admin-table-actions-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
}
.admin-table-actions-left {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

/* ---- Unified Search Input ---- */
.admin-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}
.admin-search-wrap svg {
  position: absolute;
  left: var(--space-3);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}
.admin-search-input {
  width: 100%;
  padding: 0 var(--space-3) 0 36px;
  height: 36px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.admin-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.admin-search-input::placeholder {
  color: var(--text-muted);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th {
  text-align: left;
  padding: 0 var(--space-4);
  height: 40px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
.admin-table th.right { text-align: right; }
.admin-table td {
  padding: 0 var(--space-4);
  height: 48px;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  vertical-align: middle;
}
.admin-table td.right { text-align: right; }
.admin-table tbody tr {
  transition: background 0.15s ease;
}
.admin-table tbody tr:hover {
  background: var(--bg-muted);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
/* No zebra striping — cleaner, more modern */

.admin-table-head th {
  /* legacy class, unified with main .admin-table th */
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
}
.admin-table-row:hover {
  background: var(--bg-muted);
}
.admin-table-row.kbd-active {
  background: var(--accent-soft);
}

.admin-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.admin-tool-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.admin-tool-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--text-secondary);
}
.admin-tool-name {
  font-weight: 500;
  color: var(--text-primary);
}
.admin-tool-slug {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ---- Unified Badge System ---- */
.badge,
.status-badge,
.source-badge,
.price-badge,
.tab-badge,
.panel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-neutral,
.status-badge.draft,
.status-badge.pending,
.source-badge.source-custom,
.tab-badge,
.panel-count {
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.badge-success,
.status-badge.published,
.status-badge.approved,
.status-badge.active,
.price-badge.free {
  background: var(--success-soft);
  color: var(--success);
}

.badge-warning,
.status-badge.hidden,
.source-badge.source-preset-modified {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-danger,
.status-badge.rejected,
.status-badge.banned {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-info {
  background: var(--info-soft);
  color: var(--info);
}

.badge-accent,
.price-badge.paid,
.source-badge.source-preset {
  background: var(--accent-soft);
  color: var(--accent);
}

.row-actions {
  display: flex;
  gap: var(--space-1);
  justify-content: flex-end;
}
.btn-icon-ghost {
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
  padding: 0;
}
.btn-icon-ghost:hover {
  background: var(--bg-muted);
  color: var(--accent);
  border-color: var(--border-default);
}
.btn-icon-ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-icon-ghost svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
  color: currentColor;
}
.row-actions .btn {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
}

/* ---- Tabs ---- */
.admin-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-tertiary);
  padding: 3px;
  border-radius: var(--radius-md);
  width: fit-content;
}
.admin-tab-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-tab-btn:hover { color: var(--text); }
.admin-tab-btn.active {
  background: var(--bg-secondary);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.admin-tab-btn .tab-badge {
  margin-left: 6px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}
.admin-tab-btn.active .tab-badge {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* ---- Login page ---- */
.admin-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-app);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}
.admin-login-page::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  pointer-events: none;
}
.admin-login-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
  position: relative;
  z-index: 1;
  animation: loginCardIn var(--dur-slow) var(--ease-out);
}
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.admin-login-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
.admin-login-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.admin-login-logo svg { width: 28px; height: 28px; }
.admin-login-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 var(--space-1);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.admin-login-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

.admin-login-error {
  padding: var(--space-3) var(--space-4);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin-login-footer {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.admin-login-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.admin-login-footer a:hover { text-decoration: underline; }

/* ---- Settings page ---- */
.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  overflow: hidden;
}
.settings-section-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
}
.settings-section-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
.settings-section-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: var(--space-1) 0 0;
  line-height: 1.5;
}
.settings-section-body {
  padding: var(--space-5);
}
.setting-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-default);
}
.setting-row:last-child { border-bottom: none; }
.setting-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  padding-top: var(--space-2);
}
.setting-hint {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  display: block;
  line-height: 1.5;
}

.setting-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--bg-tertiary);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s ease;
  border: 1px solid var(--border);
}
.setting-toggle.active {
  background: var(--accent, #06b6d4);
  border-color: var(--accent, #06b6d4);
}
.setting-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.setting-toggle.active::after {
  transform: translateX(18px);
}

.danger-zone {
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.danger-zone .settings-section-header {
  background: rgba(239, 68, 68, 0.05);
  border-bottom-color: rgba(239, 68, 68, 0.2);
}

/* ---- Unified Pagination ---- */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-default);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-card);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.admin-pagination-info {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.admin-pagination-btns {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
.admin-pagination-btns .btn,
.admin-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, backdrop-filter 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 500;
}
.admin-pagination-btns .btn:hover:not(:disabled),
.admin-page-btn:hover:not(:disabled):not(.active) {
  border-color: var(--accent);
  color: var(--accent);
}
.admin-page-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse, #fff);
  font-weight: 600;
}
.admin-page-btn:disabled,
.admin-pagination-btns .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.admin-page-ellipsis {
  padding: 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* ---- Unified Empty State ---- */
.admin-empty,
.admin-empty-large {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.admin-empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-empty-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.admin-empty-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* ---- Toast ---- */
.admin-toast-container {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}
.admin-toast {
  pointer-events: auto;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  animation: toastSlide 0.25s ease;
  max-width: 360px;
  min-width: 280px;
  line-height: 1.4;
  color: var(--text-primary);
}
.admin-toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.admin-toast-content {
  flex: 1;
  min-width: 0;
}
.admin-toast-title {
  font-weight: 600;
  margin-bottom: 2px;
}
.admin-toast-desc {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.admin-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  border-radius: var(--radius-xs);
  display: flex;
  flex-shrink: 0;
}
.admin-toast-close:hover {
  color: var(--text-primary);
  background: var(--bg-muted);
}
.admin-toast.success { border-color: color-mix(in oklch, var(--success) 35%, var(--border)); }
.admin-toast.success .admin-toast-icon { color: var(--success); }
.admin-toast.error { border-color: color-mix(in oklch, var(--danger) 35%, var(--border)); }
.admin-toast.error .admin-toast-icon { color: var(--danger); }
.admin-toast.warning { border-color: color-mix(in oklch, var(--warning) 40%, var(--border)); }
.admin-toast.warning .admin-toast-icon { color: var(--warning); }
.admin-toast.info { border-color: color-mix(in oklch, var(--info) 35%, var(--border)); }
.admin-toast.info .admin-toast-icon { color: var(--info); }

@keyframes toastSlide {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Confirmation modal ---- */
.admin-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn 0.2s ease;
}
[data-theme="dark"] .admin-confirm-overlay {
  background: rgba(0, 0, 0, 0.6);
}
.admin-confirm-box {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 440px;
  padding: var(--space-6);
  animation: slideUp 0.25s ease;
  box-shadow: var(--shadow-xl);
}
.admin-confirm-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  line-height: 1.3;
}
.admin-confirm-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-6);
  line-height: 1.6;
}
.admin-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ---- Review detail in admin ---- */
.review-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.review-detail-tool {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.review-detail-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-tertiary);
  padding: 14px;
  border-radius: var(--radius-md);
  margin: 12px 0;
}

/* ---- Sidebar backdrop (mobile) ---- */
.admin-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 35;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid-2 { grid-template-columns: 1fr; }
  .admin-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .admin-sidebar {
    transform: translateX(-100%);
    width: 240px;
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-sidebar-backdrop.open { display: block; }
  .admin-main { margin-left: 0; }
  .admin-mobile-menu-btn { display: inline-flex; }
  .admin-topbar {
    padding: 0 var(--space-4);
  }
  .admin-content { padding: var(--space-4); }
  /* 1024px以下: 工具栏允许操作区换行,但保持按钮组紧凑 */
  .admin-table-toolbar,
  .admin-toolbar {
    flex-wrap: wrap;
  }
  .admin-table-actions-right,
  .admin-toolbar-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    width: auto;
  }
}

@media (max-width: 768px) {
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .stat-value { font-size: 22px; }
  .admin-login-card { padding: 24px 20px; }
  .setting-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .setting-label { padding-top: 0; }
  .admin-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .admin-page-actions {
    width: 100%;
  }
  .admin-page-actions .btn {
    flex: 1;
    justify-content: center;
  }
  /* 768px以下: 搜索框全宽,操作区可换行 */
  .admin-table-actions-left,
  .admin-toolbar-left {
    width: 100%;
  }
  .admin-search-wrap {
    max-width: none;
  }
  .admin-table-actions-right,
  .admin-toolbar-right {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .admin-stats-grid { grid-template-columns: 1fr; }
  .admin-grid-3 { grid-template-columns: 1fr; }
  .admin-breadcrumb { font-size: var(--text-xs); }
  .admin-user-chip span { display: none; }
}

/* ================================================================
   Markdown Editor
   ================================================================ */
.markdown-editor {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.md-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.md-toolbar-left,
.md-toolbar-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.md-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, backdrop-filter 0.15s ease;
  padding: 0;
}

.md-toolbar-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--border);
}

.md-toolbar-btn:active {
  transform: scale(0.95);
}

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

.md-mode-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, backdrop-filter 0.15s ease;
  margin-left: 2px;
}

.md-mode-btn:hover {
  color: var(--text);
  border-color: var(--text-secondary);
}

.md-mode-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse, #fff);
}

.md-body {
  display: flex;
  flex: 1;
  min-height: 240px;
  position: relative;
}

.md-edit-pane,
.md-preview-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.md-toolbar-right-hidden { display: none !important; }

.md-edit-pane { border-right: 1px solid var(--border); }
.md-edit-pane.hidden, .md-preview-pane.hidden { display: none; }

.md-textarea {
  flex: 1;
  width: 100%;
  padding: 12px 14px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: none;
}

.md-preview-pane {
  padding: 12px 16px;
  overflow-y: auto;
  background: var(--bg);
}

.md-preview-pane h1, .md-preview-pane h2,
.md-preview-pane h3, .md-preview-pane h4 {
  margin-top: 0.8em;
  margin-bottom: 0.4em;
  color: var(--text);
}

.md-preview-pane h1 { font-size: 20px; }
.md-preview-pane h2 { font-size: 17px; }
.md-preview-pane h3 { font-size: 15px; }
.md-preview-pane p { margin: 0.5em 0; line-height: 1.6; font-size: 13px; }
.md-preview-pane code {
  background: var(--bg-secondary);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.md-preview-pane pre {
  background: var(--bg-secondary);
  padding: 10px 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.6em 0;
}
.md-preview-pane pre code { padding: 0; background: none; }
.md-preview-pane blockquote {
  border: 1px solid var(--accent);
  margin: 0.6em 0;
  padding: 4px 12px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: 0 6px 6px 0;
}
.md-preview-pane ul, .md-preview-pane ol {
  padding-left: 20px;
  margin: 0.5em 0;
}
.md-preview-pane li { margin: 3px 0; font-size: 13px; }
.md-preview-pane table {
  border-collapse: collapse;
  margin: 0.6em 0;
  width: 100%;
  font-size: 12px;
}
.md-preview-pane th, .md-preview-pane td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}
.md-preview-pane th { background: var(--bg-secondary); }

/* ================================================================
   Bulk action bar alignment (tools / articles)
   ================================================================ */
.admin-table-actions-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  flex-shrink: 0;
}
/* 统一工具栏按钮高度与select高度为36px */
.admin-table-toolbar .btn.btn-sm,
.admin-toolbar .btn.btn-sm,
.admin-table-toolbar select,
.admin-toolbar select {
  height: 36px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.admin-table-toolbar .form-input,
.admin-toolbar .form-input {
  height: 36px;
  box-sizing: border-box;
}

/* ============================================================
   UX: Login page enhancements
   ============================================================ */
@keyframes loginShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.admin-login-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 8px 10px;
  border-radius: var(--radius-md);
}

.admin-login-hint code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--bg-tertiary);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-secondary);
}

.admin-login-hint svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.admin-login-footer {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ============================================================
   UX: Sticky table header + row styling
   ============================================================ */
.admin-table-head {
  position: sticky;
  top: 0;
  z-index: 1;
}

.admin-table-head th {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--text-tertiary);
}

.admin-table-row:hover {
  background: var(--bg-tertiary);
}

.admin-table-row.kbd-active {
  background: var(--accent-soft);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.admin-table-row.kbd-active:first-child td {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.admin-table tbody tr.kbd-active,
.admin-table tbody tr.kbd-active:hover {
  background: var(--accent-soft);
}

/* ============================================================
   UX: Filter clear button
   ============================================================ */
.admin-filter-clear {
  white-space: nowrap;
}

/* ============================================================
   UX: Bulk action bar
   ============================================================ */
.admin-bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  animation: bulkBarSlide 0.2s ease;
}

@keyframes bulkBarSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-bulk-bar > span:first-child {
  font-weight: 500;
  color: var(--accent);
}

.admin-bulk-bar > span:first-child span {
  color: var(--text-primary);
  font-weight: 600;
}

/* ---- Unified button system ---- */
.admin-app .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
  font-family: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1;
}
.admin-app .btn:active {
  transform: scale(0.97);
}
.admin-app .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.admin-app .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.admin-app .btn-sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}
.admin-app .btn-lg {
  height: 40px;
  padding: 0 var(--space-5);
  font-size: var(--text-base);
}

.admin-app .btn-primary {
  background: var(--accent);
  color: var(--text-inverse, #fff);
  border-color: var(--accent);
}
.admin-app .btn-primary:hover {
  filter: brightness(0.92);
  box-shadow: 0 2px 8px var(--accent-soft);
}

.admin-app .btn-secondary,
.admin-app .btn-outline {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.admin-app .btn-secondary:hover,
.admin-app .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.admin-app .btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.admin-app .btn-ghost:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

.admin-app .btn-danger {
  background: var(--danger);
  color: var(--text-inverse, #fff);
  border-color: var(--danger);
}
.admin-app .btn-danger:hover {
  filter: brightness(0.92);
}
.admin-app .btn-danger-outline {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
}
.admin-app .btn-danger-outline:hover {
  background: var(--danger-soft);
}

/* ============================================================
   UX: Dashboard todo bar + stat card enhancements
   ============================================================ */
.admin-todo-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px var(--accent-soft);
}

.admin-todo-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-todo-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.admin-todo-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.stat-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
}
.stat-trend.positive { color: var(--success); }
.stat-trend.negative { color: var(--danger); }

.stat-card-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.stat-icon.amber.pulse {
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.panel-count {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  line-height: 20px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-muted);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  vertical-align: middle;
}

/* ============================================================
   UX: Dashboard review/user rows (enhanced)
   ============================================================ */
.admin-review-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: flex-start;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

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

.admin-review-row .review-avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 13px !important;
  flex-shrink: 0;
}

.admin-review-main {
  flex: 1;
  min-width: 0;
}

.admin-review-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}

.admin-review-meta strong {
  font-size: 13px;
  font-weight: 600;
}

.admin-review-meta-tool {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
}

.admin-review-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--text);
}

.admin-review-content {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-review-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.admin-review-row:hover .admin-review-actions {
  opacity: 1;
}

.btn-icon-ghost.success:hover {
  color: var(--success);
  background: var(--success-soft);
}

.btn-icon-ghost.danger:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.admin-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: 6px;
  padding-left: 6px;
  padding-right: 6px;
}

.admin-user-row:hover {
  background: var(--bg-tertiary);
}

.admin-user-row .review-avatar {
  width: 32px !important;
  height: 32px !important;
  font-size: 12px !important;
  flex-shrink: 0;
}

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

/* ============================================================
   UX: Empty state (large variant for dashboard)
   ============================================================ */
.admin-empty-large {
  padding: 32px 20px !important;
  text-align: center !important;
}

.admin-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  align-items: center;
  justify-content: center;
}

.admin-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.admin-empty-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ============================================================
   UX: Reviews keyboard hint + badge pulse
   ============================================================ */
.review-kbd-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 10px 0 12px;
}

.review-kbd-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-secondary);
  font-weight: 500;
}

.tab-badge-pulse {
  animation: badgePulse 2s ease-in-out infinite !important;
  background: var(--danger) !important;
  color: var(--text-inverse, #fff) !important;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--danger-soft); }
  50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

/* ============================================================
   UX: Detail modal nav counter
   ============================================================ */
.detail-nav {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-left: 8px;
}

.modal-actions kbd {
  display: inline-block;
  padding: 1px 5px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  font-weight: 500;
  margin-left: 4px;
}

.btn-outline .btn-primary kbd {
  background: rgba(0,0,0,0.1);
}

/* ============================================================
   UX: Danger zone confirmation (type DELETE)
   ============================================================ */
.admin-confirm-box .form-label {
  display: block;
  margin-bottom: 6px;
}

.admin-confirm-box code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* ============================================================
   UX: Form input with icon (reuse auth pattern)
   ============================================================ */
.form-input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input-with-icon .form-input {
  width: 100%;
  padding-right: 38px;
}

.form-icon-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  transition: color 0.15s ease;
}

.form-icon-btn:hover {
  color: var(--text-secondary);
}

.pwd-strength {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pwd-bars {
  display: flex;
  gap: 3px;
  flex: 1;
  max-width: 120px;
}

.pwd-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  opacity: 0.5;
  transition: background 0.2s ease;
}

.pwd-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  min-width: 48px;
  text-align: right;
}

/* ============================================================
   UX: Mobile admin (sidebar drawer)
   ============================================================ */
@media (max-width: 1024px) {
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table {
    min-width: 700px;
  }
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3) !important;
  }
  .admin-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .admin-page-title {
    font-size: 18px !important;
  }
}

/* ============================================================
   Resource CMS — list page additions
   ============================================================ */
.admin-toggle-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.admin-toggle-wrap input {
  cursor: pointer;
}

.admin-filter-select {
  padding: 0 var(--space-3);
  height: 36px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-filter-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.admin-result-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.admin-row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.admin-row-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.admin-row-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.row-hidden {
  opacity: 0.45;
}
.row-hidden .admin-row-name {
  text-decoration: line-through;
}

.row-action-restore {
  color: var(--success) !important;
}
.row-action-delete {
  color: var(--danger) !important;
}

.stat-icon.cyan { background: var(--accent-soft); color: var(--accent); }
.stat-icon.indigo { background: var(--info-soft); color: var(--info); }
.stat-icon.rose { background: var(--danger-soft); color: var(--danger); }
.stat-icon.emerald { background: var(--success-soft); color: var(--success); }
.stat-icon.amber { background: var(--warning-soft); color: var(--warning); }

/* ============================================================
   Resource CMS — modal form
   ============================================================ */
.resource-modal {
  width: 90vw;
  max-width: 880px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.resource-modal .modal-body {
  overflow-y: auto;
  padding: 20px 24px;
  flex: 1;
}
.resource-preset-banner {
  padding: var(--space-2) var(--space-4);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--warning);
}
[data-theme="dark"] .resource-preset-banner {
  background: var(--warning-soft);
  color: var(--warning);
  border-bottom-color: var(--warning);
}

.resource-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.resource-form-section-title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.resource-form-section-title:first-child {
  margin-top: 0;
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.form-required {
  color: var(--danger);
  margin-left: 2px;
  font-weight: 700;
}

.prompt-vars-container,
.product-incl-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.prompt-var-row,
.product-incl-row {
  display: grid;
  gap: 8px;
  align-items: center;
}
.prompt-var-row {
  grid-template-columns: 1fr 1.5fr 1fr 36px;
}
.product-incl-row {
  grid-template-columns: 1fr 36px;
}
.prompt-var-row input,
.product-incl-row input {
  font-size: 13px;
}
.prompt-var-row > button,
.product-incl-row > button {
  height: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 768px) {
  .resource-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .prompt-var-row {
    grid-template-columns: 1fr 1fr;
  }
  .prompt-var-row > button {
    grid-column: span 2;
  }
  .admin-search-input {
    width: 100%;
  }
}

/* ============================================================
   Row action buttons (resource CMS lists)
   ============================================================ */
.row-action-btn {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.15s ease-out, opacity 0.15s ease-out, backdrop-filter 0.15s ease-out;
}
.row-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.admin-row-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Project detail modal ---------- */
.project-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.project-detail-section {
  margin-bottom: 18px;
}
.project-detail-section h5 {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.project-detail-count {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.project-detail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 13px;
}
.project-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.project-detail-id {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 12px;
  font-family: 'SF Mono', 'Consolas', monospace;
}
.project-detail-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

/* ---------- Admin 404 ---------- */
.admin-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  min-height: 60vh;
  gap: 12px;
}
.admin-not-found-code {
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -4px;
}
.admin-not-found-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}
.admin-not-found-desc {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 420px;
}
.admin-not-found-path {
  margin: 8px 0 16px;
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-tertiary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-not-found-path code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.admin-not-found-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.admin-not-found-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Button loading ---------- */
.btn-loading {
  pointer-events: none;
  position: relative;
}
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 2px;
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   GitHub-style Resource Editor
   ============================================================ */

.gh-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gh-editor-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.gh-editor-shell {
  background: var(--bg-card, var(--bg-primary, #fff));
  border-radius: 10px;
  width: 100%;
  max-width: 1200px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border, var(--border-color, #e5e5e5));
  font-family: var(--font-ui, var(--font-sans));
  /* legacy vars bridge for editor internals */
  --bg-primary: var(--bg-card, #ffffff);
  --bg-soft: var(--bg-secondary, #fafafa);
  --bg-tertiary: var(--bg-tertiary, #f5f5f5);
  --text-primary: var(--text, #0a0a0a);
  --text-secondary: var(--text-secondary, #525252);
  --border-color: var(--border, #e5e5e5);
}

/* Top bar */
.gh-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-soft);
  flex-shrink: 0;
  gap: 16px;
}
.gh-editor-path {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  flex: 1;
  max-width: 600px;
}
.gh-path-prefix {
  color: var(--text-secondary);
  font-family: var(--font-mono, ui-monospace, monospace);
  padding: 4px 6px;
  border-radius: 4px;
  user-select: none;
  flex-shrink: 0;
}
.gh-path-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--accent);
  outline: none;
  font-weight: 500;
  transition: background 0.15s;
}
.gh-path-input:focus {
  background: var(--bg-tertiary);
}
.gh-path-input:disabled {
  color: var(--text-primary);
  font-weight: 400;
  cursor: default;
}

.gh-editor-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.gh-status-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gh-status-published {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success);
}
.dark .gh-status-published {
  color: var(--success);
}
.gh-status-draft {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.gh-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.gh-close-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Preset banner */
.gh-preset-banner {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  background: var(--warning-soft);
  color: var(--warning);
  border-bottom: 1px solid var(--warning);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.gh-preset-banner::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
}
[data-theme="dark"] .gh-preset-banner {
  background: var(--warning-soft);
  color: var(--warning);
  border-bottom-color: var(--warning);
}
[data-theme="dark"] .gh-preset-banner::before {
  background: var(--warning);
}

/* Body */
.gh-editor-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gh-editor-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  overflow: hidden;
}

/* Left: main editor */
.gh-editor-left {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px 32px;
  border-right: 1px solid var(--border-color);
}

/* Title section — GitHub file-name style */
.gh-title-section {
  margin-bottom: 16px;
}
.gh-title-input {
  width: 100%;
  font-size: 22px;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  background: transparent;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
  font-family: var(--font-sans);
}
.gh-title-input:focus {
  border-bottom-color: var(--accent);
}
.gh-title-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  transition: opacity 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tabs */
.gh-editor-tabs-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}
.gh-editor-tabs {
  display: flex;
  gap: 0;
}
.gh-editor-tab {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  transition: color 0.15s, border-color 0.15s;
}
.gh-editor-tab:hover {
  color: var(--text-primary);
}
.gh-editor-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
/* GH editor inner markdown styling */
#ghPaneWrite .markdown-editor {
  border: 1px solid var(--border-color, var(--border));
  border-radius: 6px;
  overflow: hidden;
}
#ghPaneWrite .md-toolbar {
  background: var(--bg-soft, var(--bg-secondary));
  border-bottom: 1px solid var(--border-color, var(--border));
  color: var(--text-primary, var(--text));
}
#ghPaneWrite .md-toolbar-btn {
  color: var(--text-secondary, #64748b);
}
#ghPaneWrite .md-toolbar-btn:hover {
  color: var(--text-primary, var(--text));
  background: var(--bg-tertiary, var(--bg-hover));
}
#ghPaneWrite .md-textarea {
  background: var(--bg-primary, var(--bg-card));
  color: var(--text-primary, var(--text));
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.6;
  padding: 14px 16px;
}
#ghPaneWrite .md-preview-pane {
  background: var(--bg-primary, var(--bg-card));
  color: var(--text-primary, var(--text));
  border-left: 1px solid var(--border-color, var(--border));
}
/* Preview pane in outer tab */
#ghPanePreview .gh-preview-inner {
  color: var(--text-primary, var(--text));
  background: var(--bg-primary, var(--bg-card));
}
#ghPanePreview {
  border: 1px solid var(--border-color, var(--border));
  border-radius: 6px;
  padding: 20px 24px;
  background: var(--bg-primary, var(--bg-card));
  overflow-y: auto;
  min-height: 360px;
  color: var(--text-primary, var(--text));
}

/* Word count clarity */
.gh-editor-tab-count {
  font-size: 11px;
  color: var(--text-secondary, #64748b);
  padding-right: 4px;
  font-variant-numeric: tabular-nums;
}

/* Pane */
.gh-pane {
  flex: 1;
  min-height: 0;
}
.gh-pane-write {
  display: flex;
  flex-direction: column;
}
.gh-main-textarea {
  flex: 1;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 14px 16px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  line-height: 1.6;
  background: var(--bg-primary);
  color: var(--text-primary);
  resize: none;
  outline: none;
  min-height: 360px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gh-main-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Preview pane */
.gh-pane-preview {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 20px 24px;
  background: var(--bg-primary);
  overflow-y: auto;
  min-height: 360px;
}
.gh-preview-inner {
  color: var(--text-primary);
  line-height: 1.65;
  font-size: 14px;
}
.gh-preview-inner h1,
.gh-preview-inner h2,
.gh-preview-inner h3 {
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  color: var(--text-primary);
}
.gh-preview-inner code {
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
}
.gh-preview-inner pre {
  background: var(--bg-soft);
  padding: 12px 16px;
  border-radius: 6px;
  overflow-x: auto;
}

/* Settings pane */
.gh-pane-settings {
  padding: 8px 0;
}

/* Right sidebar meta groups */
.gh-editor-right {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  background: var(--bg-soft, var(--bg-secondary));
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gh-meta-group {
  border: 1px solid var(--border-color, var(--border));
  border-radius: 6px;
  margin-bottom: 12px;
  background: var(--bg-primary, var(--bg-card));
  overflow: hidden;
  flex-shrink: 0;
}
.gh-meta-group.collapsed .gh-meta-group-body {
  display: none;
}
.gh-meta-group.collapsed .gh-meta-chevron {
  transform: rotate(-90deg);
}
.gh-meta-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  font-family: var(--font-sans);
  transition: background 0.15s;
}
.gh-meta-group-header:hover {
  background: var(--bg-soft);
}
.gh-meta-chevron {
  font-size: 10px;
  color: var(--text-secondary);
  transition: transform 0.2s;
  width: 12px;
  text-align: center;
}
.gh-meta-group-title {
  flex: 1;
  text-transform: capitalize;
}
.gh-meta-group-body {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--border-color);
}

.gh-field {
  padding: 8px 0;
}
.gh-field + .gh-field {
  border-top: 1px solid var(--border-light, rgba(0,0,0,0.05));
}
.dark .gh-field + .gh-field {
  border-top-color: rgba(255,255,255,0.06);
}
.gh-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0.02em;
}
.gh-field-input {
  width: 100%;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color, var(--border));
  background: var(--bg-primary, var(--bg-input, #fff));
  color: var(--text-primary, var(--text));
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gh-field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.gh-field textarea.gh-field-input {
  resize: vertical;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.gh-icon-ta {
  min-height: 50px;
  font-family: var(--font-mono, monospace);
}
.gh-field-hint {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}
.gh-field-muted {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 8px 0;
  text-align: center;
}

/* Segmented control */
.gh-segmented {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}
.gh-seg-btn {
  flex: 1;
  padding: 8px 16px;
  min-height: 32px;
  border: none;
  background: var(--bg-primary);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  line-height: 1;
}
.gh-seg-btn + .gh-seg-btn {
  border-left: 1px solid var(--border-color);
}
.gh-seg-btn:hover {
  background: var(--bg-soft);
}
.gh-seg-btn.active {
  background: var(--accent);
  color: white;
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--accent);
}
.gh-seg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  z-index: 1;
}

/* Price error */
.gh-price-error {
  display: none;
  color: var(--danger, #ef4444);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 6px;
  font-family: var(--font-sans);
}

.gh-price-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-soft) !important;
}
.gh-price-prefix {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-mono, monospace);
  pointer-events: none;
}
.gh-price-field {
  padding-left: 24px !important;
  font-family: var(--font-mono, monospace) !important;
}

/* Sticky form / modal footer (unified commit bar paradigm) */
.form-footer,
.gh-commit-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-default);
  background: var(--bg-soft);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.form-footer-left,
.gh-commit-message-wrap {
  flex: 1;
  min-width: 0;
}
.form-footer-right,
.gh-commit-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-shrink: 0;
}
.gh-commit-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  font-family: var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gh-commit-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.gh-btn-commit {
  background: #2da44e !important;
  border-color: #2da44e !important;
  color: white !important;
  min-width: 140px;
}
.gh-btn-commit:hover {
  background: #2c974b !important;
  border-color: #2c974b !important;
}
.dark .gh-btn-commit {
  background: #2da44e !important;
  border-color: #2da44e !important;
}
.gh-btn-commit.loading {
  opacity: 0.6;
  cursor: progress;
}
.gh-btn-commit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Prompt vars container in settings */
#promptVarsContainer,
#productInclContainer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
  .gh-editor-main {
    grid-template-columns: 1fr;
  }
  .gh-editor-left {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .gh-editor-shell {
    max-height: 95vh;
  }
  .gh-editor-overlay {
    padding: 8px;
  }
  .gh-editor-left {
    padding: 16px 20px;
  }
}

/* ============================================================
   Order type badges
   ============================================================ */
.order-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-soft);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.order-type-tool    { background: rgba(6, 182, 212, 0.1); color: #0891b2; border-color: rgba(6, 182, 212, 0.3); }
.order-type-agent   { background: rgba(139, 92, 246, 0.1); color: #7c3aed; border-color: rgba(139, 92, 246, 0.3); }
.order-type-skill   { background: rgba(99, 102, 241, 0.1); color: #4f46e5; border-color: rgba(99, 102, 241, 0.3); }
.order-type-prompt  { background: rgba(244, 63, 94, 0.1);  color: #e11d48; border-color: rgba(244, 63, 94, 0.3); }
.order-type-bundle  { background: rgba(16, 185, 129, 0.1); color: #059669; border-color: rgba(16, 185, 129, 0.3); }

/* ============================================================
   Upload / Dropzone / Bulk Import Modal
   ============================================================ */

.upload-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--bg-soft);
}
.upload-dropzone:hover {
  border-color: var(--accent);
  background: rgba(6, 182, 212, 0.04);
}
.upload-dropzone.dz-dragover {
  border-color: var(--accent);
  background: rgba(6, 182, 212, 0.08);
}
.upload-dz-icon {
  font-size: 32px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}
.upload-dz-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.upload-dz-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.upload-file-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.upload-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: 6px;
  font-size: 12px;
}
.upload-file-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.upload-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-primary);
}
.upload-file-size {
  color: var(--text-secondary);
  font-size: 11px;
  flex-shrink: 0;
}
.upload-file-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
.upload-file-status.parsing {
  background: var(--info-soft);
  color: var(--info);
}
.upload-file-status.success {
  background: var(--success-soft);
  color: var(--success);
}
.upload-file-status.error {
  background: var(--danger-soft);
  color: var(--danger);
}
.upload-file-remove {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.upload-file-remove:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

/* Bulk import review list */
.bulk-import-list {
  margin-top: 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  max-height: 400px;
  overflow-y: auto;
}
.bulk-import-row {
  display: grid;
  grid-template-columns: 28px 1.5fr 1fr 90px 90px 28px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
}
.bulk-import-row:last-child {
  border-bottom: none;
}
.bulk-import-row.header {
  background: var(--bg-soft);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bulk-import-row.error {
  background: var(--danger-soft);
}
.bulk-import-row .bi-name {
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-import-row .bi-slug {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-import-row .bi-errors {
  color: var(--danger);
  font-size: 11px;
  margin-top: 2px;
}
.bulk-import-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  text-align: center;
}
.bulk-import-status.valid {
  background: var(--success-soft);
  color: var(--success);
}
.bulk-import-status.invalid {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Bulk import summary */
.bulk-import-summary {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bulk-import-summary .bi-count {
  font-weight: 600;
  color: var(--text-primary);
}

/* Upload toolbar button */
.upload-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* GH editor upload button (in title area) */
.gh-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-soft);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: var(--font-sans);
}
.gh-upload-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--accent);
}
.gh-title-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

/* Bulk modal wider */
.bulk-import-modal {
  max-width: 820px !important;
}
.bulk-import-modal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
  padding-bottom: 16px;
}

/* Result report modal */
.result-report-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.result-report-item:last-child {
  border-bottom: none;
}
.result-report-item.success .rr-icon {
  color: var(--success);
}
.result-report-item.error .rr-icon {
  color: var(--danger);
}
.rr-name {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rr-reason {
  color: var(--danger);
  font-size: 11px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hide file input */
.upload-hidden-input {
  display: none;
}

/* Template download link */
.template-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}
.template-download:hover {
  text-decoration: underline;
}

/* Status selector in bulk import */
.bulk-status-select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  width: 100%;
}

/* ============================================================
   Traffic / Analytics Dashboard Panel
   ============================================================ */
.traffic-panel .admin-panel-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.traffic-panel .panel-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #8a8a8a);
  background: var(--bg-tertiary, #f5f5f5);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-traffic-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-card, #fff);
}
.dash-tab {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  border-right: 1px solid var(--border, #e5e5e5);
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.dash-tab:last-child { border-right: none; }
.dash-tab:hover { background: var(--bg-secondary, #fafafa); }
.dash-tab.active {
  background: var(--accent, #06b6d4);
  color: white;
  font-weight: 600;
}

.traffic-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.traffic-summary-item {
  background: var(--bg-secondary, #fafafa);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
}
.traffic-summary-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #0a0a0a);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.traffic-summary-label {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.traffic-empty-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 160px;
  color: var(--text-muted, #9ca3af);
  font-size: 13px;
}
.traffic-empty-chart .empty-icon {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}
.traffic-empty-chart .empty-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
}
.traffic-empty-chart .empty-sub {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
}

/* ========== Two-column main grid ========== */
.traffic-main-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  align-items: stretch;
}

/* Card shell (consistent look — unified with dashboard-card) */
.traffic-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.traffic-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.traffic-card-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.traffic-card-body {
  padding: var(--space-5);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Left: chart card */
.traffic-chart-card .traffic-card-body {
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  gap: 12px;
}
.traffic-barchart {
  width: 100%;
  height: 100%;
  min-height: 240px;
  flex: 1 1 auto;
  display: block;
  overflow: visible;
}
.traffic-barchart .grid-line {
  stroke: var(--border, #d4d4d4);
  stroke-width: 1;
  opacity: 0.5;
}
.traffic-barchart .grid-line-h {
  stroke-dasharray: 4 3;
}
.traffic-barchart .grid-baseline {
  stroke: var(--border-default, #94a3b8);
  stroke-width: 2px;
  opacity: 1;
}
.traffic-barchart .axis-line {
  stroke: var(--border-default, #94a3b8);
  stroke-width: 2px;
  opacity: 1;
}
.traffic-barchart .axis-tick {
  stroke: var(--border-default, #94a3b8);
  stroke-width: 2px;
}
[data-theme="dark"] .traffic-barchart .grid-line {
  stroke: rgba(255,255,255,0.10);
}
[data-theme="dark"] .traffic-barchart .grid-baseline,
[data-theme="dark"] .traffic-barchart .axis-line,
[data-theme="dark"] .traffic-barchart .axis-tick {
  stroke: rgba(255,255,255,0.30);
}
.traffic-barchart .grid-label {
  fill: var(--text-secondary, #64748b);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
  dominant-baseline: middle;
  text-anchor: end;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.traffic-barchart .bar-view {
  fill: var(--accent, #06b6d4);
  transition: opacity 0.15s;
}
.traffic-barchart .bar-use {
  fill: var(--accent-strong, #0891b2);
  opacity: 0.55;
  transition: opacity 0.15s;
}
.traffic-barchart .bar-group { cursor: pointer; }
.traffic-barchart .bar-group:hover .bar-view,
.traffic-barchart .bar-group:hover .bar-use {
  opacity: 0.8;
}
.traffic-barchart .bar-label {
  fill: var(--text-secondary, #64748b);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
  letter-spacing: 0.01em;
}
.traffic-barchart .chart-empty-text {
  fill: var(--text-muted, #94a3b8);
  font-size: 13px;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
}

/* Traffic legend */
.traffic-legend {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 6px 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  letter-spacing: 0.01em;
}
.traffic-legend .legend-dot {
  display: inline-block;
  width: 18px;
  height: 14px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
}
.traffic-legend .legend-view { background: var(--accent, #06b6d4); }
.traffic-legend .legend-use { background: var(--accent-strong, #0891b2); opacity: 0.6; }

/* Right: resource card + table with independent scrolling */
.traffic-resource-body {
  padding: 0;
  overflow: hidden;
}
.traffic-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}
.traffic-table-scroll .traffic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 0;
}
.traffic-table-scroll .traffic-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 9px 12px;
  background: var(--bg-secondary, #fafafa);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border, #e5e5e5);
  white-space: nowrap;
}
.traffic-table-scroll .traffic-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
  color: var(--text, #0a0a0a);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}
.traffic-table-scroll .traffic-table tr:last-child td { border-bottom: none; }
.traffic-table-scroll .traffic-table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}
.traffic-table-scroll .traffic-table tbody tr:hover {
  background: var(--bg-secondary, #fafafa);
}
.traffic-table-scroll .traffic-table tbody tr.selected {
  background: var(--accent-soft, rgba(6,182,212,0.1));
}

/* Compact columns in right card: short header labels */
.traffic-table-compact th:nth-child(n+3),
.traffic-table-compact td:nth-child(n+3) {
  text-align: right;
  width: 48px;
}
.traffic-table-compact .traffic-total {
  font-weight: 700;
  color: var(--text, #0a0a0a);
}
.traffic-table-compact .traffic-rank {
  width: 32px;
  color: var(--text-muted, #9ca3af);
  font-weight: 500;
}
.traffic-table-compact .traffic-res-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.traffic-table-compact .traffic-res-type {
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.traffic-table-compact .traffic-res-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.traffic-table-compact .traffic-empty {
  text-align: center;
  padding: 24px !important;
  color: var(--text-muted, #9ca3af);
  font-size: 12px;
}

/* Resource type pill colors (shared) */
.type-tool    { background: rgba(6, 182, 212, 0.12); color: #0891b2; }
.type-agent   { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.type-skill   { background: rgba(99, 102, 241, 0.12); color: #4f46e5; }
.type-prompt  { background: rgba(244, 63, 94, 0.12);  color: #e11d48; }
.type-bundle  { background: rgba(16, 185, 129, 0.12); color: #059669; }

/* Small type-filter tabs in resource card header */
.dash-traffic-tabs-sm .dash-tab {
  padding: 4px 9px;
  font-size: 11.5px;
}

/* Selected resource trend block (inside right card body) */
.traffic-selected-res {
  background: var(--bg-secondary, #fafafa);
  border-bottom: 1px solid var(--border, #e5e5e5);
  padding: 10px 14px 12px;
  flex-shrink: 0;
}
.traffic-selected-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
}
.traffic-selected-title strong {
  color: var(--text, #0a0a0a);
  font-weight: 600;
  margin-left: 4px;
}
.traffic-minichart {
  width: 100%;
  height: 120px;
  display: block;
  overflow: visible;
}
.traffic-minichart .bar-view { fill: var(--accent, #06b6d4); }
.traffic-minichart .bar-use { fill: var(--accent-strong, #0891b2); opacity: 0.55; }
.traffic-minichart .grid-line {
  stroke: var(--border, #d4d4d4);
  stroke-width: 1;
  opacity: 0.55;
}
.traffic-minichart .grid-line-h {
  stroke-dasharray: 3 3;
}
.traffic-minichart .grid-baseline {
  stroke: var(--border-default, #cbd5e1);
  stroke-width: 1.5;
  opacity: 1;
}
.traffic-minichart .axis-line {
  stroke: var(--border-default, #cbd5e1);
  stroke-width: 1.2;
  opacity: 1;
}
.traffic-minichart .axis-tick {
  stroke: var(--border-default, #cbd5e1);
  stroke-width: 1.2;
}
[data-theme="dark"] .traffic-minichart .grid-line {
  stroke: rgba(255,255,255,0.08);
}
[data-theme="dark"] .traffic-minichart .grid-baseline,
[data-theme="dark"] .traffic-minichart .axis-line,
[data-theme="dark"] .traffic-minichart .axis-tick {
  stroke: rgba(255,255,255,0.20);
}
.traffic-minichart .bar-label,
.traffic-minichart .bar-label-mini {
  fill: var(--text-secondary, #64748b);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
}
.traffic-minichart .chart-empty-text-mini {
  fill: var(--text-muted, #94a3b8);
  font-size: 11px;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
}

.traffic-note {
  margin-top: 14px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-muted, #8a8a8a);
  background: var(--bg-secondary, #fafafa);
  border-radius: 6px;
  border: 1px solid var(--border, #e5e5e5);
  line-height: 1.5;
}

/* ========== Business / Realtime panel ========== */
.biz-panel { margin-bottom: var(--space-6); }

/* Main grid: KPI column (left) + chart column (right), ratio 1:2 */
.biz-main-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-6);
  align-items: stretch;
  margin-bottom: var(--space-6);
}

/* Left column: KPI cards 2x2 grid */
.biz-kpi-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.biz-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-4);
  flex: 1;
  min-height: 0;
}
.biz-kpi-card {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
}
.biz-kpi-card:hover {
  border-color: var(--accent, #06b6d4);
}
.biz-kpi-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
}
.biz-kpi-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.biz-kpi-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
}
.biz-kpi-range {
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* Right column: chart card takes full column height */
.biz-chart-col {
  display: flex;
  min-width: 0;
}
.biz-chart-col .biz-chart-card {
  flex: 1;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.biz-chart-col .biz-chart-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.biz-chart-col .biz-chart-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Delta pill */
.biz-delta {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.biz-delta-up {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.biz-delta-down {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.biz-delta-na {
  background: var(--bg-secondary, #f5f5f5);
  color: var(--text-muted, #9ca3af);
  font-weight: 500;
}
[data-theme="dark"] .biz-delta-na {
  background: rgba(255,255,255,0.08);
  color: var(--text-muted, #94a3b8);
}

/* Chart card */
.biz-chart-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.biz-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e5e5e5);
  background: var(--bg-secondary, #fafafa);
  flex-wrap: wrap;
}
.biz-chart-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0a0a0a);
  white-space: nowrap;
}
.biz-chart-body {
  padding: 10px 16px 2px;
}
.biz-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.biz-barchart {
  width: 100%;
  height: 100%;
  min-height: 240px;
  flex: 1 1 auto;
  display: block;
  overflow: visible;
}

/* Business chart grid & axes */
.biz-barchart .grid-line {
  stroke: var(--border, #d4d4d4);
  stroke-width: 1;
  opacity: 0.5;
}
.biz-barchart .grid-line-h {
  stroke-dasharray: 4 3;
}
.biz-barchart .grid-baseline {
  stroke: var(--border-default, #94a3b8);
  stroke-width: 2px;
  opacity: 1;
}
.biz-barchart .axis-line {
  stroke: var(--border-default, #94a3b8);
  stroke-width: 2px;
  opacity: 1;
}
.biz-barchart .axis-tick {
  stroke: var(--border-default, #94a3b8);
  stroke-width: 2px;
}
[data-theme="dark"] .biz-barchart .grid-line {
  stroke: rgba(255,255,255,0.10);
}
[data-theme="dark"] .biz-barchart .grid-baseline,
[data-theme="dark"] .biz-barchart .axis-line,
[data-theme="dark"] .biz-barchart .axis-tick {
  stroke: rgba(255,255,255,0.30);
}

/* Business chart bar colors */
.biz-bar { transition: opacity 0.15s; }
.biz-bar:hover { opacity: 0.8; }
.biz-bar-revenue { fill: var(--accent, #06b6d4); }
.biz-bar-orders  { fill: #8b5cf6; }
.biz-bar-views   { fill: #10b981; }

/* Business trend line */
.biz-trend-line {
  stroke: #f59e0b;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.biz-line-dot {
  fill: #f59e0b;
  stroke: var(--bg-card, #fff);
  stroke-width: 2;
}

/* Legend */
.biz-legend {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  padding: 10px 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  letter-spacing: 0.01em;
}
.biz-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.biz-legend .legend-bar {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
}
.biz-legend .legend-revenue { background: var(--accent, #06b6d4); }
.biz-legend .legend-orders  { background: #8b5cf6; }
.biz-legend .legend-views   { background: #10b981; }
.biz-legend .legend-line {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: #f59e0b;
  position: relative;
}
.biz-legend .legend-line::after {
  content: '';
  position: absolute;
  right: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  border: 2px solid var(--bg-card, #fff);
  box-sizing: border-box;
}

/* Note + last updated */
.biz-note {
  margin-top: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-muted, #8a8a8a);
  background: var(--bg-secondary, #fafafa);
  border-radius: 6px;
  border: 1px solid var(--border, #e5e5e5);
  line-height: 1.5;
}
.biz-last-updated {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted, #9ca3af);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Refresh button */
.biz-refresh {
  font-variant-numeric: tabular-nums;
}

/* Dark theme tweaks for business panel */
[data-theme="dark"] .biz-chart-header {
  background: var(--bg-secondary, #1a1a1a);
}
[data-theme="dark"] .biz-kpi-card:hover {
  border-color: var(--accent, #06b6d4);
}
[data-theme="dark"] .biz-line-dot {
  stroke: var(--bg-card, #121212);
}

@media (max-width: 1024px) {
  .traffic-main-grid {
    grid-template-columns: 1fr;
  }
  .traffic-barchart {
    height: 300px;
  }
  .biz-main-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .biz-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    gap: var(--space-4);
  }
  .biz-barchart {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .traffic-summary-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .traffic-card-header {
    padding: var(--space-3) var(--space-4);
  }
  .traffic-card-body {
    padding: var(--space-4);
  }
  .traffic-resource-body {
    padding: 0;
  }
  .traffic-barchart {
    min-width: 520px;
    height: 260px;
  }
  .traffic-chart-card .traffic-card-body {
    overflow-x: auto;
  }
  .traffic-summary-value {
    font-size: var(--text-2xl);
  }
  .dash-traffic-tabs-sm .dash-tab {
    padding: 4px 7px;
    font-size: 11px;
  }
  .biz-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: var(--space-3);
  }
  .biz-kpi-value {
    font-size: var(--text-2xl);
  }
  .biz-chart-body {
    padding: var(--space-3) var(--space-2) 2px;
    overflow-x: auto;
  }
  .biz-barchart {
    min-width: 560px;
    height: 280px;
  }
  .biz-chart-header {
    padding: var(--space-3) var(--space-4);
  }
}

/* =============================================================
 *  Dashboard chart labels & demo data controls
 * ============================================================= */

/* Business chart text labels */
.biz-barchart .grid-label {
  fill: var(--text-secondary, #64748b);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
  dominant-baseline: middle;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.biz-barchart .grid-label-right {
  text-anchor: start;
}
.biz-barchart .bar-label {
  fill: var(--text-secondary, #64748b);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
  letter-spacing: 0.01em;
}
.biz-barchart .bar-data-label {
  fill: var(--text-primary, #1e293b);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
[data-theme="dark"] .biz-barchart .bar-data-label {
  fill: var(--text-primary, #f1f5f9);
}
.biz-barchart .chart-empty-text {
  fill: var(--text-muted, #94a3b8);
  font-size: 13px;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
}

/* Demo data badge & button group */
.demo-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-strong, #0891b2);
  background: var(--accent-soft, #ecfeff);
  border: 1px solid var(--accent-muted, #cffafe);
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}
[data-theme="dark"] .demo-badge {
  color: var(--accent, #22d3ee);
  background: rgba(34, 211, 238, 0.08);
  border-color: rgba(34, 211, 238, 0.25);
}

.demo-btn-group {
  display: inline-flex;
  gap: 4px;
  opacity: 0.65;
  transition: opacity 0.15s;
}
.demo-btn-group:hover {
  opacity: 1;
}
.demo-btn-group .btn-xs {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.5;
}

/* Make panel position-relative so demo-badge absolute works */
.admin-panel {
  position: relative;
}

/* KPI cards: prevent long numbers from overflowing */
.biz-kpi-card {
  min-width: 0;
}
.biz-kpi-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Traffic KPI value: same treatment */
.traffic-summary-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chart wrapper min-width 0 for grid overflow safety */
.biz-chart-wrap,
.traffic-chart-card,
.traffic-resource-card {
  min-width: 0;
}

/* Responsive fixes for dashboard */
/* (biz-main-grid / biz-kpi-grid responsive rules are defined in the panel sections above) */

/* =============================================================
 *  Dashboard Widget Grid System
 * ============================================================= */

.dash-widget-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  grid-auto-flow: row dense;
  gap: 16px;
  margin-top: 16px;
  position: relative;
}

/* Widget card */
.dash-widget {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.dash-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e5e5e5);
  background: var(--bg-secondary, #fafafa);
  flex-shrink: 0;
  user-select: none;
}

.dash-widget-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  letter-spacing: 0.01em;
}

.dash-widget-drag-icon {
  color: var(--text-tertiary, #94a3b8);
  display: none;
  cursor: grab;
  line-height: 0;
}
.dash-widget-drag-icon:active {
  cursor: grabbing;
}

.dash-widget-body {
  padding: 12px 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Overview stats widget — compact 4x2 grid that fits a widget row */
.dash-widget[data-widget-id="stats-overview"] .dash-widget-body {
  padding: 10px 12px;
}
.dash-widget[data-widget-id="stats-overview"] .admin-stats-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.dash-widget[data-widget-id="stats-overview"] .stat-card {
  padding: 10px 12px;
  gap: 6px;
  min-height: 0;
}
.dash-widget[data-widget-id="stats-overview"] .stat-card-header {
  gap: 8px;
}
.dash-widget[data-widget-id="stats-overview"] .stat-icon {
  width: 32px;
  height: 32px;
}
.dash-widget[data-widget-id="stats-overview"] .stat-icon svg {
  width: 16px;
  height: 16px;
}
.dash-widget[data-widget-id="stats-overview"] .stat-value {
  font-size: 20px;
  line-height: 1.15;
}
.dash-widget[data-widget-id="stats-overview"] .stat-label {
  font-size: 12px;
  white-space: normal;
  line-height: 1.3;
}
.dash-widget[data-widget-id="stats-overview"] .stat-card-footer {
  margin-top: 4px;
  padding-top: 6px;
  font-size: 11px;
  gap: 4px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Custom date range picker inside range tabs */
.dash-range-tabs {
  position: relative;
}
.dash-tab-custom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  padding-right: 10px;
}
.dash-tab-custom.active {
  background: var(--accent, #06b6d4);
  color: white;
}
.dash-tab-cal-icon {
  font-size: 12px;
  line-height: 1;
}
.dash-tab-custom-label {
  font-size: 12px;
}
/* Business KPI widget — compact 2x2 grid */
.dash-widget[data-widget-id="biz-kpi"] .dash-widget-body {
  padding: 10px 12px 12px;
}
.dash-widget[data-widget-id="biz-kpi"] .biz-kpi-grid {
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}
.dash-widget[data-widget-id="biz-kpi"] .biz-kpi-card {
  padding: 10px 12px;
  gap: 4px;
  min-height: 0;
  justify-content: flex-start;
}
.dash-widget[data-widget-id="biz-kpi"] .biz-kpi-label {
  font-size: 12px;
}
.dash-widget[data-widget-id="biz-kpi"] .biz-kpi-value {
  font-size: 22px;
  line-height: 1.2;
}
.dash-widget[data-widget-id="biz-kpi"] .biz-kpi-sub {
  font-size: 11px;
}

/* Recent reviews / recent users widget body — compact list with scrolling */
.dash-widget[data-widget-id="recent-reviews"] .dash-widget-body,
.dash-widget[data-widget-id="recent-users"] .dash-widget-body {
  padding: 8px 12px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-widget[data-widget-id="recent-reviews"] .admin-review-row,
.dash-widget[data-widget-id="recent-users"] .admin-user-row {
  padding: 8px 0;
}
.dash-widget[data-widget-id="recent-reviews"] .dash-widget-body .admin-empty,
.dash-widget[data-widget-id="recent-users"] .dash-widget-body .admin-empty {
  flex: 1 1 auto;
}

/* Biz Trend chart widget */
.dash-widget[data-widget-id="biz-trend"] .dash-widget-body {
  padding: 0 12px 12px;
}

/* Traffic trend widget */
.dash-widget[data-widget-id="traffic-trend"] .dash-widget-body {
  padding: 0 12px 12px;
}

/* Resource perf widget table */
.dash-widget[data-widget-id="resource-perf"] .dash-widget-body {
  padding: 0 12px 12px;
}
.dash-widget[data-widget-id="resource-perf"] .traffic-table-scroll {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

.dash-widget-toolbar {
  flex-shrink: 0;
}

.custom-date-picker {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: var(--z-dropdown);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cdp-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cdp-row label {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  font-weight: 500;
}
.cdp-row input[type="date"] {
  padding: 6px 8px;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1e293b);
  font-family: inherit;
}
.cdp-row input[type="date"]:focus {
  outline: none;
  border-color: var(--accent, #06b6d4);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
}
.cdp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 2px;
}

/* Dark theme — custom date picker */
[data-theme="dark"] .custom-date-picker {
  background: var(--bg-card, #1e293b);
  border-color: var(--border, #334155);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .cdp-row input[type="date"] {
  background: var(--bg-secondary, #0f172a);
  border-color: var(--border, #334155);
  color-scheme: dark;
  color: var(--text-primary, #e2e8f0);
}
[data-theme="dark"] .cdp-row input[type="date"]:focus {
  border-color: var(--accent, #06b6d4);
}

/* Chart slot inside widget body — fills remaining vertical space */
.dash-widget-chart-slot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}
.dash-widget-chart-slot .biz-chart-wrap,
.dash-widget-chart-slot .traffic-barchart,
.dash-widget-chart-slot .traffic-empty-chart {
  flex: 1 1 auto;
  min-height: 0;
}
.dash-chart-slot-traffic .traffic-legend {
  flex-shrink: 0;
  padding-top: 6px;
}

/* Toolbar inside widget body (for tabs/actions) */
.dash-widget-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e5e5e5);
  margin-bottom: 4px;
}

.dash-widget-inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e5e5e5);
}

/* Resize handle */
.dash-widget-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  opacity: 0;
  z-index: 2;
  background:
    linear-gradient(135deg, transparent 50%, var(--accent, #06b6d4) 50%);
  transition: opacity 0.15s ease;
  border-bottom-right-radius: 9px;
}

/* Size tooltip during resize */
.dash-size-tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent, #06b6d4);
  color: var(--text-inverse, #fff);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Edit mode toolbar */
.dash-edit-toolbar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: var(--accent-50, #ecfeff);
  border: 1px solid var(--accent-200, #a5f3fc);
  border-radius: 8px;
  font-size: 13px;
  color: var(--accent-700, #0e7490);
}
[data-theme="dark"] .dash-edit-toolbar {
  background: rgba(6, 182, 212, 0.10);
  border-color: rgba(6, 182, 212, 0.30);
  color: var(--accent, #06b6d4);
}
.dash-edit-hint {
  font-weight: 500;
}

/* ===== Edit mode visual states ===== */
.dash-edit-mode .dash-widget {
  border-style: dashed;
  border-color: var(--accent, #06b6d4);
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.10);
}

.dash-edit-mode .dash-widget-header {
  cursor: grab;
  background: var(--accent-50, #ecfeff);
  border-bottom-color: var(--accent-200, #a5f3fc);
}
[data-theme="dark"] .dash-edit-mode .dash-widget-header {
  background: rgba(6, 182, 212, 0.08);
  border-bottom-color: rgba(6, 182, 212, 0.25);
}

.dash-edit-mode .dash-widget-drag-icon {
  display: inline-block;
}

.dash-edit-mode .dash-widget-resize-handle {
  opacity: 0.7;
}
.dash-edit-mode .dash-widget-resize-handle:hover {
  opacity: 1;
}

/* Dragging state */
.dash-widget-dragging {
  opacity: 0.85 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  z-index: 1000 !important;
  border-radius: 10px !important;
}

/* Resizing state */
.dash-widget-resizing {
  border-color: var(--accent, #06b6d4) !important;
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.20) !important;
}

/* Placeholder (drop target) */
.dash-widget-placeholder {
  background: rgba(6, 182, 212, 0.08);
  border: 2px dashed var(--accent, #06b6d4);
  border-radius: 10px;
  pointer-events: none;
}

/* Toast */
.dash-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text-primary, #1e293b);
  color: var(--text-inverse, #fff);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: var(--z-toast);
  box-shadow: 0 6px 20px rgba(0,0,0,0.20);
}
.dash-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-theme="dark"] .dash-toast {
  background: var(--bg-card, #1e2128);
  color: var(--text, #0f172a);
}

/* ===== Responsive ===== */

/* >= 1200px: full 12-col grid (default) */

@media (max-width: 1199px) {
  .dash-widget-grid {
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 80px;
    gap: 12px;
  }
  /* Scale down widget default sizes for 8-col: map widths proportionally */
  .dash-widget[data-widget-id="stats-overview"] { grid-column: span 8; }
  .dash-widget[data-widget-id="biz-kpi"] { grid-column: span 3; }
  .dash-widget[data-widget-id="biz-trend"] { grid-column: span 5; }
  .dash-widget[data-widget-id="traffic-trend"] { grid-column: span 5; }
  .dash-widget[data-widget-id="resource-perf"] { grid-column: span 3; }
  .dash-widget[data-widget-id="recent-reviews"] { grid-column: span 4; }
  .dash-widget[data-widget-id="recent-users"] { grid-column: span 4; }
}

@media (max-width: 1023px) {
  .dash-widget-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .dash-widget {
    width: 100% !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .dash-edit-btn {
    display: none;
  }
  .dash-edit-toolbar {
    display: none !important;
  }
  .dash-widget-drag-icon {
    display: none !important;
  }
  .dash-widget-resize-handle {
    display: none !important;
  }
  .dash-edit-mode .dash-widget {
    border-style: solid;
    border-color: var(--border, #e5e5e5);
    box-shadow: none;
  }
  .dash-edit-mode .dash-widget-header {
    cursor: default;
    background: var(--bg-secondary, #fafafa);
    border-bottom-color: var(--border, #e5e5e5);
  }
}

/* Narrow-screen hint for edit mode */
.dash-edit-narrow-hint {
  display: none;
  padding: 8px 12px;
  background: var(--bg-secondary, #fafafa);
  border: 1px dashed var(--border, #d4d4d4);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  margin-bottom: 12px;
  text-align: center;
}
@media (max-width: 1023px) {
  .dash-edit-narrow-hint { display: block; }
}

/* Widget-internal: progress bar in resource table */
.traffic-res-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-secondary, #f0f0f0);
  border-radius: 3px;
  overflow: hidden;
}
.traffic-res-bar-fill {
  height: 100%;
  background: var(--accent, #06b6d4);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Widget-internal: biz KPI 2x2 grid in widget body */
.biz-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.biz-kpi-card {
  padding: 10px 12px;
  background: var(--bg-secondary, #fafafa);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
}
.biz-kpi-label {
  font-size: 11px;
  color: var(--text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.biz-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.biz-kpi-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-tertiary, #94a3b8);
}