:root{--primary: #2c3e50;--secondary: #3498db;--accent: #e74c3c;--light: #ecf0f1;--dark: #2c3e50;--success: #27ae60;--warning: #f39c12;--error: #e74c3c;--arabic-font: "Traditional Arabic", "Arial Unicode MS", sans-serif;--base-font: "Segoe UI", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--base-font);line-height:1.6;color:var(--dark);background-color:#f9f9f9;min-height:100vh}.app{max-width:1200px;margin:0 auto;padding:2rem 1rem;display:flex;flex-direction:column;min-height:100vh}.header{text-align:center;margin-bottom:2rem;padding:1.5rem;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000000d}.header h1{color:var(--primary);font-size:2.2rem;margin-bottom:.5rem}.search-container{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.search-box{display:flex;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a}.search-input{flex:1;padding:1rem 1.5rem;font-size:1.1rem;border:none;border:1px solid #ddd;font-family:var(--arabic-font);text-align:right;direction:rtl}.search-input:focus{outline:none;border-color:var(--secondary)}.search-button{padding:0 2rem;background-color:var(--secondary);color:#fff;border:none;cursor:pointer;font-weight:700;transition:background .2s}.search-button:hover{background-color:#2980b9}.results-container{flex:1}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.results-count{font-size:.9rem;color:#7f8c8d}.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem}.entry-card{background:white;border-radius:8px;padding:1.5rem;box-shadow:0 2px 6px #0000000d;transition:transform .2s,box-shadow .2s}.entry-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.arabic-word{font-size:2rem;text-align:right;font-family:var(--arabic-font);line-height:1.4;margin-bottom:1rem;color:var(--primary)}.morph-details{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1rem}.detail-item{display:flex;flex-direction:column}.detail-label{font-size:.8rem;color:#7f8c8d;margin-bottom:.25rem}.detail-value{font-weight:500}.segments{border-top:1px solid #eee;padding-top:1rem;font-size:.9rem}.segment{display:flex;margin-bottom:.5rem}.segment-type{font-weight:500;min-width:80px;color:#7f8c8d}.location{margin-top:1rem;font-size:.85rem;color:#95a5a6;text-align:right;cursor:pointer;color:#3498db;text-decoration:underline}.location:hover{color:#2980b9}.status-message{padding:3rem 2rem;text-align:center;background:white;border-radius:8px;box-shadow:0 2px 6px #0000000d}.loading{color:var(--secondary)}.error-message{color:var(--error)}.empty-message{color:#7f8c8d}.verse-display{margin-top:2rem;padding:1.5rem;background:#f8f9fa;border-radius:8px;border-left:4px solid #3498db}.verse-text{font-size:1.5rem;line-height:2.5rem;font-family:var(--arabic-font);text-align:right;margin-top:1rem}@media (max-width: 768px){.app{padding:1rem}.header h1{font-size:1.8rem}.search-box{flex-direction:column}.search-input{width:100%}.search-button{width:100%;padding:1rem}.results-grid,.morph-details{grid-template-columns:1fr}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.entry-card{animation:fadeIn .3s ease-out forwards;opacity:0}.entry-card:nth-child(1){animation-delay:.1s}.entry-card:nth-child(2){animation-delay:.2s}.entry-card:nth-child(3){animation-delay:.3s}.rtl{direction:rtl;text-align:right}.ltr{direction:ltr;text-align:left}.text-center{text-align:center}.hidden{display:none}@media print{.search-container{display:none}.entry-card{break-inside:avoid;box-shadow:none;border:1px solid #ddd;margin-bottom:1rem}}.location-row{display:flex;align-items:center;gap:.75rem;direction:rtl;margin-top:.5rem}.verse-inline{margin-left:auto;font-family:var(--arabic-font);font-weight:600;color:var(--dark);background:#f0f4f8;padding:.25rem .5rem;border-radius:6px;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.8}@media (max-width: 768px){.verse-inline{max-width:100%}}.result-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid #ccc}.verse-ref{font-weight:700;color:#006400;text-decoration:none;white-space:nowrap}.verse-ref:hover{text-decoration:underline}.verse-text{flex:1;direction:rtl;text-align:right;line-height:1.8}.hl-stem{color:#3498db!important;font-weight:700!important}