.audio-clip-editor-page { width: min(100%, 1040px); margin: 0 auto; padding: 24px 0 72px; }
.audio-clip-editor-hero { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 58px); border: 1px solid rgba(255, 207, 104, .3); border-radius: 24px; background: radial-gradient(circle at 90% 10%, rgba(255, 185, 70, .2), transparent 32%), linear-gradient(135deg, #242016 0%, #0d0e12 70%); box-shadow: 0 20px 60px rgba(0, 0, 0, .24); }
.audio-clip-editor-eyebrow { margin: 0 0 12px; color: #ffd175; font-size: 11px; font-weight: 850; letter-spacing: .13em; }
.audio-clip-editor-hero h1 { max-width: 720px; margin: 0; color: #fffdf8; font-size: clamp(30px, 5vw, 54px); line-height: 1.06; letter-spacing: -.045em; }
.audio-clip-editor-hero > p:not(.audio-clip-editor-eyebrow) { max-width: 650px; margin: 18px 0 0; color: #d7d0bd; font-size: 16px; line-height: 1.7; }
.audio-clip-editor-trust { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 23px 0 0; list-style: none; }
.audio-clip-editor-trust li { padding: 8px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #fff6de; background: rgba(255,255,255,.055); font-size: 12px; font-weight: 700; }
.audio-clip-editor-workbench { margin-top: 22px; padding: clamp(18px, 4vw, 34px); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: #111116; }
.audio-clip-upload { position: relative; display: grid; min-height: 220px; place-items: center; border: 1px dashed rgba(255, 204, 95, .44); border-radius: 18px; background: radial-gradient(circle at 50% 0%, rgba(242, 177, 63, .10), transparent 58%), rgba(255,255,255,.015); transition: border-color .18s ease, background .18s ease; }
.audio-clip-upload.is-dragover { border-color: #ffe280; background: rgba(255, 199, 69, .1); }
.audio-clip-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.audio-clip-upload-label { display: grid; gap: 10px; place-items: center; max-width: 430px; padding: 30px; color: #aeb3b9; text-align: center; cursor: pointer; }
.audio-clip-upload-label strong { color: #fff9e9; font-size: 17px; }
.audio-clip-upload-label > span:last-child { font-size: 13px; line-height: 1.55; }
.audio-clip-upload-icon { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid rgba(255, 210, 107, .45); border-radius: 18px; color: #ffdd83; background: rgba(255, 196, 64, .12); }
.audio-clip-upload-note { margin: -10px 0 17px; color: #949ca5; font-size: 12px; line-height: 1.6; text-align: center; }
.audio-clip-editor { display: grid; gap: 20px; margin-top: 24px; padding: clamp(16px, 3vw, 28px); border: 1px solid rgba(255,255,255,.1); border-radius: 19px; background: #0c0d11; }
.audio-clip-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.audio-clip-editor-heading > div { min-width: 0; }
.audio-clip-editor-heading span { display: block; color: #ffd276; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.audio-clip-editor-heading h2 { overflow-wrap: anywhere; margin: 7px 0 0; color: #f7f8fa; font-size: clamp(18px, 2.5vw, 25px); letter-spacing: -.03em; }
.audio-clip-text-button { flex: 0 0 auto; min-height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: #e5e8eb; background: rgba(255,255,255,.04); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.audio-clip-meta { display: flex; flex-wrap: wrap; gap: 9px; }
.audio-clip-meta span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; color: #9da6ae; background: rgba(255,255,255,.025); font-size: 12px; }
.audio-clip-meta b { color: #f7f7f4; font-weight: 750; }
.audio-clip-waveform-wrap { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: linear-gradient(180deg, #12131a, #08090d); }
.audio-clip-waveform-stage { position: relative; }
.audio-clip-waveform { position: relative; z-index: 1; display: block; width: 100%; height: 248px; touch-action: none; }
.audio-clip-playhead { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 248px; pointer-events: none; }
.audio-clip-waveform-legend { display: flex; justify-content: space-between; gap: 12px; padding: 10px 13px 12px; border-top: 1px solid rgba(255,255,255,.08); color: #a6adb5; font-size: 12px; }
.audio-clip-waveform-legend > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.audio-clip-waveform-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: rgba(255, 201, 68, .8); }
.audio-clip-controls-grid { display: grid; grid-template-columns: repeat(3, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.audio-clip-field { display: grid; gap: 8px; min-width: 0; }
.audio-clip-field > span { display: flex; justify-content: space-between; gap: 8px; color: #f1f3f5; font-size: 13px; font-weight: 750; }
.audio-clip-field output { color: #ffdf8d; font-weight: 850; white-space: nowrap; }
.audio-clip-field input[type="range"] { width: 100%; min-width: 0; accent-color: #ffd633; }
.audio-clip-field input[type="number"], .audio-clip-field select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; outline: none; color: #f4f5f5; background: #101116; font: inherit; font-size: 13px; }
.audio-clip-field input:focus, .audio-clip-field select:focus { border-color: #ffdc76; box-shadow: 0 0 0 3px rgba(255, 191, 54, .13); }
.audio-clip-field small { color: #929aa3; font-size: 11px; line-height: 1.5; }
.audio-clip-field--range { grid-template-columns: minmax(0, 1fr) 96px; align-items: end; }
.audio-clip-field--range > span { grid-column: 1 / -1; }
.audio-clip-field--range input[type="range"] { grid-column: 1; }
.audio-clip-field--range input[type="number"] { grid-column: 2; }
.audio-clip-transport { display: grid; grid-template-columns: minmax(290px, auto) minmax(240px, 1fr); align-items: end; gap: 16px; padding: 14px; border: 1px solid rgba(102, 213, 174, .2); border-radius: 14px; background: linear-gradient(135deg, rgba(60, 168, 124, .1), rgba(255,255,255,.025)); }
.audio-clip-transport-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.audio-clip-transport-primary { min-height: 44px; padding: 0 16px; border: 1px solid #7ce6bd; border-radius: 10px; color: #072017; background: linear-gradient(135deg, #8df0c4, #52cfa0); box-shadow: 0 8px 20px rgba(63, 203, 145, .14); font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; transition: transform .18s ease, opacity .18s ease; }
.audio-clip-transport-primary:hover { transform: translateY(-1px); }
.audio-clip-transport-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.audio-clip-playback-position { display: grid; gap: 8px; min-width: 0; }
.audio-clip-playback-position > span { display: flex; justify-content: space-between; gap: 8px; color: #f1f3f5; font-size: 12px; font-weight: 750; }
.audio-clip-playback-position output { color: #94e8bf; font-weight: 850; white-space: nowrap; }
.audio-clip-playback-position input { width: 100%; min-width: 0; accent-color: #67dca8; }
.audio-clip-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.audio-clip-loop-toggle { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; margin-right: auto; padding: 0 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: #dce7e1; background: rgba(255,255,255,.035); font-size: 12px; font-weight: 750; cursor: pointer; }
.audio-clip-loop-toggle input { width: 16px; height: 16px; margin: 0; accent-color: #68dca9; }
.audio-clip-primary, .audio-clip-secondary { min-height: 44px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .18s ease, opacity .18s ease; }
.audio-clip-primary { border: 1px solid #ffe269; color: #2c1d00; background: linear-gradient(135deg, #ffe272, #f8b93e); box-shadow: 0 8px 22px rgba(255, 184, 47, .18); }
.audio-clip-secondary { border: 1px solid rgba(255,255,255,.14); color: #edf0f2; background: rgba(255,255,255,.045); }
.audio-clip-primary:hover, .audio-clip-secondary:hover, .audio-clip-text-button:hover { transform: translateY(-1px); }
.audio-clip-primary:disabled, .audio-clip-secondary:disabled, .audio-clip-text-button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.audio-clip-status { min-height: 20px; margin: 16px 0 0; color: #a4adb5; font-size: 13px; line-height: 1.55; }
.audio-clip-status.is-ready { color: #aee8c0; }.audio-clip-status.is-working { color: #ffe59d; }.audio-clip-status.is-error { color: #f3a8b1; }
.audio-clip-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid rgba(116, 229, 166, .25); border-radius: 13px; color: #ccefd9; background: rgba(54, 189, 127, .07); font-size: 13px; }
.audio-clip-result a { flex: 0 0 auto; display: inline-flex; min-height: 40px; align-items: center; padding: 0 13px; border: 1px solid rgba(132, 236, 177, .43); border-radius: 9px; color: #f0fff5; background: rgba(64, 197, 123, .13); font-weight: 800; text-decoration: none; }
.audio-clip-editor-faq { padding: 54px 8px 0; }.audio-clip-editor-faq h2 { margin: 0 0 20px; color: #f7f5ef; font-size: clamp(21px, 3vw, 30px); letter-spacing: -.035em; }.audio-clip-editor-faq > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.audio-clip-editor-faq article { padding: 17px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.025); }.audio-clip-editor-faq h3 { margin: 0; color: #fff9ed; font-size: 14px; }.audio-clip-editor-faq p { margin: 9px 0 0; color: #a7a69f; font-size: 12px; line-height: 1.65; }
@media (max-width: 900px) { .audio-clip-editor-page { padding-top: 14px; }.audio-clip-controls-grid { grid-template-columns: repeat(2, minmax(min(100%, 210px), 1fr)); }.audio-clip-transport { grid-template-columns: 1fr; }.audio-clip-editor-faq > div { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .audio-clip-editor-hero { border-radius: 18px; }.audio-clip-editor-workbench { padding: 13px; border-radius: 18px; }.audio-clip-editor-heading { display: grid; }.audio-clip-text-button { justify-self: start; }.audio-clip-waveform, .audio-clip-playhead { height: 210px; }.audio-clip-waveform-legend { align-items: flex-start; flex-direction: column; }.audio-clip-controls-grid { grid-template-columns: 1fr; }.audio-clip-transport { padding: 12px; }.audio-clip-transport-actions { display: grid; grid-template-columns: 1fr 1fr; }.audio-clip-transport-primary { grid-column: 1 / -1; }.audio-clip-actions { flex-direction: column-reverse; }.audio-clip-actions button, .audio-clip-result a { width: 100%; justify-content: center; }.audio-clip-loop-toggle { justify-content: center; width: 100%; margin: 0; }.audio-clip-result { align-items: stretch; flex-direction: column; }.audio-clip-field--range { grid-template-columns: minmax(0, 1fr) 100px; } }