/* الواجهة الزجاجية 3D للمزين (20 أكتوبر 2026، طلب المستخدم: «الواجهة الزجاجية والـ 3D والألوان الغامقة زي الشركات التانية»)
   نفس فكرة الفريدة وسبيس (Dafrix glass.css) بألوان المزين: أسود وذهبي. الهيدر والقايمة زجاج أسود غامق، والكروت زجاج فاتح بلمعة.
   الطباعة بترجع أبيض سادة، والأجهزة اللي مابتدعمش الزجاج بتاخد أبيض شبه مصمت. */
:root{--glass:rgba(255,255,255,.58);--gline:rgba(255,255,255,.85);--gshadow:0 10px 34px rgba(40,28,10,.16);
  --hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.35);--r:20px}
body{background:#ece3d3}
/* خلفية ناعمة بألوان اللوجو (ذهبي وأسود) عشان الزجاج يبان */
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 44% at 88% 6%,rgba(217,178,106,.62),transparent 70%),
    radial-gradient(36% 40% at 6% 28%,rgba(21,19,16,.30),transparent 70%),
    radial-gradient(42% 46% at 72% 82%,rgba(176,130,58,.48),transparent 70%),
    radial-gradient(32% 36% at 18% 96%,rgba(60,44,20,.36),transparent 70%),
    radial-gradient(26% 30% at 50% 50%,rgba(255,246,228,.60),transparent 70%)}

/* الهيدر: زجاج أسود غامق */
.top{background:linear-gradient(180deg,rgba(28,24,18,.90),rgba(17,15,12,.93));-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(217,178,106,.25);color:#f3ead8;box-shadow:0 4px 24px rgba(0,0,0,.28),inset 0 -1px 0 rgba(255,255,255,.08)}
.top strong{color:#fff}
.top .who{color:rgba(243,234,216,.75)}.top .who b{color:var(--brand-2)}
.menu-btn{border-radius:12px;background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}

/* القايمة الجانبية: زجاج أسود والمختار ذهبي */
.side{background:linear-gradient(180deg,rgba(28,24,18,.88),rgba(12,11,9,.94));-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border-inline-end:1px solid rgba(255,255,255,.08);box-shadow:4px 0 30px rgba(0,0,0,.25)}
.side .sec{color:rgba(217,178,106,.72)}
.side a{border-radius:12px;transition:background .15s}
.side a:hover{background:rgba(255,255,255,.08)}
.side a.on{background:linear-gradient(135deg,rgba(217,178,106,.55),rgba(176,130,58,.25));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 4px 14px rgba(0,0,0,.28);border:1px solid rgba(217,178,106,.45)}
.mark{box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,0,0,.25),0 6px 16px rgba(176,130,58,.45)}

/* الكروت: زجاج + لمعة فوق */
.card,.kpi,.act,.tk,.tile,.status-card,.table-wrap,details.fold,.perm-group,.seg,.chip,.auth .box{
  background:var(--glass);border-color:var(--gline);box-shadow:var(--gshadow),var(--hi);
  -webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%)}
