:root {
  --bg: #fcd0b1;
  --card: #fcd0b1;
  --hover: #ffc398;
  --line: #f2dfce;
  --text: #000000;
  --muted: #000000;
  --accent: #1d9bf0;
  --blue: var(--accent);
  --link: var(--accent);
  --red: #f4212e;
  --base-font: 16px;
}

:root[data-theme="dark"] {
  --bg: #10151d;
  --card: #0b0f15;
  --hover: #10151d;
  --line: #2f3336;
  --text: #ffffff;
  --muted: #a0a8b0;
  --accent: #1d9bf0;
  --blue: var(--accent);
  --link: var(--accent);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--base-font) 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { cursor: pointer; border: none; background: transparent; }

.arabfields-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 900px) 300px;
  max-width: 1460px;
  margin: auto;
  min-height: 100vh;
  background: var(--bg);
}

/* SIDEBAR */
.arabfields-sidebar {
  border-right: 1px solid var(--line);
  padding: 18px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

.arabfields-brand { display: flex; gap: 11px; align-items: center; padding: 8px 10px 16px; }
.arabfields-logo {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--text); color: var(--bg);
  font: 800 18px 'Manrope';
  overflow: hidden;
}
.arabfields-brand strong { display: block; font: 800 20px 'Manrope'; color: var(--text); }
.arabfields-brand span { font-size: 12px; color: var(--muted); }

.arabfields-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding-bottom: 12px;
}

.arabfields-main-nav { display: grid; gap: 2px; }
.arabfields-nav {
  border: 0; background: transparent; color: var(--text);
  display: flex; gap: 12px; align-items: center; text-align: left;
  padding: 10px 14px; border-radius: 25px; font-size: 15px;
  transition: background 0.18s;
}
.arabfields-nav i { width: 20px; text-align: center; font-size: 15px; color: var(--muted); }
.arabfields-nav:hover { background: var(--hover); }
.arabfields-nav:hover i { color: var(--accent); }
.arabfields-nav.arabfields-active { font-weight: 800; }
.arabfields-nav.arabfields-active i { color: var(--accent); }
.arabfields-nav b {
  margin-left: auto; background: var(--blue); color: white;
  border-radius: 20px; padding: 2px 8px; font-size: 11px;
}

.arabfields-side-label {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; margin: 16px 10px 6px;
}
.arabfields-side-label button {
  border: 0; background: transparent; color: var(--accent); font-size: 16px;
}

.arabfields-side-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: 0; background: transparent; color: var(--text);
  border-radius: 10px; text-align: left; font-size: 14px;
  transition: background 0.18s;
}
.arabfields-side-row:hover { background: var(--hover); }
.arabfields-side-row.arabfields-active { font-weight: 800; background: var(--hover); }
.arabfields-side-row b { margin-left: auto; color: var(--muted); font-size: 11px; }
.arabfields-side-row .arabfields-delete-cat {
  margin-left: 6px; color: var(--red); font-size: 14px; opacity: 0;
  transition: opacity 0.18s; padding: 2px 6px; border-radius: 4px;
}
.arabfields-side-row:hover .arabfields-delete-cat { opacity: 1; }
.arabfields-side-row .arabfields-delete-cat:hover { background: rgba(244, 33, 46, 0.1); }

.arabfields-source-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--text); color: var(--bg);
  font-size: 10px; font-weight: 800; flex: none;
}

.arabfields-side-bottom {
  flex: 0 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.arabfields-manage {
  width: 100%; border: 1px solid var(--line); background: var(--hover);
  color: var(--text); border-radius: 22px; padding: 11px; font-size: 14px;
  transition: all 0.18s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.arabfields-manage i { color: var(--muted); }
.arabfields-manage:hover { border-color: var(--accent); color: var(--accent); }
.arabfields-manage:hover i { color: var(--accent); }
.arabfields-sidebar-foot {
  text-align: center; color: var(--muted); font-size: 11px;
  padding: 9px 0 2px; opacity: 0.8;
}

/* MAIN */
main { min-width: 0; }

.arabfields-topbar {
  height: 54px; border-bottom: 1px solid var(--line); position: sticky; top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); z-index: 10;
  display: flex; align-items: center; padding: 0 20px; gap: 15px;
}

.arabfields-search {
  background: var(--hover); border-radius: 24px; height: 38px;
  display: flex; align-items: center; gap: 9px; padding: 0 14px;
  flex: 1; max-width: 480px; color: var(--muted);
  border: 1px solid transparent;
  transition: all 0.2s;
}
.arabfields-search i { font-size: 14px; color: var(--muted); }
.arabfields-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.1);
}
.arabfields-search input {
  border: 0; outline: 0; background: transparent; color: var(--text);
  width: 100%; font-size: 14px;
}
.arabfields-search-kbd {
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 6px; font-size: 11px; color: var(--muted); font-family: inherit;
}

