/* ═══════════════════════════════════════════════════════════
   AudioCutter AI · v3.0 · style.css
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#0e0e0f; --bg2:#161618; --bg3:#1e1e21;
  --border:#2e2e33; --border2:#3a3a40;
  --text:#e8e4dc; --text2:#9e9a93;
  --accent:#c8a96e; --accent2:#e8c87a;
  --green:#5a8a5a; --red:#8a4040;
  --shadow:rgba(0,0,0,0.6);
}
[data-theme="light"]{
  --bg:#f5f1e8; --bg2:#ebe6da; --bg3:#ffffff;
  --border:#d4cdb8; --border2:#b8ad8e;
  --text:#2a2620; --text2:#6a6356;
  --accent:#8b6a30; --accent2:#a07d3a;
  --green:#4a7a4a; --red:#8a3a3a;
  --shadow:rgba(0,0,0,0.15);
}
*{box-sizing:border-box;margin:0;padding:0}
html[data-lang="ar"] body{font-family:'Amiri',serif}
html[data-lang="en"] body{font-family:'EB Garamond',serif}
body{
  background:var(--bg); color:var(--text);
  min-height:100vh; display:flex; flex-direction:column;
  transition:background .35s ease, color .35s ease;
  overflow-x:hidden;
}

/* ─── Header ─── */
header{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 32px; border-bottom:1px solid var(--border);
  background:var(--bg2);
}
.brand{display:flex; align-items:center; gap:12px;
  font-size:22px; font-weight:700; color:var(--accent); letter-spacing:.5px}
.brand .logo{width:36px; height:36px; border:1.5px solid var(--accent);
  border-radius:50%; display:grid; place-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:14px}
.brand .ver{font-size:12px; color:var(--text2); margin-inline-start:6px;
  font-family:'IBM Plex Mono',monospace}
.controls{display:flex; gap:10px}
.ctrl-btn{background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:6px;
  padding:8px 16px; cursor:pointer; font-size:14px;
  transition:all .2s; font-family:inherit}
.ctrl-btn:hover{border-color:var(--accent); color:var(--accent)}

/* ─── Main ─── */
main{flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:40px 20px; gap:28px}
.stage{width:100%; max-width:760px; display:none; animation:fadeIn .5s}
.stage.stage-wide{max-width:920px}
.stage.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}}

.stage-title{text-align:center; font-size:28px; color:var(--accent);
  margin-bottom:8px; letter-spacing:.5px}
.stage-sub{text-align:center; color:var(--text2); margin-bottom:24px; font-size:15px}

/* ─── Dropzone ─── */
.dropzone{border:2px dashed var(--border2); border-radius:14px;
  padding:60px 30px; text-align:center; cursor:pointer;
  transition:all .3s; background:var(--bg2)}
.dropzone:hover, .dropzone.dragover{
  border-color:var(--accent); background:var(--bg3); transform:scale(1.01)}
.up-arrow{width:64px; height:64px; margin:0 auto 16px;
  border:2px solid var(--accent); border-radius:50%;
  display:grid; place-items:center; font-size:28px; color:var(--accent);
  transition:transform .3s}
.dropzone:hover .up-arrow{transform:translateY(-4px)}
.dz-title{font-size:20px; margin-bottom:6px}
.dz-sub{color:var(--text2); font-size:14px}
.dz-formats{margin-top:14px; color:var(--text2); font-size:12px;
  font-family:'IBM Plex Mono',monospace}
#fileInput{display:none}
.file-info{margin-top:18px; padding:14px 18px; background:var(--bg3);
  border:1px solid var(--border); border-radius:8px; display:none}
.file-info.show{display:block}
.file-info .name{color:var(--accent); font-weight:600; margin-bottom:6px}
.file-info .meta{display:flex; flex-wrap:wrap; gap:10px;
  font-size:12px; color:var(--text2);
  font-family:'IBM Plex Mono',monospace; margin-top:6px}