.card{border-radius:var(--r)}
.card,.kpi,.act,.status-card{position:relative}
.card::before,.kpi::before,.act::before,.status-card::before{content:"";position:absolute;inset:0 0 auto 0;height:48%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.card>*,.act>*,.status-card>*,.kpi>*:not(.ic):not(.stretch){position:relative}
.kpi{border-radius:16px;border-top:1px solid var(--gline);overflow:hidden}
.kpi::after{content:"";position:absolute;inset-inline:16px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--brand)}
.kpi.gold::after{background:#f59e0b}.kpi.red::after{background:var(--bad)}.kpi.blue::after{background:var(--info)}
.kpi .v{letter-spacing:-.3px;font-feature-settings:"tnum"}
.table-wrap{background:rgba(255,255,255,.70);border-radius:16px}
.tk{border-radius:16px}
.tk.sel{background:rgba(255,250,238,.9);border-color:var(--brand);box-shadow:0 0 0 3px rgba(217,178,106,.45),var(--gshadow)}
.tk .ln span{background:rgba(244,239,230,.85)}
.status-card{border-radius:20px}
.status-card.in{background:linear-gradient(135deg,rgba(228,245,236,.85),rgba(255,255,255,.55))}
details.fold{border-radius:16px}
.perm-group{border-radius:16px}

/* بانر الرئيسية والإجمالي: أسود بلمعة ذهبي ودواير */
.hero{position:relative;overflow:hidden;border-radius:26px;
  background:radial-gradient(120% 140% at 100% 0%,#e4c07a 0%,#b0823a 30%,#3a2c14 70%,#100e0b 100%);
  box-shadow:0 14px 40px rgba(40,28,10,.32),inset 0 1px 0 rgba(255,255,255,.35)}
.hero::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;inset-inline-start:-80px;top:-120px;background:rgba(255,255,255,.10)}
.hero::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;inset-inline-start:30%;bottom:-120px;background:rgba(255,255,255,.08)}
.hero>*{position:relative;z-index:1}
.total-bar{background:linear-gradient(135deg,#2a2219,#110f0c);box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18);border:1px solid rgba(217,178,106,.35)}

/* أيقونات ازاز 3D (أزرار الكاشير، والكروت، والمربعات) */
.act{border-radius:20px;padding:14px 6px 12px;transition:transform .15s ease,box-shadow .15s ease}
.act .ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 6px;border-radius:18px;font-size:28px;line-height:1;
  background:linear-gradient(145deg,#fffaf0 0%,rgba(217,178,106,.55) 100%);border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 2px 1px rgba(255,255,255,1),inset 0 -5px 10px rgba(128,89,31,.25),0 8px 16px rgba(40,28,10,.22),0 2px 3px rgba(40,28,10,.15)}
.act:hover{transform:translateY(-2px);background:rgba(255,250,238,.8);box-shadow:0 14px 32px rgba(40,28,10,.18),var(--hi)}
.act:active{transform:scale(.97)}
.kpi .ic{display:grid;place-items:center;opacity:1;width:42px;height:42px;border-radius:14px;font-size:21px;line-height:1;top:12px;left:12px;
  background:linear-gradient(145deg,rgba(255,250,240,.98),rgba(217,178,106,.40));border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -3px 6px rgba(128,89,31,.18),0 4px 10px rgba(40,28,10,.20)}
.kpi:has(.ic) .l{padding-left:50px;min-height:42px}
.tile{border-radius:18px}
.tile .ic{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 6px;border-radius:16px;
  background:linear-gradient(145deg,#fffaf0,rgba(217,178,106,.5));box-shadow:inset 0 2px 1px #fff,inset 0 -4px 8px rgba(128,89,31,.22),0 6px 12px rgba(40,28,10,.18)}

/* الزراير: لمعة ازاز */
.btn{border-radius:13px;background:linear-gradient(180deg,var(--brand-2),var(--brand) 55%,var(--brand-dark));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 12px rgba(128,89,31,.28)}
.btn:hover{background:linear-gradient(180deg,#c99c52,var(--brand-dark))}
.btn.ok{background:linear-gradient(180deg,#18a06d,var(--ok));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(15,122,82,.28)}
.btn.bad{background:linear-gradient(180deg,#de4459,var(--bad))}
.btn.warn{background:linear-gradient(180deg,#f0951e,#c86a04)}
.btn.sec{background:rgba(255,255,255,.66);color:var(--ink);border-color:var(--gline);box-shadow:var(--hi),0 2px 8px rgba(40,28,10,.10);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.sec:hover{background:rgba(255,255,255,.88)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--bad-soft)}
.chip.on,.seg a.on,.pay-methods input:checked+span{background:linear-gradient(180deg,var(--brand-2),var(--brand));border-color:transparent;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 10px rgba(128,89,31,.30)}
.pay-methods span{background:rgba(255,255,255,.66);border-color:var(--gline);border-radius:12px;box-shadow:var(--hi)}

/* الفورم والجداول */
input,select,textarea{background:rgba(255,255,255,.80);border-color:rgba(200,180,140,.65);border-radius:12px}
input:focus,select:focus,textarea:focus{background:#fff}
.add-line{background:rgba(255,253,248,.6);border-radius:12px}
th{background:rgba(250,244,232,.75)}
tbody tr:hover{background:rgba(255,255,255,.5)}
tfoot td{background:rgba(246,238,223,.8)}
.flash{border:1px solid rgba(255,255,255,.6);box-shadow:var(--hi);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* صفحة الدخول: الخلفية الغامقة زي ما هي، والبوكس زجاج */
.auth{position:relative;z-index:0}
.auth .box{border-radius:24px;background:rgba(255,255,255,.80)}

@media (max-width:520px){
  body.work-mode .bottom-nav{background:rgba(20,18,14,.90);border-top:1px solid rgba(217,178,106,.3);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
  .bottom-nav a{color:rgba(243,234,216,.75)}
  .bottom-nav a.on{color:#fff;background:linear-gradient(135deg,rgba(217,178,106,.55),rgba(176,130,58,.25))}
  .act .ic{width:50px;height:50px;font-size:25px;border-radius:16px}
  .kpi .ic{width:36px;height:36px;font-size:18px;border-radius:12px;top:10px;left:10px}.kpi:has(.ic) .l{padding-left:42px;min-height:36px}
  .hero{border-radius:22px}
}
@keyframes rise{from{transform:translateY(10px)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){.kpi,.act,.hero{animation:rise .4s cubic-bezier(.2,.8,.2,1) both}}
/* اللي مش بيدعم الزجاج (أجهزة قديمة): أبيض شبه مصمت عشان الكلام يتقري */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.kpi,.act,.tk,.tile,.status-card,.table-wrap,details.fold,.auth .box{background:rgba(255,255,255,.95)}
  .side,.top{background:#151310}}
@media print{body::before,.hero::before,.hero::after,.card::before,.kpi::before{display:none}body{background:#fff}
  .card,.kpi,.tk,.table-wrap{background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#ddd}}