/* EaglePress v2.0 — Admin Core CSS */

:root {
  --ep-primary: #2271b1;
  --ep-primary-hover: #135e96;
  --ep-secondary: #135e96;
  --ep-success: #00a32a;
  --ep-warning: #dba617;
  --ep-danger: #d63638;
  --ep-info: #0072aa;
  --ep-sidebar-bg: #1e2327;
  --ep-sidebar-text: #a7aaad;
  --ep-sidebar-active: #ffffff;
  --ep-sidebar-hover: #d7dde4;
  --ep-sidebar-width: 220px;
  --ep-topbar-bg: #ffffff;
  --ep-topbar-border: #dcdcde;
  --ep-topbar-height: 56px;
  --ep-bg: #f0f0f1;
  --ep-content-bg: #ffffff;
  --ep-border: #dcdcde;
  --ep-border-light: #e5e5e5;
  --ep-text: #1d2327;
  --ep-text-muted: #646970;
  --ep-text-light: #8c8f94;
  --ep-radius: 6px;
  --ep-radius-sm: 3px;
  --ep-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --ep-shadow-lg: 0 4px 20px rgba(0,0,0,0.15);
  --ep-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ep-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }

body.ep-admin-body {
  font-family: var(--ep-font);
  background: var(--ep-bg);
  color: var(--ep-text);
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--ep-primary); text-decoration: none; }
a:hover { color: var(--ep-primary-hover); text-decoration: underline; }

#ep-admin-wrapper { display: flex; min-height: 100vh; }

#ep-sidebar {
  width: var(--ep-sidebar-width);
  min-height: 100vh;
  background: var(--ep-sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  overflow-y: auto;
  transition: transform 0.3s ease;
}

.ep-sidebar-logo { padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ep-sidebar-logo a { color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.ep-sidebar-logo a span { color: #72aee6; }
.ep-sidebar-nav { padding: 12px 0; flex: 1; }

.ep-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  color: var(--ep-sidebar-text);
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
  border-left: 3px solid transparent;
}

.ep-nav-item:hover { background: rgba(255,255,255,0.07); color: var(--ep-sidebar-hover); text-decoration: none; }
.ep-nav-item.active { background: rgba(34,113,177,0.2); color: var(--ep-sidebar-active); border-left-color: var(--ep-primary); }
.ep-nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

.ep-sidebar-user { padding: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.ep-sidebar-user-name { color: #fff; font-size: 13px; font-weight: 600; }
.ep-sidebar-user-role { color: var(--ep-sidebar-text); font-size: 11px; text-transform: capitalize; margin-top: 2px; }

#ep-admin-main { margin-left: var(--ep-sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

#ep-topbar {
  height: var(--ep-topbar-height);
  background: var(--ep-topbar-bg);
  border-bottom: 1px solid var(--ep-topbar-border);
  display: flex; align-items: center;
  padding: 0 20px; gap: 12px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--ep-shadow);
}

.ep-sidebar-toggle { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px 8px; color: var(--ep-text-muted); border-radius: var(--ep-radius-sm); display: none; }
.ep-topbar-left { flex: 1; }
.ep-topbar-site { font-size: 14px; font-weight: 600; color: var(--ep-text); }
.ep-topbar-right { display: flex; align-items: center; gap: 16px; }
.ep-topbar-link { font-size: 13px; color: var(--ep-text-muted); text-decoration: none; }
.ep-topbar-link:hover { color: var(--ep-primary); }
.ep-logout-link { color: var(--ep-danger); }

#ep-admin-content { padding: 24px; flex: 1; }

.ep-admin-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--ep-border);
}
.ep-admin-page-header h1 { font-size: 22px; font-weight: 600; color: var(--ep-text); }

.ep-dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px; margin-bottom: 28px;
}

.ep-card {
  background: var(--ep-content-bg);
  border-radius: var(--ep-radius);
  padding: 20px;
  box-shadow: var(--ep-shadow);
  border-left: 4px solid transparent;
  display: flex; flex-direction: column; gap: 4px;
}

