/* ============================================================
   RPF Admin Panel — Persian RTL dashboard
   ============================================================ */
:root{
  --navy:#0f4c81;--navy2:#2b7dc4;--teal:#00a99d;--teal2:#1fc8bb;--gold:#d4a017;--gold2:#f0c14b;
  --bg:#070d18;--bg2:#0b1424;--card:#0e1a2e;--card2:#12203a;--side:#0a1322;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);
  --tx:#eaf1fb;--tx2:#9fb2cc;--tx3:#67809e;
  --ok:#4ade80;--warn:#fbbf24;--err:#f87171;--info:#38bdf8;
  --rad:16px;--rad-s:11px;--shadow:0 24px 60px -18px rgba(0,0,0,.7);
  --ff:'Vazirmatn',system-ui,sans-serif;--ff-mono:'Space Grotesk',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--ff);background:var(--bg);color:var(--tx);line-height:1.7;overflow-x:hidden;
  background-image:radial-gradient(circle at 90% 0%,rgba(15,76,129,.16),transparent 45%),radial-gradient(circle at 0% 90%,rgba(0,169,157,.1),transparent 45%)}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:var(--ff);cursor:pointer}
input,select,textarea{font-family:var(--ff)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}

/* ============ LOGIN ============ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative}
.login-card{width:100%;max-width:410px;background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line2);
  border-radius:24px;padding:44px 38px;box-shadow:var(--shadow);position:relative;z-index:2;animation:fadeUp .6s both}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:30px}
.login-logo svg{width:64px;height:64px;filter:drop-shadow(0 6px 18px rgba(43,125,196,.5))}
.login-logo b{font-size:1.3rem;font-weight:800}
.login-logo span{font-size:.72rem;color:var(--tx3);letter-spacing:3px;font-family:var(--ff-mono)}
.login-card h1{font-size:1.3rem;text-align:center;margin-bottom:6px}
.login-card .sub{text-align:center;color:var(--tx3);font-size:.88rem;margin-bottom:28px}
.login-err{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#fca5a5;
  padding:11px 14px;border-radius:11px;font-size:.88rem;margin-bottom:16px;display:none}
.login-err.show{display:block;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.login-hint{margin-top:20px;padding:13px;background:rgba(0,169,157,.07);border:1px dashed rgba(0,169,157,.3);
  border-radius:11px;font-size:.78rem;color:var(--tx2);text-align:center;line-height:1.9}
.login-hint code{font-family:var(--ff-mono);color:var(--teal2);direction:ltr;display:inline-block}

/* ============ APP SHELL ============ */
.app{display:none;min-height:100vh}
.app.show{display:grid;grid-template-columns:256px 1fr}

/* sidebar */
.sidebar{background:var(--side);border-inline-end:1px solid var(--line);position:fixed;top:0;bottom:0;width:256px;
  display:flex;flex-direction:column;z-index:50;transition:.3s}
.side-head{padding:22px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.side-head svg{width:40px;height:40px;flex:none}
.side-head b{font-size:1rem;font-weight:800;line-height:1.2}
.side-head span{font-size:.6rem;color:var(--tx3);letter-spacing:2px;font-family:var(--ff-mono)}
.side-nav{flex:1;overflow-y:auto;padding:14px 12px}
.side-nav .grp{font-size:.7rem;color:var(--tx3);letter-spacing:1px;padding:14px 12px 6px;text-transform:uppercase}
.side-nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;color:var(--tx2);
  font-size:.92rem;font-weight:500;transition:.2s;margin-bottom:2px;position:relative}
