:root {
--bg: #fcd0b1;
--card: #fcd0b1;
--hover: #ffc398;
--line: #f2dfce;
--text: #000000;
--muted: #000000;
--accent: #1d9bf0;
--blue: var(--accent);
--link: var(--accent);
--red: #f4212e;
--green: #00ba7c;
--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; }

/* CONNECTION STATUS BAR */
.arabfields-connection-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
z-index: 9999;
overflow: hidden;
background: rgba(0, 0, 0, 0.1);
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.arabfields-connection-bar.arabfields-hidden-bar {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.arabfields-connection-bar-fill {
height: 100%;
width: 100%;
animation: arabfields-connection-slide 2s ease-in-out 7 forwards;
transform-origin: left;
}
.arabfields-online .arabfields-connection-bar-fill {
background: linear-gradient(90deg, transparent 0%, #18cc01 20%, #25e601 50%, #18cc01 80%, transparent 100%);
box-shadow: 0 0 10px rgba(24, 204, 1, 0.6);
}
.arabfields-offline .arabfields-connection-bar-fill {
background: linear-gradient(90deg, transparent 0%, #ff0000 20%, #ff3333 50%, #ff0000 80%, transparent 100%);
box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
}
@keyframes arabfields-connection-slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.arabfields-connection-status {
position: fixed;
bottom: 12px;
left: 20px;
z-index: 9998;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
color: #fff;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: opacity 0.5s ease, visibility 0.5s ease, background 0.3s;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.arabfields-connection-status.arabfields-hidden-bar {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.arabfields-online .arabfields-connection-status {
background: rgba(24, 204, 1, 0.9);
}
.arabfields-offline .arabfields-connection-status {
background: rgba(255, 0, 0, 0.9);
}
.arabfields-connection-status i {
font-size: 11px;
}

.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: 10%;
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: color-mix(in srgb, var(--hover) 55%, transparent);
backdrop-filter: blur(6px);
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: 0px solid var(--line);
position: sticky;
top: 0;
background: color-mix(in srgb, var(--bg) 1%, transparent);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
z-index: 10;
display: flex;
align-items: center;
padding: 0 20px;
gap: 15px;
}
.arabfields-search {
background: color-mix(in srgb, var(--hover) 40%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
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 color-mix(in srgb, var(--line) 45%, transparent);
transition: all 0.2s;
}
.arabfields-search i { font-size: 14px; color: var(--muted); }
.arabfields-search:focus-within {
border-color: var(--accent);
background: color-mix(in srgb, var(--hover) 65%, transparent);
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: color-mix(in srgb, var(--hover) 25%, transparent);
color: var(--text);
font-size: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
transition: all 0.18s;
}
.arabfields-actions button:hover {
background: color-mix(in srgb, var(--accent) 18%, transparent);
color: var(--accent);
transform: translateY(-1px);
}
.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; }

/* HEADER IMAGE */
.arabfields-header-image {
width: 100%;
height: 260px;
overflow: hidden;
background: var(--hover);
border: none;
border-radius: 0;
margin: 0;
padding: 0;
}
.arabfields-header-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0;
}
.arabfields-page-head { padding: 20px 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-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); }

/* ✅ RADIO LIVE VIEW - ZONE VIDE */
.arabfields-radio-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-radio-header {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 20px; border-bottom: 1px solid var(--line);
background: linear-gradient(135deg, rgba(29, 155, 240, 0.05) 0%, transparent 100%);
}
.arabfields-radio-title {
display: flex; align-items: center; gap: 10px;
font-weight: 700; color: var(--text); font-size: 15px;
}
.arabfields-radio-title i { color: var(--accent); }
.arabfields-radio-badge {
background: var(--accent); 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;
}
.arabfields-radio-dot {
width: 8px; height: 8px; background: #fff; border-radius: 50%;
animation: arabfields-pulse-white 1.5s infinite;
}
@keyframes arabfields-pulse-white {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.arabfields-radio-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
color: var(--muted);
text-align: center;
min-height: 300px;
}
.arabfields-radio-empty i {
font-size: 60px;
color: var(--accent);
margin-bottom: 20px;
opacity: 0.5;
}
.arabfields-radio-empty p {
font: 700 18px 'Manrope';
color: var(--muted);
margin: 0;
}

/* 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%;
display: grid; place-items: center; font-size: 12px; font-weight: 800;
color: #fff;
}
.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-reads-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-reads-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-reads-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; }

/* MANAGE AREA */
.arabfields-manage-area {
margin-top: 20px;
border-top: 1px solid var(--line);
padding-top: 15px;
max-height: 360px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--accent) transparent;
}
.arabfields-manage-area::-webkit-scrollbar { width: 6px; }
.arabfields-manage-area::-webkit-scrollbar-track { background: transparent; }
.arabfields-manage-area::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 10px;
opacity: 0.7;
}
.arabfields-manage-area::-webkit-scrollbar-thumb:hover { background: var(--link); }
.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-manage-item small { color: var(--muted); word-break: break-all; }
.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: color-mix(in srgb, var(--card) 70%, transparent);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.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;
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: 16px 15px 12px; }
.arabfields-header-image { height: 120px; }
.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; }
.arabfields-radio-card { margin: 15px; }
.arabfields-radio-header { padding: 12px 15px; }
.arabfields-radio-empty { padding: 60px 15px; min-height: 200px; }
.arabfields-radio-empty i { font-size: 48px; }
.arabfields-radio-empty p { font-size: 16px; }
.arabfields-connection-status {
bottom: 10px;
left: 10px;
font-size: 11px;
padding: 5px 10px;
}
}