/* ==========================================================================
   KAYANZ - العوالم
   لكل شخصية جوّها: ألوان، حواف، ظلال، خلفية حيّة، وإيقاع حركة
   ========================================================================== */

/* ============ وضع بلا واجهة: شاشة كاملة ============ */
body.kz-bare{
  min-height:100dvh; display:block;
  padding:0 !important; margin:0;
  background:var(--bg); background-image:var(--bg-grad);
}
body.kz-bare .kz-full{
  max-width:none !important; width:100% !important;
  min-height:100dvh; padding:0 !important; margin:0 !important;
  display:flex; flex-direction:column;
}
body.kz-bare .kz-fab,
body.kz-bare .topbar,
body.kz-bare .sidenav{ display:none !important; }

/* ============================================================
   الانتقال بين العوالم - ستارة ملوّنة تمسح الشاشة
   ============================================================ */
.kw-curtain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:var(--wc, var(--rose));
  transform:scaleY(0); transform-origin:bottom;
}
.kw-curtain.in { animation:kwIn .42s cubic-bezier(.7,0,.84,0) forwards; }
.kw-curtain.out{ animation:kwOut .62s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes kwIn { from{transform:scaleY(0); transform-origin:bottom;} to{transform:scaleY(1); transform-origin:bottom;} }
@keyframes kwOut{ from{transform:scaleY(1); transform-origin:top;}  to{transform:scaleY(0); transform-origin:top;} }

.kw-curtain .kw-badge{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; text-align:center;
}
.kw-curtain .kw-badge .face{
  width:104px; height:104px; border-radius:30px; overflow:hidden;
  border:3px solid rgba(255,255,255,.5); margin:0 auto 14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:kwPop .5s cubic-bezier(.34,1.5,.64,1) .1s both;
}
.kw-curtain .kw-badge .nm{ font-size:24px; font-weight:700; animation:kwPop .5s cubic-bezier(.34,1.5,.64,1) .18s both; }
.kw-curtain .kw-badge .rl{ font-size:14px; opacity:.75; animation:kwPop .5s cubic-bezier(.34,1.5,.64,1) .26s both; }
@keyframes kwPop{ from{opacity:0; transform:scale(.7) translateY(14px);} to{opacity:1; transform:none;} }

/* دخول العالم: العناصر تتصاعد بالتتابع */
.kw-enter > *{ animation:kwRise .7s cubic-bezier(.16,1,.3,1) both; }
.kw-enter > *:nth-child(1){animation-delay:.05s} .kw-enter > *:nth-child(2){animation-delay:.12s}
.kw-enter > *:nth-child(3){animation-delay:.19s} .kw-enter > *:nth-child(4){animation-delay:.26s}
.kw-enter > *:nth-child(5){animation-delay:.33s} .kw-enter > *:nth-child(6){animation-delay:.40s}
@keyframes kwRise{ from{opacity:0; transform:translateY(26px) scale(.98);} to{opacity:1; transform:none;} }

/* ============================================================
   الطبقة المحيطة - خلفية حيّة لكل عالم
   ============================================================ */
.kw-amb{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.kw-amb i{ position:absolute; display:block; }

@keyframes kwDrift { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(4%,-5%) scale(1.12);} }
@keyframes kwDrift2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-5%,4%) scale(1.08);} }
@keyframes kwFall  { 0%{transform:translateY(-12vh) rotate(0); opacity:0;} 10%{opacity:.5;} 100%{transform:translateY(112vh) rotate(420deg); opacity:0;} }
@keyframes kwPulse { 0%,100%{opacity:.28;} 50%{opacity:.62;} }
@keyframes kwScan  { 0%{transform:translateY(-100%);} 100%{transform:translateY(100vh);} }

/* ---------- ١) أتيليه - دافئ، قماش وضوء ---------- */
[data-world="atelier"]{
  --w-radius:26px;
  --w-shadow:0 2px 8px rgba(120,76,92,.06), 0 18px 44px rgba(120,76,92,.10);
  --w-card:color-mix(in srgb, var(--card) 96%, var(--gold));
}
[data-world="atelier"] .kw-amb i:nth-child(1){
  width:52vw; height:52vw; inset-inline-start:-12vw; top:-14vh; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--c,var(--rose)) 26%, transparent), transparent 68%);
  filter:blur(38px); animation:kwDrift 22s ease-in-out infinite;
}
[data-world="atelier"] .kw-amb i:nth-child(2){
  width:44vw; height:44vw; inset-inline-end:-10vw; bottom:-16vh; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--gold) 24%, transparent), transparent 66%);
  filter:blur(46px); animation:kwDrift2 27s ease-in-out infinite;
}
[data-world="atelier"] .kw-amb i:nth-child(3){
  inset:0; background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.012) 0 2px, transparent 2px 6px);
}

