@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg-primary: #0a0f18;
  --bg-surface: #111a28;
  --bg-card: #162235;
  --bg-soft: #1d2b42;
  --bg-hover: #233450;
  --border-line: rgba(255, 255, 255, 0.09);
  --border-focus: #0968ef;
  
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-disabled: #64748b;
  
  --accent-blue: #0968ef;
  --accent-blue-hover: #0752be;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --accent-purple: #8b5cf6;
  
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 25px rgba(9, 104, 239, 0.25);
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
  --bg-primary: #f3f6fb;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-soft: #f8fafc;
  --bg-hover: #f1f5f9;
  --border-line: #e8edf5;
  --border-focus: #0968ef;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-disabled: #cbd5e1;
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.05);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "locl" 0, "numr" 0, "tnum" 1, "lnum" 1 !important;
}

body {
  font-family: 'Plus Jakarta Sans', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "locl" 0, "numr" 0, "tnum" 1, "lnum" 1 !important;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  direction: rtl;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.6;
}

/* Force English numerals across all sections and numbers */
.nav-sub-count, .kpi-num, .stat-value, .stat-card-val, .badge, 
.tag-chip, .post-views-text, .post-date, td, th, input[type="number"],
.bell-badge-count, .table-cell-date, .article-word-count, .studio-stat-val,
.date-text, time, .numeral, .post-row-item-modern, .post-actions-btns-row {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "locl" 0, "numr" 0 !important;
}

body[dir="ltr"] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
}

code, pre, .font-mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-soft);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

/* App Layout */
.app-container {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* Sidebar */
.sidebar {
  width: 290px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-line);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  flex-shrink: 0;
  transition: var(--transition-smooth);
  z-index: 100;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  box-sizing: border-box;
}

body[dir="ltr"] .sidebar {
  border-left: none;
  border-right: 1px solid var(--border-line);
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-line);
  margin-bottom: 16px;
}

.brand-logo-img {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(9, 104, 239, 0.35);
}

.brand-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(9, 104, 239, 0.18);
  color: var(--accent-cyan);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.brand-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

/* Sidebar Navigation Groups */
.nav-group {
  margin-bottom: 18px;
}

.nav-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
  position: relative;
}

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

.nav-item.active {
  background: linear-gradient(90deg, rgba(9, 104, 239, 0.16), transparent);
  color: var(--accent-cyan);
  font-weight: 700;
  border-right: 3px solid var(--accent-blue);
}

body[dir="ltr"] .nav-item.active {
  border-right: none;
  border-left: 3px solid var(--accent-blue);
  background: linear-gradient(270deg, rgba(9, 104, 239, 0.16), transparent);
}

.nav-icon {
  font-size: 16px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-badge {
  margin-right: auto;
  font-size: 10px;
  background: var(--bg-soft);
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
}

body[dir="ltr"] .nav-badge {
  margin-right: 0;
  margin-left: auto;
}

.nav-item.active .nav-badge {
  background: var(--accent-blue);
  color: #fff;
}

/* Sidebar Footer */
.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.active-account-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.active-account-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border-line);
}

.active-account-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.active-account-role {
  font-size: 10px;
  color: var(--accent-emerald);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Main Content Wrapper */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-primary);
}

/* Topbar */
.topbar {
  height: 64px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 90;
  backdrop-filter: blur(12px);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-selector-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  padding: 5px 12px;
  border-radius: var(--radius-xl);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.blog-selector-pill:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

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

/* Buttons */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text-primary);
  border: 1px solid var(--border-line);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.action-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-line);
}

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

.action-btn.primary:hover {
  background: var(--accent-blue-hover);
}

.action-btn.success {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: #fff;
}

.action-btn.danger {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.3);
  color: var(--accent-rose);
}

.action-btn.danger:hover {
  background: var(--accent-rose);
  color: #fff;
}

.action-btn.icon-only {
  width: 36px;
  padding: 0;
}

/* Content Body */
.content-body {
  padding: 24px;
  flex: 1;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.25s ease;
}

.tab-pane.active {
  display: block;
}

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

/* Card System */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-subtle);
}

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

.card-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(9, 104, 239, 0.4);
}

.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.stat-info h4 {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.stat-info h2 {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary);
}

/* Filter Toolbar */
.toolbar-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.search-input-wrap {
  position: relative;
  min-width: 240px;
}

.search-input-wrap input {
  width: 100%;
  height: 36px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  padding: 0 32px 0 12px;
  color: var(--text-primary);
  font-size: 12.5px;
  outline: none;
}

body[dir="ltr"] .search-input-wrap input {
  padding: 0 12px 0 32px;
}

.search-input-wrap input:focus {
  border-color: var(--accent-blue);
}

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

body[dir="ltr"] .search-icon-pos {
  right: auto;
  left: 10px;
}

/* Select & Inputs */
.form-control {
  width: 100%;
  height: 38px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: var(--transition-fast);
}

.form-control:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(9, 104, 239, 0.2);
}

textarea.form-control {
  height: auto;
  padding: 12px;
  resize: vertical;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* Table Design */
.data-table-container {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-line);
}

.posts-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: 13px;
}

body[dir="ltr"] .posts-table {
  text-align: left;
}

.posts-table th {
  background: var(--bg-soft);
  color: var(--text-muted);
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-line);
  white-space: nowrap;
}

.posts-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-line);
  vertical-align: middle;
}

.posts-table tbody tr:hover {
  background: var(--bg-soft);
}

.post-row-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.post-thumb {
  width: 58px;
  height: 42px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  background: var(--bg-soft);
  flex-shrink: 0;
}

.post-title-link {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  transition: var(--transition-fast);
}

.post-title-link:hover {
  color: var(--accent-cyan);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.badge.ar {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.badge.en {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge.live {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
}

.badge.draft {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
}

/* Article Studio Editor Grid */
.editor-grid-pro {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
}

@media (max-width: 1024px) {
  .editor-grid-pro {
    grid-template-columns: 1fr;
  }
}

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  flex-wrap: wrap;
}

.editor-btn {
  height: 30px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.editor-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-line);
}

.editor-divider {
  width: 1px;
  height: 20px;
  background: var(--border-line);
  margin: 0 4px;
}

.rich-editor-box {
  min-height: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 18px;
  color: var(--text-primary);
  font-size: 14.5px;
  line-height: 1.8;
  outline: none;
  overflow-y: auto;
}

.rich-editor-box:focus {
  border-color: var(--accent-blue);
}

/* Reusable Content Components Inside Editor & Posts */
.studio-box, .tekmilo-box {
  padding: 16px;
  border-radius: var(--radius-sm);
  margin: 18px 0;
  border-right: 4px solid;
}

body[dir="ltr"] .studio-box, .tekmilo-box {
  border-right: none;
  border-left: 4px solid;
}

.studio-tip, .tekmilo-tip {
  background: rgba(16, 185, 129, 0.08);
  border-color: var(--accent-emerald);
  color: var(--text-primary);
}

.studio-info, .tekmilo-info {
  background: rgba(9, 104, 239, 0.08);
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.studio-warning, .tekmilo-warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: var(--accent-amber);
  color: var(--text-primary);
}

.tekmilo-danger {
  background: rgba(244, 63, 94, 0.08);
  border-color: var(--accent-rose);
  color: var(--text-primary);
}

.tekmilo-code-block {
  background: #0d131f;
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  margin: 18px 0;
  overflow: hidden;
}

.tekmilo-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  color: var(--text-muted);
  font-family: monospace;
}

.tekmilo-code-copy-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}

.tekmilo-code-copy-btn:hover {
  background: var(--accent-blue);
  color: #fff;
}

/* SERP Google Preview Snippet */
.serp-preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 14px;
}

.serp-url {
  font-size: 11.5px;
  color: #bdc1c6;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.serp-title {
  font-size: 16px;
  color: #8ab4f8;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 4px;
  line-height: 1.3;
}

.serp-title:hover {
  text-decoration: underline;
}

.serp-desc {
  font-size: 12.5px;
  color: #bdc1c6;
  line-height: 1.5;
}

/* Media Gallery Grid */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

.media-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: var(--transition-fast);
}

.media-item-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-blue);
}

.media-item-thumb {
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: var(--bg-soft);
}

.media-item-body {
  padding: 10px;
}

.media-item-name {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.media-item-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
}

/* Blog Discovery Card */
.blog-card {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  transition: var(--transition-fast);
}

.blog-card.active-blog {
  border-color: var(--accent-blue);
  background: rgba(9, 104, 239, 0.05);
}

.blog-card-info h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.blog-card-url {
  font-size: 12px;
  color: var(--accent-cyan);
  text-decoration: none;
}

/* Modal System */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.modal-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-card);
}

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

.modal-title {
  font-size: 16px;
  font-weight: 800;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-line);
  background: var(--bg-soft);
}

/* Toast Container */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

body[dir="ltr"] .toast-container {
  left: auto;
  right: 24px;
}

.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-card);
  animation: slideIn 0.3s ease;
  min-width: 280px;
  max-width: 420px;
}

.toast-success { border-color: var(--accent-emerald); }
.toast-error { border-color: var(--accent-rose); }
.toast-warning { border-color: var(--accent-amber); }
.toast-info { border-color: var(--accent-blue); }

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

/* Magical Search Input */
.magical-search-wrap {
  position: relative;
  min-width: 280px;
}
.magical-search-wrap input {
  width: 100%;
  height: 38px;
  background: var(--bg-soft);
  border: 1.5px solid rgba(9, 104, 239, 0.3);
  border-radius: var(--radius-sm);
  padding: 0 36px 0 14px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 12px rgba(9, 104, 239, 0.08);
}
body[dir="ltr"] .magical-search-wrap input {
  padding: 0 14px 0 36px;
}
.magical-search-wrap input:focus {
  border-color: var(--accent-cyan);
  background: var(--bg-card);
  box-shadow: 0 0 22px rgba(6, 182, 212, 0.35);
}

/* Step-by-Step Google Setup Guide Card */
.guide-step-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  transition: all 0.2s ease;
}
.guide-step-card:hover {
  border-color: var(--accent-blue);
  transform: translateX(-2px);
}
body[dir="ltr"] .guide-step-card:hover {
  transform: translateX(2px);
}
.guide-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(9, 104, 239, 0.3);
}
.guide-step-content {
  flex: 1;
}
.guide-step-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide-step-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}
.guide-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 11.5px;
  text-decoration: none;
  margin-top: 4px;
}
.guide-link-btn:hover {
  text-decoration: underline;
}

/* Dependency Alert Box */
.dependency-alert-box {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.6;
}
.dependency-alert-box.danger {
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: var(--accent-rose);
}
.dependency-alert-box.safe {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--accent-emerald);
}


/* =============================================================
   TEKMILO STUDIO PRO - ULTRA MODERN UI REDESIGN (MATCHING TARGET MOCK)
   ============================================================= */

/* Brand Header in Sidebar */
.brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 18px 14px;
  border-bottom: 1px solid var(--border-line);
  margin-bottom: 16px;
  position: relative;
}

.brand-badge-pro {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #bfdbfe;
  letter-spacing: 0.5px;
}

[data-theme="dark"] .brand-badge-pro {
  background: rgba(37, 99, 235, 0.2);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
}

.brand-text-wrap {
  text-align: right;
  flex: 1;
  margin-right: 10px;
}

body[dir="ltr"] .brand-text-wrap {
  text-align: left;
  margin-right: 0;
  margin-left: 10px;
}

.brand-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.brand-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}

.brand-active-indicator {
  width: 4px;
  height: 28px;
  background: var(--accent-blue);
  border-radius: 4px;
}

/* Sidebar Menu Items */
.sidebar .nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  margin: 0;
}

.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

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

.sidebar .nav-item.active {
  background: #0968ef !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(9, 104, 239, 0.35);
  border: none;
}

.sidebar .nav-item.active .nav-icon,
.sidebar .nav-item.active .nav-label,
.sidebar .nav-item.active .nav-chevron {
  color: #ffffff !important;
}

.sidebar .nav-item.active .nav-badge-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.nav-chevron {
  margin-left: 0;
  margin-right: auto;
  font-size: 16px;
  color: var(--text-muted);
  font-weight: bold;
}

body[dir="ltr"] .nav-chevron {
  margin-right: 0;
  margin-left: auto;
  transform: rotate(180deg);
}

.nav-badge-count {
  background: var(--bg-soft);
  color: var(--text-muted);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  margin-right: auto;
}

body[dir="ltr"] .nav-badge-count {
  margin-left: auto;
  margin-right: 6px;
}

/* Sidebar User Footer */
.sidebar-user-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-line);
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-user-card:hover {
  background: var(--bg-hover);
  border-color: var(--accent-blue);
}

.sidebar-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-line);
}

.sidebar-user-info {
  flex: 1;
  overflow: hidden;
}

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

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

.sidebar-user-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
}

.sidebar-accounts-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.sidebar-accounts-pill:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.accounts-badge-num {
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
}

.google-g-badge {
  font-weight: 900;
  color: #4285f4;
  font-size: 12px;
}

.sidebar-logout-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.sidebar-logout-link:hover {
  color: var(--accent-rose);
}

/* =============================================================
   TOPBAR REDESIGN
   ============================================================= */
.topbar {
  height: 68px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 90;
}

/* Global Search Box (Right side in RTL) */
.topbar-search-wrap {
  width: 380px;
  position: relative;
}

.topbar-search-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.topbar-search-box input {
  width: 100%;
  height: 40px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-radius: 12px;
  padding: 0 40px 0 95px;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s;
  font-family: inherit;
}

body[dir="ltr"] .topbar-search-box input {
  padding: 0 95px 0 40px;
}

.topbar-search-box input:focus {
  border-color: var(--accent-blue);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(9, 104, 239, 0.15);
}

.topbar-search-box .search-icon-pos {
  position: absolute;
  right: 14px;
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

body[dir="ltr"] .topbar-search-box .search-icon-pos {
  right: auto;
  left: 14px;
}

.topbar-search-box .search-kbd-shortcut {
  position: absolute;
  left: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  pointer-events: none;
}

body[dir="ltr"] .topbar-search-box .search-kbd-shortcut {
  left: auto;
  right: 36px;
}

.topbar-search-box .search-expand-btn {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
}

body[dir="ltr"] .topbar-search-box .search-expand-btn {
  left: auto;
  right: 12px;
}

/* Topbar Controls (Left side in RTL) */
.topbar-controls-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-selector-dropdown-container {
  position: relative;
}

.blog-selector-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.blog-selector-dropdown-btn:hover {
  border-color: var(--accent-blue);
  background: var(--bg-hover);
}

.blog-globe-icon {
  font-size: 14px;
}

.blog-name-text {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-chevron-down {
  font-size: 10px;
  color: var(--text-muted);
}

.blog-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 1000;
}

body[dir="ltr"] .blog-dropdown-menu {
  right: auto;
  left: 0;
}

.blog-dropdown-menu.active {
  display: flex;
}

.blog-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.blog-dropdown-item:hover {
  background: var(--bg-soft);
}

.blog-dropdown-item.active {
  background: rgba(9, 104, 239, 0.1);
  border: 1px solid rgba(9, 104, 239, 0.3);
}

.topbar-icon-pill {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

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

.bell-badge-count {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-rose);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-theme-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  padding: 0 12px;
}

.topbar-pill-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.topbar-pill-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-blue);
}

/* =============================================================
   KPI STATS ROW (6 CARDS)
   ============================================================= */
.kpi-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

@media (max-width: 1400px) {
  .kpi-metric-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .kpi-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-subtle);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--accent-blue);
}

.kpi-card-content {
  display: flex;
  flex-direction: column;
}

.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 26px;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-primary);
  line-height: 1.1;
}

.kpi-value.kpi-latency {
  font-size: 18px;
}

.kpi-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}

.kpi-icon-blue {
  background: #eff6ff;
  color: #2563eb;
}
[data-theme="dark"] .kpi-icon-blue {
  background: rgba(37, 99, 235, 0.18);
  color: #60a5fa;
}

.kpi-icon-green {
  background: #ecfdf5;
  color: #059669;
  font-size: 14px;
}
[data-theme="dark"] .kpi-icon-green {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}

.kpi-icon-sky {
  background: #f0f9ff;
  color: #0284c7;
  font-size: 14px;
}
[data-theme="dark"] .kpi-icon-sky {
  background: rgba(2, 132, 199, 0.18);
  color: #38bdf8;
}

.kpi-icon-orange {
  background: #fff7ed;
  color: #ea580c;
}
[data-theme="dark"] .kpi-icon-orange {
  background: rgba(234, 88, 12, 0.18);
  color: #fb923c;
}

.kpi-icon-purple {
  background: #f5f3ff;
  color: #7c3aed;
}
[data-theme="dark"] .kpi-icon-purple {
  background: rgba(124, 58, 237, 0.18);
  color: #a78bfa;
}

