/* =========================================================
   هيكل التطبيق — شريط تبويبات سفلي وسلوك أقرب للتطبيقات الأصلية
   ========================================================= */
body{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  overscroll-behavior:none;
}
input,textarea{-webkit-user-select:text;user-select:text}

/* مساحة سفلية: شريط الإجراءات + شريط التبويبات */
.app{padding-bottom:calc(184px + env(safe-area-inset-bottom))}
body.no-actionbar .app{padding-bottom:calc(104px + env(safe-area-inset-bottom))}

/* شريط الإجراءات يجلس فوق التبويبات */
.bottom{
  bottom:calc(70px + env(safe-area-inset-bottom));
  padding:10px 14px;
  background:linear-gradient(to top,var(--bg) 70%,transparent);
}

/* ---------- شريط التبويبات ---------- */
.tabbar{
  position:fixed;inset-inline:0;bottom:0;z-index:40;
  max-width:560px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(13,20,32,.96);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:9px 0 8px;text-decoration:none;color:var(--muted);
  font-size:11px;font-weight:700;
  transition:color .15s;
}
.tabbar a svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar a.on{color:var(--accent)}
.tabbar a:active{background:rgba(255,255,255,.04)}

/* ---------- تبويبات داخل الصفحة ---------- */
.pagetabs{
  position:sticky;top:66px;z-index:20;
  display:flex;gap:6px;padding:8px 12px;
  background:rgba(10,16,24,.94);backdrop-filter:blur(12px);
  overflow-x:auto;
}
.pagetabs::-webkit-scrollbar{display:none}
.pagetabs button{
  flex:none;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:700;
  color:var(--muted);background:var(--surface);border:1px solid var(--line);
}
.pagetabs button.on{background:var(--accent);border-color:var(--accent);color:#fff}
[data-panel]{display:none}
[data-panel].on{display:block}

/* لمسة أصلية: استجابة الضغط */
.btn:active,.pill:active,.chip:active,.tile:active,.icon-btn:active{transform:scale(.97)}
.btn,.pill,.chip,.tile,.icon-btn{transition:transform .08s ease}

/* إصلاح تراكب زر الحالة الفارغة مع النص */
.empty .pick{display:block;width:fit-content;margin:18px auto 0}

/* المنزلقات تبقى من اليسار لليمين حتى يطابق الامتلاء القيمة */
input[type=range]{direction:ltr}

/* زر اللغة */
.lang-btn{
  text-decoration:none;font-size:12.5px;font-weight:800;letter-spacing:.5px;
  border:1px solid var(--line);border-radius:14px;color:var(--muted);
}
.lang-btn:active{color:var(--text);border-color:var(--accent)}

/* العنوان يبقى في المنتصف مع وجود زر اللغة */
.topbar h1{flex:1;text-align:center}