.side-nav a .ic{width:20px;text-align:center;font-size:1.05rem}
.side-nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.side-nav a.active{background:linear-gradient(135deg,rgba(0,169,157,.18),rgba(15,76,129,.18));color:#fff}
.side-nav a.active::before{content:'';position:absolute;inset-inline-start:0;top:20%;bottom:20%;width:3px;
  background:var(--teal);border-radius:3px}
.side-nav a .badge{margin-inline-start:auto;background:var(--err);color:#fff;font-size:.68rem;
  padding:1px 7px;border-radius:50px;font-family:var(--ff-mono)}
.side-foot{padding:14px;border-top:1px solid var(--line)}
.side-user{display:flex;align-items:center;gap:11px;padding:10px;border-radius:11px;background:rgba(255,255,255,.03)}
.side-user .av{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--teal),var(--navy));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex:none}
.side-user .nm{font-size:.85rem;font-weight:600;line-height:1.2}
.side-user .rl{font-size:.72rem;color:var(--tx3)}
.side-logout{margin-top:8px;width:100%;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);
  color:#fca5a5;padding:9px;border-radius:10px;font-size:.85rem;transition:.2s}
.side-logout:hover{background:rgba(248,113,113,.2)}

/* main */
.main{grid-column:2;min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;background:rgba(7,13,24,.82);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);padding:15px 28px;display:flex;align-items:center;gap:18px}
.topbar .burger{display:none;background:none;border:none;color:#fff;font-size:1.4rem}
.topbar h2{font-size:1.18rem;font-weight:700;margin-inline-end:auto}
.topbar .tb-act{display:flex;gap:10px;align-items:center}
.tb-view{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--tx2);padding:8px 14px;
  border-radius:10px;font-size:.85rem;transition:.2s}
