/* الدائرة — هوية 2026-10-16 «نيلي دافئ × هدوء تحريري»: كحلي SAL125 واحد قائد، نيلي هادئ ثانوي، ورقة دافئة بنسيج نقاط، خيط ذهبي نادر؛ ليل نيلي للجلسة. خط كاليبري، أرقام لاتينية */
:root {
  --navy:#1a3f8f; --navy-h:#1a3f78; --primary:var(--navy); --indigo:#6366f1; --sky:#2b7cc0; --gold:#f0b429;
  --ink:#14213d; --body:#4a5670; --dim:#5f6b86; --page:#f4f7fc; --paper:#fbf8f1; --card:#fff;
  --line:#d9e6ff; --line2:#e5e9f2;
  --blue:var(--navy); --violet:var(--indigo);
  --glow:rgba(120,170,255,.9); --glow2:rgba(60,120,255,.45);
  --good:#15803d; --good-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7; --bad:#b91c1c; --bad-bg:#fee2e2; --night:#0b1230;
}
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html, body { background:var(--page); }
body { font-family: Calibri, Carlito, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; color:var(--ink); direction:rtl; min-height:100vh; display:flex; flex-direction:column; line-height:1.55; font-size:17px; -webkit-font-smoothing:antialiased; }
/* الخلفية: ورقة دافئة تمتزج بالسماء + نسيج نقاط 22px + وهج سماوي خفيف أعلى الصفحة */
.bg { position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:radial-gradient(circle at 1px 1px, rgba(20,33,61,.08) 1px, transparent 0) 0 0/22px 22px, linear-gradient(160deg, var(--paper) 0%, #eef4fb 45%, #e3eefb 100%); }
.bg .glow { position:absolute; inset-inline:0; top:0; height:50%; background:radial-gradient(70% 40% at 50% 0%, rgba(120,170,255,.30), transparent 70%); }
.top { display:flex; align-items:center; gap:12px; padding:14px 16px 12px; max-width:980px; width:100%; margin:0 auto; border-bottom:1px solid var(--line); }
.top .back { color:var(--navy); text-decoration:none; font-size:15px; font-weight:600; border:1px solid var(--line); border-radius:999px; padding:6px 14px; background:rgba(255,255,255,.7); }
.top .brand { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--navy); font-weight:700; font-size:22px; margin-inline-end:auto; }
.top .brand img { width:34px; height:34px; } .top .brand small { color:var(--dim); font-weight:400; font-size:14px; letter-spacing:.12em; margin-inline-start:6px; direction:ltr; text-transform:uppercase; }
main { flex:1; width:100%; max-width:980px; margin:0 auto; padding:16px 16px 36px; }
.foot { text-align:center; font-size:15px; color:var(--dim); padding:18px 16px; margin-top:auto; } .foot a { color:var(--navy); font-weight:700; text-decoration:none; } .muted { color:var(--dim); }
.loading { text-align:center; color:var(--dim); padding:60px 0; }

h1 { font-size:34px; font-weight:700; line-height:1.2; margin-bottom:6px; letter-spacing:-.01em; color:var(--ink); } h2 { font-size:22px; font-weight:700; line-height:1.25; color:var(--ink); } h3 { font-size:20px; font-weight:700; line-height:1.3; color:var(--ink); }
.sub { color:var(--body); font-size:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 10px 30px rgba(20,33,61,.05); }
.stack { display:flex; flex-direction:column; gap:16px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
/* أزرار صلبة كحلية، زوايا 8px، بلا تدرّجات */
.btn { border:1px solid var(--primary); border-radius:8px; padding:12px 26px; font:inherit; font-weight:600; font-size:17px; line-height:1.2; cursor:pointer; background:var(--primary); color:#fff; min-height:44px; box-shadow:0 6px 18px rgba(26,63,143,.22); transition:background .2s, box-shadow .2s; }
.btn:hover { background:var(--navy-h); }
.btn.secondary { background:var(--surface,#fff); color:var(--navy); border:1.5px solid var(--navy); box-shadow:none; } .btn.secondary:hover { background:var(--soft,#eaf1ff); }
.btn.ghost, .ghost { background:rgba(255,255,255,.7); border:1px solid var(--line); color:var(--navy); border-radius:999px; padding:8px 14px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; min-height:36px; box-shadow:none; }
.btn.danger { background:var(--surface,#fff); color:var(--bad); border:1px solid #fecaca; box-shadow:none; } .btn:disabled { opacity:.5; cursor:default; }
.btn.sm { padding:8px 18px; min-height:36px; font-size:15px; }
label { display:block; font-weight:700; font-size:15px; margin-bottom:4px; color:var(--ink); }
input, select, textarea { width:100%; font:inherit; font-size:16px; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--surface,#fff); color:var(--ink); }
textarea { min-height:84px; resize:vertical; } input:focus, select:focus, textarea:focus, .btn:focus-visible, button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.field { display:flex; flex-direction:column; gap:4px; }
.hint { font-size:15px; color:var(--dim); } .err { color:var(--bad); font-size:15px; background:var(--bad-bg); border-radius:10px; padding:8px 12px; } .ok { color:var(--good); background:var(--good-bg); border-radius:10px; padding:8px 12px; font-size:15px; }
.notice { background:var(--warn-bg); color:var(--warn); border-radius:12px; padding:10px 14px; font-size:15px; }
.pill { display:inline-block; border-radius:999px; padding:3px 11px; font-size:14px; font-weight:700; background:var(--soft,#eaf1ff); color:var(--navy); }
.pill.good { background:var(--good-bg); color:var(--good); } .pill.warn { background:var(--warn-bg); color:var(--warn); } .pill.bad { background:var(--bad-bg); color:var(--bad); } .pill.gray { background:var(--soft2,#eef0f5); color:var(--dim); }
.num { font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }

/* ثمانية أضواء — نيلي هادئ متوهّج */
.dots { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.dot { width:14px; height:14px; border-radius:50%; background:var(--dot,#e5e9f2); border:1px solid #d5dbe8; transition:all .4s; } .dot.on { background:var(--indigo); box-shadow:0 0 8px rgba(99,102,241,.6); border-color:var(--indigo); }
.members { list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.members li { border:1px solid var(--line); border-radius:12px; padding:8px 10px; font-size:15px; background:var(--surface,#fff); display:flex; flex-direction:column; gap:2px; }
.members li .who { font-weight:700; display:flex; align-items:center; gap:6px; } .members li .who .dot { width:9px; height:9px; }
.members li .meta { font-size:15px; color:var(--dim); }

/* المقاييس 1-5 */
.scale { display:flex; gap:6px; } .scale button { flex:1; min-height:44px; border:1px solid var(--line); border-radius:8px; background:var(--surface,#fff); font:inherit; font-size:17px; font-weight:700; cursor:pointer; color:var(--ink); }
.scale button.on { background:var(--primary); color:#fff; border-color:var(--primary); }
.scales { display:grid; gap:10px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; } .tags button { border:1px solid var(--line); border-radius:999px; padding:6px 14px; background:var(--surface,#fff); font:inherit; font-size:15px; cursor:pointer; color:var(--ink); } .tags button.on { background:var(--soft,#eaf1ff); border-color:var(--navy); color:var(--navy); font-weight:700; }

/* سجل التاريخ */
.hist { list-style:none; display:flex; flex-direction:column; gap:8px; } .hist li { border-top:1px dashed var(--line); padding-top:8px; font-size:15px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.stat { text-align:center; } .stat b { display:block; font-size:30px; font-weight:700; line-height:1.1; color:var(--navy); } .stat span { font-size:14px; color:var(--dim); }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; }
.copy { display:flex; gap:8px; } .copy input { direction:ltr; font-size:15px; }

/* ===== غرفة الجلسة: ليل ===== */
body.night { background:var(--night); color:#e6ebff; overscroll-behavior:none; } body.night .bg { display:none; } body.night .top, body.night .foot { display:none; } body.night main { padding:0; }
.room { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center; padding:24px 16px; padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)); position:relative; }
.room .phase { font-size:15px; color:#8fa0d8; font-weight:600; letter-spacing:.08em; }
.room .cue { font-size:clamp(20px,4vw,30px); font-weight:700; max-width:640px; text-wrap:balance; line-height:1.5; color:#fff; }
.room .cue.small { font-size:17px; font-weight:400; color:#b9c4ee; }
/* أرقام متوهّجة بيضاء */
.room .clock { font-size:clamp(40px,8vw,64px); font-weight:700; font-variant-numeric:tabular-nums; direction:ltr; color:#fff; text-shadow:0 0 18px rgba(120,170,255,.95), 0 0 42px rgba(60,120,255,.55); }
.room .dots .dot { background:#1c2650; border-color:#2a3670; } .room .dots .dot.on { background:#8fb4ff; border-color:#8fb4ff; box-shadow:0 0 10px rgba(120,170,255,.95), 0 0 22px rgba(60,120,255,.6); }
/* مضيف الحلقة المرسومة (ring.js يرسم داخله) */
.ring { position:relative; width:min(72vw,320px); aspect-ratio:1; }
.ring[role=button] { cursor:pointer; border-radius:50%; } .ring:focus-visible { outline:2px solid #8fb4ff; outline-offset:6px; }
@media (orientation:landscape) and (max-height:480px) { .ring { width:min(40vh,320px); } }
.ring canvas, .ring svg { position:absolute; inset:0; width:100%; height:100%; }
.room .intent { max-width:600px; background:rgba(255,255,255,.06); border:1px solid rgba(143,160,216,.25); border-inline-start:3px solid #8fb4ff; border-radius:12px; padding:14px 20px; font-size:24px; line-height:1.8; color:#fff; }
.room .actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.room .btn.secondary { background:rgba(255,255,255,.08); color:#e6ebff; border-color:rgba(255,255,255,.25); }
.room .leave { position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); inset-inline-start:14px; color:#b9c4ee; background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:8px 14px; min-height:44px; font:inherit; cursor:pointer; font-size:15px; }
.room .ttip { font-size:15px; color:#8fa0d8; }
.room input, .room textarea, .room select { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.18); } .room label { color:#c7d2fe; }
.room .scale button { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.18); } .room .tags button { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.18); min-height:44px; } .room .tags button.on { background:rgba(91,154,255,.32); border-color:#8fb4ff; color:#fff; }
.room .scale button.on { background:#2f5fc8; border-color:#5b9aff; }
.room .card { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); box-shadow:none; color:#e6ebff; width:100%; max-width:560px; text-align:right; }
.room .hint { color:#8fa0d8; }
.room .btn { box-shadow:0 6px 18px rgba(60,120,255,.28); }
.room .btn.enter { min-height:56px; font-size:18px; padding:14px 40px; }
/* شريط تفعيل الصوت (صغير، فوق الإشارة) + ملخّص شكراً */
.room .sndbar { display:flex; justify-content:center; }
.room .summary { display:flex; flex-direction:column; gap:6px; font-size:17px; color:#c7d2fe; max-width:560px; } .room .summary:empty { display:none; } .room .summary a { color:#fff; font-weight:700; }
/* ما بعد الجلسة: ارتحت أكثر / مثل قبل / ضاق أكثر */
.feel { display:flex; gap:8px; } .feel button { flex:1; min-height:56px; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(255,255,255,.06); color:#fff; font:inherit; font-size:18px; font-weight:700; cursor:pointer; }
.feel button.on { background:#2f5fc8; border-color:#5b9aff; box-shadow:0 0 18px rgba(60,120,255,.45); }
/* غرفة الانتظار: كتابة النية بسطر واحد */
#quickInt { flex-basis:100%; max-width:560px; flex-wrap:nowrap; } #quickInt input { flex:1; min-width:0; font-size:16px; } #qerr { flex-basis:100%; max-width:560px; }
.room .actions .btn.wa { background:#25D366; color:#fff; }
@media (prefers-reduced-motion:reduce) { .ring * { transition:none; animation:none; } }

/* أنماط الدائرة */
.modes { display:grid; gap:8px; } .mode { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; background:var(--surface,#fff); font-weight:400; }
.mode input { width:auto; grid-row:span 2; margin:0; } .mode b { font-size:16px; } .mode span { font-size:15px; color:var(--dim); grid-column:2; } .mode.on { border-color:var(--navy); background:var(--soft,#eaf1ff); }

/* صوت النية */
.voice { margin-top:10px; border-top:1px dashed var(--line); padding-top:10px; font-size:15px; }
.voice audio { height:36px; }
.rec-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#dc2626; animation:recblink 1s infinite; }
@keyframes recblink { 50% { opacity:.2; } }

/* ===== إضافات جولة المستخدم البسيط 2026-09-27 (دعوة واتساب، بوابة البدء، تبويبات الانضمام، خيارات أكثر) ===== */
.btn.wa { background:#25D366; color:#fff; }
.ghost.on { border-color:var(--navy); color:var(--navy); background:var(--soft,#eaf1ff); }
.ghost.sm { font-size:15px; }
#serr { flex-basis:100%; } #serr:empty { display:none; }
details.more > summary { cursor:pointer; list-style:none; font-size:15px; font-weight:700; color:var(--navy); } details.more > summary::-webkit-details-marker { display:none; } details.more > summary::before { content:'+ '; } details.more[open] > summary::before { content:'− '; } details.more[open] > summary { margin-bottom:8px; }
details.hint > summary { cursor:pointer; font-weight:700; } details.hint ol { padding-inline-start:20px; margin-top:6px; line-height:1.8; }

/* ===== جولة التبسيط 2026-09-27: بطاقة «جلستك القادمة»، العدّاد، شريط الإحساس، الأقسام القابلة للطي ===== */
/* البطاقة المميّزة: إطار كحلي 2px + خيط ذهبي واحد على الحافة العلوية */
.hero { position:relative; overflow:hidden; padding:28px 26px 26px; border:2px solid var(--navy); border-radius:16px; background:rgba(255,255,255,.9); box-shadow:0 10px 30px rgba(20,33,61,.07); }
.hero::before { content:''; position:absolute; top:0; inset-inline:24px; height:1px; background:var(--gold); }
.hero h1 { font-size:34px; position:relative; display:inline-block; padding-bottom:10px; }
.hero h1::after { content:''; position:absolute; inset-inline-start:0; bottom:0; width:72px; height:1px; background:var(--gold); box-shadow:0 0 0 .5px var(--gold); }
.hero .acts { justify-content:center; } .hero .acts .btn { flex:1 1 150px; min-height:52px; font-size:17px; text-align:center; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
/* العدّاد: نجمة تحريرية داخل حلقة رفيعة متوهّجة */
.count { position:relative; isolation:isolate; display:flex; gap:14px; justify-content:center; align-items:center; direction:ltr; margin:14px auto 10px; padding:34px 0; width:clamp(220px,62vw,260px); aspect-ratio:1; font-variant-numeric:tabular-nums; }
.count::before { content:''; position:absolute; inset:0; border-radius:50%; z-index:-1; border:1.5px solid var(--glow);
  box-shadow:0 0 18px rgba(120,170,255,.75), 0 0 46px rgba(60,120,255,.35), inset 0 0 28px rgba(120,170,255,.28);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.9), rgba(227,238,251,.55) 60%, rgba(120,170,255,.08) 100%); }
.count::after { content:''; position:absolute; inset:16px; border-radius:50%; z-index:-1; border:1px solid rgba(43,124,192,.25); animation:breathRing 6s ease-in-out infinite; }
@keyframes breathRing { 0%,100% { transform:scale(.97); opacity:.6; } 50% { transform:scale(1.02); opacity:1; } }
.count > span { display:flex; flex-direction:column; align-items:center; min-width:48px; }
.count b { font-size:clamp(34px,9vw,46px); font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--navy); text-shadow:0 0 18px rgba(120,170,255,.8); }
.count small { font-size:14px; font-weight:600; color:var(--dim); margin-top:6px; }
.count .now { font-size:clamp(26px,7vw,36px); font-weight:700; color:var(--good); direction:rtl; text-shadow:none; }
.feelbar { display:flex; gap:3px; height:16px; border-radius:999px; overflow:hidden; margin:10px 0 8px; background:var(--soft2,#eef0f5); }
.feelbar span { flex:1 1 0; min-width:0; } .feelbar .lighter { background:#15803d; } .feelbar .same { background:#64748b; } .feelbar .heavier { background:#b45309; }
.feelkey { display:flex; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--dim); } .feelkey i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-inline-end:5px; vertical-align:middle; }
details.sec { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 20px; box-shadow:0 10px 30px rgba(20,33,61,.05); }
details.sec > summary { cursor:pointer; list-style:none; font-weight:700; font-size:17px; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px; color:var(--ink); }
details.sec > summary::-webkit-details-marker { display:none; }
details.sec > summary::after { content:''; flex:none; width:9px; height:9px; margin-inline-end:6px; border-inline-end:2px solid var(--dim); border-bottom:2px solid var(--dim); transform:rotate(45deg); transition:transform .2s; }
details.sec[open] > summary::after { transform:rotate(-135deg); }
details.sec[open] > summary { margin-bottom:12px; }
details.sec .card { box-shadow:none; }
.btn.busy { opacity:.6; pointer-events:none; }
/* رأس ضيّق على الجوال: لا التفاف */
.top { flex-wrap:nowrap; }
.top .brand { min-width:0; } .top .brand > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#meBtn { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:480px) { .top .brand small { display:none; } .top .back { padding:6px 10px; } }

/* أهداف لمس 44px في الغرفة + كثافة أفضل للأعضاء على الجوال */
.room .actions .btn, .room .actions .btn.sm { min-height:44px; }
.btn.sm { min-height:40px; }
@media (max-width:480px) { .members { grid-template-columns:repeat(2,minmax(0,1fr)); } .room { gap:16px; } .ring { width:min(64vw,300px); } }

@media (max-width:480px) { #meBtn { display:none; } }

/* أزرار مشاركة أيقونية */
.share { display:flex; gap:8px; }
.ic { width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:var(--surface,#fff); color:var(--navy); display:grid; place-items:center; cursor:pointer; }
.ic.wa { background:#25D366; color:#fff; border-color:transparent; }
.btn.wa svg { vertical-align:-5px; margin-inline-end:6px; }
/* ---- 2026-10-14: تباين واتساب، أهداف لمس 44px، روابط-أزرار، عناوين داخل summary ---- */
.btn.wa, .ic.wa, .room .actions .btn.wa { background:#128C4A; color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(18,140,74,.22); }
.btn.wa:disabled, .ic.wa:disabled, .btn.wa[aria-disabled="true"], .ic.wa[aria-disabled="true"] { opacity:.55; cursor:progress; }
a.ic { text-decoration:none; } a.btn.wa { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.btn.sm, .ghost, .ic { min-height:44px; }
details.sec > summary, details.more > summary { min-height:44px; display:flex; align-items:center; }
details.sec > summary > h2, details.more > summary > h2 { font-size:inherit; font-weight:inherit; margin:0; flex:1; }
.linklike { background:none; border:0; padding:0 4px; font:inherit; color:var(--navy); cursor:pointer; text-decoration:underline; min-height:44px; display:inline-flex; align-items:center; }
.linklike.hint { color:var(--dim); }
#inviteBar { align-items:center; }

/* ---- 2026-10-14 b: أهداف لمس للرجوع/التفاصيل/التذييل، ونيّة أصغر في العرض الأفقي ---- */
.top .back { min-height:44px; display:inline-flex; align-items:center; }
details > summary { min-height:44px; }
.foot a { display:inline-block; padding:12px 6px; }
@media (orientation:landscape) and (max-height:480px) { .room .intent { font-size:18px; } }

/* ---- 2026-10-15: التحكم بالنية (تعطيل/حذف) + بطاقة «صوت الجلسة» ---- */
.intbox.off, .room .intent.off { opacity:.6; filter:grayscale(.6); } .room .intent.off { text-decoration:line-through; text-decoration-color:rgba(255,255,255,.35); }
.pill.intoff { text-decoration:none; font-size:14px; vertical-align:middle; } .room .pill.intoff { background:rgba(255,255,255,.12); color:#c7d2fe; }
.intctl { gap:8px; } .intctl .btn.sm { min-height:44px; } .room .intctl { justify-content:center; margin-top:10px; font-size:15px; } .room .intctl .btn.danger { background:rgba(255,255,255,.06); color:#fca5a5; border-color:rgba(252,165,165,.35); box-shadow:none; }
.sndcard { margin-top:12px; border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:15px; display:flex; flex-direction:column; gap:10px; background:var(--surface,#fff); }
.chips { display:flex; flex-wrap:wrap; gap:8px; } .chips button { border:1px solid var(--line); border-radius:999px; padding:8px 14px; min-height:44px; background:var(--surface,#fff); font:inherit; font-size:15px; cursor:pointer; color:var(--ink); }
.chips button.on { background:var(--soft,#eaf1ff); border-color:var(--navy); color:var(--navy); font-weight:700; } .chips.sub button { min-height:44px; font-size:15px; }
.sndcard select, .sndcard input { min-height:44px; } .sndcard form.row { flex-wrap:nowrap; } .sndcard form.row input { flex:1; min-width:0; }
.sndpick { display:flex; flex-direction:column; gap:6px; } .sndpick audio { width:100%; max-width:420px; height:40px; }
.ytthumb { display:inline-flex; align-items:center; gap:10px; color:var(--navy); text-decoration:none; font-weight:700; min-height:44px; } .ytthumb img { width:96px; height:54px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.chk { display:flex; align-items:center; gap:8px; font-weight:400; min-height:44px; cursor:pointer; } .chk input { width:20px; height:20px; margin:0; }
.sndnote { margin-top:8px; }
/* داخل الغرفة الليلية */
.room .sndcard { width:100%; max-width:560px; text-align:right; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#e6ebff; }
.room .chips button { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.18); } .room .chips button.on { background:rgba(91,154,255,.32); border-color:#8fb4ff; color:#fff; }
.room .sndcard .btn.secondary { background:rgba(255,255,255,.08); color:#e6ebff; } .room .ytthumb { color:#c7d2fe; } .room .sndnote { color:#8fa0d8; margin:0; }
#sndHost:empty { display:none; }

/* ===== 2026-10-15 b: صفحة الدائرة شاشة واحدة + شريط أيقونات + لوحات + بطاقات (كل الألوان عبر متغيّرات لتعمل في الوضع الليلي من ui.css) ===== */
:root { --soft:#eaf1ff; --soft2:#eef0f5; --dot:#e5e9f2; }
@media (prefers-color-scheme: dark) { :root { --soft:rgba(91,154,255,.16); --soft2:rgba(255,255,255,.08); --dot:rgba(255,255,255,.12); } .hero, details.sec, .card { box-shadow:none; } .pendline { background:rgba(180,83,9,.2); } }
.pill.info { background:var(--soft); color:var(--navy); }
.cicon { display:inline-flex; align-items:center; justify-content:center; color:var(--mode,var(--navy)); flex:none; line-height:1; }
.cicon.big { width:44px; height:44px; border-radius:12px; background:color-mix(in srgb, var(--mode,var(--navy)) 12%, transparent); }
.cglyph { line-height:1; font-weight:700; }
.crown { color:#b7791f; display:inline-flex; align-items:center; vertical-align:middle; }
.sep { border:0; border-top:1px solid var(--line); margin:4px 0; width:100%; }
/* بدائل إن غاب ui.css (يُحمَّل بعده فيغلبه) */
.card-glass { background:var(--card); border:1px solid var(--line); border-radius:16px; }
.dot-s { display:inline-block; width:10px; height:10px; border-radius:50%; background:#94a3b8; vertical-align:middle; margin-inline-end:6px; } .dot-s.live { background:#16a34a; } .dot-s.waiting { background:#f59e0b; } .dot-s.done { background:var(--navy); }
.avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--av,var(--navy)); color:#fff; font-weight:700; font-size:14px; }
.avatars { display:inline-flex; align-items:center; direction:rtl; } .avatars > * { margin-inline-end:-8px; box-shadow:0 1px 3px rgba(0,0,0,.15); } .avatars > *:last-child { margin-inline-end:0; }
.avatar.more { background:var(--dim); font-size:14px; direction:ltr; }
@keyframes vIn { from { transform:translateY(6px); } to { opacity:1; transform:none; } } .view-enter { animation:vIn .2s ease both; }
.toast-fb { position:fixed; inset-inline:0; bottom:20px; margin:0 auto; width:max-content; max-width:90vw; background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px; opacity:0; transition:opacity .2s; z-index:1100; pointer-events:none; font-size:15px; } .toast-fb.show { opacity:1; }
.rail-fb { position:fixed; bottom:0; inset-inline:0; display:flex; justify-content:space-around; gap:4px; padding:6px 8px; padding-bottom:calc(6px + env(safe-area-inset-bottom,0px)); background:var(--card); border-top:1px solid var(--line); z-index:900; flex-wrap:wrap; }
.rail-fb-b { min-height:44px; border:0; background:transparent; font:inherit; font-size:14px; color:var(--dim); cursor:pointer; border-radius:10px; padding:4px 8px; position:relative; } .rail-fb-b.active { color:var(--navy); font-weight:700; }
.rail-fb-b.badge::after { content:''; position:absolute; top:4px; inset-inline-end:2px; width:8px; height:8px; border-radius:50%; background:#ef4444; }
body:has(#railFb) main { padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
.panel-fb { position:fixed; top:0; bottom:0; inset-inline-end:0; width:min(420px,100vw); background:var(--card); border-inline-start:1px solid var(--line); z-index:1000; display:flex; flex-direction:column; box-shadow:0 0 40px rgba(0,0,0,.2); }
.panel-fb-h { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); } .panel-fb-h h2 { font-size:20px; }
.panel-fb-b { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.panel-b .btn, .panel-fb-b .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.panel-b .card, .panel-fb-b .card { padding:16px; } .panel-b h3, .panel-fb-b h3 { margin-top:2px; }

/* ---- صفحة الدائرة: لا تمرير ---- */
body.onepage { height:100dvh; overflow:hidden; } body.onepage main { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding-top:0; padding-bottom:8px; } body.onepage .foot { display:none; }
.cpage { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:14px; max-width:560px; width:100%; margin:0 auto; }
@media (max-width:768px) { .cpage { justify-content:flex-start; padding-top:8px; } body.onepage main { overflow:auto; -webkit-overflow-scrolling:touch; } }
.chead { display:flex; align-items:center; gap:12px; min-height:52px; }
.cstripe { width:4px; align-self:stretch; min-height:44px; border-radius:4px; background:var(--mode,var(--navy)); flex:none; }
.chead-t { min-width:0; flex:1; } .chead h1 { font-size:24px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; } .chead .sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scard { padding:20px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; border:2px solid var(--navy); position:relative; overflow:hidden; }
.scard::before { content:''; position:absolute; top:0; inset-inline:22px; height:1px; background:var(--gold); }
.scard .ring8 { gap:10px; } .scard .dot { width:16px; height:16px; } .dot.joined { opacity:.55; }
.scard .when { font-size:18px; margin:0; } .scard .cd { color:var(--dim); font-size:15px; display:flex; align-items:center; gap:6px; margin:0; }
.scard h2 { margin:0; }
.intline { width:100%; display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 14px; border:1px solid var(--line); border-inline-start:3px solid var(--navy); border-radius:12px; background:var(--soft); color:var(--ink); font:inherit; text-align:start; cursor:pointer; }
.intline-t { flex:1; min-width:0; display:flex; flex-direction:column; } .intline-t > span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:17px; line-height:1.4; } .intline-t small { font-size:14px; }
.intline.off { opacity:.65; } .intline.off .intline-t > span { text-decoration:line-through; } .intline.empty { border-style:dashed; border-inline-start-style:dashed; color:var(--dim); background:transparent; }
.pwrap { width:100%; display:flex; flex-direction:column; gap:6px; } .pwrap .btn { width:100%; min-height:52px; font-size:17px; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.avrow { display:flex; align-items:center; justify-content:center; gap:12px; min-height:52px; background:transparent; border:0; font:inherit; color:var(--ink); cursor:pointer; width:100%; border-radius:12px; } .avrow:hover { background:var(--soft); }
@media (max-height:680px) { .scard { gap:6px; padding:14px; } .cpage { gap:8px; } .chead h1 { font-size:20px; } .scard .dot { width:12px; height:12px; } .intline { min-height:48px; } .pwrap .btn { min-height:48px; font-size:16px; } .avrow { min-height:44px; } }
@media (max-height:560px) { .cpage .cicon.big { display:none; } .scard .cd { display:none; } }

/* ---- الرئيسية: بطاقة واحدة تتشبّع كلما قرب الموعد (إطار كحلي ثابت، التشبّع بلون النمط فقط) ---- */
.hero { transition:box-shadow .4s, background .4s; }
.hero.near { background:color-mix(in srgb, var(--mode,var(--navy)) 5%, var(--card)); box-shadow:0 14px 40px color-mix(in srgb, var(--mode,var(--navy)) 20%, transparent); }
.hero.soon { background:color-mix(in srgb, var(--mode,var(--navy)) 12%, var(--card)); box-shadow:0 16px 48px color-mix(in srgb, var(--mode,var(--navy)) 32%, transparent); }
/* عنوان البطاقة (اسم الدائرة) + خيط ذهبي تحته */
.hero .hero-c { position:relative; display:inline-flex; align-items:center; gap:8px; justify-content:center; width:100%; color:var(--ink); text-decoration:none; font-size:22px; font-weight:700; margin-top:4px; min-height:44px; padding-bottom:10px; }
.hero .hero-c::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:72px; height:1px; background:var(--gold); box-shadow:0 0 0 .5px var(--gold); }
.hero .acts .btn { gap:8px; }
.home { max-width:560px; margin:0 auto; }
/* سؤال المتابعة: سطر اقتباس بحافة كحلية */
.pendline { display:flex; align-items:center; gap:10px; min-height:52px; margin-top:16px; padding:10px 16px; border-radius:12px; background:rgba(255,255,255,.6); border:1px solid var(--line); border-inline-start:3px solid var(--navy); color:var(--ink); text-decoration:none; font-size:17px; }
.pendline span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pendline .cicon, .pendline svg { color:var(--navy); flex:none; }
.pendline > b { background:var(--primary); color:#fff; border-radius:8px; padding:7px 16px; font-weight:600; font-size:15px; flex:none; }
.pendline .hint { font-size:14px !important; flex:none; }
@media (max-width:479px) { .pendline { flex-wrap:wrap; row-gap:4px; } .pendline span { flex:1 1 55%; } .pendline .hint { flex:1 1 100%; text-align:start; padding-inline-start:28px; } }

/* ---- لوحة دوائري ---- */
.ccard { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:8px 10px; background:var(--card); border-inline-start:4px solid var(--mode,var(--navy)); } .ccard.done { opacity:.7; }
.ccard-main { flex:1; min-width:0; display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; min-height:44px; } .ccard-t { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } .ccard-t b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; } .ccard-t > .hint { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .ccard-n { display:inline-flex; align-items:center; gap:4px; font-size:14px; flex:0 1 auto; min-width:0; white-space:nowrap; }
@media (max-width:479px) { .ccard-main { flex-wrap:wrap; row-gap:2px; } .ccard-t { flex:1 1 0; } .ccard-n { flex:1 1 100%; justify-content:flex-start; margin-inline-start:30px; font-size:14px; } .ccard-t > .hint { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35; } }
.prog { height:6px; border-radius:999px; background:var(--soft2); overflow:hidden; margin-top:4px; } .prog span { display:block; height:100%; border-radius:999px; }
.pinb { color:var(--dim); flex:none; } .pinb.on { color:var(--navy); background:var(--soft); }
.qmenu { padding:8px; border:1px dashed var(--line); border-radius:12px; justify-content:center; }

/* ---- لوحات الإعدادات/الأعضاء ---- */
.ipick { display:flex; flex-wrap:wrap; gap:8px; } .ipick button { width:48px; height:48px; border-radius:12px; border:1px solid var(--line); background:var(--surface,#fff); color:var(--ink); cursor:pointer; display:grid; place-items:center; font:inherit; } .ipick button.on { border-color:var(--navy); background:var(--soft); color:var(--navy); }
.swatches { display:flex; flex-wrap:wrap; gap:10px; } .swatch { width:44px; height:44px; border-radius:50%; border:3px solid transparent; background:var(--sw); cursor:pointer; padding:0; } .swatch.on { border-color:var(--ink); }
.swatch.none { background:var(--surface,#fff); border:1px dashed var(--line); color:var(--dim); font:inherit; display:grid; place-items:center; } .swatch.none.on { border:2px solid var(--ink); }
.mlist { list-style:none; display:flex; flex-direction:column; gap:8px; } .mlist li { display:flex; align-items:center; gap:10px; min-height:52px; border-bottom:1px dashed var(--line); padding-bottom:8px; } .mlist-t { flex:1; min-width:0; display:flex; flex-direction:column; } .mlist-t b { display:flex; align-items:center; gap:6px; } .mlist-t .meta { font-size:14px; color:var(--dim); }

/* ---- النتائج: تحققت أخضر، جزئياً كهرماني، لم تتحقق بعد كحلي ---- */
.tags.res button.res-achieved.on { background:var(--good-bg); border-color:var(--good); color:var(--good); } .tags.res button.res-partial.on { background:var(--warn-bg); border-color:var(--warn); color:var(--warn); } .tags.res button.res-not_yet.on { background:var(--soft); border-color:var(--navy); color:var(--navy); }
.card.res-achieved { border-color:#86efac; } .card.res-partial { border-color:#fcd34d; } .card.res-not_yet { border-color:#a9c4ff; }
.chead.join { margin:8px 0; } .chead.join h2 { font-size:20px; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.login h1 { margin:0; }
.login { border-top:2px solid var(--navy); }

/* ---- 2026-10-15 b: خلفيات المراحل، أزرار الغرفة بأيقونة، بطاقة الشكر الزجاجية ---- */
:root { --ph-waiting:#0b1230; --ph-breath:#0b1230; --ph-reading:#0d1538; --ph-sending:#070b22; --ph-release:#1a1d3f; --ph-dawn:#3b2f63; --room-ink:#e6ebff; --room-dim:#8fa0d8; --room-soft:#c7d2fe; --room-line:rgba(255,255,255,.12); --room-glass:rgba(255,255,255,.06); }
body.night { transition:background-color .3s ease; }
body.night[data-phase="waiting"], body.night[data-phase="breath"] { background:var(--ph-breath); }
body.night[data-phase="reading"] { background:var(--ph-reading); }
body.night[data-phase="sending"] { background:var(--ph-sending); }
body.night[data-phase="release"], body.night[data-phase="done"] { background:linear-gradient(180deg, var(--ph-release) 0%, var(--ph-dawn) 100%) fixed; }
.room .leave, .room .actions .btn, .room .tacts .btn, .room .sndbar .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; }
.room .leave .ci-ic, .room .btn .ci-ic { flex:none; }
.ring.celebrate { border-radius:50%; }
/* بطاقة الشكر: رقم الجلسة كبير متوهّج، سطر واحد للموعد القادم، أزرار أيقونية + رابط نصّي */
.room.thanks { gap:16px; }
.room .tcard { width:100%; max-width:420px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 20px; color:var(--room-ink); border-color:rgba(143,160,216,.25); background:var(--room-glass); box-shadow:0 12px 40px rgba(0,0,0,.25); }
.room .tcard .tlabel { font-size:15px; color:var(--room-dim); letter-spacing:.08em; }
.room .tcard .tnum { font-size:48px; line-height:1.1; font-weight:700; letter-spacing:-.02em; color:#fff; text-shadow:0 0 18px rgba(120,170,255,.95), 0 0 42px rgba(60,120,255,.55); }
.room .tcard .tfeel { display:inline-flex; align-items:center; gap:6px; margin-top:4px; border-radius:999px; padding:6px 14px; font-weight:700; font-size:15px; background:rgba(255,255,255,.08); }
.room .tcard .tfeel.lighter { color:#6ee7a8; background:rgba(21,128,61,.28); } .room .tcard .tfeel.same { color:#cbd5e1; background:rgba(100,116,139,.3); } .room .tcard .tfeel.heavier { color:#fcd34d; background:rgba(180,83,9,.3); }
.room .tcard .tnext { margin-top:10px; font-size:16px; color:var(--room-soft); } .room .tcard .tnext:empty { display:none; } .room .tcard .tnext b { color:#fff; } .room .tcard .tnext a { color:#fff; font-weight:700; }
.room .tcard .tline.hint { font-size:15px; margin-top:2px; }
.room .tcard .tacts { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin-top:12px; }
.room .tcard .tacts .btn { min-height:44px; }
.room .tlink { color:var(--room-soft); min-height:44px; padding:0 10px; }
@media (orientation:landscape) and (max-height:480px) { .room .tcard { padding:14px 18px; } .room .tcard .tnum { font-size:40px; } }

/* الوضع الداكن: بطاقة الرئيسية والعدّاد (الرموز الأساسية في ui.css) */
@media (prefers-color-scheme: dark) {
  .bg { background:linear-gradient(180deg, #0e1829 0%, #0b1230 100%); }
  .bg .glow { background:radial-gradient(70% 40% at 50% 0%, rgba(91,154,255,.18), transparent 70%); }
  .top .back, .ghost, .btn.ghost { background:rgba(255,255,255,.05); color:var(--blue); border-color:var(--line); }
  .hero, .card.hero, .card.hero.near, .card.hero.soon, .scard { background:var(--surface); border-color:var(--blue); }
  .card.hero.near { background:color-mix(in srgb, var(--mode,var(--blue)) 10%, var(--surface)); } .card.hero.soon { background:color-mix(in srgb, var(--mode,var(--blue)) 18%, var(--surface)); }
  .hero .hero-c { color:var(--ink); }
  .count::before { border-color:rgba(120,170,255,.75); background:radial-gradient(circle at 50% 50%, rgba(22,34,50,.95), rgba(22,34,50,.6) 60%, rgba(91,154,255,.08) 100%); box-shadow:0 0 18px rgba(120,170,255,.55), 0 0 46px rgba(60,120,255,.3), inset 0 0 28px rgba(120,170,255,.18); }
  .count b { color:#fff; text-shadow:0 0 18px rgba(120,170,255,.95), 0 0 42px rgba(60,120,255,.55); }
  .count .now { color:#6ee7a8; }
  .stat b, .stats b { color:var(--blue); }
  .hero .sub, .hero .hint { color:#c7d2fe; }
  .sub { color:#c3cce3; }
  .notice { background:rgba(245,158,11,.15); color:#fcd34d; }
  .pill.good { background:rgba(34,197,94,.18); color:#86efac; } .pill.warn { color:#fcd34d; } .pill.bad { color:#fca5a5; }
  .pendline { background:rgba(255,255,255,.05); border-inline-start-color:var(--blue); color:var(--ink); } .pendline .cicon, .pendline svg { color:var(--blue); }
  .avatar { color:#fff; text-shadow:0 0 2px rgba(0,0,0,.6); }
  .dot { border-color:rgba(255,255,255,.12); } .dot.on { background:#8fb4ff; border-color:#8fb4ff; box-shadow:0 0 10px rgba(120,170,255,.9); }
  .btn.secondary { color:var(--blue); border-color:var(--blue); }
  .btn.danger { color:#fca5a5; border-color:rgba(252,165,165,.35); }
  .crown { color:var(--gold); }
  .toast-fb { background:#e8ecf8; color:#14213d; }
  .intline { border-inline-start-color:var(--blue); }
  .login { border-top-color:var(--blue); }
}
@media (prefers-reduced-motion:reduce) { .count::after { animation:none; } }

/* ---- 2026-10-16 إثراء: الرئيسية أعرض + صف ثلاث بطاقات تحت البطاقة الرئيسية ---- */
.home { max-width:880px; }
.home .hero, .home .banner-top { max-width:620px; width:100%; margin-inline:auto; }
.hcards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-top:4px; }
.hcard { position:relative; display:flex; flex-direction:column; gap:8px; padding:18px 18px 14px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); border-top:3px solid var(--mode, var(--navy)); min-width:0; }
.hcard h3 { display:flex; align-items:center; gap:8px; font-size:19px; margin:0; color:var(--ink); } .hcard h3 .ci-ic { color:var(--mode, var(--navy)); }
.hcard > .hint { margin-top:-4px; font-size:15px; }
.hcard .sub { font-size:15px; }
.hrows { display:flex; flex-direction:column; gap:4px; }
.hrow { display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 8px; border-radius:10px; color:var(--ink); text-decoration:none; }
.hrow:hover { background:var(--soft); }
.hrow .cicon { width:32px; height:32px; border-radius:10px; background:var(--soft); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.hrow-t { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; } .hrow-t b { font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hrow-t .hint { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hrow-n { flex:none; font-size:14px; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hrow-l { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:16px; min-height:28px; }
.hbig { display:flex; align-items:baseline; gap:8px; margin:0; } .hbig b { font-size:40px; line-height:1; color:var(--navy); } .hbig span { font-size:16px; color:var(--body); }
.hcard-f { margin-top:auto; padding-top:6px; justify-content:space-between; align-items:center; gap:8px; }
.hcard-f .linklike { min-height:44px; display:inline-flex; align-items:center; gap:4px; color:var(--navy); font-weight:700; font-size:15px; }
.hcard-f .btn.sm { min-height:44px; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
@media (prefers-color-scheme: dark) { .hcard { box-shadow:none; } .hbig b { color:var(--blue); } .hcard-f .linklike { color:var(--blue); } }

/* ---- 2026-10-16 إثراء: صفحة الدائرة — من الأعلى (بلا توسيط عمودي) + عمود جانبي على ≥1024px ---- */
body.onepage main { overflow:auto; -webkit-overflow-scrolling:touch; }
.cpage { justify-content:flex-start; padding-top:16px; }
.cmain { display:flex; flex-direction:column; gap:14px; min-width:0; }
.chead-d { font-size:15px; white-space:normal !important; margin-top:2px; }
.cside { display:none; }
@media (min-width:1024px) {
  body.onepage { height:auto; overflow:auto; } body.onepage main { overflow:visible; padding-bottom:36px; }
  .cpage { max-width:980px; display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:24px; padding-top:20px; }
  .cmain { max-width:560px; width:100%; justify-self:center; }
  .cside { display:flex; flex-direction:column; gap:12px; min-width:0; }
}
.sidec { display:flex; flex-direction:column; gap:8px; padding:12px 14px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); }
.sidec-h { display:flex; align-items:center; gap:8px; min-height:44px; width:100%; margin:0 -4px; padding:0 4px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:17px; font-weight:700; text-align:start; cursor:pointer; border-radius:8px; }
.sidec-h:hover { background:var(--soft); } .sidec-h > span:first-child { flex:1; } .sidec-h .hint { font-weight:400; font-size:14px; } .sidec-h .ci-ic { color:var(--dim); }
.side-m { list-style:none; display:flex; flex-direction:column; gap:4px; } .side-m li { display:flex; align-items:center; gap:10px; min-height:36px; font-size:15px; }
.side-m .crown { color:var(--gold); display:inline-flex; vertical-align:middle; }
.side-int { font-size:17px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0; }
.side-d { list-style:none; display:flex; flex-direction:column; gap:4px; } .side-d li { display:flex; align-items:center; gap:4px; min-height:32px; font-size:15px; }
.side-h { list-style:none; display:flex; flex-direction:column; gap:6px; } .side-h li { display:flex; align-items:center; gap:8px; min-height:36px; font-size:15px; } .side-ht { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidec .btn.sm { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; align-self:flex-start; }
.sidec .pill { font-size:13px; flex:none; }
@media (prefers-color-scheme: dark) { .sidec { box-shadow:none; } }
.hstat { display:flex; flex-wrap:wrap; gap:4px 8px; } .hstat span { display:inline-block; unicode-bidi:isolate; } .hstat span + span::before { content:'· '; color:var(--dim); }

/* fix50-room */
.ci-sheet-wrap { position:fixed; inset:0; z-index:9999; background:rgba(7,11,34,.55); display:flex; align-items:flex-end; justify-content:center; padding:16px; }
.ci-sheet { width:100%; max-width:440px; background:var(--card,#fff); color:var(--ink,#0f172a); border-radius:18px; padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.35); font-size:17px; line-height:1.6; }
.ci-sheet p { margin:0 0 16px; font-weight:700; }
.ci-sheet-acts { display:flex; flex-direction:column; gap:8px; }
.ci-sheet-acts .btn { width:100%; min-height:48px; justify-content:center; }
.ci-sheet-acts .btn.danger { background:#b91c1c; border-color:#b91c1c; color:#fff; }
@media (min-width:600px) { .ci-sheet-wrap { align-items:center; } .ci-sheet-acts { flex-direction:row-reverse; justify-content:flex-start; } .ci-sheet-acts .btn { width:auto; min-width:120px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ci-sheet { background:#111a3a; color:#f1f5ff; } }
:root[data-theme="dark"] .ci-sheet, body.night .ci-sheet { background:#111a3a; color:#f1f5ff; }
/* waiting-room intention: full width, label, visible border (36/37) */
#quickInt.qint { display:flex; flex-direction:column; align-items:stretch; gap:8px; flex-basis:100%; width:100%; max-width:560px; flex-wrap:wrap; }
#quickInt .qint-l { color:#e2e8ff; font-weight:700; font-size:16px; text-align:start; }
#quickInt input { width:100%; min-height:50px; font-size:17px; border:2px solid rgba(226,232,255,.7) !important; background:rgba(255,255,255,.1) !important; color:#fff; border-radius:12px; padding:10px 14px; }
#quickInt input::placeholder { color:#c3cdf0; opacity:1; }
#quickInt input:focus { outline:3px solid #fde68a; outline-offset:2px; }
#quickInt .btn { width:100%; min-height:48px; justify-content:center; }
@media (min-width:768px) { #quickInt .btn { width:auto; align-self:flex-start; } }
.room .intent .paused { color:#fde68a; font-size:18px; font-weight:700; }
/* contrast + size on navy (35) */
.room .cue.small, .room .ttip, .room .hint, .room .tcard .tline.hint { color:#dbe3ff; }
.room .clock { opacity:1; }
@media (min-width:768px) {
  .room .cue.small, .room .ttip, .room .hint, .room .tcard .tline, .room .tcard .tline.hint, .room .sndnote, .room .feel button, .room .tags button { font-size:18px; }
}
/* join page: live line */
.jlive { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:700; color:#b91c1c; margin-top:6px; }
.jlive .pulse-dot { width:10px; height:10px; border-radius:50%; background:#dc2626; box-shadow:0 0 0 4px rgba(220,38,38,.2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jlive { color:#fca5a5; } }
.chead.join h2, .chead.join .sub { white-space:normal; overflow:visible; text-overflow:clip; }
.room .tcard .tlabel, .room .tcard .tlink, .room .phase { color:#dbe3ff; } @media (min-width:768px) { .room .tcard .tlabel { font-size:18px; } }