@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');
@import url('https://cdn-uicons.flaticon.com/4.0.0/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/4.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/4.0.0/uicons-brands/css/uicons-brands.css');

/* ── Variables ── */
html {
  --fsk-50:  #f9fafb; --fsk-100: #ebecee; --fsk-200: #dcdfe3;
  --fsk-300: #c7cbd0; --fsk-400: #b9bfc4; --fsk-500: #3d3d43;
  --fsk-600: #343438; --fsk-700: #2b2b2f; --fsk-800: #202024; --fsk-900: #1a1a1d;
  --fsk-blue-100: #dbeafe;
  --fsk-code-1: #687282; --fsk-code-2: #47987b;

  --p:    #EA1E63; --p-dk: #c0134f; --p-lt: #ff4081;
  --p-05: rgba(234,30,99,.05); --p-10: rgba(234,30,99,.10); --p-20: rgba(234,30,99,.20);

  --bg:     #f4f5f7; --surf: #fff; --surf2: var(--fsk-100);
  --bdr:    var(--fsk-200); --bdr2: var(--fsk-300);
  --tx1:    var(--fsk-900); --tx2: var(--fsk-500); --tx3: var(--fsk-400);

  --sb-bg:  #111318;
  --sb-bdr: rgba(255,255,255,.06);
  --sb-tx:  rgba(255,255,255,.5);
  --sb-tx2: rgba(255,255,255,.22);
  --sb-hov: rgba(255,255,255,.06);

  --sh-xs: 0 1px 3px rgba(0,0,0,.05);
  --sh-sm: 0 2px 10px rgba(0,0,0,.08);
  --sh:    0 4px 20px rgba(0,0,0,.10);
  --sh-lg: 0 8px 36px rgba(0,0,0,.14);
  --sh-xl: 0 16px 56px rgba(0,0,0,.18);

  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-2xl:28px; --r-pill:9999px;
  --ease:cubic-bezier(.4,0,.2,1); --t:.18s var(--ease); --t-lg:.3s var(--ease);
  --sb-w:252px; --tb-h:60px;
}
html.dark {
  --fsk-50:#14161d; --fsk-100:#1a1e26; --fsk-200:#222a38; --fsk-300:#2b3445;
  --fsk-400:#3a4458; --fsk-500:#7d8da6; --fsk-600:#c7cbd0; --fsk-700:#dcdfe3;
  --fsk-800:#ebecee; --fsk-900:#f9fafb;
  --fsk-blue-100:#c6d8f7; --fsk-code-1:#8fa3c5; --fsk-code-2:#6dbfa7;
  --bg:#0a0c10; --surf:var(--fsk-50); --surf2:var(--fsk-100);
  --bdr:var(--fsk-200); --bdr2:var(--fsk-300);
  --tx1:var(--fsk-900); --tx2:var(--fsk-500); --tx3:var(--fsk-400);
  --sh-xs:0 1px 3px rgba(0,0,0,.3); --sh-sm:0 2px 10px rgba(0,0,0,.4);
  --sh:0 4px 20px rgba(0,0,0,.5); --sh-lg:0 8px 36px rgba(0,0,0,.6); --sh-xl:0 16px 56px rgba(0,0,0,.7);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;font-weight:400;
  line-height:1.6;background:var(--bg);color:var(--tx1);direction:rtl;
  -webkit-font-smoothing:antialiased;transition:background var(--t-lg),color var(--t-lg)}
*{font-family:'IBM Plex Sans Arabic',sans-serif}
a{color:var(--p);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--p-dk)}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--p)}
::selection{background:var(--p-20);color:var(--p-dk)}
[class^="fi "],[class*=" fi "]{font-style:normal;line-height:1;display:inline-flex;align-items:center;justify-content:center}

/* ── Layout ── */
.app-main{margin-right:var(--sb-w);min-height:100vh;display:flex;flex-direction:column;transition:margin var(--t-lg)}

/* ================================================================
   SIDEBAR
   ================================================================ */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:199}
.sb-overlay.open{display:block}

.sidebar{
  position:fixed;top:0;right:0;bottom:0;width:var(--sb-w);
  background:var(--sb-bg);display:flex;flex-direction:column;
  z-index:200;transition:transform var(--t-lg);overflow:hidden;
}

/* رأس + شعار */
.sb-head{padding:18px 16px 0;flex-shrink:0}
.sb-brand{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-radius:var(--r-lg);background:rgba(255,255,255,.03);
  border:1px solid var(--sb-bdr);transition:background var(--t)}
.sb-brand:hover{background:rgba(255,255,255,.06)}
.sb-logo{height:28px;width:auto;max-width:140px}
.sb-brand-text{font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:-.02em}

/* بطاقة المستخدم */
.sb-user-card{display:flex;align-items:center;gap:10px;margin:12px 16px;
  padding:11px 13px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(234,30,99,.14),rgba(234,30,99,.04));
  border:1px solid rgba(234,30,99,.16);flex-shrink:0}
.sb-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--p),var(--p-lt));color:#fff;
  font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(234,30,99,.35)}
.sb-user-meta{flex:1;overflow:hidden;min-width:0}
.sb-uname{display:block;font-size:.82rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-ubal{display:flex;align-items:center;gap:5px;font-size:.7rem;color:rgba(255,255,255,.45);margin-top:1px}
.sb-ubal i{font-size:.68rem;color:var(--p-lt)}
.sb-user-edit{width:28px;height:28px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.25);font-size:.82rem;
  background:rgba(255,255,255,.04);border:1px solid var(--sb-bdr);
  transition:all var(--t)}
.sb-user-edit:hover{color:var(--p-lt);border-color:rgba(234,30,99,.28)}

/* القائمة */
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:0 10px}
.sb-nav::-webkit-scrollbar{display:none}

.sb-link{display:flex;align-items:center;gap:9px;padding:8px 11px;
  border-radius:var(--r);color:var(--sb-tx);font-size:.85rem;font-weight:500;
  transition:all var(--t);text-decoration:none;position:relative;margin-bottom:1px}
.sb-link:hover{background:var(--sb-hov);color:rgba(255,255,255,.8)}
.sb-link.is-active{background:rgba(234,30,99,.13);color:#fff;font-weight:600}
.sb-link.is-active::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--p);border-radius:2px 0 0 2px}
.sb-link-ico{width:28px;height:28px;border-radius:var(--r-sm);display:flex;align-items:center;
  justify-content:center;font-size:.88rem;flex-shrink:0;
  background:rgba(255,255,255,.04);transition:all var(--t)}
.sb-link:hover .sb-link-ico{background:rgba(255,255,255,.08)}
.sb-link.is-active .sb-link-ico{background:rgba(234,30,99,.2);color:var(--p-lt)}
.sb-link-txt{flex:1}
.sb-link-pip{width:5px;height:5px;border-radius:50%;background:var(--p);
  box-shadow:0 0 7px var(--p);flex-shrink:0}

/* أسفل الشريط */
.sb-foot{flex-shrink:0;padding:10px 12px;border-top:1px solid var(--sb-bdr);
  display:flex;flex-direction:column;gap:6px}

/* تبديل الثيم */
.sb-theme-row{display:flex;gap:3px;background:rgba(255,255,255,.04);
  border:1px solid var(--sb-bdr);border-radius:var(--r);padding:3px}
.sbt-btn{flex:1;display:flex;align-items:center;justify-content:center;
  padding:7px 4px;border-radius:var(--r-sm);background:transparent;border:none;
  color:rgba(255,255,255,.25);font-size:.88rem;transition:all var(--t)}
.sbt-btn:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.65)}
html.dark  .sb-theme-row .dark-btn,
html.light .sb-theme-row .light-btn{background:var(--p-10);color:var(--p-lt)}

/* تسجيل الخروج */
.sb-logout{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;border-radius:var(--r);
  background:rgba(234,30,99,.06);border:1px solid rgba(234,30,99,.13);
  color:rgba(255,255,255,.5);font-size:.82rem;font-weight:600;transition:all var(--t)}
.sb-logout:hover{background:var(--p);border-color:var(--p);color:#fff}
.sb-logout i{font-size:.88rem}

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar{height:var(--tb-h);background:var(--surf);border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;position:sticky;top:0;z-index:100;box-shadow:var(--sh-xs);gap:12px}
.tb-right,.tb-left{display:flex;align-items:center;gap:6px}
.tb-page-title{font-size:1rem;font-weight:700;color:var(--tx1);letter-spacing:-.015em}

.tb-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r);border:1px solid transparent;background:transparent;
  color:var(--tx2);font-size:.95rem;cursor:pointer;transition:all var(--t);position:relative}
.tb-btn:hover{background:var(--surf2);border-color:var(--bdr);color:var(--p)}

.sb-toggle{display:none}

.notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;
  border-radius:50%;background:var(--p);border:2px solid var(--surf)}

/* Rصيد */
.bal-wrap{position:relative}
.bal-btn{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;
  border-radius:var(--r-pill);background:var(--p-05);border:1px solid var(--p-10);
  color:var(--p);font-weight:700;font-size:.85rem;cursor:pointer;
  transition:all var(--t);white-space:nowrap;font-family:inherit}
.bal-btn:hover,.bal-btn.open{background:var(--p);color:#fff;border-color:var(--p);
  box-shadow:0 4px 14px rgba(234,30,99,.3)}
.bal-val{font-size:.85rem}
.bal-arr{font-size:.68rem;transition:transform var(--t)}
.bal-btn.open .bal-arr{transform:rotate(180deg)}

.currency-bg{display:none;position:fixed;inset:0;z-index:149}
.currency-bg.active{display:block}
.currency-list{position:absolute;top:calc(100% + 8px);left:0;background:var(--surf);
  border:1px solid var(--bdr);border-radius:var(--r-xl);box-shadow:var(--sh-xl);
  min-width:280px;z-index:150;overflow:hidden;opacity:0;pointer-events:none;
  transform:translateY(-8px) scale(.97);transform-origin:top left;transition:all var(--t)}
.currency-list.active{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.curr-header{padding:12px 15px;border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.83rem}
.curr-header button{background:none;border:none;cursor:pointer;color:var(--tx3);font-size:1rem;
  display:flex;align-items:center;transition:color var(--t)}
.curr-header button:hover{color:var(--p)}
.curr-grid-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:10px}
.currency-box{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 5px;
  border-radius:var(--r);background:var(--surf2);border:1px solid transparent;
  cursor:pointer;transition:all var(--t)}
.currency-box:hover{border-color:var(--p);background:var(--p-05)}
.currency-box b{font-size:.76rem;font-weight:700;color:var(--tx1)}
.currency-box small{font-size:.64rem;color:var(--tx3)}
.curency-pagination{display:flex;gap:4px;justify-content:center;padding:8px 10px;border-top:1px solid var(--bdr)}
.curency-pagination button{width:24px;height:24px;border-radius:50%;border:1px solid var(--bdr);
  background:var(--surf2);font-size:.7rem;cursor:pointer;color:var(--tx2);transition:all var(--t);font-family:inherit}
.curency-pagination button.active{background:var(--p);border-color:var(--p);color:#fff}
.curency-pagination.hidden{display:none}


/* اللغة */
.lang-wrap{position:relative}
.lang-bg{display:none;position:fixed;inset:0;z-index:199}
.lang-bg.active,.lang-bg.open{display:block}
.lang-drop{position:absolute;top:calc(100% + 7px);left:0;background:var(--surf);
  border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--sh-xl);
  min-width:150px;z-index:200;overflow:hidden;list-style:none;padding:5px;
  opacity:0;pointer-events:none;transform:translateY(-6px) scale(.97);
  transform-origin:top left;transition:all var(--t)}
.lang-drop.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.lang-item{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;
  border-radius:var(--r-sm);font-size:.83rem;color:var(--tx1);transition:all var(--t)}
.lang-item:hover{background:var(--surf2);color:var(--p)}
.lang-item.selected{color:var(--p);font-weight:600}
.lang-item code{font-size:.64rem;color:var(--tx3);background:var(--surf2);
  padding:1px 5px;border-radius:var(--r-xs);font-family:inherit}

/* الإعلانات */
.notif-wrap{position:relative}
.announce-panel{position:absolute;top:calc(100% + 8px);left:0;width:320px;
  background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);
  box-shadow:var(--sh-xl);z-index:150;overflow:hidden;opacity:0;pointer-events:none;
  transform:translateY(-8px) scale(.97);transform-origin:top left;transition:all var(--t)}
.announce-panel.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.announce-head{padding:12px 15px;border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.85rem}
.announce-head span{display:flex;align-items:center;gap:7px}
.announce-head i{color:var(--p)}
.announce-head button{background:none;border:none;cursor:pointer;color:var(--tx3);
  font-size:1rem;display:flex;align-items:center;transition:color var(--t)}
.announce-head button:hover{color:var(--p)}
.announce-body{max-height:290px;overflow-y:auto}
.announcements-item{padding:12px 15px;border-bottom:1px solid var(--bdr);transition:background var(--t)}
.announcements-item:last-child{border-bottom:none}
.announcements-item:hover{background:var(--surf2)}
.announcements-title{display:block;font-weight:600;font-size:.82rem;color:var(--tx1);margin-bottom:2px}
.announcements-content{display:block;font-size:.77rem;color:var(--tx2);line-height:1.5}
.announcements-bottom{display:flex;justify-content:space-between;margin-top:4px;font-size:.68rem;color:var(--tx3)}

/* ================================================================
   PAGE MAIN
   ================================================================ */
.page-main{padding:20px;flex:1}
.page-wrap{} /* wrapper داخل الصفحات */

/* ================================================================
   MOB NAV
   ================================================================ */
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surf);
  border-top:1px solid var(--bdr);z-index:90;padding:5px 0 10px;
  box-shadow:0 -3px 14px rgba(0,0,0,.07)}
.mob-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 6px;color:var(--tx3);font-size:.6rem;font-weight:500;
  transition:color var(--t);text-decoration:none}
.mob-item i{font-size:1.15rem}
.mob-item.is-active,.mob-item:hover{color:var(--p)}

/* voice */
.voice-animation{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:80;pointer-events:none;opacity:0;transition:opacity .3s}
.voice-animation.active{opacity:1}
.voice-animation-item{display:flex;flex-direction:column;align-items:center;gap:7px}
.voice-text{font-size:.84rem;color:var(--tx1);background:var(--surf);padding:5px 14px;
  border-radius:var(--r-pill);border:1px solid var(--bdr);box-shadow:var(--sh)}

/* ================================================================
   MODAL
   ================================================================ */
.fsk-modal,.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);
  z-index:500;display:flex;align-items:center;justify-content:center;padding:16px;transition:opacity var(--t)}
.fsk-modal.disable,.modal.disable{opacity:0;pointer-events:none}
.fsk-modal-box,.modal-content{background:var(--surf);border-radius:var(--r-2xl);
  border:1px solid var(--bdr);box-shadow:var(--sh-xl);width:100%;max-width:500px;
  overflow:hidden;animation:modal-up .22s var(--ease)}
@keyframes modal-up{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.fsk-modal-head,.modal-top{padding:15px 19px;border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:.95rem;font-weight:700;color:var(--tx1)}
.fsk-modal-head button,.modal-close{background:none;border:none;cursor:pointer;color:var(--tx3);
  font-size:1rem;display:flex;align-items:center;transition:color var(--t)}
.fsk-modal-head button:hover,.modal-close:hover{color:var(--p)}
.fsk-modal-body,.modal-center{padding:19px}
.fsk-modal-foot,.modal-bottom{padding:13px 19px;border-top:1px solid var(--bdr);
  display:flex;gap:8px;justify-content:flex-end}
.popupaciklama{font-size:.87rem;color:var(--tx2);line-height:1.7}
.popupimg{width:100%;border-radius:var(--r);margin-top:11px}

/* Toast */
#notification{position:fixed;bottom:-80px;left:50%;transform:translateX(-50%);z-index:9999}
.notify-toast{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;
  background:var(--fsk-900);color:#fff;border-radius:var(--r-pill);font-size:.84rem;
  font-weight:500;box-shadow:var(--sh-xl);white-space:nowrap}
@keyframes fade-in-up{from{opacity:0;bottom:20px}to{opacity:1;bottom:36px}}
@keyframes fade-out-down{from{opacity:1;bottom:36px}to{opacity:0;bottom:20px}}

/* ================================================================
   GRID + PAGE TITLE
   ================================================================ */
.container-fluid{padding:20px;flex:1}
.container{width:100%;max-width:560px;margin:0 auto;padding:0 18px}
.grid-container{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.col-span-12{grid-column:span 12} .col-span-7{grid-column:span 7}
.col-span-5{grid-column:span 5}  .col-span-6{grid-column:span 6} .col-span-4{grid-column:span 4}

.page-title{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.page-title>i{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r);background:var(--p-10);color:var(--p);font-size:.95rem;flex-shrink:0}
.page-title>span{font-size:1.18rem;font-weight:700;color:var(--tx1);letter-spacing:-.015em}

/* ================================================================
   CARDS / WELL
   ================================================================ */
.well,.user-well{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.well{padding:18px} .user-well{padding:20px}
.mb-12{margin-bottom:12px}

.user-well-title{display:flex;align-items:center;gap:9px;font-size:.88rem;font-weight:700;
  color:var(--tx1);margin-bottom:15px;padding-bottom:12px;border-bottom:1px solid var(--bdr)}
.user-well-title i{color:var(--p)}
.tfa-span{display:block;font-size:.82rem;color:var(--tx2);line-height:1.6;margin-bottom:13px}

/* ================================================================
   STATS ROW (neworder)
   ================================================================ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);
  padding:14px;display:flex;align-items:center;gap:11px;transition:all var(--t);overflow:hidden;position:relative}
.stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--p),var(--p-lt));opacity:0;transition:opacity var(--t)}
.stat-card:hover{box-shadow:var(--sh);transform:translateY(-1px)}
.stat-card:hover::after{opacity:1}
.sc-ico{width:34px;height:34px;border-radius:var(--r);background:var(--p-10);
  color:var(--p);font-size:.95rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-body{flex:1;min-width:0}
.sc-label{display:block;font-size:.72rem;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em}
.sc-val{display:flex;align-items:center;gap:6px;font-size:1.2rem;font-weight:700;color:var(--tx1);line-height:1.2;margin-top:2px;letter-spacing:-.02em}
.sc-badge{font-size:.62rem;font-weight:700;padding:1px 6px;background:var(--p-10);
  color:var(--p);border-radius:var(--r-pill);border:1px solid var(--p-20)}
.stat-card--bal{background:linear-gradient(135deg,rgba(234,30,99,.08),rgba(234,30,99,.03));border-color:rgba(234,30,99,.15)}
.sc-bal-val{color:var(--p)}
.bal-dot{width:7px;height:7px;border-radius:50%;background:#2ecc71;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.blink-dot{animation:blink 1.2s ease-in-out infinite}
.sc-add-btn{width:30px;height:30px;border-radius:50%;background:var(--p);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;
  transition:all var(--t);box-shadow:0 3px 10px rgba(234,30,99,.3)}
.sc-add-btn:hover{transform:scale(1.1);box-shadow:0 5px 16px rgba(234,30,99,.45)}

/* ================================================================
   TOP BAR SOCIAL FILTER (neworder)
   ================================================================ */
.no-top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.social-filter-strip{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.sfs-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;
  border-radius:var(--r-pill);background:var(--surf);border:1px solid var(--bdr);
  color:var(--tx2);font-size:.8rem;font-weight:500;cursor:pointer;transition:all var(--t)}
.sfs-btn:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}
.sfs-btn i{font-size:1rem}

/* ================================================================
   FORMS
   ================================================================ */
.form-group{margin-bottom:13px}
.control-label{display:block;font-size:.78rem;font-weight:600;color:var(--tx2);margin-bottom:5px;letter-spacing:.02em}
.chk-label{display:flex;align-items:flex-start;gap:7px;font-size:.82rem;color:var(--tx2);cursor:pointer}

.form-control{width:100%;padding:8px 13px;background:var(--surf2);border:1px solid var(--bdr);
  border-radius:var(--r);color:var(--tx1);font-size:.875rem;font-family:inherit;outline:none;
  transition:all var(--t);direction:rtl;appearance:none}
.form-control:focus{border-color:var(--p);background:var(--surf);box-shadow:0 0 0 3px rgba(234,30,99,.1)}
.form-control::placeholder{color:var(--tx3)}
textarea.form-control{min-height:90px;resize:vertical}
select.form-control{cursor:pointer}
.input-group{display:flex;gap:6px}
.input-group .form-control{flex:1}
.input-group-btn .btn-default{border-radius:var(--r)}
input[type="checkbox"]{accent-color:var(--p);width:14px;height:14px;cursor:pointer}
input[type="radio"]{accent-color:var(--p);cursor:pointer}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 18px;border-radius:var(--r);font-size:.86rem;font-weight:600;cursor:pointer;
  border:none;outline:none;transition:all var(--t);white-space:nowrap;text-decoration:none;
  letter-spacing:.01em;font-family:inherit}
.btn-main{background:var(--p);color:#fff;box-shadow:0 3px 12px rgba(234,30,99,.28)}
.btn-main:hover{background:var(--p-dk);color:#fff;box-shadow:0 5px 18px rgba(234,30,99,.38);transform:translateY(-1px)}
.btn-main:active{transform:translateY(0);box-shadow:none}
.btn-border{background:transparent;border:1px solid var(--bdr);color:var(--tx2)}
.btn-border:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}
.btn-default{background:var(--surf2);border:1px solid var(--bdr);color:var(--tx2)}
.btn-default:hover{border-color:var(--p);color:var(--p)}
.btn-apikey{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;
  border-radius:var(--r-pill);background:var(--p-10);border:1px solid var(--p-20);
  color:var(--p);font-size:.78rem;font-weight:600;cursor:pointer;transition:all var(--t);font-family:inherit}
.btn-apikey:hover{background:var(--p);color:#fff;border-color:var(--p)}
.btn-block{width:100%} .btn-min{padding:7px 16px} .btn-sm{padding:5px 12px;font-size:.8rem}
.btn-xs{padding:3px 9px;font-size:.72rem} .btn-lg{padding:11px 26px;font-size:.95rem}
.border-10{border-radius:10px!important} .settings-btn{width:34px;height:34px;
  border-radius:var(--r);border:1px solid var(--bdr);display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--tx2);transition:all var(--t);background:var(--surf)}
.settings-btn:hover{border-color:var(--p);color:var(--p)}

/* ================================================================
   ALERTS
   ================================================================ */
.alert{padding:12px 15px;border-radius:var(--r);font-size:.86rem;margin-bottom:13px;
  display:flex;align-items:flex-start;gap:9px;border:1px solid transparent;line-height:1.55}
.alert-success{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.22);color:#065f46}
.alert-danger {background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.22);color:#991b1b}
.alert-warning{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.22);color:#92400e}
.alert-info   {background:var(--p-05);border-color:var(--p-10);color:var(--p-dk)}
html.dark .alert-success{color:#6ee7b7} html.dark .alert-danger{color:#fca5a5} html.dark .alert-warning{color:#fcd34d}
.close{background:none;border:none;cursor:pointer;font-size:1rem;color:inherit;opacity:.45;
  margin-right:auto;line-height:1;transition:opacity var(--t)}
.close:hover{opacity:1}

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination{display:flex;align-items:center;gap:4px;list-style:none;padding:13px 0;flex-wrap:wrap}
.pagination li a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:var(--r);font-size:.82rem;font-weight:600;color:var(--tx2);
  background:var(--surf);border:1px solid var(--bdr);transition:all var(--t)}
.pagination li a:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}
.pagination li.active a{background:var(--p);border-color:var(--p);color:#fff;
  box-shadow:0 3px 10px rgba(234,30,99,.3)}

/* ================================================================
   NEWORDER FORM
   ================================================================ */
.svc-search-box{position:relative;margin-bottom:12px}
.svc-search-ico{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--tx3);font-size:.9rem;pointer-events:none}
.svc-search-inp{padding-right:36px}
.search-service-list{display:none}
.search-service-list.active{display:block}
.search-service-box{position:absolute;top:100%;right:0;left:0;background:var(--surf);
  border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--sh-xl);
  z-index:60;max-height:380px;overflow-y:auto;margin-top:4px}

