.audio-tool-page{
  --audio:#7c3aed;
  --audio2:#ec4899;
  --ink:#182038;
  --muted:#667085;
  --line:#e8e5f2;
  --surface:#fff;
  background:#f8f7fc;
  color:var(--ink);
  min-height:100vh
}
.audio-wrap{width:min(1120px,calc(100% - 32px));margin:auto}
.audio-hero{padding:70px 0 34px;text-align:center}
.audio-hero .eyebrow{
  display:inline-flex;padding:7px 12px;border-radius:999px;
  background:#eee8ff;color:#6941c6;font-weight:800;font-size:12px
}
.audio-hero h1{font-size:clamp(31px,5vw,54px);margin:15px 0 10px;line-height:1.15}
.audio-hero p{max-width:720px;margin:auto;color:var(--muted);line-height:1.9}
.audio-workspace{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:22px;padding-bottom:80px
}
.audio-card{
  background:#fff;border:1px solid var(--line);border-radius:24px;
  box-shadow:0 16px 44px rgba(38,29,84,.08);padding:24px
}
.audio-drop{
  min-height:245px;border:2px dashed #cfc4ef;border-radius:21px;
  display:grid;place-items:center;text-align:center;padding:25px;
  cursor:pointer;background:linear-gradient(145deg,#fbfaff,#f6f2ff)
}
.audio-drop input{display:none}
.audio-drop-icon{
  width:66px;height:66px;border-radius:20px;display:grid;place-items:center;
  margin:0 auto 14px;background:linear-gradient(135deg,var(--audio),var(--audio2));
  color:#fff;font-size:29px
}
.audio-drop strong{display:block;font-size:18px;margin-bottom:7px}
.audio-drop small{color:var(--muted)}
.audio-files{display:grid;gap:8px;margin-top:14px}
.audio-file{
  padding:11px 13px;border:1px solid var(--line);border-radius:12px;
  display:flex;justify-content:space-between;gap:10px;font-size:13px
}
.audio-player{width:100%;margin-top:16px}
.audio-controls h2{margin:0 0 18px;font-size:20px}
.audio-field{display:grid;gap:7px;margin:0 0 15px}
.audio-field span{font-size:13px;font-weight:800}
.audio-field input,.audio-field select{
  width:100%;box-sizing:border-box;border:1px solid #d9d5e7;
  border-radius:12px;padding:12px;background:#fff;font:inherit
}
.audio-action{
  width:100%;border:0;border-radius:14px;padding:14px 18px;
  font:inherit;font-weight:900;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,var(--audio),var(--audio2))
}
.audio-action:disabled{opacity:.55;cursor:wait}
.audio-reset{
  width:100%;margin-top:9px;border:1px solid var(--line);background:#fff;
  border-radius:12px;padding:11px;font:inherit;font-weight:800;cursor:pointer
}
.audio-status{
  display:none;margin-top:14px;padding:12px;border-radius:12px;
  background:#f0ecff;color:#5534b8;font-size:13px;line-height:1.7
}
.audio-status.visible{display:block}
.audio-privacy{
  margin:16px 0 0;padding:13px;border-radius:13px;background:#f8fafc;
  color:#667085;font-size:12px;line-height:1.7
}
.audio-recorder{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:15px
}
.audio-record-btn{
  flex:1;border:0;border-radius:13px;padding:13px;font:inherit;
  font-weight:900;cursor:pointer
}
.audio-record-start{background:#fee2e2;color:#991b1b}
.audio-record-stop{background:#e8e7ff;color:#4338ca}
.audio-download{
  display:none;margin-top:12px;text-decoration:none;text-align:center;
  border-radius:13px;padding:13px;background:#101828;color:#fff;font-weight:900
}
.audio-download.visible{display:block}
@media(max-width:800px){
  .audio-workspace{grid-template-columns:1fr}
  .audio-hero{padding-top:42px}
  .audio-card{padding:17px;border-radius:19px}
}

/* Audio tool primary CTA text */
.audio-tool-page .tool-hero-actions a:first-child,
.audio-tool-page .audio-action,
.audio-tool-page .audio-action *,
.audio-tool-page .tool-hero-actions a:first-child * {
  color: #fff !important;
}


/* Audio merge file list */
.audio-file-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.audio-file-remove{
  width:28px;
  height:28px;
  border:1px solid #e8e5f2;
  border-radius:9px;
  background:#fff;
  color:#667085;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.audio-file-remove:hover{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#be123c;
}

/* Merge audio playlist preview */
.audio-file{
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.audio-file.is-playing{
  border-color:#8b5cf6;
  background:#faf8ff;
  box-shadow:0 0 0 2px rgba(124,58,237,.08);
}

.audio-file-preview{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  padding:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  text-align:start;
}

.audio-file-play-icon{
  width:27px;
  height:27px;
  border-radius:8px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:#f0ebff;
  color:#6d3be8;
  font-size:12px;
}

.audio-file.is-playing .audio-file-play-icon{
  background:#6d3be8;
  color:#fff;
}

.audio-file-name{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* AI generated voice notice */
.tts-ai-notice{
    display:block;
    margin-top:10px;
    font-size:12px;
    line-height:1.7;
    opacity:.72;
    text-align:center;
}

/* Text to Speech - Download MP3 */
#ttsDownload,
#ttsDownload:link,
#ttsDownload:visited,
#ttsDownload:hover,
#ttsDownload:active,
#ttsDownload:focus,
#ttsDownload * {
    color: #fff !important;
}

/* Vocal remover selected file */
.nujiz-vocal-selected-file{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:14px;
    padding:13px 15px;
    border:1px solid #e4e8f1;
    border-radius:14px;
    background:#f8f9fc;
}

.nujiz-vocal-file-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#f0edff;
    color:#7251f5;
    font-size:21px;
}

.nujiz-vocal-selected-file div{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
}

.nujiz-vocal-selected-file b{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.nujiz-vocal-selected-file small{
    margin-top:3px;
    opacity:.65;
}

.nujiz-vocal-selected-file>strong{
    color:#159267;
    font-size:19px;
}

/* Vocal Remover - fast result notice */
.vocal-speed-notice{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
    margin:0 0 18px;
    border:1px solid rgba(114,81,245,.18);
    border-radius:14px;
    background:rgba(114,81,245,.06);
    line-height:1.7;
}

.vocal-speed-notice-icon{
    flex:0 0 auto;
    font-size:20px;
    line-height:1.4;
}

.vocal-speed-notice strong{
    display:block;
    margin-bottom:2px;
    font-size:14px;
    font-weight:800;
}

.vocal-speed-notice p{
    margin:0;
    font-size:13px;
}

.vocal-speed-notice a{
    color:#7251f5;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:3px;
}

.vocal-speed-notice a:hover{
    text-decoration:none;
}

/* ===== Vocal Remover mobile layout fix ===== */

@media (max-width: 700px){

    /* خلي منطقة الأداة عمود واحد واضح */
    .audio-workspace{
        display:flex !important;
        flex-direction:column !important;
        gap:18px !important;
    }

    .audio-workspace > .audio-card{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    /* منطقة السحب لا تتمدد بسبب الملف المختار */
    .audio-drop{
        display:flex !important;
        min-height:190px !important;
        height:auto !important;
        align-items:center !important;
        justify-content:center !important;
        padding:24px 18px !important;
        margin:0 !important;
        overflow:hidden !important;
    }

    .audio-drop > span{
        width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        text-align:center !important;
    }

    .audio-drop-icon{
        margin:0 auto 8px !important;
    }

    /* بطاقة الملف المختار */
    #audioFiles{
        display:block !important;
        width:100% !important;
        margin:14px 0 0 !important;
        padding:0 !important;
    }

    .nujiz-vocal-selected-file{
        width:100% !important;
        box-sizing:border-box !important;
        margin:0 !important;
        padding:12px 14px !important;
        gap:10px !important;
        border-radius:14px !important;
    }

    .nujiz-vocal-selected-file div{
        min-width:0 !important;
        overflow:hidden !important;
    }

    .nujiz-vocal-selected-file b{
        display:block !important;
        max-width:100% !important;
        overflow:hidden !important;
        white-space:nowrap !important;
        text-overflow:ellipsis !important;
        font-size:14px !important;
    }

    .nujiz-vocal-selected-file small{
        font-size:12px !important;
    }

    /* مشغل الملف الأصلي */
    #audioPlayer{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        margin:12px 0 0 !important;
        box-sizing:border-box !important;
    }

    #audioPlayer[hidden]{
        display:none !important;
    }

    /* نتيجة الفصل */
    #separationResult{
        width:100% !important;
        margin-top:18px !important;
        box-sizing:border-box !important;
    }

    #separationResult audio{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        margin:8px 0 14px !important;
    }

    /* قسم التنبيه */
    .vocal-speed-notice{
        width:100% !important;
        box-sizing:border-box !important;
        margin:0 0 16px !important;
        padding:14px !important;
    }

    /* منع أي overflow أفقي */
    .audio-card,
    .audio-wrap,
    #toolWorkspace{
        overflow-x:hidden !important;
    }

}

