/* NoorQuran admin dashboard. Uses the shared design tokens. */
body{min-height:100vh;background:var(--bg);color:var(--text)}
#login-screen{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;background:radial-gradient(circle at top,color-mix(in srgb,var(--accent) 16%,transparent),transparent 34%),var(--bg)}
#login-screen.hide{display:none}
.login-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);margin-bottom:4px}
.login-title{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:850;letter-spacing:-.03em;text-align:center}
.login-sub{max-width:420px;text-align:center;color:var(--text-muted);line-height:1.6}
.login-form{width:min(420px,100%);display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:22px}
.login-field{display:flex;flex-direction:column;gap:8px}
.login-label,.form-label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-soft)}
.login-input,.hash-input,.form-input,.don-code{width:100%;background:var(--surface-soft);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-md);outline:none}
.login-input,.hash-input,.form-input{min-height:46px;padding:0 14px}
.login-input:focus,.hash-input:focus,.form-input:focus,.don-code:focus{border-color:var(--accent)}
.login-input::placeholder,.hash-input::placeholder,.form-input::placeholder{color:var(--text-soft)}
.login-btn,.hash-generate,.save-btn,.logout-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--radius-md);border:1px solid var(--accent);background:var(--accent);color:#061113;font-weight:800;cursor:pointer;text-decoration:none;transition:background .18s,border-color .18s,color .18s,transform .18s}
.login-btn:hover,.hash-generate:hover,.save-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.login-btn:disabled{opacity:.55;cursor:not-allowed}
.login-err{display:none;color:#e46969;font-size:.9rem;text-align:center;line-height:1.5}
.login-err.show{display:block}
.admin-help,.hash-desc,.hash-warning,.form-hint,.don-help,.security-note-text,.admin-note{color:var(--text-muted);line-height:1.6;font-size:.88rem}
.admin-help strong,.hash-desc code,.hash-code,.don-help code,.security-note code{color:var(--accent)}
#app{display:none;min-height:100vh;padding-bottom:0!important}
#app.show{display:grid;grid-template-columns:280px minmax(0,1fr)}
aside{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
.aside-logo{padding:22px;border-bottom:1px solid var(--border)}
.nav-item{display:flex;align-items:center;gap:12px;margin:6px 12px;padding:12px 14px;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;border:1px solid transparent;transition:background .18s,border-color .18s,color .18s}
.nav-item:hover{background:var(--surface-soft);color:var(--text)}
.nav-item.on{background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-color:var(--accent);color:var(--accent)}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px}
.aside-footer{margin-top:auto;padding:16px;border-top:1px solid var(--border);display:grid;gap:10px}
.logout-btn{background:var(--surface-soft);border-color:var(--border);color:var(--text)}
.logout-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
main{min-width:0;overflow:auto;padding:28px var(--space-page) 56px}
.page{display:none;max-width:1180px}
.page.on{display:block}
.page-title{display:flex;align-items:center;gap:10px;font-size:clamp(1.4rem,3vw,2rem);font-weight:850;letter-spacing:-.03em;margin-bottom:24px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:22px}
.stat-card,.chart-wrap,.top-list,.don-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}
.stat-card{padding:18px;text-align:left}
.stat-val{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:850;color:var(--accent);line-height:1}
.stat-lbl{margin-top:8px;color:var(--text-muted);font-size:.88rem}
.stat-trend{margin-top:10px;font-size:.82rem}
.trend-up{color:var(--accent-hover)}
.trend-down{color:#e46969}
.chart-wrap{padding:18px;margin-bottom:18px}
.chart-title,.top-list-title,.don-title,.don-preview-title,.security-note-title{font-size:.82rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:var(--text-soft)}
.chart-title{margin-bottom:16px}
.bar-chart{height:140px;display:flex;align-items:flex-end;gap:8px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bar{width:100%;min-height:4px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--accent),var(--accent-hover))}
.bar-lbl{font-size:.76rem;color:var(--text-muted)}
.top-grids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.top-list{overflow:hidden}
.top-list-title{padding:14px 16px;border-bottom:1px solid var(--border)}
.top-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.top-item:last-child{border-bottom:0}
.top-rank{width:30px;height:30px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--surface-soft);color:var(--accent);font-weight:800}
.top-name{flex:1;color:var(--text);min-width:0}
.top-val{color:var(--text-muted);font-size:.86rem}
.top-bar-bg{width:90px;height:6px;border-radius:999px;background:var(--bg-soft);overflow:hidden}
.top-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-hover))}
.admin-note{padding:12px 0}
.subs-panel{margin-top:16px}
.subs-list{max-height:300px;overflow-y:auto;padding:4px 0}
.subs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;border-bottom:1px solid var(--border);font-size:.9rem}
.subs-row:last-child{border-bottom:0}
.subs-email{color:var(--text);word-break:break-all}
.subs-date{color:var(--text-soft);white-space:nowrap;font-size:.82rem}
.subs-empty{padding:16px;color:var(--text-muted);font-size:.88rem}
.subs-actions{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--border)}
.subs-actions .save-btn{margin-top:0}
.admin-spacer{height:10px}
.don-card{padding:20px;margin-bottom:18px;max-width:760px}
.don-title{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--text)}
.form-row{margin-bottom:16px}
.form-label{display:block;margin-bottom:8px}
.form-hint{font-size:.8rem;margin-top:6px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--border)}
.toggle-lbl{color:var(--text)}
.tog{width:46px;height:26px;border:1px solid var(--border);background:var(--surface-soft);border-radius:999px;position:relative;cursor:pointer;flex:0 0 auto}
.tog-k{position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--text-muted);transition:transform .2s,background .2s}
.tog.on{background:color-mix(in srgb,var(--accent) 26%,var(--surface));border-color:var(--accent)}
.tog.on .tog-k{transform:translateX(20px);background:var(--accent)}
.save-btn{margin-top:6px}
.save-btn-gap{margin-top:10px}
.save-confirm{display:none;margin-left:10px;color:var(--accent-hover);font-weight:800}
.save-confirm.show{display:inline}
.don-code{height:150px;padding:14px;resize:vertical;font-family:Consolas,monospace;font-size:.82rem;line-height:1.5}
.don-preview{margin-top:18px;padding:16px;background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-lg)}
.don-preview-title{margin-bottom:12px}
.don-preview-widget{padding:18px;text-align:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.don-ar{font-family:var(--font-arabic);font-size:1.6rem;color:var(--accent);margin-bottom:6px}
.don-msg{color:var(--text-muted);margin-bottom:12px}
.don-btns-preview{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.don-btn-p{border-radius:999px;padding:8px 14px;font-size:.85rem;color:#fff}
.don-btn-wave{background:#108ac2}
.don-btn-orange{background:#d96a12}
.don-btn-paypal{background:#164a9a}
.don-empty{color:var(--text-muted);font-size:.88rem}
.quick-links{display:grid;gap:10px}
.quick-link{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--border);background:var(--surface-soft);border-radius:var(--radius-md);text-decoration:none;color:var(--text)}
.quick-link:hover{border-color:var(--accent);color:var(--accent)}
.quick-link-primary{border-color:var(--accent)}
.security-note{margin-top:18px;padding:16px;background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md)}
.security-note-title{color:var(--accent);margin-bottom:6px}
.mob-nav{display:none}
@media(max-width:820px){
  #app.show{display:block}
  aside{display:none}
  main{padding:22px 16px 96px}
  .mob-nav{display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:1px solid var(--border);padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));box-shadow:var(--shadow-soft)}
  .mob-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-muted);font-size:.76rem;cursor:pointer}
  .mob-nav-item.on{color:var(--accent)}
  .mob-nav-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px}
  .top-grids{grid-template-columns:1fr}
  .don-card{max-width:none}
}
@media(max-width:560px){
  .login-form{padding:18px}
  .stat-grid{grid-template-columns:1fr}
  .top-item{align-items:flex-start;flex-wrap:wrap}
  .top-bar-bg{width:100%}
  .save-confirm{display:block;margin:10px 0 0}
}