.order-form-card{margin-bottom:0}
.dropdwon-box{position:relative;margin-bottom:4px}
.dropdown-select-box{display:flex;align-items:center;justify-content:space-between;
  padding:9px 13px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r);
  cursor:pointer;font-size:.86rem;color:var(--tx1);gap:8px;transition:all var(--t)}
.dropdown-select-box:hover{border-color:var(--bdr2)}
.dropdown-select-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:20px;
  display:flex;align-items:center;gap:7px}

.category-dropdown,.service-dropdown,.payment-dropdown{position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.95);background:var(--surf);border:1px solid var(--bdr);
  border-radius:var(--r-2xl);box-shadow:var(--sh-xl);width:500px;max-width:96vw;max-height:84vh;
  overflow:hidden;display:flex;flex-direction:column;z-index:300;
  opacity:0;pointer-events:none;transition:all var(--t)}
.category-dropdown.active,.service-dropdown.active,.payment-dropdown.active{
  opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1)}
.category-dropdown-header,.service-dropdown-header,.payment-dropdown-header{
  padding:14px 17px;border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.service-dropdown-title{font-size:.95rem;font-weight:700;color:var(--tx1)}
.category-dropdown-header button,.service-dropdown-header button,.payment-dropdown-header button{
  background:none;border:none;cursor:pointer;color:var(--tx3);font-size:1rem;
  display:flex;align-items:center;transition:color var(--t)}
.category-dropdown-header button:hover,.service-dropdown-header button:hover,.payment-dropdown-header button:hover{color:var(--p)}
.category-dropdown-box,.service-dropdown-box,.payment-dropdown-box{overflow-y:auto;flex:1;padding:7px}
.service-list{display:flex;flex-direction:column;gap:2px}

.category-dropdown-item{display:flex;align-items:center;gap:9px;padding:10px 12px;
  border-radius:var(--r);cursor:pointer;font-size:.86rem;color:var(--tx1);transition:all var(--t)}
.category-dropdown-item:hover{background:var(--surf2)}
.category-dropdown-item.active{background:var(--p-10);color:var(--p);font-weight:600}

.service-dropdown-item{padding:11px 13px;border-radius:var(--r);cursor:pointer;
  transition:all var(--t);border:1px solid transparent}
.service-dropdown-item:hover{background:var(--surf2)}
.service-dropdown-item.active{background:var(--p-10);border-color:rgba(234,30,99,.15)}

.service-dropdown-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:7px;gap:8px}
.service-dropdown-name{flex:1}
.s-name{display:flex;align-items:center;gap:6px;font-size:.86rem;font-weight:500;color:var(--tx1);line-height:1.4}
.service-dropdown-price{font-weight:700;color:var(--p);font-size:.9rem;white-space:nowrap;flex-shrink:0}
.service-dropdown-price small{font-weight:400;font-size:.65rem;color:var(--tx3);margin-right:2px}
.serivce-dropdown-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px}
.service-dropdown-info{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.service-dropdown-info-item{display:flex;align-items:center;gap:3px;font-size:.74rem;color:var(--tx2)}
.service-dropdown-info-item b{color:var(--tx1);font-weight:600}
.service-dropdown-info-item i{font-size:.7rem;color:var(--p)}
.service-dropdown-minmax{display:flex;align-items:center;gap:4px;font-size:.74rem;color:var(--tx2)}

.service-features{display:flex;flex-wrap:wrap;gap:3px}
.service-features-item{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:var(--r-pill);font-size:.67rem;font-weight:600;border:1px solid}
.service-features-item.guaranteed{background:rgba(16,185,129,.08);color:#059669;border-color:rgba(16,185,129,.22)}
.service-features-item.recommended{background:rgba(245,158,11,.08);color:#d97706;border-color:rgba(245,158,11,.22)}
.service-features-item.faster{background:rgba(59,130,246,.08);color:#2563eb;border-color:rgba(59,130,246,.22)}
.service-features-item.discounted{background:var(--p-10);color:var(--p);border-color:var(--p-20)}
.service-features-item.canceled{background:rgba(239,68,68,.08);color:#dc2626;border-color:rgba(239,68,68,.22)}
.service-features-item.timed{background:rgba(107,114,128,.08);color:#6b7280;border-color:rgba(107,114,128,.22)}
.service-features-item.slow{background:rgba(239,68,68,.08);color:#dc2626;border-color:rgba(239,68,68,.22)}
.service-features-item.newservice{background:var(--p-10);color:var(--p);border-color:var(--p-20)}

.category-dropdown-bg,.service-dropdown-bg,.payment-dropdown-bg{display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:299}
.category-dropdown-bg.active,.service-dropdown-bg.active,.payment-dropdown-bg.active{display:block}

.svc-detail-card{height:fit-content;position:sticky;top:calc(var(--tb-h) + 14px)}
.select-service-title{display:block;font-size:.67rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--tx3);margin:11px 0 6px}
.select-service-title:first-child{margin-top:0}
.select-service-name{display:block;font-size:.93rem;font-weight:700;color:var(--tx1);line-height:1.4;margin-bottom:10px}
.select-service-feature-item{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.select-id,.select-price,.select-avg,.select-minmax{display:flex;align-items:center;justify-content:space-between;
  padding:7px 11px;background:var(--surf2);border-radius:var(--r);font-size:.77rem;color:var(--tx2);border:1px solid var(--bdr)}
.select-id b,.select-price b,.select-avg b,.select-minmax b{color:var(--p);font-weight:700}
.select-service-description{font-size:.82rem;color:var(--tx2);line-height:1.7;margin-top:3px}

.master-select{display:none}
.neworder-form.masterBox .master-select{display:block}

.settings-content{position:fixed;top:0;right:-305px;width:290px;height:100vh;background:var(--surf);
  border-left:1px solid var(--bdr);z-index:400;padding:20px;overflow-y:auto;
  transition:right var(--t-lg);box-shadow:var(--sh-xl)}
.settings-content.active{right:0}
.settings-bg,.link-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);z-index:399}
.settings-bg.active,.link-bg.active{display:block}
.link-content{position:fixed;top:50%;right:50%;width:320px;max-height:80vh;overflow-y:auto;
  transform:translate(50%,-50%) scale(.95);background:var(--surf);border:1px solid var(--bdr);
  border-radius:var(--r-2xl);box-shadow:var(--sh-xl);z-index:400;padding:20px;
  opacity:0;pointer-events:none;transition:all var(--t)}
.link-content.active{opacity:1;pointer-events:all;transform:translate(50%,-50%) scale(1)}
.sc-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-weight:700;font-size:.95rem}
.sc-panel-head button{background:none;border:none;cursor:pointer;color:var(--tx3);font-size:1rem;display:flex;align-items:center;transition:color var(--t)}
.sc-panel-head button:hover{color:var(--p)}
.sc-panel-sec{font-size:.7rem;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.neworder-size{display:flex;gap:8px;margin-bottom:14px}
.size-select-box{flex:1;padding:11px;border:2px solid var(--bdr);border-radius:var(--r);cursor:pointer;text-align:center;transition:all var(--t)}
.size-select-box img{width:100%;border-radius:var(--r-sm);margin-bottom:5px}
.size-select-box span{font-size:.7rem;color:var(--tx2)}
.size-select-box.active,.size-select-box:hover{border-color:var(--p)}
.theme-type{display:flex;gap:7px}
.theme-select-btn{flex:1;padding:9px;border:2px solid var(--bdr);border-radius:var(--r);text-align:center;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--tx2);transition:all var(--t)}
.theme-select-btn.active,.theme-select-btn:hover{border-color:var(--p);color:var(--p)}

.link_action{display:flex;gap:8px;margin-bottom:12px}
.link_item{padding:10px 12px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r);cursor:pointer;position:relative;margin-bottom:6px;transition:border-color var(--t)}
.link_item:hover{border-color:var(--p)}
.link_item h6{font-size:.82rem;font-weight:600;color:var(--tx1);margin-bottom:2px}
.link_item p{font-size:.75rem;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link_item button{position:absolute;top:8px;left:8px;background:none;border:none;cursor:pointer;color:var(--tx3);font-size:.9rem;transition:color var(--t)}
.link_item button:hover{color:#dc2626}

.buy-btn{position:fixed;bottom:22px;left:22px;display:none;flex-direction:column;gap:8px;z-index:80}
.buy-btn:not(.hidden){display:flex}
.buy-btn-item{width:48px;height:48px;border-radius:50%;background:var(--p);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer;
  box-shadow:0 5px 18px rgba(234,30,99,.4);transition:all var(--t)}
.buy-btn-item:hover{transform:scale(1.08);box-shadow:0 7px 24px rgba(234,30,99,.55)}

/* تنبيه نجاح الطلب */
.order-alert-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(10px);z-index:500}
.order-alert-card{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-2xl);
  box-shadow:var(--sh-xl);padding:26px;width:400px;max-width:94vw;z-index:501;
  text-align:center;animation:modal-up .22s var(--ease)}
.order-alert-card .close,.oac-close{position:absolute;top:12px;left:12px;background:none;
  border:none;cursor:pointer;color:var(--tx3);font-size:1rem;transition:color var(--t)}
.oac-close:hover{color:var(--p)}
.oac-title{font-size:1rem;font-weight:700;color:var(--tx1);margin-bottom:14px}
.oac-rows{display:flex;flex-direction:column;gap:6px;text-align:right}
.oac-row{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;
  background:var(--surf2);border-radius:var(--r);font-size:.82rem}
.oac-row span{color:var(--tx2)} .oac-row b{color:var(--p);font-weight:700}
/* compat старых templates */
.order-alert-content{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(10px);z-index:500}
.order-alert-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-2xl);
  box-shadow:var(--sh-xl);padding:26px;width:400px;max-width:94vw;z-index:501;text-align:center;animation:modal-up .22s var(--ease)}
.order-alert-box.close,.order-alert-content.close{display:none}
.alert-close{position:absolute;top:12px;left:12px;background:none;border:none;cursor:pointer;color:var(--tx3);font-size:1rem;transition:color var(--t)}
.alert-close:hover{color:var(--p)}
.alert-box-top{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px}
.alert-box-top>span{font-size:1rem;font-weight:700;color:var(--tx1)}
.alert-box-bottom{display:flex;flex-direction:column;gap:5px;text-align:right}
.alert-box-bottom>span{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;background:var(--surf2);border-radius:var(--r);font-size:.81rem;color:var(--tx2)}
.alert-box-bottom b{color:var(--p);font-weight:700}

/* ================================================================
   ORDERS
   ================================================================ */
.services-top-box{display:flex;align-items:center;gap:10px;margin-bottom:15px;flex-wrap:wrap}
.services-top-box .form-control,.services-top-box select.form-control{width:auto;min-width:165px}
.services-top-box form{flex:1;min-width:200px}
.order-list{display:flex;flex-direction:column;gap:8px}
.order-box{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:14px 16px;transition:all var(--t)}
.order-box:hover{border-color:var(--bdr2);box-shadow:var(--sh)}
.order-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.order-top-left{display:flex;align-items:center;gap:7px}
.order-id{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;color:var(--p);
  padding:3px 9px;background:var(--p-05);border-radius:var(--r-pill);cursor:pointer;
  transition:all var(--t);border:1px solid var(--p-10)}
.order-id:hover{background:var(--p);color:#fff}
.re-order-btn,.report-order-btn{width:26px;height:26px;border-radius:50%;background:var(--surf2);
  border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;
  color:var(--tx3);font-size:.76rem;cursor:pointer;transition:all var(--t);text-decoration:none}
.re-order-btn:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}
.report-order-btn:hover{border-color:rgba(239,68,68,.3);color:#dc2626;background:rgba(239,68,68,.06)}
.o-tooltip{position:relative}
.order-tooltip{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);
  background:var(--fsk-900);color:#fff;padding:4px 9px;border-radius:var(--r);font-size:.68rem;
  white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--t);z-index:20}
.o-tooltip:hover .order-tooltip{opacity:1}
.order-status{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:600;background:var(--surf2);color:var(--tx2);border:1px solid var(--bdr)}
.order-status.completed{background:rgba(16,185,129,.08);color:#059669;border-color:rgba(16,185,129,.22)}
.order-status.partial  {background:rgba(245,158,11,.08);color:#d97706;border-color:rgba(245,158,11,.22)}
.order-status.canceled {background:rgba(239,68,68,.08);color:#dc2626;border-color:rgba(239,68,68,.22)}
.order-status.pending  {background:rgba(107,114,128,.08);color:#6b7280;border-color:rgba(107,114,128,.22)}
html.dark .order-status.completed{color:#6ee7b7} html.dark .order-status.partial{color:#fcd34d} html.dark .order-status.canceled{color:#fca5a5}
.order-status.progress{background:none;border:none;padding:0;min-width:140px}
.progress{position:relative;height:22px;background:var(--surf2);border-radius:var(--r-pill);overflow:hidden;width:160px;border:1px solid var(--bdr)}
.progress-value{height:100%;background:linear-gradient(90deg,var(--p),var(--p-lt));border-radius:var(--r-pill);transition:width .6s var(--ease);min-width:4px}
.progress>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.67rem;font-weight:700;color:var(--tx1)}
.order-center{display:flex;flex-direction:column;gap:4px}
.order-service{font-size:.85rem;font-weight:600;color:var(--tx1)}
.order-date,.order-remains{display:flex;align-items:center;gap:5px;font-size:.77rem;color:var(--tx2)}
.order-link{display:flex;align-items:center;gap:5px;font-size:.77rem;color:var(--p);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.order-link:hover{text-decoration:underline}
.order-center-bottom{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.order-center-bottom>span{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:var(--surf2);border-radius:var(--r);font-size:.75rem;color:var(--tx2);border:1px solid var(--bdr)}
.order-center-bottom b{color:var(--tx1);font-weight:600}
.order-btn{margin-top:10px;padding-top:10px;border-top:1px solid var(--bdr)}
.order-modal-bottom{display:flex;gap:7px}
.cancel-btn .btn-main{background:rgba(239,68,68,.09)!important;color:#dc2626!important;border:1px solid rgba(239,68,68,.22)!important;box-shadow:none!important}
.cancel-btn .btn-main:hover{background:#dc2626!important;color:#fff!important}

/* ================================================================
   SERVICES
   ================================================================ */
.services-category-box{padding:8px 12px;margin-bottom:3px;border-radius:var(--r);background:var(--surf2);border:1px solid var(--bdr);font-weight:700;font-size:.79rem;color:var(--tx2);display:flex;align-items:center;gap:7px}
.category-name{flex:1}
.services-list{display:flex;flex-direction:column;gap:2px;margin-bottom:7px}
.services-list-item{display:flex;align-items:flex-start;justify-content:space-between;gap:11px;padding:11px 12px;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);transition:all var(--t)}
.services-list-item:hover{border-color:var(--bdr2);background:var(--surf2)}
.services-list-left{flex:1;min-width:0}
.services-item-top{font-size:.85rem;font-weight:600;color:var(--tx1);margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.services-item-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.services-item-feature{display:inline-flex;align-items:center;gap:3px;font-size:.75rem;color:var(--tx2)}
.services-item-feature i{color:var(--p);font-size:.67rem}
.services-item-feature b{color:var(--tx1);font-weight:600}
.services-list-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0}
.services-item-price{font-size:.98rem;font-weight:700;color:var(--p)}
.favbox{cursor:pointer;color:var(--tx3);transition:color var(--t);font-size:.87rem}
.favbox:hover,.favbox.favorite-active{color:#f59e0b}

/* ================================================================
   ADDFUNDS
   ================================================================ */
.addfunds-page{} .addfunds-bg{position:relative}
.addfunds-bg-img{position:absolute;inset:0;height:180px;background:linear-gradient(135deg,var(--p-dk),var(--p));opacity:.05;pointer-events:none}

.af-card,.af-history{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);padding:20px;box-shadow:var(--sh-xs)}
.af-card-title{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:700;color:var(--tx1);margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--bdr)}
.af-card-title i{color:var(--p)}

.quick-amounts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}
.qa-btn{padding:5px 14px;border-radius:var(--r-pill);background:var(--surf2);border:1px solid var(--bdr);
  font-size:.82rem;font-weight:700;cursor:pointer;transition:all var(--t);color:var(--tx1);font-family:inherit}
.qa-btn:hover{background:var(--p-10);border-color:var(--p);color:var(--p)}

.af-hist-item{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--bdr);gap:10px}
.af-hist-item:last-child{border-bottom:none}
.af-hist-left{flex:1;min-width:0}
.af-hist-name{display:block;font-size:.85rem;font-weight:600;color:var(--tx1)}
.af-hist-meta{font-size:.72rem;color:var(--tx3);margin-top:1px}
.af-hist-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.af-hist-amt{font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:4px}
.af-hist-amt.is-pos{color:#059669} .af-hist-amt.is-neg{color:#dc2626}
.af-inv-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-sm);
  background:var(--surf2);border:1px solid var(--bdr);color:var(--tx2);font-size:.75rem;
  cursor:pointer;transition:all var(--t);font-family:inherit}
.af-inv-btn:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}
.af-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;
  color:var(--tx3);font-size:.85rem;gap:10px;text-align:center}
.af-empty i{font-size:2rem;color:var(--bdr)}

.payment-method{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:var(--r);cursor:pointer;border:1px solid transparent;transition:all var(--t);margin-bottom:2px}
.payment-method:hover{background:var(--surf2)}
.payment-method.active{background:var(--p-10);border-color:rgba(234,30,99,.15)}
.payment-name-container{display:flex;align-items:center;gap:9px}
.payment-text{font-size:.85rem;font-weight:600;color:var(--tx1);flex:1}
.payment-description{font-size:.75rem;color:var(--tx2);padding-right:34px}
.payment-type-badge{padding:2px 7px;border-radius:var(--r-pill);font-size:.65rem;font-weight:700}
.payment-type-badge.auto{background:rgba(16,185,129,.1);color:#059669}
.payment-type-badge.manual{background:rgba(245,158,11,.1);color:#d97706}
.most-used{font-size:.65rem;padding:2px 7px;background:var(--p-10);color:var(--p);border-radius:var(--r-pill);font-weight:700}
.payment-search-wrapper{position:relative;margin-bottom:8px;padding:0 7px}
.payment-search-wrapper i{position:absolute;right:21px;top:50%;transform:translateY(-50%);color:var(--tx3);font-size:.82rem}
.payment-search-input{width:100%;padding:8px 34px 8px 11px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r);font-size:.83rem;color:var(--tx1);outline:none;direction:rtl;transition:border-color var(--t);font-family:inherit}
.payment-search-input:focus{border-color:var(--p)}
.payment-categories-tabs{display:flex;gap:4px;padding:9px 9px 3px;flex-wrap:wrap;align-items:center}
.category-tab{padding:4px 11px;border-radius:var(--r-pill);border:1px solid var(--bdr);background:var(--surf2);font-size:.75rem;font-weight:600;color:var(--tx2);cursor:pointer;transition:all var(--t);display:inline-flex;align-items:center;gap:4px;font-family:inherit}
.category-tab.active,.category-tab:hover{background:var(--p-10);border-color:var(--p-20);color:var(--p)}
.category-content{display:none}.category-content.active{display:block}
#payment-dropdown-select{display:flex;align-items:center;gap:7px}
.selected-payment-name{font-size:.85rem;font-weight:600;color:var(--tx1)}

/* ================================================================
   TICKETS
   ================================================================ */
.support-channels{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.sc-channel{display:flex;align-items:center;gap:10px;padding:11px 14px;
  background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);
  flex:1;min-width:180px;transition:all var(--t);text-decoration:none}
.sc-channel:hover{border-color:var(--bdr2);box-shadow:var(--sh)}
.sc-channel i{font-size:1.4rem;color:var(--tx3);flex-shrink:0}
.sc-channel.is-ai i{color:#25d366}
.sc-channel.is-human i{color:#128c7e}
.sc-channel-info{flex:1;min-width:0}
.sc-channel-name{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--tx1)}
.sc-channel-sub{display:block;font-size:.72rem;color:var(--tx2);margin-top:1px}
.sc-ai-badge{font-size:.6rem;padding:1px 5px;background:linear-gradient(90deg,var(--p),var(--p-lt));
  color:#fff;border-radius:var(--r-pill);font-weight:700}

.ticket-form-card{padding:20px}

.ticket-subjects{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.ts-btn{flex:1;min-width:80px;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 12px;border-radius:var(--r);border:2px solid var(--bdr);cursor:pointer;
  font-size:.82rem;font-weight:600;color:var(--tx2);background:var(--surf);
  transition:all var(--t);font-family:inherit;position:relative}
.ts-btn:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}
.ts-btn.is-active{border-color:var(--p);background:var(--p-10);color:var(--p)}
.ts-ai{position:absolute;top:-6px;right:-6px;font-size:.58rem;font-weight:800;padding:1px 5px;
  background:linear-gradient(90deg,var(--p),var(--p-lt));color:#fff;border-radius:var(--r-pill)}

.quick-msgs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.qm-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r);
  border:1px solid var(--bdr);background:var(--surf2);color:var(--tx2);font-size:.82rem;
  font-weight:600;cursor:pointer;transition:all var(--t);font-family:inherit}
.qm-btn:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}
.qm-btn.active{border-color:var(--p);background:var(--p-10);color:var(--p)}

.ticket-list-title{display:block;font-size:.85rem;font-weight:700;color:var(--tx1);margin-bottom:10px}
.ticket-list{display:flex;flex-direction:column;gap:7px}
.ticket-card{display:block;background:var(--surf);border:1px solid var(--bdr);
  border-radius:var(--r-lg);padding:12px 14px;transition:all var(--t);text-decoration:none}
.ticket-card:hover{border-color:var(--bdr2);box-shadow:var(--sh)}
.ticket-card.is-new{border-color:var(--p);background:var(--p-05)}
.tc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.tc-meta{flex:1;min-width:0}
.tc-id{display:inline-block;font-size:.68rem;font-weight:700;color:var(--p);background:var(--p-10);
  padding:2px 7px;border-radius:var(--r-pill);margin-bottom:3px}
.tc-subject{display:block;font-size:.85rem;font-weight:600;color:var(--tx1)}
.tc-status{font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:var(--r-pill);
  background:var(--surf2);color:var(--tx2);border:1px solid var(--bdr);white-space:nowrap;flex-shrink:0}
.tc-status--open{background:rgba(16,185,129,.08);color:#059669;border-color:rgba(16,185,129,.22)}
.tc-status--closed,.tc-status--close{background:var(--surf2);color:var(--tx3)}
.tc-date{display:flex;align-items:center;gap:5px;font-size:.7rem;color:var(--tx3)}

/* legacy subject-item */
.subject-list{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.subject-item{flex:1;min-width:80px;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 12px;border-radius:var(--r);border:2px solid var(--bdr);cursor:pointer;
  font-size:.82rem;font-weight:600;color:var(--tx2);background:var(--surf);transition:all var(--t)}
.subject-item:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}
.subject-item.active{border-color:var(--p);background:var(--p-10);color:var(--p)}
.subject-item input[type="radio"]{display:none}
.ai-badge{font-size:.58rem;font-weight:800;padding:1px 5px;background:linear-gradient(90deg,var(--p),var(--p-lt));color:#fff;border-radius:var(--r-pill)}

/* ================================================================
   VIEWTICKET
   ================================================================ */
.ticket-view-page{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-xs)}
.ticket-view-top{padding:14px 18px;border-bottom:1px solid var(--bdr);background:var(--surf2);display:flex;align-items:center;gap:10px}
.ticket-view-id{font-size:.75rem;font-weight:700;color:var(--p);background:var(--p-10);padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--p-20)}
.ticket-view-subject{font-size:.87rem;font-weight:600;color:var(--tx1)}
.ticket-view-message-list{padding:16px;display:flex;flex-direction:column;gap:11px;max-height:500px;overflow-y:auto}
.message-right,.message-left{max-width:68%;display:flex;flex-direction:column;gap:3px}
.message-right{align-self:flex-start} .message-left{align-self:flex-end}
.ticket-image{width:100%;max-width:230px;border-radius:var(--r);cursor:zoom-in;border:1px solid var(--bdr)}
.ticket-image.enlarged{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)!important;max-width:92vw;max-height:92vh;width:auto;height:auto;z-index:9999;cursor:zoom-out;box-shadow:var(--sh-xl);border-radius:var(--r-lg)}
.message-text{display:block;padding:10px 14px;border-radius:var(--r-lg);font-size:.85rem;line-height:1.62}
.message-right .message-text{background:var(--surf2);border:1px solid var(--bdr);color:var(--tx1)}
.message-left  .message-text{background:var(--p);color:#fff}
.message-bottom{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--tx3)}
.message-author{display:flex;align-items:center;gap:4px;font-weight:600;color:var(--tx2)}
.message-author i{font-size:.67rem;color:var(--p)}
.ticket-view-bottom{padding:15px 18px;border-top:1px solid var(--bdr)}

/* ================================================================
   ACCOUNT
   ================================================================ */
.user-info-box{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px;box-shadow:var(--sh-xs)}
.user-box-info{display:flex;align-items:center;gap:13px}
.user-image{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--p-lt));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;flex-shrink:0;box-shadow:0 4px 14px rgba(234,30,99,.3)}
.userbox-username{display:flex;align-items:center;gap:6px;font-size:.93rem;font-weight:700;color:var(--tx1);margin-bottom:2px}
.userbox-username i{color:var(--p);font-size:.8rem}
.userbox-mail{font-size:.77rem;color:var(--tx2)}