.tb-view:hover{border-color:var(--teal);color:#fff}
.content{padding:28px;flex:1;max-width:1280px;width:100%}

/* ============ PAGES ============ */
.page{display:none;animation:fadeIn .4s both}
.page.show{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page-head .ph-l h3{font-size:1.4rem;font-weight:800}
.page-head .ph-l p{color:var(--tx3);font-size:.9rem;margin-top:2px}

/* stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-bottom:28px}
.stat{background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:var(--rad);
  padding:22px;position:relative;overflow:hidden;transition:.35s}
.stat:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--shadow)}
.stat .si{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin-bottom:16px}
.stat .sv{font-size:2rem;font-weight:800;font-family:var(--ff-mono);line-height:1}
.stat .sl{color:var(--tx3);font-size:.86rem;margin-top:6px}
.stat.t1 .si{background:rgba(0,169,157,.15);color:var(--teal2)}
.stat.t2 .si{background:rgba(212,160,23,.15);color:var(--gold2)}
.stat.t3 .si{background:rgba(43,125,196,.15);color:var(--navy2)}
.stat.t4 .si{background:rgba(248,113,113,.15);color:var(--err)}

/* card / table */
.card{background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:var(--rad);overflow:hidden}
.card-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-head h4{font-size:1.05rem;font-weight:700}
.card-body{padding:6px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search-box{position:relative}
.search-box input{background:rgba(7,13,24,.6);border:1px solid var(--line2);border-radius:10px;padding:9px 36px 9px 14px;
  color:#fff;font-size:.88rem;width:230px;transition:.2s}
.search-box input:focus{outline:none;border-color:var(--teal)}
.search-box::before{content:'🔍';position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);font-size:.85rem;opacity:.6}

table{width:100%;border-collapse:collapse}
thead th{text-align:start;padding:13px 16px;font-size:.78rem;color:var(--tx3);font-weight:600;
  border-bottom:1px solid var(--line);white-space:nowrap;text-transform:uppercase;letter-spacing:.5px}
tbody td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:middle}
tbody tr{transition:.15s}
tbody tr:hover{background:rgba(255,255,255,.025)}
tbody tr:last-child td{border-bottom:none}
.t-title{font-weight:600;color:#fff}
.t-sub{font-size:.8rem;color:var(--tx3)}
.t-thumb{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex:none}
.t-cell{display:flex;align-items:center;gap:12px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:50px;font-size:.74rem;font-weight:600}
.chip.ok{background:rgba(74,222,128,.14);color:var(--ok)}
.chip.draft{background:rgba(148,163,184,.14);color:#cbd5e1}
.chip.warn{background:rgba(251,191,36,.14);color:var(--warn)}
.chip.info{background:rgba(56,189,248,.14);color:var(--info)}
.chip.gold{background:rgba(212,160,23,.14);color:var(--gold2)}

.row-act{display:flex;gap:6px;justify-content:flex-end}
.ico-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:.2s;color:var(--tx2)}
.ico-btn:hover{color:#fff;transform:translateY(-2px)}
.ico-btn.edit:hover{border-color:var(--teal);background:rgba(0,169,157,.15);color:var(--teal2)}
.ico-btn.del:hover{border-color:var(--err);background:rgba(248,113,113,.15);color:#fca5a5}
.ico-btn.view:hover{border-color:var(--navy2);background:rgba(43,125,196,.15);color:var(--navy2)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:11px;font-weight:600;
  font-size:.9rem;border:none;transition:.25s;white-space:nowrap}
.btn-pri{background:linear-gradient(135deg,var(--teal),var(--navy));color:#fff;box-shadow:0 8px 24px -8px rgba(0,169,157,.6)}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(0,169,157,.7)}
.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#1a1205}
.btn-gold:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--tx)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:7px 13px;font-size:.83rem}
.btn-block{width:100%;justify-content:center;padding:13px}

/* empty / loading */
.empty{text-align:center;padding:56px 20px;color:var(--tx3)}
.empty .ei{font-size:3rem;margin-bottom:14px;opacity:.5}
.loading{text-align:center;padding:50px;color:var(--tx3)}
.spin-ring{width:38px;height:38px;border:3px solid var(--line2);border-top-color:var(--teal);
  border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{height:56px;background:linear-gradient(90deg,var(--card),var(--card2),var(--card));
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:10px;margin:8px}
@keyframes shimmer{to{background-position:-200% 0}}

/* ============ MODAL ============ */
.modal-bg{position:fixed;inset:0;background:rgba(3,7,15,.75);backdrop-filter:blur(6px);z-index:100;
  display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal-bg.show{display:flex;animation:fadeIn .25s}
.modal{background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line2);border-radius:20px;
  width:100%;max-width:720px;box-shadow:var(--shadow);animation:fadeUp .35s;margin:auto 0}
.modal-head{padding:20px 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--card);z-index:2;border-radius:20px 20px 0 0}
.modal-head h3{font-size:1.15rem;font-weight:700}
.modal-close{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:none;color:var(--tx2);font-size:1.1rem;transition:.2s}
.modal-close:hover{background:rgba(248,113,113,.15);color:#fca5a5;border-color:var(--err)}
.modal-body{padding:24px 26px;max-height:calc(100vh - 220px);overflow-y:auto}
.modal-foot{padding:18px 26px;border-top:1px solid var(--line);display:flex;gap:12px;justify-content:flex-end;
  position:sticky;bottom:0;background:var(--card);border-radius:0 0 20px 20px}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg{margin-bottom:4px}
.fg.full{grid-column:1/-1}
.fg label{display:block;font-size:.85rem;color:var(--tx2);margin-bottom:7px;font-weight:500}
.fg label .req{color:var(--err)}
.fg label .hint{color:var(--tx3);font-size:.76rem;font-weight:400}
.fg input,.fg select,.fg textarea{width:100%;background:rgba(7,13,24,.6);border:1px solid var(--line2);
  border-radius:10px;padding:11px 14px;color:#fff;font-size:.9rem;transition:.2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,169,157,.12)}
.fg textarea{min-height:96px;resize:vertical;line-height:1.8}
.fg select option{background:var(--card2)}
.fg input[dir=ltr]{direction:ltr;text-align:left}
.media-box{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center;padding:14px;border:1px dashed var(--line2);border-radius:14px;background:rgba(7,13,24,.4);transition:.25s}
.media-box.uploading{opacity:.65;pointer-events:none}
.media-preview{height:112px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--tx3);font-size:.8rem}
.media-preview img{width:100%;height:100%;object-fit:cover;display:block}
.media-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.media-pick{position:relative;overflow:hidden}
.media-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;padding:0}
.media-clear:disabled{opacity:.4;cursor:not-allowed}
.media-status{display:block;width:100%;color:var(--teal2);min-height:20px}
.t-thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.fld-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:0}
.fld-tab{padding:9px 16px;background:none;border:none;color:var(--tx3);font-size:.88rem;font-weight:600;
  border-bottom:2px solid transparent;transition:.2s;margin-bottom:-1px}
.fld-tab.active{color:var(--teal2);border-bottom-color:var(--teal)}
.fld-pane{display:none}.fld-pane.show{display:block}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{display:none}
.switch .track{width:44px;height:24px;border-radius:50px;background:var(--line2);position:relative;transition:.25s;flex:none}
.switch .track::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.25s}
.switch input:checked+.track{background:var(--teal)}
.switch input:checked+.track::after{inset-inline-start:23px}
.tag-input-wrap{display:flex;flex-wrap:wrap;gap:7px;background:rgba(7,13,24,.6);border:1px solid var(--line2);
  border-radius:10px;padding:9px}
.tag-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,169,157,.14);color:var(--teal2);
  padding:4px 10px;border-radius:8px;font-size:.82rem}
