/* UI Component Studio — isolated extension layer */
.component-studio-dialog { width:min(1560px,calc(100vw - 24px)); height:min(940px,calc(100vh - 24px)); max-width:none; max-height:none; padding:0; border:0; border-radius:22px; background:#f4f5f7; color:var(--text); box-shadow:0 30px 100px rgba(20,24,32,.28); }
.component-studio-dialog::backdrop { background:rgba(20,24,32,.38); backdrop-filter:blur(4px); }
.cs-shell { display:grid; grid-template-rows:auto 1fr; height:100%; min-height:0; }
.cs-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; background:#fff; border-bottom:1px solid var(--line); }
.cs-title { display:flex; align-items:center; gap:10px; min-width:0; }
.cs-title h2 { margin:0; white-space:nowrap; }
.cs-title-meta { color:var(--muted); font-size:12px; }
.cs-top-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.cs-grid { min-height:0; display:grid; grid-template-columns:300px minmax(420px,1fr) 360px; gap:10px; padding:10px; }
.cs-panel { min-width:0; min-height:0; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:18px; }
.cs-browser { display:grid; grid-template-rows:auto auto auto 1fr; }
.cs-browser-head,.cs-inspector-head { padding:14px; border-bottom:1px solid var(--line); }
.cs-search { display:flex; align-items:center; gap:8px; margin:10px 12px 0; padding:9px 11px; border:1px solid var(--line); border-radius:11px; background:#fafafa; }
.cs-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; }
.cs-filter-row { display:flex; gap:6px; padding:10px 12px; overflow:auto; scrollbar-width:thin; }
.cs-chip { border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 9px; font-size:11px; font-weight:750; white-space:nowrap; }
.cs-chip.is-active { background:#1c1f25; color:#fff; border-color:#1c1f25; }
.cs-preset-list { overflow:auto; padding:0 10px 12px; display:grid; gap:7px; align-content:start; }
.cs-preset-card { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:left; }
.cs-preset-card:hover { border-color:#cfd3da; background:#fbfbfc; }
.cs-preset-card.is-active { border-color:#ffcc33; box-shadow:0 0 0 2px #ffcc3340; }
.cs-preset-mini { width:48px; height:44px; display:grid; place-items:center; border-radius:10px; background:#f4f5f7; font-size:23px; overflow:hidden; pointer-events:none; }
.cs-preset-thumb { transform:scale(.2)!important; transform-origin:center!important; flex:0 0 auto; }
.cs-preset-name { font-size:12px; font-weight:850; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-preset-meta { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.cs-fav { border:0; background:transparent; font-size:16px; color:#b5bac1; padding:5px; }
.cs-fav.is-active { color:#d59c00; }

.cs-preview { display:grid; grid-template-rows:auto auto 1fr auto; min-height:0; }
.cs-preview-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cs-segment { display:flex; gap:3px; padding:3px; border-radius:10px; background:#f1f2f4; }
.cs-segment button { border:0; background:transparent; border-radius:8px; padding:6px 9px; font-size:11px; font-weight:800; }
.cs-segment button.is-active { background:#fff; box-shadow:0 1px 4px rgba(20,24,32,.08); }
.cs-statebar { display:flex; gap:5px; padding:9px 12px; overflow:auto; border-bottom:1px solid var(--line); }
.cs-statebar button { border:1px solid var(--line); background:#fff; border-radius:9px; padding:6px 9px; font-size:10px; font-weight:800; text-transform:capitalize; }
.cs-statebar button.is-active { background:#ffcc33; border-color:#ffcc33; }
.cs-canvas-wrap { min-height:0; overflow:auto; display:grid; place-items:center; padding:22px; background:#eceef2; transition:.2s ease; }
.cs-canvas { width:min(100%,920px); min-height:460px; padding:28px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:18px; background:#fff; border:1px solid #dde0e5; border-radius:18px; box-shadow:0 20px 50px rgba(25,29,36,.08); transition:.2s ease; }
.cs-canvas.is-mobile { width:390px; min-height:620px; align-content:flex-start; padding:22px 14px; }
.cs-preview-foot { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.cs-assets-row { display:flex; gap:6px; overflow:auto; max-width:70%; }
.cs-asset-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:11px; }
.cs-asset-chip input { margin:0; }

.cs-inspector { display:grid; grid-template-rows:auto 1fr auto; min-height:0; }
.cs-inspector-scroll { overflow:auto; padding:8px; }
.cs-section { border:1px solid var(--line); border-radius:12px; margin-bottom:7px; overflow:hidden; background:#fff; }
.cs-section > summary { list-style:none; cursor:pointer; padding:10px 11px; display:flex; justify-content:space-between; font-size:12px; font-weight:850; background:#fafafa; }
.cs-section > summary::-webkit-details-marker { display:none; }
.cs-section > summary::after { content:'+'; color:var(--muted); }
.cs-section[open] > summary::after { content:'−'; }
.cs-fields { padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cs-field { display:grid; gap:4px; min-width:0; font-size:10px; color:var(--muted); }
.cs-field.span-2 { grid-column:1/-1; }
.cs-field input[type="text"],.cs-field input[type="number"],.cs-field input[type="color"],.cs-field select { width:100%; min-width:0; border:1px solid var(--line); border-radius:8px; padding:7px; background:#fff; color:var(--text); }
.cs-field input[type="color"] { min-height:34px; padding:3px; }
.cs-check { display:flex; align-items:center; gap:7px; min-height:34px; color:var(--text); font-size:11px; }
.cs-advanced { grid-column:1/-1; border-top:1px dashed var(--line); padding-top:8px; }
.cs-advanced summary { cursor:pointer; font-size:10px; font-weight:800; color:var(--muted); margin-bottom:7px; }
.cs-advanced-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cs-inspector-foot { display:grid; gap:7px; padding:10px; border-top:1px solid var(--line); }
.cs-inspector-foot .row { display:flex; gap:7px; }
.cs-inspector-foot button { flex:1; }
.cs-validation { font-size:10px; color:var(--muted); }
.cs-validation.is-error { color:#c63e3e; }

/* Generated component renderer */
.se-component { position:relative; isolation:isolate; box-sizing:border-box; width:var(--component-width); min-width:var(--component-min-width); max-width:var(--component-max-width); min-height:var(--component-height); aspect-ratio:var(--component-aspect); display:flex; flex-direction:var(--component-layout); align-items:var(--component-align); justify-content:center; gap:var(--component-gap); padding:var(--component-padding-y) var(--component-padding-x); border:var(--component-border); border-radius:var(--component-radius); background:var(--component-bg); color:var(--component-fg); opacity:var(--component-opacity); box-shadow:var(--component-shadow),var(--component-glow); outline:var(--component-outline); outline-offset:2px; transform:var(--component-transform); transition:transform var(--animation-duration) var(--animation-easing),background var(--animation-duration) var(--animation-easing),box-shadow var(--animation-duration) var(--animation-easing); text-decoration:none; font-family:inherit; overflow:hidden; }
.se-component::after { content:''; position:absolute; left:-1px; right:-1px; bottom:-1px; height:var(--component-bottom-accent); background:var(--component-accent); border-radius:0 0 var(--component-radius) var(--component-radius); z-index:-1; }
.se-component__asset { position:relative; flex:0 0 auto; width:calc(var(--asset-size) + 12px); height:calc(var(--asset-size) + 12px); display:grid; place-items:center; border:var(--asset-container-border); border-radius:12px; background:var(--asset-container-bg); opacity:var(--asset-opacity); transform:rotate(var(--asset-rotation)) scale(var(--asset-scale)); filter:var(--asset-filter); overflow:hidden; }
.se-component__asset.is-background { position:absolute; inset:0; width:100%; height:100%; opacity:.14; border:0; border-radius:0; z-index:-1; }
.se-component__img { width:var(--asset-size); height:var(--asset-size); object-fit:contain; }
.se-component__unicode { font-size:var(--asset-size); line-height:1; }
.se-component__asset-badge { position:absolute; right:0; bottom:0; font-size:10px; background:var(--component-accent); border-radius:999px; padding:2px 4px; }
.se-component__content { min-width:0; display:grid; gap:3px; text-align:var(--text-align); }
.se-component__label { font-size:var(--label-size); font-weight:var(--font-weight); letter-spacing:var(--letter-spacing); text-transform:var(--text-transform); line-height:1.05; display:-webkit-box; -webkit-line-clamp:var(--line-clamp); -webkit-box-orient:vertical; overflow:hidden; }
.se-component__subtitle { color:color-mix(in srgb,var(--component-fg) 64%,transparent); font-size:var(--subtitle-size); line-height:1.2; }
.se-component__eyebrow,.se-component__metadata { font-size:var(--metadata-size); color:color-mix(in srgb,var(--component-fg) 58%,transparent); font-weight:750; text-transform:uppercase; letter-spacing:.07em; }
.se-component__description { font-size:12px; line-height:1.35; color:color-mix(in srgb,var(--component-fg) 72%,transparent); }
.se-component__stat { font-size:20px; font-weight:900; color:var(--component-accent); }
.se-component__badge,.se-component__counter,.se-component__shortcut { position:absolute; top:7px; right:7px; padding:3px 6px; border-radius:999px; background:var(--component-accent); color:#171717; font-size:9px; font-weight:900; border:0; }
.se-component__shortcut { top:auto; bottom:7px; background:#edf0f4; color:#333; }
.se-state-disabled { pointer-events:none; filter:saturate(.45); }

.cs-export-summary { padding:8px 10px; border-radius:10px; background:#f7f8fa; font-size:10px; color:var(--muted); }

@media (max-width:1100px){ .cs-grid{grid-template-columns:250px minmax(360px,1fr) 320px;} }
@media (max-width:840px){
  .component-studio-dialog { width:100vw; height:100dvh; border-radius:0; }
  .cs-grid { display:block; overflow:auto; padding:8px; }
  .cs-panel { margin-bottom:8px; overflow:visible; }
  .cs-browser { max-height:420px; }
  .cs-preset-list { max-height:270px; }
  .cs-preview { min-height:650px; }
  .cs-canvas-wrap { min-height:500px; }
  .cs-inspector { max-height:none; }
  .cs-inspector-scroll { overflow:visible; }
  .cs-topbar { position:sticky; top:0; z-index:5; }
  .cs-title-meta { display:none; }
}

@keyframes seBounce { 0%,100%{transform:var(--component-transform)} 50%{transform:translateY(calc(-8px * var(--animation-intensity))) scale(1.03)} }
@keyframes seShake { 0%,100%{transform:var(--component-transform)} 25%{transform:translateX(calc(-5px * var(--animation-intensity)))} 75%{transform:translateX(calc(5px * var(--animation-intensity)))} }
@keyframes sePulse { 0%,100%{opacity:1} 50%{opacity:.62} }
@keyframes seGlow { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.18)} }
@keyframes seSlide { from{transform:translateX(calc(-14px * var(--animation-intensity)));opacity:.4} to{transform:var(--component-transform);opacity:1} }
@keyframes seFade { from{opacity:.2} to{opacity:var(--component-opacity)} }
.se-animate.se-anim-scale { animation:sePulse var(--animation-duration) var(--animation-easing) 1; }
.se-animate.se-anim-bounce { animation:seBounce var(--animation-duration) var(--animation-easing) 1; }
.se-animate.se-anim-shake { animation:seShake var(--animation-duration) var(--animation-easing) 1; }
.se-animate.se-anim-pulse { animation:sePulse var(--animation-duration) var(--animation-easing) 2; }
.se-animate.se-anim-lift { transform:translateY(calc(-4px * var(--animation-intensity))) scale(1.02); }
.se-animate.se-anim-glow { animation:seGlow var(--animation-duration) var(--animation-easing) 2; }
.se-animate.se-anim-slide { animation:seSlide var(--animation-duration) var(--animation-easing) 1; }
.se-animate.se-anim-fade { animation:seFade var(--animation-duration) var(--animation-easing) 1; }