/* ================================================================
   AUTH
   ================================================================ */
.auth-screen-container{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 80px);padding:20px}
.auth-screen{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-2xl);box-shadow:var(--sh-xl);padding:30px;width:100%;max-width:440px}
.auth-screen.signup{max-width:480px}
.auth-screen-title{display:flex;align-items:center;gap:9px;font-size:1.22rem;font-weight:700;color:var(--tx1);margin-bottom:20px;letter-spacing:-.015em}
.auth-screen-title i{color:var(--p)}
.auth-screen-form{display:flex;flex-direction:column;gap:2px}
.signup-alt-text{font-size:.81rem;color:var(--tx2);text-align:center;margin-top:9px}
.signup-alt-text a{color:var(--p);font-weight:600}

.sms-verify{display:flex;flex-direction:column;align-items:center;gap:13px;padding:30px;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-2xl);box-shadow:var(--sh-xl);width:100%;max-width:410px;text-align:center}
.verify-title{font-size:1.18rem;font-weight:700;color:var(--tx1);letter-spacing:-.015em}
.verify-small-text{font-size:.85rem;color:var(--tx2)}
.verify-form{width:100%}
.verify-input-box{display:flex;gap:7px;justify-content:center;margin-bottom:15px}
.verify-input{width:42px!important;height:50px!important;text-align:center;font-size:1.2rem!important;font-weight:700;padding:0!important;border-radius:var(--r)!important;-moz-appearance:textfield}
.verify-input::-webkit-outer-spin-button,.verify-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ================================================================
   AFFILIATES
   ================================================================ */
.affiliate-box{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);padding:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px;box-shadow:var(--sh-xs);position:relative;overflow:hidden}
.affiliate-box::before{content:'';position:absolute;top:0;right:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--p),var(--p-lt))}
.affiliate-left{flex:1}
.affiliate-title{font-size:1.08rem;font-weight:700;color:var(--tx1);margin-bottom:11px;letter-spacing:-.015em}
.affiliate-url{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r-pill);color:var(--p);font-size:.81rem;cursor:pointer;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all var(--t)}
.affiliate-url:hover{border-color:var(--p);background:var(--p-05)}
.affiliate-right{flex-shrink:0}
.unpaid-progress{display:flex;flex-direction:column;align-items:center;gap:8px}
.unpaid-progress svg{width:82px;height:82px;transform:rotate(-90deg)}
.affiliate-bar-bg{fill:none;stroke:var(--bdr);stroke-width:2.5}
.affiliate-bar{fill:none;stroke:var(--p);stroke-width:2.5;stroke-dasharray:100;stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.unpaid-amount-text{font-size:.28em;font-weight:700;fill:var(--tx1)}
.affiliate-stats-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.affiliate-stats-box{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xs);transition:all var(--t)}
.affiliate-stats-box:hover{border-color:var(--p-20);box-shadow:var(--sh)}
.affiliate-stats-top{padding:8px 12px;background:var(--surf2);border-bottom:1px solid var(--bdr);font-size:.68rem;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.05em}
.affiliate-stats-bottom{padding:12px;font-size:1.18rem;font-weight:700;color:var(--p)}
.affiliate-pay-list{}
.payout-box{display:flex;background:var(--surf);border:1px solid var(--bdr);margin-bottom:-1px}
.payout-box:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
.payout-box:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
.payout-item{flex:1;padding:9px 14px}
.payout-top{font-size:.68rem;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em}
.payout-bottom{font-size:.85rem;font-weight:600;color:var(--tx1);margin-top:2px}

/* ================================================================
   BLOG
   ================================================================ */
.blog-box{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-xs);display:flex;flex-direction:column;transition:all var(--t)}
.blog-box:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--bdr2)}
.blog-image img{width:100%;height:165px;object-fit:cover}
.blog-title{display:block;font-size:.93rem;font-weight:700;color:var(--tx1);padding:13px 13px 4px}
.blog-text{display:block;font-size:.81rem;color:var(--tx2);padding:0 13px 12px;flex:1;line-height:1.6}
.blog-box .btn{margin:0 13px 13px}
.blog-top{margin-bottom:18px}
.blog-view-image img{width:100%;max-height:370px;object-fit:cover;border-radius:var(--r-xl);margin-bottom:18px}
.blog-view-title{font-size:1.75rem;font-weight:700;color:var(--tx1);margin-bottom:18px;letter-spacing:-.02em;line-height:1.25}
.blog-content{font-size:.91rem;color:var(--tx2);line-height:1.8;margin-bottom:18px}

/* ================================================================
   CHILD PANEL
   ================================================================ */
.panel-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:13px}
.panel-content{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-xs);transition:all var(--t)}
.panel-content:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.panel-img-box{position:relative;height:155px;background:var(--surf2)}
.panel-img{width:100%;height:100%;object-fit:cover}
.loading-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--tx3);font-size:1.4rem}
.panel-content-top{padding:10px 13px;border-bottom:1px solid var(--bdr)}
.panel-date{display:flex;gap:5px;font-size:.75rem;color:var(--tx2);margin-bottom:2px}
.panel-date b{color:var(--tx1)}
.panel-content-bottom{padding:10px 13px;display:flex;align-items:center;justify-content:space-between}
.panel-title{font-weight:700;font-size:.87rem;color:var(--tx1)}
.child-order-form{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);padding:20px;box-shadow:var(--sh-xs)}
.child-name-servers{margin-bottom:13px}
.name-servers-top{font-size:.77rem;font-weight:600;color:var(--tx2);margin-bottom:6px}
.name-servers-list{display:flex;flex-direction:column;gap:4px}
.name-servers-item{display:flex;align-items:center;gap:7px;padding:7px 11px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r);font-size:.81rem;font-family:monospace;color:var(--tx1);cursor:pointer;transition:all var(--t)}
.name-servers-item:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}
.child-price-box{padding:10px 13px;background:var(--p-10);border:1px solid var(--p-20);border-radius:var(--r);color:var(--p);font-size:1rem;font-weight:700;text-align:center;margin-bottom:13px}

/* ================================================================
   UPDATES
   ================================================================ */
.update-list{display:flex;flex-direction:column;gap:7px}
.update-box{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:12px 15px;transition:all var(--t)}
.update-box:hover{border-color:var(--bdr2);box-shadow:var(--sh)}
.update-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.update-service-name{font-size:.85rem;font-weight:600;color:var(--tx1)}
.update-date{font-size:.71rem;color:var(--tx3);white-space:nowrap}
.update-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
.update-text{font-size:.81rem;color:var(--tx2)}
.update-icon{font-size:.87rem}

/* ================================================================
   واجهة الزوار
   ================================================================ */
.pub-hdr{background:var(--surf);border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:50;box-shadow:var(--sh-xs)}
.pub-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.pub-hdr .pub-wrap{display:flex;align-items:center;justify-content:space-between;padding-top:11px;padding-bottom:11px;gap:18px}
.pub-brand{display:flex;align-items:center;flex-shrink:0}
.pub-logo{height:27px;width:auto} .pub-brand-txt{font-size:1.05rem;font-weight:700;color:var(--tx1);letter-spacing:-.02em}
.pub-nav{display:flex;align-items:center;gap:3px;flex:1;justify-content:center}
.pub-nav-a{padding:5px 12px;border-radius:var(--r);font-size:.82rem;color:var(--tx2);transition:all var(--t)}
.pub-nav-a:hover{color:var(--p);background:var(--p-05)}
.pub-acts{display:flex;align-items:center;gap:5px;flex-shrink:0}
.pub-theme{display:flex;gap:3px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r);padding:3px}
.pub-signin{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--bdr);color:var(--tx2);font-size:.81rem;font-weight:600;transition:all var(--t)}
.pub-signin:hover{border-color:var(--p);color:var(--p)}
.pub-signup{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--r-pill);background:var(--p);color:#fff;font-size:.81rem;font-weight:700;transition:all var(--t);box-shadow:0 3px 10px rgba(234,30,99,.28)}
.pub-signup:hover{background:var(--p-dk);color:#fff}
.pub-ham{display:none}
.pub-menu{display:none;flex-direction:column;gap:3px;padding:11px 20px;border-top:1px solid var(--bdr);background:var(--surf)}
.pub-menu.open{display:flex}
.pub-m-a{padding:8px 12px;border-radius:var(--r);font-size:.85rem;color:var(--tx1);transition:all var(--t)}
.pub-m-a:hover{background:var(--p-10);color:var(--p)}
.pub-m-acts{display:flex;gap:7px;margin-top:7px}
.pub-main{min-height:calc(100vh - 60px)}
.pub-ftr{background:var(--surf);border-top:1px solid var(--bdr);padding:22px 0}
.pub-ftr-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;flex-wrap:wrap}
.pub-ftr-links{display:flex;flex-wrap:wrap;gap:3px;flex:1;justify-content:center}
.pub-ftr-links a{padding:4px 9px;border-radius:var(--r);font-size:.81rem;color:var(--tx2);transition:all var(--t)}
.pub-ftr-links a:hover{color:var(--p);background:var(--p-05)}
.pub-ftr-copy{text-align:center;font-size:.75rem;color:var(--tx3);padding-top:14px;border-top:1px solid var(--bdr)}

/* ================================================================
   MISC
   ================================================================ */
.term-and-faq{line-height:1.82;font-size:.87rem;color:var(--tx2)}
.noneAuth{padding-top:70px}
.hidden{display:none!important} .pb-0{padding-bottom:0!important} .m-0{margin:0!important}
.mb-0{margin-bottom:0!important} .mb-12{margin-bottom:12px} .mt10{margin-top:10px}

.api-container{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px}
.code-block-top{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--surf2);border-bottom:1px solid var(--bdr);font-size:.68rem;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em}
.code-block-right{padding:2px 7px;background:var(--p-10);color:var(--p);border-radius:var(--r-pill);font-size:.62rem}
.api-container pre{margin:0;padding:15px;font-size:.78rem;overflow-x:auto;direction:ltr;text-align:left;color:var(--fsk-code-1);line-height:1.7}
code{font-family:'Cascadia Code','Fira Code',monospace}

.select2-container--default .select2-selection--single{background:var(--surf2);border:1px solid var(--bdr)!important;border-radius:var(--r)!important;height:36px!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--tx1);line-height:34px!important;padding:0 13px!important}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:34px!important}
.select2-dropdown{background:var(--surf)!important;border:1px solid var(--bdr)!important;border-radius:var(--r-lg)!important;box-shadow:var(--sh-xl)!important}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:var(--p-10)!important;color:var(--p)!important}
.select2-container--default .select2-results__option[aria-selected=true]{background:var(--surf2)!important}
.select2-results__option{font-size:.85rem!important;font-family:inherit!important}

:root{--tp-green:#22c55e;--tp-red:#ef4444;--tp-blue:#3b82f6;--tp-yellow:#f59e0b}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.fa-spinner-third{animation:spin .8s linear infinite}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1200px){
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .affiliate-stats-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--sh-xl)}
  .sb-overlay.open{display:block}
  .app-main{margin-right:0}
  .sb-toggle{display:flex}
  .topbar .lang-wrap,.topbar .bal-wrap{display:none}
  .mob-nav{display:flex}
  .grid-container{grid-template-columns:1fr;gap:12px}
  .col-span-12,.col-span-7,.col-span-5,.col-span-6,.col-span-4{grid-column:span 1}
  #size-1,#size-2{grid-column:span 1}
  .affiliate-box{flex-direction:column}
  .svc-detail-card{position:static}
  .announce-panel{left:auto;right:0;width:300px}
}
@media(max-width:700px){
  .pub-nav{display:none} .pub-ham{display:flex}
  .pub-acts .pub-signin,.pub-acts .pub-signup,.pub-acts .pub-theme{display:none}
  .social-filter-strip .sfs-btn span{display:none}
  .social-filter-strip .sfs-btn{padding:7px 10px}
}
@media(max-width:600px){
  .page-main{padding:13px} .container-fluid{padding:13px} .topbar{padding:0 13px}
  .stats-row{grid-template-columns:1fr 1fr;gap:9px}
  .affiliate-stats-list{grid-template-columns:1fr 1fr}
  .category-dropdown,.service-dropdown,.payment-dropdown{width:98vw;max-height:88vh}
  .support-channels{flex-direction:column}
}

/* ================================================================
   SIGNIN / SIGNUP — نموذج تسجيل الدخول والإنشاء
   ================================================================ */
.auth-screen-container {
  display: flex; justify-content: center; align-items: center;
  min-height: calc(100vh - 80px); padding: 20px;
}
.auth-screen-container.signup { align-items: flex-start; padding-top: 40px; padding-bottom: 40px; }

.auth-screen {
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r-2xl); box-shadow: var(--sh-xl);
  padding: 32px; width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 12px;
}
.auth-screen.signup { max-width: 480px; }

.auth-screen-title {
  font-size: 1.3rem; font-weight: 700; color: var(--tx1);
  display: flex; align-items: center; gap: 10px; letter-spacing: -.015em;
}
.auth-screen-title i { color: var(--p); }

.auth-screen-form { display: flex; flex-direction: column; gap: 10px; }
.auth-screen-form .btn { justify-content: center; }

.signup-alt-text {
  display: flex; width: 100%; justify-content: center;
  gap: 5px; font-size: .82rem; color: var(--tx2);
}
.signup-alt-text a { color: var(--p); font-weight: 600; }
.checkbox a { color: var(--p); }

/* ── صفحة تأكيد البريد ── */
.confirm-mail-btn { display: flex; gap: 10px; }

/* ── نموذج دخول الصفحة الرئيسية ── */
.noneAuth .auth-screen-container { min-height: auto; }
.pub-main .auth-screen-container { min-height: calc(100vh - 120px); }

/* ── login box في الصفحة الرئيسية ── */
.login-box { background: var(--surf); padding: 18px 0; }
.login-box-form .g-recaptcha { display: flex; }
.login-box-content {
  padding: 0; gap: 10px; display: flex;
  align-items: center; flex-wrap: wrap;
  background: var(--surf2); padding: 12px;
  border-radius: var(--r-lg); border: 1px solid var(--bdr);
}
.login-form-control {
  height: 44px; width: 100%; border: none;
  background: var(--surf); padding: 0 14px; color: var(--tx1);
  border-radius: var(--r); outline: none; font-family: inherit;
  font-size: .875rem; transition: all var(--t);
  border: 1px solid var(--bdr);
}
.login-form-control:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(234,30,99,.1); }
.login-form-control::placeholder { color: var(--tx3); }
.login-btn-group { display: flex; gap: 8px; width: 100%; height: 44px; }
.login-remember, .login-resetpassword {
  min-width: 44px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surf); border-radius: var(--r);
  border: 1px solid var(--bdr); cursor: pointer; transition: all var(--t); color: var(--tx2);
}
.login-remember:hover, .login-resetpassword:hover { border-color: var(--p); color: var(--p); }
.login-signin-btn { flex: 1; }
.login-btn { height: 100%; }
.captchaBox { display: flex; justify-content: center; align-items: center; }
.captcha-loading { display: flex; font-size: 26px; justify-content: center; align-items: center; }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.captcha-loading i { animation: spin 1s linear infinite; }

/* ================================================================
   HOME PAGE — الصفحة الرئيسية
   ================================================================ */
.home-section {
  padding-top: 120px; overflow: hidden; position: relative;
  min-height: 80vh; display: flex; flex-direction: column;
}
.particle-animation {
  position: absolute; height: 100%; width: 100%;
  margin-top: -120px; z-index: -1;
}
.home-section-content {
  display: flex; justify-content: center; padding-bottom: 70px;
}
.home-section-content::before {
  content: ''; width: 280px; height: 230px; position: absolute;
  background: var(--p); filter: blur(240px); margin-top: -230px; z-index: -1;
}
.home-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--tx1);
  font-weight: 700; margin: 0; line-height: 1.3; letter-spacing: -.02em;
}
.home-left-list {
  display: flex; flex-direction: column; gap: 24px;
  position: relative; align-items: center; text-align: center; max-width: 640px;
}
.home-left-list p.small { font-size: .9rem; color: var(--tx2); line-height: 1.7; }

/* badge الصفحة الرئيسية */
.badge {
  margin: 0; background: var(--surf); width: fit-content;
  padding: 5px 14px 5px 5px; border-radius: var(--r-pill);
  color: var(--tx1); border: 1px solid var(--bdr);
  font-size: .85rem; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.badge i {
  width: 28px; height: 28px; background: var(--p); border-radius: var(--r-pill);
  display: flex; justify-content: center; align-items: center; color: #fff; font-size: .82rem;
}

/* join row */
.home-join {
  display: flex; align-items: center; gap: 14px;
  background: var(--surf2); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 10px 14px;
  flex-wrap: wrap; justify-content: center;
}
.home-join .icon {
  width: 34px; height: 34px; background: var(--p-10);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--p); font-size: 1rem; flex-shrink: 0;
}
.home-join .text { font-size: .85rem; color: var(--tx2); }
.home-join .text strong { color: var(--tx1); font-weight: 700; }

/* features bar */
.home-hero--features {
  background: var(--surf2); border-top: 1px solid var(--bdr);
  padding: 14px 0;
}
.home-hero--features_items {
  display: flex; align-items: center; justify-content: center;
  gap: 30px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.home-hero--features_item {
  display: flex; align-items: center; gap: 9px;
  font-size: .85rem; font-weight: 600; color: var(--tx2);
}
.home-hero--features_item .item-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--p-10); display: flex; align-items: center;
  justify-content: center; color: var(--p); font-size: .88rem;
}

/* site-gradient button */
.site-gradient {
  background: linear-gradient(135deg, var(--p), var(--p-lt));
  color: #fff; display: flex; align-items: center; gap: 12px;
  border-radius: var(--r-xl); transition: all var(--t);
}
.site-gradient:hover { opacity: .88; color: #fff; transform: translateY(-1px); }

/* social slider */
.social-slider {
  display: flex; padding: 0 20px; padding-top: 20px;
  gap: 16px; height: 65px; overflow: hidden; position: relative;
  background: var(--surf); padding-bottom: 40px;
}
.social-slider::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, var(--surf) 0, transparent 18%, transparent 82%, var(--surf) 100%);
}
.social-item {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surf2); border-radius: var(--r-lg);
  min-width: 155px; padding: 10px 18px;
  font-size: .88rem; z-index: 1; white-space: nowrap;
  position: relative; color: var(--tx2); border: 1px solid var(--bdr);
}
.social-item i { font-size: 1.3rem; }
.absolute-icon { position: absolute; right: 16px; filter: blur(18px); }

