/* ============ م6: الأوضاع الخمسة (docs/FABLE-TASKS.md القسم 4) ============
   body[data-theme] = navy | gold | desert | night | paper. الافتراضي "تلقائي": رويال ذهبي، البوادي صحراوي.
   الألوان تُترجم لنفس متغيرات التطبيق (--ink الأرضية، --glass البطاقات، --accent الأساسي…) فكل الشاشات تتلون. */
[data-theme]{--font:"Readex Pro","Cairo","Tajawal","Noto Sans Arabic",system-ui,sans-serif;--r-lg:16px;--r-md:14px}
[data-theme="paper"]{--font:"IBM Plex Sans Arabic","Readex Pro","Cairo",system-ui,sans-serif}
[data-theme="navy"]{--ink:#eef1f6;--ink-1:#ffffff;--ink-2:#ffffff;--ink-3:#e6ebf5;--fg:#0f172a;--fg-2:#475569;--fg-3:#94a3b8;--glass:#ffffff;--glass-2:#e6ebf5;--edge:#e2e8f0;
  --accent:#13254d;--accent-2:#1e3a8a;--accent-deep:#0b1733;--on-accent:#ffffff;--accent-rgb:242,184,75;--lamsa:#f2b84b;--hdr-2:#b9c4dc;--link:#1e3a8a;
  --nav-off:#a9b6d3;--nav-on:#f2b84b;--nav-cap:rgba(242,184,75,.18);--mic-bg:#f2b84b;--mic-fg:#13254d;--seg-bg:rgba(255,255,255,.12);--seg-on:#f2b84b;--seg-on-fg:#13254d}
[data-theme="gold"]{--ink:#f6f1e6;--ink-1:#ffffff;--ink-2:#ffffff;--ink-3:#faf3df;--fg:#1c1917;--fg-2:#6b6152;--fg-3:#a89b7d;--glass:#ffffff;--glass-2:#faf3df;--edge:#eadfbf;
  --accent:#16120c;--accent-2:#8a6a1f;--accent-deep:#000;--on-accent:#f3dd8c;--accent-rgb:212,175,55;--lamsa:#d4af37;--hdr-2:#cdbb8f;--link:#8a6a1f;
  --nav-off:#a89b7d;--nav-on:#e7c35a;--nav-cap:rgba(212,175,55,.2);--mic-bg:linear-gradient(135deg,#f3dd8c,#d4af37 60%,#b8892b);--mic-fg:#16120c;--seg-bg:rgba(255,255,255,.06);--seg-on:linear-gradient(135deg,#f3dd8c,#d4af37 60%,#b8892b);--seg-on-fg:#16120c}
[data-theme="desert"]{--ink:#f6eee1;--ink-1:#ffffff;--ink-2:#ffffff;--ink-3:#f3e4cc;--fg:#2b1d12;--fg-2:#6f5a45;--fg-3:#b09779;--glass:#ffffff;--glass-2:#f3e4cc;--edge:#ecdcc2;
  --accent:#6b3f22;--accent-2:#9a5524;--accent-deep:#4e2c17;--on-accent:#fff3dc;--accent-rgb:240,194,123;--lamsa:#f0c27b;--hdr-2:#fbe3c2;--link:#9a5524;
  --nav-off:#e3c49d;--nav-on:#fff3dc;--nav-cap:rgba(255,243,220,.18);--mic-bg:#f6e3c0;--mic-fg:#6b3f22;--seg-bg:rgba(255,255,255,.14);--seg-on:#f6e3c0;--seg-on-fg:#6b3f22}
[data-theme="night"]{--ink:#121417;--ink-1:#1a1d21;--ink-2:#1a1d21;--ink-3:#23272d;--fg:#eceae6;--fg-2:#9aa0a8;--fg-3:#6b7178;--glass:#1a1d21;--glass-2:#23272d;--edge:#2a2e34;
  --accent:#f5b54a;--accent-2:#f5b54a;--accent-deep:#c98a24;--on-accent:#1a1306;--accent-rgb:245,181,74;--lamsa:#f5b54a;--hdr-2:#9aa0a8;--link:#7aa7d9;
  --nav-off:#8b9199;--nav-on:#f5b54a;--nav-cap:rgba(245,181,74,.16);--mic-bg:#f5b54a;--mic-fg:#1a1306;--seg-bg:rgba(255,255,255,.08);--seg-on:#f5b54a;--seg-on-fg:#1a1306;
  --ok:#7fd18b;--bad:#ff8a7a;--warn:#ffd28a}
[data-theme="paper"]{--ink:#f6f4ef;--ink-1:#fffdf8;--ink-2:#fffdf8;--ink-3:#ece8de;--fg:#1c1b19;--fg-2:#5c5a55;--fg-3:#9a978f;--glass:#fffdf8;--glass-2:#ece8de;--edge:#dcd7cb;
  --accent:#1c1b19;--accent-2:#1e3a8a;--accent-deep:#000;--on-accent:#efe6cc;--accent-rgb:28,27,25;--lamsa:#efe6cc;--hdr-2:#c9c5bb;--link:#1e3a8a;
  --nav-off:#b8b3a6;--nav-on:#efe6cc;--nav-cap:rgba(239,230,204,.16);--mic-bg:#efe6cc;--mic-fg:#1c1b19;--seg-bg:rgba(255,255,255,.1);--seg-on:#efe6cc;--seg-on-fg:#1c1b19}
/* ألوان المعنى بالأوضاع الفاتحة */
[data-theme="navy"],[data-theme="gold"],[data-theme="desert"],[data-theme="paper"]{--ok:#15803d;--bad:#b91c1c;--warn:#a16207}

/* البطاقات: بيضاء بحد رفيع بدل الزجاج، والخلفية الضبابية تختفي */
[data-theme] .bg{display:none}
[data-theme] body,body[data-theme]{background:var(--ink)}
[data-theme] .glass{background:var(--glass);border:1px solid var(--edge);box-shadow:0 6px 18px -12px rgba(15,23,42,.25)}
[data-theme="night"] .glass{box-shadow:0 8px 22px -14px rgba(0,0,0,.6)}
[data-theme] .glass::before,[data-theme] .hero::after{display:none}
[data-theme] .frost,[data-theme] .composer{backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme] .glass.quiet{background:var(--glass)}
[data-theme] .section a,[data-theme] .section button,[data-theme] a.acc,[data-theme] .acc{color:var(--link)}
[data-theme] .btn{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 22px -12px rgba(15,23,42,.45)}
[data-theme="gold"] .btn{background:linear-gradient(135deg,#2a2114,#16120c);color:#f3dd8c;border:1px solid rgba(212,175,55,.6)}
[data-theme] .btn.danger{background:#b91c1c;color:#fff}
[data-theme] .chip{background:var(--glass);border-color:var(--edge)}
[data-theme] .chip.on{background:var(--accent);color:var(--on-accent);box-shadow:none}
[data-theme] .tag{border:0}
[data-theme] .tag.ok{background:color-mix(in srgb,var(--ok) 14%,transparent)}
[data-theme] .tag.bad{background:color-mix(in srgb,var(--bad) 12%,transparent)}
[data-theme] .tag.warn{background:color-mix(in srgb,var(--warn) 14%,transparent)}

/* رأس كل شاشة: شريط بلون الوضع بعرض الشاشة (حركته من themes-gen.css) */
[data-theme] .top{margin:calc(-1 * (var(--safe-t) + 14px)) -16px 16px;padding:calc(var(--safe-t) + 20px) 18px 18px;color:#fff;background-repeat:no-repeat;position:relative;overflow:hidden}
[data-theme] .top small{color:var(--hdr-2)}
[data-theme] .top .ibtn{background:rgba(255,255,255,.12);border:0;box-shadow:none;color:#fff}
[data-theme] .top .chip{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}
[data-theme] .top .chip.on{background:var(--seg-on);color:var(--seg-on-fg)}
[data-theme="paper"] .top{border-bottom:3px double #c9c5bb}

/* الهيرو بأي شاشة: لون الرأس والأرقام بلون اللمسة */
[data-theme] .hero{color:#fff;border:0}
[data-theme="navy"] .hero{background:#13254d}
[data-theme="gold"] .hero{background:linear-gradient(135deg,#0c0a07 0%,#2a2114 48%,#0c0a07 100%);border:1px solid rgba(212,175,55,.45)}
[data-theme="desert"] .hero{background:linear-gradient(180deg,#7a4224 0%,#a65d2c 55%,#cf8a4f 100%)}
[data-theme="night"] .hero{background:linear-gradient(160deg,#1d2128,#121417);border:1px solid #2a2e34}
[data-theme="paper"] .hero{background:#1c1b19}
[data-theme] .hero .label,[data-theme] .hero .sub{color:var(--hdr-2)}
[data-theme] .hero .big{color:var(--lamsa)}
[data-theme="gold"] .hero .big{background:linear-gradient(90deg,#fff4c7 0%,#e7c35a 50%,#c99a2e 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme] .hero a{color:var(--lamsa)}
[data-theme] .hero .reveal-pill{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}

/* ============ الرئيسية الحية ============ */
.home-head{position:relative;overflow:hidden;color:#fff;margin:calc(-1 * (var(--safe-t) + 14px)) -16px 0;padding:calc(var(--safe-t) + 20px) 18px 62px}
.home-head .scene{position:absolute;inset:0;pointer-events:none}
.home-head .scene>*{max-width:none}
.home-head .content{position:relative;display:flex;flex-direction:column;gap:12px}
[data-theme="navy"] .home-head{background:#13254d}
[data-theme="navy"] .home-head .scene::before,[data-theme="navy"] .home-head .scene::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;filter:blur(40px);opacity:.35;animation:rk-a 19s ease-in-out infinite alternate}
[data-theme="navy"] .home-head .scene::before{background:#2c4a8f;top:-80px;right:-60px}
[data-theme="navy"] .home-head .scene::after{background:#f2b84b;opacity:.12;bottom:-120px;left:-80px;animation:rk-b 23s ease-in-out infinite alternate}
[data-theme="gold"] .home-head{background:linear-gradient(135deg,#0c0a07 0%,#2a2114 48%,#0c0a07 100%);background-size:240% 240%;animation:rk-shift 24s ease-in-out infinite alternate;border-bottom:1px solid rgba(212,175,55,.55)}
[data-theme="desert"] .home-head{background:linear-gradient(180deg,#7a4224 0%,#a65d2c 45%,#cf8a4f 80%,#e3a96b 100%);background-size:100% 160%;animation:bw-sky 30s ease-in-out infinite alternate;padding-bottom:66px}
[data-theme="night"] .home-head{background:radial-gradient(circle at 20% 0%,rgba(245,181,74,.24),rgba(245,181,74,0) 45%),linear-gradient(160deg,#1d2128 0%,#121417 100%);background-size:170% 170%,100% 100%;background-repeat:no-repeat;animation:th-glow 18s ease-in-out infinite alternate;border-bottom:1px solid #2a2e34}
[data-theme="paper"] .home-head{background:#1c1b19;border-bottom:3px double #c9c5bb}
.home-head .hello{display:flex;justify-content:space-between;align-items:center}
.home-head .who{display:flex;align-items:center;gap:10px}
.home-head .avatar{width:40px;height:40px;border-radius:20px;background:var(--seg-on);color:var(--seg-on-fg);display:grid;place-items:center;font-weight:700;font-size:16px}
.home-head .greet{font-size:12px;color:var(--hdr-2);display:flex;align-items:center;gap:6px}
.home-head .greet img{width:18px;height:18px;border-radius:50%;background:#fff;object-fit:contain}
.home-head .name{font-size:16px;font-weight:700;display:inline-flex;align-items:center;gap:4px;min-height:28px}
.home-head .name svg{width:16px;height:16px;stroke:var(--hdr-2);fill:none;stroke-width:2}
.home-head .bell{width:44px;height:44px;border-radius:22px;background:rgba(255,255,255,.1);display:grid;place-items:center;position:relative}
.home-head .bell svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.home-head .bell .dot{position:absolute;top:9px;left:10px;width:9px;height:9px;border-radius:50%;background:#e0604b}
.home-head .search{min-height:44px;border-radius:12px;background:rgba(255,255,255,.08);color:var(--hdr-2);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:14px}
.home-head .search svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.home-head .cap-label{font-size:13px;color:var(--hdr-2)}
.home-head .cap{font-size:34px;font-weight:700;letter-spacing:-.5px;line-height:1.15;color:var(--lamsa)}
[data-theme="gold"] .home-head .cap{background:linear-gradient(90deg,#fff4c7 0%,#e7c35a 50%,#c99a2e 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="desert"] .home-head .cap{color:#fff}
.home-head .profit{align-self:flex-start;font-size:13px;color:var(--lamsa);border:1px solid color-mix(in srgb,var(--lamsa) 60%,transparent);background:color-mix(in srgb,var(--lamsa) 12%,transparent);border-radius:12px;padding:4px 10px}
[data-theme="desert"] .home-head .profit{color:#fff3dc;border-color:rgba(255,243,220,.6);background:rgba(255,243,220,.14)}
.home-head .reveal-pill{background:rgba(255,255,255,.12);border:0;color:#fff}
.quick{position:relative;margin:-40px 0 4px;background:var(--glass);border:1px solid var(--edge);border-radius:18px;padding:12px 6px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));box-shadow:0 10px 24px rgba(60,45,10,.14);z-index:1}
.quick button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--fg);min-height:64px}
.quick .qi{width:42px;height:42px;border-radius:13px;background:var(--glass-2);border:1px solid var(--edge);display:grid;place-items:center;color:var(--link)}
.quick .qi svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.quick button.ai .qi{background:var(--accent);border-color:var(--lamsa);color:var(--lamsa)}
.quick .qi{position:relative}
.quick .qn{position:absolute;top:-6px;left:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#e0604b;color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center;box-shadow:0 0 0 2px var(--glass)}
.quick .qn:empty{display:none}
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.cards2 .c{background:var(--glass);border:1px solid var(--edge);border-top:3px solid var(--lamsa);border-radius:14px;padding:13px 14px;display:flex;flex-direction:column;gap:4px;text-align:start}
.cards2 .c.red{border-top-color:var(--bad)}
.cards2 .k{font-size:12px;color:var(--fg-2)}.cards2 .v{font-size:20px;font-weight:700}.cards2 .s{font-size:12px;color:var(--fg-2)}
.attn{background:var(--glass);border:1px solid var(--edge);border-radius:14px;display:flex;flex-direction:column}
.attn>button{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--edge);text-align:start}
.attn>button:last-child{border-bottom:0}
.attn .ai{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none}
.attn .ai svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.attn .ai.bad{background:color-mix(in srgb,var(--bad) 12%,transparent)}.attn .ai.warn{background:color-mix(in srgb,var(--warn) 14%,transparent)}.attn .ai.ok{background:color-mix(in srgb,var(--ok) 14%,transparent)}.attn .ai.acc{background:var(--glass-2);color:var(--link)}
.attn .tx{flex:1;display:flex;flex-direction:column;gap:2px}.attn .tx b{font-size:14px;font-weight:600}.attn .tx small{font-size:12px;color:var(--fg-2)}
.attn .v{font-size:14px;font-weight:700}

/* مفتاح الكبسولة: الشركة والتبويبات (طلب حسين: مثل Seg بالقديم) */
.coswitch,.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:999px;isolation:isolate}
.coswitch{background:var(--seg-bg);border:1px solid color-mix(in srgb,var(--lamsa) 45%,transparent)}
.coswitch button,.seg button{position:relative;z-index:1;min-height:40px;border-radius:999px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;color:inherit;transition:color .26s;background:none;transform:none!important;padding:6px 8px;white-space:nowrap}
.coswitch button{color:#e8dcc0}
.coswitch button.on{color:var(--seg-on-fg);font-weight:700}
.coswitch img{width:18px;height:18px;border-radius:50%;background:#fff;object-fit:contain}
.coswitch::before,.seg::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:var(--x,4px);width:var(--w,0);border-radius:999px;background:var(--seg-on);transition:left .26s cubic-bezier(.34,1.56,.64,1),width .26s cubic-bezier(.34,1.56,.64,1)}
[data-theme] .seg{background:var(--glass);border:1px solid var(--edge);margin-bottom:12px;box-shadow:none}
[data-theme] .seg::before{background:var(--accent)}
[data-theme] .seg button{color:var(--fg-2)}
[data-theme] .seg button.on{background:none!important;color:var(--on-accent)}
.seg button .n{font-size:11px;opacity:.75;font-weight:500}
.seg.scroll{display:flex;overflow-x:auto;scrollbar-width:none}.seg.scroll::-webkit-scrollbar{display:none}
.seg.scroll button{flex:none;padding:6px 14px}
.seg.scroll::before{left:calc(var(--x,4px) - var(--sl,0px))}
.swipe-hint{animation:swipeIn .26s var(--out)}
@keyframes swipeIn{from{opacity:.4;transform:translateX(var(--dx,0))}}

/* ============ الشريط السفلي الملوّن والمتحرك ============ */
[data-theme] .nav{left:0;right:0;bottom:0;border-radius:0;padding:6px 6px calc(var(--safe-b) + 8px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:0;height:auto;min-height:72px;box-shadow:0 -8px 20px rgba(15,23,42,.18);border-left:0;border-right:0;border-bottom:0;background-repeat:no-repeat}
[data-theme] .nav::before,[data-theme] .nav .pill{display:none}
[data-theme] .nav button{flex:none;color:var(--nav-off);font-size:11px;font-weight:500;padding:4px 0 2px;gap:4px;border-radius:0;background:none}
[data-theme] .nav button.on{color:var(--nav-on);font-weight:600}
[data-theme] .nav button .ic{width:44px;height:28px;border-radius:14px;display:grid;place-items:center;transition:background .3s}
[data-theme] .nav button.on .ic{background:var(--nav-cap)}
[data-theme] .nav button svg{width:22px;height:22px;transform:none!important}
[data-theme] .nav button.on svg{transform:none!important}
[data-theme] .nav button.mic{color:var(--nav-on)}
[data-theme] .nav .orb{position:relative;width:58px;height:58px;margin-top:-30px;border-radius:29px;background:var(--mic-bg);border:4px solid var(--ink);display:grid;place-items:center;color:var(--mic-fg)}
[data-theme] .nav .orb svg{width:24px;height:24px}
[data-theme] .nav .orb .ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--nav-on);animation:nv-ring 2.4s ease-out infinite}
[data-theme] .nav .orb .ring.r2{animation-delay:-1.2s}
[data-theme] .view{padding-bottom:calc(96px + var(--safe-b))}
[data-theme] .fab{left:18px;bottom:calc(86px + var(--safe-b));width:58px;height:58px;border-radius:29px;background:var(--seg-on);color:var(--seg-on-fg);box-shadow:0 12px 26px -10px rgba(15,23,42,.45)}
[data-theme="gold"] .fab{background:linear-gradient(135deg,#f3dd8c,#d4af37 60%,#b8892b)}
/* أيقونات الشريط تبقى تتحرك ما لم يطفّها المستخدم أو "تقليل الحركة" */
[data-navanim="0"] .nav *{animation:none!important}

/* ============ الحركة: متحركة | عادية، والسرعة ============ */
[data-anim="normal"] .screen,[data-anim="normal"] .stagger>*{animation:none!important}
[data-anim="normal"] .top,[data-anim="normal"] .top *,[data-anim="normal"] .home-head,[data-anim="normal"] .home-head *,[data-anim="normal"] .hero,[data-anim="normal"] .hero *{animation:none!important}
[data-anim="normal"] .home-head .scene{display:none}
[data-speed="calm"] .screen{animation-duration:.9s}
[data-speed="calm"] .stagger>*{animation-duration:1s}
[data-speed="calm"] .home-head .scene svg[style*="bw-birds"],[data-speed="calm"] .home-head .scene svg[style*="bw-sand"]{display:none}
@media (prefers-reduced-motion:reduce){[data-theme] *{animation:none!important;transition:none!important}}

/* ============ المظهر ============ */
.swatches{display:grid;gap:10px}
.swatch{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--edge);text-align:start}
.swatch.on{outline:2px solid var(--link);outline-offset:1px}
.swatch .sw{width:54px;height:40px;border-radius:10px;flex:none;position:relative;overflow:hidden}
.swatch .sw i{position:absolute;left:6px;bottom:6px;width:16px;height:6px;border-radius:3px}
.swatch b{font-size:14px}.swatch small{display:block;font-size:12px;color:var(--fg-2)}
.toggle{width:46px;height:28px;border-radius:14px;background:var(--glass-2);border:1px solid var(--edge);position:relative;flex:none;transition:background .2s}
.toggle::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:right .2s}
.toggle.on{background:var(--ok)}.toggle.on::after{right:21px}
.admin-menu .item{width:100%}
.attn>button>svg{width:16px;height:16px;stroke:var(--fg-3);fill:none;stroke-width:2;flex:none}
[data-theme] .nav.glass{border-top-width:1px}
/* التبويبات من نوع glass: الكبسولة المنزلقة بدل حافة الزجاج */
[data-theme] .seg.glass::before{display:block;-webkit-mask:none;mask:none;padding:0;opacity:1;animation:none;inset:auto;top:4px;bottom:4px;background:var(--accent)}
/* التبويبات القابلة للتمرير (الصندوق): الخلفية على الزر النشط نفسه */
[data-theme] .seg.scroll::before,[data-theme] .seg.scroll.glass::before{display:none}
[data-theme] .seg.scroll button.on{background:var(--accent)!important;color:var(--on-accent)}