/* ============================================================================
   زخارف قوالب مجموعة «general» — tenants/presets/general.py (aref void midnight)
   ============================================================================
   الملف ده للقاعدة الخاصة بقالب واحد بس: ``Preset.signature``. base.html
   بيحمّله لوحده (مش الست ملفات) لأي منصة قالبها من المجموعة دي، بعد
   details.css، وبيحط ``data-signature="<key>"`` على ``<html>`` لما المفتاح
   مش فاضي. «aref» (glow) عمره ما بيحمّله — شكله قرار صاحب المنتج.

   كل قاعدة هنا تبدأ بـ:
     html[data-signature="<key>"] .theme-student <hook>
   والـhooks هي نفسها اللي في details.css:
     [data-tpl="hero"] [data-tpl="hero-panel"] (+ ::before ::after و > span)
     [data-tpl="heading"] [data-tpl="section"] [data-tpl="card"]
     [data-tpl="badge"] [data-tpl="cover"]
   ألوان من ``var(--tc-*)`` بس (قراية، مفيش تعريف ``--tc-`` هنا — ده
   مكانه base.html). مسطّح: لا تدرّج ناعم ولا زجاج ولا ظل مبلور.

   tenants.tests_preset_quality بيتأكد إن كل signature متحطّة في قالب من
   المجموعة ليها قاعدة هنا — مفتاح من غير قاعدة بيبان في الصفحة ولا بيرسم.
   ========================================================================== */


/* ── «سبورة» (void): الخط البرتقالي الواحد والأرقام الرفيعة الكبيرة ─────── */
/* لوحة رسم معماري: كل قسم في الرئيسية مترقّم ٠١ ٠٢ ٠٣ ٠٤ برقم رفيع كبير فوق
   عنوانه، زي أرقام الألواح في مجموعة رسومات. الرقم رمادي مش برتقالي — البرتقالي
   واحد بس في الصفحة: عمود العنوان (heading_mark='bar') وخط شعرة واحد بيقفل
   الهيرو. رقمين برتقالي تحت بعض كانوا هيبقوا زحمة مش «لون واحد». */
html[data-signature="void"] .theme-student {
  counter-reset: void-sheet;
}
html[data-signature="void"] .theme-student [data-tpl="section"] {
  counter-increment: void-sheet;
}
html[data-signature="void"] .theme-student [data-tpl="section"] [data-tpl="heading"]::before {
  content: counter(void-sheet, decimal-leading-zero);
  /* The '/ ""' alt text keeps the number out of the accessibility tree
     (the h2 would otherwise read «٠١ الكورسات»); browsers without the
     syntax drop the line and keep the one above. */
  content: counter(void-sheet, decimal-leading-zero) / '';
  display: block;
  margin-block-end: 0.15em;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: -0.02em;
  /* Western digits on purpose: a sheet number, not a quantity. 45% of the
     text colour stays a background figure without competing with the
     white title. */
  color: color-mix(in srgb, var(--tc-text) 45%, transparent);
  font-variant-numeric: tabular-nums;
}
/* الرئيسية بس (الهيرو اللي بعده أقسام): في /courses/ و/teachers/ كارت
   البحث طالع فوق حافة الهيرو والخط كان بيقطعه من النص. */
html[data-signature="void"] .theme-student [data-tpl="hero"]:has(~ [data-tpl="section"])::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--tc-primary);
  pointer-events: none;
}

/* لوحة الهيرو (٢٠٢٦-٠٩-٢٣): QA قال الهيرو «قريب من الفراغ» — نص على أسود
   ونص الشاشة فاضي. دلوقتي split والنص فاضي بقى لوح رسم معماري: مسقط أفقي
   بخط شعرة أبيض (حيطان تقيلة، فتحات أبواب بقوس الفتح، شبابيك، محاور مترقّمة
   بدواير)، إطار لوح مزدوج، خانة عنوان في الركن، وخط أبعاد واحد بالبرتقالي —
   نفس «لون واحد، خط واحد» اللي الصفحة ماشية بيه. SVG كـ``mask`` عشان اللون
   ييجي من التوكن، والـviewBox بنفس نسبة اللوحة (٥:٤) فمابيتعوّجش. */