/* ألوان السوشيال */
.fab.fa-instagram,.fi-brands-instagram {
  background: linear-gradient(180deg, #8000ff 0%, #ffb800 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.fab.fa-facebook,.fi-brands-facebook { color: #12a1f4; }
.fab.fa-youtube,.fi-brands-youtube   { color: #e60606; }
.fab.fa-twitter,.fi-brands-twitter-alt-circle { color: #1b9ff1; }
.fab.fa-telegram,.fi-brands-telegram { color: #1b95cf; }
.fab.fa-tiktok,.fi-brands-tiktok     { color: var(--tx1); text-shadow: 1px 1px #f72e4d, -1px -1px #09f3f3; }
.fab.fa-snapchat,.fi-brands-snapchat { color: #f9f606; }
.fab.fa-whatsapp,.fi-brands-whatsapp { color: #25d366; }
.fab.fa-spotify  { color: #1fc158; }
.fab.fa-discord  { color: #5865f6; }
.fab.fa-twitch   { color: #6842ac; }
.fab.fa-pinterest{ color: #ee0226; }

/* feature list */
.feature-list {
  padding: 100px 0;
  background-color: var(--surf2);
  background-image: url('https://cdn.fsksoft.com/img/masterv3/world-map-light.svg');
  background-size: cover; background-position: center; position: relative;
}
html.dark .feature-list {
  background-image: url('https://cdn.fsksoft.com/img/masterv3/world-map-dark.svg');
}
.feature-list::before {
  content: ''; width: 100%; height: 100%; position: absolute;
  top: 0; background: linear-gradient(180deg, var(--surf2) 0, transparent 100%);
}
.feature-list::after {
  content: ''; width: 100%; height: 100%; position: absolute;
  bottom: 0; background: linear-gradient(0deg, var(--surf2) 0, transparent 100%);
}
.feature-box {
  background: var(--surf); padding: 22px; border-radius: var(--r-xl);
  border: 1px solid var(--bdr); color: var(--tx1); z-index: 1;
  transition: all var(--t); box-shadow: var(--sh-xs);
}
.feature-box:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.feature-box.ai-feature { background: linear-gradient(135deg, var(--p-05), var(--surf)); border-color: var(--p-20); }
.feature-icon { font-size: 1.6rem; color: var(--p); margin-bottom: 11px; }
.feature-title { font-size: .95rem; font-weight: 700; color: var(--tx1); margin-bottom: 7px; }
.feature-text  { font-size: .83rem; color: var(--tx2); line-height: 1.7; }

.main-page-title {
  display: flex; justify-content: center; font-size: 1.3rem; font-weight: 700;
  flex-direction: column; align-items: center;
  margin-bottom: 50px; color: var(--tx1); gap: 8px; z-index: 1; position: relative;
}
.main-page-title i {
  width: 38px; height: 38px; display: flex; padding: 5px;
  background: var(--p); border-radius: var(--r-pill);
  align-items: center; justify-content: center;
  font-size: 1rem; color: #fff; box-shadow: 0 0 80px 4px rgba(234,30,99,.35);
}

/* section divider */
.section-divider {
  display: flex; align-items: center; gap: 16px; padding: 0 40px;
}
.divider-line { flex: 1; height: 1px; background: var(--bdr); }
.divider-icon { font-size: 1.1rem; color: var(--p); }

/* section header */
.section-header { text-align: center; margin-bottom: 50px; }
.sh-wrapper {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; background: var(--p-10);
  border: 1px solid var(--p-20); border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 700; color: var(--p); margin-bottom: 14px;
}
.sh-wrapper .icon { font-size: .9rem; }
.section-header h2 {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700;
  color: var(--tx1); letter-spacing: -.015em;
}
.section-header h2 span { color: var(--p); }

/* steps */
#home-works { padding: 80px 0; }
.step-wrapper { }
.step-card { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r-2xl); overflow: hidden; display: flex; flex-wrap: wrap; }
.step-start { flex: 1; min-width: 280px; position: relative; overflow: hidden; min-height: 380px; }
.step-start-bg { position: absolute; inset: 0; z-index: 0; opacity: .18; }
.step-start-bg svg { width: 100%; height: 100%; }
.step-swiper { position: relative; z-index: 1; height: 380px; }
.step-item {
  background: var(--surf2); border: 1px solid var(--bdr); border-radius: var(--r-xl);
  padding: 20px; margin: 20px; text-align: center; height: auto;
}
.step-item .icon-box {
  width: 48px; height: 48px; background: var(--p-10); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--p); font-size: 1.2rem; margin: 0 auto 12px;
}
.step-item .title { font-size: .95rem; font-weight: 700; color: var(--tx1); margin-bottom: 7px; }
.step-item .text { font-size: .82rem; color: var(--tx2); line-height: 1.6; margin-bottom: 14px; }
.step-item .skeleton-wrapper { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.skeleton { height: 10px; background: var(--bdr); border-radius: var(--r-pill); }
.skeleton:last-child { width: 70%; }
.box-wrapper { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.step-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r); padding: 9px 12px;
}
.step-box .box-icon { font-size: 1.2rem; }
.step-box .box-content .title { font-size: .8rem; font-weight: 600; color: var(--tx1); }
.step-box .box-content .text  { font-size: .72rem; color: var(--tx2); }

.step-end { flex: 1; min-width: 280px; padding: 36px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.text-header { display: flex; align-items: center; gap: 7px; }
.text-header .icon { font-size: .95rem; color: var(--p); }
.text-header .text { font-size: .78rem; font-weight: 700; color: var(--tx2); text-transform: uppercase; letter-spacing: .06em; }
.step-end h3 { font-size: 1.4rem; font-weight: 700; color: var(--tx1); line-height: 1.35; }
.step-end h3 span { color: var(--p); }
.step-end p { font-size: .85rem; color: var(--tx2); line-height: 1.75; }

/* payments */
#home-payments { padding: 80px 0; background: var(--surf2); }
.payment-gateways { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.payment-item {
  background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r-lg);
  padding: 14px 22px; display: flex; align-items: center; justify-content: center;
  transition: all var(--t); min-width: 110px;
}
.payment-item:hover { border-color: var(--p-20); box-shadow: var(--sh); }
.payment-logo { height: 32px; width: auto; object-fit: contain; }

/* faq */
.faq-box { background: var(--surf2); padding: 80px 0; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r-lg); overflow: hidden; }
.faq-header {
  padding: 16px 18px; cursor: pointer; color: var(--tx1);
  font-size: .9rem; font-weight: 600;
  display: flex; align-items: center; gap: 10px; transition: background var(--t);
}
.faq-header:hover { background: var(--surf2); }
.faq-item.active .faq-header { background: var(--p-05); color: var(--p); }
.faq-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surf2); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: var(--tx2); flex-shrink: 0; transition: all var(--t);
}
.faq-item.active .faq-icon { background: var(--p); color: #fff; }
.faq-content { padding: 14px 18px; font-size: .86rem; color: var(--tx2); line-height: 1.75; display: none; border-top: 1px solid var(--bdr); }
.faq-item.active .faq-content { display: block; }

/* ================================================================
   LEVEL SYSTEM في الشريط الجانبي
   ================================================================ */
.sb-level-card {
  margin: 0 16px 10px;
  padding: 11px 13px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--sb-bdr);
  flex-shrink: 0;
}
.sb-level-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.sb-level-name {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.6);
}
.sb-level-name i { font-size: .82rem; color: var(--p-lt); }
.sb-level-discount {
  font-size: .68rem; font-weight: 700; padding: 2px 7px;
  background: var(--p-10); color: var(--p-lt); border-radius: var(--r-pill);
  border: 1px solid rgba(234,30,99,.2);
}
.sb-level-bar-wrap {
  height: 4px; background: rgba(255,255,255,.07); border-radius: var(--r-pill); overflow: hidden;
}
.sb-level-bar {
  height: 100%; background: linear-gradient(90deg, var(--p), var(--p-lt));
  border-radius: var(--r-pill); transition: width 1s var(--ease);
}
.sb-level-meta {
  display: flex; justify-content: space-between;
  margin-top: 5px; font-size: .64rem; color: rgba(255,255,255,.25);
}

/* ================================================================
   TICKETS — حقل طريقة الدفع
   ================================================================ */
.ticket-pay-methods {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;
}
.ticket-pay-btn {
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--bdr); background: var(--surf2);
  color: var(--tx2); font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: all var(--t); font-family: inherit;
}
.ticket-pay-btn:hover { border-color: var(--p); color: var(--p); background: var(--p-05); }
.ticket-pay-btn.active { border-color: var(--p); background: var(--p-10); color: var(--p); }

/* ================================================================
   2FA + VERIFY
   ================================================================ */
.sms-verify {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 30px; background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r-2xl); box-shadow: var(--sh-xl);
  width: 100%; max-width: 410px; text-align: center;
}
.verify-icon { width: 88px; height: 88px; }
.verify-title { font-size: 1.18rem; font-weight: 700; color: var(--tx1); letter-spacing: -.015em; }
.verify-small-text { font-size: .85rem; color: var(--tx2); }
.verify-form { width: 100%; }
.verify-input-box { display: flex; gap: 7px; justify-content: center; margin-bottom: 14px; }
.verify-input {
  width: 42px !important; height: 50px !important;
  text-align: center; font-size: 1.2rem !important; font-weight: 700;
  padding: 0 !important; border-radius: var(--r) !important; -moz-appearance: textfield;
}
.verify-input::-webkit-outer-spin-button, .verify-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ================================================================
   ACCOUNT: شريط المستوى في الحساب
   ================================================================ */
.level-progress-card {
  background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r-xl);
  padding: 18px; box-shadow: var(--sh-xs); margin-bottom: 14px; position: relative; overflow: hidden;
}
.level-progress-card::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--p), var(--p-lt));
}
.lpc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.lpc-title { font-size: .88rem; font-weight: 700; color: var(--tx1); display: flex; align-items: center; gap: 8px; }
.lpc-title i { color: var(--p); }
.lpc-discount { padding: 3px 10px; background: var(--p-10); color: var(--p); border-radius: var(--r-pill); font-size: .75rem; font-weight: 700; border: 1px solid var(--p-20); }
.lpc-bar-wrap { height: 8px; background: var(--surf2); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 8px; border: 1px solid var(--bdr); }
.lpc-bar { height: 100%; background: linear-gradient(90deg, var(--p), var(--p-lt)); border-radius: var(--r-pill); transition: width 1.2s var(--ease); }
.lpc-meta { display: flex; justify-content: space-between; font-size: .75rem; color: var(--tx2); }
.lpc-meta span { display: flex; align-items: center; gap: 4px; }
.lpc-meta b { color: var(--tx1); font-weight: 600; }

/* ================================================================
   RESPONSIVE إضافي
   ================================================================ */
@media (max-width: 900px) {
  .home-section { padding-top: 80px; }
  .home-hero--features_items { gap: 16px; }
  .step-start { min-height: 280px; }
  .step-end { padding: 22px; }
  .login-box-content { flex-direction: column; }
  .login-btn-group { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .home-title { font-size: 1.5rem; }
  .home-join { flex-direction: column; }
  .payment-gateways { gap: 8px; }
  .payment-item { padding: 10px 14px; min-width: 90px; }
  .faq-header { font-size: .84rem; }
}

/* signin: see sp-* section below */
/* ================================================================
   SIDEBAR — وضع فاتح صحيح
   ================================================================ */


/* ================================================================
   ORDERS — شبكة الطلبات
   ================================================================ */
.orders-top-bar{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;
}
.orders-filters{ min-width:160px }
.orders-status-sel{ width:auto }
.orders-search-form{ flex:1;min-width:200px }
.orders-select-toggle{
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.orders-select-toggle.active{ background:var(--p-10);border-color:var(--p);color:var(--p) }

.orders-select-bar{
  display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--p-05);border:1px solid var(--p-10);border-radius:var(--r-lg);
  flex-wrap:wrap;animation:modal-up .2s var(--ease);
}
.osb-count{ font-size:.82rem;font-weight:700;color:var(--p) }

/* شبكة الطلبات */
.order-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:12px;margin-bottom:16px;
}

.order-card{
  background:var(--surf);border:1px solid var(--bdr);
  border-radius:var(--r-lg);padding:14px;
  transition:all var(--t);position:relative;overflow:hidden;
}
.order-card:hover{ border-color:var(--bdr2);box-shadow:var(--sh) }
.order-card.is-selected{
  border-color:var(--p);background:var(--p-05);
  box-shadow:0 0 0 2px rgba(234,30,99,.15);
}

/* checkbox */
.oc-check{position:absolute;top:10px;left:10px;z-index:2}
.oc-check input[type="checkbox"]{
  width:18px;height:18px;accent-color:var(--p);cursor:pointer;
}
.oc-check.hidden{display:none}

/* رأس البطاقة */
.oc-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;gap:8px;flex-wrap:wrap;
}
.oc-head-left{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* أزرار الأيقونة */
.oc-icon-btn{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;cursor:pointer;transition:all var(--t);text-decoration:none;
  background:var(--surf2);border:1px solid var(--bdr);color:var(--tx3);
}
.oc-icon-btn:hover{ background:var(--surf2);border-color:var(--bdr2) }
.oc-repeat:hover{ border-color:var(--p);color:var(--p);background:var(--p-05) }
.oc-report:hover{ border-color:rgba(239,68,68,.4);color:#dc2626;background:rgba(239,68,68,.07) }

/* tooltip مصحح */
.o-tooltip{position:relative}
.order-tooltip{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--fsk-900);color:#fff;
  padding:4px 10px;border-radius:var(--r-sm);font-size:.72rem;
  white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity var(--t);z-index:20;
  /* إصلاح اللون في الوضع الفاتح */
}
html.light .order-tooltip{ background:#1a1a1d;color:#fff }
.o-tooltip:hover .order-tooltip{ opacity:1 }

/* جسم البطاقة */
.oc-body{ display:flex;flex-direction:column;gap:6px }
.oc-service-name{
  font-size:.85rem;font-weight:600;color:var(--tx1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.oc-meta{display:flex;flex-wrap:wrap;gap:10px}
.oc-meta>span{display:flex;align-items:center;gap:5px;font-size:.77rem;color:var(--tx2)}
.oc-link{
  display:flex;align-items:center;gap:6px;font-size:.77rem;color:var(--p);
  cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:5px 9px;background:var(--p-05);border-radius:var(--r-sm);
  border:1px solid var(--p-10);transition:all var(--t);
}
.oc-link:hover{ background:var(--p-10) }
.oc-link span{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.oc-stats{
  display:flex;flex-wrap:wrap;gap:6px;
}
.oc-stats>span{
  font-size:.74rem;color:var(--tx2);
  padding:3px 8px;background:var(--surf2);border-radius:var(--r-sm);border:1px solid var(--bdr);
}
.oc-stats b{ color:var(--tx1);font-weight:600;margin-left:3px }

/* أزرار الإجراءات */
.oc-actions{margin-top:10px;padding-top:10px;border-top:1px solid var(--bdr);display:flex;flex-wrap:wrap;gap:7px}
.oc-cancel-btn{
  background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.22);
  color:#dc2626;font-size:.8rem;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r);
  cursor:pointer;transition:all var(--t);
}
.oc-cancel-btn:hover{ background:#dc2626;color:#fff;border-color:#dc2626 }
.oc-refill-time,.oc-cancel-reason{
  display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--tx2);
  padding:5px 10px;background:var(--surf2);border-radius:var(--r);border:1px solid var(--bdr);
}
.oc-refill-time i{ color:var(--p) }
.oc-cancel-reason i{ color:#f59e0b }

/* حالات الطلب الجديدة */
.order-status.processing{ background:rgba(59,130,246,.08);color:#2563eb;border-color:rgba(59,130,246,.22) }
html.dark .order-status.processing{ color:#93c5fd }

@media(max-width:700px){
  .order-grid{ grid-template-columns:1fr }
}

/* ================================================================
   SERVICE DETAIL CARD — أيقونات المميزات
   ================================================================ */
.service-features{ display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 }
.service-features-item{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:.74rem;font-weight:600;border:1px solid;
  margin-top:0;
}
.service-features-item i{ font-size:.8rem }
/* ضمان وجود مسافة أسفل الخصائص */
.select-service-feature-item{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px;
}
.serivce-dropdown-bottom{ margin-top:8px }
.service-features{ margin-top:6px }

/* ================================================================
   SOCIAL FILTER STRIP — نسخة محسّنة
   ================================================================ */
.sfs-wrap{
  display:flex;flex-wrap:wrap;gap:5px;
  padding:10px 0;border-bottom:1px solid var(--bdr);
  margin-bottom:12px;
}
.sfs-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--surf2);border:1px solid var(--bdr);
  color:var(--tx2);font-size:.8rem;font-weight:500;
  cursor:pointer;transition:all var(--t);
  font-family:inherit;
}
.sfs-btn:hover,.sfs-btn.active{
  border-color:var(--p);color:var(--p);background:var(--p-05);
}
.sfs-btn.sfs-all i{ color:var(--p) }
.sfs-ig{ color:#e1306c } .sfs-fb{ color:#1877f2 } .sfs-yt{ color:#ff0000 }
.sfs-tt{ color:var(--tx1) } .sfs-tw{ color:#1d9bf0 } .sfs-tg{ color:#229ed9 }
.sfs-sc{ color:#fffc00;filter:saturate(0.6) } .sfs-th{ color:var(--tx1) }
.sfs-wa{ color:#25d366 }

/* ================================================================
   TICKETS-UPLOADER — رافع الملفات
   ================================================================ */
.tickets-uploader,.tv-uploader{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;border:2px dashed var(--bdr);border-radius:var(--r-lg);
  color:var(--tx2);font-size:.84rem;cursor:pointer;
  transition:all var(--t);text-align:center;
  background:var(--surf2);
}
.tickets-uploader:hover,.tv-uploader:hover{
  border-color:var(--p);color:var(--p);background:var(--p-05);
}
.tickets-uploader::before,.tv-uploader::before{
  content:'';display:inline-block;
  width:28px;height:28px;
  background:var(--p-10);border-radius:50%;
  /* أيقونة ورقية */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EA1E63'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
  background-size:16px;background-repeat:no-repeat;background-position:center;
  flex-shrink:0;
}

/* ================================================================
   VIEWTICKET — إجراءات البطاقة
   ================================================================ */
.tv-actions-grid{
  display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;
}
.tv-action{
  flex:1;min-width:90px;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 12px;border:2px solid var(--bdr);border-radius:var(--r);
  cursor:pointer;font-size:.83rem;font-weight:600;color:var(--tx2);
  background:var(--surf2);transition:all var(--t);
}
.tv-action:hover{ border-color:var(--p);color:var(--p);background:var(--p-05) }
.tv-action.active{ border-color:var(--p);background:var(--p-10);color:var(--p) }
.tv-action i{ font-size:.95rem }

/* مؤلف الدعم */
.support-author{ color:var(--tx1) !important }
.support-check{ color:var(--p) !important;font-size:.78rem }

/* كود التحقق */
.verification-code{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r);
  padding:4px 9px;font-size:.82rem;font-weight:700;letter-spacing:.08em;
  color:var(--tx1);cursor:pointer;position:relative;
  transition:all var(--t);user-select:none;
}
.verification-code:hover{ border-color:var(--p);background:var(--p-05);color:var(--p) }
.verification-code.copied{ animation:pulse-vc .5s var(--ease) }
.verification-code::after{
  content:"تم النسخ";position:absolute;bottom:calc(100% + 5px);left:50%;
  transform:translateX(-50%);background:var(--p);color:#fff;
  font-size:.68rem;padding:3px 9px;border-radius:var(--r-pill);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;
}
.verification-code.copied::after{ opacity:1 }
@keyframes pulse-vc{
  0%{box-shadow:0 0 0 0 rgba(234,30,99,.4)}
  60%{box-shadow:0 0 0 8px rgba(234,30,99,.1)}
  100%{box-shadow:0 0 0 0 rgba(234,30,99,0)}
}

/* ================================================================
   LEVEL BADGE في الشريط الجانبي — نسبة الخصم بشكل واضح
   ================================================================ */
.sb-level-card{ position:relative }
.sb-level-discount-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--p),var(--p-lt));
  color:#fff;font-size:.7rem;font-weight:800;
  position:absolute;top:-8px;left:12px;
  box-shadow:0 3px 10px rgba(234,30,99,.4);
}

/* ================================================================
   NEWORDER — تحسين بحث الخدمات
   ================================================================ */
.svc-search-box{
  position:relative;margin-bottom:0;
  background:var(--surf);border:1px solid var(--bdr);
  border-radius:var(--r-lg);padding:10px;box-shadow:var(--sh-xs);
}
.svc-search-inp{
  padding-right:38px !important;
  font-size:.88rem;
  background:var(--surf2) !important;
}
.svc-search-inp:focus{
  background:var(--surf) !important;
}
/* نتائج البحث محسّنة */
.search-service-box{
  border-radius:var(--r-xl);padding:5px;
}
.service-dropdown-item{
  border-radius:var(--r-lg) !important;
}

/* ================================================================
   MOBILE RESPONSIVE — إصلاح شامل للهاتف
   ================================================================ */

/* ─── متغيرات الهاتف ─── */
:root {
  --mob-nav-h: 64px;
}

/* تأكيد عدم overflow أفقي */
html, body { overflow-x: hidden; width: 100%; }
* { -webkit-tap-highlight-color: transparent; }

/* تحسين اللمس على iOS */
input, button, select, textarea, a {
  -webkit-touch-callout: none;
}
button { -webkit-appearance: none; }

/* ─── شريط الموبايل السفلي ─── */
.mob-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--mob-nav-h);
  background: var(--surf);
  border-top: 1px solid var(--bdr);
  z-index: 90;
  /* سافة للـ safe area في iPhone X+ */
  padding-bottom: env(safe-area-inset-bottom, 10px);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(var(--surf-rgb, 255,255,255),.92);
}
html.dark .mob-nav {
  background: rgba(20,22,29,.92);
}

.mob-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; padding: 6px 4px 4px;
  color: var(--tx3); font-size: .6rem; font-weight: 500;
  text-decoration: none; transition: color var(--t);
  min-width: 0;
}
.mob-item i { font-size: 1.2rem; line-height: 1; }
.mob-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 58px; }
.mob-item.is-active { color: var(--p); }
.mob-item:hover   { color: var(--p); }

/* ─── padding المحتوى عند ظهور mob-nav ─── */
@media (max-width: 900px) {
  .mob-nav    { display: flex; }
  .page-main  { padding-bottom: calc(var(--mob-nav-h) + env(safe-area-inset-bottom, 10px) + 8px) !important; }
  .container-fluid { padding-bottom: calc(var(--mob-nav-h) + env(safe-area-inset-bottom, 10px) + 8px) !important; }

  /* Topbar */
  .topbar { padding: 0 12px; height: 54px; position: sticky; top: 0; }
  .tb-page-title { font-size: .9rem; }

  /* الشبكة */
  .grid-container { grid-template-columns: 1fr; gap: 12px; }
  .col-span-12, .col-span-7, .col-span-5,
  .col-span-6, .col-span-4 { grid-column: span 1; }
  #size-1, #size-2 { grid-column: span 1; }

  /* stats */
  .stats-row      { grid-template-columns: repeat(2,1fr); gap: 9px; }
  .stat-card      { padding: 13px 12px; }
  .sc-val         { font-size: 1.1rem; }

  /* order grid */
  .order-grid     { grid-template-columns: 1fr; }

  /* signin */
  .signin-left    { display: none; }
  .signin-right   { width: 100%; padding: 24px 16px; }

  /* dropdowns */
  .category-dropdown, .service-dropdown, .payment-dropdown {
    width: 98vw; max-width: 98vw; max-height: 88vh;
    border-radius: var(--r-xl);
  }

  /* announce panel */
  .announce-panel { right: 8px; left: 8px; width: auto; }

  /* currency */
  .currency-list { min-width: 94vw; left: 50%; transform: translate(-50%, 0) !important; }
  .currency-list.active { transform: translate(-50%, 0) scale(1) !important; }

  /* Sidebar close button */
  .sb-toggle { display: flex !important; }

  /* affiliate */
  .affiliate-box { flex-direction: column; }
  .select-service-detail-box { position: static; }
}

@media (max-width: 600px) {
  :root { --tb-h: 54px; }

  .topbar   { padding: 0 10px; gap: 8px; }
  .page-main{ padding: 12px 12px calc(var(--mob-nav-h) + env(safe-area-inset-bottom,10px) + 8px) !important; }
  .container-fluid { padding: 12px 12px calc(var(--mob-nav-h) + env(safe-area-inset-bottom,10px) + 8px) !important; }

  /* stats 2 cols */
  .stats-row     { grid-template-columns: 1fr 1fr; }
  .affiliate-stats-list { grid-template-columns: 1fr 1fr; }

  /* Page title */
  .page-title > span { font-size: 1rem; }

  /* order card */
  .oc-head { flex-wrap: wrap; gap: 6px; }
  .oc-stats { gap: 5px; }
  .oc-stats > span { font-size: .7rem; padding: 2px 7px; }

  /* buttons */
  .btn { font-size: .84rem; padding: 8px 14px; }
  .btn-lg { font-size: .9rem; padding: 10px 20px; }

  /* forms */
  .form-control { font-size: .875rem; }

  /* social filter */
  .sfs-wrap { gap: 4px; }
  .sfs-btn  { padding: 5px 10px; font-size: .75rem; }
  .sfs-btn span { display: none; } /* أيقونة فقط على الشاشات الصغيرة */

  /* neworder */
  .svc-search-inp { font-size: .85rem; }
  .service-dropdown-price { font-size: .82rem; }
  .s-name { font-size: .82rem; }

  /* tickets */
  .support-channels { flex-direction: column; }
  .ticket-subjects, .ts-btn { font-size: .8rem; padding: 8px 10px; }

  /* signin */
  .signin-card-head { margin-bottom: 16px; }
  .signin-title { font-size: 1.2rem; }
  .signin-input { padding: 11px 38px 11px 36px; }

  /* addfunds */
  .quick-amounts, .qa-btn { gap: 5px; }
  .qa-btn { padding: 5px 11px; font-size: .8rem; }

  /* modal */
  .fsk-modal-box, .modal-content { border-radius: var(--r-xl); }
  .modal-center, .fsk-modal-body { padding: 14px; }

  /* pagination */
  .pagination li a { width: 28px; height: 28px; font-size: .78rem; }
}

@media (max-width: 400px) {
  .stats-row     { grid-template-columns: 1fr; }
  .sc-val        { font-size: 1rem; }
  .signin-options { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tv-actions-grid { flex-direction: column; }
}

/* ─── تحسينات iPhone Safe Area ─── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mob-nav {
    padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
    height: calc(var(--mob-nav-h) + env(safe-area-inset-bottom));
  }
}

/* ================================================================
   SUGGESTIONS PAGE
   ================================================================ */
.sug-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 28px 20px 20px; margin-bottom: 18px;
}
.sug-hero-ico {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--p-10); color: var(--p); font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 13px; box-shadow: 0 4px 16px rgba(234,30,99,.2);
}
.sug-hero-title { font-size: 1.3rem; font-weight: 800; color: var(--tx1); margin-bottom: 7px; }
.sug-hero-sub   { font-size: .88rem; color: var(--tx2); max-width: 440px; line-height: 1.7; }

