/* ============================================================
   بوابة الإجازات القرآنية — التنسيق العام
   RTL, system fonts only (nothing is downloaded).
   ============================================================ */

:root {
  --ink:        #1d2621;
  --ink-soft:   #5b6b62;
  --paper:      #fbfaf6;
  --card:       #ffffff;
  --line:       #dfded5;
  --green:      #1f6f52;
  --green-dark: #17553f;
  --gold:       #a9853f;
  --danger:     #a33232;
  --ok-bg:      #e8f4ee;
  --err-bg:     #fbeceb;
  --warn-bg:    #fdf4e0;
  --info-bg:    #eef2fa;
  --radius:     10px;
  /* One height for every input, select and button in the portal. */
  --control-h:  42px;
  --shadow:     0 1px 2px rgba(20,30,25,.06), 0 6px 20px rgba(20,30,25,.05);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ---------- الشريط العلوي ---------- */

.topbar {
  background: var(--green-dark);
  color: #eaf3ef;
  box-shadow: var(--shadow);
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  min-height: 62px;
}
.brand {
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem;
  display: inline-flex; align-items: center; gap: 8px;
}
.brand-logo { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; margin-inline-start: auto; }
/* الطلاب / اسم الشيخ / خروج are one set of controls: same box, same height,
   only the width follows the text. */
.topbar nav a,
.topbar .who > a {
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
  color: #eaf3ef; text-decoration: none;
  font-size: .95rem; line-height: 1.2;
  white-space: nowrap;
}
.topbar nav a:hover,
.topbar .who > a:hover { background: rgba(255,255,255,.15); color: #fff; }
.topbar .who {
  display: flex; align-items: center; gap: 8px;
  font-size: .9rem; color: #bfd6cb;
}
.topbar .logout:hover { background: rgba(255,255,255,.15); text-decoration: none; }

/* ---------- القائمة الفرعية للإعدادات ---------- */

.subnav {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: -6px 0 20px;
}
.subnav a {
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  color: var(--ink); text-decoration: none; font-size: .92rem;
}
.subnav a:hover { background: #f4f3ee; }
.subnav a.on {
  background: var(--green); border-color: var(--green); color: #fff;
}

main.wrap { padding-top: 26px; padding-bottom: 60px; }
main.plain-main { max-width: 900px; }

.site-foot {
  border-top: 1px solid var(--line); color: var(--ink-soft);
  font-size: .85rem; padding: 16px 0;
}
.site-foot .wrap {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 4px 10px;
}
.site-foot .sep { opacity: .5; }
.site-foot a { color: var(--green-dark); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }

/* ---------- العناوين ---------- */

.page-title { font-size: 1.5rem; margin: 0 0 18px; }
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-head .page-title { margin: 0; }
.card-title { font-size: 1.1rem; margin: 0 0 14px; color: var(--green-dark); }

/* ---------- البطاقات ---------- */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; margin-bottom: 22px;
}
/* Every card is full width, so a form and a table line up. */
.card.narrow { max-width: none; }
/* The login card is the one place a narrower column reads better. */
.login-card { max-width: 660px; margin-inline: auto; }
.success-card { border-inline-start: 4px solid var(--green); }

.editor-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start;
}
@media (max-width: 900px) { .editor-grid { grid-template-columns: 1fr; } }

/* ---------- النماذج ---------- */

label {
  display: block; margin: 14px 0 6px;
  font-size: .9rem; font-weight: 600; color: var(--ink-soft);
}
input[type=text], input[type=password], input[type=number],
input[type=file], textarea, select {
  width: 100%;
  min-height: var(--control-h);
  padding: 8px 12px;
  line-height: 1.2;
  box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink);
  font: inherit;
}
/* Exactly as tall as a button. Not min-height: the inherited 1.75 line box
   would otherwise push a text input to 46px while the button stayed at 42. */
input[type=text], input[type=password], input[type=number], select {
  height: var(--control-h);
}
input[type=file] { height: auto; }
textarea { min-height: 140px; height: auto; line-height: 1.9; }
input:focus, textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31,111,82,.14);
}
textarea { resize: vertical; line-height: 1.9; }
#tpl { font-size: .95rem; min-height: 420px; }

.ltr-input { direction: ltr; text-align: left; }
.big-input { font-size: 1.35rem; letter-spacing: .12em; text-align: center; }
.big-select {
  width: 100%; min-height: var(--control-h); padding: 8px 14px; font-size: 1.05rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font-family: inherit;
}
.big-select:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31,111,82,.14);
}
.big-select optgroup { font-weight: 700; color: var(--ink-soft); }
.big-select option { font-weight: 400; color: var(--ink); padding: 4px; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- صف واحد: الحقول والزر جنبا إلى جنب ---------- */
/* One row per form wherever it fits: each .f is a label stacked over its
   input, the button sits at the end on the same baseline, and everything
   wraps to the next line on narrow screens. */

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
}
.form-row .f {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 170px; min-width: 0;
}
.form-row .f.grow  { flex: 3 1 240px; }
.form-row .f.tight { flex: 0 1 130px; }
.form-row .f > label { margin: 0; }
.form-row .f > input,
.form-row .f > select { width: 100%; }
.form-row .btn { margin-top: 0; flex: 0 0 auto; align-self: flex-end; }
.form-row + .hint, .form-row + .form-row { margin-top: 10px; }

/* A full-width rule inside a .form-row: starts a new line of fields and marks
   the seam between two groups of settings that share one form. */
.form-row .form-break {
  flex: 1 0 100%;
  height: 0;
  margin: 4px 0 2px;
  border-top: 1px solid var(--line);
}
/* Blocks that must own a whole line of the row rather than sit beside a field. */
.form-row .frame-gallery,
.form-row > .hint,
.form-row > .muted { flex: 1 0 100%; }

/* Buttons inside a plain (non-row) form keep their breathing room. */
form:not(.inline):not(.form-row) > .btn.primary { margin-top: 20px; }
.form-row .btn, .searchbar .btn, .actions .btn,
.row-actions .btn, .date-picker .btn { margin-top: 0; }

.checkline {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500; color: var(--ink);
}
.checkline input { width: auto; }

/* ---------- حقل التاريخ الهجري ---------- */

/* No box around the date group. Its own padding used to inset تاريخ اليوم and
   مسح by 9px, so they sat lower than حفظ and إلغاء on the same row. With the
   box gone every control on the row shares one level. The three selects name
   themselves, so the grouping is still obvious. */
.date-picker {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  flex: 1 1 auto;
  padding: 0; border: 0; background: none;
}
.date-picker select {
  width: auto; min-width: 92px; min-height: var(--control-h); padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; font: inherit;
}
.date-picker select[data-dp="month"] { min-width: 130px; }
.dp-suffix { color: var(--ink-soft); }

.hint, .small { font-size: .84rem; color: var(--ink-soft); }
.hint { margin: 6px 0 0; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.mt { margin-top: 18px; }
.mb { margin-bottom: 12px; }
hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }

.searchbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.searchbar input { flex: 1; }

/* ---------- الأزرار ---------- */

/* ONE button size across the whole portal. Only the width varies, with the
   text. inline-flex + a fixed min-height keeps every button, link-button and
   submit on the same baseline no matter what it sits inside.
   .small and .tiny are kept as names only - they no longer change the size. */
