/* ملف التصميم المشترك: الألوان والخطوط للهب ولكل الأدوات. غيّر هنا فيتغيّر الكل. */
:root{color-scheme:dark;
/* الألوان الأساسية */
--bg:#0f1420;--panel:#171e2e;--field:#0c111c;--bar:#0b1020;
--ink:#ece6d6;--mute:#9aa5b8;--ln:#2b3448;
--gold:#e6b94f;--gold-hi:#f3d98a;--on-gold:#1a1405;
--crimson:#c53030;--crimson-ink:#ff9d92;--violet:#b987ee;
/* مشتقات */
--line:color-mix(in srgb,var(--gold) 30%,transparent);--line-str:color-mix(in srgb,var(--gold) 60%,transparent);
--frame:color-mix(in srgb,var(--gold) 78%,var(--panel));
--gold-a8:color-mix(in srgb,var(--gold) 8%,transparent);--gold-a14:color-mix(in srgb,var(--gold) 14%,transparent);--gold-a25:color-mix(in srgb,var(--gold) 25%,transparent);--gold-glow:color-mix(in srgb,var(--gold) 45%,transparent);
--crimson-a14:color-mix(in srgb,var(--crimson) 14%,transparent);--crimson-a40:color-mix(in srgb,var(--crimson) 40%,transparent);
--scrim:color-mix(in srgb,var(--bar) 82%,transparent);
/* التصنيفات والأنواع */
--tier-z:#8a5fd6;--tier-s:#d89a2b;--tier-a:#b8741f;--tier-b:#8f8a2a;--tier-c:#6f7a8a;--tier-d:#4d5f84;--tier-e:#44527a;--tier-f:#353d57;--tier-ink:#fff6dc;
--cat-1:#c9791f;--cat-2:#e6b94f;--cat-3:#4a9fd0;
/* خطوط ومقاسات */
--font-body:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;--font-display:var(--font-body);
--fs-xs:.75rem;--fs-sm:.875rem;--fs-md:1rem;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;
--cut:12px;--cut-lg:20px;--r:8px;--hair:1px;--maxw:560px;--meander:none;
/* أسماء بديلة تستخدمها الأدوات */
--pn:var(--panel);--in:var(--field);--tx:var(--ink);--mu:var(--mute);--gd:var(--gold);--good:var(--gold-hi);--ep:var(--violet);--weak:var(--crimson-ink);
--card:var(--panel);--bd:var(--ln);--ac:var(--gold);--mute-bg:var(--mute)}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ===== غلاف الهب (لا يؤثر على الأدوات) ===== */
body.hub{display:flex;flex-direction:column;height:100dvh;margin:0;padding:0;font-size:16px;line-height:1.6;box-sizing:border-box}
.hub *{box-sizing:border-box}
.hub .bar{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;background:var(--panel);border-bottom:1px solid var(--ln)}
.hub .bar h1{margin:0;font-size:18px;font-weight:700;color:var(--gold);flex:1}
.hub .icon-btn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.hub .icon-btn:hover{background:var(--field)}
.hub .icon-btn[hidden]{display:none}
.hub #view{flex:1;overflow-y:auto;padding:16px 14px;max-width:720px;width:100%;margin:0 auto}
.hub #view.full{padding:0;max-width:none;overflow:hidden}
.hub #view iframe{display:block;width:100%;height:100%;border:0;background:var(--bg)}
.hub .nav{display:flex;background:var(--panel);border-top:1px solid var(--ln);padding-bottom:env(safe-area-inset-bottom,0px)}
.hub .nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;color:var(--mute);text-decoration:none;font-size:12px}
.hub .nav a.on{color:var(--gold);font-weight:700}
.hub .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.hub .card{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:inherit;text-decoration:none}
.hub .card:hover{border-color:var(--line-str)}
.hub .card .ico{width:42px;height:42px;border-radius:10px;background:var(--gold-a14);color:var(--gold);display:grid;place-items:center;font-weight:700;font-size:20px}
.hub .card b{font-size:15px}
.hub .card small{color:var(--mute);line-height:1.4}
.hub .card .ver{position:absolute;top:12px;left:12px;font-size:11px;color:var(--mute);direction:ltr}
.hub .empty{padding:32px 16px;text-align:center;color:var(--mute);border:1px dashed var(--ln);border-radius:12px}
.hub .sec{background:var(--panel);border:1px solid var(--ln);border-radius:12px;padding:14px;margin-bottom:12px}
.hub .sec h2{margin:0 0 8px;font-size:15px;color:var(--gold)}
.hub .sec p{margin:0 0 10px;color:var(--mute);font-size:14px}
.hub .row{display:flex;gap:8px;flex-wrap:wrap}
.hub input[type=password]{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--ln);border-radius:10px;background:var(--field);color:var(--ink);font:inherit}
.hub .btn{padding:10px 14px;border:1px solid var(--ln);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer}
.hub .btn.primary{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:700}
.hub .btn.danger{color:var(--crimson-ink)}
.hub #toast{position:fixed;inset-inline:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));margin:auto;max-width:360px;padding:10px 14px;border-radius:10px;background:var(--gold);color:var(--on-gold);text-align:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}
.hub #toast.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hub #toast{transition:none}}

/* ===== مكونات الأدوات المشتركة: تبويبات وأزرار وشرائح (تُحمَّل بعد تنسيق كل أداة فتغلب عليه) ===== */
#nv .nb,.tabs .tab{border:1px solid var(--ln);background:none;color:var(--mute);border-radius:14px;font-family:inherit}
#nv .nb.on,.tabs .tab.on{border-color:var(--gold);color:var(--gold);background:var(--gold-a8);font-weight:700}
.btn,button.x{border:1px solid var(--ln);background:var(--panel);color:var(--ink);border-radius:10px;font-family:inherit}
.btn.d{color:var(--crimson-ink);border-color:var(--crimson-a40)}
.pr,.btn.p,button.done{background:var(--gold);border:1px solid var(--gold);color:var(--on-gold);border-radius:12px;font-weight:700}
.chip.on,.fl .btn.on{border-color:var(--gold);color:var(--gold);background:var(--gold-a14)}

/* ===== شريط الأدوات السفلي + شاشة التحميل ===== */
.hub .nav a{min-width:0;padding:7px 2px}
.hub .nav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.hub .nav .g{display:grid;place-items:center;height:22px;font-style:normal;font-size:19px;line-height:1}
.hub .bar h1 small{display:inline-block;direction:ltr;margin-right:8px;font-size:12px;font-weight:400;color:var(--mute)}
.hub #view.full{position:relative}
.hub .loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg)}
.hub .spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--ln);border-top-color:var(--gold);animation:rok-spin .8s linear infinite}
@keyframes rok-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hub .spin{animation:none}}