:root{--bg: #0b141a;--bg-soft: #111b21;--panel: #1f2c34;--panel-2: #233138;--border: #2a3942;--text: #e9edef;--text-dim: #8696a0;--accent: #25d366;--accent-d: #1faa52;--warn: #f0b429;--danger: #f15c6d;--radius: 14px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1200px 600px at 50% -10%,#14242e 0%,var(--bg) 60%);color:var(--text);-webkit-font-smoothing:antialiased}.app{max-width:980px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}@media (max-width: 760px){.app__header h1{font-size:26px}.app__subtitle{font-size:14px}}.adv{margin-top:6px;border-top:1px solid var(--border);padding-top:12px}.adv>summary{cursor:pointer;color:var(--text-dim);font-size:13px;list-style:none;-webkit-user-select:none;user-select:none;padding:4px 0}.adv>summary::-webkit-details-marker{display:none}.adv>summary:before{content:"⚙️ "}.adv[open]>summary{color:var(--text);margin-bottom:10px}.app__header{text-align:center;margin-bottom:22px}.app__header h1{margin:0;font-size:clamp(26px,4vw,38px);letter-spacing:-.5px}.app__header h1 small{display:block;font-size:.45em;font-weight:500;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase}.app__logo{filter:drop-shadow(0 2px 6px rgba(37,211,102,.5))}.app__subtitle{max-width:620px;margin:12px auto 0;color:var(--text-dim);line-height:1.55;font-size:15px}.app__subtitle strong{color:var(--text)}.dropzone{border:2px dashed var(--border);border-radius:22px;background:var(--bg-soft);padding:56px 24px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,transform .1s}.dropzone:hover{border-color:var(--accent)}.dropzone--active{border-color:var(--accent);background:#13242b;transform:scale(1.01)}.dropzone__icon{font-size:52px}.dropzone__title{font-size:19px;margin:12px 0 4px;font-weight:600}.dropzone__hint{margin:0;color:var(--text-dim)}.dropzone__formats{margin:16px 0 0;color:var(--text-dim);font-size:13px;letter-spacing:1px}.workspace{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}@media (max-width: 760px){.workspace{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.badge{font-size:13px;font-weight:600;padding:5px 10px;border-radius:999px;border:1px solid var(--border)}.badge--animated{color:#c9a3ff;border-color:#4a3a6b;background:#241b33}.badge--static{color:#8fd6ff;border-color:#2a4a5e;background:#16303d}.link-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px}.link-btn:hover{color:var(--text)}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.preview-cell{margin:0}.preview-cell figcaption{font-size:12px;color:var(--text-dim);margin-bottom:6px;text-align:center}.checker{aspect-ratio:1;border-radius:10px;overflow:hidden;display:grid;place-items:center;background-color:#2a3942;background-image:linear-gradient(45deg,#1c2a31 25%,transparent 25%),linear-gradient(-45deg,#1c2a31 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1c2a31 75%),linear-gradient(-45deg,transparent 75%,#1c2a31 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.checker img,.checker video{max-width:100%;max-height:100%;display:block}.placeholder{color:var(--text-dim);font-size:14px}.frame{position:relative;width:100%;max-width:360px;margin:0 auto;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:grab;touch-action:none;background-color:#2a3942;background-image:linear-gradient(45deg,#1c2a31 25%,transparent 25%),linear-gradient(-45deg,#1c2a31 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1c2a31 75%),linear-gradient(-45deg,transparent 75%,#1c2a31 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.frame:active{cursor:grabbing}.frame__guide{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:12px;box-shadow:inset 0 0 0 2px #25d36673}.frame-hint{text-align:center;color:var(--text-dim);font-size:12px;margin:10px 0 0}.zoom-row{display:flex;gap:8px;align-items:center}.zoom-row input[type=range]{flex:1;accent-color:var(--accent)}.zoom-row .chip{flex:0 0 auto;width:auto;padding:9px 12px}.result-bar{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px}.result-bar--warn{border-color:var(--warn)}.result-bar--warn span{color:var(--warn)}.result-actions{display:flex;gap:8px;flex-wrap:wrap}.btn--wa{background:#25d366;color:#062b16;border-color:#25d366}.wa-note{margin:10px 2px 0;font-size:12px;color:var(--text-dim);line-height:1.5}.pack{margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}.pack__head{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:10px}.pack__head span{color:var(--text-dim)}.pack__strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.pack__thumb,.pack__add{position:relative;width:56px;height:56px;border-radius:8px;border:1px solid var(--border);background:#2a3942;cursor:pointer;padding:0;overflow:hidden}.pack__thumb img{width:100%;height:100%;object-fit:contain;display:block}.pack__x{position:absolute;top:-1px;right:1px;color:var(--danger);font-weight:700;font-size:16px;text-shadow:0 0 3px #000}.pack__add{color:var(--accent);font-size:26px;line-height:1;display:grid;place-items:center}.pack__add:hover{border-color:var(--accent)}.controls-panel h2{margin:0 0 14px;font-size:17px}.field{display:block;margin-bottom:16px}.field__label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:7px}.field input[type=range]{width:100%;accent-color:var(--accent)}.seg,.bg-row{display:flex;gap:8px}.seg button,.chip{flex:1;background:var(--panel-2);color:var(--text-dim);border:1px solid var(--border);border-radius:9px;padding:9px;cursor:pointer;font-size:14px;transition:all .15s}.seg__on,.chip--on{background:var(--accent);color:#062b16;border-color:var(--accent);font-weight:600}.bg-row input[type=color]{width:46px;height:40px;padding:2px;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;cursor:pointer}.note{font-size:12px;color:var(--text-dim);line-height:1.5;margin:10px 0 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:filter .15s,transform .05s}.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);color:#062b16;border-color:var(--accent)}.btn--block{width:100%;margin-top:6px}.btn:disabled{opacity:.6;cursor:progress}.progress{position:relative;margin-top:12px;height:26px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;overflow:hidden}.progress__bar{height:100%;background:linear-gradient(90deg,var(--accent-d),var(--accent));transition:width .2s}.progress__label{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}.error{color:var(--danger);font-size:13px;margin:12px 0 0}.app__footer{margin-top:30px;text-align:center;color:var(--text-dim);font-size:13px;line-height:1.6}.app__footer code{background:var(--panel);padding:1px 6px;border-radius:6px;border:1px solid var(--border)}