.arabfields-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.arabfields-actions button {
  border: 0; background: transparent; color: var(--text); font-size: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  transition: all 0.18s;
}
.arabfields-actions button:hover { background: var(--hover); color: var(--accent); }

.arabfields-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--text); color: var(--bg);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800;
}

.arabfields-mobile { display: none; }

.arabfields-page-head { padding: 27px 22px 15px; border-bottom: 1px solid var(--line); }
.arabfields-page-head h1 { font: 800 28px 'Manrope'; margin: 0 0 5px; letter-spacing: -0.03em; color: var(--text); }
.arabfields-page-head p { color: var(--muted); font-size: 14px; margin: 0 0 18px; }

.arabfields-tabs { display: flex; gap: 5px; }
.arabfields-tab {
  border: 0; background: transparent; color: var(--muted);
  padding: 9px 14px; border-radius: 20px; font-size: 14px;
  transition: all 0.18s;
  display: flex; align-items: center; gap: 6px;
}
.arabfields-tab i { font-size: 12px; }
.arabfields-tab:hover { background: var(--hover); color: var(--text); }
.arabfields-tab.arabfields-active { background: var(--accent); color: #fff; font-weight: 800; }

/* LIVE VIEW */
.arabfields-live-dot {
  width: 8px; height: 8px; background: #f4212e; border-radius: 50%;
  margin-left: auto; animation: arabfields-pulse 1.5s infinite;
}
@keyframes arabfields-pulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 33, 46, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(244, 33, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 33, 46, 0); }
}

.arabfields-live-card {
  padding: 0; background: var(--card); border-radius: 16px;
  border: 1px solid var(--line); margin: 20px 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
}

.arabfields-live-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(244, 33, 46, 0.05) 0%, transparent 100%);
}

.arabfields-live-title {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--text); font-size: 15px;
}

.arabfields-live-indicator {
  color: #f4212e; font-size: 10px !important;
  animation: arabfields-pulse 1.5s infinite;
}

.arabfields-live-badge {
  background: #f4212e; color: white; font-size: 11px; font-weight: 800;
  padding: 5px 12px; border-radius: 4px; letter-spacing: 0.08em;
  animation: arabfields-badge-pulse 2s infinite;
  display: inline-flex; align-items: center; gap: 6px;
}

@keyframes arabfields-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.arabfields-video-wrapper {
  position: relative; width: 100%; background: #000;
  aspect-ratio: 16 / 9;
}

.arabfields-video-player {
  width: 100%; height: 100%; object-fit: contain;
  background: #000; outline: none;
}

.arabfields-live-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; border-top: 1px solid var(--line);
  background: var(--hover); font-size: 13px; color: var(--muted);
}
.arabfields-live-footer i { margin-right: 6px; }

.arabfields-unmute-btn {
  background: var(--accent); color: white; border: none;
  padding: 6px 14px; border-radius: 20px; font-size: 12px;
  font-weight: 700; cursor: pointer; transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 6px;
}
.arabfields-unmute-btn:hover {
  opacity: 0.85; transform: scale(1.02);
}

/* POST CARDS */
.arabfields-post {
  display: grid; grid-template-columns: 44px 1fr; gap: 11px;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
  transition: background 0.18s; background: var(--card);
  animation: arabfields-in 0.3s both; cursor: pointer;
}
.arabfields-post:hover { background: var(--hover); }

.arabfields-post-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--text); color: var(--bg);
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
}

.arabfields-post-head { display: flex; gap: 5px; align-items: center; font-size: 14px; }
.arabfields-post-head strong { font-weight: 800; color: var(--text); }
.arabfields-post-head span { color: var(--muted); }
.arabfields-unread {
  width: 6px; height: 6px; background: var(--blue);
  border-radius: 50%; margin-left: 2px;
}

.arabfields-post-title { font: 700 19px/1.42 'Manrope'; margin: 4px 0 6px; letter-spacing: -0.01em; color: var(--text); }
.arabfields-post-excerpt { font-size: 15px; line-height: 1.58; color: var(--muted); margin: 0 0 10px; }
.arabfields-post-image {
  width: 100%; max-height: 360px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 15px;
  margin: 4px 0 10px; background: var(--hover); display: block; min-height: 210px;
}

