/* Wan page only: a calm, editorial AI studio over the shared Seedance mechanics. */
@import url("/assets/css/seedance-page.css");

#wanForm {
    container: wan / inline-size;
    --wan-violet: #a78bfa;
    --wan-lilac: #c4b5fd;
    --wan-surface: linear-gradient(180deg, rgba(28, 19, 52, .72), rgba(17, 11, 34, .72));
    --wan-line: rgba(139, 92, 246, .16);
}
.wan-page .sd-hero { padding: 21px 26px; margin-bottom: 16px; background: radial-gradient(circle at 84% 20%, rgba(196, 181, 253, .2), transparent 23%), linear-gradient(112deg, #1c1334, #7c3aed); box-shadow: 0 18px 45px rgba(19, 8, 42, .22); }
.wan-page .sd-hero h1 { font-size: 1.48rem; margin-bottom: 4px; }
.wan-page .sd-hero-sub { margin: 0; max-width: 690px; }
.wan-page .sd-hero-deco { width: 76px; height: 76px; opacity: .48; }

#wanForm .sd-card { background: var(--wan-surface); border-color: var(--wan-line); box-shadow: 0 12px 30px rgba(9, 4, 23, .12), inset 0 1px rgba(255,255,255,.04); }
#wanForm .sd-label { color: #f0f7ff; }
#wanForm .wan-workspace { padding-bottom: 15px; }
.wan-action-label { margin-bottom: 10px; }
#wanForm .mode-toggle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; border: 0; border-radius: 15px; background: rgba(10, 6, 25, .32); padding: 5px; }
#wanForm .mode-toggle .mode-btn { min-width: 0; min-height: 58px; padding: 10px 12px; border: 1px solid transparent; border-radius: 11px; color: rgba(240, 247, 255, .72); font-size: .81rem; line-height: 1.2; }
#wanForm .mode-toggle .mode-btn svg { flex: 0 0 auto; color: rgba(196, 181, 253, .75); }
#wanForm .mode-toggle .mode-btn:hover { color: #fff; background: rgba(139, 92, 246, .1); transform: translateY(-1px); }
#wanForm .mode-toggle .mode-btn.active { color: #fff; border-color: rgba(167, 139, 250, .55); background: linear-gradient(135deg, rgba(139, 92, 246, .34), rgba(217, 70, 239, .28)); }
#wanForm .mode-toggle .mode-btn.active::after { display: none; }
#wanForm .mode-hint { min-height: 0; margin-top: 9px; padding: 0; border: 0; border-radius: 0; background: transparent; color: rgba(240, 247, 255, .64); font-size: .8rem; }

.wan-material-card { margin-bottom: 14px; }
.wan-creation-flow { margin-bottom: 14px; }
.wan-creation-flow .sd-card { margin-bottom: 0; }
.wan-creation-flow .wan-material-card:not([hidden]) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-color: transparent; }
.wan-creation-flow .wan-material-card:not([hidden]) ~ .wan-prompt-card { border-top-right-radius: 0; border-top-left-radius: 0; border-top-color: transparent; }
.wan-creation-flow .wan-prompt-card { margin-top: 0; }
.wan-material-card .sd-label { margin-bottom: 9px; }
#wanForm .frames-row { gap: 12px; margin: 0; }
#wanForm .frames-row .upload-zone { min-height: 132px; height: 132px; }
#wanForm .upload-zone { border-color: rgba(167, 139, 250, .36); background: linear-gradient(135deg, rgba(139, 92, 246, .08), rgba(139, 92, 246, .025)); }
#wanForm .upload-zone:hover, #wanForm .upload-zone.dragover { border-color: var(--wan-violet); background: linear-gradient(135deg, rgba(139, 92, 246, .16), rgba(139, 92, 246, .06)); box-shadow: 0 0 0 4px rgba(139,92,246,.07); }
#wanForm .upload-zone:focus-visible, #wanForm button:focus-visible, #wanForm summary:focus-visible, #wanForm .reference-toggle:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 3px; }
#wanForm .params-sublabel { color: rgba(240, 247, 255, .67); font-weight: 600; }
#wanForm .refs-group { border-color: var(--wan-line); }
#wanForm .refs-item { padding: .85rem .9rem; }
#wanForm .refs-item .form-label { color: rgba(240, 247, 255, .85); font-size: .82rem; }
#wanForm .upload-zone.compact { min-height: 106px; padding: 12px; border-radius: 13px; }
.wan-upload-icon { width: 42px; height: 42px; margin: 0 auto 7px; border: 1px solid rgba(196, 181, 253, .2); border-radius: 50%; background: rgba(139, 92, 246, .12); color: #c4b5fd; display: inline-flex; align-items: center; justify-content: center; transition: transform .22s ease, background .22s ease; }
.upload-zone:hover .wan-upload-icon, .upload-zone.dragover .wan-upload-icon { transform: translateY(-2px); background: rgba(139, 92, 246, .22); }
#wanForm .upload-zone .upload-text { color: rgba(250,247,255,.88); font-weight: 550; }
#wanForm .upload-zone .upload-hint { display: block; margin-top: 2px; color: rgba(240,247,255,.56); }

#wanForm .wan-prompt-card { padding-top: 16px; }
#wanForm textarea.form-control { border-color: rgba(139, 92, 246, .3); background: rgba(12, 7, 29, .62); color: #f0f7ff; line-height: 1.55; }
#wanForm textarea.form-control:focus { border-color: #a78bfa; box-shadow: 0 0 0 .2rem rgba(139, 92, 246, .16); background: rgba(12, 7, 29, .8); }
#wanForm #promptInput { min-height: 126px; }
#wanForm #promptCounter { color: rgba(240, 247, 255, .5); font-size: .73rem; }
.wan-required, .wan-char-limit { color: #ffb3c6 !important; }
.wan-optional { color: rgba(240, 247, 255, .56); font-size: .75rem; font-weight: 500; }

.wan-basics { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(210px, 1fr) auto; align-items: start; gap: 18px; }
.wan-model-picker { display: grid; grid-template-columns: minmax(155px, .7fr) minmax(320px, 1.3fr); align-items: center; gap: 18px; margin-bottom: 19px; padding: 13px 14px; border: 1px solid rgba(139,92,246,.18); border-radius: 14px; background: rgba(13, 8, 33, .3); }
.wan-model-picker .wan-model-note { margin: 3px 0 0; }
#wanForm .speed-toggle-container { display: grid; grid-template-columns: 1fr 1.35fr; gap: 6px; margin: 0; }
#wanForm .speed-btn { min-height: 50px; padding: 7px 12px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; border-radius: 10px; text-align: left; }
#wanForm .speed-btn span { font-weight: 700; }
#wanForm .speed-btn small { color: rgba(240,247,255,.58); font-size: .69rem; font-weight: 500; }
#wanForm .speed-btn.active small { color: rgba(255,255,255,.76); }
#wanForm .option-buttons { gap: 6px; }
#wanForm .option-btn, #wanForm .speed-btn { min-height: 38px; border-color: rgba(139, 92, 246, .26); background: rgba(12, 7, 29, .48); color: rgba(249, 245, 255, .78); }
#wanForm .option-btn.active, #wanForm .speed-btn.active { border-color: #c4b5fd; background: rgba(155, 113, 237, .27); color: #fff; }
.wan-price { min-width: 118px; padding: 8px 0 0; text-align: right; }
.wan-price > span { display: block; color: rgba(240, 247, 255, .72); font-size: .78rem; }
.wan-price strong { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 1.1rem; white-space: nowrap; }
.wan-price .coin-icon { display: inline-block; width: 18px; height: 18px; }
#wanForm .wan-advanced { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--wan-line); }
#wanForm .wan-advanced summary { display: grid; grid-template-columns: 1fr auto 10px; gap: 8px; align-items: center; cursor: pointer; color: #f0f7ff; font-size: .86rem; font-weight: 600; list-style: none; }
#wanForm .wan-advanced summary::-webkit-details-marker { display: none; }
#wanForm .wan-advanced summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
#wanForm .wan-advanced[open] summary::after { transform: rotate(225deg); }
.wan-model-note { margin: 8px 0 0; color: rgba(240, 247, 255, .7); font-size: .76rem; line-height: 1.5; }
#advancedSummary { color: rgba(240, 247, 255, .57); font-weight: 400; font-size: .76rem; text-align: right; }
.wan-advanced-body { display: grid; grid-template-columns: 1fr; gap: 14px 18px; margin-top: 15px; }
.wan-advanced-body .toggle-row, .wan-advanced-body > label, .wan-advanced-body > textarea { grid-column: 1 / -1; }
#wanForm .toggle-row { margin: 0; }
#wanForm .toggle-item { border-color: var(--wan-line); background: rgba(12, 7, 29, .34); }

.sd-cta-wrap { position: sticky; bottom: 10px; z-index: 3; padding: 8px; border: 1px solid rgba(167, 139, 250, .3); border-radius: 14px; background: rgba(29, 17, 56, .95); box-shadow: 0 10px 28px rgba(7, 3, 18, .32); }
#wanForm #submitButton { min-height: 48px; border-radius: 10px; font-weight: 700; }
#wanForm #submitButton.btn-gradient { color: #fff !important; -webkit-text-fill-color: #fff !important; background-clip: padding-box; -webkit-background-clip: padding-box; }

/* Existing previews and errors remain deliberately high contrast. */
#refImagesGrid, #refVideoList { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
#refVideoList { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ref-media-card { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(255,255,255,.05); }
#refVideoList .ref-media-card { aspect-ratio: 16 / 10; }
.ref-media-card img, .ref-media-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-media-card.has-error { border-color: rgba(255, 137, 155, .9); }
.ref-media-name { position:absolute; right:0; bottom:0; left:0; padding:14px 6px 5px; overflow:hidden; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.78)); font-size:.62rem; white-space:nowrap; text-overflow:ellipsis; pointer-events:none; }
.ref-media-dur,.ref-media-ok { position:absolute; top:6px; left:6px; color:#fff; font-size:.66rem; }
.ref-media-dur { padding:1px 7px; border-radius:7px; background:rgba(0,0,0,.62); }
.ref-media-ok { width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; }
.ref-media-dur ~ .ref-media-ok { right:28px; left:auto; }
.ref-media-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); }
.ref-media-overlay.error { flex-direction:column; padding:6px; background:rgba(120,0,0,.7); }
.ref-audio-icon { display:inline-flex; flex-shrink:0; color:var(--wan-violet); }
.wan-ref-hint { margin-top:.4rem; color:rgba(240,247,255,.58); font-size:.73rem; }
.option-btn:disabled,.option-btn.disabled { opacity:.35; cursor:not-allowed; }
.wan-saved-refs { margin-bottom:.4rem; }
.wan-saved-refs .reference-grid { max-height:220px; }

