*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{color:#c8c8c8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#181818;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:clamp(14px,1.1vw,15px);font-weight:400;line-height:1.5}#app{flex-direction:column;height:100%;display:flex}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#333;border-radius:0}::-webkit-scrollbar-thumb:hover{background:#444}.app-title{color:#e0e0e0;align-items:center;display:flex}.logo{width:auto;height:1em;display:block}.logo-sm{height:14px}.logo-lg{height:20px}input,select{color:#c8c8c8;appearance:none;background:#1c1c1c;border:1px solid #2a2a2a;border-radius:2px;outline:none;font-family:inherit;font-size:clamp(13px,1vw,14px);transition:border-color .15s,background .15s}input:focus,select:focus{background:#202020;border-color:#e8740e}input::placeholder{color:#555}.setup-screen{z-index:100;background:#181818;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.setup-card{background:#1c1c1c;border:1px solid #2a2a2a;border-radius:2px;flex-direction:column;gap:20px;width:420px;max-width:calc(100vw - 32px);padding:40px 48px;display:flex}.setup-card .app-title{color:#e8740e;justify-content:center}.setup-card .logo-lg{height:28px}.setup-subtitle{color:#666;text-align:center;margin-top:-12px;font-size:clamp(12px,.9vw,13px)}.setup-card form{flex-direction:column;gap:10px;display:flex}.setup-card input{width:100%;padding:10px 12px;font-size:clamp(13px,1vw,14px)}.setup-card button[type=submit]{color:#fff;letter-spacing:.03em;cursor:pointer;background:#e8740e;border:none;border-radius:2px;width:100%;margin-top:4px;padding:11px 16px;font-family:inherit;font-size:clamp(13px,1vw,14px);font-weight:500;transition:background .15s,opacity .15s}.setup-card button[type=submit]:hover{background:#f08020}.setup-card button[type=submit]:active{background:#cc6609}.setup-card button[type=submit]:disabled{opacity:.45;cursor:not-allowed}.setup-error{color:#e05555;text-align:center;margin-top:2px;font-size:clamp(12px,.9vw,13px)}.app-main{flex-direction:column;height:100%;display:flex;overflow:hidden}.top-bar{background:#1a1a1a;border-bottom:1px solid #2a2a2a;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;height:44px;padding:0 16px;display:flex}.top-bar-left{flex-shrink:0;align-items:center;gap:12px;display:flex}.top-bar-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.top-btn{color:#999;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #333;border-radius:2px;height:28px;padding:0 12px;font-family:inherit;font-size:clamp(12px,.9vw,13px);font-weight:400;transition:color .15s,border-color .15s,background .15s}.top-btn:hover{color:#c8c8c8;background:#242424;border-color:#444}.top-btn.active{color:#e8740e;background:#e8740e14;border-color:#e8740e}.top-select{color:#b0b0b0;cursor:pointer;white-space:nowrap;background:#1c1c1c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") right 8px center no-repeat;border:1px solid #333;border-radius:2px;min-width:120px;max-width:200px;height:28px;padding:0 24px 0 10px;font-family:inherit;font-size:clamp(12px,.9vw,13px);transition:border-color .15s,background-color .15s}.top-select:hover{background-color:#242424;border-color:#444}.top-select:focus{background-color:#202020;border-color:#e8740e}.bg-color-group{align-items:center;gap:3px;display:flex}.bg-preset{cursor:pointer;border:2px solid #333;border-radius:3px;width:22px;height:22px;padding:0;font-size:0;transition:border-color .15s}.bg-preset:hover{border-color:#555}.bg-preset.active{border-color:#e8740e}.bg-swatch{cursor:pointer;border:2px solid #333;border-radius:3px;width:22px;height:22px;transition:border-color .15s;display:block;position:relative;overflow:hidden}.bg-swatch:hover{border-color:#555}.bg-swatch input[type=color]{cursor:pointer;border:none;width:calc(100% + 16px);height:calc(100% + 16px);padding:0;position:absolute;inset:-8px}.download-btn{color:#fff;letter-spacing:.02em;cursor:pointer;white-space:nowrap;background:#e8740e;border:none;border-radius:2px;height:28px;padding:0 14px;font-family:inherit;font-size:clamp(12px,.9vw,13px);font-weight:500;transition:background .15s,opacity .15s}.download-btn:hover:not(:disabled){background:#f08020}.download-btn:active:not(:disabled){background:#cc6609}.download-btn:disabled{color:#555;cursor:not-allowed;background:#2a2a2a}.content-area{flex-direction:row;flex:1;min-height:0;display:flex;overflow:hidden}.source-panel{background:#1a1a1a;border-right:1px solid #2a2a2a;flex-direction:column;flex-shrink:0;width:380px;display:flex;position:relative;overflow:hidden auto}.panel-header{z-index:1;background:#1a1a1a;border-bottom:1px solid #222;flex-shrink:0;align-items:center;gap:8px;height:36px;padding:0 8px 0 12px;display:flex;position:sticky;top:0}.panel-label{letter-spacing:.1em;text-transform:uppercase;color:#555;flex-shrink:0;margin-right:auto;font-size:11px;font-weight:500}.panel-controls{flex-shrink:0;align-items:center;gap:6px;display:flex}.panel-controls .top-btn{height:24px;padding:0 8px;font-size:11px}.panel-controls .top-select{background-position:right 6px center;min-width:0;max-width:150px;height:24px;padding:0 20px 0 8px;font-size:11px}.grid-container{flex:1;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;display:grid}.grid-cell{aspect-ratio:1;cursor:pointer;background-color:#242424;background-position:50%;background-size:cover;transition:opacity .15s;position:relative;overflow:hidden}.grid-cell:hover{opacity:.85}.grid-cell.selected{outline-offset:-2px;outline:2px solid #e8740e}.grid-cell.selected:before{content:"";z-index:1;background:#e8740e2e;position:absolute;inset:0}.grid-cell.selected:after{content:"";z-index:2;background:#e8740e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 3l2 2L7 1' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% no-repeat;border-radius:50%;width:14px;height:14px;position:absolute;bottom:3px;right:3px;box-shadow:0 1px 4px #00000080}.hover-preview{z-index:200;pointer-events:none;background:#1c1c1c;border:1px solid #333;border-radius:2px;width:min(520px,100vw - 420px);padding:6px;position:fixed;box-shadow:0 8px 32px #000000b3}.preview-img{background:#242424;border-radius:1px;width:100%;height:auto;display:block}.preview-info{justify-content:space-between;align-items:flex-end;gap:8px;padding:8px 4px 2px;display:flex}.preview-dims{color:#666;letter-spacing:.03em;flex-shrink:0;font-size:11px}.preview-right{flex-direction:column;align-items:flex-end;gap:1px;min-width:0;display:flex}.preview-date{color:#555;letter-spacing:.02em;font-size:11px}.preview-filename{color:#555;letter-spacing:.02em;white-space:nowrap;text-overflow:ellipsis;text-align:right;direction:rtl;max-width:240px;font-size:11px;overflow:hidden}.center-panel{background:#111;flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.crop-workspace{background:#111;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.cropper-container{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.cropper-container img{object-fit:contain;max-width:80%;max-height:80%}.cropper-container cropper-canvas{width:100%!important;height:100%!important}.zoom-controls{z-index:10;gap:2px;display:flex;position:absolute;bottom:12px;right:12px}.zoom-btn{color:#ccc;cursor:pointer;background:#0009;border:1px solid #ffffff1f;border-radius:2px;width:28px;height:28px;padding:0;font-size:0;line-height:0;transition:background .15s,color .15s}.zoom-btn:hover{color:#fff;background:#000c}.zoom-btn:focus{outline:none}.placeholder-text{color:#444;letter-spacing:.03em;-webkit-user-select:none;user-select:none;font-size:clamp(13px,1vw,14px)}.filmstrip{background:#1a1a1a;border-top:1px solid #2a2a2a;flex-shrink:0;align-items:center;gap:10px;height:200px;padding:0 14px;display:flex;position:relative;overflow:hidden}.filmstrip-strip{scrollbar-width:thin;scrollbar-color:#333 #1a1a1a;flex-direction:row;flex:1;align-items:center;gap:6px;padding:4px 0;display:flex;overflow:auto hidden}.filmstrip-strip::-webkit-scrollbar{height:4px}.filmstrip-strip::-webkit-scrollbar-track{background:#1a1a1a}.filmstrip-strip::-webkit-scrollbar-thumb{background:#333}.filmstrip-item{cursor:pointer;aspect-ratio:1;background-color:#242424;background-position:50%;background-size:cover;border-radius:6px;flex-shrink:0;min-width:80px;height:176px;transition:box-shadow .15s;position:relative}.filmstrip-item:hover{box-shadow:inset 0 0 0 2px #555}.filmstrip-remove{color:#fff;cursor:pointer;opacity:0;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;padding:0;font-size:14px;line-height:1;transition:opacity .15s;display:flex;position:absolute;top:4px;right:4px}.filmstrip-item:hover .filmstrip-remove{opacity:1}.filmstrip-remove:hover{background:#dc3232cc}.filmstrip-item.active{box-shadow:inset 0 0 0 3px #e8740e,0 0 8px #e8740e66}.filmstrip-item.cropped:after{content:"";background:#22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 3l2 2 4-4'/%3E%3C/svg%3E") 50% no-repeat;border-radius:50%;width:16px;height:16px;position:absolute;bottom:6px;right:6px}.filmstrip-scroll-btn{color:#ccc;cursor:pointer;z-index:2;background:#000000b3;border:1px solid #ffffff1a;border-radius:4px;width:28px;height:56px;padding:0;line-height:0;transition:background .15s,color .15s;position:absolute;top:50%;transform:translateY(-50%)}.filmstrip-scroll-btn:hover{color:#fff;background:#000000e6}.filmstrip-scroll-left{left:6px}.filmstrip-scroll-right{right:6px}.toast{color:#c8c8c8;z-index:1000;text-align:center;pointer-events:none;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:2px;max-width:400px;padding:10px 20px;font-size:clamp(12px,.9vw,13px);position:fixed;bottom:80px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0009}.toast-error{color:#e07070;background:#2a1515;border-color:#5a2020}.toast-info{color:#8ab0d8;background:#1c2230;border-color:#2a3650}[hidden]{display:none!important}