.btn, .btn.small, .btn.tiny {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  min-height: var(--control-h);
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: .95rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  vertical-align: middle;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #f4f3ee; }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-dark); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: #e6c9c7; }
.btn.danger:hover { background: var(--err-bg); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

/* The only deliberate exception: the controls printed on the sheet itself,
   which must stay small enough not to cover the certificate. */
.sheet-tools .btn, .sheet-tools .btn.tiny {
  min-height: 26px; padding: 3px 8px; font-size: .72rem;
}

.row-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

/* ---------- التنبيهات ---------- */

.alert {
  border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;
  border: 1px solid transparent; font-size: .95rem;
}
.alert.ok    { background: var(--ok-bg);   border-color: #bcdcc9; color: #17553f; }
.alert.error { background: var(--err-bg);  border-color: #eec5c2; color: #8d2b2b; }
.alert.warn  { background: var(--warn-bg); border-color: #ecd8a6; color: #7a5a12; }
.alert.info  { background: var(--info-bg); border-color: #c9d5ec; color: #2c4372; }
.alert a { color: inherit; }

/* ---------- الجداول ---------- */

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th, .table td {
  padding: 10px 12px; text-align: right;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
.table th { color: var(--ink-soft); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.table tbody tr:hover { background: #fafaf6; }
.table .actions { white-space: nowrap; }
.table td.actions { vertical-align: middle; }
/* The buttons sit in a flex row inside the cell. Making the <td> itself a flex
   container would stop it behaving as a table cell, which is what pushed the
   buttons below the row's data. */
.actions-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.actions-row form.inline { display: flex; align-items: center; margin: 0; }
.actions-row .btn { margin: 0; }
.ltr-input.tiny { width: 130px; padding: 4px 8px; font-size: .8rem; }

.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .8rem; border: 1px solid;
}
.pill.good { background: var(--ok-bg);  border-color: #bcdcc9; color: #17553f; }
.pill.bad  { background: var(--err-bg); border-color: #eec5c2; color: #8d2b2b; }

code, .code-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  direction: ltr; unicode-bidi: isolate;
}
.code-chip {
  background: #f1f0ea; border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 8px; letter-spacing: .06em;
  cursor: pointer;
}

.big-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  direction: ltr;
  font-size: 2.4rem; letter-spacing: .18em; text-align: center;
  background: #f6f5ef; border: 2px dashed var(--gold);
  border-radius: var(--radius); padding: 18px; margin: 16px 0;
  cursor: pointer; user-select: all;
}

.copied-toast {
  position: fixed; inset-block-end: 24px; inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--green-dark); color: #fff;
  padding: 10px 20px; border-radius: 999px; font-size: .9rem;
  box-shadow: var(--shadow); z-index: 50;
}

/* ---------- الصفحة العامة ---------- */

.hero { text-align: center; padding: 36px 0 10px; }
.hero-logo {
  display: block; margin: 0 auto 6px;
  filter: drop-shadow(0 4px 10px rgba(60, 40, 15, .22));
}
.hero-title { font-size: 1.9rem; margin: 12px 0 6px; color: var(--green-dark); }
.hero-sub { color: var(--ink-soft); margin: 0 0 10px; }

/* ---------- ورقة الإجازة ---------- */

.ejaza-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  max-width: 210mm; margin: 0 auto 14px;
}
.toolbar-code { margin-inline-start: auto; color: var(--ink-soft); font-size: .9rem; }

/* The sheet is a real A4 page, sized in millimetres, so what you see on
   screen is exactly what comes out of the printer. Height is fixed (not
   min-height) so the fitting script can measure overflow. */
.sheet-wrap {
  display: flex;
  justify-content: center;
  /* Scaled down on narrow screens by app.js; overridden to none for print. */
  transform-origin: top center;
}
.sheet {
  position: relative;
  /* flex-shrink:0 is essential. .sheet-wrap is a flex container, and without
     this the sheet collapses to the container width on a phone - it stops
     being A4, the text reflows into a narrow column and overflows the page.
     It must always be exactly A4; app.js scales it visually with a transform. */
  flex: 0 0 auto;
  width: 210mm;
  height: 296mm;              /* 297 exactly can round up into a 2nd page */
  padding: 12mm;
  background: #fffdf7;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-inline: auto;
  overflow: hidden;
}
/* ---------- الإطار المزخرف ---------- */
/* An arabesque border drawn as an inline SVG data-URI (no external request).
   Browsers may suppress border-images when "print backgrounds" is off, so two
   solid gold rules are drawn underneath with ::before/::after — those always
   print, and the ornament sits between them when graphics are enabled. */
.sheet-frame {
  position: relative;
  border: 5mm solid transparent;
  padding: 6mm 7mm 4mm;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sheet-frame::before,
.sheet-frame::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.sheet-frame::before { inset: -4.4mm;  border: 1.1pt solid var(--gold); }
.sheet-frame::after  { inset: -0.9mm;  border: 0.6pt solid var(--gold); }

/* ---------- زخارف الإطار ---------- */
/* Each ornament is an inline SVG data-URI, so nothing is downloaded. The two
   solid rules above sit underneath every variant and always print, even when
   the browser drops border-images. */

.frame-arabesque .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.6'%3E%3Crect x='2.5' y='2.5' width='55' height='55'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cg fill='%23a9853f'%3E%3Cpath d='M30 4.5l3.25 3.25-3.25 3.25-3.25-3.25z'/%3E%3Cpath d='M7.75 26.75l3.25 3.25-3.25 3.25-3.25-3.25z'/%3E%3Cpath d='M52.25 26.75l3.25 3.25-3.25 3.25-3.25-3.25z'/%3E%3Cpath d='M30 49l3.25 3.25-3.25 3.25-3.25-3.25z'/%3E%3Ccircle cx='7.75' cy='7.75' r='2.1'/%3E%3Ccircle cx='52.25' cy='7.75' r='2.1'/%3E%3Ccircle cx='7.75' cy='52.25' r='2.1'/%3E%3Ccircle cx='52.25' cy='52.25' r='2.1'/%3E%3C/g%3E%3C/svg%3E") 15 round;
}

.frame-rope .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.4'%3E%3Crect x='2.5' y='2.5' width='55' height='55'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3Ccircle cx='22' cy='7.75' r='3.4'/%3E%3Ccircle cx='30' cy='7.75' r='3.4'/%3E%3Ccircle cx='38' cy='7.75' r='3.4'/%3E%3Ccircle cx='7.75' cy='22' r='3.4'/%3E%3Ccircle cx='7.75' cy='30' r='3.4'/%3E%3Ccircle cx='7.75' cy='38' r='3.4'/%3E%3Ccircle cx='52.25' cy='22' r='3.4'/%3E%3Ccircle cx='52.25' cy='30' r='3.4'/%3E%3Ccircle cx='52.25' cy='38' r='3.4'/%3E%3Ccircle cx='22' cy='52.25' r='3.4'/%3E%3Ccircle cx='30' cy='52.25' r='3.4'/%3E%3Ccircle cx='38' cy='52.25' r='3.4'/%3E%3C/g%3E%3Cg fill='%23a9853f'%3E%3Ccircle cx='7.75' cy='7.75' r='3'/%3E%3Ccircle cx='52.25' cy='7.75' r='3'/%3E%3Ccircle cx='7.75' cy='52.25' r='3'/%3E%3Ccircle cx='52.25' cy='52.25' r='3'/%3E%3C/g%3E%3C/svg%3E") 15 round;
}

/* Plain rules along the edges, a solid ornament only at each corner. */
.frame-corners .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.5'%3E%3Crect x='3' y='3' width='54' height='54'/%3E%3Crect x='12' y='12' width='36' height='36'/%3E%3C/g%3E%3Cg fill='%23a9853f'%3E%3Cpath d='M3 3h14v3H6v11H3z'/%3E%3Cpath d='M57 3H43v3h11v11h3z'/%3E%3Cpath d='M3 57h14v-3H6V43H3z'/%3E%3Cpath d='M57 57H43v-3h11V43h3z'/%3E%3Ccircle cx='7.5' cy='7.5' r='2.4'/%3E%3Ccircle cx='52.5' cy='7.5' r='2.4'/%3E%3Ccircle cx='7.5' cy='52.5' r='2.4'/%3E%3Ccircle cx='52.5' cy='52.5' r='2.4'/%3E%3C/g%3E%3C/svg%3E") 15 round;
}


/* ---------- زخارف إضافية ---------- */
.frame-girih .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.4'%3E%3Crect x='2.5' y='2.5' width='55' height='55'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.3'%3E%3Cpath d='M30 2.65L35.1 7.75L30 12.85L24.9 7.75Z'/%3E%3Cpath d='M26.33 4.08h7.34v7.34h-7.34z'/%3E%3Cpath d='M7.75 24.9L12.85 30L7.75 35.1L2.65 30Z'/%3E%3Cpath d='M4.08 26.33h7.34v7.34h-7.34z'/%3E%3Cpath d='M52.25 24.9L57.35 30L52.25 35.1L47.15 30Z'/%3E%3Cpath d='M48.58 26.33h7.34v7.34h-7.34z'/%3E%3Cpath d='M30 47.15L35.1 52.25L30 57.35L24.9 52.25Z'/%3E%3Cpath d='M26.33 48.58h7.34v7.34h-7.34z'/%3E%3C/g%3E%3C/svg%3E") 15 round;
}
.frame-floral .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.4'%3E%3Crect x='2.5' y='2.5' width='55' height='55'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.25'%3E%3Cpath d='M15 7.75q7.5-4.6 15 0t15 0'/%3E%3Cpath d='M52.25 15q-4.6 7.5 0 15t0 15'/%3E%3Cpath d='M45 52.25q-7.5 4.6-15 0t-15 0'/%3E%3Cpath d='M7.75 45q4.6-7.5 0-15t0-15'/%3E%3C/g%3E%3Cg fill='%23a9853f'%3E%3Ccircle cx='22.5' cy='5.2' r='1.7'/%3E%3Ccircle cx='37.5' cy='10.3' r='1.7'/%3E%3Ccircle cx='54.8' cy='22.5' r='1.7'/%3E%3Ccircle cx='49.7' cy='37.5' r='1.7'/%3E%3Ccircle cx='37.5' cy='54.8' r='1.7'/%3E%3Ccircle cx='22.5' cy='49.7' r='1.7'/%3E%3Ccircle cx='5.2' cy='37.5' r='1.7'/%3E%3Ccircle cx='10.3' cy='22.5' r='1.7'/%3E%3C/g%3E%3C/svg%3E") 15 round;
}
.frame-vine .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.4'%3E%3Crect x='2.5' y='2.5' width='55' height='55'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cg fill='%23a9853f'%3E%3Cellipse cx='21' cy='5.6' rx='2.6' ry='1.4'/%3E%3Cellipse cx='21' cy='9.9' rx='2.6' ry='1.4'/%3E%3Cellipse cx='21' cy='50.1' rx='2.6' ry='1.4'/%3E%3Cellipse cx='21' cy='54.4' rx='2.6' ry='1.4'/%3E%3Cellipse cx='30' cy='5.6' rx='2.6' ry='1.4'/%3E%3Cellipse cx='30' cy='9.9' rx='2.6' ry='1.4'/%3E%3Cellipse cx='30' cy='50.1' rx='2.6' ry='1.4'/%3E%3Cellipse cx='30' cy='54.4' rx='2.6' ry='1.4'/%3E%3Cellipse cx='39' cy='5.6' rx='2.6' ry='1.4'/%3E%3Cellipse cx='39' cy='9.9' rx='2.6' ry='1.4'/%3E%3Cellipse cx='39' cy='50.1' rx='2.6' ry='1.4'/%3E%3Cellipse cx='39' cy='54.4' rx='2.6' ry='1.4'/%3E%3Cellipse cx='5.6' cy='21' rx='1.4' ry='2.6'/%3E%3Cellipse cx='9.9' cy='21' rx='1.4' ry='2.6'/%3E%3Cellipse cx='50.1' cy='21' rx='1.4' ry='2.6'/%3E%3Cellipse cx='54.4' cy='21' rx='1.4' ry='2.6'/%3E%3Cellipse cx='5.6' cy='30' rx='1.4' ry='2.6'/%3E%3Cellipse cx='9.9' cy='30' rx='1.4' ry='2.6'/%3E%3Cellipse cx='50.1' cy='30' rx='1.4' ry='2.6'/%3E%3Cellipse cx='54.4' cy='30' rx='1.4' ry='2.6'/%3E%3Cellipse cx='5.6' cy='39' rx='1.4' ry='2.6'/%3E%3Cellipse cx='9.9' cy='39' rx='1.4' ry='2.6'/%3E%3Cellipse cx='50.1' cy='39' rx='1.4' ry='2.6'/%3E%3Cellipse cx='54.4' cy='39' rx='1.4' ry='2.6'/%3E%3C/g%3E%3C/svg%3E") 15 round;
}
.frame-pearls .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.4'%3E%3Crect x='2.5' y='2.5' width='55' height='55'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cg fill='%23a9853f'%3E%3Ccircle cx='19' cy='7.75' r='2.2'/%3E%3Ccircle cx='19' cy='52.25' r='2.2'/%3E%3Ccircle cx='7.75' cy='19' r='2.2'/%3E%3Ccircle cx='52.25' cy='19' r='2.2'/%3E%3Ccircle cx='26' cy='7.75' r='2.2'/%3E%3Ccircle cx='26' cy='52.25' r='2.2'/%3E%3Ccircle cx='7.75' cy='26' r='2.2'/%3E%3Ccircle cx='52.25' cy='26' r='2.2'/%3E%3Ccircle cx='33' cy='7.75' r='2.2'/%3E%3Ccircle cx='33' cy='52.25' r='2.2'/%3E%3Ccircle cx='7.75' cy='33' r='2.2'/%3E%3Ccircle cx='52.25' cy='33' r='2.2'/%3E%3Ccircle cx='41' cy='7.75' r='2.2'/%3E%3Ccircle cx='41' cy='52.25' r='2.2'/%3E%3Ccircle cx='7.75' cy='41' r='2.2'/%3E%3Ccircle cx='52.25' cy='41' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 15 round;
}
.frame-meander .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.4'%3E%3Crect x='2.5' y='2.5' width='55' height='55'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M15 10.75l5-6 5 6 5-6 5 6 5-6 5 6'/%3E%3Cpath d='M10.75 45l-6-5 6-5-6-5 6-5 6-5'/%3E%3Cpath d='M49.25 15l6 5-6 5 6 5-6 5 6 5'/%3E%3Cpath d='M15 49.25l5 6 5-6 5 6 5-6 5 6 5-6'/%3E%3C/g%3E%3C/svg%3E") 15 round;
}
.frame-mosaic .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.4'%3E%3Crect x='2.5' y='2.5' width='55' height='55'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cg fill='%23a9853f'%3E%3Crect x='17' y='4.6' width='5' height='6.3'/%3E%3Crect x='17' y='49.1' width='5' height='6.3'/%3E%3Crect x='4.6' y='17' width='6.3' height='5'/%3E%3Crect x='49.1' y='17' width='6.3' height='5'/%3E%3Crect x='31' y='4.6' width='5' height='6.3'/%3E%3Crect x='31' y='49.1' width='5' height='6.3'/%3E%3Crect x='4.6' y='31' width='6.3' height='5'/%3E%3Crect x='49.1' y='31' width='6.3' height='5'/%3E%3C/g%3E%3C/svg%3E") 15 round;
}
.frame-medallion .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.4'%3E%3Crect x='2.5' y='2.5' width='55' height='55'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cg fill='%23a9853f'%3E%3Cpath d='M7.75 2.55L12.95 7.75L7.75 12.95L2.55 7.75Z'/%3E%3Cpath d='M4.01 4.01h7.48v7.48h-7.48z'/%3E%3Cpath d='M52.25 2.55L57.45 7.75L52.25 12.95L47.05 7.75Z'/%3E%3Cpath d='M48.51 4.01h7.48v7.48h-7.48z'/%3E%3Cpath d='M7.75 47.05L12.95 52.25L7.75 57.45L2.55 52.25Z'/%3E%3Cpath d='M4.01 48.51h7.48v7.48h-7.48z'/%3E%3Cpath d='M52.25 47.05L57.45 52.25L52.25 57.45L47.05 52.25Z'/%3E%3Cpath d='M48.51 48.51h7.48v7.48h-7.48z'/%3E%3C/g%3E%3Cg fill='%23fffdf7'%3E%3Ccircle cx='7.75' cy='7.75' r='1.6'/%3E%3Ccircle cx='52.25' cy='7.75' r='1.6'/%3E%3Ccircle cx='7.75' cy='52.25' r='1.6'/%3E%3Ccircle cx='52.25' cy='52.25' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 15 round;
}

/* Just the two solid rules from ::before/::after. */
.frame-double .sheet-frame { border-image: none; border-width: 3mm; }

.frame-none .sheet-frame {
  border-image: none;
  border-width: 0;
  padding: 4mm 2mm 2mm;
}
.frame-none .sheet-frame::before,
.frame-none .sheet-frame::after { display: none; }

/* Controls tucked into the sheet's top-left corner, as small as they go.
   Physical `left` on purpose: the page is RTL, but the corner is the left one. */
.sheet-tools {
  position: absolute;
  top: 3mm;
  left: 3mm;
  /* Cancels the sheet's shrink-to-fit scaling, so طباعة stays a real tap target
     on a phone instead of shrinking to 24x14 with the page. app.js publishes
     --sheet-scale; the corner it grows from is its own, so it stays put. */
  transform: scale(calc(1 / var(--sheet-scale, 1)));
  transform-origin: top left;
  z-index: 5;
  display: flex;
  gap: 4px;
  align-items: center;
  direction: ltr;
}
/* One small height for the button AND the number box. `height` is needed, not
   just min-height: the global input rule sets height: var(--control-h) and
   would otherwise make this box 42px next to a 26px button. */
.sheet-tools .btn,
.sheet-tools input {
  margin: 0;
  height: 26px; min-height: 26px;
  padding: 2px 8px;
  font-size: .72rem;
  line-height: 1.2;
  border-radius: 5px;
}
/* Table row actions use the same compact size as the controls on the sheet
   (طباعة / تحديث). Desktop only: on a phone these become full-width cards and
   a 26px target would be too small to tap reliably. */
@media (min-width: 861px) {
  .actions-row .btn,
  .actions-row .btn.small,
  .actions-row .btn.tiny,
  .frame-thumb .btn,
  .frame-thumb .btn.small {
    height: 26px; min-height: 26px;
    padding: 2px 8px;
    font-size: .72rem;
    line-height: 1.2;
    border-radius: 5px;
  }
}

.sheet-tools .btn { opacity: .85; }
.sheet-tools .btn:hover { opacity: 1; }
.sheet-tools form.inline { display: flex; gap: 3px; align-items: center; }
.sheet-tools input {
  width: 46px; text-align: center;
  border: 1px solid var(--line);
}

/* ---------- ترويسة الإجازة ---------- */
.sheet-head {
  flex: 0 0 auto;
  text-align: center;
  margin-bottom: 3mm;
}
.sheet-head .basmala {
  font-size: 12pt;
  margin-bottom: 1.5mm;
}
.sheet-head .sheet-title {
  font-size: 27pt;
  font-weight: 700;
  line-height: 1.3;
  color: var(--green-dark);
  letter-spacing: .01em;
}
.sheet-head .sheet-subtitle {
  font-size: 14.5pt;
  line-height: 1.5;
  margin-top: 1mm;
}
.sheet-head > div {
  font-family: "EjazaNaskh", "Traditional Arabic", "Amiri", "Scheherazade New",
               "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
}

/* Optional: drop a Naskh font file at assets/fonts/ejaza-naskh.woff2 to match
   the original calligraphy exactly. If the file is absent the browser silently
   falls back to the system Naskh fonts listed below — nothing breaks. */
@font-face {
  font-family: "EjazaNaskh";
  src: url("fonts/ejaza-naskh.woff2") format("woff2");
  font-display: swap;
}

.ejaza-body {
  font-family: "EjazaNaskh", "Traditional Arabic", "Amiri", "Scheherazade New",
               "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
  /* Starting point only — app.js searches for the largest size that still
     fits one page. This default is what no-JS visitors get. */
  font-size: 10.5pt;
  line-height: 1.85;
  text-align: justify;
  text-justify: inter-word;
  color: #1a1a17;
}
/* Inside the sheet, the text block takes the leftover height and is measured
   against it. Elsewhere (the editor preview) .ejaza-body flows normally. */
.sheet .ejaza-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.ejaza-body p { margin: 0 0 .55em; text-indent: 0; }
.ejaza-body p:last-child { margin-bottom: 0; }
/* The closing invocation sits centred in the original. */
.ejaza-body p.closing { text-align: center; margin-top: .8em; }

/* The student's name, written on a ruled blank in the original. */
.student-name {
  font-weight: 700;
  padding: 0 .6em;
  border-bottom: 1px solid rgba(0, 0, 0, .5);
  white-space: nowrap;
}
/* Blank form: an empty ruled line, wide enough to write a full name on. */
.student-name.is-blank {
  display: inline-block;
  min-width: 62mm;
  border-bottom: 1px solid rgba(0, 0, 0, .55);
}

/* Each blank copy is its own printed page. */
.sheet.is-blank { break-after: page; page-break-after: always; }
.sheet.is-blank:last-of-type { break-after: auto; page-break-after: auto; }
.sheet-wrap + .sheet-wrap { margin-top: 24px; }

/* ---------- كتلة التوقيع أسفل الإجازة ---------- */
/* Right column: the date, and beneath it the reserved stamp/signature space.
   Left column: the sheikh's attestation lines. Explicit grid-column numbers
   because in RTL column 1 is the right-hand one. */