@media (max-width: 720px) {
    .wan-page .sd-hero { padding: 16px 18px; }
    #wanForm .mode-toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; }
    #wanForm .mode-toggle .mode-btn { min-height: 48px; font-size: .78rem; }
    .wan-basics { grid-template-columns: 1fr; gap: 13px; }
    .wan-model-picker { grid-template-columns: 1fr; gap: 10px; }
    .wan-price { padding: 0; text-align: left; }
    .wan-price > span { display: inline; margin-right: 7px; }
    .wan-advanced-body { grid-template-columns: 1fr; }
    .wan-advanced-body .toggle-row, .wan-advanced-body > label, .wan-advanced-body > textarea { grid-column: auto; }
    .sd-cta-wrap { position: static; margin-bottom: 12px; }
}
/* The form may be narrow next to the orders panel even on a wide viewport. */
@container wan (max-width: 640px) {
    #wanForm .mode-toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wan-basics { grid-template-columns: minmax(0, 1fr); gap: 13px; }
    .wan-model-picker { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .wan-price { padding: 0; text-align: left; }
    .wan-price > span { display: inline; margin-right: 7px; }
    #wanForm .wan-advanced summary { grid-template-columns: minmax(0, 1fr) 10px; }
    #advancedSummary { grid-column: 1; text-align: left; }
    #wanForm .wan-advanced summary::after { grid-column: 2; grid-row: 1 / 3; }
    .wan-advanced-body { grid-template-columns: minmax(0, 1fr); }
    .sd-cta-wrap { position: static; }
}
#wanForm .wan-mode-section[hidden] { display: none !important; }
@media (max-width: 576px) {
    #wanForm .sd-card { padding: 15px; border-radius: 14px; }
    #wanForm .frames-row { grid-template-columns: 1fr; }
    #wanForm .frames-row .upload-zone { height: 116px; min-height: 116px; }
    #refImagesGrid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
    #refVideoList { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
#referencesSection.wan-edit-only .refs-item:not(.refs-item-video) { display:none; }

/* ==== Ползунок длительности (образец — seedance-video) ==== */
.duration-slider-wrap { display: flex; align-items: center; gap: 10px; }
.duration-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; background: rgba(139, 92, 246, 0.2); border-radius: 3px; outline: none; }
.duration-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: linear-gradient(135deg, #8b5cf6, #ec4899); border-radius: 50%; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.3); }
.duration-slider::-moz-range-thumb { width: 20px; height: 20px; background: linear-gradient(135deg, #8b5cf6, #ec4899); border-radius: 50%; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.3); }
.duration-value { min-width: 48px; padding: 6px 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: white; font-size: 0.9rem; text-align: center; font-weight: 500; }
.duration-compact { gap: 6px; }
.duration-compact .duration-slider { flex: 1; min-width: 80px; }