@media (min-width: 768px) {
  html[data-signature="void"] .theme-student [data-tpl="hero-panel"] {
    border: 1px solid color-mix(in srgb, var(--tc-text) 55%, transparent);
    background-color: var(--tc-bg);
    background-image: none;
    /* إطار اللوح الجوّاني: خط شعرة تاني على بعد ٠٫٦rem، ``inset`` مصمت. */
    box-shadow:
      inset 0 0 0 0.6rem var(--tc-bg),
      inset 0 0 0 calc(0.6rem + 1px) color-mix(in srgb, var(--tc-text) 30%, transparent);
  }
  html[data-signature="void"] .theme-student [data-tpl="hero-panel"]::before {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: color-mix(in srgb, var(--tc-text) 78%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M70 90H400V330H70Z' stroke-width='5'/%3E%3Cpath d='M230 90V200M230 250V330M230 200H320M360 200H400M70 230H150M190 230H230' stroke-width='3'/%3E%3Cpath d='M150 230A40 40 0 0 1 190 190' /%3E%3Cpath d='M190 190V230'/%3E%3Cpath d='M320 200A40 40 0 0 0 360 240'/%3E%3Cpath d='M360 200V240'/%3E%3Cpath d='M110 90v-6h60v12h-60zM280 330v-6h70v12h-70z' stroke-width='1.2'/%3E%3Cpath d='M40 60H440M40 360H440M40 60V360M440 60V360' stroke-dasharray='2 6' stroke-width='1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='70' cy='40' r='12'/%3E%3Ccircle cx='230' cy='40' r='12'/%3E%3Ccircle cx='400' cy='40' r='12'/%3E%3Cpath d='M70 52V90M230 52V90M400 52V90' stroke-dasharray='3 4'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M70 90H400V330H70Z' stroke-width='5'/%3E%3Cpath d='M230 90V200M230 250V330M230 200H320M360 200H400M70 230H150M190 230H230' stroke-width='3'/%3E%3Cpath d='M150 230A40 40 0 0 1 190 190' /%3E%3Cpath d='M190 190V230'/%3E%3Cpath d='M320 200A40 40 0 0 0 360 240'/%3E%3Cpath d='M360 200V240'/%3E%3Cpath d='M110 90v-6h60v12h-60zM280 330v-6h70v12h-70z' stroke-width='1.2'/%3E%3Cpath d='M40 60H440M40 360H440M40 60V360M440 60V360' stroke-dasharray='2 6' stroke-width='1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='70' cy='40' r='12'/%3E%3Ccircle cx='230' cy='40' r='12'/%3E%3Ccircle cx='400' cy='40' r='12'/%3E%3Cpath d='M70 52V90M230 52V90M400 52V90' stroke-dasharray='3 4'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  html[data-signature="void"] .theme-student [data-tpl="hero-panel"] > span {
    inset: 0;
    width: auto;
    height: auto;
    opacity: 1;
    background: var(--tc-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M58 72H412M70 62V84M400 62V84M230 64V80'/%3E%3Cpath d='M64 78l12-12M394 78l12-12M224 78l12-12' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M58 72H412M70 62V84M400 62V84M230 64V80'/%3E%3Cpath d='M64 78l12-12M394 78l12-12M224 78l12-12' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
}
/* خانة العنوان: نص حقيقي، في الركن اللي تحت على آخر السطر زي خانة لوح
   الرسم. رفيع ورمادي زي أرقام الأقسام — مش منافس للعنوان. */
html[data-signature="void"] .theme-student [data-tpl="hero-panel"]::after {
  content: 'لوح 01 — مقياس 1:100';
  position: absolute;
  inset: auto auto 0.6rem 0.6rem;
  width: auto;
  height: auto;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--tc-text) 30%, transparent);
  border-block-start: 1px solid color-mix(in srgb, var(--tc-text) 30%, transparent);
  border-radius: 0;
  box-shadow: none;
  background: var(--tc-bg);
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--tc-text) 60%, transparent);
  white-space: nowrap;
}
/* الموبايل: اللوحة مش بتتعرض كمسقط (كانت هتدفع أول كورس تحت الشاشة)،
   بس خط الأبعاد وخانة العنوان على نصّه بيفضلوا تحت الزراير — شريط واحد بيقول «لوح
   رسم» من غير ما ياخد مساحة. الخط نفسه لون مصمت، والشَرطتين المايلتين في
   الطرفين (علامة الأبعاد المعمارية) ماسك صغير بمقاس ثابت. */