.arabfields-post-actions { display: flex; justify-content: flex-start; gap: 16px; max-width: 420px; color: var(--muted); }
.arabfields-post-actions button, .arabfields-post-actions .arabfields-views-count {
  border: 0; background: transparent; color: inherit; text-decoration: none;
  font-size: 13px; padding: 6px 10px; border-radius: 20px;
  transition: all 0.18s; display: flex; align-items: center; gap: 6px;
}
.arabfields-post-actions button i, .arabfields-post-actions .arabfields-views-count i {
  font-size: 13px;
}
.arabfields-post-actions button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.arabfields-post-actions .arabfields-fav.arabfields-active { color: var(--red); }
.arabfields-views-count { font-weight: 500; }

/* ADS */
.arabfields-ad-banner-inline {
  display: block; margin: 20px 22px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  background: var(--hover);
}
.arabfields-ad-banner-inline:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); border-color: var(--accent); }
.arabfields-ad-banner-inline img { width: 100%; height: auto; display: block; }

.arabfields-empty { text-align: center; padding: 80px 20px; color: var(--muted); }
.arabfields-empty > div { font-size: 40px; color: var(--accent); margin-bottom: 16px; }
.arabfields-empty h2 { color: var(--text); font: 800 22px 'Manrope'; }
.arabfields-primary {
  background: var(--accent); color: #fff; border: 0; border-radius: 22px;
  padding: 12px 20px; font-weight: 800; transition: opacity 0.18s; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
}
.arabfields-primary:hover { opacity: 0.9; }

/* MODAL */
.arabfields-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: grid; place-items: center; padding: 20px; z-index: 50;
}
.arabfields-modal {
  width: min(470px, 100%); background: var(--card); color: var(--text);
  border-radius: 18px; padding: 25px; position: relative;
  box-shadow: 0 30px 100px rgba(0,0,0,0.3); border: 1px solid var(--line);
  animation: arabfields-slideDown 0.3s ease-out;
}
.arabfields-close {
  position: absolute; right: 12px; top: 9px;
  border: 0; background: transparent; color: var(--muted); font-size: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  transition: all 0.18s;
}
.arabfields-close:hover { color: var(--text); background: var(--hover); }
.arabfields-modal h2 { font: 800 24px 'Manrope'; margin: 14px 0 5px; color: var(--text); }
.arabfields-modal p { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.arabfields-modal label {
  font-size: 13px; font-weight: 800; display: block; margin: 13px 0; color: var(--text);
}
.arabfields-modal label i { margin-right: 6px; color: var(--accent); }
.arabfields-modal input, .arabfields-modal select {
  display: block; width: 100%; margin-top: 6px; background: var(--hover);
  border: 1px solid var(--line); color: var(--text); border-radius: 9px;
  padding: 12px; outline: 0; font-size: 15px; transition: border-color 0.18s;
}
.arabfields-modal input:focus, .arabfields-modal select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.1); }
.arabfields-modal .arabfields-primary { width: 100%; margin-top: 10px; justify-content: center; }

.arabfields-manage-area { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 15px; }
.arabfields-manage-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.arabfields-delete { border: 0; background: transparent; color: var(--red); font-size: 14px; font-weight: 800; }
.arabfields-delete:hover { text-decoration: underline; }

/* TOAST & UTILS */
.arabfields-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 20px); opacity: 0;
  background: var(--text); color: var(--bg); padding: 11px 16px;
  border-radius: 25px; font-size: 13px; transition: all 0.2s; z-index: 70;
}
.arabfields-toast.arabfields-show { opacity: 1; transform: translate(-50%, 0); }
.arabfields-hidden { display: none !important; }

/* PALETTE */
.arabfields-palette { position: relative; }
.arabfields-palette > #arabfields-paletteBtn { color: var(--accent) !important; }
.arabfields-palette-menu {
  position: absolute; right: 0; top: 42px; z-index: 80;
  display: flex; gap: 7px; padding: 9px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.arabfields-palette-menu button {
  border: 0 !important; background: transparent !important; width: 27px !important;
  height: 27px !important; border-radius: 50% !important;
  line-height: 1; padding: 0; color: var(--c) !important; transition: transform 0.18s;
  display: grid; place-items: center;
}
.arabfields-palette-menu button:hover { transform: scale(1.2); }

/* RIGHT SIDEBAR */
.arabfields-right-sidebar {
  border-left: 1px solid var(--line); padding: 20px 16px;
  position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg);
}
.arabfields-right-sidebar-inner {
  display: flex; flex-direction: column; gap: 16px;
  animation: arabfields-scrollUp 30s linear infinite;
}
.arabfields-right-sidebar-inner:hover { animation-play-state: paused; }
@keyframes arabfields-scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

