/* Rajiun Tools v1.0.0 — uses theme CSS variables with safe fallbacks */
.rj-tool{
  background:var(--card,#fff);
  border:1px solid var(--line,#DDD9CC);
  border-radius:var(--radius,10px);
  padding:1.4em;margin:2em 0;
}

/* ============ CARD MAKER ============ */
.rj-cardmaker{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}
@media (max-width:760px){.rj-cardmaker{grid-template-columns:1fr}}
.rj-controls{display:flex;flex-direction:column;gap:14px}
.rj-controls label{display:flex;flex-direction:column;gap:5px;font-size:.95rem}
.rj-controls label > span{
  font-family:var(--font-display,Georgia,serif);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sage,#7E9486);
}
.rj-controls select,.rj-controls input[type="text"],.rj-controls textarea{
  font:inherit;padding:.55em .7em;border:1px solid var(--line,#DDD9CC);
  border-radius:8px;background:var(--bg,#F6F5F0);color:var(--ink,#26302B);width:100%;
}
.rj-controls textarea{resize:vertical}
.rj-check{flex-direction:row !important;align-items:center;gap:9px !important}
.rj-check > span{letter-spacing:0 !important;text-transform:none !important;font-size:.9rem !important;color:var(--ink,#26302B) !important;font-family:var(--font-body,Georgia,serif) !important}
.rj-btn{
  font-family:var(--font-display,Georgia,serif);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--mihrab,#14332A);color:#EFE9DA;border:1px solid var(--mihrab,#14332A);
  border-radius:8px;padding:.7em 1.4em;cursor:pointer;
}
.rj-btn:hover{background:var(--mihrab-soft,#1E4438);border-color:var(--zar,#B08D3F)}
[data-theme="dark"] .rj-btn{background:var(--zar,#C9AE6E);color:#0E1A15;border-color:var(--zar,#C9AE6E)}
.rj-btn-ghost{background:transparent;color:var(--ink,#26302B);border-color:var(--line,#DDD9CC)}
[data-theme="dark"] .rj-btn-ghost{background:transparent;color:var(--ink,#E9E5D8)}
.rj-preview canvas{
  width:100%;height:auto;display:block;border:1px solid var(--line,#DDD9CC);border-radius:6px;
  max-height:640px;object-fit:contain;background:var(--bg-soft,#EFEDE5);
}

/* ============ TASBIH ============ */
.rj-tasbih{max-width:380px;margin-left:auto;margin-right:auto;text-align:center}
.rj-tasbih-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:1.2em}
.rj-tasbih-head label{display:flex;flex-direction:column;gap:5px;text-align:left;font-size:.95rem}
.rj-tasbih-head label > span{
  font-family:var(--font-display,Georgia,serif);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sage,#7E9486);
}
.rj-tasbih-head select{font:inherit;padding:.45em .6em;border:1px solid var(--line,#DDD9CC);border-radius:8px;background:var(--bg,#F6F5F0);color:var(--ink,#26302B)}
.rj-tasbih-pad{
  position:relative;width:230px;height:230px;margin:0 auto;border-radius:50%;
  background:var(--bg-soft,#EFEDE5);border:1px solid var(--line,#DDD9CC);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  -webkit-tap-highlight-color:transparent;user-select:none;transition:transform .06s ease;
}
.rj-tasbih-pad:active{transform:scale(.97)}
.rj-tasbih-pad svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);transform:rotate(-90deg)}
.rj-ring-bg{fill:none;stroke:var(--line,#DDD9CC);stroke-width:5}
.rj-ring-fg{fill:none;stroke:var(--zar,#B08D3F);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .18s ease}
.rj-count{font-family:var(--font-display,Georgia,serif);font-size:3.2rem;color:var(--ink,#26302B);line-height:1;position:relative}
.rj-tap-hint{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sage,#7E9486);position:relative}
.rj-tasbih-note{margin:.9em 0 0;color:var(--ink-soft,#5C6A62);font-size:.95rem;min-height:1.4em}
.rj-complete .rj-tasbih-pad{border-color:var(--zar,#B08D3F)}
.rj-complete .rj-count{color:var(--zar,#B08D3F)}

/* ============ PRONUNCIATION ============ */
.rj-audio-label{font-family:var(--font-display,Georgia,serif);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--sage,#7E9486);margin:0 0 .8em}
.rj-audio audio{margin-bottom:1em}
.rj-syllables{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.rj-syl{
  font-family:var(--font-body,Georgia,serif);font-size:1.02rem;
  border:1px solid var(--line,#DDD9CC);background:var(--bg,#F6F5F0);color:var(--ink,#26302B);
  border-radius:999px;padding:.4em .85em;cursor:pointer;transition:all .15s ease;
}
.rj-syl:hover{border-color:var(--zar,#B08D3F)}
.rj-syl-done{background:var(--mihrab,#14332A);color:#EFE9DA;border-color:var(--mihrab,#14332A)}
[data-theme="dark"] .rj-syl-done{background:var(--zar,#C9AE6E);color:#0E1A15;border-color:var(--zar,#C9AE6E)}
.rj-syl-nudge{border-color:#b3543f;transform:translateX(2px)}
.rj-syl-hint{text-align:center;font-size:.85rem;color:var(--ink-soft,#5C6A62);margin:1em 0 0}

@media (prefers-reduced-motion:reduce){
  .rj-tool *{transition:none !important}
}

/* phrase header on counter pages */
.rj-tasbih-phrase{text-align:center;margin-bottom:1.3em;padding-bottom:1.1em;border-bottom:1px dashed var(--line,#DDD9CC)}
.rj-tasbih-ar{font-family:var(--font-arabic,'Amiri',serif);font-size:1.9rem;line-height:1.9;margin:0 0 .2em;color:var(--ink,#26302B)}
.rj-tasbih-translit{font-style:italic;color:var(--ink-soft,#5C6A62);margin:0 0 .15em;font-size:.98rem}
.rj-tasbih-meaning{color:var(--sage,#7E9486);margin:0;font-size:.9rem}