.kpi-icon-yellow {
  background: #fefce8;
  color: #ca8a04;
}
[data-theme="dark"] .kpi-icon-yellow {
  background: rgba(202, 138, 4, 0.18);
  color: #facc15;
}

/* =============================================================
   DASHBOARD MAIN TWO-COLUMN LAYOUT
   ============================================================= */
.dashboard-two-col-grid {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1100px) {
  .dashboard-two-col-grid {
    grid-template-columns: 1fr;
  }
}

.modern-panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-subtle);
  margin-bottom: 20px;
}

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

.panel-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.panel-collapse-trigger {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
}

/* Quick Actions List */
.quick-actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13px;
  text-align: right;
  font-family: inherit;
}

body[dir="ltr"] .quick-action-item {
  text-align: left;
}

.quick-action-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent-blue);
  transform: translateX(-3px);
}

body[dir="ltr"] .quick-action-item:hover {
  transform: translateX(3px);
}

.qa-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.qa-blue { background: #0968ef; }
.qa-purple { background: #8b5cf6; }
.qa-green { background: #10b981; }
.qa-orange { background: #f59e0b; }

/* Blogger Connection Status Body */
.blogger-conn-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blogger-status-pill-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.blogger-live-pill {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

[data-theme="dark"] .blogger-live-pill {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

.btn-sync-spin-pill {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: transform 0.2s;
}

.btn-sync-spin-pill:hover {
  transform: rotate(180deg);
}

.blogger-meta-table {
  display: flex;
  flex-direction: column;
}

.blogger-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border-line);
  font-size: 12.5px;
}

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

.blogger-meta-row .meta-label {
  color: var(--text-muted);
}

.blogger-meta-row .meta-val {
  color: var(--text-primary);
  font-weight: 600;
}

.blogger-meta-row .highlight-val {
  color: var(--accent-blue);
  font-weight: 700;
}

.blogger-meta-row .check-mark {
  color: var(--accent-emerald);
  font-weight: 800;
  margin-right: 4px;
}

.blogger-settings-action-btn {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  transition: all 0.2s;
  font-family: inherit;
}

.blogger-settings-action-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-blue);
}

/* =============================================================
   POSTS OVERVIEW CARD & TABLE
   ============================================================= */
.posts-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.posts-overview-title-wrap {
  text-align: right;
}

body[dir="ltr"] .posts-overview-title-wrap {
  text-align: left;
}

.posts-overview-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

.posts-overview-subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.btn-view-all-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-view-all-pill:hover {
  background: var(--bg-hover);
  border-color: var(--accent-blue);
}

/* Overview Toolbar */
.overview-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-radius: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.overview-search-box {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.overview-search-box input {
  width: 100%;
  height: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: 8px;
  padding: 0 34px 0 12px;
  font-size: 12.5px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}

body[dir="ltr"] .overview-search-box input {
  padding: 0 12px 0 34px;
}

.overview-search-box .ov-search-icon {
  position: absolute;
  right: 12px;
  top: 9px;
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}

body[dir="ltr"] .overview-search-box .ov-search-icon {
  right: auto;
  left: 12px;
}

.overview-filters-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ov-select {
  height: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

.ov-filter-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Modern Overview Table */
.overview-table-container {
  overflow-x: auto;
}

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

.overview-modern-table th {
  padding: 12px 14px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11.5px;
  border-bottom: 1px solid var(--border-line);
  text-align: right;
  white-space: nowrap;
}

body[dir="ltr"] .overview-modern-table th {
  text-align: left;
}

.overview-modern-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-line);
  color: var(--text-primary);
  vertical-align: middle;
}

.overview-modern-table tr:hover td {
  background: var(--bg-soft);
}

.post-row-item-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

.post-thumb-modern {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-line);
  flex-shrink: 0;
}

.post-title-modern {
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  display: block;
  font-size: 13px;
  line-height: 1.4;
  transition: color 0.15s;
}

.post-title-modern:hover {
  color: var(--accent-blue);
}

.post-badge-lang {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.post-badge-lang.en {
  background: #dbeafe;
  color: #1d4ed8;
}

[data-theme="dark"] .post-badge-lang.en {
  background: rgba(29, 78, 216, 0.25);
  color: #93c5fd;
}

.post-badge-lang.ar {
  background: #dcfce7;
  color: #15803d;
}

[data-theme="dark"] .post-badge-lang.ar {
  background: rgba(21, 128, 61, 0.25);
  color: #86efac;
}

.post-badge-cat {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.post-views-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.post-actions-btns-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.post-act-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.15s;
}

.post-act-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

/* =============================================================
   LOWER ANALYTICS ROW (3 CARDS)
   ============================================================= */
.analytics-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

@media (max-width: 1200px) {
  .analytics-cards-row {
    grid-template-columns: 1fr;
  }
}

.analytics-card {
  margin-bottom: 0;
  padding: 18px;
}

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

.analytics-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.analytics-period-select {
  height: 28px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}

/* Donut Chart Container */
.donut-chart-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
  min-height: 160px;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.donut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.donut-dot-en { background: #0968ef; }
.donut-dot-ar { background: #10b981; }
.donut-dot-other { background: #94a3b8; }

/* Top Categories Progress Bars */
.top-categories-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0;
}

.top-cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-cat-icon-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.top-cat-name {
  width: 130px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-cat-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
}

.top-cat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.top-cat-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  width: 16px;
  text-align: left;
}

body[dir="ltr"] .top-cat-count {
  text-align: right;
}

/* ==========================================================================
   TEKMILO STUDIO PRO — PIXEL-ACCURATE ARTICLE STUDIO & UNIFIED LAYOUT
   ========================================================================== */

/* Topbar Unified Full-Width Layout */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 24px;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-line);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Brand header in topbar */
.brand-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 19px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.brand-badge-pro {
  background: rgba(0, 210, 255, 0.15);
  color: #00d2ff;
  border: 1px solid rgba(0, 210, 255, 0.3);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.brand-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 1px;
}

/* User Profile in Top Right */
.topbar-user-profile-menu-container {
  position: relative;
}

.topbar-user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 6px;
  border-radius: 30px;
  cursor: pointer;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  transition: var(--transition-fast);
}

.topbar-user-profile:hover {
  background: var(--bg-hover);
  border-color: rgba(9, 104, 239, 0.3);
}

.topbar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--accent-blue);
}

.topbar-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
}

.topbar-user-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.topbar-user-email {
  font-size: 10.5px;
  color: var(--text-muted);
}

.topbar-user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 8px 0;
  z-index: 1050;
  backdrop-filter: blur(16px);
}

.topbar-user-dropdown-menu .dropdown-header {
  padding: 8px 16px 10px;
}

.topbar-user-dropdown-menu .user-display {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.topbar-user-dropdown-menu .user-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.topbar-user-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.topbar-user-dropdown-menu .dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.topbar-user-dropdown-menu .dropdown-item.text-danger {
  color: var(--accent-rose);
}

/* Sidebar Connected Blogs Footer */
.sidebar-blogs-footer {
  padding: 16px;
  border-top: 1px solid var(--border-line);
  background: rgba(0, 0, 0, 0.1);
}

.sidebar-blogs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sidebar-blogs-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.sidebar-add-blog-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.sidebar-add-blog-btn:hover {
  background: var(--accent-blue);
  color: #fff;
}

.sidebar-blogs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-blog-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  cursor: pointer;
  transition: var(--transition-fast);
}

.sidebar-blog-item:hover,
.sidebar-blog-item.active {
  background: var(--bg-hover);
  border-color: rgba(9, 104, 239, 0.4);
}

.sidebar-blog-item.active {
  box-shadow: 0 0 12px rgba(9, 104, 239, 0.15);
}

.sidebar-blog-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 104, 239, 0.15);
  font-size: 13px;
  flex-shrink: 0;
}

.sidebar-blog-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-blog-meta {
  flex: 1;
  min-width: 0;
}

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

.sidebar-blog-url {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-blog-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-disabled);
  flex-shrink: 0;
}

.sidebar-blog-status-dot.online {
  background: var(--accent-emerald);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

/* Sidebar Sub-Menu */
.nav-item.has-subitems {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

.nav-item-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 12px;
  width: 100%;
  cursor: pointer;
}

.nav-sub-arrow {
  margin-inline-start: auto;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.nav-item.has-subitems.expanded .nav-sub-arrow {
  transform: rotate(-90deg);
}

.nav-sub-menu {
  list-style: none;
  margin: 0;
  padding: 4px 8px 8px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

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

.nav-sub-item.active {
  background: rgba(9, 104, 239, 0.15);
  color: var(--accent-blue);
  font-weight: 700;
  border-inline-start: 2px solid var(--accent-blue);
}

.nav-sub-add-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.nav-badge-ai {
  background: linear-gradient(135deg, #0968ef, #8b5cf6);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  margin-inline-start: auto;
}

/* ==========================================================================
   ARTICLE STUDIO 3-COLUMN WORKSPACE
   ========================================================================== */
.article-studio-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.studio-center-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.studio-right-sidebar {
  width: 290px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 1. Studio Header Card */
.studio-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-subtle);
}

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

.studio-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(9, 104, 239, 0.12);
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.studio-page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.studio-page-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.studio-mode-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  padding: 4px;
  border-radius: 30px;
  border: 1px solid var(--border-line);
}

.studio-mode-pill {
  padding: 6px 14px;
  border-radius: 20px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.studio-mode-pill:hover {
  color: var(--text-primary);
}

.studio-mode-pill.active {
  background: var(--accent-blue);
  color: #fff;
  box-shadow: 0 2px 10px rgba(9, 104, 239, 0.4);
}

/* 2. Bilingual Titles Row */
.studio-titles-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.studio-title-card {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-subtle);
}

.studio-title-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.studio-title-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.studio-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.char-count {
  font-size: 11px;
  color: var(--text-muted);
}

.studio-input-with-badge {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-tag-badge {
  position: absolute;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  z-index: 2;
}

.lang-tag-badge.ar {
  right: 10px;
  background: rgba(16, 185, 129, 0.2);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.lang-tag-badge.en {
  left: 10px;
  background: rgba(9, 104, 239, 0.2);
  color: var(--accent-blue);
  border: 1px solid rgba(9, 104, 239, 0.4);
}

.studio-title-input {
  width: 100%;
  height: 42px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  padding: 0 14px;
  outline: none;
  transition: var(--transition-fast);
}

.studio-title-input.rtl {
  direction: rtl;
  padding-right: 42px;
}

.studio-title-input.ltr {
  direction: ltr;
  padding-left: 42px;
}

.studio-title-input:focus {
  border-color: var(--border-focus);
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px rgba(9, 104, 239, 0.15);
}

/* 3. Metadata Row */
.studio-metadata-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  align-items: end;
}

.metadata-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metadata-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.permalink-input-group {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 40px;
}

.permalink-prefix {
  padding: 0 10px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.15);
  height: 100%;
  display: flex;
  align-items: center;
  direction: ltr;
  border-inline-end: 1px solid var(--border-line);
}

.permalink-slug-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 12px;
  padding: 0 10px;
  outline: none;
  direction: ltr;
}

.permalink-generate-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  background: rgba(9, 104, 239, 0.15);
  color: var(--accent-blue);
  border: 1px solid rgba(9, 104, 239, 0.3);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  margin: 0 6px;
  transition: var(--transition-fast);
}

.permalink-generate-btn:hover {
  background: var(--accent-blue);
  color: #fff;
}

.permalink-settings-btn {
  width: 32px;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: var(--transition-fast);
}

.permalink-settings-btn:hover {
  color: var(--text-primary);
}

.custom-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.studio-select {
  width: 100%;
  height: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  padding: 0 14px;
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.studio-select:focus {
  border-color: var(--border-focus);
}

.select-chevron {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-size: 11px;
  pointer-events: none;
}

/* 4. Rich Text Editor Workspace */
.studio-editor-card {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.editor-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-line);
  flex-wrap: wrap;
}

.editor-toolbar-row.primary-row {
  background: rgba(0, 0, 0, 0.15);
}

.editor-toolbar-row.secondary-row {
  background: rgba(0, 0, 0, 0.08);
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--border-line);
  margin: 0 4px;
}

.toolbar-icons-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dropdown-btn-wrap {
  position: relative;
}

.toolbar-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.toolbar-dropdown-btn:hover {
  background: var(--bg-hover);
  border-color: rgba(9, 104, 239, 0.3);
}

.toolbar-dropdown-btn.btn-ai-assistant {
  background: linear-gradient(135deg, #0968ef, #1e40af);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(9, 104, 239, 0.3);
}

.toolbar-dropdown-btn.btn-ai-assistant:hover {
  background: linear-gradient(135deg, #0752be, #1e3a8a);
}

.toolbar-dropdown-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 6px 0;
  z-index: 100;
  display: none;
}

.toolbar-dropdown-popover.show {
  display: block;
}

.dropdown-popover-item {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.tool-icon-btn,
.format-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition-fast);
}

.tool-icon-btn:hover,
.format-btn:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
  border-color: var(--border-line);
}

.tool-icon-btn.active,
.format-btn.active {
  background: rgba(9, 104, 239, 0.18);
  color: var(--accent-blue);
  border-color: rgba(9, 104, 239, 0.4);
}

.select-sm {
  width: 110px;
}

.studio-select-sm {
  width: 100%;
  height: 28px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 8px;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.color-accent-btn {
  position: relative;
  flex-direction: column;
  gap: 1px;
}

.color-bar-indicator {
  width: 14px;
  height: 3px;
  background: #facc15;
  border-radius: 2px;
}

/* Editor Viewport & Contenteditable */
.editor-content-viewport {
  position: relative;
  min-height: 360px;
  background: var(--bg-surface);
}

.editor-wysiwyg-content {
  min-height: 360px;
  padding: 24px;
  outline: none;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-primary);
  direction: rtl;
  text-align: right;
}

.editor-wysiwyg-content[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

.editor-raw-textarea {
  width: 100%;
  min-height: 360px;
  background: var(--bg-surface);
  border: none;
  color: #38bdf8;
  font-family: 'Consolas', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 20px;
  outline: none;
  resize: vertical;
  direction: ltr;
}

.editor-live-preview-box {
  min-height: 360px;
  padding: 24px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.8;
}

/* Status Bar */
.editor-footer-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid var(--border-line);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   5. BOTTOM 4 CONTENT PANELS
   ========================================================================== */
.studio-bottom-panels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.bottom-panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-subtle);
}

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

.panel-icon {
  font-size: 15px;
}

.panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Featured Image Dropzone */
.featured-image-dropzone {
  border: 1.5px dashed rgba(9, 104, 239, 0.4);
  background: rgba(9, 104, 239, 0.04);
  border-radius: 10px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.featured-image-dropzone:hover,
.featured-image-dropzone.drag-active {
  background: rgba(9, 104, 239, 0.1);
  border-color: var(--accent-blue);
}

.dropzone-cloud-icon {
  color: var(--accent-blue);
  margin-bottom: 6px;
}

.dropzone-primary-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.dropzone-secondary-text {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.dropzone-specs-text {
  font-size: 9.5px;
  color: var(--text-disabled);
  margin-top: 4px;
}

.dropzone-preview-view {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
}

.dropzone-preview-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dropzone-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-panel-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-line);
}

.toggle-label {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Image Gallery Grid */
.gallery-tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: 1;
}