/* FINAL vocal remover mobile structure */
@media (max-width:700px){

    .audio-workspace .audio-card{
        padding:16px !important;
        overflow:visible !important;
    }

    .audio-drop{
        width:100% !important;
        min-height:210px !important;
        box-sizing:border-box !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:24px 16px !important;
        margin:0 !important;
    }

    .audio-drop > span{
        width:100% !important;
        max-width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        text-align:center !important;
        position:static !important;
        transform:none !important;
    }

    .audio-drop-icon{
        position:static !important;
        transform:none !important;
        margin:0 auto 10px !important;
    }

    #audioFiles{
        position:static !important;
        width:100% !important;
        margin:14px 0 0 !important;
        transform:none !important;
    }

    .nujiz-vocal-selected-file{
        position:static !important;
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        margin:0 !important;
        display:flex !important;
        align-items:center !important;
    }

    #audioPlayer{
        position:static !important;
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        margin:12px 0 0 !important;
        transform:none !important;
    }

    #audioPlayer[hidden]{
        display:none !important;
    }
}

/* Vocal Remover download buttons */
.vocal-mobile-download{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:50px;
    box-sizing:border-box;
    margin:10px 0 18px;
    padding:12px 16px;
    border-radius:13px;
    background:linear-gradient(90deg,#7434f5,#eb3c95);
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-decoration:none !important;
    font-weight:800;
    text-align:center;
}

.vocal-mobile-download:visited,
.vocal-mobile-download:hover,
.vocal-mobile-download:active{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

@media(max-width:700px){
    .vocal-mobile-download{
        min-height:54px;
        font-size:16px;
        margin-top:10px;
    }
}

/* ===== Vocal Remover result download buttons ===== */

#separationResult .vocal-download-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-height:52px !important;

    box-sizing:border-box !important;

    margin:10px 0 20px !important;
    padding:13px 18px !important;

    border:0 !important;
    border-radius:13px !important;

    background:linear-gradient(
        90deg,
        #7536f5,
        #e83d97
    ) !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;

    font-size:15px !important;
    font-weight:800 !important;

    text-decoration:none !important;

    opacity:1 !important;
    visibility:visible !important;
}

#separationResult .vocal-download-button:link,
#separationResult .vocal-download-button:visited,
#separationResult .vocal-download-button:hover,
#separationResult .vocal-download-button:active{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-decoration:none !important;
}

