:root{--banana-cream:#fce762;--ivory:#fffded;--sandy-brown:#ffb17a;--dusty-grape:#4f4789;--midnight-violet:#201335;--font:"Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--radius:18px;--shadow:0 14px 34px -14px #20133529;--shadow-strong:0 24px 48px -18px #20133542}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--ivory);height:100%;color:var(--midnight-violet);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}body{min-height:100vh;position:relative}body:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(600px 600px at 10% -10%,#fce7622e,#0000 55%),radial-gradient(700px 700px at 110% 110%,#ffb17a29,#0000 55%),radial-gradient(500px 500px at 40% 100%,#4f47891a,#0000 55%);position:fixed;inset:0}.app{grid-template-rows:auto 1fr auto;min-height:100vh;display:grid}.header{background:linear-gradient(135deg, var(--dusty-grape), var(--midnight-violet));color:var(--ivory);box-shadow:var(--shadow);justify-content:space-between;align-items:center;padding:24px 36px;display:flex}.title{letter-spacing:-.04em;background:linear-gradient(90deg, var(--banana-cream), var(--sandy-brown));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700;animation:4s ease-in-out infinite titleGlow}@keyframes titleGlow{0%,to{filter:drop-shadow(0 0 #fce76200)}50%{filter:drop-shadow(0 0 12px #fce76273)}}.btn-settings{width:46px;height:46px;color:var(--ivory);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff24;border:1px solid #ffffff40;border-radius:14px;place-items:center;font-size:1.4rem;transition:transform .16s,background .18s,box-shadow .18s;display:grid;box-shadow:0 4px 12px -6px #2013354d}.btn-settings:hover{background:#ffffff52;transform:rotate(-14deg)scale(1.1);box-shadow:0 6px 16px -6px #20133566}.btn-settings:active{transform:rotate(-8deg)scale(.92)}.main{flex-direction:column;gap:32px;width:100%;max-width:960px;margin:0 auto;padding:44px 36px;display:flex}.drop-zone{border:3px dashed var(--dusty-grape);border-radius:var(--radius);text-align:center;cursor:pointer;color:var(--midnight-violet);background:linear-gradient(#fce76217,#fffded99);padding:64px 28px;transition:all .24s;position:relative;overflow:hidden}.drop-zone:before{content:"";border-radius:inherit;background:linear-gradient(90deg, var(--banana-cream), var(--sandy-brown), var(--dusty-grape));-webkit-mask-composite:destination-out;opacity:0;pointer-events:none;padding:3px;transition:opacity .24s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.drop-zone:hover,.drop-zone.dragover{border-color:var(--sandy-brown);box-shadow:var(--shadow-strong);background:linear-gradient(#fce7622e,#fffdedd9);transform:translateY(-4px)}.drop-zone.dragover:before{opacity:1}.dz-icon{filter:drop-shadow(0 4px 8px #4f478940);margin-bottom:12px;font-size:2.6rem;animation:3s ease-in-out infinite bounce;display:inline-block}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.drop-zone p{color:var(--dusty-grape);margin-bottom:2px;font-size:1.08rem;font-weight:600}.dz-hint{color:var(--sandy-brown);opacity:.9;margin-top:6px;font-size:.78rem;font-weight:500}.file-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;display:grid}.file-card{opacity:0;cursor:pointer;background:#fff;border:1px solid #4f47891c;border-radius:16px;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s;animation:.45s ease-out forwards cardIn;display:flex;overflow:hidden;box-shadow:0 6px 20px -8px #20133514}@keyframes cardIn{0%{opacity:0;transform:translateY(14px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.file-card:hover{border-color:var(--dusty-grape);box-shadow:var(--shadow-strong);transform:translateY(-5px)}.file-card.processing{border-color:var(--banana-cream);cursor:default}.file-card.done{border-color:#4ade80}.file-card.error{cursor:default;border-color:#f87171}.file-thumb{background:var(--ivory);place-items:center;width:100%;height:160px;display:grid;position:relative;overflow:hidden}.file-thumb img{object-fit:cover;width:100%;height:100%;display:block}.file-thumb .empty{color:#4f478966;font-size:.82rem;font-weight:700}.file-status{color:#fff;letter-spacing:.05em;pointer-events:none;text-transform:uppercase;background:#201335cc;border-radius:11px;justify-content:space-between;gap:8px;padding:6px 11px;font-size:.68rem;font-weight:800;display:flex;position:absolute;top:10px;left:10px;right:10px}.file-info{flex-direction:column;gap:7px;padding:13px 15px;display:flex}.file-name{color:var(--midnight-violet);white-space:nowrap;text-overflow:ellipsis;font-size:.84rem;font-weight:800;overflow:hidden}.file-meta{color:var(--dusty-grape);font-size:.7rem}.progress-panel{color:var(--dusty-grape);gap:8px;margin-top:-20px;font-size:.82rem;font-weight:600;display:grid}.progress-panel[hidden]{display:none}.progress-heading{justify-content:space-between;gap:12px;display:flex}.progress-heading span:first-child{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.progress-heading span:last-child{flex:none}.progress-panel progress{width:100%;height:8px;accent-color:var(--dusty-grape);background:#4f478924;border:0;border-radius:999px;display:block;overflow:hidden}.progress-panel progress::-webkit-progress-bar{background:#4f478924;border-radius:999px}.progress-panel progress::-webkit-progress-value{background:var(--dusty-grape);border-radius:999px;transition:width .18s}.progress-panel progress::-moz-progress-bar{background:var(--dusty-grape);border-radius:999px}.actions{justify-content:flex-end;gap:12px;margin-top:8px;display:flex}button.btn-primary{background:var(--dusty-grape);color:var(--ivory);font-family:var(--font);cursor:pointer;border:none;border-radius:14px;align-items:center;gap:9px;padding:13px 30px;font-size:.98rem;font-weight:800;transition:background .18s,transform .1s,box-shadow .18s;display:inline-flex;box-shadow:0 8px 22px -10px #4f47898c}button.btn-primary:hover:not(:disabled){background:var(--midnight-violet);transform:translateY(-2px);box-shadow:0 12px 28px -10px #4f4789a6}button.btn-primary:active:not(:disabled){transform:scale(.96)}button.btn-primary:disabled{opacity:.5;cursor:not-allowed;background:var(--dusty-grape);box-shadow:none}.btn-redo{background:var(--banana-cream);color:var(--midnight-violet);width:42px;height:42px;font-family:var(--font);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;font-size:1.3rem;font-weight:800;transition:background .18s,transform .1s,box-shadow .18s;display:inline-flex;box-shadow:0 4px 14px -6px #fce76280}.btn-redo:hover:not(:disabled){background:#ffef8c;transform:rotate(-15deg)scale(1.08)}.btn-redo:active:not(:disabled){transform:rotate(-8deg)scale(.94)}.btn-redo:disabled{opacity:.5;cursor:not-allowed;background:var(--banana-cream);box-shadow:none}.modal-edit-corners{background:var(--dusty-grape);width:32px;height:32px;color:var(--ivory);cursor:pointer;border:none;border-radius:8px;place-items:center;font-size:1.1rem;transition:background .18s,transform .1s;display:grid}.modal-edit-corners:hover{background:var(--midnight-violet);transform:scale(1.08)}.modal-edit-corners:active{transform:scale(.92)}.corner-btn-confirm{background:var(--banana-cream);color:var(--midnight-violet);font-family:var(--font);cursor:pointer;border:none;border-radius:8px;padding:8px 20px;font-size:.9rem;font-weight:800;transition:background .18s,transform .1s;box-shadow:0 4px 12px -6px #fce76273}.corner-btn-confirm:hover{background:#ffef8c;transform:scale(1.05)}.corner-btn-confirm:active{transform:scale(.94)}.corner-btn-cancel{color:var(--midnight-violet);font-family:var(--font);cursor:pointer;background:#ffffffe6;border:1px solid #4f47894d;border-radius:8px;padding:8px 20px;font-size:.9rem;font-weight:800;transition:background .18s,transform .1s}.corner-btn-cancel:hover{background:#f3f4f6;transform:scale(1.05)}.corner-btn-cancel:active{transform:scale(.94)}.sidebar{z-index:50;background:#fff;border-left:1px solid #4f47891a;flex-direction:column;width:350px;transition:transform .4s cubic-bezier(.2,0,0,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-18px 0 44px -20px #20133542}.sidebar.open{transform:translate(0)}.sidebar-header{background:#fce76214;border-bottom:1px solid #4f478914;justify-content:space-between;align-items:center;padding:20px 26px;display:flex}.sidebar-header span{color:var(--midnight-violet);letter-spacing:-.02em;font-size:1.1rem;font-weight:800}.btn-close{color:var(--dusty-grape);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:1.8rem;line-height:1}.settings-content{flex-direction:column;flex:1;gap:22px;padding:26px;display:flex;overflow-y:auto}.settings-grid{flex-direction:column;gap:15px;display:flex}.setting{flex-direction:column;gap:8px;display:flex}.setting-header{justify-content:space-between;align-items:baseline;display:flex}.setting-label{text-transform:uppercase;letter-spacing:.08em;color:var(--dusty-grape);font-size:.74rem;font-weight:800}.setting-value{color:var(--midnight-violet);font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:800}.setting-controls{align-items:center;gap:8px;display:flex}.setting input[type=range]{-webkit-appearance:none;background:#4f47891f;border:none;border-radius:4px;outline:none;flex:1;height:7px}.setting input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--sandy-brown);cursor:pointer;border:2.5px solid #fff;border-radius:50%;width:18px;height:18px;transition:transform .1s;box-shadow:0 3px 8px #ffb17a80}.setting input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15)}.setting input[type=range]::-moz-range-thumb{background:var(--sandy-brown);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 3px 8px #ffb17a80}.setting input[type=number]{width:70px;color:var(--midnight-violet);font-family:var(--font);text-align:right;background:#fff;border:1px solid #4f47892e;border-radius:10px;padding:6px 8px;font-size:.82rem}.setting input[type=number]:focus{border-color:var(--dusty-grape);outline:none;box-shadow:0 0 0 3px #4f478926}.toggles{border-top:1px solid #4f478914;flex-direction:column;gap:12px;padding-top:10px;display:flex}.toggle{cursor:pointer;color:var(--midnight-violet);align-items:center;gap:12px;font-size:.9rem;font-weight:700;transition:color .2s;display:flex}.toggle:hover{color:var(--dusty-grape)}.toggle input{accent-color:var(--dusty-grape);width:21px;height:21px}.sidebar-footer{background:#fbfcfd;border-top:1px solid #4f478914;padding:18px 26px}.btn-secondary{background:var(--banana-cream);color:var(--midnight-violet);font-family:var(--font);cursor:pointer;border:none;border-radius:12px;padding:11px 24px;font-size:.88rem;font-weight:800;transition:transform .1s,background .18s;box-shadow:0 4px 12px -6px #fce76273}.btn-secondary:hover{background:#ffef8c;transform:scale(1.05)}.btn-secondary:active{transform:scale(.94)}.hidden{display:none!important}.sidebar-backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;z-index:45;background:#20133566;transition:opacity .4s;position:fixed;inset:0}.sidebar-backdrop.visible{opacity:1;pointer-events:auto}.modal{z-index:100;display:none;position:fixed;inset:0}.modal.open{display:block}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#20133573;position:absolute;inset:0}.modal-panel{background:#fff;border-radius:24px;flex-direction:column;width:min(920px,92vw);max-height:88vh;animation:.3s cubic-bezier(.2,0,0,1) forwards modalIn;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)scale(.95);box-shadow:0 24px 60px -20px #20133559}@keyframes modalIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.9)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.modal-close{width:36px;height:36px;color:var(--midnight-violet);cursor:pointer;z-index:5;background:#2013351a;border:none;border-radius:50%;place-items:center;font-size:1.6rem;transition:background .2s;display:grid;position:absolute;top:14px;right:14px}.modal-close:hover{background:#20133540}.modal-header{background:#fbfcfd;border-bottom:1px solid #4f478914;justify-content:space-between;align-items:center;padding:22px 70px 22px 28px;display:flex;position:relative}.modal-title{color:var(--midnight-violet);letter-spacing:-.02em;font-size:1.1rem;font-weight:800}.modal-filename{color:var(--dusty-grape);background:var(--ivory);white-space:nowrap;text-overflow:ellipsis;border-radius:10px;max-width:30%;margin-left:auto;padding:4px 10px;font-size:.78rem;font-weight:600;overflow:hidden}.modal-pair{gap:0;padding:24px;display:flex;overflow:auto}.modal-side{border-right:1px solid #4f47890f;flex-direction:column;flex:1;gap:10px;display:flex}.modal-side:last-child{border-right:none}.modal-side-label{text-transform:uppercase;letter-spacing:.08em;color:var(--dusty-grape);font-size:.78rem;font-weight:800}.modal-side-thumb{background:var(--ivory);border-radius:16px;flex:1;place-items:center;min-height:300px;display:grid;overflow:hidden}.modal-side-thumb img{object-fit:contain;max-width:100%;max-height:100%;display:block}@media (width<=640px){.sidebar{width:100vw}.main{padding:28px 18px}.header{padding:18px}.drop-zone{padding:48px 18px}.title{font-size:1.25rem}.modal-panel{width:90vw;height:85vh}.modal-pair{flex-direction:column;padding:16px;overflow:auto}.modal-side{border-bottom:1px solid #4f47890f;border-right:none}.modal-side:last-child{border-bottom:none}.modal-side-thumb{min-height:200px}}