.gallery-add-tile {
  border: 1.5px dashed var(--border-line);
  background: var(--bg-soft);
  border-radius: 8px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.gallery-add-tile:hover {
  border-color: var(--accent-blue);
  background: rgba(9, 104, 239, 0.08);
}

.add-plus-icon {
  font-size: 16px;
  color: var(--accent-blue);
  font-weight: 700;
}

.add-tile-label {
  font-size: 9.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.gallery-item-tile {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 64px;
  border: 1px solid var(--border-line);
  cursor: pointer;
}

.gallery-item-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.gallery-item-tile:hover img {
  transform: scale(1.05);
}

.gallery-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: none;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Article Summary Panel */
.summary-lang-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.summary-pill {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-line);
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.summary-pill.active {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}

.summary-textarea-wrap {
  flex: 1;
}

.summary-textarea {
  width: 100%;
  height: 90px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  padding: 8px 10px;
  outline: none;
  resize: none;
  line-height: 1.5;
  transition: var(--transition-fast);
}

.summary-textarea:focus {
  border-color: var(--border-focus);
}

.summary-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.summary-char-count {
  font-size: 11px;
  color: var(--text-muted);
}

.btn-ai-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, #0968ef, #1e40af);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-ai-summary:hover {
  background: linear-gradient(135deg, #0752be, #1d4ed8);
}

/* Tags & Labels Panel */
.tags-input-wrap {
  margin-bottom: 10px;
}

.tags-input {
  width: 100%;
  height: 34px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 11.5px;
  padding: 0 10px;
  outline: none;
  transition: var(--transition-fast);
}

.tags-input:focus {
  border-color: var(--border-focus);
}

.tags-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(9, 104, 239, 0.12);
  border: 1px solid rgba(9, 104, 239, 0.25);
  color: #60a5fa;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.tag-chip button {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* ==========================================================================
   RIGHT PUBLISHING SIDEBAR PANELS
   ========================================================================== */
.sidebar-action-card {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
}

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

.action-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.action-card-icon {
  font-size: 13px;
  color: var(--text-muted);
}

/* Big Green Publish Button */
.publish-now-split-btn-wrap {
  display: flex;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  margin-bottom: 12px;
}

.btn-publish-now {
  flex: 1;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-publish-now:hover {
  background: linear-gradient(135deg, #059669, #047857);
}

.btn-publish-dropdown {
  width: 36px;
  background: #059669;
  border: none;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.publish-sub-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.btn-sub-action {
  height: 36px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition-fast);
}

.btn-sub-action:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: rgba(9, 104, 239, 0.3);
}

/* Sidebar Sub Sections */
.sidebar-sub-section {
  padding-top: 14px;
  border-top: 1px solid var(--border-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sub-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sub-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.sub-section-caret {
  font-size: 10px;
  color: var(--text-muted);
}

.radio-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}

.radio-option-item input[type="radio"] {
  accent-color: var(--accent-blue);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.radio-calendar-icon {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--text-muted);
}

.toggles-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toggle-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-option-label {
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* Switch Toggle Styling */
.switch-toggle-wrap {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.switch-toggle-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-line);
  transition: .3s;
  border-radius: 20px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.switch-toggle-wrap input:checked + .toggle-slider {
  background-color: var(--accent-blue);
}

.switch-toggle-wrap input:checked + .toggle-slider:before {
  transform: translateX(16px);
}

/* Smart Links Card */
.smart-link-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.smart-link-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 11.5px;
  padding: 0 10px;
  outline: none;
}

.smart-link-input:focus {
  border-color: var(--border-focus);
}

.btn-smart-link-add {
  height: 34px;
  padding: 0 14px;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-smart-link-add:hover {
  background: var(--accent-blue-hover);
}

.smart-links-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.smart-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-line);
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: 11px;
}

.smart-link-chip button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

.smart-link-chip button:hover {
  color: var(--accent-rose);
}

/* Additional Content 6-Button Grid */
.additional-content-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-content-block {
  height: 48px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  transition: var(--transition-fast);
}

.btn-content-block:hover {
  background: var(--bg-hover);
  border-color: rgba(9, 104, 239, 0.4);
  transform: translateY(-1px);
}

.content-block-icon {
  font-size: 15px;
  color: var(--accent-blue);
}

/* Match Reference Layout: Sidebar on LEFT, Studio in CENTER, Publishing on RIGHT */
.app-container {
  display: flex;
  flex-direction: row !important;
  min-height: 100vh;
  position: relative;
  direction: ltr !important;
}

.sidebar {
  width: 230px !important;
  flex-shrink: 0 !important;
  direction: rtl !important;
  border-inline-end: 1px solid var(--border-line) !important;
}

.topbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 24px !important;
  direction: rtl !important;
}

html[dir="ltr"] .topbar {
  direction: ltr !important;
}

.topbar-section-start,
.topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  direction: inherit !important;
}

.topbar-search-wrap {
  flex: 0 1 380px !important;
  margin-inline-start: auto !important;
  margin-inline-end: 20px !important;
  position: relative !important;
}

.topbar-controls-wrap,
.topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  direction: inherit !important;
}

.article-studio-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  align-items: flex-start !important;
  width: 100% !important;
  direction: ltr !important;
}

.studio-center-workspace {
  flex: 1 !important;
  direction: rtl !important;
  min-width: 0 !important;
}

.studio-right-sidebar {
  width: 280px !important;
  flex-shrink: 0 !important;
  direction: rtl !important;
}

/* ==========================================================================
   TEKMILO STUDIO PRO — GALLERY, NAVIGATION & VISUAL REFINEMENTS
   ========================================================================== */

/* 1. Fix Tag Chips Vertical Stretching */
.tags-chips-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-content: flex-start !important;
  align-items: center !important;
  min-height: 80px !important;
  width: 100% !important;
  padding-top: 4px;
}

.tag-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  height: 28px !important;
  background: rgba(9, 104, 239, 0.12) !important;
  border: 1px solid rgba(9, 104, 239, 0.25) !important;
  color: #60a5fa !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  flex: none !important;
}

.tag-chip button {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* 2. Navigation Highlighting Refinement (Only ONE active item highlighted) */
.nav-item.has-subitems.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.nav-item.has-subitems.expanded > .nav-item-header {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.nav-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  margin-bottom: 2px;
}

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

.nav-sub-item.active {
  background: var(--accent-blue) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-inline-start: none !important;
  box-shadow: 0 4px 14px rgba(9, 104, 239, 0.35) !important;
}

.nav-sub-count {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--text-muted);
  border: 1px solid var(--border-line);
  margin-inline-start: auto;
  line-height: 1.4;
}

.nav-sub-item.active .nav-sub-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* 3. Per-Article Gallery Layout Selector & Tiles */
.gallery-layout-selector-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-line);
}

.layout-selector-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.gallery-layout-pills {
  display: flex;
  gap: 4px;
  flex: 1;
}

.gallery-layout-pill {
  flex: 1;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-line);
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  text-align: center;
}

.gallery-layout-pill:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.gallery-layout-pill.active {
  background: rgba(9, 104, 239, 0.2);
  color: var(--accent-blue);
  border-color: var(--accent-blue);
  font-weight: 700;
}

.gallery-count-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(9, 104, 239, 0.15);
  color: var(--accent-blue);
  border: 1px solid rgba(9, 104, 239, 0.3);
}

.gallery-item-tile {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 68px;
  border: 1px solid var(--border-line);
  cursor: pointer;
  background: var(--bg-soft);
}

.gallery-item-tile img {
  width: 100%;
  height: 68px;
  object-fit: cover;
  display: block;
}

.gallery-order-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-settings-btn {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: none;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-bottom-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-line);
}

.btn-insert-gallery-into-article {
  flex: 1;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, #0968ef, #1e40af);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition-fast);
  box-shadow: 0 2px 8px rgba(9, 104, 239, 0.25);
}

.btn-insert-gallery-into-article:hover {
  background: linear-gradient(135deg, #0752be, #1d4ed8);
  box-shadow: 0 4px 12px rgba(9, 104, 239, 0.4);
}

.btn-clear-gallery {
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border-line);
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-clear-gallery:hover {
  color: var(--accent-rose);
  border-color: rgba(244, 63, 94, 0.3);
}

/* 4. Modal Dialogs */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  width: 100%;
  overflow: hidden;
  animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  direction: rtl;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

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

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

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
}

.modal-body {
  padding: 16px 18px;
}

.modal-footer {
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.1);
}


/* -------------------------------------------------------------
   SMART LINKS, TRANSLATION, HTML MODE & IMAGE SIZE STYLING
   ------------------------------------------------------------- */

/* Auto Translation Buttons */
.btn-translate-field {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.btn-translate-field:hover {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  border-color: #3b82f6;
  transform: translateY(-1px);
}
.btn-translate-summary {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #a78bfa;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}
.btn-translate-summary:hover {
  background: rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
  border-color: #8b5cf6;
}

/* HTML Mode Toolbar & Editor */
.html-mode-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #09101d;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  gap: 12px;
}
.html-mode-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.code-badge {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.code-desc {
  font-size: 11.5px;
  color: var(--text-muted);
}
.html-mode-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-html-action {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-html-action:hover {
  background: rgba(59, 130, 246, 0.15);
  color: var(--text-primary);
  border-color: var(--accent-blue);
}
.btn-html-action.primary {
  background: #2563eb;
  color: #ffffff;
  border-color: #3b82f6;
}
.btn-html-action.primary:hover {
  background: #1d4ed8;
}

#art-editor-html {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #7dd3fc !important;
  background: #050b14 !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: 0 0 8px 8px !important;
  padding: 16px 20px !important;
  tab-size: 2 !important;
  width: 100% !important;
  min-height: 480px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  outline: none !important;
  direction: ltr !important;
  text-align: left !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
}
#art-editor-html:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

/* Image Size Info Badge */
.image-size-info-badge {
  margin-top: 8px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}
.image-size-info-badge.warning {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

/* Smart Links Card & Inserters */
.smart-link-fields-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  background: rgba(15, 23, 42, 0.4);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border-line);
}
.smart-input-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.smart-field-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.smart-links-grid-btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.btn-smart-action {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: right;
  transition: all 0.2s ease;
}
.btn-smart-action:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
  color: #60a5fa;
  transform: translateY(-1px);
}
.btn-smart-action:active {
  transform: translateY(0);
}
.btn-smart-action:last-child {
  grid-column: span 2;
  justify-content: center;
}

/* Inserted Smart Content Components (Blogger Responsive CSS) */
.studio-download-card, .tekmilo-download-card {
  margin: 24px 0;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(15, 23, 42, 0.3));
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tekmilo-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2563eb;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.2s ease;
}
.tekmilo-download-btn:hover {
  background: #1d4ed8;
}
.studio-related-box, .tekmilo-related-box {
  margin: 20px 0;
  padding: 14px 18px;
  background: rgba(59, 130, 246, 0.06);
  border-right: 4px solid #3b82f6;
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.6;
}
[dir="ltr"] .studio-related-box, .tekmilo-related-box {
  border-right: none;
  border-left: 4px solid #3b82f6;
}
.tekmilo-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981 !important;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 6px;
  text-decoration: none !important;
}
.tekmilo-preview-btn:hover {
  background: rgba(16, 185, 129, 0.25);
}


/* ==========================================================================
   TOPBAR GLOBAL SMART AUTO-TRANSLATE & SMART COMPONENT MODAL BUILDER
   ========================================================================== */

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

.header-action-divider {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 4px;
}

.btn-global-smart-translate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #1d4ed8 0%, #0284c7 100%);
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.25);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.btn-global-smart-translate:hover {
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.45);
  border-color: rgba(56, 189, 248, 0.8);
}

.btn-global-smart-translate:active {
  transform: translateY(0);
}

.btn-global-smart-translate.translating {
  opacity: 0.8;
  pointer-events: none;
}

.btn-global-smart-translate.translating .translate-btn-icon {
  animation: spinTranslate 1s linear infinite;
}

@keyframes spinTranslate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.translate-btn-icon {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.translate-btn-text {
  font-weight: 700;
  letter-spacing: -0.2px;
}

.translate-btn-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Sidebar Highlight Button */
.btn-content-highlight {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(15, 23, 42, 0.4)) !important;
  border: 1px solid rgba(59, 130, 246, 0.45) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  text-align: right !important;
}

.btn-content-highlight:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(15, 23, 42, 0.6)) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

/* SMART BUILDER MODAL */
.smart-builder-modal-box {
  max-width: 860px !important;
  width: 95% !important;
  background: #0c1424 !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 14px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(37, 99, 235, 0.15) !important;
  overflow: hidden !important;
}

.smart-builder-modal-body {
  padding: 22px !important;
}

.smart-builder-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 768px) {
  .smart-builder-grid {
    grid-template-columns: 1fr;
  }
}

.smart-builder-field-group {
  margin-bottom: 14px;
}

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

.smart-builder-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.smart-builder-input:focus {
  border-color: #3b82f6;
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.smart-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.color-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #ffffff;
  background: var(--chip-bg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.color-preset-chip:hover {
  transform: translateY(-1px);
}

.color-preset-chip.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  transform: scale(1.04);
}

.smart-custom-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

#smart-modal-picker {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.smart-hex-input {
  width: 88px;
  height: 30px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #38bdf8;
  font-family: monospace;
  font-size: 12.5px;
  text-align: center;
  outline: none;
}

.smart-hex-input:focus {
  border-color: #38bdf8;
}

.smart-builder-preview-wrapper {
  background: rgba(10, 16, 28, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 290px;
  box-sizing: border-box;
}

.smart-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.preview-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.smart-preview-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
}

.smart-preview-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
}


/* ==========================================================================
   SIDEBAR REORGANIZATION, ACCORDION FOLD/UNFOLD & CONNECTED BLOGS
   ========================================================================== */

/* Section Titles */
.nav-section-title {
  list-style: none !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--text-muted) !important;
  padding: 14px 12px 6px !important;
  margin-top: 4px !important;
  pointer-events: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.nav-section-title:first-child {
  border-top: none !important;
  padding-top: 4px !important;
}

/* Nav Menu Scrollable Container */
.nav-menu {
  flex: 1 1 auto;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-inline-end: 2px !important;
  margin: 0 !important;
  list-style: none !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.25) transparent;
}

.nav-menu::-webkit-scrollbar {
  width: 4px;
}

.nav-menu::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.25);
  border-radius: 4px;
}

/* Accordion Fold/Unfold Behavior */
.nav-item.has-subitems {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
}

.nav-item.has-subitems .nav-item-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
  box-sizing: border-box;
}

.nav-item.has-subitems .nav-item-header:hover {
  background: var(--bg-hover);
}

.nav-item.has-subitems:not(.expanded) .nav-sub-menu {
  display: none !important;
}

.nav-item.has-subitems.expanded .nav-sub-menu {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  padding: 4px 6px 6px 18px;
  margin: 0;
  list-style: none;
}

[dir="rtl"] .nav-item.has-subitems.expanded .nav-sub-menu {
  padding: 4px 18px 6px 6px;
}

.nav-item.has-subitems .nav-sub-arrow {
  margin-inline-start: auto;
  font-size: 13px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

.nav-item.has-subitems.expanded .nav-sub-arrow {
  transform: rotate(-90deg);
}

[dir="ltr"] .nav-item.has-subitems.expanded .nav-sub-arrow {
  transform: rotate(90deg);
}

/* Nav Sub Items */
.nav-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

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

.nav-sub-item.active {
  background: rgba(37, 99, 235, 0.14) !important;
  color: #60a5fa !important;
  font-weight: 700 !important;
}

/* Connected Blogger Blogs Footer */
.sidebar-blogs-footer {
  padding: 12px 14px !important;
  border-top: 1px solid var(--border-line) !important;
  background: rgba(10, 16, 28, 0.75) !important;
  border-radius: 12px !important;
  margin-top: 8px !important;
  flex-shrink: 0 !important;
}

.sidebar-blogs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sidebar-blogs-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blogs-count-badge {
  background: rgba(37, 99, 235, 0.25);
  color: #60a5fa;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.sidebar-refresh-blogs-btn {
  background: transparent;
  border: none;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
  padding: 2px 4px;
}

.sidebar-refresh-blogs-btn:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.sidebar-blogs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 170px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar-blog-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.sidebar-blog-item:hover {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  transform: translateX(-2px);
}

[dir="ltr"] .sidebar-blog-item:hover {
  transform: translateX(2px);
}

.sidebar-blog-item.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(15, 23, 42, 0.85)) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25) !important;
}

.sidebar-blog-avatar {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.sidebar-blog-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-blog-meta {
  flex: 1;
  min-width: 0;
}

.sidebar-blog-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}

.sidebar-blog-url {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  text-align: right;
}

[dir="ltr"] .sidebar-blog-url {
  text-align: left;
}

.sidebar-blog-active-pill {
  font-size: 9.5px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(16, 185, 129, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-blog-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
  flex-shrink: 0;
}

.sidebar-blog-status-dot.online {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}


/* ==========================================================================
   TEKMILO STUDIO PRO - 4 BLOGGER-NATIVE MODULES STYLING
   (Analytics, Comments, Earnings/AdSense, Comprehensive Blogger Settings)
   ========================================================================== */

/* --- Universal Module Headers --- */
.module-header-pro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.module-header-info {
  flex: 1;
  min-width: 280px;
}

.module-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 9999px;
  color: #60a5fa;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.module-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.module-desc {
  font-size: 0.88rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.6;
}

.module-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- Time Filter Pills --- */
.stats-time-pills {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
}

.stat-pill-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
}

.stat-pill-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

