.component-studio,.component-editor{--cs-line:#2a4657;background:#0d1c29;color:#e5edf3;border:1px solid #45616e;border-radius:16px;padding:24px;width:min(1160px,94vw);max-height:92vh;box-sizing:border-box;font:14px/1.5 system-ui;box-shadow:0 30px 100px #0009}.component-studio::backdrop,.component-editor::backdrop{background:#020914bb;backdrop-filter:blur(4px)}.component-studio header{display:flex;justify-content:space-between;align-items:start}.component-studio h2{font-size:32px;letter-spacing:-1px;margin:5px 0}.component-studio header small{font-size:10px;letter-spacing:2px;color:#82d9b7}.cs-intro{color:#9bb3c5;margin:0 0 20px;max-width:800px}.component-studio button,.component-editor button{cursor:pointer;border:1px solid #345162;border-radius:7px;padding:8px 12px;background:#172e3e;color:inherit;font:inherit}.component-studio button:hover,.component-editor button:hover{border-color:#83e1bd}.component-studio button[aria-pressed=true],.component-editor button[aria-pressed=true]{border-color:#83e1bd;background:#1b3d3b}.component-studio button:disabled{opacity:.4;cursor:default}.component-studio input,.component-studio select,.component-editor input,.component-editor textarea{background:#0a1722;border:1px solid #345162;color:#e5edf3;border-radius:6px;padding:10px;font:inherit;min-width:0}.cs-toolbar{display:flex;gap:8px;flex-wrap:wrap}.cs-toolbar input{flex:1;min-width:180px}.cs-count{color:#8ca6b8;font-size:12px;margin:12px 0}.cs-layout{display:grid;grid-template-columns:340px 1fr;gap:24px;min-height:350px}.cs-results{max-height:58vh;overflow:auto;display:flex;flex-direction:column;gap:7px}.cs-results>button{display:flex;text-align:left;gap:12px;align-items:center;padding:8px;min-height:84px}.cs-results b{font-size:12px;display:block}.cs-results small{font-size:10px;display:block;color:#9bb3c5}.cs-mini{width:68px;height:65px;flex-shrink:0;display:grid;place-items:center;color:#91d9e6}.cs-mini svg{max-width:100%;max-height:65px}.cs-badge{display:inline-block;border-radius:20px;background:#253b49;color:#c0d1dd;padding:2px 8px;font-size:10px;font-style:normal;margin:4px 0}.cs-badge.educational{background:#184c3e;color:#a2e8c8}.cs-badge.reference{background:#493b23;color:#f6d292}.cs-badge.review{background:#4b2c36;color:#f1aebc}.cs-detail{overflow:auto;max-height:58vh;padding-right:12px}.cs-detail-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.cs-detail h3{font-size:23px;margin:3px 0}.cs-detail code{font-size:11px;color:#89a7ba}.cs-detail p{color:#afc3d0}.cs-detail table{width:100%;border-collapse:collapse;font-size:12px}.cs-detail th,.cs-detail td{padding:8px 12px;text-align:left;border-bottom:1px solid #284252}.cs-detail a{color:#87dfbc}.cs-preview{background:#081620;border:1px solid #284252;border-radius:12px;padding:15px;display:flex;justify-content:center;color:#b6e7f0;margin:12px 0}.cs-preview svg{max-height:300px;width:100%;max-width:500px}.cs-preview-switch{display:flex;gap:8px}.cs-preview-switch button{font-size:11px}.cs-model{border-left:3px solid #e6bd78;padding:8px 12px;font-size:12px}.component-studio footer{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:11px;color:#9bb3c5}.component-studio footer>span:last-child{margin-left:auto;max-width:400px}.component-editor{width:min(650px,94vw)}.component-editor label{display:block;margin:8px 0}.component-editor label input,.component-editor textarea{display:block;width:100%;box-sizing:border-box}.cs-editor-tools{display:flex;gap:5px;flex-wrap:wrap;margin:12px 0}.cs-editor-tools button{font-size:11px}.cs-draw{display:block;height:280px;max-width:100%;margin:auto;color:#b6e7f0;background:#081620;border:1px solid #345162;touch-action:none}.cs-editor-status{color:#f6d292}.palette-item>.component-preview{width:48px;height:46px;color:#a5deec;flex-shrink:0}.palette-item small{line-height:1.4}#componentStudioOpen{margin:8px 0;font-size:11px;max-width:100%}@media(max-width:700px){.component-studio{padding:15px}.cs-layout{grid-template-columns:1fr}.cs-results{max-height:22vh}.cs-detail{max-height:45vh}.component-studio h2{font-size:25px}.component-studio footer>span:last-child{display:none}}
.component-studio[open]{display:flex;flex-direction:column;height:92vh;overflow:hidden}.component-studio header,.component-studio .cs-intro,.component-studio .cs-toolbar,.component-studio .cs-count,.component-studio footer{flex-shrink:0}.cs-layout{flex:1;min-height:0;overflow:hidden}.cs-results,.cs-detail{max-height:none;height:100%;box-sizing:border-box}.cs-preview svg{height:210px;max-height:210px}.cs-detail h4{margin:12px 0}.cs-preview{padding:8px}.component-studio header small{display:block}.component-studio footer{margin-top:10px}@media(max-width:700px){.cs-layout{grid-template-rows:130px minmax(0,1fr)}.cs-results{max-height:130px}.cs-detail{max-height:none}.cs-intro{font-size:11px;margin-bottom:8px}.component-studio h2{margin:0 0 6px}.cs-toolbar select{max-width:46%}.cs-toolbar button{font-size:11px}}