/* ---------- ٢) دفتر - دقيق، شبكة وأرقام ---------- */
[data-world="ledger"]{
  --w-radius:10px;
  --w-shadow:0 1px 2px rgba(40,60,70,.06), 0 8px 20px rgba(40,60,70,.06);
  --w-card:var(--card);
}
[data-world="ledger"] .kw-amb{
  background-image:
    linear-gradient(to right, color-mix(in srgb,var(--c,#2f7d6b) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--c,#2f7d6b) 7%, transparent) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
}
[data-world="ledger"] .card,
[data-world="ledger"] .kz-tool,
[data-world="ledger"] .kx-panel{ border-radius:var(--w-radius) !important; }
[data-world="ledger"] .kz-hero{ border-radius:14px !important; }
[data-world="ledger"] .kz-kpi,
[data-world="ledger"] .kx-kpi .val{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ---------- ٣) استوديو - جريء وملوّن ---------- */
[data-world="studio"]{
  --w-radius:30px;
  --w-shadow:0 6px 18px color-mix(in srgb,var(--c,#c2557d) 14%, transparent), 0 26px 60px rgba(0,0,0,.10);
  --w-card:var(--card);
}
[data-world="studio"] .kw-amb i:nth-child(1){
  width:46vw; height:46vw; inset-inline-end:-8vw; top:-10vh;
  border-radius:44% 56% 58% 42% / 52% 44% 56% 48%;
  background:linear-gradient(135deg, color-mix(in srgb,var(--c,#c2557d) 40%, transparent), transparent 70%);
  filter:blur(26px); animation:kwDrift 18s ease-in-out infinite;
}
[data-world="studio"] .kw-amb i:nth-child(2){
  width:34vw; height:34vw; inset-inline-start:-6vw; bottom:-8vh;
  border-radius:58% 42% 40% 60% / 44% 56% 44% 56%;
  background:linear-gradient(135deg, color-mix(in srgb,var(--gold) 38%, transparent), transparent 72%);
  filter:blur(30px); animation:kwDrift2 21s ease-in-out infinite;
}
[data-world="studio"] .kz-tool-title,
[data-world="studio"] .kx-panel-head h3{ letter-spacing:-.03em; font-weight:700 !important; }
[data-world="studio"] .kz-tool:hover{ transform:translateY(-6px) rotate(-.6deg) !important; }

/* ---------- ٤) حديقة - عضوي وهادئ ---------- */
[data-world="garden"]{
  --w-radius:28px;
  --w-shadow:0 2px 8px rgba(60,90,70,.07), 0 16px 40px rgba(60,90,70,.09);
  --w-card:color-mix(in srgb, var(--card) 97%, #3d7d55);
}
[data-world="garden"] .kw-amb i{
  width:13px; height:13px; border-radius:0 100% 0 100%;
  background:color-mix(in srgb,var(--c,#2f7d9e) 34%, transparent);
  animation:kwFall linear infinite;
}
[data-world="garden"] .kw-amb i:nth-child(1){ inset-inline-start:12%; animation-duration:19s; animation-delay:0s; }
[data-world="garden"] .kw-amb i:nth-child(2){ inset-inline-start:34%; animation-duration:24s; animation-delay:3s; }
[data-world="garden"] .kw-amb i:nth-child(3){ inset-inline-start:58%; animation-duration:21s; animation-delay:6s; }
[data-world="garden"] .kw-amb i:nth-child(4){ inset-inline-start:79%; animation-duration:26s; animation-delay:9s; }
[data-world="garden"] .kw-amb i:nth-child(5){ inset-inline-start:91%; animation-duration:22s; animation-delay:13s; }
[data-world="garden"] .kz-tool,
[data-world="garden"] .card{ border-radius:var(--w-radius) !important; }

/* ---------- ٥) نيون - ليلي ومضيء ---------- */
[data-world="neon"]{
  --w-radius:20px;
  --w-shadow:0 0 0 1px color-mix(in srgb,var(--c,#a4622a) 18%, transparent),
             0 8px 32px color-mix(in srgb,var(--c,#a4622a) 22%, transparent);
  --w-card:color-mix(in srgb, var(--card) 92%, #2b2440);
}
[data-world="neon"] .kw-amb i:nth-child(1){
  width:60vw; height:60vw; inset-inline-start:-16vw; top:-20vh; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--c,#a4622a) 30%, transparent), transparent 62%);
  filter:blur(52px); animation:kwPulse 7s ease-in-out infinite;
}
[data-world="neon"] .kw-amb i:nth-child(2){
  width:2px; height:26vh; inset-inline-start:30%; top:0;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--c,#a4622a) 55%, transparent), transparent);
  animation:kwScan 9s linear infinite;
}
[data-world="neon"] .kw-amb i:nth-child(3){
  width:2px; height:20vh; inset-inline-start:72%; top:0;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--gold) 45%, transparent), transparent);
  animation:kwScan 13s linear infinite 3s;
}
[data-world="neon"] .card,
[data-world="neon"] .kz-tool,
[data-world="neon"] .kx-panel{ box-shadow:var(--w-shadow) !important; }
[data-world="neon"] .kz-kpi,
[data-world="neon"] .kx-kpi .val{ text-shadow:0 0 22px color-mix(in srgb,var(--c,#a4622a) 40%, transparent); }

/* ---------- ٦) ورق - صامت وبسيط ---------- */
[data-world="paper"]{
  --w-radius:4px;
  --w-shadow:none;
  --w-card:var(--card);
}
[data-world="paper"] .kw-amb{
  background-image:linear-gradient(to bottom, color-mix(in srgb,var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size:100% 34px;
  mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  opacity:.55;
}
[data-world="paper"] .card,
[data-world="paper"] .kz-tool,
[data-world="paper"] .kx-panel{
  border-radius:var(--w-radius) !important;
  box-shadow:none !important;
  border:1px solid var(--line) !important;
}
[data-world="paper"] .kz-hero{ border-radius:6px !important; box-shadow:none !important; }
[data-world="paper"] .kz-tool:hover{ transform:none !important; background:var(--card-soft) !important; }

/* ============ تطبيق متغيّرات العالم على العناصر ============ */
[data-world] .kz-tool,
[data-world] .kx-panel,
[data-world] .kz-one{
  border-radius:var(--w-radius, 20px);
  box-shadow:var(--w-shadow, var(--sh-1));
  background:var(--w-card, var(--card));
}

/* ============================================================
   لوحة الشخصية - ترتيب مختلف لكل دور
   ============================================================ */
.kz-tools{ display:grid; gap:15px; }

/* المحاسب: الأرقام أولًا وبعرض كامل */
[data-layout="numbers"] .kz-tools{ grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); }
[data-layout="numbers"] .kz-tool[data-type="kpi"]{ grid-column:span 1; }
[data-layout="numbers"] .kz-tool[data-type="kpi"] .kz-kpi{ font-size:clamp(28px,5vw,42px); }

/* التسويق/التصميم: بلاطات بصرية بأحجام مختلفة */
[data-layout="canvas"] .kz-tools{ grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); }
[data-layout="canvas"] .kz-tool[data-type="ai"]{ grid-column:span 2; }
@media (max-width:700px){ [data-layout="canvas"] .kz-tool[data-type="ai"]{ grid-column:span 1; } }

/* الإنتاج/المبيعات: عمود واحد كطابور */
[data-layout="queue"] .kz-tools{ grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); }
[data-layout="queue"] .kz-tool[data-type="board"]{ grid-column:span 2; }
@media (max-width:760px){ [data-layout="queue"] .kz-tool[data-type="board"]{ grid-column:span 1; } }

/* المساعد/المشتريات: قائمة هادئة ضيقة */
[data-layout="list"] .kz-tools{ grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); max-width:920px; }

/* ============================================================
   معالج بناء الشخصية - خطوة واحدة في الشاشة
   ============================================================ */
.kb{
  min-height:100dvh; display:flex; flex-direction:column;
  max-width:860px; margin:0 auto; padding:clamp(16px,3vw,28px);
}
.kb-top{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:14px;
}
.kb-face{
  width:74px; height:74px; border-radius:22px; overflow:hidden; flex:none;
  border:3px solid color-mix(in srgb,var(--c,var(--rose)) 38%, transparent);
  background:var(--card-soft);
  box-shadow:0 10px 30px color-mix(in srgb,var(--c,var(--rose)) 18%, transparent);
  transition:border-color .5s ease, box-shadow .5s ease;
}
.kb-face .kz-face{ width:100%; height:100%; display:block; }
.kb-id{ flex:1; min-width:0; }
.kb-id b{ font-size:17px; font-weight:600; display:block; }
.kb-id span{ font-size:13px; color:var(--ink-soft); }
.kb-x{
  background:none; border:none; cursor:pointer; font-family:inherit;
  color:var(--ink-soft); font-size:22px; line-height:1; padding:6px;
  border-radius:50%; transition:background .25s, color .25s;
}
.kb-x:hover{ background:var(--card-soft); color:var(--ink); }

/* شريط التقدّم */
.kb-bar{ height:4px; border-radius:99px; background:var(--card-soft); overflow:hidden; margin-bottom:6px; }
.kb-bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--c,var(--rose)), var(--gold));
  transition:width .55s cubic-bezier(.16,1,.3,1);
}
.kb-count{ font-size:12px; color:var(--ink-soft); text-align:center; margin-bottom:8px; }

/* منطقة الخطوة - تملأ ما تبقّى بلا تمرير */
.kb-body{ flex:1; display:flex; align-items:center; justify-content:center; padding:10px 0; }
.kb-step{ display:none; width:100%; }
.kb-step.on{ display:block; animation:kbIn .5s cubic-bezier(.16,1,.3,1) both; }
.kb-step.back.on{ animation:kbBack .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes kbIn  { from{opacity:0; transform:translateX(34px);} to{opacity:1; transform:none;} }
@keyframes kbBack{ from{opacity:0; transform:translateX(-34px);} to{opacity:1; transform:none;} }
[dir="rtl"] .kb-step.on{ animation-name:kbInR; }
[dir="rtl"] .kb-step.back.on{ animation-name:kbBackR; }
@keyframes kbInR  { from{opacity:0; transform:translateX(-34px);} to{opacity:1; transform:none;} }
@keyframes kbBackR{ from{opacity:0; transform:translateX(34px);} to{opacity:1; transform:none;} }

.kb-q{ text-align:center; margin-bottom:22px; }
.kb-q h2{ font-size:clamp(21px,3.6vw,30px); font-weight:600; letter-spacing:-.03em; }
.kb-q p{ margin-top:7px; font-size:14px; color:var(--ink-soft); }

.kb-opts{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  max-width:640px; margin:0 auto;
}
.kb-opts.wide{ grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); max-width:720px; }
.kb-opts.tight{ grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr)); max-width:560px; }
.kb-opts.swatch{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:520px; }

.kb-o{ position:relative; }
.kb-o input{ position:absolute; opacity:0; width:0; height:0; }
.kb-o > span{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; cursor:pointer;
  padding:16px 12px; border-radius:18px;
  border:1.5px solid color-mix(in srgb,var(--line) 70%, transparent);
  background:var(--card);
  font-size:13.5px; font-weight:500;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1), border-color .25s, background .25s, box-shadow .3s;
}
.kb-o > span .em{ font-size:22px; line-height:1; }
.kb-o > span small{ font-size:11.5px; color:var(--ink-soft); font-weight:400; line-height:1.45; }
.kb-o > span:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--c,var(--rose)) 45%, transparent); }
.kb-o input:checked + span{
  border-color:var(--pc, var(--c,var(--rose)));
  background:color-mix(in srgb, var(--pc, var(--c,var(--rose))) 11%, var(--card));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pc, var(--c,var(--rose))) 15%, transparent);
  transform:translateY(-3px);
}
.kb-o input:focus-visible + span{ outline:2px solid var(--c,var(--rose)); outline-offset:3px; }

/* حبّات لونية كبيرة */
.kb-sw > span{
  width:54px; height:54px; border-radius:18px; padding:0;
  border:3px solid transparent; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.kb-sw > span:hover{ transform:scale(1.12) rotate(-4deg); }
.kb-sw input:checked + span{
  border-color:var(--ink); transform:scale(1.14);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 12%, transparent);
}

/* حقول نصية داخل المعالج */
.kb-field{ max-width:440px; margin:0 auto 14px; }
.kb-field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }
.kb-field input[type=text], .kb-field textarea, .kb-field select{
  width:100%; padding:14px 16px; border-radius:16px; font-size:15px;
  border:1.5px solid color-mix(in srgb,var(--line) 70%, transparent);
  background:var(--card); color:var(--ink); font-family:inherit;
}
.kb-field textarea{ min-height:96px; resize:vertical; line-height:1.7; }

/* شريط التنقّل السفلي */
.kb-nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:16px; border-top:1px solid color-mix(in srgb,var(--line) 45%, transparent);
}
.kb-btn{
  border:none; cursor:pointer; font-family:inherit; font-weight:600;
  padding:14px 30px; border-radius:99px; font-size:15px;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1), filter .25s, box-shadow .3s;
}
.kb-btn.next{
  background:var(--c,var(--rose)); color:#fff;
  box-shadow:0 6px 22px color-mix(in srgb,var(--c,var(--rose)) 30%, transparent);
}
.kb-btn.next:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.kb-btn.next:active{ transform:scale(.97); }
.kb-btn.prev{ background:none; color:var(--ink-soft); padding:14px 18px; }
.kb-btn.prev:hover{ color:var(--ink); }
.kb-btn.prev[hidden]{ visibility:hidden; display:block !important; }
.kb-skip{
  background:none; border:none; cursor:pointer; font-family:inherit;
  color:var(--ink-soft); font-size:13px; text-decoration:underline; padding:6px;
}