.ep-card-blue   { border-left-color: var(--ep-primary); }
.ep-card-green  { border-left-color: var(--ep-success); }
.ep-card-orange { border-left-color: #f56e28; }
.ep-card-purple { border-left-color: #9b59b6; }
.ep-card-teal   { border-left-color: #1abc9c; }

.ep-card-count { font-size: 36px; font-weight: 700; color: var(--ep-text); line-height: 1; }
.ep-card-label { font-size: 12px; color: var(--ep-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.ep-card-pending { font-size: 11px; color: var(--ep-warning); font-weight: 600; }
.ep-card-link { font-size: 12px; color: var(--ep-primary); margin-top: 8px; }

.ep-table { width: 100%; border-collapse: collapse; background: var(--ep-content-bg); border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); overflow: hidden; font-size: 13px; }
.ep-table thead { background: #f6f7f7; }
.ep-table th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ep-text-muted); border-bottom: 1px solid var(--ep-border); }
.ep-table td { padding: 12px 16px; border-bottom: 1px solid var(--ep-border-light); vertical-align: middle; }
.ep-table tr:last-child td { border-bottom: none; }
.ep-table tbody tr:hover { background: #f9f9f9; }
.ep-table-empty { text-align: center; color: var(--ep-text-muted); padding: 40px !important; font-style: italic; }
.ep-row-actions { font-size: 12px; color: var(--ep-text-muted); margin-top: 4px; display: none; }
.ep-table tr:hover .ep-row-actions { display: block; }
.ep-row-actions a { color: var(--ep-text-muted); margin-right: 6px; }
.ep-row-actions a:hover { color: var(--ep-primary); }
.ep-row-actions .ep-text-danger { color: var(--ep-danger); }
.ep-nowrap { white-space: nowrap; }

.ep-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.ep-badge-published { background: #d5ece7; color: #00664a; }
.ep-badge-draft     { background: #f0f0f1; color: #646970; }
.ep-badge-preview   { background: #fce8c3; color: #8a5200; }
.ep-badge-trash     { background: #fcdfdf; color: #8a2424; }
.ep-badge-approved  { background: #d5ece7; color: #00664a; }
.ep-badge-pending   { background: #fce8c3; color: #8a5200; }
.ep-badge-spam      { background: #fcdfdf; color: #8a2424; }

.ep-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: var(--ep-radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; line-height: 1; white-space: nowrap; }
.ep-btn:hover { text-decoration: none; }
.ep-btn-primary { background: var(--ep-primary); color: #fff; border-color: var(--ep-primary); }
.ep-btn-primary:hover { background: var(--ep-primary-hover); border-color: var(--ep-primary-hover); color: #fff; }
.ep-btn-secondary { background: #f6f7f7; color: var(--ep-text); border-color: var(--ep-border); }
.ep-btn-secondary:hover { background: #e6e6e6; border-color: #c3c4c7; color: var(--ep-text); }
.ep-btn-success { background: var(--ep-success); color: #fff; border-color: var(--ep-success); }
.ep-btn-success:hover { background: #007a1e; color: #fff; }
.ep-btn-warning { background: var(--ep-warning); color: #fff; border-color: var(--ep-warning); }
.ep-btn-warning:hover { background: #b98a00; color: #fff; }
.ep-btn-danger { background: var(--ep-danger); color: #fff; border-color: var(--ep-danger); }
.ep-btn-danger:hover { background: #a91c1e; color: #fff; }
.ep-btn-sm { padding: 4px 10px; font-size: 12px; }
.ep-btn-full { width: 100%; justify-content: center; }
.ep-quick-actions { display: flex; gap: 8px; }

.ep-form-group { margin-bottom: 16px; }
.ep-form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--ep-text); margin-bottom: 5px; }
.ep-form-control { width: 100%; padding: 8px 12px; border: 1px solid var(--ep-border); border-radius: var(--ep-radius-sm); font-size: 13px; font-family: var(--ep-font); color: var(--ep-text); background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.ep-form-control:focus { outline: none; border-color: var(--ep-primary); box-shadow: 0 0 0 2px rgba(34,113,177,0.2); }
.ep-form-control-sm { width: 120px; }
textarea.ep-form-control { resize: vertical; min-height: 80px; }
.ep-form-vertical .ep-form-group { margin-bottom: 14px; }

.ep-toggle-label { display: flex !important; align-items: center; gap: 10px; cursor: pointer; font-weight: 500 !important; }
.ep-toggle-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ep-toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; background: var(--ep-border); border-radius: 11px; transition: background 0.2s; flex-shrink: 0; }
.ep-toggle-switch::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.ep-toggle-label input:checked + .ep-toggle-switch { background: var(--ep-primary); }
.ep-toggle-label input:checked + .ep-toggle-switch::after { transform: translateX(18px); }
.ep-radio-group { display: flex; flex-direction: column; gap: 6px; }
.ep-radio-group label { display: flex; align-items: center; gap: 6px; font-weight: normal !important; cursor: pointer; }
.ep-checkbox-label { display: flex !important; align-items: center; gap: 6px; font-weight: normal !important; cursor: pointer; padding: 3px 0; }

#ep-stale-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff8e1;
  border: 1px solid #f9a825;
  color: #5d4200;
  border-radius: var(--ep-radius);
  padding: 10px 16px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 500;
}
.ep-stale-icon { font-size: 18px; flex-shrink: 0; }
.ep-stale-btn {
  margin-left: auto;
  background: #f9a825;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ep-stale-btn:hover { background: #e65100; }

.ep-editor-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
.ep-editor-main { background: var(--ep-content-bg); border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); overflow: hidden; }
.ep-editor-title-wrap { padding: 16px; border-bottom: 1px solid var(--ep-border-light); }
.ep-title-input { width: 100%; font-size: 24px; font-weight: 700; border: none; outline: none; color: var(--ep-text); font-family: var(--ep-font); background: transparent; padding: 0; }
.ep-title-input::placeholder { color: #adb5bd; }
.ep-editor-tabs { display: flex; border-bottom: 1px solid var(--ep-border); padding: 0 16px; }
.ep-tab-btn { padding: 10px 16px; background: none; border: none; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ep-text-muted); margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; }
.ep-tab-btn:hover { color: var(--ep-text); }
.ep-tab-btn.ep-tab-active { color: var(--ep-primary); border-bottom-color: var(--ep-primary); }

.ep-editor-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--ep-border-light); background: #fafafa; }
.ep-toolbar-btn { padding: 5px 9px; background: none; border: 1px solid transparent; border-radius: var(--ep-radius-sm); cursor: pointer; font-size: 13px; color: var(--ep-text); transition: background 0.1s, border-color 0.1s; line-height: 1; }
.ep-toolbar-btn:hover { background: #e8eaf0; border-color: var(--ep-border); }
.ep-toolbar-sep { width: 1px; height: 22px; background: var(--ep-border); margin: 0 4px; }
.ep-media-picker-btn { margin-left: auto; }

.ep-content-editor { width: 100%; min-height: 450px; border: none; outline: none; padding: 16px; font-size: 14px; font-family: var(--ep-mono); line-height: 1.7; resize: vertical; background: #fff; color: var(--ep-text); }
.ep-editor-status-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: #fafafa; border-top: 1px solid var(--ep-border-light); font-size: 11px; color: var(--ep-text-muted); }
.ep-preview-area { padding: 24px; min-height: 450px; font-size: 15px; line-height: 1.7; color: var(--ep-text); }
.ep-preview-area h1, .ep-preview-area h2, .ep-preview-area h3 { margin: 1.2em 0 0.6em; }
.ep-preview-area p { margin: 0.8em 0; }
.ep-preview-area :not(.ep-code-block) > code { background: #f1f3f5; border: 1px solid #dee2e6; padding: 2px 6px; border-radius: 3px; font-family: var(--ep-mono); font-size: 0.88em; color: #495057; }
.ep-preview-area pre { background: #f8f9fa; border: 1px solid #e9ecef; border-left: 3px solid var(--ep-primary); color: #212529; padding: 20px 24px; border-radius: var(--ep-radius); overflow-x: auto; margin: 1.5em 0; font-size: 0.9em; line-height: 1.6; }
.ep-preview-area pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
.ep-preview-area blockquote { border-left: 4px solid var(--ep-primary); padding-left: 16px; color: var(--ep-text-muted); margin: 1em 0; }
.ep-preview-area table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.ep-preview-area th, .ep-preview-area td { padding: 10px 14px; border: 1px solid var(--ep-border); text-align: left; }
.ep-preview-area th { background: #f6f7f7; font-weight: 600; }
[data-theme="dark"] .ep-preview-area th { background: #1f3060; }
[data-theme="dark"] .ep-preview-area td { border-color: #2a3a6e; }
.ep-download-btn { display: inline-flex; align-items: center; gap: 14px; padding: 14px 20px; background: #f8f9fa; border: 1px solid #dee2e6; border-left: 4px solid var(--ep-primary); border-radius: var(--ep-radius); text-decoration: none; color: var(--ep-text); margin: 1.2em 0; max-width: 420px; width: 100%; box-sizing: border-box; transition: background 0.2s; }
.ep-download-btn:hover { background: #e9ecef; color: var(--ep-text); }
.ep-download-icon { font-size: 1.8em; color: var(--ep-primary); line-height: 1; flex-shrink: 0; }
.ep-download-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ep-download-label { font-weight: 600; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-download-filename { font-size: 0.78em; color: var(--ep-text-muted); font-family: var(--ep-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-img { max-width: 100%; height: auto; }
.ep-img-left   { float: left;  margin: 0.4em 1.2em 0.8em 0; }
.ep-img-right  { float: right; margin: 0.4em 0 0.8em 1.2em; }
.ep-img-center { display: block; margin: 0.8em auto; }

.ep-editor-sidebar { display: flex; flex-direction: column; gap: 14px; align-self: start; }
.ep-sidebar-box { background: var(--ep-content-bg); border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); overflow: hidden; }
.ep-sidebar-box-header { padding: 10px 14px; background: #f6f7f7; border-bottom: 1px solid var(--ep-border); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ep-text-muted); }
.ep-sidebar-box-body { padding: 14px; }
.ep-save-status { font-size: 12px; color: var(--ep-text-muted); margin-top: 8px; text-align: center; }
.ep-slug-type-toggle { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ep-slug-type-toggle label { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.ep-slug-input { font-family: var(--ep-mono); font-size: 12px; }
.ep-slug-preview { font-size: 11px; color: var(--ep-text-muted); margin-top: 5px; word-break: break-all; }
.ep-featured-preview { width: 100%; height: auto; border-radius: var(--ep-radius-sm); margin-bottom: 10px; display: block; }
/* Featured image shown at the top of the editor Preview tab (when "Display in
   article" is checked) — whole image, nothing clipped, matching the article. */
.ep-preview-featured-image { margin: 0 0 20px; }
.ep-preview-featured-image img { width: 100%; height: auto; max-height: 480px; object-fit: contain; object-position: center; display: block; border-radius: var(--ep-radius-sm); }
.ep-cats-list { max-height: 180px; overflow-y: auto; }

.ep-admin-section { margin-top: 28px; }
.ep-admin-section h2 { font-size: 16px; font-weight: 600; margin-bottom: 14px; color: var(--ep-text); }

.ep-drafts-section { border-left: 3px solid var(--ep-warning, #f0b429); padding-left: 12px; }
.ep-draft-count { font-size: 12px; font-weight: 400; color: var(--ep-text-muted); margin-left: 4px; }
.ep-type-badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; }
.ep-type-post { background: #dbeafe; color: #1e40af; }
.ep-type-page { background: #ede9fe; color: #5b21b6; }

.ep-settings-form { max-width: 960px; }
.ep-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-bottom: 24px; }
.ep-settings-section { background: var(--ep-content-bg); border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); padding: 20px; }
.ep-settings-section h2 { font-size: 15px; font-weight: 600; color: var(--ep-text); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--ep-border-light); }
.ep-settings-actions { display: flex; align-items: center; gap: 16px; }
#ep-settings-status { font-size: 13px; color: var(--ep-success); }

/* ── Theme preview ─────────────────────────────────────────────────── */
.ep-theme-preview-wrap {
  position: relative;
  margin-top: 10px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--ep-border);
  background: var(--ep-border-light, #f6f7f7);
  aspect-ratio: 16 / 9;
}
#ep-theme-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s;
}
.ep-theme-preview-none {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ep-text-muted, #888);
}

/* ── Account Security card ─────────────────────────────────────────── */
.ep-password-card {
  max-width: 960px;
  margin-top: 24px;
}
.ep-pw-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 20px;
}
.ep-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.ep-input-wrap .ep-form-control { padding-right: 40px; }
.ep-input-eye {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  color: var(--ep-text-muted, #888);
  padding: 0;
  transition: color 0.15s;
}
.ep-input-eye:hover { color: var(--ep-text); }
.ep-input-eye-active { color: var(--ep-primary) !important; }
.ep-pw-strength-bar {
  height: 4px;
  background: var(--ep-border, #ddd);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.ep-pw-strength-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.ep-pw-hint {
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
  min-height: 16px;
}
#ep-password-status { font-size: 13px; }

/* Distribution Manager */
.ep-dist-card {}
.ep-dist-desc { font-size: 13px; color: var(--ep-text-muted); margin-bottom: 16px; line-height: 1.5; }
.ep-dist-desc code { background: var(--ep-input-bg); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.ep-dist-current { display: flex; align-items: center; gap: 10px; background: var(--ep-input-bg); border: 1px solid var(--ep-border); border-radius: var(--ep-radius); padding: 10px 14px; margin-bottom: 18px; font-size: 13px; flex-wrap: wrap; }
.ep-dist-current.ep-dist-none { color: var(--ep-text-muted); font-style: italic; }
.ep-dist-badge { background: #22c55e; color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.ep-dist-meta { color: var(--ep-text-muted); font-size: 12px; }
.ep-dist-meta code { font-size: 11px; }
.ep-dist-ver-group { margin-bottom: 14px; }
.ep-dist-dropzone { border: 2px dashed var(--ep-border); border-radius: var(--ep-radius); padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: var(--ep-input-bg); }
.ep-dist-dropzone:hover, .ep-dist-dropzone.ep-drag-over { border-color: var(--ep-primary); background: rgba(0,115,170,0.04); }
.ep-dist-dropzone.ep-dist-has-file { border-color: #22c55e; background: rgba(34,197,94,0.04); }
.ep-dist-drop-icon { font-size: 36px; margin-bottom: 8px; }
.ep-dist-drop-label { font-size: 14px; color: var(--ep-text); margin-bottom: 6px; }
.ep-dist-drop-sub { font-size: 13px; color: var(--ep-text-muted); }
.ep-dist-browse-btn { background: none; border: none; color: var(--ep-primary); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; }
.ep-dist-browse-btn:hover { color: var(--ep-primary-dark, #005177); }
.ep-dist-filename { margin-top: 10px; font-size: 12px; color: #22c55e; font-weight: 600; min-height: 18px; }
.ep-dist-progress-wrap { margin-top: 12px; }
.ep-dist-progress-bar { height: 6px; background: var(--ep-border); border-radius: 3px; overflow: hidden; }
.ep-dist-progress-fill { height: 100%; background: var(--ep-primary); border-radius: 3px; transition: width 0.2s; }
.ep-dist-progress-label { font-size: 12px; color: var(--ep-text-muted); margin-top: 4px; }
#ep-dist-status { font-size: 13px; margin-left: 10px; }
#ep-dist-status.success { color: #22c55e; }
#ep-dist-status.error { color: #dc2626; }
[data-theme="dark"] .ep-dist-dropzone { border-color: #2a3a6e; }
[data-theme="dark"] .ep-dist-dropzone:hover, [data-theme="dark"] .ep-dist-dropzone.ep-drag-over { border-color: var(--ep-primary); }
[data-theme="dark"] .ep-dist-dropzone.ep-dist-has-file { border-color: #22c55e; }

.ep-two-col-layout { display: grid; grid-template-columns: 350px 1fr; gap: 24px; align-items: start; }
.ep-col h2 { font-size: 16px; font-weight: 600; margin-bottom: 14px; color: var(--ep-text); }
.ep-user-avatar { border-radius: 50%; object-fit: cover; }

.ep-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.ep-media-grid-full { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ep-media-item { position: relative; border-radius: var(--ep-radius); overflow: hidden; background: #f0f0f1; aspect-ratio: 1; cursor: pointer; box-shadow: var(--ep-shadow); transition: transform 0.15s, box-shadow 0.15s; }
.ep-media-item:hover { transform: translateY(-2px); box-shadow: var(--ep-shadow-lg); }
.ep-media-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ep-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ep-media-file-thumb { font-size: 12px; font-weight: 700; color: var(--ep-text-muted); background: #e0e0e0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ep-media-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); display: flex; flex-direction: column; justify-content: space-between; padding: 10px; opacity: 0; transition: opacity 0.2s; }
.ep-media-item:hover .ep-media-overlay { opacity: 1; }
.ep-media-info { color: #fff; font-size: 11px; }
.ep-media-filename { font-weight: 600; word-break: break-all; margin-bottom: 3px; }
.ep-media-size, .ep-media-date { color: #ccc; font-size: 10px; }
.ep-media-actions { display: flex; justify-content: flex-end; }
.ep-media-empty { grid-column: 1 / -1; text-align: center; color: var(--ep-text-muted); padding: 40px; font-style: italic; }

.ep-upload-dropzone { border: 2px dashed var(--ep-border); border-radius: var(--ep-radius); padding: 40px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: #fafafa; }
.ep-upload-dropzone:hover, .ep-upload-dropzone.ep-drag-over { border-color: var(--ep-primary); background: rgba(34,113,177,0.05); }
.ep-dropzone-icon { font-size: 36px; margin-bottom: 8px; }
.ep-dropzone-inner p { color: var(--ep-text-muted); font-size: 14px; }
.ep-text-link { color: var(--ep-primary); cursor: pointer; text-decoration: underline; }

.ep-progress-bar { width: 100%; height: 6px; background: var(--ep-border); border-radius: 3px; overflow: hidden; margin-top: 12px; }
.ep-progress-fill { height: 100%; background: var(--ep-primary); width: 0; transition: width 0.3s; }
#ep-progress-label { font-size: 12px; color: var(--ep-text-muted); margin-top: 6px; text-align: center; }

.ep-media-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ep-media-modal-header h3 { font-size: 16px; font-weight: 600; }
.ep-media-modal-body { max-height: 400px; overflow-y: auto; }

.ep-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ep-modal-box { background: #fff; border-radius: var(--ep-radius); box-shadow: var(--ep-shadow-lg); width: 100%; max-width: 760px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.ep-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ep-border); font-size: 16px; font-weight: 600; }
.ep-modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--ep-text-muted); padding: 4px; border-radius: 3px; line-height: 1; }
.ep-modal-close:hover { background: #f0f0f1; color: var(--ep-text); }
.ep-modal-body { padding: 20px; overflow-y: auto; flex: 1; }

#ep-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; }
.ep-toast { padding: 12px 18px; border-radius: var(--ep-radius); color: #fff; font-size: 13px; font-weight: 500; box-shadow: var(--ep-shadow-lg); display: flex; align-items: center; gap: 10px; min-width: 250px; max-width: 400px; animation: ep-toast-in 0.3s ease; cursor: pointer; }
.ep-toast-success { background: var(--ep-success); }
.ep-toast-error   { background: var(--ep-danger); }
.ep-toast-info    { background: var(--ep-primary); }
.ep-toast-warning { background: var(--ep-warning); }
@keyframes ep-toast-in { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.ep-pagination { display: flex; gap: 6px; margin-top: 20px; justify-content: center; }
.ep-page-btn { display: inline-block; padding: 6px 12px; border: 1px solid var(--ep-border); border-radius: var(--ep-radius-sm); font-size: 13px; color: var(--ep-text); background: #fff; text-decoration: none; transition: background 0.15s; }
.ep-page-btn:hover { background: #f0f0f1; text-decoration: none; color: var(--ep-text); }
.ep-page-btn.ep-page-active { background: var(--ep-primary); color: #fff; border-color: var(--ep-primary); }

.ep-auth-card { background: #fff; border-radius: var(--ep-radius); box-shadow: var(--ep-shadow-lg); padding: 40px; width: 100%; max-width: 400px; margin: 0 auto; }
.ep-auth-logo { text-align: center; font-size: 28px; font-weight: 800; color: var(--ep-text); margin-bottom: 24px; }
.ep-auth-logo span { color: var(--ep-primary); }
.ep-login-error { background: #fcdfdf; color: #8a2424; padding: 10px 14px; border-radius: var(--ep-radius-sm); font-size: 13px; margin-bottom: 16px; }

@media (max-width: 992px) {
  #ep-sidebar { transform: translateX(-100%); }
  #ep-sidebar.ep-sidebar-open { transform: translateX(0); }
  #ep-admin-main { margin-left: 0; }
  .ep-sidebar-toggle { display: block; }
  .ep-editor-layout { grid-template-columns: 1fr; }
  .ep-editor-sidebar { align-self: auto; }
  .ep-two-col-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  #ep-admin-content { padding: 16px; }
  .ep-dashboard-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── Syntax Highlight Code Blocks ──────────────────────────────────────── */

/* Dark mode defaults (github-dark) */
.ep-code-block {
  --cb-bg: #0d1117;
  --cb-border: #30363d;
  --cb-toolbar-bg: #161b22;
  --cb-toolbar-border: #30363d;
  --cb-lang-color: #8b949e;
  --cb-select-bg: #21262d;
  --cb-select-text: #c9d1d9;
  --cb-select-border: #30363d;
  --cb-select-arrow: %238b949e;
  --cb-select-focus: #58a6ff;
  --cb-code-text: #e6edf3;

  position: relative;
  margin: 1.5em 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Light mode overrides */
.ep-code-block[data-code-mode="light"] {
  --cb-bg: #f6f8fa;
  --cb-border: #d0d7de;
  --cb-toolbar-bg: #f0f1f3;
  --cb-toolbar-border: #d0d7de;
  --cb-lang-color: #57606a;
  --cb-select-bg: #eaeef2;
  --cb-select-text: #24292f;
  --cb-select-border: #d0d7de;
  --cb-select-arrow: %2357606a;
  --cb-select-focus: #0969da;
  --cb-code-text: #24292f;
}

.ep-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: var(--cb-toolbar-bg);
  border-bottom: 1px solid var(--cb-toolbar-border);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ep-code-toolbar-selects {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ep-code-lang-name {
  color: var(--cb-lang-color);
  font-size: 11px;
  font-family: var(--ep-mono, "SFMono-Regular", Consolas, monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  user-select: none;
}
.ep-code-lang-select,
.ep-code-theme-select {
  -webkit-appearance: none;
  appearance: none;
  background: var(--cb-select-bg);
  color: var(--cb-select-text);
  border: 1px solid var(--cb-select-border);
  border-radius: 4px;
  font-size: 11px;
  padding: 3px 22px 3px 8px;
  cursor: pointer;
  outline: none;
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px;
  transition: border-color 0.15s, color 0.15s;
}
.ep-code-lang-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b949e'/%3E%3C/svg%3E");
}
.ep-code-theme-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b949e'/%3E%3C/svg%3E");
}
.ep-code-lang-select:hover, .ep-code-lang-select:focus,
.ep-code-theme-select:hover, .ep-code-theme-select:focus {
  border-color: var(--cb-select-focus);
  color: var(--cb-code-text);
}
.ep-code-wrap-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cb-lang-color);
  font-size: 11px;
  font-family: var(--ep-mono, "SFMono-Regular", Consolas, monospace);
  cursor: pointer;
  user-select: none;
}
.ep-code-wrap-toggle {
  margin: 0;
  cursor: pointer;
  accent-color: #D4AF37;
}
input.ep-code-wrap-toggle:checked {
  outline: 2px solid #D4AF37;
  outline-offset: 1px;
}
/* Wrap label: full text on desktop, ↵ on mobile */
.ep-wrap-text-short { display: none; }
/* Mobile lang emoji button — hidden on desktop, shown on mobile */
.ep-lang-emoji-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 0 2px;
  line-height: 1;
  position: relative;
  color: var(--cb-lang-color);
}
/* Tooltip appended to body by JS with position:fixed — only visual styles here */
.ep-lang-tooltip {
  background: #222;
  color: #fff;
  font-size: 11px;
  font-family: var(--ep-mono, "SFMono-Regular", Consolas, monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99999;
}
.ep-toolbar-toast { transition: opacity 0.3s ease; }
.ep-toolbar-toast.ep-toast-hide { opacity: 0; }
/* ── Vertical divider — sets the theme/format controls apart from the toggles ── */
.ep-code-toolbar-sep {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 18px;
  background: var(--cb-select-border);
  opacity: 0.8;
  margin: 0 2px;
}
@media (max-width: 640px) {
  .ep-code-lang-name { display: none; }
  .ep-lang-emoji-btn { display: inline-flex; align-items: center; }
  .ep-wrap-text-full { display: none; }
  /* Word wrap collapses to its ↵ glyph only — no checkbox on mobile.
     Boxed with a grey border so it reads clearly in the toolbar. */
  .ep-code-wrap-label .ep-code-wrap-toggle { display: none; }
  .ep-wrap-text-short {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    line-height: 1;
    padding: 2px 6px;
    border: 1px solid var(--cb-select-border);
    border-radius: 4px;
  }
  /* Word-wrap button border tracks the code block's mode: white on dark, black on light */
  .ep-code-block[data-code-mode="dark"] .ep-wrap-text-short { border-color: #ffffff; }
  .ep-code-block:not([data-code-mode="dark"]) .ep-wrap-text-short { border-color: #000000; }
  .ep-code-wrap-toggle:checked ~ .ep-wrap-text-short {
    filter: drop-shadow(0 0 2px #D4AF37);
  }
  .ep-code-ln-label .ep-code-ln-toggle,
  .ep-ln-text-full { display: none; }
  .ep-ln-text-short {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
  }
  .ep-code-ln-toggle:checked ~ .ep-ln-text-short {
    filter: drop-shadow(0 0 2px #D4AF37);
  }
  /* Lay every control out in one left-aligned row that scrolls horizontally
     instead of overlapping when it is wider than the screen. Order on screen:
     language · line numbers · wrap · light/dark · theme combo · language combo. */
  .ep-code-toolbar {
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--cb-select-border) transparent;
  }
  .ep-code-toolbar > *,
  .ep-code-toolbar-left > *,
  .ep-code-toolbar-selects > * { flex: 0 0 auto; }
  .ep-code-toolbar-left,
  .ep-code-toolbar-selects { gap: 10px; }
  .ep-code-toolbar::-webkit-scrollbar { height: 6px; }
  .ep-code-toolbar::-webkit-scrollbar-track { background: transparent; }
  .ep-code-toolbar::-webkit-scrollbar-thumb {
    background: var(--cb-select-border);
    border-radius: 3px;
  }
}
/* ── Toolbar left group: language indicator + line-number toggle ─────────── */
.ep-code-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* ── Line-number toggle (desktop: labelled checkbox; mobile: # keycap) ───── */
.ep-code-ln-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cb-lang-color);
  font-size: 11px;
  font-family: var(--ep-mono, "SFMono-Regular", Consolas, monospace);
  cursor: pointer;
  user-select: none;
}
.ep-code-ln-toggle {
  margin: 0;
  cursor: pointer;
  accent-color: #D4AF37;
}
input.ep-code-ln-toggle:checked {
  outline: 2px solid #D4AF37;
  outline-offset: 1px;
}
.ep-ln-text-short { display: none; }  /* desktop shows the labelled checkbox */
/* ── Line numbers: one row per source line (number + code share each row) ──────
   Each source line becomes an `.ep-cl` flex row holding its number and its code,
   so a wrapped line or a taller line (e.g. a Markdown heading) keeps its number
   aligned at the top and every later number stays correct — for any line length.
   The original <code> stays in the DOM (hidden) as the pristine source for
   re-highlighting; app_core.js rebuilds the visible rows from it after each
   highlight. Wrap and line numbers can be used together. */
.ep-code-ln-rows { display: none; }
.ep-code-block.ep-show-line-numbers pre code { display: none !important; }
.ep-code-block.ep-show-line-numbers .ep-code-ln-rows {
  /* Flex column with align-items:stretch makes every row fill the container
     width — including empty separator rows, so their full-width rule/dots show.
     Width is `auto` (fills the code area); long non-wrapping lines overflow and
     the <pre> scrolls horizontally. A `max-content` width here would let rows
     shrink-wrap, collapsing the separator's cell to zero and hiding its rule. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: auto;
  font-family: var(--ep-mono, "SFMono-Regular", Consolas, monospace);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cb-code-text);
}
.ep-code-block.ep-show-line-numbers[data-lang="markdown"] .ep-code-ln-rows { line-height: 1.85; }
/* Admin preview scales code to 0.9em — keep the rows in lockstep */
.ep-preview-area .ep-code-block.ep-show-line-numbers .ep-code-ln-rows { font-size: inherit; }
.ep-code-ln-rows .ep-cl { display: flex; align-items: flex-start; }
.ep-code-ln-rows .ep-cl-n {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: var(--ep-ln-w, 2ch);
  padding-right: 14px;
  text-align: right;
  border-right: 1px solid var(--cb-toolbar-border);
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--cb-bg);
  color: var(--cb-lang-color);
  opacity: 0.7;
  user-select: none;
  -webkit-user-select: none;
}
.ep-code-ln-rows .ep-cl-c {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 14px;
  white-space: pre;
}
.ep-code-block.ep-code-wrap .ep-code-ln-rows .ep-cl-c {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* A code_md_render separator line (`---`) is a full-width rule / dots. Now that
   each row spans the full width (above), its code cell has a real width, so the
   separator fills it as an ordinary block (width:auto — a width:100% block was
   collapsing to ~0, making the border-top a zero-length, invisible line). */
.ep-code-ln-rows .ep-cl-c.ep-cl-rule {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centre the rule on a normal-height line */
  align-items: stretch;      /* rule fills the column width reliably */
  align-self: stretch;       /* cell matches the row (line) height */
}
.ep-code-ln-rows .ep-cl-c.ep-cl-rule > .ep-code-sep {
  width: auto;
  margin: 0;                 /* no extra height → even line-number spacing */
}
.ep-code-block.ep-code-wrap pre {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  overflow-x: hidden;
}
.ep-code-block.ep-code-wrap pre code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}
.ep-code-block pre {
  margin: 0;
  padding: 1em 1.2em;
  overflow-x: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  border-left: none;
}
/* Grey text bug fix: let hljs control token colors; fallback to CSS var */
.ep-code-block pre code {
  background: transparent !important;
  border: none;
  padding: 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cb-code-text);
  border-radius: 0;
}
/* Override admin preview defaults inside code blocks */
.ep-preview-area .ep-code-block pre {
  background: transparent;
  border: none;
  border-left: none;
  padding: 1em 1.2em;
  margin: 0;
  font-size: 0.9em;
  border-radius: 0;
}
.ep-preview-area .ep-code-block pre code {
  background: transparent !important;
  border: none;
  padding: 0;
  color: var(--cb-code-text);
  font-size: inherit;
}
/* Inline code wrapper */
.ep-inline-code-wrap {
  position: relative;
  display: inline;
}
.ep-inline-code-wrap code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875em;
  background: rgba(110, 118, 129, 0.15);
  border: 1px solid rgba(110, 118, 129, 0.25);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}
.ep-preview-area .ep-inline-code-wrap code {
  background: rgba(110, 118, 129, 0.15);
  border: 1px solid rgba(110, 118, 129, 0.25);
  padding: 0.1em 0.4em;
  color: inherit;
}
.ep-inline-lang-select {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: -22px;
  right: -2px;
  background: #161b22;
  color: #8b949e;
  border: 1px solid #30363d;
  border-radius: 3px;
  font-size: 10px;
  padding: 1px 16px 1px 5px;
  cursor: pointer;
  outline: none;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238b949e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 6px;
}
.ep-inline-code-wrap:hover .ep-inline-lang-select,
.ep-inline-lang-select:focus {
  opacity: 1;
  pointer-events: auto;
}

/* ── Markdown + HTML: token-level visual enhancements ───────────────────────
   These rules layer on top of the hljs theme colours, applying typographic
   weight, style, and structure so that Markdown syntax reads as formatted
   prose rather than a flat wall of coloured text.                           */

.ep-code-block[data-lang="markdown"] pre code {
  line-height: 1.85;
}

/* Headings: bold + size — color comes from the active hljs CDN theme */
.ep-code-block[data-lang="markdown"] .hljs-section {
  font-weight: 700;
  font-size: 1.04em;
  letter-spacing: 0.01em;
  display: inline;
}

/* Bold spans: heavier weight only, inherit surrounding color */
.ep-code-block[data-lang="markdown"] .hljs-strong {
  color: inherit;
  font-weight: 800;
}

/* Italic spans: actually italic */
.ep-code-block[data-lang="markdown"] .hljs-emphasis {
  font-style: italic;
}

/* Blockquote lines: muted + italic */
.ep-code-block[data-lang="markdown"] .hljs-quote {
  font-style: italic;
  opacity: 0.78;
}

/* Inline code spans: subtle pill background */
.ep-code-block[data-lang="markdown"] .hljs-code {
  background: rgba(110, 118, 129, 0.18);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  font-size: 0.88em;
}

/* Link text: underline to distinguish from surrounding prose */
.ep-code-block[data-lang="markdown"] .hljs-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* List bullet markers: bold — color from active hljs CDN theme */
.ep-code-block[data-lang="markdown"] .hljs-bullet {
  font-weight: 600;
}

/* Inline markdown in inline code spans */
.ep-inline-code-wrap[data-lang="markdown"] .hljs-section { font-weight: 700; }
.ep-inline-code-wrap[data-lang="markdown"] .hljs-strong   { color: inherit; font-weight: 800; }
.ep-inline-code-wrap[data-lang="markdown"] .hljs-emphasis { font-style: italic; }
.ep-inline-code-wrap[data-lang="markdown"] .hljs-bullet   { font-weight: 600; }

/* Bold inside inline-formatted code blocks (code_md_render='on') */
.ep-code-block[data-inline-formatted="true"] pre code strong,
.ep-inline-code-wrap[data-inline-formatted="true"] code strong {
  color: var(--cb-code-text, #e6edf3) !important;
  font-weight: 800 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — ADMIN
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --ep-topbar-bg:    #16213e;
  --ep-topbar-border:#1f3060;
  --ep-bg:           #0f0f1a;
  --ep-content-bg:   #16213e;
  --ep-border:       #2a3a6e;
  --ep-border-light: #1f3060;
  --ep-text:         #e0e0f0;
  --ep-text-muted:   #9090c0;
  --ep-text-light:   #6060a8;
  --ep-shadow:       0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --ep-shadow-lg:    0 4px 20px rgba(0,0,0,0.6);
}

/* Theme toggle button — admin */
.ep-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--ep-radius-sm);
  font-size: 0;
  line-height: 1;
  transition: background 0.15s;
  vertical-align: middle;
}
.ep-theme-toggle::before {
  font-size: 16px;
  content: '☀️';
}
[data-theme="dark"] .ep-theme-toggle::before { content: '🌙'; }
.ep-theme-toggle:hover { background: var(--ep-border-light); }

/* Admin dark-mode targeted overrides */
[data-theme="dark"] .ep-table thead                { background: #1f3060; }
[data-theme="dark"] .ep-table tbody tr:hover        { background: #1a2850; }
[data-theme="dark"] .ep-table tbody tr              { border-bottom-color: #2a3a6e; }
[data-theme="dark"] .ep-badge-draft                 { background: #252545; color: #9090c0; }
[data-theme="dark"] .ep-badge-preview               { background: #3a2e10; color: #e0a030; }
[data-theme="dark"] .ep-badge-trash,
[data-theme="dark"] .ep-badge-spam                  { background: #3a1010; color: #e06060; }
[data-theme="dark"] .ep-badge-pending               { background: #3a2e10; color: #e0a030; }
[data-theme="dark"] .ep-type-post                   { background: #1e2f4a; color: #7ab0e8; }
[data-theme="dark"] .ep-type-page                   { background: #2a1e4a; color: #b07ae8; }
[data-theme="dark"] .ep-drafts-section              { border-left-color: #a07020; }
[data-theme="dark"] .ep-btn-secondary               { background: #1f3060; color: var(--ep-text); border-color: var(--ep-border); }
[data-theme="dark"] .ep-btn-secondary:hover         { background: #2a3a6e; }
[data-theme="dark"] .ep-form-control                { background: #0f1830; color: var(--ep-text); border-color: var(--ep-border); }
[data-theme="dark"] .ep-form-control:focus          { border-color: var(--ep-primary); background: #0f1830; }
[data-theme="dark"] .ep-editor-main                 { background: #0f1830; }
[data-theme="dark"] .ep-editor-toolbar              { background: #1a2a50; border-bottom-color: #2a3a6e; }
[data-theme="dark"] .ep-editor-tabs                 { border-bottom-color: #2a3a6e; background: #0f1830; }
[data-theme="dark"] .ep-editor-tab                  { color: var(--ep-text-muted); }
[data-theme="dark"] .ep-editor-tab.active           { color: var(--ep-text); border-bottom-color: var(--ep-primary); }
[data-theme="dark"] .ep-toolbar-btn                 { color: var(--ep-text-muted); }
[data-theme="dark"] .ep-toolbar-btn:hover           { background: #2a3a6e; color: var(--ep-text); }
[data-theme="dark"] textarea.ep-content-editor,
[data-theme="dark"] .ep-content-editor             { background: #0f1830 !important; color: var(--ep-text) !important; }
[data-theme="dark"] .ep-editor-title-wrap           { background: #0f1830; border-bottom-color: #2a3a6e; }
[data-theme="dark"] .ep-editor-title-wrap input     { background: #0f1830; color: var(--ep-text); border-color: #2a3a6e; }
[data-theme="dark"] .ep-editor-status-bar           { background: #1a2a50; border-top-color: #2a3a6e; color: var(--ep-text-muted); }
[data-theme="dark"] .ep-preview-area                { background: #0f1830; color: var(--ep-text); }
[data-theme="dark"] .ep-sidebar-box-header          { background: #1f3060; border-bottom-color: #2a3a6e; }
[data-theme="dark"] .ep-modal-overlay               { background: rgba(0,0,10,0.75); }
[data-theme="dark"] .ep-modal-box                   { background: #16213e; }
[data-theme="dark"] .ep-modal-header                { border-bottom-color: #2a3a6e; }
[data-theme="dark"] .ep-modal-close:hover           { background: #2a3a6e; }
[data-theme="dark"] .ep-page-btn                    { background: #16213e; border-color: #2a3a6e; color: var(--ep-text); }
[data-theme="dark"] .ep-page-btn:hover              { background: #1f3060; }
[data-theme="dark"] .ep-page-btn.ep-page-active     { background: var(--ep-primary); border-color: var(--ep-primary); color: #fff; }
[data-theme="dark"] .ep-auth-card                   { background: #16213e; }
[data-theme="dark"] .ep-upload-dropzone             { background: #0f1830; border-color: #2a3a6e; }
[data-theme="dark"] .ep-upload-dropzone:hover       { background: #16213e; border-color: var(--ep-primary); }
[data-theme="dark"] .ep-media-item                  { background: #1f3060; }
[data-theme="dark"] .ep-download-btn                { background: #1f3060; border-color: #2a3a6e; color: var(--ep-text); }
[data-theme="dark"] .ep-download-btn:hover          { background: #2a3a6e; }
[data-theme="dark"] .ep-preview-area :not(.ep-code-block) > code { background: #1f3060; border-color: #2a3a6e; color: #a0c0f0; }
[data-theme="dark"] .ep-preview-area pre            { background: #0f1830; border-color: #2a3a6e; color: var(--ep-text); }
[data-theme="dark"] .ep-settings-section            { border-bottom-color: #2a3a6e; }
[data-theme="dark"] .ep-theme-preview-wrap          { background: #1f3060; border-color: #2a3a6e; }
[data-theme="dark"] .ep-repo-card-preview           { background: #1a1f2e; }
[data-theme="dark"] select.ep-form-control          { background: #0f1830; color: var(--ep-text); }
[data-theme="dark"] .ep-user-avatar                 { border-color: #2a3a6e; }
[data-theme="dark"] #ep-sidebar                     { background: #0a0f1e; }
[data-theme="dark"] .ep-nav-item.active             { background: rgba(34,113,177,0.3); }

/* ── Emoji Picker ─────────────────────────────────────────────────────────── */
.ep-emoji-picker {
  position: fixed;
  z-index: 9500;
  width: 400px;
  max-width: calc(100vw - 16px);
  background: var(--ep-content-bg);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
  user-select: none;
}
.ep-emoji-picker.ep-emoji-open { display: flex; }
.ep-emoji-search-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ep-border-light);
}
.ep-emoji-search {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 10px;
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius-sm);
  background: #fff;
  color: var(--ep-text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.ep-emoji-search:focus { border-color: var(--ep-primary); }
.ep-emoji-cats {
  display: flex;
  gap: 2px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--ep-border-light);
  overflow-x: auto;
  scrollbar-width: none;
}
.ep-emoji-cats::-webkit-scrollbar { display: none; }
.ep-emoji-cat-btn {
  flex-shrink: 0;
  padding: 4px 7px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--ep-radius-sm);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  transition: background 0.1s;
}
.ep-emoji-cat-btn:hover { background: #e8eaf0; }
.ep-emoji-cat-btn.ep-cat-active { background: #dde7fc; border-color: #b3c9fa; }
.ep-emoji-section-label {
  padding: 5px 10px 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ep-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.ep-emoji-grid-wrap {
  height: 224px;
  overflow-y: auto;
  padding: 4px 6px 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--ep-border) transparent;
}
.ep-emoji-grid-wrap::-webkit-scrollbar { width: 5px; }
.ep-emoji-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.ep-emoji-grid-wrap::-webkit-scrollbar-thumb { background: var(--ep-border); border-radius: 3px; }
.ep-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
}
.ep-emoji-btn {
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  height: 36px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.08s, transform 0.08s;
}
.ep-emoji-btn:hover {
  background: #e8eaf0;
  border-color: #d0d4e0;
  transform: scale(1.15);
}
.ep-emoji-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 28px 10px;
  color: var(--ep-text-muted);
  font-size: 13px;
}
.ep-skin-tones {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--ep-border-light);
  background: #f8f9fb;
}
.ep-tone-label {
  font-size: 11px;
  color: var(--ep-text-muted);
  margin-right: 4px;
  white-space: nowrap;
}
.ep-tone-btn {
  padding: 2px 4px;
  background: none;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: border-color 0.12s, background 0.12s;
}
.ep-tone-btn:hover { background: #e8eaf0; border-color: #c0c4d0; }
.ep-tone-btn.ep-tone-active { border-color: var(--ep-primary); background: #dde7fc; }
[data-theme="dark"] .ep-skin-tones { background: #0f1830; border-bottom-color: #2a3a6e; }
[data-theme="dark"] .ep-tone-btn:hover { background: #1e2f4a; border-color: #3a4a7e; }
[data-theme="dark"] .ep-tone-btn.ep-tone-active { border-color: var(--ep-primary); background: #1e3a6e; }
.ep-emoji-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-top: 1px solid var(--ep-border-light);
  background: #fafafa;
  font-size: 11px;
  color: var(--ep-text-muted);
  min-height: 28px;
}
.ep-emoji-preview-char { font-size: 20px; line-height: 1; }

/* Dark mode */
[data-theme="dark"] .ep-emoji-picker {
  background: #111827;
  border-color: #2a3a6e;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
[data-theme="dark"] .ep-emoji-search-wrap,
[data-theme="dark"] .ep-emoji-cats { border-bottom-color: #2a3a6e; }
[data-theme="dark"] .ep-emoji-search {
  background: #0f1830;
  border-color: #2a3a6e;
  color: var(--ep-text);
}
[data-theme="dark"] .ep-emoji-cat-btn:hover { background: #1e2f4a; }
[data-theme="dark"] .ep-emoji-cat-btn.ep-cat-active { background: #1e3a6e; border-color: #3a5a9e; }
[data-theme="dark"] .ep-emoji-btn:hover { background: #1e2f4a; border-color: #2a3a6e; }
[data-theme="dark"] .ep-emoji-footer {
  background: #0f1830;
  border-top-color: #2a3a6e;
  color: var(--ep-text-muted);
}
[data-theme="dark"] .ep-emoji-grid-wrap { scrollbar-color: #2a3a6e transparent; }

/* ── Markdown Help ─────────────────────────────────────────────────────────── */
#ep-md-help-btn {
  font-weight: 700;
  font-size: 14px;
  min-width: 22px;
}
.ep-mdhelp-menu {
  position: fixed;
  z-index: 9400;
  background: var(--ep-content-bg);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  display: none;
  flex-direction: column;
  min-width: 210px;
  overflow: hidden;
}
.ep-mdhelp-menu.ep-mdhelp-menu-open { display: flex; }
.ep-mdhelp-menu-btn {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ep-border-light);
  cursor: pointer;
  font-size: 13px;
  color: var(--ep-text);
  transition: background 0.12s;
  white-space: nowrap;
}
.ep-mdhelp-menu-btn:last-child { border-bottom: none; }
.ep-mdhelp-menu-btn:hover { background: var(--ep-bg); }

/* Quick Reference panel */
.ep-mdhelp-panel {
  position: fixed;
  z-index: 9300;
  width: 420px;
  max-width: calc(100vw - 16px);
  max-height: 70vh;
  background: var(--ep-content-bg);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.ep-mdhelp-panel.ep-mdhelp-panel-open { display: flex; }
.ep-mdhelp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ep-border-light);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.ep-mdhelp-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--ep-text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.1s;
}
.ep-mdhelp-close:hover { background: var(--ep-bg); color: var(--ep-text); }
.ep-mdhelp-panel-body {
  overflow-y: auto;
  padding: 6px 14px 12px;
  font-size: 12.5px;
  scrollbar-width: thin;
}
.ep-mdhelp-table {
  width: 100%;
  border-collapse: collapse;
}
.ep-mdhelp-table td {
  padding: 5px 8px 5px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--ep-border-light);
  font-size: 12.5px;
  line-height: 1.4;
}
.ep-mdhelp-table tr:last-child td { border-bottom: none; }
.ep-mdhelp-table td:first-child {
  font-family: monospace;
  font-size: 11.5px;
  color: var(--ep-primary);
  white-space: nowrap;
  padding-right: 14px;
  min-width: 140px;
}
.ep-mdhelp-table td:last-child { color: var(--ep-text-muted); }

/* Tutorial modal */
.ep-mdhelp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: rgba(0,0,0,.5);
  display: none;
  align-items: center;
  justify-content: center;
}
.ep-mdhelp-modal-overlay.ep-mdhelp-modal-open { display: flex; }
.ep-mdhelp-modal-box {
  background: var(--ep-content-bg);
  border-radius: var(--ep-radius);
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
  width: 700px;
  max-width: calc(100vw - 32px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ep-mdhelp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ep-border);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.ep-mdhelp-modal-body {
  overflow-y: auto;
  padding: 16px 24px 24px;
  font-size: 13px;
  line-height: 1.6;
  scrollbar-width: thin;
}
.ep-mdhelp-modal-body h3 {
  margin: 18px 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ep-primary);
  border-bottom: 1px solid var(--ep-border-light);
  padding-bottom: 4px;
}
.ep-mdhelp-modal-body h3:first-child { margin-top: 0; }
.ep-mdhelp-modal-body p { margin: 5px 0; }
.ep-mdhelp-code {
  display: inline;
  background: var(--ep-bg);
  border: 1px solid var(--ep-border-light);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: monospace;
  font-size: 11.5px;
  color: var(--ep-primary);
}
.ep-mdhelp-block {
  background: var(--ep-bg);
  border: 1px solid var(--ep-border-light);
  border-radius: var(--ep-radius-sm);
  padding: 8px 12px;
  margin: 6px 0;
  font-family: monospace;
  font-size: 12px;
  white-space: pre;
  overflow-x: auto;
  color: var(--ep-text);
}
.ep-mdhelp-tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 12px;
  font-size: 12.5px;
}
.ep-mdhelp-tbl th {
  text-align: left;
  padding: 5px 10px;
  background: var(--ep-bg);
  border: 1px solid var(--ep-border-light);
}
.ep-mdhelp-tbl td {
  padding: 5px 10px;
  border: 1px solid var(--ep-border-light);
  vertical-align: top;
}
.ep-mdhelp-tbl td:first-child {
  font-family: monospace;
  font-size: 11.5px;
  color: var(--ep-primary);
  white-space: nowrap;
}

/* Dark mode overrides */
[data-theme="dark"] .ep-mdhelp-menu,
[data-theme="dark"] .ep-mdhelp-panel,
[data-theme="dark"] .ep-mdhelp-modal-box {
  background: #111827;
  border-color: #2a3a6e;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
[data-theme="dark"] .ep-mdhelp-menu-btn { border-bottom-color: #2a3a6e; }
[data-theme="dark"] .ep-mdhelp-menu-btn:hover { background: #1e2f4a; }
[data-theme="dark"] .ep-mdhelp-panel-header,
[data-theme="dark"] .ep-mdhelp-modal-header { border-bottom-color: #2a3a6e; }
[data-theme="dark"] .ep-mdhelp-table td { border-bottom-color: #2a3a6e; }
[data-theme="dark"] .ep-mdhelp-code,
[data-theme="dark"] .ep-mdhelp-block {
  background: #0f1830;
  border-color: #2a3a6e;
}
[data-theme="dark"] .ep-mdhelp-tbl th { background: #0f1830; border-color: #2a3a6e; }
[data-theme="dark"] .ep-mdhelp-tbl td { border-color: #2a3a6e; }
[data-theme="dark"] .ep-mdhelp-modal-overlay { background: rgba(0,0,0,.7); }

/* Mobile markdown help — larger tap targets, centered menu */
@media (max-width: 640px) {
  .ep-mdhelp-menu.ep-mdhelp-menu-open {
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
  }
  .ep-mdhelp-menu-btn {
    padding: 16px 20px;
    font-size: 15px;
  }
  .ep-mdhelp-panel {
    left: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: none !important;
  }
  .ep-mdhelp-modal-box {
    max-height: 92vh;
  }
}

/* ── Markdown settings helpers ─────────────────────────────────────────── */
.ep-form-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--ep-text-muted); }
.ep-hr-dots { text-align: center !important; font-size: 18px; letter-spacing: 6px; color: var(--ep-text-muted); margin: 20px 0; border: none; background: none; }
.ep-preview-area .ep-hr-dots { text-align: center !important; }
/* Code block inline-formatted separators (admin preview) */
.ep-code-sep { display: block; width: 100%; margin: 6px 0; }
.ep-code-sep-line { border-top: 1px solid currentColor; opacity: 0.4; }
.ep-code-sep-dots { display: block; width: 100%; text-align: center !important; font-size: 14px; letter-spacing: 5px; opacity: 0.7; }

/* ── One-Click EaglePress Updater — section label ───────────────────────── */
.ep-updater-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px 14px 22px;
  margin-bottom: 0;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #4338ca 100%);
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(99,102,241,.35);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
.ep-updater-label::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 100%);
  pointer-events: none;
}
.ep-updater-label + .ep-update-card {
  border-radius: 0 0 12px 12px;
  border-top: none;
  margin-bottom: 28px;
}
.ep-updater-label-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ep-updater-label-eagle {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.ep-updater-label-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ep-updater-label-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.ep-updater-label-sub {
  font-size: 11px;
  color: rgba(199,210,254,.85);
  font-weight: 400;
  letter-spacing: .01em;
}
.ep-updater-label-badges {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.ep-updater-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ep-updater-badge-auto {
  background: rgba(250,204,21,.18);
  border: 1px solid rgba(250,204,21,.4);
  color: #fde68a;
}
.ep-updater-badge-ver {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #e0e7ff;
  font-family: var(--ep-mono);
}
/* dark-theme tweak: label is already dark so no inversion needed */
[data-theme="dark"] .ep-updater-label {
  background: linear-gradient(135deg, #1e1b4b 0%, #2d2a7a 45%, #3730a3 100%);
  border-color: rgba(99,102,241,.4);
}

/* ── EaglePress Update Status Card ─────────────────────────────────────── */
.ep-update-card {
  position: relative;
  background: var(--ep-content-bg);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
  margin-bottom: 28px;
  border: 1px solid var(--ep-border);
  overflow: hidden;
  transition: box-shadow 0.4s;
}
/* Left accent strip — changes colour per state */
.ep-update-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  transition: background 0.4s;
}
.ep-update-card[data-state="checking"]::before  { background: linear-gradient(180deg,#94a3b8,#64748b); }
.ep-update-card[data-state="current"]::before   { background: linear-gradient(180deg,#22c55e,#16a34a); }
.ep-update-card[data-state="available"]::before { background: linear-gradient(180deg,#f59e0b,#d97706); }
.ep-update-card[data-state="error"]::before     { background: linear-gradient(180deg,#ef4444,#dc2626); }
.ep-update-card[data-state="updating"]::before  { background: linear-gradient(180deg,var(--ep-primary),#6366f1); }

.ep-update-card-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px 20px 30px;
}

/* ── Icon ring ─────────────────────────────────────────────────── */
.ep-update-icon-wrap { flex-shrink: 0; }
.ep-update-icon-ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.ep-update-card[data-state="checking"]  .ep-update-icon-ring {
  border-color: #94a3b8;
  animation: ep-upd-ring-breathe 1.8s ease-in-out infinite;
}
.ep-update-card[data-state="current"]   .ep-update-icon-ring {
  border-color: #22c55e;
  box-shadow: 0 0 0 6px rgba(34,197,94,.13), 0 0 22px rgba(34,197,94,.2);
}
.ep-update-card[data-state="available"] .ep-update-icon-ring {
  border-color: #f59e0b;
  animation: ep-upd-ring-amber 1.6s ease-in-out infinite;
}
.ep-update-card[data-state="error"]     .ep-update-icon-ring {
  border-color: #ef4444;
  box-shadow: 0 0 0 6px rgba(239,68,68,.13), 0 0 18px rgba(239,68,68,.2);
}
.ep-update-card[data-state="updating"]  .ep-update-icon-ring {
  border-color: var(--ep-primary);
  box-shadow: 0 0 0 6px rgba(99,102,241,.13), 0 0 22px rgba(99,102,241,.2);
}
.ep-update-icon-glyph {
  display: block;
  line-height: 1;
  user-select: none;
}

/* ── Info block ────────────────────────────────────────────────── */
.ep-update-info { flex: 1; min-width: 0; }
.ep-update-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ep-text-muted);
  margin-bottom: 4px;
}
.ep-update-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ep-text);
  margin-bottom: 6px;
  transition: color 0.3s;
}
.ep-update-card[data-state="current"]   .ep-update-title { color: #16a34a; }
.ep-update-card[data-state="available"] .ep-update-title { color: #92400e; }
.ep-update-card[data-state="error"]     .ep-update-title { color: #dc2626; }
.ep-update-card[data-state="updating"]  .ep-update-title { color: var(--ep-primary); }

.ep-update-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--ep-text-muted);
}

/* Version badges */
.ep-update-ver-badge {
  display: inline-block;
  background: rgba(0,0,0,.05);
  border: 1px solid var(--ep-border);
  border-radius: 5px;
  padding: 2px 8px;
  font-family: var(--ep-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ep-text-muted);
}
.ep-update-ver-badge.ep-ver-new {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}
.ep-update-ver-badge.ep-ver-current {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

/* ── Action area ───────────────────────────────────────────────── */
.ep-update-action { flex-shrink: 0; }

/* Spinner shown while checking / updating */
.ep-update-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--ep-border);
  border-top-color: #94a3b8;
  border-radius: 50%;
  animation: ep-upd-spin 0.8s linear infinite;
}
.ep-update-card[data-state="updating"] .ep-update-spinner {
  border-top-color: var(--ep-primary);
  border-width: 3px;
}

/* "Update Now" button — amber gradient, prominent */
#ep-upd-now {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff !important;
  border: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245,158,11,.38);
  transition: box-shadow 0.2s, transform 0.15s;
  white-space: nowrap;
}
#ep-upd-now:hover {
  box-shadow: 0 6px 24px rgba(245,158,11,.55);
  transform: translateY(-1px);
}
#ep-upd-now:active { transform: translateY(0); }

/* ── Log pane ──────────────────────────────────────────────────── */
.ep-update-log {
  margin: 0 20px 18px 30px;
  padding: 12px 14px;
  background: var(--ep-sidebar-bg, #f8f9fa);
  border: 1px solid var(--ep-border);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  font-family: var(--ep-mono);
  font-size: 12px;
  line-height: 1.85;
  color: var(--ep-text-muted);
}
.ep-upd-ok  { color: #16a34a; font-weight: 600; }
.ep-upd-err { color: #dc2626; font-weight: 600; }

/* ── Animations ────────────────────────────────────────────────── */
@keyframes ep-upd-ring-breathe {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: .55; transform: scale(.94); }
}
@keyframes ep-upd-ring-amber {
  0%, 100% { box-shadow: 0 0 0 5px rgba(245,158,11,.13), 0 0 18px rgba(245,158,11,.18); }
  50%       { box-shadow: 0 0 0 9px rgba(245,158,11,.22), 0 0 30px rgba(245,158,11,.32); }
}
@keyframes ep-upd-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   PLUGINS PAGE
   ═══════════════════════════════════════════════════════════════════ */
.ep-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 8px 12px;
}
.ep-plugin-list { display: flex; flex-direction: column; gap: 16px; }
.ep-plugin-card {
  background: var(--ep-content-bg);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  padding: 18px 20px;
  box-shadow: var(--ep-shadow);
  transition: box-shadow 0.2s;
}
.ep-plugin-card:hover { box-shadow: var(--ep-shadow-lg); }
.ep-plugin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ep-plugin-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ep-plugin-icon { font-size: 22px; }
.ep-plugin-version { font-size: 12px; color: var(--ep-text-muted); }
.ep-plugin-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.ep-badge-active { background: #d4edda; color: #155724; }
.ep-badge-inactive { background: #f0f0f1; color: #646970; }
.ep-badge-warning { background: #fff3cd; color: #856404; }
.ep-plugin-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ep-plugin-desc { margin: 8px 0 0; color: var(--ep-text-muted); font-size: 13px; }
.ep-plugin-author { font-size: 12px; color: var(--ep-text-light); margin-top: 4px; }
.ep-plugin-sync-warning {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: var(--ep-radius-sm);
  font-size: 13px;
  color: #856404;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ep-plugin-global-status {
  padding: 10px 16px;
  border-radius: var(--ep-radius-sm);
  margin-bottom: 16px;
  font-weight: 600;
}
.ep-plugin-global-status.success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.ep-plugin-global-status.error   { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.ep-empty-state { text-align:center; padding:40px; color:var(--ep-text-muted); }
.ep-page-header-sub { font-size:14px; color:var(--ep-text-muted); margin-top:4px; }

/* ═══════════════════════════════════════════════════════════════════
   THEMES PAGE
   ═══════════════════════════════════════════════════════════════════ */
.ep-themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.ep-theme-card {
  background: var(--ep-content-bg);
  border: 2px solid var(--ep-border);
  border-radius: var(--ep-radius);
  overflow: visible;
  box-shadow: var(--ep-shadow);
  transition: box-shadow 0.2s, border-color 0.2s;
  position: relative;
}
/* Clip only the preview image area at the top rounded corners */
.ep-theme-card > .ep-theme-preview-wrap {
  border-radius: calc(var(--ep-radius) - 2px) calc(var(--ep-radius) - 2px) 0 0;
}
.ep-theme-card:hover { box-shadow: var(--ep-shadow-lg); }
.ep-theme-card-active { border-color: var(--ep-primary); }
.ep-theme-preview-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  background: #f0f0f1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-theme-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ep-theme-no-preview-placeholder {
  font-size: 13px;
  color: var(--ep-text-muted);
}
.ep-theme-active-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--ep-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}
.ep-theme-card-body { padding: 14px 16px; }
.ep-theme-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ep-theme-version { font-size: 12px; color: var(--ep-text-muted); }
.ep-theme-badge-active {
  font-size: 12px;
  font-weight: 700;
  color: var(--ep-primary);
  background: #e8f0fe;
  padding: 2px 8px;
  border-radius: 20px;
}
.ep-theme-desc { font-size: 13px; color: var(--ep-text-muted); margin: 4px 0; }
.ep-theme-author { font-size: 12px; color: var(--ep-text-light); margin-bottom: 10px; }
.ep-theme-card-actions { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ep-theme-card-actions .ep-btn { flex: 1; text-align: center; }
.ep-theme-info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #e2e8f0; color: #64748b;
  font-size: 12px; font-weight: 700; cursor: pointer;
  border: 1px solid #cbd5e1; flex-shrink: 0; margin-left: auto;
}

/* Custom tooltip for data-tooltip attribute */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: #1e293b; color: #f8fafc;
  font-size: 11px; font-weight: 400; line-height: 1.5;
  padding: 6px 10px; border-radius: 5px;
  white-space: normal; min-width: 180px; max-width: 260px;
  text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 0.15s ease; z-index: 99999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
[data-tooltip]:hover::after { opacity: 1; }
/* Arrow under tooltip */
[data-tooltip]::before {
  content: '';
  position: absolute; bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1e293b;
  pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 99999;
}
[data-tooltip]:hover::before { opacity: 1; }

/* Default theme info rows */
.ep-theme-default-info {
  margin: 8px 0 4px; border-top: 1px solid #e2e8f0; padding-top: 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.ep-theme-info-row {
  display: flex; align-items: baseline; gap: 6px; font-size: 12px;
}
.ep-theme-info-label {
  color: #94a3b8; font-weight: 500; white-space: nowrap; flex-shrink: 0; min-width: 90px;
}
.ep-theme-info-value { color: #334155; font-weight: 500; }
.ep-theme-info-date {
  color: #334155; font-weight: 500; cursor: pointer; border-bottom: 1px dashed #94a3b8;
}

/* Download count row on installed marketplace theme cards */
.ep-theme-dl-row { margin: 4px 0 2px; }

/* ═══════════════════════════════════════════════════════════════════
   USER DASHBOARD
   ═══════════════════════════════════════════════════════════════════ */
.ep-user-dashboard-body .ep-sidebar-logo a { color: #fff; text-decoration: none; font-size: 18px; font-weight: 700; }
.ep-info-box {
  background: #e8f4fd;
  border: 1px solid #bee5fb;
  border-radius: var(--ep-radius-sm);
  padding: 10px 16px;
  font-size: 13px;
  color: #0c5460;
  margin-bottom: 16px;
}
.ep-user-pending-note { }
.ep-type-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ep-type-post { background: #dbeafe; color: #1e40af; }
.ep-type-page { background: #fce7f3; color: #9d174d; }
.ep-badge-pending { background: #fff3cd; color: #856404; font-weight: 600; }

/* Pending review status in admin post list */
.ep-badge-pending { background: #fff3cd; color: #856404; }

/* Admin nav divider and plugin/theme items look */
.ep-nav-item[href*="/plugins"] .ep-nav-icon,
.ep-nav-item[href*="/themes"] .ep-nav-icon { opacity: 0.85; }

/* ── Marketplace / Repository ────────────────────────────────────────────── */
.ep-mp-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--ep-border);
  padding-bottom: 0;
}
.ep-mp-tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ep-text-muted);
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.ep-mp-tab-btn:hover { color: var(--ep-text); }
.ep-mp-tab-btn.ep-mp-tab-active {
  color: var(--ep-primary);
  border-bottom-color: var(--ep-primary);
}
.ep-mp-pane { animation: ep-fadein .18s ease; }

.ep-repo-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ep-repo-search-input { flex: 1; min-width: 180px; max-width: 320px; }
.ep-repo-view-toggle { display: flex; gap: 4px; }
.ep-repo-view-btn.ep-active { background: var(--ep-primary); color: #fff; border-color: var(--ep-primary); }

.ep-repo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.ep-repo-card {
  background: var(--ep-card-bg);
  border: 1px solid var(--ep-border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.ep-repo-card-preview {
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: #f0f0f1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-repo-card-preview .ep-theme-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ep-repo-card-inner { padding: 16px; }
.ep-repo-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); border-color: var(--ep-primary-light, #93c5fd); }
.ep-repo-card-installed { border-color: #22c55e; opacity: .85; }

.ep-repo-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ep-repo-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.ep-repo-icon { font-size: 18px; }
.ep-repo-card-title strong { font-size: 15px; }
.ep-repo-version { font-size: 11px; color: var(--ep-text-muted); background: var(--ep-bg-alt, #f1f5f9); padding: 1px 6px; border-radius: 10px; }
.ep-repo-desc { font-size: 13px; color: var(--ep-text-muted); margin: 0 0 8px; line-height: 1.45; }
.ep-repo-author { font-size: 12px; color: var(--ep-text-muted); margin-bottom: 8px; }
.ep-repo-author a { color: var(--ep-primary); text-decoration: none; }

.ep-repo-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ep-repo-stars { color: #f59e0b; letter-spacing: 1px; }
.ep-star { opacity: .25; cursor: pointer; }
.ep-star.ep-star-on { opacity: 1; }
.ep-star.ep-star-hover { opacity: .65; }
.ep-repo-like-btn { cursor: pointer; color: #f43f5e; user-select: none; }
.ep-repo-like-btn:hover { opacity: .75; }
.ep-repo-dl { color: var(--ep-text-muted); font-size: 12px; }

.ep-repo-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ep-repo-tag {
  font-size: 11px;
  background: var(--ep-bg-alt, #f1f5f9);
  color: var(--ep-text-muted);
  padding: 2px 8px;
  border-radius: 10px;
}

.ep-repo-installed-badge {
  font-size: 12px;
  color: #22c55e;
  font-weight: 600;
  white-space: nowrap;
}

.ep-repo-card-footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ep-border); font-size: 12px; display: flex; align-items: center; justify-content: space-between; }
.ep-repo-comment-toggle { color: var(--ep-text-muted); text-decoration: none; }
.ep-repo-comment-toggle:hover { color: var(--ep-primary); }

.ep-repo-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 8px;
  font-size: 13px;
  color: var(--ep-text-muted);
}

.ep-repo-loading, .ep-repo-empty, .ep-repo-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  color: var(--ep-text-muted);
  font-size: 14px;
}
.ep-repo-error { color: #ef4444; }
.ep-repo-status-msg { font-size: 13px; color: var(--ep-text-muted); min-height: 18px; }

/* Comments inside repo cards */
.ep-repo-comments-section { padding: 10px 0 4px; }
.ep-repo-comments { display: flex; flex-direction: column; gap: 10px; }
.ep-repo-comment { background: var(--ep-bg-alt, #f8fafc); border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.ep-repo-comment strong { font-size: 13px; }
.ep-repo-comment-date { color: var(--ep-text-muted); font-size: 11px; }
.ep-repo-comment p { margin: 4px 0 0; color: var(--ep-text); }
.ep-repo-comment-new { border-left: 3px solid var(--ep-primary); }
.ep-repo-no-comments { font-size: 13px; color: var(--ep-text-muted); padding: 6px 0 10px; }
.ep-repo-add-comment { margin-top: 10px; }

/* ── Marketplace: a build that needs a newer EaglePress ─────────────────────
   Shown in place of the Install button. The item is still listed — knowing it
   exists is useful, and the version to upgrade to is the actionable part. */
.ep-repo-needs-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #8a6d3b;
    background: #fcf3d7;
    border: 1px solid #e6cf90;
    white-space: nowrap;
    cursor: help;
}

/* ── Revision history panel ──────────────────────────────────────────────
   Sits in the editor sidebar under Publish. Dense on purpose: ten entries
   have to be scannable without pushing the rest of the sidebar off-screen,
   so each is three tight lines and the list scrolls rather than grows. */
.ep-revisions-box .ep-sidebar-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ep-rev-count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ep-accent, #2c6bed);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.ep-rev-count:empty { display: none; }

/* Holds only the "keeping the last N" note now, or the empty/error state —
   the scrolling card list it used to carry has gone. */
.ep-revisions-list {
    margin: 0;
}

/* The newest is the one people reach for, so it is the one that looks
   reachable without being read. */

.ep-rev-kind {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
}
/* Two kinds, told apart at a glance: a version you chose to keep reads as
   solid, one taken for you while typing reads as quieter. */
.ep-rev-kind.is-manual { background: #1f9254; color: #fff; }
.ep-rev-kind.is-auto   { background: var(--ep-muted-bg, #eef1f5);
                         color: var(--ep-muted, #6b7280); }

.ep-rev-empty, .ep-rev-note {
    font-size: 12px;
    color: var(--ep-muted, #6b7280);
    margin: 4px 2px 0;
    line-height: 1.45;
}
.ep-rev-note { padding-top: 6px; border-top: 1px dashed var(--ep-border, #e2e6ec); }

[data-theme="dark"] .ep-rev-kind.is-auto { background: rgba(255, 255, 255, .08); }

/* ── Revision picker ─────────────────────────────────────────────────────
   The quick way in: choose a version, read what it is, press the button.
   Sits above the list, which stays for comparing versions side by side. */
.ep-rev-picker {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--ep-border, #e2e6ec);
}
.ep-rev-picker[hidden] { display: none; }
.ep-rev-picker select { width: 100%; }

.ep-rev-detail {
    margin: 8px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--ep-accent-soft, rgba(44, 107, 237, .05));
    border: 1px solid var(--ep-border, #e2e6ec);
}
.ep-rev-detail-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.ep-rev-detail-when {
    font-size: 11px;
    color: var(--ep-muted, #6b7280);
}
.ep-rev-detail-preview {
    font-size: 12px;
    line-height: 1.45;
    color: var(--ep-text, #374151);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.ep-rev-detail-meta {
    margin-top: 5px;
    font-size: 11px;
    color: var(--ep-muted, #6b7280);
}

/* Deliberately a full-width, unmistakable action — this is the control that
   replaces what is in the editor, so it should never be mistaken for part of
   the dropdown next to it. */
.ep-rev-load {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ep-accent, #2c6bed);
    border-radius: 7px;
    background: var(--ep-accent, #2c6bed);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s;
}
.ep-rev-load:hover { filter: brightness(1.08); }
.ep-rev-load:active { filter: brightness(.95); }

/* Keeping a version by hand, and turning the automatic ones off.
   -----------------------------------------------------------------------
   Separated from the picker above by a rule, because the picker is about
   going back and these two are about what gets written down in the first
   place. */
.ep-rev-controls {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ep-border, #e2e6ec);
}
.ep-rev-keep {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ep-border, #cbd3de);
    border-radius: 7px;
    background: var(--ep-card, #fff);
    color: var(--ep-text, #222);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ep-rev-keep:hover:not(:disabled) {
    background: var(--ep-muted-bg, #eef1f5);
    border-color: var(--ep-accent, #2c6bed);
}
.ep-rev-keep:disabled { opacity: .55; cursor: default; }

.ep-rev-auto { margin-top: 12px; }

.ep-rev-auto { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ep-rev-switch-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ep-text, #222);
}
.ep-rev-auto-note {
    flex: 1 0 100%;
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ep-muted-text, #6b7583);
}

[data-theme="dark"] .ep-rev-keep {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .16);
}
[data-theme="dark"] .ep-rev-keep:hover:not(:disabled) {
    background: rgba(255, 255, 255, .09);
}
[data-theme="dark"] .ep-rev-controls { border-top-color: rgba(255, 255, 255, .12); }

/* A failure has to look different from "there is nothing here yet", or a
   broken request reads as a post that was never edited. */
.ep-rev-problem {
    font-size: 12px;
    line-height: 1.45;
    margin: 4px 2px 0;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid #e0b4b4;
    background: #fdf3f3;
    color: #a33a3a;
}
[data-theme="dark"] .ep-rev-problem {
    border-color: rgba(224, 180, 180, .35);
    background: rgba(163, 58, 58, .12);
    color: #e9a8a8;
}
[data-theme="dark"] .ep-rev-detail { background: rgba(255, 255, 255, .03); }

/* ══════════════════════════════════════════════════════════════════════════
   Featured Post / Featured Page  (v2.18)

   Two surfaces: the Feature box in the editor sidebar, sitting directly above
   Featured Image, and the Featured list on the dashboard under Drafts. Both
   are built on the admin variables so they follow the light/dark toggle
   without a second set of rules.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── state pills ───────────────────────────────────────────────────────── */

.ep-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* The dot carries the state as well as the colour, so the two pills are still
   tellable apart without relying on colour alone. */
.ep-feat-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.ep-feat-pill-active {
  color: #0a7c2f;
  background: rgba(0, 163, 42, 0.13);
  border: 1px solid rgba(0, 163, 42, 0.35);
  box-shadow: 0 0 0 3px rgba(0, 163, 42, 0.08);
}

.ep-feat-pill-off {
  color: #b32124;
  background: rgba(214, 54, 56, 0.11);
  border: 1px solid rgba(214, 54, 56, 0.32);
}

.ep-feat-pill-none {
  color: var(--ep-text-muted);
  background: rgba(128, 128, 160, 0.12);
  border: 1px solid var(--ep-border);
}

[data-theme="dark"] .ep-feat-pill-active { color: #4ade80; background: rgba(34, 197, 94, 0.16); }
[data-theme="dark"] .ep-feat-pill-off    { color: #f87171; background: rgba(248, 113, 113, 0.15); }

/* ── editor sidebar box ────────────────────────────────────────────────── */

.ep-feature-box {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

/* Left edge lights up while the box is ticked — the one glance that says this
   item is the featured one without reading anything. */
.ep-feature-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.2s ease;
}

.ep-feature-box.ep-feature-box-on::before {
  background: linear-gradient(180deg, #00a32a, #0a7c2f);
}

.ep-feature-box.ep-feature-box-on {
  box-shadow: 0 0 0 1px rgba(0, 163, 42, 0.28), var(--ep-shadow);
}

.ep-feature-box .ep-sidebar-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ep-feat-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.ep-feat-check input[type="checkbox"] {
  margin-top: 1px;
  flex: 0 0 auto;
  cursor: pointer;
}

.ep-feat-check-label { font-weight: 600; }

.ep-feat-check-badge {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ep-border-light);
}

/* Dimmed, never disabled: a disabled checkbox is not submitted with the form,
   so unticking Feature would quietly wipe the badge choice. */
.ep-feat-check-badge.ep-feat-dim,
.ep-feat-check-badge.ep-feat-dim + .ep-feat-help {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.ep-feat-help {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ep-text-muted);
}

.ep-feat-help em { font-style: normal; font-weight: 600; color: var(--ep-text); }

.ep-feat-replacing {
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: var(--ep-radius-sm);
  border-left: 3px solid var(--ep-warning);
  background: rgba(219, 166, 23, 0.1);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ep-text);
}

/* ── dashboard section ─────────────────────────────────────────────────── */

.ep-feat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ep-feat-head h2 { margin: 0; }

.ep-feat-count { color: var(--ep-text-light); font-weight: 400; }

.ep-feat-intro {
  margin: 6px 0 14px;
  max-width: 68ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ep-text-muted);
}

.ep-feat-table td { vertical-align: middle; }

/* The active row is the answer to the only question this table is asked. The
   edge goes on the first cell alone -- on every td it repeats down the row as a
   green line between each column. */
.ep-feat-row-active > td {
  background: rgba(0, 163, 42, 0.055);
}

.ep-feat-row-active > td:first-child {
  box-shadow: inset 3px 0 0 #00a32a;
}

[data-theme="dark"] .ep-feat-row-active > td { background: rgba(34, 197, 94, 0.09); }

.ep-feat-note {
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ep-text-muted);
  max-width: 22ch;
}

/* Badge switch. Only one item in the list may carry the badge, so this reads
   as a single choice moving between rows rather than a per-row setting. */
.ep-feat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px 3px 3px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--ep-text-light);
  border-radius: 999px;
  transition: color 0.18s ease;
}

.ep-feat-toggle:focus-visible {
  outline: 2px solid var(--ep-primary);
  outline-offset: 2px;
}

.ep-feat-toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: var(--ep-border);
  border: 1px solid var(--ep-border);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ep-feat-toggle-knob {
  position: absolute;
  top: 1.5px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
  transition: transform 0.2s cubic-bezier(.2, .7, .3, 1);
}

.ep-feat-toggle-text {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-width: 22px;
  text-align: left;
}

.ep-feat-toggle.is-on { color: #1d4ed8; }

.ep-feat-toggle.is-on .ep-feat-toggle-track {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
}

.ep-feat-toggle.is-on .ep-feat-toggle-knob { transform: translateX(15px); }

.ep-feat-toggle:hover .ep-feat-toggle-track { border-color: var(--ep-primary); }

/* Held while the request is in flight, so a double click cannot race it. */
.ep-feat-toggle.is-busy { opacity: 0.55; pointer-events: none; }

[data-theme="dark"] .ep-feat-toggle.is-on { color: #93b4ff; }
[data-theme="dark"] .ep-feat-toggle-track { background: #2a3a6e; border-color: #2a3a6e; }
[data-theme="dark"] .ep-feat-toggle.is-on .ep-feat-toggle-track {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: #3b82f6;
}

@media (prefers-reduced-motion: reduce) {
  .ep-feat-toggle-knob, .ep-feat-toggle-track { transition: none; }
}

.ep-feat-actions { white-space: nowrap; text-align: right; }
.ep-feat-actions .ep-btn { margin-left: 4px; }

/* Says what Remove does before it is clicked, not only in the confirm box. */
.ep-feat-foot {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--ep-radius-sm);
  background: var(--ep-bg);
  border: 1px solid var(--ep-border-light);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ep-text-muted);
}

@media (max-width: 782px) {
  .ep-feat-actions { text-align: left; white-space: normal; }
  .ep-feat-actions .ep-btn { margin: 3px 4px 0 0; }
}