/* خط عربي/لاتيني موحّد بكل الأوزان: Cairo variable ذاتي الاستضافة (OFL). */
@font-face{font-family:'Cairo';src:url('fonts/cairo-arabic-wght-normal.woff2') format('woff2');font-weight:200 1000;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0660-0669;}
@font-face{font-family:'Cairo';src:url('fonts/cairo-latin-wght-normal.woff2') format('woff2');font-weight:200 1000;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;}
/* عود وعنبر — "أتيليه": هوية فاخرة محرَّرة. فحم دافئ، شمبانيا وذهب عتيق،
   مساحات واسعة، تدرّج طباعي، وتفاصيل دقيقة (حبيبات، خيوط ذهبية، لمعة عابرة).
   الخصائص المنطقية تقلب الصفحة مع اللغة rtl→ltr. لا خطوط خارجية — عائلات النظام فقط
   (سياسة CSP: style-src 'self'). كل الـhooks (الفئات والمعرّفات) محفوظة كما يتوقعها app.ts. */

:root {
  --bg: #120d04;
  --bg2: #191206;
  --panel: #1f170a;
  --panel2: #261c0c;
  --line: #3a2f16;
  --line-soft: #2a2110;
  --ink: #f5ecd8;
  --ink-dim: #c9ba97;
  --ink-faint: #b0a075;
  --gold: #d4a94e;
  --gold-soft: #ecc987;
  --gold-deep: #8a6420;
  --sans: 'Cairo', 'Segoe UI', 'Noto Sans Arabic', 'Helvetica Neue', Arial, sans-serif;
  --a1: #d4a94e;
  --a2: #ecc987;
  --champagne: #f0d8a8;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .5);
  --shadow-gold: 0 18px 50px rgba(212, 169, 78, .18);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --edge: clamp(1.1rem, 4vw, 3.4rem);
  --maxw: 1200px;
}

* { box-sizing: border-box }
/* سمة hidden تُخفي دائماً — تمنع بقاء الدرج/النافذة ظاهرة إذا ضبط صنفها display. */
[hidden] { display: none !important }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 88% -8%, #2c2110 0%, rgba(44, 33, 16, 0) 60%),
    radial-gradient(900px 600px at -5% 10%, #241a0b 0%, rgba(36, 26, 11, 0) 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.75;
  min-height: 100vh;
  overflow-x: hidden;
}
html[lang='en'] body { font-family: var(--sans)}

/* حبيبات فيلمية خفيفة فوق كل شيء — تكسر "النظافة الرقمية" المولّدة */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 2 }

h1, h2, h3, .brand-name {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.2;
}
html[lang='en'] h1, html[lang='en'] h2, html[lang='en'] h3, html[lang='en'] .brand-name {
  font-family: var(--sans);
  letter-spacing: -.01em;
}

.skip {
  position: absolute; inset-inline-start: -999px; top: 0;
  background: var(--gold); color: #241a06; padding: .5rem 1rem; z-index: 99; border-radius: 0 0 8px 0;
}
.skip:focus { inset-inline-start: 0 }

