/* هوية لقمة مقرمشة: برتقالي #FF5E01 + كريمي #FCF2E8 */
@font-face { font-family: 'Baloo'; src: url(/assets/fonts/baloo-bhaijaan-2-arabic-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Baloo'; src: url(/assets/fonts/baloo-bhaijaan-2-arabic-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url(/assets/fonts/tajawal-arabic-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url(/assets/fonts/tajawal-arabic-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url(/assets/fonts/tajawal-arabic-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url(/assets/fonts/tajawal-arabic-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url(/assets/fonts/tajawal-latin-400-normal.woff2) format('woff2'); font-weight: 400; unicode-range: U+0000-00FF; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url(/assets/fonts/tajawal-latin-700-normal.woff2) format('woff2'); font-weight: 700; unicode-range: U+0000-00FF; font-display: swap; }

:root {
  --orange: #FF5E01; --orange-d: #D94D00; --orange-l: #FFE6D4; --orange-m: #F9A15F;
  --cream: #FCF2E8; --card: #FFFFFF; --ink: #2A1608; --muted: #8A6A55; --line: #F1D9C6;
  --green: #1B9A5A; --green-l: #DDF4E8; --red: #D3302B; --red-l: #FDE3E1; --amber: #E59A00; --amber-l: #FFF1CC;
  --r: 16px; --shadow: 0 2px 0 rgba(var(--orange-rgb, 255, 94, 1), .08), 0 8px 24px rgba(var(--orange-d-rgb, 120, 50, 0), .08);
  --font: 'Tajawal', system-ui, sans-serif; --display: 'Baloo', 'Tajawal', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); font-size: 16px; color: var(--ink); background-color: var(--cream); direction: rtl;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' fill='none' stroke='%23F9A15F' stroke-width='2' stroke-linecap='round' opacity='.35'%3E%3Cpath d='M40 40v12M34 46h12'/%3E%3Cpath d='M190 70v10M185 75h10'/%3E%3Ccircle cx='120' cy='30' r='2.5' fill='%23F9A15F'/%3E%3Ccircle cx='220' cy='180' r='2.5' fill='%23F9A15F'/%3E%3Ccircle cx='60' cy='190' r='2.5' fill='%23F9A15F'/%3E%3Cpath d='M130 140l4 8 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Cpath d='M20 120c6-8 12 8 18 0'/%3E%3Cpath d='M205 235c6-8 12 8 18 0'/%3E%3C/svg%3E");
}
h1, h2, h3, h4 { font-family: var(--display); margin: 0; font-weight: 800; line-height: 1.25; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.num, .ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 14px;
  border: 2px solid var(--orange); background: var(--orange); color: #fff; font-family: var(--display); font-weight: 700; font-size: 18px;
  transition: transform .06s, background .15s; user-select: none; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:hover { background: var(--orange-d); border-color: var(--orange-d); }
.btn.ghost { background: #fff; color: var(--orange-d); border-color: var(--orange-m); }
.btn.ghost:hover { background: var(--orange-l); }
.btn.green { background: var(--green); border-color: var(--green); }
.btn.red { background: #fff; color: var(--red); border-color: #F0B4B1; }
.btn.red:hover { background: var(--red-l); }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 15px; border-radius: 11px; }
.btn.lg { min-height: 60px; font-size: 22px; border-radius: 18px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.input, select.input, textarea.input {
  width: 100%; min-height: 48px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; outline: none; font-size: 17px;
}
.input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(var(--orange-rgb, 255, 94, 1), .12); }
textarea.input { min-height: 80px; resize: vertical; }
label.field { display: block; margin-bottom: 12px; font-weight: 700; color: var(--muted); font-size: 14px; }
label.field > .input, label.field > select { margin-top: 5px; color: var(--ink); font-weight: 500; }

.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid var(--line); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; background: var(--orange-l); color: var(--orange-d); font-weight: 700; font-size: 14px; }
.chip.green { background: var(--green-l); color: var(--green); }
.chip.red { background: var(--red-l); color: var(--red); }
.chip.amber { background: var(--amber-l); color: #9a6500; }
.muted { color: var(--muted); }
.spacer { flex: 1; }
.hide { display: none !important; }

.modal-bg { position: fixed; inset: 0; background: rgba(42, 22, 8, .5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; animation: fade .15s; }
.modal { background: var(--cream); border-radius: 22px; width: min(560px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); border: 2px solid var(--orange-m); }
.modal.wide { width: min(900px, 100%); }
.modal-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--orange); color: #fff; border-radius: 20px 20px 0 0; position: sticky; top: 0; z-index: 2; }
.modal-h h3 { font-size: 22px; flex: 1; }
.modal-h .x { background: rgba(255, 255, 255, .22); border: 0; color: #fff; width: 40px; height: 40px; border-radius: 12px; font-size: 22px; line-height: 1; }
.modal-b { padding: 20px; }
.modal-f { padding: 14px 20px; display: flex; gap: 10px; border-top: 1px solid var(--line); background: #fff; border-radius: 0 0 20px 20px; position: sticky; bottom: 0; }
@keyframes fade { from { opacity: 0 } }
@keyframes pop { from { transform: scale(.9); opacity: 0 } }

.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 14px; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: pop .2s; }
.toast.err { background: var(--red); }
.toast.ok { background: var(--green); }

/* ركن برتقالي مثل الهوية */
.blob-tl, .blob-br { position: fixed; z-index: 0; pointer-events: none; }
.blob-tl { top: 0; left: 0; width: min(34vw, 420px); }
.blob-br { bottom: 0; right: 0; width: min(34vw, 420px); }
a.btn { text-decoration: none; }