/* 创意工作室（studio.html）样式 —— 融合 OriginKit / 动效工坊 / 图片工坊
   本文件在 originkit.css 之后引入，body/主题以本文件为准。 */
:root{
  --s-bg:#f5f6fb; --s-bg2:#ffffff; --s-bg3:#eef0f7;
  --s-ink:#1b2030; --s-ink2:#565d72; --s-ink3:#939ab0;
  --s-line:#e6e8f1; --s-line2:#eef0f6;
  --s-ac:#7c3aed; --s-ac2:#4f6ef7; --s-ac3:#22d3ee; --s-pink:#f472b6;
  --s-r:12px; --s-r-sm:9px; --s-r-lg:18px;
  --s-sh:0 1px 2px rgba(20,26,48,.05),0 8px 24px rgba(20,26,48,.07);
  --s-f:14px; --s-mx:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:var(--s-f);color:var(--s-ink);background:var(--s-bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.st-container{max-width:var(--s-mx);margin:0 auto;padding:0 22px}
.st-hero{padding:46px 0 22px;text-align:center}
.st-hero .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--s-ac);
  background:rgba(124,58,237,.09);border:1px solid rgba(124,58,237,.22);border-radius:999px;padding:5px 13px;margin-bottom:14px}
.st-hero h1{font-size:34px;line-height:1.2;margin:0 0 10px;font-weight:900;letter-spacing:-.01em}
.st-hero p{font-size:15px;color:var(--s-ink2);max-width:620px;margin:0 auto}
.st-callout{background:var(--s-bg2);border:1px solid var(--s-line);border-radius:var(--s-r-lg);
  padding:13px 18px;margin:18px auto 22px;max-width:840px;font-size:13px;color:var(--s-ink2);line-height:1.7}
.st-callout b{color:var(--s-ink)}

/* ===== 标签栏 ===== */
.st-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 18px}
.st-tab{border:1px solid var(--s-line);background:var(--s-bg2);color:var(--s-ink2);border-radius:999px;
  padding:9px 18px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:7px}
.st-tab:hover{color:var(--s-ink);border-color:rgba(124,58,237,.45)}
.st-tab .em{font-size:16px}
.st-tab.active{background:linear-gradient(135deg,var(--s-ac),var(--s-ac2));color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(124,58,237,.3)}

