#pageDeriv{--tc-gold:#c9a84c;--tc-cyan:#4ecdc4;--tc-violet:#9b7cdb}
.tc-page{max-width:1180px;margin:0 auto;padding:0 1rem 5rem;direction:rtl}
.tc-header{text-align:center;padding:2.3rem 0 1.6rem}
.tc-kicker{font-family:"Ubuntu Mono",monospace;font-size:.72rem;letter-spacing:.18em;color:var(--text-muted);text-transform:uppercase;margin-bottom:.55rem}
.tc-header h2{font-family:"Amiri",serif;font-size:clamp(2.1rem,4vw,3rem);color:var(--gold-glow);margin:0 0 .45rem;text-shadow:0 0 28px rgba(201,168,76,.22)}
.tc-header p{max-width:680px;margin:0 auto;color:var(--text-sec);font-size:.92rem;line-height:1.9}
.tc-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.08)}
.tc-input-panel{padding:1.5rem 1.7rem;margin-bottom:1.5rem}
.tc-input-block{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.tc-input-block label{font-size:.8rem;color:var(--text-sec);font-weight:700}
.tc-input-row{display:flex;align-items:center;gap:.6rem}
#derivInput{direction:rtl;text-align:center;font-family:"Amiri",serif;font-size:2rem;letter-spacing:.28em;background:var(--bg-input);border:2px solid var(--border-lit);border-radius:12px;color:var(--gold);padding:.55rem .9rem;width:220px;outline:none;transition:.2s;box-sizing:border-box}
#derivInput:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,168,76,.12)}
.tc-clear{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-muted);cursor:pointer}
.tc-clear:hover{border-color:var(--danger);color:var(--danger)}
.tc-examples{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;font-size:.72rem;color:var(--text-muted)}
.tc-examples button{border:1px solid var(--border);background:var(--bg-input);color:var(--text-sec);border-radius:999px;padding:.2rem .65rem;font-family:"Amiri",serif;cursor:pointer}
.tc-examples button:hover{border-color:var(--gold);color:var(--gold)}
.tc-stats{font-family:"Ubuntu Mono",monospace;font-size:.72rem;color:var(--gold);background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.18);border-radius:999px;padding:.25rem .75rem}
.tc-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;border-top:1px solid var(--border);padding-top:1.25rem;margin-top:1.2rem}
.tc-control-group{min-width:0;background:rgba(255,255,255,.018);border:1px solid var(--border);border-radius:13px;padding:.8rem;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.tc-control-title{font-size:.72rem;color:var(--text-muted);font-weight:700}
.tc-button-row{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center}
.tc-vowel,.tc-pos,.tc-reverse{font-family:var(--font-main);border:1px solid var(--border);background:var(--bg-input);color:var(--text-muted);border-radius:9px;cursor:pointer;transition:.15s}
.tc-vowel{font-family:"Amiri",serif;font-size:1.15rem;min-width:46px;padding:.35rem .75rem}
.tc-vowel[data-vowel="ا"].is-on{color:var(--tc-gold);border-color:var(--tc-gold);background:rgba(201,168,76,.13)}
.tc-vowel[data-vowel="و"].is-on{color:var(--tc-cyan);border-color:var(--tc-cyan);background:rgba(78,205,196,.13)}
.tc-vowel[data-vowel="ي"].is-on{color:var(--tc-violet);border-color:var(--tc-violet);background:rgba(155,124,219,.13)}
.tc-pos{padding:.42rem .75rem;font-size:.78rem}
.tc-pos.is-on{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,.12)}
.tc-reverse{display:flex;align-items:center;gap:.65rem;padding:.42rem .8rem;font-size:.78rem}
.tc-switch{width:34px;height:18px;border-radius:999px;background:var(--border);padding:2px;display:block;box-sizing:border-box}
.tc-switch span{width:14px;height:14px;border-radius:50%;background:#888;display:block;transition:.2s}
.tc-reverse.is-on{color:var(--gold);border-color:var(--gold)}
.tc-reverse.is-on .tc-switch{background:var(--gold)}
.tc-reverse.is-on .tc-switch span{transform:translateX(-16px);background:#151515}
.tc-results{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:1.2rem;box-shadow:0 14px 40px rgba(0,0,0,.08)}
.tc-results-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.tc-results-head h3{font-family:"Amiri",serif;color:var(--gold);font-size:1.3rem;margin:0}
.tc-results-head p{font-size:.73rem;color:var(--text-muted);margin:.1rem 0 0}
.tc-count{min-width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(201,168,76,.35);background:rgba(201,168,76,.08);color:var(--gold);font-weight:700}
.tc-result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.6rem}
.tc-result-card{position:relative;min-width:0;border:1px solid color-mix(in srgb,var(--tc-accent) 30%,transparent);background:color-mix(in srgb,var(--tc-accent) 7%,var(--bg-card));border-radius:12px;padding:.72rem .45rem .55rem;cursor:pointer;color:var(--text-pri);transition:.15s;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.tc-result-card:hover{transform:translateY(-3px);border-color:var(--tc-accent);box-shadow:0 8px 22px color-mix(in srgb,var(--tc-accent) 20%,transparent)}
.tc-word{font-family:"Amiri",serif;font-size:1.45rem;font-weight:700;line-height:1.25;white-space:nowrap}
.tc-added{color:var(--tc-accent);text-shadow:0 0 10px color-mix(in srgb,var(--tc-accent) 55%,transparent)}
.tc-root{font-family:"Amiri",serif;font-size:.7rem;color:var(--text-muted)}
.tc-gv{position:absolute;top:.35rem;left:.45rem;font-family:"Ubuntu Mono",monospace;font-size:.56rem;color:var(--tc-accent);opacity:.85}
.tc-summary{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--border)}
.tc-summary span{font-size:.72rem;color:var(--tc-accent);border:1px solid color-mix(in srgb,var(--tc-accent) 28%,transparent);background:color-mix(in srgb,var(--tc-accent) 7%,transparent);border-radius:999px;padding:.25rem .7rem}
.tc-summary .tc-total{--tc-accent:var(--text-sec);color:var(--text-sec)}
.tc-empty{text-align:center;padding:4.5rem 1rem;color:var(--text-muted)}
.tc-empty-icon{width:74px;height:74px;border-radius:22px;margin:0 auto 1rem;display:grid;place-items:center;font-family:"Amiri",serif;font-size:2rem;color:var(--gold);border:1px solid rgba(201,168,76,.25);background:rgba(201,168,76,.06)}
.tc-empty h3{font-family:"Amiri",serif;font-size:1.25rem;margin:0 0 .35rem;color:var(--text-sec)}
.tc-empty p{font-size:.78rem;margin:0 auto;max-width:520px;line-height:1.8}
html[data-theme="light"] .tc-result-card{background:color-mix(in srgb,var(--tc-accent) 8%,#fff)}
@media(max-width:760px){.tc-controls{grid-template-columns:1fr}.tc-input-panel{padding:1.1rem}.tc-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tc-results{padding:.85rem}}
@media(max-width:420px){#derivInput{width:180px;font-size:1.7rem}.tc-input-row{gap:.4rem}.tc-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tc-word{font-size:1.25rem}}