:root{--bg:#0f0d10;--panel:#19171c;--panel2:#19171c;--line:#19610e;--text:#f3fdf2;--muted:#7ae969;--accent:#9f5cf6;--accent2:#3dee22;--danger:#fb7171}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#15520c 0,transparent 28%),var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;min-height:100vh}.topbar{height:92px;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#0b0d13dd;position:sticky;top:0;z-index:10;backdrop-filter:blur(14px)}h1{font-size:23px;margin:0}h1 span{color:var(--accent2)}.topbar p{margin:7px 0 0;color:var(--muted);font-size:13px}.status{padding:9px 13px;border-radius:20px;background:var(--panel2);font-size:12px}.status.ok{color:#94ef86}.status.bad{color:#fda4a4}.layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;min-height:calc(100vh - 92px)}.workspace{padding:22px;min-width:0}.inspector{border-left:1px solid var(--line);background:#161419;padding:16px}.drop-zone{height:112px;border:1.5px dashed #2fb61a;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;color:var(--muted);transition:.2s}.drop-zone:hover,.drop-zone.drag{background:#8b5cf611;border-color:var(--accent)}.drop-zone strong{color:var(--text)}.drop-icon{font-size:25px;color:var(--accent2)}.preview-panel{margin-top:18px;min-height:390px;border-radius:14px;background:#080709;display:grid;place-items:center;position:relative;overflow:hidden}.stage{width:100%;height:390px;display:none;position:relative;align-items:center;justify-content:center}.stage.active{display:flex}.stage video{max-height:100%;max-width:100%}.empty-preview{color:#697386}.text-preview{position:absolute;left:8%;right:8%;text-align:center;font-weight:700;text-shadow:0 2px 6px #000;pointer-events:none;white-space:pre-wrap}.image-preview{position:absolute;max-height:60%;display:none;pointer-events:none}.timeline-section{margin-top:18px}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title h2{font-size:16px}.section-title span{font-size:12px;color:var(--muted)}.timeline{display:flex;gap:10px;overflow-x:auto;padding:8px 3px 16px;min-height:122px}.clip{width:180px;flex:0 0 180px;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden;cursor:pointer;position:relative}.clip.selected{border-color:var(--accent);box-shadow:0 0 0 2px #8b5cf633}.thumb{height:74px;background:#060607;display:flex;align-items:center;justify-content:center;overflow:hidden}.thumb video{width:100%;height:100%;object-fit:cover}.clip-info{padding:7px 8px}.clip-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.clip-meta{color:var(--muted);font-size:10px;margin-top:4px}.clip-actions{position:absolute;top:4px;right:4px;display:flex;gap:3px}.icon-btn{border:0;border-radius:5px;background:#0b0d13cc;color:#fff;width:25px;height:25px;cursor:pointer}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;border-bottom:1px solid var(--line);padding-bottom:12px}.tab{border:0;background:transparent;color:var(--muted);padding:8px 2px;cursor:pointer;border-radius:7px}.tab.active{background:var(--panel2);color:var(--text)}.tab-pane{display:none;padding:15px 3px}.tab-pane.active{display:block}.tab-pane h3{font-size:14px;margin:7px 0 13px}.hint,.notice{font-size:12px;color:var(--muted);line-height:1.5}.notice{background:#19171c;border:1px solid var(--line);padding:10px;border-radius:8px;margin:13px 0}label{display:block;color:#bff5b7;font-size:12px;margin:13px 0 6px}output{float:right;color:var(--accent2)}input,select,textarea,button{font:inherit}input[type=number],input[type=file],select,textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:7px;color:var(--text);padding:9px}input[type=range]{width:100%;accent-color:var(--accent)}input[type=color]{width:100%;height:38px;background:var(--panel2);border:1px solid var(--line);border-radius:7px}.row,.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.secondary,.primary,.download{border:1px solid var(--line);border-radius:8px;padding:10px;color:#fff;background:var(--panel2);cursor:pointer;text-align:center;text-decoration:none}.primary{width:100%;border:0;background:linear-gradient(100deg,var(--accent),#76f163);font-weight:700;margin-top:10px}.primary:disabled,.secondary:disabled{opacity:.4;cursor:not-allowed}.check{display:flex;gap:8px;align-items:center}.check input{width:auto}.progress-wrap{display:flex;align-items:center;justify-content:center;gap:9px;margin:14px}.spinner{width:18px;height:18px;border:2px solid #ffffff33;border-top-color:var(--accent2);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.download{display:block;margin-top:12px;background:#104e06;border-color:#27b910}.error{color:#fecdcd;background:#19171c;padding:10px;border-radius:8px;font-size:12px;margin-top:10px}
/* Clips que llegan del Sprite Editor por el bus GOM */
#recvSprite{width:100%;margin-top:10px;border-color:var(--accent);color:#e9dcff}
#recvSpriteList{margin-top:10px}
.recv-card{border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:8px;background:var(--panel);font-size:13px}
.recv-card small{color:var(--muted);font-size:11px;line-height:1.5}
.recv-actions{display:flex;gap:8px;margin-top:9px}
.recv-actions .primary,.recv-actions .secondary{width:auto;flex:1;margin-top:0;padding:8px 10px;font-size:12px}@media(max-width:950px){.layout{grid-template-columns:1fr}.inspector{border-left:0;border-top:1px solid var(--line)}.preview-panel,.stage{min-height:300px;height:300px}}@media(max-width:600px){.topbar{padding:14px;height:auto}.status{display:none}.workspace{padding:12px}.row,.grid2{grid-template-columns:1fr}.clip{width:145px;flex-basis:145px}}