.sheet-sign {
  flex: 0 0 auto;
  display: grid;
  /* minmax(0,1fr), not 1fr: a nowrap date line would otherwise raise the
     track's min-content width and shove the other column outside the frame. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3mm 6mm;
  align-items: start;
  margin-top: 4mm;
  font-family: "EjazaNaskh", "Traditional Arabic", "Amiri", "Scheherazade New",
               "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
  font-size: 11pt;
  line-height: 1.8;
}
/* grid-row is required as well: with only an explicit column, auto-placement
   cannot move backwards and drops the second item onto a new row. */
.sign-right { grid-column: 1; grid-row: 1; text-align: center; }
.sign-left  { grid-column: 2; grid-row: 1; text-align: center; }

.date-line { margin-bottom: 2mm; }

/* Ruled blanks for a date written by hand. */
.dblank {
  display: inline-block;
  border-bottom: 1px solid rgba(0, 0, 0, .55);
  vertical-align: baseline;
}
/* Just wide enough to write in by hand: two digits, two digits, four digits. */
.dblank.day   { width: 7mm; }
.dblank.month { width: 7mm; }
.dblank.year  { width: 13mm; }

/* Space kept clear for the hand-applied seal and signature. */
.stamp-area {
  position: relative;
  min-height: 32mm;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(0, 0, 0, .16);
  border-radius: 3px;
}
.stamp-area.has-sig { border: none; }
/* Caption tucked into the bottom-right corner so it never sits where the
   seal goes. RTL-safe: "right" here is the inline-end of the box. */
.stamp-hint {
  position: absolute;
  inset-block-end: 1.5mm;
  inset-inline-start: 2mm;
  font-size: 7.5pt;
  color: var(--ink-soft);
  line-height: 1.2;
}
/* التوقيع والختم — each placed and sized on its own, in millimetres, inside
   the reserved area. They may overflow it: the box is a reference point, not a
   cage, and a signature often reaches past it. */
.stamp-area { overflow: visible; }
.seal-img { display: block; max-width: none; }

/* On the editor only: a green outline and a grip, the same language as the
   margin guide, so it is obvious the picture can be moved and resized. */
.seal-editable {
  outline: 1px dashed rgba(31, 111, 82, .55);
  outline-offset: 2px;
  cursor: move;
  touch-action: none;          /* the drag is ours, not the browser's scroll */
}
.seal-editable.dragging { outline-color: var(--green); outline-style: solid; }
.seal-grip {
  position: absolute; z-index: 6;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: var(--green); border: 1px solid #fff; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.3);
  cursor: nwse-resize;
  touch-action: none;
  /* Cancels the sheet's shrink-to-fit, so the grip is the same size to the
     finger whatever the preview is scaled to - as the margin handles do. */
  transform: scale(calc(1 / var(--sheet-scale, 1)));
  transform-origin: center;
}
.seal-grip.dragging { background: var(--green-dark); }
@media (max-width: 860px) {
  .seal-grip { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
}

/* The small picture beside each upload button, just to show what is stored. */
.seal-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.seal-row:last-of-type { border-bottom: 0; }
.seal-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seal-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 34px; padding: 2px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.seal-chip img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.signature { max-height: 30mm; max-width: 100%; object-fit: contain; }

.verify {
  flex: 0 0 auto;
  margin-top: 2mm;
  text-align: center;
  font-size: 7.5pt;
  color: var(--ink-soft);
}
.verify span { unicode-bidi: isolate; }

/* The sheet inside the style preview is scaled to the card by app.js. */
.style-preview { overflow: hidden; }
.style-preview .sheet { box-shadow: none; }

/* The hidden attribute must win over any display a class sets - a .btn is
   display:inline-flex, and the UA's [hidden]{display:none} loses to it, so
   hiding the upload fallback button by attribute quietly did nothing. */
[hidden] { display: none !important; }

.fit-note {
  max-width: 210mm; margin: 14px auto 0;
  background: var(--warn-bg); border: 1px solid #ecd8a6; color: #7a5a12;
  border-radius: 8px; padding: 10px 14px; font-size: .9rem; text-align: center;
}

.sig-preview {
  background: #f6f5ef; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; text-align: center; margin-bottom: 12px;
}
.sig-preview img { max-height: 140px; max-width: 100%; }


/* ============================================================
   الشاشات الصغيرة — Mobile
   The portal is used on phones as much as on a desktop, so every
   layout collapses to a single readable column and every control
   stays big enough to tap.
   ============================================================ */

/* ============================================================
   الزخارف الإضافية - a decorative layer over the sheet
   Every motif is an inline SVG data-URI, so nothing is downloaded.
   ============================================================ */
.sheet-orn {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
/* Lifts the text above the ornament layer. The margin guide is excluded along
   with the ornament: this selector is (0,2,0) and would otherwise beat
   .inset-guide (0,1,0), turning it into a relative box that collapses to a
   2px strip at the foot of the sheet with all four handles piled up there. */
.sheet-frame > *:not(.sheet-orn):not(.inset-guide) { position: relative; z-index: 1; }
.orn-none .sheet-orn { display: none; }
.orn-wm_star8 .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpolygon points='100.00,8.00 115.84,61.75 165.05,34.95 138.25,84.16 192.00,100.00 138.25,115.84 165.05,165.05 115.84,138.25 100.00,192.00 84.16,138.25 34.95,165.05 61.75,115.84 8.00,100.00 61.75,84.16 34.95,34.95 84.16,61.75' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='100.00,36.00 111.02,73.39 145.25,54.75 126.61,88.98 164.00,100.00 126.61,111.02 145.25,145.25 111.02,126.61 100.00,164.00 88.98,126.61 54.75,145.25 73.39,111.02 36.00,100.00 73.39,88.98 54.75,54.75 88.98,73.39' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_star12 .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpolygon points='100.00,8.00 110.72,60.01 146.00,20.33 129.27,70.73 179.67,54.00 139.99,89.28 192.00,100.00 139.99,110.72 179.67,146.00 129.27,129.27 146.00,179.67 110.72,139.99 100.00,192.00 89.28,139.99 54.00,179.67 70.73,129.27 20.33,146.00 60.01,110.72 8.00,100.00 60.01,89.28 20.33,54.00 70.73,70.73 54.00,20.33 89.28,60.01' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='100' cy='100' r='58' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_star16 .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpolygon points='100.00,6.00 111.37,42.84 135.97,13.16 132.38,51.54 166.47,33.53 148.46,67.62 186.84,64.03 157.16,88.63 194.00,100.00 157.16,111.37 186.84,135.97 148.46,132.38 166.47,166.47 132.38,148.46 135.97,186.84 111.37,157.16 100.00,194.00 88.63,157.16 64.03,186.84 67.62,148.46 33.53,166.47 51.54,132.38 13.16,135.97 42.84,111.37 6.00,100.00 42.84,88.63 13.16,64.03 51.54,67.62 33.53,33.53 67.62,51.54 64.03,13.16 88.63,42.84' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='100' cy='100' r='46' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_rosette .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cellipse cx='148.40' cy='100.00' rx='36.96' ry='17.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(0.0 148.40 100.00)'/%3E%3Cellipse cx='134.22' cy='134.22' rx='36.96' ry='17.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(45.0 134.22 134.22)'/%3E%3Cellipse cx='100.00' cy='148.40' rx='36.96' ry='17.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(90.0 100.00 148.40)'/%3E%3Cellipse cx='65.78' cy='134.22' rx='36.96' ry='17.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(135.0 65.78 134.22)'/%3E%3Cellipse cx='51.60' cy='100.00' rx='36.96' ry='17.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(180.0 51.60 100.00)'/%3E%3Cellipse cx='65.78' cy='65.78' rx='36.96' ry='17.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(225.0 65.78 65.78)'/%3E%3Cellipse cx='100.00' cy='51.60' rx='36.96' ry='17.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(270.0 100.00 51.60)'/%3E%3Cellipse cx='134.22' cy='65.78' rx='36.96' ry='17.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(315.0 134.22 65.78)'/%3E%3Ccircle cx='100' cy='100' r='15.84' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_medal .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='92' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='100' cy='100' r='74' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Cpolygon points='100.00,38.00 110.68,74.22 143.84,56.16 125.78,89.32 162.00,100.00 125.78,110.68 143.84,143.84 110.68,125.78 100.00,162.00 89.32,125.78 56.16,143.84 74.22,110.68 38.00,100.00 74.22,89.32 56.16,56.16 89.32,74.22' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_arch .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M40 175V95a60 60 0 0 1 120 0v80' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cpath d='M55 175v-78a45 45 0 0 1 90 0v78' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_knot .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='3'%3E%3Crect x='38' y='38' width='124' height='124'/%3E%3Crect x='38' y='38' width='124' height='124' transform='rotate(45 100 100)'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_quad .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='3'%3E%3Ccircle cx='146' cy='100' r='46'/%3E%3Ccircle cx='100' cy='146' r='46'/%3E%3Ccircle cx='54' cy='100' r='46'/%3E%3Ccircle cx='100' cy='54' r='46'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_hex .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpolygon points='188.0,100.0 144.0,176.2 56.0,176.2 12.0,100.0 56.0,23.8 144.0,23.8' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cpolygon points='152.0,130.0 100.0,160.0 48.0,130.0 48.0,70.0 100.0,40.0 152.0,70.0' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_sun .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cline x1='142.0' y1='100.0' x2='192.0' y2='100.0' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='140.6' y1='110.9' x2='188.9' y2='123.8' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='136.4' y1='121.0' x2='179.7' y2='146.0' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='129.7' y1='129.7' x2='165.1' y2='165.1' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='121.0' y1='136.4' x2='146.0' y2='179.7' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='110.9' y1='140.6' x2='123.8' y2='188.9' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='100.0' y1='142.0' x2='100.0' y2='192.0' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='89.1' y1='140.6' x2='76.2' y2='188.9' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='79.0' y1='136.4' x2='54.0' y2='179.7' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='70.3' y1='129.7' x2='34.9' y2='165.1' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='63.6' y1='121.0' x2='20.3' y2='146.0' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='59.4' y1='110.9' x2='11.1' y2='123.8' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='58.0' y1='100.0' x2='8.0' y2='100.0' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='59.4' y1='89.1' x2='11.1' y2='76.2' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='63.6' y1='79.0' x2='20.3' y2='54.0' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='70.3' y1='70.3' x2='34.9' y2='34.9' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='79.0' y1='63.6' x2='54.0' y2='20.3' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='89.1' y1='59.4' x2='76.2' y2='11.1' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='100.0' y1='58.0' x2='100.0' y2='8.0' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='110.9' y1='59.4' x2='123.8' y2='11.1' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='121.0' y1='63.6' x2='146.0' y2='20.3' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='129.7' y1='70.3' x2='165.1' y2='34.9' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='136.4' y1='79.0' x2='179.7' y2='54.0' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='140.6' y1='89.1' x2='188.9' y2='76.2' stroke='%23a9853f' stroke-width='2.5'/%3E%3Ccircle cx='100' cy='100' r='38' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_oval .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cellipse cx='100' cy='100' rx='92' ry='62' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cellipse cx='100' cy='100' rx='78' ry='50' fill='none' stroke='%23a9853f' stroke-width='1.6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_crescent .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M132 30a86 86 0 1 0 0 140 70 70 0 1 1 0-140z' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cpolygon points='150.00,78.00 155.82,91.99 170.92,93.20 159.42,103.06 162.93,117.80 150.00,109.90 137.07,117.80 140.58,103.06 129.08,93.20 144.18,91.99' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_lattice .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='2'%3E%3Cpolygon points='100.00,10.00 115.50,62.58 163.64,36.36 137.42,84.50 190.00,100.00 137.42,115.50 163.64,163.64 115.50,137.42 100.00,190.00 84.50,137.42 36.36,163.64 62.58,115.50 10.00,100.00 62.58,84.50 36.36,36.36 84.50,62.58' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='100.00,32.00 111.71,71.73 148.08,51.92 128.27,88.29 168.00,100.00 128.27,111.71 148.08,148.08 111.71,128.27 100.00,168.00 88.29,128.27 51.92,148.08 71.73,111.71 32.00,100.00 71.73,88.29 51.92,51.92 88.29,71.73' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='100.00,54.00 107.92,80.88 132.53,67.47 119.12,92.08 146.00,100.00 119.12,107.92 132.53,132.53 107.92,119.12 100.00,146.00 92.08,119.12 67.47,132.53 80.88,107.92 54.00,100.00 80.88,92.08 67.47,67.47 92.08,80.88' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-wm_seal .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='90' fill='none' stroke='%23a9853f' stroke-width='4'/%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='%23a9853f' stroke-width='1.5'/%3E%3Cellipse cx='131.90' cy='100.00' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(0.0 131.90 100.00)'/%3E%3Cellipse cx='127.63' cy='115.95' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(30.0 127.63 115.95)'/%3E%3Cellipse cx='115.95' cy='127.63' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(60.0 115.95 127.63)'/%3E%3Cellipse cx='100.00' cy='131.90' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(90.0 100.00 131.90)'/%3E%3Cellipse cx='84.05' cy='127.63' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(120.0 84.05 127.63)'/%3E%3Cellipse cx='72.37' cy='115.95' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(150.0 72.37 115.95)'/%3E%3Cellipse cx='68.10' cy='100.00' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(180.0 68.10 100.00)'/%3E%3Cellipse cx='72.37' cy='84.05' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(210.0 72.37 84.05)'/%3E%3Cellipse cx='84.05' cy='72.37' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(240.0 84.05 72.37)'/%3E%3Cellipse cx='100.00' cy='68.10' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(270.0 100.00 68.10)'/%3E%3Cellipse cx='115.95' cy='72.37' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(300.0 115.95 72.37)'/%3E%3Cellipse cx='127.63' cy='84.05' rx='24.36' ry='11.60' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(330.0 127.63 84.05)'/%3E%3Ccircle cx='100' cy='100' r='10.44' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .16;
}
.orn-cr_arabesque .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Cpath d='M10 30q30-26 60 0t60 0 60 0 60 0' fill='none' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cpath d='M10 30q30 26 60 0t60 0 60 0 60 0' fill='none' stroke='%23a9853f' stroke-width='2.5'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cr_palmette .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Cpath d='M20 44c0-14 8-22 8-22s8 8 8 22z' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Cpath d='M52 44c0-14 8-22 8-22s8 8 8 22z' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Cpath d='M84 44c0-14 8-22 8-22s8 8 8 22z' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Cpath d='M116 44c0-14 8-22 8-22s8 8 8 22z' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Cpath d='M148 44c0-14 8-22 8-22s8 8 8 22z' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Cpath d='M180 44c0-14 8-22 8-22s8 8 8 22z' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Cpath d='M212 44c0-14 8-22 8-22s8 8 8 22z' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Cpath d='M244 44c0-14 8-22 8-22s8 8 8 22z' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Cpath d='M276 44c0-14 8-22 8-22s8 8 8 22z' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cr_arch .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Cpath d='M16 44a16 16 0 0 1 32 0' fill='none' stroke='%23a9853f' stroke-width='2.2'/%3E%3Cpath d='M50 44a16 16 0 0 1 32 0' fill='none' stroke='%23a9853f' stroke-width='2.2'/%3E%3Cpath d='M84 44a16 16 0 0 1 32 0' fill='none' stroke='%23a9853f' stroke-width='2.2'/%3E%3Cpath d='M118 44a16 16 0 0 1 32 0' fill='none' stroke='%23a9853f' stroke-width='2.2'/%3E%3Cpath d='M152 44a16 16 0 0 1 32 0' fill='none' stroke='%23a9853f' stroke-width='2.2'/%3E%3Cpath d='M186 44a16 16 0 0 1 32 0' fill='none' stroke='%23a9853f' stroke-width='2.2'/%3E%3Cpath d='M220 44a16 16 0 0 1 32 0' fill='none' stroke='%23a9853f' stroke-width='2.2'/%3E%3Cpath d='M254 44a16 16 0 0 1 32 0' fill='none' stroke='%23a9853f' stroke-width='2.2'/%3E%3Cpath d='M288 44a16 16 0 0 1 32 0' fill='none' stroke='%23a9853f' stroke-width='2.2'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cr_medal .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Cline x1='10' y1='30' x2='118' y2='30' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='182' y1='30' x2='290' y2='30' stroke='%23a9853f' stroke-width='2'/%3E%3Cpolygon points='150.00,4.00 154.48,19.19 168.38,11.62 160.81,25.52 176.00,30.00 160.81,34.48 168.38,48.38 154.48,40.81 150.00,56.00 145.52,40.81 131.62,48.38 139.19,34.48 124.00,30.00 139.19,25.52 131.62,11.62 145.52,19.19' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='150' cy='30' r='9' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cr_rope .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Ccircle cx='20' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='38' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='56' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='74' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='92' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='110' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='128' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='146' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='164' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='182' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='200' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='218' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='236' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='254' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='272' cy='30' r='8' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cr_chevron .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Cpath d='M10 40l14-16 14 16 14-16 14 16 14-16 14 16 14-16 14 16 14-16 14 16 14-16 14 16 14-16 14 16 14-16 14 16 14-16 14 16' fill='none' stroke='%23a9853f' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cr_vine .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Cpath d='M10 32q35-22 70 0t70 0 70 0 70 0' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='45' cy='21' r='3.5' fill='%23a9853f'/%3E%3Ccircle cx='115' cy='21' r='3.5' fill='%23a9853f'/%3E%3Ccircle cx='185' cy='21' r='3.5' fill='%23a9853f'/%3E%3Ccircle cx='255' cy='21' r='3.5' fill='%23a9853f'/%3E%3Ccircle cx='80' cy='43' r='3.5' fill='%23a9853f'/%3E%3Ccircle cx='150' cy='43' r='3.5' fill='%23a9853f'/%3E%3Ccircle cx='220' cy='43' r='3.5' fill='%23a9853f'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cr_double .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Cline x1='10' y1='24' x2='290' y2='24' stroke='%23a9853f' stroke-width='2.5'/%3E%3Cline x1='10' y1='36' x2='290' y2='36' stroke='%23a9853f' stroke-width='1.2'/%3E%3Cpolygon points='150.00,16.00 153.50,23.94 162.12,23.00 157.00,30.00 162.12,37.00 153.50,36.06 150.00,44.00 146.50,36.06 137.88,37.00 143.00,30.00 137.88,23.00 146.50,23.94' fill='%23fffdf7' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cr_diamond .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Cpath d='M14 30l9-9 9 9-9 9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M44 30l9-9 9 9-9 9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M74 30l9-9 9 9-9 9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M104 30l9-9 9 9-9 9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M134 30l9-9 9 9-9 9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M164 30l9-9 9 9-9 9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M194 30l9-9 9 9-9 9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M224 30l9-9 9 9-9 9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M254 30l9-9 9 9-9 9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M284 30l9-9 9 9-9 9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cr_scroll .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Cpath d='M10 30h120' stroke='%23a9853f' stroke-width='2'/%3E%3Cpath d='M170 30h120' stroke='%23a9853f' stroke-width='2'/%3E%3Cpath d='M130 30a10 10 0 1 1 20 0 10 10 0 1 0 20 0' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cr_key .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Cpath d='M10 44v-20h16v14h16v-14h16v20h16v-20h16v14h16v-14h16v20h16v-20h16v14h16v-14h16v20h16v-20h16v14h16v-14h16v20' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cr_pearl .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Ccircle cx='18' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='34' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='50' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='66' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='82' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='98' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='114' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='130' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='146' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='162' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='178' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='194' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='210' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='226' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='242' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='258' cy='30' r='4' fill='%23a9853f'/%3E%3Ccircle cx='274' cy='30' r='4' fill='%23a9853f'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .5;
}
.orn-cn_leaf .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 60C4 28 28 4 60 4 40 14 14 40 4 60z' fill='%23a9853f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 60C4 28 28 4 60 4 40 14 14 40 4 60z' fill='%23a9853f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 60C4 28 28 4 60 4 40 14 14 40 4 60z' fill='%23a9853f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 60C4 28 28 4 60 4 40 14 14 40 4 60z' fill='%23a9853f'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 13mm;
  opacity: .55;
}
.orn-cn_curl .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 58c0-30 24-54 54-54' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cpath d='M4 40c0-20 16-36 36-36' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 58c0-30 24-54 54-54' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cpath d='M4 40c0-20 16-36 36-36' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 58c0-30 24-54 54-54' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cpath d='M4 40c0-20 16-36 36-36' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 58c0-30 24-54 54-54' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cpath d='M4 40c0-20 16-36 36-36' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 13mm;
  opacity: .55;
}
.orn-cn_star .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpolygon points='30.00,6.00 34.13,20.02 46.97,13.03 39.98,25.87 54.00,30.00 39.98,34.13 46.97,46.97 34.13,39.98 30.00,54.00 25.87,39.98 13.03,46.97 20.02,34.13 6.00,30.00 20.02,25.87 13.03,13.03 25.87,20.02' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpolygon points='30.00,6.00 34.13,20.02 46.97,13.03 39.98,25.87 54.00,30.00 39.98,34.13 46.97,46.97 34.13,39.98 30.00,54.00 25.87,39.98 13.03,46.97 20.02,34.13 6.00,30.00 20.02,25.87 13.03,13.03 25.87,20.02' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpolygon points='30.00,6.00 34.13,20.02 46.97,13.03 39.98,25.87 54.00,30.00 39.98,34.13 46.97,46.97 34.13,39.98 30.00,54.00 25.87,39.98 13.03,46.97 20.02,34.13 6.00,30.00 20.02,25.87 13.03,13.03 25.87,20.02' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpolygon points='30.00,6.00 34.13,20.02 46.97,13.03 39.98,25.87 54.00,30.00 39.98,34.13 46.97,46.97 34.13,39.98 30.00,54.00 25.87,39.98 13.03,46.97 20.02,34.13 6.00,30.00 20.02,25.87 13.03,13.03 25.87,20.02' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 13mm;
  opacity: .55;
}
.orn-cn_fan .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cline x1='4' y1='4' x2='60' y2='4' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='58' y2='18' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='52' y2='32' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='44' y2='44' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='32' y2='52' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='18' y2='58' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='4' y2='60' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cline x1='4' y1='4' x2='60' y2='4' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='58' y2='18' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='52' y2='32' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='44' y2='44' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='32' y2='52' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='18' y2='58' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='4' y2='60' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cline x1='4' y1='4' x2='60' y2='4' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='58' y2='18' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='52' y2='32' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='44' y2='44' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='32' y2='52' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='18' y2='58' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='4' y2='60' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cline x1='4' y1='4' x2='60' y2='4' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='58' y2='18' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='52' y2='32' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='44' y2='44' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='32' y2='52' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='18' y2='58' stroke='%23a9853f' stroke-width='2'/%3E%3Cline x1='4' y1='4' x2='4' y2='60' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 13mm;
  opacity: .55;
}
.orn-cn_bracket .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 56V4h52' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cpath d='M14 56V14h42' fill='none' stroke='%23a9853f' stroke-width='1.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 56V4h52' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cpath d='M14 56V14h42' fill='none' stroke='%23a9853f' stroke-width='1.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 56V4h52' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cpath d='M14 56V14h42' fill='none' stroke='%23a9853f' stroke-width='1.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 56V4h52' fill='none' stroke='%23a9853f' stroke-width='3'/%3E%3Cpath d='M14 56V14h42' fill='none' stroke='%23a9853f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 13mm;
  opacity: .55;
}
.orn-cn_rose .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cellipse cx='44.30' cy='30.00' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(0.0 44.30 30.00)'/%3E%3Cellipse cx='37.15' cy='42.38' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(60.0 37.15 42.38)'/%3E%3Cellipse cx='22.85' cy='42.38' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(120.0 22.85 42.38)'/%3E%3Cellipse cx='15.70' cy='30.00' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(180.0 15.70 30.00)'/%3E%3Cellipse cx='22.85' cy='17.62' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(240.0 22.85 17.62)'/%3E%3Cellipse cx='37.15' cy='17.62' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(300.0 37.15 17.62)'/%3E%3Ccircle cx='30' cy='30' r='4.68' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cellipse cx='44.30' cy='30.00' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(0.0 44.30 30.00)'/%3E%3Cellipse cx='37.15' cy='42.38' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(60.0 37.15 42.38)'/%3E%3Cellipse cx='22.85' cy='42.38' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(120.0 22.85 42.38)'/%3E%3Cellipse cx='15.70' cy='30.00' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(180.0 15.70 30.00)'/%3E%3Cellipse cx='22.85' cy='17.62' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(240.0 22.85 17.62)'/%3E%3Cellipse cx='37.15' cy='17.62' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(300.0 37.15 17.62)'/%3E%3Ccircle cx='30' cy='30' r='4.68' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cellipse cx='44.30' cy='30.00' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(0.0 44.30 30.00)'/%3E%3Cellipse cx='37.15' cy='42.38' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(60.0 37.15 42.38)'/%3E%3Cellipse cx='22.85' cy='42.38' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(120.0 22.85 42.38)'/%3E%3Cellipse cx='15.70' cy='30.00' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(180.0 15.70 30.00)'/%3E%3Cellipse cx='22.85' cy='17.62' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(240.0 22.85 17.62)'/%3E%3Cellipse cx='37.15' cy='17.62' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(300.0 37.15 17.62)'/%3E%3Ccircle cx='30' cy='30' r='4.68' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cellipse cx='44.30' cy='30.00' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(0.0 44.30 30.00)'/%3E%3Cellipse cx='37.15' cy='42.38' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(60.0 37.15 42.38)'/%3E%3Cellipse cx='22.85' cy='42.38' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(120.0 22.85 42.38)'/%3E%3Cellipse cx='15.70' cy='30.00' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(180.0 15.70 30.00)'/%3E%3Cellipse cx='22.85' cy='17.62' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(240.0 22.85 17.62)'/%3E%3Cellipse cx='37.15' cy='17.62' rx='10.92' ry='5.20' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(300.0 37.15 17.62)'/%3E%3Ccircle cx='30' cy='30' r='4.68' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 13mm;
  opacity: .55;
}
.orn-cn_knot .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='2.4'%3E%3Crect x='8' y='8' width='40' height='40'/%3E%3Crect x='8' y='8' width='40' height='40' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='2.4'%3E%3Crect x='8' y='8' width='40' height='40'/%3E%3Crect x='8' y='8' width='40' height='40' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='2.4'%3E%3Crect x='8' y='8' width='40' height='40'/%3E%3Crect x='8' y='8' width='40' height='40' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='2.4'%3E%3Crect x='8' y='8' width='40' height='40'/%3E%3Crect x='8' y='8' width='40' height='40' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 13mm;
  opacity: .55;
}
.orn-cn_drop .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M30 6c14 12 22 22 22 32a22 22 0 1 1-44 0c0-10 8-20 22-32z' fill='none' stroke='%23a9853f' stroke-width='2.4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M30 6c14 12 22 22 22 32a22 22 0 1 1-44 0c0-10 8-20 22-32z' fill='none' stroke='%23a9853f' stroke-width='2.4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M30 6c14 12 22 22 22 32a22 22 0 1 1-44 0c0-10 8-20 22-32z' fill='none' stroke='%23a9853f' stroke-width='2.4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M30 6c14 12 22 22 22 32a22 22 0 1 1-44 0c0-10 8-20 22-32z' fill='none' stroke='%23a9853f' stroke-width='2.4'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 13mm;
  opacity: .55;
}
.orn-cn_trio .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='14' cy='14' r='6' fill='%23a9853f'/%3E%3Ccircle cx='34' cy='16' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='16' cy='34' r='4.5' fill='%23a9853f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='14' cy='14' r='6' fill='%23a9853f'/%3E%3Ccircle cx='34' cy='16' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='16' cy='34' r='4.5' fill='%23a9853f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='14' cy='14' r='6' fill='%23a9853f'/%3E%3Ccircle cx='34' cy='16' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='16' cy='34' r='4.5' fill='%23a9853f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='14' cy='14' r='6' fill='%23a9853f'/%3E%3Ccircle cx='34' cy='16' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='16' cy='34' r='4.5' fill='%23a9853f'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 13mm;
  opacity: .55;
}
.orn-cn_arcs .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 46A42 42 0 0 1 46 4' fill='none' stroke='%23a9853f' stroke-width='2.4'/%3E%3Cpath d='M4 30A26 26 0 0 1 30 4' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M4 60A56 56 0 0 1 60 4' fill='none' stroke='%23a9853f' stroke-width='1.4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 46A42 42 0 0 1 46 4' fill='none' stroke='%23a9853f' stroke-width='2.4'/%3E%3Cpath d='M4 30A26 26 0 0 1 30 4' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M4 60A56 56 0 0 1 60 4' fill='none' stroke='%23a9853f' stroke-width='1.4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 46A42 42 0 0 1 46 4' fill='none' stroke='%23a9853f' stroke-width='2.4'/%3E%3Cpath d='M4 30A26 26 0 0 1 30 4' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M4 60A56 56 0 0 1 60 4' fill='none' stroke='%23a9853f' stroke-width='1.4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M4 46A42 42 0 0 1 46 4' fill='none' stroke='%23a9853f' stroke-width='2.4'/%3E%3Cpath d='M4 30A26 26 0 0 1 30 4' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M4 60A56 56 0 0 1 60 4' fill='none' stroke='%23a9853f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 13mm;
  opacity: .55;
}
.orn-bg_girih .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.4'%3E%3Cpolygon points='40.00,14.00 44.48,29.19 58.38,21.62 50.81,35.52 66.00,40.00 50.81,44.48 58.38,58.38 44.48,50.81 40.00,66.00 35.52,50.81 21.62,58.38 29.19,44.48 14.00,40.00 29.19,35.52 21.62,21.62 35.52,29.19' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: repeat;
  background-size: 16mm;
  opacity: .09;
}
.orn-bg_hex .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpolygon points='66.0,40.0 53.0,62.5 27.0,62.5 14.0,40.0 27.0,17.5 53.0,17.5' fill='none' stroke='%23a9853f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: repeat;
  background-size: 16mm;
  opacity: .09;
}
.orn-bg_diamond .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 8l32 32-32 32L8 40z' fill='none' stroke='%23a9853f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: repeat;
  background-size: 16mm;
  opacity: .09;
}
.orn-bg_wave .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40q20-18 40 0t40 0' fill='none' stroke='%23a9853f' stroke-width='1.4'/%3E%3Cpath d='M0 60q20-18 40 0t40 0' fill='none' stroke='%23a9853f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: repeat;
  background-size: 16mm;
  opacity: .09;
}
.orn-bg_stars .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpolygon points='40.00,24.00 43.60,33.76 53.86,32.00 47.20,40.00 53.86,48.00 43.60,46.24 40.00,56.00 36.40,46.24 26.14,48.00 32.80,40.00 26.14,32.00 36.40,33.76' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='10.00,3.00 11.58,7.27 16.06,6.50 13.15,10.00 16.06,13.50 11.58,12.73 10.00,17.00 8.43,12.73 3.94,13.50 6.85,10.00 3.94,6.50 8.42,7.27' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='70.00,63.00 71.58,67.27 76.06,66.50 73.15,70.00 76.06,73.50 71.58,72.73 70.00,77.00 68.42,72.73 63.94,73.50 66.85,70.00 63.94,66.50 68.42,67.27' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: repeat;
  background-size: 16mm;
  opacity: .09;
}
.orn-bg_lattice .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.2'%3E%3Cpath d='M0 40h80M40 0v80M0 0l80 80M80 0L0 80'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: repeat;
  background-size: 16mm;
  opacity: .09;
}
.orn-bg_damask .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cellipse cx='53.20' cy='40.00' rx='10.08' ry='4.80' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(0.0 53.20 40.00)'/%3E%3Cellipse cx='46.60' cy='51.43' rx='10.08' ry='4.80' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(60.0 46.60 51.43)'/%3E%3Cellipse cx='33.40' cy='51.43' rx='10.08' ry='4.80' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(120.0 33.40 51.43)'/%3E%3Cellipse cx='26.80' cy='40.00' rx='10.08' ry='4.80' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(180.0 26.80 40.00)'/%3E%3Cellipse cx='33.40' cy='28.57' rx='10.08' ry='4.80' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(240.0 33.40 28.57)'/%3E%3Cellipse cx='46.60' cy='28.57' rx='10.08' ry='4.80' fill='none' stroke='%23a9853f' stroke-width='2' transform='rotate(300.0 46.60 28.57)'/%3E%3Ccircle cx='40' cy='40' r='4.32' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: repeat;
  background-size: 16mm;
  opacity: .09;
}
.orn-bg_dots .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='3' fill='%23a9853f'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%23a9853f'/%3E%3Ccircle cx='72' cy='72' r='2' fill='%23a9853f'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: repeat;
  background-size: 16mm;
  opacity: .09;
}
.orn-sb_vine .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Cpath d='M20 0q-14 30 0 60t0 60' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='8' cy='30' r='3.5' fill='%23a9853f'/%3E%3Ccircle cx='32' cy='90' r='3.5' fill='%23a9853f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Cpath d='M20 0q-14 30 0 60t0 60' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3Ccircle cx='8' cy='30' r='3.5' fill='%23a9853f'/%3E%3Ccircle cx='32' cy='90' r='3.5' fill='%23a9853f'/%3E%3C/svg%3E");
  background-position: left center, right center;
  background-repeat: repeat-y;
  background-size: auto 24mm;
  opacity: .45;
}
.orn-sb_pearls .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Ccircle cx='20' cy='10' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='28' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='46' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='64' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='82' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='100' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='118' r='4.5' fill='%23a9853f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Ccircle cx='20' cy='10' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='28' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='46' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='64' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='82' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='100' r='4.5' fill='%23a9853f'/%3E%3Ccircle cx='20' cy='118' r='4.5' fill='%23a9853f'/%3E%3C/svg%3E");
  background-position: left center, right center;
  background-repeat: repeat-y;
  background-size: auto 24mm;
  opacity: .45;
}
.orn-sb_diamond .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Cpath d='M20 6l9 9-9 9-9-9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M20 36l9 9-9 9-9-9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M20 66l9 9-9 9-9-9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M20 96l9 9-9 9-9-9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Cpath d='M20 6l9 9-9 9-9-9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M20 36l9 9-9 9-9-9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M20 66l9 9-9 9-9-9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cpath d='M20 96l9 9-9 9-9-9z' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3C/svg%3E");
  background-position: left center, right center;
  background-repeat: repeat-y;
  background-size: auto 24mm;
  opacity: .45;
}
.orn-sb_zigzag .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Cpath d='M8 0l24 20-24 20 24 20-24 20 24 20-24 20' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Cpath d='M8 0l24 20-24 20 24 20-24 20 24 20-24 20' fill='none' stroke='%23a9853f' stroke-width='2'/%3E%3C/svg%3E");
  background-position: left center, right center;
  background-repeat: repeat-y;
  background-size: auto 24mm;
  opacity: .45;
}
.orn-sb_rope .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Ccircle cx='20' cy='12' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='32' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='52' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='72' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='92' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='112' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Ccircle cx='20' cy='12' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='32' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='52' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='72' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='92' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='112' r='9' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3C/svg%3E");
  background-position: left center, right center;
  background-repeat: repeat-y;
  background-size: auto 24mm;
  opacity: .45;
}
.orn-sb_leaf .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Cellipse cx='20' cy='14' rx='5' ry='10' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cellipse cx='20' cy='40' rx='5' ry='10' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cellipse cx='20' cy='66' rx='5' ry='10' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cellipse cx='20' cy='92' rx='5' ry='10' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cellipse cx='20' cy='118' rx='5' ry='10' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Cellipse cx='20' cy='14' rx='5' ry='10' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cellipse cx='20' cy='40' rx='5' ry='10' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cellipse cx='20' cy='66' rx='5' ry='10' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cellipse cx='20' cy='92' rx='5' ry='10' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3Cellipse cx='20' cy='118' rx='5' ry='10' fill='none' stroke='%23a9853f' stroke-width='1.8'/%3E%3C/svg%3E");
  background-position: left center, right center;
  background-repeat: repeat-y;
  background-size: auto 24mm;
  opacity: .45;
}
/* Shown only on phones, hidden everywhere else. */
.only-phone { display: none !important; }