.stat-pill-btn.active {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

/* --- KPI Cards Grid --- */
.stats-kpi-grid, .earnings-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.stats-card-kpi {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stats-card-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.primary-gradient {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border-left: 4px solid #3b82f6;
}

.blue-gradient {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border-left: 4px solid #06b6d4;
}

.purple-gradient {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border-left: 4px solid #a855f7;
}

.emerald-gradient {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border-left: 4px solid #10b981;
}

.kpi-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  flex-shrink: 0;
}

.primary-gradient .kpi-icon-wrap { color: #60a5fa; background: rgba(59, 130, 246, 0.12); }
.blue-gradient .kpi-icon-wrap { color: #22d3ee; background: rgba(6, 182, 212, 0.12); }
.purple-gradient .kpi-icon-wrap { color: #c084fc; background: rgba(168, 85, 247, 0.12); }
.emerald-gradient .kpi-icon-wrap { color: #34d399; background: rgba(16, 185, 129, 0.12); }

.kpi-body {
  flex: 1;
}

.kpi-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.kpi-number-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.kpi-number {
  font-size: 1.9rem;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-numeric, 'Inter', -apple-system, sans-serif);
  line-height: 1.2;
}

.kpi-trend {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kpi-trend.up {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.kpi-trend.verified {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.kpi-sub {
  display: block;
  font-size: 0.74rem;
  color: #64748b;
  margin-top: 6px;
}

/* --- Secondary Metrics Bar --- */
.stats-secondary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  background: rgba(15, 23, 42, 0.5);
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sec-stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 0.84rem;
}

.sec-label {
  color: #94a3b8;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sec-value {
  color: #ffffff;
  font-weight: 700;
  font-family: var(--font-numeric, 'Inter', sans-serif);
}

/* --- Detailed Grid 2 Columns --- */
.stats-grid-2col {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
}

@media (max-width: 1024px) {
  .stats-grid-2col {
    grid-template-columns: 1fr;
  }
}

.latest-post-details {
  padding: 18px 20px;
}

.post-preview-line {
  margin-bottom: 14px;
}

.latest-post-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 4px 0;
  line-height: 1.5;
}

.latest-post-date {
  font-size: 0.78rem;
  color: #64748b;
}

.latest-post-stats-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-stat-box {
  display: flex;
  flex-direction: column;
}

.lp-label {
  font-size: 0.74rem;
  color: #94a3b8;
}

.lp-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: #38bdf8;
  font-family: var(--font-numeric, 'Inter', sans-serif);
}

.lp-stat-box.action {
  margin-right: auto;
}

/* --- Top Articles Ranking --- */
.top-articles-list {
  padding: 8px 12px;
}

.top-article-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background 0.15s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

.top-article-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.rank-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  flex-shrink: 0;
  font-family: var(--font-numeric, 'Inter', sans-serif);
}

.rank-badge.gold { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.rank-badge.silver { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.3); }
.rank-badge.bronze { background: rgba(217, 119, 6, 0.18); color: #f59e0b; border: 1px solid rgba(217, 119, 6, 0.3); }

.top-article-meta {
  flex: 1;
  min-width: 0;
}

.top-article-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.top-article-title:hover {
  color: #38bdf8;
}

.top-article-sub {
  font-size: 0.74rem;
  color: #64748b;
  margin-top: 2px;
}

.top-article-views {
  text-align: left;
  flex-shrink: 0;
}

.top-views-number {
  font-size: 1rem;
  font-weight: 700;
  color: #38bdf8;
  font-family: var(--font-numeric, 'Inter', sans-serif);
}

.top-views-label {
  display: block;
  font-size: 0.7rem;
  color: #64748b;
}

/* --- Traffic Sources & Side Widgets --- */
.traffic-sources-list {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.source-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.source-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
}

.source-name {
  color: #cbd5e1;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-percent {
  color: #94a3b8;
  font-weight: 700;
  font-family: var(--font-numeric, 'Inter', sans-serif);
}

.source-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  overflow: hidden;
}

.source-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 9999px;
  transition: width 0.6s ease;
}

.source-bar-fill.accent-fill { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.source-bar-fill.danger-fill { background: linear-gradient(90deg, #ef4444, #f87171); }
.source-bar-fill.warning-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.country-stats-list {
  padding: 10px 16px;
}

.country-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.84rem;
}

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

.country-name {
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.flag-icon {
  font-size: 1.1rem;
}

.country-views {
  color: #94a3b8;
  font-weight: 600;
  font-family: var(--font-numeric, 'Inter', sans-serif);
}

.tech-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px 18px;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 0.8rem;
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   COMMENTS MANAGEMENT STYLING
   ========================================================================== */
.comments-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: rgba(15, 23, 42, 0.6);
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.comment-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #94a3b8;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.comment-filter-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
}

.comment-filter-pill.active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.35);
}

.pill-count {
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  font-size: 0.74rem;
  font-family: var(--font-numeric, 'Inter', sans-serif);
}

.comment-filter-pill.active .pill-count {
  background: #3b82f6;
  color: #ffffff;
}

.comments-card-wrap {
  min-height: 280px;
}

.blogger-comments-list {
  padding: 8px;
}

.comments-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
}

.empty-icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #60a5fa;
  margin-bottom: 18px;
}

.empty-state-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 8px 0;
}

.empty-state-desc {
  font-size: 0.88rem;
  color: #94a3b8;
  max-width: 500px;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

/* Comment Item Card */
.blogger-comment-card {
  padding: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
  transition: all 0.2s ease;
}

.blogger-comment-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.1);
}

.comment-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.comment-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.comment-author-info {
  flex: 1;
}

.comment-author-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #f8fafc;
}

.comment-meta-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: #64748b;
  margin-top: 2px;
}

.comment-post-link {
  color: #38bdf8;
  text-decoration: none;
}

.comment-post-link:hover {
  text-decoration: underline;
}

.comment-badge-status {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}