.sug-card { max-width: 640px; margin: 0 auto; }

.sug-types {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 10px;
}
.sug-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 8px; border-radius: var(--r-lg);
  background: var(--surf2); border: 2px solid var(--bdr);
  color: var(--tx2); font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: all var(--t); font-family: inherit;
}
.sug-type-btn i  { font-size: 1.15rem; }
.sug-type-btn:hover { border-color: var(--p); color: var(--p); background: var(--p-05); }
.sug-type-btn.active{ border-color: var(--p); background: var(--p-10); color: var(--p); }

.sug-char-bar {
  height: 3px; background: var(--bdr); border-radius: var(--r-pill);
  margin-top: 7px; overflow: hidden;
}
.sug-char-fill {
  height: 100%; width: 0; background: var(--p);
  border-radius: var(--r-pill); transition: width .2s, background .2s;
}
.sug-char-count { text-align: left; margin-top: 3px; }
.sug-char-count span { font-size: .72rem; color: var(--tx2); }

@media (max-width: 600px) {
  .sug-types { grid-template-columns: repeat(2,1fr); }
}

/* ================================================================
   DASHBOARD
   ================================================================ */

/* بانر الترحيب */
.dash-welcome-banner {
  background: linear-gradient(135deg, var(--p-dk), var(--p));
  border-radius: var(--r-xl); padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; color: #fff; box-shadow: 0 8px 28px rgba(234,30,99,.3);
}
.dwb-left  { display: flex; align-items: center; gap: 14px; }
.dwb-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.25); backdrop-filter: blur(4px);
  color: #fff; font-size: 1.3rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.4);
}
.dwb-name { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: 3px; }
.dwb-level{ font-size: .82rem; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 6px; }
.dwb-level b { color: #fff; font-weight: 700; }

.dwb-global-stats {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,.15); border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.2); overflow: hidden;
}
.dwb-gstat { padding: 12px 20px; text-align: center; }
.dwb-gstat-div { width: 1px; height: 40px; background: rgba(255,255,255,.2); }
.dwb-gnum { display: block; font-size: 1.25rem; font-weight: 800; color: #fff; }
.dwb-glbl { display: block; font-size: .7rem; color: rgba(255,255,255,.75); margin-top: 1px; }

/* معلومات الحساب - grid */
.dash-info-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
}
.dig-item {
  background: var(--surf2); border: 1px solid var(--bdr);
  border-radius: var(--r-lg); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.dig-label { font-size: .73rem; color: var(--tx2); display: flex; align-items: center; gap: 5px; }
.dig-val   { font-size: .88rem; font-weight: 700; color: var(--tx1); }
.dig-val em { font-style: normal; color: var(--tx3); font-weight: 400; }
.dig-alert { color: var(--p); }

/* إحصائيات الإيداع */
.deposit-stats-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 9px;
}
.dst-item {
  background: var(--surf2); border: 1px solid var(--bdr);
  border-radius: var(--r-lg); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.dst-item-full { grid-column: span 2; background: var(--p-05); border-color: var(--p-10); }
.dst-label { font-size: .72rem; color: var(--tx2); }
.dst-val   { font-size: .95rem; font-weight: 700; color: var(--tx1); }
.dst-val-total { color: var(--p); font-size: 1.1rem; }

/* إحصائيات المنصة */
.dash-platform-stats { display: flex; flex-direction: column; gap: 9px; }
.dps-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; background: var(--surf2);
  border: 1px solid var(--bdr); border-radius: var(--r-lg);
  transition: all var(--t);
}
.dps-item:hover { border-color: var(--p-20); }
.dps-item > i { font-size: 1.1rem; color: var(--p); flex-shrink: 0; }
.dps-item > div { display: flex; flex-direction: column; gap: 1px; }
.dps-item b    { font-size: .9rem; font-weight: 700; color: var(--tx1); }
.dps-item span { font-size: .75rem; color: var(--tx2); }

/* top services */
.top-services-list { display: flex; flex-direction: column; gap: 7px; }
.tsvc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--surf2);
  border: 1px solid var(--bdr); border-radius: var(--r-lg);
}
.tsvc-rank {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--p-10); color: var(--p); font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tsvc-name  { flex: 1; font-size: .83rem; font-weight: 600; color: var(--tx1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsvc-count { font-size: .75rem; font-weight: 700; color: var(--p); flex-shrink: 0; }

/* روابط سريعة */
.dash-quick-links { display: flex; flex-wrap: wrap; gap: 7px; }
.dql-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surf2); border: 1px solid var(--bdr);
  color: var(--tx2); font-size: .8rem; font-weight: 600;
  transition: all var(--t); text-decoration: none;
}
.dql-btn:hover { border-color: var(--p); color: var(--p); background: var(--p-05); }

/* spin */
@keyframes dash-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.dash-spin { animation: dash-spin .8s linear infinite; display: inline-block; }

/* level card */
.dash-level-card { }
.dlc-top { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.dlc-name { font-size: .95rem; font-weight: 700; color: var(--tx1); }
.dlc-pct  { font-size: .8rem; font-weight: 700; color: var(--p); margin: 0 auto; }

/* Responsive dashboard */
@media (max-width: 900px) {
  .dwb-global-stats { flex-wrap: wrap; }
  .dash-info-grid   { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .dash-welcome-banner { flex-direction: column; align-items: flex-start; }
  .dwb-global-stats    { width: 100%; }
  .dwb-gstat           { flex: 1; padding: 10px 12px; }
  .dash-info-grid      { grid-template-columns: 1fr 1fr; }
  .deposit-stats-grid  { grid-template-columns: 1fr; }
  .dst-item-full       { grid-column: span 1; }
}

/* ================================================================
   ACCOUNT PAGE — تحسين
   ================================================================ */
.acc-hero {
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); padding: 22px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--sh-xs); flex-wrap: wrap;
}
.acc-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--p), var(--p-lt));
  color: #fff; font-size: 1.6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(234,30,99,.35);
}
.acc-hero-info { flex: 1; min-width: 0; }
.acc-username {
  font-size: 1.2rem; font-weight: 800; color: var(--tx1);
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.acc-check { color: var(--p); font-size: .95rem; }
.acc-email { font-size: .82rem; color: var(--tx2); display: block; margin-bottom: 10px; }
.acc-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.acc-badge-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: .77rem; font-weight: 600; border: 1px solid;
}
.acc-badge-lvl  { background: var(--p-10); color: var(--p); border-color: var(--p-20); }
.acc-badge-disc { background: rgba(16,185,129,.1); color: #059669; border-color: rgba(16,185,129,.22); }
.acc-badge-bal  { background: var(--surf2); color: var(--tx1); border-color: var(--bdr); }

/* level tiles */
.levels-grid {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 10px;
}
.level-tile {
  background: var(--surf2); border: 1px solid var(--bdr);
  border-radius: var(--r-lg); padding: 14px;
  transition: all var(--t); position: relative;
}
.level-tile.is-current {
  border-color: var(--p); background: var(--p-05);
  box-shadow: 0 0 0 2px rgba(234,30,99,.15);
}
.level-tile.is-passed {
  opacity: .65;
}
.level-tile:hover { border-color: var(--bdr2); box-shadow: var(--sh); }

.lt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.lt-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surf); border: 1px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; color: var(--tx2); flex-shrink: 0;
}
.lt-icon-active { background: var(--p-10); border-color: var(--p-20); color: var(--p); }
.lt-title { font-size: .8rem; font-weight: 700; color: var(--tx1); }
.lt-disc  { font-size: .68rem; font-weight: 800; padding: 1px 6px; background: var(--p); color: #fff; border-radius: var(--r-pill); }
.lt-current-badge {
  position: absolute; top: -8px; right: 8px;
  font-size: .62rem; font-weight: 800; padding: 2px 7px;
  background: var(--p); color: #fff; border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(234,30,99,.35);
}
.lt-passed-badge {
  margin-right: auto; color: #059669; font-size: .9rem;
}
.lt-range { font-size: .7rem; color: var(--tx3); margin-bottom: 9px; }
.lt-features {
  list-style: none; display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px;
}
.lt-features li {
  display: flex; align-items: center; gap: 6px;
  font-size: .74rem; color: var(--tx2);
}
.lt-features li i { color: var(--p); font-size: .7rem; flex-shrink: 0; }
.lt-progress-wrap { margin-top: 10px; }
.lt-prog-meta {
  display: flex; justify-content: space-between;
  font-size: .68rem; color: var(--tx2); margin-top: 5px;
}

@media (max-width: 1200px) { .levels-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 900px)  { .levels-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px)  { .levels-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 400px)  { .levels-grid { grid-template-columns: 1fr; } }

/* ================================================================
   THANK YOU BANNER — شكراً لعملائنا
   ================================================================ */
.thanks-banner {
  background: linear-gradient(135deg, #0f0f17 0%, #1a1226 50%, #0f1520 100%);
  border-radius: var(--r-2xl); padding: 36px 28px;
  text-align: center; position: relative; overflow: hidden;
  margin-bottom: 20px; border: 1px solid rgba(234,30,99,.2);
}
.thanks-banner::before {
  content: ''; position: absolute; top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 320px;
  background: var(--p); filter: blur(120px); opacity: .22;
  border-radius: 50%;
}
.thanks-banner-inner { position: relative; z-index: 1; }
.thanks-crown { font-size: 2.2rem; color: #fbbf24; margin-bottom: 12px; }
.thanks-title {
  font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 800;
  color: #fff; letter-spacing: -.02em; margin-bottom: 9px;
}
.thanks-title span { color: var(--p-lt); }
.thanks-sub { font-size: .9rem; color: rgba(255,255,255,.65); line-height: 1.7; max-width: 480px; margin: 0 auto 20px; }
.thanks-numbers {
  display: flex; justify-content: center; gap: 0;
  background: rgba(255,255,255,.08); border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.12); overflow: hidden;
  width: fit-content; margin: 0 auto;
}
.tn-item { padding: 14px 28px; text-align: center; }
.tn-div  { width: 1px; background: rgba(255,255,255,.12); }
.tn-num  { display: block; font-size: 1.6rem; font-weight: 900; color: #fff; letter-spacing: -.03em; }
.tn-lbl  { display: block; font-size: .72rem; color: rgba(255,255,255,.55); margin-top: 2px; }

@media (max-width: 600px) {
  .thanks-banner   { padding: 24px 16px; }
  .thanks-numbers  { width: 100%; }
  .tn-item         { flex: 1; padding: 12px 10px; }
  .tn-num          { font-size: 1.25rem; }
}

/* ================================================================
   SPLASH SCREEN + SHIMMER + TRANSITIONS
   ================================================================ */
#splash-screen{
  position:fixed;inset:0;z-index:99999;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:opacity .5s ease,visibility .5s ease;
}
#splash-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash-logo{height:36px;width:auto;animation:splashPulse 1.2s ease infinite alternate}
.splash-name{font-size:1.3rem;font-weight:800;color:var(--tx1);letter-spacing:-.03em}
.splash-dots{display:flex;gap:7px;margin-top:8px}
.splash-dot{width:8px;height:8px;border-radius:50%;background:var(--p)}
.splash-dot:nth-child(1){animation:splashBounce 1s ease -.2s infinite}
.splash-dot:nth-child(2){animation:splashBounce 1s ease -.1s infinite}
.splash-dot:nth-child(3){animation:splashBounce 1s ease 0s  infinite}
@keyframes splashPulse{from{opacity:.5}to{opacity:1}}
@keyframes splashBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}}

/* Shimmer skeleton */
.shimmer{position:relative;overflow:hidden;background:var(--surf2);border-radius:var(--r)}
.shimmer::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);
  animation:shimmerMove 1.4s ease infinite;
}
html.dark .shimmer::after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.07) 50%,transparent 100%)}
@keyframes shimmerMove{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ================================================================
   SIDEBAR — لون يتغير مع الثيم
   ================================================================ */
/* الوضع الفاتح: sidebar يصبح أفتح */
html.light {
  --sb-bg: #1a1d2a;
  --sb-bdr: rgba(255,255,255,.08);
  --sb-tx:  rgba(255,255,255,.6);
  --sb-hov: rgba(255,255,255,.07);
}
html.light .sidebar{ background:var(--sb-bg) !important; }
html.light .sb-link  { color:var(--sb-tx); }
html.light .sb-link:hover{ background:var(--sb-hov); color:rgba(255,255,255,.85); }
html.light .sb-link.is-active{ background:rgba(234,30,99,.18); color:#fff; }
html.light .sb-uname { color:#fff; }
html.light .sb-ubal  { color:rgba(255,255,255,.5); }
html.light .sb-logout{ color:rgba(255,255,255,.55); }
html.light .sb-logout:hover{ background:var(--p); color:#fff; }
html.light .sb-brand-text{ color:#fff; }
html.light .sbt-btn  { color:rgba(255,255,255,.3); }
html.light .sbt-btn:hover{ color:rgba(255,255,255,.75); }
html.light .sb-foot  { border-color:rgba(255,255,255,.07); }
html.light .sb-head .sb-brand{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); }
html.light .sb-level-card  { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); }
html.light .sb-theme-row   { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); }

/* الوضع الداكن: sidebar أكثر عمقاً */
html.dark {
  --sb-bg: #0c0e14;
  --sb-bdr: rgba(255,255,255,.05);
  --sb-tx:  rgba(255,255,255,.45);
  --sb-hov: rgba(255,255,255,.05);
}

/* ================================================================
   SIDEBAR BADGE للتذاكر
   ================================================================ */
.sb-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);
  background:var(--p);color:#fff;
  font-size:.62rem;font-weight:800;
  margin-right:auto;
  animation:badgePop .3s var(--ease);
}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}

/* ================================================================
   BALANCE HIDE BUTTON
   ================================================================ */
.sb-bal-eye{
  background:none;border:none;padding:2px 4px;cursor:pointer;
  color:rgba(255,255,255,.28);font-size:.72rem;
  transition:color var(--t);margin-right:2px;
}
.sb-bal-eye:hover{ color:rgba(255,255,255,.7); }
.bal-hide-btn{
  padding:4px 7px !important;font-size:.85rem;
}
.bal-hide-btn:hover{ color:var(--p) !important; }

/* ================================================================
   MOBILE — زر العملة + إصلاحات شاملة
   ================================================================ */
.mob-currency-btn{ display:none; }
@media(max-width:900px){
  .mob-currency-btn{ display:flex; }
  .topbar .bal-wrap{ display:none !important; }
}

/* ================================================================
   SOCIAL FILTER SCROLL
   ================================================================ */