.tag-chip button{background:none;border:none;color:inherit;font-size:1rem;line-height:1;opacity:.7}
.tag-chip button:hover{opacity:1}
.tag-input-wrap input{flex:1;min-width:120px;background:none;border:none;color:#fff;font-size:.88rem;outline:none}

/* SEO score ring */
.seo-top{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-bottom:24px}
.seo-ring{width:130px;height:130px;position:relative;flex:none}
.seo-ring svg{transform:rotate(-90deg)}
.seo-ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.seo-ring .val b{font-size:2rem;font-family:var(--ff-mono);font-weight:800}
.seo-ring .val span{font-size:.74rem;color:var(--tx3)}
.seo-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seo-check{display:flex;align-items:center;gap:10px;padding:11px 14px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:11px;font-size:.88rem}
.seo-check .dot{width:9px;height:9px;border-radius:50%;flex:none}
.seo-check .dot.ok{background:var(--ok)}.seo-check .dot.warn{background:var(--warn)}.seo-check .dot.err{background:var(--err)}

/* toast */
.toast-wrap{position:fixed;bottom:24px;inset-inline-start:24px;z-index:200;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:13px 18px;
  display:flex;align-items:center;gap:11px;box-shadow:var(--shadow);min-width:260px;animation:slideIn .35s;font-size:.9rem}
.toast.ok{border-inline-start:3px solid var(--ok)}
.toast.err{border-inline-start:3px solid var(--err)}
.toast .ti{font-size:1.2rem}
@keyframes slideIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}

/* confirm */
.confirm-card{max-width:420px;text-align:center}
.confirm-card .modal-body{padding:30px 26px}
.confirm-ic{width:64px;height:64px;border-radius:50%;background:rgba(248,113,113,.14);display:flex;
  align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 18px}
.confirm-card h3{margin-bottom:8px}
.confirm-card p{color:var(--tx2);font-size:.92rem;margin-bottom:6px}

/* responsive */
@media(max-width:920px){
  .app.show{grid-template-columns:1fr}
  .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:translateX(0)}
  .main{grid-column:1}
  .topbar .burger{display:block}
  .form-grid,.seo-checks{grid-template-columns:1fr}
  .seo-top{grid-template-columns:1fr;justify-items:center;text-align:center}
}
@media(max-width:560px){
  .content{padding:18px}
  .search-box input{width:150px}
  .hide-sm{display:none}
  .media-box{grid-template-columns:1fr}.media-preview{height:160px}
}