/* ============================================================
   تجربة الجوال — the phone experience
   Ordered by how much each rule actually matters on a handset.
   ============================================================ */

@media (max-width: 860px) {

  /* Taller controls for thumbs - buttons and fields still share the height. */
  :root { --control-h: 46px; }

  /* 1. iOS zooms the whole page in when you focus a field whose text is
        smaller than 16px. Everything you type into must be at least 16px. */
  input, select, textarea, .big-select {
    font-size: 16px !important;
  }
  textarea { min-height: 130px; }

  /* 2. Apple's minimum comfortable tap target is 44px. */
  .btn, .btn.small, .btn.tiny {
    padding: 10px 16px;
    font-size: .95rem;
  }
  /* The controls inside the sheet stay deliberately small - they sit on the
     certificate itself and must not cover it. */
  .sheet-tools .btn, .sheet-tools input {
    height: 28px; min-height: 28px; padding: 3px 8px; font-size: 12px !important;
  }
  .subnav a  { min-height: 40px; display: inline-flex; align-items: center; }
  .topbar nav a, .topbar .logout { min-height: 40px; display: inline-flex; align-items: center; }

  /* 3. Touch has no hover, so give every control a pressed state. */
  .btn:active, .subnav a:active, .topbar nav a:active {
    transform: translateY(1px);
    filter: brightness(.95);
  }

  body { font-size: 15px; }
  .wrap { padding: 0 14px; }
  main.wrap { padding-top: 16px; padding-bottom: 32px; }

  /* 4. The bar follows you down the page and respects the notch. */
  .topbar {
    position: sticky; top: 0; z-index: 30;
    padding-top: env(safe-area-inset-top, 0);
  }
  /* صف واحد: الشعار والقوائم والخروج.
     One row, logo included. It used to wrap onto two, with خروج on a line of its
     own under a rule - which only fitted because the link carried the shaykh's
     whole name. Now every label is short, so the four items fit across a 390px
     phone: nowrap makes that a rule rather than a coincidence. */
  .topbar .wrap {
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 0; padding-top: 8px; padding-bottom: 8px;
  }
  .brand { font-size: .98rem; flex: 0 0 auto; }
  .topbar nav { margin-inline-start: auto; gap: 2px; flex: 0 0 auto; }
  .topbar nav a { padding: 6px 10px; font-size: .9rem; }
  .topbar .who {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
    gap: 6px; font-size: .85rem;
  }
  /* Each label hugs its text. The shrink-and-ellipsis rules stay as insurance:
     a long word here must never push خروج off the edge, which is what happened
     when this link carried the shaykh's full name. */
  .topbar .who > a:not(.logout) {
    display: block;
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 22px;
  }
  .topbar .who > .logout { flex: 0 0 auto; }
  .site-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  .page-title { font-size: 1.2rem; }
  .page-head { gap: 10px; }
  .page-head .btn { width: 100%; }
  .card { padding: 14px; }
  .card.narrow, .login-card { max-width: none; }

  /* 5. One control per line: nothing cramped, nothing to mis-tap. */
  .form-row { gap: 10px; }
  .form-row .f, .form-row .f.grow, .form-row .f.tight { flex: 1 1 100%; }
  .form-row .btn { width: 100%; }
  .searchbar { flex-wrap: wrap; }
  .searchbar input { flex: 1 1 100%; }
  .searchbar .btn { flex: 0 0 auto; min-width: 104px; }
  .row-actions .btn { flex: 1 1 auto; }

  .date-picker { gap: 8px; padding: 10px; }
  .date-picker select { flex: 1 1 100%; min-width: 0; }
  .dp-suffix { display: none; }
  .date-picker .btn { flex: 1 1 40%; }

  .subnav { gap: 6px; }
  .subnav a { flex: 1 1 auto; text-align: center; justify-content: center; }

  /* 6. Tables become cards. Each cell says what it is; the main action is
        full width and the rest sit in a tidy row underneath. */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 12px; background: #fff;
    box-shadow: var(--shadow);
  }
  .table td { border: none; padding: 3px 0; text-align: start; }
  .table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--ink-soft); font-size: .8rem; font-weight: 600;
  }
  .table td.actions {
    white-space: normal; padding-top: 10px; margin-top: 8px;
    border-top: 1px solid var(--line);
  }
  .actions-row > .btn.primary { flex: 1 1 100%; }
  .actions-row > .btn, .actions-row form.inline { flex: 1 1 auto; }
  .actions-row form.inline .btn { width: 100%; }
  .actions .btn { margin-inline-start: 0; }
  .table-scroll { -webkit-overflow-scrolling: touch; }

  .editor-grid { gap: 14px; }
  #tpl { min-height: 240px; font-size: 16px !important; }

  .big-code { font-size: 1.6rem; letter-spacing: .1em; padding: 14px; }

  /* 7. The certificate: fit to the screen by default, with one tap to
        enlarge it for reading. See .sheet-wrap.zoomed below. */
  .ejaza-toolbar { gap: 8px; max-width: none; }
  .ejaza-toolbar .btn { flex: 1 1 auto; }
  .toolbar-code { margin-inline-start: 0; flex-basis: 100%; text-align: center; }
  .only-phone { display: inline-flex !important; }
}

