/* ============================================================
   ذُروة — طبقة العمق ثلاثي الأبعاد (مهارة omq فوق هوية huwiya)
   ضوء واحد من الأعلى · أزرار لها سُمك تُضغط · حقول غائرة · بطاقات طافية.
   قانون حفظ الارتفاع: translateY + سُمك الحافة = ثابت، فيبدو الزر مضغوطاً لا منزلقاً.
   تُحمَّل بعد app.css.
   ============================================================ */
:root {
  --d-ink: 11, 34, 48;
  --d-lift: 4px;
  --d-edge: #b5c3cc;
  --d-r: 20px; --d-r-s: 13px;
  --d-sh-1: 0 1px 0 #fff inset, 0 2px 4px rgba(var(--d-ink), .05), 0 10px 22px -12px rgba(var(--d-ink), .22);
  --d-sh-2: 0 1px 0 #fff inset, 0 -1px 0 rgba(var(--d-ink), .04) inset, 0 2px 4px rgba(var(--d-ink), .05), 0 14px 26px -14px rgba(var(--d-ink), .22), 0 36px 54px -36px rgba(var(--d-ink), .30);
  --d-sh-3: 0 2px 0 rgba(255,255,255,.7) inset, 0 4px 6px rgba(var(--d-ink), .06), 0 26px 40px -18px rgba(var(--d-ink), .32), 0 60px 80px -50px rgba(var(--d-ink), .4);
  --d-in: inset 0 2px 4px rgba(var(--d-ink), .09), 0 1px 0 #fff;
  /* ثلاثيات الألوان: c1 أفتح، c2 اللون، c3 الحافة الأغمق */
  --blue1: #4d9ad0; --blue2: #2e7fb8; --blue3: #1f5c88;
  --green1: #26a877; --green2: #17825c; --green3: #0d5c41;
  --gold1: #dcae63; --gold2: #b8893a; --gold3: #85621f;
  --red1: #d66565; --red2: #b23b3b; --red3: #832626;
  --deep1: #0a6272; --deep2: #033b45; --deep3: #01232a;
  --teal1: #4fb3b0; --teal2: #2f8f8c; --teal3: #1d6462;
}

/* الغرفة: مصدرا ضوء ثابتان في زاويتين متقابلتين */
body.room, body {
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(62,157,109,.16) 0, transparent 60%),
    radial-gradient(900px 520px at -8% 108%, rgba(184,137,58,.13) 0, transparent 58%),
    radial-gradient(700px 400px at 50% 40%, rgba(46,127,184,.06) 0, transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* البطاقات تطفو */
.card {
  background: linear-gradient(180deg, #fff 0%, #f8fbfc 100%);
  border: 1px solid rgba(var(--d-ink), .06);
  border-radius: var(--d-r);
  box-shadow: var(--d-sh-2);
}
.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.65), transparent 55%);
  opacity: 0; transition: opacity .25s; mix-blend-mode: soft-light; }
.tilt.on { box-shadow: var(--d-sh-3); }
.tilt.on::after { opacity: 1; }