/* ============ تقليل الحركة ============ */
@media (prefers-reduced-motion: reduce){
  .kw-amb, .kw-curtain{ display:none !important; }
  .kw-enter > *, .kb-step.on{ animation:none !important; }
}

@media (max-width:640px){
  .kb{ padding:14px; }
  .kb-face{ width:58px; height:58px; border-radius:18px; }
  .kb-btn{ padding:13px 22px; font-size:14px; }
  .kb-sw > span{ width:46px; height:46px; }
}

/* ==========================================================================
   منصّة الشخصية - واجهتها الخاصة بالكامل
   لا شريط المديرة · لكل أداة صفحتها · الجو يظل يتحرّك
   ========================================================================== */
.kc{ min-height:100dvh; display:flex; flex-direction:column; }

/* ---------- الشريط العلوي: هوية الشخصية ---------- */
.kc-top{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px clamp(14px,3vw,28px);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(1.6) blur(20px);
  -webkit-backdrop-filter:saturate(1.6) blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--c,var(--rose)) 16%, transparent);
}
.kc-face{
  width:52px; height:52px; border-radius:16px; overflow:hidden; flex:none;
  border:2px solid color-mix(in srgb,var(--c,var(--rose)) 42%, transparent);
  box-shadow:0 6px 20px color-mix(in srgb,var(--c,var(--rose)) 22%, transparent);
  animation:kcFloat 6s ease-in-out infinite;
}
@keyframes kcFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
.kc-face .kz-face{ width:100%; height:100%; display:block; }
.kc-who{ flex:1; min-width:140px; }
.kc-who b{ font-size:17px; font-weight:600; display:flex; align-items:center; gap:7px; }
.kc-who span{ font-size:12.5px; color:var(--ink-soft); }
.kc-lvl{
  font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:99px;
  background:var(--c,var(--rose)); color:#fff;
}
.kc-acts{ display:flex; gap:7px; flex-wrap:wrap; }
.kc-act{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 15px; border-radius:99px; cursor:pointer;
  border:1px solid color-mix(in srgb,var(--c,var(--rose)) 26%, transparent);
  background:color-mix(in srgb,var(--c,var(--rose)) 8%, transparent);
  color:var(--ink); font-family:inherit; font-size:13px; font-weight:600;
  text-decoration:none;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1), background .25s;
}
.kc-act:hover{ transform:translateY(-2px); background:color-mix(in srgb,var(--c,var(--rose)) 16%, transparent); }
.kc-act.solid{ background:var(--c,var(--rose)); color:#fff; border-color:transparent; }
.kc-act.exit{ background:none; border-color:transparent; color:var(--ink-soft); }
.kc-act.exit:hover{ color:var(--ink); }

/* ---------- الجسم: رصيف الأدوات + المحتوى ---------- */
.kc-body{
  flex:1; display:grid;
  grid-template-columns:238px 1fr;
  gap:clamp(14px,2.4vw,26px);
  padding:clamp(14px,2.4vw,26px);
  align-items:start;
}
.kc-rail{
  position:sticky; top:96px;
  display:flex; flex-direction:column; gap:3px;
  padding:12px;
  border-radius:22px;
  background:color-mix(in srgb,var(--card) 72%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--c,var(--rose)) 14%, transparent);
  max-height:calc(100dvh - 120px); overflow-y:auto;
}
.kc-rail-h{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); padding:8px 12px 6px;
}
.kc-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:14px;
  text-decoration:none; color:var(--ink-soft);
  font-size:13.5px; font-weight:500;
  transition:background .25s, color .25s, transform .3s cubic-bezier(.34,1.4,.64,1);
}
.kc-link .ic{ font-size:16px; width:22px; text-align:center; flex:none; }
.kc-link:hover{ background:color-mix(in srgb,var(--c,var(--rose)) 9%, transparent); color:var(--ink); transform:translateX(-2px); }
[dir="rtl"] .kc-link:hover{ transform:translateX(2px); }
.kc-link.on{
  background:color-mix(in srgb,var(--c,var(--rose)) 16%, transparent);
  color:var(--c,var(--rose)); font-weight:700;
}
.kc-link .n{
  margin-inline-start:auto; font-size:11px; font-weight:700;
  background:color-mix(in srgb,var(--ink) 8%, transparent);
  border-radius:99px; padding:1px 7px; color:var(--ink-soft);
}
.kc-link.on .n{ background:var(--c,var(--rose)); color:#fff; }

.kc-main{ min-width:0; animation:kwRise .55s cubic-bezier(.16,1,.3,1) both; }

/* ---------- صفحة أداة واحدة ---------- */
.kc-page-h{
  display:flex; align-items:center; gap:13px; margin-bottom:20px;
}
.kc-page-ic{
  width:48px; height:48px; border-radius:16px; flex:none;
  display:grid; place-items:center; font-size:22px;
  background:color-mix(in srgb,var(--c,var(--rose)) 13%, transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--rose)) 24%, transparent);
}
.kc-page-h h1{ font-size:clamp(22px,3.4vw,30px); font-weight:600; letter-spacing:-.03em; }
.kc-page-h p{ font-size:13px; color:var(--ink-soft); margin-top:2px; }

