.sp-page{background:var(--bg-dark);height:100vh;color:var(--text-primary);overflow-y:auto}.sp-shell{flex-direction:column;gap:1.5rem;max-width:860px;margin:0 auto;padding:1.5rem 1.25rem 4rem;display:flex}.sp-topbar{z-index:20;background:color-mix(in srgb, var(--bg-dark) 85%, transparent);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);position:sticky;top:0}.sp-header{max-width:860px;min-height:calc(var(--header-height) - 1px);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin:0 auto;padding:0 1.25rem;display:flex}.sp-brand{color:var(--text-primary);font-size:var(--brand-size);letter-spacing:-.025em;align-items:center;gap:.75rem;font-weight:700;text-decoration:none;display:flex}.sp-brand-name{background:linear-gradient(to right, var(--text-primary), var(--primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.sp-nav{flex-wrap:wrap;gap:.5rem;display:flex}.sp-nav a,.sp-pager a,.sp-cta{border:1px solid var(--border-color);background:var(--surface-raised);color:var(--text-primary);border-radius:8px;align-items:center;gap:.35rem;padding:.6rem 1rem;font-size:.9rem;text-decoration:none;display:inline-flex}.sp-nav a:hover,.sp-pager a:hover{border-color:var(--primary)}.sp-cta{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:700}.sp-breadcrumb{color:var(--text-muted);font-size:.85rem}.sp-breadcrumb a{color:var(--text-secondary);text-decoration:none}.sp-hero{background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;flex-direction:column;gap:.75rem;padding:1.75rem;display:flex}.sp-hero h1{font-size:1.9rem;line-height:1.25}.sp-hero-arabic{font-family:var(--font-arabic);color:var(--accent);direction:rtl;font-size:2.2rem}.sp-hero p{color:var(--text-secondary);line-height:1.6}.sp-facts{flex-wrap:wrap;gap:.5rem;display:flex}.sp-facts span{border:1px solid var(--border-color);color:var(--text-secondary);border-radius:4px;padding:.25rem .6rem;font-size:.8rem}.sp-bismillah{text-align:center;font-family:var(--font-arabic);direction:rtl;font-size:2rem}.sp-verse{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;gap:1rem;padding:1.5rem;scroll-margin-top:6rem;display:flex}.sp-verse:target{border-color:var(--accent)}.sp-verse h2{color:var(--accent);justify-content:space-between;gap:1rem;font-size:.95rem;display:flex}.sp-verse h2 a{color:inherit;text-decoration:none}.sp-verse h2 small{color:var(--text-muted);font-weight:500}.sp-arabic{font-family:var(--font-arabic);text-align:right;direction:rtl;font-size:2rem;line-height:2}.sp-label{letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.25rem;font-size:.72rem;font-weight:700;display:block}.sp-transliteration{color:var(--text-secondary);font-style:italic;line-height:1.6}.sp-meal{font-size:1.05rem;line-height:1.7}.sp-pager{flex-wrap:wrap;justify-content:space-between;gap:1rem;display:flex}.sp-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-auto-rows:1fr;gap:.75rem;list-style:none;display:grid}.sp-list li{min-width:0;display:flex}.sp-list a{background:var(--bg-card);border:1px solid var(--border-color);min-width:0;color:var(--text-primary);border-radius:10px;flex:1;align-items:center;gap:.85rem;padding:.85rem 1rem;text-decoration:none;transition:border-color .15s,background .15s;display:flex}.sp-list a:hover{border-color:var(--primary);background:var(--bg-card-hover)}.sp-list .sp-num{background:var(--surface-raised);width:2.1rem;height:2.1rem;color:var(--text-secondary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;font-weight:600;display:flex}.sp-list a:hover .sp-num{background:var(--primary);color:var(--on-primary)}.sp-list .sp-name{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-weight:600;overflow:hidden}.sp-list .sp-name small{color:var(--text-muted);text-overflow:ellipsis;font-size:.78rem;font-weight:400;display:block;overflow:hidden}.sp-list .sp-ar{font-family:var(--font-arabic);color:var(--accent);white-space:nowrap;flex-shrink:0;font-size:1.35rem}.sp-short{display:none}@media (max-width:600px){.sp-header{flex-wrap:nowrap;gap:.5rem;min-height:55px;padding:0 .75rem}.sp-nav{flex-wrap:nowrap;gap:.35rem}.sp-nav a,.sp-theme-toggle{white-space:nowrap;padding:.5rem .7rem;font-size:.85rem}.sp-long{display:none}.sp-short{display:inline}.sp-verse{scroll-margin-top:4.5rem}.sp-hero h1{font-size:1.5rem}.sp-arabic{font-size:1.6rem}.sp-verse{padding:1.1rem}}@media (max-width:400px){.sp-brand-name{display:none}}.sp-theme-toggle{border:1px solid var(--border-color);background:var(--surface-raised);min-width:2.4rem;color:var(--text-primary);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:.6rem .8rem;font-size:.95rem;display:inline-flex}.sp-theme-toggle:hover{border-color:var(--primary)}.sp-nav a,.sp-theme-toggle{height:39px;font-family:inherit;line-height:1}@media (max-width:600px){.sp-nav a,.sp-theme-toggle{height:36px}}