/* =============================================================================
   tools.css — أنماط أداتَي «ختماتي» و«اشتراكاتي». تعتمد على رموز app.css.
   ========================================================================== */

/* ---------- مشترك ---------- */
.empty .btn { white-space: nowrap; }
.nav .container { grid-template-columns: repeat(3, 1fr); }
.link-btn.light { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; font-size: inherit; padding: 0; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); vertical-align: middle; margin-inline-start: 4px; }
.mini-track { display: block; height: 5px; border-radius: 3px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.mini-fill { display: block; height: 100%; background: var(--brand); border-radius: 3px; }

/* ---------- ختماتي: عالم المسجد النبوي ----------
   رخام أبيض وحجر كريمي، أخضر القبة، نحاس التيجان والأبواب. هادئ: زخرفة واحدة (لوحة السورة)،
   رقم واحد كبير، فراغ واسع. ليلًا: سماء المدينة والنحاس يتوهّج. */
:root[data-world='khatma'] {
  --bg: #f8f6f1; --surface: #fffdf8; --surface-2: #f1ede4;
  --line: rgba(60, 48, 30, .10); --line-strong: rgba(60, 48, 30, .2);
  --ink: #2b2a26; --ink-2: #4f4a40; --muted: #6f6a5f;
  --brand: var(--w-dome); --brand-ink: #17543a; --brand-soft: rgba(31, 110, 71, .1); --brand-soft-2: rgba(31, 110, 71, .18); --on-brand: #f8f1dc;
  --k-brass: var(--w-brass); --k-brass-ink: #86661f; --k-stone: #d6cdbd; --k-col: var(--w-dome);
  --k-tile: var(--surface); --k-tile-line: var(--k-stone); --k-tile-ink: var(--muted);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light'])[data-world='khatma'] {
    --bg: #101b25; --surface: #16232f; --surface-2: #1c2b38;
    --line: rgba(240, 228, 200, .1); --line-strong: rgba(240, 228, 200, .18);
    --ink: #ece3cf; --ink-2: #c9c0aa; --muted: #a9a291;
    --brand: var(--w-dome); --brand-ink: #7fcfa0; --brand-soft: rgba(63, 154, 107, .16); --brand-soft-2: rgba(63, 154, 107, .26); --on-brand: #f8f1dc;
    --k-brass: #d6b25e; --k-brass-ink: #d6b25e; --k-stone: rgba(240, 228, 200, .22); --k-col: #3f9a6b;
    --k-tile: #1f303f; --k-tile-line: rgba(240, 228, 200, .3); --k-tile-ink: var(--ink-2);
  }
}
:root[data-theme='dark'][data-world='khatma'] {
  --bg: #101b25; --surface: #16232f; --surface-2: #1c2b38;
  --line: rgba(240, 228, 200, .1); --line-strong: rgba(240, 228, 200, .18);
  --ink: #ece3cf; --ink-2: #c9c0aa; --muted: #a9a291;
  --brand: var(--w-dome); --brand-ink: #7fcfa0; --brand-soft: rgba(63, 154, 107, .16); --brand-soft-2: rgba(63, 154, 107, .26); --on-brand: #f8f1dc;
  --k-brass: #d6b25e; --k-brass-ink: #d6b25e; --k-stone: rgba(240, 228, 200, .22); --k-col: #3f9a6b;
  --k-tile: #1f303f; --k-tile-line: rgba(240, 228, 200, .3); --k-tile-ink: var(--ink-2);
}

