/* صفحة Q DOSE على الموقع: بهوية الموقع (أخضر Q Products)، لا بألوان التطبيق. ألوان المنتج تبقى داخل التطبيق نفسه.
   نفس هيكل صفحة Q NOTES (notes.css) مع ربط لون التمييز بلون الموقع. */
@import url('/static/notes.css?v=5');

:root {
  --nv: var(--out);        /* أخضر الموقع على الفاتح */
  --nv-glow: var(--glow);  /* أخضر الموقع على الداكن */
  --nv-soft: #E4F6F2;
}

.btn-product { background: var(--nv-glow); color: #0C1636; }
.btn-product:hover { background: #7BEBD7; }
.n-hero { background: radial-gradient(760px 460px at 80% 10%, rgba(60,224,195,.16), transparent 62%), var(--ink-deep); }
.n-theme { background: radial-gradient(900px 420px at 50% 0, rgba(60,224,195,.14), transparent 70%), var(--paper); }
.dose-notice { margin: 18px auto 0; max-width: 560px; font-size: .9rem; opacity: .75; }

/* الشريط: كلمات لا أرقام، فتُرتَّب عمودياً بخط الواجهة كي لا تفيض على الشاشات الضيقة */
.ribbon-in li { flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.ribbon-in b { font: 800 1.45rem/1.2 inherit; font-family: inherit; }
.ribbon-in span { font-size: .92rem; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ribbon-in b { font-size: 1.2rem; } .ribbon-in span { font-size: .85rem; } }