/* الأزرار المرفوعة */
.btn {
  --c1: #ffffff; --c2: #eaf0f3; --c3: var(--d-edge); --hi: #fff;
  border-radius: var(--d-r-s); color: var(--ink);
  background: linear-gradient(180deg, var(--c1), var(--c2));
  border: 1px solid var(--c3);
  box-shadow: 0 1px 0 var(--hi) inset, 0 var(--d-lift) 0 var(--c3), 0 10px 16px -6px rgba(var(--d-ink), .32);
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 var(--hi) inset, 0 calc(var(--d-lift) + 2px) 0 var(--c3), 0 16px 20px -8px rgba(var(--d-ink), .34); }
.btn:active { transform: translateY(var(--d-lift)); box-shadow: 0 1px 0 var(--hi) inset, 0 0 0 var(--c3), 0 2px 4px rgba(var(--d-ink), .3); }
.btn:focus-visible { outline: 3px solid rgba(46,127,184,.45); outline-offset: 3px; }
.btn.p { --c1: var(--blue1); --c2: var(--blue2); --c3: var(--blue3); --hi: rgba(255,255,255,.35); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.22); border-color: var(--blue3); }
.btn.g { --c1: var(--green1); --c2: var(--green2); --c3: var(--green3); --hi: rgba(255,255,255,.3); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.22); }
.btn.d { --c1: var(--deep1); --c2: var(--deep2); --c3: var(--deep3); --hi: rgba(255,255,255,.18); color: #fff; }
.btn.dan { --c1: var(--red1); --c2: var(--red2); --c3: var(--red3); --hi: rgba(255,255,255,.3); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.22); }
.btn.gold { --c1: var(--gold1); --c2: var(--gold2); --c3: var(--gold3); --hi: rgba(255,255,255,.5); color: #3a2806; }
.btn.ghost { background: none; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: rgba(var(--d-ink), .06); transform: none; box-shadow: none; }
.btn.ghost:active { transform: scale(.97); }
.btn.sm { --d-lift: 3px; border-radius: 11px; }
.btn.lg { --d-lift: 5px; border-radius: 16px; }
.btn:disabled, .btn.off { opacity: .55; pointer-events: none; filter: grayscale(.4); }

/* الحقول الغائرة */
.inp, select.inp, textarea.inp {
  border-radius: var(--d-r-s); border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #f3f7f9, #fff);
  box-shadow: var(--d-in);
}
.inp:focus { border-color: var(--g2); box-shadow: inset 0 2px 4px rgba(var(--d-ink), .07), 0 0 0 4px rgba(46,127,184,.2); }

/* المسارات الغائرة: التبويبات */
.seg { background: #dbe5ea; border: 0; border-radius: 16px; padding: 5px; gap: 4px; box-shadow: inset 0 3px 5px rgba(var(--d-ink), .16), 0 1px 0 #fff; }
.seg button, .seg a { border-radius: 12px; }
.seg button.on, .seg a.on {
  color: var(--ink); transform: translateY(-1px);
  background: linear-gradient(180deg, #fff, #f1f6f8);
  box-shadow: 0 1px 0 #fff inset, 0 3px 0 var(--d-edge), 0 8px 12px -6px rgba(var(--d-ink), .35);
}

/* شريط النسبة: مسار غائر ووجه مرفوع */
.bar { height: 12px; border-radius: 8px; background: #d9e3e8; box-shadow: inset 0 3px 4px rgba(var(--d-ink), .2), 0 1px 0 #fff; overflow: visible; }
.bar > i { --c1: var(--blue1); --c2: var(--blue2); --c3: var(--blue3);
  border-radius: 8px; background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 3px 0 var(--c3), 0 7px 7px -3px rgba(var(--d-ink), .3), inset 0 1px 0 rgba(255,255,255,.55);
  transform: translateY(-2px); }
.bar.ok > i { --c1: var(--green1); --c2: var(--green2); --c3: var(--green3); }
.bar.warn > i { --c1: var(--gold1); --c2: var(--gold2); --c3: var(--gold3); }
.bar.dan > i { --c1: var(--red1); --c2: var(--red2); --c3: var(--red3); }

/* مكعّب الأرقام */
.cube {
  --c1: var(--blue1); --c2: var(--blue2); --c3: var(--blue3);
  width: 56px; height: 56px; flex: none; display: grid; place-items: center; color: #fff; border-radius: 17px;
  background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.55), inset 0 -5px 8px rgba(0,0,0,.2), 0 8px 0 -1px var(--c3), 0 16px 18px -6px rgba(var(--d-ink), .4);
  transform: translateY(-4px) rotate(-3deg); transition: transform .25s;
}
.card:hover .cube { transform: translateY(-7px) rotate(3deg); }
.cube .ic, .cube svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 1px rgba(0,0,0,.25)); }
.cube.ok { --c1: var(--green1); --c2: var(--green2); --c3: var(--green3); }
.cube.gold { --c1: var(--gold1); --c2: var(--gold2); --c3: var(--gold3); color: #4a3407; }
.cube.dan { --c1: var(--red1); --c2: var(--red2); --c3: var(--red3); }
.cube.deep { --c1: var(--deep1); --c2: var(--deep2); --c3: var(--deep3); }
.cube.teal { --c1: var(--teal1); --c2: var(--teal2); --c3: var(--teal3); }

/* الشريط العلوي له عمق */
.topbar { background: linear-gradient(180deg, #054a56 0%, var(--deep) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 0 -2px #01232a, 0 18px 30px -12px rgba(3,59,69,.55); }
.brand-mk { box-shadow: inset 0 2px 2px rgba(255,255,255,.45), inset 0 -4px 6px rgba(0,0,0,.2), 0 5px 0 -1px #1f5c88, 0 10px 14px -4px rgba(0,0,0,.4); }
.nav a.on { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.1)); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 3px 0 rgba(0,0,0,.25); }

/* حركة الدخول */
.rise { animation: d-rise .55s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes d-rise { from { opacity: 0; transform: translateY(22px) rotateX(10deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .tilt { transform: none !important; }
}
@media print {
  body, body.room { background: #fff !important; }
  .card, .btn, .seg, .cube, .bar > i { box-shadow: none !important; filter: none !important; transform: none !important; }
  .card { border: 1px solid #cbd6df !important; }
}