/* Sirât themed styles (hotfix 3) */
:root {
  --bg: #080b09;
  --panel: #0d1210;
  --accent: #00ff88;
  --accent2: #7df3c9;
  --text: #e8f5ed;
  --muted: #a9b8b0;
  --border: #1a2a22;
}
.sirat-wrap { max-width: 720px; margin: 0 auto; padding: 12px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient(1200px 600px at 50% -20%, #0b1712 0%, var(--bg) 60%); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.sirat-header { text-align:center; margin-bottom: 10px; }
.sirat-logo { width: 120px; height: auto; margin: 8px auto 4px; display:block; filter: drop-shadow(0 2px 6px rgba(0,255,136,0.35)); }
.sirat-video-area { position: relative; width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-top: 10px; min-height: 220px; }
#siratVideo { width: 100%; height: auto; transform: scaleX(-1); opacity: 0.18; }
#siratCanvas { position: absolute; left:0; top:0; width:100%; height:100%; }
.sirat-status { position:absolute; left:0; right:0; top:50%; transform: translateY(-50%); text-align:center; color:#cde7da; font-weight:600; pointer-events:none; }
.sirat-controls, .sirat-audio, .sirat-record { display:flex; gap:10px; align-items:center; justify-content:center; margin:12px 0; flex-wrap: wrap; }
#bpmLabel { font-weight: 700; color: var(--text); background: rgba(0,0,0,0.25); padding:6px 10px; border-radius: 10px; border: 1px solid var(--border); }
button { padding:10px 14px; border-radius:10px; border:1px solid var(--border); background: var(--panel); color: var(--text); cursor:pointer; transition: transform .08s ease, box-shadow .2s; }
button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
button:active { transform: translateY(0); }
button:disabled { opacity:0.55; cursor:not-allowed; }
.btn-primary { border-color: #0f3; background: linear-gradient(180deg, rgba(0,255,136,.22), rgba(0,0,0,.1)); box-shadow: inset 0 0 12px rgba(0,255,136,.18); }
.btn-secondary { border-color: #0cf3e3; background: linear-gradient(180deg, rgba(0,243,227,.16), rgba(0,0,0,.08)); box-shadow: inset 0 0 12px rgba(0,243,227,.12); }
.btn-ghost { background: transparent; }
.btn-link { color: var(--accent2); text-decoration: none; border-bottom: 1px dashed var(--accent2); padding: 6px 8px; border-radius: 8px; }
.sirat-disclaimer { font-size: 12px; color: var(--muted); text-align:center; margin-top: 10px; }