.cg-heading { margin-bottom: 1.5rem; }
.cg-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; font-size: .8125rem; color: var(--text-secondary); }
.cg-studio { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2rem; align-items: start; }
.cg-controls { grid-column: 1; grid-row: 1; min-width: 0; }
.cg-preview-panel { grid-column: 2; grid-row: 1; position: sticky; top: 90px; min-width: 0; text-align: center; }
.cg-preview-heading,.cg-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.cg-preview-heading h2,.cg-panel h2 { font-size:1rem; margin:0; }
.cg-preview-heading span,.cg-panel-heading span { font-size:.75rem; color:var(--text-secondary); }
#cgPreview { display:block; max-width:100%; width:auto; height:auto; max-height: min(62vh,650px); margin:0 auto; border-radius:12px; box-shadow:var(--shadow-md); }
.cg-panel { background:var(--bg-card); border:1px solid var(--border-card); border-radius:14px; padding:1.25rem; margin-bottom:1rem; }
.cg-panel summary { cursor:pointer; font-size:1rem; font-weight:700; padding: .25rem 0; }
.cg-panel[open] summary { margin-bottom:1rem; }
.cg-panel label { display:block; font-size:.8125rem; font-weight:600; margin:.9rem 0 .4rem; }
.cg-panel label span { font-weight:400; color:var(--text-secondary); }
.cg-panel textarea,.cg-panel input:not([type=checkbox]):not([type=range]),.cg-panel select { box-sizing:border-box; width:100%; min-width:0; padding:10px; background:var(--bg-primary); color:var(--text-primary); border:1px solid var(--border-card); border-radius:8px; font:inherit; font-size:16px; }
.cg-panel textarea { resize:vertical; line-height:1.5; }
.cg-panel input[type=color] { height:44px; padding:5px!important; }
.cg-panel input[type=range] { width:100%; }
.cg-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1rem; }
.cg-buttons,.cg-slide-picker,.cg-navigation,.cg-export-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.cg-navigation,.cg-export-actions { justify-content:center; align-items:center; margin-top:1rem; }
.cg-navigation span { font-size:.8125rem; min-width:100px; }
.cg-studio button,.cg-toolbar button,.cg-file-button { min-height:44px; padding:10px 13px; font:inherit; font-size:.8125rem; font-weight:600; border:1px solid var(--border-card); border-radius:8px; color:var(--text-primary); background:var(--bg-card); cursor:pointer; text-align:center; }
.cg-studio button:hover,.cg-toolbar button:hover,.cg-file-button:hover { border-color:var(--text-primary); }
.cg-studio button:disabled { opacity:.45; cursor:not-allowed; }
.cg-slide-picker button[aria-pressed=true],.cg-studio .cg-primary { background:var(--btn-bg); color:var(--btn-text); }
.cg-slide-actions { margin:1rem 0; }
.cg-slide-picker { max-height:150px; overflow:auto; padding:3px; }
.cg-slide-picker button { min-width:44px; }
.cg-hint { font-size:.8125rem; color:var(--text-secondary); line-height:1.5; margin:.75rem 0; }
#cgMessage { min-height:1.5em; font-size:.875rem; overflow-wrap:anywhere; }
#cgFitStatus[data-warning=true] { color:var(--text-primary); font-weight:600; }
.cg-file-button { position:relative; display:inline-flex; align-items:center; overflow:hidden; }
.cg-file-button input { position:absolute; opacity:0; inset:0; width:100%; cursor:pointer; }
.cg-panel .cg-checkbox { display:flex; gap:.6rem; align-items:center; min-height:44px; }
.cg-checkbox input { width:18px; height:18px; }
.cg-studio :focus-visible,.cg-toolbar :focus-visible,.cg-file-button:focus-within { outline:2px solid var(--text-primary); outline-offset:3px; }
.cg-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:880px){
 .cg-studio { grid-template-columns:1fr; gap:1.5rem; }
 .cg-preview-panel { grid-column:1; grid-row:1; position:static; }
 .cg-controls { grid-column:1; grid-row:2; }
 #cgPreview { max-height:45vh; }
 .cg-toolbar { align-items:flex-start; }
}
@media(max-width:400px){ .cg-field-grid{gap:0 .6rem;} .cg-panel{padding:1rem;} .cg-buttons{gap:.4rem;} }