@media(max-width:700px){

    #separationResult .vocal-download-button{
        min-height:56px !important;
        font-size:16px !important;
        margin:12px 0 22px !important;
    }

}

/* ===== Voice Recorder ===== */

.voice-recorder-wrap{
    max-width:980px;
    margin:0 auto 40px;
    padding:0 18px;
}

.voice-recorder-card{
    background:#fff;
    border:1px solid #e7e9f2;
    border-radius:24px;
    padding:28px;
    box-shadow:0 16px 40px rgba(30,32,70,.08);
}

.voice-recorder-head{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:24px;
}

.voice-recorder-icon{
    width:58px;
    height:58px;
    flex:0 0 58px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(135deg,#7436f5,#e83d98);
    font-size:28px;
}

.voice-recorder-head h2{
    margin:0 0 5px;
    font-size:24px;
}

.voice-recorder-head p{
    margin:0;
    opacity:.7;
    line-height:1.7;
}

.voice-recorder-timer{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:110px;
    margin:20px 0;
    border-radius:20px;
    background:#f7f5ff;
    border:1px dashed #d8d1ff;
    font-size:42px;
    font-weight:900;
    letter-spacing:2px;
}

.voice-recorder-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.voice-recorder-start,
.voice-recorder-stop{
    min-height:54px;
    border:0;
    border-radius:14px;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
}

.voice-recorder-start{
    background:linear-gradient(90deg,#7436f5,#e83d98);
    color:#fff;
}

.voice-recorder-stop{
    background:#111827;
    color:#fff;
}

.voice-recorder-stop:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.voice-recorder-status{
    min-height:24px;
    margin-top:14px;
    text-align:center;
    font-weight:700;
}

.voice-recorder-result{
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid #eceef5;
}

.voice-recorder-result audio{
    width:100%;
    display:block;
    margin-bottom:12px;
}

.voice-recorder-download{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    width:100%;
    border-radius:14px;
    background:#111827;
    color:#fff !important;
    text-decoration:none !important;
    font-weight:800;
}

@media(max-width:700px){

    .voice-recorder-card{
        padding:18px;
        border-radius:20px;
    }

    .voice-recorder-head{
        align-items:flex-start;
    }

    .voice-recorder-head h2{
        font-size:21px;
    }

    .voice-recorder-timer{
        min-height:95px;
        font-size:34px;
    }

    .voice-recorder-actions{
        grid-template-columns:1fr;
    }
}

/* ===== Voice Recorder - Clear Button Text ===== */

/* الأزرار الرئيسية */
#recordStart,
#recordStop,
#recordDownload,
.voice-recorder button,
.voice-recorder .audio-action,
.voice-recorder .audio-download {
    font-weight: 800 !important;
    font-size: 16px !important;
}

/* بدء التسجيل */
#recordStart:not(:disabled) {
    color: #ffffff !important;
}

/* إيقاف */
#recordStop:not(:disabled) {
    color: #ffffff !important;
}

