.ai { --ai-pink:#f43f5e; --ai-green:#22b563; --ai-border:#dedede; --ai-muted:#6b6b6b; font-family:Ubuntu,sans-serif; }
.ai * { box-sizing:border-box; }
.ai button,.ai input,.ai select { font:inherit; }
.ai .ai-privacy { display:flex; align-items:center; gap:10px; margin:0 0 24px; padding:14px 16px; border:1px solid #dcefe4; border-radius:12px; background:#f4fbf7; color:#24613e; font-size:13px; line-height:1.45; }
.ai .ai-privacy svg { flex:0 0 auto; }
.ai .ai-panel { margin:18px 0 24px; border:1px solid var(--ai-border); border-radius:16px; background:#fff; }
.ai .ai-accordion { overflow:hidden; }
.ai .ai-accordion__summary { display:flex; min-height:72px; padding:16px 20px; align-items:center; justify-content:space-between; gap:20px; list-style:none; cursor:pointer; user-select:none; }
.ai .ai-accordion__summary::-webkit-details-marker { display:none; }
.ai .ai-accordion__summary > span:first-child { display:flex; flex-direction:column; gap:4px; }
.ai .ai-accordion__summary strong { color:#222; font-size:17px; font-weight:500; }
.ai .ai-accordion__summary small { color:var(--ai-muted); font-size:12px; font-weight:400; }
.ai .ai-accordion__icon { position:relative; flex:0 0 34px; width:34px; height:34px; border:1px solid #d3d3d3; border-radius:50%; }
.ai .ai-accordion__icon::before,.ai .ai-accordion__icon::after { position:absolute; top:50%; left:50%; width:12px; height:1.5px; border-radius:2px; background:#333; content:""; transform:translate(-50%,-50%); transition:transform .2s ease; }
.ai .ai-accordion__icon::after { transform:translate(-50%,-50%) rotate(90deg); }
.ai .ai-accordion[open] .ai-accordion__icon::after { transform:translate(-50%,-50%) rotate(0); }
.ai .ai-accordion__content { padding:0 20px 20px; border-top:1px solid #eee; }
.ai .ai-panel__title { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.ai .ai-panel__title h3 { margin:0; font-size:18px; font-weight:500; }
.ai .ai-panel__title span { color:var(--ai-muted); font-size:12px; }
.ai .ai-settings { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ai .ai-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.ai .ai-field--wide { grid-column:span 2; }
.ai .ai-field label { color:var(--ai-muted); font-size:11px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
.ai .ai-control { width:100%; height:42px; padding:0 12px; border:1px solid #ccc; border-radius:8px; outline:none; color:#222; background:#fff; }
.ai .ai-control:focus { border-color:var(--ai-pink); box-shadow:0 0 0 3px rgba(244,63,94,.1); }
.ai .ai-range { display:grid; grid-template-columns:1fr 48px; align-items:center; gap:8px; height:42px; padding:0 10px; border:1px solid #ccc; border-radius:8px; }
.ai .ai-range input { width:100%; accent-color:var(--ai-pink); }
.ai .ai-range output { color:var(--ai-muted); font-size:12px; text-align:right; }
.ai .ai-checks { display:flex; flex-wrap:wrap; gap:10px 18px; grid-column:1/-1; padding-top:4px; }
.ai .ai-check { display:flex; align-items:center; gap:8px; color:#444; font-size:13px; cursor:pointer; }
.ai .ai-check input { width:16px; height:16px; accent-color:var(--ai-pink); }
.ai .dropzone { border:2px dashed #cfcfcf; border-radius:16px; padding:42px 20px; text-align:center; background:#fafafa; cursor:pointer; transition:.2s; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ai .dropzone:hover,.ai .dropzone.dragover { border-color:var(--ai-pink); background:#fff7f9; }
.ai .dropzone p { margin:0; font-size:15px; font-weight:500; }
.ai .dropzone span { color:var(--ai-muted); font-size:12px; }
.ai .dropzone strong { color:var(--ai-pink); font-weight:500; }
.ai .ai-queue { display:none; margin-top:28px; }
.ai .ai-queue.is-visible { display:block; }
.ai .ai-queue__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.ai .ai-queue__head h3 { margin:0; font-size:18px; font-weight:500; }
.ai .ai-actions { display:flex; gap:10px; }
.ai .ai-btn { display:inline-flex; min-height:42px; padding:0 18px; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; background:var(--ai-pink); color:#fff; font-weight:500; text-decoration:none; cursor:pointer; transition:.2s; }
.ai .ai-btn:hover { transform:translateY(-1px); opacity:.92; }
.ai .ai-btn--dark { background:#151515; }
.ai .ai-btn--ghost { border:1px solid #ccc; color:#333; background:#fff; }
.ai .ai-btn--success { background:var(--ai-green); }
.ai .ai-btn[disabled] { opacity:.45; cursor:not-allowed; transform:none; }
.ai .ai-progress { display:none; margin-bottom:16px; }
.ai .ai-progress.is-visible { display:block; }
.ai .ai-progress__meta { display:flex; justify-content:space-between; margin-bottom:7px; color:var(--ai-muted); font-size:12px; }
.ai .ai-progress__track { height:7px; overflow:hidden; border-radius:99px; background:#e8e8e8; }
.ai .ai-progress__bar { width:0; height:100%; border-radius:inherit; background:var(--ai-pink); transition:width .25s ease; }
.ai .ai-list { display:flex; flex-direction:column; gap:12px; }
.ai .ai-item { overflow:hidden; border:1px solid var(--ai-border); border-radius:14px; background:#fff; transition:.2s; }
.ai .ai-item.is-processing { border-left:4px solid #f4a340; }
.ai .ai-item.is-done { border-left:4px solid var(--ai-green); }
.ai .ai-item.is-warning { border-left:4px solid #e79a16; }
.ai .ai-item.is-error { border-left:4px solid #d93025; }
.ai .ai-item__main { display:grid; grid-template-columns:84px minmax(0,1fr) auto auto; align-items:center; gap:16px; padding:14px; }
.ai .ai-thumb { width:84px; height:62px; overflow:hidden; border-radius:8px; background:#eee; }
.ai .ai-thumb img { width:100%; height:100%; object-fit:cover; }
.ai .ai-item__name { overflow:hidden; margin-bottom:5px; font-size:14px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.ai .ai-item__meta,.ai .ai-item__result { color:var(--ai-muted); font-size:12px; line-height:1.45; }
.ai .ai-item__saving { min-width:90px; color:var(--ai-green); font-size:14px; font-weight:500; text-align:right; }
.ai .ai-remove { display:grid; width:34px; height:34px; padding:0; place-items:center; border:0; border-radius:50%; color:#777; background:transparent; cursor:pointer; }
.ai .ai-remove:hover { color:var(--ai-pink); background:#fff0f3; }
.ai .ai-item__controls { display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto; gap:10px; padding:14px; border-top:1px solid #eee; background:#fafafa; }
.ai .ai-item__controls .ai-field label { font-size:10px; }
.ai .ai-item__controls .ai-control,.ai .ai-item__controls .ai-range { height:38px; }
.ai .ai-item__controls .ai-process { min-height:38px; padding:0 14px; align-self:end; justify-self:start; border-radius:10px; font-size:13px; white-space:nowrap; }
.ai .ai-item__footer { display:none; align-items:center; justify-content:space-between; gap:12px; padding:0 14px 14px; background:#fafafa; }
.ai .ai-item.is-done .ai-item__footer,.ai .ai-item.is-warning .ai-item__footer { display:flex; }
.ai .ai-item__footer-actions { display:flex; gap:8px; }
.ai .ai-downloads { display:none; justify-content:flex-end; gap:10px; margin-top:20px; }
.ai .ai-downloads.is-visible { display:flex; }
.ai-dialog { width:min(960px,calc(100vw - 32px)); padding:0; border:0; border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.25); }
.ai-dialog::backdrop { background:rgba(0,0,0,.58); }
.ai-dialog__head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #eee; }
.ai-dialog__head h3 { margin:0; font:500 17px Ubuntu,sans-serif; }
.ai-dialog__close { width:36px; height:36px; border:0; border-radius:50%; background:#f1f1f1; cursor:pointer; }
.ai-compare { position:relative; height:min(66vh,620px); overflow:hidden; background:#e9e9e9; }
.ai-compare img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ai-compare__after { clip-path:inset(0 0 0 50%); }
.ai-compare__line { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); pointer-events:none; }
.ai-compare input { position:absolute; inset:auto 18px 18px; width:calc(100% - 36px); accent-color:var(--ai-pink); }
.ai-dialog__meta { display:flex; justify-content:space-between; gap:16px; padding:14px 18px; color:#555; font:400 12px Ubuntu,sans-serif; }
@media(max-width:900px){.ai .ai-settings{grid-template-columns:repeat(2,minmax(0,1fr))}.ai .ai-item__controls{grid-template-columns:repeat(2,minmax(0,1fr))}.ai .ai-item__controls .ai-btn{grid-column:1/-1}}
@media(max-width:600px){.ai .ai-accordion__summary{padding:15px}.ai .ai-accordion__content{padding:0 15px 15px}.ai .ai-settings{grid-template-columns:1fr}.ai .ai-field--wide{grid-column:auto}.ai .ai-item__main{grid-template-columns:64px minmax(0,1fr) auto;gap:10px}.ai .ai-thumb{width:64px;height:50px}.ai .ai-item__saving{grid-column:2;text-align:left}.ai .ai-remove{grid-column:3;grid-row:1}.ai .ai-item__controls{grid-template-columns:1fr}.ai .ai-item__controls .ai-btn{grid-column:auto}.ai .ai-item__controls .ai-process{justify-self:stretch}.ai .ai-item__footer{align-items:stretch;flex-direction:column}.ai .ai-item__footer-actions,.ai .ai-downloads,.ai .ai-actions{flex-direction:column}.ai .ai-btn{width:100%}.ai .ai-queue__head{align-items:flex-start;flex-direction:column}.ai-dialog__meta{flex-direction:column}}