/* SHABAB DIYAFA PRO 1.0.4 — EASY MODE + PICTURE & VOICE MODE (new file). Big, friendly, navy + gold. Strict CSP: no inline styles. */
/* text size A / A+ / A++ (per user) */
html.ez-z1 #pg { zoom: 1.12; } html.ez-z2 #pg { zoom: 1.25; }
.ez { --ez-tap: 56px; max-width: 1100px; margin: 0 auto; padding-bottom: 120px; font-size: 18px; }
.ez * { min-width: 0; }
.ez h2.ez-title { font-size: 26px; font-weight: 900; color: var(--navy); margin: 6px 0 14px; display: flex; align-items: center; gap: 12px; line-height: 1.25; }
[data-theme="dark"] .ez h2.ez-title { color: var(--gold2); }
.ez h2.ez-title .ez-ti { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold2), #b8892f); color: #2b1d00; font-size: 26px; flex: 0 0 auto; box-shadow: 0 6px 16px rgba(184, 137, 47, 0.35); }
.ez .ez-sub { color: var(--muted); font-size: 17px; margin: -6px 0 14px; }
/* help bar: 🔊 · ▶ How? · A A+ A++ · Talk to me · Pictures */
.ez-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.ez-bar .btn { min-height: var(--ez-tap); min-width: var(--ez-tap); border-radius: 16px; font-size: 17px; font-weight: 800; padding: 0 14px; justify-content: center; }
.ez-bar .ez-say { background: linear-gradient(135deg, var(--gold2), #b8892f); color: #2b1d00; border: 0; font-size: 22px; }
.ez-bar .ez-how { background: var(--navy); color: #fff; border: 0; }
.ez-bar .ez-sz { display: inline-flex; gap: 0; border-radius: 16px; overflow: hidden; border: 2px solid var(--line); }
.ez-bar .ez-sz .btn { border-radius: 0; border: 0; box-shadow: none; min-width: 58px; }
.ez-bar .ez-sz .btn.on, .ez-bar .btn.on { background: var(--navy); color: var(--gold2); }
.ez-bar .grow { flex: 1 1 0; }
/* colour legend (always visible on flat screens) */
.ez-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; margin-bottom: 14px; font-size: 16px; font-weight: 700; }
.ez-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ez-legend i, .ez-dot { width: 22px; height: 22px; border-radius: 7px; display: inline-block; flex: 0 0 auto; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
.ez-c-free { background: #16a34a; } .ez-c-in { background: #dc2626; } .ez-c-clean { background: #eab308; } .ez-c-ooo { background: #94a3b8; }
/* home: today strip */
.ez-hello { font-size: 24px; font-weight: 900; color: var(--navy); margin: 4px 0 2px; } [data-theme="dark"] .ez-hello { color: var(--gold2); }
.ez-date { color: var(--muted); font-size: 18px; margin-bottom: 14px; font-weight: 700; }
.ez-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.ez-num { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 120px; border-radius: 22px; text-decoration: none; color: #fff; padding: 10px 6px; box-shadow: var(--sh); position: relative; cursor: pointer; border: 0; font: inherit; width: 100%; }
.ez-num b { font-size: 50px; line-height: 1; font-family: var(--fe); font-weight: 900; }
.ez-num span { font-size: 17px; font-weight: 800; text-align: center; }
.ez-num .ico { font-size: 22px; opacity: 0.9; }
.ez-num.arr { background: linear-gradient(135deg, #14b8a6, #0f766e); } .ez-num.dep { background: linear-gradient(135deg, #8b5cf6, #5b21b6); } .ez-num.free { background: linear-gradient(135deg, #22c55e, #15803d); }
.ez-num.on { outline: 5px solid var(--gold2); outline-offset: 2px; }
/* home: 6 picture tiles */
.ez-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.ez-tile { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 170px; border-radius: 26px !important; background: var(--solid) !important; border: 2px solid var(--line) !important; color: var(--navy) !important; font-size: 21px !important; font-weight: 900 !important; text-decoration: none; box-shadow: var(--sh) !important; padding: 16px 10px !important; transition: transform 0.12s, box-shadow 0.12s; height: auto !important; white-space: normal !important; text-align: center; line-height: 1.2; }
[data-theme="dark"] .ez-tile { color: var(--gold2) !important; }
.ez-tile:hover { transform: translateY(-3px); box-shadow: var(--sh2) !important; border-color: var(--gold) !important; }
.ez-tile:active { transform: scale(0.97); }
.ez-pic-i { width: 92px; height: 92px; border-radius: 26px; display: grid; place-items: center; font-size: 46px; color: #fff; box-shadow: 0 10px 22px rgba(11, 31, 79, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35); flex: 0 0 auto; }
.ez-pic-i svg { width: 1em; height: 1em; }
.p-book { background: linear-gradient(135deg, #22c55e, #15803d); } .p-in { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .p-out { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.p-pay { background: linear-gradient(135deg, #f0cf78, #b8892f); color: #2b1d00 !important; } .p-find { background: linear-gradient(135deg, #6c8fd8, #1e3a8a); } .p-today { background: linear-gradient(135deg, #2dd4bf, #0f766e); }
.p-clean { background: linear-gradient(135deg, #facc15, #ca8a04); color: #3b2a00 !important; } .p-learn { background: linear-gradient(135deg, #f472b6, #be185d); }
.ez-tile small { font-size: 14px; font-weight: 700; color: var(--muted); display: block; margin-top: -6px; }
/* cards + rows */
.ez-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: var(--sh); margin-bottom: 14px; }
.ez-row { display: flex; align-items: center; gap: 14px; background: var(--solid); border: 2px solid var(--line); border-radius: 20px; padding: 12px 14px; margin-bottom: 10px; min-height: 84px; box-shadow: 0 4px 12px rgba(11, 31, 79, 0.05); }
a.ez-row { text-decoration: none; color: inherit; } .ez-row .grow { flex: 1 1 0; } .ez-row .nm { font-size: 20px; font-weight: 900; overflow-wrap: anywhere; } .ez-row .sm { font-size: 16px; color: var(--muted); font-weight: 700; overflow-wrap: anywhere; }
.ez-flat { min-width: 76px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-family: var(--fe); font-weight: 900; font-size: 24px; color: #fff; padding: 0 8px; flex: 0 0 auto; }
.ez-flat.free { background: #16a34a; } .ez-flat.in { background: #dc2626; } .ez-flat.clean { background: #eab308; color: #3b2a00; } .ez-flat.ooo { background: #94a3b8; } .ez-flat.res { background: #0d9488; }
.ez .btn.ez-go { min-height: 64px; border-radius: 18px; font-size: 19px; font-weight: 900; padding: 0 20px; gap: 10px; white-space: nowrap; }
.ez .btn.ez-go svg { font-size: 22px; }
.ez .btn, .ez input, .ez select { min-height: var(--ez-tap); }
.ez .btn { font-size: 18px; border-radius: 16px; }
/* fields */
.ez-f { margin-bottom: 16px; }
.ez-f > label { display: block; font-weight: 900; font-size: 19px; margin-bottom: 8px; color: var(--navy); } [data-theme="dark"] .ez-f > label { color: var(--gold2); }
.ez-f .ez-in { display: flex; gap: 8px; align-items: stretch; }
.ez-f input, .ez-f select { width: 100%; font-size: 22px; padding: 10px 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--solid); color: var(--text); font-family: var(--f); min-height: 64px; }
.ez-f input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 5px rgba(201, 162, 74, 0.22); }
.ez-f input.bad { border-color: var(--bad); background: rgba(220, 38, 38, 0.05); }
.ez-f input[inputmode="tel"], .ez-f input[inputmode="decimal"], .ez-f input[inputmode="numeric"] { font-family: var(--fe); letter-spacing: 1px; direction: ltr; text-align: start; }
html[dir="rtl"] .ez-f input[inputmode="tel"], html[dir="rtl"] .ez-f input[inputmode="decimal"] { text-align: right; }
.ez-ferr { display: none; margin-top: 8px; background: rgba(220, 38, 38, 0.08); border: 2px solid rgba(220, 38, 38, 0.35); color: #b91c1c; border-radius: 14px; padding: 10px 14px; font-weight: 800; font-size: 16px; }
.ez-ferr.on { display: block; } .ez-ferr div + div { font-weight: 600; opacity: 0.9; margin-top: 2px; }
.ez-mic { min-width: 64px; font-size: 26px !important; background: var(--navy) !important; color: #fff !important; border: 0 !important; }
.ez-mic.rec { background: #dc2626 !important; animation: ezpulse 1s infinite; }
.ez-found { background: rgba(22, 163, 74, 0.1); border: 2px solid rgba(22, 163, 74, 0.4); border-radius: 16px; padding: 12px 14px; font-weight: 800; margin-bottom: 14px; font-size: 18px; }
.ez-found.black { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.5); color: #b91c1c; }
/* steppers (− n +) */
.ez-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--solid); border: 2px solid var(--line); border-radius: 20px; padding: 10px; margin-bottom: 12px; }
.ez-step .lab { font-weight: 900; font-size: 19px; padding-inline-start: 6px; flex: 1 1 0; } .ez-step .lab small { display: block; color: var(--muted); font-size: 15px; font-weight: 700; }
.ez-step .val { font-family: var(--fe); font-size: 34px; font-weight: 900; min-width: 54px; text-align: center; color: var(--navy); } [data-theme="dark"] .ez-step .val { color: var(--gold2); }
.ez-step .btn { width: 64px; height: 64px; font-size: 30px; font-weight: 900; border-radius: 18px; padding: 0; justify-content: center; }
.ez-day { text-align: center; flex: 1 1 0; } .ez-day b { display: block; font-size: 24px; } .ez-day span { color: var(--muted); font-weight: 800; font-size: 16px; }
/* one step per screen: dots + Next */
.ez-dots { display: flex; justify-content: center; gap: 10px; margin: 4px 0 14px; } .ez-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--line); border: 2px solid var(--gold); } .ez-dots i.on { background: var(--gold); transform: scale(1.15); } .ez-dots i.done { background: var(--navy); border-color: var(--navy); }
.ez-nav { display: flex; gap: 12px; margin-top: 18px; position: sticky; bottom: 70px; z-index: 5; padding: 8px 0; background: linear-gradient(0deg, var(--bg2) 60%, transparent); }
@media (min-width: 900px) { .ez-nav { bottom: 0; } }
.ez-nav .btn { min-height: 70px; font-size: 22px; font-weight: 900; border-radius: 20px; flex: 1 1 0; justify-content: center; }
.ez-nav .ez-back { flex: 0 0 auto; min-width: 84px; }
/* suggested flat + flat grid */
.ez-best { display: flex; align-items: center; gap: 16px; border: 3px solid #16a34a; background: rgba(22, 163, 74, 0.07); border-radius: 24px; padding: 16px; margin-bottom: 16px; cursor: pointer; width: 100%; text-align: start; font: inherit; color: inherit; }
.ez-best .ez-flat { min-width: 96px; height: 86px; font-size: 32px; } .ez-best .tag { display: inline-block; background: var(--gold2); color: #2b1d00; border-radius: 99px; padding: 2px 12px; font-weight: 900; font-size: 15px; margin-bottom: 4px; }
.ez-best .pr { font-family: var(--fe); font-size: 26px; font-weight: 900; color: var(--navy); } [data-theme="dark"] .ez-best .pr { color: var(--gold2); }
.ez-best.on, .ez-fl.on { outline: 5px solid var(--gold); outline-offset: 2px; }
.ez-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.ez-fl { border: 0; border-radius: 18px; background: #16a34a; color: #fff; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; cursor: pointer; padding: 6px; }
.ez-fl b { font-family: var(--fe); font-size: 24px; font-weight: 900; } .ez-fl span { font-size: 14px; font-weight: 700; opacity: 0.95; } .ez-fl.nofit { background: #4d7c5d; }
/* money */
.ez-total { text-align: center; padding: 18px; border-radius: 24px; background: linear-gradient(135deg, var(--deep), var(--navy)); color: #fff; margin-bottom: 14px; box-shadow: var(--sh2); }
.ez-total .k { font-size: 18px; font-weight: 800; color: var(--gold3); } .ez-total .v { font-family: var(--fe); font-size: 52px; font-weight: 900; color: var(--gold2); line-height: 1.1; overflow-wrap: anywhere; } .ez-total .v small { font-size: 22px; }
.ez-total .ln { display: flex; justify-content: space-between; gap: 10px; font-size: 17px; font-weight: 700; opacity: 0.9; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 8px; margin-top: 8px; }
.ez-meth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.ez-m { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; border-radius: 22px; border: 3px solid var(--line); background: var(--solid); font: inherit; font-size: 18px; font-weight: 900; color: var(--text); cursor: pointer; padding: 8px; }
.ez-m .ez-pic-i { width: 64px; height: 64px; font-size: 32px; border-radius: 18px; }
.ez-m.on { border-color: var(--gold); background: rgba(233, 196, 106, 0.18); box-shadow: 0 0 0 4px rgba(233, 196, 106, 0.35); }
.p-cash { background: linear-gradient(135deg, #22c55e, #15803d); } .p-card { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .p-transfer { background: linear-gradient(135deg, #8b5cf6, #5b21b6); }
.ez-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; } .ez-quick .btn { min-height: 56px; min-width: 64px; font-family: var(--fe); font-weight: 900; }
/* search */
.ez-search { position: relative; margin-bottom: 14px; } .ez-search input { padding-inline-start: 56px !important; }
.ez-search > .ico { position: absolute; inset-inline-start: 18px; top: 20px; font-size: 22px; color: var(--muted); }
/* done */
.ez-done { text-align: center; padding: 26px 14px; } .ez-done .big { width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 64px; color: #fff; background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 12px 30px rgba(22, 163, 74, 0.4); animation: ezpop 0.45s ease-out; }
.ez-done h3 { font-size: 28px; margin: 6px 0; } .ez-done p { font-size: 19px; color: var(--muted); font-weight: 700; }
.ez-done .acts { display: grid; gap: 12px; max-width: 520px; margin: 16px auto 0; }
/* friendly error box */
.ez-err { display: flex; gap: 14px; align-items: flex-start; background: #fff7ed; border: 3px solid #fb923c; border-radius: 22px; padding: 16px; margin: 0 0 14px; color: #7c2d12; }
[data-theme="dark"] .ez-err { background: #2a1606; color: #fed7aa; }
.ez-err .ei { width: 56px; height: 56px; border-radius: 16px; background: #f97316; color: #fff; display: grid; place-items: center; font-size: 28px; flex: 0 0 auto; }
.ez-err b { display: block; font-size: 20px; margin-bottom: 4px; overflow-wrap: anywhere; } .ez-err .todo { font-size: 17px; font-weight: 700; } .ez-err .todo::before { content: "➜ "; }
/* empty */
.ez-empty { text-align: center; padding: 30px 10px; font-size: 20px; font-weight: 800; color: var(--muted); } .ez-empty .big { font-size: 64px; margin-bottom: 8px; color: #16a34a; }
/* tabs (today) */
.ez-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
/* floors (housekeeping) */
.ez-floors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .ez-floors .btn { min-width: 70px; font-weight: 900; font-size: 18px; } .ez-floors .btn.on { background: var(--navy); color: var(--gold2); border-color: var(--navy); }
.ez-row.going { animation: ezout 0.4s forwards; }
/* UNDO toast (10 seconds) */
.ez-undo { position: fixed; z-index: 3000; inset-inline: 12px; bottom: 84px; margin: 0 auto; max-width: 560px; background: var(--deep); color: #fff; border-radius: 22px; padding: 14px 14px 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); display: flex; align-items: center; gap: 12px; border: 2px solid var(--gold); overflow: hidden; animation: ezup 0.25s ease-out; }
@media (min-width: 900px) { .ez-undo { bottom: 24px; } }
.ez-undo .ok { width: 48px; height: 48px; border-radius: 50%; background: #16a34a; display: grid; place-items: center; font-size: 24px; flex: 0 0 auto; }
.ez-undo .t { flex: 1 1 0; font-weight: 800; font-size: 18px; overflow-wrap: anywhere; } .ez-undo .t small { display: block; color: var(--gold3); font-weight: 700; font-size: 14px; }
.ez-undo .btn { min-height: 60px; min-width: 120px; font-size: 20px; font-weight: 900; background: var(--gold2); color: #2b1d00; border: 0; border-radius: 16px; justify-content: center; }
.ez-undo .bar { position: absolute; bottom: 0; inset-inline-start: 0; height: 6px; background: var(--gold2); width: 100%; transform-origin: left; animation: ezbar 10s linear forwards; }
html[dir="rtl"] .ez-undo .bar { transform-origin: right; }
/* guide + voice teacher: glowing finger 👆 on the real button */
.ez-finger { position: fixed; z-index: 4000; font-size: 54px; pointer-events: none; transition: left 0.6s ease, top 0.6s ease; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); animation: eztap 1.1s ease-in-out infinite; }
.ez-glow { position: relative; z-index: 3500; outline: 5px solid var(--gold2) !important; outline-offset: 4px; box-shadow: 0 0 0 10px rgba(233, 196, 106, 0.35), 0 0 40px rgba(233, 196, 106, 0.8) !important; animation: ezglow 1.2s ease-in-out infinite; }
.ez-teach { position: fixed; z-index: 4100; inset-inline: 10px; top: 10px; margin: 0 auto; max-width: 640px; background: linear-gradient(135deg, var(--deep), var(--navy)); color: #fff; border: 2px solid var(--gold2); border-radius: 22px; padding: 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.ez-teach .t { flex: 1 1 0; font-size: 19px; font-weight: 800; overflow-wrap: anywhere; } .ez-teach .t small { display: block; color: var(--gold3); font-size: 14px; font-weight: 700; }
.ez-teach .btn { min-height: 56px; min-width: 56px; justify-content: center; border-radius: 14px; font-size: 20px; }
.ez-teach .ez-dots { margin: 6px 0 0; justify-content: flex-start; } .ez-teach .ez-dots i { width: 12px; height: 12px; }
/* lessons */
.ez-les .ez-row .ez-flat { background: linear-gradient(135deg, #f472b6, #be185d); font-size: 30px; }
.ez-les .ez-row.done .ez-flat { background: #16a34a; }
.ez-tick { color: #16a34a; font-size: 30px; font-weight: 900; }
/* users page: easy switches */
.ez-users .seg .btn.on { background: var(--navy); color: var(--gold2); }
/* top bar easy toggle */
#ezbtn.on { background: var(--gold2); color: #2b1d00; }
/* picture mode OFF: smaller pictures, words first */
html.ez-nopic .ez-pic-i { width: 54px; height: 54px; font-size: 26px; border-radius: 16px; } html.ez-nopic .ez-tile { min-height: 120px; }
/* phone */
@media (max-width: 700px) {
  .ez-bar { gap: 6px; } .ez-bar .ez-w { display: none; } .ez-bar .btn { min-width: 56px; }
  .ez { font-size: 17px; }
  .ez h2.ez-title { font-size: 22px; } .ez h2.ez-title .ez-ti { width: 44px; height: 44px; font-size: 22px; }
  .ez-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ez-tile { min-height: 150px; font-size: 19px !important; } .ez-pic-i { width: 76px; height: 76px; font-size: 38px; }
  .ez-num { min-height: 104px; } .ez-num b { font-size: 40px; } .ez-num span { font-size: 15px; }
  .ez-row { flex-wrap: wrap; } .ez-row .ez-go { flex: 1 1 100%; justify-content: center; }
  .ez-total .v { font-size: 42px; }
  .ez-bar .btn { padding: 0 10px; font-size: 16px; } .ez-bar .ez-sz .btn { min-width: 56px; }
  .ez-meth { gap: 8px; } .ez-m { min-height: 110px; font-size: 16px; }
  .ez-best { flex-wrap: wrap; } .ez-grid { grid-template-columns: repeat(3, 1fr); }
}
@keyframes ezpop { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ezup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ezbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes eztap { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(0, 10px) scale(0.92); } }
@keyframes ezglow { 0%, 100% { box-shadow: 0 0 0 8px rgba(233, 196, 106, 0.3), 0 0 26px rgba(233, 196, 106, 0.6); } 50% { box-shadow: 0 0 0 14px rgba(233, 196, 106, 0.45), 0 0 48px rgba(233, 196, 106, 0.95); } }
@keyframes ezpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); } 50% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); } }
@keyframes ezout { to { opacity: 0; transform: translateX(40px); height: 0; min-height: 0; padding: 0; margin: 0; border-width: 0; } }
@media (prefers-reduced-motion: reduce) { .ez-finger, .ez-glow, .ez-mic.rec { animation: none; } }
@media print { .ez-undo, .ez-teach, .ez-finger, .ez-bar { display: none !important; } }
/* ⓘ on every easy control (always ON in Easy screens) + the hint box (AR + EN, 🔊) */
.ez [data-hint^="easy."], .ez-undo [data-hint^="easy."] { position: relative; }
.ezi { position: absolute; top: -9px; inset-inline-end: -9px; z-index: 6; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--navy); border: 2px solid var(--gold); font: italic 900 15px/1 Georgia, "Times New Roman", serif; cursor: pointer; box-shadow: 0 3px 8px rgba(11, 31, 79, 0.2); user-select: none; }
.ezi:hover, .ezi:focus { background: var(--gold2); outline: none; }
.ez-sz .ezi, .ez-meth .ezi, .ez-f.ez-search > .ezi { top: 2px; inset-inline-end: 2px; width: 24px; height: 24px; font-size: 13px; }
.ez-f > .ezi { top: 0; inset-inline-end: 0; }
.ez-row > .ezi, .ez-total > .ezi, .ez-card > .ezi, .ez-step > .ezi, .ez-legend > .ezi, .ez-quick > .ezi, .ez-floors > .ezi { top: -10px; inset-inline-end: -6px; }
.ez-total > .ezi { background: var(--gold2); }
.ezh-back { position: fixed; inset: 0; z-index: 5000; background: rgba(6, 19, 49, 0.55); display: grid; place-items: center; padding: 14px; animation: ezup 0.18s ease-out; }
.ezh { background: var(--solid); color: var(--text); border-radius: 24px; border: 3px solid var(--gold); max-width: 560px; width: 100%; padding: 16px 18px 18px; box-shadow: var(--sh2); max-height: 86vh; overflow: auto; }
.ezh-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ezh-h b { flex: 1 1 0; font-size: 20px; color: var(--navy); overflow-wrap: anywhere; } [data-theme="dark"] .ezh-h b { color: var(--gold2); }
.ezh-h .btn { min-width: 56px; min-height: 56px; justify-content: center; font-size: 22px; border-radius: 16px; }
.ezh-i { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--gold2); display: grid; place-items: center; font: italic 900 22px/1 Georgia, serif; flex: 0 0 auto; }
.ezh p { margin: 8px 0 0; line-height: 1.7; } .ezh-1 { font-size: 20px; font-weight: 800; } .ezh-2 { font-size: 16px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.ez span.ezi, .ez-undo span.ezi { display: grid; place-items: center; font: italic 900 15px/1 Georgia, "Times New Roman", serif; color: var(--navy); text-align: center; margin: 0; padding: 0; opacity: 1; min-height: 0; }
.ez .ez-sz span.ezi, .ez .ez-meth span.ezi, .ez .ez-f.ez-search > span.ezi { font-size: 13px; }

/* ============================================================ DASHBOARD (cards / charts / board) */
.ezd { max-width: 1280px; }
.ezd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.ezd-head h2.ez-title { margin: 0; }
.ezd-sw { display: flex; flex-wrap: wrap; gap: 10px; }
.ezd-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 5px; box-shadow: var(--sh); }
.ezd-seg .btn { min-height: 56px; border-radius: 14px; font-weight: 800; border: 0; box-shadow: none; padding: 0 14px; }
.ezd-seg .btn.on { background: linear-gradient(135deg, var(--navy), var(--navy2)); color: var(--gold2); }
.ezd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ezd-grid.charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ezd-card { display: block; text-decoration: none; color: var(--text); background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66)); border: 1px solid rgba(201, 162, 74, 0.28); border-radius: 24px; padding: 18px; box-shadow: var(--sh); backdrop-filter: blur(10px); transition: transform 0.15s, box-shadow 0.15s; min-height: 140px; position: relative; overflow: visible; }
[data-theme="dark"] .ezd-card { background: linear-gradient(160deg, rgba(24, 36, 66, 0.9), rgba(14, 24, 48, 0.75)); }
.ezd-card:hover { transform: translateY(-3px); box-shadow: var(--sh2); border-color: var(--gold); }
.ezd-card.wide { grid-column: span 2; }
.ezd-card.big, .ezd-card.gold { background: linear-gradient(140deg, var(--deep), var(--navy) 60%, var(--navy2)); color: #fff; border-color: var(--gold); }
.ezd-card.big .ezd-ct, .ezd-card.gold .ezd-ct { color: var(--gold3); } .ezd-card.big .ezd-v b, .ezd-card.gold .ezd-v b { color: var(--gold2); }
.ezd-ct { display: flex; align-items: center; gap: 10px; font-family: Tajawal, Montserrat, sans-serif; font-weight: 800; font-size: 17px; color: var(--muted); line-height: 1.3; }
html[lang="en"] .ezd-ct { font-family: Montserrat, Tajawal, sans-serif; font-size: 15px; }
.ezd-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(135deg, var(--gold3), var(--gold)); flex: 0 0 auto; box-shadow: 0 6px 14px rgba(184, 137, 47, 0.3); }
.ezd-v { margin-top: 10px; display: flex; align-items: baseline; gap: 6px; }
.ezd-v b { font-family: Montserrat, Tajawal, sans-serif; font-weight: 900; font-size: 44px; line-height: 1; color: var(--navy); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; } [data-theme="dark"] .ezd-v b { color: var(--gold2); }
.ezd-v small { font-weight: 800; color: var(--muted); font-size: 15px; }
.ezd-sub { margin-top: 8px; font-weight: 700; color: var(--muted); font-size: 15px; } .ezd-card.big .ezd-sub, .ezd-card.gold .ezd-sub { color: #dbe4f5; }
.ezd-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .ezd-row > b { font-size: 14px; min-width: 70px; }
.ezd-chip { display: inline-flex; gap: 6px; align-items: center; background: rgba(22, 163, 74, 0.1); border: 1px solid rgba(22, 163, 74, 0.35); color: #166534; border-radius: 99px; padding: 3px 10px; font-weight: 800; font-size: 14px; } [data-theme="dark"] .ezd-chip { color: #86efac; }
.ezd-mini { display: flex; gap: 8px; align-items: flex-end; height: 92px; margin-top: 10px; }
.ezd-bar { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .ezd-bar em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.ezd-bar i { display: block; width: 100%; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--gold2), #b8892f); min-height: 4px; }
.ezd-bar i.h0 { height: 4%; } .ezd-bar i.h1 { height: 10%; } .ezd-bar i.h2 { height: 20%; } .ezd-bar i.h3 { height: 30%; } .ezd-bar i.h4 { height: 40%; } .ezd-bar i.h5 { height: 50%; } .ezd-bar i.h6 { height: 60%; } .ezd-bar i.h7 { height: 70%; } .ezd-bar i.h8 { height: 80%; } .ezd-bar i.h9 { height: 90%; } .ezd-bar i.h10 { height: 100%; }
.ezd-card.chart { min-height: 260px; }
.ezd-svg { width: 100%; height: auto; margin-top: 8px; font: 700 12px Montserrat, Tajawal, sans-serif; } .ezd-svg text { fill: var(--muted); } .ezd-svg .gl { stroke: currentColor; opacity: 0.08; }
.ezd-svg .ln { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linejoin: round; } .ezd-svg .ar { fill: rgba(201, 162, 74, 0.16); } .ezd-svg .br { fill: #6c8fd8; } .ezd-svg .br.now { fill: var(--gold); } .ezd-svg .bv { fill: var(--navy); font-weight: 900; }
.ezd-don { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; } .ezd-don svg { width: 150px; height: 150px; flex: 0 0 auto; } .ezd-don .donut-leg { display: grid; gap: 6px; font-weight: 700; }
.ezd-card.heat { padding: 14px; }
.ezd-fl { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); } .ezd-fl:last-child { border-bottom: 0; }
.ezd-fn { min-width: 76px; font-weight: 900; color: var(--navy); font-family: Tajawal, Montserrat, sans-serif; } [data-theme="dark"] .ezd-fn { color: var(--gold2); }
.ezd-cells { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 0; }
.ezd-cell { min-width: 64px; height: 56px; border-radius: 12px; display: grid; place-items: center; color: #fff; text-decoration: none; font: 900 16px Montserrat, sans-serif; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15); padding: 0 6px; }
.ezd-cell.free { background: #16a34a; } .ezd-cell.res { background: #0d9488; } .ezd-cell.in { background: #dc2626; } .ezd-cell.dep { background: #7c3aed; } .ezd-cell.clean { background: #eab308; color: #3b2a00; } .ezd-cell.ooo { background: #94a3b8; }
.ezd-c-res { background: #0d9488; } .ezd-c-dep { background: #7c3aed; }
@media (max-width: 1100px) { .ezd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ezd-grid, .ezd-grid.charts { grid-template-columns: minmax(0, 1fr); } .ezd-card.wide { grid-column: auto; } .ezd-v b { font-size: 40px; } .ezd-sw, .ezd-seg { width: 100%; } .ezd-seg .btn { flex: 1 1 0; padding: 0 8px; font-size: 15px; } .ezd-fl { flex-direction: column; align-items: flex-start; } }
/* ============================================================ LEARN DIYAFA */
.ezl-prog { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--deep), var(--navy)); color: #fff; border-radius: 22px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--sh2); flex-wrap: wrap; }
.ezl-prog b { font: 900 34px Montserrat, Tajawal, sans-serif; color: var(--gold2); } .ezl-prog span { font-weight: 800; }
.ezl-bar { flex: 1 1 200px; height: 16px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); overflow: hidden; } .ezl-bar.sm { display: inline-block; width: 110px; height: 10px; vertical-align: middle; background: var(--line); flex: 0 0 auto; }
.ezl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); border-radius: 99px; }
.ezl-bar i.w0 { width: 0%; } .ezl-bar i.w5 { width: 5%; } .ezl-bar i.w10 { width: 10%; } .ezl-bar i.w15 { width: 15%; } .ezl-bar i.w20 { width: 20%; } .ezl-bar i.w25 { width: 25%; } .ezl-bar i.w30 { width: 30%; } .ezl-bar i.w35 { width: 35%; } .ezl-bar i.w40 { width: 40%; } .ezl-bar i.w45 { width: 45%; } .ezl-bar i.w50 { width: 50%; } .ezl-bar i.w55 { width: 55%; } .ezl-bar i.w60 { width: 60%; } .ezl-bar i.w65 { width: 65%; } .ezl-bar i.w70 { width: 70%; } .ezl-bar i.w75 { width: 75%; } .ezl-bar i.w80 { width: 80%; } .ezl-bar i.w85 { width: 85%; } .ezl-bar i.w90 { width: 90%; } .ezl-bar i.w95 { width: 95%; } .ezl-bar i.w100 { width: 100%; } 
.ezl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ezl-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); background: var(--solid); border: 2px solid var(--line); border-radius: 22px; padding: 16px; box-shadow: var(--sh); min-height: 150px; transition: transform 0.15s; }
.ezl-card:hover { transform: translateY(-3px); border-color: var(--gold); } .ezl-card.done { border-color: #16a34a; background: linear-gradient(160deg, rgba(22, 163, 74, 0.08), var(--solid)); }
.ezl-card .ez-pic-i { width: 56px; height: 56px; font-size: 26px; border-radius: 16px; } .ezl-card .t { font-weight: 900; font-size: 19px; color: var(--navy); } [data-theme="dark"] .ezl-card .t { color: var(--gold2); } .ezl-card .s { color: var(--muted); font-weight: 600; font-size: 15px; line-height: 1.5; }
.ezl-card .ez-tick { position: absolute; top: 12px; inset-inline-start: 14px; } .ezl-card { position: relative; }
.ezl-txt h3 { margin: 6px 0 4px; color: var(--navy); font-size: 20px; } [data-theme="dark"] .ezl-txt h3 { color: var(--gold2); } .ezl-txt p { font-size: 18px; line-height: 1.7; margin: 0 0 8px; }
.ezl-steps { font-size: 18px; line-height: 1.8; font-weight: 700; padding-inline-start: 26px; margin: 0; } .ezl-steps li::marker { color: var(--gold); font-weight: 900; }
.ezl-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .ezl-acts .btn { justify-content: center; white-space: normal; text-align: center; }
.ezl-staff { margin-top: 6px; }
.ezl-sheet .ezl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px; } .ezl-sheet h3 { margin: 8px 0 4px; font-size: 15px; } .ezl-sheet p, .ezl-sheet li { font-size: 13.5px; line-height: 1.7; }
.ezl-sign { display: grid; gap: 14px; margin-top: 26px; font-size: 13px; font-weight: 700; }
@media print { .ezl-sheet .ezl-two { gap: 16px; } }
.ezd-v.m b { font-size: 34px; } .ezd-v { flex-wrap: wrap; } .ezd-bar em { white-space: nowrap; font-size: 11px; }
@media (max-width: 1300px) { .ezd-v.m b { font-size: 28px; } }