/* صفحة بطاقة يوم العلم (/flag) — نفس الثيم العاجي حق صفحة المناسبات (body.fam)، وكل أصنافها تبدأ بـ fl- عشان ما تتعارض مع style.css
   الجوال أولاً (360–430): عمود واحد بالترتيب (لمن ← الاسم ← التصميم ← العبارة ← المعاينة والحفظ)، والكمبيوتر عمودين والمعاينة ثابتة على اليسار */

/* الثيم العاجي (منسوخ من cards.html لأنه مضمّن هناك مب في style.css) */
body.fam { background: var(--ivory); color: var(--fg-l); }
.fam .top { background: color-mix(in srgb, var(--ivory) 88%, transparent); border-color: var(--line-l); }
.fam .nav a { color: var(--mute-l); }
.fam .nav a:hover, .fam .nav a[aria-current="page"] { color: var(--gold-deep); }
.fam .eyebrow, .fam .kicker { color: var(--gold-deep); }
.fam .menu-btn { border-color: var(--line-l); }
@media (max-width: 1080px) { .fam .nav { background: var(--ivory); border-color: var(--line-l); } .fam .nav a { color: var(--fg-l); border-color: var(--line-l); } }
.fam .btn-line { border-color: var(--line-l); color: var(--fg-l); }
.fam footer { border-color: var(--line-l); color: var(--mute-l); }

/* البطل: قصير عشان الأداة تبان من أول شاشة بالجوال */
.fl-hero { padding-block: 46px 6px; }
.fl-hero h1 { font-size: clamp(30px, 5vw, 56px); margin-top: 10px; }
.fl-hero h1 em { font-style: normal; color: var(--gold-deep); }
/* علم صغير مرسوم (بدل إيموجي 🇦🇪 اللي يطلع حروف AE في ويندوز): الأحمر جهة السارية */
.fl-mini { display: inline-block; width: .92em; height: .46em; margin-inline-start: .28em; vertical-align: .1em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .14), 0 3px 8px -3px rgba(60, 45, 20, .35); }
.fl-hero p { color: var(--mute-l); font-size: 18px; margin-top: 12px; max-width: 60ch; }
.fl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fl-tags span { background: var(--paper); border: 1px solid var(--line-l); border-radius: 999px; padding: 4px 13px; font-size: 14px; }
.fl-tags .fl-left { background: var(--fg-l); color: var(--ivory); border-color: var(--fg-l); font-weight: 500; }