@media (max-width: 480px) {
  .brand span { display: none; }          /* the logo alone identifies the site */
  .hero { padding: 20px 0 6px; }
  .hero-title { font-size: 1.3rem; }
  .big-input { font-size: 16px !important; letter-spacing: .16em; }
  .big-code { font-size: 1.35rem; }
  .card { padding: 12px; }
}


/* Reading mode: the sheet at full size inside a horizontal scroller, so the
   text is legible and the user can pan around it. */
.sheet-wrap.zoomed {
  transform: none !important;
  height: auto !important;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Anyone who prefers less motion gets no press animation. */
@media (prefers-reduced-motion: reduce) {
  .btn, .subnav a, .topbar nav a { transition: none; }
  .btn:active, .subnav a:active, .topbar nav a:active { transform: none; }
}

.nowrap { white-space: nowrap; }

/* رقم الإجازة is shown for reference, never typed into. */
input[readonly], input:disabled {
  background: #f4f3ee;
  color: var(--ink-soft);
  cursor: default;
}

/* ============================================================
   زخارف مستوحاة من المخطوطات الإسلامية
   Drawn from Islamic manuscript references: paired-line strapwork,
   girih tessellation and layered shamsa rosettes. Original geometry,
   generated mathematically, so it stays vector at print resolution.
   ============================================================ */
.frame-strap8 .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.1'%3E%3Crect x='2' y='2' width='56' height='56'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cpolygon points='30.00,1.00 31.04,4.98 34.60,2.90 32.52,6.46 36.50,7.50 32.52,8.54 34.60,12.10 31.04,10.02 30.00,14.00 28.96,10.02 25.40,12.10 27.48,8.54 23.50,7.50 27.48,6.46 25.40,2.90 28.96,4.98' fill='none' stroke='%23a9853f' stroke-width='0.85' stroke-linejoin='round'/%3E%3Cpolygon points='30.00,3.20 30.69,5.83 33.04,4.46 31.67,6.81 34.30,7.50 31.67,8.19 33.04,10.54 30.69,9.17 30.00,11.80 29.31,9.17 26.96,10.54 28.33,8.19 25.70,7.50 28.33,6.81 26.96,4.46 29.31,5.83' fill='none' stroke='%23a9853f' stroke-width='0.85' stroke-linejoin='round'/%3E%3Cpolygon points='7.50,23.50 8.54,27.48 12.10,25.40 10.02,28.96 14.00,30.00 10.02,31.04 12.10,34.60 8.54,32.52 7.50,36.50 6.46,32.52 2.90,34.60 4.98,31.04 1.00,30.00 4.98,28.96 2.90,25.40 6.46,27.48' fill='none' stroke='%23a9853f' stroke-width='0.85' stroke-linejoin='round'/%3E%3Cpolygon points='7.50,25.70 8.19,28.33 10.54,26.96 9.17,29.31 11.80,30.00 9.17,30.69 10.54,33.04 8.19,31.67 7.50,34.30 6.81,31.67 4.46,33.04 5.83,30.69 3.20,30.00 5.83,29.31 4.46,26.96 6.81,28.33' fill='none' stroke='%23a9853f' stroke-width='0.85' stroke-linejoin='round'/%3E%3Cpolygon points='52.50,23.50 53.54,27.48 57.10,25.40 55.02,28.96 59.00,30.00 55.02,31.04 57.10,34.60 53.54,32.52 52.50,36.50 51.46,32.52 47.90,34.60 49.98,31.04 46.00,30.00 49.98,28.96 47.90,25.40 51.46,27.48' fill='none' stroke='%23a9853f' stroke-width='0.85' stroke-linejoin='round'/%3E%3Cpolygon points='52.50,25.70 53.19,28.33 55.54,26.96 54.17,29.31 56.80,30.00 54.17,30.69 55.54,33.04 53.19,31.67 52.50,34.30 51.81,31.67 49.46,33.04 50.83,30.69 48.20,30.00 50.83,29.31 49.46,26.96 51.81,28.33' fill='none' stroke='%23a9853f' stroke-width='0.85' stroke-linejoin='round'/%3E%3Cpolygon points='30.00,46.00 31.04,49.98 34.60,47.90 32.52,51.46 36.50,52.50 32.52,53.54 34.60,57.10 31.04,55.02 30.00,59.00 28.96,55.02 25.40,57.10 27.48,53.54 23.50,52.50 27.48,51.46 25.40,47.90 28.96,49.98' fill='none' stroke='%23a9853f' stroke-width='0.85' stroke-linejoin='round'/%3E%3Cpolygon points='30.00,48.20 30.69,50.83 33.04,49.46 31.67,51.81 34.30,52.50 31.67,53.19 33.04,55.54 30.69,54.17 30.00,56.80 29.31,54.17 26.96,55.54 28.33,53.19 25.70,52.50 28.33,51.81 26.96,49.46 29.31,50.83' fill='none' stroke='%23a9853f' stroke-width='0.85' stroke-linejoin='round'/%3E%3C/svg%3E") 15 round;
}
.frame-chain .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.1'%3E%3Crect x='2' y='2' width='56' height='56'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cellipse cx='25.00' cy='7.50' rx='4.60' ry='3.00' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cellipse cx='30.00' cy='7.50' rx='4.60' ry='3.00' fill='none' stroke='%23fffdf7' stroke-width='3.4'/%3E%3Cellipse cx='30.00' cy='7.50' rx='4.60' ry='3.00' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cellipse cx='35.00' cy='7.50' rx='4.60' ry='3.00' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cellipse cx='25.00' cy='52.50' rx='4.60' ry='3.00' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cellipse cx='30.00' cy='52.50' rx='4.60' ry='3.00' fill='none' stroke='%23fffdf7' stroke-width='3.4'/%3E%3Cellipse cx='30.00' cy='52.50' rx='4.60' ry='3.00' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cellipse cx='35.00' cy='52.50' rx='4.60' ry='3.00' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cellipse cx='7.50' cy='25.00' rx='3.00' ry='4.60' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cellipse cx='7.50' cy='30.00' rx='3.00' ry='4.60' fill='none' stroke='%23fffdf7' stroke-width='3.4'/%3E%3Cellipse cx='7.50' cy='30.00' rx='3.00' ry='4.60' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cellipse cx='7.50' cy='35.00' rx='3.00' ry='4.60' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cellipse cx='52.50' cy='25.00' rx='3.00' ry='4.60' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cellipse cx='52.50' cy='30.00' rx='3.00' ry='4.60' fill='none' stroke='%23fffdf7' stroke-width='3.4'/%3E%3Cellipse cx='52.50' cy='30.00' rx='3.00' ry='4.60' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cellipse cx='52.50' cy='35.00' rx='3.00' ry='4.60' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3C/svg%3E") 15 round;
}
.frame-quatre .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.1'%3E%3Crect x='2' y='2' width='56' height='56'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cpath d='M16.80,7.50 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M21.00,3.30 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M16.80,52.50 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M21.00,48.30 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M3.30,21.00 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M7.50,16.80 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M48.30,21.00 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M52.50,16.80 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M25.80,7.50 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M30.00,3.30 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M25.80,52.50 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M30.00,48.30 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M3.30,30.00 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M7.50,25.80 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M48.30,30.00 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M52.50,25.80 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M34.80,7.50 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M39.00,3.30 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M34.80,52.50 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M39.00,48.30 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M3.30,39.00 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M7.50,34.80 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M48.30,39.00 a2.62,4.20 0 1,1 8.40,0 a2.62,4.20 0 1,1 -8.40,0 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M52.50,34.80 a4.20,2.62 0 1,1 0,8.40 a4.20,2.62 0 1,1 0,-8.40 z' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3C/svg%3E") 15 round;
}
.frame-kufic .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.1'%3E%3Crect x='2' y='2' width='56' height='56'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cpath d='M16.00,11.50 L16.00,4.50 M16.00,4.50 L23.00,4.50 M23.00,4.50 L23.00,9.00 M23.00,9.00 L30.00,9.00 M30.00,9.00 L30.00,4.50 M30.00,4.50 L37.00,4.50 M37.00,4.50 L37.00,11.50 M37.00,11.50 L44.00,11.50' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M16.00,48.50 L16.00,55.50 M16.00,55.50 L23.00,55.50 M23.00,55.50 L23.00,51.00 M23.00,51.00 L30.00,51.00 M30.00,51.00 L30.00,55.50 M30.00,55.50 L37.00,55.50 M37.00,55.50 L37.00,48.50 M37.00,48.50 L44.00,48.50' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M11.50,16.00 L4.50,16.00 M4.50,16.00 L4.50,23.00 M4.50,23.00 L9.00,23.00 M9.00,23.00 L9.00,30.00 M9.00,30.00 L4.50,30.00 M4.50,30.00 L4.50,37.00 M4.50,37.00 L11.50,37.00 M11.50,37.00 L11.50,44.00' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3Cpath d='M48.50,16.00 L55.50,16.00 M55.50,16.00 L55.50,23.00 M55.50,23.00 L51.00,23.00 M51.00,23.00 L51.00,30.00 M51.00,30.00 L55.50,30.00 M55.50,30.00 L55.50,37.00 M55.50,37.00 L48.50,37.00 M48.50,37.00 L48.50,44.00' fill='none' stroke='%23a9853f' stroke-width='1.05'/%3E%3C/svg%3E") 15 round;
}
.frame-starrow .sheet-frame {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23a9853f' stroke-width='1.1'%3E%3Crect x='2' y='2' width='56' height='56'/%3E%3Crect x='13' y='13' width='34' height='34'/%3E%3C/g%3E%3Cpolygon points='22.00,4.00 22.62,6.01 24.47,5.03 23.49,6.88 25.50,7.50 23.49,8.12 24.47,9.97 22.62,8.99 22.00,11.00 21.38,8.99 19.53,9.97 20.51,8.12 18.50,7.50 20.51,6.88 19.53,5.03 21.38,6.01' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='30.00,4.00 30.62,6.01 32.47,5.03 31.49,6.88 33.50,7.50 31.49,8.12 32.47,9.97 30.62,8.99 30.00,11.00 29.38,8.99 27.53,9.97 28.51,8.12 26.50,7.50 28.51,6.88 27.53,5.03 29.38,6.01' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='38.00,4.00 38.62,6.01 40.47,5.03 39.49,6.88 41.50,7.50 39.49,8.12 40.47,9.97 38.62,8.99 38.00,11.00 37.38,8.99 35.53,9.97 36.51,8.12 34.50,7.50 36.51,6.88 35.53,5.03 37.38,6.01' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='22.00,49.00 22.62,51.01 24.47,50.03 23.49,51.88 25.50,52.50 23.49,53.12 24.47,54.97 22.62,53.99 22.00,56.00 21.38,53.99 19.53,54.97 20.51,53.12 18.50,52.50 20.51,51.88 19.53,50.03 21.38,51.01' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='30.00,49.00 30.62,51.01 32.47,50.03 31.49,51.88 33.50,52.50 31.49,53.12 32.47,54.97 30.62,53.99 30.00,56.00 29.38,53.99 27.53,54.97 28.51,53.12 26.50,52.50 28.51,51.88 27.53,50.03 29.38,51.01' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='38.00,49.00 38.62,51.01 40.47,50.03 39.49,51.88 41.50,52.50 39.49,53.12 40.47,54.97 38.62,53.99 38.00,56.00 37.38,53.99 35.53,54.97 36.51,53.12 34.50,52.50 36.51,51.88 35.53,50.03 37.38,51.01' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='7.50,18.50 8.12,20.51 9.97,19.53 8.99,21.38 11.00,22.00 8.99,22.62 9.97,24.47 8.12,23.49 7.50,25.50 6.88,23.49 5.03,24.47 6.01,22.62 4.00,22.00 6.01,21.38 5.03,19.53 6.88,20.51' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='7.50,26.50 8.12,28.51 9.97,27.53 8.99,29.38 11.00,30.00 8.99,30.62 9.97,32.47 8.12,31.49 7.50,33.50 6.88,31.49 5.03,32.47 6.01,30.62 4.00,30.00 6.01,29.38 5.03,27.53 6.88,28.51' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='7.50,34.50 8.12,36.51 9.97,35.53 8.99,37.38 11.00,38.00 8.99,38.62 9.97,40.47 8.12,39.49 7.50,41.50 6.88,39.49 5.03,40.47 6.01,38.62 4.00,38.00 6.01,37.38 5.03,35.53 6.88,36.51' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='52.50,18.50 53.12,20.51 54.97,19.53 53.99,21.38 56.00,22.00 53.99,22.62 54.97,24.47 53.12,23.49 52.50,25.50 51.88,23.49 50.03,24.47 51.01,22.62 49.00,22.00 51.01,21.38 50.03,19.53 51.88,20.51' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='52.50,26.50 53.12,28.51 54.97,27.53 53.99,29.38 56.00,30.00 53.99,30.62 54.97,32.47 53.12,31.49 52.50,33.50 51.88,31.49 50.03,32.47 51.01,30.62 49.00,30.00 51.01,29.38 50.03,27.53 51.88,28.51' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='52.50,34.50 53.12,36.51 54.97,35.53 53.99,37.38 56.00,38.00 53.99,38.62 54.97,40.47 53.12,39.49 52.50,41.50 51.88,39.49 50.03,40.47 51.01,38.62 49.00,38.00 51.01,37.38 50.03,35.53 51.88,36.51' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3C/svg%3E") 15 round;
}
.orn-wm_rubhizb .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpolygon points='153.03,153.03 46.97,153.03 46.97,46.97 153.03,46.97' fill='none' stroke='%23a9853f' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='140.31,140.31 59.69,140.31 59.69,59.69 140.31,59.69' fill='none' stroke='%23a9853f' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='100.00,175.00 25.00,100.00 100.00,25.00 175.00,100.00' fill='none' stroke='%23fffdf7' stroke-width='4.1' stroke-linejoin='round'/%3E%3Cpolygon points='100.00,157.00 43.00,100.00 100.00,43.00 157.00,100.00' fill='none' stroke='%23fffdf7' stroke-width='4.1' stroke-linejoin='round'/%3E%3Cpolygon points='100.00,175.00 25.00,100.00 100.00,25.00 175.00,100.00' fill='none' stroke='%23a9853f' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='100.00,157.00 43.00,100.00 100.00,43.00 157.00,100.00' fill='none' stroke='%23a9853f' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='100.00,66.00 106.77,83.67 124.04,75.96 116.33,93.23 134.00,100.00 116.33,106.77 124.04,124.04 106.77,116.33 100.00,134.00 93.23,116.33 75.96,124.04 83.67,106.77 66.00,100.00 83.67,93.23 75.96,75.96 93.23,83.67' fill='none' stroke='%23a9853f' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpolygon points='100.00,78.00 104.38,89.43 115.56,84.44 110.57,95.62 122.00,100.00 110.57,104.38 115.56,115.56 104.38,110.57 100.00,122.00 95.62,110.57 84.44,115.56 89.43,104.38 78.00,100.00 89.43,95.62 84.44,84.44 95.62,89.43' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  opacity: .18;
}
.orn-wm_shamsa .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M162.00,100.00 Q178.00,112.00 194.00,100.00 Q178.00,88.00 162.00,100.00 Z M159.89,116.05 Q172.24,131.78 190.80,124.33 Q178.45,108.60 159.89,116.05 Z M153.69,131.00 Q161.55,149.39 181.41,147.00 Q173.55,128.61 153.69,131.00 Z M143.84,143.84 Q146.67,163.64 166.47,166.47 Q163.64,146.67 143.84,143.84 Z M131.00,153.69 Q128.61,173.55 147.00,181.41 Q149.39,161.55 131.00,153.69 Z M116.05,159.89 Q108.60,178.45 124.33,190.80 Q131.78,172.24 116.05,159.89 Z M100.00,162.00 Q88.00,178.00 100.00,194.00 Q112.00,178.00 100.00,162.00 Z M83.95,159.89 Q68.22,172.24 75.67,190.80 Q91.40,178.45 83.95,159.89 Z M69.00,153.69 Q50.61,161.55 53.00,181.41 Q71.39,173.55 69.00,153.69 Z M56.16,143.84 Q36.36,146.67 33.53,166.47 Q53.33,163.64 56.16,143.84 Z M46.31,131.00 Q26.45,128.61 18.59,147.00 Q38.45,149.39 46.31,131.00 Z M40.11,116.05 Q21.55,108.60 9.20,124.33 Q27.76,131.78 40.11,116.05 Z M38.00,100.00 Q22.00,88.00 6.00,100.00 Q22.00,112.00 38.00,100.00 Z M40.11,83.95 Q27.76,68.22 9.20,75.67 Q21.55,91.40 40.11,83.95 Z M46.31,69.00 Q38.45,50.61 18.59,53.00 Q26.45,71.39 46.31,69.00 Z M56.16,56.16 Q53.33,36.36 33.53,33.53 Q36.36,53.33 56.16,56.16 Z M69.00,46.31 Q71.39,26.45 53.00,18.59 Q50.61,38.45 69.00,46.31 Z M83.95,40.11 Q91.40,21.55 75.67,9.20 Q68.22,27.76 83.95,40.11 Z M100.00,38.00 Q112.00,22.00 100.00,6.00 Q88.00,22.00 100.00,38.00 Z M116.05,40.11 Q131.78,27.76 124.33,9.20 Q108.60,21.55 116.05,40.11 Z M131.00,46.31 Q149.39,38.45 147.00,18.59 Q128.61,26.45 131.00,46.31 Z M143.84,56.16 Q163.64,53.33 166.47,33.53 Q146.67,36.36 143.84,56.16 Z M153.69,69.00 Q173.55,71.39 181.41,53.00 Q161.55,50.61 153.69,69.00 Z M159.89,83.95 Q178.45,91.40 190.80,75.67 Q172.24,68.22 159.89,83.95 Z' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Cpath d='M139.23,107.80 Q149.84,121.13 164.73,112.88 Q154.13,99.55 139.23,107.80 Z M133.26,122.22 Q137.96,138.59 154.88,136.67 Q150.18,120.30 133.26,122.22 Z M122.22,133.26 Q120.30,150.18 136.67,154.88 Q138.59,137.96 122.22,133.26 Z M107.80,139.23 Q99.55,154.13 112.88,164.73 Q121.13,149.84 107.80,139.23 Z M92.20,139.23 Q78.87,149.84 87.12,164.73 Q100.45,154.13 92.20,139.23 Z M77.78,133.26 Q61.41,137.96 63.33,154.88 Q79.70,150.18 77.78,133.26 Z M66.74,122.22 Q49.82,120.30 45.12,136.67 Q62.04,138.59 66.74,122.22 Z M60.77,107.80 Q45.87,99.55 35.27,112.88 Q50.16,121.13 60.77,107.80 Z M60.77,92.20 Q50.16,78.87 35.27,87.12 Q45.87,100.45 60.77,92.20 Z M66.74,77.78 Q62.04,61.41 45.12,63.33 Q49.82,79.70 66.74,77.78 Z M77.78,66.74 Q79.70,49.82 63.33,45.12 Q61.41,62.04 77.78,66.74 Z M92.20,60.77 Q100.45,45.87 87.12,35.27 Q78.87,50.16 92.20,60.77 Z M107.80,60.77 Q121.13,50.16 112.88,35.27 Q99.55,45.87 107.80,60.77 Z M122.22,66.74 Q138.59,62.04 136.67,45.12 Q120.30,49.82 122.22,66.74 Z M133.26,77.78 Q150.18,79.70 154.88,63.33 Q137.96,61.41 133.26,77.78 Z M139.23,92.20 Q154.13,100.45 164.73,87.12 Q149.84,78.87 139.23,92.20 Z' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Cpath d='M120.00,100.00 Q132.00,110.00 144.00,100.00 Q132.00,90.00 120.00,100.00 Z M117.32,110.00 Q122.71,124.66 138.11,122.00 Q132.71,107.34 117.32,110.00 Z M110.00,117.32 Q107.34,132.71 122.00,138.11 Q124.66,122.71 110.00,117.32 Z M100.00,120.00 Q90.00,132.00 100.00,144.00 Q110.00,132.00 100.00,120.00 Z M90.00,117.32 Q75.34,122.71 78.00,138.11 Q92.66,132.71 90.00,117.32 Z M82.68,110.00 Q67.29,107.34 61.89,122.00 Q77.29,124.66 82.68,110.00 Z M80.00,100.00 Q68.00,90.00 56.00,100.00 Q68.00,110.00 80.00,100.00 Z M82.68,90.00 Q77.29,75.34 61.89,78.00 Q67.29,92.66 82.68,90.00 Z M90.00,82.68 Q92.66,67.29 78.00,61.89 Q75.34,77.29 90.00,82.68 Z M100.00,80.00 Q110.00,68.00 100.00,56.00 Q90.00,68.00 100.00,80.00 Z M110.00,82.68 Q124.66,77.29 122.00,61.89 Q107.34,67.29 110.00,82.68 Z M117.32,90.00 Q132.71,92.66 138.11,78.00 Q122.71,75.34 117.32,90.00 Z' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Cpath d='M105.54,102.30 Q110.80,113.13 122.17,109.18 Q116.92,98.35 105.54,102.30 Z M102.30,105.54 Q98.35,116.92 109.18,122.17 Q113.13,110.80 102.30,105.54 Z M97.70,105.54 Q86.87,110.80 90.82,122.17 Q101.65,116.92 97.70,105.54 Z M94.46,102.30 Q83.08,98.35 77.83,109.18 Q89.20,113.13 94.46,102.30 Z M94.46,97.70 Q89.20,86.87 77.83,90.82 Q83.08,101.65 94.46,97.70 Z M97.70,94.46 Q101.65,83.08 90.82,77.83 Q86.87,89.20 97.70,94.46 Z M102.30,94.46 Q113.13,89.20 109.18,77.83 Q98.35,83.08 102.30,94.46 Z M105.54,97.70 Q116.92,101.65 122.17,90.82 Q110.80,86.87 105.54,97.70 Z' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Ccircle cx='100.00' cy='100.00' r='5.00' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 62% auto;
  opacity: .18;
}
.orn-bg_girih8 .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpolygon points='0.00,-15.00 2.41,-5.82 10.61,-10.61 5.82,-2.41 15.00,0.00 5.82,2.41 10.61,10.61 2.41,5.82 0.00,15.00 -2.41,5.82 -10.61,10.61 -5.82,2.41 -15.00,0.00 -5.82,-2.41 -10.61,-10.61 -2.41,-5.82' fill='none' stroke='%23a9853f' stroke-width='0.9' stroke-linejoin='round'/%3E%3Cpolygon points='80.00,-15.00 82.41,-5.82 90.61,-10.61 85.82,-2.41 95.00,0.00 85.82,2.41 90.61,10.61 82.41,5.82 80.00,15.00 77.59,5.82 69.39,10.61 74.18,2.41 65.00,0.00 74.18,-2.41 69.39,-10.61 77.59,-5.82' fill='none' stroke='%23a9853f' stroke-width='0.9' stroke-linejoin='round'/%3E%3Cpolygon points='0.00,65.00 2.41,74.18 10.61,69.39 5.82,77.59 15.00,80.00 5.82,82.41 10.61,90.61 2.41,85.82 0.00,95.00 -2.41,85.82 -10.61,90.61 -5.82,82.41 -15.00,80.00 -5.82,77.59 -10.61,69.39 -2.41,74.18' fill='none' stroke='%23a9853f' stroke-width='0.9' stroke-linejoin='round'/%3E%3Cpolygon points='80.00,65.00 82.41,74.18 90.61,69.39 85.82,77.59 95.00,80.00 85.82,82.41 90.61,90.61 82.41,85.82 80.00,95.00 77.59,85.82 69.39,90.61 74.18,82.41 65.00,80.00 74.18,77.59 69.39,69.39 77.59,74.18' fill='none' stroke='%23a9853f' stroke-width='0.9' stroke-linejoin='round'/%3E%3Cpolygon points='40.00,25.00 42.41,34.18 50.61,29.39 45.82,37.59 55.00,40.00 45.82,42.41 50.61,50.61 42.41,45.82 40.00,55.00 37.59,45.82 29.39,50.61 34.18,42.41 25.00,40.00 34.18,37.59 29.39,29.39 37.59,34.18' fill='none' stroke='%23a9853f' stroke-width='0.9' stroke-linejoin='round'/%3E%3Cpolygon points='43.06,-7.39 43.11,-3.11 47.39,-3.06 44.40,0.00 47.39,3.06 43.11,3.11 43.06,7.39 40.00,4.40 36.94,7.39 36.89,3.11 32.61,3.06 35.60,0.00 32.61,-3.06 36.89,-3.11 36.94,-7.39 40.00,-4.40' fill='none' stroke='%23a9853f' stroke-width='0.75' stroke-linejoin='round'/%3E%3Cpolygon points='3.06,32.61 3.11,36.89 7.39,36.94 4.40,40.00 7.39,43.06 3.11,43.11 3.06,47.39 0.00,44.40 -3.06,47.39 -3.11,43.11 -7.39,43.06 -4.40,40.00 -7.39,36.94 -3.11,36.89 -3.06,32.61 -0.00,35.60' fill='none' stroke='%23a9853f' stroke-width='0.75' stroke-linejoin='round'/%3E%3Cpolygon points='83.06,32.61 83.11,36.89 87.39,36.94 84.40,40.00 87.39,43.06 83.11,43.11 83.06,47.39 80.00,44.40 76.94,47.39 76.89,43.11 72.61,43.06 75.60,40.00 72.61,36.94 76.89,36.89 76.94,32.61 80.00,35.60' fill='none' stroke='%23a9853f' stroke-width='0.75' stroke-linejoin='round'/%3E%3Cpolygon points='43.06,72.61 43.11,76.89 47.39,76.94 44.40,80.00 47.39,83.06 43.11,83.11 43.06,87.39 40.00,84.40 36.94,87.39 36.89,83.11 32.61,83.06 35.60,80.00 32.61,76.94 36.89,76.89 36.94,72.61 40.00,75.60' fill='none' stroke='%23a9853f' stroke-width='0.75' stroke-linejoin='round'/%3E%3Cpolygon points='20.00,26.00 14.00,20.00 20.00,14.00 26.00,20.00' fill='none' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='60.00,26.00 54.00,20.00 60.00,14.00 66.00,20.00' fill='none' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='20.00,66.00 14.00,60.00 20.00,54.00 26.00,60.00' fill='none' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='60.00,66.00 54.00,60.00 60.00,54.00 66.00,60.00' fill='none' stroke='%23a9853f' stroke-width='0.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: repeat;
  background-size: 19mm;
  opacity: .09;
}
.orn-cn_star8 .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M3.00,61.00 L3.00,12.00 M3.00,12.00 L12.00,3.00 M12.00,3.00 L61.00,3.00' fill='none' stroke='%23a9853f' stroke-width='1.5'/%3E%3Cpath d='M9.00,61.00 L9.00,15.00 M9.00,15.00 L15.00,9.00 M15.00,9.00 L61.00,9.00' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpolygon points='30.00,11.25 33.23,22.20 43.26,16.74 37.80,26.77 48.75,30.00 37.80,33.23 43.26,43.26 33.23,37.80 30.00,48.75 26.77,37.80 16.74,43.26 22.20,33.23 11.25,30.00 22.20,26.77 16.74,16.74 26.77,22.20' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Cpolygon points='30.00,16.75 32.28,24.49 39.37,20.63 35.51,27.72 43.25,30.00 35.51,32.28 39.37,39.37 32.28,35.51 30.00,43.25 27.72,35.51 20.63,39.37 24.49,32.28 16.75,30.00 24.49,27.72 20.63,20.63 27.72,24.49' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Cpath d='M18,54 Q30,54 30,44' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpath d='M54,18 Q54,30 44,30' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpolygon points='50.00,45.00 51.59,48.41 55.00,50.00 51.59,51.59 50.00,55.00 48.41,51.59 45.00,50.00 48.41,48.41' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.8' stroke-linejoin='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M3.00,61.00 L3.00,12.00 M3.00,12.00 L12.00,3.00 M12.00,3.00 L61.00,3.00' fill='none' stroke='%23a9853f' stroke-width='1.5'/%3E%3Cpath d='M9.00,61.00 L9.00,15.00 M9.00,15.00 L15.00,9.00 M15.00,9.00 L61.00,9.00' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpolygon points='30.00,11.25 33.23,22.20 43.26,16.74 37.80,26.77 48.75,30.00 37.80,33.23 43.26,43.26 33.23,37.80 30.00,48.75 26.77,37.80 16.74,43.26 22.20,33.23 11.25,30.00 22.20,26.77 16.74,16.74 26.77,22.20' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Cpolygon points='30.00,16.75 32.28,24.49 39.37,20.63 35.51,27.72 43.25,30.00 35.51,32.28 39.37,39.37 32.28,35.51 30.00,43.25 27.72,35.51 20.63,39.37 24.49,32.28 16.75,30.00 24.49,27.72 20.63,20.63 27.72,24.49' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Cpath d='M18,54 Q30,54 30,44' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpath d='M54,18 Q54,30 44,30' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpolygon points='50.00,45.00 51.59,48.41 55.00,50.00 51.59,51.59 50.00,55.00 48.41,51.59 45.00,50.00 48.41,48.41' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.8' stroke-linejoin='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M3.00,61.00 L3.00,12.00 M3.00,12.00 L12.00,3.00 M12.00,3.00 L61.00,3.00' fill='none' stroke='%23a9853f' stroke-width='1.5'/%3E%3Cpath d='M9.00,61.00 L9.00,15.00 M9.00,15.00 L15.00,9.00 M15.00,9.00 L61.00,9.00' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpolygon points='30.00,11.25 33.23,22.20 43.26,16.74 37.80,26.77 48.75,30.00 37.80,33.23 43.26,43.26 33.23,37.80 30.00,48.75 26.77,37.80 16.74,43.26 22.20,33.23 11.25,30.00 22.20,26.77 16.74,16.74 26.77,22.20' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Cpolygon points='30.00,16.75 32.28,24.49 39.37,20.63 35.51,27.72 43.25,30.00 35.51,32.28 39.37,39.37 32.28,35.51 30.00,43.25 27.72,35.51 20.63,39.37 24.49,32.28 16.75,30.00 24.49,27.72 20.63,20.63 27.72,24.49' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Cpath d='M18,54 Q30,54 30,44' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpath d='M54,18 Q54,30 44,30' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpolygon points='50.00,45.00 51.59,48.41 55.00,50.00 51.59,51.59 50.00,55.00 48.41,51.59 45.00,50.00 48.41,48.41' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.8' stroke-linejoin='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M3.00,61.00 L3.00,12.00 M3.00,12.00 L12.00,3.00 M12.00,3.00 L61.00,3.00' fill='none' stroke='%23a9853f' stroke-width='1.5'/%3E%3Cpath d='M9.00,61.00 L9.00,15.00 M9.00,15.00 L15.00,9.00 M15.00,9.00 L61.00,9.00' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpolygon points='30.00,11.25 33.23,22.20 43.26,16.74 37.80,26.77 48.75,30.00 37.80,33.23 43.26,43.26 33.23,37.80 30.00,48.75 26.77,37.80 16.74,43.26 22.20,33.23 11.25,30.00 22.20,26.77 16.74,16.74 26.77,22.20' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Cpolygon points='30.00,16.75 32.28,24.49 39.37,20.63 35.51,27.72 43.25,30.00 35.51,32.28 39.37,39.37 32.28,35.51 30.00,43.25 27.72,35.51 20.63,39.37 24.49,32.28 16.75,30.00 24.49,27.72 20.63,20.63 27.72,24.49' fill='none' stroke='%23a9853f' stroke-width='1.0' stroke-linejoin='round'/%3E%3Cpath d='M18,54 Q30,54 30,44' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpath d='M54,18 Q54,30 44,30' fill='none' stroke='%23a9853f' stroke-width='0.9'/%3E%3Cpolygon points='50.00,45.00 51.59,48.41 55.00,50.00 51.59,51.59 50.00,55.00 48.41,51.59 45.00,50.00 48.41,48.41' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 15mm;
  opacity: .6;
}
.orn-cr_cartouche .sheet-orn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='56' viewBox='0 0 300 56'%3E%3Cpath d='M150,5 L206,17 L246,28 L206,39 L150,51 L94,39 L54,28 L94,17 Z' fill='none' stroke='%23a9853f' stroke-width='1.4'/%3E%3Cpath d='M150,11 L198,20 L230,28 L198,36 L150,45 L102,36 L70,28 L102,20 Z' fill='none' stroke='%23a9853f' stroke-width='0.85'/%3E%3Cpolygon points='150.00,12.50 152.97,20.84 160.96,17.04 157.16,25.03 165.50,28.00 157.16,30.97 160.96,38.96 152.97,35.16 150.00,43.50 147.03,35.16 139.04,38.96 142.84,30.97 134.50,28.00 142.84,25.03 139.04,17.04 147.03,20.84' fill='none' stroke='%23a9853f' stroke-width='0.9' stroke-linejoin='round'/%3E%3Cpolygon points='150.00,17.50 152.01,23.15 157.42,20.58 154.85,25.99 160.50,28.00 154.85,30.01 157.42,35.42 152.01,32.85 150.00,38.50 147.99,32.85 142.58,35.42 145.15,30.01 139.50,28.00 145.15,25.99 142.58,20.58 147.99,23.15' fill='none' stroke='%23a9853f' stroke-width='0.9' stroke-linejoin='round'/%3E%3Cpolygon points='86.00,22.00 88.12,25.88 92.00,28.00 88.12,30.12 86.00,34.00 83.88,30.12 80.00,28.00 83.88,25.88' fill='none' stroke='%23a9853f' stroke-width='0.85' stroke-linejoin='round'/%3E%3Cpolygon points='214.00,22.00 216.12,25.88 220.00,28.00 216.12,30.12 214.00,34.00 211.88,30.12 208.00,28.00 211.88,25.88' fill='none' stroke='%23a9853f' stroke-width='0.85' stroke-linejoin='round'/%3E%3Cpath d='M8.00,28.00 L50.00,28.00 M250.00,28.00 L292.00,28.00' fill='none' stroke='%23a9853f' stroke-width='1.1'/%3E%3Cpolygon points='20.00,23.50 21.59,26.41 24.50,28.00 21.59,29.59 20.00,32.50 18.41,29.59 15.50,28.00 18.41,26.41' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.8' stroke-linejoin='round'/%3E%3Cpolygon points='280.00,23.50 281.59,26.41 284.50,28.00 281.59,29.59 280.00,32.50 278.41,29.59 275.50,28.00 278.41,26.41' fill='%23a9853f' stroke='%23a9853f' stroke-width='0.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center 1mm;
  background-repeat: no-repeat;
  background-size: 66% auto;
  opacity: .6;
}