/* تنزيل التسجيل */
#recordDownload:not([disabled]),
#recordDownload[href] {
    color: #ffffff !important;
}

/* أيقونات ونصوص داخل الأزرار */
#recordStart:not(:disabled) *,
#recordStop:not(:disabled) *,
#recordDownload[href] * {
    color: #ffffff !important;
}

/* الزر المعطل */
#recordStart:disabled,
#recordStop:disabled,
#recordDownload:not([href]),
#recordDownload[aria-disabled="true"] {
    color: #5f6673 !important;
    opacity: .72 !important;
}


/* ===== FINAL Voice Recorder Button Colors ===== */

/* بدء التسجيل */
#recordStart,
.voice-recorder-start{
    background:linear-gradient(90deg,#7436f5,#e83d98) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-weight:900 !important;
    opacity:1 !important;
}

#recordStart *,
.voice-recorder-start *{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

/* زر الإيقاف عندما يكون فعال */
#recordStop:not(:disabled),
.voice-recorder-stop:not(:disabled){
    background:#111827 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-weight:900 !important;
    opacity:1 !important;
}

/* زر الإيقاف عندما يكون غير فعال */
#recordStop:disabled,
.voice-recorder-stop:disabled{
    background:#e5e7eb !important;
    color:#374151 !important;
    -webkit-text-fill-color:#374151 !important;
    font-weight:900 !important;
    opacity:1 !important;
}

/* تنزيل التسجيل */
#recordingDownload,
.voice-recorder-download{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#111827 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-weight:900 !important;
    font-size:16px !important;
    opacity:1 !important;
    visibility:visible !important;
    text-decoration:none !important;
}

#recordingDownload:link,
#recordingDownload:visited,
#recordingDownload:hover,
#recordingDownload:active,
.voice-recorder-download:link,
.voice-recorder-download:visited,
.voice-recorder-download:hover,
.voice-recorder-download:active{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

/* منع أي قاعدة عامة من تغيير لون النص */
#toolWorkspace #recordStart,
#toolWorkspace #recordStop:not(:disabled),
#toolWorkspace #recordingDownload{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

#toolWorkspace #recordStop:disabled{
    color:#374151 !important;
    -webkit-text-fill-color:#374151 !important;
}