/* ── الشريط العلوي ─────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem var(--edge);
  background: linear-gradient(to bottom, rgba(18, 13, 4, .92), rgba(18, 13, 4, .66));
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(16px) saturate(1.2);
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink) }
.mark { width: 36px; height: 36px; transition: transform .5s var(--ease), filter .4s ease }
.brand:hover .mark { transform: rotate(-8deg) scale(1.06); filter: drop-shadow(0 4px 12px rgba(212, 169, 78, .5)) }
.mark-bg { fill: #221806 }
.mark-drop { fill: var(--gold) }
.brand-name { font-size: 1.28rem; color: var(--champagne); letter-spacing: .02em }
.nav { display: flex; gap: 1.4rem; margin-inline-start: auto }
.nav a { position: relative; color: var(--ink-dim); text-decoration: none; font-size: .92rem; padding: .2rem 0 }
.nav a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: inline-start; transition: transform .3s var(--ease);
}
.nav a:hover { color: var(--gold-soft) }
.nav a:hover::after { transform: scaleX(1) }
.bar-acts { display: flex; gap: .55rem; align-items: center }

button { font: inherit; cursor: pointer }
.ghost {
  background: none; border: 1px solid var(--line); color: var(--ink-dim);
  border-radius: 10px; padding: .42rem .9rem; transition: all .2s var(--ease);
}
.ghost:hover { color: var(--gold-soft); border-color: var(--gold-deep); background: rgba(212, 169, 78, .06) }
.cart-btn {
  display: flex; align-items: center; gap: .45rem;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #231905; border: none;
  border-radius: 10px; padding: .48rem 1rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(212, 169, 78, .22); transition: all .2s var(--ease);
}
.cart-btn svg { width: 17px; height: 17px }
.cart-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(212, 169, 78, .4) }
.count {
  font-style: normal; background: #231905; color: var(--champagne);
  border-radius: 99px; padding: 0 .5em; font-size: .82rem; font-weight: 700;
}

/* ── الأزرار ────────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  text-decoration: none; text-align: center;
  border: none; border-radius: 12px; padding: .78rem 1.7rem; font-weight: 700; letter-spacing: .01em;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s ease, color .2s ease;
}
.btn.primary { background: linear-gradient(135deg, var(--champagne) 0%, var(--gold) 45%, var(--gold-deep) 100%); color: #231905 }
.btn.primary::before {
  content: ''; position: absolute; top: 0; inset-inline-start: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 252, 240, .55), transparent); transform: skewX(-18deg);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(212, 169, 78, .4) }
.btn.primary:hover::before { animation: sheen .7s var(--ease) }
@keyframes sheen { to { inset-inline-start: 130% } }
.btn.ghosty { background: rgba(212, 169, 78, .04); border: 1px solid var(--gold-deep); color: var(--gold-soft) }
.btn.ghosty:hover { border-color: var(--gold); color: var(--champagne); background: rgba(212, 169, 78, .1) }
.btn.sm { padding: .5rem 1.05rem; font-size: .88rem; border-radius: 10px }
.btn.wide { width: 100% }

/* ── الواجهة (hero) ─────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(2.4rem, 7vw, 5.5rem) var(--edge) clamp(2rem, 5vw, 3.5rem);
  max-width: var(--maxw); margin: 0 auto; position: relative;
}
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--gold); letter-spacing: .34em; font-size: .72rem; text-transform: uppercase; margin: 0 0 1.1rem;
}
.kicker::before { content: ''; width: 28px; height: 1px; background: linear-gradient(to inline-end, var(--gold), transparent) }
.hero h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); line-height: 1.12; margin: 0 0 1.2rem; letter-spacing: -.01em }
.hero h1 em { font-style: italic; color: var(--champagne) }
.lead { color: var(--ink-dim); max-width: 44ch; font-size: clamp(1rem, 1.5vw, 1.12rem) }
.hero-acts { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.8rem 0 }
.hero-stats { display: flex; gap: clamp(1.2rem, 4vw, 2.6rem); list-style: none; padding: 1.4rem 0 0; margin: 1.2rem 0 0; border-top: 1px solid var(--line-soft) }
.hero-stats li { display: grid; gap: .1rem }
.hero-stats b { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--champagne); font-family: var(--sans); font-weight: 700 }
.hero-stats span { color: var(--ink-faint); font-size: .76rem; letter-spacing: .04em }
.hero-art { display: grid; place-items: center; position: relative }
.hero-svg { width: min(380px, 78vw); height: auto; filter: drop-shadow(0 30px 70px rgba(212, 169, 78, .22)) }
.hero-float { animation: floaty 7s ease-in-out infinite }
.spark { animation: twinkle 3.4s ease-in-out infinite }
.spark.s2 { animation-delay: 1.1s }
.spark.s3 { animation-delay: 2.2s }
.wisp { animation: rise-wisp 6s ease-in-out infinite }
.wisp.w2 { animation-delay: 1.6s }
.wisp.w3 { animation-delay: 3s }
@keyframes floaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.7) } 50% { opacity: 1; transform: scale(1) } }
@keyframes rise-wisp { 0% { opacity: 0; transform: translateY(6px) } 40% { opacity: .6 } 100% { opacity: 0; transform: translateY(-20px) } }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; text-align: center }
  .hero .kicker, .hero-acts, .hero-stats { justify-content: center }
  .lead { margin-inline: auto }
  .hero-art { order: -1 }
  .hero-svg { width: min(260px, 64vw) }
}

/* ── الأقسام والشبكة ────────────────────────────────────────── */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.6rem, 6vw, 4.5rem) var(--edge) }
.section h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: var(--ink); margin: 0 0 1.6rem; position: relative; padding-bottom: .7rem;
}
.section h2::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 56px; height: 2px; background: linear-gradient(to inline-end, var(--gold), transparent) }
.row { display: flex; align-items: center }
.row.space { justify-content: space-between; gap: 1rem; flex-wrap: wrap }
.row.gap { gap: .55rem }
.row.gap > * { flex: 1 }

.search {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); border-radius: 12px; padding: .5rem 1rem;
  color: var(--ink-dim); background: var(--bg2); transition: border-color .2s ease, box-shadow .2s ease;
}
.search:focus-within { border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(212, 169, 78, .1) }
.search svg { width: 16px; height: 16px; flex: none }
.search input { background: none; border: none; outline: none; color: var(--ink); font: inherit; width: min(220px, 42vw) }
.search input::placeholder { color: var(--ink-faint) }