/* ===== 面板 ===== */
.st-panel{display:none;animation:stFade .25s ease}
.st-panel.active{display:block}
@keyframes stFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== 动效工坊（类 Motionity） ===== */
.me-wrap{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:start}
@media(max-width:840px){.me-wrap{grid-template-columns:1fr}}
.me-box{background:var(--s-bg2);border:1px solid var(--s-line);border-radius:var(--s-r-lg);padding:14px}
.me-box h3{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--s-ink3);letter-spacing:.05em;text-transform:uppercase}
.me-add{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.me-btn{border:1px solid var(--s-line);background:var(--s-bg3);color:var(--s-ink);border-radius:10px;
  padding:8px 12px;font-size:13px;cursor:pointer;transition:.16s;font-family:inherit}
.me-btn:hover{border-color:var(--s-ac);color:var(--s-ac)}
.me-btn.primary{background:linear-gradient(135deg,var(--s-ac),var(--s-ac2));color:#fff;border-color:transparent}
.me-objlist{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto}
.me-obj{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--s-line);border-radius:10px;
  font-size:13px;cursor:pointer;transition:.16s;background:var(--s-bg)}
.me-obj:hover{border-color:rgba(124,58,237,.4)}
.me-obj.active{border-color:var(--s-ac);background:rgba(124,58,237,.07);font-weight:600}
.me-obj .dot{width:10px;height:10px;border-radius:50%;flex:none}
.me-obj .x{margin-left:auto;color:var(--s-ink3);font-size:14px;line-height:1;padding:2px 4px;border-radius:6px}
.me-obj .x:hover{color:#ef4444;background:rgba(239,68,68,.1)}

.me-stagebox{display:flex;flex-direction:column;gap:12px}
.me-stage{position:relative;height:380px;background:
    radial-gradient(900px 460px at 12% -8%,rgba(124,58,237,.12),transparent 60%),
    radial-gradient(760px 420px at 92% 6%,rgba(34,211,238,.1),transparent 60%),#0b0a14);
  border:1px solid var(--s-line);border-radius:var(--s-r-lg);overflow:hidden}
.me-obj-el{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;user-select:none;will-change:transform,opacity;cursor:grab}
.me-obj-el.rect{background:linear-gradient(135deg,var(--s-ac),var(--s-ac3));border-radius:10px}
.me-obj-el.circle{border-radius:50%;background:linear-gradient(135deg,var(--s-pink),var(--s-ac))}
.me-obj-el.text{background:none;font-size:30px}
.me-selected{outline:2px dashed rgba(255,255,255,.7);outline-offset:3px}

.me-timeline{background:var(--s-bg2);border:1px solid var(--s-line);border-radius:var(--s-r-lg);padding:12px 14px}
.me-tl-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.me-tl-head .time{font-size:12px;color:var(--s-ink3);font-variant-numeric:tabular-nums}
.me-track{position:relative;height:54px;background:var(--s-bg3);border-radius:10px;cursor:pointer;overflow:hidden}
.me-track .grid{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(20,26,48,.07) 1px,transparent 1px);background-size:10% 100%}
.me-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--s-ac);left:0;box-shadow:0 0 8px var(--s-ac);pointer-events:none}
.me-playhead::before{content:"";position:absolute;top:-1px;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--s-ac)}
.me-kf{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--s-ac);transform:translate(-50%,-50%);cursor:grab}
.me-kf.prop2{border-color:var(--s-ac3)}
.me-kf.prop3{border-color:var(--s-pink)}
.me-kf.prop4{border-color:#f59e0b}
.me-kf.prop5{border-color:#22c55e}

.me-props{background:var(--s-bg2);border:1px solid var(--s-line);border-radius:var(--s-r-lg);padding:14px}
.me-props .row{display:grid;grid-template-columns:90px 1fr 64px;align-items:center;gap:10px;margin-bottom:10px}
.me-props label{font-size:13px;color:var(--s-ink2)}
.me-props input[type=range]{width:100%;accent-color:var(--s-ac)}
.me-props .val{font-size:12px;color:var(--s-ink3);text-align:right;font-variant-numeric:tabular-nums}
.me-props .empty{color:var(--s-ink3);font-size:13px;padding:8px 0}
.me-props select,.me-props input[type=text]{font-family:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--s-line);border-radius:9px;color:var(--s-ink);background:var(--s-bg)}
.me-out{margin-top:8px}
.me-out pre{margin:0;background:#0b0a14;border:1px solid var(--s-line);border-radius:10px;padding:12px;max-height:150px;overflow:auto;
  font-size:11px;line-height:1.5;color:#cdd6ee;font-family:"SFMono-Regular",Consolas,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
.me-copy{position:absolute;right:8px;top:8px;font-size:11px;color:var(--s-ac3);background:rgba(11,10,20,.85);
  border:1px solid var(--s-line);border-radius:7px;padding:4px 9px;cursor:pointer}
.me-hint{font-size:12px;color:var(--s-ink3);margin-top:6px;line-height:1.6}

/* ===== 图片工坊（类 Pikimov） ===== */
.ie-wrap{display:grid;grid-template-columns:1fr 290px;gap:16px;align-items:start}
@media(max-width:840px){.ie-wrap{grid-template-columns:1fr}}
.ie-stage{background:
    radial-gradient(900px 460px at 12% -8%,rgba(124,58,237,.1),transparent 60%),
    radial-gradient(760px 420px at 92% 6%,rgba(34,211,238,.08),transparent 60%),#0b0a14);
  border:1px solid var(--s-line);border-radius:var(--s-r-lg);padding:14px;display:flex;align-items:center;justify-content:center;min-height:420px}
.ie-canvas{max-width:100%;max-height:60vh;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);background:#fff}
.ie-panel{background:var(--s-bg2);border:1px solid var(--s-line);border-radius:var(--s-r-lg);padding:14px;display:flex;flex-direction:column;gap:14px}
.ie-group{border-bottom:1px solid var(--s-line);padding-bottom:12px}
.ie-group:last-child{border-bottom:none;padding-bottom:0}
.ie-group h3{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--s-ink3);letter-spacing:.05em;display:flex;align-items:center;gap:7px}
.ie-row{display:grid;grid-template-columns:88px 1fr 46px;align-items:center;gap:9px;margin-bottom:9px}
.ie-row label{font-size:12.5px;color:var(--s-ink2)}
.ie-row input[type=range]{width:100%;accent-color:var(--s-ac)}
.ie-row .v{font-size:11.5px;color:var(--s-ink3);text-align:right;font-variant-numeric:tabular-nums}
.ie-btns{display:flex;gap:7px;flex-wrap:wrap}
.ie-btns .me-btn{flex:1;text-align:center;justify-content:center}
.ie-file{font-size:12.5px;color:var(--s-ac);cursor:pointer;display:inline-block}
.ie-sw{display:flex;gap:6px;flex-wrap:wrap}
.ie-sw button{border:1px solid var(--s-line);background:var(--s-bg3);border-radius:9px;padding:6px 11px;font-size:12.5px;cursor:pointer;color:var(--s-ink);font-family:inherit}
.ie-sw button:hover{border-color:var(--s-ac);color:var(--s-ac)}
.ie-sw button.on{background:linear-gradient(135deg,var(--s-ac),var(--s-ac2));color:#fff;border-color:transparent}
.ie-status{font-size:12px;color:var(--s-ink3);min-height:16px}