/* =====================================================================
   v3.1 — هوية «طبقات»: زجاج مصفّى فوق شفق متحرك، عسل وفستق
   ===================================================================== */
:root{
  --font:"Readex Pro","IBM Plex Sans Arabic",Tahoma,"Segoe UI",Arial,sans-serif;
  --bg:#F2EFE4;--surface:#FFFFFF;--surface2:#F0EDE2;--line:rgba(36,54,44,.10);--line2:rgba(36,54,44,.19);
  --ink:#13211B;--muted:#58675F;--faint:#8A978F;
  --accent:#17744F;--accent-ink:#FFFFFF;--accent-soft:rgba(23,116,79,.12);
  --honey:#A8680A;--honey-soft:rgba(232,163,61,.20);
  --red:#BE3527;--red-soft:rgba(190,53,39,.12);--ok:#1B8550;--ok-soft:rgba(27,133,80,.14);
  --glass:rgba(255,255,255,.60);--glass-hi:rgba(255,255,255,.84);--glass-bd:rgba(255,255,255,.80);
  --shadow:0 1px 1px rgba(20,44,32,.04),0 10px 26px -10px rgba(20,44,32,.16),0 28px 54px -28px rgba(20,44,32,.22);
  --grad:linear-gradient(135deg,#0E5B40 0%,#177A55 55%,#21946A 100%);
  --grad-brand:radial-gradient(120% 90% at 8% 112%,rgba(240,184,80,.62),transparent 58%),linear-gradient(135deg,#0B4E37 0%,#14704F 60%,#1B8A60 100%);
  --grad-soft:linear-gradient(135deg,rgba(23,116,79,.15),rgba(232,163,61,.17));
  --aur1:rgba(86,190,138,.38);--aur2:rgba(244,190,92,.34);--aur3:rgba(255,150,140,.20);--aur4:rgba(120,170,235,.20);
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --r1:12px;--r2:22px;--r3:30px;
}
:root[data-theme="dark"]{
  --bg:#08100D;--surface:#15201B;--surface2:#1B2923;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);
  --ink:#E7F0EA;--muted:#9CB0A5;--faint:#6D8277;
  --accent:#4ED08E;--accent-ink:#04150C;--accent-soft:rgba(78,208,142,.15);
  --honey:#F0BA58;--honey-soft:rgba(240,186,88,.17);
  --red:#FF8C7C;--red-soft:rgba(255,140,124,.15);--ok:#6EE0A2;--ok-soft:rgba(110,224,162,.15);
  --glass:rgba(20,32,27,.60);--glass-hi:rgba(26,40,34,.86);--glass-bd:rgba(255,255,255,.09);
  --shadow:0 1px 1px rgba(0,0,0,.3),0 12px 30px -10px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.6);
  --grad:linear-gradient(135deg,#1F9F6B 0%,#35C48A 100%);
  --grad-brand:radial-gradient(120% 90% at 8% 112%,rgba(240,186,88,.40),transparent 58%),linear-gradient(135deg,#0F5A3F 0%,#168258 60%,#1E9D6E 100%);
  --grad-soft:linear-gradient(135deg,rgba(78,208,142,.16),rgba(240,186,88,.14));
  --aur1:rgba(30,160,110,.34);--aur2:rgba(220,160,50,.22);--aur3:rgba(200,90,110,.15);--aur4:rgba(60,110,200,.18);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#08100D;--surface:#15201B;--surface2:#1B2923;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);
  --ink:#E7F0EA;--muted:#9CB0A5;--faint:#6D8277;
  --accent:#4ED08E;--accent-ink:#04150C;--accent-soft:rgba(78,208,142,.15);
  --honey:#F0BA58;--honey-soft:rgba(240,186,88,.17);
  --red:#FF8C7C;--red-soft:rgba(255,140,124,.15);--ok:#6EE0A2;--ok-soft:rgba(110,224,162,.15);
  --glass:rgba(20,32,27,.60);--glass-hi:rgba(26,40,34,.86);--glass-bd:rgba(255,255,255,.09);
  --shadow:0 1px 1px rgba(0,0,0,.3),0 12px 30px -10px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.6);
  --grad:linear-gradient(135deg,#1F9F6B 0%,#35C48A 100%);
  --grad-brand:radial-gradient(120% 90% at 8% 112%,rgba(240,186,88,.40),transparent 58%),linear-gradient(135deg,#0F5A3F 0%,#168258 60%,#1E9D6E 100%);
  --grad-soft:linear-gradient(135deg,rgba(78,208,142,.16),rgba(240,186,88,.14));
  --aur1:rgba(30,160,110,.34);--aur2:rgba(220,160,50,.22);--aur3:rgba(200,90,110,.15);--aur4:rgba(60,110,200,.18);
}}

/* ---------- الخلفية: شفق متحرك + حبيبات ---------- */
body{position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:radial-gradient(38% 42% at 18% 24%,var(--aur1),transparent 70%),radial-gradient(34% 40% at 82% 16%,var(--aur2),transparent 70%),radial-gradient(40% 46% at 72% 88%,var(--aur3),transparent 70%),radial-gradient(30% 36% at 10% 84%,var(--aur4),transparent 70%);
  filter:blur(28px);animation:aurora 40s ease-in-out infinite alternate;will-change:transform}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
:root[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.035}
@keyframes aurora{0%{transform:translate3d(0,0,0) rotate(0) scale(1)}50%{transform:translate3d(3%,-3%,0) rotate(7deg) scale(1.09)}100%{transform:translate3d(-3%,3%,0) rotate(-6deg) scale(1.03)}}
::selection{background:var(--accent);color:var(--accent-ink)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box;border:3px solid transparent}

/* ---------- الشريط الجانبي العائم ---------- */
.side{inset-block:12px;right:12px;width:252px;height:auto;border:1px solid var(--glass-bd);border-radius:28px;background:var(--glass);backdrop-filter:blur(24px) saturate(1.7);-webkit-backdrop-filter:blur(24px) saturate(1.7);box-shadow:var(--shadow);overflow:hidden}
.side-head{padding:18px 16px 14px;border-bottom:1px solid var(--line)}
.mark{border-radius:15px;background:var(--grad);color:var(--accent-ink);box-shadow:0 8px 18px -6px rgba(14,91,64,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.side-head b{font-weight:700}
.nav{position:relative;padding:8px 10px 14px}
.nav h6{margin:16px 10px 6px;font-size:.72rem;color:var(--faint);font-weight:600}
.nav button{position:relative;z-index:1;border-radius:14px;padding:9px 12px;font-weight:500;transition:color .25s,transform .35s var(--ease)}
.nav button svg{transition:transform .35s var(--spring),stroke .25s}
.nav button:hover{background:transparent;transform:translateX(-3px)}
.nav button:hover svg{transform:scale(1.14) rotate(-4deg);stroke:var(--accent)}
.nav button.on{background:transparent;color:var(--accent);font-weight:700}
.nav .ind{position:absolute;inset-inline:10px;top:0;height:40px;border-radius:14px;z-index:0;pointer-events:none;background:var(--grad-soft);box-shadow:inset 0 0 0 1px var(--accent-soft);opacity:0;transition:transform .55s var(--spring),height .3s var(--ease),opacity .3s}
.nav .ind::after{content:"";position:absolute;inset-block:9px;right:0;width:3.5px;border-radius:4px 0 0 4px;background:var(--grad)}
.side-user{margin:0 10px 10px;border:1px solid var(--line);border-radius:18px;background:var(--glass-hi);padding:10px 12px}
.side-user .av{background:var(--grad-soft);color:var(--accent)}

/* ---------- الشريط العلوي ---------- */
.top{top:12px;margin:12px 276px 0 14px;height:60px;border:1px solid var(--glass-bd);border-radius:22px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:var(--shadow);padding:0 18px}
.top h2{font-size:1.05rem;font-weight:700}
.main{margin-right:276px;margin-left:0;padding:22px 14px 80px}
.top select{border-radius:12px;background:var(--glass-hi)}

/* ---------- رأس الصفحة ---------- */
.page-head{margin-bottom:18px}
.page-head h1{font-size:1.75rem;font-weight:700;line-height:1.35;background:linear-gradient(110deg,var(--ink) 35%,var(--accent) 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-head p{font-size:.93rem}

/* ---------- البطاقات والزجاج ---------- */
.box{position:relative;background:var(--glass);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid var(--glass-bd);border-radius:var(--r2);padding:20px;box-shadow:var(--shadow)}
.box::before,.stat::before,.pbtn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),transparent 45%)}
:root[data-theme="dark"] .box::before,:root[data-theme="dark"] .stat::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.07),transparent 45%)}
.box:hover::before,.stat:hover::before,.pbtn:hover::before{opacity:1}
.box h3{font-size:1.02rem}
.stats{gap:14px;background:none;border:0;border-radius:0;overflow:visible;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat{position:relative;overflow:hidden;background:var(--glass);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid var(--glass-bd);border-radius:var(--r2);padding:18px 20px;box-shadow:var(--shadow);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.stat::after{content:"";position:absolute;inset-inline-end:-34px;top:-34px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%);pointer-events:none}
.stat:hover{transform:translateY(-5px);box-shadow:0 18px 40px -16px rgba(20,60,44,.35)}
.stat>span{font-size:.84rem;font-weight:500}
.stat b{font-size:1.65rem;font-weight:700;margin-top:6px;line-height:1.25}
.stat.hl{background:var(--grad-brand);color:#fff;border-color:rgba(255,255,255,.18)}
.stat.hl::after{background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.stat.hl>span,.stat.hl>small{color:rgba(255,255,255,.82)}.stat.hl b{color:#fff}
.stat.warn::after{background:radial-gradient(circle,var(--honey-soft),transparent 70%)}.stat.warn b{color:var(--honey)}
.stat.bad::after{background:radial-gradient(circle,var(--red-soft),transparent 70%)}.stat.bad b{color:var(--red)}
.tabs+.box,.stats+.box{margin-top:16px}

/* ---------- أزرار ---------- */
.btn{position:relative;overflow:hidden;border-radius:14px;padding:10px 19px;background:var(--grad);color:var(--accent-ink);font-weight:600;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 20px -10px rgba(14,91,64,.7);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s}
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(130%);transition:transform .8s var(--ease)}
.btn:hover{filter:none;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 16px 26px -12px rgba(14,91,64,.75)}
.btn:hover::after{transform:translateX(-130%)}
.btn:active{transform:translateY(1px) scale(.975);transition-duration:.1s}
.btn.ghost{background:var(--glass-hi);color:var(--ink);border:1px solid var(--line2);box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.btn.ghost:hover{background:var(--surface);box-shadow:0 10px 20px -12px rgba(20,44,32,.4)}
.btn.quiet{background:transparent;color:var(--muted);box-shadow:none;border-color:transparent}
.btn.quiet::after{display:none}.btn.quiet:hover{background:var(--surface2);color:var(--ink);box-shadow:none;transform:none}
.btn.danger{background:linear-gradient(135deg,#A82418,#D2453A);color:#fff}
.btn.honey{background:linear-gradient(135deg,#B26E0C,#E3A63F);color:#fff}
.btn.lg{padding:13px 24px;font-size:1.05rem;border-radius:16px}
.btn.sm{border-radius:11px}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .65s var(--ease);pointer-events:none}
.btn.ghost .ripple,.tabs button .ripple,.pbtn .ripple{background:var(--accent-soft)}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---------- حقول ---------- */
.in,.field input,.field select,.field textarea{background:var(--glass-hi);border:1px solid var(--line2);border-radius:14px;padding:11px 14px;transition:border-color .25s,box-shadow .3s var(--ease),background .25s}
.in:hover,.field input:hover,.field select:hover{border-color:var(--faint)}
.in:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);background:var(--surface)}
.field>span{font-size:.82rem;font-weight:500}
.check input{accent-color:var(--accent)}

/* ---------- تبويبات ---------- */
.tabs{display:flex;width:max-content;max-width:100%;gap:3px;padding:5px;border:1px solid var(--glass-bd);border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);margin-bottom:16px;overflow-x:auto}
.tabs button{position:relative;overflow:hidden;border:0;border-radius:13px;padding:8px 16px;margin:0;color:var(--muted);font-weight:500;transition:background .3s var(--ease),color .3s,box-shadow .3s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:var(--grad);color:var(--accent-ink);font-weight:700;border-bottom-color:transparent;box-shadow:0 8px 16px -8px rgba(14,91,64,.7)}

/* ---------- جداول ---------- */
.tw{border:1px solid var(--line);border-radius:18px;background:var(--glass-hi)}
.t th{background:transparent;padding:12px 14px;font-size:.78rem;font-weight:600;border-bottom:1px solid var(--line2)}
.t td{padding:12px 14px;border-bottom:1px solid var(--line)}
.t tbody tr{transition:background .25s}
.t tbody tr:hover td{background:var(--accent-soft)}
.t tbody tr:hover td:first-child{box-shadow:inset -3px 0 0 var(--accent)}
.t tfoot td{background:var(--surface2)}

/* ---------- وسوم وملاحظات ---------- */
.tag{padding:3px 11px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.tag.ok::before,.tag.bad::before,.tag.warn::before,.tag.acc::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.note{position:relative;border-radius:16px;background:var(--glass-hi);border:1px solid var(--honey-soft);padding:12px 16px 12px 14px}
.note::before{content:"";position:absolute;inset-block:10px;right:0;width:4px;border-radius:4px 0 0 4px;background:var(--honey)}
.note.info{border-color:var(--accent-soft)}.note.info::before{background:var(--accent)}
.note.bad{border-color:var(--red-soft)}.note.bad::before{background:var(--red)}
.empty{padding:44px 16px}

/* ---------- مخططات ---------- */
.bar i{background:var(--grad);border-radius:12px 12px 5px 5px;opacity:1;transform-origin:bottom;box-shadow:0 8px 18px -10px rgba(14,91,64,.7);max-width:52px;transition:transform .3s var(--spring)}
.bar:hover i{transform:scaleY(1.04) scaleX(1.06)}
.bar.today i{background:linear-gradient(180deg,#F5C25E,#C98A1B);box-shadow:0 8px 18px -10px rgba(200,138,27,.8)}
.meter{height:8px;background:var(--surface2)}
.meter i{background:var(--grad);transform-origin:right}
.list-line{border-bottom:1px solid var(--line)}

/* ---------- نقاط البيع ---------- */
.pbtn{position:relative;overflow:hidden;background:var(--glass-hi);border:1px solid var(--line);border-radius:18px;padding:14px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
.pbtn:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 16px 30px -16px rgba(14,91,64,.5)}
.pbtn:active{transform:scale(.97)}
.pbtn span{color:var(--accent)}
.cart-total{background:var(--grad-brand);border-radius:20px;box-shadow:0 14px 30px -14px rgba(14,91,64,.8)}
.pay-opts label{border-radius:14px;transition:all .25s var(--ease);background:var(--glass-hi)}
.pay-opts label:hover{border-color:var(--accent)}
.pay-opts label:has(input:checked){background:var(--grad);color:var(--accent-ink);border-color:transparent;box-shadow:0 8px 16px -8px rgba(14,91,64,.7)}
.kv.big b{color:var(--accent)}
.denom{border-radius:14px;background:var(--glass-hi)}
.big-diff{border-radius:20px}
.punch .clock{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- نوافذ منبثقة ---------- */
.modal-bg{background:rgba(6,14,10,.40);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);animation:fade .3s var(--ease)}
.modal{background:var(--glass-hi);backdrop-filter:blur(28px) saturate(1.7);-webkit-backdrop-filter:blur(28px) saturate(1.7);border:1px solid var(--glass-bd);border-radius:var(--r3);box-shadow:0 40px 90px -24px rgba(0,0,0,.5);animation:pop .55s var(--spring)}
.modal-h{border-bottom:1px solid var(--line)}
.modal-f{border-top:1px solid var(--line)}
@keyframes pop{from{opacity:0;transform:translateY(28px) scale(.93)}}
@keyframes sheetUp{from{transform:translateY(100%)}}
.toast{left:50%;right:auto;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px;animation:toastIn .5s var(--spring)}
.toast::before{content:"";width:9px;height:9px;border-radius:50%;background:#4ED08E;flex:none;box-shadow:0 0 0 4px rgba(78,208,142,.25)}
.toast.bad::before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.toast.out{animation:toastOut .35s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,24px) scale(.9)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,16px) scale(.95)}}

/* ---------- حركة الدخول بين الصفحات ---------- */
#page.enter>*{animation:rise .75s var(--ease) backwards}
#page.enter>*:nth-child(2){animation-delay:.05s}#page.enter>*:nth-child(3){animation-delay:.1s}#page.enter>*:nth-child(4){animation-delay:.15s}
#page.enter>*:nth-child(5){animation-delay:.2s}#page.enter>*:nth-child(n+6){animation-delay:.26s}
#page.enter .stats>.stat,#page.enter .bento>*,#page.enter .pgrid>.pbtn{animation:rise .75s var(--ease) backwards;animation-delay:calc(var(--i,0)*65ms + .08s)}
#page.enter .bar i{animation:grow .9s var(--ease) backwards;animation-delay:calc(var(--i,0)*70ms + .2s)}
#page.enter .meter i{animation:meterIn 1s var(--ease) backwards;animation-delay:.3s}
#page.enter .list-line,#page.enter .alert-line{animation:slideIn .6s var(--ease) backwards;animation-delay:calc(var(--i,0)*45ms + .2s)}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.985)}}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes meterIn{from{transform:scaleX(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(18px)}}

/* ---------- لوحة التحكم (Bento) ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.bento .t3{grid-column:span 3}.bento .t5{grid-column:span 5}.bento .t6{grid-column:span 6}.bento .t7{grid-column:span 7}.bento .t12{grid-column:span 12}
.bento .box+.box,.bento .tile+.tile{margin-top:0}
.tile{position:relative;overflow:hidden;border-radius:var(--r2)}
.hero{background:var(--grad-brand);color:#fff;padding:22px 24px 0;min-height:250px;display:flex;flex-direction:column;box-shadow:0 24px 50px -22px rgba(14,91,64,.75);border:1px solid rgba(255,255,255,.16)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,70%) var(--my,0%),rgba(255,255,255,.20),transparent 50%);opacity:.9}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600;opacity:.95}
.chip{font-size:.74rem;font-weight:600;padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.chip.ok{background:rgba(255,255,255,.28)}
.hero-num{display:flex;align-items:baseline;gap:10px;margin-top:10px;position:relative}
.hero-num b{font-size:3.1rem;font-weight:700;line-height:1.1}
.hero-num em{font-style:normal;font-size:1.05rem;opacity:.85}
.hero-sub{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.88rem;opacity:.92;margin-top:6px;position:relative}
.delta{font-weight:700}.delta.up{color:#C8FFE0}.delta.down{color:#FFD3CB}
.spark{display:block;width:calc(100% + 48px);margin:auto -24px 0;height:110px;overflow:visible}
.spark-line{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.spark-dot{fill:#fff;stroke:rgba(255,255,255,.4);stroke-width:7}
#page.enter .spark-line{animation:draw 1.6s var(--ease) .3s backwards}
#page.enter .spark-area{animation:fade 1.4s var(--ease) .5s backwards}
#page.enter .spark-dot{animation:fade .6s ease 1.4s backwards}
@keyframes draw{from{stroke-dashoffset:1}}
.ringt{padding:20px 22px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-bd);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.ringt .hero-top{color:var(--ink)}
.ring-wrap{position:relative;width:150px;height:150px;margin:2px auto}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.ring-bg{stroke:var(--surface2)}
.ring-seg{stroke-dashoffset:0;transition:stroke-dasharray 1.3s var(--ease)}
.ring-seg:not(.go){stroke-dasharray:0 100!important}
.ring-seg.c1{stroke:#1B8A60}.ring-seg.c2{stroke:#E3A63F}.ring-seg.c3{stroke:#D2453A}
.ring-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-mid b{font-size:1.9rem;line-height:1}.ring-mid small{color:var(--muted)}
.legend{display:grid;gap:6px;font-size:.86rem}
.legend>div{display:flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:50%;flex:none}
.legend i.c1{background:#1B8A60}.legend i.c2{background:#E3A63F}.legend i.c3{background:#D2453A}
.legend span{flex:1;color:var(--muted)}
.tile.stat{padding:18px 20px}

/* ---------- ورقة الفاتورة: لمسة الدفتر ---------- */
.sheet{box-shadow:0 2px 0 #E2DBB4,0 34px 60px -34px rgba(40,40,16,.5),0 0 0 1px rgba(255,255,255,.35) inset;position:relative}
.sheet::before{content:"";display:block;height:16px;margin:-22px -24px 16px;border-radius:4px 4px 0 0;background:linear-gradient(#E7DF9E,#F3EEC4);border-bottom:1px solid #CBC38A}
.inv-side .box{top:96px}

/* ---------- نافذة الدخول ---------- */
.login{position:relative;overflow:hidden;min-height:100vh;display:grid;place-items:center;padding:24px}
.login-art{position:absolute;left:50%;top:50%;width:max(150vmax,1500px);height:max(150vmax,1500px);margin:calc(max(150vmax,1500px)/-2) 0 0 calc(max(150vmax,1500px)/-2);color:var(--accent);opacity:.2;animation:spin 240s linear infinite;pointer-events:none;-webkit-mask-image:radial-gradient(circle,#000 0,transparent 36%);mask-image:radial-gradient(circle,#000 0,transparent 36%)}
@keyframes spin{to{transform:rotate(360deg)}}
.login-card{position:relative;width:min(430px,100%);background:var(--glass-hi);backdrop-filter:blur(30px) saturate(1.7);-webkit-backdrop-filter:blur(30px) saturate(1.7);border:1px solid var(--glass-bd);border-radius:34px;padding:36px 32px 28px;box-shadow:0 50px 100px -30px rgba(10,60,40,.5),0 0 0 1px rgba(255,255,255,.3) inset;animation:pop .9s var(--spring)}
.login-mark{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.login-mark .mark{width:58px;height:58px;border-radius:19px;font-size:32px;position:relative}
.login-mark .mark::after{content:"";position:absolute;inset:-5px;border-radius:24px;border:1.5px solid var(--accent);opacity:.35;animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.1);opacity:0}}
.login h1{font-size:1.5rem;font-weight:700;line-height:1.25}
.login-hello{margin:18px 0 20px;font-size:1.02rem;font-weight:500;color:var(--muted)}
.lf{position:relative;margin-bottom:14px}
.lf input{width:100%;padding:22px 46px 8px 46px;border-radius:16px;border:1px solid var(--line2);background:var(--glass-hi);font-size:1rem;outline:none;transition:border-color .25s,box-shadow .3s var(--ease)}
.lf input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.lf label{position:absolute;right:46px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;transition:all .25s var(--ease);font-size:.95rem}
.lf input:focus+label,.lf input:not(:placeholder-shown)+label{top:14px;font-size:.72rem;color:var(--accent)}
.lf .ic{position:absolute;right:15px;top:50%;width:20px;height:20px;transform:translateY(-50%);stroke:var(--faint);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .25s}
.lf input:focus~.ic{stroke:var(--accent)}
.lf .eye{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;border-radius:12px;cursor:pointer;display:grid;place-items:center;color:var(--faint)}
.lf .eye:hover{background:var(--surface2);color:var(--ink)}.lf .eye.on{color:var(--accent)}
.lf .eye svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.login-err{max-height:0;overflow:hidden;opacity:0;font-size:.86rem;color:var(--red);background:var(--red-soft);border-radius:12px;padding:0 12px;transition:all .35s var(--ease)}
.login-err.show{max-height:90px;opacity:1;padding:9px 12px;margin-bottom:12px}
.login .btn.lg{width:100%;margin-top:4px}
.login-row{display:flex;justify-content:center;margin-top:14px}
.link{border:0;background:none;color:var(--accent);font-weight:600;cursor:pointer;padding:6px 10px;border-radius:10px;font-size:.9rem}
.link:hover{background:var(--accent-soft)}.link.pulse{animation:linkPulse 1.6s ease-in-out infinite}
@keyframes linkPulse{0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 8px transparent;background:var(--accent-soft)}}
.login-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:18px}
.login-chips span{font-size:.72rem;color:var(--muted);padding:3px 11px;border-radius:999px;background:var(--surface2)}
.login-foot{margin-top:14px;font-size:.76rem;color:var(--faint);text-align:center}
.shake{animation:shake .5s var(--ease)}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.reccode{font-family:"Courier New",monospace;direction:ltr;text-align:center;font-size:1.5rem;font-weight:700;letter-spacing:.08em;padding:18px;border-radius:18px;background:var(--grad-soft);border:1px dashed var(--accent);margin:12px 0;user-select:all}
.seg-title{font-weight:700;margin-bottom:10px;color:var(--accent)}

/* ---------- تعطيل المؤثرات ---------- */
html.fx-off *,html.fx-off *::before,html.fx-off *::after{animation:none!important;transition:none!important}
html.fx-off body::before,html.fx-off body::after{display:none}
html.fx-off .box,html.fx-off .stat,html.fx-off .side,html.fx-off .top,html.fx-off .modal,html.fx-off .modal-bg,html.fx-off .tabs,html.fx-off .ringt,html.fx-off .login-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.fx-off .ring-seg:not(.go){stroke-dasharray:inherit!important}
html.fx-off .login-art{display:none}

/* ---------- متجاوب ---------- */
@media (max-width:1100px){.bento .t3{grid-column:span 6}.bento .t5,.bento .t7,.bento .t6{grid-column:span 12}}
@media (max-width:820px){
  .side{inset-block:10px;right:10px;width:min(300px,86vw);transform:translateX(125%);transition:transform .55s var(--ease)}
  .side.open{transform:none}
  .top{margin:10px 10px 0;top:10px;padding:0 12px;height:56px}
  .main{margin:0;padding:16px 10px 90px}
  .page-head h1{font-size:1.45rem}
  .hero-num b{font-size:2.4rem}
  .bento .t3{grid-column:span 6}
  .tabs{width:auto}
}
@media (max-width:640px){
  .modal-bg{align-items:end;padding:0}
  .modal{width:100%;max-height:92vh;border-radius:30px 30px 0 0;animation:sheetUp .55s var(--ease)}
  .login-card{padding:30px 22px 24px;border-radius:30px}
  .bento .t3{grid-column:span 12}
}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
@media print{
  body::before,body::after{display:none!important}
  #printArea .sheet::before{display:none}
  #printArea .sheet{box-shadow:none}
}
.lf input{direction:ltr;text-align:right}
@media (max-width:820px){.sheet::before{margin:-12px -8px 12px}}
@media (max-width:820px){.side{background:color-mix(in srgb,var(--surface) 93%,transparent)}}