.comment-badge-status.published {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.comment-badge-status.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.comment-badge-status.spam {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.comment-body {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.comment-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   ADSENSE & EARNINGS HERO STYLING
   ========================================================================== */
.adsense-connection-hero {
  margin-bottom: 24px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(59, 130, 246, 0.22);
}

.hero-adsense-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-adsense-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.adsense-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.adsense-logo-box {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.adsense-text-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.adsense-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-size: 0.74rem;
  font-weight: 600;
  color: #34d399;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.hero-adsense-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.hero-adsense-p {
  font-size: 0.86rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 14px 0;
}

.adsense-pub-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pub-label {
  font-size: 0.78rem;
  color: #64748b;
}

.pub-code {
  font-size: 0.86rem;
  color: #38bdf8;
  font-weight: 700;
  font-family: var(--font-numeric, 'Inter', monospace);
}

.btn-copy-pub {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
}

.btn-copy-pub:hover {
  color: #ffffff;
}

.adsense-action-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.btn-connect-adsense {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
  transition: all 0.25s ease;
  font-family: inherit;
}

.btn-connect-adsense:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

.btn-connect-adsense.connected {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

.connect-hint {
  font-size: 0.72rem;
  color: #64748b;
  text-align: center;
  max-width: 220px;
}

/* Blogger settings list items */
.blogger-settings-list {
  padding: 8px 16px;
}

.blogger-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.blogger-setting-item:last-child {
  border-bottom: none;
}

.setting-item-info {
  flex: 1;
}

.setting-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 4px 0;
}

.setting-desc {
  font-size: 0.82rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   COMPREHENSIVE BLOGGER SETTINGS STYLING
   ========================================================================== */
.blogger-settings-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  padding-bottom: 80px;
}

.settings-group-card {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-group-title i {
  font-size: 1.2rem;
}

.settings-group-title h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}

.settings-group-content {
  padding: 6px 22px;
}

.setting-field-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

@media (max-width: 860px) {
  .setting-field-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.field-label-col {
  display: flex;
  flex-direction: column;
}

.field-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.field-desc {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

.field-input-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.field-input-col.switch-col {
  justify-content: flex-end;
}

.field-input-col input,
.field-input-col select,
.field-input-col textarea {
  width: 100%;
}

.form-control-pro {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  color: #f8fafc;
  font-size: 0.88rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

.form-control-pro:focus {
  outline: none;
  border-color: #3b82f6;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-control-pro.ltr {
  direction: ltr;
  text-align: left;
}

.form-control-pro.code-font {
  font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
}

.input-addon-group {
  display: flex;
  align-items: center;
  width: 100%;
}

.input-addon-group input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.addon-tag {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: none;
  padding: 10px 14px;
  color: #94a3b8;
  font-size: 0.84rem;
  font-weight: 600;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  direction: ltr;
}

.favicon-col {
  display: flex;
  align-items: center;
  gap: 16px;
}

.favicon-preview-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.favicon-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #ffffff;
  padding: 2px;
}

.favicon-size-hint {
  font-size: 0.74rem;
  color: #64748b;
}

.admin-chip-wrap {
  display: flex;
  gap: 8px;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
}

.user-name {
  color: #f1f5f9;
  font-weight: 600;
}

.user-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
}

/* iOS Style Switch */
.switch-ios {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

.switch-ios input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-ios {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.slider-ios:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.switch-ios input:checked + .slider-ios {
  background-color: #2563eb;
  border-color: #3b82f6;
}

.switch-ios input:checked + .slider-ios:before {
  transform: translateX(22px);
}

/* Danger Row */
.setting-field-row.danger-row {
  background: rgba(239, 68, 68, 0.04);
  padding: 16px 14px;
  border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.btn-danger-outline {
  background: transparent;
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
}

/* Sticky Save Footer */
.settings-sticky-footer {
  position: sticky;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  padding: 16px 24px;
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 50;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .settings-sticky-footer {
    flex-direction: column;
    text-align: center;
  }
}

.save-bar-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: #cbd5e1;
}

.save-bar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}



/* ==========================================================================
   THEME-RESPONSIVE ADAPTATIONS (DARK & LIGHT) FOR 4 NEW MODULES
   ========================================================================== */

/* Universal Module Headers */
.module-title {
  color: var(--text-primary) !important;
}

.module-desc {
  color: var(--text-muted) !important;
}

.module-header-pro {
  border-bottom: 1px solid var(--border-line) !important;
}

/* Time Filter Pills */
.stats-time-pills {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-line) !important;
}

.stat-pill-btn {
  color: var(--text-muted) !important;
}

.stat-pill-btn:hover {
  color: var(--text-primary) !important;
}

/* KPI Cards */
.stats-card-kpi {
  border: 1px solid var(--border-line) !important;
}

.kpi-label {
  color: var(--text-muted) !important;
}

.kpi-number {
  color: var(--text-primary) !important;
}

.kpi-sub {
  color: var(--text-muted) !important;
}

/* Secondary Metrics Bar */
.stats-secondary-bar {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-line) !important;
}

.sec-label {
  color: var(--text-muted) !important;
}

.sec-value {
  color: var(--text-primary) !important;
}

/* Post Details & Top Articles */
.latest-post-title {
  color: var(--text-primary) !important;
}

.top-article-title {
  color: var(--text-primary) !important;
}

.top-article-row {
  border-bottom: 1px solid var(--border-line) !important;
}

/* Comments */
.comments-filter-bar {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-line) !important;
}

.comment-filter-pill {
  color: var(--text-muted) !important;
}

.blogger-comment-card {
  border: 1px solid var(--border-line) !important;
}

.comment-author-name {
  color: var(--text-primary) !important;
}

.comment-body {
  color: var(--text-secondary) !important;
}

.empty-state-title {
  color: var(--text-primary) !important;
}

.empty-state-desc {
  color: var(--text-muted) !important;
}

/* Settings Form Controls */
.settings-group-card {
  border: 1px solid var(--border-line) !important;
}

.settings-group-title h3 {
  color: var(--text-primary) !important;
}

.field-title {
  color: var(--text-primary) !important;
}

.field-desc {
  color: var(--text-muted) !important;
}

.form-control-pro {
  color: var(--text-primary) !important;
  border: 1px solid var(--border-line) !important;
}

.save-bar-info {
  color: var(--text-secondary) !important;
}

/* --------------------------------------------------------------------------
   LIGHT MODE OVERRIDES ([data-theme="light"])
   -------------------------------------------------------------------------- */
[data-theme="light"] .stats-card-kpi {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .primary-gradient { border-left: 4px solid #2563eb !important; }
[data-theme="light"] .blue-gradient { border-left: 4px solid #0891b2 !important; }
[data-theme="light"] .purple-gradient { border-left: 4px solid #9333ea !important; }
[data-theme="light"] .emerald-gradient { border-left: 4px solid #059669 !important; }

[data-theme="light"] .stats-secondary-bar {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .sec-stat-pill {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .glass-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .glass-card-header {
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .latest-post-stats-row {
  border-top: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .blogger-comment-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .comment-body {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .comments-filter-bar {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .adsense-connection-hero {
  background: linear-gradient(135deg, #f8fafc, #edf2f7) !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .hero-adsense-title {
  color: #1e293b !important;
}

[data-theme="light"] .adsense-logo-box {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .adsense-pub-box {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .settings-group-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .settings-group-title {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .form-control-pro {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

[data-theme="light"] .addon-tag {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .settings-sticky-footer {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .user-chip {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .user-name {
  color: #334155 !important;
}



/* ==========================================================================
   BUTTON STYLES FOR MODULE HEADERS AND ACTION BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(135deg, #0968ef, #0654c4) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(9, 104, 239, 0.35);
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0d73ff, #0968ef) !important;
  box-shadow: 0 6px 18px rgba(9, 104, 239, 0.45);
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-line) !important;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
}

.btn-outline:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #7dd3fc !important;
  border-color: #38bdf8 !important;
}

.btn-sm {
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  border-radius: 8px !important;
}

.btn-lg {
  padding: 12px 24px !important;
  font-size: 0.95rem !important;
  border-radius: 12px !important;
}

[data-theme="light"] .btn-secondary {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .btn-secondary:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .btn-outline {
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}



/* ==========================================================================
   FAVICON STUDIO DRAG & DROP & REAL ADSENSE VERIFICATION STYLES
   ========================================================================== */

/* Favicon Studio Dropzone */
.favicon-field-row {
  grid-template-columns: 1fr 1.6fr !important;
}

@media (max-width: 900px) {
  .favicon-field-row {
    grid-template-columns: 1fr !important;
  }
}

.favicon-dropzone {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(59, 130, 246, 0.4);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.favicon-dropzone:hover {
  background: rgba(59, 130, 246, 0.06);
  border-color: #3b82f6;
}

.favicon-dropzone.dragover {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: #60a5fa !important;
  border-style: solid !important;
  transform: scale(1.015);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.favicon-preview-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  /* Checkerboard pattern for transparency */
  background-image: linear-gradient(45deg, #1e293b 25%, transparent 25%), 
                    linear-gradient(-45deg, #1e293b 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #1e293b 75%), 
                    linear-gradient(-45deg, transparent 75%, #1e293b 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

.favicon-preview-wrap .favicon-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
}

.favicon-active-indicator {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  border: 2px solid #0f172a;
}

.favicon-drop-info {
  flex: 1;
}

.drop-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.drop-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.favicon-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.badge-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-line);
  color: var(--text-secondary);
}

.badge-mini.trans {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.25);
}

.favicon-actions-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* AdSense Real Verification & Audit Checklist */
.adsense-audit-box {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.audit-icon {
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audit-label {
  color: var(--text-muted);
}

.audit-val {
  font-weight: 700;
  margin-right: auto;
  font-family: var(--font-numeric, 'Inter', sans-serif);
}

.audit-val.ok {
  color: #34d399;
}

.audit-val.fail {
  color: #f87171;
}

.audit-val.warn {
  color: #fbbf24;
}

.status-dot.warning {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}

.status-dot.danger {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}

.adsense-pub-input-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pub-input-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pub-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pub-input-group input {
  flex: 1;
}

/* Light Mode Overrides */
[data-theme="light"] .favicon-dropzone {
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-theme="light"] .favicon-dropzone:hover {
  background: #f1f5f9;
  border-color: #0968ef;
}

[data-theme="light"] .favicon-preview-wrap {
  background: #ffffff;
  border-color: #cbd5e1;
}

[data-theme="light"] .favicon-active-indicator {
  border-color: #ffffff;
}

[data-theme="light"] .badge-mini {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

[data-theme="light"] .adsense-audit-box {
  background: #ffffff;
  border-color: #e2e8f0;
}



/* ==========================================================================
   TOPBAR COMPREHENSIVE REFINEMENTS (RTL Alignment, View Site, Sun/Moon, Notifications)
   ========================================================================== */

/* Brand Header clickable to home */
.brand-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.brand-header-top:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
  transform: translateY(-1px);
}

.brand-header-top:active {
  transform: scale(0.98);
}

/* "عرض الموقع" (View Site) Sleek Pill Button */
.topbar-btn-view-site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 20px;
  background: rgba(9, 104, 239, 0.12);
  border: 1px solid rgba(9, 104, 239, 0.35);
  color: #38bdf8;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.topbar-btn-view-site:hover {
  background: #0968ef;
  color: #ffffff !important;
  border-color: #0968ef;
  box-shadow: 0 4px 14px rgba(9, 104, 239, 0.38);
  transform: translateY(-1px);
}

.topbar-btn-view-site:active {
  transform: scale(0.97);
}

.topbar-btn-view-site i {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.topbar-btn-view-site:hover i {
  transform: translateX(-2px) translateY(-1px);
}

[data-theme="light"] .topbar-btn-view-site {
  background: rgba(9, 104, 239, 0.08);
  border-color: rgba(9, 104, 239, 0.25);
  color: #0968ef;
}

[data-theme="light"] .topbar-btn-view-site:hover {
  background: #0968ef;
  color: #ffffff !important;
}

/* Theme Toggle Dynamic Sun/Moon */
#btn-toggle-theme {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-line);
  background: var(--bg-soft);
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
  user-select: none;
}

#btn-toggle-theme:hover {
  border-color: var(--accent-blue);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

#btn-toggle-theme:active {
  transform: scale(0.92);
}

.theme-icon-display {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Notification Bell & Dropdown */
.topbar-notification-container {
  position: relative;
}

.topbar-bell-btn {
  cursor: pointer;
  position: relative;
}

.topbar-notifications-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: 380px;
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-line);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
  z-index: 1050;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: notifDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes notifDropdownFade {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-line);
  background: var(--bg-card);
}

.notif-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-title-text {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
}

.notif-badge-pill {
  background: rgba(9, 104, 239, 0.15);
  color: var(--accent-blue, #38bdf8);
  border: 1px solid rgba(9, 104, 239, 0.3);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}

.notif-mark-read-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
  font-family: inherit;
}

.notif-mark-read-btn:hover {
  color: var(--accent-blue, #0968ef);
  background: var(--bg-hover);
}

.notif-dropdown-list {
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-line);
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}

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

.notif-item:hover {
  background: var(--bg-hover);
}

.notif-item.unread {
  background: rgba(9, 104, 239, 0.04);
}

.notif-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.notif-icon-circle.comment-icon {
  background: rgba(9, 104, 239, 0.15);
  color: var(--accent-blue, #38bdf8);
}

.notif-icon-circle.post-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.notif-icon-circle.adsense-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.notif-icon-circle.backup-icon {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

.notif-content {
  flex: 1;
  min-width: 0;
}

.notif-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  line-height: 1.3;
}

.notif-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-time {
  font-size: 10.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.notif-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-blue, #0968ef);
  box-shadow: 0 0 8px var(--accent-blue, #0968ef);
  flex-shrink: 0;
  margin-top: 6px;
}

.notif-dropdown-footer {
  padding: 10px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-line);
  text-align: center;
}

.notif-footer-action-btn {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border-line);
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  font-family: inherit;
}

.notif-footer-action-btn:hover {
  background: var(--bg-hover);
  color: var(--accent-blue, #0968ef);
  border-color: var(--accent-blue, #0968ef);
}

[data-theme="light"] .topbar-notifications-dropdown {
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .notif-dropdown-header,
[data-theme="light"] .notif-dropdown-footer {
  background: #f8fafc;
}


/* ==========================================================================
   COMPACT ULTRA-SLEEK SIDEBAR & THEMED DARK SCROLLBAR (User Requested Refinements)
   ========================================================================== */

/* Universal Themed Scrollbars - Completely eliminates default white scrollbars */
* {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(59, 130, 246, 0.35) transparent !important;
}

::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16) !important;
  border-radius: 6px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue, #0968ef) !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #0968ef !important;
}

/* Refined Balanced Sidebar Layout (Comfortable & Clear) */
.sidebar {
  width: 280px !important;
  padding: 12px 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.sidebar .nav-menu {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-inline-end: 2px !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2.5px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(59, 130, 246, 0.35) transparent !important;
}

.sidebar .nav-menu::-webkit-scrollbar {
  width: 4px !important;
}

.sidebar .nav-menu::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.35) !important;
  border-radius: 4px !important;
}

/* Clear Section Headers */
.nav-section-title {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--text-muted) !important;
  padding: 8px 10px 3px !important;
  margin-top: 3px !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.nav-section-title:first-child {
  border-top: none !important;
  padding-top: 3px !important;
  margin-top: 0 !important;
}

/* Clear & Comfortable Nav Items */
.sidebar .nav-item:not(.has-subitems),
.nav-item:not(.has-subitems),
.nav-item.has-subitems .nav-item-header {
  padding: 6.5px 10px !important;
  min-height: 35px !important;
  gap: 9px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.sidebar .nav-item.has-subitems,
.nav-item.has-subitems {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  min-height: auto !important;
  border: none !important;
  background: transparent !important;
}

.nav-item.has-subitems .nav-item-header {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  cursor: pointer !important;
}

.nav-icon-wrap {
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13.5px !important;
  flex-shrink: 0 !important;
}

.nav-label {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

.nav-chevron {
  font-size: 11px !important;
  opacity: 0.55 !important;
}

/* Clear Sub Menu */
.nav-item.has-subitems.expanded .nav-sub-menu {
  padding: 2px 10px 3px 3px !important;
  gap: 2px !important;
}

[dir="ltr"] .nav-item.has-subitems.expanded .nav-sub-menu {
  padding: 2px 3px 3px 10px !important;
}

.nav-sub-item {
  padding: 4.5px 8px !important;
  min-height: 25px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

.nav-sub-count,
#sidebar-comments-count,
#sidebar-pages-count {
  font-size: 10px !important;
  padding: 1px 5px !important;
  min-width: 17px !important;
  height: 17px !important;
  line-height: 15px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.nav-sub-add-badge {
  font-size: 11.5px !important;
  width: 17px !important;
  height: 17px !important;
  line-height: 16px !important;
}

.nav-badge-ai {
  background: linear-gradient(135deg, #0968ef, #06b6d4) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 1.5px 5px !important;
  border-radius: 4px !important;
  letter-spacing: 0.4px !important;
}

/* Clear & Prominent Connected Blogs Footer ("مدونات حسابك") */
.sidebar-blogs-footer {
  padding: 12px 12px !important;
  margin-top: 8px !important;
  border-radius: 12px !important;
  background: rgba(10, 16, 28, 0.88) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.sidebar-blogs-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.sidebar-blogs-title {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--text-bright, #f8fafc) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.blogs-count-badge {
  font-size: 10.5px !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background: rgba(59, 130, 246, 0.25) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

.sidebar-refresh-blogs-btn {
  font-size: 13px !important;
  padding: 3px 6px !important;
  color: var(--text-muted) !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.sidebar-refresh-blogs-btn:hover {
  color: #38bdf8 !important;
  transform: rotate(90deg) !important;
}

/* Custom Scrollbar for Connected Blogs List */
.sidebar-blogs-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  max-height: 170px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-inline-end: 3px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(59, 130, 246, 0.45) transparent !important;
}

.sidebar-blogs-list::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

.sidebar-blogs-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.sidebar-blogs-list::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.4) !important;
  border-radius: 4px !important;
}

.sidebar-blogs-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue, #0968ef) !important;
}

.sidebar-blog-item {
  padding: 8px 10px !important;
  gap: 10px !important;
  border-radius: 9px !important;
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.18s ease !important;
  cursor: pointer !important;
}

.sidebar-blog-item:hover {
  background: rgba(37, 99, 235, 0.22) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  transform: translateX(-2px) !important;
}

[dir="ltr"] .sidebar-blog-item:hover {
  transform: translateX(2px) !important;
}

.sidebar-blog-item.active {
  background: rgba(37, 99, 235, 0.28) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2) !important;
}

.sidebar-blog-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

.sidebar-blog-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--text-bright, #f8fafc) !important;
}

.sidebar-blog-url {
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  color: var(--text-muted, #94a3b8) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.sidebar-blog-active-pill {
  font-size: 10px !important;
  padding: 2px 7px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}


/* ==========================================================================
   SMART MEDIA STUDIO & MULTI-VIEW GALLERY (TEKMILO STUDIO PRO)
   ========================================================================== */

/* Header & View Modes Toolbar */
.media-library-card {
  padding: 24px;
}

.media-library-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-line);
}

.media-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.media-header-icon {
  font-size: 24px;
}

.media-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* View Mode Switcher Pills: كبير، وسط، صغير، مضغوط */
.media-view-modes-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  padding: 3px 5px;
  border-radius: var(--radius-md, 10px);
}

.view-modes-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 6px;
  user-select: none;
}

.view-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.view-mode-pill:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.view-mode-pill.active {
  background: var(--accent-blue, #0968ef);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 10px rgba(9, 104, 239, 0.35);
}

.btn-open-media-modal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  background: linear-gradient(135deg, #0968ef, #0284c7);
  box-shadow: 0 3px 12px rgba(9, 104, 239, 0.3);
}

/* Secondary Toolbar: Search & Badges */
.media-library-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0;
}

.media-search-wrap {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 380px;
}

.search-icon-pos {
  position: absolute;
  top: 50%;
  inset-inline-start: 12px;
  transform: translateY(-50%);
  font-size: 13px;
  pointer-events: none;
  opacity: 0.7;
}

.media-search-wrap input {
  width: 100%;
  height: 38px;
  padding-inline-start: 36px;
  padding-inline-end: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.media-search-wrap input:focus {
  outline: none;
  border-color: var(--accent-blue, #0968ef);
  box-shadow: 0 0 0 3px rgba(9, 104, 239, 0.15);
}

.media-toolbar-right-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.media-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  padding: 5px 12px;
  border-radius: 20px;
}

/* ==========================================================================
   THE 4 MEDIA VIEW MODES (كبير، وسط، صغير، مضغوط)
   ========================================================================== */

/* 1. VIEW LARGE (كبير - بطاقات واسعة بدقة عالية) */
.media-grid.view-large {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.media-grid.view-large .media-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.media-grid.view-large .media-item-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-blue, #0968ef);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.media-grid.view-large .media-thumb-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: pointer;
}

.media-grid.view-large .media-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.media-grid.view-large .media-item-card:hover .media-item-thumb {
  transform: scale(1.04);
}

.media-grid.view-large .media-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 29, 0.65);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.media-grid.view-large .media-item-card:hover .media-thumb-overlay {
  opacity: 1;
}

.media-grid.view-large .media-overlay-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.media-grid.view-large .media-overlay-btn:hover {
  background: var(--accent-blue, #0968ef);
  transform: scale(1.12);
}

.media-grid.view-large .media-format-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #38bdf8;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.media-grid.view-large .media-size-badge {
  position: absolute;
  bottom: 10px;
  inset-inline-end: 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #34d399;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.media-grid.view-large .media-item-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.media-grid.view-large .media-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-grid.view-large .media-item-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.media-grid.view-large .media-actions-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border-line);
}

/* 2. VIEW MEDIUM (وسط - الافتراضي المتوازن) */
.media-grid.view-medium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.media-grid.view-medium .media-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.media-grid.view-medium .media-item-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-blue, #0968ef);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.media-grid.view-medium .media-thumb-wrap {
  position: relative;
  width: 100%;
  height: 125px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: pointer;
}

.media-grid.view-medium .media-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.media-grid.view-medium .media-item-card:hover .media-item-thumb {
  transform: scale(1.05);
}

.media-grid.view-medium .media-format-badge {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  background: rgba(15, 23, 42, 0.85);
  color: #38bdf8;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.media-grid.view-medium .media-item-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.media-grid.view-medium .media-item-name {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.media-grid.view-medium .media-item-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--text-muted);
}

.media-grid.view-medium .media-actions-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

/* 3. VIEW SMALL (صغير - عالي الكثافة للمعاينات السريعة) */
.media-grid.view-small {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 10px;
}

.media-grid.view-small .media-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  transition: all 0.15s ease;
  position: relative;
  cursor: pointer;
}

.media-grid.view-small .media-item-card:hover {
  transform: scale(1.03);
  border-color: var(--accent-blue, #0968ef);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.media-grid.view-small .media-thumb-wrap {
  width: 100%;
  height: 95px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

.media-grid.view-small .media-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-grid.view-small .media-size-badge {
  position: absolute;
  bottom: 4px;
  inset-inline-end: 4px;
  background: rgba(15, 23, 42, 0.88);
  color: #34d399;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}

.media-grid.view-small .media-format-badge {
  position: absolute;
  top: 4px;
  inset-inline-start: 4px;
  background: rgba(15, 23, 42, 0.88);
  color: #38bdf8;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
}

.media-grid.view-small .media-item-body {
  padding: 6px 8px;
}

.media-grid.view-small .media-item-name {
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.media-grid.view-small .media-actions-row {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}

.media-grid.view-small .media-actions-row .action-btn {
  height: 22px;
  padding: 0 5px;
  font-size: 10px;
}

/* 4. VIEW COMPACT (مضغوط - قائمة جدولية أفقية احترافية) */
.media-grid.view-compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.media-compact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm, 8px);
  transition: all 0.15s ease;
}

.media-compact-row:hover {
  background: rgba(37, 99, 235, 0.06);
  border-color: var(--accent-blue, #0968ef);
  transform: translateX(-2px);
}

.media-compact-thumb-wrap {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: 1px solid var(--border-line);
}

.media-compact-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-compact-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.media-compact-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.media-compact-name:hover {
  color: var(--accent-blue, #0968ef);
}

.media-compact-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.media-compact-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.compact-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.compact-badge-webp {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.compact-badge-size {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

.compact-badge-dim {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-secondary);
}

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

.media-compact-actions .action-btn {
  height: 28px;
  padding: 0 10px;
  font-size: 11.5px;
}

/* ==========================================================================
   SMART MEDIA UPLOAD MODAL (WIDE & HIGH-TECH STUDIO)
   ========================================================================== */

.media-modal-box-wide {
  max-width: 880px !important;
  width: 95% !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-card, #0f172a) !important;
  border: 1px solid var(--border-line) !important;
  border-radius: var(--radius-lg, 16px) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
  animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.modal-icon-badge {
  font-size: 24px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(9, 104, 239, 0.15);
  border: 1px solid rgba(9, 104, 239, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.media-modal-dropzone {
  border: 2px dashed rgba(59, 130, 246, 0.4);
  background: rgba(15, 23, 42, 0.4);
  border-radius: var(--radius-md, 12px);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.media-modal-dropzone:hover,
.media-modal-dropzone.drag-active {
  border-color: var(--accent-blue, #0968ef);
  background: rgba(9, 104, 239, 0.08);
  box-shadow: 0 0 25px rgba(9, 104, 239, 0.2) inset;
  transform: scale(0.995);
}

.modal-drop-icon {
  font-size: 46px;
  margin-bottom: 8px;
  animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.modal-drop-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.modal-drop-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.modal-drop-features-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.drop-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-line);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Upload Options Bar */
.media-upload-options-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  padding: 10px 14px;
  border-radius: var(--radius-sm, 8px);
  margin-top: 14px;
}

.media-option-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

.media-option-check input[type="checkbox"] {
  accent-color: var(--accent-blue, #0968ef);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.media-quality-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Upload Queue Container */
.media-upload-queue-container {
  margin-top: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm, 8px);
  padding: 12px;
  max-height: 220px;
  display: flex;
  flex-direction: column;
}

.queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-line);
}

.btn-clear-queue {
  background: transparent;
  border: none;
  color: var(--accent-rose, #f43f5e);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

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

.media-upload-queue-list {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-line);
  border-radius: 6px;
  transition: all 0.15s ease;
}

.queue-item-thumb {
  width: 38px;
  height: 38px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.2);
}

.queue-item-info {
  flex: 1;
  min-width: 0;
}

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

.queue-item-meta {
  font-size: 10.5px;
  color: var(--text-muted);
}

.queue-item-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.queue-item-status.pending {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

.queue-item-status.uploading {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.queue-item-status.done {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

.queue-item-status.error {
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
}

.queue-item-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 13px;
}

.queue-item-remove:hover {
  color: var(--accent-rose, #f43f5e);
}

/* ==========================================================================
   FULL RESOLUTION LIGHTBOX MODAL
   ========================================================================== */

#media-lightbox-modal .lightbox-box {
  max-width: 880px !important;
  width: 92% !important;
  max-height: 90vh !important;
  background: var(--bg-card, #0f172a) !important;
  border: 1px solid var(--border-line) !important;
  border-radius: var(--radius-lg, 14px) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.lightbox-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}

.lightbox-body {
  padding: 20px;
  background: rgba(5, 10, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  max-height: 60vh;
  overflow: hidden;
}

#lightbox-img {
  max-width: 100%;
  max-height: 56vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.lightbox-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-line);
}

.lightbox-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.lightbox-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ==========================================================================
   ADVERTISING & MONETIZATION SLOTS STUDIO (TEKMILO STUDIO PRO)
   ========================================================================== */

.ads-studio-card {
  padding: 24px;
}

.ads-studio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-line);
}

.ads-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ads-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(9, 104, 239, 0.15);
  border: 1px solid rgba(9, 104, 239, 0.3);
  color: var(--accent-blue, #0968ef);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  width: fit-content;
}

.ads-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 2px 0;
}

.ads-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.ads-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-save-all-ads {
  background: linear-gradient(135deg, #0968ef, #0284c7) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(9, 104, 239, 0.3) !important;
}

/* KPI Banner */
.ads-kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.ads-kpi-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: 10px;
}

.ads-kpi-chip .kpi-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.ads-kpi-chip .kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.ads-kpi-chip .kpi-val {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 2px;
}

/* Filter Toolbar */
.ads-filter-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.ads-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ad-filter-pill {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ad-filter-pill:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.ad-filter-pill.active {
  background: var(--accent-blue, #0968ef);
  color: #fff;
  border-color: var(--accent-blue, #0968ef);
  box-shadow: 0 2px 8px rgba(9, 104, 239, 0.3);
}

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

.ads-search-wrap input {
  width: 100%;
  height: 38px;
  padding-inline-start: 36px;
  padding-inline-end: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12.5px;
}

.ads-search-wrap input:focus {
  outline: none;
  border-color: var(--accent-blue, #0968ef);
  box-shadow: 0 0 0 3px rgba(9, 104, 239, 0.15);
}

/* Ad Slots Cards */
.ads-slots-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ad-slot-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.2s ease;
  position: relative;
}

.ad-slot-card:hover {
  border-color: rgba(9, 104, 239, 0.45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.ad-slot-card.is-active {
  border-inline-start: 4px solid var(--accent-emerald, #10b981);
}

.ad-slot-card.is-disabled {
  border-inline-start: 4px solid var(--text-disabled, #64748b);
  opacity: 0.88;
}

.ad-slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ad-slot-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ad-slot-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(9, 104, 239, 0.12);
  border: 1px solid rgba(9, 104, 239, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.ad-slot-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}

.ad-slot-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.ad-slot-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.badge-platform {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.badge-dim {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.3);
}

.badge-target {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

/* iOS Style Switch */
.ad-slot-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.ad-toggle-text {
  font-size: 12px;
  font-weight: 800;
}

.ad-toggle-text.active {
  color: var(--accent-emerald, #10b981);
}

.ad-toggle-text.disabled {
  color: var(--text-muted);
}

.switch-ios {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch-ios input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 24px;
  border: 1px solid var(--border-line);
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.switch-ios input:checked + .switch-slider {
  background-color: var(--accent-emerald, #10b981);
  border-color: rgba(16, 185, 129, 0.5);
}

.switch-ios input:checked + .switch-slider:before {
  transform: translateX(20px);
}

/* Config Grid */
.ad-slot-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-line);
  padding: 10px 14px;
  border-radius: 8px;
}

.ad-config-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ad-config-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.ad-config-select {
  height: 32px;
  background: var(--bg-soft);
  border: 1px solid var(--border-line);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 11.5px;
  padding: 0 8px;
}

/* Code Editor Box */
.ad-slot-editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ad-templates-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ad-templates-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ad-template-btn {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-line);
  border-radius: 5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ad-template-btn:hover {
  background: rgba(9, 104, 239, 0.15);
  color: var(--text-primary);
  border-color: var(--accent-blue);
}

.ad-code-textarea {
  width: 100%;
  height: 100px;
  background: rgba(10, 15, 28, 0.75);
  border: 1px solid var(--border-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11.5px;
  color: #38bdf8;
  direction: ltr;
  resize: vertical;
  line-height: 1.5;
  box-sizing: border-box;
}

.ad-code-textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(9, 104, 239, 0.15);
}

/* Footer Actions */
.ad-slot-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ad-slot-updated-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.ad-slot-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Preview Modal */
.ad-preview-modal-box {
  max-width: 820px !important;
  width: 92% !important;
  background: var(--bg-card, #0f172a) !important;
  border: 1px solid var(--border-line) !important;
  border-radius: 14px !important;
}

.ad-preview-canvas {
  min-height: 200px;
  max-height: 60vh;
  overflow: auto;
  background: rgba(0, 0, 0, 0.35);
  border: 2px dashed rgba(59, 130, 246, 0.35);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* -------------------------------------------------------------
 * ENHANCED TABLE ACTION BUTTONS (POSTS & ARTICLES)
 * ------------------------------------------------------------- */
.table-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  line-height: 1;
}

.table-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.table-action-btn.btn-view {
  color: #06b6d4;
  border-color: rgba(6, 182, 212, 0.25);
}
.table-action-btn.btn-view:hover {
  color: #fff;
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  border-color: #06b6d4;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
}

.table-action-btn.btn-edit {
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.25);
}
.table-action-btn.btn-edit:hover {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.table-action-btn.btn-draft {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.25);
}
.table-action-btn.btn-draft:hover {
  color: #fff;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.table-action-btn.btn-publish {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.25);
}
.table-action-btn.btn-publish:hover {
  color: #fff;
  background: linear-gradient(135deg, #059669, #10b981);
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.table-action-btn.btn-delete {
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.25);
}
.table-action-btn.btn-delete:hover {
  color: #fff;
  background: linear-gradient(135deg, #e11d48, #f43f5e);
  border-color: #f43f5e;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.35);
}

.table-action-btn.btn-trans {
  color: #8b5cf6;
  border-color: rgba(139, 92, 246, 0.25);
}
.table-action-btn.btn-trans:hover {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  border-color: #8b5cf6;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}


/* -------------------------------------------------------------
   MEDIA LIBRARY: BULK SELECTION & UNUSED MEDIA CLEANUP STYLES
   ------------------------------------------------------------- */
.btn-delete-unused-media {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  font-weight: 700;
  transition: all 0.25s ease;
}
.btn-delete-unused-media:hover {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #ffffff;
  border-color: #f59e0b;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}

.media-toolbar-left-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.media-filters-group {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 3px;
  gap: 4px;
}
.media-filter-pill {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.media-filter-pill:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}
.media-filter-pill.active {
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}
.filter-count-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10.5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
}
.media-filter-pill.active .filter-count-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.btn-media-select-toggle {
  height: 32px;
  font-size: 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}

/* Bulk Selection Action Bar */
.media-bulk-bar {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.92));
  border: 1px solid rgba(6, 182, 212, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(6, 182, 212, 0.15);
  backdrop-filter: blur(16px);
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  animation: slideDownBulk 0.25s ease-out;
}
@keyframes slideDownBulk {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.media-bulk-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.bulk-divider {
  color: var(--text-muted);
  opacity: 0.5;
}
.media-bulk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Card Selection Box Checkbox */
.media-thumb-wrap {
  position: relative;
}
.media-select-box {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
[dir="ltr"] .media-select-box {
  right: auto;
  left: 8px;
}
.media-select-box:hover {
  border-color: #22d3ee;
  transform: scale(1.1);
}
.media-select-box.checked {
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  border-color: #22d3ee;
  color: #fff;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}
.media-select-box i {
  font-size: 11px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}
.media-select-box.checked i {
  opacity: 1;
  transform: scale(1);
}

/* Compact Row Checkbox */
.media-compact-select-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 8px;
  cursor: pointer;
}
.media-compact-select-box .media-select-box {
  position: static;
}

/* Selected Card Highlight */
.media-item-card.is-selected {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.4), 0 8px 24px rgba(6, 182, 212, 0.2) !important;
  transform: translateY(-2px);
}
.media-compact-row.is-selected {
  border-color: #06b6d4 !important;
  background: rgba(6, 182, 212, 0.08) !important;
}

/* Usage Badges */
.media-usage-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.2px;
}
.media-usage-badge.is-used {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.media-usage-badge.is-unused {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.media-bulk-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  margin: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.media-bulk-preview-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}


/* -------------------------------------------------------------
   THEME STUDIO PRO: ADVANCED XML, CUSTOM CSS & HTML5 MODERNIZER
   ------------------------------------------------------------- */
.theme-nav-tabs-bar {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.theme-tabs-group {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px;
  gap: 6px;
}
.theme-tab-pill {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-tab-pill:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}
.theme-tab-pill.active {
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35);
}

/* XML Editor Toolbar */
.theme-editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
}
.theme-toolbar-jump-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.theme-toolbar-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-inline-end: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-jump-pill {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 11px;
  font-family: monospace;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-jump-pill:hover {
  color: #22d3ee;
  border-color: #06b6d4;
  background: rgba(6, 182, 212, 0.1);
}

.theme-toolbar-tools-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.theme-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.theme-search-input-wrap input {
  height: 30px;
  padding: 0 28px 0 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  width: 170px;
  transition: all 0.2s ease;
}
.theme-search-input-wrap input:focus {
  width: 220px;
  border-color: #06b6d4;
  outline: none;
}
[dir="rtl"] .theme-search-input-wrap input {
  padding: 0 10px 0 28px;
}
.theme-search-input-wrap .search-icon-pos {
  position: absolute;
  right: 8px;
  font-size: 11px;
  pointer-events: none;
}
[dir="rtl"] .theme-search-input-wrap .search-icon-pos {
  right: auto;
  left: 8px;
}

/* Code Editor Textarea */
.theme-editor-container {
  width: 100%;
}
.theme-code-textarea {
  width: 100%;
  min-height: 560px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
  border-radius: 0 0 10px 10px;
  background: #090d16 !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-family: 'Fira Code', 'Cascadia Code', Consolas, Monaco, monospace !important;
}

/* Custom CSS Injection Studio */
.theme-css-hero-card {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.4), rgba(15, 23, 42, 0.6));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.theme-css-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.theme-css-hero-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.theme-css-hero-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.theme-css-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.btn-inject-css {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35) !important;
  font-weight: 700 !important;
}
.btn-inject-css:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5) !important;
}

/* HTML5 Modernizer Cards */
.theme-modernizer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.theme-feature-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  transition: all 0.2s ease;
}
.theme-feature-card:hover {
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
}
.theme-feature-card .feature-icon {
  font-size: 22px;
  margin-bottom: 8px;
}
.theme-feature-card .feature-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.theme-feature-card .feature-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}



/* ==========================================================================
   BLOGOR STUDIO PLATFORM SETTINGS - PREMIUM OVERHAUL & AUTO-SAVE SUITE
   ========================================================================== */

.studio-autosave-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  transition: all 0.3s ease;
}

.studio-autosave-status.saving {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  color: #38bdf8;
}

.pulse-indicator-emerald {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: pulseEmerald 1.8s infinite;
}

@keyframes pulseEmerald {
  0% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 4px #10b981; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #34d399; }
  100% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 4px #10b981; }
}

.studio-layout-grid {
  display: grid;
  grid-template-columns: 370px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}

@media (max-width: 1100px) {
  .studio-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Column 1: Live Interactive Platform Preview */
.studio-preview-col {
  position: sticky;
  top: 85px;
  z-index: 20;
}

.studio-preview-card {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.studio-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.preview-badge {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-bright, #f8fafc);
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-status-pill {
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 10px;
  border-radius: 20px;
}

/* Simulator Mockup Box */
.simulator-topbar-box {
  background: rgba(10, 16, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.simulator-topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.simulator-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0968ef, #00d2ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(9, 104, 239, 0.4);
  flex-shrink: 0;
}

.simulator-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.simulator-brand-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}

.simulator-brand-sub {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.2;
  margin-top: 2px;
}

.simulator-active-pill {
  font-size: 11px;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sim-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
}

.simulator-meta-list {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sim-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.sim-meta-label {
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sim-meta-value {
  font-weight: 700;
  color: var(--text-bright, #fff);
}

.simulator-note-box {
  background: rgba(6, 182, 212, 0.08);
  border: 1px dashed rgba(6, 182, 212, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.simulator-note-box i {
  margin-top: 2px;
  flex-shrink: 0;
}

/* Column 2: Studio Config Cards */
.studio-config-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.studio-card-pro {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.studio-card-pro:hover {
  border-color: rgba(59, 130, 246, 0.35);
}

.studio-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 14px;
}

.studio-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.studio-icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.studio-icon-circle.bg-cyan {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.studio-icon-circle.bg-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.studio-icon-circle.bg-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.studio-icon-circle.bg-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.studio-icon-circle.bg-rose {
  background: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.studio-card-title h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-bright, #fff);
  margin: 0;
}

.studio-card-sub {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin: 4px 0 0;
  line-height: 1.4;
}

.badge-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.badge-tag.cyan {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.badge-tag.blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Pro Dropzone for Studio Logo */
.studio-dropzone-pro {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border-radius: 14px;
  background: rgba(10, 16, 28, 0.6);
  border: 2px dashed rgba(6, 182, 212, 0.4);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.studio-dropzone-pro.drag-over {
  background: rgba(6, 182, 212, 0.12);
  border-color: #22d3ee;
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.3);
  transform: scale(1.01);
}

.studio-logo-avatar-wrap {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(56, 189, 248, 0.4);
  padding: 4px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.studio-logo-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.studio-dropzone-info {
  flex: 1;
}

.drop-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright, #fff);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.drop-caption {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin: 0 0 10px;
  line-height: 1.45;
}

.drop-tags-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.drop-tag {
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 2px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.drop-tag i {
  color: #38bdf8;
}

.studio-dropzone-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* Studio Form Fields */
.studio-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .studio-fields-grid {
    grid-template-columns: 1fr;
  }
}

.studio-field-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.studio-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-bright, #f8fafc);
  display: flex;
  align-items: center;
  gap: 7px;
}

.studio-input-pro,
.studio-select-pro {
  background: rgba(10, 16, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  font-size: 13.5px;
  font-family: inherit;
  padding: 10px 14px;
  border-radius: 10px;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.studio-input-pro:focus,
.studio-select-pro:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
  background: rgba(15, 23, 42, 0.9);
}

.studio-field-help {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.35;
}

.studio-purge-btn {
  padding: 9.5px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* Switches List */
.studio-switches-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.studio-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(10, 16, 28, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.studio-switch-row:hover {
  background: rgba(10, 16, 28, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
}

.switch-label-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.switch-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-bright, #fff);
}

.switch-desc {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
}

/* Fitted Brand Logo Image in Topbar */
.topbar-brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}


/* ==========================================================================
   BLOGGER STUDIO PRO - ADVANCED TOOLS & FEATURES SUITE (STYLING OVERHAUL)
   ========================================================================== */

.tools-suite-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Tools Control Bar: Filters & Live Search */
.tools-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(12px);
}

.tools-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.tool-filter-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.tool-filter-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.tool-filter-btn .filter-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
}

.tools-search-box-wrap {
  position: relative;
  min-width: 260px;
}

.tools-search-box-wrap i {
  position: absolute;
  top: 50%;
  inset-inline-start: 14px;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 13px;
  pointer-events: none;
}

.tools-search-input {
  width: 100%;
  padding: 8px 14px;
  padding-inline-start: 36px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #f8fafc;
  font-size: 13px;
  transition: all 0.2s ease;
}

.tools-search-input:focus {
  outline: none;
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
  background: rgba(30, 41, 59, 1);
}

/* Tools Active Blog Banner */
.tools-blog-context-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(99, 102, 241, 0.05));
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 12px;
}

.tools-blog-context-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tools-blog-context-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #06b6d4, #0284c7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.tools-blog-title-text {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.tools-blog-url-text {
  font-size: 12px;
  color: #38bdf8;
  font-family: monospace;
}

/* Tools Grid Pro */
.tools-grid-pro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 22px;
}

/* Tool Card Pro */
.tool-card-pro {
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.tool-card-pro::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tool-card-pro:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(6, 182, 212, 0.15);
  background: rgba(30, 41, 59, 0.85);
}

.tool-card-pro:hover::before {
  opacity: 1;
}

.tool-card-pro.hidden-tool {
  display: none !important;
}

/* Header & Icon */
.tool-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.tool-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.tool-icon-box.bg-cyan {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(8, 145, 178, 0.4));
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.4);
}

.tool-icon-box.bg-purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(147, 51, 234, 0.4));
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.tool-icon-box.bg-emerald {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.4));
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.tool-icon-box.bg-blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.4));
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.tool-icon-box.bg-amber {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.4));
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.tool-icon-box.bg-rose {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(225, 29, 72, 0.4));
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.4);
}

.tool-icon-box.bg-teal {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(13, 148, 136, 0.4));
  color: #2dd4bf;
  border: 1px solid rgba(20, 184, 166, 0.4);
}

.tool-icon-box.bg-indigo {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.4));
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.4);
}

.tool-header-text {
  flex: 1;
}

.tool-title {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.4;
  margin-bottom: 6px;
}

.tool-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.badge-cyan { background: rgba(6, 182, 212, 0.15); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.3); }
.badge-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
.badge-emerald { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-amber { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-rose { background: rgba(244, 63, 94, 0.15); color: #fb7185; border: 1px solid rgba(244, 63, 94, 0.3); }
.badge-teal { background: rgba(20, 184, 166, 0.15); color: #2dd4bf; border: 1px solid rgba(20, 184, 166, 0.3); }
.badge-indigo { background: rgba(99, 102, 241, 0.15); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); }

.tool-desc {
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

/* Tool Metadata Row */
.tool-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #94a3b8;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 10px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Tool Actions Row */
.tool-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-action-btn-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border: 1px solid rgba(56, 189, 248, 0.4);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
  transition: all 0.2s ease;
}

.tool-action-btn-primary:hover {
  background: linear-gradient(135deg, #0369a1, #075985);
  border-color: #38bdf8;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4);
  transform: translateY(-1px);
  color: #fff;
}

.tool-action-icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.tool-action-icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* ==========================================================================
   BLOGGER STUDIO PRO - ADVANCED THEME IDE & CODEMIRROR STYLING
   ========================================================================== */

.theme-editor-toolbar-pro {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-toolbar-row-primary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.theme-jump-pills-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.theme-toolbar-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.25);
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-jump-pill {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-size: 11px;
  font-family: monospace;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.theme-jump-pill:hover {
  color: #38bdf8;
  border-color: #06b6d4;
  background: rgba(6, 182, 212, 0.15);
  transform: translateY(-1px);
}

.theme-widget-dropdown-wrap {
  min-width: 250px;
}

.theme-widget-jump-select {
  width: 100%;
  background: #090d16;
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.theme-widget-jump-select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.theme-toolbar-row-secondary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

.theme-pro-search-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.theme-search-box-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.theme-search-box-inner .search-icon {
  position: absolute;
  right: 10px;
  font-size: 11px;
  color: #64748b;
  pointer-events: none;
}
[dir="rtl"] .theme-search-box-inner .search-icon {
  right: auto;
  left: 10px;
}

.theme-search-box-inner input {
  height: 32px;
  width: 220px;
  padding: 0 30px 0 10px;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #f8fafc;
  font-size: 12px;
  font-family: inherit;
  transition: width 0.25s ease, border-color 0.2s;
}
[dir="rtl"] .theme-search-box-inner input {
  padding: 0 10px 0 30px;
}

.theme-search-box-inner input:focus {
  width: 260px;
  border-color: #38bdf8;
  outline: none;
}

.theme-search-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.theme-tool-btn {
  height: 32px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.theme-tool-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.theme-pro-actions-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.theme-font-size-adjuster {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 2px 6px;
  height: 32px;
  box-sizing: border-box;
}

.theme-font-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
}

.theme-font-btn:hover {
  color: #38bdf8;
}

#editor-font-size-label {
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
  padding: 0 4px;
  font-family: monospace;
}

.theme-editor-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 10px 10px;
  font-size: 11px;
  color: #94a3b8;
  font-family: monospace;
}

.theme-status-left, .theme-status-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.theme-mode-badge, .theme-encoding-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ==========================================================================
   CODEMIRROR INTEGRATION & CUSTOM GLASSMORPHISM DARK THEME
   ========================================================================== */

.CodeMirror {
  font-family: 'Fira Code', 'Cascadia Code', Consolas, Monaco, monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  height: 620px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: none !important;
  border-radius: 0 !important;
  background: #090d16 !important;
  color: #e2e8f0 !important;
  direction: ltr !important;
  text-align: left !important;
}

.CodeMirror-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  width: 100vw !important;
  z-index: 999999 !important;
  border-radius: 0 !important;
  border: none !important;
}

.CodeMirror-gutters {
  background: #0a0f1d !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  white-space: nowrap !important;
}

.CodeMirror-linenumber {
  color: #475569 !important;
  padding: 0 8px 0 6px !important;
}

.CodeMirror-cursor {
  border-left: 2px solid #38bdf8 !important;
}

/* Code Folding Custom Markers */
.CodeMirror-foldmarker {
  color: #38bdf8 !important;
  text-shadow: #0284c7 1px 1px 2px;
  font-family: monospace !important;
  cursor: pointer;
  background: rgba(56, 189, 248, 0.18) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  padding: 0 6px !important;
  border-radius: 4px;
  font-size: 11px !important;
}

.CodeMirror-foldgutter {
  width: 18px !important;
}

.CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded {
  cursor: pointer;
  color: #64748b;
  text-align: center;
}

.CodeMirror-foldgutter-open:after {
  content: "▾";
  color: #38bdf8;
  font-weight: 800;
  font-size: 14px;
}

.CodeMirror-foldgutter-folded:after {
  content: "▸";
  color: #fbbf24;
  font-weight: 800;
  font-size: 14px;
}

.cm-line-highlight-flash {
  background: rgba(6, 182, 212, 0.28) !important;
  transition: background 1.5s ease-out;
}

/* Syntax Highlighting Tweaks */
.cm-s-material-darker .cm-tag { color: #38bdf8 !important; font-weight: 600 !important; }
.cm-s-material-darker .cm-attribute { color: #c084fc !important; }
.cm-s-material-darker .cm-string { color: #34d399 !important; }
.cm-s-material-darker .cm-comment { color: #64748b !important; font-style: italic !important; }
.cm-s-material-darker .cm-keyword { color: #f43f5e !important; }
.cm-s-material-darker .cm-bracket { color: #94a3b8 !important; }
.cm-s-material-darker .cm-atom { color: #fbbf24 !important; }
.cm-s-material-darker .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.035) !important; }
.cm-s-material-darker .CodeMirror-selected { background: rgba(99, 102, 241, 0.35) !important; }


/* ==========================================================================
   ADVANCED SEO WORKSPACE & ASSISTANT PRO (2026 EDITION)
   ========================================================================== */

.seo-pro-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg-surface, #0b1120);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  padding: 24px;
}

.seo-pro-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.seo-title-flex {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: #f8fafc;
}

.seo-title-icon {
  font-size: 20px;
}

.seo-badge-version {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

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

.pulse-btn {
  background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35);
  transition: all 0.25s ease;
}

.pulse-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.5);
}

/* Source & Keyword Control Panel */
.seo-source-panel {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.seo-source-tabs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.seo-source-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.seo-source-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.seo-source-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.seo-source-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.seo-source-pill.active {
  background: rgba(6, 182, 212, 0.18);
  border-color: #06b6d4;
  color: #38bdf8;
  font-weight: 700;
}

.seo-sub-input-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
}

.seo-input-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.seo-flex-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.seo-flex-select-wrap select, .seo-flex-select-wrap input {
  flex: 1;
}

.seo-custom-editor-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.seo-custom-editor-box .seo-form-group:nth-child(3) {
  grid-column: span 2;
}

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

.seo-form-group label {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
}

.seo-input-field, .seo-textarea-field {
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #f8fafc;
  font-size: 12.5px;
  padding: 8px 12px;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.seo-input-field:focus, .seo-textarea-field:focus {
  border-color: #38bdf8;
  outline: none;
}

/* Focus Keyword Input Row */
.seo-target-keyword-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.seo-kw-input-wrap {
  position: relative;
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
}

.seo-kw-icon {
  position: absolute;
  right: 12px;
  font-size: 15px;
  pointer-events: none;
}

[dir="rtl"] .seo-kw-icon {
  right: 12px;
  left: auto;
}

.seo-kw-input {
  width: 100%;
  height: 38px;
  padding: 0 40px 0 110px;
  background: #090d16;
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 8px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.08);
  box-sizing: border-box;
}

[dir="rtl"] .seo-kw-input {
  padding: 0 40px 0 110px;
}

.seo-kw-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.25);
  outline: none;
}

.seo-kw-detect-btn {
  position: absolute;
  left: 6px;
  height: 28px;
  padding: 0 10px;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 6px;
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

[dir="rtl"] .seo-kw-detect-btn {
  left: 6px;
  right: auto;
}

.seo-kw-detect-btn:hover {
  background: rgba(6, 182, 212, 0.3);
  color: #fff;
}

.seo-lang-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.seo-inline-label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}

/* Executive Dashboard (Score Gauge & 4 Pillars) */
.seo-executive-dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
}

@media (max-width: 860px) {
  .seo-executive-dashboard {
    grid-template-columns: 1fr;
  }
}

.seo-gauge-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.seo-gauge-header {
  font-size: 11.5px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 12px;
}

.seo-circle-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seo-score-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.seo-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 9;
}

.seo-circle-bar {
  fill: none;
  stroke: #10b981;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease, stroke 0.4s ease;
}

.seo-score-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.seo-score-number {
  font-size: 32px;
  font-weight: 900;
  color: #f8fafc;
  line-height: 1;
  font-family: 'Fira Code', monospace;
}

.seo-score-total {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
}

.seo-grade-badge-wrap {
  margin-top: 10px;
}

.seo-grade-badge {
  display: inline-block;
  padding: 3px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.seo-grade-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 6px;
}

/* Pillars Grid */
.seo-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  .seo-pillars-grid {
    grid-template-columns: 1fr;
  }
}

.seo-pillar-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pillar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pillar-icon {
  font-size: 16px;
}

.pillar-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #f1f5f9;
  flex: 1;
  margin-inline-start: 8px;
}

.pillar-score {
  font-size: 13px;
  font-weight: 800;
  color: #94a3b8;
  font-family: monospace;
}

.pillar-progress {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.pillar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.8s ease;
  background: #38bdf8;
}

.pillar-subtext {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.4;
}

/* Quick Metrics Ribbon */
.seo-metrics-ribbon {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

@media (max-width: 900px) {
  .seo-metrics-ribbon {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .seo-metrics-ribbon {
    grid-template-columns: repeat(2, 1fr);
  }
}

.seo-metric-pill {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seo-metric-pill .m-icon {
  font-size: 14px;
}

.seo-metric-pill .m-label {
  font-size: 10.5px;
  color: #94a3b8;
}

.seo-metric-pill .m-val {
  font-size: 13px;
  color: #f8fafc;
  font-family: monospace;
}

/* Google SERP Simulator */
.seo-serp-simulator-card {
  background: #1e1f20;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.serp-sim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.serp-sim-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #e3e3e3;
}

.google-g-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  color: #4285f4;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.serp-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.35);
  padding: 3px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.serp-toggle-btn {
  background: transparent;
  border: none;
  color: #9aa0a6;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.serp-toggle-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.serp-snippet-wrapper {
  background: #171717;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: max-width 0.3s ease;
}

.serp-snippet-wrapper.mobile-view {
  max-width: 440px;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.serp-result-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
  direction: rtl;
}

.serp-meta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.serp-favicon-wrap {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.serp-favicon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.serp-site-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.serp-site-name {
  font-size: 12px;
  font-weight: 600;
  color: #dadce0;
}

.serp-site-url {
  font-size: 11px;
  color: #9aa0a6;
  direction: ltr;
  text-align: right;
}

.serp-title-wrap {
  margin-top: 2px;
}

.serp-title-text {
  font-size: 18px;
  font-weight: 500;
  color: #99c3ff;
  line-height: 1.35;
  margin: 0;
  cursor: pointer;
  font-family: Arial, sans-serif;
  transition: color 0.15s;
}

.serp-title-text:hover {
  text-decoration: underline;
  color: #b3d4ff;
}

.serp-desc-text {
  font-size: 13px;
  color: #bdc1c6;
  line-height: 1.55;
  margin: 0;
  font-family: Arial, sans-serif;
}

.serp-desc-text b, .serp-desc-text strong {
  color: #ffffff;
  font-weight: 700;
}

.serp-counters-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.serp-counter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}

.serp-counter-item .c-label {
  font-size: 11px;
  color: #94a3b8;
}

.serp-counter-item .c-val {
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  font-family: monospace;
}

.serp-counter-item .c-progress {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.serp-counter-item .c-fill {
  height: 100%;
  background: #38bdf8;
  border-radius: 999px;
  transition: width 0.3s;
}

/* Keyword Prominence Matrix */
.seo-kw-matrix-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kw-matrix-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.kw-matrix-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #e2e8f0;
}

.matrix-kw-badge {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}

.kw-matrix-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

@media (max-width: 900px) {
  .kw-matrix-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 500px) {
  .kw-matrix-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kw-matrix-cell {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #94a3b8;
  transition: all 0.2s;
}

.kw-matrix-cell.pass {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.kw-matrix-cell.fail {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.25);
  color: #fb7185;
}

/* Categorized Checklist */
.seo-checklist-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.checklist-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #f1f5f9;
}

.checklist-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chk-tab {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.chk-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.chk-tab.active {
  background: rgba(6, 182, 212, 0.18);
  border-color: #06b6d4;
  color: #38bdf8;
  font-weight: 700;
}

.seo-checks-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.seo-check-item {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: transform 0.15s, border-color 0.2s;
}

.seo-check-item:hover {
  transform: translateX(-2px);
}

.seo-check-item.pass {
  border-inline-start: 4px solid #10b981;
}

.seo-check-item.warning {
  border-inline-start: 4px solid #f59e0b;
}

.seo-check-item.fail {
  border-inline-start: 4px solid #f43f5e;
}

.chk-status-icon {
  font-size: 16px;
  font-weight: 900;
  margin-top: 2px;
}

.seo-check-item.pass .chk-status-icon { color: #10b981; }
.seo-check-item.warning .chk-status-icon { color: #f59e0b; }
.seo-check-item.fail .chk-status-icon { color: #f43f5e; }

.chk-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chk-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chk-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #f8fafc;
}

.chk-pillar-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}

.chk-msg {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.45;
}

.chk-fix-box {
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.seo-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
}

.seo-empty-state .empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
  color: #06b6d4;
}

/* Generators Studio */
.seo-generators-studio-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gen-studio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gen-studio-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
}

.gen-tabs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.gen-tab {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.gen-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.gen-tab.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #34d399;
  font-weight: 700;
}

.gen-pane-desc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 14px;
}

.gen-results-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gen-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: border-color 0.2s;
}

.gen-card:hover {
  border-color: rgba(6, 182, 212, 0.4);
}

.gen-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gen-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
  line-height: 1.4;
}

.gen-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

.gen-badge-tag {
  background: rgba(6, 182, 212, 0.15);
  color: #38bdf8;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}

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

/* LSI Grid */
.gen-lsi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 800px) {
  .gen-lsi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .gen-lsi-grid {
    grid-template-columns: 1fr;
  }
}

.lsi-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.lsi-text {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
}

.lsi-intent {
  font-size: 10px;
  color: #94a3b8;
}

/* Slug Box */
.gen-slug-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  direction: ltr;
  text-align: left;
}

.slug-preview-text {
  font-family: monospace;
  font-size: 13px;
  color: #38bdf8;
  word-break: break-all;
}

/* Schema Output Wrap */
.schema-output-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schema-output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}

.schema-header-btns {
  display: flex;
  gap: 6px;
}

.schema-code-area {
  width: 100%;
  height: 180px;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  color: #38bdf8;
  direction: ltr;
  text-align: left;
  box-sizing: border-box;
}

.schema-type-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ==========================================================================
   CATEGORIES & LABELS STUDIO PRO
   ========================================================================== */

.categories-studio-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg-surface, #0b1120);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  padding: 24px;
}

.categories-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.cat-title-icon {
  font-size: 20px;
}

.categories-main-title {
  font-size: 18px;
  font-weight: 800;
  color: #f8fafc;
}

.cat-badge-live {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.categories-subtitle {
  font-size: 12.5px;
  color: #94a3b8;
  margin-top: 4px;
}

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

/* KPI Cards */
.categories-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 768px) {
  .categories-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.cat-kpi-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.cat-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.cat-kpi-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-kpi-label {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}

.cat-kpi-val {
  font-size: 22px;
  font-weight: 900;
  color: #f8fafc;
  margin: 0;
  font-family: 'Fira Code', monospace;
}

/* Toolbar & Filter Bar */
.categories-toolbar-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 16px;
}

.cat-search-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
}

.cat-search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 12px;
  pointer-events: none;
}

[dir="rtl"] .cat-search-icon {
  right: 12px;
  left: auto;
}

.cat-search-field {
  width: 100%;
  height: 34px;
  padding: 0 34px 0 12px;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: #f8fafc;
  font-size: 12.5px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.cat-search-field:focus {
  border-color: #38bdf8;
  outline: none;
}

.cat-filter-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cat-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cat-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.cat-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.cat-pill.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
  font-weight: 700;
}

/* Grid Cards */
.categories-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.cat-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.cat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.cat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cat-card-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  overflow: hidden;
}

.cat-color-badge {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}

.cat-name-text {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-badge-count {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  white-space: nowrap;
}

.cat-desc-text {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.45;
  min-height: 18px;
}

.cat-articles-preview-list {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat-articles-preview-header {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.cat-article-item {
  font-size: 11.5px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-article-bullet {
  color: #38bdf8;
  font-size: 9px;
}

.cat-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.cat-actions-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cat-actions-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cat-btn-action {
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.cat-btn-action:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.cat-btn-action.danger:hover {
  background: rgba(244, 63, 94, 0.2);
  border-color: #f43f5e;
  color: #fb7185;
}

/* Modal Styles */
.studio-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.studio-modal-box {
  background: #0d1527;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.studio-modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.studio-modal-title {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
}

.studio-modal-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.studio-modal-close:hover {
  color: #fff;
}

.studio-modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 70vh;
  overflow-y: auto;
}

.cat-modal-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat-form-label {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
}

.cat-modal-input {
  background: #080d1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 8px 12px;
  color: #f8fafc;
  font-size: 12.5px;
  width: 100%;
  box-sizing: border-box;
}

.cat-modal-input:focus {
  border-color: #38bdf8;
  outline: none;
}

.cat-color-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cat-color-input {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
}

.cat-color-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cat-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
}

.cat-color-dot:hover {
  transform: scale(1.15);
  border-color: #ffffff;
}

.cat-color-dot.active {
  border-color: #ffffff;
  transform: scale(1.1);
}

.cat-posts-checklist-wrap {
  max-height: 160px;
  overflow-y: auto;
  background: #080d1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat-post-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #cbd5e1;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.cat-post-check-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.studio-modal-footer {
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.cat-loading-state {
  text-align: center;
  padding: 40px;
  color: #94a3b8;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}


/* Theme Cleaner & Restore Modals */
.cleaner-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cleaner-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.snapshot-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.snapshot-item-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(56, 189, 248, 0.3);
}


/* ==========================================================================
   MASTER COMPREHENSIVE LIGHT THEME ENGINE ([data-theme="light"])
   Complete visual parity, contrast optimization, and crisp styling for all tabs
   ========================================================================== */

[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-soft: #f8fafc;
  --bg-hover: #e2e8f0;
  --border-line: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
}

/* --- Universal Typography & Text Contrast Overrides in Light Mode --- */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: #0f172a !important;
}

[data-theme="light"] p {
  color: #334155;
}

[data-theme="light"] .text-white,
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#ffffff"],
[data-theme="light"] [style*="color: #ffffff"],
[data-theme="light"] [style*="color:white"],
[data-theme="light"] [style*="color: white"] {
  color: #0f172a !important;
}

[data-theme="light"] [style*="color:#cbd5e1"],
[data-theme="light"] [style*="color: #cbd5e1"],
[data-theme="light"] [style*="color:#e2e8f0"],
[data-theme="light"] [style*="color: #e2e8f0"] {
  color: #334155 !important;
}

[data-theme="light"] [style*="color:#94a3b8"],
[data-theme="light"] [style*="color: #94a3b8"] {
  color: #64748b !important;
}

[data-theme="light"] .text-muted {
  color: #64748b !important;
}

[data-theme="light"] .text-secondary {
  color: #475569 !important;
}

/* Overriding Inline Hardcoded Dark Backgrounds */
[data-theme="light"] [style*="background:rgba(15, 23, 42"],
[data-theme="light"] [style*="background: rgba(15, 23, 42"],
[data-theme="light"] [style*="background:rgba(15,23,42"],
[data-theme="light"] [style*="background:linear-gradient(135deg, rgba(15, 23, 42"],
[data-theme="light"] [style*="background: linear-gradient(135deg, rgba(15, 23, 42"],
[data-theme="light"] [style*="background:linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(15, 23, 42"],
[data-theme="light"] [style*="background:linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(15, 23, 42"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] [style*="background:rgba(0,0,0,0.3"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.3"],
[data-theme="light"] [style*="background:rgba(0, 0, 0, 0.3"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.25"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.35"] {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] [style*="background:rgba(10, 15, 29"],
[data-theme="light"] [style*="background: rgba(10, 15, 29"],
[data-theme="light"] [style*="background:rgba(10, 16, 28"],
[data-theme="light"] [style*="background: rgba(10, 16, 28"],
[data-theme="light"] [style*="background:#131d2e"],
[data-theme="light"] [style*="background: #131d2e"] {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] [style*="background:rgba(30, 41, 59"] {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

/* Preserve bright buttons in light mode */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary *,
[data-theme="light"] .btn-connect-adsense,
[data-theme="light"] .btn-connect-adsense *,
[data-theme="light"] .pulse-btn,
[data-theme="light"] .pulse-btn * {
  color: #ffffff !important;
}

/* Module Headers Pro */
[data-theme="light"] .module-header-pro {
  border-bottom: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .module-title {
  color: #0f172a !important;
}
[data-theme="light"] .module-desc {
  color: #475569 !important;
}
[data-theme="light"] .module-badge {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}

/* ==========================================================================
   1. EARNINGS & GOOGLE ADSENSE TAB (#tab-earnings)
   ========================================================================== */
[data-theme="light"] .adsense-connection-hero {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .hero-adsense-title {
  color: #0f172a !important;
}

[data-theme="light"] .hero-adsense-p {
  color: #334155 !important;
}

[data-theme="light"] .adsense-audit-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .audit-item {
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .audit-label {
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .audit-val {
  color: #0f172a !important;
}

[data-theme="light"] .pub-input-label {
  color: #1e293b !important;
}

[data-theme="light"] #adsense-pub-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .earnings-kpi-grid .stats-card-kpi {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .stats-card-kpi .kpi-label {
  color: #64748b !important;
  font-weight: 700 !important;
}

[data-theme="light"] .stats-card-kpi .kpi-number {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="light"] .stats-card-kpi .kpi-sub {
  color: #64748b !important;
}

[data-theme="light"] .glass-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .glass-card-header {
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .card-header-title {
  color: #0f172a !important;
}

[data-theme="light"] .blogger-setting-item {
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .setting-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .setting-desc {
  color: #475569 !important;
}

/* ==========================================================================
   2. ADVANCED SEO AUDIT & GENERATOR TAB (#tab-seo)
   ========================================================================== */
[data-theme="light"] .seo-pro-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .seo-pro-header {
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .seo-title-flex {
  color: #0f172a !important;
}

[data-theme="light"] .seo-source-panel {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .seo-source-label,
[data-theme="light"] .seo-inline-label,
[data-theme="light"] .seo-input-label {
  color: #1e293b !important;
  font-weight: 700 !important;
}

[data-theme="light"] .seo-source-pill {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .seo-source-pill:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .seo-source-pill.active {
  background: #0968ef !important;
  color: #ffffff !important;
  border-color: #0968ef !important;
}

[data-theme="light"] .seo-input-field,
[data-theme="light"] .seo-textarea-field,
[data-theme="light"] .seo-kw-input,
[data-theme="light"] .studio-select-sm {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .seo-kw-input-wrap {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .seo-gauge-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .seo-gauge-header {
  color: #334155 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .seo-score-num {
  color: #0f172a !important;
}

[data-theme="light"] .seo-score-status {
  color: #475569 !important;
}

[data-theme="light"] .seo-circle-bg {
  stroke: #e2e8f0 !important;
}

[data-theme="light"] .seo-pillar-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .seo-pillar-name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .seo-pillar-desc {
  color: #64748b !important;
}

[data-theme="light"] .seo-audit-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .seo-audit-text {
  color: #1e293b !important;
}

[data-theme="light"] .seo-audit-help {
  color: #64748b !important;
}

[data-theme="light"] .seo-serp-preview-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .seo-serp-title {
  color: #1a0dab !important;
}

[data-theme="light"] .seo-serp-snippet {
  color: #4d5156 !important;
}

[data-theme="light"] .seo-generator-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .gen-tab {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .gen-tab.active {
  background: #0968ef !important;
  color: #ffffff !important;
  border-color: #0968ef !important;
}

[data-theme="light"] .gen-output-box {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* ==========================================================================
   3. TOOLS & FEATURES TAB (#tab-tools)
   ========================================================================== */
[data-theme="light"] .tools-blog-context-banner {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .tools-blog-title-text {
  color: #0f172a !important;
}

[data-theme="light"] .tools-blog-url-text {
  color: #0284c7 !important;
}

[data-theme="light"] .tools-control-bar {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .tool-filter-btn {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .tool-filter-btn.active {
  background: #0968ef !important;
  color: #ffffff !important;
  border-color: #0968ef !important;
}

[data-theme="light"] .tool-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .tool-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .tool-desc {
  color: #475569 !important;
}

[data-theme="light"] .tool-metric-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .tool-metric-label {
  color: #64748b !important;
}

[data-theme="light"] .tool-metric-val {
  color: #0f172a !important;
}

[data-theme="light"] #modal-tool-inspector .modal-box {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #modal-tool-inspector .modal-header,
[data-theme="light"] #modal-tool-inspector .modal-footer {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #tool-inspector-name {
  color: #0f172a !important;
}

/* ==========================================================================
   4. CONNECT BLOG TAB (#tab-connect-blog)
   ========================================================================== */
[data-theme="light"] #tab-connect-blog .settings-group-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] #tab-connect-blog .settings-group-title {
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] #tab-connect-blog h3,
[data-theme="light"] #tab-connect-blog h4 {
  color: #0f172a !important;
}

[data-theme="light"] #tab-connect-blog .manual-field-block {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] #tab-connect-blog .field-title {
  color: #1e293b !important;
}

[data-theme="light"] #tab-connect-blog .field-desc {
  color: #64748b !important;
}

[data-theme="light"] #tab-connect-blog input.form-control-pro,
[data-theme="light"] #tab-connect-blog select.form-control-pro {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] #oauth-developer-box {
  background: #f8fafc !important;
  border: 1px solid #bfdbfe !important;
}

[data-theme="light"] .metric-card.glass-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .metric-label {
  color: #64748b !important;
}

[data-theme="light"] #connect-metric-active-blog {
  color: #0f172a !important;
}

/* ==========================================================================
   5. STUDIO SETTINGS TAB (#tab-studio-settings)
   ========================================================================== */
[data-theme="light"] .studio-card-pro {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .studio-card-title {
  color: #0f172a !important;
}

[data-theme="light"] .studio-card-desc {
  color: #475569 !important;
}

[data-theme="light"] .studio-preview-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .simulator-topbar-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .simulator-brand-title {
  color: #0f172a !important;
}

[data-theme="light"] .simulator-brand-sub {
  color: #64748b !important;
}

[data-theme="light"] .simulator-meta-row {
  background: #f1f5f9 !important;
  color: #334155 !important;
}

[data-theme="light"] .studio-input-pro,
[data-theme="light"] .studio-select-pro {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .studio-switch-row {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .switch-info-title {
  color: #0f172a !important;
}

[data-theme="light"] .switch-info-desc {
  color: #64748b !important;
}

/* ==========================================================================
   6. DEVELOPER SUPPORT TAB (#tab-support)
   ========================================================================== */
[data-theme="light"] #tab-support > div:first-of-type {
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] #tab-support [style*="radial-gradient"] {
  display: none !important;
}

[data-theme="light"] #tab-support .btn-secondary {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] #support-section-paypal-url {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

[data-theme="light"] #support-section-binance-payid {
  color: #b45309 !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   7. CATEGORIES & LABELS TAB (#tab-categories)
   ========================================================================== */
[data-theme="light"] .categories-main-title {
  color: #0f172a !important;
}

[data-theme="light"] .cat-kpi-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .cat-kpi-label {
  color: #64748b !important;
}

[data-theme="light"] .cat-kpi-val {
  color: #0f172a !important;
}

[data-theme="light"] .categories-toolbar-bar {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cat-search-field {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .category-card-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cat-card-name {
  color: #0f172a !important;
}

[data-theme="light"] .cat-card-count {
  color: #64748b !important;
}

/* ==========================================================================
   8. ANALYTICS TAB (#tab-analytics)
   ========================================================================== */
[data-theme="light"] .source-name,
[data-theme="light"] .country-name {
  color: #1e293b !important;
  font-weight: 600 !important;
}

[data-theme="light"] .rank-badge.silver {
  background: #e2e8f0 !important;
  color: #334155 !important;
}

[data-theme="light"] .rank-badge.gold {
  background: #fef3c7 !important;
  color: #b45309 !important;
}

/* ==========================================================================
   9. THEME & TEMPLATES TAB (#tab-theme)
   ========================================================================== */
[data-theme="light"] .cleaner-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .theme-tab-pill {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .theme-tab-pill.active {
  background: #0968ef !important;
  color: #ffffff !important;
}

[data-theme="light"] .theme-code-editor-wrap {
  border: 1px solid #cbd5e1 !important;
}

/* ==========================================================================
   10. ADS MANAGEMENT & BACKUPS & SETTINGS
   ========================================================================== */
[data-theme="light"] .ads-slot-card,
[data-theme="light"] .backup-card,
[data-theme="light"] .settings-section-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}


/* --- Specific Refined Overrides for Maximum Readability in Light Mode --- */

/* 1. SEO Tab Pillars & Scores */
[data-theme="light"] .pillar-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .seo-score-number {
  color: #0f172a !important;
  font-weight: 900 !important;
}

[data-theme="light"] .pillar-stat {
  color: #475569 !important;
}

[data-theme="light"] .seo-gauge-card,
[data-theme="light"] .seo-pillar-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .seo-form-group label {
  color: #1e293b !important;
  font-weight: 700 !important;
}

/* 2. Studio Settings Tab */
[data-theme="light"] .studio-label {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .switch-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .studio-dropzone-pro,
[data-theme="light"] #studio-logo-dropzone {
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
}

[data-theme="light"] .studio-logo-avatar-wrap {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .sim-meta-value {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .sim-meta-label {
  color: #64748b !important;
}

/* 3. Media Library Tab */
[data-theme="light"] .media-filters-group {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .media-filter-btn {
  color: #475569 !important;
}

[data-theme="light"] .media-filter-btn.active {
  background: #0968ef !important;
  color: #ffffff !important;
}

/* 4. Support Developer Tab */
[data-theme="light"] #tab-support [style*="color:#fde68a"],
[data-theme="light"] #tab-support [style*="color: #fde68a"] {
  color: #78350f !important;
}

[data-theme="light"] #tab-support [style*="color:#f3ba2f"],
[data-theme="light"] #tab-support [style*="color: #f3ba2f"] {
  color: #92400e !important;
}

[data-theme="light"] #tab-support [style*="background:rgba(243, 186, 47, 0.08)"] {
  background: #fffbeb !important;
  border: 1px dashed #fcd34d !important;
}

[data-theme="light"] #tab-support [style*="background:rgba(243, 186, 47, 0.2)"],
[data-theme="light"] #tab-support [style*="background: rgba(243, 186, 47, 0.2)"] {
  background: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

/* 5. Analytics Tab Technology Items */
[data-theme="light"] .tech-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

[data-theme="light"] .tech-item span {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* 6. Comments Tab Items */
[data-theme="light"] .comment-card-pro,
[data-theme="light"] .comment-row-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .comment-author-name {
  color: #0f172a !important;
}

[data-theme="light"] .comment-content-text {
  color: #334155 !important;
}

/* 7. Connect Blog Tab Badges & Texts */
[data-theme="light"] #tab-connect-blog .manual-field-block label {
  color: #0f172a !important;
}

[data-theme="light"] #tab-connect-blog .field-help-text {
  color: #64748b !important;
}


/* --- Connect & Support Custom Cards Architecture --- */
.connect-card-oauth {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(20, 30, 50, 0.95));
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5);
}
.connect-card-manual {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(16, 28, 24, 0.95));
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5);
}
.connect-card-list {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(20, 30, 50, 0.95));
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5);
}

[data-theme="light"] .connect-card-oauth,
[data-theme="light"] .connect-card-manual,
[data-theme="light"] .connect-card-list {
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.support-card-paypal {
  background: rgba(15, 23, 42, 0.75);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
}
.support-card-binance {
  background: rgba(15, 23, 42, 0.75);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
}

[data-theme="light"] .support-card-paypal {
  background: #ffffff !important;
  border-color: rgba(0, 121, 193, 0.35) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .support-card-binance {
  background: #ffffff !important;
  border-color: rgba(243, 186, 47, 0.45) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}


/* --- Final Precision Light Mode Polish --- */

/* Tools Meta Rows in Light Mode */
[data-theme="light"] .tool-meta-row {
  background: #f8fafc !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .tool-meta-row strong,
[data-theme="light"] .tool-meta-row span {
  color: #0f172a !important;
}

/* SEO SERP Simulator in Light Mode (True Google Light SERP) */
[data-theme="light"] .seo-serp-simulator-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .serp-view-toggle {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .serp-view-btn {
  color: #475569 !important;
}

[data-theme="light"] .serp-view-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .m-val,
[data-theme="light"] strong.m-val {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="light"] .seo-kw-density-card,
[data-theme="light"] .seo-kw-table-wrap {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

/* Studio Settings Preview Badges & Dropzone Text */
[data-theme="light"] .preview-badge {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}

[data-theme="light"] .simulator-active-pill {
  background: #dbeafe !important;
  color: #1e40af !important;
}

[data-theme="light"] .studio-dropzone-pro,
[data-theme="light"] .studio-dropzone-pro * {
  color: #334155;
}

[data-theme="light"] .studio-dropzone-pro i {
  color: #0284c7 !important;
}

/* Primary and Accent Buttons Guarantee Rich Background */
[data-theme="light"] .btn-primary,
[data-theme="light"] .action-btn.primary,
[data-theme="light"] .btn-connect-adsense {
  background: linear-gradient(135deg, #0968ef, #0284c7) !important;
  color: #ffffff !important;
  border: none !important;
}

[data-theme="light"] .btn-primary *,
[data-theme="light"] .action-btn.primary *,
[data-theme="light"] .btn-connect-adsense * {
  color: #ffffff !important;
}

/* Secondary Buttons Contrast */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .action-btn.secondary,
[data-theme="light"] .action-btn.outline-secondary {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .btn-secondary *,
[data-theme="light"] .action-btn.secondary *,
[data-theme="light"] .action-btn.outline-secondary * {
  color: #1e293b !important;
}