/* الأداة */
.fl-make { padding-block: 22px 56px; }
.fl-build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 24px; align-items: start; }
.fl-form { display: grid; gap: 24px; min-width: 0; padding: 22px; background: var(--paper); border: 1px solid var(--line-l); border-radius: 22px; }
.fl-fs { border: 0; margin: 0; padding: 0; min-width: 0; min-inline-size: 0; }
.fl-fs > legend { padding: 0; margin-bottom: 10px; }
.fl-f { display: grid; gap: 7px; min-width: 0; }
.fl-lbl { font-weight: 700; font-size: 15.5px; line-height: 1.5; }
.fl-lbl small { font-weight: 400; font-size: 13px; color: var(--mute-l); }
.fl-help { color: var(--mute-l); font-size: 13.5px; line-height: 1.65; }
.fl-in { font: inherit; font-size: 17px; color: var(--fg-l); background: var(--ivory); border: 1px solid var(--line-l); border-radius: 14px; padding: 10px 14px; min-height: 50px; width: 100%; min-width: 0; transition: border-color .2s, background-color .2s; }
.fl-in-big { font-size: 19px; font-weight: 500; min-height: 54px; }
.fl-in:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line-l)); }
.fl-in:focus { outline: 2px solid var(--gold-deep); outline-offset: 1px; background: var(--paper); }
.fl-in[aria-invalid="true"] { border-color: #C0392B; background: #FFF8F7; }
.fl-in[aria-invalid="true"]:focus { outline-color: #9B1C1C; }
.fl-ltr { direction: ltr; text-align: left; font-family: var(--f-lat); letter-spacing: .02em; }
.fl-err { display: flex; align-items: flex-start; gap: 7px; color: #9B1C1C; font-size: 14px; font-weight: 500; line-height: 1.6; }
.fl-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #9B1C1C; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.fl-err-box { background: #FDECEC; border: 1px solid #F1C2C2; border-radius: 12px; padding: 9px 12px; }

/* أزرار الاختيار: الراديو الحقيقي مخفي داخل الملصق (يبقى للكيبورد وقارئ الشاشة)، والشكل على الـspan اللي بعده */
.fl-tabs label, .fl-fmt label, .fl-cat, .fl-ch { position: relative; cursor: pointer; min-width: 0; }
.fl-tabs input, .fl-fmt input, .fl-cat input, .fl-ch input { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

/* لمن البطاقة: للأفراد / للجهات */
.fl-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 16px; background: var(--ivory2); min-width: 0; }
.fl-tabs span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 10px; border-radius: 12px; font-weight: 500; font-size: 16px; color: var(--mute-l); transition: background-color .2s, color .2s, box-shadow .2s; }
.fl-tabs svg { width: 20px; height: 20px; flex: none; }
.fl-tabs label:hover span { color: var(--fg-l); }
.fl-tabs input:checked + span { background: var(--paper); color: var(--fg-l); box-shadow: 0 1px 2px rgba(60, 50, 30, .12), 0 0 0 1px var(--line-l); }
.fl-tabs input:checked + span svg { color: var(--gold-deep); }

/* التصاميم: أقسام فوق + شريط أفقي (الجوال يمرر بإصبعه، والكمبيوتر بالأسهم أو الكيبورد).
   الكلاسيك وتصميم الجهات مصغّراتها مرسومة من نفس المحرّك بالاسم المكتوب، وتصاميم الصور مصغّرات جاهزة.
   لو المحرّك قديم (بلا أقسام ولا صور) تبقى الشبكة القديمة: 3 أعمدة */
.fl-form { --fl-pad: 22px; --fl-tile: 124px; }
.fl-designs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 480px; }
.fl-d { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fl-d:focus-visible { outline: none; }
.fl-d-c { position: relative; display: block; overflow: hidden; border: 1px solid var(--line-l); border-radius: 14px; background: var(--paper); transition: border-color .2s, box-shadow .2s; }
.fl-d-c > canvas, .fl-d-c > img { display: block; width: 100%; height: auto; background: linear-gradient(110deg, var(--ivory2) 30%, var(--ivory) 50%, var(--ivory2) 70%) 0 0 / 220% 100%; animation: fl-shim 1.4s linear infinite; }
.fl-d-c > .on { animation: none; background: var(--ivory2); }
.fl-d-c > img.bad { opacity: 0; }
.fl-d b { display: block; padding: 6px 4px 2px; font-size: 13.5px; font-weight: 500; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-d:hover .fl-d-c { border-color: var(--gold); }
/* المختار: إطار ذهبي + علامة ✓ في الزاوية + الاسم بالذهبي */
.fl-d[aria-checked="true"] .fl-d-c { border-color: var(--gold-deep); box-shadow: 0 0 0 2px var(--gold-deep), 0 12px 22px -14px rgba(120, 85, 29, .7); }
.fl-d[aria-checked="true"] b { color: var(--gold-deep); font-weight: 700; }
.fl-d-ok { position: absolute; top: 7px; inset-inline-end: 7px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-deep); color: #fff; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(40, 30, 10, .3); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; }
.fl-d-ok svg { width: 14px; height: 14px; }
.fl-d[aria-checked="true"] .fl-d-ok { opacity: 1; transform: none; }
.fl-d:focus-visible .fl-d-c { outline: 2px solid var(--obs); outline-offset: 3px; }
@keyframes fl-shim { to { background-position: -220% 0; } }

/* الأقسام: سطر واحد يتمرر بالعرض (يطلع لين حافة اللوح) */
.fl-cats { display: flex; gap: 8px; margin: 0 calc(var(--fl-pad) * -1) 6px; padding: 2px var(--fl-pad) 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.fl-cats::-webkit-scrollbar { display: none; }
.fl-cats[hidden], .fl-cat[hidden] { display: none; }
.fl-cat { flex: none; padding-block: 2px; }
.fl-cat span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-l); border-radius: 999px; background: var(--ivory); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.fl-cat:hover span { border-color: var(--gold); }
.fl-cat input:checked + span { background: var(--fg-l); border-color: var(--fg-l); color: var(--ivory); }

/* الشريط: يطلع لين حافة اللوح، ويثبت على بداية كل تصميم، والأطراف تتظلل لو فيه تصاميم برّا */
.fl-strip { position: relative; }
.fl-strip.on { margin-inline: calc(var(--fl-pad) * -1); }
.fl-designs.strip { display: flex; gap: 10px; max-width: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--fl-pad); padding: 6px var(--fl-pad) 8px; scrollbar-width: none; }
.fl-designs.strip::-webkit-scrollbar { display: none; }
.fl-designs.strip .fl-d { flex: none; width: var(--fl-tile); scroll-snap-align: start; }
.fl-d[hidden] { display: none; }
.fl-strip.on::before, .fl-strip.on::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 28px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.fl-strip.on::before { left: 0; background: linear-gradient(to right, var(--paper) 15%, transparent); }
.fl-strip.on::after { right: 0; background: linear-gradient(to left, var(--paper) 15%, transparent); }
.fl-strip.fade-l::before, .fl-strip.fade-r::after { opacity: 1; }
.fl-nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fl-strip.on .fl-nav { position: absolute; z-index: 2; top: calc(6px + var(--fl-tile) * 8 / 9 - 20px); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-l); border-radius: 50%; background: var(--paper); color: var(--fg-l); box-shadow: 0 8px 18px -8px rgba(60, 45, 20, .45); cursor: pointer; transition: border-color .2s, color .2s; }
  .fl-strip.on .fl-nav[hidden] { display: none; }
  .fl-nav-l { left: 8px; }
  .fl-nav-r { right: 8px; }
  .fl-nav svg { width: 20px; height: 20px; }
  .fl-nav:hover { border-color: var(--gold); color: var(--gold-deep); }
}

