:root{ color-scheme: light; }
html.dark{ color-scheme: dark; }
body{ font-family:'Inter',system-ui,sans-serif; }
.font-display{ font-family:'Poppins',system-ui,sans-serif; }
html[dir="rtl"] body{ font-family:'Noto Sans Arabic','Inter',system-ui,sans-serif; }

.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

.card{ background:#fff; border:1px solid #ebebeb; border-radius:1.25rem; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.card:hover{ box-shadow:0 6px 20px rgba(0,0,0,.10); }
.card-lift:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.14); }
.dark .card{ background:#1c1c1e; border-color:#2c2c2e; }
.dark .card:hover{ box-shadow:0 6px 20px rgba(0,0,0,.5); }

.field{ background:#fff; border:1px solid #dddddd; border-radius:.85rem; transition:border-color .15s ease, box-shadow .15s ease; }
.field:focus{ outline:none; border-color:#222; box-shadow:0 0 0 2px rgba(0,0,0,.08); }
.dark .field{ background:#2a2a2c; border-color:#3a3a3c; color:#ededed; }
.dark .field:focus{ border-color:#eee; box-shadow:0 0 0 2px rgba(255,255,255,.1); }

.btn{ transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{ background:linear-gradient(90deg,#FF385C,#E61E4D 60%,#BD1E59); color:#fff; box-shadow:0 4px 14px rgba(230,30,77,.35); }
.btn-primary:hover{ box-shadow:0 6px 20px rgba(230,30,77,.45); }
.btn-ghost{ background:#fff; border:1px solid #dddddd; color:#222; }
.btn-ghost:hover{ background:#f7f7f7; }
.dark .btn-ghost{ background:#2a2a2c; border-color:#3a3a3c; color:#ededed; }
.dark .btn-ghost:hover{ background:#333; }

.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:9999px; margin:.16rem; font-weight:600; font-size:.88rem; cursor:pointer; background:#f2f2f2; border:1px solid #eaeaea; }
.chip:hover{ border-color:#FF385C; color:#E31C5F; }
.chip .sc{ font-size:.7rem; opacity:.55; font-weight:700; }
.dark .chip{ background:#2a2a2c; border-color:#3a3a3c; }

.cat{ display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.6rem .35rem; min-width:76px; color:#717171; border-bottom:2px solid transparent; cursor:pointer; transition:color .15s ease, border-color .15s ease, opacity .15s ease; opacity:.85; text-decoration:none; }
.cat:hover{ color:#222; opacity:1; }
.dark .cat:hover{ color:#fff; }
.cat .ic{ font-size:1.35rem; }
.cat .lb{ font-size:.72rem; font-weight:600; white-space:nowrap; }
.cat.active{ color:#222; border-bottom-color:#222; opacity:1; }
.dark .cat.active{ color:#fff; border-bottom-color:#fff; }

.prose-block p{ margin-bottom:1rem; line-height:1.7; }
.prose-block h2{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.5rem; margin:1.75rem 0 .75rem; }
.prose-block h3{ font-family:'Poppins',sans-serif; font-weight:600; font-size:1.15rem; margin:1.25rem 0 .5rem; }
.prose-block ul,.prose-block ol{ margin:0 0 1rem 1.25rem; line-height:1.7; }
.prose-block ul{ list-style:disc; }
.prose-block ol{ list-style:decimal; }
.prose-block li{ margin-bottom:.35rem; }
.prose-block code{ background:#f2f2f2; padding:.1rem .4rem; border-radius:.35rem; font-size:.9em; }
.dark .prose-block code{ background:#2a2a2c; }
.example{ background:#f7f7f7; border:1px solid #ececec; border-radius:1rem; padding:1rem 1.25rem; margin:.75rem 0; }
.dark .example{ background:#242426; border-color:#313133; }

.pop-letter{ display:inline-block; animation:pop .3s ease both; }
@keyframes pop{ 0%{transform:scale(.85);opacity:0;} 60%{transform:scale(1.04);} 100%{transform:scale(1);opacity:1;} }
.wl-box{ width:100%; aspect-ratio:1/1; text-transform:uppercase; text-align:center; font-weight:800; font-size:1.25rem; border-radius:.7rem; }
.scrollbox{ max-height:26rem; overflow:auto; }
.toast{ transition:opacity .3s ease, transform .3s ease; }
::selection{ background:#FF385C; color:#fff; }
select.lang{ appearance:none; background-image:none; }

.ad-slot{ margin:1.25rem auto; text-align:center; }
.ad-label{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#9a9a9a; margin-bottom:.35rem; }
.ad-ph{ border:1px dashed #d5d5d5; border-radius:1rem; background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f3f3f3 10px,#f3f3f3 20px); color:#b0b0b0; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem; min-height:90px; }
.dark .ad-ph{ border-color:#3a3a3c; background:repeating-linear-gradient(45deg,#1f1f21,#1f1f21 10px,#242426 10px,#242426 20px); color:#666; }
.ad-side .ad-ph{ min-height:600px; }