/* ====================================================================
   GETAXS Quran Video Studio — style.css
   Night theme, gold accents. Full RTL/LTR support. Mobile-first.
   The exported video area (.stage) stays clean: NO site logo, NO
   dedication text inside it — those live only in the page UI.
   ==================================================================== */

:root{
  --night-0:#070a1c;
  --night-1:#0c1130;
  --night-2:#141a44;
  --night-3:#1c2350;
  --gold:#d8b878;
  --gold-bright:#f0d398;
  --gold-deep:#a9853f;
  --cream:#f3ecda;
  --muted:#9aa0c4;
  --line:rgba(216,184,120,.22);
  --line-soft:rgba(255,255,255,.06);
  --card:rgba(255,255,255,.035);
  --card-2:rgba(255,255,255,.06);
  --accent:#3f8f8f;
  --accent-bright:#5fb8b8;
  --danger:#c46a6a;
  --ui-ar:'Cairo',sans-serif;
  --ui-lat:'Jost',sans-serif;
  --display:'Cormorant Garamond',serif;
  --verse-base:clamp(1.25rem,4.6vw,2.6rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%,rgba(63,143,143,.16),transparent 60%),
    radial-gradient(ellipse 60% 60% at 95% 110%,rgba(216,184,120,.09),transparent 60%),
    linear-gradient(165deg,var(--night-1),var(--night-0));
  background-attachment:fixed;
  color:var(--cream);
  font-family:var(--ui-ar);
  min-height:100%;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
body.lat{font-family:var(--ui-lat)}
::selection{background:rgba(216,184,120,.3)}

/* scrollbars */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--night-0)}
::-webkit-scrollbar-thumb{background:var(--night-3);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}

/* ============ TOP BAR ============ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 22px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  background:rgba(7,10,28,.72);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:60;
}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{
  width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;font-size:23px;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold-deep));
  box-shadow:0 6px 22px rgba(216,184,120,.32);
}
.brand .titles h1{
  font-family:var(--display);font-size:1.4rem;font-weight:600;
  letter-spacing:.3px;line-height:1.05;color:var(--cream);
}
.brand .titles .tag{font-size:.74rem;color:var(--muted);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.lang-bar{display:flex;gap:5px}
.lang-bar button{
  background:var(--card);border:1px solid var(--line);color:var(--muted);
  border-radius:9px;padding:7px 11px;font-size:.78rem;cursor:pointer;
  font-family:inherit;transition:.16s;
}
.lang-bar button:hover{color:var(--cream);border-color:var(--gold)}
.lang-bar button.active{
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  color:var(--night-0);border-color:var(--gold);font-weight:700;
}
.about-btn{
  background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:9px;padding:7px 13px;font-size:.8rem;cursor:pointer;
  font-family:inherit;transition:.16s;display:flex;align-items:center;gap:6px;
}
.about-btn:hover{color:var(--gold-bright);border-color:var(--gold)}

/* ============ LAYOUT ============ */
.wrap{
  display:grid;grid-template-columns:360px 1fr;gap:22px;
  padding:22px;max-width:1400px;margin:0 auto;
}
@media(max-width:920px){.wrap{grid-template-columns:1fr;padding:14px;gap:16px}}

/* ============ PANEL ============ */
.panel{
  background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:20px;align-self:start;
}
.panel-title{
  font-family:var(--display);font-size:1.15rem;font-weight:600;
  color:var(--gold-bright);margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field-label{
  display:block;font-size:.78rem;color:var(--gold);
  margin-bottom:7px;font-weight:600;letter-spacing:.3px;
}
.hint-sm{font-size:.7rem;color:var(--muted);margin-top:4px}

select,input[type=file]{
  width:100%;background:var(--night-2);
  border:1px solid var(--line);color:var(--cream);
  border-radius:11px;padding:10px 11px;font-size:.85rem;
  font-family:inherit;cursor:pointer;transition:.15s;
}
select:focus{outline:none;border-color:var(--gold)}
select:hover{border-color:rgba(216,184,120,.45)}
input[type=file]{padding:8px;font-size:.78rem;color:var(--muted)}
input[type=file]::-webkit-file-upload-button{
  background:var(--night-3);color:var(--cream);border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;font-family:inherit;cursor:pointer;
  margin-inline-end:8px;
}
.upload-name{font-size:.72rem;color:var(--accent-bright);margin-top:5px;word-break:break-all}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* chips */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  background:var(--night-2);border:1px solid var(--line);color:var(--muted);
  border-radius:20px;padding:6px 13px;font-size:.76rem;cursor:pointer;
  font-family:inherit;transition:.15s;white-space:nowrap;
}
.chip:hover{color:var(--cream);border-color:rgba(216,184,120,.4)}
.chip.active{
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  color:var(--night-0);border-color:var(--gold);font-weight:700;
}
.chip.mini{padding:5px 10px;font-size:.7rem}