/* العبارات */
.fl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-ch { max-width: 100%; }
.fl-ch span { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 7px 15px; border: 1px solid var(--line-l); border-radius: 16px; background: var(--ivory); font-size: 15px; line-height: 1.55; transition: background-color .2s, color .2s, border-color .2s; }
.fl-ch:hover span { border-color: var(--gold); }
.fl-ch input:checked + span { background: var(--fg-l); color: var(--ivory); border-color: var(--fg-l); }

/* الشعار (للجهات): يتقرا في الجهاز بس */
.fl-org { display: grid; gap: 24px; }
.fl-org[hidden] { display: none; }
.fl-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fl-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.fl-logo-b { min-height: 48px; padding: 10px 18px; background: var(--ivory); }
.fl-file:focus-visible + .fl-logo-b { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.fl-logo-pv { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 380px; padding: 5px 5px 5px 8px; border: 1px solid var(--line-l); border-radius: 14px; background: var(--ivory); }
.fl-logo-pv canvas { flex: none; width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--line-l);
  background: repeating-conic-gradient(#EFE8DA 0 25%, #FFFDF8 0 50%) 0 0 / 12px 12px; }
.fl-logo-n { flex: 1; min-width: 0; font-size: 13.5px; color: var(--mute-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: right; }
.fl-logo-x { flex: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #9B1C1C; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fl-logo-x:hover { background: #FDECEC; }

/* المعاينة والحفظ */
.fl-pv { position: sticky; top: calc(82px + env(safe-area-inset-top, 0px)); display: grid; gap: 12px; min-width: 0; padding: 16px; background: var(--paper); border: 1px solid var(--line-l); border-radius: 22px; box-shadow: 0 24px 50px -30px rgba(60, 45, 20, .35); }
.fl-build.saved .fl-pv { position: static; }
.fl-pv-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fl-fmt { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 3px; border: 0; border-radius: 13px; background: var(--ivory2); }
.fl-fmt span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--mute-l); transition: background-color .2s, color .2s, box-shadow .2s; }
.fl-fmt input:checked + span { background: var(--paper); color: var(--fg-l); box-shadow: 0 1px 2px rgba(60, 50, 30, .12), 0 0 0 1px var(--line-l); }
.fl-fmt i { display: block; border: 1.6px solid currentColor; border-radius: 3px; }
.fl-ic-story { width: 10px; height: 16px; }
.fl-ic-square { width: 14px; height: 14px; }
.fl-tabs input:focus-visible + span, .fl-fmt input:focus-visible + span, .fl-cat input:focus-visible + span, .fl-ch input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.fl-stage { position: relative; display: grid; place-items: center; min-height: 220px; padding: 14px; border-radius: 16px; background: radial-gradient(120% 70% at 50% 0%, #FFFFFF, var(--ivory2)); }
/* بالكمبيوتر: عمود المعاينة كله (مع أزرار الحفظ) لازم يدخل في الشاشة وهو ثابت تحت الترويسة */
/* (أقصر بوضوح من عمود النموذج، عشان يثبت فعلاً وما يكون طوله نفس طول الأداة) */
.fl-stage canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 600px; max-height: max(300px, min(calc(100vh - 360px), 600px)); border-radius: 12px; background: var(--ivory); box-shadow: 0 22px 44px -22px rgba(60, 45, 20, .55), 0 0 0 1px rgba(60, 45, 20, .06); transition: opacity .25s, filter .25s; }
/* تصميم جديد ينزل: البطاقة القديمة تتغبّش شوي (بدون ما تتغير ألوان العلم) وفوقها تحميل صغير، لين تجهز الجديدة كاملة */
.fl-stage.wait canvas { filter: blur(3px); }
.fl-wait { position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 12px 30px -12px rgba(40, 30, 10, .5), 0 0 0 1px var(--line-l); font-size: 14px; font-weight: 500; color: var(--fg-l); white-space: nowrap; }
.fl-wait[hidden] { display: none; }
.fl-wait .fl-spin { width: 20px; height: 20px; border-width: 2.5px; }
.fl-over { position: absolute; inset: 14px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 18px; border-radius: 12px; text-align: center; font-size: 14.5px; color: var(--mute-l); background: color-mix(in srgb, var(--paper) 82%, transparent); }
.fl-fail { color: var(--fg-l); background: color-mix(in srgb, var(--paper) 94%, transparent); }
.fl-fail p { max-width: 30ch; font-weight: 500; }
.fl-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line-l); border-top-color: var(--gold-deep); animation: fl-spin .9s linear infinite; }
@keyframes fl-spin { to { transform: rotate(360deg); } }

.fl-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.fl-acts .btn { flex: 1 1 160px; min-height: 52px; padding-inline: 16px; font-size: 16.5px; font-weight: 700; transition: transform .2s, background .2s, border-color .2s, opacity .15s, filter .15s; }
.fl-save { background: var(--obs); color: #F6F2E9; }
.fl-save svg { color: #E9CF96; }
.fl-save:hover { background: #000; }
.fl-acts.solo .fl-save { background: linear-gradient(135deg, #E9CF96, #C9A158 45%, #9C7433); color: var(--obs); }
.fl-acts.solo .fl-save svg { color: var(--obs); }
/* التعطيل بس لو الاسم ناقص أو صورة التصميم ما نزلت (وقت الرسم الأزرار تبقى شغّالة، والضغطة تنتظر بـ«لحظة…») */
.fl-acts .btn:disabled { opacity: .42; cursor: not-allowed; transform: none; filter: saturate(.4); }
.fl-acts .btn.busy { opacity: .75; pointer-events: none; }
.fl-need, .fl-tip { text-align: center; font-size: 13.5px; line-height: 1.65; color: var(--mute-l); }
.fl-msg { text-align: center; font-size: 14px; font-weight: 500; color: #1F6B45; }
.fl-msg:empty { display: none; }
.fl-msg.err { color: #9B1C1C; }

/* بعد الحفظ: الفيديو المدفوع + عرض عيد الاتحاد (اختياري) */
.fl-after { display: grid; gap: 12px; margin-top: 4px; }
.fl-done { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; background: #EAF5EE; border: 1px solid #CDE6D6; scroll-margin: 90px 0 24px; }
.fl-done i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1F6B45; color: #fff; font-style: normal; font-size: 19px; font-weight: 700; }
.fl-done b { display: block; font-size: 17px; }
.fl-done p { font-size: 14px; line-height: 1.6; color: #2F5E45; }
.fl-up { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: var(--obs); color: #F6F2E9; }
.fl-up::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 220px; height: 220px; background: radial-gradient(closest-side, rgba(233, 207, 150, .22), transparent); pointer-events: none; }
.fl-up b { position: relative; font-size: 18px; line-height: 1.45; color: #F0DCAA; }
.fl-up p { position: relative; font-size: 14.5px; line-height: 1.7; color: rgba(246, 242, 233, .8); }
.fl-up .btn { position: relative; justify-self: start; margin-top: 8px; min-height: 48px; }
/* عرض الـ55: السعر القديم مشطوب جنب الجديد، وشارة صغيرة فوق الزر */
.fl-promo { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 11px; border-radius: 999px; background: rgba(233, 207, 150, .14); border: 1px solid rgba(233, 207, 150, .38); color: #F0DCAA; font-size: 13px; font-weight: 500; line-height: 1.6; }
.fl-promo .fl-mini { width: 1.5em; height: .75em; margin: 0; vertical-align: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.fl-promo[hidden] { display: none; }
.fl-promo + .btn { margin-top: 2px; }
.fl-was { margin-inline-start: 3px; font-size: .86em; font-weight: 500; opacity: .7; text-decoration-thickness: 1.5px; }
.fl-up .fl-due { display: flex; align-items: flex-start; gap: 7px; margin-top: 2px; font-size: 13.5px; line-height: 1.6; color: rgba(246, 242, 233, .78); }
.fl-due svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: #E9CF96; }
.fl-due span { text-wrap: balance; }
.fl-lead { display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: var(--ivory); border: 1px solid var(--line-l); }
.fl-lead .fl-in { background: var(--paper); }
.fl-lead-h b { font-size: 17px; }
.fl-lead-h small { font-size: 13px; color: var(--mute-l); }
.fl-lead-ok:focus { outline: none; }
.fl-lead-ok .fl-lead-h b { color: #1F6B45; }
.fl-chk { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 14.5px; line-height: 1.7; cursor: pointer; }
.fl-chk input { flex: none; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--gold-deep); cursor: pointer; }
.fl-chk a { color: var(--gold-deep); font-weight: 500; white-space: nowrap; }
.fl-chk .lat { white-space: nowrap; }
.fl-l-send { min-height: 50px; width: 100%; }
.fl-spread { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 14px; border: 1px dashed var(--line-l); border-radius: 14px; color: var(--fg-l); font-size: 15px; font-weight: 500; text-align: center; text-decoration: none; transition: border-color .2s, background-color .2s; }
.fl-spread:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold-hi) 14%, var(--paper)); }
.fl-spread svg { width: 20px; height: 20px; flex: none; color: #1F8A4C; }

/* سطر الذيل برّا شبكة الأداة (حاوية التثبيت)، فلوح المعاينة ما يغطيه */
.fl-foot-w { margin-top: 24px; }
.fl-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-size: 14px; color: var(--mute-l); text-align: center; }
.fl-foot span { text-wrap: balance; }
.fl-foot span::before { content: "✦"; margin-inline-end: 7px; font-size: 11px; color: var(--gold); }

/* نافذة «اضغط مطوّلاً» لمتصفحات التطبيقات (إنستقرام وفيسبوك) اللي ما تنزّل الملفات */
.fl-sheet { width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 22px; overflow: auto; background: var(--paper); color: var(--fg-l); box-shadow: 0 30px 80px rgba(18, 23, 31, .45); }
.fl-sheet::backdrop { background: rgba(18, 23, 31, .62); }
.fl-sheet-in { display: grid; gap: 12px; padding: 14px; }
.fl-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fl-sheet img { display: block; width: auto; max-width: 100%; max-height: 64dvh; margin: 0 auto; border-radius: 12px; -webkit-touch-callout: default; }
.fl-x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-l); background: var(--ivory); color: var(--fg-l); font-size: 15px; cursor: pointer; }

/* شريط الواتساب العائم يختفي وأنت تصمم عشان ما يغطي أزرار الحفظ (يرجع برّا الأداة) */
body.fl-on .dock { transform: translateY(150%); opacity: 0; pointer-events: none; }
body.fl-on .fab { opacity: 0; transform: scale(.6); pointer-events: none; }

@media (max-width: 920px) {
  .fl-build, .fl-foot-w { max-width: 600px; }
  .fl-build { grid-template-columns: minmax(0, 1fr); }
  .fl-pv { position: static; }
  .fl-designs { max-width: none; }
}
@media (max-width: 600px) {
  .fl-hero { padding-block: 30px 2px; }
  .fl-hero p { font-size: 16.5px; }
  .fl-make { padding-top: 18px; }
  .fl-build { gap: 16px; }
  .fl-foot-w { margin-top: 18px; }
  .fl-form { gap: 22px; padding: 16px; border-radius: 18px; --fl-pad: 16px; --fl-tile: 116px; }
  .fl-pv { padding: 12px; border-radius: 18px; }
  .fl-stage { padding: 10px; }
  .fl-over { inset: 10px; }
  .fl-stage canvas { max-height: 70vh; max-height: 70svh; border-radius: 10px; }
  .fl-up, .fl-lead { padding: 16px; }
  .fl-up .btn { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .fl-d-c > canvas, .fl-d-c > img { animation: none; } .fl-designs.strip { scroll-behavior: auto; } }