@media (max-width: 767px) {
  html[data-signature="void"] .theme-student [data-tpl="hero-panel"] {
    display: block;
    position: relative;
    height: 24px;
    margin-block-start: 2.25rem;
  }
  html[data-signature="void"] .theme-student [data-tpl="hero-panel"]::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: 24px;
    background:
      linear-gradient(var(--tc-primary), var(--tc-primary)) center / calc(100% - 8px) 1.5px no-repeat;
  }
  html[data-signature="void"] .theme-student [data-tpl="hero-panel"] > span {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    display: block;
    height: 24px;
    background: var(--tc-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24'%3E%3Cpath d='M8 2V22' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M2 18L14 6' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24'%3E%3Cpath d='M8 2V22' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M2 18L14 6' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-position: left center, right center;
    -webkit-mask-size: 16px 24px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24'%3E%3Cpath d='M8 2V22' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M2 18L14 6' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24'%3E%3Cpath d='M8 2V22' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M2 18L14 6' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") no-repeat;
            mask-position: left center, right center;
            mask-size: 16px 24px;
  }
  /* الخانة على نص خط الأبعاد، زي رقم البُعد نفسه: رقعة بلون الأرضية بتقطع
     الخط. */
  html[data-signature="void"] .theme-student [data-tpl="hero-panel"]::after {
    inset: 12px auto auto 50%;
    padding: 0 0.6rem;
    border: 0;
    transform: translate(-50%, -50%);
  }
}

/* ── «سهر» (midnight): سما بالليل ───────────────────────────────────────── */
/* شريط نجوم صغيرة متفرّقة بين الناف والسطر الصغير — مش ورا النص، عشان
   ماينزّلش تباين العنوان. والوحة شباك أوضة بالليل: إطار بعارضتين، هلال
   أصفر، ونجوم بترمش (بس لو المستخدم ماطلبش تقليل الحركة). */
html[data-signature="midnight"] .theme-student [data-tpl="hero"]::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  inset-block-start: 4.4rem;
  height: 4rem;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--tc-accent) 70%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='64'%3E%3Cpath transform='translate(20 8) scale(0.75)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='92' cy='40' r='1.6'/%3E%3Cpath transform='translate(140 30) scale(0.5)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='196' cy='12' r='1.2'/%3E%3Cpath transform='translate(246 34) scale(0.9)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='318' cy='20' r='1.6'/%3E%3Ccircle cx='60' cy='54' r='1'/%3E%3Cpath transform='translate(300 44) scale(0.45)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3C/svg%3E") repeat-x 0 0 / 360px 64px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='64'%3E%3Cpath transform='translate(20 8) scale(0.75)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='92' cy='40' r='1.6'/%3E%3Cpath transform='translate(140 30) scale(0.5)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='196' cy='12' r='1.2'/%3E%3Cpath transform='translate(246 34) scale(0.9)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='318' cy='20' r='1.6'/%3E%3Ccircle cx='60' cy='54' r='1'/%3E%3Cpath transform='translate(300 44) scale(0.45)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3C/svg%3E") repeat-x 0 0 / 360px 64px;
}