/* background grid */
.bg-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-top:9px;max-height:260px;overflow-y:auto;padding-inline-end:4px;
}
.bg-cell{
  position:relative;aspect-ratio:16/10;border-radius:10px;cursor:pointer;
  border:2px solid transparent;overflow:hidden;transition:.15s;
}
.bg-cell:hover{transform:translateY(-2px)}
.bg-cell.active{border-color:var(--gold-bright);box-shadow:0 0 0 1px var(--gold-bright)}
.bg-label{
  position:absolute;inset-inline:0;bottom:0;
  font-size:.6rem;color:#fff;text-align:center;padding:3px 2px;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
  line-height:1.2;
}

/* swatches */
.swatches{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.swatch{
  width:32px;height:32px;border-radius:9px;cursor:pointer;
  border:2px solid transparent;transition:.14s;
}
.swatch:hover{transform:scale(1.1)}
.swatch.active{border-color:var(--cream);transform:scale(1.12);
  box-shadow:0 0 0 1px var(--night-0),0 0 10px rgba(255,255,255,.2)}

/* range */
input[type=range]{
  width:100%;-webkit-appearance:none;appearance:none;height:6px;
  border-radius:6px;background:var(--night-3);outline:none;margin-top:6px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;
  border-radius:50%;cursor:pointer;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold-deep));
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border:none;border-radius:50%;cursor:pointer;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold-deep));
}

/* toggles */
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--line-soft);gap:10px;
}
.toggle-row:last-child{border-bottom:none}
.toggle-row span{font-size:.82rem}
.tg{
  width:46px;height:25px;border-radius:20px;flex-shrink:0;
  background:var(--night-3);border:1px solid var(--line);
  cursor:pointer;position:relative;transition:.2s;
}
.tg::after{
  content:"";position:absolute;width:19px;height:19px;border-radius:50%;
  background:var(--muted);top:2px;inset-inline-start:2px;transition:.2s;
}
.tg.on{background:linear-gradient(145deg,var(--gold),var(--gold-deep));border-color:var(--gold)}
.tg.on::after{background:var(--night-0);inset-inline-start:23px}

/* segmented toggles (aspect / speed / quality) */
.seg{
  display:flex;gap:4px;background:var(--night-2);
  border:1px solid var(--line);border-radius:11px;padding:3px;
}
.seg button{
  flex:1;background:none;border:none;color:var(--muted);
  padding:8px 6px;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:.76rem;transition:.15s;
}
.seg button:hover{color:var(--cream)}
.seg button.active{
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  color:var(--night-0);font-weight:700;
}

/* ============ STAGE AREA ============ */
.stage-area{display:flex;flex-direction:column;gap:14px;min-width:0}

.transport{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  border:none;border-radius:12px;cursor:pointer;font-family:inherit;
  font-weight:700;font-size:.86rem;padding:12px 20px;transition:.16s;
  display:flex;align-items:center;gap:8px;
}
.btn-primary{
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  color:var(--night-0);box-shadow:0 6px 18px rgba(216,184,120,.3);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary.playing{
  background:linear-gradient(145deg,var(--accent-bright),var(--accent));
  color:#04201f;
}
.btn-ghost{background:var(--card-2);border:1px solid var(--line);color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright)}
.btn-export{
  background:linear-gradient(145deg,var(--accent-bright),var(--accent));
  color:#04201f;box-shadow:0 6px 18px rgba(63,143,143,.3);
}
.btn-export:hover{transform:translateY(-2px)}

.aspect-toggle{margin-inline-start:auto;width:auto;min-width:160px}
.aspect-toggle button{padding:8px 12px}

/* stage host */
.stage-host{
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 13px,transparent 13px 26px),
    var(--night-0);
  border:1px solid var(--line);border-radius:18px;padding:24px;
  min-height:420px;
}
.stage{
  position:relative;overflow:hidden;border-radius:10px;
  box-shadow:0 26px 64px rgba(0,0,0,.62);
  background:#000;line-height:0;
}
.stage.landscape{width:100%;max-width:760px;aspect-ratio:16/9}
.stage.portrait{height:600px;aspect-ratio:9/16}
@media(max-width:520px){
  .stage.portrait{height:auto;width:100%;max-width:330px}
}
#sceneCanvas{
  display:block;width:100%;height:100%;
}

