/* Focused, static login surface. Shared display styles stay on the display pages. */
body { background: radial-gradient(ellipse at 15% 0%, #17483e 0, transparent 55%), #071e1a; padding: 28px 24px 48px; }
.portal-container { max-width: 1060px; }
.portal-brand { display:flex; align-items:center; gap:10px; width:100%; text-align:left; font-size:23px; font-weight:600; margin-bottom:36px; }
.brand-mark { color:#e5c158; font-size:32px; }
.portal-brand > span:last-child { margin-left:auto; font-size:11px; letter-spacing:2px; color:#a6c2b9; }
.login-box-wrapper { max-width:520px; padding:28px 36px; background:#0d3028; border:1px solid #325348; border-radius:20px; box-shadow:0 24px 64px #0003; }
.login-top-nav-row { margin-bottom:28px; }
.login-left-nav-group { width:100%; justify-content:space-between; }
.login-quick-links { width:100%; justify-content:center; flex-wrap:wrap; margin-top:8px; order:2; }
.back-btn, .home-nav-btn { background:transparent; border-color:#456256; box-shadow:none; min-height:40px; border-radius:8px; font-weight:500; }
.login-action-pill { border-radius:6px; font-weight:500; font-size:12px; min-height:36px; }
.logo-badge { width:64px; height:64px; border:1px solid #bbad74; box-shadow:none; background:#193e32; margin-bottom:18px; }
.login-heading { font-size:26px; font-weight:600; line-height:1.2; overflow-wrap:anywhere; }
.login-sub-title { font-size:14px; margin-top:10px; margin-bottom:28px; line-height:1.6; }
label { text-transform:none; letter-spacing:0; font-size:14px; font-weight:500; color:#eef4ef; margin-bottom:9px; }
input[type=text], input[type=password] { font-size:16px; min-height:50px; background:#08251f; border:1px solid #527165; border-radius:9px; }
input::placeholder { color:#9db7ac; opacity:1; }
input[type=text]:focus, input[type=password]:focus { background:#08251f; box-shadow:0 0 0 3px #e5c15824; }
#usernameHint { line-height:1.6; margin-top:8px !important; }
#password { padding-right:58px !important; }
#toggleAdminPasswordBtn { width:44px; height:44px; right:4px !important; border-radius:6px; }
.btn-login { min-height:52px; background:#e5c158; border:0; color:#122b22; text-transform:none; letter-spacing:0; font-weight:600; box-shadow:none; border-radius:9px; }
.btn-login:hover { background:#f1d37b; color:#122b22; box-shadow:0 4px 18px #0002; transform:none; }
.btn-login:disabled { cursor:wait; opacity:.65; transform:none; }
.login-status:empty { display:none; }
.login-status, .caps-notice { margin-top:10px; font-size:13px; color:#e8cb7b; }
.super-link-box { line-height:1.8; font-size:12px; }
.login-box-wrapper .super-link-box > a { display:none !important; }
.tv-masjid-bismillah { font-family:'Scheherazade New',serif; text-shadow:none; margin-top:28px; }
.tv-masjid-title { font-size:36px; font-weight:600; letter-spacing:-1px; }
.tv-masjid-title > span:first-child { display:none; }
.tv-masjid-subtitle { margin-top:12px; font-size:15px; }
.admin-badge-pill { box-shadow:none; border:0; background:transparent; font-size:11px; }
.masjid-filter-bar { margin-top:28px; background:#0d3028; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; border:1px solid #325348; padding:16px; border-radius:14px; }
.masjid-filter-field { background:#08251f; border-color:#527165; border-radius:8px; min-height:48px; }
.masjid-search-field { flex-basis:100%; order:-1; }
.masjid-search-field input { min-height:30px; border:0; background:transparent; box-shadow:none; padding:0; }
.masjid-search-field input:focus { background:transparent; box-shadow:none; }
.masjid-filter-field:focus-within { box-shadow:0 0 0 3px #e5c15824; }
.masjid-search-clear { min-width:36px; min-height:36px; }
.tv-masjid-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%, 270px),1fr)); }
.tv-masjid-card { border:1px solid #325348; background:#0d3028; border-radius:14px; box-shadow:none; transition:background .15s, border-color .15s; }
.tv-masjid-card:hover { transform:none; background:#153c31; border-color:#cbb568; box-shadow:none; }
.tv-masjid-card-name { white-space:normal; overflow-wrap:anywhere; }
.tv-masjid-card-logo-wrap { box-shadow:none; }
.admin-card-badge { background:transparent; border:0; padding-left:0; text-transform:none; letter-spacing:0; }
.directory-error { grid-column:1/-1; padding:30px; border:1px solid #527165; border-radius:14px; }
.directory-error p { margin:12px 0 20px; color:#b8d5cb; line-height:1.6; }
:is(a,button,input,select,[role=button]):focus-visible { outline:3px solid #f1d37b; outline-offset:4px; }
@media (max-width:600px) {
  body { padding:18px 14px 32px; }
  .portal-brand { margin-bottom:22px; font-size:21px; }
  .portal-brand > span:last-child { font-size:9px; letter-spacing:1px; }
  .login-box-wrapper { padding:22px 20px; border-radius:16px; }
  .login-heading { font-size:23px; }
  .login-selector-top-row { justify-content:center; }
  .admin-badge-pill { display:none; }
  .tv-masjid-title { font-size:29px; }
  .masjid-filter-controls { gap:10px; }
  .masjid-filter-field { flex-basis:100%; }
  .login-action-pill { font-size:11px; padding:6px 8px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* Directory workspace: stationary navigation and filters; independently scrolling cards. */
body { isolation:isolate; }
.portal-container { max-width:1160px; }
.portal-brand { flex-shrink:0; margin-bottom:20px; }
.brand-home { display:inline-flex; align-items:center; gap:10px; color:#f6f5e9; text-decoration:none; }
.brand-tools { display:flex; align-items:center; gap:18px; margin-left:auto; }
.brand-tools > span { font-size:10px; letter-spacing:2px; color:#a9c3b7; }
#toggleBackgroundMotion { width:36px; height:36px; border:1px solid #496254; border-radius:50%; background:#102e26; color:#e5c158; cursor:pointer; font-size:15px; }
.asma-backdrop { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.asma-half-circle { position:absolute; width:1000px; height:1000px; right:-500px; top:50%; transform:translateY(-50%); opacity:.42; }
.asma-half-circle .islamic-asmaul-husna-rotating { width:100%; height:100%; opacity:1; transform-origin:50% 50%; animation:asma-orbit 280s linear infinite; }
@keyframes asma-orbit { to { transform:rotate(360deg); } }
.motion-paused .islamic-asmaul-husna-rotating, .page-hidden .islamic-asmaul-husna-rotating { animation-play-state:paused; }
html[data-initial-view=selector] body { height:100dvh; overflow:hidden; padding:22px 28px 20px; }
html[data-initial-view=selector] .portal-container { height:100%; min-height:0; }
html[data-initial-view=selector] #masjidSelectorView { display:flex !important; flex-direction:column; flex:1; min-height:0; animation:none; }
.directory-header { flex-shrink:0; text-align:left; }
.directory-intro { position:relative; padding:10px 0 10px; }
.portal-eyebrow { font-size:10px; letter-spacing:2px; color:#c5b679; margin:0 0 10px; }
.tv-masjid-bismillah { position:absolute; right:10px; top:12px; font-size:30px; margin:0; opacity:.9; }
.tv-masjid-title { display:block; text-align:left; font-size:clamp(28px,3vw,40px); line-height:1.15; letter-spacing:-1.2px; margin:0; }
.tv-masjid-title > span:first-child { display:inline; color:#e5c158; }
.tv-masjid-subtitle { text-align:left; padding:0; margin:12px 0 10px; color:#b1c8bb; font-size:14px; }
.masjid-filter-bar { max-width:none; padding:0; background:transparent; border:0; margin:12px 0 22px; }
.masjid-filter-controls { display:grid; grid-template-columns:minmax(200px,2fr) minmax(145px,1fr) minmax(145px,1fr); gap:12px; }
.masjid-filter-field { min-height:48px; background:#102f28; border:1px solid #486454; padding:8px 14px; }
.masjid-search-field { order:0; }
.masjid-filter-select { font-weight:400; font-size:14px; min-width:0; }
.masjid-search-input { min-width:0; }
.directory-section { display:flex; flex-direction:column; flex:1; min-height:0; width:100%; border:1px solid #456052; border-radius:18px; background:#09271fee; box-shadow:0 15px 45px #0002; overflow:hidden; }
.directory-section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:20px 24px 16px; flex-shrink:0; text-align:left; }
.directory-section-heading > div { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.directory-section-heading h2 { color:#f1f3eb; font-size:18px; font-weight:500; }
.masjid-count-pill { font-size:12px; padding:0; border:0; background:none; color:#a8bfb2; font-weight:400; }
.directory-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#6a806a transparent; padding:4px 24px 20px; scrollbar-gutter:stable; }
.directory-scroll:focus-visible { outline:2px solid #e5c158; outline-offset:-3px; }
.tv-masjid-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:14px; margin:0; }
.tv-masjid-card { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:start; gap:14px; min-width:0; padding:20px 18px 0; font-family:inherit; color:#edf3eb; background:linear-gradient(145deg,#173d31,#102e25); border:1px solid #3b5b48; border-radius:12px; backdrop-filter:none; -webkit-backdrop-filter:none; content-visibility:auto; contain-intrinsic-size:auto 180px; }
.tv-masjid-card:hover, .tv-masjid-card:focus-visible { background:linear-gradient(145deg,#224d3d,#173a2d); border-color:#d4be70; transform:none; box-shadow:0 6px 20px #0002; }
.tv-masjid-card-logo-wrap { width:54px; height:54px; border-radius:14px; border:1px solid #7c8059; background:#ebeee2; padding:5px; margin-top:3px; }
.tv-masjid-card-logo-img { border-radius:10px; }
.masjid-card-slug { display:block; color:#aabdac; font-size:11px; letter-spacing:.4px; margin-bottom:7px; overflow-wrap:anywhere; }
.tv-masjid-card-name { font-weight:500; font-size:18px; line-height:1.3; margin-bottom:8px; white-space:normal; }
.tv-masjid-card-meta { gap:5px; font-size:12px; line-height:1.5; font-weight:400; color:#b7cabc; }
.tv-masjid-location-pill { max-width:none; white-space:normal; }
.tv-masjid-country-pill::before { content:'·'; margin-right:5px; }
.masjid-card-footer { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid #47634a80; padding:13px 0; margin-top:2px; }
.masjid-card-footer > span:first-child { font-size:11px; color:#a7bfae; font-weight:400; }
.tv-masjid-card-action { font-size:13px; color:#efcf79; font-weight:500; }
.tv-masjid-card:hover .tv-masjid-card-action { transform:none; }
.tv-masjid-card-action > span { display:inline-block; margin-left:5px; }
.directory-footer { display:flex; justify-content:space-between; gap:12px; flex-shrink:0; padding:13px 24px; border-top:1px solid #365142; font-size:11px; color:#a4bcad; }
.directory-footer a { color:#dfca87; text-decoration:none; }
.directory-loading { grid-column:1/-1; padding:40px; color:#b8d5cb; }
@media (max-width:1000px) {
  .tv-masjid-bismillah { position:static; font-size:25px; text-align:left; margin:0 0 10px; }
  .tv-masjid-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .asma-half-circle { width:850px; height:850px; right:-425px; }
}
@media (max-width:600px) {
  html[data-initial-view=selector] body { padding:12px 12px 10px; }
  .portal-brand { margin-bottom:12px; }
  .brand-tools { gap:10px; }
  .brand-tools > span { display:none; }
  .directory-intro { padding:0; }
  .tv-masjid-bismillah { font-size:23px; margin-bottom:7px; }
  .portal-eyebrow { display:none; }
  .tv-masjid-title { font-size:27px; line-height:1.12; letter-spacing:-.7px; }
  .tv-masjid-title > span { display:block !important; }
  .tv-masjid-subtitle { font-size:12px; margin:8px 0 0; max-width:270px; }
  .masjid-filter-bar { margin:12px 0; }
  .masjid-filter-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  .masjid-search-field { grid-column:1/-1; }
  .masjid-filter-field { padding:6px 10px; min-height:42px; }
  .masjid-filter-select { font-size:12px; }
  .directory-section { border-radius:14px; }
  .directory-section-heading { padding:14px 14px 12px; }
  .directory-section-heading > div { display:block; }
  .directory-section-heading h2 { font-size:16px; margin-bottom:3px; }
  .directory-scroll { padding:2px 12px 14px; }
  .tv-masjid-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  .tv-masjid-card { padding:16px 14px 0; gap:12px; }
  .tv-masjid-card-name { font-size:17px; }
  .directory-footer { padding:11px 14px; justify-content:center; }
  .directory-footer > span { display:none; }
  .asma-half-circle { width:700px; height:700px; right:-410px; opacity:.3; }
}
@media (max-height:650px) {
  html[data-initial-view=selector] .portal-brand { margin-bottom:8px; }
  .directory-intro { padding:0; }
  .tv-masjid-bismillah, .portal-eyebrow, .tv-masjid-subtitle { display:none; }
  .tv-masjid-title { font-size:24px; }
  .tv-masjid-title > span { display:inline !important; }
  .masjid-filter-bar { margin:10px 0; }
  .directory-section-heading { padding:10px 14px; }
}
@media (max-height:420px) {
  html[data-initial-view=selector] body { height:auto; min-height:100dvh; overflow:auto; }
  .directory-scroll { max-height:60vh; min-height:180px; }
}
@media (prefers-reduced-motion:reduce) {
  .asma-half-circle .islamic-asmaul-husna-rotating { animation:none !important; }
  #toggleBackgroundMotion { display:none; }
}