/* Studio adds a canvas workspace but deliberately inherits MatSpell's tokens, cards, buttons and forms. */
.studio-page { max-width: none; }
.studio-jobs-table td, .studio-jobs-table th { vertical-align: middle; }
.studio-canvas-shell { background: var(--matrix-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); display: grid; place-items: center; min-height: 460px; }
.studio-canvas { max-width: 100%; max-height: 560px; width: auto; height: auto; box-shadow: var(--shadow-md); background: var(--matrix-ink); }
.studio-editor-grid { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) minmax(230px, 300px); gap: var(--space-4); align-items: start; }
.studio-panel { display: grid; gap: var(--space-3); }
.studio-template { width: 100%; text-align: left; padding: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; color: var(--color-text); }
.studio-template:hover, .studio-template.is-selected { border-color: var(--color-primary); background: var(--color-primary-light); }
.studio-template-title { display: block; font-weight: var(--font-weight-semibold); }
.studio-template-meta { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.studio-image-preview { width: 100%; max-height: 150px; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius); }
.studio-status-waiting { background: var(--color-grey-bg); color: var(--color-text-muted); }
.studio-status-ready, .studio-status-draft { background: var(--color-blue-bg); color: var(--color-blue); }
.studio-status-submitted { background: var(--color-orange-bg); color: var(--color-orange); }
.studio-status-reverted { background: var(--color-red-bg); color: var(--color-red); }
@media (max-width: 1080px) { .studio-editor-grid { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); } .studio-panel.studio-context-panel { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .studio-editor-grid { grid-template-columns: 1fr; } .studio-panel.studio-context-panel { grid-column: auto; grid-template-columns: 1fr; } .studio-canvas-shell { min-height: auto; padding: var(--space-2); } }

/* Full native editor: MatSpell controls and tokens wrap the original Studio capability set. */
.studio-workspace { display:grid; gap:var(--space-3); min-width:0; }
.studio-toolbar { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3); position:sticky; top:0; z-index:8; flex-wrap:wrap; }
.studio-toolbar .select { width:auto; min-width:100px; }
.studio-toolbar .studio-platform { min-width:220px; }
.studio-inline { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); }
.studio-full-grid { display:grid; grid-template-columns:minmax(250px,310px) minmax(440px,1fr) minmax(250px,310px); gap:var(--space-3); align-items:start; }
.studio-toolbox,.studio-inspector { display:grid; gap:var(--space-3); max-height:calc(100vh - 190px); overflow:auto; padding-right:2px; }
.studio-section { padding:0; overflow:hidden; }
.studio-section>summary { cursor:pointer; list-style:none; padding:var(--space-3); font-weight:var(--font-weight-semibold); border-bottom:1px solid transparent; }
.studio-section[open]>summary { border-color:var(--color-border); }
.studio-section-body { padding:var(--space-3); display:grid; gap:var(--space-3); }
.studio-stage { position:sticky; top:88px; min-width:0; }
.studio-canvas-wrap { min-height:520px; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--matrix-canvas); display:grid; place-items:center; overflow:auto; }
.studio-canvas-wrap .studio-canvas { width:100%; max-height:70vh; object-fit:contain; touch-action:none; cursor:crosshair; }
.studio-canvas-help { text-align:center; font-size:var(--text-xs); }
.studio-template-list { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.studio-template { min-height:62px; }
.studio-template strong,.studio-template span { display:block; }
.studio-template span { color:var(--color-text-muted); font-size:var(--text-xs); margin-top:2px; }
.studio-catalog { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.studio-icon { font-size:18px; min-width:38px; }
.studio-assets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); max-height:240px; overflow:auto; }
.studio-asset { display:grid; gap:4px; padding:5px; border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-bg); color:var(--color-text); cursor:pointer; text-align:left; overflow:hidden; }
.studio-asset:hover { border-color:var(--color-primary); }
.studio-asset img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:calc(var(--radius) - 2px); }
.studio-asset span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--text-xs); }
.studio-layer { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; border:1px solid var(--color-border); border-radius:var(--radius); }
.studio-layer.is-selected { border-color:var(--color-primary); background:var(--color-primary-light); }
.studio-layer [data-layer-select] { justify-content:flex-start; overflow:hidden; text-overflow:ellipsis; }
.studio-layer-inspector,.studio-history { display:grid; gap:var(--space-2); }
.studio-history-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.studio-history-row button:first-child { display:grid; text-align:left; justify-content:stretch; }
.studio-history-row span { display:block; color:var(--color-text-muted); font-size:var(--text-xs); }
.studio-mini { border:1px solid var(--color-border); padding:var(--space-2); border-radius:var(--radius); }
.studio-mini summary { cursor:pointer; font-weight:var(--font-weight-medium); }
.studio-mini>*:not(summary) { margin-top:var(--space-2); }
.studio-context { display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-3); margin:0; font-size:var(--text-sm); }
.studio-context dt { color:var(--color-text-muted); }.studio-context dd { margin:0; overflow-wrap:anywhere; }
@media(max-width:1250px){.studio-full-grid{grid-template-columns:260px minmax(400px,1fr)}.studio-inspector{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}.studio-stage{top:120px}}
@media(max-width:800px){.studio-full-grid{grid-template-columns:1fr}.studio-toolbox,.studio-inspector{grid-template-columns:1fr;max-height:none;overflow:visible}.studio-stage{position:static;grid-row:1}.studio-canvas-wrap{min-height:300px;padding:var(--space-2)}.studio-toolbar{position:static}.studio-toolbar>*{flex:1}.studio-toolbar .studio-platform{min-width:100%}}