/* ============================================================
   إطار من صورة كاملة — a full-page A4 frame image
   The artwork covers the whole sheet; the CSS border and the two gold rules
   step aside, and the text is inset far enough to clear typical border art.
   ============================================================ */
.sheet.frame-image { padding: 0; }

/* The artwork fills the sheet exactly. z-index keeps it under the text, and
   being an <img> it survives printing with background graphics turned off. */
.frame-art, .frame-wash {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.frame-art  { object-fit: fill; z-index: 0; }
.frame-wash { z-index: 1; }
.frame-image .sheet-frame { position: relative; z-index: 2; }
.frame-image .sheet-frame {
  border: 0;
  border-image: none;
}
.frame-image .sheet-frame::before,
.frame-image .sheet-frame::after { display: none; }

.frame-preview {
  background: #f4f3ee; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px; text-align: center; margin-bottom: 10px;
}
.frame-preview img {
  max-height: 190px; max-width: 100%;
  border: 1px solid var(--line); background: #fff;
}


/* معرض صور الإطار — the shaykh's uploaded frames, pick one with a click */
/* ============================================================
   الإعدادات المحفوظة — named saved settings
   Each row: the name (a button that previews it), a badge on the one in force,
   then its actions. Same button size as the student table rows.
   ============================================================ */
/* Cards side by side, each showing what its setting looks like. */
.preset-list {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px;
}
/* Half the previous thumbnail, so the card is a row rather than a tall tile:
   the picture on one side, the name and its actions on the other. Six actions
   would never fit under a 59px picture. */
.preset {
  margin: 0; padding: 6px;
  display: flex; align-items: flex-start; gap: 8px;
  width: 248px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.preset > .preset-pick { flex: 0 0 59px; width: 59px; }
.preset > figcaption { flex: 1 1 auto; min-width: 0; }
.preset.on { border-color: var(--green); box-shadow: 0 0 0 2px rgba(31,111,82,.14); }
/* The one open in the editor - not necessarily the one in force. */
.preset.editing { border-color: #a9853f; box-shadow: 0 0 0 2px rgba(169,133,63,.20); }
.preset > figcaption { display: flex; flex-direction: column; gap: 5px; }
/* One row, always: five icon buttons fit, and a wrapped action row
   made the cards ragged. */
.preset .actions-row { gap: 5px; flex-wrap: nowrap; }
.preset-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.preset-badge.editing { color: #7a5a12; background: rgba(169,133,63,.16); }

/* The thumbnail is a link to the full-size preview. */
.preset-pick {
  display: block; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; line-height: 0;
}
.preset-pick:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.preset-name {
  min-width: 0; text-align: start;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--green-dark);
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preset-name:hover { color: var(--green); }
/* Touch needs a taller target than the text line gives it. */
@media (max-width: 860px) {
  .preset-name { min-height: 34px; display: flex; align-items: center; }
}
.preset-badge {
  align-self: flex-start;
  font-size: .7rem; color: var(--green-dark);
  background: rgba(31,111,82,.10); border-radius: 999px; padding: 1px 8px;
}

/* ---------- معاينة الإعداد المصغرة ----------
   A4 proportions at thumbnail size. The frame comes from the very same
   .frame-* rules as the real sheet, which target .sheet-frame - so the inner
   element carries that class and the border is narrowed to suit. */
.preset-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 296;
  background: #fffdf7;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.preset-thumb .sheet-frame {
  position: absolute; inset: 0;
  border-width: 4px;                 /* 5mm on paper, scaled for the thumbnail */
  padding: 0;
  height: auto;
  display: block;
}
.preset-thumb.is-image .sheet-frame { border: 0; }
.preset-thumb-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; z-index: 0;
}
.preset-thumb-wash {
  position: absolute; background: #fff; z-index: 1;
}
/* The three blocks of the real sheet, in the same places and proportions:
   header centred at the top, the body filling what is left as one justified
   block, then the foot in two columns - date and seal space on the right, the
   shaykh's lines on the left. */
.preset-thumb-text {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: #3a2f1c;
  direction: rtl;
}
.preset-thumb-text .pt-head {
  flex: 0 0 auto; text-align: center; margin-bottom: 2px;
}
.pt-head .pt-basmala { font-size: 3.4px; line-height: 1.3; }
.pt-head .pt-title   { font-size: 7.5px; line-height: 1.25; font-weight: 700; color: #17553f; }
.pt-head .pt-sub     { font-size: 4px;   line-height: 1.35; margin-top: .5px; }

/* Tiny on purpose: a page of Naskh at thumbnail scale is a grey block, which is
   what the real sheet looks like at this size. */
.preset-thumb-text .pt-body {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  font-size: 2.6px; line-height: 1.45;
  text-align: justify; text-align-last: center;
  opacity: .8;
}
.preset-thumb-text .pt-foot {
  flex: 0 0 auto; margin-top: 2px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 3px; align-items: start;
  font-size: 3px; line-height: 1.5;
}
.pt-foot .pt-foot-right { grid-column: 1; grid-row: 1; text-align: center; }
.pt-foot .pt-foot-left  { grid-column: 2; grid-row: 1; text-align: center; }
.pt-foot .pt-date  { margin-bottom: 1px; }
/* The space kept clear for the hand-applied seal, as on the sheet itself. */
.pt-foot .pt-stamp {
  height: 12px; border: .5px dashed rgba(0, 0, 0, .28); border-radius: 1px;
}
/* A thumbnail is clickable for a live preview, so it should look like it. */
.frame-thumb img[data-pick-frame] { cursor: pointer; }

/* An icon-only button: the glyph takes the text colour, and the box is the same
   as every other button beside it. Inside a .card.compact the padding comes from
   that block, not from here - which is why these come out 35x26 there, matching
   their neighbours exactly. */
.btn.icon {
  padding: 3px 7px;
  line-height: 0;
}

/* The setting the certificates use: a gold filled star, and nothing else
   different - it must be exactly as wide as the buttons beside it. */
.btn.icon.is-default { color: #a9853f; }
.btn.icon.is-default:disabled { opacity: 1; }
.btn.icon .ui-icon { display: block; }
.ui-icon { color: currentColor; }

/* ---------- رفع الخلفية مع شريط التقدم ----------
   The file input is off-screen and its label is the button: clicking the label
   opens the file dialog even with JavaScript off. */
.upload-field {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: 1 0 100%;
}
.upload-field > label.btn { margin: 0; }
.upload-bar {
  position: relative; flex: 1 1 180px; min-width: 140px;
  height: var(--control-h, 26px);
  border: 1px solid var(--line); border-radius: 6px;
  background: #f4f2ec; overflow: hidden;
}
.upload-bar-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 0;
  background: var(--green); opacity: .22; transition: width .15s linear;
}
.upload-bar-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; color: var(--ink);
}
/* Waiting on the server, with no measurable progress left to show. */
.upload-bar.working .upload-bar-fill { animation: uploadPulse 1s ease-in-out infinite; }
.upload-bar.failed { border-color: #d99; background: var(--err-bg); }
.upload-bar.failed .upload-bar-fill { background: #c66; }
@keyframes uploadPulse { 0%, 100% { opacity: .12; } 50% { opacity: .32; } }
@media (prefers-reduced-motion: reduce) {
  .upload-bar-fill { transition: none; }
  .upload-bar.working .upload-bar-fill { animation: none; }
}

/* ---------- التنسيق: عناصر صغيرة ----------
   The whole page uses the small control size of the print/copies box in the
   sheet's corner, so the form stays compact and scannable.
   Desktop only: on a phone an input under 16px makes iOS zoom the page in on
   focus, which is worse than a taller box. */
@media (min-width: 861px) {
  .card.compact { --control-h: 26px; }
  .card.compact input,
  .card.compact select,
  .card.compact textarea {
    height: 26px; min-height: 26px;
    font-size: .78rem; padding: 2px 8px;
  }
  .card.compact select { padding-inline-end: 22px; background-size: 9px; }
  .card.compact .btn {
    height: 26px; min-height: 26px; padding: 3px 10px; font-size: .72rem;
  }
  .card.compact label { font-size: .76rem; }
  .card.compact .form-row { gap: 8px 10px; }
  .card.compact .hint { font-size: .74rem; }
}

.frame-gallery {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
}
/* Half the previous size: enough to recognise an A4 design, small enough that
   several fit one row. The two actions are icons, so they fit under it. */
.frame-thumb {
  /* Wide enough that the two icon buttons sit side by side under the picture
     with room to spare, rather than pressed against its edges. */
  margin: 0; padding: 5px; width: 88px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.frame-thumb.on { border-color: var(--green); box-shadow: 0 0 0 2px rgba(31,111,82,.18); }
.frame-thumb img {
  width: 100%; height: 108px; object-fit: contain;
  background: #f4f3ee; border-radius: 4px; display: block;
}
.frame-thumb figcaption {
  display: flex; justify-content: center; gap: 4px; margin-top: 4px;
}
.frame-thumb figcaption {
  display: flex; gap: 6px; justify-content: center; margin-top: 6px;
}
.frame-thumb .btn { flex: 1 1 auto; }

/* Off-screen but still focusable and still submitted with the form.
   The geometry is !important on purpose: this class is used on form controls,
   and the base `input[type=file] { width: 100% }` rule is (0,1,1) - it beat the
   plain class and left a full-width invisible input hanging off the page edge,
   which showed up as horizontal overflow. A utility whose only job is to hide
   must not lose to an element selector. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important; padding: 0 !important; margin: -1px !important;
  min-height: 0 !important;
}

/* ============================================================
   مقابض الهوامش — drag the text margins on the preview itself
   A dashed guide marks the text area; the four bars are grab handles.
   Screen only, and only on the التنسيق page.
   ============================================================ */
.inset-guide {
  position: absolute; pointer-events: none; z-index: 4;
  border: 1px dashed rgba(31, 111, 82, .55);
  background: rgba(31, 111, 82, .04);
}
/* All four handles are always fully visible - they are the only clue that the
   preview can be dragged, so they must not depend on hovering to be found.
   A white ring keeps them readable over dark frame artwork. */
.inset-handle {
  position: absolute; pointer-events: auto;
  background: var(--green); border-radius: 4px;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .3);
  opacity: 1;
  /* Cancels the preview's shrink-to-fit scaling, so a handle is the same size
     to the eye on a phone as on a desktop. app.js sets the variable. */
  transform: scale(var(--handle-scale, 1));
}
.inset-handle:hover, .inset-handle.dragging { background: var(--green-dark); }

/* A pair of grip lines, so a handle reads as something you pull. */
.inset-handle::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-repeat: no-repeat; opacity: .85;
}
.inset-handle.h-top, .inset-handle.h-bottom {
  left: 50%; width: 66px; height: 11px; margin-left: -33px; cursor: ns-resize;
}
.inset-handle.h-top    { top: -6px; }
.inset-handle.h-bottom { bottom: -6px; }
.inset-handle.h-top::after, .inset-handle.h-bottom::after {
  width: 18px; height: 5px;
  background-size: 18px 1px, 18px 1px;
  background-position: center 1px, center 4px;
}
.inset-handle.h-left, .inset-handle.h-right {
  top: 50%; width: 11px; height: 66px; margin-top: -33px; cursor: ew-resize;
}
.inset-handle.h-left  { left: -6px; }
.inset-handle.h-right { right: -6px; }
.inset-handle.h-left::after, .inset-handle.h-right::after {
  width: 5px; height: 18px;
  background-size: 1px 18px, 1px 18px;
  background-position: 1px center, 4px center;
}

/* On a phone the sheet's طباعة is the only print button on the preview page, so
   it gets a comfortable height there. It stays deliberately small on desktop,
   where it sits over the artwork. */
@media (max-width: 860px) {
  .sheet-tools .btn, .sheet-tools .btn.tiny {
    min-height: 36px; padding: 6px 14px; font-size: .82rem;
  }
}

/* Touch: a finger needs more than 11px, and phones have no hover at all. */
@media (max-width: 860px) {
  .inset-handle.h-top, .inset-handle.h-bottom { height: 16px; margin-left: -36px; width: 72px; }
  .inset-handle.h-top    { top: -8px; }
  .inset-handle.h-bottom { bottom: -8px; }
  .inset-handle.h-left, .inset-handle.h-right { width: 16px; margin-top: -36px; height: 72px; }
  .inset-handle.h-left  { left: -8px; }
  .inset-handle.h-right { right: -8px; }
}

.inset-readout {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  background: var(--green-dark); color: #fff;
  font: 11px/1.4 ui-monospace, monospace; direction: ltr;
  padding: 2px 8px; border-radius: 4px; pointer-events: none;
  opacity: 0; transition: opacity .12s;
}
.inset-readout.on { opacity: 1; }

/* ============================================================
   نافذة المعاينة — the preview window
   A dialog holding the sheet in a frame. Sized in viewport units so it fits
   any screen, and it never prints: the frame prints itself.
   ============================================================ */
.preview-modal {
  width: min(96vw, 900px);
  max-width: 96vw;
  height: min(92vh, 1180px);
  padding: 0;
  border: 0; border-radius: 12px;
  background: var(--card, #fff);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.preview-modal::backdrop { background: rgba(20, 30, 25, .55); }
.preview-modal .preview-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--card, #fff);
}
.preview-modal .preview-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--green-dark); font-size: .95rem;
}
.preview-modal .preview-body {
  height: calc(100% - 45px);
  overflow: auto;
  background: var(--bg, #faf8f2);
}
.preview-modal iframe {
  display: block; width: 100%; height: 100%; border: 0;
}
@media print { .preview-modal { display: none !important; } }

/* المعاينة الحية داخل بطاقة الإعداد — the live sheet inside the editor card.
   A rule above it separates it from the fields; the sheet is scaled by app.js,
   which reclaims the space the transform frees, so no gap is left behind. */
/* المحرر: عمودان — النموذج يمينا والمعاينة يسارا.
   In RTL a plain flex row puts the first child on the right, which is where the
   form belongs; the sheet follows it on the left. */
.editor-split {
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.editor-fields { flex: 1 1 360px; min-width: 0; }
/* Half of A4. The sheet keeps its full 794px layout width and is scaled by a
   transform anchored top-right, so the visible half lands exactly in this box
   and the rest is clipped rather than stretching the card. */
.live-sheet {
  flex: 0 0 auto;
  width: 397px; max-width: 100%;
  overflow: hidden;
}
/* The wrap must be as wide as the sheet it holds. Left to shrink to this 397px
   column it became half-width, and scaling about its right edge then pushed the
   sheet 99px past the column, where overflow:hidden cut it off. At 210mm the
   wrap's right edge is the column's right edge, so a half scale about that
   corner lands the sheet exactly inside. */
.live-sheet .sheet-wrap {
  width: 210mm;
  justify-content: flex-start;
  transform-origin: top right;
}

/* ---------- منتقي الخلفية ----------
   A row of small tiles under the fields: click one and the sheet redraws. */
.bg-picker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  flex: 1 0 100%;
  margin-top: 10px;
}
.bg-picker-title { font-size: .74rem; color: var(--ink-soft); }
.bg-tile {
  padding: 2px; margin: 0; cursor: pointer; line-height: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
.bg-tile img {
  display: block; width: 40px; height: 54px; object-fit: contain;
  background: #f4f3ee; border-radius: 3px;
}
.bg-tile.on { border-color: var(--green); box-shadow: 0 0 0 2px rgba(31,111,82,.18); }
.bg-tile:hover { border-color: var(--green); }

/* One column on a phone: the form, then the sheet under it. */
@media (max-width: 860px) {
  .editor-split { flex-direction: column; }
  .live-sheet { width: 100%; }
}