/* لوحة السورة: كلوحات أبواب المسجد — أخضر، كتابة ذهبية بالنسخ، إطار نحاسي مزدوج بمسامير */
.khatma-home .plaque { position: relative; margin: 26px 6px 0; padding: 18px 16px 15px; text-align: center; border-radius: 6px;
  background: var(--w-dome); color: var(--w-gold);
  box-shadow: inset 0 0 0 2px var(--k-brass), inset 0 0 0 5px var(--w-dome), inset 0 0 0 6px color-mix(in srgb, var(--k-brass) 75%, transparent), 0 6px 16px var(--brand-shadow);
  background-image: radial-gradient(circle at 8px 8px, #e9cd85 2.2px, transparent 2.6px), radial-gradient(circle at calc(100% - 8px) 8px, #e9cd85 2.2px, transparent 2.6px),
    radial-gradient(circle at 8px calc(100% - 8px), #e9cd85 2.2px, transparent 2.6px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #e9cd85 2.2px, transparent 2.6px); }
.khatma-home .plaque .lbl, .khatma-home .plaque .sub { display: block; font-size: 12px; color: #e8dcb8; }
.khatma-home .plaque b { display: block; font-family: var(--font-naskh); font-size: 32px; font-weight: 700; line-height: 1.35; color: var(--w-gold); }

/* وِرد اليوم: الرقم الكبير الوحيد */
.khatma-home .wird { padding: 40px 8px 0; }
.khatma-home .wird .lbl { font-size: 13.5px; font-weight: 600; color: var(--k-brass-ink); }
.khatma-home .wird .big { font-size: 68px; font-weight: 600; line-height: 1.05; letter-spacing: -1px; color: var(--brand-ink); margin-top: 4px; transform-origin: right center; }
.khatma-home .wird .big small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.khatma-home .wird .big.word { font-size: 44px; letter-spacing: 0; line-height: 1.2; }
.khatma-home .wird-bar { height: 5px; border-radius: 3px; background: var(--surface-2); margin: 14px 0 8px; overflow: hidden; }
.khatma-home .wird-bar b { display: block; height: 100%; border-radius: 3px; background: var(--brand); margin-inline-start: 0; }
.khatma-home .wird.met .wird-bar b { background: var(--k-brass); }
.khatma-home .wird .sub { font-size: 13px; color: var(--ink-2); }
.khatma-home .wird .thanks { display: block; font-family: var(--font-naskh); font-size: 34px; font-weight: 700; color: var(--brand-ink); line-height: 1.3; }

/* الأجزاء: رواق من ثلاثين عمودًا */
.khatma-home .whole { padding: 34px 0 0; }
.khatma-home .wh, .khatma-home .wf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 8px; }
.khatma-home .wh h2 { font-size: 13.5px; font-weight: 600; color: var(--k-brass-ink); }
.khatma-home .wh > span { font-size: 12.5px; color: var(--ink-2); }
.khatma-home .wf { font-size: 11px; color: var(--muted); margin-top: 2px; }
.colonnade { display: block; width: 100%; height: auto; margin-top: 6px; }
.colonnade .arches path { fill: none; stroke: var(--k-stone); stroke-width: 1.3; }
.colonnade .arches path.on { stroke: var(--k-col); }
.colonnade .shaft { fill: none; stroke: var(--k-stone); stroke-width: 1; }
.colonnade .cap { fill: var(--k-stone); }
.colonnade .col.read .shaft { fill: var(--k-col); stroke: var(--k-col); }
.colonnade .col.read .cap, .colonnade .col.cur .cap { fill: var(--k-brass); }
.colonnade .col.cur .shaft { stroke: var(--k-col); }
.colonnade .fill { fill: var(--k-col); }
.colonnade .floor { stroke: var(--k-stone); }
.khatma-home .facts { font-size: 12px; color: var(--muted); padding: 10px 8px 0; line-height: 1.7; text-wrap: pretty; }
.khatma-home .facts .late { color: var(--debit); font-weight: 600; white-space: nowrap; }
.khatma-home .section-title { margin-top: 30px; }

/* زر التسجيل عريض في هذا العالم، بحافة نحاسية */
[data-world='khatma'] .fab { inset-inline: 16px; justify-content: center; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--k-brass), 0 8px 18px var(--brand-shadow); }

/* سجلّ القراءة: لوح رخام واحد، الأيام بخطّ نحاسي صغير، وكل سجلّ سطر هادئ بلا أيقونة؛
   اسم السورة بالنسخ كما في الألواح */
.klog { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 2px 14px 6px; }
.klog .kd + .kd { border-top: 1px solid var(--line); }
.klog h3 { font-size: 12px; font-weight: 600; color: var(--k-brass-ink); padding: 12px 0 2px; }
.klog h3 span { color: var(--muted); font-weight: 500; }
.klog .ke { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 7px 0 9px; text-align: start; border-radius: 6px; transition: background .12s; }
.klog .ke:active { background: var(--surface-2); }
.klog .ke b { font-size: 15.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.klog .ke .to { flex: 1; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klog .ke em { font-style: normal; font-family: var(--font-naskh); font-size: 15px; font-weight: 700; color: var(--brand-ink); }
.klog .ke .chev { color: var(--muted); display: inline-flex; align-self: center; }
.klog .ke .chev svg { width: 16px; height: 16px; }
.klog .log-more { display: block; margin: 2px auto 4px; }
.klog-empty { font-size: 13px; color: var(--ink-2); padding: 12px 0 8px; line-height: 1.7; }
.khatma-seg { grid-template-columns: 1fr 1fr; }
.khatma-seg button { font-size: 13.5px; }

/* فهرس السور: ألواح بأربعة أعمدة — المختومة خضراء بكتابة ذهبية كلوحة الباب،
   والجارية بإطار نحاسي وخطّ يمتلئ من اليمين بقدر ما قُرئ منها، والباقية رخام بحافة حجرية */
.khatma-home .surah-index { padding: 34px 0 0; }
.khatma-home .ix-goal { padding: 8px 8px 0; font-size: 13.5px; color: var(--ink-2); }
.khatma-home .ix-goal b { color: var(--brand-ink); font-weight: 700; }
.ix { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 0 0; margin: 0; }
.ix li { display: grid; }
.ix .tile {
  position: relative; overflow: hidden; text-align: center; white-space: nowrap; margin: 0; width: 100%;
  font-family: var(--font-naskh); font-size: 15px; line-height: 1; padding: 17px 4px 6px;
  border-radius: 8px; background: var(--k-tile); border: 1px solid var(--k-tile-line); color: var(--k-tile-ink);
}
.ix .tile i { position: absolute; top: 4px; inset-inline-start: 6px; font: 500 9.5px/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); opacity: .85; }
.ix .tile.read { background: var(--brand); border-color: var(--brand); color: var(--w-gold); font-weight: 700; }
.ix .tile.read i { color: var(--w-gold); opacity: .7; }
.ix .tile.cur { border: 1.5px solid var(--k-brass); color: var(--ink); font-weight: 700; }
.ix .tile.cur i { color: var(--k-brass-ink); opacity: 1; font-weight: 600; }
.ix .tile.cur::after { content: ''; position: absolute; inset: auto 0 0 auto; height: 3px; width: var(--f, 0%); background: var(--k-brass); }
.ix button.tile { cursor: pointer; transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.ix button.tile:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .ix button.tile:not(.cur):hover { border-color: var(--k-brass); } }
.ix button.tile:focus-visible { outline: 2px solid var(--k-brass); outline-offset: 2px; }

/* مفتاح الفهرس «السور | الأجزاء» مكان عنوانه */
.khatma-home .ix-seg { padding: 2px; border-radius: 10px; }
.khatma-home .ix-seg button { padding: 4px 11px; font-size: 12.5px; border-radius: 8px; }

/* فهرس الأجزاء: ترويسة كل جزء باسمه بالكلمات كرأس صفحة المصحف وخطّ يمتد إلى حالته،
   وتحتها ألواح السور التي تمرّ به. عرض اللوح يكبر بعدد صفحاته في الجزء فيمتلئ السطر */
.juz-index .jh { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 8px 8px; font-weight: 400; }
.juz-index .ix-goal + .jh { padding-top: 14px; }
.juz-index .jh b { font: 700 15.5px/1 var(--font-naskh); color: var(--ink-2); }
.juz-index .jh::after { content: ''; flex: 1; border-top: 1px solid var(--line); order: 2; }
.juz-index .jh small, .juz-index .jh-done { order: 3; }
.juz-index .jh small { font-size: 11.5px; color: var(--muted); }
.juz-index .jh-done { display: inline-flex; color: var(--brand-ink); }
.juz-index .jh-done svg { width: 14px; height: 14px; }
.juz-index .jh.read b { color: var(--brand-ink); }
.juz-index .jh.current b, .juz-index .jh.current small { color: var(--k-brass-ink); }
.ix.jz { display: flex; flex-wrap: wrap; padding: 0; }
.ix.jz li { flex-basis: 0; min-width: max-content; }
.ix.jz li.br { flex-basis: 100%; min-width: 0; height: 0; }
.ix.jz .tile { padding-inline: 8px; }

/* ---------- اشتراكاتي: عالم الفواتير ----------
   تذكرة برتقالية كبيرة لما تدفعه كل شهر بكعب مثقوب للأسبوع القادم، شريط الثلاثين يومًا،
   والاشتراكات تذاكر بثقبين وشعار بلون الخدمة. الأزرار كحلية. */
:root[data-world='subs'] {
  --bg: #fff4ea; --surface: #ffffff; --surface-2: #fbe9da;
  --line: rgba(27, 35, 64, .1); --line-strong: rgba(27, 35, 64, .2);
  --ink: var(--w-navy); --ink-2: #444c6b; --muted: #5f6479;
  --brand: var(--w-navy); --brand-ink: var(--w-navy); --brand-soft: rgba(27, 35, 64, .08); --brand-soft-2: rgba(27, 35, 64, .15); --on-brand: #fff4ea;
  --s-orange: var(--w-orange); --s-on-orange: var(--w-navy); --s-soon: #a24a0b; --s-late: #c0392b; --s-ok: #2c6e49; --s-track: #f1dfcd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light'])[data-world='subs'] {
    --bg: #15161f; --surface: #1e2030; --surface-2: #262a3d;
    --line: rgba(241, 236, 230, .1); --line-strong: rgba(241, 236, 230, .2);
    --ink: #f1ece6; --ink-2: #c4c6d4; --muted: #9da1b5;
    --brand: #ffa45c; --brand-ink: #ffb47a; --brand-soft: rgba(255, 164, 92, .12); --brand-soft-2: rgba(255, 164, 92, .22); --on-brand: #1b1406;
    --s-orange: var(--w-orange); --s-on-orange: var(--w-navy); --s-soon: #ffb47a; --s-late: #ff8a80; --s-ok: #7fd6a0; --s-track: #2c3047;
  }
}
:root[data-theme='dark'][data-world='subs'] {
  --bg: #15161f; --surface: #1e2030; --surface-2: #262a3d;
  --line: rgba(241, 236, 230, .1); --line-strong: rgba(241, 236, 230, .2);
  --ink: #f1ece6; --ink-2: #c4c6d4; --muted: #9da1b5;
  --brand: #ffa45c; --brand-ink: #ffb47a; --brand-soft: rgba(255, 164, 92, .12); --brand-soft-2: rgba(255, 164, 92, .22); --on-brand: #1b1406;
  --s-orange: var(--w-orange); --s-on-orange: var(--w-navy); --s-soon: #ffb47a; --s-late: #ff8a80; --s-ok: #7fd6a0; --s-track: #2c3047;
}

/* التذكرة الكبرى: ما تدفعه كل شهر، وكعب مثقوب للأسبوع القادم */
.bill-hero { position: relative; margin-top: 18px; border-radius: 22px; background: var(--s-orange); color: var(--s-on-orange); overflow: hidden; }
.bill-hero::before, .bill-hero::after { content: ''; position: absolute; bottom: 44px; width: 20px; height: 20px; margin-bottom: -10px; border-radius: 50%; background: var(--bg); }
.bill-hero::before { right: -10px; } .bill-hero::after { left: -10px; }
.bill-hero.paused::before, .bill-hero.paused::after { display: none; }
.bh-main { padding: 18px 18px 16px; }
.bh-main .lbl { display: block; font-size: 13px; font-weight: 600; }
.bh-main .v { display: block; font-size: clamp(36px, 11vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -.5px; }
.bh-main .v small { font-size: 15px; font-weight: 500; letter-spacing: 0; }
.bh-main .m { display: block; font-size: 12.5px; margin-top: 4px; }
.bh-stub { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; padding: 10px 18px; border-top: 2px dashed rgba(27, 35, 64, .35); font-size: 12.5px; }
.bh-stub b { font-weight: 700; }
.bh-stub .late { background: var(--s-on-orange); color: #ffd7c2; padding: 3px 9px; border-radius: 99px; font-weight: 600; font-size: 12px; }

/* شريط الثلاثين يومًا */
.month-strip { margin-top: 20px; }
.month-strip .ms-h, .month-strip .ms-f { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px; }
.month-strip .ms-h h2 { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.month-strip .ms-h span { font-size: 12.5px; color: var(--muted); }
.month-strip .ms-f { font-size: 11px; color: var(--muted); margin-top: 4px; }
.month-strip .strip { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; height: 34px; align-items: end; margin-top: 8px; }
.month-strip .strip i { height: 10px; border-radius: 2px; background: var(--s-track); }
.month-strip .strip i.today { height: 16px; background: var(--ink); }
.month-strip .strip i.due { height: 34px; border-radius: 3px; background: var(--c); }

/* التذاكر */
.tickets { display: flex; flex-direction: column; gap: 10px; }
.ticket { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: start;
  padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: background .12s, var(--press); }
.ticket::before, .ticket::after { content: ''; position: absolute; left: 96px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.ticket::before { top: -6px; clip-path: inset(50% 0 0 0); } .ticket::after { bottom: -6px; clip-path: inset(0 0 50% 0); }
button.ticket:active { transform: scale(.985); }
.ticket .logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 17px; font-weight: 700; }
.ticket .logo.emoji { background: color-mix(in srgb, var(--c) 16%, transparent); font-size: 21px; }
.ticket .t { min-width: 0; }
.ticket .t b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket .t small { display: block; font-size: 12px; color: var(--muted); }
.ticket .due { text-align: left; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--ink-2); }
.ticket .due small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.ticket .due.soon, .ticket .due.due { color: var(--s-soon); }
.ticket .due.late { color: var(--s-late); }
.ticket .due.ok { color: var(--ink-2); }
.ticket.muted .logo { background: var(--surface-2); color: var(--muted); }
.ticket.muted .t b { color: var(--ink-2); }
.ticket.muted .due { color: var(--muted); }
.sub-actions { display: flex; gap: 8px; margin-top: 8px; }
.sub-actions .btn { flex: 1; }

/* ---------- ختمة جماعية (group-ui.js / views-group.js) ----------
   في عالم ختماتي نفسه: لوحة النيّة هي الزخرفة الوحيدة، «جزؤك» الرقم الكبير الوحيد،
   الرواق بثلاث حالات، والأجزاء الثلاثون ألواحًا ثلاثة في الصف. */
.g-mine { padding: 36px 8px 0; }
.g-mine .lbl { font-size: 13.5px; font-weight: 600; color: var(--k-brass-ink); }
.g-mine .name { font-family: var(--font-naskh); font-size: 40px; font-weight: 700; line-height: 1.3; color: var(--brand-ink); margin-top: 2px; }
.g-mine .sub { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.g-mine .acts { display: flex; gap: 8px; margin-top: 14px; }
.g-mine .acts .btn.primary { flex: 1; }
.g-mine .acts .btn.secondary { flex: 0 0 auto; }
.g-mine .more { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.8; }

/* الرواق: محجوز بحافة خضراء، وجزؤك عموده وتاجه نحاسيان */
.colonnade .col.held .shaft { stroke: var(--k-col); stroke-width: 1.3; }
.colonnade .col.mine .shaft { stroke: var(--k-brass); stroke-width: 1.6; }
.colonnade .col.mine .cap { fill: var(--k-brass); }
.g-legend { display: flex; gap: 14px; padding: 10px 8px 0; font-size: 12px; color: var(--ink-2); }
.g-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.g-legend > span::before { content: ''; width: 7px; height: 12px; border-radius: 1.5px; border: 1px solid var(--k-stone); }
.g-legend .r::before { background: var(--k-col); border-color: var(--k-col); }
.g-legend .h::before { border-color: var(--k-col); border-width: 1.3px; }

/* الألواح: اسم الجزء بالنسخ واسم القارئ تحته — المقروء أخضر بكتابة ذهبية كلوحة الباب،
   المحجوز بحافة خضراء، جزؤك بإطار نحاسي، والمتاح بحافة متقطّعة */
.g-tiles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px 0 0; margin: 0; }
.g-tiles li { display: grid; }
.g-tiles .tile { position: relative; overflow: hidden; display: grid; gap: 5px; text-align: center; width: 100%; margin: 0; padding: 18px 4px 8px; cursor: pointer;
  border-radius: 8px; background: var(--k-tile); border: 1px solid var(--k-tile-line); color: var(--k-tile-ink);
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.g-tiles .tile:disabled { cursor: default; opacity: 1; }
.g-tiles .tile:not(:disabled):active { transform: scale(.96); }
.g-tiles .tile:focus-visible { outline: 2px solid var(--k-brass); outline-offset: 2px; }
.g-tiles .tile i { position: absolute; top: 4px; inset-inline-start: 6px; font: 500 9.5px/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); }
.g-tiles .tile b { font-family: var(--font-naskh); font-size: 14.5px; line-height: 1.1; font-weight: 700; white-space: nowrap; }
.g-tiles .tile small { font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-tiles .tile.read { background: var(--brand); border-color: var(--brand); color: var(--w-gold); }
.g-tiles .tile.read i, .g-tiles .tile.read small { color: var(--w-gold); opacity: .8; }
.g-tiles .tile.held { border-color: var(--k-col); border-width: 1.3px; color: var(--ink); }
.g-tiles .tile.held small { color: var(--ink-2); }
.g-tiles .tile.mine { border: 1.5px solid var(--k-brass); color: var(--ink); }
.g-tiles .tile.mine small { color: var(--k-brass-ink); font-weight: 600; }
.g-tiles .tile.open { border-style: dashed; }
.g-tiles .tile.open small { color: var(--brand-ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .g-tiles .tile.open:hover { border-color: var(--k-brass); } }

.g-share { display: flex; gap: 8px; margin-top: 18px; }
.g-share .btn { flex: 1; }
.g-names { font-size: 13px; color: var(--ink-2); line-height: 2; text-align: center; padding: 14px 8px 0; text-wrap: balance; }
.g-offline { display: flex; align-items: center; gap: 8px; }
.g-offline svg { width: 16px; height: 16px; flex: none; }
.g-remind { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--ink); text-decoration: none; }
.g-remind svg { width: 18px; height: 18px; flex: none; color: var(--k-brass-ink); }
.g-remind span { flex: 1; }

/* صفحة الدعوة */
.g-brand { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 18px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.g-invite { text-align: center; padding: 18px 8px 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }
.g-invite b { color: var(--ink); }
.g-join { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px 14px; }
.g-join .chosen { font-size: 13px; color: var(--ink-2); margin-top: 12px; line-height: 1.7; }
.g-join .chosen b { font-family: var(--font-naskh); font-size: 17px; color: var(--brand-ink); }
.g-foot { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.8; padding: 12px 8px 0; }
.g-foot .link-btn { font-size: 12.5px; margin-top: 4px; }

/* صفحة الضيف */
.g-upgrade { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; }
.g-upgrade h2 { font-size: 15px; color: var(--ink); }
.g-upgrade p { font-size: 13px; color: var(--ink-2); line-height: 1.8; margin: 6px 0 4px; text-wrap: pretty; }
.g-upgrade .actions { justify-content: center; }
.g-upgrade .link-btn { margin-top: 10px; font-size: 12.5px; }

/* الأوراق */
.g-part-span { font-size: 13px; color: var(--ink-2); }
.g-part-status { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.g-copy { white-space: pre-wrap; font: 400 13px/1.9 var(--font); color: var(--ink); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin-top: 12px; max-height: 46vh; overflow: auto; user-select: text; }
.g-members { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
.g-member { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.g-member + .g-member { border-top: 1px solid var(--line); }
.g-member > span { flex: 1; min-width: 0; }
.g-member b { font-size: 14px; color: var(--ink); }
.g-member small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.g-names span { white-space: nowrap; }