/* بصيرة | المظهر والحركة (ثلاثة مظاهر + خلفية متحركة).
   كل الحركة بـ transform وopacity فقط (خفيفة على الجوال)، وتتوقف لمن يفضّل تقليل الحركة أو يطفيها من قائمة المظهر. */

:root{--bg-a:#eef4ef;--bg-b:#f8f1e1;--blob1:rgba(31,91,71,.24);--blob2:rgba(201,138,18,.22);--blob3:rgba(74,143,181,.16);--glass:rgba(255,255,255,.78)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg-a:#0d1612;--bg-b:#18221b;--blob1:rgba(108,195,160,.16);--blob2:rgba(232,176,74,.12);--blob3:rgba(110,160,220,.12);--glass:rgba(26,36,31,.78)}}
:root[data-theme="dark"]{--bg-a:#0d1612;--bg-b:#18221b;--blob1:rgba(108,195,160,.16);--blob2:rgba(232,176,74,.12);--blob3:rgba(110,160,220,.12);--glass:rgba(26,36,31,.78)}

/* رمال */
:root[data-skin="dune"]{--palm:#a14d28;--palm-soft:#f6e7dc;--saffron-soft:#fbeed6;--bg:#f8efe2;--line:#e6d9c8;--bg-a:#f9efe1;--bg-b:#fbe6d0;--blob1:rgba(161,77,40,.22);--blob2:rgba(214,150,40,.26);--blob3:rgba(200,100,90,.16);--glass:rgba(255,252,246,.8)}
@media (prefers-color-scheme: dark){:root[data-skin="dune"]:not([data-theme="light"]){--palm:#e59a6f;--palm-soft:#33241b;--saffron-soft:#35291a;--bg:#1a1410;--surface:#241b15;--line:#3a2e25;--bg-a:#18120e;--bg-b:#2a1d14;--blob1:rgba(229,154,111,.16);--blob2:rgba(232,176,74,.14);--blob3:rgba(200,110,100,.12);--glass:rgba(36,27,21,.8)}}
:root[data-theme="dark"][data-skin="dune"]{--palm:#e59a6f;--palm-soft:#33241b;--saffron-soft:#35291a;--bg:#1a1410;--surface:#241b15;--line:#3a2e25;--bg-a:#18120e;--bg-b:#2a1d14;--blob1:rgba(229,154,111,.16);--blob2:rgba(232,176,74,.14);--blob3:rgba(200,110,100,.12);--glass:rgba(36,27,21,.8)}

/* ليل: داكن دائماً */
:root[data-skin="night"]{color-scheme:dark;--bg:#0c1220;--surface:#151d30;--fg:#e8edf7;--muted:#9fb0cc;--line:#26324d;--palm:#7fd1c7;--palm-soft:#16303a;--saffron:#f0b95a;--saffron-soft:#33291a;--good:#5fca8e;--warn:#e6ad55;--bad:#ef7a6c;--bad-soft:#3a201d;--warn-soft:#352a17;--good-soft:#1b3326;--overlay:rgba(0,0,0,.65);--bg-a:#090e1a;--bg-b:#171236;--blob1:rgba(127,209,199,.16);--blob2:rgba(150,110,240,.20);--blob3:rgba(240,185,90,.10);--glass:rgba(21,29,48,.78)}

body{background:linear-gradient(160deg,var(--bg-a),var(--bg-b)) fixed;min-height:100vh}

/* طبقة ١: بقع ضوء تتحرك ببطء */
body::before{content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;will-change:transform;
  background:radial-gradient(38% 34% at 18% 22%,var(--blob1),transparent 70%),radial-gradient(34% 34% at 82% 18%,var(--blob2),transparent 70%),radial-gradient(44% 40% at 62% 86%,var(--blob3),transparent 70%);
  animation:drift 26s ease-in-out infinite alternate}
/* طبقة ٢: زخرفة نجمة ثمانية (هندسة إسلامية) تنساب قطرياً */
body::after{content:"";position:fixed;inset:-120px;z-index:-1;pointer-events:none;will-change:transform;background:var(--palm);opacity:.07;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='30' y='30' width='60' height='60'/%3E%3Crect x='30' y='30' width='60' height='60' transform='rotate(45 60 60)'/%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='30' y='30' width='60' height='60'/%3E%3Crect x='30' y='30' width='60' height='60' transform='rotate(45 60 60)'/%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px;
  animation:slide 70s linear infinite}
@keyframes drift{0%{transform:translate3d(-3%,-2%,0) rotate(0deg) scale(1)}50%{transform:translate3d(4%,3%,0) rotate(7deg) scale(1.1)}100%{transform:translate3d(-2%,5%,0) rotate(-6deg) scale(1.04)}}
@keyframes slide{to{transform:translate3d(120px,120px,0)}}

/* بطاقات زجاجية خفيفة تظهر الخلفية من خلفها */
.sec,.tile,.chip,.icon{background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chip[aria-pressed="true"]{background:var(--palm)}
.sec{box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}

/* الشعار يلمع */
h1{background:linear-gradient(100deg,var(--palm) 20%,var(--saffron) 50%,var(--palm) 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out infinite alternate}
@keyframes shine{to{background-position:100% 0}}

/* دخول الأقسام بالتتابع */
@keyframes rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.96);opacity:.6}100%{transform:none;opacity:1}}
.wrap>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards}   /* backwards: ما يبقى طبقة مستقلة بعد الانتهاء */
.top{z-index:30}   /* الرأس (والقائمة المنسدلة) فوق بطاقات الزجاج */
.wrap>:nth-child(2){animation-delay:.05s}.wrap>:nth-child(3){animation-delay:.1s}.wrap>:nth-child(4){animation-delay:.15s}.wrap>:nth-child(5){animation-delay:.2s}.wrap>:nth-child(6){animation-delay:.25s}.wrap>:nth-child(n+7){animation-delay:.3s}
.alert{animation:pop .35s ease both}
.tour-card{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
.sheet{animation:rise .35s cubic-bezier(.2,.7,.2,1) both}
.toast{animation:rise .3s ease both}
.tip{animation:pop .18s ease both}

/* أزرار حيّة */
.btn,.chip,.icon,.skin{transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.btn:hover,.chip:hover,.icon:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px var(--palm)}
.btn:active,.chip:active,.icon:active{transform:translateY(0) scale(.97)}
.btn.solid{background:linear-gradient(135deg,var(--palm),color-mix(in srgb,var(--palm) 70%,var(--saffron)))}
.price-box .big{background:linear-gradient(100deg,var(--saffron),var(--palm));-webkit-background-clip:text;background-clip:text;color:transparent}

/* اختيار المظهر */
.skins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.skin{display:flex;flex-direction:column;align-items:center;gap:8px;font:inherit;color:var(--fg);background:var(--glass);border:2px solid var(--line);border-radius:14px;padding:12px 6px;cursor:pointer}
.skin i{display:block;width:44px;height:44px;border-radius:50%;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.skin.on{border-color:var(--saffron);transform:translateY(-2px)}

/* تقليل الحركة: تفضيل النظام أو إيقاف يدوي من المظهر */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation:none!important;transition:none!important}

/* ================= مظاهر المشاهد: الوقت، سدو، نخيل ونجوم =================
   تثبّت ألوانها بنفسها (ما تتبع وضع الجهاز)، والمشهد SVG يُحقن في #bgscene من scenes.js */
#bgscene{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#bgscene svg{display:block;width:100%;height:100%}
:root[data-skin="time"] body::before,:root[data-skin="time"] body::after,
:root[data-skin="sadu"] body::before,:root[data-skin="sadu"] body::after,
:root[data-skin="palm"] body::before,:root[data-skin="palm"] body::after{display:none}

/* داكنة: نخيل ونجوم + الوقت ليلاً */
:root[data-skin="palm"],:root[data-skin="time"][data-tod="night"]{color-scheme:dark;--bg:#0c1220;--surface:#151d30;--fg:#e8edf7;--muted:#9fb0cc;--line:#26324d;--palm:#7fd1c7;--palm-soft:#16303a;--saffron:#f0b95a;--saffron-soft:#33291a;--good:#5fca8e;--warn:#e6ad55;--bad:#ef7a6c;--bad-soft:#3a201d;--warn-soft:#352a17;--good-soft:#1b3326;--overlay:rgba(0,0,0,.65);--bg-a:#070c1c;--bg-b:#222c52;--glass:rgba(21,29,48,.82)}
/* فاتحة: الوقت (فجر ونهار) */
:root[data-skin="time"][data-tod="dawn"],:root[data-skin="time"][data-tod="day"]{color-scheme:light;--bg:#f4f1ea;--surface:#fffdf8;--fg:#1d2a24;--muted:#5f6f67;--line:#e2dccf;--palm:#1f5b47;--palm-soft:#e3eee8;--saffron:#b87a0a;--saffron-soft:#fbf1dc;--good:#24804f;--warn:#b7791f;--bad:#c0392b;--bad-soft:#fbe7e4;--warn-soft:#fcf3e1;--good-soft:#e4f3ea;--overlay:rgba(20,30,25,.45);--bg-a:#a9d6f0;--bg-b:#e9f5fb;--glass:rgba(255,253,248,.84)}
/* غروب دافئ */
:root[data-skin="time"][data-tod="dusk"]{color-scheme:light;--bg:#f6ece4;--surface:#fffaf4;--fg:#2a1d1a;--muted:#6b5650;--line:#e6d3c6;--palm:#9a4426;--palm-soft:#f6e2d6;--saffron:#b8650a;--saffron-soft:#fbead3;--good:#24804f;--warn:#b7791f;--bad:#c0392b;--bad-soft:#fbe7e4;--warn-soft:#fcf3e1;--good-soft:#e4f3ea;--overlay:rgba(40,25,20,.5);--bg-a:#4b3b6b;--bg-b:#f6b36a;--glass:rgba(255,248,240,.84)}
/* سدو: كريمي دافئ بالأحمر والأسود والذهبي */
:root[data-skin="sadu"]{color-scheme:light;--bg:#f4ead8;--surface:#fff9ec;--fg:#2a1d17;--muted:#6b5a4e;--line:#e0d1b8;--palm:#7a1f1f;--palm-soft:#f2dcd4;--saffron:#a8780f;--saffron-soft:#f7ecc9;--good:#24804f;--warn:#b7791f;--bad:#b02a1f;--bad-soft:#fbe0da;--warn-soft:#fcf3e1;--good-soft:#e4f3ea;--overlay:rgba(40,25,20,.5);--bg-a:#f4ead8;--bg-b:#efe0c4;--glass:rgba(255,249,236,.86)}

/* حركات المشاهد (transform وopacity فقط) */
@keyframes twk{from{opacity:.2}to{opacity:1}}
@keyframes sway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
@keyframes cdrift{from{transform:translateX(-50px)}to{transform:translateX(60px)}}
@keyframes ddrift{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
@keyframes sdslide{to{transform:translateX(80px)}}
#bgscene .tw{animation:twk 3.2s ease-in-out infinite alternate}
#bgscene .tw1{animation-duration:4.4s;animation-delay:-1.3s}
#bgscene .tw2{animation-duration:2.6s;animation-delay:-2s}
#bgscene .sw{transform-box:fill-box;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite alternate}
#bgscene .cl{animation:cdrift 46s ease-in-out infinite alternate}
#bgscene .c2{animation-duration:60s;animation-direction:alternate-reverse}
#bgscene .c3{animation-duration:38s}
#bgscene .dn1{animation:ddrift 40s ease-in-out infinite alternate}
#bgscene .dn2{animation:ddrift 30s ease-in-out infinite alternate-reverse}
#bgscene .dn3{animation:ddrift 24s ease-in-out infinite alternate}
#bgscene .sd{animation:sdslide 22s linear infinite}
:root[data-skin="sadu"] .wrap:not(.narrow){padding-top:calc(var(--band,0px) + 14px)}
/* الرأس على مشهد: خلفية زجاجية عشان الشعار يبقى مقروء فوق أي سماء */
:root[data-skin="time"] .top,:root[data-skin="sadu"] .top,:root[data-skin="palm"] .top{background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;padding:8px 10px}

/* صف الصيغة في القائمة: خياران متجاوران بدل نافذة */
.mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--bg)}
.menu .seg button{display:inline-block;padding:5px 16px;border-radius:999px;font-size:.88rem;transition:background .2s,color .2s}
.menu .seg button:hover{background:var(--palm-soft)}
.menu .seg button[aria-checked="true"]{background:var(--palm);color:var(--bg)}

/* علامة الحفظ */
.save{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;transition:background .3s,color .3s}
.save b{font-weight:700}
.save.busy{background:var(--warn-soft);color:var(--warn)}
.save.ok{background:var(--good-soft);color:var(--good);animation:pop .35s ease both}
.save.done{color:var(--good);opacity:.85}
.save.err{background:var(--bad-soft);color:var(--bad)}
.spin{display:inline-block;width:9px;height:9px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spinr .8s linear infinite}
@keyframes spinr{to{transform:rotate(360deg)}}

/* ================= الشعار الحي والرأس ================= */
.brand{display:flex;align-items:center;align-self:flex-start}
.brand .mk{display:flex}
.brand .mk-svg{width:46px;height:46px;flex:none;transition:width .3s ease,height .3s ease}
.brand .dv{width:2px;height:30px;background:var(--saffron);border-radius:2px;margin:0 12px;flex:none;transform-origin:center;transition:transform .3s ease,margin .3s ease}
.brand .nmw{display:flex;overflow:hidden;max-width:150px;transition:max-width .4s ease,opacity .3s ease}
.brand .wm{white-space:nowrap;line-height:1.3;padding:2px 0}
.brand.big{align-self:center}
.brand.big .mk-svg{width:128px;height:128px}
.brand.big .dv{height:64px;margin:0 16px}
.brand.big .nmw{max-width:240px}
.brand.big .wm{font-size:2.6rem}
/* القص بس وقت الاختفاء أو الانكماش، وإلا يقص التوهج ويطلع مستطيل حول الاسم */
.brand:not(.pre) .nmw{overflow:visible}
.top.collapsed .brand .nmw{overflow:hidden}
/* قبل المقدمة: الخط والاسم مخفيين، ثم يطلعون من الخط */
.brand.pre .dv{transform:scaleY(0)}
.brand.pre .nmw{max-width:0;opacity:0}

/* التوهج على «بصيرة»: لمعة التدرج الأصلية فقط (بدون هالة) */
.brand.glow .wm{animation:shine 7s ease-in-out infinite alternate}

/* الرأس: يلصق فوق، وينكمش للشعار فقط لما ينزل المستخدم */
.top{position:sticky;top:8px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:8px 10px;transition:padding .25s ease}
.top.collapsed{padding:4px 10px}
/* منكمش: الاسم يختفي والشعار يكبر ويجي بالنص، وعلامة الحفظ وزر القائمة على الجانب */
.top.collapsed{min-height:64px}
.top.collapsed .grow{position:absolute;inset:0;align-items:center;justify-content:center;pointer-events:none}
.top.collapsed .brand{align-self:center}
.top.collapsed .brand .mk-svg{width:54px;height:54px}
.top.collapsed .save{margin-inline-start:auto}
.top.collapsed .save.done span{display:none}
.top.collapsed .brand .nmw{max-width:0;opacity:0}
.top.collapsed .brand .dv{transform:scaleY(0);margin:0;width:0}
.top.collapsed .badge{display:none}

/* شاشة التحميل: العين تدور يمين ويسار */
.boot{display:flex;flex-direction:column;align-items:center;gap:10px}
.boot-eye{width:96px;height:96px}
.boot-eye .gz{animation:bscan 1.5s ease-in-out infinite alternate}
@keyframes bscan{from{transform:translate(-7px,0)}to{transform:translate(7px,0)}}

/* الجولة: القسم المظلّل يوقف تحت الرأس اللاصق (وهو منكمش وقت التمرير) مو خلفه */
.tour-hl{scroll-margin-top:96px}