.badge{padding:3px 9px; border-radius:12px; border:1px solid var(--border2);
  background:var(--bg2)}
.badge.video{color:#7aa3d4; border-color:#7aa3d4}
.badge.audio{color:var(--accent2); border-color:var(--accent2)}
.badge.warn{color:#d4a07a; border-color:#d4a07a}

/* ─── Options grid ─── */
.opts-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px}
.opt-card{background:var(--bg2); border:1.5px solid var(--border);
  border-radius:10px; padding:18px; cursor:pointer;
  transition:all .25s; user-select:none; position:relative}
.opt-card:hover{border-color:var(--border2)}
.opt-card.selected{border-color:var(--accent); background:var(--bg3);
  box-shadow:0 0 0 2px rgba(200,169,110,.15)}
.opt-card.selected::after{content:"✓"; position:absolute; top:10px;
  inset-inline-end:14px; color:var(--accent); font-weight:bold}
.opt-card .icon{font-size:26px; margin-bottom:8px}
.opt-card .title{font-size:16px; color:var(--accent); margin-bottom:4px; font-weight:600}
.opt-card .desc{font-size:13px; color:var(--text2); line-height:1.5}

.preset-row{display:flex; gap:8px; justify-content:center;
  margin-bottom:18px; flex-wrap:wrap}
.preset-btn{padding:6px 14px; font-size:13px; background:var(--bg2);
  border:1px solid var(--border); color:var(--text2);
  border-radius:18px; cursor:pointer; font-family:inherit; transition:all .2s}
.preset-btn:hover{color:var(--accent); border-color:var(--accent)}

/* ─── Effects grid ─── */
.fx-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px; margin-bottom:24px}
.fx-card{background:var(--bg2); border:1.5px solid var(--border);
  border-radius:10px; padding:14px 10px; text-align:center;
  cursor:pointer; transition:all .2s; user-select:none}
.fx-card:hover{border-color:var(--border2); transform:translateY(-2px)}
.fx-card.selected{border-color:var(--accent); background:var(--bg3);
  box-shadow:0 0 0 2px rgba(200,169,110,.18); transform:translateY(-3px)}
.fx-card .ic{font-size:34px; margin-bottom:8px}
.fx-card .nm{font-size:14px; color:var(--accent); font-weight:600; margin-bottom:4px}
.fx-card .ds{font-size:11px; color:var(--text2); line-height:1.4}

/* ─── Buttons ─── */
.actions{display:flex; gap:12px; justify-content:center; margin-top:8px; flex-wrap:wrap}
.btn{padding:12px 32px; font-size:15px; background:var(--accent); color:var(--bg);
  border:none; border-radius:8px; cursor:pointer; font-family:inherit;
  font-weight:600; transition:all .2s}
.btn:hover{background:var(--accent2); transform:translateY(-1px)}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); background:transparent}

/* ─── Excellent ─── */
.excellent{text-align:center; padding:40px 0; position:relative}
.excellent .big{font-size:64px; color:var(--accent); margin-bottom:12px;
  letter-spacing:2px; animation:popin .6s cubic-bezier(.18,1.2,.4,1)}
.excellent .sub{color:var(--text2); font-size:15px}
@keyframes popin{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

/* ─── Progress ─── */
.progress-wrap{padding:20px 0}
.progress-bar{height:6px; background:var(--bg3); border-radius:3px;
  overflow:hidden; border:1px solid var(--border)}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2));
  width:0%; transition:width .4s ease}
.progress-msg{text-align:center; margin-top:14px; color:var(--text2); font-size:14px}
.progress-pct{text-align:center; color:var(--accent); font-size:22px; margin-bottom:18px}

/* ─── Game box ─── */
.game-box{margin-top:22px; background:var(--bg2);
  border:1px solid var(--border); border-radius:12px; padding:18px}
