/* Quran Hifz - calm, premium look for the right panel and its 8 tabs (loaded after style.css and the module css).
   Only presentation: no ids/classes are renamed, modules keep working as they are. */
:root {
  --pn-line: color-mix(in srgb, var(--gold) 22%, transparent);
  --pn-line2: color-mix(in srgb, var(--gold) 40%, transparent);
  --pn-card: color-mix(in srgb, var(--card) 82%, var(--bar));
  --pn-soft: #ffffff0a;
  --pn-r: 14px;
  /* very light 8-point-star (khatam) lattice for the panel header */
  --pn-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='.8' opacity='.55'%3E%3Cpath d='M24 8l4.7 11.3L40 24l-11.3 4.7L24 40l-4.7-11.3L8 24l11.3-4.7z'/%3E%3Cpath d='M12.7 12.7h22.6v22.6H12.7z'/%3E%3Cpath d='M0 0l8 8M48 0l-8 8M0 48l8-8M48 48l-8-8'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- panel shell */
aside#panel { background: linear-gradient(180deg, var(--bar2) 0, var(--bar) 140px); border-left: 1px solid var(--pn-line2);
  box-shadow: -6px 0 22px #0000003a; }
aside#panel .tabs { position: relative; gap: 6px; padding: 10px 10px 9px; background: none; border-bottom: 1px solid var(--pn-line); box-shadow: none; }
aside#panel .tabs::before { content: ''; position: absolute; inset: 0; background-image: var(--pn-pattern); background-size: 44px 44px; opacity: .10; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, #0008 70%, #0000); mask-image: linear-gradient(#000, #0008 70%, #0000); }
aside#panel .tabs button { position: relative; background: var(--pn-soft); border: 1px solid #ffffff10; border-radius: 11px; color: #dfe7dc;
  padding: 6px 2px 5px; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
aside#panel .tabs button:hover { background: #ffffff16; border-color: var(--pn-line2); }
aside#panel .tabs button.on { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff 6%), color-mix(in srgb, var(--accent) 80%, #000 10%));
  border-color: var(--pn-line2); color: #fff; box-shadow: 0 3px 10px #0004, inset 0 -2px 0 var(--gold); }
aside#panel .tabs .ti { color: var(--gold); opacity: .9; }
aside#panel .tabs button.on .ti { color: #fff4cf; opacity: 1; }

/* ---------- tab content: smooth change */
aside#panel .tab { padding: 14px 16px 18px; line-height: 1.7; }
aside#panel .tab.on { animation: pn-tab .24s ease-out; }
@keyframes pn-tab { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { aside#panel .tab.on { animation: none; } }
aside#panel .tab > p:first-child { margin-top: 2px; color: var(--muted); }

/* ---------- typography: Naskh for reading, Nastaliq for headings (Arabic-script UI languages) */
html[lang=ur] aside#panel .tab, html[lang=ar] aside#panel .tab, html[lang=fa] aside#panel .tab, html[lang=ps] aside#panel .tab, html[lang=sd] aside#panel .tab,
html[lang=ur] #rdCard, html[lang=ur] #rdSheet, html[lang=ur] .ob-card {
  font-family: 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; }
html[lang=ur] aside#panel h3, html[lang=ur] aside#panel h4, html[lang=ur] aside#panel .tabs .tl, html[lang=ur] #rdSheet h3, html[lang=ur] .ob-card h2, html[lang=ur] .ob-card h1 {
  font-family: 'Noto Nastaliq Urdu', 'Urdu Typesetting', 'Noto Naskh Arabic', serif; font-weight: 600; line-height: 1.9; }
html[lang=ur] aside#panel .tabs .tl { line-height: 1.7; font-size: 11.5px; }
aside#panel h3, aside#panel h4 { color: var(--gold); letter-spacing: .1px; }
aside#panel h4 { margin: 18px 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
aside#panel h4::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to left, var(--pn-line2), transparent); }
aside#panel .note { font-size: 12.5px; line-height: 1.75; }

/* ---------- cards */
aside#panel .ayahbox { background: var(--pn-card); border: 1px solid var(--pn-line2); border-radius: var(--pn-r);
  box-shadow: inset 0 1px 0 #ffffff0d, 0 2px 10px #0000002a; padding: 14px 14px 12px; }
aside#panel .stats div { background: var(--pn-card); border: 1px solid var(--pn-line); border-radius: 12px; }
aside#panel .mset, aside#panel #rList .rec { background: var(--pn-soft); border: 1px solid var(--pn-line); border-radius: var(--pn-r); padding: 4px 12px 10px; margin: 12px 0; }
aside#panel .mset h4 { margin-top: 10px; }
aside#panel .goalbar { background: #ffffff12; border-radius: 6px; }
aside#panel #log div { border-bottom-color: #ffffff0c; }

/* ---------- controls */
aside#panel .row { margin: 8px 0; }
aside#panel .row label { color: var(--muted); font-size: 13px; }
aside#panel select, aside#panel input[type=number], aside#panel input[type=time] { background: color-mix(in srgb, var(--btn) 70%, #000 20%);
  border: 1px solid #ffffff14; border-radius: 10px; padding: 6px 10px; transition: border-color .15s, box-shadow .15s; }
aside#panel select:hover, aside#panel input:hover { border-color: var(--pn-line2); }
aside#panel select:focus-visible, aside#panel input:focus-visible, aside#panel button:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
aside#panel button { border-radius: 10px; transition: background .15s, border-color .15s, transform .08s; }
aside#panel button:active { transform: scale(.98); }
aside#panel button.wide { border-radius: 12px; padding: 10px; }
aside#panel button.big { border-color: var(--pn-line2); box-shadow: 0 3px 12px #0004; }
aside#panel .ctrl button { border-radius: 12px; min-height: 40px; }
aside#panel .chk { padding: 2px 0; }
aside#panel input[type=checkbox], aside#panel input[type=range] { accent-color: var(--gold); }
aside#panel .qs-chk { margin: 0; flex: 1; min-width: 0; }
aside#panel .mset input[type=range] { width: 96px; flex: none; }
#paraGrid button { border-radius: 8px; }

/* ---------- header: same calm feel */
header { box-shadow: 0 2px 12px #0000003a; border-bottom-color: var(--pn-line2); }
header button, header select, header input { border-radius: 10px; }
header button.on { box-shadow: inset 0 -2px 0 var(--gold); }

/* ---------- light theme */
body.light aside#panel .tabs button:not(.on) { color: #eef3ea; }
/* Latin-script names inside an Urdu card keep the system UI font (Naskh's Latin glyphs look out of place) */
.ob-card .qi-native:is([lang=en],[lang=id],[lang=tr],[lang=ms],[lang=fr]), .ob-card .ob-en, .ob-card .ob-count, .rd-num, #rdToday { font-family: "Segoe UI", Tahoma, sans-serif; }