.arabfields-ad-widget {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; flex-shrink: 0; transition: all 0.2s;
}
.arabfields-ad-widget:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.arabfields-ad-label { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.arabfields-ad-content { display: flex; flex-direction: column; gap: 10px; }
.arabfields-ad-image { width: 100%; border-radius: 12px; overflow: hidden; background: var(--hover); }
.arabfields-ad-image img { width: 100%; height: auto; display: block; object-fit: cover; }
.arabfields-ad-title { font: 700 16px/1.3 'Manrope'; margin: 0; color: var(--text); }
.arabfields-ad-desc { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.arabfields-ad-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--accent);
  text-decoration: none; margin-top: 4px; transition: opacity 0.18s;
}
.arabfields-ad-cta:hover { opacity: 0.8; text-decoration: underline; }

/* RTL SUPPORT */
.arabfields-post.arabfields-rtl { direction: rtl !important; text-align: right !important; grid-template-columns: minmax(0, 1fr) 44px !important; }
.arabfields-post.arabfields-rtl .arabfields-post-avatar { grid-column: 2 !important; grid-row: 1 !important; }
.arabfields-post.arabfields-rtl .arabfields-post-content { grid-column: 1 !important; grid-row: 1 !important; }
.arabfields-post.arabfields-rtl .arabfields-post-title, .arabfields-post.arabfields-rtl .arabfields-post-excerpt { direction: rtl !important; unicode-bidi: plaintext !important; text-align: right !important; }
.arabfields-post.arabfields-rtl .arabfields-post-actions, .arabfields-post.arabfields-rtl .arabfields-post-head { direction: rtl !important; justify-content: flex-start !important; }
.arabfields-post.arabfields-rtl .arabfields-post-title, .arabfields-post.arabfields-rtl .arabfields-post-excerpt, .arabfields-post.arabfields-rtl .arabfields-post-head, [dir="rtl"] { font-family: 'Noto Naskh Arabic', serif !important; font-weight: 700 !important; }
.arabfields-post.arabfields-rtl .arabfields-post-title { font-size: 22px !important; line-height: 1.6 !important; }
.arabfields-post.arabfields-rtl .arabfields-post-excerpt { font-size: 17px !important; line-height: 1.8 !important; }

.arabfields-post.arabfields-ltr { direction: ltr !important; text-align: left !important; grid-template-columns: 44px minmax(0, 1fr) !important; }
.arabfields-post.arabfields-ltr .arabfields-post-avatar { grid-column: 1 !important; }
.arabfields-post.arabfields-ltr .arabfields-post-content { grid-column: 2 !important; }

/* ANIMATIONS */
@keyframes arabfields-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes arabfields-slideDown { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes arabfields-spin { to { transform: rotate(360deg); } }
#arabfields-refresh.arabfields-spinning i { animation: arabfields-spin 0.8s linear infinite; }
#arabfields-refresh:disabled { opacity: 0.55; cursor: wait; }

/* RESPONSIVE */
@media (max-width: 1200px) {
  .arabfields-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .arabfields-right-sidebar { display: none; }
}
@media (max-width: 760px) {
  .arabfields-layout { display: block; }
  .arabfields-sidebar { position: fixed; left: 0; transform: translateX(-105%); transition: transform 0.2s; width: 260px; z-index: 30; box-shadow: 0 0 60px rgba(0,0,0,0.2); }
  .arabfields-sidebar.arabfields-open { transform: none; }
  .arabfields-mobile { display: block; }
  .arabfields-topbar { padding: 0 12px; }
  .arabfields-page-head { padding: 24px 15px 12px; }
  .arabfields-post { padding: 15px; }
  .arabfields-post-image { max-height: 260px; }
  .arabfields-right-sidebar { display: none; }
  .arabfields-ad-banner-inline { margin: 15px; }
  .arabfields-live-card { margin: 15px; }
  .arabfields-live-header { padding: 12px 15px; }
  .arabfields-live-footer { padding: 10px 15px; flex-direction: column; gap: 8px; }
}