.sfs-scroll{
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding-bottom:4px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.sfs-scroll::-webkit-scrollbar{ display:none; }
.sfs-scroll .sfs-btn{
  flex-shrink:0;
  scroll-snap-align:start;
}

/* ================================================================
   SERVICE DETAIL CARD — تصميم جديد احترافي
   ================================================================ */
.svc-detail-card{
  position:sticky;top:74px;
  border-radius:var(--r-xl) !important;
  padding:0 !important;
  overflow:hidden;
}

.sdc-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--bdr);
}
.sdc-title-wrap{ flex:1;min-width:0; }
.sdc-label{
  display:block;font-size:.68rem;font-weight:600;
  color:var(--tx3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;
}
.sdc-svc-name{
  font-size:.9rem;font-weight:700;color:var(--tx1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* زر المفضلة */
.sdc-fav-btn{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--surf2);border:1px solid var(--bdr);
  color:var(--tx3);font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--t);
}
.sdc-fav-btn:hover{ border-color:var(--p);color:var(--p);background:var(--p-05); }
.sdc-fav-btn.is-fav{ background:var(--p);border-color:var(--p);color:#fff; }
.sdc-fav-btn.is-fav:hover{ background:var(--p-dk); }

/* شبكة المعلومات */
.sdc-info-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--bdr);border-bottom:1px solid var(--bdr);
}
.sdc-info-item{
  display:flex;align-items:center;gap:9px;
  padding:11px 13px;background:var(--surf);
  transition:background var(--t);
}
.sdc-info-item:hover{ background:var(--surf2); }
.sdc-ico{
  width:28px;height:28px;border-radius:var(--r-sm);
  background:var(--surf2);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;color:var(--tx2);flex-shrink:0;
}
.sdc-ico-price{ background:var(--p-05);border-color:var(--p-10);color:var(--p) }
.sdc-ico-min  { color:#3b82f6 }
.sdc-ico-max  { color:#8b5cf6 }

/* ألوان وقت التنفيذ */
.avg-fast     { color:#16a34a !important }
.avg-medium   { color:#ca8a04 !important }
.avg-slow     { color:#ea580c !important }
.avg-veryslow { color:#dc2626 !important }
.avg-unknown  { color:var(--tx2) !important }
.sdc-ico-avg-fast     { background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.2);color:#16a34a }
.sdc-ico-avg-medium   { background:rgba(202,138,4,.08);border-color:rgba(202,138,4,.2);color:#ca8a04 }
.sdc-ico-avg-slow     { background:rgba(234,88,12,.08);border-color:rgba(234,88,12,.2);color:#ea580c }
.sdc-ico-avg-veryslow { background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.2);color:#dc2626 }

.sdc-item-body{ display:flex;flex-direction:column;gap:1px;min-width:0 }
.sdc-item-label{ font-size:.68rem;color:var(--tx3);white-space:nowrap }
.sdc-item-val  { font-size:.82rem;font-weight:700;color:var(--tx1) }
.sdc-price-val { color:var(--p) }

/* المميزات */
.sdc-feats{ padding:10px 13px;border-bottom:1px solid var(--bdr) }

/* الوصف */
.sdc-desc-wrap{ padding:12px 13px }
.sdc-desc{
  font-size:.78rem;color:var(--tx2);line-height:1.7;
  margin-top:6px;
}

/* ================================================================
   CHECKBOX احترافي
   ================================================================ */
input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:5px;
  border:2px solid var(--bdr2);background:var(--surf2);
  cursor:pointer;transition:all var(--t);
  position:relative;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
input[type="checkbox"]:checked{
  background:var(--p);border-color:var(--p);
  box-shadow:0 2px 8px rgba(234,30,99,.3);
}
input[type="checkbox"]:checked::after{
  content:'';
  width:9px;height:5px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
  display:block;
}
input[type="checkbox"]:hover:not(:checked){ border-color:var(--p); }

input[type="radio"]{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--bdr2);background:var(--surf2);
  cursor:pointer;transition:all var(--t);
  display:inline-flex;align-items:center;justify-content:center;
}
input[type="radio"]:checked{
  border-color:var(--p);background:var(--surf);
}
input[type="radio"]:checked::after{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--p);display:block;
}
input[type="radio"]:hover:not(:checked){ border-color:var(--p); }

/* ================================================================
   TOOLTIP — إصلاح شامل للألوان
   ================================================================ */
.o-tooltip{ position:relative }
.order-tooltip{
  position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(-50%);
  background:#1a1a2e;color:#fff;
  padding:4px 11px;border-radius:var(--r-sm);font-size:.72rem;font-weight:500;
  white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .15s;z-index:30;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.order-tooltip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:#1a1a2e;
}
.o-tooltip:hover .order-tooltip{ opacity:1 }
html.light .order-tooltip{ background:#111827;color:#fff }
html.light .order-tooltip::after{ border-top-color:#111827 }

/* ================================================================
   ORDER ALERT — إصلاح زر الإغلاق + تصميم النصوص واليسار
   ================================================================ */
.order-alert-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(12px);
  z-index:500;cursor:pointer;
  transition:opacity .3s ease;
}
.order-alert-card{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:var(--r-2xl);
  padding:24px 22px;
  min-width:340px;max-width:480px;width:92vw;
  z-index:501;box-shadow:var(--sh-xl);
  transition:opacity .3s,transform .3s;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.oac-close{
  position:absolute;top:12px;left:12px;
  width:30px;height:30px;border-radius:50%;
  background:var(--surf2);border:1px solid var(--bdr);
  color:var(--tx2);font-size:.9rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);z-index:2;
}
.oac-close:hover{ background:var(--p);border-color:var(--p);color:#fff }
.oac-title{
  font-size:1.05rem;font-weight:700;color:var(--tx1);
  text-align:center;margin-bottom:6px;
}
/* النصوص يمين، الأرقام يسار */
.oac-rows{ display:flex;flex-direction:column;gap:6px;width:100%; }
.oac-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;
  background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r);
}
.oac-row span{
  color:var(--tx2);font-size:.8rem;font-weight:500;
  text-align:right;
}
.oac-row b{
  color:var(--tx1);font-weight:700;font-size:.82rem;
  text-align:left;word-break:break-all;max-width:55%;
}

/* ================================================================
   TICKETS — قنوات محدّثة
   ================================================================ */
.support-channels{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;margin-bottom:16px;
}
.sc-channel{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:var(--r-lg);
  background:var(--surf);border:1px solid var(--bdr);
  text-decoration:none;transition:all var(--t);
  position:relative;overflow:hidden;
}
.sc-channel:hover{
  transform:translateY(-2px);box-shadow:var(--sh);
  border-color:var(--bdr2);
}
.sc-ch-ico{
  width:36px;height:36px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
}
.sc-tg .sc-ch-ico{ background:rgba(37,99,235,.1);color:#2563eb }
.sc-wa .sc-ch-ico{ background:rgba(37,211,102,.1);color:#25d366 }
.sc-ai .sc-ch-ico{ background:rgba(234,30,99,.1);color:var(--p) }
.sc-human .sc-ch-ico{ background:rgba(234,179,8,.1);color:#ca8a04 }
.sc-tt .sc-ch-ico{ background:rgba(255,255,255,.07);color:var(--tx1) }
.sc-tg:hover{ border-color:rgba(37,99,235,.3) }
.sc-wa:hover,.sc-ai:hover,.sc-human:hover{ border-color:rgba(37,211,102,.3) }
.sc-ai:hover{ border-color:rgba(234,30,99,.3) }
.sc-human:hover{ border-color:rgba(234,179,8,.3) }
.sc-channel-info{ flex:1;min-width:0 }
.sc-channel-name{
  display:block;font-size:.82rem;font-weight:700;color:var(--tx1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sc-channel-sub{ display:block;font-size:.7rem;color:var(--tx2);margin-top:1px }
.sc-arrow{ color:var(--tx3);font-size:.78rem;flex-shrink:0 }
.sc-ai-badge{
  display:inline-flex;padding:1px 5px;border-radius:var(--r-pill);
  background:var(--p);color:#fff;font-size:.58rem;font-weight:800;
  margin-right:3px;vertical-align:middle;
}

@media(max-width:900px){
  .support-channels{ grid-template-columns:repeat(2,1fr) }
}
@media(max-width:480px){
  .support-channels{ grid-template-columns:1fr }
}

/* ================================================================
   AVATAR SELECTOR
   ================================================================ */
.avatar-selector-modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.7);backdrop-filter:blur(10px);
  z-index:1000;align-items:center;justify-content:center;
}
.avatar-selector-modal.open{ display:flex }
.avatar-selector-box{
  background:var(--surf);border:1px solid var(--bdr);
  border-radius:var(--r-2xl);padding:22px;
  max-width:420px;width:92vw;
}
.asm-title{
  font-size:1rem;font-weight:700;color:var(--tx1);
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.asm-close{
  width:28px;height:28px;border-radius:50%;
  background:var(--surf2);border:1px solid var(--bdr);
  color:var(--tx2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);
}
.asm-close:hover{ background:var(--p);color:#fff;border-color:var(--p) }
.asm-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.asm-item{
  border-radius:var(--r-xl);overflow:hidden;
  border:3px solid transparent;cursor:pointer;
  transition:all var(--t);aspect-ratio:1;
}
.asm-item:hover{ border-color:var(--p);transform:scale(1.05) }
.asm-item.selected{ border-color:var(--p);box-shadow:0 0 0 2px rgba(234,30,99,.3) }
.asm-item img{ width:100%;height:100%;object-fit:cover;display:block }
.asm-save-btn{ margin-top:14px }

/* ================================================================
   MOBILE RESPONSIVE — إصلاحات شاملة إضافية
   ================================================================ */
@media(max-width:900px){
  /* Topbar */
  .topbar{ position:sticky;top:0;z-index:89;height:54px;padding:0 12px }
  .tb-page-title{ font-size:.88rem;font-weight:700 }
  
  /* Sidebar */
  .sidebar{ transition:transform var(--t-lg) }
  
  /* announce-panel في الهاتف */
  .announce-panel{
    position:fixed !important;
    top:54px !important;
    right:0 !important; left:0 !important;
    width:100% !important;
    max-height:80vh !important;
    border-radius:0 0 var(--r-xl) var(--r-xl) !important;
    overflow:hidden;
    box-shadow:var(--sh-xl);
  }
  
   /* currency list */
  .currency-list{
    position:fixed !important;
    bottom:calc(var(--mob-nav-h) + 8px) !important;
    top:auto !important;
    right:8px !important;left:8px !important;
    width:auto !important;
    max-height:60vh !important;
    border-radius:var(--r-xl) !important;
  }
  
  /* stats row */
  .stats-row{ grid-template-columns:1fr 1fr;gap:9px }
  
  /* neworder on mobile */
  .svc-detail-card{ position:static !important;margin-top:12px }
  
  /* order-alert */
  .order-alert-card{ min-width:0;width:94vw }
}

@media(max-width:600px){
  /* page */
  .page-main{
    padding:12px 10px calc(var(--mob-nav-h) + env(safe-area-inset-bottom,0px) + 12px) !important;
  }
  .container-fluid{
    padding:10px !important;
    padding-bottom:calc(var(--mob-nav-h) + env(safe-area-inset-bottom,0px) + 12px) !important;
  }
  
  /* topbar elements */
  .tb-page-title{ font-size:.82rem }
  
  /* stats 2 cols */
  .stats-row{ grid-template-columns:1fr 1fr;gap:8px }
  .stat-card{ padding:11px 10px }
  .sc-val{ font-size:.95rem }
  .sc-ico{ width:28px;height:28px;font-size:.88rem }
  
  /* sfs filter */
  .sfs-btn{ padding:5px 10px;font-size:.72rem }
  
  /* form */
  .form-control{ font-size:.875rem }
  .btn{ font-size:.84rem }
  
  /* order cards */
  .order-grid{ grid-template-columns:1fr }
  .oc-stats{ gap:4px }
  .oc-stats>span{ font-size:.68rem;padding:2px 6px }
  
  /* ticket */
  .support-channels{ grid-template-columns:1fr }
  .sc-channel{ padding:10px 12px }
  
  /* viewticket */
  .message-right,.message-left{ max-width:85% }
  
  /* modal */
  .fsk-modal-box,.modal-content{
    border-radius:var(--r-xl);
    max-height:90vh;overflow-y:auto;
  }
  
  /* pagination */
  .pagination li a{ width:30px;height:30px;font-size:.78rem }
  
  /* account */
  .acc-hero{ padding:16px }
  .acc-avatar{ width:54px;height:54px;font-size:1.4rem }
  
  /* levels */
  .levels-grid{ grid-template-columns:1fr 1fr }
  
  /* dashboard */
  .dwb-global-stats{ width:100% }
  .dash-info-grid{ grid-template-columns:1fr 1fr }
  .deposit-stats-grid{ grid-template-columns:1fr }
}

@media(max-width:400px){
  .stats-row{ grid-template-columns:1fr }
  .levels-grid{ grid-template-columns:1fr }
  .asm-grid{ grid-template-columns:repeat(3,1fr) }
  .sfs-btn span{ display:none }
}

/* ================================================================
   LAPTOP — تحسينات عرض 1024-1440px
   ================================================================ */
@media(min-width:901px) and (max-width:1280px){
  :root{ --sb-w:230px }
  .stats-row{ gap:10px }
  .sc-val{ font-size:1rem }
  .order-grid{ grid-template-columns:repeat(2,1fr) }
  .levels-grid{ grid-template-columns:repeat(4,1fr) }
  .dash-info-grid{ grid-template-columns:repeat(3,1fr) }
}

/* ================================================================
   ALERT يمين ← يسار
   ================================================================ */
.alert{
  display:flex;align-items:flex-start;gap:10px;
  text-align:right;direction:rtl;
}
.alert i{ flex-shrink:0;margin-top:2px }
.alert .close{
  margin-right:auto;margin-left:0;
  background:none;border:none;
  font-size:1.1rem;cursor:pointer;
  color:var(--tx3);opacity:.7;
  transition:opacity var(--t);flex-shrink:0;
}
.alert .close:hover{ opacity:1 }

/* ================================================================
   SIGNIN — how-to steps
   ================================================================ */
.signin-how{
  background:var(--surf2);border:1px solid var(--sb-bdr);
  border-radius:var(--r-xl);padding:16px 18px;margin-bottom:0;
}
.signin-how-title{
  display:flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:700;color:rgba(255,255,255,.6);
  margin-bottom:14px;letter-spacing:.04em;
}
.signin-how-title i{ color:var(--p-lt) }
.signin-how-steps{
  display:flex;align-items:flex-start;gap:0;
}
.signin-how-step{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  flex:1;
}
.shs-num{
  width:28px;height:28px;border-radius:50%;
  background:var(--p);color:#fff;
  font-size:.75rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(234,30,99,.4);flex-shrink:0;
}
.shs-body{
  display:flex;flex-direction:column;gap:2px;text-align:center;
}
.shs-body b{ font-size:.72rem;font-weight:700;color:rgba(255,255,255,.85) }
.shs-body span{ font-size:.62rem;color:rgba(255,255,255,.4) }
.shs-line{
  flex-shrink:0;height:1px;width:20px;background:rgba(255,255,255,.12);
  margin-top:14px;
}

/* ================================================================
   AVATAR — account overlay
   ================================================================ */
.acc-avatar{ position:relative;overflow:hidden !important }
.acc-avatar-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.5);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--t);color:#fff;font-size:1rem;
  pointer-events:none;
}
.acc-avatar:hover .acc-avatar-overlay{ opacity:1 }

/* ================================================================
   SERVICE DETAIL — favorites icon in services list
   ================================================================ */
.service-fav-ico{
  font-size:.75rem;color:var(--p);margin-right:4px;
}

/* currency-list mobile: handled below */

/* ================================================================
   ANNOUNCE PANEL — هاتف
   ================================================================ */
@media(max-width:900px){
  .notif-wrap{ position:static }
  .announce-panel{
    position:fixed !important;
    top:54px !important;
    right:0 !important; left:0 !important;
    width:100vw !important; max-width:100vw !important;
    border-radius:0 0 var(--r-xl) var(--r-xl) !important;
    border-top:none !important;
    max-height:75vh;
  }
  .announce-body{ max-height:calc(75vh - 50px);overflow-y:auto }
}

/* ================================================================
   VIEWTICKET — RTL message direction fix
   ================================================================ */
.ticket-view-message-list{
  display:flex;flex-direction:column;gap:12px;
}
/* user = يمين (RTL = يبدأ من اليمين) */
.message-right{ align-self:flex-start !important }
/* support = يسار */
.message-left { align-self:flex-end !important }

/* ================================================================
   FSK v4 — ADDITIONS
================================================================ */

/* ─── Sidebar ─── */
html{--sb-bg:#111318}html.light{--sb-bg:#1e2235}html.dark{--sb-bg:#090b10}
.sidebar{background:var(--sb-bg)!important}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}
.sb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--p);color:#fff;font-size:.62rem;font-weight:800;margin-right:auto;animation:badgePop .3s var(--ease)}

/* ─── Currency list ─── */
.currency-list { position:absolute; top:calc(100% + 8px); right:0; background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r-xl); box-shadow:var(--sh-xl); min-width:280px; max-width:340px; z-index:500; overflow:hidden; opacity:0; pointer-events:none; transform:translateY(-8px) scale(.97); transition:opacity var(--t), transform var(--t); }
html[dir="rtl"] .currency-list { right:auto; left:0 }
.currency-list.active { opacity:1; pointer-events:all; transform:translateY(0) scale(1) }
.curr-grid-wrap { grid-template-columns:repeat(3,1fr) !important }
@media(max-width:900px){
  .currency-list { position:fixed !important; bottom:calc(var(--mob-nav-h,64px) + env(safe-area-inset-bottom,0px) + 8px) !important; top:auto !important; left:8px !important; right:8px !important; width:auto !important; min-width:0 !important; max-width:none !important; max-height:58vh; overflow-y:auto; z-index:600; border-radius:var(--r-xl); transform:none !important; }
  .currency-list.active { opacity:1; pointer-events:all; transform:none !important }
  .currency-bg { z-index:599 }
}
/* ─── bal-group topbar ─── */
.bal-group { display:flex; align-items:center; background:var(--surf2); border:1px solid var(--bdr); border-radius:var(--r-lg); overflow:hidden }
.bal-group .bal-btn { border:none !important; border-radius:0 !important; border-left:1px solid var(--bdr) !important; background:transparent; padding:7px 11px; display:flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--tx1); cursor:pointer; transition:background var(--t) }
html[dir="ltr"] .bal-group .bal-btn { border-left:none !important; border-right:1px solid var(--bdr) !important }
.bal-group .bal-btn:hover { background:var(--p-05) }
.bal-ico { color:var(--p); font-size:.9rem }
.bal-arr { font-size:.72rem; color:var(--tx3); transition:transform var(--t) }
.bal-btn.open .bal-arr { transform:rotate(180deg) }
.bal-eye-btn { padding:7px 9px; background:transparent; border:none; color:var(--tx3); cursor:pointer; font-size:.85rem; transition:color var(--t) }
.bal-eye-btn:hover { color:var(--p) }
.bal-val { font-size:.82rem; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media(max-width:900px){ .bal-group{ display:none } .mob-currency-btn{ display:flex !important } }

/* ═══ ADDFUNDS ═══ */
.dropdwon-box{position:relative}
.dropdwon-box .payment-dropdown,.af-form-card .payment-dropdown{display:none;position:absolute!important;top:calc(100% + 6px)!important;right:0;left:0;z-index:510!important;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);box-shadow:var(--sh-xl);max-height:420px;overflow-y:auto;transform:none!important;width:auto!important}
.dropdwon-box .payment-dropdown.active,.af-form-card .payment-dropdown.active{display:block!important}
.payment-dropdown-bg{display:none;position:fixed;inset:0;z-index:509;background:rgba(0,0,0,.2)}.payment-dropdown-bg.active{display:block}
.payment-dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--bdr);font-weight:700;font-size:.85rem;color:var(--tx1);position:sticky;top:0;background:var(--surf);z-index:1}
.payment-dropdown-header button{background:none;border:none;cursor:pointer;color:var(--tx3);font-size:1rem;padding:4px;display:flex;align-items:center}.payment-dropdown-header button:hover{color:var(--p)}
.payment-search-wrapper{position:relative;margin:8px 8px 4px}.payment-search-wrapper i{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--tx3);font-size:.8rem;pointer-events:none}
.payment-search-input{width:100%;padding:8px 34px 8px 11px;background:var(--surf2);border:1.5px solid var(--bdr);border-radius:var(--r-lg);font-size:.83rem;color:var(--tx1);outline:none;direction:rtl;font-family:inherit;transition:border-color var(--t);box-sizing:border-box}.payment-search-input:focus{border-color:var(--p)}
.payment-categories-tabs{display:flex;gap:4px;padding:6px 8px 5px;flex-wrap:wrap;border-bottom:1px solid var(--bdr)}
.category-tab{padding:4px 10px;border-radius:var(--r-pill);border:1.5px solid var(--bdr);background:var(--surf2);font-size:.75rem;font-weight:600;color:var(--tx2);cursor:pointer;transition:all var(--t);display:inline-flex;align-items:center;gap:4px;font-family:inherit;white-space:nowrap}
.category-tab:hover{background:var(--p-05);border-color:var(--p-20);color:var(--p)}.category-tab.active{background:var(--p);border-color:var(--p);color:#fff}
.payment-categories-content{padding:6px}.category-content{display:none}.category-content.active{display:block}
.payment-method{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:var(--r);cursor:pointer;border:1px solid transparent;transition:all var(--t);margin-bottom:2px}.payment-method:hover{background:var(--surf2)}.payment-method.active{background:var(--p-10)!important;border-color:rgba(234,30,99,.2)!important}
html.dark .payment-method.active{background:rgba(234,30,99,.1)!important}
.payment-name-container{display:flex;align-items:center;gap:8px}.payment-radio{flex-shrink:0;accent-color:var(--p);width:15px;height:15px}
.payment-text{font-size:.85rem;font-weight:600;color:var(--tx1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payment-description{font-size:.75rem;color:var(--tx2);padding-right:23px}
.payment-type-badge{padding:2px 7px;border-radius:var(--r-pill);font-size:.65rem;font-weight:700;white-space:nowrap;flex-shrink:0}
.payment-type-badge.auto{background:rgba(16,185,129,.12);color:#059669;border:1px solid rgba(16,185,129,.2)}.payment-type-badge.manual{background:rgba(245,158,11,.12);color:#d97706;border:1px solid rgba(245,158,11,.2)}
html.dark .payment-type-badge.auto{color:#4ade80}html.dark .payment-type-badge.manual{color:#fcd34d}
.most-used{font-size:.65rem;padding:2px 7px;flex-shrink:0;background:var(--p-10);color:var(--p);border-radius:var(--r-pill);font-weight:700;white-space:nowrap}
#payment-dropdown-select{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.selected-payment-name{font-size:.88rem;font-weight:600;color:var(--tx1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-pay-trigger{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surf2);border:1.5px solid var(--bdr);border-radius:var(--r-xl);cursor:pointer;min-height:50px;transition:all var(--t);gap:10px}
.af-pay-trigger:hover{border-color:var(--p-20);background:var(--surf)}.af-pay-trigger.open{border-color:var(--p)}.af-pay-trigger.open .af-pay-arr{transform:rotate(180deg)}
.af-pay-arr{color:var(--tx3);font-size:.82rem;flex-shrink:0;transition:transform var(--t)}.af-pay-trigger-inner{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.af-pay-placeholder{color:var(--tx3)!important}
.af-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
.af-card-title{font-size:.92rem;font-weight:700;color:var(--tx1);display:flex;align-items:center;gap:7px}.af-card-sub{font-size:.78rem;color:var(--tx3);margin-top:4px}
.af-label{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--tx2);margin-bottom:7px}.af-label i{color:var(--p)}
.af-bal-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);background:var(--p-10);border:1px solid var(--p-20);color:var(--p);font-size:.82rem;font-weight:700;flex-shrink:0}
.af-amount-field{display:flex;align-items:stretch;border:1.5px solid var(--bdr);border-radius:var(--r-xl);overflow:hidden;transition:all var(--t)}.af-amount-field:focus-within{border-color:var(--p);box-shadow:0 0 0 3px rgba(234,30,99,.08)}
.af-amount-inp{width:100%;padding:8px 13px;background:var(--surf2);border:1px solid var(--bdr);
  border-radius:var(--r-xs);color:var(--tx1);font-size:.875rem;font-family:inherit;outline:none;
  transition:all var(--t);direction:rtl;appearance:none}
.form-control:focus{border-color:var(--p);background:var(--surf);box-shadow:0 0 0 3px rgba(234,30,99,.1)}.af-amount-inp::placeholder{color:var(--tx3)}
.af-amount-cur{display:flex;align-items:center;padding:0 13px;background:linear-gradient(135deg,var(--p),var(--p-lt));color:#fff;font-size:.82rem;font-weight:800;white-space:nowrap;flex-shrink:0}
.af-quick-amounts{margin:12px 0}.af-qa-label{font-size:.75rem;font-weight:700;color:var(--tx3);display:block;margin-bottom:7px}
.af-qa-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.af-qa-btn{padding:7px 4px;border-radius:var(--r-lg);background:var(--surf2);border:1.5px solid var(--bdr);font-size:.82rem;font-weight:700;color:var(--tx1);cursor:pointer;transition:all var(--t);font-family:inherit;text-align:center}.af-qa-btn:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}
@media(max-width:600px){.af-qa-grid{grid-template-columns:repeat(3,1fr)}}
.af-submit-btn{width:100%;padding:13px;border:none;border-radius:var(--r-xl);background:linear-gradient(135deg,var(--p),var(--p-lt));color:#fff;font-size:.95rem;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 20px rgba(234,30,99,.3);margin-top:14px;transition:all var(--t)}.af-submit-btn:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(234,30,99,.4)}
.af-guarantees{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--bdr)}.af-guarantee{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--tx3)}.af-guarantee i{color:var(--p)}
.af-hist-head{margin-bottom:14px}.af-hist-list{display:flex;flex-direction:column;gap:2px}
.af-hist-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:var(--r-lg);transition:background var(--t)}.af-hist-row:hover{background:var(--surf2)}
.af-hist-ico{width:36px;height:36px;border-radius:var(--r-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.95rem;background:var(--surf2);color:var(--tx2);border:1px solid var(--bdr)}
.af-hist-info{flex:1;min-width:0}.af-hist-name{display:block;font-size:.84rem;font-weight:700;color:var(--tx1)}
.af-hist-time{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:.7rem;color:var(--tx3);margin-top:2px}.af-hist-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.af-hist-amount{font-size:.84rem;font-weight:700;display:flex;align-items:center;gap:3px}
.af-pos{color:#16a34a}.af-neg{color:#dc2626}html.dark .af-pos{color:#4ade80}html.dark .af-neg{color:#fca5a5}
.af-inv-btn{width:30px;height:30px;border-radius:var(--r);background:var(--surf2);border:1px solid var(--bdr);color:var(--tx3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.82rem;transition:all var(--t)}.af-inv-btn:hover{background:var(--p);border-color:var(--p);color:#fff}
.af-hist-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px;text-align:center}.af-hist-empty i{font-size:2rem;color:var(--bdr2)}.af-hist-empty b{font-size:.9rem;color:var(--tx1)}.af-hist-empty span{font-size:.8rem;color:var(--tx3)}

/* ═══ NEWORDER mobile + filter ═══ */
.sfs-filter-grid{display:flex;flex-wrap:nowrap;gap:6px;padding:10px 0 14px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--bdr);margin-bottom:14px}
.sfs-filter-grid::-webkit-scrollbar{display:none}
.sfs-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 14px;border-radius:var(--r-lg);background:var(--surf2);border:1.5px solid var(--bdr);color:var(--tx3);font-size:.68rem;font-weight:600;cursor:pointer;transition:all var(--t);font-family:inherit;white-space:nowrap;flex-shrink:0;min-width:56px}
.sfs-btn i{font-size:1.1rem}.sfs-btn span{font-size:.65rem;font-weight:600}
.sfs-btn:hover{border-color:var(--bdr2);color:var(--tx1)}.sfs-btn.active{border-color:var(--p);color:#fff;background:linear-gradient(135deg,var(--p),var(--p-lt));box-shadow:0 3px 14px rgba(234,30,99,.3)}.sfs-btn.active i{color:#fff}
.sfs-ig{color:#e1306c}.sfs-fb{color:#1877f2}.sfs-yt{color:#ff0000}.sfs-tt{color:var(--tx1)}.sfs-sc{color:#ffd700}.sfs-tw{color:#1d9bf0}.sfs-tg{color:#229ed9}.sfs-wa{color:#25d366}.sfs-th{color:var(--tx1)}
.mob-svc-detail-panel{display:none;margin-top:12px;border-radius:var(--r-xl)}
@media(max-width:900px){.mob-svc-detail-panel{display:block}#size-2{display:none!important}#size-1{grid-column:1/-1!important;width:100%!important;min-width:0;box-sizing:border-box}.category-dropdown,.service-dropdown{width:95vw!important;max-width:95vw!important;max-height:80vh!important}.s-name,.sdi-name,.service-dropdown-name{white-space:normal!important;word-break:break-word;line-height:1.4;overflow:visible!important}.service-dropdown-item{padding:8px 10px!important;width:100%;box-sizing:border-box}}
.sdc-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}.sdc-title-wrap{flex:1;min-width:0}.sdc-svc-name{font-size:.95rem;font-weight:700;color:var(--tx1);margin:0 0 4px;line-height:1.4;word-break:break-word}.sdc-svc-id{font-size:.72rem;color:var(--tx3);background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:2px 7px}
.sdc-info-grid{display:grid;gap:8px;margin-bottom:12px}.sdc-grid-6{grid-template-columns:repeat(3,1fr)}@media(max-width:480px){.sdc-grid-6{grid-template-columns:repeat(2,1fr)}}
.sdc-info-item{display:flex;align-items:flex-start;gap:7px;padding:9px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r-lg);transition:all var(--t)}.sdc-info-item:hover{border-color:var(--p-20);background:var(--p-05)}
.sdc-ico{font-size:1rem;flex-shrink:0;margin-top:1px}.sdc-ico-price{color:var(--p)}.sdc-ico-min{color:#3b82f6}.sdc-ico-max{color:#8b5cf6}
.avg-fast,.sdc-ico-avg-fast{color:#10b981}.avg-medium,.sdc-ico-avg-medium{color:#f59e0b}.avg-slow,.sdc-ico-avg-slow{color:#ef4444}.avg-veryslow,.sdc-ico-avg-veryslow{color:#dc2626}.avg-unknown,.sdc-ico-avg-unknown{color:var(--tx3)}
.sdc-item-body{flex:1;min-width:0}.sdc-item-label{display:block;font-size:.65rem;font-weight:600;color:var(--tx3);margin-bottom:2px}.sdc-item-val{font-size:.82rem;font-weight:700;color:var(--tx1);display:block}.sdc-price-val{color:var(--p)}
.refill-yes{color:#10b981!important}.refill-no{color:rgba(100,116,139,.55)!important}
.sdc-feats{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}.sdc-label{display:block;font-size:.72rem;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}.sdc-desc-wrap{margin-top:8px}.sdc-desc{font-size:.82rem;color:var(--tx2);line-height:1.6;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:10px 12px}
.sdi-name-row{display:flex;align-items:flex-start;gap:5px;margin-bottom:5px}.sdi-icon{color:var(--tx2);font-size:.88rem;flex-shrink:0;margin-top:1px}.sdi-id{font-size:.65rem;font-weight:700;color:var(--tx3);background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:1px 5px;flex-shrink:0;white-space:nowrap}.sdi-name{font-size:.84rem;font-weight:600;color:var(--tx1);line-height:1.4;word-break:break-word;min-width:0}.sdi-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.sdi-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:.72rem;color:var(--tx3)}.sdi-meta-item{display:flex;align-items:center;gap:3px}.sdi-meta-sep{color:var(--bdr2)}.sdi-price{font-size:.84rem;font-weight:700;color:var(--p);white-space:nowrap;flex-shrink:0}.sdi-feats{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px}
html.dark .order-status.completed{color:#6ee7b7;background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.25)}html.dark .order-status.partial{color:#fcd34d;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25)}html.dark .order-status.canceled{color:#fca5a5;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25)}html.dark .order-status.pending{color:#e2e8f0;background:rgba(100,116,139,.12);border-color:rgba(100,116,139,.25)}html.dark .order-status.processing{color:#93c5fd;background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.25)}
.tickets-uploader,.tv-uploader{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;border:2px dashed var(--bdr);border-radius:var(--r-lg);color:var(--tx2);font-size:.84rem;cursor:pointer;transition:all var(--t);text-align:center;background:var(--surf2)}.tickets-uploader:hover,.tv-uploader:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}

/* ════════════════════════════════════════════════════════════════
   FOOTER — محسّن
════════════════════════════════════════════════════════════════ */
.ftr{
  background:linear-gradient(180deg,var(--surf) 0%,var(--bg) 100%);
  border-top:1px solid var(--bdr);
  padding:0;
}
.ftr-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.5fr;
  gap:32px;
  padding:44px 40px 32px;
  max-width:1440px;margin:0 auto;
}
@media(max-width:1100px){.ftr-top{grid-template-columns:1fr 1fr;gap:24px;padding:32px 24px 24px}}
@media(max-width:600px){.ftr-top{grid-template-columns:1fr;padding:24px 16px 16px;gap:20px}}

/* brand */
.ftr-brand{display:flex;flex-direction:column;gap:12px}
.ftr-logo-link{display:inline-block}.ftr-logo{height:32px;width:auto;object-fit:contain}
.ftr-logo-txt{font-size:1.2rem;font-weight:900;color:var(--tx1);letter-spacing:-.03em}
.ftr-tagline{font-size:.82rem;color:var(--tx3);line-height:1.6;max-width:240px;margin:0}
.ftr-socials{display:flex;gap:8px;margin-top:4px}
.ftr-soc{width:36px;height:36px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1rem;border:1.5px solid var(--bdr);color:var(--tx3);transition:all var(--t);background:var(--surf2)}
.ftr-soc:hover{transform:translateY(-2px)}
.ftr-soc-tg:hover{border-color:#229ed9;color:#229ed9;background:rgba(34,158,217,.1)}
.ftr-soc-wa:hover{border-color:#25d366;color:#25d366;background:rgba(37,211,102,.1)}
.ftr-soc-tt:hover{border-color:var(--p);color:var(--p);background:var(--p-05)}

/* link cols */
.ftr-links-col{display:flex;flex-direction:column;gap:6px}
.ftr-col-title{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.ftr-col-title i{color:var(--p);font-size:.78rem}
.ftr-link{font-size:.83rem;color:var(--tx3);transition:all var(--t);padding:3px 0;border-bottom:1px solid transparent}
.ftr-link:hover{color:var(--p);border-bottom-color:var(--p-20)}

/* contact */
.ftr-contact-col{display:flex;flex-direction:column;gap:8px}
.ftr-contact-btn{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--r-xl);background:var(--surf2);border:1.5px solid var(--bdr);transition:all var(--t);text-decoration:none}
.ftr-contact-btn i{font-size:1.1rem;flex-shrink:0;width:20px;text-align:center}
.ftr-contact-btn span{display:block;font-size:.82rem;font-weight:600;color:var(--tx1)}
.ftr-contact-btn small{display:block;font-size:.72rem;color:var(--tx3);margin-top:1px}
.ftr-contact-btn:hover{border-color:var(--p-20);background:var(--p-05);transform:translateX(-2px)}
.ftr-contact-btn i{color:var(--tx3)}
.ftr-contact-ai i{color:#7c3aed}
.ftr-contact-tg i{color:#229ed9}
.ftr-contact-ai:hover{border-color:rgba(124,58,237,.3);background:rgba(124,58,237,.06)}
.ftr-contact-tg:hover{border-color:rgba(34,158,217,.3);background:rgba(34,158,217,.06)}
html[dir="ltr"] .ftr-contact-btn:hover{transform:translateX(2px)}

/* bottom */
.ftr-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 40px;
  border-top:1px solid var(--bdr);
  background:rgba(0,0,0,.04);
  flex-wrap:wrap;
  max-width:1440px;margin:0 auto;width:100%;box-sizing:border-box;
}
@media(max-width:600px){.ftr-bottom{padding:14px 16px;flex-direction:column;align-items:center;text-align:center}}
.ftr-pays{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ftr-pays img{height:22px;width:auto;max-width:56px;object-fit:contain;border-radius:4px;background:rgba(255,255,255,.9);padding:2px 6px;opacity:.75;transition:opacity var(--t)}.ftr-pays img:hover{opacity:1}
.ftr-copy{font-size:.74rem;color:var(--tx3);margin:0}
.ftr-cta{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:var(--r-xl);background:linear-gradient(135deg,var(--p),var(--p-lt));color:#fff;font-size:.82rem;font-weight:700;transition:all var(--t);box-shadow:0 3px 14px rgba(234,30,99,.28)}.ftr-cta:hover{transform:translateY(-1px);box-shadow:0 5px 22px rgba(234,30,99,.4)}

/* ════════════════════════════════════════════════════════════════
   SIGNIN PAGE — si-page
════════════════════════════════════════════════════════════════ */
@keyframes si-blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(16px,-12px) scale(1.04)}66%{transform:translate(-9px,16px) scale(.97)}}
@keyframes si-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes si-left{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@keyframes si-right{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:translateX(0)}}
@keyframes si-glow{0%,100%{box-shadow:0 4px 22px rgba(234,30,99,.38)}50%{box-shadow:0 4px 40px rgba(234,30,99,.62),0 0 48px rgba(234,30,99,.14)}}
@keyframes si-sn-glow{0%,100%{box-shadow:0 2px 10px rgba(234,30,99,.28)}50%{box-shadow:0 2px 20px rgba(234,30,99,.55)}}

/* base */
.si-page{min-height:100vh;background:#07080e;position:relative;overflow-x:hidden;color:#fff;font-family:inherit}

/* bg */
.si-bg{position:fixed;inset:0;pointer-events:none;z-index:0}
.si-blob{position:absolute;border-radius:50%;filter:blur(95px);animation:si-blob 14s ease-in-out infinite}
.si-b1{width:720px;height:720px;background:radial-gradient(circle,rgba(234,30,99,.36) 0%,transparent 65%);top:-260px;right:-180px;animation-delay:0s}
.si-b2{width:520px;height:520px;background:radial-gradient(circle,rgba(59,130,246,.18) 0%,transparent 65%);bottom:-100px;left:-70px;animation-delay:5s}
.si-b3{width:360px;height:360px;background:radial-gradient(circle,rgba(124,58,237,.16) 0%,transparent 65%);top:42%;left:36%;animation-delay:10s}
.si-noise{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:55px 55px}
.si-canvas{position:absolute;inset:0;opacity:.45;pointer-events:none}

/* ── Hero ── */
.si-hero-wrap{position:relative;z-index:2;text-align:center;padding:70px 20px 40px;animation:si-up .8s cubic-bezier(.22,.84,.36,1) both}
.si-hero-inner{max-width:880px;margin:0 auto}
.si-brand-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.si-logo{height:34px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(234,30,99,.4))}
.si-logo-txt{font-size:1.4rem;font-weight:900;letter-spacing:-.03em}
.si-badge-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:var(--r-pill);background:rgba(234,30,99,.13);border:1px solid rgba(234,30,99,.28);font-size:.73rem;font-weight:700;color:#f9a8d4}
.si-badge-tag i{color:#fbbf24}
.si-hero-h1{font-size:clamp(1.8rem,3.8vw,3rem);font-weight:900;letter-spacing:-.04em;line-height:1.18;margin:0 0 14px;background:linear-gradient(135deg,#fff 35%,rgba(234,30,99,.75));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.si-hero-desc{font-size:.92rem;color:rgba(255,255,255,.45);line-height:1.7;max-width:560px;margin:0 auto 22px}
.si-hero-stats{display:inline-flex;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:6px 20px;margin-bottom:24px;flex-wrap:wrap;justify-content:center}
.si-hstat{padding:8px 18px;text-align:center}
.si-hstat b{display:block;font-size:.95rem;font-weight:900;background:linear-gradient(135deg,#ea1e63,#f9a8d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.si-hstat span{display:block;font-size:.65rem;color:rgba(255,255,255,.38);margin-top:2px}
.si-hstat-sep{width:1px;height:28px;background:rgba(255,255,255,.08);flex-shrink:0}
.si-hero-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--r-xl);background:linear-gradient(135deg,#c5134f,#ea1e63,#f43f5e);color:#fff;font-size:.92rem;font-weight:700;transition:all .3s;box-shadow:0 5px 25px rgba(234,30,99,.45)}
.si-hero-cta:hover{transform:translateY(-2px);box-shadow:0 8px 35px rgba(234,30,99,.6)}

/* ── شريط المنصات ── */
.si-slider-wrap{position:relative;z-index:2;overflow:hidden;margin-bottom:44px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.si-slider-belt{display:flex;gap:10px;width:max-content;will-change:transform}
.si-sitem{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:var(--r-pill);font-size:.83rem;font-weight:600;color:rgba(255,255,255,.58);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);white-space:nowrap;flex-shrink:0;transition:all .2s}
.si-sitem i{font-size:1rem;color:var(--sc)}
.si-sitem:hover{background:rgba(255,255,255,.1);color:#fff}

/* ── main grid ── */
.si-main-wrap{position:relative;z-index:2;padding:0 40px 60px;max-width:1400px;margin:0 auto}
.si-main-grid{display:grid;grid-template-columns:420px 1fr;gap:36px;align-items:start}
@media(max-width:1100px){.si-main-wrap{padding:0 24px 44px}.si-main-grid{grid-template-columns:380px 1fr;gap:24px}}
@media(max-width:900px){.si-main-grid{grid-template-columns:1fr};.si-main-wrap{padding:0 16px 36px}}

/* ── form col ── */
.si-form-col{position:sticky;top:20px}
.si-alert{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:var(--r-lg);font-size:.83rem;font-weight:500;margin-bottom:12px}
.si-err{background:rgba(220,38,38,.13);border:1px solid rgba(220,38,38,.25);color:#fca5a5}
.si-ok{background:rgba(16,185,129,.11);border:1px solid rgba(16,185,129,.22);color:#6ee7b7}
.si-form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:28px 24px;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);position:relative;overflow:hidden}
.si-form::before{content:'';position:absolute;top:0;right:-1px;width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(234,30,99,.75),rgba(234,30,99,.35),transparent)}
html[dir="ltr"] .si-form::before{right:auto;left:-1px}
.si-form-title{font-size:1.4rem;font-weight:900;color:#fff;margin:0 0 20px;letter-spacing:-.03em}
/* fields */
.si-fld{display:flex;align-items:center;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.1);border-radius:var(--r-xl);overflow:hidden;transition:all .2s;margin-bottom:11px}
.si-fld:focus-within{border-color:rgba(234,30,99,.65);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(234,30,99,.12)}
.si-fld-ico{width:46px;height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:rgba(255,255,255,.28);border-left:1px solid rgba(255,255,255,.08);transition:color .2s}
html[dir="ltr"] .si-fld-ico{border-left:none;border-right:1px solid rgba(255,255,255,.08)}
.si-fld:focus-within .si-fld-ico{color:rgba(234,30,99,.85)}
.si-fld-inp{flex:1;padding:13px 12px;background:transparent;border:none;outline:none;font-size:.92rem;color:#fff;font-family:inherit}.si-fld-inp::placeholder{color:rgba(255,255,255,.2)}
.si-eye{width:42px;height:50px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.28);font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:color .2s;flex-shrink:0}.si-eye:hover{color:#ea1e63}
/* row */
.si-frow{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:8px}
.si-rem{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:.82rem;color:rgba(255,255,255,.45)}
.si-rem input[type="checkbox"]{display:none}
.si-chk{width:17px;height:17px;border-radius:4px;flex-shrink:0;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:all .2s}
.si-rem input:checked~.si-chk{background:#ea1e63;border-color:#ea1e63}
.si-rem input:checked~.si-chk::after{content:'✓';font-size:.6rem;color:#fff}
.si-forg{font-size:.82rem;font-weight:600;color:rgba(234,30,99,.8);transition:color .2s}.si-forg:hover{color:#ea1e63}
/* submit */
.si-submit{width:100%;padding:13px;border:none;border-radius:var(--r-xl);background:linear-gradient(135deg,#c5134f,#ea1e63,#f43f5e);background-size:200%;color:#fff;font-size:.94rem;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;position:relative;overflow:hidden;transition:all .3s;box-shadow:0 5px 25px rgba(234,30,99,.42);margin-bottom:12px;animation:si-glow 3s ease-in-out infinite}
.si-submit:hover{transform:translateY(-2px);box-shadow:0 8px 34px rgba(234,30,99,.62);background-position:right}
.si-submit:active{transform:translateY(0)}
/* or */
.si-or{display:flex;align-items:center;gap:12px;margin:12px 0}.si-or::before,.si-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}.si-or span{font-size:.73rem;color:rgba(255,255,255,.3);white-space:nowrap}
/* Google ─ الحل الصحيح */
.si-google-outer{position:relative;width:100%;margin-bottom:12px}
.si-google-visible{width:100%;padding:12px 16px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.11);border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;gap:10px;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.8);pointer-events:none}
.si-google-cover{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  overflow:hidden;
  cursor:pointer;
  z-index:10;
}
.si-google-cover > div,
.si-google-cover iframe{width:100%!important;height:100%!important;cursor:pointer!important}
/* reg link */
.si-reg-link{text-align:center;font-size:.83rem;color:rgba(255,255,255,.38);margin-top:10px}
.si-reg-link a{color:#ea1e63;font-weight:700;transition:opacity .2s}.si-reg-link a:hover{opacity:.8}
/* guards */
.si-guards{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.si-guards span{display:flex;align-items:center;gap:5px;font-size:.73rem;color:rgba(255,255,255,.4)}.si-guards i{color:#ea1e63}

/* ── info col ── */
.si-info-col{display:flex;flex-direction:column;gap:16px;animation:si-right .7s cubic-bezier(.22,.84,.36,1) .1s both}
.si-feats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.si-feat{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:var(--r-xl);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:all .25s;cursor:default}
.si-feat:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.si-fi{width:36px;height:36px;border-radius:var(--r-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;background:var(--fb);color:var(--fi)}
.si-feat b{display:block;font-size:.83rem;font-weight:700;color:#fff;margin-bottom:3px}
.si-feat span{display:block;font-size:.73rem;color:rgba(255,255,255,.44);line-height:1.5}
/* box */
.si-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:16px 18px}
.si-box-hd{display:flex;align-items:center;gap:7px;font-size:.73rem;font-weight:700;color:rgba(255,255,255,.44);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}.si-box-hd i{color:#ea1e63}
/* steps */
.si-steps{display:flex;align-items:flex-start;gap:5px;flex-wrap:wrap}
.si-step{display:flex;align-items:flex-start;gap:8px}
.si-sn{width:26px;height:26px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#ea1e63,#f43f5e);color:#fff;font-size:.73rem;font-weight:800;display:flex;align-items:center;justify-content:center;animation:si-sn-glow 3s ease-in-out infinite}
.si-step b{display:block;font-size:.82rem;font-weight:700;color:#fff}.si-step span{display:block;font-size:.71rem;color:rgba(255,255,255,.43);margin-top:1px;line-height:1.5}
.si-sarr{color:rgba(255,255,255,.18);font-size:.76rem;flex-shrink:0;margin-top:8px}
/* reviews */
.si-reviews{display:flex;flex-direction:column;gap:8px}
.si-review{padding:11px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-lg);transition:all .2s}.si-review:hover{background:rgba(255,255,255,.07);transform:translateX(-3px)}
html[dir="ltr"] .si-review:hover{transform:translateX(3px)}
.si-rv-stars{color:#fbbf24;font-size:.83rem;margin-bottom:5px}
.si-review p{font-size:.81rem;color:rgba(255,255,255,.7);line-height:1.6;margin:0 0 5px}.si-review span{font-size:.71rem;color:rgba(255,255,255,.38)}
/* faq */
.si-faq{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-lg);overflow:hidden;margin-bottom:6px;transition:border-color .2s}.si-faq[open]{border-color:rgba(234,30,99,.3)}
.si-faq summary{padding:10px 14px;cursor:pointer;font-size:.83rem;font-weight:600;color:rgba(255,255,255,.8);list-style:none;display:flex;align-items:center;justify-content:space-between}
.si-faq summary::-webkit-details-marker{display:none}
.si-faq summary::after{content:'▾';font-size:.76rem;color:#ea1e63;transition:transform .2s}.si-faq[open] summary::after{transform:rotate(180deg)}
.si-faq p{padding:8px 14px 12px;font-size:.79rem;color:rgba(255,255,255,.5);line-height:1.7;margin:0}
/* pays */
.si-pays{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:8px}
.si-pays img{height:24px;width:auto;max-width:60px;object-fit:contain;border-radius:4px;background:rgba(255,255,255,.9);padding:2px 6px;transition:transform .2s}.si-pays img:hover{transform:scale(1.08)}

/* ── Responsive ── */
@media(max-width:900px){
  .si-hero-wrap{padding:44px 16px 28px}.si-hero-h1{font-size:1.7rem}
  .si-form-col{position:static}
  .si-feats{grid-template-columns:1fr 1fr}
  .si-steps{flex-direction:column;gap:8px}.si-sarr{transform:rotate(90deg);align-self:flex-start;margin-right:8px;margin-top:0}
}
@media(max-width:600px){
  .si-hero-wrap{padding:32px 14px 22px}.si-hero-h1{font-size:1.4rem}
  .si-hstat span{display:none}.si-hero-stats{padding:4px 8px}
  .si-form{padding:20px 16px}.si-main-wrap{padding:0 12px 28px}
  .si-feats{gap:8px}
}





.service-dropdown-item { padding:9px 12px; border-bottom:1px solid var(--bdr); cursor:pointer; transition:background var(--t) }
.service-dropdown-item:hover, .service-dropdown-item.active { background:var(--p-05) }
.sdi-name-row { display:flex; align-items:flex-start; gap:5px; margin-bottom:5px; flex-wrap:wrap }
.sdi-icon { color:var(--tx2); font-size:.88rem; flex-shrink:0; margin-top:1px }
.sdi-id { font-size:.67rem; font-weight:700; color:var(--tx3); background:var(--surf2); border:1px solid var(--bdr); border-radius:var(--r-sm); padding:1px 5px; flex-shrink:0 }
.sdi-name { font-size:.84rem; font-weight:600; color:var(--tx1); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word }
.sdi-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px }
.sdi-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.72rem; color:var(--tx3) }
.sdi-meta-item { display:flex; align-items:center; gap:3px }
.sdi-meta-item i { font-size:.68rem }
.sdi-meta-sep { color:var(--bdr2) }
.sdi-price { font-size:.82rem; font-weight:700; color:var(--p); white-space:nowrap; flex-shrink:0 }
.sdi-feats { margin-top:5px; display:flex; flex-wrap:wrap; gap:4px }
@media(max-width:600px){ .sdi-name{font-size:.81rem} .sdi-id{font-size:.62rem} .sdi-price{font-size:.78rem} .sdi-meta{font-size:.68rem} }





/* ================================================================
LINK LABEL + BUTTON — متكامل مع FSK Theme v4
================================================================ */
.link_text_with_btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  padding: 2px 0;
}

/* النص التوضيحي */
.link_text_with_btn > span:first-child {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--tx1);
  letter-spacing: -0.01em;
}

/* زر الروابط المحفوظة */
.link_popup_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--p-05);
  border: 1px solid var(--p-10);
  color: var(--p);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit; /* يأخذ خط IBM Plex Sans Arabic تلقائياً */
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* تأثيرات التحويم والنقر */
.link_popup_btn:hover {
  background: var(--p);
  color: #fff;
  border-color: var(--p);
  box-shadow: 0 4px 14px rgba(234, 30, 99, 0.28);
  transform: translateY(-1px);
}

.link_popup_btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* دعم الأيقونة داخل الزر (اختياري) */
.link_popup_btn i {
  font-size: 0.88rem;
  line-height: 1;
  display: inline-flex;
}

/* تحسين المظهر على الشاشات الصغيرة */
@media (max-width: 600px) {
  .link_text_with_btn {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .link_popup_btn {
    width: 100%;
    justify-content: center;
  }
}




/* ─── SIGNIN sp-* ─── */
.signin-page { min-height:100vh;display:flex;align-items:stretch;background:#09090f;position:relative;overflow:hidden }
.sp-bg { position:absolute;inset:0;pointer-events:none;z-index:0 }
.sp-orb { position:absolute;border-radius:50%;filter:blur(90px);opacity:.4 }
.sp-orb1 { width:600px;height:600px;background:radial-gradient(circle,#ea1e63,transparent 70%);top:-150px;left:-100px }
.sp-orb2 { width:400px;height:400px;background:radial-gradient(circle,#3b82f6,transparent 70%);bottom:-100px;right:30%;opacity:.25 }
.sp-orb3 { width:350px;height:350px;background:radial-gradient(circle,#7c3aed,transparent 70%);top:40%;right:-50px;opacity:.2 }
.sp-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px }
.sp-wrap { display:flex;width:100%;min-height:100vh;position:relative;z-index:1 }
.sp-left { flex:1;padding:48px 52px;display:flex;flex-direction:column;gap:22px;overflow-y:auto }
.sp-logo-row { display:flex;align-items:center;gap:12px;flex-wrap:wrap }
.sp-logo { height:32px;width:auto;object-fit:contain }
.sp-logo-text { font-size:1.3rem;font-weight:900;color:#fff }
.sp-num1-badge { display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);background:rgba(234,30,99,.15);border:1px solid rgba(234,30,99,.3);color:var(--p-lt);font-size:.73rem;font-weight:700 }
.sp-num1-badge i { color:#fbbf24 }
.sp-hero h1 { font-size:clamp(1.8rem,3vw,2.8rem);font-weight:900;color:#fff;line-height:1.18;letter-spacing:-.03em }
.sp-hero h1 mark { background:linear-gradient(135deg,var(--p),var(--p-lt));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-color:transparent }
.sp-hero p { font-size:.9rem;color:rgba(255,255,255,.5);margin-top:10px }
.sp-ticker-box { overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%) }
.sp-ticker-box .sp-ticker-inner { display:flex;overflow:hidden }
.sp-ticker-track { display:flex;gap:10px;width:max-content;flex-shrink:0;animation:spTick 22s linear infinite }
.sp-ticker-dup { animation-delay:-11s }
@keyframes spTick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.sp-tp { display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);font-size:.8rem;font-weight:600;color:rgba(255,255,255,.65);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);white-space:nowrap;flex-shrink:0 }
.sp-tp i { color:var(--pc);font-size:.95rem }
.sp-why-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px }
.sp-why-card { padding:13px 14px;border-radius:var(--r-lg);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:4px;transition:all .2s }
.sp-why-card:hover { background:rgba(255,255,255,.09) }
.sp-why-card i { font-size:1.1rem;margin-bottom:2px }
.sp-why-g i{color:#4ade80} .sp-why-b i{color:#93c5fd} .sp-why-p i{color:#f9a8d4} .sp-why-y i{color:#fcd34d}
.sp-why-card b { font-size:.84rem;font-weight:700;color:#fff }
.sp-why-card span { font-size:.73rem;color:rgba(255,255,255,.45) }
.sp-how-box,.sp-reviews,.sp-faq,.sp-pays,.sp-stats { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:15px 16px }
.sp-section-lbl { display:flex;align-items:center;gap:7px;font-size:.75rem;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px }
.sp-section-lbl i { color:var(--p-lt) }
.sp-steps { display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap }
.sp-step { display:flex;align-items:center;gap:8px }
.sp-step-n { width:28px;height:28px;border-radius:50%;flex-shrink:0;background:var(--p);color:#fff;font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(234,30,99,.4) }
.sp-step-body b { display:block;font-size:.8rem;font-weight:700;color:#fff }
.sp-step-body span { display:block;font-size:.7rem;color:rgba(255,255,255,.45) }
.sp-step-arrow { color:rgba(255,255,255,.25);font-size:.8rem }
.sp-reviews-grid { display:flex;flex-direction:column;gap:9px }
.sp-review { padding:11px 13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg) }
.sp-stars { color:#fbbf24;font-size:.82rem;margin-bottom:5px }
.sp-review p { font-size:.8rem;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:5px }
.sp-review span { font-size:.72rem;color:rgba(255,255,255,.4) }
.sp-faq-list { display:flex;flex-direction:column;gap:7px }
.sp-faq-item { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-lg);overflow:hidden }
.sp-faq-item summary { padding:10px 14px;cursor:pointer;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.75);list-style:none;display:flex;align-items:center;justify-content:space-between }
.sp-faq-item summary::after { content:'▾';font-size:.8rem;color:var(--p-lt) }
.sp-faq-item[open] summary::after { content:'▴' }
.sp-faq-item p { padding:8px 14px 12px;font-size:.78rem;color:rgba(255,255,255,.5);line-height:1.6;margin:0 }
.sp-pays-row { display:flex;gap:9px;flex-wrap:wrap;align-items:center }
.sp-pays-row img { height:26px;width:auto;max-width:62px;object-fit:contain;border-radius:4px;background:rgba(255,255,255,.9);padding:3px 6px }
.sp-stats { display:flex;align-items:center }
.sp-stat { flex:1;padding:10px 8px;text-align:center }
.sp-stat b { display:block;font-size:1.05rem;font-weight:900;color:var(--p-lt) }
.sp-stat span { display:block;font-size:.68rem;color:rgba(255,255,255,.45);margin-top:1px }
.sp-stat-sep { width:1px;height:34px;background:rgba(255,255,255,.1) }
.sp-right { width:420px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:36px 28px;background:rgba(15,17,25,.8);border-right:1px solid rgba(255,255,255,.07);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px) }
.sp-form-card { width:100%;max-width:360px }
.sp-mob-logo { display:none;margin-bottom:18px }
.sp-form-head { margin-bottom:20px }
.sp-form-head h2 { font-size:1.5rem;font-weight:900;color:#fff;letter-spacing:-.03em;margin-bottom:5px }
.sp-form-head p { font-size:.84rem;color:rgba(255,255,255,.4) }
.sp-msg { display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:var(--r-lg);font-size:.83rem;font-weight:500;margin-bottom:14px }
.sp-msg-err { background:rgba(220,38,38,.12);border:1px solid rgba(220,38,38,.25);color:#fca5a5 }
.sp-msg-ok  { background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:#6ee7b7 }
.sp-field-grp { margin-bottom:13px }
.sp-field-grp label { display:block;font-size:.79rem;font-weight:600;color:rgba(255,255,255,.45);margin-bottom:6px }
.sp-field { display:flex;align-items:center;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);border-radius:var(--r-lg);overflow:hidden;transition:border-color .18s,background .18s,box-shadow .18s }
.sp-field:focus-within { border-color:var(--p);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(234,30,99,.15) }
.sp-fi { width:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:rgba(255,255,255,.28);border-left:1px solid rgba(255,255,255,.08);height:48px }
html[dir="ltr"] .sp-fi { border-left:none;border-right:1px solid rgba(255,255,255,.08) }
.sp-field:focus-within .sp-fi { color:var(--p-lt) }
.sp-inp { flex:1;padding:12px;background:transparent;border:none;outline:none;font-size:.9rem;font-family:inherit;color:#fff }
.sp-inp::placeholder { color:rgba(255,255,255,.25) }
.sp-eye { width:40px;height:48px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.28);font-size:.88rem;display:flex;align-items:center;justify-content:center;transition:color .18s;flex-shrink:0 }
.sp-eye:hover { color:var(--p-lt) }
.sp-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px }
.sp-rem { display:flex;align-items:center;gap:7px;font-size:.82rem;color:rgba(255,255,255,.45);cursor:pointer }
.sp-rem input { accent-color:var(--p) }
.sp-forg { font-size:.82rem;color:var(--p-lt) }
.sp-btn-submit { width:100%;padding:13px;border:none;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--p),var(--p-lt));color:#fff;font-size:.95rem;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;box-shadow:0 4px 20px rgba(234,30,99,.3);margin-bottom:12px }
.sp-btn-submit:hover { transform:translateY(-1px);box-shadow:0 6px 28px rgba(234,30,99,.5) }
.sp-or { display:flex;align-items:center;gap:10px;margin:12px 0 }
.sp-or::before,.sp-or::after { content:'';flex:1;height:1px;background:rgba(255,255,255,.1) }
.sp-or span { font-size:.75rem;color:rgba(255,255,255,.3) }
.sp-google-btn { width:100%;padding:11px 14px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);border-radius:var(--r-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;font-size:.87rem;font-weight:600;color:rgba(255,255,255,.75);transition:all .2s;position:relative;overflow:hidden;font-family:inherit;margin-bottom:12px }
.sp-google-btn:hover { background:rgba(255,255,255,.12) }
.sp-signup-link { text-align:center;font-size:.83rem;color:rgba(255,255,255,.4);margin-top:8px }
.sp-signup-link a { color:var(--p-lt);font-weight:700 }
.sp-steps-mob { display:none;margin-top:18px;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl) }
.sp-sm-step { display:flex;flex-direction:column;align-items:center;gap:3px }
.sp-sm-n { width:24px;height:24px;border-radius:50%;background:var(--p);color:#fff;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center }
.sp-sm-step span { font-size:.65rem;color:rgba(255,255,255,.55);font-weight:600 }
.sp-sm-arr { color:rgba(255,255,255,.22);font-size:.75rem }

/* ─── Responsive ─── */
@media(max-width:1100px){ .sp-left{ padding:36px 32px } }
@media(max-width:900px){
.sp-wrap { flex-direction:column-reverse }
.sp-left  { padding:24px 20px;gap:18px;order:2 }
.sp-right { width:100%;border-right:none;border-bottom:1px solid rgba(255,255,255,.07);padding:28px 20px;order:1 }
.sp-form-card { max-width:100% }
.sp-mob-logo { display:flex }
.sp-steps-mob { display:flex }
.sp-hero h1 { font-size:1.6rem }
.sp-why-grid { grid-template-columns:1fr 1fr;gap:8px }
}
@media(max-width:600px){
.sp-left  { padding:20px 16px;gap:14px }
.sp-right { padding:20px 16px }
.sp-form-head h2 { font-size:1.3rem }
.sp-hero h1 { font-size:1.3rem }
}



/* ════════════════════════════════════════════════════════════════
   HEVO BOT — Professional Clean Design (RTL Arabic)
   ════════════════════════════════════════════════════════════════ */

:root {
  --hevo-primary: var(--p, #EA1E63);
  --hevo-primary-dk: var(--p-dk, #c0134f);
  --hevo-primary-lt: var(--p-lt, #ff4081);
  --hevo-primary-05: var(--p-05, rgba(234,30,99,.05));
  --hevo-primary-10: var(--p-10, rgba(234,30,99,.10));
  --hevo-surface: var(--surf, #ffffff);
  --hevo-surface-2: var(--surf2, #f5f6f8);
  --hevo-border: var(--bdr, #e5e7eb);
  --hevo-text-1: var(--tx1, #111827);
  --hevo-text-2: var(--tx2, #6b7280);
  --hevo-text-3: var(--tx3, #9ca3af);
  --hevo-shadow: 0 4px 20px rgba(0,0,0,.1);
  --hevo-shadow-lg: 0 16px 40px rgba(0,0,0,.15);
  --hevo-radius: 12px;
  --hevo-radius-lg: 18px;
  --hevo-radius-xl: 24px;
  --hevo-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#hevo-bot {
  position: fixed;
  bottom: calc(var(--mob-nav-h, 64px) + 20px);
  left: 20px;
  z-index: 10000;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  direction: rtl;
}
html[dir="ltr"] #hevo-bot { direction: ltr; }

#hevo-toggle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--hevo-primary); color: #fff; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; box-shadow: 0 4px 14px rgba(234, 30, 99, 0.3);
  transition: all var(--hevo-transition);
}
#hevo-toggle:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(234, 30, 99, 0.45); }
#hevo-toggle:active { transform: scale(0.98); }

#hevo-panel {
  position: fixed; bottom: calc(var(--mob-nav-h, 64px) + 84px); left: 20px;
  width: 380px; max-width: calc(100vw - 40px); max-height: 600px;
  background: var(--hevo-surface); border: 1px solid var(--hevo-border);
  border-radius: var(--hevo-radius-xl); box-shadow: var(--hevo-shadow-lg);
  display: none; flex-direction: column; overflow: hidden;
  animation: hevo-up 0.25s var(--hevo-transition); z-index: 10001;
}
#hevo-panel.active { display: flex; }
@keyframes hevo-up { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

#hevo-panel .hevo-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--hevo-surface);
  border-bottom: 1px solid var(--hevo-border); flex-shrink: 0;
}
#hevo-panel .hevo-brand { display: flex; align-items: center; gap: 12px; }
#hevo-panel .hevo-logo {
  width: 32px; height: 32px; border-radius: 8px; object-fit: contain;
  filter: brightness(0) invert(1);
}
#hevo-panel .hevo-name { font-size: 1.05rem; font-weight: 700; color: var(--hevo-text-1); letter-spacing: -0.02em; }
#hevo-panel .hevo-status { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--hevo-text-3); }
#hevo-panel .hevo-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
  animation: hevo-pulse 2s ease-in-out infinite;
}
@keyframes hevo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
#hevo-panel .hevo-actions { display: flex; gap: 4px; }
#hevo-panel .hevo-action {
  width: 32px; height: 32px; border-radius: var(--hevo-radius);
  background: transparent; border: none; color: var(--hevo-text-3);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; transition: all var(--hevo-transition);
}
#hevo-panel .hevo-action:hover { background: var(--hevo-surface-2); color: var(--hevo-primary); }

#hevo-panel .hevo-messages {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth;
  background: linear-gradient(180deg, var(--hevo-surface) 0%, var(--hevo-surface) 96%, transparent 100%),
              repeating-linear-gradient(0deg, transparent, transparent 44px, var(--hevo-primary-05) 45px);
  background-size: 100% 45px;
}
#hevo-panel .hevo-messages::-webkit-scrollbar { width: 4px; }
#hevo-panel .hevo-messages::-webkit-scrollbar-thumb { background: var(--hevo-border); border-radius: 9999px; }
#hevo-panel .hevo-messages::-webkit-scrollbar-thumb:hover { background: var(--hevo-primary); }

#hevo-panel .hevo-msg { display: flex; gap: 10px; max-width: 88%; animation: hevo-msg-in 0.2s var(--hevo-transition); }
@keyframes hevo-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
#hevo-panel .hevo-msg.bot { align-self: flex-start; }
#hevo-panel .hevo-msg.user { align-self: flex-end; flex-direction: row-reverse; }
html[dir="ltr"] #hevo-panel .hevo-msg.user { flex-direction: row; }

#hevo-panel .hevo-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--hevo-primary-10); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 2px solid var(--hevo-surface); box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
#hevo-panel .hevo-avatar img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0) invert(1); }
#hevo-panel .hevo-msg.user .hevo-avatar { background: var(--hevo-primary); border-color: var(--hevo-primary); }

#hevo-panel .hevo-bubble {
  background: var(--hevo-surface-2); border: 1px solid var(--hevo-border);
  border-radius: var(--hevo-radius-lg); padding: 12px 16px;
  font-size: 0.87rem; color: var(--hevo-text-1); line-height: 1.65;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); white-space: pre-line;
}
#hevo-panel .hevo-msg.bot .hevo-bubble { border-top-right-radius: 6px; }
#hevo-panel .hevo-msg.user .hevo-bubble {
  background: var(--hevo-primary); color: #fff; border-color: var(--hevo-primary);
  border-top-left-radius: 6px; box-shadow: 0 4px 16px rgba(234, 30, 99, 0.25);
}
#hevo-panel .hevo-bubble p { margin: 0 0 10px; }
#hevo-panel .hevo-bubble p:last-child { margin-bottom: 0; }
#hevo-panel .hevo-bubble b { color: var(--hevo-primary); font-weight: 600; }
#hevo-panel .hevo-msg.user .hevo-bubble b { color: #fff; }
#hevo-panel .hevo-bubble a {
  color: var(--hevo-primary); text-decoration: none; font-weight: 600;
  border-bottom: 1px dashed var(--hevo-primary-10); transition: all var(--hevo-transition);
}
#hevo-panel .hevo-bubble a:hover { color: var(--hevo-primary-dk); border-bottom-style: solid; }
#hevo-panel .hevo-msg.user .hevo-bubble a { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.4); }

#hevo-panel .hevo-typing { display: flex; gap: 10px; padding: 0 18px 16px; }
#hevo-panel .hevo-typing-bubble {
  display: flex; align-items: center; gap: 4px; padding: 12px 16px;
  background: var(--hevo-surface-2); border: 1px solid var(--hevo-border);
  border-radius: var(--hevo-radius-lg);
}
#hevo-panel .hevo-typing-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--hevo-text-3);
  animation: hevo-type 1.4s ease-in-out infinite;
}
#hevo-panel .hevo-typing-dot:nth-child(2) { animation-delay: 0.15s; }
#hevo-panel .hevo-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes hevo-type { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

#hevo-panel .hevo-input-area {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px 16px;
  border-top: 1px solid var(--hevo-border); background: var(--hevo-surface);
}
#hevo-panel .hevo-input {
  flex: 1; padding: 11px 16px; background: var(--hevo-surface-2);
  border: 1.5px solid var(--hevo-border); border-radius: var(--hevo-radius-lg);
  font-size: 0.87rem; color: var(--hevo-text-1); outline: none;
  transition: all var(--hevo-transition); font-family: inherit; direction: rtl;
}
html[dir="ltr"] #hevo-panel .hevo-input { direction: ltr; }
#hevo-panel .hevo-input:focus { border-color: var(--hevo-primary); background: var(--hevo-surface); box-shadow: 0 0 0 3px var(--hevo-primary-10); }
#hevo-panel .hevo-input::placeholder { color: var(--hevo-text-3); }
#hevo-panel .hevo-send {
  width: 40px; height: 40px; border-radius: var(--hevo-radius);
  background: var(--hevo-primary); border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
  transition: all var(--hevo-transition); box-shadow: 0 3px 10px rgba(234, 30, 99, 0.25);
}
#hevo-panel .hevo-send:hover { background: var(--hevo-primary-dk); transform: scale(1.05); box-shadow: 0 5px 16px rgba(234, 30, 99, 0.35); }
#hevo-panel .hevo-send:active { transform: scale(0.98); }
#hevo-panel .hevo-send:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

@media (max-width: 600px) {
  #hevo-panel { width: calc(100vw - 32px); left: 16px; bottom: calc(var(--mob-nav-h, 64px) + 80px); border-radius: var(--hevo-radius-xl); }
  #hevo-panel .hevo-bubble { font-size: 0.84rem; padding: 11px 14px; }
  #hevo-panel .hevo-input { font-size: 0.85rem; padding: 10px 14px; }
}

html.dark #hevo-panel {
  --hevo-surface: var(--surf, #1f2937); --hevo-surface-2: var(--surf2, #374151);
  --hevo-border: var(--bdr, #4b5563); --hevo-text-1: var(--tx1, #f9fafb);
  --hevo-text-2: var(--tx2, #d1d5db); --hevo-text-3: var(--tx3, #9ca3af);
  --hevo-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); --hevo-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
}