.chips { display: flex; gap: .55rem; flex-wrap: wrap; margin: 1.2rem 0 1.6rem }
.chip {
  position: relative; background: var(--bg2); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 99px; padding: .42rem 1.15rem; font-size: .9rem;
  transition: all .22s var(--ease);
}
.chip.on { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #231905; border-color: transparent; font-weight: 700; box-shadow: 0 6px 16px rgba(212, 169, 78, .25) }
.chip:hover:not(.on) { border-color: var(--gold-deep); color: var(--gold-soft); transform: translateY(-1px) }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)) }
.card {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--panel2), var(--bg2));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1rem; transition: transform .28s var(--ease), border-color .28s ease, box-shadow .28s ease;
}
.card.product::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(300px 120px at 50% -10%, rgba(212, 169, 78, .14), transparent 70%); opacity: 0; transition: opacity .3s ease;
}
.card:hover, .card:focus-visible { transform: translateY(-6px); border-color: var(--gold-deep); box-shadow: var(--shadow), var(--shadow-gold) }
.card:hover::before { opacity: 1 }
.card h3 { margin: .1rem 0 .35rem; font-size: 1.08rem; color: var(--ink) }
.card .desc {
  color: var(--ink-dim); font-size: .86rem; margin: 0 0 .8rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.art-wrap {
  position: relative; border-radius: 12px; overflow: hidden; margin-bottom: .85rem; aspect-ratio: 4 / 3;
  background: radial-gradient(130% 100% at 50% 0%, #2a2009 0%, #171004 75%);
  display: grid; place-items: center;
}
.art-wrap::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 115%, rgba(212, 169, 78, .18), transparent 70%) }
.art-wrap .art { display: block; width: 66%; height: auto; position: relative; z-index: 1; transition: transform .5s var(--ease) }
.card:hover .art-wrap .art { transform: translateY(-4px) scale(1.04) }
.art-wrap .badge {
  position: absolute; top: .6rem; inset-inline-start: .6rem; z-index: 2;
  font-style: normal; background: rgba(18, 13, 4, .7); color: var(--champagne); backdrop-filter: blur(4px);
  border: 1px solid var(--gold-deep); font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  border-radius: 99px; padding: .16rem .7rem;
}
.price { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .9rem }
.price b { color: var(--champagne); font-size: 1.22rem; font-family: var(--sans)}
.price s { color: var(--ink-faint); font-size: .85rem }

.hint { color: var(--ink-dim); font-size: .9rem }
.hint.center { text-align: center; padding: 2rem 0 }

/* ── لماذا/كيف ──────────────────────────────────────────────── */
.cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)) }
.card.why { padding: 1.6rem }
.card.why svg { width: 30px; height: 30px; color: var(--gold) }
.card.why .ring {
  width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(212, 169, 78, .22), rgba(212, 169, 78, .04));
  border: 1px solid var(--gold-deep); margin-bottom: 1rem;
}
.card.why h3 { color: var(--champagne); margin: 0 0 .5rem; font-size: 1.14rem }
.card.why p { color: var(--ink-dim); margin: 0; font-size: .92rem }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: s }
.steps li {
  display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.1rem 0; position: relative;
  border-bottom: 1px solid var(--line-soft);
}
.steps li:last-child { border-bottom: none }
.steps b {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold-deep));
  color: #231905; font-size: 1.15rem; font-family: var(--sans); font-weight: 700;
  box-shadow: 0 6px 18px rgba(212, 169, 78, .22);
}
.steps span { align-self: center; color: var(--ink-dim) }

