/* Small additions loaded after ra.css */
.ra-howto { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; color: #c9ced8; }
.ra-admin-tag { align-self: flex-start; margin-top: -14px; background: #2a1a10; color: var(--accent2); border: 1px solid #4a2a16; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.ra-nav-back { margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0 !important; padding-top: 16px !important; }
.ra-shell--admin .ra-side { background: #0b0d12; }
.ra-pp { min-height: 45px; }
.ra-manual { background: #0d1016; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; line-height: 1.7; }
.ra-count { margin-left: auto; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.ra-manual-pick summary { cursor: pointer; margin-right: 10px; }

/* ── Reels ─────────────────────────────────────────────────────────── */
.ra-reels-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.ra-btn--lg { padding: 14px 22px; font-size: 15px; border-radius: 12px; }
.ra-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ra-stat b small { font-size: 15px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.ra-grid-2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
.ra-grid-2 > .ra-card { margin: 0 0 18px; }
@media (max-width: 960px) { .ra-grid-2 { grid-template-columns: 1fr; } }

.ra-toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 14px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; }
.ra-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ra-toggle-ui { flex: 0 0 46px; height: 26px; border-radius: 999px; background: #2a2f3a; position: relative; transition: background .2s; }
.ra-toggle-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ra-toggle input:checked + .ra-toggle-ui { background: var(--accent); }
.ra-toggle input:checked + .ra-toggle-ui::after { transform: translateX(20px); }
.ra-toggle input:focus-visible + .ra-toggle-ui { outline: 2px solid var(--accent2); outline-offset: 2px; }
.ra-toggle b { display: block; }
.ra-toggle small { color: var(--muted); font-size: 13px; }

.ra-track { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; }
.ra-track > div { flex: 1; }
.ra-track b { display: block; }
.ra-track small { color: var(--muted); font-size: 13px; }
.ra-track-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #ff9a62); color: #fff; font-size: 20px; }
.ra-file { position: relative; display: block; border: 1.5px dashed var(--line); border-radius: 12px; padding: 18px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.ra-file:hover { border-color: var(--accent); background: rgba(255,90,31,.05); }
.ra-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ra-file span { font-weight: 600; }
.ra-file small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 4px; }

.ra-upsell { display: flex; gap: 22px; align-items: flex-start; background: linear-gradient(135deg, rgba(255,90,31,.12), rgba(255,90,31,0) 60%), var(--panel); }
.ra-upsell h3 { margin: 0 0 8px; }
.ra-upsell-icon { flex: 0 0 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: var(--panel2); border: 1px solid var(--line); }

.ra-reels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.ra-reel { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.ra-reel-media { position: relative; aspect-ratio: 9 / 16; background: #000; }
.ra-reel-media video, .ra-reel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ra-reel-overlay, .ra-reel-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(10,12,16,.6); font-weight: 600; font-size: 14px; }
.ra-reel-placeholder { background: linear-gradient(160deg, #1b1f29, #0d0f14); color: var(--muted); }
.ra-reel-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ra-reel-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ra-reel-titles { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: #c9ced8; }
.ra-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ra-chip { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #222733; color: var(--muted); border: 1px solid var(--line); text-decoration: none; }
.ra-chip--ok { color: var(--ok); border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.08); }
.ra-chip--err { color: var(--err); border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08); }
.ra-chip--wait { color: var(--warn); border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.08); }
a.ra-chip--ok:hover { background: rgba(74,222,128,.16); }

.ra-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent); animation: ra-spin .9s linear infinite; }
@keyframes ra-spin { to { transform: rotate(360deg); } }
.ra-pulse { animation: ra-pulse 1.6s ease-in-out infinite; }
@keyframes ra-pulse { 50% { opacity: .55; } }

.ra-empty-reels { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 6px; text-align: center; }
.ra-phone { width: 150px; aspect-ratio: 9 / 18; border-radius: 26px; padding: 8px; background: #05060a; border: 2px solid #2a2f3a; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.ra-phone-screen { height: 100%; border-radius: 19px; background: linear-gradient(170deg, var(--accent) 0%, #7a2a10 45%, #0d0f14 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; }
.ra-phone-screen span { font-size: 34px; }
.ra-phone-screen small { font-size: 11px; color: #fff; opacity: .85; }

/* Topic filters (Content) */
.ra-filters { margin-top: 8px; }
.ra-filters summary { cursor: pointer; font-size: 13px; color: var(--accent2); font-weight: 600; }
.ra-filters .ra-form { margin-top: 10px; max-width: 560px; }
.ra-filters input { padding: 8px 12px; }
.ra-conn { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ra-conn span b { display: block; }
.ra-conn span small { color: var(--muted); font-size: 12px; }

/* Arabic landing page */
.lp-ar, .lp-ar h1, .lp-ar h2, .lp-ar h3, .lp-ar p, .lp-ar a, .lp-ar span, .lp-ar li, .lp-ar summary, .lp-ar em, .lp-ar strong, .lp-ar b, .lp-ar small { font-family: 'Almarai', 'Poppins', system-ui, sans-serif; }
.lp-ar h1 { line-height: 1.45; }
.lp-ar .lp-links { margin-left: 0; margin-right: 24px; }
.lp-ar .lp-nav-cta { margin-left: 0; margin-right: auto; }
.lp-ar .lp-plan ul li { text-align: right; }

/* Language toggle */
.ra-lang { display: inline-flex; background: #0d1016; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 10px; }
.ra-lang a { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; }
.ra-lang a.on { background: var(--accent); color: #fff; }
.ra-lang a:hover:not(.on) { color: var(--text); }
.ra-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ra-hero-top .ra-lang { margin-bottom: 0; }
.lp-lang { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }

/* Right-to-left (Arabic) */
[dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] button { font-family: 'Almarai', 'Poppins', system-ui, sans-serif; }
[dir="rtl"] .ra-side { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .ra-side nav a.on { box-shadow: inset -3px 0 0 var(--accent); }
[dir="rtl"] .ra-head-note { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ra-howto { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .ra-reel-titles { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .ra-count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ra-stat b small { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .lp-plan li::before { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .lp-badge { left: auto; right: 24px; }
[dir="rtl"] .lp-price span { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .lp-footer a { margin-left: 0; margin-right: 16px; }
[dir="rtl"] .lp-card-body em { border-left: 0; border-right: 3px solid var(--accent); padding-left: 0; padding-right: 8px; }
[dir="rtl"] .ra-admin th, [dir="rtl"] .ra-admin td { text-align: right; }
@media (max-width: 900px) { [dir="rtl"] .ra-side nav a.on { box-shadow: inset 0 -3px 0 var(--accent); } [dir="rtl"] .ra-side { border-left: 0; } }

/* Get the app (link to /app) */
.ra-install { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,90,31,.45); background: linear-gradient(135deg, rgba(255,90,31,.20), rgba(255,90,31,.04)); color: var(--text); text-decoration: none !important; transition: border-color .2s, transform .1s; }
.ra-install[hidden] { display: none !important; }
.ra-install:hover { border-color: var(--accent); }
.ra-install:active { transform: scale(.98); }
.ra-install img { border-radius: 7px; flex: 0 0 28px; }
.ra-install span { flex: 1; }
.ra-install b { display: block; font-size: 13px; }
.ra-install small { display: block; font-size: 11px; color: var(--muted); }
.ra-install i { font-style: normal; font-weight: 700; color: var(--accent); }
.ra-hero .ra-install { margin: 18px 0 0; max-width: 340px; }
@media (max-width: 900px) { .ra-side .ra-install { order: 4; width: 100%; } }

/* /app download page */
.ra-app-hero { max-width: 620px; margin: 30px auto 0; padding: 0 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ra-app-icon { width: 128px; height: 128px; filter: drop-shadow(0 18px 40px rgba(255,90,31,.35)); }
.ra-app-hero h1 { margin: 6px 0 0; font-size: clamp(30px, 6vw, 44px); }
.ra-app-sub { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.ra-app-dl { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; font-size: 17px; border-radius: 14px; margin-top: 10px; }
.ra-app-meta { margin: 0; color: var(--muted); font-size: 13px; }
.ra-app-steps { max-width: 620px; margin: 40px auto 0; padding: 0 20px; }
.ra-app-steps h2 { font-size: 22px; margin: 0 0 16px; }
.ra-app-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ra-app-steps li { display: flex; gap: 14px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; line-height: 1.6; }
.ra-app-steps li b { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 14px; }
.ra-app-note { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; background: #0d1016; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.ra-app-hash { max-width: 620px; margin: 28px auto 0; padding: 0 20px; color: #5b6270; font-size: 11px; overflow-wrap: anywhere; text-align: center; }
.lp-app-link { font-weight: 600; color: var(--accent2) !important; }
/* Running as an installed app: respect phone notches / status bar */
.ra-standalone body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

/* Phones: keep everything inside the screen; the menu scrolls sideways like an app tab bar */
@media (max-width: 860px) {
    .ra-shell { grid-template-columns: minmax(0, 1fr); }
    .ra-side, .ra-main { min-width: 0; }
    .ra-side { position: sticky; top: 0; z-index: 20; padding: 12px 14px 0; gap: 10px; background: rgba(13,16,22,.97); backdrop-filter: blur(8px); }
    .ra-side nav { min-width: 0; margin: 0 -14px; padding: 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .ra-side nav::-webkit-scrollbar { display: none; }
    .ra-side nav a { scroll-snap-align: start; flex: 0 0 auto; }
    .ra-me { padding: 0; gap: 8px; }
    .ra-me .ra-lang { margin: 0; }
    .ra-me form { margin: 0 !important; }
    .ra-side .ra-install { order: 4; width: 100%; }
    .ra-main { padding: 18px 14px 40px; }
    .ra-h1 { font-size: 24px; }
    .ra-card { padding: 16px; }
    .ra-reels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 380px) { .ra-reels-grid { grid-template-columns: minmax(0, 1fr); } }
.ra-standalone .ra-side { padding-top: calc(12px + env(safe-area-inset-top)); }
@media (max-width: 640px) {
    .ra-source { flex-direction: column; align-items: stretch; gap: 10px; }
    .ra-source .ra-actions { justify-content: flex-start; flex-wrap: wrap; }
}