/* fullscreen: the host fills the screen, canvas centered */
.stage-host:fullscreen,
.stage-host:-webkit-full-screen{
  background:#000;padding:0;border:none;border-radius:0;
}
.stage-host:fullscreen .stage,
.stage-host:-webkit-full-screen .stage{
  max-width:100vw;max-height:100vh;border-radius:0;box-shadow:none;
}
.stage-host:fullscreen .stage.landscape,
.stage-host:-webkit-full-screen .stage.landscape{
  width:min(100vw,177.7vh);
}
.stage-host:fullscreen .stage.portrait,
.stage-host:-webkit-full-screen .stage.portrait{
  height:100vh;width:auto;
}
/* iOS Safari fallback maximized mode */
.stage-host.fs-fallback{
  position:fixed;inset:0;z-index:500;background:#000;
  padding:0;border-radius:0;border:none;
  display:grid;place-items:center;
}
/* progress */
.progress-wrap{
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.status{font-size:.76rem;color:var(--accent-bright);min-width:84px;font-weight:600}
.bar{flex:1;min-width:120px;height:7px;background:var(--night-3);
  border-radius:7px;overflow:hidden}
.bar-fill{height:100%;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transition:width .25s linear}
.counter{font-size:.78rem;color:var(--muted);white-space:nowrap}

/* export row */
.export-row{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.export-note{
  font-size:.72rem;color:var(--muted);line-height:1.6;
  background:rgba(63,143,143,.1);border:1px solid rgba(63,143,143,.3);
  border-radius:11px;padding:10px 13px;
}
.tools-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
@media(max-width:520px){.tools-grid{grid-template-columns:1fr}}
.tool-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:13px;
}
.tool-card .tc-title{
  font-size:.76rem;color:var(--gold);font-weight:600;margin-bottom:8px;
}

/* ============ MODALS ============ */
.overlay{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(4,6,18,.86);backdrop-filter:blur(7px);padding:22px;
}
.overlay.show{display:grid}
.modal{
  background:linear-gradient(165deg,var(--night-2),var(--night-1));
  border:1px solid var(--line);border-radius:22px;
  max-width:620px;width:100%;padding:30px;
  max-height:86vh;overflow:auto;
}
.modal h3{font-family:var(--display);font-size:1.55rem;
  color:var(--gold-bright);margin-bottom:6px}
.modal h4{font-size:.92rem;color:var(--gold);margin:18px 0 9px;
  font-weight:700}
.modal p{font-size:.86rem;color:var(--cream);line-height:1.78;margin-bottom:10px}
.multi-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;margin-bottom:9px;
}
.multi-lang{font-size:.66rem;color:var(--gold);letter-spacing:1px;
  margin-bottom:5px;font-weight:700;text-transform:uppercase}
.multi-txt{font-size:.82rem;line-height:1.72;color:var(--cream)}
.modal-close{
  margin-top:14px;width:100%;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  color:var(--night-0);border:none;border-radius:12px;padding:12px;
  font-weight:700;cursor:pointer;font-family:inherit;font-size:.9rem;
}
.record-step{
  background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;margin-bottom:9px;
  font-size:.83rem;line-height:1.7;color:var(--cream);
}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--line);margin-top:14px;
  padding:24px 22px;text-align:center;
}
.footer-free{font-size:.8rem;color:var(--gold);margin-bottom:8px;font-weight:600}
.footer-dedication{
  font-size:.74rem;color:var(--muted);line-height:1.6;
  max-width:640px;margin:0 auto 8px;
}
.footer-brand{font-size:.72rem;color:var(--muted)}
.footer-brand b{color:var(--gold-bright)}

/* small helpers */
.spin{
  display:inline-block;width:13px;height:13px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);border-top-color:var(--gold-bright);
  animation:spin .8s linear infinite;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- reciter test button ---- */
.test-btn{
  margin-top:8px;width:100%;
  background:var(--card-2);border:1px solid var(--line);color:var(--cream);
  border-radius:10px;padding:9px;font-family:inherit;font-size:.8rem;
  cursor:pointer;transition:.15s;display:flex;align-items:center;
  justify-content:center;gap:7px;
}
.test-btn:hover{border-color:var(--gold);color:var(--gold-bright)}
.test-btn:disabled{opacity:.6;cursor:wait}
.test-result{
  margin-top:7px;font-size:.78rem;text-align:center;
  min-height:1.1em;font-weight:600;
}
.test-result.ok{color:#5fc98a}
.test-result.bad{color:var(--danger)}
.test-result.testing{color:var(--accent-bright)}

/* ---- save settings button ---- */
.btn-save{
  background:linear-gradient(145deg,#6a8fd8,#3f5fa9);
  color:#fff;box-shadow:0 6px 18px rgba(63,95,169,.3);
}
.btn-save:hover{transform:translateY(-2px)}

/* ---- custom file-upload button (replaces browser default) ---- */
.file-row{display:flex;gap:8px;align-items:center}
.file-btn{
  background:var(--night-3);color:var(--cream);
  border:1px solid var(--line);border-radius:10px;
  padding:9px 14px;font-family:inherit;font-size:.8rem;
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.file-btn:hover{border-color:var(--gold);color:var(--gold-bright)}
.file-chosen{font-size:.74rem;color:var(--accent-bright);word-break:break-all}
.hidden-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* toast for save confirmation */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  color:var(--night-0);font-weight:700;font-size:.86rem;
  padding:12px 22px;border-radius:30px;z-index:300;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}