.game-head{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px; color:var(--accent); font-weight:600; font-size:15px}
.game-score{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--text2)}
.game-score b{color:var(--accent)}
#snakeCanvas{display:block; margin:0 auto; background:#0a0a0c;
  border-radius:8px; max-width:100%; height:auto;
  border:1px solid var(--border); image-rendering:pixelated}
[data-theme="light"] #snakeCanvas{background:#e8e1cf}
.game-foot{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap;
  align-items:center; justify-content:center}
.game-hint{font-size:12px; color:var(--text2);
  font-family:'IBM Plex Mono',monospace}

/* ─── Jokes ─── */
.joke-box{margin-top:20px; padding:18px; background:var(--bg2);
  border:1px solid var(--border); border-radius:10px;
  text-align:center; min-height:80px;
  display:flex; align-items:center; justify-content:center}
.joke-text{font-size:15px; line-height:1.7; color:var(--text);
  font-style:italic; transition:opacity .5s}

/* ─── Done ─── */
.done-stage{text-align:center; padding:30px 0}
.check-big{width:140px; height:140px; margin:0 auto 20px;
  border:3px solid var(--green); border-radius:50%;
  display:grid; place-items:center; font-size:78px; color:var(--green);
  animation:popin .6s cubic-bezier(.18,1.2,.4,1)}
.done-title{font-size:30px; color:var(--accent); margin-bottom:8px}
.done-joke{margin:18px auto; max-width:520px; color:var(--text2);
  font-size:15px; line-height:1.7; padding:16px; background:var(--bg2);
  border-radius:8px; border:1px solid var(--border)}

/* ─── Waveform ─── */
.wave-box{margin:20px auto; max-width:560px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; padding:12px; min-height:70px;
  display:flex; align-items:center; justify-content:center; gap:1px}
.wave-bar{display:inline-block; width:3px; min-height:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  border-radius:1.5px; transition:height .3s}

/* ─── Error ─── */
.err-box{max-width:520px; margin:0 auto; padding:18px;
  border:1px solid var(--red); background:var(--bg2);
  border-radius:8px; color:var(--text); font-size:14px;
  line-height:1.7; text-align:center}
.err-icon{font-size:48px; color:var(--red); margin-bottom:10px}

/* ─── Stars animation ─── */
.stars-container{position:fixed; inset:0; pointer-events:none;
  z-index:1000; overflow:hidden}
@keyframes flyStar{
  0%{transform:translate(0,0) scale(0) rotate(0); opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(540deg); opacity:0}
}
.fly-star{position:absolute; font-size:24px;
  animation:flyStar 1.2s ease-out forwards}

/* ─── Toast ─── */
.toast{position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--bg3); border:1px solid var(--accent); color:var(--text);
  padding:12px 22px; border-radius:8px; font-size:14px;
  box-shadow:0 6px 22px var(--shadow); opacity:0;
  transition:all .35s; z-index:2000; max-width:90%; text-align:center}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1}
.toast.err{border-color:var(--red); color:#ffb4b4}

/* ─── Modal (BrowserQuest) ─── */
.modal{position:fixed; inset:0; background:rgba(0,0,0,0.78);
  display:none; align-items:center; justify-content:center; z-index:3000}
.modal.show{display:flex}
.modal-inner{width:92%; max-width:1100px; height:88vh;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; display:flex; flex-direction:column; overflow:hidden}
.modal-head{display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px; border-bottom:1px solid var(--border);
  color:var(--accent); font-weight:600}
.modal-foot{padding:10px 18px; border-top:1px solid var(--border);
  color:var(--text2); font-size:12px; line-height:1.5}
#bqFrame{flex:1; border:none; background:#000; width:100%}

/* ─── Mobile ─── */
@media (max-width:600px){
  header{padding:14px 18px}
  .brand{font-size:18px}
  .opts-grid{grid-template-columns:1fr}
  .stage-title{font-size:22px}
  .excellent .big{font-size:48px}
  .fx-grid{grid-template-columns:repeat(2,1fr)}
}