@media (min-width: 768px) {
  html[data-signature="midnight"] .theme-student [data-tpl="hero-panel"] {
    background-color: var(--tc-footer-bg);
    background-image: none;
  }
  /* الهلال: ظل داخلي مصمت مزاح — حافة حادة، من غير دايرة تانية بلون
     الأرضية تتلخبط لو الأرضية اتغيّرت. */
  html[data-signature="midnight"] .theme-student [data-tpl="hero-panel"]::before {
    inset-block-start: 14%;
    inset-inline-end: 12%;
    width: 26%;
    background: transparent;
    border: 0;
    box-shadow: inset -1.6rem 0.7rem 0 0 var(--tc-accent);
    transform: rotate(-12deg);
  }
  /* عارضتين الشباك: خطين مصمتين بنفس لون الإطار. */
  html[data-signature="midnight"] .theme-student [data-tpl="hero-panel"]::after {
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background:
      linear-gradient(var(--tc-text), var(--tc-text)) center / max(2px, var(--tc-border-width, 1px)) 100% no-repeat,
      linear-gradient(var(--tc-text), var(--tc-text)) center / 100% max(2px, var(--tc-border-width, 1px)) no-repeat;
  }
  html[data-signature="midnight"] .theme-student [data-tpl="hero-panel"] > span {
    inset: 0;
    width: auto;
    height: auto;
    opacity: 1;
    background-image: none;
    background-color: color-mix(in srgb, var(--tc-text) 80%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='160'%3E%3Cpath transform='translate(30 24) scale(0.8)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='120' cy='30' r='2'/%3E%3Cpath transform='translate(150 90) scale(0.55)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='60' cy='110' r='1.6'/%3E%3Cpath transform='translate(90 60) scale(0.4)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='175' cy='140' r='1.4'/%3E%3Cpath transform='translate(20 128) scale(0.5)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3C/svg%3E") repeat 0 0 / 200px 160px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='160'%3E%3Cpath transform='translate(30 24) scale(0.8)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='120' cy='30' r='2'/%3E%3Cpath transform='translate(150 90) scale(0.55)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='60' cy='110' r='1.6'/%3E%3Cpath transform='translate(90 60) scale(0.4)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3Ccircle cx='175' cy='140' r='1.4'/%3E%3Cpath transform='translate(20 128) scale(0.5)' d='M12 0L14.4 9.6 24 12 14.4 14.4 12 24 9.6 14.4 0 12 9.6 9.6z'/%3E%3C/svg%3E") repeat 0 0 / 200px 160px;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  html[data-signature="midnight"] .theme-student [data-tpl="hero-panel"] > span {
    animation: midnight-twinkle 3.2s steps(2, jump-none) infinite alternate;
  }
}
@keyframes midnight-twinkle {
  from { opacity: 1; }
  to { opacity: 0.45; }
}


/* ── «استوديو» (studio): تلات كروت كورسات متراصّة وزرار تشغيل ─────────────
   الزائر يعرف من أول نظرة إن دي منصة كورسات: كروت بخط النص، زرار تشغيل
   بالأساسي، وتاب أصفر «جديد» — SVG كـmask عشان اللون من التوكن. */
@media (min-width: 768px) {
  html[data-signature="studio"] .theme-student [data-tpl="hero-panel"] {
    background-color: var(--tc-surface);
    background-image: var(--tc-hero-bg, none);
    box-shadow: 10px 10px 0 0 var(--tc-primary);
  }
  html[data-signature="studio"] .theme-student [data-tpl="hero-panel"]::before {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    background-image: none;
    background: var(--tc-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='4'%3E%3Crect x='150' y='60' width='280' height='170' rx='18'/%3E%3Crect x='110' y='110' width='280' height='170' rx='18'/%3E%3Crect x='70' y='160' width='280' height='170' rx='18'/%3E%3Cpath d='M100 290h120M100 310h80' stroke-width='6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='4'%3E%3Crect x='150' y='60' width='280' height='170' rx='18'/%3E%3Crect x='110' y='110' width='280' height='170' rx='18'/%3E%3Crect x='70' y='160' width='280' height='170' rx='18'/%3E%3Cpath d='M100 290h120M100 310h80' stroke-width='6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  html[data-signature="studio"] .theme-student [data-tpl="hero-panel"]::after {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    background-image: none;
    background: var(--tc-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M210 225m-44 0a44 44 0 1 0 88 0a44 44 0 1 0 -88 0ZM196 203v44l38-22Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M210 225m-44 0a44 44 0 1 0 88 0a44 44 0 1 0 -88 0ZM196 203v44l38-22Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  html[data-signature="studio"] .theme-student [data-tpl="hero-panel"] > span {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    background-image: none;
    background: var(--tc-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Crect x='262' y='146' width='80' height='26' rx='6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Crect x='262' y='146' width='80' height='26' rx='6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
}