/* ── التذييل ────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); margin-top: 3rem; padding: clamp(2rem, 5vw, 3rem) var(--edge) 1.8rem; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .25)) }
.foot-grid { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 2rem; justify-content: space-between; flex-wrap: wrap; align-items: center }
.foot-grid .brand-name { font-size: 1.4rem; color: var(--champagne) }
.foot-grid p { color: var(--ink-dim); margin: .4rem 0 0; max-width: 40ch }
.foot-acts { display: flex; gap: .6rem }
.foot-credit { max-width: var(--maxw); margin: 2rem auto 0; color: var(--ink-faint); font-size: .84rem; display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; padding-top: 1.4rem; border-top: 1px solid var(--line-soft) }
.foot-credit a { color: var(--gold); text-decoration: none }
.foot-credit a:hover { color: var(--champagne) }
.dot { opacity: .5 }

/* ── السلة ──────────────────────────────────────────────────── */
.backdrop { position: fixed; inset: 0; background: rgba(8, 5, 1, .66); backdrop-filter: blur(4px); z-index: 40; animation: fade .25s ease }
@keyframes fade { from { opacity: 0 } }
.drawer {
  position: fixed; z-index: 41; inset-block: 0; inset-inline-end: 0;
  width: min(430px, 94vw); background: linear-gradient(180deg, var(--bg2), var(--bg));
  border-inline-start: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 1.3rem 1.4rem; overflow-y: auto; display: flex; flex-direction: column; gap: .9rem;
  animation: slide-in .35s var(--ease);
}
@keyframes slide-in { from { transform: translateX(var(--from, 100%)) } }
html[dir='rtl'] .drawer { --from: -100% }
.drawer h2 { margin: 0; color: var(--champagne); font-size: 1.35rem }
.cart-line { display: flex; align-items: center; gap: .85rem; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px; padding: .7rem; transition: border-color .2s ease }
.cart-line:hover { border-color: var(--gold-deep) }
.art-wrap.sm { width: 56px; aspect-ratio: 1; flex: none; margin: 0 }
.art-wrap.sm .art { width: 72% }
.grow { min-width: 0; flex: 1 }
.grow .ln { display: block; font-size: .9rem; color: var(--ink) }
.grow .price { color: var(--gold-soft); margin: 0; font-size: .82rem }
.stepper { display: flex; align-items: center; gap: .35rem }
.step { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--gold-soft); display: grid; place-items: center; transition: all .18s ease }
.step:hover { border-color: var(--gold-deep); background: var(--panel2) }
.qty { font-style: normal; min-width: 1.3em; text-align: center; font-weight: 700 }
.ghost.del { border: none; color: #b06a5a; font-size: 1.15rem; padding: .2rem .5rem }
.ghost.del:hover { color: #d47f6b; background: none }
.cart-foot { display: grid; gap: .65rem; margin-top: auto; padding-top: .3rem }
.total { font-size: 1.05rem; border-top: 1px dashed var(--line); padding-top: .9rem }
.total b { color: var(--champagne); font-family: var(--sans); font-size: 1.3rem }

/* ── النوافذ والإشعار ───────────────────────────────────────── */
.modal {
  position: fixed; z-index: 42; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(580px, 94vw); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(165deg, var(--panel2), var(--bg2)); border: 1px solid var(--gold-deep);
  border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow);
  animation: pop .3s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.96) } }
.quick { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.3rem; align-items: center }
.quick .art-wrap { aspect-ratio: 1; margin: 0 }
.quick-copy h3 { margin: 0 0 .5rem; color: var(--champagne); font-size: 1.3rem }
.quick-copy .desc, .quick-copy .meta { color: var(--ink-dim); font-size: .94rem; margin: 0 0 .7rem }
.quick-copy .meta { color: var(--gold); font-size: .8rem; letter-spacing: .03em }
.quick.demo { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: .8rem }
.quick.demo h3 { color: var(--champagne) }
@media (max-width: 520px) { .quick { grid-template-columns: 1fr } .quick .art-wrap { max-width: 60%; margin-inline: auto } }

.toast {
  position: fixed; z-index: 50; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #231905; font-weight: 700;
  border-radius: 99px; padding: .6rem 1.5rem; box-shadow: var(--shadow); animation: rise .3s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px) } }

/* ── ظهور تدريجي عند التمرير ─────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease) }
[data-reveal].in { opacity: 1; transform: none }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  [data-reveal] { opacity: 1; transform: none }
  html { scroll-behavior: auto }
}

/* ── تحسين الخطوط: stack عربي/لاتيني أوضح + تقنين أحرف ومقاسات متّسقة ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt"; }

/* ── برواز مضيء متحرك + شارة بيانات القالب ── */
.tpl-frame{position:fixed;inset:0;z-index:200;pointer-events:none;}
.tpl-frame::before{content:"";position:absolute;inset:0;padding:2.5px;background:linear-gradient(130deg,var(--a1),var(--a2),var(--a1));background-size:220% 220%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:tpl-glow 5s ease infinite;opacity:.95;}
.tpl-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 24px -6px var(--a1);animation:tpl-pulse 3.4s ease-in-out infinite;}
@keyframes tpl-glow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes tpl-pulse{0%,100%{opacity:.16}50%{opacity:.42}}
.tpl-badge{position:fixed;inset-block-end:calc(12px + env(safe-area-inset-bottom));inset-inline-start:50%;translate:-50% 0;z-index:201;display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .95rem;border-radius:999px;background:var(--a1);color:#1a1206;font-size:.72rem;font-weight:800;box-shadow:0 12px 26px -12px rgb(0 0 0 / .6);pointer-events:none;white-space:nowrap;}
.tpl-badge b{font-weight:900}.tpl-badge span{opacity:.8;font-weight:700}
@media (prefers-reduced-motion:reduce){.tpl-frame::before,.tpl-frame::after{animation:none}}