@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";
:root{--ink:#172033;--muted:#778399;--line:#e4e9f0;--canvas:#f7fafb;--panel:#fff;--accent:#17bcda;--accent-strong:#0ca4c1;--accent-pale:#e8f9fc;--danger:#c94b4b;--success:#20906c;--radius:18px}*{box-sizing:border-box}body{min-width:320px;color:var(--ink);background:var(--canvas);margin:0;font-family:Manrope,Arial,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline-offset:2px;outline:3px solid #a9e9f4}.shell{width:min(1440px,100% - 48px);margin:0 auto;padding:38px 0 54px}.page-header{align-items:center;gap:13px;margin:0 5px 24px;display:flex}.brand-mark{color:#fff;background:var(--accent);border-radius:13px;place-items:center;width:39px;height:39px;font-weight:800;display:grid;box-shadow:0 6px 14px #17bcda33}.company-name{color:var(--accent-strong);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px;font-size:10px;font-weight:800;display:block}.page-header h1{letter-spacing:-.7px;margin:0;font-size:21px;line-height:1.25}.page-header p{color:var(--muted);margin:3px 0 0;font-size:13px}.workspace{grid-template-columns:280px minmax(440px,1fr) 310px;align-items:start;gap:18px;display:grid}.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden;box-shadow:0 12px 32px #2137590a}.library-panel,.history-panel{padding:18px}.form-panel{border-color:#dce2ec;padding:26px;box-shadow:0 18px 46px #24345312}.panel-title{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:17px;display:flex}.panel-title h2{letter-spacing:-.25px;margin:0;font-size:14px}.panel-title p{color:var(--muted);margin:4px 0 0;font-size:11px}.text-button{color:var(--accent);background:0 0;border:0;border-radius:7px;padding:3px 5px;font-size:12px;font-weight:800;transition:background .18s}.text-button:hover{background:var(--accent-pale)}.field-section{margin-top:21px}.field-section>label,.field-label-row label,.duration-label label,.audio-card label{font-size:12px;font-weight:800}.field-label-row,.duration-label{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.optional{color:var(--muted);margin-left:4px;font-weight:500}.selected-file{background:#fbfdfe;border:1px dashed #ccd5e1;border-radius:12px;align-items:center;gap:11px;min-height:84px;padding:9px;transition:border-color .2s,background .2s;display:flex}.selected-file:hover{background:#f5fcfd;border-color:#9bdcea}.selected-file.drop-target{border-color:var(--accent);background:var(--accent-pale);box-shadow:inset 0 0 0 1px var(--accent)}.selected-file.empty-file{color:var(--muted);text-align:center;justify-content:center;padding:17px 30px;font-size:12px}.selected-file img,.selected-file video{object-fit:cover;background:#edf1f5;border-radius:8px;flex:0 0 62px;width:62px;height:62px}.file-icon,.generation-placeholder{color:#7f8b9c;background:#eef1f4;border-radius:8px;flex:0 0 62px;place-items:center;width:62px;height:62px;font-family:DM Mono,monospace;font-size:10px;display:grid}.file-copy{gap:2px;min-width:0;display:grid}.file-copy strong{white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.file-copy span,.file-copy em{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:10px;font-style:normal;overflow:hidden}.file-copy em{color:var(--success)}.icon-button{color:#788594;background:#eff2f5;border:0;border-radius:50%;width:24px;height:24px;margin-left:auto;font-size:18px;line-height:1;transition:color .18s,background .18s}.icon-button:hover{color:#fff;background:var(--danger)}.loading-card{color:var(--muted);justify-content:center;font-size:12px}.notice,.form-error{border-radius:10px;margin-top:17px;padding:10px 12px;font-size:12px;line-height:1.45}.notice{color:#197689;background:#effcff;border:1px solid #c3edf5}.form-error{color:#9e3939;background:#fff4f3;border:1px solid #f3d2ce}.field-section textarea{resize:vertical;width:100%;min-height:96px;max-height:230px;color:var(--ink);background:#fff;border:1px solid #d7dfe8;border-radius:11px;margin-top:8px;padding:12px 13px;font-size:13px;line-height:1.52;transition:border-color .18s,box-shadow .18s;display:block}.field-section textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px #17bcda1f}.field-section textarea::placeholder{color:#9ca8b7}.ratio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px;display:grid}.ratio-option{color:var(--ink);text-align:left;background:#fff;border:1px solid #dfe5eb;border-radius:11px;grid-template-columns:1fr auto;gap:2px;padding:10px;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s;display:grid}.ratio-option:hover{border-color:#9edfeb;transform:translateY(-1px)}.ratio-option strong{font-size:12px}.ratio-option span{color:var(--muted);font-family:DM Mono,monospace;font-size:10px}.ratio-option small{color:var(--muted);grid-column:1/-1;font-size:10px;line-height:1.3}.ratio-option.selected{border-color:var(--accent);background:var(--accent-pale);box-shadow:inset 0 0 0 1px var(--accent), 0 3px 8px #17bcda1f}.split-fields{grid-template-columns:1fr 1.2fr;align-items:end;gap:16px;margin-top:21px;display:grid}.split-fields .field-section{margin:0}.duration-label output{color:var(--accent);font-family:DM Mono,monospace;font-size:11px}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:28px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:#eaf8fb;border:1px solid #ccecf2;border-radius:999px;height:6px;box-shadow:inset 0 1px 1px #12778c12}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:4px solid #fff;border-radius:50%;width:18px;height:18px;margin-top:-7px;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 6px #12778c40}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);box-shadow:0 3px 9px #12778c52}input[type=range]::-moz-range-track{background:#eaf8fb;border:1px solid #ccecf2;border-radius:999px;height:6px;box-shadow:inset 0 1px 1px #12778c12}input[type=range]::-moz-range-progress{background:var(--accent);border-radius:999px;height:6px}input[type=range]::-moz-range-thumb{background:var(--accent);border:4px solid #fff;border-radius:50%;width:10px;height:10px;box-shadow:0 2px 6px #12778c40}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #17bcda2e,0 2px 6px #12778c40}.audio-card{background:#fbfcfe;border:1px solid #dfe5eb;border-radius:11px;justify-content:space-between;align-items:center;gap:10px;min-height:57px;padding:9px 10px;display:flex}.audio-card p{color:var(--muted);margin:3px 0 0;font-size:10px}.switch{background:#cbd2da;border:0;border-radius:99px;width:38px;height:23px;padding:3px;transition:background .18s}.switch span{background:#fff;border-radius:50%;width:17px;height:17px;transition:transform .18s;display:block;transform:translate(0);box-shadow:0 1px 3px #13213d40}.switch.on{background:var(--accent)}.switch.on span{transform:translate(15px)}.generate-button{color:#fff;background:var(--accent);border:0;border-radius:11px;justify-content:center;align-items:center;gap:12px;width:100%;min-height:47px;margin-top:24px;font-size:13px;font-weight:800;transition:transform .18s,box-shadow .18s,filter .18s;display:flex;box-shadow:0 7px 15px #17bcda2e}.generate-button:hover:not(:disabled){background:var(--accent-strong);transform:translateY(-2px);box-shadow:0 10px 18px #17bcda38}.generate-button:disabled{cursor:not-allowed;opacity:.65}.library-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;display:grid}.library-scroll.scrollable{scrollbar-width:thin;scrollbar-color:#a7dfe9 transparent;max-height:540px;padding-right:4px;overflow-y:auto}.library-scroll.scrollable::-webkit-scrollbar{width:6px}.library-scroll.scrollable::-webkit-scrollbar-thumb{background:#a7dfe9;border-radius:999px}.library-file{background:#fff;border:1px solid #e5e9ed;border-radius:11px;min-width:0;transition:transform .16s,box-shadow .16s,border-color .16s;position:relative;overflow:hidden}.library-file:hover{border-color:#b5e5ee;transform:translateY(-2px);box-shadow:0 8px 15px #1c315211}.library-file.assigned{border-color:#8ddaea;box-shadow:inset 0 0 0 1px #8ddaea}.media-select-button{width:100%;color:inherit;text-align:left;background:0 0;border:0;padding:0;display:block}.media-select-button:focus-visible{outline-offset:-3px}.media-preview-button{color:#fff;opacity:0;background:#172033a6;border:0;border-radius:7px;place-items:center;width:24px;height:24px;font-size:15px;line-height:1;transition:opacity .15s,background .15s;display:grid;position:absolute;top:6px;right:6px}.library-file:hover .media-preview-button,.media-preview-button:focus-visible{opacity:1}.media-preview-button:hover{background:var(--accent-strong)}.library-file img,.library-file video{aspect-ratio:1;object-fit:cover;background:#edf0f2;width:100%;display:block}.file-meta{gap:2px;padding:7px 7px 4px;display:grid}.file-meta strong{white-space:nowrap;text-overflow:ellipsis;font-size:10px;overflow:hidden}.file-meta span{color:var(--muted);font-size:9px}.assignment,.assignment-actions{min-height:28px;color:var(--accent);background:#f7f8fb;border-top:1px solid #edf0f2;justify-content:center;align-items:center;gap:4px;font-size:9px;font-weight:800;display:flex}.assignment-actions button{color:var(--accent);background:0 0;border:0;font-size:9px;font-weight:800}.media-dialog-backdrop{z-index:20;background:#0b1427bf;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.media-dialog{background:#172033;border:1px solid #ffffff2b;border-radius:16px;flex-direction:column;width:min(1120px,100%);max-height:calc(100vh - 48px);display:flex;overflow:hidden;box-shadow:0 28px 80px #0610208c}.media-dialog-header{color:#fff;justify-content:space-between;align-items:center;gap:16px;min-height:58px;padding:10px 14px 10px 18px;display:flex}.media-dialog-header div{min-width:0}.media-dialog-header strong,.media-dialog-header span{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.media-dialog-header strong{font-size:13px}.media-dialog-header span{color:#aeb9cd;margin-top:2px;font-size:10px}.media-dialog-header .icon-button{color:#fff;background:#ffffff1a}.media-dialog-header .icon-button:hover{background:var(--danger)}.media-dialog-content{background:#0d1524;place-items:center;min-height:0;display:grid;overflow:auto}.media-dialog-content img,.media-dialog-content video{object-fit:contain;max-width:100%;max-height:calc(100vh - 106px);display:block}.secondary-button{color:#526171;background:#fff;border:1px solid #d8dfe6;border-radius:8px;padding:7px 9px;font-size:11px;font-weight:700}.full{width:100%;margin-top:13px}.skeleton-stack{grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;display:grid}.skeleton-stack i,.history-skeleton i{background:linear-gradient(90deg,#f2f4f6,#fafafa,#f2f4f6) 0 0/200% 100%;border-radius:10px;animation:1.6s infinite shimmer;display:block}.skeleton-stack i{aspect-ratio:1}.history-skeleton{gap:12px;margin-top:16px;display:grid}.history-skeleton i{border-radius:8px;height:70px}.history-list{gap:13px;margin-top:16px;display:grid}.generation-card{border-bottom:1px solid #edf0f2;gap:10px;padding-bottom:13px;display:flex}.generation-card:last-child{border-bottom:0;padding-bottom:0}.generation-card img,.generation-placeholder{object-fit:cover;border-radius:8px;flex:0 0 62px;width:62px;height:70px}.generation-copy{flex-direction:column;align-items:flex-start;min-width:0;display:flex}.generation-copy>p{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:5px 0 4px;font-size:11px;line-height:1.45;display:-webkit-box;overflow:hidden}.generation-copy small{color:var(--muted);font-family:DM Mono,monospace;font-size:9px;line-height:1.5}.status{align-items:center;gap:5px;font-size:10px;font-weight:800;display:inline-flex}.status i{background:#aab4c0;border-radius:50%;width:7px;height:7px}.status.processing i{background:var(--accent);animation:1.2s infinite pulse}.status.completed i{background:var(--success)}.status.failed i{background:var(--danger)}.status.canceled i{background:#89929f}.failure-copy{color:var(--danger);margin-top:5px;font-size:10px}.retry-button{color:var(--accent);background:0 0;border:0;padding:5px 0 0;font-size:10px;font-weight:800}.empty-state,.error-state{color:var(--muted);text-align:center;padding:35px 12px;font-size:12px}.empty-state strong{color:var(--ink);font-size:12px}.empty-state p,.error-state p{margin:6px 0 13px;line-height:1.5}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes pulse{50%{opacity:.35;transform:scale(.7)}}@keyframes shimmer{to{background-position:-200% 0}}@media (max-width:1050px){.workspace{grid-template-columns:minmax(430px,1fr) minmax(280px,.65fr)}.form-panel{grid-area:1/1/auto/-1}.library-panel{grid-column:1}.history-panel{grid-column:2}}@media (max-width:650px){.shell{width:min(100% - 24px,600px);padding-top:21px}.page-header{margin-bottom:17px}.workspace{flex-direction:column;gap:12px;display:flex}.panel{width:100%}.form-panel{order:1;padding:21px 16px}.library-panel{order:2}.history-panel{order:3}.split-fields,.ratio-grid{grid-template-columns:1fr}.library-grid{grid-template-columns:repeat(3,1fr)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}