.kc-card{
  border-radius:var(--w-radius,22px);
  background:var(--w-card,var(--card));
  border:1px solid color-mix(in srgb,var(--line) 55%, transparent);
  box-shadow:var(--w-shadow,var(--sh-1));
  padding:clamp(16px,2.6vw,26px);
}

/* لمحة سريعة في الصفحة الرئيسية للشخصية */
.kc-glance{
  display:grid; gap:13px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  margin-bottom:22px;
}
.kc-tile{
  padding:18px; border-radius:var(--w-radius,20px);
  background:var(--w-card,var(--card));
  border:1px solid color-mix(in srgb,var(--line) 50%, transparent);
  box-shadow:var(--w-shadow,var(--sh-1));
  text-decoration:none; color:inherit; display:block;
  transition:transform .4s cubic-bezier(.34,1.4,.64,1), box-shadow .4s;
}
.kc-tile:hover{ transform:translateY(-5px); box-shadow:var(--sh-3); }
.kc-tile .l{ font-size:12px; color:var(--ink-soft); display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.kc-tile .v{ font-size:clamp(22px,3.6vw,30px); font-weight:600; letter-spacing:-.03em; }
.kc-tile .v small{ font-size:13px; font-weight:500; color:var(--ink-soft); }
.kc-tile .s{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; }
.kc-tile .v.good{ color:var(--good); } .kc-tile .v.bad{ color:var(--danger); } .kc-tile .v.warn{ color:var(--warn); }

/* الجو يظل يعمل دائمًا خلف كل شيء */
body[data-world] .kw-amb{ position:fixed; inset:0; z-index:-1; }

/* ---------- شاشات صغيرة: الرصيف يصير شريطًا أفقيًا ---------- */
@media (max-width:860px){
  .kc-body{ grid-template-columns:1fr; padding:12px; }
  .kc-rail{
    position:sticky; top:74px; z-index:50;
    flex-direction:row; overflow-x:auto; overflow-y:hidden;
    max-height:none; gap:6px; padding:9px;
    scrollbar-width:none;
  }
  .kc-rail::-webkit-scrollbar{ display:none; }
  .kc-rail-h{ display:none; }
  .kc-link{ flex:none; white-space:nowrap; padding:9px 14px; }
  .kc-link .n{ margin-inline-start:6px; }
  .kc-top{ padding:11px 13px; gap:10px; }
  .kc-face{ width:44px; height:44px; border-radius:14px; }
  .kc-acts .kc-act span.t{ display:none; }
  .kc-acts .kc-act{ padding:9px 12px; }
}